/* UC Training Cloud Coach — 品牌 tokens 與共用元件
   基底來自 uc-design SKILL（簡報規格），延伸為響應式深色 App。色票不動。 */

:root {
  --navy: #131B2E;
  --beige: #E8E4DC;
  --salmon: #E8A898;
  --white: #FFFFFF;

  --navy-60: rgba(19, 27, 46, .6);
  --navy-lift: #1B2440;          /* 深藍底上的卡片，用亮一階的同色，不引入新色 */
  --navy-lift2: #222D4E;
  --beige-70: rgba(232, 228, 220, .7);
  --beige-40: rgba(232, 228, 220, .4);
  --beige-18: rgba(232, 228, 220, .18);
  --beige-08: rgba(232, 228, 220, .08);
  /* 米白紙上的深藍階（跟 --beige-* 對稱）。評測頁是米白的，需要這一組。 */
  --navy-40: rgba(19, 27, 46, .4);
  --navy-18: rgba(19, 27, 46, .18);
  --navy-12: rgba(19, 27, 46, .12);
  --navy-08: rgba(19, 27, 46, .08);
  --salmon-30: rgba(232, 168, 152, .3);
  --salmon-12: rgba(232, 168, 152, .12);

  --serif: 'Noto Serif TC', serif;
  --sans: 'Noto Sans TC', system-ui, sans-serif;
  --mono: 'Space Grotesk', 'Noto Sans TC', sans-serif;
  /* --display 已移除：uc.css 全檔引用 0 次，卻讓字型連結多要一個字族。 */

  --pad: 20px;
  --maxw: 880px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--beige);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* 迷宮紋路：uc-design 的品牌底層裝飾，反色版（深底上用米白線） */
.mesh {
  background-image:
    repeating-linear-gradient(0deg, var(--beige-08) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--beige-08) 0 1px, transparent 1px 48px);
}
/* ── 品牌元件 ───────────────────────────────────────── */

.uc-logo {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.hero-demo-mark {
  display: block; margin: 0 auto; padding: 0; border: 0;
  color: inherit; background: none; border-radius: 50%; cursor: pointer;
}
.hero-demo-mark .hero-mark { display: block; margin: 0; }
/* 官方 logo 圖（2026-10-22 取代原本畫的 uc 圓圈）：點擊範圍＝圖本身，不另外撐大 */
.hero-demo-mark:has(.hero-logo) { margin-bottom: 22px; }
.hero-demo-mark .hero-logo { width: 72px; height: 72px; object-fit: contain; animation: hero-logo-in .9s var(--ease) .1s both; }
@keyframes hero-logo-in { from { opacity: 0; transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { .hero-demo-mark .hero-logo { animation: none; } }
.hero-demo-mark:focus-visible { outline: 2px solid var(--salmon); outline-offset: 5px; }
.hero-demo-mark:active { transform: scale(.97); }
/* 四角 L 型括號。uc-design 要求每頁都出現 */
.brk { position: absolute; width: 22px; height: 34px; pointer-events: none; opacity: .35; }
.brk-tl { top: 14px; left: 14px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.brk-tr { top: 14px; right: 14px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.brk-bl { bottom: 14px; left: 14px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.brk-br { bottom: 14px; right: 14px; border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
/* 雙色橫線分隔符 */
.divider { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; }
.divider i { display: block; width: 60px; height: 3px; background: currentColor; }
.divider s { display: block; flex: 1; height: 1px; background: currentColor; opacity: .2; }
/* 右側直書標籤 */
.side-label {
  position: fixed; right: 6px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 9px; letter-spacing: .28em;
  opacity: .22; pointer-events: none; z-index: 2;
}
.ey {  /* 英文小標／眉標 */
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; opacity: .5;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.35; margin: 0; }
h1 { font-size: 27px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
p { margin: 0 0 1em; }
a { color: var(--salmon); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* ── 版面 ──────────────────────────────────────────── */

.view { display: none; min-height: 100vh; position: relative; }
.view.on { display: block; animation: fade .45s var(--ease) both; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.paper > section > .wrap { max-width: 100%; }
/* 頂部列（登入頁以外） */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) var(--pad) 12px;
  background: rgba(19, 27, 46, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--beige-08);
}
.top .uc-logo { width: 30px; height: 30px; font-size: 11px; }
.top .tname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-session {
  display: grid; grid-template-columns: 30px auto; align-items: center; gap: 8px;
  min-width: 0; margin-left: auto; color: var(--beige);
}
.uc-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden;
  border: 1px solid var(--beige-18); border-radius: 50%;
  background: var(--navy-lift2); color: var(--salmon);
  font-family: var(--serif); font-size: 13px;
}
.uc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.uc-session-copy { display: grid; justify-items: end; min-width: 0; line-height: 1.15; }
.top .who {
  max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; opacity: .78;
}
.uc-sync {
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .05em;
  color: var(--beige-40); white-space: nowrap;
}
.uc-sync i { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.uc-sync[data-state="saving"] { color: var(--salmon); }
.uc-sync[data-state="saving"] i { background: currentColor; animation: syncpulse 1.1s ease-in-out infinite; }
.uc-sync[data-state="saved"] { color: var(--beige-70); }
.uc-sync[data-state="saved"] i { background: currentColor; }
.uc-sync[data-state="offline"], .uc-sync[data-state="error"] { color: var(--salmon); }
@keyframes syncpulse { 50% { opacity: .25; transform: scale(.72); } }
/* 底部導覽（uc-design 的膠囊 nav-bar，改成頁面切換） */
.nav {
  position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  z-index: 30;
  display: flex; gap: 2px;
  background: rgba(19, 27, 46, .92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--beige-18);
  border-radius: 40px;
  padding: 6px;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--beige-70); text-decoration: none;
  padding: 7px 13px; border-radius: 30px; white-space: nowrap;
  min-height: 44px; display: flex; align-items: center;
  transition: background .2s, color .2s;
}
.nav a[aria-current="page"] { background: var(--salmon); color: var(--navy); font-weight: 600; }
/* demo 才有：學員／教練視角切換（使用者 2026-10-13：放在底部藍列裡、要隱蔽 —— 只有一個淡淡的 ⇄）。 */
.nav #navRole { min-height: 44px; min-width: 30px; padding: 0 6px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: var(--beige-40); opacity: .35;
  background: transparent; border: 0; transition: opacity .2s, color .2s; }
.nav #navRole:hover, .nav #navRole:focus-visible { opacity: 1; color: var(--salmon); }
.nav a[aria-disabled="true"] {
  color: var(--beige-40); opacity: .34; cursor: not-allowed;
}
.nav a[aria-disabled="true"]::after {
  content: ''; width: 4px; height: 4px; margin-left: 5px;
  border: 1px solid currentColor; border-radius: 50%;
}
.pagepad { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (max-width: 520px) {
  .top { gap: 8px; }
  .top .tname { font-size: 14px; }
  .uc-session { grid-template-columns: 28px auto; gap: 6px; }
  .uc-avatar { width: 28px; height: 28px; }
  .top .who { max-width: 78px; font-size: 9.5px; }
}

/* 軟體鍵盤打開時，固定導覽列不要被瀏覽器抬到鍵盤上方。 */
@media (max-width: 900px) {
  .nav { transition: opacity .16s var(--ease), transform .2s var(--ease); }
  html.uc-keyboard-open .nav {
    opacity: 0; pointer-events: none;
    transform: translate(-50%, calc(100% + 36px + env(safe-area-inset-bottom)));
  }
  html.uc-keyboard-open .pagepad { padding-bottom: 24px; }
}
/* ── 控件 ──────────────────────────────────────────── */

.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--beige); background: transparent;
  border: 1px solid var(--beige-40); border-radius: 3px;
  padding: 13px 22px; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.btn:hover { border-color: var(--beige); }
.btn.pri { background: var(--salmon); border-color: var(--salmon); color: var(--navy); font-weight: 700; }
.btn.pri:hover { filter: brightness(1.07); }
.btn.gh { border-color: var(--beige-18); font-size: 12px; padding: 10px 16px; }
.btn:disabled { opacity: .35; cursor: default; }
input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%; font-family: var(--sans); font-size: 15px;
  color: var(--beige); background: var(--navy-lift);
  border: 1px solid var(--beige-18); border-radius: 3px;
  padding: 12px 13px;
}
select { appearance: none; background-image: none; }
textarea { resize: vertical; min-height: 84px; line-height: 1.7; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--salmon); }
input::placeholder, textarea::placeholder { color: var(--beige-40); }
.card {
  background: var(--navy-lift);
  border: 1px solid var(--beige-08);
  border-radius: 4px;
  padding: 18px;
}
/* ── 動態 ──────────────────────────────────────────── */

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes maskup { from { transform: translateY(105%) } to { transform: none } }
@keyframes draw { to { stroke-dashoffset: 0 } }
/* 捲動揭示：app.js 用 IntersectionObserver 加 .in */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
/* 文字遮罩上升 */
.mask { overflow: hidden; display: block; }
.mask > span { display: block; animation: maskup .9s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv { opacity: 1; transform: none; }
}
@media (min-width: 720px) {
  :root { --pad: 32px; }
  h1 { font-size: 38px; }
  h2 { font-size: 27px; }
}
/* ── 登入／歡迎頁 ──────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 56px var(--pad);
  color: var(--beige);
}
/* 深藍底上的一圈鮭粉暈，唯一的光暈來源 */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 42% at 50% 38%, var(--salmon-12), transparent 70%);
}
.hero-in { position: relative; max-width: 560px; width: 100%; text-align: center; }
.hero-mark { width: 62px; height: 62px; color: var(--beige); margin-bottom: 26px; }
.hero-mark circle { stroke-dasharray: 233; stroke-dashoffset: 233; animation: draw 1.1s var(--ease) .1s both; }
.hero-mark text {
  font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: .04em;
  fill: currentColor; opacity: 0; animation: fade .6s ease .9s both;
}
.hero-ey { margin: 0 0 18px; animation: fade .8s ease 1.1s both; }
.hero-h { font-size: 34px; font-weight: 900; letter-spacing: .01em; margin-bottom: 14px; }
.hero-h .mask > span { animation-delay: 1.2s; }
.hero-h .mask:last-child > span { animation-delay: 1.35s; color: var(--salmon); }
.hero-sub {
  font-family: var(--serif); font-size: 15px; letter-spacing: .3em;
  opacity: .62; margin: 0 0 4px; animation: fade 1s ease 1.7s both;
}
.hero-div { justify-content: center; animation: fade 1s ease 1.9s both; }
.hero-div i { width: 44px; }
.hero-div s { max-width: 120px; }
.hero-lead { font-size: 14.5px; line-height: 2; opacity: .8; animation: rise .9s var(--ease) 2s both; }
.line-entry {
  display: none; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 30px; animation: rise .7s var(--ease) .36s both;
}
.line-entry .btn { min-width: min(100%, 280px); }
.line-entry small, .line-wait {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--beige-40);
}
.line-progress {
  display: none; width: min(100%, 390px); margin: 26px auto 0; text-align: left;
  animation: rise .35s var(--ease) both;
}
.line-progress > .ey { margin-bottom: 8px; color: var(--salmon); opacity: .8; }
.line-progress h2 { margin-bottom: 20px; font-size: 20px; font-weight: 400; }
.line-steps { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.line-steps li {
  display: flex; align-items: center; gap: 11px; color: var(--beige-40);
  font-size: 13px; transition: color .25s var(--ease), opacity .25s var(--ease);
}
.line-steps li i {
  width: 8px; height: 8px; flex: none; border: 1px solid currentColor;
  transform: rotate(45deg); transition: background .25s var(--ease), border-color .25s var(--ease);
}
.line-steps li.is-active { color: var(--beige); }
.line-steps li.is-active i { border-color: var(--salmon); animation: line-pulse 1.1s ease-in-out infinite; }
.line-steps li.is-done { color: var(--beige-70); }
.line-steps li.is-done i { background: var(--salmon); border-color: var(--salmon); }
.line-track { height: 1px; margin-top: 20px; overflow: hidden; background: var(--beige-18); }
.line-track i {
  display: block; width: var(--line-progress, 12%); height: 100%; background: var(--salmon);
  transition: width .45s var(--ease);
}
.line-wait { margin: 14px 0 0; line-height: 1.7; }
.line-retry { margin-top: 12px; }
[data-uc-boot="line"][data-uc-line-state="ready"] .line-entry { display: flex; }
[data-uc-boot="line"][data-uc-line-state="loading"] .line-progress { display: block; }
[data-uc-boot="line"][data-uc-line-state="loading"] .hero-lead { display: none; }
[data-uc-line-step="login"] { --line-progress: 18%; }
[data-uc-line-step="sync"] { --line-progress: 58%; }
[data-uc-line-step="route"] { --line-progress: 88%; }
[data-uc-line-step="done"] { --line-progress: 100%; }
@keyframes line-pulse {
  0%, 100% { opacity: .35; transform: rotate(45deg) scale(.8); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.15); }
}
@media (min-width: 720px) {
  .hero-h { font-size: 54px; }
}
@media (max-width: 560px) {
  /* LIFF 開啟後要立刻能操作；桌機的長入場節奏在手機上會像載入卡住。 */
  .hero-mark circle { animation-delay: 0s; animation-duration: .55s; }
  .hero-mark text { animation-delay: .12s; }
  .hero-ey { animation-delay: .08s; }
  .hero-h .mask > span { animation-delay: .12s; animation-duration: .55s; }
  .hero-h .mask:last-child > span { animation-delay: .18s; }
  .hero-sub { animation-delay: .22s; animation-duration: .55s; }
  .hero-div { animation-delay: .26s; animation-duration: .55s; }
  .hero-lead { animation-delay: .3s; animation-duration: .55s; }
  .line-entry { animation-delay: .36s; animation-duration: .55s; }
}
/* ── 評測頁（一頁式・米白考卷）───────────────────────
   九區攤在同一頁往下捲。整張是一張浮在深藍上的**米白紙**（使用者指定：像考試紙），
   跟報告頁的 .paper 同一套語彙：米白底、上緣一條鮭粉細線、四周有陰影當紙的邊界。

   ⚠️ 米白上的鮭粉**文字**一律換成 --salmon-ink（#E8A898 在 #E8E4DC 上只有 1.3:1，
   完全讀不了）。線條、邊框、底色不受影響 —— 那些不需要對比度。
   深藍階用 --navy-*，不要沿用 --beige-*（那是給深藍底的，在米白上等於透明）。 */

#assessBody {
  background: var(--beige); color: var(--navy);
  max-width: 880px; margin: 26px auto 46px; padding: 0 30px 26px;
  border-radius: 2px; position: relative;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .3);
}
#assessBody::before {                    /* 紙張上緣的細線，跟報告的 .paper 一致 */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--salmon); opacity: .5; border-radius: 2px 2px 0 0;
}

/* 區塊列黏在 .top 底下。⚠️ 55px 是 .top 的實際高度（12px 內距 ×2 ＋ 30px logo）；
   .top 改高度這裡要跟著改，不然會疊在一起。
   左右負邊界是為了讓它貼齊紙的兩側 —— 黏住的時候，內容不能從側邊的留白穿過去。 */
.asbar {
  position: sticky; top: calc(55px + env(safe-area-inset-top)); z-index: 15;
  background: var(--beige);
  margin: 0 -30px; padding: 0 30px 10px;
  border-bottom: 1px solid var(--navy-12);
}
.secnav { display: flex; gap: 4px; overflow-x: auto; padding: 16px 0 0; scrollbar-width: none; }
.secnav::-webkit-scrollbar { display: none; }
.pip {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: none; border: 0; border-top: 2px solid var(--navy-18);
  padding: 8px 0 0; margin-right: 14px; cursor: pointer; color: var(--navy);
  transition: border-color .25s, opacity .25s; opacity: .45;
}
.pip b { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }
.pip s { text-decoration: none; font-size: 11px; white-space: nowrap; }
.pip.full { opacity: .7; border-top-color: var(--navy-40); }
.pip.on { opacity: 1; border-top-color: var(--salmon-ink); }
.prog { height: 2px; background: var(--navy-08); margin-top: 14px; }
.prog i { display: block; height: 100%; background: var(--salmon-ink); transition: width .4s var(--ease); }
.aspct { margin: 8px 0 0; color: var(--salmon-ink); opacity: .75; }

/* ⚠️ 每一區要留 scroll-margin，不然跳過去之後標題會被上面兩條黏著的列蓋住。
   172 = .top 55 ＋ .asbar 109 ＋ 8 呼吸（實際量出來的，不是猜的）。 */
.assec { scroll-margin-top: 172px; }
.sechead { margin: 40px 0 22px; }
.sechead .ey { color: var(--salmon-ink); opacity: .85; }

/* 收合的那一行 —— 這是整頁的預設樣貌，密度要夠才壓得短。
   答案短的題目（姓名、年齡、級距選單）併排，像個人資料表格。
   ⚠️ 六欄的 grid，**不要用 grid-auto-flow: dense** —— 那會為了填洞重排題目，
   題目順序是有意義的（05 那 25 題刻意五個維度交錯）。
   所以只有**相鄰**的短題目會併排；一個 col:2 後面接整排的題目，它就自己佔一排。 */
.qlist {
  display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 26px;
  border-top: 1px solid var(--navy-12);
}
.qrow { grid-column: span 6; border-bottom: 1px solid var(--navy-12); }
.qrow[data-col="2"] { grid-column: span 3; }
.qrow[data-col="3"] { grid-column: span 2; }
/* 三分之一排太窄，8.5em 的固定標題欄會把答案擠掉 —— 標題自己一行（同手機的處理）。 */
.qrow[data-col="3"] .qsum { flex-wrap: wrap; gap: 2px 10px; padding-right: 22px; }
.qrow[data-col="3"] .qname { width: auto; flex: 1 1 100%; }
.qrow[data-col="3"] .qval { flex: 1 1 100%; }
.qrow[data-col="3"] .qcar { position: absolute; right: 2px; top: 15px; margin: 0; }
.qsum {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; width: 100%;
  background: none; border: 0; padding: 12px 26px 12px 0; cursor: pointer;
  text-align: left; color: var(--navy); font-family: var(--sans);
}
/* 考卷式（2026-10-14）：左邊題號，右邊依序是短標題（小字）、完整題目（主角）、作答線。 */
.qsum { display: grid !important; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 10px; row-gap: 3px;
  align-items: start; }
.qno { grid-column: 1; grid-row: 1 / 4; padding-top: 2px; font: 500 12px/1.4 var(--mono);
  letter-spacing: .04em; color: var(--salmon-ink); }
.qname { grid-column: 2; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; opacity: .5; }
.qask { grid-column: 2; font-size: 15px; font-weight: 500; line-height: 1.6; opacity: .92; }
.qsum > .qval, .qsum > .qhint { grid-column: 2; }
/* 作答線：答案寫在一條線上，「未填」就是還沒寫的空格。 */
.qsum > .qval { justify-self: start; min-width: min(16em, 100%); max-width: 100%; margin-top: 4px;
  padding: 3px 2px 4px; border-bottom: 1px solid var(--navy-12); }
.qrow.free .qsum > .qval { justify-self: stretch; }   /* 填空題的格子要整欄寬 */
.qsum:focus { outline: none; }
.qsum:focus-visible { outline: 1px solid var(--salmon-ink); outline-offset: 3px; }
.qval { flex: 1 1 100%; min-width: 0; font-size: 13px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.qtxt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .88; }
.qnil { font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; opacity: .3; }
.qdots { display: inline-flex; gap: 5px; align-items: center; margin-right: 12px;
  vertical-align: middle; }
.qdots + .qtxt { display: inline; }
.qdots i {
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--navy); opacity: .16;
}
.qdots i.on { background: var(--salmon-ink); opacity: 1; }
.qcar {
  position: absolute; right: 4px; top: 18px;
  flex: none; width: 7px; height: 7px; margin: 0; opacity: .3;
  border-right: 1.2px solid var(--navy); border-bottom: 1.2px solid var(--navy);
  transform: rotate(45deg); transition: transform .22s var(--ease), opacity .2s;
}
.qsum:hover .qcar { opacity: .7; }
.qsum:hover .qname { opacity: 1; }
.qrow.popped .qcar { transform: rotate(-135deg); opacity: .8; }
.qrow.popped { background: rgba(255, 255, 255, .45); }
.qrow.answered .qname { opacity: .9; }

/* 填空題：格子本身就是輸入框，直接在原位打字。
   ⚠️ 用 <textarea rows="1"> 不用 <input> —— 要能按 Enter 換行，也要能自己長高。
   高度由 JS 的 grow() 設（先歸零再讀 scrollHeight，不歸零就只長不縮）。 */
.qrow.free .qsum { align-items: flex-start; }
/* ⚠️ .qval 預設是「一行、超出就截斷」（那是給選擇題的答案格用的）。
   填空題要能換行，這三個都得解掉，不然補充說明會被截成一行（踩過）。 */
.qrow.free .qval { white-space: normal; overflow: visible; text-overflow: clip; }
/* ⚠️ **選擇器一定要寫成 `input.qfield`，不能只寫 `.qfield`。**
   上面第 149 行那條全站規則裡有 `input[type=number]`（深藍底、米白字），
   它的權重是 0,1,1；純 `.qfield` 只有 0,1,0 —— 於是唯一一題 number
   （L02 交往次數）在米白考試紙上變成一個深藍色方塊（踩過，使用者回報）。
   `textarea` 是 0,0,1 所以填空題沒事，只有 number 中招。
   寫成 input.qfield 之後權重打平，而這條在後面，就贏了。 */
input.qfield, textarea.qfield {
  display: block; width: 100%; resize: none; overflow: hidden;
  font-family: var(--sans); font-size: 13px; line-height: 1.75;
  color: var(--navy); background: none; border: 0; border-radius: 0; padding: 0;
  min-height: 1.75em;
  /* number 的上下微調箭頭在考試紙上很突兀，關掉。 */
  appearance: textfield; -webkit-appearance: textfield;
}
input.qfield::-webkit-outer-spin-button,
input.qfield::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.qfield:focus, textarea.qfield:focus { outline: none; border-color: transparent; }
input.qfield::placeholder, textarea.qfield::placeholder { color: var(--navy); opacity: .3; }
.qrow.free { transition: background .2s; }
.qrow.focus { background: rgba(255, 255, 255, .45); }
/* 補充說明只在游標在格子裡的時候出現 —— 常駐的話 17 個填空題會多 17 行。 */
.qhint {
  display: none; margin: 6px 0 0; font-size: 11.5px; line-height: 1.75;
  color: var(--navy); opacity: .5;
}
.qrow.focus .qhint { display: block; animation: fade .2s var(--ease) both; }

/* 原地彈出的選項浮層。position: fixed，所以它完全不參與版面 ——
   開、關、換題目都不會推動任何東西（這就是改掉往下展開的全部理由）。 */
.qpop {
  position: fixed; z-index: 40; display: none;
  background: var(--beige); color: var(--navy);
  border: 1px solid var(--navy-18); border-radius: 4px;
  padding: 16px 18px 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .24);
  max-height: 62vh; overflow-y: auto;
}
.qpop.on { display: block; animation: poppin .18s var(--ease) both; }
/* 浮層裡的一切都要比頁面上緊一號 —— 它是暫時浮出來的東西，
   照頁面的密度排會變成一個蓋掉半個畫面的大方塊（踩過）。 */
.qpop .qh { font-size: 13.5px; line-height: 1.7; margin: 0 0 8px; }
.qpop .qnote { font-size: 11.5px; line-height: 1.7; margin: 0 0 10px; }
.qpop .opts { gap: 4px; }
.qpop .opt { padding: 8px 12px; font-size: 13px; line-height: 1.6; }
.qpop .checks { gap: 6px; }
.qpop .chk { padding: 6px 11px; font-size: 12.5px; }
.qpop .qhelp { margin-top: 10px; }
/* 選項都很短的時候排成標籤流，不要一個一條。13 個星座直排是 600px 高的浮層。 */
.qpop .opts.tight { flex-direction: row; flex-wrap: wrap; }
.qpop .opts.tight .opt { flex: 0 0 auto; padding: 7px 13px; }
@keyframes poppin { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.qh { font-size: 15px; font-weight: 500; margin: 0 0 10px; line-height: 1.8; }
.qnote { font-size: 12.5px; line-height: 1.85; opacity: .55; margin: 0 0 12px; }
.qhelp { font-size: 11.5px; opacity: .6; margin: 8px 0 0; }
.qhelp em { font-style: normal; opacity: .6; }

/* 勾選題。跟單選的 .opt 分開一套 —— 單選是直排長條（選項是句子），
   複選是橫排標籤（選項是短詞），排版邏輯不一樣，共用只會兩邊都彆扭。 */
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chk {
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--navy); background: rgba(255, 255, 255, .55);
  border: 1px solid var(--navy-12); border-radius: 3px;
  padding: 8px 14px; cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.chk:hover { border-color: var(--navy-40); }
.chk.sel { background: var(--salmon); border-color: var(--salmon); color: var(--navy); font-weight: 500; }

/* 題目底下的參考清單 */
.qref { margin: 12px 0 0; border-top: 1px solid var(--navy-12); padding-top: 10px; }
.qref summary { cursor: pointer; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; color: var(--salmon-ink); opacity: .8; }
.qref summary:hover { opacity: 1; }
.qref > div { padding-top: 10px; }
.qref p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.9; opacity: .7; }
.qref b { display: inline-block; width: 4em; font-weight: 500; opacity: .55; }

.opts { display: flex; flex-direction: column; gap: 7px; }
.opt {
  display: flex; align-items: center; gap: 10px; text-align: left;
  font-family: var(--sans); font-size: 14px; line-height: 1.7;
  color: var(--navy); background: rgba(255, 255, 255, .55);
  border: 1px solid var(--navy-12); border-radius: 3px;
  padding: 12px 14px; cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.opt:hover { border-color: var(--navy-40); }
.opt.sel { background: var(--salmon); border-color: var(--salmon); color: var(--navy); font-weight: 500; }
.opt b { flex: none; font-size: 11px; opacity: .45; }
.opt.sel b { opacity: .65; }
.opts.scale { flex-direction: row; flex-wrap: wrap; }
.opts.scale .opt { flex: 1 1 0; min-width: 92px; flex-direction: column; gap: 4px; text-align: center; padding: 11px 6px; }
.opts.scale .opt span { font-size: 11.5px; opacity: .8; }
.opts.scale .opt.sel span { opacity: 1; }

.secfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 34px 0 10px; }
.secfoot .btn { color: var(--navy); border-color: var(--navy-18); }
.secfoot .btn:hover { border-color: var(--navy); }
.secfoot .btn.pri { color: var(--navy); border-color: var(--salmon); }
.assessfold {
  margin: 20px 0 34px; border: 1px solid var(--beige-18);
  background: linear-gradient(var(--beige-08), var(--beige-08));
}
.assessfold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 20px; cursor: pointer; list-style: none;
}
.assessfold > summary::-webkit-details-marker { display: none; }
.assessfold > summary span { display: grid; gap: 5px; }
.assessfold > summary b { font: 700 18px/1.4 var(--serif); }
.assessfold > summary small { color: var(--beige-40); font-size: 11px; }
.assessfold > summary i { width: 9px; height: 9px; border-right: 1px solid var(--salmon);
  border-bottom: 1px solid var(--salmon); transform: rotate(45deg); transition: transform .2s var(--ease); }
.assessfold[open] > summary i { transform: rotate(225deg); }
.assessfold-body { padding: 0 20px 24px; border-top: 1px solid var(--beige-08); }
#v-assess .assessfold { border-color: var(--navy-18); background: var(--navy-08); }
#v-assess .assessfold > summary small { color: var(--navy-40); }
#v-assess .assessfold-body { border-top-color: var(--navy-12); }
.assessnotify {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin: 0 0 34px; padding: 20px 22px; border-left: 2px solid var(--salmon);
  background: var(--salmon-12);
}
.assessnotify h2 { margin: 3px 0 5px; font: 700 22px/1.35 var(--serif); }
.assessnotify p { margin: 0; color: var(--beige-70); font-size: 12px; }
.assessreport { margin-top: 42px; }
.assessreport .rhead { padding-top: 0; }
.assessreport-actions { display: flex; justify-content: flex-end; padding: 18px max(18px, calc((100% - 1040px) / 2)); }
/* ⚠️ 評測頁是米白底，.btn.gh 預設是米白字 —— 不覆寫就隱形（2026-09-24 回報兩次）。 */
.assessreport-actions .btn.gh { color: var(--navy); border-color: var(--navy-40); background: transparent; }
.assessreport-actions .btn.gh:hover { color: var(--salmon-ink); border-color: var(--salmon-ink); }
@media (max-width: 620px) {
  .assessfold-body { padding-inline: 10px; }
  .assessnotify { align-items: stretch; flex-direction: column; }
  .assessnotify .btn { width: 100%; }
}

@media (max-width: 560px) {
  /* ⚠️ 這一條**擋不住所有欄位** —— 權重只有 0,0,1／0,1,1，
     而 .qfield、.crnote textarea、.gfr textarea 那些都在後面、權重更高，
     所以真正用來填答的欄位還是 12～15px，點下去 iOS 照樣放大（踩過）。
     真正生效的那條在檔案最後面的「手機輸入」區塊。 */
  input[type=text], input[type=number], input[type=password], select, textarea { font-size: 16px; }
  .rv { transition-duration: .35s; }
  #assessBody { margin: 16px 10px 40px; padding: 0 18px 20px; }
  /* 手機一律整排。375px 上併排等於兩邊都放不下。 */
  .qlist { display: block; }
  .qrow[data-col="2"], .qrow[data-col="3"] { grid-column: auto; }
  .asbar { margin: 0 -18px; padding: 0 18px 10px; }
  /* 手機把短標題改成獨立一行 —— 8.5em 的固定欄寬在 375px 上會把答案擠到剩三個字。 */
  .qsum { flex-wrap: wrap; gap: 3px 12px; padding: 12px 34px 12px 0; }
  .qask { font-size: 14px; }
  .qval { flex: 1 1 100%; }
  /* ⚠️ 箭頭要絕對定位。留在 flex 流裡的話，答案一長就被擠到下一行去，
     整排箭頭高低不一（踩過）。 */
  .qcar { position: absolute; right: 4px; top: 16px; margin: 0; }
  .assec { scroll-margin-top: calc(166px + env(safe-area-inset-top)); }
}
/* ── 報告頁 ────────────────────────────────────────── */

.empty { padding: 90px 0; text-align: center; }
.empty .divider { justify-content: center; }
.empty .divider i { width: 44px; }
.empty .divider s { max-width: 100px; }
.empty p { opacity: .65; }
.rhead { padding: 26px 0 4px; }
.rhead .rlead { font-size: 14.5px; line-height: 2; opacity: .72; margin: 0; }
.rhead .rlead b { color: var(--salmon); font-weight: 700; }
.rhead .warn {
  font-size: 12.5px; color: var(--salmon); opacity: .85; margin: 14px 0 0;
  border-left: 2px solid var(--salmon-30); padding-left: 12px;
}
/* ⚠️ **只管頂層區塊**（`.pagepad` 的直接子元素）。
   原本寫成 `#v-okr section`，連巢狀的 `<section>` 都掃到 —— 任務卡的
   `.bpctaskdeck` 也是 section，於是它頂端被塞了 46px 空白，
   「目前任務」四個字就不貼上緣（使用者 2026-09-19 指出）。
   選擇器寫寬一格，壞的地方會在你想不到的地方冒出來。 */
#v-okr > .pagepad > section,
#v-growth > .pagepad > section { padding: 22px 0 8px; }
/* ⚠️ **第一個區塊不要再加一次上方留白。** 它下面就是 `.rhead`，而 `.rhead`
   自己已經有 padding-top —— 兩層疊起來是 90px 的空白，主視覺（藍圖人物、
   成長日誌的螢幕）因此被推出第一屏（使用者 2026-09-19）。
   只動第一個，區塊之間的節奏不變。 */
/* `:first-of-type` 的意思是第一個 section；前面即使之後新增操作鈕也不影響。 */
#v-okr > .pagepad > section:first-of-type,
#v-growth > .pagepad > section:first-of-type { padding-top: 0; }
/* 藍圖再往上擠一點：人物的**頭頂要貼著「任務／總覽」切換鈕的下緣**
   （使用者 2026-09-19）。只剩線稿本身的透明留白（原圖 698px 的前 11 列）拿不掉。
   只動藍圖 —— 報告與成長的標題下面還有導言，收到 0 會太擠。 */
