/* ==========================================================================
   Front-end CSS section map (cleanup phase 23)
   1) Root tokens & shared shell vars
   2) Core card / player shell
   3) Stage tools & server panel
   4) State / feedback / overlay surfaces
   5) Footer / menu / mobile sheet surfaces
   6) Responsive mobile spacing shell
   7) Player-engine specific UI (Clappr / hls.js)
   ========================================================================== */

.go4kora-player-root {
  position: relative;
  z-index: 0;
  isolation: isolate;
  font-size: var(--go4-fz-base, 14px);
  line-height: var(--go4-lh-base, 1.45);
  direction: rtl;
  font-family: "Cairo", Tahoma, Arial, sans-serif;
  width: 100%;
  --go4-shell-margin-y: 12px;
  --go4-shell-pad-x: 10px;
  margin: var(--go4-shell-margin-y) 0;
  padding: 0 var(--go4-shell-pad-x);
  --go4-card-radius: var(--go4-radius-md);
  --go4-card-shadow: var(--go4-shadow-card);
  --go4-header-bg: rgba(var(--go4-rgb-white),0.05);
  --go4-header-border: var(--go4-bd-color-white-08);
  --go4-track-bg: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.09), rgba(var(--go4-rgb-white),0.05));
  --go4-track-border: var(--go4-bd-color-white-10);
  --go4-tab-bg: var(--go4-c-brand-700);
  --go4-tab-bg-hover: rgba(var(--go4-rgb-white),0.18);
  --go4-tab-bg-active: var(--go4-c-brand-850);
  --go4-tab-text: rgba(var(--go4-rgb-white),0.94);
  --go4-nav-bg: rgba(var(--go4-rgb-white),0.14);
  --go4-nav-border: var(--go4-bd-color-white-18);
  --go4-nav-color: rgba(var(--go4-rgb-white),0.86);
  --go4-nav-shadow: var(--go4-shadow-nav-dark);
  --go4-fade-rgb: var(--go4-rgb-white);
  --go4-fade-alpha: 0.10;
  /* Color scale tokens (single source of truth) */
  --go4-rgb-ink: 0,0,0;
  --go4-rgb-white: 255,255,255;
  --go4-rgb-panel-10: 10,10,10;
  --go4-rgb-panel-14: 14,14,14;
  --go4-rgb-panel-15: 15,15,15;
  --go4-rgb-brand-700: 123,16,16;
  /* var(--go4-c-brand-700) */
  --go4-rgb-brand-750: 143,20,20;
  /* var(--go4-c-brand-750) */
  --go4-rgb-brand-800: 177,18,18;
  /* var(--go4-c-brand-800) */
  --go4-rgb-brand-850: 181,21,21;
  /* var(--go4-c-brand-850) */
  --go4-rgb-brand-900: 197,26,26;
  /* var(--go4-c-brand-900) */
  --go4-rgb-danger: 255,45,45;
  /* var(--go4-c-danger) */
  --go4-rgb-wp-text: 29,35,39;
  /* var(--go4-c-wp-text) */
  /* Convenience color tokens (no behavior change) */
  --go4-c-black: rgb(var(--go4-rgb-ink));
  --go4-c-white: rgb(var(--go4-rgb-white));
  --go4-c-brand-700: rgb(var(--go4-rgb-brand-700));
  --go4-c-brand-750: rgb(var(--go4-rgb-brand-750));
  --go4-c-brand-800: rgb(var(--go4-rgb-brand-800));
  --go4-c-brand-850: rgb(var(--go4-rgb-brand-850));
  --go4-c-brand-900: rgb(var(--go4-rgb-brand-900));
  --go4-c-danger: rgb(var(--go4-rgb-danger));
  --go4-c-wp-text: rgb(var(--go4-rgb-wp-text));
  /* Typography & radius tokens (visual-only) */
  --go4-fz-base: 14px;
  --go4-fz-title: 15px;
  --go4-fz-sm: 13px;
  --go4-fz-xs: 12.5px;
  --go4-lh-base: 1.45;
  --go4-lh-text: 1.55;
  --go4-lh-tight: 1.20;
  /* Radius scale (single source of truth) */
  --go4-radius-0: 0px;
  --go4-radius-2xs: 6px;
  --go4-radius-xs: 8px;
  --go4-radius-sm: 10px;
  --go4-radius-md: 12px;
  --go4-radius-pill: 999px;
  /* Border scale (single source of truth) */
  --go4-bd-0: 0;
  /* Light (ink) borders */
  --go4-bd-color-ink-06: rgba(var(--go4-rgb-ink),0.06);
  --go4-bd-color-ink-07: rgba(var(--go4-rgb-ink),0.07);
  --go4-bd-color-ink-08: rgba(var(--go4-rgb-ink),0.08);
  --go4-bd-color-ink-10: rgba(var(--go4-rgb-ink),0.10);
  --go4-bd-color-ink-12: rgba(var(--go4-rgb-ink),0.12);
  /* Glass (white) borders */
  --go4-bd-color-white-06: rgba(var(--go4-rgb-white),0.06);
  --go4-bd-color-white-08: rgba(var(--go4-rgb-white),0.08);
  --go4-bd-color-white-10: rgba(var(--go4-rgb-white),0.10);
  --go4-bd-color-white-12: rgba(var(--go4-rgb-white),0.12);
  --go4-bd-color-white-14: rgba(var(--go4-rgb-white),0.14);
  --go4-bd-color-white-16: rgba(var(--go4-rgb-white),0.16);
  --go4-bd-color-white-18: rgba(var(--go4-rgb-white),0.18);
  --go4-bd-color-white-20: rgba(var(--go4-rgb-white),0.20);
  --go4-bd-color-white-22: rgba(var(--go4-rgb-white),0.22);
  --go4-bd-color-white-88: rgba(var(--go4-rgb-white),0.88);
  --go4-bd-color-white-90: rgba(var(--go4-rgb-white),0.90);
  /* WP admin border (rarely used in front css) */
  --go4-bd-wp-color: #dcdcde;
  /* Border shorthands (token-only) */
  --go4-bd-ink-06: 1px solid var(--go4-bd-color-ink-06);
  --go4-bd-ink-07: 1px solid var(--go4-bd-color-ink-07);
  --go4-bd-ink-08: 1px solid var(--go4-bd-color-ink-08);
  --go4-bd-ink-10: 1px solid var(--go4-bd-color-ink-10);
  --go4-bd-ink-12: 1px solid var(--go4-bd-color-ink-12);
  --go4-bd-white-06: 1px solid var(--go4-bd-color-white-06);
  --go4-bd-white-08: 1px solid var(--go4-bd-color-white-08);
  --go4-bd-white-10: 1px solid var(--go4-bd-color-white-10);
  --go4-bd-white-12: 1px solid var(--go4-bd-color-white-12);
  --go4-bd-white-14: 1px solid var(--go4-bd-color-white-14);
  --go4-bd-white-16: 1px solid var(--go4-bd-color-white-16);
  --go4-bd-white-18: 1px solid var(--go4-bd-color-white-18);
  --go4-bd-white-22-3: 3px solid var(--go4-bd-color-white-22);
  --go4-bd-wp: 1px solid var(--go4-bd-wp-color);
  /* Back-compat aliases used across UI */
  --go4-ui-radius: var(--go4-radius-sm);
  --go4-ui-radius-sm: var(--go4-radius-xs);
  --go4-ui-radius-xs: var(--go4-radius-2xs);
  /* Shadow scale (single source of truth) */
  --go4-shadow-0: none;
  /* Elevation */
  --go4-shadow-elev-6-18: 0 6px 18px rgba(var(--go4-rgb-ink),0.35);
  --go4-shadow-elev-8-22: 0 8px 22px rgba(var(--go4-rgb-ink),0.35);
  --go4-shadow-elev-10-26: 0 10px 26px rgba(var(--go4-rgb-ink),0.45);
  --go4-shadow-elev-12-26: 0 12px 26px rgba(var(--go4-rgb-ink),0.16);
  --go4-shadow-elev-18-34: 0 18px 34px rgba(var(--go4-rgb-ink),0.18);
  --go4-shadow-elev-18-44: 0 18px 44px rgba(var(--go4-rgb-ink),0.35);
  --go4-shadow-elev-18-50: 0 18px 50px rgba(var(--go4-rgb-ink),0.35);
  /* Common component shadows */
  --go4-shadow-card: 0 18px 40px rgba(var(--go4-rgb-ink),0.14);
  --go4-shadow-nav-light: 0 10px 22px rgba(var(--go4-rgb-ink),0.12);
  --go4-shadow-nav-dark: 0 10px 22px rgba(var(--go4-rgb-ink),0.18);
  /* Outlines */
  --go4-shadow-outline-28: 0 0 0 2px rgba(var(--go4-rgb-ink),0.28);
  --go4-shadow-outline-35: 0 0 0 2px rgba(var(--go4-rgb-ink),0.35);
  --go4-shadow-inset-red-22: inset 0 0 0 2px rgba(var(--go4-rgb-brand-850),0.22);
  /* Subtle inset borders (glass) */
  --go4-shadow-inset-08: inset 0 0 0 1px rgba(var(--go4-rgb-white),0.08);
  --go4-shadow-inset-10: inset 0 0 0 1px rgba(var(--go4-rgb-white),0.10);
  --go4-shadow-inset-12: inset 0 0 0 1px rgba(var(--go4-rgb-white),0.12);
  --go4-shadow-inset-14: inset 0 0 0 1px rgba(var(--go4-rgb-white),0.14);
  --go4-shadow-inset-top-06: inset 0 1px 0 rgba(var(--go4-rgb-white),0.06);
  --go4-shadow-inset-top-08: inset 0 1px 0 rgba(var(--go4-rgb-white),0.08);
  --go4-shadow-inset-top-10: inset 0 1px 0 rgba(var(--go4-rgb-white),0.10);
  /* Tab elevations */
  --go4-shadow-tab-active-10: inset 0 0 0 1px rgba(var(--go4-rgb-white),0.10), 0 10px 22px rgba(var(--go4-rgb-ink),0.22);
  --go4-shadow-tab-active-12: inset 0 0 0 1px rgba(var(--go4-rgb-white),0.12), 0 10px 22px rgba(var(--go4-rgb-ink),0.22);
  --go4-shadow-tab-active-14: inset 0 0 0 1px rgba(var(--go4-rgb-white),0.14), 0 10px 22px rgba(var(--go4-rgb-ink),0.22);
  /* Glass button shadows */
  --go4-shadow-inset-glass-08: inset 0 0 0 1px rgba(var(--go4-rgb-white),0.08), inset 0 10px 18px rgba(var(--go4-rgb-ink),0.18);
  /* Focus ring */
  --go4-shadow-focus-ring: 0 0 0 2px rgba(var(--go4-rgb-white),0.18), 0 0 0 4px rgba(var(--go4-rgb-brand-850),0.18);
  /* Unified UI shadows */
  --go4-shadow-glass:
  inset 0 0 0 1px rgba(var(--go4-rgb-white),0.06),
  inset 0 10px 18px rgba(var(--go4-rgb-ink),0.18),
  0 10px 24px rgba(var(--go4-rgb-ink),0.30);
  --go4-shadow-glass-pressed:
  inset 0 0 0 1px rgba(var(--go4-rgb-white),0.05),
  inset 0 10px 18px rgba(var(--go4-rgb-ink),0.22),
  0 6px 16px rgba(var(--go4-rgb-ink),0.28);
  /* Panels & sheets */
  --go4-shadow-panel: 0 22px 54px rgba(var(--go4-rgb-ink),0.55);
  /* Back-compat aliases used across UI */
  --go4-focus-ring: var(--go4-shadow-focus-ring);
  /* Tabs (TAB2-inspired, but keep our premium semi-transparent style)
  - Inactive: subtle translucent light surface over dark background
  - Active: keep our red accent
  */
  --go4-tab-bg: rgba(var(--go4-rgb-white),0.12);
  --go4-active-dot: rgba(var(--go4-rgb-white),0.90);
  /* Shared UI tokens (borders/shadows/focus) for consistent "glass" UI */
  --go4-ui-radius: var(--go4-radius-sm);
  --go4-ui-border: var(--go4-bd-color-white-12);
  --go4-ui-border-hover: var(--go4-bd-color-white-16);
  --go4-ui-border-hover-strong: var(--go4-bd-color-white-20);
  --go4-ui-glass: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.10), rgba(var(--go4-rgb-ink),0.28));
  --go4-ui-glass-hover: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.13), rgba(var(--go4-rgb-ink),0.30));
  --go4-ui-glass-pressed: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.40));
  --go4-ui-shadow: var(--go4-shadow-glass);
  --go4-ui-shadow-pressed: var(--go4-shadow-glass-pressed);
  --go4-focus-ring: var(--go4-shadow-focus-ring);
  /* Panels & menus (dropdowns / sheets) - reuse the same glass tokens */
  --go4-ui-panel-bg: rgba(var(--go4-rgb-panel-14),0.84);
  --go4-ui-panel-border: var(--go4-bd-color-white-10);
  --go4-ui-panel-shadow: var(--go4-shadow-panel);
  --go4-ui-panel-filter: blur(14px) saturate(1.15);
  --go4-ui-divider: var(--go4-bd-color-white-10);
  --go4-ui-item-bg: rgba(var(--go4-rgb-white),0.06);
  --go4-ui-item-hover: rgba(var(--go4-rgb-white),0.08);
  --go4-ui-item-pressed: rgba(var(--go4-rgb-white),0.12);
  --go4-ui-item-border: var(--go4-bd-color-white-08);
  /* Border shorthands (token-only, built from border colors) */
  --go4-bd-ui: 1px solid var(--go4-ui-border);
  --go4-bd-ui-hover: 1px solid var(--go4-ui-border-hover);
  --go4-bd-nav: 1px solid var(--go4-nav-border);
  --go4-bd-track: 1px solid var(--go4-track-border);
  --go4-bd-panel: 1px solid var(--go4-ui-panel-border);
  --go4-bd-item: 1px solid var(--go4-ui-item-border);
  --go4-bd-divider: 1px solid var(--go4-ui-divider);
  --go4-ui-text: rgba(var(--go4-rgb-white),0.94);
  --go4-ui-text-muted: rgba(var(--go4-rgb-white),0.82);
}

