.demo-page{--demo-bg:#f4f7fb;--demo-surface:#fff;--demo-surface2:#eaf0f7;--demo-navy:#07182a;--demo-blue:#0e67f7;--demo-accent:#66a2ff;--demo-coral:#f06f62;--demo-text:#14263d;--demo-muted:#52647b;--demo-border:#d8e1ec;background:var(--demo-bg);color:var(--demo-text);min-height:100vh}.demo-topbar{background:var(--demo-navy);color:#fff;justify-content:space-between;align-items:center;padding:18px 36px;display:flex}.demo-brand{align-items:center;gap:18px;display:flex}.demo-brand img{object-fit:contain;width:184px;height:38px}.demo-brand span{color:#9cafc5;letter-spacing:1.6px;font-size:10px;font-weight:800}.demo-exit{color:#dce8f6;font-size:13px;font-weight:700;text-decoration:none}.demo-exit:hover{color:#fff}.demo-layout{min-height:calc(100vh - 76px);display:flex}.demo-sidebar{border-right:1px solid var(--demo-border);background:#fff;flex-direction:column;width:244px;padding:30px 22px 24px;display:flex}.demo-school-mark{align-items:center;gap:11px;margin-bottom:40px;display:flex}.demo-school-mark>span{color:var(--demo-blue);background:#e8f0ff;border-radius:13px;justify-content:center;align-items:center;width:42px;height:42px;font-size:14px;font-weight:900;display:flex}.demo-school-mark strong{font-size:15px;display:block}.demo-school-mark small{color:var(--demo-muted);margin-top:3px;font-size:11px;display:block}.demo-eyebrow{color:var(--demo-blue);letter-spacing:1.3px;font-size:10px;font-weight:900}.demo-role-list{gap:7px;margin-top:12px;display:grid}.demo-role-list button{color:var(--demo-muted);text-align:left;background:0 0;border:0;border-radius:10px;padding:12px 13px;font-size:13px;font-weight:700}.demo-role-list button:hover,.demo-role-list button.active{color:var(--demo-blue);background:#eaf1ff}.demo-nav-title{margin-top:30px}.demo-desktop-nav{gap:5px;margin-top:10px;display:grid}.demo-desktop-nav button{color:var(--demo-muted);text-align:left;background:0 0;border:0;border-radius:9px;align-items:center;gap:10px;padding:10px 12px;font-size:12px;font-weight:800;display:flex}.demo-desktop-nav button:hover,.demo-desktop-nav button.active{color:var(--demo-blue);background:#f1f6ff}.demo-desktop-nav .demo-icon{color:currentColor}.demo-side-note{border-top:1px solid var(--demo-border);color:var(--demo-muted);gap:4px;margin-top:auto;padding:18px 4px 0;font-size:11px;display:grid}.demo-side-note strong{color:var(--demo-text);font-size:12px}.demo-content{width:100%;max-width:1320px;margin:0 auto;padding:42px 48px 80px}.demo-heading{justify-content:space-between;align-items:center;gap:24px;display:flex}.demo-heading h1{color:var(--demo-text);letter-spacing:-.6px;margin:7px 0;font-size:30px}.demo-heading p{color:var(--demo-muted);font-size:14px}.demo-user-chip{align-items:center;gap:10px;display:flex}.demo-user-chip strong,.demo-user-chip small{display:block}.demo-user-chip strong{font-size:13px}.demo-user-chip small{color:var(--demo-muted);margin-top:3px;font-size:11px}.demo-avatar{color:var(--demo-blue);background:#dce9ff;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:11px;font-weight:900;display:flex}.demo-mobile-role-switcher{display:none}.demo-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:30px 0 18px;display:grid}.demo-metric{border:1px solid var(--demo-border);background:#fff;border-radius:15px;padding:18px}.demo-metric span,.demo-metric small{color:var(--demo-muted);font-size:12px;display:block}.demo-metric strong{color:var(--demo-blue);margin:8px 0 4px;font-size:25px;display:block}.demo-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.demo-card{border:1px solid var(--demo-border);background:#fff;border-radius:15px;padding:22px}.demo-card-heading{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.demo-card h3{margin-top:6px;font-size:18px}.demo-chevron{color:#a3afbc;font-size:30px;font-weight:300;line-height:1}.demo-lesson,.demo-list-row,.demo-alert,.demo-next-lesson{border-top:1px solid var(--demo-border);grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;display:grid}.demo-lesson:first-of-type,.demo-list-row:first-of-type,.demo-alert:first-of-type{border-top:0}.demo-lesson time{color:var(--demo-blue);font-size:14px;font-weight:900}.demo-lesson strong,.demo-list-row strong,.demo-alert strong{font-size:13px;display:block}.demo-lesson small,.demo-list-row small,.demo-alert small{color:var(--demo-muted);margin-top:4px;font-size:11px;display:block}.demo-badge{white-space:nowrap;border-radius:99px;padding:6px 8px;font-size:10px;font-weight:800}.demo-badge.blue{color:#245ebc;background:#e8f0ff}.demo-badge.green{color:#16824e;background:#eaf8f0}.demo-badge.amber{color:#9a6900;background:#fff4d8}.demo-status-dot{border-radius:50%;width:9px;height:9px}.demo-status-dot.green{background:#35b878}.demo-status-dot.blue{background:var(--demo-blue)}.demo-status-dot.amber{background:#e2a41a}.demo-list-row{grid-template-columns:12px minmax(0,1fr) auto}.demo-list-row small{text-align:right}.demo-alert{grid-template-columns:30px minmax(0,1fr)}.demo-alert-icon{border-radius:9px;justify-content:center;align-items:center;width:30px;height:30px;font-size:13px;font-weight:900;display:flex}.demo-alert-icon.amber{color:#9a6900;background:#fff4d8}.demo-alert-icon.red{color:#b42318;background:#ffeded}.demo-alert-icon.blue{color:#245ebc;background:#e8f0ff}.demo-next-lesson{border-top:0;grid-template-columns:68px minmax(0,1fr) auto;padding-top:4px}.demo-next-time{color:var(--demo-blue);font-size:23px;font-weight:900}.demo-next-time small{color:var(--demo-muted);margin-top:2px;font-size:11px;font-weight:700;display:block}.demo-next-lesson strong{font-size:14px;display:block}.demo-next-lesson small{color:var(--demo-muted);margin-top:5px;font-size:11px;display:block}.demo-muted{color:var(--demo-muted);font-size:13px;line-height:1.5}.demo-action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px;display:grid}.demo-action-grid button,.demo-wide-button{color:var(--demo-blue);background:#f7faff;border:1px solid #cfe0ff;border-radius:9px;padding:11px 12px;font-size:12px;font-weight:800}.demo-action-grid button:hover,.demo-wide-button:hover{background:#eaf1ff}.demo-wide-button{width:100%;margin-top:8px}.demo-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px;display:grid}.demo-shortcuts button{border:1px solid var(--demo-border);color:var(--demo-text);text-align:center;background:#f7faff;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:78px;padding:10px 6px;font-size:11px;display:flex}.demo-shortcuts button .demo-icon{color:var(--demo-blue)}.demo-progress{background:#e8eef6;border-radius:99px;height:8px;margin:22px 0 7px;overflow:hidden}.demo-progress span{background:var(--demo-blue);border-radius:inherit;height:100%;display:block}.demo-dock{display:none}.demo-toast{color:#fff;z-index:20;background:#14263d;border:1px solid #29496d;border-radius:11px;max-width:360px;padding:12px 15px;font-size:12px;font-weight:700;position:fixed;bottom:22px;right:24px;box-shadow:0 14px 30px #07182a2b}@media (max-width:900px){.demo-topbar{padding:15px 18px}.demo-brand{gap:10px}.demo-brand img{width:145px;height:30px}.demo-brand span{font-size:8px}.demo-layout{min-height:0;display:block}.demo-sidebar{display:none}.demo-content{padding:24px 18px 112px}.demo-mobile-role-switcher{gap:7px;margin-bottom:24px;padding-bottom:2px;display:flex;overflow-x:auto}.demo-mobile-role-switcher button{border:1px solid var(--demo-border);color:var(--demo-muted);white-space:nowrap;background:#fff;border-radius:99px;padding:9px 12px;font-size:11px;font-weight:800}.demo-mobile-role-switcher button.active{color:var(--demo-blue);background:#eaf1ff;border-color:#cfe0ff}.demo-heading{flex-direction:column;align-items:flex-start;gap:17px}.demo-heading h1{font-size:25px}.demo-user-chip{align-self:stretch}.demo-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:22px}.demo-metric{padding:14px}.demo-metric strong{font-size:21px}.demo-card-grid{grid-template-columns:1fr}.demo-card{padding:18px}.demo-list-row small{max-width:125px}.demo-dock{border-top:1px solid var(--demo-border);padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:10;background:#fffffff5;grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.demo-dock button{color:#9aa8b8;background:0 0;border:0;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;font-size:10px;font-weight:800;display:flex}.demo-dock button.active,.demo-dock button.active .demo-icon{color:var(--demo-coral)}.demo-dock .demo-icon{color:#a5b5c5}.demo-toast{max-width:calc(100% - 36px);bottom:82px;left:18px;right:18px}}@media (max-width:450px){.demo-exit{font-size:11px}.demo-brand span{display:none}.demo-lesson,.demo-list-row{grid-template-columns:45px minmax(0,1fr)}.demo-lesson .demo-badge{grid-column:2;justify-self:start}.demo-list-row small{text-align:left;grid-column:2}.demo-shortcuts{grid-template-columns:1fr}}