/* =========================================================================
   DailyDomains Pro — Design System
   Terminal-grade dark UI for domain data. Two accents: signal gold (scarcity/
   premium) + ledger teal (live/available). Mono face used wherever domains
   or numbers appear, because the data itself is the texture of the product.
   ========================================================================= */

:root{
  /* ---- Ink (dark, default) ---- */
  --bg:            #0B0E14;
  --bg-elevated:   #10141C;
  --surface:       #131722;
  --surface-2:     #1A1F2B;
  --border:        #232A38;
  --border-soft:   #1B212C;

  --text:          #E8EAED;
  --text-muted:    #8B92A0;
  --text-faint:    #5B6373;

  --gold:          #F2B33D;
  --gold-soft:     #F2B33D1A;
  --gold-dim:      #C8932A;

  --teal:          #34D1A8;
  --teal-soft:     #34D1A81A;

  --red:           #E5484D;
  --red-soft:      #E5484D1A;

  --blue:          #5B8DEF;

  --shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px -12px rgba(0,0,0,0.55);
  --radius: 14px;
  --radius-sm: 9px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ---- Paper (light mode) ---- */
:root.light{
  --bg:            #F6F5F1;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F0EEE8;
  --border:        #E4E1D8;
  --border-soft:   #ECEAE2;

  --text:          #16181D;
  --text-muted:    #5A5F6B;
  --text-faint:    #8B8F99;

  --gold-dim:      #B9831F;
  --shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 28px -14px rgba(20,20,10,0.18);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
.font-display{ font-family:var(--font-display); }
.font-mono{ font-family:var(--font-mono); }

::selection{ background:var(--gold); color:#0B0E14; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-dim); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ---------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------- */
.surface{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.surface-2{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); }

.bg-grid{
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:36px 36px;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:.875rem;
  padding:.65rem 1.15rem; border-radius:10px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap; user-select:none;
}
.btn:active{ transform:translateY(1px); }
.btn-gold{ background:var(--gold); color:#15110A; box-shadow:0 8px 22px -8px rgba(242,179,61,0.55); }
.btn-gold:hover{ background:#F7C667; }
.btn-outline{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-outline:hover{ border-color:var(--gold-dim); color:var(--gold); }
.btn-ghost{ background:transparent; color:var(--text-muted); }
.btn-ghost:hover{ color:var(--text); background:var(--surface-2); }
.btn-danger{ background:var(--red-soft); color:var(--red); border-color:#E5484D33; }
.btn-danger:hover{ background:#E5484D2A; }
.btn-sm{ padding:.4rem .8rem; font-size:.78rem; border-radius:8px; }
.btn-block{ width:100%; }

/* ---------------------------------------------------------------------
   Badges / pills / status
   --------------------------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; padding:.22rem .55rem; border-radius:999px; border:1px solid transparent;
}
.pill-new{ background:var(--teal-soft); color:var(--teal); border-color:#34D1A833; }
.pill-premium{ background:var(--gold-soft); color:var(--gold); border-color:#F2B33D33; }
.pill-dropping{ background:var(--red-soft); color:var(--red); border-color:#E5484D33; }
.pill-danger{ background:var(--red-soft); color:var(--red); border-color:#E5484D33; }
.pill-muted{ background:var(--surface-2); color:var(--text-muted); border-color:var(--border); }

.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot-teal{ background:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); }
.dot-gold{ background:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.dot-red{ background:var(--red); box-shadow:0 0 0 3px var(--red-soft); }

.tld-chip{
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  padding:.18rem .5rem; border-radius:6px; background:var(--surface-2); color:var(--text-muted);
  border:1px solid var(--border);
}

/* ---------------------------------------------------------------------
   Inputs
   --------------------------------------------------------------------- */
.field{
  width:100%; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:.65rem .85rem; font-size:.875rem; font-family:var(--font-body);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder{ color:var(--text-faint); }
.field:focus{ border-color:var(--gold-dim); box-shadow:0 0 0 3px var(--gold-soft); outline:none; }
.field-mono{ font-family:var(--font-mono); }
label.field-label{ font-size:.78rem; font-weight:600; color:var(--text-muted); margin-bottom:.35rem; display:block; }

/* ---------------------------------------------------------------------
   Ticker (signature element)
   --------------------------------------------------------------------- */
.ticker-row{
  display:flex; gap:1.75rem; white-space:nowrap;
  animation:ticker 38s linear infinite;
}
.ticker-wrap:hover .ticker-row{ animation-play-state:paused; }
@keyframes ticker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.ticker-item{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.85rem; color:var(--text-muted);
}
.ticker-item .domain{ color:var(--text); font-weight:600; }

/* ---------------------------------------------------------------------
   Table (terminal-style data grid)
   --------------------------------------------------------------------- */
.data-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; }
.data-table thead th{
  position:sticky; top:0; background:var(--bg-elevated); z-index:10;
  text-align:left; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); font-weight:600; padding:.8rem 1rem; border-bottom:1px solid var(--border);
}
.data-table tbody td{ padding:.8rem 1rem; border-bottom:1px solid var(--border-soft); color:var(--text); }
.data-table tbody tr{ transition:background .12s ease; }
.data-table tbody tr:hover{ background:var(--surface-2); }
.data-table tbody tr:last-child td{ border-bottom:none; }

/* ---------------------------------------------------------------------
   Sidebar / app shell
   --------------------------------------------------------------------- */
.nav-link{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:9px;
  color:var(--text-muted); font-size:.875rem; font-weight:500; transition:background .15s, color .15s;
}
.nav-link:hover{ background:var(--surface-2); color:var(--text); }
.nav-link.active{ background:var(--gold-soft); color:var(--gold); }
.nav-link.active i{ color:var(--gold); }
.nav-link i{ width:18px; text-align:center; color:var(--text-faint); }

/* ---------------------------------------------------------------------
   Misc utility
   --------------------------------------------------------------------- */
.fade-up{ animation:fadeUp .6s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

.glow-gold{ box-shadow:0 0 0 1px #F2B33D33, 0 18px 40px -18px rgba(242,179,61,.45); }

.kpi-spark{ height:34px; }

.skeleton{ background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 37%,var(--surface) 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite; }
@keyframes skeleton{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

.toggle-track{ width:44px; height:24px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); position:relative; cursor:pointer; transition:background .2s; }
.toggle-track .toggle-knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--text-muted); transition:transform .2s ease, background .2s; }
.toggle-track.on{ background:var(--gold-soft); border-color:#F2B33D55; }
.toggle-track.on .toggle-knob{ transform:translateX(20px); background:var(--gold); }

.divider-label{ display:flex; align-items:center; gap:.75rem; color:var(--text-faint); font-size:.75rem; }
.divider-label::before, .divider-label::after{ content:""; flex:1; height:1px; background:var(--border); }