* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0a0e27;
    --bg-secondary: #1a1f3a;
    --bg-tertiary: #252b47;
    --accent-yellow: #ffd700;
    --accent-orange: #ff6600; /* Vibrant orange matching PowerTV logo */
    --accent-red: #ff1a1a; /* Bold red matching PowerTV logo */
    --accent-blue: #2196f3;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --glass-bg: rgba(26, 31, 58, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
    --focus-glow: rgba(255, 102, 0, 0.5); /* Orange glow for focus */
    --logo-orange: #ff6600;
    --logo-red: #ff1a1a;
}

body {
    width: 1920px;
    height: 1080px;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    position: fixed;
}

/* Glassmorphism effect utility */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Top Navigation */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(10, 14, 39, 0.95), rgba(10, 14, 39, 0.8));
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    padding: 0 40px;
    z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.nav-item {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 18px;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s;
    outline: none;
}

.nav-item.focused,
.nav-item.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px var(--focus-glow);
}

.nav-item.active::after {
    content: '';
    display: block;
    height: 3px;
    background: var(--accent-blue);
    margin-top: 4px;
}

.nav-separator {
    color: var(--text-secondary);
    font-size: 18px;
}

/* Action items (Reload, Playlist) – same look as section links, no active underline */
.nav-item-action.active::after {
    display: none;
}

.nav-item-action.nav-reload-loading {
    opacity: 0.8;
    cursor: wait;
}

/* Catch Up (Archive) section */
.catchup-hint {
    padding: 12px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}
.catchup-channel-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.catchup-channel-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-secondary);
    border-radius: 6px;
}
.catchup-channel-item:hover,
.catchup-channel-item.focused {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-orange);
}
.catchup-program-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 8px 0;
}
.catchup-program-item {
    display: flex;
    flex-direction: column;
    padding: 14px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.catchup-program-item:hover,
.catchup-program-item.focused {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-orange);
}
.catchup-program-item .catchup-program-time {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.catchup-program-item .catchup-program-title {
    font-weight: 600;
    color: var(--text-primary);
}

.search-container {
    display: flex;
    align-items: center;
    margin: 0 40px;
    gap: 10px;
}

.search-icon {
    font-size: 24px;
    color: var(--text-secondary);
}

.search-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 8px 20px;
    color: var(--text-primary);
    font-size: 16px;
    width: 300px;
    outline: none;
}

.search-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: bold;
    position: relative;
    background: transparent;
    overflow: visible;
}

