/* ===== Self-hosted fonts (no CDN — журнал остаётся полностью офлайн) ===== */
@font-face { font-family: "PT Serif"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/PTSerif-400-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "PT Serif"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/PTSerif-400-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "PT Serif"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/PTSerif-700-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "PT Serif"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/PTSerif-700-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Roboto Slab"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/RobotoSlab-700-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto Slab"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/RobotoSlab-700-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/GolosText-400-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/GolosText-400-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/GolosText-600-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/GolosText-600-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/Unbounded-700-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/Unbounded-700-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Rubik"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/Rubik-600-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Rubik"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/Rubik-600-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Noto Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/NotoSans-400-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Noto Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/NotoSans-400-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/NotoSans-600-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/NotoSans-600-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }

/* ===== Theme variables — 3 направления, выбранные вместо сезонных ===== */

/* "Тёплая бумага" — кремовый фон, тёплые чернила, терракотовый акцент; по умолчанию */
:root, [data-theme="paper"] {
  --bg: #F4EEDF;
  --surface: #FBF7EC;
  --surface-alt: #EFE4C8;
  --primary: #B2542E;
  --primary-dark: #954327;
  --topbar-bg: #5C3A22;
  --topbar-bg2: #74472A;
  --topbar-text: #F3E4C8;
  --text: #332A1C;
  --text-muted: #8A7C60;
  --border: #DFCEA0;
  --border-light: #E9DEBE;
  --danger: #A8341F;
  --danger-dark: #862715;
  --success: #5C7A45;
  --accent: #B2542E;
  --font-body: "PT Serif", Georgia, "Times New Roman", serif;
  --font-display: "Roboto Slab", "PT Serif", Georgia, serif;
}

/* "Спокойный грифель" — прохладный серо-голубой, деловой, геометричный акцент */
[data-theme="slate"] {
  --bg: #F1F4F6;
  --surface: #FFFFFF;
  --surface-alt: #E3EAEE;
  --primary: #3E5C76;
  --primary-dark: #304860;
  --topbar-bg: #22323F;
  --topbar-bg2: #2C4152;
  --topbar-text: #D7E3EA;
  --text: #1E2A32;
  --text-muted: #6C7A82;
  --border: #CBD7DD;
  --border-light: #DCE3E7;
  --danger: #A8341F;
  --danger-dark: #862715;
  --success: #3C7A63;
  --accent: #3E5C76;
  --font-body: "Golos Text", "Segoe UI", Arial, sans-serif;
  --font-display: "Unbounded", "Golos Text", sans-serif;
}

/* "Тёмная вечерняя" — мягкий графит и золото вместо белого экрана поздним вечером */
[data-theme="evening"] {
  --bg: #181B1F;
  --surface: #20242A;
  --surface-alt: #262B32;
  --primary: #D4A24C;
  --primary-dark: #B8873A;
  --topbar-bg: #101317;
  --topbar-bg2: #171B20;
  --topbar-text: #EDE4CC;
  --text: #EDEAE0;
  --text-muted: #9198A0;
  --border: #383D45;
  --border-light: #31363D;
  --danger: #E4776A;
  --danger-dark: #C15E52;
  --success: #7FB88C;
  --accent: #D4A24C;
  --font-body: "Noto Sans", "Segoe UI", Arial, sans-serif;
  --font-display: "Rubik", "Noto Sans", sans-serif;
}

/* "Ледяное стекло" — светлая, холодная, под материал Liquid Glass */
[data-theme="frost"] {
  --bg: #EAF2F7;
  --surface: #F7FBFD;
  --surface-alt: #DCEAF2;
  --primary: #2E86D8;
  --primary-dark: #23689F;
  --topbar-bg: #163A56;
  --topbar-bg2: #1F5079;
  --topbar-text: #DCEAF5;
  --text: #10222E;
  --text-muted: #5E7A8C;
  --border: #C7DCE6;
  --border-light: #D9E7EE;
  --danger: #C23B3B;
  --danger-dark: #A02F2F;
  --success: #17A398;
  --accent: #2E86D8;
  --font-body: "Golos Text", "Segoe UI", Arial, sans-serif;
  --font-display: "Unbounded", "Golos Text", sans-serif;
}

