:root {
  color-scheme: dark;
  --bg: #050505;
  --ink: #f4f4f4;
  --muted: #9a9a9a;
  --line: rgba(255, 255, 255, .12);
  --soft: rgba(255, 255, 255, .06);
  --ok: #9ae6b4;
  --warn: #f6e05e;
  --danger: #fc8181;
  --radius: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: Manrope, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none; overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.mono, code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.geo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); }
.cloud { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; mix-blend-mode: screen; will-change: transform; }
.cloud.c1 { width: 48vmax; height: 48vmax; left: -12vmax; top: -14vmax; background: radial-gradient(circle, rgba(255,255,255,.26) 0%, transparent 70%); animation: f1 28s ease-in-out infinite alternate; }
.cloud.c2 { width: 42vmax; height: 42vmax; right: -10vmax; top: 10vmax; background: radial-gradient(circle, rgba(220,220,220,.2) 0%, transparent 68%); animation: f2 34s ease-in-out infinite alternate; filter: blur(100px); }
.cloud.c3 { width: 56vmax; height: 40vmax; left: 18vmax; bottom: -18vmax; background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 72%); animation: f1 40s ease-in-out infinite alternate-reverse; filter: blur(110px); }
.geo .veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, transparent 20%, rgba(5,5,5,.55) 70%, rgba(5,5,5,.92) 100%); }
@keyframes f1 { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.15); } }
@keyframes f2 { to { transform: translate3d(-14vmax, 10vmax, 0) scale(1.2); } }

.shell { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; color: #050505; font: 800 17px/1 Onest, Manrope, sans-serif; letter-spacing: -.04em;
  box-shadow: 0 10px 28px rgba(255,255,255,.12);
}
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-text strong { font: 800 18px/1.1 Onest, Manrope, sans-serif; letter-spacing: -.03em; }
.badge { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scroll { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 20px; -webkit-overflow-scrolling: touch; }
.view { animation: in .22s ease; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }

.card { border: 1px solid var(--line); background: rgba(255,255,255,.045); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card.stack { display: flex; flex-direction: column; gap: 12px; }
.card-h { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.h1 { margin: 10px 0 6px; font: 800 28px/1.1 Onest, Manrope, sans-serif; letter-spacing: -.04em; }
.h2 { margin: 0; font: 800 21px/1.15 Onest, Manrope, sans-serif; letter-spacing: -.03em; }
.accent { background: linear-gradient(90deg, #fff, #a8a8a8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 0; font-size: 14px; line-height: 1.45; }
.hero-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pill.ok .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.pill.no .dot { background: var(--danger); }
.price { margin-top: 16px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price-main { font: 800 44px/1 Onest, Manrope, sans-serif; letter-spacing: -.04em; }
.price-main .unit { font-size: 30px; margin-left: 4px; }
.price-alt { color: var(--muted); font-size: 14px; }
.price-alt b { color: var(--ink); }

.progress { height: 4px; border-radius: 4px; background: var(--soft); overflow: hidden; margin-top: 14px; }
.progress i { display: block; height: 100%; width: 35%; background: #fff; border-radius: 4px; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 3px; background: var(--soft); }
.stepper span { min-width: 28px; text-align: center; font-weight: 800; }
.step { width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(255,255,255,.08); font-size: 18px; font-weight: 700; }
.step:disabled { opacity: .35; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 13px 18px; font-weight: 700; text-decoration: none; transition: transform .15s ease, opacity .15s ease, background .15s ease; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-lg { min-height: 54px; font-size: 16px; border-radius: 16px; }
.btn-sm { padding: 8px 12px; border-radius: 12px; font-size: 13px; }
.btn-primary { background: #fff; color: #050505; box-shadow: 0 12px 36px rgba(255,255,255,.12); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }

.feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.feat li { display: flex; gap: 12px; align-items: flex-start; }
.feat li > span { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line); }
.feat b { display: block; font-size: 14px; }
.feat small { color: var(--muted); font-size: 13px; line-height: 1.35; }

.watch-head { display: flex; gap: 12px; align-items: center; }
.spinner { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: #fff; animation: spin .9s linear infinite; }
.spinner.done { animation: none; border-color: var(--ok); }
.spinner.fail { animation: none; border-color: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }

.section-head { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 12px; }
.acc { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: rgba(255,255,255,.045); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.acc:active { background: rgba(255,255,255,.08); }
.acc-phone { font-weight: 800; font-size: 16px; letter-spacing: .01em; }
.acc-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tag.ok { color: var(--ok); border-color: rgba(154,230,180,.35); }
.tag.warn { color: var(--warn); border-color: rgba(246,224,94,.35); }
.chev { color: var(--muted); font-size: 22px; }
.empty { text-align: center; padding: 30px 16px; }
.skeleton { height: 72px; border-radius: var(--radius); margin-bottom: 10px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: sk 1.3s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.field-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.big { font-size: 20px; font-weight: 700; }
.code-box { min-height: 74px; border-radius: 14px; border: 1px dashed var(--line); display: grid; place-items: center; padding: 14px; text-align: center; font-size: 14px; line-height: 1.4; }
.code { font-size: 34px; font-weight: 800; letter-spacing: .14em; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4; }
.big-emoji { font-size: 42px; }

.dock { flex: 0 0 auto; display: flex; gap: 6px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(5,5,5,.92); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-top: 1px solid var(--line); }
.dock-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; padding: 6px; border-radius: 12px; }
.dock-item span { font-size: 19px; filter: grayscale(1); opacity: .7; }
.dock-item.active { color: var(--ink); background: var(--soft); }
.dock-item.active span { filter: none; opacity: 1; }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; max-width: 90%; padding: 11px 16px; border-radius: 14px; background: #fff; color: #050505; font-weight: 700; font-size: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }