:root { --ink:#203245;--muted:#617185;--line:#dbe4eb;--accent:#285a90;--blue:#eaf3fc;--green:#147553;--mint:#e9f7ef;--pale:#f3f6fa;--white:#fff;--shadow:0 12px 38px rgba(22,40,57,.065); }
*{box-sizing:border-box}html{background:#edf1f5}body{margin:0;color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px}
button,input,select{font:inherit}button{cursor:pointer}a{color:var(--accent)}a:hover{text-decoration:underline}
.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:28px;padding:18px max(22px,calc((100% - 1120px)/2));background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:13px;color:#1f3042;letter-spacing:.05em;text-decoration:none;font-weight:800;white-space:nowrap}.brand strong{color:var(--accent)}.brand-logo{background:#1c3652;color:white;border-radius:12px;padding:8px 12px;font-size:23px}.topbar nav{display:flex;gap:20px;margin-left:auto}.topbar nav a{color:#596b7e;font-size:13px;font-weight:700;text-decoration:none}.topbar nav a.current{color:var(--accent)}.header-chip{font-size:11px;white-space:nowrap;border:1px solid #cce4dc;color:var(--green);padding:7px 11px;border-radius:999px;background:#eff9f4;font-weight:800}
main{width:min(1120px,calc(100% - 40px));margin:42px auto 68px;flex:1}.eyebrow{color:var(--accent);font-weight:800;letter-spacing:.09em;font-size:11px;text-transform:uppercase}h1{font-size:clamp(30px,4vw,44px);line-height:1.1;letter-spacing:-.04em;margin:12px 0}h2{font-size:23px;letter-spacing:-.025em;margin:0 0 13px}h3{font-size:16px;margin:0 0 7px}p{color:var(--muted);line-height:1.6}p.lead{font-size:16px;max-width:670px;margin:0 0 28px}.subtle{font-size:13px;color:var(--muted)}.tiny{font-size:11px;color:var(--muted)}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px}.panel-tight{padding:20px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.section{margin-top:30px}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:25px;align-items:stretch}.hero-side{background:#1d364e;color:#fff;position:relative;overflow:hidden;padding:30px}.hero-side p,.hero-side .subtle{color:#d8e4ed}.hero-side:after{content:'✦';position:absolute;right:-26px;bottom:-110px;font-size:230px;opacity:.07}.step{display:flex;align-items:center;gap:13px;margin:22px 0}.step-num{display:grid;place-items:center;color:#fff;border:1px solid #7692aa;background:#38536d;width:33px;height:33px;min-width:33px;border-radius:50%;font-weight:700}.step span{font-size:13px;color:#ecf4f9}
.station{position:relative;display:flex;align-items:center;gap:17px;padding:18px;border:1px solid var(--line);border-radius:15px;text-decoration:none;color:inherit;background:white;transition:transform .1s,box-shadow .1s}.station:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}.station-icon{display:grid;place-items:center;width:50px;height:50px;min-width:50px;border-radius:13px;background:var(--blue);color:var(--accent);font-size:20px;font-weight:800}.station .arrow{margin-left:auto;font-size:24px;color:#69859a}.station p{font-size:12px;margin:2px 0}.station.visited .station-icon{background:var(--mint);color:var(--green)}.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;border-radius:99px;padding:6px 10px;background:var(--blue);color:var(--accent)}.pill.ok{background:var(--mint);color:var(--green)}.pill.gray{background:#f2f5f7;color:#697b8c}
input,select{width:100%;border:1px solid #cbd7e0;border-radius:10px;padding:12px 13px;outline:0;background:#fff;color:var(--ink)}input:focus,select:focus{border-color:#4e86bc;box-shadow:0 0 0 3px #e8f2fc}label{display:block;font-size:12px;font-weight:800;margin-bottom:8px}.field{margin-bottom:17px}.buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-align:center;appearance:none;border:1px solid transparent;background:var(--accent);color:#fff;border-radius:10px;padding:12px 19px;font-size:13px;font-weight:800;text-decoration:none;min-height:44px}.btn:hover{text-decoration:none;filter:brightness(.96)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.secondary{background:#f2f6fa;color:#294764;border-color:#d7e2eb}.btn.ghost{background:transparent;color:var(--accent);border-color:#b5cade}.btn.full{width:100%}.btn.big{padding:16px;font-size:15px}.tabs{display:flex;gap:5px;background:#eef3f8;border-radius:11px;padding:5px;margin-bottom:23px}.tabs button{border:0;border-radius:8px;padding:11px 12px;background:transparent;color:#677a8e;font-weight:800;flex:1}.tabs button.active{background:#fff;color:#294e75;box-shadow:0 2px 9px #b1c4d84f}.info-box{background:#eef6ff;border:1px solid #cfe0f7;border-radius:12px;padding:15px;font-size:13px;color:#35516b}.info-box.ok{background:var(--mint);border-color:#c9e9d7;color:#116644}.info-box.warn{background:#fff6e7;border-color:#f2dfb7;color:#815c14}.info-box strong{display:block;margin-bottom:4px}.info-box code{white-space:normal;overflow-wrap:anywhere}.big-number{font-size:36px;letter-spacing:-.06em;font-weight:800;color:#1b344a}.stat p{margin:4px 0 0;font-size:12px}.progress{height:8px;border-radius:50px;overflow:hidden;background:#e4ebf1;margin:17px 0}.progress div{height:100%;background:#2e896b;transition:width .2s}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-transform:uppercase;letter-spacing:.04em;font-size:10px;color:#7c8997;text-align:left;border-bottom:1px solid var(--line);padding:12px 10px}td{border-bottom:1px solid #edf1f5;padding:12px 10px;vertical-align:middle}tr:last-child td{border:0}.split-head{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}.back{display:inline-flex;gap:7px;align-items:center;font-size:13px;font-weight:800;margin-bottom:24px;text-decoration:none}.station-focus{text-align:center;max-width:560px;margin:auto}.station-emblem{width:76px;height:76px;border-radius:23px;background:#e4f1ff;display:grid;place-items:center;font-size:35px;color:var(--accent);margin:10px auto 20px}.station-focus h1{font-size:35px}.station-focus .panel{text-align:left}.station-confirm{text-align:center;padding:24px 0 10px}.success-icon{font-size:43px;color:var(--green);background:var(--mint);border-radius:50%;width:78px;height:78px;display:grid;place-items:center;margin:0 auto 13px}.login-box{max-width:510px;margin:0 auto}.mini-card{background:#f6f9fc;border:1px solid #e0e8ef;border-radius:13px;padding:16px}.student-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #e8eef3;padding:13px 0}.student-row:last-child{border:0}.smallbox{font-size:12px;white-space:nowrap}.loading{padding:80px;text-align:center;color:var(--muted)}.empty{padding:20px 0;color:#78889a;font-size:13px}.staff-stations{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.staff-station{border:1px solid var(--line);padding:15px;border-radius:13px;background:#f9fbfd}.staff-station .big-number{font-size:28px}#toast{position:fixed;bottom:23px;left:50%;transform:translateX(-50%);padding:11px 19px;border-radius:12px;background:#172f46;color:#fff;box-shadow:0 15px 40px #172f4644;z-index:99;opacity:0;pointer-events:none;transition:opacity .12s;text-align:center;max-width:92vw;font-size:13px}#toast.visible{opacity:1}#toast.error{background:#a72d33}footer{border-top:1px solid var(--line);background:#fff;display:flex;justify-content:space-between;gap:16px;padding:17px max(22px,calc((100% - 1120px)/2));font-size:11px;color:#81909f}
@media(max-width:750px){.topbar{gap:10px;padding:14px 18px;flex-wrap:wrap}.topbar nav{order:3;width:100%;justify-content:space-around;border-top:1px solid #e7eff4;padding-top:14px}.header-chip{margin-left:auto}.hero,.grid,.grid-3{grid-template-columns:1fr}main{width:min(100% - 26px,600px);margin:28px auto 60px}.panel{padding:19px}.staff-stations{grid-template-columns:repeat(2,minmax(0,1fr))}footer{flex-direction:column;gap:3px;padding:19px}}
 .presence-code { font: 700 2.2rem ui-monospace, monospace; letter-spacing: .18em; padding: 20px 8px; color: #176c55; overflow-wrap: anywhere; }
 input[type="checkbox"] { width: auto; min-height: auto; margin-right: .5rem; }