/* 睿才坊 AI CV Diagnosis —— 深藍 × 金色，對齊 ercf.abacusai.app/ai-model 的視覺 */
:root {
  --bg:            #0a1128;
  --bg-deep:       #060b1c;
  --panel:         #111a35;
  --panel-2:       #16203f;
  --line:          rgba(201, 168, 106, .22);
  --line-soft:     rgba(255, 255, 255, .08);
  --gold:          #c9a86a;
  --gold-bright:   #e8cf95;
  --gold-dim:      rgba(201, 168, 106, .5);
  --text:          #e8ecf5;
  --text-dim:      #97a1bb;
  --text-faint:    #6b7595;
  --danger:        #e2606a;
  --success:       #5bbf8f;
  --serif: "Cormorant Garamond", "Noto Serif TC", "Songti SC", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
           "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --radius: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
html { font-size: 16px; }   /* JS 字級按鈕改這裡（14–22px） */
/* mobile-base */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
img, video { max-width: 100%; height: auto; }
.svg-fluid, .brand-wordmark, #radar, #refine-img { max-width: 100%; height: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* 背景光暈 */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 520px at 12% -8%,  rgba(201,168,106,.10), transparent 60%),
    radial-gradient(760px 460px at 92% 4%,   rgba(90,120,220,.10),  transparent 62%),
    radial-gradient(1000px 700px at 50% 108%, rgba(201,168,106,.06), transparent 60%);
}
#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.wrap { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; padding: 0 22px; }

/* ---------- Hero logo ---------- */
.hero-logo-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.hero-logo {
  width: 104px; height: 104px; border-radius: 50%;
  border: 1.5px solid var(--line);
  background: radial-gradient(circle, #182140, #0a0f24);
  box-shadow: 0 0 34px rgba(201,168,106,.30), 0 12px 40px rgba(0,0,0,.5);
  animation: hero-float 5.2s ease-in-out infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0);    box-shadow: 0 0 30px rgba(201,168,106,.26), 0 12px 40px rgba(0,0,0,.5); }
  50%      { transform: translateY(-9px); box-shadow: 0 0 46px rgba(201,168,106,.42), 0 22px 48px rgba(0,0,0,.55); }
}

/* ---------- 頁首 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 11, 28, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in {
  max-width: 940px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; white-space: nowrap; }
.brand-mark {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); object-fit: cover;
  background: radial-gradient(circle, #1a2342, #0a0f24);
  box-shadow: 0 0 12px rgba(201,168,106,.25);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.12); box-shadow: 0 0 20px rgba(201,168,106,.5); }
.brand-wordmark {
  height: 20px; width: auto; display: block;
  filter: drop-shadow(0 0 6px rgba(201,168,106,.35));
  transition: filter .35s;
}
.brand-divider {
  width: 1px; height: 16px; background: var(--line);
}
.brand:hover .brand-wordmark { filter: drop-shadow(0 0 12px rgba(232,207,149,.6)); }
.brand-sub { font-size: 0.625rem; letter-spacing: .22em; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; padding-top: 2px; }

/* 字級調整 */
.fontctl { display: flex; gap: 4px; background: rgba(255,255,255,.04);
           border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px; }
.font-btn {
  border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  font-family: var(--serif); font-size: 0.9rem; line-height: 1;
  width: 34px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  transition: background .18s, color .18s, transform .2s;
}
.font-btn:hover { color: var(--gold-bright); background: rgba(201,168,106,.12); }
.font-btn:active { transform: scale(.9); }
.font-btn:disabled { opacity: .3; cursor: default; }
.topbar-ctls { display: flex; align-items: center; gap: 9px; }

/* 語言切換 */
.langs { display: flex; gap: 4px; background: rgba(255,255,255,.04);
         border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px; }
.lang-btn {
  border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  font: inherit; font-size: 0.7812rem; padding: 0.3125rem 0.8125rem; border-radius: 999px;
  transition: background .18s, color .18s; white-space: nowrap;
}
.lang-btn { transition: background .18s, color .18s, transform .2s; }
.lang-btn:hover { color: var(--text); }
.lang-btn:active { transform: scale(.94); }
.lang-btn[aria-pressed="true"] { background: rgba(201,168,106,.16); color: var(--gold-bright); }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 74px 0 30px; }
.eyebrow {
  font-size: 0.6875rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 22px;
}
.eyebrow::before, .eyebrow::after { content: "—"; margin: 0 13px; opacity: .55; }
h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.125rem, 6vw, 3.5rem); line-height: 1.16;
  margin: 0 0 20px; letter-spacing: .01em;
}
h1 .accent {
  background: linear-gradient(100deg, var(--gold), var(--gold-bright) 30%, #f6e7bb 50%, var(--gold-bright) 70%, var(--gold));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.lede { max-width: 38.75rem; margin: 0 auto; color: var(--text-dim); font-size: 1rem; }
.rule {
  width: 88px; height: 1px; margin: 30px auto; position: relative;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 25%, var(--gold-dim) 75%, transparent);
}
.rule::after {
  content: "◆"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); font-size: 0.4375rem; color: var(--gold);
  text-shadow: 0 0 8px rgba(201,168,106,.8);
}
.quote {
  max-width: 620px; margin: 0 auto; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--gold-dim);
  font-family: var(--serif); font-style: italic; font-size: 1.1875rem;
  color: #d6ddec; text-align: left; line-height: 1.65;
}

