: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;--red-12: #F6E3E8;--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}}.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:3px;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:6px;min-height:0;overflow-y:auto}.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:104px 1fr 168px;align-items:center;border:2px solid transparent;border-radius:var(--radius-sm);position:relative;overflow:hidden}.lesson-card .time-col{padding-left:16px;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}.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}.lesson-card.status-normal,.legend-dot.status-normal{background:var(--paper);border-color:var(--rule)}.lesson-card.status-changed,.legend-dot.status-changed{background:var(--orange);border-color:var(--orange)}.lesson-card.status-changed .meta,.lesson-card.status-changed .time-col .tot{color:var(--ink)}.lesson-card.status-changed .old-val{color:var(--ink);opacity:.7}.lesson-card.status-new,.legend-dot.status-new{background:var(--cyan);border-color:var(--cyan)}.lesson-card.status-new .meta,.lesson-card.status-new .time-col .tot{color:var(--ink)}.lesson-card.status-new .old-val{color:var(--ink);opacity:.7}.lesson-card.status-exam,.legend-dot.status-exam{background:var(--blue);border-color:var(--blue)}.lesson-card.status-exam .tijd,.lesson-card.status-exam .vak,.lesson-card.status-exam .room{color:var(--paper)}.lesson-card.status-exam .meta,.lesson-card.status-exam .time-col .tot{color:var(--blue-25)}.lesson-card.status-exam .old-val{color:var(--blue-50)}.lesson-card.status-cancelled,.legend-dot.status-cancelled{background:repeating-linear-gradient(135deg,var(--red-12) 0 8px,var(--paper) 8px 16px);border:2px dashed var(--red)}.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 .meta{color:var(--red);font-weight:700}.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;box-shadow:0 0 0 4px var(--green);margin:4px 0;padding-bottom:5px}.lesson-card .nu-badge{font-size:var(--small);font-weight:800;letter-spacing:.08em;color:var(--ink);background:var(--green);border-radius:5px;padding:3px 9px;white-space:nowrap;animation:nupulse 2.4s ease-in-out infinite}@keyframes nupulse{0%,to{opacity:1}50%{opacity:.55}}.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:88px 1fr 116px}.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:92px 1fr;align-items:stretch;padding:10px 0}.lesson-card.nu{flex:none}.lesson-card .time-col{padding-left:12px;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:2;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}}