:root {
    --bg-dark-blue: #0a1220;
    --gosc-blue: #16324f;
    --gosc-red: #b22222;
    --gosc-yellow: #ffcc00;
    --text-white: #ffffff;
    --card-bg: rgba(22, 50, 79, 0.85);
}

body { margin: 0; padding: 0; background-color: var(--bg-dark-blue); color: var(--text-white); font-family: 'Arial', sans-serif; width: 100vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* --- HEADER --- */
header { background-color: var(--gosc-blue); border-bottom: 4px solid var(--gosc-yellow); display: flex; justify-content: space-between; align-items: center; padding: 0 30px; height: 14vh; box-shadow: 0 4px 15px rgba(0,0,0,0.7); box-sizing: border-box; flex-shrink: 0; transition: background 0.5s, border-color 0.5s; }
header.alert-header { background-color: #4a0000; border-bottom-color: #ff0000; animation: alert-pulse 2s infinite; }

@keyframes alert-pulse {
    0% { box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4); }
    50% { box-shadow: 0 4px 30px rgba(255, 0, 0, 0.9); }
    100% { box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4); }
}

.header-left { display: flex; align-items: center; flex: 1; overflow: hidden; }
#logo { height: 85%; max-height: 80px; object-fit: contain; margin-right: 25px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6)); animation: logo-glow 3s infinite alternate; }

@keyframes logo-glow {
    0% { filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.4)); }
    100% { filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.8)); }
}

.header-left h1 { margin: 0; font-size: 2.6rem; letter-spacing: 2px; line-height: 1.1; font-weight: 900; text-transform: uppercase; white-space: nowrap; background: linear-gradient(90deg, #ffffff, #ffcc00, #ffffff, #ffcc00, #ffffff); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shimmer 5s linear infinite; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.9)); }
@keyframes shimmer { to { background-position: 200% center; } }

/* --- CLOCK --- */
.clock-container { display: flex; flex-direction: column; align-items: center; padding-left: 25px; border-left: 3px solid var(--gosc-red); min-width: 380px; }
.date-row { font-size: 1.2rem; font-weight: bold; margin-bottom: 4px; color: var(--gosc-yellow); }
.date-row #clock-day { margin-right: 6px; }
.time-row { display: flex; gap: 30px; align-items: center; margin-bottom: 5px; }
.time-block { display: flex; flex-direction: column; align-items: center; }
.time-block .label { font-size: 0.85rem; color: var(--gosc-yellow); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; font-weight: bold; }

.flip-clock { font-size: 2.3rem; font-weight: 400; color: var(--gosc-yellow); font-family: 'Share Tech Mono', monospace; line-height: 1; text-shadow: 0 0 12px rgba(255, 204, 0, 0.6); letter-spacing: 3px; }

.shift-timer { margin-top: 2px; display: flex; gap: 10px; align-items: baseline; }
.shift-label { font-size: 0.9rem; color: #ff3333; font-weight: bold; text-transform: uppercase; text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }
#shift-countdown { font-size: 1.4rem; font-weight: 900; color: #ff3333; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(255, 0, 0, 0.6); }

/* --- TICKERS --- */
.multi-ticker-container { flex: 1; display: flex; flex-direction: column; padding: 15px 20px; gap: 12px; box-sizing: border-box; }
.ticker-row { display: flex; flex: 1; align-items: center; background: var(--card-bg); border-radius: 15px; overflow: hidden; box-shadow: 0 6px 15px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.05); position: relative; }

/* Делаем заголовки немного уже (было 220px, стало 180px) */
.ticker-title { 
    min-width: 180px; 
    width: 180px;
    text-align: center; 
    font-weight: 900; 
    font-size: 2rem; 
    padding: 0 10px; 
    z-index: 10; 
    text-transform: uppercase; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-right: 2px solid rgba(255, 255, 255, 0.1); 
    background: rgba(0,0,0,0.2); 
    text-shadow: 0 0 6px currentColor, 0 2px 4px rgba(0,0,0,0.8); 
}

.ticker-content { flex: 1; overflow: hidden; white-space: nowrap; position: relative; height: 100%; display: flex; align-items: center; }

/* МАГИЯ КРАЕВ: Добавляем плавное затухание (градиент) слева и справа */
.ticker-content::before,
.ticker-content::after {
    content: '';
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}
.ticker-content::before {
    left: 0;
    background: linear-gradient(to right, rgba(22, 50, 79, 1), rgba(22, 50, 79, 0)); /* подстраивается под фон */
}
.ticker-content::after {
    right: 0;
    background: linear-gradient(to left, rgba(22, 50, 79, 1), rgba(22, 50, 79, 0));
}

/* Текст бегущей строки */
.ticker-text { 
    display: inline-block; 
    font-size: 2.1rem; 
    font-weight: bold; 
    padding-left: 100%; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    animation-name: ticker-scroll; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-duration: 30s; 
    will-change: transform; 
    z-index: 1;
}

@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Плашки статусов */
.badge { display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 0.85em; font-weight: 900; letter-spacing: 1px; margin-right: 10px; vertical-align: middle; text-shadow: none; }
.badge-danger { background-color: #ff0000; color: #fff; box-shadow: 0 0 10px #ff0000; }
.badge-success { background-color: #2e8b57; color: #fff; box-shadow: 0 0 10px #2e8b57; }
.pulse { animation: pulse-red 1.5s infinite; }
@keyframes pulse-red { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }

/* Цвета строк */
.t1 { border-left: 8px solid #aaddff; background: linear-gradient(90deg, rgba(170, 221, 255, 0.15) 0%, rgba(22, 50, 79, 0.9) 100%); }
.t1 .ticker-title, .t1 .ticker-text { color: #aaddff; }
.t1 .ticker-content::before { background: linear-gradient(to right, rgba(28, 60, 85, 1), rgba(22, 50, 79, 0)); }
.t1 .ticker-content::after { background: linear-gradient(to left, rgba(28, 60, 85, 1), rgba(22, 50, 79, 0)); }

.t2 { border-left: 8px solid #ffcc00; background: linear-gradient(90deg, rgba(255, 204, 0, 0.15) 0%, rgba(22, 50, 79, 0.9) 100%); }
.t2 .ticker-title, .t2 .ticker-text { color: #ffcc00; }
.t2 .ticker-content::before { background: linear-gradient(to right, rgba(43, 63, 69, 1), rgba(22, 50, 79, 0)); }
.t2 .ticker-content::after { background: linear-gradient(to left, rgba(43, 63, 69, 1), rgba(22, 50, 79, 0)); }

.t3 { border-left: 8px solid #4488ff; background: linear-gradient(90deg, rgba(68, 136, 255, 0.15) 0%, rgba(22, 50, 79, 0.9) 100%); }
.t3 .ticker-title, .t3 .ticker-text { color: #4488ff; }
.t3 .ticker-content::before { background: linear-gradient(to right, rgba(22, 51, 90, 1), rgba(22, 50, 79, 0)); }
.t3 .ticker-content::after { background: linear-gradient(to left, rgba(22, 51, 90, 1), rgba(22, 50, 79, 0)); }

.t4 { border-left: 8px solid #ff5500; background: linear-gradient(90deg, rgba(255, 85, 0, 0.15) 0%, rgba(22, 50, 79, 0.9) 100%); }
.t4 .ticker-title, .t4 .ticker-text { color: #ff5500; }
.t4 .ticker-content::before { background: linear-gradient(to right, rgba(40, 49, 72, 1), rgba(22, 50, 79, 0)); }
.t4 .ticker-content::after { background: linear-gradient(to left, rgba(40, 49, 72, 1), rgba(22, 50, 79, 0)); }

.t5 { border-left: 8px solid #d32f2f; background: linear-gradient(90deg, rgba(211, 47, 47, 0.15) 0%, rgba(22, 50, 79, 0.9) 100%); }
.t5 .ticker-title, .t5 .ticker-text { color: #d32f2f; }
.t5 .ticker-content::before { background: linear-gradient(to right, rgba(38, 47, 74, 1), rgba(22, 50, 79, 0)); }
.t5 .ticker-content::after { background: linear-gradient(to left, rgba(38, 47, 74, 1), rgba(22, 50, 79, 0)); }

.t6 { border-left: 8px solid #ff0000; background: linear-gradient(90deg, rgba(255, 0, 0, 0.25) 0%, rgba(74, 0, 0, 0.95) 100%); }
.t6 .ticker-title, .t6 .ticker-text { color: #ff0000; }
.t6 .ticker-content::before { background: linear-gradient(to right, rgba(50, 15, 20, 1), rgba(22, 50, 79, 0)); }
.t6 .ticker-content::after { background: linear-gradient(to left, rgba(50, 15, 20, 1), rgba(22, 50, 79, 0)); }

/* Баннер оффлайн */
#offline-banner { flex-shrink: 0; }