#v-okr > .pagepad > section:first-child { padding-bottom: 0; }
#v-okr .rhead { padding-bottom: 0; }
.snote { font-size: 12.5px; opacity: .5; margin: -8px 0 22px; }
/* 欄位歸屬。教練與學員看同一套介面，只標出誰負責填寫；
   真正的可編輯權限由 LIFF 登入後的角色與後端驗證決定。 */
.fieldtag {
  display: inline-flex; align-items: center; width: max-content;
  margin: 0 0 14px; padding: 3px 8px;
  border: 1px solid var(--beige-18); border-radius: 20px;
  color: var(--beige-70); font: 500 9px/1.35 var(--mono); letter-spacing: .08em;
}
.fieldtag.coach { color: var(--salmon); border-color: var(--salmon-30); }
.fieldtag.shared { border-style: dashed; }
.fieldtag.compact { display: block; margin: 3px 0 0; padding: 0; border: 0; border-radius: 0;
  font-size: 8px; line-height: 1.35; letter-spacing: .04em; opacity: .68; }
/* 能力圖 */
/* ⚠️ max-width 必須跟 .radar 一樣（480）—— 評語面板是 inset:0 貼著 .chart，
   兩者不同寬就對不上。
   480 不是隨便選的：膠囊往外推之後 viewBox 從 400 寬長到 456.3，
   原本 420 寬會讓五邊形縮小 12%，420 × 456.3 / 400 ≈ 480 才維持原本的圖面大小。 */
.chart { position: relative; max-width: 480px; margin: 6px auto 4px; }

/* 雷達圖：五個維度名是按鈕，點了中央才出評語 */
.radar .lbtn { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.radar .lbtn:focus { outline: none; }
.radar .lbtn:focus-visible .pill { stroke: var(--salmon); stroke-width: 2; }
/* 命中矩形**畫出來**，維度名才看得出來是可以點的。
   桌機還有 hover 和游標可以提示，手機兩個都沒有 —— 沒有這圈框就完全看不出來（這是重點）。
   淡入的延遲要跟 .lb 對齊，不然入場時框先到、字後到。 */
/* 外形照抄藍圖的能力卡（.bpcdim）—— 同一個東西（維度）在兩頁要長得像同一個東西。
   ⚠️ **兩層 path 疊出底色**：CSS 的 `navy ＋ 米白薄膜` 在 SVG 沒有等價寫法，
   一個元素只有一個 fill。底色必須不透明，半透明的話背後的雷達圈會穿過去，
   字底下多幾條斜線（藍圖那邊也踩過同一個坑，見 .bpcdim 的註解）。 */
.radar .lbtn .pillbg { fill: var(--navy); }
.radar .lbtn .pill {
  fill: var(--beige); fill-opacity: .035;
  stroke: var(--beige-18); stroke-width: 1;
  transition: stroke .2s, fill-opacity .2s;
}
/* 「需要注意」＝**膠囊內的底色**。低段整顆泛 salmon，掃一眼就看得到是哪幾條。
   ⚠️ hover／選中只能動框線，**不能再動 fill-opacity** ——
   動了就會把低段的 .13 蓋回 .08，反而在滑過時變淡（踩過）。 */
.radar .lbtn[data-band="0"] .pill {
  fill: var(--salmon); fill-opacity: .18;
  stroke: rgba(232, 168, 152, .32);   /* 框也一起轉暖，光靠底色在 480px 上分不出來（試過） */
}
.radar .lbtn[data-band="1"] .pill { fill-opacity: .045; }
.radar .lbtn[data-band="2"] .pill { fill-opacity: .022; }
/* 細棒五顆一致 —— 拿它當狀態欄試過，只改顏色太不明顯（2px 寬的東西撐不起訊息）。 */
.radar .lbtn .pillbar { fill: var(--salmon); opacity: .8; }
.radar .lbtn .pillbg, .radar .lbtn .pill, .radar .lbtn .pillbar {
  opacity: 0; animation: fade .5s ease both; animation-delay: calc(1.15s + .11s * var(--i));
}
.radar .lbtn:hover .pill { stroke: var(--beige-40); }
.radar .lbtn.sel  .pill { stroke: var(--salmon); stroke-opacity: .75; }
/* ⚠️ 兩個限制，都踩過：
   ① 狀態一律改 fill，**不能改 opacity** —— .lb / .lv 的 opacity 是靠
      `animation: fade both` 帶上來的，animation 贏過一般宣告，opacity 寫了沒作用。
   ② 點擊的動畫**不能掛在 .lb 上** —— 掛上去就得重寫 animation 簡寫，
      把入場的 fade 一起蓋掉（字會閃一下不見）。掛在外層 <g> 上，兩個互不干擾。 */
.radar .lb, .radar .lv { transition: fill .3s var(--ease); }
.radar .lbtn:hover .lb { fill: var(--white); }
.radar .lbtn:hover .lv { fill: var(--salmon); }
.radar .lbtn.sel .lb { fill: var(--salmon); }
.radar .lbtn.sel .lv { fill: var(--white); }
.radar .lbtn.sel { animation: lbpop .5s var(--ease); }
@keyframes lbpop {
  0%   { transform: scale(1) }
  40%  { transform: scale(1.11) }
  100% { transform: scale(1) }
}

/* 圖底下的一行提示。點過一次就淡掉 —— 學會了就不用再講。
   ⚠️ 用 opacity 不用 display，不然它消失時整段文字會往上跳。 */
.chint {
  margin: 2px 0 0; text-align: center; font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; color: var(--salmon); opacity: .5;
  transition: opacity .5s var(--ease); pointer-events: none;
}
.chint.used { opacity: 0; }

/* 評語面板：一開始是空的，點維度名才淡入。罩住整張雷達圖（半透明毛玻璃），
   這樣文字有地方排版，不用再截字。 */
.rcmt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 30px 34px; text-align: center;
  border-radius: 16px; border: 1px solid rgba(232, 228, 220, .13);
  /* 毛玻璃：blur ＋ 一層 navy。⚠️ backdrop-filter 一定要配一個夠不透明的底色 ——
     只有 blur 沒有底色的話，salmon 的填色會透上來把字染紅（踩過類似的）。
     Firefox 沒有 backdrop-filter，所以 .72 的底色本身就要讀得出來，不能只靠模糊。 */
  background: rgba(19, 27, 46, .72);
  backdrop-filter: blur(13px) saturate(115%);
  -webkit-backdrop-filter: blur(13px) saturate(115%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(232, 228, 220, .07);
  opacity: 0; visibility: hidden; cursor: pointer;
}
.rcmt.on { visibility: visible; animation: rcmtin .4s var(--ease) both; }
@keyframes rcmtin {
  from { opacity: 0; transform: translateY(9px) scale(.985) }
  to   { opacity: 1; transform: none }
}
.rcmt b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 700;
  color: var(--salmon); letter-spacing: .03em; line-height: 1.5; }
/* ⚠️ 不要用 text-align: justify —— 中文沒有詞間空格，兩端對齊只能拉字距，
   每一行的鬆緊都不一樣，看起來像排壞了（試過）。置中就好。 */
.rcmt p { margin: 14px auto 0; max-width: 25em; font-size: 13.5px; line-height: 2.05;
  color: var(--beige); opacity: .8; }
.rcmt .rx { position: absolute; top: 8px; right: 12px; padding: 4px 8px;
  background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1;
  color: var(--beige); opacity: .3; transition: opacity .2s var(--ease); }
.rcmt .rx:hover { opacity: .8; }
@media (max-width: 560px) {
  .rcmt { padding: 20px 18px; border-radius: 13px; }
  .rcmt b { font-size: 18px; }
  .rcmt p { margin-top: 11px; font-size: 12.5px; line-height: 1.95; }
  /* 手機把雷達圖拉到接近滿版。.wrap 左右各留 --pad(20px)，這裡各吃掉 14px，
     只留 6px 邊 —— 手機螢幕小，五顆膠囊撐開之後圖本身會被擠得很小。
     ⚠️ .chart 和 .radar 要一起放寬，兩者不同寬的話 .rcmt（inset:0）就對不上。 */
  .chartwrap .chart { max-width: none; margin-left: -14px; margin-right: -14px; }
  .chartwrap .radar { max-width: none; }
}
/* 有評語時把中間的填色壓暗一點，字才讀得出來 */
.radar .fill { transition: opacity .2s var(--ease); }
.chart:has(.rcmt.on) .radar .fill { opacity: .42; }
.radar { width: 100%; max-width: 480px; margin: 0 auto; display: block; overflow: visible; }
/* 沒有輻條 —— 圈與頂點已經定義了位置，五條放射線是 Excel 的預設值不是設計。
   線寬 .8 / 透明度 .2 是**戶外手機看得到**的下限；原本的 .6 / .1 只在室內 Retina 上成立。 */
.radar .rings { animation: fade .6s ease both; }
.radar .ring { fill: none; stroke: var(--beige); stroke-width: .8; opacity: .2; }
.radar .ring:first-child { opacity: .12; }  /* 內半徑地板：畫出來說明幾何，但不搶戲 */
.radar .ring:last-child  { opacity: .42; }  /* 最外圈＝五顆星的邊界，是唯一該看得見的框 */
.radar .fill  { fill: url(#rgFill); stroke: none; }
.radar .glow2 { fill: none; stroke: var(--salmon); stroke-width: 7; opacity: .1; }
.radar .glow1 { fill: none; stroke: var(--salmon); stroke-width: 3.5; opacity: .22; }
.radar .line  { fill: none; stroke: var(--salmon); stroke-width: 1.6; stroke-linejoin: round; }
.radar .vtx   { fill: var(--salmon); opacity: 0; animation: fade .4s ease both; animation-delay: calc(1.1s + .11s * var(--i)); }
/* 最低的那一條，頂點菱形持續脈動，把視線拉回圖上。
   ⚠️ 要**兩個動畫並列**，不能只寫脈動 —— .vtx 的 opacity 是靠 fade 帶上來的，
   單寫脈動會把 fade 蓋掉，入場時菱形直接從 opacity:0 開始（踩過同類的坑）。
   animation-delay 也要給兩個值，第二個晚一點進場，等入場動畫走完再開始。 */
.radar .vtx[data-lead] {
  transform-box: fill-box; transform-origin: center;
  animation: fade .4s ease both, vtxpulse 1.7s var(--ease) infinite;
  animation-delay: calc(1.1s + .11s * var(--i)), 1.8s;
}
/* 閃爍以**透明度**為主，縮放只是陪襯。做成「放大＋變淡」的漣漪試過，
   讀起來像呼吸不像閃爍，抓不到注意力。 */
@keyframes vtxpulse {
  0%, 100% { opacity: 1;   transform: scale(1.18) }
  50%      { opacity: .22; transform: scale(1) }
}
@media (prefers-reduced-motion: reduce) {
  .radar .vtx[data-lead] { animation: fade .4s ease both; }
}
.radar .lb {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; fill: var(--beige);
  opacity: 0; animation: fade .5s ease both; animation-delay: calc(1.15s + .11s * var(--i));
}
.radar .lv {
  font-family: var(--mono); font-size: 8.5px; font-weight: 400; letter-spacing: .11em;
  fill: var(--salmon); opacity: 0; animation: fade .5s ease both;
  animation-delay: calc(1.22s + .11s * var(--i));
}
/* 交叉規則 */
.cross { border-left: 2px solid var(--salmon); padding: 2px 0 2px 18px; margin: 22px 0; }
.cross h3 { color: var(--salmon); margin-bottom: 8px; }
.cross p { font-size: 14px; line-height: 2; opacity: .78; margin: 0; }
/* 逐條解讀 */
.dim { border-top: 1px solid var(--beige-08); padding: 30px 0 6px; }
.dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dhead h3 { font-size: 21px; }
.dscore { text-align: right; flex: none; }
.dscore b { display: block; font-family: var(--mono); font-size: 34px; font-weight: 500; color: var(--salmon); line-height: 1; }
.dscore s { text-decoration: none; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; opacity: .45; }
.dfacets { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; opacity: .38; margin: 10px 0 18px; }
.dband { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--salmon); margin: 0 0 10px; }
.dim p { font-size: 14px; line-height: 2.05; opacity: .78; }
.dbox { background: var(--navy-lift); border: 1px solid var(--beige-08); border-radius: 3px; padding: 15px 17px; margin: 18px 0; }
.dbox .ey { margin: 0 0 6px; color: var(--salmon); opacity: .75; }
.dbox p:last-child { margin: 0; font-size: 13.5px; }
.dstd { margin: 14px 0 6px; border-top: 1px solid var(--beige-08); padding-top: 12px; }
.dstd summary {
  cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  opacity: .5; padding: 4px 0; list-style: none;
}
.dstd summary::marker, .dstd summary::-webkit-details-marker { display: none; }
.dstd summary::before { content: '＋　'; }
.dstd[open] summary::before { content: '－　'; }
.dstd summary:hover { opacity: .8; }
.dstd .ey { margin: 16px 0 4px; color: var(--salmon); opacity: .7; }
.dstd p { font-size: 13px; line-height: 2; }
.cite { border-left: 1px solid var(--beige-18); padding-left: 13px; }
.cite b { display: block; font-family: var(--sans); font-size: 13.5px; font-weight: 700; opacity: 1; }
.cite em { display: block; font-family: var(--mono); font-style: normal; font-size: 10.5px; letter-spacing: .06em; opacity: .45; margin-bottom: 5px; }
/* 透鏡與訪談 */
.lens { margin: 20px 0; }
.lens .ey { margin: 0 0 6px; }
.lens .ey b { color: var(--salmon); font-size: 12px; letter-spacing: 0; }
.lens p:last-child { font-size: 13.5px; line-height: 2; opacity: .75; margin: 0; }
.notes { display: grid; gap: 1px; background: var(--beige-08); border: 1px solid var(--beige-08); }
.note { background: var(--navy); padding: 14px 16px; }
.note .ey { margin: 0 0 5px; opacity: .42; letter-spacing: .06em; text-transform: none; font-size: 11px; }
.note p:last-child { margin: 0; font-size: 13.5px; line-height: 1.9; white-space: pre-wrap; }
.next { text-align: center; padding-top: 50px !important; }
.next .divider { justify-content: center; }
.next .divider i { width: 44px; }
.next .divider s { max-width: 100px; }
.next p { opacity: .75; font-size: 14px; }
.next p b { color: var(--salmon); }
.next .btn { margin-top: 12px; }
@media (min-width: 720px) {
  .notes { grid-template-columns: 1fr 1fr; }
  .dim p, .cross p { font-size: 14.5px; }
}
/* ── 課程藍圖 ──────────────────────────────────────── */

/* ⚠️ 同上：只管頂層區塊，而且第一個不重複加上方留白。
   原本標題與分類之間空了 114px（4 ＋ 8 ＋ 44 ＋ 26），
   使用者 2026-09-19：「資源的下面有一段空白，往上拉」。 */
#v-library > .pagepad > section,
#v-tools > .pagepad > section { padding: 22px 0 8px; }
#v-library > .pagepad > section:first-of-type,
#v-tools > .pagepad > section:first-of-type { padding: 0 0 4px; }
.axes { display: grid; gap: 1px; background: var(--beige-08); border: 1px solid var(--beige-08); }
.ax { background: var(--navy); padding: 18px 18px 20px; }
.ax .ey { margin: 0 0 6px; }
.ax h3 { font-size: 17px; color: var(--salmon); margin-bottom: 8px; }
.ax p:last-child { font-size: 12.5px; line-height: 1.95; opacity: .6; margin: 0; }
.okr { flex: none; font-size: 10.5px; opacity: .35; }
.onum { flex: none; font-size: 11px; letter-spacing: .1em; color: var(--salmon); border: 1px solid var(--salmon-30); border-radius: 2px; padding: 4px 7px; }
code { font-family: var(--mono); font-size: 11.5px; background: var(--navy-lift); padding: 2px 5px; border-radius: 2px; }
/* ── 課程資源 ──────────────────────────────────────── */

.tabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 16px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: flex; align-items: baseline; gap: 7px;
  font-family: var(--sans); font-size: 13px; color: var(--beige-70);
  background: none; border: 1px solid var(--beige-08); border-radius: 30px;
  padding: 8px 15px; cursor: pointer; transition: all .18s;
}
.tab b { font-size: 10.5px; opacity: .5; }
.tab:hover { border-color: var(--beige-40); }
.tab.on { background: var(--salmon); border-color: var(--salmon); color: var(--navy); font-weight: 500; }
.tab.on b { opacity: .65; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.tile {
  display: flex; flex-direction: column; text-align: left; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--beige);
}
.thumb {
  display: flex; align-items: flex-end; justify-content: flex-end;
  aspect-ratio: 16 / 10; margin-bottom: 5px; padding: 10px;
  position: relative; overflow: hidden;
  background: var(--navy-lift);
  border: 1px solid var(--beige-08);
  background-image:
    repeating-linear-gradient(0deg, var(--beige-08) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, var(--beige-08) 0 1px, transparent 1px 20px);
  transition: border-color .2s, background-color .2s;
}
.tile:hover .thumb { border-color: var(--salmon); background-color: var(--navy-lift2); }

/* 冒險頁的層級是「共用螢幕→舊卡片」。卡片保留原功能，但不再與主操作拼成同一塊。 */
.adventure-stage { padding-bottom: 22px !important; }
.adventure-cards { padding-top: 34px !important; }
.adventure-library { padding-top: 22px; border-top: 1px solid var(--beige-08); }
/* ── 學習資源：三章弧形圓盤（使用者 2026-10-22；app.js 的 bindLearningPath）──
   框線往左右延伸、淡出，跟兩側淡出的課程同一個節奏；所以 .lpath 要 overflow-x: clip。 */
.lpath { padding: 26px 0 30px; border-top: 1px solid var(--beige-08); overflow-x: clip; }
.lp-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.lp-intro h2 { margin: 6px 0 0; font: 900 34px var(--serif); letter-spacing: .12em; }
.lp-lead { margin: 12px 0 0; font: 700 19px/1.6 var(--serif); letter-spacing: .05em; }
.lp-lead em, .lp-tag em { font-style: normal; color: var(--salmon); }
.lp-toc { display: flex; gap: 22px; }
.lp-toc button { display: grid; gap: 3px; padding: 0; border: 0; background: none; color: var(--beige-70); font: 500 14px var(--serif); letter-spacing: .06em; cursor: pointer; text-align: left; }
.lp-toc button:hover { color: var(--beige); }
.lp-toc b { font: 500 10.5px var(--mono); letter-spacing: .2em; color: var(--salmon); }
.lp-ch { position: relative; padding: 0 28px 22px; background: radial-gradient(ellipse 70% 100% at 50% 0, var(--beige-08), transparent 75%); }
.lp-ch + .lp-ch { margin-top: 40px; }
.lp-edge { position: absolute; left: -160px; right: -160px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--beige-18) 160px, var(--salmon) 160px, var(--beige-18) 380px, var(--beige-18) calc(100% - 160px), transparent); }
.lp-ch::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 55%; pointer-events: none;
  border-left: 1px solid var(--beige-18); border-right: 1px solid var(--beige-18);
  -webkit-mask: linear-gradient(180deg, #000 20%, transparent); mask: linear-gradient(180deg, #000 20%, transparent); }
.lp-k { position: absolute; top: -1px; width: 12px; height: 12px; border: 0 solid var(--salmon); border-top-width: 1.5px; }
.lp-tl { left: -1px; border-left-width: 1.5px; } .lp-tr { right: -1px; border-right-width: 1.5px; }
.lp-bot { position: absolute; left: -160px; right: -160px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--beige-18) 160px, var(--beige-18) calc(100% - 160px), transparent); }
.lp-bot::after { content: ''; position: absolute; left: 50%; top: -2px; width: 5px; height: 5px; margin-left: -2.5px; background: var(--salmon); transform: rotate(45deg); }
.lp-stamp { position: absolute; right: 28px; bottom: -6px; padding-left: 10px; background: var(--navy); font: 500 9px var(--mono); letter-spacing: .26em; color: var(--beige-40); }
.lp-cap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding-top: 28px; margin-bottom: 14px; }
.lp-num { padding-right: 22px; font: 300 52px/1 var(--mono); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--salmon); }
.lp-ttl { border-left: 1px solid var(--beige-18); padding-left: 22px; }
.lp-ey { margin: 0; font: 600 11px var(--mono); letter-spacing: .3em; color: var(--salmon); }
.lp-ttl h3 { margin: 6px 0 6px; font: 900 40px/1.15 var(--serif); letter-spacing: .12em; }
.lp-tag { margin: 0 0 4px; font: 700 17px var(--serif); letter-spacing: .04em; }
.lp-note { margin: 0; font-size: 13px; color: var(--beige-70); }
.lp-meta { align-self: end; display: grid; gap: 8px; justify-items: end; font: 500 10px var(--mono); letter-spacing: .22em; color: var(--beige-40); }
.lp-meta b { color: var(--beige); font-weight: 500; margin-left: 10px; }
.lp-count { font-size: 11px; letter-spacing: .14em; color: var(--beige-70); }
.lp-drum { position: relative; height: 250px; margin: 0 -160px; perspective: 1300px; perspective-origin: 50% 45%; overflow: hidden; touch-action: pan-y; user-select: none; }
.lp-drum::before, .lp-drum::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22%; z-index: 150; pointer-events: none; }
.lp-drum::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.lp-drum::after { right: 0; background: linear-gradient(270deg, var(--navy), transparent); }
.lp-reel { position: absolute; left: 50%; top: 14px; width: 0; height: 0; transform-style: preserve-3d; }
.lp-fr { position: absolute; left: 0; top: 0; transform-style: preserve-3d; backface-visibility: hidden; transition: transform .7s var(--ease), filter .7s, opacity .7s; cursor: pointer; }
.lp-fr.snap { transition: none; }
.lp-fr:not(.front) .lp-card { pointer-events: none; }
.lp-glass { padding: 8px; border-radius: 16px; border: 1px solid var(--beige-18);
  background: linear-gradient(160deg, var(--beige-18), var(--beige-08) 45%, var(--salmon-12));
  box-shadow: inset 0 1px 0 var(--beige-18), 0 14px 30px var(--navy-60); }
.lp-fr.front .lp-glass { border-color: var(--salmon); box-shadow: inset 0 1px 0 var(--beige-18), 0 0 30px 2px var(--salmon-30), 0 20px 40px var(--navy-60); }
.lp-card { display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--navy); color: var(--beige); text-align: left; cursor: pointer; }
.lp-img { position: relative; display: block; aspect-ratio: 16 / 10; }
.lp-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--beige-08) 0 10px, transparent 10px 20px); }
.lp-no { position: absolute; left: 10px; top: 10px; z-index: 2; font: 600 10px var(--mono); font-style: normal; letter-spacing: .12em; color: var(--salmon);
  background: var(--navy-60); border: 1px solid var(--salmon-30); padding: 3px 7px; }
.lp-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 11px; background: linear-gradient(180deg, transparent, var(--navy-60) 40%, var(--navy)); }
.lp-card .lp-txt b { display: block; font: 700 15px/1.4 var(--serif); letter-spacing: .04em; color: var(--beige); }
.lp-card .lp-txt s { display: block; margin-top: 2px; text-decoration: none; font-size: 11.5px; line-height: 1.5; color: var(--beige-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-side { position: absolute; top: 50%; z-index: 200; width: 44px; height: 44px; margin-top: -30px; border-radius: 50%;
  border: 1px solid var(--beige-40); background: var(--navy-60); color: var(--beige); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color .2s, background .2s; }
.lp-side:hover { border-color: var(--salmon); background: var(--salmon-12); }
.lp-l { left: 164px; } .lp-r { right: 164px; }
.lp-bar { display: flex; gap: 3px; margin-top: 4px; }
.lp-bar i { flex: 1; height: 2px; background: var(--beige-18); transition: background .3s; }
.lp-bar i.on { background: var(--salmon); }
@media (max-width: 760px) {
  .lp-intro { flex-direction: column; align-items: flex-start; } .lp-intro h2 { font-size: 28px; } .lp-lead { font-size: 15px; }
  .lp-ch { padding: 0 14px 20px; } .lp-ch + .lp-ch { margin-top: 30px; }
  .lp-edge, .lp-bot { left: -16px; right: -16px; } .lp-stamp { display: none; }
  .lp-cap { grid-template-columns: auto 1fr; padding-top: 22px; } .lp-num { font-size: 36px; padding-right: 12px; } .lp-ttl { padding-left: 12px; }
  .lp-ttl h3 { font-size: 28px; } .lp-tag { font-size: 14px; }
  .lp-meta { grid-column: 1 / -1; justify-items: start; margin-top: 10px; }
  .lp-drum { margin: 0 -16px; height: 200px; } .lp-side { width: 36px; height: 36px; } .lp-l { left: 18px; } .lp-r { right: 18px; }
}
@media (prefers-reduced-motion: reduce) { .lp-fr, .lp-bar i { transition: none; } }
.adventure-screen .assignment-screenin { min-height: 340px; }
.adventure-home { max-width: 520px; }
.adventure-home .assignment-home-copy { max-width: 410px; }
.adventure-picker strong { color: var(--salmon); }
.thumb i { font-style: normal; font-size: 13px; letter-spacing: .06em; color: var(--salmon); opacity: .8; }
.thumb.has-cover { padding: 0; background: var(--navy); }
.thumb.has-cover img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s var(--ease);
}
.thumb.has-cover i {
  position: absolute; right: 10px; bottom: 10px;
  padding: 3px 6px; background: rgba(19,27,46,.82);
  border: 1px solid var(--beige-18); opacity: 1;
}
.thumb.has-cover u {
  position: absolute; left: 10px; top: 10px;
  padding: 3px 6px; background: rgba(19,27,46,.82);
  border: 1px solid var(--beige-18); opacity: 1;
}
.tile:hover .thumb.has-cover img { transform: scale(1.025); }
.tile b { font-size: 13.5px; font-weight: 500; line-height: 1.6; }
.tile s { text-decoration: none; font-size: 11.5px; opacity: .5; line-height: 1.6; }
.tile em { font-style: normal; font-size: 10px; letter-spacing: .1em; opacity: .35; margin-top: 2px; color: var(--salmon); }
/* ── 課程工具 ──────────────────────────────────────── */

.tool { border-top: 1px solid var(--beige-08); }
.tool .bk { margin-bottom: 22px; }
.thead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.thead .ey { margin: 0 0 4px; }
.badge {
  flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  border: 1px solid var(--beige-18); border-radius: 2px; padding: 4px 8px; opacity: .6;
}
.badge.preview { border-color: var(--salmon-30); color: var(--salmon); opacity: .9; }
.badge.active { border-color: var(--salmon-30); color: var(--salmon); opacity: 1; }
.tlead { font-size: 15px; line-height: 1.9; color: var(--salmon); margin: 0 0 12px; }
.tbody { font-size: 14px; line-height: 2.05; opacity: .72; }
.legs { display: flex; flex-direction: column; gap: 1px; background: var(--beige-08); border: 1px solid var(--beige-08); }
.leg { display: flex; gap: 14px; background: var(--navy); padding: 15px 17px; }
.leg > span { flex: none; font-size: 11px; letter-spacing: .1em; color: var(--salmon); opacity: .7; padding-top: 4px; }
.leg h3 { font-size: 15px; margin-bottom: 5px; }
.leg .lplace { font-size: 13.5px; margin: 0 0 5px; opacity: .85; }
.leg .lwhy { font-size: 12.5px; line-height: 1.9; margin: 0; opacity: .5; }
.tplans { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.tplan { border-top: 1px solid var(--beige-18); padding-top: 14px; }
.tplan > h3 { font-family: var(--serif); font-size: 17px; margin: 0 0 11px; }
.tplan-scroll { overflow-x: auto; border: 1px solid var(--beige-12); }
.tplan table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12px; line-height: 1.6; }
.tplan th, .tplan td { padding: 9px 11px; text-align: left; vertical-align: top; border-right: 1px solid var(--beige-08); border-bottom: 1px solid var(--beige-08); }
.tplan th:last-child, .tplan td:last-child { border-right: 0; }
.tplan tbody tr:last-child td { border-bottom: 0; }
.tplan th { color: var(--salmon); font-weight: 500; letter-spacing: .04em; background: rgba(232, 228, 220, .04); }
.tplan td { min-width: 86px; opacity: .72; }
.tplan td.fieldcell { opacity: 1; background: rgba(232, 228, 220, .035); }
.tplan td.fieldcell.coach { background: rgba(232, 168, 152, .075); }
.tplan td:empty::after { content: '待填'; opacity: .28; }
.tsource { margin-top: 18px; }
.assignment { margin-top: 30px; }
.assignment-note {
  margin: 0 0 34px; padding: 16px 18px; border-left: 2px solid var(--salmon);
  background: rgba(232,168,152,.07);
}
.assignment-note p { margin: 0; font-size: 13px; line-height: 1.95; opacity: .72; }
.assignment-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.assignment-head h3 { margin: 3px 0 0; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.assignment-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; opacity: .55; }
.assignment-guide { margin: 18px 0 24px; font-size: 13.5px; line-height: 1.95; opacity: .72; }
.assignment-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin: 20px 0 22px; background: var(--beige-08); border: 1px solid var(--beige-08);
}
.assignment-steps section { display: flex; gap: 13px; padding: 15px 17px; background: var(--navy-lift); }
.assignment-steps section > span { flex: none; padding-top: 3px; color: var(--salmon); font-size: 10px; }
.assignment-steps h4 { margin: 0 0 5px; font: 500 14px/1.4 var(--serif); }
.assignment-steps p { margin: 0; color: var(--beige-70); font-size: 11.5px; line-height: 1.75; }
.assignment-fields { display: flex; flex-direction: column; gap: 16px; }
#v-library .assignment-field {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px;
  padding: 20px; border: 1px solid var(--beige-12); background: rgba(232,228,220,.025);
}
.assignment-number { grid-row: 1; color: var(--salmon); font-size: 11px; letter-spacing: .08em; padding-top: 5px; opacity: .75; }
.assignment-copy { grid-column: 2; }
.assignment-copy h3 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.assignment-sub { margin: 4px 0 10px; color: var(--salmon); font-size: 13px; }
.assignment-scope { margin: 0; font-size: 12.5px; line-height: 1.85; opacity: .58; }
.assignment-answer {
  grid-column: 1 / -1; margin: 17px -20px 0; padding: 18px 20px;
  background: var(--beige); color: var(--navy);
}
.assignment-field textarea {
  width: 100%; min-height: 178px; margin: 0; padding: 14px 15px;
  color: var(--navy); border-color: var(--navy-18); background: rgba(255,255,255,.55); line-height: 1.85;
}
.assignment-field textarea::placeholder { color: var(--navy-40); }

/* ── single-window assignment prototype: Life Blueprint ─────── */
.assignment.assignment-focus { margin-top: 0; }
.assignment-focus-shell { margin-top: 0; }
.assignment-tool-context { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--beige-08); }
/* ⚠️ 這塊面板**沿用成長日誌那套玻璃處方**（規則 60）——
   使用者 2026-09-20：「至少跟成長日誌的面板一樣」。
   原本是 `--navy-lift` 實心底 ＋ 整圈 `inset 0 0 80px` 內陰影，那兩樣都在說
   「這是一個盒子」；而成長面板早就改掉了。兩處各做一套，看起來就不是同一個產品。 */
.assignment-focus-screen {
  position: relative; isolation: isolate; min-height: 438px; overflow: hidden;
  background: linear-gradient(168deg,
    rgba(19, 27, 46, .34) 0%, rgba(19, 27, 46, .72) 62%, rgba(19, 27, 46, .86) 100%);
  border: 1px solid var(--beige-08);
  /* 光從上面來，所以只壓底部。整圈內陰影會變回盒子。 */
  box-shadow: inset 0 -26px 34px -26px rgba(0, 0, 0, .55), 0 16px 40px rgba(0, 0, 0, .28);
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  .assignment-focus-screen { -webkit-backdrop-filter: blur(1.5px) saturate(1.06); backdrop-filter: blur(1.5px) saturate(1.06); }
}
/* 邊緣的光：上緣最亮，兩側淡，底下幾乎沒有。 */
.assignment-focus-screen::before {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(rgba(232, 228, 220, .5), rgba(232, 228, 220, 0) 1.5px) top   / 100% 1.5px no-repeat,
    linear-gradient(rgba(232, 228, 220, .14), rgba(232, 228, 220, 0)) left  / 1px 100% no-repeat,
    linear-gradient(rgba(232, 228, 220, .14), rgba(232, 228, 220, 0)) right / 1px 100% no-repeat;
}
/* 斜向反光。大、淡、只有一道。 */
.assignment-focus-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(104deg,
    rgba(232, 228, 220, .055) 0%, rgba(232, 228, 220, .012) 26%, transparent 46%);
}
/* 四個角括號，跟成長面板同一個尺寸與濃度。 */
.afcorner {
  position: absolute; z-index: 6; width: 13px; height: 13px; margin: 0;
  pointer-events: none; border: 1px solid var(--salmon); opacity: .4;
}
.afc-tl { top: 14px;    left: 14px;  border-right: 0; border-bottom: 0; }
.afc-tr { top: 14px;    right: 14px; border-left: 0;  border-bottom: 0; }
.afc-bl { bottom: 14px; left: 14px;  border-right: 0; border-top: 0; }
.afc-br { bottom: 14px; right: 14px; border-left: 0;  border-top: 0; }
.assignment-moon { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: filter .35s, opacity .35s, transform .5s; }
/* ⚠️ 形狀與顏色都在 SVG 的 <defs> 漸層裡，這裡只剩地平線需要一點受光邊。
   舊版有 am-ridge／am-lander／am-person／am-tracks —— 那些描邊的插畫元素
   2026-09-20 全部移除了（規則 60：天體是光不是輪廓）。 */
.assignment-moon .star { fill: url(#amStar); stroke: none; }
.assignment-moon .starcore { fill: var(--beige); stroke: none; }
.assignment-moon .am-galaxy-core { fill: var(--salmon); opacity: .3; }
/* 站在地表時地平線接近水平；只留極淡的受光邊，不能像向量輪廓。 */
.assignment-moon .am-limb { stroke: var(--beige); stroke-width: .7; opacity: .14; }
/* 大尺度月海與環形山都是「面」，不用任何 outline。 */
.assignment-moon .am-mare { fill: var(--navy); }
.assignment-moon .am-crater-rim { fill: var(--beige); opacity: .3; }
.assignment-moon .am-crater-core { fill: var(--navy); opacity: .68; }
.assignment-moon .am-grit { fill: var(--beige); }
/* fractalNoise 已經帶 alpha，這裡再壓一次，讓它像月壤而不是電視雜訊。 */
.assignment-moon .am-dust { opacity: .42; }
.assignment-screen-head {
  position: absolute; z-index: 4; top: 25px; left: 28px; right: 28px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.assignment-screen-head .ey { margin: 0 0 5px; color: var(--salmon); opacity: .72;
  font: 500 8px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.assignment-screen-head h3 { margin: 0; font: 500 22px/1.25 var(--serif); letter-spacing: .04em; }
.assignment-screen-topic { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0;
  color: var(--beige-70); font-size: 11px; line-height: 1.5; }
.assignment-screen-topic b { color: var(--beige); font-weight: 500; }
.assignment-screen-topic > span[aria-hidden] { color: var(--salmon); opacity: .55; }
.assignment-screen-status { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 7px; max-width: 48%; }
.assignment-screen-status > span { padding: 6px 9px; color: var(--beige-70); border: 1px solid var(--beige-12);
  font: 500 8px/1 var(--mono); letter-spacing: .08em; white-space: nowrap; }
/* ⚠️ 閒置的提示**不要做成一個盒子**。成長面板的閒置態是「字疊在星空上」
   （`.gidle`），這裡原本是一個有邊框、有底色、有陰影的對話框貼在月面上 ——
   那等於在玻璃裡再貼一塊板子。整塊變成可點的區域，字直接浮在畫面上。 */
.assignment-launch {
  position: absolute; z-index: 2; inset: 112px 24px 47px; display: grid;
  align-content: center; justify-items: center; gap: 7px;
  padding: 0 24px; cursor: pointer;
  color: var(--beige); border: 0; background: none;
  transition: color .2s var(--ease);
}
.assignment-launch:hover, .assignment-launch:focus-visible { outline: none; }
.assignment-launch:hover b, .assignment-launch:focus-visible b { color: var(--salmon); }
.assignment-launch .num { font: 500 10px/1 var(--mono); letter-spacing: .3em;
  text-transform: uppercase; color: var(--beige-70); }
.assignment-launch b { font: 500 19px/1.35 var(--sans); letter-spacing: .06em;
  transition: color .2s var(--ease); }
.assignment-launch small { max-width: 430px; color: var(--beige-40); font-size: 11.5px; line-height: 1.7; text-align: center; }
.assignment-screen-nav {
  position: absolute; z-index: 4; left: 28px; right: 28px; bottom: 17px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.assignment-screen-nav button { padding: 5px 0; color: var(--beige-70); border: 0; background: none;
  font: 500 10px/1 var(--sans); cursor: pointer; }
.assignment-screen-nav button:last-child { text-align: right; }
.assignment-screen-nav button:first-child { text-align: left; }
.assignment-screen-nav button:hover, .assignment-screen-nav button:focus-visible { color: var(--salmon); outline: none; }
.assignment-screen-nav button:disabled { color: var(--beige-18); cursor: default; }
.assignment-screen-nav .num { color: var(--beige-40); font-size: 8px; letter-spacing: .14em; }
/* ⚠️ **不要用米白紙。** 原本是 `rgba(232,228,220,.96)` —— 整塊玻璃裡突然一張白紙，
   那是報告頁那封信的語彙，不是 HUD 的。成長面板的表單是**透明浮在天窗上**，
   這裡照做：沒有底、只有髮絲上下線，字用米白。 */
.assignment-compose {
  position: absolute; z-index: 3; inset: 112px 28px 48px; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px; padding: 0; color: var(--beige); background: none;
}
.assignment-compose-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.assignment-compose-head .ey { margin: 0 0 3px; color: var(--salmon); opacity: .78;
  font: 500 9px/1 var(--mono); letter-spacing: .2em; }
/* 跟成長表單的標題同一個聲音：無襯線，不要襯線體（規則 60 最後一條）。 */
.assignment-compose-head h4 { margin: 0; font: 500 16px/1.3 var(--sans); letter-spacing: .05em; }
.assignment-compose-close {
  flex: none; padding: 7px 13px; border-radius: 30px; cursor: pointer;
  color: var(--beige-70); border: 1px solid var(--beige-18); background: none;
  font: 500 11px/1 var(--sans);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.assignment-compose-close:hover, .assignment-compose-close:focus-visible {
  color: var(--beige); border-color: var(--salmon); outline: none; }
.assignment-writing-lead { margin: 0 !important; color: var(--beige-70) !important;
  font: 400 11px/1.65 var(--sans) !important; letter-spacing: 0 !important; }
.assignment-compose textarea {
  width: 100%; min-height: 0; height: 100%; margin: 0; padding: 13px 0; resize: none; overflow-y: auto;
  color: var(--beige); border: 0;
  border-top: 1px solid var(--beige-18); border-bottom: 1px solid var(--beige-18);
  border-radius: 0; background: transparent; font: 400 13.5px/1.9 var(--sans);
  transition: border-color .18s var(--ease);
}
.assignment-compose textarea:focus { outline: none; border-color: var(--salmon); }
.assignment-compose textarea::placeholder { color: var(--beige-40); opacity: .55; }
.assignment-compose > p { margin: 0; color: var(--beige-40); font: 500 9px/1 var(--mono); letter-spacing: .1em; }
.assignment-compose.field-locked { color: var(--beige-40); }
/* ⚠️ 引導是**說明不是面板**。原本是「一整塊灰板 ＋ 裡面再一個有底色的框」——
   兩層盒子把它變得比主視覺還重。現在只留一條上緣線，其餘是純文字。 */
.assignment-focus-guide {
  margin-top: 20px; padding: 16px 2px 0; border: 0; border-top: 1px solid var(--beige-08); background: none;
}
.assignment-focus-guide > header { display: flex; align-items: baseline; gap: 11px; padding: 0; border: 0; }
.assignment-focus-guide > header .ey { margin: 0; color: var(--salmon); opacity: .7;
  font: 500 8.5px/1 var(--mono); letter-spacing: .2em; }
.assignment-focus-guide > header h3 { margin: 0; font: 500 13px/1.4 var(--sans); letter-spacing: .06em; }
.assignment-focus-note, .assignment-focus-prompt {
  margin: 11px 0 0; color: var(--beige-40); font-size: 11.5px; line-height: 1.9; }
/* 指示句比背景說明重要一階 —— 靠顏色分，不要再套一個框。 */
.assignment-focus-prompt { padding: 0; border: 0; background: none; color: var(--beige-70); }
.assignment-focus-guide-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 18px; background: var(--beige-12); }
.assignment-focus-guide-list section { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 15px; background: var(--navy-lift); }
.assignment-focus-guide-list .num { padding-top: 3px; color: var(--salmon); font-size: 8px; }
.assignment-focus-guide-list h4, .assignment-focus-active-guide h4 { margin: 0; font: 500 16px/1.4 var(--serif); }
.assignment-focus-guide-list p { margin: 3px 0 8px; color: var(--salmon); font-size: 10.5px; line-height: 1.55; }
.assignment-focus-guide-list small { display: block; color: var(--beige-70); font-size: 10.5px; line-height: 1.75; }
.assignment-focus-active-guide { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--beige-12); }
.assignment-focus-active-guide > .ey { margin: 0 0 4px; color: var(--salmon); font-size: 8px; }
.assignment-focus-active-guide > p:last-of-type { margin: 8px 0 0; color: var(--beige-70); font-size: 12px; line-height: 1.9; }
.assignment-focus-active-guide .assignment-focus-sub { margin: 4px 0 0; color: var(--salmon); font-size: 11px; }
.assignment-focus-example { margin-top: 13px; font-size: 11px; }
.assignment-focus-example summary { width: max-content; max-width: 100%; color: var(--salmon); cursor: pointer; }
.assignment-focus-example p { margin: 10px 0 0; padding: 13px 15px; border-left: 1px solid var(--salmon-30); color: var(--beige-70); line-height: 1.9; }

/* 2026-09-22：作業視窗與成長視窗共用同一個規格。
   上方是狀態列、中間是固定高度的內容視窗、下方是 HUD。不再在螢幕外疊另一組說明。 */
.assignment-focus-screen { min-height: 0; }
.assignment-screenbar {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 9px;
  padding: 13px 18px 6px; color: var(--beige-40);
  font: 500 9px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
}
.assignment-screenbar b { color: var(--beige-70); }
.assignment-screenbar s { text-decoration: none; }
.assignment-screenbar em { margin-left: auto; font-style: normal; }
.assignment-screenin {
  position: relative; z-index: 2; display: grid; place-items: center;
  min-height: 378px; padding: 18px 22px; overflow: hidden;
}
.assignment-screenin .afcorner { z-index: 6; margin: 0; }
.assignment-screenin .afc-tl { top: 0; left: 0; }
.assignment-screenin .afc-tr { top: 0; right: 0; }
.assignment-screenin .afc-bl { bottom: 0; left: 0; }
.assignment-screenin .afc-br { bottom: 0; right: 0; }
.assignment-screenin .assignment-moon { inset: 0; width: 100%; height: 100%; }

/* 三層書寫流程：舒服的首頁 → 專心選題 → 單題說明與書寫。
   首頁不放清單與長說明，月面必須有足夠留白。 */
.assignment-home, .assignment-chooser {
  position: relative; z-index: 3; width: min(100%, 650px); height: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
}
.assignment-home { justify-content: center; max-width: 590px; padding: 24px 14px 30px; }
.assignment-home-copy { position: relative; z-index: 2; max-width: 510px; padding-left: 25px; }
.assignment-home-copy::before {
  content: ''; position: absolute; top: 2px; bottom: 4px; left: 0; width: 1px;
  background: linear-gradient(to bottom, var(--salmon), var(--salmon-30) 45%, transparent);
}
.assignment-chooser { justify-content: flex-start; padding: 22px 10px 18px; overflow-y: auto; }
.assignment-home > .ey, .assignment-home-copy > .ey, .assignment-chooser > .ey, .assignment-brief > .ey {
  margin: 0 0 6px; color: var(--salmon); opacity: .8;
  font: 500 8.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
}
.assignment-home h3, .assignment-chooser h3 {
  margin: 0; color: var(--beige); font: 700 23px/1.3 var(--serif); letter-spacing: .055em;
}
.assignment-home h3 { max-width: 480px; font-size: clamp(28px, 4vw, 39px); line-height: 1.18; letter-spacing: .075em; }
.assignment-home > p:not(.ey) { max-width: 460px; margin: 10px 0 0; color: var(--beige-70); font-size: 12px; line-height: 1.85; }
.assignment-home-copy > p:not(.ey) { max-width: 430px; margin: 13px 0 0; color: var(--beige-70); font-size: 14px; line-height: 1.8; }
.assignment-home-beacon {
  position: absolute; right: 8%; bottom: 15%; z-index: 2; width: 9px; height: 9px;
  border: 1px solid var(--salmon); transform: rotate(45deg); opacity: .72;
}
.assignment-home-beacon::before {
  content: ''; position: absolute; left: 3px; bottom: 8px; width: 1px; height: 66px;
  background: linear-gradient(to top, var(--salmon), transparent); transform: rotate(-45deg); transform-origin: bottom;
}
.assignment-home-beacon::after {
  content: ''; position: absolute; inset: 2px; background: var(--salmon); opacity: .55;
}
.assignment-choice-panel {
  position: relative; width: 100%; max-width: 620px; min-height: 320px; padding: 20px;
  border: 1px solid var(--beige-12);
  background: linear-gradient(145deg, rgba(232, 228, 220, .07), rgba(19, 27, 46, .62) 30%, rgba(19, 27, 46, .72));
  box-shadow: inset 0 1px 0 rgba(232, 228, 220, .08), 0 18px 42px rgba(0, 0, 0, .16);
}
.assignment-choice-panel::before {
  content: ''; position: absolute; top: -1px; left: 20px; width: 56px; height: 1px; background: var(--salmon); opacity: .7;
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .assignment-choice-panel { -webkit-backdrop-filter: blur(7px) saturate(1.04); backdrop-filter: blur(7px) saturate(1.04); }
}
.assignment-chooser-lead { margin: 9px 0 0; color: var(--beige-70); font-size: 13px; line-height: 1.7; }
.assignment-brief { width: 100%; max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }
.assignment-group-brief { max-width: 460px; }
.assignment-brief-lead { margin: 9px 0 0; color: var(--salmon); font-size: 14px; line-height: 1.75; }
.assignment-brief-body { display: grid; gap: 9px; margin-top: 14px; }
.assignment-brief-body p { margin: 0; color: var(--beige); font-size: 13.5px; line-height: 1.78; opacity: .86; }
.assignment-brief-body p:last-child { padding-left: 11px; border-left: 1px solid var(--salmon-30); color: var(--beige); }
.assignment-brief-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 12px; background: var(--beige-08); }
.assignment-brief-steps section { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; padding: 12px; background: rgba(19, 27, 46, .54); }
.assignment-brief-steps .num { color: var(--salmon); font-size: 9px; padding-top: 4px; }
.assignment-brief-steps b { display: block; font: 500 13px/1.4 var(--sans); }
.assignment-brief-steps p { margin: 4px 0 0; color: var(--beige-70); font-size: 12px; line-height: 1.65; }
.assignment-chooser-heading { width: 100%; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--beige-12); }
.assignment-chooser-heading .ey { margin: 0 0 5px; color: var(--salmon); font: 500 9px/1 var(--mono); letter-spacing: .17em; }
.assignment-chooser-heading h4 { margin: 0; font: 500 17px/1.4 var(--sans); letter-spacing: .04em; }
.assignment-chooser-heading p { margin: 5px 0 0; color: var(--beige-70); font-size: 12.5px; line-height: 1.65; }
.assignment-overview-topics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  width: 100%; gap: 1px; margin-top: 14px; padding: 1px; background: var(--beige-08);
}
.assignment-overview-topics button {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 9px; min-height: 60px;
  padding: 11px 12px; color: var(--beige); border: 0; background: rgba(19, 27, 46, .58);
  text-align: left; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease);
}
.assignment-overview-topics button:hover, .assignment-overview-topics button:focus-visible {
  color: var(--salmon); background: rgba(232, 228, 220, .035); outline: none;
}
.assignment-overview-topics .num { grid-row: 1 / 3; padding-top: 3px; color: var(--salmon); font-size: 9px; opacity: .78; }
.assignment-overview-topics b { min-width: 0; font: 500 14px/1.4 var(--sans); }
.assignment-overview-topics small { color: var(--beige-70); font: 500 10px/1.3 var(--mono); letter-spacing: .04em; }
.assignment-home-start {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 42px;
  align-items: center; width: min(100%, 310px); min-height: 54px; margin-top: 24px; padding: 0;
  color: var(--beige); border: 0; border-top: 1px solid var(--beige-18); border-bottom: 1px solid var(--beige-18);
  background: rgba(19, 27, 46, .36); cursor: pointer; text-align: left;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.assignment-home-start::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 38px; height: 1px; background: var(--salmon);
  transition: width .28s var(--ease);
}
.assignment-home-start small { padding-left: 12px; color: var(--salmon); font: 500 8px/1 var(--mono); letter-spacing: .14em; }
.assignment-home-start span { padding: 0 12px; font: 500 13px/1.4 var(--sans); letter-spacing: .05em; }
.assignment-home-start b {
  display: grid; place-items: center; align-self: stretch; color: var(--salmon);
  border-left: 1px solid var(--beige-12); font: 400 16px/1 var(--mono);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.assignment-home-start:hover, .assignment-home-start:focus-visible {
  border-color: var(--salmon-30); background: rgba(232, 228, 220, .045); outline: none;
}
.assignment-home-start:hover::before, .assignment-home-start:focus-visible::before { width: 100%; }
.assignment-home-start:hover b, .assignment-home-start:focus-visible b { color: var(--navy); background: var(--salmon); }
.assignment-home-footer {
  position: relative; z-index: 2; display: grid; gap: 5px; min-height: 62px; padding: 13px 18px;
  border-top: 1px solid var(--beige-08); color: var(--beige-40);
}
.assignment-home-footer span { font: 500 7.5px/1 var(--mono); letter-spacing: .16em; }
.assignment-home-footer b { color: var(--beige); font: 500 13px/1.4 var(--sans); letter-spacing: .03em; }
.assignment-detail-back {
  margin: 0 0 17px; padding: 0; color: var(--beige-40); border: 0; background: none;
  font: 500 11.5px/1 var(--sans); letter-spacing: .04em; cursor: pointer;
}
.assignment-detail-back:hover, .assignment-detail-back:focus-visible { color: var(--salmon); outline: none; }

.assignment-idle {
  position: relative; z-index: 3; width: min(100%, 620px); height: 100%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 26px 14px 20px; overflow-y: auto;
}
.assignment-idle > .ey, .assignment-compose-head .ey {
  margin: 0 0 6px; color: var(--salmon); opacity: .8;
  font: 500 8.5px/1 var(--mono); letter-spacing: .2em;
}
.assignment-idle h3, .assignment-compose-head h3 {
  margin: 0; color: var(--beige); font: 500 22px/1.3 var(--sans); letter-spacing: .04em;
}
.assignment-idle-sub { margin: 6px 0 0; color: var(--salmon); font-size: 11px; line-height: 1.6; }
.assignment-idle-guide {
  max-width: 560px; margin: 12px 0 0; color: var(--beige-70); font-size: 12px; line-height: 1.85;
}
.assignment-screen-help { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; }
.assignment-screen-details { min-width: 0; color: var(--beige-70); font-size: 10.5px; }
.assignment-screen-details summary {
  width: max-content; max-width: 100%; color: var(--salmon); cursor: pointer;
  font: 500 10.5px/1.5 var(--sans);
}
.assignment-screen-details > div {
  max-width: 560px; max-height: 82px; margin-top: 8px; padding: 1px 12px;
  overflow-y: auto; border-left: 1px solid var(--salmon-30);
}
.assignment-screen-details p { margin: 0 0 6px; color: var(--beige-70); font-size: 10.5px; line-height: 1.75; }
.assignment-screen-details p:last-child { margin-bottom: 0; }
.assignment-launch {
  position: relative; inset: auto; display: inline-flex; align-items: center; gap: 12px;
  margin-top: 17px; padding: 8px 0; color: var(--beige); border: 0; background: none;
  font: 500 12px/1 var(--sans); letter-spacing: .05em;
}
.assignment-launch span { border-bottom: 1px solid var(--salmon); padding-bottom: 5px; }
.assignment-launch b { color: var(--salmon); font: 400 15px/1 var(--mono); }
.assignment-launch:hover span, .assignment-launch:focus-visible span { color: var(--salmon); }

/* 作業主題放進螢幕底部，位置與成長日誌的 HUD 分類鍵相同。
   不用原生 select：它在 iOS／LIFF 會跳出無法品牌化的白底系統選單。 */
.assignment-pickers {
  position: relative; z-index: 8; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0; margin: 0; padding: 0; background: none; border-top: 1px solid var(--beige-08);
}
.assignment-focus-footer {
  position: relative; z-index: 8; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch; border-top: 1px solid var(--beige-08);
}
.assignment-focus-footer .assignment-pickers { border-top: 0; }
.assignment-screen-reports { display: flex; align-items: stretch; border-left: 1px solid var(--beige-08); }
.assignment-screen-reports button {
  width: 108px; padding: 6px 10px; color: var(--beige-70); background: transparent;
  border: 0; border-left: 1px solid var(--beige-08); font: 500 9px/1.3 var(--mono);
  letter-spacing: .05em; cursor: pointer;
}
.assignment-screen-reports button:hover { color: var(--salmon); border-color: var(--salmon-30); }
.assignment-theme-control { position: relative; min-width: 0; }
.assignment-theme-toggle {
  position: relative; display: grid; width: 100%; min-height: 62px;
  grid-template-columns: 25px minmax(0, 1fr) 12px; grid-template-rows: auto auto;
  gap: 4px 10px; align-items: center; padding: 11px 14px 12px;
  color: var(--beige); border: 0; background: transparent; text-align: left; cursor: pointer;
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.assignment-theme-index {
  grid-column: 1; grid-row: 1 / 3; color: var(--salmon); opacity: .68;
  font: 500 8px/1 var(--mono); letter-spacing: .08em;
}
.assignment-theme-label {
  grid-column: 2; grid-row: 1; color: var(--beige-40);
  font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.assignment-theme-toggle strong {
  grid-column: 2 / 4; grid-row: 2; min-width: 0; display: flex; align-items: center; gap: 12px;
  color: var(--beige); font: 500 14px/1.45 var(--sans); letter-spacing: .025em;
}
.assignment-theme-toggle strong > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 箭頭放在一個小圓框裡，緊貼名字 —— 一眼看得出「這裡可以展開」。 */
.assignment-theme-toggle strong > i {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--beige-18); transition: border-color .18s var(--ease), background .18s var(--ease);
}
.assignment-theme-toggle strong > i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -4px 0 0 -3px;
  border-right: 1px solid var(--beige-70); border-bottom: 1px solid var(--beige-70);
  transform: rotate(45deg); transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.assignment-theme-toggle:hover strong > i { border-color: var(--salmon); background: rgba(232, 168, 152, .08); }
.assignment-theme-toggle:hover strong > i::after { border-color: var(--salmon); }
.assignment-theme-toggle:hover, .assignment-theme-toggle:focus-visible {
  background: rgba(232, 228, 220, .028); box-shadow: inset 0 -1.5px 0 var(--salmon); outline: none;
}
.assignment-theme-control.is-open .assignment-theme-toggle { background: rgba(232, 168, 152, .055); }
.assignment-theme-control.is-open .assignment-theme-toggle strong > i { border-color: var(--salmon); }
.assignment-theme-control.is-open .assignment-theme-toggle strong > i::after {
  margin-top: -1px; border-color: var(--salmon); transform: rotate(225deg);
}
.assignment-theme-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); z-index: 10;
  max-height: min(280px, 62vh); padding: 10px; overflow-y: auto;
  border-top: 1px solid var(--salmon-30); border-bottom: 1px solid var(--beige-12);
  background: rgba(19, 27, 46, .96);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, .32), inset 0 1px 0 var(--beige-08);
}
.assignment-theme-menu[hidden] { display: none; }
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .assignment-theme-menu { -webkit-backdrop-filter: blur(14px) saturate(1.08); backdrop-filter: blur(14px) saturate(1.08); }
}
.assignment-theme-menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 5px 7px 10px; }
.assignment-theme-menu-head span { color: var(--salmon); font: 500 8px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.assignment-theme-menu-head b { color: var(--beige-40); font: 400 10.5px/1.4 var(--sans); }
.assignment-theme-menu > button {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; width: 100%; min-height: 58px; padding: 9px 8px;
  color: var(--beige); border: 0; border-top: 1px solid var(--beige-08);
  background: transparent; text-align: left; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.assignment-theme-menu > button::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px;
  background: transparent; transition: background .16s var(--ease);
}
.assignment-theme-menu > button:hover, .assignment-theme-menu > button:focus-visible {
  color: var(--salmon); background: rgba(232, 228, 220, .035); outline: none;
}
.assignment-theme-menu > button.is-current { background: rgba(232, 168, 152, .055); }
.assignment-theme-menu > button.is-current::before { background: var(--salmon); }
.assignment-theme-menu .num { color: var(--salmon); font: 500 9px/1 var(--mono); opacity: .74; }
.assignment-theme-menu > button > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.assignment-theme-menu > button b { font: 500 14px/1.35 var(--sans); }
.assignment-theme-menu > button small { color: var(--beige-40); font: 500 8px/1.25 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.assignment-theme-menu > button em { color: var(--beige-40); font: 400 10px/1 var(--sans); font-style: normal; }
.assignment-theme-menu > button.is-current em { color: var(--salmon); }

.assignment-compose {
  position: relative; z-index: 3; inset: auto; width: min(100%, 630px); height: 100%;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 12px; padding: 18px 20px 20px; overflow-y: auto; color: var(--beige);
  border: 1px solid var(--beige-12);
  background: linear-gradient(145deg, rgba(232, 228, 220, .06), rgba(19, 27, 46, .66) 28%, rgba(19, 27, 46, .76));
  box-shadow: inset 0 1px 0 rgba(232, 228, 220, .07), 0 16px 38px rgba(0, 0, 0, .18);
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .assignment-compose { -webkit-backdrop-filter: blur(7px) saturate(1.04); backdrop-filter: blur(7px) saturate(1.04); }
}
.assignment-compose-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.assignment-compose-close { margin-top: 1px; }
.assignment-trait-picker {
  display: grid; grid-template-columns: minmax(170px, .8fr) minmax(280px, 1.55fr); gap: 18px;
  padding: 14px 15px; border: 1px solid var(--beige-12);
  background: linear-gradient(135deg, rgba(232, 168, 152, .065), rgba(232, 228, 220, .025));
  box-shadow: inset 2px 0 0 var(--salmon-30);
}
.assignment-trait-picker .ey { margin: 0 0 6px; color: var(--salmon); font: 500 9px/1 var(--mono); letter-spacing: .15em; }
.assignment-trait-picker h4 { margin: 0; color: var(--beige); font: 500 17px/1.4 var(--sans); letter-spacing: .04em; }
.assignment-trait-picker p:not(.ey) { margin: 7px 0 0; color: var(--beige-70); font-size: 12px; line-height: 1.65; }
.assignment-trait-options { display: flex; align-content: flex-start; flex-wrap: wrap; gap: 6px; }
.assignment-trait-options button {
  min-width: 52px; min-height: 31px; padding: 5px 10px; color: var(--beige-70);
  border: 1px solid var(--beige-12); background: rgba(19, 27, 46, .48);
  font: 500 12px/1 var(--sans); letter-spacing: .05em; cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.assignment-trait-options button:hover, .assignment-trait-options button:focus-visible {
  color: var(--salmon); border-color: var(--salmon-30); outline: none;
}
.assignment-trait-options button.is-selected {
  color: var(--navy); border-color: var(--salmon); background: var(--salmon);
}
.assignment-trait-options button:disabled { opacity: .25; cursor: not-allowed; }
.assignment-writing-lead {
  margin: 0 !important; color: var(--beige-70) !important;
  font: 400 11px/1.65 var(--sans) !important;
}
.assignment-write-fold { padding-top: 0; border-top: 1px solid var(--beige-12); }
.assignment-write-fold summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px; padding: 9px 2px; color: var(--salmon); cursor: pointer; list-style: none;
  transition: padding-left .18s var(--ease), background .18s var(--ease);
}
.assignment-write-fold summary::-webkit-details-marker { display: none; }
.assignment-write-fold summary > span { display: grid; gap: 4px; }
.assignment-write-fold summary b { font: 500 13px/1.35 var(--sans); letter-spacing: .05em; }
.assignment-write-fold summary small { color: var(--beige-70); font: 400 11.5px/1.45 var(--sans); letter-spacing: 0; }
.assignment-write-fold summary:hover, .assignment-write-fold summary:focus-visible {
  padding-left: 9px; background: rgba(232, 228, 220, .035); outline: none;
}
.assignment-write-fold summary i {
  flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0;
  border-right: 1px solid var(--salmon); border-bottom: 1px solid var(--salmon);
  transform: rotate(45deg); transition: transform .18s var(--ease);
}
.assignment-write-fold[open] summary i { margin-top: 3px; transform: rotate(225deg); }
.assignment-write-fold-body { display: grid; gap: 7px; padding: 2px 0 13px; }
.assignment-write-fold-body strong { color: var(--beige); font: 500 14px/1.7 var(--sans); }
.assignment-write-fold-body > p { margin: 0; color: var(--beige); font-size: 13.5px; line-height: 1.78; opacity: .82; }
.assignment-write-definitions { display: grid; gap: 0; margin: 5px 0 0; padding: 0; border-top: 1px solid var(--beige-12); }
.assignment-write-definitions > div {
  display: grid; grid-template-columns: minmax(92px, 124px) minmax(0, 1fr); gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--beige-08);
}
.assignment-write-definitions dt { color: var(--salmon); font: 500 11px/1.6 var(--sans); }
.assignment-write-definitions dd { margin: 0; color: var(--beige); font-size: 12.5px; line-height: 1.72; opacity: .78; }
.assignment-write-section { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--beige-12); }
.assignment-write-section > .ey { margin: 0; color: var(--salmon); font: 500 9px/1 var(--mono); letter-spacing: .15em; }
.assignment-write-section strong { color: var(--beige); font: 500 14px/1.7 var(--sans); }
.assignment-write-section > p:not(.ey) { margin: 0; color: var(--beige); font-size: 13.5px; line-height: 1.78; opacity: .82; }
.assignment-write-example { padding: 11px 13px; color: var(--beige); border-left: 1px solid var(--salmon-30); font-size: 13px; line-height: 1.75; opacity: .82; }
.assignment-write-format { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 1px 0 0; padding: 0; list-style: none; counter-reset: assignment-format; }
.assignment-write-format li { counter-increment: assignment-format; color: var(--beige); font-size: 12.5px; line-height: 1.6; opacity: .86; }
.assignment-write-format li::before { content: counter(assignment-format, decimal-leading-zero) '  '; color: var(--salmon); font: 500 9px/1 var(--mono); }
.assignment-compose textarea {
  flex: 0 0 auto; min-height: 190px; padding: 14px 0; font-size: 15px; line-height: 1.85;
}
.assignment-compose textarea::placeholder { color: var(--beige-70); opacity: .72; }
.assignment-compose .assignment-autosave {
  margin: 0; color: var(--beige-70); font: 500 10px/1.5 var(--mono); letter-spacing: .06em;
}
.assignment-list-compose { width: min(100%, 760px); }
.assignment-list-reference ol {
  display: grid; gap: 8px; max-height: 190px; margin: 0; padding: 3px 8px 5px 30px;
  overflow-y: auto; color: var(--beige-70); font-size: 12px; line-height: 1.72;
}
.assignment-list-reference li::marker { color: var(--salmon); font: 500 9px/1 var(--mono); }
.assignment-list-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
}
.assignment-list-entry {
  display: grid; gap: 7px; min-width: 0; padding: 11px 12px 12px;
  border: 1px solid var(--beige-12); background: rgba(19, 27, 46, .42);
}
.assignment-list-entry > span { display: flex; align-items: center; gap: 9px; }
.assignment-list-entry > span .num { color: var(--salmon); font-size: 8px; letter-spacing: .08em; }
.assignment-list-entry > span em { color: var(--beige-70); font: 500 11px/1.35 var(--sans); font-style: normal; }
.assignment-list-compose .assignment-list-entry textarea {
  min-height: 84px; padding: 9px 0; font-size: 13.5px; line-height: 1.7;
}
.assignment-report-actions { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.assignment-report-actions .btn { flex: none; padding: 7px 10px; font-size: 10px; }
.assignment-example { grid-column: 1 / -1; margin-top: 12px; font-size: 12px; }
.assignment-example summary { width: max-content; max-width: 100%; color: var(--salmon); cursor: pointer; opacity: .78; }
.assignment-example p { margin: 11px 0 0; padding: 13px 15px; border-left: 1px solid var(--beige-18); line-height: 1.9; opacity: .58; }
.assignment-story-overview { margin-top: 8px; }
.assignment-overview-intro { margin: 0 0 12px; color: var(--beige-70); font-size: 12px; line-height: 1.75; }
.assignment-story-matrix {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  padding: 1px; background: var(--beige-12);
}
.assignment-story-column { min-width: 0; background: var(--navy-lift); }
.assignment-story-column > header { min-height: 106px; padding: 16px 15px 14px; }
.assignment-story-column > header > .num { display: block; margin-bottom: 9px; color: var(--salmon); font-size: 9px; opacity: .72; }
.assignment-story-column > header .ey {
  margin: 0 0 3px; overflow: hidden; color: var(--salmon); font-size: 8px;
  text-overflow: ellipsis; white-space: nowrap; opacity: .62;
}
.assignment-story-column > header h3 { margin: 0; font: 700 19px/1.35 var(--serif); }
.assignment-story-topics { display: grid; }
.assignment-story-cell {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 7px;
  align-content: center; width: 100%; min-height: 78px; padding: 13px 14px; text-align: left;
  color: var(--beige); background: transparent; border: 0; border-top: 1px solid var(--beige-12);
  box-shadow: inset 2px 0 0 transparent; cursor: pointer;
  transition: color .18s, background .18s, box-shadow .18s;
}
.assignment-story-cell:hover, .assignment-story-cell:focus-visible { background: var(--beige-08); outline: none; }
.assignment-story-cell > .num { grid-row: 1 / span 2; padding-top: 4px; color: var(--salmon); font-size: 8px; opacity: .62; }
.assignment-story-cell strong { min-width: 0; font: 700 17px/1.35 var(--serif); }
.assignment-story-state {
  min-height: 12px; color: var(--salmon); font: 500 8px/1.3 var(--mono); letter-spacing: .08em; opacity: .7;
}
.assignment-story-cell.is-started { box-shadow: inset 2px 0 0 var(--salmon-30); }
.assignment-story-cell.is-complete { background: rgba(232,168,152,.07); box-shadow: inset 2px 0 0 var(--salmon); }
.assignment-overview-foot { margin: 11px 0 0; color: var(--beige-70); font-size: 10.5px; line-height: 1.7; opacity: .66; }
.assignment-story-editor { margin-top: 20px; }
.assignment-story-back { margin-bottom: 12px; }
.assignment-story {
  position: relative; min-width: 0; padding: 20px; background: var(--navy-lift);
  border: 1px solid var(--beige-12); box-shadow: inset 2px 0 0 transparent;
  transition: border-color .2s, box-shadow .2s;
}
.assignment-story.is-complete { border-color: var(--salmon-30); box-shadow: inset 2px 0 0 var(--salmon); }
.assignment-story > header {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center;
  margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--beige-12);
}
.assignment-story > header > .num { color: var(--salmon); font-size: 9px; opacity: .72; }
.assignment-story > header p { margin: 0 0 2px; color: var(--salmon); font: 500 8px/1.3 var(--mono); letter-spacing: .1em; }
.assignment-story > header h4 { margin: 0; font: 700 18px/1.3 var(--serif); }
.assignment-story-progress {
  min-width: 40px; padding: 4px 6px; text-align: center; color: var(--beige-70);
  border: 1px solid var(--beige-18); font: 500 9px/1 var(--mono); letter-spacing: .05em;
}
.assignment-story.is-complete .assignment-story-progress {
  color: var(--navy); background: var(--salmon); border-color: var(--salmon);
}
.assignment-story-inputs { display: grid; gap: 15px; }
.assignment-story-input { display: grid; gap: 8px; min-width: 0; }
.assignment-story-input > span { display: grid; gap: 4px; }
.assignment-story-input b { font: 600 12.5px/1.4 var(--sans); }
.assignment-story-input small { color: var(--beige-70); font-size: 10.5px; line-height: 1.7; }
.assignment-story-input textarea {
  width: 100%; min-height: 82px; margin: 0; padding: 11px 12px; resize: none;
  color: var(--navy); background: var(--beige); border: 1px solid transparent;
  font: 400 13px/1.75 var(--sans); overflow: hidden;
}
.assignment-story-input textarea[rows="7"] { min-height: 154px; }
.assignment-story-input textarea:focus { outline: none; border-color: var(--salmon-ink); }
.assignment-story-input textarea::placeholder { color: var(--navy-40); }
.assignment-story-input.field-locked textarea { color: var(--navy-60); background: rgba(232,228,220,.84); }
.assignment-story-example { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--beige-12); }
.assignment-story-example dl { display: grid; gap: 0; margin: 11px 0 0; border-left: 1px solid var(--salmon-30); }
.assignment-story-example dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 12px; }
.assignment-story-example dt { color: var(--salmon); font-size: 10px; line-height: 1.65; }
.assignment-story-example dd { margin: 0; color: var(--beige-70); font-size: 11px; line-height: 1.75; }
.assignment-editor-hint { margin: 11px 0 0; color: var(--beige-70); font-size: 10.5px; line-height: 1.7; opacity: .66; }
.belief-workbook { margin-top: 8px; scroll-margin-top: 76px; }
.belief-tabs {
  display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch;
  margin-bottom: 20px;
}
.belief-tabs > i { position: relative; }
.belief-tabs > i::before {
  content: ''; position: absolute; top: 50%; left: 6px; right: 6px; height: 1px; background: var(--beige-18);
}
.belief-tabs > i::after {
  content: ''; position: absolute; top: calc(50% - 3px); right: 5px; width: 6px; height: 6px;
  border-top: 1px solid var(--beige-40); border-right: 1px solid var(--beige-40); transform: rotate(45deg);
}
.belief-tabs button {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 3px 8px; align-content: center;
  min-height: 72px; padding: 12px 14px; text-align: left; color: var(--beige);
  background: var(--navy-lift); border: 1px solid var(--beige-12); cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.belief-tabs button:hover, .belief-tabs button:focus-visible { border-color: var(--beige-40); outline: none; }
.belief-tabs button.is-on { color: var(--navy); background: var(--salmon); border-color: var(--salmon); }
.belief-tabs button > .num { grid-row: 1 / span 2; align-self: center; font-size: 10px; opacity: .72; }
.belief-tabs button b { font: 700 16px/1.3 var(--serif); }
.belief-tabs button small { font: 400 9px/1.4 var(--mono); letter-spacing: .05em; opacity: .62; }
.belief-stage[hidden] { display: none !important; }
.belief-stage {
  padding: 22px; border: 1px solid var(--beige-12); background: rgba(232,228,220,.02);
}
.belief-stage-head { max-width: 680px; margin-bottom: 22px; }
.belief-stage-head .ey { margin: 0 0 4px; color: var(--salmon); opacity: .72; }
.belief-stage-head h3 { margin: 0 0 9px; font: 700 23px/1.35 var(--serif); }
.belief-stage-head > p:last-child { margin: 0; color: var(--beige-70); font-size: 12.5px; line-height: 1.85; }
.belief-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.belief-category { min-width: 0; background: var(--navy-lift); border: 1px solid var(--beige-12); }
.belief-category > header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  min-height: auto !important; padding: 15px 16px !important; border-bottom: 1px solid var(--beige-12);
}
.belief-category > header h4 { margin: 0; font: 700 16px/1.4 var(--serif); }
.belief-category > header span { flex: none; font: 400 8px/1 var(--mono); letter-spacing: .08em; opacity: .45; }
.belief-choices { display: grid; }
.belief-choice {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 13px 15px; border-bottom: 1px solid var(--beige-08); cursor: pointer;
  transition: background .16s, box-shadow .16s;
}
.belief-choice:last-child { border-bottom: 0; }
.belief-choice:hover { background: var(--beige-08); }
.belief-choice.is-checked { background: rgba(232,168,152,.08); box-shadow: inset 2px 0 0 var(--salmon); }
.belief-choice input { position: absolute; opacity: 0; pointer-events: none; }
.belief-choice > i {
  position: relative; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--beige-40);
}
.belief-choice input:focus-visible + i { outline: 2px solid var(--salmon); outline-offset: 2px; }
.belief-choice input:checked + i { background: var(--salmon); border-color: var(--salmon); }
.belief-choice input:checked + i::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
  border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: rotate(42deg);
}
.belief-choice > span { font-size: 12px; line-height: 1.72; opacity: .72; }
.belief-choice.is-checked > span { opacity: 1; }
.belief-choice.field-locked { cursor: default; opacity: .62; }
.belief-selected {
  width: max-content; max-width: 100%; margin: 12px 0 21px; padding: 6px 9px;
  color: var(--salmon); border: 1px solid var(--salmon-30); font: 500 9px/1.3 var(--mono); letter-spacing: .06em;
}
.belief-fields, .belief-cycle-fields, .belief-exit-fields { display: grid; gap: 14px; }
.belief-stage1-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.belief-stage1-fields .is-optional { grid-column: 1 / -1; }
.belief-field {
  position: relative; display: grid; gap: 10px; min-width: 0; padding: 17px;
  background: var(--navy-lift); border: 1px solid var(--beige-12);
}
.belief-field > span { display: grid; gap: 5px; }
.belief-field b { font: 600 13px/1.5 var(--sans); }
.belief-field small { color: var(--beige-70); font-size: 10.5px; line-height: 1.72; }
.belief-field textarea {
  width: 100%; min-height: 90px; margin: 0; padding: 12px 13px; resize: none; overflow: hidden;
  color: var(--navy); background: var(--beige); border: 1px solid transparent;
  font: 400 13px/1.75 var(--sans);
}
.belief-field textarea:focus { outline: none; border-color: var(--salmon-ink); }
.belief-field textarea::placeholder { color: var(--navy-40); }
.belief-field.field-locked textarea { color: var(--navy-60); background: rgba(232,228,220,.84); }
.belief-stage-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--beige-12);
}
.belief-stage-actions > span { color: var(--beige-70); font-size: 10px; line-height: 1.6; opacity: .62; }
.belief-cycle-section { padding: 18px; background: var(--navy-lift); border: 1px solid var(--beige-12); }
.belief-cycle-section > header {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px;
  min-height: auto !important; margin-bottom: 16px; padding: 0 0 15px !important; border-bottom: 1px solid var(--beige-12);
}
.belief-cycle-section > header > .num {
  display: grid; place-items: center; width: 30px; height: 30px; color: var(--navy); background: var(--salmon);
  font-size: 10px;
}
.belief-cycle-section > header h4 { margin: 0 0 4px; font: 700 18px/1.35 var(--serif); }
.belief-cycle-section > header p { margin: 0; color: var(--beige-70); font-size: 11px; line-height: 1.7; }
.belief-cycle-fields { counter-reset: belief-loop; }
.belief-cycle-field { counter-increment: belief-loop; padding-left: 50px; }
.belief-cycle-field::before {
  content: counter(belief-loop, decimal-leading-zero); position: absolute; left: 17px; top: 20px;
  color: var(--salmon); font: 500 9px/1 var(--mono); letter-spacing: .04em; opacity: .7;
}
.belief-pivot { display: grid; justify-items: center; gap: 4px; padding: 18px 12px; text-align: center; }
.belief-pivot > span { color: var(--salmon); font-size: 19px; line-height: 1; }
.belief-pivot b { font: 700 15px/1.4 var(--serif); }
.belief-pivot p { margin: 0; color: var(--beige-70); font-size: 10.5px; line-height: 1.65; }
.belief-new-path { border-color: var(--salmon-30); box-shadow: inset 2px 0 0 var(--salmon); }
.belief-exit-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.belief-exit-fields .is-optional { grid-column: 1 / -1; }
.assignment-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 20px; }
.assignment-actions p { margin: 0; font-size: 11px; opacity: .45; }
.assignment-actions .btn { flex: none; }
@media (max-width: 560px) {
  .assignment { margin-top: 24px; }
  .assignment-head { align-items: flex-start; }
  .assignment-meta { padding-top: 3px; }
  .assignment-focus-shell { margin-top: 0; }
  .assignment-focus-screen { min-height: 0; }
  .assignment-screenin { min-height: 416px; padding: 14px 13px; }
  .assignment-screenin .assignment-moon { width: 165%; max-width: none; transform: translateX(-24%); }
  .assignment-screen-head { top: 24px; left: 18px; right: 18px; gap: 10px; }
  .assignment-screen-head h3 { font-size: 19px; }
  .assignment-screen-topic { max-width: 210px; font-size: 10px; }
  .assignment-screen-status { max-width: 42%; gap: 5px; }
  .assignment-screen-status > span { padding: 5px 6px; font-size: 7px; }
  .assignment-compose-close { padding: 6px 9px; font-size: 9px; }
  .assignment-launch { inset: 122px 18px 48px; padding: 0; }
  .assignment-launch b { font-size: 19px; }
  .assignment-launch small { max-width: 260px; text-align: center; }
  .assignment-screen-nav { left: 18px; right: 18px; bottom: 17px; }
  .assignment-pickers { grid-template-columns: minmax(0, 1fr); }
  .assignment-theme-toggle {
    grid-template-columns: 20px minmax(0, 1fr) 10px; gap: 3px 7px; min-height: 64px; padding: 13px 9px 14px;
  }
  .assignment-theme-menu { max-height: min(250px, 58vh); padding: 8px; }
  .assignment-theme-menu > button { min-height: 62px; }
  .assignment-idle { justify-content: flex-start; padding: 34px 10px 20px; }
  .assignment-home { padding: 28px 10px 42px; }
  .assignment-home-copy { padding-left: 18px; }
  .assignment-home h3 { max-width: 280px; font-size: 27px; }
  .assignment-chooser h3 { font-size: 19px; }
  .assignment-home-beacon { right: 9%; bottom: 13%; }
  .assignment-home > p:not(.ey) { max-width: 310px; font-size: 11.5px; }
  .assignment-home-copy > p:not(.ey) { max-width: 290px; font-size: 13.5px; }
  .assignment-chooser { padding: 28px 7px 17px; }
  .assignment-choice-panel { min-height: 360px; padding: 17px 14px; }
  .assignment-choice-panel::before { left: 14px; }
  .assignment-brief { padding: 0; }
  .assignment-brief-body p { font-size: 14px; line-height: 1.8; }
  .assignment-brief-lead { font-size: 14px; }
  .assignment-brief-steps { grid-template-columns: 1fr; }
  .assignment-overview-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assignment-overview-topics button { min-height: 60px; padding: 10px 9px; }
  .assignment-idle h3, .assignment-compose-head h3 { font-size: 22px; }
  .assignment-idle-guide { font-size: 11.5px; }
  .assignment-screen-details > div { max-height: 90px; }
  .assignment-compose { inset: auto; gap: 10px; padding: 15px 14px 18px; }
  .assignment-trait-picker { grid-template-columns: 1fr; gap: 12px; padding: 13px 12px; }
  .assignment-trait-picker h4 { font-size: 18px; }
  .assignment-trait-picker p:not(.ey) { font-size: 13px; }
  .assignment-trait-options { gap: 7px; }
  .assignment-trait-options button { min-width: 58px; min-height: 36px; font-size: 13px; }
  .assignment-write-fold summary { min-height: 62px; }
  .assignment-write-fold summary b { font-size: 14px; }
  .assignment-write-fold summary small { font-size: 12.5px; }
  .assignment-write-fold-body strong { font-size: 14.5px; }
  .assignment-write-fold-body > p { font-size: 14px; line-height: 1.8; }
  .assignment-write-definitions > div { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; }
  .assignment-write-definitions dt { font-size: 12px; }
  .assignment-write-definitions dd { font-size: 13.5px; }
  .assignment-write-section strong { font-size: 14.5px; }
  .assignment-write-section > p:not(.ey) { font-size: 14px; line-height: 1.8; }
  .assignment-write-example { font-size: 13.5px; line-height: 1.78; }
  .assignment-write-format li { font-size: 13px; }
  /* ⚠️ 手機的輸入框**不能小於 16px** —— 小於 16 iOS 會自動放大整頁（踩過）。 */
  .assignment-compose textarea { min-height: 210px; padding: 11px 0; font-size: 16px; line-height: 1.8; }
  .assignment-list-grid { grid-template-columns: 1fr; }
  .assignment-list-entry { padding: 11px 12px 12px; }
  .assignment-list-compose .assignment-list-entry textarea {
    min-height: 92px; padding: 9px 0; font-size: 16px; line-height: 1.72;
  }
  .assignment-focus-guide { margin-top: 14px; padding: 17px 15px; }
  .assignment-focus-guide-list { grid-template-columns: 1fr; }
  .assignment-focus-guide-list section { padding: 14px 13px; }
  .assignment-focus-note, .assignment-focus-prompt { font-size: 11.5px; }
  .assignment-steps { grid-template-columns: 1fr; }
  .assignment-story-column > header { min-height: 82px; padding: 12px 8px 10px; }
  .assignment-story-column > header > .num { margin-bottom: 6px; font-size: 8px; }
  .assignment-story-column > header .ey { display: none; }
  .assignment-story-column > header h3 { font-size: 14px; }
  .assignment-story-cell { grid-template-columns: 16px minmax(0, 1fr); min-height: 70px; gap: 2px 4px; padding: 10px 8px; }
  .assignment-story-cell > .num { font-size: 7px; }
  .assignment-story-cell strong { font-size: 15px; }
  .assignment-story-state { font-size: 7.5px; letter-spacing: .04em; }
  .assignment-story { padding: 15px; }
  .assignment-story-example dl > div { grid-template-columns: 1fr; gap: 3px; }
  .belief-tabs { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); }
  .belief-tabs > i::before { left: 3px; right: 3px; }
  .belief-tabs > i::after { right: 2px; }
  .belief-tabs button { grid-template-columns: 20px minmax(0, 1fr); gap: 2px 5px; min-height: 66px; padding: 10px 8px; }
  .belief-tabs button b { font-size: 14px; }
  .belief-tabs button small { font-size: 7.5px; letter-spacing: .02em; }
  .belief-stage { padding: 15px; }
  .belief-stage-head h3 { font-size: 21px; }
  .belief-categories, .belief-stage1-fields, .belief-exit-fields { grid-template-columns: 1fr; }
  .belief-stage1-fields .is-optional, .belief-exit-fields .is-optional { grid-column: auto; }
  .belief-category > header { padding: 13px 12px !important; }
  .belief-choice { padding: 12px; }
  .belief-choice > span { font-size: 12.5px; }
  .belief-field { padding: 14px; }
  .belief-cycle-section { margin: 0 -1px; padding: 14px; }
  .belief-cycle-field { padding-left: 43px; }
  .belief-cycle-field::before { left: 14px; top: 17px; }
  .belief-stage-actions { align-items: stretch; flex-direction: column-reverse; }
  .belief-stage-actions .btn { width: 100%; }
  #v-library .assignment-field { padding: 17px 15px; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
  .assignment-answer { margin: 15px -15px 0; padding: 15px; }
  .assignment-field textarea { min-height: 210px; padding: 13px; }
  .assignment-actions { align-items: stretch; flex-direction: column; }
  .assignment-actions .btn { width: 100%; }
}
/* ── toast ─────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translate(-50%, 8px);
  z-index: 40; max-width: calc(100vw - 40px);
  background: var(--beige); color: var(--navy);
  font-size: 13px; padding: 11px 18px; border-radius: 3px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 720px) {
  .axes { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
}
/* ═══ 米白閱讀區 ═══════════════════════════════════════
   uc-design：「章節分隔頁用深色，內容頁用米白，交替出現」。
   多數元件用 currentColor ＋ opacity，會自動反轉；只覆寫硬寫深色底的那幾個。 */

