/*
 * frontend.css — 公費留學考試系統 前台（學生端 + 委員端）統一樣式
 *
 * 由原本的 tokens.css + student.css + 21 個畫面的內嵌 <style> 整併而成。
 * 區塊順序：設計變數 → 共用基礎 → 學生各頁 → 委員各頁。
 * 頁面專屬且會與共用樣式撞名的選擇器，以 body.page-* 範圍化（見各區塊註解）。
 */


/* ======================================================================
   設計變數 Design Tokens（原 tokens.css）
   ====================================================================== */
/*
 * Design Tokens — 公費留學考試系統（學生端）
 * jesda-frontend skill — fallback palette（教育部品牌色系）
 */
:root {
  /* Brand — 教育部綠(AA:主/強調色作為白底文字與白字底色皆需 ≥4.5:1,調深勿調淡) */
  --color-primary:       #077C7C;
  --color-primary-hover: #065A5A;
  --color-primary-soft:  #E0F4F4;
  --color-accent:        #0B8280;
  --color-brand-light:   #B1DBCC;

  /* Background */
  --color-bg-header:     #EBF9F9;
  --color-bg-page:       #F5F7F7;
  --color-bg-section:    #FFFFFF;
  --color-bg-card:       #FFFFFF;
  --color-bg-disabled:   #F0F0F0;

  /* Text */
  --color-text-main:     #2C223B;
  --color-text-sub:      #3D3D3D;
  --color-text-muted:    #5E6B6B;
  --color-text-inverse:  #FFFFFF;

  /* Border */
  --color-border-default: #E5E5E5;
  --color-border-light:   #DEEAE6;
  --color-border-strong:  #C4DADA;

  /* Semantic(僅作文字色使用;值需在白底 ≥4.5:1) */
  --color-success:        #2E7D32;
  --color-warning:        #A16207;
  --color-danger:         #BE4040;
  --color-info:           #357ADF;
  --color-info-alt:       #2AC4E3;

  /* Typography */
  --font-body:           'Noto Sans TC', sans-serif;
  --font-numeric:        'Roboto', sans-serif;
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 12px;

  /* Shadow */
  --shadow-card: 0 2px 12px rgba(9, 138, 138, .08);
}



/* ======================================================================
   委員端設計變數 Reviewer tokens（原內嵌 :root）
   ====================================================================== */
:root {
  --blue-700:  #1565c0;
  --blue-600:  #1976d2;
  --blue-50:   #e3f2fd;
  --gray-50:   #f8f9fa;
  --gray-100:  #f0f2f5;
  --gray-200:  #e8eaed;
  --gray-300:  #dadce0;
  --gray-500:  #5f6368; /* AA:作為文字色需 ≥4.5:1 */
  --gray-700:  #444;
  --gray-900:  #202124;
  --orange:    #f57c00;
  --orange-bg: #fff8f0;
  --warning:   #856404;
  --warning-bg:#fff3cd;
  --white:     #ffffff;
  --rv-shadow-sm: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --radius:    8px;
  --topbar-h:  56px;
  --tabbar-h:  48px;
}



/* ======================================================================
   共用基礎 Shared base（原 student.css）
   ====================================================================== */
/* ====================================================================
   student-modern.css — 公費留學考試系統（學生端）現代化重構版
   目標：
   1. 保留既有 class 結構
   2. 升級成更現代、清爽、具有產品感的介面
   3. 強化 header / sidenav / card / form / button 一致性
   ==================================================================== */

/* ─── Reset / Base ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --layout-max-width: 1280px;
  --layout-content-gap: 28px;
  --header-height: 72px;

  --surface-glass: rgba(255, 255, 255, 0.82);
  --surface-card: rgba(255, 255, 255, 0.92);
  --surface-soft: rgba(248, 250, 252, 0.88);

  --border-soft: rgba(15, 23, 42, 0.08);
  --border-softer: rgba(15, 23, 42, 0.05);

  --shadow-xs: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.10);

  --radius-xs: 4px;
  --radius-sm-modern: 8px;
  --radius-md-modern: 12px;
  --radius-lg-modern: 16px;
  --radius-xl-modern: 20px;

  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1rem; /* 文字基本尺寸 16px;個別元件依需要縮小/加大 */
  color: var(--color-text-main);
  margin: 0;
  line-height: 1.65;
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, 0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 22%),
    linear-gradient(180deg, #f8fafc 0%, var(--color-bg-page) 100%);
  min-height: 100vh;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
a:hover {
  color: var(--color-primary-hover);
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-primary-soft);
  outline-offset: 2px;
}

/* ─── Skip Link ─────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* 僅供螢幕報讀器的隱藏標題(無視覺頁標的頁面用來補 h1) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 9999;
}

/* ─── Header (login family) ─────────────────────────────────────── */
.header-login {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--surface-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
}

.header-login-inner {
  max-width: var(--layout-max-width);
  min-height: 72px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-login .site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

.header-login .site-logo img {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

.header-login .site-name {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* 標題斷行控制:窄幅時以詞組為單位換行(教育部公費留學/考試報名系統),
   避免瀏覽器在 CJK 任意處折行拆開「留學」等詞 */
.site-name-seg { display: inline-block; }

.header-login .site-name small {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

/* ─── Header (member family) ─────────────────────────────────────── */
.header-member {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--surface-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
}

.header-member-inner {
  max-width: var(--layout-max-width);
  min-height: 72px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-member .site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

.header-member .site-logo img {
  height: 38px;
  width: auto;
  flex-shrink: 0;
}

.header-member .site-name {
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.header-member .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-member .user-greeting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--border-softer);
  box-shadow: var(--shadow-xs);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.header-member .user-greeting strong {
  color: var(--color-text-sub);
  font-weight: var(--font-weight-medium);
}

/* ─── 共用 SVG 圖示(partials/_icon)────────────────────────────── */
/* 直接嵌在文字旁(無 flex 外層)時對齊基線;flex 外層置中不受影響 */
.sa-icon { vertical-align: -0.125em; flex-shrink: 0; }

/* 密碼顯示切換鈕兩態(partials/_password-toggle):JS toggle .pw-visible */
.password-toggle .pw-eye,
.password-toggle .pw-eye-off { display: inline-flex; align-items: center; }
.password-toggle .pw-eye-off { display: none; }
.password-toggle.pw-visible .pw-eye { display: none; }
.password-toggle.pw-visible .pw-eye-off { display: inline-flex; }

/* ─── Header 招生簡章下載按鈕（login/member 共用） ──────────────── */
.header-login .header-actions,
.header-member .header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.brochure-dropdown { position: relative; }

/* tonal 樣式蓋過 .btn-ghost(該規則在檔案後段,需雙 class 提高權重):
   未登入頁唯一的 header 動作,透明底在玻璃霧面上對比不足 */
.brochure-dropdown .brochure-dropdown__toggle {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(9,138,138,.08);
  border-color: transparent;
  color: var(--color-primary);
}
.brochure-dropdown .brochure-dropdown__toggle:hover:not(:disabled) {
  background: rgba(9,138,138,.15);
  color: var(--color-primary-hover);
}

.brochure-dropdown__caret {
  display: inline-flex;
  align-items: center;
  transition: transform .18s ease;
}
.brochure-dropdown__toggle[aria-expanded="true"] .brochure-dropdown__caret {
  transform: rotate(180deg);
}

.brochure-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  margin: 0;
  padding: 6px;
  list-style: none;
  width: max-content;
  min-width: 100%;
  max-width: min(320px, calc(100vw - 32px));
  background: #FFF;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
}

.brochure-dropdown__item {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background .15s ease;
}
.brochure-dropdown__item:hover {
  background: rgba(9,138,138,.08);
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.footer {
  margin-top: auto;
  background:
    linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: var(--color-text-inverse);
  text-align: center;
  padding: 16px 24px;
  font-size: 0.875rem;
}

.footer a {
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Login Family Layout ────────────────────────────────────────── */
.layout-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.login-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.login-wrapper {
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 28px;
  align-items: start;
}

/* 當只有一個 login-card（無 QA panel）時，改為單欄置中 */
.login-wrapper:has(.login-card:only-child) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.login-card-left {
  min-width: 0;
  max-width: 480px;
}

.login-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl-modern);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

.login-card .card-hd {
  padding: 28px 32px 20px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(99,102,241,.08), rgba(255,255,255,.2));
  border-bottom: 1px solid var(--border-softer);
}

.login-card .card-hd h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.3;
}

.login-card .card-bd {
  padding: 28px 32px 32px;
}

/* ─── Login Q&A Panel ───────────────────────────────────────────── */
.login-qa-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl-modern);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.login-qa-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(255,255,255,.2));
  border-bottom: 1px solid var(--border-softer);
}

.login-qa-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  flex: 1;
}

.login-qa-icon {
  font-size: 1.375rem;
  line-height: 1;
}

.login-qa-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(99,102,241,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.login-qa-toggle-btn:hover {
  background: rgba(99,102,241,.06);
  border-color: var(--color-primary);
}

.qa-toggle-icon {
  display: inline-flex;
  align-items: center;
  transition: transform var(--transition-base);
}

.login-qa-body {
  padding: 12px 16px 16px;
}

.qa-item {
  border: 1px solid var(--border-softer);
  border-radius: var(--radius-sm-modern);
  margin-bottom: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.6);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.qa-item:last-child {
  margin-bottom: 0;
}

.qa-item-open {
  border-color: rgba(99,102,241,.22);
  box-shadow: 0 2px 8px rgba(99,102,241,.06);
}

.qa-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-sub);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.qa-question:hover {
  background: rgba(99,102,241,.05);
  color: var(--color-primary);
}

.qa-item-open .qa-question {
  color: var(--color-primary);
}

.qa-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(99,102,241,.10);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.qa-item-open .qa-q-num {
  background: var(--color-primary);
  color: #fff;
}

.qa-q-text {
  flex: 1;
  line-height: 1.5;
}

.qa-caret {
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--transition-base);
  display: inline-flex;
  align-items: center;
}

.qa-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base), padding-bottom var(--transition-base);
  padding-bottom: 0;
}

.qa-answer-inner {
  padding: 0 20px 16px 46px;
  font-size: 0.9375rem;
  color: var(--color-text-sub);
  line-height: 1.7;
}

.qa-answer-inner p {
  margin: 0 0 10px;
}

.qa-answer-inner p:last-child {
  margin-bottom: 0;
}

.qa-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* ─── Login Right Column (公告欄 + 常見問題 上下堆疊) ─────────────────── */
.login-right-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ─── Login Announcement Panel ──────────────────────────────────── */
/* 與「常見問題」(.login-qa-*) 同一套視覺語言:相同卡片、藍紫表頭、相同列表卡樣式，
   只是公告不做手風琴(內容恆顯示)。維持兩塊一致、不突兀。 */
.login-announce-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl-modern);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.login-announce-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(99, 102, 241, .10), rgba(255, 255, 255, .2));
  border-bottom: 1px solid var(--border-softer);
}

.login-announce-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  flex: 1;
}

.login-announce-icon {
  font-size: 1.375rem;
  line-height: 1;
}

.login-announce-body {
  padding: 12px 16px 16px;
  /* 隨視窗高度自適應:一般情況公告一次看完不內捲,只有極端多才捲動當安全閥,
     避免面板無限長把下方「常見問題」擠太遠 */
  max-height: min(60vh, 640px);
  overflow-y: auto;
}

.announce-item {
  border: 1px solid var(--border-softer);
  border-radius: var(--radius-sm-modern);
  margin-bottom: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .6);
}

.announce-item:last-child {
  margin-bottom: 0;
}

.announce-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.5;
}

.announce-content {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--color-text-sub);
  line-height: 1.7;
}

.announce-content p {
  margin: 0 0 10px;
}

.announce-content p:last-child {
  margin-bottom: 0;
}

/* ─── Member Layout ─────────────────────────────────────────────── */
.layout-member {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.member-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  max-width: var(--layout-max-width);
  width: 100%;
  margin: 28px auto 36px;
  padding: 0 20px;
  gap: var(--layout-content-gap);
}

.member-sidenav {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-height) + 20px);
}

.member-main {
  flex: 1;
  min-width: 0;
}

/* ─── Sidenav ────────────────────────────────────────────────────── */
.sidenav {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md-modern);
  box-shadow: var(--shadow-sm);
  padding: 10px;
  overflow: hidden;
}

.sidenav .nav-group-title {
  margin: 8px 8px 6px;
  padding: 8px 12px;
  border-radius: 0;
  background: transparent;
  color: #5E6B6B;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.sidenav .nav-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 6px;
  padding: 12px 14px;
  border-radius: var(--radius-sm-modern);
  font-size: 0.9375rem;
  color: var(--color-text-sub);
  transition:
    background var(--transition-base),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-base);
}

