*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; }
.ms { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* ── DARK ───────────────────────────── */
.dark body       { background:#0b1326; color:#dae2fd; }
.dark .nav-bg    { background:#0b1326; border-color:rgba(70,69,84,.2); }
.dark .foot-bg   { background:#171f33; border-color:rgba(70,69,84,.2); }
.dark .card      { background:#171f33; border-color:rgba(70,69,84,.15); }
.dark .card-hi   { background:#222a3d; border-color:rgba(70,69,84,.15); }
.dark .card-hero { background:#222a3d; }
.dark .row:hover { background:#2d3449; }
.dark .sep       { border-color:rgba(70,69,84,.22); }
.dark .muted     { color:#918fa0; }
.dark .sub       { color:#c7c4d7; }
.dark .inp       { background:#060e20; border-color:rgba(70,69,84,.35); color:#dae2fd; }
.dark .inp::placeholder { color:#918fa0; }
.dark .inp:focus { border-color:#c0c1ff; outline:none; }
.dark .bp        { background-image:radial-gradient(#464554 1px,transparent 1px); background-size:20px 20px; opacity:.05; }
.dark .accent    { color:#c0c1ff; }
.dark .accent-bg { background:#c0c1ff; color:#1000a9; }
.dark .tert      { color:#ffb597; }

/* ── LIGHT ──────────────────────────── */
:root.light body       { background:#f0f2f8; color:#0d1630; }
:root.light .nav-bg    { background:#fff; border-color:rgba(140,142,170,.22); }
:root.light .foot-bg   { background:#fff; border-color:rgba(140,142,170,.2); }
:root.light .card      { background:#fff; border-color:rgba(140,142,170,.2); }
:root.light .card-hi   { background:#eef0f8; border-color:rgba(140,142,170,.2); }
:root.light .card-hero { background:#eef0f8; }
:root.light .row:hover { background:#e3e6f2; }
:root.light .sep       { border-color:rgba(140,142,170,.22); }
:root.light .muted     { color:#7b7e96; }
:root.light .sub       { color:#4a5168; }
:root.light .inp       { background:#f3f5fb; border-color:rgba(140,142,170,.35); color:#0d1630; }
:root.light .inp::placeholder { color:#9496ae; }
:root.light .inp:focus { border-color:#3b3bc9; outline:none; }
:root.light .bp        { background-image:radial-gradient(#a0a2bc 1px,transparent 1px); background-size:20px 20px; opacity:.1; }
:root.light .accent    { color:#3b3bc9; }
:root.light .accent-bg { background:#3b3bc9; color:#fff; }
:root.light .tert      { color:#b8430a; }

/* ── TRANSITIONS ────────────────────── */
body,nav,footer,.card,.card-hi,.card-hero,.nav-bg,.foot-bg,
h1,h2,h3,h4,p,span,a,div,button,td,th {
  transition:background-color .27s ease,color .27s ease,border-color .27s ease;
}

/* ── LOGO ───────────────────────────── */
.logo-t { color:#c0c1ff; }
.logo-d { color:#ffb597; }
:root.light .logo-t { color:#3b3bc9; }
:root.light .logo-d { color:#b8430a; }

/* ── TOGGLE ─────────────────────────── */
.tog { display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.t-track {
  position:relative; width:42px; height:22px;
  background:#222a3d; border-radius:2px;
  border:1px solid rgba(70,69,84,.6); flex-shrink:0;
  transition:background .28s,border-color .28s;
}
:root.light .t-track { background:#d8ddf0; border-color:rgba(160,162,188,.5); }
.t-thumb {
  position:absolute; top:3px; left:3px; width:14px; height:14px;
  background:#c0c1ff; border-radius:1px;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),background .28s;
}
:root.light .t-thumb { transform:translateX(18px); background:#3b3bc9; }
.t-ico { font-size:13px !important; color:#918fa0; }
:root.light .t-ico { color:#7b7e96; }

/* ── CAT BADGES ─────────────────────── */
.cat {
  display:inline-flex; align-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:9px;
  text-transform:uppercase; letter-spacing:.07em;
  padding:2px 7px; border-radius:2px; border:1px solid; white-space:nowrap;
}
.c-json { background:rgba(100,210,150,.1); color:#64d296; border-color:rgba(100,210,150,.22); }
:root.light .c-json { background:rgba(22,140,72,.08);  color:#168c48; border-color:rgba(22,140,72,.22); }

/* ── SEARCH ─────────────────────────── */
.s-wrap { position:relative; }
.s-wrap .s-ico { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:17px !important; }

/* ── ACE EDITOR STYLES ─────────────── */
.ace_editor { border: 1px solid transparent !important; }
.ace_duplicate-line { background: rgba(234, 179, 8, 0.25); position: absolute; z-index: 20; border-left: 3px solid #eab308; }