/* Оформление Хаба, W-lib и Wiki: стекло, свет, движение (18.10.2026).
 *
 * Владелец 18.10.2026: «Хаб и W-lib слишком простые и некрасивые — добавить
 * анимации и эффекты с текстурами. В Wiki ничего не понятно и всё сливается:
 * тоже анимации, эффекты, текстуры и больше картинок».
 *
 * Слой подключён последним и только украшает: разметку не меняет (кроме
 * плиток разделов Wiki — их рисует wiki.js). Всё движение — transform и
 * opacity; при data-fx="off" и «меньше движения» стоит на месте.
 * Появление при прокрутке — webapp/skin.js (класс .sk-rev → .is-in).
 */

:root {
  --sk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ */
/* Появление при прокрутке (skin.js ставит .sk-rev только тому, что     */
/* ещё ниже экрана: без скрипта ничего не прячется).                    */
/* ------------------------------------------------------------------ */
.sk-rev { opacity: 0; transform: translateY(18px) scale(0.985); }
.sk-rev.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--sk-ease), transform 0.7s var(--sk-ease);
  transition-delay: var(--sk-d, 0ms);
}
html[data-fx="off"] .sk-rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sk-rev { opacity: 1; transform: none; } }

/* Блик: полоса света по карточке при касании и наведении. */
.sk-shine { position: relative; overflow: hidden; }
.sk-shine::after {
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg) translateX(0); opacity: 0;
}
.sk-shine:hover::after, .sk-shine:active::after, .sk-shine.is-glint::after {
  animation: sk-glint 0.9s var(--sk-ease);
}
@keyframes sk-glint { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 20% { opacity: 1; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }
html[data-fx="off"] .sk-shine::after { display: none; }

/* ================================================================== */
/* ХАБ — онлайн-кинотеатр и жидкое стекло (владелец 18.10.2026: «хаб в     */
/* стиле онлайн-кинотеатров, жидкое стекло, убери зерно»).                 */
/* ================================================================== */
/* Фон — свет текущей обложки, размытый на весь экран (skin.js кладёт её
   в --hub-amb), как в Apple TV и Кинопоиске; поверх — виньетка. Стеклу
   есть что преломлять: цвет фона просвечивает сквозь шапку и карточки. */
.hub {
  isolation: isolate;
  --glass: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.09));
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  background: #050507;
}
.hub::before {
  content: ""; position: fixed; inset: -18%; z-index: -2; pointer-events: none;
  background: var(--hub-amb, none) center 20% / cover no-repeat,
              radial-gradient(60% 45% at 30% 20%, var(--h-tint), transparent 70%);
  filter: blur(64px) saturate(1.5) brightness(0.62);
  transform: translateZ(0);
  transition: opacity 0.8s;
}
.hub::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 75% at 50% 0, transparent 35%, rgba(5, 5, 7, 0.75) 78%),
    linear-gradient(to bottom, rgba(5, 5, 7, 0) 30%, rgba(5, 5, 7, 0.85) 100%);
}

/* Жидкое стекло: полупрозрачная заливка, размытие с насыщением, светлый
   кант сверху и блик в углу — общее для шапки, вкладок, карточек, кнопок. */
.hub .hub-top, .hub .hub-tabs, .hub .hub-pill, .hub .hub-ava, .hub .hero-more,
.hub .season-card, .hub .wallet, .hub .hub-tool, .hub .hub-invite, .hub .news-row, .hub .tile, .hub .poster-badge {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), 0 12px 32px rgba(0, 0, 0, 0.38);
}
.hub .season-card, .hub .wallet, .hub .hub-tool, .hub .hub-invite, .hub .news-row, .hub .tile {
  position: relative; overflow: hidden; border-radius: 20px;
  transition: transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease), border-color 0.3s;
}
.hub .season-card::before, .hub .wallet::before, .hub .hub-tool::before, .hub .hub-invite::before,
.hub .news-row::before, .hub .tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 70% at 0 0, rgba(255, 255, 255, 0.16), transparent 45%);
}
.hub .season-card:hover, .hub .wallet:hover, .hub .hub-tool:hover, .hub .hub-invite:hover,
.hub .news-row:hover, .hub .tile:hover {
  transform: translateY(-3px) scale(1.01); border-color: rgba(255, 255, 255, 0.28);
  box-shadow: var(--glass-rim), 0 22px 44px rgba(0, 0, 0, 0.5);
}
.hub .hub-tool-donate {
  background: linear-gradient(135deg, rgba(255, 90, 54, 0.85), rgba(255, 46, 99, 0.75));
  border-color: rgba(255, 255, 255, 0.28);
}

