/* OSTAP TV: flat UI. Base layout/navigation lives in app.css.
   No webfonts, decorative textures, gradients or permanent GPU layers. */
:root {
    --ostap-bg: #181818;
    --ostap-bg-sec: #1c1c1c;
    --ostap-text: #f2f2f2;
    --ostap-text-sec: #b4b4b4;
    /* Compatibility tokens for built-in plugins. */
    --ostap-gold: #dedede;
    --ostap-gold-light: #ffffff;
    --ostap-gold-dark: #b4b4b4;
    --ostap-gold-gradient: #dedede;
    --ostap-gold-gradient-soft: #292929;
    --ostap-gold-glow: transparent;
    --ostap-radius-card: 0.3em;
    --ostap-radius-btn: 0.3em;
}

html, body, #app {
    background: #181818 !important;
    background: var(--ostap-bg, #181818) !important;
    color: #f2f2f2 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* The root ID outranks late plugin styles without duplicating their rules.
   Keep transforms: scrolling, drawers and TV navigation depend on them. */
#ostap *, #ostap *::before, #ostap *::after {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    will-change: auto !important;
}

#ostap .head, #ostap .wrap__left, #ostap .menu {
    background: #181818 !important;
    background: var(--ostap-bg, #181818) !important;
}
#ostap .head__title {
    font-size: 1.35em;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}
#ostap .head__logo-icon {
    display: flex;
    align-items: center;
    width: 2em;
}
#ostap .head__logo-icon img {
    width: 100%;
    height: auto;
    filter: none;
}
#ostap .menu__item, #ostap .head__action {
    border-radius: 0.3em;
}

/* Poster rows keep the engine's sizing and offscreen loading. */
#ostap .card, #ostap .card .card__view, #ostap .card .card__img {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    animation: none !important;
}
#ostap .card .card__view {
    background: #1c1c1c;
    border: 0 !important;
    border-radius: 0.3em;
}
#ostap .card__title, #ostap .card__age {
    text-shadow: none;
}
#ostap .card__age { color: #b4b4b4; }
#ostap .card__vote {
    background: #dedede;
    color: #101010;
    border-radius: 0.2em;
    font-weight: 600;
}
#ostap .card.selector.focus { outline: none !important; background: transparent !important; }
#ostap .card.focus .card__view { outline: 3px solid #f2f2f2; outline-offset: 2px; }
#ostap .card.focus .card__title { color: #fff; }

/* A visible, immediate focus with no scale or reflow. */
#ostap .selector.focus {
    outline: 2px solid #f2f2f2 !important;
    outline-offset: -2px;
}
/* Separate rule: old TV engines reject an entire list containing :focus-visible. */
#ostap .selector:focus-visible {
    outline: 2px solid #f2f2f2 !important;
    outline-offset: -2px;
}
#ostap .menu__item.focus, #ostap .head__action.focus,
#ostap .button.focus, #ostap .full-start__button.focus,
#ostap .selectbox-item.focus, #ostap .settings-param.focus,
#ostap .settings-folder.focus, #ostap .simple-button.focus {
    background: #dedede !important;
    color: #101010 !important;
    border-color: transparent !important;
}
#ostap .menu__item.focus .menu__text,
#ostap .selectbox-item.focus .selectbox-item__title,
#ostap .selectbox-item.focus .selectbox-item__subtitle,
#ostap .settings-param.focus .settings-param__name,
#ostap .settings-param.focus .settings-param__value {
    color: #101010 !important;
}
#ostap .button, #ostap .full-start__button, #ostap .simple-button {
    background: #292929;
    color: #f2f2f2;
    border-radius: 0.3em;
}
#ostap .button:active, #ostap .full-start__button:active { background: #3b3b3b; }
#ostap .selector[aria-disabled="true"], #ostap button:disabled { opacity: 0.5; }

/* Opaque drawers: no blur of a whole video frame behind them. */
#ostap .selectbox { z-index: 10005; }
#ostap .selectbox__layer, #ostap .settings__layer { background: rgba(0, 0, 0, 0.65); }
#ostap .selectbox__content, #ostap .settings__content,
#ostap .modal__content, #ostap .search {
    background: #1c1c1c !important;
    background: var(--ostap-bg-sec, #1c1c1c) !important;
    color: #f2f2f2;
}
#ostap .selectbox__content { z-index: 10006; }
#ostap .selectbox__title { color: #f2f2f2; }
#ostap .selectbox-item { border-radius: 0.3em; }
#ostap .selectbox-item.selected:not(.nomark)::after,
#ostap .selectbox-item.picked::after { border-color: #b4b4b4; }
#ostap .selectbox-item.focus::after { border-color: #101010; }
#ostap .modal.animate .modal__content,
#ostap .selectbox.animate .selectbox__content,
#ostap .settings.animate .settings__content,
#ostap .activity .activity__body { animation: none !important; }
@media (min-width: 481px) {
    #ostap body.selectbox--open .selectbox__content,
    #ostap body.settings--open .settings__content {
        transform: translate3d(-100%, 0, 0) !important;
        -webkit-transform: translate3d(-100%, 0, 0) !important;
        visibility: visible;
        opacity: 1;
    }
}
@media (max-width: 480px) {
    #ostap body.selectbox--open .selectbox__content,
    #ostap body.settings--open .settings__content {
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        visibility: visible;
        opacity: 1;
    }
}

/* Keep video controls legible and the audio selector reachable. */
#ostap .player-panel { background: #1c1c1c; }
#ostap .player-panel__center {
    display: flex;
    width: 35%;
    align-items: center;
    justify-content: center;
}
#ostap .player-panel__left, #ostap .player-panel__right { width: 32.5%; }
#ostap .player-panel__tracks {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#ostap .player-panel__tracks.focus { background: #dedede; color: #101010; }
#ostap .player-panel__tracks svg { width: 1.4em; height: 1.4em; fill: currentColor; }

/* Local plugin surfaces use the same flat palette. */
#ostap .iptv-btn-country, #ostap .iptv-channel-card,
#ostap .shikimori-local__action, #ostap .shikimori-local__tab,
#ostap .shikimori-local__dropdown, #ostap .shikimori-local__dropdown-item,
#ostap .shikimori-local.anime-detail {
    background: #1c1c1c !important;
    background: var(--ostap-bg-sec, #1c1c1c) !important;
    color: #f2f2f2 !important;
    border: 0 !important;
    border-radius: 0.3em !important;
    transform: none !important;
    animation: none !important;
}
#ostap .iptv-btn-country.focus, #ostap .iptv-channel-card.focus,
#ostap .shikimori-local__action.focus, #ostap .shikimori-local__tab.focus,
#ostap .shikimori-local__dropdown-item.focus {
    background: #dedede !important;
    color: #101010 !important;
}
#ostap .iptv-channel-card.focus .ch-title,
#ostap .iptv-channel-card.focus .ch-group,
#ostap .iptv-channel-card.focus .ch-icon { color: #101010 !important; }
#ostap .iptv-channel-card .ch-group { color: #b4b4b4 !important; }
#ostap .shikimori-local__poster { border: 0; border-radius: 0.3em; }

/* Existing intentionally hidden service/account controls. */
.feed-head, .open--broadcast, .notice--icon, .open--profile,
.search__sources, .search-source, [data-area="sources"],
[data-section="diagnostics"], .diagnostics-page,
.settings-folder[data-component="account"], .account-modal,
.account-modal-split, .ad-server, [class*="cub-premium"],
.full-start__button[data-action="cub"], .settings-param[data-name="account"],
.view--online_mod .full-start__button-subtitle { display: none !important; }
.full-start__button.view--torrent { display: inline-flex !important; visibility: visible; }

#ostap ::selection { background: #dedede; color: #101010; }
#ostap input, #ostap textarea { caret-color: #f2f2f2; }
#ostap ::-webkit-scrollbar { width: 6px; height: 6px; }
#ostap ::-webkit-scrollbar-thumb { background: #666; }
#ostap ::-webkit-scrollbar-track { background: #1c1c1c; }

#ostap .no-network { background: #181818; background: var(--ostap-bg, #181818); z-index: 200000; }
#ostap .no-network button { margin-top: 1.5em; padding: 0.8em 1.5em; background: #f2f2f2; color: #181818; font: inherit; border: 0; }
#ostap .no-network button:focus { outline: 3px solid #b4b4b4; outline-offset: 4px; }