/* Premium visual pass */
:root{
  --bg:#06110f;
  --panel:rgba(11,28,23,.82);
  --panel-deep:rgba(7,22,18,.94);
  --panel-raised:rgba(18,42,34,.88);
  --panel-soft:rgba(255,255,255,.035);
  --text:#f4f1e8;
  --muted:#9aa9a3;
  --muted-2:#74847e;
  --border:rgba(217,236,226,.095);
  --border-strong:rgba(107,225,188,.22);
  --accent:#68deb9;
  --accent-2:#36b88f;
  --warm:#e8d9bc;
  --warm-soft:#c9b995;
}

html{background:#06110f}
body{
  background:
    radial-gradient(900px 480px at 80% -80px,rgba(73,189,151,.11),transparent 62%),
    radial-gradient(760px 420px at 0% 8%,rgba(211,188,139,.055),transparent 64%),
    linear-gradient(180deg,#071410 0%,#06110f 58%,#050d0b 100%);
  color:var(--text);
}

.app-shell{width:min(1200px,calc(100% - 38px));padding-top:24px;padding-bottom:56px}
.topbar{margin-bottom:22px;align-items:center}
.brand{font-size:15px;letter-spacing:.02em}
.brand::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:9px;box-shadow:0 0 0 5px rgba(104,222,185,.08)}
.topline{font-size:13px;color:var(--muted-2)}
.save-status{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.07);color:var(--muted-2);padding:7px 11px}