/* 藍色桌上的白紙：頁面底色維持深藍，內容落在一張有邊界、有陰影的米白紙上。
   滿版米白太亮，而且失去「文件被放在桌上」的層次。 */
.paper {
  background: var(--beige);
  color: var(--navy);
  max-width: 880px;
  margin: 40px 15px;              /* 兩側留深藍，紙才有邊界 */
  padding: 10px 0 14px;
  position: relative;
  border-radius: 2px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .3);
}
.paper::before {                  /* 紙張上緣的細線 */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--salmon); opacity: .5; border-radius: 2px 2px 0 0;
}
/* 內側的航空郵簡斜紋。**只是要讓它一眼看起來像一封信**，不是裝飾比賽 ——
   所以只有兩個規範內的色、透明度壓到 .34，遠看是一圈紋理不是一圈色帶。
   ⚠️ `pointer-events: none`：它蓋在信上面，不擋選字與點擊。 */
.paper::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 5px solid transparent; border-radius: 2px; opacity: .34;
  border-image: repeating-linear-gradient(45deg,
    var(--salmon) 0 9px, transparent 9px 18px,
    var(--navy) 18px 27px, transparent 27px 36px) 5;
}
@media (max-width: 720px) {
  .paper::after { inset: 7px; border-width: 4px; border-image-slice: 4; }
}
.paper .wrap { padding: 0 26px; }
.paper section:first-child { padding-top: 42px; }
.paper section:last-child { padding-bottom: 42px; }
@media (min-width: 720px) {
  .paper { margin: 60px auto; }
  .paper .wrap { padding: 0 56px; }
  .paper section:first-child { padding-top: 56px; }
  .paper section:last-child { padding-bottom: 56px; }
}
.paper .dbox { background: rgba(19, 27, 46, .045); border-color: rgba(19, 27, 46, .1); }
.paper .dim, .paper .dstd, .paper .notes, .paper .note { border-color: rgba(19, 27, 46, .12); }
.paper .notes { background: rgba(19, 27, 46, .12); border-color: rgba(19, 27, 46, .12); }
.paper .note { background: var(--beige); }
.paper .cite { border-left-color: rgba(19, 27, 46, .2); }
.paper code { background: rgba(19, 27, 46, .07); }
.paper a { color: var(--salmon-ink); }   /* 鮭粉在米白上對比不足，用同色系壓深 */

/* 章節格言 */
.epi {
  font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.9;
  margin: 6px 0 30px; padding-left: 18px;
  border-left: 3px solid var(--salmon);
}
/* ═══ 教練評語：讀起來要像一封信 ═══════════════════════
   白色區塊只剩這一節。信的節奏是「稱謂 → 正文 → 署名」，
   所以段落不編號、不加小標當標題 —— 組合特徵的名字改成句首的粗體引語，
   讀起來是「你會靠近，也會退開……」而不是一張條列表。 */
.letter { max-width: 34em; margin: 4px auto 0; }
/* 信的小標。米白紙上的深藍字，不用分隔線也不用編號。 */
.lhead { font-family: var(--serif); font-size: 19px; font-weight: 700;
  color: var(--salmon-ink); margin: 0 0 22px; letter-spacing: .04em; }
.lsalu { font-family: var(--serif); font-size: 17px; margin: 0 0 22px; }
.lpara { font-size: 14.5px; line-height: 2.15; margin: 0 0 20px; text-indent: 0; }
/* 句首的粗體引語要跟正文分開，不然會連成「技術到位，骨架空白你會靠近」。
   用破折號不用換行 —— 換行就變成小標，那是條列不是信。 */
.lpara b { font-family: var(--serif); font-weight: 700; color: var(--salmon-ink); }
.lpara b::after { content: '——'; margin: 0 .1em 0 .15em; opacity: .45; font-weight: 400; }
.lsign { display: grid; justify-items: end; margin: 30px 0 0; text-align: right; }
.lsign span { font-family: 'Caveat', var(--serif); font-size: 29px; line-height: 1.2; color: var(--salmon-ink); }
.lsign small { margin-top: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; opacity: .5; }
.ldate { margin: 6px 0 0; text-align: right; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; opacity: .42; }

/* 教練評測編輯：一個維度一列，手機與桌機都只需要往下填。 */
.creview { max-width: 760px; }
.crstatus, .crmeta, .crfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.crstatus { margin-bottom: 18px; }
.crstatus p { margin: 0; }
.crstatus #crProgress { font-family: var(--mono); font-size: 11px; opacity: .5; }
.crgrid { display: grid; gap: 12px; }
.crrow { padding: 20px; border: 1px solid rgba(19, 27, 46, .12); }
.crmeta .ey { margin: 0 0 4px; color: var(--salmon-ink); }
.crmeta h3 { margin: 0; font-family: var(--serif); font-size: 20px; }
/* 分數不是教練從零填的 —— 25 道計分題算出基準，教練只做 ±。
   所以這一格要同時講三件事：測出來幾級、教練動了幾級、最後是幾級。 */
.crscore { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  font-size: 12px; font-weight: 700; }
.crbase { font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: .05em; opacity: .5; }
.crbase b { font-size: 12px; opacity: .85; }
.crstep { display: flex; align-items: center; gap: 2px;
  border: 1px solid rgba(19, 27, 46, .22); border-radius: 2px; }
.crstep button {
  width: 30px; height: 34px; color: var(--navy); background: transparent;
  border: 0; font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .15s var(--ease);
}
.crstep button:hover:not(:disabled) { background: rgba(19, 27, 46, .06); }
.crstep button:disabled { opacity: .25; cursor: default; }
.crstep button:focus-visible { outline: 2px solid rgba(193, 102, 82, .5); outline-offset: -2px; }
.crfin { min-width: 46px; font-family: var(--serif); font-style: normal; font-size: 19px;
  text-align: center; }
.crfin s { font-family: var(--mono); font-size: 10px; text-decoration: none; opacity: .45; }
.cradj { font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .05em; opacity: .38; }
.cradj.on { color: var(--salmon-ink); opacity: 1; }
.crfacet { margin: 10px 0 15px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .05em; line-height: 1.7; opacity: .48; }
.crnote, .crletter { display: block; font-size: 12px; font-weight: 700; }
.crnote textarea, .crletter textarea {
  display: block; width: 100%; min-height: 104px; margin-top: 7px; padding: 12px 13px;
  resize: vertical; color: var(--navy); background: rgba(19, 27, 46, .035);
  border: 1px solid rgba(19, 27, 46, .18); border-radius: 2px;
  font: 400 14px/1.85 var(--sans);
}
.crnote textarea:focus, .crletter textarea:focus {
  outline: 2px solid rgba(193, 102, 82, .22); border-color: var(--salmon-ink);
}
.crletter { margin-top: 28px; font-family: var(--serif); font-size: 17px; }
.crletter textarea { min-height: 210px; font-family: var(--sans); font-size: 14.5px; }
.crsignature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: end;
  margin-top: 22px; padding: 18px; border: 1px solid rgba(19,27,46,.14); }
.crsignature h3 { margin: 4px 0; font: 700 19px/1.3 var(--serif); }
.crsignature p { margin: 0; font-size: 11px; line-height: 1.65; opacity: .55; }
.crsignature label { display: grid; gap: 6px; font-size: 11px; font-weight: 700; }
.crsignature input { width: 100%; padding: 10px; color: var(--navy); background: rgba(19,27,46,.035);
  border: 1px solid rgba(19,27,46,.18); font-family: var(--sans); }
.sigpreview { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: end;
  min-height: 52px; padding-top: 12px; border-top: 1px solid rgba(19,27,46,.1); }
.sigpreview span { font-family: 'Caveat', var(--serif); font-size: 30px; color: var(--salmon-ink); }
.crfoot { align-items: flex-end; margin-top: 22px; }
.crfoot p { max-width: 30em; margin: 0; font-size: 12px; line-height: 1.8; opacity: .55; }
@media (max-width: 560px) {
  .crrow { padding: 16px; }
  .crmeta { align-items: flex-start; }
  .crscore { align-items: flex-end; }
  .crfoot { align-items: stretch; flex-direction: column; }
  .crfoot .btn { width: 100%; }
  .crsignature { grid-template-columns: 1fr; }
  .sigpreview { grid-column: 1; }
}

/* ═══ 引用學員自己的話 ═════════════════════════════════ */

.quote { margin: 20px 0; padding: 18px 20px; background: rgba(19, 27, 46, .045); border-left: 2px solid var(--salmon); }
.quote > .ey { margin: 0 0 12px; color: var(--salmon-ink); opacity: .9; }
.quote blockquote { margin: 0 0 14px; }
.quote cite {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .04em; opacity: .5; margin-bottom: 5px;
}
.quote blockquote span {
  display: block; font-family: var(--serif); font-size: 15.5px; font-weight: 700;
  line-height: 1.95; white-space: pre-wrap;
}
.quote .qn { font-size: 13px; line-height: 2; opacity: .68; margin: 0; padding-top: 12px; border-top: 1px dashed rgba(19, 27, 46, .18); }
/* ═══ 基準分佈曲線 ═════════════════════════════════════ */

.dcurve { display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px; }
.curve { width: 100%; max-width: 260px; height: auto; overflow: visible; }
.curve .carea { fill: currentColor; opacity: .1; }
.curve .cline { fill: none; stroke: currentColor; stroke-width: 1; opacity: .35; }
.curve .cmark { stroke: var(--salmon); stroke-width: 1.5; }
.curve .cdot   { fill: var(--salmon); }
.paper .curve .cmark, .paper .curve .cdot { stroke: var(--salmon-ink); fill: var(--salmon-ink); }
.curve .ctx {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
  fill: currentColor; opacity: .55;
}
.cnote2 { font-size: 11.5px; line-height: 1.8; opacity: .5; margin: 0; }
.cnote2 b { opacity: 1; font-weight: 700; }
/* ═══ 能力圖：ghost 與差值 ═════════════════════════════ */

.radar .ghost { fill: none; stroke: var(--beige); stroke-width: 1; stroke-dasharray: 3 3; opacity: .38; }
.radar .gvtx  { fill: var(--beige); opacity: .3; }
.sheets { display: grid; gap: 1px; background: rgba(19, 27, 46, .14); border: 1px solid rgba(19, 27, 46, .14); }
.sheet { background: var(--beige); padding: 13px 15px; }
.sheet .sk { font-family: var(--mono); font-size: 12.5px; font-weight: 500; margin: 0 0 4px; }
.sheet .sk em { font-style: normal; font-size: 10px; letter-spacing: .1em; opacity: .4; margin-left: 9px; }
.sheet .sc { font-size: 11.5px; line-height: 1.85; opacity: .6; margin: 0; }
/* ═══ 成長日誌 ═════════════════════════════════════════
   三條錄音軌（電話／社交／約會，由上到下），x 軸＝十二週。
   **一筆紀錄＝一組電平段，段數＝那一筆的狀況**（lv 1 差／2 好／3 優），
   軌與軌之間不能互相比較。
   圖案只在最左邊的示意欄出現一次；儀器層（邊框、上下刻度桿、道號、讀數）
   一律待在框上，不疊在三條軌跡上 —— 「太眼花撩亂」是第四版的死因。 */

.tl { margin: 30px 0 26px; }
.tlbar { display: flex; gap: 3px; }
.tw {
  flex: 1; background: none; border: 0; border-top: 2px solid var(--beige-18);
  padding: 9px 0 0; cursor: pointer; color: var(--beige); opacity: .35;
  transition: opacity .45s var(--ease), border-color .45s var(--ease);
}
.tw b { font-size: 11px; letter-spacing: .06em; }
.tw.past { opacity: .6; border-top-color: var(--salmon-30); }
.tw.on { opacity: 1; border-top-color: var(--salmon); }
.tw:hover { opacity: .85; }
.tlfoot { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.tlfoot .ey { opacity: .7; transition: opacity .3s; }
.gsum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--beige-08); border: 1px solid var(--beige-08); margin-top: 10px; }
.gs { background: var(--navy); padding: 12px 6px; text-align: center; }
.gs b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--salmon); line-height: 1.1; }
.gs s { text-decoration: none; font-size: 10.5px; opacity: .5; }
.gblk .ey { margin: 0 0 10px; color: var(--salmon); opacity: .8; }
.glist { list-style: none; margin: 0; padding: 0; min-height: 172px; }   /* 撐住 4 筆，播放時容器不抽動 */
.glist li { font-size: 13.5px; line-height: 1.9; padding: 8px 0 8px 16px; border-bottom: 1px solid var(--beige-08); position: relative; }
.glist li::before { content: '—'; position: absolute; left: 0; opacity: .35; }
.glist.ev li { padding-left: 0; }
.glist.ev li::before { content: none; }
.ek {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  border: 1px solid currentColor; border-radius: 2px; padding: 2px 6px; margin-right: 9px;
  opacity: .55; vertical-align: 1px;
}
.glist.ev li.call   .ek { color: var(--salmon); opacity: .9; }
.glist.ev li.booked .ek { color: var(--salmon); opacity: .9; }
.gdelta { display: flex; flex-direction: column; gap: 2px; }
.gd { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--beige-08); }
.gd span { flex: 1; }
.gd i { font-style: normal; opacity: .4; font-size: 12px; }
.gd u { text-decoration: none; opacity: .3; font-size: 10px; }
.gd b { font-weight: 500; font-size: 15px; }
.gd em { font-style: normal; font-size: 11.5px; color: var(--salmon); min-width: 34px; text-align: right; }
.gd em.flat { opacity: .3; color: inherit; }
/* 卡片縮圖左上的小標（目前只有課程工具的狀態在用）。
   原本是「為你安排」那區標維度用的，那一區已刪除。 */
