*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.t-dark{--bg0:#0a0e1a;--bg1:#0f1422;--bg2:#141926;--bg3:#1a2030;--bg4:#1f2638;--border:#ffffff0f;--border2:#ffffff18;--border3:#ffffff28;--text:#f0f4ff;--text2:#8892aa;--text3:#4a5568;--input-bg:#1a2030;--shadow:none}
.t-slate{--bg0:#1e2433;--bg1:#252c3d;--bg2:#2a3245;--bg3:#303a50;--bg4:#36425a;--border:#ffffff12;--border2:#ffffff1e;--border3:#ffffff2e;--text:#e8edf8;--text2:#8a96b0;--text3:#556070;--input-bg:#303a50;--shadow:none}
.t-light{--bg0:#f0f2f8;--bg1:#f8f9fc;--bg2:#ffffff;--bg3:#f0f2f8;--bg4:#e4e8f0;--border:#00000010;--border2:#00000018;--border3:#00000028;--text:#0f172a;--text2:#475569;--text3:#94a3b8;--input-bg:#f0f2f8;--shadow:0 1px 3px rgba(0,0,0,.06)}
.t-white{--bg0:#e8ecf4;--bg1:#ffffff;--bg2:#f8faff;--bg3:#eef1f8;--bg4:#e2e8f4;--border:#00000009;--border2:#00000014;--border3:#00000022;--text:#0a0f1e;--text2:#4a5568;--text3:#94a3b8;--input-bg:#f0f2f8;--shadow:0 1px 4px rgba(0,0,0,.08)}
:root{--ac:#0ea5e9;--ac-dim:#0ea5e915;--ac-dim2:#0ea5e928;--green:#00c17a;--green-dim:#00c17a18;--red:#ff4d6a;--red-dim:#ff4d6a18;--amber:#d4860a;--amber-dim:#d4860a18}

/* ── Layout ── */
.app{background:var(--bg1);display:flex;height:100dvh;width:100vw;flex-direction:row;overflow:hidden;transition:background .2s}

/* ── Sidebar desktop ── */
.sidebar{width:210px;background:var(--bg0);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:all .2s}
.sidebar-logo{padding:16px 14px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.logo-icon{width:28px;height:28px;background:var(--ac);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon svg{width:15px;height:15px;stroke:#fff;stroke-width:2.5;fill:none}
.logo-text{font-size:13px;font-weight:600;color:var(--text)}
.logo-ver{font-size:10px;color:var(--text3);margin-top:1px}
.nav-sec{padding:13px 12px 4px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;justify-content:space-between}
.nav-plus{width:18px;height:18px;border-radius:5px;border:1px solid var(--border3);background:transparent;cursor:pointer;color:var(--text3);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}
.nav-plus:hover,.nav-plus:active{background:var(--ac-dim2);color:var(--ac);border-color:var(--ac)}
.nav-item{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:1px 4px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--text2);transition:all .12s;position:relative;user-select:none;-webkit-user-select:none}
.nav-item:hover,.nav-item:active{background:var(--bg3);color:var(--text)}
.nav-item:hover .ndel{opacity:1}
.nav-item.active{background:var(--ac-dim2);color:var(--ac)}
.nav-item svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;stroke-width:1.8;fill:none;pointer-events:none}
.ndot{width:6px;height:6px;border-radius:50%;flex-shrink:0;pointer-events:none}
.ndel{opacity:0;width:18px;height:18px;border-radius:4px;border:none;background:transparent;cursor:pointer;color:var(--text3);font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ndel:hover,.ndel:active{background:#ff4d6a20;color:#ff4d6a}
.nav-item.active .ndel{opacity:.4}
.sb-foot{margin-top:auto;padding:12px;border-top:1px solid var(--border)}
.sb-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.sb-br{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.sb-bn{font-size:11px;color:var(--text2)}.sb-bv{font-size:11px;font-weight:600}
.sb-bt{height:3px;background:var(--bg4);border-radius:2px;margin-bottom:5px;overflow:hidden}
.sb-bf{height:100%;border-radius:2px}

/* ── Main ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{height:52px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}
.tb-title{font-size:14px;font-weight:600;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-sel{display:flex;gap:2px;background:var(--bg3);border-radius:8px;padding:3px}
.lang-btn{padding:3px 7px;border-radius:6px;border:none;background:transparent;cursor:pointer;font-size:11px;color:var(--text2)}
.lang-btn.active{background:var(--bg1);color:var(--text)}
.theme-sel{display:flex;gap:4px;align-items:center}
.theme-dot{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .12s;flex-shrink:0}
.theme-dot.active{border-color:var(--ac);transform:scale(1.15)}
.tbtn{padding:5px 10px;border-radius:8px;border:1px solid var(--border3);background:transparent;cursor:pointer;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:4px;white-space:nowrap}
.tbtn:hover,.tbtn:active{background:var(--bg3);color:var(--text)}
.tbtn.w{background:#fff;color:#0a0f1e;border-color:#fff;font-weight:600}
.t-light .tbtn.w,.t-white .tbtn.w{background:var(--ac);color:#fff;border-color:var(--ac)}
.tbtn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0}
.content{padding:12px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}

/* ── Metrics ── */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.metric{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.metric-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.metric-val{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.metric-sub{font-size:10px;color:var(--text3);margin-top:2px}
.badge{display:inline-block;padding:2px 6px;border-radius:99px;font-size:10px;font-weight:600;margin-top:4px}
.bg{background:var(--green-dim);color:var(--green)}.ba{background:var(--amber-dim);color:var(--amber)}.br{background:var(--red-dim);color:var(--red)}

/* ── Cards ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:var(--shadow)}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.07em}

/* ── Rist settings bar ── */
.rist-settings-bar{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:8px 12px;margin-bottom:10px;flex-wrap:wrap}
.rsb-group{display:flex;align-items:center;gap:6px}
.rsb-label{font-size:11px;color:var(--text3);white-space:nowrap}
.target-inp{width:58px;font-size:13px;font-weight:600;padding:4px 6px;border:1px solid var(--border2);border-radius:7px;background:var(--input-bg);color:var(--text);text-align:center}
.target-inp:focus{outline:none;border-color:var(--ac)}

/* ── Formula dropdown ── */
.formula-dropdown{position:relative}
.formula-trigger{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:7px;border:1px solid var(--border2);background:var(--input-bg);cursor:pointer;font-size:12px;color:var(--text);user-select:none;-webkit-user-select:none}
.badge-f{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;font-weight:700;background:var(--ac-dim2);color:var(--ac)}
.chevron{font-size:10px;color:var(--text3);transition:transform .15s}
.formula-trigger.open .chevron{transform:rotate(180deg)}
.formula-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:300px;background:var(--bg2);border:1px solid var(--border3);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:200;padding:6px}
.formula-menu.open{display:block}
.formula-option{display:flex;align-items:flex-start;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer}
.formula-option:hover,.formula-option:active{background:var(--bg3)}
.formula-option.active{background:var(--ac-dim)}
.fo-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;background:var(--ac-dim2);color:var(--ac);flex-shrink:0;margin-top:1px}
.fo-badge.mixed{background:#8b5cf620;color:#a78bfa}
.fo-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px}
.fo-math{font-size:10px;color:var(--text3);font-family:monospace}

/* ── Table ── */
.tw{overflow-x:auto;border-radius:8px;border:1px solid var(--border);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:11px}
th{text-align:right;padding:7px 8px;border-bottom:1px solid var(--border);color:var(--text3);font-weight:500;font-size:10px;white-space:nowrap;background:var(--bg3);text-transform:uppercase;letter-spacing:.04em}
th:first-child{text-align:left}
td{padding:6px 8px;border-bottom:1px solid var(--border);color:var(--text);text-align:right;font-size:11px}
td:first-child{text-align:left}
tr:last-child td{border-bottom:none}
tr.tot td{font-weight:600;background:var(--bg3)}
input[type=number]{width:70px;font-size:11px;padding:3px 4px;border:1px solid var(--border2);border-radius:6px;background:var(--input-bg);color:var(--text);text-align:right}
input[type=number]:focus{outline:none;border-color:var(--ac)}
.nm-lbl{cursor:pointer;color:var(--text);font-size:11px}
.nm-inp{font-size:11px;padding:3px 6px;border:1px solid var(--ac);border-radius:6px;background:var(--input-bg);color:var(--text);width:120px}
.nm-inp:focus{outline:none}
.ibtn{padding:3px 5px;border-radius:6px;border:1px solid var(--border);background:transparent;cursor:pointer;font-size:11px;color:var(--text3)}
.ibtn.del:active{background:var(--red-dim);color:var(--red)}

/* ── FC cell ── */
.fc-cell{display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px}
.fc-actual{font-size:11px;font-weight:700}
.fc-actual.ok{color:var(--green)}.fc-actual.over{color:var(--red)}
.fc-target-lbl{font-size:9px;line-height:1}

/* ── Compare ── */
.cmp-grid{display:grid;gap:10px;margin-bottom:10px}
.cmp-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;box-shadow:var(--shadow)}
.cmp-card:active{background:var(--bg3)}
.cmp-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.cmp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cmp-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);font-size:11px}
.cmp-row:last-child{border-bottom:none}
.cmp-row span:first-child{color:var(--text2)}.cmp-row span:last-child{color:var(--text);font-weight:500}

/* ── Bar ── */
.bar-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.bar-lbl{font-size:11px;color:var(--text2);width:85px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-trk{flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px}
.bar-pct{font-size:11px;font-weight:600;width:36px;text-align:right;flex-shrink:0;color:var(--text2)}

/* ── Buttons ── */
.pill{display:inline-block;padding:2px 7px;border-radius:99px;font-size:11px;font-weight:600}
.pill.good{background:var(--green-dim);color:var(--green)}.pill.warn{background:var(--amber-dim);color:var(--amber)}.pill.bad{background:var(--red-dim);color:var(--red)}
.add-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.btn{padding:6px 12px;border-radius:8px;border:1px solid var(--border3);background:transparent;cursor:pointer;font-size:12px;color:var(--text2)}
.btn:active{background:var(--bg3);color:var(--text)}
.btn.w{background:#fff;color:#0a0f1e;border-color:#fff;font-weight:600}
.t-light .btn.w,.t-white .btn.w{background:var(--ac);color:#fff;border-color:var(--ac)}
.btn.ghost{border-color:var(--border3);color:var(--text2)}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn.danger:active{background:var(--red-dim)}
.stitle{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}

/* ── Bottom nav (mobile) ── */
.bottom-nav{display:none;background:var(--bg0);border-top:1px solid var(--border);padding:6px 4px;padding-bottom:max(6px, env(safe-area-inset-bottom));flex-shrink:0}
.bnav-scroll{display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bnav-scroll::-webkit-scrollbar{display:none}
.bnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:8px;cursor:pointer;min-width:56px;flex-shrink:0;color:var(--text3)}
.bnav-item.active{background:var(--ac-dim2);color:var(--ac)}
.bnav-item svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
.bnav-label{font-size:9px;font-weight:500;white-space:nowrap}
.bnav-dot{width:5px;height:5px;border-radius:50%;margin-top:1px}

/* ── Modal ── */
.modal-vp{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);align-items:flex-end;justify-content:center;z-index:300;padding:0}
.modal-vp.open{display:flex} .modal-vp{cursor:pointer} .modal{cursor:default}
.modal{background:var(--bg2);border:1px solid var(--border3);border-radius:14px 14px 0 0;padding:20px;width:100%;max-width:480px;max-height:90dvh;overflow-y:auto;padding-bottom:max(20px,env(safe-area-inset-bottom));color:var(--text);box-shadow:0 -8px 40px rgba(0,0,0,.6)}
.modal h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:16px}
.mf{margin-bottom:13px}
.mf label{display:block;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.mf input,.mf select{width:100%;font-size:13px;padding:8px 10px;border:1px solid var(--border3);border-radius:8px;background:var(--input-bg);color:var(--text);-webkit-appearance:none}
.mf input:focus,.mf select:focus{outline:none;border-color:var(--ac)}
.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.copt{width:100%;aspect-ratio:1;border-radius:8px;border:2px solid transparent;cursor:pointer}
.copt.sel{border-color:var(--text);transform:scale(1.1)}
.mact{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* ── Toast ── */
#toast{position:fixed;bottom:max(80px,calc(env(safe-area-inset-bottom)+70px));left:50%;transform:translateX(-50%) translateY(80px);background:#111827;color:#f0f4ff;border:1px solid #fff2;padding:8px 16px;border-radius:99px;font-size:12px;transition:transform .25s;z-index:9999;pointer-events:none;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ── Install banner ── */
#install-banner{display:none;background:var(--ac);color:#fff;padding:10px 16px;font-size:12px;font-weight:500;align-items:center;gap:10px;flex-shrink:0}
#install-banner.show{display:flex}
#install-banner button{padding:4px 12px;border-radius:6px;border:1.5px solid #fff;background:transparent;color:#fff;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0}
#install-banner .dismiss{background:transparent;border:none;color:#ffffffaa;cursor:pointer;font-size:16px;margin-left:auto;padding:2px 6px}

/* ── Responsive mobile ── */
@media (max-width: 640px) {
  .sidebar{display:none}
  .bottom-nav{display:block}
  .app{flex-direction:column}
  .topbar{padding:0 12px;padding-top:max(0px,env(safe-area-inset-top))}
  .metrics{grid-template-columns:1fr 1fr}
  .formula-menu{min-width:260px;right:0;left:auto}
  .modal{border-radius:14px 14px 0 0}
  .rist-settings-bar{gap:6px}
  #toast{bottom:max(72px,calc(env(safe-area-inset-bottom)+65px))}
}
@media (min-width: 641px) and (max-width:900px){
  .sidebar{width:170px}
  .metrics{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:901px){
  .metrics{grid-template-columns:repeat(4,1fr)}
}

/* Modal: forza colori leggibili per ogni tema */
.t-dark .modal, .t-slate .modal { background: #1e2d4a !important; color: #f0f4ff !important; }
.t-dark .modal *, .t-slate .modal * { color: #f0f4ff !important; }
.t-dark .modal .btn:not(.ghost), .t-slate .modal .btn:not(.ghost) { color: #0a0f1e !important; }
.t-light .modal, .t-white .modal { background: #ffffff !important; color: #0f172a !important; }
.t-light .modal *, .t-white .modal * { color: #0f172a !important; }