.logo-icon::before {
    content: 'P';
    position: absolute;
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    font-size: 42px;
    line-height: 1;
    z-index: 1;
    background: linear-gradient(90deg, var(--logo-orange) 0%, var(--logo-orange) 35%, var(--logo-red) 35%, var(--logo-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 3px transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.logo-icon::after {
    content: '⚡';
    position: absolute;
    color: white;
    font-size: 24px;
    z-index: 2;
    transform: rotate(-15deg) translate(-2px, -3px);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.logo-text {
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(90deg, var(--logo-orange) 0%, var(--logo-orange) 71%, var(--logo-red) 71%, var(--logo-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 1px;
}

/* Dashboard Home */
.dashboard-section {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

.dashboard-section.active {
    display: block;
}

.dashboard-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1f3a 0%, #0a0e27 100%);
    opacity: 0.8;
}

.dashboard-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 100px;
}

.dashboard-buttons {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}

.dashboard-button {
    width: 180px;
    height: 200px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 2px solid transparent;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
}

.dashboard-button .button-icon {
    font-size: 64px;
    color: var(--text-primary);
}

.dashboard-button .button-label {
    font-size: 20px;
    color: var(--text-primary);
}

.dashboard-button.focused {
    border-color: var(--accent-orange);
    box-shadow: 0 0 30px var(--focus-glow);
    transform: scale(1.05);
}

.dashboard-button.focused .button-icon,
.dashboard-button.focused .button-label {
    color: var(--accent-orange);
}

.dashboard-utils {
    position: absolute;
    right: 80px;
    bottom: 200px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.util-button {
    width: 80px;
    height: 80px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 2px solid transparent;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
}

.util-button .button-icon {
    font-size: 32px;
    color: var(--text-primary);
}

.util-button.focused {
    border-color: var(--accent-orange);
    box-shadow: 0 0 20px var(--focus-glow);
}

.version-text {
    position: absolute;
    bottom: 20px;
    right: 40px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Content Sections */
.content-section {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    background: var(--bg-primary);
}

.content-section.active {
    display: flex;
    min-height: 0;
    gap: 0;
}
/* Movies & Series: right edge aligns with header right padding so scrollbar sits beneath the 'E' of POWERTV */
#section-movies,
#section-series {
    right: 40px;
}

/* Sidebar */
.sidebar {
    width: 320px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.sidebar-header {
    padding: 30px 20px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.sidebar-icon {
    font-size: 80px;
    text-align: center;
    margin-bottom: 20px;
}

.sidebar-actions {
    display: flex;
    gap: 10px;
}

.action-btn {
    flex: 1;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
}

.action-btn.focused {
    background: var(--accent-blue);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

.category-list {
    padding: 20px 0;
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Scrollbar on the right edge of group content (category) panel */
.category-list::-webkit-scrollbar {
    width: 10px;
}
.category-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0;
}
.category-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}
.category-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange);
}

.category-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
    color: var(--text-secondary);
}

.category-item:hover,
.category-item.focused {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-orange);
}

.item-count {
    color: var(--text-secondary);
    font-size: 14px;
}

.category-item.focused .item-count {
    color: var(--accent-orange);
}

/* Main Content Area */
.content-area {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* Live TV: channel list narrow so video area (arrow target) is wide, visible and more to the left */
#section-live .content-area {
    min-width: 0;
    flex: 0 0 auto;
    margin-right: 16px;
    width: 380px;
    max-width: 32%;
}
#section-live .epg-panel {
    flex: 1 1 auto;
    min-width: 420px;
    width: auto;
}
/* Video plays inside this black area (epg-preview); small screen with EPG below */
#epg-preview {
    position: relative;
    width: 100%;
    height: 200px;
    max-height: 200px;
    flex-shrink: 0;
}
#epg-preview #player-surface,
#epg-preview .epg-video-surface {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
#epg-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.sort-dropdown {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px 20px;
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    outline: none;
}

.item-count-display {
    font-size: 18px;
    color: var(--text-secondary);
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}

/* Movies & Series: content-area flush with sidebar (no gap); section right: 40px */
#section-movies .content-area,
#section-series .content-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    max-height: 100%;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}
/* Scrollable container: 5 columns; starts immediately after sidebar (margin-left: 0); scrollbar right of 5th column */
#section-movies .content-main-container,
#section-series .content-main-container {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 544px;
    max-width: 100%;
    margin-left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
/* 5-column grid: repeat(5, 1fr); icon size kept; gap auto-adjusted (8px) to fit 5 columns */
.content-grid-compact {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
#section-movies .content-grid-compact .grid-item,
#section-series .content-grid-compact .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
#section-movies .content-grid-compact .grid-item .poster,
#section-series .content-grid-compact .grid-item .poster {
    aspect-ratio: 2/3;
    width: 100%;
    max-width: 100px;
    max-height: 150px;
}
#section-movies .content-grid-compact .grid-item .poster img,
#section-series .content-grid-compact .grid-item .poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#section-movies .content-grid-compact .grid-item .title,
#section-series .content-grid-compact .grid-item .title {
    font-size: 10px;
    margin-top: 3px;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    max-width: 100px;
}
/* Scrollbar: always visible, immediately to the right of 5th column */
#section-movies .content-main-container::-webkit-scrollbar,
#section-series .content-main-container::-webkit-scrollbar {
    width: 12px;
}
#section-movies .content-main-container::-webkit-scrollbar-track,
#section-series .content-main-container::-webkit-scrollbar-track {
    background: #252525;
}
#section-movies .content-main-container::-webkit-scrollbar-thumb,
#section-series .content-main-container::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 6px;
}
#section-movies .content-main-container::-webkit-scrollbar-thumb:hover,
#section-series .content-main-container::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange);
}
#section-movies .content-main-container,
#section-series .content-main-container {
    scrollbar-width: thin;
    scrollbar-color: #666 #252525;
}

