/* Piplix News Hub - Enhanced CSS */
:root {
    /* --accent: #FA6A2A; */
    --accent-light: rgba(250, 106, 42, 0.06);
    --accent-hover: #e85a1a;
    --bs-link-hover-color-rgb: 232 90 26;
    --bg: #ffffff;
    --bg-alt: #f9fafb;
    --bg-hover: #f3f4f6;
    --bg-active: #fffaf8;
    --text: #111827;
    --text-sec: rgba(45, 44, 43, 0.8);
    --text-muted: #9ca3af;
    --border: #e5e7eb;
    /* --border-light: #f3f4f6; */
    --border-light: #FBFBFB;
    --radius: 10px;
    --font: var(--px-font);

    --red: #EA2B2B;
    --amber: #FCB734;
    --green: #16A34A;
}

#articleContent #breadcrumb a {
    color: var(--text) !important;
    text-decoration: none;
}

#articleContent #breadcrumb a:hover {
    color: var(--bs-primary) !important;
}

#articleContent #breadcrumb .sep {
    color: var(--text-muted) !important;
}

#articleContent #breadcrumb .current {
    color: var(--text) !important;
    font-weight: 500 !important;
}

#breadcrumb.breadcrumb-dark {
    --bs-breadcrumb-item-active-color: var(--bs-black);
}

.drawer-article .breadcrumb-item+.breadcrumb-item::before {
    bottom: 2px;
}

/* Header */
a {
    color: inherit;
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

/* gradiant  */
/* .bg-gradient-danger{background:linear-gradient(to right, #ffbf96, #fe7096) !important} */

/* App Shell */
#newsAppShell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    min-height: 500px;
}

/* Promotional Banner (Ad-blocker safe) */
.promo-section {
    position: relative;
    width: 100%;
}

.promo-section--banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: #fffbf8;
    border-bottom: 1px solid #ffe8d6;
    box-shadow: 0 1px 2px rgba(250, 106, 42, 0.08);
    transition: all 0.3s ease;
}

.promo-section--hidden {
    display: none;
}

.promo-banner__content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.promo-banner__icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.promo-banner__text {
    font-size: 13px;
    font-weight: 500;
    color: #2d2c2b;
    line-height: 1.4;
}

.promo-banner__cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: var(--bs-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.promo-banner__cta:hover {
    background: var(--accent-hover);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(250, 106, 42, 0.25);
}

.promo-banner__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.promo-banner__close:hover {
    background: #f3f4f6;
    color: #6b7280;
    transform: scale(1.05);
}

.promo-banner__close i {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .promo-section--banner {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 10px;
    }

    .promo-banner__content {
        gap: 8px;
        padding-right: 24px;
    }

    .promo-banner__text {
        font-size: 12px;
    }

    .promo-banner__cta {
        width: 100%;
        justify-content: center;
        padding: 9px 16px;
    }

    .promo-banner__close {
        position: absolute;
        top: 10px;
        right: 10px;
    }
}


.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Feed Panel - Flexible, ~30% default width */
#feedPanel {
    width: 30%;
    min-width: 280px;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    border-right: none;
    /* Border moved to resizer */
    background: var(--bg);
    flex-shrink: 0;
}

/* Breadcrumb */
.breadcrumb-nav {
    padding: 10px 20px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.breadcrumb-nav a {
    color: var(--text-sec);
    transition: color .15s;
}

.breadcrumb-nav a:hover {
    color: var(--bs-primary);
}

.breadcrumb-sep {
    color: var(--text-muted);
}

.breadcrumb-current {
    color: var(--text);
    font-weight: 500;
}

/* Feed Header - SIMPLIFIED */
.feed-header {
    padding: 14px 20px 10px;
    border-bottom: none;
    /* Removed border for cleaner look */
}

.feed-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 12px;
}

.feed-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.feed-title span {
    color: var(--text-sec);
    font-weight: 400;
}

.feed-quick-links {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.quick-link {
    font-size: 12px;
    color: var(--bs-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--accent-light);
    transition: all .15s;
}

.quick-link:hover {
    color: var(--bs-primary);
    background: rgba(250, 106, 42, .12);
}

.feed-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Search Box */
.search-box {
    position: relative;
    margin-bottom: 20px;
}

.search-box input {
    width: 100%;
    padding: 8px 38px 8px 32px;
    border: 0px;
    border-radius: 8px;
    font-size: 16px;
    background: #f2f2f2;
    transition: all .15s;
}

.search-box input:focus {
    outline: none;
    border-color: var(--bs-primary);
    background: var(--bg);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.search-box>i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
}

.search-kbd {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-family: var(--font);
    padding: 2px 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
}

/* Filters */
#filtersContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.filter-chip {
    padding: 5px 7px;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font);
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: var(--bg);
    color: #707070;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.2;
}

.filter-chip:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.filter-chip.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.filter-chip:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.filter-dropdown select {
    padding: 5px 24px 5px 9px;
    font-size: 14px;
    font-family: var(--font);
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 7px center;
    color: #707070;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.2;
}

.filter-dropdown select:focus {
    outline: none;
    border-color: var(--bs-primary);
}

.filter-dropdown select.has-value {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background-color: var(--accent-light);
}

.filter-reset {
    padding: 5px 9px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-reset:hover {
    color: var(--red);
}

/* Feed List */
.feed-list {
    flex: 1;
    overflow-y: auto;
}

.feed-group-header {
    padding: 12px 20px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Story Row - Compact TradingView Style */
.story-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: none;
    cursor: pointer;
    transition: background .06s ease-out;
    text-decoration: none;
    position: relative;
}

/* Ultra-subtle divider */
.story-row::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 1px;
    background: rgba(0, 0, 0, .06);
}