.hero-panel,.panel{
  border-color:var(--border);
  box-shadow:
    0 1px 0 rgba(255,255,255,.018) inset,
    0 26px 70px rgba(0,0,0,.20);
}
.hero-panel{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:28px;
  gap:22px;
  background:
    radial-gradient(520px 240px at 10% 0%,rgba(104,222,185,.045),transparent 70%),
    linear-gradient(135deg,rgba(8,27,22,.98),rgba(11,35,29,.93));
}
.hero-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 32%,transparent 72%,rgba(104,222,185,.018));
}
.hero-main,.hero-progress-card{position:relative;z-index:1}
.kicker,.eyebrow{font-size:10px;letter-spacing:.17em;color:var(--accent);font-weight:850}
h1{
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-size:clamp(58px,7vw,86px);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.058em;
  text-wrap:balance;
}
h2{font-size:18px;letter-spacing:-.025em;font-weight:760}
.hero-date{margin-top:12px;color:#aeb9b4;font-size:15px}

.hero-balance-row{gap:10px;margin-top:24px}
.hero-balance-row>div,
.home-stats>div,
.interest-box,
.chart-stat,
.market-comparison>div,
.deep-stat,
.target-box,
.property-cost-card,
.equity-growth-card{
  background:linear-gradient(180deg,rgba(255,255,255,.041),rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.075);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
.hero-balance-row>div{border-radius:16px;padding:13px 14px;min-height:76px}
.hero-balance-row span,.home-stats span,.interest-box span,.chart-stat span,.home-value span{color:#9ca9a4;font-size:11px;letter-spacing:.015em}
.hero-balance-row strong{font-size:19px;margin-top:5px;letter-spacing:-.015em}

.hero-progress-card{
  border-radius:22px;
  padding:22px;
  border-color:rgba(255,255,255,.075);
  background:
    linear-gradient(180deg,rgba(255,255,255,.044),rgba(255,255,255,.024));
}
.hero-progress-copy strong,
.home-value strong{
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  letter-spacing:-.045em;
}
.hero-progress-copy strong{font-size:46px}
.progress-track,.timeline-track{height:8px;background:rgba(255,255,255,.07)}
.progress-fill,.timeline-fill{background:linear-gradient(90deg,#3fb991,#72e0bd)}

.panel{
  border-radius:24px;
  padding:22px;
  background:
    linear-gradient(180deg,rgba(15,35,29,.88),rgba(9,26,21,.90));
  backdrop-filter:blur(20px) saturate(115%);
}
.scenario-panel,.chart-panel,.dashboard-grid{margin-top:18px}
.dashboard-grid{gap:18px}

.expandable-card:not(.is-expanded){transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
@media (hover:hover) and (pointer:fine){
  .expandable-card:not(.is-expanded):hover{
    transform:translateY(-2px);
    border-color:rgba(104,222,185,.22);
    box-shadow:0 30px 80px rgba(0,0,0,.25),0 0 0 1px rgba(104,222,185,.035) inset;
  }
}

.current-savings-summary strong{font-size:26px!important;letter-spacing:-.03em}
.current-savings-summary small{color:var(--warm-soft)!important}
.compact-what-if{margin-top:20px!important;padding-top:18px!important}
.compact-what-if-head>div strong{font-size:17px!important}
.compact-what-if-buttons{gap:9px!important}
.compact-what-if-buttons button,.scenario-chips button,.rate-buttons button{
  border-radius:12px!important;
  background:rgba(255,255,255,.028);
  border-color:rgba(255,255,255,.09);
  min-height:42px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.compact-what-if-buttons button.active,.scenario-chips button.active,.rate-buttons button.active{
  background:var(--accent);
  color:#052018;
  border-color:transparent;
  box-shadow:0 8px 22px rgba(71,195,154,.14);
}

.home-panel{background:linear-gradient(180deg,rgba(13,35,29,.92),rgba(8,25,20,.92))}
.ownership-bar{height:14px;margin-top:24px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07)}
.home-value{margin-top:24px}
.home-value strong{font-size:48px}
.ownership-badge{border-radius:12px;background:rgba(255,255,255,.035);color:var(--warm);padding:8px 11px}

.next-panel{background:
  radial-gradient(280px 180px at 90% 0%,rgba(211,188,139,.045),transparent 70%),
  linear-gradient(180deg,rgba(16,34,29,.92),rgba(9,25,21,.92));
}
.next-event-text{color:#9aa9a3}
.next-panel .mini-edit{display:none!important}

.chart-panel canvas{
  border-radius:20px;
  border-color:rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(4,18,15,.72),rgba(4,15,13,.62));
}
.legend{color:#879790}

.expand-hint{
  color:#7f918a!important;
  font-size:10px!important;
  letter-spacing:.025em;
  margin-top:18px!important;
}

.market-comparison{gap:10px!important}
.market-comparison>div{border-radius:16px!important}
.market-comparison strong{letter-spacing:-.025em}

.deep-heading{padding-bottom:2px}
.deep-heading .source-date{color:#708079}
.deep-note{color:#83938c!important;line-height:1.55!important}

.mortgage-details-editor,
.equity-growth,
.property-cost-comparison{border-top-color:rgba(255,255,255,.07)!important}
.mortgage-details-editor .inputs label{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.022))!important;
  border-color:rgba(255,255,255,.075)!important;
  border-radius:16px!important;
}
.mortgage-details-editor .inputs input{
  background:rgba(2,13,11,.74)!important;
  border-color:rgba(255,255,255,.085)!important;
}

.equity-progress-row{border-top-color:rgba(255,255,255,.065)!important;padding:16px 0!important}
.equity-progress-top strong{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;font-size:25px!important;font-weight:500}
.equity-progress-track{height:8px!important;background:rgba(255,255,255,.06)!important}
.equity-progress-track i{background:linear-gradient(90deg,#3fb991,#71ddba)!important}

.footer{color:#66756f;margin-top:24px;padding:0 4px}

/* Scrollbar treatment */
html{
  scrollbar-width:thin;
  scrollbar-color:#315e50 #071410;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#071410}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#315e50,#23463b);
  border:2px solid #071410;
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3e725f,#2c5548)}
::-webkit-scrollbar-corner{background:#071410}

/* Expanded cards should feel like focused sheets */
.expandable-card.is-expanded{
  border-color:rgba(104,222,185,.18)!important;
  background:linear-gradient(180deg,rgba(10,29,24,.985),rgba(6,20,16,.985))!important;
  box-shadow:0 36px 120px rgba(0,0,0,.48),0 0 0 1px rgba(104,222,185,.025) inset!important;
}
.card-backdrop{background:rgba(2,8,7,.74)!important;backdrop-filter:blur(8px)!important}
.card-close-button{
  background:transparent!important;
  border-color:transparent!important;
  color:var(--muted)!important;
}
.card-close-button:hover,.card-close-button:focus-visible{
  background:rgba(255,255,255,.04)!important;
  color:var(--text)!important;
}

@media(max-width:900px){
  .app-shell{width:min(100% - 24px,1200px)}
}
@media(max-width:650px){
  .app-shell{width:min(100% - 16px,1200px);padding-top:12px}
  .hero-panel,.panel{border-radius:22px}
  .hero-panel{padding:18px}
  h1{font-size:clamp(48px,14vw,66px)}
  .hero-progress-card{padding:16px}
  .home-value strong{font-size:42px}
  .topbar{margin-bottom:14px}
}