/* ==========================================================================
   Гончарова · PMU — личный кабинет клиента
   Premium warm-nude beauty aesthetic. Rosewood + champagne-gold on blush.
   Full light / dark: @media (prefers-color-scheme) + :root[data-theme].
   Design system: tokens (color / space / radius / shadow / type / motion),
   layered soft shadows, editorial serif headings, tasteful micro-motion.
   All styling class-based (strict CSP: no inline styles / scripts).
   ========================================================================== */

:root{
  color-scheme: light dark;

  /* ---- palette (anchored to deployed theme-color) ---- */
  --page:#ECDCD4; --ground:#F4EAE4; --surface:#FFFDFB; --surface-2:#FBF3EE;
  --ink:#382823; --ink-2:#6F574F; --ink-3:#9C877E; --line:#E7D6CC;
  --rose:#A0566A; --rose-deep:#7E3F53; --rose-soft:#F1D9DE; --rose-line:#E4C1CA;
  --gold:#B4894E; --gold-deep:#8A6533; --gold-soft:#F4E7CA; --gold-line:#E6D1A2;
  --sage:#5E8A5C; --sage-soft:#DFEBD8; --sage-line:#C4D8BB;
  --btn1:#A0566A; --btn2:#803C53; --btn-ink:#FFF6F2;
  --stub-r1:#EEC9D2; --stub-r2:#DEA9B7; --stub-rink:#7C3B4F;
  --stub-g1:#F1E0B4; --stub-g2:#E4CB92; --stub-gink:#6E4E22;
  --shadow:56 34 28; --hook-ink:#FFF5EF;
  --vk:#3E6F9E; --tg:#2A92C7;
  --urge:#BE4A3A; --urge-soft:#F6DAD2; --urge-line:#EBC0B4;

  /* ---- type ---- */
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:Verdana,Geneva,"DejaVu Sans",Tahoma,sans-serif;
  --mono:ui-monospace,"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Consolas,monospace;
  --fs-hero:clamp(28px,8.4vw,35px);
  --fs-display:24px; --fs-h:22px; --fs-title:17px; --fs-lg:16.5px;
  --fs-body:15px; --fs-sm:13.5px; --fs-xs:11.5px; --fs-eyebrow:11px;

  /* ---- space ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px;

  /* ---- radius ---- */
  --r-xs:10px; --r-sm:13px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px;

  /* ---- layered soft shadows (warm) ---- */
  --sh-1:0 1px 2px rgba(var(--shadow)/.05), 0 3px 10px -5px rgba(var(--shadow)/.12);
  --sh-2:0 2px 6px -2px rgba(var(--shadow)/.10), 0 14px 30px -16px rgba(var(--shadow)/.22);
  --sh-3:0 5px 14px -6px rgba(var(--shadow)/.16), 0 30px 56px -24px rgba(var(--shadow)/.34);
  --sh-rose:0 14px 26px -16px color-mix(in srgb,var(--rose) 80%, transparent);
  --sh-gold:0 16px 34px -20px color-mix(in srgb,var(--gold) 74%, transparent);

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.7,.28,1);
  --pop:cubic-bezier(.2,.9,.3,1.5);
  --d1:.14s; --d2:.2s; --d3:.3s; --d4:.44s;
}
@media (prefers-color-scheme: dark){
  :root{
    --page:#161010; --ground:#1E1613; --surface:#281E1A; --surface-2:#31251F;
    --ink:#F3E8E1; --ink-2:#C7B2A8; --ink-3:#9A857C; --line:#3E2E28;
    --rose:#D48EA0; --rose-deep:#E4A9B6; --rose-soft:#3A252C; --rose-line:#5B3A44;
    --gold:#DAB972; --gold-deep:#E9CF96; --gold-soft:#382C17; --gold-line:#574424;
    --sage:#8FB489; --sage-soft:#26331F; --sage-line:#3B4B32;
    --btn1:#B36279; --btn2:#8F4A63; --btn-ink:#FCEEF0;
    --stub-r1:#5A3A44; --stub-r2:#6E4653; --stub-rink:#F0CDD5;
    --stub-g1:#4A3A1E; --stub-g2:#574424; --stub-gink:#EBD29A;
    --shadow:0 0 0; --hook-ink:#2A1418; --vk:#78A6D8; --tg:#5BC0EA;
    --urge:#E79A8C; --urge-soft:#3B241E; --urge-line:#5C3A30;
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --page:#ECDCD4; --ground:#F4EAE4; --surface:#FFFDFB; --surface-2:#FBF3EE;
  --ink:#382823; --ink-2:#6F574F; --ink-3:#9C877E; --line:#E7D6CC;
  --rose:#A0566A; --rose-deep:#7E3F53; --rose-soft:#F1D9DE; --rose-line:#E4C1CA;
  --gold:#B4894E; --gold-deep:#8A6533; --gold-soft:#F4E7CA; --gold-line:#E6D1A2;
  --sage:#5E8A5C; --sage-soft:#DFEBD8; --sage-line:#C4D8BB;
  --btn1:#A0566A; --btn2:#803C53; --btn-ink:#FFF6F2;
  --stub-r1:#EEC9D2; --stub-r2:#DEA9B7; --stub-rink:#7C3B4F;
  --stub-g1:#F1E0B4; --stub-g2:#E4CB92; --stub-gink:#6E4E22;
  --shadow:56 34 28; --hook-ink:#FFF5EF; --vk:#3E6F9E; --tg:#2A92C7;
  --urge:#BE4A3A; --urge-soft:#F6DAD2; --urge-line:#EBC0B4;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#161010; --ground:#1E1613; --surface:#281E1A; --surface-2:#31251F;
  --ink:#F3E8E1; --ink-2:#C7B2A8; --ink-3:#9A857C; --line:#3E2E28;
  --rose:#D48EA0; --rose-deep:#E4A9B6; --rose-soft:#3A252C; --rose-line:#5B3A44;
  --gold:#DAB972; --gold-deep:#E9CF96; --gold-soft:#382C17; --gold-line:#574424;
  --sage:#8FB489; --sage-soft:#26331F; --sage-line:#3B4B32;
  --btn1:#B36279; --btn2:#8F4A63; --btn-ink:#FCEEF0;
  --stub-r1:#5A3A44; --stub-r2:#6E4653; --stub-rink:#F0CDD5;
  --stub-g1:#4A3A1E; --stub-g2:#574424; --stub-gink:#EBD29A;
  --shadow:0 0 0; --hook-ink:#2A1418; --vk:#78A6D8; --tg:#5BC0EA;
  --urge:#E79A8C; --urge-soft:#3B241E; --urge-line:#5C3A30;
}

/* ==========================================================================
   base
   ========================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  background:
    radial-gradient(1200px 620px at 12% -8%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%),
    radial-gradient(1000px 640px at 100% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 58%),
    var(--page);
  background-attachment:fixed;
}
::selection{background:color-mix(in srgb, var(--gold) 30%, transparent)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-0.14em}
.tnum{font-variant-numeric:tabular-nums}
.mono-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ==========================================================================
   app frame + appbar
   ========================================================================== */
.app{
  max-width:480px;margin:0 auto;min-height:100dvh;
  display:flex;flex-direction:column;
  /* base font declared HERE (not just on body) so a .app[data-font] override actually
     cascades to the whole cabinet, not only elements that re-read var(--sans). */
  font-family:var(--sans);
}
.appbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:calc(11px + env(safe-area-inset-top)) clamp(14px,4vw,18px) 11px;
  background:color-mix(in srgb, var(--page) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);
  backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 66%, transparent);
}
/* экран входа: прячем монограмму-шапку (лого уже в hero), оставляем только тумблер темы */
.app.auth-mode .appbar{background:none;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.app.auth-mode .brand{display:none}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.mono{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:21px;color:var(--btn-ink);
  background:linear-gradient(150deg,var(--btn1),var(--btn2));
  box-shadow:var(--sh-rose), inset 0 1px 0 rgba(255,255,255,.22);
}
.brand-t{min-width:0}
.brand-t b{font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.3px;display:block;line-height:1.18}
.brand-t span{font-size:10.5px;color:var(--ink-2);letter-spacing:.3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
/* монограмма GV (sprite #i-gv) внутри .mono-круга — тёмный глиф на металл-градиенте уровня */
.gvi{width:58%;height:58%;display:block;fill:currentColor;stroke:none}
.mono-gv{overflow:hidden}
/* кнопка быстрого перехода в сообщество ВКонтакте (GV-монограмма слева, шеврon справа — БЕЗ VK-лого) */
.community-card{display:flex;align-items:center;gap:13px;width:100%;text-decoration:none;box-sizing:border-box;
  padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-1);transition:transform var(--d1),box-shadow var(--d1),border-color var(--d1)}
.community-card:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--rose-line)}
.community-card:active{transform:scale(.99)}
.cc-mono{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--btn-ink);
  background:linear-gradient(150deg,var(--btn1),var(--btn2));box-shadow:var(--sh-rose),inset 0 1px 0 rgba(255,255,255,.22)}
.cc-mono .gvi{width:60%;height:60%}
.cc-tx{min-width:0;flex:1}
.cc-tx b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.25}
.cc-tx small{display:block;font-size:11.5px;color:var(--ink-2);margin-top:1px}
.cc-go{flex:none;width:9px;height:9px;border-top:2px solid var(--rose-line);border-right:2px solid var(--rose-line);transform:rotate(45deg);opacity:.75;margin-right:3px}
.toggle{
  display:inline-grid;place-items:center;flex:none;cursor:pointer;
  width:44px;height:44px;border-radius:50%;font:inherit;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-1);transition:color var(--d1),border-color var(--d1),transform var(--d1);
}
.toggle:hover{color:var(--ink);border-color:var(--rose-line)}
.toggle:active{transform:scale(.94)}
.toggle .ico{font-size:18px}
.toggle .moon{display:none}
:root[data-theme="dark"] .toggle .moon{display:inline-block}
:root[data-theme="dark"] .toggle .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .toggle .moon{display:inline-block}
  :root:not([data-theme="light"]) .toggle .sun{display:none}
}

/* ==========================================================================
   view / screen transitions
   ========================================================================== */
.view{
  flex:1;display:flex;flex-direction:column;
  padding:clamp(14px,4vw,20px);
  padding-bottom:calc(30px + env(safe-area-inset-bottom));
}
.view>*{animation:screen-in var(--d3) var(--ease) both}
.w-stack{display:flex;flex-direction:column;gap:14px}
@keyframes screen-in{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.view>.w-stack>*,.view>.newc>*{animation:rise var(--d3) var(--ease) both}
.view>.w-stack>*:nth-child(2),.view>.newc>*:nth-child(2){animation-delay:.045s}
.view>.w-stack>*:nth-child(3),.view>.newc>*:nth-child(3){animation-delay:.09s}
.view>.w-stack>*:nth-child(4),.view>.newc>*:nth-child(4){animation-delay:.135s}
.view>.w-stack>*:nth-child(5),.view>.newc>*:nth-child(5){animation-delay:.18s}
.view>.w-stack>*:nth-child(6),.view>.newc>*:nth-child(6){animation-delay:.225s}
.view>.w-stack>*:nth-child(n+7){animation-delay:.27s}
.center-pad{flex:1;display:grid;place-items:center;padding:52px 0;gap:14px}

/* ==========================================================================
   generic bits
   ========================================================================== */
.lab{font-size:var(--fs-eyebrow);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.muted{color:var(--ink-2)}
.hint{font-size:var(--fs-xs);font-weight:600}
.section{display:flex;flex-direction:column;gap:10px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px;box-shadow:var(--sh-1)}
.block-pad{padding:16px}
.hi{font-family:var(--serif);font-style:italic;font-size:var(--fs-h);line-height:1.14;color:var(--ink);margin:0;text-wrap:balance}
.hi small{display:block;font-family:var(--sans);font-style:normal;font-size:12px;color:var(--ink-3);letter-spacing:.2px;margin-top:3px}
.h-row{display:flex;align-items:center;gap:12px}
.avatar{
  width:47px;height:47px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:21px;color:var(--btn-ink);
  background:linear-gradient(150deg,var(--btn1),var(--btn2));
  box-shadow:var(--sh-rose), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ==========================================================================
   buttons
   ========================================================================== */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:53px;border:0;cursor:pointer;text-decoration:none;
  font:inherit;font-size:15.5px;font-weight:650;color:var(--btn-ink);
  padding:14px 18px;border-radius:var(--r-md);letter-spacing:.2px;
  background:linear-gradient(160deg,var(--btn1),var(--btn2));
  box-shadow:var(--sh-rose), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform var(--d1) var(--ease), box-shadow var(--d2), filter var(--d2);
}
.btn:hover{filter:brightness(1.04);box-shadow:0 18px 32px -16px color-mix(in srgb,var(--rose) 88%, transparent), inset 0 1px 0 rgba(255,255,255,.16)}
.btn:active{transform:translateY(1px) scale(.992)}
.btn .ico{font-size:18px}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-1);font-weight:600}
.btn.ghost:hover{border-color:var(--rose-line);filter:none;box-shadow:var(--sh-2)}
.btn.gold{background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:#2A1D08;box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.22)}
:root[data-theme="dark"] .btn.gold{color:#22160a}
.btn.sm{min-height:46px;padding:11px 15px;font-size:14px;border-radius:var(--r-sm)}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none;box-shadow:none}
.btn.is-busy{color:transparent !important;position:relative;pointer-events:none}
.btn.is-busy::after{
  content:"";position:absolute;width:20px;height:20px;border-radius:50%;
  border:2.5px solid color-mix(in srgb,var(--btn-ink) 42%, transparent);
  border-top-color:var(--btn-ink);animation:spin .7s linear infinite;
}
.btn-stack{display:flex;flex-direction:column;gap:10px}

.icon-btn{
  width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;font:inherit;
  box-shadow:var(--sh-1);transition:color var(--d1),border-color var(--d1),transform var(--d1);
}
.icon-btn:hover{color:var(--ink);border-color:var(--rose-line)}
.icon-btn:active{transform:scale(.94)}
.icon-btn .ico{font-size:19px}
.flip{transform:scaleX(-1)}

.screen-head{display:flex;align-items:center;gap:12px;min-height:44px}
.screen-head h1{margin:0;font-size:var(--fs-title);font-weight:650;letter-spacing:.1px}

/* ==========================================================================
   login / phone field (first screen — a warm welcome)
   ========================================================================== */
.auth{display:flex;flex-direction:column;gap:18px}
.auth-hero{display:flex;flex-direction:column;gap:12px}
.auth-mark{
  width:60px;height:60px;border-radius:20px;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:30px;color:var(--btn-ink);
  background:linear-gradient(150deg,var(--btn1),var(--btn2));
  box-shadow:var(--sh-rose), inset 0 1px 0 rgba(255,255,255,.22);
}
/* self-hosted master logo lockup (theme-swapped); wordmark already in the art */
.auth-logo{display:flex;justify-content:center;margin:2px 0 6px}
.auth-logo img{width:min(190px,58%);height:auto;max-width:100%;display:block}
.logo-d{display:none}
.logo-l{display:block}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-l{display:none}
  :root:not([data-theme="light"]) .logo-d{display:block}
}
:root[data-theme="light"] .logo-l{display:block}
:root[data-theme="light"] .logo-d{display:none}

