/* Clike update — блок версии в подвале + fullscreen overlay обновления.
   Синий берём из фирменного --ds-link; оранжевый — фирменный бренд Clike. */
:root{
  --clike-orange:#ff6a00;
  --clike-orange-light:#ff9a00;
  --clike-upd-blue:var(--ds-link, #3390ec);
  --clike-upd-card:#090d15;
  --clike-upd-muted:#9da8ba;
}

/* ---- Блокировка прокрутки при открытом overlay ---- */
html.clike-update-locked,
body.clike-update-locked{ overflow:hidden !important; overscroll-behavior:none; }

/* ============================ Блок версии в подвале ====================== */
.clike-version-control{
  min-width:0; max-width:100%;
  display:inline-flex; align-items:center; gap:6px;
  padding:0 10px; border-radius:999px;                  /* капсула */
  border:1px solid var(--ds-seg-bd, var(--ds-panel-bd)); background:var(--ds-panel); color:inherit;
  font-family:inherit; text-align:left; box-sizing:border-box;
  transition:border-color .15s, background .15s;
}
.clike-version-control:not(.has-update){ cursor:default; height:28px; }  /* точно в размер переключателя темы */
.clike-version-icon{ display:none; flex:none; color:var(--clike-upd-blue); }
.clike-version-icon svg{ width:13px; height:13px; }
.clike-version-body{ display:flex; align-items:center; gap:6px; min-width:0; }
.clike-version-title{ flex:none; font-size:11px; font-weight:500; line-height:1; color:var(--ds-ink); white-space:nowrap; }
.clike-version-sep{ flex:none; align-self:center; width:1px; height:11px; color:transparent; background:var(--ds-panel-bd); margin:0; }
.clike-version-meta{
  flex:none; white-space:nowrap;
  color:var(--ds-muted, #8f98a8); font-size:10.5px; line-height:1; letter-spacing:.005em;
}

/* Состояние «доступно обновление»: синяя обводка, иконка, заголовок синим, версии в 2 строки. */
.clike-version-control.has-update{
  cursor:pointer;
  border-color:color-mix(in srgb, var(--clike-upd-blue) 62%, transparent);
  background:transparent;
}
.clike-version-control.has-update:hover{ background:color-mix(in srgb, var(--clike-upd-blue) 9%, transparent); }
.clike-version-control.has-update:focus-visible{ outline:2px solid var(--clike-upd-blue); outline-offset:2px; }
.has-update{ padding:3px 10px; }
.has-update .clike-version-icon{ display:flex; }
.has-update .clike-version-sep{ display:none; }
.has-update .clike-version-body{ flex-direction:column; align-items:flex-start; gap:0; }
.has-update .clike-version-title{ color:var(--clike-upd-blue); font-weight:600; font-size:11px; line-height:1.25; }
.has-update .clike-version-meta{ font-size:10px; line-height:1.2; }
.has-update .clike-version-meta .clike-v-new{ color:var(--clike-upd-blue); font-weight:700; }

/* ============================ Fullscreen overlay ========================= */
.clike-update-overlay{
  position:fixed; inset:0; z-index:2147483000;
  display:grid; place-items:center; padding:20px; overflow:auto;
  background:#05070d;
  /* Фон ПОЛНОСТЬЮ непрозрачный и БЕЗ backdrop-filter: на iOS Safari и полупрозрачный фон,
     и backdrop-filter дают проступающий шов границы дочернего композиционного слоя
     (логотип с pulse-анимацией) в виде светлого квадрата. Сплошной фон убирает это. */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 240ms ease, visibility 240ms ease;
}
.clike-update-overlay[hidden]{ display:none; }
.clike-update-overlay.is-visible{ opacity:1; visibility:visible; pointer-events:auto; }

.clike-update-card{
  position:relative; width:min(620px, 100%);
  max-height:calc(100dvh - 40px); overflow:auto;
  padding:38px 34px 30px;
  border:1px solid rgba(255,255,255,.08); border-radius:30px;
  color:#fff; text-align:center;
  background:radial-gradient(circle at 50% 4%, rgba(255,106,0,.15), transparent 34%), var(--clike-upd-card);
  box-shadow:0 32px 100px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04);
  transform:translateY(12px) scale(.97); transition:transform 300ms ease;
}
.clike-update-overlay.is-visible .clike-update-card{ transform:translateY(0) scale(1); }

/* ---- Логотип + вращающиеся дуги ---- */
.clike-update-loader{ position:relative; width:220px; height:220px; margin:0 auto; }
/* Каждое кольцо — отдельный <svg>, крутится ЦЕЛИКОМ как элемент (transform-origin:center
   по умолчанию для box'а элемента). Так вращение работает во ВСЕХ браузерах, включая
   iOS Safari, где transform-box:fill-box на <circle> не крутит (баг Safari). */
.clike-update-ring{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  transform-origin:center center; will-change:transform;
}
.clike-update-ring circle{ fill:none; stroke-linecap:round; }
.clike-ring-one{ animation:clike-ring-cw 2.4s linear infinite; }
.clike-ring-one circle{ stroke:#ff6a00; stroke-width:8; stroke-dasharray:390 270;
  filter:drop-shadow(0 0 8px rgba(255,106,0,.8)); }
.clike-ring-two{ animation:clike-ring-ccw 3.4s linear infinite; opacity:.9; }
.clike-ring-two circle{ stroke:#ff9400; stroke-width:5; stroke-dasharray:210 320;
  filter:drop-shadow(0 0 6px rgba(255,148,0,.65)); }
.clike-ring-three{ animation:clike-ring-cw 4.5s linear infinite; }
.clike-ring-three circle{ stroke:rgba(255,106,0,.72); stroke-width:3; stroke-dasharray:130 280;
  filter:drop-shadow(0 0 5px rgba(255,106,0,.55)); }
.clike-update-logo{
  position:absolute; inset:50px; display:grid; place-items:center;
  background:transparent;                    /* без подложки — логотип на прозрачном фоне */
  /* НЕ ставим border-radius: логотип из-за pulse-анимации промоутится в композиционный
     слой, и на iOS Safari border-radius этого слоя рисуется видимым скруглённым квадратом.
     Фон прозрачный — скругление тут не нужно. */
  animation:clike-logo-pulse 2.2s ease-in-out infinite;
}
/* Мягкое КРУГЛОЕ свечение под логотипом (radial-gradient, БЕЗ filter).
   Раньше свечение делал filter:drop-shadow на <img> — на iOS Safari его прямоугольная
   filter-область вместе с backdrop-filter overlay рисовалась видимым квадратом. */
.clike-update-logo::before{
  content:""; position:absolute; inset:-14%; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(255,106,0,.34), rgba(255,106,0,.12) 46%, transparent 68%);
  pointer-events:none;
}
.clike-update-logo img,
.clike-update-logo svg{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; }