/* Шапка — стеклянная полоса, кнопки — стеклянные капсулы. */
.hub .hub-top {
  background: linear-gradient(to bottom, rgba(5, 5, 7, 0.55), rgba(5, 5, 7, 0.25));
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.hub .hub-pill { border-radius: 999px; }
.hub .hub-ava { border-radius: 50%; }

/* Вкладки модулей — стеклянный переключатель, как у стримингов. */
.hub .hub-tabs {
  gap: 4px; margin: 4px 16px 14px; padding: 4px; width: max-content; max-width: calc(100% - 32px);
  border-radius: 999px;
}
.hub .hub-tab {
  padding: 8px 14px; border: 0; border-radius: 999px; font-size: 13.5px; color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s, background 0.25s var(--sk-ease);
}
.hub .hub-tab.is-on { color: #0A0A0C; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }

/* Афиши модулей — билборды: скругление, стеклянный кант, длинная тень,
   медленный наезд камеры на обложку. */
.poster.hub-slide {
  border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 30px 60px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s var(--sk-ease), box-shadow 0.4s var(--sk-ease);
}
.poster.hub-slide:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 40px 70px rgba(0, 0, 0, 0.65); }
.hub-slide .hero-cover, .hub-slide .poster-cover { transform-origin: 50% 30%; animation: sk-kenburns 22s ease-in-out infinite alternate; }
@keyframes sk-kenburns { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.1) translateY(-2%); } }
.hub-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14), transparent 28%);
  mix-blend-mode: screen;
}
.hub .hub-slide .poster-badge { border-radius: 999px; padding: 5px 11px; letter-spacing: 0.1em; }
.hub .poster:not(.is-soon) .poster-badge { background: linear-gradient(135deg, rgba(255, 90, 54, 0.9), rgba(255, 46, 99, 0.85)); }
.hub .hero-play { border-radius: 999px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.hub .hero-more { border-radius: 999px; color: #FFFFFF; }
.hub .hub-slide.theme-ink .hero-play { border-radius: 999px; }
.hub-dots i { background: rgba(255, 255, 255, 0.3); }
.hub-dots i.is-on { box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }

/* Ряды — как на витрине стриминга: крупный заголовок и стрелка. */
.hub .row-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hub .row-title::after { content: "›"; font-size: 24px; line-height: 1; color: rgba(255, 255, 255, 0.5); transform: translateY(-1px); }
.hub .season-thumb { border-radius: 16px; margin: 6px; min-height: 80px;
  background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.hub .season-bar { background: rgba(255, 255, 255, 0.14); }
.hub .season-bar i { position: relative; overflow: hidden; }
.hub .season-bar i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%); animation: sk-run 2.6s ease-in-out infinite;
}
@keyframes sk-run { to { transform: translateX(100%); } }
.poster { transition: transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease); }
.row-scroll .poster { border-radius: 16px; }
.row-scroll .poster:hover:not(:disabled) { transform: translateY(-4px) scale(1.03); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.6); }