.thumb u { text-decoration: none; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--salmon); margin-right: auto; align-self: flex-start; }
.thumb { justify-content: space-between; }
@media (min-width: 860px) {
  .dcurve { flex-direction: row; align-items: center; gap: 16px; }
  .cnote2 { flex: 1; }
}
/* 鮭粉 #E8A898 在米白 #E8E4DC 上只有約 1.3:1，當文字完全讀不了。
   米白區裡所有鮭粉「文字」一律換成同色系壓深的 --salmon-ink（約 4.6:1，過 AA）。
   線條、邊框、底色不受影響 —— 那些不需要對比度。 */
:root { --salmon-ink: #A85F4A; }
.paper .cross h3,
.paper .dband,
.paper .dscore b,
.paper .dbox .ey,
.paper .dstd .ey,
.paper .lens .ey b,
.paper .mgroup .ey,
.paper .quote > .ey,
.paper .otgt,
.paper .snote b { color: var(--salmon-ink); opacity: 1; }
.paper .dbox .ey, .paper .dstd .ey { opacity: .9; }
/* 四種教練接觸的圖例。通話只講頻率，不講時長。 */
.glegend { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--beige-08); }
.glegend p { display: flex; align-items: baseline; gap: 4px; font-size: 11.5px; line-height: 1.9; opacity: .55; margin: 0 0 5px; }
.glegend .ek { flex: none; opacity: .8; }
.glegend p.call .ek, .glegend p.booked .ek { color: var(--salmon); }
/* ═══ 課程藍圖：人物總覽 ═══════════════════════════════ */

/* ═══ 任務 ⇄ 總覽 的轉跳鈕 ═══════════════════════════════
   原本是頁首的 `.vsw` 膠囊切換器，2026-09-19 拿掉 —— 它佔掉 54px，
   而主視覺正在跟第一屏搶空間（使用者：「這樣整體能再往上移動一點」）。
   現在任務頁在牌組底下、總覽頁在最上面，各一顆。 */
