:root {
    --bg-dark: #1c1621;
    --bg-secondary: #242327;
    --bg-element: #2d323c;
    --bg-hover: #3f3f3f;
    --text-main: #ffffff;
    --text-main2: #6c6c6c;
    --chip-main: #000000;
    --chip-text: #ffffff;
    --text-secondary: #aaaaaa;
    --accent: #ff9800;
    --border: #000000;
    --border-color: var(--accent);
    --header-h: 56px;
    --sidebar-w: 240px;
    --sidebar-w-collapsed: 69px;
    --tags-h: 48px;
    --card-min-width: 110px; 
    --icon-main: #ffffff;
    --thumb-bg: #49494917;
}

body.light-theme {
    --bg-dark: #ffffff;
    --bg-secondary: #f1f1f1;
    --bg-element: #ffffff;
    --bg-hover: #e5e5e5;
    --text-main: #0f0f0f;
    --text-main2: #7f7f7f;
    --chip-main: #a8a8a8;
    --chip-text: #000000;
    --text-secondary: #606060;
    --border: #e5e5e5;
    --icon-main: #0f0f0f;
    --thumb-bg: #797979ad;
}
[style*="z-index: 2147483647;"] {z-index: 2000 !important; transform: scale(0.8);}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', Arial, sans-serif; }
body { background-color: var(--bg-dark); color: var(--text-main); overflow-x: hidden; font-size: 14px; transition: background-color 0.3s, color 0.3s; }
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background-color: var(--bg-dark); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 2000; border-bottom: 1px solid var(--border); }
.start-section { display: flex; align-items: center; gap: 0; }
.menu-btn { background: #fff0; border: none; color: var(--icon-main); cursor: pointer; padding: 8px; border-radius: 50%; display: flex; margin-right: 12px; }
.menu-btn:hover { background: var(--bg-hover); }
.menu-icon { width: 24px; height: 24px; fill: var(--icon-main); }
.logo { font-size: 1.3rem; font-weight: 700; letter-spacing: -1px; display: flex; align-items: center; cursor: pointer; user-select: none; }
.logo span { color: var(--text-main); padding-top: .4em; }
.logo-icon { margin-right: 4px; display: flex; align-items: center; }

.center-section { flex: 1; max-width: 600px; display: flex; justify-content: center; position: relative; }
.search-wrapper { display: flex; width: 100%; position: relative; }
.search-box-container { display: flex; flex: 1; align-items: center; background: #121212; border: 1px solid var(--border); border-radius: 40px 0 0 40px; padding: 0 4px 0 16px; margin-left: 32px; }
body.light-theme .search-box-container { background: #f1f1f1; border-color: #ccc; }
.search-box-container:focus-within { border-color: var(--accent); }
.search-box { width: 100%; background: #fff0; border: none; color: var(--text-main); padding: 8px 0; outline: none; font-size: 1rem; }
.clear-btn { background: #fff0; border: none; color: #888; cursor: pointer; padding: 8px; display: none; border-radius: 50%; }
.clear-btn:hover { color: var(--text-main); }
.search-btn { background: var(--bg-secondary); border: 1px solid var(--border); border-left: none; border-radius: 0 40px 40px 0; padding: 0 20px; cursor: pointer; display: flex; align-items: center; }
.search-dropdown { position: absolute; top: 100%; left: 32px; right: 0; background: #212121; border-radius: 12px; margin-top: 4px; box-shadow: 0 4px 10px rgb(0 0 0 / .5); display: none; flex-direction: column; padding: 8px 0; z-index: 2000; }
body.light-theme .search-dropdown { background: #fff; border: 1px solid var(--border); }
.search-item.selected { background-color: var(--accent); color: #000; }
.search-item { padding: 8px 16px; cursor: pointer; color: var(--text-main); font-weight: 500; }
.search-item:hover { background: var(--bg-hover); }

.end-section { min-width: 80px; position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.theme-btn { background: #fff0; border: none; cursor: pointer; color: var(--icon-main); padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: color 0.2s; }
.theme-btn:hover { background: var(--bg-hover); max-width: 35px; width: 100%; }
.settings-menu { position: absolute; top: 45px; right: 0; width: 250px; background: var(--bg-secondary); border-radius: 12px; padding: 12px 0; box-shadow: 0 4px 12px rgb(0 0 0 / .5); display: none; flex-direction: column; z-index: 2001; border: 1px solid var(--border); }
.settings-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 16px; font-size: .95rem; color: var(--text-main); text-decoration: none; }
.settings-item:hover { background: var(--bg-hover); }
.settings-item i { width: 24px; text-align: center; color: #aaa; }
.settings-control { padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #3d3d3d; margin-top: 8px; }
.slider-row { display: flex; align-items: center; justify-content: space-between; color: #aaa; font-size: .9rem; }
.settings-control input[type=range] { width: 100%; margin-top: 5px; accent-color: var(--accent); }

.category-wrapper { position: fixed; top: var(--header-h); left: 0; right: 0; height: var(--tags-h); background: var(--bg-dark); z-index: 90; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.category-bar { display: flex; align-items: center; padding: 0 24px; gap: 12px; overflow-x: auto; width: 100%; height: 100%; cursor: grab; user-select: none; }
.category-bar:active { cursor: grabbing; }
.chip { background: var(--bg-secondary); color: var(--text-main2); padding: 6px 12px; border-radius: 8px; font-size: .9rem; white-space: nowrap; cursor: pointer; border: none; font-weight: 500; transition: 0.2s; pointer-events: auto; }
.chip:hover { background: var(--bg-hover); }
.chip.active { background: var(--chip-main); color: var(--chip-text); }

aside { position: fixed; top: var(--header-h); bottom: 0; left: 0; width: var(--sidebar-w); background: var(--bg-dark); overflow-y: auto; overflow-x: hidden; padding: 12px 0; transition: transform 0.2s ease, width 0.2s ease; z-index: 1500; display: none; }
#sidebar-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / .5); z-index: 1400; display: none; }
.sidebar-header, .sidebar-item { display: flex; align-items: center; padding: 8px 24px; cursor: pointer; overflow: hidden; }
.sidebar-header { margin-top: 12px; margin-bottom: 4px; cursor: default; }
.sidebar-header-text { font-weight: 700; font-size: 1rem; color: var(--text-main); }
.sidebar-header-icon, .sidebar-icon { width: 24px; height: 24px; margin-right: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sidebar-header-icon i { color: var(--text-main); }
.sidebar-item:hover { background: var(--bg-secondary); }
.sidebar-icon { background: #333; border-radius: 50%; overflow: hidden; }
.sidebar-icon img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; color: var(--text-secondary); }
aside.collapsed { width: var(--sidebar-w-collapsed); }
aside.collapsed .sidebar-header, aside.collapsed .sidebar-item { flex-direction: column; padding: 14px 0; gap: 4px; justify-content: center; }
aside.collapsed .sidebar-header-icon, aside.collapsed .sidebar-icon { margin-right: 0; }
aside.collapsed .sidebar-header-text, aside.collapsed .sidebar-text { display: none; }
aside.overlay { display: block !important; width: var(--sidebar-w); transform: translateX(0); box-shadow: 4px 0 10px rgb(0 0 0 / .5); border-right: 2px solid var(--accent);}

.main-container { margin-top: calc(var(--header-h) + var(--tags-h)); margin-left: 0; padding: 15px; min-height: 100vh; }

#video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr)); gap: 10px; row-gap: 5px; }

.video-card { cursor: pointer; display: flex; flex-direction: column; align-items: center; position: relative; transition: transform 0.1s ease; -webkit-touch-callout: none; }
.video-card:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(255, 152, 0, 0.6); border: 3px solid var(--accent, #ff9800); border-radius: 8px; }

.thumb { width: 100%; aspect-ratio: 1 / 1; background: var(--thumb-bg); border-radius: 10px; overflow: hidden; margin-bottom: 8px; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 1px solid var(--border); }
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

.details { display: flex; justify-content: center; width: 100%; text-align: center; }

/* Dynamic Font Math to allow 60px downsize gracefully */
.title, #container-29e9d5d359e4f35b0f53ad00349be727 .container-29e9d5d359e4f35b0f53ad00349be727__title { 
    font-weight: 500; font-size: clamp(6px, calc(var(--card-min-width) * 0.08), 18px) !important; line-height: 1.3 !important; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 5px; color: #ccc;
}
#container-29e9d5d359e4f35b0f53ad00349be727 .container-29e9d5d359e4f35b0f53ad00349be727__bn-container {
    padding: 5px !important; position: relative; top: 5px;
}

.card-menu-btn { background: rgba(0, 0, 0, 0.6); border: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; right: 4px; top: 4px; opacity: 0; transition: opacity 0.2s; }
.video-card:hover .card-menu-btn { opacity: 1; }
.card-menu-btn svg { fill: #ffffff; width: 16px; height: 16px; }

.context-menu { position: fixed; background: var(--bg-secondary); border-radius: 13px; padding: 8px 0; width: 200px; box-shadow: 0 4px 12px rgb(0 0 0 / .8); display: none; z-index: 9999; border: 1px solid var(--border); }
.context-item { padding: 8px 16px; cursor: pointer; font-size: .9rem; display: flex; align-items: center; gap: 12px; color: var(--text-main); }
.context-item:hover { background: var(--bg-hover); }

/* --- NEW STREAM MODAL STYLES --- */
.stream-btn { background: var(--bg-element); color: var(--text-main); border: 1px solid var(--border); padding: 15px; width: 100%; text-align: left; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; gap: 12px; font-weight: bold; border-radius: 7px;}
.stream-btn i { color: var(--accent); font-size: 1.3rem; }
.stream-btn:hover, .stream-btn:focus { background: var(--accent); color: #000; border-color: var(--accent); transform: none !important; outline: none !important; }
.stream-btn:hover i, .stream-btn:focus i { color: #000; }

/* --- FULLSCREEN WRAPPER BUTTON --- */
.close-fs-btn {display: none !important; position: absolute; top: 20px; left: 20px; z-index: 10001; background: rgba(0,0,0,0.6); color: white; border: 1px solid #444; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
.close-fs-btn:hover, .close-fs-btn:focus { background: var(--accent); color: black; outline: none; }

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / .8); z-index: 3001; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-box { background: var(--bg-secondary); width: 350px; padding: 20px; border-radius: 12px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; position: relative; }
.modal-close { position: absolute; top: 15px; right: 15px; cursor: pointer; color: var(--text-secondary); }
.modal-title { font-size: 1.5rem; font-weight: 700; text-align: center; }

#toast { visibility: hidden; min-width: 250px; background-color: var(--accent); color: #fff; text-align: center; border-radius: 4px; padding: 16px; position: fixed; z-index: 3001; left: 50%; bottom: 10%; transform: translateX(-50%); font-size: 17px; opacity: 0; transition: opacity 0.3s, bottom 0.3s; }
body.light-theme #toast { background-color: #323232; }
#toast.show { visibility: visible; opacity: 1; bottom: 50px; }

/* FIX: NEW AUTHENTIC LOADING PROGRESS BAR */
.loading-box { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.progress-container { width: 220px; height: 4px; background-color: #333; border-radius: 2px; overflow: hidden; position: relative; margin-top: 15px; }
.progress-bar { position: absolute; height: 100%; background-color: var(--accent); border-radius: 2px; animation: loadIndeterminate 1.5s infinite ease-in-out; }
.loading-text { color: var(--text-main); font-size: 0.95rem; margin-top: 12px; font-weight: 500; letter-spacing: 0.5px; }

@keyframes loadIndeterminate {
    0% { left: -40%; width: 30%; }
    50% { left: 20%; width: 80%; }
    100% { left: 100%; width: 30%; }
}

.see-more-item {
    justify-content: center;
    cursor: pointer;
    padding: 12px 24px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}
.see-more-item:hover {
    background: var(--bg-secondary);
}
.see-more-text {
    color: var(--accent) !important;
    font-weight: 600 !important;
    text-align: center;
    width: 100%;
}
.close-settings-btn {
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 4px;
}
.close-settings-btn i {
    color: var(--accent) !important;
}

@media(min-width: 1024px) {
    aside { display: block; }
    .main-container { margin-left: var(--sidebar-w); }
    .category-wrapper { left: var(--sidebar-w); }
    body.s-collapsed aside { width: var(--sidebar-w-collapsed); }
    body.s-collapsed .main-container { margin-left: var(--sidebar-w-collapsed); }
    body.s-collapsed .category-wrapper { left: var(--sidebar-w-collapsed); }
}

@media(max-width: 720px) {
    aside { display: block; z-index: 3001; }
    .main-container { margin-left: 0; }
    .category-wrapper { left: 0; }
    body.s-collapsed aside { display: none; }
    body.s-collapsed .main-container { margin-left: 0; }
    body.s-collapsed .category-wrapper { left: 0; }
    .settings-menu { width: 250px; }
    .menu-btn { margin-right: 2px; }
    .search-btn { padding: 0 10px; }
    .logo span { display: none; }
    .logo { margin-top: -6px; }
    .card-menu-btn { display: none !important; }
    #video-grid { gap: 3px; row-gap: 3px; }
}

.video-card.ad-native-card { background: #0f0f0f; border: 1px solid #3333331f; border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; }
.video-card.ad-native-card > div { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }

/* SHAKA UI */
.shaka-overflow-menu, .shaka-settings-menu, .shaka-overflow-menu button, .shaka-settings-menu button, .shaka-overflow-menu button:hover, .shaka-settings-menu button:hover { background: #1f1f1f; padding: 3px; border-radius: 10px; }
.shaka-current-selection-span, .shaka-overflow-menu button, .shaka-settings-menu button { color: aliceblue; }
.shaka-video-container .shaka-controls-container { background: linear-gradient(to top, rgba(15, 15, 15, 0) 0, #fff0 100%) !important; }
.shaka-video-container .shaka-overflow-menu, .shaka-video-container .shaka-settings-menu { background-color: #272727f2 !important; color: var(--text-main) !important; border: 1px solid var(--border) !important; border-radius: 8px; box-shadow: 0 0 0 .4px #FF9800; }
.shaka-video-container .shaka-range-element { accent-color: var(--accent) !important; }
.shaka-video-container .shaka-bottom-controls button { color: var(--text-main) !important; }
.shaka-overflow-menu button:hover, .shaka-settings-menu button:hover { background-color: #5e636d40 !important; padding: 3.5px 6px !important; border-radius: 5px; }
.shaka-overflow-menu button, .shaka-settings-menu button { color: var(--text-main) !important; }
.shaka-current-selection-span { color: #fefefe8a !important; }
.shaka-spinner-path { stroke: #FF9800 !important; }
.shaka-spinner { filter: none !important; }
video#player { cursor: auto; }
.shaka-video-container { border-radius: 0px; }

#sticky-ad-banner-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(360deg, #ff5c002e -130%, transparent 100%);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 60px;
    overflow: hidden;
}
#adsterra-banner-container-wrapper {
    max-width: 468px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/*JW Skin*/
.jw-flag-small-player .jw-settings-menu {
    max-width: 225px !important;
    max-height: 400px !important;
}

.jw-settings-topbar {
    background-color: transparent !important;
    border-radius: 10px 10px 0 0 !important;
}

.jw-settings-menu {
    background-color: #000000c2 !important;
    box-shadow:  0 0 0 1px var(--border-color) !important;
}

.jw-controls,
.jw-flag-small-player .jw-settings-menu {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    border-radius: 10px;
}

.jw-settings-item-active {
    font-weight: 900 !important;
    position: relative !important;
    color: #FF9800 !important;
}

.jw-settings-menu .jw-icon.jw-button-color::after {
    box-shadow: inset 0 -3px 0 -1px #FF9800 !important;
}

.jw-settings-item-active::before {
    content: "\25B8" !important;
}
.jw-button-color {
    color: var(--primary-color);
}
.jw-breakpoint-3 .jw-settings-menu, .jw-breakpoint-4 .jw-settings-menu,
.jw-breakpoint-5 .jw-settings-menu, .jw-breakpoint-6 .jw-settings-menu {
    height: 232px;
    width: 230px;
    max-height: 232px;
    border-radius: 10px;
}
.jw-reset, .jw-reset-text {
    font-family: system-ui;
}
.jw-breakpoint-7 .jw-settings-menu {
    bottom: 130px !important;
    right: 60px !important;
    max-height: 250px !important;
    max-width: 300px !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 200px !important;
    border-radius: 10px !important;
}
.jw-timesegment-bar.jw-progress.jw-timesegment-progress.jw-reset,
.jw-slider-horizontal.jw-chapter-slider-time .jw-slider-container .jw-timesegment-bar {
    height: 35% !important;
    position: absolute;
}