/* ========================================================================
   Z-INDEX HIERARCHY (CRITICAL - DO NOT MODIFY WITHOUT UPDATING ALL LAYERS)
   ========================================================================

   This site uses a strict z-index layering system. ALWAYS follow this hierarchy:

   LAYER 1 - Base Content (z-index: 0-999)
   - Page content, posts, images, etc.

   LAYER 2 - Modals & Overlays (z-index: 20,000)
   - .modal-overlay (CSS): 20000
   - Most modals use this base layer

   LAYER 3 - Post Detail Modals (z-index: 21,000)
   - Post detail modals appear above regular modals

   LAYER 4 - Account Dashboard Modal (z-index: 999,999 !important)
   - #accountModalOverlay (JS): 999999 !important
   - Set via JavaScript in neo-tech-main.js line ~3023
   - Needs high z-index to appear above everything on mobile

   LAYER 5 - Floating Windows / Charts (z-index: 9,999,999 !important)
   - #floating-windows-container (CSS): 9999999 !important
   - DexScreener charts, news windows, etc.
   - MUST be higher than account modal so charts appear on top when clicked from dashboard

   LAYER 6 - Modals Opened FROM Account Dashboard (z-index: 10,000,000 !important)
   - #viewPostModalOverlay (HTML): 10000000 !important
   - #createPostModalOverlay (HTML): 10000000 !important
   - #deleteConfirmModal (HTML): 10000000 !important
   - These modals are opened from within the account dashboard
   - MUST be higher than account modal (999999) so they appear on top

   LAYER 7 - Lightbox / Full Screen (z-index: 30,000,000+)
   - Image/video lightbox (if implemented)

   ⚠️ IMPORTANT NOTES:
   - If you change account modal z-index in JS, update floating-windows-container in CSS
   - Floating windows MUST ALWAYS be higher than account modal
   - This issue has been fixed multiple times - DO NOT lower floating window z-index

   ======================================================================== */

/* --- ALPHA TERMINAL TABS --- */
.alpha-tabs-container {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    padding-bottom: 5px;
}

.segmented-control {
    display: inline-flex;
    background: var(--color-surface-soft);
    padding: 2px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    gap: 2px;
}

.segmented-control button {
    background: transparent;
    border: none;
    color: var(--color-text-dim);
    font-size: 10px;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', system-ui, sans-serif;
}

.segmented-control button:hover:not(.active) {
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.03);
}

.segmented-control button.active {
    background: var(--color-accent-blue);
    color: #fff;
    box-shadow: none;
}

/* Specific override for Cyan active state if needed */
.segmented-control button.active.cyan,
.alpha-tab-btn.active.cyan {
    background: var(--color-accent-blue);
    color: #fff;
}

/* --- TAB ICONS --- */
.tab-icon {
    height: 12px;
    width: 12px;
    vertical-align: middle;
    margin-right: 6px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: all 0.3s ease;
}

.alpha-tab-btn.active .tab-icon,
.community-tab.active .tab-icon,
.nav-actions .btn:hover .tab-icon {
    filter: none;
    stroke: rgba(0, 242, 254, 0.8);
}

.nav-actions .btn .tab-icon {
    stroke: rgba(255, 255, 255, 0.35);
    transition: stroke 0.2s ease;
}

.nav-actions .btn {
    height: 26px;
    box-sizing: border-box;
}

/* Per-button icon colors */
#openMapBtn .tab-icon        { stroke: #f7931a; }   /* orange — location */
#openLaunchPadBtn .tab-icon  { stroke: #d946ef; }   /* purple — launch */
#openTradeHubBtn .tab-icon   { stroke: #38bdf8; }   /* blue — trade */
#openTerminalHubBtn .tab-icon { stroke: #4ade80; }  /* green — terminal */
#walletConnectBtn .tab-icon  { stroke: #00f2fe; }   /* cyan — connect */
#openDMInboxBtn .tab-icon        { stroke: #a855f7; }   /* purple — DM */
#notificationBellBtn .tab-icon   { stroke: rgba(255,255,255,0.4); margin-right: 0; }

/* --- PRO TABLE LAYOUT --- */
.pro-table-scroller {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.pro-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 2fr 0.5fr;
    padding: 8px 12px;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    transition: all 0.2s ease;
    height: 40px;
}

.pro-row.header {
    color: var(--color-text-dim);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.2);
}

.pro-row:not(.header):hover {
    background: var(--color-surface-5);
    transform: translateX(4px);
}

/* Columns */
.col-token {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.col-price {
    font-family: 'Space Mono', monospace;
}

.col-vol {
    position: relative;
    font-family: 'Space Mono', monospace;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.pro-symbol {
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
}

.pro-ca {
    font-size: 9px;
    color: var(--color-text-dim);
    font-family: monospace;
}

/* --- MINDSHARE BARS (Visual Volume) --- */
.mindshare-bar {
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.15));
    border-right: 2px solid var(--color-accent-cyan);
    z-index: 20005;
    /* Highest priority */
    pointer-events: none;
}

/* --- AGE BADGES (New Pairs) --- */
.age-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 9px;
}

.badge-fresh {
    background: rgba(0, 230, 118, 0.2);
    color: var(--color-positive);
    box-shadow: 0 0 5px rgba(0, 230, 118, 0.2);
}

.badge-warm {
    background: rgba(255, 179, 0, 0.2);
    color: var(--color-warning);
}

.badge-old {
    color: var(--color-text-dim);
}

/* --- SNIPER BUTTON --- */
.btn-snipe {
    background: transparent;
    border: 1px solid var(--color-text-dim);
    color: var(--color-text-dim);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    transition: all 0.2s;
}

.btn-snipe:hover {
    border-color: var(--color-negative);
    color: var(--color-negative);
    box-shadow: 0 0 8px var(--color-negative);
    transform: scale(1.1);
}

/*
Theme Name: Crypto in NYC
Theme URI: https://cryptoinnyc.com
Author: You
Author URI: https://cryptoinnyc.com
Description: Neo-Tech Dashboard + Crypto Community Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crypto-in-nyc
*/

/* ---------------------------
 * 1. CSS Variables & Global Changes
--------------------------- */
:root {
    /* 🎨 COLOR PALETTE - Toned down "Sleek Modern" theme */
    --color-base: #09090b;             /* Zinc 950 */
    --color-accent-cyan: #2dd4bf;      /* Teal 400 - Muted but premium */
    --color-text-light: #fafafa;
    --color-text-dim: #a1a1aa;         /* Zinc 400 */
    --color-card-bg: rgba(24, 24, 27, 0.6); /* Zinc 900 with Glass Alpha */
    --color-glow: rgba(45, 212, 191, 0.5); /* Muted Teal Glow */
    --color-positive: #10b981;         /* Emerald 500 */
    --color-negative: #f43f5e;         /* Rose 500 */
    --color-warning: #f59e0b;          /* Amber 500 */
    --color-accent-amber: #f59e0b;
    --color-accent-emerald: #10b981;
    --color-accent-violet: #8b5cf6;
    --color-border: rgba(255, 255, 255, 0.08); /* Sophisticated subtle border */

    /* 🎨 SURFACE TINTS — auto-derived for depth */
    --color-surface-5: rgba(45, 212, 191, 0.05);
    --color-surface-8: rgba(45, 212, 191, 0.08);
    --color-surface-10: rgba(45, 212, 191, 0.10);
    --color-surface-15: rgba(45, 212, 191, 0.15);
    --color-surface-20: rgba(45, 212, 191, 0.20);

    /* ⚙️ MODERN EFFECTS */
    --blur-strength: 12px;
    --border-radius: 16px;
    --header-height: 64px;

    /* Layout/Spacing */
    --logo-final-size: 65px;
    --content-padding: 24px 32px;
    --gap-size: 16px;

    /* Chat Widget variables (can be overridden by JS for resizing) */
    --chat-width: 450px;
    --chat-height: 480px;
}

html,
body {
    height: 100%;
    overflow: hidden;
    /* Force no global scrollbars */
}

body {
    margin: 0;
    font-family: 'Inter', 'Space Mono', system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at top left, #18181b, #09090b);
    background-attachment: fixed;
    color: var(--color-text-light);
    line-height: 1.6;
    font-size: 0.95rem;
    -webkit-font-smoothing: antialiased;
}

/* ========================================
   GLOBAL TECHY SCROLLBAR STYLING
   ======================================== */

/* WebKit Browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(0, 242, 254, 0.1);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            rgba(0, 242, 254, 0.5),
            rgba(0, 242, 254, 0.3));
    border-radius: 4px;
    border: 1px solid rgba(0, 242, 254, 0.2);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.3);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            rgba(0, 242, 254, 0.8),
            rgba(0, 242, 254, 0.5));
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--color-accent-cyan);
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.8);
}

/* Scrollbar corner (where vertical and horizontal scrollbars meet) */
*::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.3);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 212, 191, 0.25) transparent;
}

/* ======================================== */

a {
    color: var(--color-accent-cyan);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    text-decoration: none;
    color: var(--color-glow);
    text-shadow: 0 0 5px var(--color-glow);
}

/* =================================================================
   CUSTOM TOOLTIPS (Data Attribute)
   ================================================================= */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(4, 8, 11, 0.95);
    color: var(--color-accent-cyan);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Space Mono', monospace;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    border: 1px solid var(--color-accent-cyan);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    opacity: 0;
    animation: tooltip-fade 0.2s forwards;
}

/* Tooltip Arrow */
[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-accent-cyan) transparent transparent transparent;
    z-index: 10000;
    opacity: 0;
    animation: tooltip-fade 0.2s forwards;
}

@keyframes tooltip-fade {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px);
    }
}

/* =================================================================
   CUSTOM FORM VALIDATION STYLES (NEW SECTION)
   ================================================================= */
.is-invalid {
    /* Uses !important to ensure it overrides default input focus styles */
    border-color: var(--color-negative) !important;
    box-shadow: 0 0 0 3px rgba(255, 82, 82, 0.5) !important;
}

/* Style for the error message text */
.input-error-message {
    font-size: 0.85em;
    color: var(--color-negative);
    margin-top: 5px;
    display: block;
}

/* ---------------------------
 * 2. Header & Navigation (Sleek & Focused)
--------------------------- */
.site-head-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(9, 9, 11, 0.8);
    backdrop-filter: blur(var(--blur-strength));
    -webkit-backdrop-filter: blur(var(--blur-strength));
    height: var(--header-height);
    border-bottom: 1px solid var(--color-border);
}

.site-head {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    background: none;
    flex-wrap: wrap;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    flex-shrink: 0;
    width: auto;
}

.logo {
    width: var(--logo-final-size);
    height: var(--logo-final-size);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid rgba(0, 242, 254, 0.3);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
    transition: all 0.3s ease;
}

.logo-area:hover .logo {
    box-shadow: 0 0 15px var(--color-glow);
    transform: scale(1.02);
}

#animated-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.center-tagline {
    flex-grow: 1;
    text-align: center;
    padding: 0 20px;
}

.site-description {
    margin: 0;
    font-size: 1.0vw;
    color: var(--color-text-dim);
    font-weight: 400;
}

.nav-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

/* Override all inline colors on nav buttons — unified terminal style */
.nav-actions .btn.ghost {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

.nav-actions .btn.ghost:hover {
    border-color: rgba(0, 242, 254, 0.3) !important;
    color: rgba(0, 242, 254, 0.85) !important;
    background: rgba(0, 242, 254, 0.05) !important;
}

/* XP badge — sharp corners, terminal style */
.header-level-indicator {
    background: rgba(0, 242, 254, 0.06) !important;
    border: 1px solid rgba(0, 242, 254, 0.2) !important;
    border-radius: 3px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
    font-family: 'Space Mono', monospace !important;
    letter-spacing: 1px !important;
    color: rgba(0, 242, 254, 0.6) !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.header-level-indicator:hover {
    background: rgba(0, 242, 254, 0.1) !important;
    color: rgba(0, 242, 254, 0.9) !important;
}

.btn {
    padding: 4px 10px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 10px;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.45);
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 242, 254, 0.35);
    color: rgba(0, 242, 254, 0.85);
}

.btn.ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn.ghost:hover {
    background: rgba(0, 242, 254, 0.05);
    color: rgba(0, 242, 254, 0.85);
    border-color: rgba(0, 242, 254, 0.3);
}

.btn.primary {
    background: transparent;
    color: rgba(0, 242, 254, 0.8);
    font-weight: 700;
    border: 1px solid rgba(0, 242, 254, 0.4);
}

.btn.primary:hover {
    background: rgba(0, 242, 254, 0.08);
    color: var(--color-accent-cyan);
    border-color: rgba(0, 242, 254, 0.7);
}


/* --- COMMUNITY POSTS HEADER BUTTONS (Post / Calendar / Ghost Protocol) --- */
.community-header-btn,
#openPostModalHeaderBtn,
#openEventCalendarBtn,
#openGhostTerminalBtn {
    height: 22px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
}
.community-header-btn .tab-icon {
    margin-right: 0;
    flex-shrink: 0;
}

/* --- GHOST PROTOCOL BUTTON --- */
.btn-ghost-protocol {
    width: auto;
    padding: 6px 12px;
    font-size: 11px;
    margin-left: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: rgba(0, 242, 254, 0.8);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 5px rgba(0, 242, 254, 0.05);
}

.btn-ghost-protocol:hover {
    background: var(--color-surface-10);
    color: #fff;
    border-color: var(--color-surface-20);
    box-shadow: 0 0 15px var(--color-surface-15);
    text-shadow: 0 0 8px var(--color-glow);
    transform: translateY(-1px);
}

/* ---------------------------
 * 3. Layout & Content Containers
--------------------------- */
/* ---------------------------
 * 3. Layout & Content Containers (FLEX REFACTOR)
--------------------------- */
/* ---------------------------
 * 3. Layout & Content Containers
--------------------------- */
.custom-homepage {
    width: 100vw;
    height: calc(100vh - var(--header-height));
    margin: 0 auto;
    padding: var(--content-padding);
    box-sizing: border-box;
    /* Hide global overflow, handle locally in grid areas */
    overflow: hidden;

    display: grid;
    gap: var(--gap-size);

    /* --- CHANGED: Flexible layout to prioritize markets/news --- */
    grid-template-rows: 45% auto 1fr;

    grid-template-columns: repeat(12, 1fr);

    grid-template-areas:
        "categories categories categories categories categories categories categories categories categories categories categories categories"
        "watchlist watchlist watchlist watchlist watchlist watchlist watchlist watchlist news news news news"
        "charts charts charts charts charts charts charts charts news news news news";
}

/* --- FLOATING COCKPIT WIDGETS --- */
/* (Rules merged into main blocks below - removed duplicates here) */

.section-watchlist-container {
    grid-area: watchlist;
    overflow: hidden;
}

.section-chart-container {
    grid-area: charts;
    overflow: hidden;
}

.section-news-container {
    grid-area: news;
    overflow: hidden;
}

.section-categories-container {
    grid-area: categories;
    overflow: hidden;
}

/* Content Sections */
section {
    padding: 20px;
    border-radius: var(--border-radius);
    background: var(--color-card-bg);
    backdrop-filter: blur(var(--blur-strength));
    border: 1px solid var(--color-border);
    min-height: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

section:hover {
    border-color: rgba(45, 212, 191, 0.2);
}

/* --- SECTION MARKERS (Subtle Accent) --- */
.section-marker {
    position: relative;
    overflow: hidden;
}

.section-marker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-cyan), transparent);
    opacity: 0.5;
    z-index: 10;
}

.marker-amber::before {
    background: linear-gradient(90deg, var(--color-accent-amber), transparent);
}

.marker-emerald::before {
    background: linear-gradient(90deg, var(--color-accent-emerald), transparent);
}

.marker-violet::before {
    background: linear-gradient(90deg, var(--color-accent-violet), transparent);
}

.marker-cyan::before {
    background: linear-gradient(90deg, var(--color-accent-cyan), transparent);
}


/* ---------------------------
 * 4. Data & Visual Polish (High Fidelity)
--------------------------- */

/* --- WATCHLIST CONTAINER (Fixed Slim Layout) --- */
.watchlist-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    /* Fits grid row perfectly */
    overflow: hidden !important;
    /* Stop the main bar from scrolling */
    padding: 0;
    gap: 10px;
}

/* --- SCROLL AREA (The Middle Part) --- */
.watchlist-scroll-area {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    /* Only this middle part scrolls */
    flex: 0 1 auto;
    /* Grow: 0 (Hugs content), Shrink: 1 (Responsive) */
    min-width: 0;
    /* Allows it to shrink so button fits */
    height: 100%;
    scrollbar-width: none;
    /* Hide scrollbar */
    margin: 0;
}

.watchlist-scroll-area::-webkit-scrollbar {
    display: none;
}

/* --- WATCHLIST CARDS --- */
.watchlist-card {
    height: 26px;
    padding: 0 8px 0 6px;
    border: 1px solid color-mix(in srgb, var(--wl-color, var(--color-accent-cyan)) 30%, transparent);
    border-left: 2px solid var(--wl-color, var(--color-accent-cyan));
    border-radius: 5px;
    background: color-mix(in srgb, var(--wl-color, var(--color-accent-cyan)) 6%, transparent);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.2s, transform 0.15s;
}

.watchlist-card:hover {
    background: color-mix(in srgb, var(--wl-color, var(--color-accent-cyan)) 14%, transparent);
    transform: translateY(-1px);
}

.wl-spark {
    width: 32px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.wl-spark svg {
    width: 100%;
    height: 100%;
}

.wl-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    filter: grayscale(40%) brightness(1.1);
    transition: filter 0.2s ease;
}

.watchlist-card:hover .wl-icon {
    filter: grayscale(0%) brightness(1);
}

.wl-icon-fallback {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--color-text-dim);
    font-size: 7px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wl-symbol {
    font-size: 9px;
    font-weight: 800;
    color: var(--color-text-light);
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.5px;
}

.wl-price {
    font-size: 9px;
    color: var(--color-text-dim);
    font-family: 'Space Mono', monospace;
}

.wl-change {
    font-size: 9px;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    margin-left: 1px;
}

/* --- ADD BUTTON (Always Visible) --- */
.add-more-link {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-accent-cyan) !important;
    text-decoration: none;
    flex-shrink: 0;
    /* Never disappear */
    background: transparent;
}

/* Charts (Sleek) & SCROLLBAR STYLES */
/* All scrollable areas share the same custom styling */
.crypto-grid,
.news-list,
.categories-wrapper,
#coin-selection-list,
#post-content-area,
.post-list {
    padding-right: 0.8vw;
}

.crypto-grid,
.news-list,
.categories-wrapper,
#coin-selection-list,
#post-content-area,
.post-list,
.account-content {
    overflow-y: scroll;
    overflow-x: hidden !important;
}

.crypto-grid::-webkit-scrollbar,
.categories-wrapper::-webkit-scrollbar,
#coin-selection-list::-webkit-scrollbar,
#post-content-area::-webkit-scrollbar,
.post-list::-webkit-scrollbar,
.community-posts-grid::-webkit-scrollbar {
    width: 6px;
}

.crypto-grid::-webkit-scrollbar-thumb,
.categories-wrapper::-webkit-scrollbar-thumb,
#coin-selection-list::-webkit-scrollbar-thumb,
#post-content-area::-webkit-scrollbar-thumb,
.post-list::-webkit-scrollbar-thumb,
.account-content::-webkit-scrollbar-thumb,
.community-posts-grid::-webkit-scrollbar-thumb {
    background: rgba(45, 212, 191, 0.25);
    border-radius: 10px;
}

.crypto-grid::-webkit-scrollbar-track,
.categories-wrapper::-webkit-scrollbar-track,
#coin-selection-list::-webkit-scrollbar-track,
#post-content-area::-webkit-scrollbar-track,
.post-list::-webkit-scrollbar-track,
.account-content::-webkit-scrollbar-track,
.community-posts-grid::-webkit-scrollbar-track {
    background: transparent;
}

/* --- NEW: Firefox Scrollbar Styles --- */
.crypto-grid,
.news-list,
.categories-wrapper,
#coin-selection-list,
#post-content-area,
.post-list,
.account-content,
.community-posts-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 212, 191, 0.25) transparent;
}

/* Chart Styles */
/* ============================================================
   MARKET HERO CARDS
   ============================================================ */
.market-hero-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.market-hero-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 2px solid var(--hero-color, rgba(0,242,254,0.5));
    border-radius: 8px;
    padding: 12px 14px 10px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    position: relative;
    overflow: hidden;
}

.market-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--hero-color) 8%, transparent) 0%, transparent 65%);
    pointer-events: none;
}

.market-hero-card:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    transform: translateY(-1px);
}

.hero-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.hero-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-identity {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
}

.hero-symbol {
    font-size: 12px;
    font-weight: 800;
    font-family: 'Space Mono', monospace;
    color: #fff;
    letter-spacing: 1px;
}

.hero-name {
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    font-family: 'Space Mono', monospace;
}

.hero-change {
    font-size: 10px;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.hero-price {
    font-size: 20px;
    font-weight: 800;
    font-family: 'Space Mono', monospace;
    color: #fff;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    line-height: 1;
}

.hero-spark {
    height: 48px;
    width: 100%;
    margin-bottom: 10px;
    opacity: 0.9;
}

.hero-spark svg {
    width: 100%;
    height: 100%;
}

.hero-stats {
    display: flex;
    gap: 16px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.hero-stat-label {
    font-size: 8px;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Space Mono', monospace;
}

.hero-stat-value {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    color: rgba(255,255,255,0.8);
}

.hero-vol-bar {
    height: 2px;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
    overflow: hidden;
    margin-top: 2px;
}

.hero-vol-fill {
    height: 100%;
    border-radius: 1px;
    opacity: 0.7;
}

/* ============================================================
   VOLUME BAR IN TABLE
   ============================================================ */
.volume-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    justify-content: center;
}

.volume-text {
    font-size: 0.68vw;
    color: var(--color-text-light);
    font-family: 'Space Mono', monospace;
}

.volume-bar-track {
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
    overflow: hidden;
}

.volume-bar-fill {
    height: 100%;
    border-radius: 1px;
    opacity: 0.5;
    transition: width 0.6s ease;
}

/* Table price cell */
.market-row .price-tag {
    font-size: 0.78vw;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    color: #fff;
    text-align: right;
    letter-spacing: -0.3px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.8s ease;
}

/* ============================================================
   PRICE FLASH ANIMATION
   ============================================================ */
@keyframes priceFlash {
    0%   { background: rgba(255,255,255,0.12); }
    100% { background: transparent; }
}

.market-price.price-flash {
    animation: priceFlash 0.8s ease-out forwards;
    border-radius: 3px;
}

/* --- MARKET PULSE BAR --- */
.market-pulse-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 12px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-family: 'Space Mono', monospace;
}

.pulse-orb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pulse-color, #ffd740);
    box-shadow: 0 0 8px var(--pulse-color, #ffd740);
    animation: pulseOrb 2s ease-in-out infinite;
    flex-shrink: 0;
}

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

.pulse-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.pulse-stat {
    font-size: 9px;
    color: var(--color-text-dim);
    flex-shrink: 0;
}

.pulse-track {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.pulse-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1s ease;
}

.pulse-avg {
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- MARKET TABLE ROWS --- */
.chart-card {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1.2fr;
    align-items: center;
    padding: 4px 8px 4px 10px;
    border-radius: 5px;
    transition: background 0.15s;
    font-size: 0.72vw;
    cursor: pointer;
    position: relative;
    border-left: 2px solid transparent;
    min-height: 40px;
}

.chart-card.market-row {
    border-left-color: color-mix(in srgb, var(--accent-color, transparent) calc(var(--accent-intensity, 0) * 80% + 15%), transparent);
}

.chart-card:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

.chart-card:hover {
    background: rgba(255,255,255,0.04);
}

.chart-card.market-row:hover {
    background: color-mix(in srgb, var(--accent-color, white) 5%, rgba(255,255,255,0.02));
}

.coin-name {
    font-weight: 700;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.coin-name-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}

.coin-name .rank-number {
    font-weight: 400;
    color: rgba(255,255,255,0.25);
    font-size: 9px;
    font-family: 'Space Mono', monospace;
    min-width: 16px;
    text-align: right;
    flex-shrink: 0;
}

.coin-name .symbol {
    font-weight: 800;
    font-size: 0.72vw;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.5px;
}

.coin-name .full-name {
    font-weight: 300;
    color: var(--color-text-dim);
    font-size: 0.58vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coin-name img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 24h change pill */
.change-cell {
    display: flex;
    align-items: center;
}

.change-pill {
    font-size: 0.65vw;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Legacy bar styles kept for compatibility */
.chart-bar-container { display: flex; align-items: center; height: 1.5vh; gap: 0.5vw; }
.chart-bar-wrapper { width: 60%; display: flex; align-items: center; flex-shrink: 0; }
.chart-bar { height: 0.8vh; border-radius: 1px; transition: width 0.5s ease-out; min-width: 0; }
.chart-bar.bar-up { background-color: var(--color-positive); }
.chart-bar.bar-down { background-color: var(--color-negative); }

/* 7-Day Chart */
.chart-7d-container {
    height: 36px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
}

.chart-7d-container svg {
    width: 100%;
    height: 100%;
}

.sparkline-svg {
    height: 100%;
    width: 60%;
}

.sparkline-line {
    fill: none;
    stroke-width: 1.5;
    transition: stroke 0.3s;
}


/* --- NEWS SECTION --- */
.section-news-container {
    display: flex;
    flex-direction: column;
}

.news-list {
    padding: 0;
    list-style: none;
    font-size: 1.2vh;
    flex-grow: 1;
    min-height: 0;
}

.news-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    min-height: 40px;
    cursor: pointer;
    border-radius: 8px;
}

.news-list li:hover {
    background: var(--color-surface-soft);
    transform: translateX(4px);
}

.news-thumb {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-article-title {
    font-weight: 600;
    font-size: 0.8vw;
    color: var(--color-text-light);
    line-height: 1.1;
    margin-bottom: 0.1vh;
    transition: color 0.2s ease;
}

.news-list li:hover .news-article-title {
    color: var(--color-glow);
    text-shadow: 0 0 3px rgba(0, 242, 254, 0.4);
}


.news-source {
    font-size: 0.7vw;
    color: var(--color-text-dim);
}


/* --- CATEGORIES/COMMUNITY POSTS --- */
.section-categories-container {
    /* CHANGED: Switch back to flex to respect the parent grid height */
    display: flex;
    flex-direction: column;
    /* ADDED: Ensures content doesn't bleed out of the rounded corners */
    overflow: hidden;
}

.section-categories-container .section-title {
    display: inline-block;
    width: auto;
}

.categories-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Changed to center to save space */
    margin-bottom: 0.1vh;
    padding-bottom: 0.1vh;
    border-bottom: 1px solid rgba(0, 242, 254, 0.4);
    flex-shrink: 0;
}

.categories-header .section-title {
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.categories-wrapper {
    flex-grow: 1;
    padding-top: 0.1vh;
    min-height: 0;
    overflow-y: auto;
}

/* =================================================================
   COMMUNITY POSTS - PIXEL PERFECT REPLICA
   ================================================================= */

/* --- POSTS GRID (4 Columns x 2 Rows = 8 Total) --- */
.community-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 0;
    /* Scroll fix */
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    grid-auto-rows: max-content;
    padding-bottom: 15px;
    /* Prevent bottom clipping */
}

/* Ensure cards don't get squashed */
.community-post-card {
    height: auto;
    min-height: fit-content;
}

@media (max-width: 1200px) {
    .community-posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1000px) {
    .community-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .community-posts-grid {
        grid-template-columns: 1fr;
    }
}

/* --- POST CARD DESIGN - v3.0 --- */
.community-post-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-left: 2px solid rgba(0, 242, 254, 0.15);
    border-radius: 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(var(--blur-strength));
}

/* Category left-border accent — dormant, revealed on hover */
.community-post-card.cat-events,
.community-post-card.cat-meetups       { --card-accent: rgba(0, 242, 254, 1); }
.community-post-card.cat-buy-sell,
.community-post-card.cat-classifieds   { --card-accent: rgba(52, 211, 153, 1); }
.community-post-card.cat-jobs          { --card-accent: rgba(251, 191, 36, 1); }
.community-post-card.cat-housing       { --card-accent: rgba(167, 139, 250, 1); }
.community-post-card.cat-services      { --card-accent: rgba(251, 146, 60, 1); }
.community-post-card.cat-general       { --card-accent: rgba(148, 163, 184, 1); }

.community-post-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 242, 254, 0.25);
    border-left-color: var(--card-accent, rgba(0, 242, 254, 1));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 242, 254, 0.06);
}

/* Top zone — content */
.post-card-top {
    padding: 14px 14px 10px 14px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Header row */
.post-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Category badge */
.post-category-badge {
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 8.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.15);
}

/* Time ago */
.post-time-ago {
    color: rgba(255, 255, 255, 0.3);
    font-size: 9.5px;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Title */
.post-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #e8edf2;
    margin: 0 0 7px 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
    font-family: 'Space Mono', monospace;
    letter-spacing: -0.3px;
}

.community-post-card:hover .post-card-title {
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.2);
}

/* Excerpt */
.post-card-excerpt {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
    margin: 0;
}

/* Bottom zone — meta strip */
.post-card-meta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 14px 11px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
    margin-top: 10px;
    min-height: 64px;
}

/* Thumbnail — small square */
.post-card-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.post-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Meta fields stack */
.post-card-meta-fields {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    min-width: 0;
}

.post-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-meta-icon {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    opacity: 0.7;
}

.post-author-name {
    color: rgba(167, 139, 250, 0.85);
    font-weight: 600;
    font-family: 'Space Mono', monospace;
    cursor: pointer;
}

.post-location {
    color: rgba(255, 255, 255, 0.4);
}

.post-meta-event-date {
    color: var(--color-accent-cyan);
    opacity: 0.8;
}

/* Stats footer — right-aligned in meta strip */
.post-card-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    margin-left: auto;
}

.post-card-footer-row {
    display: flex;
    align-items: center;
    gap: 10px;
}


.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.1vh;

    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.post-list li {
    margin-bottom: 0.2vh;
    color: var(--color-text-light);

    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.post-list li a.community-post-link {
    flex-grow: 1;
    min-width: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-list li a {
    color: var(--color-text-light);
    text-shadow: none;
}

.post-list li a:hover {
    color: var(--color-glow);
    text-shadow: 0 0 5px var(--color-glow);
}

/* --- GENERAL MODAL STYLES - ENHANCED v2.0 --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 20000;
    /* Below floating windows (25000) and lightbox (30000) so they can appear on top of posts */
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    opacity: 0;
}

/* NOTE: .modal-overlay.on-top class z-index is set via inline style (10000000 !important) in JavaScript
   This allows modals opened from account dashboard to appear above it (account modal is 999999) */

.modal-overlay.open {
    display: flex;
    opacity: 1;
}

.modal-content-container {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: #09090b;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    animation: modalOpen 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
}

@keyframes modalOpen {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-content-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 242, 254, 0.5) 50%, transparent 100%);
    z-index: 20005;
    /* Highest priority */
}

/* Authentication Modal Specifics */
.register-modal-content {
    width: 75vw;
    max-width: 960px;
    height: 90vh;
    max-height: 90vh;
}

.login-modal-content {
    width: 500px;
    max-width: 500px;
    height: auto;
}

.modal-header {
    height: 44px;
    background: linear-gradient(180deg, rgba(0, 242, 254, 0.08) 0%, rgba(0, 242, 254, 0.02) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid rgba(0, 242, 254, 0.15);
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* --- CONFIRMATION MODAL (Compact & Sleek) --- */
.confirmation-modal {
    width: 320px !important;
    /* Force override of any generic width */
    max-width: 90vw;
    padding: 30px 25px !important;
    text-align: center;
    background: rgba(6, 12, 20, 0.95);
    border: 1px solid rgba(255, 82, 82, 0.4) !important;
    /* Warning/Danger context */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
}

.confirmation-modal .modal-title {
    color: var(--color-accent-cyan);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 15px 0;
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

.confirmation-modal p {
    color: var(--color-text-dim);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

.confirmation-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.confirmation-actions .btn {
    min-width: 90px;
    justify-content: center;
    padding: 8px 16px;
    font-size: 12px;
}

/* =====================================================
   UNIVERSAL CLOSE BUTTON — All widgets & modals
   ===================================================== */
#modal-close-btn,
#add-modal-close-btn,
#post-modal-close-btn,
#channel-modal-close-btn,
#viewPostCloseBtn,
#account-modal-close-btn,
#register-modal-close-btn,
#notifyModalCloseBtn,
#tokenLaunchModalCloseBtn,
#walletModalCloseBtn,
#sharePostCloseBtn,
#login-modal-close-btn,
#terminal-minimize-btn,
#ghost-terminal-close-btn,
#closeTradeHubBtn,
#closeTokenModalBtn,
.close-btn,
.window-close-btn,
.trade-hub-close-btn,
.chat-toggle-btn,
.oracle-minimize-btn,
.system-manual-close,
.legal-modal-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: 1px solid rgba(45, 212, 191, 0.4) !important;
    color: var(--color-accent-cyan) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Space Mono', monospace !important;
    flex-shrink: 0 !important;
}

#modal-close-btn:hover,
#add-modal-close-btn:hover,
#post-modal-close-btn:hover,
#channel-modal-close-btn:hover,
#viewPostCloseBtn:hover,
#account-modal-close-btn:hover,
#register-modal-close-btn:hover,
#notifyModalCloseBtn:hover,
#tokenLaunchModalCloseBtn:hover,
#walletModalCloseBtn:hover,
#sharePostCloseBtn:hover,
#login-modal-close-btn:hover,
#terminal-minimize-btn:hover,
#ghost-terminal-close-btn:hover,
#closeTradeHubBtn:hover,
#closeTokenModalBtn:hover,
.close-btn:hover,
.window-close-btn:hover,
.trade-hub-close-btn:hover,
.chat-toggle-btn:hover,
.oracle-minimize-btn:hover,
.system-manual-close:hover,
.legal-modal-close:hover {
    background: rgba(244, 63, 94, 0.1) !important;
    border-color: #f43f5e !important;
    color: #f43f5e !important;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.3) !important;
}

/* Ghost Protocol Example Prompt Chips */
.ghost-chip {
    background: rgba(45, 212, 191, 0.1);
    border: 1px solid rgba(45, 212, 191, 0.3);
    border-radius: 20px;
    padding: 6px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--color-accent-cyan);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ghost-chip:hover {
    background: rgba(45, 212, 191, 0.25);
    border-color: rgba(45, 212, 191, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.2);
}

.ghost-chip:active {
    transform: translateY(0);
    background: rgba(45, 212, 191, 0.35);
}

/* #closeTokenModalBtn — consolidated into universal close button rule */

#modal-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px);
}

#viewPostTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px);
}

.modal-iframe {
    width: 100%;
    height: calc(100% - 30px);
    border: none;
    display: block;
    background: #fff;
}

/* --- NEWS MODAL SPECIFIC STYLES --- */
#newsModalOverlay .modal-content-container {
    width: 80vw;
    height: 85vh;
    max-width: 1400px;
    max-height: 900px;
}

/* --- ADD CRYPTO MODAL SPECIFIC STYLES --- */
#addCryptoModalOverlay .modal-content-container {
    width: 50vw;
    height: 70vh;
    max-width: 700px;
    max-height: 800px;
}

.add-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#coin-search-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--color-accent-cyan);
    border-radius: 4px;
    color: var(--color-text-light);
    font-size: 14px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.watchlist-limit-warning {
    background-color: rgba(255, 179, 0, 0.1);
    color: var(--color-warning);
    padding: 10px 15px;
    border: 1px solid var(--color-warning);
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
    flex-shrink: 0;
}

#coin-selection-list {
    flex-grow: 1;
    overflow-y: scroll;
    height: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

#coin-selection-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

#coin-selection-list li:hover {
    background-color: rgba(0, 242, 254, 0.05);
}

.coin-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.coin-info img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.coin-info .symbol {
    font-weight: 700;
    color: var(--color-glow);
}

.coin-info .name {
    color: var(--color-text-dim);
}

.action-btn {
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.action-btn.add {
    background-color: var(--color-positive);
    color: var(--color-base);
    border: none;
}

.action-btn.remove {
    background-color: var(--color-negative);
    color: var(--color-base);
    border: none;
}

.action-btn.disabled {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-dim);
    cursor: not-allowed;
    border: 1px dashed var(--color-text-dim);
}

/* -------------------------------------------
 * 6. CREATE POST MODAL STYLES (NEW)
 * ------------------------------------------- */
#createPostModalOverlay .modal-content-container {
    width: 60vw;
    height: auto;
    /* Let it grow to fit the button */
    max-height: 85vh;
    /* Stop it from going off-screen */
    max-width: 800px;
    display: flex;
    /* Ensure flex behavior for inner scrolling */
    flex-direction: column;
}

/* Update the body to scroll if the screen is too short */
.post-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.post-modal-body h2 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
}

.post-modal-body p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 9px;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    color: rgba(0, 242, 254, 0.5);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-family: 'Space Mono', monospace;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.form-group textarea {
    min-height: 120px;
    flex-grow: 1;
    resize: vertical;
    line-height: 1.6;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(0, 242, 254, 0.4);
    box-shadow: none;
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* --- MODAL BUTTON STYLES - ENHANCED v2.0 --- */
.modal-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: 'Inter', system-ui, sans-serif;
}

.modal-btn-primary {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.9) 0%, rgba(18, 96, 120, 0.9) 100%);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.25);
}

.modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 242, 254, 0.4);
    background: linear-gradient(135deg, var(--color-accent-cyan) 0%, rgba(18, 96, 120, 1) 100%);
}

.modal-btn-primary:active {
    transform: translateY(0);
}

.modal-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.modal-btn-danger {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.9) 0%, rgba(180, 60, 60, 0.9) 100%);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 100, 100, 0.2);
}

.modal-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 100, 100, 0.35);
}

/* Legacy button support (for existing buttons in modals) */
.post-modal-body button[type="submit"],
.add-modal-body button[type="submit"],
button#submit-post-btn,
button#createChannelSubmit {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.9) 0%, rgba(18, 96, 120, 0.9) 100%);
    color: #000;
    border: none;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    margin-top: 8px;
}

.post-modal-body button[type="submit"]:hover,
.add-modal-body button[type="submit"]:hover,
button#submit-post-btn:hover,
button#createChannelSubmit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 242, 254, 0.4);
}

/* --- FILE UPLOAD STYLING (FIXED) --- */

/* 1. The Container Box */
.file-input-wrapper {
    display: flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: all 0.2s ease;
}

.file-input-wrapper:hover {
    border-color: rgba(0, 242, 254, 0.4);
}

.file-input-wrapper:focus-within {
    border-color: var(--color-accent-cyan);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.15);
}

/* 2. The Hidden Input */
.file-input {
    display: none;
}

/* 3. The Black Button */
.choose-file-button {
    /* Layout & Centering */
    display: flex;
    /* CRITICAL: Enables centering inside the label */
    align-items: center;
    /* Centers text vertically */
    justify-content: center;
    /* Centers text horizontally */

    /* Sizing & Spacing */
    height: 100%;
    /* Fills the container height */
    padding: 0 20px;
    /* Horizontal padding */
    margin: 0;
    flex-shrink: 0;
    /* Prevents button from squishing */

    /* Visuals */
    background-color: #000000;
    color: var(--color-accent-cyan);
    border-right: 1px solid var(--color-accent-cyan);
    border-radius: 0;
    cursor: pointer;

    /* Typography */
    font-weight: 700;
    font-size: 0.9vw;
    line-height: 1;
    /* Resets line-height to prevent shifting */
}

/* 4. The Filename Text */
.file-name {
    /* Layout & Centering */
    display: flex;
    /* CRITICAL: Enables centering */
    align-items: center;
    /* Centers text vertically */

    /* Sizing */
    height: 100%;
    flex-grow: 1;
    /* Takes up remaining space */
    padding: 0 15px;

    /* Typography & Truncation */
    color: var(--color-text-light);
    font-size: 0.9vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-name {
    color: var(--color-text-light);
    padding: 0 15px;
    font-size: 0.9vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;

    /* NEW: Flex centering for the text */
    display: flex;
    align-items: center;
    height: 100%;
    /* Force full height */
}

.submit-post-button {
    width: 100%;
    padding: 12px;
    background-color: transparent;
    color: var(--color-accent-cyan);
    font-weight: 700;
    border: 1px solid var(--color-accent-cyan);
    border-radius: 4px;
    font-size: 0.8em;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.2s ease;
}

.submit-post-button:hover {
    background-color: rgba(0, 242, 254, 0.08);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.25);
    transform: translateY(-1px);
}

/* -------------------------------------------
 * 8. ACCOUNT DASHBOARD MODAL STYLES (NEW)
 * ------------------------------------------- */
#accountModalOverlay .modal-content-container {
    background: #04080b;
    border-color: var(--color-accent-cyan);
}

.account-modal-body {
    display: flex;
    flex-grow: 1;
    height: calc(100% - 44px);
}

/* --- Account Sidebar --- */
.account-sidebar {
    width: 240px;
    flex-shrink: 0;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    background: rgba(2, 6, 10, 0.6);
    border-right: 1px solid rgba(0, 242, 254, 0.2);
    overflow-y: auto;
    /* Safety scroll */
}

.account-user-info {
    text-align: center;
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    padding-bottom: 10px;
    /* Reduced from 20px */
    margin-bottom: 10px;
    /* Reduced from 20px */
}

.account-profile-pic-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
}

.account-profile-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--color-accent-cyan);
    object-fit: cover;
    display: block;
}

/* Account dashboard avatar frames — defined here (not gamification.css) to prevent flash on load */
.account-profile-pic.neo-frame-white  { border-color: #FFFFFF; box-shadow: 0 0 8px #FFFFFF, 0 0 12px rgba(255,255,255,0.4); }
.account-profile-pic.neo-frame-cyan   { border-color: #00FFFF; box-shadow: 0 0 8px #00FFFF, 0 0 12px rgba(0,255,255,0.5); }
.account-profile-pic.neo-frame-purple { border-color: #9945FF; box-shadow: 0 0 8px #9945FF, 0 0 12px rgba(153,69,255,0.5); }
.account-profile-pic.neo-frame-red    { border-color: #FF4444; box-shadow: 0 0 8px #FF4444, 0 0 12px rgba(255,68,68,0.5); }
.account-profile-pic.neo-frame-gold   { border-color: #FFD700; box-shadow: 0 0 8px #FFD700, 0 0 12px rgba(255,215,0,0.5); animation: frame-pulse-gold 2s ease-in-out infinite; }
.account-profile-pic.neo-frame-rainbow { border-color: transparent; position: relative; }

.account-profile-pic-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--color-accent-cyan);
    background: rgba(0, 242, 254, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-cyan);
    font-size: 28px;
}

.account-username {
    font-size: 11px;
    font-family: 'Space Mono', monospace;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    letter-spacing: 0.5px;
}

.account-member-since {
    font-size: 8px;
    font-family: 'Space Mono', monospace;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.5px;
    margin: 4px 0 0 0;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Compact spacing */
    flex-grow: 1;
    /* Push logout button to bottom */
}

.account-nav-link {
    padding: 7px 12px;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 600;
    font-size: 9px;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-left: 2px solid transparent;
}

.account-nav-link:hover {
    background: rgba(0, 242, 254, 0.04);
    color: rgba(255, 255, 255, 0.7);
}

.account-nav-link.active {
    background: rgba(0, 242, 254, 0.06);
    color: rgba(0, 242, 254, 0.8);
    font-weight: 700;
    border-left: 2px solid rgba(0, 242, 254, 0.5);
}



.logout-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    border-radius: 3px;
}

.logout-btn:hover {
    background: rgba(255, 59, 59, 0.08);
    border-color: rgba(255, 59, 59, 0.4);
    color: rgba(255, 59, 59, 0.8);
    box-shadow: none;
}

/* --- Account Content Area --- */
.account-content {
    flex-grow: 1;
    padding: 30px 40px;
    overflow-y: auto;
}

/* Styles for tabbing */
.account-content-pane {
    display: none;
}

.account-content-pane.active {
    display: block;
}

.account-content-title {
    color: rgba(0, 242, 254, 0.5);
    font-size: 9px;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    text-shadow: none;
}

.account-content-title::before {
    content: '// ';
    opacity: 0.4;
}

.account-content-subtitle {
    font-size: 11px;
    font-family: 'Space Mono', monospace;
    color: rgba(255, 255, 255, 0.2);
    margin-top: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
}

.account-content .form-group input[readonly] {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-dim);
    cursor: not-allowed;
}

.account-content .form-group input.status-verified[readonly] {
    color: var(--color-positive);
    font-weight: 700;
}

/* --- Settings Pane Styles (Screenshot 2) --- */
.account-divider {
    border: none;
    height: 1px;
    background: rgba(0, 242, 254, 0.2);
    margin: 25px 0;
}

.account-section-title {
    color: var(--color-text-light);
    font-size: 1.2em;
    margin-bottom: 20px;
}

.form-group-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.form-group-inline label {
    font-size: 0.9em;
    color: var(--color-text-dim);
    font-weight: 500;
}

/* Style for settings inputs/buttons */
.form-group-inline input[type="text"],
.form-group-inline select {
    padding: 8px 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-accent-cyan);
    border-radius: 4px;
    color: var(--color-text-light);
    font-size: 0.9em;
    width: 250px;
}

.form-group-inline .btn {
    width: auto;
    padding: 8px 15px;
    font-size: 13px;
}

.form-group-stacked {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    width: 250px;
}

/* Simple styled checkbox */
input[type="checkbox"].styled-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--color-accent-cyan) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

input[type="checkbox"].styled-checkbox:checked {
    background: var(--color-accent-cyan) !important;
    border-color: var(--color-accent-cyan) !important;
}

input[type="checkbox"].styled-checkbox:checked::after {
    content: '✓' !important;
    color: #000 !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: block !important;
}

/* -------------------------------------------
 * 9. REGISTRATION MODAL STYLES (NEW)
 * ------------------------------------------- */
.register-modal-content {
    background: #04080b;
    border-color: var(--color-border);
    padding: 0;
}

.register-modal-body {
    display: flex;
    height: calc(100% - 44px);
    overflow: hidden;
}

/* --- Left Panel: Social Login --- */
.social-login-panel {
    width: 240px;
    flex-shrink: 0;
    padding: 24px 20px;
    background: rgba(2, 6, 10, 0.6);
    border-right: 1px solid rgba(0, 242, 254, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.register-title {
    color: var(--color-accent-cyan);
    font-size: 1.1em;
    margin: 0 0 4px 0;
    text-shadow: none;
}

.register-subtitle {
    font-size: 0.8em;
    color: var(--color-text-dim);
    margin-top: 0;
    margin-bottom: 20px;
}

.social-btn {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.social-icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    background: white;
    padding: 3px;
    border-radius: 50%;
}

/* Specific Social Button Colors */
.google-btn {
    background-color: #000000;
    color: white;
    border-color: #000000;

}

.google-btn:hover {
    background-color: #357ae8;
    box-shadow: 0 0 15px rgba(66, 133, 244, 0.5);
}

.x-btn {
    background-color: #000000;
    color: white;
    border-color: #000000;
}

.x-btn:hover {
    background-color: #1a1a1a;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.divider {
    color: var(--color-text-dim);
    margin: 30px 0;
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 0.8em;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: rgba(0, 242, 254, 0.2);
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

.form-group-login {
    margin-top: 20px;
}

.form-group-login p {
    font-size: 0.9em;
    color: var(--color-text-dim);
}


/* --- Right Panel: Full Registration Form --- */
.full-registration-panel {
    flex-grow: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.full-registration-panel .form-group {
    margin-bottom: 12px;
}

.full-registration-panel .form-two-col {
    gap: 12px;
}

.full-registration-panel .register-subtitle {
    margin-bottom: 12px;
}

.profile-pic-upload {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.profile-pic-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(0, 242, 254, 0.3);
    object-fit: cover;
    margin-right: 14px;
}

.small-btn {
    padding: 8px 15px;
    font-size: 0.8em;
    cursor: pointer;
}

.form-two-col {
    display: flex;
    gap: 20px;
}

.form-two-col .form-group {
    flex: 1;
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    font-size: 0.85em;
}

.form-group-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin-right: 8px;
}

.full-width-btn {
    width: 100%;
    padding: 10px;
    font-size: 0.9em;
}

/* Ensure the Google icon is visible by giving it a solid white background */
.social-icon {
    /* Existing shared properties for all social icons */
    width: 24px;
    height: 24px;
    margin-right: 15px;
    background: white;
    /* <-- ADDED WHITE BACKGROUND HERE (shared) */
    padding: 3px;
    border-radius: 50%;
}

.social-icon.google-icon {
    /* Override for specific Google icon size */
    padding: 3px;
    width: 28px;
    height: 28px;
}

/* Ensure the X icon, which is black/dark, keeps its necessary styling */
.social-icon.x-icon {
    background: white;
    width: 28px;
    height: 28px;
    padding: 3px;
}

/* -------------------------------------------
 * 10. LOGIN MODAL SPECIFIC STYLES (NEW)
 * ------------------------------------------- */
.login-modal-body {
    padding: 30px;
    overflow-y: visible;
}




/* ----------------------------------------------------
 * 5. RESIZABLE, DRAGGABLE FLOATING WINDOW MANAGER - ENHANCED v2.0
 * ---------------------------------------------------- */
#floating-windows-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999999 !important;
    /* Above account modal (999999) so floating windows/charts appear on top */
}

/* FIX: Prevents iframes (charts/news) from stealing mouse events during resize */
body.resizing iframe {
    pointer-events: none !important;
}

.floating-window {
    position: absolute;
    background: linear-gradient(145deg, rgba(6, 12, 20, 0.98) 0%, rgba(4, 8, 15, 0.96) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 0 40px rgba(0, 242, 254, 0.08),
        0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    min-width: 350px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: windowOpen 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 25000;
    /* Above modals (20000) so charts appear on top of account dashboard */
}

@keyframes windowOpen {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.floating-window::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 242, 254, 0.5) 50%, transparent 100%);
    z-index: 20005;
    /* Highest priority */
}

.floating-window.active {
    border-color: rgba(0, 242, 254, 0.5);
    box-shadow:
        0 0 80px rgba(0, 242, 254, 0.2),
        0 25px 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.window-header {
    height: 44px;
    background: linear-gradient(180deg, rgba(0, 242, 254, 0.08) 0%, rgba(0, 242, 254, 0.02) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid rgba(0, 242, 254, 0.15);
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.window-title {
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 50px);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* .window-close-btn — consolidated into universal close button rule above */

.window-content {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #fff;
}

.window-content-body {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 24px;
    box-sizing: border-box;
    background: transparent;
    font-size: 14px;
    line-height: 1.6;
}

/* Custom Scrollbar for Window Content */
.window-content-body::-webkit-scrollbar {
    width: 6px;
}

.window-content-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.window-content-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 242, 254, 0.4), rgba(0, 242, 254, 0.2));
    border-radius: 3px;
}

.window-content-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0, 242, 254, 0.6), rgba(0, 242, 254, 0.3));
}

/* Resizer Handles (FOR ALL FOUR CORNERS) */
.window-resizer {
    position: absolute;
    width: 12px;
    height: 12px;
    /* INCREASED Z-INDEX: Ensures resizers sit above the header/title */
    z-index: 20;
    opacity: 1;
    background: var(--color-glow);
    box-shadow: 0 0 5px var(--color-glow);
}

/* --- Top Left (Your existing one) --- */
.window-resizer.top-left {
    top: 0;
    left: 0;
    cursor: nwse-resize;
    /* Diagonal cursor \ */
    border-bottom-right-radius: 4px;
}

/* --- Top Right (Your existing one) --- */
.window-resizer.top-right {
    top: 0;
    right: 0;
    cursor: nesw-resize;
    /* Diagonal cursor / */
    border-bottom-left-radius: 4px;
}

/* --- Bottom Left (MISSING - ADD THIS) --- */
.window-resizer.bottom-left {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
    /* Diagonal cursor / */
    border-top-right-radius: 4px;
}

/* --- Bottom Right (MISSING - ADD THIS) --- */
.window-resizer.bottom-right {
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
    /* Diagonal cursor \ */
    border-top-left-radius: 4px;
}

/* --- COMMENT SECTION STYLES - ENHANCED v2.0 --- */
.comment-item {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-radius: 12px;
    border-left: 3px solid rgba(0, 242, 254, 0.4);
    transition: all 0.2s ease;
}

.comment-item:hover {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.05) 0%, rgba(0, 242, 254, 0.02) 100%);
    border-left-color: var(--color-accent-cyan);
    transform: translateX(4px);
}

.comment-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comment-date {
    white-space: nowrap;
}

.comment-author {
    color: var(--color-accent-cyan);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
    cursor: pointer;
    transition: all 0.2s;
}

.comment-author:hover {
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.5);
}

.comment-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

/* Comment Action Buttons (Edit/Delete) */
.comment-actions {
    opacity: 1 !important;
    transition: opacity 0.2s ease;
    display: flex !important;
    gap: 6px !important;
    margin-left: auto !important;
}

/* Enable hover effect later:
.comment-actions {
    opacity: 0.3;
}
.comment-item:hover .comment-actions {
    opacity: 1;
}
*/

.btn-edit-comment,
.btn-delete-comment {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.btn-edit-comment {
    color: var(--color-accent-cyan) !important;
}

.btn-edit-comment:hover {
    color: #00FFFF !important;
    transform: scale(1.15);
}

.btn-delete-comment {
    color: var(--color-negative) !important;
}

.btn-delete-comment:hover {
    color: #FF0000 !important;
    transform: scale(1.15);
}

#postCommentsList {
    padding: 16px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    margin-top: 8px;
}

#postCommentsList::-webkit-scrollbar {
    width: 5px;
}

#postCommentsList::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

#postCommentsList::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 242, 254, 0.4), rgba(0, 242, 254, 0.2));
    border-radius: 3px;
}

/* --- POST DETAIL VIEW STYLES - ENHANCED v2.0 --- */
/* ================================================
   POST VIEW MODAL — TWO-COLUMN LAYOUT
   ================================================ */

/* Two-column wrapper */
.post-view-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 0;
    min-height: 100%;
}

/* Left column */
.post-view-main {
    min-width: 0;
    padding-right: 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* Hero image — bleeds to left/top edges */
/* Ideal upload size: 780×260px landscape */
.post-hero {
    position: relative;
    width: calc(100% + 30px);
    margin: -30px -30px 0 -30px;
    height: 260px;
    overflow: hidden;
}

.post-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    cursor: zoom-in;
    transition: transform 0.4s ease;
}

.post-hero:hover .post-hero-img {
    transform: scale(1.02);
}

.post-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(6, 13, 20, 0.9) 100%);
    pointer-events: none;
}

/* Title block */
.post-view-header {
    padding-top: 20px;
    margin-bottom: 20px;
}

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

.post-view-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-family: 'Space Mono', monospace;
    flex: 1;
}

.post-view-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.post-view-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.post-view-action-btn:hover {
    border-color: rgba(0, 242, 254, 0.3);
    color: var(--color-accent-cyan);
    background: rgba(0, 242, 254, 0.05);
}

.post-view-action-btn.bookmarked {
    color: #ffb300;
    border-color: rgba(255, 179, 0, 0.4);
    background: rgba(255, 179, 0, 0.08);
}

/* Teal divider */
.post-view-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 242, 254, 0.3) 0%, rgba(0, 242, 254, 0.05) 40%, transparent 100%);
}

/* Section label */
.post-view-section-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(0, 242, 254, 0.4);
    text-transform: uppercase;
    margin: 20px 0 12px 0;
}

/* Post body content */
.post-main-content {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    line-height: 1.9;
    margin-bottom: 20px;
}

.post-main-content p {
    margin-bottom: 1.1em;
}

/* ================================================
   RIGHT SIDEBAR
   ================================================ */
.post-view-sidebar {
    padding-left: 20px;
}

.post-view-info-card {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Author block */
.post-sidebar-author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 14px 0;
}

.post-sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-cyan), #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    flex-shrink: 0;
    border: 1px solid rgba(0, 242, 254, 0.3);
    position: relative;
    overflow: hidden;
}

.post-sidebar-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-sidebar-avatar span {
    position: relative;
    z-index: 1;
}

.post-sidebar-label {
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.post-sidebar-author-name {
    font-size: 12px;
    color: var(--color-accent-cyan);
    font-weight: 600;
    font-family: 'Space Mono', monospace;
    cursor: pointer;
    transition: color 0.2s;
}

.post-sidebar-author-name:hover {
    color: #fff;
}

.post-sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 2px 0;
}

/* Info rows */
.post-sidebar-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.post-sidebar-icon {
    width: 14px;
    height: 14px;
    stroke: rgba(0, 242, 254, 0.5);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: 2px;
}

.post-sidebar-value {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    line-height: 1.3;
}

/* Stats row */
.post-sidebar-stats {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.post-sidebar-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.post-sidebar-stat-num {
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

/* Social proof / commenter avatars */
.post-view-social {
    padding-top: 14px;
}

.post-view-social-label {
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(0, 242, 254, 0.4);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.post-view-avatars {
    display: flex;
    align-items: center;
}

.post-view-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(6, 13, 20, 1);
    object-fit: cover;
    margin-left: -6px;
}

.post-view-avatars .post-view-avatar:first-child {
    margin-left: 0;
}

.post-view-avatar-count {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 242, 254, 0.1);
    border: 2px solid rgba(0, 242, 254, 0.2);
    color: var(--color-accent-cyan);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    font-family: 'Space Mono', monospace;
}

/* Leaflet venue map in sidebar */
.post-sidebar-map {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 242, 254, 0.15);
    height: 160px;
    width: 100%;
}

/* Venue autocomplete dropdown */
.venue-autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99999;
    background: rgba(8, 14, 22, 0.98);
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 100;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.venue-autocomplete-item {
    padding: 8px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    line-height: 1.4;
    transition: background 0.15s;
}

.venue-autocomplete-item:hover {
    background: rgba(0, 242, 254, 0.08);
    color: #fff;
}

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

/* Responsive — stack on narrow screens */
@media (max-width: 700px) {
    .post-view-layout {
        grid-template-columns: 1fr;
    }
    .post-view-main {
        padding-right: 0;
        border-right: none;
    }
    .post-view-sidebar {
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 16px;
    }
    .post-view-info-card {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }
    .post-sidebar-stats {
        width: 100%;
    }
}

/* Discussion Section Header */
.discussion-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 242, 254, 0.15);
}

.discussion-section-header::before {
    content: '💬';
    font-size: 18px;
}

.discussion-title {
    color: var(--color-accent-cyan);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Reply Input Area */
.reply-input-area {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(0, 242, 254, 0.1);
}

#replyInput {
    flex-grow: 1;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(0, 242, 254, 0.25);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 13px;
    font-family: 'Inter', system-ui, sans-serif;
    transition: all 0.2s ease;
}

#replyInput:focus {
    outline: none;
    border-color: var(--color-accent-cyan);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.15), inset 0 0 10px rgba(0, 242, 254, 0.05);
}

#replyInput::placeholder {
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

#submitReplyBtn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.9) 0%, rgba(18, 96, 120, 0.9) 100%);
    color: #000;
    border: none;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

#submitReplyBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 242, 254, 0.4);
    background: linear-gradient(135deg, var(--color-accent-cyan) 0%, rgba(18, 96, 120, 1) 100%);
}

#submitReplyBtn:active {
    transform: translateY(0);
}

/* Empty State */
.no-comments-message {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 9px;
    font-family: 'Space Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.no-comments-message::before {
    content: '[ — ]';
    display: block;
    font-size: 11px;
    margin-bottom: 8px;
    opacity: 0.3;
    font-family: 'Space Mono', monospace;
}

/* Post modal — bookmark/share buttons terminal style */
.post-bookmark-btn,
.post-share-btn {
    border-radius: 3px !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.4) !important;
    padding: 4px 10px !important;
    font-size: 9px !important;
}

.post-bookmark-btn:hover,
.post-share-btn:hover {
    border-color: rgba(0,242,254,0.3) !important;
    color: rgba(0,242,254,0.85) !important;
    background: rgba(0,242,254,0.05) !important;
}


/* --- PUBLIC PROFILE STYLES --- */

/* 1. Make usernames look clickable */
.chat-message-bubble .sender,
.post-meta-header .user-link {
    cursor: pointer;
    transition: color 0.2s;
    border-bottom: 1px dotted transparent;
}

.chat-message-bubble .sender:hover,
.post-meta-header .user-link:hover {
    color: var(--color-accent-cyan);
    text-shadow: 0 0 5px var(--color-accent-cyan);
    border-bottom-color: var(--color-accent-cyan);
}

/* 2. The Profile Card Layout */
.profile-card-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px 20px;
}

/* Make the parent floating window glass-like for profile cards */
.window-content-body:has(.profile-card-container) {
    background: transparent;
}

.window-content-body:has(.profile-card-container) ~ .window-drag-handle,
.floating-window:has(.profile-card-container) {
    background: linear-gradient(145deg, rgba(6, 12, 20, 0.55) 0%, rgba(4, 8, 15, 0.45) 100%) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
}

/* Subtle radial glow at top so text stays readable over any background */
.profile-card-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 242, 254, 0.08) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 16px 16px 0 0;
}

/* Avatar hero section */
.profile-card-container .profile-avatar-wrap {
    position: relative;
    margin-bottom: 18px;
}

.public-profile-pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid rgba(0, 242, 254, 0.6);
    box-shadow:
        0 0 0 4px rgba(0, 242, 254, 0.08),
        0 0 24px rgba(0, 242, 254, 0.35),
        0 4px 20px rgba(0, 0, 0, 0.5);
    object-fit: cover;
    display: block;
}

.public-username {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text-light);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Space Mono', monospace;
}

/* Status / role badge row */
.profile-card-container .profile-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Bio block */
.public-bio {
    font-size: 12px;
    color: var(--color-text-dim);
    font-style: italic;
    margin: 0 0 18px 0;
    line-height: 1.6;
    width: 100%;
    background: rgba(0, 242, 254, 0.03);
    border: 1px solid rgba(0, 242, 254, 0.08);
    padding: 10px 14px;
    border-radius: 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Member since footer line */
.public-meta {
    font-size: 10px;
    color: rgba(0, 242, 254, 0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: 'Space Mono', monospace;
    border-top: 1px solid rgba(0, 242, 254, 0.1);
    padding-top: 14px;
    width: 100%;
    margin-top: 4px;
}


/* --- GLOBAL TEXT WRAPPING FIXES --- */

/* Fix Modal Titles & Window Titles */
#viewPostTitle,
.post-modal-body h2,
.window-title {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    /* Forces break on long strings */
    line-height: 1.3;
    max-width: 100%;
}

/* Fix Post Body Content & Comments */
.post-modal-body,
.post-main-content,
.comment-text {
    /* This handles long strings (like crypto addresses) by breaking them ONLY if they don't fit */
    overflow-wrap: anywhere;

    /* This keeps normal words (like "every") together */
    word-break: normal;

    /* Legacy support */
    word-wrap: break-word;

    max-width: 100%;
    box-sizing: border-box;
}

/* --- ACCOUNT STATUS COLORS --- */
input.status-admin {
    color: var(--color-accent-cyan) !important;
    text-shadow: 0 0 5px var(--color-accent-cyan);
    font-weight: 800 !important;
    text-transform: uppercase;
}

input.status-member,
input.status-verified {
    color: var(--color-positive) !important;
    /* Green */
    font-weight: 700 !important;
    text-transform: uppercase;
}

input.status-banned,
input.status-suspended {
    color: var(--color-negative) !important;
    /* Red */
    font-weight: 700 !important;
    text-transform: uppercase;
}

input.status-pro {
    color: #ffd700 !important;
    /* Gold */
    text-shadow: 0 0 5px #ffd700;
    font-weight: 800 !important;
    text-transform: uppercase;
}

#viewPostCloseBtn {
    position: relative;
    z-index: 5000;
    /* Force it above everything else in the header */
}

/* ==========================================================================
   MOBILE RESPONSIVENESS (Max Width 768px) - FINAL SCROLL & ORDER FIX
   ========================================================================== */
@media only screen and (max-width: 768px) {

    /* 1. UNLOCK SCROLLING (CRITICAL FIX) */
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        /* Prevent side-scroll */
        overflow-y: auto !important;
        /* Enable vertical scroll */
        position: static !important;
    }

    /* 2. HEADER REORGANIZATION */
    .site-head-wrapper {
        height: auto !important;
        position: relative !important;
        /* Unstick it so it scrolls away */
    }

    .site-head {
        display: flex;
        flex-direction: column;
        /* Stack items vertically */
        align-items: center;
        height: auto !important;
        padding: 15px 10px;
        gap: 15px;
    }

    .logo-area {
        margin: 0;
    }

    .center-tagline {
        display: none;
    }

    /* Container for buttons */
    .nav-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        /* 3 buttons in a row */
        gap: 8px;
        width: 100%;
        order: 2;
    }

    /* Style the buttons to fit */
    .nav-actions .btn {
        width: 100%;
        padding: 8px 0;
        font-size: 12px;
        text-align: center;
    }

    /* Welcome Text: Move to very top */
    .nav-actions>span {
        grid-column: span 3;
        text-align: center;
        order: -1;
        margin-bottom: 5px;
        font-size: 14px !important;
    }

    /* 3. DASHBOARD STACKING & ORDERING */
    .custom-homepage {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 15px 10px 80px 10px;
        /* Bottom padding for Chat Bar */
        gap: 20px;
        overflow: visible !important;
    }

    /* --- CRITICAL: FORCE THE ORDER OF SECTIONS --- */
    .section-categories-container {
        order: 1 !important;
    }

    /* Posts Top */
    .section-watchlist-container {
        order: 2 !important;
    }

    /* Watchlist */
    .section-chart-container {
        order: 3 !important;
    }

    /* Charts */
    .section-news-container {
        order: 4 !important;
    }

    /* News Bottom */

    /* 4. SECTIONS GENERAL STYLE */
    section {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 15px !important;
        overflow: visible !important;
    }

    /* 5. COMMUNITY POSTS SPECIFICS */
    .categories-header {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }

    #openPostModalHeaderBtn {
        width: 100% !important;
    }

    .categories {
        grid-template-columns: 1fr !important;
        /* 1 Column for readability */
        gap: 15px;
    }

    /* Ensure lists are visible on mobile */
    .categories-wrapper {
        height: auto !important;
        overflow: visible !important;
    }

    .post-list {
        display: block !important;
    }

    /* 6. CHAT WIDGET (Fixed to Bottom) */
    /* Removing conflicting rules - handled in mobile.css */
    /*
    #chat-widget-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 50px;
        border-radius: 0 !important;
        z-index: 9999;
    }

    #chat-widget-container:not(.minimized) {
        height: 80vh !important;
        border-top: 2px solid var(--color-accent-cyan);
    }
    */

    /* 7. MODALS */
    .modal-content-container {
        width: 95% !important;
        height: 90% !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* Share Modal Mobile Adjustments */
    #sharePostModalOverlay .modal-content-container {
        width: 95% !important;
        height: auto !important;
        max-height: 85vh !important;
    }

    #sharePostModalOverlay .post-modal-body {
        padding: 15px !important;
    }

    #shareOptionsGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .share-option-btn {
        padding: 15px 10px !important;
        font-size: 9px !important;
    }

    .share-option-btn i {
        font-size: 24px !important;
    }

    #sharePostUrl {
        font-size: 11px !important;
        padding: 8px !important;
    }

    #copyShareLinkBtn {
        font-size: 9px !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
    }

    /* Bookmark and Share buttons in post modal - make more compact on mobile */
    .post-bookmark-btn.glitch-btn,
    .post-share-btn.glitch-btn {
        padding: 5px 8px !important;
        font-size: 8px !important;
        gap: 4px !important;
        margin-left: 8px !important;
    }

    .post-bookmark-btn.glitch-btn i,
    .post-share-btn.glitch-btn i {
        font-size: 10px !important;
    }

    /* Post card footer icons - ensure they're visible and tappable */
    .post-card-footer {
        gap: 10px !important;
        font-size: 11px !important;
    }

    .post-stat {
        min-width: 32px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Make bookmark and share icons in footer more touch-friendly */
    .post-bookmark-icon,
    .post-share-icon {
        padding: 6px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Touch feedback for share buttons */
    .share-option-btn:active {
        transform: scale(0.95) !important;
        opacity: 0.8;
    }

    /* -------------------------------------------------------
       8. FLOATING WINDOWS MOBILE FIX (Charts, News, Profiles)
       ------------------------------------------------------- */

    /* 1. Fix the Containers to the Viewport */
    /* This ensures windows open in the center of your SCREEN, not the top of the PAGE */
    #floating-windows-container,
    #floating-overlay-container {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Z-Indexes remain 3000 and 7000 as defined in main CSS */
    }

    /* 2. Force Size and Position on the Windows */
    .floating-window {
        /* Override the JS width/height calculations */
        width: 90% !important;
        height: 70vh !important;

        /* Center the window */
        left: 5% !important;
        top: 15% !important;

        /* Ensure it stays fixed so you don't scroll away from it */
        position: absolute !important;
    }

    /* 3. Fix Header Size inside windows */
    .window-title {
        font-size: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 4. Hide Resize Handles on Mobile (Hard to use with touch) */
    .window-resizer {
        display: none !important;
    }

    /* -------------------------------------------------------
       9. ENHANCED v2.0 MOBILE OVERRIDES
       ------------------------------------------------------- */

    /* Post Cards - Touch Friendly */
    .post-card-top {
        padding: 12px 12px 8px 12px !important;
    }

    .post-card-meta {
        padding: 8px 12px 10px 12px !important;
        gap: 8px !important;
    }

    .post-card-title {
        font-size: 13px !important;
    }

    .post-card-excerpt {
        font-size: 11px !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    .post-category-badge {
        font-size: 8px !important;
    }

    .post-card-thumb {
        width: 38px !important;
        height: 38px !important;
    }

    /* Modal Enhancements */
    .modal-content-container {
        border-radius: 12px !important;
    }

    .modal-header {
        height: 50px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
    }

    .post-modal-body {
        padding: 20px !important;
    }

    .form-group label {
        font-size: 12px !important;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 14px 16px !important;
        font-size: 16px !important;
        /* Prevents iOS zoom */
        border-radius: 8px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* datetime-local needs explicit width constraint on iOS */
    input[type="datetime-local"]#postEventDate {
        width: calc(100% - 0px) !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px !important;
        font-size: 14px !important;
    }

    #eventDateGroup {
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #createPostModalOverlay .modal-content-container {
        width: 95% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #createPostModalOverlay .post-modal-body {
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Modal Buttons - Touch Friendly */
    .modal-btn,
    .post-modal-body button[type="submit"],
    button#submit-post-btn,
    button#createChannelSubmit {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }

    /* Chat Widget - Full Screen Mode */
    #chat-widget-container:not(.minimized) {
        height: 100vh !important;
        border-radius: 0 !important;
        border-top: none !important;
    }

    .chat-header {
        height: 50px !important;
        padding: 0 16px !important;
    }

    .chat-rooms-sidebar {
        width: 100px !important;
    }

    .chat-room-item {
        padding: 12px 10px !important;
        font-size: 11px !important;
    }

    #chat-input-area {
        padding: 12px !important;
    }

    #chat-input,
    .chat-input-div {
        padding: 14px !important;
        font-size: 16px !important;
        /* Prevents iOS zoom */
    }

    #chat-send-btn {
        padding: 14px 20px !important;
        font-size: 13px !important;
    }

    /* Post Detail View */
    .post-meta-header h2 {
        font-size: 1.3rem !important;
    }

    .post-featured-image {
        max-height: 200px !important;
        border-radius: 8px !important;
    }

    .comment-item {
        padding: 12px 14px !important;
    }

    /* Reply Input Area */
    .reply-input-area {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    #replyInput {
        width: 100% !important;
        font-size: 16px !important;
        /* Prevents iOS zoom */
    }

    #submitReplyBtn {
        width: 100% !important;
        padding: 14px !important;
    }

    /* Floating Window Full Screen on Mobile */
    .floating-window {
        width: 100% !important;
        height: 100vh !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 0 !important;
    }

    .window-header {
        height: 50px !important;
    }

    .window-content-body {
        padding: 16px !important;
    }

    /* ===========================================================
       ACCOUNT MODAL MOBILE FIX - Saved Posts & Tokens Z-Index
       =========================================================== */

    /* Fix: Account modal full screen on mobile */
    #accountModalOverlay .modal-content-container {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    /* Fix: Account modal body stacking */
    .account-modal-body {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 44px) !important;
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Fix: Sidebar horizontal on mobile */
    .account-sidebar {
        width: 100% !important;
        flex-shrink: 0 !important;
        max-height: none !important;
        padding: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-bottom: 1px solid var(--color-border) !important;
        border-right: none !important;
        position: relative !important;
        z-index: 2 !important; /* Above content */
        background: var(--color-base) !important;
    }

    /* Hide profile pic and user info on mobile to save space */
    .account-user-info {
        display: none !important;
    }

    /* Navigation tabs horizontal scroll */
    .account-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        gap: 8px !important;
        padding: 5px 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .account-nav-link {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        font-size: 0.8em !important;
    }

    .logout-btn {
        display: none !important; /* Hide logout on mobile */
    }

    /* Fix: Content area proper positioning and z-index */
    .account-content {
        position: relative !important;
        z-index: 1 !important; /* Below sidebar */
        padding: 15px !important;
        flex: 1 1 auto !important; /* Take remaining space */
        min-height: 0 !important; /* Allow flex shrinking */
        overflow-y: auto !important;
        overflow-x: hidden !important; /* Hide horizontal overflow */
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Fix: Content panes proper display */
    .account-content-pane {
        position: relative !important;
        z-index: 1000000 !important; /* Above account modal (999999) */
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .account-content-pane.active {
        display: block !important;
        position: relative !important;
        z-index: 1000000 !important; /* Above account modal (999999) */
        width: 100% !important;
    }

    /* Fix: Saved posts container */
    #saved-posts-container,
    #myTokensList {
        position: relative !important;
        z-index: 1000001 !important; /* Above content panes */
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix: Buttons and items within saved posts */
    .saved-post-view-btn,
    .saved-post-remove-btn,
    .user-post-list li {
        position: relative !important;
        z-index: 1000002 !important; /* Above container */
    }

    /* Fix: User post list items */
    .user-post-list {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .user-post-list li {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
    }

    /* Fix: Buttons in saved posts to wrap on small screens */
    .saved-post-view-btn,
    .saved-post-remove-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    /* Fix: Back button visibility (for saved posts and tokens - account dashboard only) */
    .account-content-pane .mobile-widget-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: var(--color-base) !important;
        margin: -15px -15px 15px -15px !important;
        padding: 15px !important;
        border-bottom: 1px solid var(--color-border);
    }

    /* Fix: Import token button cut off */
    .account-content-pane#pane-tokens .btn {
        width: auto !important;
        white-space: nowrap !important;
        font-size: 0.85em !important;
    }

    #importTokenCA {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* Fix: Token import section mobile layout */
    #pane-tokens > div[style*="background: rgba(217, 70, 239"] {
        padding: 10px !important;
    }

    #pane-tokens > div[style*="background: rgba(217, 70, 239"] > div {
        flex-direction: column !important;
    }

    #btnImportToken {
        width: 100% !important;
        margin-top: 8px !important;
    }
}

/* --- CHAT INPUT EXTRAS --- */
.icon-btn {
    background: none;
    border: none;
    color: var(--color-text-dim);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s;
    /* NEW: Add margin to separate icons from input */
    margin-right: 5px;
}

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

.sound-toggle-btn {
    background: transparent;
    border: 1px solid rgba(0, 242, 254, 0.2);
    color: var(--color-text-dim);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 12px;
    vertical-align: middle;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.sound-toggle-btn:hover,
.sound-toggle-btn.active {
    color: var(--color-accent-cyan);
    border-color: var(--color-accent-cyan);
    background: rgba(0, 242, 254, 0.1);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.3);
}

/* Emoji Picker Container */
.emoji-picker {
    position: absolute;
    bottom: 50px;
    /* Moved closer to the input bar */
    left: 10px;
    /* Aligned with the buttons */
    width: 220px;
    /* Slightly wider */
    background: rgba(4, 8, 11, 0.95);
    border: 1px solid var(--color-accent-cyan);
    border-radius: 8px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    z-index: 10000;
    /* Higher than everything */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}



/* =========================================
   FORCE HIDE WORDPRESS FOOTER
   ========================================= */
footer,
#footer,
.site-footer,
#colophon,
.site-info,
.copyright,
.footer-credits,
.wp-block-site-footer,
.powered-by-wordpress {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -9999 !important;
}



/* =========================================
   LIGHT THEME — NEO-SLATE PALETTE
   ========================================= */
body.theme-light {
    /* Color Tokens */
    --color-base: #f1f5f9;
    /* Slate 100 — page bg */
    --color-card-bg: #ffffff;
    /* Pure white cards */
    --color-text-light: #1e293b;
    /* Slate 800 — primary text */
    --color-text-dim: #64748b;
    /* Slate 500 — secondary text */
    --color-accent-cyan: #0e7490;
    /* Teal 700 */
    --color-glow: transparent;
    --color-positive: #15803d;
    /* Green 700 */
    --color-negative: #b91c1c;
    /* Red 700 */
    --color-warning: #b45309;
    /* Amber 700 */
    --color-border: rgba(148, 163, 184, 0.5);

    /* Override the dark gradient body background */
    background: #f1f5f9 !important;
    background-attachment: fixed !important;
    color: var(--color-text-light) !important;
}

/* --- GLOBAL TEXT VISIBILITY FIXES --- */
body.theme-light * {
    text-shadow: none !important;
}

/* Force Titles to be Dark */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light .section-title,
body.theme-light .category-block h3 a,
body.theme-light .category-block h3 span,
body.theme-light .nav-actions span {
    color: #0f172a !important;
    /* Force Dark Text */
    font-weight: 700 !important;
}

/* Subtitles / Links */
body.theme-light .site-description,
body.theme-light .room-list-title,
body.theme-light .coin-name .full-name,
body.theme-light .coin-info .name,
body.theme-light a {
    color: #475569 !important;
    /* Dark Grey */
}

/* Hover States for Links */
body.theme-light a:hover,
body.theme-light .category-block:hover h3 a {
    color: var(--color-accent-cyan) !important;
}

/* --- LOGO FIX --- */
/* The text logo has white .logo-crypto and .logo-nyc spans — make them dark */
body.theme-light .logo-crypto,
body.theme-light .logo-nyc {
    color: #0f172a !important;
    /* Deep navy — was white (invisible on light bg) */
}

body.theme-light .logo {
    border-color: rgba(14, 116, 144, 0.4) !important;
    box-shadow: 0 0 6px rgba(14, 116, 144, 0.15) !important;
}

/* If an image logo is used, keep it visible */
body.theme-light #animated-logo {
    filter: brightness(0.1) !important;
    /* Near-black for any white image logo */
}

/* --- CONTAINER STYLES --- */
body.theme-light .site-head-wrapper,
body.theme-light .modal-content-container,
body.theme-light .floating-window,
body.theme-light #chat-widget-container,
body.theme-light section,
body.theme-light .category-block,
body.theme-light .watchlist-card {
    background: var(--color-card-bg) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* --- INPUTS --- */
body.theme-light input,
body.theme-light textarea,
body.theme-light select,
body.theme-light .chat-input-div {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

body.theme-light input:focus,
body.theme-light textarea:focus {
    background: #ffffff !important;
    border-color: var(--color-accent-cyan) !important;
}

/* --- BUTTONS --- */
body.theme-light .btn {
    box-shadow: none !important;
    color: var(--color-accent-cyan) !important;
    border-color: var(--color-accent-cyan) !important;
    font-weight: 600;
}

body.theme-light .btn:hover {
    background-color: var(--color-accent-cyan) !important;
    color: white !important;
}

body.theme-light .btn.primary {
    background: var(--color-accent-cyan) !important;
    color: white !important;
}

body.theme-light .btn.primary:hover {
    background: #155e75 !important;
}

/* --- POST CONTENT TEXT FIX --- */
/* Post body & modal content text was invisible (used dark-mode gray color) */
body.theme-light .post-modal-body,
body.theme-light .post-modal-body p,
body.theme-light .post-modal-body li,
body.theme-light .post-modal-body h1,
body.theme-light .post-modal-body h2,
body.theme-light .post-modal-body h3,
body.theme-light #viewPostContentArea,
body.theme-light #viewPostContentArea p,
body.theme-light #viewPostContentArea li,
body.theme-light #viewPostContentArea h1,
body.theme-light #viewPostContentArea h2,
body.theme-light #viewPostContentArea h3 {
    color: #1e293b !important;
    /* Slate 800 — readable dark text */
}

/* --- TERMINAL WIDGET LIGHT MODE --- */
/* Override the --terminal-* vars so the widget doesn't look washed-out */
body.theme-light #terminal-widget-container,
body.theme-light .terminal-widget {
    --terminal-bg: #1e293b;
    /* Keep terminal dark — it's a terminal */
    --terminal-main: #00ff88;
    /* Keep green text */
    --terminal-accent: #00d4ff;
    background: #1e293b !important;
}

/* Ensure the scroll body also uses the dark bg */
body.theme-light #terminal-body-scroll,
body.theme-light .terminal-body-scroll {
    background: #1e293b !important;
}

/* .muted lines use rgba(255,255,255,0.5) — fine on dark terminal bg */

/* --- FOOTER LIGHT MODE FIX --- */
/* The .terminal-footer has a hardcoded black gradient — override it */
body.theme-light .terminal-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(14, 116, 144, 0.25) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Footer text, logos, links */
body.theme-light .footer-logo,
body.theme-light .footer-tagline,
body.theme-light .footer-stat,
body.theme-light .footer-copyright,
body.theme-light .footer-link {
    color: #475569 !important;
    /* Slate 500 */
}

body.theme-light .footer-widget-btn {
    color: #64748b !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
    background: rgba(241, 245, 249, 0.8) !important;
}

body.theme-light .footer-widget-btn:hover {
    background: #0e7490 !important;
    color: #ffffff !important;
    border-color: #0e7490 !important;
}


/* =========================================
   DRACULA THEME — Purple Haze
   ========================================= */
body.theme-dracula {
    --color-base: #07060d;
    --color-card-bg: rgba(14, 13, 22, 1);
    --color-text-light: #f8f8f2;
    --color-text-dim: #6272a4;
    --color-accent-cyan: #bd93f9;
    /* Dracula purple */
    --color-glow: #bd93f9;
    --color-positive: #50fa7b;
    /* Dracula green */
    --color-negative: #ff5555;
    /* Dracula red */
    --color-warning: #ffb86c;
    /* Dracula orange */
    --color-border: rgba(189, 147, 249, 0.25);

    background: var(--color-base) !important;
    background-attachment: fixed !important;
    color: var(--color-text-light) !important;
}

/* =========================================
   BLOOD MOON THEME — Red Alert
   ========================================= */
body.theme-blood-moon {
    --color-base: #060003;
    --color-card-bg: rgba(14, 0, 7, 1);
    --color-text-light: #ffd0d0;
    --color-text-dim: #aa6666;
    --color-accent-cyan: #ff2244;
    /* Hot red */
    --color-glow: #ff2244;
    --color-positive: #ff6644;
    /* Orange-red */
    --color-negative: #ff0033;
    --color-warning: #ff8800;
    --color-border: rgba(255, 34, 68, 0.3);

    background: var(--color-base) !important;
    background-attachment: fixed !important;
    color: var(--color-text-light) !important;
}

/* =========================================
   TOKYO NIGHT THEME — Electric Blue
   ========================================= */
body.theme-tokyo {
    --color-base: #06080f;
    --color-card-bg: rgba(12, 13, 22, 1);
    --color-text-light: #a9b1d6;
    --color-text-dim: #565f89;
    --color-accent-cyan: #7aa2f7;
    /* Electric blue */
    --color-glow: #7aa2f7;
    --color-positive: #9ece6a;
    /* Soft green */
    --color-negative: #f7768e;
    /* Pink-red */
    --color-warning: #e0af68;
    /* Gold */
    --color-border: rgba(122, 162, 247, 0.25);

    background: var(--color-base) !important;
    background-attachment: fixed !important;
    color: var(--color-text-light) !important;
}

/* =========================================
   GRUVBOX THEME — Retro Terminal
   ========================================= */
body.theme-gruvbox {
    --color-base: #080807;
    --color-card-bg: rgba(18, 17, 14, 1);
    --color-text-light: #ebdbb2;
    /* Gruvbox fg */
    --color-text-dim: #928374;
    /* Gruvbox gray */
    --color-accent-cyan: #83a598;
    /* Gruvbox aqua */
    --color-glow: #b8bb26;
    --color-positive: #b8bb26;
    /* Gruvbox yellow-green */
    --color-negative: #fb4934;
    /* Gruvbox red */
    --color-warning: #fabd2f;
    /* Gruvbox yellow */
    --color-border: rgba(131, 165, 152, 0.3);

    background: var(--color-base) !important;
    background-attachment: fixed !important;
    color: var(--color-text-light) !important;
}

/* =========================================
   NUCLEAR FIX — KILL ALL CLOUDINESS ON ALT THEMES
   No backdrop blur, no semi-transparent backgrounds.
   ========================================= */

/* 1. Kill ALL blur effects across the entire page for alt themes */
body.theme-dracula *,
body.theme-blood-moon *,
body.theme-tokyo *,
body.theme-gruvbox * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Override blur strength variable for retro themes */
body.theme-gruvbox,
body.theme-dracula,
body.theme-blood-moon,
body.theme-tokyo {
    --blur-strength: 0px;
}

/* 2. Force header to be fully opaque with the theme's base color */
body.theme-dracula .site-head-wrapper,
body.theme-blood-moon .site-head-wrapper,
body.theme-tokyo .site-head-wrapper,
body.theme-gruvbox .site-head-wrapper {
    background: var(--color-base) !important;
}

/* 3. Force footer to match theme */
body.theme-dracula .terminal-footer,
body.theme-blood-moon .terminal-footer,
body.theme-tokyo .terminal-footer,
body.theme-gruvbox .terminal-footer {
    background: var(--color-base) !important;
}

/* =========================================
   LIGHT THEME FIXES (Usernames, Icons, Resizers)
   ========================================= */
/* 2. Fix Invisible Window Controls (X and - buttons) */
body.theme-light .window-close-btn,
body.theme-light #modal-close-btn,
body.theme-light button[aria-label="Close"] {
    color: #64748b !important;
    /* Dark Slate Grey */
}

body.theme-light .window-close-btn:hover {
    color: #dc2626 !important;
    /* Red on hover */
}

/* 3. Fix Invisible Resizers (The grab handles) */
/* They were transparent because we removed the "Glow" variable */
body.theme-light .window-resizer {
    background: #cbd5e1 !important;
    /* Visible Light Grey */
    border: 1px solid #ffffff !important;
    opacity: 1 !important;
}

/* 4. Fix Chat Input Area Borders */
body.theme-light #chat-input-area {
    border-top: 1px solid #cbd5e1 !important;
}

/* 5. Fix "No Messages" / Placeholder Text visibility */
body.theme-light .chat-messages p,
body.theme-light .room-list li {
    color: #64748b !important;
}

/* =========================================
   LIGHT THEME FIX: MODAL CLOSE BUTTONS
   ========================================= */

/* Force all specific modal close buttons to be dark grey */
body.theme-light #add-modal-close-btn,
/* Watchlist */
body.theme-light #post-modal-close-btn,
/* Create Post */
body.theme-light #viewPostCloseBtn,
/* View Post */
body.theme-light #account-modal-close-btn,
/* Account Dashboard */
body.theme-light #register-modal-close-btn,
/* Register */
body.theme-light #login-modal-close-btn,
/* Login */
body.theme-light #walletModalCloseBtn,
/* Wallet Connect */
body.theme-light #sharePostCloseBtn,
/* Share Post */
body.theme-light #channel-modal-close-btn,
/* Create Channel */
body.theme-light #notifyModalCloseBtn,
/* Notifications */
body.theme-light #modal-close-btn {
    /* Generic */
    color: #475569 !important;
    /* Dark Slate Grey */
    opacity: 1 !important;
}

/* Add a Red hover effect for visibility */
body.theme-light #add-modal-close-btn:hover,
body.theme-light #post-modal-close-btn:hover,
body.theme-light #viewPostCloseBtn:hover,
body.theme-light #account-modal-close-btn:hover,
body.theme-light #register-modal-close-btn:hover,
body.theme-light #login-modal-close-btn:hover,
body.theme-light #walletModalCloseBtn:hover,
body.theme-light #sharePostCloseBtn:hover,
body.theme-light #channel-modal-close-btn:hover,
body.theme-light #notifyModalCloseBtn:hover,
body.theme-light #modal-close-btn:hover {
    color: #dc2626 !important;
    /* Red */
    background: transparent !important;
}

/* =========================================
   LIGHT THEME FIX: ACCOUNT SIDEBAR
   ========================================= */

/* 1. Lighter Background for the Sidebar */
body.theme-light .account-sidebar {
    background: #f1f5f9 !important;
    /* Clean Light Grey */
    border-right: 1px solid #cbd5e1 !important;
}

/* 2. Darker Text for User Info */
body.theme-light .account-username {
    color: #0f172a !important;
    /* Deep Navy */
    font-weight: 800;
}

body.theme-light .account-member-since {
    color: #64748b !important;
    /* Slate Grey */
}

/* 3. Navigation Links (Inactive) */
body.theme-light .account-nav-link {
    color: #475569 !important;
    /* Dark Grey */
    font-weight: 600;
}

/* 4. Navigation Links (Hover) */
body.theme-light .account-nav-link:hover {
    background: #e2e8f0 !important;
    /* Slightly darker grey hover */
    color: #0e7490 !important;
    /* Teal Accent */
}

/* 5. Navigation Links (Active/Selected) */
body.theme-light .account-nav-link.active {
    background: #ffffff !important;
    /* Pure White pop */
    color: #0e7490 !important;
    /* Teal Accent */
    border-left: 3px solid #0e7490 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Subtle depth */
}

/* 6. Upload Photo Button */
body.theme-light .profile-pic-upload label.btn {
    color: #0e7490 !important;
    border-color: #0e7490 !important;
}

body.theme-light .profile-pic-upload label.btn:hover {
    background: #0e7490 !important;
    color: #ffffff !important;
}

/* =========================================
   LIGHT THEME FIX: DISCUSSION SECTION
   ========================================= */

/* 1. The Main Container ("The Well") */
body.theme-light .post-comments-section {
    background: #f1f5f9 !important;
    /* Clean Light Grey */
    border-top: 1px solid #cbd5e1 !important;
}

/* 2. Title Text ("Discussion") */
body.theme-light .post-comments-section h3 {
    color: #0f172a !important;
    /* Dark Navy */
    text-shadow: none !important;
}

/* 3. Individual Comment Bubbles */
body.theme-light .comment-item {
    background: #ffffff !important;
    /* Pure White Card */
    border: 1px solid #e2e8f0 !important;
    /* Subtle Border */
    border-left: 3px solid #0e7490 !important;
    /* Teal Accent Line */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    color: #334155 !important;
}

/* 4. Comment Meta Data (Author & Date) */
body.theme-light .comment-meta {
    color: #64748b !important;
    /* Slate Grey */
}

body.theme-light .comment-author {
    color: #0e7490 !important;
    /* Teal Accent */
    font-weight: 700 !important;
}

/* 5. Comment Text Body */
body.theme-light .comment-text {
    color: #1e293b !important;
    /* Dark Text */
}

/* =========================================
   LIGHT THEME FIX: ENHANCED v2.0 COMPONENTS
   ========================================= */

/* Post Cards */
body.theme-light .community-post-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .community-post-card:hover {
    border-color: #0e7490 !important;
    box-shadow: 0 4px 15px rgba(14, 116, 144, 0.15) !important;
}

body.theme-light .post-card-meta {
    background: rgba(0, 0, 0, 0.03) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .post-card-title {
    color: #0f172a !important;
}

body.theme-light .community-post-card:hover .post-card-title {
    color: #0e7490 !important;
    text-shadow: none !important;
}

body.theme-light .post-category-badge {
    background: rgba(14, 116, 144, 0.08) !important;
    color: #0e7490 !important;
    border-color: rgba(14, 116, 144, 0.2) !important;
}

body.theme-light .post-card-excerpt {
    color: #475569 !important;
}

body.theme-light .post-meta-row {
    color: #64748b !important;
}

body.theme-light .post-author-name {
    color: #334155 !important;
}

body.theme-light .post-card-footer {
    color: #94a3b8 !important;
}

body.theme-light .post-time-ago {
    color: #94a3b8 !important;
}

/* Modal Buttons */
body.theme-light .modal-btn-primary,
body.theme-light .post-modal-body button[type="submit"],
body.theme-light button#submit-post-btn,
body.theme-light button#createChannelSubmit {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.3) !important;
}

body.theme-light .modal-btn-primary:hover,
body.theme-light .post-modal-body button[type="submit"]:hover,
body.theme-light button#submit-post-btn:hover,
body.theme-light button#createChannelSubmit:hover {
    box-shadow: 0 4px 15px rgba(14, 116, 144, 0.4) !important;
}

body.theme-light .modal-btn-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

/* Form Groups in Light Mode */
body.theme-light .form-group label {
    color: #0e7490 !important;
}

body.theme-light .form-group input,
body.theme-light .form-group textarea,
body.theme-light .form-group select {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

body.theme-light .form-group input:focus,
body.theme-light .form-group textarea:focus,
body.theme-light .form-group select:focus {
    background: #ffffff !important;
    border-color: #0e7490 !important;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.1) !important;
}

/* Reply Input */
body.theme-light #replyInput {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

body.theme-light #replyInput:focus {
    border-color: #0e7490 !important;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.1) !important;
}

body.theme-light #submitReplyBtn {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%) !important;
    color: #ffffff !important;
}

/* No Comments Message */
body.theme-light .no-comments-message {
    color: #64748b !important;
}

/* Post Detail View */
body.theme-light .post-meta-header h2 {
    color: #0f172a !important;
    text-shadow: none !important;
}

body.theme-light .post-meta-header span {
    color: #64748b !important;
}

body.theme-light .post-meta-header .user-link {
    color: #0e7490 !important;
}

body.theme-light .post-main-content {
    color: #334155 !important;
}

body.theme-light .post-featured-image {
    border-color: #e2e8f0 !important;
}

/* Floating Window Light Mode */
body.theme-light .floating-window {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

body.theme-light .floating-window::before {
    background: linear-gradient(90deg, transparent 0%, rgba(14, 116, 144, 0.3) 50%, transparent 100%);
}

body.theme-light .window-header {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
    color: #475569 !important;
}

body.theme-light .window-title {
    color: #334155 !important;
}

/* -------------------------------------------
 * CUSTOM FORM VALIDATION TOOLTIP
 * ------------------------------------------- */
.neo-validation-error {
    position: absolute;
    top: 100%;
    /* Places it directly below the input */
    left: 0;
    z-index: 500;
    background-color: rgba(4, 8, 11, 0.95);
    /* Theme Dark Background */
    border: 1px solid var(--color-accent-cyan);
    /* Neon Cyan Border */
    color: var(--color-accent-cyan);
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.2);
    /* Cyan Glow */
    margin-top: 8px;
    white-space: nowrap;
    animation: fadeIn 0.2s ease-in-out;
}

/* The little triangle arrow pointing up */
.neo-validation-error::after {
    content: '';
    position: absolute;
    bottom: 100%;
    /* Top of the box */
    left: 20px;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--color-accent-cyan) transparent;
}

/* Ensure parent containers allow positioning */
.form-group {
    position: relative;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================================================
   COMPACT COMMUNITY POSTS FIX (No Scroll for 3rd Items)
   ================================================================= */

/* 1. Tighten the gap between the Top and Bottom rows of cards */
.section-categories-container .categories {
    gap: 0.4vh 0.5vw !important;
    /* Reduced vertical gap (was 0.5vw for both) */
}

/* 2. Reduce padding inside each category card */
.section-categories-container .category-block {
    padding: 0.4vh 0.8vw !important;
    /* Reduced top/bottom padding (was 0.6vh) */
}

/* 3. Make the Card Headers (e.g. "Classifieds") slightly shorter */
.section-categories-container .category-block h3 {
    min-height: 22px !important;
    /* Reduced from 28px */
    margin-bottom: 0.2vh !important;
    /* Keep tight margin */
    font-size: 1.4vh !important;
    /* Slight adjustment if needed */
}

/* 4. Tighten the spacing between individual posts in the list */
.section-categories-container .post-list li {
    margin-bottom: 0 !important;
    /* Remove bottom margin (was 0.2vh) */
    padding: 0.2vh 0 !important;
    /* Use small padding instead for cleaner look */
    line-height: 1.2 !important;
    /* Tighten text line height */
}

/* =================================================================
   COMPACT CARDS FIX (Fits 3 items in a smaller area)
   ================================================================= */

/* 1. Force cards to fill height but keep spacing tight */
.section-categories-container .categories {
    height: 100%;
    gap: 0.5vh 0.5vw !important;
    /* Tighter gap */
    grid-template-rows: repeat(2, 1fr);
}

/* 2. Reduce padding inside the black card box */
.section-categories-container .category-block {
    padding: 0.5vh 0.8vw !important;
    justify-content: flex-start;
    /* Aligns content to top */
}

/* 3. Shrink the Header (e.g. "Classifieds") */
.section-categories-container .category-block h3 {
    min-height: 20px !important;
    margin-bottom: 0.3vh !important;
    font-size: 1.4vh !important;
}

/* 4. Compact the Post List Items */
.section-categories-container .post-list li {
    margin-bottom: 0 !important;
    padding: 0.15vh 0 !important;
    /* Very tight vertical padding */
    line-height: 1.2 !important;
    font-size: 1.1vh !important;
    /* Slightly smaller text if needed */
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    /* Fainter border */
}



/* =================================================================
   ACCESSIBILITY & RESPONSIVENESS FIXES (New Media Queries)
   ================================================================= */

/* 1. Medium Screens (e.g., standard desktops) */
@media (min-width: 1400px) {

    /* Slightly increase the text size for large screens */
    body {
        font-size: 1.05rem;
        /* ~16.8px */
    }
}

/* 2. Large Screens (e.g., high-resolution monitors) */
@media (min-width: 1920px) {

    /* Increase text size for very large displays to keep readability */
    body {
        font-size: 1.125rem;
        /* ~18px */
    }
}

/* 3. Small Screens (e.g., tablets/phones - ensure text isn't too small) */
@media (max-width: 768px) {
    body {
        font-size: 1.1rem;
        /* Increase text size for mobile for easier reading */
    }

    /* Add padding/spacing adjustments for mobile layout if needed */
}

/* Delete Message Button */
.chat-message-bubble {
    position: relative;
    /* Allows absolute positioning of the X */
    padding-right: 20px;
    /* Make room for the button */
}

.delete-msg-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--color-text-dim);
    cursor: pointer;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.2s, color 0.2s;
    font-weight: bold;
    line-height: 1;
    z-index: 20;
}

/* Show on hover */
.chat-message-bubble:hover .delete-msg-btn {
    opacity: 1;
}

.delete-msg-btn:hover {
    color: var(--color-negative);
    /* Red on hover */
}

/* --- POST IMAGE STYLES --- */
.post-featured-image {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    /* Smaller preview that shows complete image */
    object-fit: contain !important;
    /* Show full image without cropping */
    border-radius: 8px;
    border: 1px solid var(--color-accent-cyan);
    margin: 0 auto 20px !important;
    display: block !important;
    /* Center the image */
    cursor: zoom-in;
    /* Shows a magnifying glass cursor */
    transition: opacity 0.2s;
}

.post-featured-image:hover {
    opacity: 0.8;
}

/* --- LIGHTBOX (Enlarged View) --- */
#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    /* Super dark background */
    z-index: 30000000 !important;
    /* Sit on top of everything including floating windows (9999999) and account modal (999999) */
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    /* Click anywhere to close */
    opacity: 0;
    transition: opacity 0.3s;
}

#lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

#lightbox-img {
    max-width: 80%;
    max-height: 70vh;
    /* Limit to 70% of viewport height to avoid footer cutoff */
    border: 2px solid var(--color-accent-cyan);
    border-radius: 4px;
    box-shadow: 0 0 30px var(--color-glow);
    object-fit: contain;
    /* Ensure the whole image is visible */
}

/* =================================================================
   FORCE REMOVE BLUE SCROLLBARS (Nuclear Option)
   ================================================================= */

/* 1. Target the scrollbar pseudo-element directly and hide it */
.section-categories-container .post-list::-webkit-scrollbar {
    display: none !important;
    /* Don't display the bar */
    width: 0 !important;
    /* Set width to zero */
    background: transparent !important;
    /* Remove background */
}

/* 2. Target the thumb (the blue part) and track just in case */
.section-categories-container .post-list::-webkit-scrollbar-thumb,
.section-categories-container .post-list::-webkit-scrollbar-track {
    background: transparent !important;
    display: none !important;
}

/* 3. Standard Properties for Firefox/IE/Edge to ensure it's gone */
.section-categories-container .post-list {
    -ms-overflow-style: none !important;
    /* IE and Edge */
    scrollbar-width: none !important;
    /* Firefox */
    overflow-y: hidden !important;
    /* Disable scrolling interaction */
}

/* --- POST LIST ITEM STYLING (Category Blocks) --- */
.post-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    gap: 8px;
    transition: background 0.15s;
    cursor: pointer;
}

.post-list-item:hover {
    background: rgba(0, 242, 254, 0.05);
}

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

.post-list-item .post-title {
    flex-grow: 1;
    font-size: 1.1vh;
    color: var(--color-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-list-item .post-author {
    font-size: 1vh;
    color: var(--color-accent-cyan);
    white-space: nowrap;
    flex-shrink: 0;
}

.post-list-item .post-date {
    font-size: 0.9vh;
    color: var(--color-text-dim);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
    min-width: 80px;
}

.post-loading,
.post-no-activity {
    font-size: 1vh;
    color: var(--color-text-dim);
    font-style: italic;
}

/* --- GLITCH EFFECT ANIMATION --- */
@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }

    20% {
        transform: skew(-2deg);
    }

    40% {
        transform: skew(2deg);
    }

    60% {
        transform: skew(-1deg);
    }

    80% {
        transform: skew(1deg);
    }

    100% {
        transform: skew(0deg);
    }
}

@keyframes glitch-flash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    52% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* Apply this class to your main Logo or Title */
.cyber-glitch:hover {
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite,
        glitch-flash 0.5s infinite;
    color: var(--color-accent-cyan);
    text-shadow: 2px 0 var(--color-negative), -2px 0 var(--color-positive);
}

/* --- CHAT SMART SCROLL BUTTON --- */
#chat-new-messages-btn {
    position: absolute;
    bottom: 75px;
    /* Sits just above the input bar */
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent-cyan);
    color: var(--color-base);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.6);

    /* Animation State: Hidden */
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateX(-50%) translateY(10px);
}

/* Animation State: Visible */
#chat-new-messages-btn:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Hover Effect */
#chat-new-messages-btn:hover {
    background: #fff;
    box-shadow: 0 0 20px #fff;
}

/* --- CHAT EDITING --- */
.edit-msg-btn {
    position: absolute;
    right: 20px;
    /* Sits to the left of the Delete X */
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-text-dim);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    font-weight: bold;
    line-height: 1;
    z-index: 25;
}

.chat-message-bubble:hover .edit-msg-btn {
    opacity: 1;
}

.edit-msg-btn:hover {
    color: var(--color-glow);
    /* Blue hover */
}

/* The Input Field when editing */
.chat-edit-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-accent-cyan);
    color: var(--color-text-light);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: inherit;
    width: 80%;
    outline: none;
}

/* --- CHAT EDITING STYLES --- */
.edit-msg-btn {
    position: absolute;
    right: 25px;
    /* Sits to the left of the Delete X */
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-text-dim);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    font-weight: bold;
    line-height: 1;
}

.chat-message-bubble:hover .edit-msg-btn {
    opacity: 1;
}

.edit-msg-btn:hover {
    color: var(--color-glow);
}

/* The Input Field when editing */
.chat-edit-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-accent-cyan);
    color: var(--color-text-light);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: inherit;
    width: 80%;
    outline: none;
}

/* APPEND TO END OF FILE */

/* --- TOKEN INTEGRATION STYLES --- */

/* Token Grid in Account */
.token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.token-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(217, 70, 239, 0.3);
    border-radius: 8px;
    padding: 15px;
    position: relative;
    transition: transform 0.2s;
}

.token-card:hover {
    background: rgba(217, 70, 239, 0.05);
    border-color: #d946ef;
}

.token-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.token-card-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.token-card-ticker {
    font-weight: 800;
    color: #fff;
    font-size: 1.1em;
}

.token-card-price {
    font-family: 'Space Mono', monospace;
    font-size: 0.9em;
    color: var(--color-positive);
}

.token-card-actions {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
}

.btn-delete-token {
    color: var(--color-text-dim);
    cursor: pointer;
}

.btn-delete-token:hover {
    color: var(--color-negative);
}

/* Live Widget in View Post Modal */
.post-token-widget {
    background: linear-gradient(90deg, rgba(217, 70, 239, 0.1), rgba(0, 0, 0, 0));
    border-left: 3px solid #d946ef;
    padding: 10px 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 4px 4px 0;
}

.post-token-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-token-buy-btn {
    background: #d946ef;
    color: #000;
    font-weight: 800;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(217, 70, 239, 0.4);
    transition: all 0.2s;
}

.post-token-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #d946ef;
}

/* =================================================================
   LIGHT THEME VISIBILITY FIXES (Posted By, Upload, Captcha)
   ================================================================= */

/* 1. Fix Invisible "Posted By" Username (Post View Modal) */
/* Was using var(--color-glow) which is transparent in light mode */
body.theme-light .post-meta-header .user-link {
    color: #0e7490 !important;
    /* Teal */
    font-weight: 800 !important;
    text-decoration: underline;
    text-decoration-color: rgba(14, 116, 144, 0.3);
}

body.theme-light .post-meta-header .user-link:hover {
    color: #155e75 !important;
    /* Darker Teal */
}

/* 2. Fix "Choose File" Button & Input (Create Post Modal) */
body.theme-light .file-input-wrapper {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

body.theme-light .choose-file-button {
    background-color: #e2e8f0 !important;
    /* Light Grey Button */
    color: #0f172a !important;
    /* Dark Text */
    border-right: 1px solid #cbd5e1 !important;
}

body.theme-light .file-name {
    color: #334155 !important;
    /* Visible Dark Grey for filename */
}

/* 3. Fix Invisible Captcha (Create Post & Register) */
/* The box container */
body.theme-light #createPostModalOverlay .form-group[style*="dashed"],
body.theme-light #registerModalOverlay .form-group[style*="dashed"] {
    background-color: #f1f5f9 !important;
    /* Light Grey Bg */
    border-color: #cbd5e1 !important;
    /* Solid Grey Border */
}

/* The "Security Check" Label */
body.theme-light #postCaptchaLabel,
body.theme-light #regCaptchaLabel {
    color: #0f172a !important;
    /* Dark Navy (Visible) */
    text-shadow: none !important;
}

/* The Input Box for the answer */
body.theme-light #postCaptchaAnswer,
body.theme-light #regCaptchaAnswer {
    background-color: #ffffff !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* =================================================================
   SKELETON LOADING ANIMATION
   ================================================================= */
/* (Keep your Skeleton code here, it is correct) */
/* ... */

/* =================================================================
   EMOJI SIZING FIXES
   ================================================================= */

/* 1. Base style for ALL emojis (Picker + Chat + Input) */
.picker-emoji,
.chat-message img,
.chat-input-div img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

/* 2. Picker Hover Effect */
.picker-emoji:hover {
    transform: scale(1.2);
}

/* 3. MASTER FIX: Shrink the Smile Emoji EVERYWHERE */
/* This targets the specific file 'Smile_Emoji' anywhere on the site */
img[src*="Smile_Emoji"] {
    transform: scale(0.80) !important;
    /* Force it to 80% size */
    transform-origin: center;
    /* Shrink from the center */
    vertical-align: middle;
}

/* 4. Fix Hover for Smile in Picker (Compensate for the shrink) */
.picker-emoji[src*="Smile_Emoji"]:hover {
    transform: scale(1.0) !important;
    /* 0.8 * 1.25 = 1.0 (Back to normal size) */
}

/* === POINTER EVENTS FIX FOR DRAGGING === */


/* Buttons must be clickable */



