/* Auto-extracted ex-inline styles. Maintained by
 * scripts/migrate_inline_styles_phase_e.py. Selectors use
 * data-s='<page>-<N>' to avoid colliding with existing class/id
 * attributes on the same element. Append-only: hand-edit to
 * promote a rule into a semantic class in main.css, but don't
 * rely on the script to regenerate from scratch. */

[data-s="admin-1"] { max-width:900px;margin:0 auto }
[data-s="admin-2"] { font-size:12px;margin-bottom:20px;line-height:1.6 }
[data-s="admin-3"] { display:flex;flex-direction:column;gap:10px }
[data-s="admin-4"] { padding:2px 10px;border-radius:999px }
[data-s="admin-5"] { margin-left:auto;color:var(--text-muted);font-size:12px }
[data-s="admin-6"] { font-size:11px;cursor:pointer;text-transform:uppercase;letter-spacing:0.5px }
[data-s="admin-7"] { white-space:pre-wrap;padding:16px;font-family:ui-monospace,monospace }
[data-s="base-1"] { font-size:13px;text-decoration:none }
[data-s="base-2"] { vertical-align:-3px;margin-right:6px }
[data-s="base-3"] { display:flex;gap:6px;align-items:center;position:relative }
[data-s="base-4"] { position:fixed;top:48px }
[data-s="base-5"] { padding:10px 14px;border-bottom:0.5px solid var(--border);display:flex;gap:10px;align-items:center }
[data-s="base-6"] { width:32px;height:32px;border-radius:50% }
[data-s="base-7"] { width:32px;height:32px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px }
[data-s="base-8"] { min-width:0 }
[data-s="base-9"] { font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
[data-s="base-10"] { font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
[data-s="base-11"] { display:flex;justify-content:center;padding:4px 0 8px }
[data-s="base-12"] { width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.2) }
/* Demo "Sign up to save your data" CTA — replaces the avatar+email block
   in the More dropdown / bottom-more popup. Two variants because the
   desktop dropdown styles `.more-dropdown a` (8px 12px padding) and the
   mobile popup styles bottom-more entries (38px min-height + icon row).
   Inner spans set their own colors via data-s rules to override the
   parent <a>'s color inherited from .more-dropdown a / .bottom-more-popup a. */
[data-s="demo-cta"] { padding:10px 14px !important;border-bottom:0.5px solid var(--border);display:flex !important;flex-direction:column;gap:2px;text-decoration:none }
[data-s="demo-cta-mobile"] { padding:12px 16px !important;border-bottom:0.5px solid var(--border);display:flex !important;flex-direction:column;gap:2px;text-decoration:none;min-height:auto !important }
[data-s="demo-cta-eyebrow"] { font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:500 }
[data-s="demo-cta-action"] { font-size:13px;font-weight:600;color:var(--accent) }
[data-s="cashflow-1"] { display:flex;align-items:center;gap:8px }
[data-s="cashflow-2"] { width:16px;height:16px }
[data-s="cashflow-5"] { width:110px }
[data-s="cashflow-6"] { padding:4px 8px;font-size:10px }
[data-s="cashflow-7"] { font-weight:600;border-top:2px solid var(--border) }
[data-s="cashflow-8"] { color:var(--green) }
[data-s="cashflow-9"] { width:100px }
[data-s="cashflow-10"] { font-size:11px;margin-bottom:8px }
[data-s="cashflow-11"] { display:flex;gap:2px;background:var(--surface2);border-radius:6px;padding:2px }
[data-s="cashflow-12"] { max-width:520px }
[data-s="cashflow-13"] { margin-top:12px;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px }
[data-s="cashflow-18"] { opacity:0.4;border-left:2px dashed var(--accent) }
[data-s="cashflow-19"] { opacity:0.55 }
[data-s="cashflow-20"] { font-size:10px;background:rgba(108,142,245,0.15);color:var(--accent);padding:1px 6px;border-radius:3px }
[data-s="cashflow-21"] { font-size:10px;background:rgba(245,166,35,0.2);color:#f5a623;padding:1px 6px;border-radius:3px }
[data-s="cashflow-23"] { color:var(--green);margin-right:3px }
[data-s="cashflow-24"] { width:90px;padding:4px 6px;font-size:12px;text-align:right;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font) }
[data-s="cashflow-25"] { width:50px;padding:4px 6px;font-size:12px;text-align:right;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font) }
[data-s="cashflow-26"] { background:rgba(52,211,153,0.15);color:var(--green);padding:2px 8px;border-radius:4px;font-size:10px }
[data-s="cashflow-27"] { background:rgba(148,163,184,0.15);color:var(--text-muted);padding:2px 8px;border-radius:4px;font-size:10px }
[data-s="cashflow-28"] { font-size:11px;text-transform:none;display:inline-flex;align-items:center;gap:4px;cursor:pointer }
[data-s="cashflow-29"] { width:auto }
[data-s="cashflow-30"] { width:80px;padding:3px 5px;font-size:11px;text-align:right;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font) }
[data-s="cashflow-31"] { font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px }
[data-s="cashflow-32"] { display:flex;gap:12px;flex-wrap:wrap }
[data-s="cashflow-33"] { flex:1;min-width:140px }
[data-s="cashflow-34"] { flex:1;min-width:130px }
[data-s="cashflow-35"] { width:60px;padding:2px 4px;font-size:11px;text-align:right;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text) }
[data-s="cashflow-36"] { flex:1;min-width:150px }
[data-s="cashflow-37"] { width:65px;padding:2px 4px;font-size:11px;text-align:right;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text) }
[data-s="cashflow-38"] { ' + style + ' }
[data-s="cashflow-40"] { font-size:12px;margin-bottom:0 }
[data-s="cashflow-41"] { border-top:2px solid var(--border) }
[data-s="cashflow-42"] { border-top:0.5px solid var(--border);margin-top:16px;padding-top:16px }
[data-s="cashflow-45"] { flex:1;min-width:200px;font-size:12px }
[data-s="cashflow-46"] { border-top:1px solid var(--border);display:flex;justify-content:space-between;padding:3px 0;font-weight:600 }
[data-s="cashflow-47"] { display:flex;justify-content:space-between;padding:3px 0;font-weight:600 }
[data-s="cashflow-48"] { border-top:2px solid var(--border);display:flex;justify-content:space-between;padding:4px 0;font-weight:700 }
[data-s="cashflow-49"] { min-width:140px;text-align:center;padding:16px;background:var(--surface2);border-radius:12px }
[data-s="cashflow-50"] { font-size:10px;color:var(--text-muted);margin-bottom:4px }
[data-s="cashflow-51"] { font-size:10px;color:var(--text-muted);margin-top:4px }
[data-s="cashflow-53"] { color:#f59e0b;font-size:10px;font-weight:600 }
[data-s="cashflow-54"] { color:' + (annualSavings >= 0 ? 'var(--green)' : 'var(--red)') + ' }
[data-s="cashflow-55"] { color:' + (savingsRate >= 30 ? 'var(--green)' : savingsRate >= 15 ? 'var(--yellow)' : 'var(--red)') + ' }
[data-s="holdings-1"] { font-size:10px;font-weight:600 }
[data-s="holdings-7"] { font-size:11px;color:var(--text-muted) }
[data-s="holdings-8"] { margin-left:auto }
[data-s="holdings-9"] { text-align:center;color:var(--text-muted);padding:32px }
[data-s="holdings-10"] { vertical-align:-1px;margin-right:2px }
[data-s="home-1"] { display:flex;align-items:center;gap:12px;flex-wrap:wrap }
[data-s="home-2"] { padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);cursor:pointer }
[data-s="home-3"] { text-align:center;padding:40px;color:var(--text-muted) }
[data-s="home-4"] { display:inline-block;width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite }
[data-s="home-5"] { cursor:pointer;padding:12px 16px;font-size:13px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center }
[data-s="home-6"] { padding:16px;border-top:none;border-radius:0 0 8px 8px;margin-top:-1px }
[data-s="home-7"] { display:flex;align-items:center;gap:10px }
[data-s="home-8"] { flex-shrink:0 }
[data-s="home-10"] { font-size:9px }
[data-s="home-11"] { font-size:10px;margin-bottom:6px }
[data-s="home-12"] { display:flex;gap:16px;flex-wrap:wrap;font-size:13px }
[data-s="home-14"] { padding:10px 16px;flex:1;min-width:0 }
[data-s="home-15"] { background:var(--surface2);border-radius:6px;height:10px;overflow:hidden;position:relative }
[data-s="home-16"] { height:100%;border-radius:6px;transition:width 0.5s;width:0% }
[data-s="home-17"] { font-size:13px;font-weight:700;white-space:nowrap }
[data-s="home-18"] { font-size:11px }
[data-s="home-20"] { display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px }
[data-s="home-21"] { width:170px;height:170px;flex-shrink:0 }
[data-s="home-22"] { flex-direction:column;gap:4px }
[data-s="home-23"] { display:flex;flex-direction:column;overflow:hidden }
[data-s="home-25"] { width:60px;vertical-align:middle }
[data-s="home-27"] { margin:0;font-size:13px;font-weight:600 }
[data-s="home-28"] { display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px }
/* Mobile: stack the 3 FIRE Life Projection sliders vertically AND
 * place each label inline-left of its slider. The pure-vertical stack
 * (label above slider) ate ~60px per row × 3 = 180px before the chart;
 * the inline-left layout drops that to ~36px × 3 = 108px while still
 * giving the slider track ~200-220px (vs the original ~80px wrap-3-up
 * disaster). Label flex-basis sized for the widest TW label
 * ("財務自由年齡: NN" ≈ 110px at fs-10). */