/* Без поддержки размытия стекло темнее, чтобы текст читался. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hub .season-card, .hub .wallet, .hub .hub-tool, .hub .hub-invite, .hub .news-row, .hub .tile,
  .hub .hub-tabs, .hub .hub-top { background: rgba(28, 28, 34, 0.94); }
}
html[data-fx="off"] .hub-slide .hero-cover, html[data-fx="off"] .hub-slide .poster-cover,
html[data-fx="off"] .hub .season-bar i::after { animation: none; }
html[data-fx="lite"] .hub::before { filter: blur(40px) saturate(1.3) brightness(0.6); }
@media (prefers-reduced-motion: reduce) {
  .hub-slide .hero-cover, .hub-slide .poster-cover, .hub .season-bar i::after { animation: none; }
}

/* ================================================================== */
/* W-LIB — бумага, тушь, скринтон                                       */
/* ================================================================== */
.wlib {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, 0.55), transparent 60%),
    var(--wl-paper);
}
/* Шапка: линии скорости и красный мазок под названием. */
.wl-head {
  background:
    repeating-linear-gradient(90deg, rgba(27, 23, 18, 0.05) 0 1px, transparent 1px 9px),
    var(--wl-paper);
}
.wl-head-title { position: relative; display: inline-block; justify-self: center; isolation: isolate; }
.wl-head-title::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 6px; height: 7px; z-index: -1;
  background: var(--wl-red); opacity: 0.85; transform: skewX(-14deg) scaleX(0); transform-origin: left;
  animation: sk-stroke 0.9s 0.2s var(--sk-ease) forwards;
}
@keyframes sk-stroke { to { transform: skewX(-14deg) scaleX(1); } }

/* Баннер: скринтон в тени, лёгкое покачивание панели при касании. */
.wl-banner { transition: transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease); }
.wl-banner:hover { transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--wl-ink); }
.wl-banner > img { transform-origin: 60% 30%; animation: sk-kenburns 26s ease-in-out infinite alternate; }
.wl-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(27, 23, 18, 0.28) 1px, transparent 1.5px) 0 0 / 5px 5px;
  -webkit-mask-image: linear-gradient(200deg, transparent 35%, #000 95%);
          mask-image: linear-gradient(200deg, transparent 35%, #000 95%);
  mix-blend-mode: multiply; opacity: 0.55;
}
.wl-banner-body h1 { text-shadow: 3px 3px 0 rgba(216, 53, 42, 0.35); }

/* Заголовки разделов: тушевая плашка-выноска. */
.wl-section-head { position: relative; border-bottom: 3px solid var(--wl-ink); }
.wl-section-head::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 54px; height: 3px; background: var(--wl-red);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--sk-ease);
}
.wl-section.is-in .wl-section-head::after, .wl-section-head.is-in::after { transform: scaleX(1); }
.wl-section h2, .wl-h2 { letter-spacing: -0.01em; }

/* Обложки: сдвинутая тень растёт при касании, как у вырезанной панели. */
.wl-card img, .wl-card-blank, .wl-tile img, .wl-tile .wl-card-blank {
  transition: transform 0.25s var(--sk-ease), box-shadow 0.25s var(--sk-ease);
  box-shadow: 4px 4px 0 var(--wl-ink);
}
.wl-card:hover img, .wl-tile:hover img, .wl-card:active img, .wl-tile:active img {
  transform: translate(-3px, -3px) rotate(-0.8deg); box-shadow: 8px 8px 0 var(--wl-red);
}
.wl-card-blank, .wl-tile .wl-card-blank {
  background:
    radial-gradient(rgba(27, 23, 18, 0.18) 1px, transparent 1.4px) 0 0 / 6px 6px,
    var(--wl-white);
}
/* Строки топа и новых глав: номер выезжает, бумага темнеет под пальцем. */
.wl-line { transition: background 0.2s, padding 0.25s var(--sk-ease); }
.wl-line:hover, .wl-line:active { background: rgba(27, 23, 18, 0.05); padding-left: 6px; }
.wl-num { text-shadow: 2px 2px 0 rgba(27, 23, 18, 0.15); }
/* Шкала очков: кольцо крутится, пока страница открыта. */
.wl-ring { position: relative; }
.wl-ring::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px dashed rgba(216, 53, 42, 0.55); animation: sk-spin 14s linear infinite;
}
@keyframes sk-spin { to { transform: rotate(360deg); } }
.wl-meter, .wl-empty {
  background:
    radial-gradient(rgba(27, 23, 18, 0.07) 1px, transparent 1.4px) 0 0 / 6px 6px,
    var(--wl-white);
  box-shadow: 5px 5px 0 var(--wl-ink);
}
.wl-btn { transition: transform 0.15s var(--sk-ease), box-shadow 0.15s var(--sk-ease); box-shadow: 3px 3px 0 var(--wl-ink); }
.wl-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--wl-ink); }
.wl-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--wl-ink); }
.wl-btn-red { box-shadow: 3px 3px 0 var(--wl-ink); }
.wl-chip { transition: transform 0.15s var(--sk-ease); }
.wl-chip:active { transform: scale(0.95); }

