:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#1f2933;background:#f5f7fa;--brand:#0e8be3;--navy:#063b5c;--accent:#f2b84b;--muted:#687584;--card:#fff;--line:#dbe5ed}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
button,input,select{font:inherit}
button{border:0;border-radius:14px;padding:12px 16px;background:var(--brand);color:#fff;font-weight:800;cursor:pointer}
button:hover{filter:brightness(.96)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(14,139,227,.4);outline-offset:2px}
h1,h2,h3{font-family:Montserrat,Inter,sans-serif;letter-spacing:-.035em;color:var(--navy);margin:0}
.center{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:16px;padding:24px}
.loader{height:36px;width:36px;border:4px solid #cfeaf9;border-top-color:var(--brand);border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.login-card{width:min(430px,100%);display:grid;gap:18px;padding:34px;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 18px 44px rgba(6,59,92,.13)}
.brand-lockup{display:flex;align-items:center;gap:10px;color:var(--navy);font-family:Montserrat,Inter,sans-serif;font-weight:800}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;color:#fff;background:var(--brand);border-radius:12px}
.eyebrow{margin:0 0 7px;text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800;color:#b27c06}
.muted,.empty-note{color:var(--muted);line-height:1.55}
.login-card label,.select-label{display:grid;gap:7px;font-size:.83rem;font-weight:750}
input,select{width:100%;padding:12px;border:1px solid #cfdbe5;border-radius:13px;background:#fff;color:#1f2933}
.error{min-height:1.2rem;margin:0;color:#b91c1c}
.sidebar{position:fixed;inset:0 auto 0 0;width:244px;padding:28px 20px;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;z-index:20}
.sidebar .brand-lockup{color:#fff}
.sidebar .brand-mark{background:var(--accent);color:var(--navy)}
.sidebar-copy{margin:10px 0 0;color:#c8deea;font-size:.88rem}
.sidebar nav{display:grid;gap:8px}
.sidebar nav button{display:flex;gap:10px;align-items:center;text-align:left;background:transparent;color:#dcedf7;box-shadow:none}
.sidebar nav button.active{background:#fff;color:var(--navy)}
.sidebar-footer{display:grid;gap:12px}
.sidebar-footer p{margin:0;font-size:.82rem;color:#c8deea}
.secondary{background:#e8eff4;color:#284a5e}
.workspace{margin-left:244px;min-height:100vh;padding:42px clamp(24px,5vw,72px) 56px}
.page-header{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:27px}
.page-header h1{font-size:clamp(2rem,4vw,3.35rem)}
.mobile-menu{display:none}
.notice{min-height:1px;margin:0}
.welcome{display:flex;justify-content:space-between;gap:28px;padding:28px 30px;background:linear-gradient(120deg,#073e60,#0c719c);border-radius:26px;color:#fff}
.welcome h2{color:#fff;font-size:clamp(1.45rem,3vw,2.1rem)}
.welcome p:not(.eyebrow){max-width:540px;color:#dceff9;line-height:1.55}
.welcome-stats{display:flex;align-items:center;gap:13px}
.welcome-stats span{display:grid;gap:3px;min-width:104px;padding:13px;border-radius:16px;background:rgba(255,255,255,.12);text-align:center;font-size:.74rem}
.welcome-stats strong{font-size:1.45rem}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin:36px 0 15px}
.section-heading h2{font-size:1.55rem}
.text-button{padding:8px;background:transparent;color:var(--brand);box-shadow:none}
.upcoming-grid,.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.class-card,.lesson-card,.timeline-row,.toolbar{background:var(--card);border:1px solid var(--line);box-shadow:0 10px 28px rgba(6,59,92,.06)}
.class-card{display:flex;flex-direction:column;gap:13px;min-height:267px;padding:20px;border-radius:20px;border-top:5px solid var(--brand)}
.class-card.babies{border-top-color:#d67b43}
.class-card.older{border-top-color:#476fac}
.class-card.wednesday{border-top-color:#5e9c55}
.class-card-top,.timeline-meta,.lesson-card>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.group-badge,.status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:.68rem;font-weight:800}
.group-badge{background:#e8f4fb;color:#19618a}
.group-badge.babies{background:#fff0e7;color:#a7521d}
.group-badge.older{background:#eaf0fb;color:#385b93}
.group-badge.wednesday{background:#e9f5e7;color:#397435}
.status.ready{background:#e7f7ec;color:#19733a}
.status.pending{background:#fff4d9;color:#9a6500}
.date{margin:6px 0 -6px;font-size:.82rem;font-weight:750;color:#4d6372;text-transform:capitalize}
.class-card h3,.lesson-card h3,.timeline-row h3{font-size:1.15rem}
.reference,.timeline-row p,.lesson-card p{margin:0;color:#586b79;line-height:1.45}
.class-card button,.lesson-card button{margin-top:auto;align-self:flex-start}
.toolbar{padding:16px;border-radius:17px;margin-bottom:18px}
.toolbar .select-label{width:min(310px,100%)}
.timeline{display:grid;gap:11px}
.timeline-row{display:grid;grid-template-columns:70px 1fr auto;gap:18px;align-items:center;padding:16px 18px;border-radius:17px}
.timeline-row time{display:grid;place-items:center;align-content:center;height:58px;border-radius:14px;background:#eaf4fa;color:var(--navy)}
.timeline-row time strong{font-size:1.4rem;line-height:1}
.timeline-row time span{text-transform:uppercase;font-size:.67rem;font-weight:800}
.icon-action{padding:10px 12px;border-radius:11px}
.lesson-controls{display:grid;grid-template-columns:1fr 220px auto;gap:12px;margin-bottom:0}
.lesson-card{display:grid;gap:13px;padding:20px;border-radius:19px;min-height:208px}
.lesson-card footer{margin-top:auto}
.empty-state{padding:34px;text-align:center;border:1px dashed #b9c8d4;border-radius:18px;color:var(--muted);background:#fff}
.bottom-nav{display:none}
@media(max-width:980px){.upcoming-grid,.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.welcome{align-items:flex-start}
.welcome-stats{flex-direction:column;align-items:stretch}
}
@media(max-width:720px){.sidebar{transform:translateX(-100%);transition:transform .2s ease}
.sidebar.open{transform:translateX(0)}
.workspace{margin-left:0;padding:28px 18px 100px}
.page-header{align-items:center;margin-bottom:21px}
.mobile-menu{display:block;padding:9px 12px;border-radius:11px;background:#e5f2f9;color:var(--navy)}
.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;inset:auto 0 0;background:#fff;border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom));z-index:15}
.bottom-nav button{display:grid;justify-items:center;gap:2px;padding:7px 3px;background:transparent;color:#587080;font-size:.7rem;box-shadow:none}
.bottom-nav button.active{color:var(--brand)}
.welcome{display:grid;padding:23px 21px}
.welcome-stats{display:flex;flex-direction:row}
.welcome-stats span{flex:1;min-width:0}
.upcoming-grid,.lesson-grid{grid-template-columns:1fr}
.class-card{min-height:0}
.section-heading{margin-top:28px}
.timeline-row{grid-template-columns:56px 1fr;gap:12px;padding:14px}
.timeline-row .icon-action{grid-column:2;justify-self:start}
.lesson-controls{grid-template-columns:1fr}
.sidebar nav button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.loader{animation-duration:1.4s}
.sidebar{transition:none}
}
.brand-lockup img{display:block;object-fit:contain}
.login-brand{justify-content:center}
.login-brand img{width:min(236px,100%);height:118px}
.admin-brand{justify-content:center;padding:8px 12px;background:#fff;border-radius:18px;box-shadow:0 8px 18px rgba(0,0,0,.14)}
.admin-brand img{width:164px;height:auto;max-width:100%}
.local-help{max-width:390px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 44px rgba(6,59,92,.13);text-align:center}
.local-help strong{display:block;color:var(--navy);font-family:Montserrat,Inter,sans-serif;font-size:1.2rem}
.local-help p{color:var(--muted);line-height:1.5}
.local-help a{display:inline-block;padding:11px 15px;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;text-decoration:none}
.notice:not(:empty){margin:-8px 0 18px;padding:12px 14px;border-radius:14px;background:#e7f7ec;color:#19733a;font-weight:700}
.notice.failure{background:#fff0f0;color:#a82222}
.section-actions{display:flex;gap:10px;align-items:center}
.timeline-actions,.lesson-actions{display:flex;gap:8px;align-items:center}
.minor-button{padding:9px 11px;border-radius:11px;background:#e8eff4;color:#284a5e;font-size:.8rem}
.editor-dialog{width:min(590px,calc(100% - 28px));border:0;padding:0;background:transparent}
.editor-dialog::backdrop{background:rgba(6,36,55,.55);backdrop-filter:blur(2px)}
.editor-card{display:grid;gap:18px;max-height:min(780px,calc(100vh - 30px));overflow:auto;padding:24px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 25px 65px rgba(4,39,60,.3)}
.editor-header{display:flex;justify-content:space-between;gap:18px;align-items:start}
.editor-header h2{font-size:1.5rem}
.dialog-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;background:#e8eff4;color:#284a5e;font-size:1.5rem;line-height:1}
.editor-fields{display:grid;gap:14px}
.editor-fields label{display:grid;gap:7px;font-size:.84rem;font-weight:750;color:#284a5e}
.editor-fields textarea{min-height:105px;resize:vertical;padding:12px;border:1px solid #cfdbe5;border-radius:13px;font:inherit;color:#1f2933}
.editor-fields .field-note{margin:-5px 0 0;color:var(--muted);font-size:.78rem;line-height:1.45}
.editor-actions{display:flex;justify-content:flex-end;gap:10px}
@media(max-width:720px){.admin-brand img{width:164px;height:auto}}
@media(max-width:720px){.section-heading{align-items:center}.section-actions .text-button{display:none}.toolbar .section-actions{display:grid;grid-template-columns:1fr;width:100%}.toolbar .select-label,.toolbar .section-actions>button{width:100%}.timeline-row{align-items:start}.timeline-actions{grid-column:2;flex-wrap:wrap}.editor-card{padding:20px}.editor-actions{display:grid;grid-template-columns:1fr 1.2fr}.editor-actions button{width:100%}}