@media (max-width: 600px) {
  [data-s="home-28"] { flex-direction: column; gap: 6px; }
  [data-s="home-28"] > div {
    display: flex; align-items: center; gap: 10px;
  }
  [data-s="home-28"] > div > label {
    flex: 0 0 110px; margin: 0; white-space: nowrap;
  }
  [data-s="home-28"] > div > input[type="range"] {
    flex: 1; min-width: 0;
  }
}
[data-s="home-29"] { position:relative;height:300px }
[data-s="home-30"] { margin-bottom:4px;font-size:13px;font-weight:600 }
[data-s="home-31"] { font-size:9px;text-align:center;margin-top:2px }
[data-s="home-32"] { display:block }
[data-s="home-33"] { color:var(--text);text-decoration:none }
[data-s="home-34"] { background:' + (typeColorMap[d.key]||'#888') + ' }
[data-s="home-35"] { margin-left:auto;font-size:11px }
[data-s="home-36"] { font-size:11px;font-weight:600;color:var(--accent);margin-bottom:6px }
[data-s="home-37"] { display:flex;gap:6px;margin-bottom:4px;font-size:12px }
[data-s="home-38"] { color:var(--accent);flex-shrink:0 }
[data-s="home-39"] { display:flex;gap:6px;font-size:12px }
[data-s="home-42"] { display:flex;gap:6px;margin-bottom:3px;font-size:12px }
[data-s="home-43"] { color:var(--red);flex-shrink:0 }
[data-s="home-44"] { color:#22c55e }
[data-s="home-45"] { color:' + fireColor + ' }
[data-s="insurance-2"] { width:24px;height:24px;margin:0 auto 8px }
[data-s="insurance-3"] { display:flex;align-items:baseline;gap:8px;flex-wrap:wrap }
[data-s="insurance-4"] { font-size:22px;font-weight:700;color:var(--accent) }
[data-s="insurance-5"] { font-size:12px;margin-left:8px }
[data-s="insurance-6"] { font-size:11px;margin-left:auto }
[data-s="insurance-7"] { font-size:10px;margin-top:4px }
[data-s="insurance-8"] { background:var(--surface2) }
[data-s="insurance-9"] { font-size:12px;font-weight:600;padding:8px }
[data-s="insurance-10"] { font-weight:400;margin-left:8px;font-size:11px }
[data-s="insurance-11"] { ' + (isRider ? 'padding-left:24px;' : '') + ' }
[data-s="insurance-12"] { color:var(--accent);text-decoration:none;font-weight:' + (isRider ? '400' : '600') + ' }
[data-s="insurance-13"] { font-weight:400;margin-left:8px;text-transform:none;letter-spacing:0 }
[data-s="insurance-14"] { border-color:var(--accent) }
[data-s="insurance-15"] { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px }
[data-s="insurance-16"] { font-size:16px;font-weight:700;line-height:1.3 }
[data-s="insurance-17"] { display:flex;gap:6px;margin-top:6px;flex-wrap:wrap }
[data-s="insurance-18"] { font-size:11px;background:var(--accent-dim);color:var(--accent);padding:2px 8px;border-radius:4px }
[data-s="insurance-19"] { font-size:11px;background:var(--surface2);color:var(--text-muted);padding:2px 8px;border-radius:4px }
[data-s="insurance-20"] { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:12px;margin-bottom:12px }
[data-s="insurance-21"] { padding:12px;border:1px solid var(--border);border-radius:8px }
[data-s="insurance-22"] { font-size:11px;color:var(--text-muted);padding:6px 0;margin-top:6px;border-top:1px dashed var(--border);white-space:pre-wrap }
[data-s="insurance-23"] { display:flex;justify-content:space-between;padding:6px 0;' + (i > 0 ? 'border-top:1px solid var(--border);margin-top:4px' : '') + ' }
[data-s="insurance-24"] { font-weight:600;font-size:13px }
[data-s="insurance-25"] { font-weight:600;font-size:13px;color:var(--accent) }
[data-s="insurance-26"] { display:flex;justify-content:space-between;padding:2px 0;padding-left:16px }
[data-s="insurance-27"] { display:flex;justify-content:space-between;padding:4px 0 }
[data-s="login-1"] { display:block;margin-bottom:6px }
[data-s="onboarding-4"] { border-top:1px dashed var(--border) }
[data-s="onboarding-5"] { margin-bottom:10px;padding:14px 16px;background:var(--surface2) }
[data-s="onboarding-6"] { font-weight:400;font-size:11px;margin-left:6px }
[data-s="onboarding-11"] { flex:0 0 80px }
[data-s="properties-1"] { max-width:600px;max-height:80vh;overflow:auto }
[data-s="properties-2"] { display:grid;grid-template-columns:1fr 4fr;gap:16px }
[data-s="properties-3"] { display:flex;flex-direction:column;gap:8px }
[data-s="properties-4"] { overflow:hidden;padding:14px;display:flex;flex-direction:column }
[data-s="properties-6"] { width:80px;vertical-align:middle }
[data-s="properties-8"] { display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch }
[data-s="properties-10"] { display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap }
[data-s="properties-13"] { display:flex;gap:24px;flex-wrap:wrap;align-items:center }
[data-s="properties-14"] { width:260px;flex-shrink:0 }
[data-s="properties-15"] { height:260px }
[data-s="properties-16"] { min-width:200px }
[data-s="properties-17"] { font-weight:700;border-top:2px solid var(--border) }
[data-s="properties-18"] { display:grid;gap:8px;margin-bottom:16px }
[data-s="properties-19"] { font-size:15px;font-weight:700;color:var(--accent) }
[data-s="properties-20"] { font-size:15px;font-weight:700;color:var(--red) }
[data-s="properties-23"] { height:180px;position:relative;overflow:hidden }
[data-s="properties-24"] { font-size:9px;text-align:right;margin-top:2px }
[data-s="properties-25"] { height:120px;margin-top:6px;overflow:hidden }
[data-s="properties-26"] { margin-top:20px;padding-top:16px;border-top:1px solid var(--border) }
[data-s="properties-27"] { font-size:11px;margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px }
[data-s="properties-28"] { display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px }
[data-s="properties-30"] { flex:1;min-width:0;max-width:100%;overflow-x:auto }
[data-s="properties-31"] { flex:1;min-width:250px }
[data-s="properties-32"] { margin-top:10px;font-size:12px;display:flex;gap:16px;flex-wrap:wrap }
[data-s="properties-33"] { font-size:11px;margin-top:8px }
[data-s="properties-36"] { cursor:pointer;background:var(--surface2) }
[data-s="properties-37"] { padding-left:24px;font-size:12px;color:var(--text-muted) }
[data-s="properties-38"] { font-size:16px }
[data-s="properties-39"] { display:flex;gap:8px;margin-top:12px }
[data-s="properties-40"] { font-size:12px;' + (diff ? 'color:var(--green);font-weight:600' : '') + ' }
[data-s="properties-41"] { display:flex;gap:16px;flex-wrap:wrap }
[data-s="properties-46"] { display:flex;justify-content:space-between;margin-top:4px }
[data-s="properties-49"] { font-size:12px;color:var(--text-muted) }
[data-s="properties-50"] { width:100%;background:var(--surface2);border-radius:8px }
[data-s="properties-51"] { italic }
[data-s="reports-1"] { display:flex;gap:8px;align-items:center }
[data-s="reports-2"] { max-height:calc(100vh - 240px);overflow-y:auto }
[data-s="reports-3"] { min-height:400px }
[data-s="reports-4"] { display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;color:var(--text-muted) }
[data-s="reports-5"] { margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border) }
[data-s="reports-6"] { display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap }
[data-s="reports-7"] { font-weight:600;font-size:15px }
[data-s="reports-8"] { font-size:12px;color:var(--text-muted);margin-top:4px }
[data-s="reports-9"] { display:flex;gap:6px;flex-wrap:wrap }
[data-s="reports-10"] { color:var(--red) }
[data-s="reports-11"] { text-align:center;padding:40px }
[data-s="reports-12"] { width:32px;height:32px;margin:0 auto 12px }
[data-s="reports-13"] { font-size:12px;margin-top:8px }
[data-s="reports-14"] { font-size:14px;margin-top:12px;color:var(--accent) }
[data-s="reports-15"] { font-size:12px;padding:8px }
[data-s="reports-16"] { font-weight:500 }
[data-s="settings-1"] { max-width:720px;margin:0 auto }
[data-s="settings-2"] { display:grid;gap:12px;margin-top:10px }
[data-s="settings-3"] { text-align:right;margin-top:6px }
[data-s="settings-4"] { font-size:12px;margin-top:4px;margin-bottom:10px }
[data-s="settings-5"] { display:inline-flex;gap:4px;background:var(--surface2);border-radius:var(--radius-sm);padding:4px }
[data-s="settings-6"] { max-width:420px }
[data-s="settings-7"] { padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-dim) }
[data-s="settings-9"] { margin-top:12px;padding:12px 14px;background:var(--surface2);border-radius:8px;font-size:13px;line-height:1.6 }
[data-s="settings-10"] { margin-top:16px;padding-top:16px;border-top:0.5px solid var(--border) }
[data-s="settings-11"] { font-size:12px;margin-bottom:10px;line-height:1.5 }
[data-s="settings-12"] { background:var(--surface2);padding:1px 6px;border-radius:4px }
[data-s="settings-14"] { font-size:12px;margin-top:10px }
[data-s="settings-15"] { max-width:560px }
[data-s="settings-16"] { font-size:11px;margin-bottom:10px }
[data-s="settings-17"] { display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 0 }
[data-s="settings-18"] { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:8px 0 }
[data-s="settings-19"] { display:grid;grid-template-columns:2fr 1fr;gap:10px;padding:8px 0 }
[data-s="settings-21"] { margin-top:12px }
[data-s="settings-22"] { margin-top:14px;padding-top:14px;border-top:0.5px solid var(--border) }
[data-s="settings-25"] { display:flex;gap:8px;margin-top:12px;flex-wrap:wrap }
[data-s="settings-26"] { color:var(--red);border-color:rgba(248,113,113,0.4) }
[data-s="settings-27"] { font-size:11px;margin-top:6px;line-height:1.5 }
[data-s="settings-28"] { font-size:12px;font-weight:600;color:var(--accent);margin-bottom:6px }
[data-s="settings-29"] { padding:12px 14px;background:var(--surface2);display:flex;align-items:center;gap:12px;margin-bottom:6px }
[data-s="settings-32"] { color:var(--red);font-weight:600 }
[data-s="settings-33"] { align-items:center;margin-bottom:6px }
[data-s="settings-34"] { height:6px;background:var(--surface);border-radius:3px;overflow:hidden }
[data-s="settings-35"] { padding:2px 10px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:0.4px }
[data-s="settings-37"] { font-size:11px;padding:0 8px }
[data-s="vehicles-3"] { grid-column:span 2;text-align:center;padding:32px;color:var(--text-muted) }
[data-s="vehicles-4"] { gap:12px;margin-bottom:12px }
[data-s="vehicles-5"] { font-size:12px;margin-bottom:8px }
[data-s="vehicles-6"] { display:flex;flex-direction:column;gap:4px;font-size:13px }
[data-s="vehicles-7"] { border-top:1px solid #2e3347;padding-top:6px;margin-top:4px }
