:root {
  --bg: var(--tg-theme-bg-color, #0f1115);
  --surface: var(--tg-theme-secondary-bg-color, #171a20);
  --surface-2: color-mix(in srgb, var(--surface) 88%, white 12%);
  --text: var(--tg-theme-text-color, #f5f6f7);
  --muted: var(--tg-theme-hint-color, #9ca3af);
  --accent: var(--tg-theme-button-color, #5d8cff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --line: color-mix(in srgb, var(--text) 12%, transparent);
  --good: #50c878;
  --warn: #e7b85b;
  --danger: #e07575;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { min-height: var(--tg-viewport-stable-height, 100vh); }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.shell { width:min(720px,100%); margin:0 auto; padding:24px 18px calc(32px + env(safe-area-inset-bottom)); }
.topline { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.brand { font-weight:750; letter-spacing:-.02em; }
.step { font-size:13px; color:var(--muted); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:0 18px 45px rgba(0,0,0,.16); }
.card + .card { margin-top:14px; }
.eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:700; margin-bottom:10px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:34px; line-height:1.05; letter-spacing:-.04em; margin-bottom:14px; }
h2 { font-size:26px; line-height:1.12; letter-spacing:-.03em; margin-bottom:12px; }
h3 { font-size:17px; margin-bottom:8px; }
p { line-height:1.55; color:var(--muted); }
.lead { font-size:17px; color:var(--text); }
.rules { display:grid; gap:10px; margin:20px 0 24px; }
.rule { padding:13px 14px; border-radius:16px; background:color-mix(in srgb, var(--surface) 72%, var(--accent) 8%); border:1px solid var(--line); line-height:1.4; }
.rule strong { display:block; margin-bottom:3px; }
.actions { display:grid; gap:10px; margin-top:22px; }
.btn { border:0; border-radius:15px; min-height:50px; padding:13px 17px; font-weight:700; transition:transform .08s ease, opacity .15s; }
.btn:active { transform:scale(.99); }
.btn-primary { background:var(--accent); color:var(--accent-text); }
.btn-secondary { background:transparent; border:1px solid var(--line); color:var(--text); }
.btn-quiet { background:transparent; color:var(--muted); min-height:40px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.progress { height:5px; border-radius:999px; background:var(--line); overflow:hidden; margin:0 0 18px; }
.progress > span { display:block; height:100%; background:var(--accent); border-radius:inherit; transition:width .2s ease; }
.options { display:grid; gap:9px; margin:18px 0; }
.option { width:100%; text-align:left; border:1px solid var(--line); background:transparent; color:var(--text); padding:14px 15px; border-radius:15px; line-height:1.35; }
.option.selected { border-color:var(--accent); background:color-mix(in srgb, var(--surface) 82%, var(--accent) 18%); }
.textarea { width:100%; min-height:95px; resize:vertical; border:1px solid var(--line); border-radius:14px; padding:13px; background:transparent; color:var(--text); outline:none; }
.textarea:focus { border-color:var(--accent); }
.metric-grid { display:grid; grid-template-columns:1fr; gap:15px; margin-top:16px; }
.metric-row { display:grid; gap:8px; }
.metric-label { display:flex; justify-content:space-between; gap:10px; font-size:14px; }
.metric-label span:last-child { color:var(--muted); }
.scale { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.scale button { min-height:38px; border-radius:11px; border:1px solid var(--line); background:transparent; color:var(--text); }
.scale button.active { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.result-main { padding:18px; border-radius:18px; background:color-mix(in srgb, var(--surface) 80%, var(--accent) 15%); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); margin:16px 0; }
.result-label { font-size:12px; color:var(--muted); margin-bottom:6px; }
.result-value { font-size:23px; font-weight:800; letter-spacing:-.025em; }
.separation { border-left:3px solid var(--good); padding:2px 0 2px 13px; margin:18px 0; color:var(--text); line-height:1.5; }
.next-step { background:var(--surface-2); border-radius:16px; padding:16px; }
.next-step b { display:block; margin-bottom:6px; }
.kv { display:grid; gap:10px; margin:16px 0; }
.kv-row { display:grid; grid-template-columns:110px 1fr; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.kv-row:last-child { border-bottom:0; }
.kv-key { color:var(--muted); font-size:13px; }
.kv-val { line-height:1.4; }
.micro { counter-reset:item; display:grid; gap:10px; margin-top:14px; }
.micro-item { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; }
.micro-item::before { counter-increment:item; content:counter(item); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-text); font-weight:800; font-size:13px; }
.pill { display:inline-flex; align-items:center; min-height:28px; padding:5px 9px; border-radius:999px; font-size:12px; background:var(--surface-2); border:1px solid var(--line); }
.note { font-size:13px; color:var(--muted); line-height:1.45; margin-top:14px; }
.error { border-color:color-mix(in srgb,var(--danger) 55%,var(--line)); }
.toast { position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translate(-50%,20px); width:min(92vw,520px); padding:12px 14px; border-radius:14px; background:#20242b; color:#fff; opacity:0; pointer-events:none; transition:.18s ease; box-shadow:0 12px 35px rgba(0,0,0,.32); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.loader { width:24px; height:24px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; margin:10px auto; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (min-width:600px) {
  .shell { padding-top:36px; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .card { padding:28px; }
}