/* ============ 色票（深色＝夜藍科技、淺色＝和紙＋藍染的日式科技感）============
   所有顏色都從這裡來：元件只用 var(--x) 或 rgba(var(--x-rgb), α)，換主題只換這一段。 */
:root {
  --bg: #070b14;
  --grid-rgb: 110, 190, 255; --grid-a: .045;
  --surface-rgb: 16, 26, 46; --surface2-rgb: 20, 34, 60; --deep-rgb: 5, 10, 20;
  --surface-solid: #101a2e;
  --panel: rgba(var(--surface-rgb), .78);
  --panel-solid: var(--surface-solid);
  --line-rgb: 110, 190, 255;
  --line: rgba(var(--line-rgb), .16);
  --line2: rgba(var(--line-rgb), .32);
  --ink: #e6f1ff; --ink-rgb: 230, 241, 255;
  --ink2: #9aaecb;
  --ink3: #6a7d9b;
  --ink-strong: #ffffff;
  --muted-rgb: 142, 163, 192;
  --accent: #3ee0ff; --accent-rgb: 62, 224, 255;
  --accent2: #8b7bff; --accent2-rgb: 139, 123, 255;
  --good: #3ddc97; --good-rgb: 61, 220, 151;
  --bad: #ff5c7a; --bad-rgb: 255, 92, 122;
  --warn: #ffb547; --warn-rgb: 255, 181, 71;
  --ref: #c3a8ff;
  --on-color: #04121a;
  --shadow-rgb: 0, 0, 0;
  --accent-glow: 0 0 18px rgba(var(--accent-rgb), .45);
  --grad-primary: linear-gradient(135deg, #1fb6ff, #6b5bff);
  --grad-on: linear-gradient(135deg, rgba(31, 182, 255, .35), rgba(107, 91, 255, .35));
  --center-deep: var(--center-deep);
  --hl: rgba(255, 213, 79, .22);            /* 螢光筆標重點 */
  --good-soft: rgba(var(--good-rgb), .14);
  --bad-soft: rgba(var(--bad-rgb), .14);
  --warn-soft: rgba(var(--warn-rgb), .14);
  --info-soft: rgba(var(--muted-rgb), .12);
  --ref-soft: rgba(var(--accent2-rgb), .14);
  --radius: 16px;
  --tabbar: 66px;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --serif: "Hiragino Mincho ProN", "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Heiti TC", sans-serif;
  color-scheme: dark;
}
/* 淺色：生成（きなり）紙底＋墨色字＋藍染主色；吉＝緑青、凶＝朱、注意＝山吹。科技感來自方眼細格、等寬數字、細線框。 */
:root[data-theme="light"] {
  --bg: #f2efe6;
  --grid-rgb: 31, 75, 110; --grid-a: .055;
  --surface-rgb: 252, 251, 247; --surface2-rgb: 245, 242, 234; --deep-rgb: 233, 229, 219;
  --surface-solid: #fcfbf7;
  --panel: rgba(var(--surface-rgb), .94);
  --line-rgb: 38, 58, 84;
  --line: rgba(var(--line-rgb), .14);
  --line2: rgba(var(--line-rgb), .26);
  --ink: #24282e; --ink-rgb: 36, 40, 46;
  --ink2: #565c64;
  --ink3: #868b92;
  --ink-strong: #121519;
  --muted-rgb: 110, 116, 124;
  --accent: #1f5f8b; --accent-rgb: 31, 95, 139;
  --accent2: #6d5a9c; --accent2-rgb: 109, 90, 156;
  --good: #2c7a57; --good-rgb: 44, 122, 87;
  --bad: #c8433a; --bad-rgb: 200, 67, 58;
  --warn: #a8701a; --warn-rgb: 196, 138, 38;
  --ref: #6d5a9c;
  --on-color: #ffffff;
  --shadow-rgb: 60, 48, 28;
  --accent-glow: 0 0 0 transparent;
  --grad-primary: linear-gradient(135deg, #1f5f8b, #2b4c86);
  --grad-on: linear-gradient(135deg, rgba(31, 95, 139, .14), rgba(43, 76, 134, .14));
  --center-deep: rgba(31, 95, 139, .06);
  --hl: rgba(240, 196, 64, .32);
  --good-soft: rgba(var(--good-rgb), .09);
  --bad-soft: rgba(var(--bad-rgb), .08);
  --warn-soft: rgba(var(--warn-rgb), .12);
  --info-soft: rgba(var(--muted-rgb), .09);
  --ref-soft: rgba(var(--accent2-rgb), .08);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; color: var(--ink); background: var(--bg); }
body {
  min-height: 100vh;
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(var(--accent2-rgb), .12), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(var(--accent-rgb), .1), transparent 60%),
    linear-gradient(rgba(var(--grid-rgb), var(--grid-a)) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(var(--grid-rgb), var(--grid-a)) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; color: inherit; }
b { color: var(--ink-strong); }

.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(var(--deep-rgb), .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.brand small { font-weight: 500; color: var(--accent); letter-spacing: .1em; font-size: 12px; border: 1px solid var(--line2); border-radius: 999px; padding: 1px 8px; }
.logo { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: var(--accent-glow); position: relative; }
.logo::after { content: ""; position: absolute; left: 50%; top: 2px; width: 2px; height: 14px; background: linear-gradient(var(--bad), var(--ink)); transform: translateX(-50%) rotate(25deg); transform-origin: 50% 70%; }
.project { display: flex; gap: 6px; min-width: 0; }
.project select { max-width: 44vw; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel-solid); }
.icon-btn { border: 1px solid var(--line2); background: var(--panel-solid); border-radius: 12px; width: 40px; }

main { max-width: 760px; margin: 0 auto; padding: 12px 16px 24px; }
.tab { display: none; animation: fade .25s ease; }
.tab.active { display: block; }
@keyframes fade { from { transform: translateY(6px); } to { transform: none; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(6, 1fr);
  height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(var(--deep-rgb), .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
}
.tabbar button { border: 0; background: none; color: var(--ink3); font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; letter-spacing: .06em; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.tabbar button.active { color: var(--accent); text-shadow: var(--accent-glow); }
.tabbar button.active svg { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .7)); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 12px 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .25); }
.panel-title { font-weight: 700; margin-bottom: 8px; letter-spacing: .04em; }
.panel-title::before { content: ""; display: inline-block; width: 4px; height: 14px; border-radius: 2px; background: var(--accent); box-shadow: var(--accent-glow); margin-right: 8px; vertical-align: -1px; }
.hint { color: var(--ink2); font-size: 13px; font-weight: 400; }
.note { background: var(--warn-soft); border: 1px solid rgba(var(--warn-rgb), .3); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.6; margin: 10px 0; }
.summary { font-size: 14px; margin-top: 8px; line-height: 1.75; }
.howto summary, .sub-details summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.howto ol { margin: 8px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--ink2); }
.sub-details { margin-top: 10px; }

.row { display: flex; align-items: flex-end; }
.gap { gap: 8px; }
.wrap { flex-wrap: wrap; }
.center { justify-content: center; }
.end { justify-content: flex-end; }
.grow { flex: 1 1 140px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink2); margin: 6px 0; flex: 1 1 120px; letter-spacing: .04em; }
.field input, .field select { font-size: 16px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--deep-rgb), .6); color: var(--ink); width: 100%; font-variant-numeric: tabular-nums; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }

.btn { border: 1px solid var(--line2); background: rgba(var(--surface2-rgb), .7); border-radius: 12px; padding: 10px 14px; font-size: 15px; cursor: pointer; white-space: nowrap; transition: transform .1s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--grad-primary); border-color: transparent; color: var(--ink-strong); font-weight: 700; box-shadow: 0 6px 22px rgba(var(--accent-rgb), .3); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); border-color: rgba(var(--bad-rgb), .5); }
.btn:disabled { opacity: .4; }
.btn.wide { width: 100%; padding: 14px; margin-top: 12px; }
.hud .row .btn { flex: 1 1 0; padding: 14px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; margin: 6px 0; background: rgba(var(--deep-rgb), .5); }
.seg button { border: 0; padding: 12px 6px; background: transparent; font-size: 15px; color: var(--ink2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--grad-on); color: var(--ink-strong); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
.seg button:disabled { opacity: .3; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.check:last-child { border-bottom: 0; }
.check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); }
.check small { display: block; color: var(--ink2); }

