/* ==========================================================================
   Site chrome: utility bar, navigation, hero slider, market summary.
   Loaded after the theme files so every identity can restyle these without
   fighting the base sheet. Colours come from the existing theme variables, so
   a theme switch changes this furniture too.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Utility bar — the thin strip above the navigation
   -------------------------------------------------------------------------- */
.topbar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8rem;
    position: relative;
    z-index: 1002;
}

.topbar-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.topbar-inner::-webkit-scrollbar {
    display: none;
}

.topbar-cluster {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.18s, background 0.18s;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.topbar-item:hover { color: var(--text-highlight); background: var(--bg-elevated); }
.topbar-item i { font-size: 0.85rem; opacity: 0.85; }

.topbar-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: #fff;
}

.topbar-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.76rem;
    border: 1px solid transparent;
    white-space: nowrap;
}

.topbar-status.is-open { color: var(--bullish-green); background: var(--bullish-bg); border-color: var(--bullish-border); }
.topbar-status.is-closed { color: var(--gold-accent); background: var(--gold-bg); border-color: var(--gold-border); }

/* The live dot: a filled core with a halo, matching the market state. */
.topbar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.topbar-status.is-open .topbar-dot { background: var(--bullish-green); }
.topbar-status.is-closed .topbar-dot { background: var(--gold-accent); }

.topbar-status.is-open .topbar-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--bullish-green);
    animation: topbarPulse 2s ease-out infinite;
}

@keyframes topbarPulse {
    0%   { transform: scale(0.7); opacity: 0.9; }
    100% { transform: scale(2.1); opacity: 0; }
}

.topbar-clock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.topbar-clock b { color: var(--text-highlight); font-weight: 800; }

.topbar-date-val {
    color: var(--text-highlight);
    font-weight: 700;
    white-space: nowrap;
}

.topbar-clock-sep {
    color: var(--border-color);
    margin: 0 3px;
    opacity: 0.6;
    display: inline-block;
}

/* The clock is a live figure, so it is marked as such for assistive tech. */
.topbar-clock[aria-live="off"] { font-variant-numeric: tabular-nums; }

