/* =========================================================================
   TERMOSOFT · UI KIT 2 — терминал самообслуживания
   Один набор компонентов для всех концептов. Дизайн выбирается атрибутом
   data-design на <html> (thermal · spa · fun), оформление — data-theme.

   СЛОЙ 1. ТОКЕНЫ
   Компоненты знают только токены. Всё, чем дизайны отличаются по цвету,
   шрифту, рамкам, радиусам и «глубине», задаётся здесь.
   ========================================================================= */

/* ---------- геометрия, общая для всех дизайнов ---------- */
:root{
  --tap:76px;          /* основная кнопка */
  --tap-xl:104px;      /* кнопки главного экрана */
  --tap-pay:88px;      /* кнопка оплаты */
  --tap-sm:54px;       /* малая кнопка, «Применить» */
  --ibtn:64px;         /* круглая/квадратная иконко-кнопка */
  --field-h:66px;      /* поле ввода */
  --key-h:94px;        /* клавиша numpad */
  --help-w:176px;      /* кнопка «Помощь» */
  --kb-h:450px;        /* экранная клавиатура */
}

/* =========================================================================
   ДИЗАЙН «ТЕРМЫ» · Вечер (по умолчанию)
   ========================================================================= */
:root, [data-design="thermal"]{
  --bg:#0B1215;
  --glow-1:rgba(64,214,196,.16); --glow-2:rgba(255,150,70,.14);
  --ui-bg:radial-gradient(520px 420px at 0% 0%, var(--glow-1), transparent 70%),
          radial-gradient(560px 480px at 100% 100%, var(--glow-2), transparent 70%), var(--bg);
  --page-bg:#0A0F11;
  --page-img:radial-gradient(900px 600px at 30% 0%, rgba(95,227,209,.07), transparent 60%),
             radial-gradient(700px 500px at 80% 100%, rgba(255,127,69,.06), transparent 60%);
  --surface:#141E22;                    /* сплошные карточки, модалки */
  --glass:rgba(255,255,255,.065);        /* вторичные подложки */
  --glass-2:rgba(255,255,255,.11);
  --field:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.12);
  --outline:transparent;
  --ink:#F5EFE6; --ink-soft:#A3B3B4; --ink-faint:#5E6F72;
  --accent:#5FE3D1; --accent-deep:#1C8F83; --accent-ink:#06201D;
  --accent-soft:color-mix(in srgb, var(--accent) 16%, transparent);
  --cta-1:#FFC46B; --cta-2:#FF7F45; --cta-ink:#1E0F04;
  --cta:linear-gradient(100deg, var(--cta-1), var(--cta-2));
  --cta-soft:color-mix(in srgb, var(--cta-2) 14%, transparent);
  --hot:var(--cta); --hot-ink:var(--cta-ink);
  --warm:var(--cta); --warm-ink:var(--cta-ink);
  --tint-1:var(--accent); --tint-2:var(--cta-2); --tint-3:var(--cta-1); --tint-4:var(--accent-deep);
  --warn:#FFB35C; --ok:#5FE3D1;
  --overlay:rgba(4,9,11,.62); --overlay-blur:10px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.7);
  --shadow-pop:0 40px 90px -30px rgba(0,0,0,.85);
  --blur:18px;
  --bw:1.5px;
  --depth:none; --depth-sm:none; --press:scale(.975);
  --r-btn:999px; --r-card:28px; --r-xl:36px; --r-modal:40px; --r-field:22px; --r-chip:999px; --r-key:30px; --r-tile:26px;
  --font:"Manrope", system-ui, sans-serif;
  --font-display:"Unbounded", "Manrope", sans-serif;
  --fw-display:500; --tt-display:none;
  --fw-text:400; --fw-strong:800; --fw-btn:800;
  --pad-top:34px; --pad-x:40px;
  --fs-ui:18px;
  --steam:rgba(255,255,255,.07);
  --hero-shade:linear-gradient(180deg, rgba(8,14,17,.55) 0%, rgba(8,14,17,.05) 20%, rgba(8,14,17,.35) 36%, rgba(8,14,17,.82) 52%, #0B1215 76%);
  --v-bad-bg:rgba(255,112,96,.09); --v-bad-line:rgba(255,112,96,.32);
  --v-ok-bg:rgba(96,228,170,.08);  --v-ok-line:rgba(96,228,170,.38);
  --hint-ink:#B9C6C6; --hint-title:#5FE3D1; --hint-card:rgba(255,255,255,.04); --hint-line:rgba(255,255,255,.07);
  --hint-k:#233033; --hint-on:#5FE3D1; --hint-on-ink:#06201D; --hint-btn-line:#33413F; --hint-drawer:#0E1517;
  --led:#5FE3D1;
}
[data-design="thermal"][data-theme="day"]{
  --bg:#E9F0EF; --glow-1:rgba(40,170,155,.18); --glow-2:rgba(255,160,80,.16);
  --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.92);
  --line:rgba(12,40,40,.09); --line-strong:rgba(12,40,40,.09);
  --surface:#FFFFFF; --field:#FFFFFF;
  --ink:#0E1E20; --ink-soft:#50686A; --ink-faint:#9DB0B1;
  --accent:#0F9E8E; --accent-deep:#0B7468; --accent-ink:#FFFFFF;
  --cta-text:linear-gradient(100deg, #F0802F, #C9501C);   /* акцентный текст темнее кнопки, иначе не читается на светлом */
  --steam:rgba(255,255,255,.55);
  --overlay:rgba(14,30,32,.45);
  --shadow:0 18px 40px -22px rgba(10,50,50,.35);
  --shadow-pop:0 40px 90px -30px rgba(10,50,50,.45);
  --hero-shade:linear-gradient(180deg, rgba(8,14,17,.5) 0%, rgba(8,14,17,.05) 20%, rgba(233,240,239,.35) 32%, rgba(233,240,239,.9) 46%, #E9F0EF 66%);
  --v-bad-bg:#FFF0EE; --v-bad-line:#F1C3BB; --v-ok-bg:#EDF9F2; --v-ok-line:#AEDFC2;
}
[data-design="thermal"][data-theme="copper"]{
  --bg:#140E0B; --glow-1:rgba(255,120,60,.16); --glow-2:rgba(255,200,120,.12);
  --accent:#FFB27A; --accent-deep:#C66A3A; --accent-ink:#2A1206;
  --cta-1:#F3E3CF; --cta-2:#D9B48E; --cta-ink:#2A1206;
  --ink-soft:#BCA999; --ink-faint:#6E5D52;
  --surface:#1E1612;
  --hero-shade:linear-gradient(180deg, rgba(20,14,11,.6) 0%, rgba(20,14,11,.1) 25%, rgba(40,20,10,.25) 45%, rgba(20,14,11,.9) 72%, #140E0B 100%);
  --v-ok-bg:rgba(160,220,150,.08); --v-ok-line:rgba(160,220,150,.34);
}

/* =========================================================================
   ДИЗАЙН «СПА» · Песок
   ========================================================================= */
[data-design="spa"]{
  --bg:#F3EDE4;
  --ui-bg:var(--bg);
  --page-bg:#1D1B17;
  --page-img:radial-gradient(900px 700px at 20% 10%, rgba(201,183,138,.10), transparent 60%);
  --surface:#FBF8F3; --glass:#FBF8F3; --glass-2:#EFE7DB; --field:#FBF8F3;
  --line:#DAD0BE; --line-strong:#B9AC95;
  --outline:transparent;
  --ink:#24231F; --ink-soft:#5A5446; --ink-faint:#938977;
  --accent:#5E6B4C; --accent-deep:#4A553B; --accent-ink:#FFFFFF; --accent-soft:#E3E5D6;
  --cta-1:#A8623F; --cta-2:#8F5233; --cta-ink:#FFF8F1;
  --cta:var(--cta-1); --cta-soft:#F2DFD3;
  --hot:var(--cta-1); --hot-ink:var(--cta-ink);
  --warm:var(--cta-soft); --warm-ink:var(--cta-1);
  --tint-1:var(--accent); --tint-2:var(--cta-1); --tint-3:var(--accent); --tint-4:var(--cta-1);
  --warn:#B0703F; --ok:#5E6B4C;
  --overlay:rgba(43,42,38,.38); --overlay-blur:6px;
  --shadow:0 24px 50px -30px rgba(80,60,30,.35);
  --shadow-pop:0 40px 90px -30px rgba(60,45,20,.45);
  --blur:0px;
  --bw:1.5px;
  --depth:none; --depth-sm:none; --press:scale(.985);
  --r-btn:999px; --r-card:30px; --r-xl:30px; --r-modal:36px; --r-field:16px; --r-chip:999px; --r-key:50%; --r-tile:22px;
  --font:"Golos Text", system-ui, sans-serif;
  --font-display:"Lora", Georgia, serif;
  --fw-display:500; --tt-display:none;
  --fw-text:400; --fw-strong:600; --fw-btn:600;
  --pad-top:36px; --pad-x:48px;
  --fs-ui:20px;
  --v-bad-bg:rgba(176,96,70,.075); --v-bad-line:#D7A58F;
  --v-ok-bg:rgba(94,120,70,.075);  --v-ok-line:#A5B78F;
  --hint-ink:#CFC6B5; --hint-title:#F1EBDF; --hint-card:rgba(255,255,255,.035); --hint-line:rgba(255,255,255,.07);
  --hint-k:#35322B; --hint-on:#C9B78A; --hint-on-ink:#2B2A26; --hint-btn-line:#4A463C; --hint-drawer:#23211C;
  --led:#C9B78A;
}
[data-design="spa"][data-theme="olive"]{
  --bg:#2C3127; --surface:#353B2F; --glass:#353B2F; --glass-2:#3E4537; --field:#353B2F;
  --ink:#F4EFE5; --ink-soft:#C9C1AE; --ink-faint:#958F7E;
  --line:#4A5142; --line-strong:#5C6452;
  --accent:#C9B78A; --accent-soft:#46503C; --accent-ink:#2C3127;
  --cta-1:#D69B78; --cta-2:#C2865F; --cta-ink:#2A1C12; --cta-soft:#4E4236;
  --overlay:rgba(16,18,14,.55);
  --shadow:0 24px 50px -30px rgba(0,0,0,.6);
  --shadow-pop:0 40px 90px -30px rgba(0,0,0,.7);
  --v-bad-bg:rgba(214,130,100,.10); --v-bad-line:#9C6F5B; --v-ok-bg:rgba(170,200,130,.09); --v-ok-line:#7F9A66;
}
[data-design="spa"][data-theme="rose"]{
  --bg:#F5EAE6; --surface:#FCF7F5; --glass:#FCF7F5; --glass-2:#F0E0DA; --field:#FCF7F5;
  --line:#E6D2CA; --line-strong:#D7BCB1;
  --accent:#8A5A5A; --accent-soft:#F0E0DC;
  --cta-1:#6E4A4A; --cta-2:#5B3C3C; --cta-soft:#EDDAD4;
  --ink-soft:#8A7470;
}

/* =========================================================================
   ДИЗАЙН «РАЗВЛЕЧЕНИЯ» · Неон
   ========================================================================= */
[data-design="fun"]{
  --bg:#17113F;
  --dots:rgba(255,255,255,.07);
  --ui-bg:radial-gradient(var(--dots) 2px, transparent 2.5px) 0 0/28px 28px, var(--bg);
  --page-bg:#0C0925;
  --page-img:radial-gradient(800px 600px at 25% 0%, rgba(255,79,163,.10), transparent 60%),
             radial-gradient(700px 600px at 80% 100%, rgba(198,255,61,.07), transparent 60%);
  --surface:#231B5C; --glass:#2E2570; --glass-2:#2E2570; --field:#2E2570;
  --line:#0B0826; --line-strong:#0B0826;
  --outline:#0B0826;
  --ink:#FFFFFF; --ink-soft:#B9B2EA; --ink-faint:#7069AD;
  --c-lime:#C6FF3D; --c-pink:#FF4FA3; --c-cyan:#3DE3FF; --c-yellow:#FFD43D; --c-violet:#8E6CFF;
  --accent:var(--c-cyan); --accent-deep:var(--c-violet); --accent-ink:var(--outline); --accent-soft:var(--glass);
  --cta:var(--c-lime); --cta-1:var(--c-lime); --cta-2:var(--c-lime); --cta-ink:#0B0826; --cta-soft:var(--glass);
  --hot:var(--c-pink); --hot-ink:#FFFFFF;
  --warm:var(--c-yellow); --warm-ink:var(--outline);
  --tint-1:var(--c-pink); --tint-2:var(--c-cyan); --tint-3:var(--c-yellow); --tint-4:var(--c-lime);
  --warn:var(--c-yellow); --ok:var(--c-lime);
  --overlay:rgba(8,5,28,.72); --overlay-blur:0px;
  --shadow:none; --shadow-pop:0 10px 0 var(--outline);
  --blur:0px;
  --bw:3px;
  --depth:0 8px 0 var(--outline); --depth-sm:0 5px 0 var(--outline); --press:translateY(6px);
  --r-btn:24px; --r-card:28px; --r-xl:30px; --r-modal:34px; --r-field:18px; --r-chip:12px; --r-key:24px; --r-tile:24px;
  --font:"Nunito", system-ui, sans-serif;
  --font-display:"Dela Gothic One", "Nunito", sans-serif;
  --fw-display:400; --tt-display:uppercase;
  --fw-text:700; --fw-strong:900; --fw-btn:900;
  --pad-top:30px; --pad-x:36px;
  --fs-ui:19px;
  --v-bad-bg:color-mix(in srgb, var(--glass) 80%, #FF4F7A);
  --v-ok-bg:color-mix(in srgb, var(--glass) 82%, #9BFF3D);
  --v-bad-line:var(--outline); --v-ok-line:var(--outline);
  --hint-ink:#C3BDEB; --hint-title:#C6FF3D; --hint-card:#1A1446; --hint-line:#0B0826;
  --hint-k:#FF4FA3; --hint-on:#C6FF3D; --hint-on-ink:#0B0826; --hint-btn-line:#0B0826; --hint-drawer:#120D33;
  --led:#C6FF3D;
}
[data-design="fun"][data-theme="sunny"]{
  --bg:#FFF1CC; --dots:rgba(23,17,63,.08);
  --surface:#FFFFFF; --glass:#FFF8E6; --glass-2:#FFF8E6; --field:#FFF8E6;
  --outline:#17113F; --line:#17113F; --line-strong:#17113F;
  --ink:#17113F; --ink-soft:#5A5287; --ink-faint:#A49CC7;
  --c-lime:#9BE000; --c-pink:#FF3D8B; --c-cyan:#16C5F0; --c-yellow:#FFB800; --c-violet:#7B54FF;
  --cta:#17113F; --cta-1:#17113F; --cta-2:#17113F; --cta-ink:#C6FF3D;
  --overlay:rgba(23,17,63,.5);
  --v-bad-bg:#FFE3E6; --v-ok-bg:#EAF9D2;
}
[data-design="fun"][data-theme="cosmos"]{
  --bg:#06050E; --dots:rgba(142,108,255,.12);
  --surface:#131129; --glass:#1C1938; --glass-2:#1C1938; --field:#1C1938;
  --outline:#000; --line:#000; --line-strong:#000;
  --ink-soft:#A6A0D6; --ink-faint:#5B5690;
  --c-lime:#3DE3FF; --c-pink:#B36CFF; --c-yellow:#FF9B3D;
  --cta:#3DE3FF; --cta-1:#3DE3FF; --cta-2:#3DE3FF;
}

/* =========================================================================
   СЛОЙ 2. БАЗА И КОРПУС ТЕРМИНАЛА
   ========================================================================= */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0}
svg{width:1em; height:1em; flex:none}
input, button{font-variant-numeric:lining-nums}
em{font-style:italic}
body.demo{
  font-family:var(--font); background:var(--page-bg); background-image:var(--page-img);
  min-height:100vh; overflow-x:hidden; color:var(--ink);
  display:flex; align-items:flex-start; justify-content:center; gap:34px; padding:14px 20px;
}

.kiosk{
  width:524px; flex:none; position:relative;
  background:linear-gradient(175deg, #2b2d30 0%, #232527 55%, #1d1f21 100%);
  border-radius:30px; padding:34px 22px 26px;
  box-shadow:0 50px 100px -35px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1.5px #0d0f10, 0 0 0 3px #35383b;
}
.kiosk .cam{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #3d4a52 0 25%, #0a0d0f 70%); box-shadow:inset 0 0 3px #000, 0 0 0 3px #17191b}
.kscreen{width:480px; height:853px; background:var(--bg); border-radius:8px; overflow:hidden; overflow:clip; /* clip: браузер не прокручивает рамку вбок при фокусе в поле */ position:relative; box-shadow:0 0 0 3px #0b0d0e, inset 0 0 24px rgba(0,0,0,.18)}
.kscreen::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:200; background:linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 28%)}
.ui{
  width:720px; height:1280px; transform:scale(.6667); transform-origin:top left;
  position:relative; overflow:hidden; background:var(--ui-bg);
  font-family:var(--font); font-size:var(--fs-ui); font-weight:var(--fw-text); color:var(--ink); font-variant-numeric:lining-nums;
}
.kpanel{height:196px; margin-top:16px; position:relative; border-top:1.5px solid #35383b; border-radius:0 0 16px 16px}
.kslot{position:absolute; left:32px; top:96px; width:130px; height:9px; background:#0c0e0f; border-radius:6px; box-shadow:inset 0 2px 4px #000, 0 1px 0 rgba(255,255,255,.06)}
.kslot::after{content:"чеки"; position:absolute; left:2px; top:14px; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:#5b6165}
.kpos{position:absolute; right:44px; top:22px; width:126px; height:158px; background:linear-gradient(180deg, #17191b, #101213); border-radius:12px; box-shadow:inset 0 3px 10px #000, 0 1px 0 rgba(255,255,255,.05)}
.kpos::before{content:""; position:absolute; left:14px; right:14px; top:12px; height:64px; background:#0a0c0d; border-radius:7px; box-shadow:inset 0 2px 6px #000}
.kpos::after{content:"оплата картой"; position:absolute; left:0; right:0; bottom:-18px; text-align:center; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#5b6165}
.kpos .dotled{position:absolute; left:50%; bottom:48px; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; background:var(--led); box-shadow:0 0 8px var(--led)}

/* ---------- экраны ---------- */
.screen{
  position:absolute; inset:0; display:none; flex-direction:column; z-index:1;
  padding:var(--pad-top) var(--pad-x) 34px; overflow-y:auto; animation:screen-in .45s cubic-bezier(.2,.8,.2,1) both;
}
.screen::-webkit-scrollbar{display:none}
.screen.active{display:flex}
@keyframes screen-in{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.grow{flex:1}
.center{text-align:center}

/* =========================================================================
   СЛОЙ 3. КОМПОНЕНТЫ
   ========================================================================= */

/* --- 3.1 Типографика --- */
.display{font-family:var(--font-display); font-weight:var(--fw-display); text-transform:var(--tt-display); font-size:58px; line-height:1.06; letter-spacing:-.03em; margin:0}
.eyebrow{font-size:15px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin:0 0 16px}
.h1{font-family:var(--font-display); font-weight:var(--fw-display); text-transform:var(--tt-display); font-size:32px; line-height:1.15; letter-spacing:-.02em; margin:0 0 10px}
.h2{font-family:var(--font-display); font-weight:var(--fw-display); text-transform:var(--tt-display); font-size:24px; line-height:1.2; margin:10px 0 14px}
.h3-brand{font-size:17px; font-weight:600; color:var(--accent); margin:0 0 18px; line-height:1.4}
.body-lg{font-size:21px; line-height:1.45; color:var(--ink-soft); margin:18px 0 0; max-width:560px}
.body-md{font-size:18px; line-height:1.45; color:var(--ink-soft); margin:0 0 24px}
.caption{font-size:14px; color:var(--ink-faint); margin:14px 0 0; text-align:center}
.price-lg{font-family:var(--font-display); font-weight:var(--fw-display); font-size:32px}
.price-md{font-size:19px; font-weight:var(--fw-strong)}
.age{font-size:13px; color:var(--ink-faint); font-weight:600; font-style:normal}

/* --- 3.2 Бренд, язык, часы --- */
.brand{display:inline-flex; align-items:center; gap:12px; color:var(--ink)}
.brand svg{width:40px; height:40px; color:var(--cta-1)}
.brand span{font-family:var(--font-display); font-weight:var(--fw-display); font-size:22px; letter-spacing:.14em}
.brand-sm svg{width:30px; height:30px}
.brand-sm span{font-size:17px}
.lang{display:flex}
.lang button{border:none; background:none; font-family:var(--font); cursor:pointer}
.clock{font-family:var(--font-display); font-weight:var(--fw-display); font-size:22px; font-variant-numeric:tabular-nums}

/* --- 3.3 Кнопки --- */
.btn{
  position:relative; width:100%; min-height:var(--tap); padding:0 32px; gap:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:var(--bw) solid transparent; border-radius:var(--r-btn); box-shadow:var(--depth);
  font-family:var(--font); font-size:21px; font-weight:var(--fw-btn); color:var(--ink); cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .2s, opacity .2s;
}
.btn svg{width:26px; height:26px}
.btn:active{transform:var(--press)}
.btn-cta{background:var(--cta); color:var(--cta-ink)}
.btn-secondary{background:var(--glass); color:var(--ink); border-color:var(--line-strong)}
.btn-accent{background:var(--accent); color:var(--accent-ink)}
.btn-add{background:transparent; color:var(--accent); border:2px dashed color-mix(in srgb, var(--accent) 50%, transparent); box-shadow:none; min-height:70px; margin-bottom:18px}
.btn-link{background:none; border-color:transparent; box-shadow:none; color:var(--accent); min-height:56px; font-size:18px; margin-top:10px; width:auto; padding:0 8px}
.btn:disabled{background:var(--glass); color:var(--ink-faint); border-color:var(--line); box-shadow:none; pointer-events:none}
.btn-sm{min-height:var(--tap-sm); width:auto; padding:0 22px; font-size:16px; gap:8px}
.btn-sm svg{width:20px; height:20px}
.btn-pay{min-height:var(--tap-pay); font-size:24px}
.btn-xl{min-height:var(--tap-xl); justify-content:space-between; padding:0 18px 0 34px; text-align:left; border-radius:max(var(--r-btn), 30px)}
.btn-xl .btn-stack{display:flex; flex-direction:column; gap:4px}
.btn-xl .btn-stack b{font-size:26px; font-weight:var(--fw-btn)}
.btn-xl .btn-stack small{font-size:16px; font-weight:600; opacity:.72}
.btn-xl .btn-ico{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; background:rgba(0,0,0,.12)}
.btn-xl.btn-secondary .btn-ico{background:var(--glass-2)}
.btn-xl .btn-ico svg{width:32px; height:32px}

.ibtn{
  width:var(--ibtn); height:var(--ibtn); flex:none; display:inline-flex; align-items:center; justify-content:center;
  border:var(--bw) solid var(--line-strong); border-radius:50%; background:var(--glass); color:var(--ink);
  box-shadow:var(--depth-sm); cursor:pointer; transition:transform .12s, box-shadow .12s, background .3s;
}
.ibtn svg{width:28px; height:28px}
.ibtn:active{transform:scale(.92)}
.ibtn:disabled{opacity:.35; pointer-events:none}
.ibtn-ghost{width:var(--help-w); height:var(--ibtn); flex:none}

/* --- 3.4 Шапка экрана, степпер, помощь --- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; min-height:var(--ibtn)}
.topbar > .ibtn:first-child{margin-right:calc(var(--help-w) - var(--ibtn))}
.tb-title{flex:1; text-align:center; font-size:20px; font-weight:var(--fw-strong)}

.steps{counter-reset:step; margin:0 0 26px}
.steps .st{counter-increment:step}

.help-btn{
  position:absolute; z-index:40; top:var(--pad-top); right:var(--pad-x); width:var(--help-w); height:var(--ibtn);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; cursor:pointer;
  border:var(--bw) solid var(--line-strong); border-radius:var(--r-btn); background:var(--surface); color:var(--ink);
  box-shadow:var(--depth-sm); font-family:var(--font); font-size:17px; font-weight:var(--fw-btn); padding:0 14px;
  transition:background .3s, color .3s, transform .12s;
}
.help-btn svg{width:26px; height:26px; color:var(--accent)}
.help-btn.called{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.help-btn.called svg{color:currentColor}
.help-btn.called::after{content:""; position:absolute; inset:-6px; border-radius:inherit; border:2px solid currentColor; opacity:0; animation:help-ring 2.4s ease-out infinite}
@keyframes help-ring{0%{opacity:.6; transform:scale(.96)}100%{opacity:0; transform:scale(1.12)}}

/* --- 3.5 Чипы, бейджи, переключатели --- */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-chip);
  background:var(--glass-2); color:var(--ink); font-size:13px; font-weight:var(--fw-strong); letter-spacing:.08em; text-transform:uppercase;
}
.chip-accent{background:var(--accent-soft); color:var(--accent)}
.chip-cta{background:var(--cta); color:var(--cta-ink)}
.chip-info{
  display:inline-flex; align-items:center; gap:8px; min-height:var(--tap-sm); padding:0 22px; cursor:pointer;
  border:var(--bw) solid var(--line-strong); border-radius:var(--r-btn); background:var(--glass); color:var(--ink);
  box-shadow:var(--depth-sm); font-family:var(--font); font-size:16px; font-weight:var(--fw-btn);
}
.chip-info svg{width:20px; height:20px}
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-chip); white-space:nowrap;
  font-size:13px; font-weight:var(--fw-strong); letter-spacing:.08em; text-transform:uppercase;
}
.badge-hot{background:var(--hot); color:var(--hot-ink)}
.badge-warm{background:var(--warm); color:var(--warm-ink)}
.badge-accent{background:var(--accent); color:var(--accent-ink)}
.bang{
  width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--warn); color:#1E0F04; font-size:17px; font-weight:800;
}
.seg{display:inline-flex; padding:5px; border:var(--bw) solid var(--line-strong); border-radius:var(--r-btn); background:var(--glass)}
.seg button{
  border:none; cursor:pointer; padding:14px 26px; border-radius:var(--r-btn); background:transparent;
  font-family:var(--font); font-size:17px; font-weight:var(--fw-btn); color:var(--ink-soft); transition:background .3s, color .3s;
}
.seg button.on{background:var(--ink); color:var(--bg)}

/* --- 3.6 Карточка, заметка, медиа --- */
.card{background:var(--glass); border:var(--bw) solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow)}
.note{
  display:flex; align-items:center; gap:16px; padding:14px 20px; border-radius:22px; margin-bottom:20px;
  background:var(--accent-soft); color:var(--ink); font-size:17px; line-height:1.4;
}
.note b{color:var(--accent)}
.note-ico{display:flex; flex:none; color:var(--accent)}
.note-ico svg{width:30px; height:30px}
.note-badge{flex:none; font-family:var(--font-display); font-weight:var(--fw-display); font-size:28px; color:var(--accent)}
.media{background-size:cover; background-position:center; position:relative; background-repeat:no-repeat}

/* --- 3.7 Поля, пол, подсветка --- */
.field{margin-bottom:16px}
.field label{display:block; font-size:15px; font-weight:700; color:var(--ink-soft); margin:0 0 8px 8px}
.field input, .inp{
  width:100%; min-height:var(--field-h); padding:0 24px; outline:none;
  border:var(--bw) solid var(--line-strong); border-radius:var(--r-field); background:var(--field);
  font-family:var(--font); font-size:20px; font-weight:600; color:var(--ink);
  transition:border-color .2s, box-shadow .2s, background-color .5s;
}
.inp{padding:0 14px; text-align:center}
.field input:focus, .inp:focus{border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent)}
.field input::placeholder, .inp::placeholder{color:var(--ink-faint); font-weight:500}
.field input:disabled{opacity:.6}
.field-row{display:flex; gap:10px}
.field-row .w-dd{width:104px; flex:none}
.field-row .w-dd input{text-align:center; padding:0 8px}
.field-row .grow1{flex:1}
.gender{display:flex; gap:10px}
.gender button{
  flex:1; min-height:64px; cursor:pointer; border:var(--bw) solid var(--line-strong); border-radius:var(--r-field);
  background:var(--field); font-family:var(--font); font-size:19px; font-weight:700; color:var(--ink-soft);
}
.gender button.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
input.is-bad, .gender.is-bad button{background-color:var(--v-bad-bg) !important; border-color:var(--v-bad-line) !important}
input.is-ok{background-color:var(--v-ok-bg) !important; border-color:var(--v-ok-line) !important}
.form-card{padding:24px 22px 8px; margin-bottom:18px}
.form-cap{display:flex; align-items:center; gap:12px; font-size:20px; font-weight:var(--fw-strong); margin:0 0 18px 6px}
.reg-head{margin-bottom:20px}
.reg-head .note{margin-bottom:0}

/* --- 3.8 Ввод номера и кода --- */
.auth-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; max-width:500px; width:100%; margin:0 auto}
.auth-body #btnPhoneNext{margin-top:22px}
.auth-body > .badge{margin-bottom:24px}
.auth-ico{
  width:92px; height:92px; border-radius:30px; margin-bottom:26px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); box-shadow:0 0 60px -10px color-mix(in srgb, var(--accent) 50%, transparent);
}
.auth-ico svg{width:44px; height:44px}
.dots{display:flex; gap:14px; justify-content:center; margin:6px 0 30px}
.dot{
  width:84px; height:100px; display:flex; align-items:center; justify-content:center;
  border:var(--bw) solid var(--line-strong); border-radius:26px; background:var(--glass); box-shadow:var(--depth-sm);
  font-family:var(--font-display); font-weight:var(--fw-display); font-size:42px; transition:border-color .2s, transform .2s;
}
.dot.filled{border-color:var(--accent)}
.phone-view{
  width:100%; min-height:62px; margin:0 auto 22px; padding:6px 8px 22px; text-align:center;
  font-family:var(--font-display); font-weight:var(--fw-display); font-size:36px; font-variant-numeric:tabular-nums; white-space:nowrap;
  border-bottom:2px solid var(--line-strong); transition:border-color .2s;
}
.phone-view.done{border-color:var(--accent)}
.phone-view .ph{color:var(--ink-faint)}
.numpad{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; width:100%}
.numpad button{
  height:var(--key-h); cursor:pointer; border:var(--bw) solid var(--line-strong); border-radius:var(--r-key);
  background:var(--glass); color:var(--ink); box-shadow:var(--depth-sm);
  font-family:var(--font-display); font-weight:var(--fw-display); font-size:36px; transition:transform .1s, background .15s;
}
.numpad button:active{transform:scale(.93); background:var(--glass-2)}
.numpad button.fn{background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-soft)}
.numpad button.fn svg{width:34px; height:34px}

/* --- 3.9 Главный экран: медиа, статусы, оффер, плитки --- */
.screen-home{padding-bottom:30px; isolation:isolate; overflow:hidden}
.home-top{display:flex; align-items:center; justify-content:space-between; padding-right:calc(var(--help-w) + 14px); min-height:var(--ibtn)}
.home-meta{display:flex; align-items:center; gap:14px}
.home-hero{margin-bottom:26px; position:relative; z-index:2}
.stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; position:relative; z-index:2}
.stat{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; font-size:16px; font-weight:600}
.stat b{font-weight:var(--fw-strong)}
.stat-ico{display:flex; align-items:center; justify-content:center; flex:none; color:var(--accent)}
.stat-ico svg{width:22px; height:22px}
.stat-bar{display:inline-block; width:70px; height:6px; border-radius:6px; background:rgba(255,255,255,.2); overflow:hidden}
.stat-bar i{display:block; height:100%; background:var(--accent); border-radius:6px}
.stat-pulse{width:18px; height:18px; border-radius:50%; background:var(--accent); flex:none; animation:breath 4s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(.7); opacity:.5}50%{transform:scale(1.15); opacity:1}}
.offer{
  display:flex; align-items:center; gap:18px; width:100%; text-align:left; cursor:pointer; position:relative; z-index:2;
  padding:16px 20px 16px 16px; margin-bottom:16px; border:var(--bw) solid var(--line); border-radius:28px;
  background:var(--glass); color:var(--ink); box-shadow:var(--depth-sm); font-family:var(--font);
}
.offer-mark{width:84px; height:84px; border-radius:22px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--accent-ink); font-family:var(--font-display); font-weight:var(--fw-display); font-size:21px; letter-spacing:-.04em}
.offer-mark svg{width:34px; height:34px}
.offer-txt{display:flex; flex-direction:column; gap:4px; flex:1}
.offer-txt b{font-size:20px}
.offer-txt span{font-size:16px; color:var(--ink-soft); line-height:1.35}
.offer-go{display:flex; align-items:center; justify-content:center; color:var(--ink-soft)}
.offer-go svg{width:30px; height:30px}
.home-cta{display:flex; flex-direction:column; gap:14px; position:relative; z-index:2}
.pay-logos{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:22px; font-size:14px; color:var(--ink-faint)}
.pay-logos em{font-style:normal; font-weight:800; color:var(--ink-soft); padding:5px 11px; border:1.5px solid var(--line); border-radius:8px; font-size:13px}
.tiles{margin:0 0 24px; position:relative; z-index:2}
.tiles-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 2px 12px}
.tiles-head b{font-family:var(--font-display); font-size:26px; font-weight:600}
.tiles-head span{font-size:15px; color:var(--ink-soft)}
.tiles-row{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
.tile{
  position:relative; display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer;
  padding:10px 10px 14px; border:var(--bw) solid var(--line); border-radius:22px; background:var(--surface);
  box-shadow:var(--depth-sm); font-family:var(--font); color:var(--ink);
}
.tile-img{aspect-ratio:1; border-radius:15px; background-size:cover; background-position:center; margin-bottom:7px}
.tile b{font-size:16px; font-weight:600; line-height:1.2}
.tile > span:not(.tile-img):not(.badge){font-size:14px; color:var(--ink-soft)}
.tile .tile-price{color:var(--ink) !important; font-weight:600; font-size:15px !important}
.tile .badge{position:absolute; top:16px; left:16px; font-size:12px; padding:4px 9px; letter-spacing:0}

/* --- 3.10 Тарифы и абонементы --- */
.tk-head{margin-bottom:22px}
.tk-tools{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; flex-wrap:wrap}
.tariff{position:relative; margin-bottom:20px; overflow:hidden; background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow), var(--depth)}
.t-top{position:relative}
.t-badges{display:flex; gap:8px; flex-wrap:wrap; z-index:2}
.t-head{display:flex; flex-direction:column}
.t-meta{font-size:15px; font-weight:700; color:var(--accent); white-space:nowrap}
.t-title{font-family:var(--font-display); font-weight:var(--fw-display); text-transform:var(--tt-display); font-size:40px; letter-spacing:-.02em; line-height:1}
.t-name{font-size:19px; font-weight:var(--fw-strong); margin:10px 0 2px}
.t-desc{font-size:16px; color:var(--ink-soft); margin:0 0 16px; line-height:1.4}
.t-table{margin-bottom:18px}
.tp-row{display:grid; grid-template-columns:1.25fr 1fr 1fr; align-items:center; gap:10px; padding:11px 0; font-size:17px}
.tp-row + .tp-row{border-top:1px solid var(--line)}
.tp-row span{font-weight:700; display:flex; flex-direction:column}
.tp-row b{font-size:20px; font-weight:var(--fw-strong); text-align:right; white-space:nowrap; color:var(--ink-soft)}
.tp-row b.is-today{color:var(--ink)}
.tp-head b{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.tp-head b.is-today{color:var(--accent)}
.t-actions{display:grid; grid-template-columns:1fr; gap:10px}
.t-actions .btn{min-height:74px; padding:0 18px}
.pass-art{position:relative; overflow:hidden; isolation:isolate}
.pa-k, .pa-unit, .pa-save{display:block}
.pa-num{font-family:var(--font-display); font-weight:var(--fw-display); line-height:.9}

/* --- 3.11 Выбор количества билетов --- */
.pick{display:flex; align-items:center; gap:14px; padding:16px 16px 16px 22px; margin-bottom:12px; background:var(--glass); border:var(--bw) solid var(--line); border-radius:24px}
.pick .p-name{font-size:20px; font-weight:var(--fw-strong); display:flex; flex-direction:column}
.pick .p-price{margin-left:auto; font-size:19px; font-weight:var(--fw-strong); white-space:nowrap; color:var(--ink-soft)}
.pick .p-step{display:flex; align-items:center; gap:10px}
.pick .p-count{font-family:var(--font-display); font-weight:var(--fw-display); font-size:28px; min-width:34px; text-align:center}
.pick .ibtn{width:62px; height:62px}
.pick .ibtn:not(:disabled):last-child{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.total{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:14px 6px 20px}
.total .t-label{font-size:20px; font-weight:var(--fw-strong); color:var(--ink-soft)}
.total .t-sum{font-family:var(--font-display); font-weight:var(--fw-display); font-size:36px}
.alert{
  display:flex; gap:14px; align-items:flex-start; margin:6px 0 10px; padding:16px 18px; border-radius:22px;
  background:color-mix(in srgb, var(--warn) 12%, transparent); border:var(--bw) solid color-mix(in srgb, var(--warn) 35%, transparent);
  font-size:15.5px; line-height:1.5; color:var(--ink);
}

/* --- 3.12 Гости --- */
.guest{padding:22px 22px 20px; margin-bottom:16px; position:relative}
.guest .g-head{display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; padding-right:60px}
.guest .g-title{font-size:22px; font-weight:var(--fw-strong)}
.guest .g-sub{font-size:15px; color:var(--ink-soft); margin:0 0 16px}
.guest .g-del{
  position:absolute; top:18px; right:18px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:var(--bw) solid var(--line-strong); border-radius:50%; background:transparent; color:var(--ink-soft); box-shadow:var(--depth-sm);
}
.guest .g-del svg{width:22px; height:22px}
.guest.done-card{border-color:color-mix(in srgb, var(--accent) 70%, transparent)}
.g-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; padding:5px; background:var(--glass); border-radius:22px}
.g-tabs button{min-height:58px; padding:0 8px; cursor:pointer; border:none; border-radius:18px; background:transparent; font-family:var(--font); font-size:16px; font-weight:var(--fw-btn); color:var(--ink-soft)}
.g-tabs button.on{background:var(--ink); color:var(--bg)}
.g-confirm{display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:20px; background:var(--accent-soft); font-size:17px; font-weight:700}
.g-confirm .ok-ico{width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:var(--accent-ink)}
.g-confirm .ok-ico svg{width:20px; height:20px}
.g-wait{display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:17px; padding:10px 4px}
.spin-sm{width:26px; height:26px; flex:none; border-radius:50%; border:3px solid var(--glass-2); border-top-color:var(--accent); animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.g-note{font-size:14px; color:var(--ink-faint); margin:10px 6px 0}

/* --- 3.13 Промокод --- */
.promo{margin:4px 0 16px}
.promo .p-toggle{display:inline-flex; align-items:center; gap:10px; padding:10px 4px; cursor:pointer; border:none; background:none; font-family:var(--font); font-size:18px; font-weight:var(--fw-btn); color:var(--accent)}
.promo .p-toggle svg{width:22px; height:22px}
.promo .p-box{display:flex; gap:10px; margin-top:8px}
.promo .p-box input{
  flex:1; min-height:var(--field-h); padding:0 22px; outline:none; border:var(--bw) solid var(--line-strong); border-radius:var(--r-field);
  background:var(--field); font-family:var(--font); font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink);
}
.promo .p-box input::placeholder{color:var(--ink-faint); text-transform:none; letter-spacing:0; font-weight:500}
.promo .p-box input:focus{border-color:var(--accent)}
.promo .p-box .btn{min-height:var(--field-h); width:auto; padding:0 30px; margin:0}
.promo .p-ok{display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:var(--r-chip); background:var(--accent-soft); color:var(--accent); font-size:17px; font-weight:var(--fw-strong)}
.promo .p-ok svg{width:22px; height:22px}
.promo .p-ok button{border:none; background:none; color:inherit; cursor:pointer; font-size:18px; padding:0 0 0 6px}

/* --- 3.14 Допродажи, итог, выдача --- */
.addons{margin-bottom:28px}
.addon-group + .addon-group{margin-top:24px}
.addon-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 4px 12px}
.addon-head b{font-size:20px; font-weight:var(--fw-strong)}
.addon-head span{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink-soft)}
.addon-head svg{width:20px; height:20px; color:var(--accent)}
.addon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.addon{
  position:relative; display:flex; flex-direction:column; padding:0; text-align:left; cursor:pointer;
  border:var(--bw) solid var(--line); border-radius:var(--r-tile); background:var(--surface); box-shadow:var(--depth-sm);
  font-family:var(--font); color:var(--ink); transition:border-color .2s, transform .12s;
}
.addon:active{transform:scale(.97)}
.addon .ad-img{aspect-ratio:1/.82; background-size:cover; background-position:center; border-radius:calc(var(--r-tile) - var(--bw)) calc(var(--r-tile) - var(--bw)) 0 0}
.addon .ad-sale{position:absolute; top:10px; right:10px; z-index:1; font-size:12px; padding:5px 10px; letter-spacing:0}
.addon .ad-body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.addon .ad-name{font-size:15px; font-weight:700; line-height:1.3; flex:1}
.addon .ad-name small{display:block; font-size:12.5px; font-weight:600; color:var(--ink-faint); margin-top:3px}
.addon .ad-foot{display:flex; align-items:center; justify-content:space-between; gap:6px}
.addon .ad-old{display:block; font-size:13px; font-weight:600; color:var(--ink-faint); text-decoration:line-through}
.addon .ad-price{font-size:18px; font-weight:var(--fw-strong); white-space:nowrap}
.addon .ad-add{width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--glass-2); color:var(--ink)}
.addon .ad-add svg{width:22px; height:22px}
.addon.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.addon.on .ad-add{background:var(--accent); color:var(--accent-ink)}
.sumcard{padding:20px 24px; margin-bottom:16px}
.sumrow{display:flex; align-items:baseline; gap:12px; padding:10px 0; font-size:18px}
.sumrow + .sumrow{border-top:1px solid var(--line)}
.sumrow .s-name{font-weight:700}
.sumrow .s-det{font-size:15px; color:var(--ink-soft); margin-top:2px}
.sumrow .s-val{margin-left:auto; font-weight:var(--fw-strong); white-space:nowrap}
.sumrow.disc .s-val, .sumrow.disc .s-name{color:var(--accent)}
.sumrow.addon-line .s-name{color:var(--ink-soft)}
.sumrow.total-line{border-top:2px solid var(--line); margin-top:6px; padding-top:18px}
.sumrow.total-line .s-name, .sumrow.total-line .s-val{font-family:var(--font-display); font-weight:var(--fw-display); text-transform:var(--tt-display)}
.sumrow.total-line .s-name{font-size:24px}
.sumrow.total-line .s-val{font-size:32px}
#pickupInfo:empty{display:none}
#pickupInfo{margin:-6px 0 22px}
.pickup{
  display:flex; gap:16px; align-items:flex-start; text-align:left; padding:18px 20px; margin-bottom:12px; border-radius:24px;
  background:var(--cta-soft); border:var(--bw) solid color-mix(in srgb, var(--cta-2) 50%, transparent); box-shadow:var(--depth-sm);
  animation:pk-in .6s .3s cubic-bezier(.2,.8,.2,1) both;
}
.pickup-service{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 50%, transparent); animation-delay:.45s}
@keyframes pk-in{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.pk-ico{width:60px; height:60px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:18px; background:var(--cta); color:var(--cta-ink)}
.pickup-service .pk-ico{background:var(--accent); color:var(--accent-ink)}
.pk-ico svg{width:32px; height:32px}
.pk-txt{display:flex; flex-direction:column; gap:5px}
.pk-txt b{font-size:20px; font-weight:var(--fw-strong); color:var(--ink)}
.pk-txt span{font-size:16.5px; line-height:1.4; color:var(--ink)}
.pk-txt span b{font-size:inherit}
.pk-txt em{font-style:normal; font-size:14px; font-weight:600; color:var(--ink-soft)}

/* --- 3.15 Выход: скан, аккордеоны услуг --- */
.screen-scan{text-align:center}
.scan-stage{position:relative; width:420px; height:420px; margin:0 auto 34px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.scan-fx{position:absolute; inset:0; pointer-events:none}
.scan-arrow{width:64px; height:64px; margin:26px auto 0; color:var(--accent); animation:nudge 1.4s ease-in-out infinite}
.scan-arrow svg{width:100%; height:100%; transform:rotate(90deg)}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.scan-demo{max-width:400px; margin:0 auto}
.acc{margin-bottom:14px; overflow:hidden}
.acc .a-head{display:flex; align-items:center; gap:16px; width:100%; padding:20px 22px; cursor:pointer; border:none; background:none; font-family:var(--font); text-align:left; color:var(--ink)}
.acc .a-ava{
  width:60px; height:60px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-deep)); color:var(--accent-ink);
  font-family:var(--font-display); font-weight:var(--fw-display); font-size:24px;
}
.acc .a-name{font-size:21px; font-weight:var(--fw-strong)}
.acc .a-cnt{font-size:15px; color:var(--ink-soft)}
.acc .a-sum{margin-left:auto; font-size:22px; font-weight:var(--fw-strong); white-space:nowrap}
.acc .a-chev{width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--glass-2); color:var(--ink-soft); transition:transform .3s}
.acc .a-chev svg{width:20px; height:20px; transform:rotate(-90deg)}
.acc.open .a-chev{transform:rotate(180deg)}
.acc .a-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease}
.acc.open .a-wrap{grid-template-rows:1fr}
.acc .a-body{overflow:hidden; min-height:0; padding:0 22px}
.acc .a-body::after{content:""; display:block; height:16px}
.svc{display:flex; align-items:baseline; gap:14px; padding:12px 0; font-size:17px; border-top:1px solid var(--line)}
.svc .v-time{font-size:14px; font-weight:700; color:var(--ink-faint); flex:none; width:52px; font-variant-numeric:tabular-nums}
.svc .v-val{margin-left:auto; font-weight:var(--fw-strong); white-space:nowrap}

