/* Elementary-school notebook: screen presentation only; never changes printed slips. */
:root {
  --ink: #293d37;
  --muted: #646658;
  --lav: #567967;
  --lav-dark: #315c48;
  --lav-light: #e6eddf;
  --line: #d5d4bf;
  --paper: #fffdf5;
  --bg: #eee9d9;
  --danger: #a83c38;
  --ui-accent: #315c48;
  --ui-glass: #fffdf5;
  --shadow: 0 10px 28px rgba(62,62,36,.08);
}
body { background: var(--bg); color: var(--ink); }
body::before { content: none; }
::selection { background: #d9e5c4; color: #213d2d; }
input, textarea { caret-color: #315c48; }
* { scrollbar-color: #a0ac91 #f2efdf; scrollbar-width: thin; }
a { color: #315c48; text-underline-offset: .2em; }
input::placeholder, textarea::placeholder { color: #707163; }
:is(button,a,summary,input,select,textarea,[tabindex]):focus-visible {
  outline-color: #315c48;
}
.topbar { background: #fbf8ec; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-bottom: 1px solid #c9ccb7; }
.brand-mark { background: #315c48; border-color: #315c48; border-radius: 4px 10px 10px 4px; width: 42px; height: 46px; }
.brand-mark svg { width: 27px; height: 30px; }
.brand strong { color: #2d493b; letter-spacing: .01em; }
.brand span, .eyebrow { color: #5d6c57; }
.topbar .demo-badge { color: #58694d; }
.btn, .tab, .nav-action, .nav-more-toggle { border-radius: 7px; }
.btn:hover { transform: none; box-shadow: none; }
.btn.primary, .top-actions .nav-primary { background: #315c48; border-color: #315c48; color: #fffdf5; box-shadow: none; }
.btn.primary:hover, .top-actions .nav-primary:hover { background: #234735; }
.btn.secondary, .top-actions .nav-admin { color: #31503d; background: #e5ecd9; border-color: #acbba0; }
.btn.secondary:hover, .top-actions .nav-admin:hover { background: #d8e3cc; }
.btn.ghost, .nav-more-toggle { color: #3d4c3e; background: #fffdf5; border-color: #d5d4bf; box-shadow: none; }
.btn.danger { color: #a13d36; }
.nav-more-panel { background: #fffdf5; border-color: #d5d4bf; border-radius: 10px; backdrop-filter: none; box-shadow: 0 10px 25px #39412a20; }
.demo-banner { color: #505d3c; background: #f7f2d7; border-color: #d5cd9f; border-radius: 8px; box-shadow: none; backdrop-filter: none; }
.demo-banner p, .demo-banner > span, .demo-banner button { color: #676344; }
.class-card { background: #f6f2df; border: 1px solid #b9c3aa; border-radius: 8px; position: relative; }
.class-card > strong { border-bottom: 1px solid #a5b195; padding-bottom: 9px; color: #31503d; }
.class-card .eyebrow { display: none; }
.class-card .class-lock { border-color: #d4d6bf; color: #617052; }
.nav-class-switch select { background: #fffdf5; border-color: #bfc6af; color: #374c3d; border-radius: 5px; }
.tabs { gap: 6px; }
.tab { color: #53614b; }
.tab:hover { background: #e4e7d6; }
.tab.active { color: #244c37; background: #dce7cf; border-color: #afbe9f; }
.class-tools { border-color: #cbd0b9; }
.role-pill { background: #fffdf5; border-color: #d1d1bc; color: #626958; }
.role-pill.selected { background: #dce7cf; border-color: #afbe9f; color: #31503d; }
.date-title { color: #31503d; font-variant-numeric: tabular-nums; }
.date-toolbar { padding-bottom: 10px; border-bottom: 1px solid #b7c3a8; }
.content-section { background: #fffdf5; border: 1px solid #d2d0b9; border-radius: 10px; box-shadow: 0 8px 24px #45442d0a; backdrop-filter: none; -webkit-backdrop-filter: none; }
.section-heading { border-bottom: 3px double #b9c8b1; padding-bottom: 18px; }
.section-heading h2, .admin-heading h1, .help-intro h1, .help-section h2 {
  color: #304b39; font-family: "Noto Serif TC", "PMingLiU", "Songti TC", serif; font-weight: 800; letter-spacing: .04em;
}
.section-heading p { color: #696b59; }
.cloud-status { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; color: #646658; }
.sync-options summary { color: #52634b; }
.status-line, .status-line .updated { color: #646658; }
.dot.draft { background: #a77835; }
.dot.live { background: #4d7850; }
.assignment-card.editor-card { border-color: #c9d0b9; background: #fffef9; border-radius: 8px; }
.editor-card label { color: #496046; }
.editor-card input, .editor-card textarea { background: #fffef9; border-color: #bcc5ae; border-radius: 5px; color: #293d37; }
.editor-card .drag-mark { color: #728164; border-color: #bec8b1; background: #f5f6ea; border-radius: 5px; }
.editor-card.drag-over { border-color: #648553; box-shadow: 0 0 0 2px #d8e6c9; }
.publish-bar { border-top: 1px solid #b9c8b1; }
.published-card { background: #fffef9; border-color: #cbd3bc; border-radius: 6px; }
.assignment-kicker { color: #3b6346; }
.assignment-range, .assignment-note { color: #5d6652; }
.assignment-note { border-color: #d0d5bf; }
.empty-state { background: #faf8eb; color: #4f6146; border-color: #c6cdb5; border-radius: 8px; }
.empty-icon { color: #819567; }
.print-surface { padding-top: 24px; }
.print-surface .section-heading { border-bottom: 3px double #9fb596; }
.print-surface .section-actions label { background: #f4f5e8; border-color: #cbd3bc; border-radius: 6px; color: #566149; }
.print-surface input[type=range] { accent-color: #456c47; }
.print-surface output { color: #31503d; }
.contact-book:not(:fullscreen):not(:-webkit-full-screen) {
  background-color: #fffdf2;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 31px, #8ba47716 31px, #8ba47716 32px), repeating-linear-gradient(0deg, transparent 0, transparent 31px, #8ba47716 31px, #8ba47716 32px);
  border-color: #acbf9b; border-radius: 4px; box-shadow: inset 0 0 0 5px #fffdf2;
}
.contact-date, .contact-item { border-color: #aec09b; }
.contact-date { color: #4c5b43; }
.contact-item > strong { color: #396243; }
.contact-item > small, .contact-item > em { color: #6d705a; }
.contact-book .zhuyin-stack { color: #526f45; }
.day-card, .calendar-day { border-color: #cbd3bc; background: #fffef7; border-radius: 5px; }
.day-card.selected, .calendar-day.selected { background: #e9efd9; border-color: #7e9c6c; }
.day-card-head { color: #31503d; border-color: #c2cfb1; }
.calendar-weekdays { color: #536546; }
.calendar-dot { background: #e5edda; color: #405d36; }
.calendar-day.muted { background: #f3f1e5; }
.table-scroll-hint { color: #646658; }
.submission-table-wrap { border-color: #c1cdb0; border-radius: 6px; }
.submission-table thead th, .submission-table thead th:first-child { background: #eaf0dc; color: #3f5735; }
.submission-table tbody th, .submission-table td { background: #fffef7; border-color: #d4ddc4; }
.submissions-section .student-seat { background: #e6edda; color: #405c35; border-radius: 5px; }
.submissions-section .assignment-stats { color: #5f6853; }
.summary-card { border-radius: 7px; backdrop-filter: none; }
.status-select.status-submitted { color: #2e613f; background: #e4efdc; }
.status-select.status-missing { color: #983f38; background: #fae9de; }
.student-select-control input { accent-color: #456c47; }
.login-modal, .application-modal { background: #fffdf5; border: 1px solid #c3cdb2; border-radius: 12px; box-shadow: 0 16px 50px #2c3d2833; }
.modal-backdrop { background: #283a2959; backdrop-filter: blur(4px); }
.application-modal h2, .login-modal h2 { color: #304b39; }
.application-fields input, .application-fields textarea, .application-fields select, .login-field input, .login-field textarea { border-color: #bdc8ae; background: #fffef9; }
.application-feedback { background: #edf2e1; color: #405936; }
.application-receipt { border-color: #c5cfb7; background: #fffef9; border-radius: 8px; }
.entry-choice-row { background: #fffef9; border-color: #bdc8ae; border-radius: 7px; }
.entry-choice-row:hover { background: #edf2e1; border-color: #6b875a; }
.entry-choice-grid { border-color: #c9d0b9; }
.admin-page .admin-summary > div { background: #edf1df; border-color: #d4dbc4; border-radius: 7px; }
.admin-page .admin-summary strong { color: #3e6545; }
.admin-tabs { border-color: #bdc8ae; background: #f6f5e9; }
.admin-tabs button { color: #53614b; border-radius: 7px; }
.admin-tabs button.active { background: #dce7cf; border-color: #afbe9f; color: #244c37; }
.admin-page .admin-card { background: #fffef9; border-color: #c5cfb7; border-radius: 8px; }
.admin-page input:not([type=checkbox]), .admin-page select, .admin-page textarea { border-color: #bdc8ae; background: #fffef9; border-radius: 5px; }
.admin-error { background: #fae9de; color: #953b33; }
.parent-homework-panel, .parent-status-panel { background: #fffef9; border-color: #cbd3bc; border-radius: 7px; }
.parent-status-card { background: #fffef9; border-color: #cbd3bc; border-radius: 7px; }
.recent-dates { background: #f1f3e3; border-color: #cbd3bc; box-shadow: none; backdrop-filter: none; }
.help-roles a, .help-section { background: #fffdf5; border-color: #c3cdb2; border-radius: 10px; box-shadow: none; }
.help-role-icon { background: #e6edda; border-radius: 8px; }
.help-steps li { background: #fffef9; border-color: #cbd3bc; border-radius: 6px; }
.help-steps li::marker { color: #3d6544; }
.help-steps p { color: #5d6652; }
.help-note { background: #f5efd4; color: #645831; border-radius: 6px; }
.site-footer { border-color: #c7ceb7; color: #626958; }
.footer-brand strong, .footer-brand span, .footer-note { color: #626958; }
@media (max-width:600px) {
  .content-section { border-radius: 8px; }
  .class-card > strong { border: 0; padding: 0; }
  .section-heading h2 { font-size: 25px; }
  .brand-mark { width: 35px; height: 39px; }
  .contact-book:not(:fullscreen):not(:-webkit-full-screen) { background-size: auto; }
}

.copy-class-list { display: grid; gap: 8px; max-height: 270px; overflow: auto; margin: 12px 0; }
.copy-class-option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.copy-class-option input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--ui-accent); }
.copy-class-option strong, .copy-class-option small { display: block; }
.copy-class-option small { margin-top: 4px; color: var(--muted); }
.copy-results { line-height: 1.8; padding-left: 24px; }
.class-name-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }