/* === 印度占星 App 樣式 === */

:root {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-card: #16213e;
    --bg-input: #1a1a3e;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b8;
    --text-accent: #f0c040;
    --border: #2a2a4a;
    --accent: #f0c040;
    --accent2: #e94560;
    --accent3: #0f3460;
    --success: #4caf50;
    --warning: #ff9800;
    --danger: #ef5350;   /* 原 #f44336 在深色卡片上僅 4.32:1 */
    --benefic: #4caf50;
    --malefic: #ef5350;
    --mixed: #ff9800;
}

:root[data-theme="light"] {
    --bg-primary: #f4f2ec;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #f0eee6;
    --text-primary: #2a2a35;
    --text-secondary: #6b6b7a;
    --text-accent: #8a5c00;   /* 原 #a8710a 對比僅 4.17:1 */
    --border: #ded9c8;
    --accent: #c8912a;
    --accent2: #d1395a;
    --accent3: #3a5c8c;
    --success: #2e7d32;
    --warning: #e65100;
    --danger: #c62828;
    --benefic: #2e7d32;
    --malefic: #c62828;
    --mixed: #e65100;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--app-font, 'Segoe UI', 'Microsoft JhengHei', sans-serif);
    font-size: var(--user-font-size, 16px);
    background: var(--app-background, var(--bg-primary));
    background-size: var(--app-background-size, auto);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    transition: background 0.3s ease, color 0.3s ease;
}

/* User-selectable typography and backgrounds (all local CSS; no external font download). */
:root[data-font="system"] { --app-font: 'Segoe UI', 'Microsoft JhengHei', sans-serif; }
:root[data-font="serif"] { --app-font: Georgia, 'Noto Serif TC', 'PMingLiU', serif; }
:root[data-font="rounded"] { --app-font: 'Trebuchet MS', 'Microsoft JhengHei', sans-serif; }
:root[data-font="mono"] { --app-font: Consolas, 'Cascadia Mono', 'Microsoft JhengHei', monospace; }
:root[data-font="elegant"] { --app-font: 'Palatino Linotype', 'Book Antiqua', 'Microsoft JhengHei', serif; }

/* === 圖表風格（外觀設定 → 圖表風格；任何圖表都可直接取用 --chart-*）===
 * 每種風格各有深／淺兩版，跟隨網站主題切換。吉／逆配色均以 dataviz 驗證器
 * 檢查過亮度帶、色弱分離與對背景 3:1；台股經典（紅綠先天色弱分離不足）與水墨
 * （單色墨）未過的項目，一律以「上升空心、下降實心」的形狀作第二編碼補足。
 * 未列出的 celestial 即 :root 預設值。 */