/* premium payment-method picker (СБП / СберPay / Т-Банк) — checkout-grade rows */
.pay-methods{display:flex;flex-direction:column;gap:10px}
.pm{
  display:flex;align-items:center;gap:13px;cursor:pointer;position:relative;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;min-height:62px;box-shadow:var(--sh-1);
  transition:border-color var(--d2),background var(--d2),box-shadow var(--d2),transform var(--d1);
}
.pm:hover{border-color:var(--rose-line);box-shadow:var(--sh-2)}
.pm:active{transform:scale(.994)}
.pm-badge{width:66px;height:44px;flex:none;overflow:hidden;display:grid;place-items:center;border-radius:10px;background:#fff;padding:5px 8px}
/* real self-hosted brand logos (SVG) sit on a clean white chip — CSP-safe (same-origin /static) */
.pm-logo{max-width:100%;max-height:26px;width:auto;height:auto;object-fit:contain;display:block;margin:auto}
/* subtle per-brand lift under each mark */
.pm[data-mark="sbp"] .pm-badge{box-shadow:0 5px 12px -6px rgba(30,127,255,.45)}
.pm[data-mark="sber"] .pm-badge{box-shadow:0 5px 12px -6px rgba(33,160,56,.55)}
.pm[data-mark="tinkoff"] .pm-badge{box-shadow:0 5px 12px -6px rgba(240,205,0,.6)}
.pm-t{flex:1;min-width:0}
.pm-l{display:block;font-size:14.5px;font-weight:700;line-height:1.2;color:var(--ink);letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-sub{display:block;font-size:11px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-radio{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--ink-3);display:grid;place-items:center;transition:border-color var(--d2)}
.pm-radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--rose);transform:scale(0);transition:transform var(--d2) var(--pop)}
.pm[aria-checked="true"]{border-color:var(--rose);background:var(--rose-soft);box-shadow:0 0 0 1px var(--rose) inset, var(--sh-2)}
.pm[aria-checked="true"] .pm-l{color:var(--rose-deep)}
.pm[aria-checked="true"] .pm-radio{border-color:var(--rose)}
.pm[aria-checked="true"] .pm-radio::after{transform:scale(1)}
.pm:focus-visible{outline-offset:-2px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-eyebrow);letter-spacing:2px;
  text-transform:uppercase;color:var(--rose-deep);font-weight:700;   /* мелкий верхний-регистр текст → темнее для контраста на светлых металлах */
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.hero-kick{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-hero);
  line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.4px;color:var(--ink);
}
.hero-kick .it{color:var(--rose)}
.lede{margin:0;color:var(--ink-2);font-size:14.5px;max-width:34ch;line-height:1.55}
.field{
  display:flex;align-items:center;gap:11px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:0 16px;min-height:58px;box-shadow:var(--sh-1);
  transition:border-color var(--d2), box-shadow var(--d2), background var(--d2);
}
.field:focus-within{border-color:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 16%, transparent), var(--sh-1);background:var(--surface)}
.field .ico{color:var(--ink-3);font-size:20px;transition:color var(--d2)}
.field:focus-within .ico{color:var(--rose)}
.field input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:17px;font-weight:600;color:var(--ink);padding:14px 0;letter-spacing:.4px;
  font-variant-numeric:tabular-nums;
}
.field input::placeholder{color:var(--ink-3);font-weight:500;letter-spacing:.2px}
.field.err{border-color:var(--urge);box-shadow:0 0 0 4px color-mix(in srgb,var(--urge) 14%, transparent);animation:shake .32s var(--ease)}
.field.err .ico{color:var(--urge)}
@keyframes shake{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(2px)}50%{transform:translateX(-3px)}}
.form-note{font-size:var(--fs-xs);color:var(--ink-3);display:flex;align-items:center;gap:7px;line-height:1.45}
.form-note .ico{font-size:14px;color:var(--rose);flex:none}
.field-err{font-size:12.5px;color:var(--urge);font-weight:600;min-height:1px;padding-left:2px}
.err-line{font-size:12.5px;color:var(--urge);font-weight:600;min-height:1px;padding-left:2px}
.perks{display:flex;flex-wrap:wrap;gap:8px}
.perk{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);padding:8px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-1);
}
.perk .ico{font-size:15px;color:var(--rose)}
.perk.g .ico{color:var(--gold-deep)}
:root[data-theme="dark"] .perk.g .ico{color:var(--gold)}

/* ==========================================================================
   CASHBACK WALLET — premium loyalty "metal card" redesign  (drop-in)
   --------------------------------------------------------------------------
   Replaces the wallet-related rules of cabinet.css:
     • the ".wallet — the hero" block            (orig ~L343–386)
     • the "STATUS TIERS" block                  (orig ~L388–447)
     • ".wallet .w-cap-hint"                      (orig  L655)
     • frozen + cb-chip rules                     (orig  L932–944)
     • the reduced-motion additions for the bar   (orig  L1340–1344, extended)

   Design: a jewelry-grade metal loyalty card. One material definition on
   .wallet, driven entirely by tokens — the tier map (data-tier on .app) just
   repoints --accent / --wal-bg / --wal-fg / --wal-bd, and a small set of
   THEME tokens (--wal-key/-sheen/-vig/-hair/-emboss, --ok-*) carry the
   light↔dark difference. No inline styles; the progress width still comes
   from JS via .w-prog-fill[dataset.w] → f.style.width (unchanged mechanism).
   ========================================================================== */

/* ---- theme tokens: the ONLY light↔dark difference for the card material ---- */
:root,
:root[data-theme="light"]{
  --wal-key:.58;                       /* top-left key-light bloom          */
  --wal-sheen:.24;                     /* soft diagonal sheen wash          */
  --wal-vig:.10;                       /* bottom inner vignette (depth)     */
  --wal-hair:rgba(255,255,255,.55);    /* top bezel hairline highlight      */
  --wal-emboss:0 1px 0 rgba(255,255,255,.5);   /* engraved balance          */
  --ok-bg:rgba(43,150,95,.16); --ok-fg:#1C8451; --ok-line:rgba(43,150,95,.42);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wal-key:.10; --wal-sheen:.08; --wal-vig:.30;
    --wal-hair:rgba(255,255,255,.09);
    --wal-emboss:0 1px 1px rgba(0,0,0,.42);
    --ok-bg:rgba(128,216,168,.15); --ok-fg:#87D9AA; --ok-line:rgba(128,216,168,.38);
  }
}
:root[data-theme="dark"]{
  --wal-key:.10; --wal-sheen:.08; --wal-vig:.30;
  --wal-hair:rgba(255,255,255,.09);
  --wal-emboss:0 1px 1px rgba(0,0,0,.42);
  --ok-bg:rgba(128,216,168,.15); --ok-fg:#87D9AA; --ok-line:rgba(128,216,168,.38);
}

/* ==========================================================================
   THE HERO CARD — layered metal material
   ========================================================================== */
.wallet{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);padding:22px 22px 18px;
  /* tier tokens with a gold fallback (card still works with no data-tier) */
  color:var(--wal-fg,#2A1D08);
  border:1px solid color-mix(in srgb, var(--wal-bd, var(--gold-line)) 82%, transparent);
  background:
    /* 1 · soft directional sheen wash — a broad light across the foil */
    linear-gradient(120deg, transparent 6%, rgba(255,255,255,var(--wal-sheen)) 46%, transparent 86%),
    /* 2 · top-left key-light bloom */
    radial-gradient(130% 95% at 12% -16%, rgba(255,255,255,var(--wal-key)), transparent 58%),
    /* 3 · the precious-metal foil */
    var(--wal-bg, linear-gradient(150deg,var(--gold-soft),color-mix(in srgb,var(--gold) 34%, var(--surface))));
  box-shadow:
    0 26px 50px -24px color-mix(in srgb, var(--accent, var(--gold)) 58%, transparent), /* accent lift */
    0 8px 20px -12px rgba(var(--shadow)/.55),                                          /* soft contact */
    inset 0 1px 0 var(--wal-hair),                                                     /* top bezel edge */
    inset 0 0 0 1px color-mix(in srgb, currentColor 7%, transparent),                  /* fine inner hairline */
    inset 0 -34px 52px -38px rgba(0,0,0,calc(var(--wal-vig) + .06));                   /* bottom depth */
}

/* corner gloss + one-shot reveal sheen (decorative, aria-hidden in JS) */
.wallet .coin{
  position:absolute;right:-26px;top:-30px;width:150px;height:120px;border-radius:50%;
  background:radial-gradient(60% 60% at 38% 34%, rgba(255,255,255,.5), transparent 66%);
  opacity:.7;pointer-events:none;z-index:0;
}
.wallet .w-shine{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.4) 47%,transparent 60%);
  transform:translateX(-120%);animation:shine 1.5s .35s var(--ease) both;
}
@keyframes shine{to{transform:translateX(120%)}}

/* keep real content above the material layers */
.wallet>*{position:relative;z-index:2}

/* ---- visits chip (top-right, glassy) ---- */
.wallet .visits{
  position:absolute;right:16px;top:16px;z-index:3;
  font-size:var(--fs-xs);font-weight:700;display:flex;align-items:baseline;gap:4px;
  background:linear-gradient(180deg, color-mix(in srgb,currentColor 15%, transparent), color-mix(in srgb,currentColor 8%, transparent));
  border:1px solid color-mix(in srgb, currentColor 24%, transparent);
  box-shadow:inset 0 1px 0 var(--wal-hair);
  border-radius:var(--r-pill);padding:6px 12px;font-variant-numeric:tabular-nums;
}
.wallet .visits b{font-size:14px;font-weight:800}

/* ---- tier rank "seal" ---- */
.tier-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:750;letter-spacing:.7px;text-transform:uppercase;margin-bottom:8px;
  background:linear-gradient(180deg, color-mix(in srgb,currentColor 17%, transparent), color-mix(in srgb,currentColor 9%, transparent));
  border:1px solid color-mix(in srgb, currentColor 24%, transparent);
  box-shadow:inset 0 1px 0 var(--wal-hair),
             inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--gold)) 18%, transparent),
             0 2px 5px -3px rgba(0,0,0,.28);
  border-radius:var(--r-pill);padding:5px 12px 5px 9px;
}
.tier-badge .ico{font-size:15px;color:color-mix(in srgb, currentColor 78%, var(--accent, var(--gold)))}
.tier-badge b{font-weight:800;letter-spacing:.4px}
.tier-badge .tb-rate{font-variant-numeric:tabular-nums;opacity:.72;font-weight:700}

/* ---- eyebrow label + "активен" verified chip ---- */
.wallet .w-lab{
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  color:inherit;opacity:.66;display:flex;align-items:center;gap:7px;
}
.wallet .w-lab .ico{font-size:14px;opacity:.9}
.cb-chip{
  display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:10px;font-weight:800;letter-spacing:.3px;vertical-align:middle;line-height:1.6;
}
.cb-chip.on{
  background:var(--ok-bg);color:var(--ok-fg);border:1px solid var(--ok-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 5px -2px color-mix(in srgb, var(--ok-fg) 55%, transparent);
}

/* ---- the balance: THE hero ---- */
.wallet .big{
  font-size:47px;font-weight:800;letter-spacing:-1.6px;line-height:1;margin:9px 0 4px;
  font-variant-numeric:tabular-nums;text-shadow:var(--wal-emboss);
}

/* ---- subtitle + faint cap hint ---- */
.wallet .sub{font-size:12.5px;opacity:.88;max-width:32ch;line-height:1.45}
.wallet .w-cap-hint{
  margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.25px;color:inherit;opacity:.5;
}

/* ==========================================================================
   PROGRESS TO NEXT TIER — recessed panel + jewelled fill
   ========================================================================== */
.w-prog{
  margin-top:16px;padding:12px 14px;border-radius:var(--r-sm);
  background:color-mix(in srgb, currentColor 8%, transparent);
  border:1px solid color-mix(in srgb, currentColor 16%, transparent);
  box-shadow:inset 0 1px 0 var(--wal-hair), inset 0 2px 7px -4px rgba(0,0,0,.2);
}
.w-prog-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:650;margin-bottom:9px;line-height:1.3}
.w-prog-cap .to{display:flex;align-items:center;gap:6px}
.w-prog-cap .to .ico{font-size:14px;color:color-mix(in srgb, currentColor 74%, var(--accent, var(--gold)))}
.w-prog-cap .left{opacity:.82;font-variant-numeric:tabular-nums;white-space:nowrap}