.topbar-links {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.topbar-widgets {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* TopBar Social Media Buttons - Compact, Institutional & Elegant */
.topbar-social-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.tb-social-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    color: var(--text-secondary);
    background: var(--bg-elevated, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    flex-shrink: 0;
}

.tb-social-btn:hover {
    transform: translateY(-1.5px);
}

.tb-social-btn.tb-fb:hover {
    color: #fff;
    border-color: #1877f2;
    background: #1877f2;
    box-shadow: 0 0 10px rgba(24, 119, 242, 0.5);
}

.tb-social-btn.tb-yt:hover {
    color: #fff;
    border-color: #ff0000;
    background: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.tb-social-btn.tb-tt:hover {
    color: #00f2fe;
    border-color: #00f2fe;
    background: #050505;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
    text-shadow: 1px 1px 0 #fe2c55, -1px -1px 0 #00f2fe;
}

.tb-social-btn.tb-tg:hover {
    color: #fff;
    border-color: #24a1de;
    background: #24a1de;
    box-shadow: 0 0 10px rgba(36, 161, 222, 0.5);
}

.tb-social-btn.tb-tw:hover {
    color: #fff;
    border-color: #fff;
    background: #000;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.topbar-widget-sep {
    width: 1px;
    height: 15px;
    background: var(--border-color);
    margin: 0 3px;
    opacity: 0.6;
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .tb-social-btn {
        width: 22px;
        height: 22px;
        font-size: 0.68rem;
    }
    .topbar-social-group {
        gap: 3px;
    }
}

@media (max-width: 900px) {
    /* Hide the 6 dense links from the mobile top strip; they are in .nav-drawer */
    .topbar-links {
        display: none !important;
    }

    .topbar-inner {
        min-height: 36px;
        padding: 0 14px;
        width: 100%;
        justify-content: space-between !important;
    }

    .topbar-widgets {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 8px;
    }

    .topbar {
        font-size: 0.76rem;
    }

    .topbar-status {
        padding: 4px 10px;
        font-size: 0.74rem;
    }

    .topbar-clock {
        font-size: 0.74rem;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .topbar-inner {
        padding: 0 10px;
    }

    .topbar-status {
        padding: 3px 8px;
        font-size: 0.72rem;
        gap: 5px;
    }

    .topbar-clock {
        font-size: 0.72rem;
        gap: 5px;
    }

    .topbar-clock .topbar-clock-lbl {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   2. Price ticker — a strip of live values scrolling in reading order
   -------------------------------------------------------------------------- */
.ticker-strip {
    position: relative;
    z-index: 10;
    /* Sits one step below the page so it reads as a distinct band, and follows
       the active mode. A hard-coded dark value here left a black bar across a
       light page. */
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    height: 34px;
}

.ticker-strip-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-highlight);
    background: var(--bg-surface);
    border-inline-end: 1px solid var(--border-color);
    z-index: 2;
}

.ticker-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Fade the strip into the edges instead of cutting it hard. */
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.ticker-track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    /* RTL: the track starts on the right and travels leftwards. */
    animation: tickerScroll var(--ticker-duration, 60s) linear infinite;
    will-change: transform;
}

.ticker-strip:hover .ticker-track,
.ticker-strip.is-paused .ticker-track { animation-play-state: paused; }

/* The track holds exactly two identical halves, so travelling 50% loops
   seamlessly with no visible jump. */
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

/* In RTL the whole strip is mirrored so the reading order stays natural. */
[dir="rtl"] .ticker-track { animation-name: tickerScrollRtl; }

@keyframes tickerScrollRtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

.ticker-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 34px;
    font-size: var(--ticker-px, 10px);
    border-inline-end: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
}

.ticker-cell:hover { background: var(--bg-elevated); }

/* Change first, then the price, then the symbol — the reference order. */
.ticker-change {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 1.05em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}

.ticker-cell.up   .ticker-change { color: var(--bullish-green); }
.ticker-cell.down .ticker-change { color: var(--bearish-red); }
.ticker-cell.flat .ticker-change { color: var(--text-muted); }

.ticker-price {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text-highlight);
    font-variant-numeric: tabular-nums;
}

.ticker-name {
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

/* A brief flash when a value actually changes, so motion means something. */
.ticker-cell.tick-up   { animation: tickUp 1.1s ease-out; }
.ticker-cell.tick-down { animation: tickDown 1.1s ease-out; }

@keyframes tickUp {
    0%   { background: rgba(34, 197, 94, 0.22); }
    100% { background: transparent; }
}

@keyframes tickDown {
    0%   { background: rgba(239, 68, 68, 0.22); }
    100% { background: transparent; }
}

@media (max-width: 520px) {
    .ticker-strip-label span { display: none; }
    .ticker-strip-label { padding: 0 10px; }
    .ticker-cell { padding: 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .ticker-cell.tick-up, .ticker-cell.tick-down { animation: none; }
}

/* --------------------------------------------------------------------------
   3. Hero slider
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    /* A fixed aspect keeps the slide from collapsing before the image loads. */
    min-height: clamp(320px, 46vh, 520px);
    overflow: hidden;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
}

.hero-track {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0.7s;
    display: flex;
    align-items: center;
}

.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: transform 8s ease-out;
}

.hero-slide.is-active .hero-media { transform: scale(1); }

/* A slide with no image gets a designed gradient rather than a blank box. */
.hero-media.is-empty {
    background:
        radial-gradient(1200px 500px at 78% 18%, rgba(255, 183, 3, 0.16), transparent 62%),
        radial-gradient(900px 460px at 20% 82%, rgba(0, 210, 255, 0.12), transparent 60%),
        linear-gradient(135deg, #0b1220 0%, #101a2e 52%, #0a0f18 100%);
}

.hero-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-shade.side-start {
    background: linear-gradient(to left, rgba(4, 7, 12, 0.95) 0%, rgba(4, 7, 12, 0.72) 34%, rgba(4, 7, 12, 0.12) 62%, transparent 100%);
}

.hero-shade.side-end {
    background: linear-gradient(to right, rgba(4, 7, 12, 0.95) 0%, rgba(4, 7, 12, 0.72) 34%, rgba(4, 7, 12, 0.12) 62%, transparent 100%);
}

.hero-shade.side-none { background: rgba(4, 7, 12, 0.35); }

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 60px);
    display: flex;
    justify-content: flex-start;
}

