/* ============================================================
   GLASS-CANON (2026-08-21 Standard) · Pure CSS Utilities
   ============================================================ */

/* 1. Primary Glass Surface (Outer Card, Modal, Sheet, Drawer, Panel) */
.glass-surface {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-panel);
  isolation: isolate;
  transform: translateZ(0);
}

.glass-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s ease;
}

/* 1a. Скляне тіло з власним скролом.
   Rim у ::before — absolute всередині скрол-контейнера, тому за overflow на самому тілі
   він їде разом з контентом і обривається посеред модалки. Тіло не скролиться —
   скролиться внутрішній шар .glass-scroll-body, а rim лишається на рамці.
   Абсолютні елементи (кнопка закриття) лишаються прямими дітьми тіла. */
.glass-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.glass-scroll-body {
  overflow-y: auto;
  min-height: 0;
}

.glass-surface-hub {
  position: relative;
  background: rgba(var(--cigi-amber-rgb), 0.08);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-panel);
}

.glass-surface-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border);
  background: var(--cigi-rim);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s ease;
}

/* 2. Nested Passive Glass Layer (List Row, Item Box, Chip, Tag, Field) */
.glass-nested {
  position: relative;
  background: var(--glass-bg-nested);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-card);
}

.glass-nested::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border);
  background: var(--rim-white-soft);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s ease;
}

/* Тонована вкладена картка (перенос замовлення, Борис 11.10): тон --tint-rgb, сила --tint-a; фон і обод у колір, без glow. */
.glass-nested.glass-tint { background: rgba(var(--tint-rgb), var(--tint-a, 0.14)); }
.glass-nested.glass-tint::before {
  background: linear-gradient(90deg, rgba(var(--tint-rgb), 0.9) 0%, rgba(var(--tint-rgb), .34) 25%, rgba(var(--tint-rgb), .34) 75%, rgba(var(--tint-rgb), 0.9) 100%);
}

/* 3. Interactive Glass Button / Control */
.glass-btn {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(10px) var(--glass-dim);
  -webkit-backdrop-filter: blur(10px) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-sm);
  text-shadow: var(--text-shadow-glass);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1), background .35s;
}

.glass-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s;
}

@media (hover: hover) {
  .glass-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: var(--glass-shadow);
  }
}

.glass-btn:hover::before {
  opacity: 1;
}

/* Шапка вітрини стоїть на чорному затемненні: склу нічого заломлювати, видно лише обідок —
   тож у шапці він на повну (власник 08.10.2026: капсули «Каталог» і лого зливались з чорним). */
.cigi-topbar .glass-btn::before {
  opacity: 1;
}

/* Шапка над яскравим героєм (червоний Marlboro): без brightness-затемнення логотип давав 3.4:1 — заливку шапки піднято .14 → .42 (≥4.5:1, замір 12.10). */
.cigi-topbar { --glass-bg: rgba(40, 40, 44, 0.42); --round-bg: var(--glass-bg); }

/* Скляна кнопка, що не має «плавати»: плаваючі плашки поверх контенту від
   підйому/просідання на hover виглядають як стрибок, а не як відгук. */
.glass-btn.glass-btn-static:hover,
.glass-btn.glass-btn-static:active {
  transform: none;
}

/* Скляні капсули — за типом вводу (Борис 13.10, еталон preview/cigi-ds/approved/capsule-glass-button-*):
   ПК — наведення −1px і трохи більша, натискання +1px і трохи менша; телефон — без росту, ×0.97 і світліша, поки палець на кнопці.
   Кругові (.glass-round), каса (.liquid-press) і плашки (.glass-btn-static) мають своє. */
:is(.glass-btn, .glass-btn-gold, .glass-btn-telegram, .btn-secondary, .cigi-modal-alert-btn-secondary,
    .btn-negative, .cigi-modal-alert-btn-danger, .cigi-modal-alert-btn-gold):not(.glass-round, .glass-btn-static, .liquid-press) {
  --cap-up: 1.02;
  --cap-down: .98;
  -webkit-tap-highlight-color: transparent;
  /* сильніше за utility transition-colors / transition-all на кнопці, інакше рух стрибком */
  transition-property: transform, box-shadow, background, color, opacity, width, max-width, margin, padding;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* ponytail: еталон — рівно ±1px на бік на будь-якій ширині; CSS не знає ширину кнопки, тож дві сходинки:
   вузькі ×1.02/×0.98 (≈±1–2px), широкі ×1.005/×0.995 (≈±1px на 358). Широка, розтягнута гридом без класу, візьме вузьку сходинку. */
:is(.glass-btn, .glass-btn-gold, .glass-btn-telegram):is(.w-full, .flex-1),
:is(.btn-secondary, .cigi-modal-alert-btn-secondary, .btn-negative, .cigi-modal-alert-btn-danger, .cigi-modal-alert-btn-gold):not(.glass-round) {
  --cap-up: 1.005;
  --cap-down: .995;
}

@media (hover: hover) {
  :is(.glass-btn, .glass-btn-gold, .glass-btn-telegram, .btn-secondary, .cigi-modal-alert-btn-secondary,
      .btn-negative, .cigi-modal-alert-btn-danger, .cigi-modal-alert-btn-gold):not(.glass-round, .glass-btn-static, .liquid-press, :disabled):hover {
    transform: translateY(-1px) scale(var(--cap-up));
  }
  :is(.glass-btn, .glass-btn-gold, .glass-btn-telegram, .btn-secondary, .cigi-modal-alert-btn-secondary,
      .btn-negative, .cigi-modal-alert-btn-danger, .cigi-modal-alert-btn-gold):not(.glass-round, .glass-btn-static, .liquid-press, :disabled):active {
    transform: translateY(1px) scale(var(--cap-down));
  }
}

@media (hover: none) {
  :is(.glass-btn, .glass-btn-gold, .glass-btn-telegram, .btn-secondary, .cigi-modal-alert-btn-secondary,
      .btn-negative, .cigi-modal-alert-btn-danger, .cigi-modal-alert-btn-gold):not(.glass-round, .glass-btn-static, .liquid-press, :disabled):active {
    transform: scale(.97);
    transition: transform .15s cubic-bezier(.4, 0, .2, 1), background .06s linear;
  }
  :is(.glass-btn, .btn-secondary, .cigi-modal-alert-btn-secondary):not(.glass-btn-semantic, .glass-round, :disabled):active { background: rgba(255, 255, 255, .10); }
  .glass-btn-semantic:not(.glass-round, :disabled):active { background: rgba(var(--button-rgb), .22); }
  :is(.glass-btn-gold, .cigi-modal-alert-btn-gold):not(.glass-round, :disabled):active { background: rgba(var(--cigi-accent-rgb), .2); }
  .glass-btn-telegram:not(.glass-btn-semantic, .glass-round, :disabled):active { background: rgba(34, 158, 217, .28); }
}

/* Капсула-кнопка ДС (Capsule з onClick: ТТН, номер картки) — те саме натискання, що в капсул вище (Борис 13.10): ПК ±1px, телефон ×0.97 і світліша. */
.cigi-capsule-press {
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), background .35s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
  .cigi-capsule-press:hover { transform: translateY(-1px) scale(1.005); }
  .cigi-capsule-press:active { transform: translateY(1px) scale(.995); }
}
@media (hover: none) {
  .cigi-capsule-press:active { transform: scale(.97); background: rgba(255, 255, 255, .10); transition: transform .15s cubic-bezier(.4, 0, .2, 1), background .06s linear; }
}

