:root {
    --accent: #e63946;
    --accent-dark: #b71c1c;
    --ticker-duration: 20s;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #000; font-family: 'Segoe UI', Arial, sans-serif; }

/* ===== MAIN LAYOUT ===== */
#app { display: flex; flex-direction: column; width: 1920px; height: 1080px; position: relative; }
#channelBar { height: 36px; flex-shrink: 0; z-index: 50; }
#videoContainer { flex: 1; min-height: 0; overflow: hidden; position: relative; }
#ticker { height: 44px; flex-shrink: 0; z-index: 100; }

/* ===== CHANNEL BAR ===== */
#channelBar {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; color: #fff;
}
#channelBar.hidden { display: none; }
#channelName { font-size: 15px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
#barClock { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ===== CLOCK WIDGET ===== */
#clockWidget {
    position: absolute; z-index: 55;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    padding: 8px 14px; color: #fff; min-width: 110px; text-align: center;
}
#clockWidget.pos-top-right { top: 36px; right: 0; border-radius: 0 0 0 10px; }
#clockWidget.pos-top-left { top: 36px; left: 0; border-radius: 0 0 10px 0; }
#clockWidget.hidden { display: none; }
#clockTime { font-size: 22px; font-weight: 700; }
#clockDate { font-size: 11px; color: #ccc; margin-top: 2px; }

/* ===== VIDEO GRID ===== */
#videoGrid {
    display: grid; width: 100%; height: 100%; background: #000;
}
.layout-single { grid-template: 1fr / 1fr; }
.layout-grid-2x2 { grid-template: 1fr 1fr / 1fr 1fr; }
.layout-2plus1 { grid-template: 1fr 1fr / 1fr 1fr; }
.layout-1plus2 { grid-template: 1fr 1fr / 1fr 1fr; }
.grid-borders { gap: 2px; background: var(--accent); }

/* ===== VIDEO CELL ===== */
.video-cell {
    position: relative; overflow: hidden; background: #111;
}
.video-cell video, .video-cell iframe {
    width: 100%; height: 100%; object-fit: cover; border: none;
}
.video-cell.error video, .video-cell.error iframe { display: none; }
.fallback-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; display: none;
}
.video-cell.error .fallback-img { display: block; }

/* ===== CANLI BADGE ===== */
.live-badge {
    position: absolute; top: 12px; left: 12px; z-index: 20;
    background: var(--accent); color: #fff; padding: 3px 10px;
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    border-radius: 3px; display: flex; align-items: center; gap: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: dotBlink 1.2s ease-in-out infinite; }
@keyframes dotBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }

/* ===== CAMERA NUMBER ===== */
.cam-number {
    position: absolute; top: 12px; left: 12px; z-index: 15;
    background: rgba(0,0,0,0.55); color: #bbb; padding: 2px 8px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
    border-radius: 3px; text-transform: uppercase;
}
.cam-number.with-badge { top: 40px; }

/* ===== TITLE BAND ===== */
.title-band {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 25;
    display: flex; flex-direction: column; pointer-events: none;
}
.title-main {
    padding: 6px 18px 6px 14px; display: flex; align-items: center; gap: 8px;
    color: #fff;
}
.title-main.style-solid { background: var(--accent); }
.title-main.style-gradient { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%); }
.title-main.style-transparent { background: rgba(0,0,0,0.7); }
.title-dot { font-size: 14px; }
.title-text { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.title-subtitle {
    background: rgba(0,0,0,0.7); padding: 4px 18px; color: rgba(255,255,255,0.7);
    font-size: 12px; font-weight: 500;
}
/* Single layout: larger titles */
.layout-single .title-main { padding: 8px 24px 8px 18px; }
.layout-single .title-text { font-size: 20px; }
.layout-single .title-subtitle { padding: 5px 24px; font-size: 15px; }

/* ===== LOGO ===== */
.cell-logo {
    position: absolute; z-index: 10; object-fit: contain; pointer-events: none;
}
.logo-top-right { top: 12px; right: 12px; }
.logo-top-left { top: 12px; left: 12px; }
.logo-bottom-right { bottom: 12px; right: 12px; }
.logo-bottom-left { bottom: 12px; left: 12px; }
.logo-small { width: 30px; height: 30px; }
.logo-medium { width: 50px; height: 50px; }
.logo-large { width: 80px; height: 80px; }
.layout-single .logo-small { width: 50px; height: 50px; }
.layout-single .logo-medium { width: 80px; height: 80px; }
.layout-single .logo-large { width: 120px; height: 120px; }

/* ===== TICKER ===== */
#ticker {
    background: #111; border-top: 3px solid var(--accent);
    display: flex; align-items: center; overflow: hidden;
}
#ticker.hidden { display: none; }
#tickerLabel {
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 800;
    text-transform: uppercase; padding: 0 18px; height: 100%;
    display: flex; align-items: center; flex-shrink: 0;
    letter-spacing: 1px;
}
#tickerContent { flex: 1; overflow: hidden; display: flex; align-items: center; position: relative; }
#tickerText {
    color: #fff; font-size: 16px; font-weight: 600; white-space: nowrap;
    padding-left: 1920px;
    animation: tickerScroll var(--ticker-duration) linear infinite;
}
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* ===== FADE TRANSITION ===== */
#videoContainer { transition: opacity 0.35s ease; }
#videoContainer.fading { opacity: 0; }

/* ===== GRID SPAN RULES ===== */
.layout-2plus1 .video-cell:nth-child(3) { grid-column: 1 / -1; }
.layout-1plus2 .video-cell:nth-child(1) { grid-column: 1 / -1; }