/* ── Casa Tasselli · stile "Neon" (12/10/2026) ───────────────────────────────────────────────────────────────
   Il cruscotto scuro di una fintech: fondo quasi nero, card nere con bordo sottile, un solo blocco in evidenza verde lime,
   pillole chiare, nessun vetro. Si attiva con data-skin="neon" sull'elemento html (bottone tavolozza in alto); il tema chiaro
   resta disponibile e dà la variante grigio chiaro. Le regole valgono solo con questo stile: gli altri due non cambiano. */
:root[data-skin=neon] {
  --bg: #09090d; --bg-2: #14151c; --card: #15161d; --line: #24262f; --text: #f5f6fa; --muted: #9598a8;
  --glass: #15161d; --glass-2: #1c1d26; --glass-strong: #20212b; --glass-line: #24262f; --glass-edge: #24262f; --hi: 0 0 0 0 transparent; --blur: none;
  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 20px 40px -24px rgba(0,0,0,.9); --shadow-color: rgba(0,0,0,.6);
  --radius: 24px; --radius-s: 16px;
  --neon-a: #cdf56f; --neon-b: #9ff0c4; --neon-ink: #0e1a0a;
  --accent-soft: color-mix(in srgb, var(--accent) 22%, #15161d); --on-accent: #fff;
  --ok: #7ee787; --ok-soft: #173a24; --warn: #ffc466; --warn-soft: #3d2d10; --bad: #ff7b72; --bad-soft: #3d1c1f;
  --penny: #ff8a78; --morgana: #4fd0e6; --draco: #b39cff;
  --viz-prev: #6d7187; --viz-context: #2b2e3a; --viz-ink2: #d0d3df; --viz-hover: rgba(255,255,255,.06); --bank-fineco: #6f9ef0; --bank-chianti: #5cc68b;
  color-scheme: dark;
}
:root[data-skin=neon][data-theme=light] {
  --bg: #ebecf1; --bg-2: #f6f7fa; --card: #ffffff; --line: #e2e4ec; --text: #101219; --muted: #6a6f80;
  --glass: #ffffff; --glass-2: #f3f4f8; --glass-strong: #ffffff; --glass-line: #e4e6ee; --glass-edge: #e9ebf1;
  --shadow: 0 1px 2px rgba(16,18,25,.04), 0 18px 36px -24px rgba(16,18,25,.25); --shadow-color: rgba(16,18,25,.2);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, #fff);
  --ok: #1f9a4c; --ok-soft: #dff7e8; --warn: #b8700a; --warn-soft: #fff1d6; --bad: #d8333c; --bad-soft: #ffe1e3;
  --penny: #ff6b57; --morgana: #22b1c9; --draco: #8b5cf6;
  --viz-prev: #a3abbd; --viz-context: #d7dce7; --viz-ink2: #3b4458; --viz-hover: rgba(16,18,25,.06); --bank-fineco: #2f6fe4; --bank-chianti: #1fa958;
  color-scheme: light;
}
:where(:root[data-skin=neon]) .neon-only { display: initial; }
:where(:root[data-skin=neon]) body::before, :where(:root[data-skin=neon]) body::after { display: none; }
:root[data-skin=neon], :where(:root[data-skin=neon]) body, :where(:root[data-skin=neon]) body.login-body { background: var(--bg); }
:where(:root[data-skin=neon]) .top h1 { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text); font-weight: 600; font-size: 38px; }
:where(:root[data-skin=neon]) .clock { font-weight: 400; }
:where(:root[data-skin=neon]) .tile-v, :where(:root[data-skin=neon]) .ekpi .tile-v, :where(:root[data-skin=neon]) .gc-v, :where(:root[data-skin=neon]) .climate .t, :where(:root[data-skin=neon]) .kidstats b, :where(:root[data-skin=neon]) .wx .t, :where(:root[data-skin=neon]) .kh-n b, :where(:root[data-skin=neon]) .pc-v, :where(:root[data-skin=neon]) .loan .v, :where(:root[data-skin=neon]) .ncard b { font-weight: 600; }

