:root { --bg:#f7f5f0; --card:#fff; --ink:#1d2327; --muted:#5d6770; --line:#e2ddd3; --brand:#0f5c63; --brand-soft:#e3f0f0; --accent:#c2672b; --bad:#b3261e; --ok:#2e7d4f; --warn:#a15c00; }
@media (prefers-color-scheme: dark) { :root { --bg:#14181b; --card:#1d2327; --ink:#eef1f2; --muted:#a3adb5; --line:#2e363c; --brand:#5fb7bd; --brand-soft:#1d3336; --accent:#e89259; --bad:#f2827a; --ok:#6cc792; --warn:#e3a54d; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--brand); }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px 40px; }
h1 { font-size:30px; margin:22px 0 4px; letter-spacing:-.02em; }
h2 { font-size:19px; margin:0 0 10px; }
.sub { color:var(--muted); margin:0 0 14px; }
.center { text-align:center; }
.narrow { max-width:460px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; margin:16px 0; }
.form { display:flex; flex-direction:column; gap:14px; }
.form label, .qgrid label { display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:14px; }
.form label span, .qgrid label span { font-weight:400; color:var(--muted); font-size:12px; }
input, select, textarea { font:inherit; font-size:15px; padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); width:100%; }
input[type=checkbox] { width:auto; }
textarea { min-height:90px; margin-top:8px; }
button, .btn, .ghost { font:inherit; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; }
.primary { background:var(--accent); color:#fff; border:0; padding:13px 18px; border-radius:12px; font-weight:800; font-size:16px; }
.primary:disabled { opacity:.55; cursor:not-allowed; }
.primary.big, .btn.big { width:100%; padding:16px; font-size:17px; margin:8px 0; }
.ghost { background:transparent; border:1px solid var(--line); color:var(--ink); padding:9px 14px; border-radius:10px; font-size:14px; }
.flash { border-radius:12px; padding:12px 16px; margin:14px 0; background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok); font-weight:600; }
.flash.err { background:color-mix(in srgb, var(--bad) 10%, transparent); color:var(--bad); }
.flash.warn { background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--warn); }
.demo { background:var(--accent); color:#fff; border-radius:10px; padding:9px 14px; font-size:14px; margin-top:12px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.row.between { justify-content:space-between; margin-top:0; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px) { .two { grid-template-columns:1fr; } }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:14px 0; }
@media (max-width:760px) { .stats { grid-template-columns:1fr 1fr; } }
.stats > div { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.report .stats > div { background:var(--bg); border:0; }
.stats b { display:block; font-size:22px; }
.stats span { font-size:13px; color:var(--muted); }
.bar { height:6px; background:var(--line); border-radius:9px; margin-top:8px; overflow:hidden; } .bar i { display:block; height:100%; background:var(--brand); }
.red { color:var(--bad); } .green { color:var(--ok); } .amber { color:var(--warn); }
.step { display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.step i { font-style:normal; width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex:none; }
.step h2 { margin:0; }
.cats { display:flex; flex-wrap:wrap; gap:8px; }
.cats label { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:10px; padding:9px 13px; cursor:pointer; font-weight:600; font-size:15px; }
.cats label:has(input:checked) { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.drop { border:2px dashed var(--line); border-radius:12px; padding:18px; text-align:center; background:var(--bg); }
.drop b { display:block; margin-bottom:4px; } .drop small { color:var(--muted); display:block; margin-bottom:10px; }
.qgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
@media (max-width:760px) { .qgrid { grid-template-columns:1fr; } }
.qhead { grid-column:1/-1; font-weight:800; color:var(--brand); border-top:1px solid var(--line); padding-top:10px; margin-top:6px; }
.qhead.first { border:0; padding:0; margin:0; }
[hidden] { display:none !important; }
.loading { text-align:center; color:var(--muted); }
.spin { width:38px; height:38px; border:4px solid var(--line); border-top-color:var(--brand); border-radius:50%; margin:0 auto 12px; animation:sp 1s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:8px 6px; border-bottom:2px solid var(--line); }
td { padding:10px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.num { text-align:right; white-space:nowrap; }
.small { font-size:13px; color:var(--muted); }
table.list tr:not(:first-child) { cursor:pointer; } table.list tr:not(:first-child):hover td { background:var(--brand-soft); }
.tag { font-size:11px; font-weight:700; background:var(--line); padding:2px 7px; border-radius:99px; color:var(--muted); }
.scroll { overflow-x:auto; }
.rh { margin-top:6px; }
.verdict { border-radius:12px; padding:13px 16px; font-weight:700; margin:12px 0; }
.verdict.bad { background:color-mix(in srgb, var(--bad) 10%, transparent); color:var(--bad); }
.verdict.warn { background:color-mix(in srgb, var(--warn) 12%, transparent); color:var(--warn); }
.verdict.ok { background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok); }
.st { font-weight:700; white-space:nowrap; } .st.ok, .st.under { color:var(--ok); } .st.over, .st.error { color:var(--bad); } .st.check { color:var(--warn); }
.why { color:var(--muted); font-size:13px; display:block; margin-top:2px; }
.email { white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; font-size:14px; }
.plans { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin:16px 0; }
@media (max-width:900px) { .plans { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .plans { grid-template-columns:1fr; } }
.plan { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; position:relative; }
.plan.pop { border:2px solid var(--brand); }
.plan.current { box-shadow:0 0 0 3px var(--brand-soft); }
.plan h3 { margin:0 0 6px; } .plan .price { font-size:26px; font-weight:800; margin-bottom:10px; } .plan .price small { font-size:14px; color:var(--muted); font-weight:400; }
.plan ul { padding-left:18px; margin:0 0 16px; font-size:14px; flex:1; } .plan li { margin:5px 0; }
.ribbon { position:absolute; top:-11px; right:14px; background:var(--brand); color:#fff; font-size:11px; font-weight:800; padding:3px 9px; border-radius:99px; }
@media print { .site-nav, .site-foot, .noprint, .demo { display:none !important; } body { background:#fff; } .card { border:0; } }
.plans.two { grid-template-columns:repeat(2, minmax(0, 420px)); }
@media (max-width:760px) { .plans.two { grid-template-columns:1fr; } }
.plan a.primary { margin-top:auto; }
table.list form { margin:0; }
.plans.three { grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px) { .plans.three { grid-template-columns:1fr; } }
.plan .opt { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line); padding:12px 0 4px; }
.plan .opt.mine b { color:var(--brand); }
.plan .opt .price { font-size:20px; margin:2px 0 0; }
.plan .opt .act { display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; max-width:170px; }
.primary.sm, .ghost.sm { padding:9px 14px; font-size:14px; border-radius:10px; }
details.tips { background:var(--brand-soft); border-radius:10px; padding:10px 14px; margin:4px 0 14px; font-size:14px; }
details.tips summary { cursor:pointer; font-weight:700; color:var(--brand); }
details.tips ul { margin:8px 0 2px; padding-left:18px; } details.tips li { margin:4px 0; }
.form .cats label { flex-direction:row; align-items:center; gap:7px; font-size:15px; }