/* ---------- 步驟卡 ---------- */
.steps { display: grid; gap: 13px; margin: 44px 0 0; }
.step {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 22px 24px; text-align: center;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.step:hover, .step:active {
  transform: translateY(-5px); border-color: var(--line);
  box-shadow: 0 16px 38px rgba(0,0,0,.4), 0 0 24px rgba(201,168,106,.10);
}
.step-ico {
  width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.1875rem;
  background: rgba(201,168,106,.12); border: 1px solid var(--line);
  animation: ico-float 4.6s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .35s;
}
.step:nth-child(2) .step-ico { animation-delay: 1.5s; }
.step:nth-child(3) .step-ico { animation-delay: 3s; }
.step:hover .step-ico { transform: scale(1.18) rotate(-6deg); background: rgba(201,168,106,.22); }
@keyframes ico-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.step-t { font-family: var(--serif); font-size: 1.1875rem; margin-bottom: 0.3125rem; }
.step-d { color: var(--text-faint); font-size: 0.8438rem; line-height: 1.6; }

/* ---------- 區塊標題 ---------- */
section { padding: 62px 0; }
.sec-head { text-align: center; margin-bottom: 34px; }
.sec-head h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.625rem, 4vw, 2.25rem); margin: 0; }
.sec-head .rule { margin: 16px auto 14px; }
.sec-head p { color: var(--text-dim); margin: 0; font-size: 0.9062rem; }

/* ---------- 上傳 ---------- */
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px;
}
.drop {
  border: 1.5px dashed rgba(201,168,106,.34); border-radius: var(--radius);
  padding: 40px 22px; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s;
  background: rgba(255,255,255,.015);
}
.drop:hover, .drop.over { border-color: var(--gold); background: rgba(201,168,106,.07); }
.drop-ico .ico-lg { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.drop:hover .ico-lg, .drop.over .ico-lg { transform: scale(1.22) translateY(-3px); }
.drop-ico { font-size: 2rem; margin-bottom: 0.75rem; }
.drop-t { font-size: 0.9688rem; margin-bottom: 0.3125rem; }
.drop-d { color: var(--text-faint); font-size: 0.8125rem; }
.drop.has-file { border-style: solid; border-color: var(--gold-dim); }

label.fld { display: block; margin-top: 1.375rem; font-size: 0.8438rem; color: var(--text-dim); }
textarea {
  width: 100%; margin-top: 9px; min-height: 108px; resize: vertical;
  background: rgba(0,0,0,.28); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 0.8125rem 0.9375rem; font: inherit; font-size: 0.875rem; line-height: 1.65;
}
textarea:focus { outline: none; border-color: var(--gold-dim); }
.hint { color: var(--text-faint); font-size: 0.75rem; margin-top: 0.4375rem; }
.jd-modes { list-style: none; margin: 10px 0 0; padding: 0; }
.jd-modes li {
  position: relative; padding-left: 22px; margin-bottom: 6px;
  color: var(--text-faint); font-size: 0.78rem; line-height: 1.6;
}
.jd-modes li::before { position: absolute; left: 2px; top: 0; font-weight: 700; }
.jd-with::before    { content: "✓"; color: var(--success); }
.jd-without::before { content: "○"; color: var(--gold-dim); }
.jd-with { color: var(--text-dim); }

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 22px; padding: 15px 26px; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 500; letter-spacing: .03em;
  color: #1a1408; border: 0; border-radius: 11px;
  background: linear-gradient(100deg, var(--gold-bright), var(--gold));
  transition: filter .18s, transform .06s;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.submit::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 34px;
  left: -60px; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: btn-shine 3.6s ease-in-out infinite;
}
@keyframes btn-shine {
  0%, 55%  { left: -70px; }
  85%, 100% { left: calc(100% + 40px); }
}
.btn-ghost {
  background: transparent; color: var(--gold-bright);
  border: 0.0625rem solid var(--line); width: auto; margin: 0; padding: 0.625rem 1.25rem; font-size: 0.8438rem;
}
.btn-ghost:hover:not(:disabled) { background: rgba(201,168,106,.10); filter: none; }

