/* ============================================================
   ar-viewer.css — ВИЗУАЛЬНАЯ ЧРОМА web-AR оверлея «примерить в комнате»
   print-split · Klikko brand · standalone.

   ТОЛЬКО стиль. Логику (камера, three.js, тап-в-пол, жесты) навешивает
   движок cad-smith (frontend/src/ar-viewer.js) на стабильные хуки ниже.

   Канон: pop.css токены (coral/violet candy + Unbounded/Inter + Klikko).
   Все панели полупрозрачные — камеру НЕ перекрываем. Prefix: ar-
   ============================================================ */

/* Токены с fallback (pop.css грузится на маркетплейсе → var() подхватятся;
   fallback держит оверлей автономным, если открыт вне маркетплейса). */
.ar-overlay{
  --ar-violet: var(--violet, #7C5CFF);
  --ar-coral:  var(--coral,  #FF5E7E);
  --ar-blue:   var(--blue,   #2E6BFF);
  --ar-lime:   var(--lime,   #C6F24E);
  --ar-sun:    var(--sun,    #FFC53D);
  --ar-grad:   var(--grad-hero, linear-gradient(135deg,#FF5E7E 0%,#7C5CFF 100%));
  --ar-ok:     var(--ok,   #1FBF75);
  --ar-warn:   var(--warn, #FF9F1C);
  /* светлые бренд-тинты глифов, читаемые на тёмном стекле поверх камеры */
  --ar-violet-lite:#C9BEFF;
  --ar-blue-lite:  #AEC7FF;
  /* SVG-маски для псевдо-элементов (::before переживает textContent движка / нужен fill currentColor) */
  --ar-ico-ruler:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='9' width='20' height='6' rx='1'/%3E%3Cpath d='M6 9v2M10 9v3M14 9v2M18 9v3'/%3E%3C/svg%3E");
  --ar-ico-tap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3C/svg%3E");
  --ar-ico-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --ar-pill:   var(--pill, 999px);
  --ar-r:      var(--r,    22px);
  --ar-fd:     var(--font-display, 'Unbounded', system-ui, sans-serif);
  --ar-f:      var(--font, 'Inter', system-ui, -apple-system, sans-serif);
  /* «стекло» поверх камеры — тёмное, чтобы белый текст читался на любом кадре */
  --ar-glass:  rgba(18,18,22,.52);
  --ar-glass-2:rgba(18,18,22,.72);
  --ar-hair:   rgba(255,255,255,.16);
  --ar-ink:    #fff;
  --ar-ink2:   rgba(255,255,255,.72);
  /* safe-area (notch / home-indicator) */
  --ar-top:    env(safe-area-inset-top, 0px);
  --ar-bottom: env(safe-area-inset-bottom, 0px);
}

/* =====================================================
   ROOT — полноэкранный слой поверх камеры
   ===================================================== */
.ar-overlay{
  position:fixed; inset:0; z-index:1000;
  overflow:hidden; background:#0c0c10; /* пока камера не поднялась */
  color:var(--ar-ink);
  font-family:var(--ar-f);
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; user-select:none;
  touch-action:none; /* жесты забирает движок */
}
.ar-overlay *{ box-sizing:border-box; }
.ar-overlay[hidden]{ display:none; }

/* Единый ЯЗЫК ИКОНОК дизайн-системы BunnySplit: чистые линии, stroke=currentColor
   (наследует наши violet/blue/lime/coral). Как ui-badge.js / ui-empty.js svg-канон. */
.ar-overlay svg{
  width:20px; height:20px; display:block;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* сцена движка: сюда движок кладёт <video> камеры + <canvas> three.js */
.ar-stage{ position:absolute; inset:0; z-index:0; }
.ar-stage > video,
.ar-stage > canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* лёгкий верх/низ градиент — чтобы чрома не «плавала» на светлом кадре */
.ar-stage::before,
.ar-stage::after{
  content:""; position:absolute; left:0; right:0; z-index:1;
  pointer-events:none; height:160px;
}
.ar-stage::before{ top:0; background:linear-gradient(to bottom, rgba(0,0,0,.38), transparent); }
.ar-stage::after { bottom:0; height:220px; background:linear-gradient(to top, rgba(0,0,0,.42), transparent); }

/* когда показан state-экран (загрузка/доступ/десктоп) — чрому прячем */
.ar-overlay[data-ar-state="loading"]    .ar-chrome,
.ar-overlay[data-ar-state="permission"] .ar-chrome,
.ar-overlay[data-ar-state="denied"]     .ar-chrome,
.ar-overlay[data-ar-state="desktop"]    .ar-chrome{ display:none; }

/* чрома видна только в живом режиме */
.ar-chrome{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.ar-chrome > *{ pointer-events:auto; }

/* =====================================================
   TOP BAR — название товара + закрыть
   ===================================================== */
.ar-topbar{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; gap:12px;
  padding:calc(10px + var(--ar-top)) 12px 10px;
}
.ar-topbar-title{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:8px;
  font:700 15px var(--ar-f);
  color:var(--ar-ink);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ar-topbar-title::before{ /* маленький Klikko-чип бренда */
  content:""; width:26px; height:26px; flex:none; border-radius:9px;
  background:var(--ar-grad);
  box-shadow:0 4px 12px -4px rgba(124,92,255,.7);
}
.ar-close{
  flex:none;
  width:44px; height:44px; border-radius:var(--ar-pill);
  border:none; cursor:pointer;
  display:grid; place-items:center;
  background:var(--ar-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--ar-ink); font-size:20px; line-height:1;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .15s;
}
.ar-close:hover{ background:var(--ar-glass-2); }
.ar-close:active{ transform:scale(.92); }
.ar-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* =====================================================
   RETICLE — прицел размещения на полу
   Состояния через [data-ar-placed] на .ar-overlay:
     scanning → ищем пол (тускло, вращение)
     ready    → пол найден, «тапни» (ярко, пульс)
     placed   → размещено (ретикл скрыт)
   ===================================================== */
.ar-reticle{
  position:absolute; left:50%; top:56%;
  width:96px; height:96px; margin:-48px 0 0 -48px;
  z-index:5; pointer-events:none;
  display:grid; place-items:center;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.ar-reticle::before{ /* внешнее кольцо на «земле» (перспективный овал) */
  content:""; position:absolute; inset:0;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.9);
  transform:rotateX(62deg);
  box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 6px 18px rgba(0,0,0,.35);
}
.ar-reticle::after{ /* центральный крест-точка */
  content:""; width:10px; height:10px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 4px rgba(124,92,255,.35);
}
/* сканируем пол */
.ar-overlay[data-ar-placed="scanning"] .ar-reticle{ opacity:.55; }
.ar-overlay[data-ar-placed="scanning"] .ar-reticle::before{
  border-style:dashed; border-color:rgba(255,255,255,.7);
  animation:ar-reticle-spin 2.4s linear infinite;
}
/* пол найден — готово ставить */
.ar-overlay[data-ar-placed="ready"] .ar-reticle{ opacity:1; }
.ar-overlay[data-ar-placed="ready"] .ar-reticle::before{
  border-color:#fff;
  animation:ar-reticle-pulse 1.6s ease-in-out infinite;
}
.ar-overlay[data-ar-placed="ready"] .ar-reticle::after{
  background:var(--ar-coral);
  box-shadow:0 0 0 5px rgba(255,94,126,.35);
}
/* размещено — ретикл убираем */
.ar-overlay[data-ar-placed="placed"] .ar-reticle{ opacity:0; transform:scale(.6); }

@keyframes ar-reticle-spin{
  from{ transform:rotateX(62deg) rotate(0); }
  to  { transform:rotateX(62deg) rotate(360deg); }
}
@keyframes ar-reticle-pulse{
  0%,100%{ transform:rotateX(62deg) scale(1);   box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 6px 18px rgba(0,0,0,.35); }
  50%    { transform:rotateX(62deg) scale(1.12); box-shadow:0 0 0 1px rgba(124,92,255,.4), 0 8px 26px rgba(124,92,255,.4); }
}

/* =====================================================
   ONBOARDING HINT — «наведи на пол и тапни»
   Виден в scanning/ready, гаснет после размещения или .is-dismissed
   ===================================================== */
.ar-hint{
  position:absolute; left:50%; bottom:180px; transform:translateX(-50%);
  z-index:6; max-width:min(88vw, 340px);
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:var(--ar-pill);
  background:var(--ar-glass-2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--ar-hair);
  font:600 13.5px var(--ar-f); color:var(--ar-ink);
  text-align:center;
  animation:ar-hint-bob 2.6s ease-in-out infinite;
  transition:opacity .3s ease, transform .3s ease;
}
.ar-hint::before{  /* линейная стрелка-указатель вниз (SVG-маска, currentColor), вместо emoji 👇 */
  content:""; width:16px; height:16px; flex:none; background:currentColor;
  -webkit-mask:var(--ar-ico-tap) center/contain no-repeat; mask:var(--ar-ico-tap) center/contain no-repeat;
}
.ar-overlay[data-ar-placed="placed"] .ar-hint,
.ar-hint.is-dismissed{ opacity:0; transform:translateX(-50%) translateY(8px); pointer-events:none; }
@keyframes ar-hint-bob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(-5px); }
}

/* Бейдж «размер примерный» — тихий amber-статус (не громкая плашка, §14.A tertiary).
   Живёт в общем info-слоте .ar-info внизу; движок ставит [data-ar-approx="1"].
   Взаимоисключим с .ar-size-badge (approx когда габаритов нет, размер — когда есть). */
.ar-badge-approx{
  display:none; align-items:center; gap:5px;
  padding:5px 12px; border-radius:var(--ar-pill);
  background:rgba(255,159,28,.14); border:1px solid rgba(255,159,28,.34);
  color:#ffce8a; font:600 11.5px var(--ar-f); white-space:nowrap;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ar-badge-approx::before{ content:"≈"; font-size:13px; font-weight:800; }
.ar-overlay[data-ar-approx="1"] .ar-badge-approx{ display:inline-flex; }

/* =====================================================
   CONTROLS — нижний слой. Строгая иерархия сверху-вниз (§14.A/§14.E):
     .ar-info    — тихий пассив (размер / «примерно»)
     .ar-adjust  — ОДНА панель регулировок (появляется после постановки, §14.C)
     .ar-cta     — ОДИН primary (Поставить/Заново) — доминанта
     .ar-watermark — тихий бренд-вордмарк
   Все тач-таргеты ≥44px, группы разведены проксимити-gap (§14.D)
   ===================================================== */
.ar-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:8px;   /* плотный стек */
  padding:12px 16px calc(12px + var(--ar-bottom));
}

/* --- ТИХИЙ ИНФО-СЛОТ: размер + «примерно» (взаимоисключимы) — компактные pop-pills --- */
.ar-info{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:18px; flex-wrap:wrap; text-align:center;
}
/* размер в см — язык ui-badge.js (tone=info/violet), тёмная адаптация: soft-fill pill +
   линейная SVG-линейка + текст. Форма/типографика badge (700 11px, gap 4, pill, svg 12).
   Текст/display правит движок (контракт [data-ar-size]). */
.ar-size-badge{
  display:none; align-items:center; gap:4px;
  padding:3px 9px; border-radius:var(--ar-pill);
  background:rgba(124,92,255,.22); border:1px solid rgba(124,92,255,.5);
  color:#fff; font:700 11px var(--ar-f); letter-spacing:.02em;
  white-space:nowrap; font-variant-numeric:tabular-nums;   /* цифры не прыгают (§6) */
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
/* иконка-линейка через ::before-маску: движок правит textContent → SVG-ребёнок стёрся бы,
   а маска переживает (лайм-акцент, тот же линейный svg-язык системы) */
.ar-size-badge::before{
  content:""; width:12px; height:12px; flex:none; background:var(--ar-lime);
  -webkit-mask:var(--ar-ico-ruler) center/contain no-repeat;
          mask:var(--ar-ico-ruler) center/contain no-repeat;
}

/* --- ПАНЕЛЬ РЕГУЛИРОВОК: одна компактная карта; появляется после постановки (§14.C) --- */
.ar-adjust{
  display:none; position:relative;                          /* relative → кнопка «свернуть» в углу */
  flex-direction:column; gap:8px; width:min(348px, 100%);
  padding:10px 12px; border-radius:var(--rad-lg, 16px);
  background:var(--ar-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(124,92,255,.24);                   /* лёгкий violet-кант, не мёртвый серый */
  box-shadow:0 10px 26px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
/* кнопка «свернуть панель» — аккуратно справа-сверху; слайдер ниже её не задевает (padding-right) */
/* signifier «свернуть» (Norman): видимый violet-чип в углу, не невидимка .07 — иначе
   непонятно, что панель сворачивается. Иконка = chevron-в-черту (минимайз вниз, в бар),
   не «×» (× вверху экрана = закрыть AR — разные действия). */
.ar-adjust-collapse{
  position:absolute; top:5px; right:5px; z-index:3;
  width:28px; height:28px; border-radius:var(--ar-pill);
  border:1px solid rgba(124,92,255,.3); cursor:pointer;
  display:grid; place-items:center; color:var(--ar-violet-lite);
  background:rgba(124,92,255,.16);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .15s, color .15s, border-color .15s;
}
.ar-adjust-collapse svg{ width:15px; height:15px; }
.ar-adjust-collapse:hover{ background:rgba(124,92,255,.32); color:#fff; border-color:rgba(124,92,255,.6); }
.ar-adjust-collapse:active{ transform:scale(.88); }
.ar-adjust-collapse:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ar-adjust .ar-scale{ padding-right:30px; }                 /* освобождаем угол под кнопку «свернуть» */
.ar-overlay[data-ar-placed="placed"] .ar-adjust{
  display:flex; animation:ar-adjust-in .26s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes ar-adjust-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ряд групп; группы разведены проксимити-gap (Gestalt, без линий) */
.ar-adjust-row{
  display:flex; align-items:flex-start; justify-content:center;
  gap:16px; flex-wrap:wrap;
}
.ar-adjust-group{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.ar-adjust-pair{ display:flex; align-items:center; gap:8px; }
.ar-adjust-cap{
  font:700 9.5px var(--ar-f); color:var(--ar-ink2);
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
}
/* цвет-кодировка групп (смысл через цвет, §4): поворот=violet, высота=blue */
.ar-g-rot   .ar-adjust-cap{ color:var(--ar-violet-lite); }
.ar-floor   .ar-adjust-cap{ color:var(--ar-blue-lite); }

/* --- слайдер масштаба (компактный; в XR движок прячет .ar-scale) --- */
.ar-scale{ display:flex; align-items:center; gap:10px; width:100%; padding:0 2px; }
.ar-scale-ico{ flex:none; display:grid; place-items:center; color:var(--ar-violet-lite); opacity:.9; }
.ar-scale-ico.is-min svg{ width:12px; height:12px; }   /* маленький размер */
.ar-scale-ico.is-max svg{ width:18px; height:18px; }   /* крупный размер */
.ar-scale-range{
  flex:1; min-width:0; height:40px; /* тач-высота */
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
/* трек залит бренд-violet (pop), не серый */
.ar-scale-range::-webkit-slider-runnable-track{
  height:4px; border-radius:var(--ar-pill); background:rgba(124,92,255,.4);
}
.ar-scale-range::-moz-range-track{
  height:4px; border-radius:var(--ar-pill); background:rgba(124,92,255,.4);
}
.ar-scale-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin-top:-6px; border-radius:50%;
  background:#fff; border:2.5px solid var(--ar-violet);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.ar-scale-range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:2.5px solid var(--ar-violet);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.ar-scale-range:focus-visible{ outline:none; }
.ar-scale-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(124,92,255,.55); }

/* --- icon-кнопка регулировки: глиф-круг 40px (тап ≥44 через padding) над подписью --- */
.ar-ctl{
  flex:none; padding:2px; border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ar-ink);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.ar-ctl-ico, .ar-lock-ico{
  width:40px; height:40px; border-radius:var(--ar-pill);
  display:grid; place-items:center; font-size:19px; line-height:1;
  background:rgba(255,255,255,.10); border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
/* поворот — violet-тинт круг + violet-глиф (pop, не серый) */
.ar-g-rot .ar-ctl-ico{ background:rgba(124,92,255,.20); color:var(--ar-violet-lite); }
.ar-g-rot .ar-ctl:hover .ar-ctl-ico{ background:rgba(124,92,255,.34); border-color:rgba(124,92,255,.55); }
/* hover/press по умолчанию — тоже бренд-violet тинт */
.ar-ctl:hover .ar-ctl-ico, .ar-ctl:hover .ar-lock-ico{ background:rgba(124,92,255,.24); border-color:rgba(124,92,255,.45); }
.ar-ctl:active{ transform:scale(.9); }
.ar-ctl:active .ar-ctl-ico, .ar-ctl:active .ar-lock-ico{ background:rgba(124,92,255,.4); }
.ar-ctl:focus-visible{ outline:none; }
.ar-ctl:focus-visible .ar-ctl-ico, .ar-ctl:focus-visible .ar-lock-ico{ outline:2px solid #fff; outline-offset:2px; }
/* фиксация активная → лаймовый «включён» (pop-статус, §4 цвет=смысл) */
.ar-ctl.is-locked .ar-lock-ico{ background:rgba(198,242,78,.30); border-color:rgba(198,242,78,.7); box-shadow:0 0 10px rgba(198,242,78,.4); color:var(--ar-lime); }
.ar-ctl-label{ font:700 9.5px var(--ar-f); color:var(--ar-ink2); white-space:nowrap; letter-spacing:.02em; text-transform:uppercase; }
.ar-ctl.is-locked .ar-ctl-label{ color:var(--ar-lime); }
/* замок = ДВА линейных SVG в .ar-lock-ico; движок тогглит .is-locked (не пишет иконку) */
.ar-ctl:not(.is-locked) .ar-lock-ico .ico-closed{ display:none; }
.ar-ctl.is-locked        .ar-lock-ico .ico-open{ display:none; }

/* --- высота: группа внутри панели; движок включает display:flex после постановки; глиф blue --- */
.ar-floor{ display:none; flex-direction:column; align-items:center; gap:3px; }
.ar-floor-pair{ display:flex; align-items:center; gap:8px; }
.ar-floor-btn{
  width:40px; height:40px; border-radius:var(--ar-pill);
  border:1px solid transparent; background:rgba(46,107,255,.20);
  color:var(--ar-blue-lite); font-size:19px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s, border-color .15s, transform .16s cubic-bezier(.34,1.56,.64,1);
}
.ar-floor-btn:hover{ background:rgba(46,107,255,.34); border-color:rgba(46,107,255,.55); }
.ar-floor-btn:active{ transform:scale(.9); background:rgba(46,107,255,.44); }
.ar-floor-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* --- PRIMARY — Поставить (яркий grad-hero, POP) / Заново (tonal), §14.A --- */
.ar-cta{ display:flex; align-items:center; justify-content:center; }
.ar-place-btn{
  min-height:48px; min-width:188px; padding:0 22px;
  border:none; border-radius:var(--ar-pill); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ar-grad); color:#fff;
  font:700 15px var(--ar-f); letter-spacing:-.01em;
  box-shadow:0 10px 24px -10px rgba(124,92,255,.55);       /* бренд-тень */
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, opacity .2s;
}
.ar-place-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(124,92,255,.75); }
.ar-place-btn:active{ transform:translateY(0) scale(.98); }
.ar-place-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* до готовности пола primary приглушён (объяснение — в hint) */
.ar-overlay[data-ar-placed="scanning"] .ar-place-btn{ opacity:.55; }

/* после постановки primary → тихая «Заново» (tonal), уступает панели; движок ставит .is-again */
.ar-place-btn.is-again{
  min-height:40px; min-width:auto; padding:0 18px;
  background:var(--ar-glass-2); color:var(--ar-ink);
  border:1px solid rgba(124,92,255,.3); box-shadow:none;
  font-size:14px; font-weight:700;
}
.ar-place-btn.is-again:hover{ background:rgba(124,92,255,.28); border-color:rgba(124,92,255,.5); transform:translateY(-1px); box-shadow:none; }

/* --- БРЕНД — тихий вордмарк без маскота: градиентный app-icon чип + bunnysplit. --- */
.ar-watermark{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 6px; border-radius:var(--ar-pill);
  background:var(--ar-glass); border:1px solid var(--ar-hair);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:.9; pointer-events:none;
}
.ar-watermark::before{           /* бренд-чип (app-icon), вместо зайца */
  content:""; flex:none; width:18px; height:18px; border-radius:6px;
  background:var(--ar-grad); box-shadow:0 2px 8px -2px rgba(124,92,255,.7);
}
.ar-wm-txt{
  font:800 12px var(--ar-fd); letter-spacing:-.01em; line-height:1;
  color:var(--ar-ink); text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.ar-wm-dot{ color:var(--ar-coral); }          /* коралловая точка — канон бренда */
.ar-wm-tld{ color:var(--ar-ink2); font-weight:600; }

/* --- НИЖНИЙ БАР: [карандаш] · вордмарк · [поделиться] --- */
.ar-actionbar{ align-self:center; display:inline-flex; align-items:center; gap:10px; }
.ar-bar-btn{
  flex:none; width:40px; height:40px; border-radius:var(--ar-pill);
  border:1px solid transparent; cursor:pointer;             /* icon-ghost: бордер на hover, как .ar-ctl */
  display:grid; place-items:center; color:var(--ar-ink);
  background:var(--ar-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .15s, border-color .15s, color .15s;
}
.ar-bar-btn svg{ width:19px; height:19px; }
.ar-bar-btn:hover{ background:rgba(124,92,255,.24); border-color:rgba(124,92,255,.45); }  /* бренд-violet тинт */
.ar-bar-btn:active{ transform:scale(.9); background:rgba(124,92,255,.36); }
.ar-bar-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* карандаш активен (панель свёрнута) → залитая violet-подсветка (§Norman: состояние видно) */
.ar-bar-btn[data-ar-action="toggle-panel"][aria-pressed="true"]{
  background:rgba(124,92,255,.32); border-color:rgba(124,92,255,.6); color:#fff;
  box-shadow:0 0 12px -2px rgba(124,92,255,.5);
}

/* #1 свёрнутая панель — прячем инфо/регулировки/CTA, оставляем только бар (можно разглядеть модель) */
.ar-controls.is-collapsed .ar-info,
.ar-controls.is-collapsed .ar-adjust,
.ar-controls.is-collapsed .ar-cta{ display:none; }

/* #4 СЕТКА-РАЗМЕР — HTML-подписи габаритов (3D-бокс рисует движок). Видны только .is-on (в момент правки). */
.ar-grid{ position:absolute; inset:0; z-index:6; pointer-events:none; display:none; }
.ar-grid.is-on{ display:block; }
/* дименшены — читаемы над ЛЮБЫМ кадром: плотный тёмный pill + violet-кант (в цвет 3D-бокса),
   двойная тень (drop + тёмное гало), tabular-nums, компактно */
.ar-grid-dim{
  position:absolute; transform:translate(-50%,-50%); display:none;
  padding:3px 8px; border-radius:var(--ar-pill); white-space:nowrap;
  background:rgba(18,18,22,.82); border:1px solid rgba(124,92,255,.6);
  color:#fff; font:700 11px var(--ar-f); font-variant-numeric:tabular-nums; letter-spacing:.01em;
  box-shadow:0 2px 10px rgba(0,0,0,.55), 0 0 0 3px rgba(12,12,16,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* «примерно» — маленький violet-тег в стиле подписей системы (uppercase, как .ar-adjust-cap) */
.ar-grid-approx{
  position:absolute; transform:translate(-50%,-100%); display:none;
  padding:2px 9px; border-radius:var(--ar-pill); white-space:nowrap;
  background:rgba(124,92,255,.34); border:1px solid rgba(124,92,255,.66);
  color:#EDE7FF; font:700 10px var(--ar-f); letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* =====================================================
   STATE SCREENS — загрузка / доступ к камере / отказ / десктоп
   Полноэкранные, поверх сцены. Klikko + заголовок + причина + действие.
   Переключение: .ar-overlay[data-ar-state="…"]
   ===================================================== */
.ar-state{
  position:absolute; inset:0; z-index:20;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center;
  padding:calc(24px + var(--ar-top)) 28px calc(24px + var(--ar-bottom));
  background:
    radial-gradient(600px 380px at 50% 30%, rgba(124,92,255,.22), transparent 70%),
    #0e0e13;
}
.ar-overlay[data-ar-state="loading"]    .ar-state-loading,
.ar-overlay[data-ar-state="permission"] .ar-state-permission,
.ar-overlay[data-ar-state="denied"]     .ar-state-denied,
.ar-overlay[data-ar-state="desktop"]    .ar-state-desktop{ display:flex; }

/* state-экран тоже даёт «крестик» выйти */
.ar-state .ar-close{ position:absolute; top:calc(12px + var(--ar-top)); right:14px; }

/* Бренд-знак state-экранов — БЕЗ маскота: градиентный app-icon чип (коралл→фиолет).
   Узел .ar-state-klikko сохранён (движок ещё вешал onerror), но это <div>, не <img>. */
.ar-state-klikko{
  width:88px; height:88px; border-radius:26px; margin-bottom:10px;
  background:var(--ar-grad);
  box-shadow:0 18px 34px -14px rgba(124,92,255,.6), inset 0 1px 0 rgba(255,255,255,.35);
  animation:ar-klikko-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.ar-state-loading .ar-state-klikko{ animation:ar-klikko-float 1.6s ease-in-out infinite; }
.ar-state-title{
  font:800 21px var(--ar-fd); letter-spacing:-.02em; color:#fff; margin:2px 0 0;
}
.ar-state-sub{
  font:500 14.5px var(--ar-f); color:var(--ar-ink2); line-height:1.5;
  max-width:320px; margin:0 0 6px;
}
.ar-state-btn{
  min-height:52px; padding:0 26px; margin-top:8px;
  border:none; border-radius:var(--ar-pill); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--ar-grad); color:#fff; font:700 16px var(--ar-f);
  box-shadow:0 12px 30px -10px rgba(124,92,255,.75);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.ar-state-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(124,92,255,.9); }
.ar-state-btn:active{ transform:translateY(0) scale(.98); }
.ar-state-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.ar-state-btn.is-ghost{
  background:transparent; color:var(--ar-ink2); box-shadow:none;
  border:1px solid var(--ar-hair); font-weight:600;
}
.ar-state-btn.is-ghost:hover{ background:rgba(255,255,255,.06); color:#fff; }

/* спиннер загрузки модели */
.ar-spinner{
  width:34px; height:34px; margin-top:4px;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:var(--ar-coral);
  border-radius:50%;
  animation:ar-spin .8s linear infinite;
}
@keyframes ar-spin{ to{ transform:rotate(360deg); } }
@keyframes ar-klikko-pop{
  0%  { transform:scale(.6) rotate(-6deg); opacity:0; }
  60% { transform:scale(1.08) rotate(2deg); }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
@keyframes ar-klikko-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}

/* --- памятка «зачем камера» на permission-экране --- */
.ar-perm-why{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; margin-top:2px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid var(--ar-hair);
  font:500 12.5px var(--ar-f); color:var(--ar-ink2); max-width:320px;
}
.ar-perm-why::before{  /* линейный замок (SVG-маска, currentColor), вместо emoji 🔒 */
  content:""; width:15px; height:15px; flex:none; background:currentColor;
  -webkit-mask:var(--ar-ico-lock) center/contain no-repeat; mask:var(--ar-ico-lock) center/contain no-repeat;
}

/* --- desktop / нет камеры: QR + ссылка «открой на смартфоне» --- */
.ar-qr{
  width:172px; height:172px; margin:6px 0 4px; border-radius:18px;
  background:#fff; padding:12px;
  display:grid; place-items:center;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6);
}
.ar-qr img, .ar-qr canvas, .ar-qr svg{ width:100%; height:100%; display:block; image-rendering:pixelated; }
.ar-qr-ph{ color:#111; font:700 12px var(--ar-f); opacity:.4; } /* заглушка пока QR нет */
.ar-qr-link{
  font:600 13px var(--ar-f); color:#c9b8ff; word-break:break-all;
  text-decoration:none; max-width:300px;
}
.ar-qr-link:hover{ text-decoration:underline; }

/* =====================================================
   SMALL — лёгкий чип «модель грузится» в живом режиме
   (если камера уже поднялась, а модель ещё тянется)
   Движок ставит .is-on
   ===================================================== */
.ar-model-loading{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:6; display:none; align-items:center; gap:10px;
  padding:12px 18px; border-radius:var(--ar-pill);
  background:var(--ar-glass-2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--ar-hair); font:600 13px var(--ar-f); color:#fff;
}
.ar-model-loading.is-on{ display:inline-flex; }
.ar-model-loading .ar-spinner{ width:20px; height:20px; border-width:2.5px; margin:0; }

/* =====================================================
   РЕСПОНСИВ / ДОСТУПНОСТЬ
   ===================================================== */
@media (max-width:380px){
  .ar-place-btn{ min-width:180px; font-size:15px; }
  .ar-adjust-row{ gap:16px; }        /* группы ближе, но проксимити внутри-группы < между-группами */
  .ar-hint{ bottom:172px; font-size:13px; }
}

/* планшет/десктоп с камерой — сузим панель, чтобы не растягивалась во всю ширину */
@media (min-width:768px){
  .ar-controls{ left:50%; right:auto; transform:translateX(-50%); width:min(520px, 92vw); }
  .ar-topbar{ padding-left:20px; padding-right:20px; }
}

/* уважаем reduced-motion: гасим бесконечные анимации, оставляем читаемость */
@media (prefers-reduced-motion:reduce){
  .ar-reticle::before,
  .ar-hint,
  .ar-state-klikko,
  .ar-adjust,
  .ar-spinner{ animation:none !important; }
  .ar-overlay *{ transition-duration:.01ms !important; }
  .ar-hint{ transform:translateX(-50%); }
}