@keyframes clike-ring-cw{ to{ transform:rotate(360deg); } }
@keyframes clike-ring-ccw{ to{ transform:rotate(-360deg); } }
@keyframes clike-logo-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }

/* ---- Тексты ---- */
.clike-update-card h2{ margin:20px 0 10px; font-size:clamp(26px, 5vw, 42px); line-height:1.08; }
#clikeUpdateDescription{ margin:0; color:var(--clike-upd-muted); font-size:16px; line-height:1.5; }

/* ---- Версии ---- */
.clike-update-versions{ display:flex; align-items:center; justify-content:center; gap:14px; margin:26px 0; flex-wrap:wrap; }
.clike-update-versions > span:not(.clike-update-arrow){ padding:9px 16px; border-radius:999px; font-size:14px; font-weight:700; }
#clikeCurrentVersionBadge{ color:#aab4c5; background:rgba(255,255,255,.06); }
.clike-update-arrow{ color:#ff7a00; font-size:22px; }
#clikeTargetVersionBadge{ color:#fff; background:linear-gradient(135deg, #ff6500, #ff9500); box-shadow:0 8px 24px rgba(255,106,0,.24); }

/* ---- Прогресс ---- */
.clike-update-progress-row{ display:flex; align-items:center; gap:14px; }
.clike-update-progress{ position:relative; flex:1; height:9px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.09); }
.clike-update-progress-fill{
  position:absolute; inset:0 auto 0 0; width:var(--progress, 0%); overflow:hidden; border-radius:inherit;
  background:linear-gradient(90deg, #ff6500, #ff9b00); box-shadow:0 0 18px rgba(255,106,0,.62);
  transition:width 320ms ease;
}
.clike-update-progress-fill::after{
  content:""; position:absolute; top:0; left:-40%; width:34%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation:clike-progress-shine 1.2s linear infinite;
}
@keyframes clike-progress-shine{ to{ left:125%; } }
#clikeUpdateProgressValue{ min-width:46px; color:#ff8c00; font-weight:800; text-align:right; }

.clike-update-warning{ margin:22px 0 26px; color:var(--clike-upd-muted); font-size:14px; }

/* ---- Этапы: иконка + название + описание, между ними разделители-точки ---- */
.clike-update-steps{ display:flex; align-items:flex-start; justify-content:center; gap:6px; }
.clike-update-step{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#697385; text-align:center;
  transition:color 220ms ease;
}
.clike-update-step-name{ font-size:13px; font-weight:700; line-height:1.2; }
.clike-update-step-desc{ font-size:11px; font-weight:500; line-height:1.32; color:#5b6576; max-width:15ch; }
.clike-update-step.is-active .clike-update-step-desc,
.clike-update-step.is-completed .clike-update-step-desc{ color:#8a94a6; }
.clike-update-step-sep{ flex:0 0 auto; display:flex; align-items:center; gap:4px; margin-top:24px; }
.clike-update-step-sep span{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.22); }
.clike-update-step-icon{
  display:grid; place-items:center; width:56px; height:56px;
  border:1px solid rgba(255,255,255,.07); border-radius:50%; background:rgba(255,255,255,.035);
  color:#697385;
  transition:color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.clike-update-step.is-active{ color:#fff; }
.clike-update-step.is-active .clike-update-step-icon{
  color:#ff7800; border-color:rgba(255,106,0,.44);
  box-shadow:0 0 22px rgba(255,106,0,.2), inset 0 0 14px rgba(255,106,0,.08);
}
.clike-update-step.is-completed{ color:#fff; }
.clike-update-step.is-completed .clike-update-step-icon{ color:#fff; border-color:transparent; background:linear-gradient(135deg, #ff6500, #ff9300); }
.clike-update-step.is-error .clike-update-step-icon{ color:#ff5a5f; border-color:rgba(255,90,95,.5); }

/* ---- Безопасность данных ---- */
.clike-update-security{
  display:flex; align-items:center; gap:15px; margin-top:28px; padding:16px 18px;
  border:1px solid rgba(255,255,255,.07); border-radius:18px; text-align:left; background:rgba(255,255,255,.025);
}
.clike-update-security-icon{
  display:grid; flex:0 0 42px; place-items:center; width:42px; height:42px; border-radius:50%;
  color:#ff7900; background:rgba(255,106,0,.12);
}
.clike-update-security strong{ font-size:14px; }
.clike-update-security p{ margin:4px 0 0; color:var(--clike-upd-muted); font-size:13px; line-height:1.45; }

/* ---- Ошибка ---- */
.clike-update-error{ padding:20px 0; }
.clike-update-error h2{ margin:12px 0 8px; font-size:clamp(22px, 4vw, 30px); }
.clike-update-error > p{ color:var(--clike-upd-muted); font-size:15px; }
.clike-update-error-actions{ display:flex; justify-content:center; gap:12px; margin-top:24px; }
.clike-update-btn{
  min-height:44px; padding:0 18px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff;
  font:600 14px/1 inherit;
}
.clike-update-btn:hover{ background:rgba(255,255,255,.1); }
.clike-update-btn:focus-visible{ outline:2px solid var(--clike-upd-blue); outline-offset:2px; }
.clike-update-btn--primary{ border-color:transparent; background:linear-gradient(135deg, #ff6500, #ff9500); color:#1c1206; }

/* ============================ Мобильные ================================= */
@media (max-width:600px){
  .clike-update-overlay{ padding:12px; }
  .clike-update-card{ max-height:calc(100dvh - 24px); padding:26px 18px 22px; border-radius:24px; }
  .clike-update-loader{ width:168px; height:168px; }
  .clike-update-logo{ inset:42px; }
  .clike-update-versions{ gap:8px; }
  .clike-update-versions > span:not(.clike-update-arrow){ padding:8px 12px; font-size:12px; }
  .clike-update-step-icon{ width:48px; height:48px; }
  .clike-update-step{ font-size:12px; }
  .clike-update-security{ align-items:flex-start; }
  .clike-update-error-actions{ flex-direction:column; }
  .clike-update-btn{ width:100%; }
}
@media (max-width:360px){
  .clike-update-loader{ width:148px; height:148px; }
  .clike-update-logo{ inset:36px; }
}

/* ============================ Reduced motion ============================ */
@media (prefers-reduced-motion:reduce){
  .clike-update-ring, .clike-update-logo, .clike-update-progress-fill::after{ animation:none !important; }
  .clike-ring-one circle{ stroke-dasharray:none; opacity:.85; }
  .clike-update-card, .clike-update-overlay, .clike-update-progress-fill{ transition-duration:.01ms !important; }
}