.ticker {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.ticker-window { flex: 1; min-width: 0; }

.ticker + .ticker {
    border-top: 1px solid var(--border);
}

.ticker::before,
.ticker::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.ticker::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, rgba(15,15,17,0) 100%);
}

.ticker::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg-secondary) 0%, rgba(15,15,17,0) 100%);
}

.ticker-window {
    overflow: hidden;
}

.ticker-marquee {
    display: flex;
    width: max-content;
    animation: cyber-ticker-scroll 52s linear infinite;
}

.ticker-cve .ticker-marquee {
    animation-duration: 60s;
}

.ticker:hover .ticker-marquee,
.ticker:focus-within .ticker-marquee {
    animation-play-state: paused;
}

.ticker-group {
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: var(--ticker-height);
    padding-right: 30px;
    white-space: nowrap;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: .82rem;
    font-family: var(--font-mono);
}

.ticker-item:hover {
    color: var(--text-primary);
}

.ticker-kind {
    color: var(--accent-red);
    font-weight: 800;
    letter-spacing: .04em;
}

.ticker-symbol {
    color: var(--text-primary);
    font-weight: 700;
}

.ticker-severity {
    font-weight: 800;
    letter-spacing: .04em;
    padding: 1px 6px;
    border: 1px solid var(--border-emphasis);
}

.ticker-severity-critical { color: var(--critical); border-color: var(--critical); }
.ticker-severity-high { color: var(--high); border-color: var(--high); }
.ticker-severity-medium { color: var(--medium); border-color: var(--medium); }
.ticker-severity-low { color: var(--low); border-color: var(--low); }

.ticker-flag {
    color: var(--accent-red);
    font-weight: 800;
    letter-spacing: .03em;
}

.ticker-age {
    color: var(--text-muted);
}

.ticker-age::before {
    content: "·";
    margin-right: 8px;
    color: var(--border-emphasis);
}

@keyframes cyber-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-window {
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .ticker-marquee {
        animation: none;
    }
    .ticker-group[aria-hidden="true"] {
        display: none;
    }
}

@media (max-width: 620px) {
    .ticker::before,
    .ticker::after {
        width: 24px;
    }
    .ticker-marquee {
        animation-duration: 40s;
    }
    .ticker-cve .ticker-marquee {
        animation-duration: 46s;
    }
}
