:root {
  --ink: #F4EFE3;
  --ink2: #C7CFDE;
  --mute: #8B96AC;
  --gold: #D6B26B;
  --goldd: #CBA75A;
  --line: #C9A24B;
  --card: #14274A;
  --cardln: #33496F;
  --creamhl: #1C355E;
  --bgtop: #14274A;
  --bgbot: #08132A;
  --danger: #E0785A;
  --warn: #E0B85A;
  --ok: #7FBF8F;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(160deg, var(--bgtop) 0%, var(--bgbot) 65%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Noto Sans TC", -apple-system, sans-serif;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
  margin: 0;
  /* 手機版標題常常換行，balance 讓每行字數平均分配，
     不會出現只有一兩個字被丟到最後一行的「掉字」感 */
  text-wrap: balance;
}

.sub {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  font-size: 0.78em;
  color: var(--mute);
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--cardln);
  flex-wrap: wrap;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--creamhl);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-logo {
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: invert(1);
}
.brand-text h1 { font-size: 22px; color: var(--ink); letter-spacing: 0.02em; }
.brand-text p { margin: 2px 0 0; color: var(--goldd); font-size: 13px; letter-spacing: 0.04em; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.persona-glance {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--cardln);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  color: var(--ink2);
}
.persona-glance .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mute);
  flex-shrink: 0;
}
.persona-glance.ready .dot { background: var(--ok); }

.history-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--cardln);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink2);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.history-btn:hover, .history-btn.active { border-color: var(--gold); color: var(--gold); }
.history-btn svg { flex-shrink: 0; }

/* ---- 手機版 topbar：把佔掉整個第一屏的頂部區塊壓縮，讓內容更快出現，
   但文字大小維持看得清楚的程度，標題用 text-wrap:balance 避免最後一行只剩一兩個字 ---- */
@media (max-width: 600px) {
  .topbar { padding: 14px 16px; gap: 10px; }
  .brand { gap: 10px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-eyebrow { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 3px; }
  .brand-text h1 { font-size: 17px; line-height: 1.42; }
  .brand-text p { font-size: 12px; margin-top: 4px; line-height: 1.5; }
  .topbar-right { gap: 8px; width: 100%; }
  .persona-glance { padding: 7px 12px; font-size: 12.5px; }
  .history-btn { padding: 7px 12px; font-size: 12.5px; }
}

/* ---------- Tabbar ---------- */
.tabbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bgtop);
  background: linear-gradient(180deg, #16294c 0%, #0f2040 100%);
  padding: 12px 20px;
  border-bottom: 1px solid var(--cardln);
  box-shadow: 0 8px 20px rgba(3,9,20,0.25);
}
.tabgrid {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 720px) {
  .tabgrid { grid-template-columns: repeat(5, 1fr); }
}
.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--cardln);
  color: var(--ink2);
  padding: 8px 10px;
  border-radius: 12px;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  overflow: hidden;
}
.tab:hover { border-color: var(--line); color: var(--ink); }
.tab-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--cardln);
  display: flex; align-items: center; justify-content: center;
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--goldd);
  background: var(--creamhl);
}
.tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab.active {
  background: linear-gradient(135deg, var(--gold), var(--goldd));
  color: #14274A;
  border-color: var(--gold);
  font-weight: 700;
}
.tab.active .tab-num {
  border-color: #14274A;
  color: #14274A;
  background: rgba(20,39,74,0.15);
}
.tab-quality { border-color: var(--goldd); }
.tab-quality .tab-num { color: var(--gold); border-color: var(--goldd); }
.tab-summary { border-color: var(--cardln); }

/* ---------- Main / panels ---------- */
#app { max-width: 920px; margin: 0 auto; padding: 28px 20px 80px; }
.panel { display: none; }
.panel.active { display: block; animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }

.card {
  background: var(--card);
  border: 1px solid var(--cardln);
  border-radius: 16px;
  padding: 28px 30px;
  box-shadow: 0 10px 30px rgba(3,9,20,0.35);
}
.card h2 { font-size: 20px; margin-bottom: 6px; color: var(--ink); }
.hint {
  color: var(--ink2);
  font-size: 13.5px;
  line-height: 1.7;
  background: var(--creamhl);
  border-left: 2px solid var(--gold);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 12px 0 20px;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

.field { margin-bottom: 16px; }
.field-inline { display: flex; align-items: center; gap: 10px; }
.field-inline label { margin-bottom: 0; }
.field label {
  display: block;
  font-size: 13px;
  color: var(--ink2);
  margin-bottom: 6px;
  font-weight: 500;
}
input[type="text"], input[type="number"], textarea, select {
  width: 100%;
  background: #0F2038;
  border: 1px solid var(--cardln);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
textarea { resize: vertical; line-height: 1.6; }
::placeholder { color: var(--mute); }

.actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.btn {
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s ease, opacity .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--goldd));
  color: #14274A;
}
.btn-primary:disabled { opacity: 0.5; cursor: wait; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--cardln);
  color: var(--ink2);
}
.save-hint { font-size: 13px; color: var(--ok); }

.mode-switch { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.mode-btn {
  background: transparent;
  border: 1px solid var(--cardln);
  color: var(--ink2);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.mode-btn.active { border-color: var(--gold); color: var(--gold); background: var(--creamhl); }

.pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pill {
  background: #0F2038;
  border: 1px solid var(--cardln);
  color: var(--ink2);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
}
.pill:hover { border-color: var(--line); color: var(--ink); }
.pill.active {
  background: linear-gradient(135deg, var(--gold), var(--goldd));
  color: #14274A;
  border-color: var(--gold);
  font-weight: 700;
}
.pill-custom-row { display: flex; gap: 8px; align-items: center; }
.pill-custom-row input { flex: 1; }
.pill-add-btn { white-space: nowrap; padding: 10px 16px; }

/* ---------- Result rendering ---------- */
.result { margin-top: 22px; }
.result-note {
  font-size: 13px;
  color: var(--warn);
  background: rgba(224,184,90,0.1);
  border: 1px solid rgba(224,184,90,0.35);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.result-card {
  border: 1px solid var(--cardln);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.02);
  position: relative;
}
.result-card h4 {
  margin: 0 0 8px;
  font-family: "Noto Serif TC", serif;
  font-size: 16px;
  color: var(--gold);
}
.result-card .tag {
  display: inline-block;
  font-size: 11px;
  color: var(--goldd);
  border: 1px solid var(--cardln);
  border-radius: 999px;
  padding: 2px 9px;
  margin: 0 6px 6px 0;
}
.result-card .kv { font-size: 13.5px; line-height: 1.8; color: var(--ink2); margin: 4px 0; }
.result-card .kv b { color: var(--ink); font-weight: 600; }
.result-card .body-text { white-space: pre-wrap; line-height: 1.9; font-size: 14px; color: var(--ink); }
.copy-btn {
  position: absolute; top: 14px; right: 14px;
  background: transparent;
  border: 1px solid var(--cardln);
  color: var(--ink2);
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--gold); color: var(--gold); }

/* 商業腳本開場（Hook）合併成一個引言區塊顯示，取代原本三行各自標「Hook 第一／二／三句」，
   減少標籤雜訊，讓開場那三句話本身變成視覺焦點 */
.hook-quote {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  padding: 10px 14px;
  margin: 10px 0;
  border-left: 3px solid var(--gold);
  background: rgba(214,178,107,0.06);
  border-radius: 0 8px 8px 0;
}

/* 公式／呈現形式合併成一行小字，取代兩顆分開的 tag 圓角標籤 */
.tag-line {
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 8px;
}

/* 版本提示：這次生成之前，這一站已經有其他版本存在歷史紀錄裡，才會出現，
   提醒學員舊版沒有不見，只是被收起來了 */
.version-badge {
  font-size: 12.5px;
  color: var(--ok);
  background: rgba(127,191,143,0.1);
  border: 1px solid rgba(127,191,143,0.35);
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* 次要／輔助資訊（拍攝提醒、確認並微調欄位）預設收合，減少畫面文字量，
   點開才看到，不會一開始就把整個版面塞滿 */
details.collapsible summary {
  cursor: pointer;
  color: var(--goldd);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
}
details.collapsible summary::-webkit-details-marker { display: none; }
details.collapsible summary::before {
  content: "▸ ";
  display: inline-block;
}
details.collapsible[open] summary::before {
  content: "▾ ";
}
.result-card details.collapsible { margin-top: 10px; }

.risk-最高, .risk-高 { border-color: var(--danger) !important; }
.risk-中高, .risk-中 { border-color: var(--warn) !important; }
.risk-無風險 { border-color: var(--ok) !important; }

/* 站別版本瀏覽器：舊一版／新一版切換，回頭找之前生成過的版本 */
.version-browser {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--cardln);
}
.version-browser-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink2);
  margin-bottom: 8px;
}
/* 舊一版／新一版：兩個箭頭並排在一起，不用文字標籤，減少版面雜訊 */
.version-arrows { display: flex; gap: 4px; }
.ver-arrow {
  padding: 3px 12px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
}
.version-browser-meta { color: var(--ink2); }
.version-browser-text { font-size: 13.5px; }

