:root {
  --ink: #324b42;
  --muted: #7d8178;
  --paper: #f7f1e8;
  --card: #fffdf8;
  --line: #e9ded0;
  --accent: #d8a06f;
  --coral: #c97962;
  --green: #628273;
  --blue: #718a96;
}

[hidden] { display: none !important; }

#netWorth,#fireAssets,#companyExposure,#income,#expense,#saving,#savingRate,#childExpense,#assets,#liabilities,
.fire-card strong,.fire-card small,.tx b,.asset-summary b,.asset-card strong,.position-card b,.category-row b {
  font-family: var(--number-font);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.012em;
}

body {
  background:
    radial-gradient(circle at 8% 0%, #efd9c633 0, transparent 28rem),
    radial-gradient(circle at 95% 12%, #dce5dc66 0, transparent 25rem),
    var(--paper);
}

.brand-mark {
  background: linear-gradient(145deg, #3c5a4f, #29443b);
  color: #f5d9b3;
  border-radius: 24px 24px 24px 10px;
  box-shadow: 0 16px 40px #604a3630;
}

.panel,
.metrics article,
.fire-card,
.tool-card {
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border-color: #fff9f0;
  box-shadow: 0 10px 28px #6b50370b;
}

.hero-card {
  background:
    radial-gradient(circle at 88% 12%, #d6af7e55 0, transparent 13rem),
    linear-gradient(142deg, #34584b, #5e7668);
  box-shadow: 0 20px 45px #3c54442e;
}

.avatar {
  background: #ead5bd;
  color: #604d3d;
  box-shadow: inset 0 0 0 1px #fff8ee;
}

.tool-card {
  border-left: 3px solid #e6c7a6;
  transition: transform .18s ease, box-shadow .18s ease;
}

.tool-card:active {
  transform: scale(.985);
}

.primary {
  background: linear-gradient(135deg, #35594d, #496b5e);
  box-shadow: 0 8px 18px #35594d22;
}

input,
select {
  background: #fffcf7;
}

.bottom-nav {
  background: #fffaf3e8;
}

.bottom-nav button {
  position: relative;
  width: min(31%, 280px);
  border-radius: 14px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.avatar { border: 0; cursor: pointer; color: var(--ink); }
.avatar:hover { box-shadow: 0 0 0 4px #d9aa5b26; }

.bottom-nav button:active { transform: translateY(1px); }
.bottom-nav button.active { background: #e9f0e9; color: var(--ink); }
.bottom-nav button.active::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 18px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--green);
}

.nav-feedback {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 76px;
  transform: translate(-50%, 10px);
  padding: 8px 13px;
  border-radius: 999px;
  background: #2f5146;
  color: white;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}
.nav-feedback.show { opacity: 1; transform: translate(-50%, 0); }

.empty-action {
  padding: 16px;
  margin: 10px 0;
  border: 1px dashed #d7c5b1;
  border-radius: 16px;
  background: #fffaf3;
}
.empty-action p { margin: 7px 0; }

.setup-steps { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.setup-steps li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffaf3;
}
.setup-steps li::before {
  content: counter(list-item);
  grid-row: span 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--green);
  font-weight: 700;
}
.setup-steps span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.setup-steps button { grid-column: 3; grid-row: 1 / span 2; border: 0; background: transparent; color: var(--green); font-weight: 700; }

.route-card { display: grid; gap: 5px; padding: 13px; border-radius: 14px; background: #f3f6f1; }
.route-card span { color: var(--muted); font-size: 12px; }
.danger-button { width: 100%; margin-top: 14px; padding: 12px; border: 1px solid #e4bcb2; border-radius: 13px; background: #fff8f5; color: #a34f3e; font-weight: 700; }
.app-page { min-height: calc(100vh - 150px); }
.page-title { margin: 8px 0 18px; }
.page-title h2 { margin: 3px 0; font-size: 25px; }
.tx-button { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.tx-button:hover { background: #faf6ef; }
.quick-kind { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.quick-kind button { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fffaf3; color: var(--muted); }
.quick-kind button.active { background: var(--green); border-color: var(--green); color: white; font-weight: 700; }
.quick-amount input { font-size: 30px; font-weight: 700; text-align: center; padding: 14px; }
.quick-templates { display: flex; gap: 8px; overflow-x: auto; padding: 3px 0 12px; }
.quick-template { flex: 0 0 auto; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fffaf3; color: var(--ink); }
.advanced-fields { margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
.advanced-fields summary { cursor: pointer; color: var(--green); font-weight: 700; }
.asset-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.asset-summary article { padding:14px; border-radius:15px; background:var(--card); border:1px solid var(--line); }
.asset-summary small,.asset-summary b { display:block; }
.asset-summary b { margin-top:6px; font-size:20px; }
.asset-group { margin:18px 0; }
.asset-group h3 { margin:0 0 9px; }
.asset-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.asset-card { width:100%; display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding: 14px; text-align:left; color:inherit; border-radius: 15px; background: var(--card); border: 1px solid var(--line); cursor:pointer; }
.asset-card small { display: block; margin-top: 4px; color: var(--muted); }
.asset-card strong { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:17px; }
.asset-card:hover { border-color:#d8c6b0; }
.asset-card::after { content:none; }
.asset-tools-title { margin-top:26px; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.overview-more { width: 100%; margin-top: 8px; }
.bill-toolbar { display:flex; justify-content:flex-end; margin:0 0 14px; }
.bill-toolbar .primary { width:auto; min-width:180px; }
#billPlanList { padding:4px 18px; }
.investment-detail-card{margin-bottom:14px}.investment-detail-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.investment-detail-card h3{margin:3px 0 14px;font-size:20px}.investment-value{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:15px;border-radius:16px;background:#f3f6f1}.investment-value small,.investment-value span{color:var(--muted)}.investment-value strong{grid-row:1 / span 2;grid-column:2;align-self:center;font-size:26px}.investment-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:12px}.investment-facts p{display:flex;justify-content:space-between;gap:12px;padding:9px 0;margin:0;border-bottom:1px solid var(--line)}.investment-facts span{color:var(--muted)}.investment-plan{display:grid;gap:5px;margin-top:16px;padding:14px;border:1px solid #e6d5bd;border-radius:16px;background:#fffaf3}.investment-plan small{color:var(--muted);line-height:1.45}.positive{color:var(--green)!important}.negative{color:#b85b48!important}
.investment-snapshot{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-top:12px;padding:14px;border:1px solid #eadcc9;border-radius:16px;background:#fffaf3}.investment-snapshot>div{grid-column:1 / -1;display:flex;align-items:end;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}.investment-snapshot>div small{color:var(--muted)}.investment-snapshot>div b{font-size:18px}.investment-snapshot p{display:flex;justify-content:space-between;gap:10px;margin:0}.investment-snapshot p span{color:var(--muted)}.investment-snapshot>small{grid-column:1 / -1;color:var(--muted);line-height:1.5}
.fund-estimate{display:grid;gap:10px;margin-top:12px;padding:15px;border:1px solid #cbdacb;border-radius:16px;background:#f2f7f1}.fund-estimate header{display:flex;align-items:end;justify-content:space-between;gap:12px}.fund-estimate header div{display:grid;gap:3px}.fund-estimate header b{font-size:22px}.fund-estimate header span{font-weight:700}.fund-estimate>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.fund-estimate p{display:grid;gap:3px;margin:0;padding:8px;border-radius:10px;background:#ffffffa8}.fund-estimate p span,.fund-estimate>small,.fund-estimate header small{color:var(--muted)}.fund-estimate>small{line-height:1.5}.fund-estimate.unavailable{background:#faf7f2;border-color:var(--line)}
.dashboard-freshness{margin-left:auto;color:#d7e2dc;font-size:11px}.holding-details,.fund-estimate details{margin-top:12px}.holding-details>summary,.fund-estimate summary{cursor:pointer;list-style:none;padding:10px 0;color:var(--green);font-size:13px;font-weight:700;border-bottom:1px solid var(--line)}.holding-details>summary::after,.fund-estimate summary::after{content:"＋";float:right}.holding-details[open]>summary::after,.fund-estimate details[open]>summary::after{content:"－"}.fund-estimate details>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.fund-estimate details>small{display:block;margin-top:8px;color:var(--muted);line-height:1.5}.quiet-action{width:100%;margin-top:10px;padding:9px;border:0;background:transparent;color:var(--green);font-weight:700}.page-title .eyebrow{opacity:.62}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.58;cursor:wait}.quick-kind button,.quick-template,.primary,.secondary,.quiet-action{min-height:44px}dialog[open]{animation:dialog-in .16s ease-out}@keyframes dialog-in{from{opacity:.65;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.data-freshness{display:flex;justify-content:space-between;gap:10px;margin:9px 1px 0;color:var(--green);font-size:12px}.data-freshness small{color:var(--muted)}.data-freshness.stale{padding:9px 11px;border-radius:11px;background:#fff5e8;color:#a66c35}.data-freshness.stale small{color:#8e7964}
.owner-breakdown{display:flex;align-items:center;gap:8px;overflow-x:auto;margin:-4px 0 16px;padding:0 2px 4px;color:var(--muted);font-size:12px}.owner-breakdown span{flex:0 0 auto;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#fffaf5}.owner-breakdown span:first-child{border:0;background:transparent;padding-left:0}.owner-breakdown i{font-style:normal}.fund-estimate.compact{padding:10px 13px}.fund-estimate.compact header{align-items:center}.fund-estimate.compact header span{font-size:15px}.investment-plan-details{margin-top:10px;border:1px solid #e6d5bd;border-radius:14px;background:#fffaf3}.investment-plan-details>summary{padding:12px 14px;cursor:pointer;list-style:none;color:var(--green);font-weight:700}.investment-plan-details>summary::after{content:'＋';float:right}.investment-plan-details[open]>summary::after{content:'－'}.investment-plan-details .investment-plan{margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}

.fab {
  z-index: 22;
  right: max(20px, calc((100vw - 1040px) / 2 + 22px));
  bottom: calc(82px + env(safe-area-inset-bottom));
  width: auto;
  min-width: 112px;
  height: 52px;
  padding: 0 18px 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  background: #d9a16f;
  color: #3e483e;
  font-size: 17px;
  font-weight: 750;
  box-shadow: 0 12px 30px #6d503d3d, 0 0 0 1px #ffffff75 inset;
}
.fab span { font-size: 25px; line-height: 1; font-weight: 400; }
.fab b { font-size: 14px; white-space: nowrap; }
.fab:active { transform: translateY(1px) scale(.985); }

.fire-details { display: grid; gap: 7px; margin-top: 2px; }
.fire-current { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:11px 0 -4px; }
.fire-current span { color:var(--muted); font-size:12px; }
.fire-current b { color:var(--ink); font-size:16px; font-variant-numeric:tabular-nums lining-nums; }
.fire-details small { display: flex; justify-content: space-between; gap: 12px; }
.fire-details small + small { padding-top: 7px; border-top: 1px solid var(--line); }
.fire-details b { color: var(--ink); font-weight: 700; }
}

dialog::backdrop {
  background: #3a302880;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-card,
  .panel,
  .tool-card {
    animation: settle-in .3s ease both;
  }

  @keyframes settle-in {
    from { opacity: .75; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 560px) {
  .topbar{padding:14px 20px 6px}.topbar h1{font-size:25px}.topbar .eyebrow{display:none}main{padding:8px 20px 105px}.hero-card{padding:18px 19px;border-radius:22px}.hero-card>strong{font-size:34px;margin:8px 0 15px}.hero-grid{padding-top:13px}.metrics{gap:9px;margin:11px 0 22px}.metrics article{padding:12px 13px;border-radius:15px}.metrics small,.metrics b{margin:4px 0}.section-head{margin:20px 2px 9px}.section-head .eyebrow{display:none}.fire-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.fire-card{min-width:82%;scroll-snap-align:start}.split{gap:10px;margin-top:12px}.panel{padding:15px;border-radius:17px}.page-title{margin-bottom:14px}.page-title .eyebrow{display:none}.page-title h2{margin-bottom:4px}.asset-summary{gap:8px;margin-bottom:13px}.asset-summary article{padding:12px}.investment-detail-card h3{font-size:17px;line-height:1.35;margin-bottom:10px}.investment-value{padding:13px}.investment-value strong{font-size:22px}.fund-estimate{padding:13px}.fund-estimate header b{font-size:20px}.fund-estimate details>div{grid-template-columns:1fr}.investment-snapshot{padding:12px}.bottom-nav{height:62px}.fab{bottom:calc(72px + env(safe-area-inset-bottom))}
  .fab { right: 18px; bottom: calc(78px + env(safe-area-inset-bottom)); min-width: 104px; height: 50px; }
  .setup-steps li { grid-template-columns: 34px 1fr; }
  .setup-steps button { grid-column: 2; grid-row: auto; justify-self: start; padding: 5px 0; }
  .asset-list { grid-template-columns: 1fr; }
  .asset-summary { grid-template-columns:1fr 1fr; }
  .asset-summary article:first-child { grid-column:1 / -1; }
  .investment-snapshot { grid-template-columns:1fr; }
  .investment-snapshot>div,.investment-snapshot>small { grid-column:1; }
  .fund-estimate header { align-items:flex-start; flex-direction:column; }
  .fund-estimate>div { grid-template-columns:1fr; }
}

.portfolio-platform{padding:0;overflow:hidden;margin-bottom:12px}.portfolio-platform>summary{list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:17px;cursor:pointer}.portfolio-platform>summary::-webkit-details-marker{display:none}.portfolio-platform>summary h3{margin:3px 0 0}.portfolio-platform>summary>div:last-child{text-align:right;display:grid;gap:3px}.portfolio-platform>summary>div:last-child span{font-size:12px}.portfolio-platform[open]>summary{border-bottom:1px solid var(--line)}.platform-body{padding:7px 16px 16px}.platform-products,.platform-plans{border-bottom:1px solid var(--line)}.platform-products>summary,.platform-plans>summary{padding:13px 0;cursor:pointer;color:var(--muted);font-weight:700}.compact-position,.compact-plan{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent)}.compact-position>div,.compact-plan>div{display:grid;gap:4px}.compact-position>div:last-child,.compact-plan>div:last-child{text-align:right;flex-shrink:0}.compact-position small,.compact-plan small{font-size:12px;color:var(--muted)}
.snapshot-label{color:var(--muted)}.loading-card{grid-column:1/-1}.page-loading{display:grid;place-items:center;min-height:150px;color:var(--muted);text-align:center}.page-loading span{width:25px;height:25px;border:3px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:portfolio-spin .8s linear infinite}.load-error{text-align:center}.load-error p{color:var(--muted)}@keyframes portfolio-spin{to{transform:rotate(360deg)}}
@media(max-width:560px){.portfolio-platform>summary{padding:15px}.platform-body{padding:5px 14px 14px}.compact-position,.compact-plan{align-items:flex-start}.compact-position>div:first-child,.compact-plan>div:first-child{min-width:0}.compact-position>div:first-child b,.compact-plan>div:first-child b{font-size:14px;line-height:1.35}}