.story-row:hover {
    background: rgba(0, 0, 0, .012);
}

.story-row.active {
    background: rgba(250, 106, 42, .03);
}

/* .story-row.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-primary);
} */

.story-row:focus {
    outline: none;
}

.story-row:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* FUTURE-READY: Reserve silent layout space for additional fields */
.story-row .story-future-slot {
    display: none;
}

/* Meta line: Time · Instruments (TradingView Style) */
.story-meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #707070;
    font-weight: 400;
    line-height: 1.3;
}

.story-meta-line .meta-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: .5;
}

.story-time {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    color: var(--text-muted);
}

/* Instruments inline with time */
.story-instruments-text {
    font-weight: 500;
    color: var(--bs-primary);
    letter-spacing: 0px;
}

/* Headline - Compact and clean */
.story-headline {
    font-size: 16px;
    font-weight: 400;
    color: var(--bs-dark);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-row:hover .story-headline {
    color: var(var(--bs-primary));
}

.story-headline a {
    color: inherit;
    text-decoration: none;
}

/* Instruments - inline, subtle, no background */
.story-instruments-inline {
    display: inline;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 6px;
}

.story-instruments-inline .inst-inline {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Legacy instrument styles (kept for backwards compatibility) */
.story-main {
    min-width: 0;
}

.story-instruments {
    display: none;
    /* Hidden in favor of inline instruments */
}

.inst {
    font-size: 10px;
    font-weight: 600;
    color: var(--bs-primary);
    background: transparent;
    padding: 0;
}

.inst-more {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Secondary metadata - hidden in list, shown on hover/focus */
.story-meta {
    display: none;
    /* Removed for cleaner rows */
}

.story-right {
    display: none;
    /* NRS pills and risk indicators hidden for cleaner rows */
}

/* Risk indicator - ultra subtle, inline when needed */
.risk-ind {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.risk-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.risk-dot.red {
    background: var(--red);
}

.risk-dot.amber {
    background: var(--amber);
}

.risk-dot.green {
    background: var(--green);
}

.risk-lbl {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* NRS pill - only shown in preview, not list */
.nrs-pill {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: help;
    background: var(--bg-alt);
    color: var(--text-sec);
    border: 1px solid var(--border);
}

.nrs-pill.high {
    background: rgba(239, 68, 68, .06);
    color: var(--red);
    border-color: transparent;
}

.nrs-pill.medium {
    background: rgba(245, 158, 11, .06);
    color: var(--amber);
    border-color: transparent;
}

.nrs-pill.low {
    background: rgba(16, 185, 129, .06);
    color: var(--green);
    border-color: transparent;
}

/* Feed Empty */
.feed-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}

.feed-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: .3;
}

.feed-empty p {
    font-size: 14px;
    margin-bottom: 8px;
}

.feed-empty a {
    color: var(--bs-primary);
}

/* Feed Load More & Footer */
.feed-load-more {
    padding: 16px 20px;
    text-align: center;
}

.btn-load-more {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-sec);
    cursor: pointer;
    transition: all .15s;
}

.btn-load-more:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* Feed Footer Links - HIDDEN PER USER REQUEST */
.feed-footer-links {
    display: none;
    /* Hidden - kept for future use */
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    /* display: flex; */
    gap: 16px;
    flex-wrap: wrap;
}

.feed-footer-links a {
    font-size: 11px;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color .15s;
}

.feed-footer-links a:hover {
    color: var(--bs-primary);
}

/* Resizer - Smooth drag handle (TradingView-style) */
#panelResizer {
    width: 6px;
    background: transparent;
    cursor: col-resize;
    flex-shrink: 0;
    transition: background .15s;
    position: relative;
    z-index: 10;
}



#panelResizer:hover,
#panelResizer.active {
    background: rgba(250, 106, 42, 0.08);
}

#panelResizer:hover::before,
#panelResizer.active::before {
    background: var(--bs-primary);
    width: 3px;
    left: 1px;
}

#panelResizer:focus {
    outline: none;
    background: rgba(250, 106, 42, 0.08);
}

#panelResizer:focus::before {
    background: var(--bs-primary);
}

/* Resizer width indicator (shows percentage during drag) */
.resizer-width-indicator {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--text);
    color: #fff;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 1000;
    white-space: nowrap;
}

.resizer-width-indicator.show {
    opacity: 1;
}

/* ================================================
   DRAWER PANEL - TRADINGVIEW-INSPIRED DESIGN
   ================================================ */

/* Drawer Panel - Flexible ~70% width */
#previewDrawerPanel {
    position: relative;
    flex: 1;
    min-width: 50%;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid #e0e3eb;
}

/* ===== DRAWER EMPTY STATE ===== */
.drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 32px;
    text-align: center;
}

.drawer-empty-icon {
    font-size: 42px;
    color: var(--text-muted);
    margin-bottom: 14px;
    line-height: 1;
    opacity: 0.15;
}

.drawer-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.drawer-empty-hint {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.drawer-empty-shortcuts {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.drawer-empty-shortcuts .shortcut {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.drawer-empty-shortcuts kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 2px 5px;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: none;
}

/* ===== DRAWER HEADER ===== */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e3eb;
    background: var(--bg);
    flex-shrink: 0;
    min-height: 52px;
}

/* Navigation Controls */
.drawer-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-nav .nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid #e0e3eb;
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
}

.drawer-nav .nav-btn:hover:not(:disabled) {
    background: #f0f3fa;
    border-color: #d1d4dc;
}

.drawer-nav .nav-btn:active:not(:disabled) {
    background: #e0e3eb;
    transform: scale(0.96);
}

.drawer-nav .nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.drawer-nav .nav-counter {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0 4px;
    min-width: 48px;
    text-align: center;
}

