:root{
  --bg:#0b1220; --panel:#121a2b; --panel2:#0f1729; --line:#1f2b45;
  --text:#e8edf7; --muted:#8ba0c4; --accent:#d4a017; --accent2:#3f6fd6;
  --danger:#ff5c5c; --good:#2e8b57;
  --bg-pattern: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><text x='15' y='80' font-size='46' fill='white' opacity='0.10' transform='rotate(20 15 80)'>%E2%9C%88</text><text x='240' y='210' font-size='64' fill='white' opacity='0.08' transform='rotate(-15 240 210)'>%E2%9C%88</text><text x='90' y='350' font-size='50' fill='white' opacity='0.09' transform='rotate(8 90 350)'>%E2%9C%88</text><line x1='0' y1='270' x2='420' y2='270' stroke='white' stroke-width='2' stroke-dasharray='18 14' opacity='0.08'/><line x1='0' y1='40' x2='420' y2='40' stroke='white' stroke-width='1' stroke-dasharray='4 10' opacity='0.06'/></svg>");
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f4f6fb; --panel:#ffffff; --panel2:#eef1f8; --line:#dde3f0;
    --text:#101828; --muted:#5b6b8c;
    --bg-pattern: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><text x='15' y='80' font-size='46' fill='black' opacity='0.09' transform='rotate(20 15 80)'>%E2%9C%88</text><text x='240' y='210' font-size='64' fill='black' opacity='0.04' transform='rotate(-15 240 210)'>%E2%9C%88</text><text x='90' y='350' font-size='50' fill='black' opacity='0.08' transform='rotate(8 90 350)'>%E2%9C%88</text><line x1='0' y1='270' x2='420' y2='270' stroke='black' stroke-width='2' stroke-dasharray='18 14' opacity='0.04'/><line x1='0' y1='40' x2='420' y2='40' stroke='black' stroke-width='1' stroke-dasharray='4 10' opacity='0.025'/></svg>");
  }
}
:root[data-theme="light"]{
  --bg:#f4f6fb; --panel:#ffffff; --panel2:#eef1f8; --line:#dde3f0;
  --text:#101828; --muted:#5b6b8c;
  --bg-pattern: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><text x='15' y='80' font-size='46' fill='black' opacity='0.09' transform='rotate(20 15 80)'>%E2%9C%88</text><text x='240' y='210' font-size='64' fill='black' opacity='0.04' transform='rotate(-15 240 210)'>%E2%9C%88</text><text x='90' y='350' font-size='50' fill='black' opacity='0.08' transform='rotate(8 90 350)'>%E2%9C%88</text><line x1='0' y1='270' x2='420' y2='270' stroke='black' stroke-width='2' stroke-dasharray='18 14' opacity='0.04'/><line x1='0' y1='40' x2='420' y2='40' stroke='black' stroke-width='1' stroke-dasharray='4 10' opacity='0.025'/></svg>");
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background-color:var(--bg); color:var(--text);
  background-image: var(--bg-pattern);
  background-repeat: repeat;
  background-size: 420px 420px;
  background-attachment: fixed;
}
.wrap{max-width:900px;margin:0 auto;padding:20px 16px 60px;}
#loginScreen{min-height:100vh;}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{width:46px;height:46px;object-fit:contain;flex-shrink:0;}
header h1{font-size:1.3rem;margin:0;letter-spacing:.3px;}
header .tag{color:var(--muted);font-size:.8rem;}
nav{display:flex;gap:6px;background:var(--panel2);padding:5px;border-radius:12px;margin-bottom:20px;overflow-x:auto;}
nav button{
  flex:1;padding:10px 12px;border:none;border-radius:9px;background:transparent;color:var(--muted);
  font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap;
}
nav button.active{background:var(--accent);color:#1a1200;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;}
.card h2{margin:0 0 12px;font-size:1rem;}
.row{display:flex;gap:8px;flex-wrap:wrap;}
input,select,textarea{
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:9px 11px;border-radius:8px;font-size:.9rem;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent2);}
button.btn{
  background:var(--accent2);color:#06131f;border:none;padding:9px 16px;border-radius:8px;
  font-weight:700;cursor:pointer;font-size:.85rem;
}
button.btn.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--line);}
button.btn.danger{background:var(--danger);color:#2a0000;}
button.btn.good{background:var(--good);color:#012;}
button.btn:disabled{opacity:.45;cursor:not-allowed;}
.student-item, .material-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel2);
  flex-wrap:wrap;
}
.student-item .name{font-weight:700;}
.student-item .meta{color:var(--muted);font-size:.8rem;}
.pill{background:rgba(245,166,35,.15);color:var(--accent);padding:3px 9px;border-radius:20px;font-size:.75rem;font-weight:700;}
.online-badge{background:var(--panel2);border:1px solid var(--line);}
.muted{color:var(--muted);}
.empty{color:var(--muted);font-size:.85rem;padding:14px 0;text-align:center;}
.detail-back{background:none;border:none;color:var(--accent2);cursor:pointer;font-size:.85rem;margin-bottom:10px;padding:0;}
.session-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.85rem;}
.session-row:last-child{border-bottom:none;}
.stopwatch-display{
  font-size:3rem;font-weight:800;text-align:center;letter-spacing:2px;
  padding:30px 0;font-variant-numeric:tabular-nums;color:var(--accent);
}
.sw-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.sw-controls button{min-width:110px;}
.upload-drop{
  border:2px dashed var(--line);border-radius:12px;padding:24px;text-align:center;color:var(--muted);
  cursor:pointer;font-size:.85rem;
}
.upload-drop:hover{border-color:var(--accent2);}
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--good);color:#012;padding:10px 18px;border-radius:10px;font-weight:600;font-size:.85rem;
  opacity:0;pointer-events:none;transition:opacity .25s; z-index:50;
}
.toast.show{opacity:1;}
label.small{font-size:.75rem;color:var(--muted);display:block;margin-bottom:4px;}
.field{display:flex;flex-direction:column;gap:2px;}
.thumb{width:36px;height:36px;border-radius:6px;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}