.sidenav .nav-item a:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--color-primary);
  transform: translateX(2px);
  text-decoration: none;
}

.sidenav .nav-item.active a {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 10px 22px rgba(99, 102, 241, 0.24);
}

.sidenav .nav-item:last-child a {
  margin-bottom: 6px;
}

/* ─── Dashboard Section Card ─────────────────────────────────────── */
.section-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md-modern);
  box-shadow: none;
  margin-bottom: 22px;
  overflow: hidden;
}

.section-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-softer);
  background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,.75));
}

.section-card .card-header h1,
.section-card .card-header h2,
.section-card .card-header h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-sub);
  line-height: 1.35;
}

.section-card .card-body {
  padding: 24px;
}
/* .p-0 (specificity 0,1,0) 會被上面的 .section-card .card-body (0,2,0) 蓋過,
   導致 card-body p-0 的「零內距」失效;補一條同層級選擇器讓工具類生效
   (角色選擇頁靠此讓清單各項自行控制左右留白) */
.section-card .card-body.p-0 {
  padding: 0;
}

/* ─── Status Badge ───────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-badge.status-current {
  background: rgba(99,102,241,.10);
  color: var(--color-primary);
  border-color: rgba(99,102,241,.16);
}
.status-badge.status-done {
  background: rgba(34,197,94,.10);
  color: var(--color-success);
  border-color: rgba(34,197,94,.16);
}
.status-badge.status-pending {
  background: rgba(148,163,184,.12);
  color: var(--color-text-muted);
  border-color: rgba(148,163,184,.16);
}
.status-badge.status-warning {
  background: rgba(245,158,11,.10);
  color: var(--color-warning);
  border-color: rgba(245,158,11,.16);
}
.status-badge.status-danger {
  background: rgba(239,68,68,.10);
  color: var(--color-danger);
  border-color: rgba(239,68,68,.16);
}

/* ─── Form ───────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 22px;
}

/* .form-label 也涵蓋 <span>:radio/checkbox 群組標題語意上不是 label(孤兒 label 不過無障礙檢測) */
.form-group label,
.form-group .form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-sub);
  line-height: 1.45;
}

.form-group .required-mark {
  color: var(--color-danger);
  margin-left: 3px;
}

.form-group .form-hint {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.form-group .form-error {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-danger);
}

.form-control,
.form-select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm-modern);
  background: rgba(255,255,255,0.96);
  color: var(--color-text-main);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  appearance: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-base),
    background var(--transition-fast),
    transform var(--transition-fast);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.form-control:hover,
.form-select:hover {
  border-color: rgba(15,23,42,.14);
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(99,102,241,.12),
    0 8px 18px rgba(99,102,241,.08);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}

.form-control::placeholder {
  color: #6b7280; /* AA:白底 4.5:1 以上,勿再調淡 */
}

.form-control:disabled,
.form-select:disabled {
  background: var(--color-bg-disabled);
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

select.form-select {
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--color-text-main);
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.radio-item,
.checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 2px;
  font-size: 0.9375rem;
  color: var(--color-text-sub);
  cursor: pointer;
}

.radio-item input,
.checkbox-item input {
  accent-color: var(--color-primary);
}

/* ─── Captcha ────────────────────────────────────────────────────── */
.captcha-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.captcha-row img {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  height: 40px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.captcha-row .captcha-input {
  width: 140px;
}

.captcha-reload {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

.captcha-reload:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(99,102,241,.06);
  transform: translateY(-1px);
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-base),
    opacity var(--transition-fast);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: var(--color-text-inverse);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(99,102,241,.22);
}
.btn-primary:hover:not(:disabled) {
  color: var(--color-text-inverse);
  box-shadow: 0 14px 28px rgba(99,102,241,.26);
}

.btn-outline {
  background: rgba(255,255,255,.86);
  color: var(--color-primary);
  border-color: rgba(99,102,241,.22);
}
.btn-outline:hover:not(:disabled) {
  background: rgba(99,102,241,.06);
  color: var(--color-primary-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--border-soft);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(15,23,42,.04);
  color: var(--color-text-sub);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  min-height: 48px;
  padding: 0 22px;
  font-size: 1rem;
  border-radius: 14px;
}

.btn-sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.8125rem;
  border-radius: 10px;
}

/* ─── Alert Messages ─────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 16px;
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
}

.alert-success {
  background: rgba(34,197,94,.08);
  color: #166534;
  border-color: rgba(34,197,94,.16);
}
.alert-warning {
  background: rgba(245,158,11,.10);
  color: #92400e;
  border-color: rgba(245,158,11,.18);
}
.alert-danger {
  background: rgba(239,68,68,.08);
  color: #991b1b;
  border-color: rgba(239,68,68,.18);
}
/* 多行商務錯誤訊息（如年齡限制說明）保留伺服端換行 */
.alert-msg-prewrap { white-space: pre-line; }
.alert-info {
  background: rgba(99,102,241,.08);
  color: var(--color-primary);
  border-color: rgba(99,102,241,.16);
}

/* 驗證錯誤摘要(student/_error-summary):back()+withErrors 導回時的頂部總覽,
   須比一般 alert 醒目(測試回報:淡色框被忽略)。載入時由 partial 內 script
   定位+聚焦;tabindex=-1 僅供程式聚焦,不在鍵盤序列,不另畫 focus 外框。 */