/* Action Buttons */
.drawer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.drawer-actions .act-btn,
.drawer-actions .close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.drawer-actions .act-btn:hover,
.drawer-actions .close-btn:hover {
    background: #f0f3fa;
}

.drawer-actions .act-btn:active,
.drawer-actions .close-btn:active {
    background: #e0e3eb;
    transform: scale(0.96);
}

.drawer-actions .act-btn i,
.drawer-actions .close-btn i {
    font-size: 14px;
}

.drawer-actions .close-btn {
    padding: 0;
    width: 28px;
    margin-left: 4px;
}

.drawer-actions .act-btn.copied {
    border-color: var(--green);
    color: var(--green);
}

/* Hide button text on smaller screens */
@media (max-width: 1200px) {
    .drawer-actions .act-btn span {
        display: none;
    }

    .drawer-actions .act-btn {
        padding: 0;
        width: 28px;
    }
}

/* ===== DRAWER CONTENT ===== */
#drawerContent {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.drawer-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar */
.drawer-scroll::-webkit-scrollbar {
    width: 6px;
}

.drawer-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.drawer-scroll::-webkit-scrollbar-thumb {
    background: #d1d4dc;
    border-radius: 3px;
}

.drawer-scroll::-webkit-scrollbar-thumb:hover {
    background: #b2b5be;
}

/* ===== ARTICLE PREVIEW ===== */
.drawer-article {
    max-width: 80%;
    margin: 0 auto;
    padding: 24px 28px 60px;
}

/* Article Meta Information */
.drawer-article .article-meta {
    display: flex;
    /* flex-direction: column; */
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f3fa;
}

.drawer-article .article-source {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-article .source-logo {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: contain;
}

.drawer-article .source-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.drawer-article .article-timestamp {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: auto;
}

/* Article Instruments/Tags */
.drawer-article .article-instruments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.drawer-article .instrument-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    background: #f0f3fa;
    color: var(--bs-primary);
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.drawer-article .instrument-tag:hover {
    background: #e0e3eb;
}

/* Article Headline */
.drawer-article h1,
.drawer-article .article-headline {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    margin: 0 0 16px 0;
}

/* Article Summary */
.drawer-article .article-summary {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-sec);
    margin: 0 0 20px 0;
}

/* Article Body */
.drawer-article .article-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text);
}

.drawer-article .article-body p {
    margin: 0 0 16px 0;
}

.drawer-article .article-body p:last-child {
    margin-bottom: 0;
}

.drawer-article .article-body h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    margin: 24px 0 12px 0;
}

.drawer-article .article-body h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    margin: 20px 0 10px 0;
}

.drawer-article .article-body ul,
.drawer-article .article-body ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.drawer-article .article-body li {
    margin-bottom: 8px;
}

.drawer-article .article-body a {
    color: var(--bs-primary);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.drawer-article .article-body a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.drawer-article .article-body blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    background: #f0f3fa;
    border-left: 3px solid var(--bs-primary);
    font-style: italic;
    color: var(--text-sec);
}

/* Article Stats/Badges */
.drawer-article .article-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f3fa;
}

.drawer-article .stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.drawer-article .stat-badge i {
    font-size: 13px;
}

/* Risk Badge */
.drawer-article .risk-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.drawer-article .risk-badge.risk-high {
    background: var(--red);
    color: #ffffff;
}

.drawer-article .risk-badge.risk-medium {
    background: var(--amber);
    color: #ffffff;
}

.drawer-article .risk-badge.risk-low {
    background: var(--green);
    color: #ffffff;
}

/* NRS Score Display */

.drawer-article .nrs-score .score-value {
    font-size: 16px;
    color: var(--bs-primary);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .drawer-article {
        padding: 16px;
        max-width: 100%;
    }

    .drawer-article h1,
    .drawer-article .article-headline {
        font-size: 18px;
    }

    .drawer-header {
        padding: 10px 12px;
        min-height: 48px;
    }

    .drawer-nav .nav-counter {
        font-size: 12px;
        min-width: 40px;
    }
}

/* ===== LOADING STATE ===== */
.drawer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.drawer-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #f0f3fa;
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {

    .drawer-nav .nav-btn,
    .drawer-actions .act-btn,
    .drawer-actions .close-btn,
    .drawer-article .instrument-tag,
    .drawer-article .article-body a {
        transition: none;
    }

    .drawer-loading-spinner {
        animation: none;
        border-top-color: var(--text-muted);
    }
}

/* Focus Styles */
.drawer-nav .nav-btn:focus-visible,
.drawer-actions .act-btn:focus-visible,
.drawer-actions .close-btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Legacy compatibility - old class names */
.nav-btn {
    width: 28px;
    height: 28px;
}

.act-btn {
    padding: 6px 10px;
    font-size: 11px;
}

.close-btn {
    width: 28px;
    height: 28px;
}

/* Preview Article Content */
.preview-breadcrumb {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.preview-breadcrumb a {
    color: var(--text-sec) !important;
    transition: color .15s;
}

.preview-breadcrumb a:hover {
    color: var(--bs-primary) !important;
}

.preview-instruments {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Preview instruments - subtle, clickable */
/* .preview-instruments .inst {
    font-size: 10px;
    padding: 3px 8px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-sec);
    transition: all .1s;
}

.preview-instruments .inst:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: transparent;
} */

.preview-h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
    color: var(--text);
}

.preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.preview-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.preview-meta a {
    color: inherit;
}

.preview-meta a:hover {
    color: var(--bs-primary);
}

.preview-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* .tag {
    font-size: 9px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
} */

/* Tags - more subtle colors */
/* .tag-risk {
    background: rgba(239, 68, 68, .05);
    color: var(--red);
}

.tag-risk.amber {
    background: rgba(245, 158, 11, .05);
    color: var(--amber);
}

.tag-risk.green {
    background: rgba(16, 185, 129, .05);
    color: var(--green);
}

.tag-format {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
} */

/* .tag-video {
    background: transparent;
    color: var(--bs-primary);
    border: 1px solid rgba(250, 106, 42, .3);
} */

/* Byline - Lighter, less boxy */
/* .preview-byline {
    padding: 10px 0 16px;
    border-top: none;
    border-bottom: none;
    margin-bottom: 16px;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--text-muted);
} */


/* Content Sections */
.sec-divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
}

/* .sec-label {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bs-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
} */

/* Bottom Line - Lighter, less prominent */
/* .bottom-line {
    font-size: 15px;
    line-height: 1.65;
    font-weight: 500;
    padding: 12px 14px;
    border-left: 2px solid var(--bs-primary);
    background: rgba(250, 106, 42, .03);
    border-radius: 0 6px 6px 0;
    margin-bottom: 20px;
    color: var(--text);
} */

/* Content Lists */
.content-list {
    margin-bottom: 24px;
    padding-left: 0;
    list-style: none;
}

.content-list li {
    padding-block: 6px;
    font-size: 18px;
    line-height: 30px;
    color: var(--text-sec);
    position: relative;
    padding-left: 20px;
}

.content-list li:last-child {
    border-bottom: none;
}

.content-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(130, 130, 130, 0.55);
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 4px;
    position: absolute;
    left: 0px;
    top: 18px;
}

/* NRS Block */

/* 
.nrs-score {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.nrs-score.high {
    background: var(--red);
}

.nrs-score.medium {
    background: var(--amber);
}

.nrs-score.low {
    background: var(--green);
}

.nrs-info {
    flex: 1;
    min-width: 0;
} */






/* .nrs-content :not(.nrs-tag) {
    order: 1;
}

.nrs-content :not(.nrs-title, .nrs-reason) {
    order: 0;
} */


/* CTA */
.preview-cta {
    margin-top: 28px;
}

/* .btn-open-story {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    background: var(--bs-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}

.btn-open-story:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(250, 106, 42, .25);
} */

/* Mobile */
.mobile-filter-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    background: var(--text);
    color: #fff;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.mobile-filter-toggle:hover {
    background: #000;
}

.mobile-filter-drawer {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    background: var(--bg);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .1);
}

.mobile-filter-drawer.open {
    transform: translateX(0);
}

.mobile-filter-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
}

.mobile-filter-header button {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
}

.mobile-filter-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.mobile-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 199;
    display: none;
}

.mobile-filter-overlay.open {
    display: block;
}



/* Skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--bg-alt) 25%, var(--bg-hover) 50%, var(--bg-alt) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-row {
    height: 78px;
    margin-bottom: 1px;
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    background: var(--text);
    color: #fff;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    z-index: 1000;
    opacity: 0;
    transform: translateY(10px);
    transition: all .3s ease;
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 991px) {
    #newsAppShell {
        height: auto;
        min-height: calc(100vh - 56px);
    }

    .main-content {
        flex-direction: column;
    }

    #feedPanel {
        width: 100% !important;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .feed-list {
        max-height: none;
        overflow: visible;
    }
    .feed-group-header { position: static; }

    #panelResizer {
        display: none;
    }

    #previewDrawerPanel {
        min-width: 0;
        position: fixed;
        inset: 0;
        z-index: 150;
        transform: translateX(100%);
        transition: transform .25s ease;
    }

    #previewDrawerPanel.open {
        transform: translateX(0);
    }

    .drawer-header {
        padding: 12px 16px;
    }

    .drawer-article {
        padding: 20px 16px 80px;
        width: 100%;
    }

    .mobile-filter-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .feed-quick-links {
        flex-direction: row;
        gap: 6px;
    }
}

@media (max-width: 576px) {

    #breakingTicker {
        padding: 0 12px;
        height: 34px;
    }

    .ticker-headline {
        max-width: 200px;
    }

    .feed-header {
        padding: 110px 16px 14px;
    }

    .breadcrumb-nav {
        padding: 10px 16px 0;
    }

    .story-row {
        padding: 10px 16px;
        grid-template-columns: 46px 1fr auto;
        gap: 8px;
    }

    .feed-title {
        font-size: 15px;
    }

    .filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .filter-chips::-webkit-scrollbar {
        display: none;
    }

    .act-btn span {
        display: none;
    }

    .preview-h2 {
        font-size: 20px;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
}






/* details  */
#articlePreview .preview-tags .badge {
    --bs-badge-border-radius: 6px;
}

#articlePreview .preview-tags .badge,
#tags .badge.tag {
    --bs-badge-padding-x: 10px;
    --bs-badge-padding-y: 10px;
    --bs-badge-font-size: 14px;
    --bs-badge-border-radius: 6px;
    border: 0px;
}

.badge.badge-risk {
    background: #F8F9FA;
    color: #585858;
    position: relative;
    padding-left: 30px;
}

.badge.badge-risk::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #DC3545;
    box-shadow: 0px 0px 1px 1px #0000001a;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgb(220 53 69 / 20%);
    }

    100% {
        box-shadow: 0 0 0 10px rgb(220 53 69 / 0%);
    }
}

.badge.badge-format {
    background: #F8F9FA;
    color: #585858;
}

.badge.tag-verified {
    background-color: transparent;
    color: #585858;
    padding: 0px;
    padding-left: 20px;
    padding-block: 10px;
    position: relative;
}

