:root{
  --bg:#f4f6f2;
  --surface:#ffffff;
  --surface-2:#eef1ea;
  --border:#dbe1d6;
  --border-strong:#c3cdbb;
  --text:#1a231d;
  --text-muted:#5e6b60;
  --text-faint:#8a9589;
  --accent:#1f6d45;
  --accent-strong:#164f32;
  --accent-wash:#e3efe6;
  --gold:#a9791f;
  --taken:#a8452f;
  --taken-wash:#f6e5df;
  --danger:#c23b2c;
  --warn:#b8860f;
  --focus:#1f6d45;
  --shadow:0 1px 2px rgba(20,30,20,.06),0 4px 14px rgba(20,30,20,.06);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12160f;
    --surface:#1a201a;
    --surface-2:#212a1e;
    --border:#333e2f;
    --border-strong:#48573f;
    --text:#e9efe4;
    --text-muted:#a3af9a;
    --text-faint:#748069;
    --accent:#5db787;
    --accent-strong:#7fd3a4;
    --accent-wash:#1c3327;
    --gold:#d9b25c;
    --taken:#e08469;
    --taken-wash:#3a241c;
    --danger:#e8604a;
    --warn:#e0b84a;
    --focus:#7fd3a4;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 18px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:14px;
  line-height:1.45;
}
h1,h2,h3{
  font-family:"Oswald", ui-sans-serif, system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-wrap:balance;
  margin:0;
}
.mono{font-family:"JetBrains Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}
button, input, select, textarea{font-family:inherit; font-size:inherit; color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

.app{
  max-width:1360px;
  margin:0 auto;
  padding:20px 20px 60px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

header.top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:2px solid var(--border-strong);
}
header.top .title-block h1{
  font-size:26px;
  font-weight:700;
  color:var(--accent-strong);
  margin:0 0 2px;
}
header.top .title-block p{
  margin:0;
  color:var(--text-muted);
  font-size:13px;
}
.live-indicator{
  display:inline-flex;
  align-items:center;
  gap:5px;
  text-transform:uppercase;
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--text-faint);
}
.live-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--text-faint);
  box-shadow:0 0 0 0 transparent;
}
.live-dot.on{
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.live-dot.connecting{
  background:var(--warn);
  animation:live-pulse 1s ease-in-out infinite;
}
.live-dot.off{background:var(--danger);}
@keyframes live-pulse{
  0%,100%{opacity:1;}
  50%{opacity:.35;}
}
@media (prefers-reduced-motion: reduce){
  .live-dot.connecting{animation:none;}
}
.stat-row{display:flex; gap:10px; flex-wrap:wrap;}
.stat-chip{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:7px 12px;
  display:flex;
  flex-direction:column;
  min-width:92px;
  box-shadow:var(--shadow);
}
.stat-chip .n{
  font-family:"JetBrains Mono", monospace;
  font-weight:600;
  font-size:17px;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.stat-chip .l{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-faint);
}
.stat-chip.accent .n{color:var(--accent-strong);}
.stat-chip.gold .n{color:var(--gold);}

.layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:18px;
  align-items:start;
}
@media (max-width:880px){
  .layout{grid-template-columns:1fr;}
  .sidebar{position:static; max-height:none;}
  #teamList{overflow-y:visible;}
}

.controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:10px;
}
.search-wrap{position:relative; flex:1 1 220px; min-width:180px;}
.search-wrap input{
  width:100%;
  padding:9px 12px 9px 32px;
  border-radius:8px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text);
}
.search-wrap svg{
  position:absolute; left:10px; top:50%;
  transform:translateY(-50%);
  width:15px; height:15px;
  stroke:var(--text-faint);
}
.role-tabs{
  display:flex;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:2px;
  gap:2px;
}
.role-tabs button{
  border:none;
  background:transparent;
  padding:7px 12px;
  border-radius:6px;
  font-family:"Oswald",sans-serif;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.role-tabs button.active{
  background:var(--surface);
  color:var(--accent-strong);
  box-shadow:var(--shadow);
}
.toggle-free{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--text-muted);
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  user-select:none;
}
.toggle-free input{accent-color:var(--accent);}
.btn-add{
  border:1px dashed var(--border-strong);
  background:var(--surface);
  border-radius:8px;
  padding:8px 12px;
  font-size:12.5px;
  color:var(--accent-strong);
  font-weight:600;
  white-space:nowrap;
}
.btn-add:hover{background:var(--accent-wash);}