/* Фокус з клавіатури — янтарна кромка, як у полів (DESIGN_SYSTEM: «фокус поля — янтарная кромка»); мишею/пальцем не видно. */
:is(.glass-btn, .glass-btn-gold, .glass-btn-telegram, .btn-secondary, .btn-negative, .glass-round, .cigi-capsule-press, .top-sheet-pill):focus-visible {
  outline: 2px solid var(--cigi-accent);
  outline-offset: 2px;
}

/* Скло круглої = еталон (Фігма NEW CIGI 2101:4336, preview/cigi-ds/approved/round-glass-button-pc, Борис 15.10):
   легкий тон, blur 8, тонка conic-кромка .75px — блік зверху зліва (315°) і знизу справа (135°).
   Кромка йде через --rim-white: світло курсора (src/lib/glassLight.ts) пише свій інлайн і перебиває еталон, лише поки миша поруч.
   Кольорові (.glass-btn-semantic, .glass-btn-gold) тримають своє скло. Стоїть ДО руху: hover/active мають ту ж специфічність і перебивають тінь.
   Шапка вітрини піднімає заливку для контрасту — --round-bg (див. .cigi-topbar). */
.glass-round { --rim-rgb: 255, 255, 255; } /* слабке правило: стани ok/err перебивають колір кромки */
:is(.glass-btn, .glass-nested).glass-round:not(.glass-btn-semantic, .glass-btn-gold) {
  --glass-border: .75px;
  /* .glass-nested малює кромку через --rim-white-soft, а той вирахуваний на :root — перевизначаємо тут, інакше блок лишається без бліку */
  --rim-white-soft: var(--rim-white);
  --rim-white: conic-gradient(rgba(var(--rim-rgb), .22) 0deg, rgba(var(--rim-rgb), .03) 45deg, rgba(var(--rim-rgb), .22) 95deg, rgba(var(--rim-rgb), .8) 135deg, rgba(var(--rim-rgb), .22) 175deg, rgba(var(--rim-rgb), .03) 225deg, rgba(var(--rim-rgb), .3) 275deg, rgba(var(--rim-rgb), 1) 315deg, rgba(var(--rim-rgb), .3) 355deg, rgba(var(--rim-rgb), .22) 360deg);
  background: linear-gradient(var(--round-tint, transparent), var(--round-tint, transparent)), var(--round-bg, rgba(0, 0, 0, .15));
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
:is(.glass-btn, .glass-nested).glass-round:not(.glass-btn-semantic, .glass-btn-gold)::before { mix-blend-mode: screen; }
@media (prefers-reduced-transparency: reduce) {
  :is(.glass-btn, .glass-nested).glass-round:not(.glass-btn-semantic, .glass-btn-gold) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(var(--round-tint, transparent), var(--round-tint, transparent)), #2a2420;
  }
}

/* Круглі скляні кнопки — за типом вводу, не за шириною екрана (Борис 13.10, еталон
   preview/cigi-ds/approved/round-glass-button-*). Явний клас .glass-round на .glass-btn / .glass-nested;
   капсули його не мають і лишаються на правилах вище. Кольорові (.glass-btn-semantic, .glass-btn-gold) — лише transform/тінь,
   фон і колір не чіпаємо. Каса (.liquid-press) має своє нажаття, див. .liquid-press-round. */
.glass-round,
.glass-round:active {
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1), background .35s cubic-bezier(.4, 0, .2, 1), color .35s cubic-bezier(.4, 0, .2, 1);
}

@media (hover: none) {
  .glass-round:not(:disabled, [aria-busy="true"], .glass-btn-ok, .glass-btn-err):hover { transform: none; }
  .glass-round:not(:disabled, [aria-busy="true"], .glass-btn-ok, .glass-btn-err):active { transform: scale(1.25); z-index: 2; box-shadow: 0 8px 20px rgba(0, 0, 0, .20); }
  .glass-round:not(:disabled, [aria-busy="true"], .glass-btn-ok, .glass-btn-err):not(.glass-btn-semantic, .glass-btn-gold):active {
    background: linear-gradient(rgba(255, 255, 255, .10), rgba(255, 255, 255, .10)), rgba(0, 0, 0, .15);
    color: #fff;
  }
}

@media (hover: hover) {
  .glass-round:not(:disabled, [aria-busy="true"], .glass-btn-ok, .glass-btn-err):hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 8px 20px rgba(0, 0, 0, .20); }
  .glass-round:not(:disabled, [aria-busy="true"], .glass-btn-ok, .glass-btn-err):active { transform: translateY(1px) scale(.96); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
  .glass-round:not(:disabled, [aria-busy="true"], .glass-btn-ok, .glass-btn-err):not(.glass-btn-semantic, .glass-btn-gold):is(:hover, :active) {
    background: linear-gradient(rgba(255, 255, 255, .10), rgba(255, 255, 255, .10)), rgba(0, 0, 0, .15);
    color: #fff;
  }
}

/* Стани круглої (GlassIconButton status): завантаження — спінер, успіх/помилка — тон, кромка й іконка в колір. */
.glass-round[aria-busy="true"] { cursor: progress; }
.glass-round.glass-btn-ok { --rim-rgb: var(--green-rgb); --round-tint: rgba(var(--green-rgb), .14); color: rgb(var(--green-rgb)); animation: glass-round-pop .35s cubic-bezier(.2, .8, .2, 1); }
.glass-round.glass-btn-err { --rim-rgb: var(--red-rgb); --round-tint: rgba(var(--red-rgb), .14); color: rgb(var(--red-rgb)); animation: glass-round-shake .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes glass-round-pop { 40% { transform: scale(1.08); } }
@keyframes glass-round-shake { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { .glass-round.glass-btn-ok, .glass-round.glass-btn-err { animation: none; } }

/* Semantic outline buttons: tint, rim, text and icon share one color. */
.glass-btn-semantic {
  color: rgb(var(--button-rgb));
  /* те саме скло, що в «До каталогу», лише в семантичному відтінку:
     заливка кольору + власне затемнення blur-фільтра дають об'єм */
  background: rgba(var(--button-rgb), 0.14);
  backdrop-filter: blur(15px) var(--glass-dim);
  -webkit-backdrop-filter: blur(15px) var(--glass-dim);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.glass-btn-semantic::before {
  background: linear-gradient(90deg, rgba(var(--button-rgb), 0.9) 0%, rgba(var(--button-rgb), .34) 25%, rgba(var(--button-rgb), .34) 75%, rgba(var(--button-rgb), 0.9) 100%);
  opacity: 1;
}

@media (hover: hover) {
  .glass-btn-semantic:hover {
    color: rgb(var(--button-rgb));
    background: rgba(var(--button-rgb), 0.22);
  }
}

.glass-btn-success { --button-rgb: var(--green-rgb); }
.glass-btn-amber { --button-rgb: var(--cigi-accent-rgb); }
.glass-btn-semantic.glass-btn-telegram { --button-rgb: 34, 158, 217; }
.glass-btn-danger { --button-rgb: var(--red-rgb); }

/* Іконка порожнього стану — завжди в акцент. Lottie пише кольори
   presentation-атрибутами, тому їх перебиваємо явно. */
.cigi-empty-icon {
  color: var(--cigi-amber);
}

/* GlassTooltip: канон preview/cigi-ds/overlays/tooltip-inline-standalone.html
   (пігулка + рим + стрілка) + tooltip-wrap-inline-standalone.html (перенос, max-width).
   position: fixed — координати рахує GlassTooltip.tsx через getBoundingClientRect. */
.cigi-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 1000;
  max-width: 280px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text1);
  text-shadow: var(--text-shadow-glass);
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
}

.cigi-tooltip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
}