.badge.tag-verified::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.903 1.085 10.021 0l1.291 1.999 2.376.119.12 2.376 1.998 1.291-1.085 2.118 1.085 2.118-1.998 1.291-.12 2.376-2.376.12-1.29 1.998-2.119-1.085-2.118 1.085-1.29-1.998-2.377-.12-.12-2.376L0 10.022l1.085-2.119L0 5.785l1.999-1.29.119-2.377 2.376-.12L5.785 0z' fill='%2352B8DB'/%3E%3Cpath d='M7.054 10.267 4.61 7.916l.608-.632 1.835 1.763 3.7-3.59.612.63z' fill='%23fff'/%3E%3C/svg%3E");
}

/* #articlePreview .preview-tags .badge.badge-video, */
.badge.badge-video {
    background: transparent;
    color: var(--bs-primary);
    /* border: 1px solid rgba(250, 106, 42, .3); */
}

.badge.tag-verified i {
    display: none;
}

/* Context Bar */
.context-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}

.back-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .15s;
}

.back-link:hover {
    color: var(--bs-primary);
}

.context-actions {
    display: flex;
    gap: 8px;
}

.ctx-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-sec);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all .15s;
}

.ctx-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.ctx-btn.active {
    background: var(--accent-light);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.article-main {
    padding: 32px 24px 60px;
}

/* Main Article Layout */



/* Instruments */
.article-instruments {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;

    display: none;
}

.inst-chip {
    font-size: 11px;
    font-weight: 700;
    color: var(--bs-primary);
    background: var(--accent-light);
    padding: 5px 12px;
    border-radius: 5px;
    transition: all .15s;
}

.inst-chip:hover {
    background: rgba(250, 106, 42, .15);
    color: var(--bs-link-hover-color-rgb);
}

.article-meta {
    color: #7C7C7C;
}

.article-meta a {
    color: inherit;
}

.article-meta a:hover {
    color: var(--bs-primary);
}

.article-meta i {
    display: none;
}

.article-meta span:nth-child(1)::after {
    content: '';
    display: inline-block;
    height: 4px;
    width: 4px;
    background-color: #7C7C7C;
    border-radius: 100%;
    margin: 0px 0px 3px 8px;
}

/* Tags */


/* Byline */
.article-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
}

.byline-item {
    display: flex;
    gap: 6px;
}

.byline-label,
.byline-lbl {
    font-weight: 400;
    color: var(--text);
}

.byline-value,
.byline-val {
    color: #8D8D8C;
}

/* Content Sections */
.content-section {
    margin-bottom: 32px;
}

.section-label,
.sec-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
    letter-spacing: 0;
    color: #2D2C2B;
    margin-bottom: .75rem;
}

:where(.section-label, .sec-label) i {
    display: none !important;
}

.section-divider {
    height: 1px;
    background: var(--border);
    margin: 32px 0;
}

/* Bottom Line */
.bottom-line-box {
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    padding: 10px;
    color: #2D2C2B;
    background: rgba(252, 183, 52, 0.08);
    border-radius: 6px;
}

/* Beginner Takeaway */
.beginner-box {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    color: #12244C;
    padding: 10px;
    border-radius: 4px;
    background: rgba(18, 36, 76, 0.04);
}



/* NRS Block */
.nrs-block {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1rem);
}

.nrs-block .nrs-tag {
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 4px;
    background: #F8F8F8;
    display: inline-block;
    margin-bottom: 0px;
    color: #7B7B7B;
}

.nrs-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.nrs-score-circle {
    width: 88px;
    height: 72px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: #000;
    flex-shrink: 0;
    background-color: #F8F8F8;
}

.nrs-score-circle.high {
    background: var(--red);
    color: var(--bs-white);
}

.nrs-score-circle.medium {
    background: var(--amber);
    color: var(--bs-white);
}

.nrs-score-circle.low {
    background: var(--green);
    color: var(--bs-white);
}

.nrs-title {
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    /* margin-bottom: 6px; */
    /* flex: 0 0 100%; */
}

.nrs-reason {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sec);
    line-height: 1.5;
    /* margin-bottom: 10px; */
}

.nrs-help {
    font-size: 14px;
    line-height: 1;
    color: var(--bs-primary);
    /* margin-bottom: 8px; */
    /* margin-left: 10px; */
}

.nrs-help i {
    display: none;
}

.nrs-help:hover {
    text-decoration: underline;
}