.hero-panel { max-width: 620px; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.hero-badge i { color: var(--gold-accent); }

.hero-title {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    font-weight: 900;
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.hero-sub {
    margin: 0 0 8px;
    font-size: clamp(0.95rem, 1.5vw, 1.12rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.hero-body {
    margin: 0 0 22px;
    font-size: 0.94rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.76);
    max-width: 560px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--gold-accent);
    color: #14100a;
    font-weight: 900;
    font-size: 0.94rem;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(255, 183, 3, 0.28);
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}

.hero-cta:hover {
    color: #14100a;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(255, 183, 3, 0.38);
    filter: brightness(1.05);
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(6, 10, 18, 0.5);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.hero-arrow:hover { background: rgba(255, 183, 3, 0.92); color: #14100a; border-color: transparent; }
.hero-arrow.prev { inset-inline-end: 18px; }
.hero-arrow.next { inset-inline-start: 18px; }
.hero-arrow.prev:hover, .hero-arrow.next:hover { transform: translateY(-50%) scale(1.06); }

/* Dots double as a progress bar: the active pill fills over the slide time. */
.hero-dots {
    position: absolute;
    bottom: 22px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.32);
    transition: width 0.3s, background 0.3s;
}

.hero-dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero-dot.is-active { width: 34px; background: var(--gold-accent); }

@media (max-width: 640px) {
    .hero { min-height: 300px; }
    .hero-arrow { width: 38px; height: 38px; font-size: 0.9rem; }
    .hero-arrow.prev { inset-inline-end: 10px; }
    .hero-arrow.next { inset-inline-start: 10px; }
    .hero-dots { bottom: 14px; }
    .hero-body { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .hero-media, .hero-slide.is-active .hero-media { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   4. Market summary — a panel that overlaps the foot of the slider
   -------------------------------------------------------------------------- */
.summary-wrap {
    max-width: 1600px;
    margin: -46px auto 0;
    padding: 0 clamp(16px, 3vw, 40px);
    position: relative;
    z-index: 6;
}

.summary {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius, 18px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-elevated);
}

.summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text-highlight);
}

.summary-title i { color: var(--gold-accent); }

.summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    color: var(--gold-accent);
    font-size: 0.74rem;
    font-weight: 800;
}

.summary-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    /* Surface-coloured, not divider-coloured: a row that is not full would
       otherwise paint its empty cells as a solid divider block. */
    background: var(--bg-surface);
    gap: 1px;
}

.summary-card {
    background: var(--bg-surface);
    /* An inset hairline draws the divider without shifting the layout, so the
       grid stays stable as cards are added or removed. */
    box-shadow: inset 0 0 0 1px var(--border-color);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background 0.2s;
}

.summary-card:hover { background: var(--bg-elevated); }

.summary-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.summary-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-secondary);
    line-height: 1.5;
}

.summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--cyan-accent);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.summary-value-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.summary-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    font-weight: 800;
    color: var(--gold-accent);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.summary-unit {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.summary-unavailable {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-muted);
}

.summary-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.summary-change.up { color: var(--bullish-green); }
.summary-change.down { color: var(--bearish-red); }