.go4kora-player-root,
.go4kora-player-root * {
  box-sizing: border-box;
}

/* ==========================================================================
   2) Core card / player shell
   ========================================================================== */

.go4kora-card {
  z-index: 0;
  isolation: isolate;
  position: relative;
  width: 100%;
  border-radius: var(--go4-card-radius);
  overflow: hidden;
  box-shadow: var(--go4-card-shadow);
  background: var(--go4-c-black);
}

.go4kora-card-header {
  background: var(--go4-header-bg);
  border-bottom: 1px solid var(--go4-header-border);
  padding: 4px 8px;
}

.go4kora-card-stage {
  background: var(--go4-c-black);
}

/* Legacy front-end top tabs CSS removed in cleanup phase 2. */

.go4kora-frame-wrap {
  position:relative;
  width:100%;
  background:var(--go4-c-black);
  --go4-frame-shell-gap: 0px;
  --go4-frame-shell-radius: var(--go4-radius-0);
  border-radius: var(--go4-frame-shell-radius);
  overflow:hidden;
  margin: 0 0 var(--go4-frame-shell-gap);
  box-shadow: none;
}

.go4kora-frame-wrap::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 14px;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(var(--go4-rgb-white), 0.03),
    inset 0 0 0 9999px rgba(var(--go4-rgb-ink), 0.16);
}

.go4kora-frame-wrap > .go4kora-built-player,
.go4kora-frame-wrap > .go4kora-iframe {
  position: relative;
  z-index: 1;
}

.go4kora-frame-wrap > .go4kora-state {
  position: absolute;
  inset: 0;
  z-index: 9;
}

.go4kora-iframe {
  width:100%;
  height:100%;
  border: var(--go4-bd-0);
  display:block;
  background:var(--go4-c-black);
}

.go4kora-built-player {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--go4-c-black);
}

.go4kora-built-player video,
.go4kora-built-player .player-poster,
.go4kora-built-player .media-control,
.go4kora-built-player .player-container {
  max-width: 100%;
}

/* ==========================================================================
   3) Stage tools & server panel
   ========================================================================== */

.go4kora-stage-tools {
  position:absolute;
  z-index: 9;
  display:flex;
  flex-direction:column;
  gap: 8px;
  pointer-events:none;
}

.go4kora-stage-tools-right {
  top: 12px;
  right: 12px;
  left: auto;
}

@supports (top: env(safe-area-inset-top)){

  .go4kora-stage-tools-right{
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
  }

}

@media (max-width: 768px){
  .go4kora-frame-wrap::before {
    inset: 3px;
    border-radius: 12px;
  }
}

.go4kora-stage-tools .go4kora-stage-tool-btn {
  pointer-events:auto;
  width: 46px;
  height: 46px;
  border-radius: var(--go4-ui-radius);
  border: var(--go4-bd-ui);
  /* Soft "glass" surface to match tabs philosophy (neutral + subtle highlights) */
  background: var(--go4-ui-glass, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.10), rgba(var(--go4-rgb-ink),0.28)));
  color: rgba(var(--go4-rgb-white),0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: var(--go4-ui-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.go4kora-stage-tools .go4kora-stage-tool-btn:hover {
  background: var(--go4-ui-glass-hover, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.13), rgba(var(--go4-rgb-ink),0.30)));
  border-color: var(--go4-ui-border-hover);
}

.go4kora-stage-tools .go4kora-stage-tool-btn:active {
  background: var(--go4-ui-glass-pressed, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.40)));
  box-shadow: var(--go4-ui-shadow-pressed);
}

.go4kora-stage-tools .go4kora-stage-tool-btn:focus-visible {
  outline: none;
  border-color: var(--go4-bd-color-white-20);
  box-shadow: var(--go4-ui-shadow), var(--go4-focus-ring);
}

.go4kora-stage-tools .go4kora-stage-tool-ico {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(var(--go4-rgb-ink),.45));
}

.go4kora-stage-tools .go4kora-stage-tool-ico svg {
  width: 1em;
  height: 1em;
  display: block;
  fill: currentColor;
}

.go4kora-stage-tools .go4kora-stage-tool-btn-sources {
  width: auto;
  min-width: 96px;
  height: 42px;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 10px 0 8px;
  border-radius: calc(var(--go4-ui-radius-sm) + 2px);
}

.go4kora-stage-tools .go4kora-stage-tool-btn-sources .go4kora-stage-tool-ico {
  font-size: 18px;
}

.go4kora-stage-tools .go4kora-stage-tool-label {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(var(--go4-rgb-white),0.95);
  white-space: nowrap;
}

.go4kora-stage-tools .go4kora-stage-tool-btn[aria-expanded="true"] {
  background: var(--go4-tab-bg-active);
  box-shadow: var(--go4-shadow-tab-active-12), inset 0 1px 0 rgba(var(--go4-rgb-white),0.08);
  border-color: var(--go4-ui-border-hover);
}

.go4kora-stage-tools .go4kora-stage-tool-btn-sources[aria-expanded="true"] {
  background: linear-gradient(180deg, rgba(196, 18, 18, 0.96), rgba(166, 12, 12, 0.94));
  border-color: rgba(var(--go4-rgb-white),0.14);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.09), 0 12px 24px rgba(104, 8, 8, 0.26);
}

.go4kora-stage-tools .go4kora-stage-tool-btn-sources[aria-expanded="true"] .go4kora-stage-tool-icon,
.go4kora-stage-tools .go4kora-stage-tool-btn-sources[aria-expanded="true"] .go4kora-stage-tool-label {
  color: rgba(var(--go4-rgb-white),0.98);
}

.go4kora-stage-tools .go4kora-source-panel {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  width: min(176px, calc(100vw - 108px));
  max-height: min(340px, calc(100vh - 148px));
  border-radius: calc(var(--go4-card-radius) - 6px);
  border: var(--go4-bd-panel);
  background:
    linear-gradient(180deg, rgba(var(--go4-rgb-white),0.05), rgba(var(--go4-rgb-ink),0.14)),
    rgba(var(--go4-rgb-panel-15),0.86);
  box-shadow: 0 18px 42px rgba(var(--go4-rgb-ink),0.44), inset 0 1px 0 rgba(var(--go4-rgb-white),0.045);
  backdrop-filter: blur(13px) saturate(1.08);
  -webkit-backdrop-filter: blur(13px) saturate(1.08);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(10px, 0, 0) scale(0.985);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 180ms ease;
}

