/* THE BEER: a single visual system for the learning workspace. */
:root {
  --forest:#133f33; --green:#176a4b; --ink:#243c33; --muted:#6b7b74;
  --cream:#f6f8f7; --gold:#21835e; --lime:#def0e5; --border:#e2e9e5;
  --purple:#176a4b; --font:'Manrope','IBM Plex Sans Thai',sans-serif;
  --surface-shadow:0 16px 35px -26px #163e344a,0 2px 7px #163e3406; --page-gutter:20px; --surface:#fff; --soft:#edf5f0; --radius:18px; color-scheme:light;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(100px + env(safe-area-inset-top,0px)); scroll-padding-bottom:96px; }
body { margin:0; color:var(--ink); background:radial-gradient(ellipse at 90% 0%,#e2eddd 0,transparent 42%),var(--cream); font:16px/1.65 var(--font); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; min-height:44px; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; color:inherit; background:none; border:0; }
button:disabled { opacity:.55; cursor:default; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #398a67; outline-offset:4px; }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3,h4 { line-height:1.5; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
button svg,a svg { pointer-events:none; }
.symbols,[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:100; padding:12px 20px; border-radius:10px; background:white; box-shadow:0 4px 20px #102e2422; }
.skip-link:focus { top:16px; }
#main:focus,#library-title:focus,#account-title:focus,#holiday-title:focus { outline:none; }
.network-note,.demo-note,.source-note { position:relative; z-index:40; padding:6px 16px; text-align:center; font-size:12px; background:#fff4d9; color:#71592d; }
.network-note { background:#ffebe6; color:#9a4a37; }.source-note { background:#eaf4ee; color:#3f6b52; }
.app { max-width:1620px; min-width:0; min-height:100svh; margin:auto; padding-bottom:calc(86px + env(safe-area-inset-bottom,0px)); }
.app-sidebar { display:none; }
.app-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; height:calc(80px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 20px 0; border-bottom:1px solid #dce6dc; background:#fffffff2; box-shadow:0 5px 22px -17px #173f374f; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:10px; min-width:0; padding:0; text-align:left; }
.brand-icon { width:43px; height:43px; flex-shrink:0; }
.brand-icon img { display:block; width:100%; height:100%; border-radius:12px; object-fit:contain; box-shadow:0 4px 12px #153b2319; }
.brand strong { display:block; color:#173d2f; font-size:21px; font-weight:800; letter-spacing:-.5px; line-height:1.2; }
.brand-dot { color:#4d9971; }.brand small { display:block; margin-top:5px; font-size:8px; font-weight:600; letter-spacing:2px; color:#78857d; }
.header-context { display:none; }.header-actions { display:flex; align-items:center; gap:9px; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; min-width:44px; flex-shrink:0; padding:10px; border-radius:12px; color:#60776b; transition:background .16s; }
.icon-button:hover { background:#edf4ef; }.header-install { border:1px solid var(--border); background:#fff; }
.header-date,.header-divider { display:none; }.profile-button { display:flex; align-items:center; gap:10px; min-width:0; padding:0; font-size:12px; font-weight:600; }
.profile-avatar { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:50%; background:#edf4ee; color:#2d7655; font-size:17px; }
.profile-avatar svg { width:20px; height:20px; }#header-user,.profile-chevron { display:none; }
#main { padding:25px 20px 0; min-width:0; }
.section-kicker { display:block; color:#72877b; font-size:10px; line-height:1.5; font-weight:700; letter-spacing:1.7px; }

.home-bottom-grid { display:grid; gap:20px; }
.home-bottom-grid { margin-top:24px; }

.primary-button,.secondary-button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 19px; border:1px solid transparent; border-radius:10px; font-size:14px; font-weight:600; text-align:center; line-height:1.65; transition:background .16s,box-shadow .16s; }
.primary-button { color:white; background:var(--forest); }.primary-button:hover { background:#1c5b43; box-shadow:0 4px 12px #183e2914; }
.secondary-button { color:#36654d; background:white; border-color:var(--border); }.secondary-button:hover { background:var(--soft); }
.primary-button svg,.secondary-button svg { width:18px; height:18px; }

.announcement { display:flex; align-items:center; gap:13px; padding:18px 20px; margin-top:22px; border:1px solid #dfe9e3; border-radius:14px; background:#eef5f0; }
.announcement-icon { display:grid; place-items:center; width:35px; height:35px; flex-shrink:0; color:#40785a; border-radius:10px; background:#dfebe2; }.announcement-icon svg { width:18px; height:18px; }
.announcement>div { min-width:0; flex:1; }.announcement strong { display:block; font-size:12px; font-weight:600; }.announcement p { font-size:12px; line-height:1.9; color:#62786a; overflow-wrap:anywhere; white-space:pre-wrap; margin-top:2px; }.announcement-tag { display:none; }
.announcement.warning { background:#fff8e8; border-color:#eadcb9; }.announcement.warning p { color:#7f683e; }.announcement.danger { background:#fff1ed; border-color:#efd7cd; }.announcement.danger p { color:#99563e; }
/* Monthly calendar. Dates and publication status come from System in Sheets. */
.holiday-calendar { min-width:0; padding:22px 16px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(145deg,#fff,#fbfdf9); box-shadow:var(--surface-shadow); scroll-margin-top:0; }
.holiday-heading { display:flex; align-items:center; gap:10px; margin-bottom:21px; }.holiday-heading>div { min-width:0; flex:1; }.holiday-heading h2 { font-size:20px; font-weight:600; margin-top:3px; }.holiday-heading p { margin-top:4px; color:var(--muted); font-size:12px; }.holiday-heading-icon { display:none; }.holiday-heading .icon-button { border:1px solid var(--border); border-radius:11px; }
.holiday-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }.holiday-month-panel { min-width:0; }.holiday-month-nav { display:grid; grid-template-columns:32px minmax(0,1fr) 32px auto; gap:4px; align-items:center; margin-bottom:9px; }.holiday-month-nav h3 { text-align:center; font-size:14px; font-weight:600; }.holiday-month-nav .icon-button { width:32px; min-width:32px; height:44px; padding:7px; }#holiday-prev svg { transform:rotate(180deg); }.holiday-month-nav .icon-button svg { width:17px; height:17px; }
.calendar-today,.calendar-all { min-height:44px; padding:7px 10px; font-size:11px; font-weight:600; color:#327452; background:#f4f8f5; border:1px solid #e1eae4; border-radius:8px; white-space:nowrap; }.calendar-today:disabled { opacity:1; color:#75897c; background:#f7f9f7; }
.holiday-weekdays,.holiday-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }.holiday-weekdays span { padding:5px 0 8px; font-size:11px; text-align:center; color:#64796a; }
.holiday-day { display:grid; place-items:center; min-width:0; min-height:44px; padding:0; position:relative; border:1px solid transparent; border-radius:9px; font-size:12px; font-weight:500; color:#496452; }.holiday-day.is-holiday { background:#e6f2e9; border-color:#d8e9dd; color:#267049; font-weight:700; }.holiday-day.is-holiday:after { content:''; position:absolute; bottom:5px; width:3px; height:3px; border-radius:50%; background:currentColor; }.holiday-day.is-holiday:hover,.holiday-day[aria-pressed=true] { background:#216346; border-color:#216346; color:white; }.holiday-day.is-today { border:1.5px solid #467b5d; }.holiday-day.empty-day { visibility:hidden; }
.holiday-legend { display:flex; align-items:center; gap:13px; border-top:1px solid #eef2ee; margin-top:9px; padding-top:13px; font-size:11px; color:#6e8174; }.holiday-legend>span { display:flex; align-items:center; gap:5px; }.holiday-legend i { display:block; width:8px; height:8px; border-radius:2px; }.legend-holiday { background:#d9ecdf; border:1px solid #acd2b7; }.legend-today { border:1px solid #467b5d; }.holiday-legend small { margin-left:auto; font-size:10px; }
.holiday-agenda { min-width:0; border-top:1px solid var(--border); padding-top:18px; }.holiday-agenda-heading { display:flex; justify-content:space-between; gap:8px; align-items:center; min-height:24px; }.holiday-agenda h3 { font-size:14px; font-weight:600; }.holiday-status { font-size:12px; color:#728478; margin:5px 0 12px; min-height:18px; }.holiday-events { display:flex; flex-direction:column; gap:10px; max-height:266px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c2d4c7 transparent; border-radius:10px; }
.holiday-event { display:flex; align-items:flex-start; gap:12px; padding:12px; border:1px solid #e6ece7; border-radius:11px; background:#fafcfb; }.holiday-date-badge { display:flex; align-items:center; justify-content:center; flex-direction:column; min-width:43px; min-height:50px; border-radius:8px; color:#336c49; background:#edf5ef; }.holiday-date-badge strong { font-size:20px; font-weight:700; line-height:1.3; }.holiday-date-badge span { font-size:10px; margin-top:3px; }.holiday-event-copy { min-width:0; }.holiday-event h4 { font-size:13px; font-weight:600; line-height:1.6; margin:0 0 3px; overflow-wrap:anywhere; }.holiday-event p { font-size:12px; color:#768679; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; }
.calendar-message { padding:15px; border:1px dashed #dce7de; border-radius:10px; background:#f8fbf9; font-size:12px; color:#748178; line-height:1.9; }.calendar-error,.holiday-warning { color:#985e3d; }.holiday-warning { font-size:12px; margin-top:12px; }.holiday-events .secondary-button { align-self:flex-start; font-size:12px; }
.learning-companion { display:flex; flex-direction:column; min-width:0; padding:26px; border:1px solid var(--border); border-radius:var(--radius); background:radial-gradient(ellipse at 100% 0,#f8fff0,transparent 58%),linear-gradient(150deg,#e7f1e5,#f5f8f0); box-shadow:var(--surface-shadow),inset 0 1px 0 #fff; }.learning-companion h2 { font-size:25px; font-weight:500; letter-spacing:-.5px; margin-top:13px; line-height:1.6; color:#385742; }.math-illustration { width:100%; max-width:320px; margin:22px auto 12px; }.math-illustration svg { display:block; width:100%; height:auto; overflow:visible; }.math-grid { stroke:#dae5dd; stroke-width:1; }.math-area { fill:url(#math-area); stroke:none; }.math-axis { stroke:#a8bcb0; stroke-width:1; }.math-curve { stroke:#6d9e7e; stroke-width:2.5; }.math-illustration circle { fill:#346e4b; stroke:#f0f5f1; stroke-width:3; }.math-illustration text { font:italic 25px Georgia,serif; fill:#597e65; stroke:none; }.learning-quote { font-size:14px; color:#728774; line-height:2; }.companion-signature { display:flex; align-items:center; gap:10px; font-size:12px; color:#3c6547; margin-top:15px; }.companion-signature>span { width:20px; height:1px; background:#a0bca8; }.companion-contact { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:24px; color:#4a7756; }.companion-contact>span { flex:1; }.companion-contact strong { display:block; font-size:12px; font-weight:500; }.companion-contact small { display:block; font-size:11px; color:#64796a; margin-top:3px; }.companion-contact>svg { width:18px; height:18px; }
/* Catalog and documents. */
.page-content { min-width:0; }.page-intro { margin-bottom:22px; padding:4px 0 0; }.page-intro h1 { font-size:27px; font-weight:600; letter-spacing:-.7px; margin-top:6px; overflow-wrap:anywhere; }.page-intro p { font-size:13px; color:var(--muted); margin-top:6px; }
.library-switch { display:flex; align-items:center; gap:5px; border-bottom:1px solid var(--border); margin-bottom:22px; }.library-switch button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:12px 20px; position:relative; font-size:13px; font-weight:600; color:#64796a; }.library-switch button.active { color:#205c3c; }.library-switch button.active:after { content:''; position:absolute; bottom:-1px; left:12px; right:12px; height:3px; background:#316f4c; border-radius:2px; }.library-switch svg { width:18px; height:18px; }.library-switch span:not(:empty) { padding:0 6px; color:#558067; background:#e8f1ea; font-size:11px; line-height:1.8; border-radius:5px; }
.library-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:17px; }.class-label { display:flex; align-items:center; flex:1; gap:9px; min-width:0; min-height:48px; font-size:14px; }.class-label svg { color:#699877; width:20px; height:20px; }.class-label span { overflow-wrap:anywhere; font-weight:600; }
.refresh-button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 12px; border-radius:9px; border:1px solid var(--border); background:white; font-size:12px; color:#56806a; }.refresh-button:hover { background:#edf5ef; }.refresh-button svg { width:16px; height:16px; }
.admin-select { padding:16px; margin-bottom:17px; border:1px solid var(--border); border-radius:12px; background:white; }.admin-select label { display:block; font-size:12px; margin-bottom:7px; font-weight:600; }.admin-select select { width:100%; max-width:100%; min-height:48px; background:#f8faf8; border:1px solid #dfe8e1; border-radius:9px; padding:10px; color:var(--ink); font-size:16px; text-overflow:ellipsis; }
.search-tools { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:19px; }.search-field { display:flex; align-items:center; flex:1 1 220px; gap:10px; min-width:0; border:1px solid var(--border); border-radius:10px; background:white; padding:0 14px; }.search-field:focus-within,.form-field:focus-within { border-color:#6da382; box-shadow:0 0 0 3px #45926116; }.search-field svg { width:19px; height:19px; color:#82968a; }.search-field input { width:100%; min-width:0; min-height:49px; border:0; background:none; outline:0; font-size:16px; color:var(--ink); }.search-field input::placeholder { color:#89998e; font-size:13px; }
.search-tools select { width:160px; max-width:100%; min-height:49px; border:1px solid var(--border); border-radius:10px; background:white; padding:10px; font-size:14px; color:#5c7463; }
.library-status { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; margin-bottom:15px; color:#64796a; font-size:11px; }.lesson-count { font-size:12px; font-weight:600; color:#657b6c; }
.lesson-pagination { margin:0 0 22px; padding:0; scroll-margin-top:8px; }
#lesson-pagination-bottom { margin:27px 0 0; padding-top:22px; border-top:1px solid var(--border); }
.pagination-controls { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:'numbers numbers' 'previous next'; gap:10px 12px; }
.page-numbers { grid-area:numbers; display:flex; justify-content:center; align-items:center; gap:4px; min-width:0; }
.page-number { display:grid; place-items:center; flex:0 0 44px; min-width:44px; min-height:44px; padding:7px; border:1px solid #dbe6da; border-radius:11px; background:linear-gradient(145deg,#fff,#f5f9f1); box-shadow:0 2px 0 #e0e9dd; font-size:14px; font-weight:600; }
.page-number:hover { border-color:#79a277; background:#eaf3e3; }
.page-number[aria-current=page] { border-color:#285d3e; color:#f4fbe9; background:linear-gradient(145deg,#39794e,#194b31); box-shadow:inset 0 1px 0 #e7ffd02b,0 3px 7px #194b3126; }
.page-gap { display:grid; place-items:center; flex:0 0 18px; color:#6d8174; font-size:14px; }
.page-direction { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:8px 14px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:12px; color:#396248; }
.page-direction:hover:not(:disabled) { background:#edf5e9; border-color:#aac5a6; }.page-direction:disabled { opacity:.45; box-shadow:none; }
.page-direction svg { width:16px; height:16px; }.page-previous { grid-area:previous; }.page-previous svg { transform:rotate(180deg); }.page-next { grid-area:next; }
@media(min-width:600px) { .pagination-controls { display:flex; justify-content:center; align-items:center; gap:12px; }.page-direction { min-width:101px; }.page-numbers { gap:5px; } }
.lesson-list { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }.lesson-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); background:white; border-radius:14px; box-shadow:var(--surface-shadow); overflow:hidden; transition:box-shadow .18s,transform .18s; }.lesson-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px #253e2c0b; }
.lesson-thumb { position:relative; isolation:isolate; display:grid; place-items:center; width:100%; aspect-ratio:16/9; min-height:0; padding:0; overflow:hidden; background:#e4eee7; color:#567e64; }.lesson-thumb:before { content:''; position:absolute; inset:0; background-image:linear-gradient(#8bb39a20 1px,transparent 1px),linear-gradient(90deg,#8bb39a20 1px,transparent 1px); background-size:28px 28px; }.lesson-card[data-tone="1"] .lesson-thumb { background:#e9ede5; }.lesson-card[data-tone="2"] .lesson-thumb { background:#e0ebe8; }.lesson-card[data-tone="3"] .lesson-thumb { background:#e8ede8; }.cover-equation { font:italic 52px Georgia,serif; color:#668874; }.lesson-thumb img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
.lesson-badge { position:absolute; z-index:2; top:13px; left:13px; padding:4px 9px; border-radius:6px; font-size:11px; background:#ffffffed; color:#416750; }.play-circle { position:absolute; z-index:2; bottom:13px; right:13px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:white; background:#24593fe8; box-shadow:0 3px 10px #133b2520; }.play-circle svg { width:15px; height:15px; fill:currentColor; stroke-width:1; }
.lesson-info { display:flex; flex:1; flex-direction:column; min-width:0; padding:19px; }.lesson-date { font-size:11px; color:#64796a; margin-bottom:4px; }.lesson-info h2 { font-size:17px; line-height:1.75; font-weight:600; overflow-wrap:anywhere; margin-bottom:8px; }.lesson-title { min-height:44px; width:100%; text-align:left; padding:0; font:inherit; color:#304f3d; }.lesson-meta { font-size:11px; color:#64796a; margin-bottom:16px; }.lesson-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-top:auto; padding-top:4px; border-top:1px solid #edf1ed; }.lesson-actions a,.lesson-actions button { display:flex; align-items:center; gap:6px; min-height:44px; padding:0; font-size:12px; color:#4c7759; font-weight:600; }.lesson-actions svg { width:15px; height:15px; }
.document-card { display:flex; align-items:center; gap:14px; min-width:0; padding:20px; background:white; border:1px solid var(--border); border-radius:13px; box-shadow:var(--surface-shadow); transition:border-color .16s,box-shadow .16s; }.document-card:hover { border-color:#adc8b4; box-shadow:0 4px 16px #253e2c08; }.document-icon { display:grid; place-items:center; width:43px; height:52px; flex-shrink:0; border-radius:10px; background:#edf5ef; color:#527e5e; }.document-icon svg { width:23px; height:23px; }.document-card>span:not(.document-icon) { min-width:0; }.document-card strong { display:block; font-size:14px; font-weight:600; line-height:1.8; overflow-wrap:anywhere; }.document-card small { display:block; margin-top:5px; font-size:11px; color:#64796a; line-height:1.8; overflow-wrap:anywhere; }.document-arrow { margin-left:auto; width:17px; height:17px; color:#64796a; }
.empty-state { grid-column:1/-1; text-align:center; padding:46px 24px; border:1px solid var(--border); border-radius:18px; background:white; }.empty-symbol { display:grid; place-items:center; width:94px; height:94px; margin:0 auto 22px; border-radius:50%; background:#edf5ef; color:#73a183; font:italic 41px Georgia,serif; }.empty-state h2 { font-size:22px; font-weight:600; }.empty-state p { font-size:13px; color:#64796a; margin:10px 0 24px; line-height:1.95; white-space:pre-line; }.empty-state .primary-button,.empty-state .secondary-button { max-width:290px; margin:auto; }.more-button { margin:25px auto 0; max-width:320px; }
.loading { grid-column:1/-1; padding:70px 20px; text-align:center; color:#6c8a75; font-size:13px; border:1px solid var(--border); border-radius:16px; background:white; }.spinner { display:inline-block; width:19px; height:19px; border:2px solid #dceade; border-top-color:#4b825a; border-radius:50%; animation:spin .75s linear infinite; margin-right:9px; vertical-align:middle; }
/* Account and the teacher's existing Google Sheets controls. */
.account-layout { display:grid; gap:22px; }.account-identity,.account-settings { min-width:0; }.account-card { text-align:center; padding:33px 24px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(150deg,#fff,#f8fbf5); box-shadow:var(--surface-shadow); }.account-avatar { display:grid; place-items:center; width:78px; height:78px; border-radius:24px; margin:0 auto 20px; background:#ecf4ed; color:#467354; font-size:30px; font-weight:500; }.account-avatar img { display:block; width:78px; height:78px; border-radius:20px; object-fit:contain; }.account-card h2 { font-size:23px; font-weight:600; overflow-wrap:anywhere; }.account-card p { margin:10px 0 25px; color:#64796a; font-size:13px; overflow-wrap:anywhere; }.account-card button { width:100%; max-width:330px; margin:auto; }.account-privacy { display:flex; align-items:center; justify-content:center; gap:7px; padding:17px 10px; font-size:11px; color:#64796a; }.account-privacy svg { width:13px; height:13px; }
.admin-tools { padding:24px; border:1px solid #dce8df; border-radius:16px; background:#edf5ef; box-shadow:var(--surface-shadow); margin-bottom:20px; }.admin-tools h2 { font-size:23px; font-weight:600; margin-top:7px; }.admin-tools p { font-size:13px; line-height:1.9; color:#6a8773; margin:8px 0 21px; }.admin-tools .primary-button,.admin-tools .secondary-button { font-size:12px; margin-top:10px; }.admin-tools small { display:block; font-size:11px; line-height:2.1; color:#7a8e7f; margin-top:17px; }
.document-shortcut { display:flex; align-items:center; gap:13px; min-width:0; width:100%; padding:19px; margin-bottom:12px; border:1px solid var(--border); border-radius:13px; background:white; box-shadow:var(--surface-shadow); text-align:left; }.document-shortcut:hover { border-color:#b9cdbf; }.shortcut-icon { display:grid; place-items:center; width:40px; height:44px; flex-shrink:0; border-radius:10px; background:#f0f5f1; color:#658d6e; }.shortcut-icon svg { width:20px; height:20px; }.document-shortcut>span:not(.shortcut-icon) { min-width:0; flex:1; }.document-shortcut strong { display:block; font-size:13px; font-weight:600; }.document-shortcut small { display:block; color:#64796a; font-size:12px; margin-top:3px; }.chevron { width:17px; height:17px; color:#9aafa0; }.account-note { font-size:12px; color:#64796a; line-height:1.9; text-align:center; margin-top:23px; }
.site-footer { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:30px 20px 0; padding:21px 0 25px; border-top:1px solid var(--border); font-size:11px; color:#64796a; }.site-footer strong { font-size:11px; letter-spacing:1px; color:#557561; }.site-footer small { margin-left:auto; font-size:10px; }
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:8px max(13px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(13px,env(safe-area-inset-left,0px)); border-top:1px solid #e1e9e3; background:#fff; box-shadow:0 -5px 22px #1837230d; }
.bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:58px; padding:0; font-size:11px; color:#64796a; }.nav-icon { display:grid; place-items:center; width:51px; height:30px; border-radius:10px; transition:background .16s; }.bottom-nav svg { width:20px; height:20px; }.bottom-nav button.active { color:#2a6845; font-weight:600; }.bottom-nav button.active .nav-icon { background:#eaf3ec; }
/* Dialogs share sizing, keyboard and motion rules. */
dialog { position:fixed; inset:0; margin:auto; padding:0; width:min(480px,calc(100vw - 32px)); max-width:calc(100vw - 24px); max-height:calc(var(--visual-height,100dvh) - 32px); height:fit-content; overflow:auto; overscroll-behavior:contain; border:1px solid #e0e9e2; border-radius:22px; color:var(--ink); background:white; box-shadow:0 28px 90px #122a2533; }
dialog::backdrop { background:#162a2566; backdrop-filter:blur(5px); }.sheet-handle { display:none; }.dialog-top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:25px 25px 0; }.dialog-top .icon-button { background:#f3f7f4; }.dialog-brand { display:grid; place-items:center; width:49px; height:49px; border-radius:14px; background:#edf5ef; color:#538264; }.dialog-brand img { display:block; width:49px; height:49px; border-radius:13px; }.sheet-body { padding:23px 27px 29px; }.sheet h2 { font-size:27px; font-weight:600; margin-top:7px; line-height:1.6; }.dialog-description { font-size:13px; color:#7b8d81; margin:8px 0 23px; line-height:1.95; }
#login-form label { display:block; font-size:12px; font-weight:600; margin:17px 0 7px; }.form-field { display:flex; align-items:center; gap:11px; min-height:53px; border:1px solid #dee7e0; border-radius:10px; background:#fafcfb; padding:0 13px; }.form-field>svg { width:18px; height:18px; color:#91a495; }.form-field input { width:100%; min-width:0; min-height:51px; font-size:16px; color:var(--ink); border:0; outline:0; background:none; }.form-field input::placeholder { font-size:13px; color:#9baaa0; }.form-field .icon-button { margin-right:-8px; }.form-field .icon-button svg { width:19px; height:19px; }#login-submit { width:100%; margin-top:24px; min-height:52px; }#demo-login { margin-top:13px; width:100%; }
.error-box,.warning-box { padding:13px 15px; border-radius:10px; border:1px solid #efd6c9; background:#fff3ed; font-size:12px; line-height:1.8; color:#9c5a3b; margin:14px 0; }.warning-box { margin:0 0 18px; }.login-help { text-align:center; font-size:12px; color:#64796a; line-height:2; margin-top:24px; }.login-help a { display:inline-block; min-height:44px; color:#538160; font-weight:600; padding-top:2px; }
.install-app-preview { display:flex; align-items:center; gap:15px; border:1px solid var(--border); border-radius:15px; padding:16px; background:#f9fbfa; margin-bottom:23px; }.install-app-preview img { display:block; width:76px; height:76px; border-radius:18px; flex-shrink:0; }.install-app-preview>div { min-width:0; }.install-app-preview strong { display:block; font-size:18px; font-weight:800; }.install-app-preview span { display:block; font-size:12px; color:#7d9184; margin-top:3px; }.install-app-preview small { display:block; font-size:10px; color:#64796a; margin-top:5px; }.install-steps { list-style:none; padding:0; margin:0; counter-reset:install; }.install-steps li { position:relative; padding:6px 0 14px 36px; font-size:12px; color:#6b8373; line-height:1.9; }.install-steps li:before { counter-increment:install; content:counter(install); position:absolute; left:0; top:5px; display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:#ecf4ee; color:#487955; font-size:12px; font-weight:600; }.install-note { font-size:11px; color:#64796a; line-height:1.9; margin:17px 0 0; text-align:center; }
.player-dialog { width:min(960px,calc(100vw - 24px)); border-radius:18px; }.player-top { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 20px; }.player-top>div { min-width:0; }.player-top h2 { font-size:17px; font-weight:600; overflow-wrap:anywhere; }.player-top p { font-size:12px; color:#64796a; margin-top:4px; }.player-top .icon-button { background:#f2f6f3; }.player-frame { position:relative; width:100%; aspect-ratio:16/9; max-height:55dvh; background:#102b21; }.player-frame iframe { display:block; position:absolute; inset:0; width:100%; height:100%; border:0; }.preview-player { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:25px; color:#accbb5; }.preview-player>span { font:italic clamp(23px,5vw,45px) Georgia,serif; }.preview-player p { margin-top:16px; font-size:12px; color:#789f84; }.player-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; padding:18px 20px 0; }.player-links a { font-size:12px; }.player-dialog .install-note { margin:13px 20px 20px; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(95px + env(safe-area-inset-bottom,0px)); z-index:60; width:max-content; max-width:calc(100vw - 36px); padding:13px 19px; border:1px solid #507c6155; border-radius:11px; background:#204b36; color:#edf5ef; font-size:12px; box-shadow:0 7px 22px #122d231c; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:370px) {
  :root { --page-gutter:13px; }
  #main { padding:21px 13px 0; }.app-header { padding-left:13px; padding-right:13px; gap:9px; }.header-actions { gap:5px; }.brand { gap:7px; }.brand strong { font-size:19px; }.brand small { font-size:7px; }.brand-icon { width:38px; height:38px; }
  .holiday-calendar { padding:20px 12px; }.holiday-heading h2 { font-size:19px; }.holiday-month-nav { grid-template-columns:28px minmax(0,1fr) 28px auto; gap:3px; }.holiday-month-nav .icon-button { min-width:28px; width:28px; }.holiday-month-nav h3 { font-size:13px; }.calendar-today { padding:6px; }.holiday-legend { gap:9px; }.holiday-legend small { font-size:8px; }.holiday-event { gap:9px; }
  .page-intro h1 { font-size:24px; }.refresh-button span { display:none; }.refresh-button { min-width:44px; }.site-footer { margin-left:13px; margin-right:13px; }.site-footer small { width:100%; margin-left:0; }
}
@media(max-width:599px) {
  dialog.sheet { inset:auto 0 0; width:100%; max-width:100%; max-height:calc(var(--visual-height,100dvh) - 12px); margin:0; border-radius:24px 24px 0 0; padding-bottom:env(safe-area-inset-bottom,0px); }
  .sheet-handle { display:block; width:34px; height:4px; border-radius:3px; background:#dce5de; margin:11px auto 0; }.dialog-top { padding:14px 23px 0; }.sheet-body { padding:19px 23px 26px; }.sheet h2 { font-size:25px; }.player-links a { flex:1; padding:11px; font-size:12px; }.player-top { padding:13px 15px; }.player-top h2 { font-size:15px; }.player-links { padding-left:15px; padding-right:15px; }
  .search-tools select { flex:0 0 128px; width:128px; font-size:16px; padding:9px 7px; }.search-field { flex:1 1 130px; padding:0 10px; }.search-field input::placeholder { font-size:12px; }.library-switch button { flex:1; padding-left:10px; padding-right:10px; }
}
@media(min-width:440px) and (max-width:799px) {
}
@media(min-width:600px) {
  :root { --page-gutter:28px; }
  .app-header { padding-left:28px; padding-right:28px; }#main { padding:31px 28px 0; }.section-kicker { font-size:11px; }.home-bottom-grid { gap:24px; }
  .holiday-calendar { padding:26px; }.holiday-heading h2 { font-size:23px; }.holiday-heading p { font-size:12px; }.holiday-layout { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; }.holiday-agenda { padding:7px 0 0 22px; border-top:0; border-left:1px solid var(--border); }.holiday-month-nav h3 { font-size:14px; }.holiday-event { gap:9px; padding:11px; }.holiday-event h4 { font-size:12px; }.holiday-event p { font-size:11px; }.holiday-legend small { display:none; }
  .learning-companion { padding:29px; }.math-illustration { max-width:350px; }.companion-contact { padding-top:26px; }
  .lesson-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.page-intro h1 { font-size:32px; }.document-list { grid-template-columns:minmax(0,1fr); }.site-footer { margin-left:28px; margin-right:28px; }.bottom-nav { padding-left:max(60px,calc((100vw - 650px)/2)); padding-right:max(60px,calc((100vw - 650px)/2)); }
}
@media(min-width:800px) {
  .announcement { padding:18px 24px; }.announcement-tag { display:block; flex-shrink:0; padding:4px 11px; border:1px solid #d8e5dc; border-radius:6px; font-size:10px; color:#779581; }
  .header-date { display:block; font-size:12px; color:#64796a; margin-right:8px; }.header-divider { display:block; height:26px; width:1px; background:var(--border); margin:0 6px; }
  .account-layout { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:25px; }.account-card { padding:40px 28px; }.account-card h2 { font-size:25px; }.document-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1100px) {
  body { padding-left:232px; }.app { padding-bottom:0; }.app-sidebar { display:flex; flex-direction:column; position:fixed; z-index:35; top:0; bottom:0; left:0; width:232px; padding:31px 20px 20px; border-right:1px solid var(--border); background:white; overflow:auto; }
  .sidebar-brand { padding:0 2px; gap:10px; }.sidebar-brand .brand-icon { width:45px; height:45px; }.sidebar-brand strong { font-size:21px; }.sidebar-brand small { font-size:8px; }
  .nav-label { margin:41px 13px 12px; font-size:11px; color:#64796a; }.sidebar-nav { display:grid; gap:7px; }.sidebar-nav button { display:flex; align-items:center; gap:12px; text-align:left; padding:14px 14px; min-height:49px; border-radius:10px; font-size:14px; color:#64796a; transition:background .16s; }.sidebar-nav svg { width:19px; height:19px; }.sidebar-nav button:hover { background:#f5f8f5; }.sidebar-nav button.active { color:#276241; font-weight:600; background:#eaf3ed; }.sidebar-nav button i { display:none; margin-left:auto; width:5px; height:5px; background:#4f9064; border-radius:50%; }.sidebar-nav button.active i { display:block; }
  .sidebar-bottom { margin-top:auto; padding-top:40px; }.sidebar-install { padding:19px 16px; background:#f6f8f5; border:1px solid #e9eee7; border-radius:13px; }.sidebar-install-icon { display:grid; place-items:center; width:31px; height:32px; margin-bottom:12px; border-radius:9px; background:#e8f0e7; color:#6f9474; }.sidebar-install-icon svg { width:17px; height:17px; }.sidebar-install strong { display:block; font-size:12px; font-weight:600; color:#55735b; }.sidebar-install p { font-size:11px; color:#64796a; line-height:1.9; margin-top:6px; }.sidebar-install button { display:flex; align-items:center; justify-content:space-between; min-height:44px; width:100%; margin-top:10px; padding:0; color:#598062; font-size:12px; font-weight:600; }.sidebar-install button svg { width:16px; height:16px; }
  .sidebar-teacher { display:flex; align-items:center; gap:10px; margin-top:23px; padding:18px 2px 0; border-top:1px solid var(--border); }.sidebar-teacher img { width:39px; height:39px; object-fit:cover; object-position:center 17%; border-radius:50%; }.sidebar-teacher>span { flex:1; }.sidebar-teacher strong { display:block; color:#48654d; font-size:12px; font-weight:600; }.sidebar-teacher small { display:block; font-size:10px; color:#64796a; margin-top:3px; }.sidebar-teacher>svg { width:16px; height:16px; color:#64796a; }
  .app-header { height:82px; padding:0 32px; }.mobile-brand { display:none; }.header-context { display:flex; align-items:center; gap:14px; font-size:12px; color:#64796a; }.header-context strong { font-size:12px; font-weight:500; color:#4f705a; }.header-context svg { width:13px; height:13px; color:#b6c3b9; }.header-install { border:0; }.header-actions { gap:12px; }#header-user { display:block; max-width:125px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#55745e; }.profile-chevron { display:block; width:13px; height:13px; color:#64796a; transform:rotate(90deg); }.profile-avatar { width:36px; height:36px; font-size:15px; }
  #main { padding:33px 32px 0; }.bottom-nav { display:none; }.site-footer { margin:34px 32px 0; padding-bottom:29px; }.toast { bottom:26px; margin-left:116px; }.home-bottom-grid { grid-template-columns:minmax(0,1.85fr) minmax(0,.85fr); }.holiday-layout { grid-template-columns:minmax(0,1fr); }.holiday-agenda { border-left:0; border-top:1px solid var(--border); padding:18px 0 0; }.holiday-legend small { display:block; }.holiday-events { max-height:250px; }.learning-companion { padding:25px; }.learning-companion h2 { font-size:25px; }.learning-quote { font-size:13px; }.math-illustration { margin-top:32px; }.holiday-event h4 { font-size:13px; }.holiday-event p { font-size:12px; }
}
@media(min-width:1280px) {
  .home-bottom-grid { grid-template-columns:minmax(0,1.85fr) minmax(0,.85fr); }
}
@media(min-width:1440px) {
  .app-sidebar { width:242px; padding-left:23px; padding-right:23px; }body { padding-left:242px; }.app-header { padding-left:36px; padding-right:36px; }#main { padding:34px 36px 0; }.home-bottom-grid { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
  .holiday-layout { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:23px; }.holiday-agenda { padding:8px 0 0 20px; border-left:1px solid var(--border); border-top:0; }.holiday-legend small { display:none; }.holiday-event { padding:10px; gap:9px; }.holiday-date-badge { min-width:36px; min-height:46px; }.holiday-date-badge strong { font-size:19px; }.holiday-event h4 { font-size:12px; }.holiday-event p { font-size:11px; }.holiday-month-nav { grid-template-columns:26px minmax(0,1fr) 26px auto; gap:3px; }.holiday-month-nav .icon-button { min-width:26px; width:26px; padding:4px; }.holiday-month-nav h3 { font-size:13px; }.calendar-today { padding:5px 6px; }.holiday-heading h2 { font-size:23px; }.learning-companion { padding:27px; }.learning-companion h2 { font-size:27px; }.math-illustration { margin-top:23px; }
  .lesson-list { grid-template-columns:repeat(3,minmax(0,1fr)); }.document-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.site-footer { margin-left:36px; margin-right:36px; }.toast { margin-left:121px; }
}
@media(min-width:1660px) {
  #main { padding:37px 40px 0; }.app-header { padding:0 40px; }
  .holiday-calendar { padding:28px; }.holiday-heading h2 { font-size:24px; }.holiday-layout { gap:28px; }.holiday-agenda { padding-left:25px; }.holiday-month-nav h3 { font-size:15px; }.holiday-event h4 { font-size:13px; }.holiday-event p { font-size:12px; }.holiday-date-badge { min-width:42px; }.holiday-month-nav { grid-template-columns:31px minmax(0,1fr) 31px auto; }.holiday-month-nav .icon-button { min-width:31px; width:31px; }.calendar-today { padding:7px 9px; }.learning-companion { padding:30px; }.learning-companion h2 { font-size:29px; }
}
/* Layered brand cover; all decoration stays outside the teacher's face. */
.dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-3px 0 16px; }
#welcome-name { font-size:12px; font-weight:500; color:#587063; overflow-wrap:anywhere; }
.dashboard-label { display:none; font-size:9px; font-weight:700; letter-spacing:1.7px; color:#70867a; }
.home-top-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.teacher-hero { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-width:0; min-height:660px; overflow:hidden; border-radius:26px; color:#fff; background:#0e2d24; box-shadow:0 25px 55px -24px #0d392766,0 8px 18px -9px #0d392744; }
.teacher-hero:after { content:''; position:absolute; z-index:3; inset:0; border:1px solid #ddf5c92e; border-top-color:#ddf5c961; border-radius:inherit; box-shadow:inset 0 1px 0 #f0ffe52e; pointer-events:none; }
.teacher-photo { position:absolute; z-index:0; width:164%; height:auto; max-width:none; left:50%; top:-14px; transform:translateX(-50%); }
.teacher-photo-shade { position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(0deg,#0a2b21 0%,#0c3025fc 28%,#0e2d24cc 40%,#0e2d2440 54%,transparent 65%); }
.hero-atmosphere { position:absolute; z-index:1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 0 95%,#79ba6840,transparent 54%),radial-gradient(ellipse at 100% 0,#8bc68b35,transparent 35%); }
.hero-orbit { position:absolute; z-index:1; top:28px; right:-125px; width:340px; height:460px; border:1px solid #c4e4b923; border-radius:50%; transform:rotate(28deg); pointer-events:none; }
.hero-orbit:after { content:''; position:absolute; inset:18px; border:1px solid #c4e4b912; border-radius:50%; }
.hero-math { pointer-events:none; position:absolute; z-index:2; right:20px; top:292px; display:flex; align-items:center; gap:10px; padding:9px 13px; border-radius:12px; border:1px solid #e1f5da4a; background:linear-gradient(120deg,#cfe8bd2b,#bde7d00c); box-shadow:inset 0 1px 0 #eaffd91c,0 10px 24px #061e2340; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transform:rotate(-6deg); color:#e8f5df; }
.hero-math span { font:italic 23px Georgia,serif; }.hero-math small { border-left:1px solid #c8e4bd44; padding-left:10px; font-size:8px; line-height:1.5; letter-spacing:1px; }
.teacher-intro { position:relative; z-index:2; width:100%; padding:0 23px 51px; }
.teacher-wordmark { position:absolute; z-index:2; top:22px; left:23px; display:flex; align-items:center; gap:8px; color:#e0eee7; font-size:8px; font-weight:600; letter-spacing:2px; }
.teacher-wordmark>span { width:18px; height:1px; background:#aac8b9; }
.teacher-kicker { display:flex; align-items:center; gap:8px; color:#cfe3d3; font-size:10px; letter-spacing:.7px; }
.teacher-kicker i { width:5px; height:5px; border-radius:50%; background:#d1eca7; box-shadow:0 0 10px #bdea9277; }
.teacher-hero h1 { display:flex; gap:.17em; color:#f8fff3; font-size:53px; line-height:1.18; font-weight:800; letter-spacing:-2.9px; white-space:nowrap; margin:12px 0 9px; }
.hero-brand-the { text-shadow:0 1px 0 #a9b8a4,0 2px 0 #718971,0 3px 0 #59765a,0 7px 16px #001c2077; }
.hero-brand-beer { color:#cee9ac; text-shadow:0 1px 0 #adc68b,0 2px 0 #688a54,0 3px 0 #4e7440,0 4px 0 #395c2c,0 9px 19px #001e1caa; }
.teacher-name { display:flex; align-items:center; gap:9px; font-size:13px; color:#c5d8cb; }.teacher-name strong { color:#fff; font-size:27px; font-weight:500; letter-spacing:-.5px; }
.teacher-message { margin-top:7px; font-size:12px; font-weight:400; line-height:1.9; color:#d8e6db; }.teacher-message br { display:none; }
.teacher-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; margin-top:21px; }
.teacher-actions .primary-button { display:flex; justify-content:space-between; min-height:51px; padding:10px 10px 10px 15px; background:linear-gradient(150deg,#eef7d8,#c7e4a4); border-color:#eff9d7; color:#1b4231; font-size:12px; box-shadow:inset 0 1px 0 #fff9,0 4px 0 #82a86c,0 9px 22px #051e224d; transition:transform .18s,box-shadow .18s; }
.teacher-actions .primary-button:hover { transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff9,0 6px 0 #82a86c,0 12px 25px #051e2266; }
.teacher-actions .primary-button:active { transform:translateY(2px); box-shadow:inset 0 1px 0 #fff9,0 2px 0 #82a86c,0 5px 12px #051e224d; }
.button-arrow { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#1a4b3412; box-shadow:inset 0 1px 3px #31562a16; flex-shrink:0; }.button-arrow svg { width:16px; height:16px; }
.teacher-calendar-link { display:flex; align-items:center; justify-content:center; gap:6px; min-height:51px; padding:10px 12px; border:1px solid #c6dfc859; border-radius:10px; font-size:11px; color:#e6efe9; background:linear-gradient(145deg,#e0f1d918,#e0f1d905); box-shadow:inset 0 1px 0 #e5f5da19,0 4px 12px #001e201f; }
.teacher-calendar-link svg { width:16px; height:16px; }.teacher-calendar-link:hover { background:#ffffff18; }.teacher-hero button:focus-visible { outline-color:#ddf0ca; }
.teacher-full-name { display:flex; align-items:center; gap:9px; margin-top:20px; color:#c1d4c9; font-size:9px; line-height:1.8; }.teacher-full-name>span { width:17px; height:1px; background:#b7cdbd88; }
.study-hub { position:relative; z-index:4; min-width:0; margin:-27px 10px 0; padding:20px 16px 17px; border:1px solid #fff; border-radius:20px; background:linear-gradient(150deg,#ffffff,#f5f9f5); box-shadow:0 18px 35px -23px #174d3866,0 3px 8px #123c2510,inset 0 1px 0 #fff; }
.panel-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 13px; }.panel-heading .section-kicker { display:none; }.panel-heading h2 { color:#244436; font-size:18px; font-weight:600; }.panel-heading p { color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.class-actions { display:grid; gap:10px; margin-top:15px; }
.action-card { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-width:0; min-height:81px; padding:14px 12px; text-align:left; border:1px solid #dfe8dd; border-radius:13px; background:linear-gradient(150deg,#fff,#f6f9f3); box-shadow:0 3px 0 #e0e9df,0 6px 14px -10px #183e2440; transition:transform .18s,box-shadow .18s,border-color .18s; }
.action-card:hover { border-color:#9fbe9d; transform:translateY(-3px); box-shadow:0 4px 0 #dbe7d9,0 12px 24px -12px #183e244d; }.action-card:active { transform:translateY(1px); box-shadow:0 1px 0 #dbe7d9; }
.card-icon { display:grid; place-items:center; width:43px; height:43px; flex-shrink:0; border-radius:12px; color:#306247; background:linear-gradient(145deg,#f2f8ed,#dbead5); box-shadow:inset 0 1px 0 #fff,0 3px 5px #294e2514; }.card-icon svg { width:21px; height:21px; }
.live-card .card-icon { background:linear-gradient(145deg,#3b8159,#16482e); color:#effadb; box-shadow:inset 0 1px 0 #b2d39866,0 4px 8px #16472d29; }
.action-copy { display:block; flex:1; min-width:0; }.action-copy strong { display:block; font-size:13px; font-weight:600; line-height:1.6; }.action-copy small { display:block; margin-top:4px; color:#64796a; font-size:11px; line-height:1.7; overflow-wrap:anywhere; }.action-arrow { width:16px; height:16px; color:#708f7b; }
.hub-note { display:flex; align-items:center; gap:7px; margin-top:16px; color:#687e6f; font-size:10px; }.hub-note svg { width:13px; height:13px; }
@media(max-width:370px) {
  .dashboard-heading { margin-bottom:13px; }#welcome-name { font-size:11px; }
  .teacher-hero { min-height:620px; border-radius:21px; }.teacher-photo { width:175%; }
  .teacher-intro { padding:0 17px 50px; }.teacher-hero h1 { font-size:45px; letter-spacing:-2.5px; }.teacher-name strong { font-size:25px; }.teacher-message { font-size:11px; }
  .teacher-actions { gap:7px; }.teacher-actions .primary-button { padding-left:10px; font-size:11px; }.teacher-calendar-link { font-size:10px; padding:9px; gap:5px; }.teacher-calendar-link svg { width:14px; }
  .teacher-full-name { font-size:8px; gap:6px; }.teacher-wordmark { left:17px; font-size:7px; }.hero-math { right:17px; top:270px; padding:7px 11px; }.hero-math span { font-size:21px; }
  .study-hub { margin-left:7px; margin-right:7px; padding:19px 12px 16px; }.action-card { padding:12px 10px; gap:9px; }.card-icon { width:37px; height:40px; }.action-copy strong { font-size:12px; }.action-copy small { font-size:11px; }.panel-heading h2 { font-size:17px; }
}
@media(min-width:440px) and (max-width:799px) {
  .teacher-hero { min-height:740px; }.teacher-photo { width:min(150%,850px); top:-25px; }
  .teacher-intro { padding:0 32px 63px; }.teacher-hero h1 { font-size:76px; letter-spacing:-4px; }.teacher-name strong { font-size:34px; }
  .teacher-message { font-size:15px; }.teacher-actions { max-width:420px; }.teacher-actions .primary-button { font-size:14px; }.teacher-calendar-link { font-size:12px; }
  .teacher-full-name { font-size:11px; }.teacher-wordmark { left:32px; top:28px; font-size:10px; }.hero-math { right:32px; top:332px; padding:12px 18px; }.hero-math span { font-size:28px; }.hero-orbit { width:480px; height:610px; right:-150px; }
}
@media(min-width:600px) {
  .dashboard-heading { margin-bottom:18px; }.dashboard-label { display:block; }
  .study-hub { margin:-35px 20px 0; padding:24px; border-radius:23px; }.class-actions { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .action-card { flex-direction:column; align-items:flex-start; padding:17px 13px; gap:13px; }.action-arrow { position:absolute; top:26px; right:13px; }.action-copy strong { font-size:13px; }.action-copy small { font-size:11px; }
  .panel-heading h2 { font-size:21px; }.panel-heading p { font-size:12px; }.hub-note { font-size:11px; }
}
@media(min-width:800px) {
  .teacher-hero { min-height:620px; align-items:center; border-radius:30px; }.teacher-photo { width:78%; min-width:650px; left:auto; right:-80px; top:-9px; transform:none; }
  .teacher-photo-shade { background:linear-gradient(90deg,#0e2d24 0%,#0e2d24f5 20%,#0e2d249c 35%,transparent 58%),linear-gradient(0deg,#0c3025 0%,transparent 27%); }
  .hero-atmosphere { background:radial-gradient(ellipse at 0 100%,#84b75440,transparent 56%),radial-gradient(ellipse at 100% 0,#b3d99533,transparent 34%); }
  .hero-orbit { width:390px; height:570px; right:-22px; top:-20px; transform:rotate(26deg); }.hero-math { right:29px; top:auto; bottom:100px; padding:13px 17px; }.hero-math span { font-size:30px; }.hero-math small { font-size:9px; }
  .teacher-intro { width:55%; padding:67px 0 80px 37px; }.teacher-hero h1 { font-size:64px; letter-spacing:-3.5px; margin:15px 0 16px; }.teacher-kicker { font-size:11px; }.teacher-name { font-size:15px; }.teacher-name strong { font-size:34px; }
  .teacher-message { margin-top:13px; font-size:17px; line-height:1.8; }.teacher-message br { display:block; }
  .teacher-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:27px; }.teacher-actions .primary-button { min-width:183px; font-size:13px; }.teacher-calendar-link { font-size:11px; padding:10px 12px; }
  .teacher-full-name { font-size:10px; margin-top:25px; }.teacher-wordmark { top:29px; left:37px; font-size:9px; }
}
@media(min-width:1280px) {
  .teacher-hero { min-height:650px; }.teacher-photo { width:70%; min-width:0; right:-12px; top:-12px; }
  .teacher-photo-shade { background:linear-gradient(90deg,#0e2d24 0%,#0e2d24f5 18%,#0e2d2470 37%,transparent 56%),linear-gradient(0deg,#0c3025 0%,transparent 25%); }
  .teacher-intro { width:51%; padding-left:46px; }.teacher-hero h1 { font-size:78px; letter-spacing:-4.5px; }.teacher-name strong { font-size:40px; }.teacher-message { font-size:19px; }.teacher-kicker { font-size:12px; }
  .teacher-wordmark { left:46px; top:32px; font-size:10px; }.teacher-full-name { font-size:11px; }
  .hero-orbit { width:530px; height:640px; right:0; top:-30px; }.hero-math { right:39px; bottom:101px; }
  .study-hub { margin:-43px 26px 0; padding:26px; }.class-actions { gap:15px; }.action-card { flex-direction:row; align-items:center; min-height:98px; padding:18px 14px; gap:12px; }
  .action-arrow { position:static; }.action-copy strong { font-size:13px; }.action-copy small { font-size:11px; }
}
@media(min-width:1440px) { .teacher-hero h1 { font-size:89px; letter-spacing:-5px; }.action-copy strong { font-size:13px; }.action-copy small { font-size:11px; } }
@media(min-width:1660px) {
  .teacher-hero { min-height:720px; }.teacher-photo { width:64%; right:8px; top:-15px; }.teacher-intro { padding-left:62px; width:50%; }
  .teacher-hero h1 { font-size:110px; letter-spacing:-6px; }.teacher-name strong { font-size:47px; }.teacher-name { font-size:19px; }.teacher-message { font-size:23px; }.teacher-kicker { font-size:13px; }.teacher-wordmark { left:62px; top:36px; }
  .teacher-actions { margin-top:31px; }.teacher-actions .primary-button { min-width:211px; min-height:55px; font-size:14px; }.teacher-calendar-link { min-height:55px; font-size:12px; padding:12px 17px; }.teacher-full-name { font-size:12px; margin-top:28px; }
  .hero-orbit { width:640px; height:710px; right:40px; }.hero-math { right:55px; bottom:118px; padding:16px 22px; }.hero-math span { font-size:38px; }
  .study-hub { margin-left:35px; margin-right:35px; padding:29px; }.action-card { padding:24px; min-height:112px; gap:17px; }.action-copy strong { font-size:15px; }.action-copy small { font-size:12px; }
}

@media(max-height:760px) and (min-width:1100px) { .sidebar-install { padding:15px; }.sidebar-install-icon { display:none; }.sidebar-bottom { padding-top:24px; }.sidebar-teacher { margin-top:16px; padding-top:16px; }.nav-label { margin-top:29px; } }
@media(max-height:500px) and (orientation:landscape) { .player-dialog { max-height:calc(var(--visual-height,100dvh) - 16px); }.player-top { padding:9px 14px; }.player-top h2 { font-size:14px; }.player-top p { font-size:11px; }.player-frame { max-height:calc(var(--visual-height,100dvh) - 185px); }.player-links { padding:9px 14px 0; }.player-links a { min-height:44px; padding:8px 13px; font-size:12px; }.player-dialog .install-note { margin:7px 14px 11px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

@media(max-width:1099px) { #main,.app-header { padding-left:max(var(--page-gutter),env(safe-area-inset-left,0px)); padding-right:max(var(--page-gutter),env(safe-area-inset-right,0px)); }.site-footer { margin-left:max(var(--page-gutter),env(safe-area-inset-left,0px)); margin-right:max(var(--page-gutter),env(safe-area-inset-right,0px)); } }

/* Public resources and the teacher's publishing desk. */
.public-media-section,.media-manager {margin:28px 0;padding:24px;border:1px solid var(--line,#dce6e0);border-radius:24px;background:#fff;box-shadow:0 5px 0 #e5ece7,0 18px 36px #173d2810;min-width:0;scroll-margin-top:20px}
.media-section-heading {display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.media-section-heading h2 {margin:4px 0;font-size:clamp(23px,3vw,30px);line-height:1.4;color:#103e30}
.media-section-heading p,.media-status {font-size:14px;color:#62776b;margin:6px 0;line-height:1.7}
.media-heading-actions {display:flex;gap:10px;align-items:center;flex-shrink:0}
.media-status {margin:18px 0 14px}.media-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.media-card {min-width:0;overflow:hidden;border:1px solid #e0e8e3;border-radius:18px;background:#fff;box-shadow:0 5px 14px #163e2509;display:flex;flex-direction:column}
.media-cover {position:relative;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(ellipse at 80% 10%,#dcebc0,transparent 65%),linear-gradient(140deg,#e8f3eb,#d2e4dc);display:grid;place-items:center}
.media-cover img {position:absolute;width:100%;height:100%;object-fit:contain;background:#f2f6f2}
.media-cover-fallback {font:italic 60px Georgia,serif;color:#50846b;opacity:.7}
.media-card-body {padding:18px;display:flex;flex-direction:column;flex:1;gap:10px}
.media-tag {align-self:flex-start;font-size:11px;font-weight:700;color:#24634a;background:#edf6ef;padding:4px 9px;border-radius:6px}.media-tag.is-draft {background:#f3f0e8;color:#766335}
.media-card h3 {font-size:18px;line-height:1.6;margin:0;color:#153e30;overflow-wrap:anywhere}
.media-card p {font-size:14px;color:#66756c;margin:0;white-space:pre-line;overflow-wrap:anywhere;line-height:1.7;max-height:9em;overflow:auto}
.media-card-actions {display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;margin-top:auto}
.media-open,.media-edit {min-height:44px;display:inline-flex;align-items:center;color:#176044;font-weight:700;text-decoration:none;font-size:14px}
.media-edit {padding:0 16px;border:1px solid #dce7df;border-radius:10px;background:#f5f8f5;cursor:pointer}
.media-open:hover {text-decoration:underline}.media-pagination {margin-top:20px}
.media-editor {width:min(760px,calc(100% - 28px));max-width:760px}.media-editor fieldset {border:0;margin:0;padding:0;min-width:0}
.media-editor label {display:block;font-weight:600;font-size:14px;margin:18px 0 8px;color:#244b39}.media-editor label span {font-weight:400}
.media-editor input:not([type=checkbox]),.media-editor textarea {width:100%;min-width:0;border:1px solid #ccdcd1;border-radius:10px;background:#fafcf9;color:#193f2e;padding:12px;font:inherit;font-size:16px}
.media-editor textarea {resize:vertical;min-height:90px}.media-editor input[type=file] {font-size:13px;padding:8px}.media-editor input::file-selector-button {border:0;border-radius:6px;padding:8px 10px;background:#e2ece5;color:#214b37;margin-right:8px}
.media-cover-editor {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:20px;margin:22px 0}.media-cover-editor .media-cover {border-radius:14px;border:1px solid #dce7df}.media-cover-editor label:first-child {margin-top:0}
.media-editor small {display:block;font-size:12px;font-weight:400;line-height:1.7;color:#65776c;margin-top:7px}.media-editor #media-cover-status {font-size:13px;color:#286747}
.media-editor .media-publish-choice {display:flex;gap:12px;align-items:flex-start;padding:16px;background:#edf5ef;border:1px solid #dae9de;border-radius:12px;margin:18px 0}
.media-publish-choice input {width:22px;height:22px;accent-color:#165537;flex-shrink:0;margin-top:2px}.media-publish-choice strong {font-weight:700}.media-editor #media-save {width:100%;margin:12px 0 8px;min-height:50px}
@media (max-width:899px) {.media-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px) {.public-media-section,.media-manager {padding:18px 14px;border-radius:20px}.media-grid {grid-template-columns:minmax(0,1fr);gap:16px}.media-section-heading {gap:10px}.media-section-heading p {font-size:13px}.media-cover {aspect-ratio:16/9}.media-cover-editor {grid-template-columns:minmax(0,1fr);gap:16px}.media-cover-editor .media-cover {max-width:100%;max-height:220px}.media-editor .sheet-body {padding:0 18px 22px}.media-editor .dialog-top {padding:18px}.media-editor {border-radius:20px}.media-heading-actions .primary-button {min-height:44px;padding:10px 14px}}

.media-pagination .page-numbers {flex-wrap:wrap;justify-content:center;min-width:0}
.media-pagination .pagination-controls {flex-wrap:wrap}
.media-section-heading > div:first-child {flex:1;min-width:0}

/* Grade resources reuse the public library cards and editor. */
.class-media {margin:0 0 28px;padding:24px;min-width:0}
.class-media .media-section-heading h2 {font-size:clamp(20px,2.4vw,27px)}
#class-media-grade, #media-editor-context {overflow-wrap:anywhere}
@media(max-width:600px){.class-media {padding:18px 14px}.class-media .media-heading-actions {width:100%;justify-content:flex-end}}

/* 1.10: clear type, confident actions and consistent elevated surfaces. */
:root {
  --forest:#103e32; --green:#146548; --ink:#172f28; --muted:#52685f;
  --cream:#f2f5f3; --border:#cddbd3; --soft:#eaf3ee; --radius:22px;
  --surface-shadow:0 12px 32px -20px #123d3440,0 2px 5px #123d3408;
}
body {background:radial-gradient(ellipse at 95% 3%,#dcebdd 0,transparent 38%),var(--cream)}
button,input,select,textarea {font-family:var(--font)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid #248960;outline-offset:3px}
.section-kicker {font-size:11px;color:#456358;font-weight:800;letter-spacing:1.5px}
.primary-button,.secondary-button,.refresh-button {min-height:48px;border-radius:13px;font-size:15px;font-weight:700;padding:11px 18px}
.primary-button {background:linear-gradient(155deg,#1b5a43,#103c30);border:1px solid #154a38;box-shadow:0 4px 0 #082d22,0 7px 16px #1346331b;color:#fff}
.primary-button:active {transform:translateY(2px);box-shadow:0 2px 0 #082d22}
.secondary-button,.refresh-button {border-color:#bfd1c5;background:#fff;color:#224e3d;box-shadow:0 2px 3px #163e3406}
.icon-button {border:1px solid #cddbd3;background:#fff;color:#315648;border-radius:12px}
.icon-button:hover,.secondary-button:hover,.refresh-button:hover {border-color:#8bad9a;background:#eaf3ee}
.brand strong {font-size:23px;letter-spacing:-.8px}.brand small {color:#4c675c;font-size:9px}
#welcome-name {font-size:15px;color:#415c4f}.header-context,.header-date {color:#4d6559}
.app-header {background:#ffffffed;border-bottom-color:#d3dfd7}
.profile-button {font-size:14px}.profile-avatar {background:#e0eee5;color:#1b593e;border:1px solid #c3d9cc}
.sidebar-nav button {font-size:15px;color:#4a6256;border:1px solid transparent;border-radius:13px}
.sidebar-nav button.active {background:#143f32;color:#fff;box-shadow:0 6px 12px #163e341c}
.sidebar-nav button.active i {background:#a8e2bd}.sidebar-nav button:hover:not(.active) {background:#eaf3ee}
.nav-label {font-size:11px;color:#5d7367;letter-spacing:1px}.sidebar-teacher strong {font-size:14px}
.sidebar-install {background:#eff5f0;border-color:#d3dfd5}.sidebar-install p,.sidebar-install strong {color:#375642}
.dashboard-heading {margin-bottom:20px}.dashboard-label {color:#496751;font-size:10px}
.teacher-kicker {font-size:12px}.teacher-message {font-size:15px;color:#edf5ee}.teacher-full-name {color:#d8e7dc}
.teacher-actions .primary-button {font-size:16px;border-radius:14px;box-shadow:0 4px 0 #6b9054,0 10px 20px #071b2544}
.teacher-calendar-link {font-size:14px;color:#f2f7f2;border-color:#adc6b276}
.study-hub {border-color:#cbdacf;box-shadow:0 6px 0 #e0e9e2,0 20px 38px -24px #123e324d}
.panel-heading h2 {font-size:24px;font-weight:700;color:#183c2d}.panel-heading p {font-size:14px;color:#52675b}
.action-card {background:#fff;border:1px solid #c9dacd;border-radius:18px;box-shadow:0 3px 0 #e0e9e2;padding:20px;gap:14px}
.action-card .card-icon {width:46px;height:46px;flex-shrink:0;border:1px solid #bfd5c4;background:#e5f1e8;color:#185539;border-radius:14px}
.live-card .card-icon {background:#173f32;color:#d3f1ca;border-color:#173f32}
.worksheet-card .card-icon {background:#f5eedb;color:#7b591a;border-color:#e6d7ab}
.action-copy strong {font-size:16px;font-weight:700;color:#163d2d}.action-copy small {font-size:13px;color:#50675a}
.action-arrow {color:#365e44}.hub-note {font-size:13px;color:#496353}
.announcement {border-color:#c7dbc9;background:#e8f2e7;border-radius:18px}.announcement strong {font-size:14px;color:#284d34}.announcement p {font-size:14px;color:#3d5b46}
.public-media-section,.media-manager,.holiday-calendar {border-color:#cddbd2;border-radius:24px;box-shadow:var(--surface-shadow);background:#fff}
.media-section-heading h2,.holiday-heading h2 {font-size:clamp(23px,2.6vw,30px);font-weight:700;letter-spacing:-.4px}
.media-section-heading p,.media-status,.holiday-heading p {font-size:14px;color:#52665a}
.media-card,.lesson-card {border-color:#cadacf;border-radius:20px;box-shadow:0 4px 0 #e4ebe5,0 10px 24px -18px #123e3245;transition:transform .18s,box-shadow .18s,border-color .18s}
.media-card h3 {font-size:19px;font-weight:700;color:#143d2c}.media-card p {font-size:15px;color:#4f6658}.media-card-body {padding:20px}
.media-tag {background:#e3f0e7;color:#215b3b;border:1px solid #cce0d1;font-size:12px;border-radius:8px}
.media-open {background:#164b35;color:#fff;justify-content:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:12px;flex:1;box-shadow:0 2px 0 #0a3121}
.media-open:hover {text-decoration:none;background:#216b49}.media-edit {min-height:46px;background:#f1f6f2;border-color:#c2d5c8;color:#29593c}
.page-intro h1 {font-size:32px;font-weight:700}.page-intro p {font-size:15px;color:#53675c}
.library-switch {padding:5px;background:#e4ece6;border:1px solid #cfddd3;border-radius:15px;gap:5px}
.library-switch button {flex:1;border-radius:11px;font-size:15px;color:#49614f;min-height:48px}
.library-switch button.active {background:#fff;color:#15462f;box-shadow:0 2px 7px #153d2520}.library-switch button.active:after {display:none}
.class-label {font-size:16px}.admin-select {border-radius:16px;padding:18px}.admin-select label {font-size:14px;color:#244a34}
.search-field,.search-tools select,.admin-select select {border-color:#bdcfc3;border-radius:12px}.search-field input::placeholder {color:#5e7465;font-size:14px}
.library-status,.lesson-count {font-size:14px}.lesson-date,.lesson-meta {font-size:13px;color:#536a5c}
.lesson-title {font-size:18px;font-weight:700;color:#183f2b}.lesson-info {padding:19px}.lesson-actions button {background:#164b35;color:white;border-radius:11px;padding:9px 13px;font-size:14px}
.lesson-actions a {color:#215c3e;font-size:14px}.lesson-badge {font-size:12px}.document-card {border:1px solid #c5d8ca;border-radius:17px;box-shadow:0 3px 0 #e2ebe5}.document-card strong {font-size:17px}.document-card small {font-size:13px;color:#576e5d}
.page-number,.page-direction {border-color:#c0d2c7;font-size:14px}.page-number[aria-current=page] {background:#164b35;border-color:#164b35;color:#fff;box-shadow:0 3px 0 #092e1d}
.bottom-nav {border-top-color:#cad9cd}.bottom-nav button {color:#4a6652;font-size:12px}.bottom-nav button.active {color:#12472b;font-weight:700}.bottom-nav button.active svg {stroke-width:2.2}
.account-card,.admin-tools {border-color:#cbdccf;border-radius:22px}.account-card h2 {font-weight:700}.account-card p,.admin-tools p {font-size:15px;color:#4c6653}.document-shortcut strong {font-size:15px}.document-shortcut small {font-size:13px;color:#546c5c}
.sheet {border:1px solid #c9dacf;box-shadow:0 24px 80px #0c302c38}.sheet-body h2 {font-size:27px;font-weight:700}.dialog-description {font-size:15px;color:#50675a}.sheet label {font-size:15px;font-weight:600;color:#244c35}.form-field {border-color:#b9cec0}.sheet .primary-button {min-height:50px}
.media-editor small,.login-help,.install-note,.account-note {color:#536d5e}.learning-companion {background:linear-gradient(140deg,#e3efdf,#f0f5e9);border-color:#c5d7c0}.learning-companion h2 {color:#284e30;font-weight:600}.learning-quote {color:#466346;font-size:16px}
@media(hover:hover) {.action-card:hover,.lesson-card:hover,.media-card:hover,.document-card:hover {border-color:#86ad92;transform:translateY(-3px);box-shadow:0 6px 0 #dce8dd,0 16px 25px -17px #163e325c}}

/* Calendar: clear daily markers, live state and an accessible admin sheet. */
.holiday-heading {flex-wrap:wrap;gap:14px;margin-bottom:18px}.holiday-heading>.holiday-heading-actions {display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.calendar-sync-bar {display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:12px 14px;background:#f0f6f2;border:1px solid #d8e6dc;border-radius:12px;margin-bottom:20px;font-size:12px;color:#536b5b}
.calendar-sync {display:flex;align-items:center;gap:8px;font-weight:600;color:#236140}.calendar-sync:before {content:'';width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#278653;box-shadow:0 0 0 4px #27865312}
.calendar-sync[data-state=offline] {color:#87511b}.calendar-sync[data-state=offline]:before {background:#b77c36}.calendar-sync[data-state=loading]:before {background:#718674}
.calendar-admin-note {margin:0 0 18px;font-size:13px;line-height:1.8;color:#506754}
.holiday-month-nav {grid-template-columns:44px minmax(0,1fr) 44px auto;gap:8px;margin-bottom:16px}.holiday-month-nav h3 {font-size:18px;font-weight:700;color:#244834}.holiday-month-nav .icon-button {width:44px;min-width:44px;background:#fff;padding:11px}
.calendar-today,.calendar-all {font-size:13px;color:#24593a;border-color:#c0d5c6;background:#f1f6f2}.calendar-today:disabled {color:#5c7062;background:#edf3ed}
.holiday-weekdays span {font-size:13px;font-weight:600;color:#5c705f}.holiday-weekdays span:first-child {color:#a05d2c}
.holiday-days {gap:5px}.holiday-day {font-size:15px;font-weight:600;border-radius:12px;min-height:46px;color:#294c34}.holiday-day.is-holiday {background:#d9eddf;color:#174b2c;border-color:#b9d7c2}.holiday-day.is-holiday:after {width:5px;height:3px;bottom:5px}.holiday-day.is-today {border:2px solid #176440;background:#f0f7ec}.holiday-day.is-holiday.is-today {background:#d9eddf}
.holiday-day.is-draft {border:1px dashed #c8b387;color:#82602c;background:#faf5e9}.holiday-day[aria-pressed=true],.holiday-day.is-holiday:hover {background:#185b39;color:white;border-color:#185b39}
.holiday-legend {font-size:12px;color:#526a58}.holiday-legend small {font-size:11px;color:#5b715d}.holiday-agenda h3 {font-size:17px;font-weight:700;color:#244a32}.holiday-status {font-size:13px;color:#536d5a}
.holiday-events {max-height:390px;gap:12px}.holiday-event {padding:16px;gap:14px;border-color:#cbded1;border-radius:15px;background:#fbfdfb}.holiday-date-badge {min-width:49px;min-height:60px;background:#e1eee3;color:#215937;border:1px solid #c3d8c7;border-radius:12px}.holiday-date-badge strong {font-size:24px}.holiday-date-badge span {font-size:12px}
.holiday-event-copy {flex:1}.holiday-event h4 {font-size:16px;font-weight:700;color:#214b33}.holiday-event p {font-size:14px;color:#506b57}.holiday-draft {border-style:dashed;background:#fcfaf4}.holiday-event-actions {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.calendar-edit {border:1px solid #b8d0c0;border-radius:10px;background:#eef5ef;color:#21573a;padding:8px 14px;font-size:13px;font-weight:700;min-height:44px}.calendar-edit:hover {background:#dcecdf}
.calendar-state {font-size:11px;font-weight:600;color:#286442;background:#e4f1e7;padding:3px 8px;border-radius:6px}.calendar-state.is-hidden {color:#815e2d;background:#f2e9d6}
.calendar-message {font-size:14px;color:#536c5c;border-color:#c9dbce;background:#f4f8f4;padding:20px}
.calendar-editor {width:min(560px,calc(100% - 24px));max-width:560px}.calendar-editor fieldset {border:0;padding:0;margin:0;min-width:0}.calendar-editor label {display:block;margin:18px 0 7px}.calendar-editor label span {font-weight:400}
.calendar-editor input:not([type=checkbox]),.calendar-editor textarea {width:100%;min-width:0;max-width:100%;padding:12px 14px;border:1px solid #b8cec1;border-radius:12px;background:#fafcfb;font:16px/1.6 var(--font);color:#203f2b}.calendar-editor textarea {min-height:100px;resize:vertical}
.calendar-editor .media-publish-choice {display:flex;gap:12px;padding:15px;border:1px solid #c6ddcc;background:#eef6ef;border-radius:13px;margin:20px 0}.calendar-editor small {display:block;color:#536d5d;font-size:13px;line-height:1.8;margin-top:5px}.calendar-editor .media-publish-choice input {min-height:22px}
#holiday-save {width:100%}.calendar-save-note {text-align:center;font-size:12px;color:#5b7161;line-height:1.8;margin-top:15px}
@media(min-width:720px) {.home-bottom-grid {grid-template-columns:minmax(0,1fr)}.holiday-layout {grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:24px}.holiday-agenda {border-top:0;border-left:1px solid #d4e2d7;padding:0 0 0 24px}.learning-companion {display:none}.holiday-calendar {padding:28px}.teacher-message {font-size:19px}.teacher-actions .primary-button {font-size:16px}}
@media(min-width:1100px) {.app-sidebar {width:242px}.action-copy strong {font-size:15px}.action-copy small {font-size:13px}.sidebar-nav button {font-size:14px}.holiday-calendar {padding:30px}.holiday-layout {gap:32px}.holiday-agenda {padding-left:32px}.holiday-day {min-height:50px}.teacher-message {font-size:21px}}
@media(min-width:1440px) {.action-copy strong {font-size:17px}.teacher-message {font-size:24px}.holiday-day {min-height:54px}.teacher-kicker {font-size:14px}}
@media(max-width:599px) {.holiday-heading>div:first-of-type {flex:1 1 150px}.holiday-heading-actions {margin-left:auto}.holiday-heading-actions .primary-button {font-size:14px}.holiday-calendar {padding:20px 14px}.holiday-month-nav {grid-template-columns:36px minmax(0,1fr) 36px;gap:4px}.holiday-month-nav .icon-button {min-width:36px;width:36px;padding:9px}.holiday-month-nav h3 {font-size:17px}.calendar-today {grid-column:1/-1;justify-self:center;min-height:36px;padding:4px 14px;margin-top:5px}.holiday-days {gap:3px}.holiday-day {font-size:14px;border-radius:9px;min-height:42px}.holiday-event {padding:13px;gap:10px}.holiday-event h4 {font-size:15px}.holiday-event p {font-size:14px}.holiday-legend {gap:9px}.holiday-legend small {display:none}.calendar-sync-bar {padding:11px;font-size:11px;gap:6px}.calendar-sync {font-size:12px}.calendar-editor .sheet-body {padding:0 20px 24px}.media-card-body {padding:18px}.action-copy strong {font-size:16px}.page-intro h1 {font-size:28px}.public-media-section {padding:20px 14px}.teacher-actions .primary-button {font-size:15px}.refresh-button {font-size:13px;padding:9px 12px}.learning-companion h2 {font-size:25px}.library-switch button {font-size:14px;padding:10px}}
/* Decorative portrait layers must never scroll when a child control receives focus. */
@supports (overflow:clip) {.teacher-hero {overflow:clip}}
@media(min-width:1100px) {body {padding-left:242px}}
@media(max-width:599px) {.holiday-day {min-height:44px}}

/* 1.11 — forest brand with purposeful indigo, blue and warm amber accents. */
:root {--accent-blue:#315fc1;--accent-violet:#6c4cb5;--accent-amber:#a95b20;--danger:#aa343e;--muted:#586779;--border:#dce3eb}
body {background:radial-gradient(ellipse at 93% 2%,#e8e6f8 0,transparent 37%),radial-gradient(ellipse at 8% 38%,#eaf1fb 0,transparent 40%),#f6f7fb}
.app-header {border-bottom-color:#dbe2ee;background:#ffffffed}
.brand-dot {color:#7b5bc7}.dashboard-label {color:#6a54a3}.dashboard-heading {color:#46556b}
.study-hub {background:linear-gradient(155deg,#fff 65%,#f2effc);border-color:#e0dcee}
.panel-heading .section-kicker {color:#6c4cb5}.hub-note {background:#f1eef9;color:#61517f;border-color:#e1dcef}.hub-note p {color:#61517f}
.action-card {border-left-width:4px;transition:transform .18s,box-shadow .18s}
.action-card.live-card {background:linear-gradient(110deg,#fff4e8,#fff);border-color:#f0d2b5;border-left-color:#d79040}
.action-card.live-card .card-icon {background:#ffdfb5;color:#915019;border-color:#ecc895;box-shadow:0 4px 8px #ba7e2520}
.action-card.replay-card {background:linear-gradient(110deg,#eef2ff,#fff);border-color:#cfd9f4;border-left-color:#597bd3}
.action-card.replay-card .card-icon {background:#dce6ff;color:#3156aa;border-color:#c4d3f6;box-shadow:0 4px 8px #355fc220}
.action-card.worksheet-card {background:linear-gradient(110deg,#f5efff,#fff);border-color:#ddd0ef;border-left-color:#9470c7}
.action-card.worksheet-card .card-icon {background:#e9dcfa;color:#71509e;border-color:#d5bcec;box-shadow:0 4px 8px #6d439b20}
.action-card .action-copy strong {color:#25354b}.action-card .action-copy small {color:#59657a}
.announcement {background:linear-gradient(115deg,#fff3df,#fffaf3);border-color:#efd6b0}.announcement-icon {background:#f8dfb5;color:#96581e}.announcement strong {color:#88541f}.announcement p {color:#725d42}.announcement-tag {background:#f6e5cb;color:#815019}
#public-media {border-top:4px solid #6787cf;background:linear-gradient(170deg,#f4f7ff 0,#fff 210px)}
#public-media .section-kicker {color:#3e63ae}.media-tag {color:#4260a1;background:#eef2ff}.media-tag.is-draft {color:#805824;background:#fff2dc}
.media-card {border-color:#dce2ee;box-shadow:0 12px 22px -18px #374d7c66,0 2px 4px #31496808}.media-card:hover {border-color:#9cacd0;box-shadow:0 14px 24px -16px #3e529f55}
.media-card h3 {color:#27394f}.media-card-body>p {color:#57657a}.media-open {background:#315caa;color:#fff;border:1px solid #315caa;box-shadow:0 3px 0 #214582}.media-open:hover {background:#244b92}
.class-media {border-top:4px solid #9572c9;background:linear-gradient(155deg,#f7f3ff,#fff 220px)}.class-media .section-kicker {color:#7554a8}
.class-media .media-open {background:#7354a8;border-color:#7354a8;box-shadow:0 3px 0 #513782}
.holiday-calendar {border-top:4px solid #d3974c;background:linear-gradient(160deg,#fffbf4,#fff 220px)}.holiday-calendar .section-kicker {color:#966627}
.holiday-day.is-holiday {background:#ffebcb;border-color:#e8c48f;color:#754913;box-shadow:0 2px 0 #ecd1a6}.holiday-day.is-holiday:after {background:#a06925}.holiday-date-badge {background:#fff0d9;border-color:#edd3ab;color:#805119}.holiday-event {background:#fffefa;border-color:#e8ddca}
.library-switch button[data-view=lessons].active {color:#3159ac;background:#eaf0ff}.library-switch button[data-view=documents].active {color:#7453a6;background:#f2eafb}
#app[data-view=documents] .document-card {border-left:4px solid #ad8bd1}.lesson-card {border-left:4px solid #8aa3d8}
.admin-tools {background:linear-gradient(145deg,#edf3ff,#fff);border-color:#d1dcf2}.admin-tools .section-kicker {color:#4566a6}.account-card {border-top:4px solid #8170b9}
.sidebar-nav button[data-view=lessons]:not(.active) svg {color:#456fc2}.sidebar-nav button[data-view=documents]:not(.active) svg {color:#8760b0}.sidebar-nav button[data-action=calendar] svg {color:#a66c2b}
.logout-button,.danger-button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid #d7a1a8;border-radius:12px;background:#fff0f1;color:#9b2f3c;font-size:14px;font-weight:700;white-space:nowrap;transition:background .15s,box-shadow .15s}
.logout-button:hover {background:#fbdde1;box-shadow:0 3px 10px #9b2f3c18}.logout-button svg {width:18px;height:18px}.header-logout {order:5}.account-logout {display:flex;width:100%;margin-top:24px;background:#a63743;color:white;border-color:#a63743;min-height:50px}.account-logout:hover {background:#852936;color:white}
.media-card-actions {display:grid;grid-template-columns:1fr 1fr;gap:9px}.media-card-actions>.media-open {grid-column:1/-1}.media-card-actions>.media-restore {grid-column:1/-1}
.media-delete,.media-restore,.media-edit {min-height:44px;border-radius:10px;font-size:14px;font-weight:600;padding:8px 12px;text-align:center}
.media-delete {background:#fff1f2;border:1px solid #e1adb4;color:#a23240}.media-delete:hover {background:#fce0e4}.media-edit {background:#fff;border:1px solid #b9c9dd;color:#345789}.media-restore {background:#edf6f1;border:1px solid #adcebd;color:#235e40}
.media-filter {display:flex;gap:5px;max-width:360px;border:1px solid #d7deeb;border-radius:12px;background:#eef1f7;padding:4px;margin:18px 0}.media-filter button {flex:1;min-height:42px;font-size:14px;font-weight:600;border-radius:9px;color:#59677c;padding:7px 14px}.media-filter button[aria-pressed=true] {background:white;color:#29496e;box-shadow:0 2px 6px #2d426318}.media-filter button[data-media-filter=trash][aria-pressed=true] {color:#9b3742}
.media-delete-dialog {max-width:460px;border:1px solid #e5d8dc;border-radius:24px}.media-delete-dialog .sheet-body {padding:30px}.media-delete-dialog h2 {font-size:25px;margin-top:8px}.delete-item-name {font-size:18px;font-weight:700;color:#283b50;margin:18px 0 6px;overflow-wrap:anywhere}.media-delete-dialog p {overflow-wrap:anywhere}.media-delete-dialog #media-delete-description {color:#56657a;font-size:15px;margin-top:15px}.delete-dialog-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.danger-button {color:white;background:#a63743;border-color:#a63743}.danger-button:hover {background:#862a35}
.public-media-manage {color:#38599a;border-color:#b4c6e4;background:#f4f7ff}
@media(max-width:599px) {.signed-in .header-install {display:none}.header-actions {gap:7px}.header-logout {font-size:12px;padding:9px 10px;gap:5px}.header-logout svg {width:16px;height:16px}.signed-in .mobile-brand .brand-icon {display:none}.signed-in .mobile-brand strong {font-size:18px}.signed-in .mobile-brand small {font-size:8px;letter-spacing:1.5px}.signed-in .app-header {gap:8px}.media-delete-dialog {width:calc(100% - 24px);border-radius:22px;margin:auto}.media-delete-dialog .sheet-body {padding:24px 20px}.media-filter {max-width:none}.media-heading-actions {flex-wrap:wrap}.public-media-manage {font-size:13px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce) {.action-card {transition:none}}
/* Learning access and device preferences */
.access-manager,.app-preferences{margin-top:24px;padding:28px;border:1px solid #dce4e1;border-radius:24px;background:#fff;box-shadow:0 10px 35px #143c3010}
.access-manager h2,.app-preferences h2{margin:8px 0;font-size:1.45rem}.access-manager p,.app-preferences p{color:#52645e;line-height:1.7}
.access-selectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 12px}.access-selectors label,#access-fields label{display:grid;gap:8px;font-weight:600;min-width:0}
.access-selectors input,.access-selectors select,#access-fields input:not([type=checkbox]),#access-fields textarea{width:100%;min-width:0;padding:12px;border:1px solid #bccdc6;border-radius:12px;background:#fff;color:#183b30;font:inherit}
.access-rules{display:grid;gap:12px;margin-top:20px}.access-rule{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:1px solid #dce4e1;border-radius:16px;background:#f8faf9}.access-rule h3{margin:8px 0;font-size:1rem}.access-rule p{margin:0;overflow-wrap:anywhere}.access-badge{font-size:.75rem;padding:4px 10px;border-radius:20px;background:#e1f3e9;color:#126241}.access-badge.blocked{background:#fff0df;color:#894611}.access-help{font-size:.82rem;line-height:1.8;color:#586d64}.access-dates{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}#access-fields{border:0;padding:0;margin:20px 0}#access-fields .access-checkbox{display:flex;align-items:center;margin-top:20px;gap:12px}#access-active{width:22px;height:22px;accent-color:#166744}.access-actions{display:flex;justify-content:flex-end;gap:10px}.access-empty{padding:20px;background:#f2f7f4;border-radius:12px}.app-version-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}.logo-options{display:flex;gap:12px;margin:20px 0}.logo-options button{display:grid;justify-items:center;gap:10px;padding:16px;border:2px solid #d7e0dc;border-radius:18px;background:#fff;min-width:120px;color:#233d32;font:inherit}.logo-options button[aria-pressed=true]{border-color:#147b53;background:#edf8f2;box-shadow:0 0 0 3px #15936114}.logo-options img,.icon-guide-preview{border-radius:16px}.update-banner{position:fixed;z-index:90;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(640px,calc(100% - 24px));background:#fff;border:1px solid #abcfbc;box-shadow:0 12px 50px #103e3233;border-radius:20px;padding:20px;display:flex;align-items:center;gap:18px}.update-banner p{font-size:.82rem;margin:5px 0 0;color:#53685c}.update-banner strong{color:#134731}.update-banner button{flex-shrink:0}.document-card[type=button]{width:100%;font:inherit;text-align:left}.sheet-body{padding:28px;position:relative}.sheet-body h2{padding-right:24px}.sheet-body p{line-height:1.8}.sheet-body .close-button{position:absolute;top:12px;right:12px}.icon-guide-preview{display:block;margin:16px auto}
@media(max-width:700px){.access-selectors{grid-template-columns:1fr}.access-manager,.app-preferences{padding:20px;border-radius:20px}.access-rule{align-items:flex-start;flex-direction:column}.access-dates{grid-template-columns:1fr}.update-banner{align-items:stretch;flex-direction:column;gap:12px;padding:16px}.update-banner button{width:100%}.access-actions button{flex:1}.sheet-body{padding:22px}.access-manager .media-section-heading{flex-wrap:wrap}}
.sheet-body .close-button{width:44px;height:44px;border:1px solid #d4e0d9;border-radius:50%;background:#f3f8f5;color:#173e30;font-size:24px;display:grid;place-items:center}