/* --- 3.16 Модальные окна --- */
.overlay{position:absolute; inset:0; z-index:50; display:none; align-items:flex-end; justify-content:center; background:var(--overlay); backdrop-filter:blur(var(--overlay-blur)); -webkit-backdrop-filter:blur(var(--overlay-blur)); animation:fade .3s ease both}
.overlay.center{align-items:center; padding:34px}
.overlay.show{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative; width:100%; max-width:540px; padding:40px 34px 34px; text-align:center;
  background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--r-modal); box-shadow:var(--shadow-pop);
  animation:modal-in .4s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes modal-in{from{transform:translateY(30px) scale(.94); opacity:0}to{transform:none; opacity:1}}
.m-close{position:absolute; top:20px; right:20px; z-index:3}
.m-title{font-family:var(--font-display); font-weight:var(--fw-display); text-transform:var(--tt-display); font-size:30px; line-height:1.1; letter-spacing:-.01em; margin:18px 0 10px}
.m-title em{color:var(--accent)}
.m-text{font-size:18px; line-height:1.5; color:var(--ink-soft); margin:0 0 26px}
.m-text b{color:var(--ink)}
.m-actions{display:flex; gap:12px}
.modal-lg{max-width:640px; max-height:92%; padding:0; text-align:left; overflow-y:auto}
.modal-lg::-webkit-scrollbar{display:none}
.modal-lg .m-title{font-size:32px; margin:0 0 6px}
.m-head-txt{padding-right:0}
.modal-final{overflow:hidden}
.big-ico{
  position:relative; width:116px; height:116px; margin:0 auto; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font-family:var(--font-display); font-weight:var(--fw-display); font-size:56px;
}
.big-ico svg{width:56px; height:56px}
.big-ico.warn{background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn)}
.big-ico.pulse::before, .big-ico.pulse::after{content:""; position:absolute; inset:-14px; border-radius:inherit; border:2.5px solid var(--accent); opacity:0; animation:ring2 2s ease-out infinite}
.big-ico.pulse::after{animation-delay:1s}
@keyframes ring2{0%{transform:scale(.85); opacity:.7}100%{transform:scale(1.25); opacity:0}}
.final-tips{display:flex; flex-direction:column; gap:10px; margin:-16px 0 24px; text-align:left}
.final-tips span{display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:18px; background:var(--glass); font-size:17px; font-weight:600}
.final-tips b{width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:var(--accent-ink)}
.media-tag{position:absolute; left:34px; top:26px; z-index:1; font-family:var(--font-display); font-weight:var(--fw-display); font-size:44px; color:#fff; text-shadow:0 4px 24px rgba(0,0,0,.4)}
.burst{position:absolute; inset:0; pointer-events:none; display:none}

/* --- 3.17 Процессы: оплата, печать, чеки --- */
.paycard{position:relative; height:170px; display:flex; align-items:center; justify-content:center; gap:26px}
.pc-card{position:relative; width:200px; height:126px; padding:18px; text-align:left; border-radius:18px; background:var(--cta); color:var(--cta-ink); border:var(--bw) solid var(--outline); animation:tap 1.8s ease-in-out infinite}
.pc-card i{display:block; width:40px; height:30px; border-radius:7px; background:rgba(0,0,0,.18)}
.pc-card b{position:absolute; left:18px; bottom:16px; font-size:17px; letter-spacing:.08em}
.pc-nfc{width:70px; height:70px; color:var(--accent); animation:waves 1.8s ease-in-out infinite}
.pc-nfc svg{width:100%; height:100%}
@keyframes tap{0%,100%{transform:translateX(-20px) rotate(-8deg)}50%{transform:translateX(18px) rotate(0)}}
@keyframes waves{0%,100%{opacity:.35}50%{opacity:1}}
.loader{height:8px; border-radius:8px; background:var(--glass-2); overflow:hidden}
.loader i{display:block; height:100%; width:40%; border-radius:8px; background:var(--accent); animation:load 1.3s ease-in-out infinite}
.loader i + i{display:none}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.progress{height:10px; margin:18px 0 8px; overflow:hidden; border-radius:999px; background:var(--glass-2)}
.progress i{display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--cta-1)); transition:width .5s ease}
.bandwrap{display:flex; align-items:center; justify-content:center; margin:10px auto 8px}
.bslot{width:18px; height:96px; flex:none; z-index:2; border-radius:9px; background:#050809; box-shadow:inset 0 0 8px #000, 0 0 0 2px var(--line)}
.bandreel{overflow:hidden; width:300px; height:90px; margin-left:-4px; display:flex; align-items:center}
.band{width:286px; height:72px; flex:none; display:flex; align-items:center; justify-content:center; gap:18px; border-radius:12px; background:#F8F5EF; box-shadow:0 8px 20px rgba(0,0,0,.35); animation:bandout 1.3s cubic-bezier(.25,.9,.35,1) both}
.band .qr{width:54px; height:54px; flex:none}
.band .bl{width:66px; height:5px; border-radius:3px; background:#DDD6CA}
@keyframes bandout{from{transform:translateX(-104%)}to{transform:none}}
.band-static{animation:none; width:250px; height:66px; position:relative; z-index:1; box-shadow:0 20px 50px -10px rgba(0,0,0,.6)}
.band-static .qr{width:46px; height:46px}
.band-static .bl{width:56px}
.printer{position:relative; z-index:2; width:260px; height:18px; margin:10px auto 0; border-radius:10px; background:#050809; box-shadow:0 0 0 2px var(--line)}
.receipt{
  width:210px; margin:0 auto; padding:18px 16px 14px; background:#F8F5EF; font-size:13px; color:#5A5A5A; text-align:left; line-height:1.7; font-family:"Courier New", monospace;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 6px), 92% 100%, 84% calc(100% - 6px), 76% 100%, 68% calc(100% - 6px), 60% 100%, 52% calc(100% - 6px), 44% 100%, 36% calc(100% - 6px), 28% 100%, 20% calc(100% - 6px), 12% 100%, 4% calc(100% - 6px), 0 100%);
  transform-origin:top; animation:print 1.1s ease both;
}
@keyframes print{from{transform:scaleY(.1); opacity:0}to{transform:none; opacity:1}}
.receipt b{color:#10181B}

/* --- 3.18 Закреплённая кнопка, тост --- */
.cta-top{
  position:sticky; top:calc(var(--pad-top) * -1); z-index:30; margin:0 calc(var(--pad-x) * -1) 20px; padding:14px var(--pad-x) 22px;
  background:linear-gradient(to bottom, var(--bg) 76%, transparent);
  transition:padding .25s ease;
}
.cta-top .btn{transition:min-height .25s ease, font-size .25s ease}
.screen.stuck .cta-top{padding-top:var(--pad-top); padding-right:calc(var(--help-w) + var(--pad-x) + 12px); background:color-mix(in srgb, var(--bg) 94%, transparent)}
.screen.stuck .cta-top .btn{min-height:var(--ibtn); font-size:19px}
.toast{
  position:absolute; left:50%; top:50%; z-index:99; max-width:78%; padding:24px 36px; text-align:center; pointer-events:none; opacity:0;
  transform:translate(-50%,-50%) scale(.92); transition:.25s;
  background:var(--surface); color:var(--ink); border:var(--bw) solid var(--accent); border-radius:26px; box-shadow:var(--shadow-pop);
  font-size:19px; font-weight:700;
}

/* --- 3.19 Экранная клавиатура --- */
.vkb{
  position:absolute; left:0; right:0; bottom:0; height:var(--kb-h); z-index:45; display:flex; flex-direction:column; padding:10px 16px 18px;
  background:var(--surface); border-top:var(--bw) solid var(--line); border-radius:34px 34px 0 0; font-family:var(--font);
  transform:translateY(102%); visibility:hidden; transition:transform .34s cubic-bezier(.22,.8,.26,1), visibility 0s linear .34s;
}
.vkb.show{transform:none; visibility:visible; transition:transform .34s cubic-bezier(.22,.8,.26,1), visibility 0s}
.vkb-head{display:flex; align-items:center; justify-content:space-between; gap:12px; height:48px; padding:0 6px; flex:none}
.vkb-hint{font-size:15px; font-weight:600; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vkb-done{border:none; background:none; font-family:inherit; font-size:16px; font-weight:700; color:var(--accent); cursor:pointer; padding:8px 4px}
.vkb-chips{display:flex; gap:8px; flex:none; padding:0 0 8px}
.vkb-chips:empty{display:none}
.vkb-chips button{flex:1; height:46px; cursor:pointer; font-family:inherit; font-size:16px; font-weight:700; border:var(--bw) solid var(--line-strong); border-radius:14px; background:var(--glass); color:var(--accent)}
.vkb-keys{flex:1; display:flex; flex-direction:column; gap:8px; min-height:0}
.vkb-row{flex:1; display:flex; gap:6px; min-height:0}
.vkb-row button{flex:1; min-width:0; padding:0; cursor:pointer; border:none; border-radius:16px; background:var(--glass-2); color:var(--ink); font-family:inherit; font-size:25px; font-weight:600; transition:background .12s, color .12s}
.vkb-name .vkb-row:nth-child(2){padding:0 24px}
.vkb-row .k-space{flex:5; font-size:17px; color:var(--ink-soft)}
.vkb-row .k-next{flex:2.2; background:var(--cta) !important; color:var(--cta-ink) !important; font-size:19px !important; font-weight:var(--fw-btn) !important}
.vkb-row .k-fn{flex:1.3; background:var(--glass); color:var(--ink-soft); font-size:24px}
.vkb-row .k-fn.on{background:var(--ink); color:var(--bg)}
.vkb-row button.hit{background:var(--accent); color:var(--accent-ink)}
.vkb-pad .vkb-keys{width:100%; max-width:470px; margin:0 auto}
.vkb-pad .vkb-row{gap:10px}
.vkb-pad .vkb-row button{font-family:var(--font-display); font-weight:var(--fw-display); font-size:32px; border-radius:22px}
.vkb-pad .vkb-row .k-next, .vkb-pad .vkb-row .k-fn{flex:1}
.ui.kb-open .screen.active{padding-bottom:calc(var(--kb-h) + 40px)}

/* --- 3.20 Декоративный фон экранов --- */
.ambient{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.ambient i{position:absolute; display:none}

/* --- 3.21 Панель подсказок демо --- */
.hints{
  width:300px; flex:none; position:sticky; top:14px; align-self:flex-start; max-height:calc(100vh - 28px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--hint-k) transparent; padding:2px 6px 20px 2px;
  color:var(--hint-ink); font-family:var(--font); font-size:13.5px; line-height:1.65;
}
.hints h3{margin:0 0 12px; color:var(--hint-title); font-family:var(--font-display); font-weight:var(--fw-display); font-size:13px; letter-spacing:.14em; text-transform:uppercase}
.hints .hint-card{background:var(--hint-card); border:1px solid var(--hint-line); border-radius:18px; padding:16px 18px; margin-bottom:12px}
.hints b{color:#fff; font-weight:700}
.hints .k{display:inline-block; background:var(--hint-k); border-radius:6px; padding:1px 8px; font-weight:700; color:#fff; font-size:12.5px}
.theme-btns{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.theme-btns button{border:1px solid var(--hint-btn-line); background:transparent; color:var(--hint-ink); padding:7px 13px; border-radius:999px; font-family:inherit; font-weight:700; font-size:12px; cursor:pointer}
.theme-btns button.on{background:var(--hint-on); border-color:var(--hint-on); color:var(--hint-on-ink)}
.burger{display:none; position:fixed; z-index:400; top:50%; left:0; transform:translateY(-50%); width:30px; height:64px; border:none; border-radius:0 16px 16px 0; cursor:pointer; background:rgba(0,0,0,.4); color:#fff; font-size:17px; font-weight:700; font-family:Georgia, serif; font-style:italic; align-items:center; justify-content:center}

@media (max-width:800px){
  body.demo{padding:0; display:block}
  .kiosk{width:100%; padding:0; border-radius:0; background:none; box-shadow:none}
  .kiosk .cam, .kpanel{display:none}
  .kscreen{width:100vw; height:100dvh; border-radius:0; box-shadow:none}
  .kscreen::after{display:none}
  .burger{display:flex}
  .hints{display:block; position:fixed; left:0; top:0; bottom:0; z-index:390; width:min(330px, 86vw); max-height:none; height:100dvh; background:var(--hint-drawer); padding:24px 18px; transform:translateX(-120%); transition:transform .28s ease}
  .hints.open{transform:none; box-shadow:24px 0 60px rgba(0,0,0,.45)}
}

/* =========================================================================
   СЛОЙ 4. ВАРИАНТЫ ДИЗАЙНОВ
   Только то, что нельзя выразить токенами: раскладки, фирменные приёмы, декор.
   ========================================================================= */

/* ============================ 4.1 «ТЕРМЫ» ============================ */
[data-design="thermal"] :is(.btn-secondary, .ibtn, .chip-info, .card, .chip, .offer, .stat, .numpad button, .seg){backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur))}
[data-design="thermal"] .btn-cta{overflow:hidden; box-shadow:0 18px 40px -16px color-mix(in srgb, var(--cta-2) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.45)}
[data-design="thermal"] .btn-cta::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); animation:shine 4.5s ease-in-out infinite}
[data-design="thermal"] .btn:disabled::after{display:none}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
[data-design="thermal"] .ibtn{border-color:var(--line)}
[data-design="thermal"] .help-btn{background:color-mix(in srgb, var(--surface) 88%, transparent); border-color:var(--line); box-shadow:0 10px 30px -12px rgba(0,0,0,.5); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
[data-design="thermal"] .help-btn.called{background:var(--accent); border-color:var(--accent)}
[data-design="thermal"] .cta-top{background:color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent); mask-image:linear-gradient(to bottom, #000 78%, transparent)}
[data-design="thermal"] .screen.stuck .cta-top{background:color-mix(in srgb, var(--bg) 94%, transparent)}

/* степпер: три сегмента-полоски, подпись «01 · Билеты» */
[data-design="thermal"] .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
[data-design="thermal"] .steps .st{display:flex; flex-direction:column; gap:9px; font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--ink-faint)}
[data-design="thermal"] .steps .st i{display:block; height:6px; border-radius:6px; background:var(--glass-2)}
[data-design="thermal"] .steps .st span::before{content:counter(step, decimal-leading-zero) " · "}
[data-design="thermal"] .steps .st.done{color:var(--ink-soft)}
[data-design="thermal"] .steps .st.done i{background:var(--accent)}
[data-design="thermal"] .steps .st.cur{color:var(--ink)}
[data-design="thermal"] .steps .st.cur i{background:linear-gradient(90deg, var(--accent) 0 50%, var(--glass-2) 50%)}
[data-design="thermal"] .chip{backdrop-filter:blur(10px)}
[data-design="thermal"] .note{border:1.5px solid color-mix(in srgb, var(--accent) 30%, transparent)}
[data-design="thermal"] .reg-head .note{margin-top:-6px}

/* главный экран: фото на весь экран, пар, стеклянные статусы */
[data-design="thermal"] .home-media{position:absolute; inset:0; z-index:-1; background-position:center, center 30%; background-size:cover; animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translateY(-10px)}}
[data-design="thermal"][data-theme="copper"] .home-media{filter:sepia(.45) saturate(1.1) hue-rotate(-12deg)}
[data-design="thermal"] .home-top, [data-design="thermal"] .home-top .brand, [data-design="thermal"] .home-top .clock{color:#fff}
[data-design="thermal"] .home-top .brand svg{width:34px; height:34px}
[data-design="thermal"] .home-top .brand span{font-size:18px}
[data-design="thermal"] .lang{background:rgba(0,0,0,.28); border:1.5px solid rgba(255,255,255,.16); border-radius:999px; padding:4px; backdrop-filter:blur(12px)}
[data-design="thermal"] .lang button{color:rgba(255,255,255,.7); font-weight:800; font-size:14px; padding:8px 10px; border-radius:999px}
[data-design="thermal"] .lang button.on{background:#fff; color:#0B1215}
[data-design="thermal"] .stat{border-radius:999px; background:rgba(8,16,18,.38); border:1.5px solid rgba(255,255,255,.14); color:#fff}
[data-design="thermal"] .screen-home .display{color:#fff; text-shadow:0 4px 40px rgba(0,0,0,.35)}
[data-design="thermal"][data-theme="day"] .screen-home .display{color:var(--ink); text-shadow:none}
[data-design="thermal"][data-theme="day"] .stat{background:rgba(10,20,22,.35); border-color:rgba(255,255,255,.2)}

/* тарифы: фото сверху, заголовок наезжает на затемнение */
[data-design="thermal"] .t-media{height:210px}
[data-design="thermal"] .t-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.1) 30%, var(--surface) 100%)}
[data-design="thermal"] .t-badges{position:absolute; top:18px; left:18px; right:18px}
[data-design="thermal"] .t-head{display:grid; grid-template-columns:1fr auto; align-items:end; column-gap:12px; padding:0 26px; margin-top:-54px; position:relative; z-index:1}
[data-design="thermal"] .t-head .t-title{grid-column:1; grid-row:1}
[data-design="thermal"] .t-head .t-meta{grid-column:2; grid-row:1; padding-bottom:4px}
[data-design="thermal"] .t-head > p{grid-column:1 / -1}
[data-design="thermal"] .t-body{padding:0 26px 24px}
[data-design="thermal"] .t-table{background:var(--glass); border:1.5px solid var(--line); border-radius:22px; padding:6px 18px}
[data-design="thermal"] .tariff.is-hit{border-color:color-mix(in srgb, var(--cta-2) 60%, transparent)}
[data-design="thermal"] .badge{backdrop-filter:blur(10px)}

/* абонемент: клубная карта */
[data-design="thermal"] .pass-art{margin:14px 14px 0; min-height:230px; padding:22px 24px; border-radius:26px; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto 1fr auto; column-gap:12px; color:#fff;
  background:radial-gradient(circle at 88% -10%, rgba(255,255,255,.30), transparent 45%), linear-gradient(135deg, #169C8D, #0B2F35)}
[data-design="thermal"] .pass-2 .pass-art{background:radial-gradient(circle at 88% -10%, rgba(255,255,255,.35), transparent 45%), linear-gradient(135deg, #FFB25C, #B8461E)}
[data-design="thermal"] .pass-3 .pass-art{background:radial-gradient(circle at 88% -10%, rgba(243,208,138,.35), transparent 45%), linear-gradient(135deg, #2C2A27, #0B0B0C); color:#F3D08A; box-shadow:inset 0 0 0 1.5px rgba(243,208,138,.35)}
[data-design="thermal"] .pass-art::after{content:""; position:absolute; right:-70px; bottom:-90px; width:300px; height:300px; border-radius:50%; border:34px solid rgba(255,255,255,.08); z-index:-1}
[data-design="thermal"] .pa-k{grid-column:1 / -1; grid-row:1; font-family:var(--font-display); font-size:14px; letter-spacing:.18em; text-transform:uppercase}
[data-design="thermal"] .pa-num{grid-column:1; grid-row:2; align-self:center; font-size:100px; letter-spacing:-.05em}
[data-design="thermal"] .pa-unit{grid-column:2; grid-row:2; align-self:center; padding-top:40px; font-size:24px; font-weight:700; opacity:.85}
[data-design="thermal"] .pa-save{grid-column:3; grid-row:3; justify-self:end; align-self:end; font-family:var(--font-display); font-size:22px; background:rgba(255,255,255,.18); padding:8px 16px; border-radius:999px}
[data-design="thermal"] .pass .t-badges{top:30px; left:auto; right:30px; width:auto}
[data-design="thermal"] .pass .t-head{margin-top:0; padding-top:20px; display:flex; align-items:stretch}
[data-design="thermal"] .pass .t-meta{order:2; padding:0; margin:8px 0 6px; white-space:normal}
[data-design="thermal"] .pass .t-desc{order:3}

/* допродажи: скидка на фото */
[data-design="thermal"] .addon{overflow:hidden}

/* модалка тарифа: фото сверху */
[data-design="thermal"] .m-media{height:200px}
[data-design="thermal"] .m-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, var(--surface))}
[data-design="thermal"] .m-head-txt{padding:0 30px; margin-top:-30px; position:relative}
[data-design="thermal"] .m-body{padding:0 30px 30px}
[data-design="thermal"] .modal-lg .m-close{background:rgba(8,14,16,.45); color:#fff}
[data-design="thermal"] .modal-final{padding-top:0}
[data-design="thermal"] .final-media{height:230px; margin:0 -34px; background-position:center 60%}
[data-design="thermal"] .modal-final .final-tips{margin-top:-10px}
[data-design="thermal"] .final-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, var(--surface))}
[data-design="thermal"] .modal-final > .m-title{margin-top:18px}

/* выход: кольца вокруг браслета */
[data-design="thermal"] .scan-stage::before{content:""; position:absolute; inset:60px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%)}
[data-design="thermal"] .scan-fx i{display:block; inset:40px; border-radius:50%; border:2px solid var(--accent); opacity:0; animation:scan-ring 2.6s ease-out infinite}
[data-design="thermal"] .scan-fx i:nth-child(2){animation-delay:.85s}
[data-design="thermal"] .scan-fx i:nth-child(3){animation-delay:1.7s}
@keyframes scan-ring{0%{transform:scale(.55); opacity:.9}100%{transform:scale(1.15); opacity:0}}

[data-design="thermal"] .pc-card{box-shadow:0 20px 40px -14px color-mix(in srgb, var(--cta-2) 70%, transparent)}
[data-design="thermal"] .vkb{background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); box-shadow:0 -30px 60px -30px rgba(0,0,0,.6)}

/* пар над экранами */
[data-design="thermal"] .ambient i{display:block; bottom:-260px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, var(--steam) 0%, transparent 65%); filter:blur(20px); animation:steam 16s linear infinite; opacity:0}
[data-design="thermal"] .ambient i:nth-child(1){left:-120px}
[data-design="thermal"] .ambient i:nth-child(2){left:260px; animation-delay:-4s; animation-duration:19s}
[data-design="thermal"] .ambient i:nth-child(3){left:40px; animation-delay:-9s; animation-duration:22s}
[data-design="thermal"] .ambient i:nth-child(4){left:380px; animation-delay:-13s}
[data-design="thermal"] .ambient i:nth-child(n+5){display:none}
@keyframes steam{0%{transform:translate(0,0) scale(.7); opacity:0}20%{opacity:1}100%{transform:translate(60px,-1500px) scale(1.4); opacity:0}}
[data-design="thermal"] .hints .hint-lead{background:linear-gradient(135deg, rgba(95,227,209,.12), rgba(255,127,69,.08)); border-color:rgba(95,227,209,.2)}

/* ============================ 4.2 «СПА» ============================ */
[data-design="spa"] .screen{padding-bottom:40px; animation:spa-in .8s ease both}
@keyframes spa-in{from{opacity:0}to{opacity:1}}
[data-design="spa"] .kscreen::after{background:linear-gradient(115deg, rgba(255,255,255,.08) 0%, transparent 28%)}
[data-design="spa"] .display{font-size:68px; line-height:1.02; letter-spacing:-.015em}
[data-design="spa"] :is(.display, .h1, .m-title) em{color:var(--accent); font-weight:500}
[data-design="spa"] .h1{font-size:40px; line-height:1.12; letter-spacing:-.01em; margin-bottom:14px}
[data-design="spa"] .h2{font-size:30px; font-weight:600; margin:14px 0}
[data-design="spa"] .eyebrow{font-weight:600; letter-spacing:.16em; margin-bottom:18px}
[data-design="spa"] .body-lg{font-size:20px; line-height:1.5}
[data-design="spa"] .body-md{font-size:19px; line-height:1.5; margin-bottom:28px}
[data-design="spa"] .h3-brand{font-weight:400; color:var(--ink-soft); margin:4px 0 0}
[data-design="spa"] .tb-title{font-size:18px; font-weight:600}
[data-design="spa"] .btn{font-size:20px}
[data-design="spa"] .btn-cta:active{background:var(--cta-2)}
[data-design="spa"] .btn-secondary{background:var(--surface)}
[data-design="spa"] .btn-add{background:var(--surface); color:var(--ink); border:1.5px solid var(--line-strong); min-height:var(--tap)}
[data-design="spa"] .btn-link{text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; font-weight:500}
[data-design="spa"] .btn:disabled{background:var(--glass-2); border-color:var(--line)}
[data-design="spa"] .btn-xl{padding:0 40px}
[data-design="spa"] .btn-xl .btn-stack b{font-size:23px; font-weight:600}
[data-design="spa"] .btn-xl .btn-ico{width:auto; height:auto; background:none !important}
[data-design="spa"] .btn-xl .btn-ico svg{width:30px; height:30px}
[data-design="spa"] .chip-info{border:none; background:none; box-shadow:none; color:var(--accent); font-weight:500; text-decoration:underline; text-underline-offset:6px; padding:0 6px}
[data-design="spa"] .chip{background:var(--accent-soft); color:var(--accent); font-weight:600}
[data-design="spa"] .chip-cta{background:var(--cta-soft); color:var(--cta-1)}
[data-design="spa"] .badge{background:var(--surface); color:var(--cta-1); font-size:11px; font-weight:600}
[data-design="spa"] .badge-hot{background:var(--cta-1); color:var(--cta-ink)}
[data-design="spa"] .bang{background:none; border:1.5px solid var(--warn); color:var(--warn)}
[data-design="spa"] .seg{background:var(--surface)}
[data-design="spa"] .seg button{font-weight:600}
[data-design="spa"] .seg button.on, [data-design="spa"] .g-tabs button.on{background:var(--accent); color:var(--accent-ink)}
[data-design="spa"] .note{border-radius:24px; padding:18px 22px; margin-bottom:26px}
[data-design="spa"] .note b{color:var(--ink); font-weight:600}
[data-design="spa"] .card{background:var(--surface); border-color:var(--line); box-shadow:none}

/* степпер: римские цифры и линия между шагами */
[data-design="spa"] .steps{display:flex; align-items:center; gap:14px; margin-bottom:30px}
[data-design="spa"] .steps .st{display:flex; align-items:baseline; gap:10px; font-size:16px; font-weight:500; color:var(--ink-faint); white-space:nowrap}
[data-design="spa"] .steps .st:not(:last-child){flex:1}
[data-design="spa"] .steps .st:not(:last-child)::after{content:""; flex:1; height:1.5px; min-width:16px; align-self:center; background:var(--line-strong); margin-left:4px}
[data-design="spa"] .steps .st i{font-family:var(--font-display); font-size:24px; font-weight:600; font-style:italic}
[data-design="spa"] .steps .st i::before{content:counter(step, upper-roman)}
[data-design="spa"] .steps .st.cur{color:var(--ink)}
[data-design="spa"] .steps .st.cur i{color:var(--cta-1)}
[data-design="spa"] .steps .st.done{color:var(--ink-soft)}
[data-design="spa"] .steps .st.done i{color:var(--accent)}

/* поля и ввод */
[data-design="spa"] .field label{font-weight:500; margin-left:4px}
[data-design="spa"] .field input, [data-design="spa"] .inp, [data-design="spa"] .promo .p-box input{font-weight:500}
[data-design="spa"] .gender button{font-weight:500}
[data-design="spa"] .gender button.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
[data-design="spa"] .form-cap{font-family:var(--font-display); font-size:26px; font-weight:600}
[data-design="spa"] :is(.dot, .phone-view, .numpad button, .pick .p-count, .tp-row b, .clock){font-family:var(--font)}
[data-design="spa"] .dot{font-size:44px; font-weight:600; border-radius:18px; background:var(--surface)}
[data-design="spa"] .dot.filled{border-width:2.5px}
[data-design="spa"] .phone-view{font-size:38px; font-weight:600}
[data-design="spa"] .numpad{grid-template-columns:repeat(3, var(--key-h)); gap:18px 48px; justify-content:center}
[data-design="spa"] .numpad button{width:var(--key-h); font-size:36px; font-weight:500; background:var(--surface); box-shadow:0 8px 18px -12px rgba(60,45,20,.4)}
[data-design="spa"] .numpad button:active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
[data-design="spa"] .auth-body #btnPhoneNext{margin-top:28px}

/* главный экран: арка с фото, плашка статуса, плитки массажей */
[data-design="spa"] .home-top{align-items:flex-start}
[data-design="spa"] .home-meta{flex-direction:column; align-items:flex-start; gap:8px; width:170px}
[data-design="spa"] .clock{font-size:28px; font-weight:600; line-height:1}
[data-design="spa"] .lang{gap:12px}
[data-design="spa"] .lang button{font-size:14px; font-weight:500; letter-spacing:.14em; color:var(--ink-soft); padding:4px 0}
[data-design="spa"] .lang button.on{color:var(--ink); text-decoration:underline; text-underline-offset:5px}
[data-design="spa"] .brand{flex-direction:column; gap:6px}
[data-design="spa"] .brand svg{width:44px; height:44px; color:var(--accent)}
[data-design="spa"] .brand span{font-family:var(--font); font-size:14px; font-weight:600; letter-spacing:.34em; margin-right:-.34em}
[data-design="spa"] .brand-sm{flex-direction:row; gap:12px}
[data-design="spa"] .brand-sm svg{width:34px; height:34px}
[data-design="spa"] .brand-sm span{font-size:13px}
[data-design="spa"] .home-media-wrap{position:relative; margin:18px auto 0; width:100%}
[data-design="spa"] .home-media{height:340px; border-radius:300px 300px 20px 20px; background-position:center 40%; animation:slowzoom 30s ease-in-out infinite alternate}
@keyframes slowzoom{from{background-size:100% auto}to{background-size:112% auto}}
[data-design="spa"] .stat-float{position:absolute; left:50%; bottom:-34px; transform:translateX(-50%); white-space:nowrap; gap:16px; padding:16px 26px 16px 20px; border-radius:999px; background:var(--surface); box-shadow:var(--shadow); font-weight:400; line-height:1.35; color:var(--ink-soft)}
[data-design="spa"] .stat-float b{color:var(--ink); font-weight:500}
[data-design="spa"] .home-hero{text-align:center; margin:54px 0 22px}
[data-design="spa"] .home-hero .body-lg{margin-left:auto; margin-right:auto}
[data-design="spa"] .home-cta{margin-top:auto}

/* тарифы: арка слева, описание и цены справа */
[data-design="spa"] .tariff{display:grid; grid-template-columns:210px 1fr; grid-template-areas:"media head" "media body"; column-gap:26px; align-content:start;
  padding:0 0 30px; margin-bottom:30px; background:none; border:none; border-bottom:1.5px solid var(--line); border-radius:0; box-shadow:none; overflow:visible}
[data-design="spa"] .t-top{display:contents}
[data-design="spa"] .t-media, [data-design="spa"] .pass-art{grid-area:media; height:290px; border-radius:110px 110px 14px 14px}
[data-design="spa"] .t-badges{position:absolute; left:105px; top:262px; transform:translateX(-50%)}
[data-design="spa"] .t-head{grid-area:head}
[data-design="spa"] .t-body{grid-area:body; display:flex; flex-direction:column}
[data-design="spa"] .t-meta{order:-1; font-size:15px; font-weight:500; color:var(--ink-soft)}
[data-design="spa"] .t-title{font-size:36px; font-weight:600; margin:2px 0 4px}
[data-design="spa"] .t-name{font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:4px 0 8px}
[data-design="spa"] .t-desc{font-size:17px; line-height:1.45; margin-bottom:14px}
[data-design="spa"] .t-table{margin-bottom:16px}
[data-design="spa"] .tp-row{grid-template-columns:1fr auto auto; align-items:baseline; gap:18px; padding:7px 0; font-size:16px}
[data-design="spa"] .tp-row span{font-weight:400; color:var(--ink); display:block}
[data-design="spa"] .tp-row b{font-size:19px; font-weight:600; min-width:92px; color:var(--ink-faint)}
[data-design="spa"] .tp-row b.is-today{color:var(--ink)}
[data-design="spa"] .tp-head b{font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--ink-faint)}
[data-design="spa"] .tp-head b.is-today{color:var(--cta-1)}
[data-design="spa"] .t-actions .btn{min-height:64px; font-size:17px}
[data-design="spa"] .pass-art{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; background:var(--glass-2); border:1.5px solid var(--line)}
[data-design="spa"] .pass-2 .pass-art{background:var(--accent-soft)}
[data-design="spa"] .pass-3 .pass-art{background:var(--cta-soft)}
[data-design="spa"] .pa-k{font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft)}
[data-design="spa"] .pa-num{font-size:84px; font-weight:600; color:var(--accent)}
[data-design="spa"] .pass-3 .pa-num{color:var(--cta-1)}
[data-design="spa"] .pa-unit{font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--ink-soft)}
[data-design="spa"] .pa-save{margin-top:6px; font-size:16px; font-weight:600; color:var(--cta-1)}

/* количество, гости, промокод */
[data-design="spa"] .pick{background:none; border:none; border-bottom:1.5px solid var(--line); border-radius:0; padding:18px 0}
[data-design="spa"] .pick .p-name{font-size:21px; font-weight:600}
[data-design="spa"] .pick .p-count{font-size:30px; font-weight:600}
[data-design="spa"] .pick .p-price{font-weight:500}
[data-design="spa"] .pick .ibtn:not(:disabled):last-child{background:var(--surface); border-color:var(--line-strong); color:var(--ink)}
[data-design="spa"] .total{padding:18px 0 22px}
[data-design="spa"] .total .t-label{font-size:15px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
[data-design="spa"] .total .t-sum{font-size:38px; font-weight:600}
[data-design="spa"] .alert{background:none; border:none; padding:18px 0 4px; font-size:16px; color:var(--ink-soft)}
[data-design="spa"] .guest{padding:26px 26px 24px; margin-bottom:18px}
[data-design="spa"] .guest .g-title{font-family:var(--font-display); font-size:26px; font-weight:600}
[data-design="spa"] .guest .g-del{border-color:var(--line)}
[data-design="spa"] .guest.done-card{border-color:var(--accent)}
[data-design="spa"] .guest.done-card::after{content:"✓"; position:absolute; top:-12px; left:26px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:15px; display:flex; align-items:center; justify-content:center}
[data-design="spa"] .g-tabs{background:var(--glass-2); border-radius:18px; gap:6px}
[data-design="spa"] .g-tabs button{border-radius:14px; font-weight:500}
[data-design="spa"] .g-confirm{background:none; padding:8px 0; font-size:18px; font-weight:500}
[data-design="spa"] .g-confirm .ok-ico{width:38px; height:38px; background:none; border:1.5px solid var(--accent); color:var(--accent)}
[data-design="spa"] .spin-sm{border:none; background:var(--accent); animation:breath 1.6s ease-in-out infinite}
[data-design="spa"] .promo{margin-top:10px}
[data-design="spa"] .promo .p-toggle{font-weight:500; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px}
[data-design="spa"] .promo .p-ok{background:none; padding:10px 0}

/* допродажи строками с круглым фото */
[data-design="spa"] .addon-head b{font-family:var(--font-display); font-size:24px; font-weight:600}
[data-design="spa"] .addon-grid{display:flex; flex-direction:column; gap:0; border-top:1.5px solid var(--line)}
[data-design="spa"] .addon{flex-direction:row; align-items:center; gap:20px; padding:18px 0; background:none; border:none; border-bottom:1.5px solid var(--line); border-radius:0; box-shadow:none !important}
[data-design="spa"] .addon .ad-img{width:104px; height:104px; aspect-ratio:auto; flex:none; border-radius:50%; transition:transform .5s}
[data-design="spa"] .addon.on .ad-img{transform:scale(.92); box-shadow:0 0 0 4px var(--bg), 0 0 0 5px var(--accent)}
[data-design="spa"] .addon .ad-sale{top:14px; left:0; right:auto}
[data-design="spa"] .addon .ad-body{flex-direction:row; align-items:center; gap:16px; padding:0}
[data-design="spa"] .addon .ad-name{font-size:19px; font-weight:600; line-height:1.25}
[data-design="spa"] .addon .ad-name small{font-size:14px; font-weight:400; color:var(--ink-soft)}
[data-design="spa"] .addon .ad-foot{gap:16px}
[data-design="spa"] .addon .ad-price-wrap{text-align:right}
[data-design="spa"] .addon .ad-old{font-size:15px}
[data-design="spa"] .addon .ad-price{font-size:21px; font-weight:600}
[data-design="spa"] .addon .ad-add{width:56px; height:56px; background:none; border:1.5px solid var(--line-strong)}
[data-design="spa"] .addon.on .ad-add{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
[data-design="spa"] .sumcard{padding:14px 28px; margin-bottom:18px}
[data-design="spa"] .sumrow{padding:14px 0}
[data-design="spa"] .sumrow .s-name{font-weight:400}
[data-design="spa"] .sumrow .s-val{font-size:19px; font-weight:600}
[data-design="spa"] .sumrow.total-line{border-top:1px solid var(--line-strong); margin-top:4px}
[data-design="spa"] .sumrow.total-line .s-name{font-size:28px; font-weight:600}
[data-design="spa"] .sumrow.total-line .s-val{font-size:34px; font-weight:600}
[data-design="spa"] .pickup{background:var(--cta-soft); border-color:color-mix(in srgb, var(--cta-1) 40%, transparent); border-radius:22px; box-shadow:none}
[data-design="spa"] .pickup-service{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
[data-design="spa"] .pk-ico{border-radius:50%; background:var(--cta-1)}
[data-design="spa"] .pickup-service .pk-ico{background:var(--accent)}
[data-design="spa"] .pk-txt b{font-weight:600}

/* выход */
[data-design="spa"] .scan-stage{width:360px; height:460px; margin-bottom:40px; border-radius:180px 180px 24px 24px; background:var(--surface); border:1.5px solid var(--line); overflow:hidden}
[data-design="spa"] .scan-fx i:first-child{display:block; left:30px; top:80px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); animation:breath 4s ease-in-out infinite}
[data-design="spa"] .acc{border-radius:28px}
[data-design="spa"] .acc .a-ava{background:none; border:1.5px solid var(--accent); color:var(--accent); font-size:26px; font-weight:600}
[data-design="spa"] .acc .a-name, [data-design="spa"] .acc .a-sum{font-size:21px; font-weight:600}
[data-design="spa"] .acc .a-cnt{font-size:14px}
[data-design="spa"] .acc .a-chev{background:none; width:auto; height:auto}
[data-design="spa"] .acc .a-chev svg{width:24px; height:24px}
[data-design="spa"] .acc .a-body{padding:0 24px}
[data-design="spa"] .svc .v-time{font-size:15px; font-weight:500}
[data-design="spa"] .svc .v-val{font-size:18px; font-weight:600}

/* модалки и процессы */
[data-design="spa"] .overlay.center{padding:40px}
[data-design="spa"] .modal{padding:44px 38px 36px; animation:spa-rise .7s ease both}
@keyframes spa-rise{from{transform:translateY(24px); opacity:0}to{transform:none; opacity:1}}
[data-design="spa"] .m-title{font-size:34px; font-weight:600; line-height:1.05; margin-top:20px}
[data-design="spa"] .m-text{margin-bottom:28px; line-height:1.55}
[data-design="spa"] .m-text b{font-weight:500}
[data-design="spa"] .m-close{top:22px; right:22px}
[data-design="spa"] .modal-lg{padding:34px 34px 30px}
[data-design="spa"] .modal-lg .m-close{top:24px; right:24px}
[data-design="spa"] .modal-lg .m-title{font-size:30px; font-weight:600; margin:0; line-height:1.05; padding-right:0}
[data-design="spa"] .m-head{display:flex; gap:22px; align-items:center; margin-bottom:10px; padding-right:60px}
[data-design="spa"] .m-media{width:112px; height:150px; flex:none; border-radius:56px 56px 10px 10px}
[data-design="spa"] .final-media{width:220px; height:280px; margin:0 auto; border-radius:110px 110px 16px 16px}
[data-design="spa"] .final-tips{margin:-10px 0 26px}
[data-design="spa"] .final-tips span{background:none; padding:10px 0; font-size:16px; font-weight:400; color:var(--ink-soft); border-top:1px dotted var(--line-strong); border-radius:0}
[data-design="spa"] .final-tips span:last-child{border-bottom:1px dotted var(--line-strong)}
[data-design="spa"] .final-tips b{width:28px; height:28px; font-size:14px; font-weight:600}
[data-design="spa"] .big-ico{width:116px; height:116px; background:none; border:1.5px solid var(--accent); font-size:52px}
[data-design="spa"] .big-ico.warn{border-color:var(--cta-1); color:var(--cta-1); background:none}
[data-design="spa"] .big-ico.pulse::before, [data-design="spa"] .big-ico.pulse::after{border-width:1.5px}
[data-design="spa"] .pc-card{background:var(--cta-1); border:none; animation-duration:2.6s}
[data-design="spa"] .loader{height:2px; background:var(--line)}
[data-design="spa"] .progress{height:2px; border-radius:0; background:var(--line); margin-top:22px}
[data-design="spa"] .progress i{background:var(--accent); border-radius:0; transition:width .8s ease}
[data-design="spa"] .bslot, [data-design="spa"] .printer{background:var(--ink); box-shadow:none; width:16px; height:92px}
[data-design="spa"] .printer{width:260px; height:14px}
[data-design="spa"] .band{background:#FFFDF9; border:1px solid var(--line-strong); box-shadow:none; height:70px; animation-duration:1.6s}
[data-design="spa"] .band .bl{height:2px; border-radius:0; background:var(--line-strong)}
[data-design="spa"] .band-static{height:64px; box-shadow:var(--shadow)}
[data-design="spa"] .receipt{background:#FFFDF9; border:1px solid var(--line); border-top:none; color:#6E6A60}
[data-design="spa"] .cta-top{top:-36px; padding-bottom:22px; background:linear-gradient(to bottom, var(--bg) 76%, transparent)}
[data-design="spa"] .toast{border:none; font-size:20px; font-weight:600; border-radius:30px}
[data-design="spa"] .vkb{border-top-width:1px; border-radius:36px 36px 0 0; box-shadow:0 -24px 60px -30px rgba(60,45,20,.35)}
[data-design="spa"] .vkb-done{font-weight:500; text-decoration:underline; text-underline-offset:5px}
[data-design="spa"] .vkb-chips button{border-width:1px; background:transparent; border-radius:999px; font-weight:400}
[data-design="spa"] .vkb-row button{border-radius:14px; background:var(--bg); font-size:26px; font-weight:500}
[data-design="spa"] .vkb-pad .vkb-row button{font-family:var(--font); font-size:32px; font-weight:500; border:1.5px solid var(--line-strong); background:var(--glass-2); border-radius:999px}
[data-design="spa"] .vkb-row .k-fn{background:var(--glass-2)}
[data-design="spa"] .vkb-row .k-fn.on, [data-design="spa"] .vkb-row button.hit{background:var(--accent); color:var(--accent-ink)}
[data-design="spa"] .help-btn{font-size:16px; font-weight:600; box-shadow:0 10px 24px -14px rgba(60,45,20,.35)}
[data-design="spa"] .hints h3{font-size:22px; letter-spacing:0; text-transform:none; font-weight:600}
[data-design="spa"] .hints h3 em{color:#C9B78A}
[data-design="spa"] .hints b{font-weight:500}
[data-design="spa"] .hints .hint-lead{border-color:rgba(201,183,138,.3)}
[data-design="spa"] .burger{background:rgba(43,42,38,.35)}

/* ============================ 4.3 «РАЗВЛЕЧЕНИЯ» ============================ */
[data-design="fun"] .kscreen::after{background:linear-gradient(115deg, rgba(255,255,255,.07) 0%, transparent 28%)}
[data-design="fun"] .screen{padding-bottom:36px; animation:fun-in .35s cubic-bezier(.3,1.4,.5,1) both}
@keyframes fun-in{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
[data-design="fun"] .display{font-size:84px; line-height:.98; letter-spacing:-.01em}
[data-design="fun"] .display .hl{color:var(--c-lime); text-shadow:6px 6px 0 var(--outline)}
[data-design="fun"] .h1{font-size:44px; line-height:1.05; letter-spacing:0; margin-bottom:12px}
[data-design="fun"] .h2{font-size:28px}
[data-design="fun"] :is(.body-lg, .body-md, .h3-brand, .caption){font-weight:700}
[data-design="fun"] .body-lg{font-size:22px; line-height:1.4}
[data-design="fun"] .body-md{font-size:19px}
[data-design="fun"] .h3-brand{color:var(--ink-soft); margin:6px 0 0; line-height:1.35}
[data-design="fun"] .tb-title{font-family:var(--font-display); font-weight:400; font-size:18px; line-height:1.1; text-transform:uppercase}
[data-design="fun"] .brand svg{width:46px; height:46px}
[data-design="fun"] .brand span{letter-spacing:.04em}
[data-design="fun"] .brand-sm svg{width:36px; height:36px}

/* объёмные кнопки со «вдавливанием» */
[data-design="fun"] .btn{border-color:var(--outline); font-size:22px; margin-bottom:8px; padding:0 30px}
[data-design="fun"] .btn:active{box-shadow:0 2px 0 var(--outline)}
[data-design="fun"] .btn-secondary{background:var(--glass)}
[data-design="fun"] .btn-accent{color:var(--outline)}
[data-design="fun"] .btn-add{color:var(--c-lime); border:3px dashed var(--c-lime)}
[data-design="fun"] .btn-link{color:var(--c-cyan); border:none; font-size:19px; margin-top:8px}
[data-design="fun"] .btn:disabled{background:var(--surface); border-color:var(--outline)}
[data-design="fun"] .btn-sm{border-radius:18px; box-shadow:var(--depth-sm)}
[data-design="fun"] .btn-xl{justify-content:center; padding:0 30px; border-radius:30px}
[data-design="fun"] .btn-xl .btn-stack b{font-family:var(--font-display); font-weight:400; font-size:30px; text-transform:uppercase; letter-spacing:.01em}
[data-design="fun"] .btn-xl .btn-ico{width:auto; height:auto; background:none !important}
[data-design="fun"] .btn-xl .btn-ico svg{width:36px; height:36px}
[data-design="fun"] .home-cta .btn-secondary.btn-xl{min-height:84px}
[data-design="fun"] .home-cta .btn-secondary.btn-xl .btn-stack b{font-size:22px}
[data-design="fun"] .home-cta{gap:8px}
[data-design="fun"] .ibtn{border-radius:20px; border-color:var(--outline); margin-bottom:5px}
[data-design="fun"] .ibtn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--outline)}
[data-design="fun"] .help-btn{top:33px; border-radius:20px; border-color:var(--outline); background:var(--c-yellow); color:var(--outline); font-size:18px}
[data-design="fun"] .help-btn svg{color:currentColor}
[data-design="fun"] .help-btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--outline)}
[data-design="fun"] .help-btn.called{background:var(--c-pink); color:#fff}
[data-design="fun"] .topbar{min-height:70px; margin-bottom:20px}
[data-design="fun"] .cta-top{top:-30px; padding-bottom:12px; margin-bottom:18px; background:linear-gradient(to bottom, var(--bg) 80%, transparent)}
[data-design="fun"] .screen.stuck .cta-top{padding-top:33px; background:linear-gradient(to bottom, var(--bg) 80%, transparent)}

/* степпер: пилюля с номерами */
[data-design="fun"] .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:24px; padding:6px; background:var(--surface); border:3px solid var(--outline); border-radius:22px}
[data-design="fun"] .steps .st{display:flex; align-items:center; justify-content:center; gap:10px; padding:10px; border-radius:16px; font-size:17px; font-weight:900; color:var(--ink-faint)}
[data-design="fun"] .steps .st i{font-style:normal; width:32px; height:32px; border-radius:50%; background:var(--glass); display:flex; align-items:center; justify-content:center; font-size:15px}
[data-design="fun"] .steps .st i::before{content:counter(step)}
[data-design="fun"] .steps .st.done{color:var(--ink-soft)}
[data-design="fun"] .steps .st.done i{background:var(--c-lime); color:var(--outline)}
[data-design="fun"] .steps .st.done i::before{content:"✓"}
[data-design="fun"] .steps .st.cur{background:var(--c-pink); color:#fff}
[data-design="fun"] .steps .st.cur i{background:#fff; color:var(--c-pink)}

/* чипы — плашки, бейджи — наклейки */
[data-design="fun"] .chip{border:2px solid var(--outline); background:var(--glass); padding:7px 13px; font-size:14px; letter-spacing:0; text-transform:none}
[data-design="fun"] .chip-accent{background:var(--c-cyan); color:var(--outline)}
[data-design="fun"] .chip-cta{background:var(--c-pink); color:#fff}
[data-design="fun"] .form-cap .chip{text-transform:uppercase}
[data-design="fun"] .chip-info{border-radius:18px; background:var(--glass)}
[data-design="fun"] .badge{border:3px solid var(--outline); border-radius:14px; box-shadow:4px 4px 0 var(--outline); transform:rotate(-4deg); font-size:17px; letter-spacing:0; text-transform:none; padding:10px 18px}
[data-design="fun"] .badge-accent{background:var(--c-lime); color:var(--outline)}
[data-design="fun"] .bang{border-radius:10px; background:var(--c-yellow); color:var(--outline); border:2px solid var(--outline); width:32px; height:32px; font-size:18px; font-weight:900}
[data-design="fun"] .seg{border-radius:20px; background:var(--surface); border-color:var(--outline)}
[data-design="fun"] .seg button{border-radius:14px; font-size:18px; padding:13px 24px}
[data-design="fun"] .seg button.on{background:var(--c-cyan); color:var(--outline)}
[data-design="fun"] .card{background:var(--surface); border-color:var(--outline); box-shadow:var(--depth)}
[data-design="fun"] .note{background:var(--surface); border:3px solid var(--outline); box-shadow:var(--depth-sm); padding:12px 18px 12px 12px; font-weight:800; color:var(--ink-soft)}
[data-design="fun"] .note b{color:var(--c-lime)}
[data-design="fun"] .note-badge{font-size:22px; background:var(--c-lime); color:var(--outline); border:3px solid var(--outline); border-radius:14px; padding:8px 12px; transform:rotate(-3deg)}
[data-design="fun"] .note-ico{width:50px; height:50px; border-radius:14px; border:3px solid var(--outline); background:var(--c-lime); color:var(--outline); align-items:center; justify-content:center}
[data-design="fun"] .note-ico svg{width:26px; height:26px}

/* поля и ввод номера */
[data-design="fun"] .field label{font-weight:800; margin-left:6px}
[data-design="fun"] :is(.field input, .inp, .promo .p-box input, .gender button){font-weight:800; border-color:var(--outline)}
[data-design="fun"] .field input:focus, [data-design="fun"] .inp:focus{border-color:var(--c-cyan); box-shadow:0 0 0 4px color-mix(in srgb, var(--c-cyan) 30%, transparent)}
[data-design="fun"] .gender button{font-size:20px; font-weight:900}
[data-design="fun"] .gender button.on{background:var(--c-cyan); color:var(--outline)}
[data-design="fun"] .form-cap{font-family:var(--font-display); font-weight:400; font-size:24px; text-transform:uppercase}
[data-design="fun"] .dot{background:var(--surface); border-radius:22px; font-size:48px}
[data-design="fun"] .dot.filled{background:var(--c-lime); color:var(--outline); border-color:var(--outline); transform:rotate(-4deg)}
[data-design="fun"] .dot.filled:nth-child(2){background:var(--c-pink); color:#fff; transform:rotate(3deg)}
[data-design="fun"] .dot.filled:nth-child(3){background:var(--c-cyan); transform:rotate(-2deg)}
[data-design="fun"] .dot.filled:nth-child(4){background:var(--c-yellow); transform:rotate(4deg)}
[data-design="fun"] .phone-view{font-size:36px; padding:18px 10px; background:var(--surface); border:3px solid var(--outline); border-radius:22px; box-shadow:0 6px 0 var(--outline)}
[data-design="fun"] .phone-view.done{background:var(--c-lime); color:var(--outline); border-color:var(--outline)}
[data-design="fun"] .phone-view.done .ph{color:var(--outline)}
[data-design="fun"] .numpad button{font-size:40px; box-shadow:0 7px 0 var(--outline)}
[data-design="fun"] .numpad button:active{transform:translateY(6px); box-shadow:0 1px 0 var(--outline); background:var(--c-pink)}
[data-design="fun"] .numpad button.fn{background:var(--surface); border-color:var(--outline); box-shadow:0 7px 0 var(--outline)}

/* главный экран */
[data-design="fun"] .lang{gap:6px}
[data-design="fun"] .lang button{border:3px solid var(--outline); background:var(--surface); color:var(--ink-soft); font-weight:900; font-size:15px; padding:8px 12px; border-radius:12px}
[data-design="fun"] .lang button.on{background:var(--c-yellow); color:var(--outline)}
[data-design="fun"] .home-hero{margin:36px 0 0}
[data-design="fun"] .home-hero .badge{margin-bottom:22px}
[data-design="fun"] .stats{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px}
[data-design="fun"] .stat{padding:12px 14px; gap:12px; background:var(--surface); border:3px solid var(--outline); border-radius:22px; box-shadow:var(--depth-sm); font-size:15px; font-weight:800; color:var(--ink-soft); line-height:1.25}
[data-design="fun"] .stat b{display:block; color:var(--ink); font-size:18px; font-weight:900}
[data-design="fun"] .stat b.few{color:var(--c-pink); font-size:15px}
[data-design="fun"] .stat-ico{width:50px; height:50px; border-radius:14px; border:3px solid var(--outline); color:var(--outline); background:var(--tint, var(--c-cyan))}
[data-design="fun"] .stat-ico svg{width:26px; height:26px}
[data-design="fun"] .home-media{flex:1; min-height:200px; margin:0 -36px -40px; position:relative; z-index:1; background-position:center 78%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%)}
[data-design="fun"][data-theme="sunny"] .home-media{mix-blend-mode:multiply; opacity:.9}
[data-design="fun"] .offer{gap:16px; padding:14px 16px; margin-bottom:20px; background:var(--c-yellow); color:var(--outline); border-color:var(--outline); border-radius:24px; box-shadow:0 6px 0 var(--outline)}
[data-design="fun"] .offer-mark{width:58px; height:58px; border-radius:16px; background:#fff; color:var(--outline); border:3px solid var(--outline)}
[data-design="fun"] .offer-mark svg{width:32px; height:32px}
[data-design="fun"] .offer-txt{gap:0}
[data-design="fun"] .offer-txt b{font-family:var(--font-display); font-weight:400; font-size:22px; text-transform:uppercase}
[data-design="fun"] .offer-txt span{font-size:17px; font-weight:800; color:var(--outline)}
[data-design="fun"] .offer-go{width:50px; height:50px; border-radius:50%; background:var(--outline); color:var(--c-yellow)}
[data-design="fun"] .offer-go svg{width:26px; height:26px}
.tint-1{--tint:var(--tint-1)} .tint-2{--tint:var(--tint-2)} .tint-3{--tint:var(--tint-3)} .tint-4{--tint:var(--tint-4)}

/* тарифы: билет с перфорацией */
[data-design="fun"] .tariff{margin-bottom:26px; border-color:var(--outline); border-radius:30px; box-shadow:var(--depth); --tc:var(--tint, var(--c-pink)); --tc-ink:var(--outline)}
[data-design="fun"] .tariff.tint-1{--tc-ink:#fff}
[data-design="fun"] .t-top{display:flex; background:var(--tc); color:var(--tc-ink); border-bottom:3px dashed var(--outline)}
[data-design="fun"] .t-top::before, [data-design="fun"] .t-top::after{content:""; position:absolute; bottom:-17px; width:32px; height:32px; border-radius:50%; background:var(--bg); border:3px solid var(--outline); z-index:2}
[data-design="fun"] .t-top::before{left:-19px}
[data-design="fun"] .t-top::after{right:-19px}
[data-design="fun"] .t-media, [data-design="fun"] .pass-art{width:250px; flex:none; border-right:3px solid var(--outline)}
[data-design="fun"] .t-badges{position:absolute; top:20px; left:272px; right:16px}
[data-design="fun"] .t-badges .badge{font-size:14px; padding:6px 12px; border-width:2px; box-shadow:3px 3px 0 var(--outline); transform:rotate(-3deg)}
[data-design="fun"] .t-head{flex:1; padding:64px 22px 22px}
[data-design="fun"] .t-title{font-size:50px; margin:0 0 6px}
[data-design="fun"] .t-title-long{font-size:36px; line-height:1.05}
[data-design="fun"] .tariff:not(.pass) .t-meta{display:none}
[data-design="fun"] .t-meta{order:2; color:inherit; font-size:21px; font-weight:900; white-space:normal}
[data-design="fun"] .t-title{order:1}
[data-design="fun"] .t-name{order:2; font-size:21px; font-weight:900; margin:0}
[data-design="fun"] .t-desc{order:3; font-size:16px; font-weight:800; line-height:1.35; margin:6px 0 0; color:inherit; opacity:.85}
[data-design="fun"] .t-body{padding:22px 22px 14px}
[data-design="fun"] .t-table{display:flex; flex-direction:column; gap:8px}
[data-design="fun"] .tp-row{grid-template-columns:1.3fr 1fr 1fr; padding:0; font-size:17px; font-weight:800}
[data-design="fun"] .tp-row + .tp-row{border:none}
[data-design="fun"] .tp-row span{color:var(--ink-soft); line-height:1.2}
[data-design="fun"] .tp-row b{text-align:center; font-size:22px; font-weight:900; padding:8px 4px; border-radius:14px; background:var(--glass); color:var(--ink-soft)}
[data-design="fun"] .tp-row b.is-today{background:color-mix(in srgb, var(--tc) 22%, var(--glass)); color:var(--ink); box-shadow:inset 0 0 0 2px var(--tc)}
[data-design="fun"] .tp-head b{background:none !important; box-shadow:none !important; padding:0; font-size:13px; letter-spacing:.06em}
[data-design="fun"] .tp-head b.is-today{color:var(--tc)}
[data-design="fun"] .tariff .btn-cta{background:var(--tc); color:var(--tc-ink); min-height:70px; font-size:20px; padding:0 14px}
[data-design="fun"] .pass-art{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--tc);
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 14px, transparent 14px 28px), var(--outline)}
[data-design="fun"] .pa-k{display:none}
[data-design="fun"] .pa-num{font-size:104px; text-shadow:5px 5px 0 rgba(0,0,0,.5)}
[data-design="fun"] .pa-unit{font-family:var(--font-display); font-size:24px; text-transform:uppercase; color:#fff}
[data-design="fun"] .pa-save{margin-top:8px; font-size:15px; font-weight:900; padding:4px 10px; border:2px solid var(--outline); border-radius:10px; background:var(--c-pink); color:#fff; transform:rotate(-3deg)}
[data-design="fun"] .pass .t-title{font-size:44px}

/* количество, гости, промокод */
[data-design="fun"] .pick{background:var(--glass); border-color:var(--outline); border-radius:22px; padding:14px 14px 14px 20px}
[data-design="fun"] .pick .p-name{font-size:21px; line-height:1.15}
[data-design="fun"] .pick .p-count{font-size:32px}
[data-design="fun"] .pick .ibtn{width:60px; height:60px}
[data-design="fun"] .pick .ibtn:not(:disabled):last-child{background:var(--c-lime); color:var(--outline); border-color:var(--outline)}
[data-design="fun"] .total{padding:12px 6px 18px}
[data-design="fun"] .total .t-label{font-weight:900}
[data-design="fun"] .total .t-sum{font-size:42px; color:var(--c-lime)}
[data-design="fun"] .alert{background:var(--glass); border-color:var(--outline); border-radius:18px; font-size:16px; font-weight:800; color:var(--ink-soft)}
[data-design="fun"] .guest{padding:22px 20px 20px; margin-bottom:22px}
[data-design="fun"] .guest .g-head{padding-right:64px}
[data-design="fun"] .guest .g-title{font-family:var(--font-display); font-weight:400; font-size:26px; text-transform:uppercase}
[data-design="fun"] .guest .g-sub{font-weight:800}
[data-design="fun"] .guest .g-del{width:54px; height:54px; top:16px; right:16px; border-radius:16px; border-color:var(--outline); background:var(--glass); box-shadow:0 4px 0 var(--outline)}
[data-design="fun"] .guest.done-card{background:color-mix(in srgb, var(--c-lime) 12%, var(--surface)); border-color:var(--outline)}
[data-design="fun"] .guest.done-card::before{content:"ГОТОВО"; position:absolute; top:-16px; right:84px; font-weight:900; font-size:14px; background:var(--c-lime); color:var(--outline); border:3px solid var(--outline); border-radius:10px; padding:3px 10px; transform:rotate(4deg)}
[data-design="fun"] .g-tabs{background:none; padding:0}
[data-design="fun"] .g-tabs button{min-height:60px; border:3px solid var(--outline); border-radius:16px; background:var(--glass); font-size:17px}
[data-design="fun"] .g-tabs button.on{background:var(--c-pink); color:#fff}
[data-design="fun"] .g-confirm{background:var(--glass); border:3px solid var(--outline); border-radius:18px; padding:14px 16px; font-size:18px; font-weight:900}
[data-design="fun"] .g-confirm .ok-ico{width:38px; height:38px; border-radius:12px; background:var(--c-lime); color:var(--outline); border:2px solid var(--outline)}
[data-design="fun"] .g-wait{font-size:18px; font-weight:800}
[data-design="fun"] .spin-sm{width:28px; height:28px; border:none; border-radius:8px; background:var(--c-pink); animation:spinbox 1s ease-in-out infinite}
@keyframes spinbox{50%{transform:rotate(180deg) scale(.7); background:var(--c-cyan)}100%{transform:rotate(360deg)}}
[data-design="fun"] .g-note{font-weight:700}
[data-design="fun"] .promo .p-toggle{color:var(--c-cyan); font-size:19px}
[data-design="fun"] .promo .p-box input{font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:.06em}
[data-design="fun"] .promo .p-box input::placeholder{font-family:var(--font); font-weight:800}
[data-design="fun"] .promo .p-ok{background:var(--c-lime); color:var(--outline); border:3px solid var(--outline); border-radius:16px; padding:10px 18px; transform:rotate(-2deg); font-weight:900}

/* допродажи и итог */
[data-design="fun"] .addon-head b{font-family:var(--font-display); font-weight:400; font-size:22px; text-transform:uppercase}
[data-design="fun"] .addon-head span{font-size:15px; font-weight:900}
[data-design="fun"] .addon-head svg{color:var(--c-lime)}
[data-design="fun"] .addon-grid{gap:14px}
[data-design="fun"] .addon{border-color:var(--outline); box-shadow:0 6px 0 var(--outline)}
[data-design="fun"] .addon:active{transform:translateY(5px); box-shadow:0 1px 0 var(--outline)}
[data-design="fun"] .addon .ad-img{aspect-ratio:1/.85; border-bottom:3px solid var(--outline)}
[data-design="fun"] .addon .ad-sale{top:-12px; right:-8px; font-size:15px; padding:5px 10px; border-width:2px; box-shadow:3px 3px 0 var(--outline)}
[data-design="fun"] .addon .ad-body{padding:12px; gap:8px}
[data-design="fun"] .addon .ad-name{font-size:16px; font-weight:900; line-height:1.25}
[data-design="fun"] .addon .ad-name small{font-weight:800}
[data-design="fun"] .addon .ad-price{font-family:var(--font-display); font-weight:400; font-size:20px}
[data-design="fun"] .addon .ad-old{font-weight:800}
[data-design="fun"] .addon .ad-add{width:46px; height:46px; border-radius:14px; border:3px solid var(--outline)}
[data-design="fun"] .addon.on{background:color-mix(in srgb, var(--c-lime) 18%, var(--surface)); border-color:var(--outline); box-shadow:0 6px 0 var(--outline)}
[data-design="fun"] .addon.on .ad-add{background:var(--c-lime); color:var(--outline)}
[data-design="fun"] .sumcard{padding:14px 22px; margin-bottom:22px}
[data-design="fun"] .sumrow{padding:12px 0; font-weight:800}
[data-design="fun"] .sumrow + .sumrow{border-top:2px dashed color-mix(in srgb, var(--ink-faint) 50%, transparent)}
[data-design="fun"] .sumrow .s-name, [data-design="fun"] .sumrow .s-val{font-weight:900}
[data-design="fun"] .sumrow.disc :is(.s-name, .s-val){color:var(--c-lime)}
[data-design="fun"] .sumrow.total-line{border-top:3px solid var(--outline)}
[data-design="fun"] .sumrow.total-line .s-name{font-size:26px; font-weight:400}
[data-design="fun"] .sumrow.total-line .s-val{font-size:36px; font-weight:400; color:var(--c-lime)}
[data-design="fun"] .pickup{padding:16px 18px; gap:14px; border-radius:22px; margin-bottom:14px; background:var(--glass); border:3px solid var(--outline); box-shadow:0 5px 0 var(--outline); animation:fun-pk .45s .3s cubic-bezier(.3,1.4,.5,1) both}
@keyframes fun-pk{from{opacity:0; transform:scale(.92)}to{opacity:1; transform:none}}
[data-design="fun"] .pk-ico{background:var(--c-yellow); color:var(--outline); border:3px solid var(--outline); transform:rotate(-4deg)}
[data-design="fun"] .pickup-service .pk-ico{background:var(--c-cyan); transform:rotate(4deg)}
[data-design="fun"] .pk-txt b{font-family:var(--font-display); font-weight:400; font-size:21px; text-transform:uppercase}
[data-design="fun"] .pk-txt span{font-size:17px; font-weight:800}
[data-design="fun"] .pk-txt span b{font-family:var(--font); font-weight:900; text-transform:none; color:var(--c-lime)}
[data-design="fun"] .pk-txt em{font-weight:800}

/* выход */
[data-design="fun"] .scan-stage{width:440px; height:400px; margin-bottom:24px}
[data-design="fun"] .scan-fx{left:30px; top:10px; width:380px; height:380px; border-radius:50%; opacity:.35; animation:rot 14s linear infinite;
  background:conic-gradient(from 0deg, var(--c-pink) 0 30deg, transparent 30deg 60deg, var(--c-cyan) 60deg 90deg, transparent 90deg 120deg, var(--c-lime) 120deg 150deg, transparent 150deg 180deg, var(--c-yellow) 180deg 210deg, transparent 210deg 240deg, var(--c-violet) 240deg 270deg, transparent 270deg 300deg, var(--c-pink) 300deg 330deg, transparent 330deg);
  -webkit-mask-image:radial-gradient(circle, #000 30%, transparent 70%); mask-image:radial-gradient(circle, #000 30%, transparent 70%)}
[data-design="fun"] .band-static{width:270px; height:72px; transform:rotate(-6deg); box-shadow:6px 6px 0 var(--outline)}
[data-design="fun"] .scan-arrow{width:70px; height:70px; margin-top:20px; color:var(--c-lime); animation-duration:1s}
[data-design="fun"] .scan-demo{margin-bottom:8px}
[data-design="fun"] .acc{margin-bottom:16px}
[data-design="fun"] .acc .a-head{gap:14px; padding:16px 18px}
[data-design="fun"] .acc .a-ava{border-radius:18px; border:3px solid var(--outline); background:var(--c-pink); color:#fff; font-size:28px; transform:rotate(-4deg)}
[data-design="fun"] .acc:nth-child(4n+2) .a-ava{background:var(--c-cyan); color:var(--outline); transform:rotate(3deg)}
[data-design="fun"] .acc:nth-child(4n+3) .a-ava{background:var(--c-yellow); color:var(--outline)}
[data-design="fun"] .acc:nth-child(4n+4) .a-ava{background:var(--c-lime); color:var(--outline); transform:rotate(4deg)}
[data-design="fun"] .acc .a-name{font-size:22px}
[data-design="fun"] .acc .a-cnt{font-size:14px; font-weight:800}
[data-design="fun"] .acc .a-sum{font-family:var(--font-display); font-weight:400; font-size:24px}
[data-design="fun"] .acc .a-chev{width:44px; height:44px; border-radius:14px; background:var(--glass); border:2px solid var(--outline); color:var(--ink)}
[data-design="fun"] .acc .a-body{padding:0 18px}
[data-design="fun"] .svc{padding:11px 0; font-weight:800; border-top:2px dashed color-mix(in srgb, var(--ink-faint) 45%, transparent)}
[data-design="fun"] .svc .v-val{font-weight:900}

/* модалки и процессы */
[data-design="fun"] .overlay.center{padding:30px}
[data-design="fun"] .overlay{animation-duration:.2s}
[data-design="fun"] .modal{padding:36px 30px 26px; border-color:var(--outline); animation:fun-pop .35s cubic-bezier(.3,1.5,.5,1) both}
@keyframes fun-pop{from{transform:scale(.8) rotate(-2deg); opacity:0}to{transform:none; opacity:1}}
[data-design="fun"] .m-close{top:18px; right:18px}
[data-design="fun"] .m-title{font-size:34px; line-height:1.05; letter-spacing:0}
[data-design="fun"] .m-text{font-size:19px; font-weight:700; line-height:1.45; margin-bottom:24px}
[data-design="fun"] .modal-lg{max-width:650px; padding:26px 24px 20px}
[data-design="fun"] .modal-lg .m-title{margin:0}
[data-design="fun"] .m-head{display:flex; gap:18px; align-items:center; margin-bottom:18px; padding-right:70px}
[data-design="fun"] .m-media{width:120px; height:120px; flex:none; border-radius:24px; border:3px solid var(--outline); transform:rotate(-4deg)}
[data-design="fun"] .final-media{width:230px; height:172px; margin:0 auto; border-radius:26px; border:3px solid var(--outline); transform:rotate(-3deg); box-shadow:6px 6px 0 var(--outline)}
[data-design="fun"] .big-ico{border-radius:32px; border:3px solid var(--outline); box-shadow:0 6px 0 var(--outline); background:var(--c-cyan); color:var(--outline); font-size:60px; transform:rotate(-5deg)}
[data-design="fun"] .big-ico svg{width:58px; height:58px}
[data-design="fun"] .big-ico.warn{background:var(--c-yellow); color:var(--outline)}
[data-design="fun"] .big-ico.pulse::before, [data-design="fun"] .big-ico.pulse::after{border-color:var(--c-lime); border-width:3px}
[data-design="fun"] .burst{display:block}
[data-design="fun"] .burst i{position:absolute; top:40%; left:50%; width:16px; height:16px; border-radius:4px; background:var(--c-lime); animation:boom 1.6s ease-out infinite}
[data-design="fun"] .burst i:nth-child(2n){background:var(--c-pink); border-radius:50%}
[data-design="fun"] .burst i:nth-child(3n){background:var(--c-cyan)}
[data-design="fun"] .burst i:nth-child(5n){background:var(--c-yellow)}
[data-design="fun"] .burst i:nth-child(1){--x:-220px; --y:-160px} [data-design="fun"] .burst i:nth-child(2){--x:210px; --y:-150px}
[data-design="fun"] .burst i:nth-child(3){--x:-250px; --y:30px}   [data-design="fun"] .burst i:nth-child(4){--x:240px; --y:60px}
[data-design="fun"] .burst i:nth-child(5){--x:-120px; --y:-230px} [data-design="fun"] .burst i:nth-child(6){--x:130px; --y:-240px}
[data-design="fun"] .burst i:nth-child(7){--x:-200px; --y:190px}  [data-design="fun"] .burst i:nth-child(8){--x:190px; --y:210px}
[data-design="fun"] .burst i:nth-child(9){--x:-20px; --y:-260px}  [data-design="fun"] .burst i:nth-child(10){--x:40px; --y:250px}
@keyframes boom{0%{transform:translate(0,0) scale(.3) rotate(0); opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(300deg); opacity:0}}
[data-design="fun"] .final-tips span{background:var(--glass); border:3px solid var(--outline); font-weight:800}
[data-design="fun"] .final-tips b{border-radius:10px; background:var(--c-lime); color:var(--outline)}
[data-design="fun"] .paycard{height:180px; gap:30px}
[data-design="fun"] .pc-card{width:210px; height:132px; border-radius:20px; background:var(--c-pink); color:#fff; box-shadow:6px 6px 0 var(--outline); animation:fun-tap 1.2s cubic-bezier(.3,1.4,.5,1) infinite}
[data-design="fun"] .pc-card i{width:44px; height:32px; border-radius:8px; background:var(--c-yellow); border:2px solid var(--outline)}
[data-design="fun"] .pc-card b{bottom:14px; font-size:19px; font-weight:900; letter-spacing:.06em}
[data-design="fun"] .pc-nfc{width:80px; height:80px; color:var(--c-lime); animation:blink 1.2s steps(2) infinite}
@keyframes fun-tap{0%,100%{transform:translateX(-24px) rotate(-10deg)}50%{transform:translateX(16px) rotate(2deg)}}
@keyframes blink{50%{opacity:.3}}
[data-design="fun"] .loader{display:flex; gap:12px; justify-content:center; height:auto; background:none; overflow:visible}
[data-design="fun"] .loader i, [data-design="fun"] .loader i + i{display:block; width:20px; height:20px; border-radius:6px; background:var(--c-lime); border:2px solid var(--outline); animation:hop .9s ease-in-out infinite}
[data-design="fun"] .loader i:nth-child(2){background:var(--c-pink); animation-delay:.15s}
[data-design="fun"] .loader i:nth-child(3){background:var(--c-cyan); animation-delay:.3s}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}}
[data-design="fun"] .progress{height:24px; border-radius:12px; border:3px solid var(--outline); background:var(--glass)}
[data-design="fun"] .progress i{border-radius:0; transition:width .5s cubic-bezier(.3,1.3,.5,1); background:repeating-linear-gradient(-45deg, var(--c-lime) 0 14px, color-mix(in srgb, var(--c-lime) 70%, #fff) 14px 28px)}
[data-design="fun"] .bslot{width:20px; height:98px; border-radius:10px; background:var(--outline); box-shadow:none}
[data-design="fun"] .bandreel{height:96px}
[data-design="fun"] .band{background:#fff; border:3px solid var(--outline); border-radius:14px; box-shadow:none; gap:16px; animation:bandout 1.1s cubic-bezier(.3,1.3,.5,1) both}
[data-design="fun"] .band .qr{width:52px; height:52px}
[data-design="fun"] .band .bl{width:62px; height:10px; border-radius:6px; background:var(--c-pink)}
[data-design="fun"] .band .bl:last-child{background:var(--c-cyan)}
[data-design="fun"] .printer{background:var(--outline); box-shadow:none; margin-top:8px}
[data-design="fun"] .receipt{background:#fff; color:#555; animation-duration:1s}
[data-design="fun"] .receipt b{color:#150F3A}
[data-design="fun"] .toast{background:var(--c-yellow); color:var(--outline); border:3px solid var(--outline); border-radius:22px; box-shadow:6px 6px 0 var(--outline); font-size:20px; font-weight:900; transform:translate(-50%,-50%) scale(.92) rotate(-2deg)}
[data-design="fun"] .vkb{height:460px; background:var(--surface); border-top:3px solid var(--outline); border-radius:30px 30px 0 0; box-shadow:0 -10px 0 color-mix(in srgb, var(--outline) 50%, transparent)}
[data-design="fun"] .vkb-hint{font-weight:900}
[data-design="fun"] .vkb-done{color:var(--c-cyan); font-weight:900}
[data-design="fun"] .vkb-chips button{border:3px solid var(--outline); background:var(--c-yellow); color:var(--outline); font-weight:900}
[data-design="fun"] .vkb-row button{border:3px solid var(--outline); border-radius:14px; background:var(--glass); font-size:24px; font-weight:900; box-shadow:0 4px 0 var(--outline); margin-bottom:4px}
[data-design="fun"] .vkb-pad .vkb-row button{font-size:34px; border-radius:20px}
[data-design="fun"] .vkb-row .k-fn{background:var(--surface)}
[data-design="fun"] .vkb-row .k-fn.on{background:var(--c-cyan); color:var(--outline)}
[data-design="fun"] .vkb-row button.hit{background:var(--c-pink); color:#fff; transform:translateY(3px); box-shadow:0 1px 0 var(--outline)}

/* конфетти на фоне */
[data-design="fun"] .ambient i{display:block; width:34px; height:34px; border:5px solid var(--c-pink); border-radius:50%; opacity:.5; animation:float 9s ease-in-out infinite}
[data-design="fun"] .ambient i:nth-child(1){left:6%; top:18%}
[data-design="fun"] .ambient i:nth-child(2){left:86%; top:9%; border-color:var(--c-lime); border-radius:6px; transform:rotate(20deg); animation-delay:-2s}
[data-design="fun"] .ambient i:nth-child(3){left:90%; top:52%; border-color:var(--c-cyan); animation-delay:-4s; width:22px; height:22px}
[data-design="fun"] .ambient i:nth-child(4){left:4%; top:70%; border-color:var(--c-yellow); border-radius:6px; animation-delay:-6s}
[data-design="fun"] .ambient i:nth-child(5){left:48%; top:4%; border-color:var(--c-violet); width:20px; height:20px; animation-delay:-1s}
[data-design="fun"] .ambient i:nth-child(6){left:70%; top:88%; border-color:var(--c-pink); border-radius:6px; animation-delay:-5s}
@keyframes float{0%,100%{translate:0 0; rotate:0deg}50%{translate:0 -26px; rotate:45deg}}
[data-design="fun"] .hints{font-weight:700}
[data-design="fun"] .hints h3{font-size:16px; letter-spacing:0}
[data-design="fun"] .hints .hint-card{border-width:2px; box-shadow:0 4px 0 #0B0826}
[data-design="fun"] .hints .hint-lead{background:#231B5C}
[data-design="fun"] .hints b{font-weight:900}
[data-design="fun"] .theme-btns button{border-width:2px; background:#2E2570; border-radius:10px; font-weight:900; font-size:12.5px}
[data-design="fun"] .theme-btns button.on{background:var(--hint-on)}
[data-design="fun"] .burger{background:#C6FF3D; color:#0B0826; border:2px solid #0B0826}

/* =========================================================================
   АКЦЕНТНЫЕ ВАРИАНТЫ И ПОПАП С IFRAME
   Идут после дизайнов, чтобы перекрывать их правила. Акцент = цвет главной
   кнопки (--cta) и анимация в духе дизайна: в «Термах» — пробегающий блик,
   в СПА — медленный мягкий блик и «дыхание», в «Развлечениях» — подскок и неон.
   ========================================================================= */
/* переключатели: активный пункт окрашен как главная кнопка */
.seg.seg-cta button.on, .g-tabs.g-tabs-cta button.on{background:var(--cta); color:var(--cta-ink)}
/* текст с акцентом: градиент главной кнопки (--cta-text — если на фоне оформления нужен темнее) */
.text-cta{
  width:fit-content; max-width:100%; font-weight:var(--fw-btn);
  background:var(--cta-text, var(--cta)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
[data-design="thermal"] :is(.seg-cta, .g-tabs-cta) button.on{position:relative; overflow:hidden; box-shadow:0 12px 30px -14px color-mix(in srgb, var(--cta-2) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.45)}
[data-design="thermal"] :is(.seg-cta, .g-tabs-cta) button.on::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); animation:shine 4.5s ease-in-out infinite}
[data-design="thermal"] .text-cta{
  background-image:linear-gradient(100deg, transparent 42%, rgba(255,255,255,.9) 50%, transparent 58%), var(--cta-text, var(--cta));
  background-size:250% 100%, 100% 100%; background-repeat:no-repeat; animation:text-shine 4.5s ease-in-out infinite;
}
@keyframes text-shine{0%,60%{background-position:100% 0, 0 0}100%{background-position:0 0, 0 0}}

/* СПА: спокойно — пункт мягко «дышит» тенью, по нему медленно проходит неяркий блик; текст перетекает от терракоты к акценту */
[data-design="spa"] :is(.seg-cta, .g-tabs-cta) button.on{position:relative; overflow:hidden; animation:spa-breathe 4s ease-in-out infinite alternate}
[data-design="spa"] :is(.seg-cta, .g-tabs-cta) button.on::after{content:""; position:absolute; top:0; bottom:0; width:70%; left:-80%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); animation:spa-glint 7s ease-in-out infinite}
[data-design="spa"] .text-cta{
  background-image:linear-gradient(90deg, var(--cta-1), var(--cta-2) 25%, var(--accent) 50%, var(--cta-2) 75%, var(--cta-1));
  background-size:300% 100%; animation:spa-flow 9s ease-in-out infinite alternate;
}
@keyframes spa-breathe{
  from{box-shadow:0 4px 12px -6px color-mix(in srgb, var(--cta-2) 55%, transparent)}
  to{box-shadow:0 10px 26px -8px color-mix(in srgb, var(--cta-2) 80%, transparent)}
}
@keyframes spa-glint{0%,15%{left:-80%}100%{left:130%}}
@keyframes spa-flow{from{background-position:0 0}to{background-position:100% 0}}

/* «Развлечения»: игровой автомат — объёмный пункт время от времени подпрыгивает, текст горит неоном и изредка мигает */
[data-design="fun"] :is(.seg-cta, .g-tabs-cta) button.on{box-shadow:0 4px 0 var(--outline); animation:fun-hop 3.2s ease-in-out infinite}
[data-design="fun"] .text-cta{animation:fun-neon 3.6s ease-in-out infinite}
@keyframes fun-hop{
  0%, 70%, 100%{transform:none; box-shadow:0 4px 0 var(--outline)}
  76%{transform:translateY(-6px); box-shadow:0 10px 0 var(--outline)}
  82%{transform:translateY(1px) scale(1.04, .94); box-shadow:0 3px 0 var(--outline)}
  88%{transform:translateY(-3px); box-shadow:0 7px 0 var(--outline)}
  94%{transform:none; box-shadow:0 4px 0 var(--outline)}
}
@keyframes fun-neon{
  0%, 100%{filter:drop-shadow(0 0 2px color-mix(in srgb, var(--cta) 55%, transparent)); opacity:1}
  50%{filter:drop-shadow(0 0 10px color-mix(in srgb, var(--cta) 85%, transparent))}
  70%{opacity:1} 72%{opacity:.5} 74%{opacity:1} 76%{opacity:.7} 78%{opacity:1}
}

/* попап с iframe: по центру, занимает почти весь экран */
.modal.modal-frame{max-width:none; height:100%; padding:0; display:flex; flex-direction:column; text-align:left; overflow:hidden}
.mf-head{display:flex; align-items:center; gap:16px; padding:16px 16px 16px 30px; border-bottom:var(--bw) solid var(--line)}
.mf-title{flex:1; min-width:0; font-family:var(--font-display); font-weight:var(--fw-display); text-transform:var(--tt-display); font-size:24px; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mf-head .ibtn{flex:none}
.mf-frame{flex:1; display:block; width:100%; border:0; background:#fff}

/* кнопка под оплатой: «Отсканировать карту лояльности и получить скидку» — открывает modal-frame */
.btn-loyalty{margin:-6px 0 30px; padding:12px 28px; font-size:19px; line-height:1.25}
.btn-loyalty span{text-align:left}
[data-design="fun"] .btn-loyalty{font-size:17px; margin-bottom:34px}

@media (prefers-reduced-motion:reduce){
  .ambient i, .home-media, .btn-cta::after, .scan-fx, .scan-fx i, .scan-arrow, .burst i, .pc-card, .loader i, .stat-pulse,
  .seg-cta button, .g-tabs-cta button, .seg-cta button::after, .g-tabs-cta button::after, .text-cta{animation:none !important}
}