:root {
  --bg: #0d1117;
  --panel: #151c24;
  --panel-2: #1b2530;
  --panel-3: #111820;
  --border: rgba(166, 185, 202, 0.14);
  --text: #f1f6f8;
  --muted: #8d9ba7;
  --faint: #5b6873;
  --green: #43d6a1;
  --green-soft: rgba(67, 214, 161, 0.12);
  --orange: #f4a261;
  --orange-soft: rgba(244, 162, 97, 0.12);
  --red: #ef7583;
  --blue: #72a9ff;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
  --bg-glow: rgba(35, 85, 90, 0.16);
  --sidebar: rgba(12, 17, 22, 0.92);
  --type-scale: 1;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  color: var(--text);
  background: var(--bg);
}

:root[data-theme="ocean"] {
  --bg: #0b1220;
  --panel: #142235;
  --panel-2: #1b3048;
  --panel-3: #0f1b2b;
  --border: rgba(133, 189, 255, 0.2);
  --text: #f2f7ff;
  --muted: #9eb1c8;
  --faint: #687d94;
  --green: #59c7ff;
  --green-soft: rgba(89, 199, 255, 0.13);
  --orange: #f7ba68;
  --orange-soft: rgba(247, 186, 104, 0.13);
  --red: #ff7f98;
  --blue: #80b7ff;
  --bg-glow: rgba(31, 93, 141, 0.2);
  --sidebar: rgba(8, 15, 28, 0.94);
}

:root[data-theme="amber"] {
  --bg: #16110d;
  --panel: #241a12;
  --panel-2: #322319;
  --panel-3: #1c140f;
  --border: rgba(246, 190, 104, 0.2);
  --text: #fff7ed;
  --muted: #c2aa91;
  --faint: #806c58;
  --green: #f2b866;
  --green-soft: rgba(242, 184, 102, 0.14);
  --orange: #f08c55;
  --orange-soft: rgba(240, 140, 85, 0.14);
  --red: #f27678;
  --blue: #8fc7ff;
  --bg-glow: rgba(135, 75, 32, 0.2);
  --sidebar: rgba(22, 14, 9, 0.94);
}

:root[data-theme="violet"] {
  --bg: #110f1b;
  --panel: #1b1729;
  --panel-2: #28203b;
  --panel-3: #151220;
  --border: rgba(197, 151, 255, 0.2);
  --text: #faf6ff;
  --muted: #b4a6c7;
  --faint: #766887;
  --green: #c597ff;
  --green-soft: rgba(197, 151, 255, 0.14);
  --orange: #f4b477;
  --orange-soft: rgba(244, 180, 119, 0.14);
  --red: #ff91ae;
  --blue: #9cbcff;
  --bg-glow: rgba(92, 51, 135, 0.2);
  --sidebar: rgba(16, 12, 25, 0.94);
}