.bpcswitch {
  /* 版面的第二列、第二欄 —— 也就是牌組下緣那條線的正下方，靠右。 */
  grid-column: 2; grid-row: 2;
  justify-self: end; display: inline-flex; align-items: center;
  margin-top: 10px; padding: 7px 14px; cursor: pointer;
  font-family: var(--sans); font-size: 12px; color: var(--beige-70);
  background: none; border: 1px solid var(--beige-18); border-radius: 30px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.bpcswitch i { font-style: normal; font-size: 11px; opacity: .7; }
.bpcswitch:hover { border-color: var(--salmon); color: var(--beige); }
.bpcswitch:focus-visible { outline: 2px solid var(--salmon); outline-offset: 2px; }
.bpcswitchrow { display: flex; }
.bpcswitch.is-back { margin: 0 auto 0 0; }
#v-okr > .pagepad > .bpcswitchsec { padding: 0 0 10px; }
.bpcover-sec { padding-top: 0 !important; }
.bpcover {
  position: relative; max-width: var(--maxw); margin: 0 auto; overflow: hidden;
  padding: 0 0 8px;
  background-image:
    linear-gradient(rgba(232, 228, 220, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 228, 220, .025) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* 任務主視覺裡的雷達卡會略微超出 SVG 本體；上方保留一小段安全邊界，
   避免「人格魅力」被容器的 overflow 裁掉。高度從主體扣回，不增加第一屏總高。 */
.bpcover.bpcover-task { padding-top: 16px; }
.bpcgrid {
  display: grid; grid-template-columns: minmax(215px, 1fr) minmax(180px, 236px) minmax(215px, 1fr);
  grid-template-rows: repeat(6, 62px); gap: 12px 48px; align-items: stretch;
}
.bpcdim {
  /* ⚠️ 能力卡要壓在塗鴉上面。人物那一格在 DOM 裡排最後，塗鴉又比人物寬，
     不提 z-index 的話塗鴉會蓋到卡片上（踩過）。
     不要改用 z-index:-1 —— .bpcover 沒有建立堆疊脈絡，負值會沉到它的背景後面消失。 */
  z-index: 2;
  position: relative; display: grid; grid-template-columns: 1fr auto;
  align-content: center; column-gap: 12px; min-width: 0;
  padding: 14px 22px; text-align: left; color: var(--beige); cursor: pointer;
  /* ⚠️ 底色必須**不透明**。原本是 rgba(...,.035) 半透明，人物背後的生活圈塗鴉
     會直接透出來壓在卡片的字上（踩過）。改成「不透明深藍 ＋ 同一層米白薄膜」，
     看起來一模一樣，但擋得住後面。代價：卡片裡看不到背景那層 48px 格線。 */
  background-color: var(--navy);
  background-image: linear-gradient(rgba(232, 228, 220, .035), rgba(232, 228, 220, .035));
  border: 1px solid var(--beige-18);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: border-color .2s, background .2s, transform .2s;
}
.bpcdim::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px;
  background: var(--salmon); opacity: .8;
}
.bpcover:not(.bpcover-task) .bpcdim { cursor: default; }
.bpcdim:hover { border-color: var(--beige-40); transform: translateX(3px);
  background-image: linear-gradient(var(--beige-08), var(--beige-08)); }
.bpcdim:focus-visible { outline: 2px solid var(--salmon); outline-offset: 3px; }
.bpcey {
  grid-column: 1; font-family: var(--mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--salmon); opacity: .82;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.bpcdim b {
  grid-column: 1; margin-top: 6px; font-family: var(--serif); font-size: 19px;
  font-weight: 700; line-height: 1.2; letter-spacing: .02em;
}
.bpclv {
  grid-column: 1; margin-top: 5px; font-family: var(--mono); font-size: 9px;
  font-weight: 400; letter-spacing: .12em; line-height: 1; color: var(--salmon); opacity: .72;
}
.bpccur {
  grid-column: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
  margin-top: 8px; font-size: 10.5px; line-height: 1.35; color: var(--beige-70);
}
.bpccur small {
  flex: none; padding: 2px 5px; border: 1px solid var(--beige-18);
  font-family: var(--mono); font-size: 7.5px; line-height: 1.2; letter-spacing: .1em;
  color: var(--salmon); font-weight: 500;
}
.bpccur span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .55; }
.bpcdim.has-task .bpccur small { background: var(--salmon); border-color: var(--salmon); color: var(--navy); }
.bpcdim.has-task .bpccur span { color: var(--beige); opacity: .9; }
.bpcdim > i {
  grid-column: 2; grid-row: 1 / 6; align-self: center; font-family: var(--mono);
  font-size: 15px; font-style: normal; color: var(--salmon); opacity: .8;
}
/* 左欄：人格魅力／情緒價值／調情升溫　右欄：形象魅力／生活圈（使用者指定） */
.bpc-values { grid-column: 1; grid-row: 1 / 3; }
.bpc-emo    { grid-column: 1; grid-row: 3 / 5; }
.bpc-flirt  { grid-column: 1; grid-row: 5 / 7; }
.bpc-image  { grid-column: 3; grid-row: 2 / 4; }
.bpc-circle { grid-column: 3; grid-row: 4 / 6; }
.bpcfigure {
  /* ⚠️ **每一層都要明確給 z-index**，不能靠 DOM 順序。
     `.fxnet` 是 position:absolute，而定位元素一律畫在非定位元素之上 ——
     不管誰先寫。結果網絡蓋過剪影與線稿（踩過）。
     `isolation: isolate` 保證這些 z-index 只在這個容器內比較。 */
  isolation: isolate;
  position: relative; grid-column: 2; grid-row: 1 / 7;
  display: grid; place-items: center; min-height: 420px;
  animation: bpcfigure-in .8s var(--ease) both;   /* 進場只跑一次，掛在容器上 */
}
/* 人物：一張手繪線稿疊兩層 —— 底層壓暗，亮層加光暈再用遮罩框出部位。
   ⚠️ 用 grid 的同一格疊，不要用 absolute ＋ translate 置中 ——
   進場動畫 bpcfigure-in 的結束狀態是 `transform: none`，會把置中的 translate 蓋掉（踩過）。
   ⚠️ **遮罩要用漸層衰減，不要用 clip-path** —— 矩形裁切會在腰部留一條直邊，
   看起來像被切掉不是被照亮（踩過）。 */
.bpcfigure img {
  grid-area: 1 / 1; position: relative;      /* z-index 要生效就得脫離 static */
  display: block; width: min(100%, 214px); max-height: 420px; object-fit: contain;
  pointer-events: none;
}
/* 由下而上：網絡 1 → 遮擋剪影 2 → 外圈光暈 3 → 線稿 4 → 高亮 5 → 心臟 6 */
.fxnet   { z-index: 1; }
.fxfill, .fxradarsoft { z-index: 2; }
.fx-aura { z-index: 3; }
.fxbase  { z-index: 4; }
.fx-head, .fx-upper, .fx-limbs { z-index: 5; }
.fxheart { z-index: 6; }
.fxbase { filter: brightness(.30) saturate(.32); transition: filter .18s var(--ease); }
.fxhi {
  opacity: 0; transition: opacity .18s var(--ease);
  filter: drop-shadow(0 0 4px rgba(232, 168, 152, .95))
          drop-shadow(0 0 12px rgba(232, 168, 152, .45)) brightness(1.55) saturate(.75);
}
/* 沒有任何能力被指到時，人物維持原本的亮度 —— 不要一進頁面就是暗的 */
.bpcfigure:not([data-lit]) .fxbase {
  filter: none; -webkit-filter: none;
}
.bpcfigure[data-lit="head"]  .fx-head,
.bpcfigure[data-lit="upper"] .fx-upper,
.bpcfigure[data-lit="limbs"] .fx-limbs,
.bpcfigure[data-lit="aura"]  .fx-aura { opacity: 1; }

.fx-head  { -webkit-mask-image: radial-gradient(ellipse 26% 8.5% at 50% 6.4%, #000 55%, transparent 100%);
                    mask-image: radial-gradient(ellipse 26% 8.5% at 50% 6.4%, #000 55%, transparent 100%); }
.fx-upper { -webkit-mask-image: radial-gradient(ellipse 46% 15% at 50% 30%, #000 50%, transparent 100%);
                    mask-image: radial-gradient(ellipse 46% 15% at 50% 30%, #000 50%, transparent 100%); }
.fx-limbs { -webkit-mask-image:
    radial-gradient(ellipse 17% 22% at 12% 39%, #000 45%, transparent 100%),
    radial-gradient(ellipse 17% 22% at 88% 39%, #000 45%, transparent 100%),
    radial-gradient(ellipse 34% 24% at 50% 82%, #000 50%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 17% 22% at 12% 39%, #000 45%, transparent 100%),
    radial-gradient(ellipse 17% 22% at 88% 39%, #000 45%, transparent 100%),
    radial-gradient(ellipse 34% 24% at 50% 82%, #000 50%, transparent 100%); }
/* 形象魅力＝身體四周，所以不遮罩，改成整個剪影往外發光 */
.fx-aura {
  filter: drop-shadow(0 0 3px rgba(232, 168, 152, .95))
          drop-shadow(0 0 14px rgba(232, 168, 152, .55))
          drop-shadow(0 0 30px rgba(232, 168, 152, .30)) brightness(1.15);
}
/* 形象魅力＝**只亮外圈**。用實心剪影加外光暈：剪影是深藍的，
   光暈在身體內部被自己擋掉，只剩往外那一圈 —— 這就是「聚焦向外」。
   ⚠️ 不要用整張線稿加光暈（舊做法）——那會整個人一起發光，焦點就散了。 */
.fx-aura {
  filter: drop-shadow(0 0 5px rgba(232, 168, 152, .60))
          drop-shadow(0 0 15px rgba(232, 168, 152, .34))
          drop-shadow(0 0 34px rgba(232, 168, 152, .18));
}

/* 生活圈＝人物背後的大網絡。 */
.fxnet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 404px; height: 454px; opacity: 0; pointer-events: none;
  transition: opacity .26s var(--ease);
  /* ⚠️ 外緣要淡出。網絡比能力卡之間那條帶子寬，而卡片底色是不透明的，
     不淡出的話網絡會被卡片切出一條垂直硬邊（踩過）。 */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
}
.bpcfigure[data-lit="net"] .fxnet { opacity: 1; }

/* 遮擋用的實心剪影。⚠️ 平常必須是透明的 ——
   它是深藍實心，一直顯示會把背景那層 48px 格線在身體範圍內蓋掉。
   只有網絡亮起來時才需要它擋住後面的線。 */
.fxfill { opacity: 0; transition: opacity .26s var(--ease); }
.bpcfigure[data-lit="net"] .fxfill { opacity: 1; }
.fxradarsoft { opacity: 0; transition: opacity .22s var(--ease); }

/* 情緒價值：胸口的心臟。跟人物同一套語言（細線、青色、不填色）。 */
.fxheart {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100%, 214px); height: 420px; pointer-events: none;
  opacity: 0; transition: opacity .22s var(--ease);
  filter: drop-shadow(0 0 4px rgba(232, 168, 152, .9))
          drop-shadow(0 0 11px rgba(232, 168, 152, .45));
}
.bpcfigure[data-lit="upper"] .fxheart { opacity: 1; animation: fxbeat 1.9s ease-in-out infinite; }
@keyframes fxbeat { 0%,100% { transform: translate(-50%,-50%) scale(1) }
                    14% { transform: translate(-50%,-50%) scale(1.045) }
                    28% { transform: translate(-50%,-50%) scale(1) }
                    42% { transform: translate(-50%,-50%) scale(1.03) } }

.bpcfigure::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 8%; height: 1px;
  background: var(--salmon); opacity: 0; pointer-events: none;
  box-shadow: 0 0 8px rgba(232, 168, 152, .55); animation: bpcscan 1.4s .45s ease-out both;
}
@keyframes bpcfigure-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes bpcscan { 0% { opacity: 0; transform: translateY(0) } 20% { opacity: .65 } 100% { opacity: 0; transform: translateY(340px) } }
@media (prefers-reduced-motion: reduce) {
  .bpcfigure { animation: none; }
  .bpcfigure[data-lit="upper"] .fxheart { animation: none; }
  .bpcfigure::after { animation: none; display: none; }
}
@media (max-width: 780px) {
  .bpcover { padding-top: 10px; }
  .bpcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 10px; }
  .bpcfigure { order: -1; grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
  .bpcfigure img { width: 178px; max-height: 310px; }
  .fxheart { width: 178px; height: 310px; }
  /* 網絡要跟著人物縮，不然會被 .bpcover 的 overflow 裁掉 */
  .fxnet { width: 300px; height: 336px; }
  .bpcdim { grid-column: auto; grid-row: auto; min-height: 112px; padding: 15px 17px; }
  .bpcdim:hover { transform: none; }
}
@media (max-width: 520px) {
  .bpcgrid { grid-template-columns: 1fr; }
  .bpcfigure { grid-column: 1; min-height: 300px; }
  .bpcdim { min-height: 104px; }
}

/* 當前任務：雷達評語的毛玻璃層，加上書頁的刻度、網格與方括號。
   它是固定浮層，不參與藍圖版面，所以開關不會推動人物或改變捲動位置。 */
html.task-open, html.task-open body { overflow: hidden; }
.taskveil {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 28px;
  background: rgba(19, 27, 46, .68);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}
.taskveil.on { animation: taskveil-in .22s var(--ease) both; }
.taskpanel {
  position: relative; width: min(680px, 100%); max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px); min-width: 0; overflow: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 42px 48px 34px; color: var(--beige); outline: none;
  background-color: rgba(19, 27, 46, .91);
  background-image:
    linear-gradient(rgba(232, 228, 220, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 228, 220, .025) 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 34px, rgba(232, 168, 152, .20) 34px 35px, transparent 35px);
  background-size: 26px 26px, 26px 26px, 100% 100%;
  border: 1px solid var(--beige-18);
  clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow: 0 28px 72px rgba(0, 0, 0, .48), inset 0 1px 0 var(--beige-08);
}
.taskveil.on .taskpanel { animation: taskpanel-in .42s var(--ease) both; }
.taskpanel::before {
  content: ''; position: absolute; left: 24px; top: 70px; bottom: 34px; width: 3px;
  background: repeating-linear-gradient(to bottom, var(--salmon) 0 2px, transparent 2px 8px);
  opacity: .45;
}
.taskbrk { position: absolute; width: 20px; height: 28px; opacity: .45; pointer-events: none; }
.taskbrk-tl { left: 12px; top: 12px; border-left: 1px solid var(--salmon); border-top: 1px solid var(--salmon); }
.taskbrk-tr { right: 12px; top: 12px; border-right: 1px solid var(--salmon); border-top: 1px solid var(--salmon); }
.taskbrk-bl { left: 12px; bottom: 12px; border-left: 1px solid var(--beige-40); border-bottom: 1px solid var(--beige-40); }
.taskbrk-br { right: 12px; bottom: 12px; border-right: 1px solid var(--beige-40); border-bottom: 1px solid var(--beige-40); }
.taskscan {
  position: absolute; left: 7%; right: 7%; top: 18%; height: 1px; opacity: 0;
  background: var(--salmon); box-shadow: 0 0 10px rgba(232, 168, 152, .7);
  pointer-events: none;
}
.taskveil.on .taskscan { animation: taskscan 1s .16s ease-out both; }
.taskx {
  position: absolute; right: 18px; top: 16px; width: 34px; height: 34px;
  color: var(--beige); background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; opacity: .42; transition: opacity .2s;
}
.taskx:hover, .taskx:focus-visible { opacity: 1; }
.taskey {
  margin: 0 44px 12px 0; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--salmon); opacity: .85;
}
.taskhead { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.taskhead span {
  padding: 4px 8px; color: var(--navy); background: var(--salmon);
  font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .12em;
}
.taskhead b { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--beige-70); }
.taskpanel h2 { max-width: 18em; font-size: clamp(25px, 4vw, 36px); line-height: 1.35; }
.taskrule { display: flex; align-items: center; gap: 8px; margin: 18px 0 20px; }
.taskrule i { width: 62px; height: 3px; background: var(--salmon); }
.taskrule s { flex: 1; height: 1px; background: var(--beige-18); }
.taskbody { max-width: 36em; margin: 0; font-size: 14px; line-height: 2; color: var(--beige-70); white-space: pre-line; }
.taskmeta {
  display: grid; grid-template-columns: max-content 1fr; gap: 0 18px;
  margin: 24px 0 0; padding: 13px 0; border-top: 1px solid var(--beige-08); border-bottom: 1px solid var(--beige-08);
}
.taskmeta dt, .taskmeta dd { margin: 0; padding: 6px 0; }
.taskmeta dt { font-family: var(--mono); font-size: 9px; letter-spacing: .13em; color: var(--salmon); opacity: .75; }
.taskmeta dd { font-size: 12px; line-height: 1.7; color: var(--beige-70); }
/* 「傳送」：跟旁邊的字差不多大（使用者 2026-09-18），貼著該欄的內容，
   一眼看得出是「這一格可以帶我過去」，而不是整個視窗的主要動作。 */
.taskgo {
  display: inline-block; margin-left: 8px; padding: 2px 8px; vertical-align: 1px;
  color: var(--salmon); background: transparent; cursor: pointer;
  border: 1px solid var(--salmon-30); border-radius: 0;
  font: 500 10px/1.5 var(--mono); letter-spacing: .08em;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.taskgo:hover { color: var(--navy); background: var(--salmon); border-color: var(--salmon); }
.taskgo:focus-visible { outline: 2px solid var(--salmon); outline-offset: 2px; }
.taskactions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 28px; padding-right: 34px; }
.taskfolio { position: absolute; right: 18px; bottom: 15px; font-size: 9px; letter-spacing: .16em; color: var(--salmon); opacity: .45; }
@keyframes taskveil-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes taskpanel-in { from { opacity: 0; transform: translateY(12px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes taskscan { 0% { opacity: 0; transform: translateY(0) } 18% { opacity: .8 } 100% { opacity: 0; transform: translateY(280px) } }
@media (prefers-reduced-motion: reduce) {
  .taskveil.on, .taskveil.on .taskpanel, .taskveil.on .taskscan { animation: none; }
}
@media (max-width: 560px) {
  .taskpanel { padding: 32px 22px 24px 32px; }
  .taskey { margin-bottom: 9px; font-size: 8.5px; letter-spacing: .16em; }
  .taskhead { gap: 8px; margin-bottom: 10px; }
  .taskpanel h2 {
    max-width: none; margin: 0; font-size: 22px; line-height: 1.38;
    overflow-wrap: anywhere; text-wrap: pretty;
  }
  .taskrule { margin: 14px 0 15px; }
  .taskbody {
    max-width: none; font-size: 13px; line-height: 1.75;
    overflow-wrap: anywhere; text-wrap: pretty;
  }
  /* 手機仍維持「欄名｜內容」的一列式資訊表。改成上下堆疊會讓
     主題／教材／作業散成六段，看起來像文字版面跑掉。 */
  .taskmeta { grid-template-columns: 44px minmax(0, 1fr); gap: 0 10px; margin-top: 18px; padding: 8px 0; }
  .taskmeta dt, .taskmeta dd { padding: 6px 0; }
  .taskmeta dt { white-space: nowrap; }
  .taskmeta dd { min-width: 0; font-size: 11.5px; line-height: 1.65; overflow-wrap: anywhere; }
  .taskgo { margin-left: 6px; padding-inline: 7px; }
  .taskactions { padding-right: 0; flex-wrap: wrap; }
  .taskactions .btn { flex: 1; }
}
.mapinner { min-width: 900px; }
/* 節點詳情卡 */
.ncard {
  background: var(--navy-lift); border: 1px solid var(--salmon-30); border-radius: 3px;
  padding: 18px; margin: 0 0 8px; animation: rise .4s var(--ease) both;
}
.nchead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.nchead .ey { margin: 0 0 5px; }
.nchead h3 { font-size: 19px; }
.npick { display: flex; align-items: center; gap: 8px; flex: none; cursor: pointer; font-size: 12.5px; }
.npick input { width: 16px; height: 16px; accent-color: var(--salmon); }
@media (max-width: 719px) {
}
/* 詳情卡的條列。地圖節點只放短標籤，內容全部落在這裡。 */
.ncard .nchead .ey { color: var(--salmon); opacity: .85; }
.nlist { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 16px 0 0; }
.nlist dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  opacity: .45; padding: 9px 16px 9px 0; border-top: 1px solid var(--beige-08); white-space: nowrap;
}
.nlist dd {
  margin: 0; font-size: 13.5px; line-height: 1.85;
  padding: 9px 0; border-top: 1px solid var(--beige-08);
}
.nlist dt:first-of-type, .nlist dd:first-of-type { border-top: 0; }
/* ═══ 成長日誌：90 天回顧日曆 ═════════════════════════ */
.growthcal { padding-bottom: 52px; }
.gcalbar { margin-bottom: 22px; }
.gcalbar .gkinds { margin-top: 0; }
.gcaltools { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.gstart { display: grid; gap: 6px; color: var(--beige-70); font: 500 10px/1.3 var(--mono);
  letter-spacing: .08em; }
.gstart input { min-height: 38px; padding: 7px 10px; color: var(--beige); background: var(--navy-lift);
  border: 1px solid var(--beige-18); color-scheme: dark; font: 400 13px/1 var(--mono); }
.gmode { display: flex; border: 1px solid var(--beige-18); }
.gmode button { min-height: 36px; padding: 0 13px; color: var(--beige-70); background: transparent;
  border: 0; cursor: pointer; font: 500 10px/1 var(--mono); letter-spacing: .06em; }
.gmode button + button { border-left: 1px solid var(--beige-18); }
.gmode button.on { color: var(--navy); background: var(--salmon); }
.gexport { margin-left: auto; }
/* ⚠️ **格子安靜，紀錄大聲。** 舊版每格畫一個 20～34px 的灰數字，
   那是整頁最大的元素，卻是最沒有資訊的東西（「今天第幾天」看一眼就知道）；
   而真正的內容 —— 有沒有紀錄 —— 只是一個小圖示。2026-09-18 把權重對調。 */
/* ══ 主視覺螢幕 ═══════════════════════════════════════
   使用者 2026-09-18：「上中央有一個主視覺，類似一個電視螢幕，
   一開始顯示 logo，要填寫的時候那邊變成輸入面板，有點像遊戲機。」

   ⚠️ **兩種狀態同一個高度。** 閒置畫太空船、填寫畫表單，
   高度一變整頁就會跳一下，那個跳動比任何裝飾都傷。 */
/* 主機：螢幕嵌在殼裡，三顆鍵在螢幕下方 —— 整塊就是一台機器。 */
.gconsole {
  /* 上方留白拿掉了（使用者 2026-09-19：「把螢幕往上拉」）——
     那 24px 原本是跟導言那行字隔開用的，而導言已經刪掉了。 */
  /* ⚠️ 外框的底色、格線、邊框、陰影**全部拿掉**。
     螢幕自己就是那塊面板 —— 外面再包一層卡片，就等於玻璃後面又墊一張紙，
     使用者 2026-09-19：「整個面板背面一樣是線條的，這樣沒有」。 */
  margin: 0 0 18px; padding: 0; background: none; border: 0; box-shadow: none;
}

/* ═══ 螢幕：一層玻璃，不是一台機器 ═══════════════════════
   使用者 2026-09-19：「螢幕概念是我要的，但做出來不夠精緻跟融入…
   做成透明面板的感覺呢？」

   原本是實心的 #0E1526 底 ＋ 26px 格線 ＋ 內陰影 70px ＋ 暗角，
   四樣東西都在說「這是一個盒子」。拿掉之後靠三件事撐起質感：
     ① 邊緣的光 —— 玻璃之所以看起來是玻璃，是因為邊會反光
     ② 四角的 L 型括號 —— 品牌本來就有的元素，比整圈粗框輕
     ③ 一道非常淡的斜向反光
   ⚠️ **不要再加第四樣。** 精緻感是靠少而準，不是靠多。 */
.gscreen {
  position: relative; overflow: hidden; margin: 0;
  /* 往裡看是暗的（那是外太空），但**不是實心** —— 用 navy 的不同透明度堆出深度。 */
  background:
    linear-gradient(168deg, rgba(19, 27, 46, .34) 0%, rgba(19, 27, 46, .72) 62%, rgba(19, 27, 46, .86) 100%);
  border: 1px solid var(--beige-08);
  /* 光從上面來，所以**底部要有一點陰影**。少了這一層，玻璃看起來就是一個
     平的長方形；加了它才有厚度。⚠️ 只壓底部，整圈內陰影會變回「盒子」。 */
  box-shadow: inset 0 -26px 34px -26px rgba(0, 0, 0, .55),
              0 16px 40px rgba(0, 0, 0, .28);
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  /* 有支援才上。⚠️ 低階手機上這個會掉幀，所以只當加分，不當必要條件。 */
  .gscreen { -webkit-backdrop-filter: blur(1.5px) saturate(1.06); backdrop-filter: blur(1.5px) saturate(1.06); }
}
/* ① 邊緣的光。上緣最亮（光從上面來），兩側淡，底下幾乎沒有。 */
.gscreen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  background:
    linear-gradient(rgba(232, 228, 220, .5), rgba(232, 228, 220, 0) 1.5px) top    / 100% 1.5px no-repeat,
    linear-gradient(rgba(232, 228, 220, .14), rgba(232, 228, 220, 0)) left   / 1px 100% no-repeat,
    linear-gradient(rgba(232, 228, 220, .14), rgba(232, 228, 220, 0)) right  / 1px 100% no-repeat;
}
/* ③ 斜向反光。大、淡、只有一道 —— 兩道就變成擦不乾淨的玻璃。 */
.gscreen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(104deg,
    rgba(232, 228, 220, .055) 0%, rgba(232, 228, 220, .012) 26%, transparent 46%);
}
.gscreenbar {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 9px;
  /* 沒有底線 —— 有線就變成「機殼上的一條溝」，那正是要拿掉的機器感。 */
  padding: 13px 18px 6px;
  color: var(--beige-40); font: 500 9px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase;
}
.gled { width: 5px; height: 5px; border-radius: 50%; background: var(--salmon);
  box-shadow: 0 0 7px rgba(232, 168, 152, .8); }
.gscreenbar b { color: var(--beige-70); }
.gscreenbar s { text-decoration: none; }
.gscreenbar em { margin-left: auto; font-style: normal; }

/* ⚠️ 兩種狀態同一個高度，按下去才不會整頁跳一下。
   數字是量出來的：表單壓到這個高度剛好放得下，太空船也不會顯得空。 */
.gscreenin { position: relative; z-index: 2; display: grid; place-items: center;
  overflow: hidden;
  min-height: 378px; padding: 18px 22px; }

/* 掃描線：慢、淡、只有一條。快或亮就變成廉價特效。 */
.gscanline {
  position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 1; pointer-events: none;
  /* 從 .055 降到 .022：要的是「移動時感覺得到」，不是「看得到一條線」。 */
  background: linear-gradient(rgba(232, 168, 152, 0), rgba(232, 168, 152, .022));
  animation: gsweep 9s linear infinite;
}
@keyframes gsweep { 0% { transform: translateY(-64px); } 100% { transform: translateY(420px); } }

/* ── 閒置：太空船 ── */
/* 字疊在星空上，靠下擺，不要擋住星系核心。底下加一層很淡的漸層當襯，
   不然淺色的字碰到亮星點會糊掉。 */
.gidle { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px;
  align-self: end; width: 100%; padding: 26px 0 2px; text-align: center;
  /* ⚠️ 原本是 rgba(14,21,38)＝舊的 #0E1526。色票護欄只掃 hex，抓不到 rgba 寫法，
     所以它躲過了那次清理。換成 navy。 */
  background: linear-gradient(rgba(19, 27, 46, 0), rgba(19, 27, 46, .8) 62%); }
/* 窗外：鋪滿整個螢幕。slice 會把圖填滿並裁切，直的橫的都不留白邊。 */
.gsky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  transition: filter .28s var(--ease), opacity .28s var(--ease); }
/* ⚠️ 開面板時**景要失焦不是消失**。這是「HUD 蓋在視野上」唯一說得通的關係 ——
   景不見了，那塊玻璃就只是一個暗盒子（使用者 2026-09-19）。 */
.gscreen.is-form .gsky, .gscreen.is-log .gsky { filter: blur(2.2px); opacity: .72; }
/* 壓一層暗幕讓字讀得到。⚠️ 不要壓太黑 —— 目的是讓景退後，不是把它關掉。 */
.gveil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 46%,
    rgba(19, 27, 46, .44) 0%, rgba(19, 27, 46, .74) 100%); }
/* ⚠️ 天體是**光**，不是輪廓。舊版用描邊畫旋臂、虛線畫航道、描邊畫行星，
   那是圖解的語彙，所以看起來像示意圖（使用者 2026-09-19：「svg 太假」）。
   現在形狀與顏色都在 <defs> 的漸層裡，這裡只剩三個真的需要描邊的東西。 */
/* 核心也是一團光 —— 用星點那顆漸層，只是染成鮭粉。 */
.gsky .core { fill: url(#gstar); stroke: none; opacity: .8;
  filter: none; mix-blend-mode: screen; }
/* 行星不描邊 —— 只有受光的那一道弧，而且要細、要淡、只有上緣。 */
.gsky .planet { stroke: none; }
.gsky .limb { fill: none; stroke: var(--beige); stroke-width: 1; opacity: .22; stroke-linecap: round; }
/* 一顆星兩個圓：.star 是光暈（漸層、會跟著亮度變大），.starcore 是核心
   （實心、半徑固定）。核心讓它「亮」，光暈讓它「軟」。 */
.gsky .star { fill: url(#gstar); stroke: none; }
.gsky .starcore { fill: var(--beige); stroke: none; }
/* 一顆會呼吸的星 —— 只要一顆，整片都在閃就變成雜訊。 */
/* ⚠️ **這裡不要再寫 fill。** 原本寫成 `fill: var(--beige)`，因為它排在
   `.star` 後面，把漸層整個蓋掉 —— 那顆星就變成一個實心的白圓盤，
   跟旁邊所有星都不一樣（使用者 2026-09-19：「中間那顆最大的是不一樣的算法？」）。
   它要的只有「會呼吸」，配色沿用 .star／.starcore 就好。 */
.gsky .s-lit { animation: gtwinkle 3.4s ease-in-out infinite; }
@keyframes gtwinkle { 0%, 100% { opacity: .28; } 50% { opacity: .82; } }

/* 窗框：畫在螢幕邊緣，不畫在圖裡 —— 圖會被裁，框跟著裁就穿幫了。
   兩根窗櫺把視野切成三格，那是「在艙內」最強的線索。 */
/* 四角的 L 型括號。UC 的品牌元素，比整圈粗框輕，而且只在角落出現，
   眼睛會自己把它補成一個框。 */
.gscreenin .gcorner {
  position: absolute; z-index: 4; width: 13px; height: 13px; margin: 0;
  pointer-events: none; border: 1px solid var(--salmon); opacity: .4;
}
.gscreenin .gcorner.gc-tl { top: 0;    left: 0;    border-right: 0; border-bottom: 0; }
.gscreenin .gcorner.gc-tr { top: 0;    right: 0;   border-left: 0;  border-bottom: 0; }
.gscreenin .gcorner.gc-bl { bottom: 0; left: 0;    border-right: 0; border-top: 0; }
.gscreenin .gcorner.gc-br { bottom: 0; right: 0;   border-left: 0;  border-top: 0; }

.gport { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--beige-08);
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), var(--beige-18) calc(33.333% - .5px),
      var(--beige-18) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(90deg, transparent calc(66.666% - .5px), var(--beige-18) calc(66.666% - .5px),
      var(--beige-18) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}

.gidlel { margin: 0; font: 500 10px/1 var(--mono); letter-spacing: .3em;
  text-transform: uppercase; color: var(--beige-70); }
.gidles { margin: 0; color: var(--beige-40); font-size: 11.5px; }

/* ── 翻閱：那一天的日誌也在螢幕裡 ── */
.gscreen .gscreenin.has-log, .gscreen.is-log .gscreenin { align-items: start; }
.glog { position: relative; z-index: 2;
  width: 100%; max-width: 560px; display: grid; gap: 10px;
  align-self: start; height: 100%; grid-template-rows: auto 1fr; }
.gloghead { display: flex; align-items: end; justify-content: space-between; gap: 12px;
  padding-bottom: 9px; border-bottom: 1px solid var(--beige-08); }
.gloghead h2 { margin: 3px 0 0; font: 400 20px/1.3 var(--serif); }
.gloghead span { color: var(--beige-40); font: 500 10px/1 var(--mono); letter-spacing: .08em; }
/* ⚠️ 一天可能有很多筆，螢幕高度是固定的 —— 讓內容自己捲，不要把殼撐開。 */
.glogbody { overflow-y: auto; padding-right: 4px; }
.glogbody .gentry { position: relative; padding: 11px 0 11px 0; }
/* 兩顆動作靠右上。複製明顯、刪除安靜 —— 權重差別就是提醒你哪一個可以隨便按。 */
.gacts { position: absolute; top: 7px; right: 0; display: flex; align-items: center; gap: 4px; }
.gcopy {
  padding: 3px 9px; color: var(--salmon); background: transparent; cursor: pointer;
  border: 1px solid var(--salmon-30); border-radius: 0;
  font: 500 10px/1.5 var(--mono); letter-spacing: .08em;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
/* 編輯跟複製同一個量級 —— 兩個都是「可以隨便按」的動作。
   只有刪除保持淡的，因為它救不回來。 */
.gedit {
  padding: 3px 9px; color: var(--beige-70); background: transparent; cursor: pointer;
  border: 1px solid var(--beige-18); border-radius: 0;
  font: 500 10px/1.5 var(--mono); letter-spacing: .08em;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.gedit:hover { color: var(--beige); border-color: var(--beige-40); }
.gedit:focus-visible { outline: 2px solid var(--salmon); outline-offset: 2px; }
.gcopy:hover { color: var(--navy); background: var(--salmon); border-color: var(--salmon); }
.gcopy:focus-visible { outline: 2px solid var(--salmon); outline-offset: 2px; }
.gcopy.is-ok { color: var(--navy); background: var(--salmon); border-color: var(--salmon); }
/* 刪除鈕：平常很淡，滑到那一筆才清楚 —— 不可逆的動作不該一直在招手。 */
.gdel { width: 24px; height: 24px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--beige-40); background: none; border: 0;
  opacity: .45; transition: opacity .18s var(--ease), color .18s var(--ease); }
.gentry:hover .gdel, .gdel:focus-visible { opacity: 1; }
.gdel:hover { color: var(--salmon); }
.gdel[disabled] { opacity: .25; cursor: default; }
.gdel svg { width: 15px; height: 15px; }
/* ⚠️ **`.gy` 的配色只寫一次。** 原本 `.gkico .gy` 與 `.gdel .gy` 各寫一份，
   而日曆格子裡的 `.gmark .gy` **誰都沒寫到** —— 那些圖案就吃瀏覽器預設的
   黑色實心，在深藍底上看起來像一坨黑影（2026-09-19 使用者回報）。
   同一個東西寫在兩個地方，第三個地方就會被漏掉。 */
.gy { fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

/* ═══ 日期欄位的原生日曆圖示 ═══════════════════════════════
   ⚠️ `<input type="date">` 右邊那顆是**瀏覽器自己畫的**，預設是深色的 ——
   在深藍底上就是一坨黑影（使用者 2026-09-19：「日曆的圖案變黑影了」）。
   它不在任何一個 class 底下，所以查 .gy 怎麼查都是正常的。
   `invert(1)` 把它翻成白的，再壓透明度讓它退到該有的層級。 */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .34; cursor: pointer;
  transition: opacity .18s var(--ease);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: .7; }
/* ⚠️ 米白紙上不能翻 —— 那裡本來就是深色圖示配淺底，翻了會變成白的看不見。 */
.paper input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .5; }
.gy.pk, .gy.tr { fill: currentColor; stroke: none; }
/* 手機沒有 hover，直接給到看得見但不搶戲的程度。 */
@media (pointer: coarse) { .gdel { opacity: .7; } }
.glogbody .gentry:first-child { padding-top: 2px; }

/* ── 填寫：表單長得像螢幕上的輸入行，不是貼上去的網頁表單 ──
   標籤走等寬字、小寫距，欄位只有一條底線，游標所在的那一行亮起來。 */
/* ⚠️ `position: relative` ＋ z-index 是**必要的**，不是裝飾。
   `.gsky` / `.gport` / `.gveil` 都是定位元素，而定位元素一律畫在未定位元素之上 ——
   表單不提 z-index 的話會被暗幕整個蓋住（同規則見 .bpcfigure 那段）。 */
/* ⚠️ **整份表單共用一套格線。** 原本標題、每一列標籤、按鈕列各自是獨立的盒子，
   於是左邊出現兩條互相競爭的對齊線（標題貼最左、輸入框卻從 76px 才開始）。
   改成一個 grid，標籤掛在左欄、內容全部對齊右欄 —— 一條主線，規格表的讀法。
   ⚠️ `display: contents` 讓 <label> 的兩個子元素**直接變成 grid 項目**，
   而 label 的「點文字聚焦輸入框」照常有效。 */
.gscreen .gcalform { position: relative; z-index: 2;
  width: 100%; max-width: 520px; margin: 0; padding: 0;
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 14px; row-gap: 13px; align-items: start;
  background: none; border: 0; }
/* ⚠️ **這裡不要用襯線體。** 整塊 HUD 的聲音是等寬與無襯線（狀態列、欄位標籤、
   三顆鍵都是），中間插一個襯線標題就像換了一份文件（使用者 2026-09-19：
   「字型感覺不太搭」）。而且狀態列已經說了 NEW RECORD ——
   這一行講的是「哪一種紀錄」，是模式名不是標題，收斂一點才對。 */
.gscreen .gcalform h2 { grid-column: 2; margin: 0 0 3px;
  font: 500 15px/1.3 var(--sans); letter-spacing: .05em; color: var(--beige); }
.gscreen .gcalform > label { display: contents; }
.gscreen .gcalform > label > span {
  grid-column: 1; padding-top: 7px; color: var(--beige-40);
  /* 中文不需要 uppercase，字距也不能照英文那樣拉 —— .18em 會把兩個字拆散。 */
  font: 500 9.5px/1 var(--mono); letter-spacing: .08em;
}
.gscreen .gcalform > label > input,
.gscreen .gcalform > label > textarea { grid-column: 2; }
/* 編輯時的類別切換：三顆小膠囊，跟下面的欄位同一條格線。 */
.gscreen .gcalform > .gkindrow { display: contents; }
.gscreen .gcalform > .gkindrow > span { grid-column: 1; padding-top: 9px; color: var(--beige-40);
  font: 500 9.5px/1 var(--mono); letter-spacing: .08em; }
.gscreen .gcalform > .gkindrow > span::before { content: '▸ '; color: var(--salmon); opacity: .55; }
.gkindpick { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.gkindpick label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--beige-18); border-radius: 30px; color: var(--beige-70); font-size: 12px;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.gkindpick label:hover { border-color: var(--beige-40); color: var(--beige); }
.gscreen .gcalform .gkindpick input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.gkindpick i { display: inline-grid; width: 14px; height: 14px; }
.gkindpick i svg { width: 100%; height: 100%; }
.gkindpick label:has(input:checked) { color: var(--navy); background: var(--salmon); border-color: var(--salmon); }
.gkindpick label:has(input:focus-visible) { outline: 1px solid var(--salmon); outline-offset: 2px; }
/* 前面那個小三角是提示符，讓每一行看起來像在等你輸入。 */
.gscreen .gcalform > label > span::before { content: '▸ '; color: var(--salmon); opacity: .55; }
.gscreen .gcalform input, .gscreen .gcalform textarea {
  padding: 6px 2px; color: var(--beige); background: transparent;
  border: 0; border-bottom: 1px solid var(--beige-18); font-size: 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.gscreen .gcalform input::placeholder, .gscreen .gcalform textarea::placeholder {
  color: var(--beige-40); opacity: .55;
}
.gscreen .gcalform input:focus, .gscreen .gcalform textarea:focus {
  outline: none; border-bottom-color: var(--salmon);
  box-shadow: 0 1px 0 0 var(--salmon), 0 6px 14px -10px var(--salmon);
}
/* 標題是這一筆紀錄的門面，給它大一級；紀錄是正文，行距要鬆。 */
.gscreen .gcalform input[name="title"] { font-size: 15px; }
.gscreen .gcalform textarea[name="outcome"] { height: 96px; min-height: 0; resize: none;
  font-size: 13.5px; line-height: 1.9; }
.gscreen .gcalform > div { grid-column: 2; display: flex; justify-content: end; gap: 8px; margin-top: 3px; }
/* HUD 的控制項都收小了，按鈕跟著收 —— 不然它會變成整塊面板最重的東西。 */
.gscreen .gcalform .btn { padding: 8px 16px; font-size: 12.5px; }

@media (max-width: 620px) {
  /* ⚠️ 手機的表單是上下堆疊的，比桌機高。閒置高度要跟著改，
     不然按一下按鈕，螢幕長高、按鈕被推下去 213px —— 手指剛按完的地方就跑掉了。 */
  .gscreenin { min-height: 416px; padding: 14px 13px; }
  /* 手機單欄：標籤改成掛在輸入框正上方。 */
  .gscreen .gcalform { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
  .gscreen .gcalform h2, .gscreen .gcalform > label > span,
  .gscreen .gcalform > label > input, .gscreen .gcalform > label > textarea,
  .gscreen .gcalform > div { grid-column: 1; }
  .gscreen .gcalform > .gkindrow > span, .gkindpick { grid-column: 1; }
  .gscreen .gcalform > label > span { padding-top: 9px; }
  .gscreen .gcalform h2 { margin: 0 0 6px; font-size: 16px; }
  .gscreen .gcalform textarea[name="outcome"] { height: 92px; }
  .gscreen .gcalform > div { margin-top: 12px; }
  .gshipart { width: min(300px, 92%); }
  .gidles { font-size: 11px; }
}

/* ⚠️ 這一塊沿用**任務面板（.taskpanel）已經建立的科技語彙** ——
   切角、細網格、四角 L 型括號、掃描線。不要另外發明一套：
   同一個產品裡兩套「科技感」看起來只會像沒對齊。 */
.gcalendar {
  position: relative; overflow: hidden;
  background-color: rgba(19, 27, 46, .91);
  background-image:
    linear-gradient(rgba(232, 228, 220, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 228, 220, .025) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  border: 1px solid var(--beige-18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28), inset 0 1px 0 var(--beige-08);
}
/* ── 讀數區 ── */
.ghud { position: relative; z-index: 1; padding: 20px 22px 14px;
  border-bottom: 1px solid var(--beige-18); }
.ghudtop { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ghudtag { margin: 0; font: 500 9.5px/1 var(--mono); letter-spacing: .24em;
  text-transform: uppercase; color: var(--beige); opacity: .44; }
.ghudday { margin: 0; display: flex; align-items: baseline; gap: 7px;
  color: var(--beige-70); font: 500 10px/1 var(--mono); letter-spacing: .08em; }
/* 26 → 17px（使用者 2026-09-19：「90/90 太大了，降低質感」）。
   它是一個讀數不是標題 —— 大到跟標題一樣重，整塊 HUD 就變成廣告看板。 */
.ghudday b { color: var(--salmon); font-size: 17px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ⚠️ 13 格 = 13 週。連續長條只看得出模糊比例，有刻度才看得出走到第幾週。 */
.ghudbar { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; margin: 13px 0 12px; }
.ghudbar i { height: 3px; background: var(--beige-08); }
.ghudbar i.on { background: var(--salmon); box-shadow: 0 0 6px rgba(232, 168, 152, .45); }

.ghudcounts { display: flex; align-items: center; gap: 18px; }
.gcount, .ghudtotal { display: inline-flex; align-items: center; gap: 6px;
  color: var(--beige-40); font: 500 9px/1 var(--mono); letter-spacing: .1em; }
.gcount b, .ghudtotal b { color: var(--beige-70); font-size: 14px;
  font-variant-numeric: tabular-nums; }
.gcount.has b { color: var(--beige); }
.gcount .gmark { width: 14px; height: 14px; opacity: .55; }
.gcount.has .gmark { opacity: 1; }
.gcount s, .ghudtotal s { text-decoration: none; }
.ghudtotal { margin-left: auto; }

/* 控制列收在日曆的右下角（使用者：整合在一起、移到右下角）。 */
.gcalendar .gcaltools { margin: 0; padding: 0; border: 0; gap: 9px;
  align-items: end; justify-content: end; }
.gcalendar .gexport { margin-left: 0; }

/* ── 網格 ── */
.gweekdays, .gdays { position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gweekdays { border-bottom: 1px solid var(--beige-18); }
.gweekdays span { padding: 8px 4px; text-align: center; color: var(--beige-70);
  font: 500 9px/1 var(--mono); letter-spacing: .12em; }

.gblank { min-height: 62px; border-right: 1px solid var(--beige-08); border-bottom: 1px solid var(--beige-08);
  background: rgba(19,27,46,.3); }
.gday { position: relative; min-height: 62px; padding: 7px 8px; display: block;
  color: var(--beige); background: transparent;
  border: 0; border-right: 1px solid var(--beige-08); border-bottom: 1px solid var(--beige-08);
  cursor: pointer; text-align: left; overflow: hidden; }
.gday:hover { background: var(--navy-lift2); }
.gday:focus-visible { z-index: 2; outline: 2px solid var(--salmon); outline-offset: -2px; }

/* 日期永遠在左上、永遠同樣大小 —— 有沒有紀錄都不換版面。 */
.gdayn { display: block; color: var(--beige-40);
  font: 500 10px/1 var(--mono); font-variant-numeric: tabular-nums; }
.gdayn .dt { display: none; }
.gdays.mode-date .gdayn .n { display: none; }
.gdays.mode-date .gdayn .dt { display: inline; }

/* 紀錄：整格唯一的亮點。 */
.gmarks { position: absolute; inset: auto 6px 7px 7px; display: flex; align-items: center; gap: 4px; }
.gmark { display: grid; place-items: center; width: 17px; height: 17px; color: var(--salmon); }
.gmore { color: var(--salmon); font: 500 9px/1 var(--mono); }

/* ⚠️ 有紀錄的格子**不變色**（使用者 2026-09-18：「不會因為有填入東西而發亮」）。
   底色一亮，整片日曆就會被切成一塊一塊的斑駁；差別交給圖案自己講就好。 */
.gday.is-today { box-shadow: inset 0 0 0 1px var(--salmon-30); }
.gday.is-today .gdayn { color: var(--salmon); }
.gday.is-selected { background: var(--salmon-12); box-shadow: inset 0 0 0 1px var(--salmon); }
.gday.is-selected .gdayn { color: var(--beige); }
/* 未來要淡掉但不能消失 —— 它還是可以點（教練會先排日期）。 */
.gday.is-future { background: transparent; }
.gday.is-future .gdayn { color: rgba(232, 228, 220, .22); }

.gcalfoot { position: relative; z-index: 1; display: flex; align-items: end;
  justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 11px 22px 13px; border-top: 1px solid var(--beige-08); }
.gcallegend { display: flex; gap: 16px; flex-wrap: wrap;
  color: var(--beige-40); font: 400 10px/1.5 var(--mono); }
.gcallegend span { display: inline-flex; align-items: center; gap: 7px; }
.gentry { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 16px 0;
  border-top: 1px solid var(--beige-08); }
.gentryicon { width: 30px; height: 30px; margin-top: 3px; }
.gentry p { margin: 0 0 5px; color: var(--salmon); font: 500 9px/1 var(--mono); letter-spacing: .1em; }
.gentry h3 { margin: 0; font: 700 17px/1.45 var(--serif); }
.gentry div div { margin-top: 7px; color: var(--beige-70); font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.gentry small { display: block; margin-top: 7px; color: var(--beige-40); font-size: 11px; line-height: 1.7; white-space: pre-wrap; }
.gcalform { margin: 22px 0 8px; padding: 20px; background: var(--navy-lift);
  border: 1px solid var(--salmon); }
.gcalform h2 { margin: 5px 0 18px; font: 700 24px/1.2 var(--serif); }
.gcalform > label { display: grid; grid-template-columns: 110px 1fr; align-items: start; gap: 12px;
  margin: 11px 0; color: var(--beige-70); font-size: 12px; }
.gcalform input, .gcalform textarea { width: 100%; padding: 10px 11px; color: var(--beige);
  background: var(--navy); border: 1px solid var(--beige-18); font-family: var(--sans); }
.gcalform input:focus, .gcalform textarea:focus { outline: none; border-color: var(--salmon); }
.gcalform > div { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
@media (max-width: 620px) {
  .gcaltools { align-items: stretch; }
  .gstart { flex: 1 1 100%; }
  .gexport { margin-left: 0; }
  .ghud { padding: 15px 14px 11px; }
  .ghudday b { font-size: 20px; }
  .ghudcounts { gap: 11px; }
  .gblank, .gday { min-height: 48px; }
  .gday { padding: 5px; }
  .gdayn { font-size: 9px; }
  .gmarks { inset: auto 4px 5px 5px; gap: 3px; }
  .gmark { width: 14px; height: 14px; }
  .gcalform > label { grid-template-columns: 1fr; gap: 6px; }
}
/* ═══ 星等（逐條報告與表單沿用；能力圖／藍圖改用菱形）═══ */
.stars { font-size: 15px; letter-spacing: .12em; color: var(--salmon); line-height: 1; }
.stars.big { display: block; font-size: 20px; letter-spacing: .1em; }
.paper .stars { color: var(--salmon-ink); }
/* 事件卡裡的評分 */
.evst { margin: 10px 0 0; display: grid; gap: 3px; }
.evst p { display: flex; align-items: baseline; gap: 9px; margin: 0; font-size: 12px; }
.evst s { text-decoration: none; opacity: .5; min-width: 62px; }
.evst b { color: var(--salmon); letter-spacing: .1em; font-weight: 400; }
/* 教練打分的星等選擇器 */
.starpick { display: flex; gap: 1px; }
.sp {
  background: none; border: 0; cursor: pointer; padding: 2px 1px;
  font-size: 16px; line-height: 1; color: var(--beige-18); transition: color .15s, transform .15s;
}
.sp.on { color: var(--salmon); }
.sp:hover { transform: scale(1.2); }
/* ═══ 成果卡：outcome 是主體，標題退到上面一行 ═══════════════ */
/* 紀錄區的類型選擇（含總筆數）。圖上已經沒有篩選了，回看是在這裡選。 */
.rkind { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 18px; }
.rk {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 11.5px; color: var(--beige-70);
  background: none; border: 1px solid var(--beige-18); border-radius: 30px;
  padding: 6px 13px; cursor: pointer; transition: all .2s;
}
.rk:hover { border-color: var(--beige-40); }
.rk.on { background: var(--salmon); border-color: var(--salmon); color: var(--navy); font-weight: 500; }
.rk b { font-size: 10.5px; opacity: .55; }
.rk.on b { opacity: .7; }
.gpanel { margin-top: 8px; }
.evt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; opacity: .45; margin: 0 0 6px; }
.evo { font-size: 16.5px; line-height: 1.75; font-family: var(--serif); font-weight: 700; }
.evc.cmp .evo { font-size: 15px; }
/* ═══ 課程藍圖：攤開的書 ═══════════════════════════════
   從 coach_portal/site/console.html 的版型實驗搬進來的。設計判斷寫在那裡，
   這裡只留會影響改動的那幾條：

   · **兩頁同一套材質，由同一個函式 panelArt() 產生**，只差缺角在外側哪一邊
     （左頁左上、右頁右上，鏡像對稱）。材質一致不是靠手動對數值，是靠共用程式碼。
   · SVG 用 preserveAspectRatio="none" ＋ vector-effect="non-scaling-stroke"，
     所以頁面尺寸變了**線寬不會被拉粗**。
   · 幾何：左頁 354 ＋ 書溝 22 ＋ 右頁 424 ＋ 左右邊界各 40 = 880（同 --maxw），兩頁同高 600。
     ⚠️ 之前砍過跨頁，理由是「880 之下每頁只剩 200 出頭」——那個結論的前提是
     **兩頁等寬**。這裡是**不等寬**：左頁窄（清單）、右頁寬（內容），所以成立。
   · 左頁兩層（目錄 → 小任務）**一次全部渲染，切層只切 class** ——
     重建會讓捲動歸零、動畫重播，使用者會讀成整頁重載。
   · 書溝是刻度軸不是漸層陰影：漸層在宣告光源，刻度只是介面。
   · ⚠️ 這一區的底是 navy-lift（比深藍亮），所有 alpha 都是**對它**反解的，
     不能從深藍區直接搬數值。 */
/* ⚠️ **書不能有自己的外框。** 原本它有底色、邊框與鮭粉折角，
   那是版型實驗頁的「控制台」身份 —— 放進網頁之後就變成**嵌在頁面上的一個小工具**。
   移除之後兩頁直接落在頁面的深藍底上，跟上下文同一個平面。 */
.bkspread { max-width: var(--maxw); margin: 30px auto 10px; padding: 0 var(--pad); }
.bkbody {
  position: relative; display: grid; grid-template-columns: 354px 22px 424px;
  justify-content: center;
}
.pg { position: relative; height: 600px; }
.pgart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* ⚠️ 規則 8 是「不加第五色、不做霓虹」。這裡的發光是刻意的偏離，
   但守住實質那一半：**光只有鮭粉與米白兩色**。霓虹的問題是引進新色相，不是亮度。 */
.pgpanel { fill: var(--navy-lift); stroke: var(--beige-40); stroke-width: 1.4;
  filter: drop-shadow(0 0 9px rgba(232, 168, 152, .22)); }
.pgcrop { fill: none; stroke: var(--salmon); stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(232, 168, 152, .7)); }
.pgbar { fill: var(--salmon); filter: drop-shadow(0 0 7px rgba(232, 168, 152, .85));
  animation: bkbreath 3.2s ease-in-out infinite; }
@keyframes bkbreath { 0%, 100% { opacity: .6 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .pgbar { animation: none; opacity: .9 } }
.bkgutter {
  height: 600px;
  background: repeating-linear-gradient(180deg,
    var(--beige-18) 0 1px, transparent 1px 26px) center / 9px 100% no-repeat;
}
/* ── 左頁 ─────────────────────────────────────────── */
.pgin { position: absolute; inset: 0; padding: 26px 22px; overflow-y: auto; }
.pgin.is-scroll { mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); }
.blv { display: none; }
.blv.is-on { display: block; }
.blvh { margin: 0 0 18px; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--salmon); }
.blvh s { text-decoration: none; opacity: .72; margin-left: 8px; }
.bmk, .btask, .blvback {
  position: relative; display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; padding-left: 16px;
}
.bmk:focus-visible, .btask:focus-visible, .blvback:focus-visible {
  outline: 2px solid var(--salmon); outline-offset: 2px;
}
/* 書籤的舌。伸到頁面的內距裡，所以看起來是「夾在頁緣」的 */
.bmk::before, .btask::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--beige-18);
}
.bmk:hover::before, .btask:hover::before { background: var(--beige-40); }
/* 第一層＝五個大主題，用規則線切成五格；第二層拿掉線（見下） */
.bmk { border-bottom: 1px solid var(--beige-08); padding-top: 17px; padding-bottom: 17px; }
.bmk:last-of-type { border-bottom: 0; }
.bmk b { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.bmk s { text-decoration: none; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; opacity: .58; margin-right: auto; }
.bmk em { font-style: normal; font-size: 11.5px; opacity: .58; }
.bmk u { flex: none; text-decoration: none; width: 6px; height: 6px; align-self: center;
  border-right: 1.5px solid var(--beige-70); border-bottom: 1.5px solid var(--beige-70);
  transform: rotate(-45deg); }
/* 本期菜單：目錄的第一列。教練排好之後要能一眼看完，不必逐維翻。 */
.bmk-pick { border-bottom-color: var(--beige-18); }
.bmk-pick b { color: var(--salmon); }
.bmk-pick .bpn { font-style: normal; color: var(--salmon); opacity: 1; }
/* 菜單那一層的列：沒有膠囊也沒有鏈（那是「順序」的語彙，菜單講的是「選了哪些」）*/
.btask.bp { padding: 5px 0 5px 16px; }
.btask.bp::before { display: block; background: var(--salmon-30); }
.btask.bp.is-key::before { background: var(--salmon); width: 4px; }
.btask.bp.is-sel .btkr { color: var(--salmon); font-weight: 500; }
.bpnone { font-size: 12.5px; line-height: 1.9; opacity: .58; margin: 6px 0 0; padding-left: 16px; }

/* 目錄頁的頁腳＝藍圖自己的三句格言（真資料）。五個書籤只佔半頁，下面空著會像沒排完。 */
.blvep { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--beige-18); }
.blvep p { margin: 0 0 7px; font-family: var(--serif); font-size: 11.5px;
  line-height: 1.85; opacity: .58; }
.blvep p:last-child { margin-bottom: 0; }
/* 第二層的頁首：眉標 → 標題 → 線（跟右頁同一個構造）。
   ⚠️ 原本維度名 16px 夾在返回鍵與代號中間，那是工具列的解剖，讀起來像副標。 */
.blvback { border-bottom: 0; padding: 0 0 0 16px; margin-bottom: 10px; gap: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--salmon); }
.blvback u { flex: none; text-decoration: none; width: 6px; height: 6px; align-self: center;
  border-left: 1.5px solid var(--salmon); border-bottom: 1.5px solid var(--salmon);
  transform: rotate(45deg); margin-right: 2px; }
.blvhead { padding-left: 16px; margin-bottom: 12px; }
.blvey { margin: 0 0 5px; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--salmon); opacity: .8; }
.blvttl { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 700;
  line-height: 1.35; letter-spacing: .01em; color: var(--beige); }
.blvrule { height: 1px; background: var(--beige-18); margin: 10px 0 0; }
/* O（Objective）是一層 —— 靠字族＋字重＋顏色分層，不靠字級（見 AGENTS 規則 23）*/
.bsub { display: block; margin: 11px 0 2px; font-family: var(--serif);
  font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .01em;
  color: var(--salmon); }
/* ── 第二層＝序列鏈 ───────────────────────────────
   一條連續的線穿過所有膠囊 —— 順序看得出來。
   深／淺交替**不是每隔一個換，是換 O 才換**，所以交替本身就在講分組。
   膠囊是 28×28 的固定槽，序號只是它現在的內容（之後換小圖示不用改幾何）。
   鏈的 x ＝ 內距 16 ＋ 半徑 14 ＝ 30，跟膠囊中心綁在一起。
   第二層不放 id（右頁講過了），也不畫列線（九條一樣的線會讀成資料表）。 */
.bchain { position: relative; }
.bchain::before {
  content: ''; position: absolute; left: 30px; top: 14px; bottom: 14px; width: 2px;
  background: var(--beige-18);
}
.bsub { padding-left: 58px; margin: 7px 0 2px; }
.btask {
  align-items: center; gap: 14px; padding: 1px 0 1px 16px; margin-bottom: 1px;
}
.btask::before { display: none; }              /* 書籤舌換成膠囊，不重複 */
.btno {
  display: flex; flex: none; align-items: center; justify-content: center;
  position: relative; z-index: 1;              /* 壓在鏈上面 */
  width: 28px; height: 28px; border-radius: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--beige);
}
.btask.g-a .btno { background: var(--navy); border: 1px solid rgba(232, 228, 220, .34); }
.btask.g-b .btno { background: rgba(232, 228, 220, .30); border: 1px solid transparent; }
.btkr { display: block; text-decoration: none;
  font-family: var(--sans); font-size: 13px; font-weight: 400; line-height: 1.5; }
.btask.is-sel .btkr { color: var(--salmon); font-weight: 500; }
.btask.is-sel .btno { background: var(--salmon); border-color: var(--salmon);
  color: var(--navy); font-weight: 600; }
/* 已排進書裡：膠囊帶鮭粉邊；再標成重點就填一半 */
.btask.is-pick .btno { border-color: var(--salmon); }
.btask.is-key .btno { background: var(--salmon-30); border-color: var(--salmon); }
.btask.is-key .btkr::after { content: '　★'; font-size: 10px; color: var(--salmon); }
/* ── 右頁 ─────────────────────────────────────────── */
.bkwrap { --bkink: var(--beige); --bkink-75: var(--beige-70);
  --bkink-50: rgba(232, 228, 220, .58); --bkink-22: var(--beige-18);
  --bkacc: var(--salmon); container-type: inline-size; }
/* 換內容時一道鮭粉掃線走一次（規則 8：酷炫感從動態來，不加第五色） */
.bksweep { position: absolute; left: 6%; right: 6%; top: 8%; height: 2px;
  background: var(--salmon); opacity: 0; pointer-events: none; z-index: 3;
  box-shadow: 0 0 12px 3px rgba(232, 168, 152, .6); }
.bksweep.is-run { animation: bksweep .5s ease-out; }
@keyframes bksweep {
  0%   { opacity: .85; transform: translateY(0); }
  100% { opacity: 0;   transform: translateY(1000%); }
}
@media (prefers-reduced-motion: reduce) { .bksweep.is-run { animation: none; } }
/* 文字層用 viewBox 的百分比定位；字級用 cqw，面板縮放時字跟著縮（原生，不寫 JS 量測），
   每個都包 max() 保底。文字塊垂直居中：各條長短差很多，上齊會讓短的空一大片。 */
/* 內距從 14%/11% 收到 10%/9% —— 原本文字區只佔右頁的 72%，內容又只填 48%，
   整頁看起來半空。收窄留白 ＋ 放大字級之後約填到 8 成。 */
.bkpage { position: absolute; left: 10%; right: 10%; top: 9%; bottom: 8%;
  /* ⚠️ 不要用 justify-content:center。置中的話內容只佔一半、上下各留一大塊空白，
     整頁看起來半空 —— 而且放大字級也解決不了（框會跟著變高）。
     改成內容靠上、備註用 margin-top:auto 釘在頁底，版面就自然撐滿。 */
  display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;
  color: var(--bkink); font-family: var(--sans); }
.bkey { margin: 0 0 max(8px, 1.3cqw); font-family: var(--mono);
  font-size: max(10px, 2.5cqw); letter-spacing: .2em; text-transform: uppercase;
  color: var(--bkacc); }
.bktitle { margin: 0; font-family: var(--serif); font-size: max(29px, 8.1cqw);
  font-weight: 700; line-height: 1.25; letter-spacing: .02em; }
.bkrule { height: 1px; background: var(--bkink-22); margin: max(14px, 2.6cqw) 0 max(16px, 3cqw); }
.bkkr { margin: 0; font-size: max(16px, 3.8cqw); line-height: 2.0; color: var(--bkink); }
/* 標籤與值分兩欄，值才會對齊 —— 對齊是最便宜的「有設計過」 */
.bkmeta { margin: max(17px, 3cqw) 0 0; display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: max(12px, 2.2cqw); row-gap: max(5px, .9cqw); align-items: baseline; }
.bkmeta b { font-family: var(--mono); font-size: max(9.5px, 1.9cqw); letter-spacing: .12em;
  color: var(--bkink-50); font-weight: 400; white-space: nowrap; }
.bkmeta span { font-size: max(12px, 2.4cqw); line-height: 1.75; color: var(--bkink-75); }
/* ⚠️ 兩個元素都設 margin-top:auto，flex 的剩餘空間會**平均分給它們** ——
   只設一個的話空白會全部堆在同一處，中間破一個大洞。 */
.bkact { margin: max(18px, 3.2cqw) 0 0; margin-top: auto;
  display: flex; align-items: center; gap: 13px; }
.bkpick { font-family: var(--sans); font-size: max(12px, 2.4cqw);
  background: none; color: var(--salmon); border: 1px solid var(--salmon-30);
  border-radius: 30px; padding: 8px 17px; cursor: pointer; transition: all .18s; }
.bkpick:hover { border-color: var(--salmon); }
.bkpick.on { background: var(--salmon); border-color: var(--salmon); color: var(--navy); font-weight: 600; }
.bkpick.key { border-style: dashed; }
.bkpick.key.on { border-style: solid; }
.bkstate { display: flex; align-items: center; gap: max(7px, 1.3cqw);
  font-size: max(11.5px, 2.4cqw); color: var(--bkink-75); }
.bkstate i { flex: none; width: max(7px, 1.25cqw); height: max(7px, 1.25cqw);
  border-radius: 50%; border: 1px solid var(--bkink-50); }
.bkstate.is-done i { background: var(--bkacc); border-color: var(--bkacc); }
.bknote { margin: max(24px, 4.4cqw) 0 0; margin-top: auto; padding-top: max(12px, 2.2cqw);
  border-top: 1px solid var(--bkink-22);
  font-size: max(11.5px, 2.4cqw); line-height: 1.9; color: var(--bkink-75); }
.bkfol { position: absolute; right: 13%; bottom: 5.5%; font-family: var(--mono);
  font-size: max(8px, 1.5cqw); letter-spacing: .16em; color: var(--bkink-50);
  font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  /* 窄螢幕沒有跨頁：兩頁上下疊、書溝收掉、SVG 材質也收掉
     （354×600 的 viewBox 拉到手機寬度會把缺角與格線拉歪），退成兩個自然高度的框。 */
  .bkspread { margin: 24px 0 6px; }
  .bkbody { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .bkgutter { display: none; }
  .pg { height: auto; background: var(--navy-lift);
        border: 1px solid var(--beige-40); border-radius: 3px; }
  .pgart { display: none; }
  .pgin { position: static; padding: 20px 16px; overflow: visible; }
  .pgin.is-scroll { mask-image: none; }
  .bkwrap { container-type: normal; padding: 20px 16px; }
  .bkpage { position: static; overflow: visible; }
  .bkfol { position: static; align-self: flex-end; margin-top: 14px; font-size: 9px; }
  .bkey { font-size: 9px; }
  .bktitle { font-size: 23px; }
  .bkkr { font-size: 13.5px; }
  .bkmeta span, .bkstate, .bknote, .bkpick { font-size: 12.5px; }
  .bkpick { padding: 12px 18px; }        /* 觸控目標 ≥44px */
  .bkmeta b { font-size: 9px; }
  .bkstate i { width: 8px; height: 8px; }
  .bmk { padding-top: 19px; padding-bottom: 19px; }   /* 觸控目標 ≥44px */
  .btask { padding-top: 11px; padding-bottom: 11px; }   /* 22px 字高 ＋ 22 內距 = 44 觸控目標 */
}
/* ═══ 課程藍圖：總覽（教練設定任務）═════════════════════
   平常一列有「當前任務」與「完成」；按管理按鈕後才切成「隱藏任務」。
   所有任務預設可見，S.hidden 只記錄個別學員不需要的項目。
   ⚠️ 勾選**不重建整頁**（見 bindOkr），避免連續設定時失去捲動位置。 */
.edt { font-size: 13px; }
.edth {
  position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 2;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 9px 0; margin-bottom: 6px;
  background: var(--navy); border-bottom: 1px solid var(--beige-18);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; opacity: .8;
}
.edth b { color: var(--salmon); font-size: 12px; margin-left: 3px; }
.edtmode {
  margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: var(--beige-70); background: none; border: 1px solid var(--beige-18);
  border-radius: 30px; padding: 4px 11px; cursor: pointer;
}
.edtmode:hover { border-color: var(--salmon); color: var(--salmon); }
.edt.is-hide-mode .edtmode { color: var(--navy); background: var(--salmon); border-color: var(--salmon); }
.edtmodehint { display: none; color: var(--salmon); letter-spacing: .04em; }
.edt.is-hide-mode .edtmodehint { display: inline; }
.edtworkhint { color: var(--beige-70); letter-spacing: .04em; }
.edt.is-hide-mode .edtworkhint { display: none; }
.edt:not(.is-hide-mode) .edtr.is-hidden,
.edt:not(.is-hide-mode) .edtgrp.is-all-hidden,
.edt:not(.is-hide-mode) .edtdim.is-all-hidden { display: none; }
.edtdim, .edtgrp { display: block; }
/* 維度：一行，不留白 */
.edtd {
  display: flex; align-items: baseline; gap: 9px; margin: 16px 0 2px;
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--salmon);
}
.edtd s { text-decoration: none; font-family: var(--mono); font-size: 9.5px;
  font-weight: 400; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
/* O：更小一階，同樣不留白 */
.edto { margin: 7px 0 1px; font-family: var(--serif); font-size: 12.5px;
  font-weight: 700; color: var(--salmon); opacity: .78; }
/* 一列 KR：26px 高，滑過整列反白 */
.edtr {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 4px; border-radius: 2px;
  line-height: 1.45;
}
.edtr:hover { background: var(--beige-08); }
.edtr input { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--salmon); cursor: pointer; }
.edtcheck { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 7px;
  border: 1px solid var(--beige-18); color: var(--beige-70); cursor: pointer;
  font-family: var(--mono); font-size: 9px; letter-spacing: .05em; }
.edtcheck input { position: absolute; opacity: 0; pointer-events: none; }
.nowcheck { border-radius: 30px; }
/* 當前任務的順序號：膠囊裡的小圓。 */
.nowcheck .edtno { display: inline-grid; place-items: center; min-width: 15px; height: 15px; margin-left: 5px;
  padding: 0 4px; border-radius: 8px; font: 700 9px/1 var(--mono); font-style: normal;
  color: var(--salmon); background: var(--navy); }
.donecheck { border-radius: 2px; border-style: dashed; }
.nowcheck:has(input:checked) { color: var(--navy); background: var(--salmon); border-color: var(--salmon); }
.donecheck:has(input:checked) { color: var(--beige); background: var(--beige-08); border-color: var(--beige-40);
  border-style: solid; text-decoration: line-through; }
.edtcheck:has(input:disabled) { opacity: .28; cursor: not-allowed; }
.edtr input.hide { display: none; }
.edt.is-hide-mode .edtr .edtcheck { display: none; }
.edt.is-hide-mode .edtr input.hide { display: block; }
.edtr input:disabled { cursor: not-allowed; opacity: .22; }
.edtr b { flex: 1; font-weight: 400; opacity: .8; }
.edtr i { flex: none; font-style: normal; font-size: 11px; color: var(--salmon); opacity: .7; }
.edtr .edthidden {
  display: none; flex: none; font-style: normal; font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .08em; color: var(--beige-70);
  border: 1px solid var(--beige-18); border-radius: 2px; padding: 1px 5px;
}
.edtr .edtdone {
  display: none; flex: none; font-style: normal; font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .08em; color: var(--navy);
  background: var(--salmon); border-radius: 2px; padding: 1px 5px;
}
.edtr s { flex: none; text-decoration: none; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .08em; opacity: .32; width: 34px; text-align: right; }
.edtr.is-current {
  background: var(--salmon-12);
  box-shadow: inset 2px 0 0 var(--salmon);
}
.edtr.is-current b { color: var(--beige); font-weight: 500; }
.edtr.is-done b { opacity: .46; }
.edtr.is-done .edtdone { display: inline-block; }
.edtr.is-hidden b { opacity: .32; }
.edtr.is-hidden s { opacity: .2; }
.edtr.is-hidden .edthidden { display: inline-block; }
@media (max-width: 900px) {
  /* 手機也不放寬 —— 這一頁的目的就是密。只把勾選框撐到能點。 */
  .edth { top: calc(48px + env(safe-area-inset-top)); }
  .edtr { padding: 6px 4px; }
  .edtcheck { min-height: 32px; padding-inline: 9px; }
  .edtr input.hide { width: 18px; height: 18px; }
}

/* O 與 KR 同樣大小、同樣顏色 —— 靠上面那個小標籤區分，不靠字級。 */
.bpclabel {
  grid-column: 1; margin-top: 9px; color: var(--salmon); opacity: .7;
  font: 500 8px/1 var(--mono); letter-spacing: .14em;
}
.bpcgoal, .bpctask strong {
  grid-column: 1; margin-top: 3px; font-family: var(--serif); font-size: 14px;
  line-height: 1.45; font-weight: 700; color: var(--beige);
}
/* 這一格放「屬於哪個能力」。是分類，所以做成標籤而不是內文。 */
.bpctaskstate { grid-column: 1; width: max-content; margin-top: 7px; padding: 3px 7px;
  color: var(--beige-70); border: 1px solid var(--beige-18); font: 500 9px/1.3 var(--mono);
  letter-spacing: .12em; }
.bpctask.has-task .bpctaskstate { color: var(--navy); background: var(--salmon); border-color: var(--salmon); }
.bpctask small { grid-column: 1; display: block; margin-top: 7px; color: var(--beige-70);
  font: 400 10.5px/1.45 var(--sans); }
/* 卡片裡第一個標籤不用再推開 —— 上面已經有「當前任務」那一塊了。 */
.bpctaskstate + .bpclabel { margin-top: 10px; }

/* 藍圖與任務合併後，人物固定在左、任務牌組固定在右。
   牌組高度不隨任務數量改變；超出範圍只捲動卡片，不拉長整頁。 */
.bpctasklayout {
  /* 人物與任務卡**共用這一個高度** —— 一個數字，兩邊一起動。
     `540px` 是上限（視窗再高也不會更大）；矮視窗就扣掉上面的標題區與
     下面浮動導覽列該留的空間，讓主視覺**整個進得了第一屏**（使用者 2026-09-19）。
     258 ＝ 標題區約 186 ＋ 導覽列約 72。任務卡本來就有內部捲動，變矮只是少顯示一張。
     ⚠️ 上限從 540 拉到 600：「Current Missions」那行拿掉之後，人物頭頂已經貼著
     「任務／總覽」切換鈕的下緣，多出來的空間就還給人物（使用者 2026-09-19）。 */
  /* 高螢幕不能一路放大到 620px：人物＋雷達會吃滿整頁，能力卡也容易貼到標題線。
     520px 保留一般筆電原本的比例，只收住高解析度／直向大視窗的上限。 */
  --bpch: clamp(340px, 100vh - 274px, 504px);
  /* ⚠️ `position: relative` 是給 `.figdims` 用的 —— 星星要對齊**人物那一格**的上緣。
     沒有它的話 offsetParent 會變成 `.bpcover`，`top` 就得自己去湊差值。 */
  position: relative;
  /* 卡片收窄：內容是兩行短句，撐 380px 右半邊一直是空的（使用者 2026-09-19）。
     兩欄各自靠邊，中間的空隙自己長出來。 */
  /* ⚠️ `gap: 0` 是刻意的。人物要**置中在星號右緣與卡片左緣之間**，
     中間留一道格線間距的話，那道間距就會把置中點往左偏半個 gap。
     間隔改由人物自己的左內距負責 —— 一個數字管到底。 */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 292px);
  align-items: center; gap: 0; min-height: 0;
}
.bpcradar {
  grid-column: 1; grid-row: 1; align-self: center; justify-self: center;
  position: relative; z-index: 1; width: min(100%, 520px); min-width: 0;
  transform: translateY(-10px);
}
.bpcradar .radar { width: 100%; max-width: none; }
.bpcradar .radar .lb { font-size: 9.8px; letter-spacing: .01em; }
.bpcradar .radar .lv { font-size: 6.2px; letter-spacing: .07em; }
/* 點能力名稱 → 顯示教練在評測裡寫的那一維說明（使用者 2026-09-24 要求補回）。
   ⚠️ 之前這裡是 display:none，點了只會亮人物、看不到評語。 */
.bpcradar .rcmt { inset: 14% 12%; padding: 18px 20px; z-index: 3; overflow-y: auto; }
.bpcradar .rcmt b { font-size: 17px; }
.bpcradar .rcmt p { margin-top: 9px; font-size: 12.5px; line-height: 1.9; }
/* 人物跟雷達同一格、疊在雷達上面 —— 評語打開時整塊雷達要浮到人物之上，不然線條會壓在字上。 */
.bpcradar:has(.rcmt.on) { z-index: 6; }
.bpcradar .rcmt { background: rgba(19, 27, 46, .9); box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  backdrop-filter: blur(18px) saturate(110%); -webkit-backdrop-filter: blur(18px) saturate(110%); }
/* ↑ 留一點透明比較有質感，但模糊要夠重：後面的雷達線讀不出來，才不會干擾閱讀。 */
.bpcradar .rcmt p:empty::before { content: '教練還沒寫這一項的說明。'; opacity: .6; }
.bpcover-task .bpcfigure {
  /* ⚠️ 不要 `width: 100%` —— 它跟下面的 margin-left 一起會讓框**溢出格線**
     （524 寬的框從 353 開始，右緣 877，蓋到卡片底下）。讓它自己吃滿剩下的寬度。 */
  grid-column: 1; grid-row: 1; justify-self: stretch; min-height: var(--bpch);
  /* ⚠️ 人物要**置中在星號與任務卡之間**（使用者 2026-09-19）。
     星號是絕對定位、不佔格線的寬度，所以左邊讓開一段**跟星號一樣寬**的距離，
     置中的基準就從「整欄」變成「星號右緣到卡片左緣」。

     ⚠️ **一定要用 margin 不能用 padding。** 人物身上疊著兩層絕對定位的特效
     （`.fxnet` 生活圈網絡、`.fxheart` 心臟），它們對齊的是這個框的**外緣**。
     用 padding 的話只有人物往右跑，特效留在原地 —— 差了 53px，看起來就是
     「背景跑掉了」（2026-09-19 使用者回報）。margin 是整個框一起移動。 */
  margin-left: 0; top: 12px; z-index: 2; pointer-events: none;
}
/* ⚠️ **人物是直式的**（原圖 242×698），所以決定它多大的是 `max-height`，不是寬度。
   只加寬欄位或放寬 `width` 完全沒有用 —— `object-fit: contain` 會把圖嵌在
   高度算出來的框裡，多出來的寬度全變成空白（2026-09-19 踩過一次）。
   寬度給 auto，框就貼著人物，不會在左邊留一段死空間。
   只動任務檢視，總覽那張維持原樣。 */
.bpcover-task .bpcfigure img { width: auto; max-width: 100%; max-height: calc(var(--bpch) * .89); }
.bpcover-task .bpcfigure.has-radar .fxfill { opacity: 1; }
.bpcover-task .bpcfigure.has-radar[data-radar-open] .fxfill { opacity: 0; }
.bpcover-task .bpcfigure.has-radar[data-radar-open] .fxradarsoft { opacity: 1; }
.bpcover-task .bpcfigure.has-radar[data-radar-open] .fxbase { opacity: .56; }
.bpc-report {
  grid-column: 2; grid-row: 2; justify-self: start; margin-top: 14px; padding: 8px 0;
  color: var(--salmon); background: none; border: 0; border-bottom: 1px solid var(--salmon-30);
  font: 500 10px/1.3 var(--mono); letter-spacing: .12em; cursor: pointer;
}
.bpc-report:hover { color: var(--white); border-color: var(--salmon); }
/* 人物左上角的能力切換。⚠️ 疊在人物上面，所以要給 z-index ——
   .bpcfigure 裡每一層都是明確排序的，少給一個就會被線稿蓋掉。 */
.figdims {
  /* 13px ＝ 人物那一格的上緣（+8）再加上線稿本身的透明留白（原圖 698px 高的前 11 列，
     換算約 5px）。這樣**第一排星號的上緣就跟頭頂齊平**（使用者 2026-09-19）。 */
  position: absolute; left: 0; top: 13px; z-index: 6;
  display: grid; gap: 2px; width: max-content;
  /* 兩欄由五列**共同**決定：文字對文字、星號對星號。 */
  grid-template-columns: max-content max-content;
}
.figdim {
  /* ⚠️ 這裡的 `max-content max-content` 是**後援**（不支援 subgrid 時用）。
     每個按鈕各自算 max-content 的話，「生活圈」只有 3 個字，
     它的星號就會比其他四列往左 —— 那正是要修的。 */
  grid-column: 1 / -1;
  display: grid; grid-template-columns: max-content max-content; align-items: center; gap: 7px;
  padding: 3px 6px; cursor: pointer; text-align: left;
  color: var(--beige-40); background: rgba(19, 27, 46, .55); border: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.figdim b { font: 500 9px/1.2 var(--mono); letter-spacing: .06em; }
.figdim s { text-decoration: none; font-size: 9px; line-height: 1; letter-spacing: .5px;
  color: var(--salmon); opacity: .55; }
.figdim:hover { color: var(--beige-70); border-color: var(--beige-18); }
.figdim.on { color: var(--beige); border-color: var(--salmon-30); background: rgba(19, 27, 46, .85); }
.figdim.on s { opacity: 1; }
.figdim:focus-visible { outline: 2px solid var(--salmon); outline-offset: 1px; }
/* 五列共用同一組欄寬。文字長度不一樣（生活圈 3 字、其餘 4 字）也對得齊，
   而且之後在 data/dimensions.js 改名也不用回來調數字。 */
@supports (grid-template-columns: subgrid) {
  .figdim { grid-template-columns: subgrid; }
}

@media (max-width: 720px) {
  .figdims { top: 0; gap: 1px; }
  .figdim { padding: 2px 5px; gap: 5px; }
  .figdim b, .figdim s { font-size: 8px; }
}

.bpctaskdeck {
  grid-column: 2; grid-row: 1; align-self: center; min-width: 0; height: var(--bpch);
  /* ⚠️ `align-content: start` —— 少了它，兩列會被擠在中間，頂端多出 47px 空白，
     「目前任務」就不貼著上緣（使用者 2026-09-19 指出）。 */
  display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start;
  border-block: 1px solid var(--beige-18);
}
.bpctaskdeck > header {
  display: flex; align-items: end; justify-content: space-between; gap: 18px;
  padding: 15px 2px 14px; border-bottom: 1px solid var(--beige-18);
}
.bpctaskdeck > header .ey { margin: 0 0 3px; color: var(--salmon); opacity: .78; }
.bpctaskdeck > header h2 { font: 700 22px/1.3 var(--serif); }
.bpctaskdeck > header > strong {
  color: var(--salmon); font: 500 26px/1 var(--mono); font-variant-numeric: tabular-nums;
}
.bpctaskscroll {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: start; gap: 8px; padding: 12px 9px 12px 0;
  scrollbar-width: thin; scrollbar-color: var(--salmon) transparent;
}
.bpctaskscroll::-webkit-scrollbar { width: 5px; }
.bpctaskscroll::-webkit-scrollbar-thumb { background: var(--salmon); }
/* 條狀（使用者 2026-09-19：「應該是上下縮窄，更像是條狀的」）。
   ⚠️ **不是把方塊壓扁** —— 我先試過只改 min-height 與內距，結果內容要 100px、
   盒子只有 63px，`clip-path` 直接把「任務」那一行裁掉，卡片變成看不到資訊。
   要收窄就得改排版：標籤與內容**並排**而不是上下堆，三列變三行。
     第 1 行　編號　｜　能力標籤
     第 2 行　主題　｜　內容
     第 3 行　任務　｜　內容 */
.bpctaskscroll .bpcdim {
  /* ⚠️ `min-height` **不能是 0**。卡片是 grid 項目，塞不下的時候 grid 會把它
     **壓扁**而不是讓容器捲動 —— 內容要 74px、盒子被壓成 51px，`clip-path`
     就把「任務」那一行裁掉（2026-09-19 踩到，卡片看起來像沒資料）。
     84 ＝ 三行（編號／主題／任務）＋ 上下內距 ＋ 一點餘裕，量出來的值。 */
  width: 100%; min-height: 84px; grid-column: auto; grid-row: auto;
  grid-template-columns: auto 1fr auto;
  align-content: center; row-gap: 3px; column-gap: 10px; padding: 10px 14px;
}
.bpctaskscroll .bpcdim .bpcey { grid-column: 1; align-self: center; margin: 0; }
.bpctaskscroll .bpcdim .bpctaskstate { grid-column: 2; justify-self: start; margin: 0; }
.bpctaskscroll .bpcdim .bpclabel { grid-column: 1; align-self: center; margin: 0; }
.bpctaskscroll .bpcdim .bpcgoal,
.bpctaskscroll .bpcdim strong { grid-column: 2; margin: 0; font-size: 13px; line-height: 1.4; }
.bpctaskscroll .bpcdim > i { grid-column: 3; grid-row: 1 / -1; align-self: center; }
.bpctaskscroll .bpcdim:hover { transform: translateX(3px); }
.bpctaskempty {
  min-height: 100%; display: grid; place-content: center; justify-items: start; gap: 8px;
  padding: 24px; border: 1px dashed var(--beige-18); color: var(--beige-70);
}
.bpctaskempty p { margin: 0; color: var(--beige); font: 700 18px/1.5 var(--serif); }
.bpctaskempty span { font-size: 12px; }

@media (max-width: 780px) {
  .bpctasklayout { grid-template-columns: 1fr; gap: 18px; min-height: 0; }
  .bpcradar { grid-column: 1; grid-row: 1; width: min(94%, 420px); transform: none; }
  .bpcradar .radar .lb { font-size: 11.5px; }
  .bpcradar .radar .lv { font-size: 7.2px; }
  .bpcover-task .bpcfigure {
    grid-column: 1; grid-row: 1; justify-self: stretch; min-height: 310px; top: 28px;
  }
  /* ⚠️ 桌機把人物放大到 540px（使用者 2026-09-19），**手機不跟**。
     這裡是上下排，人物一高就把任務卡整個推出畫面。
     左邊那段讓位也是桌機專用的（讓出左上角給星星）—— 手機是滿版單欄，
     留著會讓人物整個偏右。 */
  .bpcover-task .bpcfigure { margin-left: 0; }
  /* 手機不能只把整組等比縮小：人物與雷達是兩個獨立層。
     260px 讓人物約為雷達實體高度的 78%，頭頂才會穩定落在能力卡下方，
     不會因手機寬高比不同又追上卡片。 */
  .bpcover-task .bpcfigure img { max-height: 260px; }
  .bpctaskdeck { grid-column: 1; grid-row: 2; height: 390px; }
  .bpc-report { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 0; }
  /* ⚠️ 手機是**單欄**。轉跳鈕若還留在第 2 欄，grid 會為它長出一個隱含的欄，
     按鈕就卡在牌組右邊浮著（2026-09-19 使用者回報）。
     排到第 3 列，還是靠右 —— 位置語彙不變，只是換成上下排。 */
  .bpcswitch { grid-column: 1; grid-row: 3; justify-self: end; }
  .bpctaskdeck > header { padding-top: 12px; }
  .bpctaskscroll { padding-right: 5px; }
  .bpctaskscroll .bpcdim { min-height: 106px; }
  .bpctaskscroll .bpcdim:hover { transform: none; }
}

.studenttasks-head { max-width: 620px; margin-bottom: 28px; }
.studenttasks-head h2 { margin: 5px 0 8px; font: 700 clamp(24px,4vw,36px)/1.3 var(--serif); }
.studenttasks-head > p:last-child { margin: 0; color: var(--beige-70); line-height: 1.8; }
.studenttask-dim { margin: 22px 0; }
.studenttask-dim h3 { margin: 0 0 6px; color: var(--salmon); font: 700 17px/1.4 var(--serif); }
.studenttask { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 10px;
  min-height: 44px; border-bottom: 1px solid var(--beige-08); }
.studenttask > span { font: 500 10px/1 var(--mono); opacity: .35; }
.studenttask b { font-size: 13px; font-weight: 400; }
.studenttask em { padding: 3px 7px; color: var(--navy); background: var(--salmon); font: 500 9px/1 var(--mono);
  font-style: normal; letter-spacing: .08em; }
.studenttask i { color: var(--salmon); font-size: 10px; font-style: normal; opacity: .65; }
.studenttask.is-done { opacity: .5; }
.studenttask.is-done b { text-decoration: line-through; }
@media (max-width: 560px) { .studenttask { grid-template-columns: 38px 1fr auto; } .studenttask i { display: none; } }

/* 圖說。**說明放在它描述的那張圖旁邊，不放頁首** ——
   擺在頁首等於要人先讀一段話才能看到東西（頁首只留標題）。 */
.cap { font-size: 12.5px; line-height: 1.95; opacity: .58; margin: 14px 0 0; max-width: 62ch; }
.cap b { opacity: 1; font-weight: 500; }

/* 文字稽核模式（audit.html / ?audit=1）。正常網站沒有任何稽核痕跡。
   狀態只用 UC 四色與線型區分，不引入紅黃綠第五色。 */
#ucAuditOverlay { position: fixed; inset: 0; z-index: 8000; pointer-events: none; }
.uca-box {
  position: fixed; display: block; margin: 0; padding: 0;
  color: var(--beige); background: rgba(19,27,46,.04);
  border: 1px dashed rgba(232,228,220,.48); border-radius: 2px;
  pointer-events: auto; cursor: crosshair; font: 500 8.5px/1.2 var(--sans);
  text-align: left; overflow: visible;
}
.uca-box > span {
  position: absolute; left: -1px; top: -15px; z-index: 1;
  width: max-content; max-width: 180px; padding: 2px 5px;
  color: var(--beige); background: rgba(19,27,46,.94);
  border: 1px solid rgba(232,228,220,.25); border-radius: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .02em; pointer-events: none;
}
.uca-box.status-keep { border-style: solid; border-color: rgba(232,228,220,.7); }
.uca-box.status-revise { border-style: solid; border-color: var(--salmon); }
.uca-box.status-remove { border-style: dashed; border-color: var(--salmon); box-shadow: inset 0 -2px 0 var(--salmon); }
.uca-box.status-missing { border: 2px double var(--salmon); }
.uca-box.is-selected { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px rgba(19,27,46,.75); }
#ucAuditOverlay.is-browse .uca-box { pointer-events: none; }

#ucAuditPanel {
  position: fixed; z-index: 9000; top: 68px; right: 14px; width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - 86px); overflow: auto; padding: 18px;
  color: var(--beige); background: rgba(19,27,46,.96);
  border: 1px solid rgba(232,228,220,.28); border-top: 2px solid var(--salmon);
  box-shadow: 0 22px 54px rgba(0,0,0,.38); backdrop-filter: blur(14px);
  font-family: var(--sans);
}
.uca-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.uca-head small { display: block; margin-bottom: 4px; color: var(--salmon); font: 500 8px/1 var(--mono); letter-spacing: .2em; }
.uca-head h2 { margin: 0; font: 700 22px/1.2 var(--serif); }
.uca-mode, .uca-tools button, .uca-foot button, .uca-choices button {
  color: var(--beige); background: none; border: 1px solid rgba(232,228,220,.25);
  border-radius: 24px; cursor: pointer; font-family: var(--sans);
}
.uca-mode { flex: none; padding: 7px 10px; font-size: 11px; }
.uca-mode:hover, .uca-tools button:hover, .uca-foot button:hover { border-color: var(--salmon); color: var(--salmon); }
.uca-page { margin: 14px 0 6px; color: var(--salmon); font: 500 10px/1 var(--mono); letter-spacing: .14em; }
.uca-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid rgba(232,228,220,.15); }
.uca-stats span { padding: 10px 4px; font-size: 9px; opacity: .68; }
.uca-stats b { display: block; margin-bottom: 2px; color: var(--beige); font: 500 18px/1 var(--mono); opacity: 1; }
.uca-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; padding: 10px 0; }
.uca-tools label { font-size: 10px; opacity: .78; }
.uca-tools input { accent-color: var(--salmon); vertical-align: -2px; }
.uca-tools button { margin-left: auto; padding: 4px 9px; font-size: 10px; }
.uca-empty { padding: 22px 8px; border-top: 1px solid rgba(232,228,220,.15); font-size: 12px; line-height: 1.8; opacity: .62; }
.uca-picked { border-top: 1px solid rgba(232,228,220,.15); padding-top: 12px; }
.uca-k { margin: 10px 0 6px; color: var(--salmon); font: 500 9px/1 var(--mono); letter-spacing: .12em; }
.uca-picked blockquote { margin: 0; padding: 10px 12px; border-left: 2px solid var(--salmon); background: rgba(232,228,220,.055); font-size: 12px; line-height: 1.65; }
.uca-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.uca-choices button { padding: 5px 9px; font-size: 10.5px; }
.uca-choices button.on { color: var(--navy); background: var(--salmon); border-color: var(--salmon); font-weight: 600; }
.uca-id { margin: 12px 0 0; font: 400 8px/1.4 var(--mono); opacity: .34; }
.uca-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(232,228,220,.15); }
.uca-foot button { flex: none; padding: 6px 10px; font-size: 10px; }
.uca-foot small { flex-basis: 100%; font-size: 8.5px; line-height: 1.5; opacity: .45; }
.uca-file { display: none; }
@media (max-width: 560px) {
  #ucAuditPanel { top: auto; right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: 48vh; }
  .uca-box > span { display: none; }
}

/* 只給螢幕閱讀器 */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* ═══ 書本的入口：總覽右下角 ═══════════════════════════════
   使用者 2026-09-12：「書這個功能暫時不需要，但也不需要刪掉…
   放在右下角，讓使用者的體驗更乾淨一點。」
   所以它**不進頁首的檢視切換器**，只在「總覽」畫得出來。
   固定定位不會影響版面，換檢視時 pane 重畫，按鈕跟著消失。 */
.bkcorner {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-lift); border: 1px solid var(--beige-18);
  color: var(--beige-70); font-family: var(--serif); font-size: 15px;
  cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.bkcorner:hover { border-color: var(--salmon); color: var(--beige); }
.bkcorner:focus-visible { outline: 2px solid var(--salmon); outline-offset: 2px; }

/* 教練專用的操作收到右下角（使用者 2026-09-19）。跟 .bkcorner 同一個位置語彙，
   只是帶文字所以做成膠囊。⚠️ 要避開底部的導覽膠囊，所以往上讓一段。 */
.cornerbtn {
  position: fixed; right: 18px; bottom: 74px; z-index: 40;
  padding: 9px 16px; border-radius: 30px; cursor: pointer;
  background: var(--navy-lift); border: 1px solid var(--beige-18);
  color: var(--beige-70); font-family: var(--sans); font-size: 12.5px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.cornerbtn:hover { border-color: var(--salmon); color: var(--beige); }
.cornerbtn:focus-visible { outline: 2px solid var(--salmon); outline-offset: 2px; }

/* ═══ 登入閘門（正式站的 LINE 登入）═══════════════════
   從 LINE 開啟時會蓋在最上面，驗證完就消失。demo 模式完全不會出現。 */
.gate {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(19, 27, 46, .92); backdrop-filter: blur(6px);
}
.gate.on { display: flex; }
.gatebox {
  width: 100%; max-width: 380px; padding: 30px 28px;
  background: var(--navy-lift); border: 1px solid var(--beige-18);
  text-align: center;
}
.gatebox .ey { margin: 0 0 10px; color: var(--salmon); }
.gatebox h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 22px; }
.gatebox p { margin: 0 0 18px; font-size: 13px; line-height: 1.9; color: var(--beige-70); }
.gatebox input {
  width: 100%; margin-bottom: 12px; padding: 12px; text-align: center;
  color: var(--beige); background: transparent; border: 1px solid var(--beige-18);
  border-radius: 2px; font-family: var(--mono); font-size: 18px; letter-spacing: .3em;
}
.gatebox input:focus { outline: none; border-color: var(--salmon); }
.gatebox .btn { width: 100%; margin-top: 6px; }
.gateerr { min-height: 1.4em; margin: 0 0 12px !important; font-size: 12px !important;
  color: var(--salmon); }

/* ═══ 學員清單（教練用）═══════════════════════════════
   一位學員一張卡（2026-10-13 從條狀改成卡片）：頭像字、名字、階段、開始日、評測進度。
   用按鈕不用連結 —— 點下去是「切換目前看誰」，不是導覽。 */
.sttools { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 18px 0 12px; }
.stlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 12px; }
.stcard {
  position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center;
  gap: 10px 12px; width: 100%; padding: 16px 16px 14px; text-align: left; cursor: pointer;
  color: var(--beige); background: var(--navy-lift);
  border: 1px solid var(--beige-18); border-radius: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.stcard:hover { border-color: var(--salmon); transform: translateY(-2px); }
.stcard.is-cur { border-color: var(--salmon); background: var(--navy-lift2);
  box-shadow: inset 3px 0 0 var(--salmon); }
/* 範例學員：虛線邊框，跟真學員分得開 —— 點錯人是這一頁最貴的錯誤。 */
.stcard.is-demo { border-style: dashed; }
.stcard.is-busy { pointer-events: none; border-color: var(--salmon-30); }
.stcard.is-busy .ststage { color: var(--salmon); }
.stavatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--beige-18); background: var(--navy);
  font: 400 18px/1 var(--serif); color: var(--beige); }
.stcard.is-cur .stavatar { border-color: var(--salmon); color: var(--salmon); }
.sthead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; min-width: 0; }
.stname { font-family: var(--serif); font-size: 17px; font-weight: 400; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sttag { font: 500 9px/1 var(--mono); font-style: normal; letter-spacing: .1em; padding: 3px 6px;
  color: var(--navy); background: var(--salmon); }
.stid { flex-basis: 100%; font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  text-decoration: none; opacity: .45; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ststage { grid-column: 1 / -1; justify-self: start; padding: 4px 9px; font: 500 10px/1 var(--mono);
  font-style: normal; letter-spacing: .06em; color: var(--beige-70); border: 1px solid var(--beige-18); }
.ststage.is-open { color: var(--salmon); border-color: var(--salmon-30); }
.ststart { grid-column: 1 / -1; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--beige-40); font-variant-numeric: tabular-nums; }
.stfoot { grid-column: 1 / -1; display: grid; gap: 6px; }
.stbar { display: block; height: 2px; background: var(--beige-08); }
.stbar u { display: block; height: 100%; background: var(--salmon); text-decoration: none; }
.stbar u.is-load { transition: width .12s linear; box-shadow: 0 0 6px rgba(232, 168, 152, .5); }
.stnum { font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  font-variant-numeric: tabular-nums; color: var(--beige-40); }
.stsort { display: flex; gap: 4px; margin: 0 0 0 auto; }
.stsort button { padding: 5px 10px; font: 500 10px/1 var(--mono); letter-spacing: .08em; cursor: pointer;
  color: var(--beige-40); background: transparent; border: 1px solid transparent; }
.stsort button:hover { color: var(--beige); }
.stsort button.on { color: var(--salmon); border-color: var(--salmon-30); }
.stdemoreset { padding: 7px 12px; font: 500 11px/1 var(--sans); letter-spacing: .04em; cursor: pointer;
  color: var(--beige-70); background: transparent; border: 1px dashed var(--beige-18); }
.stdemoreset:hover { color: var(--salmon); border-color: var(--salmon); }
.stdemoreset:disabled { opacity: .5; cursor: wait; }
@media (max-width: 560px) {
  .stlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stcard { grid-template-columns: 34px minmax(0, 1fr); padding: 13px 12px 12px; gap: 8px 9px; }
  .stavatar { width: 34px; height: 34px; font-size: 15px; }
  .stname { font-size: 15px; }
  .ststart { font-size: 9.5px; }
}

/* demo 模式選擇（logo 進入）：兩顆大選項，借任務視窗的外框。 */
.demopick-opts { display: grid; gap: 10px; margin-top: 16px; }
.demopick-opts button { display: grid; gap: 6px; padding: 16px 18px; text-align: left; cursor: pointer;
  color: var(--beige); background: rgba(232, 228, 220, .03); border: 1px solid var(--beige-18);
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.demopick-opts button:hover { border-color: var(--salmon); background: rgba(232, 168, 152, .06); }
.demopick-opts b { font: 700 18px/1.3 var(--serif); }
.demopick-opts span { color: var(--beige-70); font-size: 13px; line-height: 1.7; }

/* ═══ 成長日誌：三顆大按鈕 ═══════════════════════════
   使用者 2026-09-12：「變成通話記錄、外出社交、實際約會，三個大按鈕，
   點下去開始寫紀錄。」入口就是分類，不要先問「要不要新增」再問「哪一種」。 */
/* ⚠️ 這三顆**不要融入背景**（使用者 2026-09-18：「做成像是遊戲機台的按鈕」）。
   它們是機台上的實體鍵：有厚度、按下去會沉下去、鬆手彈回來。
   厚度用 box-shadow 的第四個值做，不是加邊框 —— 加邊框只會變成更粗的線。 */
/* ═══ HUD：三顆鍵在螢幕**裡面** ═══════════════════════════
   使用者 2026-09-19：「按鈕會很破壞玻璃面板的感覺…或許把整個螢幕設計進去，
   按鈕是在螢幕內部，像是 HUD 的一部分」。

   ⚠️ 所以**不能再是實體鍵**。原本那三層（座、厚度、打光）是在模擬一顆
   壓在面板上的塑膠鍵 —— 玻璃上不會有那種東西。
   改成儀表讀數的語彙：一道細線隔開、圖案與字都很輕、選中的那個才亮起來。 */
.gkinds {
  position: relative; z-index: 2; display: flex; margin: 0;
  border-top: 1px solid var(--beige-08);
}
.gkind {
  position: relative; flex: 1 1 0; min-width: 0;
  display: grid; justify-items: center; align-items: center;
  gap: 4px; padding: 8px 6px 9px; text-align: center;
  color: var(--beige-40); cursor: pointer; border: 0; background: none;
  transition: color .2s var(--ease), background .2s var(--ease);
}
/* 鍵與鍵之間只用一道細線分開 —— 不用框，框會把 HUD 變回按鈕列。 */
.gkind + .gkind { box-shadow: inset 1px 0 0 var(--beige-08); }
.gkind:hover { color: var(--beige-70); background: rgba(232, 228, 220, .035); }
.gkind:focus-visible { outline: 2px solid var(--salmon); outline-offset: -3px; }
/* 選中：底下一道鮭粉的指示線 ＋ 字亮起來。這是儀表的講法，不是按鈕的講法。 */
.gkind.on { color: var(--beige); background: rgba(232, 168, 152, .07); }
.gkind.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--salmon);
}
.gkind.on .gkico { color: var(--salmon); }
.gkind b { font: 500 8.5px/1 var(--mono); letter-spacing: .1em; }
/* ⚠️ 圖示外面**不要那一圈環**。鍵身已經是一個框了，再套一個圈就是框中框。 */
.gkico { display: grid; place-items: center; width: 18px; height: 18px; color: currentColor; }
.gkico svg { width: 20px; height: 20px; }
.gkind.on .gkico { color: var(--navy); }

.gfkind { margin: 2px 0 10px; font-family: var(--serif); font-size: 20px; font-weight: 400; }
@media (max-width: 560px) {
  .gkinds { gap: 15px; }
  .gkind { width: 78px; padding: 10px 4px 8px; }
  .gkico { width: 28px; height: 28px; }
  .gkico svg { width: 18px; height: 18px; }
  .gkind b { font-size: 9px; white-space: nowrap; }
}

/* ═══ 手機：任務卡置中 ═════════════════════════════════
   人物的部位動畫會在開卡前先播完；卡片出現後，閱讀是唯一主角。
   所以手機也置中，不再做貼底面板。左右保留安全距離，卡片內部自己捲動。 */
@media (max-width: 720px) {
  .taskveil {
    place-items: center;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
    background: rgba(19, 27, 46, .72);
    backdrop-filter: blur(6px) saturate(108%);
    -webkit-backdrop-filter: blur(6px) saturate(108%);
  }
  .taskpanel {
    width: min(600px, 100%); max-height: min(82vh, 680px); max-height: min(82dvh, 680px);
    border-width: 1px;
  }
  .taskveil.on .taskpanel { animation: taskpanel-in .34s var(--ease) both; }
}
@media (max-width: 560px) {
  .taskpanel { width: 100%; }
  .taskactions { margin-top: 20px; }
}

/* ═══ 手機輸入：不要放大、不要跳 ═══════════════════════
   使用者 2026-09-13：「幾乎所有要填寫的地方，我點擊時視窗都會彈跳、放大或是晃動。」

   ── 為什麼會放大 ──
   iOS Safari（LIFF 裡也是 WebKit）只要欄位的 font-size **小於 16px**，
   點進去就會自動把整頁放大，然後你得手動縮回來。
   `.qfield` 是 13px、`.crnote textarea` 12px、`.gfr textarea` 15px，全都中招。
   前面那條 `@media (max-width:560px)` 擋不住，因為那些選擇器權重比它高。

   ── 為什麼放在檔案最後 ──
   權重打平時後面的贏。這裡用 `:is()` 把所有會被輸入的元素一次蓋掉，
   而且**不寫死選擇器清單**，之後新增欄位也自動涵蓋。

   ⚠️ 不要改用 `maximum-scale=1` 那招 —— 那會連使用者自己的雙指縮放一起關掉。 */
@media (pointer: coarse) {
  input, select, textarea,
  :is(input, select, textarea).qfield,
  .crnote textarea, .crletter textarea, .gfr input, .gfr select, .gfr textarea {
    font-size: 16px !important;
    line-height: 1.6;
  }
  /* 鍵盤彈出來時瀏覽器會自己把欄位捲進畫面 —— 留一點邊，
     不然欄位會剛好貼在鍵盤上緣，看不到自己在打什麼。 */
  input, select, textarea { scroll-margin-block: 96px 140px; }
  /* 自動長高的欄位：把過渡關掉。一邊打字一邊做高度動畫就是「晃動」的來源。 */
  .qfield, .crnote textarea, .crletter textarea { transition: none; }
  /* 焦點時的底色換成不影響版面的方式（原本就是 background，這裡只是把時間縮短）。 */
  .qrow.free { transition-duration: .08s; }
}

/* 成長日誌的「狀況」：三顆按鈕，不用下拉。
   手機上點一下就選好，比「開下拉→捲→選→關」快得多 ——
   而這張表使用者每週都要填。 */
.gflv { display: flex; gap: 6px; flex: 1; }
.gflvb {
  flex: 1; padding: 11px 0; cursor: pointer;
  color: var(--beige-70); background: transparent;
  border: 1px solid var(--beige-18); border-radius: 2px;
  font-family: var(--sans); font-size: 15px;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.gflvb:hover { border-color: var(--salmon); }
.gflvb.on { color: var(--navy); background: var(--salmon); border-color: var(--salmon); }
.gflvb:focus-visible { outline: 2px solid var(--salmon); outline-offset: 2px; }

/* 報告頁首的按鈕列（編輯評測 ＋ 傳到 LINE）。手機上並排放不下就換行。 */

/* ═══ 鎖住的欄位要看得出來被鎖住 ═══════════════════════
   applyFieldAccess 會把不該由你填的欄位設成 disabled／readonly，
   但 2026-09-13 之前 `.field-locked` **一條樣式都沒有** ——
   於是被鎖的欄位長得跟能用的一模一樣，點下去沒反應就像壞掉。
   使用者升級成教練之後第一個回報的就是這件事。

   ⚠️ 不要用 `display: none` 藏起來 —— 學員應該看得到教練會填什麼，
   只是不能動。看得到但明顯不能碰，才是對的。 */
.field-locked { opacity: .55; }
.field-locked, .field-locked * { cursor: not-allowed; }
.field-locked :is(input, textarea, select, .opt, .chk):disabled,
.field-locked :is(input, textarea)[readonly] { pointer-events: none; }
/* 深色底上降透明度會糊掉，改用邊框說明它是靜止的 */
.field-locked :is(input, select, textarea) { border-style: dashed; }

/* ?diag=1 的診斷表。只有除錯會看到，所以求清楚不求好看。 */
.diagt { width: 100%; margin: 0 0 16px; border-collapse: collapse;
  font-family: var(--mono); font-size: 11.5px; text-align: left; }
.diagt td { padding: 5px 6px; border-bottom: 1px solid var(--beige-08);
  color: var(--beige-70); word-break: break-all; }
.diagt td:first-child { width: 42%; color: var(--salmon); }

/* ?perf=1 的耗時面板 */
.perft { font-size: 11px; }
.perft th { padding: 5px 6px; color: var(--salmon); text-align: left;
  border-bottom: 1px solid var(--beige-18); font-weight: 400; }
.perft td:first-child { width: auto; color: var(--beige-70); }
.perft td { color: var(--beige); }
.perflaps { color: var(--beige-40) !important; font-size: 10px; padding-bottom: 10px !important; }

/* 正在編輯的那一個主題。
   使用者 2026-09-17：「每次點一個話題都是轉跳頁面，太麻煩了」——
   總表現在永遠留著，這個標記讓你知道下面編輯的是哪一則。 */
.assignment-story-cell.is-open {
  border-color: var(--salmon);
  background: var(--salmon-12);
}
.assignment-story-cell.is-open .num { color: var(--salmon); opacity: 1; }
/* 編輯區跟總表之間要有明確的分界，不然會讀成同一塊。 */
[data-assignment-editor-slot]:not(:empty) {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--beige-18);
}

/* ⚠️ **手機上填空題要先給足高度，不然打字會把下面推走。**
   實測（2026-09-17）同一段字：
     桌機 1024px　欄位 70px → 70px，下方位移 0px
     手機 375px 　欄位 30px → 79px，下方位移 **49px**
   桌機是兩欄格線把欄位撐成三行高，手機收成一欄之後只剩一行 ——
   於是每換一行就推一次，整頁在手指底下跳。
   使用者說「手機版比較難用但說不出哪裡」，就是這個。

   先給三行的高度，多數答案根本不會換行到第四行，也就不會有位移；
   真的寫很長時才長高，那時使用者本來就預期版面會延伸。
   代價是評測頁在手機上變長一些 —— 比畫面一直跳好。 */
@media (pointer: coarse) {
  .qfield { min-height: 4.8em; }
}

/* 閒置時星空要貼齊螢幕四邊，不要被內距推進來。 */
.gscreen.is-idle .gscreenin { padding: 0; align-items: stretch; }
.gscreen.is-idle .gscreenin > * { grid-area: 1 / 1; }

/* ?perf=1 的隨時可叫的小按鈕。只有加了旗標才會出現。 */
.perftab {
  position: fixed; right: 14px; bottom: 96px; z-index: 60;
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--salmon); background: rgba(19, 27, 46, .92);
  border: 1px solid var(--salmon-30); border-radius: 50%; cursor: pointer;
  font-size: 17px; line-height: 1;
}
.perftab:hover { border-color: var(--salmon); }
.perfhint { color: var(--beige-40); font-size: 11px; }

