:root{
  --surface-1:      #fcfcfb;
  --page-plane:     #f2f1ee;
  --card:           #ffffff;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);

  --series-1: #2a78d6;
  --series-2: #1baf7a;
  --series-3: #eda100;
  --series-4: #008300;
  --series-5: #4a3aa7;
  --series-6: #e34948;
  --series-7: #e87ba4;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(11,11,11,0.04), 0 8px 24px rgba(11,11,11,0.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --card:           #201f1e;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);

    --series-1: #3987e5;
    --series-2: #199e70;
    --series-3: #c98500;
    --series-4: #1fa31f;
    --series-5: #9085e9;
    --series-6: #e66767;
    --series-7: #d55181;

    --good: #0ca30c;
    --warning: #fab219;
    --critical: #d03b3b;
  }
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page-plane);
  color: var(--text-primary);
  line-height: 1.4;
}

/* Nav */
nav.app-nav{
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 32px 0;
  display:flex;
  gap:10px;
}
nav.app-nav a{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  transition: background .15s, color .15s;
}
nav.app-nav a .he{
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  unicode-bidi: isolate;
}
nav.app-nav a.active{
  background: var(--series-1);
  color: #fff;
  border-color: transparent;
}
nav.app-nav a.active .he{ color: rgba(255,255,255,0.85); }
nav.app-nav a:hover:not(.active){ background: var(--surface-1); }

header.top{
  padding: 20px 32px 20px;
  max-width: 1400px;
  margin: 0 auto;
}
header.top h1{
  font-size: 26px;
  margin: 0 0 2px;
  font-weight: 700;
}
header.top .he-title{
  font-size: 15px;
  color: var(--text-secondary);
  unicode-bidi: isolate;
  display:block;
}
header.top p{
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 720px;
}

