:root{
  --bg:#0b0f19; --bg2:#111827; --card:#161d2e; --border:#2a3348;
  --text:#e5e9f2; --muted:#93a0bd; --accent:#6366f1; --accent2:#22d3ee;
  --good:#34d399; --warn:#fbbf24; --bad:#f87171;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; overflow-x:hidden;
}
a{color:var(--accent2); text-decoration:none;}
a:hover{text-decoration:underline;}
code, .mono{font-family:"SF Mono",Consolas,Menlo,monospace;}
.wrap{max-width:880px; margin:0 auto; padding:0 20px 60px;}

header.top{border-bottom:1px solid var(--border); background:var(--bg2);}
header.top .inner{max-width:880px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.logo{font-weight:900; font-size:1.05rem; color:#fff;}
.logo span{color:var(--accent2);}
nav.mainnav{display:flex; gap:16px; flex-wrap:wrap; font-size:.86rem;}
nav.mainnav a{color:var(--muted);}
nav.mainnav a:hover{color:var(--accent2);}

.badge{display:inline-block; background:rgba(99,102,241,.14); color:#a5b4fc; border:1px solid rgba(99,102,241,.35);
  font-size:.72rem; font-weight:700; padding:4px 12px; border-radius:999px; margin:24px 0 10px; letter-spacing:.03em;}
h1{font-size:1.7rem; margin:0 0 10px; color:#fff; line-height:1.3;}
h2{font-size:1.25rem; color:#fff; margin-top:2.2rem;}
h3{font-size:1.05rem; color:#fff;}
p.sub{color:var(--muted); margin-bottom:26px; font-size:.98rem;}

.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; margin-bottom:22px;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr;}}

.field{margin-bottom:14px;}
.field label{display:block; font-size:.8rem; color:var(--muted); margin-bottom:5px; font-weight:600;}
.field input[type=number], .field select{
  width:100%; padding:10px 11px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text); font-size:.95rem;
}
.field input[type=range]{width:100%;}
.checkrow{display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--text); margin-bottom:14px;}
.checkrow input{width:18px; height:18px;}

table{width:100%; border-collapse:collapse; margin:14px 0; font-size:.86rem;}
th,td{border:1px solid var(--border); padding:9px 10px; text-align:left;}
th{background:var(--bg2); color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.02em;}
tr.cheapest td{background:rgba(52,211,153,.08); color:#fff;}
tr.selected td{outline:1px solid var(--accent2);}
.tag{display:inline-block; font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:6px;}
.tag.cheapest{background:rgba(52,211,153,.18); color:var(--good);}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}

.result-total{font-size:2rem; font-weight:900; color:#fff; text-align:center; margin:6px 0 2px;}
.result-sub{text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:6px;}

.notebox{background:rgba(34,211,238,.06); border:1px solid rgba(34,211,238,.25); border-radius:12px; padding:14px 16px; font-size:.85rem; color:var(--muted); margin:18px 0;}
.notebox b{color:#fff;}

.disclaimer{background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.25); border-radius:12px; padding:14px 16px; font-size:.82rem; color:var(--muted); margin:18px 0;}

.tools-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0;}
@media(max-width:640px){.tools-grid{grid-template-columns:1fr;}}
.tool-card{display:block; background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px; transition:border-color .15s;}
.tool-card:hover{border-color:var(--accent2); text-decoration:none;}
.tool-card h3{margin:0 0 4px; font-size:.95rem;}
.tool-card p{margin:0; color:var(--muted); font-size:.82rem;}

.ad-slot{margin:26px 0; text-align:center; min-height:90px;}

.faq details{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:8px;}
.faq summary{cursor:pointer; font-weight:700; color:#fff; font-size:.92rem;}
.faq p{margin-top:8px; color:#cbd5e1; font-size:.88rem;}

section.content{padding:20px 0; border-top:1px solid var(--border); margin-top:8px;}
section.content p{color:#cbd5e1; font-size:.92rem;}

footer{padding:28px 0; border-top:1px solid var(--border); color:var(--muted); font-size:.8rem; text-align:center;}
footer a{color:var(--muted); margin:0 8px;}
footer a:hover{color:var(--accent2);}