:root{--blue: #2C2C60;--blue-75: #616188;--blue-50: #9696B0;--blue-25: #CACAD7;--cyan: #06BDE8;--cyan-75: #44CEEE;--cyan-50: #82DEF4;--cyan-25: #C1EEF9;--green: #21DDB8;--green-75: #58E6CA;--green-50: #90EEDC;--green-25: #C8F6ED;--red: #B31F49;--red-75: #C65776;--red-50: #D98FA4;--red-25: #ECC7D2;--orange: #F4A52B;--orange-75: #F7BC60;--orange-50: #FAD295;--orange-25: #FCE8CA;--cyan-10: #E6F8FD;--paper: #FFFFFF;--ground: #F2F2F5;--rule: var(--blue-25);--ink: var(--blue);--ink-soft: var(--blue-75);--font-display: "Rebrand Display", "Rebrand", "Nunito", system-ui, sans-serif;--font-text: "Rebrand Text", "Rebrand", "Nunito", system-ui, sans-serif;--h2: 42px;--h3: 32px;--h4: 26px;--h5: 22px;--h6: 18px;--body: 15px;--copy: 16px;--small: 12px;--radius-lg: 20px;--radius-md: 14px;--radius-sm: 10px}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:var(--font-display);background:var(--blue);color:var(--ink);overflow:hidden}#app{height:100%}.shell{display:flex;flex-direction:column;height:100vh;width:100vw;height:100dvh;background:var(--blue)}@media(min-width:1200px){html,body{-webkit-user-select:none;user-select:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.uitlog-balk{position:fixed;top:0;left:0;right:0;z-index:10;height:5px;pointer-events:none;background:var(--cyan);transform-origin:right center;animation:uitlog-balk var(--uitlog-duur) linear forwards}@keyframes uitlog-balk{0%{transform:scaleX(1);background:var(--cyan)}79%{background:var(--cyan)}80%{background:var(--orange)}to{transform:scaleX(0);background:var(--orange)}}@media(prefers-reduced-motion:reduce){.uitlog-balk{animation:uitlog-balk var(--uitlog-duur) linear forwards!important}}.logo{color:var(--paper);display:block}header{flex:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:16px 30px;background:var(--blue)}.brand{display:flex;align-items:center;gap:16px}.brand .logo{width:118px;height:auto;flex-shrink:0}.brand-text .school{font-size:var(--h5);font-weight:800;color:var(--paper);line-height:1.1}.brand-text .tag{font-size:var(--small);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-top:3px}.student-pill{justify-self:center;display:flex;align-items:baseline;gap:14px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;text-align:left}.student-pill .name{font-size:var(--h4);font-weight:800;color:var(--paper);line-height:1.1}.student-pill .klas{font-size:var(--body);font-weight:700;color:var(--cyan);border:2px solid var(--cyan);border-radius:999px;padding:2px 14px;white-space:nowrap}.clock-block{text-align:right;cursor:pointer}.clock-block .time{font-size:var(--h2);font-weight:800;color:var(--paper);line-height:1;letter-spacing:-.015em;font-variant-numeric:tabular-nums}.clock-block .date{font-size:var(--small);font-weight:400;color:var(--blue-25);margin-top:4px}.clock-block .date.stale{color:var(--orange);font-weight:700}.panel{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--ground);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;position:relative}.refresh-bar-track{height:3px;background:var(--rule);flex:none}.refresh-bar-fill{height:100%;background:var(--cyan);width:0%;transition:width 1s linear}.refresh-bar-fill.stale{background:var(--orange)}.toolbar{flex:none;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 26px 10px}.day-tabs{display:flex;gap:8px}.day-tab{min-height:44px;padding:5px 18px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:transparent;border:2px solid var(--rule);border-radius:999px;font-family:inherit;color:var(--ink-soft);cursor:pointer;text-align:left}.day-tab .label{font-size:var(--body);font-weight:700}.day-tab .datum{font-size:var(--small);font-weight:400}.day-tab.actief{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}.day-tab.actief .label{font-weight:800}.legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-left:auto}.legend-item{display:flex;align-items:center;gap:7px;font-size:var(--small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.legend-dot{width:24px;height:13px;border-radius:4px;flex-shrink:0;border:2px solid transparent}main{flex:1;min-height:0;display:grid;grid-template-columns:64px 1fr;padding:0 26px 14px}.tijdlijn{position:relative;display:flex;justify-content:center}.tijdlijn .track{position:absolute;top:6px;bottom:6px;width:4px;background:var(--rule);border-radius:999px;overflow:hidden}.tijdlijn .fill{width:100%;background:var(--green);border-radius:999px}.lesson-list{display:flex;flex-direction:column;gap:0;min-height:0;overflow-y:auto;padding:14px;margin:-14px}.day-banner{flex:none;display:flex;align-items:center;gap:14px;background:var(--orange);border-radius:var(--radius-sm);padding:12px 18px}.day-banner .icon{color:var(--ink);display:flex;flex-shrink:0}.day-banner .titel{font-size:var(--h6);font-weight:800;color:var(--ink)}.day-banner .toelichting{font-family:var(--font-text);font-size:var(--small);font-weight:400;color:var(--ink);margin-top:3px}.empty-state,.error-state{text-align:center;padding:60px 20px;font-family:var(--font-text);font-size:var(--copy);line-height:1.5;color:var(--ink-soft)}.error-state{color:var(--red);font-weight:700}.now-line{flex:none;display:flex;align-items:center;gap:10px;margin:2px 0}.now-line .pill{background:var(--green);color:var(--ink);font-size:var(--small);font-weight:800;padding:3px 12px;border-radius:999px;display:flex;align-items:center;gap:6px}.now-line .dot{width:6px;height:6px;border-radius:50%;background:var(--ink);animation:blink 1.4s infinite}.now-line .line{flex:1;height:2px;background:var(--green)}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}.break-row{flex:none;min-height:26px;display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:var(--small);font-weight:700;letter-spacing:.06em;text-transform:uppercase}.break-row .icon{display:flex;flex-shrink:0}.break-row .label{white-space:nowrap}.break-row .line{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--blue-25) 0 6px,transparent 6px 12px)}.lesson-card{flex:1 1 0;min-height:62px;max-height:112px;display:grid;grid-template-columns:64px 92px 1fr 168px;align-items:center;background:var(--paper);position:relative;overflow:hidden}.lesson-card.zebra{background:var(--cyan-10)}.lesson-card .uur-col{display:flex;justify-content:center}.lesson-card .uur-bol{min-width:36px;height:36px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:var(--paper);font-size:var(--h6);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.lesson-card .uur-bol.blok{font-size:var(--body)}.lesson-card.status-cancelled .uur-bol{background:var(--blue-50)}.lesson-card .time-col{display:flex;flex-direction:column}.lesson-card .time-col .tijd{font-size:var(--h5);font-weight:800;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}.lesson-card .time-col .tot{font-size:var(--small);font-weight:400;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:2px}.lesson-card .subject-block{min-width:0;padding:0 16px}.lesson-card .subject{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.lesson-card .vak{font-size:var(--h4);font-weight:800;color:var(--ink);line-height:1.1}.lesson-card .meta{font-family:var(--font-text);font-size:var(--copy);font-weight:400;color:var(--ink-soft);margin-top:2px}.lesson-card .badge{font-family:var(--font-display);font-weight:800;font-size:var(--small);letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:2px 8px;white-space:nowrap}.lesson-card .old-val{text-decoration:line-through;color:var(--ink-soft)}.lesson-card .room-col{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px;line-height:1.05;text-align:center}.lesson-card .room-col .room{font-size:var(--h3);font-weight:800;color:var(--ink)}.lesson-card .room-col.lang .room{font-size:var(--h5)}.lesson-card .room-col .old-val{font-size:var(--body);font-weight:700}.legend-dot.status-normal{background:var(--paper);border-color:var(--rule)}.badge.status-changed,.legend-dot.status-changed{background:var(--orange);border-color:var(--orange);color:var(--ink)}.badge.status-new,.legend-dot.status-new{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}.badge.status-exam,.legend-dot.status-exam{background:var(--blue);border-color:var(--blue);color:var(--paper)}.badge.status-cancelled,.legend-dot.status-cancelled{background:var(--red);border-color:var(--red);color:var(--paper)}.lesson-card.status-cancelled .tijd,.lesson-card.status-cancelled .vak{color:var(--ink-soft)}.lesson-card.status-cancelled .vak{text-decoration:line-through;text-decoration-thickness:3px}.lesson-card.status-cancelled .room-col .room{color:var(--ink-soft);text-decoration:line-through;font-size:var(--h5)}.lesson-card.nu{flex:1.25 1 0;max-height:140px;border-radius:var(--radius-sm);box-shadow:0 0 0 3px var(--paper),0 0 0 8px var(--green),0 0 18px 8px #21ddb873;animation:nugloed 2.4s ease-in-out infinite;margin:8px 0;padding-bottom:5px}@keyframes nugloed{0%,to{box-shadow:0 0 0 3px var(--paper),0 0 0 8px var(--green),0 0 18px 8px #21ddb873}50%{box-shadow:0 0 0 3px var(--paper),0 0 0 8px var(--green),0 0 6px 2px #21ddb833}}.lesson-card .nu-badge{font-size:var(--small);font-weight:800;letter-spacing:.08em;color:var(--green);background:var(--blue);border-radius:5px;padding:3px 9px;white-space:nowrap}.lesson-card .les-voortgang{position:absolute;left:0;bottom:0;height:5px;background:var(--green)}.login-overlay{position:fixed;inset:0;background:var(--blue);display:flex;align-items:center;justify-content:center;z-index:50}.login-box{background:var(--paper);border-radius:var(--radius-lg);padding:40px 48px;width:min(380px,calc(100vw - 32px));text-align:center;border-top:5px solid var(--cyan)}.login-box .logo-lockup{width:min(228px,100%);height:auto;margin:0 auto 22px;display:block}.login-box h1{font-size:var(--h5);font-weight:800;margin:0 0 4px;color:var(--blue)}.login-box p{font-family:var(--font-text);font-size:var(--copy);line-height:1.5;color:var(--ink-soft);margin:0 0 22px;font-weight:400}.login-box input{width:100%;padding:12px 16px;font-size:var(--h4);font-weight:800;text-align:center;border:2px solid var(--rule);border-radius:var(--radius-sm);font-family:inherit;color:var(--blue);margin-bottom:14px}.login-box input::placeholder{color:var(--blue-50);font-weight:400;font-size:var(--copy)}.login-box input:focus{outline:none;border-color:var(--cyan)}.login-box button{width:100%;padding:13px;font-size:var(--body);font-weight:800;color:var(--blue);background:var(--cyan);border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit}.login-box button:hover,.login-box button:active{background:var(--blue);color:var(--paper)}.login-box button[disabled]{opacity:.6;cursor:default}.login-box button[disabled]:hover{background:var(--cyan);color:var(--blue)}.login-error{margin-top:14px;font-family:var(--font-text);font-size:var(--body);font-weight:700;color:var(--red);min-height:20px}.login-hint{margin-top:10px;font-size:var(--small);color:var(--ink-soft);font-weight:400}.demo-panel{position:absolute;top:12px;right:12px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-md);padding:16px 18px;width:min(220px,calc(100vw - 32px));box-shadow:0 4px 16px #2c2c602e;z-index:60}.demo-panel h3{font-size:var(--small);font-weight:800;margin:0 0 10px;color:var(--blue)}.demo-panel input[type=range]{width:100%;accent-color:var(--cyan)}.demo-panel .val{font-size:13px;font-weight:700;text-align:center;margin:4px 0 10px;color:var(--ink)}.demo-panel button{width:100%;padding:8px;font-size:var(--small);font-weight:700;border-radius:var(--radius-sm);border:1px solid var(--rule);background:var(--ground);color:var(--ink);cursor:pointer;font-family:inherit;margin-bottom:6px}@media(max-width:1100px){header{padding:12px 20px;gap:12px}.brand .logo{width:92px}.clock-block .time{font-size:var(--h3)}.student-pill .name{font-size:var(--h5)}main{grid-template-columns:44px 1fr;padding:0 16px 12px}.toolbar{padding:10px 16px 8px}.lesson-card{grid-template-columns:52px 80px 1fr 116px}.lesson-card .uur-bol{min-width:30px;height:30px;font-size:var(--body)}.lesson-card .vak{font-size:var(--h6)}.lesson-card .room-col .room{font-size:var(--h4)}.lesson-card .room-col.lang .room{font-size:var(--h6)}.lesson-card .meta{font-size:var(--body)}}@media(max-width:640px){header{grid-template-columns:auto 1fr;gap:6px 12px;padding:10px 14px}.brand-text{display:none}.brand{grid-row:1;grid-column:1}.brand .logo{width:76px}.clock-block{grid-row:1;grid-column:2}.student-pill{grid-row:2;grid-column:1 / -1;justify-self:start;gap:10px}.student-pill .name{font-size:var(--h6)}.student-pill .klas{font-size:var(--small);padding:1px 10px}.clock-block .time{font-size:var(--h4)}.toolbar{padding:10px 14px 6px;gap:10px}.legend{margin-left:0;gap:10px}.day-tab{padding:5px 14px}main{grid-template-columns:1fr;padding:0 14px 14px}.tijdlijn{display:none}.lesson-card{flex:none;min-height:0;grid-template-columns:48px 70px 1fr;align-items:stretch;padding:10px 0}.lesson-card.nu{flex:none}.lesson-card .uur-col{align-items:center}.lesson-card .uur-bol{min-width:28px;height:28px;font-size:var(--small);padding:0 6px}.lesson-card .time-col{justify-content:center}.lesson-card .time-col .tijd{font-size:var(--h6)}.lesson-card .time-col .tot{white-space:nowrap}.lesson-card .subject-block{padding:0 14px 0 6px}.lesson-card .vak{font-size:var(--h6)}.lesson-card .meta{font-size:var(--small)}.lesson-card .room-col{grid-column:3;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;padding:4px 14px 0 6px}.lesson-card .room-col .room,.lesson-card .room-col.lang .room{font-size:var(--body)}.lesson-card .room-col .old-val{font-size:var(--small)}.lesson-card.status-cancelled .room-col .room{font-size:var(--body)}.login-box{padding:32px 24px}}