.w-prog-track{
  position:relative;height:10px;border-radius:var(--r-pill);overflow:hidden;
  background:color-mix(in srgb, currentColor 15%, transparent);
  box-shadow:inset 0 1.5px 3px rgba(0,0,0,.26), inset 0 -1px 0 var(--wal-hair);
}
.w-prog-fill{
  position:relative;height:100%;width:0;border-radius:var(--r-pill);      /* width set by JS (dataset.w → style.width) */
  background:linear-gradient(90deg,
    var(--accent-2, var(--gold-deep)),
    var(--accent, var(--gold)) 68%,
    color-mix(in srgb, var(--accent, var(--gold)) 52%, #fff));
  box-shadow:0 0 12px -3px color-mix(in srgb, var(--accent, var(--gold)) 72%, transparent),
             inset 0 1px 0 rgba(255,255,255,.4);
  transition:width 1s var(--ease);
}
.w-prog-fill::after{                                                        /* travelling sheen on the fill */
  display:none;   /* бегущий блик (проблеск) на прогресс-баре убран по просьбе — оставлена только линия (обе темы) */
}
.w-prog-note{margin-top:9px;font-size:11px;font-weight:600;line-height:1.35;opacity:.8}
.w-prog.max .w-prog-fill{
  background:linear-gradient(90deg,var(--accent-2, var(--gold-deep)),var(--accent, var(--gold)) 45%,color-mix(in srgb,var(--accent, var(--gold)) 55%, #fff) 70%,var(--accent, var(--gold)));
}

/* ==========================================================================
   HISTORY BUTTON — refined metal ghost (was a cheap dashed box)
   ========================================================================== */
.wallet-link{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:12px;min-height:46px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;letter-spacing:.2px;
  color:inherit;
  background:linear-gradient(180deg, color-mix(in srgb,currentColor 13%, transparent), color-mix(in srgb,currentColor 6%, transparent));
  border:1px solid color-mix(in srgb, currentColor 26%, transparent);border-radius:var(--r-sm);padding:11px 14px;
  box-shadow:inset 0 1px 0 var(--wal-hair), 0 3px 8px -6px rgba(0,0,0,.35);
  transition:background var(--d2), transform var(--d1), box-shadow var(--d2);
}
.wallet-link:hover{background:linear-gradient(180deg, color-mix(in srgb,currentColor 19%, transparent), color-mix(in srgb,currentColor 10%, transparent))}
.wallet-link:active{transform:translateY(1px)}
.wallet-link .ico{font-size:16px}

/* ==========================================================================
   STATUS TIERS — the cashback rate IS the loyalty rank. The whole cabinet
   reskins through ONE accent map (data-tier on .app). [tier token map kept
   verbatim from the original — the material above simply consumes it.]
   ========================================================================== */
/* accent map теперь БЕЗУСЛОВНЫЙ (на .app, не .app[data-tier]) → весь UI следует за уровнем
   кешбэка ВЕЗДЕ, включая до-логина. Гость (тира ещё нет) = бронза (входной 3%-уровень). */
.app{
  --accent:#A6784A; --accent-2:#7C5630;                 /* guest default = bronze (light) */
  --btn1:var(--accent); --btn2:var(--accent-2);
  --rose:var(--accent); --rose-deep:var(--accent-2);
  --rose-soft:color-mix(in srgb, var(--accent) 16%, var(--surface));
  --rose-line:color-mix(in srgb, var(--accent) 40%, var(--line));
  --btn-ink:#2A1D08;                                    /* металл-accent требует ТЁМНЫЙ ярлык (роза была кремовой) */
}
.app[data-tier="diamond"]{ --btn-ink:#F3E7EE }          /* light: орхидей-диамант держит светлый ярлык */
:root[data-theme="dark"] .app{ --accent:#C79663; --accent-2:#9C6E3E; --btn-ink:#2A1D08 }   /* bronze dark; в тёмной все accent светлые → тёмный ярлык */
:root[data-theme="dark"] .app[data-tier="diamond"]{ --btn-ink:#2A1D08 }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .app{ --accent:#C79663; --accent-2:#9C6E3E; --btn-ink:#2A1D08 }
  :root:not([data-theme="light"]) .app[data-tier="diamond"]{ --btn-ink:#2A1D08 }
}
.app[data-tier="bronze"]  {--accent:#A6784A;--accent-2:#7C5630;--wal-bg:linear-gradient(150deg,#F1E2D2,#D6B387 60%,#E8CEB0);--wal-fg:#3A2A18;--wal-bd:#DBB88F}
.app[data-tier="silver"]  {--accent:#7C8A99;--accent-2:#586675;--wal-bg:linear-gradient(150deg,#F3F5F8,#C8D1DA 42%,#E2E8ED 60%,#BCC6D0);--wal-fg:#2C333B;--wal-bd:#CBD4DC}
.app[data-tier="gold"]    {--accent:#B58324;--accent-2:#835E14;--wal-bg:linear-gradient(150deg,#F7E9C2,#E6B948 55%,#F2DC98);--wal-fg:#3A2A08;--wal-bd:#E4CE86}
.app[data-tier="platinum"]{--accent:#6F8494;--accent-2:#4C6070;--wal-bg:linear-gradient(150deg,#EFF3F6,#CFD8E0 40%,#EAEFF3 60%,#D6DEE5);--wal-fg:#2B343D;--wal-bd:#D3DBE2}
.app[data-tier="diamond"] {--accent:#A85F97;--accent-2:#743F79;--wal-bg:linear-gradient(120deg,#F8D7E7,#E9D6F3 24%,#D5E8F8 48%,#D7F2E5 72%,#F8E7D7);--wal-fg:#33263A;--wal-bd:#E7CFE0}
:root[data-theme="dark"] .app[data-tier="bronze"]  {--accent:#C79663;--accent-2:#9C6E3E;--wal-bg:linear-gradient(150deg,#2E241C,#3D2F23);--wal-fg:#EACDAD;--wal-bd:#4A3928}
:root[data-theme="dark"] .app[data-tier="silver"]  {--accent:#A9B6C4;--accent-2:#8291A0;--wal-bg:linear-gradient(150deg,#2A313A,#3B4550);--wal-fg:#DCE4EC;--wal-bd:#47515C}
:root[data-theme="dark"] .app[data-tier="gold"]    {--accent:#DDB24C;--accent-2:#B0851F;--wal-bg:linear-gradient(150deg,#3B2E16,#4C3B1E);--wal-fg:#EAD09A;--wal-bd:#57431F}
:root[data-theme="dark"] .app[data-tier="platinum"]{--accent:#A6BCCC;--accent-2:#7E93A3;--wal-bg:linear-gradient(150deg,#2B333C,#3C4650);--wal-fg:#DEE7EF;--wal-bd:#48525D}
:root[data-theme="dark"] .app[data-tier="diamond"] {--accent:#D08CBE;--accent-2:#A65F97;--wal-bg:linear-gradient(120deg,#3B2531,#2F2740 24%,#232F40 48%,#22332C 72%,#3B2F26);--wal-fg:#F1E7F3;--wal-bd:#4E3A48}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .app[data-tier="bronze"]  {--accent:#C79663;--accent-2:#9C6E3E;--wal-bg:linear-gradient(150deg,#2E241C,#3D2F23);--wal-fg:#EACDAD;--wal-bd:#4A3928}
  :root:not([data-theme="light"]) .app[data-tier="silver"]  {--accent:#A9B6C4;--accent-2:#8291A0;--wal-bg:linear-gradient(150deg,#2A313A,#3B4550);--wal-fg:#DCE4EC;--wal-bd:#47515C}
  :root:not([data-theme="light"]) .app[data-tier="gold"]    {--accent:#DDB24C;--accent-2:#B0851F;--wal-bg:linear-gradient(150deg,#3B2E16,#4C3B1E);--wal-fg:#EAD09A;--wal-bd:#57431F}
  :root:not([data-theme="light"]) .app[data-tier="platinum"]{--accent:#A6BCCC;--accent-2:#7E93A3;--wal-bg:linear-gradient(150deg,#2B333C,#3C4650);--wal-fg:#DEE7EF;--wal-bd:#48525D}
  :root:not([data-theme="light"]) .app[data-tier="diamond"] {--accent:#D08CBE;--accent-2:#A65F97;--wal-bg:linear-gradient(120deg,#3B2531,#2F2740 24%,#232F40 48%,#22332C 72%,#3B2F26);--wal-fg:#F1E7F3;--wal-bd:#4E3A48}
}

/* escalating sheen/motion — bronze matte & calm → diamond holographic */
.app[data-tier="bronze"] .wallet .w-shine{display:none}
.app[data-tier="platinum"] .wallet::before,
.app[data-tier="diamond"] .wallet::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;mix-blend-mode:screen}
.app[data-tier="platinum"] .wallet::before{background:linear-gradient(125deg,transparent 30%,rgba(255,255,255,.28) 46%,transparent 62%)}
.app[data-tier="platinum"] .wallet .w-shine{animation:shine 4s ease-in-out 1.2s infinite}
.app[data-tier="diamond"] .wallet::before{
  background:linear-gradient(125deg,rgba(255,120,180,.18),rgba(150,140,240,.15) 28%,rgba(120,200,240,.15) 52%,rgba(140,230,180,.15) 74%,rgba(255,190,140,.18));
  background-size:220% 220%;animation:holo 7s ease-in-out infinite;
}
.app[data-tier="diamond"] .wallet .w-shine{animation:shine 3.4s ease-in-out .6s infinite}
@keyframes holo{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ==========================================================================
   FROZEN — cashback-gate paused state (site: banner + lock; miniapp: neutral)
   ========================================================================== */
.wallet.frozen{outline:2px solid #E23B3B;outline-offset:-2px}
.wallet.frozen .big{opacity:.4;filter:blur(.4px)}
.frz-banner{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
  background:#E23B3B;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:1.3px;
  padding:5px 18px;border-radius:0 0 13px 13px;box-shadow:0 7px 16px -6px rgba(226,59,59,.65);
}
.frost-lock{
  position:absolute;right:18px;top:47%;transform:translateY(-50%);z-index:5;pointer-events:none;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#E23B3B;
  background:rgba(226,59,59,.15);border:1.5px solid rgba(226,59,59,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.frost-lock .ico{font-size:24px}
.w-lab.frz{color:#E23B3B;opacity:1}
.w-lab.frz .ico{color:#E23B3B}

/* ==========================================================================
   reduced motion — no sweeps / travelling sheens / holo
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .w-prog-fill{transition:none}
  .w-prog-fill::after{display:none}
  .wallet .w-shine{display:none}
  .app[data-tier="diamond"] .wallet::before,
  .app[data-tier="platinum"] .wallet::before{animation:none}
}

/* ==========================================================================
   referral — «Пригласи подругу»
   ========================================================================== */
.refer{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:17px;
  background:linear-gradient(155deg,var(--rose-soft),color-mix(in srgb,var(--rose) 12%, var(--surface)));
  border:1px solid var(--rose-line);box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.28);
}
:root[data-theme="dark"] .refer{box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.05)}
.refer .bloom-bg{position:absolute;right:-24px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 40%, color-mix(in srgb,var(--rose) 26%, transparent), transparent 68%);pointer-events:none}
.refer-hd{display:flex;align-items:center;gap:12px;position:relative}
.refer-ic{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:21px;color:#fff;background:linear-gradient(150deg,var(--btn1),var(--btn2));box-shadow:var(--sh-rose)}
.refer-t{min-width:0}
.refer-t b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.refer-t small{display:block;font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.refer-code{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin-top:13px;cursor:pointer;font:inherit;
  background:var(--surface);border:1.5px dashed var(--rose-line);border-radius:var(--r-md);
  padding:13px 16px;color:var(--ink);box-shadow:var(--sh-1);transition:transform var(--d1),border-color var(--d2),box-shadow var(--d2);
}
.refer-code:hover{border-color:var(--rose);box-shadow:var(--sh-2)}
.refer-code:active{transform:scale(.985)}
.refer-code .code-v{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:6px;line-height:1;color:var(--rose-deep);padding-left:6px}
:root[data-theme="dark"] .refer-code .code-v{color:var(--rose-deep)}
.refer-code .code-hint{font-size:var(--fs-eyebrow);letter-spacing:1px;text-transform:uppercase;font-weight:700;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.refer-code .code-hint .ico{font-size:14px}
.refer-actions{display:flex;gap:9px;margin-top:11px}
.refer-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:650;border-radius:var(--r-sm);padding:11px;
  color:var(--btn-ink);background:linear-gradient(160deg,var(--btn1),var(--btn2));border:0;box-shadow:var(--sh-rose);
  transition:transform var(--d1),filter var(--d2);
}
.refer-btn:hover{filter:brightness(1.04)}
.refer-btn:active{transform:translateY(1px) scale(.99)}
.refer-btn .ico{font-size:16px}
.refer-btn.ghost{background:var(--surface);color:var(--rose-deep);border:1px solid var(--rose-line);box-shadow:var(--sh-1)}
:root[data-theme="dark"] .refer-btn.ghost{color:var(--rose-deep)}
.refer-btn.ghost:hover{filter:none;border-color:var(--rose)}
.refer-stat{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--ink-2);line-height:1.4}
.refer-stat .ico{font-size:15px;color:var(--rose);flex:none}
.refer-stat b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.refer-stat .pend{color:var(--ink-3)}

/* ==========================================================================
   trust strip
   ========================================================================== */
.trust{
  display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px 13px;font-size:12px;color:var(--ink-2);line-height:1.4;
}
.trust .ico{font-size:17px;color:var(--rose);flex:none}
.trust b{color:var(--ink);font-weight:650}

/* ---------- birthday teaser / celebration ---------- */
.bday{
  display:flex;align-items:center;gap:12px;border-radius:var(--r-lg);padding:13px 15px;
  background:linear-gradient(150deg,var(--gold-soft),color-mix(in srgb,var(--gold) 16%, var(--surface)));
  border:1px solid var(--gold-line);box-shadow:var(--sh-1);
}
.bday-ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:22px;
  color:var(--gold-deep);background:color-mix(in srgb,var(--gold) 22%, var(--surface));border:1px solid var(--gold-line)}
:root[data-theme="dark"] .bday-ic{color:var(--gold)}
.bday-t{min-width:0}
.bday-t b{display:block;font-size:14px;font-weight:700;line-height:1.2;color:var(--ink)}
.bday-t small{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.bday-pct{color:var(--gold-deep);font-weight:800}
:root[data-theme="dark"] .bday-pct{color:var(--gold)}
.bday.celebrate{background:linear-gradient(150deg,var(--rose-soft),color-mix(in srgb,var(--gold) 20%, var(--surface)));box-shadow:var(--sh-2)}
.bday.celebrate .bday-ic{color:#fff;background:linear-gradient(150deg,var(--btn1),var(--btn2));border:0;box-shadow:var(--sh-rose)}

/* ==========================================================================
   discount ticket
   ========================================================================== */
.tick{
  position:relative;display:flex;align-items:stretch;min-height:90px;
  border-radius:var(--r-md);overflow:hidden;isolation:isolate;--notch:var(--page);
  /* foil material tokens (flipped for dark below) */
  --foil-top-hi:rgba(255,255,255,.42);
  --foil-side-hi:rgba(255,255,255,.16);
  --foil-shade:color-mix(in srgb, var(--gold-deep) 40%, transparent);
  --foil-shade-op:.5;
  --amt-emboss:0 1px 0 rgba(255,255,255,.30);
  --card-top-hi:color-mix(in srgb, #fff 46%, transparent);
  /* iridescent foil sheen «переливание» — bright catch-light (white gloss in light) */
  --foil-glow:rgba(255,255,255,.55);
  /* LIGHT-only moving sweep: bright specular core + soft darker-gold shadow shoulders,
     so the drift reads over the pale champagne foil. Set to transparent in dark (no-op). */
  --foil-sweep-hi:rgba(255,255,255,.85);
  --foil-sweep-lo:color-mix(in srgb, var(--gold-deep) 30%, transparent);
  background:linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 60%, var(--surface)));
  border:1px solid var(--line);
  box-shadow:var(--sh-1), inset 0 1px 0 var(--card-top-hi);
}

/* ---- left foil stub (the value) ---- */
.tick .stub{
  position:relative;flex:none;width:98px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:10px 8px;text-align:center;color:var(--stub-gink);
  /* premium foil finish: soft angular iridescent pools + one broad feathered
     sheen band that slowly drifts — reads as luxe «переливание», NO hairlines */
  background:
    linear-gradient(116deg,
      transparent 24%,
      var(--foil-sweep-lo) 39%,
      var(--foil-sweep-hi) 50%,
      var(--foil-sweep-lo) 61%,
      transparent 76%),
    linear-gradient(116deg,
      transparent 22%,
      color-mix(in srgb, var(--foil-glow) 24%, transparent) 41%,
      color-mix(in srgb, var(--foil-glow) 60%, transparent) 50%,
      color-mix(in srgb, var(--foil-glow) 24%, transparent) 59%,
      transparent 78%),
    radial-gradient(120% 82% at 20% -8%, rgba(255,255,255,.28), transparent 58%),
    radial-gradient(96% 128% at 50% 44%, color-mix(in srgb, var(--foil-glow) 15%, transparent), transparent 72%),
    conic-gradient(from 210deg at 32% 22%,
      color-mix(in srgb, var(--foil-glow) 36%, transparent),
      transparent 24%,
      color-mix(in srgb, var(--foil-glow) 20%, transparent) 52%,
      transparent 78%,
      color-mix(in srgb, var(--foil-glow) 36%, transparent)),
    linear-gradient(150deg, var(--stub-g1), var(--stub-g2));
  background-repeat:no-repeat;
  background-size:200% 100%, 190% 100%, auto, auto, auto, auto;
  background-position:40% 0, 40% 0, 0 0, 0 0, 0 0, 0 0;
  animation:foil-shimmer 7s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 var(--foil-top-hi),
    inset -1px 0 0 color-mix(in srgb, var(--gold-deep) 34%, transparent),
    inset 1px 0 0 var(--foil-side-hi);
}
/* gentle left<->right drift of the sheen band = soft «переливание» */
@keyframes foil-shimmer{
  0%,100%{background-position:30% 0, 34% 0, 0 0, 0 0, 0 0, 0 0}
  50%    {background-position:70% 0, 66% 0, 0 0, 0 0, 0 0, 0 0}
}
@media (prefers-reduced-motion: reduce){
  .tick .stub{animation:none}
}
.tick .stub::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 118% 120%, var(--foil-shade), transparent 62%);
  opacity:var(--foil-shade-op);
}
.tick .stub .cap{
  font-size:7.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  opacity:.58;line-height:1;margin-bottom:1px;
}
.tick .stub .amt{
  position:relative;display:flex;align-items:baseline;justify-content:center;line-height:1;
  white-space:nowrap;font-size:28px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  text-shadow:var(--amt-emboss);
}
.tick .stub .amt .sign{font-size:.60em;font-weight:800;opacity:.72;margin-right:.03em;position:relative;top:-.055em}
.tick .stub .amt .num{font-size:1em;font-weight:800;letter-spacing:-.02em}
.tick .stub .amt .unit{font-size:.545em;font-weight:800;margin-left:.07em;opacity:.9}
/* long values (≥1000, e.g. «−1 000 ₽»): shrink one notch + trim stub padding so the
   amount always stays on one centred line, even with wide fallback fonts in VK WebView */
.tick .stub.lg{padding-left:5px;padding-right:5px}
.tick .stub.lg .amt{font-size:20px}

/* ---- right info panel ---- */
.tick .info{
  position:relative;flex:1;padding:13px 15px;min-width:0;
  border-left:1.5px dashed color-mix(in srgb, var(--gold-deep) 42%, transparent);
  display:flex;flex-direction:column;gap:5px;justify-content:center;
  background:radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--gold-soft) 34%, transparent), transparent 58%);
}
.tick .info b{font-size:13.5px;font-weight:700;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.tick .info .meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
.tick .info .meta .ico{font-size:13px;color:var(--gold-deep)}
.tick .info .meta .meta-dot{color:var(--ink-3);opacity:.7}
.tick .info .meta .exp.urgent{background:var(--urge-soft);border:1px solid var(--urge-line);border-radius:var(--r-pill);padding:2px 8px}

/* ---- perforation notches (top & bottom of the seam) ---- */
.tick::before,.tick::after{content:"";position:absolute;left:98px;width:11px;height:11px;border-radius:50%;background:var(--notch);transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold-deep) 30%, var(--line))}
.tick::before{top:0}
.tick::after{top:100%}

/* ---- pending (ДР-бонус: активен позже) ---- */
.tick.pending{border:1px dashed color-mix(in srgb, var(--gold-deep) 40%, var(--gold-line));background:linear-gradient(180deg, var(--gold-soft), color-mix(in srgb, var(--gold-soft) 60%, var(--surface)))}
.tick.pending .stub{color:var(--gold-deep);background:linear-gradient(150deg, color-mix(in srgb, var(--gold-soft) 55%, var(--surface)), var(--surface));box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset -1px 0 0 color-mix(in srgb, var(--gold-deep) 22%, transparent)}
.tick.pending .stub::before{opacity:.22}
.tick.pending .stub .amt{text-shadow:none}
.tick.pending .meta{color:var(--gold-deep)}

/* ---- dark theme: flip the foil material tokens ---- */
:root[data-theme="dark"] .tick{
  --foil-top-hi:rgba(255,255,255,.14);
  --foil-side-hi:rgba(255,255,255,.06);
  --foil-shade:rgba(0,0,0,.30);
  --foil-shade-op:.6;
  --amt-emboss:0 1px 1px rgba(0,0,0,.30);
  --card-top-hi:rgba(255,255,255,.06);
  /* warm champagne gleam instead of white so dark reads as brass foil, not scratches */
  --foil-glow:color-mix(in srgb, var(--gold-deep) 60%, transparent);
  /* dark keeps the brass look as-is: light-only sweep layer disabled */
  --foil-sweep-hi:transparent;
  --foil-sweep-lo:transparent;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tick{
    --foil-top-hi:rgba(255,255,255,.14);
    --foil-side-hi:rgba(255,255,255,.06);
    --foil-shade:rgba(0,0,0,.30);
    --foil-shade-op:.6;
    --amt-emboss:0 1px 1px rgba(0,0,0,.30);
    --card-top-hi:rgba(255,255,255,.06);
    --foil-glow:color-mix(in srgb, var(--gold-deep) 60%, transparent);
    --foil-sweep-hi:transparent;
    --foil-sweep-lo:transparent;
  }
}

/* ==========================================================================
   birthday voucher — DIRECTION C · «Купон» (modern coupon)
   A crisp, contemporary coupon: clean warm card, the −value carried on a small
   floating GOLD CHIP (a rounded token that replaces the flat beige square),
   a crisp DOTTED perforation down the seam, clean sans type, and one whisper of
   celebration — a faint gold confetti glaze sitting UNDER the content. No wax
   seal, no scattered sparkles. Scoped to .tick.bday — normal .tick untouched.
   Theme-aware; the glaze is static (nothing to gate for reduced-motion).
   ========================================================================== */
.tick.bday{
  /* clean, lightly-warmed card — lets the gold chip + confetti do the talking */
  background:
    linear-gradient(159deg,
      color-mix(in srgb, var(--gold-soft) 22%, var(--surface)),
      var(--surface) 58%);
  border:1px solid color-mix(in srgb, var(--gold) 26%, var(--gold-line));
  box-shadow:
    0 10px 26px -21px color-mix(in srgb, var(--gold-deep) 38%, transparent),
    var(--sh-1), inset 0 1px 0 var(--card-top-hi);
}
/* value stub → a floating rounded GOLD CHIP; kills the base foil + 7s shimmer */
.tick.bday .stub{
  margin:11px 8px;border-radius:14px;color:#4E340F;
  --stub-g1:#F1D89B;--stub-g2:#D8B45F;
  background:
    linear-gradient(180deg, color-mix(in srgb,#fff 34%, transparent), transparent 40%),
    linear-gradient(152deg, var(--stub-g1), var(--stub-g2));
  background-repeat:no-repeat;animation:none;
  box-shadow:
    0 4px 10px -5px color-mix(in srgb, var(--gold-deep) 60%, transparent),
    inset 0 1px 0 color-mix(in srgb,#fff 52%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--gold-deep) 20%, transparent);
}
.tick.bday .stub::before{display:none}
.tick.bday .stub .cap{opacity:.66;letter-spacing:1.6px;color:#4E340F}
.tick.bday .stub .amt{
  font-size:27px;font-weight:800;color:#432D0C;
  text-shadow:0 1px 0 color-mix(in srgb,#fff 46%, transparent);
}
.tick.bday .stub .amt .sign{opacity:.72}
.tick.bday .stub.lg{padding-left:4px;padding-right:4px}
.tick.bday .stub.lg .amt{font-size:19px}
/* crisp DOTTED perforation down the seam + clean sans title */
.tick.bday .info{
  padding:13px 15px 13px 16px;
  border-left:1.5px dotted color-mix(in srgb, var(--gold-deep) 58%, transparent);
  background:none;
}
.tick.bday .info b{font-family:var(--sans);font-weight:700;letter-spacing:0}
/* crisp gold-tinted notches (the coupon punch) — realigned to the seam that
   now sits OUTSIDE the floating chip (stub outer box = 98 + 2×8 margin = 114px) */
.tick.bday::before,.tick.bday::after{left:114px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold-deep) 54%, var(--gold-line))}

/* ---- the whisper of celebration: faint gold confetti glaze, UNDER content ---- */
.tick.bday .bday-glaze{
  position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  opacity:.5;
  background:
    radial-gradient(circle at 22% 26%, color-mix(in srgb, var(--gold) 62%, transparent) 0 1.6px, transparent 2px),
    radial-gradient(circle at 63% 16%, color-mix(in srgb, var(--rose) 46%, transparent) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 82% 40%, color-mix(in srgb, var(--gold) 58%, transparent) 0 1.7px, transparent 2.1px),
    radial-gradient(circle at 45% 62%, color-mix(in srgb, var(--gold-deep) 40%, transparent) 0 1.3px, transparent 1.8px),
    radial-gradient(circle at 90% 74%, color-mix(in srgb, var(--gold) 54%, transparent) 0 1.5px, transparent 2px),
    radial-gradient(circle at 33% 84%, color-mix(in srgb, var(--rose) 40%, transparent) 0 1.3px, transparent 1.8px),
    radial-gradient(circle at 72% 90%, color-mix(in srgb, var(--gold) 50%, transparent) 0 1.4px, transparent 1.9px);
}

/* ---- window / pending meta + countdown / urgent pill ---- */
.tick.bday .win-meta,.tick.bday .pend-meta{flex-wrap:wrap;row-gap:2px}
.tick.bday .win-meta>span,.tick.bday .pend-meta>span{white-space:nowrap}
.tick.bday .win-meta .lead{color:var(--gold-deep);font-weight:700}
.tick.bday .win-meta .ico,.tick.bday .pend-meta .ico{color:var(--gold-deep)}
.tick.bday .pend-meta{color:var(--gold-deep);font-weight:600}
.tick.bday .pend-meta .until{color:var(--ink-3);font-weight:400}
.tick .info .meta .cd{margin-left:2px;color:var(--ink-3)}
.tick .info .meta .cd.urgent{color:var(--urge);background:var(--urge-soft);border:1px solid var(--urge-line);
  border-radius:var(--r-pill);padding:1px 7px;font-weight:600}

/* ---- pending: dashed rim + softer chip (the coupon is not clipped yet) ---- */
.tick.bday.pending{border:1px dashed color-mix(in srgb, var(--gold) 50%, var(--gold-line))}
/* .tick.bday.pending .stub (0,4,0) must set background explicitly to out-rank the
   later base .tick.pending .stub{background:#fff} — otherwise the chip goes white */
.tick.bday.pending .stub{
  --stub-g1:#F6E7BD;--stub-g2:#E6CD90;color:#5A3B12;
  background:
    linear-gradient(180deg, color-mix(in srgb,#fff 32%, transparent), transparent 42%),
    linear-gradient(152deg, var(--stub-g1), var(--stub-g2));
  background-repeat:no-repeat;
  box-shadow:
    0 3px 8px -5px color-mix(in srgb, var(--gold-deep) 46%, transparent),
    inset 0 1px 0 color-mix(in srgb,#fff 46%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--gold-deep) 16%, transparent)}

/* ---- dark: deepen card, keep chip a lit gold token, warm the confetti ---- */
:root[data-theme="dark"] .tick.bday{
  background:linear-gradient(159deg, color-mix(in srgb, var(--gold-soft) 80%, var(--surface)), var(--surface) 60%);
  border-color:color-mix(in srgb, var(--gold) 38%, var(--gold-line));
}
:root[data-theme="dark"] .tick.bday .stub{--stub-g1:#6A5228;--stub-g2:#836636;color:var(--gold-deep);
  box-shadow:0 4px 10px -5px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent)}
:root[data-theme="dark"] .tick.bday .stub .amt{color:var(--gold-deep);text-shadow:0 1px 1px rgba(0,0,0,.34)}
:root[data-theme="dark"] .tick.bday .stub .cap{color:var(--gold-deep)}
:root[data-theme="dark"] .tick.bday .bday-glaze{opacity:.42}
:root[data-theme="dark"] .tick.bday.pending .stub{--stub-g1:#6A5228;--stub-g2:#836636;color:var(--gold-deep)}
:root[data-theme="dark"] .tick.bday.pending{border-color:color-mix(in srgb, var(--gold) 42%, var(--gold-line))}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tick.bday{
    background:linear-gradient(159deg, color-mix(in srgb, var(--gold-soft) 80%, var(--surface)), var(--surface) 60%);
    border-color:color-mix(in srgb, var(--gold) 38%, var(--gold-line));
  }
  :root:not([data-theme="light"]) .tick.bday .stub{--stub-g1:#6A5228;--stub-g2:#836636;color:var(--gold-deep);
    box-shadow:0 4px 10px -5px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent)}
  :root:not([data-theme="light"]) .tick.bday .stub .amt{color:var(--gold-deep);text-shadow:0 1px 1px rgba(0,0,0,.34)}
  :root:not([data-theme="light"]) .tick.bday .stub .cap{color:var(--gold-deep)}
  :root:not([data-theme="light"]) .tick.bday .bday-glaze{opacity:.42}
  :root:not([data-theme="light"]) .tick.bday.pending .stub{--stub-g1:#6A5228;--stub-g2:#836636;color:var(--gold-deep)}
  :root:not([data-theme="light"]) .tick.bday.pending{border-color:color-mix(in srgb, var(--gold) 42%, var(--gold-line))}
}

/* «Списать кешбэк» — еле заметная подпись про потолок 20% */
.opt .ol small.cash-cap-hint{display:block;margin-top:2px;font-size:9px;font-weight:500;letter-spacing:.2px;color:var(--ink-3);opacity:.5}

/* «Написать Виктории» — блестящая кнопка ЛС мастера (под записью) */
.master-dm{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 14px;margin-top:10px;border:1px solid var(--gold-line);border-radius:var(--r-md);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 18%, var(--surface)),var(--surface));
  box-shadow:var(--sh-1);overflow:hidden;cursor:pointer;color:var(--ink);font:inherit}
.master-dm::after{content:"";position:absolute;top:0;left:-65%;width:48%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);
  animation:dm-shine 3.8s ease-in-out infinite}
@keyframes dm-shine{0%,60%{left:-65%}82%,100%{left:135%}}
.master-dm-ava{flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;
  border:2px solid var(--gold);box-shadow:0 2px 8px -2px color-mix(in srgb,var(--gold) 70%, transparent)}
.master-dm-ava img{width:100%;height:100%;object-fit:cover;display:block}
.master-dm-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.master-dm-tx b{font-size:14px;font-weight:750;line-height:1.2}
.master-dm-tx small{font-size:11px;color:var(--ink-3)}
.master-dm-ic{flex:none;font-size:18px;color:var(--gold-deep)}
.master-dm:active{transform:translateY(1px)}
@media (prefers-reduced-motion: reduce){.master-dm::after{animation:none}}
.dm-card{text-align:center}
.dm-card-ava{width:66px;height:66px;border-radius:50%;overflow:hidden;margin:2px auto 10px;
  border:2.5px solid var(--gold);box-shadow:0 4px 14px -4px color-mix(in srgb,var(--gold) 70%, transparent)}
.dm-card-ava img{width:100%;height:100%;object-fit:cover;display:block}
.dm-card-t{display:block;font-size:16px;font-weight:800;margin-bottom:2px}

/* discount countdown (all discounts now expire; only cashback is eternal) */
.exp{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.exp .ico{font-size:13px}
.exp.urgent{color:var(--urge)}
.opt .ol small .exp{font-size:11px}
.tick .info .meta .exp.urgent{background:var(--urge-soft);border:1px solid var(--urge-line);border-radius:var(--r-pill);padding:2px 8px}

/* ==========================================================================
   task rows
   ========================================================================== */
.ach{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.ach:first-of-type{border-top:0;padding-top:2px}
.ach .ai{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:19px;color:var(--rose);background:var(--rose-soft);border:1px solid var(--rose-line)}
.ach .txt{flex:1;min-width:0}
.ach .txt b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.ach .txt small{font-size:11.5px;color:var(--ink-3)}
.ach .go{flex:none;font-size:12px;font-weight:700;color:var(--btn-ink);background:linear-gradient(160deg,var(--btn1),var(--btn2));padding:9px 13px;border-radius:11px;border:0;cursor:pointer;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;gap:5px;box-shadow:var(--sh-rose);transition:transform var(--d1),filter var(--d2)}
.ach .go:hover{filter:brightness(1.05)}
.ach .go:active{transform:translateY(1px) scale(.98)}
.ach .go.inert{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);box-shadow:none}
.tasknote{margin-top:4px;font-size:var(--fs-xs);color:var(--ink-3);display:flex;align-items:center;gap:7px;line-height:1.4}
.tasknote .ico{font-size:14px;color:var(--gold-deep);flex:none}
:root[data-theme="dark"] .tasknote .ico{color:var(--gold)}

/* pay pre-note (today appointment) */
.today{
  display:flex;align-items:center;gap:10px;background:var(--rose-soft);border:1px solid var(--rose-line);
  border-radius:var(--r-sm);padding:12px 14px;color:var(--rose-deep);font-size:13px;font-weight:600;line-height:1.35;
}
.today .ico{font-size:18px;flex:none}
.today small{display:block;font-weight:700;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;opacity:.85;margin-bottom:1px}

/* ==========================================================================
   service picker
   ========================================================================== */
.pick-h{font-family:var(--serif);font-style:italic;font-size:var(--fs-h);line-height:1.14;color:var(--ink);text-wrap:balance;margin:2px 0 0}
.pick-sub{margin:5px 0 0;font-size:12.5px;color:var(--ink-2)}
.srv-list{display:flex;flex-direction:column;gap:9px}
.srv,.opt{
  display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:12px 14px;min-height:58px;cursor:pointer;box-shadow:var(--sh-1);
  transition:border-color var(--d2), background var(--d2), box-shadow var(--d2), transform var(--d1);
}
.srv:hover,.opt:hover{border-color:var(--rose-line)}
.srv:active,.opt:active{transform:scale(.994)}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink-3);flex:none;display:grid;place-items:center;transition:border-color var(--d2)}
.radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--rose);transform:scale(0);transition:transform var(--d2) var(--pop)}
.srv .sn{flex:1;min-width:0}
.srv .sn b{font-size:14px;font-weight:600;display:block;line-height:1.25}
.srv .sn small{font-size:11.5px;color:var(--ink-3)}
.srv .sp{font-weight:750;font-variant-numeric:tabular-nums;font-size:14px;flex:none;color:var(--ink)}
.srv[aria-checked="true"]{border-color:var(--rose);background:var(--rose-soft)}
.srv[aria-checked="true"] .radio,.opt[aria-checked="true"] .radio{border-color:var(--rose)}
.srv[aria-checked="true"] .radio::after,.opt[aria-checked="true"] .radio::after{transform:scale(1)}
.srv[aria-checked="true"] .sp{color:var(--rose-deep)}
/* Мультивыбор услуг для оплаты — квадратные галочки вместо радио + суммирование */
.srv-multi{cursor:pointer}
.srv-multi .check{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--rose-line);background:var(--surface);display:grid;place-items:center;transition:background .15s,border-color .15s}
.srv-multi .check::after{content:"";width:10px;height:5.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .15s;margin-top:-2px}
.srv-multi[aria-checked="true"]{border-color:var(--rose);background:var(--rose-soft)}
.srv-multi[aria-checked="true"] .check{background:var(--rose);border-color:var(--rose)}
.srv-multi[aria-checked="true"] .check::after{transform:rotate(-45deg) scale(1)}
.srv-multi[aria-checked="true"] .sp{color:var(--rose-deep)}
.srv-multi:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
/* авто-выбранная (по вашей записи) услуга — вынесена в ТОП, заметный ярлык + подсветка */
.srv-zone-booked{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-style:normal;font-weight:700;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--rose-deep)}
.srv-zone-booked svg{width:15px;height:15px;flex:none}
.srv.srv-booked{border-color:var(--rose);background:var(--rose-soft);box-shadow:inset 0 0 0 1.5px var(--rose)}
/* После оплаты: нудж «оставьте отзыв → бонус» (только актуальные задания) */
.reward-offer{border:1px solid var(--gold-line);background:linear-gradient(150deg,var(--gold-soft),var(--surface));border-radius:var(--r-md);padding:13px 15px;display:flex;flex-direction:column;gap:11px}
.ro-head{display:flex;align-items:center;gap:10px}
.ro-head svg{width:22px;height:22px;color:var(--gold-deep);flex:none}
.ro-head b{display:block;font-size:14px;line-height:1.25;color:var(--ink)}
.ro-head small{color:var(--ink-3);font-size:11.5px}
.ro-links{display:flex;gap:8px;flex-wrap:wrap}
.ro-btn{flex:1;min-width:130px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--gold-line);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;text-decoration:none}
.ro-btn svg{width:15px;height:15px;flex:none}
.ro-btn .brandmark{width:20px;height:20px;border-radius:6px;flex:none}
.ro-btn:active{transform:translateY(1px)}
/* предстоящая скидка (ДР-бонус висит, но ещё НЕ активна — «скоро активна с DD.MM») */
.tick.pending{border:1px dashed var(--gold-line);background:var(--gold-soft)}
.tick.pending .stub{background:#fff;border-color:var(--gold-line);color:var(--gold-deep)}
.tick.pending .meta{color:var(--gold-deep)}
/* ── 🎁 Подарок: карточка ожидающего активации (визит предоплачен) ── */
.gift-stack{display:flex;flex-direction:column;gap:12px}
.gift-card{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic tx" "btn btn";gap:11px 13px;padding:15px;border-radius:var(--r-md);border:1px solid var(--gold-line);background:linear-gradient(150deg,var(--gold-soft),var(--surface));box-shadow:var(--sh-1)}
.gift-bloom{position:absolute;top:-40%;right:-15%;width:55%;height:180%;background:radial-gradient(closest-side,var(--gold-soft),transparent);opacity:.7;pointer-events:none}
.gift-ic{grid-area:ic;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--gold),var(--gold-deep));font-size:21px;box-shadow:var(--sh-1);position:relative}
.gift-tx{grid-area:tx;display:flex;flex-direction:column;gap:2px;min-width:0;align-self:center;position:relative}
.gift-tx small{color:var(--gold-deep);font-weight:700;font-size:11.5px;letter-spacing:.02em}
.gift-proc{font-weight:750;font-size:15px;color:var(--ink);line-height:1.2}
.gift-sub{font-size:12px;color:var(--ink-3)}
.gift-use{grid-area:btn;margin-top:2px;position:relative}
/* ── 🎫 Абонементы: остаток визитов + прогресс ── */
.sub-card{display:flex;flex-direction:column;gap:10px;padding:14px 15px;border-radius:var(--r-md);border:1px solid var(--rose-line);background:linear-gradient(150deg,var(--surface),var(--surface-2));box-shadow:var(--sh-1)}
.sub-card+.sub-card{margin-top:10px}
.sub-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sub-hd b{font-size:14.5px;color:var(--ink)}
.sub-left{font-size:12px;color:var(--ink-3);white-space:nowrap}
.sub-left b{font-size:17px;color:var(--rose-deep);font-variant-numeric:tabular-nums}
.sub-left i{font-style:normal}
.sub-bar{height:7px;border-radius:99px;background:var(--rose-soft);overflow:hidden}
.sub-bar-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--rose),var(--rose-deep));transition:width .7s ease}
.sub-use{margin-top:2px}
/* запись-подарок — золотой акцент + примечание «нельзя отменить» */
.appt-card.gift{border-color:var(--gold-line);background:linear-gradient(150deg,var(--gold-soft),var(--surface))}
.appt-card.gift .appt-ic{color:var(--gold-deep);background:#fff;border-color:var(--gold-line)}
.appt-gift-note{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;color:var(--gold-deep)}
.appt-gift-note svg{width:14px;height:14px;flex:none}
/* форма покупки подарка + ссылка-вручение */
.gift-form{display:flex;flex-direction:column;gap:9px}
.gift-inp{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--rose-line);background:var(--surface);color:var(--ink);font-size:15px;font-family:inherit}
.gift-inp:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-soft)}
.gift-inp::placeholder{color:var(--ink-3)}
.gift-link-box{padding:11px 13px;border-radius:12px;border:1px dashed var(--gold-line);background:var(--gold-soft);margin-bottom:10px}
.gl-url{font-size:13px;color:var(--gold-deep);font-weight:600;word-break:break-all}
.gift-qr{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
.gift-qr img{width:168px;height:168px;border-radius:12px;background:#fff;padding:8px;border:1px solid var(--rose-line);box-shadow:var(--sh-1)}
.gift-qr small{font-size:11px;color:var(--ink-3)}
/* Экран оплаты: список выбранных услуг (мультивыбор) */
.svc-multi{display:flex;flex-direction:column;gap:9px;width:100%}
.svc-multi-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.svc-multi-h b{font-size:15px;color:var(--ink)}
.svc-multi-h .smc{font-size:11.5px;color:var(--ink-3)}
.svc-multi-list{display:flex;flex-direction:column;gap:7px}
.svc-multi-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.svc-multi-row .smn{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-multi-row .smp{flex:none;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ==========================================================================
   payment options + promo
   ========================================================================== */
.opts{display:flex;flex-direction:column;gap:9px;transition:opacity var(--d3)}
.opt .ol{flex:1;min-width:0}
.opt .ol b{font-size:14px;font-weight:650;display:block;line-height:1.22}
.opt .ol small{font-size:11.5px;color:var(--ink-3)}
.opt .oa{font-weight:750;font-variant-numeric:tabular-nums;font-size:14px;flex:none}
.opt .oa.minus{color:var(--sage)}
.opt[aria-checked="true"]{border-color:var(--rose);background:var(--rose-soft)}
.opt[data-kind="cashback"][aria-checked="true"]{border-color:var(--gold-line);background:var(--gold-soft)}
.opt[data-kind="cashback"][aria-checked="true"] .radio{border-color:var(--gold-deep)}
.opt[data-kind="cashback"][aria-checked="true"] .radio::after{background:var(--gold-deep);transform:scale(1)}
.opt[data-kind="none"][aria-checked="true"]{border-color:var(--ink-3);background:var(--surface-2)}
.opt[data-kind="none"][aria-checked="true"] .radio{border-color:var(--ink-2)}
.opt[data-kind="none"][aria-checked="true"] .radio::after{background:var(--ink-2);transform:scale(1)}
/* when a friend promo takes precedence, mute the mutually-exclusive options */
.opts.locked{opacity:.5;pointer-events:none;filter:grayscale(.25)}
.opts.locked .opt[aria-checked="true"]{border-color:var(--line);background:var(--surface)}
.opts.locked .radio::after{transform:scale(0)}
/* Кешбэк ЗАЛОЧЕН (сообщения сообщества не разрешены) — приглушённая опция + замок + инлайн-
   кнопка разлока. НЕ .opts.locked (там pointer-events:none убил бы кнопку) — точечный .opt.cb-locked,
   у элемента НЕТ role="radio" → radiogroup его не выбирает. */
.opt.cb-locked{background:var(--surface);cursor:default;align-items:flex-start}
.opt.cb-locked:hover{border-color:var(--line)}
.opt.cb-locked:active{transform:none}
.opt.cb-locked .lock-ic{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--gold-soft);color:var(--gold-deep)}
.opt.cb-locked .lock-ic svg{width:17px;height:17px}
.opt.cb-locked .ol{padding-top:2px}
.opt.cb-locked .oa.muted{color:var(--ink-3);opacity:.55;text-decoration:line-through;padding-top:6px}
.opt.cb-locked .vk-allow-native{margin-top:9px}
.paynote{margin-top:2px;font-size:var(--fs-xs);color:var(--ink-2);display:flex;align-items:center;gap:7px;line-height:1.4}
.paynote .ico{font-size:15px;color:var(--gold-deep);flex:none}
:root[data-theme="dark"] .paynote .ico{color:var(--gold)}

/* promo code input */
.promo{display:flex;flex-direction:column;gap:9px}
.promo-row{display:flex;gap:9px}
.promo-field{
  flex:1;display:flex;align-items:center;gap:9px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:0 13px;min-height:50px;box-shadow:var(--sh-1);
  transition:border-color var(--d2),box-shadow var(--d2);
}
.promo-field:focus-within{border-color:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 14%, transparent), var(--sh-1)}
.promo-field.ok{border-color:var(--sage);box-shadow:0 0 0 4px color-mix(in srgb,var(--sage) 15%, transparent)}
.promo-field.bad{border-color:var(--urge)}
.promo-field .ico{color:var(--ink-3);font-size:17px;flex:none}
.promo-field:focus-within .ico{color:var(--rose)}
.promo-field.ok .ico{color:var(--sage)}
.promo-field input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:15px;font-weight:650;
  color:var(--ink);padding:12px 0;letter-spacing:2px;font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.promo-field input::placeholder{color:var(--ink-3);font-family:var(--sans);font-weight:500;letter-spacing:.2px}
.promo-apply{
  flex:none;min-width:104px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:650;color:var(--btn-ink);border:0;border-radius:var(--r-sm);padding:0 15px;
  background:linear-gradient(160deg,var(--btn1),var(--btn2));box-shadow:var(--sh-rose);
  transition:transform var(--d1),filter var(--d2),opacity var(--d2);
}
.promo-apply:hover{filter:brightness(1.04)}
.promo-apply:active{transform:translateY(1px) scale(.99)}
.promo-apply[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;filter:none}
.promo-chip{
  display:flex;align-items:center;gap:9px;background:var(--sage-soft);border:1px solid var(--sage-line);
  border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;font-weight:650;color:var(--sage);line-height:1.3;
  animation:chip-in var(--d3) var(--pop) both;
}
@keyframes chip-in{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
:root[data-theme="dark"] .promo-chip{color:var(--sage)}
.promo-chip .ci{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--sage),color-mix(in srgb,var(--sage) 70%, #2c4a24));font-size:15px}
.promo-chip .ct{flex:1;min-width:0}
.promo-chip .ct b{color:var(--ink);display:block;font-weight:700}
.promo-chip .ct small{color:var(--ink-2);font-weight:600;font-size:11px}
.promo-clear{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:17px;font-weight:600;line-height:1;font-family:var(--sans);transition:color var(--d1),border-color var(--d1)}
.promo-clear:hover{color:var(--rose-deep);border-color:var(--rose-line)}
.promo-err{font-size:12.5px;color:var(--urge);font-weight:600;display:flex;align-items:center;gap:6px;padding-left:2px;animation:chip-in var(--d2) both}
.promo-err .ico{font-size:14px;flex:none}

.svc{display:flex;align-items:center;gap:12px}
.svc .thumb{width:48px;height:48px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:22px;color:var(--rose);background:var(--rose-soft);border:1px solid var(--rose-line)}
.svc b{font-size:14.5px;line-height:1.2}
.svc small{font-size:11.5px;color:var(--ink-3);display:block;margin-top:2px}

.prow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;font-size:13.5px}
.prow + .prow{border-top:1px solid var(--line)}
.prow .amt{font-weight:650;font-variant-numeric:tabular-nums}
.prow .amt.minus{color:var(--sage)}
.total{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:13px;margin-top:4px;border-top:1.5px solid var(--ink)}
.total .lab2{font-size:12px;color:var(--ink-2);margin-bottom:2px}
.total .strike{color:var(--ink-3);text-decoration:line-through;font-size:12.5px;font-weight:500}
.total b{font-size:29px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1}

/* ==========================================================================
   new client
   ========================================================================== */
.newc{display:flex;flex-direction:column;gap:15px;align-items:center;text-align:center;padding:14px 4px 4px}
.bloom{width:86px;height:86px;position:relative;display:grid;place-items:center;color:var(--rose);background:radial-gradient(circle at 50% 42%, var(--rose-soft), transparent 70%)}
.bloom>.ico{font-size:46px}
.bloom .sp{position:absolute;color:var(--gold)}
.bloom .sp.a{top:2px;right:6px;font-size:18px;animation:twinkle 2.6s ease-in-out infinite}
.bloom .sp.b{bottom:6px;left:2px;font-size:13px;animation:twinkle 2.6s ease-in-out .9s infinite}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
.newc h2{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-display);line-height:1.14;text-wrap:balance}
.newc .p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:32ch}
.newc .p b{color:var(--ink)}
.social{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:2px}
.sbtn{display:flex;align-items:center;gap:12px;text-decoration:none;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;color:var(--ink);min-height:60px;box-shadow:var(--sh-1);transition:border-color var(--d2),box-shadow var(--d2),transform var(--d1)}
.sbtn:hover{border-color:var(--rose-line);box-shadow:var(--sh-2)}
.sbtn:active{transform:scale(.99)}
.sbtn .badge2{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff}
.sbtn.vk .badge2{background:linear-gradient(150deg,#5a83b0,var(--vk))}
.sbtn.tg .badge2{background:linear-gradient(150deg,#43b0dc,var(--tg))}
.sbtn.tel .badge2{background:linear-gradient(150deg,var(--accent),var(--accent-2))}
:root[data-theme="dark"] .sbtn.vk .badge2{background:linear-gradient(150deg,#3E6F9E,#2f5885)}
:root[data-theme="dark"] .sbtn.tg .badge2{background:linear-gradient(150deg,#2A92C7,#1f7aa8)}
:root[data-theme="dark"] .sbtn.tel .badge2{background:linear-gradient(150deg,var(--accent),var(--accent-2))}
.sbtn .badge2 .ico{font-size:21px}
.sbtn .l{flex:1;min-width:0}
.sbtn .l b{display:block;font-size:14px;font-weight:650}
.sbtn .l small{font-size:11.5px;color:var(--ink-3)}
.sbtn .go2{color:var(--ink-3);font-size:18px}
/* вход через ВКонтакте (дополнительно к телефону) */
.vk-alt{display:flex;flex-direction:column;gap:13px;margin-top:6px}
.vk-or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.vk-or::before,.vk-or::after{content:"";flex:1;height:1px;background:var(--line)}
.vk-login-btn{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;background:#0077FF;color:#fff;border-radius:var(--r-md);padding:14px;min-height:54px;font-size:14.5px;font-weight:650;box-shadow:0 7px 18px -9px rgba(0,119,255,.65);transition:transform var(--d1),box-shadow var(--d2)}
.vk-login-btn:hover{box-shadow:0 10px 22px -9px rgba(0,119,255,.75)}
.vk-login-btn:active{transform:scale(.99)}
.vk-login-btn .ico{font-size:21px}
.vk-badge{width:60px;height:60px;border-radius:16px;background:#fff;color:#0077FF;display:grid;place-items:center;margin:0 auto 6px;box-shadow:0 8px 22px -10px rgba(0,119,255,.5)}
.vk-badge .ico{font-size:54px}
/* кешбэк-гейт: замороженный кошелёк (лента+замок) + панель активации со встроенным VK-виджетом */
.cb-gate{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:12px}
.cb-gate-bonus{position:absolute;top:-11px;right:14px;z-index:3;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(150deg,#F1C15A,#D79A2E);color:#3a2a05;border-radius:12px;padding:5px 11px;
  box-shadow:0 9px 16px -6px rgba(215,154,46,.75);transform:rotate(4deg)}
.cb-gate-bonus b{font-size:14px;font-weight:800;line-height:1}
.cb-gate-bonus i{font-size:8px;font-style:normal;text-transform:uppercase;letter-spacing:.6px;opacity:.85;margin-top:1px}
.cb-gate-h{display:flex;gap:12px;align-items:flex-start}
.cb-gate-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(150deg,var(--accent),var(--accent-2));color:var(--btn-ink)}
.cb-gate-ic .ico{font-size:21px}
.cb-gate-tx b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.cb-gate-tx p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.cb-gate-widget{display:flex;justify-content:center;min-height:50px}
.vk-allow-fancy{position:relative;display:block;width:100%;max-width:300px;margin:0 auto}
.vk-allow-pretty{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;
  border:none;cursor:pointer;font-family:inherit;padding:14px 18px;text-decoration:none;box-sizing:border-box;
  background:linear-gradient(160deg,var(--btn1),var(--btn2));color:var(--btn-ink);border-radius:14px;font-size:15px;font-weight:700;
  box-shadow:var(--sh-rose);transition:transform .12s}
.vk-allow-pretty:active{transform:scale(.985)}
.vk-allow-pretty .ico{font-size:20px}
.vk-allow-pretty svg{width:22px;height:22px;fill:currentColor}
.vk-allow-frame{border:0;width:100%;display:block}
.vk-allow-fancy .vk-allow-frame{position:absolute;inset:0;height:100%;opacity:.02;cursor:pointer;z-index:2}
.vk-allow-native{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:300px;margin:0 auto;min-height:52px;padding:14px 18px;border:none;border-radius:14px;cursor:pointer;background:linear-gradient(150deg,#5b88bd,#4a76a8);color:#fff;font-size:16px;font-weight:600;box-shadow:0 12px 24px -12px rgba(74,118,168,.8);transition:transform .12s}
.vk-allow-native:active{transform:scale(.985)}
.vk-allow-native b{font-weight:700}
.vk-allow-native svg,.vk-allow-native .ico{width:22px;height:22px;fill:currentColor}
.vk-allow-native.is-busy{opacity:.6;pointer-events:none}
.cb-gate-recheck{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--page);border:1.5px solid var(--rose-line);color:var(--rose-deep);border-radius:13px;padding:12px;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:var(--sh-1)}
.cb-gate-recheck:hover{background:var(--rose-soft)}
.cb-gate-recheck:active{transform:scale(.98)}
.cb-gate-recheck .ico{font-size:16px}
:root[data-theme="dark"] .cb-gate-recheck{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose-deep)}
/* статус «активен» — зелёный чип .cb-chip.on в строке названия (см. выше) */
.cb-gate-hint{display:flex;gap:7px;align-items:center;justify-content:center;font-size:11px;color:var(--ink-3);text-align:center}
.cb-gate-hint .ico{font-size:14px;color:#3aa657;flex:none}
.teaser{width:100%;background:var(--surface-2);border:1px dashed var(--rose-line);border-radius:var(--r-md);padding:13px 15px;text-align:left}
.teaser .lab{margin-bottom:9px;display:block}
.teaser ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.teaser li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2)}
.teaser li .ico{color:var(--rose);font-size:16px;flex:none}
.teaser li b{color:var(--ink);font-weight:650}

/* ==========================================================================
   post-payment
   ========================================================================== */
.paid-mark{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:16px 0 4px}
.check{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--sage),color-mix(in srgb,var(--sage) 70%, #2c4a24));box-shadow:0 14px 30px -12px color-mix(in srgb,var(--sage) 78%, transparent);animation:pop-in var(--d4) var(--pop) both}
@keyframes pop-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.check .ico{font-size:35px;stroke-width:2.4;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .7s .18s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.paid-mark .big-ok{font-size:18px;font-weight:700;color:var(--sage)}
.paid-mark .hi{font-size:22px}
.hook{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:18px;color:var(--hook-ink);background:linear-gradient(150deg,var(--gold-deep),color-mix(in srgb,var(--gold) 62%, var(--btn2)));box-shadow:var(--sh-gold)}
:root[data-theme="dark"] .hook{color:#2A1408;background:linear-gradient(150deg,#e0c07e,#d79a72)}
.hook .glow{position:absolute;inset:0;background:radial-gradient(160px 100px at 88% 8%, rgba(255,255,255,.5), transparent 62%);pointer-events:none}
.hook .tag{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;opacity:.94;display:inline-flex;align-items:center;gap:6px}
.hook .tag .ico{font-size:15px}
.hook h3{margin:10px 0 0;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.05;letter-spacing:-.5px}
.hook .off{font-size:12px;margin-top:9px;opacity:.94;max-width:32ch;line-height:1.45}
.rec{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.rec .ico{color:var(--rose);font-size:17px;flex:none}

/* ---------- payment waiting (new-tab) + receipt ---------- */
.paid-wait{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:26px 16px 6px}
.wait-orb{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:var(--rose);background:var(--rose-soft);border:1px solid var(--rose-line)}
.wait-orb .ico{font-size:33px}
.wait-orb::before,.wait-orb::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--rose);opacity:0;animation:pulse-ring 2.2s ease-out infinite}
.wait-orb::after{animation-delay:1.1s}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.45}100%{transform:scale(1.55);opacity:0}}
.wait-h{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.14;margin:2px 0 0;color:var(--ink)}
.wait-p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:32ch}
.wait-status{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.spinner.sm{width:14px;height:14px;border-width:2px}
.receipt .prow:first-child{padding-top:2px}
.cashwin-v{margin-top:8px}
.cashwin-sub{min-height:1em}

/* ==========================================================================
   cashback history ledger
   ========================================================================== */
.balance{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:linear-gradient(150deg,var(--gold-soft),color-mix(in srgb,var(--gold) 22%, var(--surface)));
  border:1px solid var(--gold-line);border-radius:var(--r-lg);padding:16px 18px;color:#2A1D08;
  box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.3);
}
:root[data-theme="dark"] .balance{color:var(--gold-deep);background:linear-gradient(150deg,#3a2d15,#4a3a1d);box-shadow:var(--sh-2)}
.balance .lab{color:var(--gold-deep)}
:root[data-theme="dark"] .balance .lab{color:var(--gold)}
.balance b{font-size:31px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1}
.led{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.led:first-child{border-top:0}
.led .li{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:17px}
.led.plus .li{color:var(--gold-deep);background:var(--gold-soft);border:1px solid var(--gold-line)}
:root[data-theme="dark"] .led.plus .li{color:var(--gold)}
.led.minus .li{color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line)}
.led .lc{flex:1;min-width:0}
.led .lc b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.led .lc small{font-size:11.5px;color:var(--ink-3)}
.led .lv{flex:none;font-weight:800;font-variant-numeric:tabular-nums;font-size:15px}
.led.plus .lv{color:var(--gold-deep)}
:root[data-theme="dark"] .led.plus .lv{color:var(--gold)}
.led.minus .lv{color:var(--ink-2)}

/* ==========================================================================
   discount history — reuses the .led ledger, tints per state
   ========================================================================== */
.disc-sum{display:flex;flex-wrap:wrap;gap:8px}
.disc-sum .dc{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px}
.disc-sum .dc b{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.disc-sum .dc.act b{color:var(--rose-deep)}
.disc-sum .dc.used b{color:var(--sage)}
:root[data-theme="dark"] .disc-sum .dc.used b{color:var(--sage)}
.disc-sum .dc.miss b{color:var(--ink-3)}
.led.d-active .li{color:var(--rose);background:var(--rose-soft);border:1px solid var(--rose-line)}
.led.d-active .lv{color:var(--rose-deep)}
.led.d-used .li{color:var(--sage);background:var(--sage-soft);border:1px solid var(--sage-line)}
.led.d-used .lv{color:var(--sage)}
:root[data-theme="dark"] .led.d-used .li,:root[data-theme="dark"] .led.d-used .lv{color:var(--sage)}
.led.d-missed{opacity:.82}
.led.d-missed .li{color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line)}
.led.d-missed .lc b{color:var(--ink-2)}
.led.d-missed .lv{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}

/* ==========================================================================
   «История скидок» entry link (cabinet discounts section header)
   ========================================================================== */
.seelink{display:inline-flex;align-items:center;gap:3px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;color:var(--rose-deep);background:none;border:0;padding:4px 2px;transition:color var(--d1),transform var(--d1)}
.seelink:hover{color:var(--rose-deep)}
.seelink:active{transform:scale(.96)}
.seelink-c{font-size:14px}

/* ==========================================================================
   in-cabinet booking — service → date → time → confirm → done
   ========================================================================== */
.bk-steps{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 2px}
.bk-step{display:inline-flex;align-items:center;gap:7px;color:var(--ink-3);font-size:12px;font-weight:650}
.bk-dot{width:23px;height:23px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-3)}
.bk-dot .ico{font-size:14px;stroke-width:2.4}
.bk-step.on{color:var(--rose-deep)}
.bk-step.on .bk-dot{border-color:transparent;color:var(--btn-ink);background:linear-gradient(160deg,var(--btn1),var(--btn2));box-shadow:var(--sh-rose)}
.bk-step.done{color:var(--sage)}
.bk-step.done .bk-dot{border-color:transparent;color:#fff;background:linear-gradient(150deg,var(--sage),color-mix(in srgb,var(--sage) 70%,#2c4a24))}
.bk-sep{flex:0 1 24px;height:2px;border-radius:2px;background:var(--line)}
.bk-sl{white-space:nowrap}

.bk-dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px}
.bk-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font:inherit;
  min-height:80px;padding:10px 6px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);
  transition:border-color var(--d2),background var(--d2),box-shadow var(--d2),transform var(--d1);
}
.bk-date:hover{border-color:var(--rose-line);box-shadow:var(--sh-2)}
.bk-date:active{transform:scale(.96)}
.bk-date .dow{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3)}
.bk-date .day{font-size:23px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.bk-date .mon{font-size:11px;color:var(--ink-3)}
.bk-date.tag .dow{color:var(--rose);font-weight:800}

.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px}
.bk-slot{
  display:flex;align-items:center;justify-content:center;cursor:pointer;font:inherit;
  min-height:52px;padding:12px 10px;font-size:15.5px;font-weight:700;letter-spacing:.3px;color:var(--ink);font-variant-numeric:tabular-nums;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-1);
  transition:border-color var(--d2),background var(--d2),box-shadow var(--d2),transform var(--d1),color var(--d2);
}
.bk-slot:hover{border-color:var(--rose-line);box-shadow:var(--sh-2);color:var(--rose-deep)}
.bk-slot:active{transform:scale(.96)}
.booked{border-color:var(--sage-line);background:linear-gradient(150deg,var(--sage-soft),var(--surface))}

/* ==========================================================================
   sticky pay/next dock (procedure-select screen) — slides up on selection
   ========================================================================== */
.srv-screen{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.pay-dock{
  position:fixed;left:50%;bottom:0;z-index:30;width:100%;max-width:480px;
  padding:16px clamp(14px,4vw,20px) calc(15px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--page) 58%,color-mix(in srgb,var(--page) 62%,transparent) 84%,transparent);
  transform:translate(-50%,130%);opacity:0;pointer-events:none;
  transition:transform var(--d3) var(--ease),opacity var(--d3) var(--ease);
}
.pay-dock.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.view>.pay-dock{animation:none}

/* ==========================================================================
   pinned cabinet dock · «Записаться» в скидочной ленте · карточка записи
   ========================================================================== */
@property --wrapa{syntax:"<angle>";initial-value:0deg;inherits:false}
.cab-has-dock{padding-bottom:calc(154px + env(safe-area-inset-bottom))}
.cab-dock{
  position:fixed;left:50%;bottom:0;z-index:30;width:100%;max-width:480px;
  padding:12px clamp(14px,4vw,20px) calc(13px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--page) 60%,color-mix(in srgb,var(--page) 64%,transparent) 86%,transparent);
  transform:translateX(-50%);
}
.cab-dock-hint{text-align:center;font-size:12px;color:var(--gold-deep);margin:0 0 8px;font-weight:600}
.cab-dock-hint b{color:var(--gold-deep);font-weight:800}
.cab-dock-row{display:flex;gap:10px;align-items:stretch}
.cab-dock-row .book-cta{flex:1.35}
.cab-dock-row .pay-cta{flex:1}
.cab-dock-row .btn{min-height:52px;font-size:15px;padding:12px 14px}

/* «обёрнута лентой по кругу» — анимированный золотой бордер + пульс + уголок −N% */
.btn.book-cta.wrapped{
  position:relative;overflow:visible;border:2.5px solid transparent;
  background:
    linear-gradient(160deg,var(--btn1),var(--btn2)) padding-box,
    conic-gradient(from var(--wrapa),var(--gold-deep),var(--gold-soft),var(--gold),#FFF3D2,var(--gold),var(--gold-soft),var(--gold-deep)) border-box;
  animation:wrapspin 3s linear infinite, wrapblink 1.7s ease-in-out infinite;
}
.btn.book-cta.wrapped:hover{filter:brightness(1.06)}
@keyframes wrapspin{to{--wrapa:360deg}}
/* «мигание» — периодическая вспышка яркости + золотое свечение, тянет взгляд к −N% */
@keyframes wrapblink{
  0%,100%{filter:brightness(1);box-shadow:var(--sh-rose),0 0 0 1px color-mix(in srgb,var(--gold) 42%,transparent),0 9px 22px -12px color-mix(in srgb,var(--gold) 55%,transparent)}
  50%{filter:brightness(1.14) saturate(1.06);box-shadow:var(--sh-rose),0 0 0 2px color-mix(in srgb,var(--gold) 90%,transparent),0 16px 36px -10px color-mix(in srgb,var(--gold) 96%,transparent)}
}
.disc-ribbon{
  position:absolute;top:-11px;right:-9px;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  padding:3px 9px;border-radius:11px;color:#3A2708;
  background:linear-gradient(160deg,#FCEAB4,var(--gold));border:1.6px solid #FFF8E8;
  box-shadow:0 5px 13px -3px color-mix(in srgb,var(--gold-deep) 82%,transparent);
  transform:rotate(3deg);animation:ribbonpop 1.7s ease-in-out infinite;
}
.disc-ribbon b{font-size:12.5px;font-weight:900;letter-spacing:.2px}
.disc-ribbon i{font-size:7.5px;font-style:normal;font-weight:800;opacity:.82;margin-top:1px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
@keyframes ribbonpop{0%,100%{transform:rotate(3deg) scale(1)}50%{transform:rotate(3deg) scale(1.09)}}

/* карточка «вы записаны» (будущая/сегодняшняя запись) */
.appt-stack{display:flex;flex-direction:column;gap:12px}
.appt-card{
  display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--surface),var(--surface-2));border:1px solid var(--rose-line);box-shadow:var(--sh-1);
}
.appt-card.is-today{border-color:var(--gold-line);background:linear-gradient(150deg,var(--gold-soft),var(--surface))}
.appt-card .appt-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--rose);background:var(--rose-soft);border:1px solid var(--rose-line);font-size:19px}
.appt-card.is-today .appt-ic{color:var(--gold-deep);background:#fff;border-color:var(--gold-line)}
.appt-card .appt-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.appt-card .appt-tx small{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3)}
.appt-card .appt-when{font-size:16px;font-weight:750;color:var(--ink)}
.appt-card .appt-proc{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* услуга ещё не выбрана мастером (пусто/«хз») — тихий плейсхолдер, ниже по акценту, чем реальная услуга */
.appt-card .appt-proc.tbd{color:var(--ink-3);font-style:italic;font-size:12.5px;opacity:.9}
.appt-card .appt-more{flex:none;font-size:12px;font-weight:800;color:var(--rose);background:var(--rose-soft);border-radius:999px;padding:3px 9px}

/* бонус-строка на экране успешной записи */
.bonus-note{
  display:flex;align-items:center;gap:9px;justify-content:center;padding:11px 14px;border-radius:var(--r-sm);
  background:linear-gradient(150deg,var(--gold-soft),var(--surface));border:1px solid var(--gold-line);color:var(--gold-deep);font-size:13.5px;font-weight:600;
}
.bonus-note b{color:var(--gold-deep);font-weight:850}
.bonus-note .ico{color:var(--gold-deep)}
@media (prefers-reduced-motion: reduce){.btn.book-cta.wrapped,.disc-ribbon{animation:none}}

/* ==========================================================================
   states: spinner / skeleton / empty / error
   ========================================================================== */
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:34px 16px;color:var(--ink-2)}
.state .si{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;color:var(--rose);background:var(--rose-soft);border:1px solid var(--rose-line)}
.state b{color:var(--ink);font-size:15px;font-weight:650}
.state p{margin:0;font-size:13px;max-width:30ch;line-height:1.5}
.empty{font-size:13px;color:var(--ink-3);padding:14px 4px;text-align:center;font-style:italic;font-family:var(--serif)}

.skel{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink-3) 14%,transparent),transparent);transform:translateX(-100%);animation:shimmer 1.3s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel.hero{height:150px;border-radius:var(--r-xl)}
.skel.row{height:74px}
.skel.short{height:48px;width:60%}

/* ==========================================================================
   toast
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(14px);
  z-index:60;max-width:min(420px,92vw);
  background:var(--ink);color:var(--surface);
  font-size:13.5px;font-weight:600;line-height:1.4;
  padding:13px 17px;border-radius:var(--r-sm);
  box-shadow:0 18px 42px -14px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity var(--d2), transform var(--d2) var(--ease);
}
:root[data-theme="dark"] .toast{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ==========================================================================
   footer note
   ========================================================================== */
.footnote{margin-top:8px;text-align:center;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.footnote a{color:var(--rose-deep);text-decoration:none}

/* ==========================================================================
   TEST PANEL — dev tool, only mounted for the test client. Cohesive but
   clearly utilitarian (neutral ink FAB, bottom-sheet). Lives OUTSIDE .app,
   so it keeps the neutral brand accent even while previewing a tier skin.
   ========================================================================== */
.test-fab{
  position:fixed;z-index:45;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;
  font-size:13.5px;font-weight:700;letter-spacing:.2px;
  color:var(--surface);background:var(--ink);border:0;border-radius:var(--r-pill);
  padding:12px 16px;min-height:46px;
  box-shadow:0 16px 30px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  animation:fab-in var(--d3) var(--pop) both;
}
.test-fab:active{transform:translateY(1px) scale(.98)}
@keyframes fab-in{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}

/* ── share modal (invite text + master's VK/Telegram links) ── */
.share-ov{position:fixed;inset:0;z-index:62;display:flex;align-items:center;justify-content:center;padding:18px}
.share-back{position:absolute;inset:0;background:rgba(20,12,10,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade-in var(--d2) both}
.share-card{position:relative;width:100%;max-width:420px;box-sizing:border-box;background:var(--ground);border:1px solid var(--line);border-radius:var(--r-xl);padding:18px;box-shadow:0 24px 60px -22px rgba(0,0,0,.55);animation:sheet-up var(--d3) var(--ease) both;max-height:88dvh;overflow-y:auto}
.share-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.share-hd b{font-size:17px;font-weight:750}
.share-x{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer;font-family:var(--sans)}
.share-x:hover{color:var(--ink);border-color:var(--rose-line)}
.share-sub{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:0 0 12px}
.share-text{width:100%;box-sizing:border-box;font:inherit;font-size:13px;line-height:1.5;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;resize:none;margin-bottom:10px}
.share-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;font:inherit;font-size:14px;font-weight:650;padding:12px;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;margin-bottom:8px}
.share-btn.primary{color:var(--btn-ink);background:linear-gradient(160deg,var(--btn1),var(--btn2));border-color:transparent;box-shadow:var(--sh-rose)}
.share-btn.ghost{flex:1;margin-bottom:0}
.share-btn.plain{background:none;border:none;color:var(--ink-2);font-size:12.5px;margin:4px 0 0;font-weight:600}
.share-btn .ico{font-size:16px}
.share-links{display:flex;gap:8px;margin-bottom:8px}
.share-btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;filter:none}

/* ── tier avatar: metal medallion + escalating emblem (replaces initials) ── */
.tier-ava{overflow:hidden;position:relative}
.tier-ava .ava-ico{font-size:25px;stroke-width:1.6}
.app[data-tier] .tier-ava{background:var(--wal-bg);color:var(--wal-fg);border:1px solid var(--wal-bd);box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.32)}
.app[data-tier="diamond"] .tier-ava{background-size:180% 180%}

/* ── branded review task marks (inline SVG, no external images) ── */
.ai.brand{background:none;border:0;padding:0;overflow:hidden}
.brandmark{width:40px;height:40px;display:block;border-radius:11px}

/* ── review screenshot submission (reuses the .share-* modal shell) ── */
.rv-card{max-width:400px}
.rv-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.rv-filename{font-size:12px;color:var(--ink-3);margin:-2px 0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-preview{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);margin:0 0 10px}
.rv-err{font-size:12.5px;color:var(--urge);font-weight:600;margin:0 0 10px;min-height:1px}
.rv-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:10px 0 2px}
.rv-done .check{width:60px;height:60px}
.rv-done .check .ico{font-size:30px}
.rv-done b{font-size:16px;font-weight:750}
.rv-done p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;max-width:30ch}
.rv-done .share-btn{margin-top:8px;width:auto;padding-left:22px;padding-right:22px}
.test-overlay{position:fixed;inset:0;z-index:58;display:flex;align-items:flex-end;justify-content:center}
/* transparent + non-blocking: the cabinet (esp. the hero wallet) must stay
   visible ABOVE the sheet so skin-preview taps visibly reskin it live */
.test-backdrop{position:absolute;inset:0;background:transparent}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.test-sheet{
  position:relative;width:100%;max-width:480px;max-height:62dvh;overflow-y:auto;
  background:var(--ground);border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:14px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -22px 54px -20px rgba(0,0,0,.5), 0 -2px 0 color-mix(in srgb,var(--ink) 8%, transparent);
  animation:sheet-up var(--d3) var(--ease) both;
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.test-sheet::before{content:"";display:block;width:40px;height:4px;border-radius:99px;background:var(--line);margin:2px auto 12px}
.test-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px}
.test-head b{font-size:16px;font-weight:750;display:block}
.test-head small{font-size:11px;color:var(--ink-3);display:block;margin-top:1px}
.test-close{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:20px;line-height:1;font-family:var(--sans)}
.test-close:hover{color:var(--ink);border-color:var(--rose-line)}
.test-sec{padding:12px 0;border-top:1px solid var(--line)}
.test-lab{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:9px}
.test-note{font-size:10px;letter-spacing:.3px;text-transform:none;font-weight:600;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px}
.test-chips{display:flex;flex-wrap:wrap;gap:7px}
.test-chip{cursor:pointer;font:inherit;font-size:12.5px;font-weight:650;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 13px;transition:color var(--d1),border-color var(--d1),background var(--d1)}
.test-chip:hover{border-color:var(--rose-line);color:var(--ink)}
.test-chip.active{color:var(--btn-ink);background:linear-gradient(160deg,var(--btn1),var(--btn2));border-color:transparent;box-shadow:var(--sh-rose)}
.test-btns{display:flex;flex-wrap:wrap;gap:8px}
.test-btn{flex:1 1 auto;min-width:calc(33.3% - 8px);cursor:pointer;font:inherit;font-size:13px;font-weight:650;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;min-height:46px;transition:border-color var(--d1),transform var(--d1)}
.test-btn:hover{border-color:var(--rose-line)}
.test-btn:active{transform:translateY(1px) scale(.99)}
.test-btn.ghost{color:var(--ink-2)}
.test-btn.danger{flex-basis:100%;color:var(--urge);border-color:var(--urge-line);background:var(--urge-soft);font-weight:700}
.test-hint{margin:14px 0 0;font-size:11.5px;color:var(--ink-2);line-height:1.5;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-sm);padding:10px 12px}

/* ==========================================================================
   a11y + motion + desktop
   ========================================================================== */
:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:8px}
.opt:focus-visible,.srv:focus-visible{outline-offset:-2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition:none !important}
  .check .ico{stroke-dashoffset:0}
}

@media (min-width:520px){
  .app{border-left:1px solid color-mix(in srgb,var(--line) 55%, transparent);border-right:1px solid color-mix(in srgb,var(--line) 55%, transparent);background:color-mix(in srgb,var(--page) 22%, transparent)}
}

/* ==========================================================================
   FONT PREVIEW — 10 премиальных наборов, переключаемых по .app[data-font].
   Только системные/веб-безопасные семейства (CSP запрещает внешние шрифты).
   Тест-аккаунт превьюит локально; админка ставит на постоянку (kv site.font).
   ========================================================================== */
.app[data-font="georgia"]    {--serif:Georgia,"Times New Roman",serif;--sans:Georgia,"Times New Roman",serif}
.app[data-font="palatino"]   {--serif:"Palatino Linotype","Book Antiqua",Palatino,serif;--sans:"Palatino Linotype","Book Antiqua",Palatino,serif}
.app[data-font="didot"]      {--serif:"Didot","Bodoni MT","Playfair Display",Georgia,serif;--sans:"Didot","Bodoni MT",Georgia,serif}
.app[data-font="baskerville"]{--serif:"Baskerville","Libre Baskerville","Hoefler Text",Georgia,serif;--sans:"Baskerville","Libre Baskerville",Georgia,serif}
.app[data-font="garamond"]   {--serif:"Garamond","EB Garamond","Times New Roman",serif;--sans:"Garamond","EB Garamond","Times New Roman",serif}
.app[data-font="times"]      {--serif:"Times New Roman",Times,serif;--sans:"Times New Roman",Times,serif}
.app[data-font="optima"]     {--serif:"Optima","Candara","Segoe UI",sans-serif;--sans:"Optima","Candara","Segoe UI",sans-serif}
.app[data-font="futura"]     {--serif:"Futura","Century Gothic",AppleGothic,sans-serif;--sans:"Futura","Century Gothic",AppleGothic,sans-serif}
.app[data-font="helvetica"]  {--serif:"Helvetica Neue",Helvetica,Arial,sans-serif;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif}
.app[data-font="verdana"]    {--serif:Verdana,Tahoma,Geneva,sans-serif;--sans:Verdana,Tahoma,Geneva,sans-serif}
.app[data-font="cambria"]    {--serif:Cambria,"Hoefler Text",Georgia,serif;--sans:Cambria,"Hoefler Text",Georgia,serif}
.app[data-font="constantia"] {--serif:Constantia,"Palatino Linotype",Georgia,serif;--sans:Constantia,"Palatino Linotype",Georgia,serif}
.app[data-font="candara"]    {--serif:Candara,"Segoe UI","Trebuchet MS",sans-serif;--sans:Candara,"Segoe UI","Trebuchet MS",sans-serif}
.app[data-font="trebuchet"]  {--serif:"Trebuchet MS","Segoe UI",Tahoma,sans-serif;--sans:"Trebuchet MS","Segoe UI",Tahoma,sans-serif}
.app[data-font="rockwell"]   {--serif:Rockwell,"Rockwell Nova","Roboto Slab",Georgia,serif;--sans:Rockwell,"Rockwell Nova","Roboto Slab",Georgia,serif}

/* тест-панель: сетка выбора шрифта */
.tf-fonts{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:8px}
.tf-font{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:13px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.tf-font.on{border-color:var(--rose);background:var(--rose-soft);color:var(--rose-deep);font-weight:600}
.tf-font small{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px}

/* ==========================================================================
   Карточка записи: светящаяся АУРА (не забыть) + кнопки-состояния
   ========================================================================== */
.appt-card{flex-wrap:wrap}
.appt-card.aura{
  border-color:var(--rose-line);
  animation:apptaura 2.6s ease-in-out infinite;
}
@keyframes apptaura{
  0%,100%{box-shadow:var(--sh-1),0 0 0 2px color-mix(in srgb,var(--rose) 15%,transparent),0 8px 26px -12px color-mix(in srgb,var(--rose) 42%,transparent)}
  50%{box-shadow:var(--sh-1),0 0 0 4px color-mix(in srgb,var(--rose) 28%,transparent),0 15px 42px -12px color-mix(in srgb,var(--rose) 62%,transparent)}
}
.appt-card.aura.confirmed{border-color:var(--sage-line);animation:apptauraok 2.9s ease-in-out infinite}
@keyframes apptauraok{
  0%,100%{box-shadow:var(--sh-1),0 0 0 2px color-mix(in srgb,var(--sage) 16%,transparent),0 8px 26px -12px color-mix(in srgb,var(--sage) 38%,transparent)}
  50%{box-shadow:var(--sh-1),0 0 0 4px color-mix(in srgb,var(--sage) 30%,transparent),0 15px 42px -12px color-mix(in srgb,var(--sage) 56%,transparent)}
}
.appt-ok{color:var(--sage);font-weight:800;font-size:10.5px;letter-spacing:.2px}
.appt-acts{display:flex;gap:8px;flex-basis:100%;width:100%;margin-top:12px}
.appt-acts .btn{min-height:46px;font-size:14px;padding:10px 12px;flex:1;white-space:nowrap}
.appt-confirm{background:linear-gradient(160deg,var(--sage),#4E7A4C);color:#fff;border:0;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--sage) 80%,transparent)}
.appt-confirm:hover{filter:brightness(1.05)}
.appt-pay{min-height:50px !important;font-size:15px !important}
@media (prefers-reduced-motion: reduce){.appt-card.aura,.appt-card.aura.confirmed{animation:none}}

/* заголовок зоны в списке услуг */
.srv-zone{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--rose-deep);
  padding:12px 4px 4px;letter-spacing:.2px;position:relative}
.srv-zone:first-child{padding-top:2px}
.srv-list .srv-zone+.srv{margin-top:2px}

/* отмена записи */
.appt-cancel-link{flex-basis:100%;display:block;margin:9px auto 0;background:none;border:0;
  color:var(--ink-3);font:inherit;font-size:12.5px;cursor:pointer;padding:4px;text-align:center;
  text-decoration:underline;text-underline-offset:2px}
.appt-cancel-link:hover{color:var(--urge)}
.appt-card.cancelling{animation:none;border-color:var(--urge-line)}
.appt-cancel-confirm{display:flex;flex-direction:column;gap:9px;flex-basis:100%;width:100%}
.acc-h{display:flex;align-items:center;gap:8px;font-weight:750;font-size:16px;color:var(--ink)}
.acc-h .ico{color:var(--urge)}
.acc-p{font-size:13px;color:var(--ink-2);line-height:1.5}
.acc-p b{color:var(--urge);font-weight:800}
.btn.danger{background:linear-gradient(160deg,var(--urge),#9E3A2C);color:#fff;border:0;
  box-shadow:0 12px 24px -14px color-mix(in srgb,var(--urge) 82%,transparent)}
.btn.danger:hover{filter:brightness(1.05)}

/* ── Mini App: пульсирующая КРАСНАЯ кнопка «Разрешить сообщения» + карточки заданий ── */
@keyframes pulse-red{
  0%{box-shadow:0 0 0 0 rgba(229,48,43,.55), 0 12px 26px -12px rgba(229,48,43,.85)}
  70%{box-shadow:0 0 0 15px rgba(229,48,43,0), 0 12px 26px -12px rgba(229,48,43,.85)}
  100%{box-shadow:0 0 0 0 rgba(229,48,43,0), 0 12px 26px -12px rgba(229,48,43,.85)}
}
.vk-allow-native.pulse{
  background:linear-gradient(150deg,#F1544B,#E5302B);
  box-shadow:0 12px 26px -12px rgba(229,48,43,.85);
  animation:pulse-red 1.35s ease-out infinite;
}
.vk-allow-native.pulse:active{animation:none;transform:scale(.985)}
.cb-gate.msg-cta{border-color:#F0B3AE;background:linear-gradient(150deg,color-mix(in srgb,#E5302B 8%,var(--surface)),var(--surface))}
.cb-gate.msg-cta .cb-gate-ic{background:linear-gradient(150deg,#F1544B,#E5302B)}

.ma-tasks{display:flex;flex-direction:column;gap:12px}
.ma-task{position:relative;display:grid;grid-template-columns:46px 1fr;grid-template-areas:"ic tx" "btn btn";gap:4px 13px;align-items:center;
  padding:16px 15px;border-radius:var(--r-md);border:1px solid var(--gold-line);
  background:linear-gradient(150deg,color-mix(in srgb,var(--gold-soft) 72%,var(--surface)),var(--surface));
  box-shadow:var(--sh-1)}
.ma-task-ic{grid-area:ic;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold),var(--gold-deep));color:#fff;box-shadow:var(--sh-gold)}
.ma-task-ic .ico{font-size:23px}
.ma-task-tx{grid-area:tx;min-width:0}
.ma-task-tx b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.ma-task-tx p{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.ma-task-btn{grid-area:btn;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;border:none;border-radius:13px;cursor:pointer;
  background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:#2A1D08;font-size:15px;font-weight:700;
  box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.22);transition:transform .12s}
.ma-task-btn:active{transform:scale(.98)}
.ma-task-btn.is-busy{opacity:.6;pointer-events:none}
.ma-task-bonus{position:absolute;top:-11px;right:14px;z-index:3;display:flex;flex-direction:column;align-items:center;
  padding:5px 9px;border-radius:12px;background:linear-gradient(150deg,#3BA55D,#2E8B4E);color:#fff;box-shadow:0 9px 18px -9px rgba(46,139,78,.75)}
.ma-task-bonus b{font-size:14px;font-weight:800;line-height:1}
.ma-task-bonus i{font-size:8px;font-style:normal;text-transform:uppercase;letter-spacing:.6px;opacity:.9;margin-top:1px}
:root[data-theme="dark"] .ma-task-btn{color:#22160a}

/* ── Mini App: мигание кнопки «Записаться» под кешбэком (attention) ── */
@keyframes book-blink{
  0%,100%{box-shadow:var(--sh-1)}
  50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 34%,transparent), var(--sh-gold)}
}
.book-cta.blink{animation:book-blink 1.5s ease-in-out infinite}
.book-cta.blink:active{animation:none;transform:scale(.985)}

/* ── Первое посещение −20%: перечёркнутая цена + баннер + авто-выбранная скидка ── */
.sp-welcome{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.sp-welcome .sp-old{font-size:12px;color:var(--ink-3);text-decoration:line-through;opacity:.72}
.sp-welcome .sp-new{font-size:15px;font-weight:800;color:var(--gold-deep)}
.welcome-banner{display:flex;gap:11px;align-items:center;padding:13px 15px;border-radius:var(--r-md);
  border:1px solid var(--gold-line);background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 12%,var(--surface)),var(--surface));box-shadow:var(--sh-1)}
.welcome-banner .ico{font-size:22px;color:var(--gold-deep)}
.welcome-banner b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.welcome-banner small{font-size:12px;color:var(--ink-3)}
.opt.opt-welcome{border-color:var(--gold-line);background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 9%,var(--surface)),var(--surface))}
:root[data-theme="dark"] .sp-welcome .sp-new{color:var(--gold-deep)}
/* абонемент-выгода: экономия относительно поштучной цены услуги (renderBuySub) */
.srv .sub-save{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;
  margin-top:6px;padding:3px 9px;border-radius:999px;border:1px solid var(--rose-line);
  background:color-mix(in srgb, var(--rose) 18%, var(--surface));
  color:var(--rose-deep);font-weight:800;font-size:11px;line-height:1.35;
  font-variant-numeric:tabular-nums;letter-spacing:.1px;white-space:nowrap}
.srv[aria-checked="true"] .sub-save{border-color:var(--rose);
  background:color-mix(in srgb, var(--rose) 26%, var(--surface))}
:root[data-theme="dark"] .welcome-banner .ico{color:var(--gold-deep)}

/* ── Премиум-стиль начальных экранов Mini App (согласие / регистрация / подтверждение) ──
   VG-медальон вместо VK-синего бокса (VK-иконок в аппке нет, правило 3.6.4), тёплая rose/gold
   палитра, центрированный serif-заголовок, золотой eyebrow и разделитель. Только .auth--premium
   (обычный сайт/кабинет не трогаем). */
.auth--premium{gap:20px;padding-top:8px}
.auth--premium .auth-hero{align-items:center;text-align:center;gap:11px}
.brand-badge{
  width:80px;height:80px;border-radius:50%;margin:2px auto;position:relative;
  display:grid;place-items:center;
  background:radial-gradient(118% 118% at 32% 24%, color-mix(in srgb,var(--surface) 95%, #fff), var(--surface-2));
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--gold) 48%, transparent),
    0 0 0 7px color-mix(in srgb,var(--gold-soft) 52%, transparent),
    var(--sh-2);
}
.brand-badge::after{
  content:"";position:absolute;inset:7px;border-radius:50%;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--gold) 38%, transparent);
}
.brand-badge .mono{
  width:46px;height:46px;font-size:0;line-height:0;   /* прячем текст «VG» — рисуем SVG-монограмму */
  background:url("/static/cabinet/gv-mono.svg") center/contain no-repeat;
}
.brand-eyebrow{
  margin:0;font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-deep);
}
.auth--premium .hero-kick{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;line-height:1.14}
.auth--premium .lede{margin-inline:auto;color:var(--ink-2)}
.auth--premium .auth-hero::after{
  content:"";width:46px;height:1px;margin:3px auto 0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 62%, transparent),transparent);
}
.auth--premium .consent-note,.auth--premium .form-note{justify-content:center;text-align:center}

/* Приветствие: свежее VK-фото клиента в аватаре (мини-апп) вместо эмблемы — через <img>
   (img-src 'self', без CSSOM background-image, который капризничал под CSP VK-WebView) */
.avatar.has-vk-photo .ava-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%;display:block}
.avatar.has-vk-photo .ava-ico{display:none}

/* ── Промокод #45: превью-перечёркивание ДО оплаты (старая цена → новая), стиль welcome ── */
.promo-preview{display:inline-flex;align-items:baseline;gap:7px;margin-top:4px;line-height:1.1}
.promo-preview .pp-old{font-size:12.5px;color:var(--ink-3);text-decoration:line-through;opacity:.72;font-weight:600}
.promo-preview .pp-arrow{color:var(--ink-3);font-size:12px;font-weight:700}
.promo-preview .pp-new{font-size:15.5px;font-weight:800;color:var(--gold-deep)}
:root[data-theme="dark"] .promo-preview .pp-new{color:var(--gold-deep)}

/* ==========================================================================
   GIFT UX — единый премиум-редизайн (giftshare · giftclaim · праздничная
   активация · карточки «подарок отправлен/получен» · состояния повторного
   открытия ссылки). Тема через токены (light/dark). CSP-safe: без inline-стилей.
   Вся анимация уважает prefers-reduced-motion.
   ========================================================================== */

/* ---- общий премиум-герой подарка (шапка giftshare + giftclaim) ---- */
.gift-hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:24px 18px 20px;border-radius:var(--r-xl);
  border:1px solid var(--gold-line);
  background:
    radial-gradient(120% 82% at 50% -12%, color-mix(in srgb,var(--gold-soft) 82%, transparent), transparent 70%),
    linear-gradient(162deg,var(--gold-soft),var(--surface));
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.4);
}
.gift-hero > *{position:relative;z-index:1}

/* festive gold orb (заменяет плоский rose-orb для экранов подарка) */
.gift-orb{
  position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:38px;
  background:linear-gradient(140deg,var(--gold),var(--gold-deep));
  box-shadow:var(--sh-gold), inset 0 2px 0 rgba(255,255,255,.42);
  animation:pop-in var(--d4) var(--pop) both;
}
.gift-orb .ico{position:relative;z-index:1}
.gift-orb::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--gold) 66%, transparent);
  opacity:0;animation:pulse-ring 2.4s ease-out infinite;
}
.gift-orb .spark{position:absolute;z-index:2;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));animation:twinkle 1.9s ease-in-out infinite}
.gift-orb .spark.s1{top:-3px;right:0;font-size:15px}
.gift-orb .spark.s2{bottom:-1px;left:-3px;font-size:12px;animation-delay:.75s}

