/* ==========================================================================
   EGXHUB - Financial Cyber Terminal Design System
   Bloomberg / TradingView Aesthetic with High-Performance Dark & Light Modes
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Tajawal:wght@300;400;500;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Color Palette - Cyber Dark Terminal (Default) */
    --bg-base: #07090e;
    --bg-surface: #0e131f;
    --bg-card: #131929;
    --bg-card-hover: #192137;
    --bg-input: #0a0d16;
    --bg-glass: rgba(19, 25, 41, 0.75);
    
    --border-color: #1e2840;
    --border-highlight: #2c3a5e;
    --border-glow: rgba(0, 210, 255, 0.3);

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-highlight: #ffffff;

    --bullish-green: #00e676;
    --bullish-bg: rgba(0, 230, 118, 0.12);
    --bullish-border: rgba(0, 230, 118, 0.3);
    --bullish-glow: 0 0 16px rgba(0, 230, 118, 0.25);

    --bearish-red: #ff3366;
    --bearish-bg: rgba(255, 51, 102, 0.12);
    --bearish-border: rgba(255, 51, 102, 0.3);
    --bearish-glow: 0 0 16px rgba(255, 51, 102, 0.25);

    --gold-accent: #ffb703;
    --gold-bg: rgba(255, 183, 3, 0.12);
    --gold-border: rgba(255, 183, 3, 0.35);
    --gold-glow: 0 0 16px rgba(255, 183, 3, 0.25);

    --cyan-accent: #00d2ff;
    --cyan-bg: rgba(0, 210, 255, 0.12);
    --cyan-border: rgba(0, 210, 255, 0.3);

    --purple-accent: #a855f7;

    --font-ar: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Inter', monospace;

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 0 25px rgba(0, 210, 255, 0.15);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

    /* ---- Universal search widget --------------------------------------
       These exist because the widget used to hard-code dark surfaces, which
       left it as a dark box on a light page. Every value here is restated for
       light mode below, so the widget follows the active theme and mode
       instead of carrying its own palette. */
    --search-card-bg: linear-gradient(135deg, rgba(14, 19, 31, 0.95), rgba(19, 25, 41, 0.92));
    --search-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 210, 255, 0.08);
    --search-card-shadow-focus: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 28px rgba(0, 210, 255, 0.18);
    --search-input-bg: rgba(7, 9, 14, 0.85);
    --search-input-bg-focus: rgba(10, 13, 22, 0.95);
    --search-btn-bg: rgba(255, 255, 255, 0.05);
    --search-btn-bg-hover: rgba(255, 255, 255, 0.1);
    --search-panel-bg: rgba(11, 15, 26, 0.97);
    --search-panel-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(0, 210, 255, 0.2);
    --search-row-bg: rgba(255, 255, 255, 0.03);
}

/* Light mode, keyed on data-theme-mode.

   This used to read [data-theme="light"], which never matched anything: the
   layout writes the family into data-theme (terminal / onyx / aurora / gold)
   and the mode into data-theme-mode. As a result the terminal family kept its
   dark palette in light mode, and any light surface layered on top came out as
   light-on-light. Per-family light blocks such as
   [data-theme="onyx"][data-theme-mode="light"] are more specific, so the
   families that define their own light palette still win. */