/* 存起來的完整文字（版本瀏覽器／歷史紀錄共用）：【標籤】變成金色小標題，
   內容一段一段分開，不再是整團文字擠在一起 */
.archived-label {
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--goldd);
}
.archived-label:first-child { margin-top: 0; }
.archived-para {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink);
  white-space: pre-wrap;
}
.archived-para:last-child { margin-bottom: 0; }

/* 每一輪改完的版本直接展開顯示，不用學員自己點開摺疊區塊才看得到 */
.round-revised-label {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--goldd);
}
.round-revised-text {
  margin-top: 4px;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(214,178,107,0.06);
  border-radius: 0 8px 8px 0;
}

/* 讀者視角優化迴圈的五級判斷標準，用顏色快速分辨過關／還沒到位／完全不行 */
.verdict-pass { color: var(--ok); font-weight: 700; }
.verdict-mid { color: var(--warn); font-weight: 700; }
.verdict-fail { color: var(--danger); font-weight: 700; }

/* 待補充版：文字裡的 Qx 缺口標記反白，讓學員一眼找到還要填什麼 */
.gap-marker {
  background: rgba(224,184,90,0.22);
  color: var(--gold);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 600;
}
.gapfill-q {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cardln);
}
.gapfill-q:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.gapfill-answer { margin-top: 6px; }

.beat-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.beat-table th, .beat-table td { border: 1px solid var(--cardln); padding: 8px 10px; text-align: left; vertical-align: top; }
.beat-table th { color: var(--goldd); font-weight: 600; background: rgba(255,255,255,0.03); }

.summary-box {
  margin-top: 10px;
  line-height: 1.8;
  font-size: 14px;
  font-family: "Noto Sans TC", sans-serif;
}

.top-fix {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--creamhl);
}
.top-fix h4 { color: var(--gold); margin: 0 0 6px; font-size: 14px; }

.error-box {
  border: 1px solid var(--danger);
  background: rgba(224,120,90,0.1);
  color: #F4C9BB;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.7;
}

.loading { color: var(--mute); font-size: 13.5px; padding: 10px 0; }

.footer {
  text-align: center;
  color: var(--mute);
  font-size: 12px;
  padding: 30px 20px 40px;
}
.footer p { margin: 4px 0; }
.footer a { color: var(--gold); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-copyright { margin-top: 10px; color: var(--mute); opacity: 0.85; }

.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--gold);
  color: #14274A;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: 999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   UI 改版：左側步驟導覽 ＋ 右側 AI 品牌教練
   先套用在「0．我的定位」，其他站沿用同一套 layout shell，
   視覺內容（hero／coach 文案）之後陸續補上。
   ============================================================ */

