:root{
  --ink:#0B0B0D; --paper:#F4EFE6; --card:#FFFFFF; --line:#E2DBCC; --muted:#6E6A62;
  --lime:#D4FF3A; --orange:#FF4A1C; --violet:#5B4BFF; --ok:#1C9A5B; --warn:#B9780A;
  --head:"Unbounded", Arial, sans-serif; --text:"Onest", Arial, sans-serif; --mono:"JetBrains Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font-family:var(--text); font-size:16px; line-height:1.5; padding-inline:16px; padding-block:0 48px}
a{color:inherit}
.wrap{max-width:560px; margin:0 auto}
.wide{max-width:1100px; margin:0 auto}
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:20px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:800; font-size:18px; letter-spacing:-.01em}
.mark{width:34px; height:34px; border-radius:10px; background:var(--lime); display:grid; place-items:center}
.mark svg{width:18px; height:18px}
.tag{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
h1{font-family:var(--head); font-weight:800; font-size:clamp(28px,7vw,44px); line-height:1.05; letter-spacing:-.02em; margin:8px 0 10px; text-wrap:balance}
h2{font-family:var(--head); font-weight:800; font-size:22px; margin:0 0 14px; letter-spacing:-.01em}
.lead{color:var(--muted); margin:0 0 22px}
.card{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:22px}
.tabs{display:flex; gap:6px; background:#E9E2D5; padding:5px; border-radius:16px; margin-bottom:16px}
.tabs button{flex:1; border:0; background:transparent; font:600 15px var(--text); padding:11px; border-radius:12px; cursor:pointer; color:var(--muted)}
.tabs button[aria-selected=true]{background:var(--ink); color:#fff}
label{display:block; font-weight:600; font-size:14px; margin:14px 0 6px}
input,select,textarea{width:100%; font:16px var(--text); padding:13px 14px; border:1.5px solid var(--line); border-radius:14px; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--ink)}
textarea{min-height:80px; resize:vertical}
.check{display:flex; gap:10px; align-items:flex-start; font-weight:500; font-size:14px; margin-top:16px}
.check input{width:20px; height:20px; margin-top:2px; flex:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:18px; border:0; border-radius:999px; padding:16px 22px;
  background:var(--ink); color:#fff; font:700 16px var(--text); cursor:pointer; text-decoration:none}
.btn.lime{background:var(--lime); color:var(--ink)}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--violet); outline-offset:2px}
.btn[disabled]{opacity:.5; cursor:default}
.price{font-family:var(--mono); font-weight:700; color:var(--orange); margin-top:8px; min-height:24px}
.err{color:var(--orange); font-weight:600; margin-top:12px; min-height:22px}
.code{font-family:var(--mono); font-weight:700; font-size:30px; letter-spacing:.06em; background:var(--ink); color:var(--lime); border-radius:16px; padding:16px; text-align:center; margin:14px 0}
.steps{display:flex; justify-content:space-between; position:relative; margin:26px 4px 10px}
.steps::before{content:""; position:absolute; top:15px; left:15px; right:15px; height:3px; background:var(--line)}
.steps .fill{position:absolute; top:15px; left:15px; height:3px; background:var(--ink); transition:width .6s cubic-bezier(.16,1,.3,1)}
.step{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--muted); width:20%; text-align:center}
.dot{width:32px; height:32px; border-radius:50%; background:#fff; border:3px solid var(--line); display:grid; place-items:center}
.step.on{color:var(--ink)} .step.on .dot{background:var(--lime); border-color:var(--ink)}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin-top:16px; font-size:15px}
.kv dt{color:var(--muted)} .kv dd{margin:0; font-weight:600}
.foot{margin-top:28px; font-size:13px; color:var(--muted); text-align:center}
.pill{display:inline-block; font-weight:700; font-size:13px; padding:4px 12px; border-radius:999px; background:#EEEAFB; color:var(--violet)}
.pill[data-s="Готово"],.pill[data-s="Выдано"]{background:#E3F7EC; color:var(--ok)}
.pill[data-s="В работе"],.pill[data-s="Диагностика"]{background:#FFF4DE; color:var(--warn)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}