[data-theme-mode="light"] {
    --bg-base: #f4f6fa;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-input: #edf2f7;
    --bg-glass: rgba(255, 255, 255, 0.9);

    --border-color: #e2e8f0;
    --border-highlight: #cbd5e1;
    --border-glow: rgba(0, 163, 255, 0.2);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-highlight: #000000;

    --bullish-green: #059669;
    --bullish-bg: rgba(5, 150, 105, 0.1);
    --bullish-border: rgba(5, 150, 105, 0.25);

    --bearish-red: #e11d48;
    --bearish-bg: rgba(225, 29, 72, 0.1);
    --bearish-border: rgba(225, 29, 72, 0.25);

    --gold-accent: #d97706;
    --gold-bg: rgba(217, 119, 6, 0.1);
    --gold-border: rgba(217, 119, 6, 0.3);

    --cyan-accent: #0284c7;
    --cyan-bg: rgba(2, 132, 199, 0.1);
    --cyan-border: rgba(2, 132, 199, 0.25);

    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Light mode for the search widget, for every theme family at once.

   This is keyed on data-theme-mode rather than data-theme on purpose: the
   layout writes the family into data-theme (terminal / onyx / aurora / gold) and
   the mode into data-theme-mode, so a [data-theme="light"] selector never
   matches anything. One rule here therefore covers all four families instead of
   needing the same override pasted into each theme file. */
[data-theme-mode="light"] {
    --search-card-bg: linear-gradient(135deg, #ffffff, #f7f9fc);
    --search-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
    --search-card-shadow-focus: 0 12px 32px rgba(15, 23, 42, 0.12), 0 0 0 3px rgba(2, 132, 199, 0.12);
    --search-input-bg: #ffffff;
    --search-input-bg-focus: #ffffff;
    --search-btn-bg: rgba(15, 23, 42, 0.05);
    --search-btn-bg-hover: rgba(15, 23, 42, 0.09);
    --search-panel-bg: #ffffff;
    --search-panel-shadow: 0 14px 40px rgba(15, 23, 42, 0.16);
    --search-row-bg: rgba(15, 23, 42, 0.03);
}

/* Base Setup */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-ar);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

input, button, select, textarea {
    font-family: inherit;
    border: none;
    outline: none;
}

/* Numbers & Ticker styling */
.num-mono, .ticker-code, .price-val {
    font-family: var(--font-mono);
    direction: ltr;
    display: inline-block;
}

/* ==========================================================================
   TOP TICKER BAR (Live Marquee)
   ========================================================================== */
.ticker-bar-wrapper {
    background: #05070a;
    border-bottom: 1px solid var(--border-color);
    height: 38px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.ticker-pulse-label {
    background: linear-gradient(135deg, #101524, #192137);
    color: var(--cyan-accent);
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    border-left: 1px solid var(--border-color);
    white-space: nowrap;
    z-index: 2;
}

.live-dot {
    width: 8px;
    height: 8px;
    background-color: var(--bullish-green);
    border-radius: 50%;
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); }
    70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px rgba(0, 230, 118, 0); }
    100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

.ticker-marquee-track {
    display: flex;
    gap: 28px;
    white-space: nowrap;
    animation: marqueeScroll 45s linear infinite;
    padding-left: 20px;
}

.ticker-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ticker-item .name {
    color: var(--text-secondary);
}

.ticker-item.up {
    color: var(--bullish-green);
}

.ticker-item.down {
    color: var(--bearish-red);
}

/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */
.main-navbar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    height: 68px;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0 clamp(16px, 2vw, 36px);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo-glow {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--cyan-accent), #3b82f6);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
}

.brand-title {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #ffffff;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    direction: ltr !important;
    unicode-bidi: isolate;
}

[data-theme-mode="light"] .brand-title {
    color: var(--text-primary);
}

.brand-name {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    direction: ltr !important;
    unicode-bidi: isolate;
}

.brand-title span,
.brand-name span {
    color: var(--cyan-accent);
}

.brand-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    background: var(--gold-bg);
    color: var(--gold-accent);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-item-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.nav-item-link i {
    font-size: 0.9rem;
}

.nav-item-link:hover, .nav-item-link.active {
    color: var(--text-highlight);
    background: var(--bg-card);
}

.nav-item-link.active {
    color: var(--cyan-accent);
    border-bottom: 2px solid var(--cyan-accent);
}

/* Search Input */
.nav-search-box {
    position: relative;
    width: 260px;
}

.nav-search-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    padding: 8px 38px 8px 16px;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.nav-search-input:focus {
    border-color: var(--cyan-accent);
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.15);
}

.nav-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* User & Action Buttons */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
    color: var(--gold-accent);
    border-color: var(--gold-border);
}

.btn-primary-glow {
    background: linear-gradient(135deg, #0284c7, #00d2ff);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 18px;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 210, 255, 0.3);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary-glow:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 210, 255, 0.45);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-outline:hover {
    border-color: var(--text-secondary);
    background: var(--bg-card);
}

.user-nav-dropdown {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.user-nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cyan-accent);
}

/* ==========================================================================
   LAYOUT STRUCTURE (Grid Layout)
   ========================================================================== */
.terminal-layout {
    max-width: 1480px;
    margin: 24px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 260px 1fr 340px;
    gap: 24px;
}

@media (max-width: 1200px) {
    .terminal-layout {
        grid-template-columns: 240px 1fr;
    }
    .right-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .terminal-layout {
        grid-template-columns: 1fr;
    }
    .left-sidebar {
        display: none;
    }
    .nav-links {
        display: none;
    }
}