/* Single column list: channels and content by group */
#live-channels.content-list,
.content-list#live-channels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-template-columns: unset;
}

#movie-grid.content-list,
#series-grid.content-list,
.content-list#movie-grid,
.content-list#series-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: unset;
}

#movie-grid.content-list .grid-item,
#series-grid.content-list .grid-item {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: row;
    text-align: left;
}

#movie-grid.content-list .grid-item .poster,
#series-grid.content-list .grid-item .poster {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 2/3;
}

#movie-grid.content-list .grid-item .title,
#series-grid.content-list .grid-item .title {
    margin-top: 0;
    text-align: left;
}

.grid-item {
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
}

.grid-item .poster {
    width: 100%;
    aspect-ratio: 2/3;
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: all 0.3s;
}

.grid-item .poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-item .title {
    margin-top: 10px;
    font-size: 14px;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-item.focused .poster {
    border-color: var(--accent-orange);
    box-shadow: 0 0 20px var(--focus-glow);
    transform: scale(1.05);
}

.grid-item.focused .title {
    color: var(--accent-orange);
}

/* Channel List (for Live TV) */
.channel-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.channel-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
}

.channel-item .channel-number {
    font-size: 18px;
    color: var(--text-secondary);
    min-width: 40px;
}

.channel-item .channel-logo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.channel-item .channel-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-item .channel-name {
    flex: 1;
    font-size: 18px;
    color: var(--text-primary);
}

.channel-item .catchup-icon {
    font-size: 20px;
    color: var(--accent-blue);
}

.channel-item.focused {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-red);
    box-shadow: 0 0 15px rgba(255, 23, 68, 0.3);
}

/* EPG Panel */
.epg-panel {
    width: 600px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    padding: 30px;
}

.epg-header {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.epg-preview {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
#section-live .epg-preview {
    height: 200px;
    min-height: 160px;
    max-height: 200px;
}

.epg-player-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.epg-player-controls.hidden {
    display: none;
}
.epg-ctrl-btn {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    outline: none;
}
.epg-ctrl-btn:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
}

/* EPG Schedule panel: fixed-height box directly under the video player */
.epg-schedule-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin-bottom: 16px;
}

.epg-list-label {
    font-size: 15px;
    font-weight: 700;
    color: #e0e0e0;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.epg-list {
    height: 300px;
    min-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    background: #0d1222;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-orange) #1a1f3a;
}

.epg-list::-webkit-scrollbar {
    width: 8px;
}
.epg-list::-webkit-scrollbar-track {
    background: #1a1f3a;
    border-radius: 4px;
}
.epg-list::-webkit-scrollbar-thumb {
    background: var(--accent-orange);
    border-radius: 4px;
}
.epg-list::-webkit-scrollbar-thumb:hover {
    background: #ff8533;
}

.epg-item {
    padding: 10px 14px;
    border-left: 4px solid transparent;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.epg-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.epg-item.focused {
    background: rgba(255, 102, 0, 0.2);
    border-left-color: var(--accent-orange);
}

/* Live indicator: current program */
.epg-item-now {
    border-left-color: var(--accent-red);
    background: rgba(255, 26, 26, 0.15);
}
.epg-item-now .epg-row-time {
    color: #fff;
    font-weight: 600;
}
.epg-item-now.focused {
    background: rgba(255, 102, 0, 0.25);
    border-left-color: var(--accent-orange);
}

.epg-item-empty {
    cursor: default;
    background: rgba(255, 255, 255, 0.06);
    color: #a0a0a0;
    font-style: italic;
}

/* Row: Start Time – End Time and Program Title */
.epg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.epg-row-time {
    font-size: 13px;
    font-weight: 500;
    color: #b8b8b8;
}

.epg-now-playing {
    font-size: 12px;
    color: var(--accent-red);
    line-height: 1;
    flex-shrink: 0;
}

.epg-row-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}