@media(max-width:767px) {
    .nrs-block {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* The Number */

.number-info {
    flex: 1;
}

.number-label {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.number-value {
    color: #12244C;
    font-size: 32px;
    font-weight: 700;
    background-color: #F8F8F8;
    padding: 16px;
    border-radius: 8px;
    line-height: 1.2;
}

.number-context {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.5;
    font-weight: 400;
}

/* The Trap */
.trap-box {
    font-size: 1.125rem;
    line-height: 30px;
    color: var(--text-sec);
}

.vera-quote {
    font-style: italic;
}

.vera-quote::before {
    content: url("data:image/svg+xml,%3Csvg width='38' height='29' viewBox='0 0 38 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2070_3219)'%3E%3Cpath d='M3.79036 26.6667C1.70703 24.375 0.457031 21.875 0.457031 17.7083C0.457031 10.4167 5.66537 3.95833 12.957 0.625L14.832 3.33333C7.95703 7.08333 6.4987 11.875 6.08203 15C7.1237 14.375 8.58203 14.1667 10.0404 14.375C13.7904 14.7917 16.707 17.7083 16.707 21.6667C16.707 23.5417 15.8737 25.4167 14.6237 26.875C13.1654 28.3333 11.4987 28.9583 9.41536 28.9583C7.1237 28.9583 5.04036 27.9167 3.79036 26.6667ZM24.6237 26.6667C22.5404 24.375 21.2904 21.875 21.2904 17.7083C21.2904 10.4167 26.4987 3.95833 33.7904 0.625L35.6654 3.33333C28.7904 7.08333 27.332 11.875 26.9154 15C27.957 14.375 29.4154 14.1667 30.8737 14.375C34.6237 14.7917 37.5404 17.7083 37.5404 21.6667C37.5404 23.5417 36.707 25.4167 35.457 26.875C34.207 28.3333 32.332 28.9583 30.2487 28.9583C27.957 28.9583 25.8737 27.9167 24.6237 26.6667Z' fill='%2352B8DB' fill-opacity='0.2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2070_3219'%3E%3Crect width='38' height='29' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    display: inline-block;
    vertical-align: sub;
    line-height: 1;
    height: 29px;
    width: 38px;
    margin-right: 10px;
}

/* Point */
.point-box {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #575655;
    background-color: #D7F4E2;
}

/* Watch Next */
.watch-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
}

.watch-item {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: .75rem;
    padding: .625rem;
    /* background: var(--bg); */
}

/* .watch-item:hover {background: var(--bg-hover);} */

.watch-event {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.watch-why {
    font-size: 12px;
    color: var(--text-sec);
}

.watch-inst {
    font-size: 10px;
    font-weight: 700;
    color: var(--bs-primary);
    background: var(--accent-light);
    padding: 4px 8px;
    border-radius: 4px;
    align-self: center;
}

/* Sources */
.sources-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
}

.source-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg);
    font-size: 13px;
}

.source-item:hover {
    background: var(--bg-hover);
}

.source-name {
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.source-name a {
    color: var(--bs-primary);
}

.source-name a:hover {
    text-decoration: underline;
}

.source-type {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    background: var(--bg-alt);
    border-radius: 4px;
    color: var(--text-muted);
}

.source-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* Related Stories */
.related-list {
    gap: 1px;
}

.related-item {
    display: block;
    padding: 14px 16px;
    background: var(--bg);
    transition: background .15s;
    text-decoration: none;
}

.related-item:hover {
    background: var(--bg-hover);
}



/* Disclaimer */
.disclaimer-section {
    margin-top: 40px;
}

.disclaimer-box {
    font-size: .875rem;
    line-height: 1.6;
    font-weight: 400;
    color: #9CA3AF;
}

.disclaimer-box strong {
    color: #898989;
    display: block;
}

/* Story Navigation */
.story-nav .nav-link {
    flex: 1;
    padding: 1rem 1.5rem;
    background: #FBFBFB;
    border-radius: .75rem;
    transition: all .15s;
}

.story-nav .nav-link:hover {
    background: var(--bg-hover);
}

.story-nav .nav-link.disabled {
    opacity: .4;
    pointer-events: none;
}

.nav-dir {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    /* text-transform: uppercase; */
    letter-spacing: .5px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.nav-next .nav-dir {
    justify-content: flex-end;
}

.nav-dir i {
    background: #FFFFFF;
    border-radius: 100px;
    color: var(--px-primary);
    width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.nav-headline {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(45, 44, 43, 0.8);
    margin-bottom: .75rem;
}

/* Sidebar */
.article-sidebar {
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

.sidebar-section {
    margin-bottom: 28px;
}

.sidebar-title {
    /* text-transform: uppercase; */
    letter-spacing: .5px;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: rgba(45, 44, 43, 0.86);

    margin-bottom: 12px;
    padding-bottom: 8px;
    /* border-bottom: 1px solid var(--border); */
}

.sidebar-instruments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sidebar-instruments .inst-chip {
    font-size: 10px;
    padding: 4px 10px;
}

.sidebar-provider-stories {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-story {
    font-size: 12px;
    color: var(--text-sec);
    line-height: 1.4;
    padding-left: 12px;
    border-left: 2px solid var(--border);
    transition: all .15s;
}

.sidebar-story:hover {
    border-left-color: var(--bs-primary);
    color: var(--text);
}

.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-links a {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .15s;
}

.sidebar-links a i {
    display: none !important;
}

.sidebar-links a:hover {
    color: var(--bs-primary);
}


/* Toast */
/* .toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    background: var(--text);
    color: #fff;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    z-index: 1000;
    opacity: 0;
    transform: translateY(10px);
    transition: all .3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
} */

/* Responsive */
@media (max-width: 991px) {
    .article-main {
        flex-direction: column;
        padding: 80px 0px 40px;
        gap: 32px;
    }

    .article-content {
        max-width: none;
    }

    .article-sidebar {
        width: 100%;
        position: static;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .sidebar-section {
        margin-bottom: 0;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }
}

@media (max-width: 576px) {


    .context-bar {
        padding: 8px 16px;
    }

    .article-headline {
        font-size: 30px !important;
    }

    .article-byline {
        flex-direction: column;
        gap: 8px;
    }

    .watch-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .watch-inst {
        justify-self: start;
    }

    .story-nav {
        flex-direction: column;
    }

    .article-sidebar {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
    .content-list li,.trap-box,.point-box{font-size:1rem;}
}



h2.n-section-title {
    font-size: 28px !important;
}

h2.n-section-title i {
    color: var(--bs-primary);
}

/*************
* WEEK AHEAD*
**************/
.week-dates {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 8px;
}

.week-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.week-section {
    margin-bottom: 40px;
}

.week-section-title i {
    color: var(--bs-primary);
}

.risk-drivers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.risk-card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.risk-card-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
}

.calendar-table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border);
}

.calendar-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.calendar-table tr:hover {
    background: var(--bg-hover);
}

.cal-day {
    font-weight: 600;
    color: var(--text);
    min-width: 80px;
}

.cal-event {
    font-weight: 500;
}

.cal-impact {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.cal-impact.high {
    background: rgba(239, 68, 68, .1);
    color: var(--red);
}

.cal-impact.med {
    background: rgba(245, 158, 11, .1);
    color: var(--amber);
}

.cal-impact.low {
    background: rgba(16, 185, 129, .1);
    color: var(--green);
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.scenario-card {
    padding: 20px;
    border-radius: var(--radius);
}

.scenario-card.bull {
    background: rgba(16, 185, 129, .06);
    border: 1px solid rgba(16, 185, 129, .2);
}

.scenario-card.base {
    background: var(--bg-alt);
    border: 1px solid var(--border);
}

.scenario-card.bear {
    background: rgba(239, 68, 68, .06);
    border: 1px solid rgba(239, 68, 68, .2);
}

.scenario-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.scenario-card.bull .scenario-label {
    color: var(--green);
}

.scenario-card.base .scenario-label {
    color: var(--text-muted);
}

.scenario-card.bear .scenario-label {
    color: var(--red);
}

.scenario-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.scenario-desc {
    font-size: 13px;
    color: var(--text-sec);
    line-height: 1.5;
}

.scenario-prob {
    font-size: 24px;
    font-weight: 800;
    margin-top: 12px;
}

.nrs-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--bg-alt);
    border-radius: var(--radius);
}

.nrs-big {
    width: 110px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary), #d97706);
}

.nrs-big.high {
    background: linear-gradient(135deg, var(--red), #dc2626);
}

.nrs-big.low {
    background: linear-gradient(135deg, var(--green), #059669);
}

.watchlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.watch-chip {
    transition: all .15s;
}

.watch-chip:hover {
    background: var(--bg-hover);
}



.breakers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.breaker-item {
    padding: 16px;
    background: var(--bs-bg-one);
    border-radius: 10px;
    border-left: 3px solid var(--bs-primary);
}


.breaker-instruments {
    display: flex;
    gap: 6px;
}

.breaker-inst {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg);
    border-radius: 4px;
    color: var(--text-muted);
}

.week-nav {
    display: flex;
    justify-content: space-between;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    margin-top: 24px;
}

.week-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bs-primary);
}

.week-nav-link.disabled {
    color: var(--text-muted);
    pointer-events: none;
}

.archive-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bs-primary);
    margin-top: 24px;
}

.archive-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {

    .risk-drivers,
    .scenario-grid {
        grid-template-columns: 1fr;
    }

    .watchlist-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/************* * NRS* **************/
/*
.nrs-section{margin-bottom:40px;}
.score-bands{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
.band-card{padding:24px;border-radius:var(--radius);text-align:center;}
.band-card.high{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);}
.band-card.medium{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);}
.band-card.low{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);}
.band-range{font-size:34px;font-weight:700;margin-bottom:0px;}
.band-label{font-size:13px;font-weight:700;text-transform:uppercase;margin-bottom:0px;}
.band-card.high .band-label,.band-card.high .band-range{color:var(--bs-red);}
.band-card.medium .band-label,.band-card.medium .band-range{color:var(--bs-orange);}
.band-card.low .band-label,.band-card.low .band-range{color:var(--bs-green);}
.rubric-table{width:100%;border-collapse:collapse;margin-bottom:24px;}
.rubric-table th{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);padding:12px;text-align:left;border-bottom:2px solid var(--border);}
.rubric-table td{padding:14px 12px;border-bottom:1px solid var(--border-light);font-size:14px;}
.rubric-tag{font-size:11px;font-weight:700;padding:5px 12px;background:var(--bs-bg-one);border-radius:4px;color:var(--text-sec);}
.example-block{padding:20px;background:var(--bs-bg-one);border-radius:var(--radius);}
.example-header{display:flex;justify-content:space-between;align-items:center;}
.example-title{font-size:22px;font-weight:600;}
.example-nrs{font-size:24px;font-weight:700;}
.example-nrs.high{color:var(--bs-red);}
.example-nrs.low{color:var(--bs-green);}
.example-desc{font-size:16px;color:var(--text-sec);line-height:1.5;}
.warning-box{padding:20px;background:rgba(245,158,11,.08);border-left:4px solid var(--amber);border-radius:0 var(--radius) var(--radius) 0;margin-bottom:24px;}
.warning-box strong{color:var(--amber);}
.warning-box p{font-size:14px;color:var(--text-sec);line-height:1.6;margin:0;}
.faq-item{border-bottom:1px solid var(--border);padding:16px 0;}
.faq-q{font-size:18px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.faq-q i{color:var(--bs-primary);}
.faq-a{font-size:16px;color:var(--text-sec);line-height:1.6;padding-left:24px;}
.interlinks{margin-top:40px;padding-top:24px;border-top:1px solid var(--border);}
.interlinks-grid a:hover{color:var(--bs-primary)!important;}
@media (max-width:768px){
.score-bands{grid-template-columns:1fr;}
.nrs-h1{font-size:28px;}
.example-title{font-size:20px;line-height:28px;}
.example-nrs{font-size:20px;white-space:nowrap;}
}
*/


/*************
* PROVIDERS*
**************/




.providers-search {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--font);
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 12px center;
}

.cat-chip {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-sec);
    cursor: pointer;
    transition: all .15s;
}

