/* === Base === */
:root{
  --bg:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --card:#ffffff;
  --accent:#4f46e5;
  --accent-2:#0ea5e9;
  --ok:#16a34a;
  --fail:#ef4444;
  --warn:#f59e0b;

  /* new tokens */
  --ring: 0 0 0 3px rgba(79,70,229,.15);
  --shadow: 0 6px 20px rgba(2,6,23,.06);
}

.mc-body{ background:var(--bg); color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }

.mc-topline{ border-bottom:1px solid var(--line); background:#fff; }
.mc-back{ display:inline-block; padding:12px 0; color:var(--accent); font-weight:700; text-decoration:none; }
.mc-back:hover{ text-decoration:underline; }

/* Breadcrumb */
.mc-breadcrumb{ color:var(--muted); font-size:.95rem; margin:14px 0; }
.mc-breadcrumb a{ color:var(--muted); text-decoration:none; }
.mc-breadcrumb a:hover{ text-decoration:underline; }
.mc-sep{ margin:0 6px; }

/* Cards */
.mc-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:12px 0; box-shadow:var(--shadow); }
.mc-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mc-hero{ margin:6px 0 14px; }
.mc-h1{ font-size:1.75rem; line-height:1.2; margin:0; }
.mc-h2{ font-size:1.35rem; line-height:1.25; margin:0; }
.mc-h3{ font-size:1.075rem; margin:8px 0 6px; }
.muted{ color:var(--muted); }

/* Share bar */
.mc-sharebar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mc-sharebar strong{ margin-right:6px; }

/* Buttons */
.mc-btn,
.mc-primary,
.mc-secondary,
.mc-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:10px; padding:12px 16px; font-weight:700; text-decoration:none;
  border:1px solid var(--line); background:#fff; color:var(--text); cursor:pointer;
  line-height:1; min-height:44px; /* better tap target */
  transition: box-shadow .15s ease, transform .05s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.mc-btn:hover{ border-color:#cbd5e1; }
.mc-btn:active{ transform:translateY(1px); }
.mc-btn:focus-visible{ outline:none; box-shadow:var(--ring); }

.mc-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.mc-primary:hover{ filter:brightness(.96); }
.mc-primary:disabled{ opacity:.6; cursor:not-allowed; }

.mc-secondary{ background:#fff; color:var(--accent); border-color:var(--accent); }
.mc-secondary:hover{ background:#eef2ff; }

.mc-cta{ background:var(--accent-2); border-color:var(--accent-2); color:#fff; }
.mc-cta--block{ display:block; text-align:center; width:100%; }

/* Actions row */
.mc-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Form grid */
.mc-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.mc-grid label{ font-weight:700; font-size:.9rem; }
.mc-grid input, .mc-grid select{
  width:100%; padding:12px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--text);
  font-size:16px; /* prevent iOS zoom */
}
.mc-grid input::placeholder{ color:#94a3b8; }
.mc-grid input:focus, .mc-grid select:focus{ outline:none; box-shadow:var(--ring); border-color:#c7d2fe; }
.mc-grid .full{ grid-column:1 / -1; }
@media (min-width:900px){
  .mc-grid{ grid-template-columns:1fr 1fr; }
}

/* Result */
.mc-result-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
.mc-row{ display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; }
.badge{ padding:6px 10px; border-radius:9999px; font-weight:800; font-size:.78rem; letter-spacing:.02em; text-transform:uppercase; }
.badge.safe{ background:rgba(22,163,74,.12); color:#166534; border:1px solid rgba(22,163,74,.35); }
.badge.caution{ background:rgba(245,158,11,.12); color:#92400e; border:1px solid rgba(245,158,11,.35); }
.badge.high{ background:rgba(239,68,68,.12); color:#7f1d1d; border:1px solid rgba(239,68,68,.35); }

.mc-result ul{ margin:8px 0; padding-left:18px; }
.mc-result li{ margin:.15rem 0; }
.mc-result li.ok{ color:var(--ok); }
.mc-result li.fail{ color:var(--fail); }
.mc-links a{ color:var(--accent); text-decoration:none; margin-right:10px; }
.mc-links a:hover{ text-decoration:underline; }
.mc-alert{ padding:12px; border-radius:10px; }
.mc-alert--error{ background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; }

/* Article */
.mc-article-figure{ margin:0 0 10px; }
.mc-article-image{ width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }
.quote{ border-left:4px solid var(--accent); padding-left:12px; margin:10px 0; font-style:italic; color:var(--text); }

.mc-two-col{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:860px){ .mc-two-col{ grid-template-columns:1fr 1fr; } }
.mc-inset{ border:1px solid var(--line); background:#fff; border-radius:12px; padding:14px; margin:12px 0; }
.mc-ol{ margin-left:18px; }
.mc-faq{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; background:#fff; }
.mc-faq > summary{ cursor:pointer; font-weight:700; }

/* Ads wrapper */
.ad-container{ margin:12px 0; min-height:60px; }

/* Weights note */
.mc-weights{ font-size:.86rem; }

/* Utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Motion-respectful micro transitions */
@media (prefers-reduced-motion:no-preference){
  .mc-card, .mc-result-card{ transition: box-shadow .2s ease, transform .12s ease; }
  .mc-card:hover{ box-shadow:0 10px 28px rgba(2,6,23,.08); transform:translateY(-1px); }
}