/* "Полярная ночь" — тёмная, холоднее «Вечерней»: глубокий тёмно-синий + ледяной циан */
[data-theme="polar"] {
  --bg: #0B1420;
  --surface: #121E2B;
  --surface-alt: #1A2938;
  --primary: #4FC3F7;
  --primary-dark: #2FA9DE;
  --topbar-bg: #060B12;
  --topbar-bg2: #0C1826;
  --topbar-text: #DCEAF5;
  --text: #DCEAF5;
  --text-muted: #8CA4B8;
  --border: #223244;
  --border-light: #1B2836;
  --danger: #FF6B5E;
  --danger-dark: #E1543F;
  --success: #34D1A0;
  --accent: #4FC3F7;
  --font-body: "Golos Text", "Segoe UI", Arial, sans-serif;
  --font-display: "Unbounded", "Golos Text", sans-serif;
}

/* "Жидкий металл" — нейтральная стальная, светлая */
[data-theme="liquidmetal"] {
  --bg: #DEE3E8;
  --surface: #EEF1F4;
  --surface-alt: #CBD3DA;
  --primary: #5B84A6;
  --primary-dark: #486A85;
  --topbar-bg: #2B333B;
  --topbar-bg2: #3A434D;
  --topbar-text: #E7ECEF;
  --text: #1D242B;
  --text-muted: #647080;
  --border: #B9C3CB;
  --border-light: #CDD5DB;
  --danger: #B23B3B;
  --danger-dark: #932F2F;
  --success: #3A9C86;
  --accent: #5B84A6;
  --font-body: "Golos Text", "Segoe UI", Arial, sans-serif;
  --font-display: "Unbounded", "Golos Text", sans-serif;
}

/* ===== base ===== */
* { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden; /* страница целиком не должна скроллиться вбок —
    только отдельные широкие таблицы внутри себя (см. .simple-table,
    .grid-scroll) */
}
h1, h2, h3, .brand, .plan-title { font-family: var(--font-display); }
main { padding: 16px 24px 48px; max-width: 1400px; margin: 0 auto; }

/* ===== app shell: sidebar (desktop/tablet) + toolbar + tab bar (mobile) ===== */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.app-sidebar {
  width: 240px; flex: none; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border-light);
  padding: 16px 12px;
}
.app-sidebar-head { padding: 2px 8px 16px; }
.app-sidebar-head .brand-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.app-sidebar-head .glyph { font-size: 18px; }

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-section { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 14px 10px 6px; }
.sb-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 14px; min-height: 38px;
}
.sb-row:hover { background: var(--surface-alt); }
.sb-row.active { background: var(--primary); color: #fff; }
.sb-row .ic { width: 18px; text-align: center; opacity: .75; font-size: 13px; flex: none; }
.sb-row .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-row .n { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.sb-row.active .n { opacity: .9; color: #fff; }
.sb-row.sb-loading, .sb-row.sb-empty { color: var(--text-muted); cursor: default; }
.sb-row.sb-loading:hover, .sb-row.sb-empty:hover { background: none; }

.app-sidebar-foot {
  margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 12px 8px 2px;
  border-top: 1px solid var(--border-light);
}
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.who-block .who { font-size: 12.5px; font-weight: 600; }
.who-block .role { font-size: 11px; color: var(--text-muted); text-decoration: none; }
.who-block .role:hover { text-decoration: underline; }

.app-toolbar {
  background: linear-gradient(135deg, var(--topbar-bg), var(--topbar-bg2));
  color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 3px solid var(--accent);
}
.app-toolbar .brand { color: white; font-weight: bold; text-decoration: none; font-size: 1.05em; }
.app-toolbar .toolbar-actions { display: flex; align-items: center; gap: 14px; }
.app-toolbar .who-inline { color: var(--topbar-text); font-size: .88em; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.app-toolbar .who-inline a { color: var(--topbar-text); text-decoration: none; }
.app-toolbar .who-inline a:hover { text-decoration: underline; }

.offline-badge {
  font-family: "PT Mono", monospace; font-size: .78em; font-weight: 600;
  background: var(--accent); color: white; border-radius: 12px; padding: 3px 10px;
  cursor: pointer; white-space: nowrap;
}
.offline-badge.hidden { display: none; }
.offline-badge.has-pending { background: var(--danger); }

.tabbar { display: none; }

/* ===== Liquid Glass — chrome-only material, subtle, with solid fallback ===== */
.app-sidebar.glass, .tabbar.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.26));
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}
[data-theme="evening"] .app-sidebar.glass, [data-theme="evening"] .tabbar.glass,
[data-theme="polar"] .app-sidebar.glass, [data-theme="polar"] .tabbar.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-sidebar.glass, .tabbar.glass { background: var(--surface); }
}