/* ==========================================================================
   CARDS & SURFACES
   ========================================================================== */
.terminal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.terminal-card:hover {
    border-color: var(--border-highlight);
    box-shadow: var(--shadow-md);
}

.terminal-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-highlight);
}

/* ==========================================================================
   FEED & POST BOX
   ========================================================================== */
.post-creation-card {
    background: linear-gradient(180deg, var(--bg-surface), var(--bg-card));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    border-top: 2px solid rgba(0, 210, 255, 0.35);
    position: relative;
    z-index: 5;
}

/* Hero Header for Post Creator */
.post-card-hero-header {
    margin: -4px -4px 16px -4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.hero-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.hero-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pulse-indicator-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid rgba(0, 210, 255, 0.25);
    color: var(--cyan-accent);
    font-size: 0.76rem;
    font-weight: 700;
}

.live-dot-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan-accent);
    box-shadow: 0 0 8px var(--cyan-accent);
    animation: livePulseDot 1.8s infinite ease-in-out;
}

@keyframes livePulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.4; }
}

.hero-main-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--text-highlight);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-actions-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-refresh-quote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-refresh-quote:hover {
    color: var(--cyan-accent);
    border-color: var(--cyan-accent);
    background: rgba(0, 210, 255, 0.08);
    transform: translateY(-1px);
}

.leaderboard-perk-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-pill);
    color: var(--gold-accent);
    font-size: 0.76rem;
    font-weight: 700;
}

/* Motivational Quote Banner */
.motivational-quote-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.05) 0%, rgba(16, 185, 129, 0.04) 50%, rgba(245, 158, 11, 0.04) 100%);
    border: 1px dashed rgba(0, 210, 255, 0.25);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.motivational-quote-bar:hover {
    border-style: solid;
    border-color: rgba(0, 210, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 210, 255, 0.08);
}

.quote-icon-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 210, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan-accent);
    font-size: 0.95rem;
}

.quote-content {
    flex-grow: 1;
    min-width: 0;
}

.quote-text-animated {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-highlight);
    line-height: 1.5;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.quote-text-animated.fade-out {
    opacity: 0;
    transform: translateY(-4px);
}

.guest-post-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 10px;
}

.post-input-textarea {
    width: 100%;
    min-height: 90px;
    background: transparent;
    border: none;
    resize: vertical;
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.post-input-textarea::placeholder {
    color: var(--text-muted);
}

.post-tools-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 12px;
}

.post-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sentiment-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-base);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.sentiment-pill.bullish.active, .sentiment-pill.bullish:hover {
    background: var(--bullish-bg);
    color: var(--bullish-green);
    border-color: var(--bullish-border);
}

.sentiment-pill.bearish.active, .sentiment-pill.bearish:hover {
    background: var(--bearish-bg);
    color: var(--bearish-red);
    border-color: var(--bearish-border);
}

.prediction-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--cyan-bg);
    color: var(--cyan-accent);
    border: 1px solid var(--cyan-border);
    transition: all 0.2s ease;
}

.prediction-toggle-btn:hover {
    background: rgba(0, 210, 255, 0.2);
}

.prediction-form-panel {
    background: var(--bg-surface);
    border: 1px solid var(--cyan-border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.pred-field-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 4px;
}

.pred-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

/* Feed Tabs */
.feed-tabs-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    background: var(--bg-surface);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    width: fit-content;
}

.feed-tab-btn {
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    background: transparent;
    transition: all 0.2s ease;
}

.feed-tab-btn.active {
    background: var(--bg-card);
    color: var(--cyan-accent);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   POST CARD & PREDICTION BADGE
   ========================================================================== */
.post-item-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 18px;
    transition: all 0.2s ease;
}

.post-item-card:hover {
    border-color: var(--border-highlight);
}

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

.author-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.author-names {
    display: flex;
    flex-direction: column;
}

.display-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-display-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-highlight);
}

.badge-analyst {
    background: var(--gold-bg);
    color: var(--gold-accent);
    border: 1px solid var(--gold-border);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
}

.author-username {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.accuracy-stat-chip {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(0, 230, 118, 0.1);
    color: var(--bullish-green);
    border: 1px solid rgba(0, 230, 118, 0.2);
}

.post-content-body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 16px;
    word-break: break-word;
}

