:root {
    --bg-main: #07111f;
    --bg-dark: #030711;
    --gold: #f5c542;
    --gold-soft: #ffe08a;
    --red: #e63946;
    --red-dark: #9f111b;
    --green: #00d084;
    --white: #ffffff;
    --muted: #b8c2d1;
    --font-news: "IBM Plex Sans Arabic", "Cairo", Tahoma, sans-serif;
    --font-headline: "Noto Kufi Arabic", "Cairo", Tahoma, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { background: transparent; color: var(--white); font-family: var(--font-news); overflow: hidden; }
.live-overlay {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; gap: 9px;
    width: 100vw; height: 33.333vh; min-height: 0;
    padding: 12px 18px;
    background: radial-gradient(circle at top right, rgba(245,197,66,.11), transparent 42%),
                linear-gradient(135deg, rgba(7,17,31,.99), rgba(3,7,17,.99));
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 9px 30px rgba(0,0,0,.45);
}
.live-overlay::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 34px 34px;
}
.top-row, .ads-row, .news-row { min-height: 0; border-radius: 14px; }
.top-row {
    flex: 1.08; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 6px 15px;
    background: linear-gradient(90deg, #0a1626, #0c1c30);
    border: 1px solid rgba(255,255,255,.14);
}
.channel-box { display: flex; align-items: center; gap: 12px; min-width: 0; }
.live-badge {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    border-radius: 99px; padding: 6px 11px;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    font: 900 clamp(12px, 1.3vw, 18px)/1.5 var(--font-headline);
    box-shadow: 0 0 15px rgba(230,57,70,.28);
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: white; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.35); opacity: .5; } }
.channel-title {
    min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 800 clamp(17px, 2vw, 29px)/1.4 var(--font-headline);
}
.channel-handle { color: var(--gold); }
.title-separator { color: #7d8798; padding-inline: 6px; }
.market-status { display: flex; gap: 9px; flex-shrink: 0; }
.status-pill {
    white-space: nowrap; display: flex; align-items: center; gap: 7px;
    padding: 6px 10px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05); border-radius: 99px;
    font-size: clamp(12px, 1.2vw, 16px);
}
.status-pill strong { color: var(--green); }
.status-pill strong.gold { color: var(--gold); }
.ads-row {
    flex: .9; position: relative; display: flex; align-items: center; justify-content: center;
    padding: 5px 16px; overflow: hidden;
    background: linear-gradient(90deg, #402900, #111827, #402900);
    border: 1px solid rgba(245,197,66,.42);
}
.ads-row::before {
    content: ""; position: absolute; inset: -60%; pointer-events: none;
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%);
    animation: shine 6s linear infinite;
}
@keyframes shine { from { transform: translateX(75%); } to { transform: translateX(-75%); } }
.ads-text {
    position: relative; display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap; text-align: center;
    color: var(--gold-soft); font: 800 clamp(17px, 1.9vw, 26px)/1.5 var(--font-headline);
}
.ads-text small { color: var(--white); font: 700 clamp(14px, 1.35vw, 19px)/1.5 var(--font-news); }
.ads-separator { color: #8e8d8f; }
.news-row {
    flex: 1; display: flex; align-items: center; overflow: hidden;
    background: #060a15; border: 1px solid rgba(230,57,70,.5);
}
.breaking-label {
    display: grid; place-items: center; align-self: stretch; flex-shrink: 0;
    padding: 0 15px; background: linear-gradient(135deg, var(--red), var(--red-dark));
    font: 900 clamp(15px, 1.75vw, 25px)/1.4 var(--font-headline);
    white-space: nowrap;
}
.ticker-wrapper { position: relative; flex: 1; height: 100%; min-width: 0; overflow: hidden; direction: ltr; }
.ticker-content {
    position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center;
    width: max-content; white-space: nowrap;
    animation: ticker-slide var(--ticker-duration, 38s) linear infinite;
    font: 700 clamp(16px, 1.8vw, 25px)/1.4 var(--font-news);
}
.ticker-item { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: 70px; direction: ltr; unicode-bidi: isolate; }
.ticker-source { color: var(--gold); font: 800 1em/1.4 var(--font-headline); }
.ticker-category { color: var(--green); }

@keyframes ticker-slide {
    from {
        transform: translateX(var(--ticker-start, -100%));
    }

    to {
        transform: translateX(var(--ticker-end, 100vw));
    }
}

.demo-tag {
    flex-shrink: 0; margin-inline: 10px; padding: 3px 7px; border-radius: 5px;
    color: #fce7a3; background: #423516; font: 700 12px/1.4 var(--font-news);
}
@media (max-width: 1150px) {
    .market-status { display: none; }
}
@media (max-width: 600px) {
    .live-overlay { padding: 5px 6px; gap: 4px; }
    .top-row, .ads-row, .news-row { border-radius: 7px; }
    .top-row { padding: 3px 7px; }
    .channel-box { gap: 6px; }
    .live-badge { padding: 3px 6px; font-size: 10px; }
    .live-dot { width: 6px; height: 6px; }
    .channel-title { font-size: 12px; }
    .ads-text { gap: 4px; font-size: 12px; }
    .ads-text small, .ads-separator { display: none; }
    .breaking-label { padding: 0 7px; font-size: 12px; }
    .ticker-content { font-size: 12px; }
    .demo-tag { font-size: 9px; margin-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .live-dot, .ads-row::before { animation: none; }
}