.msg { margin-top: 1rem; padding: 0.8125rem 1rem; border-radius: 0.625rem; font-size: 0.875rem; display: none; }
.msg.show { display: block; }
.msg.err { background: rgba(226,96,106,.10); border: 1px solid rgba(226,96,106,.34); color: #f0a7ad; }
.msg.info { background: rgba(201,168,106,.09); border: 1px solid var(--line); color: var(--gold-bright); }

/* ---------- 進度 ---------- */
.progress { display: none; margin-top: 24px; text-align: center; }
.progress.show { display: block; }
.spinner {
  width: 42px; height: 42px; margin: 0 auto 16px; border-radius: 50%;
  border: 2.5px solid rgba(201,168,106,.20); border-top-color: var(--gold);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.prog-stage { font-size: 0.9375rem; margin-bottom: 0.3125rem; }
.prog-meta { color: var(--text-faint); font-size: 0.8125rem; }
.prog-track { height: 3px; background: rgba(255,255,255,.07); border-radius: 3px; margin-top: 18px; overflow: hidden; }
.prog-fill { height: 100%; width: 0; border-radius: 3px; transition: width .6s ease;
             background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }

/* ---------- 結果 ---------- */
#results { display: none; }
#results.show { display: block; }

/* minmax(0,1fr)：否則環的固定寬度會撐開 1fr 的 auto min-width，在窄螢幕溢出 */
.scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 26px; }
.score {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 20px 10px 16px; text-align: center;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s;
}
.score:hover { transform: translateY(-4px); border-color: rgba(201,168,106,.35); }
.score:hover .ring-fill { filter: drop-shadow(0 0 10px rgba(232,207,149,.85)); }

/* ---------- 金色資料環 ---------- */
.ringbox { position: relative; width: min(128px, 100%); margin: 0 auto; }
.ring { display: block; width: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring-track { stroke: rgba(201,168,106,.16); }
.ring-fill {
  stroke: url(#ring-grad); stroke-linecap: round;
  stroke-dasharray: 326.7;                 /* 2πr, r=52 */
  stroke-dashoffset: 326.7;                /* 0 分起點，JS 動畫推進 */
  transition: stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 0 5px rgba(232,207,149,.55));
}
.ring-num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.ring-num span {
  /* Cinzel：碑文式 lining 數字、等寬對齊，與 Arrie 字標同家族 —— 儀表感 */
  font-family: "Cinzel", var(--serif); font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .02em;
  font-size: clamp(1.5rem, 7vw, 2.125rem);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 78%, #b3945c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
.ring-num small {
  font-family: "Cinzel", var(--serif); font-weight: 500;
  font-size: 0.66rem; letter-spacing: .08em;
  color: var(--gold-dim); margin-top: 3px;
}
.score-l { font-size: 0.7812rem; color: var(--text-dim); margin-top: 0.625rem; }

/* ---------- SVG 圖示 ---------- */
.ico { width: 21px; height: 21px; flex: none; }
.ico-lg { width: 34px; height: 34px; }
.step-ico .ico { width: 22px; height: 22px; }
.block h3 .ico { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.block:hover h3 .ico { transform: scale(1.25) rotate(-8deg); }
.block { transition: border-color .35s, box-shadow .35s; }
.block:hover { border-color: rgba(201,168,106,.30); box-shadow: 0 10px 34px rgba(0,0,0,.35); }

/* ---------- 示範影片 ---------- */
.video-frame {
  position: relative; max-width: 340px; margin: 0 auto;
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,106,.08);
  background: var(--bg-deep);
}
.video-frame video { display: block; width: 100%; aspect-ratio: 9/16; }
.video-cta {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(6,11,28,.35); border: 0; cursor: pointer;
  transition: opacity .25s, background .25s;
}
.video-cta .ico-lg { width: 60px; height: 60px; filter: drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
.video-cta:hover { background: rgba(6,11,28,.15); }
.video-frame.playing .video-cta { opacity: 0; pointer-events: none; }
.video-frame.playing:hover .video-cta,
.video-frame.playing:active .video-cta { opacity: 1; pointer-events: auto; background: rgba(6,11,28,.2); }

/* ---------- 上傳雲晃動提示 ---------- */
@keyframes wiggle {
  0%, 74%, 100% { transform: translateY(0) rotate(0); }
  78% { transform: translateY(-6px) rotate(-5deg); }
  82% { transform: translateY(0)    rotate(4deg); }
  86% { transform: translateY(-4px) rotate(-3deg); }
  90% { transform: translateY(0)    rotate(0); }
}
.wiggle { animation: wiggle 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
.drop.has-file .wiggle { animation: none; }   /* 已選檔就安靜下來 */

/* ---------- 時間提示 / 頁尾 ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 10px; }
.badges .time-note { margin-top: 0; }
.privacy-badge {
  background: rgba(91,191,143,.08); border-color: rgba(91,191,143,.30);
  color: #8fd6b4;
}
.privacy-badge .hl {
  color: #b8f0d4; font-weight: 700;
  background: rgba(91,191,143,.16);
  padding: 1px 7px; border-radius: 6px; margin-left: 2px;
  box-shadow: 0 0 12px rgba(91,191,143,.22);
}
.time-note {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px 0 0; padding: 7px 15px; border-radius: 999px;
  background: rgba(201,168,106,.08); border: 1px solid var(--line);
  color: var(--gold-bright); font-size: 0.8125rem;
}
.disclaimer {
  max-width: 40rem; margin: 1.25rem auto 0; font-size: 0.7188rem;
  line-height: 1.7; color: var(--text-faint);
}
.madeby {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 1.125rem; color: var(--text-dim); font-size: 0.7812rem;
}
.madeby-logo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* ---------- 進場動效（IntersectionObserver 掛 .in） ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ring-fill { transition: none; }
  .wiggle, .hero-logo, .step-ico, .btn.submit::after, h1 .accent,
  .refine-card, .refine-card .ico, .refine-card::after { animation: none; }
  #stars { display: none; }
}

.block {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 24px 26px; margin-bottom: 16px;
}
.block.accent-gold  { border-left: 3px solid var(--gold); }
.block.accent-red   { border-left: 3px solid var(--danger); }
.block.accent-green { border-left: 3px solid var(--success); }
.block h3 {
  font-family: var(--serif); font-size: 1.1875rem; font-weight: 600;
  margin: 0 0 14px; display: flex; align-items: center; gap: 9px;
}
.block.accent-gold  h3 { color: var(--gold-bright); }
.block.accent-red   h3 { color: #efa3a9; }
.block.accent-green h3 { color: #8fd6b4; }
.block p { margin: 0; color: #cdd5e6; font-size: 0.9062rem; }

ul.marked { list-style: none; margin: 0; padding: 0; }
ul.marked li { position: relative; padding-left: 1.625rem; margin-bottom: 0.6875rem; font-size: 0.9062rem; color: #cdd5e6; }
ul.marked li:last-child { margin-bottom: 0; }
ul.marked li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
ul.issues li::before  { content: "✕"; color: var(--danger); }
ul.improve li::before { content: "✓"; color: var(--success); }

/* 完整報告 */
.report { padding: 30px 32px; }
.report h2 { font-family: var(--serif); font-size: 1.5625rem; font-weight: 600; margin: 0 0 0.375rem; color: var(--gold-bright); }
.report h3 { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; margin: 1.875rem 0 0.625rem; color: var(--gold); }
.report h4 { font-size: 0.9375rem; font-weight: 600; margin: 1.25rem 0 0.5rem; color: #b9c3da; }
.report p  { margin: 0 0 0.8125rem; font-size: 0.9062rem; color: #c6cee1; }
.report ul, .report ol { margin: 0 0 0.8125rem; padding-left: 1.375rem; font-size: 0.9062rem; color: #c6cee1; }
.report li { margin-bottom: 8px; }
.report strong { color: var(--gold-bright); font-weight: 600; }
.report hr { border: 0; border-top: 1px solid var(--line-soft); margin: 26px 0; }

.actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin: 26px 0 8px; }

footer {
  border-top: 1px solid var(--line-soft); margin-top: 56px;
  padding: 1.875rem 0 2.75rem; text-align: center; color: var(--text-faint); font-size: 0.7812rem;
}
footer .dotline { color: var(--gold-dim); font-family: var(--serif); font-size: 0.9375rem; margin-bottom: 0.625rem; letter-spacing: .05em; }

@media (min-width: 720px) {
  .steps  { grid-template-columns: repeat(3, 1fr); }
  .btn.submit { width: auto; min-width: 260px; margin-left: auto; margin-right: auto; display: flex; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .topbar-in { padding: 10px 16px; gap: 10px; }
  .brand-sub {
    max-width: 42vw; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: .12em; font-size: 0.55rem;
  }
  .eyebrow { letter-spacing: .18em; }
  .eyebrow::before, .eyebrow::after { margin: 0 8px; }
  h1 { font-size: clamp(1.75rem, 7.2vw, 2.6rem); }
  .lede { font-size: 0.95rem; padding: 0 4px; }
  .quote { font-size: 1.05rem; padding-left: 16px; max-width: 100%; }
  .refine-card { padding: 18px 14px; min-height: 7.5rem; }
  .rc-t { font-size: 1.02rem; }
  .rc-d { font-size: 0.74rem; }
  #refine-img { display: block; width: 100%; height: auto; }
  .report { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .report table { display: block; max-width: 100%; overflow-x: auto; }
  .uf-row { flex-direction: column; }
  .uf-row .btn { width: 100%; }
  .jd-fetch { width: 100%; justify-content: center; }
  .to-top {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(4.6rem, calc(env(safe-area-inset-bottom) + 3.8rem));
  }
}

@media (max-width: 520px) {
  .topbar {
    padding-top: env(safe-area-inset-top);
  }
  .topbar-in {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: nowrap; padding: 8px 12px;
  }
  .brand { justify-content: flex-start; min-width: 0; flex: 0 1 auto; gap: 6px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-wordmark { height: 16px; }
  .brand-sub { display: none; } /* long visibility tagline — hide on narrow phones */
  .brand-divider { display: none; }
  .topbar-ctls {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; flex: 0 0 auto; flex-wrap: nowrap; min-width: 0;
  }
  .fontctl { padding: 2px; gap: 2px; flex: none; }
  .font-btn { width: 32px; height: 32px; font-size: 0.8rem; }
  .langs { padding: 2px; gap: 2px; flex: none; }
    .lang-btn {
    flex: none; padding: 6px 8px; font-size: 0.7rem; min-height: 32px;
    line-height: 1.1;
  }
  /* Compact labels so logo + font + langs stay one row */
  .lang-btn[data-lang="en"] { font-size: 0; }
  .lang-btn[data-lang="en"]::after { content: "EN"; font-size: 0.72rem; }
  .lang-btn[data-lang="zh-TW"] { font-size: 0; }
  .lang-btn[data-lang="zh-TW"]::after { content: "繁中"; font-size: 0.72rem; }
  .lang-btn[data-lang="zh-CN"] { font-size: 0; }
  .lang-btn[data-lang="zh-CN"]::after { content: "简中"; font-size: 0.72rem; }

  .hero { padding: 36px 0 22px; }
  .hero-logo { width: 84px; height: 84px; }
  .steps { gap: 10px; }
  .step { padding: 18px 16px; }
  .report { padding: 20px 14px; }
  section { padding: 40px 0; }
  .scores { gap: 6px; }
  .score { padding: 12px 2px 10px; border-radius: 12px; }
  .score-l { font-size: 0.65rem; line-height: 1.25; }
  .ring-num { font-size: clamp(1.25rem, 6.5vw, 1.75rem); }
  .block { padding: 18px 14px; }
  .drop { padding: 28px 12px; }
  .drop:active { border-color: var(--gold); background: rgba(201,168,106,.09); }
  /* iOS: prevent input zoom */
  textarea, input, select, .btn { font-size: 16px !important; }
  .actions .btn-ghost { flex: 1 1 auto; min-height: 44px; }
  .video-frame { max-width: min(300px, 78vw); }
  .price-card { padding: 22px 16px; }
  .pc-name { font-size: 1.05rem; }
  .badges { gap: 8px; }
  .badges .time-note { font-size: 0.75rem; }
  .unlock-form { margin: 18px 8px 0; padding: 18px 14px; }
  footer { padding-bottom: max(2.75rem, calc(env(safe-area-inset-bottom) + 1.5rem)); }
}

@media (max-width: 380px) {
  .scores { grid-template-columns: 1fr; gap: 10px; }
  .score { padding: 14px 10px; }
  .lang-btn { padding: 10px 4px; font-size: 0.75rem; }
  h1 { font-size: 1.65rem; }
}

@media print {
  body::before, .topbar, .steps, #upload-section, .actions, footer, .progress { display: none !important; }
  body { background: #fff; color: #111; }
  .block, .score, .card { background: #fff; border: 1px solid #ddd; break-inside: avoid; }
  .report h2, .report h3, .block h3, .ring-num span { color: #8a6d2f !important; -webkit-text-fill-color: #8a6d2f; }
  .video-frame, #stars, .hero-logo-wrap { display: none; }
  .report p, .report li, .block p, ul.marked li { color: #222 !important; }
}

/* ---------- 示例報告模式 ---------- */
.sample-tag {
  display: none; vertical-align: middle; margin-right: 10px;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: .12em; color: var(--gold-bright);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
  background: rgba(201,168,106,.10);
}
#results.sample-mode .sample-tag { display: inline-block; }

.sample-notice {
  display: none; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 12px 18px; border-radius: 12px;
  background: rgba(201,168,106,.08); border: 1px solid var(--line);
  color: var(--gold-bright); font-size: 0.85rem; text-align: center;
}
#results.sample-mode .sample-notice { display: flex; }
.sample-notice .btn-ghost { margin: 0; padding: 8px 16px; font-size: 0.8rem; }

/* 斜向浮水印：蓋在每個內容卡上，不擋互動 */
#results.sample-mode .block,
#results.sample-mode .radar-card,
#results.sample-mode .score { position: relative; overflow: hidden; }
#results.sample-mode .block::after,
#results.sample-mode .radar-card::after,
#results.sample-mode .score::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140'><text x='120' y='76' text-anchor='middle' transform='rotate(-24 120 70)' font-family='Georgia,serif' font-size='26' letter-spacing='6' fill='rgba(201,168,106,0.09)'>SAMPLE</text></svg>");
  background-size: 240px 140px;
}
/* 示範模式：下載鈕保留（讓人看到會拿到的 PNG），每個區塊標題帶 [SAMPLE] 記號 */
#results.sample-mode .block h3 > span[data-i18n]::after,
#results.sample-mode .radar-title::after {
  content: " 〔SAMPLE〕"; color: var(--gold-dim);
  font-family: var(--sans); font-size: 0.68em; letter-spacing: .08em; font-weight: 600;
}

@media print { .sample-notice { display: none !important; } }

/* ---------- 回饋列 ---------- */
.feedback {
  display: none; margin: 4px 0 18px; padding: 14px 18px;
  border-radius: 12px; text-align: center;
  background: rgba(201,168,106,.06); border: 1px solid var(--line-soft);
}
.feedback.show { display: block; }
.fb-row { display: flex; align-items: center; justify-content: center; gap: 12px;
          color: var(--text-dim); font-size: 0.88rem; flex-wrap: wrap; }
.fb-btn {
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.04);
  border-radius: 999px; width: 42px; height: 42px; font-size: 1.1rem; cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, background .2s;
}
.fb-btn:hover { transform: scale(1.15); border-color: var(--line); }
.fb-btn[aria-pressed="true"] { background: rgba(91,191,143,.18); border-color: rgba(91,191,143,.5); }
.feedback.done .fb-btn, .feedback.done .fb-chips { display: none; }
.feedback.done .fb-row { color: var(--gold-bright); }
.fb-chips { display: none; margin-top: 12px; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fb-chips.show { display: flex; }
.fb-chip {
  border: 1px solid var(--line-soft); background: transparent; color: var(--text-dim);
  border-radius: 999px; padding: 6px 14px; font-size: 0.78rem; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.fb-chip:hover { color: var(--text); border-color: var(--line); }
.fb-chip[aria-pressed="true"] { background: rgba(201,168,106,.16); color: var(--gold-bright); border-color: var(--line); }
#results.sample-mode .feedback { display: none; }   /* 示範報告不收回饋 */
@media print { .feedback { display: none !important; } }

/* ---------- 改寫 / 求職信 ---------- */
.refine-cards { display: none; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; margin: 4px 0 8px; }
#results.show .refine-cards { display: grid; }
#results.sample-mode .refine-cards,
#results.sample-mode .refine-privacy,
#results.sample-mode .refine-out { display: none !important; }
.refine-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 22px 16px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font: inherit;
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
  animation: refine-glow 3.8s ease-in-out infinite;
}
.refine-card:nth-child(2) { animation-delay: .55s; }
.refine-card:nth-child(3) { animation-delay: 1.1s; }
@keyframes refine-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(201,168,106,0); border-color: var(--line); }
  50% {
    box-shadow: 0 0 18px rgba(201,168,106,.16), inset 0 0 0 1px rgba(201,168,106,.12);
    border-color: rgba(201,168,106,.55);
  }
}
.refine-card .ico {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .25s, filter .25s;
  animation: refine-ico-float 2.8s ease-in-out infinite;
}
.refine-card:nth-child(2) .ico { animation-delay: .4s; }
.refine-card:nth-child(3) .ico { animation-delay: .85s; }
@keyframes refine-ico-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.refine-card::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; width: 28px;
  left: -70px; transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(232,207,149,.22), transparent);
  animation: refine-sheen 4.8s ease-in-out infinite;
}
.refine-card:nth-child(2)::after { animation-delay: 1.2s; }
.refine-card:nth-child(3)::after { animation-delay: 2.2s; }
@keyframes refine-sheen {
  0%, 60% { left: -80px; opacity: 0; }
  70% { opacity: 1; }
  90%, 100% { left: calc(100% + 50px); opacity: 0; }
}
.refine-card:hover:not(:disabled) {
  transform: translateY(-4px); border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(0,0,0,.4), 0 0 22px rgba(201,168,106,.18);
  animation: none;
}
.refine-card:hover:not(:disabled) .ico {
  transform: scale(1.18) translateY(-2px);
  color: var(--gold-bright);
  filter: drop-shadow(0 0 8px rgba(201,168,106,.45));
  animation: none;
}
.refine-card:active:not(:disabled) {
  transform: translateY(-1px) scale(.97);
  box-shadow: 0 6px 16px rgba(0,0,0,.28), 0 0 10px rgba(201,168,106,.1);
}
.refine-card:focus-visible {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(201,168,106,.35), 0 10px 28px rgba(0,0,0,.35);
}
.refine-card:disabled { opacity: .5; cursor: wait; animation: none; }
.refine-card:disabled .ico, .refine-card:disabled::after { animation: none; }
.rc-t { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--gold-bright); }
.rc-d { font-size: 0.78rem; color: var(--text-dim); line-height: 1.55; }
.refine-privacy {
  display: none; margin: 0 0 18px; text-align: center;
  color: var(--text-faint); font-size: 0.75rem;
}
#results.show .refine-privacy { display: block; }
.refine-out { display: none; }
.refine-out.show { display: block; }
.refine-progress { display: none; text-align: center; padding: 18px 0; }
.refine-out.loading .refine-progress { display: block; }
.ig-steps {
  list-style: none; margin: 14px auto 0; padding: 0; max-width: 280px;
  text-align: left; font-size: 0.82rem; color: var(--text-faint);
}
.ig-steps li {
  position: relative; padding: 5px 0 5px 22px; line-height: 1.4;
}
.ig-steps li::before {
  content: ""; position: absolute; left: 4px; top: 0.7em;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.ig-steps li.active { color: var(--gold-bright); }
.ig-steps li.active::before {
  background: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,106,.25);
}
.ig-steps li.done { color: var(--text-dim); }
.ig-steps li.done::before { background: #5bbf8f; box-shadow: none; }
@media (max-width: 720px) {
  .refine-cards { grid-template-columns: 1fr; }
}
.refine-out.loading #refine-md, .refine-out.loading .refine-actions { display: none; }
.refine-actions { margin-top: 18px; }
#refine-md h2 { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-bright); margin: 18px 0 8px; }
#refine-md h3 { font-family: var(--serif); font-size: 1.05rem; color: var(--gold); margin: 14px 0 6px; }
#refine-md p, #refine-md li { font-size: 0.9rem; color: #c6cee1; }
#refine-md ul, #refine-md ol { padding-left: 22px; }
@media (max-width: 560px) { .refine-cards { grid-template-columns: 1fr; } }
@media print { .refine-cards, .refine-privacy { display: none !important; } }

/* ---------- 定價 ---------- */
.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.price-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 26px 22px; text-align: center;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
}
.price-card:hover { transform: translateY(-5px); border-color: var(--line);
  box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.price-card.featured { border-color: var(--gold); box-shadow: 0 0 28px rgba(201,168,106,.14); }
.pc-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(100deg, var(--gold-bright), var(--gold));
  color: #1a1408; font-size: 0.68rem; font-weight: 700; letter-spacing: .08em;
  padding: 3px 14px; border-radius: 999px; white-space: nowrap;
}
.pc-name { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--gold-bright); }
.pc-amount {
  font-family: "Cinzel", var(--serif); font-weight: 600; font-size: 2rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc-alt { display: block; font-size: 0.72rem; color: var(--text-faint); margin-top: 2px; }
.pc-feat { list-style: none; margin: 0; padding: 0; flex: 1; }
.pc-feat li {
  position: relative; padding: 5px 0 5px 22px; text-align: left;
  font-size: 0.82rem; color: var(--text-dim); line-height: 1.55;
}
.pc-feat li::before { content: "✓"; position: absolute; left: 2px; color: var(--success); font-weight: 700; }
.pc-btn { width: 100%; margin: 0; }
.price-11 { text-align: center; margin-top: 22px; color: var(--text-dim); font-size: 0.85rem; }
.gold-link { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }

/* 免費層預覽圖與解鎖 CTA */
#refine-img { width: 100%; border-radius: 10px; border: 1px solid var(--line-soft); }
.refine-upsell { display: none; text-align: center; margin-top: 16px; }
.refine-upsell.show { display: block; }
.refine-upsell p { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 12px; }
.refine-upsell .btn { width: auto; min-width: 240px; margin: 0 auto; }

@media (max-width: 700px) { .price-cards { grid-template-columns: 1fr; } }
@media print { #pricing { display: none !important; } }

/* ---------- 解鎖留單表單 ---------- */
.unlock-form {
  display: none; max-width: 560px; margin: 26px auto 0; padding: 24px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--gold); border-radius: var(--radius);
  box-shadow: 0 0 28px rgba(201,168,106,.12); text-align: center;
}
.unlock-form.show { display: block; }
.uf-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
            color: var(--gold-bright); margin-bottom: 6px; }
.uf-note { color: var(--text-dim); font-size: 0.82rem; margin: 0 0 16px; line-height: 1.6; }
.uf-row { display: flex; gap: 10px; flex-wrap: wrap; }
.uf-row input {
  flex: 1 1 220px; background: rgba(0,0,0,.28); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 12px 15px; font: inherit; font-size: 0.9rem;
}
.uf-row input:focus { outline: none; border-color: var(--gold-dim); }
.uf-row .btn { width: auto; margin: 0; padding: 12px 22px; }
#uf-err.show, #uf-ok.show { display: block; margin-top: 12px; }

/* restored 橫幅內的「從這個瀏覽器清除」按鈕 */
.clear-saved {
  background: none; border: 1px solid var(--line); color: var(--gold-bright);
  border-radius: 0.5rem; padding: 0.2rem 0.65rem; font-size: 0.8125rem;
  cursor: pointer; margin-left: 0.4rem; font-family: inherit;
  transition: background .2s, border-color .2s;
}
.clear-saved:hover { background: rgba(201,168,106,.12); border-color: var(--gold-bright); }

/* 等待具象化：輪播中的分析師任務卡 */
.prog-analyst {
  display: none; margin: 0.6rem auto 0; max-width: 30rem;
  padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: 0.625rem;
  background: rgba(201,168,106,.06); color: var(--gold-bright);
  font-size: 0.875rem; line-height: 1.55;
}
.prog-analyst.show { display: block; }
.prog-analyst.tick { animation: analystIn .5s ease; }
@keyframes analystIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* 報告內的改寫示範：前後對比色塊 */
.report li.ba-before, .report li.ba-after {
  list-style: none; margin: 0.35rem 0 0.35rem -1.1rem;
  padding: 0.55rem 0.8rem; border-radius: 0.5rem; font-size: 0.92em;
}
.report li.ba-before {
  background: rgba(226,96,106,.08); border-left: 3px solid rgba(226,96,106,.65);
}
.report li.ba-after {
  background: rgba(91,191,143,.08); border-left: 3px solid rgba(91,191,143,.6);
}

/* 分析師輪播卡：SVG 圖標 + 文字 */
.prog-analyst { display: none; align-items: center; gap: 0.6rem; text-align: left; }
.prog-analyst.show { display: flex; }
.prog-analyst .ico { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
/* 倒讚 = 拇指圖標旋轉 180 度 */
.fb-btn .ico { width: 1.15rem; height: 1.15rem; vertical-align: -0.2rem; }
.fb-btn-down .ico { transform: rotate(180deg); }

/* 六維雷達圖 */
.radar-card {
  display: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 1rem; padding: 1.3rem 1rem 0.6rem; margin-bottom: 26px; text-align: center;
}
.radar-card.show { display: block; }
.radar-title { font-size: 0.8125rem; letter-spacing: 2px; color: var(--gold-bright); margin-bottom: 0.4rem; }
#radar { width: 100%; max-width: 26rem; height: auto; overflow: visible; }
.radar-grid { fill: none; stroke: rgba(255,255,255,.08); }
.radar-axis { stroke: rgba(255,255,255,.10); }
.radar-area { fill: rgba(201,168,106,.22); stroke: var(--gold-bright); stroke-width: 1.8; stroke-linejoin: round; }
.radar-dot { fill: var(--gold-bright); }
.radar-label { fill: var(--text-dim); font-size: 11px; }

/* 關鍵字差距表：✔ 已具備（綠）/ ✘ 缺失（紅） */
.report li.kw-have, .report li.kw-miss {
  list-style: none; margin: 0.35rem 0 0.35rem -1.1rem;
  padding: 0.5rem 0.8rem; border-radius: 0.5rem; font-size: 0.92em;
}
.report li.kw-have { background: rgba(91,191,143,.08); border-left: 3px solid rgba(91,191,143,.6); }
.report li.kw-miss { background: rgba(226,96,106,.08); border-left: 3px solid rgba(226,96,106,.65); }

/* 報告色塊內的 SVG 標記圖標（取代 ❌✅✔✘ emoji） */
.report li.ba-before, .report li.ba-after,
.report li.kw-have, .report li.kw-miss {
  display: flex; align-items: flex-start; gap: 0.55rem;
}
.report li .mark { width: 1em; height: 1em; flex: 0 0 auto; margin-top: 0.22em; }
.report li.ba-before .mark, .report li.kw-miss .mark { color: #e2606a; }
.report li.ba-after .mark, .report li.kw-have .mark { color: #5bbf8f; }

/* 回頂端懸浮按鈕 */
.to-top {
  position: fixed; right: 1.4rem; bottom: 1.5rem; z-index: 60;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(0.7rem);
  transition: opacity .3s, transform .3s, visibility .3s, box-shadow .3s, border-color .3s;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 1.35rem; height: 1.35rem; }
.to-top:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 6px 24px rgba(201,168,106,.35);
}
@media (max-width: 600px) { .to-top { right: 1rem; bottom: 4.6rem; } }

/* 免費層鎖定行：面試題庫的付費鉤子 */
.report li.locked-row {
  list-style: none; display: flex; align-items: flex-start; gap: 0.55rem;
  margin: 0.5rem 0 0.5rem -1.1rem; padding: 0.65rem 0.85rem;
  border: 1px dashed var(--line); border-radius: 0.5rem;
  background: rgba(201,168,106,.07); color: var(--gold-bright); font-size: 0.92em;
}
.report li.locked-row .mark { width: 1.05em; height: 1.05em; flex: 0 0 auto; margin-top: 0.15em; }

/* 雷達互動：資料點 hover 放大、面積微亮 */
.radar-dot { transition: r .18s ease; cursor: pointer; }
#radar .radar-dot:hover { r: 6; }
.radar-area { transition: fill .25s; }
#radar:hover .radar-area { fill: rgba(201,168,106,.30); }

/* 定價區底部的 ATS 小科普 */
.ats-note {
  max-width: 46rem; margin: 1.6rem auto 0; padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--gold-dim);
  border-radius: 0.625rem; font-size: 0.8438rem; line-height: 1.75;
  color: var(--text-dim);
}
.ats-note strong { color: var(--gold-bright); margin-right: 0.35rem; }

/* 步驟卡上的 ATS 詞條連結 → 跳到底部科普 */
.ats-link {
  color: var(--gold-bright); text-decoration: underline dotted;
  text-underline-offset: 3px; transition: color .2s;
}
.ats-link:hover { color: #fff; }
/* 錨點抵達時的短暫高亮 */
.ats-note:target { animation: atsFlash 1.6s ease; }
@keyframes atsFlash {
  0%, 35% { border-color: var(--gold-bright); box-shadow: 0 0 22px rgba(201,168,106,.28); }
  100% { box-shadow: none; }
}

/* FAQ 子頁 */
.faq-page { background: var(--bg); }
.faq-wrap { max-width: 46rem; margin: 0 auto; padding: 6.5rem 1.25rem 4rem; }
.faq-wrap h1 { font-family: "Cormorant Garamond", serif; font-size: 2.2rem; color: var(--gold-bright); margin: 0.6rem 0 0.3rem; }
.faq-lede { color: var(--text-dim); margin-bottom: 2rem; }
.faq-item { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--panel); margin-bottom: 0.8rem; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 1rem 1.1rem; font-weight: 600; color: var(--text); list-style: none; position: relative; padding-right: 2.6rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--gold-bright); font-size: 1.3rem; transition: transform .25s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item[open] summary { color: var(--gold-bright); }
.faq-a { padding: 0 1.1rem 1.1rem; color: var(--text-dim); line-height: 1.85; font-size: 0.9375rem; }
.faq-cta { text-align: center; margin-top: 2.4rem; }
.faq-cta .btn { display: inline-block; text-decoration: none; }
.faq-switch a { color: var(--text-dim); font-size: 0.85rem; text-decoration: none; margin-left: 0.5rem; }
.faq-switch a:hover { color: var(--gold-bright); }

/* 實測數據區塊 */
#bench-stats { padding: 3rem 1.25rem; max-width: 60rem; margin: 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 1.4rem; }
.stat-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
  padding: 1.5rem 1rem 1.2rem; text-align: center;
  transition: transform .25s, border-color .25s;
}
.stat-card:hover { transform: translateY(-4px); border-color: rgba(201,168,106,.4); }
.stat-num {
  font-family: "Cinzel", "Cormorant Garamond", serif; font-size: 2.9rem; line-height: 1;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-l { margin-top: 0.7rem; font-size: 0.8438rem; color: var(--text-dim); line-height: 1.6; }
.stats-note { margin-top: 1.3rem; font-size: 0.78rem; color: var(--text-faint); line-height: 1.7; text-align: center; }
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; } }

/* JD 網址抓取按鈕 */
.jd-fetch {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.55rem; font-size: 0.875rem;
}
.jd-fetch .ico { width: 1.05rem; height: 1.05rem; }

/* 目標市場選擇列 */
.market-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; }
.market-row label { font-size: 0.8438rem; color: var(--text-dim); }
.market-row select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 0.5rem; padding: 0.4rem 0.7rem; font-size: 0.875rem;
  font-family: inherit; cursor: pointer;
}
.market-row select:focus { outline: none; border-color: var(--gold-bright); }