.cigi-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.15);
}

.cigi-empty-icon svg [stroke]:not([stroke="none"]) {
  stroke: var(--cigi-amber);
}

.cigi-empty-icon svg [fill]:not([fill="none"]) {
  fill: var(--cigi-amber);
}

/* 4. Primary Glass CTA Button (Gold Accent) */
.glass-btn-gold {
  position: relative;
  overflow: hidden;
  background: rgba(var(--cigi-accent-rgb), 0.12);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: var(--glass-shadow);
  border-radius: 9999px;
  color: var(--cigi-accent);
  text-shadow: var(--text-shadow-glass);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1), background .35s;
}

.glass-btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, rgba(var(--cigi-accent-rgb), 0.9) 0%, rgba(var(--cigi-accent-rgb), .34) 25%, rgba(var(--cigi-accent-rgb), .34) 75%, rgba(var(--cigi-accent-rgb), 0.9) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s;
}

@media (hover: hover) {
  .glass-btn-gold:hover {
    background: rgba(var(--cigi-accent-rgb), 0.2);
    box-shadow: var(--glass-shadow);
  }
}

.glass-btn-gold:hover::before {
  opacity: 1;
}

/* Telegram Glass Button — канонічне скло CIGI у фірмовому кольорі Telegram (#229ED9 / #2AABEE) */
.glass-btn-telegram {
  position: relative;
  overflow: hidden;
  background: rgba(34, 158, 217, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  border-radius: 9999px;
  color: #38BDF8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1), background .35s, color .35s;
}

.glass-btn-telegram::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, rgba(42, 171, 238, 0.7) 0%, rgba(42, 171, 238, .27) 25%, rgba(42, 171, 238, .27) 75%, rgba(42, 171, 238, 0.7) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s;
}

@media (hover: hover) {
  .glass-btn-telegram:hover {
    background: rgba(34, 158, 217, 0.28);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    color: #7DD3FC;
  }
}

@media (hover: hover) {
  .glass-btn-telegram:hover::before {
    opacity: 1;
    background: linear-gradient(90deg, rgba(42, 171, 238, 0.95) 0%, rgba(42, 171, 238, .36) 25%, rgba(42, 171, 238, .36) 75%, rgba(42, 171, 238, 0.95) 100%);
  }
}

/* 5. Glass R7 — канонічна основа для всіх sheet-оверлеїв CIGI (без верхнього блику, подовжений нижній блик) */
.glass-r7 {
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.40);
  --rim-a: 180deg;
  --rim-opacity: 0.75;
}

.glass-r7::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.28) 65%, rgba(255, 255, 255, 0.55) 85%, rgba(255, 255, 255, 0.85) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.75;
}

/* Підкладка під будь-яким sheet/модалкою CIGI — канон: фон під шторкою завжди затемнений. */
.sheet-backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
}

/* Top Sheet (Mobile Menu, MobileFilterSheet, CartDrawer) — базується на .glass-r7.
   КАНОН: внутрішній відступ контенту знизу ЗАВЖДИ дорівнює бічному
   (px-3.5 → pb-3.5, px-5 → pb-5 і т.д.) — нижня кромка не має бути тіснішою за бічні. */
.top-sheet {
  /* запас над екраном: пружина в кінці проскакує вниз ~3% висоти — щоб угорі не світилась щілина */
  --sheet-bleed: 32px;
  position: fixed;
  top: calc(-1 * var(--sheet-bleed));
  left: 0;
  right: 0;
  /* 20px зазор під pill «Закрити» (40px) + mt-2.5 (10px) */
  bottom: calc(70px + var(--safe-bottom, 0px));
  width: 100%;
  display: flex;
  flex-direction: column;
  /* --safe-top: env(safe-area-inset-top) у продакшені, у превʼю підміняється на 59px */
  padding-top: calc(max(20px, var(--safe-top, 0px)) + var(--sheet-bleed));
  border-radius: 0 0 24px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.40);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.75);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  will-change: transform, opacity;
  --rim-a: 180deg;
  --rim-opacity: 0.75;
}

.top-sheet.open {
  transform: translateY(0);
  opacity: 1;
  /* опускається плавніше й наприкінці трохи пружинить (ζ≈0.75, проскок ~3%) — правка власника 24.09;
     закриття лишається швидким (базовий transition) */
  transition: transform 0.75s linear(0, 0.0333, 0.1154, 0.2247, 0.3451, 0.4654, 0.5781, 0.6788, 0.7653, 0.837, 0.8945, 0.939, 0.9722, 0.9959, 1.0118, 1.0215, 1.0266, 1.0283, 1.0277, 1.0256, 1.0226, 1.0192, 1.0157, 1.0125, 1.0096, 1.007, 1.0049, 1.0032, 1), opacity 0.25s ease;
}

/* Шторка з медіа під самий верх: фото від краю до краю і від верхньої кромки.
   Safe-area тримає вже сам контент усередині (бейджі), а не padding шторки. */
.top-sheet--media {
  padding-top: var(--sheet-bleed);
}

/* Sheet без пілюлі закриття (age gate) — скло до самого низу, без зазору й радіусів. */
.top-sheet--full {
  bottom: 0;
  border-radius: 0;
}

/* Повноекранна шторка не має кромки: rim по периметру екрана читається як
   світлий прямокутник навколо контенту, а не як край скла. */
.top-sheet--full::before,
.top-sheet--full.glass-r7::before {
  display: none;
}

/* Пілюлі в зазорі під нижньою кромкою top-sheet — канон CIGI.
   Blur 20px (сильніший за базовий .glass-btn-semantic) + збільшений хіт-таргет 40px. */
.top-sheet-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  height: 40px;
  padding-inline: 18px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  backdrop-filter: blur(20px) var(--glass-dim);
  -webkit-backdrop-filter: blur(20px) var(--glass-dim);
}

.top-sheet-pill svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Одинока пілюля «ЗАКРИТИ» — ширша, з мінімальною шириною. */
.top-sheet-close {
  min-width: 148px;
  padding-inline: 28px;
  text-transform: uppercase;
}