.gift-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-deep)}
.gift-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,7vw,30px);line-height:1.1;color:var(--ink);margin:0;text-wrap:balance}
.gift-from{margin:0;font-size:14px;color:var(--ink-2)}

/* «приз» — крупное имя услуги: сердце экрана приёма («Ваш подарок: <услуга>») */
.gift-prize{
  position:relative;overflow:hidden;width:100%;box-sizing:border-box;margin-top:2px;
  padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--gold-line);text-align:center;
  background:
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 66%),
    linear-gradient(150deg,color-mix(in srgb,var(--gold-soft) 90%,var(--surface)),var(--surface));
  background-repeat:no-repeat;background-size:220% 100%, auto;background-position:135% 0, 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  animation:gift-sheen 5.5s ease-in-out infinite;
}
:root[data-theme="dark"] .gift-prize{background-image:
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 66%),
    linear-gradient(150deg,color-mix(in srgb,var(--gold-soft) 90%,var(--surface)),var(--surface))}
@keyframes gift-sheen{0%,100%{background-position:135% 0,0 0}55%{background-position:-35% 0,0 0}}
.gift-prize .lab{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-deep);opacity:.92}
.gift-prize .name{display:block;margin-top:3px;font-family:var(--serif);font-weight:700;font-size:clamp(19px,5.6vw,23px);line-height:1.16;color:var(--ink);text-wrap:balance}

/* ЗАМЕТНАЯ плашка «подарить можно потом» (owner: у редиректа — сверху, не сноской) */
.gift-reassure{
  display:flex;align-items:flex-start;gap:11px;width:100%;box-sizing:border-box;
  padding:13px 15px;border-radius:var(--r-lg);border:1px solid var(--rose-line);
  background:linear-gradient(150deg,var(--rose-soft),var(--surface));box-shadow:var(--sh-1);
}
.gift-reassure .ico{color:var(--rose);font-size:20px;flex:none;margin-top:1px}
.gift-reassure b{display:block;font-size:14px;color:var(--ink);font-weight:750;margin-bottom:2px}
.gift-reassure span{font-size:12.5px;color:var(--ink-2);line-height:1.45}

/* «Как подарить» — премиум-шаги с золотыми номерами */
.gift-steps{display:flex;flex-direction:column;counter-reset:gstep}
.gift-step{display:flex;align-items:center;gap:12px;padding:10px 0}
.gift-step:not(:last-child){border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
.gift-step .n{
  counter-increment:gstep;flex:none;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:var(--gold-deep);
  background:var(--gold-soft);border:1px solid var(--gold-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.gift-step .n::before{content:counter(gstep)}
.gift-step p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.4}

/* карточка-ссылка на giftshare (переиспользуем .gift-link-box, добавляем действия) */
.gift-share-actions{display:flex;flex-direction:column;gap:8px}

/* ---- праздничная активация (после «Забрать подарок») ---- */
.gift-celebrate{position:relative}
.celebrate-hero{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:28px 18px 22px;border-radius:var(--r-xl);border:1px solid var(--gold-line);overflow:hidden;
  background:
    radial-gradient(120% 82% at 50% -12%, color-mix(in srgb,var(--gold-soft) 85%,transparent), transparent 70%),
    linear-gradient(162deg,var(--gold-soft),var(--surface));
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.4);
}
.reveal-orb{
  position:relative;width:90px;height:90px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:41px;
  background:linear-gradient(140deg,var(--gold),var(--gold-deep));
  box-shadow:var(--sh-gold), inset 0 2px 0 rgba(255,255,255,.44);
  animation:reveal-pop .72s var(--pop) both;
}
.reveal-orb .ico{position:relative;z-index:1}
@keyframes reveal-pop{0%{opacity:0;transform:scale(.4) rotate(-12deg)}62%{transform:scale(1.12) rotate(5deg)}100%{opacity:1;transform:none}}
.celebrate-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.9px;text-transform:uppercase;color:var(--gold-deep)}
.celebrate-h{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,7.6vw,32px);line-height:1.08;color:var(--ink);margin:0}
.celebrate-sub{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.celebrate-prize{font-family:var(--serif);font-weight:700;font-size:clamp(21px,6.2vw,26px);line-height:1.15;color:var(--gold-deep);text-wrap:balance}
.celebrate-note{margin:4px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5;max-width:34ch}

/* конфетти — CSP-safe (позиция/цвет/тайминг только в классах, JS кладёт пустые <i>) */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit}
.confetti i{
  position:absolute;top:-6%;width:8px;height:13px;border-radius:2px;opacity:0;
  will-change:transform,opacity;animation-timing-function:cubic-bezier(.3,.55,.45,1);
  animation-iteration-count:1;animation-fill-mode:forwards;
}
@keyframes conf-a{0%{opacity:0;transform:translate3d(0,-24px,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate3d(-24px,340px,0) rotate(540deg)}}
@keyframes conf-b{0%{opacity:0;transform:translate3d(0,-24px,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate3d(6px,360px,0) rotate(-600deg)}}
@keyframes conf-c{0%{opacity:0;transform:translate3d(0,-24px,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate3d(26px,344px,0) rotate(640deg)}}
.confetti i:nth-child(1){left:6%;background:var(--rose);animation-name:conf-a;animation-delay:0s;animation-duration:2.8s}
.confetti i:nth-child(2){left:14%;background:var(--gold);animation-name:conf-b;animation-delay:.25s;animation-duration:3s}
.confetti i:nth-child(3){left:22%;background:var(--sage);animation-name:conf-c;animation-delay:.1s;animation-duration:2.6s}
.confetti i:nth-child(4){left:30%;background:var(--rose-deep);animation-name:conf-a;animation-delay:.4s;animation-duration:3.2s}
.confetti i:nth-child(5){left:38%;background:var(--gold-deep);animation-name:conf-b;animation-delay:.05s;animation-duration:2.7s}
.confetti i:nth-child(6){left:46%;background:var(--rose);animation-name:conf-c;animation-delay:.55s;animation-duration:3s}
.confetti i:nth-child(7){left:54%;background:var(--gold);animation-name:conf-a;animation-delay:.18s;animation-duration:2.9s}
.confetti i:nth-child(8){left:62%;background:var(--sage);animation-name:conf-b;animation-delay:.48s;animation-duration:3.3s}
.confetti i:nth-child(9){left:70%;background:var(--rose-deep);animation-name:conf-c;animation-delay:0s;animation-duration:2.6s}
.confetti i:nth-child(10){left:78%;background:var(--gold-deep);animation-name:conf-a;animation-delay:.6s;animation-duration:3.1s}
.confetti i:nth-child(11){left:86%;background:var(--rose);animation-name:conf-b;animation-delay:.22s;animation-duration:2.8s}
.confetti i:nth-child(12){left:94%;background:var(--gold);animation-name:conf-c;animation-delay:.38s;animation-duration:3s}
.confetti i:nth-child(13){left:10%;background:var(--sage);animation-name:conf-b;animation-delay:.7s;animation-duration:3.2s}
.confetti i:nth-child(14){left:26%;background:var(--rose-deep);animation-name:conf-c;animation-delay:.3s;animation-duration:2.7s}
.confetti i:nth-child(15){left:42%;background:var(--gold-deep);animation-name:conf-a;animation-delay:.8s;animation-duration:3.1s}
.confetti i:nth-child(16){left:58%;background:var(--rose);animation-name:conf-b;animation-delay:.12s;animation-duration:2.9s}
.confetti i:nth-child(17){left:74%;background:var(--gold);animation-name:conf-c;animation-delay:.66s;animation-duration:3.3s}
.confetti i:nth-child(18){left:90%;background:var(--sage);animation-name:conf-a;animation-delay:.44s;animation-duration:2.8s}

/* ---- состояния повторного открытия ссылки (уже активирован / использован / оплата) ---- */
.gift-state{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:24px 18px;border-radius:var(--r-xl);border:1px solid var(--line);
  background:linear-gradient(160deg,var(--surface),var(--surface-2));box-shadow:var(--sh-1);
}
.state-orb{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:35px;
  color:var(--rose);background:var(--rose-soft);border:1px solid var(--rose-line);
  animation:pop-in var(--d4) var(--pop) both;
}
.gift-state.done .state-orb{color:var(--sage);background:var(--sage-soft);border-color:var(--sage-line)}
.gift-state.gold .state-orb{color:var(--gold-deep);background:var(--gold-soft);border-color:var(--gold-line)}
.gift-state h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,6.4vw,27px);line-height:1.12;color:var(--ink);margin:0;text-wrap:balance}
.gift-state p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5;max-width:32ch}

/* ---- премиум-карточка «ПОДАРОК готов к отправке / ждёт отправки» (в ЛК дарителя) ---- */
.gift-card.sent{
  padding-top:23px;                    /* место под ленту-бирку «ПОДАРОК», чтобы не перекрывала текст */
  border-color:var(--gold-line);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb,var(--gold-soft) 55%,transparent), transparent 60%),
    linear-gradient(150deg,var(--gold-soft),var(--surface));
}
.gift-ribbon{
  position:absolute;top:0;right:14px;z-index:2;display:flex;align-items:center;gap:4px;
  padding:3px 9px 4px;border-radius:0 0 9px 9px;line-height:1;
  font-size:9.5px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:#3A2708;
  background:linear-gradient(160deg,#FCEAB4,var(--gold));border:1px solid #FFF8E8;border-top:0;
  box-shadow:0 5px 12px -4px color-mix(in srgb,var(--gold-deep) 78%,transparent);
}
.gift-ribbon .ico{font-size:11px}
.gift-card.sent .gift-ic{background:linear-gradient(140deg,var(--gold),var(--gold-deep))}
.gift-card.sent.done{border-color:var(--sage-line);background:linear-gradient(150deg,var(--sage-soft),var(--surface))}
.gift-card.sent.done .gift-ic{background:linear-gradient(140deg,var(--sage),color-mix(in srgb,var(--sage) 70%,#2c4a24))}
.gift-card.sent.done .gift-tx small{color:var(--sage)}
.gift-card.sent .gift-reshare{margin-top:8px;align-self:flex-start}

@media (prefers-reduced-motion: reduce){
  .confetti{display:none}
  .gift-orb,.gift-orb::after,.gift-orb .spark,.reveal-orb,.gift-prize,.state-orb{animation:none}
  .gift-prize{background-position:0 0,0 0}
}