:root { color-scheme: light dark; --bg:#fafaf9; --fg:#1c1917; --muted:#57534e; --card:#fff; --line:#d6d3d1; --accent:#0f766e; --bad:#b91c1c; --warn:#b45309; --ok:#15803d; }
@media (prefers-color-scheme: dark) { :root { --bg:#0c0a09; --fg:#f5f5f4; --muted:#a8a29e; --card:#1c1917; --line:#44403c; --accent:#2dd4bf; --bad:#f87171; --warn:#fbbf24; --ok:#4ade80; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
main { max-width: 820px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { margin: 0 0 4px; font-size: 1.8rem; } h2 { font-size: 1.15rem; margin: 20px 0 8px; } h3 { margin-top: 24px; }
.lead { color: var(--muted); margin-top: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 16px 0; }
.warn { border-color: var(--warn); }
label { display:block; font-weight:600; margin: 12px 0 4px; }
.check { font-weight: 400; display:flex; gap:8px; align-items:flex-start; }
input[type=text], input[type=email] { width:100%; padding:10px; font:inherit; border:1px solid var(--line); border-radius:6px; background:transparent; color:inherit; }
.row { display:flex; gap:8px; } .row input { flex:1; }
button { padding:10px 18px; font:inherit; font-weight:600; border:0; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; } button[disabled] { opacity:.5; cursor:not-allowed; }
.fine { color: var(--muted); font-size: .85rem; } .error { color: var(--bad); } .ok { color: var(--ok); }
.ts { margin: 12px 0; min-height: 4px; }
.bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; } .bar span { display:block; height:100%; width:0; background: var(--accent); transition: width .3s; }
.grade-row { display:flex; gap:20px; align-items:center; } .grade { font-size: 3.5rem; font-weight: 800; width: 90px; height: 90px; display:flex; align-items:center; justify-content:center; border-radius: 12px; border: 3px solid currentColor; }
.grade.A,.grade.B { color: var(--ok); } .grade.C,.grade.D { color: var(--warn); } .grade.F { color: var(--bad); }
.host { font-weight:700; margin:0; word-break: break-all; }
.cats { list-style:none; padding:0; margin:0; } .cats li { display:flex; align-items:center; gap:10px; margin: 6px 0; } .cats .name { flex: 0 0 250px; } .cats .meter { flex:1; height:8px; background: var(--line); border-radius:4px; overflow:hidden; } .cats .meter span { display:block; height:100%; background: var(--accent); } .cats .val { width: 56px; text-align:right; color: var(--muted); }
.sev { display:inline-block; padding:1px 8px; border-radius: 10px; font-size:.75rem; font-weight:700; text-transform: uppercase; color:#fff; background:#6b7280; margin-right: 6px; }
.sev.critical { background:#7f1d1d; } .sev.high { background:#b91c1c; } .sev.medium { background:#b45309; } .sev.low { background:#0369a1; }
.locked { border-top: 1px dashed var(--line); margin-top: 24px; }
.finding { border-top: 1px solid var(--line); padding: 12px 0; } .finding h4 { margin: 0 0 4px; } .finding pre { white-space: pre-wrap; background: rgba(127,127,127,.12); padding: 8px; border-radius: 6px; overflow-x:auto; font-size:.85rem; }
table { width:100%; border-collapse: collapse; font-size:.85rem; } th, td { text-align:left; padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media print { button, form, .ts { display:none !important; } body { background:#fff; color:#000; } }
.effort { display:inline-block; padding:1px 8px; border-radius:10px; font-size:.75rem; font-weight:600; border:1px solid var(--line); margin-right:6px; } .effort.quick { color: var(--ok); border-color: var(--ok); } .effort.developer { color: var(--warn); border-color: var(--warn); } .effort.expert { color: var(--bad); border-color: var(--bad); }
.plain { display:block; margin: 4px 0 2px; } .tech { display:block; color: var(--muted); font-size:.85rem; } #top-issues li { margin-bottom: 10px; } .effort-line { font-weight:600; }
.cta { border:1px solid var(--line); border-radius:10px; padding:14px; margin:20px 0; } .cta.emphasis { border:2px solid var(--accent); background: rgba(15,118,110,.07); } .cta .urgent { font-weight:700; color: var(--accent); }
.offers { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:10px; } .offer { border:1px solid var(--line); border-radius:8px; padding:10px; } .offer h3 { margin:0 0 4px; font-size:1rem; } .offer .price { font-weight:700; margin:0; } .offer ul { padding-left:18px; font-size:.85rem; }
.cta-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; } .btn-link { display:inline-block; padding:10px 16px; border-radius:6px; font-weight:600; text-decoration:none; } .btn-link.primary { background: var(--accent); color:#fff; } .btn-link.secondary { border:1px solid var(--accent); color: var(--accent); } .btn-link.disabled { opacity:.6; cursor:default; }
.spoof { border:2px dashed var(--bad); border-radius:10px; padding:14px; margin:20px 0; } .spoof-img img { max-width:100%; height:auto; display:block; margin:10px 0; } .offer.dmarc { margin-top:10px; }
.summary { background: rgba(15,118,110,.07); border-radius:10px; padding:12px 14px; margin:12px 0; } .lang-toggle { display:flex; gap:6px; margin-bottom:6px; } .lang { padding:4px 12px; background:transparent; color:var(--accent); border:1px solid var(--accent); } .lang[aria-pressed="true"] { background: var(--accent); color:#fff; }
.risk { font-weight:600; color: var(--warn); } .fix-offer { font-weight:600; color: var(--accent); }
.badge-box { border-top:1px solid var(--line); margin-top:20px; } pre.snippet { white-space:pre-wrap; word-break:break-all; background: rgba(127,127,127,.12); padding:8px; border-radius:6px; font-size:.8rem; } button.copy { padding:6px 12px; font-size:.85rem; margin-right:8px; }
details.dev { margin-top:8px; } details.dev summary { cursor:pointer; font-weight:600; color: var(--accent); } details.dev h5 { margin:10px 0 4px; }
.offer.live-fix { margin-top:10px; border-color: var(--accent); }
.teasers { list-style:none; padding:0; margin:10px 0; } .teasers li { margin:6px 0; display:flex; gap:8px; align-items:baseline; }
.benchmark { border:1px solid var(--line); border-radius:10px; padding:14px; margin:20px 0; } .benchmark h2 { margin:0 0 6px; font-size:1.05rem; }
.doc table { margin: 8px 0 16px; } .doc ul, .doc ol { padding-left: 22px; } .doc code { background: rgba(127,127,127,.12); padding: 0 4px; border-radius: 4px; }
.site-foot { margin: 28px 0 12px; text-align: center; color: var(--muted); font-size: .85rem; } .site-foot a { color: var(--muted); }