.mc-app {
  --gap: 12px; --fg:#111; --muted:#666; --bg:#fff; --line:#e5e7eb; --focus:#2563eb;
  color: var(--fg);
}

.mc-app * , .mc-app *::before, .mc-app *::after { box-sizing: border-box; }

.mc-wrap { max-width: 980px; margin: 32px auto; padding: 0 16px; }

.mc-app fieldset { border:1px solid var(--line); border-radius: 10px; padding:16px; }
.mc-app legend { padding: 0 6px; font-weight: 600; }

.mc-grid { display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.mc-col-3{ grid-column: span 3; } .mc-col-4{ grid-column: span 4; } .mc-col-5{ grid-column: span 5; }
.mc-col-6{ grid-column: span 6; } .mc-col-7{ grid-column: span 7; } .mc-col-12{ grid-column: 1 / -1; }

.mc-app label { display:block; font-size: .95rem; margin-bottom:6px; }

.mc-app input,
.mc-app select,
.mc-app button {
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:.95rem;
}

/* ✅ Keep checkboxes small and inline */
.mc-app input[type="checkbox"] {
  width:auto;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding:0;
}

/* Row for checkbox + text */
.mc-row {
  display:flex;
  align-items:center;
  gap:10px;
}

.mc-hint { font-size:.9rem; color:var(--muted); margin: 6px 0 0; }
.mc-muted { color:var(--muted); }

.mc-card { border:1px solid var(--line); border-radius:12px; padding:16px; background: var(--bg); }

.mc-totals { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.mc-money { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }
.mc-kpi { font-size:1.4rem; font-weight:700; }
.mc-breakdown { border-top:1px dashed var(--line); margin-top:12px; padding-top:12px; }
.mc-line { display:flex; justify-content:space-between; padding:6px 0; gap:8px; }

.mc-pill { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:3px 8px; font-size:.8rem; }
.mc-footer-note { font-size:.9rem; color:var(--muted); margin-top:12px; }

.mc-btn {
  appearance:none;
  border:1px solid var(--line);
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}

.mc-btn:focus,
.mc-app input:focus,
.mc-app select:focus {
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-color:transparent;
}

@media (max-width: 1100px) {
  .mc-col-3, .mc-col-4, .mc-col-5 { grid-column: span 6; }
  .mc-col-6, .mc-col-7 { grid-column: span 12; }
}

@media (max-width: 720px) {
  .mc-app { --gap: 14px; }
  .mc-wrap { padding: 0 20px; }
  .mc-col-3, .mc-col-4, .mc-col-5, .mc-col-6, .mc-col-7, .mc-col-12 { grid-column: 1 / -1; }

  /* Mobile tap targets for text inputs/buttons */
  .mc-app input,
  .mc-app select,
  .mc-app button {
    min-height: 48px;
    padding: 12px 14px;
  }

  /* 🔒 But do NOT blow up checkboxes */
  .mc-app input[type="checkbox"] {
    min-height: 18px;
    height: 18px;
    width:auto;
    padding:0;
  }

  .mc-btn { min-height: 48px; width:100%; }
  .mc-kpi { font-size: 1.6rem; }
  .mc-hint, .mc-footer-note { font-size: .95rem; }

  /* Make sure checkbox + label stay in a row */
  .mc-row {
    display:flex;
    align-items:center;
    gap:10px;
  }
}

@media (max-width: 380px) {
  .mc-kpi { font-size: 1.7rem; }
}