.error-summary {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 5px solid #dc2626;
  color: #991b1b;
  box-shadow: 0 2px 10px rgba(220,38,38,.14);
}
.error-summary:focus { outline: none; }
.error-summary__icon { color: #dc2626; margin-top: 2px; flex-shrink: 0; }
.error-summary__title { font-size: 1rem; }

/* 上傳導回原捲動位置時,頁頂 flash 改掛視窗頂固定浮動(_upload-scroll-keeper 搬移);
   委員端評分頁 AJAX 儲存提示(partials/reviewer/_toast-script)同樣掛此容器。
   z-index 高於 sticky header(120);背景換為等值不透明色,浮動時不透出底下內容。 */
.flash-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  width: min(92vw, 560px);
}
.flash-toast .alert { margin: 0 0 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding-right: 2.5rem; }
.flash-toast .alert-success { background: #edfaf2; }
.flash-toast .alert-danger  { background: #fef0f0; }
.flash-toast .alert-warning { background: #fef5e7; }
/* 關閉鈕:可鍵盤操作(button+aria-label),取代原本點整塊才能關;:focus-visible 走全域樣式 */
.flash-toast__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #333;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.flash-toast__close:hover { background: rgba(0, 0, 0, .08); }

/* ─── Password toggle ────────────────────────────────────────────── */
.password-wrapper {
  position: relative;
}

.password-wrapper .form-control {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.password-toggle:hover {
  background: rgba(15,23,42,.05);
  color: var(--color-text-sub);
}

/* ─── Dashboard welcome ──────────────────────────────────────────── */
.dashboard-welcome {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: var(--color-text-inverse);
  border-radius: var(--radius-md-modern);
  padding: 30px;
  margin-bottom: 22px;
  box-shadow: 0 8px 16px rgba(99,102,241,.18);
}

.dashboard-welcome::after {
  content: '';
  position: absolute;
  inset: auto -60px -60px auto;
  width: 180px;
  height: 180px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}

.dashboard-welcome h1 {
  position: relative;
  margin: 0 0 6px;
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: var(--font-weight-bold);
}

.dashboard-welcome p {
  position: relative;
  margin: 0;
  opacity: .92;
  font-size: 1rem;
  line-height: 1.7;
}

.no-application-notice {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
}

.no-application-notice .notice-icon {
  font-size: 3.5rem;
  margin-bottom: 12px;
  opacity: .85;
}

.no-application-notice h3 {
  margin: 0 0 8px;
  color: var(--color-text-sub);
  font-size: 1.25rem;
}

/* ─── Divider ────────────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin: 22px 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
}

/* ─── Utility suggestion (optional) ─────────────────────────────── */
.page-title {
  margin: 0 0 8px;
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-sub);
}

.page-subtitle {
  margin: 0 0 22px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ─── RWD ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .member-body {
    gap: 20px;
  }

  .member-sidenav {
    width: 220px;
  }

  .dashboard-welcome h1 {
    font-size: 1.625rem;
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: auto;
  }

  /* 外層只負責 sticky 外框;padding 統一由 -inner 提供,避免外層 padding
     與 -inner 的 min-height 疊出過高 header(login/member 同一套處理) */
  .header-login-inner {
    min-height: 56px;
    padding: 10px 16px;
    gap: 8px;
  }

  .header-login .site-logo img {
    height: 38px;
  }

  .header-login .site-name {
    font-size: 1.0625rem;
  }

  /* 英文部名與主標的「教育部」重複,窄幅不值得多佔一行。
     只隱藏標了 .site-name-en 的副標;委員端的「審查委員入口」要保留 */
  .header-login .site-name small.site-name-en {
    display: none;
  }

  .header-login .header-actions {
    flex-shrink: 0;
  }

  .header-member {
    height: auto;
  }

  /* logo 與按鈕維持同一行:名稱過長時在 logo 區內折行,按鈕不掉到第二行 */
  .header-member-inner {
    min-height: 56px;
    padding: 10px 16px;
    gap: 8px;
  }

  .header-member .header-user-name, .header-member .user-greeting {
    display: none;
  }

  .header-member {
    .site-logo, .header-actions { width: auto; }
  }

  .header-member .header-actions {
    flex-shrink: 0;
    gap: 8px;
  }

  .login-body {
    padding: 24px 16px;
    align-items: flex-start;
  }

  .login-card {
    border-radius: 18px;
  }

  .login-card .card-hd {
    padding: 24px 20px 16px;
  }

  .login-card .card-bd {
    padding: 22px 20px 24px;
  }

  .login-wrapper {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .login-qa-panel,
  .login-announce-panel {
    border-radius: 18px;
  }

  /* 手機整頁本就直向捲動,公告面板解除內捲上限,隨頁面自然展開,
     避免小螢幕上「頁面可捲、面板內又一條捲軸」的巢狀捲動陷阱 */
  .login-announce-body {
    max-height: none;
    overflow-y: visible;
  }

  .member-body {
    flex-direction: column;
    /* 改直向後 align-items 仍是父層的 flex-start(橫向交錯軸),會讓無明確寬度的
       .member-main 縮成內容寬而非滿版;改 stretch 讓 main 撐滿。sidenav 已是 100% 不受影響。 */
    align-items: stretch;
    margin: 16px auto 24px;
    padding: 0 16px;
    gap: 16px;
  }

  .member-sidenav {
    width: 100%;
    position: static;
  }

  /* 手機版側欄改為橫向 pill 列,避免直向選單占掉整個首屏
     (nav 本身已有 aria-label,群組標題隱藏不影響無障礙) */
  .sidenav {
    padding: 8px;
  }

  .sidenav .nav-group-title {
    display: none;
  }

  /* 多一層 .member-body 拉高特異度:基礎的 flex column 規則(§CSP 重構區)寫在本
     media query 之後,同特異度會蓋回直向。
     三顆 pill 用 grid 三等分一列排完(segmented bar),字數差由格寬吸收,
     避免 flex-wrap 自然換行留下孤兒 pill。 */
  .member-body .member-sidenav .sidenav .nav-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .sidenav .nav-item a {
    margin: 0;
    padding: 8px 4px; /* 左右縮小:寬度交給格子,置中呈現 */
    justify-content: center;
    font-size: 0.875rem;
  }

  .sidenav .nav-item:last-child a {
    margin-bottom: 0;
  }

  .section-card {
    border-radius: 18px;
  }

  .section-card .card-header {
    padding: 16px 18px;
    align-items: flex-start;
    flex-direction: column;
  }

  .section-card .card-body {
    padding: 18px;
  }

  .dashboard-welcome {
    padding: 22px 20px;
    border-radius: 18px;
  }

  .dashboard-welcome h1 {
    font-size: 1.5rem;
  }

  .footer {
    padding: 18px 16px;
  }
}

@media (max-width: 479px) {
    /* 標題不再隱藏:.site-name-seg 詞組斷行後窄機折成兩短行(~105px 寬),
       與「簡章下載+登出」並排仍排得下;只縮字級維持系統識別 */
    .header-member .site-name {
        font-size: 0.9375rem;
    }

    /* 窄機保險:「考試結果查詢」六字 pill 在三等分格內會貼邊 */
    .sidenav .nav-item a {
        font-size: 0.8125rem;
        gap: 6px;
    }
}

/* 極窄機(<360px,如舊 iPhone SE)標題連詞組兩行都塞不下(可用寬 <90px,
   詞組會被迫內部折行拆開「留學」),此區間才退回隱藏、只留 logo */
@media (max-width: 359px) {
    .header-member .site-name {
        display: none;
    }
}

/* ────────────────────────────────────────────────────────────────────
 * Guest (未登入) 頁面專用 utility classes
 * 取代原本散在 blade 裡的 inline style="..." 屬性,讓 /student/login、
 * /reviewer/login 等公開頁面能套上不含 'unsafe-inline' 的 strict CSP。
 * ──────────────────────────────────────────────────────────────────── */

.login-card-narrow {
    max-width: 480px;
    width: 100%;
}

.login-wrapper-center {
    justify-content: center;
}


.auth-action-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auth-action-stack-loose {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-intro {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0 0 20px;
}
.auth-intro-sm {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 20px;
}

.auth-error-list {
    margin: 0;
    padding-left: 16px;
}

.auth-footnote {
    margin-top: 16px;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: center;
}

.auth-footnote a {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.auth-verify-token {
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 1rem;
}

/* placeholder 是中文說明文字,不套用驗證碼專用的字距/放大,避免被拉寬顯得過大 */
.auth-verify-token::placeholder {
    letter-spacing: normal;
    font-size: 0.9375rem;
}

.birthday-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.birthday-row .birthday-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.birthday-select-year { width: 90px; }
.birthday-select-md { width: 72px; }

.gender-conditional {
    margin-top: 8px;
    display: none;
}
.gender-conditional.is-visible {
    display: block;
}
.birth-num-label {
    font-size: 0.875rem;
    font-weight: 400;
}
.birth-num-input {
    width: 80px;
    display: inline-block;
}

.text-danger-asterisk {
    color: var(--color-danger);
}

.password-rule-btn {
    background: none;
    border: 1px solid var(--color-border-default);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--color-text-muted);
    margin-left: 6px;
}

.auth-submit-tight { margin-top: 8px; }
.auth-submit-loose { margin-top: 16px; }

.auth-back-link {
    margin-top: 16px;
    text-align: center;
}

.auth-card-bd-center {
    text-align: center;
}
.auth-card-bd-center .alert {
    text-align: left;
}

.auth-big-icon {
    font-size: 3.25rem;
    margin-bottom: 16px;
}

.auth-muted-line {
    font-size: 1rem;
    color: var(--color-text-sub);
    margin: 0 0 8px;
}
.auth-muted-block {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0 0 24px;
}

/* 版權下方次要資訊(系統問題聯繫 + 來源 IP):桌機併為一列以縮減頁尾高度,
   窄機(≤479px)才回落為上下堆疊。白字於品牌綠底不加 opacity,維持 AA 對比。 */
.footer-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    margin-top: 5px;
    font-size: 0.8125rem;
}
.footer-note,
.footer-ip {
    margin: 0;
}
.footer-ip {
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 479px) {
    .footer-sub { flex-direction: column; }
    .footer-ip { padding-left: 0; border-left: 0; }
}

/* ────────────────────────────────────────────────────────────────────
 * 已登入頁面（學生 / 委員端）inline style → class 重構
 * 將原本散在 blade 的 style="..." 屬性收斂到語意化 class,
 * 讓整個學生 / 委員端都能套用不含 'unsafe-inline' 的 strict CSP。
 * ──────────────────────────────────────────────────────────────────── */

/* ── Sidenav / header 共用 ───────────────────────────────────────── */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.member-sidenav .sidenav .nav-list {
    display: flex;
    flex-direction: column;
}
.form-inline {
    display: inline;
}

/* ── 間距 utilities ─────────────────────────────────────────────── */
.mt-2  { margin-top: 2px; }
.mt-4  { margin-top: 4px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-2  { margin-bottom: 2px; }
.mb-4  { margin-bottom: 4px; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.ml-auto  { margin-left: auto; }
.ml-10 { margin-left: 10px; }
.ml-12 { margin-left: 12px; }
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.list-note { margin: 8px 0 0; padding-left: 20px; font-size: 0.9375rem; }
/* 注意事項內「依問題類型聯繫」的編號子清單 */
.contact-list { margin: 6px 0 4px; padding-left: 22px; }
.contact-list > li { margin-top: 4px; line-height: 1.6; }

/* ── Flex / layout utilities ───────────────────────────────────── */
.d-none   { display: none; }
.d-block  { display: block; }
.d-flex   { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-1 { flex: 1; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.row-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}
.row-flex-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.stack-12 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.stack-16 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Text utilities ────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-nowrap { white-space: nowrap; }
.text-muted  { color: var(--color-text-muted); }
.text-sub    { color: var(--color-text-sub); }
.text-muted-sm { font-size: 0.875rem; color: var(--color-text-muted); }
.text-muted-xs { font-size: 0.8125rem; color: var(--color-text-muted); }
.text-hint  { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 6px; }

/* ── Consent ───────────────────────────────────────────────────── */
.consent-scroll-box {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    padding: 16px 20px;
    font-size: 0.9375rem;
    line-height: 1.8;
    background: var(--color-bg-subtle);
}
.consent-scroll-box-sm {
    max-height: 200px;
}
.consent-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9375rem;
}
.consent-checkbox {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* ── 獎學金聲明書區塊(對齊舊系統 grant.phtml,checkbox inline 排版) ── */
.grant-degree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
/* 與 .form-control 並用,只 override width 讓 input 能塞進 inline 句子,
   高度/padding/邊框 / focus 樣式皆繼承 .form-control,跟區塊其他 input 視覺一致 */
.grant-inline-input {
    width: 90px;
    flex: 0 0 auto;
}
.grant-inline-input--name {
    width: 260px;
}
/* 勾選/身分別 與後續欄位群組;桌機維持一整句 inline 排版。欄位再包成子群組
   (年月一組、類別一組),讓中窄寬度只會整組換行,不會把標點與 input 拆散。 */
.grant-degree-check {
    flex: 0 0 auto;
}
.grant-degree-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.grant-field-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}
/* 「,計」「(獎學金類別:」視為整體:標點與文字不被 flex gap 拆開;
   手機版時 .grant-punct 隱藏,只留乾淨標籤。 */
.grant-lead,
.grant-name-lead {
    white-space: nowrap;
}
/* ── 手機版:改標籤化堆疊 —— 勾選/身分別一行,年月一組,類別滿版 ── */
@media (max-width: 640px) {
    .grant-degree-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .grant-degree-fields {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-left: 24px;   /* 對齊 checkbox 後文字,視覺上收在身分別下方 */
        /* 給定「明確」寬度(對齊 row 的 328px),不倚賴 align-stretch —— 巢狀 flex 下
           stretch 會被內容 max-content 蓋過而溢出;box-sizing 讓 padding 內縮不加寬 */
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* 群組撐滿整列寬,且允許收窄,避免 flex:1 的 input 依 max-content 溢出畫面 */
    .grant-field-group {
        width: 100%;
        min-width: 0;
    }
    /* 年 / 月 維持同一行,input 改彈性填滿避免窄螢幕溢出 */
    .grant-field-group--duration {
        flex-wrap: nowrap;
    }
    .grant-field-group--duration .grant-inline-input {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }
    /* 獎學金類別 / 附證明文件:標籤獨立一行,輸入框滿版 */
    .grant-field-group--name {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .grant-inline-input--name {
        width: 100%;
        min-width: 0;   /* base 為 flex:0 0 auto,需允許收窄否則以 max-content 撐寬整組 */
    }
    /* 純標點(，（：）)於窄版隱藏,改以乾淨標籤呈現 */
    .grant-punct {
        display: none;
    }
    .grant-field-label {
        font-weight: 600;
    }
}
.grant-notice ol {
    padding-left: 24px;
    margin: 4px 0 0;
}
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Font-size / weight utilities ──────────────────────────────────
   注意:全站字級於 2026-06-03 整體上移一級(以 body 1rem 為基準)。
   下列 .fs-NN 名稱沿用舊 px 標籤,實際值已是「該 px 的上一級」,
   故 .fs-14 = 0.9375rem(15px)、.fs-16 = 1.0625rem(17px),依此類推。 */
.fs-11 { font-size: 0.75rem; }
.fs-12 { font-size: 0.8125rem; }
.fs-13 { font-size: 0.875rem; }
.fs-14 { font-size: 0.9375rem; }
.fs-15 { font-size: 1rem; }
.fs-16 { font-size: 1.0625rem; }
.fs-17 { font-size: 1.125rem; }
.fs-18 { font-size: 1.25rem; }
.fs-20 { font-size: 1.375rem; }
.fs-22 { font-size: 1.5rem; }
.fs-24 { font-size: 1.625rem; }
.fs-28 { font-size: 1.875rem; }
.fs-40 { font-size: 2.75rem; }
.fs-48 { font-size: 3.25rem; }
.fs-52 { font-size: 3.5rem; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ── Color utilities (固定 token / 常用 hex) ─────────────────────── */
.c-muted   { color: var(--color-text-muted); }
.c-sub     { color: var(--color-text-sub); }
.c-default { color: var(--color-text-default); }
.c-danger  { color: #dc2626; }
.c-red-700 { color: #b91c1c; }
.c-red-900 { color: #991b1b; }
.c-red-950 { color: #7f1d1d; }
.c-green       { color: #15803d; }
.c-green-700   { color: #166534; }
.c-amber       { color: #92400e; }
.c-amber-600   { color: #b45309; }
.c-blue        { color: #1d4ed8; }
.c-blue-800    { color: #1e40af; }
.c-indigo-900  { color: #3730a3; }
.c-orange-700  { color: #c2410c; }
.c-orange-800  { color: #9a3412; }

/* ── Sizing helpers ────────────────────────────────────────────── */
.mw-200 { max-width: 200px; }
.mw-320 { max-width: 320px; }
.mw-400 { max-width: 400px; }
.mw-420 { max-width: 420px; }
.mw-480 { max-width: 480px; }
.mw-500 { max-width: 500px; }
.w-full { width: 100%; }
.flex-min-200 { flex: 1; min-width: 200px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Empty-state / 通知區塊 ────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 48px 20px;
}
.empty-state .empty-icon {
    margin-bottom: 12px;
    line-height: 1;
}

/* ── 上傳列 / 檔案 ─────────────────────────────────────────────── */
.upload-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.upload-file-input {
    max-width: 320px;
}
/* 自訂檔案選擇控制項(_file-pick-control):迴紋針鈕 + 檔名顯示為一個 flex 子項,
   隱藏的原生 input(.d-none)不佔版面。置於 .upload-file-row / .row-flex-wrap /
   .supp-upload-row 等外層 flex 列中,與送出鈕併排;窄機自然換行。 */
.file-pick-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.file-link {
    font-size: 0.9375rem;
    font-weight: 600;
}
.field-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 4px;
}

/* ── 退回 / 通過 / 提示色塊 ────────────────────────────────────── */
.reject-box {
    padding: 10px 14px;
    background: #fff1f2;
    border-radius: 6px;
    border: 1px solid #fecaca;
}
.reject-box-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #991b1b;
    margin-bottom: 2px;
}
.reject-box-body {
    font-size: 0.9375rem;
    color: #7f1d1d;
}
.approved-box {
    padding: 10px 14px;
    background: #f0fdf4;
    border-radius: 6px;
    border: 1px solid #bbf7d0;
    font-size: 0.875rem;
    color: #15803d;
    font-weight: 600;
}
.info-box {
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.info-box-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.info-box-warning {
    background: #fffbeb;
    border-color: #fde68a;
}
.info-box-danger {
    background: #fff1f2;
    border-color: #fecaca;
}
.soft-panel {
    padding: 16px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid var(--color-border-default);
}

/* ── 委員端專用小工具 ──────────────────────────────────────────── */
.is-locked {
    pointer-events: none;
    opacity: .75;
}
.req-star {
    color: red;
    margin-left: 2px;
}
.tab-score-dot {
    font-size: 0.6875rem;
    color: #f57c00;
}
.cell-muted-time {
    font-size: 0.8125rem;
    color: #6b7280;
    white-space: nowrap;
}
.c-placeholder {
    color: #6b7280;
}
.dash-draft-warn {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: #e65100;
}
.auth-warning-line {
    color: var(--color-warning);
    font-size: 0.9375rem;
    margin-top: 4px;
}
/* 委員端鎖定/預載簽名圖（由 JS 動態插入，改用 class 取代 style.cssText,
   以符合 style-src-attr 'none' 的 strict CSP）。 */
.rv-sig-img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    display: block;
}



/* ======================================================================
   學生 / 申請說明 apply/intro
   ====================================================================== */
.apply-step-list {
    padding-left: 20px;
    margin: 0;
}
.apply-step-list li {
    margin-bottom: 16px;
    line-height: 1.6;
}
.apply-step-list li strong {
    font-size: 1rem;
    color: var(--color-text-default);
    display: block;
    margin-bottom: 4px;
}
.apply-step-list li p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}
body.page-apply-intro .alert-info {
    background: #e8f4fd;
    border: 1px solid #bee3f8;
    border-radius: 6px;
    padding: 14px 18px;
    color: #2c5282;
    display: block; /* 覆寫 .alert 的 flex:讓「注意事項」標題置於清單上方,不再擠成左欄 */
}
body.page-apply-intro .alert-info > strong {
    display: block;
    margin-bottom: 6px;
}



/* ======================================================================
   學生 / 角色選擇 apply/role-select
   ====================================================================== */
.role-select-list {
    display: flex;
    flex-direction: column;
}
.role-select-item {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-default);
}
.role-select-item:last-child {
    border-bottom: none;
}
.role-select-item__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.role-select-item__name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-default);
}
.role-select-item__desc {
    font-size: 0.9375rem;
    color: var(--color-text-default);
    line-height: 1.7;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--color-bg-subtle);
    border-radius: 6px;
    border-left: 3px solid var(--color-primary);
}
.role-select-item__desc p { margin: 0 0 8px; }
.role-select-item__desc p:last-child { margin-bottom: 0; }
.role-select-item__action {
    display: flex;
    align-items: center;
}
/* 手機:收斂各層左右內距,避免說明文字被擠成過窄一欄 */
@media (max-width: 600px) {
    .role-select-item { padding: 16px; }
    .role-select-item__desc { padding: 12px; }
}



/* ======================================================================
   學生 / 照片與證件 apply/photo
   ====================================================================== */
.photo-upload-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.photo-upload-notes {
    flex: 0 0 220px;
    background: var(--color-bg-subtle);
    border-radius: 6px;
    padding: 14px;
}
.photo-upload-form {
    flex: 1;
}
.drop-zone {
    position: relative;
    border: 2px dashed var(--color-border-default);
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    background: var(--color-bg-subtle);
    transition: border-color .2s, background .2s;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drop-zone:hover { border-color: var(--color-primary); background: #ebf4ff; }
.drop-zone__input {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.drop-zone__label p { color: var(--color-text-muted); }
.drop-zone__preview {
    max-width: 160px;
    max-height: 100px;
    border-radius: 4px;
    object-fit: contain;
}
.preview-thumb {
    max-width: 100px;
    max-height: 120px;
    object-fit: cover;
    border: 2px solid var(--color-border-default);
    border-radius: 4px;
}
.preview-thumb--card {
    max-width: 200px;
    max-height: 130px;
    object-fit: contain;
}
.upload-badge {
    display: inline-block;
    font-size: 0.8125rem;
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 6px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-muted);
}
.upload-badge.done {
    background: #c6f6d5;
    border-color: #9ae6b4;
    color: #276749;
}
body.page-apply-photo .status-badge { font-size: 0.8125rem; padding: 2px 8px; border-radius: 10px; }
body.page-apply-photo .alert-info {
    background: #e8f4fd;
    border: 1px solid #bee3f8;
    border-radius: 6px;
    padding: 10px 16px;
    color: #2c5282;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.list-flush { margin: 0; padding-left: 18px; }
.photo-notes-list {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    padding-left: 18px;
    margin: 0;
}
/* 後台帶入的繳交說明(description,TinyMCE HTML)顯示於說明欄上方 */
.photo-notes-desc {
    font-size: 0.875rem;
    color: var(--color-text-default);
    line-height: 1.8;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--color-border-default);
}
.photo-notes-desc :is(ul, ol) { margin: 0; padding-left: 18px; }
.photo-notes-desc p { margin: 0 0 6px; }
.photo-notes-desc p:last-child,
.photo-notes-desc :is(ul, ol):last-child { margin-bottom: 0; }
@media (max-width: 640px) {
    .photo-upload-layout { flex-direction: column; }
    /* 容器 align-items:flex-start 在直向時變水平軸,子項會縮成內容寬,兩欄都要補滿版 */
    .photo-upload-notes { flex: none; width: 100%; }
    .photo-upload-form { width: 100%; }
    /* 完成提示:窄版按鈕不縮不折字,擠不下時整顆換行(ml-auto 靠右),保持自然寬度 */
    body.page-apply-photo .alert-success.d-flex { flex-wrap: wrap; }
    body.page-apply-photo .alert-success.d-flex .btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
}



/* ======================================================================
   學生 / 申請表單 apply/form
   ====================================================================== */
.badge-role-type {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.8125rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 20px;
}
.form-section-subtitle {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-default);
    margin: 16px 0 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border-default);
}
.form-divider {
    border: none;
    border-top: 1px solid var(--color-border-default);
    margin: 16px 0;
}
body.page-apply-form .radio-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 4px;
}
body.page-apply-form .radio-label, body.page-apply-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    cursor: pointer;
}
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.field-hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    display: block;
}
body.page-apply-form .form-group {
    margin-bottom: 0;
    /* grid item 預設 min-width:auto 會撐到 min-content;.sa-ss 控制鈕(button)的長學校名稱
       即使 nowrap+ellipsis 仍把整欄撐寬。歸 0 讓 1fr 真正生效,長名稱才會被截斷而非撐版。 */
    min-width: 0;
}
.form-label.required::after {
    content: ' *';
    color: var(--color-error, #e53e3e);
}
.btn-link {
    background: none;
    border: none;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9375rem;
    padding: 0;
    /* inline-flex+置中:與 .btn 併用時文字才會在 min-height 42px 內垂直置中 */
    display: inline-flex;
    align-items: center;
}
body.page-apply-form .alert-info {
    background: #e8f4fd;
    border: 1px solid #bee3f8;
    border-radius: 6px;
    padding: 10px 14px;
    color: #2c5282;
}
.form-err-list { margin: 8px 0 0; padding-left: 18px; font-size: 0.9375rem; }
.grant-row-label {
    padding-top: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-muted);
}
.col-2-end { grid-column: 2 / -1; }
.special-help-detail { margin-top: 8px; font-size: 0.875rem; }
.special-help-detail > summary {
    cursor: pointer;
    color: var(--color-primary, #2c5282);
    display: inline-block;
    user-select: none;
}
.special-help-body {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--color-bg-subtle, #f7fafc);
    border-left: 3px solid var(--color-primary, #2c5282);
    line-height: 1.7;
    color: var(--color-text-default, #2d3748);
}
.form-nav-card { margin-bottom: 24px; background: var(--color-bg-subtle); }
/* 手機版:下方按鈕列改全寬堆疊 —— 主 CTA / 暫存全寬易點,返回說明頁置中淡色連結。
   維持 DOM 順序(焦點順序=視覺順序合 AA;不動 Enter 預設送出的 save_temp 行為)。 */
@media (max-width: 640px) {
    .form-nav-card .card-body {
        flex-direction: column;
        align-items: stretch;   /* 覆蓋 .items-center,讓兩顆 .btn 撐滿整寬 */
        gap: 10px;
    }
    /* .btn 本身 justify-content:center,全寬後文字自動置中;
       返回連結清掉 ml-auto(直向 cross-axis 的 auto margin 會壓過 stretch 而靠右),
       改為全寬置中、與上方主鈕留一點間距。 */
    .form-nav-card .btn-link {
        margin-left: 0;
        margin-top: 4px;
    }
}
/* documents / photo 頁底部「返回 / 前往」步驟導航:與 .form-nav-card 同一套精靈導航語彙,
   但無卡片外框。桌機兩端對齊(返回左、前進 CTA 右);手機版(≤640px)全寬堆疊、點擊區大(AA)、
   窄機不再相黏擠壓。本列 DOM 順序為「返回在前、前進在後」(桌機 justify-between 即得返回左/前進右),
   故手機版用 column-REVERSE 讓前進 CTA 置頂、返回置下。兩顆皆為 <a> 非 submit,無 Enter 預設送出
   顧慮;焦點順序=返回→前進仍為合理次序,不違 AA。 */
.step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 640px) {
    .step-nav {
        flex-direction: column-reverse;
        align-items: stretch;   /* 覆蓋 items-center,兩顆 .btn 撐滿整寬 */
        gap: 10px;
    }
    /* photo 頁前進鈕帶 ml-auto:直向 cross-axis 的 auto margin 會壓過 stretch,清掉 */
    .step-nav .btn { margin-left: 0; }
}
@media (max-width: 768px) {
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
    .checkbox-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 可搜尋下拉(零相依 vanilla,取代舊系統 select2;前台刻意不引入 jQuery)── */
.sa-ss { position: relative; }
.sa-ss__native { display: none !important; } /* 原生 select 留在 DOM:value/提交/change 的唯一來源 */
.sa-ss__control {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    padding-right: 34px;
    /* 盒型/邊框/高度/focus 沿用 .form-select;此處補回 caret(.form-select 的 caret 是 select 專屬選擇器)*/
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.sa-ss--open .sa-ss__control { border-color: var(--color-primary); }
.sa-ss__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sa-ss__label--placeholder { color: #6b7280; /* AA 對比 */ }
.sa-ss__panel {
    display: none;
    /* fixed:不被 .section-card 的 overflow:hidden 裁切(absolute 會被裁→跑版);座標/寬度由 JS 依控制鈕計算 */
    position: fixed;
    z-index: 1000;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm-modern, 12px);
    box-shadow: var(--shadow-card, 0 6px 20px rgba(9, 138, 138, .12));
    padding: 6px;
}
.sa-ss--open .sa-ss__panel { display: block; }
.sa-ss__search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: var(--font-body);
    color: var(--color-text-main);
}
.sa-ss__search:focus { outline: none; border-color: var(--color-primary); }
.sa-ss__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
}
.sa-ss__option {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--color-text-main);
}
.sa-ss__option--active,
.sa-ss__option:hover { background: var(--color-primary-soft, #E0F4F4); }
.sa-ss__option--selected { color: var(--color-primary); font-weight: 600; }
.sa-ss__empty {
    padding: 10px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}



/* ======================================================================
   學生 / 申請摘要 apply/summary（complete 頁申請表內容瀏覽共用同一排版）
   ====================================================================== */
body.page-apply-summary .summary-grid,
body.page-apply-complete .summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}
.summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.summary-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}
.summary-value {
    font-size: 0.9375rem;
    color: var(--color-text-default);
}
body.page-apply-summary .btn-outline {
    background: transparent;
    border: 1px solid var(--color-border-default);
    color: var(--color-text-muted);
    padding: 4px 12px;
    font-size: 0.8125rem;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    /* inline-flex(非 inline-block)才會吃到基底 .btn 的 justify-content:center,
       否則 card-header flex 列中的標籤會靠左、無法水平置中 */
    display: inline-flex;
}
body.page-apply-summary .alert-warning {
    background: #fffbeb;
    border: 1px solid #f6ad55;
    border-radius: 6px;
    padding: 14px 18px;
    color: #744210;
}
.summary-item--full { grid-column: 1 / -1; }
.summary-warn-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.9375rem; }
/* 卡片維持白底(btn-primary 放米黃底不搭),警語自成米黃警示框 */
.summary-submit-card { margin-top: 16px; }
.summary-submit-note {
    font-size: 0.9375rem; margin: 0 0 14px; color: #744210;
    background: #fffbeb; border: 1px solid #f6ad55; border-radius: 10px;
    padding: 12px 16px;
}
.summary-img-label { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0 0 6px; }
.summary-ok { font-size: 0.75rem; color: #276749; }
.summary-missing { font-size: 0.75rem; color: var(--color-error, #e53e3e); }
.summary-photo {
    width: 72px; height: 86px; object-fit: cover;
    border: 1px solid var(--color-border-default); border-radius: 4px; display: block;
}
.summary-idimg {
    height: 86px; max-width: 140px; object-fit: contain;
    border: 1px solid var(--color-border-default); border-radius: 4px; display: block;
}
.summary-ph {
    height: 86px;
    border: 2px dashed var(--color-border-default);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.summary-ph--photo { width: 72px; }
.summary-ph--id { width: 140px; }
@media (max-width: 640px) {
    body.page-apply-summary .summary-grid,
    body.page-apply-complete .summary-grid { grid-template-columns: 1fr; }
}



/* ======================================================================
   學生 / 完成 apply/complete（唯讀申請表排版沿用上方 summary-grid）
   ====================================================================== */
.serial-banner {
    text-align: center;
    padding: 28px 20px;
    background: #f0fdf4;
    border-color: #86efac;
}
.serial-banner-label { font-size: 0.875rem; color: #166534; margin-bottom: 8px; }
.serial-banner-no { font-size: 1.875rem; font-weight: 700; letter-spacing: 3px; color: #166534; }
.serial-banner-time { font-size: 0.8125rem; color: #166534; margin-top: 6px; }



/* ======================================================================
   學生 / 步驟列 apply/_steps
   ====================================================================== */
.apply-steps {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background: var(--color-bg-surface, #fff);
    border: 1px solid var(--color-border-default, #e2e8f0);
    border-radius: 8px;
    overflow-x: auto;
    gap: 0;
    margin-bottom: 24px;
}
.apply-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 60px;
    flex-shrink: 0;
}
.apply-step__circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 2px solid;
    transition: all .2s;
}
.apply-step--done .apply-step__circle {
    background: var(--color-success, #38a169);
    border-color: var(--color-success, #38a169);
    color: #fff;
}
.apply-step--active .apply-step__circle {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: #fff;
}
.apply-step--pending .apply-step__circle {
    background: transparent;
    border-color: var(--color-border-default, #cbd5e0);
    color: var(--color-text-muted, #718096);
}
.apply-step__label {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}
.apply-step--done .apply-step__label    { color: var(--color-success, #38a169); }
.apply-step--active .apply-step__label  { color: var(--color-primary, #2563eb); font-weight: 700; }
.apply-step--pending .apply-step__label { color: var(--color-text-muted, #718096); }

.apply-step__connector {
    flex: 1;
    height: 2px;
    background: var(--color-border-default, #cbd5e0);
    margin: 0 4px;
    margin-bottom: 18px;
    min-width: 16px;
}
.apply-step__connector.done {
    background: var(--color-success, #38a169);
}

/* 窄螢幕(< 480px)步驟過多時收合:只保留「目前(active)」與「上一個步驟」,其餘隱藏。
   依賴 :has()(本檔 .login-wrapper 已在用);active 為首步時自然只剩它一個。 */
@media (max-width: 479px) {
    .apply-steps {
        justify-content: center;
    }
    .apply-step,
    .apply-step__connector {
        display: none;
    }
    /* 目前步驟 */
    .apply-step--active {
        display: flex;
    }
    /* 緊鄰 active 之前的那一步(上一個步驟) */
    .apply-step:has(+ .apply-step__connector + .apply-step--active) {
        display: flex;
    }
    /* 兩者之間的連接線(固定寬,不再 flex:1 撐滿整列) */
    .apply-step__connector:has(+ .apply-step--active) {
        display: block;
        flex: 0 0 40px;
    }
}




/* ======================================================================
   學生 / 送出後進度 apply/_post_submit_progress
   ====================================================================== */
/* ─── 主卡片 ─── */
.progress-track {
    margin: 20px 0 16px;
    background: #FFFFFF;
    border: 1px solid #DEEAE6;
    border-radius: 12px;
    padding: 28px 32px 24px;
    box-shadow: 0 2px 12px rgba(9, 138, 138, .06);
    position: relative;
    overflow: hidden;
}

/* 頂部裝飾線 */
.progress-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, #B1DBCC 100%);
    border-radius: 12px 12px 0 0;
}

/* ─── 四階段節點區塊 ─── */
.progress-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    position: relative;
}

.step-node-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    max-width: 100px;
    flex: 1;
    position: relative;
    /* 保留欄高一致(狀態說明可能兩行 + 未公告標記),但不超過內容所需,
       否則節點下方會留一大塊空白(見 _post_submit_progress) */
    min-height: 170px;
}

/* 連接線（放在 node 之後） */
.step-connector {
    flex: 0 0 48px;
    height: 4px;
    background: #B0C4C4;
    align-self: flex-start;
    margin-top: 71px;
    transition: background .4s ease;
    position: relative;
    border-radius: 2px;
}
.step-connector--done {
    background: var(--color-primary);
}

/* 頂部標籤 */
.step-label-wrap {
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    margin-bottom: 10px;
}
.step-label {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #2C223B;
    line-height: 1.3;
}
.step-sublabel {
    font-size: 0.6875rem;
    color: #6b7280; /* AA 對比 */
    margin-top: 2px;
}

/* 節點圓形 */
.step-node {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: transform .2s ease, box-shadow .2s ease;
}
.step-node:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* 通過狀態：实心背景 + 白色图标 */
.step-node--passed {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(9, 138, 138, .35);
}

/* 處理中：白底 + 蓝边 + 蓝点 */
.step-node--processing {
    background: #fff;
    border-color: #357ADF;
    color: #357ADF;
}

/* 待補件：白底 + 金边 + 金三角 */
.step-node--supplement {
    background: #fff;
    border-color: var(--color-warning);
    color: #B8860B;
}

/* 不通過：红底 + 白叉 */
.step-node--rejected {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
    box-shadow: 0 2px 8px rgba(217, 79, 79, .3);
}

/* 尚未開始：白底 + 灰边 + 空心圆 */
.step-node--pending {
    background: #fff;
    border-color: #C4DADA;
    color: #C4DADA;
}

/* 狀態說明 */
.step-detail {
    font-size: 0.75rem;
    color: #5E6B6B;
    text-align: center;
    margin-top: 8px;
    min-height: 28px;
    line-height: 1.4;
    padding: 0 4px;
}
.step-detail--passed   { color: var(--color-primary); font-weight: 600; }
.step-detail--rejected  { color: var(--color-danger); }
.step-detail--supplement { color: #A16207; /* AA 對比 */ }

/* 未公告標記 */
.step-unreleased {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: .04em;
    background: #F0F0F0;
    color: #5E6B6B; /* 灰底要更深才過 AA */
    padding: 2px 7px;
    border-radius: 4px;
    margin-top: 5px;
}

/* 階段領先豐田刻度（当前阶段高亮） */
.step-node-wrap--active .step-label {
    color: var(--color-primary);
}

/* ─── 成績下載區 ─── */
.score-card {
    margin-top: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #F0FDF9 0%, #E8FBF5 100%);
    border: 1px solid #86EFAC;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.score-card__info {
    flex: 1;
}
.score-card__label {
    font-size: 0.8125rem;
    color: #065F46;
    font-weight: 500;
    margin-bottom: 2px;
}
.score-card__score {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.score-card__unit {
    font-size: 0.875rem;
    color: #5E6B6B;
    font-weight: 400;
    margin-left: 2px;
}
.score-card__download {
    flex-shrink: 0;
}

/* entrance animation */
@keyframes stepReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.step-node-wrap:nth-child(odd)  { animation: stepReveal .4s ease both; }
.step-node-wrap:nth-child(even) { animation: stepReveal .4s ease .1s both; }

/* ─── 手機版:四階段改為直式步進器 ───────────────────────────────
   窄螢幕塞不下 4 欄(每欄 min-width 80 + 連接線 48),原本置中後溢出的首/尾
   階段會被 .progress-track 的 overflow:hidden 裁掉。手機改成直式:節點與連接線
   在左、階段名稱與狀態說明在右,四階段全數可見不裁切。 */
@media (max-width: 600px) {
    .progress-track {
        padding: 24px 20px;
    }
    .progress-steps {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
    /* 每階段:左欄放節點(46px),右欄放名稱/狀態 */
    .step-node-wrap {
        display: grid;
        grid-template-columns: 46px 1fr;
        column-gap: 14px;
        align-items: start;
        min-width: 0;
        max-width: none;
        min-height: 0;      /* 覆寫桌機版預留欄高 */
        width: 100%;
        padding-bottom: 22px;
        position: relative;
    }
    .step-node-wrap:last-child {
        padding-bottom: 0;
    }
    /* 連接線改由 wrap 的 ::before 沿左欄畫,從本節點底連到下一節點頂(連續不斷) */
    .step-connector {
        display: none;
    }
    .step-node-wrap:not(:last-child)::before {
        content: '';
        position: absolute;
        left: 21px;         /* 節點中心:46/2 - 線寬 4/2 */
        top: 46px;          /* 節點底 */
        bottom: 0;
        width: 4px;
        background: #B0C4C4;
        border-radius: 2px;
    }
    /* 已通過的階段:連到下一階段的線轉主色(對齊桌機 .step-connector--done) */
    .step-node-wrap:has(.step-node--passed):not(:last-child)::before {
        background: var(--color-primary);
    }
    .step-node {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: start;
    }
    .step-label-wrap {
        grid-column: 2;
        grid-row: 1;
        height: auto;
        min-height: 46px;   /* 名稱與節點垂直置中對齊 */
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        margin: 0;
    }
    .step-detail {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        margin-top: 2px;
        min-height: 0;
        padding: 0;
    }
    .step-unreleased {
        grid-column: 2;
        grid-row: 3;
        margin-top: 4px;
        justify-self: start;
    }
}



/* ======================================================================
   學生 / 首頁 home
   ====================================================================== */
/* ─── 申請狀態橫幅（申請送出前） ─── */
.status-announce {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 10px;
    border: 1px solid;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.status-announce::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
}
.status-announce--draft              { background:#FAFAFA; border-color:#E5E5E5; }
.status-announce--draft::before     { background:#94A3B8; }
.status-announce--reviewing          { background:#F5F8FF; border-color:#C4D4F0; }
.status-announce--reviewing::before { background:#357ADF; }
.status-announce--pending-supplement{ background:#FFFBEB; border-color:#F0D080; }
.status-announce--pending-supplement::before { background:var(--color-warning); }
.status-announce--supplement-submitted { background:#F0FDF4; border-color:#86EFAC; }
.status-announce--supplement-submitted::before { background:var(--color-success); }
.status-announce--approved           { background:#F0FDF4; border-color:#86EFAC; }
.status-announce--approved::before  { background:var(--color-primary); }
.status-announce--rejected           { background:#FFF5F5; border-color:#F5C6C6; }
.status-announce--rejected::before  { background:var(--color-danger); }

.status-announce__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.status-announce--draft .status-announce__icon              { background:#F0F0F0; }
.status-announce--reviewing .status-announce__icon           { background:#E8EEFF; }
.status-announce--pending-supplement .status-announce__icon  { background:#FFF4CC; }
.status-announce--supplement-submitted .status-announce__icon { background:#E8F9E8; }
.status-announce--approved .status-announce__icon            { background:#E0F4F4; }
.status-announce--rejected .status-announce__icon           { background:#FFE8E8; }

.status-announce__body { flex: 1; }
.status-announce__title {
    font-size: 1rem;
    font-weight: 700;
    color: #2C223B;
    line-height: 1.3;
    margin-bottom: 4px;
}
.status-announce__sub {
    font-size: 0.8125rem;
    color: #5E6B6B;
    line-height: 1.5;
}
.status-announce__meta {
    font-size: 0.8125rem;
    color: #5E6B6B;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.status-announce__serial {
    font-family: 'Roboto', monospace;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.875rem;
}

/* ─── 操作按鈕群組 ─── */
.action-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all .18s ease;
    letter-spacing: .01em;
}
/* 內圖示放大到 16px:預設 12px 在 14px 文字旁偏小(線寬定義見 partials/_icon)。 */
.btn-action .sa-icon { width: 16px; height: 16px; }
.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
/* 主從收斂:同一時間只有一顆彩色按鈕(--primary 或 --warning,見 home.blade
   $supplementUrgent),其餘一律 --secondary 白底描邊,靠圖示區分。 */
.btn-action--primary {
    background: var(--color-primary);
    color: #fff;
}
.btn-action--primary:hover { background: #065A5A; color: #fff; }
.btn-action--secondary {
    background: #fff;
    color: #2C223B;
    border: 1.5px solid #DEEAE6;
}
.btn-action--secondary:hover { background: #F5F7F7; color: #2C223B; }
.btn-action--warning {
    background: var(--color-warning); /* 原 #E9AC00 白字僅 1.9:1 */
    color: #fff;
    font-weight: 700;
}
.btn-action--warning:hover { background: #7C4E06; color: #fff; }
.btn-action--muted {
    background: #F0F0F0;
    color: #5E6B6B;
    cursor: default;
    pointer-events: none;
    opacity: .75;
}

/* 徽章 */
.btn-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .03em;
}
.badge--done    { background: #D1FAE5; color: #065F46; }
.badge--pending { background: #FEF3C7; color: #92400E; }

/* ─── 無申請提示 ─── */
.notice-block {
    text-align: center;
    padding: 40px 24px;
}
.notice-block__icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    line-height: 1;
}
.notice-block__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2C223B;
    margin: 0 0 8px;
}
.notice-block__body {
    font-size: 0.875rem;
    color: #5E6B6B;
    margin: 0 0 8px;
    line-height: 1.6;
}
.notice-block__action {
    margin-top: 20px;
}

/* ─── 卡片結構 ─── */
body.page-home .section-card {
    background: #fff;
    border: 1px solid #DEEAE6;
    border-radius: var(--radius-md-modern);
    box-shadow: none;
    overflow: hidden;
}
/* ─── 通用 ─── */
body.page-home .btn-lg {
    padding: 11px 28px;
    border-radius: 8px;
    font-weight: 600;
}

/* RWD:操作按鈕手機版改滿版直向堆疊,避免 flex-wrap 依字數長短參差換行 */
@media (max-width: 767px) {
    .action-group {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-action {
        justify-content: center;
    }
}



/* ======================================================================
   學生 / 書審文件 documents（+ interview-documents 共用）
   ====================================================================== */
.documents-page { display: flex; flex-direction: column; gap: 20px; }
.doc-requirement-card .card-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
/* 標題列:必繳/選繳徽章以 inline 隨文字流動,與文件名接在同一行、長名自然斷行到下一行
   (不使用 flex——flex 會把文件名整段當一個項目換到徽章的下一列)。整體為左側伸縮欄
   (min-width:0 允許文件名內部斷行,而非把右側狀態徽章擠下一列);審查狀態徽章恆置右上。 */
.doc-req-title {
    flex: 1 1 auto; min-width: 0;
}
.doc-req-title .doc-required-badge,
.doc-req-title .doc-optional-badge {
    vertical-align: middle; margin-right: 6px;
}
.doc-req-title .doc-paper-badge {
    vertical-align: middle; margin-left: 6px;
}
/* 文件卡 / 報名費繳納標題右上的審查狀態徽章:縮到與必繳/選繳徽章一致的尺寸與圓角(此處為密集
   標題列,.status-badge 預設 30px 高、較大內距與 pill 圓角是為摘要/繳費面板設計,於此顯得過大、
   與左側小徽章不成套)。僅在此情境覆寫尺寸,不動全域 .status-badge。 */
.doc-requirement-card .card-header > .status-badge,
.card-header-inline-badge > .status-badge {
    flex-shrink: 0;
    min-height: 0;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1.35;
    border-radius: 10px;
}
/* 報名費繳納標題列:手機版維持「標題左、狀態徽章右」同列(覆寫 section-card ≤767px 的
   flex-direction:column,否則徽章會落到標題下一列)。標題較短、徽章已縮小,單列不會擠。 */
@media (max-width: 767px) {
    .section-card .card-header.card-header-inline-badge {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
}
/* 必繳/選繳(同 doc-uploaded-badge:nowrap+不縮,長文件名擠壓時換行留給名稱) */
.doc-required-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; background: #fee2e2; color: #991b1b;
    white-space: nowrap; flex-shrink: 0;
}
.doc-optional-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; background: #f0f9ff; color: #0369a1;
    white-space: nowrap; flex-shrink: 0;
}
/* 繳交文件清單右側上傳狀態(flex 子項:nowrap+不縮,換行留給左側文件名稱) */
.doc-uploaded-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; background: #dcfce7; color: #166534;
    white-space: nowrap; flex-shrink: 0;
}
.doc-missing-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; background: #fee2e2; color: #991b1b;
    white-space: nowrap; flex-shrink: 0;
}
.doc-notuploaded-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; background: #f1f5f9; color: #64748b;
    white-space: nowrap; flex-shrink: 0;
}
.doc-paper-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; background: #fef9c3; color: #854d0e;
}
.badge-exam-type {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; background: #ede9fe; color: #5b21b6;
}
.doc-description {
    font-size: 0.9375rem; color: var(--color-text-default);
    background: #f9fafb; border-radius: 6px; padding: 10px 14px;
    margin-bottom: 10px; white-space: normal; line-height: 1.6;
}
.subdoc-row-item {
    border: 1px solid var(--color-border-default);
    border-radius: 6px; padding: 12px 16px; margin-bottom: 10px;
}
.subdoc-row-item__label {
    font-size: 0.9375rem; margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.subdoc-desc {
    font-size: 0.8125rem; color: var(--color-text-muted);
}
.doc-group {
    display: flex; flex-direction: column; gap: 16px;
}
.doc-group-title {
    font-size: 1.0625rem; font-weight: 600; color: var(--color-text-emphasis);
    padding: 12px 0; border-bottom: 2px solid var(--color-border-subtle);
    margin: 0;
}
.doc-description {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", "微軟正黑體", sans-serif;
}
.doc-empty { text-align: center; padding: 48px 16px; }
.doc-empty-icon { font-size: 3.25rem; margin-bottom: 12px; }
.doc-empty-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; }
/* 申請狀態摘要:label:值成對排列,flex 換行只落在項目之間,窄版自然一項一行
   (documents / interview-documents / supplement 三頁共用) */
.doc-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0 0 4px;
}
.doc-summary-item { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.doc-summary-item strong { color: var(--color-text-default); }
.doc-summary-sub { font-size: 0.875rem; color: var(--color-text-muted); margin: 4px 0 0; }
.badge-interview {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; background: #fce7f3; color: #9d174d;
}

/* RWD:手機版文件卡標題列維持左右列(覆寫 section-card ≤767px 的 flex-direction:column)。
   文件名(含必繳/選繳徽章)為靠左伸縮欄、審查狀態徽章(已補件/已通過…)置右上——與桌機同構,
   避免狀態徽章在窄機落到下一列而與標題脫節。align-items:flex-start 讓狀態徽章對齊標題頂端;
   flex-wrap:nowrap 確保狀態徽章不被推到下一列(文件名過長時於 .doc-req-title 內部換行)。
   斷點對齊 section-card 的 767px。 */
@media (max-width: 767px) {
    .doc-requirement-card .card-header {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: nowrap;
    }
}



/* ======================================================================
   學生 / 補件 supplement
   ====================================================================== */
.supplement-page { display:flex; flex-direction:column; gap:16px; }

.supp-hd-card { border-left: 4px solid #f97316; }
.supp-hd-header { background: #fff7ed; }
.supp-hd-title { margin: 0; color: #c2410c; }
.supp-hd-sub { margin: 4px 0 0; font-size: 0.875rem; color: #9a3412; }
.supp-hd-body { padding: 14px 20px; }
.supp-note-officer {
    margin-top: 10px; padding: 10px 14px;
    background: #fef2f2; border: 1px solid #fca5a5; border-radius: 6px;
    font-size: 0.9375rem; color: #991b1b;
}
.supp-empty { text-align: center; padding: 40px 16px; }
.supp-empty-title { font-size: 1.25rem; margin: 0 0 8px; }
.supp-hint-danger { font-size: 0.8125rem; color: #b91c1c; font-weight: 600; }
.supp-hint-info { font-size: 0.8125rem; color: #1d4ed8; font-weight: 600; }
.supp-upload-row {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.supp-removed-note { font-size: 0.875rem; color: #6b7280; margin-top: 8px; }
.supp-submit-card { background: #f0fdf4; border: 1px solid #86efac; }
.supp-ok-text { margin: 0; font-size: 0.9375rem; color: #166534; }
.supp-warn-text { margin: 0; font-size: 0.9375rem; color: #92400e; }
.btn-submit-lg { font-size: 1rem; padding: 10px 28px; font-weight: 600; }

.supplement-doc-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}
.supplement-doc-card--rejected  { border-left: 4px solid #ef4444; }
.supplement-doc-card--resubmitted { border-left: 4px solid #3b82f6; }

.supplement-doc-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.supplement-doc-card__note {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 5px;
    font-size: 0.875rem;
    color: #991b1b;
}

.supp-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 6px;
}
.supp-badge--rejected    { background: #fee2e2; color: #b91c1c; }
.supp-badge--resubmitted { background: #dbeafe; color: #1d4ed8; }

.supp-file-link {
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: underline;
}
.supp-file-link:hover { color: #1e40af; }

/* 註:原本此處有 .supplement-upload-form input[type="file"] 的邊框/padding/min-width 與
   手機版 .supplement-upload-form > div { flex-direction: column } 覆寫——皆為「可見原生
   file input(很寬、獨佔一行)」量身;改用 _file-pick-control(迴紋針鈕 + d-none 隱藏
   input)後全成死碼/多餘,已移除。上傳列(.supp-upload-row)遂與繳交文件(.upload-file-row)、
   收據(.row-flex-wrap)一致:左對齊自動換行單列,窄機不再強制直排置中。 */

/* RWD */
@media (max-width: 640px) {
    .supplement-doc-card__header { flex-direction: column; }
}



/* ======================================================================
   學生 / 繳費 payment
   ====================================================================== */
.payment-page { display: flex; flex-direction: column; gap: 20px; }
.info-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.info-table tr { border-bottom: 1px solid var(--color-border-default); }
.info-table tr:last-child { border-bottom: none; }
.info-table td, .info-table th { padding: 10px 0; vertical-align: top; }
/* 標籤格語意用 <th scope="row">(無障礙),外觀維持原 td 樣式 */
.info-table .label { color: var(--color-text-muted); width: 120px; font-weight: 400; text-align: left; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-primary { background: #e0e7ff; color: #3730a3; } /* 已補件 */
.badge-info    { background: #dbeafe; color: #1d4ed8; } /* 已繳交(面試文件已收件、不逐件審) */
.pay-empty { text-align: center; padding: 48px 16px; }
.pay-empty-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; }
.pay-amount { font-size: 1.25rem; color: #1d4ed8; }
.pay-account { font-size: 1.0625rem; letter-spacing: .05em; }
.pay-action-sep {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-default);
}



/* ======================================================================
   學生 / 結果 result
   ====================================================================== */
.result-page { display:flex; flex-direction:column; gap:16px; }
.result-hd-card { border-left: 4px solid #1d4ed8; }
.result-hd-header { background: #eff6ff; }
.result-hd-title { margin: 0; color: #1e40af; }
.result-hd-sub { margin: 4px 0 0; font-size: 0.875rem; color: #3730a3; }
.result-meta {
    padding: 14px 20px;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
}
/* 各欄不從中間斷字:桌機空間不足時整欄換到下一行,而非在值中間折斷 */
.result-meta__item { white-space: nowrap; }
/* 手機:每欄各佔一行(值過長時才在該行內自然換行) */
@media (max-width: 600px) {
    .result-meta { flex-direction: column; gap: 6px; }
    .result-meta__item { white-space: normal; }
}
.result-state-body { text-align: center; padding: 40px 20px; }
.result-state-title { font-size: 1.25rem; color: var(--color-text-default); margin: 0 0 10px; }
.result-state-text {
    font-size: 0.9375rem; color: var(--color-text-muted);
    max-width: 420px; margin: 0 auto 20px;
}
.result-pass-card { border: 2px solid #16a34a; }
.result-pass-title { font-size: 1.5rem; font-weight: 700; color: #15803d; margin: 0 0 6px; }
.result-pass-rank { font-size: 1rem; color: #166534; margin: 6px 0; }
.result-fail-card { border: 1px solid #fca5a5; }
.result-fail-title { font-size: 1.375rem; font-weight: 600; color: #dc2626; margin: 0 0 10px; }
.result-fail-text {
    font-size: 0.9375rem; color: var(--color-text-muted);
    max-width: 420px; margin: 0 auto;
}
.result-warn-title { font-size: 1.125rem; color: var(--color-text-default); margin: 0 0 8px; }
.result-note {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9375rem;
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.result-note-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.result-note-danger  { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }



/* ======================================================================
   委員 / 儀表板 dashboard
   ====================================================================== */
/* ── Dashboard 專用樣式 ─────────────────────────────── */
.dash-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-600) 100%); /* 淺端 #1e88e5 白字不足 4.5:1,收斂到 blue-600 */
    border-radius: var(--radius-md-modern);
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(21,101,192,.25);
}
.dash-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.dash-welcome-text h1 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
}
.dash-welcome-text p {
    margin: 0;
    font-size: 0.875rem; /* 白字於藍底不加 opacity,維持 AA 對比 */
}

/* 統計卡片 */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.stat-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .2s;
}
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.stat-num {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}
.stat-num.blue   { color: #1565c0; }
.stat-num.green  { color: #1b7e3e; }
.stat-num.orange { color: #e65100; }
.stat-label {
    font-size: 0.8125rem;
    color: #666;
    font-weight: 500;
}

/* 進度列 */
.dash-progress-wrap {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dash-progress-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.dash-progress-title { font-size: 0.875rem; font-weight: 600; color: #333; }
.dash-progress-pct   { font-size: 0.875rem; font-weight: 700; color: #1565c0; }
.dash-progress-bar {
    height: 8px;
    background: #e8eaed;
    border-radius: 4px;
    overflow: hidden;
}
.dash-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1565c0, #42a5f5);
    border-radius: 4px;
    transition: width .5s ease;
}
.dash-stage-title {
    margin: 20px 0 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dash-stage-title:first-of-type { margin-top: 0; }
.dash-draft-warn {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: #c2410c;
}

/* CTA 按鈕 */
.dash-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.dash-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.dash-cta-primary {
    background: #1565c0;
    color: #fff;
    box-shadow: 0 2px 8px rgba(21,101,192,.3);
}
.dash-cta-primary:hover { background: #1976d2; color: #fff; transform: translateY(-1px); }
.dash-cta-outline {
    background: #fff;
    color: #1565c0;
    border: 1.5px solid #1565c0;
}
.dash-cta-outline:hover { background: #e3f2fd; }

/* 帳號資訊 */
.dash-info-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dash-info-hd {
    font-size: 0.875rem;
    font-weight: 700;
    color: #444;
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dash-info-hd::before {
    content: '';
    display: block;
    width: 3px;
    height: 13px;
    background: #1565c0;
    border-radius: 2px;
}
.info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f8f9fa;
    font-size: 0.875rem;
}
.info-row:last-child { border-bottom: none; }
.info-row-label { color: #6b7280; min-width: 80px; flex-shrink: 0; }
.info-row-val   { color: #222; font-weight: 500; }

/* RWD */
@media (max-width: 767px) {
    .dash-welcome { padding: 14px 16px; gap: 12px; }
    .dash-welcome-text h1 { font-size: 1rem; }
    .dash-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stat-card { padding: 12px 8px; }
    .stat-num { font-size: 1.5rem; }
    .stat-label { font-size: 0.75rem; }
    .dash-cta-btn { padding: 11px 16px; font-size: 0.875rem; }
}
@media (max-width: 400px) {
    .dash-stats { grid-template-columns: repeat(3, 1fr); }
    .stat-num { font-size: 1.375rem; }
}

/* 階段 panel — 雙色語系 (書審藍 / 面試紫) */
.dash-stage {
    --stage-color: #1565c0;
    --stage-color-light: #1976d2;
    --stage-tint-bg: #f4f8fd;
    --stage-tint-border: #d8e6f5;
    --stage-shadow: rgba(21,101,192,.14);

    background: var(--stage-tint-bg);
    border: 1px solid var(--stage-tint-border);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px var(--stage-shadow);
}
.dash-stage.is-interview {
    --stage-color: #7b3fb5;
    --stage-color-light: #9159c2;
    --stage-tint-bg: #faf6fd;
    --stage-tint-border: #e6d8f0;
    --stage-shadow: rgba(123,63,181,.14);
}
.dash-stage .dash-stage-title {
    margin: 0 0 12px;
    color: var(--stage-color);
    font-size: 1rem;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--stage-tint-border);
}
.dash-stage .stat-num.theme { color: var(--stage-color); }
.dash-stage .dash-stats { margin-bottom: 12px; }
.dash-stage .dash-progress-wrap {
    margin-bottom: 12px;
    border-color: var(--stage-tint-border);
}
.dash-stage .dash-progress-pct { color: var(--stage-color); }
.dash-stage .dash-progress-fill {
    background: linear-gradient(90deg, var(--stage-color), var(--stage-color-light));
}
.dash-stage .dash-cta { margin-bottom: 0; }
.dash-stage .dash-cta-primary {
    background: var(--stage-color);
    box-shadow: 0 2px 8px var(--stage-shadow);
}
.dash-stage .dash-cta-primary:hover { background: var(--stage-color-light); }
.dash-stage .dash-cta-outline {
    color: var(--stage-color);
    border-color: var(--stage-color);
}
.dash-stage .dash-cta-outline:hover { background: var(--stage-tint-bg); }

/* 階段空狀態 (尚未指派) */
.dash-stage-empty {
    background: rgba(255,255,255,.55);
    border: 1px dashed var(--stage-tint-border);
    border-radius: 8px;
    padding: 22px 16px;
    text-align: center;
}
.dash-stage-empty-icon {
    font-size: 1.875rem;
    opacity: .5;
    margin-bottom: 6px;
    line-height: 1;
}
.dash-stage-empty-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 4px;
}
.dash-stage-empty-hint {
    font-size: 0.8125rem;
    color: #6b7280;
}

@media (max-width: 767px) {
    .dash-stage { padding: 14px 14px; }
    .dash-stage .dash-stage-title { font-size: 0.9375rem; }
}



/* ======================================================================
   委員 / 個人設定 profile
   ====================================================================== */
.setting-container { max-width: 600px; margin: 32px auto; padding: 0 16px; }
.setting-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.setting-card-hd {
    margin: 0;
    padding: 16px 24px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gray-900);
}
.setting-card-hd::before {
    content: '';
    display: inline-block;
    width: 3px; height: 14px;
    background: #1565c0;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}
.setting-card-bd { padding: 24px; }

.setting-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
}
.setting-back:hover { background: var(--gray-50); border-color: #1565c0; color: #1565c0; }

body.page-reviewer-profile .alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9375rem;
    margin-bottom: 16px;
}
body.page-reviewer-profile .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
body.page-reviewer-profile .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

body.page-reviewer-profile .form-hint {
    font-size: 0.8125rem;
    color: #666;
    margin-top: 4px;
    line-height: 1.5;
}

/* 簽名 */
.sig-preview {
    border: 1.5px dashed #ccc;
    border-radius: 8px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    margin-bottom: 12px;
    overflow: hidden;
}
.sig-preview img { max-width: 100%; height: 90px; object-fit: contain; display: block; }
.sig-preview-empty { font-size: 0.875rem; color: #6b7280; }

.sig-canvas-wrap {
    border: 1.5px dashed #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fff;
}
#sig-canvas { display: block; width: 100%; height: 100px; cursor: crosshair; touch-action: none; }

.sig-btn-row { display: flex; gap: 8px; }
.sig-btn {
    flex: 1;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    transition: all .15s;
}
.sig-btn-outline { background: #fff; border-color: #ccc; color: #444; }
.sig-btn-outline:hover { background: #f5f5f5; }
.sig-btn-primary { background: #1565c0; color: #fff; border-color: #1565c0; }
.sig-btn-primary:hover { background: #1976d2; }
.sig-btn-danger { background: #fff; border-color: #e53935; color: #e53935; }
.sig-btn-danger:hover { background: #ffebee; }

body.page-reviewer-profile .required-mark { color: red; margin-left: 3px; }



/* ======================================================================
   委員 / 評分清單 review list（書審 + 面試共用）
   ====================================================================== */
/* ── 書審清單專用樣式 ──────────────────────────────── */

/* 頁首 */
.rl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.rl-header h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #202124;
}

/* 篩選列 */
.rl-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.rl-filter-btn {
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1.5px solid #dadce0;
    background: #fff;
    color: #444;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.rl-filter-btn:hover { border-color: #1565c0; color: #1565c0; background: #e3f2fd; }
.rl-filter-btn.active { background: #1565c0; color: #fff; border-color: #1565c0; }

/* 統計列 */
.rl-meta {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-bottom: 12px;
}
.rl-meta strong { color: #333; }

/* ─── Badge ──────────────────────────────────────── */
.rv-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.rv-badge-none    { background: #f0f2f5; color: #5E6B6B; /* 灰底要更深才過 AA 4.5:1 */ }
.rv-badge-draft   { background: #fff8e1; color: #e65100; border: 1px solid #ffcc80; }
.rv-badge-done    { background: #e8f5e9; color: #1b7e3e; border: 1px solid #a5d6a7; }

/* ─── 桌機：Table 版 ──────────────────────────────── */
.rl-table-wrap {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.rl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.rl-table thead tr {
    background: #f8f9fa;
    border-bottom: 2px solid #e8eaed;
}
.rl-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #666;
    letter-spacing: .4px;
    white-space: nowrap;
}
.rl-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}
.rl-table tbody tr:last-child td { border-bottom: none; }
.rl-table tbody tr:hover { background: #f8f9ff; }

.rl-serial { font-weight: 700; color: #1565c0; font-size: 0.8125rem; }
.rl-name   { font-weight: 600; color: #202124; }
.rl-sub    { font-size: 0.75rem; color: #6b7280; margin-top: 2px; }

.rl-score  { font-weight: 700; color: #1565c0; }

/* 操作按鈕 */
.rl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.rl-btn-review  { background: #1565c0; color: #fff; }
.rl-btn-review:hover  { background: #1976d2; color: #fff; }
.rl-btn-view    { background: #f0f2f5; color: #444; border: 1px solid #dadce0; }
.rl-btn-view:hover    { background: #e8eaed; color: #333; }

/* ─── 手機/平板：Card 版 ─────────────────────────── */
.rl-card-list { display: none; gap: 10px; flex-direction: column; }
.rl-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}
.rl-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.rl-card.card-done { border-left: 4px solid #1b7e3e; }
.rl-card.card-draft { border-left: 4px solid #e65100; }
.rl-card.card-none  { border-left: 4px solid #bbb; }

.rl-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.rl-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: #202124;
    flex: 1;
    min-width: 0;
}
.rl-card-serial {
    font-size: 0.75rem;
    color: #1565c0;
    font-weight: 600;
    background: #e3f2fd;
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}
.rl-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.75rem;
    color: #6b7280;
}
.rl-card-meta .meta-pill {
    background: #f0f2f5;
    padding: 1px 7px;
    border-radius: 10px;
}
.rl-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}
.rl-card-score {
    font-size: 0.875rem;
    color: #1565c0;
    font-weight: 700;
}
.rl-card-score.no-score { color: #6b7280; }
.rl-card-arrow {
    font-size: 1.0625rem;
    color: #6b7280;
    flex-shrink: 0;
}
.rl-card-done-chip {
    font-size: 0.75rem;
    color: #6b7280;
}

/* 空狀態 */
.rl-empty {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
}
.rl-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.rl-empty-text { font-size: 0.9375rem; }

/* ─── 批次送出 / 簽名區(放在右上 modal 內)──────────── */
.rl-open-modal-btn {
    background: #1565c0;
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.rl-open-modal-btn:hover { background: #1976d2; }
.rl-open-modal-badge {
    background: #fff;
    color: #1565c0;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}
.rl-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.rl-modal-backdrop.show { opacity: 1; pointer-events: auto; }
.rl-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    z-index: 1001;
    opacity: 0;
    transform: translate(-50%, calc(-50% - 12px));
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.rl-modal.show {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.rl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e8eaed;
}
.rl-modal-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #202124;
}
.rl-modal-close {
    background: none;
    border: none;
    width: 28px; height: 28px;
    border-radius: 6px;
    font-size: 1.25rem;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
}
.rl-modal-close:hover { background: #f0f2f5; color: #333; }
.rl-modal-body { padding: 14px 16px 16px; }

.rl-submit-card { background: transparent; }
.rl-submit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.rl-submit-header h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #202124;
}
.rl-submit-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.8125rem;
    color: #555;
    margin-bottom: 10px;
}
.rl-submit-stats .stat-pill {
    background: #f0f2f5;
    padding: 4px 10px;
    border-radius: 12px;
}
.rl-submit-hint {
    font-size: 0.8125rem;
    color: #666;
    margin: 0 0 12px;
    line-height: 1.6;
}
.rl-window-bar {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #fff8f0;
    border: 1px solid #ffcc80;
    border-radius: 8px;
    color: #856404;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rl-sig-pad-wrap {
    border: 1.5px dashed #bbb;
    border-radius: 8px;
    background: #fafbfc;
    height: 160px;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}
.rl-sig-pad-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}
.rl-sig-img {
    max-height: 100%;
    width: auto;
    display: block;
    margin: 0 auto;
}
.rl-submit-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.rl-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rl-submit-btn-primary { background: #1565c0; color: #fff; }
.rl-submit-btn-primary:hover { background: #1976d2; }
.rl-submit-btn-primary:disabled { background: #dadce0; cursor: not-allowed; }
.rl-submit-btn-ghost { background: #f0f2f5; color: #444; border: 1px solid #dadce0; }
.rl-submit-btn-ghost:hover { background: #e8eaed; }
.rl-submit-empty {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    padding: 12px 14px;
    background: #f8f9fa;
    border-radius: 6px;
}

/* ─── RWD 切換 ─────────────────────────────────────── */
@media (max-width: 900px) {
    .rl-table-wrap { display: none; }
    .rl-card-list  { display: flex; }
}
@media (max-width: 767px) {
    .rl-header h1 { font-size: 1.0625rem; }
    .rl-filter-btn { padding: 6px 12px; font-size: 0.8125rem; }
}



/* ======================================================================
   委員 / 評分明細 review detail（書審 + 面試共用）
   ====================================================================== */
/* ═══════════════════════════════════════════════════════
   CSS Custom Properties
═══════════════════════════════════════════════════════ */
.layout-no-sidenav .member-body-full {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.layout-no-sidenav .member-main-full {
    width: 100%;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   Topbar
═══════════════════════════════════════════════════════ */
.rv-topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-300);
    box-shadow: var(--rv-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.rv-topbar-row1 {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray-200);
    min-height: var(--topbar-h);
}

.rv-app-info {
    flex: 1;
    min-width: 0;
}
.rv-app-name {
    /* 由 h2 改為 h1:固定原 h2 預設邊距,避免頂欄高度改變 */
    margin: 0.83em 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 2px;
    line-height: 1.3;
}
.rv-app-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.75rem;
    color: var(--gray-500);
}
.rv-app-meta .meta-tag {
    background: var(--gray-100);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
}

.rv-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.rv-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--gray-300);
    background: var(--white);
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.rv-nav-btn:hover { background: var(--gray-50); border-color: var(--blue-700); color: var(--blue-700); }
.rv-nav-btn.disabled { opacity: .35; pointer-events: none; }
.rv-nav-counter {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
    padding: 0 2px;
}

/* 返回列表按鈕 */
.rv-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--gray-300);
    background: var(--white);
    color: var(--gray-700);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    white-space: nowrap;
}
.rv-back-btn:hover { background: var(--gray-50); border-color: var(--blue-700); color: var(--blue-700); }
.rv-back-icon { font-size: 0.9375rem; line-height: 1; }

@media (max-width: 767px) {
    .rv-back-btn { padding: 0; width: 32px; height: 32px; justify-content: center; gap: 0; }
    .rv-back-btn .rv-back-label { display: none; }
}

/* 文件選擇列（Row 2） */
.rv-topbar-row2 {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--gray-50);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.rv-topbar-row2::-webkit-scrollbar { display: none; }

.rv-doc-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    white-space: nowrap;
    flex-shrink: 0;
}
.rv-doc-select {
    flex: 1;
    min-width: 160px;
    max-width: 360px;
    padding: 6px 10px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: var(--white);
    cursor: pointer;
    appearance: auto;
}
.rv-doc-select:focus { border-color: var(--blue-700); outline: none; box-shadow: 0 0 0 2px var(--blue-50); }

.rv-fixed-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.rv-fixed-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 16px;
    background: var(--white);
    cursor: pointer;
    white-space: nowrap;
    color: var(--gray-700);
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.rv-fixed-btn:hover { background: var(--blue-50); border-color: var(--blue-700); color: var(--blue-700); }
.rv-fixed-btn.active { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }

/* ═══════════════════════════════════════════════════════
   鎖定通知
═══════════════════════════════════════════════════════ */
.rv-locked-bar {
    padding: 10px 16px;
    background: var(--warning-bg);
    border-bottom: 1px solid #ffc107;
    font-size: 0.8125rem;
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════
   Mobile Tab 切換列
═══════════════════════════════════════════════════════ */
.rv-tabbar {
    display: none;
    position: sticky;
    z-index: 90;
    background: var(--white);
    border-bottom: 2px solid var(--gray-200);
}
.rv-tabbar-inner {
    display: flex;
}
.rv-tab {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.rv-tab.active {
    color: var(--blue-700);
    border-bottom-color: var(--blue-700);
}
.rv-tab-icon { font-size: 1.0625rem; }

/* ═══════════════════════════════════════════════════════
   主體佈局
═══════════════════════════════════════════════════════ */
.rv-body {
    display: flex;
    background: var(--gray-100);
}

/* -- 左：PDF 預覽 -- */
.rv-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    gap: 8px;
}
.rv-pdf-box {
    flex: 1;
    display: flex;
    align-items: stretch;
    background: #2d2d2d;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    min-height: 200px;
}
.rv-pdf-box iframe {
    width: 100%;
    /* 不設 height:100%：iframe 是 replaced element,在 flex item 內 %高度無法解析會退回內建 150px;
       改由 .rv-pdf-box 的 align-items:stretch 撐滿整個盒高(桌機/平板/手機皆適用) */
    align-self: stretch;
    border: none;
    display: block;
}
#watermark-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;
}
.rv-pdf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 0.9375rem;
    gap: 8px;
    width: 100%;
}

/* -- 右：評分面板 -- */
.rv-score-panel {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--gray-200);
    background: var(--white);
    overflow: hidden;
}
.rv-score-inner {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

/* 加權總分 */
.rv-total-box {
    background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
    color: var(--white);
    border-radius: var(--radius);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--rv-shadow-sm);
}
.rv-total-label {
    font-size: 0.8125rem; /* 白字於藍底不加 opacity,維持 AA 對比 */
    letter-spacing: .5px;
}
.rv-total-value {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
}
.rv-total-unit { font-size: 0.8125rem; margin-top: 2px; }

/* 評分區塊 */
.rv-section {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}
.rv-section-hd {
    margin: 0;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--gray-900);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 8px;
}
.rv-section-hd::before {
    content: '';
    display: block;
    width: 3px;
    height: 14px;
    background: var(--blue-700);
    border-radius: 2px;
    flex-shrink: 0;
}

/* 評分項目 */
.rv-score-items { padding: 8px 0; }
.rv-score-item {
    padding: 8px 14px;
    border-bottom: 1px solid var(--gray-100);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 4px 8px;
    align-items: start;
}
.rv-score-item:last-child { border-bottom: none; }

.rv-item-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.rv-item-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-900);
}
.rv-item-weight {
    font-size: 0.75rem;
    color: var(--blue-700);
    background: var(--blue-50);
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.rv-item-rule {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: #5a5a5a;
    background: var(--orange-bg);
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 2px solid var(--orange);
    line-height: 1.5;
}

.rv-item-input-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.rv-score-input {
    width: 80px;
    text-align: center;
    font-size: 1.0625rem;
    padding: 8px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: var(--gray-50);
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
}
.rv-score-input:focus {
    border-color: var(--blue-700);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 2px var(--blue-50);
}
.rv-score-input[readonly] { background: var(--gray-100); color: var(--gray-500); }
.rv-weighted {
    font-size: 0.8125rem;
    color: var(--blue-700);
    font-weight: 600;
    flex: 1;
}
.rv-input-hint {
    font-size: 0.6875rem;
    color: var(--gray-500);
}

/* 審查意見 */
.rv-comment-area {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.6;
    background: var(--gray-50);
}
.rv-comment-area:focus {
    border-color: var(--blue-700);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 2px var(--blue-50);
}
.rv-section-body { padding: 12px 14px; }

/* 簽名 */
.rv-sig-pad-wrap {
    border: 1.5px dashed var(--gray-300);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--gray-50);
    touch-action: none;
}
#signature-canvas {
    display: block;
    width: 100%;
    height: 90px;
    cursor: crosshair;
    touch-action: none;
}
.rv-sig-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 8px;
}

/* 按鈕列 */
.rv-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.rv-save-msg {
    display: none;
    margin-top: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #d32f2f;
}
.rv-save-msg.show { display: block; }
.rv-btn {
    flex: 1;
    min-width: 80px;
    padding: 11px 16px;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.rv-btn-outline {
    background: var(--white);
    border-color: var(--gray-300);
    color: var(--gray-700);
}
.rv-btn-outline:hover { background: var(--gray-50); border-color: var(--gray-500); }
.rv-btn-ghost {
    background: transparent;
    border-color: var(--gray-200);
    color: var(--gray-500);
    font-size: 0.8125rem;
    padding: 7px 10px;
    flex: none;
}
.rv-btn-ghost:hover { background: var(--gray-50); }
.rv-btn-primary {
    background: var(--blue-700);
    color: var(--white);
    border-color: var(--blue-700);
}
.rv-btn-primary:hover { background: var(--blue-600); }
.rv-btn-primary:disabled { background: var(--gray-300); border-color: var(--gray-300); cursor: not-allowed; }

/* 浮動狀態訊息:改用學生端共用 .flash-toast(partials/reviewer/_toast-script) */

/* 鎖定覆蓋 */
.rv-locked-overlay {
    background: var(--warning-bg);
    border: 1px solid #ffc107;
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 0.8125rem;
    color: var(--warning);
}

/* ═══════════════════════════════════════════════════════
   Desktop：左右並排，固定全高
═══════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .rv-body {
        height: calc(100dvh - 170px);
        overflow: hidden;
    }
    .rv-preview { height: 100%; }
    .rv-pdf-box { min-height: 0; }
    .rv-score-panel { height: 100%; }
}

@media (max-width: 1023px) {
    .rv-body { flex-direction: column; min-height: 0; }
    .rv-tabbar { display: block; }

    .rv-preview {
        display: none;
        padding: 10px;
        height: calc(100dvh - 218px);
        min-height: 80dvh;
    }
    .rv-preview.tab-active { display: flex; }

    /* 手機/平板整頁本身會捲動,評分面板不固定高、不內捲,
       否則與頁面捲軸形成雙捲軸(桌機左右分割全高才需要內捲) */
    .rv-score-panel {
        display: none;
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--gray-200);
    }
    .rv-score-panel.tab-active { display: flex; }
    .rv-score-inner { overflow-y: visible; }

    .rv-pdf-box { min-height: 300px; }
}

@media (max-width: 767px) {
    .rv-topbar-row1 { padding: 8px 12px; gap: 8px; min-height: 48px; }
    .rv-app-name { font-size: 0.875rem; }
    .rv-app-meta { display: none; }

    .rv-topbar-row2 { padding: 6px 12px; gap: 6px; }
    .rv-doc-select { min-width: 120px; font-size: 0.8125rem; }

    .rv-fixed-btns { gap: 3px; }
    .rv-fixed-btn { padding: 4px 8px; font-size: 0.6875rem; }

    .rv-nav-btn { width: 32px; height: 32px; font-size: 0.8125rem; }
    .rv-nav-counter { font-size: 0.6875rem; }

    .rv-preview { height: calc(100dvh - 200px); min-height: 80dvh; }
    .rv-pdf-box { min-height: 250px; }

    .rv-score-inner { padding: 12px; gap: 10px; }
    .rv-total-value { font-size: 1.75rem; }
    .rv-score-input { width: 72px; font-size: 1rem; }
    .rv-btn { padding: 12px 10px; font-size: 0.875rem; }
}

@media print {
    .rv-topbar, .rv-tabbar, .rv-preview { display: none !important; }
    .rv-score-panel { display: block !important; width: 100% !important; height: auto !important; border: none; }
    .rv-score-inner { overflow: visible; }
}

/* ======================================================================
   富文本(TinyMCE)輸出 — HtmlSanitizer 轉出的 class
   ----------------------------------------------------------------------
   後台 TinyMCE 以 inline style 產出的色彩/對齊,會被 @richtext
   (App\Support\HtmlSanitizer)收斂成下列 class(底線/粗體/斜體/刪除線則另轉成
   <u>/<strong>/<em>/<s> 語意標籤),以同時通過 HTML 白名單清洗與前台 strict CSP
   (style-src-attr 'none' 會擋掉 inline style 屬性)。
   新增顏色時,需同步更新 App\Support\HtmlSanitizer::COLOR_MAP。
   ====================================================================== */
.rt-fg-red    { color: #e74c3c; }
.rt-fg-blue   { color: #2980b9; }
.rt-fg-green  { color: #27ae60; }
.rt-fg-orange { color: #e67e22; }

.rt-align-left    { text-align: left; }
.rt-align-center  { text-align: center; }
.rt-align-right   { text-align: right; }
.rt-align-justify { text-align: justify; }


/* ======================================================================
   推薦人上傳(推薦信)——學生端邀請區塊(_recommendation-invite-block)
   與推薦人 guest 上傳頁(recommendation/upload)
   ====================================================================== */
.recommendation-block {
    border-top: 1px dashed #d1d5db;
    padding-top: 0.75rem;
}
.recommendation-block .required-mark { color: #dc2626; margin-left: 2px; }
.recommendation-block label { display: block; margin-bottom: 0.25rem; }

.rec-invite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
}
@media (max-width: 640px) {
    .rec-invite-grid { grid-template-columns: 1fr; }
}