/* ---- Topbar：印章式品牌標記 + 頂部說明列 ---- */
.brand-mark { border-width: 1.5px; }
.brand-eyebrow {
  font-size: 10.5px;
  letter-spacing: 3px;
  color: var(--gold);
  margin: 0 0 3px;
  text-transform: uppercase;
}

/* ---- 桌面版整體排版：左側步驟導覽 + 右側內容 ---- */
.layout { display: block; }
@media (min-width: 981px) {
  .layout { display: grid; grid-template-columns: 258px 1fr; align-items: start; }
}

/* ---- 左側步驟導覽 ---- */
.sidebar { padding: 18px 16px 8px; }
@media (min-width: 981px) {
  .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    padding: 26px 16px 30px;
    border-right: 1px solid var(--cardln);
  }
}
.side-label {
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--gold);
  margin: 0 8px 14px;
  text-transform: uppercase;
}
.side-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 16px;
  color: var(--mute);
  font-size: 12px;
  white-space: nowrap;
}
.side-progress .bar {
  flex: 1;
  height: 3px;
  background: var(--cardln);
  border-radius: 3px;
  overflow: hidden;
}
.side-progress .bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--goldd));
  border-radius: 3px;
  transition: width .3s ease;
}
.nav-steps { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sidebar .navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink2);
  text-align: left;
  width: 100%;
  font-family: "Noto Sans TC", sans-serif;
  white-space: normal;
  overflow: visible;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sidebar .navitem .num {
  flex-shrink: 0;
  width: 27px; height: 27px;
  border-radius: 50%;
  border: 1px solid var(--cardln);
  display: flex; align-items: center; justify-content: center;
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--goldd);
  background: var(--creamhl);
}
.navitem-home { margin-bottom: 10px; padding-bottom: 15px; border-bottom: 1px dashed var(--cardln); }
.navitem-home .num { color: var(--gold); }
.navitem-copy b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; text-wrap: balance; }
.navitem-copy small { display: block; font-size: 10.5px; margin-top: 1px; color: var(--mute); font-weight: 400; }
.sidebar .navitem:hover { border-color: var(--cardln); background: rgba(255,255,255,0.03); }
.sidebar .navitem.active {
  border-color: rgba(230,199,125,.7);
  background: linear-gradient(90deg, rgba(214,178,107,.18), rgba(25,53,93,.5));
  box-shadow: inset 3px 0 0 var(--gold);
}
.sidebar .navitem.active .num { background: var(--gold); color: var(--bgbot); border-color: var(--gold); }
.sidebar .navitem.active .navitem-copy b { color: #fff; }

@media (max-width: 980px) {
  .sidebar { border-bottom: 1px solid var(--cardln); padding: 14px 16px 12px; }
  .side-label { display: none; }
  .side-progress { margin: 0 2px 14px; font-size: 13px; }
  .nav-steps { flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  /* min-width 拉大到能放下 4～5 個字的完整標籤，字級也放大，
     這樣標籤不會被迫斷行、更不會出現斷行斷到只剩一個字的狀況 */
  .sidebar .navitem { width: auto; flex-direction: column; align-items: flex-start; min-width: 108px; flex-shrink: 0; gap: 6px; padding: 10px 12px 11px; scroll-snap-align: start; }
  .sidebar .navitem .num { width: 30px; height: 30px; font-size: 13px; }
  .navitem-copy b { font-size: 14px; white-space: nowrap; }
  .navitem-copy small { display: none; }
  .navitem-home { margin-bottom: 0; padding-bottom: 10px; border-bottom: none; border-right: 1px dashed var(--cardln); padding-right: 12px; }
}

/* ---- 主內容區 ---- */
#app { max-width: 1120px; margin: 0 auto; padding: 22px 18px 80px; }
@media (min-width: 981px) { #app { padding: 26px 32px 80px; } }

/* ---- 0．我的定位：Hero ---- */
.persona-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(214,178,107,.4);
  border-radius: 20px;
  padding: 24px 26px;
  margin-bottom: 20px;
  background: linear-gradient(102deg, rgba(21,48,85,.97), rgba(10,28,54,.92));
  box-shadow: 0 18px 44px rgba(3,9,20,.3);
}
.persona-hero:before {
  content: "";
  position: absolute; inset: 0;
  background: url('/img/brand-texture.jpg') center/cover;
  opacity: .18;
  pointer-events: none;
}
.persona-hero-copy { position: relative; z-index: 1; max-width: 620px; }
.persona-hero .kicker { color: var(--gold); font-size: 11px; letter-spacing: 3px; margin-bottom: 8px; }
.persona-hero h2 { font-size: 24px; line-height: 1.45; margin: 0 0 10px; }
.persona-hero h2 em { font-style: normal; }

/* 亮金色漸層文字，只用在最需要被看到的重點字，不是平鋪整片，維持質感 */
.gold-shine {
  background: linear-gradient(180deg, #F7E3B0 0%, #E7BE6E 42%, #C6923B 75%, #A9782B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #E7BE6E;
}
.persona-hero p { margin: 0; color: var(--ink2); font-size: 13.5px; line-height: 1.8; }
.persona-hero .micro { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; position: relative; z-index: 1; }
.persona-hero .micro span {
  padding: 6px 12px;
  border: 1px solid rgba(214,178,107,.3);
  border-radius: 18px;
  color: var(--ink2);
  background: rgba(8,21,42,.5);
  font-size: 11px;
}
.persona-hero-art {
  position: absolute;
  right: -6px; bottom: -14px;
  width: 168px;
  pointer-events: none;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.4));
}
@media (max-width: 720px) { .persona-hero-art { display: none; } }
@media (min-width: 981px) { .persona-hero-art { width: 210px; right: 14px; bottom: -18px; } }
@media (max-width: 600px) {
  .persona-hero { padding: 20px 18px; }
  .persona-hero h2 { font-size: 20px; line-height: 1.5; }
  .persona-hero p { font-size: 14px; line-height: 1.75; }
}

/* ---- 0．我的定位：表單卡 + AI 品牌教練卡 併排 ---- */
.workspace { display: block; }
@media (min-width: 981px) {
  .workspace { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 20px; align-items: start; }
}
.form-card { position: relative; }
.form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form-head h2 { margin: 0; }
.saved-badge {
  font-size: 11px;
  color: var(--ok);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
}
.saved-badge.show { opacity: 1; }
.saved-badge:before {
  content: "✓";
  width: 17px; height: 17px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  background: rgba(127,191,143,.15);
  border: 1px solid var(--ok);
}
.tip-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(90deg, #F7F1E6, #E7D4A9);
  color: #0E2142;
  border-radius: 12px;
  padding: 13px 15px;
  margin: 14px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
.tip-banner .spark {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #0D2343;
  color: var(--gold2, #F0D493);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.tip-banner strong { display: block; font-size: 13px; }
.tip-banner span { display: block; font-size: 11.5px; color: #526079; margin-top: 2px; line-height: 1.5; }

/* ---- AI 品牌教練卡 ---- */
.coach {
  border-radius: 20px;
  border: 1px solid var(--cardln);
  background: linear-gradient(180deg, rgba(22,47,84,.92), rgba(13,32,61,.94));
  overflow: hidden;
  margin-top: 20px;
  box-shadow: 0 18px 44px rgba(3,9,20,.28);
}
@media (min-width: 981px) { .coach { margin-top: 0; } }
.coach-top {
  position: relative;
  height: 220px;
  background: radial-gradient(circle at 50% 0%, rgba(214,178,107,.16), transparent 60%);
}
.coach-badge {
  position: absolute; z-index: 2;
  top: 16px; left: 16px;
  padding: 5px 10px;
  border-radius: 14px;
  background: rgba(6,17,34,.78);
  border: 1px solid rgba(230,199,125,.7);
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--gold2, #F0D493);
}
.coach-portrait {
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 204px;
  width: calc(100% - 32px);
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 14px 14px 0 0;
}
.coach-body { padding: 18px 20px 20px; }
.coach-body h4 { font-size: 19px; margin: 0; text-wrap: balance; }
.coach-body p { font-size: 12px; line-height: 1.7; color: var(--ink2); margin: 8px 0 14px; }
.coach-list { display: grid; gap: 8px; margin-bottom: 4px; list-style: none; padding: 0; }
.coach-list div { font-size: 11.5px; color: var(--ink2); display: flex; gap: 8px; align-items: flex-start; }
.coach-list i {
  font-style: normal;
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(214,178,107,.14);
  color: var(--gold2, #F0D493);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.coach-cta {
  margin-top: 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #0C203C;
  padding: 11px 13px;
  font-size: 11.5px;
  display: flex; justify-content: space-between; align-items: center;
  border: none; width: 100%;
  cursor: pointer;
  font-family: "Noto Sans TC", sans-serif;
  transition: transform .1s ease;
}
.coach-cta:active { transform: scale(0.98); }
.coach-cta b { color: #9C7125; }

/* ---- 0．我的定位：底部操作列 ---- */
#panel-persona .actions {
  border-top: 1px solid var(--cardln);
  padding-top: 16px;
  margin-top: 22px;
}

/* ============================================================
   總覽首頁：九宮格入口，點卡片直接進到對應的站
   ============================================================ */
.overview-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(214,178,107,.4);
  border-radius: 20px;
  padding: 26px 28px;
  margin-bottom: 22px;
  min-height: 300px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(100deg, rgba(8,17,34,.86) 0%, rgba(8,17,34,.62) 42%, rgba(8,17,34,.4) 100%),
    url('/img/coach-lecture-wide.jpg') center 38%/cover;
  box-shadow: 0 18px 44px rgba(3,9,20,.3);
}
@media (max-width: 600px) {
  .overview-hero { min-height: 280px; padding: 20px 18px; }
  .overview-hero-id span { font-size: 13px; }
}
.overview-hero-copy { position: relative; z-index: 1; max-width: 620px; }
.overview-hero-id { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.overview-hero-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold);
  flex-shrink: 0;
}
.overview-hero-id span { font-size: 12.5px; color: var(--gold); letter-spacing: .5px; }
.overview-hero .kicker { color: var(--gold); font-size: 11px; letter-spacing: 3px; margin-bottom: 8px; }
.overview-hero h2 { font-size: 25px; line-height: 1.45; margin: 0 0 10px; }
.overview-hero h2 em { font-style: normal; }
.overview-hero p { margin: 0; color: var(--ink2); font-size: 13.5px; line-height: 1.8; }
@media (max-width: 600px) {
  .overview-hero h2 { font-size: 20px; line-height: 1.5; }
  .overview-hero p { font-size: 14px; line-height: 1.75; }
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 760px) { .overview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .overview-grid { grid-template-columns: 1fr; } }

.overview-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--cardln);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all .15s ease;
  font-family: "Noto Sans TC", sans-serif;
  color: inherit;
}
.overview-card:hover {
  border-color: var(--gold);
  background: linear-gradient(90deg, rgba(214,178,107,.1), rgba(19,42,76,.6));
  transform: translateY(-2px);
}
.overview-card img {
  width: 58px; height: 58px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.overview-card-copy { min-width: 0; }
.overview-card-copy .num {
  display: block;
  font-family: "Noto Serif TC", serif;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--goldd);
  margin-bottom: 2px;
}
.overview-card-copy b { display: block; font-size: 15px; color: var(--ink); text-wrap: balance; }
.overview-card-copy small { display: block; font-size: 11.5px; color: var(--mute); margin-top: 3px; line-height: 1.5; text-wrap: balance; }
@media (max-width: 600px) {
  .overview-card-copy b { font-size: 15.5px; }
  .overview-card-copy small { font-size: 12.5px; }
}

/* ============================================================
   各站固定的「老師提示列」：人物照片固定存在，不跟情境插圖搶焦點
   ============================================================ */
.teacher-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 10px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--cardln);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(19,42,76,.7), rgba(13,32,61,.55));
}
.teacher-strip-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold);
  flex-shrink: 0;
}
.teacher-strip-mid { flex: 1; min-width: 0; }
.teacher-strip-mid b { display: block; font-size: 12.5px; color: var(--gold); letter-spacing: .3px; }
.teacher-strip-mid span { display: block; font-size: 13.5px; color: var(--ink2); margin-top: 3px; line-height: 1.5; }
.teacher-strip-status {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--mute);
  padding: 5px 12px;
  border: 1px solid var(--cardln);
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .teacher-strip { padding: 10px 14px; gap: 10px; }
  .teacher-strip-avatar { width: 40px; height: 40px; }
  .teacher-strip-status { display: none; }
  .teacher-strip-mid b { font-size: 13px; }
  .teacher-strip-mid span { font-size: 14px; line-height: 1.6; }
}