/* 羅盤 */
.hud { position: relative; }
.dial-wrap { position: relative; width: min(88vw, 380px); margin: 22px auto 0; aspect-ratio: 1; }
#dial { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), .18)); }
/* 「向」的記號：菱形，長的尖端朝外（往上），短的那半壓在羅盤外圈上 */
.dial-pointer { pointer-events: none; position: absolute; left: 50%; top: -16px; width: 18px; height: 34px; transform: translateX(-50%); background: var(--bad); clip-path: polygon(50% 0, 100% 64%, 50% 100%, 0 64%); filter: drop-shadow(0 0 6px rgba(var(--bad-rgb), .9)); }
.cap-dia { display: inline-block; width: 9px; height: 15px; margin-right: 6px; vertical-align: -2px; background: var(--bad); clip-path: polygon(50% 0, 100% 64%, 50% 100%, 0 64%); }
.dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dial-center .big { font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--ink-strong); text-shadow: var(--accent-glow); font-variant-numeric: tabular-nums; }
.dial-center .big small { font-size: 20px; color: var(--accent); }
.dial-center .sub { font-size: 13px; color: var(--ink2); margin-top: 2px; text-align: center; max-width: 60%; line-height: 1.35; word-break: keep-all; }
.d-ring { fill: rgba(var(--surface-rgb), .85); stroke: var(--line2); }
.d-ring2 { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-opacity: .55; }
.d-sep { stroke: var(--line2); stroke-width: 1; }
.d-sep-strong { stroke: rgba(var(--accent-rgb), .5); stroke-width: 1.2; }
.d-mt { font-size: 14px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; font-weight: 600; }
.d-gua { font-size: 17px; fill: var(--accent); text-anchor: middle; dominant-baseline: central; font-weight: 800; }
.d-dir { font-size: 9px; fill: var(--ink2); text-anchor: middle; dominant-baseline: central; }
.d-tick { stroke: var(--ink3); stroke-width: 1; }
.d-tick.big { stroke: var(--accent); stroke-width: 1.4; }
.d-deg { font-size: 9px; fill: var(--ink2); text-anchor: middle; dominant-baseline: central; font-family: var(--mono); }
.d-n { fill: var(--bad); font-weight: 700; }
.d-center { fill: rgba(var(--deep-rgb), .9); stroke: var(--accent); stroke-opacity: .5; }
.d-lockarc { fill: none; stroke: var(--good); stroke-width: 6; stroke-linecap: round; opacity: .55; }
.d-lockdot { fill: var(--good); stroke: rgba(var(--deep-rgb), .9); stroke-width: 1.2; filter: drop-shadow(0 0 4px rgba(var(--good-rgb), .9)); }
.lock-cap { text-align: center; font-size: 13px; color: var(--ink2); margin-top: 4px; }
.lock-cap i { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid var(--good); margin-right: 6px; vertical-align: 0; }
.lock-cap b { color: var(--good); }
.warn-line { min-height: 22px; color: var(--warn); font-size: 14px; text-align: center; margin: 4px 0; }
.samples { margin: 4px 0 8px; padding-left: 22px; font-size: 14px; line-height: 1.9; font-family: var(--mono); }
.samples li { font-family: -apple-system, "PingFang TC", sans-serif; }
.samples button { border: 0; background: none; color: var(--bad); padding: 0 8px; }