.epg-actions {
    display: flex;
    gap: 10px;
}

.epg-btn {
    flex: 1;
    padding: 15px;
    background: var(--accent-red);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
}

.epg-btn.focused {
    background: var(--accent-orange);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.5);
}

/* Account Section */
.account-container {
    width: 100%;
    max-width: 800px;
    margin: 50px auto;
    padding: 40px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
}

.account-container h2 {
    margin-bottom: 30px;
    font-size: 32px;
}

.account-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.account-item {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.account-item .label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.account-item .value {
    font-size: 18px;
    color: var(--text-primary);
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.modal.active {
    display: flex;
}

.modal-content {
    width: 500px;
    padding: 40px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
}

.logo-container-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.modal-content h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
}

.form-group input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.form-group-checkbox {
    margin-bottom: 16px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-orange);
}

.checkbox-label:focus-within,
.checkbox-label input[type="checkbox"]:focus {
    outline: none;
}

.checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

.btn-primary {
    width: 100%;
    padding: 15px;
    background: var(--accent-red);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
}

.btn-primary:hover,
.btn-primary.focused {
    background: var(--accent-orange);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.login-keyboard-hint {
    margin-top: 16px;
    margin-bottom: 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.9;
}

/* Util button labels (Refresh, Logout, Settings) */
.util-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Player: video-preview-container manages state via .small-screen-mode / .full-screen-mode */
.player-overlay.video-preview-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s, right 0.3s, bottom 0.3s;
}

/* Default: small screen on the right (aligned with content, like EPG panel) */
.video-preview-container.small-screen-mode {
    position: fixed;
    top: 80px;
    left: auto;
    right: 0;
    bottom: auto;
    width: 480px;
    height: 270px;
    z-index: 2000;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    border-left: 1px solid var(--glass-border);
    background: #000;
}

.video-preview-container.small-screen-mode .player-back-btn {
    display: none;
}

.video-preview-container.small-screen-mode .player-controls {
    padding: 8px 12px;
    height: 48px;
    gap: 8px;
}

.video-preview-container.small-screen-mode .player-btn {
    padding: 6px 12px;
    font-size: 12px;
}
.video-preview-container.small-screen-mode .player-btn.player-btn-seek {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 11px;
}

.video-preview-container.small-screen-mode .player-time {
    font-size: 12px;
}

.video-preview-container.small-screen-mode .player-icon-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
}
.video-preview-container.small-screen-mode .player-dropdown {
    min-width: 140px;
    max-height: 180px;
}
.video-preview-container.small-screen-mode .player-dropdown .player-dropdown-item {
    padding: 8px 12px;
    font-size: 12px;
}

.player-channel-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    pointer-events: none;
}
.player-channel-badge.hidden {
    display: none;
}

/* Full screen mode */
.video-preview-container.full-screen-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    border-radius: 0;
    border: none;
}

/* Full-screen OSD: control bar above video, always visible and clickable */
.player-overlay.full-screen-mode .player-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.player-overlay.full-screen-mode #player-surface-container {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
}
.player-overlay.full-screen-mode .player-controls {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-height: 80px;
    pointer-events: auto;
}

.player-overlay.hidden {
    display: none !important;
}

/* Exit playback confirmation modal (inside player-overlay) */
.exit-playback-confirm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    backdrop-filter: blur(6px);
}
.exit-playback-confirm.hidden {
    display: none !important;
}
.exit-playback-confirm-content {
    padding: 32px 40px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    min-width: 320px;
    max-width: 90%;
}
.exit-playback-confirm-message {
    margin: 0 0 24px 0;
    font-size: 18px;
    color: var(--text-primary);
    text-align: center;
}
.exit-playback-confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.exit-playback-confirm-buttons .player-btn {
    min-width: 100px;
}

.player-back-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.player-back-btn:hover,
.player-back-btn.focused {
    background: var(--accent-red);
    border-color: var(--accent-orange);
}