.sync-conflicts { max-width: 640px; margin: 20px auto; }
.conflict-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.conflict-card h3 { margin: 0 0 8px; font-size: 1em; }
.conflict-options { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.conflict-option { flex: 1; min-width: 180px; border: 2px solid var(--border-light); border-radius: 6px; padding: 10px 12px; background: var(--bg); cursor: pointer; text-align: left; }
.conflict-option:hover { border-color: var(--primary); }
.conflict-option b { display: block; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
.conflict-option .value { font-size: 1.2em; font-weight: 700; }

h1 { font-size: 1.5em; margin-bottom: 4px; }
h2 { font-size: 1.15em; color: var(--text-muted); }

.login-box {
  max-width: 340px;
  margin: 80px auto;
  background: var(--surface);
  padding: 28px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  border-top: 4px solid var(--accent);
}
.login-box form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.login-box label { display: flex; flex-direction: column; font-size: .9em; gap: 4px; }
.hint { color: var(--text-muted); font-size: .9em; }
.error { color: var(--danger); }

input, select, textarea, button {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 100%; /* фиксированные width:28em/size=50 и т.п. не должны
    распирать страницу на узких экранах — внутри .simple-table это всё
    равно скроллится своим контейнером, а вне таблиц просто не вылезает
    за край экрана */
}
button {
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
button:hover { background: var(--primary-dark); }
button.danger { background: var(--danger); }
button.danger:hover { background: var(--danger-dark); }

.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.inline-form label { display: flex; flex-direction: column; font-size: .85em; gap: 2px; }

.card-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0; }
.card { background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); min-width: 220px; }
.class-card {
  display: block;
  color: inherit;
  text-decoration: none;
  min-width: 160px;
  transition: box-shadow .15s, transform .15s;
  border: 1px solid transparent;
}
.class-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.14); border-color: var(--primary); transform: translateY(-1px); }
.class-card-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; font-weight: 800; font-size: .8em; margin-bottom: 8px; }
.class-card h3 { margin: 0 0 6px; font-size: 1.4em; }
.class-card-meta { color: var(--text-muted); font-size: .85em; margin-bottom: 8px; }
.class-card-stats { display: flex; gap: 10px; font-size: .85em; color: var(--primary); font-weight: 600; }
.hours-badge { font-size: .7em; font-weight: normal; color: var(--text-muted); background: var(--surface-alt); border-radius: 8px; padding: 1px 6px; }
.card-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.card-links a { color: var(--primary); text-decoration: none; }
.card-links a:hover { text-decoration: underline; }

.setup-section { margin-top: 28px; background: var(--surface); padding: 16px; border-radius: 8px; }
.setup-cols { display: flex; gap: 32px; flex-wrap: wrap; }
.setup-cols > div { min-width: 220px; }
.setup-cols ul { margin: 4px 0; padding-left: 18px; font-size: .9em; color: var(--text-muted); }

.simple-table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; margin: 10px 0; background: var(--surface); border-radius: 10px; }
.simple-table th, .simple-table td { border: 1px solid var(--border-light); padding: 6px 8px; text-align: left; }
.simple-table th { background: var(--surface-alt); }

.chip-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li { background: var(--surface); border: 1px solid var(--border-light); border-radius: 16px; padding: 4px 10px; display: flex; align-items: center; gap: 6px; }
.chip-list button { padding: 0 6px; font-size: .8em; }

.journal-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.journal-nav a { margin-right: 14px; color: var(--primary); text-decoration: none; }
.journal-nav a:hover { text-decoration: underline; }

