*, *::before, *::after { box-sizing: border-box; }

/* Utility: hidden */
.hidden { display: none !important; }

:root {
  --indigo: #4F46E5;
  --indigo-deep: #3730A3;
  --violet: #7C3AED;
  --emerald: #10B981;
  --rose: #F43F5E;
  --ink: #0A0C10;
  --ink-muted: #52576E;
  --surface: #F6F7FB;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Satoshi', 'Inter', sans-serif;
  background-color: var(--surface);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(99,102,241,0.11) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 95% 100%, rgba(124,58,237,0.07) 0%, transparent 65%);
  min-height: 100vh;
  color: var(--ink);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(79,70,229,0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}

.z1 { position: relative; z-index: 1; }

/* ── Typography ── */
.gradient-text {
  background: linear-gradient(130deg, #4F46E5 0%, #7C3AED 55%, #6366F1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Spinner ── */
.spinner {
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .75s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Ping ── */
.ping-ring::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background: var(--emerald);
  animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite;
  opacity:.65;
}
@keyframes ping { 75%,100%{ transform:scale(2.2); opacity:0; } }

/* ── Slide animations ── */
@keyframes slideUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes toastIn   { from{opacity:0;transform:translateX(110%) scale(.96)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toastOut  { from{opacity:1;transform:translateX(0) scale(1)} to{opacity:0;transform:translateX(110%) scale(.96)} }
@keyframes shimmer   { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes scaleIn   { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }

.anim-slide-up   { animation: slideUp   .38s cubic-bezier(.16,1,.3,1) forwards; }
.anim-slide-down { animation: slideDown .28s cubic-bezier(.16,1,.3,1) forwards; }
.anim-fade-in    { animation: fadeIn    .25s ease forwards; }
.anim-scale-in   { animation: scaleIn   .32s cubic-bezier(.16,1,.3,1) forwards; }

/* ── Feature cards ── */
.feature-card { transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease; }
.feature-card:hover { transform: translateY(-5px); }

/* ── Input focus ── */
.url-input:focus { outline:none; }
#input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18), 0 2px 8px rgba(10,12,16,0.07);
}

/* ── Result card ── */
.result-card { background: linear-gradient(135deg,#fff 0%,#f8f7ff 100%); }

/* ── Badge ── */
.badge { font-size:10.5px; letter-spacing:.055em; font-weight:700; text-transform:uppercase; }

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .5s ease,transform .5s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Shimmer ── */
.shimmer {
  background: linear-gradient(90deg,#EDEEF5 0%,#F4F5FB 40%,#EDEEF5 80%);
  background-size:600px 100%;
  animation: shimmer 1.6s infinite;
}

/* ── Toast ── */
#toast { position:fixed; top:22px; right:22px; z-index:9999; max-width:340px; }

/* ── Auth Modal Overlay ── */
#auth-overlay {
  position:fixed; inset:0; z-index:800;
  background: rgba(10,12,16,0.55);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; padding:16px;
}

/* ── Profile dropdown ── */
#profile-dropdown {
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:200px;
  background:#fff;
  border:1px solid rgba(10,12,16,0.09);
  border-radius:14px;
  box-shadow: 0 12px 36px rgba(10,12,16,0.14);
  padding:6px;
  animation: slideDown .22s cubic-bezier(.16,1,.3,1) forwards;
  z-index:200;
}

/* ── Dashboard table ── */
.link-row { transition: background .18s ease; }
.link-row:hover { background: rgba(79,70,229,0.035); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#D1D5E8; border-radius:99px; }

/* Avatar initials */
.avatar {
  width:32px; height:32px; border-radius:50%;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer;
  box-shadow: 0 2px 8px rgba(79,70,229,0.35);
}

/* Tab underline */
.auth-tab.active {
  color: var(--indigo);
  border-bottom: 2px solid var(--indigo);
}
.auth-tab { border-bottom: 2px solid transparent; }

/* Clicks badge */
.clicks-badge {
  display:inline-flex; align-items:center; gap:4px;
  background: rgba(79,70,229,0.08);
  color: var(--indigo);
  border-radius:999px;
  padding:2px 9px;
  font-size:11.5px; font-weight:700;
}

/* Input field style */
.field {
  width:100%;
  border:1.5px solid #E2E4EF;
  border-radius:12px;
  padding:11px 14px;
  font-size:14px;
  font-family:inherit;
  color:var(--ink);
  background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
  outline:none;
}
.field:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.14);
}
.field::placeholder { color:#A0A4BB; }

/* Primary button */
.btn-primary {
  background: var(--indigo);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px 20px;
  font-size:14px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  width:100%;
  transition: background .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 3px 12px rgba(79,70,229,0.35);
}
.btn-primary:hover { background:var(--indigo-deep); box-shadow:0 6px 20px rgba(79,70,229,0.42); }
.btn-primary:active { transform:scale(.98); }

/* Empty state illustration */
.empty-dots span {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:currentColor;
  animation: bounce .9s ease-in-out infinite;
}
.empty-dots span:nth-child(2){ animation-delay:.15s; }
.empty-dots span:nth-child(3){ animation-delay:.30s; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }