/* ── Reset & scope ───────────────────────────────────────── */
.mc-wrap *           { box-sizing: border-box; margin: 0; padding: 0; }
.mc-wrap             { font-family: var(--font-head, system-ui, sans-serif);
                       font-size: var(--text-sm, .875rem);
                       color: var(--clr-text-primary, #111);
                       max-width: 100%; overflow-x: hidden; }
 
/* ── Top info bar ────────────────────────────────────────── */
.mc-top-bar          { display: flex; align-items: center; gap: .5rem;
                       padding: .55rem var(--sp-4, 1rem);
                       background: var(--clr-accent, #2563eb);
                       color: #fff;
                       border-radius: var(--r-lg, 8px) var(--r-lg, 8px) 0 0;
                       font-size: var(--text-xs, .75rem);
                       font-weight: var(--fw-medium, 500);
                       margin-bottom: var(--sp-4, 1rem); }
 
/* ── Grid layout ─────────────────────────────────────────── */
.mc-grid             { display: grid;
                       grid-template-columns: 340px 1fr;
                       gap: var(--sp-6, 1.5rem);
                       align-items: start; }
@media (max-width: 900px) { .mc-grid { grid-template-columns: 1fr; } }
 
/* ── Card base ───────────────────────────────────────────── */
.mc-card             { background: var(--clr-bg, #fff);
                       border: 1px solid var(--clr-border, #e2e8f0);
                       border-radius: var(--r-xl, 12px);
                       overflow: hidden; }
 
/* ── Input panel ─────────────────────────────────────────── */
.mc-input-panel      { display: flex; flex-direction: column; }
 
.mc-field            { display: flex; align-items: center;
                       padding: .42rem var(--sp-4, 1rem);
                       border-bottom: 1px solid var(--clr-border-soft, #f1f5f9);
                       gap: .5rem; flex-wrap: wrap; }
.mc-field:last-child { border-bottom: none; }
 
.mc-lbl              { flex: 1; min-width: 80px;
                       display: flex; align-items: center; gap: .3rem;
                       font-size: var(--text-xs, .75rem);
                       color: var(--clr-text-secondary, #475569);
                       font-weight: var(--fw-medium, 500); }
.mc-lbl-info         { width: 13px; height: 13px; border-radius: 50%;
                       background: var(--clr-bg-muted, #f1f5f9);
                       border: 1px solid var(--clr-border, #e2e8f0);
                       display: inline-flex; align-items: center; justify-content: center;
                       font-size: 9px; color: var(--clr-text-muted, #94a3b8);
                       cursor: default; flex-shrink: 0; line-height: 1; }
 
.mc-inp-wrap         { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.mc-inp              { width: 90px; min-width: 0; padding: .32rem .5rem;
                       border: 1.5px solid var(--clr-border, #e2e8f0);
                       border-radius: var(--r-md, 6px);
                       background: var(--clr-bg, #fff);
                       font-family: var(--font-head, system-ui);
                       font-size: var(--text-sm, .875rem);
                       font-weight: var(--fw-semibold, 600);
                       color: var(--clr-text-primary, #111);
                       outline: none;
                       transition: border-color .15s, box-shadow .15s;
                       -moz-appearance: textfield; appearance: textfield; }
.mc-inp::-webkit-outer-spin-button,
.mc-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
.mc-inp:focus        { border-color: var(--clr-accent, #2563eb);
                       box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.mc-inp.wide         { width: 110px; }
.mc-inp.narrow       { width: 60px; }
 
.mc-badge            { font-size: var(--text-xs, .75rem);
                       color: var(--clr-text-muted, #94a3b8);
                       background: var(--clr-bg-muted, #f1f5f9);
                       border: 1px solid var(--clr-border, #e2e8f0);
                       border-radius: var(--r-sm, 4px);
                       padding: .18rem .45rem;
                       white-space: nowrap; flex-shrink: 0; }
 
.mc-select           { padding: .3rem .28rem;
                       border: 1.5px solid var(--clr-border, #e2e8f0);
                       border-radius: var(--r-md, 6px);
                       background: var(--clr-bg, #fff);
                       font-family: var(--font-head, system-ui);
                       font-size: var(--text-xs, .75rem);
                       font-weight: var(--fw-medium, 500);
                       color: var(--clr-text-primary, #111);
                       cursor: pointer; outline: none;
                       transition: border-color .15s; }
.mc-select:focus     { border-color: var(--clr-accent, #2563eb); }
 
/* down-payment dual input */
.mc-dp-wrap          { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.mc-dp-pct           { width: 50px; }
.mc-dp-amt           { width: 78px; }
.mc-dp-sep           { font-size: .7rem; color: var(--clr-text-muted); }
 
/* ── Taxes section ───────────────────────────────────────── */
.mc-taxes-toggle     { display: flex; align-items: center; gap: .5rem;
                       padding: .5rem var(--sp-4, 1rem);
                       border-bottom: 1px solid var(--clr-border-soft, #f1f5f9);
                       cursor: pointer; user-select: none; }
.mc-taxes-toggle input[type=checkbox] { accent-color: var(--clr-accent, #2563eb);
                                        width: 14px; height: 14px; cursor: pointer; }
.mc-taxes-toggle span { font-size: var(--text-xs, .75rem);
                        font-weight: var(--fw-semibold, 600);
                        color: var(--clr-text-primary, #111); }
.mc-taxes-sub-hdr    { display: grid; grid-template-columns: 1fr 1fr;
                       padding: .3rem var(--sp-4, 1rem);
                       background: var(--clr-bg-soft, #f8fafc);
                       border-bottom: 1px solid var(--clr-border-soft); }
.mc-taxes-sub-hdr span { font-size: 10px; font-weight: var(--fw-semibold);
                         color: var(--clr-text-muted); text-transform: uppercase;
                         letter-spacing: .04em; }
.mc-taxes-body       { overflow: hidden;
                       transition: max-height .3s ease, opacity .3s ease;
                       max-height: 0; opacity: 0; }
.mc-taxes-body.open  { max-height: 500px; opacity: 1; }
 
.mc-tax-field        { display: flex; align-items: center; flex-wrap: wrap;
                       padding: .38rem var(--sp-4, 1rem);
                       border-bottom: 1px solid var(--clr-border-soft, #f1f5f9);
                       gap: .4rem; }
.mc-tax-lbl          { flex: 1; min-width: 80px;
                       font-size: var(--text-xs, .75rem);
                       color: var(--clr-text-secondary, #475569);
                       display: flex; align-items: center; gap: .3rem; }
 
/* ── More options ────────────────────────────────────────── */
.mc-more-btn         { display: flex; align-items: center; justify-content: center;
                       gap: .35rem; width: 100%;
                       padding: .5rem;
                       background: transparent;
                       border: none; border-top: 1px solid var(--clr-border-soft);
                       font-size: var(--text-xs, .75rem);
                       font-weight: var(--fw-semibold, 600);
                       color: var(--clr-accent, #2563eb);
                       cursor: pointer;
                       transition: background .15s; }
.mc-more-btn:hover   { background: var(--clr-accent-light, #eff6ff); }
.mc-more-body        { overflow: hidden; max-height: 0;
                       transition: max-height .3s ease; }
.mc-more-body.open   { max-height: 400px; }
 
/* ── Action buttons ──────────────────────────────────────── */
.mc-actions          { display: flex; gap: .5rem;
                       padding: .7rem var(--sp-4, 1rem);
                       border-top: 1px solid var(--clr-border-soft); }
.mc-clear-btn        { padding: .52rem .9rem;
                       background: transparent;
                       border: 1.5px solid var(--clr-border, #e2e8f0);
                       border-radius: var(--r-md, 6px);
                       font-family: var(--font-head, system-ui);
                       font-size: var(--text-sm, .875rem);
                       font-weight: var(--fw-medium, 500);
                       color: var(--clr-text-muted, #94a3b8);
                       cursor: pointer; transition: background .15s, color .15s; }
.mc-clear-btn:hover  { background: var(--clr-bg-soft); color: var(--clr-text-secondary); }
 
/* ── Results panel ───────────────────────────────────────── */
.mc-result-panel     { display: flex; flex-direction: column;
                       gap: var(--sp-4, 1rem); }
 
/* monthly pay header */
.mc-monthly-hdr      { background: var(--clr-accent, #2563eb);
                       color: #fff;
                       padding: .65rem 1rem;
                       border-radius: var(--r-xl, 12px) var(--r-xl, 12px) 0 0;
                       display: flex; align-items: center; justify-content: space-between; }
.mc-monthly-label    { font-size: var(--text-xs, .75rem); font-weight: var(--fw-medium); opacity: .85; }
.mc-monthly-value    { font-size: 1.45rem; font-weight: var(--fw-bold, 700);
                       letter-spacing: -.02em; }
.mc-print-btn        { display: inline-flex; align-items: center; gap: .3rem;
                       background: rgba(255,255,255,.18);
                       border: 1px solid rgba(255,255,255,.35);
                       border-radius: var(--r-sm, 4px);
                       color: #fff; padding: .2rem .5rem;
                       font-size: var(--text-xs, .75rem); font-weight: var(--fw-medium);
                       cursor: pointer; transition: background .15s; }
.mc-print-btn:hover  { background: rgba(255,255,255,.3); }
 
/* breakdown table */
.mc-breakdown        { border-radius: 0 0 var(--r-xl) var(--r-xl);
                       border: 1px solid var(--clr-border); border-top: none;
                       overflow: hidden; }
.mc-breakdown table  { width: 100%; border-collapse: collapse; }
.mc-breakdown th     { background: var(--clr-bg-soft, #f8fafc);
                       font-size: 10px; font-weight: var(--fw-semibold);
                       color: var(--clr-text-muted); text-transform: uppercase;
                       letter-spacing: .04em; padding: .45rem 1rem;
                       text-align: right; border-bottom: 1px solid var(--clr-border-soft); }
.mc-breakdown th:first-child { text-align: left; }
.mc-breakdown td     { padding: .38rem 1rem; font-size: var(--text-sm);
                       text-align: right; color: var(--clr-text-secondary);
                       border-bottom: 1px solid var(--clr-border-soft); }
.mc-breakdown td:first-child { text-align: left; color: var(--clr-text-primary); font-weight: var(--fw-medium); }
.mc-breakdown tr:last-child td { border-bottom: none; }
.mc-breakdown .mc-total-row td { font-weight: var(--fw-semibold);
                                  color: var(--clr-text-primary);
                                  background: var(--clr-bg-soft);
                                  border-top: 1px solid var(--clr-border); }
 
/* charts row */
.mc-charts-row       { display: grid; grid-template-columns: 180px 1fr;
                       gap: var(--sp-4); align-items: center; }
@media (max-width: 600px) { .mc-charts-row { grid-template-columns: 1fr; } }
 
.mc-pie-wrap         { position: relative; display: flex;
                       flex-direction: column; align-items: center; gap: .6rem; }
.mc-pie-legend       { display: flex; flex-direction: column; gap: .25rem;
                       width: 100%; }
.mc-legend-item      { display: flex; align-items: center; gap: .4rem;
                       font-size: 10px; color: var(--clr-text-secondary); }
.mc-legend-dot       { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
 
/* line chart */
.mc-line-wrap        { position: relative; }
.mc-line-wrap canvas { display: block; width: 100%; }
 
/* summary stats */
.mc-summary-grid     { display: grid; grid-template-columns: 1fr 1fr;
                       gap: .4rem; }
.mc-stat             { background: var(--clr-bg-soft, #f8fafc);
                       border: 1px solid var(--clr-border-soft);
                       border-radius: var(--r-md, 6px);
                       padding: .5rem .7rem; }
.mc-stat-lbl         { font-size: 10px; color: var(--clr-text-muted);
                       font-weight: var(--fw-semibold); text-transform: uppercase;
                       letter-spacing: .04em; margin-bottom: .18rem; }
.mc-stat-val         { font-size: var(--text-sm); font-weight: var(--fw-bold);
                       color: var(--clr-text-primary); letter-spacing: -.01em; }
 
/* ── Amortization section ────────────────────────────────── */
.mc-amort-section    { margin-top: var(--sp-2, .5rem); width: 380px;}
.mc-amort-hdr        { display: flex; align-items: center; justify-content: space-between;
                       padding: .6rem .8rem;
                       background: var(--clr-bg-soft);
                       border: 1px solid var(--clr-border);
                       border-radius: var(--r-lg, 8px);
                       cursor: pointer; user-select: none;
                       transition: background .15s; }
.mc-amort-hdr:hover  { background: var(--clr-accent-light, #eff6ff); }
.mc-amort-title      { font-size: var(--text-base, 1rem);
                       font-weight: var(--fw-bold, 700);
                       color: var(--clr-text-primary); }
.mc-amort-chevron    { color: var(--clr-text-muted);
                       transition: transform .25s ease; font-size: .8rem; }
.mc-amort-chevron.open { transform: rotate(180deg); }
 
.mc-amort-body       { overflow: hidden; max-height: 0;
                       transition: max-height .35s ease; }
.mc-amort-body.open  { max-height: 9999px; }
 
.mc-amort-inner      { padding-top: var(--sp-4, 1rem); }
 
/* tab bar */
.mc-tab-bar          { display: flex; gap: 0; margin-bottom: var(--sp-4);
                       border-bottom: 2px solid var(--clr-border-soft); }
.mc-tab              { padding: .4rem .9rem; font-size: var(--text-sm);
                       font-weight: var(--fw-semibold); color: var(--clr-text-muted);
                       background: transparent; border: none;
                       border-bottom: 2px solid transparent;
                       margin-bottom: -2px; cursor: pointer;
                       transition: color .15s, border-color .15s; }
.mc-tab.active       { color: var(--clr-accent, #2563eb);
                       border-bottom-color: var(--clr-accent, #2563eb); }
.mc-tab:hover        { color: var(--clr-text-primary); }
 
/* amort table */
.mc-amort-table-wrap { overflow-x: auto; border: 1px solid var(--clr-border);
                       border-radius: var(--r-lg, 8px); overflow: hidden; width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;}
.mc-amort-table      { width: 100%; border-collapse: collapse;
                       font-size: var(--text-xs, .75rem); }
.mc-amort-table th   { background: var(--clr-accent, #2563eb); color: #fff;
                       padding: .45rem .6rem; text-align: right;
                       font-weight: var(--fw-semibold); font-size: 10px;
                       text-transform: uppercase; letter-spacing: .04em;
                       white-space: nowrap; }
.mc-amort-table th:first-child  { text-align: center; }
.mc-amort-table th:nth-child(2) { text-align: left; }
.mc-amort-table td   { padding: .38rem .6rem; text-align: right;
                       border-bottom: 1px solid var(--clr-border-soft);
                       color: var(--clr-text-secondary); }
.mc-amort-table td:first-child  { text-align: center; font-weight: var(--fw-semibold);
                                   color: var(--clr-text-primary); }
.mc-amort-table td:nth-child(2) { text-align: left; color: var(--clr-text-muted); font-size: 10px; }
.mc-amort-table td:last-child   { font-weight: var(--fw-semibold);
                                   color: var(--clr-accent-dark, #1e40af); }
.mc-amort-table tr:last-child td { border-bottom: none; }
.mc-amort-table tr:hover td      { background: var(--clr-bg-soft); }
 
/* rate bar */
.mc-rate-bar         { display: flex; align-items: center; flex-wrap: wrap;
                       gap: .4rem .8rem;
                       padding: .55rem var(--sp-4, 1rem);
                       background: var(--clr-bg-soft, #f8fafc);
                       border-top: 1px solid var(--clr-border-soft);
                       font-size: var(--text-xs, .75rem); }
.mc-rate-bar-label   { color: var(--clr-text-muted); font-weight: var(--fw-semibold); }
.mc-rate-link        { color: var(--clr-accent, #2563eb); font-weight: var(--fw-semibold);
                       cursor: pointer; text-decoration: underline;
                       text-decoration-color: transparent;
                       transition: text-decoration-color .15s; }
.mc-rate-link:hover  { text-decoration-color: var(--clr-accent); }
 
/* ── Mobile overrides ────────────────────────────────────── */
@media (max-width: 480px) {
  .mc-field            { flex-wrap: wrap; gap: .35rem; }
  .mc-lbl              { width: 100%; flex: none; white-space: normal; }
  .mc-inp-wrap         { width: 100%; }
  .mc-inp              { flex: 1; width: auto; min-width: 60px; }
  .mc-inp.wide,
  .mc-inp.narrow       { width: auto; flex: 1; }
  .mc-dp-wrap          { width: 100%; }
  .mc-dp-pct,
  .mc-dp-amt           { flex: 1; width: auto; }
  .mc-tax-field        { flex-wrap: wrap; }
  .mc-tax-lbl          { width: 100%; flex: none; }
  .mc-charts-row       { grid-template-columns: 1fr; }
  .mc-summary-grid     { grid-template-columns: 1fr; }
  .mc-amort-table-wrap { font-size: 10px; }
  .mc-amort-table th,
  .mc-amort-table td   { padding: .3rem .4rem; }
}
@media (max-width: 640px) {
  .mc-charts-row       { grid-template-columns: 1fr; }
  .mc-result-panel .mc-card { overflow-x: hidden; }
  .mc-breakdown table  { font-size: var(--text-xs, .75rem); }
  .mc-breakdown th,
  .mc-breakdown td     { padding: .32rem .6rem; }
}