.go4kora-stage-tools.is-source-open .go4kora-source-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.go4kora-stage-tools .go4kora-source-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 7px 9px;
  border-bottom: 1px solid rgba(var(--go4-rgb-white),0.07);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.045), rgba(var(--go4-rgb-ink),0.12));
}

.go4kora-stage-tools .go4kora-source-panel-title {
  font-weight: 800;
  font-size: 12px;
  color: rgba(var(--go4-rgb-white),0.94);
  letter-spacing: 0;
}

.go4kora-stage-tools .go4kora-source-panel-close {
  appearance: none;
  border: var(--go4-bd-ui);
  background: rgba(var(--go4-rgb-white),0.05);
  color: rgba(var(--go4-rgb-white),0.84);
  width: 28px;
  height: 28px;
  border-radius: calc(var(--go4-ui-radius-sm));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 140ms ease;
}

.go4kora-stage-tools .go4kora-source-panel-close:hover {
  background: rgba(var(--go4-rgb-white),0.10);
  border-color: var(--go4-ui-border-hover);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.06), 0 6px 16px rgba(var(--go4-rgb-ink),0.18);
  transform: translateY(-1px);
}

.go4kora-stage-tools .go4kora-source-panel-close:focus-visible {
  outline: none;
  box-shadow: var(--go4-ui-shadow), var(--go4-focus-ring);
}

.go4kora-stage-tools .go4kora-source-panel-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  max-height: min(278px, calc(100vh - 204px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--go4-rgb-white),0.18) rgba(var(--go4-rgb-ink),0.20);
}

.go4kora-stage-tools .go4kora-source-panel-list::-webkit-scrollbar {
  width: 8px;
}

.go4kora-stage-tools .go4kora-source-panel-list::-webkit-scrollbar-track {
  background: rgba(var(--go4-rgb-ink),0.16);
  border-radius: 999px;
}

.go4kora-stage-tools .go4kora-source-panel-list::-webkit-scrollbar-thumb {
  background: rgba(var(--go4-rgb-white),0.18);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

.go4kora-stage-tools .go4kora-source-panel-list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--go4-rgb-white),0.24);
  background-clip: content-box;
}

.go4kora-stage-tools .go4kora-source-panel-item {
  position: relative;
  width: 100%;
  appearance: none;
  border: var(--go4-bd-ui);
  border-radius: calc(var(--go4-ui-radius) - 2px);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.30));
  color: rgba(var(--go4-rgb-white),0.94);
  padding: 7px 10px;
  text-align: start;
  font-size: 12.25px;
  font-weight: 800;
  line-height: 1.24;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.035), var(--go4-ui-shadow);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.go4kora-stage-tools .go4kora-source-panel-item:hover {
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.115), rgba(var(--go4-rgb-ink),0.285));
  border-color: var(--go4-ui-border-hover);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.05), 0 8px 18px rgba(var(--go4-rgb-ink),0.20);
  transform: translateY(-1px);
}

.go4kora-stage-tools .go4kora-source-panel-item:active {
  transform: translateY(1px);
}

.go4kora-stage-tools .go4kora-source-panel-item.active {
  background: linear-gradient(180deg, rgba(210,20,20,0.96), rgba(184,14,14,0.94));
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.07), 0 10px 22px rgba(120, 8, 8, 0.26);
  border-color: rgba(var(--go4-rgb-white),0.12);
  padding-inline-end: 24px;
  text-shadow: 0 1px 0 rgba(var(--go4-rgb-ink),0.18);
}

.go4kora-stage-tools .go4kora-source-panel-item.active::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: 10px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(var(--go4-rgb-white),0.96);
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px rgba(var(--go4-rgb-white),0.09);
}

.go4kora-stage-tools .go4kora-source-panel-item:focus-visible {
  outline: none;
  border-color: rgba(var(--go4-rgb-white),0.24);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.13), rgba(var(--go4-rgb-ink),0.26));
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.06), 0 0 0 2px rgba(var(--go4-rgb-white),0.07), 0 10px 22px rgba(var(--go4-rgb-ink),0.24);
  transform: translateY(-1px);
}

/* Keep stage-tool and source-panel mobile deltas together so the compact overlay can be tuned in one place. */
@media (max-width: 600px){

  .go4kora-stage-tools-right{
    flex-direction: row;
  }

  .go4kora-stage-tools .go4kora-stage-tool-btn{
    width: 44px;
    height: 44px;
    border-radius: var(--go4-ui-radius-sm);
  }

  .go4kora-stage-tools .go4kora-stage-tool-btn-sources {
    width: auto;
    min-width: 88px;
    height: 40px;
    gap: 5px;
    padding: 0 9px 0 8px;
  }

  .go4kora-stage-tools .go4kora-stage-tool-btn-sources .go4kora-stage-tool-ico{
    font-size: 16px;
  }

  .go4kora-stage-tools .go4kora-stage-tool-label {
    font-size: 11px;
  }

  .go4kora-stage-tools .go4kora-stage-tool-ico{
    font-size: 20px;
  }

  .go4kora-stage-tools .go4kora-source-panel {
    top: calc(100% + 8px);
    right: 0;
    width: min(170px, calc(100vw - 20px));
    max-height: min(310px, calc(100vh - 160px));
    transform: translate3d(0, -6px, 0) scale(0.985);
    transform-origin: top right;
  }

  .go4kora-stage-tools .go4kora-source-panel-head {
    padding: 7px 8px;
  }

  .go4kora-stage-tools .go4kora-source-panel-title {
    font-size: 11.25px;
  }

  .go4kora-stage-tools .go4kora-source-panel-close {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .go4kora-stage-tools .go4kora-source-panel-list {
    padding: 6px;
    gap: 3px;
    max-height: min(254px, calc(100vh - 214px));
  }

  .go4kora-stage-tools .go4kora-source-panel-item {
    padding: 7px 9px;
    font-size: 11.75px;
    line-height: 1.2;
  }

}

/* ==========================================================================
   4) State / feedback / overlay surfaces
   ========================================================================== */

.go4kora-state,
.go4kora-adblock-note {
  --go4-feedback-shell-pad: 18px;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  padding: var(--go4-feedback-shell-pad);
}

.go4kora-state {
  display:flex;
  background: rgba(var(--go4-rgb-ink),0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9;
}

.go4kora-state.is-show {
  opacity: 1;
  pointer-events: auto;
}

.go4kora-adblock-guard {
  position:absolute;
  inset:0;
  z-index:998;
  background:rgba(var(--go4-rgb-ink),0);
  pointer-events:auto;
}

.go4kora-adblock-note {
  --go4-adblock-shell-pad: var(--go4-feedback-shell-pad);
  z-index:999;
  display:none;
  background:rgba(var(--go4-rgb-ink),0.36);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: var(--go4-adblock-shell-pad);
}

.go4kora-adblock-note.show {
  display:flex;
}

.go4kora-state-box,
.go4kora-footer-menu,
.go4kora-mobile-panel,
.go4kora-adblock-panel {
  background: var(--go4-ui-panel-bg, rgba(var(--go4-rgb-panel-14),0.84));
  border: var(--go4-bd-panel);
  box-shadow: var(--go4-ui-panel-shadow);
  color: var(--go4-ui-text, rgba(var(--go4-rgb-white),0.92));
}

.go4kora-state-box {
  --go4-state-box-pad: 16px 18px;
  width: min(520px, 100%);
  border-radius: var(--go4-card-radius);
  padding: var(--go4-state-box-pad);
  text-align: center;
  backdrop-filter: var(--go4-ui-panel-filter, blur(7px));
}

.go4kora-adblock-panel {
  width:min(420px,100%);
  border-radius: calc(var(--go4-card-radius) - 2px);
  padding:12px 12px 11px;
  text-align:center;
  backdrop-filter: var(--go4-ui-panel-filter, blur(10px) saturate(1.08));
  -webkit-backdrop-filter: var(--go4-ui-panel-filter, blur(10px) saturate(1.08));
}

.go4kora-adblock-text {
  margin:0 0 10px 0;
  color: rgba(var(--go4-rgb-white),0.88);
  text-align:center;
  font-size:13px;
  line-height:1.48;
}

.go4kora-adblock-retry {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:36px;
  padding:8px 12px;
  border-radius: calc(var(--go4-ui-radius-sm) - 1px);
  border: var(--go4-bd-ui);
  background: var(--go4-ui-glass, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.10), rgba(var(--go4-rgb-ink),0.28)));
  color:var(--go4-c-white);
  cursor:pointer;
  font-weight:800;
  font-size:12.5px;
  line-height:1.16;
  box-shadow: var(--go4-ui-shadow);
}

.go4kora-adblock-retry:hover {
  background: var(--go4-ui-glass-hover, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.13), rgba(var(--go4-rgb-ink),0.30)));
  border-color: var(--go4-ui-border-hover);
}

.go4kora-adblock-retry:active {
  background: var(--go4-ui-glass-pressed, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.40)));
  box-shadow: var(--go4-ui-shadow-pressed);
}

.go4kora-adblock-retry:focus-visible {
  outline: none;
  box-shadow: var(--go4-focus-ring);
}

.go4kora-state-title {
  font-weight: 900;
  font-size: var(--go4-fz-title, 15px);
  letter-spacing: .1px;
  margin-top: 2px;
  color: var(--go4-ui-text, rgba(var(--go4-rgb-white),0.92));
}

.go4kora-state-sub {
  margin-top: 6px;
  font-size: var(--go4-fz-sm, 13px);
  color: var(--go4-ui-text-muted, rgba(var(--go4-rgb-white),0.78));
  line-height: var(--go4-lh-text, 1.55);
}

.go4kora-spinner {
  width: 34px;
  height: 34px;
  border-radius: var(--go4-radius-pill);
  border: var(--go4-bd-white-22-3);
  border-top-color: var(--go4-bd-color-white-90);
  margin: 0 auto 10px;
  animation: go4spin .9s linear infinite;
  border-color: var(--go4-bd-color-white-18);
}

@keyframes go4spin{

  to {
    transform: rotate(360deg);
  }

}

.go4kora-state-actions {
  margin-top: 12px;
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}

.go4kora-btn {
  appearance: none;
  border: var(--go4-bd-white-18);
  background: rgba(var(--go4-rgb-white),0.08);
  color: rgba(var(--go4-rgb-white),0.92);
  font-weight: 800;
  font-size: 13px;
  border-radius: var(--go4-radius-pill);
  padding: 9px 12px;
  cursor: pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.go4kora-btn:hover {
  background: rgba(var(--go4-rgb-white),0.11);
}

.go4kora-btn:active {
  transform: translateY(1px);
}

.go4kora-btn-primary {
  background: rgba(var(--go4-rgb-brand-850),0.95);
  border-color: var(--go4-bd-color-white-14);
}

.go4kora-btn-primary:hover {
  background: rgba(var(--go4-rgb-brand-900),0.95);
}

.go4kora-state-loading-actions {
  display: none;
}

.go4kora-btn-play {
  min-width: 220px;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.go4kora-btn-play-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(var(--go4-rgb-white),0.14);
  color: rgba(var(--go4-rgb-white),0.98);
  line-height: 1;
  padding-inline-start: 1px;
  box-shadow: inset 0 0 0 1px rgba(var(--go4-rgb-white),0.10);
}

.go4kora-btn-play-ico svg {
  display: block;
  width: 14px;
  height: 14px;
  color: inherit;
  fill: currentColor;
}

.go4kora-state-loading.is-manual-play .go4kora-state-box::after {
  display: none;
}

.go4kora-state-loading.is-manual-play .go4kora-spinner {
  display: none;
}

.go4kora-state-loading.is-manual-play .go4kora-state-loading-actions {
  display: flex;
}

.go4kora-state-loading.is-manual-play .go4kora-state-title {
  margin-top: 0;
}

.go4kora-state-loading.is-manual-play .go4kora-state-sub {
  margin-top: 8px;
}

@media (max-width: 640px){
  .go4kora-btn-play {
    min-width: 0;
    width: 100%;
  }
}

.go4kora-state-details {
  margin-top: 10px;
  text-align: start;
  background: rgba(var(--go4-rgb-ink),0.20);
  border: var(--go4-bd-white-10);
  border-radius: var(--go4-ui-radius);
  padding: 10px 12px;
}

.go4kora-state-details summary {
  cursor: pointer;
  font-weight: 800;
  color: rgba(var(--go4-rgb-white),0.85);
  outline: none;
}

.go4kora-state-details code {
  display:block;
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(var(--go4-rgb-white),0.82);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce){

  .go4kora-state{
    transition: none;
  }

  .go4kora-spinner{
    animation: none;
  }

  .go4kora-btn{
    transition: none;
  }

}

.go4kora-ad-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(var(--go4-rgb-ink),var(--go4-ad-backdrop, .75));
  z-index: 10;
  padding: 0;
  /* Keep the overlay in layout so AdSense can render even if we show it after a delay.
  NOTE: We avoid `visibility:hidden` because some ad scripts may refuse to render
  into elements that are not "visible". Opacity + pointer-events is enough. */
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.go4kora-ad-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.go4kora-ad-content {
  position: relative;
  /* Wrapper only: keep it neutral (no card look) so fixed-size ads (e.g. 300x250)
  look correct and we avoid unnecessary empty areas around them. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: min(var(--go4-ad-max-w, 336px), 100%);
  max-height: min(var(--go4-ad-max-h, 280px), 100%);
  padding: var(--go4-ad-pad, 0px);
  box-sizing: border-box;
  overflow: hidden;
  /* No decoration by default (square, no border). */
  background: transparent;
  border: var(--go4-bd-0);
  border-radius: var(--go4-radius-0);
}

/* Ad UI layer: keep Skip/Close above iframes (GAM/AdX/AdSense) */

.go4kora-ad-slot {
  position: relative;
  z-index: 1;
}

.go4kora-ad-ui {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.go4kora-ad-ui .go4kora-ad-skip {
  z-index: 11;
  pointer-events: none;
}

.go4kora-ad-ui .go4kora-ad-close {
  z-index: 12;
  pointer-events: auto;
}

/* Ensure responsive content doesn't overflow */

.go4kora-ad-content iframe,
.go4kora-ad-content img,
.go4kora-ad-content video {
  max-width: 100%;
}

.go4kora-ad-content img,
.go4kora-ad-content video {
  height: auto;
}

/* AdSense: make sure the container is block so it can calculate size */

.go4kora-ad-content ins.adsbygoogle {
  display: block;
}

.go4kora-ad-close {
  position:absolute;
  top:6px;
  left:6px;
  padding:10px 12px;
  /* large hit area on mobile */
  border: var(--go4-bd-0);
  border-radius: var(--go4-radius-0);
  background:transparent;
  color:var(--go4-c-danger);
  font-size:34px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-shadow: 0 1px 2px rgba(var(--go4-rgb-ink),.85);
}

.go4kora-ad-close:focus {
  outline: none;
}

.go4kora-ad-skip {
  position:absolute;
  top:6px;
  left:6px;
  font-size:14px;
  font-weight:700;
  color:var(--go4-c-white);
  line-height:1.2;
  padding:6px 8px;
  background: rgba(var(--go4-rgb-ink),.55);
  border-radius: var(--go4-ui-radius-xs);
  text-shadow: 0 1px 2px rgba(var(--go4-rgb-ink),.85);
  white-space: nowrap;
}

.go4kora-ad-overlay[data-close-pos="left"] .go4kora-ad-close,
.go4kora-ad-overlay[data-close-pos="left"] .go4kora-ad-skip {
  left:6px;
  right:auto;
}

.go4kora-ad-overlay[data-close-pos="right"] .go4kora-ad-close,
.go4kora-ad-overlay[data-close-pos="right"] .go4kora-ad-skip,
html[dir="ltr"] .go4kora-ad-overlay[data-close-pos="auto"] .go4kora-ad-close,
html[dir="ltr"] .go4kora-ad-overlay[data-close-pos="auto"] .go4kora-ad-skip {
  right:6px;
  left:auto;
}

html[dir="rtl"] .go4kora-ad-overlay[data-close-pos="auto"] .go4kora-ad-close,
html[dir="rtl"] .go4kora-ad-overlay[data-close-pos="auto"] .go4kora-ad-skip {
  left:6px;
  right:auto;
}


.go4-bot-msg {
  padding: 12px 14px;
  border: var(--go4-bd-ink-12);
  background: rgba(var(--go4-rgb-ink),0.03);
  border-radius: var(--go4-ui-radius-sm);
  font-weight: 700;
}

.go4kora-player-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:0;
}

.go4kora-player-tabs.is-rtl {
  flex-direction:row-reverse;
}

.go4kora-player-tabs .nav-tab {
  margin-left:0;
  margin-right:0;
}

.go4kora-section th {
  padding: 14px 10px 8px;
  font-weight: 700;
  font-size: 13px;
  color:var(--go4-c-wp-text);
}

.go4kora-section th::after {
  content:'';
  display:block;
  margin-top:8px;
  border-bottom: var(--go4-bd-wp);
}

.go4kora-card-footer {
  --go4-footer-btn-minh: 40px;
  --go4-footer-btn-pad-x: 10px;
  --go4-footer-btn-gap: 5px;
  --go4-footer-btn-radius: calc(var(--go4-ui-radius-sm) + 2px);
  --go4-footer-btn-font: 12px;
  --go4-footer-btn-ico: 15.5px;
  position: relative;
  background: transparent;
  border-top: var(--go4-bd-0);
  padding: 6px 12px 6px;
}

.go4kora-footer-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.go4kora-card-footer .go4kora-footer-item {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: stretch;
}

.go4kora-card-footer .go4kora-footer-item + .go4kora-footer-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 1px;
}

.go4kora-footer-row .go4kora-footer-btn {
  width: 100%;
  color: rgba(var(--go4-rgb-white),0.95);
  text-shadow: 0 1px 0 rgba(var(--go4-rgb-ink),0.35);
  justify-content: center;
}

.go4kora-footer-btn {
  appearance: none;
  border: var(--go4-bd-ui);
  background: var(--go4-ui-glass, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.10), rgba(var(--go4-rgb-ink),0.28)));
  color: rgba(var(--go4-rgb-white),0.95);
  border-radius: var(--go4-footer-btn-radius);
  min-height: var(--go4-footer-btn-minh);
  padding: 0 var(--go4-footer-btn-pad-x);
  font-size: var(--go4-footer-btn-font);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--go4-footer-btn-gap);
  user-select: none;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(var(--go4-rgb-ink),0.35);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.035), var(--go4-ui-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 95ms ease;
  justify-content: center;
  position: relative;
}

.go4kora-footer-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--go4-footer-btn-ico);
  height: var(--go4-footer-btn-ico);
  flex: 0 0 var(--go4-footer-btn-ico);
  line-height: 1;
  color: currentColor;
  filter: drop-shadow(0 1px 0 rgba(var(--go4-rgb-ink),0.38));
  opacity: 0.96;
}

.go4kora-footer-btn-ico svg {
  width: 1em;
  height: 1em;
  display: block;
  fill: currentColor;
}

.go4kora-footer-text {
  display: inline-block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.04;
}

.go4kora-footer-btn:hover {
  background: var(--go4-ui-glass-hover, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.115), rgba(var(--go4-rgb-ink),0.285)));
  border-color: var(--go4-ui-border-hover);
  color: rgba(var(--go4-rgb-white),0.95);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.05), 0 8px 18px rgba(var(--go4-rgb-ink),0.20);
  transform: translateY(-1px);
}

.go4kora-footer-btn:active {
  transform: translateY(0.25px);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.36));
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.04), var(--go4-ui-shadow-pressed);
}

.go4kora-footer-btn:focus-visible {
  outline: none;
  border-color: rgba(var(--go4-rgb-white),0.24);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.13), rgba(var(--go4-rgb-ink),0.26));
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.06), 0 0 0 2px rgba(var(--go4-rgb-white),0.07), 0 10px 22px rgba(var(--go4-rgb-ink),0.24);
  transform: translateY(-1px);
}

.go4kora-footer-btn-ghost {
  background: var(--go4-ui-glass, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.10), rgba(var(--go4-rgb-ink),0.28)));
}

.go4kora-footer-dropdown {
  position: relative;
}