/* ============================================================
   各站專屬 Hero：跟「0．我的定位」共用同一套視覺語言，
   但插圖是情境插圖，不是人物照片
   ============================================================ */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  border: 1px solid rgba(214,178,107,.4);
  border-radius: 20px;
  padding: 22px 26px;
  margin-bottom: 20px;
  background: linear-gradient(102deg, rgba(21,48,85,.97), rgba(10,28,54,.92));
  box-shadow: 0 18px 44px rgba(3,9,20,.3);
}
.page-hero-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
.page-hero .kicker { color: var(--gold); font-size: 11px; letter-spacing: 3px; margin-bottom: 8px; }
.page-hero h2 { font-size: 21px; line-height: 1.45; margin: 0 0 8px; }
.page-hero h2 em { font-style: normal; }
.page-hero p { margin: 0; color: var(--ink2); font-size: 13.5px; line-height: 1.8; }
.page-hero-art-wrap {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero-art-wrap:before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,178,107,.16), transparent 70%);
  pointer-events: none;
}
.page-hero-art {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
}
@media (min-width: 981px) { .page-hero-art-wrap { width: 240px; } }
@media (max-width: 720px) {
  .page-hero { flex-direction: column; text-align: center; padding: 20px 18px; }
  .page-hero-copy { max-width: 100%; }
  .page-hero-art-wrap { width: 52%; max-width: 220px; }
  .page-hero h2 { font-size: 20px; line-height: 1.5; }
  .page-hero p { font-size: 14px; line-height: 1.75; }
}

/* ---------- 上課密碼門 ---------- */
.pass-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--bgtop) 0%, var(--bgbot) 65%);
}
.pass-gate[hidden] { display: none; }
.pass-gate-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--gold);
  border-radius: 18px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.pass-gate-eyebrow {
  color: var(--goldd);
  font-size: 13px;
  letter-spacing: 0.22em;
  font-weight: 600;
  margin: 0 0 18px;
}
.pass-gate-lock { font-size: 34px; margin-bottom: 14px; }
.pass-gate-title {
  font-family: "Noto Serif TC", serif;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
}
.pass-gate-sub { color: var(--ink2); font-size: 14px; line-height: 1.8; margin: 0 0 22px; }
.pass-gate-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid var(--cardln);
  background: var(--creamhl);
  color: var(--ink);
  font-size: 15px;
  text-align: center;
  outline: none;
  margin-bottom: 14px;
}
.pass-gate-input:focus { border-color: var(--gold); }
.pass-gate-btn {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--goldd));
  color: #1A1400;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.pass-gate-btn:hover { filter: brightness(1.05); }
.pass-gate-error {
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 0;
  min-height: 20px;
}
.pass-gate-footnote { color: var(--mute); font-size: 12px; margin: 18px 0 0; }