html[data-fx="off"] .wl-banner > img, html[data-fx="off"] .wl-ring::before,
html[data-fx="off"] .wl-head-title::after { animation: none; }
html[data-fx="off"] .wl-head-title::after { transform: skewX(-14deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .wl-banner > img, .wl-ring::before { animation: none; }
  .wl-head-title::after { animation: none; transform: skewX(-14deg) scaleX(1); }
}

/* ================================================================== */
/* WIKI — досье архива: читать легче, разделы с лицами                  */
/* ================================================================== */
.wiki {
  /* Контраст выше: прежний тусклый текст сливался с фоном. */
  --wk-dim: #8DB59A;
  --wk-text: #DCEFE2;
  --wk-line: #355A44;
  --wk-card: #101D16;
  font-size: 14px;
  background:
    radial-gradient(90% 40% at 50% -6%, rgba(159, 224, 176, 0.14), transparent 70%),
    radial-gradient(70% 40% at 100% 70%, rgba(229, 72, 77, 0.06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(159, 224, 176, 0.045) 0 1px, transparent 1px 16px),
    var(--wk-bg);
  background-attachment: fixed, fixed, local, fixed;
}
.wk-head-title { text-shadow: 0 0 14px rgba(159, 224, 176, 0.55); }
.wk-head-title::after {
  content: "▌"; margin-left: 4px; color: var(--wk-mint); animation: sk-blink 1.05s steps(1) infinite;
}
@keyframes sk-blink { 50% { opacity: 0; } }
.wk-lab { font-size: 11.5px; color: #A9CDB4; }
.wk-note, .wk-small { color: #A3C7AE; }
.wk-h2 { position: relative; padding-left: 12px; font-size: 13.5px; }
.wk-h2::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: var(--wk-mint); box-shadow: 0 0 10px var(--wk-mint); }

/* Карточки-досье: уголки скобками и сканлайн. */
.wk-box {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(159, 224, 176, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, rgba(159, 224, 176, 0.06), transparent 50%),
    var(--wk-card);
  transition: border-color 0.2s, transform 0.25s var(--sk-ease), box-shadow 0.25s var(--sk-ease);
}
.wk-box::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--wk-mint), var(--wk-mint)) 0 0 / 12px 2px no-repeat,
    linear-gradient(var(--wk-mint), var(--wk-mint)) 0 0 / 2px 12px no-repeat,
    linear-gradient(var(--wk-mint), var(--wk-mint)) 100% 100% / 12px 2px no-repeat,
    linear-gradient(var(--wk-mint), var(--wk-mint)) 100% 100% / 2px 12px no-repeat;
  opacity: 0.8;
}
button.wk-box:hover { border-color: var(--wk-mint); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(159, 224, 176, 0.15); }

