/* Light mecha HUD: a bright workspace with Gundam-inspired control accents. */
:root {
  --navy: #183b5a;
  --navy-2: #2d638f;
  --ink: #18364f;
  --muted: #667f92;
  --line: #c9dce8;
  --paper: #f4f8fb;
  --white: #ffffff;
  --purple: #386ca0;
  --purple-soft: #e8f1f8;
  --blue: #218bb9;
  --blue-soft: #e2f5fa;
  --orange: #d48a32;
  --orange-soft: #fff3df;
  --green: #258d72;
  --green-soft: #e6f6ef;
  --red: #c94f57;
  --hud-cyan: #22a8bb;
  --hud-blue: #2b7eb8;
  --hud-yellow: #edbf28;
  --hud-red: #d85058;
  --shadow: 0 16px 34px rgba(35, 77, 108, .10);
  color-scheme: light;
}

html, body, .login-screen, .login-panel, .app-shell, .main-area {
  background: var(--paper);
  color: var(--ink);
}

body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(34, 131, 180, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 131, 180, .065) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 48%, rgba(35, 153, 175, .045) 48% 52%, transparent 52% 100%),
    radial-gradient(circle at 88% 3%, rgba(43, 155, 195, .16), transparent 27rem),
    radial-gradient(circle at 5% 92%, rgba(237, 191, 40, .12), transparent 22rem);
  background-size: 30px 30px, 30px 30px, 220px 220px, auto, auto;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(0deg, rgba(25, 86, 123, .022) 0 1px, transparent 1px 5px);
}

.eyebrow {
  color: #177da9;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 900;
  letter-spacing: .16em;
}

.button, .mini-button, .text-button {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .055em;
}

.button {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.button-primary, .button-dark, .mini-button.primary {
  color: #fff;
  border-color: #1b6f9e;
  background: linear-gradient(135deg, #236f9f, #18577f);
  box-shadow: 0 8px 16px rgba(24, 87, 127, .18);
}

.button-primary::before, .button-dark::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--hud-yellow);
}

