/* 分身研究室 UI 基底（2026-10-04 定版，源自「最真實的 AI 帳號分析報告」預覽頁）
   規範說明在 docs/DESIGN.md。只做淺色：不寫深色區塊，color-scheme 鎖 light。 */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;700;900&display=swap");

/* 只做淺色：加 !important，檢視器就算在 <html> 上直接寫深色變數也蓋不掉 */
:root, :root[data-theme="dark"], :root[data-theme="light"], :root:not([data-theme]) {
  color-scheme: light only !important;
  /* 底與面 */
  --bg: #EFEFEC !important; --card: #FFFFFF !important; --soft: #F6F6F3 !important;
  --line: #E2E2DD !important; --line-soft: #EDEDE9 !important;
  /* 字 */
  --ink: #15171C !important; --ink-2: #5E626B !important; --ink-3: #9A9DA4 !important;
  /* 重點：黃＝要你看這裡、藍＝數據與正向狀態 */
  --yellow: #F7D44A !important; --yellow-soft: #FDF3C8 !important; --yellow-ink: #7A5C00 !important;
  --blue: #3C86C2 !important; --blue-soft: #DCEBF7 !important;
  --danger: #C2412D !important;
  /* 字體：中文思源黑體、數字與英文 Outfit */
  --num: "Outfit", "Noto Sans TC", system-ui, sans-serif !important;
  --body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif !important;
  /* 圓角：大卡 24、內層元件 16、小元件 10–14 */
  --r-card: 24px !important; --r-box: 16px !important; --r-ctl: 12px !important;
}
* { box-sizing: border-box; }
html, body, :root[data-theme] body { background: var(--bg) !important; color: var(--ink); }
body { margin: 0; font-family: var(--body); font-weight: 400; font-size: 16px; line-height: 1.75; padding-inline: 16px; padding-block: 0 80px; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 900; text-wrap: balance; }
p { margin: 0; }
b, strong { font-weight: 700; }
.n { font-family: var(--num); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: .84rem; }
.hl { background: var(--yellow-soft); box-shadow: inset 0 -.5em 0 var(--yellow); padding-inline: 2px; }

/* 版面：單欄、grid＋gap，子項一律可縮小（表格才不會撐破手機版） */
.wrap { max-width: 860px; margin: 0 auto; display: grid; gap: 18px; }
.wrap > *, .card > * { min-width: 0; }

/* 頂列：自己的標誌 */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px 4px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--ink); text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.badge { font-size: .78rem; font-weight: 700; border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; }

/* 大卡 */
.card { background: var(--card); border-radius: var(--r-card); padding: 28px 24px; display: grid; gap: 18px; }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); }
.card-no { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.card-no b { font-family: var(--num); font-weight: 500; font-size: 1.05rem; color: var(--ink); }

/* 內層框：有邊線、不加陰影 */
.box { border: 1px solid var(--line); border-radius: var(--r-box); padding: 14px 16px; }
.callout { border-radius: var(--r-box); padding: 16px 18px; display: grid; gap: 4px; background: var(--soft); }
.callout.y { background: var(--yellow-soft); }

/* 數字磚 */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: var(--r-box); padding: 14px 16px; display: grid; gap: 2px; }
.tile .k { font-size: .78rem; color: var(--ink-2); }
.tile .v { font-family: var(--num); font-size: 1.85rem; font-weight: 500; line-height: 1.15; }
.tile .s { font-size: .76rem; color: var(--ink-3); }
.tile.key { background: var(--yellow-soft); border-color: var(--yellow); }

/* 狀態膠囊 */
.pill { display: inline-block; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: var(--soft); color: var(--ink-2); }
.pill.good { background: var(--blue-soft); color: var(--blue); }
.pill.weak { background: var(--yellow-soft); color: var(--yellow-ink); }
.pill.risk { background: var(--ink); color: #fff; }

/* 按鈕：淺底用黑鈕，深底用黃鈕；一律右邊箭頭 */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; text-decoration: none; border: 0; border-radius: 14px; padding: 14px 22px; cursor: pointer; }
.btn.y { background: var(--yellow); color: var(--ink); font-weight: 900; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:disabled { opacity: .5; cursor: wait; }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* 選項：外框方塊，選中變黑 */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts.col { flex-direction: column; }
.opt { position: relative; display: block; }
.opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opt span { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 14px; font-size: .94rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.opt input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.opt input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.opt input:disabled + span { opacity: .4; cursor: not-allowed; }

/* 文字輸入 */
.field { width: 100%; font: inherit; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 11px 14px; }
.field:focus { outline: none; border-color: var(--ink); background: var(--card); }
textarea.field { min-height: 96px; resize: vertical; }

/* 鎖：內容淡出＋解鎖列 */
.gate-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--soft); border-radius: 14px; padding: 12px 16px; }
.gate-bar .t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; }

/* 深色收尾區（解鎖、結帳） */
.dark { background: var(--ink); color: #fff; border-radius: var(--r-card); padding: 30px 24px; display: grid; gap: 18px; }

@media (max-width: 560px) { .card, .dark { padding: 24px 18px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }