:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --border: #e1e4ea;
  --border-strong: #d0d5df;
  --text: #171717;
  --muted: #74798b;
  --accent: #ffb017;
  --accent-soft: #fff3d0;
  --danger: #ef4444;
  --success: #16a34a;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.12);
  --font-main: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text);
}

.app {
  max-width: 1120px;
  margin: 24px auto 40px;
  padding: 0 16px;
}

h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 4px;
  text-align: center;
}

.subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.steps {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--muted);
}

.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.step-dot-circle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: #fff;
}

.step-dot.active .step-dot-circle {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #000;
  font-weight: 600;
}

.step-dot.done .step-dot-circle {
  border-color: var(--accent);
  background: var(--accent);
  color: #000;
  font-weight: 600;
}

.step-dot-label {
  font-size: 12px;
  text-align: center;
  max-width: 160px;
}

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

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 14px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.field { margin-bottom: 12px; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  font-size: 14px;
  outline: none;
  background: #f7f7f7;
}

input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 176, 23, 0.3);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; }

.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn {
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 600;
}

.btn-primary:disabled { opacity: 0.6; cursor: default; }

.btn-secondary {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--text);
}

.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

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

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.badge {
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: #7c6514;
}

.badge-row--compact { gap: 10px; margin-top: 6px; }
.badge-row--compact .badge { padding: 6px 10px; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.kpi-row-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .kpi-row, .kpi-row-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

.kpi-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 10px 12px;
  background: #fafafa;
}

.kpi-card h3 { font-size: 14px; margin: 0 0 6px; font-weight: 600; }

.kpi-main { font-size: 20px; font-weight: 700; }
.kpi-main.good { color: var(--success); }
.kpi-main.bad { color: var(--danger); }
.kpi-sub { font-size: 12px; color: var(--muted); }

.section-title { font-size: 16px; font-weight: 600; margin: 18px 0 8px; }

.section-title.collapsible-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.disclosure-btn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
}

.disclosure-btn:hover { color: var(--text); }
.disclosure-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 176, 23, 0.25); border-radius: 4px; }

.collapsible-body[hidden] { display: none !important; }


table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}

th, td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 6px 4px;
}

th { font-weight: 500; color: var(--muted); }

/* critical: headers align with numeric columns */
td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }

tbody tr:nth-child(odd) { background: #fafafa; }

/* Compact two-column assumptions table (2 pairs per row) */
#assumptionsTable { font-size: 12px; }
#assumptionsTable th, #assumptionsTable td { padding: 6px 6px; }
#assumptionsTable th:nth-child(1), #assumptionsTable td:nth-child(1),
#assumptionsTable th:nth-child(3), #assumptionsTable td:nth-child(3) { width: 34%; }
#assumptionsTable th:nth-child(2), #assumptionsTable td:nth-child(2),
#assumptionsTable th:nth-child(4), #assumptionsTable td:nth-child(4) { width: 16%; }

canvas {
  width: 100%;
  height: 260px;
  border-radius: var(--radius-md);
  background: transparent;
  display: block;
  margin-top: 0;
}

.chart-frame {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px 10px 8px;
  margin-top: 8px;
}

.chart-frame canvas { margin-top: 0; border-radius: 10px; }


#mainChart { height: 320px; }

/* Cost chart: keep perfect circle but cap size to avoid excessive height */
#costChart {
  width: 100%;
  height: 220px;
  margin: 0;
  display: block;
}




.report-note { font-size: 11px; color: var(--muted); margin-top: 4px; }

.final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.final-actions .btn { flex: 1 1 160px; justify-content: center; }

.footer { text-align: center; margin-top: 24px; font-size: 12px; color: var(--muted); }

.error-msg { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; }

.download-row { display: flex; justify-content: center; margin-top: 18px; }

.check-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid #bbf7d0;
  background: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}


/* Chart frame variants */
.chart-frame-tall canvas { height: 320px; }
.chart-frame-compact canvas { height: 260px; }

/* Cost chart: keep circle, but frame is full width */
#costChart {
  width: min(100%, 220px);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 auto;
  display: block;
}

#annualChart { height: 260px; }


/* P&L Forecast cards – match design tints */
.kpi-card--opt {
  background: #ecfdf5;           /* green tint */
  border-color: #bbf7d0;
}
.kpi-card--base {
  background: #fff7ed;           /* warm/amber tint */
  border-color: #fed7aa;
}
.kpi-card--pes {
  background: #fef2f2;           /* red tint */
  border-color: #fecaca;
}

/* P&L headline colors */
.kpi-card--opt .kpi-main { color: #16a34a; }
.kpi-card--base .kpi-main { color: #f59e0b; }
.kpi-card--pes .kpi-main { color: #ef4444; }

/* Make secondary lines slightly darker for readability on tinted bg */
.kpi-card--opt .kpi-sub,
.kpi-card--base .kpi-sub,
.kpi-card--pes .kpi-sub {
  color: #6b7280;
}


/* Tight frame variant: maximize canvas usable area (used for pie chart) */
.chart-frame--tight {
}


/* Charts row: never stretch items to the same height */
.charts-grid {
  align-items: start !important;
}
.charts-grid > * {
  align-self: start;
}

/* Frames should size to content */
.chart-frame {
  align-self: start;
}


/* Pie chart layout (canvas + HTML legend) */
.pie-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 16px;
}

#costChart {
  width: 100%;
  height: 260px;
  display: block;
}

.cost-chart {
  width: 100%;
  height: 260px;
  display: block;
}

.pie-legend {
  flex: 1 1 auto;
  max-width: 260px;
}

.pie-legend__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}

.pie-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  display: inline-block;
}

.pie-legend__label {
  color: #475569;
  font-size: 14px;
  line-height: 1.2;
}


/* --- Palette tuning to match templates --- */
:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #f59e0b;
}

body { background: var(--bg); color: var(--text); }

/* Table headers typography */
table th { color: #475569; font-weight: 600; }

/* Pie legend typography */
.pie-legend__label { color: #334155; font-weight: 500; }

/* P&L card tints (ensure consistent) */
.kpi-card--opt { background: #ecfdf5; border-color: #bbf7d0; }
.kpi-card--base { background: #fff7ed; border-color: #fed7aa; }
.kpi-card--pes { background: #fef2f2; border-color: #fecaca; }
.kpi-card--opt .kpi-main { color: #16a34a; }
.kpi-card--base .kpi-main { color: #f59e0b; }
.kpi-card--pes .kpi-main { color: #ef4444; }


/* Help system */
.section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.link-btn{
  background:transparent;
  border:0;
  padding:0;
  font:inherit;
  color:var(--accent);
  cursor:pointer;
  text-decoration:underline;
}
.link-btn:hover{ opacity:.85; }

.mc-help-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:6px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
.mc-help-icon:focus{ outline:2px solid rgba(0,0,0,.15); outline-offset:2px; }

.mc-tooltip{
  position:fixed;
  z-index:9999;
  min-width:240px;
  max-width:360px;
  padding:12px 12px 10px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  display:none;
}
.mc-tooltip.show{ display:block; }
.mc-tooltip-title{
  font-weight:600;
  margin-bottom:6px;
}
.mc-tooltip-body{
  color:var(--text);
  font-size:13px;
  white-space:pre-line;
}
.mc-tooltip-more{
  margin-top:10px;
  background:transparent;
  border:0;
  padding:0;
  color:var(--accent);
  cursor:pointer;
  text-decoration:underline;
  font:inherit;
}

.mc-modal.hidden{ display:none; }
.mc-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:block;
}
.mc-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.mc-modal-panel{
  position:relative;
  width:min(880px, calc(100% - 24px));
  max-height:calc(100% - 24px);
  margin:12px auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
}
.mc-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.mc-modal-title{ font-weight:700; font-size:16px; }
.mc-modal-close{
  background:transparent;
  border:0;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:var(--muted);
}
.mc-modal-content{
  padding:14px 16px 18px;
  overflow:auto;
}
.mc-modal-content h3{
  margin:16px 0 8px;
  font-size:15px;
}
.mc-muted{ color:var(--muted); }
.mc-hr{ border:0; border-top:1px solid var(--border); margin:16px 0; }
.mc-glossary{ padding-left:18px; }


/* --- Step 3 (Final page) layout tweaks to match design --- */
#step3 .final-page{
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

#step3 .final-title{
  text-align: center;
  font-size: 32px;
  line-height: 1.15;
  margin: 6px 0 6px;
  font-weight: 700;
}

#step3 .final-subtitle{
  text-align: center;
  margin-bottom: 14px;
}

#step3 .final-actions{
  justify-content: center;
  gap: 12px;
  margin: 16px 0 18px;
}

#step3 .final-action-btn{
  flex: 1 1 220px;
  justify-content: center;
  padding: 12px 14px;
}

#step3 .final-buy-card{
  margin-top: 0;
  padding: 18px 18px 16px;
}

#step3 .final-buy-header{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

#step3 .final-buy-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff7db;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
}

#step3 .final-buy-title{
  font-size: 18px;
  font-weight: 700;
  margin-top: 6px;
}

#step3 .final-miner-name{
  width: 100%;
  background: #eaf9f0;
  border: 1px solid #c7f0d6;
  color: #0f5132;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  margin: 8px 0 12px;
}

#step3 .final-metrics{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

#step3 .final-metrics .badge{
  flex: 1 1 calc(50% - 10px);
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid #f1e2a3;
}

#step3 .final-buy-hint{
  margin-top: 10px;
}

#step3 .final-primary-cta{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}

#step3 .final-primary-btn{
  min-width: 280px;
  padding: 12px 18px;
}

#step3 .final-help{
  text-align:center;
  margin: 14px 0 10px;
}

#step3 .final-meeting{
  display:flex;
  justify-content:center;
  margin-bottom: 8px;
}

#step3 .final-meeting-btn{
  padding: 12px 16px;
}

#step3 .final-footer-links{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-top: 16px;
  padding: 0 4px;
}

@media (max-width: 640px){
  #step3 .final-title{ font-size: 26px; }
  #step3 .final-actions{ flex-direction: column; }
  #step3 .final-action-btn{ width: 100%; flex-basis: auto; }
  #step3 .final-miner-capsules .final-miner-name{ flex-basis: 100%; }
  #step3 .final-metrics .badge{ flex-basis: 100%; }
  #step3 .final-primary-btn{ width: 100%; min-width: 0; }
  #step3 .final-footer-links{ flex-direction: column; gap: 10px; }
}

#step3 .final-hidden-controls{ display:none; }


/* Miner capsules should behave like the KPI badges below (full-width grid, wrap as needed). */
#step3 .final-miner-capsules{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
#step3 .final-miner-capsules .final-miner-name{
  width: auto;              /* override the base 100% */
  flex: 1 1 calc(50% - 10px);
  margin: 8px 0 12px;
  min-width: 0;
}


/* --- Patch: layout fixes (2025-12-25) --- */
/* Make all key CTA buttons on the final page equal width. */
#step3{ --final-btn-width: 260px; }
#step3 .final-actions{
  justify-content: center;
}
#step3 .final-actions .final-action-btn{
  flex: 0 1 var(--final-btn-width);
  width: var(--final-btn-width);
  max-width: 100%;
}
#step3 .final-primary-btn,
#step3 .final-meeting-btn{
  width: var(--final-btn-width);
  min-width: var(--final-btn-width);
  max-width: 100%;
}
/* Center text on the primary CTA button. */
#step3 .final-primary-btn{
  display: flex;
  justify-content: center;
  text-align: center;
}


/* Center text for Schedule a meeting button */
.schedule-meeting, .btn-schedule, button { text-align: center; }

/* ===== Patch v4: final page fixes ===== */

/* Center label in "Schedule a meeting" button (and keep consistent with primary CTA) */
#step3 #btnScheduleMeeting,
#step3 .final-meeting-btn{
  display: inline-flex;
  justify-content: center;
  text-align: center;
}

/* Prevent final action buttons from becoming oversized on small screens.
   Keep them equal-width and allow wrapping instead of forcing full-width column layout. */
@media (max-width: 640px){
  #step3 .final-actions{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  #step3 .final-actions .final-action-btn{
    width: min(var(--final-btn-width), 100%);
    flex: 1 1 var(--final-btn-width);
  }
}

/* Miner name & quantity capsules: behave like regular wrap-capules below.
   Two per row when space allows; wrap naturally when not. */
#step3 .final-miner-capsules{
  margin-top: 8px;
}
#step3 .final-miner-capsules .final-miner-name{
  flex: 1 1 calc(50% - 5px);
  min-width: 240px;
  width: auto;
  margin: 0;
}



/* === PATCH v5: equal-width step breadcrumbs + spacing after miner capsules + center meeting button text === */
.steps{
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.steps .step-dot{
  flex: 1 1 0;
  min-width: 0;
}

/* space below miner name/qty capsules (same rhythm as badge rows) */
.final-miner-capsules{
  margin-bottom: 12px;
}

/* make sure Schedule a meeting label is truly centered */
.final-meeting-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ===========================
   Dark theme (toggle via <html data-bs-theme="dark">)
   Put this block at the END of styles.bundle.css
   =========================== */

:root[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Core surfaces */
  --bg: #0b1220;
  --card: #0f172a;

  /* Borders / separators */
  --border: #1f2a3a;
  --border-strong: #314155;

  /* Text */
  --text: #e5e7eb;
  --muted: #9aa4b2;

  /* Accent */
  --accent: #fbbf24;       /* keeps your amber brand */
  --accent-soft: rgba(251, 191, 36, 0.16);

  /* Status colors (keep same hue family, slightly brighter for dark bg) */
  --danger: #f87171;
  --success: #34d399;

  /* Shadow tuned for dark */
  --shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.55);
}

/* Inputs / selects on dark */
:root[data-bs-theme="dark"] input[type="text"],
:root[data-bs-theme="dark"] input[type="email"],
:root[data-bs-theme="dark"] input[type="tel"],
:root[data-bs-theme="dark"] input[type="number"],
:root[data-bs-theme="dark"] select {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: var(--border-strong);
}

:root[data-bs-theme="dark"] input::placeholder {
  color: rgba(229, 231, 235, 0.55);
}

:root[data-bs-theme="dark"] input:focus,
:root[data-bs-theme="dark"] select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
}

:root[data-bs-theme="dark"] select option {
  background: var(--card);
  color: var(--text);
}

/* Buttons */
:root[data-bs-theme="dark"] .btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text);
}

/* Tables */
:root[data-bs-theme="dark"] table th {
  color: rgba(229, 231, 235, 0.78);
}

:root[data-bs-theme="dark"] th,
:root[data-bs-theme="dark"] td {
  border-bottom-color: var(--border);
}

:root[data-bs-theme="dark"] tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}

/* KPI cards */
:root[data-bs-theme="dark"] .kpi-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}

:root[data-bs-theme="dark"] .kpi-sub,
:root[data-bs-theme="dark"] .hint,
:root[data-bs-theme="dark"] .subtitle,
:root[data-bs-theme="dark"] .steps,
:root[data-bs-theme="dark"] label {
  color: var(--muted);
}

/* Badges */
:root[data-bs-theme="dark"] .badge {
  background: rgba(251, 191, 36, 0.14);
  color: rgba(251, 191, 36, 0.95);
}

/* Chart frames: make the container dark (canvas itself is handled in JS currently) */
:root[data-bs-theme="dark"] .chart-frame {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}

/* Help tooltip / modal */
:root[data-bs-theme="dark"] .mc-tooltip,
:root[data-bs-theme="dark"] .mc-modal-panel {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.6);
}

:root[data-bs-theme="dark"] .mc-modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

:root[data-bs-theme="dark"] .mc-help-icon {
  border-color: var(--border-strong);
  color: var(--muted);
}

/* Optional: improve focus outline visibility on dark */
:root[data-bs-theme="dark"] .disclosure-btn:focus,
:root[data-bs-theme="dark"] .mc-help-icon:focus {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
}