:root[data-theme="rose"] {
  --bg: #180f17;
  --panel: #251722;
  --panel-2: #362130;
  --panel-3: #1e131c;
  --border: rgba(255, 159, 185, 0.2);
  --text: #fff5f8;
  --muted: #c5a6b2;
  --faint: #866c78;
  --green: #ff9fb9;
  --green-soft: rgba(255, 159, 185, 0.14);
  --orange: #ffc078;
  --orange-soft: rgba(255, 192, 120, 0.14);
  --red: #ff7d87;
  --blue: #a8c5ff;
  --bg-glow: rgba(137, 48, 83, 0.2);
  --sidebar: rgba(24, 12, 20, 0.94);
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 85% 0%, var(--bg-glow), transparent 30%), var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 238px; flex: 0 0 238px; border-right: 1px solid var(--border); padding: 28px 16px 18px; display: flex; flex-direction: column; background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--bg); font-size: calc(22px * var(--type-scale)); font-weight: 800; background: var(--green); transform: rotate(-8deg); }
.brand strong { display: block; font-size: calc(16px * var(--type-scale)); letter-spacing: .06em; }
.brand span { color: var(--muted); font-size: calc(10px * var(--type-scale)); letter-spacing: .14em; text-transform: uppercase; }
.demo-pill { align-self: flex-start; margin: 38px 12px 22px; padding: 6px 10px; border: 1px solid rgba(244, 162, 97, .26); border-radius: 999px; color: var(--orange); background: var(--orange-soft); font-size: calc(11px * var(--type-scale)); }
.demo-pill span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: var(--orange); vertical-align: 1px; }
.demo-pill.live { border-color: rgba(67, 214, 161, .26); color: var(--green); background: var(--green-soft); }
.demo-pill.live span { background: var(--green); }
.main-nav { display: grid; gap: 5px; }
.nav-item { border: 0; border-radius: 10px; padding: 11px 13px; display: flex; align-items: center; gap: 12px; color: var(--muted); text-align: left; background: transparent; transition: .2s ease; }
.nav-item span { width: 18px; color: var(--faint); font-size: calc(17px * var(--type-scale)); text-align: center; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-item.active { color: var(--green); background: var(--green-soft); }
.nav-item.active span { color: var(--green); }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); padding: 17px 10px 0; }
.mini-profile { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: calc(13px * var(--type-scale)); }
.mini-profile strong, .mini-profile span { display: block; font-size: calc(11px * var(--type-scale)); }
.mini-profile span { color: var(--muted); margin-top: 3px; }
#accountButton { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px; font-size: calc(12px * var(--type-scale)); }
#accountButton .avatar { width: 32px; height: 32px; font-size: calc(14px * var(--type-scale)); margin-right: 6px; }
#accountButton .avatar-label { color: var(--muted); font-size: calc(11px * var(--type-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#accountButton:hover .avatar-label { color: var(--text); }
.account-menu { position: absolute; z-index: 12; top: calc(100% + 10px); right: 0; width: 210px; border: 1px solid var(--border); border-radius: 11px; padding: 8px; background: var(--panel-2); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.account-menu[hidden] { display: none; }
.account-menu-heading { padding: 9px 10px 11px; border-bottom: 1px solid var(--border); }
.account-menu-heading .eyebrow { margin-bottom: 4px; font-size: calc(9px * var(--type-scale)); }
.account-menu-heading strong { display: block; overflow: hidden; color: var(--text); font-size: calc(12px * var(--type-scale)); text-overflow: ellipsis; white-space: nowrap; }
.account-menu button { width: 100%; border: 0; border-radius: 7px; padding: 10px; color: var(--muted); text-align: left; background: transparent; font-size: calc(11px * var(--type-scale)); }
.account-menu button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.account-menu .danger-menu-item { color: var(--red); }
.account-menu-divider { height: 1px; margin: 4px 0; background: var(--border); }
.account-overlay { position: fixed; inset: 0; z-index: 11; display: grid; place-items: center; padding: 18px; background: rgba(2, 6, 9, .85); backdrop-filter: blur(6px); }
.account-overlay[hidden] { display: none; }
.account-dialog { width: min(100%, 560px); max-height: calc(100vh - 36px); overflow-y: auto; }
.site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding: 16px 0 4px; border-top: 1px solid var(--border); color: var(--faint); font-size: calc(10px * var(--type-scale)); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.site-footer button { border: 0; padding: 0; color: var(--muted); background: transparent; font-size: calc(10px * var(--type-scale)); cursor: pointer; }
.site-footer button:hover { color: var(--green); }
.legal-dialog { width: min(100%, 760px); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.legal-tab { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--muted); background: var(--panel-3); font-size: calc(11px * var(--type-scale)); cursor: pointer; }
.legal-tab.active { border-color: rgba(67,214,161,.55); color: var(--green); background: var(--green-soft); }
.legal-content { color: var(--muted); font-size: calc(11px * var(--type-scale)); line-height: 1.75; }
.legal-content h3 { margin: 0 0 10px; color: var(--text); font-size: calc(16px * var(--type-scale)); }
.legal-content h4 { margin: 18px 0 5px; color: var(--text); font-size: calc(12px * var(--type-scale)); }
.legal-content p { margin: 0 0 10px; }
.legal-content ul { margin: 0 0 10px; padding-left: 20px; }
.legal-content li + li { margin-top: 4px; }
.feedback-form { display: grid; gap: 13px; margin-top: 17px; padding: 16px; border: 1px solid rgba(67,214,161,.24); border-radius: 11px; background: rgba(17, 24, 32, .62); }
.feedback-form label { display: grid; gap: 6px; color: var(--text); font-size: calc(11px * var(--type-scale)); }
.feedback-form input, .feedback-form select, .feedback-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 10px; outline: none; color: var(--text); background: var(--panel-3); font: inherit; font-size: calc(12px * var(--type-scale)); }
.feedback-form textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.feedback-form input:focus, .feedback-form select:focus, .feedback-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(67,214,161,.1); }
.feedback-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feedback-actions .form-hint { flex: 1; margin: 0; }
.feedback-form .primary-button { white-space: nowrap; }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: 15px; padding: 24px; background: #18222c; box-shadow: 0 25px 90px rgba(0,0,0,.45); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 12px; }
.panel-heading h2 { font-size: calc(17px * var(--type-scale)); margin: 0; }
.panel-heading p { color: var(--muted); font-size: calc(11px * var(--type-scale)); margin: 5px 0 0; }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.account-card { border: 1px solid var(--border); border-radius: 11px; padding: 16px; background: var(--panel-3); display: flex; flex-direction: column; gap: 7px; }
.account-card .card-label { color: var(--muted); font-size: calc(11px * var(--type-scale)); margin: 0; }
.account-card input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 10px; outline: none; color: var(--text); background: var(--panel-3); font-size: calc(13px * var(--type-scale)); }
.account-card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(67,214,161,.1); }
.account-card ul { padding: 0; margin: 0; list-style: none; color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.account-card ul li { padding: 5px 0; }
.account-card span:last-child { color: var(--text); font-size: calc(13px * var(--type-scale)); }
.account-card .form-hint { color: var(--faint); font-size: calc(10px * var(--type-scale)); margin: 3px 0 0; }
.account-card-action { margin-top: auto; padding: 8px 10px; font-size: calc(11px * var(--type-scale)); }
.auth-dialog { width: min(100%, 460px); }
.auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 16px; }
.auth-tab { border: 1px solid var(--border); border-radius: 8px; padding: 9px 8px; color: var(--muted); background: var(--panel-3); font-size: calc(12px * var(--type-scale)); }
.auth-tab.active { border-color: rgba(67,214,161,.55); color: var(--green); background: var(--green-soft); }
.auth-status { margin-bottom: 15px; border: 1px solid rgba(114,169,255,.2); border-radius: 8px; padding: 10px 11px; color: #9cb8dc; background: rgba(114,169,255,.07); font-size: calc(11px * var(--type-scale)); line-height: 1.5; }
.auth-status.pending { border-color: rgba(244,162,97,.25); color: var(--orange); background: var(--orange-soft); }
.auth-status.error { border-color: rgba(239,117,131,.35); color: #f69a9d; background: rgba(239,117,131,.08); }
.auth-form { display: grid; gap: 13px; }
.auth-form label { color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.auth-form input { display: block; width: 100%; margin-top: 7px; border: 1px solid var(--border); border-radius: 8px; padding: 11px; outline: none; color: var(--text); background: var(--panel-3); }
.auth-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(67,214,161,.1); }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-footnote { margin: 15px 0 0; color: var(--faint); font-size: calc(10px * var(--type-scale)); line-height: 1.6; }
.main-content { width: calc(100% - 238px); min-width: 0; max-width: 1500px; padding: 35px clamp(22px, 4vw, 62px) 70px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 26px; }
.topbar > div:not(.topbar-actions) { flex: 0 0 auto; }
.eyebrow { color: var(--muted); font-size: calc(11px * var(--type-scale)); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; }
h1 span { color: var(--green); font-size: .7em; vertical-align: 5px; }
h2 { margin-bottom: 0; font-size: calc(20px * var(--type-scale)); letter-spacing: -.025em; }
h3 { margin-bottom: 5px; font-size: calc(14px * var(--type-scale)); }
.topbar-actions { position: relative; display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.topbar-actions > button, .topbar-actions > select, .topbar-actions > span, .topbar-actions > #accountButton { flex-shrink: 0; white-space: nowrap; }
h1 { white-space: nowrap; }
.metric-label { position: relative; display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: inherit; line-height: 1.45; }
.calendar-item .metric-label, .holding-stat .metric-label, .holdings-breakdown-head .metric-label { display: inline-flex; }
.metric-help-button { width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid var(--border); border-radius: 50%; padding: 0; color: var(--green); background: var(--panel-3); font-size: 10px; font-weight: 700; line-height: 14px; vertical-align: middle; }
.metric-help-button:hover, .metric-help-button[aria-expanded="true"] { border-color: var(--green); background: var(--green-soft); }
.metric-help-popover { position: fixed; z-index: 10002; width: min(280px, calc(100vw - 24px)); max-height: 35vh; overflow: auto; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; color: var(--text); background: var(--panel-2); box-shadow: var(--shadow); font-size: calc(11px * var(--type-scale)); font-weight: 400; line-height: 1.65; white-space: normal; }
.metric-help-popover[hidden] { display: none; }
.guide-tour { position: fixed; z-index: 10000; right: 24px; bottom: 24px; width: min(420px, calc(100vw - 32px)); border: 1px solid var(--border); border-top: 3px solid var(--green); border-radius: 14px; padding: 17px; background: var(--panel); box-shadow: 0 22px 70px rgba(0,0,0,.48); }
.guide-tour[hidden] { display: none; }
.guide-tour-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide-tour .eyebrow { margin: 0; }
.guide-tour h2 { margin: 12px 0 7px; font-size: calc(18px * var(--type-scale)); }
.guide-tour p { margin: 0; color: var(--muted); font-size: calc(12px * var(--type-scale)); line-height: 1.7; }
.guide-tour-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--border); }
.guide-tour-actions button { padding: 8px 11px; font-size: calc(11px * var(--type-scale)); }
.guide-tour-actions button:disabled { opacity: .35; cursor: default; }
.guide-tour-target { position: relative; z-index: 9; outline: 2px solid var(--green); outline-offset: 5px; border-radius: 10px; box-shadow: 0 0 0 7px var(--green-soft); scroll-margin: 30px; }
.font-scale-button { white-space: nowrap; }
.font-scale-button.active { border-color: rgba(67,214,161,.55); color: var(--green); background: var(--green-soft); }
.updated-label { color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.updated-label strong { color: var(--text); font-weight: 500; }
.primary-button { border: 0; border-radius: 9px; padding: 11px 16px; color: var(--bg); font-weight: 700; background: var(--green); box-shadow: 0 6px 20px var(--green-soft); transition: .2s ease; }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.primary-button span { font-size: calc(18px * var(--type-scale)); vertical-align: -1px; }
.ghost-button { border: 1px solid var(--border); border-radius: 9px; padding: 10px 15px; color: var(--muted); background: transparent; }
.ghost-button:hover { color: var(--text); border-color: rgba(166,185,202,.35); }
.theme-select { min-width: 102px; border: 1px solid var(--border); border-radius: 9px; padding: 10px 10px; color: var(--muted); background: var(--panel-3); outline: none; cursor: pointer; }
.theme-select:hover, .theme-select:focus { color: var(--text); border-color: var(--green); }
.theme-select option { color: var(--text); background: var(--panel-2); }
.mobile-menu { display: none; border: 0; color: var(--text); background: transparent; font-size: calc(22px * var(--type-scale)); }
.demo-notice { display: flex; gap: 10px; align-items: center; border: 1px solid rgba(114, 169, 255, .18); border-radius: 9px; margin-bottom: 28px; padding: 10px 13px; color: #9cb8dc; background: rgba(114, 169, 255, .07); font-size: calc(11px * var(--type-scale)); }
.notice-icon { width: 16px; height: 16px; display: grid; place-items: center; flex: 0 0 16px; border: 1px solid #72a9ff; border-radius: 50%; font-size: calc(10px * var(--type-scale)); }
.demo-notice .market-refresh-button { margin-left: auto; padding: 7px 11px; color: var(--text); font-size: calc(11px * var(--type-scale)); white-space: nowrap; }
.demo-notice .market-refresh-button:disabled { cursor: wait; opacity: .65; }
.demo-notice .feedback-quick-button { padding: 7px 11px; color: var(--green); border-color: rgba(67,214,161,.38); font-size: calc(11px * var(--type-scale)); white-space: nowrap; }
.demo-notice #dismissNotice { margin-left: 0; border: 0; color: var(--muted); background: transparent; font-size: calc(18px * var(--type-scale)); }
.trust-panel { margin: -10px 0 28px; padding: 20px; border: 1px solid rgba(114,169,255,.2); border-radius: 14px; background: linear-gradient(135deg, rgba(23,43,65,.84), rgba(17,30,45,.78)); }
.trust-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.trust-panel-heading .eyebrow { margin: 0 0 5px; color: var(--blue); font-size: calc(10px * var(--type-scale)); letter-spacing: .08em; }
.trust-panel-heading h2 { margin: 0 0 5px; color: var(--text); font-size: calc(17px * var(--type-scale)); }
.trust-panel-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: calc(11px * var(--type-scale)); line-height: 1.6; }
.trust-panel-heading > button { flex: 0 0 auto; }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.trust-card { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid rgba(166,185,202,.1); border-radius: 10px; background: rgba(10,19,29,.3); }
.trust-card-icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--blue); background: rgba(114,169,255,.1); font-size: calc(12px * var(--type-scale)); font-weight: 700; }
.trust-card h3 { margin: 0 0 3px; color: var(--text); font-size: calc(11px * var(--type-scale)); }
.trust-card p { margin: 0; color: var(--muted); font-size: calc(10px * var(--type-scale)); line-height: 1.55; }
.trust-panel-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; margin-top: 12px; color: var(--faint); font-size: calc(10px * var(--type-scale)); }
.trust-panel-links button, .auth-footnote button { border: 0; padding: 0; color: var(--blue); background: transparent; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.auth-footnote button { margin-left: 3px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.summary-card, .panel { border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(140deg, var(--panel-2), var(--panel-3)); box-shadow: var(--shadow); }
.summary-card { min-height: 143px; padding: 18px 19px; position: relative; overflow: hidden; }
.summary-card::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -40px; top: -30px; background: rgba(67,214,161,.08); }
.card-label { color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.card-value { margin: 12px 0 9px; font-size: calc(25px * var(--type-scale)); letter-spacing: -.04em; font-weight: 700; }
.card-value.positive, .positive { color: var(--green); }
.card-value.negative, .negative { color: var(--red); }
.card-sub { color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.card-sub strong { color: var(--text); font-weight: 500; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1.47fr) minmax(290px, .83fr); gap: 18px; margin-bottom: 18px; }
.panel { padding: 21px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 24px; }
.panel-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.panel-heading p { color: var(--muted); font-size: calc(11px * var(--type-scale)); margin: 6px 0 0; }
.select-small { border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; color: var(--muted); background: var(--panel-3); font-size: calc(11px * var(--type-scale)); }
.bar-chart { height: 185px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 9px; padding-top: 12px; border-bottom: 1px solid var(--border); }
.bar-column { height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 8px; min-width: 0; }
.bar-track { height: 135px; width: 100%; display: flex; align-items: end; justify-content: center; }
.bar { width: min(24px, 75%); min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #55e3b1, #24866d); transition: height .5s ease; position: relative; }
.bar.future { background: linear-gradient(180deg, #f7b27c, #9d5c36); }
.bar:hover::after { content: attr(data-value); position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface, var(--panel)); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); font-size: calc(11px * var(--type-scale)); font-weight: 600; white-space: nowrap; pointer-events: none; }
.bar-column small { color: var(--faint); font-size: calc(10px * var(--type-scale)); }
.chart-legend { display: flex; gap: 17px; margin-top: 14px; color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--green); }
.legend-dot.orange { background: var(--orange); }
.progress-block { padding: 2px 0 18px; }
.progress-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.progress-meta strong { color: var(--text); font-size: calc(13px * var(--type-scale)); }
.progress-track { height: 8px; margin: 10px 0 9px; overflow: hidden; border-radius: 999px; background: #29343e; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #86e9c6); }
.progress-foot { display: flex; justify-content: space-between; color: var(--faint); font-size: calc(10px * var(--type-scale)); }
.next-income { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 19px; }
.next-income-label { color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.next-income-main { display: flex; justify-content: space-between; align-items: end; margin: 10px 0 15px; }
.next-income-main strong { font-size: calc(22px * var(--type-scale)); }
.next-income-main span { color: var(--orange); font-size: calc(11px * var(--type-scale)); }
.income-row { display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(166,185,202,.08); padding: 10px 0; }
.income-date { width: 37px; color: var(--orange); font-size: calc(10px * var(--type-scale)); }
.income-info { flex: 1; min-width: 0; }
.income-info strong, .income-info span { display: block; }
.income-info strong { font-size: calc(12px * var(--type-scale)); }
.income-info span { color: var(--muted); margin-top: 3px; font-size: calc(10px * var(--type-scale)); }
.income-amount { font-size: calc(12px * var(--type-scale)); font-weight: 600; }
.holdings-panel { padding-bottom: 6px; }
.holdings-breakdown { display: grid; gap: 0; }
.holdings-breakdown-head, .holdings-breakdown-card { display: grid; grid-template-columns: minmax(185px, 1.55fr) repeat(9, minmax(105px, 1fr)); align-items: center; gap: 12px; min-width: 1285px; }
.holdings-breakdown-head { color: var(--faint); padding: 0 0 10px; font-size: calc(10px * var(--type-scale)); }
.holdings-breakdown-head div:not(:first-child), .holdings-breakdown-card > div:not(:first-child) { text-align: right; }
.holdings-breakdown-card { border-bottom: 1px solid rgba(166,185,202,.09); padding: 15px 0; }
.holdings-breakdown-card:first-child { padding-top: 0; }
.holdings-breakdown-card:last-child { border-bottom: 0; padding-bottom: 6px; }
.holdings-breakdown-main, .holdings-breakdown-secondary { display: contents; }
.holdings-breakdown-asset { display: flex; align-items: center; min-width: 0; gap: 10px; }
.holdings-breakdown-asset > div:last-child { min-width: 0; }
.holdings-breakdown-asset strong, .holdings-breakdown-asset span { display: block; }
.holdings-breakdown-asset strong { font-size: calc(12px * var(--type-scale)); }
.holdings-breakdown-asset span { overflow: hidden; color: var(--muted); margin-top: 3px; font-size: calc(10px * var(--type-scale)); text-overflow: ellipsis; white-space: nowrap; }
.holding-stat { min-width: 0; }
.holdings-breakdown-card .holding-stat { text-align: right; }
.holding-stat span { display: none; color: var(--faint); font-size: calc(10px * var(--type-scale)); }
.holding-stat strong { display: block; margin-top: 4px; font-size: calc(12px * var(--type-scale)); font-weight: 600; white-space: nowrap; }
.holding-stat-emphasis strong { font-size: calc(14px * var(--type-scale)); }
.holdings-table, .transactions-table { width: 100%; border-collapse: collapse; text-align: left; }
.holdings-table th, .holdings-table td, .transactions-table th, .transactions-table td { border-bottom: 1px solid rgba(166,185,202,.09); padding: 13px 10px; font-size: calc(11px * var(--type-scale)); }
.holdings-table th, .transactions-table th { color: var(--faint); font-weight: 500; }
.holdings-table td:not(:first-child), .holdings-table th:not(:first-child) { text-align: right; }
.asset-cell { display: flex; align-items: center; gap: 10px; }
.asset-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: calc(9px * var(--type-scale)); font-weight: 700; }
.asset-cell strong, .asset-cell span { display: block; }
.asset-cell span { color: var(--muted); margin-top: 3px; font-size: calc(10px * var(--type-scale)); white-space: nowrap; }
.empty-state { padding: 35px 15px; color: var(--muted); text-align: center; font-size: calc(12px * var(--type-scale)); }
.view-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; gap: 12px; }
.view-header h2 { display: none; }
.view-header p { color: var(--muted); margin: 7px 0 0; font-size: calc(12px * var(--type-scale)); }
.view-header .filter-badge { margin-top: 10px; border: 1px solid rgba(166,185,202,.35); border-radius: 999px; color: var(--muted); font-size: calc(10px * var(--type-scale)); padding: 5px 10px; background: rgba(166,185,202,.1); display: inline-flex; align-items: center; gap: 5px; }
.view-header .filter-badge #openFilterBtn { cursor: pointer; color: var(--green); font-size: calc(11px * var(--type-scale)); }
.asset-scope-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 17px; padding: 13px 16px; border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 10px; background: linear-gradient(110deg, var(--panel-2), var(--panel-3)); }
.asset-scope-bar > div { display: grid; gap: 4px; min-width: 0; }
.asset-scope-bar strong { color: var(--text); font-size: calc(12px * var(--type-scale)); }
.asset-scope-bar span { color: var(--muted); font-size: calc(11px * var(--type-scale)); line-height: 1.5; }
.asset-scope-bar span b { color: var(--green); font-weight: 600; }
.asset-scope-bar .ghost-button { flex: 0 0 auto; color: var(--green); border-color: var(--border); }
.table-panel { width: 100%; min-width: 0; max-width: 100%; overflow: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.breakdown-scroll { width: 100%; min-width: 0; overflow-x: auto; }
.list-more-actions { display: flex; justify-content: center; margin: 14px 0 4px; }
.list-more-actions .ghost-button { min-width: 180px; }
.list-more-actions .ghost-button span { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.transactions-table th:nth-child(7), .transactions-table th:nth-child(8) { color: var(--muted); }
.transactions-table td:nth-child(7), .transactions-table td:nth-child(8) { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.transaction-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; white-space: nowrap; }
.edit-button { border: 0; color: var(--blue); background: transparent; font-size: calc(11px * var(--type-scale)); }
.edit-button:hover { color: var(--text); }
.type-tag { display: inline-block; border-radius: 999px; padding: 4px 7px; font-size: calc(10px * var(--type-scale)); }
.type-tag.buy, .type-tag.paid { color: var(--green); background: var(--green-soft); }
.type-tag.sell { color: var(--red); background: rgba(239,117,131,.12); }
.type-tag.announced { color: var(--orange); background: var(--orange-soft); }
.delete-button { border: 0; color: var(--red); background: transparent; font-size: calc(11px * var(--type-scale)); }
.delete-button:disabled { cursor: not-allowed; color: var(--faint); }
.custom-etf-list { display: grid; gap: 8px; }
.custom-etf-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: var(--panel-3); }
.custom-etf-item .asset-cell { margin: 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dividend-view-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.upcoming-dividend-card { margin: 0 0 18px; border: 1px solid rgba(67,214,161,.34); border-radius: 14px; padding: 20px; background: linear-gradient(135deg, rgba(67,214,161,.13), rgba(24,34,44,.96) 48%); box-shadow: 0 12px 34px rgba(0,0,0,.16); }
.upcoming-dividend-heading { display: flex; align-items: center; justify-content: space-between; color: var(--green); font-size: calc(12px * var(--type-scale)); font-weight: 600; }
.upcoming-dividend-main { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 13px; }
.upcoming-dividend-main > div { min-width: 0; }
.upcoming-dividend-main strong { display: block; color: var(--text); font-size: calc(17px * var(--type-scale)); }
.upcoming-dividend-main span { display: block; margin-top: 6px; color: var(--muted); font-size: calc(12px * var(--type-scale)); }
.upcoming-dividend-main > strong { color: var(--green); font-size: calc(30px * var(--type-scale)); white-space: nowrap; }
.upcoming-dividend-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(166,185,202,.16); }
.upcoming-dividend-metrics div { display: grid; gap: 5px; }
.upcoming-dividend-metrics span { color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.upcoming-dividend-metrics strong { color: var(--text); font-size: calc(15px * var(--type-scale)); }
.month-card { border: 1px solid var(--border); border-radius: 11px; padding: 15px; background: var(--panel-3); }
.month-card h3 { display: flex; justify-content: space-between; color: var(--muted); font-size: calc(12px * var(--type-scale)); }
.month-card h3 strong { color: var(--text); font-size: calc(14px * var(--type-scale)); }
.month-card h3 > span:last-child { display: grid; justify-items: end; gap: 3px; }
.month-card h3 small { color: var(--green); font-size: calc(10px * var(--type-scale)); font-weight: 500; }
.calendar-item { display: flex; gap: 8px; align-items: flex-start; border-top: 1px solid rgba(166,185,202,.08); padding: 10px 0 0; margin-top: 10px; min-width: 0; }
.calendar-item > div:nth-child(2) { flex: 1; min-width: 0; }
.calendar-item > .type-tag { flex: 0 0 auto; margin-top: 0; }
.calendar-item strong, .calendar-item span { display: block; }
.calendar-item strong { font-size: calc(13px * var(--type-scale)); }
.calendar-item span { color: var(--muted); margin-top: 4px; font-size: calc(11px * var(--type-scale)); }
.calendar-item-info > span { line-height: 1.45; }
.dividend-rule-note { color: var(--faint) !important; font-size: calc(11px * var(--type-scale)) !important; }
.dividend-amounts { display: grid; gap: 2px; margin-top: 7px; }
.dividend-amounts > span { margin-top: 0; font-size: calc(12px * var(--type-scale)); }
.dividend-amounts b { color: var(--text); font-size: calc(13px * var(--type-scale)); font-weight: 600; }
.dividend-amounts > span.actual b { color: var(--green); }
.dividend-performance { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 5px; }
.dividend-performance > span { margin-top: 0; color: var(--faint); font-size: calc(11px * var(--type-scale)); }
.dividend-performance b { color: var(--blue); font-size: calc(12px * var(--type-scale)); font-weight: 600; }
.dividend-actual-form { display: flex; gap: 5px; align-items: center; margin-top: 7px; }
.dividend-actual-form input { width: 116px; min-width: 0; border: 1px solid var(--border); border-radius: 6px; padding: 6px 7px; outline: none; color: var(--text); background: #111820; font-size: calc(10px * var(--type-scale)); }
.dividend-actual-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(67,214,161,.08); }
.dividend-save-button { border: 1px solid rgba(67,214,161,.35); border-radius: 6px; padding: 5px 7px; color: var(--green); background: var(--green-soft); font-size: calc(10px * var(--type-scale)); white-space: nowrap; }
.dividend-save-button:hover { border-color: var(--green); }
.dividend-estimate-hint { color: var(--faint) !important; font-size: calc(9px * var(--type-scale)) !important; }
.dividend-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.dividend-info-card { border: 1px solid var(--border); border-radius: 12px; padding: 17px; background: var(--panel-3); min-width: 0; }
.dividend-info-controls { display: flex; align-items: center; gap: 10px; }
.dividend-info-controls label { color: var(--muted); font-size: calc(11px * var(--type-scale)); white-space: nowrap; }
.dividend-info-controls select { max-width: 280px; }
.dividend-info-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dividend-info-card-header > div { min-width: 0; }
.dividend-info-card-header strong { display: block; color: var(--text); font-size: calc(14px * var(--type-scale)); }
.dividend-info-card-header span:not(.asset-icon) { display: block; margin-top: 5px; color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.dividend-info-card-header .dividend-latest-dates { color: var(--blue); }
.dividend-info-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 15px; padding: 11px 0; border-top: 1px solid rgba(166,185,202,.1); border-bottom: 1px solid rgba(166,185,202,.1); }
.dividend-info-stats div { display: grid; gap: 4px; }
.dividend-info-stats span { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.dividend-info-stats strong { color: var(--text); font-size: calc(14px * var(--type-scale)); }
.dividend-history-chart { margin-top: 13px; border-radius: 9px; padding: 8px 4px 0; background: rgba(5,10,14,.25); }
.dividend-history-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-guide { stroke: rgba(166,185,202,.13); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-axis-label, .chart-x-label { fill: var(--faint); font-size: calc(10px * var(--type-scale)); }
.dividend-chart-empty { display: grid; place-items: center; min-height: 120px; margin-top: 13px; color: var(--faint); font-size: calc(11px * var(--type-scale)); background: rgba(5,10,14,.25); border-radius: 9px; }
.dividend-history-details { margin-top: 13px; }
.dividend-history-details summary { cursor: pointer; color: var(--blue); font-size: calc(11px * var(--type-scale)); }
.dividend-history-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: calc(10px * var(--type-scale)); }
.dividend-history-table th, .dividend-history-table td { padding: 8px 5px; border-bottom: 1px solid rgba(166,185,202,.09); text-align: left; white-space: nowrap; }
.dividend-history-table th { color: var(--faint); font-weight: 500; }
.dividend-history-table td { color: var(--muted); }
.income-goal-panel { margin-bottom: 18px; }
.income-goal-controls { display: flex; align-items: end; gap: 10px; margin-top: 15px; }
.income-goal-controls label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.income-goal-controls input { width: 190px; border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px; outline: none; color: var(--text); background: #111820; font-size: calc(13px * var(--type-scale)); }
.income-goal-controls input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(67,214,161,.08); }
.income-goal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.income-goal-summary > div { display: grid; gap: 5px; padding: 12px; border: 1px solid rgba(166,185,202,.12); border-radius: 9px; background: rgba(5,10,14,.2); }
.income-goal-summary span, .income-goal-stat span { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.income-goal-summary strong { color: var(--text); font-size: calc(17px * var(--type-scale)); }
.income-goal-summary strong.positive { color: var(--green); }
.income-goal-summary strong.negative { color: var(--red); }
.income-goal-disclaimer { margin: 13px 0 0; color: var(--faint); font-size: calc(10px * var(--type-scale)); line-height: 1.6; }
.income-goal-data-note { margin: 6px 0 0; color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.income-goal-list-heading { margin-top: 18px; padding-top: 13px; border-top: 1px solid rgba(166,185,202,.12); color: var(--text); font-size: calc(11px * var(--type-scale)); font-weight: 600; }
.income-goal-list-note { margin-top: 5px; color: var(--faint); font-size: calc(10px * var(--type-scale)); }
.income-goal-list { display: grid; gap: 8px; margin-top: 8px; }
.income-goal-row { display: grid; grid-template-columns: 27px minmax(0, 1.45fr) minmax(120px, .8fr) minmax(160px, 1.1fr) minmax(190px, 1.15fr); align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(166,185,202,.09); }
.income-goal-rank { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: calc(11px * var(--type-scale)); font-weight: 700; }
.income-goal-asset, .income-goal-stat { min-width: 0; }
.income-goal-asset strong { display: block; color: var(--text); font-size: calc(12px * var(--type-scale)); }
.income-goal-asset span { display: block; margin-top: 4px; color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.income-goal-stat { display: grid; gap: 3px; }
.income-goal-stat strong { color: var(--green); font-size: calc(13px * var(--type-scale)); }
.income-goal-stat small { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.income-goal-capital { display: grid; gap: 3px; text-align: right; }
.income-goal-capital span { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.income-goal-capital strong { color: var(--green); font-size: calc(16px * var(--type-scale)); }
.income-goal-capital small { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.income-plan-panel { margin-bottom: 18px; }
.income-plan-note { margin: 13px 0 12px; color: var(--muted); font-size: calc(11px * var(--type-scale)); line-height: 1.6; }
.income-plan-list { display: grid; gap: 8px; }
.income-plan-row { display: grid; grid-template-columns: 27px minmax(0, 1.25fr) minmax(170px, .75fr) 34px; align-items: end; gap: 9px; padding: 10px 0; border-bottom: 1px solid rgba(166,185,202,.09); }
.income-plan-index { display: grid; place-items: center; width: 25px; height: 25px; margin-bottom: 8px; border-radius: 8px; color: var(--blue); background: rgba(120,174,252,.12); font-size: calc(11px * var(--type-scale)); font-weight: 700; }
.income-plan-row select, .income-plan-row input { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px; outline: none; color: var(--text); background: #111820; font-size: calc(11px * var(--type-scale)); }
.income-plan-row select:focus, .income-plan-row input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(67,214,161,.08); }
.income-plan-row label { display: grid; gap: 5px; color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.income-plan-remove { width: 34px; height: 34px; padding: 0; color: var(--muted); }
.income-plan-actions { display: flex; justify-content: space-between; gap: 9px; margin-top: 13px; }
.income-plan-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.income-plan-summary > div { display: grid; gap: 5px; padding: 12px; border: 1px solid rgba(166,185,202,.12); border-radius: 9px; background: rgba(5,10,14,.2); }
.income-plan-summary span { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.income-plan-summary strong { color: var(--green); font-size: calc(16px * var(--type-scale)); }
.income-plan-summary small { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.income-plan-disclaimer { margin: 13px 0 0; color: var(--faint); font-size: calc(10px * var(--type-scale)); line-height: 1.6; }
.report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.report-card { border: 1px solid var(--border); border-radius: 12px; padding: 17px; background: var(--panel-3); }
.report-card span { color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.report-card strong { display: block; margin-top: 9px; font-size: calc(22px * var(--type-scale)); }
.breakdown-row { display: grid; grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid rgba(166,185,202,.09); padding: 13px 0; font-size: calc(11px * var(--type-scale)); }
.breakdown-row:first-child { color: var(--faint); padding-top: 0; }
.breakdown-row div:not(:first-child) { text-align: right; }
.price-alert-panel { margin-top: 18px; }
.push-preferences-panel { margin-top: 18px; }
.push-instructions { margin: 13px 0 15px; padding: 11px 13px; border: 1px solid rgba(115,164,255,.25); border-radius: 9px; color: var(--muted); background: rgba(35,56,88,.28); font-size: calc(11px * var(--type-scale)); line-height: 1.6; }
.push-instructions strong { display: block; margin-bottom: 5px; color: var(--text); font-size: calc(12px * var(--type-scale)); }
.push-instructions ol { margin: 0; padding-left: 21px; }
.push-instructions li + li { margin-top: 3px; }
.iphone-push-guide, .android-push-guide { margin-top: 11px; border: 1px solid rgba(67,214,161,.28); border-radius: 9px; background: rgba(23,59,53,.22); overflow: hidden; }
.iphone-push-guide summary, .android-push-guide summary { cursor: pointer; padding: 10px 13px; color: var(--green); font-size: calc(12px * var(--type-scale)); font-weight: 700; list-style-position: inside; }
.iphone-push-guide summary::marker, .android-push-guide summary::marker { color: var(--green); }
.iphone-push-guide[open] summary, .android-push-guide[open] summary { border-bottom: 1px solid rgba(67,214,161,.18); }
.iphone-push-guide ol, .android-push-guide ol { margin: 0; padding: 10px 16px 2px 34px; color: var(--muted); font-size: calc(11px * var(--type-scale)); line-height: 1.65; }
.iphone-push-guide li + li, .android-push-guide li + li { margin-top: 4px; }
.iphone-push-guide p, .android-push-guide p { margin: 7px 13px 12px; color: var(--faint); font-size: calc(10px * var(--type-scale)); line-height: 1.55; }
.push-preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.push-preference-grid label { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--panel-3); font-size: calc(11px * var(--type-scale)); }
.push-preference-grid input { accent-color: var(--green); }
.push-preference-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.push-preference-actions .ghost-button { padding: 8px 11px; font-size: calc(10px * var(--type-scale)); }
.price-alert-notice { margin: 0 0 14px; border: 1px solid rgba(67,214,161,.35); border-radius: 9px; padding: 11px 13px; color: var(--green); background: var(--green-soft); font-size: calc(11px * var(--type-scale)); line-height: 1.5; }
.price-alert-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.price-alert-card { min-width: 0; border: 1px solid var(--border); border-radius: 11px; padding: 16px; background: var(--panel-3); }
.price-alert-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.price-alert-card-top .asset-cell { min-width: 0; }
.price-alert-card-top .asset-cell strong, .price-alert-card-top .asset-cell span { display: block; }
.price-alert-card-top .asset-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-alert-card-top .asset-cell span { margin-top: 5px; color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.price-alert-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 17px 0 4px; padding-top: 13px; border-top: 1px solid var(--border); }
.price-alert-metrics span, .price-alert-metrics strong { display: block; }
.price-alert-metrics span { color: var(--muted); font-size: calc(10px * var(--type-scale)); }
.price-alert-metrics strong { margin-top: 5px; color: var(--text); font-size: calc(13px * var(--type-scale)); }
.price-alert-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 11px; border-top: 1px solid rgba(166,185,202,.09); }
.price-alert-actions .ghost-button, .price-alert-actions .delete-button { padding: 7px 10px; font-size: calc(10px * var(--type-scale)); }
.delete-button { border: 1px solid rgba(239,117,131,.24); border-radius: 8px; padding: 8px 11px; color: var(--red); background: transparent; }
.delete-button:hover { border-color: rgba(239,117,131,.55); background: rgba(239,117,131,.08); }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgba(2, 6, 9, .72); backdrop-filter: blur(6px); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(100%, 520px); border: 1px solid var(--border); border-radius: 15px; padding: 22px; background: #18222c; box-shadow: 0 25px 90px rgba(0,0,0,.45); }
.portfolio-image-dialog { width: min(100%, 620px); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.portfolio-image-dialog .modal-header { margin-bottom: 14px; }
.portfolio-image-dialog h2 { margin: 0; color: var(--text); font-size: calc(20px * var(--type-scale)); }
.portfolio-image-intro { margin: 0 0 16px; color: var(--muted); font-size: calc(12px * var(--type-scale)); line-height: 1.6; }
.portfolio-image-ratio-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.portfolio-image-ratio { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); background: var(--panel-3); }
.portfolio-image-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.portfolio-image-fields label { display: flex; min-height: 44px; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; color: var(--text); background: rgba(255,255,255,.02); font-size: calc(11px * var(--type-scale)); }
.portfolio-image-fields input { accent-color: var(--green); }
.portfolio-image-limit { min-height: 20px; margin: 10px 0 0; color: var(--faint); font-size: calc(10px * var(--type-scale)); }
.portfolio-image-dialog .modal-actions { margin-top: 14px; }
.modal-header { display: flex; justify-content: space-between; margin-bottom: 24px; }
.icon-button { width: 29px; height: 29px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: transparent; font-size: calc(20px * var(--type-scale)); line-height: 1; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.form-grid label { min-width: 0; color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select { display: block; width: 100%; margin-top: 7px; border: 1px solid var(--border); border-radius: 8px; padding: 11px; outline: none; color: var(--text); background: var(--panel-3); }
.form-grid input:focus, .form-grid select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(67,214,161,.1); }
.single-date-parts { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.single-date-parts select { width: auto; min-width: 0; margin-top: 0; padding: 11px 7px; text-align: center; }
.single-date-parts select:first-child { flex: 1.35; }
.single-date-parts select:not(:first-child) { flex: .8; }
.single-date-parts span { color: var(--faint); }
.batch-import { display: block; width: 100%; min-height: 210px; margin-top: 7px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 11px; outline: none; color: var(--text); background: var(--panel-3); font: inherit; font-size: calc(12px * var(--type-scale)); line-height: 1.55; }
.batch-import:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(67,214,161,.1); }
.batch-modal { width: min(100%, 1040px); max-height: calc(100vh - 28px); overflow-y: auto; overscroll-behavior: contain; }
.batch-quick-hint { margin: 0 0 12px; }
.batch-file-import { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: rgba(67,214,161,.04); }
.batch-file-import > label { color: var(--text); font-size: calc(12px * var(--type-scale)); font-weight: 600; }
.batch-file-import input[type="file"] { width: 100%; min-width: 0; color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.batch-file-import .form-hint { grid-column: 1 / -1; margin: 0; }
.batch-file-import .import-error { color: #f69a9d; }
.batch-guide { margin: 12px 0 14px; color: var(--muted); font-size: calc(11px * var(--type-scale)); line-height: 1.65; }
.batch-guide summary { cursor: pointer; color: var(--blue); }
.batch-guide ol { margin: 9px 0 5px 20px; padding: 0; }
.batch-guide p { margin: 5px 0 0; color: var(--faint); }
.batch-rows-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-3); }
.batch-rows-head, .batch-row { display: grid; grid-template-columns: 122px 150px 78px 86px 110px 145px 145px; gap: 7px; min-width: 900px; padding: 9px 10px; align-items: center; }
.batch-rows-head { color: var(--faint); border-bottom: 1px solid var(--border); font-size: calc(10px * var(--type-scale)); }
.batch-row + .batch-row { border-top: 1px solid rgba(166,185,202,.08); }
.batch-row input, .batch-row select { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 7px; padding: 8px; outline: none; color: var(--text); background: #111820; font-size: calc(11px * var(--type-scale)); }
.batch-row input:focus, .batch-row select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(67,214,161,.08); }
.batch-date-parts { display: flex; align-items: center; gap: 2px; }
.batch-date-parts input { width: 100%; min-width: 0; padding: 8px 3px; text-align: center; }
.batch-date-parts input:first-child { flex: 1.35; }
.batch-date-parts input:not(:first-child) { flex: .8; }
.batch-date-parts span { color: var(--faint); font-size: calc(10px * var(--type-scale)); }
.batch-add-row { margin-top: 10px; padding: 8px 11px; font-size: calc(11px * var(--type-scale)); }
.batch-paste-details { margin-top: 15px; color: var(--muted); font-size: calc(11px * var(--type-scale)); }
.batch-paste-details summary { cursor: pointer; color: var(--blue); }
.batch-paste-details label { display: block; margin-top: 10px; }
.batch-paste-details .batch-import { margin-top: 6px; }
.form-grid input#newEtfTicker { background: var(--panel-3); }
.form-hint { color: var(--faint); font-size: calc(10px * var(--type-scale)); line-height: 1.6; margin: 17px 0; }
.etf-refresh-hint { margin: 14px 0 4px; padding: 10px 12px; border: 1px solid rgba(114,169,255,.24); border-radius: 9px; color: var(--muted); background: rgba(114,169,255,.07); line-height: 1.7; }
.etf-refresh-hint strong { color: var(--text); }
.batch-preview { margin-top: 20px; }
.batch-preview-table { width: 100%; border-collapse: collapse; font-size: calc(10px * var(--type-scale)); }
.batch-preview-table th, .batch-preview-table td { border-bottom: 1px solid rgba(166,185,202,.15); padding: 9px 8px; white-space: nowrap; }
.batch-preview-table th { color: var(--faint); font-weight: 500; }
.batch-preview-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.batch-preview-table td:first-child, .batch-preview-table td:nth-child(6) { color: var(--muted); }
.batch-preview-table td:nth-child(2) { font-weight: 600; }
.batch-error-box { border: 1px solid var(--red); border-radius: 8px; padding: 12px; background: rgba(239,117,131,.08); color: #f69a9d; font-size: calc(11px * var(--type-scale)); margin-bottom: 14px; display: none; }
.batch-error-box.visible { display: block; }
.batch-error-box.batch-error { display: block; }
.batch-success-box { border: 1px solid var(--green); border-radius: 8px; padding: 12px; background: var(--green-soft); color: var(--green); font-size: calc(11px * var(--type-scale)); margin-bottom: 14px; display: none; }
.batch-success-box.visible { display: block; }
.batch-success-box.batch-success { display: block; }
.modal-actions { display: flex; justify-content: end; gap: 9px; padding-top: 15px; border-top: 1px solid var(--border); }

@media (max-width: 1050px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-grid { grid-template-columns: 1fr; }
  .dividend-info-grid { grid-template-columns: 1fr; }
  .calendar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .sidebar { position: fixed; z-index: 5; left: -250px; height: 100vh; transition: left .25s ease; }
  .sidebar.open { left: 0; box-shadow: 20px 0 60px rgba(0,0,0,.35); }
  .main-content { width: 100%; padding: 22px 15px 48px; }
  .mobile-menu { display: block; }
  .topbar { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px 8px; }
  .topbar > div:not(.topbar-actions) { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; }
  .topbar-actions { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .topbar-actions > button { white-space: nowrap; }
  .topbar-actions > button { min-height: 40px; line-height: 1.35; }
  .updated-label { display: none; }
  .primary-button { padding: 10px 12px; font-size: calc(12px * var(--type-scale)); }
  .demo-notice { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; line-height: 1.55; }
  .demo-notice .market-refresh-button { grid-column: 2; margin-left: 0; margin-top: 6px; justify-self: start; }
  .demo-notice .feedback-quick-button { grid-column: 2; margin-left: 0; margin-top: 0; justify-self: start; }
  .demo-notice #dismissNotice { grid-column: 3; grid-row: 1; }
  .trust-panel { margin: -8px 0 24px; padding: 15px; }
  .trust-panel-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .trust-panel-heading > button { width: 100%; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-panel-links { align-items: flex-start; flex-direction: column; gap: 8px; }
  .summary-grid, .report-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .summary-card { min-height: 125px; padding: 14px; }
  .card-value { font-size: calc(20px * var(--type-scale)); }
  .panel { padding: 16px; }
  .bar-chart { gap: 3px; }
  .calendar-grid { grid-template-columns: 1fr; }
  .dividend-info-controls { width: 100%; flex-wrap: wrap; }
  .dividend-info-controls select { flex: 1; min-width: 0; max-width: none; }
  .asset-scope-bar { align-items: flex-start; flex-direction: column; }
  .asset-scope-bar .ghost-button { width: 100%; }
  .dividend-info-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .income-goal-summary { grid-template-columns: 1fr; gap: 8px; }
  .income-goal-summary > div { padding: 12px 13px; }
  .income-goal-summary strong { font-size: calc(20px * var(--type-scale)); }
  .income-goal-disclaimer, .income-goal-data-note { font-size: calc(11px * var(--type-scale)); line-height: 1.7; }
  .income-goal-row { grid-template-columns: 28px minmax(0, 1fr); gap: 9px 10px; padding: 13px 12px; border: 1px solid rgba(166,185,202,.13); border-radius: 10px; background: var(--panel-3); }
  .income-goal-row .income-goal-asset, .income-goal-row .income-goal-stat, .income-goal-row .income-goal-capital { grid-column: 2; text-align: left; }
  .income-goal-row .income-goal-asset { padding-bottom: 8px; border-bottom: 1px solid rgba(166,185,202,.11); }
  .income-goal-asset strong { font-size: calc(14px * var(--type-scale)); line-height: 1.4; }
  .income-goal-asset span { font-size: calc(11px * var(--type-scale)); line-height: 1.5; }
  .income-goal-stat { padding: 8px 9px; border-radius: 7px; background: rgba(5,10,14,.2); }
  .income-goal-stat span, .income-goal-capital span { font-size: calc(11px * var(--type-scale)); }
  .income-goal-stat strong { font-size: calc(16px * var(--type-scale)); }
  .income-goal-stat small, .income-goal-capital small { font-size: calc(11px * var(--type-scale)); line-height: 1.5; }
  .income-goal-capital { padding-top: 2px; }
  .income-goal-capital strong { font-size: calc(19px * var(--type-scale)); }
  .income-plan-summary { grid-template-columns: 1fr 1fr; }
  .income-plan-row { grid-template-columns: 27px minmax(0, 1fr) 34px; }
  .income-plan-row label { grid-column: 2; }
  .income-plan-remove { grid-column: 3; grid-row: 1 / span 2; }
  .dividend-view-actions { justify-content: flex-start; }
  .price-alert-list { grid-template-columns: 1fr; }
  .push-preference-grid { grid-template-columns: 1fr; }
  .upcoming-dividend-main { align-items: flex-start; }
  .upcoming-dividend-main > strong { font-size: calc(24px * var(--type-scale)); }
  .upcoming-dividend-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .income-goal-controls { align-items: stretch; flex-direction: column; }
  .income-goal-controls input { width: 100%; }
  .income-plan-summary { grid-template-columns: 1fr; }
  .holdings-table { min-width: 650px; }
  .holdings-breakdown-head { display: none; }
  .holdings-breakdown-card { display: block; min-width: 0; }
  .holdings-breakdown-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .holdings-breakdown-card .holding-stat { text-align: left; }
  .holding-stat span { display: block; }
  .holdings-breakdown-asset { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 1px solid rgba(166,185,202,.08); }
  .holdings-breakdown-asset span { white-space: normal; line-height: 1.35; }
  .holdings-breakdown-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(166,185,202,.07); }
  .transactions-table { min-width: 860px; }
  .transactions-table th, .transactions-table td { white-space: nowrap; }
  .transactions-table td:nth-child(2) { white-space: normal; min-width: 145px; }
  .breakdown-row { min-width: 620px; }
  .view-header { align-items: start; gap: 12px; }
  .view-header, .panel-heading { flex-wrap: wrap; }
  .panel, .summary-card, .report-card, .price-alert-card, .income-goal-row, .income-plan-row { overflow-wrap: anywhere; }
  .account-grid { grid-template-columns: 1fr 1fr; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .site-footer nav { gap: 8px 12px; }
  .legal-dialog { width: min(100%, 560px); }
  .account-card { min-height: 85px; }
  .account-card ul { max-height: 100px; overflow-y: auto; }
  .account-card ul li { padding: 2px 0; }
  .account-card .form-hint { display: none; }
  .modal { width: min(100%, 420px); }
  .feedback-actions { align-items: stretch; flex-direction: column; }
  .feedback-form .primary-button { width: 100%; }
}
@media (max-width: 430px) {
  .summary-grid, .report-grid { grid-template-columns: 1fr; }
  .upcoming-dividend-card { padding: 15px; }
  .upcoming-dividend-main { display: grid; gap: 9px; }
  .upcoming-dividend-main > strong { font-size: calc(25px * var(--type-scale)); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.wide { grid-column: auto; }
  .topbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .topbar-actions > button { width: 100%; min-width: 0; padding: 9px 8px; }
  .topbar-actions > .theme-select { width: 100%; min-width: 0; min-height: 40px; padding: 9px 8px; }
  #accountButton { grid-column: 1 / -1; justify-content: flex-start; max-width: 100%; }
  #accountButton .avatar-label { max-width: 118px; }
  .holdings-table { min-width: 0; table-layout: fixed; }
  .holdings-breakdown-card { padding: 16px 0; }
  .holdings-breakdown-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .holdings-table th, .holdings-table td { padding: 11px 5px; font-size: calc(10px * var(--type-scale)); }
  .holdings-table th:first-child, .holdings-table td:first-child { width: 40%; }
  .holdings-table th:nth-child(2), .holdings-table td:nth-child(2) { width: 20%; }
  .holdings-table th:nth-child(3), .holdings-table td:nth-child(3) { width: 18%; }
  .holdings-table th:nth-child(4), .holdings-table td:nth-child(4) { width: 22%; }
  .holdings-table th:nth-child(2), .holdings-table td:nth-child(2),
  .holdings-table th:nth-child(3), .holdings-table td:nth-child(3),
  .holdings-table th:nth-child(4), .holdings-table td:nth-child(4) { white-space: nowrap; }
  .holdings-table th:nth-child(n+5), .holdings-table td:nth-child(n+5) { display: none; }
  .holdings-table .asset-cell { gap: 6px; }
  .holdings-table .asset-icon { width: 25px; height: 25px; flex: 0 0 25px; }
  .holdings-table .asset-cell span { white-space: normal; line-height: 1.25; }
  h1 { font-size: calc(24px * var(--type-scale)); }
}


/* 交易日期選單：預留箭頭空間，窄螢幕仍可完整顯示年月日。 */
.single-date-parts select { padding: 11px 22px 11px 7px; text-align: left; font-size: 13px; }

.single-date-parts select { padding-left: 6px; padding-right: 17px; font-size: 12px; }
.single-date-parts select:first-child { flex: 1.5; }

/* 日期獨占一列，避免手機上的原生選單壓縮文字。 */
#transactionForm .transaction-date-field { grid-column: 1 / -1; }
#transactionForm .single-date-parts { display: grid; grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
#transactionForm .single-date-parts select { width: 100%; min-width: 0; margin-top: 0; min-height: 44px; padding: 10px 26px 10px 12px; font-size: 16px; }

/* 批量日期選單保留可讀寬度，手機可水平捲動表格。 */
.batch-rows-head, .batch-row { grid-template-columns: 240px 150px 78px 86px 110px 145px 145px; min-width: 1116px; }
.batch-date-parts { display: grid; grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; }
.batch-date-parts select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 20px 8px 6px; font-size: 14px; }

.official-dividend-source { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; margin: 6px 0; overflow-wrap: anywhere; }
.official-dividend-source a { color: var(--blue); text-decoration: underline; }
.official-dividend-source small { display: block; font-size: 11px; }

/* 最新收盤行情：桌面獨立欄、手機商品右側 */
.holding-close-price { text-align: right; font-variant-numeric: tabular-nums; }
.holding-close-price strong { display: block; font-size: calc(14px * var(--type-scale)); font-weight: 600; }
.holding-close-price span { display: block; margin-top: 4px; font-size: calc(10px * var(--type-scale)); color: var(--muted); }
@media (max-width: 720px) {
  .holdings-breakdown-main .holdings-breakdown-asset { grid-column: 1; }
  .holdings-breakdown-main .holding-close-price { grid-column: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-bottom: 10px; border-bottom: 1px solid rgba(166,185,202,.08); }
  .holding-close-price strong { font-size: calc(18px * var(--type-scale)); }
  .holding-close-price span { font-size: calc(11px * var(--type-scale)); }
}

.sale-fields[hidden]{display:none!important}.sale-fields{display:grid;gap:10px}.sale-fields label{display:grid;gap:8px}.sale-fields .form-hint{margin:0 0 8px}

/* 手機交易表單過長時，讓遮罩可觸控捲動到最下方操作按鈕。 */
@media (max-width: 720px) {
  .modal-backdrop {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  }
  .modal { width: min(100%, 420px); margin: 0 auto; touch-action: pan-y pinch-zoom; }
}

.auth-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.auth-methods[hidden]{display:none}.auth-method-card{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface,var(--panel))}.auth-method-card h3{margin:0 0 10px;font-size:16px}.auth-method-card p,.auth-method-card small{color:var(--muted);line-height:1.6}.auth-method-card small{display:block;margin-top:10px}.auth-method-card button{min-height:44px;width:100%;white-space:normal}.auth-method-card button:disabled{opacity:.65;cursor:not-allowed}.auth-google-explanation{padding:14px;border:1px solid var(--border);border-radius:12px;margin:12px 0;line-height:1.7}.auth-google-explanation summary{cursor:pointer;font-weight:600;min-height:32px}.auth-google-explanation ul{padding-left:20px;color:var(--muted)}.auth-google-explanation li{margin:12px 0}.auth-support button{min-height:44px}@media(max-width:540px){.auth-methods{grid-template-columns:1fr}}

/* 登入視窗：寬螢幕並列，窄螢幕上下排列，保持說明可讀。 */
.auth-dialog { width: min(100%, 700px); }
.auth-methods { gap: 18px; margin: 22px 0; }
.auth-method-card { display: flex; flex-direction: column; padding: 22px; }
.auth-method-card h3 { margin: 0 0 12px; font-size: calc(17px * var(--type-scale)); line-height: 1.5; }
.auth-method-card p { flex: 1; margin: 0 0 20px; font-size: calc(14px * var(--type-scale)); line-height: 1.85; }
.auth-method-card small { margin-top: 14px; font-size: calc(12px * var(--type-scale)); line-height: 1.85; }
.auth-method-card button { flex-shrink: 0; padding: 12px 16px; line-height: 1.6; }
.auth-google-explanation { padding: 18px; }
.auth-google-explanation summary { line-height: 1.8; }
@media (max-width: 640px) {
  .auth-methods { grid-template-columns: 1fr; gap: 14px; }
  .auth-method-card { padding: 20px; }
  .auth-method-card p { margin-bottom: 16px; }
}