.button-primary:hover, .button-dark:hover, .mini-button.primary:hover {
  background: linear-gradient(135deg, #2984b8, #1c6796);
  border-color: #0f96b2;
  box-shadow: 0 10px 21px rgba(24, 87, 127, .24);
}

.button-secondary, .mini-button, .demo-buttons button {
  color: #28516e;
  border-color: #bcd5e4;
  background: #fff;
}

.button-secondary:hover, .mini-button:hover, .demo-buttons button:hover {
  color: #16486d;
  border-color: #4a9dc1;
  background: #edf8fb;
}

.button-danger {
  color: #a9464f;
  border-color: #e9b5b9;
  background: #fff8f8;
}

.button-danger:hover {
  color: #fff;
  border-color: #d9515c;
  background: #d9515c;
}

.login-art {
  color: #1b4562;
  border-right: 1px solid #bad6e6;
  background-image:
    linear-gradient(rgba(40, 132, 177, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 132, 177, .09) 1px, transparent 1px),
    radial-gradient(circle at 72% 30%, transparent 0 17%, rgba(39, 132, 176, .12) 17.2% 17.8%, transparent 18% 31%, rgba(39, 132, 176, .10) 31.2% 31.7%, transparent 32%),
    linear-gradient(145deg, #f9fcff 0%, #e0eff7 56%, #d8efe9 100%);
  background-size: 30px 30px, 30px 30px, 460px 460px, auto;
}

.login-art::before {
  content: "TACTICAL DISPLAY // 01";
  color: #1d7fa8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 900;
  letter-spacing: .2em;
}

.login-art::after {
  inset: 24px;
  border-color: rgba(29, 117, 163, .28);
  clip-path: polygon(0 0, 30% 0, 30% 2px, 70% 2px, 70% 0, 100% 0, 100% 30%, calc(100% - 2px) 30%, calc(100% - 2px) 70%, 100% 70%, 100% 100%, 70% 100%, 70% calc(100% - 2px), 30% calc(100% - 2px), 30% 100%, 0 100%, 0 70%, 2px 70%, 2px 30%, 0 30%);
}

.login-art h1, .login-heading h2, .page-heading h1 {
  color: #173d5c;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.035em;
  text-shadow: none;
}

.login-art p, .login-heading p, .page-heading p { color: #5a748a; }
.login-art .eyebrow { color: #d28a27; }
.login-art-note { color: #1f876e; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.orb { border-color: rgba(32, 139, 181, .35); box-shadow: 0 0 32px rgba(41, 143, 185, .08); }
.orb-one { box-shadow: 0 0 0 28px rgba(38, 144, 185, .045), 0 0 0 84px rgba(38, 144, 185, .022), inset 0 0 35px rgba(38, 144, 185, .08); }
.orb-two { background: rgba(237, 191, 40, .08); border-color: rgba(201, 142, 36, .25); }
.pulse-dot, .status-dot { box-shadow: 0 0 0 4px rgba(37, 141, 114, .12), 0 0 12px rgba(37, 141, 114, .45); }

.login-panel { background: rgba(255, 255, 255, .96); border-left-color: #c9dce8; }
.brand-mark span, .brand-symbol, .avatar, .student-avatar {
  color: #173d5c;
  border-radius: 4px;
  background: linear-gradient(135deg, #f5d34d, #e7ad2d);
  box-shadow: 0 6px 12px rgba(212, 138, 50, .18);
}

.brand-mark strong, .sidebar-brand strong, .user-badge strong { color: #234764; }
.brand-mark small, .sidebar-brand small, .user-badge small, .secure-label { color: #6b879b; }
.stack-form label, .inline-form label, .compact-form label, .form-row label { color: #537088; }

.stack-form input, .inline-form input, .inline-form select, .inline-form textarea,
.compact-form input, .compact-form select, .form-row input, .form-row select,
.date-input, .profile-form input, .attendance-row select {
  color: #23445e;
  border-color: #c3d8e4;
  border-radius: 4px;
  background: #fbfdff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.stack-form input:focus, .inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus,
.compact-form input:focus, .compact-form select:focus, .form-row input:focus, .form-row select:focus,
.profile-form input:focus, .attendance-row select:focus {
  border-color: #2d91b2;
  box-shadow: 0 0 0 3px rgba(45, 145, 178, .14), inset 0 1px 0 #fff;
}

.demo-box, .import-details, .import-preview { border-color: #c9dce8; background: #faffff; }
.demo-box::before { color: #267fa5; background: #faffff; }
.demo-box > div:first-child { color: #284a65; }
.demo-box > div:first-child span:last-child, .privacy-note, .form-error { color: #7890a2; }

.sidebar {
  background-color: rgba(249, 253, 255, .97);
  background-image: linear-gradient(rgba(39, 128, 174, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 128, 174, .045) 1px, transparent 1px), linear-gradient(180deg, rgba(230, 245, 250, .72), rgba(255, 255, 255, .9));
  background-size: 22px 22px, 22px 22px, auto;
  border-right-color: #bed8e6;
  box-shadow: 11px 0 30px rgba(35, 75, 105, .07);
}

.sidebar::after {
  right: -2px;
  width: 3px;
  height: 104px;
  background: linear-gradient(#edbf28 0 34%, #298db7 34% 74%, #d85058 74%);
  box-shadow: none;
}

.sidebar-brand { border-bottom-color: #d6e5ed; }
.sidebar-footer { border-top-color: #d6e5ed; }
.user-badge { border: 1px solid #c4dce8; border-radius: 4px; background: rgba(255, 255, 255, .86); box-shadow: none; }
.nav-section { color: #6a8fa5; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.nav-item { color: #55748a; border-radius: 3px; border-left: 3px solid transparent; }
.nav-item:hover { color: #1d6f97; background: #edf8fb; border-left-color: #73bfd1; }
.nav-item.active { color: #173e5c; background: linear-gradient(90deg, #e5f6f8, #f6fbfd); border-left-color: #258ab6; box-shadow: inset -3px 0 0 #edbf28; }
.nav-item.active::after { background: #edbf28; box-shadow: none; }
.nav-icon, .nav-item.active .nav-icon { color: #2b8bb4; text-shadow: none; }
.nav-item b { color: #fff; background: #d85058; border-radius: 10px; }
.logout-button { color: #58788f; }
.logout-button:hover { color: #c34a53; }

.topbar {
  color: #628197;
  border-bottom-color: #c7dce8;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 5px 18px rgba(34, 72, 98, .04);
}

.topbar::before {
  content: "CLASSROOM CONTROL BUS // ONLINE";
  color: #5d94ad;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
}

.topbar::after {
  background: linear-gradient(90deg, #edbf28 0 9%, transparent 9% 10%, #2488b3 10% 67%, transparent 67% 68%, #d85058 68% 74%, transparent 74%);
  box-shadow: none;
}

.sync-status { color: #23836e; }
.mobile-brand, .icon-button { color: #1d6f97; }
.page-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "system status"
    "content actions";
  column-gap: 30px;
  row-gap: 10px;
  padding: 17px 22px 18px;
  margin-bottom: 24px;
  border: 1px solid #c5dce8;
  border-left: 4px solid #e1b227;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .98), rgba(239, 249, 253, .92)),
    repeating-linear-gradient(90deg, transparent 0 33px, rgba(69, 143, 180, .055) 33px 34px);
  box-shadow: 0 13px 30px rgba(32, 78, 107, .08);
}
.page-heading::before {
  grid-area: system;
  content: "CLASSROOM OS // COMMAND PANEL";
  align-self: center;
  color: #287da3;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
}
.page-heading::after {
  grid-area: status;
  content: "STATUS: READY";
  align-self: center;
  justify-self: end;
  color: #23836e;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
}
.page-heading > div:first-of-type { grid-area: content; min-width: 0; }
.page-heading > .heading-action { grid-area: actions; align-self: end; justify-self: end; max-width: 100%; }
.page-heading h1 { margin: 0 0 7px; font-size: clamp(29px, 2.5vw, 37px); line-height: 1.12; }
.page-heading p { max-width: 700px; line-height: 1.65; }

/* Student roster actions form one compact command console instead of wrapping independently. */
.students-heading-actions {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  gap: 0;
  overflow: hidden;
  border: 1px solid #9ec6da;
  border-radius: 4px;
  background: #f8fcfe;
  box-shadow: 0 8px 18px rgba(30, 91, 125, .08);
}
.students-heading-actions .button {
  min-width: 142px;
  min-height: 46px;
  margin: 0;
  padding: 10px 15px;
  border: 0;
  border-left: 1px solid #c5dce8;
  border-radius: 0;
  justify-content: center;
  box-shadow: none;
  font-size: 12px;
}
.students-heading-actions .button:first-child { border-left: 0; }
.students-heading-actions #table-tent-export { min-width: 190px; }
.students-heading-actions .button-primary { box-shadow: inset 3px 0 #edbf28; }
.students-heading-actions .button:hover { position: relative; z-index: 1; }
.student-source-warning { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; margin: 0 0 18px; padding: 15px 18px; color: #754b13; border: 1px solid #e4bd66; border-left: 4px solid #e5a625; border-radius: 5px; background: linear-gradient(108deg, #fff9e7, #fffdf5); box-shadow: 0 10px 22px rgba(143, 99, 19, .08); }
.student-source-warning > span { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; border-radius: 50%; background: #d88b18; font: 900 16px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.student-source-warning strong { display: block; color: #714914; font-size: 14px; }
.student-source-warning p { margin: 4px 0 0; color: #876533; font-size: 12px; line-height: 1.65; }

/* 試算表是正式來源，但每一頁都要清楚說明目前使用的安全資料層。 */
.sync-health-panel {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 0 0 17px;
  padding: 12px 16px;
  border: 1px solid #b8dce5;
  border-left: 4px solid #2e95bd;
  border-radius: 5px;
  background: linear-gradient(104deg, #f7fdff, #edf9f5);
  box-shadow: 0 9px 20px rgba(28, 95, 121, .07);
}
.sync-health-dot { width: 9px; height: 9px; border-radius: 50%; background: #1fa881; box-shadow: 0 0 0 5px rgba(31, 168, 129, .13); }
.sync-health-panel strong { display: block; color: #176b59; font-size: 13px; }
.sync-health-panel p { margin: 2px 0; color: #4f7280; font-size: 12px; line-height: 1.45; }
.sync-health-panel small { color: #668594; font: 700 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .02em; }
.sync-health-panel[data-state="cached"], .sync-health-panel[data-state="degraded"] { border-color: #e5c06b; border-left-color: #e1a51b; background: linear-gradient(104deg, #fffaf0, #fffdf6); }
.sync-health-panel[data-state="cached"] .sync-health-dot, .sync-health-panel[data-state="degraded"] .sync-health-dot { background: #d99113; box-shadow: 0 0 0 5px rgba(217, 145, 19, .13); }
.sync-health-panel[data-state="cached"] strong, .sync-health-panel[data-state="degraded"] strong { color: #805718; }
.sync-health-panel[data-state="local"] { border-color: #c9d9e4; border-left-color: #628ca4; background: linear-gradient(104deg, #f8fbfd, #f2f7fa); }
.sync-health-panel[data-state="local"] .sync-health-dot { background: #6e8fa1; box-shadow: 0 0 0 5px rgba(88, 128, 151, .13); }
.sync-health-panel[data-state="local"] strong { color: #416578; }
.sync-health-action { min-height: 33px; padding: 6px 12px; color: #135f84; border: 1px solid #9bc5d9; border-radius: 3px; background: #fff; font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; cursor: pointer; }
.sync-health-action:hover { color: #fff; border-color: #167da7; background: #197da5; }

.quick-action, .metric-card, .panel, .student-card, .inline-form, .setting-action, .task-card {
  color: var(--ink);
  border-color: #c8dce8;
  border-radius: 5px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
}

.quick-action, .metric-card, .panel { position: relative; overflow: hidden; }
.quick-action::before, .metric-card::after { content: ""; position: absolute; pointer-events: none; }
.quick-action::before { inset: 0 auto auto 0; width: 20px; height: 3px; background: #edbf28; }
.metric-card::after { inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, currentColor 0 72%, transparent 72%); opacity: .85; }
.quick-action:hover, .task-card:hover, .student-card:hover, .setting-action:hover { border-color: #70b6ce; background: #fbfeff; box-shadow: 0 17px 34px rgba(35, 77, 108, .14); }
.quick-action > span { color: #155b81; border: 1px solid #b8dce9; border-radius: 4px; background: #e2f4f8; box-shadow: none; }
.quick-action strong, .metric-card strong, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .profile-list strong, .setting-action strong { color: #1d425f; }
.quick-action small, .task-main p, .task-due, .task-audience, .announcement-card span, .announcement-card p, .report-card p, .empty-state, .filter-row, .legend, .panel-note, .loading-line { color: #6b8294; }
.metric-card { border-top-width: 2px; }
.metric-card strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.metric-label { color: #4d88a4; letter-spacing: .08em; }
.metric-navy, .metric-blue { color: #2089b6; }
.metric-orange { color: #cf8430; }
.metric-purple { color: #386ca0; }
.metric-green { color: #258d72; }
.panel::before { border-color: #2d88ae; }
.panel-header { border-bottom-color: #d8e6ee; }
.date-chip, .count-pill { color: #1e7196; border: 1px solid #b9dce8; border-radius: 4px; background: #e4f5f8; }
.count-pill { color: #9a681c; border-color: #ead69a; background: #fff6d9; }

.attendance-summary div, .profile-list div, .student-focus, .private-note { border-color: #d2e3eb; background: #f7fbfd; }
.attendance-summary strong, .student-focus strong { color: #244761; }
.attendance-summary span, .student-focus span, .profile-list span, .student-card-footer { color: #718899; }
.section-divider, .announcement-card, .report-card, .audit-row, .event-list { border-color: #dce8ee; }
.task-card.compact { background: transparent; border-bottom-color: #dbe7ed; }
.task-check { border-color: #a9cbd9; background: #fff; }
.task-check.checked { color: #fff; border-color: #258d72; background: #258d72; }
.announcement-icon, .report-icon { color: #a16a1c; border: 1px solid #efd297; background: #fff5d8; }
.focus-ring { color: #1f8ab4; border-color: #b4d7e3; border-top-color: #edbf28; }
.student-check { color: #31566e; border-color: #c8dce7; background: #fbfeff; }
.student-check:has(input:checked) { border-color: #63aabf; background: #e9f7f5; box-shadow: inset 0 0 0 1px rgba(37, 141, 114, .12); }
.student-check input { accent-color: #2089b6; }
.privacy-banner { color: #1d8069; border-color: #b8e1d3; background: #eaf8f3; }
.privacy-banner p { color: #5c9987; }
.toast { color: #20445e; border: 1px solid #65aac3; border-left: 4px solid #edbf28; border-radius: 4px; background: #fafdff; box-shadow: var(--shadow); }
.toast[data-kind="error"] { color: #7d2631; border-color: #db8388; border-left-color: #d85058; background: #fff4f4; }

.seat-planner, .unassigned-panel, .organization-planner, .planning-layout > aside {
  border-color: #c7dce8;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
}
.podium-label { color: #315c76; border-color: #b5d2e0; background: #edf7fa; }
.seat-cell-button { color: #315a72; border-color: #c7dce8; background: #f9fcfe; }
.seat-cell-button:hover, .seat-cell.is-selected .seat-cell-button { border-color: #2d91b2; background: #e7f6f9; }
.seat-cell.is-disabled .seat-cell-button { color: #8a9ca8; background: #eef2f5; }
.seat-disable-toggle, .seat-student-chip, .available-student-card { border-color: #c8dce8; background: #f8fcfe; color: #315b75; }
.seat-student-chip:hover, .seat-student-chip.is-selected, .available-student-card:hover { border-color: #52a7bf; background: #e7f6f8; }

.student-sheet-wrap { border-color: #bdd6e3; background: #fff; box-shadow: var(--shadow); }
.student-sheet-header { color: #e7f6fb; border-bottom-color: #164e71; background: linear-gradient(90deg, #1a5b80, #236f97 65%, #2b9aac); }
.student-edit-form { border-bottom-color: #d5e4eb; background: #fff; }
.student-edit-form:hover, .student-edit-form:focus-within { border-left-color: #edbf28; background: #f7fcfe; }
.student-sheet-row .sheet-cell { border-right-color: #dbe7ed; }
.student-sheet-row input { color: #274a62; }
.student-sheet-row input:focus { color: #173f5c; background: #eaf7fa; box-shadow: inset 0 0 0 1px #2d91b2; }
.student-edit-form input, .student-edit-form textarea { color: #294a62; border-color: #c8dce7; background: #fbfdff; }
.student-edit-form input:focus, .student-edit-form textarea:focus { border-color: #2d91b2; background: #fff; box-shadow: 0 0 0 3px rgba(45, 145, 178, .12); }
.student-edit-secondary .sheet-cell > span, .student-note-field > span, .student-account-note { color: #698497; }
.student-account-note strong { color: #1e7fa5; }

/* Public information board: intentionally omits roster, attendance, seating and personal data. */
.public-screen { min-height: 100vh; color: var(--ink); padding: 20px; position: relative; }
.public-topbar, .public-content { width: min(1180px, 100%); margin-inline: auto; }
.public-topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #c6dce8; background: rgba(255,255,255,.9); box-shadow: var(--shadow); padding: 10px 16px 10px 12px; }
.public-brand { display: flex; align-items: center; gap: 11px; }
.public-brand > span { display: grid; place-items: center; width: 42px; height: 42px; background: linear-gradient(135deg, #e4bd28, #f5d657); color: #183b5a; font: 900 22px/1 "Microsoft JhengHei", sans-serif; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.public-brand strong, .public-brand small { display: block; }
.public-brand strong { color: #173d5a; font-size: 16px; letter-spacing: .08em; }
.public-brand small { margin-top: 3px; color: #4283a6; font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.public-content { padding: 34px 0 48px; }
.public-hero { position: relative; overflow: hidden; border: 1px solid #c2dae7; background: linear-gradient(118deg, rgba(255,255,255,.96), rgba(229,245,249,.88)); box-shadow: var(--shadow); padding: clamp(28px, 5vw, 56px); }
.public-hero::before, .public-hero::after { content: ""; position: absolute; pointer-events: none; }
.public-hero::before { width: 330px; height: 330px; right: -125px; top: -172px; border: 1px solid rgba(35, 135, 175, .32); border-radius: 50%; box-shadow: 0 0 0 34px rgba(35,135,175,.04), 0 0 0 74px rgba(35,135,175,.025); }
.public-hero::after { height: 4px; width: min(55%, 480px); left: 0; bottom: 0; background: linear-gradient(90deg, #e8bd29 0 82%, #2795b6 82% 94%, #d35158 94%); }
.public-hero h1 { position: relative; margin: 12px 0 10px; color: #193e5d; font-size: clamp(30px, 4.3vw, 52px); letter-spacing: .045em; }
.public-hero p { position: relative; max-width: 620px; margin: 0; color: #58778c; font-size: 16px; line-height: 1.75; }
.public-hero-meta { position: relative; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; color: #37799b; font: 800 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.public-board { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 18px; margin-top: 20px; }
.public-panel { min-width: 0; border: 1px solid #cadde7; background: rgba(255,255,255,.94); box-shadow: var(--shadow); padding: 22px; }
.public-panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid #dbe8ee; }
.public-panel-heading h2 { margin: 5px 0 0; color: #234760; font-size: 22px; }
.public-panel-heading > span { color: #3b8ba4; font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 7px 8px; border: 1px solid #b7d8e4; background: #eef8fb; }
.public-announcement-list, .public-task-list { display: grid; }
.public-panel .announcement-card { padding: 15px 0; }
.public-task-card { display: flex; gap: 14px; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #e0ebf0; }
.public-task-card:last-child { border-bottom: 0; }
.public-task-card h3 { margin: 9px 0 4px; color: #234760; font-size: 15px; }
.public-task-card p { margin: 0; color: #637e8f; font-size: 12px; line-height: 1.65; }
.public-task-card time { flex: 0 0 auto; color: #538098; font: 800 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; }
.public-empty, .public-loading { color: #6d8999; padding: 26px 0; font-size: 13px; }
.public-privacy-note { margin: 18px 0 0; color: #698497; font-size: 11px; line-height: 1.7; }
.login-public-link { margin-top: 18px; padding: 0; text-align: left; font-size: 11px; }

/* The roster remains one row per student. Role cells mirror the two assignment modules. */
.student-sheet-header, .student-sheet-row { grid-template-columns: 54px 102px 140px 54px 120px 112px 104px 64px 92px 130px 145px 155px 115px 180px; min-width: 1567px; }
.role-sheet-cell { background: #f4fafc; }
.role-sheet-cell strong { color: #2a7293; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.seat-toolbar select { border: 1px solid #cddfe9; border-radius: 4px; background: #fff; color: #25445f; padding: 8px; font: inherit; }

/* Contrast pass: retain the bright HUD surface while separating controls and reading text more clearly. */
:root { --ink: #123a55; --muted: #536f82; --line: #afcad9; --paper: #f2f7fa; }
.sidebar { border-right-color: #a7c6d6; box-shadow: 12px 0 28px rgba(23, 66, 96, .10); }
.topbar { color: #4d6e84; border-bottom-color: #afcad9; box-shadow: 0 5px 18px rgba(23, 66, 96, .07); }
.nav-section { color: #557d96; }
.nav-item { color: #3e637c; font-weight: 700; }
.nav-item:hover { color: #125e88; background: #e3f3f8; border-left-color: #429bb8; }
.nav-item.active { color: #103d5c; background: linear-gradient(90deg, #dceff5, #f7fcfe); border-left-color: #167ca8; }
.button-secondary, .mini-button, .demo-buttons button { color: #1c4e6d; border-color: #a8c8d8; background: #fcfeff; }
.quick-action, .metric-card, .panel, .student-card, .inline-form, .setting-action, .task-card { border-color: #b4cdda; box-shadow: 0 15px 30px rgba(28, 70, 100, .11); }
.quick-action strong, .metric-card strong, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .profile-list strong, .setting-action strong { color: #153d59; }
.quick-action small, .task-main p, .task-due, .task-audience, .announcement-card span, .announcement-card p, .report-card p, .empty-state, .filter-row, .legend, .panel-note, .loading-line { color: #567185; }
.page-heading { border-bottom-color: #bdd4e0; }
.login-art p, .login-heading p, .page-heading p { color: #4d6d82; }
.stack-form label, .inline-form label, .compact-form label, .form-row label { color: #46667d; }
.public-topbar, .public-hero, .public-panel { border-color: #b2cedc; }
.public-hero p, .public-task-card p { color: #4d6f84; }
.public-panel-heading h2, .public-task-card h3 { color: #173f5b; }

/* Bright public HUD: retain a light page, but make the front door feel like an active command display. */
.public-screen {
  background-image: linear-gradient(rgba(38, 146, 192, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 146, 192, .10) 1px, transparent 1px), radial-gradient(circle at 88% 7%, rgba(34, 184, 206, .19), transparent 30%), radial-gradient(circle at 2% 90%, rgba(246, 204, 47, .20), transparent 27%);
  background-size: 38px 38px, 38px 38px, auto, auto;
}
.public-topbar { border-top: 3px solid #f0be29; border-bottom: 2px solid #2b91ba; background: linear-gradient(100deg, rgba(255,255,255,.98), rgba(236,250,255,.93)); }
.public-hero { border-color: #78b7d3; background: linear-gradient(118deg, rgba(255,255,255,.98) 0%, rgba(220,247,252,.95) 58%, rgba(204,238,249,.92) 100%); box-shadow: 0 22px 46px rgba(23, 94, 129, .18), inset 0 1px 0 #fff; }
.public-hero::before { border-color: rgba(22, 141, 190, .48); box-shadow: 0 0 0 32px rgba(36, 160, 196, .07), 0 0 0 78px rgba(36, 160, 196, .035); }
.public-hero h1 { color: #0d4165; text-shadow: 2px 2px 0 rgba(255,255,255,.8); }
.public-hero .eyebrow { color: #007fb8; }
.public-hero-meta { color: #10648d; }
.public-panel { border-color: #a5cddd; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,252,255,.93)); }
.public-board .public-panel:first-child { border-top: 3px solid #f0be29; }
.public-board .public-panel:last-child { border-top: 3px solid #28a0c5; }
.public-calendar-panel { margin-top: 18px; border-top: 3px solid #e85c67; }

.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.calendar-board-panel, .calendar-add-panel { min-width: 0; }
.calendar-month-switch { display: inline-flex; align-items: center; gap: 8px; }
.calendar-month-switch strong { color: #174a69; min-width: 118px; text-align: center; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.calendar-grid { position: relative; margin-top: 17px; border: 1px solid #79b7d1; background: linear-gradient(145deg, #fafdff 0%, #e8f7fb 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 12px 24px rgba(24, 101, 134, .10); overflow: hidden; }
.calendar-grid::before { content: ""; position: absolute; z-index: 0; inset: 44px 0 0; pointer-events: none; background: linear-gradient(110deg, transparent 0 38%, rgba(43, 164, 198, .055) 38.2% 38.5%, transparent 38.7% 73%, rgba(238, 187, 42, .07) 73.2% 73.45%, transparent 73.7%); }
.calendar-grid-system { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 11px; min-height: 43px; padding: 0 13px; color: #dff8ff; border-bottom: 2px solid #e7bc2d; background: linear-gradient(90deg, #0e3f61 0%, #126b8e 64%, #178aa6 100%); font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.calendar-grid-system span { color: #f4d45c; }
.calendar-grid-system b { color: #d9f8ff; padding: 5px 7px; border: 1px solid rgba(173,239,252,.48); background: rgba(1, 44, 69, .34); font-size: 9px; }
.calendar-grid-system i { color: #d8fbf2; font-style: normal; font-size: 9px; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { position: relative; z-index: 1; color: #275f7e; background: linear-gradient(90deg, #dff2f8, #eefaff); font: 900 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; letter-spacing: .12em; }
.calendar-weekdays span { padding: 10px 3px; border-right: 1px solid #badce8; }
.calendar-day { position: relative; z-index: 1; min-height: 91px; padding: 7px 6px 6px; border-top: 1px solid #c8e1eb; border-right: 1px solid #c8e1eb; background: rgba(255,255,255,.78); }
.calendar-day::after { content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-top: 2px solid rgba(24, 128, 166, .35); border-right: 2px solid rgba(24, 128, 166, .35); }
.calendar-day:nth-child(7n), .calendar-weekdays span:nth-child(7n) { border-right: 0; }
.calendar-day.is-empty { background: rgba(225, 240, 246, .68); }
.calendar-day.is-today { background: linear-gradient(145deg, #fffbe1, #e5fbff); box-shadow: inset 0 0 0 2px #efbc29, inset 5px 0 0 #1e9ab9; }
.calendar-date { display: inline-grid; min-width: 24px; place-items: center; color: #d8f8ff; border-left: 3px solid #edbf28; background: #1b6788; padding: 3px 5px; font: 900 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.calendar-day-events { display: grid; gap: 3px; margin-top: 6px; }
.calendar-day-event { display: block; overflow: hidden; color: #0f5e80; border-left: 3px solid #e8b529; background: rgba(234, 250, 252, .95); padding: 4px 5px; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(91, 174, 199, .16); }
.calendar-day-event.is-google { color: #4e58a0; border-left-color: #4c75c8; background: #edf1ff; }
.calendar-day-event.is-manual { border-right: 2px solid rgba(232, 181, 41, .42); }
button.calendar-day-event { width: 100%; border-top: 0; border-bottom: 0; border-radius: 0; font-family: inherit; font-weight: inherit; line-height: inherit; text-align: left; cursor: pointer; }
button.calendar-day-event.is-editable:hover { color: #0b4865; background: #d7f2f6; }
.calendar-day-events small { color: #5d8295; font-size: 10px; }
.calendar-timeline { display: grid; gap: 0; margin-top: 14px; }
.calendar-event { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 0 12px 9px; border-bottom: 1px solid #dbe8ee; border-left: 3px solid #e7b526; background: linear-gradient(90deg, rgba(242, 253, 255, .86), transparent); }
.calendar-event.is-google { border-left-color: #4c75c8; }
.calendar-event:last-child { border-bottom: 0; }
.calendar-event > time { color: #17739a; font: 800 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.calendar-event strong { display: block; color: #153f5d; font-size: 13px; }
.calendar-event p { margin: 4px 0 0; color: #5e7b8e; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.calendar-source { display: inline-block; margin: 0 5px 4px 0; color: #15799e; border: 1px solid #acd2df; background: #ebf8fa; padding: 2px 4px; font: 800 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; vertical-align: 1px; }
.calendar-event.is-google .calendar-source { color: #53649a; border-color: #c7cfef; background: #f1f2ff; }
.calendar-delete { color: #a9464f; border: 1px solid #e9b5b9; background: #fff8f8; padding: 2px 7px; cursor: pointer; font-size: 16px; line-height: 1; }
.calendar-delete:hover { color: #fff; border-color: #d9515c; background: #d9515c; }
.calendar-actions { display: flex; gap: 6px; align-items: center; }
.calendar-edit { color: #176f94; border: 1px solid #b8d8e4; background: #f2fbfd; padding: 5px 8px; cursor: pointer; font-size: 11px; font-weight: 700; }
.calendar-edit:hover { color: #fff; border-color: #197fa4; background: #197fa4; }
.calendar-add-panel { margin-top: 18px; }
.calendar-event-form { display: grid; grid-template-columns: 145px 145px 120px 120px minmax(135px, .8fr) auto; gap: 12px; align-items: end; }
.calendar-event-form label, .calendar-source-form label { display: grid; gap: 6px; color: #46667d; font-size: 12px; font-weight: 700; }
.calendar-event-form input, .calendar-event-form textarea, .calendar-event-form select, .calendar-source-form input { min-width: 0; color: #23445e; border: 1px solid #c3d8e4; border-radius: 4px; background: #fbfdff; padding: 9px 10px; font: inherit; }
.calendar-event-form textarea { resize: vertical; }
.calendar-event-form .calendar-event-title { grid-column: span 2; }
.calendar-event-form .calendar-event-description { grid-column: 1 / -2; }
.calendar-all-day span:last-child { display: flex; align-items: center; gap: 7px; min-height: 38px; color: #23445e; font-weight: 700; }
.calendar-all-day input { width: 16px; height: 16px; accent-color: #1986aa; }
.calendar-form-actions { display: flex; gap: 8px; align-items: end; }
.calendar-source-form { display: grid; gap: 12px; padding: 0 18px 18px; }
.calendar-source-form p { margin: 0; color: #5a788b; font-size: 12px; line-height: 1.65; }
.calendar-settings-panel { border-top: 3px solid #2a98bd; }
.calendar-board-panel { border-top: 3px solid #1d92b5; }

/* LINE 班級管家：管理頁只呈現設定狀態，不顯示任何 Channel 憑證。 */
.line-bot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.line-bot-grid .panel { min-width: 0; }
.line-bot-grid .panel-wide { grid-column: 1 / -1; }
.line-bot-status { border-top: 3px solid #21b673; }
.line-bot-webhook { border-top: 3px solid #2698bd; }
.line-bot-controls { border-top: 3px solid #e7b526; }
.line-rich-menu-panel { border-top: 3px solid #267ea5; }
.line-status-list { display: grid; gap: 0; padding: 0 18px 8px; }
.line-status-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #dce8ee; font-size: 12px; }
.line-status-list span { color: #5a788b; }
.line-status-list b { color: #174a69; text-align: right; }
.line-bot-status .panel-note, .line-bot-webhook .panel-note { margin: 0; padding: 0 18px 18px; }
.line-bot-webhook > label { display: grid; gap: 6px; padding: 0 18px; color: #46667d; font-size: 12px; font-weight: 700; }
.line-bot-webhook input, .line-bot-form input { min-width: 0; color: #23445e; border: 1px solid #c3d8e4; border-radius: 4px; background: #fbfdff; padding: 9px 10px; font: inherit; }
.line-bot-webhook input { color: #176687; font: 800 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.line-webhook-actions { display: flex; gap: 8px; padding: 12px 18px; }
.line-webhook-actions .button { text-decoration: none; }
.line-bot-form { display: grid; gap: 16px; padding: 0 18px 18px; }
.line-bot-form > label:not(.line-enabled) { display: grid; gap: 6px; color: #46667d; font-size: 12px; font-weight: 700; }
.line-bot-form small { color: #5b798b; font-size: 11px; font-weight: 500; line-height: 1.6; }
.line-enabled { display: grid; grid-template-columns: 21px minmax(0, 1fr); align-items: start; gap: 10px; color: #23445e; cursor: pointer; }
.line-enabled input { width: 18px; height: 18px; margin-top: 2px; padding: 0; accent-color: #1582a9; }
.line-enabled span { display: grid; gap: 3px; }
.line-enabled b { color: #153d59; font-size: 13px; }
.line-rich-menu-layout { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(220px, .8fr); gap: 20px; align-items: center; padding: 0 18px 18px; }
.line-rich-menu-layout img { display: block; width: 100%; border: 1px solid #a8cddb; border-radius: 8px; background: #eefaff; box-shadow: 0 12px 26px rgba(28, 90, 121, .15); }
.line-rich-menu-layout p { margin: 0 0 12px; color: #577488; font-size: 12px; line-height: 1.7; }
.line-rich-menu-layout .button { margin-top: 3px; }

@media (max-width: 860px) {
  .page-heading {
    grid-template-columns: 1fr;
    grid-template-areas:
      "system"
      "content"
      "actions";
  }
  .page-heading::after { display: none; }
  .page-heading > .heading-action { justify-self: stretch; }
  .students-heading-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .students-heading-actions .button, .students-heading-actions #table-tent-export { min-width: 0; }
  .calendar-layout { grid-template-columns: 1fr; }
  .calendar-event-form { grid-template-columns: 1fr 1fr; }
  .calendar-event-form .calendar-event-title, .calendar-event-form .calendar-event-description { grid-column: 1 / -1; }
  .calendar-event-form .calendar-form-actions { grid-column: 1 / -1; }
  .line-bot-grid { grid-template-columns: 1fr; }
  .line-bot-grid .panel-wide { grid-column: auto; }
  .line-rich-menu-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { background-size: 24px 24px, 24px 24px, 170px 170px, auto, auto; }
  .sync-health-panel { grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
  .sync-health-action { grid-column: 2; justify-self: start; }
  .login-art::after { inset: 15px; }
  .login-art::before { top: 18px; left: 28px; font-size: 8px; }
  .sidebar { background-color: #fafdff; }
  .topbar::before, .page-heading::after { display: none; }
  .page-heading { padding: 15px; row-gap: 8px; }
  .students-heading-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .students-heading-actions .button:first-child { grid-column: 1 / -1; }
  .students-heading-actions .button { min-height: 44px; padding: 9px 8px; font-size: 11px; }
  .student-source-warning { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 13px; }
  .panel::before { width: 14px; height: 14px; }
  .metric-card { padding: 14px 12px; }
  .public-screen { padding: 10px; }
  .public-topbar { min-height: 58px; padding: 8px 10px; }
  .public-brand > span { width: 36px; height: 36px; font-size: 18px; }
  .public-brand strong { font-size: 13px; }
  .public-brand small { font-size: 8px; }
  .public-topbar .button { padding: 9px 10px; font-size: 10px; }
  .public-content { padding: 15px 0 34px; }
  .public-board { grid-template-columns: 1fr; gap: 13px; margin-top: 13px; }
  .public-panel { padding: 16px; }
  .public-hero { padding: 27px 20px; }
  .public-task-card { display: grid; }
  .public-task-card time { text-align: left; }
  .student-sheet-header, .student-sheet-row { min-width: 1567px; }
  .calendar-day { min-height: 68px; padding: 4px; }
  .calendar-grid-system { grid-template-columns: 1fr auto; min-height: 38px; padding: 0 9px; font-size: 8px; }
  .calendar-grid-system b { display: none; }
  .calendar-grid-system i { font-size: 8px; }
  .calendar-weekdays { font-size: 8px; letter-spacing: .04em; }
  .calendar-date { min-width: 20px; padding: 2px 3px; font-size: 9px; }
  .calendar-day-event { font-size: 9px; }
  .calendar-month-switch { width: 100%; justify-content: space-between; }
  .line-webhook-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .line-webhook-actions .button { min-height: 42px; text-align: center; }
  .line-status-list > div { align-items: start; }
}