.go4kora-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--go4-rgb-ink),0.35);
  backdrop-filter: blur(2.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 12;
  -webkit-backdrop-filter: blur(2.5px);
}

.go4kora-card.go4kora-menu-open .go4kora-menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

.go4kora-footer-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 180px;
  max-width: 260px;
  max-height: 220px;
  overflow: auto;
  border-radius: calc(var(--go4-card-radius) - 6px);
  padding: 7px;
  display: none;
  z-index: 20;
  overflow-x: hidden;
}

.go4kora-footer-menu,
.go4kora-mobile-panel {
  backdrop-filter: var(--go4-ui-panel-filter, blur(14px) saturate(1.15));
  -webkit-backdrop-filter: var(--go4-ui-panel-filter, blur(14px) saturate(1.15));
}

/* In RTL layouts, anchor the dropdown to the inline-end edge so it doesn't overflow the viewport */

:dir(rtl) .go4kora-footer-menu {
  left: 0;
  right: auto;
}

.go4kora-footer-dropdown.is-open .go4kora-footer-menu {
  display: block;
}

.go4kora-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 6px;
  border-bottom: var(--go4-bd-divider);
  margin-bottom: 6px;
}

.go4kora-menu-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--go4-fz-sm, 13px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--go4-ui-text, rgba(var(--go4-rgb-white),0.92));
}

.go4kora-menu-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 30px;
  height: 30px;
  border: var(--go4-bd-ui);
  background: transparent;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  color: var(--go4-ui-text-muted, rgba(var(--go4-rgb-white),0.78));
  cursor: pointer;
  border-radius: calc(var(--go4-ui-radius) - 2px);
  /* Make menu header buttons match the same "glass tokens" as panel rows/buttons */
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.30));
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.035), var(--go4-ui-shadow);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 120ms ease;
}

.go4kora-menu-close:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.36));
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.03), var(--go4-shadow-inset-top-06);
}

.go4kora-footer-menu-item,
.go4kora-sheet-item {
  min-height: 42px;
  padding: 7px 11px;
  margin: 0;
  border-radius: calc(var(--go4-ui-radius) - 2px);
  color: rgba(var(--go4-rgb-white),0.94);
  text-decoration: none;
  font-size: 12.75px;
  font-weight: 800;
  line-height: 1.24;
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.30));
  border: var(--go4-bd-ui);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.035), var(--go4-ui-shadow);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.go4kora-footer-menu-item + .go4kora-footer-menu-item {
  margin-top: 3px;
}

.go4kora-footer-menu-item:hover {
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.115), rgba(var(--go4-rgb-ink),0.285));
  border-color: var(--go4-ui-border-hover);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.05), 0 8px 18px rgba(var(--go4-rgb-ink),0.20);
  transform: translateY(-1px);
}

.go4kora-footer-menu-item:active {
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.36));
  transform: translateY(1px);
}

@media (min-width: 561px){

  .go4kora-footer-menu{
    min-width: 196px;
    max-width: 214px;
    max-height: 292px;
    border-radius: var(--go4-ui-radius-sm);
    padding: 4px;
    overscroll-behavior: contain;
  }

  .go4kora-menu-head{
    gap: 5px;
    padding: 3px 4px 4px;
    margin-bottom: 3px;
  }

  .go4kora-menu-title{
    font-size: 12px;
    line-height: 1.08;
  }

  .go4kora-menu-close{
    min-width: 26px;
    height: 26px;
    font-size: 16px;
    border-radius: calc(var(--go4-ui-radius) - 4px);
  }

  .go4kora-footer-menu-item{
    min-height: 35px;
    font-size: 12.15px;
    line-height: 1.18;
    padding: 6px 7px;
    border-radius: calc(var(--go4-ui-radius) - 4px);
  }

  .go4kora-footer-menu-item + .go4kora-footer-menu-item{
    margin-top: 2px;
  }

  .go4kora-footer-menu::-webkit-scrollbar{
    width: 6px;
  }

}

@media (max-width: 520px){
  .go4kora-footer-btn{
    padding: 9px 9px;
    font-size: var(--go4-fz-sm, 12.5px);
    border-radius: var(--go4-ui-radius-sm);
  }

  .go4kora-footer-menu{
    left: 0;
    right: 0;
    max-width: none;
    min-width: 0;
    padding: 6px;
  }

  .go4kora-menu-head{
    margin-bottom: 4px;
  }

  .go4kora-menu-title{
    line-height: 1.1;
  }

  .go4kora-menu-close{
    min-width: 30px;
    height: 30px;
    font-size: 17px;
    border-radius: calc(var(--go4-ui-radius) - 3px);
  }

  .go4kora-footer-menu-item{
    font-size: 12.5px;
    line-height: 1.2;
  }

  .go4kora-footer-menu-item + .go4kora-footer-menu-item{
    margin-top: 2px;
  }


}

.go4kora-toast {
  --go4-toast-offset-x: 12px;
  --go4-toast-offset-y: 10px;
  --go4-toast-shell-max-width: calc(100% - 24px);
  position: absolute;
  left: var(--go4-toast-offset-x);
  bottom: var(--go4-toast-offset-y);
  max-width: var(--go4-toast-shell-max-width);
  background: rgba(var(--go4-rgb-ink),0.72);
  color: var(--go4-c-white);
  padding: 7px 9px;
  border-radius: var(--go4-ui-radius);
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.go4kora-toast.is-show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){

  .go4kora-footer-btn:active{
    transform: none;
  }

}

@media (max-width: 560px){

  .go4kora-card-footer{
    position: relative;
    z-index: 30;
    padding: 7px 10px 9px;
    gap: 6px;
    border-radius: var(--go4-card-radius);
    background: rgba(var(--go4-rgb-panel-10),.92);
    border: var(--go4-bd-white-06);
    box-shadow: var(--go4-shadow-elev-8-22);
  }

  .go4kora-card-footer,
  .go4kora-card-footer *{
    filter: none;
  }

  .go4kora-card-footer .go4kora-footer-item{
    margin: 0;
  }


  .go4kora-card-footer .go4kora-footer-menu{
    min-width: 180px;
    max-width: calc(100vw - 32px);
    max-width: calc(100dvw - 32px);
  }

}

@media (max-width: 420px){

  .go4kora-card-footer{
    padding: 5px 6px;
    gap: 5px;
  }


  .go4kora-footer-menu{
    padding: 5px;
  }

  .go4kora-menu-head{
    margin-bottom: 3px;
  }

  .go4kora-menu-title{
    line-height: 1.08;
  }

  .go4kora-menu-close{
    min-width: 29px;
    height: 29px;
    font-size: 16px;
    border-radius: calc(var(--go4-ui-radius) - 4px);
  }

  .go4kora-footer-menu-item{
    font-size: 12.15px;
    line-height: 1.18;
  }
}

@media (max-width: 560px){

  .go4kora-footer-row{
    gap: 4px;
    background: transparent;
    border: var(--go4-bd-0);
    border-radius: var(--go4-radius-0);
    padding: 0;
    box-shadow: none;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .go4kora-card-footer .go4kora-footer-item + .go4kora-footer-item::before{
    display: none;
  }

  .go4kora-card-footer{
    --go4-footer-btn-minh: 38px;
    --go4-footer-btn-pad-x: 5px;
    --go4-footer-btn-gap: 3px;
    --go4-footer-btn-font: 11.7px;
    --go4-footer-btn-ico: 12.5px;
    padding-inline: 8px;
  }

  .go4kora-menu-head{
    padding: 7px 9px;
  }

  .go4kora-menu-title{
    font-size: 12.5px;
  }

  .go4kora-footer-menu-item,
  .go4kora-mobile-panel-body .go4kora-sheet-item{
    min-height: 40px;
    padding: 0 10px;
    border-radius: var(--go4-ui-radius-sm);
  }

  .go4kora-mobile-panel-body .go4kora-sheet-item{
    margin-top: 0;
  }

  .go4kora-mobile-panel-body .go4kora-sheet-item + .go4kora-sheet-item{
    margin-top: 5px;
  }

  .go4kora-footer-row .go4kora-footer-btn{
    display: flex;
    flex-direction: row;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .go4kora-footer-row .go4kora-footer-btn:focus,
  .go4kora-footer-row .go4kora-footer-btn:focus-visible{
    outline: none;
    color: rgba(var(--go4-rgb-white),.98);
  }

  .go4kora-card-footer .go4kora-footer-text{
    display: block;
    flex: 1 1 auto;
    font-size: 10.9px;
    line-height: 1.16;
    opacity: 1;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    padding-bottom: 0;
  }

  .go4kora-card-footer .go4kora-footer-btn-ico{
    width: 12.5px;
    height: 12.5px;
    flex: 0 0 12.5px;
  }

  .go4kora-card-footer .go4kora-footer-btn:active{
    background: var(--go4-ui-glass-pressed, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.40)));
    box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.035), 0 6px 14px rgba(var(--go4-rgb-ink),0.17);
  }

  .go4kora-footer-row .go4kora-footer-item.is-active > .go4kora-footer-btn,
  .go4kora-footer-row .go4kora-footer-item.is-active > .go4kora-footer-btn:focus,
  .go4kora-footer-row .go4kora-footer-item.is-active > .go4kora-footer-btn:focus-visible,
  .go4kora-footer-dropdown.is-open > .go4kora-footer-btn{
    background: linear-gradient(180deg, rgba(210,20,20,0.96), rgba(184,14,14,0.94));
    border-color: rgba(var(--go4-rgb-white),0.12);
    box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.07), 0 10px 22px rgba(120, 8, 8, 0.26);
    color: rgba(var(--go4-rgb-white),0.98);
    text-shadow: 0 1px 0 rgba(var(--go4-rgb-ink),0.18);
  }


  .go4kora-footer-menu{
    width: min(360px, calc(100vw - 24px));
    width: min(360px, calc(100dvw - 24px));
  }

  .go4kora-footer-report,
  .go4kora-footer-more{
    display: flex;
  }

  .go4kora-footer-follow,
  .go4kora-footer-support,
  .go4kora-footer-report,
  .go4kora-footer-more{
    order: 0;
  }

}


.go4kora-footer-menu-note {
  opacity: 0.78;
  cursor: default;
  user-select: none;
}