.cat-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cat-chip.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-providers {
    margin-bottom: 40px;
}

/* tabel  */
.providers-table.table>:not(caption)>*>* {
    padding: .5rem .5rem;
}

/* tabel  */

.providers-table {
    width: 100%;
    border-collapse: collapse;
}

.providers-table th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border);
}

.providers-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.providers-table tr:hover {
    background: var(--bg-hover);
}

.provider-name {
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.provider-name a {
    color: inherit;
}

.provider-name a:hover {
    color: var(--accent);
}

.verified-badge {
    color: var(--green);
    font-size: 14px;
}

.provider-category {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--bg-alt);
    color: var(--text-sec);
}

.provider-coverage {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.cov-chip {
    font-size: 9px;
    font-weight: 600;
    padding: 3px 7px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 3px;
}

.provider-count {
    font-weight: 600;
    color: var(--text);
}

.provider-nrs {
    font-weight: 700;
}

.provider-link {
    color: var(--accent);
    font-size: 16px;
}

.az-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.az-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-sec);
    cursor: pointer;
    transition: all .15s;
}

.az-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.az-btn.disabled {
    opacity: .3;
    cursor: default;
}

.az-section {
    margin-bottom: 24px;
}

.az-letter {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}

.az-list {
    display: flex;
    flex-direction: column;
}

.az-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}

.az-item:last-child {
    border-bottom: none;
}

.az-item a {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.az-item a:hover {
    color: var(--accent);
}

.az-item-cat {
    font-size: 11px;
    color: var(--text-muted);
}

/*************
* METHODOLOGY*
**************/

/* .static-page {
            min-height: calc(100vh - 56px - 80px);
            padding: 24px 0 48px;
        }

        .static-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .page-header {
            margin-bottom: 32px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--border, #e5e7eb);
        }

        .page-header h1 {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .page-subtitle {
            font-size: 16px;
            color: var(--text-sec, #6b7280);
        }

        .content-article {
            line-height: 1.7;
        }

        .content-section {
            margin-bottom: 36px;
        }

        .content-section h2 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .content-section h2 i {
            color: var(--accent, #FA6A2A);
        }

        .content-section p {
            margin-bottom: 12px;
            color: var(--text, #111827);
        }

        .content-section ul {
            padding-left: 20px;
            margin-bottom: 12px;
        }

        .content-section li {
            margin-bottom: 8px;
        } */

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.card.tier-card ul.custom-list {
    padding-left: 0;
}

.card.tier-card ul.custom-list li {
    padding-left: 25px;
}

.card.tier-card ul.custom-list li::before {
    width: 18px;
    height: 18px;
    top: 4px;
}

.tier-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}


.tier-a .tier-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.tier-b .tier-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.tier-c .tier-badge {
    background: rgba(156, 163, 175, 0.15);
    color: #6b7280;
}



/* .tier-card li {
            margin-bottom: 4px;
        } */

.nrs-explainer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.nrs-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-alt, #f9fafb);
}

.nrs-badge {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
}

/* .nrs-badge.high {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .nrs-badge.medium {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        .nrs-badge.low {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        } */

/* .nrs-item strong {
            display: block;
            font-size: 13px;
            margin-bottom: 2px;
        } */

/* .nrs-item p {
            font-size: 12px;
            color: var(--text-sec, #6b7280);
            margin: 0;
        } */

.text-link {
    color: var(--accent, #FA6A2A);
    font-weight: 500;
}

.text-link:hover {
    text-decoration: underline;
}




/*************
* WEEK AHEAD*
**************/
/* .archive-header {
            padding: 32px 24px;
            border-bottom: 1px solid var(--border);
        }

        .archive-header-inner {
            max-width: 1100px;
            margin: 0 auto;
        }

        .archive-h1 {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .archive-sub {
            font-size: 14px;
            color: var(--text-sec);
        }

        .archive-main {
            max-width: 1100px;
            margin: 0 auto;
            padding: 24px;
            display: flex;
            gap: 32px;
        } */

/* .archive-calendar {
            width: 280px;
            flex-shrink: 0;
        } */

/* .archive-results {
            flex: 1;
        } */

/* .calendar-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        } */

/* .calendar-month {
            font-size: 15px;
            font-weight: 700;
        } */

/* .calendar-arrows {
            display: flex;
            gap: 8px;
        } */

/* .calendar-arrows button {
            width: 30px;
            height: 30px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .calendar-arrows button:hover {
            border-color: var(--accent);
            color: var(--accent);
        } */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 0;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: all .15s;
}

.calendar-day:hover {
    background: var(--bg-hover);
}

.calendar-day.today {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 700;
}

.calendar-day.selected {
    background: var(--accent);
    color: #fff;
}

.calendar-day.has-stories::after {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
}

.calendar-day.other-month {
    color: var(--text-muted);
    opacity: .5;
}

.quick-filters {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.quick-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.quick-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-sec);
    cursor: pointer;
    transition: all .15s;
}

.quick-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-dark);
}

.quick-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.results-title {
    font-size: 14px;
    font-weight: 600;
}

.results-count {
    font-size: 12px;
    color: var(--text-muted);
}

.archive-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.archive-filters select,
.archive-filters input {
    padding: 8px 12px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font);
}

.archive-filters input {
    flex: 1;
    min-width: 200px;
}

.archive-table {
    width: 100%;
}

.archive-table th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border);
}

.archive-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.archive-table tr:hover {
    background: var(--bg-hover);
}

.archive-table a {
    color: var(--text);
    font-weight: 500;
}

.archive-table a:hover {
    color: var(--accent);
}

.date-group {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 12px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.pagination button {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    cursor: pointer;
}

.pagination button:hover {
    border-color: var(--bs-dark);
    color: var(--bs-dark);
}

.pagination button.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.interlinks {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.interlinks-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.interlinks-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.interlinks-grid a {
    font-size: 12px;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 6px;
}

.interlinks-grid a:hover {
    color: var(--accent);
}

@media (max-width: 768px) {
    .archive-main {
        flex-direction: column;
    }

    .archive-calendar {
        width: 100%;
    }
}



/*************
* MEDIA QUERY*
**************/
@media(max-width:768px) {
    .main-banner.inner {
        padding: 12rem 0 4rem;
    }

    .trap-box,
    .nrs-reason,
    .bottom-line-box,
    .beginner-box,
    .content-list li,
    .vera-quote,
    .point-box {
        line-height: 28px;
    }
}