/* Rich entity chips */
.stock-ticker-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--cyan-bg);
    color: var(--cyan-accent);
    border: 1px solid var(--cyan-border);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin: 0 4px;
}

.stock-ticker-chip:hover {
    background: var(--cyan-accent);
    color: #000000;
}

.user-mention-chip {
    color: var(--cyan-accent);
    font-weight: 700;
    font-family: var(--font-mono);
}

.hashtag-chip {
    color: var(--purple-accent);
    font-weight: 700;
}

/* Prediction Showcase Card */
.prediction-box {
    background: linear-gradient(135deg, rgba(14, 19, 31, 0.95), rgba(19, 25, 41, 0.95));
    border: 1px solid var(--border-color);
    border-right: 4px solid var(--cyan-accent);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

.prediction-box.bullish {
    border-right-color: var(--bullish-green);
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.05), rgba(19, 25, 41, 0.95));
}

.prediction-box.bearish {
    border-right-color: var(--bearish-red);
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.05), rgba(19, 25, 41, 0.95));
}

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

.pred-stock-title {
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-badge {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 800;
}

.status-badge.pending {
    background: rgba(255, 183, 3, 0.15);
    color: var(--gold-accent);
    border: 1px solid var(--gold-border);
}

.status-badge.achieved {
    background: var(--bullish-bg);
    color: var(--bullish-green);
    border: 1px solid var(--bullish-border);
}

.status-badge.failed {
    background: var(--bearish-bg);
    color: var(--bearish-red);
    border: 1px solid var(--bearish-border);
}

.pred-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    background: var(--bg-surface);
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.metric-col {
    display: flex;
    flex-direction: column;
}

.metric-col .label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
}

.metric-col .val {
    font-size: 0.95rem;
    font-weight: 800;
    font-family: var(--font-mono);
}

/* Post Actions Footer */
.post-footer-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: inherit;
}

.action-btn:hover, .action-btn.liked {
    color: var(--bullish-green);
}

.action-btn.comment:hover {
    color: var(--cyan-accent);
}

/* ==========================================================================
   PAPER TRADING DASHBOARD & STOCKS
   ========================================================================== */
.stats-banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-metric-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.stat-metric-card .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-highlight);
}

.stat-metric-card.profit .stat-value {
    color: var(--bullish-green);
}

.stat-metric-card.loss .stat-value {
    color: var(--bearish-red);
}

/* Financial Tables */
.terminal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.terminal-table th {
    padding: 12px 14px;
    text-align: right;
    color: var(--text-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8rem;
}

.terminal-table td {
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.terminal-table tr:hover td {
    background: var(--bg-card-hover);
}

/* Modal Windows */
.terminal-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.terminal-modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.terminal-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 520px;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: transform 0.25s ease;
}

.terminal-modal-backdrop.open .terminal-modal-content {
    transform: scale(1);
}

/* ==================== Navigation Dropdown Menu ==================== */
.nav-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown-trigger {
    cursor: pointer;
    user-select: none;
}

.nav-dropdown-arrow {
    font-size: 0.72rem;
    margin-right: 4px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--text-muted);
}

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

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 330px;
    background: rgba(14, 18, 28, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
}

[data-theme-mode="light"] .nav-dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.nav-dropdown-wrapper:hover .nav-dropdown-menu,
.nav-dropdown-wrapper:focus-within .nav-dropdown-menu,
.nav-dropdown-wrapper.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-header-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.18s ease;
    border: 1px solid transparent;
}

.nav-dropdown-item:hover {
    background: rgba(0, 210, 255, 0.08);
    border-color: rgba(0, 210, 255, 0.25);
    transform: translateX(-3px);
}