@media (min-width: 561px){

  .go4kora-footer-more{
    display: flex;
  }

}

.go4kora-footer-menu-item,
.go4kora-sheet-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: start;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


.go4kora-sheet-item + .go4kora-sheet-item {
  margin-top: 6px;
}

.go4kora-sheet-item:active {
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.36));
  transform: translateY(1px);
}

.go4kora-sheet-item:focus-visible {
  outline: none;
  border-color: rgba(var(--go4-rgb-white),0.24);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.13), rgba(var(--go4-rgb-ink),0.26));
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.06), 0 0 0 2px rgba(var(--go4-rgb-white),0.07), 0 10px 22px rgba(var(--go4-rgb-ink),0.24);
}

.go4kora-menu-close:hover {
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.115), rgba(var(--go4-rgb-ink),0.285));
  border-color: var(--go4-ui-border-hover);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.05), 0 8px 18px rgba(var(--go4-rgb-ink),0.20);
  color: var(--go4-ui-text, rgba(var(--go4-rgb-white),0.92));
  transform: translateY(-1px);
}

.go4kora-menu-close:focus-visible {
  outline: none;
  border-color: rgba(var(--go4-rgb-white),0.24);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.13), rgba(var(--go4-rgb-ink),0.26));
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.06), 0 0 0 2px rgba(var(--go4-rgb-white),0.07), 0 10px 22px rgba(var(--go4-rgb-ink),0.24);
  transform: translateY(-1px);
}

/* Small "UI mini buttons" (used in AdBlock debug overlay etc.) */

.go4kora-ui-mini-btn {
  appearance:none;
  border: var(--go4-bd-item);
  border-radius: var(--go4-ui-radius-sm);
  background: var(--go4-ui-item-bg, rgba(var(--go4-rgb-white),0.12));
  color: var(--go4-ui-text, var(--go4-c-white));
  padding: 4px 8px;
  cursor: pointer;
  box-shadow: var(--go4-shadow-inset-top-10);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.go4kora-ui-mini-btn:hover {
  background: var(--go4-ui-item-hover, rgba(var(--go4-rgb-white),0.18));
  border-color: var(--go4-ui-border-hover);
}

.go4kora-ui-mini-btn:active {
  background: var(--go4-ui-item-pressed, rgba(var(--go4-rgb-white),0.22));
  transform: translateY(0.5px);
}

.go4kora-ui-mini-btn:focus-visible {
  outline: none;
  box-shadow: var(--go4-shadow-inset-12), var(--go4-focus-ring);
}

.go4kora-ui-mini-btn--mono {
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.go4kora-footer-menu-item:focus-visible {
  outline: none;
  border-color: rgba(var(--go4-rgb-white),0.24);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.13), rgba(var(--go4-rgb-ink),0.26));
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.06), 0 0 0 2px rgba(var(--go4-rgb-white),0.07), 0 10px 22px rgba(var(--go4-rgb-ink),0.24);
  transform: translateY(-1px);
}

.go4kora-footer-menu-item:last-child {
  border-bottom: var(--go4-bd-0);
}

.go4kora-footer-menu,
.go4kora-mobile-panel-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--go4-rgb-white),0.22) transparent;
}

.go4kora-footer-menu::-webkit-scrollbar,
.go4kora-mobile-panel-body::-webkit-scrollbar {
  width: 8px;
}

.go4kora-footer-menu::-webkit-scrollbar-thumb,
.go4kora-mobile-panel-body::-webkit-scrollbar-thumb {
  background: rgba(var(--go4-rgb-white),0.18);
  border-radius: var(--go4-radius-pill);
}

.go4kora-footer-menu::-webkit-scrollbar-track,
.go4kora-mobile-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

@media (min-width: 561px) and (hover:hover) and (pointer:fine){

  .go4kora-card-footer{
    padding: 6px 13px 5px;
    background: transparent;
    border-top: var(--go4-bd-0);
  }

  .go4kora-footer-row{
    gap: 5px;
    background: transparent;
    border: var(--go4-bd-0);
    border-radius: var(--go4-radius-0);
    padding: 0;
    box-shadow: none;
    overflow: visible;
  }

  .go4kora-card-footer.has-open-menu,
  .go4kora-card-footer.has-open-menu .go4kora-footer-row{
    overflow: visible;
  }

  .go4kora-card-footer .go4kora-footer-item + .go4kora-footer-item::before{
    display: none;
  }

  .go4kora-card-footer{
    --go4-footer-btn-minh: 38px;
    --go4-footer-btn-pad-x: 9px;
    --go4-footer-btn-gap: 4px;
    --go4-footer-btn-font: 12.15px;
    --go4-footer-btn-ico: 15.5px;
  }

  .go4kora-card-footer .go4kora-footer-btn{
    font-weight: 800;
    display: flex;
    align-items: center;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.032), 0 7px 16px rgba(var(--go4-rgb-ink),0.18);
  }

  .go4kora-card-footer .go4kora-footer-btn:hover{
    background: var(--go4-ui-glass-hover, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.13), rgba(var(--go4-rgb-ink),0.30)));
    border-color: var(--go4-ui-border-hover);
    box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.042), 0 8px 18px rgba(var(--go4-rgb-ink),0.19);
    transform: translateY(-0.5px);
  }

  .go4kora-card-footer .go4kora-footer-btn:active{
    background: var(--go4-ui-glass-pressed, linear-gradient(180deg, rgba(var(--go4-rgb-white),0.08), rgba(var(--go4-rgb-ink),0.40)));
    box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.035), 0 5px 11px rgba(var(--go4-rgb-ink),0.16);
    transform: translateY(0.25px);
  }

  .go4kora-card-footer .go4kora-footer-dropdown.is-open > .go4kora-footer-btn{
    background: linear-gradient(180deg, rgba(210,20,20,0.96), rgba(184,14,14,0.94));
    border-color: rgba(var(--go4-rgb-white),0.12);
    box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.065), 0 8px 18px rgba(120, 8, 8, 0.22);
    color: rgba(var(--go4-rgb-white),0.98);
    text-shadow: 0 1px 0 rgba(var(--go4-rgb-ink),0.16);
  }

  .go4kora-card-footer .go4kora-footer-text{
    line-height: 1.02;
  }

  .go4kora-footer-hint{
    margin-top: 2px;
    font-size: 10.7px;
    line-height: 1.18;
    color: rgba(var(--go4-rgb-white),.65);
  }


}

.go4kora-footer-hint {
  margin-top: 3px;
  padding: 0 12px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.22;
  color: rgba(var(--go4-rgb-white),.68);
  text-shadow: 0 1px 0 rgba(var(--go4-rgb-ink),.35);
}

.go4kora-footer-hint .go4kora-hint-link {
  background: transparent;
  border: var(--go4-bd-0);
  padding: 0;
  margin: 0 2px;
  font: inherit;
  color: rgba(var(--go4-rgb-white),.90);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  opacity: .95;
}

.go4kora-footer-hint .go4kora-hint-link:hover {
  opacity: 1;
}

.go4kora-footer-hint .go4kora-hint-link:active {
  transform: translateY(0.5px);
}

.go4kora-footer-hint .go4kora-hint-link:focus-visible {
  outline: 2px solid rgba(var(--go4-rgb-white),.35);
  outline-offset: 3px;
  border-radius: var(--go4-ui-radius-xs);
}

@media (max-width: 560px){

  .go4kora-footer-hint{
    font-size: 10.5px;
    margin-top: 3px;
    padding: 0 8px 0;
    line-height: 1.18;
  }

}


/* When the ad overlay is shown, we keep the footer visible but prevent interaction */

.go4kora-player-root.go4kora-ad-open .go4kora-card-footer {
  pointer-events: none;
}

/* ------------------------------------------------------------
Compact Level 1: Classic sizing (Header Tabs + Footer)
- Visual-only tweaks (no behavior changes)
- Keeps responsive safety across desktop/mobile
------------------------------------------------------------ */

@media (max-width: 420px){

  .go4kora-footer-row{
    padding: 4px 2px;
    gap: 3px;
  }

  .go4kora-card-footer{
    --go4-footer-btn-minh: 35px;
    --go4-footer-btn-pad-x: 4px;
    --go4-footer-btn-gap: 2px;
    --go4-footer-btn-ico: 11.75px;
    padding-inline: 4px;
  }

  .go4kora-card-footer .go4kora-footer-text{
    font-size: 10.5px;
  }

}

/* ------------------------------------------------------------
Player loading/skeleton polish (visual-only)
- Keeps the same behavior/logic
- Aligns the loading state box with shared glass panel tokens
------------------------------------------------------------ */

/* Softer loading-state visual treatment (keeps the same logic/behavior) */

.go4kora-state-loading {
  background: rgba(var(--go4-rgb-ink),0.38);
}

.go4kora-state-loading .go4kora-state-box {
  --go4-state-box-pad: 12px 14px;
  width: min(340px, 100%);
  border-radius: calc(var(--go4-ui-radius) + 2px);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 16px 34px rgba(var(--go4-rgb-ink),0.24), inset 0 1px 0 rgba(var(--go4-rgb-white),0.04);
  transform: translateY(4px) scale(0.985);
  opacity: 0.98;
  transition: transform .18s ease, opacity .18s ease;
}

.go4kora-state-loading.is-show .go4kora-state-box {
  position: relative;
  overflow: hidden;
  transform: translateY(0) scale(1);
  opacity: 1;
}

.go4kora-state-loading .go4kora-state-title {
  margin-top: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.go4kora-state-loading .go4kora-state-sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.42;
  color: rgba(var(--go4-rgb-white),0.76);
}

.go4kora-state-loading .go4kora-spinner {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  border-width: 2px;
  border-color: rgba(var(--go4-rgb-white),0.16);
  border-top-color: rgba(var(--go4-rgb-white),0.90);
}

.go4kora-state-loading.is-show .go4kora-state-box::after {
  display: none;
}

@media (max-width: 560px){
  .go4kora-state-loading .go4kora-state-box {
    --go4-state-box-pad: 11px 12px;
    width: min(312px, 100%);
  }

  .go4kora-state-loading .go4kora-state-title {
    font-size: 12.6px;
  }

  .go4kora-state-loading .go4kora-state-sub {
    font-size: 11.7px;
  }
}