.door-pick svg { width: 220px; max-width: 100%; display: block; margin: 0 auto; }
.dp-house { fill: url(#dpg); stroke: var(--accent); }
.dp-t { font-size: 13px; fill: var(--ink2); text-anchor: middle; }
.dp-s { font-size: 12px; fill: var(--accent); text-anchor: middle; }
.dp-arrow { stroke: var(--accent); stroke-width: 2; fill: none; }

.result .big-line { font-size: 22px; font-weight: 800; margin: 4px 0 8px; letter-spacing: .03em; }
.result .big-line em { font-style: normal; color: var(--accent); text-shadow: var(--accent-glow); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; margin: 0; }
.kv dt { color: var(--ink2); }
.kv dd { margin: 0; }
.verdict { border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: 14px; line-height: 1.65; border: 1px solid var(--line); }
.v-good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .35); }
.v-bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .35); }
.v-warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .35); }
.v-info { background: var(--info-soft); }
.cand { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.issues { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { padding: 6px 6px; border-bottom: 1px solid var(--line); text-align: left; }
table.grid th { color: var(--ink2); font-weight: 500; }
.s-good { color: var(--good); font-weight: 700; }
.s-bad { color: var(--bad); font-weight: 700; }

/* 平面 */
.floor-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.floor-tabs button { flex: 0 0 auto; border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .7); color: var(--ink2); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-family: var(--mono); }
.floor-tabs button.on { color: var(--ink-strong); border-color: var(--accent); box-shadow: var(--accent-glow); background: rgba(var(--accent-rgb), .12); }
.floor-tabs button small { font-family: -apple-system, sans-serif; margin-left: 4px; }
.plan-wrap { position: relative; background: rgba(var(--deep-rgb), .75); border: 1px solid var(--line2); border-radius: var(--radius); touch-action: none; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(var(--accent-rgb), .06), 0 10px 30px rgba(var(--shadow-rgb), .3); }
#plan { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.dim-chip { position: static; display: inline-block; margin: 0 0 10px 10px; font-family: var(--mono); font-size: 12px; color: var(--accent); background: rgba(var(--deep-rgb), .8); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 10px; pointer-events: none; }
.p-grid { stroke: rgba(var(--line-rgb), .07); vector-effect: non-scaling-stroke; }
.p-house { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .8)); }
.p-sector { stroke: rgba(var(--line-rgb), .18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-good { fill: rgba(var(--good-rgb), .10); }
.p-bad { fill: rgba(var(--bad-rgb), .10); }
.p-qx { fill: url(#qxHatch); }
.p-center { fill: rgba(var(--accent2-rgb), .08); stroke: var(--accent2); stroke-dasharray: 4 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-axis { stroke: var(--ink3); stroke-dasharray: 6 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-label { text-anchor: middle; dominant-baseline: central; fill: var(--ink); font-weight: 800; }
.p-sub { text-anchor: middle; dominant-baseline: central; fill: var(--ink2); }
.p-star-good { fill: var(--good); }
.p-star-bad { fill: var(--bad); }
.p-labels text { pointer-events: none; paint-order: stroke; stroke: rgba(var(--deep-rgb), .9); stroke-linejoin: round; }
.p-edge { fill: var(--ink2); text-anchor: middle; dominant-baseline: central; letter-spacing: .1em; }
.p-door { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .9)); }
.p-door-t { fill: var(--on-color); text-anchor: middle; dominant-baseline: central; font-weight: 800; }
.p-item { stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: grab; }
.p-item.room { fill: rgba(var(--accent-rgb), .13); stroke: rgba(var(--accent-rgb), .8); }
.p-item.plain { fill: rgba(var(--muted-rgb), .10); stroke: rgba(var(--muted-rgb), .55); stroke-dasharray: 4 3; }
.p-item.wf { fill: rgba(var(--bad-rgb), .16); stroke: rgba(var(--bad-rgb), .9); }
.p-item.object { fill: rgba(var(--accent2-rgb), .2); stroke: rgba(var(--accent2-rgb), .9); }
.p-item.marker { fill: var(--warn); stroke: var(--on-color); }
.p-item.entry { fill: var(--accent2); stroke: var(--ink-strong); }
.p-item.sel { stroke-width: 3; stroke-dasharray: 5 3; stroke: var(--ink-strong); }
.p-hit { fill: transparent; cursor: grab; }
.p-item-t { text-anchor: middle; dominant-baseline: central; fill: var(--ink-strong); font-weight: 700; pointer-events: none; paint-order: stroke; stroke: rgba(var(--deep-rgb), .85); stroke-linejoin: round; }
.p-dir { fill: var(--ink-strong); pointer-events: none; }
.p-handle { fill: var(--accent); stroke: var(--on-color); vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.p-hh { fill: rgba(var(--deep-rgb), .9); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.p-hh-hit { fill: transparent; }
.plan-tools { margin-top: 10px; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; }
.palette button { border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .7); border-radius: 999px; padding: 8px 12px; font-size: 14px; }
.palette button.wf { border-color: rgba(var(--bad-rgb), .55); color: var(--bad); }
.sel .row { flex-wrap: wrap; }
.sel .shares { font-size: 14px; line-height: 1.7; margin: 4px 0 8px; }
.tpl-list { display: grid; gap: 8px; max-height: 60vh; overflow: auto; margin: 8px 0; }
.tpl-list button { text-align: left; border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .8); border-radius: 12px; padding: 10px 12px; }
.tpl-list b { display: block; margin-bottom: 2px; }
.tpl-list span { color: var(--ink2); font-size: 13px; }

/* 報告 */
.f { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--ink3); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.f.bad { border-left-color: var(--bad); box-shadow: -6px 0 18px -10px var(--bad); }
.f.warn { border-left-color: var(--warn); }
.f.good { border-left-color: var(--good); box-shadow: -6px 0 18px -10px var(--good); }
.f h3 { font-size: 16px; margin: 0 0 4px; line-height: 1.45; }
.f p { margin: 4px 0; font-size: 14px; line-height: 1.7; color: var(--ink); }
.f .src { color: var(--ink3); font-size: 12px; }
.tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-right: 6px; vertical-align: 2px; font-weight: 700; border: 1px solid transparent; }
.tag.bad { background: var(--bad-soft); color: var(--bad); border-color: rgba(var(--bad-rgb), .4); }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(var(--warn-rgb), .4); }
.tag.good { background: var(--good-soft); color: var(--good); border-color: rgba(var(--good-rgb), .4); }
.tag.info { background: var(--info-soft); color: var(--ink2); }
.tag.docx { background: var(--ref-soft); color: var(--ref); }
.tag.inf { background: rgba(var(--accent-rgb), .1); color: var(--accent); }
details.ref { background: var(--ref-soft); border-radius: 10px; padding: 6px 10px; margin-top: 8px; font-size: 13px; }
details.ref summary { color: var(--ref); font-weight: 700; cursor: pointer; }
details.ref p { font-size: 13px; color: var(--ref); }
.counts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.counts .tag { font-size: 13px; padding: 4px 12px; }
.disclaimer { font-size: 12px; color: var(--ink3); line-height: 1.7; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(var(--surface-rgb), .95); color: var(--ink); border: 1px solid var(--accent); box-shadow: var(--accent-glow); padding: 8px 16px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 30; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; }
dialog { border: 1px solid var(--line2); border-radius: var(--radius); padding: 0; width: min(92vw, 460px); background: var(--panel-solid); color: var(--ink); }
dialog::backdrop { background: rgba(var(--shadow-rgb), .6); backdrop-filter: blur(4px); }
.dlg { padding: 16px; }

@media print {
  body { background: #fff; color: #000; }
  .topbar, .tabbar, #tab-compass, #tab-house, #tab-plan, .row { display: none !important; }
  #tab-report { display: block !important; }
}
@media (min-width: 900px) {
  main { max-width: 1180px; }
  #tab-plan.active { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
  #tab-plan > .note { grid-column: 1 / -1; }
}

.panel-title.sm { font-size: 14px; margin-top: 14px; }
input[type=range] { width: 100%; accent-color: var(--accent); padding: 0; border: 0; background: none; }
.p-cut { fill: var(--bg); stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.p-cut-hatch { fill: url(#cutHatch); pointer-events: none; }
.p-cut-t { text-anchor: middle; dominant-baseline: central; fill: var(--bad); font-weight: 800; }
.p-ch { fill: var(--bad); stroke: var(--ink-strong); vector-effect: non-scaling-stroke; }
.p-tick { stroke: rgba(var(--accent-rgb), .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-tick-big { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.p-mt { text-anchor: middle; dominant-baseline: central; fill: var(--ink2); font-weight: 600; }

/* 平面圖重排：宮名改淡浮水印、卦星標籤移到外框外 */
.p-water { text-anchor: middle; dominant-baseline: central; font-weight: 900; pointer-events: none; opacity: .16; }
.p-water-good { fill: var(--good); }
.p-water-bad { fill: var(--bad); }
.p-pill rect { fill: rgba(var(--surface-rgb), .92); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.p-pill.good rect { stroke: var(--good); }
.p-pill.bad rect { stroke: var(--bad); }
.p-pill.qx rect { stroke-dasharray: 3 2; }
.p-pill text { text-anchor: middle; dominant-baseline: central; font-weight: 800; pointer-events: none; }
.p-pill.good text { fill: var(--good); }
.p-pill.bad text { fill: var(--bad); }
.p-item-t.room { text-anchor: start; fill: var(--accent); }
.p-mark-t { text-anchor: middle; dominant-baseline: central; fill: var(--on-color); font-weight: 900; pointer-events: none; }
.p-hh { fill: rgba(var(--deep-rgb), .95); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chip-n { width: 14px; height: 14px; vertical-align: -2px; fill: var(--bad); margin-right: 2px; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink2); margin: 8px 2px 0; }
.plan-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; }
.dial-cap { text-align: center; font-size: 13px; color: var(--ink2); margin-top: 6px; }
.dial-cap.top { color: var(--bad); margin-bottom: -2px; }
.dial-cap b { color: var(--ink-strong); }
#dial { cursor: grab; touch-action: none; }
#dial.dragging { cursor: grabbing; }
.nudge { justify-content: center; margin: 4px 0 8px; }
.hud .row.nudge { gap: 0; }
.hud .row.nudge .btn { flex: 0 0 auto; padding: 8px 14px; font-family: var(--mono); border-radius: 0; margin-left: -1px; }
.hud .row.nudge .btn:first-child { border-radius: 12px 0 0 12px; margin-left: 0; }
.hud .row.nudge .btn:nth-child(4) { border-radius: 0 12px 12px 0; }
.hud .row.nudge #backToCompass { border-radius: 12px; margin-left: 8px; }
.mk-seg { margin: 10px 0 4px; }
.size-presets { margin-top: 8px; } .size-presets button small, #doorWidthSeg button small { display: block; font-size: 11px; color: var(--ink3); font-family: var(--mono); }
.seg button.on small { color: var(--accent); }

.house-ed-wrap { position: relative; background: rgba(var(--deep-rgb), .75); border: 1px solid var(--line2); border-radius: var(--radius); margin: 10px 0; touch-action: none; overflow: hidden; }
#houseEd { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; max-height: 62vh; }
.he-bbox { fill: url(#heHatch); stroke: var(--bad); stroke-dasharray: 5 4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.he-house { fill: var(--surface-solid); stroke: var(--accent); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .7)); }
.he-dim { fill: var(--accent); text-anchor: middle; dominant-baseline: central; font-family: var(--mono); font-weight: 700; }
.he-side { fill: var(--ink2); text-anchor: middle; dominant-baseline: central; letter-spacing: .1em; }
.he-door { stroke-linecap: round; vector-effect: non-scaling-stroke; cursor: pointer; }
.he-door.on { stroke: var(--accent); stroke-width: 7; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .9)); }
.he-door.off { stroke: rgba(var(--muted-rgb), .55); stroke-width: 5; }
.he-door-t { text-anchor: middle; dominant-baseline: central; font-weight: 700; pointer-events: none; }
.he-door-t.on { fill: var(--accent); }
.he-door-t.off { fill: var(--ink2); }
.he-v { fill: var(--bg); stroke: var(--warn); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: move; }
.he-add { fill: rgba(var(--accent-rgb), .25); stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: copy; }
.he-add-t { fill: var(--accent); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-weight: 800; }
.door-w { align-items: center; }
.door-w .seg { flex: 1 1 220px; margin: 0; }
.p-bbox { fill: none; stroke: var(--bad); stroke-dasharray: 5 4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.p-door-bar { stroke: var(--accent); stroke-linecap: butt; vector-effect: non-scaling-stroke; stroke-width: 6; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .9)); }
.p-door-t2 { fill: var(--accent); text-anchor: middle; dominant-baseline: central; font-weight: 800; pointer-events: none; paint-order: stroke; stroke: rgba(var(--deep-rgb), .9); }
.p-solid { fill: var(--surface-solid); }

/* 即時羅盤疊圖 */
.rose { pointer-events: none; }
.rose-ring { fill: rgba(var(--accent-rgb), .04); stroke: rgba(var(--accent-rgb), .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.rose-ring2 { fill: none; stroke: rgba(var(--accent-rgb), .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rose-tick { stroke: rgba(var(--accent-rgb), .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rose-tick.strong { stroke: rgba(var(--accent-rgb), .7); }
.rose-ray { stroke: rgba(var(--accent-rgb), .28); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.rose-mt { fill: rgba(var(--ink-rgb), .75); text-anchor: middle; dominant-baseline: central; font-weight: 700; }
.rose-mt.n { fill: var(--bad); }
.rose-gua { fill: rgba(var(--accent-rgb), .9); text-anchor: middle; dominant-baseline: central; font-weight: 900; paint-order: stroke; stroke: rgba(var(--deep-rgb), .8); }
.rose-n { fill: var(--bad); }
.rose-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink2); margin: 0 0 8px; }
.rose-bar b { color: var(--accent); font-family: var(--mono); }
.rose-bar .btn { padding: 6px 10px; font-size: 13px; }

/* 左上角大門方位小羅盤 */
.door-compass { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; align-items: center; gap: 8px; pointer-events: none;
  background: rgba(var(--deep-rgb), .82); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 12px 4px 4px; }
.door-compass svg { width: 58px; height: 58px; display: block; }
.dc-ring { fill: rgba(var(--surface-rgb), .95); stroke: var(--accent); stroke-width: 1.5; }
.dc-tick { stroke: var(--ink3); stroke-width: 1; }
.dc-n { fill: var(--bad); font-size: 9px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.dc-needle { fill: var(--accent); filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .9)); }
.dc-tail { fill: var(--ink3); }
.door-compass .dc-t { font-size: 12px; color: var(--ink2); line-height: 1.35; }
.door-compass .dc-t b { color: var(--accent); font-family: var(--mono); font-size: 14px; }
.plan-wrap, .house-ed-wrap { padding-top: 72px; }

.steps { margin: 4px 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.7; color: var(--ink2); }
.photo-cal-wrap { background: #fff; border-radius: 12px; overflow: hidden; margin: 10px 0; touch-action: none; }
#photoCal { width: 100%; height: auto; display: block; max-height: 60vh; }
.pc-box { fill: rgba(var(--bad-rgb), .08); stroke: #ff2d55; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pc-h { fill: #ff2d55; stroke: var(--ink-strong); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pc-up { fill: #ff2d55; font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chips button { border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .8); border-radius: 999px; padding: 6px 10px; font-family: var(--mono); font-size: 13px; }
.photo-ctl { align-items: center; margin-top: 6px; }
.p-photo { pointer-events: none; }
.p-photo.inv { filter: invert(1) hue-rotate(180deg); }
.p-solid.see { fill-opacity: .35; }
.he-sec { fill: rgba(var(--accent-rgb), .05); }
.he-gua { text-anchor: middle; dominant-baseline: central; fill: rgba(var(--ink-rgb), .28); font-weight: 900; pointer-events: none; }
.he-star-g { fill: rgba(var(--good-rgb), .8); font-weight: 800; }
.he-star-b { fill: rgba(var(--bad-rgb), .8); font-weight: 800; }
.dc-live { font-size: 11px; color: var(--warn); line-height: 1.3; margin-left: 4px; }
.palette { display: block; }
.pal-g { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pal-h { flex: 0 0 64px; font-size: 12px; color: var(--accent); letter-spacing: .08em; }

/* ---------- ④ 查 ---------- */
.lk-head { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 5; margin: -12px -16px 12px; padding: 12px 16px 8px; background: rgba(var(--deep-rgb), .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.lk-box { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; height: 48px; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel-solid); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); transition: box-shadow .2s, border-color .2s; }
.lk-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15), var(--accent-glow); }
.lk-box svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; }
.lk-box input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 17px; }
.lk-box input::-webkit-search-cancel-button { display: none; }
.lk-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--info-soft); font-size: 20px; line-height: 1; }
.lk-status { margin: 8px 2px 6px; min-height: 18px; }
.lk-status b { color: var(--accent); }
.lk-syn { color: var(--ink3); margin-left: 4px; }
.lk-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lk-kinds::-webkit-scrollbar { display: none; }
.lk-kinds button, .lk-chips button { flex: none; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel-solid); font-size: 14px; white-space: nowrap; }
.lk-kinds button.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.lk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-chips button:active, .lk-topics button:active, .lk-stars button:active { transform: scale(.97); }
.lk-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lk-topics button { text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); display: flex; flex-direction: column; gap: 2px; }
.lk-topics span { color: var(--ink3); font-size: 12px; }
.lk-stars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lk-stars button { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink2); }
.lk-stars button b { font-size: 17px; }
.lk-stars .good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .35); }
.lk-stars .good b { color: var(--good); }
.lk-stars .bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .35); }
.lk-stars .bad b { color: var(--bad); }
.lk-nine { color: var(--ink); font-size: 12px; }
.lk-pair { font-family: var(--mono); letter-spacing: .05em; color: var(--ink3); font-size: 12px; }
.lk-tri tr[data-q] { cursor: pointer; }
.lk-tri tr[data-q]:active td { background: rgba(var(--accent-rgb), .08); }
.lk-wheel-wrap { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 14px; align-items: center; }
@media (max-width: 520px) { .lk-wheel-wrap { grid-template-columns: 1fr; justify-items: center; } }
.lk-wheel { width: 100%; max-width: 240px; }
.lk-wheel path.w0 { fill: rgba(var(--accent-rgb), .09); stroke: var(--line2); }
.lk-wheel path.w1 { fill: rgba(var(--accent2-rgb), .12); stroke: var(--line2); }
.lk-wheel text { fill: var(--ink); font-size: 13px; text-anchor: middle; dominant-baseline: central; }
.lk-wheel .lk-wg { fill: var(--accent); font-size: 18px; font-weight: 700; }
.lk-wheel .lk-wn { fill: var(--ink3); font-size: 11px; }
.lk-card { position: relative; margin-bottom: 10px; padding: 12px 14px 8px; border: 1px solid var(--line); border-left: 3px solid var(--ink3); border-radius: 4px 14px 14px 4px; background: var(--panel); cursor: pointer; animation: fade .2s ease; }
.lk-card.k-rule { border-left-color: var(--accent); }
.lk-card.k-term { border-left-color: var(--ref); }
.lk-card.k-book { border-left-color: var(--warn); }
.lk-card.k-video, .lk-card.k-answer { border-left-color: var(--good); }
.lk-card.k-size { border-left-color: var(--ink2); }
.lk-card h3 { margin: 4px 0 6px; font-size: 16px; line-height: 1.4; }
.lk-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); }
.lk-kind { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); flex: none; }
.lk-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-hit { margin-left: auto; font-family: var(--mono); flex: none; }
.lk-hit.full { color: var(--good); }
.lk-bar { height: 3px; border-radius: 3px; background: var(--info-soft); overflow: hidden; margin-bottom: 8px; }
.lk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.lk-text { margin: 0; color: var(--ink2); line-height: 1.75; font-size: 15px; }
.lk-card.open .lk-text { color: var(--ink); }
.lk-near { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--info-soft); color: var(--ink2); font-size: 14px; line-height: 1.7; }
.lk-near span { display: block; font-size: 12px; color: var(--ink3); }
.lk-foot { text-align: right; font-size: 12px; color: var(--ink3); margin-top: 6px; }
mark { background: rgba(var(--warn-rgb), .28); color: var(--ink-strong); border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px rgba(var(--warn-rgb), .35); }
.lk-more { display: block; width: 100%; margin: 6px 0 16px; }

