:root{
  --bg:#0d0e12; --card:#171922; --line:#262a38;
  --red:#ff2d55; --red2:#e8253f; --txt:#f4f5f8; --mut:#9aa0b0; --wa:#25d366;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:radial-gradient(1200px 600px at 80% -10%, #2a0d16 0%, var(--bg) 55%);
  color:var(--txt); font:16px/1.45 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  display:flex; flex-direction:column; min-height:100dvh;
}
.top{position:sticky;top:0;z-index:5;backdrop-filter:blur(14px);background:#0d0e12cc;
  border-bottom:1px solid var(--line);padding:12px 16px 10px}
.toprow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.brand{display:flex;gap:10px;align-items:center}
.brand .logo{width:34px;height:34px;border-radius:10px;filter:drop-shadow(0 0 12px #ff2d5566)}
.brand span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.brand b{font-size:18px}
.topact{display:flex;gap:2px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.linkbtn{background:none;border:none;color:var(--mut);font-size:13px;padding:6px;cursor:pointer}
.linkbtn b{color:var(--txt)}
.prog{height:3px;background:var(--line);border-radius:99px;margin-top:10px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red2),var(--red));transition:width .35s ease}
main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:20px 16px 40px}
.h{font-size:26px;font-weight:800;letter-spacing:-.01em}
.sub{color:var(--mut);margin:6px 0 16px;font-size:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;
  text-align:left;cursor:pointer;transition:transform .12s,border-color .12s;color:var(--txt)}
