/* Neon Line theme (Settings → Appearance → Theme). Applies only under <html data-theme="neonline">, on top
   of app.css. Hot pink #ff0a78, cyan #00f0ff, neon green #39ff14 and dark #16161f, drawn with thin neon
   lines, soft rounded panels and pill buttons. All still: no live blur, nothing that loops. */

/* the background: a thin-line horizon (public/bg/neonline.svg, made by tools/make-backgrounds.js).
   Also used by the theme preview in Settings → Appearance. */
.bg-art[data-bg="neonline"], :root[data-theme="neonline"] .backdrop {
  background:
    linear-gradient(180deg, rgba(5, 5, 10, var(--nl-shade-a, 0)), rgba(5, 5, 10, var(--nl-shade-b, .25))),
    url('/bg/neonline.svg') center / cover no-repeat,
    var(--bg, #100e22);
}
.bg-art[data-bg="neonline"]::before, :root[data-theme="neonline"] .backdrop::before { content: none; }
.bg-art[data-bg="neonline"] i {
  background: var(--nl-card-a, rgba(52, 47, 82, .7)) !important; border-color: var(--line-2, rgba(255, 255, 255, .14)) !important;
  box-shadow: inset 0 1px 0 rgba(0, 240, 255, .55);
}
.bg-art[data-bg="neonline"] i:nth-child(1) { background: var(--nl-side, rgba(30, 27, 52, .8)) !important; box-shadow: none; }

:root[data-theme="neonline"] {
  --line-3: rgba(0, 240, 255, .45);
  --text: #f6f8fc;

  --pink: #ff0a78;
  --cyan: #00f0ff;
  --lime: #39ff14;
  --neon: linear-gradient(90deg, #ff0a78, #00f0ff);

  --accent: #00f0ff;
  --accent-2: #7af7ff;
  --accent-grad: linear-gradient(90deg, #ff0a78, #b04cff 50%, #00f0ff);
  --accent-bg: rgba(0, 240, 255, .08);
  --accent-line: rgba(0, 240, 255, .4);
  --green: #39ff14;
  --green-bg: rgba(57, 255, 20, .08);
  --green-line: rgba(57, 255, 20, .35);
  --red: #ff3b93;
  --red-bg: rgba(255, 10, 120, .1);
  --red-line: rgba(255, 10, 120, .4);
  --blue: #00f0ff;
  --blue-bg: rgba(0, 240, 255, .08);
  --blue-line: rgba(0, 240, 255, .35);
  --amber: #ffd60a;
  --amber-bg: rgba(255, 214, 10, .08);
  --amber-line: rgba(255, 214, 10, .35);

  /* soft panels: see-through dusk violet, a faint top highlight, a long soft shadow, no hard edges */
  --card: linear-gradient(180deg, var(--nl-card-a), var(--nl-card-b));
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -28px rgba(0, 0, 0, .8);
  --pop-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px -20px rgba(0, 0, 0, .85);
  --r-lg: 18px;
  --r: 12px;
  --r-sm: 10px;

  --font: 'Exo 2', Inter, system-ui, sans-serif;
  --display: 'Exo 2', Inter, system-ui, sans-serif;
  --digits: Orbitron, 'Exo 2', system-ui, sans-serif;
}
[data-theme="neonline"] ::selection { background: rgba(255, 10, 120, .4); }
[data-theme="neonline"] :focus-visible { outline-color: var(--cyan); }

/* ---------- sidebar ---------- */
[data-theme="neonline"] .sidebar { background: var(--nl-side); border-right-color: var(--line); }
[data-theme="neonline"] .brand-logo { content: url('/logo-neon.svg'); border-radius: 0; filter: drop-shadow(0 0 8px rgba(255, 10, 120, .35)); }
[data-theme="neonline"] .brand-name { font: 600 18px/1 var(--font); letter-spacing: .06em; }
[data-theme="neonline"] .acct.active { background: rgba(255, 255, 255, .07); border-color: transparent; }
[data-theme="neonline"] .acct.active::before { width: 2px; background: var(--neon); box-shadow: 0 0 10px rgba(0, 240, 255, .7); }
[data-theme="neonline"] .acct-group-count { background: transparent; box-shadow: inset 0 0 0 1px rgba(0, 240, 255, .3); color: var(--cyan); }
[data-theme="neonline"] .tag { background: transparent; color: #ff5aa6; box-shadow: inset 0 0 0 1px rgba(255, 10, 120, .45); border-radius: 99px; padding: 1px 6px; }
[data-theme="neonline"] .dot.online { box-shadow: 0 0 8px #39ff14; }
[data-theme="neonline"] .dot.connecting, [data-theme="neonline"] .dot.joining, [data-theme="neonline"] .dot.reconnecting { box-shadow: 0 0 8px #ffd60a; }

/* ---------- slim pill buttons ---------- */
[data-theme="neonline"] .btn { border-radius: 99px; font-weight: 600; letter-spacing: .02em; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
[data-theme="neonline"] .btn:hover { background: rgba(0, 240, 255, .07); border-color: rgba(0, 240, 255, .45); }
[data-theme="neonline"] .btn.primary { color: #fff; border-color: transparent; background: linear-gradient(90deg, #ff0a78, #c13cff 55%, #00c8ff); box-shadow: 0 6px 22px -8px rgba(255, 10, 120, .7); }
[data-theme="neonline"] .btn.primary:hover { background: linear-gradient(90deg, #ff3b93, #cf5cff 55%, #33dcff); }
[data-theme="neonline"] .btn.danger { background: transparent; color: #ff5aa6; border-color: rgba(255, 10, 120, .5); }
[data-theme="neonline"] .btn.danger:hover { background: rgba(255, 10, 120, .1); }
[data-theme="neonline"] .btn.danger.solid { color: #fff; border-color: transparent; background: linear-gradient(90deg, #ff0a78, #ff3b93); box-shadow: 0 6px 22px -8px rgba(255, 10, 120, .8); }
[data-theme="neonline"] .btn.success { color: #041400; background: #39ff14; border-color: transparent; }
[data-theme="neonline"] .btn.ghost { background: transparent; }
[data-theme="neonline"] .icon-btn { border-radius: 99px; }
[data-theme="neonline"] .icon-btn:hover { background: rgba(0, 240, 255, .08); border-color: rgba(0, 240, 255, .35); color: var(--cyan); }
[data-theme="neonline"] .icon-btn.play { color: var(--lime); }
[data-theme="neonline"] .icon-btn.stop { color: var(--pink); }

/* ---------- inputs and switches ---------- */
[data-theme="neonline"] input, [data-theme="neonline"] select, [data-theme="neonline"] textarea { background-color: var(--nl-field); border-color: var(--line-2); }
[data-theme="neonline"] input:focus, [data-theme="neonline"] select:focus, [data-theme="neonline"] textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 240, 255, .1), 0 0 12px rgba(0, 240, 255, .18); }
[data-theme="neonline"] .toggle i { background: rgba(255, 255, 255, .16); box-shadow: none; }
[data-theme="neonline"] .toggle i::after { box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
[data-theme="neonline"] .toggle input:checked + i { background: #39ff14; box-shadow: 0 0 10px rgba(57, 255, 20, .45); }
[data-theme="neonline"] .toggle input:checked + i::after { background: #051400; }
[data-theme="neonline"] .seg { border-radius: 99px; background: var(--nl-field); border-color: var(--line); }
[data-theme="neonline"] .seg button { border-radius: 99px; }
[data-theme="neonline"] #ctLook { border-radius: 16px; } /* two rows of options: a pill-shaped box would look odd */
[data-theme="neonline"] .seg button.on { color: var(--cyan); background: rgba(0, 240, 255, .1); box-shadow: inset 0 0 0 1px rgba(0, 240, 255, .4); }

/* ---------- topbar ---------- */
[data-theme="neonline"] .top-avatar { border-radius: 14px; box-shadow: 0 0 0 1px rgba(0, 240, 255, .35), 0 0 20px rgba(0, 240, 255, .18); }
[data-theme="neonline"] .top-dot.online { box-shadow: 0 0 8px #39ff14; }
[data-theme="neonline"] .top-name { font: 600 23px/1.2 var(--font); letter-spacing: .01em; }
[data-theme="neonline"] .pill { background: transparent; }
[data-theme="neonline"] .chip { border-radius: 99px; background: var(--nl-chip); border-color: var(--line-2); }
[data-theme="neonline"] .pulse { background: var(--pink); box-shadow: 0 0 10px #ff0a78; }

/* ---------- key numbers: thin neon line on top, crisp glowing digits ---------- */
[data-theme="neonline"] .kpi { position: relative; }
[data-theme="neonline"] .kpi::before {
  content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; pointer-events: none;
  background: var(--neon); opacity: .7;
}
[data-theme="neonline"] .kpi-val { font: 500 25px/1.15 var(--digits); letter-spacing: .02em; color: #d9fcff; text-shadow: 0 0 12px rgba(0, 240, 255, .35); }
[data-theme="neonline"] .kpi-label > [data-icon] { color: var(--cyan); }
[data-theme="neonline"] .kpi-main { border-color: rgba(57, 255, 20, .18); background: radial-gradient(120% 140% at 0% 0%, rgba(57, 255, 20, .08), transparent 55%), var(--card); }
[data-theme="neonline"] .kpi-main::before { background: linear-gradient(90deg, #39ff14, #00f0ff); }
[data-theme="neonline"] .kpi-main .kpi-label > [data-icon] { color: var(--lime); }
[data-theme="neonline"] .kpi-main .kpi-val { color: #c6ffb3; text-shadow: 0 0 12px rgba(57, 255, 20, .4); }
[data-theme="neonline"] .sellaxe-cta { border-color: rgba(255, 10, 120, .3); background: radial-gradient(120% 160% at 0% 0%, rgba(255, 10, 120, .12), transparent 60%), var(--card); }
[data-theme="neonline"] .sellaxe-cta::before { background: linear-gradient(90deg, #ff0a78, #ff6fb0); }
[data-theme="neonline"] .sellaxe-cta .kpi-label > [data-icon] { color: var(--pink); }
[data-theme="neonline"] .sellaxe-cta.running { border-color: rgba(57, 255, 20, .3); background: radial-gradient(120% 160% at 0% 0%, rgba(57, 255, 20, .1), transparent 60%), var(--card); }
[data-theme="neonline"] .sellaxe-cta.running::before { background: linear-gradient(90deg, #39ff14, #00f0ff); }

/* ---------- cards: the same thin neon line along the top ---------- */
[data-theme="neonline"] .card { position: relative; }
[data-theme="neonline"] .card::before {
  content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; pointer-events: none; z-index: 1;
  background: var(--neon); opacity: .45;
}
[data-theme="neonline"] .card-head h3 { font: 600 15px var(--font); letter-spacing: .01em; }
[data-theme="neonline"] .card-head h3 [data-icon] { width: auto; height: auto; background: none; box-shadow: none; color: var(--cyan); }
[data-theme="neonline"] .card-head h3 [data-icon] svg { width: 17px; height: 17px; }

/* thin glowing bars */
[data-theme="neonline"] .bar { height: 5px; background: rgba(255, 255, 255, .1); box-shadow: none; }
[data-theme="neonline"] .bar.thin { height: 4px; }
[data-theme="neonline"] .bar i.hp { background: linear-gradient(90deg, #ff0a78, #ff6fb0); box-shadow: 0 0 8px rgba(255, 10, 120, .6); }
[data-theme="neonline"] .bar i.food { background: linear-gradient(90deg, #ffb300, #ffd60a); box-shadow: 0 0 8px rgba(255, 214, 10, .45); }
[data-theme="neonline"] .bar i.xp { background: linear-gradient(90deg, #00f0ff, #39ff14); box-shadow: 0 0 8px rgba(57, 255, 20, .5); }

/* inventory */
[data-theme="neonline"] .slot { border-radius: 9px; background: var(--nl-field); border-color: var(--line); }
[data-theme="neonline"] .slot:hover { border-color: rgba(0, 240, 255, .45); background: rgba(0, 240, 255, .05); }
[data-theme="neonline"] .slot.held { border-color: var(--cyan); background: rgba(0, 240, 255, .07); box-shadow: 0 0 10px rgba(0, 240, 255, .35); }
[data-theme="neonline"] .slot.sel { border-color: var(--pink); box-shadow: 0 0 10px rgba(255, 10, 120, .35); }
[data-theme="neonline"] .hotbar { border-top-color: rgba(255, 255, 255, .08); }

/* scoreboard and chat */
[data-theme="neonline"] .me-bal { font: 500 20px var(--digits); color: #c6ffb3; text-shadow: 0 0 12px rgba(57, 255, 20, .4); }
[data-theme="neonline"] .sb, [data-theme="neonline"] .chat-log { background: var(--nl-log); border-color: var(--line); }
[data-theme="neonline"] .chat-input .prompt { color: var(--lime); }
[data-theme="neonline"] .quick button:hover { color: var(--cyan); border-color: rgba(0, 240, 255, .5); background: rgba(0, 240, 255, .08); }

/* ---------- tabs ---------- */
[data-theme="neonline"] .tabs button { font-weight: 600; }
[data-theme="neonline"] .tabs button.active { color: #fff; }
[data-theme="neonline"] .tabs button.active [data-icon] { color: var(--cyan); }
[data-theme="neonline"] .tabs em { background: rgba(255, 10, 120, .14); color: #ff5aa6; }
[data-theme="neonline"] .tab-ink { background: var(--neon); box-shadow: 0 0 10px rgba(0, 240, 255, .7); }
[data-theme="neonline"] .opt-section, [data-theme="neonline"] .ev-day, [data-theme="neonline"] .logs-group h4 { color: var(--pink); }
[data-theme="neonline"] .opt.sub::before { background: rgba(255, 10, 120, .3); }
[data-theme="neonline"] .stat .s-v { font-family: var(--digits); font-weight: 500; font-size: 13px; color: #d9fcff; }
[data-theme="neonline"] .proxy-item.active { border-color: rgba(0, 240, 255, .5); background: rgba(0, 240, 255, .07); }

/* ---------- windows ---------- */
[data-theme="neonline"] .modal { background: var(--nl-scrim); }
[data-theme="neonline"] .modal-card, [data-theme="neonline"] .dialog-card, [data-theme="neonline"] .window-card {
  border-color: rgba(255, 255, 255, .12); background: linear-gradient(180deg, var(--nl-modal-a), var(--nl-modal-b));
  box-shadow: var(--pop-shadow), inset 0 1px 0 rgba(0, 240, 255, .35);
}
[data-theme="neonline"] .set-nav button.on, [data-theme="neonline"] .set-nav button.on [data-icon] { color: var(--cyan); }
[data-theme="neonline"] .set-nav-ink { background: rgba(0, 240, 255, .08); box-shadow: inset 0 0 0 1px rgba(0, 240, 255, .35); }
[data-theme="neonline"] .bg-opt.on { border-color: var(--cyan); background: rgba(0, 240, 255, .06); box-shadow: 0 0 0 3px rgba(0, 240, 255, .1); }
[data-theme="neonline"] .bg-name [data-icon] { color: var(--cyan); }
[data-theme="neonline"] .mc-btn:hover { border-color: rgba(0, 240, 255, .5); background: rgba(0, 240, 255, .08); }
[data-theme="neonline"] .toast { box-shadow: var(--pop-shadow), inset 0 1px 0 rgba(0, 240, 255, .4); }
[data-theme="neonline"] .toast.error, [data-theme="neonline"] .toast.err { box-shadow: var(--pop-shadow), inset 0 1px 0 rgba(255, 10, 120, .6); }
[data-theme="neonline"] .login-card { box-shadow: var(--pop-shadow), inset 0 1px 0 rgba(0, 240, 255, .35); }
[data-theme="neonline"] * { scrollbar-color: rgba(0, 240, 255, .2) transparent; }

@media (max-width: 900px) {
  [data-theme="neonline"] .sidebar { background: var(--nl-side-solid); }
  [data-theme="neonline"] .kpi-val { font-size: 21px; }
}

/* ---------- Night: Neon Line's brightness ----------
   Dark with a hint of violet; muted text stays above 5:1 contrast on the panels. Also colours the Neon Line
   preview in Settings → Appearance. */
:root[data-theme="neonline"], .bg-art[data-bg="neonline"] {
  --bg: #08070f;
  --bg-solid: #151420;
  --surface: rgba(255, 255, 255, 0.034);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.091);
  --well: rgba(3, 2, 7, 0.342);
  --line: rgba(255, 255, 255, 0.068);
  --line-2: rgba(255, 255, 255, 0.11);
  --text-2: #adb8c8;
  --muted: #818ba3;
  --nl-card-a: rgba(31, 30, 46, 0.685);
  --nl-card-b: rgba(19, 18, 30, 0.685);
  --nl-side: rgba(12, 11, 21, 0.68);
  --nl-side-solid: #0f0e19;
  --nl-field: rgba(3, 2, 7, 0.358);
  --nl-chip: rgba(28, 27, 43, 0.463);
  --nl-log: rgba(3, 3, 7, 0.44);
  --nl-scrim: rgba(4, 4, 11, 0.705);
  --nl-modal-a: #1a1928;
  --nl-modal-b: #11101b;
  --nl-shade-a: 0.375;
  --nl-shade-b: 0.528;
}