.player-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#player-surface {
    flex: 1;
    width: 100%;
    background: #000;
    min-height: 0;
}

.player-controls {
    height: 80px;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 24px;
    flex-shrink: 0;
}

.player-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 15px;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
}

/* Primary bar buttons: red (Close, << 10, Pause, 10 >>, Full Screen) – Movies & Series */
.player-btn.player-btn-primary {
    background: var(--accent-red);
}
.player-btn.player-btn-primary:hover,
.player-btn.player-btn-primary:focus {
    background: #e60000;
    box-shadow: 0 0 12px rgba(255, 26, 26, 0.4);
}

/* Change Audio: gray – matches screenshot */
.player-btn.player-btn-audio {
    background: #555;
    color: #fff;
}
.player-btn.player-btn-audio:hover,
.player-btn.player-btn-audio:focus {
    background: #666;
}

/* CC (Subtitles): blue */
.player-btn.player-btn-cc {
    background: var(--accent-blue);
    color: #fff;
}
.player-btn.player-btn-cc:hover,
.player-btn.player-btn-cc:focus {
    background: #1976d2;
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.4);
}

.player-btn.player-btn-nav {
    background: rgba(255, 255, 255, 0.2);
}

/* Seek buttons: rectangular red in main bar (VOD/Series); circular optional for Live */
.player-btn.player-btn-seek {
    min-width: 70px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--accent-red);
    color: white;
    font-size: 14px;
    font-weight: 600;
}
.player-btn.player-btn-seek:hover,
.player-btn.player-btn-seek:focus {
    background: #e60000;
}

.player-btn.focused {
    box-shadow: 0 0 0 3px #ffd700;
}
.player-btn.player-btn-primary.focused,
.player-btn.player-btn-seek.focused {
    background: var(--accent-orange);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.5);
}

/* Audio / Subtitle selector buttons and dropdowns */
.player-menu-wrap {
    position: relative;
}
.player-icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.player-icon-btn:hover,
.player-icon-btn:focus {
    background: rgba(255, 255, 255, 0.25);
}
.player-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    min-width: 160px;
    max-height: 240px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 50;
}
.player-dropdown.hidden {
    display: none !important;
}
.player-dropdown .player-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    outline: none;
}
.player-dropdown .player-dropdown-item:hover,
.player-dropdown .player-dropdown-item:focus {
    background: rgba(255, 255, 255, 0.15);
}
.player-dropdown .player-dropdown-item.active {
    background: rgba(255, 107, 53, 0.3);
    color: var(--accent-orange);
}

.player-time {
    color: var(--text-primary);
    font-size: 18px;
    margin-left: auto;
}

/* VOD/Series: subtitle & audio options */
.player-vod-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid var(--glass-border);
}

.player-vod-options.hidden {
    display: none;
}

.player-option-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-option-group label {
    color: var(--text-secondary);
    font-size: 14px;
}

.player-opt-btn,
.player-option-group select {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Series Episodes Modal */
.episodes-modal-content {
    position: relative;
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.episodes-modal-title {
    margin-bottom: 16px;
    padding-right: 80px;
}
.episodes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding: 8px 0;
    max-height: 60vh;
}
.episode-item {
    padding: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.episode-item:hover,
.episode-item.focused {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent);
}
.episode-item .episode-title {
    font-weight: 600;
    margin-bottom: 4px;
}
.episode-item .episode-meta {
    font-size: 0.85em;
    color: var(--text-secondary);
}

/* Remote control (D-Pad) focus – clear visible ring so only one item is clearly selected */
.focused {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
/* Keep outline visible when element has its own focus styles */
.nav-item.focused,
.dashboard-button.focused,
.util-button.focused,
.category-item.focused,
.channel-item.focused,
.grid-item.focused,
.episode-item.focused,
.action-btn.focused,
.player-btn.focused,
.epg-item.focused,
.epg-btn.focused {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
}

/* Utility Classes */
.hidden {
    display: none !important;
}