/* ONB · Варіант A. Шар туру поверх екранів прототипу, 402 × 874 pt. Усі значення — з css/onb-tokens.css (ТЗ §2). */
#onb-layer{position:absolute;inset:0;z-index:var(--onb-z-layer);pointer-events:none;overflow:hidden;border-radius:inherit;font-family:var(--onb-font);-webkit-font-smoothing:antialiased;color:#fff;opacity:0;transition:opacity var(--onb-dim-fade) ease}
#onb-layer.on{opacity:1}
#onb-layer *{box-sizing:border-box}
#onb-layer .onb-ui,#onb-layer .onb-ui *{pointer-events:auto}
#onb-layer button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#onb-layer img{display:block;-webkit-user-drag:none}

/* затемнення з вирізами (ТЗ §2.1): вирізи рахує JS, між кроками не гасне */
.onb-dim{position:absolute;inset:0;width:100%;height:100%}
.onb-dim path{fill:var(--onb-dim);transition:fill var(--onb-sheet-anim) ease}
.onb-dim.intro path{fill:var(--onb-dim-intro)}

/* рамка підсвітки: 4 px від елемента, 2 px + свічення 5 px */
.onb-lifts{position:absolute;inset:0}
.onb-ring{position:absolute;box-shadow:0 0 0 var(--onb-ring-w) var(--onb-ring-color),0 0 0 calc(var(--onb-ring-w) + var(--onb-glow-spread)) var(--onb-glow-color)}
.onb-mark{position:absolute;border-radius:var(--onb-mark-radius);box-shadow:0 0 0 var(--onb-mark-w) var(--onb-mark-color),0 0 0 calc(var(--onb-mark-w) + var(--onb-mark-glow)) var(--onb-mark-glow-color)}

