:root{--p:#2458e9;--p2:#256eee;--a:#2cc5fc;--a2:#28b1fc;--ink:#0d1530;--ink2:#2a2b2a;--muted:#5d6785;--line:#e4e9f4;--bg:#f5f8fe;--card:#fff;--ok:#12b76a;--warn:#f79009;--bad:#f04438;--grad:linear-gradient(120deg,#2458e9 0%,#256eee 40%,#28b1fc 75%,#2cc5fc 100%);--r:16px;--sh:0 10px 30px -12px rgba(20,40,110,.18);--sh2:0 24px 60px -20px rgba(20,40,110,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Mulish,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.55}
h1,h2,h3,h4,h5{font-family:Urbanist,Mulish,sans-serif;margin:0 0 .4em;letter-spacing:-.01em;line-height:1.15}
a{color:var(--p);text-decoration:none}button{font:inherit;cursor:pointer}input,select,textarea{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 18px;font-weight:700;font-family:Urbanist,sans-serif;font-size:15px;transition:.18s;white-space:nowrap}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 8px 20px -8px rgba(36,88,233,.7)}.btn-p:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-o{background:#fff;color:var(--p);border:1.5px solid #cfdaf7}.btn-o:hover{border-color:var(--p)}
.btn-g{background:transparent;color:inherit}.btn-g:hover{background:rgba(36,88,233,.08)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:10px}.btn-d{background:#fff0ef;color:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#eef3ff;color:var(--p)}
.pill.ok{background:#e7f8ef;color:#067647}.pill.warn{background:#fff4e5;color:#b54708}.pill.bad{background:#fdecea;color:#b42318}.pill.gray{background:#f0f2f7;color:#475069}
.sample{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#fff7e0;color:#9a6700;border:1px dashed #e6b84c;padding:3px 9px;border-radius:999px}
.real{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#e7f8ef;color:#067647;border:1px dashed #5fcf99;padding:3px 9px;border-radius:999px}
.switch{position:relative;width:42px;height:24px;flex:none;display:inline-block}.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#cdd5e6;border-radius:99px;transition:.2s;cursor:pointer}.switch span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked+span{background:var(--p)}.switch input:checked+span:before{transform:translateX(18px)}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-weight:500;color:var(--ink);background:#fff;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--p);box-shadow:0 0 0 4px rgba(36,88,233,.12)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-bg{position:fixed;inset:0;background:rgba(9,16,40,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-bg.on{display:flex;animation:fade .2s}
.modal{background:#fff;border-radius:20px;width:min(560px,100%);max-height:90vh;overflow:auto;box-shadow:var(--sh2);animation:pop .22s}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}.modal header h3{margin:0}
.modal .mb{padding:22px 24px;display:flex;flex-direction:column;gap:14px}.modal footer{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.x{border:0;background:#f0f3fa;width:34px;height:34px;border-radius:10px;font-size:18px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;opacity:0;transition:.25s;z-index:300;box-shadow:var(--sh2);max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes fade{from{opacity:0}}@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}