.dropdown-icon-pill {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.egx30-pill {
    background: rgba(0, 210, 255, 0.15);
    color: var(--cyan-accent);
    border: 1px solid rgba(0, 210, 255, 0.3);
}

.egx70-pill {
    background: rgba(255, 183, 3, 0.15);
    color: var(--gold-accent);
    border: 1px solid rgba(255, 183, 3, 0.3);
}

.egx100-pill {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.all-pill {
    background: rgba(0, 230, 118, 0.15);
    color: var(--bullish-green);
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.dropdown-item-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

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

.dropdown-item-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item-badge {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.badge-egx30 {
    background: rgba(0, 210, 255, 0.12);
    color: var(--cyan-accent);
}

.badge-egx70 {
    background: rgba(255, 183, 3, 0.12);
    color: var(--gold-accent);
}

.badge-egx100 {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

.dropdown-divider-line {
    height: 1px;
    background: var(--border-color);
    margin: 6px 4px;
}

/* --- Smart Portal Indices 2x2 Grid --- */
.dropdown-indices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 2px 4px 6px;
}

.index-quick-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.18s ease;
}

.index-quick-card:hover {
    background: rgba(0, 210, 255, 0.08);
    border-color: rgba(0, 210, 255, 0.3);
    transform: translateY(-1px);
}

.index-quick-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.index-quick-name {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--text-highlight);
    white-space: nowrap;
}

@media (min-width: 1241px) {
    .nav-dropdown-menu.portal-menu-left {
        right: auto !important;
        left: 0 !important;
    }
}

/* ==================== Index Navigator Tabs (Stock/Index.cshtml) ==================== */
.index-nav-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.index-tab-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 18px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-sm);
}

.index-tab-btn:hover {
    border-color: var(--border-highlight);
    color: var(--text-highlight);
    transform: translateY(-1px);
}

.index-tab-btn.active {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.14), rgba(0, 102, 255, 0.08));
    border-color: var(--cyan-accent);
    color: var(--cyan-accent);
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.2);
}

.index-mini-badge {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
}

.index-mini-badge.egx30 {
    background: rgba(0, 210, 255, 0.2);
    color: var(--cyan-accent);
}

.index-mini-badge.egx70 {
    background: rgba(255, 183, 3, 0.2);
    color: var(--gold-accent);
}

.index-mini-badge.egx100 {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.index-mini-badge.egx33 {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.index-tab-count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-family: var(--font-mono);
}

.index-tab-btn.active .index-tab-count {
    background: var(--cyan-accent);
    color: #0b0e17;
    font-weight: 800;
}

.index-tab-change {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 51, 102, 0.12);
    color: var(--bearish-red);
}

/* Index Pill Badge inside Table Row */
.table-index-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    font-family: var(--font-mono);
}

.table-index-badge.egx30 {
    background: rgba(0, 210, 255, 0.12);
    color: var(--cyan-accent);
    border: 1px solid rgba(0, 210, 255, 0.28);
}

.table-index-badge.egx70 {
    background: rgba(255, 183, 3, 0.12);
    color: var(--gold-accent);
    border: 1px solid rgba(255, 183, 3, 0.28);
}

/* ==========================================================================
   LIVE TERMINAL ANIMATIONS & PULSE BADGES
   ========================================================================== */
@keyframes liveDotPulse {
    0% { transform: scale(0.92); opacity: 0.6; }
    50% { transform: scale(1.35); opacity: 1; }
    100% { transform: scale(0.92); opacity: 0.6; }
}

.live-pulse-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    display: inline-block;
    animation: liveDotPulse 1.6s infinite ease-in-out;
}
.live-pulse-dot.green {
    background-color: var(--bullish-green);
    box-shadow: 0 0 7px rgba(0, 230, 118, 0.7);
}
.live-pulse-dot.gold {
    background-color: var(--gold-accent);
    box-shadow: 0 0 7px rgba(255, 183, 3, 0.7);
}

.live-badge-glow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}
.live-badge-glow.green {
    background: rgba(0, 230, 118, 0.1);
    color: var(--bullish-green);
    border: 1px solid rgba(0, 230, 118, 0.28);
}
.live-badge-glow.gold {
    background: rgba(255, 183, 3, 0.1);
    color: var(--gold-accent);
    border: 1px solid rgba(255, 183, 3, 0.28);
}

@keyframes priceTickGreen {
    0% { background-color: rgba(0, 230, 118, 0.25); }
    100% { background-color: transparent; }
}
@keyframes priceTickRed {
    0% { background-color: rgba(255, 51, 102, 0.25); }
    100% { background-color: transparent; }
}
.tick-flash-up {
    animation: priceTickGreen 1.2s ease-out;
}
.tick-flash-down {
    animation: priceTickRed 1.2s ease-out;
}

/* ==========================================================================
   Full Notification & Follow System Styles
   ========================================================================== */

