*,*::before,*::after{box-sizing:border-box}
:root{--accent:#2563eb;--accent-dark:#1d4ed8;--bg:#f8fafc;--card:#fff;--border:#e2e8f0;--text:#1e293b;--muted:#64748b;--radius:12px;--green:#10b981;--red:#ef4444;--amber:#f59e0b}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);margin:0;line-height:1.6}
a{color:var(--accent)}
.topbar{background:#0f172a;padding:14px 20px}
.topbar-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:12px}
.logo{color:#fff;font-weight:800;font-size:1.25rem;text-decoration:none;letter-spacing:-.5px}
.logo span{color:#60a5fa}
.tagline{color:#94a3b8;font-size:.82rem}
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}.nav a{color:#cbd5e1;font-size:.86rem;text-decoration:none}.nav a:hover{color:#fff}
.hero{background:linear-gradient(135deg,#dbeafe 0%,#f0fdf4 100%);padding:40px 20px 32px;text-align:center;border-bottom:1px solid var(--border)}
.hero h1{font-size:clamp(1.35rem,4vw,2rem);font-weight:800;margin:0 0 12px;color:#0f172a}
.hero p{font-size:.96rem;color:var(--muted);max-width:660px;margin:0 auto}
.container{max-width:900px;margin:0 auto;padding:28px 20px}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:24px}
.tool-form{display:flex;gap:10px;flex-wrap:wrap}
.tool-form input[type=text]{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-size:1rem}
.btn-run{background:var(--accent);color:#fff;border:none;padding:12px 28px;border-radius:10px;font-weight:700;font-size:1rem;cursor:pointer}
.btn-run:hover{background:var(--accent-dark)}
.btn-run:disabled{opacity:.6;cursor:wait}
#result{margin-top:20px}
.res-table{width:100%;border-collapse:collapse;font-size:.88rem}
.res-table th{text-align:left;padding:8px 10px;background:var(--bg);border-bottom:2px solid var(--border);font-size:.78rem;text-transform:uppercase;color:var(--muted)}
.res-table td{padding:8px 10px;border-bottom:1px solid var(--border);word-break:break-all}
.badge-ok{background:#ecfdf5;color:#047857;border-radius:20px;padding:2px 10px;font-size:.78rem;font-weight:600}
.badge-bad{background:#fef2f2;color:#b91c1c;border-radius:20px;padding:2px 10px;font-size:.78rem;font-weight:600}
.badge-warn{background:#fffbeb;color:#b45309;border-radius:20px;padding:2px 10px;font-size:.78rem;font-weight:600}
.issue{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:10px 14px;margin:8px 0;font-size:.86rem;color:#92400e}
.spf-tree{font-family:monospace;font-size:.82rem;background:var(--bg);border-radius:8px;padding:14px;overflow-x:auto;white-space:pre}
.sub-h{font-size:1rem;font-weight:700;margin:22px 0 10px;color:#0f172a}
.checks-left{font-size:.78rem;color:var(--muted);margin-top:10px}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:12px}
.faq-item h3{font-size:.98rem;font-weight:700;margin:0 0 8px}
.faq-item p{font-size:.9rem;color:var(--muted);margin:0}
.section-title{font-size:1.3rem;font-weight:700;color:#0f172a;margin:36px 0 20px}
.score-box{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:20px;background:var(--bg);border-radius:12px;margin-bottom:20px}
.score-ring{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.9rem;font-weight:800;color:#fff;flex-shrink:0;text-align:center;line-height:1.1}
.score-meta h3{margin:0 0 4px;font-size:1.1rem}
.score-meta p{margin:0;color:var(--muted);font-size:.88rem}
.issue-row{display:flex;gap:10px;padding:12px 14px;border-radius:10px;margin-bottom:8px;font-size:.88rem;align-items:flex-start}
.issue-row.critical{background:#fef2f2;border:1px solid #fecaca}
.issue-row.warning{background:#fffbeb;border:1px solid #fde68a}
.issue-row.info{background:#eff6ff;border:1px solid #bfdbfe}
.issue-row .ico{font-size:1.1rem;flex-shrink:0}
.issue-row .t{font-weight:700;margin-bottom:2px}
.issue-row .f{color:var(--muted);font-size:.84rem}
.gen-box{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;margin-top:12px}
.gen-box label{font-size:.82rem;font-weight:600;display:block;margin:8px 0 4px}
.gen-box input,.gen-box select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:.9rem}
.gen-out{font-family:monospace;font-size:.82rem;background:var(--bg);border-radius:8px;padding:12px;margin-top:10px;word-break:break-all;display:none}
.btn-copy{background:var(--green);color:#fff;border:none;padding:6px 14px;border-radius:7px;font-size:.8rem;font-weight:600;cursor:pointer;margin-top:8px}
.site-footer{background:#0f172a;color:#94a3b8;padding:28px 20px;margin-top:48px;font-size:.85rem}
.footer-inner{max-width:900px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.site-footer a{color:#cbd5e1}
/* ── Гибрид: переключатель категорий ── */
.cat-tabs{display:flex;gap:8px;margin:22px 0 16px;flex-wrap:wrap;justify-content:center}
.cat-tab{padding:10px 20px;border-radius:24px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:.9rem;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.cat-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tool-cat-card{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-decoration:none;color:var(--text);transition:border-color .15s,box-shadow .15s}
.tool-cat-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(37,99,235,.08)}
.tool-cat-card .ci{font-size:1.4rem;color:var(--accent);flex-shrink:0;line-height:1}
.tool-cat-card .cn{font-weight:700;font-size:.95rem;margin-bottom:2px}
.tool-cat-card .cd{font-size:.8rem;color:var(--muted);line-height:1.4}
/* ── Страница инструмента ── */
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--accent)}
.tool-intro{font-size:.95rem;color:#334155;margin:0 0 20px}
.related{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.related a{font-size:.82rem;padding:6px 12px;border:1px solid var(--border);border-radius:20px;text-decoration:none;color:var(--accent);background:var(--card)}
.related a:hover{border-color:var(--accent)}