:root {
    /* NEW DARK MODE SLATE PALETTE */
    --bg-base: #0f172a;       /* slate-900 */
    --bg-surface: rgba(30, 41, 59, 0.7); /* slate-800 with 70% opacity for glass */
    --bg-input: #151e2e;      /* slate-850 */
    
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-focus: #06b6d4;
    
    /* BRAND GRADIENT COLORS */
    --ladva-blue: #2563eb;
    --ladva-cyan: #06b6d4;
    --ladva-magenta: #e11d48; 
    
    /* TEXT COLORS */
    --text-main: #e2e8f0;     /* slate-200 */
    --text-muted: #94a3b8;    /* slate-400 */
    --text-meta: #64748b;     /* slate-500 */
    
    /* PERFORMANCE COLORS */
    --profit-green: #34d399;  /* emerald-400 */
    --profit-bg: rgba(52, 211, 153, 0.1);
    --loss-red: #f43f5e;      /* rose-500 */
    --loss-bg: rgba(244, 63, 94, 0.1);
    --warn-yellow: #fbbf24;   /* amber-400 */
    --warn-bg: rgba(251, 191, 36, 0.1);
    
    --radius-xl: 24px; 
    --radius-lg: 16px; 
    --radius-md: 12px;
}

html, body { 
    min-height: 100dvh; 
    background-color: var(--bg-base); 
    color: var(--text-main); 
    font-family: 'Inter', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    padding-bottom: 100px; 
    line-height: 1.6;
}

::selection { background-color: var(--ladva-cyan); color: var(--bg-base); }

h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.font-display { font-family: 'Outfit', sans-serif; }

/* --- BRAND LOGO EXACT REPLICA --- */
.ladva-logo-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 2rem; /* Increased size */
    letter-spacing: -0.025em;
    font-style: italic;
    background: linear-gradient(to right, var(--ladva-blue), var(--ladva-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* --- UTILITY COLORS --- */
.text-accent { color: var(--ladva-cyan) !important; }
.text-profit { color: var(--profit-green) !important; }
.text-loss { color: var(--loss-red) !important; }
.text-main { color: var(--text-main) !important; }
.text-muted { color: var(--text-muted) !important; }
.cursor-pointer { cursor: pointer; }

/* --- BENTO BOX GLASSMORPHISM --- */
.dash-box, .feed-card, .bento-glass { 
    background: var(--bg-surface); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle); 
    border-radius: var(--radius-xl); 
    padding: 1.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Feed Cards */
.feed-card { margin-bottom: 1.5rem; overflow: hidden; padding: 0; }
.feed-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); }
.feed-card-header { padding: 1.25rem 1.5rem; background: rgba(15, 23, 42, 0.4); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; }
.feed-card-body { padding: 1.5rem; }
.internal-card { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.25rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }

.ticker-val { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: #ffffff; }

/* Horizontal Scroll for Tickers */
.ticker-scroll {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; 
    padding-bottom: 0.5rem; margin-bottom: -0.5rem; gap: 1.5rem; scrollbar-width: none; 
}
.ticker-scroll::-webkit-scrollbar { display: none; }
.ticker-item { flex: 0 0 auto; min-width: 110px; }

/* --- FAQ & DIRECTORY ACCORDION (Sleek Glass Style) --- */
.faq-bento { transition: all 0.3s ease; }
.faq-bento:hover { border-color: rgba(6, 182, 212, 0.4); box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.1); }
.faq-accordion .accordion-item,
#macroDirectoryContainer .accordion-item { 
    background: transparent !important; border: none !important; margin-bottom: 1.25rem; 
}
.faq-accordion .accordion-button,
#macroDirectoryContainer .accordion-button { 
    background: transparent !important; border: none !important; color: #fff !important; 
    font-size: 1.1rem; padding: 1.5rem; box-shadow: none !important; font-family: 'Inter', sans-serif; font-weight: 700; 
}
.faq-accordion .accordion-button:not(.collapsed),
#macroDirectoryContainer .accordion-button:not(.collapsed) { 
    color: var(--ladva-cyan) !important; background: rgba(6, 182, 212, 0.05) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; 
}
.faq-accordion .accordion-body,
#macroDirectoryContainer .accordion-body { 
    background: transparent !important; border: none !important; padding: 1.5rem; color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; 
}
.faq-accordion .accordion-button::after,
#macroDirectoryContainer .accordion-button::after { 
    filter: brightness(0) invert(1); 
}
.faq-accordion .accordion-button:not(.collapsed)::after,
#macroDirectoryContainer .accordion-button:not(.collapsed)::after { 
    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(140deg); 
}