/* The chevron reveals the breakdown; the card is a button so it works by
   keyboard without extra wiring. */
.summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 0 0;
    margin-top: auto;
    border: none;
    border-top: 1px dashed var(--border-color);
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    text-align: start;
}

.summary-toggle:hover { color: var(--text-highlight); }
.summary-toggle:focus-visible { outline: 2px solid var(--cyan-accent); outline-offset: 3px; border-radius: 4px; }
.summary-toggle i { transition: transform 0.25s; }
.summary-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.summary-breakdown {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.summary-breakdown.is-open { display: flex; }

.summary-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.summary-row code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--cyan-accent);
    font-size: 0.74rem;
    flex-shrink: 0;
    min-width: 46px;
}

.summary-row .name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-row .val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text-highlight);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.summary-row .chg { font-family: 'JetBrains Mono', monospace; font-weight: 800; min-width: 54px; text-align: end; }
.summary-row .chg.up { color: var(--bullish-green); }
.summary-row .chg.down { color: var(--bearish-red); }
.summary-row .chg.flat { color: var(--text-muted); }

.summary-foot {
    padding: 11px 20px;
    font-size: 0.74rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-foot i { color: var(--cyan-accent); }

/* When there is no slider above it, the panel should not float in space. */
.summary-wrap.no-hero { margin-top: 18px; }

@media (max-width: 640px) {
    .summary-wrap { margin-top: -28px; }
    .summary-value { font-size: 1.35rem; }
    .summary-head { padding: 13px 15px; }
    .summary-card { padding: 14px 13px; }
}

/* A utility entry that carries only a pill has no label to align. */
.topbar-item.is-badge-only { padding-inline-end: 4px; }

/* ==========================================================================
   4. Main Navbar - Master Navigation & VIP Flagship Styling
   ========================================================================== */
.navbar-start {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.desktop-only-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.desktop-only-nav .nav-item-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--radius-md, 8px);
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
}

.desktop-only-nav .nav-item-link:hover {
    color: var(--text-highlight);
    background: var(--bg-card);
    border-color: var(--border-color);
}

.desktop-only-nav .nav-item-link.active {
    color: var(--cyan-accent);
    background: rgba(0, 210, 255, 0.08);
    border-color: rgba(0, 210, 255, 0.25);
}

.nav-dropdown-arrow {
    font-size: 0.72rem;
    margin-right: 2px;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-dropdown-wrapper:hover .nav-dropdown-arrow,
.nav-dropdown-wrapper.open .nav-dropdown-arrow {
    transform: rotate(180deg);
    color: var(--cyan-accent);
}

/* Flagship What-To-Buy VIP Button (Desktop) */
.wtb-navbar-flagship-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.55);
    border-radius: 999px;
    color: #fbbf24 !important;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);
}

.wtb-navbar-flagship-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.32), rgba(217, 119, 6, 0.2));
    border-color: #f59e0b;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.45);
    transform: translateY(-1.5px);
}

.wtb-navbar-flagship-btn.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #07090e !important;
    border-color: #fbbf24;
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.6);
}

.wtb-flagship-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
    animation: wtbPulse 2s infinite ease-in-out;
}

@keyframes wtbPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.7; box-shadow: 0 0 12px #fbbf24; }
}

.wtb-flagship-badge {
    font-size: 0.62rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f59e0b;
    color: #07090e;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
    line-height: 1.2;
}

/* Mobile Quick VIP Button */
.wtb-mobile-quick-btn {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 999px;
    color: #f59e0b;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
    transition: all 0.2s ease;
}

.wtb-mobile-quick-btn:hover,
.wtb-mobile-quick-btn.active {
    background: rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: #ffffff;
}

/* Off-canvas Drawer Styles */
.nav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--topbar-h, 36px);
    height: calc(100% - var(--topbar-h, 36px));
    right: 0;
    bottom: 0;
    width: clamp(290px, 86vw, 380px);
    max-width: 100%;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1200;
}