/* ---------- 報告首頁 ---------- */
.rp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.rp-tile { border-radius: 12px; padding: 8px 4px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 0; }
.rp-tile span { font-size: 12px; }
.rp-tile b { font-size: 26px; line-height: 1.15; font-family: var(--mono); }
.rp-tile.bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .4); color: var(--bad); }
.rp-tile.warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .4); color: var(--warn); }
.rp-tile.good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .4); color: var(--good); }
.rp-tile b { color: inherit; }
.rp-disk { display: block; width: 100%; max-width: 340px; margin: 4px auto 0; touch-action: manipulation; }
.rp-w { stroke: rgba(var(--line-rgb), .28); stroke-width: 1; cursor: pointer; transition: fill .2s, opacity .2s; }
.rp-w.g { fill: rgba(var(--good-rgb), .13); }
.rp-w.b { fill: rgba(var(--bad-rgb), .11); }
.rp-w.x-warn { stroke: var(--warn); stroke-width: 2.5; }
.rp-w.x-bad { stroke: var(--bad); stroke-width: 3; }
.rp-w.sel { fill: rgba(var(--accent-rgb), .22); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .6)); }
.rp-disk text { text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rp-g { fill: var(--ink); font-size: 21px; font-weight: 800; }
.rp-s { font-size: 12px; font-weight: 700; }
.rp-s.g { fill: var(--good); } .rp-s.b { fill: var(--bad); }
.rp-i { fill: var(--ink2); font-size: 11px; }
.rp-dot.bad { fill: var(--bad); } .rp-dot.warn { fill: var(--warn); }
.rp-dot-t { fill: var(--on-color); font-size: 10px; font-weight: 900; }
.rp-door { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.rp-door-t { fill: var(--accent); font-size: 11px; font-weight: 700; }
.rp-c { fill: var(--panel-solid); stroke: var(--line2); }
.rp-ct { fill: var(--accent); font-size: 15px; font-weight: 800; }
.rp-ct2 { fill: var(--ink2); font-size: 10px; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--ink3); margin: 2px 0 10px; }
.rp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.rp-legend i.g { background: rgba(var(--good-rgb), .5); } .rp-legend i.b { background: rgba(var(--bad-rgb), .45); } .rp-legend i.x { border: 2px solid var(--bad); }
.rp-detail { border: 1px solid var(--line2); border-radius: 14px; padding: 10px 12px; background: rgba(var(--deep-rgb), .45); }
.rp-d-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rp-d-h b { font-size: 18px; }
.rp-d-h > span:not(.tag) { color: var(--ink2); font-size: 13px; }
.rp-d-l { margin: 3px 0; color: var(--ink2); font-size: 14px; }
.rp-d-f { margin: 6px 0; font-size: 14px; }
.rp-d-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rp-d-b .btn { padding: 6px 12px; font-size: 13px; }
.rp-toc { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 4; margin: 0 -16px 4px; padding: 8px 16px; background: rgba(var(--deep-rgb), .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.rp-toc:empty { display: none; }
.rp-toc-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.rp-toc-in::-webkit-scrollbar { display: none; }
.rp-chip { flex: none; padding: 6px 11px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel-solid); font-size: 13px; white-space: nowrap; }
.rp-chip b { color: var(--warn); margin-left: 2px; }
.rp-chip.has { border-color: rgba(var(--warn-rgb), .45); }
.rp-chip.on { border-color: var(--accent); color: var(--accent); }
.rp-only { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: 13px; white-space: nowrap; }
.rp-only input { accent-color: var(--accent); margin: 0; }
.rp-sec { font-size: 15px; letter-spacing: .08em; color: var(--ink2); margin: 18px 2px 4px; padding-left: 10px; border-left: 3px solid var(--accent); scroll-margin-top: 130px; }
#reportList.only-issues article.f.good, #reportList.only-issues article.f.info { display: none; }
.rp-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.rp-foot button { border: 1px solid var(--line2); background: none; border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--ink2); }
.rp-foot .rp-ask { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
.rp-tw { overflow-x: auto; }
.rp-table { width: 100%; table-layout: fixed; } .rp-table th:nth-child(1), .rp-table td:nth-child(1) { width: 15%; } .rp-table th:nth-child(2), .rp-table td:nth-child(2) { width: 17%; } .rp-table th:nth-child(4), .rp-table td:nth-child(4) { width: 23%; } .rp-table th:nth-child(5), .rp-table td:nth-child(5) { width: 15%; } .rp-table td { word-break: break-all; }
.rp-table tr[data-rppal] { cursor: pointer; }
.rp-table td small { display: block; color: var(--ink3); font-size: 11px; }

/* ---------- 圖表 ---------- */
.smp-wrap { margin-top: 10px; }
.smp { display: block; width: 100%; max-width: 420px; margin: 4px auto 0; }
.smp-band { fill: rgba(var(--warn-rgb), .14); }
.smp-b { stroke: var(--bad); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .8; }
.smp-t { stroke: var(--ink3); }
.smp-ax { stroke: var(--line2); stroke-width: 1.5; }
.smp-m { fill: var(--ink2); font-size: 11px; text-anchor: middle; }
.smp-p { fill: var(--accent); stroke: var(--on-color); stroke-width: 1.5; }
.smp-f { stroke: var(--accent); stroke-width: 2; }
.smp-ft { fill: var(--accent); font-size: 11px; font-weight: 700; text-anchor: middle; }
.fl-row { display: grid; grid-template-columns: 34px 92px 1fr; align-items: center; gap: 8px; width: 100%; padding: 8px 6px; border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; }
.fl-row.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .07); }
.fl-h { font-size: 14px; } .fl-h em { font-style: normal; font-weight: 700; }
.fl-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--info-soft); }
.fl-bar i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 800; color: var(--on-color); min-width: 16px; }
.fl-bar i.b { background: var(--bad); } .fl-bar i.w { background: var(--warn); } .fl-bar i.g { background: var(--good); }
.fl-bar .hint { padding-left: 8px; font-size: 12px; line-height: 18px; }
.heat { display: inline-block; width: 34px; height: 6px; border-radius: 3px; background: var(--info-soft); margin-right: 6px; vertical-align: 1px; overflow: hidden; }
.heat i { display: block; height: 100%; background: var(--good); }
.smp-out { fill: var(--warn); font-size: 12px; text-anchor: middle; dominant-baseline: central; }
.smp-warn { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13px; }
.smp-li-out { color: var(--warn); }
.smp-li-out small { margin-left: 6px; font-size: 11px; border: 1px solid rgba(var(--warn-rgb), .5); border-radius: 999px; padding: 0 6px; }
.stale { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(var(--warn-rgb), .5); background: var(--warn-soft); color: var(--ink); font-size: 14px; line-height: 1.6; }
.stale b { color: var(--warn); }
.stale .btn { display: block; margin-top: 8px; padding: 6px 12px; font-size: 13px; }
.dc-dial, .dc-ndl { transform-box: view-box; transform-origin: 0 0; }
.drag-tip { position: absolute; right: 10px; top: 12px; z-index: 3; padding: 6px 14px; border-radius: 999px; background: rgba(var(--deep-rgb), .92); border: 1px solid var(--accent); box-shadow: var(--accent-glow); font-size: 14px; white-space: nowrap; pointer-events: none; }
.drag-tip b { color: var(--accent); font-size: 16px; }
.drag-tip small { color: var(--ink3); }
.drag-tip.pop { animation: tip-pop .45s ease; }
@keyframes tip-pop { 0% { transform: scale(1); } 35% { transform: scale(1.15); background: rgba(var(--accent-rgb), .25); } 100% { transform: scale(1); } }

