:root{
  --bg:#0a1428; --bg2:#0e1c38; --panel:#10203f; --panel2:#16294d;
  --border:#1f3a66; --text:#dfe7f5; --muted:#7d92b5; --pink:#ff5c7a;
  --yellow:#caa20a; --yellow-bg:#5a4a08; --green:#1f8a4c; --green-bg:#0f3d24;
  --azure:#1d6fb8; --azure-bg:#10324f;
}
*{box-sizing:border-box}
body{
  margin:0; background:linear-gradient(180deg,#0a1428,#0c1a33 40%,#0a1428);
  color:var(--text); font-family:"Segoe UI",system-ui,Arial,sans-serif; font-size:14px;
}
.site-header{
  display:flex; align-items:center; gap:16px; padding:14px 24px;
  border-bottom:1px solid var(--border); position:relative;
}
.site-header .logo{
  font-size:26px; background:#16294d; border-radius:12px; padding:8px 12px;
}
.brand{flex:1; text-align:center}
.brand h1{margin:0; color:var(--pink); font-size:26px; letter-spacing:.5px}
.brand p{margin:2px 0 0; color:var(--muted); font-size:13px}
.clock{font-variant-numeric:tabular-nums; color:#39b0ff; font-size:18px; font-weight:600;
  position:absolute; right:24px}

.tabs{display:flex; gap:4px; padding:0 16px; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02)}
.tab{padding:12px 18px; color:var(--muted); text-decoration:none; font-weight:600;
  border-bottom:2px solid transparent}
