:root{--bg:#0b0d12;--panel:#12151d;--card:#171b25;--line:#252b38;--text:#e9ecf3;--muted:#9aa3b5;--accent:#7c5cff;--accent2:#22d3ee;--ok:#34d399;--radius:16px;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;background:radial-gradient(1200px 600px at 10% -10%,rgba(124,92,255,.18),transparent 60%),radial-gradient(900px 500px at 110% 10%,rgba(34,211,238,.10),transparent 60%),var(--bg);color:var(--text);min-height:100vh}
a{color:var(--accent2);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header.site{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-size:18px}
.brand:hover{text-decoration:none}.brand .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:16px}
nav.top a{color:var(--muted);margin-left:18px;font-size:14px}nav.top a:hover{color:var(--text)}
.hero{padding:56px 0 18px;text-align:center}
.hero h1{font-size:clamp(32px,6vw,56px);line-height:1.05;letter-spacing:-.035em;margin:0 0 14px}
.hero h1 .grad{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{color:var(--muted);font-size:clamp(16px,2.2vw,19px);margin:0 auto 28px;max-width:620px}
form.ask{display:flex;gap:10px;max-width:720px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:var(--shadow)}
form.ask:focus-within{border-color:var(--accent)}
form.ask input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font-size:18px;padding:12px 12px}
form.ask input::placeholder{color:#6b7385}
button,.btn{appearance:none;border:0;cursor:pointer;font-weight:700;font-size:15px;border-radius:12px;padding:12px 18px;background:linear-gradient(135deg,var(--accent),#5b8cff);color:#fff;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
button:hover,.btn:hover{filter:brightness(1.08);text-decoration:none}
button[disabled]{opacity:.6;cursor:wait}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px auto 0;max-width:760px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--muted);padding:7px 12px;border-radius:999px;font-size:14px;cursor:pointer;font-weight:500}
.chip:hover{color:var(--text);border-color:var(--accent)}
#results{max-width:880px;margin:34px auto 10px;min-height:20px}
.status{color:var(--muted);text-align:center;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);position:relative}
.card.top{border-color:rgba(124,92,255,.65)}
.card .rank{position:absolute;top:-10px;left:16px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}
.card h3{margin:4px 0 0;font-size:20px;letter-spacing:-.01em}
.card .cat{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.card .reason{margin:0;color:#d5d9e3}
.card .price{font-size:14px;color:var(--ok)}
.card .actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card .aff{font-size:11px;color:var(--muted)}
.steps{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.steps h2{font-size:16px;margin:0 0 12px;color:var(--muted);font-weight:600}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.steps li{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.steps .n{width:26px;height:26px;border-radius:50%;background:rgba(124,92,255,.2);color:#c9bcff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.steps .lbl{font-weight:700;min-width:140px}.steps .tool{color:var(--muted);flex:1}
.steps a.mini{font-size:13px;font-weight:700;white-space:nowrap}
.meta{color:var(--muted);font-size:12px;text-align:center;margin-top:12px}
section.block{padding:42px 0}
section.block h2{font-size:24px;letter-spacing:-.02em}
.tasks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.tasks a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text);font-size:15px}
.tasks a:hover{border-color:var(--accent);text-decoration:none}
article.page{max-width:820px;margin:0 auto;padding:30px 0 40px}
article.page h1{font-size:clamp(28px,4.5vw,42px);letter-spacing:-.03em;line-height:1.1;margin:10px 0 12px}
article.page .lead{color:var(--muted);font-size:18px}
article.page h2{margin-top:36px}
.crumbs{font-size:13px;color:var(--muted)}
.notice{font-size:13px;color:var(--muted);border-left:3px solid var(--accent);padding:6px 12px;background:var(--panel);border-radius:0 10px 10px 0}
.also{display:grid;gap:10px}.also .row{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.also .row p{margin:2px 0 0;color:var(--muted);font-size:14px}
.cta{margin:36px 0 0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
footer.site{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 40px;color:var(--muted);font-size:14px}
footer.site .cols{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between}
footer.site a{color:var(--muted)}footer.site a:hover{color:var(--text)}
@media (max-width:640px){form.ask{flex-direction:column;padding:10px}form.ask button{width:100%;justify-content:center}nav.top a{margin-left:12px;font-size:13px;white-space:nowrap}.brand{white-space:nowrap;font-size:15px}.steps li{flex-wrap:wrap}.steps .lbl{min-width:0}.hero{padding-top:30px}}
.share{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:18px auto 0}
.share .lbl{color:var(--muted);font-size:14px;margin-right:4px}
.ghost{appearance:none;background:var(--panel);border:1px solid var(--line);color:var(--text);font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center}
.ghost:hover{border-color:var(--accent);text-decoration:none;filter:none}
.share-line{margin:14px 0 0;color:var(--muted);font-size:14px}
.sponsor-slot{max-width:880px;margin:18px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;border:1px dashed var(--line);border-radius:14px;padding:12px 16px;background:rgba(18,21,29,.6);font-size:14px}
.sponsor-slot .sp-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#0b0d12;background:#fbbf24;border-radius:6px;padding:2px 7px}
.sponsor-slot a{color:var(--text)}.sponsor-slot .sp-note{color:var(--muted);font-size:12px;flex-basis:100%}
.sponsor-plans{margin:14px 0}

/* guide answer, faq, related, news */
.updated{color:var(--muted,#8b8fa3);font-size:.9rem;margin:.2rem 0 .8rem}
.answer{font-size:1.12rem;line-height:1.55;border-left:3px solid #7c5cff;padding:.2rem 0 .2rem .9rem;margin:.6rem 0 1rem}
.howto{padding-left:1.3rem}.howto li{margin:.35rem 0}
.faq details{border:1px solid rgba(127,127,127,.25);border-radius:10px;padding:.6rem .9rem;margin:.5rem 0}
.faq summary{font-weight:600;cursor:pointer}.faq p{margin:.5rem 0 0}
.related{padding-left:1.2rem}.related li{margin:.3rem 0}
.news-item{border:1px solid rgba(127,127,127,.25);border-radius:12px;padding:1rem 1.1rem;margin:1rem 0}
.news-item h2{margin:.2rem 0 .5rem;font-size:1.25rem}.news-item .maker{font-weight:400;font-size:.95rem;color:var(--muted,#8b8fa3)}
.news-item .src{font-size:.9rem}
/* comparison pages */
.cmp-wrap{overflow-x:auto;margin:.6rem 0 1rem}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;line-height:1.45}
.cmp caption{text-align:left;font-size:12px;color:var(--muted);padding-bottom:6px}
.cmp th,.cmp td{border:1px solid rgba(127,127,127,.25);padding:8px 10px;text-align:left;vertical-align:top}
.cmp thead th{background:var(--panel);font-weight:600}
.cmp tbody th{font-weight:600;white-space:nowrap}
.cmp .aff{display:block;font-weight:400;margin-top:2px}
.who li{margin:.45rem 0}
.sources{font-size:13px}.src-note{font-size:13px;color:var(--muted)}

.sponsored-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#7a5a00;background:#fff4cc;border:1px solid #e8d48a;border-radius:4px;padding:1px 6px;vertical-align:middle;margin-left:6px}