:root{--p:#6750a4;--on-p:#fff;--pc:#eaddff;--on-pc:#21005d;--sc:#e8def8;--bg:#fef7ff;--sf:#f7f2fa;--sf2:#ece6f0;--tx:#1d1b20;--tx2:#49454f;--ol:#cac4d0;--r:28px}
:root[data-t=dark]{--p:#d0bcff;--on-p:#381e72;--pc:#4f378b;--on-pc:#eaddff;--sc:#4a4458;--bg:#141218;--sf:#1d1b20;--sf2:#2b2930;--tx:#e6e0e9;--tx2:#cac4d0;--ol:#49454f}
*{box-sizing:border-box;margin:0}
body{font:16px/1.5 Roboto,system-ui,"Segoe UI",sans-serif;background:var(--bg);color:var(--tx);transition:background .3s}
.shell{display:flex;min-height:100vh}
.rail{width:88px;padding:20px 8px;display:flex;flex-direction:column;gap:12px;align-items:center;position:sticky;top:0;height:100vh;background:var(--bg)}
.rail button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--tx2);width:72px}
.rail button i{font-style:normal;font-size:20px;width:56px;height:32px;border-radius:16px;display:grid;place-items:center;transition:.2s}
.rail button:hover i{background:var(--sf2)}
.rail button.on{color:var(--tx);font-weight:600}.rail button.on i{background:var(--pc);color:var(--on-pc)}
main{flex:1;max-width:860px;padding:0 24px 40px;margin:0 auto;width:100%}
.top{display:flex;align-items:center;justify-content:space-between;padding:24px 0 16px}
h1{font-size:32px;font-weight:500}
.actions{display:flex;gap:8px}
.ib{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sf2);font-size:18px;position:relative;overflow:hidden}
.ib:hover{background:var(--sc)}
.ib.color input{position:absolute;inset:-8px;width:60px;height:60px;opacity:0;cursor:pointer}
.ib.color::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--p)}
.view{display:flex;flex-direction:column;gap:12px;animation:in .25s}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.card{background:var(--sf);border-radius:var(--r);padding:20px 24px}
.card h3{font-size:20px;font-weight:500;margin-bottom:4px}
.card small,.muted{color:var(--tx2)}
.card p{margin-top:8px;white-space:pre-wrap}
.empty{text-align:center;padding:48px 16px;color:var(--tx2);background:var(--sf);border-radius:var(--r)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{all:unset;cursor:pointer;padding:10px 20px;border-radius:20px;background:var(--sc);color:var(--tx);font-weight:500;font-size:14px}
.btn:hover{filter:brightness(.95)}.btn.f{background:var(--p);color:var(--on-p)}
.chips{display:flex;gap:8px;overflow:auto;padding:2px 0 8px}
.chip{all:unset;cursor:pointer;padding:6px 16px;border-radius:8px;border:1px solid var(--ol);font-size:14px;white-space:nowrap}
.chip.on{background:var(--sc);border-color:transparent;font-weight:600}
.lesson{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:14px 20px;background:var(--sf);border-radius:20px}
.lesson b{color:var(--p)}.lesson .room{background:var(--pc);color:var(--on-pc);border-radius:12px;padding:2px 12px;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.stu{background:var(--sf);border-radius:20px;padding:12px 16px;display:flex;align-items:center;gap:12px}
.av{width:40px;height:40px;border-radius:50%;background:var(--pc);color:var(--on-pc);display:grid;place-items:center;font-weight:600;flex:none}
.seats{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.seatrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.desk{background:var(--pc);color:var(--on-pc);border-radius:16px;padding:10px 16px;min-width:120px;text-align:center;font-size:14px}
.board{background:var(--p);color:var(--on-p);text-align:center;border-radius:12px;padding:6px;font-size:13px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal span{padding:8px 0;border-radius:50%;font-size:14px}.cal .h{color:var(--tx2);font-size:12px}
.cal .ev{background:var(--pc);color:var(--on-pc);font-weight:600}.cal .td{outline:2px solid var(--p)}
footer{margin-top:32px;text-align:center;font-size:12px;color:var(--tx2)}
@media(max-width:700px){
 .shell{flex-direction:column-reverse}
 .rail{position:fixed;bottom:0;left:0;right:0;top:auto;width:100%;height:auto;flex-direction:row;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom));background:var(--sf2);z-index:5;gap:0}
 .rail button{width:auto;flex:1;font-size:11px}
 main{padding:0 16px 110px}h1{font-size:26px}
}
@media print{.rail,.actions,footer,.chips,.btn{display:none}body{background:#fff;color:#000}.card,.lesson{break-inside:avoid;border:1px solid #ccc}}