.add-lesson { background: var(--surface); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.add-lesson summary { cursor: pointer; font-weight: 600; }

.grid-scroll { overflow-x: auto; background: var(--surface); border-radius: 14px; border: 1px solid var(--border-light); }
table.journal-grid { border-collapse: collapse; font-size: .85em; }
table.journal-grid th, table.journal-grid td { border: 0; border-bottom: 1px solid var(--border-light); padding: 6px 7px; text-align: center; min-width: 60px; }
table.journal-grid thead th { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--border); z-index: 2; }
table.journal-grid tbody tr:hover td:not(.sticky-col):not(.rating-col) { background: var(--surface-alt); }
table.journal-grid .sticky-col { position: sticky; left: 0; background: var(--surface-alt); text-align: left; min-width: 160px; z-index: 2; }
table.journal-grid thead .sticky-col { z-index: 3; }
table.journal-grid .lesson-col { cursor: pointer; background: var(--surface); border-radius: 8px; }
table.journal-grid .lesson-col:hover { background: var(--surface-alt); }
table.journal-grid .lesson-date { font-weight: 600; }
table.journal-grid .lesson-seq { color: var(--primary); font-weight: 700; }
table.journal-grid .lesson-topic { font-size: .85em; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.journal-grid .lesson-form { font-size: .75em; color: var(--text-muted); }
table.journal-grid .cell { cursor: pointer; position: relative; }
table.journal-grid .cell:hover { background: var(--surface-alt); }
table.journal-grid .cell.cell-pending-sync::after {
  content: "⏳"; position: absolute; top: 1px; right: 2px; font-size: .7em; line-height: 1;
}
table.journal-grid .rating-col { font-weight: 600; background: var(--surface-alt); position: sticky; z-index: 1; width: 56px; min-width: 56px; }
table.journal-grid .rating-avg { right: 56px; box-shadow: -2px 0 4px rgba(0,0,0,.06); }
table.journal-grid .rating-100 { right: 0; }
.grade-badge { display: inline-flex; align-items:center; justify-content:center; min-width:18px; background: var(--primary); color: white; border-radius: 6px; padding: 1px 5px; margin: 0 1px; font-weight: 700; font-size: .85em; }
.grade-badge-pct { background: var(--success); }
.scale-toggle { display: flex; gap: 2px; margin-bottom: 4px; background: var(--surface-alt); border-radius: 9px; padding: 2px; }
.scale-toggle button { flex: 1; padding: 5px 6px; font-size: .8em; background: transparent; color: var(--text-muted); border-radius: 7px; border: none; font-weight: 600; }
.scale-toggle button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.att-code { display: inline-flex; align-items:center; justify-content:center; min-width:18px; background: var(--danger); color: white; border-radius: 6px; padding: 1px 5px; margin: 0 1px; font-weight: 700; font-size: .85em; }
.absent-n, .absent-excused { background: var(--surface-alt); }
.note-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 3px; vertical-align: middle; }

.popup {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: 0 20px 46px -14px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.04);
  width: 320px;
  z-index: 50;
  overflow: hidden;
}
.popup.hidden { display: none; }
.popup-head { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, var(--topbar-bg), var(--topbar-bg2)); color: white; padding: 9px 12px; }
.popup-head button { background: rgba(255,255,255,.14); border: none; color: white; width: 22px; height: 22px; border-radius: 50%; font-size: 1em; line-height: 1; cursor: pointer; }
.popup-head button:hover { background: rgba(255,255,255,.26); }
.popup-body { padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; max-height: min(65vh, 480px); overflow-y: auto; }
.popup-body h4 { margin: 8px 0 2px; font-size: .85em; color: var(--text-muted); }
.popup-body label { display: flex; flex-direction: column; font-size: .85em; gap: 2px; }
.hw-row { display: flex; gap: 4px; }
.hw-row input { flex: 1; min-width: 0; }
.hw-row button { font-size: .8em; padding: 3px 6px; white-space: nowrap; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 6px !important; }
.popup-actions { display: flex; justify-content: space-between; margin-top: 8px; }
.bulk-link { display: block; text-align: center; margin-top: 4px; font-size: .85em; color: var(--primary); }
.bulk-link.hidden { display: none; }
.att-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.att-buttons button { padding: 5px 12px; font-size: .82em; border-radius: 999px; background: var(--surface-alt); color: var(--text); border: none; font-weight: 600; }
.att-buttons button:hover { background: var(--primary); color: white; }
.grade-row { display: flex; justify-content: space-between; align-items: center; font-size: .85em; background: var(--bg); padding: 5px 9px; border-radius: 10px; }
.grade-row button { padding: 1px 6px; font-size: .8em; border-radius: 999px; }
.muted { color: var(--text-muted); font-size: .85em; }

