/* Lessync · Пастельный воздух. UI surfaces only; authored content retains its colors. */
:root {
  --primary-hover: #3d627a; --button-shadow: #4c748e14; --focus-ring: #4e939f;
  --tone-ink: #3d627a; --sidebar-border: #b5cdca; --sidebar-shadow-color: #294d681b;
  color-scheme: light;
  --bg: #f4f8f8;
  --panel: #ffffff;
  --text: #2e4048;
  --muted: #687987;
  --accent: #4c748e;
  --border: #dce7e5;
  --ui-font: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-side: #edf6f7;
  --ui-soft: #f0f6f5;
  --ui-border: #e0e9e6;
  --ui-shadow: 0 5px 24px #355b5510;
  --ui-radius: 24px;
  --air: #99cdd8;
  --air-soft: #dceff2;
  --mint: #daebe3;
  --peach: #f3c3b2;
  --peach-soft: #fde8d3;
  --sage: #cfd6c4;
  font-family: var(--ui-font);
  color: var(--text);
  background: var(--bg);
}

/* Three light palettes; semantic success/error colors remain unchanged. */
:root[data-color-theme=warm] {
  --bg: #f6f5ef; --panel: #fffdf8; --text: #302f2b; --muted: #6e7166;
  --accent: #596b52; --primary-hover: #45553f; --border: #d5dccb;
  --ui-side: #e7e9df; --ui-soft: #f0f0e7; --ui-border: #dce0d1;
  --ui-shadow: 0 5px 24px #45503912; --button-shadow: #45503918;
  --air: #b6c69d; --air-soft: #e1e8d5; --mint: #e6e9d8;
  --peach: #c98749; --peach-soft: #eedcc6; --sage: #c5ccb5;
  --tone-ink: #45553f; --focus-ring: #7f935e; --sidebar-border: #b8c1aa; --sidebar-shadow-color: #4c573d22;
}
:root[data-color-theme=marine] {
  --bg: #f2f6fa; --panel: #fff; --text: #19354d; --muted: #587188;
  --accent: #0a4174; --primary-hover: #072f55; --border: #ccdce9;
  --ui-side: #e0ebf4; --ui-soft: #edf3f8; --ui-border: #d6e3ed;
  --ui-shadow: 0 5px 24px #092f4a12; --button-shadow: #0a417418;
  --air: #7bbde8; --air-soft: #ddebf8; --mint: #e0f0ef;
  --peach: #6ea2b3; --peach-soft: #e8f0f5; --sage: #bdd8e9;
  --tone-ink: #1c5377; --focus-ring: #4985b6; --sidebar-border: #a5bfd3; --sidebar-shadow-color: #092f4a25;
}
.sidebar { border-color: var(--sidebar-border); box-shadow: 0 10px 32px var(--sidebar-shadow-color), inset 0 1px 0 #ffffffa6; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--accent); }
.theme-dialog { width: min(760px,calc(100vw - 28px)); padding: 28px; background: var(--panel); }
.theme-dialog h2 { margin: 0; font-size:26px; }
.theme-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 24px; }
.theme-choice { padding: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; border: 2px solid var(--border); border-radius: 22px; text-align: left; white-space: normal; background: var(--panel); }
.theme-choice[aria-checked=true] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--air-soft); }
.theme-choice strong { font-size:16px; line-height: 1.45; }
.theme-choice small { color: var(--muted); font-size:13px; line-height: 1.6; }
.theme-sample { display: flex; height: 75px; border-radius: 14px; overflow: hidden; }
.theme-sample i { flex: 1; }
.theme-status { min-height: 1.4em; font-size:15px; color: #a7433e; margin-bottom: 0; }
.color-mode-button { cursor: pointer; color: var(--text); background: var(--panel); }
.color-mode-button:hover { background: var(--ui-soft); border-color: var(--accent); }
@media(max-width:600px) { .theme-choices { grid-template-columns: 1fr; } .theme-choice { display: grid; grid-template-columns: 74px 1fr; gap: 6px 14px; align-items: center; } .theme-sample { grid-row: span 2; height: 65px; } .theme-dialog { padding: 20px; } }
body, body.lesson-editor { background: var(--bg); color: var(--text); font-family: var(--ui-font); }
button, .button, input, select, textarea { border-color: var(--border); }
button:hover, .button:hover { background: var(--ui-soft); border-color: #a5c2bd; }
.primary, .auth-form .primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 8px var(--button-shadow); }
.primary:hover, .auth-form .primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
input[type=checkbox], input[type=radio] { accent-color: var(--tone-ink); }
input[type=range] { accent-color: #6b9aa6; }
.lessync-logo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 0; }
.lessync-wordmark { display: block; width: 142px; height: 40px; object-fit: contain; }
.lessync-symbol { display: none; width: 36px; height: 36px; }
.lessync-context { font-size:13px; font-weight: 600; color: var(--muted); }
.sidebar .logo { padding: 0 10px; }
.sidebar { background: var(--ui-side); border-right: 1px solid #e4eeed; }
.sidebar nav { gap: 5px; }
.nav-item { color: var(--muted); }
.nav-item:hover { background: var(--ui-soft); border-color: transparent; }
.nav-item.active { background: var(--air-soft); color: var(--tone-ink); box-shadow: none; }
.nav-compact .sidebar .lessync-wordmark { display: none; }
.nav-compact .sidebar .lessync-symbol { display: block; }
.sidebar-foot { border-color: var(--border); }
.avatar { background: var(--peach-soft); color: #735746; }
.topline .version, .version { background: var(--mint); color: var(--tone-ink); }
.color-mode-button, body.lesson-editor .color-mode-button, .board-header-actions .color-mode-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px; min-height: 38px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--panel); color: #687987; font-size:13px;
  line-height: 1.3; cursor: default; opacity: 1; white-space: normal;
}
.color-mode-button small { padding: 3px 7px; border-radius: 999px; font-size:11px; background: var(--peach-soft); color: #75513b; white-space: nowrap; }
button.color-mode-button:disabled { opacity: 1; cursor: default; }
.color-mode-icon { font-size:19px; line-height: 1; }
.card, .list-card, .work-block, .empty, .table-wrap { border-color: var(--ui-border); }
.card, .list-card { border: 1px solid var(--ui-border); }
th { background: var(--ui-soft); color: var(--muted); }
td { border-top-color: var(--ui-border); }
.pill { background: var(--air-soft); color: var(--tone-ink); }
.pill.green { background: var(--mint); color: var(--tone-ink); }
.pill.amber { background: var(--peach-soft); color: #795122; }
.empty { border-color: #c6dad6; }
.empty-icon { color: var(--tone-ink); }
.invite-code { background: var(--ui-soft); border-color: #b9d1ca; }
dialog::backdrop { background: #263c384d; }
#notice { background: var(--accent); color: white; }
.auth-story { background: var(--ui-side); }
.auth-story h1 { color: var(--tone-ink); font-size: clamp(32px,3.4vw,50px); line-height: 1.18; }
.auth-story p { color: var(--muted); }
.auth-note { background: var(--peach-soft); color: #544b3e; }
.auth-note p { color: #625b4c; }
.auth-tabs button.active { color: var(--accent); }
.auth-panel { background: var(--panel); }
.auth-mode { margin-top: 20px; }
/* Personal pages and calendar: preserve user-selected widget and event colors. */
.workspace-page { --ws-ink: var(--text); --ws-line: var(--border); --ws-soft: var(--ui-soft); }
.ws-block, .ws-widget { border-color: var(--ui-border); }
.ws-grid > .ws-empty-slot { border-color: var(--border); }
.ws-grid > .ws-empty-slot:hover { background: var(--ui-soft); border-color: #91bbc1; }
.ws-page-picker, .ws-page-picker select { background: var(--panel); color: var(--text); border-color: var(--border); }
.ws-day.today, .ws-day.selected, .ws-calendar .today { background: var(--air-soft); color: #244b54; }
.ws-time-head, .ws-weekday { color: var(--muted); }
.ws-timetable-scroll, .ws-time-slot { border-color: var(--ui-border); }
.ws-catalog-item:hover, .ws-widget-choice:hover { background: var(--air-soft); border-color: #aacfd5; }
.ws-format { border-color: var(--border); }
.ws-navigation button.active { background: var(--air-soft); color: var(--tone-ink); }
.material-card.material-folder-card { background: var(--air-soft); }
.material-folder-card:nth-child(3n+2) { background: var(--mint); }
.material-folder-card:nth-child(3n) { background: var(--peach-soft); }
.material-file-card .material-file-icon { background: var(--ui-soft); color: #4c748e; }
.material-dialog { color: var(--text); }
/* Lesson navigation, answer controls, review and score tables. */
.work-header { background: #ffffffed; border-color: var(--border); gap: 16px; }
.work-header > .lessync-logo { margin-right: 0; }
.work-header > .lessync-logo .lessync-wordmark { width: 112px; height: 32px; }
.work-header .color-mode-button { margin-left: auto; }
.work-block.callout { background: var(--air-soft); border-left-color: #669ca7; }
.option, .order-row { border-color: var(--border); }
.option:has(input:checked) { background: #edf7f6; border-color: #8db8b2; }
.feedback:not(.correct):not(.incorrect) { background: var(--ui-soft); }
.progressbar { background: #e2eeea; }
.progressbar span { background: #79a7b2; }
.exam-hero { background: var(--peach-soft); color: var(--tone-ink); }
.exam-hero-mark { color: #a77c58; }
.exam-nav-panel, .exam-results { --exam-blue: #376775; --exam-soft: #e6f2f3; --exam-ink: var(--text); --exam-line: #dce7e5; --exam-surface: #fff; }
.exam-nav-panel .exam-task-button.is-current, .exam-nav-panel .exam-task-button[aria-current=step] { background: var(--air); color: #203e45; border-color: #80b9c6; }
.exam-pending { background: var(--peach-soft); color: #75513b; }
.exam-number-grid button.primary { background: var(--air); color: #203e45; border-color: #80b9c6; }
.exam-results-table thead th { color: #42625e; background: var(--ui-soft); }
/* Constructor shell and settings; do not override .canvas-rich or inline block styles. */
body.lesson-editor > header { background: var(--panel); border-color: var(--border); }
body.lesson-editor .tag, body.lesson-editor .tabs button.active { background: var(--air-soft); color: var(--tone-ink); border-color: #b0d4da; }
body.lesson-editor > .layout > .left { background: var(--ui-side); }
body.lesson-editor > .layout > .right { background: var(--panel); border-color: var(--border); }
body.lesson-editor .outline.active { background: var(--panel); border-color: #afd1d4; }
body.lesson-editor .block.active { outline-color: #79a9b2; }
body.lesson-editor .sheet { border-color: var(--ui-border); box-shadow: var(--ui-shadow); }
body.lesson-editor .sheet.lesson-theme-air { --lesson-accent: var(--accent); }
body.lesson-editor .sheet.lesson-theme-blue { --lesson-accent: #3477d5; }
body.lesson-editor .status, body.lesson-editor .subtle, body.lesson-editor .field > label { color: var(--muted); }
body.lesson-editor .lesson-pages-settings { background: #f5f9f7; border-color: var(--border); border-radius: 18px; }
body.lesson-editor .lesson-settings-open, body.lesson-editor .smallbutton:not(.danger), body.lesson-editor #addPageBottom { background: var(--ui-soft); border-color: var(--border); color: var(--accent); }
body.lesson-editor .dropzone { border-color: #bbd5d6; color: var(--muted); }
body.lesson-editor .label, body.lesson-editor .setting-title, body.lesson-editor .attachment-heading { color: var(--tone-ink); }
body.lesson-editor .attachment-item, body.lesson-editor .disabled-note { background: var(--ui-soft); border-color: var(--border); }
body.lesson-editor #structureToggle { color: var(--accent); border-color: var(--border); background: var(--panel); }
body.lesson-editor .insert-menu button { background: var(--accent); border-color: var(--accent); }
body.lesson-editor .insert-trigger { background: var(--air-soft); color: var(--tone-ink); border-color: #afcfd3; }
.response-box { background: #f1f7f5; border-color: var(--border); border-radius: 20px; }
.response-box .response-status, .ix-hint { color: var(--muted); }
.ix-button { background: var(--ui-soft); color: var(--tone-ink); border-color: var(--border); border-radius: 14px; }
.ix-button:hover { background: var(--air-soft); border-color: #afcfd3; }
.ix-button[aria-pressed=true] { outline-color: #6b9aa6; }
/* Board chrome: drawing, pen colors, covers and PDF pages are user content. */
.board-shell { --default-border-color: var(--border); }
.board-header { border-color: var(--border); }
.board-header-actions button, .board-heading > a, .notebook-shell button { border-color: var(--border); color: var(--accent); border-radius: 14px; }
.board-heading > a, .board-help, .board-presence { background: var(--ui-side); color: var(--tone-ink); }
.board-header-actions button:hover, .board-header-actions button.selected, .board-notebooks button { background: var(--air-soft); color: var(--tone-ink); border-color: #b2d4d9; }
.board-heading .lessync-wordmark { width: 108px; height: 32px; }
.board-paper, .notebook-pages { background: var(--ui-soft); border-color: var(--border); }
.board-paper button[aria-pressed=true] { color: var(--tone-ink); }
.notebook-pages button[aria-current=page] { background: var(--accent); border-color: var(--accent); }
.board-notebooks, .board-add-menu, .board-cover-dialog { border-color: var(--border); border-radius: 22px; }
.board-editor .excalidraw {
  --color-primary: var(--accent); --color-primary-darker: var(--primary-hover); --color-primary-darkest: var(--primary-hover);
  --color-primary-light: var(--mint); --color-primary-light-darker: var(--air-soft);
  --color-surface-primary-container: var(--air-soft); --color-on-primary-container: var(--tone-ink);
  --color-brand-active: var(--accent); --color-brand-hover: var(--mint); --color-selection: var(--air);
}
@media(max-width:760px) {
  .sidebar { border-right: 0; }
  .nav-compact .sidebar .lessync-wordmark { display: block; }
  .nav-compact .sidebar .lessync-symbol { display: none; }
  .topline { gap: 10px; }
  .topline > .row:last-child { flex-wrap: wrap; }
  .color-mode-button { font-size:12px; padding: 7px 10px; gap: 5px; }
  .color-mode-button .color-mode-label { display: none; }
  .auth-story { background: var(--ui-side); }
  .auth-story .lessync-wordmark { width: 134px; }
  .work-header { gap: 8px; }
  .work-header .color-mode-button { margin-left: 0; }
  .board-heading .lessync-logo { display: none; }
  body.lesson-editor header .lessync-context { display: none; }
}

/* Focus workspace: a broad canvas with compact supporting widgets on the right. */
.ws-focus-page .ws-heading { align-items: center; margin-bottom: 20px; }
.ws-focus-page .ws-page-title { font-size: clamp(26px,2.4vw,36px); letter-spacing: -1px; }
.ws-page-subtitle { color: var(--muted); margin: 4px 0 0; font-size:17px; }
.ws-focus-page:not(.ws-editing) .ws-icon { display: none; }
.ws-focus-page .ws-page-tools { max-width: none; gap: 10px; }
.ws-focus-page .ws-edit-toggle { width: auto; min-width: 0; padding: 12px 18px; height: 46px; border-radius: 999px; gap: 9px; }
.ws-focus-page .ws-edit-toggle::after { display: none; }
.ws-edit-label { white-space: nowrap; }
.ws-actions-menu, .ws-pages-menu, .ws-page-outline { position: relative; }
.ws-actions-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; list-style: none; border: 1px solid var(--border); border-radius: 50%; background: var(--panel); cursor: pointer; font-size:26px; }
.ws-actions-menu > summary::-webkit-details-marker, .ws-pages-menu > summary::-webkit-details-marker, .ws-page-outline > summary::-webkit-details-marker { display: none; }
.ws-actions-popover { position: absolute; right: 0; top: 52px; z-index: 50; padding: 8px; min-width: 225px; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 12px 36px var(--sidebar-shadow-color); }
.ws-actions-popover button { display: flex; justify-content: flex-start; width: 100%; border: 0; padding: 12px; border-radius: 12px; text-align: left; }
.ws-page-switcher { gap: 0; margin: 0 0 20px; }
.ws-page-tab, .ws-pages-menu > summary { border: 1px solid var(--border); background: var(--panel); border-radius: 999px; padding: 11px 18px; font-size:15px; cursor: pointer; list-style: none; }
.ws-page-tab.active { background: var(--air-soft); border-color: transparent; color: var(--tone-ink); }
.ws-pages-menu { margin-left: 8px; }
/* The pupil picker opens directly into the actual pages. */
.ws-pages-popover { position: absolute; top: calc(100% + 10px); left: 0; width: min(340px,calc(100vw - 48px)); z-index: 60; padding: 12px; border: 1px solid var(--border); border-radius: 24px; background: var(--panel); box-shadow: 0 14px 40px var(--sidebar-shadow-color); }
.ws-pages-search { width: 100%; border-radius: 16px; background: var(--bg); margin-bottom: 8px; }
.ws-pages-list { display: grid; gap: 4px; max-height: 360px; overflow-y: auto; }
.ws-page-choice { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 16px; background: transparent; text-align: left; }
.ws-page-choice:hover, .ws-page-choice[aria-current=page] { background: var(--air-soft); color: var(--tone-ink); }
.ws-page-avatar { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 14px; background: var(--air-soft); color: var(--tone-ink); font-size:18px; }
.ws-page-choice:nth-child(3n+2) .ws-page-avatar { background: var(--mint); }
.ws-page-choice:nth-child(3n) .ws-page-avatar { background: var(--peach); }
.ws-page-choice-text { min-width: 0; overflow-wrap: anywhere; flex: 1; }
.ws-page-choice-text strong { font-size:15px; }
.ws-pages-empty { margin: 12px; font-size:15px; }
.ws-tasks-tools .primary, .ws-teacher-schedule > .row .primary, .ws-calendar-widget > .row .primary { background: var(--air-soft); color: var(--tone-ink); border-color: var(--air); box-shadow: none; }
.ws-tasks-tools .primary:hover, .ws-teacher-schedule > .row .primary:hover, .ws-calendar-widget > .row .primary:hover { background: var(--air); color: var(--tone-ink); }
.ws-page-switcher .ws-save-status { margin-left: auto; width: auto; font-size:13px; padding: 8px; }
.ws-page-outline { margin: 0 0 12px; display: inline-block; }
.ws-page-outline > summary { list-style: none; cursor: pointer; color: var(--muted); font-size:13px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; }
.ws-page-outline > .ws-navigation { position: absolute; top: 40px; left: 0; width: 270px; max-width: 85vw; max-height: 360px; overflow: auto; z-index: 35; box-shadow: 0 10px 30px var(--sidebar-shadow-color); }
.ws-focus-page .ws-layout { grid-template-columns: minmax(0,1fr) minmax(260px,var(--ws-side-width,300px)); gap: 22px; overflow: visible; }
.ws-focus-page .ws-main { grid-column: 1; grid-row: 1; min-width: 0; }
.ws-focus-page .ws-side { grid-column: 2; grid-row: 1; min-width: 0; }
.ws-focus-page .ws-main.ws-grid { min-width: 0; }
.ws-focus-page .ws-timetable { min-width: 680px; grid-template-columns: 52px repeat(7,minmax(88px,1fr)); }
.ws-focus-page .ws-timetable-scroll { max-height: none; border-radius: 18px; }
.ws-focus-page .ws-schedule-period { font-size:15px; margin: 10px 0; color: var(--muted); }
.ws-schedule-settings { margin: 4px 0 10px; }
.ws-schedule-settings > summary { width: max-content; cursor: pointer; font-size:13px; color: var(--muted); }
.ws-focus-page .ws-today { grid-column: 1 / -1; padding: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--ui-shadow); }
.ws-today h3 { margin-bottom: 7px; }
.ws-today-list { display: grid; gap: 10px; margin-top: 12px; }
.ws-today-event { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; padding: 8px 0; gap: 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; }
.ws-today-event > span:last-child { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.ws-today-time { background: var(--mint); border-radius: 12px; padding: 10px 8px; font-size:12px; white-space: nowrap; text-align: center; }
.ws-today-event:nth-child(2n) .ws-today-time { background: var(--air-soft); }
.ws-today-event strong { font-size:15px; }
.ws-today-event small { font-size:12px; }
.ws-add-widget { grid-column: 1 / -1; min-height: 48px; border-style: dashed; border-radius: 20px; align-self: start; }
.ws-focus-page .ws-callout.yellow { background: var(--peach-soft); }
.ws-focus-page .workspace-page, .workspace-page { --ws-ink: var(--text); }
body.lesson-editor > .layout > .left { border-color: var(--sidebar-border); box-shadow: 0 8px 28px var(--sidebar-shadow-color); }
@media(max-width:1200px) { .ws-focus-page .ws-layout { grid-template-columns: minmax(0,1fr) 270px; gap: 16px; } .ws-focus-page .ws-builder .ws-layout { grid-template-columns: minmax(0,1fr); } .ws-focus-page .ws-builder .ws-side { grid-column: 1; grid-row: 2; } }
@media(max-width:1000px) { .ws-focus-page .ws-layout { grid-template-columns: minmax(0,1fr); } .ws-focus-page .ws-side { grid-column: 1; grid-row: 2; } }
@media(max-width:760px) { .ws-focus-page .ws-heading { align-items: flex-start; gap: 14px; } .ws-focus-page .ws-edit-toggle { height: 42px; padding: 10px 14px; font-size:13px; } .ws-page-switcher { row-gap: 10px; } .ws-page-switcher .ws-save-status { flex-basis: 100%; padding-left: 0; } .ws-page-subtitle { font-size:15px; } .ws-focus-page .ws-page-tools { margin-top: 12px; } }

/* Floating navigation islands, shared by the cabinet and the lesson builder. */
.shell { grid-template-columns: 246px minmax(0,1fr); }
.sidebar {
  margin: 16px 0 16px 16px; top: 16px; height: calc(100dvh - 32px);
  border: 1px solid var(--sidebar-border); border-radius: 28px; padding: 22px 12px 16px;
  box-shadow: 0 8px 32px var(--sidebar-shadow-color); overflow: hidden;
}
.sidebar .logo { padding: 0 10px; }
.sidebar nav { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 19px; overflow-y: auto; margin-top: 22px; padding: 0 2px 14px; scrollbar-width: thin; }
.nav-group { display: grid; gap: 4px; }
.nav-group-label { color: var(--muted); font-size:12px; font-weight: 600; padding: 0 12px 5px; }
.nav-item { min-height: 43px; padding: 11px 12px; border-radius: 16px; font-size:13px; }
.nav-item.active { background: var(--air-soft); color: var(--tone-ink); }
.sidebar-foot { flex-shrink: 0; margin-top: 8px; padding-top: 14px; }
.shell.nav-compact { grid-template-columns: 92px minmax(0,1fr); }
.nav-compact .sidebar { padding: 20px 8px 14px; }
.nav-compact .sidebar .logo { padding: 0; }
.nav-compact .nav-group-label { display: none; }
.nav-compact .sidebar nav { gap: 16px; }
.ws-navigation { background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: 18px; box-shadow: var(--ui-shadow); }
.ws-navigation h3 { margin-bottom: 12px; }
.ws-navigation button { padding: 9px 10px; }
.ws-catalog { border-radius: 26px; padding: 16px; box-shadow: var(--ui-shadow); }
.ws-catalog-hint { color: var(--muted); line-height: 1.6; }
.ws-catalog-area { border-radius: 14px; }
.ws-grid > .ws-tail-slot { height: 40px; align-self: start; border-radius: 16px; }
.ws-grid > .ws-tail-slot > span { font-size:12px; }
body.lesson-editor > header { border-bottom: 0; box-shadow: 0 2px 16px #355b5506; }
body.lesson-editor > .layout > .left {
  margin: 16px 8px 16px 16px; padding: 20px 12px;
  top: calc(var(--builder-header-height,70px) + 16px);
  height: calc(100dvh - var(--builder-header-height,70px) - 32px);
  max-height: calc(100dvh - var(--builder-header-height,70px) - 32px);
  border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--ui-shadow);
}
body.lesson-editor .layout.catalog-open > .side-catalog {
  margin: 16px 8px; top: calc(var(--builder-header-height,70px) + 16px);
  height: calc(100dvh - var(--builder-header-height,70px) - 32px);
  max-height: calc(100dvh - var(--builder-header-height,70px) - 32px);
  border: 1px solid var(--border); border-radius: 26px; background: var(--panel); box-shadow: var(--ui-shadow);
}
body.lesson-editor .side-catalog-head { border-color: var(--border); padding: 18px 16px 14px; color: var(--tone-ink); }
body.lesson-editor .left-tabs { gap: 6px; }
body.lesson-editor .left-tab { border-radius: 14px; background: var(--panel); border-color: var(--border); color: var(--accent); }
body.lesson-editor .left-tab.selected { background: var(--air-soft); color: var(--tone-ink); }
body.lesson-editor .outline { border-radius: 16px; }
body.lesson-editor .outline.active { border-color: #a2c9ce; box-shadow: 0 2px 8px #355b5507; }
body.lesson-editor .left > h3 { padding: 0 4px; color: var(--muted); font-size:12px; }
body.lesson-editor #structureToggle {
  left: 206px; top: calc(var(--builder-header-height,70px) + 30px);
  width: 32px; height: 32px; min-width: 32px; border: 1px solid var(--border);
  border-radius: 50%; background: var(--panel); box-shadow: 0 3px 12px var(--sidebar-shadow-color); font-size:25px;
}
body.lesson-editor .layout.structure-collapsed > #structureToggle { left: 16px; }
@media(min-width:851px) and (max-width:1200px) {
  body.lesson-editor .layout.catalog-open > #structureToggle { left: 156px; }
}
@media(min-width:851px) and (max-width:1100px) {
  body.lesson-editor #structureToggle { left: 156px; }
}
@media(max-width:850px) {
  body.lesson-editor > .layout > .left { position: static; height: auto; max-height: 320px; margin: 16px; padding: 20px 16px; }
  body.lesson-editor .layout.catalog-open > .side-catalog { left: min(220px,35vw); top: calc(var(--builder-header-height,70px) + 12px); bottom: 12px; margin: 0 8px; height: auto; max-height: calc(100dvh - var(--builder-header-height,70px) - 24px); width: min(300px,calc(65vw - 16px)); }
  body.lesson-editor .layout > #structureToggle { left: 22px!important; top: calc(var(--builder-header-height,70px) + 22px); }
  body.lesson-editor .left > h3 { padding-left: 34px; }
}
@media(max-width:760px) {
  .shell, .shell.nav-compact { display: block; }
  .sidebar, .nav-compact .sidebar { position: static; margin: 12px; height: auto; max-height: none; padding: 14px; border-radius: 24px; }
  .sidebar .logo, .nav-compact .sidebar .logo { padding: 0 4px; }
  .sidebar nav, .nav-compact .sidebar nav { flex-direction: row; overflow-x: auto; margin-top: 12px; gap: 6px; padding: 0 0 3px; }
  .nav-group { display: contents; }
  .nav-group-label { display: none; }
  .nav-item, .nav-compact .sidebar .nav-item { min-height: 40px; padding: 9px 12px; }
  .sidebar-foot { display: none; }
  .main { padding-top: 12px; }
  .ws-navigation { padding: 16px; }
}

/* Lesson library: folders and personal covers. */
.lesson-library-page { --folder-air: var(--air-soft); --folder-mint: var(--mint); --folder-peach: var(--peach-soft); --folder-lilac: #ece7f6; --folder-sand: #f1ead9; --folder-blue: #ddebf8; }
[data-color=air] { --folder-color: #dceff2; }
[data-color=mint] { --folder-color: #daebe3; }
[data-color=peach] { --folder-color: #fde8d3; }
[data-color=lilac] { --folder-color: #ece7f6; }
[data-color=sand] { --folder-color: #f1ead9; }
[data-color=blue] { --folder-color: #ddebf8; }
.lesson-library-tools { gap: 16px; margin: 24px 0 16px; }
.lesson-library-tools .search { flex: 1; max-width: 720px; min-width: 180px; }
.lesson-library-tabs { gap: 10px; margin-bottom: 26px; }
.lesson-library-tabs .primary { background: var(--air-soft); color: var(--tone-ink); border-color: transparent; }
.lesson-folder-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 20px; margin: 20px 0 32px; }
.lesson-folder { position: relative; background: var(--folder-color,var(--air-soft)); border: 1px solid #ffffff70; border-radius: 18px 26px 26px 26px; min-width: 0; box-shadow: var(--ui-shadow); margin-top: 10px; }
.lesson-folder::before { content: ''; position: absolute; top: -10px; left: -1px; height: 18px; width: 42%; background: inherit; border-radius: 16px 16px 0 0; z-index: 0; }
.lesson-folder-open { position: relative; width: 100%; min-height: 170px; background: transparent; border: 0; border-radius: inherit; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; padding: 24px; text-align: left; }
.lesson-folder-open svg { margin: 0 0 7px; width: 38px; height: 38px; padding: 7px; box-sizing: content-box; background: #ffffff88; border-radius: 18px; }
.lesson-folder-open strong { font-size:20px; overflow-wrap: anywhere; }
.lesson-folder-open span { font-size:16px; color: var(--text); opacity: .72; }
.lesson-folder-empty { border-style: dashed; min-height: 170px; border-radius: 24px; background: transparent; }
.lesson-card-menu { position: absolute; right: 10px; top: 12px; z-index: 3; }
.lesson-card-menu[open] { z-index: 12; }
.lesson-card-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ffffffdd; color: #2e4048; font-size:25px; box-shadow: 0 2px 8px #00000008; }
.lesson-card-menu summary::-webkit-details-marker { display: none; }
.lesson-card-popover { position: absolute; right: 0; top: 42px; min-width: 210px; padding: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 10px 32px var(--sidebar-shadow-color); }
.lesson-card-popover button { display: block; width: 100%; padding: 12px; text-align: left; border: 0; border-radius: 12px; }
.lesson-card-popover button:hover { background: var(--air-soft); }
.lesson-items-section { background: var(--panel); padding: 24px; border: 1px solid var(--border); border-radius: 28px; }
.lesson-items-section > .row { gap: 14px; margin-bottom: 22px; }
.lesson-items-section h2 { margin: 0; }
.lesson-item-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(290px,100%),1fr)); gap: 20px; }
.lesson-item-card { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--ui-shadow); background: var(--panel); }
.lesson-item-cover { display: flex; align-items: center; justify-content: center; height: 155px; background: var(--folder-color,var(--air-soft)); border-radius: 23px 23px 0 0; overflow: hidden; color: var(--tone-ink); }
.lesson-item-cover > img { width: 100%; height: 100%; object-fit: cover; }
.lesson-item-cover > svg { width: 54px; height: 54px; opacity: .75; }
.lesson-item-content { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.lesson-item-content h3 { font-size:20px; line-height: 1.5; overflow-wrap: anywhere; min-height: 2.8em; margin: 0; }
.lesson-item-content p { margin: 0; }
.lesson-item-content .pill { align-self: flex-start; }
.lesson-item-content .row { flex-wrap: nowrap; margin-top: 8px; }
.lesson-open { flex: 1; text-align: center; background: var(--air-soft); color: var(--tone-ink); }
.lesson-breadcrumbs { color: var(--muted); font-size:16px; }
.lesson-breadcrumbs button { background: transparent; border: 0; padding: 0; color: var(--tone-ink); }
.lesson-icon-picker { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 20px; }
.lesson-icon-picker button { border-radius: 14px; padding: 12px; display: grid; place-items: center; }
.lesson-icon-picker button[aria-pressed=true], .lesson-color-picker button[aria-pressed=true] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lesson-color-picker { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.lesson-color-picker button { background: var(--folder-color); width: 40px; height: 40px; border-radius: 50%; }
.lesson-folder-preview { display: flex; gap: 18px; align-items: center; background: var(--folder-color); padding: 22px; border-radius: 22px; margin-bottom: 20px; }
.lesson-cover-preview { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--air-soft); border-radius: 20px; overflow: hidden; margin-bottom: 14px; }
.lesson-cover-preview img { width: 100%; height: 210px; object-fit: cover; }
.lesson-read-button { display: block; width: max-content; max-width: 100%; margin-top: 18px; background: var(--air-soft); color: var(--tone-ink); border-color: var(--air); }
.lesson-read-button[aria-pressed=true] { background: var(--mint); }
/* Course completion dashboard. */
.progress-dashboard { margin: 12px 0 32px; }
.progress-dashboard > .row { margin-bottom: 20px; gap: 14px; }
.progress-filters { flex-wrap: wrap; gap: 12px; max-width: 100%; }
.progress-filters select { max-width: min(380px,100%); }
.progress-caption { color: var(--muted); }
.progress-overview { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 20px; margin-bottom: 22px; }
.progress-summary, .progress-activity { padding: 26px; min-width: 0; }
.progress-dashboard h2 { font-size:25px; margin: 0 0 12px; }
.progress-summary-body { display: flex; align-items: center; gap: 24px; margin: 22px 0; flex-wrap: wrap; }
.progress-ring { flex: 0 0 174px; height: 174px; display: grid; place-items: center; background: conic-gradient(var(--air) var(--progress-angle),var(--ui-soft) 0); border-radius: 50%; }
.progress-ring > div { width: 136px; height: 136px; background: var(--panel); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.progress-ring strong { font-size:38px; line-height: 1.2; }
.progress-ring span { font-size:15px; }
.progress-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; flex: 1; min-width: min(280px,100%); }
.progress-count { display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; background: var(--folder-color,var(--air-soft)); border-radius: 18px; min-width: 0; }
.progress-count strong { font-size:30px; }
.progress-count span { font-size:15px; overflow-wrap: anywhere; }
.progress-week-chart { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); height: 180px; gap: 12px; padding-top: 16px; margin-top: 20px; border-bottom: 1px solid var(--border); }
.progress-day { display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 10px; text-align: center; min-width: 0; }
.progress-day-bars { display: flex; align-items: flex-end; gap: 3px; justify-content: center; height: 100%; }
.progress-day-bars > span { position: relative; width: 34%; min-height: 2px; border-radius: 6px 6px 0 0; background: var(--air); }
.progress-day-bars > .finished { background: var(--mint); }
.progress-day-bars small { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size:13px; }
.progress-course-map, .progress-lesson-table { padding: 26px; margin-bottom: 22px; }
.progress-lesson-tiles { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 10px; margin: 20px 0; }
.progress-lesson-tile { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 14px; min-height: 62px; padding: 12px; background: var(--ui-soft); border-color: transparent; font-size:17px; }
.progress-lesson-tile::after { content: ''; position: absolute; bottom: 0; left: 0; height: 4px; width: var(--lesson-fill); background: var(--air); }
.progress-lesson-tile small { font-size:13px; }
.progress-lesson-tile[data-state=done] { background: var(--mint); }
.progress-lesson-tile[data-state=active] { background: var(--air-soft); }
.progress-lesson-table .analytics-table { margin: 16px 0; }
.progress-lesson-table table { min-width: 840px; }
.progress-lesson-table th:nth-child(1) { width: 26%; }
.progress-lesson-table tr:focus { outline: 2px solid var(--focus-ring); outline-offset: -2px; background: var(--ui-soft); }
.lesson-progress-row { display: flex; align-items: center; gap: 12px; min-width: 160px; max-width: 340px; }
.lesson-progress-track { flex: 1; height: 13px; overflow: hidden; border-radius: 999px; background: var(--ui-soft); box-shadow: inset 0 1px 3px #0000000b; }
.lesson-progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--air); transition: width .2s; }
.lesson-progress-track[aria-valuenow="100"] > span { background: #82bca9; }
.lesson-progress-row strong { font-size:16px; min-width: 42px; }
.list-card .lesson-progress-row { margin: 14px 0; }
.statistics-detail-reports { padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 24px; }
.statistics-detail-reports summary { font-size:22px; cursor: pointer; }
@media(max-width:1100px) { .progress-overview { grid-template-columns: 1fr; } .progress-lesson-tiles { grid-template-columns: repeat(6,minmax(0,1fr)); } }
@media(max-width:760px) { .lesson-folder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .lesson-folder-open { padding: 18px; min-height: 155px; } .lesson-folder-open strong { font-size:18px; } .lesson-items-section { padding: 16px; } .lesson-library-tools, .lesson-library-tools > .row { width: 100%; } .lesson-library-tools .search { flex-basis: 100%; max-width: none; } .progress-summary, .progress-activity, .progress-course-map, .progress-lesson-table { padding: 18px; } .progress-filters { width: 100%; } .progress-filters select { width: 100%; max-width: 100%; } .progress-lesson-tiles { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; } .progress-lesson-tile { padding: 8px; flex-wrap: wrap; } .progress-summary-body { justify-content: center; } }
@media(prefers-reduced-motion:reduce) { .lesson-progress-track > span { transition: none; } }

/* Comfortable text defaults, including constructor controls. */
body { font-size: 17px; line-height: 1.6; }
button, .button, input, select, textarea { font-size: 15px; }
.sidebar .nav-item { font-size: 15px; }
.sidebar .nav-group-label { font-size: 13px; }
.small, small { font-size: 14px; }
.work-block { font-size: 18px; line-height: 1.75; }
.ws-editable { font-size: 17px; line-height: 1.65; }
.ws-block-title { font-size: 19px; }
.ws-tasks-tools button, .ws-teacher-schedule > .row button, .ws-calendar-widget > .row button { font-size: 14px; }
body.lesson-editor { font-size: 16px; }
body.lesson-editor button, body.lesson-editor input, body.lesson-editor select, body.lesson-editor textarea { font-size: 15px; }
body.lesson-editor .label, body.lesson-editor label, body.lesson-editor .left-tab { font-size: 14px; }
body.lesson-editor .rich-editor, body.lesson-editor .lesson-rich { font-size: 17px; line-height: 1.7; }
@media(max-width:760px) { .ws-focus-page .ws-edit-toggle { font-size: 14px; } .color-mode-button { font-size: 13px; } }

.lesson-items-section > .row > select { width: auto; max-width: 100%; min-width: 190px; }
@media(max-width:760px) { .lesson-items-section > .row > select { width: 100%; } }
.progress-filters select { width: auto; }
.lesson-icon-picker { grid-template-columns: repeat(5,minmax(0,1fr)); }
.lesson-icon-picker button { min-width: 0; padding: 10px 6px; }
.lesson-icon-picker svg { max-width: 100%; }
@media(max-width:760px) { .progress-filters select { width: 100%; } }

/* Workspace block library: readable miniature cards. */
.ws-focus-page .ws-builder { grid-template-columns: 286px minmax(0,1fr); }
.ws-catalog { padding: 18px 14px; }
.ws-catalog-search { width: 100%; margin-top: 12px; font-size: 14px; border-radius: 12px; }
.ws-catalog-group { display: block; width: auto; padding: 0; }
.ws-catalog-group h3 { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; margin: 22px 2px 12px; }
.ws-catalog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 10px; }
.ws-catalog .ws-catalog-item { position: relative; display: flex!important; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 0!important; border: 0; background: transparent; border-radius: 14px; box-shadow: none; min-width: 0; }
.ws-catalog .ws-catalog-item[hidden],.ws-catalog .ws-catalog-group[hidden],.ws-catalog-empty[hidden] { display: none!important; }
.ws-catalog .ws-catalog-item > span:not(.ws-catalog-grip) { padding: 0 3px; min-height: 36px; font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: normal; }
.ws-catalog .ws-catalog-grip { position: absolute; top: 6px; right: 6px; opacity: 0; padding: 2px 4px; border-radius: 6px; background: var(--panel); font-size: 12px; }
.ws-catalog-item:hover .ws-catalog-grip,.ws-catalog-item:focus-visible .ws-catalog-grip { opacity: .8; }
.ws-widget-mini.ws-miniature,.ws-catalog-item > .ws-widget-mini.ws-miniature { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: stretch; width: 100%; height: 90px; min-height: 90px; padding: 12px; margin: 0; gap: 7px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 15px; overflow: hidden; box-shadow: 0 3px 10px #284b4207; font: 10px/1.35 var(--ui-font); text-align: left; transition: border-color .15s,background .15s; }
.ws-catalog-item:hover > .ws-miniature,.ws-catalog-item:focus-visible > .ws-miniature { border-color: var(--air); background: var(--ui-soft); }
.ws-miniature strong { font-weight: 650; }
.ws-miniature .wm-line { display: block; flex: 0 0 3px; height: 3px; border-radius: 6px; width: 92%; background: #cddcd9; }
.ws-miniature .wm-line:nth-child(even) { width: 70%; }
.ws-miniature .wm-line:last-child { width: 58%; }
.wm-eyebrow { font-size: 6px; letter-spacing: .06em; color: var(--muted); }
.ws-miniature .wm-heading { font-size: 14px; }
.wm-text-title { font-size: 9px; }
.ws-miniature.wm-callout { background: #fcf7ee; }
.wm-note { border-left: 3px solid #d9b788; padding-left: 8px; display: grid; gap: 6px; }
.ws-miniature.wm-card { background: #eff6f2; }
.wm-card-title { max-width: 90px; font-size: 11px; }
.wm-card-chip { font-size: 7px; color: var(--tone-ink); }
.wm-divider { width: 100%; border: 0; border-top: 1px solid #afc5c2; margin: 6px 0; }
.wm-task { display: flex; align-items: center; gap: 6px; font-size: 7px; }
.wm-check { display: grid; place-items: center; flex: 0 0 12px; height: 12px; border: 1px solid #b7cbc5; border-radius: 4px; background: #fff; color: #fff; }
.wm-check.done { background: #91b9a6; border-color: #91b9a6; }
.wm-table { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #d9e3df; border-left: 1px solid #d9e3df; border-radius: 5px; overflow: hidden; }
.wm-table span { padding: 4px 2px; border-right: 1px solid #d9e3df; border-bottom: 1px solid #d9e3df; font-size: 6px; white-space: nowrap; }
.wm-table span:nth-child(-n+3) { background: #eef5f2; font-weight: 600; }
.wm-days,.wm-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; font-size: 6px; text-align: center; }
.wm-days { color: var(--muted); }
.ws-miniature.wm-calendar { gap: 4px; }
.wm-calendar-grid span { border-radius: 3px; padding: 2px 0; }
.wm-calendar-grid .today { color: #fff; background: #7faab4; }
.wm-calendar-grid .event { background: #e9e4f0; }
.wm-timetable { display: grid; grid-template-columns: 23px repeat(3,minmax(0,1fr)); grid-template-rows: repeat(4,15px); font-size: 6px; text-align: center; }
.wm-timetable > span { border-bottom: 1px solid #e2eae6; border-right: 1px solid #e2eae6; color: var(--muted); }
.wm-lesson { font-size: 5px; font-weight: 500; background: #daecee; border-left: 2px solid #8ab6c0; border-radius: 3px; margin: 1px; padding: 3px 0; }
.ws-miniature.wm-image,.ws-miniature.wm-mini_doodle { padding: 7px; background: #f8fbfa; }
.ws-miniature svg { display: block; width: 100%; height: 100%; border-radius: 9px; }
.ws-miniature.wm-file { flex-direction: row; align-items: center; gap: 7px; }
.wm-file-sheet { position: relative; display: grid; place-items: center; width: 27px; height: 37px; flex: 0 0 27px; border: 1px solid #d5ddd9; border-radius: 5px; color: #b2877e; background: #fff; font-size: 7px; font-weight: 650; }
.wm-file-sheet::after { content: ''; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-left: 1px solid #d5ddd9; border-bottom: 1px solid #d5ddd9; border-radius: 0 4px 0 3px; background: #eff4f1; }
.wm-file-copy,.wm-link-copy,.wm-clock-copy { min-width: 0; display: grid; gap: 5px; }
.wm-file-copy strong { font-size: 8px; }
.wm-file-copy span,.wm-link-copy span,.wm-clock-copy span { color: var(--muted); font-size: 6px; }
.ws-miniature.wm-clock { flex-direction: row; align-items: center; gap: 10px; background: #f3f6fa; }
.wm-clock-face { position: relative; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 50%; border: 1px solid #c1ccd4; background: #fff; }
.wm-clock-hour,.wm-clock-minute { position: absolute; bottom: 50%; left: 50%; border-radius: 5px; width: 2px; transform-origin: 50% 100%; background: #698b9a; }
.wm-clock-hour { height: 9px; transform: rotate(20deg); }.wm-clock-minute { height: 12px; transform: rotate(180deg); }
.wm-clock-pin { position: absolute; top: 15px; left: 15px; width: 4px; height: 4px; border-radius: 50%; background: #698b9a; }
.wm-clock-copy strong { font-size: 14px; }
.ws-miniature.wm-countdown { background: #f5f2f8; }
.wm-count { display: flex; gap: 6px; align-items: baseline; }.wm-count strong { font-size: 25px; line-height: 1; color: #9286aa; }.wm-count span { font-size: 8px; }
.wm-chart { display: flex; height: 100%; align-items: flex-end; gap: 7px; padding: 0 6px 5px; border-bottom: 1px solid #d9e4e0; }
.wm-chart i { display: block; flex: 1; border-radius: 4px 4px 0 0; background: #9abfc8; }.wm-chart i:nth-child(even) { background: #bbd4c3; }
.ws-miniature.wm-progress { flex-direction: row; align-items: center; gap: 9px; }
.wm-progress-ring { display: grid; place-items: center; position: relative; width: 43px; height: 43px; flex: 0 0 43px; border-radius: 50%; background: conic-gradient(#97bdae 60%,#e8efeb 0); }
.wm-progress-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel); }.wm-progress-ring strong { position: relative; font-size: 9px; }
.wm-progress-copy { font-size: 8px; }
.ws-miniature.wm-link { flex-direction: row; align-items: center; gap: 8px; }.wm-link-icon { font-size: 25px; color: #8aaab4; }.wm-link-copy strong { font-size: 8px; }
.wm-button { align-self: center; padding: 8px 10px; border-radius: 10px; background: #dcecef; font-size: 8px; color: #557d87; }.wm-button + .wm-line { align-self: center; }
.ws-catalog-empty { padding: 16px 2px; color: var(--muted); font-size: 14px; }
@media(min-width:651px) and (max-width:1100px) { .ws-focus-page .ws-builder { grid-template-columns: 256px minmax(0,1fr); } }
@media(max-width:650px) { .ws-focus-page .ws-builder { display: block; }.ws-catalog { max-height: 380px; padding: 16px; }.ws-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.ws-catalog-group { width: auto; display: block; }.ws-catalog .ws-catalog-grip { display: none; } }
@media(prefers-reduced-motion:reduce) { .ws-miniature { transition: none!important; } }

.ws-catalog-item > .ws-miniature.wm-callout { background: #fcf7ee; }
.ws-catalog-item > .ws-miniature.wm-card { background: #eff6f2; }
.ws-catalog-item > .ws-miniature.wm-clock { background: #f3f6fa; }
.ws-catalog-item > .ws-miniature.wm-countdown { background: #f5f2f8; }
.ws-catalog-item > .ws-miniature.wm-image,.ws-catalog-item > .ws-miniature.wm-mini_doodle { background: #f8fbfa; }

/* Equal card footers regardless of title length or folder label. */
.lesson-item-grid{align-items:stretch}.lesson-item-card{display:flex;flex-direction:column}.lesson-item-content{display:flex;flex-direction:column;flex:1}.lesson-item-content>h3{min-height:4.2em;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.lesson-item-content>.row:last-child{margin-top:auto;padding-top:18px;flex-wrap:nowrap}.lesson-item-content>.row:last-child>.lesson-open{flex:1;justify-content:center;text-align:center}.lesson-item-content>.pill{align-self:flex-start;margin-bottom:12px}