@media (max-width: 420px){
  .go4kora-state-loading .go4kora-state-box {
    --go4-state-box-pad: 10px 11px;
  }

  .go4kora-state-loading .go4kora-spinner {
    width: 22px;
    height: 22px;
    margin-bottom: 7px;
  }
}


/* Tap-to-play mode: keep the same behavior, but soften the panel/CTA so it matches the refined loading look. */
.go4kora-state-loading.is-manual-play {
  background: rgba(var(--go4-rgb-ink),0.34);
}

.go4kora-state-loading.is-manual-play .go4kora-state-box {
  --go4-state-box-pad: 12px 14px;
  width: min(360px, 100%);
  border-radius: calc(var(--go4-ui-radius) + 3px);
  box-shadow: 0 18px 36px rgba(var(--go4-rgb-ink),0.22), inset 0 1px 0 rgba(var(--go4-rgb-white),0.04);
}

.go4kora-state-loading.is-manual-play .go4kora-state-title {
  font-size: 13.25px;
  font-weight: 800;
  letter-spacing: 0;
}

.go4kora-state-loading.is-manual-play .go4kora-state-sub {
  margin-top: 5px;
  font-size: 11.85px;
  line-height: 1.38;
  color: rgba(var(--go4-rgb-white),0.72);
}

.go4kora-state-loading.is-manual-play .go4kora-state-actions,
.go4kora-state-loading.is-manual-play .go4kora-state-loading-actions {
  margin-top: 10px;
  gap: 8px;
}

.go4kora-state-loading.is-manual-play .go4kora-btn-play {
  min-width: 198px;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  line-height: 1.2;
  border-radius: calc(var(--go4-radius-pill) - 2px);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-brand-750),0.94), rgba(var(--go4-rgb-brand-850),0.94));
  box-shadow: 0 10px 22px rgba(var(--go4-rgb-brand-900),0.18), inset 0 1px 0 rgba(var(--go4-rgb-white),0.08);
}

.go4kora-state-loading.is-manual-play .go4kora-btn-play:hover {
  background: linear-gradient(180deg, rgba(var(--go4-rgb-brand-720),0.95), rgba(var(--go4-rgb-brand-820),0.95));
}

.go4kora-state-loading.is-manual-play .go4kora-btn-play:active {
  transform: translateY(1px);
}

.go4kora-state-loading.is-manual-play .go4kora-btn-play-ico {
  width: 20px;
  height: 20px;
  background: rgba(var(--go4-rgb-white),0.11);
}

.go4kora-state-loading.is-manual-play .go4kora-btn-play-ico svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 560px){
  .go4kora-state-loading.is-manual-play .go4kora-state-box {
    --go4-state-box-pad: 11px 12px;
    width: min(318px, 100%);
  }

  .go4kora-state-loading.is-manual-play .go4kora-state-title {
    font-size: 12.85px;
  }

  .go4kora-state-loading.is-manual-play .go4kora-state-sub {
    font-size: 11.55px;
  }

  .go4kora-state-loading.is-manual-play .go4kora-btn-play {
    min-width: 0;
    width: 100%;
    padding: 8px 12px;
  }
}

@media (max-width: 420px){
  .go4kora-state-loading.is-manual-play .go4kora-state-box {
    --go4-state-box-pad: 10px 11px;
  }

  .go4kora-state-loading.is-manual-play .go4kora-btn-play {
    gap: 7px;
    font-size: 12.25px;
  }

  .go4kora-state-loading.is-manual-play .go4kora-btn-play-ico {
    width: 18px;
    height: 18px;
  }
}

/* Spinner contrast polish */

/* Ensure dialog surfaces stay aligned with our glass tokens (menus/sheets use role="dialog") */

/* ==========================================================================
   6) Responsive mobile spacing shell
   ========================================================================== */

/* Mobile spacing: tighter outer padding/margins and smaller shell paddings */

/* Player shell */
@media (max-width:600px){

  .go4kora-player-root{
    --go4-shell-margin-y: 10px;
    --go4-shell-pad-x: 8px;
  }

  .go4kora-frame-wrap{
    --go4-frame-shell-gap: 8px;
    --go4-frame-shell-radius: var(--go4-card-radius);
  }

}

@media (max-width: 560px){

  .go4kora-card{
    padding-bottom: 6px;
  }

  .go4kora-state-box{
    --go4-state-box-pad: 14px 16px;
  }

  .go4kora-toast{
    --go4-toast-offset-x: 10px;
    --go4-toast-offset-y: 8px;
    --go4-toast-shell-max-width: calc(100% - 20px);
  }

  .go4kora-mobile-panel{
    --go4-mobile-panel-inset-x: 10px;
    --go4-mobile-panel-bottom: 68px;
    --go4-mobile-panel-radius: var(--go4-card-radius);
    position: absolute;
    left: var(--go4-mobile-panel-inset-x);
    right: var(--go4-mobile-panel-inset-x);
    bottom: var(--go4-mobile-panel-bottom);
    border-radius: var(--go4-mobile-panel-radius);
    overflow: hidden;
    z-index: 30;
  }

  .go4kora-mobile-panel-body{
    --go4-mobile-panel-body-pad: 8px;
    --go4-mobile-panel-body-maxh: 45vh;
    padding: var(--go4-mobile-panel-body-pad);
    max-height: var(--go4-mobile-panel-body-maxh);
    overflow: auto;
  }

  .go4kora-sheet-item:hover{
    background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.115), rgba(var(--go4-rgb-ink),0.285));
    border-color: var(--go4-ui-border-hover);
  }

  .go4kora-sheet-item:active{
    background: var(--go4-ui-item-pressed, rgba(var(--go4-rgb-white),0.12));
  }

}

/* State / feedback shell */
@media (max-width: 420px){

  .go4kora-player-root{
    --go4-shell-pad-x: 6px;
    --go4-shell-margin-y: 8px;
  }

  .go4kora-frame-wrap{
    --go4-frame-shell-gap: 6px;
  }

  .go4kora-state,
  .go4kora-adblock-note{
    --go4-feedback-shell-pad: 14px;
  }

  .go4kora-adblock-note{
    --go4-adblock-shell-pad: 14px;
  }

  .go4kora-adblock-panel{
    width: min(360px,100%);
    padding: 11px 11px 10px;
  }

  .go4kora-adblock-text{
    font-size: 12.6px;
    line-height: 1.44;
    margin-bottom: 9px;
  }

  .go4kora-adblock-retry{
    min-height: 34px;
    padding: 8px 11px;
    font-size: 12.15px;
  }

  .go4kora-toast{
    --go4-toast-offset-x: 8px;
    --go4-toast-offset-y: 6px;
    --go4-toast-shell-max-width: calc(100% - 16px);
  }

  .go4kora-mobile-panel{
    --go4-mobile-panel-inset-x: 6px;
    --go4-mobile-panel-bottom: 60px;
  }

  .go4kora-mobile-panel-body{
    --go4-mobile-panel-body-maxh: 42vh;
  }

}

/* Reduced motion (global plugin scope) */

@media (prefers-reduced-motion: reduce){

  .go4kora-player-root *,
  .go4kora-player-root *::before,
  .go4kora-player-root *::after{
    animation: none !important;
    transition: none !important;
  }

  .go4kora-player-root .go4kora-state-loading.is-show::before{
    display: none !important;
  }

}


/* ==========================================================================
   7) Player-engine specific UI (Clappr / hls.js)
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Direct M3U8 + Clappr: Level Selector UI parity pass (aligned to hls.js)    */
/* -------------------------------------------------------------------------- */
.go4kora-built-player .media-control[data-media-control] .media-control-right-panel .level_selector,
.go4kora-built-player .media-control .media-control-right-panel .level_selector,
.go4kora-built-player [data-level-selector] {
  position: relative;
  order: -1;
  margin-inline-end: 8px;
  z-index: 8;
}

.go4kora-built-player .level_selector > button,
.go4kora-built-player [data-level-selector] > button,
.go4kora-built-player .level_selector button,
.go4kora-built-player [data-level-selector] button {
  min-width: 50px;
  max-width: 78px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--go4-rgb-white),0.12);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.09), rgba(var(--go4-rgb-ink),0.26));
  color: rgba(var(--go4-rgb-white),0.96);
  box-shadow: 0 6px 16px rgba(var(--go4-rgb-ink),0.22), inset 0 1px 0 rgba(var(--go4-rgb-white),0.05);
  font: 800 8.5px/1 inherit;
  letter-spacing: .045em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.go4kora-built-player .level_selector > button:hover,
.go4kora-built-player [data-level-selector] > button:hover,
.go4kora-built-player .level_selector button:hover,
.go4kora-built-player [data-level-selector] button:hover {
  border-color: rgba(var(--go4-rgb-white),0.18);
  background: linear-gradient(180deg, rgba(var(--go4-rgb-white),0.12), rgba(var(--go4-rgb-ink),0.30));
}

.go4kora-built-player .level_selector > button:focus-visible,
.go4kora-built-player [data-level-selector] > button:focus-visible,
.go4kora-built-player .level_selector button:focus-visible,
.go4kora-built-player [data-level-selector] button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--go4-rgb-brand-850),0.28), 0 6px 16px rgba(var(--go4-rgb-ink),0.22);
}

