/* Theme filters */
.theme-filters,
.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.theme-filter-btn {
    background: var(--color-white-ffffff-a05);
    border: 1px solid rgba(var(--brand-rgb), 0.28);
    border-radius: 999px;
    color: rgba(var(--text-primary-rgb), 0.76);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.32rem 0.74rem;
    min-height: 2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.theme-filter-btn:hover {
    background: rgba(var(--brand-rgb), 0.2);
    border-color: rgba(var(--brand-rgb), 0.5);
    color: var(--color-sky-e8f4ff);
}
.theme-filter-btn.active {
    background: rgba(var(--brand-rgb), 0.28);
    border-color: rgba(var(--brand-rgb), 0.6);
    color: var(--color-cyan-e9f6ff);
}

.theme-filter-btn:focus-visible,
.category-filter-btn:focus-visible {
    outline: none;
    border-color: rgba(var(--brand-rgb), 0.72);
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.24);
}

.category-filter-btn {
    background: var(--color-white-ffffff-a05);
    border: 1px solid rgba(var(--brand-rgb), 0.28);
    border-radius: 999px;
    color: rgba(var(--text-primary-rgb), 0.76);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.32rem 0.74rem;
    min-height: 2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.category-filter-btn:hover {
    background: rgba(var(--brand-rgb), 0.2);
    border-color: rgba(var(--brand-rgb), 0.5);
    color: var(--color-sky-e8f4ff);
}
.category-filter-btn.active {
    background: rgba(var(--brand-rgb), 0.28);
    border-color: rgba(var(--brand-rgb), 0.6);
    color: var(--color-cyan-e9f6ff);
}

/* Theme tags on articles */
.theme-tag {
    display: inline-block;
    background: rgba(var(--brand-rgb), 0.16);
    border: 1px solid rgba(var(--brand-rgb), 0.36);
    border-radius: 999px;
    color: var(--color-cyan-c6e8fc);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.15rem 0.52rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Hidden utility — ensure template-cloned elements stay hidden when JS sets [hidden] */
[hidden] {
    display: none !important;
}

/* Full-width news container */
.news-container {
    margin-top: 1rem;
}

/* Video badge */
.video-badge {
    display: inline-block;
    background: var(--color-red-ff5360-a18);
    border: 1px solid var(--color-red-ff6672-a45);
    color: var(--color-red-ffd2d8);
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.16rem 0.52rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.58rem 0 0 0.9rem;
}

.quality-badge {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 700;
    padding: 0.15rem 0.48rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.58rem 0 0 0.35rem;
}

.headline-badge {
    background: var(--color-amber-ffd061-a18);
    border: 1px solid var(--color-amber-ffd061-a45);
    color: var(--color-amber-ffe8b8);
}

.premium-badge {
    background: var(--color-cyan-6ab8e3-a16);
    border: 1px solid var(--color-cyan-6ab8e3-a50);
    color: var(--color-cyan-d7efff);
}

/* OHLC row on price cards */
.price-ohlc {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-white-ffffff-a06);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    color: rgba(var(--text-primary-rgb), 0.62);
    flex-wrap: wrap;
}

/* YouTube video embed — responsive 16:9 */
.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 1rem 0 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-black-000000);
}
.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}