.card:active{transform:scale(.98)}
.card:hover{border-color:#3a3f52}
.card.static{cursor:default}
.card .t{font-weight:700}
.card .m{color:var(--mut);font-size:13px;margin-top:3px}

/* кнопки-ссылки внутри текста */
.linky{background:none;border:none;color:var(--red);font-size:inherit;padding:0;cursor:pointer;text-decoration:underline}

/* баннеры-подсказки */
.banner{background:#12241a;border:1px solid #1e4a2c;color:#b8f0c8;border-radius:14px;
  padding:12px 14px;font-size:14px;margin:0 0 16px}
.banner span{color:#7fc493;font-size:12px}
.banner b{color:#eafff0}
.banner.warn{background:#2a1a12;border-color:#5a3419;color:#ffd9a8}
.banner .linky{color:#ffb35c}

/* OTP */
.otprow{display:flex;gap:10px;justify-content:center;margin:22px 0 10px}
.otpbox{width:58px;height:66px;text-align:center;font-size:28px;font-weight:800;color:var(--txt);
  background:var(--card);border:1px solid var(--line);border-radius:14px;outline:none}
.otpbox:focus{border-color:var(--red)}
.otpbox.shake{animation:shake .35s ease;border-color:var(--red)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.err{color:#ff8095;text-align:center;font-size:14px;margin:6px 0}

/* календарь */
.calhead{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px}
.calhead b{font-size:18px;text-transform:capitalize}
.calnav{width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  color:var(--txt);font-size:20px;cursor:pointer}
.calnav:disabled{opacity:.3;cursor:default}
.calwd{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.calwd i{font-style:normal;text-align:center;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day2{aspect-ratio:1;border-radius:12px;background:var(--card);border:1px solid var(--line);
  color:var(--txt);font-size:15px;font-weight:600;cursor:pointer;position:relative}
.day2:disabled{background:transparent;border-color:#1a1d27;color:#3a3f52;cursor:default}
.day2.full{color:#3a3f52;text-decoration:line-through}
.day2.today::after{content:'';position:absolute;left:50%;bottom:6px;width:4px;height:4px;border-radius:99px;
  background:var(--red);transform:translateX(-50%)}
.day2.on{background:linear-gradient(160deg,var(--red2),var(--red));border-color:transparent;color:#fff}
.day2.on::after{background:#ffd7de}

/* время */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 0;
  text-align:center;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;color:var(--txt)}
.slot.on{background:linear-gradient(135deg,var(--red2),var(--red));border-color:transparent}
.slot.off{opacity:.28;cursor:default;text-decoration:line-through}

/* услуги */
.svc{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .15s}
.svc.on{border-color:var(--red)}
.svchead{display:flex;gap:12px;align-items:center;width:100%;background:none;border:none;color:var(--txt);
  padding:14px 16px;cursor:pointer;text-align:left}
.svcem{font-size:26px}
.svctxt{flex:1}
.svctxt b{display:block;font-size:16px}
.svctxt i{font-style:normal;color:var(--mut);font-size:13px}
.chk{width:26px;height:26px;border-radius:99px;border:1.5px solid var(--line);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex:none}
.svc.on .chk{background:linear-gradient(135deg,var(--red2),var(--red));border-color:transparent}
.len20{font-size:12.5px;color:var(--mut);background:#12141c;border-top:1px solid var(--line);padding:8px 16px}
.len20 a{color:var(--red)}
.svc .cm{margin:0;padding:10px 16px 14px;border-top:1px solid var(--line)}

/* итоги и кнопки */
.lbl{display:block;font-size:13px;color:var(--mut);margin-bottom:12px}
.lbl input,.lbl textarea{display:block;width:100%;margin-top:6px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;color:var(--txt);padding:14px;font-size:16px;outline:none;font-family:inherit}
.lbl input:focus,.lbl textarea:focus{border-color:var(--red)}
.lbl textarea{min-height:56px;resize:vertical}
.sumbar{position:sticky;bottom:88px;margin-top:16px;display:flex;gap:12px;align-items:center;
  background:#171922ee;border:1px solid var(--line);border-radius:18px;padding:12px 14px;backdrop-filter:blur(10px)}
.suml{flex:1}
.suml b{display:block;font-size:17px}
.suml span{color:var(--mut);font-size:13px}
.sumbtn{width:auto;margin:0;padding:14px 26px;flex:none}
.sumbtn:disabled{opacity:.4;box-shadow:none;cursor:default}
.btn{display:block;width:100%;text-align:center;border:none;border-radius:16px;padding:16px;
  font-size:17px;font-weight:800;cursor:pointer;text-decoration:none;margin-top:10px}
.btn.primary{background:linear-gradient(135deg,var(--red2),var(--red));color:#fff;box-shadow:0 10px 30px #ff2d5545}
.btn.wa{background:var(--wa);color:#06300f}
.ghost{display:block;width:100%;background:none;border:none;color:var(--mut);padding:12px;font-size:14px;cursor:pointer;margin-top:6px}
.ghost:disabled{opacity:.4;cursor:default}
.agree{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mut);margin:6px 0 4px}
.agree input{width:18px;height:18px;accent-color:var(--red)}

/* тикет и готово */
.ticket{background:var(--card);border:1px dashed #3a3f52;border-radius:16px;padding:6px 16px;margin:14px 0}
.row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.row:last-child{border-bottom:none}
.row span{color:var(--mut)}
.row.col{flex-direction:column;gap:2px}
.row.col em{font-style:normal;color:var(--mut);font-size:13px}
.row.total b{color:var(--red)}
.done .ok{font-size:44px;text-align:center;filter:drop-shadow(0 0 18px #25d36688)}

/* подвал */
.foot{border-top:1px solid var(--line);margin-top:24px;padding:22px 16px calc(96px + env(safe-area-inset-bottom));background:#0b0c10}
.footin{max-width:560px;margin:0 auto}
.frow{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:15px}
.frow b{display:block}
.frow span{color:var(--mut);font-size:14px}
.frow a{color:var(--red);text-decoration:none}
.fcopy{color:#4a4f60;font-size:12px;margin-top:14px;text-align:center}

.bottombar{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,#0d0e12 60%,transparent);display:flex;justify-content:center;z-index:6}
.bottombar .btn{max-width:560px;margin:0;box-shadow:0 10px 34px #ff2d5560}

.note{color:var(--mut);font-size:12px;margin-top:12px;text-align:center}
/* honeypot: поле-ловушка для ботов, людям не видно */
.hpfield{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fade{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}