/* ---------- 門星怎麼算（動畫） ---------- */
.how-btn { margin: 0 0 10px; padding: 6px 14px; font-size: 14px; }
.how-box { margin: 0 0 12px; padding: 10px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(var(--deep-rgb), .5); }
.how-svg { display: block; width: 100%; max-width: 260px; margin: 0 auto; }
.how-ring { fill: none; stroke: var(--line2); stroke-dasharray: 2 4; }
.how-g circle { fill: var(--panel-solid); stroke: var(--line2); transition: fill .4s, stroke .4s, r .4s; }
.how-g text { fill: var(--ink2); font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: central; transition: fill .4s; }
.s1 .how-g.is-h circle { fill: rgba(var(--accent-rgb), .25); stroke: var(--accent); stroke-width: 2.5; }
.s1 .how-g.is-h text { fill: var(--accent); }
.s2 .how-g.is-d circle { fill: rgba(var(--accent2-rgb), .3); stroke: var(--accent2); stroke-width: 2.5; }
.s2 .how-g.is-d text { fill: var(--ink-strong); }
.how-link { fill: none; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.how-link.g { stroke: var(--good); } .how-link.b { stroke: var(--bad); }
.s3 .how-link { transition: stroke-dashoffset .8s ease; stroke-dashoffset: 0; }
.how-star { font-size: 24px; font-weight: 900; text-anchor: middle; dominant-baseline: central; opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s .5s, transform .5s .5s cubic-bezier(.3, 1.6, .5, 1); }
.how-star.g { fill: var(--good); } .how-star.b { fill: var(--bad); }
.how-star2 { fill: var(--ink3); font-size: 11px; text-anchor: middle; opacity: 0; transition: opacity .4s .8s; }
.s3 .how-star { opacity: 1; transform: scale(1); } .s3 .how-star2 { opacity: 1; }
.how-steps { margin: 6px 0 4px; padding-left: 22px; font-size: 14px; line-height: 1.8; color: var(--ink2); }
.how-steps li { opacity: .25; transition: opacity .4s; }
.s1 .st1, .s2 .st2, .s3 .st3, .s4 .st4 { opacity: 1; }
.c-h { color: var(--accent); } .c-d { color: var(--ref); }
.how-pairs span { display: inline-block; margin: 0 4px; padding: 0 6px; border-radius: 6px; font-family: var(--mono); }
.how-pairs span.on { background: rgba(var(--warn-rgb), .25); color: var(--ink-strong); box-shadow: 0 0 0 1px rgba(var(--warn-rgb), .5); }
.how-again { padding: 4px 12px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .how-box *, .how-box { transition: none !important; } }

/* ---------- 24 山示範 ---------- */
.demo-row { align-items: center; margin: -2px 0 8px; }
.demo-row .btn { padding: 6px 14px; font-size: 14px; }
.d24-wall { fill: none; stroke: var(--accent); stroke-width: .12; stroke-dasharray: 1; stroke-dashoffset: 1; animation: d24-draw .9s ease forwards; }
.d24-dot { fill: var(--ink); opacity: 0; animation: d24-in .3s ease forwards; }
.d24-dot.edge { fill: var(--warn); }
.d24-t { fill: var(--accent); font-weight: 700; text-anchor: middle; dominant-baseline: central; opacity: 0; animation: d24-in .3s ease forwards; }
.d24-ray { stroke: var(--warn); stroke-width: .08; stroke-dasharray: 1; stroke-dashoffset: 1; animation: d24-draw .6s ease forwards; }
.d24-c { fill: var(--warn); opacity: 0; animation: d24-in .3s ease forwards; }
@keyframes d24-draw { to { stroke-dashoffset: 0; } }
@keyframes d24-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.d24-dot, .d24-t, .d24-c { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .d24 * { animation-duration: .01s !important; animation-delay: 0s !important; } }
#houseEd > * { transition: opacity .4s; }
#houseEd.demo-on > :not(.d24) { opacity: .22; }
.d24.out { opacity: 0; transition: opacity .5s; }
.p-gl { fill: none; stroke: rgba(var(--ink-rgb), .38); stroke-width: 1.1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.p-gl * { vector-effect: non-scaling-stroke; }

/* ---------- 步驟進度、復原、屬性面板 ---------- */
.tabbar button { position: relative; }
.tb-dot { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 15px; text-align: center; display: none; letter-spacing: 0; }
.tb-dot.ok { display: block; background: var(--good); color: var(--on-color); }
.tb-dot.warn { display: block; background: var(--warn); color: var(--on-color); }
.tb-dot.bad { display: block; background: var(--bad); color: var(--ink-strong); }
#undoBtn { font-size: 18px; }
#undoBtn:disabled { opacity: .35; }
.panel.sel { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); z-index: 18; max-height: 46vh; overflow-y: auto; margin: 0; background: var(--panel-solid); border-color: var(--accent); box-shadow: 0 -10px 30px rgba(var(--shadow-rgb), .55), 0 0 0 1px rgba(var(--accent-rgb), .25); animation: sheet-up .25s ease; }
@keyframes sheet-up { from { transform: translateY(16px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) { .panel.sel { position: sticky; left: auto; right: auto; max-height: none; } }
.sel-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel); font-size: 20px; line-height: 1; }
.panel.sel .panel-title { padding-right: 40px; }
.sel-size { margin-top: 8px; } .sel-size summary { cursor: pointer; color: var(--ink2); font-size: 14px; padding: 4px 0; }
.panel.sel .row { margin: 6px 0 0; }
/* 速查卡片固定欄數：8 顆星排 2×4、12 個主題排 2×6，不要剩一張孤零零掉到下一列 */
.lk-stars, .lk-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .lk-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lk-stars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lk-topics { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* 寬螢幕：報告分兩欄（左：總覽與表；右：目錄與結論），查詢頁限寬置中 */
@media (min-width: 900px) {
  #tab-report.active { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 18px; align-items: start; }
  #tab-report > .stale { grid-column: 1 / -1; }
  .rp-toc { margin: 0 0 4px; border-radius: 0 0 14px 14px; }
  #tab-lookup.active { max-width: 860px; margin: 0 auto; }
}
.btn.mini { padding: 2px 10px; font-size: 12px; margin-left: 4px; }
.hr-side { margin: 8px 0; } .hr-side .seg { margin: 6px 0; }
/* ---------- 學習圖解（diagram.js） ---------- */
.dg { display: block; width: 100%; max-width: 380px; margin: 0 auto; }
.dg text { text-anchor: middle; font-family: inherit; }
.dg-cell { stroke: rgba(var(--line-rgb), .35); stroke-width: 1; }
.dg-cell.g { fill: rgba(var(--good-rgb), .12); } .dg-cell.b { fill: rgba(var(--bad-rgb), .1); } .dg-cell.n { fill: rgba(var(--surface-rgb), .8); }
.dg-cell.mk { stroke: var(--warn); stroke-width: 3; }
.dg-hatch { stroke: rgba(var(--bad-rgb), .55); stroke-width: 2; }
.dg-misst { fill: var(--bad); font-size: 12px; font-weight: 800; text-anchor: end; }
.dg-center { fill: rgba(var(--accent-rgb), .08); stroke: rgba(var(--accent-rgb), .4); }
.dg-wall { fill: none; stroke: var(--accent); stroke-width: 3; }
.dg-gua { fill: var(--ink); font-size: 22px; font-weight: 800; }
.dg-gua.s { font-size: 15px; }
.dg-star { font-size: 13px; font-weight: 700; } .dg-star.g { fill: var(--good); } .dg-star.b { fill: var(--bad); }
.dg-house { fill: var(--accent); font-size: 18px; font-weight: 900; }
.dg-sub { fill: var(--ink2); font-size: 12px; }
.dg-door { stroke: var(--ink-strong); stroke-width: 7; stroke-linecap: round; }
.dg-arrow { fill: var(--accent); }
.dg-doort { fill: var(--accent); font-size: 13px; font-weight: 800; }
.dg-dir { fill: var(--ink3); font-size: 12px; }
.dg-cap { fill: var(--ink3); font-size: 11px; text-anchor: start !important; }
.dg-item { opacity: .9; } .dg-itemt { fill: var(--on-color); font-size: 10.5px; font-weight: 800; }
.dg-north circle { fill: none; stroke: var(--line2); } .dg-north line { stroke: var(--bad); stroke-width: 2.5; } .dg-north text { fill: var(--bad); font-size: 11px; font-weight: 800; }
.dg-w3 { stroke: rgba(var(--accent-rgb), .7); stroke-width: 1.2; } .dg-w3.back { fill: rgba(var(--accent-rgb), .18); } .dg-w3.side { fill: rgba(var(--accent-rgb), .08); }
.dg-f3 { stroke: rgba(var(--line-rgb), .35); } .dg-f3.g { fill: rgba(var(--good-rgb), .16); } .dg-f3.b { fill: rgba(var(--bad-rgb), .14); } .dg-f3.c { fill: rgba(var(--accent-rgb), .1); } .dg-f3.n { fill: rgba(var(--surface-rgb), .8); }
.dg-f3.miss { fill: rgba(var(--bad-rgb), .04); stroke-dasharray: 4 3; stroke: var(--bad); }
.dg-box { stroke: rgba(var(--shadow-rgb), .35); } .dg-box.front { filter: brightness(.75); }
.dg-door3 { fill: var(--bg); stroke: var(--ink-strong); stroke-width: 2; }
.dg-wedge.a { fill: rgba(var(--accent-rgb), .08); } .dg-wedge.b { fill: rgba(var(--accent2-rgb), .1); } .dg-wedge { stroke: var(--line2); }
.dg-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; align-items: start; }
/* ---------- 學 ---------- */
.ln-hero { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.ln-prog { min-width: 140px; font-size: 13px; color: var(--ink2); } .ln-prog b { font-size: 24px; color: var(--accent); font-family: var(--mono); }
.ln-bar { height: 5px; border-radius: 4px; background: var(--info-soft); margin-top: 4px; overflow: hidden; } .ln-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.ln-cont { margin: 4px 0 12px; }
.ln-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ln-ch { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.ln-ch.done { border-color: rgba(var(--good-rgb), .45); }
.ln-no { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); font-weight: 900; font-family: var(--mono); }
.ln-cht b { display: block; font-size: 15px; } .ln-cht small { color: var(--ink3); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ln-cnt { font-family: var(--mono); font-size: 12px; color: var(--ink3); }
.ln-ex-card { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 12px; padding: 14px; text-align: left; border-radius: 14px; border: 1px solid rgba(var(--warn-rgb), .45); background: var(--warn-soft); }
.ln-ex-card b { font-size: 16px; color: var(--warn); } .ln-ex-card span { color: var(--ink2); font-size: 13px; }
.ln-crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--ink3); }
.ln-crumb button { border: 0; background: none; color: var(--accent); padding: 4px 2px; }
.ln-list { padding-left: 0; list-style: none; counter-reset: ln; }
.ln-list li button { width: 100%; text-align: left; padding: 12px 14px; margin: 0 0 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: flex; justify-content: space-between; gap: 8px; }
.ln-list li button.read { border-color: rgba(var(--good-rgb), .35); } .ln-list li button span { color: var(--good); font-size: 12px; }
.ln-title { font-size: 22px; margin: 4px 0 12px; }
.ln-h { font-size: 17px; margin: 18px 0 6px; padding-left: 10px; border-left: 3px solid var(--accent); }
.ln-p { line-height: 1.85; font-size: 16px; color: var(--ink); }
.ln-note { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--ref-soft); border: 1px solid rgba(var(--accent2-rgb), .35); font-size: 15px; line-height: 1.75; }
.ln-listb { margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.ln-lt { font-weight: 800; color: var(--ink2); font-size: 14px; margin-bottom: 6px; letter-spacing: .05em; }
.ln-listb ul { margin: 0; padding-left: 20px; } .ln-listb li { line-height: 1.8; margin: 4px 0; font-size: 15.5px; }
.ln-src { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; line-height: 18px; vertical-align: 1px; border: 1px solid var(--line2); color: var(--ink3); white-space: nowrap; }
.ln-src.both { color: var(--good); border-color: rgba(var(--good-rgb), .4); } .ln-src.main { color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.ln-src.supp { color: var(--ref); border-color: rgba(var(--accent2-rgb), .4); } .ln-src.video { color: var(--warn); border-color: rgba(var(--warn-rgb), .4); }
.ln-ref { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px; background: var(--info-soft); color: var(--ink3); }
.ln-conf { margin: 10px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(var(--warn-rgb), .5); background: var(--warn-soft); }
.ln-conf2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; font-size: 15px; line-height: 1.75; }
.ln-conf2 > div { padding: 8px 10px; border-radius: 10px; background: rgba(var(--deep-rgb), .45); } .ln-conf2 .ln-src { margin: 0 6px 0 0; }
.ln-tw { overflow-x: auto; margin: 10px 0; }
.ln-fig { margin: 14px 0; padding: 10px; border-radius: 16px; background: rgba(var(--deep-rgb), .6); border: 1px solid var(--line2); }
.ln-fig figcaption { text-align: center; color: var(--ink2); font-size: 14px; margin-top: 6px; line-height: 1.6; }
.ln-dgseg { justify-content: center; margin: 0 auto 8px; max-width: 280px; } .ln-dgseg button { padding: 5px 10px; font-size: 13px; }
.ln-try { display: block; width: 100%; margin: 12px 0; border-color: var(--accent); color: var(--accent); }
.ln-nav { display: flex; justify-content: space-between; gap: 10px; margin: 22px 0 10px; } .ln-nav .btn { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-exf { margin: 6px 0; } .ln-exf button.on { border-color: var(--accent); color: var(--accent); }
.ln-exp { padding-left: 20px; line-height: 1.8; } .ln-exp li.bad { color: var(--bad); } .ln-exp li.good { color: var(--good); }
.lk-open { margin-top: 8px; padding: 5px 12px; font-size: 13px; }
@media (min-width: 900px) { #tab-learn.active { max-width: 980px; margin: 0 auto; } }

.chips button.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .22); color: var(--ink-strong); }
.extra-doors { margin: 8px 0 4px; }
.extra-doors summary { cursor: pointer; color: var(--ink2); font-size: 14px; }

/* ---------- 量方向頁：坐／系統／向 三格＋即時盤面 ---------- */
.scv { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; margin: 6px 0 12px; }
.scv-c { border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--surface-rgb), .7); padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scv-c span { font-size: 12px; color: var(--ink2); }
.scv-c b { font-size: 20px; color: var(--ink-strong); font-weight: 800; }
.scv-c small { font-size: 12px; color: var(--ink2); font-family: var(--mono); }
.scv-c.mid b { color: var(--accent); }
.live-board { display: flex; flex-direction: column; gap: 12px; }
.bd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bd-k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--accent); opacity: .8; }
.bd-t { font-size: 22px; font-weight: 800; color: var(--ink-strong); }
.bd-src { flex: 0 0 auto; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); white-space: nowrap; }
.bd-src.live { color: var(--accent); border-color: rgba(var(--accent-rgb), .55); }
.bd-src.live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; box-shadow: var(--accent-glow); animation: bdPulse 1.4s ease-in-out infinite; }
.bd-src.lock { color: var(--warn); border-color: rgba(var(--warn-rgb), .5); }
@keyframes bdPulse { 50% { opacity: .25; } }
.bd-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.bd-door { flex: 1 1 220px; }
.bd-door button small { display: block; font-size: 11px; color: var(--ink2); }
.bd-door button.on small { color: inherit; }
.bd-floor { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line2); border-radius: 12px; padding: 3px; }
.bd-floor b { min-width: 40px; text-align: center; font-family: var(--mono); }
.bd-floor button { width: 38px; height: 38px; border: 0; border-radius: 9px; background: rgba(var(--accent-rgb), .1); color: var(--accent); font-size: 18px; }
.bd-line { font-size: 15px; color: var(--ink2); }
.bd-line b { color: var(--ink-strong); }
.bd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bd-cell { position: relative; aspect-ratio: 1.15; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--surface-rgb), .75); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; min-width: 0; transition: background .25s, border-color .25s; }
.bd-cell.g { background: linear-gradient(160deg, rgba(var(--good-rgb), .16), rgba(var(--surface-rgb), .8)); border-color: rgba(var(--good-rgb), .35); }
.bd-cell.b { background: linear-gradient(160deg, rgba(var(--bad-rgb), .12), rgba(var(--surface-rgb), .8)); border-color: rgba(var(--bad-rgb), .28); }
.bd-cell.center { background: linear-gradient(160deg, rgba(var(--accent-rgb), .28), var(--center-deep)); border-color: var(--accent); box-shadow: inset 0 0 24px rgba(var(--accent-rgb), .2); }
.bd-cell.is-door { outline: 2px solid var(--accent); outline-offset: -2px; }
.bd-star { font-size: clamp(13px, 2.2vw, 17px); font-weight: 800; }
.bd-cell.g .bd-star { color: var(--good); }
.bd-cell.b .bd-star { color: var(--bad); }
.bd-cell.center .bd-star { color: var(--accent); font-size: 13px; font-weight: 600; }
.bd-gua { font-size: clamp(26px, 5vw, 44px); font-weight: 900; color: var(--ink-strong); line-height: 1.1; }
.bd-dir { font-size: 11px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bd-tags { position: absolute; top: 5px; left: 6px; display: flex; gap: 3px; }
.bd-tags em { font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: rgba(var(--muted-rgb), .2); color: var(--ink2); }
.bd-tags em.door { background: var(--accent); color: var(--on-color); font-weight: 800; }
.bd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.bd-card { border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--surface-rgb), .65); padding: 10px 12px; min-width: 0; }
.bd-card.good { border-color: rgba(var(--good-rgb), .45); background: var(--good-soft); }
.bd-card.warn { border-color: rgba(var(--warn-rgb), .45); background: var(--warn-soft); }
.bd-card.bad { border-color: rgba(var(--bad-rgb), .45); background: var(--bad-soft); }
.bd-ck { font-size: 12px; color: var(--ink2); margin-bottom: 4px; }
.bd-cv { font-size: 15px; font-weight: 700; color: var(--ink-strong); }
.bd-lv { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 6px; margin-right: 6px; background: rgba(var(--ink-rgb), .12); }
.bd-card.good .bd-lv { background: var(--good); color: var(--on-color); }
.bd-card.warn .bd-lv { background: var(--warn); color: var(--on-color); }
.bd-card.bad .bd-lv { background: var(--bad); color: var(--on-color); }
.bd-card p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink2); }
.bd-act .btn { flex: 1 1 0; }
.bd-empty, .bd-blocked { padding: 20px 4px; text-align: center; }
.bd-blocked { color: var(--warn); }
@media (min-width: 900px) {
  #tab-compass.active { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
  #tab-compass > .hud { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 8px; }
  #tab-compass > .live-board { grid-column: 2; grid-row: 1; }
  #tab-compass > .howto { grid-column: 2; }
  #tab-compass > .panel:not(.live-board):not(.howto) { grid-column: 2; }
  .dial-wrap { width: min(100%, 400px); }
}
@media (min-width: 900px) {
  .bd-cell { aspect-ratio: 1.75; }
  .bd-gua { font-size: clamp(26px, 2.8vw, 38px); }
  .live-board { gap: 10px; }
}

