:root{
  --bg:#17191c; --bg2:#1d2024; --panel:#23262b; --panel2:#2b2f35; --line:#363b42; --line2:#474d55;
  --ink:#f3f1ed; --muted:#a9aeb4; --dim:#7d848c;
  --accent:#f26a21; --accent2:#ffa45c; --gain:#22e39a; --loss:#ff4d6d; --amber:#ffd166;
  --gain-bg:rgba(34,227,154,.10); --loss-bg:rgba(255,77,109,.10); --amber-bg:rgba(255,209,102,.12);
  --glow-g:0 0 12px rgba(34,227,154,.55); --glow-r:0 0 12px rgba(255,77,109,.55);
  --f:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--f);-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:radial-gradient(1200px 600px at 50% -10%,#2c2f34 0,transparent 60%),var(--bg)}
a{color:var(--accent)}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;min-width:0}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;margin:0}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:12.5px}
.pos{color:var(--gain);text-shadow:0 0 10px rgba(34,227,154,.35)} .neg{color:var(--loss);text-shadow:0 0 10px rgba(255,77,109,.35)}

/* ---------- barra superiore ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(23,25,28,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;gap:18px;padding:10px max(16px,env(safe-area-inset-left));max-width:1600px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand .logo{width:30px;height:30px;border-radius:8px;background:url(/static/icon-192.png) center/contain no-repeat;box-shadow:0 0 16px rgba(242,106,33,.4)}
nav.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{background:none;border:0;padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:600;cursor:pointer;white-space:nowrap}
nav.tabs button:hover{color:var(--ink);background:var(--panel)}
nav.tabs button[aria-current=page]{color:var(--ink);background:var(--panel2);box-shadow:inset 0 -2px 0 var(--accent)}
.status{display:flex;align-items:center;gap:10px;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.03em;border:1px solid var(--line2);background:var(--panel)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.pill.on i{background:var(--gain);box-shadow:var(--glow-g)} .pill.live{border-color:rgba(255,77,109,.6);color:#ffb3c1}
.pill.live i{background:var(--loss);box-shadow:var(--glow-r)} .pill.warn i{background:var(--amber)}
.iconbtn{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;cursor:pointer}

/* nastro scorrevole */
.tape{overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--bg),#1f2226 10%,#1f2226 90%,var(--bg))}
.tape .track{display:inline-flex;gap:28px;padding:7px 0;white-space:nowrap;animation:tape 80s linear infinite}
.tape:hover .track{animation-play-state:paused}
.tape .it{display:inline-flex;gap:8px;align-items:baseline;cursor:pointer;font-size:13px}
.tape .it b{font-weight:600}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