.table-wrap{
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.table-scroll{overflow-x:auto;}
table{width:100%; border-collapse:collapse; min-width:640px;}
thead th{
  text-align:left;
  font-family:"Oswald",sans-serif;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  background:var(--surface-2);
  padding:9px 10px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
}
tbody tr{border-bottom:1px solid var(--border);}
tbody tr:last-child{border-bottom:none;}
tbody tr.taken{background:var(--taken-wash);}
tbody tr:not(.taken):hover{background:var(--surface-2);}
td{padding:8px 10px; vertical-align:middle;}
.col-ruolo{width:38px;}
.role-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:5px;
  font-family:"Oswald",sans-serif; font-size:11px; font-weight:600; color:#fff;
}
.role-P{background:#7d6b1e;}
.role-D{background:#2f6f8f;}
.role-C{background:#3d7a3d;}
.role-A{background:#a8452f;}
@media (prefers-color-scheme: dark){
  .role-P{background:#a4903a;}
  .role-D{background:#4a8fb2;}
  .role-C{background:#5b9a5b;}
  .role-A{background:#c96a4f;}
}

.col-nome{min-width:150px;}
.nome-cell .nome{font-weight:600;}
.nome-cell .squadra{color:var(--text-faint); font-size:12px;}
.col-qta{width:60px; text-align:right;}
.col-qta.mono{color:var(--text-muted);}
.col-stato{min-width:170px;}
.badge-libero{font-size:11px; color:var(--text-faint);}
.badge-taken{display:inline-flex; flex-direction:column; gap:1px;}
.badge-taken .team{font-weight:600; color:var(--taken); font-size:12.5px;}
.badge-taken .price{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--text-muted);}
.col-azioni{width:96px; text-align:right;}
.row-btn{
  border:1px solid var(--border-strong);
  background:var(--surface);
  border-radius:6px;
  padding:5px 10px;
  font-size:12px;
  font-weight:600;
}
.row-btn.assign{color:var(--accent-strong); border-color:var(--accent);}
.row-btn.assign:hover{background:var(--accent-wash);}
.row-btn.undo{color:var(--danger); border-color:var(--danger);}
.row-btn.undo:hover{background:var(--taken-wash);}

tr.editor td{background:var(--accent-wash); padding:10px;}
.editor-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.editor-form select, .editor-form input[type=number]{
  padding:7px 9px; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface);
}
.editor-form select{min-width:180px;}
.editor-form input[type=number]{width:80px; font-family:"JetBrains Mono",monospace;}
.editor-form .go{
  background:var(--accent); color:#fff; border:none; border-radius:6px;
  padding:8px 14px; font-weight:600; font-size:12.5px;
}
.editor-form .cancel{
  background:none; border:1px solid var(--border-strong); border-radius:6px;
  padding:8px 12px; font-size:12.5px; color:var(--text-muted);
}
.editor-form .label{font-size:12px; color:var(--text-muted);}

.empty-state{padding:36px 20px; text-align:center; color:var(--text-faint); font-size:13px;}

.sidebar{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:sticky;
  top:16px;
  max-height:calc(100vh - 32px);
}
.sidebar h2{font-size:13px; color:var(--text-faint); margin:0 0 2px; font-weight:600; letter-spacing:.06em; flex-shrink:0;}
#teamList{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  padding-right:4px;
  min-height:0;
}
.team-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:border-color .12s;
}
.team-card:hover{border-color:var(--border-strong);}
.team-card.active{border-color:var(--accent); background:var(--accent-wash);}
.team-card .row1{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.team-card .name{font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.team-card .credits{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:15px; font-variant-numeric:tabular-nums;}
.team-card .credits.warn{color:var(--warn);}
.team-card .credits.danger{color:var(--danger);}
.team-card .row2{display:flex; justify-content:space-between; font-size:11px; color:var(--text-faint); margin-top:2px;}
.bar{height:5px; border-radius:3px; background:var(--surface-2); margin-top:6px; overflow:hidden;}
.bar-fill{height:100%; background:var(--accent); border-radius:3px;}
.bar-fill.warn{background:var(--warn);}
.bar-fill.danger{background:var(--danger);}

.sidebar-foot{display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; flex-shrink:0;}
.foot-btn{
  flex:1 1 30%;
  padding:8px 6px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:11.5px;
  color:var(--text-muted);
  text-align:center;
}
.foot-btn:hover{background:var(--surface-2);}

.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(10,14,9,.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  z-index:50;
}
.modal{
  background:var(--surface);
  border-radius:12px;
  border:1px solid var(--border);
  padding:20px;
  width:100%;
  max-width:360px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.modal h3{font-size:15px;}
.modal label{font-size:12px; color:var(--text-muted); display:flex; flex-direction:column; gap:4px;}
.modal input, .modal select, .modal textarea{
  padding:8px 10px;
  border-radius:6px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text);
}
.modal textarea{width:100%; height:220px; font-family:"JetBrains Mono",monospace; font-size:11.5px; background:var(--surface-2);}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:4px;}
.modal-actions button{padding:8px 14px; border-radius:6px; font-size:12.5px; font-weight:600;}
.modal-actions .go{background:var(--accent); color:#fff; border:none;}
.modal-actions .cancel{background:none; border:1px solid var(--border-strong); color:var(--text-muted);}

.budget-row{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px;}
.budget-row input{width:80px; font-family:"JetBrains Mono",monospace;}

[hidden]{display:none!important;}

/* ---------- landing page (crea/entra in una lega) ---------- */
.landing{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.landing-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:28px;
  width:100%;
  max-width:420px;
  display:flex; flex-direction:column; gap:14px;
}
.landing-card h1{font-size:22px; color:var(--accent-strong); margin-bottom:2px;}
.landing-card p.sub{color:var(--text-muted); font-size:13px; margin:0;}
.landing-card label{font-size:12.5px; color:var(--text-muted); display:flex; flex-direction:column; gap:4px;}
.landing-card input{
  padding:10px 12px; border-radius:8px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); font-size:14px;
}
.landing-card .go{
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:11px 14px; font-weight:600; font-size:13.5px; margin-top:4px;
}
.landing-card .go:hover{background:var(--accent-strong);}
.landing-card .error{color:var(--danger); font-size:12.5px; min-height:1em;}
.landing-card .link-box{
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:12px; display:flex; flex-direction:column; gap:8px;
}
.landing-card .link-box .url{font-family:"JetBrains Mono",monospace; font-size:12.5px; word-break:break-all;}
.landing-card hr{border:none; border-top:1px solid var(--border); margin:6px 0;}

/* ---------- gestione squadre nella sidebar ---------- */
.team-manage{
  display:flex; flex-direction:column; gap:6px;
  border:1px dashed var(--border-strong); border-radius:10px; padding:10px;
}
.team-manage .row{display:flex; gap:6px;}
.team-manage input[type=text]{flex:1; min-width:0;}
.team-manage input[type=number]{width:72px; font-family:"JetBrains Mono",monospace;}
.team-manage input{
  padding:7px 9px; border-radius:6px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); font-size:12.5px;
}
.team-manage .go{
  background:var(--accent); color:#fff; border:none; border-radius:6px;
  padding:7px 10px; font-size:12px; font-weight:600; white-space:nowrap;
}
.team-card .row1 .del{
  border:none; background:none; color:var(--text-faint); font-size:15px;
  line-height:1; padding:0 2px; margin-left:4px;
}
.team-card .row1 .del:hover{color:var(--danger);}