/* Notification Dropdown Wrapper */
.notif-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.notif-bell-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.notif-bell-btn:hover {
    color: var(--cyan-accent);
    border-color: var(--cyan-accent);
    box-shadow: 0 0 12px var(--cyan-glow);
}

.notif-badge-pill {
    position: absolute;
    top: -4px;
    left: -4px;
    background: linear-gradient(135deg, #ff3366, #ff0055);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 8px rgba(255, 51, 102, 0.6);
    border: 2px solid var(--bg-base);
    animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); box-shadow: 0 0 14px rgba(255, 51, 102, 0.9); }
}

/* User account dropdown (single compact trigger instead of many buttons) */
.user-menu-wrapper {
    position: relative;
    display: inline-block;
}

.user-menu-trigger {
    cursor: pointer;
    max-width: 200px;
}

.user-menu-trigger .user-menu-name {
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.user-menu-trigger .user-menu-arrow {
    font-size: 0.68rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.user-menu-wrapper.open .user-menu-arrow {
    transform: rotate(180deg);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 230px;
    max-width: 92vw;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: none;
    overflow: hidden;
    padding: 6px;
    animation: dropdownSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.user-menu-wrapper.open .user-menu-dropdown {
    display: block;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}

.user-menu-item i {
    width: 18px;
    text-align: center;
    color: var(--cyan-accent);
    font-size: 0.9rem;
}

.user-menu-item:hover {
    background: var(--cyan-bg);
}

.user-menu-item.danger {
    color: var(--bearish-red);
}

.user-menu-item.danger i {
    color: var(--bearish-red);
}

.user-menu-item.danger:hover {
    background: var(--bearish-bg);
}

.user-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 8px;
}

@media (max-width: 480px) {
    .user-menu-trigger {
        max-width: 150px;
    }

    .user-menu-trigger .user-menu-name {
        max-width: 80px;
        font-size: 0.8rem;
    }
}

/* Dropdown Menu */
.notif-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    /* right:0 anchors to the bell's own edge, so a 360px panel never runs off
       the side of the navbar the way left:0 did. */
    right: 0;
    width: 360px;
    max-width: 90vw;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 210, 255, 0.1);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(14px);
    animation: dropdownSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.notif-dropdown-menu.show {
    display: flex;
}

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

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

.notif-mark-read-text {
    background: none;
    border: none;
    color: var(--cyan-accent);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s;
}
.notif-mark-read-text:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.notif-dropdown-list {
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.notif-dropdown-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
    position: relative;
}

.notif-dropdown-item:hover {
    background: rgba(0, 210, 255, 0.05);
}

.notif-dropdown-item.unread {
    background: rgba(0, 210, 255, 0.08);
}
.notif-dropdown-item.unread::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cyan-accent);
}

.notif-item-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-item-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-highlight);
    margin-bottom: 2px;
}

.notif-item-msg {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}

.notif-item-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    direction: ltr;
    unicode-bidi: isolate;
}

.notif-dropdown-footer {
    padding: 10px;
    text-align: center;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

/* Follow Button Chips (Omnipresent) */
.follow-btn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-family: 'Tajawal', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 210, 255, 0.35);
    background: rgba(0, 210, 255, 0.08);
    color: var(--cyan-accent);
    text-decoration: none;
    outline: none;
    user-select: none;
}

.follow-btn-chip:hover {
    background: rgba(0, 210, 255, 0.2);
    border-color: var(--cyan-accent);
    box-shadow: 0 0 10px var(--cyan-glow);
    transform: translateY(-1px);
}

.follow-btn-chip.following {
    background: rgba(0, 230, 118, 0.1);
    border-color: rgba(0, 230, 118, 0.3);
    color: var(--bullish-green);
}

.follow-btn-chip.following:hover {
    background: rgba(255, 51, 102, 0.15);
    border-color: rgba(255, 51, 102, 0.4);
    color: var(--bearish-red);
}

.follow-btn-chip.following:hover .btn-text::before {
    content: "إلغاء المتابعة";
}
.follow-btn-chip.following:hover .btn-text span {
    display: none;
}
.follow-btn-chip.following:hover i {
    display: none;
}

/* Floating Live SignalR Notification Toast */
.live-notif-toast {
    position: fixed;
    top: 24px;
    left: 24px;
    background: rgba(14, 19, 31, 0.95);
    border: 1px solid var(--cyan-accent);
    box-shadow: 0 10px 35px rgba(0, 210, 255, 0.35);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 14px 18px;
    z-index: 99999;
    max-width: 360px;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transform: translateY(-50px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-notif-toast.show {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   Universal Market Search Widget (Homepage & Global)
   ========================================================================== */
.universal-search-card {
    background: var(--search-card-bg);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 22px;
    box-shadow: var(--search-card-shadow);
    position: relative;
    z-index: 50;
    backdrop-filter: blur(14px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.universal-search-card:focus-within,
.universal-search-card.has-results {
    border-color: var(--cyan-accent);
    box-shadow: var(--search-card-shadow-focus);
    z-index: 1050 !important;
}

.search-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.search-title-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(0, 114, 255, 0.25));
    border: 1px solid rgba(0, 210, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--cyan-accent);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
    flex-shrink: 0;
}

.search-heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-highlight);
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.search-subheading {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
}

.search-kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bullish-green);
}

.universal-input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

.input-search-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
    pointer-events: none;
    transition: color 0.2s ease;
}

.universal-search-card:focus-within .input-search-icon {
    color: var(--cyan-accent);
}

.home-search-input {
    width: 100%;
    height: 52px;
    background: var(--search-input-bg);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 48px 0 45px;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-highlight);
    outline: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.home-search-input:focus {
    border-color: var(--cyan-accent);
    background: var(--search-input-bg-focus);
    box-shadow: 0 0 0 4px var(--cyan-bg);
}

.home-search-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.88rem;
}

.search-clear-btn {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--search-btn-bg);
    border: none;
    color: var(--text-muted);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-clear-btn:hover {
    background: var(--bearish-bg);
    color: var(--bearish-red);
}

.search-spinner-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cyan-accent);
    font-size: 1rem;
}

.search-filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.search-pill-btn {
    background: var(--search-btn-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.search-pill-btn:hover {
    background: var(--search-btn-bg-hover);
    color: var(--text-highlight);
    border-color: var(--border-highlight);
}

.search-pill-btn.active {
    background: var(--cyan-bg);
    border-color: var(--cyan-accent);
    color: var(--cyan-accent);
    box-shadow: 0 0 10px var(--cyan-bg);
}

.search-quick-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.quick-tags-label {
    color: var(--text-muted);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.quick-tag-chip {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.quick-tag-chip.stock-chip {
    background: rgba(0, 210, 255, 0.08);
    border: 1px solid rgba(0, 210, 255, 0.2);
    color: var(--cyan-accent);
}

.quick-tag-chip.stock-chip:hover {
    background: rgba(0, 210, 255, 0.2);
    border-color: var(--cyan-accent);
    transform: translateY(-1px);
}

.quick-tag-chip.gold-chip {
    background: rgba(255, 183, 3, 0.1);
    border: 1px solid rgba(255, 183, 3, 0.3);
    color: var(--gold-accent);
}

.quick-tag-chip.gold-chip:hover {
    background: rgba(255, 183, 3, 0.22);
    border-color: var(--gold-accent);
    transform: translateY(-1px);
}

.quick-tag-chip.fund-chip {
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid rgba(0, 230, 118, 0.25);
    color: var(--bullish-green);
}

.quick-tag-chip.fund-chip:hover {
    background: rgba(0, 230, 118, 0.18);
    border-color: var(--bullish-green);
    transform: translateY(-1px);
}

.quick-tag-chip.sharia-chip {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #c084fc;
}

.quick-tag-chip.sharia-chip:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: #c084fc;
    transform: translateY(-1px);
}

/* Dropdown Results Box */
.home-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    background: var(--search-panel-bg);
    border: 1.5px solid var(--cyan-accent);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(0, 210, 255, 0.22);
    z-index: 99999 !important;
    max-height: 520px;
    overflow-y: auto;
    padding: 14px 16px;
    backdrop-filter: blur(20px);
    animation: searchDropFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-dropdown-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.search-count-pill {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.search-count-pill strong {
    color: var(--cyan-accent);
}

.search-dropdown-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-dropdown-close-btn:hover {
    color: var(--bearish-red);
    background: rgba(239, 68, 68, 0.12);
}

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

.search-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px 6px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}

.search-section-header span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cyan-accent);
}

.search-results-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.search-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    background: var(--search-row-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.search-result-row:hover {
    background: rgba(0, 210, 255, 0.07);
    border-color: rgba(0, 210, 255, 0.35);
    transform: translateX(-3px);
}

.search-result-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-ticker-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.85rem;
    background: rgba(0, 210, 255, 0.12);
    border: 1px solid rgba(0, 210, 255, 0.3);
    color: var(--cyan-accent);
    min-width: 60px;
    text-align: center;
}

.search-ticker-badge.fund-badge {
    background: rgba(255, 183, 3, 0.12);
    border-color: rgba(255, 183, 3, 0.35);
    color: var(--gold-accent);
}

.search-info-col {
    display: flex;
    flex-direction: column;
}

.search-name-ar {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-highlight);
}