/* Custom Accordion Overrides (Inner Card Data) */
.accordion:not(.faq-accordion) .accordion-item { 
    background: var(--bg-input);
    border: 1px solid var(--border-subtle); 
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem; 
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.accordion:not(.faq-accordion) .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(6, 182, 212, 0.4);
}
.accordion:not(.faq-accordion) .accordion-button {
    background: transparent; 
    color: var(--text-main); 
    font-weight: 600;
    border: none !important; 
    border-radius: 0 !important;
    padding: 1rem 1.25rem; 
    box-shadow: none !important;
}
.accordion:not(.faq-accordion) .accordion-button:not(.collapsed) {
    background: rgba(6, 182, 212, 0.1); 
    color: var(--ladva-cyan);
    border-bottom: 1px solid rgba(6, 182, 212, 0.2) !important;
}
.accordion:not(.faq-accordion) .accordion-button:focus { 
    border-color: transparent; 
    box-shadow: none !important; 
}
.accordion:not(.faq-accordion) .accordion-body {
    background: rgba(15, 23, 42, 0.4); 
    border: none !important; 
    padding: 1.25rem;
}

/* --- Tags & Badges --- */
.tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border: 1px solid transparent; font-family: 'JetBrains Mono', monospace;}
.tag-cyan { background: rgba(6, 182, 212, 0.1); color: var(--ladva-cyan); border-color: rgba(6, 182, 212, 0.3); }
.tag-magenta { background: rgba(225, 29, 72, 0.1); color: var(--ladva-magenta); border-color: rgba(225, 29, 72, 0.3); }
.tag-green { background: var(--profit-bg); color: var(--profit-green); border-color: rgba(52, 211, 153, 0.3); }
.tag-yellow { background: var(--warn-bg); color: var(--warn-yellow); border-color: rgba(251, 191, 36, 0.3); }
.tag-gray { background: rgba(255,255,255,0.05); color: var(--text-muted); border-color: var(--border-subtle); }

/* --- Forms & Buttons --- */
.form-control, .form-select { 
    background-color: var(--bg-input) !important; border: 1px solid var(--border-subtle) !important; 
    color: var(--text-main) !important; padding: 0.75rem 1rem; border-radius: var(--radius-md); 
    font-size: 0.95rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); 
}
.form-control:focus, .form-select:focus { border-color: var(--ladva-cyan) !important; box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important; }

select option {
    background-color: var(--bg-base);
    color: var(--text-main);
}

/* Glowing FAB Scanner Button */
.fab-scanner {
    background: linear-gradient(135deg, var(--ladva-blue) 0%, var(--ladva-cyan) 100%);
    box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.5), 0 8px 10px -6px rgba(37, 99, 235, 0.5);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #fff !important; border: none;
}
.fab-scanner:active { transform: scale(0.9); }

.btn-primary { 
    background: var(--ladva-blue); border: none; font-weight: 600; border-radius: var(--radius-md); 
    color: #fff !important; transition: 0.2s; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3); 
}
.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); }

.btn-outline-accent { color: var(--text-main); border: 1px solid var(--border-subtle); background: var(--bg-input); font-weight: 600; font-size: 0.85rem; }
.btn-outline-accent:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: var(--ladva-cyan); }