.go4kora-built-player .level_selector ul,
.go4kora-built-player [data-level-selector] ul {
  position: absolute !important;
  inset: auto 0 calc(100% + 8px) auto !important;
  min-width: 134px;
  max-width: min(64vw, 176px);
  margin: 0;
  padding: 5px;
  list-style: none;
  border-radius: 12px;
  border: 1px solid rgba(var(--go4-rgb-white),0.10);
  background: linear-gradient(180deg, rgba(34,36,43,.96) 0%, rgba(16,17,21,.98) 100%);
  box-shadow: 0 14px 34px rgba(var(--go4-rgb-ink),0.34), inset 0 1px 0 rgba(var(--go4-rgb-white),0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  z-index: 22;
}

.go4kora-built-player .level_selector li[data-title],
.go4kora-built-player [data-level-selector] li[data-title] {
  display: block;
  margin: 0 0 2px;
  padding: 3px 7px 5px;
  border-bottom: 0;
  color: rgba(var(--go4-rgb-white),0.72);
  font: 700 10.5px/1.08 inherit;
  letter-spacing: .05em;
}

.go4kora-built-player .level_selector li,
.go4kora-built-player [data-level-selector] li {
  margin: 0;
  padding: 0;
}

.go4kora-built-player .level_selector a[data-level-selector-select],
.go4kora-built-player [data-level-selector] a[data-level-selector-select] {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 9px;
  border-radius: 9px;
  background: transparent;
  color: rgba(var(--go4-rgb-white),0.92);
  font: 600 11.5px/1.18 inherit;
  text-decoration: none;
  overflow: hidden;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.go4kora-built-player .level_selector a[data-level-selector-select]:hover,
.go4kora-built-player [data-level-selector] a[data-level-selector-select]:hover {
  background: rgba(var(--go4-rgb-white),0.08);
}

.go4kora-built-player .level_selector a[data-level-selector-select]:active,
.go4kora-built-player [data-level-selector] a[data-level-selector-select]:active {
  transform: translateY(1px);
}

.go4kora-built-player .level_selector a.current,
.go4kora-built-player .level_selector a[data-level-selector-select].current,
.go4kora-built-player .level_selector li.current > a[data-level-selector-select],
.go4kora-built-player .level_selector li.current > a,
.go4kora-built-player [data-level-selector] a.current,
.go4kora-built-player [data-level-selector] a[data-level-selector-select].current,
.go4kora-built-player [data-level-selector] li.current > a[data-level-selector-select],
.go4kora-built-player [data-level-selector] li.current > a,
.go4kora-hlsjs-quality-item.is-active {
  background: linear-gradient(90deg, rgba(var(--go4-rgb-brand-850),0.16) 0%, rgba(var(--go4-rgb-brand-850),0.08) 18%, rgba(255,255,255,0.02) 18%, rgba(255,255,255,0.02) 100%) !important;
  color: rgba(var(--go4-rgb-white),0.98) !important;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--go4-c-brand-850), inset 0 1px 0 rgba(var(--go4-rgb-white),0.04) !important;
}

.go4kora-built-player .level_selector li.current > a[data-level-selector-select] *,
.go4kora-built-player .level_selector li.current > a *,
.go4kora-built-player [data-level-selector] li.current > a[data-level-selector-select] *,
.go4kora-built-player [data-level-selector] li.current > a *,
.go4kora-hlsjs-quality-item.is-active * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.go4kora-built-player .media-control-right-panel [data-stop],
.go4kora-built-player .media-control-right-panel .stop-button {
  position: relative;
  z-index: 7;
}

@media (max-width: 782px) {
  .go4kora-built-player .media-control[data-media-control] .media-control-right-panel .level_selector,
  .go4kora-built-player .media-control .media-control-right-panel .level_selector,
  .go4kora-built-player [data-level-selector] {
    margin-inline-end: 10px;
  }

  .go4kora-built-player .level_selector > button,
  .go4kora-built-player [data-level-selector] > button,
  .go4kora-built-player .level_selector button,
  .go4kora-built-player [data-level-selector] button {
    min-width: 46px;
    max-width: 68px;
    height: 22px;
    padding: 0 8px;
    font-size: 8.5px;
  }

  .go4kora-built-player .level_selector ul,
  .go4kora-built-player [data-level-selector] ul {
    min-width: 122px;
    max-width: min(62vw, 156px);
    padding: 4px;
    border-radius: 11px;
  }

  .go4kora-built-player .level_selector li[data-title],
  .go4kora-built-player [data-level-selector] li[data-title] {
    padding: 3px 6px 5px;
    font-size: 10px;
  }

  .go4kora-built-player .level_selector a[data-level-selector-select],
  .go4kora-built-player [data-level-selector] a[data-level-selector-select] {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 11px;
  }
}


/* -------------------------------------------------------------------------- */
/* Direct M3U8 + hls.js built-in player                                       */
/* -------------------------------------------------------------------------- */
.go4kora-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.go4kora-hlsjs-player {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.go4kora-hlsjs-video-wrap {
  position: absolute;
  inset: 0;
}

.go4kora-hlsjs-video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

.go4kora-hlsjs-chrome {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 10px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--go4-rgb-ink),0.28) 0%, rgba(var(--go4-rgb-ink),0) 18%),
    linear-gradient(0deg, rgba(var(--go4-rgb-ink),0.44) 0%, rgba(var(--go4-rgb-ink),0.07) 22%, rgba(var(--go4-rgb-ink),0) 40%);
}

.go4kora-hlsjs-live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(var(--go4-rgb-white),0.11);
  background: rgba(var(--go4-rgb-white),0.07);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.05);
  color: rgba(var(--go4-rgb-white),0.96);
  white-space: nowrap;
}

.go4kora-hlsjs-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--go4-c-brand-850);
  box-shadow: 0 0 0 2px rgba(var(--go4-rgb-brand-850),0.12);
}

.go4kora-hlsjs-live-text {
  color: rgba(var(--go4-rgb-white),0.96);
  font: 800 8.5px/1 inherit;
  letter-spacing: .09em;
}

.go4kora-hlsjs-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-height: 34px;
  margin-top: auto;
  padding: 3px 5px;
  border-radius: 12px;
  border: 1px solid rgba(var(--go4-rgb-white),0.12);
  background: linear-gradient(180deg, rgba(34,36,43,.70) 0%, rgba(16,17,21,.82) 100%);
  box-shadow: 0 18px 40px rgba(var(--go4-rgb-ink),0.30), inset 0 1px 0 rgba(var(--go4-rgb-white),0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}

.go4kora-hlsjs-player.is-fullscreen .go4kora-hlsjs-controls,
.go4kora-hlsjs-player.is-fullscreen.is-controls-hidden .go4kora-hlsjs-controls {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.go4kora-hlsjs-player.is-fullscreen.is-controls-visible .go4kora-hlsjs-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.go4kora-hlsjs-controls-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.go4kora-hlsjs-controls-left {
  flex: 1 1 auto;
}

.go4kora-hlsjs-controls-right {
  flex: 0 0 auto;
}

.go4kora-hlsjs-btn,
.go4kora-hlsjs-quality-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(var(--go4-rgb-white),0.11);
  border-radius: 999px;
  background: rgba(var(--go4-rgb-white),0.07);
  color: rgba(var(--go4-rgb-white),0.96);
  box-shadow: inset 0 1px 0 rgba(var(--go4-rgb-white),0.05);
  cursor: pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.go4kora-hlsjs-btn:hover,
.go4kora-hlsjs-quality-btn:hover,
.go4kora-hlsjs-quality.is-open .go4kora-hlsjs-quality-btn {
  background: rgba(var(--go4-rgb-white),0.12);
  border-color: rgba(var(--go4-rgb-white),0.18);
}

.go4kora-hlsjs-btn:active,
.go4kora-hlsjs-quality-btn:active {
  transform: translateY(1px);
}

.go4kora-hlsjs-btn:focus-visible,
.go4kora-hlsjs-quality-btn:focus-visible,
.go4kora-hlsjs-quality-item:focus-visible {
  outline: 2px solid rgba(var(--go4-rgb-white),0.26);
  outline-offset: 2px;
}

.go4kora-hlsjs-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 11px;
  line-height: 1;
  color: rgba(var(--go4-rgb-white),0.96);
}

.go4kora-hlsjs-btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.go4kora-hlsjs-btn-play,
.go4kora-hlsjs-btn-mute,
.go4kora-hlsjs-btn-fullscreen {
  width: 24px;
  min-width: 24px;
  padding: 0;
}

.go4kora-hlsjs-quality {
  position: relative;
}

.go4kora-hlsjs-quality-btn {
  min-width: 50px;
  max-width: 78px;
  font: 800 8.5px/1 inherit;
  letter-spacing: .045em;
}

.go4kora-hlsjs-quality-menu {
  position: absolute;
  inset: auto 0 calc(100% + 8px) auto;
  min-width: 134px;
  max-width: min(64vw, 176px);
  margin: 0;
  padding: 5px;
  border-radius: 12px;
  border: 1px solid rgba(var(--go4-rgb-white),0.10);
  background: linear-gradient(180deg, rgba(34,36,43,.96) 0%, rgba(16,17,21,.98) 100%);
  box-shadow: 0 14px 34px rgba(var(--go4-rgb-ink),0.34), inset 0 1px 0 rgba(var(--go4-rgb-white),0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  z-index: 22;
}

.go4kora-hlsjs-quality-title {
  display: block;
  margin: 0 0 2px;
  padding: 3px 7px 5px;
  border-bottom: 0;
  color: rgba(var(--go4-rgb-white),0.72);
  font: 700 10.5px/1.08 inherit;
  letter-spacing: .05em;
}

.go4kora-hlsjs-quality-list {
  display: block;
  margin: 0;
  padding: 0;
}

.go4kora-hlsjs-quality-item {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(var(--go4-rgb-white),0.92);
  font: 600 11.5px/1.18 inherit;
  text-align: start;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.go4kora-hlsjs-quality-item:hover {
  background: rgba(var(--go4-rgb-white),0.08);
}

.go4kora-hlsjs-quality-item:active {
  transform: translateY(1px);
}


@media (max-width: 782px) {
  .go4kora-hlsjs-chrome {
    padding: 9px;
  }

  .go4kora-hlsjs-controls {
    min-height: 32px;
    padding: 3px 5px;
    border-radius: 11px;
    gap: 4px;
  }

  .go4kora-hlsjs-controls-group {
    gap: 5px;
  }

  .go4kora-hlsjs-live {
    min-height: 20px;
    padding: 0 6px;
  }

  .go4kora-hlsjs-btn,
  .go4kora-hlsjs-quality-btn {
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
  }

  .go4kora-hlsjs-btn-play,
  .go4kora-hlsjs-btn-mute,
  .go4kora-hlsjs-btn-fullscreen {
    width: 22px;
    min-width: 22px;
    padding: 0;
  }

  .go4kora-hlsjs-quality-btn {
    min-width: 46px;
    max-width: 68px;
    font-size: 8.5px;
  }

  .go4kora-hlsjs-quality-menu {
    min-width: 122px;
    max-width: min(62vw, 156px);
    padding: 4px;
    border-radius: 11px;
  }

  .go4kora-hlsjs-quality-title {
    padding: 3px 6px 5px;
    font-size: 10px;
  }

  .go4kora-hlsjs-quality-item {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 11px;
  }
}