/* 存不上去的橫幅。只在 error／offline 出現，蓋在導覽列上方，不擋內容。 */
.syncwarn {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
  display: grid; gap: 3px; padding: 11px 14px;
  color: var(--beige); background: rgba(19, 27, 46, .96);
  border: 1px solid var(--salmon);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.syncwarn b { color: var(--salmon); font: 500 11px/1.4 var(--mono); letter-spacing: .08em; }
.syncwarn span { font-size: 11.5px; line-height: 1.6; color: var(--beige-70); }
.syncwarn u { color: var(--beige); text-decoration: none; font-weight: 500; }
@media (min-width: 700px) {
  .syncwarn { left: auto; right: 18px; bottom: 18px; max-width: 330px; }
}

/* ── 背景補資料還沒到 ────────────────────────────────
   成長日誌與作業是畫面出來之後才補的。等不到就說等不到 ——
   空白畫面跟「還沒填」長得一樣，那是在騙人。 */
.restnote {
  margin: 12px 0 0; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--beige-70); background: var(--beige-08);
  border-left: 2px solid var(--beige-18);
}
.restnote.is-bad { color: var(--beige); border-left-color: var(--salmon); }
.restnote button {
  margin-left: 6px; padding: 0; border: 0; background: none;
  font: inherit; color: var(--salmon); text-decoration: underline; cursor: pointer;
}
.assignment .restnote { margin-top: 0; }