.search-meta-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.search-result-price-col {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.search-price-text {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-highlight);
}

.search-change-badge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

.search-change-badge.up {
    color: var(--bullish-green);
    background: rgba(0, 230, 118, 0.1);
}

.search-change-badge.down {
    color: var(--bearish-red);
    background: rgba(255, 51, 102, 0.1);
}

.search-no-results {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 0.88rem;
}




/* ==========================================================================
   Market pulse rows (home sidebar)
   Each row is a real link to the page that owns the figure. The live value
   elements keep their ids inside the anchor, so the market updater writes into
   them exactly as before.
   ========================================================================== */
.pulse-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--bg-surface);
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.pulse-row:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-highlight);
    transform: translateX(-3px);
}

.pulse-row:focus-visible {
    outline: 2px solid var(--cyan-accent);
    outline-offset: 2px;
}

.pulse-row-title { font-weight: 700; font-size: 0.88rem; }
/* --text-muted measures 3.3:1 on a white row in light mode, under the 4.5
   minimum, and this is a small label. --text-secondary keeps it visually
   secondary through size alone and stays readable. */
.pulse-row-sub { font-size: 0.72rem; color: var(--text-secondary); }
.pulse-row-values { text-align: left; }
/* .num-mono is inline-block, so the value and the change share one line and the
   column claims the width of both. In the 240px sidebar that leaves the label
   almost nothing, which wraps "المؤشر الرئيسي" onto three lines. Stacking the
   two figures halves the column and the label fits again. */
.pulse-row-values > div { display: block; }

/* A small chevron marks the row as a link. It is taken out of the flex flow and
   overlaid on the edge instead, because a chevron sitting in the flow steals
   width from the title and makes "EGX 30" wrap onto two lines in the narrow
   sidebar. */
.pulse-row-arrow {
    position: absolute;
    inset-inline-start: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--cyan-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.pulse-row:hover .pulse-row-arrow,
.pulse-row:focus-visible .pulse-row-arrow { opacity: 1; }

/* A row with no destination is a readout, not a link, so it must not invite a
   click that goes nowhere. */
.pulse-row.is-static { cursor: default; }
.pulse-row.is-static:hover { transform: none; background: var(--bg-surface); border-color: var(--border-color); }

@media (prefers-reduced-motion: reduce) {
    .pulse-row, .pulse-row-arrow { transition: none; }
    .pulse-row:hover { transform: none; }
}

/* Legal Callouts & Disclaimer Badges (Full Light & Dark Theme Support) */
.legal-callout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    margin: 20px 0;
    line-height: 1.7;
    font-size: 0.92rem;
}
.legal-callout strong,
.legal-callout .legal-callout-title {
    display: block;
    font-weight: 800;
    margin-bottom: 6px;
}
.legal-callout.danger {
    background: rgba(225, 29, 72, 0.12);
    border: 1px solid rgba(225, 29, 72, 0.4);
    color: #fecdd3;
}
.legal-callout.danger strong,
.legal-callout.danger .legal-callout-title {
    color: #ffffff;
}
.legal-callout.danger i {
    color: #f43f5e;
}

[data-theme-mode="light"] .legal-callout.danger,
[data-theme="light"] .legal-callout.danger {
    background: #fff1f2 !important;
    border: 1px solid #fda4af !important;
    color: #881337 !important;
}
[data-theme-mode="light"] .legal-callout.danger strong,
[data-theme="light"] .legal-callout.danger strong,
[data-theme="light"] .legal-callout.danger .legal-callout-title,
[data-theme="light"] .legal-callout.danger .legal-callout-title {
    color: #4c0519 !important;
}
[data-theme-mode="light"] .legal-callout.danger i,
[data-theme="light"] .legal-callout.danger i {
    color: #e11d48 !important;
}