main{max-width:1600px;margin:0 auto;padding:18px max(16px,env(safe-area-inset-left)) 60px}
h1{font-size:22px;margin:0 0 4px;font-weight:800;letter-spacing:-.01em}
h2{font-size:16px;margin:0 0 10px;font-weight:700}
h3{font-size:12px;margin:0 0 8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sub{color:var(--muted);margin:0 0 16px;max-width:80ch}
.panel{background:linear-gradient(180deg,var(--panel),#1f2226);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.side{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
.dash{grid-template-columns:minmax(0,1fr) 360px}
@media (max-width:1100px){.dash,.side{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

button.b{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 14px;font-weight:600;cursor:pointer}
button.b:hover{border-color:var(--accent)}
button.b.primary{background:linear-gradient(180deg,#ff8f3d,#ec620b);border-color:transparent;color:#1a1007;box-shadow:0 0 18px rgba(242,106,33,.25)}
button.b.danger{border-color:rgba(255,77,109,.5);color:#ffb3c1}
button.b.gain{background:linear-gradient(180deg,#22e39a,#0f9f6a);color:#04140d;border:0}
button.b.loss{background:linear-gradient(180deg,#ff6b84,#d62848);color:#fff;border:0}
button.b.sm{padding:5px 10px;font-size:12.5px}
button:disabled{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:3px}
.seg button{border:0;background:none;padding:6px 11px;border-radius:7px;color:var(--muted);font-weight:600;cursor:pointer;font-size:13px}
.seg button[aria-pressed=true]{background:var(--panel2);color:var(--ink);box-shadow:0 0 0 1px var(--line2),0 0 12px rgba(242,106,33,.15)}
.field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.field input,.field select{width:100%}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:6px 0}
.check small{display:block;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);font-size:12.5px;font-weight:600;cursor:pointer;color:var(--muted)}
.chip[aria-pressed=true]{color:var(--ink);border-color:var(--accent);background:rgba(242,106,33,.12)}
.chip i{width:8px;height:8px;border-radius:50%}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--bg2);border:1px solid var(--line2);color:var(--muted)}
.tag.g{color:var(--gain);border-color:rgba(34,227,154,.35);background:var(--gain-bg)}
.tag.r{color:var(--loss);border-color:rgba(255,77,109,.35);background:var(--loss-bg)}
.tag.a{color:var(--amber);border-color:rgba(251,191,36,.35);background:var(--amber-bg)}

/* ---------- tabelle stile investing ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th.n,.tbl td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl tbody tr{cursor:pointer;transition:background .15s}
.tbl tbody tr:hover{background:rgba(242,106,33,.06)}
.tbl .nm b{display:block;font-weight:600} .tbl .nm span{font-size:11.5px;color:var(--dim)}
.tblbox{overflow:auto;max-height:640px;border-radius:10px}
tr.up td.chg{color:var(--gain)} tr.dn td.chg{color:var(--loss)}
tr.flash-up{animation:fu 1.4s ease} tr.flash-dn{animation:fd 1.4s ease}
@keyframes fu{0%{background:rgba(34,227,154,.28)}100%{background:transparent}}
@keyframes fd{0%{background:rgba(255,77,109,.28)}100%{background:transparent}}
.lit-g{box-shadow:inset 3px 0 0 var(--gain),0 0 0 1px rgba(34,227,154,.18),0 0 22px -6px rgba(34,227,154,.55)}
.lit-r{box-shadow:inset 3px 0 0 var(--loss),0 0 0 1px rgba(255,77,109,.18),0 0 22px -6px rgba(255,77,109,.55)}

.mlist{display:flex;flex-direction:column;max-height:330px;overflow-y:auto}
.mitem{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}
.mitem:hover{background:rgba(242,106,33,.06)}
.mitem .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mitem .nm small{display:block;color:var(--dim);font-weight:400;font-size:11.5px}
.badgechg{font-family:var(--mono);font-size:12.5px;font-weight:700;padding:3px 8px;border-radius:6px;min-width:68px;text-align:right}
.badgechg.g{background:var(--gain-bg);color:var(--gain);box-shadow:0 0 14px -4px rgba(34,227,154,.6)}
.badgechg.r{background:var(--loss-bg);color:var(--loss);box-shadow:0 0 14px -4px rgba(255,77,109,.6)}
.spark{display:block}

/* ---------- rete skill ---------- */
.net{position:relative;height:min(64vh,620px);min-height:420px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(900px 500px at 50% 40%,#2a2d32 0,#16181b 70%)}
.net canvas{position:absolute;inset:0;width:100%;height:100%}
.hud{position:absolute;left:14px;top:14px;padding:10px 14px;border:1px solid rgba(242,106,33,.45);border-radius:6px;background:rgba(23,25,28,.72);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:#ffc599;box-shadow:0 0 18px rgba(242,106,33,.2)}
.hud b{display:block;font-size:13px;color:#ffe9d6;letter-spacing:.18em}
.legend{position:absolute;right:12px;top:12px;bottom:12px;width:230px;overflow-y:auto;padding:10px;border:1px solid rgba(255,164,92,.35);border-radius:8px;
  background:rgba(23,25,28,.7);font-family:var(--mono);font-size:11.5px}
.legend .li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:8px;padding:4px 2px;align-items:start;opacity:.55;transition:opacity .3s}
.legend .li.on{opacity:1}
.legend .li i{width:10px;height:10px;border-radius:50%;margin-top:3px;background:#6f767e;transition:background .3s}
.legend .li.on i{background:currentColor;box-shadow:0 0 10px currentColor}
.legend .li b{font-weight:600;color:#f3ebe2;display:block}
.legend .li span{color:#a9aeb4;font-size:10.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.legend{display:none}.net{height:420px}}

.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kpi .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700}
.kpi .v{font-family:var(--mono);font-size:20px;font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .s{font-size:12px;color:var(--muted)}

.feed{display:flex;flex-direction:column;gap:2px;max-height:520px;overflow-y:auto}
.ev{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;padding:8px 6px;border-bottom:1px solid var(--line)}
.ev .t{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.ev b{font-weight:600;display:block}
.ev p{margin:2px 0 0;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.ev.k-trade b{color:#c7f9e3} .ev.k-external b{color:#ffd2ad} .ev.k-pac b{color:#ffb070} .ev.k-risk b{color:#fde68a}
.ev.new{animation:evn 2s ease}
@keyframes evn{0%{background:rgba(242,106,33,.18)}100%{background:transparent}}

.approval{border:1px solid var(--amber);background:var(--amber-bg);border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.approval p{margin:0;flex:1 1 260px;white-space:pre-line}

/* ---------- finestre ---------- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(10,11,13,.74);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:4vh 12px}
.modal .box{width:min(1100px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal .box.small{width:min(400px,100%);margin:auto}
.modal .x{float:right;background:none;border:0;font-size:22px;color:var(--muted);cursor:pointer}
.qhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:10px}
.qhead .px{font-family:var(--mono);font-size:30px;font-weight:700}
.chart{height:420px;width:100%}
.chart.sm{height:300px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 16px;font-size:13px}
.stats div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:4px 0}
.stats span{color:var(--muted)}
.news a{display:block;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.news a:hover{color:var(--accent)} .news small{color:var(--dim)}

.toast{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.toast div{background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:10px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:tin .25s ease}
.toast div.err{border-left-color:var(--loss)} .toast div.ok{border-left-color:var(--gain)}
@keyframes tin{from{transform:translateY(10px);opacity:0}}

/* ---------- accesso ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth .card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:28px;box-shadow:0 0 60px rgba(242,106,33,.12)}
.auth h1{font-size:26px;margin-bottom:6px}
.auth form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.auth .err{color:var(--loss);font-size:13px;min-height:18px}

/* palestra */
.selrow{display:grid;grid-template-columns:minmax(0,1fr) 80px auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.prog{height:4px;background:var(--line);border-radius:3px;overflow:hidden;width:180px}
.prog i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;cursor:pointer;margin-bottom:6px}
.opt:has(input:checked){border-color:var(--accent);background:rgba(242,106,33,.06)}
.opt small{display:block;color:var(--muted)}
.chipk{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px}
.chipk.buy{background:var(--gain-bg);color:var(--gain)} .chipk.sell{background:var(--bg2);border:1px solid var(--line2)}
.chipk.stop{background:var(--loss-bg);color:var(--loss)} .chipk.div{background:var(--gain-bg);color:var(--gain);border:1px dashed var(--gain)}
.chipk.open{background:var(--amber-bg);color:var(--amber)}
.rk{display:inline-grid;grid-template-columns:repeat(10,5px);gap:2px;vertical-align:middle}
.rk i{height:11px;border-radius:1px;background:var(--line2)} .rk i.on{background:var(--gain)}
.rk.mid i.on{background:var(--amber)} .rk.hi i.on{background:var(--loss)}

.blogo{border-radius:8px;background:#fff;padding:3px;flex:none;object-fit:contain;box-shadow:0 0 0 1px var(--line2)}
.off .blogo{filter:grayscale(1);opacity:.55}
.btiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:4px 0 10px}
.btiles.sm{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.btile{display:flex;gap:10px;align-items:center;text-align:left;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.btile:hover{border-color:var(--accent);transform:translateY(-1px)}
.btile[aria-pressed=true]{border-color:var(--accent);background:rgba(242,106,33,.10);box-shadow:0 0 18px -4px rgba(242,106,33,.55)}
.btile b{display:block;font-size:13.5px} .btile small{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}
.bcard{border:1px solid var(--line2);border-radius:14px;padding:14px;background:var(--bg2)}
.bcard.err{border-color:rgba(255,77,109,.5)}
.empty{color:var(--muted);padding:18px;text-align:center}
.scroll{overflow:auto}

/* ---------- marchio ---------- */
.tagline{text-align:center;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.04em;padding:0 16px 8px;min-height:26px}
.tagline.in{animation:tagin .55s ease}
@keyframes tagin{from{opacity:0;transform:translateY(-4px)}}
.authtag{color:var(--accent);font-weight:600;margin:10px 0 0}
.pillbtn{cursor:pointer;color:inherit;font-family:inherit;transition:border-color .15s}
.pillbtn:hover{border-color:var(--accent)}

/* modalita' nella pagina iniziale */
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mode{display:block;padding:12px 14px;border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:12px;background:var(--bg2);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.mode:hover{border-color:var(--accent);transform:translateY(-1px)}
.mode b{display:block;font-size:14.5px}.mode span{font-size:12.5px;color:var(--muted)}

/* lucchetto */
.lockb{background:none;border:1px solid transparent;border-radius:7px;padding:4px;cursor:pointer;color:var(--dim);display:inline-flex}
.lockb:hover{border-color:var(--line2);color:var(--ink)}
.lockb[aria-pressed=true]{color:var(--accent);background:rgba(242,106,33,.12)}

/* piano di accumulo */
.pacrow{display:grid;grid-template-columns:minmax(0,1fr) auto 76px auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.pacrow .nm b{display:block;font-weight:600}.pacrow .nm small{display:block;color:var(--dim);font-size:11.5px}.pacrow .nm small.muted{color:var(--muted)}
.pacrow .mono{text-align:right}
.wg{display:inline-flex;align-items:center;gap:4px}.wg input{width:64px;text-align:right}
.runrow{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.runrow small{flex:1 1 100%}
.pacg{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
@media (max-width:1100px){.pacg{grid-template-columns:minmax(0,1fr)}}
.opinion{margin-top:10px;padding:12px 14px;border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:10px;background:var(--bg2)}
.opinion p{margin:6px 0 0}

/* ---------- telefono ---------- */
@media (max-width:820px){
  .topin{flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  .status{margin-left:auto;gap:6px}
  #wspill{display:none}
  nav.tabs{order:3;flex:1 0 100%;padding-bottom:2px}
  .tagline{font-size:12.5px;padding-bottom:6px}
  .modes{grid-template-columns:minmax(0,1fr)}
  main{padding:14px 12px 60px}
  .tbl td,.tbl th{padding:7px 6px}
  .net{height:360px;min-height:320px}
  .hud{font-size:10.5px;padding:7px 10px}
  .pacrow{grid-template-columns:minmax(0,1fr) auto auto}
  .pacrow .mono{display:none}
  .modal{padding:8px}
  .modal .box{padding:12px}
  .chart{height:300px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}