.rp-overall { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 4px; }
.rp-overall b { font-size: 17px; }
.rp-overall span { font-size: 13px; color: var(--ink2); line-height: 1.55; }
.rp-overall.good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .5); } .rp-overall.good b { color: var(--good); }
.rp-overall.warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .5); } .rp-overall.warn b { color: var(--warn); }
.rp-overall.bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .5); } .rp-overall.bad b { color: var(--bad); }
.bd-ov { grid-column: 1 / -1; }

.fl-scroll { overflow-x: auto; }
.fl-table td small { display: block; font-size: 11px; color: var(--ink2); }
.fl-table td em { font-style: normal; margin-left: 4px; }
.fl-table tr[data-floor] { cursor: pointer; }
.fl-table tr.on td { background: rgba(var(--accent-rgb), .1); }
.fl-lv { font-weight: 800; white-space: nowrap; }
.fl-lv.good { color: var(--good); } .fl-lv.warn { color: var(--warn); } .fl-lv.bad { color: var(--bad); }
.fl-best { margin: 6px 0; } .fl-best b { color: var(--good); }
.fl-top { max-width: 200px; }

.floor-dims { margin: 8px 0; } .floor-dims summary { cursor: pointer; color: var(--ink2); font-size: 14px; }
.fd-row { align-items: flex-end; flex-wrap: wrap; } .fd-row b { min-width: 34px; padding-bottom: 10px; } .fd-row .field { max-width: 120px; }

