:root{--blue:#1d4ed8;--blue-d:#1e3a8a;--green:#16a34a;--ink:#0f172a;--mut:#64748b;--bg:#f8fafc}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;line-height:1.25}
a{color:var(--blue)}
.cn-nav{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);box-shadow:0 1px 8px rgba(15,23,42,.08)}
.cn-nav .navbar-brand{color:var(--ink);font-size:1.3rem}
.cn-nav .nav-link{color:#334155;font-weight:500}.cn-nav .nav-link:hover{color:var(--blue)}
.cn-logo{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:8px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;font-weight:800}
.hero-badge{display:inline-block;padding:.25rem .8rem;border-radius:99px;background:rgba(255,255,255,.18);font-size:.85rem;font-weight:600}
.ad-wrap{position:relative;margin:1.25rem auto;text-align:center;background:#f1f5f9;border-radius:12px;overflow:hidden;padding-top:18px;max-width:100%}
.ad-label{position:absolute;top:2px;left:0;right:0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}
.cn-card{background:#fff;border-radius:20px;box-shadow:0 8px 30px rgba(15,23,42,.07);padding:1.5rem}
.form-control:focus,.form-range:focus{box-shadow:0 0 0 .2rem rgba(29,78,216,.18);border-color:var(--blue)}
.form-range::-webkit-slider-thumb{background:var(--blue)}.form-range::-moz-range-thumb{background:var(--blue)}
.input-group-text{background:#eff6ff;color:var(--blue-d);font-weight:600}
.res-main{background:linear-gradient(135deg,var(--blue),#0ea5e9);color:#fff;border-radius:16px;padding:1.25rem;text-align:center}
.res-main .big{font-size:2.2rem;font-weight:800;line-height:1.2}
.res-box{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:14px;padding:.8rem 1rem;height:100%}
.res-box small{color:var(--mut);display:block}.res-box strong{font-size:1.1rem}
.chart-box{position:relative;height:260px}
.guide h2{margin-top:0}.guide h3{margin-top:1.8rem;font-size:1.25rem;color:var(--blue-d)}
.formula{background:#eff6ff;border-left:4px solid var(--blue);padding:.9rem 1.1rem;border-radius:10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92rem;overflow-x:auto}
.accordion-button:not(.collapsed){background:#eff6ff;color:var(--blue-d)}
.legal{background:#fff;border-radius:20px;box-shadow:0 8px 30px rgba(15,23,42,.07);padding:2rem}
.legal h2{font-size:1.3rem;margin-top:1.8rem}
.cn-foot{background:#0f172a;color:#cbd5e1}.cn-foot a{color:#e2e8f0;text-decoration:none}.cn-foot a:hover{color:#4ade80}
@media(max-width:991.98px){body{padding-bottom:64px}}

/* ---- GPT ad placements ---- */
.ad-wrap{margin:1.25rem auto}
.ad-wrap .gpt-ad{display:flex;justify-content:center;align-items:center;max-width:100%;margin:0 auto}
.ad-wrap .gpt-ad>div{max-width:100%}
.ad-wrap.ad-empty{display:none}
.ad-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin:1.25rem 0}
.ad-row .ad-wrap{margin:0}
.ad-stack .ad-wrap{margin:0 auto 1.25rem}
.ad-stack{padding-top:.25rem}
.site-wrap{position:relative}
.rail{display:none}
@media(min-width:1680px){
  .rail{display:block;position:absolute;top:0;bottom:0;width:160px;z-index:1}
  .rail-l{left:calc(50% - 660px - 172px)}
  .rail-r{right:calc(50% - 660px - 172px)}
  .rail .ad-wrap{margin:0;width:160px;padding-top:18px;position:sticky;top:90px}
}
.accordion+.ad-wrap{margin-top:1.25rem}
/* debug outlines: add ?adsdebug=1 to the URL */
.ads-debug .ad-wrap{outline:2px dashed #ef4444;background:#fee2e2}
.ads-debug .gpt-ad::before{content:attr(data-debug);font:600 11px/1.3 monospace;color:#b91c1c}