/* 教練記錄進步（只有教練看得到）。在雷達下方，一排五個小計數器。 */
.bpcprogress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; }
.bpcprogress .ey { width: 100%; margin: 0; color: var(--salmon); opacity: .7;
  font: 500 8.5px/1 var(--mono); letter-spacing: .2em; }
.bpcpg { display: inline-flex; align-items: center; gap: 5px; color: var(--beige-70); font-size: 11px; }
.bpcpg b { font-weight: 500; }
.bpcpg span { min-width: 18px; text-align: center; color: var(--salmon); font: 500 11px/1 var(--mono); }
.bpcpg button { width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--beige-70); background: none; border: 1px solid var(--beige-18); font-size: 11px; line-height: 1; }
.bpcpg button:hover:not([disabled]) { border-color: var(--salmon); color: var(--beige); }
.bpcpg button[disabled] { opacity: .3; cursor: default; }

/* 冒險首頁的進度：一行，跟標題同一條左緣。點一份作業一顆，寫完變實心。 */
.adventure-progress { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.apdots { display: flex; gap: 4px; }
.apdots i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--beige-40); }
.apdots i.on { background: var(--salmon); border-color: var(--salmon);
  box-shadow: 0 0 5px rgba(232, 168, 152, .5); }
.apnum { color: var(--beige-40); font: 500 9.5px/1 var(--mono); letter-spacing: .16em; }

/* ═══ 清單型教材（推薦書單、推薦電影）═══════════════════
   借任務視窗的外框，內容是一頁可捲動的文字清單。 */
.taskpanel.liblist { max-height: min(86vh, 760px); overflow-y: auto; }
.liblist-items { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: ll; }
.liblist-items li { padding: 12px 0; border-top: 1px solid var(--beige-08); counter-increment: ll; }
.liblist-items li:first-child { border-top: 0; }
.liblist-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.liblist-head::before { content: counter(ll, decimal-leading-zero); color: var(--salmon);
  font: 500 10px/1 var(--mono); letter-spacing: .08em; }
.liblist-head b { font: 400 16px/1.4 var(--serif); color: var(--beige); }
.liblist-head s { text-decoration: none; color: var(--beige-40); font: 500 10px/1.4 var(--mono); letter-spacing: .05em; }
.liblist-head em { font-style: normal; color: var(--beige-40); font-size: 10px; }
.liblist-head .taskgo { margin-left: auto; }
.liblist-items p { white-space: pre-line; margin: 6px 0 0 28px; color: var(--beige-70); font-size: 13px; line-height: 1.75; }

/* 日誌閒置畫面的片頭文字：沿用 .assignment-home，只補兩件事 ——
   左側一層淡淡的暗，讓字壓在銀河上也讀得清；狀態列改成小的等寬字。 */
/* ⚠️ 位置與寬度要跟冒險的 .adventure-home 一模一樣 —— 第一版另外設了靠左與漸層底，
   兩頁並排看就是兩套排版（使用者 2026-09-24）。 */
.gidle-home { max-width: 590px; }   /* .adventure-home 的 520 實際被後面的 .assignment-home 590 蓋掉，量出來是 590 */
.gidle-home .assignment-home-copy { max-width: 410px; }
.gidle-home .assignment-home-copy > p.gidle-state { margin-top: 16px; color: var(--beige-40);
  font: 500 9.5px/1.6 var(--mono); letter-spacing: .14em; }

/* ═══ 頁面說明（導覽模式）══════════════════════════════
   頁首右上一顆小鈕；按下去整頁蓋一層薄膜，在區塊與按鈕上寫字。 */
.rhead { position: relative; }
.guidebtn { position: absolute; right: 0; top: 30px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; cursor: pointer;
  color: var(--beige-70); background: transparent; border: 1px solid var(--beige-18); border-radius: 30px;
  font: 500 11px/1 var(--sans); letter-spacing: .08em;
  transition: color .2s var(--ease), border-color .2s var(--ease); }
.guidebtn i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font: 700 11px/1 var(--mono); font-style: normal; color: var(--navy); background: var(--beige-70); }
.guidebtn:hover { color: var(--salmon); border-color: var(--salmon); }
.guidebtn:hover i { background: var(--salmon); }
.guidebtn:focus-visible { outline: 1px solid var(--salmon); outline-offset: 2px; }

.guide { position: absolute; left: 0; top: 0; width: 100%; z-index: 200; cursor: pointer;
  background: rgba(19, 27, 46, .62); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
  animation: guidein .25s var(--ease) both; }
@keyframes guidein { from { opacity: 0 } to { opacity: 1 } }
.guidearea { position: absolute; border: 1px solid rgba(232, 168, 152, .55); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(19, 27, 46, .4), inset 0 0 40px rgba(232, 168, 152, .06); }
.guidecard { position: absolute; left: 14px; top: 14px; max-width: min(360px, calc(100% - 28px));
  padding: 15px 18px 16px 19px;
  /* 底色壓到很淡、不加陰影：膜本身已經夠暗，字卡再蓋一塊實心的藍會把空間感吃掉（使用者 2026-09-28）。
     text-shadow 補一點對比，字壓在亮星或月面上也讀得出來。 */
  background: rgba(19, 27, 46, .28); border-left: 2px solid var(--salmon);
  text-shadow: 0 1px 8px rgba(19, 27, 46, .9); }
.guidecard .num { display: block; color: var(--salmon); font: 500 9px/1 var(--mono); letter-spacing: .16em; }
.guidecard b { display: block; margin-top: 6px; color: var(--white); font: 700 19px/1.3 var(--serif); letter-spacing: .04em; }
.guidecard p { margin: 8px 0 0; color: var(--beige); font-size: 13px; line-height: 1.8; }
.guidemark { position: absolute; border: 1px dashed var(--salmon); border-radius: 6px; pointer-events: none; }
/* 按鈕與標籤用同一個字母對起來：按鈕左上角一顆，標籤開頭一顆。 */
.guideno { display: inline-grid; place-items: center; flex: none; width: 17px; height: 17px; border-radius: 50%;
  font: 700 9.5px/1 var(--mono); color: var(--salmon); background: var(--navy); }
.guidemark > .guideno { position: absolute; left: -8px; top: -8px; border: 1px solid var(--salmon); }
.guidetag { position: absolute; display: flex; align-items: flex-start; gap: 8px; max-width: 250px;
  padding: 8px 12px 9px 8px; pointer-events: none; color: var(--navy); background: var(--salmon); border-radius: 4px;
  font-size: 12px; line-height: 1.55; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.guidetag b { display: block; font-weight: 700; }
/* 並排模式：一顆按鈕一欄，字母放在上面，文字才有整欄的寬度可以用。 */
.guidetag.is-col { flex-direction: column; gap: 5px; max-width: none; padding: 8px 9px 9px; }

.guidetag span:not(.guideno) { display: block; }
.guidehint { position: fixed; left: 50%; top: 68px; transform: translateX(-50%); margin: 0; z-index: 1;
  padding: 7px 14px; border: 1px solid var(--beige-18); border-radius: 30px; background: var(--navy);
  color: var(--beige-70); font: 500 10px/1 var(--mono); letter-spacing: .14em; white-space: nowrap; pointer-events: none; }
@media (max-width: 560px) {
  .guidebtn { top: 24px; padding-right: 4px; }
  .guidebtn span { display: none; }
  /* 手機的區塊很窄，字卡滿版會壓到右側被標記的按鈕，所以只佔左邊約四分之三。 */
  .guidecard { max-width: 76%; padding: 11px 13px 12px 15px; }
  .guidecard b { font-size: 16px; }
  .guidecard p { font-size: 12.5px; line-height: 1.7; }
  .guidetag { max-width: 210px; font-size: 11.5px; }
}

/* ═══ 能力分級（點能力時，2026-10-15）＋ 五力循環圖 ═══ */
.rcmt .rtag { display: block; margin-top: 4px; font-size: 12px; color: var(--beige-70); letter-spacing: .04em; }
.rcmt .rlv { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 12px; font-size: 14px; color: var(--beige); }
.rcmt .rlv em { font: 600 12px/1 var(--mono); font-style: normal; color: var(--salmon); letter-spacing: .06em; }
.rcmt .rlv small { font-size: 11.5px; color: var(--beige-70); }
.rcmt .rlvbar { display: flex; gap: 2px; width: 100%; max-width: 280px; margin: 8px auto 0; }
.rcmt .rlvbar i { position: relative; height: 6px; background: var(--beige-18); }
.rcmt .rlvbar i.on { background: var(--salmon); }
.rcmt .rlvbar s { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); text-decoration: none;
  font: 500 8.5px/1 var(--mono); color: var(--beige-40); white-space: nowrap; }
.rcmt .rlvbar i.on s { color: var(--salmon); }
.rcmt .rlvbar + p { margin-top: 14px !important; }

.bpcfigure .fxtap { position: absolute; left: 50%; top: 18%; width: 34%; height: 62%; transform: translateX(-50%);
  z-index: 3; pointer-events: auto; cursor: pointer; background: transparent; border: 0; border-radius: 40%; }
.bpcfigure .fxtap:focus-visible { outline: 1px dashed var(--salmon); outline-offset: 4px; }

.cycle { display: block; width: 100%; height: auto; max-height: 66vh; margin: 8px auto 0; }
.cytrack { fill: none; stroke: var(--beige-08); stroke-width: 1; stroke-dasharray: 2 6; }
.cyarrows path { fill: none; stroke: var(--salmon); stroke-width: 1.6; stroke-linecap: round; }
#cyArrow path { fill: none; stroke: var(--salmon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cynode circle { fill: var(--navy-lift); stroke: var(--salmon-30); stroke-width: 1; }
.cynode circle.cyhalo { fill: none; stroke: var(--beige-08); stroke-width: 1; }
.cynode text { text-anchor: middle; }
.cyno { font: 500 9px var(--mono); fill: var(--salmon); letter-spacing: .14em; }
.cyname { font: 700 18px var(--serif); fill: var(--beige); letter-spacing: .06em; }
.cytag { font: 400 10.5px var(--sans); fill: var(--beige-70); }
.cycenter { text-anchor: middle; font: 700 16px var(--serif); fill: var(--beige); letter-spacing: .08em; }
.cycenter2 { text-anchor: middle; font: 400 11px var(--sans); fill: var(--beige-40); }

/* 五大情感能力圖：太陽系（2026-10-15） */
.taskpanel.cyclepanel { width: min(94vw, 980px); max-width: none; }
.bpcover-task { position: relative; }
.taskpanel.cycleinline { position: absolute; inset: 0; z-index: 5; width: auto; max-height: none;
  display: flex; flex-direction: column; padding: 28px 40px 20px 56px; background-color: var(--navy); box-shadow: none; animation: taskpanel-in .32s var(--ease) both; }
.cycleinline h2 { margin: 0 0 4px; font-size: 28px; }
.cycleinline .galaxy { flex: 1; min-height: 0; width: 100%; height: 100%; }
.galaxy { background: radial-gradient(ellipse at 20% 50%, rgba(232, 168, 152, .07), transparent 60%); border-radius: 4px; }
.galaxy .gxstars circle { fill: var(--beige); }
.gxorbit { fill: none; stroke: var(--beige-18); stroke-width: 1; }
/* 動態：軌道上的光、閃爍的星、飄過的星光。減少動態時全部靜止（規則 9）。 */
.gxsweep { fill: none; stroke: var(--salmon); stroke-width: 1.4; stroke-linecap: round; opacity: .55;
  stroke-dasharray: 70 930; animation: gx-sweep linear infinite; }
@keyframes gx-sweep { to { stroke-dashoffset: -1000; } }
.galaxy .gxstars .gxtw { animation: gx-tw 4s ease-in-out infinite; }
@keyframes gx-tw { 50% { opacity: .9; } }
.gxspark { fill: var(--beige); opacity: 0; transform-box: fill-box; transform-origin: center; animation: gx-spark linear infinite; }
@keyframes gx-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .8; } 50% { opacity: .35; transform: translate(60px, -12px) scale(1); } 80% { opacity: .7; } 100% { opacity: 0; transform: translate(120px, -24px) scale(.6); } }
.gxtrail { animation: gx-flow 3s linear infinite; }
@keyframes gx-flow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .gxsweep, .gxspark { display: none; } .gxtw, .gxtrail { animation: none; } }
.gxtrail { fill: none; stroke: var(--salmon-30); stroke-width: 1; stroke-dasharray: 2 5; }
.gxback { fill: none; stroke: var(--salmon-30); stroke-width: 1; stroke-dasharray: 2 5; }
.gxsun { fill: var(--salmon); }
.gxhalo { fill: none; stroke: var(--salmon); stroke-width: 1; opacity: .35; }
.gxhalo2 { opacity: .15; }
.gxplanet { fill: var(--navy); stroke: var(--beige-70); stroke-width: 1.2; }
.gxfine, .gxfine * { fill: none; stroke: var(--beige-40); stroke-width: .8; }
.gxorb { stroke-dasharray: 1.5 3; }
.gxmoon { fill: var(--beige); }
.gxring { fill: none; stroke: var(--salmon); stroke-width: 1.1; opacity: .85; }
.gxhatch line { stroke: var(--beige-40); stroke-width: .7; }
.gxshade { fill: none; }
.gxlead { stroke: var(--beige-18); stroke-width: 1; }
/* 字壓在軌道線上時，用深藍描邊把線讓開。 */
.galaxy text { text-anchor: start; paint-order: stroke; stroke: var(--navy); stroke-width: 4px; stroke-linejoin: round; }
.gxname { font: 700 20px var(--serif); fill: var(--beige); letter-spacing: .06em; }
.gxtag { font: 400 13px var(--sans); fill: var(--beige-70); }
.gxlink { font: 500 13px var(--sans); fill: var(--salmon); letter-spacing: .03em; }
.galaxy.is-v { max-height: none; }

/* ═══ 手機打字（2026-10-22）══════════════════════════════
   ① 鍵盤打開時，頂部標題列、評測進度列也收起來（原本只收底部導覽列），
      提示（toast）改到畫面上方，不要被抬到鍵盤正上方蓋住正在打的那一行。
   ② 長文框改成全螢幕書寫（app.js 的 fwOpen）：題目一行、整塊書寫區、字數。
   ③ 作業單題：書寫框排在說明與範例前面，一進來就看得到能打字的地方。 */
@media (max-width: 900px) {
  html.uc-keyboard-open .top, html.uc-keyboard-open .asbar { display: none; }
  html.uc-keyboard-open .toast { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }
}
.fw { position: fixed; left: 0; right: 0; top: 0; height: 100vh; z-index: 500;
  display: flex; flex-direction: column; background: var(--navy); color: var(--beige); }
.fw[hidden] { display: none; }
.fw-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--beige-18); }
.fw-top b { flex: 1; min-width: 0; font: 600 15px/1.4 var(--serif); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-done { flex: none; padding: 8px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--salmon); color: var(--navy); font: 600 14px/1 var(--sans); }
.fw-ta { flex: 1; min-height: 0; width: 100%; margin: 0; padding: 14px 16px; border: 0; resize: none; outline: none;
  background: var(--navy); color: var(--beige); font: 400 16px/1.85 var(--sans); }
.fw-ta::placeholder { color: var(--beige-40); }
.fw-foot { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--beige-18); font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--beige-40); }
.fw-count.over { color: var(--salmon); }
.fw-note { font-family: var(--sans); letter-spacing: 0; text-align: right; }
html.fw-open, html.fw-open body { overflow: hidden; }
@media (max-width: 560px) {
  .assignment-compose { grid-template-rows: none; }
  .assignment-compose > * { order: 3; }
  .assignment-compose > .assignment-detail-back { order: 0; }
  .assignment-compose > .assignment-compose-head { order: 1; }
  .assignment-compose > .assignment-trait-picker { order: 2; }
  .assignment-compose > textarea, .assignment-compose > .assignment-report-actions { order: 2; }
  /* 點下去就會展開成全螢幕書寫，框本身不用撐滿；留位置給下面的說明與範例。 */
  .assignment-compose > textarea { height: 190px; min-height: 190px; }
}
@media (max-width: 620px) {
  .gscreen .gcalform textarea[name="outcome"] { height: 140px; }
}