/* LootDrop tool pages: the neon arcade look (first built for SwapDrop).
   Dark by default on tool pages; the footer switch flips to the light version and remembers it.
   Works through the shared color tokens, so every tool's own cards, inputs and lists pick it up. */
html.nx{--nx-y:#FFD329;--nx-c:#22D3EE;--nx-b:#38BDF8}

/* ---------- dark ---------- */
html.nx[data-theme="dark"]{
  --bg:#050B18; --surface:#0B172C; --surface-2:#0F1F38; --ink:#F5F9FF; --muted:#9FB0C6; --line:#1A2C48; --line-2:#284268;
  --accent:#22D3EE; --accent-soft:rgba(34,211,238,.14); --accent-text:#7DE8F8; --blue-ink:#7DE8F8;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 50px -30px rgba(0,0,0,.9);
  --nx-glow-y:rgba(255,211,41,.6); --nx-glow-c:rgba(34,211,238,.55); --nx-beam:.5;
  --nx-sky:radial-gradient(60% 50% at 85% 0%,rgba(56,189,248,.22),transparent 70%),radial-gradient(50% 45% at 0% 30%,rgba(255,211,41,.10),transparent 70%),linear-gradient(180deg,#071225 0%,#050B18 60%);
  background:#050B18; color-scheme:dark}
/* ---------- light ---------- */
html.nx[data-theme="light"]{
  --bg:#EEF5FF; --surface:#FFFFFF; --surface-2:#F3F8FF; --ink:#09172B; --muted:#4E6079; --line:#D6E3F3; --line-2:#BACCE4;
  --accent:#0891B2; --accent-soft:#DDF5FB; --accent-text:#0B6E87; --blue-ink:#0B6E87;
  --shadow:0 1px 2px rgba(9,23,43,.05),0 18px 40px -26px rgba(8,70,120,.35);
  --nx-glow-y:rgba(242,194,0,.45); --nx-glow-c:rgba(8,145,178,.35); --nx-beam:.55;
  --nx-sky:radial-gradient(60% 50% at 85% 0%,rgba(56,189,248,.22),transparent 70%),radial-gradient(50% 45% at 0% 30%,rgba(255,211,41,.22),transparent 70%),linear-gradient(180deg,#F7FBFF 0%,#EAF2FD 100%);
  background:#EEF5FF; color-scheme:light}

/* backdrop: soft glows plus the two diagonal beams from the covers */
html.nx body:not(.stdc){background:transparent}
html.nx body:not(.stdc)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--nx-sky)}
html.nx body:not(.stdc)::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--nx-beam);
  background:linear-gradient(115deg,transparent 58%,rgba(255,211,41,.10) 58%,rgba(255,211,41,.10) 62%,transparent 62%,transparent 64%,rgba(56,189,248,.10) 64%,rgba(56,189,248,.10) 68%,transparent 68%)}
html.nx[data-theme="light"] body:not(.stdc)::after{background:linear-gradient(115deg,transparent 58%,rgba(255,211,41,.22) 58%,rgba(255,211,41,.22) 62%,transparent 62%,transparent 64%,rgba(56,189,248,.16) 64%,rgba(56,189,248,.16) 68%,transparent 68%)}

/* top bar */
html.nx .tool-bar{background:rgba(5,11,24,.94);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px -20px rgba(34,211,238,.6)}

/* buttons: yellow ones glow, the rest are glassy */
html.nx .btn.gold,html.nx .btn.primary,html.nx .btn.swb{box-shadow:0 0 0 1px rgba(255,211,41,.35),0 10px 26px -10px var(--nx-glow-y)}
html.nx[data-theme="dark"] .btn:not(.gold):not(.primary):not(.swb):not([class*="lsb"]):not([class*="sdb"]){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);color:#F5F9FF}
@media (hover:hover) and (pointer:fine){html.nx[data-theme="dark"] .btn:not(.gold):not(.primary):not(.swb):hover{background:rgba(255,255,255,.12)}}
html.nx .btn:active{transform:scale(.97)}

/* inputs */
html.nx[data-theme="dark"] main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),html.nx[data-theme="dark"] main select,html.nx[data-theme="dark"] main textarea{background-color:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#F5F9FF}
html.nx[data-theme="dark"] main select option{color:#09172B;background:#fff}
html.nx main input:focus-visible,html.nx main select:focus-visible,html.nx main textarea:focus-visible{border-color:var(--nx-c);box-shadow:0 0 0 3px rgba(34,211,238,.25);outline:none}
html.nx :focus-visible{outline-color:var(--nx-y)}

/* cards and panels share one glassy edge */
html.nx[data-theme="dark"] main .card2,html.nx[data-theme="dark"] main .panel,html.nx[data-theme="dark"] main .card:not(.fc){background:linear-gradient(170deg,#0D1B33,#0A1529);border-color:rgba(255,255,255,.09);box-shadow:0 30px 60px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
html.nx[data-theme="light"] main .card2,html.nx[data-theme="light"] main .panel,html.nx[data-theme="light"] main .card:not(.fc){border-color:#D3E4F5;box-shadow:0 1px 2px rgba(9,23,43,.04),0 20px 44px -30px rgba(8,145,178,.45)}

/* tags, chips and tabs pick up the cyan */
html.nx .tab.on,html.nx .chip.on{box-shadow:0 0 0 1px rgba(255,211,41,.5),0 6px 18px -8px var(--nx-glow-y)}

/* footer and guide */
html.nx[data-theme="dark"] .tool-foot{background:#081325;color:#E6EEF8;--ink:#F5F9FF;--muted:#AFBED2;--line:#1F3756;--surface:#0F2139}
html.nx[data-theme="dark"] .tool-foot a:not(.btn),html.nx[data-theme="dark"] .tf-brand{color:#E6EEF8}
/* yellow buttons always keep navy text, in both themes */
html.nx .btn.gold,html.nx .btn.gold:hover,html.nx .tool-foot a.btn.gold,html.nx .tool-foot a.btn.gold:hover{color:#09172B}
html.nx[data-theme="dark"] details.tg .tg-open{color:#0B1A30;background:#F5F9FF;border-color:#F5F9FF}
html.nx[data-theme="light"] .tool-foot{background:#FFFFFF}

/* pop-up windows */
html.nx[data-theme="dark"] #modal-root .card2,html.nx[data-theme="dark"] #modal-root [role=dialog]{background:#0D1B33;border:1px solid rgba(255,255,255,.14);color:#F5F9FF}
@media print{html.nx body::before,html.nx body::after{display:none}html.nx,html.nx body{background:#fff!important}}

/* Seatcraft keeps its own stylesheet: give its dark tokens the neon navy */
html.nx[data-theme="dark"] body.sc-app,html.nx[data-theme="dark"]{--panel:#0B172C}