/* ===== lesson plan / presentation ===== */
.plan-sheet { background: var(--surface); border-radius: 8px; padding: 18px 22px; margin-top: 12px; }
.plan-title { font-size: 1.3em; margin: 4px 0 10px; color: var(--text); }
.plan-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.plan-chip { font-size: .8em; background: var(--surface-alt); color: var(--text-muted); border-radius: 12px; padding: 3px 10px; }
.plan-chip-ok { background: var(--success); color: white; }
.plan-chip-warn { background: var(--accent); color: #2b2b2b; }

.plan-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; border-bottom: 2px solid var(--border-light); padding-bottom: 8px; }
.plan-tabs button { background: var(--surface-alt); color: var(--text-muted); font-size: .9em; }
.plan-tabs button.active { background: var(--primary); color: white; }
.plan-tab.hidden-tab, .hidden-tab { display: none; }

.plan-list { line-height: 1.55; padding-left: 20px; }
.plan-list li { margin-bottom: 10px; }

.slide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.slide-card { border: 1px solid var(--border-light); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.slide-num { font-size: .75em; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.slide-text { font-size: .9em; line-height: 1.45; }

.resource-list { line-height: 1.7; }
.resource-list a { color: var(--primary); }
.acad-check { background: var(--surface-alt); border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 4px; font-size: .9em; }

.plan-nav { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.plan-nav a { color: var(--primary); text-decoration: none; }

.plan-link { color: var(--primary); text-decoration: none; font-size: .85em; }
.flash-note { background: var(--surface-alt); border-left: 3px solid var(--success); padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; }
.flash-error { border-left-color: var(--danger); }
.pptx-download { display: inline-block; background: var(--primary); color: white; padding: 6px 12px; border-radius: 4px; text-decoration: none; font-size: .9em; margin-bottom: 10px; }
.pptx-download:hover { background: var(--primary-dark); }
.plan-used-check { color: var(--success); font-weight: 700; margin-left: 4px; }
.topic-plan-cell { text-align: center; }

/* ===== appearance / theme picker ===== */
.theme-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.theme-grid form { display: contents; }

.provider-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.provider-grid form { display: contents; }
.provider-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  width: 200px; padding: 10px 12px; background: var(--surface); color: var(--text);
  border: 2px solid var(--border-light); border-radius: 8px; cursor: pointer;
}
.provider-card:hover { border-color: var(--primary); background: var(--surface); }
.provider-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.provider-detail { background: var(--surface); border-radius: 8px; padding: 12px 16px; margin-top: 8px; }
.theme-swatch {
  display: block;
  width: 140px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: none;
  padding: 0;
  text-align: left;
}
.theme-swatch.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.theme-swatch .swatch-bar { height: 34px; }
.theme-swatch .swatch-body { padding: 8px 10px; font-size: .85em; font-weight: 600; background: var(--surface); }
.theme-swatch .swatch-dots { display: flex; gap: 4px; padding: 0 10px 8px; }
.theme-swatch .swatch-dot { width: 12px; height: 12px; border-radius: 50%; }

/* preview colors baked in per theme, independent of the page's active theme */
.swatch-paper .swatch-bar { background: linear-gradient(135deg, #5C3A22, #74472A); }
.swatch-paper .swatch-body { font-family: "Roboto Slab", serif; }
.swatch-paper .swatch-dot:nth-child(1) { background: #B2542E; }
.swatch-paper .swatch-dot:nth-child(2) { background: #5C7A45; }
.swatch-paper .swatch-dot:nth-child(3) { background: #F4EEDF; border: 1px solid #DFCEA0; }

.swatch-slate .swatch-bar { background: linear-gradient(135deg, #22323F, #2C4152); }
.swatch-slate .swatch-body { font-family: "Unbounded", sans-serif; font-weight: 500; }
.swatch-slate .swatch-dot:nth-child(1) { background: #3E5C76; }
.swatch-slate .swatch-dot:nth-child(2) { background: #3C7A63; }
.swatch-slate .swatch-dot:nth-child(3) { background: #F1F4F6; border: 1px solid #CBD7DD; }

.swatch-evening .swatch-bar { background: linear-gradient(135deg, #101317, #171B20); }
.swatch-evening .swatch-body { font-family: "Rubik", sans-serif; background: #20242A; color: #EDEAE0; }
.swatch-evening .swatch-dot:nth-child(1) { background: #D4A24C; }
.swatch-evening .swatch-dot:nth-child(2) { background: #7FB88C; }
.swatch-evening .swatch-dot:nth-child(3) { background: #181B1F; border: 1px solid #383D45; }

.swatch-frost .swatch-bar { background: linear-gradient(135deg, #163A56, #1F5079); }
.swatch-frost .swatch-body { font-family: "Unbounded", sans-serif; font-weight: 500; }
.swatch-frost .swatch-dot:nth-child(1) { background: #2E86D8; }
.swatch-frost .swatch-dot:nth-child(2) { background: #17A398; }
.swatch-frost .swatch-dot:nth-child(3) { background: #EAF2F7; border: 1px solid #C7DCE6; }

.swatch-polar .swatch-bar { background: linear-gradient(135deg, #060B12, #0C1826); }
.swatch-polar .swatch-body { font-family: "Unbounded", sans-serif; font-weight: 500; background: #121E2B; color: #DCEAF5; }
.swatch-polar .swatch-dot:nth-child(1) { background: #4FC3F7; }
.swatch-polar .swatch-dot:nth-child(2) { background: #34D1A0; }
.swatch-polar .swatch-dot:nth-child(3) { background: #0B1420; border: 1px solid #223244; }

.swatch-liquidmetal .swatch-bar { background: linear-gradient(135deg, #2B333B, #3A434D); }
.swatch-liquidmetal .swatch-body { font-family: "Unbounded", sans-serif; font-weight: 500; }
.swatch-liquidmetal .swatch-dot:nth-child(1) { background: #5B84A6; }
.swatch-liquidmetal .swatch-dot:nth-child(2) { background: #3A9C86; }
.swatch-liquidmetal .swatch-dot:nth-child(3) { background: #DEE3E8; border: 1px solid #B9C3CB; }

/* print page */
.print-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 12px 20px; background: #eaf0f5; }
.preset-buttons a { margin-right: 8px; color: #2f6fa8; }
.preset-buttons a.active { font-weight: bold; text-decoration: underline; }
.print-sheet { padding: 20px; }
table.print-meta { border-collapse: collapse; margin-bottom: 12px; }
table.print-meta td { padding: 2px 8px; }
table.print-grid { border-collapse: collapse; width: 100%; font-size: .75em; }
table.print-grid th, table.print-grid td { border: 1px solid #333; padding: 3px 5px; text-align: center; }
table.print-grid .sticky-col { text-align: left; min-width: 150px; }
table.print-grid .topic-cell { font-size: .9em; font-weight: normal; writing-mode: vertical-rl; max-height: 140px; }

@media print {
  .no-print { display: none !important; }
  body { background: white; }
  .print-sheet { padding: 0; }
  table.print-grid { font-size: 10px; }
  table.print-grid { break-inside: avoid; }
  .print-page-break { break-before: page; }
  @page { size: landscape; margin: 10mm; }
}

/* --- responsive / mobile --- */
@media (max-width: 860px) {
  .app-sidebar { display: none; }
  .tabbar {
    display: flex; position: sticky; bottom: 0; left: 0; right: 0; z-index: 30;
    border-top: 1px solid var(--border-light); background: var(--surface);
    padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
  .tabitem { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; text-decoration: none; color: var(--text-muted); min-height: 44px; }
  .tabitem .ic { font-size: 18px; }
  .tabitem .tx { font-size: 10px; font-weight: 600; }
  .tabitem.on { color: var(--primary); }
  .app-toolbar .who-name { display: none; }
}

@media (max-width: 700px) {
  main { padding: 10px 10px 40px; }
  .app-toolbar { padding: 8px 12px; }

  h1 { font-size: 1.25em; }
  .journal-header { flex-direction: column; align-items: flex-start; }

  table.journal-grid { font-size: .8em; }
  table.journal-grid th, table.journal-grid td { padding: 6px 4px; min-width: 50px; }
  table.journal-grid .sticky-col { min-width: 110px; }
  table.journal-grid .lesson-topic { max-width: 60px; }
  table.journal-grid .rating-col { width: 44px; min-width: 44px; }
  table.journal-grid .rating-avg { right: 44px; }

  .popup { width: calc(100vw - 24px); max-width: 340px; }

  button, .att-buttons button { min-height: 34px; }
  input, select, textarea, button { font-size: 16px; }
}