/* Плитки разделов: две колонки, лица справа, свой цвет у каждого. */
.wk-secs {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: none; border: 0;
}
.wk-sec {
  --c: var(--wk-mint);
  position: relative; overflow: hidden; min-height: 92px; padding: 12px 12px 10px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 2px; align-content: start;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background:
    linear-gradient(100deg, var(--wk-card) 42%, color-mix(in srgb, var(--wk-card) 30%, transparent) 78%),
    radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%),
    var(--wk-card);
  transition: transform 0.25s var(--sk-ease), border-color 0.2s, box-shadow 0.25s var(--sk-ease);
  animation: sk-rise 0.5s var(--sk-ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.wk-sec:hover, .wk-sec:active { transform: translateY(-2px); border-color: var(--c);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 22px color-mix(in srgb, var(--c) 22%, transparent); }
.wk-sec-art { position: absolute; inset: 0 0 0 auto; width: 62%; display: flex; justify-content: flex-end; z-index: 0; pointer-events: none; }
.wk-sec-art img {
  width: 46%; height: 100%; object-fit: cover; margin-left: -14%;
  filter: grayscale(1) contrast(1.2) brightness(0.85);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
          mask-image: linear-gradient(90deg, transparent, #000 45%);
  transition: filter 0.3s, transform 0.5s var(--sk-ease);
}
.wk-sec:hover .wk-sec-art img { filter: grayscale(1) contrast(1.3) brightness(1); transform: scale(1.05); }
.wk-sec-ic, .wk-sec b, .wk-sec span.wk-sec-name { position: relative; z-index: 1; }
.wk-sec-ic { width: 26px; height: 26px; display: grid; place-items: center; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: rgba(0, 0, 0, 0.35); }
.wk-sec-ic .ic { width: 16px; height: 16px; }
.wk-sec b { font-size: 26px; line-height: 1.05; margin-top: 6px; color: var(--c); text-shadow: 0 0 16px color-mix(in srgb, var(--c) 45%, transparent); }
.wk-sec span.wk-sec-name { font-size: 11.5px; letter-spacing: 0.1em; color: var(--wk-hi); text-shadow: 0 1px 6px #000; }
.wk-sec[data-kind="character"] { --c: #9FE0B0; }
.wk-sec[data-kind="organization"] { --c: #F2B35B; }
.wk-sec[data-kind="series"] { --c: #8EC5FF; }
.wk-sec[data-kind="mastery"] { --c: #C59BFF; }
.wk-sec[data-kind="skill"] { --c: #FF7A7F; }
.wk-sec[data-kind="card"] { --c: #4FE3D8; }
.wk-sec[data-kind="path"] { --c: #FFD36E; }
.wk-sec[data-kind="term"] { --c: #B8D4C2; }
.wk-sec[data-kind="place"] { --c: #7FD3FF; }
.wk-sec[data-kind="system"] { --c: #4FE3D8; }
@keyframes sk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Списки: крупнее портрет, полоса цвета у строки под пальцем. */
.wk-line { position: relative; transition: background 0.2s, padding 0.25s var(--sk-ease); }
.wk-line::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--wk-mint); transform: scaleY(0); transition: transform 0.25s var(--sk-ease); }
.wk-line:hover, .wk-line:active { background: #13241A; padding-left: 14px; }
.wk-line:hover::before, .wk-line:active::before { transform: scaleY(1); }
.wk-thumb { width: 46px; height: 56px; box-shadow: 0 0 0 1px rgba(159, 224, 176, 0.25), 0 6px 14px rgba(0, 0, 0, 0.4); }
.wk-line-body b { font-size: 14.5px; }
.wk-line-body span { font-size: 12px; color: #9DC2A8; }

/* Портрет досье: лёгкая рамка-свечение и сканлайн поверх. */
.wk-photo { box-shadow: 0 0 0 1px rgba(159, 224, 176, 0.3), 0 10px 24px rgba(0, 0, 0, 0.5); }
.wk-id-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
.wk-stamp { animation: sk-stamp 0.5s 0.15s var(--sk-ease) both; }
@keyframes sk-stamp { from { opacity: 0; transform: scale(1.8) rotate(-24deg); } to { opacity: 1; transform: none; } }
.wk-chip { transition: border-color 0.2s, color 0.2s, background 0.2s; }
.wk-chip:hover { border-color: var(--wk-mint); background: rgba(159, 224, 176, 0.08); }
.wk-btn { transition: transform 0.15s var(--sk-ease), box-shadow 0.2s; }
.wk-btn:not(.wk-btn-line):not(.wk-btn-ghost):not(.wk-btn-red) { box-shadow: 0 0 18px rgba(159, 224, 176, 0.25); }
.wk-btn:active:not(:disabled) { transform: scale(0.97); }
.wk-search { transition: border-color 0.2s, box-shadow 0.2s; }
.wk-search:focus-within { box-shadow: 0 0 0 3px rgba(159, 224, 176, 0.15), 0 0 24px rgba(159, 224, 176, 0.15); }

html[data-fx="off"] .wk-head-title::after, html[data-fx="off"] .wk-sec, html[data-fx="off"] .wk-stamp { animation: none; }
@media (prefers-reduced-motion: reduce) { .wk-head-title::after, .wk-sec, .wk-stamp { animation: none; } }

/* Колокольчик и лента уведомлений (webapp/inbox.js, 18.10.2026). */
.hub-bell {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  color: #FFFFFF; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.09));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 8px 22px rgba(0, 0, 0, 0.35);
}
.hub-bell .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hub-bell i {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center; font: 800 10.5px/1 var(--font-body); font-style: normal; color: #FFFFFF;
  background: linear-gradient(135deg, #FF5A36, #FF2E63); box-shadow: 0 0 0 2px #050507, 0 0 12px rgba(255, 46, 99, 0.7);
}
.hub-bell.has-new .ic { animation: sk-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes sk-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); }
  85% { transform: rotate(8deg); } 90% { transform: rotate(-5deg); } }
.inbox-push {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 90, 54, 0.16), rgba(255, 46, 99, 0.08)); border: 1px solid rgba(255, 255, 255, 0.12);
}
.inbox-push.is-on { background: linear-gradient(135deg, rgba(79, 227, 216, 0.14), rgba(79, 227, 216, 0.05)); }
.inbox-push > span { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; min-width: 0; }
.inbox-push > span .ic { grid-row: span 2; width: 20px; height: 20px; color: #FF7A59; }
.inbox-push.is-on > span .ic { color: #4FE3D8; }
.inbox-push em { font-style: normal; font-size: 12px; color: var(--ink-dim, #A1A1AA); }
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 56vh; overflow-y: auto; }
.inbox-list li {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07);
  animation: sk-rise 0.4s var(--sk-ease) both; animation-delay: calc(min(var(--i, 0), 10) * 30ms);
}
.inbox-list li.is-new { background: rgba(255, 90, 54, 0.1); border-color: rgba(255, 90, 54, 0.35); }
.inbox-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); }
.inbox-ic .ic { width: 18px; height: 18px; }
.inbox-body { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.inbox-body em { font-style: normal; font-size: 11px; color: var(--ink-dim, #A1A1AA); }
html[data-fx="off"] .hub-bell.has-new .ic, html[data-fx="off"] .inbox-list li { animation: none; }

.inbox-push.is-hint { background: rgba(255, 198, 92, 0.08); border-color: rgba(255, 198, 92, 0.3); }
.inbox-push.is-hint > span { grid-template-columns: auto 1fr; }
.inbox-push.is-hint > span .ic { color: #FFC65C; }
.inbox-push.is-hint em { line-height: 1.45; }

/* Версия и обновления в Хабе (18.10.2026). */
.hub-version {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.09));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 12px 32px rgba(0, 0, 0, 0.38);
}
.hub-version-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(79, 227, 216, 0.35), rgba(79, 227, 216, 0.08)); }
.hub-version-ic .ic { width: 20px; height: 20px; color: #BFF7F2; }
.hub-version-text { display: grid; gap: 3px; min-width: 0; }
.hub-version-text b { font-size: 14px; }
.hub-version-text small { font-size: 12px; color: rgba(255, 255, 255, 0.62); line-height: 1.35; }
.hub-version-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }