:root { --bg:#0f0f12; --panel:#1a1b22; --panel-2:#12131a; --text:#E8E8EA; --muted:#B7B7C0; --primary:#C0162C; --accent:#16A34A; --ring: rgba(192,22,44,.45);}
*{box-sizing:border-box} body.bg-dark{background:radial-gradient(1200px 800px at 10% -10%, #20161A, var(--bg));color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.5}
a{color:var(--accent)} .container{width:min(1100px,92%);margin:0 auto} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.site-header{position:sticky;top:0;background:color-mix(in srgb,var(--panel),transparent 55%);backdrop-filter:blur(8px);border-bottom:1px solid #2a2b34;z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 0} .brand{color:#fff;font-weight:800;font-size:20px} .nav a{margin-left:18px;color:#EDEEF2;opacity:.9}
.hero{background:conic-gradient(from 40deg at 30% -20%, var(--primary), #63121E, var(--panel));padding:56px 0 28px;border-bottom:1px solid #2a2b34}
.hero-inner h1{font-size:clamp(32px,4vw,52px);margin:0 0 6px} .lead{font-size:clamp(16px,2vw,20px);color:var(--muted)}
.card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel),transparent 0%) 0%,var(--panel) 100%);border:1px solid #272833;border-radius:16px;padding:22px;margin:24px auto;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.field label{display:block;font-weight:600;margin-bottom:6px} .input-prefix{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center}
input,select,textarea{width:100%;background:var(--panel-2);color:#EDEEF2;border:1px solid #2b2c37;border-radius:12px;padding:12px 14px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)} small{color:var(--muted);display:block;margin-top:6px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px} .btn{background:linear-gradient(180deg,color-mix(in srgb,var(--primary),#ff6b6b 10%),var(--primary));color:#fff;border:none;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer;transition:transform .05s ease}
.btn:hover{transform:translateY(-1px)} .btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent)} .btn-ghost{background:transparent;color:#EDEEF2;border:1px dashed #3a3b45}
.results{margin-top:10px} .result-card{border:1px solid #2b2c37;border-radius:14px;padding:16px;background:#13141a} .result-title{color:#D9DBE6;font-weight:700} .result-value{font-size:26px;font-weight:800;margin:6px 0;color:#fff} .result-sub{color:#A5A7B2;font-size:13px}
.site-footer{margin-top:40px;padding:28px 0;border-top:1px solid #262735;background:#0e0f14} .smallprint{margin-top:10px;color:#8C8F99;font-size:13px} .linklike{background:none;border:none;color:var(--accent);cursor:pointer;padding:0}
.consent{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.5);padding:22px} .consent.hidden{display:none}
.consent-card{width:min(720px,100%);background:linear-gradient(180deg,#2a0a10,#16090c);border:1px solid #4a1a22;color:#fff;border-radius:16px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.45)} .consent-actions{display:flex;gap:12px;justify-content:flex-end}
.btn-accept{background:linear-gradient(180deg,color-mix(in srgb,var(--accent),#7bf094 10%),var(--accent));color:#07240F} .btn-reject{background:transparent;border:1px solid #6b1c27;color:#ffdfe4}
@media (max-width:640px){.input-prefix{grid-template-columns:80px 1fr} .nav a{margin-left:12px}}


.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-sm{padding:10px 12px;border-radius:10px;font-size:14px}
@media (max-width:720px){
  .nav{display:none}
  .header-actions{gap:6px}
  .btn-sm{padding:9px 10px;font-size:13px}
}

.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:10px}
.post-card{display:block;background:#13141a;border:1px solid #2b2c37;border-radius:14px;padding:16px;color:#EDEEF2;text-decoration:none}
.post-card h3{margin:0 0 8px;font-size:18px}
.post-card p{margin:0 0 12px;color:#B7B7C0;font-size:14px}
.post-card .more{font-size:14px;color:var(--accent)}
.post-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}

.skip-link{position:absolute;left:-999px;top:0;background:#0a0d14;color:#fff;padding:8px 12px;border-radius:8px;z-index:1000}
.skip-link:focus{left:12px;top:12px;outline:2px solid currentColor}
:focus-visible{outline:3px solid #8b5cf6;outline-offset:2px}

.post-nav .muted{color:#9AA0B4;font-size:12px}
.post-nav a{text-decoration:none}


/* === Mobile polish (≤640px): center & improve legibility without affecting desktop === */
@media (max-width: 640px){
  html, body{font-size:16px; line-height:1.6;}
  .container{padding-left:14px; padding-right:14px;}
  header.site-header, .site-footer{padding-left:14px; padding-right:14px;}
  /* Center primary headings and intro text */
  h1, h2, .lead, .hero h1, .hero p{text-align:center;}
  /* Make buttons and inputs full-width and evenly spaced */
  button, .btn, input[type="text"], input[type="number"], input[type="email"], select{
    width:100%; max-width:100%;
    display:block; margin:10px 0;
  }
  /* Calculator controls layout */
  form .row, .controls-row, .input-row{display:block;}
  .controls-row > *{width:100%;}
  /* Grid components collapse to single column */
  .grid-2, .grid-3, .post-grid{display:grid; grid-template-columns:1fr !important; gap:16px;}
  /* Card spacing and rounding */
  .card{border-radius:16px; padding:16px; margin:10px 0;}
  /* Tables: horizontal scroll instead of overflow */
  table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  th, td{white-space:nowrap;}
  /* Images & iframes scale and center */
  img, svg, video, iframe{max-width:100%; height:auto; display:block; margin:8px auto;}
  /* Header nav: stack and center */
  nav.site-nav ul{display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; margin:12px 0 0;}
  nav.site-nav a{display:inline-block; padding:8px 10px;}
  /* Footer links centered, multi-line */
  .site-footer .footer-col, .site-footer ul{text-align:center;}
  .site-footer ul{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding-left:0;}
  .site-footer li{list-style:none;}
  /* Blog TOC: compact */
  nav[aria-label="Table of contents"]{text-align:left; margin:12px auto;}
  nav[aria-label="Table of contents"] ul{padding-left:18px;}
  /* Prevent sticky header overlap with skip link focus */
  .skip-link:focus{top:12px; left:12px; position:fixed;}
}