/* Дизайн-система страниц-калькуляторов. Менять только --brand/--brand2 под тему. */
:root{--brand:#4f46e5;--brand2:#0ea5e9;--bg:#f4f6fb;--card:#fff;--ink:#0f172a;--mute:#64748b;--line:#e2e8f0;--field:#f8fafc;
--good:#059669;--good2:#10b981;--warn:#d97706;--warnbg:#fffbeb;--bad:#dc2626;--soft:#eef2ff;--shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);--r:18px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0b1020;--card:#121a2e;--ink:#e8ecf5;--mute:#94a3b8;--line:#24304a;--field:#0e1628;--warnbg:#2a210d;--soft:#1b2342;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35)}}
:root[data-theme=dark]{--bg:#0b1020;--card:#121a2e;--ink:#e8ecf5;--mute:#94a3b8;--line:#24304a;--field:#0e1628;--warnbg:#2a210d;--soft:#1b2342}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Inter,Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--brand)}
.hero{background:radial-gradient(1200px 400px at 10% -10%,rgba(255,255,255,.25),transparent),linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:44px 16px 84px}
.hero .in,.wrap{max-width:1000px;margin:0 auto}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:0 0 12px;font-weight:800;letter-spacing:-.02em}
.hero p{font-size:18px;opacity:.92;margin:0 0 18px;max-width:640px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);border-radius:999px;padding:6px 12px;font-size:14px}
.wrap{padding:0 16px 40px;margin-top:-56px}
.step{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;margin-bottom:16px;border:1px solid var(--line)}
.step>h2{display:flex;align-items:center;gap:12px;font-size:20px;margin:0 0 4px;font-weight:800}
.step>h2 .num{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-size:15px}
.step>.sub{color:var(--mute);margin:0 0 16px 44px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute);font-weight:600}
.fld .box{position:relative}
.fld input,.fld select{width:100%;height:48px;font:inherit;font-size:17px;font-weight:600;color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:12px;padding:0 44px 0 14px;transition:border-color .15s,box-shadow .15s}
.fld select{padding-right:14px}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.fld .unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mute);font-weight:700;pointer-events:none}
textarea{width:100%;min-height:90px;font:inherit;color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:12px;padding:12px}
.btn{text-decoration:none;display:inline-block;font:inherit;font-weight:700;border:0;border-radius:12px;padding:12px 18px;cursor:pointer;background:var(--soft);color:var(--brand);transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(.97)}.btn:active{transform:scale(.98)}
.btn.pri{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 35%,transparent)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.drop{border:2px dashed color-mix(in srgb,var(--brand) 40%,var(--line));background:var(--soft);border-radius:16px;padding:26px 16px;text-align:center;transition:background .15s,border-color .15s}
.drop.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,var(--card))}
.drop .ic{font-size:36px;line-height:1}.drop b{display:block;font-size:17px;margin:6px 0 2px}.drop small{color:var(--mute)}
.hero-result{background:linear-gradient(135deg,var(--good),var(--good2));color:#fff;border-radius:var(--r);padding:22px;margin-bottom:14px;box-shadow:0 10px 30px color-mix(in srgb,var(--good) 30%,transparent)}
.hero-result .lbl{opacity:.9;font-weight:600}.hero-result .big{font-size:clamp(24px,4vw,34px);font-weight:800;margin:4px 0 12px}
.hero-result .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.hero-result .kpis div{background:rgba(255,255,255,.16);border-radius:12px;padding:10px 12px}.hero-result .kpis span{display:block;font-size:13px;opacity:.9}.hero-result .kpis b{font-size:20px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:14px}
.opt{position:relative;border:1.5px solid var(--line);border-radius:16px;padding:16px;background:var(--card)}
.opt.best{border-color:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 14%,transparent)}
.opt .rib{position:absolute;top:-11px;left:14px;background:var(--good);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px}
.opt h3{margin:4px 0 2px;font-size:17px}.opt .d{color:var(--mute);font-size:13px;min-height:38px}
.opt dl{display:grid;grid-template-columns:1fr auto;gap:4px 8px;margin:10px 0 0;font-size:14px}.opt dt{color:var(--mute)}.opt dd{margin:0;font-weight:700;text-align:right}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--field);border:1px solid var(--line);border-radius:14px;padding:12px}.kpi span{display:block;font-size:13px;color:var(--mute)}.kpi b{font-size:20px}
.alert{display:flex;gap:10px;background:var(--warnbg);border-radius:12px;padding:10px 12px;margin:8px 0;font-size:14px}.alert:before{content:"⚠️"}
.alert.ok{background:color-mix(in srgb,var(--good) 10%,var(--card))}.alert.ok:before{content:"✅"}
.empty{text-align:center;color:var(--mute);padding:26px 10px}.empty .ic{font-size:42px}
.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.more a,.more div{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);transition:transform .15s}
.more a:hover{transform:translateY(-2px)}.more .ic{font-size:26px}.more b{display:block;margin:6px 0 2px}.more small{color:var(--mute)}
.note{font-size:13px;color:var(--mute)}
details>summary{cursor:pointer;font-weight:600;color:var(--brand)}
@media (max-width:600px){.step{padding:18px}.step>.sub{margin-left:0}.btn{width:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}