:root {
  /* Abra brand palette */
  --abra-purple: #5F70EC;   /* logo / secondary accent */
  --purple: #5563C8;        /* primary brand accent */
  --light-purple: #E6E8F9;  /* secondary surfaces, cards, bands */
  --yellow: #FFEFCE;        /* small warm accent */
  --navy: #2E2E40;          /* ink / dark */
  --navy-2: #454FAE;        /* darker purple for hovers */
  --accent: #5563C8;        /* = Purple */
  --accent-2: #5F70EC;      /* = Abra Purple */
  --btn: #4857B3;           /* button fill — a touch darker than Purple */
  --bg: #F6F7FF;            /* Light Grey canvas */
  --card: #ffffff;
  --ink: #2E2E40;           /* Dark Grey, not black */
  --muted: #7A7F9E;
  --line: #E3E5F3;
  --good: #1b8f5a;
  --bad: #c0392b;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(46, 46, 64, .08), 0 6px 18px rgba(85, 99, 200, .07);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Geist", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.45;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 64px; }

header.app { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
header.app .header-main { flex: 1 1 480px; min-width: 0; }
header.app .brand-logo { height: 48px; width: auto; max-height: 48px; display: block; margin-bottom: 14px; }
header.app h1 { font-size: 26px; font-weight: 700; margin: 0 0 12px; color: var(--navy); letter-spacing: -.4px; }
header.app .data-line { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

/* numbered steps, single line */
.steps { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.steps li:not(:last-child)::after { content: "→"; margin-left: 14px; color: var(--abra-purple); font-weight: 700; }
.step-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--purple); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; }

/* best-portfolio callout, upper right */
.best-callout { flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #5F70EC, #5563C8); color: #fff;
  border-radius: 12px; padding: 13px 16px; max-width: 300px;
  box-shadow: 0 6px 18px rgba(85,99,200,.28); }
.best-callout .bc-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,239,206,.20); color: #FFEFCE; display: flex; align-items: center; justify-content: center; }
.best-callout .bc-icon svg { width: 22px; height: 22px; }
.best-callout .bc-q { font-size: 12px; font-weight: 600; opacity: .9; }
.best-callout .bc-a { font-size: 16px; font-weight: 700; margin-top: 2px; line-height: 1.25; }
@media (max-width: 720px) { .best-callout { max-width: none; width: 100%; } }

/* Tabs — segmented pill control */
.tabs { display: flex; gap: 6px; background: linear-gradient(180deg,#ECEEFB,#E0E3F6);
  padding: 5px; border-radius: 11px; }
.tab-btn {
  appearance: none; border: 0; cursor: pointer; flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--muted);
  border-radius: 8px; transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.tab-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tab-btn:hover { color: var(--navy); background: rgba(255,255,255,.55); }
.tab-btn.active { background: #fff; color: var(--accent);
  box-shadow: 0 1px 2px rgba(11,37,69,.10), 0 2px 8px rgba(11,37,69,.08); }
.tab-btn.active:hover { transform: translateY(-1px); }
@media (max-width: 620px) { .tab-btn { font-size: 12px; padding: 8px 6px; flex-direction: column; gap: 3px; } }

.panel { display: none; }
.panel.active { display: block; }

/* Layout: form (3/4) + stacked metrics (1/4) on top; chart + tables below */
.top { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; align-items: start; }
@media (min-width: 920px) { .top { grid-template-columns: 3fr 1fr; } }
.below { margin-top: 20px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.card h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 0 0 14px; font-weight: 700; }

/* Inputs */
label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 4px; font-weight: 600; }
input, select {
  font: inherit; font-size: 14px; padding: 5px 9px; border: 1px solid var(--line);
  border-radius: 7px; background: #fff; color: var(--ink); width: 100%; height: 34px;
}
input:focus, select:focus { outline: 2px solid rgba(29,111,184,.25); border-color: var(--accent); }
input[type=date], input[type=month] { min-width: 0; }
/* compact month + year dropdowns (replaces one long combined list) */
.month-field { display: flex; gap: 6px; }
.month-field .month-select { flex: 1; min-width: 0; padding-left: 8px; padding-right: 4px; }
.month-field .month-mm { flex: 1.1; }
/* match all field heights to the Asset select; drop number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
/* greyed while showing a default value; blackens once the user edits it */
input.is-default, select.is-default { color: var(--muted); }

.row { display: grid; gap: 8px; align-items: end; margin-bottom: 10px; }
.lot-row { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; }
.alloc-row { grid-template-columns: 1.6fr 1fr auto; }
.dca-row { grid-template-columns: 1.6fr 1fr auto; }
@media (max-width: 620px) {
  .lot-row, .alloc-row, .dca-row { grid-template-columns: 1fr 1fr; }
}

.icon-btn {
  appearance: none; border: 1px solid var(--line); background: #fff; cursor: pointer;
  width: 36px; height: 36px; border-radius: 7px; color: var(--muted); font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--bad); border-color: var(--bad); }