/* --- MARKET HEADER & TOGGLE --- */
.market-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 242, 254, 0.4);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.market-header-row .section-title {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.view-toggle-container {
    display: flex;
    background: rgba(0, 242, 254, 0.1);
    border-radius: 4px;
    padding: 2px;
    border: 1px solid rgba(0, 242, 254, 0.3);
}

.view-toggle-btn {
    background: transparent;
    border: none;
    color: var(--color-text-dim);
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.view-toggle-btn.active {
    background: var(--color-accent-cyan);
    color: var(--color-base);
    box-shadow: 0 0 8px var(--color-glow);
}

.view-toggle-btn span {
    font-size: 12px;
}

/* --- HEATMAP CONTAINER --- */

/* --- FIX: Hide List/Map when toggled --- */
.crypto-grid.hidden,
.crypto-heatmap.hidden {
    display: none !important;
}

.crypto-heatmap {
    width: 100%;
    height: 500px;
    /* Fixed height for the map */
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
}

.crypto-heatmap.hidden {
    display: none;
}

/* --- HEATMAP TILES --- */
.heatmap-tile {
    position: absolute;
    border: 1px solid rgba(0, 0, 0, 0.5);
    /* Separator lines */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s, z-index 0s;
    overflow: hidden;
    padding: 5px;
    text-align: center;
}

.heatmap-tile:hover {
    z-index: 10;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    border: 1px solid #fff;
}

.tile-symbol {
    font-weight: 800;
    font-size: 1.2em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.tile-change {
    font-size: 0.9em;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.tile-price {
    font-size: 0.7em;
    opacity: 0.8;
    margin-top: 2px;
}

/* --- DYNAMIC TILE COLORS --- */
/* Green Scales */
.tile-bg-plus-1 {
    background-color: rgba(0, 230, 118, 0.2);
}

.tile-bg-plus-2 {
    background-color: rgba(0, 230, 118, 0.4);
}

.tile-bg-plus-3 {
    background-color: rgba(0, 230, 118, 0.6);
}

.tile-bg-plus-4 {
    background-color: rgba(0, 230, 118, 0.8);
}

.tile-bg-plus-5 {
    background-color: rgba(0, 230, 118, 1.0);
}

/* Red Scales */
.tile-bg-minus-1 {
    background-color: rgba(255, 82, 82, 0.2);
}

.tile-bg-minus-2 {
    background-color: rgba(255, 82, 82, 0.4);
}

.tile-bg-minus-3 {
    background-color: rgba(255, 82, 82, 0.6);
}

.tile-bg-minus-4 {
    background-color: rgba(255, 82, 82, 0.8);
}

.tile-bg-minus-5 {
    background-color: rgba(255, 82, 82, 1.0);
}

/* Grey (Neutral) */
.tile-bg-neutral {
    background-color: #37474f;
}

/* --- HEATMAP UPGRADES --- */

/* 1. The Floating Tooltip (Hidden by default) */
#heatmap-tooltip {
    position: fixed;
    display: none;
    z-index: 10000;
    background: rgba(4, 8, 11, 0.95);
    border: 1px solid var(--color-accent-cyan);
    padding: 10px;
    border-radius: 4px;
    pointer-events: none;
    /* Let mouse pass through */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    transform: translate(15px, 15px);
    /* Offset from mouse */
}

/* 2. Better Tile Visuals */
.heatmap-tile {
    /* Add a subtle gradient for depth */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    /* Cleaner inner border */
    transition: filter 0.2s, transform 0.1s;
}

.heatmap-tile:hover {
    filter: brightness(1.2);
    /* Light up on hover */
    z-index: 100;
    transform: scale(1.02);
    /* Slight pop */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #fff;
}

/* 3. Text Tweaks for small tiles */
.tile-symbol {
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2px;
}

.tile-change {
    font-weight: 500;
    line-height: 1;
}

/* --- ORBITAL COMMAND HEATMAP (REMASTERED) --- */
.crypto-heatmap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 12px;
    padding: 40px;
    /* Deep Space Background */
    background: radial-gradient(circle at 50% 50%, #0a151f 0%, #020608 100%);
    overflow-y: auto;
    border-radius: 4px;
    border: 1px solid rgba(0, 242, 254, 0.15);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
    height: 550px;
    /* Taller to let bubbles breathe */
}

/* THE ORB */
.bubble-node {
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 10;

    /* 3D Glass Effect */
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.01) 20%, transparent 50%);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 0 15px rgba(0, 0, 0, 0.5),
        /* Inner Depth */
        0 5px 15px rgba(0, 0, 0, 0.3);
    /* Drop Shadow */

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Elastic Bounce */
    animation: float-orb 8s ease-in-out infinite;
    overflow: hidden;
    /* Clips text that is too long */
}

/* Hover State: Super Saiyan Glow */
.bubble-node:hover {
    transform: scale(1.15) translateY(-5px);
    z-index: 100;
    border-color: rgba(255, 255, 255, 0.8);
    filter: brightness(1.2);
}

/* --- COLORS --- */

/* PUMP (Green) - Cyber Emerald */
.bubble-positive {
    background-color: rgba(0, 255, 136, 0.05);
    /* Tint */
    box-shadow:
        inset 0 0 20px rgba(0, 255, 136, 0.2),
        /* Inner Glow */
        0 0 5px rgba(0, 255, 136, 0.1);
    /* Outer Haze */
    border-color: rgba(0, 255, 136, 0.3);
}

.bubble-positive:hover {
    box-shadow:
        inset 0 0 30px rgba(0, 255, 136, 0.4),
        0 0 20px rgba(0, 255, 136, 0.6);
}

/* DUMP (Red) - Cyber Crimson */
.bubble-negative {
    background-color: rgba(255, 59, 116, 0.05);
    /* Tint */
    box-shadow:
        inset 0 0 20px rgba(255, 59, 116, 0.2),
        0 0 5px rgba(255, 59, 116, 0.1);
    border-color: rgba(255, 59, 116, 0.3);
}

.bubble-negative:hover {
    box-shadow:
        inset 0 0 30px rgba(255, 59, 116, 0.4),
        0 0 20px rgba(255, 59, 116, 0.6);
}

/* TYPOGRAPHY */
.bubble-symbol {
    font-family: 'Inter', sans-serif;
    /* Cleaner than mono for bubbles */
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 2px;
}

.bubble-change {
    font-family: 'Space Mono', monospace;
    font-weight: 600;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* The "Breathing" Animation */
@keyframes float-orb {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.02);
    }
}

/* --- CYBER-METROPOLIS (FINAL) --- */
.crypto-heatmap {
    position: relative;
    height: 700px;
    width: 100%;
    overflow: hidden;
    /* Dark Void Background */
    background: radial-gradient(circle at 50% 60%, #000913 0%, #000000 90%);
    perspective: 1800px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 242, 254, 0.2);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 1);
}

/* The World Container */
.city-grid-plane {
    position: relative;
    width: 500px;
    /* Tighter world container */
    height: 500px;
    transform-style: preserve-3d;
    /* Classic Isometric Angle */
    transform: rotateX(60deg) rotateZ(-45deg);
    transition: transform 0.1s linear;
}

/* The Floor Grid */
.city-floor {
    position: absolute;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    /* Moving Grid Floor */
    background-image:
        linear-gradient(rgba(0, 242, 254, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 254, 0.15) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: translateZ(-1px);
    /* Keep it below buildings */
    pointer-events: none;
}

/* --- THE SKYSCRAPERS --- */
.iso-building {
    position: absolute;
    transform-style: preserve-3d;
    cursor: pointer;
    transform-origin: bottom center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover Effect: Lift up and brighten */
.iso-building:hover {
    transform: translateZ(20px) scale(1.1);
    z-index: 10000 !important;
}

.iso-building:hover .face {
    filter: brightness(1.6);
    border-color: #fff;
    opacity: 0.95;
}

/* --- THE FACES (GLASS TEXTURE) --- */
.face {
    position: absolute;
    backface-visibility: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Defined edges */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
    /* Internal depth */
    opacity: 0.85;
    /* Semi-transparent glass feel */
}

/* ROOF: The Cap */
.face.top {
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    /* Tiny tech text */
    font-weight: 800;
    text-shadow: 0 0 5px currentColor;
    border-width: 2px;
    /* Thicker roof rim */
}

/* WALLS: High-Contrast Window Lines */
.face.side-1 {
    transform-origin: top;
    transform: rotateX(-90deg);
    /* Horizontal neon strips */
    background-image: repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0px,
            rgba(255, 255, 255, 0) 4px,
            currentColor 4px,
            currentColor 5px);
}

.face.side-2 {
    transform-origin: left;
    transform: rotateY(90deg);
    /* Denser vertical detail */
    background-image: repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0px,
            rgba(255, 255, 255, 0) 4px,
            currentColor 4px,
            currentColor 5px);
    filter: brightness(0.8);
    /* Shade side */
}

/* --- NEON PALETTE --- */

/* CYAN (Bullish) */
.build-pos {
    color: rgba(0, 242, 254, 0.4);
}

/* Sets currentColor for gradients */
.build-pos .face {
    background-color: rgba(0, 242, 254, 0.1);
    /* Glass Tint */
    border-color: rgba(0, 242, 254, 0.6);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.2), inset 0 0 20px rgba(0, 242, 254, 0.1);
}

.build-pos .face.top {
    color: #00f2fe;
    border-color: #00f2fe;
    background: rgba(0, 20, 30, 0.9);
    box-shadow: 0 0 30px rgba(0, 242, 254, 0.6);
    /* Roof Glow */
}

/* MAGENTA (Bearish) */
.build-neg {
    color: rgba(255, 0, 85, 0.4);
}

.build-neg .face {
    background-color: rgba(255, 0, 85, 0.1);
    border-color: rgba(255, 0, 85, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.2), inset 0 0 20px rgba(255, 0, 85, 0.1);
}

.build-neg .face.top {
    color: #ff0055;
    border-color: #ff0055;
    background: rgba(30, 0, 10, 0.9);
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.6);
}

/* --- SLIMMER WATCHLIST BOX --- */

/* 1. Reduce the vertical padding on the specific container */
.section-watchlist-container {
    padding-top: 1.0vh !important;
    /* Reduced from 1.0vh */
    padding-bottom: 1.0vh !important;
    /* Reduced from 1.0vh */
    min-height: 0 !important;
    /* Allow the box to shrink */
    height: auto !important;
    /* Force it to hug the content */
}

/* 2. Ensure the "My Watchlist:" text doesn't push the box open */
.watchlist-container h4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    /* Prevents line-height from expanding the box */
    padding: 0 !important;
}

/* --- EXPAND WATCHLIST ITEMS --- */

/* 1. Force the middle scroll area to take up all available empty space */
.watchlist-scroll-area {
    flex: 1 1 0% !important;
    /* Forces it to shrink properly */
    width: 0 !important;
    /* Forces flex-basis 0 in some browsers */
    display: flex !important;
    overflow-x: auto !important;
    /* Ensures scrolling works */
}

/* 2. Make each coin card stretch evenly to fill the width */
.watchlist-card {
    flex: 1 1 0% !important;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 0 10px !important;
    font-size: 0.7vw !important;
}

/* 3. Ensure the "+ Add More" button stays compact on the right */
.add-more-link {
    flex-shrink: 0 !important;
    /* Prevents it from being squashed */
    margin-left: 10px !important;
    /* Keeps a small gap from the last card */
}

/* --- WATCHLIST CURSOR FIX --- */
.watchlist-card {
    cursor: pointer !important;
    /* Shows the finger icon */
    transition: all 0.2s ease;
    /* Smooths out the hover effect */
}

/* Optional: Adds a subtle glow when hovering */
.watchlist-card:hover {
    background: rgba(0, 242, 254, 0.15) !important;
    border-color: var(--color-accent-cyan) !important;
    transform: translateY(-1px);
    /* Tiny lift effect */
}

/* --- FIX WATCHLIST HOVER CUT-OFF --- */

/* 1. Add buffer space inside the scroll area */
.watchlist-scroll-area {
    padding-top: 4px !important;
    /* Room for the card to move up */
    padding-bottom: 4px !important;
    /* Balance the bottom */
    padding-left: 0 !important;
    padding-right: 20px !important;
    /* Buffer to prevent overlap with button */
}

/* 2. Compensate by reducing the outer container padding */
/* This ensures the total height of the box stays slim */
.section-watchlist-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow-y: visible !important;
    /* Allow the glow to bleed out if needed */
}

/* --- BRIGHTER WATCHLIST LABEL --- */
.watchlist-container h4 {
    color: var(--color-accent-cyan) !important;
    /* Changes grey to Neon Cyan */
    text-shadow: 0 0 5px rgba(0, 242, 254, 0.4);
    /* Adds a subtle glow */
    font-weight: 700 !important;
    /* Makes it slightly bolder */
    opacity: 1 !important;
    /* Ensures full visibility */
}

/* =========================================
   STEP 1: PRO TERMINAL TABLE STYLES (UPDATED)
   ========================================= */

.pro-table-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-family: 'Inter', sans-serif;
}

/* Updated Grid: Added specific width for Chain Icon column */
/* Rank | Chain | Token Name | Price | Age | Liq | Vol | Action */
.pro-header-row,
.pro-row {
    display: grid;
    grid-template-columns: 0.4fr 0.4fr 3fr 1.5fr 0.8fr 1.2fr 1.2fr 0.5fr;
    padding: 8px 10px;
    align-items: center;
    gap: 10px;
    /* Adds space between columns */
}

.pro-header-row {
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-dim);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pro-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 12px;
    color: #f0f0f0;
    transition: background 0.1s;
    cursor: pointer;
}

.pro-row:hover {
    background: rgba(0, 242, 254, 0.05);
}

/* Ensure images don't get squashed */
.col-token img {
    flex-shrink: 0;
}

.token-names {
    overflow: hidden;
    /* Prevents long names from breaking layout */
}

.col-price,
.col-vol,
.col-liq,
.col-age {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
}

.age-badge {
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-dim);
}

.age-new {
    color: var(--color-accent-cyan);
    background: rgba(0, 242, 254, 0.1);
}

/* --- FIX TOKEN IMAGE & TEXT ALIGNMENT --- */

/* 1. Force the image and text to sit side-by-side */
.col-token {
    display: flex !important;
    flex-direction: row !important;
    /* This is the key fix */
    align-items: center !important;
    /* Vertically center them */
    justify-content: flex-start !important;
    gap: 10px !important;
    /* Space between image and text */
    text-align: left !important;
}

/* 2. Ensure the text stack (Symbol + Address) aligns to the left */
.col-token .token-names {
    display: flex !important;
    flex-direction: column !important;
    /* Stack Symbol on top of Address */
    align-items: flex-start !important;
    /* Align text to the left */
    justify-content: center !important;
    line-height: 1.2 !important;
}

/* 3. Ensure the image size is strictly controlled */
.col-token img {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    /* Prevents squishing */
    margin: 0 !important;
    /* Remove any default margins */
    display: block !important;
}

/* --- LETTER AVATAR (Fallback for New Tokens) --- */
.token-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* --- LETTER AVATAR (Fallback for New Tokens) --- */
.token-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    cursor: default;
}

/* =================================================================
   COMMUNITY POSTS ENHANCEMENT (MOCKUP MATCH)
   ================================================================= */

/* --- SECTION HEADER --- */
.categories-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.categories-header .section-title {
    margin-bottom: 2px;
    font-size: 1.7vh;
    color: var(--color-accent-cyan);
    font-weight: 700;
}

.categories-header .section-title+p {
    color: var(--color-text-dim);
    font-size: 11px;
    margin: 0;
}

/* Search Bar - Hidden to match mockup */
.community-search-bar {
    display: none;
}

/* --- CATEGORY TABS (Matching Target Mockup) --- */
.community-tabs-bar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 8px;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.community-tabs-bar::-webkit-scrollbar {
    display: none;
}

.community-tab {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.2s;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.community-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.community-tab.active {
    background: rgba(0, 242, 254, 0.15);
    color: var(--color-accent-cyan);
    border-color: rgba(0, 242, 254, 0.5);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.2), inset 0 0 8px rgba(0, 242, 254, 0.1);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.3);
}

/* Tab Icons */
.community-tab::before {
    font-size: 11px;
}

/* =================================================================
   COMMUNITY POSTS - PIXEL PERFECT REPLICA
   ================================================================= */

/* --- POSTS GRID (4 Columns x 2 Rows = 8 Total) --- */


@media (max-width: 1200px) {
    .community-posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1000px) {
    .community-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .community-posts-grid {
        grid-template-columns: 1fr;
    }
}

/* --- POST CARD SHARED STAT STYLES --- */
.post-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-stat.views::before { content: "👁"; }
.post-stat.likes::before { content: "♡"; }
.post-stat.comments::before { content: "💬"; font-size: 9px; }

.post-like-btn {
    cursor: pointer;
    transition: color 0.2s;
}

.post-like-btn:hover,
.post-like-btn.liked {
    color: #ef4444;
}

/* --- 5. PAGINATION --- */
.community-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 25px;
}

.pagination-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-dim);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.pagination-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.pagination-btn.active {
    background: var(--color-accent-cyan);
    color: #000;
    border-color: var(--color-accent-cyan);
    font-weight: 700;
}

/* --- LOADING / EMPTY STATES --- */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: shimmer 1.5s infinite;
}

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

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

.no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 30px;
    color: var(--color-text-dim);
    font-size: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}

/* =================================================================
   PHASE 2: VISUAL POLISH & "WOW" FACTOR
   ================================================================= */

/* 1. CRT SCANLINE OVERLAY */
body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 9999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    /* Click-through */
    opacity: 0;
}

/* 2. AMBIENT GLOW BACKDROP */
body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: -1;
    pointer-events: none;
    animation: ambientPulse 10s infinite alternate;
}

@keyframes ambientPulse {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* 3. GLITCH LOGO EFFECT */
.logo-area:hover .logo {
    animation: glitch-anim 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    box-shadow: 0 0 20px var(--color-glow);
}

@keyframes glitch-anim {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px, 2px)
    }

    40% {
        transform: translate(-2px, -2px)
    }

    60% {
        transform: translate(2px, 2px)
    }

    80% {
        transform: translate(2px, -2px)
    }

    100% {
        transform: translate(0)
    }
}

/* 4. NEON BUTTON PULSE — shimmer effect on hover */

.btn.primary::after {
    display: none;
}

.btn.primary:hover::after {
    display: none;
}

@keyframes shimmer-swipe {
    0% {
        transform: rotate(45deg) translate(-150%, 0);
    }

    100% {
        transform: rotate(45deg) translate(150%, 0);
    }
}

/* 5. INTERACTIVE ROW HIGHLIGHTS (News & Markets) */
.pro-row:not(.header):hover,
.news-list li:hover {
    background: linear-gradient(90deg, rgba(0, 242, 254, 0.1), transparent);
    border-left: 3px solid var(--color-accent-cyan);
    padding-left: 7px;
    /* Compensate for border */
}

/* 6. TERMINAL INPUT STYLING */
input,
textarea,
select {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    border-radius: 4px;
    color: var(--color-accent-cyan) !important;
    font-family: 'Space Mono', monospace !important;
    transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-glow) !important;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2) !important;
    outline: none;
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
    color: rgba(0, 242, 254, 0.3);
    text-transform: uppercase;
    font-size: 0.8em;
}

/* 7. CHAT MESSAGE ENTRY ANIMATION */
@keyframes slideInMessage {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-entry {
    animation: slideInMessage 0.3s ease-out forwards;
}

/* =================================================================
   TOKEN LAUNCH MODAL - COLLAPSIBLE SECTIONS (Cross-Browser Fix)
   ================================================================= */

/* Override the base modal-content-container overflow:hidden for this modal */
#tokenLaunchModalOverlay .modal-content-container {
    max-height: 90vh;
    height: auto !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
}

/* The form needs to be the scrolling element */
#tokenLaunchForm {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(90vh - 50px);
    /* Account for header */
    min-height: 0;
    /* Critical for Firefox flexbox scrolling */
    padding: 20px;
    display: block;
    /* Override flexbox to prevent content compression */
}

/* Collapsible toggle buttons - explicit styling for Firefox */
#toggleSocialLinks,
#toggleFeeSharing {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    color: var(--color-text-dim);
    font-size: 11px;
    font-family: 'Space Mono', monospace;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s, color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#toggleSocialLinks:hover,
#toggleFeeSharing:hover {
    background: rgba(0, 242, 254, 0.1);
    color: var(--color-accent-cyan);
}

#toggleSocialLinks:focus,
#toggleFeeSharing:focus {
    outline: 1px solid var(--color-accent-cyan);
    outline-offset: -1px;
}

/* Arrow indicators */
#socialLinksArrow,
#feeSharingArrow {
    font-size: 10px;
    transition: transform 0.2s;
}

/* Collapsible sections container */
#socialLinksSection,
#feeSharingSection {
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--color-border);
}

/* Fee claimer row styling */
.fee-claimer-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.fee-claimer-wallet {
    flex: 1;
    min-width: 0;
}

.fee-claimer-percent {
    width: 60px;
    text-align: right;
}

.remove-claimer-btn {
    background: none;
    border: none;
    color: var(--color-negative);
    cursor: pointer;
    font-size: 18px;
    padding: 0 5px;
    line-height: 1;
}

.remove-claimer-btn:hover {
    color: #ff0000;
}

/* =================================================================
   FEE SHARING UI (SOCIAL PLATFORMS)
   ================================================================= */
.fee-earner-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
    transition: all 0.2s;
}

.fee-earner-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 242, 254, 0.3);
}

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

.fee-earner-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-light);
}

.platform-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.platform-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text-dim);
}

.platform-btn:hover {
    border-color: var(--color-text-light);
    color: var(--color-text-light);
}