/* --- Modals & Overlays --- */
.modal-content { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.modal-header { border-bottom: 1px solid var(--border-subtle); }
.modal-backdrop { background-color: #000000; }
.modal-backdrop.show { opacity: 0.8; }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.table { color: var(--text-main); font-size: 0.9rem; margin-bottom: 0; }
.table th { border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-muted); font-weight: 600; background: transparent !important; }
.table td { border-bottom: 1px solid var(--border-subtle) !important; vertical-align: middle; background: transparent !important; color: var(--text-main); }

.spa-view { display: none; }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- Top & Bottom Navigations --- */
.top-nav { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); padding: 1rem 0; z-index: 1040; }
.nav-item-desk { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; padding: 0.5rem 1rem; border-radius: var(--radius-md); transition: 0.2s; }
.nav-item-desk:hover, .nav-item-desk.active { color: #fff; background: rgba(255,255,255,0.1); }

.bottom-nav { 
    position: fixed; bottom: 0; left: 0; right: 0; height: 80px; 
    background: rgba(30, 41, 59, 0.9); backdrop-filter: blur(20px); 
    border-top: 1px solid var(--border-subtle); z-index: 2000; display: flex; 
    justify-content: space-between; align-items: center; padding: 0 20px;
    padding-bottom: env(safe-area-inset-bottom); border-radius: 24px 24px 0 0;
}
.bottom-nav-item { color: var(--text-muted); text-decoration: none; font-size: 0.75rem; font-weight: 600; flex: 1; text-align: center; transition: 0.2s; display: flex; flex-direction: column; align-items: center;}
.bottom-nav-item i { font-size: 1.4rem; margin-bottom: 4px; display: block; }
.bottom-nav-item.active { color: var(--ladva-cyan); }
.bottom-nav-spacer { width: 80px; }

@media (min-width: 992px) { .bottom-nav { display: none; } body { padding-bottom: 0; } }

/* Responsive Border Utility */
@media (min-width: 768px) {
    .border-md-start {
        border-left: 1px solid var(--border-subtle) !important;
    }
}

/* --- Lightbox & Dropzone --- */
#lightboxModal .modal-content { background: transparent; border: none; box-shadow: none; }
#imageDropzone { background: transparent !important; border: none !important; min-height: auto !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; overflow-y: auto !important; gap: 8px !important; padding: 0 !important;}
#imageDropzone:not(.d-none) { display: flex !important; }
#imageDropzone .dz-preview { margin: 0 !important; min-height: auto !important; position: relative !important; background-color: transparent; }
#imageDropzone .dz-preview .dz-details, #imageDropzone .dz-preview .dz-progress, #imageDropzone .dz-preview .dz-success-mark, #imageDropzone .dz-preview .dz-error-mark { display: none !important; }
#imageDropzone .dz-image { width: 60px !important; height: 60px !important; border-radius: 8px !important; z-index: 1 !important; border: 1px solid var(--border-subtle) !important; overflow: hidden !important; isolation: isolate !important; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
#imageDropzone .dz-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 8px !important; }
#imageDropzone .dz-preview .dz-remove { position: absolute !important; top: -6px !important; right: -6px !important; z-index: 10 !important; background: var(--loss-red) !important; color: white !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; text-decoration: none !important; box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; border: 2px solid var(--bg-base) !important; }
#imageDropzone .dz-preview .dz-remove::after { content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px !important; }

/* Unified Segmented Control Styling */
.segment-control { background: rgba(0,0,0,0.2); padding: 6px; border-radius: 12px; border: 1px solid var(--border-subtle); display: flex; width: 100%; align-items: center; }
.segment-btn { flex: 1; border: none; background: transparent; padding: 10px 16px; border-radius: 8px; font-weight: 600; color: var(--text-muted); transition: all 0.2s ease-in-out; }
.segment-btn.active { background: var(--bg-surface); color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.3); border: 1px solid var(--border-subtle); }
.segment-btn:hover:not(.active) { color: #fff; }