.layout{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px 60px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  aside.dashboard{ position: static !important; order: -1; }
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.card h2{
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.card h2 .badge{
  width: 22px; height:22px;
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#fff;
  flex: none;
}
.card .he-h2{
  font-size: 12.5px;
  color: var(--text-muted);
  unicode-bidi: isolate;
  display:block;
  margin-bottom: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.field-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 18px;
}
@media (max-width: 620px){ .field-grid{ grid-template-columns: 1fr; } }

.sub-grid{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 18px;
}
@media (max-width: 620px){ .sub-grid{ grid-template-columns: 1fr; } }

select.method-select{
  width:100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  margin-top:6px;
  font-family: inherit;
}

.field{ display:flex; flex-direction:column; }
.field label{
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.field label .he{
  display:block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
  unicode-bidi: isolate;
  margin-top: 1px;
}
.input-wrap{
  position: relative;
  margin-top: 6px;
}
.input-wrap input{
  width: 100%;
  padding: 9px 46px 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s;
}
.input-wrap input.has-unit-toggle{
  padding-right: 56px;
}
.input-wrap select.unit-toggle{
  position:absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-align-last: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}
.input-wrap input:focus{
  outline: none;
  border-color: var(--series-1);
}
.input-wrap input.invalid{
  border-color: var(--critical);
}
.input-wrap .unit{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  color: var(--text-muted);
  pointer-events: none;
}
.field .error-msg{
  font-size: 11px;
  color: var(--critical);
  margin-top: 3px;
  min-height: 14px;
}

/* Dashboard */
aside.dashboard{
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
@media (max-width: 980px){
  aside.dashboard{ max-height: none; overflow-y: visible; }
}

.stat-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.stat-tile{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 14px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.stat-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(11,11,11,0.08);
}
.stat-tile .label{
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.stat-tile .label .he{
  display:block;
  font-size: 11px;
  text-transform: none;
  font-weight: 400;
  color: var(--text-muted);
  unicode-bidi: isolate;
  margin-top:1px;
}
.stat-tile .value{
  font-size: 22px;
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-tile.hero{
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--series-1), #1c5cab);
  border: none;
}
.stat-tile.hero .label, .stat-tile.hero .label .he{ color: rgba(255,255,255,0.85); }
.stat-tile.hero .value{ color:#fff; font-size: 30px; }
.stat-tile.hero .value .sub{ font-size: 15px; font-weight:600; margin-left:8px; opacity:.9; }

.stat-tile .value.good{ color: var(--good); }
.stat-tile .value.critical{ color: var(--critical); }

/* Chart blocks */
.chart-block{ margin-top: 18px; }
.chart-block .chart-title{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.chart-block .chart-title .he{
  font-size:11.5px; font-weight:400; color:var(--text-muted); unicode-bidi:isolate; display:block; margin-bottom:10px;
}
.table-toggle{
  background:none;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 10px;
  color: var(--text-secondary);
  cursor: pointer;
  float: right;
  margin-top: -32px;
}
.table-toggle:hover{ background: var(--surface-1); }

.stack-bar{
  display:flex;
  width:100%;
  height: 44px;
  border-radius: 4px;
  overflow:hidden;
  background: var(--gridline);
}
.stack-bar .seg{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 11.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  border-right: 2px solid var(--surface-1);
  transition: width .25s ease;
}
.stack-bar .seg:last-child{ border-right:none; }

.legend{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 16px;
  margin-top: 12px;
  font-size: 12px;
}
.legend .item{ display:flex; align-items:center; gap:6px; color: var(--text-secondary); }
.legend .swatch{ width:10px; height:10px; border-radius:2px; flex:none; }
.legend .amt{ font-weight:700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

table.data-table{
  width:100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 10px;
}
table.data-table th, table.data-table td{
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gridline);
}
table.data-table th{ color: var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; }
table.data-table td{ font-variant-numeric: tabular-nums; }

/* Meter */
.meter-row{ display:flex; gap:14px; margin-top: 18px; flex-wrap: wrap; }
.meter{
  flex:1;
  min-width: 160px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.meter .m-label{ font-size:11.5px; font-weight:600; color: var(--text-muted); text-transform:uppercase; letter-spacing:.02em;}
.meter .m-label .he{ display:block; font-weight:400; text-transform:none; unicode-bidi:isolate; }
.meter .m-value{
  display:flex; align-items:baseline; gap:6px; margin: 6px 0 8px; flex-wrap: wrap;
}
.meter .m-value .num{ font-size:20px; font-weight:700; font-variant-numeric: tabular-nums; }
.meter .m-value .status-pill{
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.track{
  height:8px;
  border-radius:4px;
  background: var(--gridline);
  overflow:hidden;
}
.track .fill{
  height:100%;
  border-radius:4px;
  transition: width .25s ease, background .25s ease;
}

/* Bar rows (returns comparison) */
.bar-rows{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.bar-row{ display:grid; grid-template-columns: 120px 1fr 64px; align-items:center; gap:10px; }
.bar-row .b-label{ font-size:12px; color:var(--text-secondary); }
.bar-row .b-label .he{ display:block; font-size:10.5px; color:var(--text-muted); unicode-bidi:isolate; }
.bar-row .b-track{ height:14px; background:var(--gridline); border-radius:4px; overflow:hidden; }
.bar-row .b-fill{ height:100%; background: var(--series-1); border-radius:4px; transition: width .25s ease; min-width:2px; }
.bar-row .b-val{ font-size:12.5px; font-weight:700; text-align:right; font-variant-numeric: tabular-nums; }

footer.note{
  max-width:1400px;
  margin: 0 auto;
  padding: 0 32px 40px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Accordion (collapsed-by-default detail panel, e.g. Refinance Closing Costs) */
.accordion{
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
}
.accordion-toggle{
  width:100%; display:flex; align-items:center; gap:10px; padding:11px 14px;
  background:var(--card); border:none; cursor:pointer; text-align:left; font-family:inherit;
}
.accordion-toggle-label{ font-size:13px; font-weight:600; flex:1; display:flex; flex-direction:column; color:var(--text-primary); }
.accordion-toggle-label .he{ font-size:11.5px; font-weight:400; color:var(--text-muted); unicode-bidi:isolate; }
.accordion-toggle-summary{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--series-5); white-space:nowrap; }
.accordion-chevron{ transition:transform .15s ease; color:var(--text-muted); flex:none; }
.accordion.open .accordion-chevron{ transform:rotate(180deg); }
.accordion-panel{ display:none; padding:16px 14px 4px; border-top:1px solid var(--border); }
.accordion.open .accordion-panel{ display:block; }
.accordion-category{ margin-bottom:18px; }
.accordion-category-title{ font-size:12px; font-weight:700; margin-bottom:10px; color:var(--text-secondary); }
.accordion-category-title .he{ display:block; font-weight:400; font-size:11px; color:var(--text-muted); unicode-bidi:isolate; margin-top:1px; }

/* Closing-document PDF upload (inside a closing-costs accordion) */
.closing-upload-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:16px; border-bottom:1px dashed var(--gridline); }
.closing-upload-btn{
  font-size:12px; font-weight:700; padding:8px 14px; border-radius:999px;
  border:1px solid var(--series-1); background:var(--card); color:var(--series-1);
  cursor:pointer; font-family:inherit; display:inline-flex; flex-direction:column; align-items:center; line-height:1.2;
}
.closing-upload-btn .he{ font-weight:400; font-size:10px; unicode-bidi:isolate; }
.closing-upload-btn:hover{ background:var(--series-1); color:#fff; }
.closing-upload-status{ font-size:11.5px; color:var(--text-muted); }
.closing-upload-status.success{ color:var(--good); }
.closing-upload-status.warning{ color:var(--warning); }
.closing-upload-status.error{ color:var(--critical); }
.input-wrap input.auto-filled{ border-color:var(--good); background:rgba(12,163,12,0.08); }

/* Dynamic "Other" line items */
.other-items-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.other-item-row{ display:flex; align-items:center; gap:8px; }
.other-item-row .oi-label{
  flex:1; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-1); color:var(--text-primary); font-size:13px; font-family:inherit;
}
.other-item-row .oi-amount-wrap{ display:flex; align-items:center; gap:4px; flex:none; }
.other-item-row .oi-amount{
  width:100px; padding:8px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-1); color:var(--text-primary); font-size:13px; font-variant-numeric:tabular-nums;
}
.other-item-row .oi-type{
  padding:8px 4px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text-secondary); font-size:12px; font-weight:600; font-family:inherit;
}
.other-item-row .oi-remove{
  flex:none; background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-muted); cursor:pointer; padding:7px 10px; font-size:13px;
}
.other-item-row .oi-remove:hover{ background:var(--critical); color:#fff; border-color:transparent; }
.add-other-btn{
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px;
  border:1px solid var(--series-1); background:var(--card); color:var(--series-1);
  cursor:pointer; font-family:inherit; display:inline-flex; flex-direction:column; align-items:center; line-height:1.2;
}
.add-other-btn .he{ font-weight:400; font-size:10px; unicode-bidi:isolate; }
.add-other-btn:hover{ background:var(--series-1); color:#fff; }
@media (max-width: 620px){
  .other-item-row{ flex-wrap:wrap; }
  .other-item-row .oi-label{ flex-basis:100%; }
}

/* Room-by-room renovation estimator */
.reno-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.reno-toolbar-label{ font-size:12.5px; font-weight:700; color:var(--text-muted); margin-right:4px; }
.reno-toolbar-label .he{ display:block; font-weight:400; font-size:11px; unicode-bidi:isolate; }
.add-room-btn{
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--series-1);
  background:var(--card);
  color:var(--series-1);
  cursor:pointer;
  font-family:inherit;
}
.add-room-btn:hover{ background:var(--series-1); color:#fff; }

.room-card{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:14px;
  overflow:hidden;
  background:var(--surface-1);
}

.rooms-scroll{
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 10px 0;
  background: var(--page-plane);
}
.rooms-scroll .room-card:last-child{ margin-bottom: 10px; }
.room-card-header{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 14px;
  background: var(--card);
  border-bottom:1px solid var(--border);
}
.room-name{
  font-size:13.5px;
  font-weight:700;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-primary);
  padding:4px 6px;
  border-radius:6px;
  min-width:100px;
  flex:1;
  font-family: inherit;
}
.room-name:hover, .room-name:focus{ border-color:var(--border); background:var(--surface-1); outline:none; }
.room-type-tag{ font-size:11px; color:var(--text-muted); background:var(--gridline); padding:3px 9px; border-radius:999px; white-space:nowrap; }
.room-subtotal-tag{ font-size:13px; font-weight:700; margin-left:auto; font-variant-numeric:tabular-nums; }
.room-collapse-btn, .room-remove-btn{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  cursor:pointer;
  font-family:inherit;
  color:var(--text-secondary);
}
.room-remove-btn:hover{ background:var(--critical); color:#fff; border-color:transparent; }
.room-collapse-btn:hover{ background:var(--gridline); }
.room-card-body{ padding:6px 14px 10px; }
.room-card.collapsed .room-card-body{ display:none; }

.reno-section-title{
  font-size:13px;
  font-weight:700;
  margin: 20px 0 10px;
  padding-top:14px;
  border-top:1px solid var(--gridline);
}
.reno-section-title .he{ display:block; font-size:11.5px; font-weight:400; color:var(--text-muted); unicode-bidi:isolate; }

.ri-row{
  display:grid;
  grid-template-columns: 1.5fr 1.3fr 0.9fr 0.9fr 0.9fr;
  gap:10px;
  align-items:center;
  padding:7px 4px;
  border-bottom:1px solid var(--gridline);
  font-size:12.5px;
}
.ri-row:last-child{ border-bottom:none; }
.ri-row-header{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
.ri-row-header .he{ display:block; font-weight:400; text-transform:none; unicode-bidi:isolate; }
.ri-label{ font-weight:600; }
.ri-label .he{ display:block; font-weight:400; font-size:11px; color:var(--text-muted); unicode-bidi:isolate; }
.ri-material{
  width:100%;
  font-size:12px;
  padding:5px 6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
  font-family:inherit;
}
.ri-price-wrap{ display:flex; align-items:center; gap:4px; }
.ri-unit-prefix{ font-size:12px; color:var(--text-muted); }
.ri-price{
  width:100%;
  font-size:12.5px;
  padding:5px 6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.ri-qty-wrap{ display:flex; align-items:center; gap:4px; }
.ri-qty{
  width:100%;
  font-size:12.5px;
  padding:5px 6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.ri-unit{ font-size:10.5px; color:var(--text-muted); white-space:nowrap; }
.ri-cost{ font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width: 820px){
  .ri-row{ grid-template-columns: 1fr 1fr; row-gap:6px; }
  .ri-row > *:first-child{ grid-column: 1 / -1; }
  .ri-row-header{ display:none; }
}

.reno-subtotal{
  grid-column: 1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 6px;
  font-size: 13px;
  font-weight:700;
}
.reno-subtotal .he{ font-weight:400; color:var(--text-muted); font-size:11.5px; unicode-bidi:isolate; display:block; }
.reno-subtotal .amt{ font-variant-numeric: tabular-nums; font-size:16px; }

/* Block-color tones — ties a block's ending total (and any dashboard tile
   reporting that block's figure) back to that block's badge color */
.reno-subtotal.tone-1{ background:var(--series-1); border-color:transparent; color:#fff; }
.reno-subtotal.tone-2{ background:var(--series-2); border-color:transparent; color:#fff; }
.reno-subtotal.tone-3{ background:var(--series-3); border-color:transparent; color:#fff; }
.reno-subtotal.tone-4{ background:var(--series-4); border-color:transparent; color:#fff; }
.reno-subtotal.tone-5{ background:var(--series-5); border-color:transparent; color:#fff; }
.reno-subtotal.tone-6{ background:var(--series-6); border-color:transparent; color:#fff; }
.reno-subtotal.tone-7{ background:var(--series-7); border-color:transparent; color:#fff; }
.reno-subtotal.tone-1 .he, .reno-subtotal.tone-2 .he, .reno-subtotal.tone-3 .he,
.reno-subtotal.tone-4 .he, .reno-subtotal.tone-5 .he, .reno-subtotal.tone-6 .he,
.reno-subtotal.tone-7 .he{ color:rgba(255,255,255,.85); }

.stat-tile .value.tone-1{ color:var(--series-1); }
.stat-tile .value.tone-2{ color:var(--series-2); }
.stat-tile .value.tone-3{ color:var(--series-3); }
.stat-tile .value.tone-4{ color:var(--series-4); }
.stat-tile .value.tone-5{ color:var(--series-5); }
.stat-tile .value.tone-6{ color:var(--series-6); }
.stat-tile .value.tone-7{ color:var(--series-7); }

/* Saved deals */
.deals-wrap{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}
.deals-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.deals-row .field{ flex:1; min-width:220px; }

.btn-primary, .btn-secondary{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.25;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight:700;
  cursor:pointer;
  border: 1px solid var(--border);
  white-space:nowrap;
  font-family: inherit;
}
.btn-primary .he, .btn-secondary .he{ font-size:10.5px; font-weight:400; unicode-bidi:isolate; }
.btn-primary{ background: var(--series-1); color:#fff; border-color: transparent; }
.btn-primary:hover{ filter: brightness(0.92); }
.btn-primary .he{ color: rgba(255,255,255,0.85); }
.btn-secondary{ background: var(--surface-1); color: var(--text-primary); }
.btn-secondary:hover{ background: var(--gridline); }

.saved-list{ margin-top: 16px; display:flex; flex-direction:column; gap:8px; }
.deal-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 14px;
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-wrap:wrap;
}
.deal-row.active{ border-color: var(--series-1); }
.deal-row .deal-info{ display:flex; flex-direction:column; min-width:160px; }
.deal-row .deal-title{ font-weight:700; font-size:13.5px; }
.deal-row .deal-meta{ font-size:11.5px; color:var(--text-muted); }
.deal-row .deal-actions{ display:flex; gap:8px; }
.deal-row .deal-actions button{
  font-size:11.5px;
  padding: 5px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--card);
  cursor:pointer;
  font-family: inherit;
}
.deal-row .deal-actions button.danger:hover{ background: var(--critical); color:#fff; border-color:transparent; }
.deal-row .deal-actions button.open-btn:hover{ background: var(--series-1); color:#fff; border-color:transparent; }
.deal-row .deal-actions button.zillow-btn:hover{ background: var(--series-2); color:#fff; border-color:transparent; }

/* Stat-tile detail popup — explains how a dashboard total is built,
   color-coding each contributing item to the block it came from */
.tile-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(11,11,11,.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.tile-modal-overlay.open{ display: flex; }
.tile-modal{
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px 26px 22px;
}
.tile-modal .modal-close-btn{
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 6px;
}
.tile-modal .modal-close-btn:hover{ background: var(--surface-1); }
.tile-modal h3{ font-size: 18px; margin: 0 2px 2px; padding-right: 20px; }
.tile-modal .modal-he{
  font-size: 13px;
  color: var(--text-muted);
  unicode-bidi: isolate;
  display: block;
  margin: 0 2px 16px;
}
.breakdown-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--gridline);
  font-size: 13.5px;
}
.breakdown-row .breakdown-label{ display: flex; align-items: flex-start; gap: 8px; }
.breakdown-row .breakdown-label .swatch{
  width: 10px; height: 10px; border-radius: 3px; flex: none; margin-top: 4px;
}
.breakdown-row .breakdown-label .he{
  display: block; font-size: 11px; color: var(--text-muted); unicode-bidi: isolate;
}
.breakdown-row .breakdown-amt{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.breakdown-result{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 2px solid var(--border);
  font-weight: 700;
  font-size: 16px;
}
.breakdown-result .he{
  display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); unicode-bidi: isolate;
}
.tile-modal .formula-note{
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--gridline);
}
.empty-hint{ font-size:12.5px; color:var(--text-muted); padding: 6px 2px; }