.map-seg { flex-wrap: wrap; margin: 4px 0 8px; } .map-seg button { padding: 6px 10px; font-size: 13px; }
.shape-out { fill: none; stroke: var(--accent); stroke-width: 2; stroke-opacity: .6; pointer-events: none; }
.shape-map .rp-g, .shape-map .rp-s, .shape-map .rp-i { text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.bd-map .rp-disk { max-width: 420px; }

.shape-map { max-height: 460px; }
.bd-map { display: flex; justify-content: center; } .bd-map .rp-disk { height: min(380px, 70vw); width: auto; max-width: 100%; max-height: none; margin: 0 auto; }

.map-seg button { white-space: nowrap; flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) { .map-seg button { padding: 6px 4px; font-size: 12px; } }

/* 大門圖示（doorglyph.js） */
.dglyph .dg-frame { stroke: var(--accent); stroke-linecap: butt; }
.dglyph .dg-jamb { stroke: var(--ink-strong); stroke-linecap: round; }
.dglyph .dg-leaf { stroke: var(--accent); stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .7)); }
.dglyph .dg-swing { fill: none; stroke: var(--accent); opacity: .75; }
.dglyph .dg-arrowin { fill: var(--accent); }
.dglyph .dg-lbl { fill: var(--accent); font-weight: 800; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(var(--deep-rgb), .85); }
.dglyph.off { opacity: .35; } .dglyph.off .dg-leaf { filter: none; }

/* 手機寬度：頂列放不下時，品牌字縮短、選單可以縮 */
@media (max-width: 440px) {
  .brand small { display: none; }
  .project { flex: 1 1 auto; justify-content: flex-end; }
  .project select { max-width: none; flex: 1 1 auto; min-width: 0; }
  .icon-btn { flex: 0 0 40px; }
}

/* 主題切換按鈕：深色顯示太陽（按了變淺色）、淺色顯示月亮 */
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; margin: auto; }
.theme-btn .tb-moon { display: none; }
:root[data-theme="light"] .theme-btn .tb-sun { display: none; }
:root[data-theme="light"] .theme-btn .tb-moon { display: inline; fill: currentColor; stroke: none; }

/* ================= 閱讀排版（10-27 重新設計） =================
   原則：內文夠大、行距夠鬆、一行不要太長；重點靠「顏色＋粗細」而不是靠框；表格要有格線、表頭要有底色。 */
