:root {
  --bg0:#ffffff; --bg1:#f5f5f3; --bg2:#eeedeb; --bg3:#e4e3e0;
  --bgi:#e6f1fb; --bgs:#eaf3de; --bgw:#faeeda; --bgd:#fcebeb;
  --tx0:#1a1a1a; --tx1:#595955; --tx2:#9a9994;
  --txi:#185fa5; --txs:#3b6d11; --txw:#854f0b; --txd:#a32d2d;
  --bl:rgba(0,0,0,0.09); --bm:rgba(0,0,0,0.16);
  --rmd:8px; --rlg:12px; --fn:system-ui,-apple-system,'Segoe UI',sans-serif;
}
html.dark {
  --bg0:#121212; --bg1:#1e1e1e; --bg2:#0a0a0a; --bg3:#333333;
  --bgi:#1a3b5c; --bgs:#2e4a1a; --bgw:#5c3a10; --bgd:#5c1e1e;
  --tx0:#e0e0e0; --tx1:#a0a0a0; --tx2:#707070;
  --txi:#6eb0f0; --txs:#8ad63e; --txw:#e59b37; --txd:#f05e5e;
  --bl:rgba(255,255,255,0.1); --bm:rgba(255,255,255,0.2);
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg2); color:var(--tx0); font-family:var(--fn); font-size:14px; line-height:1.5; transition:background 0.2s, color 0.2s; }
.layout { display:flex; height:100vh; overflow:hidden; position:relative; }
.sidebar { width:240px; background:var(--bg0); border-right:0.5px solid var(--bl); display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto; transition:background 0.2s, transform 0.2s; z-index:50; }
.sidebar-logo { padding:1rem 1rem .75rem; border-bottom:0.5px solid var(--bl); display:flex; justify-content:space-between; align-items:center; }
.sidebar-logo-title { font-size:14px; font-weight:600; }
.sidebar-logo-sub { font-size:11px; color:var(--tx2); margin-top:2px; }
.sidebar-section { padding:.5rem .75rem .25rem; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--tx2); margin-top:.5rem; }
.sitem { display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:var(--rmd); margin:1px 6px; cursor:pointer; font-size:13px; color:var(--tx1); border:none; background:none; width:calc(100% - 12px); text-align:left; font-family:var(--fn); transition:background .12s, color .12s; }
.sitem:hover { background:var(--bg1); color:var(--tx0); }
.sitem.on { background:var(--bg2); color:var(--tx0); font-weight:500; }
.sitem i { font-size:15px; flex-shrink:0; }
.sitem-add { color:var(--txi); }
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.topbar { background:var(--bg0); border-bottom:0.5px solid var(--bl); padding:.625rem 1.25rem; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; min-height:52px; transition:background 0.2s; }
.bc { display:flex; align-items:center; gap:6px; font-size:13px; }
.bc-link { color:var(--tx2); cursor:pointer; }
.bc-link:hover { color:var(--tx0); }
.bc-sep { color:var(--tx2); font-size:11px; }
.bc-cur { color:var(--tx0); font-weight:500; }
.content { flex:1; overflow-y:auto; padding:1.25rem; }
.tabs { display:flex; gap:2px; border-bottom:0.5px solid var(--bl); margin-bottom:1.25rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tab { padding:7px 14px; border:none; background:none; cursor:pointer; font-size:13px; color:var(--tx1); border-bottom:2px solid transparent; white-space:nowrap; font-family:var(--fn); transition:color .12s; }
.tab:hover { color:var(--tx0); }
.tab.on { color:var(--tx0); border-bottom-color:var(--tx0); font-weight:500; }
.card { background:var(--bg0); border:0.5px solid var(--bl); border-radius:var(--rlg); padding:1.125rem; margin-bottom:1rem; transition:background 0.2s; position:relative; }
.cls-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-bottom:1rem; }
.cls-card { background:var(--bg0); border:0.5px solid var(--bl); border-radius:var(--rlg); padding:1rem; cursor:pointer; transition:border-color .15s, background 0.2s; }
.cls-card:hover { border-color:var(--bm); }
.cls-card-name { font-size:15px; font-weight:600; margin-bottom:4px; }
.cls-card-meta { font-size:12px; color:var(--tx2); }
.stitle { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--tx2); margin-bottom:.75rem; }
label { font-size:13px; color:var(--tx1); display:block; margin-bottom:4px; }
input,select,textarea { width:100%; font-family:var(--fn); font-size:13px; padding:7px 10px; border:0.5px solid var(--bm); border-radius:var(--rmd); background:var(--bg0); color:var(--tx0); outline:none; transition:border-color .12s, background 0.2s, color 0.2s, box-shadow 0.2s; }
input:focus,select:focus,textarea:focus { border-color:var(--tx0); }
select { height:36px; cursor:pointer; }
textarea { resize:vertical; line-height:1.5; }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.row { display:flex; align-items:center; gap:8px; }
.between { display:flex; align-items:center; justify-content:space-between; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:0.5px solid var(--bm); border-radius:var(--rmd); background:var(--bg0); cursor:pointer; font-size:13px; font-family:var(--fn); color:var(--tx0); white-space:nowrap; line-height:1; transition:background .12s, color 0.2s; }
.btn:hover { background:var(--bg1); }
.btn:disabled { opacity:.4; cursor:default; }
.btn-p { background:var(--tx0); color:var(--bg0); border-color:var(--tx0); }
.btn-p:hover { opacity:.82; background:var(--tx0); }
.btn-d { color:var(--txd); border-color:rgba(163,45,45,.22); }
.btn-d:hover { background:var(--bgd); }
.btn-g { border-color:transparent; }
.btn-g:hover { background:var(--bg1); border-color:var(--bl); }
.btn-sm { padding:4px 10px; font-size:12px; }
.bdg { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; transition:background 0.2s, color 0.2s; }
.bg { background:var(--bgs); color:var(--txs); }
.ba { background:var(--bgw); color:var(--txw); }
.br { background:var(--bgd); color:var(--txd); }
.bb { background:var(--bg2); color:var(--tx1); }
.bi { background:var(--bgi); color:var(--txi); }
.bt { background:var(--tx0); color:var(--bg0); }
.stat { background:var(--bg1); border-radius:var(--rmd); padding:.75rem 1rem; transition:background 0.2s; }
.stat-v { font-size:22px; font-weight:600; line-height:1; }
.stat-l { font-size:12px; color:var(--tx1); margin-top:4px; }
.empty { text-align:center; padding:3rem 1rem; color:var(--tx2); }
.empty i { font-size:36px; display:block; margin-bottom:.5rem; }
.pbar { height:5px; border-radius:3px; background:var(--bl); overflow:hidden; margin-top:3px; }
.pfill { height:100%; border-radius:3px; transition:width 0.3s; }
.loading { text-align:center; padding:2rem; color:var(--tx2); }
.errbanner { background:var(--bgd); color:var(--txd); border:0.5px solid rgba(163,45,45,.2); padding:10px 14px; border-radius:var(--rmd); font-size:13px; margin-bottom:1rem; display:flex; align-items:center; justify-content:space-between; }
.sg-wrap { max-height:65vh; overflow:auto; position:relative; border-radius:var(--rmd); box-shadow:0 0 0 0.5px var(--bl); background:var(--bg0); }
table.sg { border-collapse:separate; border-spacing:0; font-size:12px; width:100%; min-width:500px; }
table.sg th { background:var(--bg1); padding:6px 8px; border-bottom:0.5px solid var(--bl); border-right:0.5px solid var(--bl); font-weight:600; text-align:center; white-space:nowrap; font-size:11px; color:var(--tx1); transition:background 0.2s, color 0.2s; cursor:pointer; user-select:none; }
table.sg th:hover { background:var(--bg2); color:var(--tx0); }
table.sg thead th { position:sticky; top:0; z-index:10; border-top:none; outline:0.5px solid var(--bl); outline-offset:-0.5px; }
table.sg tr:nth-child(2) td { position:sticky; top:42px; z-index:9; background:var(--bg1); border-bottom:0.5px solid var(--bl); outline:0.5px solid var(--bl); outline-offset:-0.5px; }
table.sg td { border-bottom:0.5px solid var(--bl); border-right:0.5px solid var(--bl); padding:2px 4px; transition:background 0.2s; position:relative; }
table.sg th:last-child, table.sg td:last-child { border-right:none; }
table.sg td input { border:none; background:transparent; text-align:center; font-size:12px; padding:4px; width:100%; color:var(--tx0); font-family:var(--fn); transition:background 0.2s, color 0.2s; }
table.sg td input:focus { background:var(--bgi); outline:none; border-radius:2px; }
table.sg td.nc { text-align:left; min-width:130px; }
table.sg td.nc input { text-align:left; }
table.sg td.tot { background:var(--bg1); text-align:center; font-weight:600; padding:4px 8px; }
table.st { width:100%; border-collapse:collapse; font-size:13px; }
table.st th { background:var(--bg1); padding:8px 12px; border:0.5px solid var(--bl); font-weight:600; text-align:left; font-size:12px; transition:background 0.2s; }
table.st td { padding:7px 12px; border:0.5px solid var(--bl); transition:background 0.2s; }
table.st tr:nth-child(even) td { background:var(--bg1); }
.fqrow { display:grid; grid-template-columns:40px 1fr 70px 64px 80px 100px; gap:8px; align-items:center; padding:6px 8px; border-radius:var(--rmd); }
.fqrow:nth-child(even) { background:var(--bg1); }
.pqblock { border:0.5px solid var(--bl); border-radius:var(--rlg); padding:.875rem; margin-bottom:.625rem; transition:background 0.2s; }
.pqitem { display:grid; grid-template-columns:84px 1fr 56px 100px; gap:10px; align-items:start; padding:8px 0; border-top:0.5px solid var(--bl); }
.pqlabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tx2); padding-top:2px; }
.tf { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:1rem; }
.tp { padding:4px 12px; border:0.5px solid var(--bm); border-radius:20px; cursor:pointer; font-size:12px; background:var(--bg0); color:var(--tx1); font-family:var(--fn); transition:background 0.2s, color 0.2s; }
.tp.on { background:var(--tx0); color:var(--bg0); border-color:var(--tx0); }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:100; padding:1rem; }
.modal { background:var(--bg0); border-radius:var(--rlg); padding:1.5rem; max-width:540px; width:100%; border:0.5px solid var(--bm); max-height:90vh; overflow-y:auto; transition:background 0.2s; }
.modal-title { font-size:15px; font-weight:600; margin-bottom:1rem; display:flex; align-items:center; gap:6px; }
.setup-wrap { display:flex; align-items:center; justify-content:center; height:100vh; background:var(--bg2); transition:background 0.2s; }
.setup-card { background:var(--bg0); border:0.5px solid var(--bm); border-radius:var(--rlg); padding:2rem; max-width:500px; width:100%; margin:1rem; transition:background 0.2s; }
.setup-step { display:flex; gap:12px; align-items:flex-start; margin-bottom:.875rem; padding:10px 12px; background:var(--bg1); border-radius:var(--rmd); font-size:13px; line-height:1.5; transition:background 0.2s; }
.stepnum { background:var(--tx0); color:var(--bg0); border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; margin-top:1px; }
.chart-container { position:relative; height:300px; width:100%; margin-bottom:1rem; }
.status-indicator { font-size:11px; color:var(--tx2); transition:color 0.2s; }
.status-indicator.saving { color:var(--txw); font-weight:500; }
.status-indicator.saved { color:var(--txs); font-weight:500; }
.score-flash-error { animation:flashRed 0.4s ease; }
@keyframes flashRed { 0%,100%{background:transparent;} 50%{background:rgba(226,75,74,0.25);} }
.input-saved-flash { animation:flashBorderGreen 0.6s ease; }
@keyframes flashBorderGreen { 0%,100%{border-color:var(--bm);} 50%{border-color:var(--txs); box-shadow:0 0 4px rgba(59,109,17,0.4);} }
.ac-wrap { position:relative; }
.ac-results { position:absolute; top:100%; left:0; right:0; background:var(--bg0); border:0.5px solid var(--bm); border-radius:var(--rmd); z-index:99; max-height:150px; overflow-y:auto; box-shadow:0 4px 12px var(--bl); }
.ac-item { padding:6px 10px; cursor:pointer; font-size:13px; }
.ac-item:hover { background:var(--bg1); }
.hamburger { display:none; background:none; border:none; font-size:20px; color:var(--tx0); cursor:pointer; }
.sidebar-close { display:none; background:none; border:none; font-size:18px; color:var(--tx2); cursor:pointer; }
@media (max-width: 768px) {
  .hamburger { display:block; }
  .sidebar { position:absolute; left:0; top:0; bottom:0; transform:translateX(-100%); box-shadow:4px 0 12px var(--bl); }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-close { display:block; }
  .g2, .g3 { grid-template-columns:1fr; gap:12px; }
  .fqrow { grid-template-columns:40px 1fr; gap:4px; }
  .fqrow > div:nth-child(n+3) { grid-column:span 2; }
}
.print-only { display: none; }
@media print {
  .sidebar, .topbar, .tabs, .no-print, .hamburger, .sidebar-close { display:none!important; }
  .layout { display:block; height:auto!important; overflow:visible!important; }
  .main { display:block; height:auto!important; overflow:visible!important; flex:none; }
  .content { height:auto!important; overflow:visible!important; padding:0; }
  .card { border:0.5px solid #ccc; margin-bottom:.5rem; box-shadow:none!important; }
  .pqblock { page-break-inside:avoid; border:0.5px solid #ccc; }
  .student-page { page-break-before:always; page-break-inside:auto; }
  .student-page:first-child { page-break-before:auto; }
  body { font-size:11px; background:white; color:black; }
  .print-only { display:block!important; }
  #class-sheet-print-root { display:block!important; }
}