:root {
    --chart-surface: var(--bg-card); --chart-ink: var(--text-primary); --chart-ink-2: var(--text-secondary);
    --chart-grid: var(--border); --chart-accent: var(--text-accent); --chart-font: var(--app-font);
    --chart-up: #B88A2C; --chart-down: #8A7BF0; --chart-flat: var(--text-secondary); --chart-ma: var(--text-primary);
    --chart-zone-hi: rgba(240, 192, 64, .07); --chart-zone-lo: rgba(138, 123, 240, .08);
    --chart-band-a: rgba(240, 192, 64, .16); --chart-band-b: rgba(138, 123, 240, .18); --chart-sade: rgba(160, 160, 184, .22);
}
:root[data-theme="light"] {
    --chart-up: #A87A1E; --chart-down: #6A5AD6;
    --chart-zone-hi: rgba(168, 122, 30, .07); --chart-zone-lo: rgba(106, 90, 214, .07);
    --chart-band-a: rgba(168, 122, 30, .14); --chart-band-b: rgba(106, 90, 214, .13); --chart-sade: rgba(85, 85, 95, .16);
}
:root[data-chart-style="twstock"] {
    --chart-surface: #0e0f13; --chart-ink: #e6e6e6; --chart-ink-2: #9a9aa3; --chart-grid: #23252c; --chart-accent: #f5d142;
    --chart-font: Consolas, 'Cascadia Mono', 'Microsoft JhengHei', monospace;
    --chart-up: #E8443F; --chart-down: #18A15E; --chart-flat: #cfcfcf; --chart-ma: #f5d142;
    --chart-zone-hi: transparent; --chart-zone-lo: transparent;
    --chart-band-a: rgba(255, 255, 255, .07); --chart-band-b: rgba(255, 255, 255, .13); --chart-sade: rgba(245, 209, 66, .16);
}
:root[data-theme="light"][data-chart-style="twstock"] {
    --chart-surface: #ffffff; --chart-ink: #1a1a1a; --chart-ink-2: #5a5a62; --chart-grid: #e2e2e6; --chart-accent: #8a6400;
    --chart-up: #D32F2F; --chart-down: #138A4E; --chart-flat: #5a5a62; --chart-ma: #b07d00;
    --chart-band-a: rgba(0, 0, 0, .05); --chart-band-b: rgba(0, 0, 0, .10); --chart-sade: rgba(176, 125, 0, .16);
}
:root[data-chart-style="ink"] {
    --chart-surface: #1b1a17; --chart-ink: #e8e2d4; --chart-ink-2: #a39b8a; --chart-grid: #34312b; --chart-accent: #D9574A;
    --chart-font: Georgia, 'Noto Serif TC', 'PMingLiU', serif;
    --chart-up: #D9574A; --chart-down: #BDB5A4; --chart-flat: #8a8170; --chart-ma: rgba(232, 226, 212, .45);
    --chart-zone-hi: transparent; --chart-zone-lo: transparent;
    --chart-band-a: rgba(232, 226, 212, .06); --chart-band-b: rgba(232, 226, 212, .12); --chart-sade: rgba(232, 226, 212, .12);
}
:root[data-theme="light"][data-chart-style="ink"] {
    --chart-surface: #F3EEE2; --chart-ink: #2B2B2B; --chart-ink-2: #6b6355; --chart-grid: #ddd3bf; --chart-accent: #B8352B;
    --chart-up: #B8352B; --chart-down: #2B2B2B; --chart-ma: rgba(43, 43, 43, .45);
    --chart-band-a: rgba(43, 43, 43, .06); --chart-band-b: rgba(43, 43, 43, .12); --chart-sade: rgba(43, 43, 43, .14);
}
:root[data-chart-style="ridge"] {
    --chart-surface: #101826; --chart-ink: #e3e8f0; --chart-ink-2: #97a3b6; --chart-grid: #1e2a3d; --chart-accent: #f0c040;
    --chart-up: #B88A2C; --chart-down: #4F82E6; --chart-flat: #97a3b6; --chart-ma: #e3e8f0;
    --chart-zone-hi: transparent; --chart-zone-lo: transparent;
    --chart-band-a: rgba(240, 192, 64, .12); --chart-band-b: rgba(79, 130, 230, .16); --chart-sade: rgba(151, 163, 182, .2);
}
:root[data-theme="light"][data-chart-style="ridge"] {
    --chart-surface: #f7f9fc; --chart-ink: #1d2533; --chart-ink-2: #566275; --chart-grid: #dde3ec; --chart-accent: #8a5c00;
    --chart-up: #A87A1E; --chart-down: #2F66CC; --chart-flat: #566275; --chart-ma: #1d2533;
    --chart-band-a: rgba(168, 122, 30, .12); --chart-band-b: rgba(47, 102, 204, .12); --chart-sade: rgba(86, 98, 117, .16);
}
:root[data-chart-style="clear"] {
    --chart-surface: #121418; --chart-ink: #f0f0f4; --chart-ink-2: #b4b4c0; --chart-grid: #2c2f36; --chart-accent: #8fb3ff;
    --chart-up: #5B8DEF; --chart-down: #D06A2A; --chart-flat: #b4b4c0; --chart-ma: #f0f0f4;
    --chart-zone-hi: rgba(91, 141, 239, .07); --chart-zone-lo: rgba(208, 106, 42, .08);
    --chart-band-a: rgba(91, 141, 239, .14); --chart-band-b: rgba(208, 106, 42, .14); --chart-sade: rgba(240, 240, 244, .14);
}
:root[data-theme="light"][data-chart-style="clear"] {
    --chart-surface: #ffffff; --chart-ink: #1d1d24; --chart-ink-2: #55555f; --chart-grid: #e3e3e8; --chart-accent: #1F5FCC;
    --chart-up: #1F5FCC; --chart-down: #C2561A; --chart-flat: #55555f; --chart-ma: #1d1d24;
    --chart-zone-hi: rgba(31, 95, 204, .05); --chart-zone-lo: rgba(194, 86, 26, .06);
    --chart-band-a: rgba(31, 95, 204, .10); --chart-band-b: rgba(194, 86, 26, .10); --chart-sade: rgba(29, 29, 36, .12);
}
:root[data-background="midnight"] { --app-background: #0f0f1a; }
:root[data-background="starlight"] { --app-background: radial-gradient(circle at 20% 16%, #493d8444 0 1px, transparent 2px), radial-gradient(circle at 74% 38%, #e9c87a66 0 1px, transparent 2px), linear-gradient(135deg, #0c1128, #191335 55%, #090d1f); --app-background-size: 47px 47px, 79px 79px, auto; }
:root[data-background="nebula"] { --app-background: radial-gradient(circle at 18% 20%, #7c4dbc66, transparent 32%), radial-gradient(circle at 82% 72%, #1b8ca866, transparent 29%), linear-gradient(145deg, #100d27, #20113b 48%, #091a30); }
:root[data-background="golden"] { --app-background: repeating-radial-gradient(circle at 50% 0%, #dcb45d16 0 2px, transparent 3px 26px), linear-gradient(140deg, #191321, #342411 55%, #12101f); }
:root[data-background="ocean"] { --app-background: radial-gradient(ellipse at 50% -20%, #2f92ae55, transparent 50%), repeating-linear-gradient(160deg, #ffffff08 0 1px, transparent 1px 26px), #071c2c; }
:root[data-background="parchment"] { --app-background: repeating-linear-gradient(0deg, #5f47100c 0 1px, transparent 1px 5px), radial-gradient(circle at 20% 30%, #ecd89232, transparent 35%), #2a221d; }
:root[data-background="rose"] { --app-background: radial-gradient(circle at 72% 18%, #e67ca144, transparent 30%), radial-gradient(circle at 15% 76%, #7b4d9b55, transparent 32%), #211326; }
:root[data-background="jade"] { --app-background: repeating-linear-gradient(45deg, #73d39b0c 0 1px, transparent 1px 17px), radial-gradient(circle at 50% 0%, #4cc99d33, transparent 46%), #0d2928; }
:root[data-background="indigo"] { --app-background: repeating-linear-gradient(90deg, #b5a9ff0b 0 1px, transparent 1px 32px), repeating-linear-gradient(0deg, #b5a9ff0b 0 1px, transparent 1px 32px), #171538; }
:root[data-background="sunset"] { --app-background: radial-gradient(circle at 72% 17%, #ffd06d44, transparent 18%), linear-gradient(155deg, #34205c, #9b4f4f 57%, #302149); }
:root[data-background="sriyantra"] { --app-background: repeating-conic-gradient(from 30deg at 50% 48%, #d7a44b13 0 3deg, transparent 3deg 30deg), linear-gradient(60deg, transparent 47%, #d7a44b1d 48% 49%, transparent 50%), linear-gradient(-60deg, transparent 47%, #d7a44b1d 48% 49%, transparent 50%), #111126; --app-background-size: 38vmax 38vmax, 19vmax 19vmax, 19vmax 19vmax, auto; }
:root[data-background="lotus"] { --app-background: repeating-conic-gradient(from 0deg at 50% 52%, #dd81bc18 0 9deg, transparent 9deg 18deg), radial-gradient(ellipse at 50% 52%, #d47bae20 0 18%, transparent 19%), #1c1227; --app-background-size: 52vmax 52vmax, auto, auto; }
:root[data-background="nakshatra"] { --app-background: repeating-conic-gradient(from 0deg at 50% 50%, #88bde014 0 1deg, transparent 1deg 13.333deg), radial-gradient(circle at 22% 32%, #f5d57988 0 1px, transparent 2px), radial-gradient(circle at 76% 68%, #b7cdf166 0 1px, transparent 2px), #101a2c; --app-background-size: 62vmax 62vmax, 71px 71px, 103px 103px, auto; }
:root[data-background="zodiac"] { --app-background: repeating-conic-gradient(from 0deg at 50% 50%, #d8ad5c1a 0 1deg, transparent 1deg 30deg), repeating-radial-gradient(circle at 50% 50%, transparent 0 12vmax, #d8ad5c16 12vmax 12.2vmax, transparent 12.4vmax 18vmax), #151527; --app-background-size: 58vmax 58vmax, 58vmax 58vmax, auto; }
:root[data-background="southchart"] { --app-background: linear-gradient(#cba86a20 1px, transparent 1px), linear-gradient(90deg, #cba86a20 1px, transparent 1px), linear-gradient(45deg, transparent 47%, #cba86a12 48% 52%, transparent 53%), #161923; --app-background-size: 24vmax 24vmax, 24vmax 24vmax, 24vmax 24vmax, auto; }
:root[data-background="northchart"] { --app-background: linear-gradient(45deg, transparent 49.6%, #d8b76d22 50% 50.4%, transparent 51%), linear-gradient(-45deg, transparent 49.6%, #d8b76d22 50% 50.4%, transparent 51%), linear-gradient(90deg, #d8b76d1b 1px, transparent 1px), #171522; --app-background-size: 30vmax 30vmax, 30vmax 30vmax, 30vmax 30vmax, auto; }
:root[data-background="navagraha"] { --app-background: radial-gradient(circle at 17% 20%, #cf7a4c33 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 50% 20%, #e9e7d433 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 83% 20%, #d65b4c33 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 17% 50%, #65ae8233 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 50% 50%, #e5c85733 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 83% 50%, #eee7d633 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 17% 80%, #52658433 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 50% 80%, #9b999633 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 83% 80%, #9a725433 0 2.4vmax, transparent 2.6vmax), #111824; --app-background-size: 34vmax 34vmax; }
:root[data-background="eclipse"] { --app-background: radial-gradient(circle at 38% 40%, #f2c95a99 0 8vmax, #2a2233 8.2vmax 11vmax, transparent 11.2vmax), radial-gradient(ellipse at 77% 70%, transparent 0 11vmax, #76587b22 11.2vmax 12vmax, transparent 12.2vmax), #111323; }
:root[data-background="temple"] { --app-background: repeating-linear-gradient(0deg, #c58a4b16 0 2px, transparent 2px 20px), radial-gradient(circle at 12px 10px, #dbb07422 0 2px, transparent 3px), #292019; --app-background-size: auto, 24px 20px, auto; }
:root[data-background="ganga"] { --app-background: repeating-linear-gradient(0deg, #c5ddd716 0 1px, transparent 1px 18px), linear-gradient(180deg, #c28c3e44 0 18%, #446f8b55 48%, #183d5766 100%), #142d42; }
:root[data-background="sushumna"] { --app-background: linear-gradient(90deg, transparent 46%, #d4af371c 49% 51%, transparent 54%), repeating-linear-gradient(45deg, #7952900e 0 1px, transparent 1px 28px), #0e121a; }
:root[data-background="dasha"] { --app-background: repeating-radial-gradient(circle at 15% 85%, transparent 0 24px, #e0a84515 25px 26px, transparent 27px 52px), #13101d; }
:root[data-background="brahma"] { --app-background: radial-gradient(circle at 78% 22%, #fff2b844 0 1px, transparent 3px), linear-gradient(175deg, #0a0e26 40%, #281938 72%, #42253f 100%); }
:root[data-background="sudarshana"] { --app-background: repeating-conic-gradient(from 0deg at 50% 50%, #d97d3814 0 1.66deg, transparent 1.66deg 3.33deg), radial-gradient(circle at 50% 50%, transparent 0 22vmax, #e5b34218 22.1vmax 22.4vmax, transparent 22.6vmax), #170e15; --app-background-size: 54vmax 54vmax, 54vmax 54vmax, auto; }
:root[data-background="agni"] { --app-background: radial-gradient(ellipse at 50% 115%, #c96b2728 0 45%, #75292418 52%, transparent 70%), radial-gradient(circle at 35% 72%, #f7cf5925 0 1px, transparent 2px), radial-gradient(circle at 68% 62%, #f7cf5920 0 1px, transparent 2px), #181110; --app-background-size: auto, 68px 68px, 94px 94px, auto; }
:root[data-background="sarvatobhadra"] { --app-background: linear-gradient(#4ea8de15 1px, transparent 1px), linear-gradient(90deg, #4ea8de15 1px, transparent 1px), radial-gradient(circle at 50% 50%, #4ea8de18 0, transparent 45%), #0f171e; --app-background-size: 32px 32px, 32px 32px, auto, auto; }

/* 明亮主題沿用同一意象，但將圖樣壓低到白色卡片之外的襯底。 */
:root[data-theme="light"][data-background="midnight"] { --app-background: linear-gradient(135deg, #f4f2ec, #e8eaf1); }
:root[data-theme="light"][data-background="starlight"] { --app-background: radial-gradient(circle at 20% 16%, #7868a833 0 1px, transparent 2px), radial-gradient(circle at 74% 38%, #b8913d44 0 1px, transparent 2px), linear-gradient(135deg, #f4f3fa, #eceaf5); --app-background-size: 47px 47px, 79px 79px, auto; }
:root[data-theme="light"][data-background="nebula"] { --app-background: radial-gradient(circle at 18% 20%, #a981c633, transparent 32%), radial-gradient(circle at 82% 72%, #69aebe33, transparent 29%), #f1f1f5; }
:root[data-theme="light"][data-background="golden"] { --app-background: repeating-radial-gradient(circle at 50% 0%, #b9862a20 0 2px, transparent 3px 26px), #f6f1e7; }
:root[data-theme="light"][data-background="ocean"] { --app-background: radial-gradient(ellipse at 50% -20%, #72afc833, transparent 50%), repeating-linear-gradient(160deg, #477f9910 0 1px, transparent 1px 26px), #edf4f4; }
:root[data-theme="light"][data-background="parchment"] { --app-background: repeating-linear-gradient(0deg, #84662812 0 1px, transparent 1px 5px), radial-gradient(circle at 20% 30%, #d8bd6b2b, transparent 35%), #f5f0e5; }
:root[data-theme="light"][data-background="rose"] { --app-background: radial-gradient(circle at 72% 18%, #d9799d2c, transparent 30%), radial-gradient(circle at 15% 76%, #9c75aa2c, transparent 32%), #f6eef2; }
:root[data-theme="light"][data-background="jade"] { --app-background: repeating-linear-gradient(45deg, #4d9f7a12 0 1px, transparent 1px 17px), radial-gradient(circle at 50% 0%, #66bb9a2b, transparent 46%), #edf5f0; }
:root[data-theme="light"][data-background="indigo"] { --app-background: repeating-linear-gradient(90deg, #766ba516 0 1px, transparent 1px 32px), repeating-linear-gradient(0deg, #766ba516 0 1px, transparent 1px 32px), #f0eff7; }
:root[data-theme="light"][data-background="sunset"] { --app-background: radial-gradient(circle at 72% 17%, #e8ae562f, transparent 18%), linear-gradient(155deg, #f3edf4, #f5e8e2); }
:root[data-theme="light"][data-background="sriyantra"] { --app-background: repeating-conic-gradient(from 30deg at 50% 48%, #ad7b2620 0 3deg, transparent 3deg 30deg), linear-gradient(60deg, transparent 47%, #ad7b261d 48% 49%, transparent 50%), linear-gradient(-60deg, transparent 47%, #ad7b261d 48% 49%, transparent 50%), #f5f1e9; --app-background-size: 38vmax 38vmax, 19vmax 19vmax, 19vmax 19vmax, auto; }
:root[data-theme="light"][data-background="lotus"] { --app-background: repeating-conic-gradient(from 0deg at 50% 52%, #c76a9e1b 0 9deg, transparent 9deg 18deg), radial-gradient(ellipse at 50% 52%, #d98ab323 0 18%, transparent 19%), #f7eff4; --app-background-size: 52vmax 52vmax, auto, auto; }
:root[data-theme="light"][data-background="nakshatra"] { --app-background: repeating-conic-gradient(from 0deg at 50% 50%, #5f92b51b 0 1deg, transparent 1deg 13.333deg), radial-gradient(circle at 22% 32%, #b6903d66 0 1px, transparent 2px), radial-gradient(circle at 76% 68%, #7196bd55 0 1px, transparent 2px), #edf2f5; --app-background-size: 62vmax 62vmax, 71px 71px, 103px 103px, auto; }
:root[data-theme="light"][data-background="zodiac"] { --app-background: repeating-conic-gradient(from 0deg at 50% 50%, #ad812d1c 0 1deg, transparent 1deg 30deg), repeating-radial-gradient(circle at 50% 50%, transparent 0 12vmax, #ad812d15 12vmax 12.2vmax, transparent 12.4vmax 18vmax), #f5f2e9; --app-background-size: 58vmax 58vmax, 58vmax 58vmax, auto; }
:root[data-theme="light"][data-background="southchart"] { --app-background: linear-gradient(#9a78341b 1px, transparent 1px), linear-gradient(90deg, #9a78341b 1px, transparent 1px), linear-gradient(45deg, transparent 47%, #9a783412 48% 52%, transparent 53%), #f5f2e9; --app-background-size: 24vmax 24vmax, 24vmax 24vmax, 24vmax 24vmax, auto; }
:root[data-theme="light"][data-background="northchart"] { --app-background: linear-gradient(45deg, transparent 49.6%, #94773520 50% 50.4%, transparent 51%), linear-gradient(-45deg, transparent 49.6%, #94773520 50% 50.4%, transparent 51%), linear-gradient(90deg, #94773518 1px, transparent 1px), #f4f1e9; --app-background-size: 30vmax 30vmax, 30vmax 30vmax, 30vmax 30vmax, auto; }
:root[data-theme="light"][data-background="navagraha"] { --app-background: radial-gradient(circle at 17% 20%, #bf744522 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 50% 20%, #aaa79d22 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 83% 20%, #c8584922 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 17% 50%, #54966e22 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 50% 50%, #c29e3022 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 83% 50%, #d5c9b322 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 17% 80%, #52658422 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 50% 80%, #88868122 0 2.4vmax, transparent 2.6vmax), radial-gradient(circle at 83% 80%, #92705222 0 2.4vmax, transparent 2.6vmax), #eff2f0; --app-background-size: 34vmax 34vmax; }
:root[data-theme="light"][data-background="eclipse"] { --app-background: radial-gradient(circle at 38% 40%, #d8ae4d77 0 8vmax, #e6e1e5 8.2vmax 11vmax, transparent 11.2vmax), radial-gradient(ellipse at 77% 70%, transparent 0 11vmax, #987c9822 11.2vmax 12vmax, transparent 12.2vmax), #f2f0f3; }
:root[data-theme="light"][data-background="temple"] { --app-background: repeating-linear-gradient(0deg, #ae78421b 0 2px, transparent 2px 20px), radial-gradient(circle at 12px 10px, #bc8d5722 0 2px, transparent 3px), #f4ede2; --app-background-size: auto, 24px 20px, auto; }
:root[data-theme="light"][data-background="ganga"] { --app-background: repeating-linear-gradient(0deg, #6d9a9c16 0 1px, transparent 1px 18px), linear-gradient(180deg, #efd5a5 0 18%, #bdd6da 48%, #dcebed 100%); }
:root[data-theme="light"][data-background="sushumna"] { --app-background: linear-gradient(90deg, transparent 46%, #b5923b1c 49% 51%, transparent 54%), repeating-linear-gradient(45deg, #7a5e8c10 0 1px, transparent 1px 28px), #f6f4ee; }
:root[data-theme="light"][data-background="dasha"] { --app-background: repeating-radial-gradient(circle at 15% 85%, transparent 0 24px, #9e7d3b18 25px 26px, transparent 27px 52px), #f5f1eb; }
:root[data-theme="light"][data-background="brahma"] { --app-background: radial-gradient(circle at 78% 22%, #b58d3533 0 1px, transparent 3px), linear-gradient(175deg, #ebf1f8 40%, #f3e6ea 75%, #faebe2 100%); }
:root[data-theme="light"][data-background="sudarshana"] { --app-background: repeating-conic-gradient(from 0deg at 50% 50%, #b0632b12 0 1.66deg, transparent 1.66deg 3.33deg), radial-gradient(circle at 50% 50%, transparent 0 22vmax, #b58a2d18 22.1vmax 22.4vmax, transparent 22.6vmax), #f7f3e8; --app-background-size: 54vmax 54vmax, 54vmax 54vmax, auto; }
:root[data-theme="light"][data-background="agni"] { --app-background: radial-gradient(ellipse at 50% 115%, #e085481a 0 45%, #b54a3e10 52%, transparent 70%), radial-gradient(circle at 35% 72%, #b5822d1a 0 1px, transparent 2px), radial-gradient(circle at 68% 62%, #b5822d14 0 1px, transparent 2px), #faf4ee; --app-background-size: auto, 68px 68px, 94px 94px, auto; }
:root[data-theme="light"][data-background="sarvatobhadra"] { --app-background: linear-gradient(#5b829615 1px, transparent 1px), linear-gradient(90deg, #5b829615 1px, transparent 1px), radial-gradient(circle at 50% 50%, #5b829614 0, transparent 45%), #f0f3f6; --app-background-size: 32px 32px, 32px 32px, auto, auto; }

/* === Opening animation === */
.startup-overlay { position:fixed; z-index:10000; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; overflow:hidden; background:#080c1d; color:#f8df8a; transition:opacity .45s ease,visibility .45s ease; }.startup-overlay.is-leaving { opacity:0; visibility:hidden; pointer-events:none; }.startup-scene { width:min(270px,68vw); height:210px; position:relative; display:grid; place-items:center; }.startup-copy { display:flex; flex-direction:column; align-items:center; letter-spacing:.18em; text-transform:uppercase; animation:intro-copy 1.1s ease both; }.startup-copy span { font-size:1.2rem; color:#fff1b8; text-shadow:0 0 18px #ffd866; }.startup-copy strong { font:600 clamp(1.45rem,6vw,2rem) Georgia,serif; }.startup-copy small { margin-top:4px; font-size:.62rem; color:#c7c9e6; letter-spacing:.26em; }
.startup-stars,.startup-stars::before,.startup-stars::after { position:absolute; inset:0; content:''; background-image:radial-gradient(#fff 1px,transparent 1.8px),radial-gradient(#f9d675 1px,transparent 1.6px); background-size:42px 42px,71px 71px; background-position:0 0,19px 11px; opacity:.72; animation:intro-twinkle 1.2s ease-in-out infinite alternate; }.startup-wheel { width:156px; height:156px; border:2px solid #e9bc54; border-radius:50%; box-shadow:0 0 30px #d68b274d,inset 0 0 30px #d68b2729; animation:intro-spin 9s linear infinite; position:relative; }.startup-wheel::before { content:''; position:absolute; inset:29px; border:1px solid #e9bc54; border-radius:50%; }.startup-wheel i { position:absolute; height:50%; width:1px; background:#e9bc54; left:50%; transform-origin:bottom; }.startup-wheel i:nth-child(1){transform:rotate(30deg)}.startup-wheel i:nth-child(2){transform:rotate(60deg)}.startup-wheel i:nth-child(3){transform:rotate(90deg)}.startup-wheel i:nth-child(4){transform:rotate(120deg)}.startup-wheel i:nth-child(5){transform:rotate(150deg)}.startup-wheel i:nth-child(6){transform:rotate(180deg)}.startup-wheel i:nth-child(7){transform:rotate(210deg)}.startup-wheel i:nth-child(8){transform:rotate(240deg)}.startup-wheel i:nth-child(9){transform:rotate(270deg)}.startup-wheel i:nth-child(10){transform:rotate(300deg)}.startup-wheel i:nth-child(11){transform:rotate(330deg)}
.startup-orbit { position:absolute; width:184px; height:70px; border:1px solid #81c9ff; border-radius:50%; transform:rotate(-26deg); animation:intro-spin 4s linear infinite; }.startup-orbit i { width:11px; height:11px; border-radius:50%; background:#f7cf59; box-shadow:0 0 16px #f7cf59; position:absolute; left:9px; top:22px; }.orbit-b { width:100px; height:172px; transform:rotate(48deg); animation-direction:reverse; animation-duration:3.1s; border-color:#d990ff; }.orbit-b i { background:#e986a3; box-shadow:0 0 16px #e986a3; }.startup-constellation { position:absolute; width:238px; fill:#fff4c5; stroke:#81c9ff; stroke-width:1.5; stroke-dasharray:330; animation:intro-draw 1.4s ease both; }.startup-eclipse { width:134px; height:134px; position:absolute; border-radius:50%; background:#f9d471; box-shadow:0 0 45px #f9b84a,0 0 0 10px #f9b84a1f; }.startup-eclipse::after { content:''; position:absolute; width:134px; height:134px; border-radius:inherit; background:#080c1d; animation:intro-eclipse 1.8s ease-in-out both; }
.startup-lotus { width:150px; height:130px; position:relative; }.startup-lotus i { position:absolute; width:52px; height:106px; bottom:10px; left:49px; transform-origin:50% 100%; border-radius:52px 52px 8px 8px; background:linear-gradient(#fce6fa,#c470db); box-shadow:0 0 16px #db8bea77; animation:intro-bloom 1.25s ease both; }.startup-lotus i:nth-child(1){transform:rotate(-66deg) scale(.7)}.startup-lotus i:nth-child(2){transform:rotate(-38deg) scale(.85)}.startup-lotus i:nth-child(3){transform:rotate(-12deg)}.startup-lotus i:nth-child(4){transform:rotate(12deg)}.startup-lotus i:nth-child(5){transform:rotate(38deg) scale(.85)}.startup-lotus i:nth-child(6){transform:rotate(66deg) scale(.7)}.startup-aurora { position:absolute; inset:12px -80px; background:linear-gradient(115deg,transparent 25%,#50f1d955 42%,#8d72f966 52%,transparent 68%); filter:blur(13px); transform:skewY(-13deg) translateX(-60%); animation:intro-aurora 1.7s ease-out both; }.startup-mandala { position:absolute; width:162px; height:162px; border:1px solid #f1ca72; border-radius:50%; animation:intro-spin 8s linear infinite; }.startup-mandala i { position:absolute; inset:18px 72px; border:1px solid #f1ca72; border-radius:50%; transform-origin:50% 63px; }.startup-mandala i:nth-child(2){transform:rotate(45deg)}.startup-mandala i:nth-child(3){transform:rotate(90deg)}.startup-mandala i:nth-child(4){transform:rotate(135deg)}.startup-meteor { position:absolute; width:140px; height:2px; top:24px; left:-45px; background:linear-gradient(90deg,transparent,#fff,#f8c957); box-shadow:0 0 12px #fff; transform:rotate(-24deg); animation:intro-meteor 1.25s ease-out both; }.startup-sunrise { position:absolute; width:134px; height:67px; bottom:5px; overflow:hidden; border-radius:134px 134px 0 0; background:radial-gradient(circle at 50% 100%,#fff2ae 0 30%,#f29a46 32% 46%,transparent 48%); animation:intro-sunrise 1.45s ease-out both; }
.startup-overlay>.startup-scene>:not(.startup-stars),.startup-overlay.intro-zodiac .startup-stars { display:none; }.startup-overlay.intro-zodiac .startup-wheel,.startup-overlay.intro-zodiac .startup-stars,.startup-overlay.intro-orbit .startup-orbit,.startup-overlay.intro-orbit .startup-stars,.startup-overlay.intro-stars .startup-stars,.startup-overlay.intro-constellation .startup-constellation,.startup-overlay.intro-eclipse .startup-eclipse,.startup-overlay.intro-lotus .startup-lotus,.startup-overlay.intro-aurora .startup-aurora,.startup-overlay.intro-aurora .startup-stars,.startup-overlay.intro-mandala .startup-mandala,.startup-overlay.intro-meteor .startup-meteor,.startup-overlay.intro-meteor .startup-stars,.startup-overlay.intro-sunrise .startup-sunrise { display:block; }
@keyframes intro-copy{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes intro-twinkle{to{opacity:1;transform:scale(1.04)}}@keyframes intro-spin{to{transform:rotate(360deg)}}@keyframes intro-draw{from{stroke-dashoffset:330;opacity:0}to{stroke-dashoffset:0;opacity:1}}@keyframes intro-eclipse{0%{transform:translateX(-150px)}60%{transform:translateX(0)}100%{transform:translateX(150px)}}@keyframes intro-bloom{from{opacity:0}to{opacity:1}}@keyframes intro-aurora{to{transform:skewY(-13deg) translateX(55%)}}@keyframes intro-meteor{from{transform:translate(-100px,-30px) rotate(-24deg);opacity:0}to{transform:translate(220px,120px) rotate(-24deg);opacity:1}}@keyframes intro-sunrise{from{transform:translateY(74px);opacity:0}to{transform:none;opacity:1}}.intro-settings-modal{width:min(450px,calc(100vw - 32px))}.intro-settings-modal select:disabled{opacity:.55;cursor:not-allowed}@media (prefers-reduced-motion:reduce){.startup-overlay *,.startup-copy{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.appearance-settings-divider{margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--border);color:var(--text-accent);font-weight:700}.font-size-control{display:flex;align-items:center;gap:10px;width:100%}.font-size-control input{flex:1;accent-color:var(--accent)}.font-size-control output{min-width:42px;color:var(--text-accent);font-variant-numeric:tabular-nums}.intro-settings-modal{overflow-y:auto}

/* === 頂部 === */
.app-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.app-header h1 {
    font-size: 1.4em;
    color: var(--text-accent);
    white-space: nowrap;
}

.tab-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}

.tab-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
    font-weight: bold;
}

.theme-toggle-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.2s;
}

.theme-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    transform: rotate(15deg);
}

/* === 主要佈局 === */
.main-content {
    display: flex;
    min-height: calc(100vh - 60px);
}

.sidebar {
    width: 320px;
    min-width: 320px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
}

.content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
}

/* === 面板 === */
.panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.panel h2 {
    font-size: 1.1em;
    color: var(--text-accent);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* === 表單 === */
.form-row {
    margin-bottom: 12px;
}

.form-row label {
    display: block;
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.form-row input,
.form-row select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.9em;
    width: 100%;
}

.form-row input:focus,
.form-row select:focus {
    /* 僅改 border-color 的焦點提示太不明顯（稽核時偵測不到可見焦點），
       補上外框光暈讓鍵盤使用者看得出焦點位置 */
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 192, 64, 0.35);
    border-color: var(--accent);
}

.date-inputs,
.time-inputs,
.location-inputs {
    display: flex;
    gap: 6px;
    align-items: center;
}

.date-inputs input,
.time-inputs input {
    width: auto;
    flex: 1;
}

.date-inputs select {
    width: auto;
    flex: 1.5;
}

.btn-primary {
    background: var(--accent);
    color: var(--bg-primary);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    width: 100%;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: #f5d060;
    transform: translateY(-1px);
}

.btn-sm {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
}

.btn-sm.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

/* 「我的命盤」的匯出／匯入備份按鈕列 */
.backup-btns {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.backup-btns .btn-sm {
    flex: 1;
}

/* === 頁籤內容 === */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: tabFadeIn 0.35s ease;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === 命盤佈局 === */
.chart-layout {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.chart-section {
    flex: 1;
    min-width: 400px;
}

.chart-section h3,
.info-section h3 {
    color: var(--text-accent);
    margin-bottom: 12px;
}

.chart-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.chart-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.chart-container svg {
    max-width: 100%;
    height: auto;
}

.info-section {
    flex: 1;
    min-width: 300px;
}

/* === 行星表格 === */
.planet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.planet-table th {
    background: var(--bg-secondary);
    color: var(--text-accent);
    padding: 8px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
}

.planet-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.planet-table tr:hover {
    background: rgba(240, 192, 64, 0.05);
}

.benefic-tag {
    color: var(--benefic);
}

.malefic-tag {
    color: var(--malefic);
}

.mixed-tag {
    color: var(--mixed);
}

.retrograde-badge {
    display: inline-block;
    background: rgba(233, 68, 96, 0.2);
    color: var(--accent2);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    margin-left: 4px;
}

/* === Dasha 時間線 === */
.dasha-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mahadasha-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.mahadasha-card:hover {
    border-color: var(--accent);
    transform: translateX(2px);
}

.mahadasha-card .expand-icon {
    color: var(--text-secondary);
    transition: transform 0.3s ease;
    font-size: 0.9em;
}

.mahadasha-card.expanded .expand-icon {
    transform: rotate(180deg);
    color: var(--accent);
}

.mahadasha-card .lord-icon {
    font-size: 1.8em;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 50%;
}

.mahadasha-card .dasha-info {
    flex: 1;
}

.mahadasha-card .dasha-name {
    font-weight: bold;
    font-size: 1.1em;
}

.mahadasha-card .dasha-dates {
    color: var(--text-secondary);
    font-size: 0.85em;
}

/* 首段只有餘額、子運在出生時已在進行 —— 兩個標記都只是註記，不搶主資訊的視覺重量 */
.mahadasha-card .dasha-partial {
    margin-left: 8px;
    font-weight: normal;
    font-size: 0.75em;
    color: var(--text-secondary);
}

.antardasha-item .dasha-clipped {
    margin-left: 8px;
    font-size: 0.78em;
    color: var(--warning);
}

.mahadasha-card .dasha-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}

.mahadasha-card .dasha-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
}

/* Antardasha 子運（以 max-height 過渡做展開/收合動畫） */
.antardasha-list {
    max-height: 0;
    overflow: hidden;
    padding-left: 16px;
    border-left: 2px solid var(--border);
    margin-top: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.antardasha-list.show {
    max-height: 600px;
    opacity: 1;
    margin-top: 8px;
}

.antardasha-item {
    padding: 6px 10px;
    font-size: 0.85em;
    color: var(--text-secondary);
}

/* === Yoga 列表 === */
.yoga-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.yoga-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    border-left: 4px solid var(--benefic);
}

.yoga-card.malefic {
    border-left-color: var(--malefic);
}

.yoga-card.mixed {
    border-left-color: var(--mixed);
}

.yoga-card .yoga-name {
    font-weight: bold;
    color: var(--text-accent);
    margin-bottom: 4px;
}

.yoga-card .yoga-desc {
    font-size: 0.85em;
    color: var(--text-secondary);
}

/* === 分盤圖形化小卡 === */
.varga-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 2px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    max-width: 480px;
    margin-bottom: 16px;
}

.varga-mini-cell {
    background: var(--bg-card);
    padding: 8px 4px;
    text-align: center;
    min-height: 56px;
}

.varga-mini-cell .sign-name {
    font-size: 0.7em;
    color: var(--text-secondary);
}

.varga-mini-cell .planets {
    font-size: 0.85em;
    font-weight: bold;
    margin-top: 4px;
    line-height: 1.3;
}

/* === 分盤 === */
.varga-selector {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.varga-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8em;
}

.varga-btn.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

/* === 合盤匹配 === */
.matching-layout {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.matching-form {
    flex: 1;
    min-width: 280px;
}

.matching-form h4 {
    color: var(--text-accent);
    margin-bottom: 12px;
}

.matching-result {
    flex: 1;
    min-width: 300px;
}

.koota-table {
    width: 100%;
    border-collapse: collapse;
}

.koota-table th,
.koota-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.koota-table .koota-name {
    text-align: left;
    font-weight: bold;
}

.koota-total {
    font-size: 1.5em;
    text-align: center;
    padding: 16px;
    font-weight: bold;
}

.koota-total.excellent {
    color: var(--success);
}

.koota-total.good {
    color: var(--accent);
}

.koota-total.fair {
    color: var(--warning);
}

.koota-total.poor {
    color: var(--malefic);
}

.score-bar {
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    min-width: 80px;
}

.score-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s;
}

/* === 行運 === */
.transit-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.transit-controls input[type="date"] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px;
    border-radius: 6px;
}

.transit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.transit-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.transit-card .transit-planet {
    font-weight: bold;
    font-size: 1.1em;
}

.transit-card .transit-sign {
    color: var(--text-accent);
}

/* Jaimini 浮動代表星：靈魂代表星那一列標出來，兩套流派分歧時另給警示條 */
.jaimini-table tr.jaimini-atma {
    background: rgba(240, 192, 64, 0.12);
    font-weight: 600;
}

.jaimini-divergence {
    margin: 10px 0;
    padding: 8px 12px;
    background: var(--bg-card);
    border-left: 3px solid var(--warning);
    border-radius: 6px;
    font-size: 0.85em;
}

/* 障礙宮與障礙星（Badhaka Sthana & Badhakesh） */
.badhaka-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.badhaka-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

.badhaka-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

.badhaka-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    font-size: 0.9rem;
}

.badhaka-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .badhaka-item {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.badhaka-item .label {
    color: var(--text-secondary);
}

.badhaka-occupants-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-bottom: none;
}

/* 三盤合視：三張盤並列，窄螢幕自動堆疊 */
.sudarshana-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.sudarshana-chart h4 {
    margin: 0 0 6px;
    font-size: 0.9em;
    color: var(--text-secondary);
    text-align: center;
}

.sudarshana-summary {
    margin: 14px 0 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sudarshana-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 0.88em;
}

.sudarshana-line > span {
    color: var(--text-secondary);
}

.sudarshana-table td {
    text-align: center;
}

.sudarshana-good { color: var(--success); font-weight: 600; }
.sudarshana-bad { color: var(--danger); font-weight: 600; }
.sudarshana-mixed { color: var(--text-secondary); }

/* 八重盤行運（Kakshya）：一顆行星一張卡，段主星有給分時整張卡加吉利色調 */
.av-transit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.av-transit-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85em;
}

.av-transit-card.av-favorable {
    border-left-color: var(--success);
}

.av-transit-planet {
    font-weight: 700;
    font-size: 1.05em;
}

.av-transit-sign {
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.av-transit-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}

.av-transit-row span {
    color: var(--text-secondary);
}

.av-b-favorable { color: var(--success); }
.av-b-neutral { color: var(--text-primary); }
.av-b-weak { color: var(--warning); }

.av-kakshya-verdict {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-size: 0.92em;
    color: var(--text-secondary);
}

.sade-sati-warning {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid var(--malefic);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

/* === 合盤擴充：Dosha 例外徽章 + 雙盤行運 === */
.matching-transit-panel {
    margin-top: 16px;
}

.dosha-panel {
    margin-top: 12px;
    border-left: 3px solid var(--accent);
}

.dosha-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.dosha-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85em;
    border: 1px solid;
}

.dosha-badge.dosha-standing {
    color: var(--malefic);
    border-color: var(--malefic);
    background: rgba(244, 67, 54, 0.1);
}

.dosha-badge.dosha-cancelled {
    color: var(--success);
    border-color: var(--success);
    background: rgba(76, 175, 80, 0.1);
}

.dosha-badge.dosha-partial {
    color: #b8860b;
    border-color: #b8860b;
    background: rgba(184, 134, 11, 0.1);
}

.dosha-badge.dosha-mitigated {
    color: var(--text-accent);
    border-color: var(--text-accent);
    background: rgba(33, 150, 243, 0.1);
}

/* 雙方月亮所落的 D9（Navamsa）星座明細列 */
.dosha-navamsa {
    margin: 4px 0 6px;
    font-size: 0.85em;
    color: var(--text-secondary);
}

.dosha-badge.dosha-none {
    color: var(--text-secondary);
    border-color: var(--border);
}

.matching-shared-signal {
    padding: 8px 12px;
    margin: 6px 0;
    background: var(--bg-card);
    border-radius: 6px;
    border-left: 3px solid var(--text-accent);
}

.matching-shared-signal.level-high {
    border-left-color: var(--malefic);
    background: rgba(244, 67, 54, 0.08);
}

.matching-transit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.matching-transit-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.matching-transit-row {
    padding: 8px;
    background: var(--bg-card);
    border-radius: 6px;
}

.report-footer {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.85em;
    text-align: center;
}

/* === 載入動畫 === */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 26, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: overlayFadeIn 0.2s ease;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.loading-spinner {
    text-align: center;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-hint {
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--text-secondary);
    max-width: 280px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.loading-hint.show {
    opacity: 1;
}

/* === Toast 提示元件 === */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 260px;
    max-width: 360px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    font-size: 0.9em;
    animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
}

.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--success); }
.toast.leaving { animation: toastOut 0.25s ease forwards; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    to { opacity: 0; transform: translateX(40px); }
}

/* === 快速資訊 === */
.quick-info-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.9em;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.quick-info-item .label {
    color: var(--text-secondary);
}

.quick-info-item .value {
    color: var(--text-accent);
    font-weight: bold;
}

/* === 響應式 === */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        min-width: auto;
        max-height: none;
    }

    .chart-layout {
        flex-direction: column;
    }

    .chart-section {
        min-width: auto;
    }

    .matching-layout {
        flex-direction: column;
    }

    .yoga-list {
        grid-template-columns: 1fr;
    }
}

/* === 無資料提示 === */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

.empty-state .icon {
    font-size: 3em;
    margin-bottom: 12px;
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state p {
    margin-bottom: 16px;
}

.empty-state .btn-primary {
    width: auto;
    display: inline-block;
    padding: 10px 28px;
}

/* === 星盤互動：Tooltip === */
.chart-tooltip {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85em;
    pointer-events: none;
    z-index: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.chart-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.chart-tooltip .tt-title {
    font-weight: bold;
    color: var(--text-accent);
    margin-bottom: 4px;
}

.chart-tooltip .tt-row {
    color: var(--text-secondary);
}

.chart-planet-group {
    cursor: pointer;
}

.chart-planet-group:hover text {
    filter: brightness(1.3);
}

/* 命盤星盤容器裝飾背景 */
.chart-container {
    position: relative;
    overflow: hidden;
}

.chart-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(240, 192, 64, 0.06), transparent 65%);
    pointer-events: none;
}

.chart-container svg,
#chartSvg,
#dualChartSvgPrimary,
#secondaryChartSvg,
#varshaphalChartSvg,
#transitChartSvg,
.varga-chart svg,
.dossier-chart-container svg {
    position: relative;
    z-index: 1;
    background: #0b0b18;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] .chart-container svg,
:root[data-theme="light"] #chartSvg,
:root[data-theme="light"] #dualChartSvgPrimary,
:root[data-theme="light"] #secondaryChartSvg,
:root[data-theme="light"] #varshaphalChartSvg,
:root[data-theme="light"] #transitChartSvg,
:root[data-theme="light"] .varga-chart svg,
:root[data-theme="light"] .dossier-chart-container svg {
    background: #0b0b18;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(212, 175, 55, 0.25);
}

/* === 行星顏色 === */
.planet-Sun { color: #ffa726; }
.planet-Moon { color: #e0e0e0; }
.planet-Mars { color: #ef5350; }
.planet-Mercury { color: #66bb6a; }
.planet-Jupiter { color: #ffd54f; }
.planet-Venus { color: #f48fb1; }
.planet-Saturn { color: #90a4ae; }
.planet-Rahu { color: #9fa8da; }
.planet-Ketu { color: #ce93d8; }

/* === 頂部按鈕群 === */
.header-btns {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* === 命盤報告匯出 === */
.chart-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.chart-section-header h3 {
    margin-bottom: 0;
}

.btn-export {
    background: var(--bg-secondary);
    border: 1px solid var(--accent);
    color: var(--text-accent);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background 0.2s ease, transform 0.15s ease;
}

.btn-export:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: overlayFadeIn 0.25s ease;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    margin: 0;
}

.modal-desc {
    color: var(--text-secondary);
    font-size: 0.95em;
    line-height: 1.6;
    margin: 12px 20px 0;
}

.modal-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.report-content {
    padding: 20px;
    overflow-y: auto;
}

/* 報告內容（列印時也使用此排版） */
.report-header {
    text-align: center;
    margin-bottom: 16px;
}

.report-title {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--text-accent);
}

.report-meta {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 4px;
}

.report-chart {
    text-align: center;
    margin-bottom: 16px;
}

.report-chart svg {
    width: 420px;
    height: 420px;
    max-width: 100%;
    background: transparent;
}

/* 列印模式：只顯示報告內容 */
@media print {
    body.printing * {
        visibility: hidden;
    }
    body.printing .report-content,
    body.printing .report-content * {
        visibility: visible;
    }
    body.printing .modal-overlay {
        position: static;
        background: none;
        padding: 0;
        display: block !important;
        animation: none;
    }
    body.printing .modal {
        max-width: none;
        max-height: none;
        border: none;
        box-shadow: none;
    }
    body.printing .modal-header,
    body.printing .modal-actions {
        display: none;
    }
    body.printing .report-chart svg {
        width: 100%;
        height: auto;
    }
}

/* === 出生時間校正 === */
.rectify-event-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.rectify-event-row select {
    min-width: 220px;
}

.rectify-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rectify-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 12px 16px;
}

.rectify-time {
    font-weight: bold;
    font-size: 1.05em;
    color: var(--text-accent);
}

.rectify-score {
    font-size: 0.9em;
    margin-top: 2px;
}

.rectify-detail {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* === 觸控 / 行動裝置 === */
button, input, select {
    touch-action: manipulation;
}

@media (max-width: 900px) {
    .main-content {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
    }
    .chart-layout {
        flex-direction: column;
    }
    .chart-layout .chart-section,
    .chart-layout .info-section {
        width: 100%;
    }
    .app-header {
        flex-wrap: wrap;
    }
    .tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        order: 3;
    }
    .tab-btn {
        white-space: nowrap;
    }
    .chart-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .report-chart svg {
        width: 100%;
        height: auto;
    }

    /* --- 寬表格：改為容器內水平捲動 ---
       六力(11欄)、分盤、Vimshopaka 等表格在手機上遠寬於視窗，
       若不給捲動容器，超出的欄位會被裁掉且無法捲到（資料實際拿不到）。 */
    #shadbalaContent,
    #vimshopakaContent,
    #vargaChartContainer,
    #ashtakavargaContent,
    #avChartArea,
    #bhavaChartContent,
    .report-table,
    .matching-result {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 捲動容器內的表格保持自然寬度，不被壓縮成不可讀 */
    #shadbalaContent table,
    #vimshopakaContent table,
    #vargaChartContainer table,
    #ashtakavargaContent table,
    #bhavaChartContent table {
        min-width: max-content;
    }

    /* --- 合盤頁：改為單欄 --- */
    .matching-layout {
        flex-direction: column;
    }
    .matching-form,
    .matching-result {
        width: 100%;
        min-width: 0;
    }

    /* --- 觸控目標：至少 40px 高（行動裝置可靠點擊的下限） --- */
    .btn-sm,
    .varga-btn,
    .tab-btn,
    .transit-controls select,
    .transit-controls input,
    .form-row input,
    .form-row select,
    .rectify-event-row select,
    .rectify-event-row input {
        min-height: 40px;
    }
    .saved-chart-btns .btn-sm {
        min-height: 36px;
        flex: 1;
    }
    /* 與 .btn-sm 的 40px 觸控高度一致，操作列才不會高低不齊（加父層選擇器：一般規則寫在本段之後） */
    .saved-search-row .saved-sort,
    .saved-bulk-row .saved-bulk-select {
        min-height: 40px;
    }

    /* --- 分盤小卡在窄螢幕改 3 欄，避免字被擠壓 --- */
    .varga-mini-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .report-varga-row {
        flex-direction: column;
    }
}

/* === 命盤存檔與比較 === */
.saved-chart-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin-bottom: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.saved-chart-name {
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.saved-chart-btns {
    display: flex;
    gap: 4px;
}
.saved-chart-btns .btn-sm {
    padding: 2px 8px;
    font-size: 0.75em;
}

/* --- 分類：資料夾／標籤篩選列 --- */
.saved-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.saved-toolbar[hidden] {
    display: none;
}
.saved-search {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85em;
}
.saved-search:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 192, 64, 0.35);
    border-color: var(--accent);
}
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.chip-row[hidden],
.saved-folder-actions:empty {
    display: none;
}
.chip {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75em;
    cursor: pointer;
    white-space: nowrap;
}
.chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-primary);
}
.chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.chip-add {
    border-style: dashed;
}
.chip-tag {
    color: var(--text-accent);
}
.chip-tag[aria-pressed="true"] {
    color: var(--bg-primary);
}
.chip-mini {
    padding: 1px 7px;
    font-size: 0.7em;
}
.saved-folder-actions {
    display: flex;
    gap: 12px;
    font-size: 0.75em;
}
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}
.link-btn:hover {
    color: var(--accent);
}
.saved-empty {
    color: var(--text-secondary);
    font-size: 0.85em;
}
.saved-chart-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.75em;
    color: var(--text-secondary);
}
/* 清單在區塊內捲動：存到幾十張時，側欄不會被拉得比整頁還長 */
#savedChartsList {
    max-height: min(560px, 62vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}
/* 側欄窄時自動換行：搜尋框獨佔一行，排序與多選排到下一行 */
.saved-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: stretch;
}
.saved-search-row .saved-search {
    flex: 1 1 180px;
    min-width: 0;
}
.saved-search-row .saved-sort {
    flex: 1 1 auto;
    max-width: none;
}
.saved-sort,
.saved-bulk-select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.75em;
    padding: 4px 6px;
    max-width: 12em;
    min-height: 30px;
}
.saved-select-btn {
    white-space: nowrap;
    font-size: 0.75em;
    padding: 4px 8px;
}
.saved-bulk-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px dashed var(--accent);
    border-radius: 6px;
    background: var(--bg-card);
}
.saved-bulk-bar[hidden] {
    display: none;
}
.saved-bulk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 0.8em;
}
.saved-bulk-row .btn-sm {
    font-size: 0.95em;
    padding: 3px 10px;
}
.saved-bulk-count {
    font-weight: 600;
    color: var(--text-accent);
}
.link-btn:disabled {
    opacity: 0.4;
    cursor: default;
    text-decoration: none;
}
.saved-chart-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.saved-chart-check input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.saved-chart-check .saved-chart-name {
    flex: 1;
    min-width: 0;
}
.saved-chart-row.is-selected {
    border-color: var(--accent);
    background: var(--bg-input);
}
.saved-chart-row.is-active {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}
.saved-chart-name[role="button"] {
    cursor: pointer;
}
.saved-chart-name[role="button"]:hover {
    color: var(--accent);
}
.saved-chart-name[role="button"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.saved-chart-row.is-active .saved-chart-name {
    color: var(--text-accent);
    font-weight: 600;
}
.saved-chart-birth {
    font-size: 0.72em;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.saved-chart-note {
    flex-basis: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 編輯命盤視窗 --- */
.chart-meta-modal {
    width: min(480px, 92vw);
}
.chart-meta-form {
    padding: 16px 20px;
    overflow-y: auto;
}
.chart-meta-form textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.9em;
    width: 100%;
    resize: vertical;
    font-family: inherit;
}
.chart-meta-form textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 192, 64, 0.35);
    border-color: var(--accent);
}
.chart-meta-form #metaTagList:not(:empty) {
    margin-bottom: 6px;
}
.meta-suggest {
    margin-top: 6px;
    align-items: center;
}
.meta-suggest-label {
    font-size: 0.75em;
    color: var(--text-secondary);
}
.chart-meta-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.chart-meta-actions .btn-sm {
    white-space: nowrap;
    padding: 6px 16px;
}
.chart-meta-actions .btn-primary {
    width: auto;
    padding: 8px 28px;
}
.compare-modal {
    width: min(720px, 92vw);
}
.compare-diff {
    background: rgba(255, 170, 60, 0.15);
    font-weight: 600;
}

/* === 行運深化 === */
.transit-dasha-card {
    padding: 12px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(255, 170, 60, 0.12), rgba(255, 170, 60, 0.03));
    border: 1px solid rgba(255, 170, 60, 0.35);
    border-radius: 8px;
    font-size: 0.95em;
}
.transit-dasha-label {
    color: var(--text-secondary);
    font-size: 0.85em;
    margin-right: 6px;
}
.transit-aspect {
    margin-top: 4px;
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 170, 60, 0.15);
    color: var(--text-accent);
    display: inline-block;
}

/* === 校正結果套用按鈕 === */
.btn-apply-time {
    margin-top: 8px;
    width: 100%;
    background: rgba(255, 170, 60, 0.15);
    border-color: rgba(255, 170, 60, 0.4);
    color: var(--text-accent);
    font-weight: 600;
}
.btn-apply-time:hover {
    background: rgba(255, 170, 60, 0.28);
}

/* === 行運時間線 === */
.timeline-list {
    position: relative;
    padding-left: 24px;
}
.timeline-list::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--border) 10%, var(--border) 90%, transparent);
}
.timeline-year {
    position: relative;
    margin: 14px 0 8px -24px;
    padding-left: 24px;
    font-weight: 700;
    color: var(--text-accent);
    font-size: 0.95em;
}
.timeline-item {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 8px 0;
}
.timeline-dot {
    position: absolute;
    left: -21px;
    top: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px var(--bg-primary);
}
.timeline-body {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.timeline-date {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.timeline-retro {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 100, 100, 0.18);
    color: var(--malefic);
    font-size: 0.9em;
}
.timeline-event {
    font-size: 0.95em;
}
.timeline-house {
    margin-top: 2px;
    font-size: 0.8em;
    color: var(--text-secondary);
}

/* === 報告匯出：擴充區塊 === */
.report-section {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.report-section-title {
    font-weight: 700;
    color: var(--text-accent);
    margin-bottom: 8px;
    font-size: 1.02em;
}
.report-varga-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.report-varga-block {
    flex: 1;
    min-width: 260px;
}
.report-varga-label {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.report-varga-grid .varga-mini-cell {
    padding: 4px;
    font-size: 0.72em;
}
.report-varga-grid .sign-name {
    font-size: 0.95em;
}

@media print {
    .report-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .report-varga-row {
        display: flex;
    }
}

/* === 城市搜尋 === */
.city-search {
    position: relative;
    margin-bottom: 8px;
}
.city-search input {
    width: 100%;
}
.city-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-panel, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    margin-top: 4px;
}
.city-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.city-item:last-child {
    border-bottom: none;
}
.city-item:hover {
    background: rgba(255, 170, 60, 0.12);
}
.city-name {
    font-size: 0.92em;
}
.city-meta {
    font-size: 0.75em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.city-empty {
    padding: 10px;
    font-size: 0.85em;
    color: var(--text-secondary);
}
.city-hint {
    margin-top: 6px;
    font-size: 0.72em;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* 遠端（GeoNames）結果：中繼資料含州／國家，可能很長，允許換行而不是撐破清單 */
.city-item[data-geo] .city-meta {
    white-space: normal;
    text-align: right;
}
.city-credit,
.city-remote-note {
    padding: 6px 10px;
    font-size: 0.7em;
    color: var(--text-secondary);
}
.city-credit {
    border-top: 1px solid var(--border);
}

/* 手動輸入經緯度後的時區建議：只建議、不自動套用 */
.tz-suggest {
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 0.78em;
    line-height: 1.55;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
}
.tz-suggest-warn {
    margin-top: 4px;
    color: var(--warning);
}
.tz-suggest .btn-sm {
    margin-top: 6px;
}

@media (max-width: 900px) {
    .city-item {
        min-height: 44px;
        align-items: center;
    }
    .city-results {
        max-height: 220px;
    }
}

/* === 校正評分權重 === */
.rectify-weights {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.rectify-weights summary {
    cursor: pointer;
    color: var(--text-accent);
    font-weight: 600;
    font-size: 0.9em;
}
.rectify-weights-hint {
    margin: 8px 0;
    font-size: 0.78em;
    line-height: 1.5;
    color: var(--text-secondary);
}
.rectify-weight-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    align-items: center;
    margin-bottom: 10px;
}
.rectify-weight-grid label {
    font-size: 0.85em;
    color: var(--text-secondary);
}
.rectify-weight-grid input {
    width: 72px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 0.9em;
}
.rectify-weights-applied {
    margin-bottom: 12px;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.8em;
    color: var(--text-secondary);
}

@media (max-width: 900px) {
    .rectify-weight-grid input {
        min-height: 40px;
        width: 88px;
    }
}

/* === 總覽頁 === */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.overview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}
.overview-card-title {
    color: var(--text-accent);
    font-weight: 700;
    font-size: 0.95em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.overview-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    font-size: 0.9em;
}
.overview-row span {
    color: var(--text-secondary);
    white-space: nowrap;
}
.overview-row strong {
    text-align: right;
}
.overview-sub {
    font-size: 0.78em;
    color: var(--text-secondary);
    margin: 2px 0 6px;
}
.overview-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}
.overview-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--text-accent));
    border-radius: 3px;
    transition: width 0.6s ease;
}
.overview-footer {
    margin-top: 16px;
    font-size: 0.8em;
    color: var(--text-secondary);
}

/* === 人生走勢 K 線 === */
.life-trend-panel { margin-top: 16px; }
.life-trend-hint, .life-trend-notice, .life-trend-select-hint, .life-trend-status { color: var(--text-secondary); font-size: .88em; }
.avastha-baladi-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; min-width: 120px; }
.avastha-baladi-cell { flex: 1; background: var(--bg-input); border-right: 1px solid var(--border); }
.avastha-baladi-cell:last-child { border-right: 0; }
.avastha-baladi-cell.active { background: var(--accent); }
.avastha-jagrat { color: var(--success); font-weight: 600; }
.avastha-swapna { color: var(--text-secondary); }
.avastha-sushupti { color: var(--danger); }
.avastha-notice { margin-top: 12px; }
.states-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.states-combust { color: var(--danger); font-weight: 600; }
.states-safe { color: var(--text-secondary); }
.states-vargottama { color: var(--success); font-weight: 600; }
.states-war-differs { color: var(--accent); font-weight: 600; }
.states-empty { color: var(--text-secondary); }
.states-notice { margin-top: 12px; }
.planet-table .samvatsara-current { background: var(--bg-card); box-shadow: inset 2px 0 0 var(--accent); font-weight: 600; }
.eclipse-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; align-items: center; }
.eclipse-controls input { width: 6em; }
.eclipse-solar { color: var(--danger); font-weight: 600; }
.eclipse-lunar { color: var(--accent); font-weight: 600; }
.eclipse-empty { color: var(--text-secondary); }
.eclipse-notice { margin-top: 12px; }
.argala-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.argala-table td { vertical-align: top; }
.argala-house-start td { border-top: 1px solid var(--border); }
.argala-effective { color: var(--success); font-weight: 600; }
.argala-neutralised { color: var(--text-secondary); }
.argala-obstructed { color: var(--danger); }
.argala-absent { color: var(--text-secondary); opacity: .7; }
.argala-notice { margin-top: 12px; }
.upagraha-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.upagraha-control-group { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 8px; border-right: 1px solid var(--border); }
.upagraha-control-group:last-child { border-right: 0; }
.upagraha-note { color: var(--text-secondary); font-size: .82em; margin-left: 6px; }
.upagraha-no-lord { color: var(--text-secondary); }
.upagraha-active-part { background: var(--bg-input); }
.upagraha-mandi-row td { border-top: 1px dashed var(--border); }
.upagraha-warning { color: var(--danger); font-size: .88em; margin-top: 8px; }
.upagraha-notice { margin-top: 12px; }
.life-trend-notice { margin-top: 12px; }
.life-trend-error { color: var(--danger); }
.life-trend-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.life-trend-control-group { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 8px; border-right: 1px solid var(--border); }
.life-trend-topic-controls { width: 100%; padding-top: 8px; border-top: 1px solid var(--border); border-right: 0; }
.life-trend-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.life-trend-summary div { padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-input); color: var(--text-secondary); font-size: .84em; font-variant-numeric: tabular-nums; }
.life-trend-chart-wrap { position: relative; width: 100%; overflow-x: auto; padding: 10px 10px 8px; border-radius: 10px;
    background: var(--chart-surface); color: var(--chart-ink); font-family: var(--chart-font); border: 1px solid var(--chart-grid); }
.life-trend-chart { display: block; width: 100%; min-width: 360px; height: auto; }
.life-trend-grid { stroke: var(--chart-grid); stroke-width: 1; }
.life-trend-baseline { stroke: var(--chart-ink-2); stroke-width: 1; stroke-dasharray: 4 4; }
.life-trend-axis { fill: var(--chart-ink-2); font-size: 11px; font-family: var(--chart-font); }
.life-trend-band-label { fill: var(--chart-ink); font-size: 11px; font-weight: 600; font-family: var(--chart-font); }
.life-trend-band-a { fill: var(--chart-band-a); }
.life-trend-band-b { fill: var(--chart-band-b); }
.life-trend-sade-stripe { stroke: var(--chart-sade); stroke-width: 3; }
.life-trend-zone-hi { fill: var(--chart-zone-hi); }
.life-trend-zone-lo { fill: var(--chart-zone-lo); }
.life-trend-now { stroke: var(--chart-accent); stroke-width: 1.5; stroke-dasharray: 2 3; }
.life-trend-now-label { fill: var(--chart-accent); font-size: 11px; font-family: var(--chart-font); }
.life-trend-ma { fill: none; stroke: var(--chart-ma); stroke-width: 1.5; opacity: .55; stroke-linejoin: round; }
.life-trend-range { fill: var(--chart-ink-2); opacity: .1; }
.life-trend-ridge { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.life-trend-ridge.up { stroke: var(--chart-up); }
.life-trend-ridge.down { stroke: var(--chart-down); }
.life-trend-hatch-bg { fill: var(--chart-down); }
.life-trend-hatch-line { stroke: var(--chart-surface); stroke-width: 1.6; }
.life-candle-group { cursor: pointer; color: var(--chart-flat); outline: none; }
.life-candle-group.up { color: var(--chart-up); }
.life-candle-group.down { color: var(--chart-down); }
.life-candle-hit { fill: transparent; }
.life-candle-group.selected .life-candle-hit { fill: var(--chart-grid); opacity: .6; }
.life-candle-group:focus-visible .life-candle-hit { fill: none; stroke: var(--chart-accent); stroke-width: 2; }
.life-candle-wick { stroke: currentColor; stroke-width: 1.5; }
.life-candle { fill: currentColor; }
.life-candle.hollow { fill: var(--chart-surface); stroke: currentColor; stroke-width: 1.6; }
.life-candle.hatched { fill: url(#lifeTrendHatch); }
.life-ridge-dot { fill: var(--chart-surface); stroke-width: 2; }
.life-ridge-dot.above { stroke: var(--chart-up); }
.life-ridge-dot.below { stroke: var(--chart-down); }
.life-turning-marker { fill: var(--chart-accent); font-size: 10px; }
.life-turning-seal { fill: var(--chart-accent); }
.life-turning-seal-text { fill: var(--chart-surface); font-size: 9px; }
@media (prefers-reduced-motion: no-preference) {
    .life-candle, .life-candle-wick, .life-ridge-dot { animation: life-candle-grow .45s ease-out both; transform-box: fill-box; transform-origin: center; }
    @keyframes life-candle-grow { from { transform: scaleY(0); opacity: 0; } }
}
.life-trend-stop-up { stop-color: var(--chart-up); }
.life-trend-stop-down { stop-color: var(--chart-down); }
.life-trend-key.up { color: var(--chart-up); }
.life-trend-key.down { color: var(--chart-down); }
.chart-style-desc { margin-top: -4px; }
.life-trend-tip { position: absolute; top: 46px; pointer-events: none; background: var(--chart-surface); color: var(--chart-ink); border: 1px solid var(--chart-grid);
    border-radius: 8px; padding: 7px 10px; font-size: 12px; line-height: 1.5; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity .12s; }
.life-trend-tip.visible { opacity: 1; }
.life-trend-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 4px 0; font-size: .78em; color: var(--chart-ink-2); }
.life-trend-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.life-trend-legend svg { flex: none; }
.life-trend-breakdown { margin: 8px 0 4px; }
.life-trend-breakdown-row { display: grid; grid-template-columns: 7.5em 1fr 3.2em; align-items: center; gap: 8px; font-size: .84em; margin: 3px 0; }
.life-trend-breakdown-row.total { border-top: 1px solid var(--border); padding-top: 4px; font-weight: 700; }
.life-trend-breakdown-value { text-align: right; font-variant-numeric: tabular-nums; }
.life-trend-breakdown-track { position: relative; height: 12px; }
.life-trend-breakdown-bar { position: absolute; top: 0; height: 12px; border-radius: 3px; }
.life-trend-breakdown-bar.base { background: var(--text-secondary); opacity: .35; }
.life-trend-breakdown-bar.up { background: var(--chart-up); }
.life-trend-breakdown-bar.down { background: var(--chart-down); }
:root[data-chart-style="clear"] .life-trend-breakdown-bar.down { background: repeating-linear-gradient(45deg, var(--chart-down) 0 3px, var(--chart-surface) 3px 5px); }
.life-trend-detail { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--bg-input); border: 1px solid var(--border); }
.life-trend-detail h3 { font-size: 1em; color: var(--text-accent); }
.life-trend-detail h4 { margin-top: 10px; font-size: .92em; }
.life-trend-ohlc { font-variant-numeric: tabular-nums; margin-top: 3px; }
.life-trend-evidence { margin: 6px 0 0 20px; color: var(--text-secondary); font-size: .88em; }
.life-trend-topic-evidence { margin-top: 10px; color: var(--text-secondary); font-size: .88em; }
@media (max-width: 520px) { .life-trend-summary { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }
}

/* === 淺色主題無障礙修正 ===
   行星顏色原本只為深色底設計，在淺色主題下對比極低
   （木星僅 1.26:1、太陽 1.74:1，幾乎看不見）。
   以下深色變體皆已驗證對白卡與頁面底色均 ≥4.5:1，且色相彼此相距 ≥25° 保持辨識度。 */
:root[data-theme="light"] .planet-Sun     { color: #a35200; }
:root[data-theme="light"] .planet-Moon    { color: #4a6572; }
:root[data-theme="light"] .planet-Mars    { color: #b3261e; }
:root[data-theme="light"] .planet-Mercury { color: #1b6b2b; }
:root[data-theme="light"] .planet-Jupiter { color: #5c6300; }
:root[data-theme="light"] .planet-Venus   { color: #ad1457; }
:root[data-theme="light"] .planet-Saturn  { color: #37474f; }
:root[data-theme="light"] .planet-Rahu    { color: #3949ab; }
:root[data-theme="light"] .planet-Ketu    { color: #7b1fa2; }

/* 主要按鈕與選中狀態：金色底配淺色字僅 2.49:1，改為深色字 */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-sm.active,
:root[data-theme="light"] .varga-btn.active,
:root[data-theme="light"] .tab-btn.active {
    color: #241a00;
}

/* 次要文字與吉凶標籤在淺色底下略淺，加深至達標 */
:root[data-theme="light"] {
    --text-secondary: #55555f;
}
:root[data-theme="light"] .mixed-tag { color: #a34700; }

/* 深色主題：羅睺/計都原色在深底上僅 3.27–3.95:1，提亮至達標 */
:root:not([data-theme="light"]) .planet-Rahu { color: #9fa8da; }
:root:not([data-theme="light"]) .planet-Ketu { color: #ce93d8; }

/* 逆行標籤在淺色主題下對比不足 */
:root[data-theme="light"] .retrograde-badge {
    background: rgba(209, 57, 90, 0.14);
    color: #a3123a;
}

/* === 鍵盤可操作性 ===
   動態產生的 city-item / mahadasha-card 原為純 div+onclick，
   已補 tabindex 使其可聚焦；此處提供可見的焦點樣式。 */
.city-item:focus-visible,
.mahadasha-card:focus-visible,
[role="button"]:focus-visible,
[role="option"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 一般互動元素的統一焦點樣式（部分瀏覽器預設焦點框在深色底上不明顯） */
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* === 行星解讀頁籤 === */
.section-hint {
    color: var(--text-secondary);
    font-size: 0.85em;
    margin-bottom: 14px;
}

.interp-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.interp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 14px;
}

.interp-card .interp-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.interp-card .interp-planet {
    font-weight: bold;
    font-size: 1.05em;
}

.interp-card .interp-pos {
    font-size: 0.8em;
    color: var(--text-secondary);
}

.interp-card .interp-row {
    font-size: 0.85em;
    line-height: 1.6;
    margin-top: 6px;
}

.interp-card .interp-row-label {
    display: inline-block;
    min-width: 4.5em;
    color: var(--text-accent);
    font-size: 0.9em;
}

/* 現行大運敘事（大運頁籤頂部），沿用行運大運卡的暖色調 */
.dasha-current-card {
    padding: 14px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(255, 170, 60, 0.12), rgba(255, 170, 60, 0.03));
    border: 1px solid rgba(255, 170, 60, 0.35);
    border-radius: 8px;
}

.dasha-current-card .dasha-current-title {
    color: var(--text-accent);
    font-weight: bold;
    margin-bottom: 6px;
}

.dasha-current-card .dasha-narrative {
    margin-top: 8px;
    font-size: 0.85em;
    line-height: 1.6;
    color: var(--text-secondary);
}

.dasha-rel-tag {
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 170, 60, 0.15);
    color: var(--text-accent);
    margin-left: 6px;
}

/* === Panchang 月曆 === */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 12px;
}
.calendar-weekday {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 0;
}
.calendar-cell {
    min-height: 84px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.calendar-blank {
    border: none;
    background: transparent;
}
.calendar-cell.has-mark {
    border-color: var(--accent);
}
.calendar-cell.natal-mark {
    box-shadow: inset 0 0 0 1px var(--accent);
}
.calendar-day-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.calendar-day-num {
    font-weight: 700;
    font-size: 0.95rem;
}
.calendar-day-icons {
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.calendar-tithi {
    font-size: 0.72rem;
    color: var(--text-primary);
    line-height: 1.25;
}
.calendar-nakshatra,
.calendar-sunrise {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.2;
}
.calendar-sunrise {
    margin-top: auto;
}
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

@media (max-width: 900px) {
    /* 行動裝置：月曆整體可橫向捲動，避免 7 欄擠壓到讀不到內容 */
    #calendarContent .panel {
        overflow-x: auto;
    }
    .calendar-grid {
        min-width: 560px;
    }
    .calendar-cell {
        min-height: 72px;
    }
}

/* === 未來事件時間軸 === */
.event-timeline {
    margin-top: 12px;
}
.event-year {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.event-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border-left: 3px solid var(--border);
    border-radius: 0 8px 8px 0;
    margin-bottom: 6px;
    background: var(--bg-card);
}
.event-row.event-dasha { border-left-color: var(--accent); }
.event-row.event-ingress { border-left-color: #4a9eff; }
.event-row.event-retro { border-left-color: #e0913a; }
.event-row.event-sade { border-left-color: #b45cd6; }
.event-icon {
    font-size: 1rem;
    line-height: 1.4;
    flex-shrink: 0;
}
.event-body {
    flex: 1;
    min-width: 0;
}
.event-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.event-desc {
    font-size: 0.9rem;
    line-height: 1.4;
}
.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.event-tag {
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

/* === 本地提醒面板 === */
.reminder-panel {
    margin-bottom: 16px;
}
.reminder-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.reminder-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}
.reminder-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.reminder-field select {
    width: auto;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.9em;
}
.reminder-field select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 192, 64, 0.35);
    border-color: var(--accent);
}
.reminder-sublabel {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.reminder-perm {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.reminder-perm[data-perm="granted"] { color: var(--success); border-color: var(--success); }
.reminder-perm[data-perm="denied"] { color: var(--danger); border-color: var(--danger); }
.reminder-list {
    margin: 6px 0 0 18px;
    font-size: 0.85rem;
    line-height: 1.6;
}
.reminder-due-list {
    color: var(--text-accent);
}

/* === Muhurta === */
.muhurta-controls label { display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary); font-size:.9rem; }
.muhurta-list { display:grid; gap:9px; margin-top:12px; }
.muhurta-row { display:grid; grid-template-columns:1fr auto; gap:5px 14px; align-items:center; padding:11px 12px; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; background:var(--bg-input); }
.muhurta-row strong { color:var(--text-primary); }
.muhurta-detail { color:var(--text-secondary); font-size:.82rem; }
.muhurta-reasons { color:var(--text-secondary); font-size:.78rem; }
.muhurta-row .btn-sm { grid-row:span 3; }
@media (max-width:600px) { .muhurta-row { grid-template-columns:1fr; } .muhurta-row .btn-sm { grid-row:auto; justify-self:start; } }

/* === 分盤尊位 === */
.varga-dignity { white-space:nowrap; }
.varga-dignity-lord { color:var(--text-secondary); font-size:.82em; margin-left:4px; }
.varga-dignity-exalted, .varga-dignity-own, .varga-dignity-same_natal { color:var(--success); }
.varga-dignity-debilitated, .varga-dignity-enemy { color:var(--danger); }
.varga-dignity-not_applicable { color:var(--text-secondary); }

/* === 雲端同步與推播狀態 === */
.vault-status { color:var(--text-secondary); font-size:.85rem; margin-bottom:8px; word-break:break-all; }
#vaultPanel .form-row { margin-bottom:8px; }
#vaultPanel input { width:100%; }
.vault-delete { margin-top:12px; color:var(--danger); border-color:var(--danger); }
.ai-reading-panel { margin-top:18px; }
.ai-reading-panel .form-row { margin:10px 0; }
.ai-reading-panel input { width:100%; }
.ai-reading-warning { color:var(--warning); font-size:.85rem; margin:10px 0; }
.ai-reading-content { white-space:pre-wrap; line-height:1.7; margin-top:14px; }
.ai-thread { margin-top:8px; }
.ai-thread-item { margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); }
.ai-thread-q { color:var(--accent); font-size:.9rem; line-height:1.6; }
.ai-thread-a { white-space:pre-wrap; line-height:1.7; margin-top:6px; }
.ai-followup { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.ai-followup h4 { margin:0 0 6px; font-size:.95rem; color:var(--text-accent); }
.reminder-push-status { margin-top:-4px; }

/* === Prashna / Vedic horary === */
.prashna-intro { margin-bottom:16px; }.prashna-intro h3 { color:var(--text-accent); margin-bottom:6px; }.prashna-intro p { color:var(--text-secondary); }.prashna-layout { display:grid; grid-template-columns:minmax(280px, .85fr) minmax(360px, 1.15fr); gap:16px; align-items:start; }.prashna-form textarea { width:100%; min-height:88px; resize:vertical; background:var(--bg-input); color:var(--text-primary); border:1px solid var(--border); border-radius:6px; padding:9px; font:inherit; }.prashna-reading { border-left:4px solid var(--border); }.prashna-reading.prashna-supportive { border-left-color:var(--success); }.prashna-reading.prashna-challenging { border-left-color:var(--danger); }.prashna-reading.prashna-mixed { border-left-color:var(--warning); }.prashna-verdict { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }.prashna-verdict h3 { color:var(--text-accent); }.section-label { display:block; font-size:.72em; color:var(--text-secondary); }.prashna-score { font-size:1.35em; font-weight:700; color:var(--text-accent); font-variant-numeric:tabular-nums; }.prashna-question-display { color:var(--text-secondary); font-style:italic; margin-bottom:10px; }.prashna-triad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }.prashna-triad div { border:1px solid var(--border); background:var(--bg-input); padding:9px; border-radius:7px; }.prashna-triad b,.prashna-triad span { display:block; }.prashna-triad b { color:var(--text-accent); font-size:.82em; }.prashna-triad span { color:var(--text-secondary); font-size:.85em; margin-top:3px; }.prashna-factors { list-style:none; margin:8px 0 14px; }.prashna-factors li { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:.9em; }.prashna-factors .support span { color:var(--success); }.prashna-factors .challenge span { color:var(--danger); }.prashna-limit { font-size:.8em; color:var(--text-secondary); border-top:1px solid var(--border); padding-top:10px; }.prashna-chart-panel { margin-top:16px; }.prashna-chart-panel h3 { color:var(--text-accent); margin-bottom:8px; }
@media (max-width:900px) { .prashna-layout { grid-template-columns:1fr; }.prashna-triad { grid-template-columns:1fr; } }
@media (max-width: 900px) {
    /* 觸控目標下限：與既有稽核標準一致（40px） */
    .reminder-toggle,
    .reminder-field,
    .reminder-field select {
        min-height: 40px;
    }
}

/* === 年運盤（Tajika Varshaphal）=== */
.varshaphal-kv-list { display:grid; gap:6px; }
.varshaphal-kv { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:7px 0; border-bottom:1px dashed var(--border); }
.varshaphal-kv:last-child { border-bottom:none; }
.varshaphal-kv-label { color:var(--text-secondary); }
.varshaphal-kv-value { font-weight:600; color:var(--text-primary); }
.varshaphal-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; margin-top:16px; }
.varshaphal-cards .panel { margin:0; }
.varshaphal-muntha-pos { font-size:1.1em; color:var(--text-accent); }
.varshaphal-winner { font-size:1em; color:var(--text-primary); }
.varshaphal-reason { color:var(--text-secondary); font-size:.9em; }
.varshaphal-meta { color:var(--text-secondary); font-size:.85em; margin-top:8px; }
.varshaphal-quality { display:inline-block; padding:3px 10px; border-radius:12px; font-size:.85em; font-weight:600; }
.varshaphal-quality-very_good { background:rgba(46,204,113,.15); color:var(--success); }
.varshaphal-quality-good { background:rgba(240,192,64,.15); color:var(--warning); }
.varshaphal-quality-bad { background:rgba(231,76,60,.15); color:var(--danger); }
.varshaphal-bala-table { font-size:.85em; }
.varshaphal-bala-table td { text-align:center; }
.varshaphal-bala-table td:first-child { text-align:left; }
.varshaphal-bala-table .varshaphal-winner { background:var(--bg-card); box-shadow:inset 2px 0 0 var(--accent); }
.varshaphal-bala-table .varshaphal-excluded { opacity:.6; }
.varshaphal-moon-note { color:var(--text-secondary); font-size:.85em; margin-top:6px; }
.varshaphal-roles { color:var(--text-secondary); }
.mudda-summary { display:flex; gap:18px; flex-wrap:wrap; margin:10px 0; }
.mudda-list { display:grid; gap:8px; }
.mudda-period { border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--bg-input); }
.mudda-period.mudda-active { border-color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); }
.mudda-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.mudda-days { color:var(--text-secondary); font-size:.85em; }
.mudda-dates { color:var(--text-secondary); font-size:.78em; margin-left:auto; font-variant-numeric:tabular-nums; }
.mudda-progress { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:8px; }
.mudda-progress-bar { height:100%; background:linear-gradient(90deg,var(--accent),var(--text-accent)); border-radius:3px; }
.mudda-now { font-size:.85em; color:var(--text-accent); margin-top:6px; }
.mudda-antars { margin-top:8px; font-size:.85em; }
.mudda-antars summary { cursor:pointer; color:var(--text-secondary); }
.mudda-antar-list { margin-top:6px; }
.mudda-antar { display:flex; gap:8px; padding:4px 0; border-top:1px dashed var(--border); flex-wrap:wrap; }
.mudda-antar .mudda-dates { margin-left:auto; }

/* === Chara Dasha（Jaimini 星座大運）=== */
.chara-basis { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
.chara-basis-item { display:flex; flex-direction:column; gap:3px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); }
.chara-basis-label { color:var(--text-secondary); font-size:.82em; }
.chara-basis-value { font-weight:600; color:var(--text-primary); }
.chara-direction-direct { color:var(--success); }
.chara-direction-reverse { color:var(--warning); }
.chara-current-panel { box-shadow:inset 2px 0 0 var(--accent); }
.chara-current-sign { font-size:1.05em; color:var(--text-accent); }
.chara-current-dates { color:var(--text-secondary); font-size:.85em; font-variant-numeric:tabular-nums; }
.chara-current-antar { color:var(--text-secondary); font-size:.9em; }
.chara-table-scroll { overflow-x:auto; }
.chara-table { font-size:.85em; }
.chara-table td { text-align:center; }
.chara-table td:first-child { text-align:left; }
.chara-table .chara-row-current { background:var(--bg-card); box-shadow:inset 2px 0 0 var(--accent); }
.chara-rule { color:var(--text-secondary); }
.chara-adjust { font-weight:700; }
.chara-adjust-up { color:var(--success); }
.chara-adjust-down { color:var(--danger); }
.chara-scheme-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.chara-scheme-label { color:var(--text-secondary); font-size:.85em; }
.chara-list { display:grid; gap:8px; }
.chara-period { border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--bg-input); }
.chara-period.chara-active { border-color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); }
.chara-period.chara-empty { opacity:.6; border-style:dashed; }
.chara-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.chara-sign { font-weight:700; color:var(--text-primary); }
.chara-cycle { color:var(--text-secondary); font-size:.8em; }
.chara-years { color:var(--text-accent); font-size:.9em; }
.chara-empty-note { color:var(--text-secondary); font-size:.82em; }
.chara-dates { color:var(--text-secondary); font-size:.78em; margin-left:auto; font-variant-numeric:tabular-nums; }
.chara-now { font-size:.85em; color:var(--text-accent); margin-top:6px; }
.chara-antars { margin-top:8px; font-size:.85em; }
.chara-antars summary { cursor:pointer; color:var(--text-secondary); }
.chara-antar-list { margin-top:6px; }
.chara-antar { display:flex; gap:8px; padding:4px 0; border-top:1px dashed var(--border); flex-wrap:wrap; }
.chara-antar-active { color:var(--text-accent); font-weight:600; }
.chara-antar .chara-dates { margin-left:auto; }
.chara-not-implemented { margin-top:10px; }

/* === Bhava Chalit（宮中點制宮位盤）=== */
.chalit-summary { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.chalit-moved-count { font-weight:600; color:var(--text-accent); }
.chalit-scheme-controls { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.chalit-table-scroll { overflow-x:auto; }
.chalit-table { font-size:.85em; }
.chalit-table td { text-align:center; }
.chalit-table td:first-child { text-align:left; }
.chalit-table .chalit-row-moved { background:var(--bg-card); box-shadow:inset 2px 0 0 var(--accent); }
.chalit-cell-moved { color:var(--text-accent); font-weight:700; }
.chalit-moved-mark { margin-left:3px; opacity:.7; }
.chalit-houses { margin-top:12px; font-size:.9em; }
.chalit-houses summary { cursor:pointer; color:var(--text-secondary); }

/* === Gochara 古典判法（Vedha／Tara Bala／Chandra Bala）=== */
.gochara-panel { margin-top:16px; }
.gochara-meta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:10px 0; font-size:.9em; }
.gochara-badge { padding:3px 10px; border-radius:12px; background:var(--bg-card); font-size:.9em; }
.gochara-good { color:var(--success); }
.gochara-bad { color:var(--danger); }
.gochara-summary { font-size:.9em; color:var(--text-secondary); margin-bottom:6px; }
/* 被 Vedha 改了結論的那幾顆才是這張表的重點，故單獨強調 */
.gochara-changed { font-weight:600; color:var(--text-accent); margin-bottom:10px; }
.gochara-table-scroll { overflow-x:auto; }
.gochara-table { font-size:.85em; min-width:max-content; }
.gochara-table td { text-align:center; }
.gochara-table td:first-child { text-align:left; }
.gochara-table .gochara-row-changed { background:var(--bg-card); box-shadow:inset 2px 0 0 var(--accent); }
.gochara-blocker { color:var(--text-secondary); }
.gochara-verdict-favourable { color:var(--success); font-weight:600; }
.gochara-verdict-unfavourable { color:var(--danger); }
.gochara-verdict-blocked { color:var(--warning); font-weight:700; }
.gochara-verdict-relieved { color:var(--success); font-weight:700; }
.gochara-bphs { margin-top:8px; }
/* 擇日候選日上的個人化細節（Tara／Chandra Bala 的實際值） */
.muhurta-personal { font-size:.85em; color:var(--text-secondary); }

/* === Yogini Dasha（36 年制大運）=== */
.yogini-basis { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin-top:10px; }
.yogini-basis-item { display:flex; flex-direction:column; gap:3px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); }
.yogini-basis-label { color:var(--text-secondary); font-size:.82em; }
.yogini-basis-value { font-weight:600; color:var(--text-primary); }
.yogini-current { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:12px 0; padding:10px 12px; border:1px solid var(--accent); border-radius:8px; background:var(--bg-card); }
.yogini-current-label { color:var(--text-secondary); font-size:.85em; }
.yogini-current-sep { color:var(--text-secondary); }
.yogini-cycle-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.yogini-cycle-label { color:var(--text-secondary); font-size:.85em; }
.yogini-list { display:grid; gap:8px; }
.yogini-period { border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--bg-input); }
.yogini-period.yogini-active { border-color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); }
.yogini-head { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.yogini-name { font-weight:700; color:var(--text-primary); }
.yogini-lord { margin-left:5px; font-size:.85em; }
.yogini-years { color:var(--text-accent); font-size:.9em; }
.yogini-partial { color:var(--text-secondary); font-size:.8em; }
.yogini-variant { margin-top:6px; font-size:.82em; color:var(--text-secondary); }
.yogini-dates { color:var(--text-secondary); font-size:.78em; margin-left:auto; font-variant-numeric:tabular-nums; }
.yogini-antars { margin-top:8px; font-size:.85em; }
.yogini-antars summary { cursor:pointer; color:var(--text-secondary); }
.yogini-antar-list { margin-top:6px; }
.yogini-antar { display:flex; gap:8px; align-items:baseline; padding:4px 0; border-top:1px dashed var(--border); flex-wrap:wrap; }
.yogini-antar-active { color:var(--text-accent); font-weight:600; }
.yogini-clipped { color:var(--warning); font-size:.78em; }

/* Ashtakavarga Shodhana：摘要先給七顆 Pinda，完整三階段表放在可展開區，避免預設淹沒頁面。 */
.av-shodhana-summary { margin-top:12px; }
.av-shodhana-summary td, .av-shodhana-table td { text-align:center; }
.av-shodhana-details { margin-top:16px; }
.av-shodhana-details summary { cursor:pointer; color:var(--text-accent); font-weight:600; }
.av-shodhana-details h4 { margin:18px 0 8px; }
.av-shodhana-table { font-size:.85em; }

/* Prastarashtakavarga (PAV) 微觀 8x12 網格 */
.av-pav-wrapper { overflow-x: auto; margin-top: 14px; }
.av-pav-table { width: 100%; border-collapse: collapse; font-size: 0.88em; text-align: center; }
.av-pav-table th, .av-pav-table td { padding: 8px 6px; border: 1px solid var(--border); }
.av-pav-table th { background: var(--bg-input); color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.av-pav-table .pav-lord-col { text-align: left; font-weight: 600; white-space: nowrap; padding-left: 10px; min-width: 90px; }
.av-pav-table .pav-total-col { font-weight: bold; background: var(--bg-input); }
.av-pav-table tfoot td { font-weight: bold; background: var(--bg-input); }
.pav-cell { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; font-weight: 600; }
.pav-cell.pav-one { background: var(--bg-input); color: var(--text-accent); font-weight: bold; }
.pav-cell.pav-zero { color: var(--text-secondary); opacity: 0.35; font-weight: normal; }
.pav-selector { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }

/* Kota Chakra 城堡神輪視覺化 */
.kota-container { margin-top: 12px; }
.kota-verdict-banner { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 600; font-size: 0.95em; display: flex; align-items: center; gap: 10px; }
.kota-verdict-banner.secure { background: rgba(76, 175, 80, 0.15); border: 1px solid var(--success); color: var(--success); }
.kota-verdict-banner.siege { background: rgba(239, 83, 80, 0.15); border: 1px solid var(--danger); color: var(--danger); }
.kota-verdict-banner.vulnerable { background: rgba(255, 152, 0, 0.15); border: 1px solid var(--warning); color: var(--warning); }
.kota-verdict-banner.recovering { background: rgba(33, 150, 243, 0.15); border: 1px solid var(--accent); color: var(--text-accent); }

.kota-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kota-overview-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.kota-overview-card .card-title { font-size: 0.82em; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.kota-overview-card .card-val { font-size: 1.05em; font-weight: 700; color: var(--text-primary); }

.kota-svg-wrapper { width: 100%; max-width: 600px; margin: 16px auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.kota-svg-wrapper svg { width: 100%; height: auto; display: block; }

.badge-pravesha { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.78em; background: rgba(76, 175, 80, 0.2); color: var(--success); font-weight: 600; margin-left: 4px; }
.badge-nirgama { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.78em; background: rgba(255, 152, 0, 0.2); color: var(--warning); font-weight: 600; margin-left: 4px; }

.kota-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.88em; }
.kota-table th, .kota-table td { padding: 9px 10px; border: 1px solid var(--border); text-align: left; }
.kota-table th { background: var(--bg-input); font-weight: 600; color: var(--text-primary); }

/* Choghadiya／Hora 時段表：吉凶只以左緣色條表示，不整列上色（整列上色會壓過主星顏色） */
.chogh-sun, .chogh-moon { color: var(--text-secondary); font-size: 0.9em; }
.chogh-moon { margin-top: -6px; }
.chogh-approx { color: var(--warning); font-size: 0.9em; }
.chogh-table { margin-bottom: 14px; }
.chogh-table td { text-align: center; }
.chogh-table td small { color: var(--text-secondary); }
.chogh-table tr.chogh-auspicious td:first-child { border-left: 3px solid var(--success); }
.chogh-table tr.chogh-neutral td:first-child { border-left: 3px solid var(--text-secondary); }
.chogh-table tr.chogh-inauspicious td:first-child { border-left: 3px solid var(--danger); }
.chogh-table tr.chogh-active { background: var(--bg-input); font-weight: 600; }
.chogh-now { margin-left: 6px; font-size: 0.78em; color: var(--text-accent); }

/* === Sarvatobhadra Chakra：9x9 的 81 格盤 ===
   譯本的方位是「上東、右南、下西、左北」，與現代習慣相反，故四邊都標出方位；
   .sbc-frame 留出邊距讓 .sbc-compass 貼在盤外，盤本身仍是一張純表格。 */
.sbc-frame { position: relative; padding: 18px 26px; margin: 12px 0; overflow-x: auto; }
.sbc-compass { position: absolute; color: var(--text-accent); font-size: 0.82em; letter-spacing: 0.1em; }
.sbc-compass-top { top: 0; left: 50%; transform: translateX(-50%); }
.sbc-compass-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.sbc-compass-left { left: 0; top: 50%; transform: translateY(-50%); }
.sbc-compass-right { right: 0; top: 50%; transform: translateY(-50%); }

.sbc-grid { border-collapse: collapse; margin: 0 auto; table-layout: fixed; }
.sbc-cell {
    width: 62px; height: 62px; padding: 2px; vertical-align: top;
    border: 1px solid var(--border); font-size: 0.68em; line-height: 1.2;
    background: var(--bg-card); position: relative;
}
.sbc-cell-no { display: block; color: var(--text-secondary); font-size: 0.85em; }
.sbc-cell-label { display: block; word-break: break-word; }

/* 五類格子各給一點底色差異，好一眼看出盤的層次（外圈宿、內圈星座、正中 Tithi） */
.sbc-kind-nakshatra { background: var(--bg-input); }
.sbc-kind-rasi .sbc-cell-label { color: var(--text-accent); }
.sbc-kind-tithi .sbc-cell-label { font-weight: 600; }
.sbc-kind-swara .sbc-cell-label,
.sbc-kind-namanakshatra .sbc-cell-label { font-size: 1.35em; }

/* 受刺狀態：凶星蓋過吉星（模組說明的判法），個人參照格另加外框 */
.sbc-cell.sbc-krura { box-shadow: inset 0 0 0 2px var(--danger); }
.sbc-cell.sbc-saumya { box-shadow: inset 0 0 0 2px var(--success); }
.sbc-cell.sbc-personal { outline: 2px dashed var(--accent); outline-offset: -4px; }

.sbc-planet { display: inline-block; margin: 1px 1px 0 0; padding: 0 2px; border-radius: 3px; font-weight: 700; font-size: 0.95em; }
.sbc-planet.sbc-malefic { background: color-mix(in srgb, var(--danger) 26%, transparent); }
.sbc-planet.sbc-benefic { background: color-mix(in srgb, var(--success) 26%, transparent); }

.sbc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 10px; font-size: 0.85em; }
.sbc-legend-item { padding: 1px 8px; border-radius: 4px; }
.sbc-legend-item.sbc-krura { box-shadow: inset 0 0 0 2px var(--danger); }
.sbc-legend-item.sbc-saumya { box-shadow: inset 0 0 0 2px var(--success); }
.sbc-legend-item.sbc-personal { outline: 2px dashed var(--accent); outline-offset: -2px; }

.sbc-panchaka { list-style: none; padding: 0; margin: 8px 0; }
.sbc-panchaka li { padding: 3px 0 3px 10px; border-left: 3px solid var(--border); }
.sbc-panchaka li.sbc-krura { border-left-color: var(--danger); }
.sbc-panchaka li.sbc-saumya { border-left-color: var(--success); }
.sbc-severity { font-weight: 600; }

/* 窄螢幕：格子縮小但仍維持方形，整張盤在 .sbc-frame 內橫向捲動 */
@media (max-width: 700px) {
    .sbc-cell { width: 44px; height: 44px; font-size: 0.6em; }
}

/* === 卡片輕量 3D 傾斜效果（總覽／Yoga／校正候選）===
 * 基礎層純 CSS：hover 就會抬升＋加深陰影，觸控裝置與桌面都適用。
 * 進階層由 app-tilt.js 疊加跟隨游標的小角度立體傾斜，只在精準指標
 * （滑鼠）且未要求減少動態效果時啟用，故 transition 要夠短（跟手）
 * 也要夠長（滑開時平滑歸位），兩者用同一個值。
 * 只挑這三種「格狀小卡」套用，大面積表格面板與已有 hover 位移的
 * mahadasha-card（手風琴）刻意不動，避免互相干擾或讓密集資料頭暈。
 */
.overview-card, .yoga-card, .rectify-card {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    will-change: transform;
}
.overview-card:hover, .yoga-card:hover, .rectify-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
    .overview-card, .yoga-card, .rectify-card { transition: none; }
}

/* === 功能搜尋（Ctrl+K）=== */
.finder-overlay {
    align-items: flex-start;
    padding-top: 12vh;
}
.finder-box {
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.finder-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1em;
    color: var(--text-primary, inherit);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    outline: none;
}
.finder-input:focus-visible {
    box-shadow: inset 0 -2px 0 var(--accent);
}
.finder-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
}
.finder-group {
    padding: 8px 16px 4px;
    font-size: 0.72em;
    letter-spacing: 0.04em;
    color: var(--accent);
}
.finder-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 10px;
    padding: 8px 16px;
    cursor: pointer;
}
.finder-item.active,
.finder-item:hover {
    background: rgba(255, 170, 60, 0.14);
}
.finder-title {
    font-size: 0.92em;
}
.finder-tab {
    font-size: 0.72em;
    color: var(--text-secondary);
}
.finder-desc {
    flex-basis: 100%;
    font-size: 0.75em;
    line-height: 1.45;
    color: var(--text-secondary);
}
.finder-empty {
    padding: 20px 16px;
    font-size: 0.85em;
    color: var(--text-secondary);
}
.finder-footer {
    padding: 8px 16px;
    font-size: 0.7em;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
}
/* 選取結果後短暫標示目標面板；捲動時留一點上緣空間 */
.finder-flash {
    animation: finderFlash 1.8s ease-out;
    scroll-margin-top: 16px;
}
@keyframes finderFlash {
    0%, 35% { box-shadow: 0 0 0 3px var(--accent); }
    100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .finder-flash { animation: none; outline: 2px solid var(--accent); }
}
@media (max-width: 900px) {
    .finder-overlay { padding: 12px; padding-top: 8vh; }
    .finder-item { min-height: 44px; align-items: center; }
}

/* === 命名首音節（Namakshar） === */
.namakshar-panel { margin-bottom: 16px; }
.namakshar-main { font-size: 1.6rem; color: var(--text-accent); margin: 4px 0 8px; }
.namakshar-disputed { color: var(--warning); font-size: .88rem; line-height: 1.6; }
.namakshar-row { font-size: .85em; color: var(--text-secondary); margin-top: 4px; }
.namakshar-hit { color: var(--accent); font-weight: 600; }

/* === 家人／多人總覽 === */
.table-scroll { overflow-x: auto; }
.people-overview-table td { vertical-align: top; line-height: 1.5; }
.people-overview-table td:first-child { font-weight: 600; max-width: 14em; overflow-wrap: anywhere; }
.people-overview-table tr.overview-ss-active td:last-child { color: var(--warning); }

/* === PWA：新版提示橫幅、推播設定狀態 === */
.update-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2000; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--accent); box-shadow: 0 6px 24px rgba(0,0,0,.35); color: var(--text-primary); }
.push-setup { margin: -4px 0 10px; }
.push-setup[data-state="blocked"] p, .push-setup[data-state="needs_install"] p { color: var(--warning); }

/* === 傳統生日（Janma Tithi／Pirannal） === */
.jt-facts { font-weight: 600; }
.jt-warning { color: var(--warning); font-size: .9em; }
.jt-table td { vertical-align: top; line-height: 1.5; }
.jt-date { white-space: nowrap; }
.jt-note { display: block; color: var(--text-secondary); font-size: .8em; }
.jt-failed { color: var(--text-secondary); }
.jt-table tr.jt-diverge td:nth-child(2), .jt-table tr.jt-diverge td:nth-child(3) { color: var(--warning); }

/* === 五鳥時辰法 (Pancha Pakshi) === */
.pp-avastha-ruling { background: rgba(76, 175, 80, 0.2); color: var(--success); border: 1px solid var(--success); }
.pp-avastha-eating { background: rgba(33, 150, 243, 0.2); color: #2196f3; border: 1px solid #2196f3; }
.pp-avastha-walking { background: rgba(240, 192, 64, 0.2); color: var(--accent); border: 1px solid var(--accent); }
.pp-avastha-sleeping { background: rgba(255, 152, 0, 0.2); color: var(--warning); border: 1px solid var(--warning); }
.pp-avastha-dying { background: rgba(239, 83, 80, 0.2); color: var(--danger); border: 1px solid var(--danger); }


/* === 三大神輪視覺升級 (Chakra Visual Suite) === */
.sbc-ray-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9em;
}

.sbc-ray-toolbar-title {
    color: var(--text-accent);
    margin-right: 4px;
}

.sbc-ray-filter-btn {
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82em;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.sbc-ray-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.sbc-ray-filter-btn.active {
    background: var(--accent);
    color: #1a1a2e;
    border-color: var(--accent);
    font-weight: 700;
}

.sbc-ray-active-info {
    font-size: 0.85em;
    color: var(--text-accent);
    margin-left: auto;
    font-weight: 600;
}

.sbc-stage-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.sbc-ray-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.sbc-ray-line {
    animation: sbcRayDash 2.5s linear infinite;
}

@keyframes sbcRayDash {
    to { stroke-dashoffset: -26; }
}

.sbc-cell-hit-pulse {
    animation: sbcHitPulse 1.8s infinite;
}

@keyframes sbcHitPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.sbc-cell-hit-malefic {
    box-shadow: inset 0 0 0 2px var(--danger) !important;
    background: rgba(239, 68, 68, 0.16) !important;
}

.sbc-cell-hit-benefic {
    box-shadow: inset 0 0 0 2px var(--success) !important;
    background: rgba(16, 185, 129, 0.16) !important;
}

/* Sudarshana Concentric Wheel */
.sudarshana-view-controls {
    display: flex;
    justify-content: center;
    margin: 10px 0 16px;
}

.sudarshana-wheel-wrapper {
    margin-bottom: 20px;
}

.sudarshana-interactive-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sudarshana-slider-bar {
    width: 100%;
    max-width: 600px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sudarshana-svg-stage {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
}

.sudarshana-concentric-svg {
    width: 100%;
    height: auto;
    display: block;
}

.sudarshana-sector:hover path {
    filter: brightness(1.2);
}

.sudarshana-dasha-card {
    width: 100%;
    max-width: 650px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.dasha-card-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-accent);
    margin-bottom: 12px;
}

.dasha-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.dasha-dimension-col {
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.col-tag {
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 6px;
}

.tag-lagna { color: var(--accent); }
.tag-chandra { color: #3b82f6; }
.tag-surya { color: #f59e0b; }

.dasha-card-verdict {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.5;
}

.dasha-card-verdict.good {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
    border: 1px solid var(--success);
}

.dasha-card-verdict.bad {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.dasha-card-verdict.mixed {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
    border: 1px solid var(--warning);
}

/* Kota Fortress Siege Waves */
@keyframes kotaSiegePulse {
    0% { r: 30; opacity: 0.9; }
    100% { r: 90; opacity: 0; }
}

.kota-siege-pulse {
    animation: kotaSiegePulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes kotaShieldPulse {
    0% { r: 40; opacity: 0.7; }
    100% { r: 75; opacity: 0; }
}

.kota-shield-pulse {
    animation: kotaShieldPulse 2.5s ease-out infinite;
}

.kota-arrow-danger {
    animation: sbcRayDash 1.2s linear infinite;
}

.kota-arrow-safe {
    animation: sbcRayDash 1.8s linear infinite;
}

.kota-bastion-node:hover circle {
    stroke-width: 4;
    filter: drop-shadow(0 0 6px var(--accent));
}

/* ============================================================
   UX 調整（2026-11-02）
   放在檔案最後：手機 media query 與一般規則同權重時，後寫的才會生效。
   ============================================================ */

/* 次要按鈕：原本有 27 處使用 .btn-secondary 卻從未定義，顯示成瀏覽器預設白底按鈕 */
.btn-secondary {
    background: var(--bg-input);
    border: 1px solid var(--accent);
    color: var(--text-accent);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover:not(:disabled) {
    background: var(--accent);
    color: var(--bg-primary);
}
.btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; }

/* 頁籤裡零散的輸入框（年運年份、月曆月份、各種日期）原本沒有樣式，深色主題下是白底。
   用 :where() 讓權重為 0，既有的專屬樣式一律優先，只補沒人管的那些。 */
:where(.tab-content, .modal) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 6px;
    font: inherit;
    font-size: 0.9em;
    color-scheme: dark;
}
:root[data-theme="light"] :where(.tab-content, .modal) :where(input, select, textarea) { color-scheme: light; }
:where(.tab-content, .modal) :where(input, select, textarea):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(240, 192, 64, 0.35);
}

/* 沒有內容的面板不要畫出空框（人生走勢載入前、南印度十要素尚未計算） */
.panel:empty { display: none; }

/* 算完命盤後短暫標示結果區（手機上會先捲過去） */
@keyframes resultsFlash {
    0% { box-shadow: inset 0 0 0 2px var(--accent); }
    100% { box-shadow: inset 0 0 0 2px transparent; }
}
.results-flash { animation: resultsFlash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .results-flash { animation: none; } }

/* 頂部列：標題與功能鈕同一行、頁籤在下一行（原本功能鈕被擠到第三行，白佔一列高度） */
.app-header h1 { order: 1; }
.app-header .header-btns { order: 2; margin-left: auto; }
.app-header .tab-nav { order: 3; flex-basis: 100%; }
.header-btns .theme-toggle-btn { margin-left: 0; }

@media (max-width: 900px) {
    /* 頂部列固定在上方：捲到哪裡都能切頁籤 */
    .app-header {
        position: sticky;
        top: 0;
        z-index: 60;
        padding: 8px 12px;
        gap: 8px;
    }
    .app-header h1 { font-size: 1.1em; }
    .app-header .header-btns { gap: 6px; }
    .app-header .theme-toggle-btn { padding: 6px 9px; }
    /* 頁籤改單行橫向捲動（原本 17 個頁籤折成 5 行，佔掉約 350px） */
    .app-header .tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        /* 兩端淡出，提示還能左右滑 */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
        padding: 0 12px;
        margin: 0 -12px;
        flex-basis: calc(100% + 24px);
    }
    .app-header .tab-nav::-webkit-scrollbar { display: none; }
    .app-header .tab-btn { flex-shrink: 0; }
}

/* 「進階」頁頂端的區塊跳轉列 */
.section-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.section-toc:empty { display: none; }
/* 跳到區塊時上方留一點空隙（整頁捲動時另由 JS 扣掉固定頂部列的高度） */
#tab-advanced .panel { scroll-margin-top: 12px; }
@media (max-width: 900px) {
    .section-toc {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .section-toc .btn-sm { flex-shrink: 0; white-space: nowrap; }
}

/* 進階頁二級分組切換器 */
.sub-tab-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.sub-tab-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.sub-tab-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}
.sub-tab-btn.active {
    background: var(--accent);
    color: #1a1a2e;
    border-color: var(--accent);
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
@media (max-width: 900px) {
    .sub-tab-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sub-tab-btn {
        flex-shrink: 0;
    }
}

/* Indu Lagna 財神等級徽章 */
.indu-yoga-badge.badge-kotipati {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
.indu-yoga-badge.badge-dhanavan {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}
.indu-yoga-badge.badge-madhyama {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
}
.indu-yoga-badge.badge-samanya {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}


/* 年運星盤原本撐滿整個內容寬（桌機約 1000px），星盤字級跟著放大一倍；與本命盤同尺寸 */
#varshaphalChartSvg { width: 100%; max-width: 540px; }

/* 出生月份尚未選擇時，佔位的「月」用次要色，看得出是提示而不是已選的值 */
#month:invalid { color: var(--text-secondary); }
#month option { color: var(--text-primary); }

/* === Phase 3 互動升級 === */
/* 全星盤行列聯動發光 (Cross-chart Planet Highlighting) */
.chart-planet-group {
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.chart-planet-group:hover,
.chart-planet-group:focus,
.chart-planet-group.planet-highlighted {
    filter: drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 10px var(--accent));
    outline: none;
}
.chart-planet-group:focus text,
.chart-planet-group.planet-highlighted text {
    font-weight: 900;
}
.planet-table tbody tr.row-highlighted {
    background: var(--bg-secondary) !important;
    outline: 2px solid var(--accent);
}

/* 雙盤並列 (Dual Chart Layout) */
.dual-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}
.dual-chart-pane {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
}
.dual-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}
.dual-chart-header h4 {
    margin: 0;
    font-size: 0.98rem;
    color: var(--text-accent);
}
.chart-view-mode-toggle {
    display: flex;
    gap: 4px;
}
@media (max-width: 900px) {
    .dual-chart-grid {
        grid-template-columns: 1fr;
    }
}

/* 行運時光步進器 (Transit Stepper) */
.transit-stepper-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.transit-stepper-label {
    font-size: 0.85em;
    color: var(--text-secondary);
    font-weight: 600;
}
.transit-stepper-toolbar .btn-sm {
    padding: 4px 8px;
    font-size: 0.82rem;
    min-width: 38px;
}

/* 行運即時盤亮點看板 (Transit Highlights Banner) */
.transit-highlights-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.88rem;
}
.transit-hl-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.transit-hl-label {
    color: var(--text-secondary);
    font-size: 0.82em;
}
.transit-hl-val {
    font-weight: 700;
    color: var(--text-primary);
}

/* 人生走勢跳轉按鈕 (Life Trend Jump Button) */
.life-trend-jump-btn {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.88rem;
    cursor: pointer;
}

/* ==========================================================================
   Phase 4: 雙曜行運焦點雷達 (Double Transit Radar) & 八重盤軌道區間過境判斷器
   ========================================================================== */
.double-transit-panel {
    border-top: 2px solid var(--accent);
}
.dt-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 16px;
}
.dt-status-box {
    flex: 1;
    min-width: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.dt-saturn-box {
    border-left: 3px solid #78909c;
}
.dt-jupiter-box {
    border-left: 3px solid #ffd54f;
}
.dt-status-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.95rem;
}
.dt-pos-tag {
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 4px;
}
.dt-aspect-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 0.82rem;
}
.dt-aspect-label {
    color: var(--text-secondary);
    font-size: 0.8em;
}
.dt-aspect-chip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2px 7px;
    border-radius: 4px;
}
.dt-aspect-chip small {
    color: var(--text-secondary);
}
.dt-section-title {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 14px 0 8px;
    color: var(--text-accent);
}
.dt-houses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.dt-house-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dt-house-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dt-house-num {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
}
.dt-house-num small {
    font-size: 0.78em;
    color: var(--text-secondary);
    font-weight: normal;
}
.dt-sign-tag {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.dt-house-aspects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0;
}
.dt-tag {
    font-size: 0.76rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.dt-tag-saturn {
    background: rgba(120, 144, 156, 0.15);
    border: 1px solid rgba(120, 144, 156, 0.4);
    color: #90a4ae;
}
.dt-tag-jupiter {
    background: rgba(255, 213, 79, 0.15);
    border: 1px solid rgba(255, 213, 79, 0.4);
    color: #ffe082;
}
.dt-tag-strength {
    background: rgba(200, 145, 42, 0.15);
    border: 1px solid var(--accent);
    color: var(--text-accent);
}
.dt-awakened-tag {
    font-size: 0.84rem;
    padding: 4px 8px;
    background: rgba(102, 187, 106, 0.12);
    border-left: 3px solid #66bb6a;
    border-radius: 4px;
    margin: 4px 0;
}
.dt-house-topics {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.dt-no-overlap {
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.dt-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.dt-timeline-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.82rem;
}
.dt-timeline-date {
    font-weight: 700;
    color: var(--text-accent);
    margin-bottom: 4px;
}
.dt-timeline-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--text-secondary);
}
.dt-timeline-highlight {
    color: var(--accent);
    font-weight: 700;
}

/* Kakshya Matrix & Analyzer */
.kakshya-range-row {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kakshya-range-row code {
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: 1px 4px;
    border-radius: 3px;
}
.kakshya-progress-bar-wrap {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 5px;
    overflow: hidden;
}
.kakshya-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--text-accent));
    border-radius: 2px;
}
.kakshya-badge-favorable {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--success);
    background: rgba(46, 125, 50, 0.12);
    padding: 3px 6px;
    border-radius: 4px;
    margin-top: 6px;
    text-align: center;
}
.kakshya-badge-unfavorable {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--warning);
    background: rgba(230, 81, 0, 0.12);
    padding: 3px 6px;
    border-radius: 4px;
    margin-top: 6px;
    text-align: center;
}
.kakshya-matrix-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.kakshya-planet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.kakshya-tabs-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-right: 4px;
}
.kakshya-tab-btn {
    padding: 3px 8px;
    font-size: 0.8rem;
}
.kakshya-tab-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.kakshya-beacon-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.86rem;
}
.kakshya-beacon-alert.beacon-favorable {
    background: rgba(46, 125, 50, 0.12);
    border: 1px solid var(--success);
}
.kakshya-beacon-alert.beacon-unfavorable {
    background: rgba(230, 81, 0, 0.12);
    border: 1px solid var(--warning);
}
.kakshya-td-active {
    outline: 2px solid var(--accent);
    position: relative;
    z-index: 2;
}
.kakshya-col-active {
    color: var(--text-accent) !important;
    font-weight: 700 !important;
    background: rgba(200, 145, 42, 0.08);
}
.kakshya-cell-beacon {
    animation: kakshyaBeaconGlow 1.8s infinite ease-in-out;
    font-weight: 700;
    transform: scale(1.15);
    display: inline-block;
    border-color: var(--accent) !important;
}
@keyframes kakshyaBeaconGlow {
    0%, 100% {
        box-shadow: 0 0 3px var(--accent);
    }
    50% {
        box-shadow: 0 0 12px var(--accent);
        filter: brightness(1.3);
    }
}

/* === 經典權威名人庫 Modal & Cards === */
.famous-charts-modal-box {
    max-width: 960px;
    width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.famous-filters-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.famous-search-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.95rem;
}
.famous-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.famous-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    overflow-y: auto;
    padding-right: 4px;
    max-height: 62vh;
}
.famous-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.famous-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}
.famous-card-header {
    margin-bottom: 8px;
}
.famous-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.famous-name {
    font-size: 1.05rem;
    color: var(--accent);
}
.famous-rating-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(240, 192, 64, 0.15);
    color: var(--text-accent);
    border: 1px solid var(--accent);
}
.famous-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.famous-highlights {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 10px;
    flex-grow: 1;
}
.famous-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}
.famous-tag {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.famous-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* === 報告模式切換 & 結構化個人命理鑑定書（Dossier）=== */
.report-mode-switcher {
    display: inline-flex;
    gap: 6px;
}
.dossier-container {
    max-width: 900px;
    margin: 0 auto;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
}
.dossier-cover {
    text-align: center;
    padding: 24px 16px;
    margin-bottom: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.dossier-top-badge {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 8px;
}
.dossier-main-title {
    font-size: 1.8rem;
    margin: 6px 0;
    color: var(--text-accent);
}
.dossier-main-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 16px;
}
.dossier-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    text-align: left;
    margin: 16px 0;
    background: var(--bg-card);
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.dossier-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dossier-meta-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.dossier-notice {
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: rgba(240, 192, 64, 0.08);
    border: 1px dashed var(--accent);
    padding: 8px 14px;
    border-radius: 6px;
    margin: 14px 0;
    text-align: left;
}
.dossier-chart-container {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}
.dossier-chapter {
    margin-bottom: 24px;
}
.dossier-chapter-title {
    font-size: 1.3rem;
    color: var(--accent);
    border-bottom: 2px solid var(--border);
    padding-bottom: 6px;
    margin-bottom: 12px;
}
.dossier-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}
.dossier-card-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.dossier-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.dossier-badge-inline {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(200, 145, 42, 0.12);
    color: var(--text-accent);
    border: 1px solid var(--border);
}
.dossier-highlight-pill {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-secondary);
    font-weight: 700;
    border: 1px solid var(--border);
}
.dossier-yogas-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}
.dossier-yoga-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
}
.dossier-conclusion-box {
    margin-top: 14px;
    padding: 12px;
    background: var(--bg-secondary);
    border-left: 4px solid var(--accent);
    border-radius: 0 6px 6px 0;
}
.dossier-page-break {
    height: 1px;
    margin: 20px 0;
}

/* === AI 解讀專題 Chips === */
.ai-thematic-chips-row {
    margin-bottom: 12px;
}
.ai-theme-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* === 列印模式專用（Dossier Print Output）=== */
@media print {
    .dossier-page-break {
        page-break-after: always;
        break-after: page;
        height: 0;
        margin: 0;
    }
    .dossier-chapter {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .report-mode-switcher,
    .famous-filters-bar {
        display: none !important;
    }
}

/* === 資訊架構分組與新手／專業雙視圖模式 === */
.tab-group-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    margin: 0 4px;
    align-self: center;
    background: var(--border);
    opacity: 0.75;
    flex-shrink: 0;
}
.view-mode-switch {
    display: inline-flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px;
    gap: 2px;
    margin-right: 4px;
}
.view-mode-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
}
.view-mode-btn:hover {
    color: var(--text-primary);
}
.view-mode-btn.active {
    background: var(--accent);
    color: var(--bg-primary);
}
:root[data-view-mode="beginner"] .pro-only {
    display: none !important;
}
.beginner-mode-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
:root[data-view-mode="beginner"] .beginner-mode-banner {
    display: flex;
}
.view-mode-empty-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.finder-pro-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--bg-input);
    border: 1px solid var(--accent);
    color: var(--text-accent);
    vertical-align: middle;
}
@media (max-width: 900px) {
    .app-header h1 {
        font-size: 0.98rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .view-mode-btn {
        padding: 3px 7px;
        font-size: 0.72rem;
    }
    .tab-group-sep {
        height: 16px;
        margin: 0 2px;
    }
}
/* Research comparisons remain readable on narrow screens. */
.research-system { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.research-system select { max-width: 100%; margin: 6px 0 6px 8px; }
.research-system p { overflow-wrap: anywhere; }
.research-table-scroll { max-width: 100%; overflow-x: auto; }
.research-system .chart-container { width: 100%; max-width: 500px; margin: 12px auto; }
.school-input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px 16px; }
.school-record-text { white-space: pre-wrap; overflow-wrap: anywhere; }
#ashtamangalaForm textarea { width: 100%; min-height: 72px; resize: vertical; padding: 8px 10px; font: inherit; }
#ashtamangalaContent .chart-container { max-width: 500px; margin: 16px auto; }
.trip-svg-wrap { width: 100%; max-width: 820px; margin: auto; overflow-x: auto; }
.tripataki-svg { display: block; width: 100%; min-width: 560px; height: auto; color: var(--text-primary); }
.trip-edge { stroke: var(--border); stroke-width: 2; }
.trip-edge-focus { stroke: var(--text-accent); stroke-width: 3; }
.trip-flag { fill: none; stroke: var(--text-accent); stroke-width: 2; }
.trip-station circle { fill: var(--bg-card); stroke: var(--border); stroke-width: 2; }
.trip-station-focus circle { stroke: var(--text-accent); stroke-width: 3; }
.trip-station text { fill: currentColor; font-size: 19px; }
.trip-station .trip-symbols { font-size: 23px; }