body { font-size: 16px; line-height: 1.6; }
.panel { padding: 16px; }
.panel-title { font-size: 17px; letter-spacing: .06em; }
.hint { font-size: 13.5px; line-height: 1.65; }

/* 重點標注（humanize.rich 產生） */
.st { font-weight: 800; padding: 0 .12em; border-radius: 4px; }
.st.g { color: var(--good); background: rgba(var(--good-rgb), .1); }
.st.b { color: var(--bad); background: rgba(var(--bad-rgb), .1); }
.gm { color: var(--ink-strong); font-weight: 800; }
.neg { color: var(--bad); font-weight: 800; }
.must { color: var(--accent); font-weight: 800; }
.num { font-family: var(--mono); font-size: .94em; font-weight: 700; color: var(--ink-strong); white-space: nowrap; }
.lead { color: var(--ink-strong); font-weight: 800; }
.kp { display: inline-block; margin: 0 6px 0 0; padding: 0 8px; border-radius: 6px; font-size: 12px; line-height: 20px; vertical-align: 1px; font-weight: 800; letter-spacing: .1em; color: var(--on-color); background: var(--accent); }

/* 學：一行最多約 38 個字，標題分層 */
@media (min-width: 900px) { #tab-learn.active { max-width: 820px; } }
.ln-title { font-size: 26px; line-height: 1.35; margin: 6px 0 16px; letter-spacing: .04em; font-weight: 800; color: var(--ink-strong); }
.ln-h { font-size: 19px; margin: 28px 0 10px; padding: 0 0 6px 0; border-left: 0; border-bottom: 1px solid var(--line2); color: var(--ink-strong); display: flex; align-items: center; gap: 10px; }
.ln-h::before { content: ""; flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--accent); }
.ln-p { font-size: 17px; line-height: 1.95; margin: 10px 0 14px; color: var(--ink); }
.ln-listb { padding: 14px 16px 12px; border-radius: 14px; }
.ln-lt { font-size: 13px; letter-spacing: .14em; color: var(--accent); font-weight: 800; margin-bottom: 8px; }
.ln-listb ul { padding-left: 1.25em; }
.ln-listb li { font-size: 16.5px; line-height: 1.85; margin: 6px 0; }
.ln-listb li::marker, .ln-exp li::marker { color: var(--accent); }
.ln-note { position: relative; padding: 12px 14px 12px 46px; border-radius: 12px; border: 1px solid rgba(var(--accent2-rgb), .3); border-left: 4px solid var(--accent2); background: var(--ref-soft); font-size: 16px; line-height: 1.85; }
.ln-note::before { content: "!"; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent2); color: var(--on-color); font-weight: 900; font-size: 13px; line-height: 20px; text-align: center; font-family: var(--mono); }
.ln-conf { border-left: 4px solid var(--warn); }
.ln-conf2 > div { background: rgba(var(--surface-rgb), .6); border: 1px solid var(--line); }
.ln-conf2 .ln-src.main { color: var(--on-color); background: var(--accent); border-color: var(--accent); }
.ln-fig figcaption { font-size: 14.5px; color: var(--ink2); }

/* 表格：完整格線、表頭底色、斑馬紋、第一欄加粗 */
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; line-height: 1.6; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; background: rgba(var(--surface-rgb), .55); }
table.grid th, table.grid td { padding: 10px 12px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.grid tr > :last-child { border-right: 0; }
table.grid tr:last-child > * { border-bottom: 0; }
table.grid tr:first-child th { background: rgba(var(--accent-rgb), .12); color: var(--ink-strong); font-weight: 800; font-size: 14px; letter-spacing: .06em; border-bottom: 1px solid var(--line2); white-space: nowrap; }
table.grid th[scope=row] { color: var(--ink-strong); font-weight: 800; background: rgba(var(--accent-rgb), .04); white-space: nowrap; }
table.grid tr:nth-child(even) td { background: rgba(var(--muted-rgb), .06); }
.ln-tw { margin: 14px 0; border-radius: 12px; }
.ln-tw caption, .ln-tw + .hint { caption-side: bottom; }

/* 報告：標題、內文分層 */
.f { padding: 14px 16px; border-radius: 14px; }
.f h3 { font-size: 17px; line-height: 1.5; color: var(--ink-strong); }
.f p { font-size: 15.5px; line-height: 1.85; color: var(--ink); }
.rp-overall b { font-size: 19px; }
.rp-overall span { font-size: 14.5px; line-height: 1.75; color: var(--ink); }
.verdict { font-size: 15px; line-height: 1.8; }

/* ================= 淺色主題：日式紙感、不發光 ================= */
:root[data-theme="light"] body { background:
    linear-gradient(rgba(var(--grid-rgb), var(--grid-a)) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(var(--grid-rgb), var(--grid-a)) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(1000px 500px at 85% -10%, rgba(var(--accent-rgb), .07), transparent 60%),
    var(--bg); }
:root[data-theme="light"] .panel, :root[data-theme="light"] .f, :root[data-theme="light"] .lk-card, :root[data-theme="light"] .ln-ch, :root[data-theme="light"] .ln-list li button {
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(var(--shadow-rgb), .04), 0 8px 24px -12px rgba(var(--shadow-rgb), .18); }
:root[data-theme="light"] .topbar, :root[data-theme="light"] .tabbar, :root[data-theme="light"] .lk-head, :root[data-theme="light"] .rp-toc { background: rgba(var(--surface-rgb), .97); }
:root[data-theme="light"] .panel-title::before { box-shadow: none; border-radius: 0; width: 3px; }
:root[data-theme="light"] .logo { box-shadow: none; }
:root[data-theme="light"] * { text-shadow: none !important; }
:root[data-theme="light"] #dial { filter: drop-shadow(0 6px 16px rgba(var(--shadow-rgb), .14)); }
:root[data-theme="light"] .dial-pointer { filter: drop-shadow(0 2px 2px rgba(var(--shadow-rgb), .25)); }
:root[data-theme="light"] .p-house, :root[data-theme="light"] .he-house, :root[data-theme="light"] .p-door, :root[data-theme="light"] .p-door-bar,
:root[data-theme="light"] .he-door.on, :root[data-theme="light"] .dglyph .dg-leaf, :root[data-theme="light"] .dc-needle, :root[data-theme="light"] .d-lockdot,
:root[data-theme="light"] .tabbar button.active svg, :root[data-theme="light"] .rp-w.sel, :root[data-theme="light"] .p-tick-big { filter: none; }
:root[data-theme="light"] .btn.primary { box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb), .55); }
:root[data-theme="light"] .tabbar button.active { color: var(--accent); }
:root[data-theme="light"] .tabbar button.active::after { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--accent); }
:root[data-theme="light"] .d-ring { fill: rgba(var(--surface-rgb), .96); }
:root[data-theme="light"] .d-center { fill: var(--surface-solid); }
:root[data-theme="light"] .dg-itemt { fill: #0b0f18; }
:root[data-theme="light"] .ln-title, :root[data-theme="light"] .ln-h, :root[data-theme="light"] .bd-t, :root[data-theme="light"] .rp-sec { font-family: var(--serif); }
:root[data-theme="light"] mark { color: var(--ink-strong); background: var(--hl); box-shadow: none; }
:root[data-theme="light"] .p-photo.inv { filter: none; }

:root[data-theme="light"] .ln-fig { background: rgba(var(--surface-rgb), .95); border-color: var(--line); }
:root[data-theme="light"] .dg-wedge.a { fill: rgba(var(--accent-rgb), .045); } :root[data-theme="light"] .dg-wedge.b { fill: rgba(var(--accent2-rgb), .05); }
:root[data-theme="light"] .dg-cell.n, :root[data-theme="light"] .dg-f3.n { fill: rgba(var(--surface-rgb), .9); }
/* 五行色：木青、火朱、土黃土、金灰金、水藍 */
.wx { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; font-weight: 800; font-size: .95em; }
.wx-木 { color: #2f9e62; background: rgba(47, 158, 98, .14); } .wx-火 { color: #e2553f; background: rgba(226, 85, 63, .14); }
.wx-土 { color: #b07b2c; background: rgba(176, 123, 44, .16); } .wx-金 { color: #8d8a7c; background: rgba(160, 150, 120, .2); }
.wx-水 { color: #3a7bd5; background: rgba(58, 123, 213, .14); }
:root:not([data-theme="light"]) .wx-金 { color: #d8cfa8; } :root:not([data-theme="light"]) .wx-水 { color: #6aa8ff; } :root:not([data-theme="light"]) .wx-土 { color: #e2b25f; }
/* 淺色版：選中的選項用藍染實色，一眼看得出選了哪個 */
:root[data-theme="light"] .seg button.on { background: var(--accent); color: #fff; box-shadow: none; }
:root[data-theme="light"] .seg button.on small, :root[data-theme="light"] .bd-door button.on small { color: rgba(255, 255, 255, .82); }
:root[data-theme="light"] .floor-tabs button.on, :root[data-theme="light"] .lk-kinds button.on, :root[data-theme="light"] .chips button.on { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }
:root[data-theme="light"] .floor-tabs button.on small { color: rgba(255, 255, 255, .82); }