/* Дії шторки (footer) на телефоні — пілюлі в одному ряду з «ЗАКРИТИ», та сама геометрія (Борис 10.10). */
.cigi-sheet-actions {
  display: contents;
}

.cigi-sheet-buttons:has(.cigi-sheet-actions) {
  flex-wrap: wrap; /* три пілюлі (Назад · Створити · Закрити) на 375 — запасний перенос */
}

.cigi-sheet-buttons:has(.cigi-sheet-actions) .top-sheet-close {
  min-width: 0; /* поруч із діями «ЗАКРИТИ» не розтягується */
}

.cigi-sheet-actions button {
  height: 40px;
  min-height: 0;
  width: auto;
  padding: 0 18px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.top-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.28) 65%, rgba(255, 255, 255, 0.55) 85%, rgba(255, 255, 255, 0.85) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.75;
}

/* ============================================================
   CIGI Mobile Sheet Architecture (Sliding Widget Block, без капсули-заголовка з 10.10)
   - 1. Main widget block slides vertically downward (translateY -30px -> 0)
   - 2. Action buttons row underneath appears seamlessly
   ============================================================ */
.cigi-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 9001;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: max(16px, var(--safe-top, 0px));
  padding-bottom: max(16px, var(--safe-bottom, 0px));
  padding-left: 14px;
  padding-right: 14px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.cigi-sheet-card {
  pointer-events: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 40px; /* шторка r40, відступ 20 (Анатомія, Борис 14.10) */
  margin-top: 10px;
  margin-bottom: 10px;
  transform: translateY(-30px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s, opacity 0.35s ease 0.08s;
  will-change: transform, opacity;
  overflow: hidden;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.85);
}

.cigi-sheet-card.open {
  transform: translateY(0);
  opacity: 1;
}

.cigi-sheet-buttons {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease 0.18s, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
  will-change: opacity, transform;
}

.cigi-sheet-buttons.open {
  opacity: 1;
  transform: translateY(0);
}

.cigi-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cigi-amber);
  background: rgba(245, 158, 11, 0.12);
  padding: 4px 10px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   CIGI Canonical Glass Input
   Physical glass body for inputs & textareas (No flat border / fill)
   ============================================================ */
.glass-input {
  position: relative;
  background: var(--glass-bg, rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(var(--glass-blur, 12px)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) var(--glass-dim);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm, 12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--glass-shadow);
  color: #fff;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-input:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
}
.glass-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--cigi-accent-rgb, 245, 158, 11), 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Autofill Dark Glass Override (Universal for WebKit / Blink)
   Prevents browser autofill from turning dark inputs white (#e8f0fe)
   ============================================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  caret-color: var(--cigi-accent) !important;
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(12, 14, 18, 0.95) inset !important;
  box-shadow: 0 0 0 1000px rgba(12, 14, 18, 0.95) inset !important;
  transition: background-color 99999s ease-out 0s;
}

.glass-nested input:-webkit-autofill,
.glass-nested input:-webkit-autofill:hover,
.glass-nested input:-webkit-autofill:focus,
.glass-nested input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(14, 16, 22, 0.90) inset !important;
  box-shadow: 0 0 0 1000px rgba(14, 16, 22, 0.90) inset !important;
}

/* Скляне поле CigiInput: autofill пароля/імені фарбував інпут біло-блакитним попри
   загальне правило — прицільно перекриваємо непрозорою вставкою по .cigi-field-input. */
.cigi-field-input:-webkit-autofill,
.cigi-field-input:-webkit-autofill:hover,
.cigi-field-input:-webkit-autofill:focus,
.cigi-field-input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  caret-color: var(--cigi-accent) !important;
  -webkit-box-shadow: 0 0 0 1000px rgb(10, 12, 16) inset !important;
  box-shadow: 0 0 0 1000px rgb(10, 12, 16) inset !important;
  border-radius: inherit !important;
}

/* ============================================================
   CIGI Section Divider · золота пілюля по центру + хайрлайни
   Заголовок групи/секції: <div class="cigi-sec-lbl"><span>Label</span></div>
   ============================================================ */
.cigi-sec-lbl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cigi-accent);
}

.cigi-sec-lbl::before,
.cigi-sec-lbl::after {
  content: "";
  flex: 1;
  height: 1px;
}

.cigi-sec-lbl::before {
  background: linear-gradient(90deg, transparent, rgba(var(--cigi-accent-rgb), .25));
}

.cigi-sec-lbl::after {
  background: linear-gradient(90deg, rgba(var(--cigi-accent-rgb), .25), transparent);
}

.cigi-sec-lbl > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(var(--cigi-accent-rgb), .1);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.cigi-sec-lbl > span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: .6px;
  background: linear-gradient(90deg, rgba(var(--cigi-accent-rgb), .5), rgba(var(--cigi-accent-rgb), .08) 50%, rgba(var(--cigi-accent-rgb), .5));
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ============================================================
   CIGI GLASS INPUT & SELECT CANON
   Strict adherence to CIGI Glass Canon:
   - Only hairline rim via ::before with mask-composite: exclude/xor
   - Zero CSS borders, zero glow
   - Dark physical shadows and inset depth
   ============================================================ */

@keyframes cigiFieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes cigiFieldFadeInUp {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Field Group & Label ── */
.cigi-field-group {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Фокус піднімає поле над сусідами: дропдаун підказок живе всередині .cigi-field-wrap
   (backdrop-filter = свій stacking context) і інакше ховається під наступним полем. */
.cigi-field-group:focus-within {
  z-index: 60;
}

/* Ролі тексту адмінки (docs/CIGI_TYPOGRAPHY.md §6a): назва картки й підпис значення — ВЕЛИКИМИ.
   Розмір/вага/колір — Tailwind на елементі. Вимкнути капс ролі — прибрати рядок тут. */
.cigi-t-title { text-transform: uppercase; letter-spacing: 0.04em; }
.cigi-t-label { text-transform: uppercase; letter-spacing: 0.06em; }

.cigi-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cigi-ink-2, rgba(255, 255, 255, 0.6));
  text-transform: uppercase;
  letter-spacing: 0.04em; /* капс +4 % (Борис 10.10); було 0.06em з імпорту 09.10 — «Ціна за штуку» на 320 переносилась */
  margin: 0 0 8px;
  padding: 0 var(--cigi-field-inset);
}

/* Усі підписи навколо поля (назва, підказка, помилка, складність пароля) стоять на одній вертикалі
   з текстом усередині пігулки — без рваного лівого краю. */
.cigi-field-group { --cigi-field-inset: 18px; }

.cigi-field-hint {
  margin-top: 8px;
  padding: 0 var(--cigi-field-inset);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cigi-ink-2, rgba(255, 255, 255, 0.6)); /* було white/40 — контраст нижче 4.5:1 */
}

/* ── Input Wrap (Glass Body + Rim) ── */
.cigi-field-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(12px) brightness(0.45) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) brightness(0.45) saturate(1.15);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.85), var(--glass-shadow, 0 2px 5px rgba(0,0,0,0.75));
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.cigi-field-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border, 0.8px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.15) 100%);
  -webkit-mask: var(--rim-mask, linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0));
  mask: var(--rim-mask, linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0));
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.25s ease, background 0.25s ease;
  z-index: 2;
}