/* superfici: card nere e piatte, bordo sottile */
:where(:root[data-skin=neon]) .card, :where(:root[data-skin=neon]) .tile, :where(:root[data-skin=neon]) .climate, :where(:root[data-skin=neon]) .strip .chip, :where(:root[data-skin=neon]) .search, :where(:root[data-skin=neon]) .login-form, :where(:root[data-skin=neon]) .msg.bot, :where(:root[data-skin=neon]) .ekpi .tile, :where(:root[data-skin=neon]) .viztip, :where(:root[data-skin=neon]) .gc, :where(:root[data-skin=neon]) .brainbox {
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-skin=neon]) .card::before, :where(:root[data-skin=neon]) .tile::before, :where(:root[data-skin=neon]) .climate::before, :where(:root[data-skin=neon]) .strip .chip::before, :where(:root[data-skin=neon]) .tile::after, :where(:root[data-skin=neon]) .gc::before { display: none; }
:where(:root[data-skin=neon]) .kidstats div, :where(:root[data-skin=neon]) .ekpi.small .tile, :where(:root[data-skin=neon]) .mort div, :where(:root[data-skin=neon]) .wx-days div, :where(:root[data-skin=neon]) .room, :where(:root[data-skin=neon]) .week .day, :where(:root[data-skin=neon]) .task, :where(:root[data-skin=neon]) .grade, :where(:root[data-skin=neon]) .orario .od, :where(:root[data-skin=neon]) .eng .ex, :where(:root[data-skin=neon]) .scn, :where(:root[data-skin=neon]) .tm-row.open,
:where(:root[data-skin=neon]) .loan, :where(:root[data-skin=neon]) .dcard, :where(:root[data-skin=neon]) .invc, :where(:root[data-skin=neon]) .site, :where(:root[data-skin=neon]) .ncard, :where(:root[data-skin=neon]) .person, :where(:root[data-skin=neon]) .kidpick button, :where(:root[data-skin=neon]) .spo-day, :where(:root[data-skin=neon]) .spo-timer, :where(:root[data-skin=neon]) .q4-item, :where(:root[data-skin=neon]) .org-col, :where(:root[data-skin=neon]) .hwday, :where(:root[data-skin=neon]) .bd-c, :where(:root[data-skin=neon]) .pcard.soft, :where(:root[data-skin=neon]) .eng-mini, :where(:root[data-skin=neon]) .tmw-alert, :where(:root[data-skin=neon]) .draft {
  background: var(--glass-2); border-color: var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-skin=neon]) .kidstats div:first-child { background: var(--glass-2); }
:where(:root[data-skin=neon]) .list .row { border-bottom-color: var(--line); } :where(:root[data-skin=neon]) .tbl td, :where(:root[data-skin=neon]) .tbl th { border-bottom-color: var(--line); }
:where(:root[data-skin=neon]) .bar { background: var(--glass-2); } :where(:root[data-skin=neon]) .mbar, :where(:root[data-skin=neon]) .score .trk, :where(:root[data-skin=neon]) .ring .tr { background: var(--glass-2); }

