:root {
  --bg: #071713;
  --panel: rgba(12, 34, 28, 0.92);
  --panel-soft: rgba(255, 255, 255, 0.045);
  --text: #f6f5ef;
  --muted: #9fb1aa;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #54e0b4;
  --accent-2: #2bb991;
  --warm: #e7dcc4;
  --debt: #5e746d;
  --scheme: #8b826f;
  --warning: #ffc37a;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 5%, rgba(84, 224, 180, 0.12), transparent 28%),
    radial-gradient(circle at 10% 0%, rgba(231, 220, 196, 0.08), transparent 24%),
    linear-gradient(180deg, #061410 0%, #0a1c17 48%, #071713 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 0 max(40px, env(safe-area-inset-bottom)); }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:14px; }
.brand { margin:0 0 4px; font-weight:800; letter-spacing:.01em; }
.brand span { color:var(--muted); font-size:11px; margin-left:6px; }
.topline { margin:0; color:var(--muted); font-size:14px; }
.save-status { color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:8px 11px; font-size:12px; background:rgba(255,255,255,.025); white-space:nowrap; }

.hero-panel,.panel { border:1px solid var(--border); box-shadow:none; }
.hero-panel {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); gap:18px; align-items:stretch;
  padding:24px; border-radius:28px; background:linear-gradient(135deg,rgba(9,31,25,.98),rgba(11,39,32,.95));
}
.kicker,.eyebrow { margin:0 0 6px; color:var(--accent); text-transform:uppercase; font-size:11px; font-weight:850; letter-spacing:.12em; }
h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(48px,7vw,78px); font-weight:500; line-height:.95; letter-spacing:-.055em; }
h2 { margin:0; font-size:19px; letter-spacing:-.02em; }
.hero-date { margin:10px 0 0; color:var(--muted); font-weight:650; }
.hero-balance-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:22px; }
.hero-balance-row>div,.home-stats>div,.interest-box,.chart-stat { background:var(--panel-soft); border:1px solid var(--border); border-radius:14px; padding:12px; }
.hero-balance-row span,.home-stats span,.interest-box span,.chart-stat span,.home-value span { display:block; color:var(--muted); font-size:12px; }
.hero-balance-row strong { display:block; margin-top:3px; font-size:19px; }
.hero-progress-card { display:flex; flex-direction:column; justify-content:center; padding:18px; border-radius:20px; background:rgba(255,255,255,.035); border:1px solid var(--border); }
.hero-progress-copy strong { display:block; font-family:Georgia,"Times New Roman",serif; font-size:42px; font-weight:500; margin-top:2px; }
.hero-progress-copy span,.hero-progress-copy small { color:var(--muted); }
.hero-progress-copy small { display:block; margin-top:4px; line-height:1.4; }
.progress-track,.timeline-track { height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.progress-track { margin-top:16px; }
.progress-fill,.timeline-fill { height:100%; width:0; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:inherit; transition:width .25s ease; }
.hero-scenario { margin-top:14px; color:var(--warm); font-size:13px; line-height:1.45; }

.panel { background:var(--panel); backdrop-filter:blur(18px); border-radius:22px; padding:19px; }
.scenario-panel { margin-top:16px; }
.scenario-top { display:flex; justify-content:space-between; gap:18px; align-items:end; }
.scenario-top h2 span { color:var(--accent); }
.scenario-summary { color:var(--warm); text-align:right; font-size:14px; font-weight:700; max-width:420px; }
.range { width:100%; accent-color:var(--accent); margin:18px 0 12px; }
.scenario-chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
button,.custom-chip { min-height:42px; border:1px solid var(--border); border-radius:999px; padding:9px 14px; background:rgba(255,255,255,.04); color:var(--text); font-weight:750; }
button { cursor:pointer; }
button.active { background:var(--accent); color:#062018; border-color:transparent; }
.custom-chip { display:flex; align-items:center; gap:4px; color:var(--muted); }
.custom-chip input { width:68px; border:0; outline:0; color:var(--text); background:transparent; padding:0; }

.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:16px; margin-top:16px; }
.panel-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.ownership-badge { color:var(--warm); border:1px solid var(--border); border-radius:999px; padding:7px 10px; font-size:12px; }
.ownership-bar { display:flex; width:100%; height:18px; overflow:hidden; border-radius:999px; margin-top:22px; background:rgba(255,255,255,.06); border:1px solid var(--border); }
.ownership-segment { width:0; transition:width .25s ease; }
.ownership-segment.debt { background:var(--debt); }
.ownership-segment.equity { background:var(--accent); }
.ownership-segment.scheme { background:var(--scheme); }
.ownership-legend { display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:10px; color:var(--muted); font-size:12px; }
.ownership-legend strong { color:var(--text); margin-left:4px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.debt-dot { background:var(--debt); }.equity-dot { background:var(--accent); }.scheme-dot { background:var(--scheme); }
.home-value { margin-top:22px; }
.home-value strong { display:block; margin-top:4px; font-family:Georgia,"Times New Roman",serif; font-size:42px; font-weight:500; letter-spacing:-.04em; }
.home-value small { display:block; margin-top:5px; color:var(--muted); }
.home-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.home-stats strong { display:block; margin-top:4px; font-size:17px; }
.next-panel { display:flex; flex-direction:column; }
.next-event-text { color:var(--muted); margin:8px 0 16px; line-height:1.5; }
.timeline-track { margin-top:4px; }
.timeline-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; margin-top:6px; }
.interest-box { margin-top:auto; }
.interest-box strong { display:block; margin-top:4px; font-size:28px; }
.interest-box small { display:block; margin-top:7px; color:var(--muted); line-height:1.4; }

.chart-panel { margin-top:16px; }
.chart-stat { min-width:130px; text-align:right; }
.chart-stat strong { display:block; margin-top:4px; font-size:18px; }
.subtle { margin:5px 0 0; color:var(--muted); font-size:13px; }
.chart-wrap { width:100%; margin-top:14px; }
canvas { display:block; max-width:100%; background:rgba(3,16,13,.55); border:1px solid var(--border); border-radius:18px; }
.legend { display:flex; flex-wrap:wrap; gap:18px; margin-top:10px; color:var(--muted); font-size:12px; }
.dot.current { background:#a8b4b0; }.dot.overpay { background:var(--accent); }

.edit-panel { margin-top:16px; padding:0; overflow:hidden; }
.edit-panel summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; }
.edit-panel summary::-webkit-details-marker { display:none; }
.edit-panel summary strong { display:block; }.edit-panel summary small { display:block; color:var(--muted); margin-top:3px; }
.summary-plus { color:var(--accent); font-size:24px; transition:transform .2s ease; }.edit-panel[open] .summary-plus { transform:rotate(45deg); }
.edit-content { border-top:1px solid var(--border); padding:20px; }
.inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
label { color:var(--muted); font-size:12px; }
input[type="number"],input[type="month"],input[type="text"],.setup-home-profile-fields select,.projection-assumptions select { width:100%; margin-top:6px; padding:12px 13px; border-radius:12px; border:1px solid var(--border); background:rgba(3,16,13,.62); color:var(--text); font:inherit; font-size:16px; font-weight:500; line-height:1.25; color-scheme:dark; box-sizing:border-box; }
input:focus { outline:2px solid rgba(84,224,180,.45); outline-offset:1px; }
.field-note { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.warning { color:var(--warning); font-size:13px; margin-bottom:0; }
.footer { margin-top:16px; color:var(--muted); font-size:11px; line-height:1.5; }

@media (max-width:900px) {
  .hero-panel,.dashboard-grid { grid-template-columns:1fr; }
  .inputs { grid-template-columns:1fr 1fr; }
}
@media (max-width:650px) {
  .app-shell { width:min(100% - 18px,1180px); padding-top:12px; }
  .topbar { display:block; }.save-status { display:inline-block; margin-top:9px; }
  .hero-panel,.panel { border-radius:19px; }
  .hero-panel { padding:17px; gap:14px; }
  h1 { font-size:clamp(46px,14vw,64px); }
  .hero-balance-row { grid-template-columns:1.25fr 1fr 1fr; margin-top:18px; }
  .hero-balance-row>div { padding:10px; }
  .hero-balance-row strong { font-size:16px; }
  .hero-progress-card { padding:14px; }
  .hero-progress-copy { display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; }
  .hero-progress-copy strong { font-size:34px; grid-row:1 / span 2; grid-column:2; }
  .scenario-top { display:block; }.scenario-summary { text-align:left; margin-top:8px; }
  .scenario-panel { padding:16px; }
  .home-stats { grid-template-columns:1fr 1fr; }.home-stats>div:first-child { grid-column:1 / -1; }
  .panel-heading { align-items:flex-start; }
  .chart-stat { min-width:0; }
  .inputs { grid-template-columns:1fr; }
}
@media (max-width:390px) {
  .hero-balance-row,.home-stats { grid-template-columns:1fr; }
  .home-stats>div:first-child { grid-column:auto; }
  .panel-heading { display:block; }.ownership-badge,.chart-stat { display:inline-block; margin-top:10px; text-align:left; }
  .home-value strong { font-size:38px; }
}