.cigi-field-wrap:hover::before {
  opacity: 0.85;
}

.cigi-field-wrap:focus-within {
  background: rgba(255, 255, 255, 0.05);
}

.cigi-field-wrap:focus-within::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.85) 0%, rgba(245, 158, 11, 0.35) 40%, rgba(245, 158, 11, 0.15) 60%, rgba(245, 158, 11, 0.75) 100%);
}

.cigi-field-wrap.has-error {
  animation: cigiFieldShake 0.4s ease;
}

.cigi-field-wrap.has-error::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(255, 75, 75, 0.85) 0%, rgba(255, 75, 75, 0.4) 50%, rgba(255, 75, 75, 0.8) 100%);
}

.cigi-field-wrap.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Sizes */
.cigi-field-wrap.sz-sm { height: 42px; border-radius: 9999px; }
.cigi-field-wrap.sz-md { height: 50px; border-radius: 9999px; }

/* ── Raw Input Inside Wrap ── */
.cigi-field-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  padding: 0 18px; /* як у .cigi-select-trigger.sz-md — текст полів і селекта на одній вертикалі */
  position: relative;
  z-index: 1;
}

.cigi-field-wrap.sz-sm .cigi-field-input { font-size: 14px; padding: 0 14px; }

.cigi-field-input::placeholder {
  color: rgba(255, 255, 255, 0.5); /* ink-3 (0.4) на темному склі давав ~3.4:1, норма 4.5:1 */
}

/* Нативні стрілки-крутилки number — білі плоскі квадрати поза склом, прибрано (власник 25.09.2026) */
/* Глобально — щоб і саморобні поля (швидкі операції, чат, Нова Пошта) не показували їх (власник 27.09.2026). */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.cigi-field-input.has-leading {
  padding-left: 44px;
}
.cigi-field-wrap.sz-sm .cigi-field-input.has-leading {
  padding-left: 38px;
}

/* ── Textarea Variant ── */
.cigi-field-wrap.is-textarea { height: auto; align-items: stretch; }
.cigi-field-wrap.is-textarea.sz-sm { height: auto; border-radius: 12px; }
.cigi-field-wrap.is-textarea.sz-md { height: auto; border-radius: 14px; }

.cigi-field-textarea { height: auto; padding: 12px 16px; line-height: 1.55;
                       resize: vertical; display: block; font-family: inherit; }
.cigi-field-wrap.sz-sm .cigi-field-textarea { font-size: 14px; padding: 10px 12px; }
.cigi-field-textarea.no-resize { resize: none; }

.cigi-field-count { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 4px; text-align: right; }

/* ── Leading Icon ── */
.cigi-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  color: var(--cigi-ink-3, rgba(255, 255, 255, 0.4));
  transition: color 0.25s ease;
}

.cigi-field-wrap:focus-within .cigi-field-icon {
  color: var(--cigi-amber, #F59E0B);
}

.cigi-field-wrap.has-error .cigi-field-icon {
  color: var(--red);
}

/* ── Trailing Actions / Suffix ── */
.cigi-field-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  position: relative;
  z-index: 3;
}

/* Action button inside field (Pill glass) */
.cigi-field-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cigi-amber, #F59E0B);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, opacity 0.2s ease;
}

.cigi-field-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.8px;
  background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.5) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

.cigi-field-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
}

.cigi-field-btn:active {
  transform: scale(0.96);
}

/* Small icon buttons (eye, clear) */
.cigi-field-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--cigi-ink-3, rgba(255, 255, 255, 0.4));
  cursor: pointer;
  outline: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.cigi-field-icon-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* ── Error Message ── */
.cigi-field-error-msg {
  display: flex;
  align-items: flex-start; /* двохрядкова помилка на телефоні: іконка біля першого рядка */
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #FF5A50;
  margin-top: 8px;
  padding: 0 var(--cigi-field-inset);
  animation: cigiFieldFadeInUp 0.2s ease;
}

/* ── Suggestions Dropdown (.esg canon) ── */
.cigi-field-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: linear-gradient(rgba(13, 13, 13, 0.96), rgba(13, 13, 13, 0.96)), var(--glass-bg, rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(14px) brightness(0.45) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) brightness(0.45) saturate(1.15);
  border-radius: 14px;
  overflow: hidden;
  z-index: 50;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
  animation: cigiFieldFadeInUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cigi-field-suggestions::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border, 0.8px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}

.cigi-field-suggestion-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cigi-field-suggestion-item:last-child {
  border-bottom: none;
}

.cigi-field-suggestion-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.cigi-field-suggestion-item .domain-highlight {
  color: var(--cigi-amber, #F59E0B);
  font-weight: 600;
}

/* ── Password Strength Bar ── */
.cigi-field-error-msg svg { margin-top: 2px; }

.cigi-field-strength-wrap {
  margin-top: 8px;
  padding: 0 var(--cigi-field-inset);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cigi-field-strength-bars {
  display: flex;
  gap: 5px;
}

.cigi-field-strength-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease;
}

.cigi-field-strength-seg.is-active.lvl-weak { background: var(--red); }
.cigi-field-strength-seg.is-active.lvl-medium { background: var(--cigi-amber, #F59E0B); }
.cigi-field-strength-seg.is-active.lvl-strong { background: var(--cigi-emerald); }

.cigi-field-strength-label {
  font-size: 12px;
  color: var(--cigi-ink-2, rgba(255, 255, 255, 0.6));
}

/* ── CIGI Dropdown Select Canon ── */
.cigi-select-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Відкритий (і ще не всмоктаний) селект піднімається над сусідніми полями — інакше меню ховається під ними. */
.cigi-select-container.is-flowing {
  z-index: 60;
}

/* Поле + шар краплі: меню рахується від поля, а не від контейнера з лейблом і помилкою. */
.cigi-select-anchor {
  position: relative;
}

/* Поки тече крапля, поле не підстрибує — інакше між полем і перемичкою світиться щілина. */
.cigi-select-container.is-flowing .cigi-select-trigger {
  transform: none;
}

.cigi-select-trigger {
  /* Тригер селекта — скляна кнопка-капсула (як .glass-btn), не поле форми. */
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px) var(--glass-dim);
  -webkit-backdrop-filter: blur(10px) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  text-shadow: var(--text-shadow-glass);
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0 16px;
  text-align: left;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), background .35s;
}

.cigi-select-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.cigi-select-trigger:active {
  transform: translateY(1px) scale(0.97);
}

.cigi-select-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease, background 0.25s ease;
}

.cigi-select-trigger:hover::before {
  opacity: 1;
}

.cigi-select-container.is-open .cigi-select-trigger::before,
.cigi-select-trigger:focus::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.85) 0%, rgba(245, 158, 11, 0.35) 40%, rgba(245, 158, 11, 0.15) 60%, rgba(245, 158, 11, 0.75) 100%);
}

.cigi-select-trigger.sz-sm { height: 44px; font-size: 14px; padding: 0 14px; }
.cigi-select-trigger.sz-md { height: 50px; font-size: 14px; padding: 0 18px; }

