:root { --folio-gold:#B8A47A; --folio-ink:#2A2A2A; --folio-cream:#FBF8F1; }
* { box-sizing:border-box; }
/* The `hidden` attribute must always win. Several elements set
   display:flex/grid, which would otherwise override the UA [hidden] rule
   (author beats UA) and leave "hidden" elements visible. */
[hidden] { display: none !important; }
body { margin:0; font-family:"Songti TC","Songti SC",Georgia,serif;
  color:var(--folio-ink); background:var(--folio-cream); line-height:1.7; }
.wrap { max-width:760px; margin:0 auto; padding:24px 16px; }
.card { background:#fff; border:1px solid #ece4d4; border-radius:14px;
  padding:24px; box-shadow:0 6px 24px rgba(0,0,0,.05); }
h1 { font-size:22px; letter-spacing:2px; color:#4A3A2A; }
label { display:block; font-size:14px; margin:14px 0 6px; }
input { width:100%; padding:12px; border:1px solid #d9cdb3; border-radius:10px;
  font-size:16px; }
button { width:100%; margin-top:18px; padding:13px; border:none; border-radius:10px;
  background:var(--folio-gold); color:#fff; font-size:16px; cursor:pointer; }
button.secondary { background:transparent; color:var(--folio-gold);
  border:1px solid var(--folio-gold); }
.error { color:#a23; font-size:14px; margin-top:12px; min-height:18px; }
.report-list a { display:block; padding:12px; border:1px solid #eee; border-radius:10px;
  margin:8px 0; text-decoration:none; color:#4A3A2A; }
.row { display:flex; gap:10px; }
.row button { margin-top:0; }

/* =========================================================
   Report page — full-viewport layout
   Scoped to body.report-page so the login page is untouched.
   ========================================================= */
body.report-page {
  margin: 0;
  /* dvh = dynamic viewport height; on iOS this excludes Safari's varying
     chrome, so the iframe fits without being clipped by the toolbar. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--folio-cream);
}
.report-page .topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Respect the iPhone status-bar/notch via env(safe-area-inset-*).
     max() keeps a sensible minimum on browsers that report 0. */
  padding-top: max(10px, env(safe-area-inset-top));
  padding-right: max(14px, env(safe-area-inset-right));
  padding-bottom: 10px;
  padding-left: max(14px, env(safe-area-inset-left));
  background: #fff;
  border-bottom: 1px solid #ece4d4;
}
.report-page .topbar h1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 1px;
  white-space: nowrap;
}
/* Co-brand eyebrow (used in both student + teacher topbars) */
.topbar-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.topbar-brand {
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--folio-gold);
  white-space: nowrap;
}
.report-page .topbar-meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: #6b5d44;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-page .topbar-meta select {
  width: auto;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid #d9cdb3;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  color: var(--folio-ink);
}
.report-page .topbar-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.report-page .topbar-actions button {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 8px;
}
.report-page #status {
  flex: 0 0 auto;
  padding: 16px;
  color: #4A3A2A;
}
/* ---- test list (student landing) ---- */
.report-page .test-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.report-page .test-card {
  width: 100%;
  margin: 0;
  text-align: left;
  background: #fff;
  border: 1px solid #ece4d4;
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  font-family: inherit;
  color: var(--folio-ink);
}
.report-page .test-card:hover { background: #fbf8f1; }
.report-page .test-card-title { font-size: 17px; font-weight: 700; color: #4A3A2A; letter-spacing: 1px; }
.report-page .test-card-sub { font-size: 13px; color: #6b5d44; }

/* ---- test detail (tabs + viewer) ---- */
.report-page .test-detail {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* tab classes are standalone so both report.html and the teacher overlay use them */
.tabbar {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  background: #fbf8f1;
  border-bottom: 1px solid #ece4d4;
}
.tabbar .tab {
  width: auto;
  margin: 0;
  padding: 8px 18px;
  border: 1px solid #d9cdb3;
  border-radius: 999px;
  background: #fff;
  color: #6b5d44;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.tabbar .tab.current { background: var(--folio-gold); border-color: var(--folio-gold); color: #fff; }
.tabbar .tab.pending { opacity: .55; }
.tab-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6b5d44;
  font-size: 15px;
  padding: 40px 20px;
}
.report-page .pdf-row {
  flex: 0 0 auto;
  padding: 10px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: #fff;
  border-top: 1px solid #ece4d4;
}
.report-page .pdf-row button { width: auto; margin: 0; padding: 9px 16px; font-size: 14px; }
.report-page .t2-back {
  background: transparent; border: 0; font-size: 22px; color: #4A3A2A;
  cursor: pointer; width: 34px; height: 34px; border-radius: 8px; padding: 0; flex-shrink: 0;
}

.report-page .viewer-wrap {
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden;
  background: var(--folio-cream);
}
.report-page .viewer-wrap iframe.report {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  margin: 0;
}
/* Modal */
.report-page .modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-page .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
}
.report-page .modal-card {
  position: relative;
  background: #fff;
  padding: 22px;
  border-radius: 14px;
  width: 92%;
  max-width: 380px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.report-page .modal-card h2 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #4A3A2A;
}
.report-page .modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #888;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.report-page .modal-close:hover { background: rgba(0,0,0,.05); color: #333; }
/* =========================================================
   Teacher portal v2 — class dashboard as main page,
   roster as a slide-out sidebar, student report as a
   full-screen overlay. Page scrolls natively (no inner iframe
   scroll), so iOS Safari touch scrolling Just Works.
   ========================================================= */
body.teacher-v2 {
  margin: 0;
  min-height: 100dvh;
  background: var(--folio-cream);
  font-family: "Songti TC","Songti SC",Georgia,serif;
  color: var(--folio-ink);
  line-height: 1.7;
}
.t2-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-bottom: 1px solid #ece4d4;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-right: max(14px, env(safe-area-inset-right));
  padding-bottom: 10px;
  padding-left: max(14px, env(safe-area-inset-left));
}
.t2-topbar h1 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 1px;
  color: #4A3A2A;
  white-space: nowrap;
}
.t2-dash-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #6b5d44;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t2-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.t2-actions button {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: none;
  background: var(--folio-gold);
  color: #fff;
  cursor: pointer;
}
.t2-actions button.secondary {
  background: transparent;
  color: var(--folio-gold);
  border: 1px solid var(--folio-gold);
}
.t2-badge {
  font-size: 12px;
  opacity: .85;
  margin-left: 2px;
}
.t2-cohort-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  background: #fbf8f1;
  border-bottom: 1px solid #ece4d4;
  font-size: 13px;
  color: #6b5d44;
}
.t2-cohort-bar select {
  padding: 5px 8px;
  border: 1px solid #d9cdb3;
  border-radius: 8px;
  background: #fff;
  color: var(--folio-ink);
  font-size: 13px;
}
.t2-main {
  padding: 18px max(14px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.t2-status {
  color: #6b5d44;
  font-size: 14px;
  padding: 20px 4px;
  text-align: center;
}
.t2-dash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.t2-pdf-page {
  width: 100%;
  max-width: 980px;
  height: auto;
  border: 1px solid #ece4d4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  display: block;
}
.t2-dash-html {
  width: 100%;
  border: 1px solid #ece4d4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  min-height: 80dvh;
}

/* ---------- Sidebar ---------- */
.t2-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 40;
}
.t2-sidebar {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(340px, 86vw);
  background: #fff;
  z-index: 50;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #ece4d4;
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
}
.t2-sidebar.open { transform: translateX(0); }
.t2-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid #ece4d4;
}
.t2-sidebar-header h2 {
  margin: 0;
  font-size: 17px;
  color: #4A3A2A;
}
.t2-close {
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #6b5d44;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
}
.t2-close:hover { background: rgba(0,0,0,.05); }
.t2-roster {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t2-student {
  width: 100%;
  margin: 0;
  padding: 12px;
  background: #fbf8f1;
  border: 1px solid #ece4d4;
  border-radius: 10px;
  color: var(--folio-ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: inherit;
}
.t2-student:hover { background: #f4ecd9; }
.t2-student-name { font-weight: 600; font-size: 14px; }
.t2-student-sub { font-size: 12px; color: #6b5d44; }

/* ---------- Student report overlay (full-screen) ---------- */
.t2-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--folio-cream);
  display: flex;
  flex-direction: column;
}
/* The author `display:flex` above overrides the UA `[hidden]{display:none}`
   rule, so we must restore hidden behaviour explicitly — otherwise the
   overlay covers the whole page on load. */
.t2-overlay[hidden] { display: none; }
.t2-overlay-topbar { position: relative; top: auto; }
.t2-back {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: #4A3A2A;
  cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 8px;
  padding: 0;
}
.t2-overlay h1 {
  flex: 1;
  min-width: 0;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t2-overlay .viewer-wrap {
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden;
  background: var(--folio-cream);
}
.t2-overlay .viewer-wrap iframe.report {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  margin: 0;
}

/* phone tightening */
@media (max-width: 480px) {
  .t2-topbar { gap: 8px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .t2-topbar h1 { font-size: 15px; letter-spacing: 0; }
  .t2-dash-label { font-size: 12px; }
  .t2-actions button { padding: 6px 9px; font-size: 12px; }
  .t2-main { padding: 12px 10px max(24px, env(safe-area-inset-bottom)); }
}

/* ============================================================
   Legacy teacher-page split layout (kept so old links don't break;
   the page itself now uses .teacher-v2). Safe to delete later.
   ============================================================ */
.teacher-page .teacher-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.teacher-page .roster {
  flex: 0 0 290px;
  border-right: 1px solid #ece4d4;
  background: #fff;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.teacher-page .roster-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 4px;
}
.teacher-page .roster-header .roster-label {
  font-size: 12px;
  color: #8b7355;
  margin: 0;
}
.teacher-page .roster-header select {
  flex: 1;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d9cdb3;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}
.teacher-page .roster-divider {
  font-size: 11px;
  letter-spacing: 1px;
  color: #8b7355;
  text-transform: uppercase;
  margin: 6px 4px -2px;
}
.teacher-page .roster-students {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.teacher-page .roster-item {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  background: #fbf8f1;
  border: 1px solid #ece4d4;
  border-radius: 10px;
  color: var(--folio-ink);
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.4;
}
.teacher-page .roster-item:hover { background: #f4ecd9; }
.teacher-page .roster-item.current {
  background: var(--folio-gold);
  border-color: var(--folio-gold);
  color: #fff;
}
.teacher-page .roster-item-title {
  font-weight: 600;
  font-size: 14px;
}
.teacher-page .roster-item-sub {
  font-size: 12px;
  color: #6b5d44;
}
.teacher-page .roster-item.current .roster-item-sub { color: rgba(255,255,255,.85); }
.teacher-page .roster-dashboard {
  background: #fff;
  border: 1px dashed var(--folio-gold);
}
.teacher-page .viewer-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--folio-cream);
}
.teacher-page .teacher-status {
  padding: 14px 16px;
  color: #6b5d44;
  font-size: 14px;
}
.teacher-page .viewer-wrap {
  flex: 1 1 auto;
}

/* Phones: stack roster on top as a horizontal chip strip; viewer below. */
@media (max-width: 720px) {
  .teacher-page .teacher-body { flex-direction: column; }
  .teacher-page .roster {
    flex: 0 0 auto;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #ece4d4;
    padding: 8px 10px;
    gap: 6px;
  }
  .teacher-page .roster-students {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
  }
  .teacher-page .roster-item {
    flex: 0 0 auto;
    width: auto;
    min-width: 130px;
    padding: 8px 10px;
  }
  .teacher-page .roster-divider { display: none; }
  .teacher-page .roster-dashboard {
    /* keep the dashboard pill full-width and prominent on phones */
    width: 100%;
  }
}

/* tiny phones: tighten the topbar so the buttons fit on one row */
@media (max-width: 480px) {
  .report-page .topbar {
    gap: 8px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: 8px;
    padding-left: max(10px, env(safe-area-inset-left));
  }
  .report-page .topbar h1 { font-size: 15px; letter-spacing: 0; }
  .report-page .topbar-meta { font-size: 12px; }
  .report-page .topbar-actions button { padding: 6px 9px; font-size: 12px; }
}

/* ============================================================
   Multi-tenant portal: preview bar, role views, charts
   ============================================================ */
:root { --wc-primary:#8a1f1f; --wc-ink:#2b2b2b; --wc-bg:#f4efe7; --wc-accent:#b08a4f; }
body.preview { margin:0; background:var(--wc-bg); color:var(--wc-ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif; }
.preview-bar { display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 20px; background:#fff; border-bottom:3px solid var(--wc-primary); }
.preview-bar .brand img { height:40px; width:auto; vertical-align:middle; display:block; }
.preview-bar .brand strong { color:var(--wc-primary); font-size:20px; letter-spacing:2px; }
.preview-bar .brand em { color:var(--wc-accent); font-style:normal; font-size:12px; letter-spacing:1px; }
.preview-bar .acct-pick { font-size:14px; }
.preview-bar select { padding:6px 10px; border:1px solid var(--wc-primary); border-radius:6px; font-size:14px; }
.preview-bar .hint { color:#999; font-size:12px; margin-left:auto; }
.view { max-width:760px; margin:0 auto; padding:26px 20px 60px; }
.view h2 { color:var(--wc-primary); border-bottom:2px solid var(--wc-primary); padding-bottom:6px; }
.view .muted { color:#999; font-weight:normal; font-size:14px; }

/* student report cards */
/* student sitting groups: date header → 作文 → 中譯英 */
.sitting { margin:20px 0; }
.sitting-head { display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:2px solid var(--wc-accent,#b08a4f); padding-bottom:5px; margin-bottom:10px; }
.sitting-title { font-weight:800; color:var(--wc-ink,#2b2b2b); font-size:16px; }
.sitting-date { color:#9a8d78; font-size:13px; }
/* teacher/admin bulk-download buttons */
.class-actions { display:flex; gap:10px; margin:6px 0 16px; flex-wrap:wrap; }
.report-card { background:#fff; border:1px solid #e4dcc9; border-left:4px solid var(--wc-primary);
  border-radius:8px; padding:14px 18px; margin:12px 0; }
.rc-top { display:flex; justify-content:space-between; align-items:baseline; }
.rc-top strong { font-size:17px; color:var(--wc-ink); }
.rc-score { color:var(--wc-primary); font-weight:800; font-size:18px; }
.rc-label { color:#998; font-size:13px; margin:4px 0 10px; }
.rc-actions { display:flex; gap:10px; }
.btn { display:inline-block; width:auto; margin:0; background:var(--wc-primary); color:#fff; text-decoration:none;
  padding:7px 16px; border-radius:6px; font-size:14px; border:none; cursor:pointer; }
.btn.ghost { background:#fff; color:var(--wc-primary); border:1px solid var(--wc-primary); }
.btn.sm { padding:4px 12px; font-size:13px; }
.back { margin-bottom:12px; }

/* Student-only essay history. Kept separate from the reusable teacher charts. */
.essay-trend { margin:18px 0 32px; padding:16px 18px 14px; background:#fff;
  border:1px solid #e4dcc9; border-radius:12px; box-shadow:0 8px 20px rgba(73,52,20,.07); outline:none; }
.essay-trend-summary { display:flex; align-items:baseline; gap:9px; min-height:30px; }
.essay-trend-subject { color:var(--wc-ink); font-size:14px; font-weight:800; }
.essay-trend-summary strong { color:var(--wc-primary); font-size:24px; line-height:1; letter-spacing:-.02em; }
.essay-trend-summary strong span { margin-left:2px; color:#9a8d78; font-size:13px; font-weight:700; letter-spacing:0; }
.essay-trend-summary em { padding:3px 7px; border-radius:999px; background:#f8ece9; color:var(--wc-primary);
  font-size:12px; font-style:normal; font-weight:800; }
.essay-trend-chart { position:relative; margin-top:8px; padding-bottom:18px; }
.essay-trend-svg { width:100%; height:auto; display:block; overflow:visible; }
.essay-trend-detail { opacity:0; transform:translateY(-2px); transition:opacity .18s ease, transform .18s ease; }
.essay-trend-gridline { stroke:#eadfca; stroke-width:1; }
.essay-trend-baseline { stroke:#d8c39a; stroke-width:1; }
.essay-trend-rounds { position:absolute; inset:calc(100% - 17px) 0 auto; height:17px; opacity:0;
  transform:translateY(-2px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.essay-trend-rounds span { position:absolute; transform:translateX(-50%); color:#9a8d78; font-family:system-ui,-apple-system,sans-serif;
  font-size:10px; font-weight:650; line-height:17px; white-space:nowrap; }
.essay-trend:hover .essay-trend-detail, .essay-trend:focus-visible .essay-trend-detail,
.essay-trend:hover .essay-trend-rounds, .essay-trend:focus-visible .essay-trend-rounds { opacity:1; transform:none; }
.essay-trend:focus-visible { box-shadow:0 0 0 3px rgba(184,164,122,.28), 0 8px 20px rgba(73,52,20,.07); }
.essay-trend-area { fill:var(--wc-primary); fill-opacity:.08; }
.essay-trend-line { fill:none; stroke:var(--wc-primary); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.essay-trend-node { fill:#fff; stroke:var(--wc-primary); stroke-width:2.5; }
.essay-trend-node.is-latest { fill:var(--wc-primary); }
.essay-trend-label { fill:#786a5b; font-size:12px; font-weight:700; }
@media (max-width:480px) {
  .essay-trend { margin-bottom:28px; padding:14px 14px 12px; }
  .essay-trend-summary { gap:7px; }
  .essay-trend-summary strong { font-size:22px; }
}
@media (hover:none) {
  .essay-trend-detail, .essay-trend-rounds { opacity:1; transform:none; }
}

/* metric panels + charts */
.metric-panel { background:#fff; border:1px solid #e4dcc9; border-radius:8px; padding:14px 18px; margin:16px 0; }
.metric-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.metric-head h3 { margin:0; color:var(--wc-ink); font-size:16px; }
.toggle { display:inline-flex; flex:0 0 auto; }
.toggle button { border:1px solid var(--wc-primary); background:#fff; color:var(--wc-primary);
  padding:4px 14px; cursor:pointer; font-size:13px; white-space:nowrap; }
.toggle button:first-child { border-radius:6px 0 0 6px; }
.toggle button:last-child { border-radius:0 6px 6px 0; border-left:none; }
.toggle button.on { background:var(--wc-primary); color:#fff; }
.chart { width:100%; height:auto; display:block; }
.chart .bar { fill:var(--wc-primary); transition:fill .12s; }
.chart .bar:hover { fill:var(--wc-accent); }
.chart .bar-name { font-size:12px; fill:var(--wc-ink); }
.chart .bar-val { font-size:12px; fill:var(--wc-ink); }
.chart .avg-line { stroke:var(--wc-accent); stroke-width:1.5; stroke-dasharray:4 4; }
.chart .avg-label { font-size:11px; fill:var(--wc-accent); }

/* admin comparison table */
table.cmp { width:100%; border-collapse:collapse; background:#fff; margin:14px 0; font-size:14px; }
table.cmp th, table.cmp td { border:1px solid #e4dcc9; padding:7px 10px; text-align:center; }
table.cmp thead th { background:var(--wc-primary); color:#fff; }
table.cmp td.cls { font-weight:800; color:var(--wc-primary); }

/* Report viewer overlay — reuses report.html's .report-page / .viewer-wrap /
   iframe.report CSS so the iframe context is identical to the proven viewer.
   .ro-overlay replicates body.report-page's full-screen flex column (those
   styles are scoped to body, so we restate them for the div overlay). */
/* ro-host: normal-flow full-viewport report viewer (NOT position:fixed, so the
   report's own position:fixed popups work on iOS). Mirrors body.report-page. */
.ro-host { height:100vh; height:100dvh; display:flex; flex-direction:column;
  overflow:hidden; background:var(--folio-cream,#fff); }
.ro-host .ro-topbar { background:var(--wc-primary,#8a1f1f); color:#fff; }
.ro-host .ro-topbar .topbar-brand { color:#fff; font-size:16px; }
.ro-host .ro-topbar .ro-close { width:auto; margin:0; padding:6px 16px; font-size:14px;
  background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:6px; cursor:pointer; }

/* password show/hide eye toggle on the login form */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye { position: absolute; top: 0; right: 0; height: 100%; width: 44px; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; background: none; border: none;
  color: #9a8d78; cursor: pointer; }
.pw-eye:hover { color: var(--wc-primary, #8a1f1f); }
.pw-eye .eye-hide { display: none; }
.pw-eye.revealed .eye-show { display: none; }
.pw-eye.revealed .eye-hide { display: block; }

/* 分校群組(admin 總覽) */
.branch-group { margin-top: 1.6rem; }
.branch-head {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2f6f4f;
  border-bottom: 2px solid #e3ede7;
  padding-bottom: .35rem;
  margin-bottom: .8rem;
}
.branch-head .branch-n {
  font-weight: 400;
  color: #888;
  font-size: .85rem;
  margin-left: .35rem;
}