.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  padding: 9px 16px; border-radius: 8px; font-size: 14px;
}
.btn.primary { background: var(--btn); color: #fff; }
.btn.primary:hover { background: var(--navy-2); }
.btn.ghost { background: var(--light-purple); color: var(--accent); }
.btn.ghost:hover { background: #daddf3; }
.btn-row { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

.hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.alloc-total { font-size: 13px; font-weight: 700; margin-top: 6px; }
.alloc-total.ok { color: var(--good); }
.alloc-total.bad { color: var(--bad); }

/* Yield panel */
.yield { margin-top: 18px; background: var(--light-purple); border: 1px solid #d4d8f2;
  border-left: 4px solid var(--purple); border-radius: 8px; padding: 14px 16px; }
.yield-row { display: flex; gap: 14px; align-items: stretch; }
.yield-main { flex: 1; min-width: 0; }
.yield-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.yield-title { font-size: 15px; font-weight: 700; color: var(--purple); margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 8px; }
.yield-title::before { content: "%"; font-size: 14px; font-weight: 800; color: var(--abra-purple); }
.yield-title span { color: var(--muted); font-weight: 500; font-size: 12px; }
.yield input { background: #fff; }

/* Abra Yield callout (right of the yield inputs) */
.abra-yield { flex: 0 0 188px; background: var(--yellow); border: 1px solid #f1dca3;
  border-radius: 8px; padding: 11px 13px; }
.ay-title { font-size: 13px; font-weight: 700; color: var(--navy); }
.ay-desc { font-size: 11px; color: #8a7a4e; margin: 2px 0 9px; line-height: 1.35; }
.abra-yield a { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--purple); text-decoration: none; padding: 4px 0; border-top: 1px solid #f1dca3; }
.abra-yield a:first-of-type { border-top: 0; }
.abra-yield a::after { content: "↗"; font-size: 10px; color: var(--abra-purple); margin-left: auto; }
.abra-yield a:hover { color: var(--navy-2); }
@media (max-width: 680px) { .yield-row { flex-direction: column; } .abra-yield { flex-basis: auto; } }

/* tab panels: breathing room below the tab bar (#7) */
.panel.active { padding-top: 14px; }

/* Scenarios (#3): each is a collapsible portfolio */
.scenarios { display: flex; flex-direction: column; gap: 10px; }
.scenario { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #f8fafd; }
.scn-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #e9edf7; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
.scn-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.scn-name { flex: 0 1 33%; min-width: 110px; height: 30px; border: 1px solid transparent; background: transparent; font-weight: 600; padding: 4px 6px; }
.scn-name:hover { border-color: var(--line); background: #fff; }
.scn-name:focus { border-color: var(--accent); background: #fff; }
.scn-chevron { color: var(--muted); font-size: 11px; width: 14px; text-align: center; margin-left: auto; }
.icon-btn.scn-remove { width: 30px; height: 30px; font-size: 16px; }
.scn-body { padding: 12px 10px; border-top: 1px solid var(--line); }
.scenario.collapsed .scn-body { display: none; }
.scn-sum { font-size: 13px; font-weight: 700; margin-top: 8px; }
.scn-sum.ok { color: var(--good); } .scn-sum.bad { color: var(--bad); }

/* Per-scenario metric cards in the right column */
.scn-card { background: #f8fafd; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.scn-card-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.scn-card-head .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.scn-stat { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.scn-stat .lab { color: var(--muted); }
.scn-stat .val { font-weight: 600; }
.scn-stat .val.good { color: var(--good); } .scn-stat .val.bad { color: var(--bad); }
.scn-stat .val.dash { color: var(--accent-2); }

/* Results */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 920px) { .metrics { grid-template-columns: 1fr; } }
.metric { background: #f8fafd; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.metric .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.metric .v { font-size: 22px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.metric .v.good { color: var(--good); } .metric .v.bad { color: var(--bad); }
.metric .sub { font-size: 12px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }

.chart-box { position: relative; height: 360px; margin-bottom: 8px; }

table.years { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.years th, table.years td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.years th:first-child, table.years td:first-child { text-align: left; }
table.years th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
td.pos { color: var(--good); } td.neg { color: var(--bad); }

.warnings { background: #fff8e6; border: 1px solid #f0d98a; color: #7a5b00;
  font-size: 12px; padding: 10px 12px; border-radius: 8px; margin-top: 14px; }
.warnings ul { margin: 6px 0 0; padding-left: 18px; }

.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 40px 0; }
.foot { color: var(--muted); font-size: 11px; margin-top: 8px; }
.foot code { background: #eef3f9; padding: 1px 5px; border-radius: 4px; }