:root{
  --bg:#0b1f14;
  --text:#0e1a12;
  --brand:#0EA5E9;
  --brand-2:#22C55E;
  --muted:#5b6b5f;
  --card:#ffffff;
  --border:#e6ece9;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text);background:#f7faf8}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:#0a7aca;text-decoration:none}
a:hover{text-decoration:underline}
.mm-header{position:sticky;top:0;background:linear-gradient(180deg,#0f3a24 0,#115e34 120%);color:#fff;border-bottom:1px solid rgba(255,255,255,.12);z-index:10}
.mm-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.logo{font-weight:800;letter-spacing:.2px;color:#fff;text-decoration:none}
.logo .spark{color:#22C55E;margin-right:.35rem}
.main-nav a{color:#e7fff2;margin-left:18px}
.hero{padding:56px 0 24px;background:linear-gradient(180deg,rgba(34,197,94,.08),transparent)}
.hero h1{font-size:40px;margin:0 0 12px}
.hero p{font-size:18px;color:#2d4135;margin:0 0 14px}
.search{display:flex;gap:8px;margin:16px 0}
.search input{flex:1;padding:14px 12px;border-radius:12px;border:1px solid var(--border);outline:0}
.search button{padding:14px 16px;border-radius:12px;border:0;background:var(--brand);color:#fff;font-weight:700;box-shadow:var(--shadow)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}
.tab{padding:10px 14px;border:1px solid var(--border);background:#fff;border-radius:999px;cursor:pointer}
.tab.active{background:var(--brand);color:#fff;border-color:transparent}
.converter{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.converter .col{display:flex;flex-direction:column;gap:8px}
.converter input,.converter select{padding:12px;border:1px solid var(--border);border-radius:10px}
.converter .swap{justify-self:center;align-self:center;background:#f0faf4;border:1px dashed var(--border);border-radius:10px;padding:8px 12px;cursor:pointer}
.grid{display:grid;gap:20px}
.mm-footer{margin-top:40px;background:#0b1f14;color:#d9f7e7}
.mm-footer .wrap{padding:28px 20px}
.mm-footer .grid{grid-template-columns:2fr 1fr 1fr}
.mm-footer a{color:#b6ffdb}
.mm-footer .sub{border-top:1px solid rgba(255,255,255,.1);padding:12px 0;text-align:center}
.section{padding:22px 0}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:13px}
.badge{padding:4px 8px;border-radius:8px;background:#eaf7ff;border:1px solid #d8eefc;color:#0a7aca;font-weight:600}
.breadcrumbs{font-size:14px;color:#506558;margin:10px 0}
.ad-slot{display:flex;align-items:center;justify-content:center;border:1px dashed #c9d6cf;border-radius:12px;padding:12px;color:#5f7768;background:#f9fdfa;margin:10px 0}
table{border-collapse:collapse;width:100%;background:#fff}
th,td{border:1px solid var(--border);padding:8px}
h2{margin-top:28px}
/* Dark tool card style for the volume tool */
.tool-card{background:#111827;color:#e5e7eb;border:1px solid #1f2937;border-radius:16px;padding:18px}
.tool-card .row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.tool-card input,.tool-card select{width:100%;padding:12px 10px;border-radius:10px;border:1px solid #374151;background:#0b1220;color:#e5e7eb}
.eq{font-size:20px;opacity:.9}
.swap-btn{margin-top:10px;background:#0b1220;border:1px solid #374151;border-radius:10px;padding:8px 12px;color:#e5e7eb;cursor:pointer}
.note{margin-top:12px;font-size:14px;color:#cbd5e1}
.note .badge{background:#facc15;color:#111827;padding:2px 8px;border-radius:6px;border:0;margin-right:8px}
@media (max-width:800px){.converter{grid-template-columns:1fr}.mm-footer .grid{grid-template-columns:1fr 1fr}.tool-card .row{grid-template-columns:1fr}.eq{display:none}}