* { box-sizing: border-box; }
:root{
  --bg:#0b0f14;            /* base dark */
  --card:#0f141aee;        /* glass card */
  --border:#1f2937;        /* slate-800 */
  --text:#e7ecf5;          /* slate-100 */
  --muted:#a7b0bf;         /* slate-300 */
  --brand:#2563eb;         /* primary */
  --brand-2:#7c3aed;       /* accent */
  --ok:#10b981;            /* green */
  --warn:#f59e0b;          /* amber */
  --err:#ef4444;           /* red */
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fafc; --card:#ffffffee; --border:#e5e7eb; --text:#0b1220; --muted:#4b5563;
  }
}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background: var(--bg);
  /* sfondo stile shorturl.fm: radial + linear gradient */
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.28), transparent 55%),
    radial-gradient(1000px 500px at 90% 0%, rgba(37,99,235,.22), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));
  background-attachment: fixed;
}
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }

.wrap{ max-width: 960px; margin: 48px auto; padding: 0 20px; }
.header{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background: radial-gradient(120% 120% at 80% 0, var(--brand), var(--brand-2));
  color:#fff; font-weight:800; letter-spacing:.3px; box-shadow: var(--shadow);
}
.brand{ font-size:20px; font-weight:800; letter-spacing:.2px; }

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.hero h1{ font-size: clamp(28px, 3.6vw, 40px); margin: 8px 0 4px; }
.hero p{ margin: 0; color: var(--muted); }

input,button{
  height:48px; padding: 10px 14px; border-radius: 12px;
  border:1px solid var(--border); background: transparent; color: var(--text);
  font-size:16px; outline: none;
}
input::placeholder{ color: #94a3b8; }
button{ cursor: pointer; user-select:none; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 0 16px; font-weight:700; border:0; height:48px; border-radius:12px;
}
.btn-primary{ background: var(--brand); color:#fff; box-shadow: 0 6px 18px rgba(37,99,235,.35); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37,99,235,.45); }
.btn-ghost{ background: transparent; border:1px solid var(--border); color: var(--text); }
.btn-ghost:hover{ background: rgba(255,255,255,.04); }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.stack{ display:grid; gap:12px; }
.grid{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
@media(max-width:900px){ .grid{ grid-template-columns: 1fr; } }

pre{ background: transparent; border:1px dashed var(--border); border-radius:12px; padding:12px; overflow:auto; color: var(--muted); }

/* form principale */
#fCreate input#url{ flex:1 1 520px; min-width: 220px; }
#out{ margin-top:10px; font-size:15px; }
#out a{ font-weight:700; }

/* card elenco link / cronologia */
.list-item{
  display:flex; justify-content: space-between; align-items:flex-start; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.list-item:last-child{ border-bottom:0; }
.list-meta{ min-width:0; flex:1; }
.list-meta .short a{ font-weight:800; }
.list-meta .long{ color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-meta small{ color:var(--muted); }
.btn-sm{ height:38px; padding:0 12px; border-radius:10px; font-weight:700; }
.actions{ display:flex; gap:8px; }

/* badge micro */
.badge{
  display:inline-block; padding:3px 8px; border-radius:999px;
  background: rgba(124,58,237,.15); color:#6047ec;; border:1px solid rgba(124,58,237,.25);
  font-size:12px; font-weight:700;
}

/* toast */
.toast{
  position: fixed; right: 16px; bottom: 16px; background: var(--card);
  border:1px solid var(--border); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow);
  opacity:0; transform: translateY(8px); transition: .18s ease;
}
.toast.show{ opacity:1; transform: translateY(0); }

/* piccole animazioni */
.card, .btn, .list-item { transition: .18s ease; }