:root{--bg:#0d1117;--bg2:#161b22;--bg3:#1c2330;--txt:#e6edf3;--mut:#8b949e;--acc:#3fb950;--acc2:#2ea043;--gold:#e3b341;--bord:#30363d;--rad:12px}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--txt);font:16px/1.7 -apple-system,'Segoe UI',Roboto,Arial,sans-serif}
a{color:#58a6ff;text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
header{background:var(--bg2);border-bottom:1px solid var(--bord);padding:14px 0;position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.logo{font-size:20px;font-weight:800;color:var(--txt)}.logo span{color:var(--acc)}
nav a{color:var(--mut);margin-right:18px;font-size:15px}nav a:hover{color:var(--txt);text-decoration:none}
h1{font-size:32px;line-height:1.25;margin:34px 0 14px}
h2{font-size:24px;margin:36px 0 12px}h3{font-size:19px;margin:26px 0 10px}
p{margin:0 0 14px}.lead{font-size:18px;color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin:24px 0}
.card{background:var(--bg2);border:1px solid var(--bord);border-radius:var(--rad);padding:20px;display:flex;flex-direction:column}
.card h3{margin:0 0 6px}.card .meta{color:var(--mut);font-size:14px;flex:1}
.badge{display:inline-block;background:var(--bg3);border:1px solid var(--bord);border-radius:20px;padding:2px 10px;font-size:12px;color:var(--mut);margin:0 6px 6px 0}
.badge.free{color:var(--acc);border-color:var(--acc2)}
.btn{display:inline-block;background:var(--acc2);color:#fff;font-weight:700;padding:10px 22px;border-radius:8px;text-align:center;margin-top:12px}
.btn:hover{background:var(--acc);text-decoration:none}
.btn-ghost{background:transparent;border:1px solid var(--bord);color:var(--txt)}
.rank{font-size:13px;color:var(--gold);font-weight:700}
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
th,td{border:1px solid var(--bord);padding:10px 12px;text-align:left}
th{background:var(--bg3)}tr:nth-child(even){background:var(--bg2)}
.promo-box{background:var(--bg3);border:1px dashed var(--gold);border-radius:var(--rad);padding:14px 18px;margin:18px 0}
.promo-code{color:var(--gold);font-size:18px;letter-spacing:1px}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.pros,.cons{background:var(--bg2);border-radius:var(--rad);padding:16px 20px;border:1px solid var(--bord)}
.pros h4{color:var(--acc)}.cons h4{color:#f85149}
ul{margin:0 0 14px 22px}
.filter-btn{background:var(--bg3);border:1px solid var(--bord);color:var(--mut);padding:7px 16px;border-radius:20px;cursor:pointer;margin:0 8px 8px 0;font-size:14px}
.filter-btn.active{background:var(--acc2);color:#fff;border-color:var(--acc2)}
.faq-item{border:1px solid var(--bord);border-radius:var(--rad);margin-bottom:10px;background:var(--bg2)}
.faq-item summary{padding:14px 18px;cursor:pointer;font-weight:600}
.faq-item div{padding:0 18px 14px;color:var(--mut)}
footer{border-top:1px solid var(--bord);margin-top:60px;padding:26px 0;color:var(--mut);font-size:14px}
.breadcrumbs{font-size:13px;color:var(--mut);margin-top:18px}
@media(max-width:700px){.pros-cons{grid-template-columns:1fr}h1{font-size:25px}}