.tab:hover{color:var(--text)}
.tab.active{color:#39b0ff; border-bottom-color:#39b0ff}
.tab-live{color:#ff6b6b}
.tab-live.active{color:#ff3b3b; border-bottom-color:#ff3b3b}

.content{padding:22px 28px; max-width:1700px; margin:0 auto}
.page-title{text-align:center; font-size:26px; margin:6px 0 18px}

.legend{background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; margin-bottom:16px; display:flex; gap:22px; flex-wrap:wrap; align-items:center}
.legend-item{display:inline-flex; align-items:center; gap:8px; color:var(--muted)}
.swatch{width:18px; height:14px; border-radius:3px; display:inline-block}
.sw-yellow{background:var(--yellow)} .sw-green{background:var(--green)} .sw-azure{background:var(--azure)}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin-bottom:20px}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.panel-head h3{margin:0; font-size:17px}
.panel-actions{display:flex; gap:12px; align-items:center}
.badge{background:#6d28d9; color:#fff; border-radius:14px; padding:4px 12px; font-weight:700; font-size:12px}
.muted{color:var(--muted)} .center{text-align:center} .nowrap{white-space:nowrap}

.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:10px; max-height:78vh}
table.grid{width:100%; border-collapse:collapse; font-size:13px}
table.grid thead th{position:sticky; top:0; background:#0c1d3b; color:#9fb6dd;
  text-align:left; padding:10px 12px; border-bottom:2px solid var(--border); font-size:12px;
  text-transform:uppercase; letter-spacing:.4px}
table.grid td{padding:9px 12px; border-bottom:1px solid #15294a; vertical-align:top}
table.grid tbody tr:hover{background:rgba(255,255,255,.03)}
td.pre{white-space:pre-line; line-height:1.45; min-width:240px}
td.ko{color:#ff8585; font-weight:600}

/* righe colorate */
.row-yellow td{background:var(--yellow-bg) !important}
.row-green  td{background:var(--green-bg)  !important}
.row-azure  td{background:var(--azure-bg)  !important}

/* LIVE strategie/parametri */
.live-grid td{font-size:12px}
.strat-cell{min-width:520px}
.strat-block{margin-bottom:6px; padding-bottom:6px; border-bottom:1px dashed #1c3358}
.strat-block:last-child{border-bottom:none; margin-bottom:0}
.pill{display:inline-block; padding:2px 8px; border-radius:10px; font-weight:700; font-size:11px}
.pill.ok{background:#0f3d24; color:#5fd58a; border:1px solid #1f8a4c}
.pill.ko{background:#3d1414; color:#ff8585; border:1px solid #8a1f1f}
.params{margin-top:4px; display:flex; flex-wrap:wrap; gap:6px}
.param{padding:2px 7px; border-radius:8px; font-size:11px}
.param.p-ok{background:#11261a; color:#7fcf9c}
.param.p-ko{background:#2e1212; color:#ff9a9a; font-weight:700}
.param i{color:var(--muted); font-style:normal; opacity:.8}
.star{color:#39b0ff}
.tbadge{font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; margin-left:6px}
.tb-green{background:var(--green-bg); color:#5fd58a}
.tb-yellow{background:var(--yellow-bg); color:#f0d050}

/* LIVE: layout a colonne come Partite del Giorno, 5 strategie impilate (rowspan) */
.live-grid td{font-size:12px; vertical-align:top}
.live-grid td.match{vertical-align:middle; border-right:1px solid var(--border)}
.live-grid tr.strat-sep td{border-top:1px solid #20396a}
.live-grid .s-code{font-weight:700; white-space:nowrap}
.live-grid .s-code .ic{margin-right:4px}
.live-grid .s-code.ok{color:#5fd58a}
.live-grid .s-code.ko{color:#ff8585}
.live-grid td.soglia,.live-grid td.reali{min-width:0; white-space:nowrap}
.live-grid .pline{line-height:1.5; white-space:nowrap}
.live-grid td.col-h2h{width:1%; white-space:nowrap; text-align:center; padding:9px 6px}
.live-grid .pline .lbl{color:var(--muted)}
.v-ok{color:#46d369; font-weight:600}
.v-ko{color:#ff5b5b; font-weight:700}

/* Risultati: selettore periodo + tabelle riepilogo */
.period-bar{background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:10px 14px; margin-bottom:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pbtn{background:#16294d; color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:6px 14px; cursor:pointer; font-weight:600; font-size:13px}
.pbtn:hover{background:#1d3563}
.pbtn.active{background:#6d28d9; border-color:#6d28d9; color:#fff}
.period-bar .badge{margin-left:auto}
.summary-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:20px}
.summary-grid .panel{margin-bottom:0}
.summary-grid h3{margin:0 0 10px; font-size:15px}
.table-wrap.sm{max-height:340px}
table.sumtbl td,table.sumtbl th{padding:6px 10px}
td.num{text-align:right; font-variant-numeric:tabular-nums}
.wr-hi{color:#46d369} .wr-mid{color:#e0b020} .wr-lo{color:#ff6b6b}
.row-win td{background:rgba(31,138,76,.10)}
.row-lose td{background:rgba(138,31,31,.10)}
.cell-win{color:#5fd58a; font-weight:700; text-align:center}
.cell-lose{color:#ff8585; font-weight:700; text-align:center}
@media(max-width:1100px){ .summary-grid{grid-template-columns:1fr} }

/* Risultati: larghezze colonne (no scroll orizzontale per vedere ESITO) */
#tbl{table-layout:fixed}
#tbl td,#tbl th{overflow:hidden; text-overflow:ellipsis}
#tbl .col-soglia,#tbl .col-reali{min-width:0; width:125px; white-space:pre-line;
  font-size:11px; line-height:1.3; word-break:break-word; overflow:visible; text-overflow:clip}
#tbl .col-cosa{width:230px; white-space:normal; word-break:break-word}
#tbl .col-ris,#tbl .col-fin,
#tbl .col-s1a,#tbl .col-s1b,#tbl .col-s2a,#tbl .col-s2b,#tbl .col-s3a,#tbl .col-s3b,
#tbl .col-s4a,#tbl .col-s4b,#tbl .col-s5a,#tbl .col-s5b,#tbl .col-pt{
  width:25px; text-align:center; padding:9px 3px; font-size:12px}
#tbl .col-esito{width:58px; text-align:center}
#tbl .col-strategia,#tbl .col-tipo{width:80px; white-space:normal; word-break:break-word}
#tbl .col-g1,#tbl .col-g2,#tbl .col-campionato{width:80px; white-space:normal; word-break:break-word}
#tbl .col-data,#tbl .col-ora{width:58px}

/* Partite del Giorno: soglia/reali su una riga ciascuna, H2H minima */
.picks-grid{table-layout:auto}
.picks-grid td.pre{white-space:nowrap; min-width:0; line-height:1.45}
.picks-grid .col-h2h{width:1%; white-space:nowrap; text-align:center; padding-left:6px; padding-right:6px}

/* --- Admin console --- */
.admin-note{background:rgba(14,165,233,.10); border:1px solid #1f5e8c; color:#bfe0f5;
  border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:13px}
.admin-panel h3{margin:0 0 12px; font-size:15px}
.auth-row{display:flex; align-items:center; gap:14px; font-size:14px}
.btn-sm{background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:7px 14px; cursor:pointer; font-weight:600; font-size:13px}
.btn-sm:hover:not(:disabled){background:#1d3563}
.btn-sm:disabled,.btn-xs:disabled{opacity:.45; cursor:not-allowed}
.btn-xs{background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:3px 7px; cursor:pointer; font-size:13px; line-height:1}
.btn-log{background:#0ea5e9; border-color:#0ea5e9; color:#fff; cursor:pointer}
.btn-log:hover{background:#0b8ec9}
.act-row{display:flex; gap:4px; flex-wrap:wrap}
.text-left{text-align:left}

/* switch */
.switch{position:relative; display:inline-block; width:46px; height:24px}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; inset:0; background:#33415c; border-radius:24px; transition:.2s}
.slider:before{content:""; position:absolute; height:18px; width:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:#46d369}
.switch input:checked + .slider:before{transform:translateX(22px)}

/* tabella utenti */
#usersTable{table-layout:auto; font-size:12px}
#usersTable th,#usersTable td{padding:8px 10px; vertical-align:top}
#usersTable .u-name{font-family:monospace; font-size:12px; color:#4da3ff}
#usersTable .u-pass{font-family:monospace; color:#ffd700}
#usersTable .u-small{font-size:11px}
#usersTable .u-muted{color:var(--muted)}
.exp-ok{color:#90ee90} .exp-ko{color:#f87171; font-weight:700}
.role-admin{color:#ffd700}
.active-now{color:#4ade80}

/* overlay log */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex;
  align-items:center; justify-content:center; z-index:50}
.overlay-box{background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:18px; width:min(640px,92vw)}
.overlay-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.overlay-head h3{margin:0; font-size:15px}

/* --- Admin: bottoni colorati + form Nuovo Utente --- */
.btn-primary{background:#6d28d9; border-color:#6d28d9; color:#fff}
.btn-primary:hover:not(:disabled){background:#7c3aed}
.btn-accent{background:#16294d; color:#9fc2ff}
.btn-danger{background:#7a1f2b; border-color:#a3303f; color:#ffd9df}
.btn-danger:hover:not(:disabled){background:#992535}
.btn-warning{background:#7a5b14; color:#ffe9a8}
.create-form{background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:16px; margin-bottom:16px}
.create-form h4{margin:0 0 12px; font-size:14px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted)}
.form-grid label.span2{grid-column:1 / -1}
.form-grid input{background:var(--panel); border:1px solid var(--border); border-radius:7px;
  padding:7px 10px; color:var(--text); font-size:13px}
.form-actions{display:flex; gap:8px; margin-top:12px}
.new-creds{margin-top:12px; padding:10px 12px; background:rgba(70,211,105,.10);
  border:1px solid #2e6b40; border-radius:8px; font-size:13px}
.new-creds code{color:#ffd700; font-family:monospace}
@media(max-width:700px){ .form-grid{grid-template-columns:1fr} }

/* --- Header utente + logout (fase 2 login) --- */
.header-right{position:absolute; right:24px; display:flex; align-items:center; gap:14px}
.clock{position:static; right:auto}
.user-box{display:flex; align-items:center; gap:8px}
.user-chip{color:var(--text); font-weight:600; font-size:13px; background:#16294d;
  border:1px solid var(--border); border-radius:8px; padding:6px 10px}
.btn-logout{background:#3a1622; border:1px solid #6b2e3c; color:#ff9aa9; cursor:pointer;
  border-radius:8px; padding:6px 12px; font-weight:600; font-size:13px}
.btn-logout:hover{background:#4d1c2c; color:#fff}

/* --- Pagina login --- */
.login-body{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%, #122a52, #0a1428 60%)}
.login-card{width:380px; max-width:92vw; background:var(--panel);
  border:1px solid #5b3a8a; border-radius:16px; padding:34px 30px;
  box-shadow:0 0 60px rgba(91,58,138,.35); text-align:center}
.login-logo{font-size:42px; margin-bottom:8px}
.login-title{margin:0; font-size:26px; font-weight:800;
  background:linear-gradient(90deg,#39b0ff,#ff5c7a); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.login-sub{margin:4px 0 22px; color:var(--muted); font-size:13px}
.login-label{display:block; text-align:left; color:var(--muted); font-size:13px;
  margin-bottom:14px}
.login-label input{width:100%; margin-top:5px; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:9px; padding:11px 12px; font-size:14px}
.login-label input:focus{outline:none; border-color:#7c5fd0; box-shadow:0 0 0 2px rgba(124,95,208,.3)}
.btn-login{width:100%; margin-top:4px; padding:12px; border:none; border-radius:10px;
  color:#fff; font-weight:700; font-size:15px; cursor:pointer;
  background:linear-gradient(90deg,#6d3fe0,#8b5cf6)}
.btn-login:hover{filter:brightness(1.1)}
.login-or{position:relative; margin:18px 0; color:var(--muted); font-size:12px}
.login-or::before,.login-or::after{content:""; position:absolute; top:50%; width:38%;
  height:1px; background:var(--border)}
.login-or::before{left:0} .login-or::after{right:0}
.btn-guest{width:100%; padding:12px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg2); color:var(--text); font-weight:600; font-size:14px; cursor:pointer}
.btn-guest:hover{background:var(--panel2)}
.login-msg{margin-top:16px; font-size:13px; min-height:18px}
.login-msg.err{color:#ff8a9c}

/* --- Testa a Testa --- */
.h2h-search{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap}
.h2h-search label{display:flex; flex-direction:column; gap:4px; font-size:12px;
  color:var(--muted); font-weight:600}
.h2h-search input{min-width:240px; padding:9px 11px; border:1px solid var(--border);
  border-radius:8px; background:var(--bg2); color:var(--text); font-size:14px}
.h2h-search .vs{font-weight:700; color:var(--muted); padding-bottom:9px}
.btn-cerca{padding:10px 18px; border:none; border-radius:8px; cursor:pointer;
  background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; font-weight:700; font-size:14px}
.btn-cerca:hover{filter:brightness(1.08)}
.btn-h2h{padding:4px 9px; border:1px solid #2c4a78; border-radius:6px; cursor:pointer;
  background:#1b2a44; color:#cfe3ff; font-weight:700; font-size:12px; white-space:nowrap}
.btn-h2h:hover{background:#2f5fa8; color:#fff}