/* підказка (ТЗ §2.2) */
.onb-tip{position:absolute;left:var(--onb-edge);width:var(--onb-tip-w);background:var(--onb-tip-bg);border:var(--onb-tip-border);border-radius:var(--onb-tip-radius);padding:var(--onb-tip-pad-top) var(--onb-tip-pad-x) var(--onb-tip-pad-bottom);box-shadow:var(--onb-tip-shadow);opacity:0;z-index:var(--onb-z-tip);transition:top var(--onb-move) var(--onb-move-ease),opacity var(--onb-fade-in) ease}
.onb-tip.show,.onb-sheet.show{opacity:1}
.onb-tip.out,.onb-sheet.out{opacity:0;transition:opacity 180ms ease}
.onb-title{margin:0;text-transform:none;letter-spacing:normal;font-weight:var(--onb-w-bold);font-size:var(--onb-title-size);line-height:var(--onb-title-lh);color:var(--onb-title-color)}
.onb-text{margin:var(--onb-tip-gap) 0 0;font-size:var(--onb-text-size);line-height:var(--onb-text-lh);color:var(--onb-text-color)}
.onb-listtitle{color:#fff;font-weight:var(--onb-w-bold)}
.onb-list{margin:var(--onb-tip-gap) 0 0;padding:0;list-style:none;font-size:var(--onb-list-size);line-height:var(--onb-text-lh);color:var(--onb-list-color)}
.onb-list li{display:flex;gap:10px;margin-top:6px}
.onb-list li:first-child{margin-top:0}
.onb-st{font-weight:var(--onb-w-bold)}
.onb-sdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:middle;position:relative;top:-1px}
.onb-dot{flex:none;width:var(--onb-list-dot);height:var(--onb-list-dot);margin-top:calc((var(--onb-list-size) * var(--onb-text-lh) - var(--onb-list-dot)) / 2)}
.onb-bal{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--onb-tip-gap);padding:14px 16px;border-radius:var(--onb-btn-radius);background:#17191d;border:var(--onb-tip-border);color:var(--onb-count-color);font-size:13px}
.onb-bal b{font-size:var(--onb-bal-size);line-height:1.1;color:#fff}
.onb-link{display:inline-block;margin-top:var(--onb-tip-gap);padding:0;border:0;background:none;font-size:14px;color:var(--onb-plate-arrow-color);text-decoration:underline;text-underline-offset:3px}

/* хвостик: квадрат 14 px під 45°, рамка лише з двох зовнішніх сторін */
.onb-tail{position:absolute;width:var(--onb-tail-size);height:var(--onb-tail-size);background:var(--onb-tip-bg);transform:rotate(var(--onb-tail-rotate));border:1px solid #25282d}
.onb-tail.up{top:-8px;border-right:0;border-bottom:0}
.onb-tail.down{bottom:-8px;border-left:0;border-top:0}

/* лічильник кроків (ТЗ §2.3) */
.onb-seg{display:flex;align-items:center;gap:var(--onb-count-gap);margin-bottom:var(--onb-tip-gap)}
.onb-seg span{display:flex;gap:var(--onb-seg-gap)}
.onb-seg i{height:var(--onb-seg-h);border-radius:2px;background:var(--onb-seg-off)}
.onb-seg i.on{background:var(--onb-seg-on)}
.onb-seg em{font-style:normal;font-size:var(--onb-count-size);letter-spacing:var(--onb-count-tracking);color:var(--onb-count-color);white-space:nowrap}

/* кнопки: у ряд, «Пропустить» за шириною тексту */
.onb-btns{display:flex;gap:var(--onb-btn-gap);margin-top:var(--onb-tip-gap)}
.onb-btns.col{flex-direction:var(--onb-sheet-btns-dir);gap:var(--onb-sheet-btn-gap)}
.onb-btn{flex:1;height:var(--onb-btn-h);border-radius:var(--onb-btn-radius);border:0;background:var(--onb-btn-primary-bg);color:var(--onb-btn-primary-ink);font-weight:var(--onb-btn-primary-weight);font-size:var(--onb-btn-primary-size);letter-spacing:var(--onb-btn-primary-tracking);text-transform:uppercase;line-height:1;white-space:nowrap}
.onb-btn.sec{flex:none;padding:0 18px;background:var(--onb-btn-sec-bg);border:var(--onb-btn-sec-border);color:var(--onb-btn-sec-ink);font-size:var(--onb-btn-sec-size);font-weight:var(--onb-w-regular);letter-spacing:0;text-transform:none}
.onb-btns.col .onb-btn,.onb-btns.col .onb-btn.sec{flex:none;width:100%}
.onb-btn:active{filter:var(--onb-btn-pressed)}
.onb-btn:focus-visible{outline:var(--onb-btn-focus);outline-offset:2px}

/* плашка «Нажмите «…»» (ТЗ §2.4) */
.onb-plate{flex:1;min-height:var(--onb-plate-minh);border-radius:var(--onb-plate-radius);background:var(--onb-plate-bg);border:var(--onb-plate-border);color:var(--onb-plate-ink);font-size:var(--onb-plate-size);line-height:1.3;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;text-align:center}
.onb-arrow{flex:none;width:var(--onb-plate-arrow);height:var(--onb-plate-arrow)}

/* вступна шторка й шторка пропуску (ТЗ §2.6, §2.8) */
.onb-sheet{position:absolute;left:0;right:0;bottom:0;z-index:var(--onb-z-sheet);background:var(--onb-sheet-bg);border-top:var(--onb-sheet-border);border-radius:var(--onb-sheet-radius) var(--onb-sheet-radius) 0 0;padding:var(--onb-sheet-pad-top) var(--onb-sheet-pad-x) max(var(--onb-sheet-pad-bottom),var(--onb-safe-bottom));transform:translateY(105%);opacity:1;transition:transform var(--onb-sheet-anim) var(--onb-sheet-ease)}
.onb-sheet.show{transform:none}
.onb-sheet.out{transform:translateY(105%);opacity:1;transition:transform 260ms ease-in}
.onb-grip{width:var(--onb-grip-w);height:var(--onb-grip-h);margin:0 auto 14px}

/* значок нажатия (ТЗ §2.5): центр у точці left/top, контейнер 72×72 */
.onb-tap{position:absolute;z-index:var(--onb-z-tap);width:72px;height:72px;margin:-36px 0 0 -36px;pointer-events:none!important}

/* підписи зі стрілками (ТР-3, ТЗ §2.7) */
.onb-calls{position:absolute;inset:0;z-index:var(--onb-z-call);pointer-events:none!important;transition:opacity var(--onb-fade-in) ease}
.onb-calls *{pointer-events:none!important}
.onb-call{position:absolute;max-width:var(--onb-call-max);background:var(--onb-call-bg);border:var(--onb-call-border);border-radius:var(--onb-call-radius);padding:var(--onb-call-pad)}
.onb-call b{display:block;font-size:var(--onb-call-title);line-height:1.2;color:#fff}
.onb-call span{display:block;font-size:var(--onb-call-text);line-height:1.25;color:var(--onb-call-text-color);margin-top:2px}
.onb-callsvg{position:absolute;inset:0;width:402px;height:874px;overflow:visible}

.onb-toast{position:absolute;left:50%;top:var(--onb-safe-top);transform:translateX(-50%);background:#1d1f24;border:1px solid #33363c;border-radius:12px;padding:10px 14px;font-size:13px;white-space:nowrap;pointer-events:none!important}

/* ── службова панель ліворуч від телефона: у кадри не потрапляє ── */
#onb-panel{position:fixed;left:16px;top:16px;bottom:16px;width:232px;z-index:var(--onb-z-panel);background:#0d0f12;border:1px solid #ffffff17;border-radius:20px;color:#f0f2f5;font:400 13px/1.35 var(--onb-font);display:flex;flex-direction:column;overflow:hidden}
#onb-panel.min{bottom:auto;width:auto}
#onb-panel.min .onb-pbody{display:none}
#onb-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid #ffffff12;font-weight:700;font-size:12px;letter-spacing:.14em;color:#a1a7b2}
#onb-panel header button{background:#ffffff03;border:1px solid #ffffff20;color:#c4c6c2;border-radius:10px;padding:4px 10px;font:inherit;font-size:12px;letter-spacing:0;cursor:pointer}
#onb-panel .onb-pbody{overflow:auto;padding:4px 12px 14px}
#onb-panel h4{margin:16px 2px 8px;font-size:11px;font-weight:700;letter-spacing:.14em;color:#8e8e98;text-transform:uppercase}
#onb-panel .pb{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;margin-bottom:6px;text-align:left;background:#ffffff03;border:1px solid #ffffff12;color:#f0f2f5;border-radius:12px;padding:9px 12px;font:inherit;cursor:pointer}
#onb-panel .pb.col{flex-direction:column;align-items:flex-start;gap:2px}
#onb-panel .pb small{color:#8e8e98;font-size:11px;white-space:nowrap}
#onb-panel .pb.on{border-color:#e4202e;background:rgba(228,32,46,.1)}
#onb-panel .pb:hover{border-color:#ffffff30}
#onb-panel label{display:flex;gap:10px;align-items:center;padding:5px 2px;cursor:pointer;color:#c4c6c2}
#onb-panel input{accent-color:#e4202e}
#onb-panel .note{color:#8e8e98;font-size:11px;margin:8px 2px 0}
@media (max-width:900px){#onb-panel{width:200px}}

/* Т-2: блок «Сумма не как в ClubGG?» */
.onb-box{margin-top:var(--onb-tip-gap);padding:var(--onb-box-pad);background:var(--onb-box-bg);border:var(--onb-box-border);border-radius:var(--onb-box-radius)}
.onb-boxt{margin:0 0 8px;font-size:var(--onb-box-label-size);letter-spacing:1.2px;text-transform:uppercase;color:var(--onb-box-label-color)}
.onb-box .onb-list{margin:0;font-size:var(--onb-box-item-size);color:var(--onb-box-item-color)}
/* ТР-3: статусы — метка и пояснение 13px */
.onb-stat li{margin-top:8px}
.onb-stat li span{display:block}
.onb-stat .onb-st{display:block;font-size:12px;letter-spacing:1px;font-weight:var(--onb-w-bold)}
.onb-stat em{display:block;margin-top:2px;font-style:normal;font-size:13px;color:var(--onb-list-color)}