body.nav-open .nav-drawer {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.drawer-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
}

.drawer-site-name {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text-highlight);
    letter-spacing: -0.3px;
}

.drawer-user-card {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.015);
}

.drawer-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.drawer-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cyan-accent);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.25);
}

.drawer-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-user-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-highlight);
}

.drawer-user-role {
    font-size: 0.75rem;
    color: var(--cyan-accent);
    font-weight: 600;
}

.drawer-user-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.drawer-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s ease;
}

.drawer-quick-btn:hover {
    color: var(--text-highlight);
    border-color: var(--cyan-accent);
    background: rgba(0, 210, 255, 0.08);
}

.drawer-quick-btn.danger:hover {
    color: var(--bearish-red);
    border-color: var(--bearish-border);
    background: var(--bearish-bg);
}

.drawer-guest-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawer-guest-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-highlight);
}

.drawer-guest-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.drawer-guest-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* Drawer VIP Highlight Card */
.drawer-vip-card {
    margin: 12px 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.45);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
    transition: all 0.22s ease;
}

.drawer-vip-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
    transform: translateY(-1px);
}

.drawer-vip-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07090e;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.drawer-vip-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-vip-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.drawer-vip-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #fbbf24;
}

.drawer-vip-sub {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-vip-arrow {
    color: #f59e0b;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Drawer Nav Menu & Accordion */
.drawer-nav-menu {
    flex: 1;
    padding: 8px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drawer-menu-heading {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-muted);
    padding: 8px 6px 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.drawer-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    transition: all 0.18s ease;
    border: 1px solid transparent;
}

.drawer-nav-link:hover,
.drawer-nav-link.active {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--cyan-accent);
}

.drawer-nav-icon {
    width: 24px;
    text-align: center;
    font-size: 1rem;
    color: var(--cyan-accent);
    flex-shrink: 0;
}

.drawer-nav-label {
    flex: 1;
}

.drawer-nav-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

/* Drawer Accordion Item */
.drawer-accordion-item {
    border-radius: 10px;
    overflow: hidden;
    transition: background 0.2s ease;
    border: 1px solid transparent;
}

.drawer-accordion-item.open {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--border-color);
}

.drawer-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: right;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.18s ease;
}

.drawer-accordion-btn:hover {
    background: var(--bg-card);
}

.drawer-accordion-chevron {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    margin-right: auto;
    margin-left: 0;
}

.drawer-accordion-item.open .drawer-accordion-chevron {
    transform: rotate(180deg);
    color: var(--cyan-accent);
}

.drawer-accordion-content {
    display: none;
    padding: 4px 10px 10px 14px;
    flex-direction: column;
    gap: 3px;
    animation: drawerAccSlide 0.22s ease-out;
}

.drawer-accordion-item.open .drawer-accordion-content {
    display: flex;
}

@keyframes drawerAccSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.drawer-sub-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.16s ease;
}

.drawer-sub-link:hover,
.drawer-sub-link.active {
    color: var(--text-highlight);
    background: rgba(0, 210, 255, 0.06);
}

.drawer-sub-link i {
    font-size: 0.88rem;
    width: 18px;
    text-align: center;
}

.drawer-indices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
    padding: 4px 2px;
}

.drawer-idx-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: all 0.18s ease;
}

.drawer-idx-chip:hover {
    border-color: var(--cyan-accent);
    background: rgba(0, 210, 255, 0.08);
}

.drawer-idx-chip b {
    font-family: var(--font-mono, monospace);
    color: var(--cyan-accent);
    font-size: 0.78rem;
}

/* Drawer Footer */
.drawer-footer-sec {
    padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.drawer-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.drawer-credit {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    direction: ltr !important;
}

.drawer-credit a {
    color: var(--cyan-accent);
    font-weight: 800;
    text-decoration: none;
    font-family: var(--font-mono, monospace);
}