/* il blocco in evidenza: verde lime, come il saldo di una app di banca */
:where(:root[data-skin=neon]) .climate:nth-child(1), :where(:root[data-skin=neon]) .gc.hero, :where(:root[data-skin=neon]) .kidhero, :where(:root[data-skin=neon]) .loan.total {
  background: linear-gradient(135deg, var(--neon-a), var(--neon-b)); color: var(--neon-ink); border-color: transparent;
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--neon-a) 55%, transparent); }
:where(:root[data-skin=neon]) .climate:nth-child(1)::before, :where(:root[data-skin=neon]) .gc.hero::before { display: none; }
:where(:root[data-skin=neon]) .climate:nth-child(1) .name, :where(:root[data-skin=neon]) .climate:nth-child(1) .u, :where(:root[data-skin=neon]) .climate:nth-child(1) .ctl .sp, :where(:root[data-skin=neon]) .gc.hero .gc-l, :where(:root[data-skin=neon]) .gc.hero .gc-s, :where(:root[data-skin=neon]) .gc.hero .gc-s b, :where(:root[data-skin=neon]) .kidhero small { color: inherit; opacity: .78; }
:where(:root[data-skin=neon]) .gc.hero .gc-l .ic { color: inherit; } :where(:root[data-skin=neon]) .gc.hero .ring .pr, :where(:root[data-skin=neon]) .gc.hero .mbars i.hi, :where(:root[data-skin=neon]) .gc.hero .mbar i { stroke: var(--neon-ink); background: var(--neon-ink); }
:where(:root[data-skin=neon]) .gc.hero .ring .tr { stroke: rgba(14,26,10,.18); } :where(:root[data-skin=neon]) .gc.hero .mbars i { background: rgba(14,26,10,.35); } :where(:root[data-skin=neon]) .gc.hero .mbar { background: rgba(14,26,10,.18); }
:where(:root[data-skin=neon]) .climate:nth-child(1) .pill, :where(:root[data-skin=neon]) .climate:nth-child(1) .ctl button, :where(:root[data-skin=neon]) .gc.hero .pill, :where(:root[data-skin=neon]) .kidhero .avatar { background: rgba(14,26,10,.14); border-color: transparent; color: inherit; }
:where(:root[data-skin=neon]) .climate:nth-child(2) { background: var(--glass-2); color: var(--text); border-color: var(--line); box-shadow: none; }
:where(:root[data-skin=neon]) .climate:nth-child(2)::before { display: none; } :where(:root[data-skin=neon]) .climate:nth-child(2) .name, :where(:root[data-skin=neon]) .climate:nth-child(2) .u, :where(:root[data-skin=neon]) .climate:nth-child(2) .ctl .sp { color: var(--muted); opacity: 1; }
:where(:root[data-skin=neon]) .climate:nth-child(2) .pill { background: var(--glass-strong); color: var(--muted); } :where(:root[data-skin=neon]) .climate:nth-child(2) .ctl button { background: var(--glass-strong); border-color: var(--line); color: var(--text); }
:where(:root[data-skin=neon]) .kidhero { background: linear-gradient(135deg, var(--neon-a), var(--neon-b)); } :where(:root[data-skin=neon]) .kidhero .avatar { color: var(--neon-ink); }

/* navigazione: binario nero, voce attiva bianca */
:where(:root[data-skin=neon]) .nav { background: var(--card); border: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 999px; padding: 8px; }
:where(:root[data-skin=neon]) .nav button, :where(:root[data-skin=neon]) .side-logout { border-radius: 999px; }
:where(:root[data-skin=neon]) .nav button.on { background: #fff; color: #0e1016; box-shadow: none; } :where(:root[data-skin=neon][data-theme=light]) .nav button.on { background: #101219; color: #fff; }
:where(:root[data-skin=neon]) .nav button span, :where(:root[data-skin=neon]) .side-logout span { background: var(--glass-strong); border-color: var(--line); color: var(--text); }
:where(:root[data-skin=neon]) .brand-img { border-color: var(--line); box-shadow: none; }
:where(:root[data-skin=neon]) .side-logout:hover, :where(:root[data-skin=neon]) .nav button:hover { background: var(--glass-2); }

/* controlli: pillole e campi scuri, bottone principale lime */
:where(:root[data-skin=neon]) .seg { background: var(--card); border: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-skin=neon]) .seg button.on { background: #fff; color: #0e1016; box-shadow: none; } :where(:root[data-skin=neon][data-theme=light]) .seg button.on { background: #101219; color: #fff; }
:where(:root[data-skin=neon]) .iconbtn, :where(:root[data-skin=neon]) .btn, :where(:root[data-skin=neon]) .chips button, :where(:root[data-skin=neon]) .xclose, :where(:root[data-skin=neon]) .attn-ok { background: var(--glass-2); border-color: var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-skin=neon]) .iconbtn { border-radius: 999px; } :where(:root[data-skin=neon]) .iconbtn:hover, :where(:root[data-skin=neon]) .btn:hover, :where(:root[data-skin=neon]) .chips button:hover { background: var(--glass-strong); }
:where(:root[data-skin=neon]) .chips button.on { background: var(--neon-a); color: var(--neon-ink); border-color: transparent; }
:where(:root[data-skin=neon]) .form-row button, :where(:root[data-skin=neon]) .chatbar button, :where(:root[data-skin=neon]) .login-form button, :where(:root[data-skin=neon]) .simform button, :where(:root[data-skin=neon]) button.btn[type=submit], :where(:root[data-skin=neon]) button[type=submit]:not(.ghost):not(.pill):not(.iconbtn), :where(:root[data-skin=neon]) .kidform button:not(.ghost), :where(:root[data-skin=neon]) .msg.user, :where(:root[data-skin=neon]) .tabbar button.on, :where(:root[data-skin=neon]) .kidpick button.on, :where(:root[data-skin=neon]) .person.on {
  background: linear-gradient(135deg, var(--neon-a), var(--neon-b)); color: var(--neon-ink); box-shadow: none; border-color: transparent; }