.platform-btn.active {
    background: var(--color-positive);
    border-color: var(--color-positive);
    color: #000;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

.platform-btn.active.sol {
    background: #9945FF;
    border-color: #9945FF;
    color: white;
    box-shadow: 0 0 10px rgba(153, 69, 255, 0.4);
}

.platform-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.fee-input-wrapper {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.fee-input-wrapper input.fee-claimer-wallet {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    padding: 10px 0;
    font-size: 13px;
    color: var(--color-text-light) !important;
    flex-grow: 1;
}

.fee-input-wrapper input:focus {
    box-shadow: none !important;
}

.fee-percent-input {
    width: 60px !important;
    text-align: right;
    border-left: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    padding-left: 10px !important;
    margin-left: 10px;
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    color: var(--color-text-light) !important;
    font-family: 'Space Mono', monospace;
}

.remove-card-btn {
    background: rgba(255, 82, 82, 0.1);
    color: var(--color-negative);
    border: 1px solid var(--color-negative);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.remove-card-btn:hover {
    background: var(--color-negative);
    color: white;
}

/* =================================================================
   THE ORACLE TERMINAL - AI-Powered Market Sentiment & Scanner
   ================================================================= */

/* Widget Container */
/* =================================================================
   THE ORACLE TERMINAL - AI-Powered Market Sentiment & Scanner
   ================================================================= */

/* (Styles moved to Main Dashboard Layout section at top of file) */

/* Header */





/* READOUT STYLES (WHALE RADAR) */


/* Sentiment Display */

/* === STATE COLORS === */
/* Bullish / Greed */

/* === TERMINAL INPUT === */



/* === MINIMIZED STATE === */

/* === ANIMATIONS === */

/* === CHAT EMOJI FIX (Light Mode) === */
/* 1. Invert emojis to be dark */
body.theme-light .emoji-icon-img,
body.theme-light .picker-emoji {
    filter: invert(1) hue-rotate(180deg) brightness(0.8);
}

/* 2. Light Backgrounds for Picker & Input */
body.theme-light .emoji-picker {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(14, 116, 144, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.theme-light .chat-input-div {
    background: #fff;
    color: #1e293b;
    border: 1px solid rgba(14, 116, 144, 0.3);
}


/* === MOBILE RESPONSIVENESS === */
/* === MOBILE RESPONSIVENESS === */
@media (max-width: 768px) {

    /* 1. LAYOUT STACKING */
    .custom-homepage {
        display: flex;
        flex-direction: column;
        height: auto;
        /* Allow scroll */
        padding: 5vh 3vw 100px 3vw;
        /* Bottom padding for widgets */
    }

    /* 2. HEADER OPTIMIZATION */
    .site-head {
        padding: 0 10px;
        flex-wrap: nowrap;
        /* Keep on one line if possible, or wrap carefully */
    }

    .center-tagline {
        display: none;
        /* Hide tagline to save space */
    }

    .logo {
        width: 40px;
        height: 40px;
        /* Smaller logo */
    }

    .nav-actions {
        gap: 5px;
    }

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

    /* Hide text labels on small buttons if needed, or keep them compact */
    #walletAddressDisplay {
        display: none !important;
    }

    /* 3. WIDGET POSITIONING */







    /* Minimized States */



    /* 4. VISUAL TWEAKS */


    .section-title {
        font-size: 16px;
    }

    /* Ensure charts/lists scroll horizontally if needed */
    .watchlist-scroll-area {
        padding-right: 50px;
        /* Space for 'more' button */
    }
}

/* --- VIEW BUBBLEMAP BUTTON STYLE --- */
#btn-view-bubblemap.neo-btn-ghost {
    background: rgba(0, 242, 254, 0.1);
    color: var(--color-accent-cyan);
    border: 1px solid var(--color-accent-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.15);
}

#btn-view-bubblemap.neo-btn-ghost:hover {
    background: var(--color-accent-cyan);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.6);
    transform: translateY(-1px);
}



/* ============================================
   TERMINAL FOOTER
   ============================================ */
.terminal-footer {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(4, 8, 11, 0.98) 0%, rgba(2, 4, 6, 1) 100%);
    border-top: 1px solid rgba(0, 242, 254, 0.3);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(0, 242, 254, 0.2);
    font-family: 'Space Mono', monospace;
    z-index: 100000 !important;
    padding: 6px 15px;
    justify-content: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1600px;
    gap: 15px;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.footer-logo {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--color-accent-cyan);
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
    letter-spacing: 1px;
}

.footer-tagline {
    font-size: 0.6rem;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-divider {
    color: rgba(255, 255, 255, 0.15);
    margin: 0 3px;
}

/* Radio Player - Collapsed Footer Button */
.footer-radio-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-dim);
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.footer-radio-btn:hover {
    color: var(--color-text-light);
}

.footer-radio-btn .radio-icon {
    font-size: 0.65rem;
    color: var(--color-warning);
    font-weight: 700;
}

.footer-radio-btn .radio-station-name {
    font-weight: 700;
    color: var(--color-warning);
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
}

.footer-radio-btn .radio-track-info {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.55rem;
    color: var(--color-text-dim);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.footer-radio-btn .radio-play-btn {
    font-size: 0.6rem;
    color: var(--color-warning);
    font-weight: 700;
    transition: all 0.15s;
}

.footer-radio-btn .radio-play-btn:hover {
    color: var(--color-warning);
    text-shadow: 0 0 12px rgba(255, 204, 0, 0.8);
}

.footer-radio-btn .radio-volume-icon {
    font-size: 0.6rem;
    color: var(--color-warning);
    font-weight: 700;
}

.footer-radio-btn .radio-expand-icon {
    font-size: 0.6rem;
    color: var(--color-warning);
    font-weight: 700;
    transition: all 0.2s;
}

.footer-radio-btn:hover .radio-expand-icon {
    transform: translateY(-2px);
    color: var(--color-warning);
    text-shadow: 0 0 12px rgba(255, 204, 0, 0.8);
}

/* Mobile Optimization - Compact Radio Player */
@media (max-width: 768px) {
    .footer-radio-btn {
        gap: 4px;
    }

    /* Hide everything except music icon on mobile */
    .footer-radio-btn .radio-play-btn,
    .footer-radio-btn .radio-volume-icon,
    .footer-radio-btn .radio-expand-icon,
    .footer-radio-btn .radio-track-info,
    .footer-radio-btn .radio-station-name {
        display: none !important;
    }

    /* Keep only: music icon [♪] */
    .footer-radio-btn .radio-icon {
        display: inline;
        font-size: 0.7rem;
    }

    /* Fix footer vertical centering and alignment */
    .terminal-footer {
        padding: 6px 10px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Center footer content and ensure proper alignment */
    .footer-content {
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0 auto;
    }

    .footer-left {
        justify-content: center;
        align-items: center;
    }

    /* Ensure all footer text elements align properly */
    .footer-logo,
    .footer-tagline,
    .footer-divider,
    .footer-radio-btn,
    .footer-link,
    .system-manual-trigger {
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
    }
}

/* Radio Player - Expanded View */
.radio-player-expanded {
    position: fixed;
    bottom: 50px;
    left: 20px;
    width: 320px;
    background: var(--color-surface-mixed);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    z-index: 5000;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
}

.radio-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255,255,255,0.02);
}

.radio-player-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-text-dim);
    text-transform: uppercase;
}

.radio-close-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-dim);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.radio-close-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-text-light);
}

.radio-player-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.radio-station-switcher {
    width: 100%;
}

.radio-station-switcher button {
    flex: 1;
}

.radio-now-playing {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px;
    position: relative;
    overflow: hidden;
}

.radio-track-display {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-teal);
    font-family: 'Space Mono', monospace;
    white-space: nowrap;
}

.radio-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-control-btn {
    width: 100%;
    padding: 12px;
    background: var(--color-accent-teal);
    color: var(--color-base);
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.radio-control-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3);
}

.radio-control-btn:active {
    transform: scale(0.98);
}

.radio-volume-control {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
}

.volume-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-dim);
}

.volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    outline: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent-teal);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
    transition: transform 0.2s;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.volume-value {
    min-width: 24px;
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-dim);
    text-align: right;
}

.radio-player-expanded>* {
    position: relative;
    z-index: 2;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.radio-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 204, 0, 0.4);
    background: rgba(255, 204, 0, 0.05);
    position: relative;
}

.radio-player-header::before {
    content: '▶';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-warning);
    font-size: 0.6rem;
    opacity: 0.6;
}

.radio-player-title {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-warning);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
}

.radio-close-btn {
    background: transparent;
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: var(--color-warning);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-family: 'Space Mono', monospace;
    line-height: 1;
}

.radio-close-btn:hover {
    background: rgba(255, 0, 100, 0.1);
    border-color: var(--color-accent-magenta);
    color: var(--color-accent-magenta);
    box-shadow: 0 0 15px rgba(255, 0, 100, 0.5);
}

.radio-player-body {
    padding: 18px;
}

.radio-station-switcher {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 204, 0, 0.3);
    padding: 2px;
    background: rgba(0, 0, 0, 0.3);
}

.radio-station-tab {
    flex: 1;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-dim);
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    position: relative;
}

.radio-station-tab::before {
    content: '>';
    color: var(--color-warning);
    opacity: 0;
    margin-right: 6px;
    transition: opacity 0.15s;
}

.radio-station-tab:hover {
    background: rgba(255, 204, 0, 0.08);
    border-color: rgba(255, 204, 0, 0.4);
    color: var(--color-text-light);
}

.radio-station-tab:hover::before {
    opacity: 0.5;
}

.radio-station-tab.active {
    background: rgba(255, 204, 0, 0.12);
    border-color: var(--color-warning);
    color: var(--color-warning);
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
}

.radio-station-tab.active::before {
    opacity: 1;
}

.radio-now-playing {
    margin-bottom: 18px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 204, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.radio-now-playing::before {
    content: '//';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-warning);
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    opacity: 0.4;
}

.radio-track-display {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--color-text-light);
    overflow: hidden;
    padding-left: 24px;
}

.radio-track-display marquee {
    color: var(--color-text-light);
}

.radio-controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.radio-control-btn {
    width: 100%;
    padding: 12px;
    background: rgba(255, 204, 0, 0.05);
    border: 2px solid rgba(255, 204, 0, 0.4);
    color: var(--color-warning);
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.radio-control-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.15), transparent);
    transition: left 0.5s;
}

.radio-control-btn:hover::before {
    left: 100%;
}

.radio-control-btn:hover {
    background: rgba(255, 204, 0, 0.18);
    border-color: var(--color-warning);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.4);
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.7);
}

.radio-control-btn:active {
    transform: scale(0.98);
}

.radio-volume-control {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 204, 0, 0.3);
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
}

.volume-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-warning);
    letter-spacing: 1px;
}

.volume-slider {
    flex: 1;
    height: 6px;
    background: rgba(255, 204, 0, 0.15);
    outline: none;
    border: 1px solid rgba(255, 204, 0, 0.4);
    -webkit-appearance: none;
    appearance: none;
    position: relative;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--color-warning);
    cursor: pointer;
    border: 2px solid rgba(0, 0, 0, 0.5);
    box-shadow:
        0 0 15px rgba(255, 204, 0, 0.9),
        0 0 5px rgba(255, 204, 0, 1);
    transition: all 0.15s;
}

.volume-slider::-webkit-slider-thumb:hover {
    box-shadow:
        0 0 20px rgba(255, 204, 0, 1),
        0 0 8px rgba(255, 204, 0, 1);
    transform: scale(1.1);
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--color-warning);
    cursor: pointer;
    border: 2px solid rgba(0, 0, 0, 0.5);
    box-shadow:
        0 0 15px rgba(255, 204, 0, 0.9),
        0 0 5px rgba(255, 204, 0, 1);
    transition: all 0.15s;
}

.volume-slider::-moz-range-thumb:hover {
    box-shadow:
        0 0 20px rgba(255, 204, 0, 1),
        0 0 8px rgba(255, 204, 0, 1);
    transform: scale(1.1);
}

.volume-value {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-warning);
    min-width: 38px;
    text-align: right;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}

/* Widget Buttons */
.footer-widgets {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-widget-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 4px;
    color: var(--color-text-dim);
    font-family: 'Space Mono', monospace;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.footer-widget-btn:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: var(--color-accent-cyan);
    color: var(--color-accent-cyan);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

.widget-dot {
    font-size: 10px;
    line-height: 1;
    animation: pulse 2s infinite;
}

.scan-dot {
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

.oracle-dot {
    color: #ff4757;
    text-shadow: 0 0 6px rgba(255, 71, 87, 0.7);
}

.chat-dot {
    color: var(--color-accent-cyan);
    text-shadow: 0 0 6px rgba(0, 242, 254, 0.7);
}

/* Stats Section */
.footer-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-stat {
    font-size: 0.55rem;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-stat::before {
    content: '>';
    color: var(--color-accent-cyan);
    margin-right: 4px;
    opacity: 0.7;
}

#footer-btn-rivals::before {
    content: '[/]';
    color: #ffffff;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.footer-link {
    font-size: 0.55rem;
    color: var(--color-text-dim);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s, text-shadow 0.2s;
}

.footer-link:hover {
    color: var(--color-accent-cyan);
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
}

.footer-social {
    font-size: 0.9rem;
    color: var(--color-text-dim);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.footer-social:hover {
    color: var(--color-accent-cyan);
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}

.footer-social.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.footer-mail-icon {
    font-size: 1.25rem;
    position: relative;
    top: -2px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
}

.footer-social.disabled:hover {
    color: var(--color-text-dim);
    text-shadow: none;
}

.footer-copyright {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 5px;
}

/* Hide original floating widget bars when minimized (they become footer buttons) */

/* Mobile responsive footer */
@media (max-width: 900px) {
    .footer-stats {
        display: none;
    }

    .footer-tagline {
        display: none;
    }
}

@media (max-width: 600px) {
    .terminal-footer {
        padding: 5px 10px;
    }

    .footer-content {
        gap: 8px;
    }

    .footer-widgets {
        gap: 4px;
    }

    .footer-widget-btn {
        padding: 3px 6px;
        font-size: 0.5rem;
    }

    .footer-right {
        gap: 5px;
    }

    .footer-link {
        font-size: 0.5rem;
    }
}

/* ============================================
   SPLASH SCREEN (Guest Login)
   ============================================ */
.splash-screen {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-bg);
    overflow: hidden;
}

.splash-title {
    font-size: 2em;
    color: var(--color-accent-cyan);
    margin-bottom: 8px;
    text-shadow: none;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Space Mono', monospace;
}

.splash-text {
    font-size: 0.9em;
    color: var(--color-text-dim);
    max-width: 320px;
    margin-bottom: 32px;
    line-height: 1.6;
}

.splash-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.splash-btn {
    padding: 8px 24px;
    font-size: 0.8em;
    border-radius: 4px;
}

.splash-btn-primary {
    box-shadow: none;
}

.splash-btn-ghost {
    background: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-light) !important;
}

.splash-divider {
    color: var(--color-text-dim);
    font-size: 0.85em;
    font-style: italic;
}

/* ============================================
   LEGAL MODALS (Terms & Privacy)
   ============================================ */
.legal-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.legal-modal-content {
    background: var(--color-surface-mixed);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}

.legal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255,255,255,0.02);
    flex-shrink: 0;
}

.legal-modal-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.legal-modal-close {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-dim);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
}

.legal-modal-close:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-text-light);
}

.legal-modal-body {
    padding: 24px 24px 32px;
    overflow-y: auto;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-dim);
    scrollbar-width: thin;
}

.legal-modal-body h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-accent-teal);
    margin: 24px 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legal-modal-body h3:first-of-type {
    margin-top: 0;
}

.legal-modal-body p {
    margin-bottom: 16px;
}

.legal-modal-body ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.legal-modal-body li {
    margin-bottom: 8px;
}

.legal-modal-body strong {
    color: var(--color-text-light);
}

.legal-modal-body::-webkit-scrollbar {
    width: 6px;
}

.legal-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.legal-modal-body::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.legal-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-dim);
}

/* Ensure main content has padding to not be hidden behind fixed footer */
.custom-homepage {
    padding-bottom: 60px;
}

/* =========================================
   MOBILE OPTIMIZATION (2026 UPDATE)
   ========================================= */
@media (max-width: 768px) {

    /* --- HEADER --- */
    .site-head {
        height: auto !important;
        flex-direction: column !important;
        padding: 15px 10px !important;
        gap: 10px;
        min-height: 100px;
        /* Ensure space */
    }

    .nav-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn {
        flex: 1 1 auto;
        /* Allow buttons to grow */
        justify-content: center;
        min-width: 80px;
        padding: 8px 10px;
        /* Improve touch target */
    }

    .logo-area {
        margin-bottom: 5px;
    }

    .center-tagline {
        display: none !important;
    }

    /* --- COMMUNITY SEARCH --- */
    #community-search-wrapper {
        position: relative;
    }

    #community-search-trigger {
        font-size: 18px !important;
        padding: 5px 10px !important;
        background: rgba(0, 242, 254, 0.1);
        border-radius: 4px;
        margin-left: 5px;
    }

    #community-search-input {
        font-size: 16px !important;
        /* Prevent iOS zoom */
        position: absolute;
        right: 0;
        top: 100%;
        background: #04080b !important;
        border: 1px solid var(--color-accent-cyan) !important;
        padding: 10px !important;
        z-index: 100;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        color: #fff !important;
    }

    /* --- FOOTER --- */
    .terminal-footer {
        height: auto !important;
        padding: 6px 5px 6px 5px !important;
        /* Minimal padding for centered alignment */
        flex-direction: column;
        gap: 15px;
        background: rgba(4, 8, 11, 0.98) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .footer-content {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        text-align: center;
        margin-left: -10px;
    }

    .footer-left,
    .footer-right,
    .footer-widgets {
        width: 100%;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 10px;
        display: flex !important;
        text-align: center !important;
    }


    /* Re-order footer items visually if needed */
    .footer-left {
        order: 2;
        margin-top: 0;
    }

    .footer-right {
        order: 3;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Ensure all footer elements align on same baseline */
    .footer-logo,
    .footer-tagline,
    .footer-divider,
    .footer-radio-btn,
    .footer-link,
    .footer-copyright,
    .system-manual-trigger {
        line-height: 1.2 !important;
        vertical-align: middle !important;
    }

    /* Brighten copyright and year */
    .footer-copyright {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .footer-widgets {
        order: 1;
        margin-bottom: 5px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .footer-right {
        order: 3;
    }

    .footer-stats {
        display: none !important;
    }

    .footer-logo {
        font-size: 1.2rem;
        margin-bottom: 5px;
        display: block;
        width: 100%;
        text-align: center;
    }

    .footer-tagline {
        display: block !important;
        margin-top: 5px;
    }

    /* Fix widget buttons size */
    .footer-widget-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    /* Ensure content is padded enough */
    .custom-homepage {
        padding-bottom: 180px !important;
        /* Huge padding to clear stacked footer */
    }
}

/* --- LOGIN SCREEN MOBILE FIX --- */
@media (max-width: 768px) {

    /* Hide unnecessary widgets on login screen to save space */
    body.password-gate-active .footer-widgets,
    body.password-gate-active .footer-stats {
        display: none !important;
    }

    /* Unstick footer so it doesn't cover inputs on login screen */
    body.password-gate-active .terminal-footer {
        padding: 5px 10px 15px 10px !important;
        position: relative !important;
        background: transparent !important;
        box-shadow: none !important;
        justify-content: center;
        margin-top: 20px;
    }

    /* Ensure legal links are centered */
    body.password-gate-active .footer-content {
        gap: 5px;
    }
}

/* --- TEXT LOGO STYLES --- */
.text-logo-mode {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.5px;
    /* Tighten it up a bit like the screenshot */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 2px;
    /* Slight gap? */
}

.logo-crypto {
    color: #fff;
}

.logo-in {
    color: var(--color-accent-cyan);
}

.logo-nyc {
    color: #fff;
}

.logo-area:hover .text-logo-mode {
    opacity: 0.9;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

/* Fix Footer Logo Color */
.footer-logo {
    color: #fff !important;
}

/* --- C//NYC SYSTEM MANUAL --- */
.system-manual-trigger {
    color: var(--color-text-dim);
    font-size: 0.55rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.system-manual-trigger:hover {
    color: var(--color-accent-cyan);
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
}

.tutorial-trigger {
    color: #f59e0b;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-right: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tutorial-trigger:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
}

@media (max-width: 768px) {
    .tutorial-trigger { display: none; }
    .neo-ob, .neo-ob-overlay, .neo-ob-spotlight { display: none !important; }
}

.system-manual-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    z-index: 99999;
    display: none; /* Controlled by JS */
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease-out;
}

.system-manual-content {
    background: var(--color-surface-mixed);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    width: 100%;
    max-width: 1000px;
    height: 85vh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}

.system-manual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255,255,255,0.02);
    flex-shrink: 0;
}

.system-manual-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* .system-manual-close — consolidated into universal close button rule above */

/* Two-column layout */
.system-manual-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar Navigation */
.system-manual-nav {
    width: 220px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    padding: 20px 0;
}

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

.nav-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 20px 8px 20px;
    opacity: 0.5;
}

.nav-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-dim);
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}

.nav-item:hover {
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.03);
}

.nav-item.active {
    color: var(--color-accent-teal);
    background: rgba(45, 212, 191, 0.05);
    border-left-color: var(--color-accent-teal);
    font-weight: 600;
}

/* Content Panel */
.system-manual-body {
    flex: 1;
    padding: 32px 40px;
    overflow-y: auto;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-dim);
    background: rgba(0,0,0,0.1);
    scrollbar-width: thin;
}

/* Custom scrollbar for Manual Body */
.system-manual-body::-webkit-scrollbar {
    width: 6px;
}
.system-manual-body::-webkit-scrollbar-track {
    background: transparent;
}
.system-manual-body::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.manual-section {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.manual-section.active {
    display: block;
}

.manual-section h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text-light);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.manual-section h3 {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--color-accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 8px 0;
}

.manual-section h3:first-of-type {
    margin-top: 15px;
}

.manual-section p {
    margin: 0 0 12px 0;
    color: var(--color-text-dim);
    line-height: 1.6;
}

.manual-section ul {
    margin: 0 0 15px 0;
    padding-left: 0;
    list-style: none;
}

.manual-section li {
    margin-bottom: 6px;
    color: var(--color-text-dim);
    padding-left: 15px;
    position: relative;
}

.manual-section li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--color-accent-cyan);
}

.manual-section strong {
    color: var(--color-text-light);
}

.manual-section code {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    background: rgba(0, 242, 254, 0.1);
    color: var(--color-accent-cyan);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Mobile: Stack layout */
@media (max-width: 768px) {
    .system-manual-content {
        max-width: 100%;
        height: 90vh;
        max-height: none;
        border-radius: 0;
    }

    .system-manual-layout {
        flex-direction: column;
    }

    .system-manual-nav {
        width: 100%;
        height: auto;
        max-height: 150px;
        border-right: none;
        border-bottom: 1px solid rgba(0, 242, 254, 0.15);
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        gap: 5px;
    }

    .nav-section {
        margin: 0;
    }

    .nav-section-title {
        display: none;
    }

    .nav-items {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .nav-item {
        padding: 5px 10px;
        border-left: none;
        border-radius: 4px;
        font-size: 0.7rem;
    }

    .nav-item.active {
        border-left: none;
        background: rgba(0, 242, 254, 0.2);
    }
}

.cursor-blink {
    display: inline-block;
    width: 8px;
    height: 15px;
    background-color: #00ff00;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
    margin-left: 2px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ========================================
   MODERN DM MESSAGE STYLING
   ======================================== */

/* DM Messages Container */
#dm-messages-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 212, 191, 0.25) transparent;
}

/* DM Message Bubble Base */
.dm-message {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    animation: fadeInUp 0.3s ease;
}

/* Sender's messages (right side) */
.dm-mine {
    align-self: flex-end;
}

/* Receiver's messages (left side) */
.dm-theirs {
    align-self: flex-start;
}

/* Action buttons container hover effect */
.dm-msg-actions {
    display: flex;
    gap: 6px;
    position: absolute;
    top: -32px;
    right: 0;
    z-index: 10;
    animation: fadeIn 0.2s ease;
}

/* Edit/Delete button hover animations */
.dm-edit-btn:hover,
.dm-delete-btn:hover {
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 242, 254, 0.4) !important;
}

.dm-delete-btn:hover {
    box-shadow: 0 4px 12px rgba(255, 50, 50, 0.4) !important;
}

/* Message fade-in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Simple fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* DM Input Area Modern Styling */
#dm-send-btn {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.8), rgba(0, 242, 254, 0.6)) !important;
    border: 1px solid rgba(0, 242, 254, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 242, 254, 0.3) !important;
    transition: all 0.3s ease !important;
}

