/* AXIS — стиль «Графит» для плеера, экрана таймера и нижнего меню (отдельные кнопки-плитки).
   Только оформление: разметку и логику аппки не трогает. Откат — убрать <link href="axis_player.css">. */
:root {
  --ax-ob-acc: #5ad1a6;                 /* акцент экрана загрузки и подсказки */
  --gr-acc: #5ad1a6; --gr-acc-soft: rgba(90,209,166,.14); --gr-acc-line: rgba(90,209,166,.45); --gr-on: #0b2a1f;
  --gr-tile: rgba(28,29,33,.97); --gr-hair: rgba(255,255,255,.10); --gr-text: #ececef; --gr-mute: #8e9099;
  --gr-glass: rgba(0,0,0,.38);
}

/* ---------------------------------------------------------------- плеер: всё поверх видео — белое, акцент только мятный */
html body .hud-header .liquid-progress-capsule {
  background: var(--gr-glass) !important; border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: none !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
}
html body .liquid-fill-track { background: rgba(90,209,166,.55) !important; box-shadow: none !important; }
html body .liquid-badge-fixed, html body #badge-val, html body .liquid-pct-label { color: #fff !important; background: none !important; text-shadow: none !important; }
html body .token-coin-icon { background: none !important; }
html body .token-coin-icon circle:first-child { fill: var(--gr-acc) !important; }
html body .token-coin-icon circle + circle { stroke: var(--gr-on) !important; }
html body .token-coin-icon text { fill: var(--gr-on) !important; }
html body .hud-stats-group .chip-glass {
  background: var(--gr-glass) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: none !important;
  color: #fff !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
}
html body #chip-coins-box svg { stroke: var(--gr-acc) !important; }
html body #chip-coins-box span, html body #feed-streak { color: #fff !important; }

/* кнопки справа: просто белые иконки с тенью, без тяжёлых кругов */
html body .hud-side-column .action-circle-glass {
  background: rgba(0,0,0,.22) !important; border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
}
html body .hud-side-column .action-circle-glass svg { stroke: #fff !important; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
html body .hud-side-column .action-node, html body .hud-side-column .action-node span { color: rgba(255,255,255,.88) !important; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
html body .active-liked svg, html body #like-btn-icon.active-liked svg { stroke: #ff6b81 !important; fill: rgba(255,107,129,.85) !important; }
html body .active-rated svg { stroke: var(--gr-acc) !important; fill: rgba(90,209,166,.6) !important; }
html body .sound-active svg { stroke: var(--gr-acc) !important; }

/* автор и счётчик роликов */
html body .hud-bottom-overlay .author-badge-card, html body #vid-author {
  background: var(--gr-glass) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; box-shadow: none !important;
}
html body .author-badge-card#vid-counter, html body #vid-counter {
  background: var(--gr-acc-soft) !important; border: 1px solid var(--gr-acc-line) !important; color: #7fe0bd !important; box-shadow: none !important;
}

/* ---------------------------------------------------------------- экран таймера (лимит) */
html body .limit-screen-overlay {
  background: rgba(20,21,24,.78) !important; backdrop-filter: blur(22px) !important; -webkit-backdrop-filter: blur(22px) !important;
}
html body .limit-lock-shield {
  width: 72px !important; height: 72px !important; border-radius: 22px !important;
  background: var(--gr-acc-soft) !important; border: 1px solid var(--gr-acc-line) !important; box-shadow: none !important;
}
html body .limit-lock-shield svg { stroke: var(--gr-acc) !important; }
html body .limit-screen-overlay h2 { color: var(--gr-text) !important; font-weight: 800 !important; }
html body .limit-screen-overlay p { color: var(--gr-mute) !important; }
html body .limit-countdown-clock, html body #limit-clock-val {
  color: var(--gr-text) !important; background: none !important; -webkit-text-fill-color: var(--gr-text) !important;
  font-size: 46px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-shadow: none !important;
  padding: 10px 22px; border-radius: 20px; border: 1px solid var(--gr-hair); background-color: rgba(28,29,33,.7) !important;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- нижнее меню: 4 плитки + большая «плей» по центру (как в макете)
   «Предложка» переехала карточкой в «Задания» (функция та же), поэтому её плитку в меню не показываем. */
html body .dock-wrapper { left: 12px !important; right: 12px !important; bottom: 14px !important; gap: 8px !important; justify-content: space-between !important; align-items: center !important; }
html body .dock-wrapper .dock-nav-pill { display: contents !important; }
html body .dock-wrapper #dock-btn-promo { display: none !important; }
html body .dock-wrapper .dock-tab-btn {
  pointer-events: auto; flex: 0 0 62px; width: 62px; height: 62px; padding: 0 !important; margin: 0 !important;
  border-radius: 20px !important; background: var(--gr-tile) !important; border: 1px solid var(--gr-hair) !important;
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.7) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
html body .dock-wrapper .dock-tab-btn svg { width: 21px !important; height: 21px !important; stroke: var(--gr-mute) !important; }
html body .dock-wrapper .dock-tab-btn span { color: var(--gr-mute) !important; font-size: 10px !important; font-weight: 700 !important; white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
html body .dock-wrapper .dock-tab-btn.active { background: var(--gr-acc-soft) !important; border-color: var(--gr-acc-line) !important; }
html body .dock-wrapper .dock-tab-btn.active svg { stroke: #7fe0bd !important; }
html body .dock-wrapper .dock-tab-btn.active span { color: #7fe0bd !important; }
html body .dock-wrapper .dock-tab-btn::after, html body .dock-wrapper .dock-tab-btn.active::after { display: none !important; }
html body .dock-wrapper #dock-action-circle, html body.nx-dock .dock-wrapper #dock-action-circle {
  position: relative !important; inset: auto !important; transform: none !important; order: 0;
  flex: 0 0 72px; width: 72px !important; height: 72px !important; margin: 0 !important; border-radius: 24px !important;
  background: var(--gr-acc) !important; border: 0 !important; box-shadow: 0 12px 26px -12px rgba(0,0,0,.75) !important;
}
html body .dock-wrapper #dock-action-circle svg { display: none !important; }
html body .dock-wrapper #dock-action-circle::after {            /* треугольник «плей» вместо хлопушки */
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 19px solid #1d1f22;
}
/* порядок: Задания, Рейтинг, ▶, Кошелёк, Профиль */
html body #dock-btn-tasks { order: -5; } html body #dock-btn-rating { order: -3; }
html body #dock-btn-payouts { order: 1; } html body #dock-btn-profile { order: 2; }
html[dir="rtl"] body .dock-wrapper #dock-action-circle::after { margin-left: 5px; }

/* на вкладках (не в плеере) — мягкое затемнение под плитками, чтобы содержимое не просвечивало */
html body:has(.subview-pane[style*="display: block"]) .dock-wrapper::before {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 124px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,16,0) 0%, rgba(10,12,16,.85) 45%, rgba(10,12,16,.98) 100%);
}