/* Шар краплі: під полем (угору — над ним), нульової висоти. Скло меню малює рідке тіло
   (CigiSelect → LiquidBody, dropDownPath), саме меню — прозорий вміст поверх нього. */
.cigi-select-drop {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 60;
}

.cigi-select-drop.is-up {
  top: 0;
}

.cigi-select-drop-body {
  position: absolute;
  inset: 0 auto auto 0;
}

/* угору — те саме тіло, віддзеркалене від краю поля */
.cigi-select-drop.is-up .cigi-select-drop-body {
  transform: scaleY(-1);
  transform-origin: 0 0;
}

.cigi-select-menu {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  border-radius: 26px;
  overflow: hidden;
  padding: 6px;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  opacity: 0; /* проявляє CigiSelect, коли панель майже розлилась */
}

.cigi-select-drop.is-up .cigi-select-menu {
  top: auto;
  bottom: 6px;
}

/* у порталі меню може бути ширшим за поле (довгі назви) — ширину краплі рахує CigiSelect */
.cigi-select-drop.is-portal .cigi-select-menu {
  right: auto;
  width: max-content;
  min-width: 100%;
}

.cigi-select-menu[aria-hidden="true"] {
  pointer-events: none;
}

.cigi-select-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.cigi-select-list::-webkit-scrollbar {
  display: none;
}

.cigi-select-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.22s ease;
}

/* Базовый rim-слой опции: погашен, зажигается на hover / клавиатурном фокусе / выборе */
.cigi-select-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border, 0.8px);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* Опция под курсором — полноценное стеклянное тело, а не плоская подсветка */
.cigi-select-item:hover,
.cigi-select-item.is-active {
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(var(--glass-blur, 10px)) var(--glass-dim, brightness(0.45) saturate(1.15));
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) var(--glass-dim, brightness(0.45) saturate(1.15));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  color: #ffffff;
}

.cigi-select-item:hover::before,
.cigi-select-item.is-active::before {
  opacity: 0.75;
}

.cigi-select-item.is-selected {
  background: rgba(245, 158, 11, 0.12);
  backdrop-filter: blur(var(--glass-blur, 10px)) var(--glass-dim, brightness(0.45) saturate(1.15));
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) var(--glass-dim, brightness(0.45) saturate(1.15));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  color: var(--cigi-amber, #F59E0B);
  font-weight: 600;
}

.cigi-select-item.is-selected::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.8px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.6) 0%, rgba(245, 158, 11, 0.1) 50%, rgba(245, 158, 11, 0.6) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

/* ============================================================
   CIGI Canonical Modal Alert (notifications/modal-alert-standalone.html)
   ============================================================ */

@keyframes cigiModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cigiModalZoomIn {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-overlay,
.cigi-modal-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
  animation: cigiModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-box,
.cigi-modal-alert-box {
  width: 100%;
  max-width: 360px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  text-shadow: var(--text-shadow-glass);
  border-radius: 48px; /* модалка r48 = кнопка 56/2 + відступ 20 (Анатомія, Борис 14.10) */
  padding: 60px 20px 20px;
  text-align: center;
  transform: scale(1) translateY(0);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  position: relative;
  animation: cigiModalZoomIn 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal-box::before,
.cigi-modal-alert-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border, 1px);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
}

.modal-close,
.cigi-modal-alert-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill, 30px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg, rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(var(--glass-blur, 10px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
  box-shadow: var(--glass-shadow);
  color: var(--cigi-ink-2, rgba(255, 255, 255, 0.7));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.modal-close::before,
.cigi-modal-alert-close::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border, 1px);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
}

.modal-close:hover,
.cigi-modal-alert-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.modal-close:active,
.cigi-modal-alert-close:active {
  transform: scale(1.12);
  background: rgba(var(--cigi-amber-rgb, 245, 158, 11), 0.1);
}

.modal-close svg,
.cigi-modal-alert-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.67;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
}

.modal-icon,
.cigi-modal-alert-icon {
  position: relative;
  width: 100px;
  height: 100px;
  --tile-rgb: var(--negative-rgb);
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--tile-rgb), 0.08);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  margin: -100px auto 16px;
  box-shadow: var(--glass-shadow);
}

.modal-icon::before,
.cigi-modal-alert-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border, 1px);
  background: linear-gradient(var(--rim-a), rgba(var(--tile-rgb), 0.65) 0%, rgba(var(--tile-rgb), .25) 25%, rgba(var(--tile-rgb), .25) 75%, rgba(var(--tile-rgb), 0.65) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.modal-icon > svg,
.cigi-modal-alert-icon > svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--negative, #FF3B30);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
}

.modal-icon > div,
.cigi-modal-alert-icon > div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.modal-icon > div svg,
.cigi-modal-alert-icon > div svg {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 2;
}

.modal-icon.mi-danger > svg,
.cigi-modal-alert-icon.mi-danger > svg {
  stroke: var(--negative, #FF3B30);
}

.modal-icon:is(.mi-warning, .mi-gold),
.cigi-modal-alert-icon:is(.mi-warning, .mi-gold) {
  --tile-rgb: var(--cigi-amber-rgb);
}

.modal-icon.mi-info,
.cigi-modal-alert-icon.mi-info {
  --tile-rgb: var(--blue-rgb);
}

.modal-icon.mi-warning > svg,
.cigi-modal-alert-icon.mi-warning > svg,
.modal-icon.mi-gold > svg,
.cigi-modal-alert-icon.mi-gold > svg {
  stroke: var(--cigi-amber, #F59E0B);
}

.modal-icon.mi-info > svg,
.cigi-modal-alert-icon.mi-info > svg {
  stroke: var(--blue);
}

.modal-title,
.cigi-modal-alert-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text, #ffffff);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.modal-desc,
.cigi-modal-alert-desc {
  font-size: 14px;
  color: var(--text, #ffffff); /* біле, не ink-2: на прозорому склі читабельність */
  line-height: 1.5;
  margin-bottom: 24px;
}

.modal-desc strong,
.cigi-modal-alert-desc strong {
  color: var(--text, #ffffff);
  font-weight: 700;
}

.modal-actions,
.cigi-modal-alert-actions {
  display: flex;
  gap: 10px;
}

.modal-actions > button,
.cigi-modal-alert-actions > button {
  flex: 1 1 0;
  white-space: nowrap !important;
  flex-shrink: 0;
  /* Без min-width: 0 довгий підпис розпирає кнопку і текст вилазить за тіло модалки
     (скарга менеджера 22.09.2026: «Перевірено (Створити ТТН)» обрізалось збоку). */
  min-width: 0;
}

.modal-actions > button > span,
.cigi-modal-alert-actions > button > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-secondary,
.cigi-modal-alert-btn-secondary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-radius: 9999px;
  border: none;
  background: var(--glass-bg);
  color: var(--text1, #ffffff);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap !important;
  cursor: pointer;
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary::before,
.cigi-modal-alert-btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border, 1px);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .btn-secondary:hover,
  .cigi-modal-alert-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    color: #ffffff;
  }
}

.btn-secondary:hover::before,
.cigi-modal-alert-btn-secondary:hover::before {
  opacity: 1;
}

.btn-secondary:active,
.cigi-modal-alert-btn-secondary:active {
  background: rgba(255, 255, 255, 0.03);
}

.btn-secondary > span,
.cigi-modal-alert-btn-secondary > span {
  position: relative;
  z-index: 2;
  white-space: nowrap !important;
}

.btn-negative,
.cigi-modal-alert-btn-danger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-radius: 9999px;
  border: none;
  background: rgba(var(--negative-rgb, 255, 59, 48), 0.04);
  color: var(--negative, #FF3B30);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap !important;
  cursor: pointer;
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-negative::before,
.cigi-modal-alert-btn-danger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border, 1px);
  background: linear-gradient(90deg, rgba(var(--negative-rgb), 0.9) 0%, rgba(var(--negative-rgb), .34) 25%, rgba(var(--negative-rgb), .34) 75%, rgba(var(--negative-rgb), 0.9) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .btn-negative:hover,
  .cigi-modal-alert-btn-danger:hover {
    background: rgba(var(--negative-rgb, 255, 59, 48), 0.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
}

.btn-negative:hover::before,
.cigi-modal-alert-btn-danger:hover::before {
  opacity: 1;
}

.btn-negative:active,
.cigi-modal-alert-btn-danger:active {
  background: rgba(var(--negative-rgb, 255, 59, 48), 0.14);
}

.btn-negative > span,
.cigi-modal-alert-btn-danger > span {
  position: relative;
  z-index: 1;
  white-space: nowrap !important;
}

.cigi-modal-alert-btn-gold {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-radius: 9999px;
  border: none;
  background: rgba(var(--cigi-amber-rgb), 0.12);
  color: var(--cigi-amber);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap !important;
  cursor: pointer;
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cigi-modal-alert-btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border, 1px);
  background: linear-gradient(90deg, rgba(var(--cigi-amber-rgb), 0.9) 0%, rgba(var(--cigi-amber-rgb), .34) 25%, rgba(var(--cigi-amber-rgb), .34) 75%, rgba(var(--cigi-amber-rgb), 0.9) 100%);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .cigi-modal-alert-btn-gold:hover {
    background: rgba(var(--cigi-amber-rgb, 245, 158, 11), 0.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
}

.cigi-modal-alert-btn-gold:hover::before {
  opacity: 1;
}

.cigi-modal-alert-btn-gold:active {
  background: rgba(var(--cigi-amber-rgb, 245, 158, 11), 0.2);
}

.cigi-modal-alert-btn-gold > span {
  position: relative;
  z-index: 1;
}

/* Mobile bottom-anchoring for canonical CIGI dialogs & modal alerts */
@media (max-width: 767px) {
  .modal-overlay,
  .cigi-modal-alert-overlay {
    align-items: flex-end;
    padding: 12px 12px max(16px, var(--safe-bottom, 0px));
  }
  .modal-box,
  .cigi-modal-alert-box {
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
    border-bottom-left-radius: max(16px, var(--r-xl, 24px));
    border-bottom-right-radius: max(16px, var(--r-xl, 24px));
  }
}




/* ── Wheel of Fortune win reveal (Glass canon: mask-based conic fill, not a glow) ── */
.wheel-rays {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0.22;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(245, 158, 11, 0.30) 0 6deg,
    transparent 6deg 18deg
  );
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 78%);
  mask: radial-gradient(closest-side, #000 25%, transparent 78%);
  animation: wheelRaysSpin 22s linear infinite;
}

@keyframes wheelRaysSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cigiWinPop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes cigiWinRise {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.win-step {
  animation-fill-mode: both;
}

.win-step[data-win-step="icon"] {
  animation: cigiWinPop 320ms var(--spring, ease-out) both;
}

.win-step[data-win-step="title"],
.win-step[data-win-step="code"] {
  animation: cigiWinRise 320ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .wheel-rays {
    animation: none;
  }
  .win-step {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Кругла «×» у полі пошуку ExpandSearch (краплі — liquid-glass.css .lq-search-*). */
.cigi-xsearch-clear {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, color 0.2s;
}
.cigi-xsearch-clear::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask, linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0));
  mask: var(--rim-mask, linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0));
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
}
.cigi-xsearch-clear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.cigi-xsearch-clear:active {
  transform: scale(0.92);
}
.cigi-xsearch-clear svg {
  width: 14px;
  height: 14px;
}

/* Мобільна адмінка: зона натискання 44px у кнопок-іконок, вигляд не змінюється (власник 26.09.2026).
   ::before зайнятий римом, тому зона — прозорий ::after; overflow: visible, інакше .glass-btn її обріже.
   :root:has(.admin-shell) — щоб діяло й у шторках, які рендеряться порталом у body. */
@media (max-width: 767px) {
  :root:has(.admin-shell) .cigi-hit44,
  :root:has(.admin-shell) .cigi-xsearch-clear,
  :root:has(.admin-shell) .cigi-field-icon-btn {
    position: relative;
    overflow: visible;
  }
  :root:has(.admin-shell) .cigi-hit44::after,
  :root:has(.admin-shell) .cigi-xsearch-clear::after,
  :root:has(.admin-shell) .cigi-field-icon-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* ============================================================
   LIQUID PRESS (Борис 12.10) — нажатие как у Liquid Glass в iOS 26, только касса.
   Палец нажал: контрол растёт и светлеет изнутри. Отпустил: пружина с перелётом.
   Дыма нет (Борис 13.10); .liquid-press стоит только в src/point/*.
   Класс на элемент: .liquid-press (кнопки, ×1.15) или + .liquid-press-tile (плитки, ×1.04).
   «Ручки» — только эти токены. Состояние: :active ИЛИ .is-pressed (его ставит pointerdown из liquidPressInit
   в src/point/parts.tsx: на Android-киоске :active приходит с задержкой).
   Удвоенный .liquid-press — чтобы перебить старые :active-правила кругов (.glass-nested.rounded-full:active).
   ============================================================ */
:root {
  --press-scale-btn: 1.15;
  --press-scale-tile: 1.04;
  --press-in: 120ms;
  --press-out: 550ms;
  --press-spring: cubic-bezier(.34, 1.56, .64, 1);
  --press-tint: rgba(255, 255, 255, .18);
}

.liquid-press.liquid-press {
  -webkit-tap-highlight-color: transparent;
  transform: scale(1);
  transition: transform var(--press-out) var(--press-spring);
}

.liquid-press-tile { --press-scale: var(--press-scale-tile); }
/* Круглі кнопки каси — планшет, палець: ×1.25 як в еталоні round-glass-button-mobile (Борис 13.10). Світлішає через --press-tint. */
.liquid-press-round { --press-scale: 1.25; }

/* Белёсая подсветка изнутри: ::after (::before занят римом); рим и фото лежат под ней. */
.liquid-press::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--press-tint);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--press-out) ease;
}

.liquid-press.liquid-press:active,
.liquid-press.liquid-press.is-pressed {
  transform: scale(var(--press-scale, var(--press-scale-btn)));
  z-index: 2;
  will-change: transform;
  transition: transform var(--press-in) cubic-bezier(.2, .8, .2, 1);
}

.liquid-press:active::after,
.liquid-press.is-pressed::after {
  opacity: 1;
  transition: opacity var(--press-in) ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .liquid-press.liquid-press:active,
  .liquid-press.liquid-press.is-pressed { transform: none; }
}

/* ============================================================
   Скло сповіщень (пуш · тост · снекбар) і ModalAlert — Борис 13.10: стандартне «Ультрапрозоре» (.glass-surface:
   --glass-bg · blur+--glass-dim · --glass-shadow · рим --rim-white 135°), без власних чисел.
   `.glass-toned` (меню, підказки) — окреме, темне, не чіпати. Тон показує ТІЛЬКИ іконка / аватар у
   кольоровому колі (.cigi-notif-tile); заголовок і текст білі. Без glow.
   Тон: data-tone = gold (за замовчуванням) | success | danger | info.
   ============================================================ */
.glass-toned {
  --tone-rgb: var(--cigi-amber-rgb);
  position: relative;
  isolation: isolate;
  background: var(--glass-toned-bg);
  backdrop-filter: blur(var(--glass-toned-blur)) var(--glass-dim);
  -webkit-backdrop-filter: blur(var(--glass-toned-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
}
.glass-toned[data-tone="success"] { --tone-rgb: var(--positive-rgb); }
.glass-toned[data-tone="danger"] { --tone-rgb: var(--negative-rgb); }
.glass-toned[data-tone="info"] { --tone-rgb: var(--blue-rgb); }

.glass-toned::before,
.cigi-notif-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* Коло тону: заливка 25% + кромка тону .9/.16 (правило кольорового скла). */
.cigi-notif-tile::before {
  background: linear-gradient(135deg, rgba(var(--tone-rgb), 0.9) 0%, rgba(var(--tone-rgb), .34) 32%, rgba(var(--tone-rgb), .34) 68%, rgba(var(--tone-rgb), 0.5) 100%);
}

/* Плитка-іконка / аватар: заливка тону 25% + рим тону. */
.cigi-notif-tile {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(var(--tone-rgb), 0.25);
  color: rgb(var(--tone-rgb));
}
.cigi-notif-tile > * { position: relative; z-index: 1; }

/* Кнопка-дія всередині тонованого скла. */
.cigi-notif-action {
  flex: none;
  color: #fff;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: background 0.2s;
}
.cigi-notif-action:hover { background: rgba(255, 255, 255, 0.08); }

/* Капсула сповіщення (пуш · тост · снекбар) — одна на всіх: радіус 9999, коло 40 (.cigi-notif-tile) від краю
   на рівний відступ 8 з усіх боків → висота 56. Текст справа закінчується відступом 8 + pr-3 у розмітці. */
.cigi-push, .cigi-toast, .cigi-snackbar {
  --tone-rgb: var(--cigi-amber-rgb);
  text-shadow: var(--text-shadow-glass);
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 9999px;
}

:is(.cigi-push, .cigi-toast, .cigi-snackbar)[data-tone="success"] { --tone-rgb: var(--positive-rgb); }
:is(.cigi-push, .cigi-toast, .cigi-snackbar)[data-tone="danger"] { --tone-rgb: var(--negative-rgb); }
:is(.cigi-push, .cigi-toast, .cigi-snackbar)[data-tone="info"] { --tone-rgb: var(--blue-rgb); }

/* Пузир чату (каса + сайт): поверх .glass-surface — стандартне «Ультрапрозоре», власного скла нема.
   .is-own = кольорове скло: заливка акценту 14% + рим акценту 135° (.9/.16, правило кольорового скла), текст білий. */
.chat-bubble { color: #fff; text-shadow: var(--text-shadow-glass); }
.chat-bubble.is-own { background: rgba(var(--cigi-accent-rgb), 0.14); }
.chat-bubble.is-own::before {
  background: linear-gradient(135deg, rgba(var(--cigi-accent-rgb), 0.9) 0%, rgba(var(--cigi-accent-rgb), .34) 32%, rgba(var(--cigi-accent-rgb), .34) 68%, rgba(var(--cigi-accent-rgb), 0.5) 100%);
}

/* Поява і вихід (еталон: cubic-bezier(.32,.72,0,1), .45s / .35s / .4s).
   Свайп пуша йде через `translate`, не конфліктує з анімацією `transform`. */
.cigi-push-stack {
  position: fixed;
  top: max(16px, var(--safe-top, 0px));
  left: 50%;
  translate: -50% 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(464px, calc(100% - 32px));
  pointer-events: none;
}
.cigi-push {
  gap: 12px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  animation: cigiNotifInTop 0.45s cubic-bezier(0.32, 0.72, 0, 1) both;
  transition: scale 0.2s ease;
}
.cigi-push:active { scale: 0.98; }
.cigi-push.is-dragging { transition: none; }
.cigi-push.is-leaving { animation: cigiNotifOutTop 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; pointer-events: none; }

.cigi-toast {
  position: fixed;
  top: max(16px, var(--safe-top, 0px));
  left: 50%;
  translate: -50% 0;
  z-index: 9999;
  gap: 8px;
  width: max-content;
  max-width: min(340px, calc(100% - 32px));
  cursor: pointer;
  animation: cigiNotifInTop 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.cigi-toast.is-leaving { animation: cigiNotifOutScale 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; pointer-events: none; }

.cigi-snackbar {
  position: fixed;
  /* телефон: над нижнім меню (bottom-3 + 68px); ПК: від краю */
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  translate: -50% 0;
  z-index: 9999;
  gap: 8px;
  width: min(480px, calc(100% - 32px));
  animation: cigiNotifInBottom 0.4s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@media (min-width: 768px) { .cigi-snackbar { bottom: 24px; } }
.cigi-snackbar.is-leaving { animation: cigiNotifOutBottom 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; pointer-events: none; }

@keyframes cigiNotifInTop { from { opacity: 0; transform: translateY(-120%); } to { opacity: 1; transform: none; } }
@keyframes cigiNotifOutTop { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-120%); } }
@keyframes cigiNotifInBottom { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes cigiNotifOutBottom { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes cigiNotifOutScale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(0.96); } }

/* Вихід модалки-підтвердження (ModalAlert тримається в DOM на час анімації). */
.modal-overlay.is-closing { animation: cigiModalFadeOut 0.2s ease forwards; pointer-events: none; }
.modal-overlay.is-closing .modal-box { animation: cigiModalZoomOut 0.2s ease forwards; }
@keyframes cigiModalFadeOut { to { opacity: 0; } }
@keyframes cigiModalZoomOut { to { opacity: 0; transform: scale(0.95) translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .cigi-push, .cigi-toast, .cigi-snackbar,
  .cigi-push.is-leaving, .cigi-toast.is-leaving, .cigi-snackbar.is-leaving,
  .modal-overlay.is-closing, .modal-overlay.is-closing .modal-box { animation-duration: 0.01ms; }
}