/* Unit Converter — Self-Contained Styles */
:root { --p:#2563eb;--ph:#1d4ed8;--bg:#f8fafc;--s:#fff;--t:#1e293b;--tm:#64748b;--b:#e2e8f0;--r:8px;--green:#16a34a }
* { margin:0;padding:0;box-sizing:border-box }
html { font-size:16px }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--t);line-height:1.6 }
.c { max-width:800px;margin:0 auto;padding:0 16px }
.hd { background:var(--s);border-bottom:1px solid var(--b);padding:10px 0;position:sticky;top:0;z-index:100 }
.hd .c { display:flex;align-items:center;justify-content:space-between }
.logo { font-size:1.2rem;font-weight:700;color:var(--p);text-decoration:none }
.nav a { color:var(--tm);text-decoration:none;font-size:.85rem;margin-left:14px }
.nav a:hover { color:var(--p) }
.hero { padding:24px 0 16px;text-align:center }
.hero h1 { font-size:1.5rem;font-weight:800;margin-bottom:4px }
.hero .sub { font-size:.9rem;color:var(--tm);margin-bottom:16px }

/* Converter UI */
.converter-box { max-width:500px;margin:0 auto;background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:20px }
.category-select { width:100%;padding:10px;font-size:.9rem;border:1px solid var(--b);border-radius:var(--r);margin-bottom:16px;background:var(--s) }
.convert-row { display:flex;gap:8px;align-items:center;margin-bottom:12px }
.convert-row input { flex:1;padding:12px;font-size:1.1rem;font-weight:600;border:2px solid var(--b);border-radius:var(--r);outline:none }
.convert-row input:focus { border-color:var(--p) }
.convert-row select { width:140px;padding:10px;font-size:.82rem;border:1px solid var(--b);border-radius:var(--r);background:var(--s) }
.swap-btn { background:none;border:none;font-size:1.3rem;cursor:pointer;padding:4px 8px;color:var(--tm) }
.swap-btn:hover { color:var(--p) }

/* Result */
.result-display { text-align:center;padding:16px;background:var(--bg);border-radius:var(--r);margin:16px 0 }
.result-display .value { font-size:1.8rem;font-weight:800;color:var(--green) }
.result-display .formula { font-size:.8rem;color:var(--tm);margin-top:4px }

/* Conversion Table */
.conv-table { width:100%;border-collapse:collapse;font-size:.85rem;margin:16px 0 }
.conv-table th { padding:8px;text-align:left;background:var(--bg);border-bottom:2px solid var(--b);font-weight:600;font-size:.78rem;text-transform:uppercase;color:var(--tm) }
.conv-table td { padding:8px;border-bottom:1px solid var(--b) }
.conv-table tr:last-child td { border-bottom:none }

/* Related */
.related { margin-top:24px }
.related h2 { font-size:1rem;margin-bottom:8px }
.related-list { display:flex;flex-wrap:wrap;gap:8px;list-style:none }
.related-list a { display:inline-block;padding:6px 12px;font-size:.8rem;color:var(--p);background:var(--s);border:1px solid var(--b);border-radius:var(--r);text-decoration:none }
.related-list a:hover { border-color:var(--p) }

/* Ad + Footer */
.ad-slot { background:var(--b);border:1px dashed var(--tm);text-align:center;padding:20px;margin:16px 0;font-size:.75rem;color:var(--tm);border-radius:var(--r);min-height:90px;display:flex;align-items:center;justify-content:center }
.footer { background:var(--s);border-top:1px solid var(--b);padding:20px 0;margin-top:32px;text-align:center }
.footer p { font-size:.8rem;color:var(--tm) }
.footer nav a { color:var(--tm);text-decoration:none;font-size:.8rem;margin:0 8px }

/* Cookie consent */
#consent-banner { position:fixed;bottom:0;left:0;right:0;background:var(--t);color:#fff;padding:14px 16px;z-index:9999;box-shadow:0 -2px 10px rgba(0,0,0,.2) }
.consent-inner { max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap }
.consent-text { font-size:.82rem;line-height:1.4;flex:1;min-width:200px }
.consent-actions { display:flex;align-items:center;gap:8px;flex-shrink:0 }
.consent-btn { padding:8px 16px;border:none;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit }
.consent-accept { background:#16a34a;color:#fff }
.consent-reject { background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4) }
.consent-link { font-size:.75rem;color:rgba(255,255,255,.7);text-decoration:underline }

@media(max-width:500px) {
  .convert-row { flex-direction:column }
  .convert-row select { width:100% }
  .result-display .value { font-size:1.4rem }
  .consent-inner { flex-direction:column;text-align:center }
}