:where(:root[data-skin=neon]) .person.on .avatar, :where(:root[data-skin=neon]) .kidpick button.on .avatar { background: rgba(14,26,10,.14); color: var(--neon-ink); } :where(:root[data-skin=neon]) .person.on small, :where(:root[data-skin=neon]) .person.on .pill { color: inherit; opacity: .8; background: rgba(14,26,10,.1); }
:where(:root[data-skin=neon]) #adultBtn.on { background: var(--neon-a); color: var(--neon-ink); }
:where(:root[data-skin=neon]) input, :where(:root[data-skin=neon]) select, :where(:root[data-skin=neon]) textarea, :where(:root[data-skin=neon]) .cardv, :where(:root[data-skin=neon]) .row select.mini, :where(:root[data-skin=neon]) .emg-ta, :where(:root[data-skin=neon]) #q4Body, :where(:root[data-skin=neon]) .cfg textarea { background: var(--glass-2); border-color: var(--line); color: var(--text); }
:where(:root[data-skin=neon]) input:focus, :where(:root[data-skin=neon]) select:focus, :where(:root[data-skin=neon]) textarea:focus { outline-color: var(--neon-a); }
:where(:root[data-skin=neon]) .pill { background: var(--glass-2); border-color: var(--line); }
:where(:root[data-skin=neon]) .notice { background: var(--warn-soft); color: var(--warn); }
:where(:root[data-skin=neon]) .search { background: var(--glass-2); border-color: var(--line); }
:where(:root[data-skin=neon]) .skinmenu { background: var(--glass-strong); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-skin=neon]) .skinmenu button.on { background: var(--neon-a); color: var(--neon-ink); } :where(:root[data-skin=neon]) .skinmenu button.on small { color: inherit; }
:where(:root[data-skin=neon]) .hw, :where(:root[data-skin=neon]) .week .it, :where(:root[data-skin=neon]) .hwitem { background: var(--glass-strong); }
:where(:root[data-skin=neon]) .ptile { background: var(--glass-2); border-color: var(--line); } :where(:root[data-skin=neon]) .ptile.open { background: var(--card); }
:where(:root[data-skin=neon]) .viztip { background: var(--glass-strong); }
:where(:root[data-skin=neon]) .bar i, :where(:root[data-skin=neon]) .bar.big i, :where(:root[data-skin=neon]) .mbar i, :where(:root[data-skin=neon]) .pc-bar i { background: linear-gradient(90deg, var(--neon-a), var(--neon-b)); } :where(:root[data-skin=neon]) .pcard .pc-bar i { background: #fff; }
:where(:root[data-skin=neon]) a { color: color-mix(in srgb, var(--accent) 70%, #fff); } :where(:root[data-skin=neon][data-theme=light]) a { color: var(--accent); }

/* telefono: barra in basso nera con la voce attiva lime */
@media (max-width: 860px) {
  :where(:root[data-skin=neon]) .top { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :where(:root[data-skin=neon]) .tabbar { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :where(:root[data-skin=neon]) .tabbar button { color: var(--muted); }
}