#dm-send-btn:hover {
    background: linear-gradient(135deg, var(--color-accent-cyan), rgba(0, 242, 254, 0.8)) !important;
    box-shadow: 0 6px 16px rgba(0, 242, 254, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* DM Input Field Modern Styling */
#dm-input-area input[type="text"] {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 242, 254, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

#dm-input-area input[type="text"]:focus {
    border-color: rgba(0, 242, 254, 0.5) !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.3) !important;
    outline: none !important;
}

/* ======================================== */
/* ======================================== */
/* GLITCH BOOKMARK BUTTON EFFECTS           */
/* ======================================== */

/* Glitch Button Base */
.glitch-btn {
    position: relative;
    transition: all 0.3s ease;
}

/* Glitch effect on hover */
.glitch-btn:hover .bookmark-text::before,
.glitch-btn:hover .bookmark-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-btn:hover .bookmark-text::before {
    animation: glitch-anim-1 0.8s infinite;
    color: #ff00de;
    z-index: -1;
}

.glitch-btn:hover .bookmark-text::after {
    animation: glitch-anim-2 0.8s infinite;
    color: #00fff9;
    z-index: -2;
}

/* Glitch animations */
@keyframes glitch-anim-1 {
    0%, 100% {
        clip-path: inset(40% 0 61% 0);
        transform: translate(0);
    }
    20% {
        clip-path: inset(92% 0 1% 0);
        transform: translate(-2px, 2px);
    }
    40% {
        clip-path: inset(43% 0 1% 0);
        transform: translate(-2px, -2px);
    }
    60% {
        clip-path: inset(25% 0 58% 0);
        transform: translate(2px, 2px);
    }
    80% {
        clip-path: inset(54% 0 7% 0);
        transform: translate(2px, -2px);
    }
}

@keyframes glitch-anim-2 {
    0%, 100% {
        clip-path: inset(1% 0 96% 0);
        transform: translate(0);
    }
    20% {
        clip-path: inset(10% 0 11% 0);
        transform: translate(2px, -2px);
    }
    40% {
        clip-path: inset(99% 0 1% 0);
        transform: translate(2px, 2px);
    }
    60% {
        clip-path: inset(82% 0 5% 0);
        transform: translate(-2px, -2px);
    }
    80% {
        clip-path: inset(26% 0 52% 0);
        transform: translate(-2px, 2px);
    }
}

/* RGB split effect on state change */
.glitch-btn.bookmarked {
    animation: rgb-split 0.6s ease-out;
}

@keyframes rgb-split {
    0% {
        text-shadow: 0 0 0 transparent;
        transform: translate(0);
    }
    25% {
        text-shadow: -2px 0 #ff00de, 2px 0 #00fff9;
        transform: translate(-1px, 0);
    }
    50% {
        text-shadow: 2px 0 #ff00de, -2px 0 #00fff9;
        transform: translate(1px, 0);
    }
    75% {
        text-shadow: -1px 0 #ff00de, 1px 0 #00fff9;
        transform: translate(0, 0);
    }
    100% {
        text-shadow: 0 0 0 transparent;
        transform: translate(0);
    }
}

/* Scanline effect */
.glitch-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    animation: scanline 4s linear infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.glitch-btn:hover::after {
    opacity: 1;
}

@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Digital flicker on bookmarked state */
.glitch-btn.bookmarked {
    animation: digital-flicker 0.25s 2;
}

@keyframes digital-flicker {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Enhanced hover state */
.glitch-btn:hover {
    border-color: #00fff9 !important;
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.4), inset 0 0 10px rgba(0, 255, 249, 0.1);
    transform: translateY(-1px);
}

/* Bookmarked state glow */
.glitch-btn.bookmarked {
    box-shadow: 0 0 15px rgba(255, 179, 0, 0.5), inset 0 0 15px rgba(255, 179, 0, 0.15);
}

/* Text styling */
.glitch-btn .bookmark-text {
    position: relative;
    display: inline-block;
}

/* ======================================== */
/* SHARE POST MODAL STYLES                  */
/* ======================================== */

.share-option-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 242, 254, 0.2);
}

.share-option-btn:active {
    transform: translateY(0);
}

#sharePostUrl {
    user-select: all;
}

#sharePostUrl:focus {
    outline: 1px solid var(--color-accent-cyan);
    outline-offset: 2px;
}

/* ======================================== */
/* RECAPTCHA BADGE - HIDDEN                 */
/* ======================================== */
/* Google reCAPTCHA badge is hidden per Google's Terms of Service.
   Disclosure has been added to Privacy Policy as required. */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* =================================================================
   RIVAL DUEL WIDGET - PREMIUM FINTECH DESIGN
   Bloomberg Terminal meets Cyberpunk 2026
   ================================================================= */

/* CSS Variables for Rival Duel */
:root {
    --rival-bg-base: #0a0e12;
    --rival-text-primary: #e8eaed;
    --rival-text-dim: #94a3b8;
    --rival-accent-cyan: #4db8d8;
    --rival-bull-green: #10b981;
    --rival-bear-red: #dc2626;
    --rival-border-subtle: rgba(255, 255, 255, 0.08);
    --rival-glass-bg: rgba(255, 255, 255, 0.03);
    --rival-glass-border: rgba(255, 255, 255, 0.1);
}

/* Keyframes for animations */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(20px); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

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

@keyframes glow {
    0%, 100% { box-shadow: 0 0 10px rgba(77, 184, 216, 0.2); }
    50% { box-shadow: 0 0 20px rgba(77, 184, 216, 0.4); }
}

/* Smooth transitions for all interactive elements */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Data update flash animation */
@keyframes flashGreen {
    0% { background: transparent; }
    50% { background: rgba(16, 185, 129, 0.2); }
    100% { background: transparent; }
}

@keyframes flashRed {
    0% { background: transparent; }
    50% { background: rgba(220, 38, 38, 0.2); }
    100% { background: transparent; }
}

#rival-duel-widget {
    background: linear-gradient(135deg, rgba(10, 14, 18, 0.98) 0%, rgba(15, 20, 25, 0.98) 100%);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--rival-glass-border);
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 2px 4px rgba(0, 0, 0, 0.3) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--rival-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border-radius: 12px;
    position: relative;
}

/* Subtle grain texture overlay */
#rival-duel-widget::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.03"/></svg>');
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}

#rival-duel-widget.minimized {
    height: auto !important;
}

#rival-duel-widget.minimized .widget-body {
    display: none !important;
}

/* Widget Header - Clean and modern */
#rival-duel-widget .widget-header {
    background: var(--rival-glass-bg);
    border-bottom: 1px solid var(--rival-border-subtle);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    cursor: move;
}

#rival-duel-widget .widget-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

#rival-duel-widget .title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

#rival-duel-widget .widget-icon {
    font-size: 18px;
    color: var(--rival-accent-cyan);
    text-shadow: 0 0 12px rgba(77, 184, 216, 0.3);
    filter: drop-shadow(0 0 8px rgba(77, 184, 216, 0.2));
}

#rival-duel-widget .widget-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-family: 'Space Mono', 'Courier New', monospace;
    color: var(--rival-text-primary);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

#rival-duel-widget .status-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 4px 8px 4px 18px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.12);
    color: var(--rival-bull-green);
    border: 1px solid rgba(16, 185, 129, 0.25);
    margin-left: 12px;
    letter-spacing: 0.8px;
    font-family: 'Space Mono', monospace;
    position: relative;
    transition: all 0.3s ease;
}

#rival-duel-widget .status-badge.pulse::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--rival-bull-green);
    animation: statusPulse 2s ease-in-out infinite;
}

#rival-duel-widget .vote-countdown {
    font-size: 9px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.08);
    margin-left: 8px;
    letter-spacing: 0.8px;
    font-family: 'Space Mono', monospace;
    white-space: nowrap;
}

/* Entities Grid - Premium Layout */
.entities-grid {
    display: flex;
    padding: 24px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
    border-bottom: 1px solid var(--rival-border-subtle);
    position: relative;
    z-index: 2;
    gap: 20px;
}

.entity-card {
    flex: 1;
    padding: 0;
    transition: transform 0.3s ease;
}

.entity-card:hover {
    transform: translateY(-2px);
}

.divider-v {
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.12) 20%,
        rgba(255, 255, 255, 0.12) 80%,
        transparent
    );
    position: relative;
}

.divider-v::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rival-border-subtle);
    box-shadow: 0 0 8px rgba(255,255,255,0.1);
}

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

.entity-id {
    flex: 1;
}

.entity-type {
    font-size: 9px;
    font-weight: 600;
    color: var(--rival-text-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
    font-family: 'Space Mono', monospace;
}

.entity-name {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
}

.side-bull .entity-name {
    color: var(--color-accent-teal);
    text-shadow: 0 0 16px rgba(45, 212, 191, 0.2);
}

.side-bear .entity-name {
    color: #a78bfa;
    text-shadow: 0 0 16px rgba(167, 139, 250, 0.2);
}

.entity-loyalty {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.entity-loyalty .label {
    font-size: 8px;
    color: var(--color-text-dim);
    letter-spacing: 0.1em;
    font-weight: 700;
}

.entity-loyalty .value {
    font-size: 18px;
    font-weight: 800;
    font-family: 'Space Mono', monospace;
    color: var(--color-text-light);
}

/* PNL Data Row - Refined Bento Style */
.entity-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.entity-data-row:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.data-point {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.data-point .label {
    font-size: 9px;
    color: var(--color-text-dim);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pnl-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    color: var(--color-text-light);
}

.pnl-percent {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    padding: 2px 8px;
    border-radius: 6px;
}

.pnl-up {
    color: var(--color-accent-teal);
    background: rgba(45, 212, 191, 0.1);
}

.pnl-down {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.1);
}

/* Entity Thought Bubble */
.entity-thought {
    position: relative;
}

.entity-thought .thought-label {
    font-size: 8px;
    color: var(--color-text-dim);
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Space Mono', monospace;
}

.entity-thought .bias-text {
    color: var(--color-accent-teal);
    font-weight: 700;
}

.entity-thought .chat-bubble {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-light);
    background: rgba(0,0,0,0.2);
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 3px solid var(--color-accent-teal);
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.side-bear .chat-bubble {
    border-left-color: #a78bfa;
}

.side-bear .bias-text {
    color: #a78bfa;
}

.entity-thought .chat-bubble:hover {
    background: rgba(0,0,0,0.3);
}

/* Broadcast Log - Refined High-Density */
.broadcast-log {
    flex: 1;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid var(--color-border);
    position: relative;
}

.log-header {
    background: rgba(255, 255, 255, 0.02);
    padding: 10px 16px;
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-dim);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.05em;
}

.log-time {
    color: var(--color-accent-teal);
}

.log-entries {
    padding: 16px;
    max-height: 160px;
    overflow-y: auto;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    line-height: 1.6;
}

/* Custom scrollbar */
.log-entries::-webkit-scrollbar {
    width: 4px;
}
.log-entries::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

.log-entry {
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.log-entry:hover {
    background: rgba(255,255,255,0.03);
}

.log-sender {
    font-weight: 800;
    min-width: 60px;
    letter-spacing: 0.05em;
}

.log-sender.bull {
    color: var(--color-accent-teal);
}

.log-sender.bear {
    color: #a78bfa;
}

.log-msg {
    color: var(--color-text-dim);
    flex: 1;
}

/* Actions Footer */
.widget-action-footer {
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.footer-prompt {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-dim);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'Space Mono', monospace;
}

.footer-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Side Support Buttons */
.btn-side {
    flex: 1;
    max-width: 200px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
}

.btn-side:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.bull-side:hover {
    border-color: var(--color-accent-teal);
    background: rgba(45, 212, 191, 0.1);
    color: var(--color-accent-teal);
}

.bear-side:hover {
    border-color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

.btn-side:active {
    transform: scale(0.98);
}

/* Widget Body */
#rival-duel-widget .widget-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 2;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom Scrollbar for Widget Body */
#rival-duel-widget .widget-body::-webkit-scrollbar {
    width: 8px;
}

#rival-duel-widget .widget-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

#rival-duel-widget .widget-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(77, 184, 216, 0.3), rgba(167, 139, 250, 0.3));
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#rival-duel-widget .widget-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(77, 184, 216, 0.5), rgba(167, 139, 250, 0.5));
}

/* Control Buttons (Header) - Premium styling */
.minimize-btn, .close-btn {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--rival-text-dim);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Space Mono', monospace;
}

.minimize-btn:hover, .close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--rival-text-primary);
    transform: scale(1.05);
}

.close-btn:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--rival-bear-red);
}

.close-btn:active {
    transform: scale(0.95);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #rival-duel-widget {
        width: calc(100% - 20px) !important;
        height: 80vh !important;
        top: 10vh !important;
        left: 10px !important;
    }

    #rival-duel-widget .entities-grid {
        flex-direction: column;
        gap: 20px;
        padding: 16px;
    }

    .divider-v {
        display: none;
    }

    .footer-btns {
        flex-direction: column;
    }

    .btn-side {
        max-width: none;
    }
}

/* Hide mobile-specific footer icons on desktop */
.footer-rival-icon-mobile {
    display: none;
}

/* =================================================================
   HEADER WIDGET ALIGNMENT (Precise Footer/Terminal Style)
   ================================================================= */

/* ── NOTIFICATION BELL ── */

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: rgba(10, 15, 23, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 242, 254, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.06);
    z-index: 999999;
    overflow: hidden;
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 242, 254, 0.1);
    font-size: 9px;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-accent-cyan);
}

.notif-mark-all {
    background: none;
    border: none;
    color: var(--color-text-dim);
    font-size: 9px;
    font-family: 'Space Mono', monospace;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.notif-mark-all:hover {
    color: var(--color-accent-cyan);
}

.notif-list {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.notif-empty {
    padding: 20px 14px;
    color: var(--color-text-dim);
    font-size: 11px;
    text-align: center;
    margin: 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.notif-item:hover {
    background: rgba(0, 242, 254, 0.05);
}

.notif-item.unread {
    background: rgba(0, 242, 254, 0.04);
    border-left: 2px solid var(--color-accent-cyan);
}

.notif-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}

.notif-item-icon.follow {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
}

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

.notif-item-text {
    font-size: 11px;
    color: var(--color-text-light);
    line-height: 1.4;
    word-break: break-word;
}

.notif-item-time {
    font-size: 9px;
    color: var(--color-text-dim);
    font-family: 'Space Mono', monospace;
    margin-top: 2px;
}

/* DM Unread Badge Styling */
.dm-unread-badge {
    background: var(--color-accent-cyan) !important;
    color: var(--color-base) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 20px !important;
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: normal !important;
    font-family: 'Space Mono', monospace !important;
    z-index: 100;
}

/* Base Widget Containers (See-through Glass) */
#launch-token-widget,
#trade-hub-widget,
#terminal-widget-container,
#connect-wallet-widget,
#dm-inbox-window,
#oracle-terminal-widget,
#whale-radar-widget {
    background: rgba(6, 12, 20, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(45, 212, 191, 0.3) !important; /* Default Teal */
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    position: absolute !important; /* FIXED: Use absolute to keep windows floating within the fixed container without pushing layout */
}

/* scanline overlay */
#launch-token-widget::after,
#trade-hub-widget::after,
#terminal-widget-container::after,
#connect-wallet-widget::after,
#dm-inbox-window::after,
#oracle-terminal-widget::after,
#whale-radar-widget::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.01), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.01)) !important;
    background-size: 100% 2px, 3px 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.3 !important;
}

/* Functional Accent Overrides */
#launch-token-widget, #connect-wallet-widget {
    border-color: rgba(247, 147, 26, 0.4) !important; /* Amber */
}

/* Widget Header (Terminal Style) */
#launch-token-widget .widget-header,
#trade-hub-widget .widget-header,
#terminal-widget-container .widget-header,
#terminal-widget-container .terminal-header-handle,
#connect-wallet-widget .widget-header,
#dm-inbox-window .window-header,
#oracle-terminal-widget .widget-header,
#whale-radar-widget .widget-header {
    background: rgba(45, 212, 191, 0.05) !important;
    border-bottom: 1px solid rgba(45, 212, 191, 0.3) !important;
    padding: 10px 14px !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--color-accent-cyan) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Header prefixes */
#launch-token-widget .widget-header::before,
#trade-hub-widget .widget-header::before,
#terminal-widget-container .widget-header::before,
#terminal-widget-container .terminal-header-handle::before,
#connect-wallet-widget .widget-header::before,
#dm-inbox-window .window-header::before,
#oracle-terminal-widget .widget-header::before,
#whale-radar-widget .widget-header::before {
    content: "> " !important;
    opacity: 0.7 !important;
}

/* Header Tint Overrides (Amber) */
#launch-token-widget .widget-header, #connect-wallet-widget .widget-header {
    background: rgba(247, 147, 26, 0.05) !important;
    border-bottom-color: rgba(247, 147, 26, 0.4) !important;
    color: #f7931a !important;
}

/* Control buttons — consolidated into universal close button rule */

/* Inner Scrollable Areas */
#launch-token-widget .widget-body,
#trade-hub-widget .widget-body,
#terminal-widget-container .widget-body,
#connect-wallet-widget .widget-body,
#dm-inbox-window .window-content-body {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(45, 212, 191, 0.25) transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Match News Scrollbar to Nostr (Ultra-Dim) */
.news-list {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(45, 212, 191, 0.25) transparent !important;
}
.news-list::-webkit-scrollbar {
    width: 6px !important;
}
.news-list::-webkit-scrollbar-thumb {
    background: rgba(45, 212, 191, 0.25) !important;
    border-radius: 10px !important;
}
.news-list::-webkit-scrollbar-track {
    background: transparent !important;
}

/* =================================================================
   NYC CRYPTO EVENTS CALENDAR
   ================================================================= */
#eventCalendarWindow {
    font-family: 'Space Mono', monospace;
}
#eventCalendarWindow ::-webkit-scrollbar {
    width: 4px;
}
#eventCalendarWindow ::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 254, 0.2);
    border-radius: 4px;
}
#eventCalendarWindow ::-webkit-scrollbar-track {
    background: transparent;
}
#calPrevMonth:hover,
#calNextMonth:hover,
#calTodayBtn:hover {
    background: rgba(0, 242, 254, 0.08) !important;
    border-color: rgba(0, 242, 254, 0.4) !important;
    color: rgba(0, 242, 254, 1) !important;
}
#calClose:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}
.cal-day-cell:hover {
    background: rgba(0, 242, 254, 0.07) !important;
}

@media (max-width: 600px) {
    #eventCalendarWindow {
        top: 60px !important;
        left: 2vw !important;
        transform: none !important;
        width: 96vw !important;
    }
    #calEventList {
        display: none !important;
    }
    #openEventCalendarBtn {
        display: none !important;
    }
}

/* Calendar button hover */
#openEventCalendarBtn:hover {
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.2s ease;
}

/* Chat input size reduction */
@media (min-width: 769px) {
    #chat-input-area {
        padding: 2px 6px !important;
    }
    #chat-input.chat-input-div {
        padding: 2px 8px !important;
        min-height: 18px !important;
        max-height: 60px !important;
        line-height: 1.4 !important;
        font-size: 13px !important;
    }
    #chat-send-btn {
        padding: 2px 12px !important;
        font-size: 13px !important;
    }
    #chat-emoji-btn {
        padding: 2px !important;
    }
}

/* ============================================================
   TABLET BREAKPOINT (iPad / 769px–1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1200px) {
    /* Header: tighten nav so it fits on one line */
    .site-head {
        flex-wrap: nowrap;
        padding: 0 2vw;
    }

    .center-tagline {
        display: block;
        flex-grow: 0;
        padding: 0 10px;
    }

    .site-description {
        font-size: 0.7rem;
        white-space: nowrap;
    }

    .nav-actions {
        gap: 3px;
    }

    .nav-actions .btn.ghost {
        padding: 4px 7px !important;
        font-size: 0.65rem !important;
        gap: 3px !important;
    }

    .nav-actions .btn.ghost .tab-icon {
        width: 12px !important;
        height: 12px !important;
    }

    .nav-actions > span {
        font-size: 0.6rem !important;
    }

    .header-level-indicator {
        font-size: 0.6rem !important;
        padding: 2px 7px !important;
    }

    .nav-btn-label {
        display: none;
    }

    /* Keep Account and Log Out labels visible */
    #openAccountModalBtn .nav-btn-label,
    #logoutBtn .nav-btn-label {
        display: inline;
    }

    /* Footer: prevent right section from being cut off */
    .footer-content {
        gap: 8px;
    }

    .footer-right {
        gap: 5px;
        flex-shrink: 1;
        min-width: 0;
    }

    .footer-link,
    .footer-copyright,
    .system-manual-trigger {
        font-size: 0.5rem;
    }

    .footer-social {
        font-size: 0.7rem;
    }

    /* Watchlist: prevent cards from shrinking below content width */
    .watchlist-card {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        padding: 0 10px !important;
        gap: 4px;
        overflow: visible;
    }

    .wl-price,
    .wl-change {
        font-size: 8px;
    }

    .nav-btn-label {
        display: none;
    }

    /* Watchlist Add More: show only + on tablet */
    .add-more-text {
        display: none;
    }

}

@media (max-width: 768px) {
    /* Terminal widget: hide desktop title bar on mobile (back button handles close) */
    #terminal-widget-container .terminal-header-handle {
        display: none !important;
    }
}