:root{
  --bg:#f4f6f9; --panel:#ffffff; --line:#e3e8ef; --ink:#1f2937; --muted:#6b7280;
  --accent:#2563eb; --accent-d:#1d4ed8;
  --grey:#9ca3af; --green:#16a34a; --blue:#2563eb; --red:#dc2626;
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;}
h2{font-size:15px;margin:0 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}

/* Toolbar */
.toolbar{display:flex;align-items:center;gap:10px;background:var(--panel);border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow);flex-wrap:wrap;}
.brand{font-size:18px;font-weight:700;display:inline-flex;align-items:center;gap:8px;}
.brand img{height:28px;width:auto;display:block;}
@media(max-width:1400px){ .brand img{height:24px;} }
@media(max-height:800px){ .brand img{height:22px;} }
@media(max-width:760px){ .toolbar{flex-wrap:wrap;row-gap:8px;} .brand img{height:20px;} .brand{font-size:16px;} }
.status-wrap{display:flex;align-items:center;gap:6px;color:var(--muted);}
.status-wrap select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;}
.spacer{flex:1;}
.btn{border:1px solid var(--line);background:var(--accent);color:#fff;border-radius:8px;padding:8px 13px;
  font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;}
.btn:hover{background:var(--accent-d);}
.btn.ghost{background:#fff;color:var(--ink);}
.btn.ghost:hover{background:#f1f5f9;}
.btn.small{padding:5px 9px;font-size:13px;}
.btn.danger{background:var(--red);}
.btn.grey{background:#6b7280;}

/* Boards */
.boards{display:flex;gap:12px;padding:14px 16px;overflow-x:auto;}
.board{flex:0 0 150px;min-width:0;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--grey);
  border-radius:10px;padding:10px 12px;box-shadow:var(--shadow);cursor:pointer;}
.board.free{border-left-color:var(--green);}
.board.busy{border-left-color:var(--blue);}
.board.problem{border-left-color:var(--red);}
.board.offline{border-left-color:var(--grey);}
.board .bn{font-weight:700;}
.board .bs{font-size:12px;color:var(--muted);margin-top:2px;}
.board .bg{font-size:13px;margin-top:6px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board .bm{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board .bt{font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board .bt.on{color:#16a34a;font-weight:600;}
.board .bt.off{color:#9aa3af;}
.board.dragover{outline:2px dashed var(--accent);outline-offset:2px;}

/* Main */
.main{display:flex;gap:16px;padding:0 16px 24px;align-items:flex-start;}
.pool{flex:0 0 25%;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow);}
.pool.dragover{outline:2px dashed var(--accent);}
.pool-list{display:flex;flex-direction:column;gap:8px;min-height:60px;}
.pcard{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff;cursor:grab;}
.pcard:hover{background:#f8fafc;}
.pcard .pn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard .pd{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard.assigned{opacity:.45;}

.groups-wrap{flex:1;min-width:0;}
.groups{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:1100px){.groups{grid-template-columns:repeat(2,1fr);}}
.group{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--grey);border-radius:12px;
  padding:12px;box-shadow:var(--shadow);min-height:120px;min-width:0;cursor:grab;}
.group.assigned,.group.running{border-top-color:var(--blue);}
.group.finished{border-top-color:var(--green);}
.group.dragover{outline:2px dashed var(--accent);}
.group .gh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.group .gt{font-weight:700;font-size:15px;}
.group .gb{font-size:12px;color:var(--muted);}
.group .gp{display:flex;flex-direction:column;gap:5px;}
.group .gp .row{padding:5px 8px;border-radius:7px;background:#f8fafc;border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.group .meta{margin-top:8px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;}
.lockbtn{font-size:12px;padding:4px 8px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;}
.lockbtn:hover{background:#f1f5f9;}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal.show{display:flex;}
.modal-box{background:#fff;border-radius:14px;padding:20px;max-width:640px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 40px rgba(0,0,0,.25);}
.modal-box h3{margin:0 0 14px;}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.field label{font-size:13px;color:var(--muted);}
.field input,.field select{padding:9px;border:1px solid var(--line);border-radius:8px;font-size:14px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}
.qr{display:block;margin:10px auto;border:1px solid var(--line);border-radius:8px;}
.tbl{width:100%;border-collapse:collapse;margin:6px 0 14px;}
.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);font-size:13px;}
.tbl th{color:var(--muted);font-weight:600;}
.sched .done{color:var(--green);}
.pill{display:inline-block;font-size:11px;padding:2px 7px;border-radius:10px;background:#eef2ff;color:var(--accent);}

/* Toast */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;
  padding:10px 18px;border-radius:10px;opacity:0;transition:opacity .15s;pointer-events:none;font-weight:600;}
.toast.show{opacity:1;}
.toast.err{background:var(--red);}

/* ===== Hilfe-Button + schwebendes Hilfefenster ===== */
.btn.help{background:#0e7490;}
.btn.help:hover{background:#0c6178;}
.help-win{position:fixed;inset:0;background:rgba(2,8,20,.62);display:none;align-items:center;justify-content:center;z-index:1000;}
.help-win.show{display:flex;}
.help-frame{width:92vw;max-width:1100px;height:88vh;background:var(--bg,#0b1220);border:1px solid #22304a;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;}
.help-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#131c2e;border-bottom:1px solid #22304a;}
.help-title{font-weight:700;color:#f1f5f9;}
.help-actions{display:flex;align-items:center;gap:14px;}
.help-open{color:#38bdf8;text-decoration:none;font-size:14px;}
.help-open:hover{text-decoration:underline;}
.help-close{background:transparent;border:none;color:#93a3bb;font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px;}
.help-close:hover{background:rgba(255,255,255,.08);color:#f1f5f9;}
.help-frame iframe{flex:1;width:100%;border:none;background:#0b1220;}

/* ===== KO-Phase ===== */
.btn.ko-btn{background:#7c3aed;}
.btn.ko-btn:hover{background:#6d28d9;}
.btn.ko-btn:disabled{background:#3a3550;color:#8b86a0;cursor:not-allowed;}
.btn.primary{background:#16a34a;}
.btn.primary:hover{background:#15803d;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}
.ko-reason{background:rgba(251,191,36,.12);border-left:4px solid #fbbf24;border-radius:8px;padding:8px 12px;margin:6px 0 12px;color:#b45309;}
.ko-prev{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start;}
.ko-quals h4,.ko-tree h4{margin:0 0 8px;font-size:14px;color:var(--muted,#64748b);text-transform:uppercase;letter-spacing:.5px;}
.ko-seedlist{margin:0;padding-left:20px;}
.ko-seedlist li{margin:3px 0;}
.ko-seedlist .muted,.muted{color:#94a3b8;}
.ko-grid{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px;}
.ko-col{min-width:230px;display:flex;flex-direction:column;gap:12px;justify-content:space-around;}
.ko-h{font-size:13px;font-weight:700;color:#7c3aed;text-transform:uppercase;letter-spacing:.5px;text-align:center;}
.ko-m{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;}
.ko-vs{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;}
.ko-vs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ko-x{color:#94a3b8;font-weight:400;flex:0 0 auto;}
.ko-meta{font-size:12px;color:#64748b;margin-top:4px;}
.ko-st{display:inline-block;border-radius:5px;padding:0 6px;font-weight:700;font-size:11px;}
.ko-st.pending{background:#e2e8f0;color:#64748b;}
.ko-st.running{background:rgba(52,211,153,.2);color:#15803d;}
.ko-st.finished{background:rgba(56,189,248,.2);color:#0369a1;}
@media(max-width:760px){.ko-prev{grid-template-columns:1fr;}}

/* ===== KO im Dashboard ===== */
.ko-dash-head{font-size:15px;font-weight:700;margin:0 0 12px;}
.ko-dash-head .muted{font-weight:400;font-size:13px;}
.ko-h-click{cursor:pointer;user-select:none;}
.ko-h-click:hover{text-decoration:underline;}
.ko-assignable{border-color:#7c3aed;box-shadow:0 0 0 1px rgba(124,58,237,.25);cursor:grab;}
.ko-assignable:active{cursor:grabbing;}
.ko-done{opacity:.7;}
.ko-hint{font-size:11px;color:#7c3aed;margin-top:4px;}
.ko-board{display:inline-block;margin-left:6px;color:#0369a1;font-weight:700;}
.ko-mini{border:none;background:#e2e8f0;border-radius:5px;cursor:pointer;font-size:11px;padding:0 5px;margin-left:3px;line-height:1.6;}
.ko-mini:hover{background:#cbd5e1;}
.ko-m i{color:#94a3b8;font-style:normal;}

/* ===== Lucky-Loser-Auswahl (Vorschau) ===== */
.ll-create{margin-top:16px;border-top:1px solid #e2e8f0;padding-top:12px;}
.ll-toggle{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;}
.ll-players{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 18px;}
.ll-p{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;}

/* Mitglieder-Auswahl (+ Mitglieder) */
.mpick-head{display:flex;align-items:center;gap:10px;margin:4px 0 10px;flex-wrap:wrap;}
.mpick-list{max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line,#e3e8ef);border-radius:8px;padding:6px;}
.mpick{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;}
.mpick:hover{background:#f1f5f9;}
.mpick.added{opacity:.6;cursor:default;}
.mpick input{width:18px;height:18px;flex:0 0 auto;}

/* Automatische Spielverteilung (Trainings-Toggle) */
#autoBtn{background:#5a5a5a; border-color:#5a5a5a; color:#fff;}
#autoBtn.on{background:#1f9d3a; border-color:#1f9d3a; color:#fff;}

/* Trainings-Spielerstatus (Aktiv/Spät/Pause/Verlassen) */
.gp .row{display:flex; align-items:center; gap:8px;}
.gp .row .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.stsel{font-size:12px; padding:3px 6px; border:1px solid #cfd6e4; border-radius:6px; background:#fff; cursor:pointer;}
.gp .row.st-paused{opacity:.65;}
.gp .row.st-left{opacity:.45;}
.gp .row.st-late .nm{font-weight:600;}

/* Doppelstatistik-Toggle (Trainings-Toolbar) */
#dblBtn{background:#5a5a5a; border-color:#5a5a5a; color:#fff;}
#dblBtn.on{background:#1f9d3a; border-color:#1f9d3a; color:#fff;}

/* Konto-Indikator (Pool-Karten) */
.acc-dot{font-size:.85em;margin-right:2px}
.acc-dot.off{opacity:.85}