/* Identity and reading modes */
/* Keep visible footers at the bottom on short pages, without covering content.
   Adaptive/presentation layouts retain their existing hidden-footer rules. */
.dashboard-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.dashboard-shell > .main-content { flex: 1 0 auto; }
.dashboard-shell > .header, .dashboard-shell > .footer { flex-shrink: 0; }
@font-face {
  font-family: 'LXGW WenKai Lite';
  src: url('/static/fonts/LXGWWenKaiLite-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.identity-modal { max-width: 520px; overflow-y: auto; }
.modal.class-picker { max-height: calc(100dvh - 32px); }
.class-field { display: grid; gap: 8px; margin: 14px 0; text-align: left; color: var(--text-color); font-size: 13px; font-weight: 600; }
.class-field small { font-weight: 400; color: var(--text-light-color); }
.class-field input { box-sizing: border-box; width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-background-color); color: var(--text-color); font: inherit; font-size: 16px; }
.class-field input:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.class-field input::placeholder { color: var(--text-light-color); font-size: 13px; }
.class-details-form input::placeholder { color: #737d8a; font-weight: 400; opacity: 1; }
body.dark-mode .class-details-form input::placeholder { color: #a2acb9; font-weight: 400; opacity: 1; }
.class-list { display: grid; gap: 8px; max-height: min(340px, 38dvh); overflow-y: auto; padding: 3px; margin: 14px -3px; }
.class-choice { display: grid; grid-template-columns: 40px minmax(0, 1fr) 12px; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--border-color); border-radius: 14px; text-align: left; background: var(--card-background-color); color: var(--text-color); cursor: pointer; }
.class-choice:hover, .class-choice:focus-visible { border-color: var(--primary-color); outline-color: var(--primary-color); }
.class-choice strong, .class-choice small { display: block; overflow-wrap: anywhere; }
.class-choice strong { font-size: 16px; }
.class-choice small { color: var(--text-light-color); margin-top: 4px; font-size: 12px; }
.class-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-light); color: #065f46; font-size: 19px; font-weight: 700; }
body.dark-mode .class-avatar { background: #133f32; color: #6ee7b7; }
.class-picker-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.class-picker-actions .button { flex: 1; min-height: 42px; white-space: nowrap; }
.class-hint { color: var(--text-light-color); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.identity-change-class { margin-top: 14px; width: 100%; }
.class-settings summary { cursor: pointer; color: var(--text-color); font-weight: 600; overflow-wrap: anywhere; }
.header .logo { min-width: 0; flex: 0 1 auto; padding-bottom: 5px; line-height: 1.35; }
.logo-text { overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.header-brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.header-identity { flex: 0 0 auto; padding: 4px 10px; border: 1px solid #a7e4cf; border-radius: 999px; background: #ecfdf5; color: #065f46; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.header-actions { flex: 0 0 auto; }
.header-clock-block { display: grid; justify-items: end; gap: 1px; min-width: 108px; margin-right: 10px; }
.header-clock { display: inline-flex; align-items: center; gap: 8px; color: #475569; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-clock svg { width: 18px; height: 18px; }
.header-update { color: #64748b; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.sync-retry { pointer-events: auto; margin-left: 6px; padding: 2px 5px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sync-retry:hover, .sync-retry:focus-visible { background: #a15c081a; }
.sync-retry:disabled { opacity: .6; cursor: wait; }
.editor-save-status { flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: #fff6e8; color: #92400e; font-size: 13px; line-height: 1.5; }
.editor-save-status .button { padding: 5px 9px; font-size: 12px; }
body.dark-mode .editor-save-status { background: #302719; color: #f4cc85; }
.header-update.sync-offline, .header-update.sync-error, .header-update.sync-stale { color: #a15c08; }
.board-sync-status { position: fixed; left: 12px; bottom: 8px; z-index: 25; max-width: calc(100vw - 110px); padding: 3px 8px; border-radius: 8px; font-size: 11px; line-height: 1.5; color: #79520e; background: #fffbebeb; pointer-events: none; }
.onboarding-tip { position: fixed; right: 24px; bottom: 100px; z-index: 80; display: flex; align-items: center; gap: 10px; max-width: min(360px, calc(100vw - 48px)); padding: 10px 14px; border: 1px solid #a7dcca; border-radius: 14px; background: #f0fdf8f5; color: #175a42; box-shadow: 0 5px 20px #00000012; font-size: 13px; line-height: 1.6; animation: fadeIn .25s ease; }
.onboarding-tip button { flex: none; border: 0; border-radius: 50%; width: 28px; height: 28px; color: inherit; background: transparent; cursor: pointer; font-size: 20px; }
.board-sync-status { z-index: 310; }
.onboarding-tip { z-index: 320; }
body.dark-mode .header-update.sync-offline, body.dark-mode .header-update.sync-error, body.dark-mode .header-update.sync-stale { color: #f4cc85; }
body.dark-mode .board-sync-status { background: #25221deb; color: #f4cc85; }
.board-sync-status.sync-normal, body.dark-mode .board-sync-status.sync-normal { color: var(--text-light-color); background: transparent; opacity: .8; }
body.dark-mode .onboarding-tip { background: #202925f5; color: #c0f4da; border-color: #416556; }
@media (prefers-reduced-motion: reduce) { .onboarding-tip { animation: none; } }
@media (max-width: 768px) {
  .header-brand { flex-direction: column; align-items: flex-start; gap: 2px; }
  .header-identity { padding: 1px 8px; font-size: 11px; }
}
@media (max-width: 480px) {
  .modal.class-picker { padding: 22px; }
  .header .logo { font-size: 18px; }
  .class-picker-actions .button { padding-left: 12px; padding-right: 12px; }
}
.identity-intro { color: var(--text-light-color); line-height: 1.7; margin: -12px 0 24px; }
.identity-choice {
  display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 12px 0;
  padding: 20px; border: 1px solid var(--border-color); border-radius: 14px;
  background: var(--card-background-color); color: var(--text-color); text-align: left; cursor: pointer;
}
.identity-choice strong { font-size: 19px; }
.identity-choice span { color: var(--text-light-color); font-size: 13px; line-height: 1.5; }
.identity-choice:hover, .identity-choice:focus-visible { border-color: var(--primary-color); outline-color: var(--primary-color); }
.modal.identity-modal, .modal.identity-password, .modal.identity-loading { box-sizing: border-box; width: min(480px, calc(100vw - 32px)); padding: 28px; border-radius: 24px; }
.dialog-kicker { display: block; margin-bottom: 8px; color: var(--primary-hover-color); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.identity-modal h3, .identity-password h3 { margin: 0 0 8px; font-size: 23px; letter-spacing: -.03em; }
.identity-modal .identity-intro { margin: 0 0 22px; font-size: 13px; }
.identity-modal .identity-choice { display: grid; grid-template-columns: 42px minmax(0, 1fr) 12px; align-items: center; gap: 12px; margin: 10px 0; padding: 16px; background: #f8faf9; border-color: #e0e8e3; border-radius: 15px; box-shadow: 0 2px 4px #182d2010; }
.identity-modal .identity-choice:hover { background: #edf8f2; transform: translateY(-2px); border-color: #72c59d; box-shadow: 0 7px 18px #182d2012; }
.identity-choice .identity-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #e5efff; color: #285fa5; }
.identity-icon svg, .confirm-calendar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.identity-teacher .identity-icon { background: #dff5e9; color: #08724c; }
.identity-screen .identity-icon { background: #eee7fc; color: #7550aa; }
.identity-choice .identity-copy { display: grid; gap: 5px; }
.identity-copy strong { display: flex; align-items: center; gap: 8px; color: var(--text-color); font-size: 16px; }
.identity-copy small { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 5px; background: #e9efec; color: #52665b; }
.identity-copy > span { font-size: 12px; }
.identity-choice .identity-chevron { font-size: 24px; color: #75887e; }
.identity-footnote { margin: 18px 0 0; font-size: 11px; color: var(--text-light-color); line-height: 1.7; }
.identity-password .hex-password-display { margin-top: 20px; }
.identity-loading { text-align: center; }
.identity-loading h3 { margin: 16px 0 6px; font-size: 18px; }
.identity-loading p { margin: 0; color: var(--text-light-color); font-size: 13px; }
.identity-loader { display: inline-block; width: 26px; height: 26px; border: 3px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; }
.voice-preview-dialog.add-day-dialog { width: min(440px, 100%); padding: 28px; border-radius: 24px; box-shadow: 0 24px 80px #0004; animation: modalSlideIn var(--duration-normal) var(--ease-out-back); }
.add-day-dialog h3 { font-size: 22px; margin: 0 0 20px; letter-spacing: -.03em; }
.confirm-date-panel { display: flex; gap: 14px; align-items: center; padding: 17px; background: #f1f8f4; border: 1px solid #d7e9de; border-radius: 14px; }
.confirm-calendar { display: grid; place-items: center; color: #08724c; width: 42px; height: 42px; background: #ddf2e5; border-radius: 12px; }
.confirm-date-panel strong { display: block; font-size: 21px; font-variant-numeric: tabular-nums; color: var(--text-color); }
.confirm-date-panel div > span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-light-color); }
.add-day-dialog .dialog-description { color: var(--text-light-color); font-size: 12px; margin: 16px 0 24px; }
.add-day-dialog .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border-color); margin: 0; }
.confirm-actions .button { min-width: 90px; }
@media (prefers-reduced-motion: reduce) { .identity-loader, .voice-preview-dialog.add-day-dialog { animation: none; } }
.display-options { display: flex; gap: 12px; margin-top: 12px; }
.display-options button { flex: 1; justify-content: center; }
.settings-modal { max-height: calc(100dvh - 48px); overflow-y: auto; }
.switch-identity { width: 100%; }
.board-empty { width: 100%; padding: 64px 16px; color: var(--text-light-color); text-align: center; }
.feedback-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 400; max-width: 90vw; padding: 12px 20px; border-radius: 12px; background: #991b1b; color: white; }
.toggle-switch { flex-shrink: 0; }
button.toggle-switch { padding: 0; border: 0; }

:root { --school-submission-color: #2563eb; --school-submission-bg: #eff6ff; }
body.dark-mode { --school-submission-color: #93c5fd; --school-submission-bg: #172b46; }
.editor-item-tags { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; padding-top: 12px; }
.editor-item-tags .editor-item-check { padding-top: 0; }
.editor-item-tags .school-check { color: var(--school-submission-color); }
.school-check input { accent-color: var(--school-submission-color); }
.homework-item.school-submission,
body.dark-mode .homework-item.school-submission {
  color: var(--school-submission-color); font-weight: 600;
  background: var(--school-submission-bg); border-color: var(--school-submission-color);
  border-left: 4px solid var(--school-submission-color);
}
#export-area .homework-item.needs-submission::after { display: none; }
.homework-tags { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.homework-badge { padding: 4px 8px; border-radius: 8px; font: 700 12px/1.4 var(--font-family); white-space: nowrap; }
.submission-badge { color: var(--submission-color); background: var(--submission-bg); }
.school-badge { color: var(--school-submission-color); background: var(--school-submission-bg); border: 1px solid currentColor; }
:root { --online-submission-color: #047857; --online-submission-bg: #ecfdf5; }
body.dark-mode { --online-submission-color: #8de8ba; --online-submission-bg: #173e2d; }
.homework-item.online-submission, body.dark-mode .homework-item.online-submission {
  color: var(--online-submission-color); font-weight: 600; background: var(--online-submission-bg);
  border-color: var(--online-submission-color); border-left: 4px solid var(--online-submission-color);
}
.online-badge { color: var(--online-submission-color); background: var(--online-submission-bg); border: 1px solid currentColor; border-radius: 8px; padding: 4px 8px; font: 700 12px/1.4 var(--font-family); white-space: nowrap; }
.editor-item-tags .online-check, .online-check { color: var(--online-submission-color); }
.online-check input { accent-color: var(--online-submission-color); }
.paste-row.online-submission { border-left: 3px solid var(--online-submission-color); }
.paste-row.online-submission .paste-rendered, body.dark-mode .paste-row.online-submission .paste-rendered { background: var(--online-submission-bg); }

/* A ruled page: each subject and every wrapped homework line share the same baseline. */
#export-area.notebook-view {
  font-family: 'LXGW WenKai Lite', 'KaiTi', 'STKaiti', serif;
  --notebook-line: calc(var(--homework-font-size, 15px) * var(--notebook-line-factor, 2.2));
  --notebook-rule: #b8cbd9;
  display: block; padding: 0; margin: 0 auto; width: 100%;
  background: #fffcf2; border-radius: 6px; box-shadow: 0 8px 30px #243b5310;
  animation: none;
}
body.dark-mode #export-area.notebook-view { --notebook-rule: #465365; background: #181c22; }
#export-area.notebook-view .subject-column {
  display: block; width: 100%; max-width: none; min-height: 0; border: 0; border-radius: 0;
  padding: 0 20px; background: transparent; box-shadow: none; overflow: visible; transform: none; transition: none;
}
#export-area.notebook-view .subject-header {
  padding: 0; margin: 0; border: 0; background: transparent;
  height: var(--notebook-line); line-height: var(--notebook-line);
  background-image: linear-gradient(to top, var(--notebook-rule) 1px, transparent 1px);
}
#export-area.notebook-view .subject-heading-row { display: block; }
#export-area.notebook-view .subject-title { margin: 0; line-height: var(--notebook-line); font-size: var(--homework-font-size, 15px); }
#export-area.notebook-view .subject-monogram,
#export-area.notebook-view .subject-count,
#export-area.notebook-view .subject-edit-hint,
#export-area.notebook-view .subject-column::before,
#export-area.notebook-view .subject-header::after,
#export-area.notebook-view .homework-item::before,
#export-area.notebook-view .homework-item::after { display: none; }
#export-area.notebook-view .homework-list { display: block; padding: 0 0 var(--notebook-line); margin: 0; overflow: visible; }
#export-area.notebook-view .homework-list,
#export-area.notebook-view .homework-item {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--notebook-line) - 1px), var(--notebook-rule) calc(var(--notebook-line) - 1px), var(--notebook-rule) var(--notebook-line));
}
#export-area.notebook-view .homework-item {
  display: block; padding: 0 0 0 2em; margin: 0; border: 0; border-radius: 0;
  line-height: var(--notebook-line); font-size: var(--homework-font-size, 15px);
  box-shadow: none; transform: none; opacity: 1; animation: none; transition: none;
}
#export-area.notebook-view .homework-text { display: block; line-height: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
#export-area.notebook-view .needs-submission { color: var(--submission-color); font-weight: 700; }
#export-area.notebook-view .school-submission { color: var(--school-submission-color); font-weight: 700; }
#export-area.notebook-view .online-submission { color: var(--online-submission-color); font-weight: 700; }
#export-area.notebook-view .homework-text { display: inline; }
#export-area.notebook-view .homework-tags { display: inline-flex; flex-direction: row; gap: 4px; margin-left: 8px; vertical-align: baseline; }
#export-area.notebook-view .homework-badge { padding: 0 4px; font-family: inherit; font-size: 11px; }
#export-area.empty-board {
  display: flex; justify-content: center; align-items: center; width: 100%;
  background: transparent; box-shadow: none; font-family: var(--font-family);
}
.empty-board .empty-add-subject { min-height: min(320px, var(--board-available-height, 320px)); }
body.empty-board-active .footer { display: none; }
body.empty-board-active .main-content { padding-bottom: 0; }

/* In-page presentation keeps the date; it never enters browser fullscreen. */
.homework-stage { position: relative; }
.board-actions {
  position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 100;
  display: flex; flex-direction: column; gap: 6px; padding: 6px;
  border: 1px solid var(--border-color); border-radius: 999px;
  background: var(--card-background-color); box-shadow: var(--shadow-lg);
}
.board-action {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--primary-color);
  transition: transform var(--duration-normal) var(--ease-out-back), background var(--duration-normal) var(--ease-smooth);
}
.board-action svg { width: 24px; height: 24px; }
.board-action.add-homework-button { background: var(--primary-color); color: #fff; }
.board-action:hover:not(:disabled) { transform: scale(1.06); background: var(--primary-light); color: var(--primary-hover-color); }
.board-action:active:not(:disabled) { transform: scale(.94); }
.board-action:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.board-action:disabled { opacity: .5; cursor: default; }
.homework-stage.presentation-stage {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 300;
  padding: 0; overflow: hidden; background: var(--card-background-color);
}
.presentation-date { position: absolute; inset: 0 0 auto; padding: 24px 72px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--text-color); }
.presentation-date.presentation-date-compact { padding-top: 12px; padding-bottom: 8px; }
.presentation-date.presentation-date-wide { padding-top: 44px; padding-bottom: 44px; }
.date-heading { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 5px 8px; }
.date-heading .current-date { grid-column: 1 / -1; justify-self: center; }
.date-status { display: inline-flex; align-items: center; justify-content: center; justify-self: center; width: max-content; text-align: center; white-space: nowrap; letter-spacing: normal; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.5; background: #dcfce7; color: #166534; }
.date-status.historical { background: #fff0ce; color: #92400e; border: 1px solid #f5ba53; }
body.dark-mode .date-status { background: #153e32; color: #a7f3d0; }
body.dark-mode .date-status.historical { background: #4a3012; color: #fde68a; border-color: #b7791f; }
.personal-progress { margin: 0 0 14px; color: var(--text-color); font-size: 13px; text-align: center; }
#export-area .personal-checkable { position: relative; padding-left: 42px; }
.personal-check { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 40px; min-height: 40px; cursor: pointer; }
.personal-check input { width: 18px; height: 18px; margin: 0; accent-color: #059669; cursor: pointer; }
#export-area .personally-done .homework-text { text-decoration: line-through; opacity: .6; }
#export-area.notebook-view .personal-checkable { padding-left: 2.4em; }
#export-area.notebook-view .personal-check { min-height: var(--notebook-line); width: 2.2em; }
.editor-item-order { display: flex; flex: 0 0 auto; flex-direction: column; gap: 2px; }
.editor-item-order button { border: 1px solid #cbd5e1; border-radius: 5px; background: transparent; color: var(--text-color); width: 28px; height: 26px; cursor: pointer; }
.editor-item-order button:disabled { opacity: .3; cursor: default; }
.editor-item-order .order-handle { cursor: grab; }
.editor-item-order button:focus-visible { outline: 2px solid #2563eb; }
.presentation-stage .scale-container { position: static; width: 100%; height: 100%; transition: none; }
.presentation-stage #export-area { margin: 0; animation: none; transition: none; }
.presentation-stage .subject-column,
.presentation-stage .subject-column:hover { transform: none; transition: none; min-height: 0; }
.presentation-stage .homework-item { animation: none; transition: none; transform: none; opacity: 1; }
.presentation-stage .homework-list { flex: none; overflow: visible; }
.presentation-stage .board-actions { z-index: 2; opacity: .55; transition: opacity .4s var(--ease-smooth); }
.presentation-stage .board-actions:hover, .presentation-stage .board-actions:has(:focus-visible) { opacity: 1; }
.presentation-handle { position: fixed; z-index: 2; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: 56px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 999px; background: var(--card-background-color); color: var(--text-color); opacity: .55; cursor: pointer; transition: opacity .4s var(--ease-smooth); }
.presentation-handle:hover, .presentation-handle:focus-visible { opacity: 1; }
.presentation-controls-hidden .board-actions, .presentation-controls-hidden .presentation-handle { opacity: 0; pointer-events: none; }
.presentation-controls-hidden .board-actions:has(:focus-visible), .presentation-controls-hidden .presentation-handle:focus-visible { opacity: 1; pointer-events: auto; }
.presentation-tools { position: fixed; z-index: 3; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(660px, calc(100vw - 184px)); max-height: calc(100dvh - 80px); overflow-y: auto; padding: 18px 20px; border: 1px solid var(--border-color); border-radius: 22px; color: var(--text-color); background: var(--card-background-color); box-shadow: 0 12px 40px #0003; }
.presentation-tools-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.presentation-tools-heading > div { flex: 1; min-width: 0; }
.presentation-tools-heading strong { display: block; font-size: 15px; }
.presentation-tools-heading span { display: block; margin-top: 4px; font-size: 12px; color: var(--text-light-color); }
.presentation-tool-icon { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--text-color); cursor: pointer; }
.presentation-tool-icon svg { width: 20px; height: 20px; }
.presentation-tool-icon:hover { background: var(--primary-light); }
.presentation-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.presentation-tool-field { min-width: 0; display: grid; gap: 8px; font-size: 13px; }
.presentation-wide-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.presentation-wide-field strong { font-size: 13px; font-weight: 600; }
.presentation-wide-field small { display: block; margin-top: 4px; font-size: 11px; color: var(--text-light-color); }
.presentation-font-field label { display: flex; justify-content: space-between; }
.presentation-font-field input { width: min(100%, 260px); margin: 0; align-self: start; }
.font-scale-hint { font-size: 11px; line-height: 1.5; color: var(--text-light-color); }
.settings-modal .font-scale-hint { grid-column: 1 / -1; }
.presentation-options { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f5f4; }
.presentation-options button { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #475569; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.presentation-options button[aria-pressed="true"] { background: #fff; color: #065f46; border-color: #c3e5d8; box-shadow: 0 2px 4px #00000008; }
.presentation-tools button:focus-visible, .presentation-handle:focus-visible, .presentation-options button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.presentation-sheet-enter-active { transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.presentation-sheet-leave-active { transition: opacity .18s ease, transform .18s ease; }
.presentation-sheet-enter-from, .presentation-sheet-leave-to { opacity: 0; transform: translate(-50%, 24px); }
.presenting > .header, .presenting > .footer, .presenting .toolbar { visibility: hidden; }
.homework-stage { overflow-x: clip; }
.layout-measure, .layout-measure * { animation: none !important; transition: none !important; }
.layout-measure .homework-list { flex: none; overflow: visible; }
.layout-measure .homework-item { transform: none !important; opacity: 1; }
.homework-text { overflow-wrap: anywhere; }

/* Compact natural-height cards; long subjects receive space from the layout planner. */
.content-grid:not(.notebook-view) { align-items: flex-start; }
.content-grid:not(.notebook-view) .subject-column { min-height: 0; }
body.adaptive-layout-active .main-content { padding-top: 20px; }
/* Keep the shared .container width/padding so the date and board align with the header. */
body.adaptive-layout-active .toolbar { margin-bottom: 20px; }
body.adaptive-layout-active .subject-header { padding: 14px 18px; }
body.adaptive-layout-active .subject-edit-hint { position: absolute; right: 18px; top: 100%; margin: 0; z-index: 1; }
body.adaptive-layout-active .homework-list { padding: 10px 16px 14px; }
body.adaptive-layout-active .homework-item { padding: 9px 12px; opacity: 1; transform: none; animation: none; transition: none; }
body.adaptive-layout-active .subject-column:hover { transform: none; }
body.adaptive-layout-active .homework-item:hover { margin: 4px 0; transform: none; }
body.adaptive-layout-active .homework-item.needs-submission,
body.adaptive-layout-active .homework-item.needs-submission:hover { margin: 8px 0; }
/* Badges occupy only the first line, not a column beside every rich-text block. */
#export-area.flow-submission-tags .homework-item { display: flow-root; }
#export-area.flow-submission-tags .homework-tags { float: right; margin: .15em 0 .15em .4em; }
/* Reclaim decorative space when it improves fit or avoids unnecessary wrapping. */
#export-area.compact-cards:not(.notebook-view) .subject-header { padding: 8px 12px; }
#export-area.compact-cards:not(.notebook-view) .homework-list { padding: 6px 8px 10px; }
#export-area.compact-cards:not(.notebook-view) .homework-item,
#export-area.compact-cards:not(.notebook-view) .homework-item:hover { padding: 5px 8px; margin: 3px 0; }
#export-area.compact-cards.borderless-entries:not(.notebook-view) .homework-item,
#export-area.compact-cards.borderless-entries:not(.notebook-view) .homework-item:hover { margin: 0; }

/* Playback is triggered after layout, never by background polling or measurement.
   Keep non-linear interaction effects, but do not tween padding/margins/heights. */
#export-area { animation: none; }
#export-area .homework-item {
  opacity: 1; transform: none; animation: none;
  transition: transform var(--duration-normal) var(--ease-out-back),
              box-shadow var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal) var(--ease-smooth);
}
.homework-stage:not(.presentation-stage) #export-area:not(.notebook-view) .subject-column:hover {
  transform: translateY(-3px);
}
/* Let the subject be the card: entries are reading rows, not nested cards.
   Scope to the board so editor rows and notebook rules stay unchanged. */
#export-area:not(.notebook-view) .homework-item:hover { transform: translateX(3px); }
#export-area.borderless-entries:not(.notebook-view) { --entry-rule: #e5ebe8; --entry-hover: #f5f8f6; }
#export-area.borderless-entries:not(.notebook-view) .homework-item,
#export-area.borderless-entries:not(.notebook-view) .homework-item:hover {
  padding: 9px 8px; margin: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; transform: none;
  transition: border-color var(--duration-normal) var(--ease-smooth);
}
#export-area.borderless-entries:not(.notebook-view) .homework-item + .homework-item { border-top: 1px solid var(--entry-rule); }
#export-area.borderless-entries:not(.notebook-view) .homework-item:hover { background: var(--entry-hover); }
body.dark-mode #export-area.borderless-entries:not(.notebook-view) { --entry-rule: #ffffff14; --entry-hover: #ffffff05; }
body:not(.dark-mode) #export-area.borderless-entries:not(.notebook-view) .homework-item:is(.needs-submission, .school-submission, .online-submission) { border-radius: 12px; }
body:not(.dark-mode) #export-area.borderless-entries:not(.notebook-view) .homework-item.needs-submission { background: #fff6e8; }
body:not(.dark-mode) #export-area.borderless-entries:not(.notebook-view) .homework-item.school-submission { background: #eff6ff; }
body:not(.dark-mode) #export-area.borderless-entries:not(.notebook-view) .homework-item.online-submission { background: #ecfdf5; }
body:not(.dark-mode) #export-area.borderless-entries:not(.notebook-view) .submission-badge {
  color: #c2410c; background: #fff; border: 1px solid #edb58e;
}
/* Borderless/compact padding must still reserve the personal checkbox column. */
#export-area:not(.notebook-view) .homework-item.personal-checkable,
#export-area:not(.notebook-view) .homework-item.personal-checkable:hover { padding-left: 42px; }
#app input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center;
  flex: 0 0 auto; width: 18px; height: 18px; margin: 0; padding: 0; box-sizing: border-box;
  border: 1.5px solid #84928c; border-radius: 5px; background: var(--card-background-color);
  vertical-align: middle; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#app input[type="checkbox"]::before { content: ''; width: 11px; height: 11px; background: white; clip-path: polygon(10% 43%, 36% 68%, 88% 12%, 100% 26%, 37% 94%, 0 56%); transform: scale(.35); opacity: 0; transition: transform .24s cubic-bezier(.16, 1, .3, 1), opacity .16s ease; }
#app input[type="checkbox"]:checked { background: var(--check-accent, #047857); border-color: var(--check-accent, #047857); }
#app input[type="checkbox"]:checked::before { transform: scale(1); opacity: 1; }
#app input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
#app input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
body.dark-mode #app input[type="checkbox"]:not(:checked) { background: #181818; border-color: #9aa8a1; }
.editor-item-tags .editor-item-check, .voice-preview-tags label { --check-accent: #b45309; border: 1px solid transparent; border-radius: 8px; padding: 3px 5px; min-height: 28px; gap: 6px; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
.voice-preview-tags label { display: inline-flex; align-items: center; }
.editor-item-tags .school-check, .voice-preview-tags .school-check { --check-accent: #2563eb; }
.editor-item-tags .online-check, .voice-preview-tags .online-check { --check-accent: #047857; }
.editor-item-tags .editor-item-check:has(input:checked), .voice-preview-tags label:has(input:checked) { background: #fff4de; border-color: #e7ba73; }
.editor-item-tags .school-check:has(input:checked), .voice-preview-tags .school-check:has(input:checked) { background: #edf5ff; border-color: #a8c8f1; }
.editor-item-tags .online-check:has(input:checked), .voice-preview-tags .online-check:has(input:checked) { background: #ecfdf5; border-color: #8fd6b7; }
body.dark-mode .editor-item-tags .editor-item-check:has(input:checked), body.dark-mode .voice-preview-tags label:has(input:checked) { background: #392b1b; border-color: #826744; }
body.dark-mode .editor-item-tags .school-check:has(input:checked), body.dark-mode .voice-preview-tags .school-check:has(input:checked) { background: #1c304a; border-color: #53799f; }
body.dark-mode .editor-item-tags .online-check:has(input:checked), body.dark-mode .voice-preview-tags .online-check:has(input:checked) { background: #173e2d; border-color: #448065; }
@media (forced-colors: active) { #app input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; } #app input[type="checkbox"]::before { display: none; } }
.presentation-stage #export-area:not(.notebook-view) .subject-column {
  transition: box-shadow var(--duration-slow) var(--ease-out-back), border-color var(--duration-normal) var(--ease-smooth);
}
@media (prefers-reduced-motion: reduce) {
  #export-area .subject-column, #export-area .homework-item { transition: none !important; }
}

@media (max-width: 768px) {
  /* Permissions are controlled by identity, never by the button's position. */
  .header-actions .button.icon-btn:first-child, .header-actions .settings-btn { display: inline-flex !important; }
  .header-actions .settings-btn { width: 36px; height: 36px; padding: 8px; margin: 0; }
  .settings-modal { width: calc(100% - 24px); padding: 24px 18px; }
  .display-options { gap: 8px; }
  .display-options button { padding: 12px 8px; }
  #export-area.notebook-view .subject-column { padding-left: 12px; padding-right: 12px; }
}

/* A centered date remains centered even when the next-day control is absent. */
.settings-modal { max-width: 560px; padding: 18px 24px; }
.settings-modal h2 { margin-bottom: 10px; font-size: 21px; }
.settings-modal .settings-group { padding: 8px 0; }
.settings-modal .settings-group h3 { margin-bottom: 10px; }
.settings-modal .settings-group .settings-item { margin-bottom: 12px; }
.settings-modal .settings-item label { margin-bottom: 6px; font-size: 14px; }
.settings-modal .theme-option { flex-direction: row; justify-content: center; padding: 9px 10px; gap: 7px; font-size: 13px; }
.settings-modal .theme-icon { width: 20px; height: 20px; }
.settings-modal .display-options { margin-top: 0; }
.settings-modal .font-size-control { margin: 0; gap: 8px; }
.settings-modal .font-size-control .button { padding: 6px 12px; }
.settings-modal .font-size-display { min-width: 44px; }
.settings-modal .editor-actions { margin-top: 8px; padding-top: 0; }
@media (min-width: 769px) and (max-height: 700px) {
  .settings-modal { padding-top: 14px; padding-bottom: 14px; }
  .settings-modal h2 { margin-bottom: 6px; }
  .settings-modal .settings-group { padding: 5px 0; }
  .settings-modal .settings-group h3 { margin-bottom: 6px; }
  .settings-modal .settings-group .settings-item { margin-bottom: 8px; }
}
.settings-footer .install-button { margin-right: auto; }
.settings-footer .button { padding: 9px 13px; font-size: 13px; }
.install-help { padding: 12px 14px; margin: 12px 0; border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-color); font-size: 12px; }
.install-help p { margin: 6px 0 0; line-height: 1.7; }
.install-offer { max-width: 420px; }
.install-offer-icon { display: block; border-radius: 16px; margin-bottom: 18px; box-shadow: 0 6px 18px #0002; }
.install-offer h3 { margin: 0 0 14px; font-size: 23px; }
.install-offer .install-offer-note { color: var(--text-light-color); font-size: 12px; }
.install-offer .paste-actions { justify-content: flex-end; margin: 22px 0 0; }
.settings-modal .theme-setting, .settings-modal .font-size-setting, .settings-modal .display-setting { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 8px; }
.settings-modal .font-size-slider { grid-column: 2; margin: 4px 0; }
/* Settings: persistent left navigation, independently scrolling content. */
/* Shared non-linear motion: only opacity and transform animate, never layout. */
.modal-overlay > .modal, .modal-overlay > .editor-modal,
.modal-overlay > .settings-modal, .modal-overlay > .subject-create-modal,
.voice-preview-overlay > .voice-preview-dialog { animation: none; }
.dialog-overlay-enter-active { transition: opacity 360ms cubic-bezier(.16, 1, .3, 1); }
.dialog-overlay-leave-active { transition: opacity 200ms cubic-bezier(.4, 0, 1, 1); pointer-events: none; }
.dialog-overlay-enter-from, .dialog-overlay-leave-to { opacity: 0; }
.dialog-panel-enter-active, .dialog-overlay-enter-active > .voice-preview-dialog {
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1), opacity 360ms cubic-bezier(.16, 1, .3, 1);
}
.dialog-panel-leave-active { position: absolute; pointer-events: none; transition: transform 180ms cubic-bezier(.4, 0, 1, 1), opacity 180ms ease; }
.dialog-panel-enter-from, .dialog-overlay-enter-from > .voice-preview-dialog { opacity: 0; transform: translateY(20px) scale(.97); }
.dialog-panel-leave-to, .dialog-overlay-leave-to > .voice-preview-dialog { opacity: 0; transform: translateY(10px) scale(.98); }
.dialog-overlay-leave-active > .voice-preview-dialog,
.dialog-overlay-leave-active > .modal, .dialog-overlay-leave-active > .editor-modal,
.dialog-overlay-leave-active > .settings-modal, .dialog-overlay-leave-active > .subject-create-modal {
  transition: transform 200ms cubic-bezier(.4, 0, 1, 1); transform: translateY(10px) scale(.98);
}
.settings-section-enter-active { transition: opacity 240ms cubic-bezier(.16, 1, .3, 1), transform 300ms cubic-bezier(.16, 1, .3, 1); }
.settings-section-enter-from { opacity: 0; transform: translateX(12px); }
.settings-section-leave-active { position: absolute; inset: 22px 24px auto; pointer-events: none; transition: opacity 100ms ease; }
.settings-section-leave-to { opacity: 0; }
.settings-heading, .settings-footer { flex-shrink: 0; }
.settings-option-hint { margin: 6px 0 12px; font-size: 12px; line-height: 1.6; color: var(--text-light-color); }
#export-area:not(.notebook-view) .homework-text { line-height: var(--reading-line-height, 1.8); }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
body.reduce-motion .dialog-panel-enter-from, body.reduce-motion .dialog-panel-leave-to,
body.reduce-motion .dialog-overlay-enter-from > *, body.reduce-motion .dialog-overlay-leave-active > *,
body.reduce-motion .settings-section-enter-from { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .dialog-panel-enter-active, .dialog-panel-leave-active, .dialog-overlay-enter-active, .dialog-overlay-leave-active,
  .dialog-overlay-enter-active > *, .dialog-overlay-leave-active > *, .settings-section-enter-active, .settings-section-leave-active { transition-duration: .001ms !important; transform: none !important; }
}
@media (max-width: 768px) {
  .settings-section-leave-active { inset: 18px 12px auto; }
}
.modal-overlay .settings-modal { display: flex; flex-direction: column; width: min(800px, calc(100vw - 32px)); max-width: 800px; height: min(620px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); overflow: hidden; padding: 0; border-radius: 24px; }
.settings-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px 18px; }
.settings-heading > div { min-width: 0; }
.settings-heading .dialog-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 65vw; }
.settings-heading h2 { margin: 0; font-size: 21px; }
.settings-dismiss { flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-background-color); color: var(--text-color); cursor: pointer; font-size: 24px; }
.settings-layout { display: grid; grid-template-columns: 154px minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--border-color); }
.settings-nav { display: flex; flex-direction: column; gap: 8px; padding: 18px 12px; border-right: 1px solid var(--border-color); background: #f3f7f5; }
.settings-nav button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #475569; font-size: 13px; line-height: 1.5; text-align: left; font-weight: 600; cursor: pointer; }
.settings-nav button[aria-pressed="true"] { background: #dcf5e8; color: #076342; border-color: #a7dfc2; box-shadow: 0 2px 6px #1266420b; }
.settings-nav button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.settings-nav svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-panels { position: relative; min-width: 0; min-height: 0; padding: 22px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
.settings-panels > .settings-group { border: 0; padding: 0; }
.settings-panels .settings-description { color: var(--text-light-color); font-size: 13px; line-height: 1.7; margin: 0 0 20px; }
.settings-panels .settings-group h3 { color: var(--text-color); font-size: 15px; letter-spacing: 0; margin: 0 0 20px; }
.settings-install { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.settings-about .settings-install { margin-top: 16px; padding-top: 16px; }
.settings-about-title { margin: 0 0 8px; color: var(--text-color); font-size: 17px; overflow-wrap: anywhere; }
.about-credits { padding: 12px 14px; margin: 12px 0; border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-light-color); font-size: 13px; line-height: 1.7; }
.about-credits p { margin: 0 0 4px; }
.about-credits a { color: var(--primary-color); text-decoration: none; }
.about-credits a:hover { text-decoration: underline; }
.class-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.class-context-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 4px; padding: 12px; border: 1px solid var(--border-color); border-radius: 16px; background: #f7faf9; }
.class-context-label { color: var(--text-light-color); font-size: 11px; font-weight: 600; }
.class-context-card strong { font-size: 16px; line-height: 1.5; color: var(--text-color); overflow-wrap: anywhere; }
.class-context-card small { margin-bottom: 4px; color: var(--text-light-color); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.class-context-card .button { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; width: 100%; padding: 8px 10px; min-height: 36px; font-size: 12px; }
.class-context-card svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.class-details-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.class-details-form h4 { grid-column: 1 / -1; margin: 0; color: var(--text-color); font-size: 13px; }
.class-details-form .class-field { min-width: 0; margin: 0; gap: 6px; }
.class-details-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.class-details-actions small { color: var(--text-light-color); font-size: 11px; line-height: 1.6; }
.class-alias-hint { grid-column: 1 / -1; color: var(--text-light-color); font-size: 11px; line-height: 1.6; }
.class-details-actions .button { flex-shrink: 0; padding: 9px 12px; font-size: 12px; }
.class-details-form > .class-hint { grid-column: 1 / -1; }
.class-input-wrap { display: flex; align-items: center; border: 1px solid #cbd9d1; border-radius: 13px; background: #f8fbf9; box-shadow: inset 0 1px 2px #153d2310; transition: border-color .2s, box-shadow .2s; }
.class-input-wrap:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px #10b98120; background: var(--card-background-color); }
.class-field .class-input-wrap input { flex: 1; border: 0; box-shadow: none; outline: none; background: transparent; padding: 12px; }
.field-count { padding-right: 12px; color: var(--text-light-color); font-size: 11px; font-weight: 400; white-space: nowrap; }
.class-delete-confirm { width: 100%; min-width: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); color: var(--text-color); }
.class-delete-confirm > strong, .date-delete-confirm > strong { font-size: 13px; overflow-wrap: anywhere; }
.class-delete-confirm > p, .date-delete-confirm > p { font-size: 12px; line-height: 1.7; }
.class-delete-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.class-delete-actions .button { flex: 1; padding: 10px 8px; font-size: 13px; }
.settings-modal .settings-footer { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 24px; border-top: 1px solid var(--border-color); }
.settings-footnote { color: var(--text-light-color); font-size: 11px; max-width: 75%; line-height: 1.5; }
body.dark-mode .settings-nav { background: #111; border-color: #353535; }
body.dark-mode .settings-nav button { color: #e2e8f0; }
body.dark-mode .settings-nav button[aria-pressed="true"] { background: #173c2e; color: #a7f3d0; border-color: #326c52; }
body.dark-mode .class-context-card, body.dark-mode .class-input-wrap { background: #222; border-color: #444; }
body.dark-mode .class-input-wrap:focus-within { border-color: var(--primary-color); background: #292929; }
@media (max-width: 600px) {
  .modal-overlay .settings-modal { width: calc(100vw - 20px); border-radius: 20px; }
  .settings-heading { padding: 18px 16px 14px; }
  .settings-heading h2 { font-size: 18px; }
  .settings-layout { grid-template-columns: 78px minmax(0, 1fr); }
  .settings-nav { padding: 14px 6px; gap: 6px; }
  .settings-nav button { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 4px; text-align: center; font-size: 12px; }
  .settings-nav button span { max-width: 3em; }
  .settings-panels { padding: 18px 12px; }
  .settings-modal .theme-setting, .settings-modal .font-size-setting, .settings-modal .display-setting { grid-template-columns: 1fr; }
  .settings-modal .theme-options, .settings-modal .display-options { flex-wrap: wrap; gap: 8px; }
  .settings-modal .theme-option { min-width: 0; flex: 1 1 68px; padding: 9px 6px; }
  .settings-modal .theme-icon { display: none; }
  .settings-modal .font-size-slider { grid-column: 1; max-width: 100%; }
  .class-context-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .class-context-card { padding: 12px; }
  .class-details-actions { flex-wrap: wrap; }
  .class-details-actions .button { padding: 9px 6px; font-size: 11px; }
  .field-count { display: none; }
  .class-details-form { grid-template-columns: minmax(0, 1fr); }
  .settings-modal .settings-footer { padding: 12px 14px; }
}
@media (max-width: 480px) {
  .settings-modal .theme-setting, .settings-modal .font-size-setting, .settings-modal .display-setting { grid-template-columns: 1fr; }
  .settings-modal .font-size-slider { grid-column: 1; }
}
/* Display preferences share one grid and one segmented-control treatment. */
.settings-modal .settings-display > h3 { margin-bottom: 10px; }
.settings-display-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-items: start; }
.settings-modal .settings-display .settings-item { min-width: 0; margin: 0; }
.settings-modal .settings-display .settings-item > label { margin: 0 0 7px; }
.settings-modal .settings-display .theme-setting,
.settings-modal .settings-display .font-size-setting { grid-column: 1 / -1; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 12px; }
.settings-modal .settings-display .theme-setting > label,
.settings-modal .settings-display .font-size-setting > label { margin: 0; }
.settings-modal .settings-display .display-setting { display: block; }
.settings-modal .settings-display .font-size-control { justify-content: flex-end; }
.settings-modal .settings-display .font-size-slider { grid-column: 2; width: min(100%, 260px); justify-self: end; margin: 0; }
.settings-display .settings-segments { gap: 4px; margin: 0; flex-wrap: nowrap; }
.settings-display .settings-segments button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 8px; line-height: 1.5; transition: border-color .2s ease, box-shadow .2s ease; }
.settings-display .settings-segments button:hover:not([aria-pressed="true"]) { background: #e4ede8; }
.settings-display .settings-segments .theme-icon { width: 17px; height: 17px; flex-shrink: 0; }
.settings-span-full, .settings-fullscreen-grid, .settings-behavior-grid { grid-column: 1 / -1; }
.settings-fullscreen-grid, .settings-behavior-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.settings-behavior-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings-behavior-grid.notebook-behavior { grid-template-columns: minmax(0, 1fr); }
.settings-fullscreen-grid.has-auto-presentation { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.settings-display-grid:has(.has-auto-presentation) { row-gap: 10px; }
.settings-modal .settings-display .auto-presentation-setting { flex-direction: column; align-items: flex-start; gap: 6px; }
.settings-modal .settings-display .auto-presentation-setting .toggle-label label { font-size: 12px; margin-bottom: 0; }
.auto-presentation-setting .toggle-desc { font-size: 10px; }
.date-management { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.date-management-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.date-management-heading h4 { margin: 0; font-size: 14px; }
.date-management-heading > span { color: var(--text-light-color); font-size: 11px; }
.managed-date-list { list-style: none; margin: 12px 0; padding: 0; }
.managed-date-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-color); }
.managed-date-list li > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-color); font-size: 13px; font-variant-numeric: tabular-nums; }
.managed-date-list small { color: var(--text-light-color); font-size: 10px; }
.managed-date-list .button { padding: 8px; min-width: 34px; min-height: 34px; }
.managed-date-list svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.clear-homework-button { padding: 9px 12px; font-size: 12px; }
.date-delete-confirm { margin-top: 14px; padding: 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-background-color); }
.settings-modal .settings-display .toggle-setting { gap: 12px; align-items: center; }
.settings-display .toggle-label { min-width: 0; }
.settings-modal .settings-display .toggle-label label { margin: 0 0 4px; }
.settings-display .toggle-desc { font-size: 11px; line-height: 1.6; }
body.dark-mode .settings-display .settings-segments button:hover:not([aria-pressed="true"]) { background: #303030; }
@media (max-width: 600px) {
  .settings-display-grid, .settings-fullscreen-grid, .settings-behavior-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .settings-modal .settings-display .theme-setting,
  .settings-modal .settings-display .font-size-setting { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .settings-modal .settings-display .font-size-control { justify-content: space-between; }
  .settings-modal .settings-display .font-size-slider { grid-column: 1; justify-self: start; }
  .settings-display .settings-segments button { padding: 8px 4px; min-height: 40px; font-size: 12px; }
}
.toolbar { flex-direction: column; justify-content: center; gap: 10px; }
.date-selector { display: grid; grid-template-columns: 44px minmax(140px, auto) 44px; justify-content: center; gap: 16px; width: 100%; }
.date-selector > .date-nav:first-child { grid-column: 1; }
.date-selector > .date-heading { grid-column: 2; }
.date-selector > .date-nav:last-child { grid-column: 3; }
.date-selector .date-nav { justify-self: center; }
.date-heading .current-date { font-size: 24px; font-weight: 750; }
.date-weekday { color: var(--text-color); font-size: 13px; font-weight: 500; white-space: nowrap; }
.subject-edit-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-color); background: transparent; cursor: pointer; }
.subject-edit-button:hover { background: var(--card-background-color); border-color: var(--primary-color); }
#export-area.notebook-view .subject-edit-button { position: absolute; right: 0; top: 0; width: var(--notebook-line); height: var(--notebook-line); border: 0; }
.editor-item-footer { display: contents; }
.settings-modal .theme-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) { .settings-modal .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.editor-add-controls.editor-append-bottom { display: flex; width: calc(100% - 12px); margin: 8px 6px; }
.editor-append-bottom .editor-add-btn { flex: 1; }
.editor-append-bottom .button { min-height: 44px; border-style: dashed; box-shadow: none; }
#editor-template-bottom .editor-template-picker { box-sizing: border-box; width: calc(100% - 12px); margin: 8px 6px; }
.today-info { margin: 0; text-align: center; font-size: 12px; }
.settings-group { padding: 18px 0; border-top: 1px solid #e2e8f0; }
.settings-group h3 { margin: 0 0 18px; font-size: 13px; color: #64748b; letter-spacing: .08em; }
.settings-group .settings-item { margin-bottom: 20px; }
.settings-group .settings-item:last-child { margin-bottom: 0; }
.settings-group.identity-settings { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.identity-settings h3 { margin-bottom: 6px; }
.identity-settings p { margin: 0; font-size: 13px; color: var(--text-color); }
.identity-settings .switch-identity { width: auto; margin: 0; }
body.dark-mode .settings-group { border-color: #334155; }
body.dark-mode .settings-group h3 { color: #94a3b8; }
.editor-scroll-content { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; column-gap: 12px; }
.editor-scroll-content.quick-tools-open { grid-template-columns: minmax(0, 1fr) 116px; }
.editor-scroll-content > .editor-toolbar { grid-column: 1 / -1; grid-row: 1; }
.editor-scroll-content > .editor-panel { grid-column: 1; grid-row: 2; min-width: 0; }
.editor-scroll-content > .editor-quick-panel { grid-column: 2; grid-row: 2; position: sticky; top: 0; margin: 0; padding: 10px; border-radius: 12px; max-height: max(140px, calc(100dvh - 380px)); overflow-y: auto; scrollbar-width: thin; }
.editor-quick-panel .quick-insert-bar { display: flex; flex-direction: column; gap: 6px; padding: 0; }
.editor-quick-panel .quick-insert-label { margin: 0 0 4px; font-size: 12px; }
.editor-quick-panel .quick-btn { width: 100%; min-width: 0; padding: 7px 4px; margin: 0; font-size: 12px; }
.quick-tools-toggle { order: 3; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: transparent; color: var(--text-color); cursor: pointer; white-space: nowrap; }
.quick-tools-toggle[aria-expanded="true"] { background: #dbeafe; color: #1d4ed8; }
.editor-toolbar .editor-mode-switch { margin-left: auto; }
body.dark-mode .editor-mode-btn.active { background: #e6c84a; color: #241e09; }
.editor-item-order .order-handle { width: 22px; height: 44px; border: 0; border-radius: 8px; background: rgba(148,163,184,.12); color: #64748b; font-size: 22px; cursor: grab; }
.editor-item-order .order-handle:active { cursor: grabbing; background: rgba(59,130,246,.18); }
.editor-item-order .order-step { width: 36px; height: 40px; display: grid; place-items: center; border-radius: 9px; border-color: var(--border-color); background: var(--card-background-color); color: var(--primary-color); }
.order-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.order-step:active:not(:disabled) { background: var(--primary-light-color); transform: scale(.94); }
.editor-homework-item.is-dragging { opacity: .38; background: rgba(59,130,246,.1); border: 1px dashed #60a5fa; }
.editor-homework-item.drag-target { outline: 2px solid #60a5fa; outline-offset: -2px; background: rgba(59,130,246,.08); }
.editor-scroll-frame { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.editor-scroll-frame > .editor-scroll-content { min-height: 0; }
.editor-scroll-zone { position: absolute; z-index: 20; left: 4px; right: 4px; display: flex; justify-content: center; align-items: center; gap: 8px; height: 42px; border: 1px solid #93c5fd; border-radius: 12px; background: #eff6ffee; color: #1e40af; box-shadow: 0 3px 12px #17255418; pointer-events: auto; font-size: 12px; font-weight: 600; }
.editor-scroll-zone * { pointer-events: none; }
.editor-scroll-zone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-zone-up { top: 0; }
.scroll-zone-down { bottom: 0; }
.editor-scroll-zone.active { background: #dbeafe; border-color: #3b82f6; }
body.dark-mode .editor-scroll-zone { background: #182d45ee; border-color: #597fae; color: #dbeafe; }
body.dark-mode .editor-scroll-zone.active { background: #25466b; border-color: #93c5fd; }
.editor-homework-item .editor-item-delete { display: flex; align-items: center; justify-content: center; padding: 9px; min-width: 36px; height: 38px; }
.editor-item-actions { display: flex; gap: 5px; flex-shrink: 0; }
.editor-item-mic { display: flex; align-items: center; justify-content: center; width: 36px; height: 38px; padding: 8px; border: 1px solid #a7d8c6; border-radius: 10px; background: #ecfdf5; color: #065f46; cursor: pointer; }
.editor-item-mic.recording { background: #fff1f2; color: #9f1239; border-color: #fb7185; box-shadow: 0 0 0 3px #fb718530; }
.editor-item-mic:disabled { opacity: .55; cursor: default; }
.voice-preview-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: #0008; }
.voice-preview-dialog { width: min(520px, 100%); max-height: 85dvh; overflow: auto; box-sizing: border-box; padding: 24px; border-radius: 20px; background: var(--card-bg, #fff); color: var(--text-color); border: 1px solid var(--border-color); box-shadow: 0 20px 60px #0004; }
.voice-preview-dialog p { font-size: 13px; line-height: 1.6; }
.voice-preview-input, .paste-row-input { box-sizing: border-box; width: 100%; min-height: 90px; padding: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: transparent; color: var(--text-color); font: inherit; resize: vertical; }
.paste-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.paste-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; margin: 12px 0; padding: 14px; align-items: start; border: 1px solid var(--border-color); border-radius: 14px; background: var(--card-background-color, #fff); box-shadow: 0 3px 10px #132d2010; }
.paste-row-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.paste-row-actions .button { padding: 6px 10px; font-size: 12px; }
.paste-row-input { min-height: 60px; }
.paste-editor:focus { outline: none; }
.paste-editor:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; border-radius: 12px; }
.paste-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.paste-toolbar p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-light-color); }
.paste-toolbar button { flex-shrink: 0; }
.paste-empty { padding: 32px 16px; text-align: center; border: 1px dashed var(--border-color); border-radius: 14px; color: var(--text-light-color); }
.paste-empty strong { color: var(--text-color); }
.paste-empty p { font-size: 13px; }
.paste-row-number { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #065f46; background: #d1fae5; font-size: 12px; font-weight: 700; }
.paste-row-content { min-width: 0; }
.paste-rendered { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 8px; background: #f3f8f6; color: var(--text-color); overflow-wrap: anywhere; }
.paste-rendered .homework-text { white-space: pre-wrap; min-width: 0; flex: 1 1 180px; }
.paste-preview-label { font-size: 11px; color: var(--text-light-color); }
.paste-row.needs-submission { border-left: 3px solid #d59c36; }
.paste-row.school-submission { border-left: 3px solid #3b82f6; }
.paste-row.needs-submission .paste-rendered { background: #fff8e7; }
.paste-row.school-submission .paste-rendered { background: #edf5ff; }
.paste-remove { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; }
body.dark-mode .paste-rendered { background: #141414; }
body.dark-mode .paste-row-number { background: #164536; color: #b8f7db; }
body.dark-mode .paste-row.needs-submission .paste-rendered { background: #3b2b19; }
body.dark-mode .paste-row.school-submission .paste-rendered { background: #203b52; }
body.dark-mode .voice-preview-dialog { background: #181818; }
.voice-raw { max-height: 80px; overflow: auto; overflow-wrap: anywhere; user-select: text; }
body.dark-mode .editor-item-mic { background: #164536; color: #edfff6; border-color: var(--primary-color); }
body.dark-mode .editor-item-mic.recording { background: #542d35; color: #ffd0d8; border-color: #fb7185; }
@media (max-width: 1100px) { .editor-item-actions { flex-direction: column; } }
.empty-add-subject small { max-width: 260px; padding: 0 12px; color: #64748b; font-size: 13px; font-weight: 400; line-height: 1.6; }
.board-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.empty-state-symbol { font-size: 40px; opacity: .5; }
.board-empty strong { font-size: 18px; color: var(--text-color); }
.board-empty p { margin: 0; font-size: 13px; line-height: 1.7; }
body.dark-mode .empty-add-subject small { color: #94a3b8; }
@media (max-width: 1000px) {
  .editor-scroll-content.quick-tools-open { grid-template-columns: minmax(0, 1fr) 92px; }
  .editor-scroll-content > .editor-panel { padding: 14px; }
  .editor-homework-list { padding: 6px; }
  .editor-homework-item { gap: 7px; }
}

/* Keep phone editors readable, with actions outside the scrolling content. */
@media (max-width: 768px) {
  .subject-create-modal, .editor-modal { box-sizing: border-box; width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 16px; }
  .subject-create-modal { display: flex; flex-direction: column; overflow: hidden; }
  .subject-create-header { margin-bottom: 14px; }
  .subject-create-header h2 { font-size: 22px; }
  .subject-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow-y: auto; min-height: 0; }
  .subject-choice { padding: 10px 8px; gap: 8px; }
  .subject-choice-icon { width: 30px; height: 36px; flex-shrink: 0; }
  .subject-choice-arrow { display: none; }
  .subject-create-actions { margin-top: 12px; flex-shrink: 0; }
  .editor-titlebar { margin: 0 0 12px; padding: 0 0 12px; gap: 8px; }
  .editor-titlebar p, .editor-toolbar-label, .visual-editor-panel .editor-panel-tip { display: none; }
  .editor-title-meta { flex-shrink: 0; white-space: nowrap; }
  .editor-panel-header { gap: 8px; margin-bottom: 10px; }
  .visual-editor-panel .editor-panel-header { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .editor-panel-header h3 { font-size: 16px; }
  .editor-scroll-content { min-height: 0; }
  .editor-toolbar { flex-direction: row; gap: 8px; }
  .editor-mode-switch { display: flex; width: 100%; }
  .editor-mode-btn { flex: 1; min-width: 0; padding: 10px 4px; }
  .editor-scroll-content.quick-tools-open { grid-template-columns: minmax(0, 1fr); }
  .editor-scroll-content > .editor-quick-panel { grid-column: 1; grid-row: 2; position: static; max-height: 120px; }
  .editor-scroll-content.quick-tools-open > .editor-panel { grid-row: 3; }
  .editor-quick-panel .quick-insert-bar { flex-direction: row; flex-wrap: wrap; }
  .editor-quick-panel .quick-btn { width: auto; padding: 8px; }
  .editor-scroll-content > .editor-panel { padding: 8px; min-width: 0; }
  .editor-homework-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .editor-item-input { width: 100%; min-width: 0; box-sizing: border-box; font-size: 16px; }
  .editor-item-footer { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; }
  .editor-item-tags { flex: 1 1 150px; min-width: 0; max-width: 100%; flex-direction: row; flex-wrap: wrap; padding-top: 0; gap: 6px 10px; }
  .editor-item-tags label { min-height: 36px; }
  .editor-item-actions { flex-direction: row; justify-content: flex-end; margin-left: auto; }
  .editor-item-mic, .editor-homework-item .editor-item-delete { min-width: 44px; height: 44px; }
  .editor-actions { flex-shrink: 0; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .editor-actions .button { min-height: 44px; }
  .editor-textarea-single, .paste-row textarea { font-size: 16px; }
}