/* 
   VIOP Hermes Bot - Premium Glassmorphism Style Sheet
   Designed with Tailored HSL Colors & Modern Typography
*/

:root {
    /* Color Palette */
    --bg-dark: hsl(222, 28%, 7%);
    --card-bg: rgba(15, 23, 42, 0.55);
    --card-border: rgba(148, 163, 184, 0.1);
    --card-border-hover: rgba(148, 163, 184, 0.25);
    
    --text-primary: hsl(210, 40%, 98%);
    --text-secondary: hsl(215, 25%, 70%);
    --text-muted: hsl(215, 16%, 47%);
    
    /* Neon Accents */
    --accent-emerald: hsl(150, 84%, 44%);
    --accent-emerald-glow: rgba(16, 185, 129, 0.15);
    --accent-crimson: hsl(346, 84%, 61%);
    --accent-crimson-glow: rgba(239, 68, 68, 0.15);
    --accent-blue: hsl(217, 91%, 60%);
    --accent-blue-glow: rgba(59, 130, 246, 0.2);
    --accent-amber: hsl(45, 93%, 47%);
    --accent-amber-glow: rgba(245, 158, 11, 0.15);
    
    /* Fonts */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* System Sizes */
    --sidebar-width: 280px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Base & Scrollbars --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(10, 15, 30, 0.4);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-blue), var(--accent-emerald));
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #60a5fa, #34d399);
}

/* --- Glassmorphic Background Orbs --- */
.glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    opacity: 0.25;
    pointer-events: none;
    animation: pulse-orb 20s infinite alternate ease-in-out;
}
.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--accent-blue);
    top: -100px;
    left: -100px;
}
.orb-2 {
    width: 500px;
    height: 500px;
    background: var(--accent-emerald);
    bottom: -150px;
    right: -100px;
    animation-delay: 5s;
}
.orb-3 {
    width: 350px;
    height: 350px;
    background: var(--accent-crimson);
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

@keyframes pulse-orb {
    0% { transform: scale(1) translate(0, 0); opacity: 0.18; }
    50% { transform: scale(1.15) translate(30px, -20px); opacity: 0.25; }
    100% { transform: scale(0.9) translate(-10px, 40px); opacity: 0.15; }
}

/* --- Container App Layout --- */
.app-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* --- Sidebar Section --- */
.sidebar {
    width: var(--sidebar-width);
    background: rgba(10, 15, 30, 0.7);
    border-right: 1px solid var(--card-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    flex-shrink: 0;
}

.sidebar-header {
    margin-bottom: 3rem;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.logo-icon {
    font-size: 1.5rem;
    color: var(--accent-blue);
    filter: drop-shadow(0 0 8px var(--accent-blue-glow));
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffffff, var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-sub {
    font-size: 0.75rem;
    color: var(--accent-blue);
    vertical-align: super;
    margin-left: 2px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-emerald);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-emerald);
    box-shadow: 0 0 8px var(--accent-emerald);
}

.pulsing {
    animation: pulsing-glow 1.5s infinite alternate ease-in-out;
}

@keyframes pulsing-glow {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px var(--accent-emerald); }
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-smooth);
}

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

.nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    transform: translateX(4px);
}

.nav-item.active {
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid var(--accent-blue);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 10px 0 20px rgba(59, 130, 246, 0.04);
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid var(--card-border);
    padding-top: 1.5rem;
}

.version-info {
    font-size: 0.75rem;
}

.env-badge {
    font-weight: 700;
    color: var(--accent-emerald);
}

.env-label {
    color: var(--text-muted);
    margin-bottom: 2px;
}

.ver-label {
    color: var(--text-muted);
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.85rem;
}

.btn-action {
    background: linear-gradient(135deg, var(--accent-blue), #2563eb);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.btn-secondary-sm {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
}

.btn-secondary-sm:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--card-border-hover);
}

/* --- Main Content Area --- */
.main-content {
    flex-grow: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden; /* Guarantee zero horizontal scrollbar */
    max-height: 100vh;
    width: 100%;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.page-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.85rem;
    margin-bottom: 0.25rem;
    letter-spacing: -0.5px;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.clock-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* --- Tab Management --- */
.tab-content {
    display: none;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

.tab-content.active {
    display: flex;
    animation: fadeIn 0.4s ease-out;
}

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

/* --- Glass Cards --- */
.glass-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(10, 15, 30, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: var(--transition-smooth);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.glass-card:hover {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5), 0 0 24px rgba(59, 130, 246, 0.15);
    transform: translateY(-3px);
}

/* --- Metrics Grid --- */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.pnl-icon {
    background: rgba(16, 185, 129, 0.08);
    color: var(--accent-emerald);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.win-icon {
    background: rgba(245, 158, 11, 0.08);
    color: var(--accent-amber);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.trades-icon {
    background: rgba(59, 130, 246, 0.08);
    color: var(--accent-blue);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.margin-icon {
    background: rgba(239, 68, 68, 0.08);
    color: var(--accent-crimson);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.metric-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -0.5px;
}

.metric-trend {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.metric-subtext {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.win-progress-bar {
    width: 120px;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.win-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-amber), #ea580c);
    border-radius: 2px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Layout Grids --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-4 { grid-column: span 4; }

.dashboard-right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.dashboard-right-sidebar > * {
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.margin-top {
    margin-top: 1.5rem;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.card-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i {
    color: var(--text-secondary);
}

.card-body {
    padding: 1.25rem 1.5rem;
}

.scroll-x {
    overflow-x: auto;
}

.scroll-y {
    overflow-y: auto;
}

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-emerald { color: var(--accent-emerald) !important; }
.text-crimson { color: var(--accent-crimson) !important; }
.text-blue { color: var(--accent-blue) !important; }

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-emerald {
    background: rgba(16, 185, 129, 0.08);
    color: var(--accent-emerald);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-crimson {
    background: rgba(239, 68, 68, 0.08);
    color: var(--accent-crimson);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-blue {
    background: rgba(59, 130, 246, 0.08);
    color: var(--accent-blue);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-amber {
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-muted {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* --- Tables --- */
.premium-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.premium-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--card-border);
    font-family: var(--font-heading);
}

.premium-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    vertical-align: middle;
}

.premium-table tbody tr {
    transition: var(--transition-smooth);
}

.premium-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.015);
}

/* Status Indicator classes */
.td-contract {
    font-weight: 600;
    color: var(--text-primary);
}

.pnl-cell {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- System Signals log --- */
.signal-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.signal-metric-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.signal-metric-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.signal-metric-item .label {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.signal-metric-item .value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
}

/* --- Full-width Tab Views --- */
.full-card {
    flex-grow: 1;
    min-height: 500px;
}

/* --- Modul 5 Learning Loop view --- */
.learning-container {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 1.5rem;
    height: 700px;
}

@media (max-width: 1024px) {
    .learning-container {
        grid-template-columns: 1fr;
        height: auto;
    }
}

.learning-timeline-card, .learning-detail-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 450px;
}

.learning-timeline-card .card-body, .learning-detail-card .card-body {
    flex-grow: 1;
    overflow-y: auto;
}

/* Timeline elements with Dynamic Performance Glows */
.timeline-item {
    position: relative;
    padding-left: 2rem;
    padding-bottom: 1.5rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    width: 2px;
    height: 100%;
    background: var(--card-border);
    transition: background 0.3s;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    position: absolute;
    left: 2px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    border: 2px solid var(--bg-dark);
    transition: var(--transition-smooth);
}

/* Dynamic status glow overrides */
.timeline-item.success-high .timeline-dot {
    background: var(--accent-emerald);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}
.timeline-item.success-high:hover .timeline-dot,
.timeline-item.success-high.selected .timeline-dot {
    box-shadow: 0 0 12px var(--accent-emerald);
    background: var(--accent-emerald);
}

.timeline-item.success-mid .timeline-dot {
    background: var(--accent-amber);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}
.timeline-item.success-mid:hover .timeline-dot,
.timeline-item.success-mid.selected .timeline-dot {
    box-shadow: 0 0 12px var(--accent-amber);
    background: var(--accent-amber);
}

.timeline-item.success-low .timeline-dot {
    background: var(--accent-crimson);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}
.timeline-item.success-low:hover .timeline-dot,
.timeline-item.success-low.selected .timeline-dot {
    box-shadow: 0 0 12px var(--accent-crimson);
    background: var(--accent-crimson);
}

.timeline-item:hover .timeline-dot, .timeline-item.selected .timeline-dot {
    transform: scale(1.3);
}

.timeline-content {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--card-border);
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    transition: var(--transition-smooth);
}

.timeline-content:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.timeline-item.success-high.selected .timeline-content {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.05);
}

.timeline-item.success-mid.selected .timeline-content {
    background: rgba(245, 158, 11, 0.04);
    border-color: rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.05);
}

.timeline-item.success-low.selected .timeline-content {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.25);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.05);
}

.timeline-date {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Win Rate circular SVG Gauge Ring */
.win-rate-donut-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--card-border);
    padding: 1.5rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
    .win-rate-donut-wrapper {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

.svg-donut-chart {
    position: relative;
    width: 110px;
    height: 110px;
}

.svg-donut-chart svg {
    transform: rotate(-90deg);
}

.donut-bg-circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 8px;
}

.donut-val-circle {
    fill: none;
    stroke-width: 8px;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease-in-out;
}

.donut-val-circle.success-high {
    stroke: url(#emerald-gradient);
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.5));
}
.donut-val-circle.success-mid {
    stroke: url(#amber-gradient);
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5));
}
.donut-val-circle.success-low {
    stroke: url(#crimson-gradient);
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}

.donut-percentage-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
}

.donut-legend-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.donut-legend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
}

.donut-legend-row:last-child {
    border-bottom: none;
}

.donut-legend-row .dot-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.donut-legend-row .dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.donut-legend-row .dot-value {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Brain Placeholder */
.brain-icon-placeholder {
    font-size: 4.5rem;
    color: var(--card-border);
    margin-bottom: 1.25rem;
    display: inline-block;
    animation: pulse-brain 3.5s infinite alternate ease-in-out;
}

@keyframes pulse-brain {
    0% { transform: scale(1); opacity: 0.4; filter: drop-shadow(0 0 0px transparent); }
    100% { transform: scale(1.08); opacity: 0.8; filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.25)); color: var(--accent-blue); }
}

.no-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 350px;
}

.learning-details {
    animation: fadeIn 0.4s ease-out;
}

.learning-section {
    margin-bottom: 1.75rem;
}

.learning-section-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.markdown-body {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-secondary);
    background: rgba(10, 15, 30, 0.45);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    white-space: pre-wrap;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Interactive SVG Connection Diagram animations */
.connections-diagram-svg-container {
    background: rgba(10, 15, 30, 0.45);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    margin-top: 0.5rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.connections-svg {
    width: 100%;
    height: 110px;
    display: block;
}

.pulse-flow-path {
    stroke-dasharray: 6, 6;
    animation: pulseFlowSvg 25s infinite linear;
}

@keyframes pulseFlowSvg {
    to {
        stroke-dashoffset: -500;
    }
}

.diagram-node {
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.diagram-node:hover {
    transform: scale(1.05);
}

.node-icon-bg {
    transition: fill 0.3s, stroke 0.3s, filter 0.3s;
}

.diagram-node:hover .node-icon-bg {
    filter: brightness(1.2) drop-shadow(0 0 6px var(--node-color, #3b82f6));
}

/* Customizer Terminal Style & Presets */
.preset-button-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.rule-preset-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
}

.rule-preset-btn:hover {
    background: rgba(59, 130, 246, 0.08);
    color: #fff;
    border-color: rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1);
}

.rule-preset-btn.active {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-amber);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.terminal-textarea-wrapper {
    position: relative;
    background: rgba(5, 8, 16, 0.85);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: var(--transition-smooth);
}

.terminal-textarea-wrapper:focus-within {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 158, 11, 0.12);
}

.terminal-textarea {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.75rem;
    height: 90px;
    width: 100%;
    outline: none;
    resize: none;
    line-height: 1.5;
}

.terminal-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.terminal-header-dots {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.terminal-dot-red, .terminal-dot-yellow, .terminal-dot-green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.terminal-dot-red { background: #ef4444; }
.terminal-dot-yellow { background: #f59e0b; }
.terminal-dot-green { background: #10b981; }

/* --- Modal overlay dialogs --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 7, 12, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.2s ease-out;
}

.modal-container {
    width: 700px;
    max-width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.modal-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.modal-close-btn:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.decision-meta-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.meta-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    padding: 0.85rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-item .label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.meta-item .value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
}

.modal-section {
    margin-bottom: 1.25rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

/* --- Interactive Charting Section Style --- */
.chart-section {
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: var(--transition-smooth);
}
.chart-section:hover {
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.1);
}

.chart-card-body {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    min-height: 480px;
}

#tradingview-chart-container {
    flex-grow: 1;
    min-width: 0;
    position: relative;
    width: 100%;
    height: 420px;
    min-height: 420px;
    background: rgba(10, 15, 30, 0.6);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.5);
}

#tradingview-rsi-container {
    height: 120px;
    min-height: 120px;
    background: rgba(10, 15, 30, 0.6);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#tradingview-rsi-container.collapsed {
    height: 0 !important;
    min-height: 0 !important;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
    margin-top: -0.5rem;
}

/* Premium Indicator & Timeframe Controls */
.indicator-control-bar {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
    background: rgba(15, 23, 42, 0.5);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    align-items: center;
    width: 100%;
}

.indicator-title-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-indicator {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
}

.btn-indicator:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: var(--card-border-hover);
}

.btn-indicator.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.btn-indicator[data-indicator="sma"].active {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.08);
}
.btn-indicator[data-indicator="ema"].active {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.08);
}
.btn-indicator[data-indicator="bbands"].active {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.08);
}
.btn-indicator[data-indicator="volume"].active {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 0 10px rgba(148, 163, 184, 0.08);
}
.btn-indicator[data-indicator="rsi"].active {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.08);
}

.indicator-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transition: transform 0.2s;
}

.btn-indicator:hover .indicator-dot {
    transform: scale(1.3);
}

.btn-indicator[data-indicator="sma"] .indicator-dot { background: #3b82f6; }
.btn-indicator[data-indicator="ema"] .indicator-dot { background: #10b981; }
.btn-indicator[data-indicator="bbands"] .indicator-dot { background: #eab308; }
.btn-indicator[data-indicator="volume"] .indicator-dot { background: #94a3b8; }
.btn-indicator[data-indicator="rsi"] .indicator-dot { background: #8b5cf6; }

.timeframe-group {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.btn-timeframe {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-timeframe:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.btn-timeframe.active {
    background: var(--accent-blue);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.chart-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    padding-left: 1.5rem;
}

.premium-select {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.premium-select:hover, .premium-select:focus {
    border-color: var(--card-border-hover);
    box-shadow: 0 0 10px var(--accent-blue-glow);
}

.hyper-trader-opinion h4, .action-card-mini h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.setup-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    background: rgba(15, 23, 42, 0.45);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
}

.playbook-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    transition: var(--transition-smooth);
}

.playbook-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}

.playbook-item .label {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.75px;
    font-weight: 600;
}

.playbook-item .value {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.playbook-item .desc {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.action-card-mini {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.45) 0%, rgba(10, 15, 30, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
    transition: var(--transition-smooth);
}

.action-card-mini:hover {
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.05);
}

.security-text {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.volatility-gauge {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding-top: 0.5rem;
}

.volatility-gauge .gauge-label {
    color: var(--text-muted);
}

.volatility-gauge .gauge-value {
    font-weight: 700;
    color: var(--accent-amber);
}

/* Realized P&L Hover Tooltip overlay style */
.equity-tooltip {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    transition: opacity 0.15s ease, transform 0.1s ease;
    opacity: 0;
    transform: translate(-50%, -110%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equity-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.equity-tooltip-label {
    color: var(--text-muted);
}

.equity-tooltip-value {
    font-weight: 700;
}

/* --- Default Mobile Navigation Elements (Hidden on Desktop) --- */
.mobile-menu-toggle {
    display: none;
}
.sidebar-close-btn {
    display: none;
}

/* --- Responsive styling queries --- */
@media (max-width: 1200px) {
    .span-8, .span-4 {
        grid-column: span 12;
    }
    .chart-card-body {
        flex-direction: column;
    }
    .chart-main-row {
        flex-direction: column !important;
    }
    .chart-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--card-border);
        padding-left: 0;
        padding-top: 1.5rem;
    }
    .learning-container {
        grid-template-columns: 1fr;
        height: auto;
    }
    .learning-timeline-card, .learning-detail-card {
        height: 400px;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: var(--sidebar-width);
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        background: rgba(8, 12, 24, 0.96); /* Darker solid background for overlay contrast */
        box-shadow: none;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 15px 0 50px rgba(0, 0, 0, 0.8);
    }
    .sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--card-border);
        border-radius: 50%;
        color: var(--text-primary);
        font-size: 1.6rem;
        cursor: pointer;
        transition: var(--transition-smooth);
        z-index: 1001;
        line-height: 1;
        padding-bottom: 3px;
    }
    .sidebar-close-btn:hover {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.35);
        color: var(--accent-crimson);
    }
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--card-border);
        border-radius: 12px;
        color: var(--text-primary);
        font-size: 1.25rem;
        cursor: pointer;
        transition: var(--transition-smooth);
        flex-shrink: 0;
        margin-right: 0.5rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(59, 130, 246, 0.4);
    }
    .content-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }
    .clock-area {
        margin-left: auto;
    }
    .main-content {
        padding: 1.5rem;
        width: 100%;
        max-height: 100vh;
    }
}

@media (max-width: 768px) {
    /* Header overlap and text wrapping fix */
    .card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        padding: 1.25rem 1rem !important;
    }
    .card-header-left {
        width: 100%;
    }
    .card-title {
        font-size: 1.1rem !important;
        line-height: 1.35 !important;
    }
    .card-subtitle-small {
        font-size: 0.75rem !important;
        margin-top: 4px !important;
    }
    .card-header-actions {
        width: 100% !important;
    }
    .premium-select {
        width: 100% !important;
        text-align: center !important;
    }

    /* Expand chart height and reduce horizontal padding for readability */
    .chart-card-body {
        padding: 0.5rem !important;
    }
    #tradingview-chart-container {
        height: 480px !important;
        min-height: 480px !important;
        border-radius: 8px !important;
    }

    /* Hyper-Trader Playbook optimization */
    .setup-details {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }
    .playbook-item .label {
        font-size: 0.6rem !important;
    }
    .playbook-item .value {
        font-size: 0.8rem !important;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .metric-card {
        padding: 1.25rem;
        gap: 0.75rem;
    }
    .metric-value {
        font-size: 1.25rem;
    }
    .metric-icon {
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
    }
    .page-title {
        font-size: 1.5rem;
    }
    .page-subtitle {
        display: none;
    }
    .chat-tab-container {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }
    .chat-sidebar-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--card-border);
        padding: 1.25rem;
    }
    .chat-main-panel {
        height: 480px;
    }
    .chat-messages-container {
        padding: 1.25rem;
    }
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
        max-height: 160px;
    }
    .login-container {
        width: 92%;
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    #tradingview-chart-container {
        height: 280px !important;
        min-height: 280px !important;
    }
    #tradingview-rsi-container {
        height: 90px !important;
        min-height: 90px !important;
    }
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .metric-card {
        padding: 0.85rem 1rem !important;
        gap: 0.5rem !important;
    }
    .metric-value {
        font-size: 1.15rem !important;
    }
    .metric-label {
        font-size: 0.65rem !important;
    }
    .metric-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
    }
    .kpi-sparkline svg {
        width: 50px !important;
        height: 26px !important;
    }
    .content-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .clock-area {
        width: 100%;
        justify-content: center;
        margin-top: 0.25rem;
    }
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
    .learning-summary-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ==========================================================================
   Modul 6 Chat-Assistent (Dedicated Tab & Floating Widget) Styles
   ========================================================================== */

/* --- Dedicated Chat Tab Container --- */
.chat-tab-container {
    display: flex;
    height: calc(100vh - 12rem);
    min-height: 550px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: 0 !important; /* Reset padding for grid layout */
}

/* Chat Sidebar Panel */
.chat-sidebar-panel {
    width: 320px;
    border-right: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.5rem;
    background: rgba(10, 15, 30, 0.25);
    flex-shrink: 0;
}

.chat-sidebar-panel .panel-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-sidebar-panel .panel-section h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Quick Actions Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 2px;
}

.quick-action-btn {
    text-align: left;
    justify-content: flex-start;
    padding: 0.65rem 0.85rem;
    font-size: 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.quick-action-btn i {
    margin-right: 6px;
    font-size: 0.85rem;
}

.quick-action-btn:hover {
    transform: translateX(3px);
}

/* Bot Status Card in Sidebar */
.bot-status-card {
    margin-top: auto;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bot-avatar {
    width: 42px;
    height: 42px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--accent-blue);
    filter: drop-shadow(0 0 6px var(--accent-blue-glow));
}

.bot-info h5 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1px;
}

.bot-info p {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.bot-info .badge {
    padding: 0.15rem 0.45rem;
    font-size: 0.65rem;
}

/* Chat Main Panel */
.chat-main-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: rgba(10, 15, 30, 0.1);
    position: relative;
}

.chat-messages-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Welcome Message */
.chat-welcome-msg {
    margin: auto;
    max-width: 500px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
}

.welcome-icon {
    font-size: 3.5rem;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 15px var(--accent-blue-glow));
    animation: floating-anim 3s infinite ease-in-out;
}

@keyframes floating-anim {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.chat-welcome-msg h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
}

.chat-welcome-msg p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.chat-welcome-msg p.sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Chat Bubbles */
.chat-bubble-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    gap: 0.25rem;
}

.chat-bubble-wrapper.user {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-bubble-wrapper.bot {
    align-self: flex-start;
    align-items: flex-start;
}

.bubble-meta {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.chat-bubble {
    padding: 1rem 1.25rem;
    border-radius: 16px;
    font-size: 0.85rem;
    line-height: 1.5;
    word-break: break-word;
}

.bubble-user .chat-bubble {
    background: linear-gradient(135deg, var(--accent-blue), #1e40af);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.bubble-bot .chat-bubble {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.bubble-bot .chat-bubble strong {
    color: #ffffff;
    font-weight: 600;
}

/* Chat System Logs styling inside bot bubble */
.chat-system-log {
    margin-top: 1rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
    width: 100%;
}

.chat-system-log strong {
    color: var(--accent-blue) !important;
}

/* Typing Indicator */
.typing-indicator {
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(10, 15, 30, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.typing-indicator .dot {
    width: 6px;
    height: 6px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-indicator .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator .dot:nth-child(2) { animation-delay: -0.16s; }

.typing-indicator .typing-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Input Area styling */
.chat-input-area {
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--card-border);
    display: flex;
    gap: 1rem;
    background: rgba(10, 15, 30, 0.3);
}

.chat-input-area input {
    flex-grow: 1;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 0.8rem 1.25rem;
    border-radius: 12px;
    outline: none;
    transition: var(--transition-smooth);
}

.chat-input-area input:focus:not(:disabled) {
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px var(--accent-blue-glow);
}

.chat-input-area input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Floating Hermes Chat Widget --- */
.floating-chat-widget {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
}

/* Widget Trigger Button */
.widget-trigger-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), #1d4ed8);
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffffff;
    position: relative;
    transition: var(--transition-smooth);
}

.widget-trigger-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.55);
}

.widget-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--accent-blue);
    animation: widget-ring 2.2s infinite;
    pointer-events: none;
}

@keyframes widget-ring {
    0% { transform: scale(1); opacity: 0.7; }
    70% { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Widget Overlay Container */
.widget-overlay {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 360px;
    height: 480px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: widget-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom right;
}

.widget-overlay.active {
    display: flex;
}

@keyframes widget-slide-up {
    from { opacity: 0; transform: scale(0.85) translate(10px, 10px); }
    to { opacity: 1; transform: scale(1) translate(0, 0); }
}

/* Widget Header */
.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--card-border);
    background: rgba(10, 15, 30, 0.4);
}

.widget-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
}

.widget-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.35rem;
    cursor: pointer;
    line-height: 1;
}

.widget-close-btn:hover {
    color: var(--text-primary);
}

/* Widget User Selector Bar */
.widget-user-select-bar {
    padding: 0.5rem 1.25rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.widget-user-select-bar label {
    color: var(--text-secondary);
}

.premium-select-sm {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    flex-grow: 1;
}

/* Widget Messages Box */
.widget-messages-box {
    flex-grow: 1;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.chat-welcome-msg-mini {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Mini chat bubbles */
.widget-messages-box .chat-bubble-wrapper {
    max-width: 85%;
}

.widget-messages-box .chat-bubble {
    padding: 0.65rem 0.85rem;
    font-size: 0.75rem;
    border-radius: 12px;
}

.widget-messages-box .bubble-user .chat-bubble {
    border-bottom-right-radius: 3px;
}

.widget-messages-box .bubble-bot .chat-bubble {
    border-bottom-left-radius: 3px;
}

/* Widget Typing Indicator */
.widget-typing-indicator {
    padding: 0.5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.01);
}

.widget-typing-indicator .dots-container {
    display: flex;
    gap: 3px;
}

.widget-typing-indicator .dot {
    width: 4px;
    height: 4px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.widget-typing-indicator .dot:nth-child(1) { animation-delay: -0.32s; }
.widget-typing-indicator .dot:nth-child(2) { animation-delay: -0.16s; }

.typing-text-mini {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Widget Input Area */
.widget-input-area {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--card-border);
    display: flex;
    gap: 0.5rem;
    background: rgba(10, 15, 30, 0.4);
}

.widget-input-area input {
    flex-grow: 1;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    font-size: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    outline: none;
    transition: var(--transition-smooth);
}

.widget-input-area input:focus:not(:disabled) {
    border-color: var(--accent-blue);
}

.btn-widget-send {
    background: var(--accent-blue);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: var(--transition-smooth);
}

.btn-widget-send:hover:not(:disabled) {
    background: #1d4ed8;
    transform: scale(1.05);
}

.btn-widget-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Custom scrolling classes inside chat */
.chat-messages-container, .widget-messages-box {
    scrollbar-width: thin;
}

/* Responsive adjustment for chat tab sidebar */
@media (max-width: 992px) {
    .chat-tab-container {
        flex-direction: column;
        height: auto;
        max-height: none;
    }
    .chat-sidebar-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--card-border);
    }
    .chat-messages-container {
        height: 400px;
    }
}

/* ==========================================================================
   Modul 6 Glassmorphic Login Overlay Styles ( squirrelsghost )
   ========================================================================== */

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 24, 0.75);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transition: all 0.4s ease;
}

.login-overlay.active {
    display: flex;
}

.login-container {
    max-width: 440px;
    width: 90%;
    padding: 2.5rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(15, 23, 42, 0.5) !important;
    text-align: center;
}

.login-logo-icon {
    font-size: 3rem;
    color: var(--accent-blue);
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 0 15px var(--accent-blue-glow));
}

.login-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 2rem;
}

.login-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.premium-input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    outline: none;
    transition: var(--transition-smooth);
}

.premium-input:focus {
    border-color: var(--accent-blue);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 10px var(--accent-blue-glow);
}

.error-msg {
    color: #ef4444;
    font-size: 0.8rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-align: left;
    line-height: 1.4;
}

.login-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.login-footer code {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    color: #ffffff;
    font-family: monospace;
}

.animate-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Premium Theme Switcher & Light Theme (Modul 6 Polish) --- */
.theme-switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.theme-icon-dark {
    color: var(--accent-blue);
    font-size: 0.85rem;
    text-shadow: 0 0 8px var(--accent-blue-glow);
}

.theme-icon-light {
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: var(--transition-smooth);
}

/* Switch container */
.switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.08);
    transition: .4s;
    border: 1px solid var(--card-border);
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-primary);
    transition: .4s;
}

input:checked + .slider {
    background-color: rgba(59, 130, 246, 0.2);
    border-color: var(--accent-blue);
}

input:focus + .slider {
    box-shadow: 0 0 6px var(--accent-blue-glow);
}

input:checked + .slider:before {
    transform: translateX(18px);
    background-color: var(--accent-blue);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Light Theme overrides */
body.light-theme {
    --bg-dark: hsl(210, 32%, 95%);
    --card-bg: rgba(255, 255, 255, 0.72);
    --card-border: rgba(148, 163, 184, 0.16);
    --card-border-hover: rgba(59, 130, 246, 0.35);
    
    --text-primary: hsl(222, 28%, 10%);
    --text-secondary: hsl(215, 20%, 35%);
    --text-muted: hsl(215, 12%, 52%);
    
    background-color: var(--bg-dark);
}

body.light-theme .sidebar {
    background: rgba(255, 255, 255, 0.65);
    border-right: 1px solid rgba(148, 163, 184, 0.18);
}

body.light-theme .nav-item:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
}

body.light-theme .nav-item.active {
    background: rgba(59, 130, 246, 0.08);
    color: var(--accent-blue);
    box-shadow: inset 10px 0 20px rgba(59, 130, 246, 0.02);
}

body.light-theme .version-info, 
body.light-theme .env-badge {
    color: var(--text-secondary);
}

body.light-theme .theme-icon-light {
    color: var(--accent-amber);
    text-shadow: 0 0 8px var(--accent-amber-glow);
}

body.light-theme .theme-icon-dark {
    color: var(--text-muted);
    text-shadow: none;
}

body.light-theme .clock-area {
    background: rgba(0, 0, 0, 0.02);
}

body.light-theme .premium-select {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--text-primary);
}

body.light-theme .premium-select:focus {
    border-color: var(--accent-blue);
}

body.light-theme .premium-table th {
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

body.light-theme .premium-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.015);
}

body.light-theme .premium-table td {
    border-bottom-color: rgba(0, 0, 0, 0.02);
}

body.light-theme .td-contract {
    color: var(--text-primary);
}

body.light-theme .signal-metric-item {
    border-bottom-color: rgba(0, 0, 0, 0.03);
}

body.light-theme .timeline-content {
    background: rgba(0, 0, 0, 0.005);
}

body.light-theme .chat-bubble.bubble-bot {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
    color: var(--text-primary);
}

body.light-theme .chat-bubble.bubble-user {
    background: linear-gradient(135deg, var(--accent-blue), #2563eb);
    color: #ffffff;
}

body.light-theme .chat-sidebar-panel {
    background: rgba(0, 0, 0, 0.01);
    border-right-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .chat-welcome-msg,
body.light-theme .chat-welcome-msg-mini {
    color: var(--text-secondary);
}

body.light-theme .quick-action-btn {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .quick-action-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.light-theme #chat-input-field,
body.light-theme #widget-input-field {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--text-primary);
}

body.light-theme #chat-input-field:focus,
body.light-theme #widget-input-field:focus {
    border-color: var(--accent-blue);
}

body.light-theme .chat-welcome-msg i.welcome-icon {
    color: var(--accent-blue);
    opacity: 0.75;
}

body.light-theme .glow-orb {
    opacity: 0.12;
    filter: blur(140px);
}

/* Chat Polish - System Logs */
.chat-system-log {
    margin-top: 0.75rem;
    padding: 0.85rem 1.15rem;
    background: rgba(15, 23, 42, 0.95);
    border-left: 3px solid var(--accent-blue);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.78rem;
    color: #e2e8f0;
    line-height: 1.45;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

body.light-theme .chat-system-log {
    background: #0f172a; /* Keep dark console background for premium contrast even in light mode */
    color: #e2e8f0;
}

/* ==========================================================================
   Elite-Level Upgrades for Charts, Timeframes, Indicators, and Login
   ========================================================================== */

/* Timeframe Group Buttons */
.btn-timeframe {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.btn-timeframe:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.btn-timeframe.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--accent-blue), #2563eb) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

/* Indicator Buttons */
.btn-indicator {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    opacity: 0.65;
}

.btn-indicator:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

.btn-indicator.active {
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-indicator[data-indicator="sma"].active {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}
.btn-indicator[data-indicator="ema"].active {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}
.btn-indicator[data-indicator="bbands"].active {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}
.btn-indicator[data-indicator="volume"].active {
    background: rgba(148, 163, 184, 0.15) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
}
.btn-indicator[data-indicator="rsi"].active {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

/* Sparklines Animations & Hover */
.kpi-sparkline {
    transition: all 0.4s ease;
}

.metric-card:hover .kpi-sparkline {
    transform: scale(1.08) translateX(3px);
    filter: drop-shadow(0 0 6px var(--accent-emerald-glow));
}

.metric-card:hover #sparkline-win {
    filter: drop-shadow(0 0 6px var(--accent-amber-glow));
}

.metric-card:hover #sparkline-trades {
    filter: drop-shadow(0 0 6px var(--accent-blue-glow));
}

.metric-card:hover #sparkline-margin {
    filter: drop-shadow(0 0 6px var(--accent-crimson-glow));
}

/* Redesigned Military-Grade Secure Login Terminal */
.login-overlay {
    background: rgba(4, 6, 14, 0.93) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.login-container {
    border: 1px solid rgba(59, 130, 246, 0.18) !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(8, 12, 28, 0.8) 100%) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(59, 130, 246, 0.08) !important;
    position: relative;
    overflow: hidden;
}

/* Holographic Cyber Grid overlay */
.login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
}

.login-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
    animation: login-scan 4s infinite linear;
    z-index: 1;
    pointer-events: none;
}

@keyframes login-scan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { top: 100%; opacity: 0; }
}

.login-logo-icon {
    font-size: 2.5rem !important;
    color: var(--accent-blue);
    filter: drop-shadow(0 0 12px var(--accent-blue-glow));
    animation: login-icon-glow 2s infinite alternate ease-in-out;
}

@keyframes login-icon-glow {
    0% { transform: scale(1); filter: drop-shadow(0 0 8px var(--accent-blue-glow)); }
    100% { transform: scale(1.04); filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.45)); }
}

.login-header, .login-body, .login-footer {
    position: relative;
    z-index: 2;
}

.premium-input {
    background: rgba(10, 15, 30, 0.7) !important;
    border: 1px solid var(--card-border) !important;
    color: #fff !important;
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 0.75rem 1.1rem;
    border-radius: 10px;
    outline: none;
    transition: var(--transition-smooth);
    width: 100%;
}

.premium-input:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 12px var(--accent-blue-glow) !important;
}

/* Chart Panel Layout Fixes */
#chart-panels-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.5rem;
}

#tradingview-rsi-container.collapsed {
    height: 0px !important;
    min-height: 0px !important;
    border-color: transparent !important;
    opacity: 0;
    pointer-events: none;
    margin-top: -0.5rem;
}

/* Light theme overrides for indicators and timeframe */
body.light-theme .btn-timeframe:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .btn-timeframe.active {
    background: linear-gradient(135deg, var(--accent-blue), #2563eb) !important;
    color: #fff !important;
}

body.light-theme .indicator-control-bar {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
}

body.light-theme .timeframe-group {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
}

/* --- Elite Dashboard Extensions --- */
.ticker-pill {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.ticker-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: var(--card-border-hover);
}
.ticker-pill.active {
    background: rgba(59, 130, 246, 0.15);
    color: #fff;
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.12);
}

/* Technical Gauge Widget */
.technical-gauge-wrapper {
    position: relative;
    width: 140px;
    height: 75px;
    margin: 0.5rem auto 0 auto;
    overflow: hidden;
}
.gauge-dial {
    position: relative;
    width: 140px;
    height: 140px;
    border: 14px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    box-sizing: border-box;
    border-top-color: var(--accent-crimson);
    border-right-color: var(--accent-blue);
    border-bottom-color: var(--accent-emerald);
    border-left-color: var(--accent-crimson);
    transform: rotate(-45deg);
}
.gauge-needle {
    position: absolute;
    width: 4px;
    height: 50px;
    background: #cbd5e1;
    bottom: 50%;
    left: calc(50% - 2px);
    transform-origin: bottom center;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.gauge-needle::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    bottom: -5px;
    left: -3px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}
.gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 0.25rem;
    padding: 0 10px;
}
.gauge-verdict-box {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    font-family: var(--font-heading);
    margin-top: 0.5rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Order Book Row Visualization */
.orderbook-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 6px;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.orderbook-row .size-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: 0.12;
    transition: width 0.3s ease;
}
.orderbook-row.ask .size-bar {
    background-color: var(--accent-crimson);
}
.orderbook-row.bid .size-bar {
    background-color: var(--accent-emerald);
}
.orderbook-row span {
    position: relative;
    z-index: 2;
}

/* Pivot table enhancements */
.pivot-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.01) !important;
}

/* Light Theme tweaks */
body.light-theme .ticker-pill {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(148, 163, 184, 0.15);
}
body.light-theme .ticker-pill.active {
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent-blue);
    border-color: rgba(59, 130, 246, 0.35);
}
body.light-theme .gauge-dial {
    border-color: rgba(0, 0, 0, 0.03);
    border-top-color: var(--accent-crimson);
    border-right-color: var(--accent-blue);
    border-bottom-color: var(--accent-emerald);
    border-left-color: var(--accent-crimson);
}
body.light-theme .gauge-verdict-box {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}

/* --- Bot-Synergie-Netzwerk Animationen --- */
@keyframes pulseFlow {
    0% { left: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

.connections-diagram .node {
    transition: all 0.3s ease;
}

.connections-diagram .node:hover {
    transform: scale(1.08);
}

.connections-diagram .node:hover .node-icon {
    box-shadow: 0 0 16px var(--accent-blue-glow) !important;
}

body.light-theme .connections-diagram {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
}

body.light-theme .connections-diagram span {
    color: var(--text-muted) !important;
}

body.light-theme .connections-diagram span[style*="color: #fff"] {
    color: var(--bg-dark) !important;
}


/* --- Elite Custom Dropdown Styling --- */
.custom-dropdown-container {
    position: relative;
    display: inline-block;
    font-family: var(--font-heading);
    z-index: 1000;
    min-width: 255px;
}

.custom-dropdown-trigger {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.custom-dropdown-trigger:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.25);
}

.custom-dropdown-container.open .custom-dropdown-trigger {
    border-color: var(--accent-blue);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
    background: rgba(15, 23, 42, 0.85);
}

.dropdown-chevron {
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-dropdown-container.open .dropdown-chevron {
    transform: rotate(180deg);
    color: var(--accent-blue);
}

.custom-dropdown-menu {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5), 0 0 15px rgba(59, 130, 246, 0.15);
    max-height: 380px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.custom-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}
.custom-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.custom-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.custom-dropdown-container.open .custom-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-group-title {
    color: rgba(148, 163, 184, 0.55);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.45rem 0.75rem 0.25rem 0.75rem;
    margin-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.dropdown-group-title:first-child {
    border-top: none;
    margin-top: 0;
}

.custom-dropdown-item {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-dropdown-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    padding-left: 1rem;
}

.custom-dropdown-item.active {
    color: #fff;
    background: rgba(59, 130, 246, 0.2);
    font-weight: 600;
    border-left: 3px solid var(--accent-blue);
    border-radius: 2px 6px 6px 2px;
}

/* Light Theme overrides */
body.light-theme .custom-dropdown-trigger {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--bg-dark);
}
body.light-theme .custom-dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
}
body.light-theme .custom-dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 0 12px rgba(59, 130, 246, 0.1);
}
body.light-theme .custom-dropdown-item {
    color: var(--text-muted);
}
body.light-theme .custom-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--bg-dark);
}
body.light-theme .custom-dropdown-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
}
body.light-theme .dropdown-group-title {
    color: rgba(0, 0, 0, 0.4);
    border-top-color: rgba(0, 0, 0, 0.03);
}

/* --- Modul 6 Chat Simplification & Click-to-Trade Styling --- */

/* Dynamic Quick Chips Containers */
.chat-quick-chips, .widget-quick-chips {
    display: flex;
    gap: 0.5rem;
    padding: 0.65rem 1rem 0;
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbars */
    background: rgba(10, 15, 30, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.01);
}
.chat-quick-chips::-webkit-scrollbar, .widget-quick-chips::-webkit-scrollbar {
    display: none;
}

/* Rounded Glassmorphic Command Chips */
.chat-chip, .widget-chip {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.chat-chip i, .widget-chip i {
    font-size: 0.75rem;
    color: var(--accent-blue);
    transition: transform 0.2s ease;
}

.chat-chip:hover, .widget-chip:hover {
    color: #ffffff;
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}

.chat-chip:hover i, .widget-chip:hover i {
    transform: scale(1.15) rotate(5deg);
}

/* Special Danger (Close All) Chip */
.chat-chip.chip-danger, .widget-chip.chip-danger {
    border-color: rgba(239, 68, 68, 0.25);
}
.chat-chip.chip-danger i, .widget-chip.chip-danger i {
    color: var(--accent-crimson);
}
.chat-chip.chip-danger:hover, .widget-chip.chip-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* Compact Widget Chips Specifics */
.widget-quick-chips {
    padding: 0.45rem 0.75rem 0;
    gap: 0.4rem;
}
.widget-chip {
    padding: 0.35rem 0.65rem;
    font-size: 0.65rem;
    border-radius: 14px;
}

/* Glassmorphic Click-to-Trade Action Ticket Cards */
.interactive-trade-card {
    margin-top: 0.85rem;
    border-radius: 14px !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important; /* Green glowing border by default */
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 16px rgba(16, 185, 129, 0.06);
    padding: 1.1rem !important;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Red-themed border for Sell/Close cards */
.interactive-trade-card:has(.badge-crimson), .interactive-trade-card.card-close {
    border-color: rgba(239, 68, 68, 0.22) !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 16px rgba(239, 68, 68, 0.06);
}

.trade-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 0.5rem;
}

.trade-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    color: #ffffff;
    margin: 0;
}

.trade-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.trade-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
}

.trade-label {
    color: var(--text-muted);
}
.trade-value {
    color: #ffffff;
}

/* Glowing CTAs for Order Execution */
.btn-emerald-glow {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-emerald-glow:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6) !important;
    background: linear-gradient(135deg, #34d399, #059669) !important;
}

.btn-crimson-glow {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-crimson-glow:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6) !important;
    background: linear-gradient(135deg, #f87171, #dc2626) !important;
}

/* Animation on ticket creation */
.animate-slide-up {
    animation: ticket-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ticket-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Light Theme Overrides for Simplification elements */
body.light-theme .chat-quick-chips, body.light-theme .widget-quick-chips {
    background: rgba(0, 0, 0, 0.02);
}
body.light-theme .chat-chip, body.light-theme .widget-chip {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(148, 163, 184, 0.25);
    color: var(--text-secondary);
}
body.light-theme .chat-chip:hover, body.light-theme .widget-chip:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}
body.light-theme .interactive-trade-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 0 12px rgba(16, 185, 129, 0.1);
}
body.light-theme .interactive-trade-card:has(.badge-crimson), body.light-theme .interactive-trade-card.card-close {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}
body.light-theme .trade-card-title {
    color: var(--bg-dark);
}
body.light-theme .trade-value {
    color: var(--bg-dark);
}

/* User focus favorites highlight inside cockpit pills bar */
.ticker-pill.user-focus {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.15) !important;
}

.ticker-pill.user-focus:hover {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.3) !important;
}

body.light-theme .ticker-pill.user-focus {
    background: rgba(245, 158, 11, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #d97706 !important;
}
body.light-theme .ticker-pill.user-focus:hover {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
}

/* Favorites Selector Sidebar Section styling */
.favorites-dropdown-container {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.01);
}
.fav-dropdown-slot-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
}
.fav-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 45px;
    letter-spacing: 0.5px;
}
.custom-select-wrapper {
    position: relative;
    flex-grow: 1;
    cursor: pointer;
    user-select: none;
}
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    background: rgba(10, 15, 30, 0.6);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.custom-select-trigger:hover {
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
}
.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--accent-blue);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}
.select-chevron {
    font-size: 0.65rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}
.custom-select-wrapper.open .select-chevron {
    transform: rotate(180deg);
}
.custom-options-container {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 229, 255, 0.1);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: fadeInDropdown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.custom-select-wrapper.open .custom-options-container {
    display: flex;
}
.custom-search-wrapper {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--card-border);
    background: rgba(0, 0, 0, 0.2);
    gap: 8px;
}
.custom-search-wrapper .search-icon {
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.custom-select-search {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.75rem;
    padding: 2px 0;
}
.custom-options-scroll {
    max-height: 180px;
    overflow-y: auto;
}
.custom-option {
    padding: 0.5rem 0.85rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}
.custom-option:hover {
    background: rgba(0, 229, 255, 0.08);
    color: #ffffff;
    padding-left: 1.1rem;
}
.custom-option.selected {
    color: var(--accent-blue);
    background: rgba(0, 229, 255, 0.04);
    font-weight: 600;
}
.custom-option .option-badge {
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

/* --- Premium Glassmorphic Bottom Navigation --- */
.bottom-nav {
    position: fixed;
    bottom: 20px;
    left: 16px;
    right: 16px;
    height: 64px;
    background: rgba(8, 12, 24, 0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    display: none; /* Default hidden on desktop */
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    padding: 0 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    gap: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex: 1;
    height: 100%;
    padding-top: 4px;
}

.bottom-nav-item i {
    font-size: 1.15rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

/* Hover & Active Polish */
.bottom-nav-item:hover {
    color: var(--text-primary, #f8fafc);
}

.bottom-nav-item:hover i {
    transform: translateY(-2px);
}

.bottom-nav-item.active {
    color: var(--accent-blue, #3b82f6);
    font-weight: 600;
}

.bottom-nav-item.active i {
    color: var(--accent-blue, #3b82f6);
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
}

/* Active top glowing highlight indicator line */
.bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0; /* Align perfectly to the top of the floating pill */
    left: 20%;
    right: 20%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent-blue, #3b82f6);
    box-shadow: 0 1px 8px var(--accent-blue, #3b82f6);
    animation: activeGlowLine 2s infinite ease-in-out;
}

@keyframes activeGlowLine {
    0% { opacity: 0.8; box-shadow: 0 1px 6px var(--accent-blue, #3b82f6); }
    50% { opacity: 1; box-shadow: 0 1px 12px var(--accent-blue, #3b82f6); }
    100% { opacity: 0.8; box-shadow: 0 1px 6px var(--accent-blue, #3b82f6); }
}

/* Show bottom nav and add bottom space to main content on mobile viewports */
@media (max-width: 1024px) {
    .bottom-nav {
        display: flex;
    }
    .main-content {
        padding-bottom: 100px !important; /* Fixed bottom-nav offset space (20px bottom + 64px height + 16px space) */
    }
    .floating-chat-widget {
        bottom: 100px !important; /* Positioned cleanly above bottom-nav */
    }
}

/* --- Premium Settings Styling --- */
.settings-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-group-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: var(--transition-smooth);
}

.settings-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.settings-label-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-row-label {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
}

.settings-row-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-danger-glow {
    background: linear-gradient(135deg, var(--accent-crimson), #b91c1c) !important;
    border: none !important;
    box-shadow: 0 4px 15px var(--accent-crimson-glow) !important;
    color: #fff !important;
}

.btn-danger-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35) !important;
}

/* --- High-Fidelity Chat Header Bar --- */
.chat-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.75rem;
    border-bottom: 1px solid var(--card-border);
    background: rgba(10, 16, 32, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.chat-agent-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chat-agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    position: relative;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
}

.chat-agent-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-emerald);
    border: 2px solid var(--bg-dark);
}

.chat-agent-name {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.chat-agent-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: block;
    margin-top: 1px;
}

.chat-action-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.95rem;
}

.chat-action-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(59, 130, 246, 0.4);
    color: var(--accent-blue);
}

/* Close button and header for Chat Sidebar on mobile */
.chat-sidebar-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
    flex-shrink: 0;
}

.chat-sidebar-header span {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-sidebar-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-sidebar-close-btn:hover {
    color: var(--accent-crimson);
}

/* --- High-Fidelity Mobile Chat Drawer Styling --- */
@media (max-width: 992px) {
    .chat-tab-container {
        position: relative !important;
        flex-direction: row !important; /* Lock to side-by-side flex layout for drawer */
        height: calc(100vh - 200px) !important;
        max-height: none !important;
        overflow: hidden !important;
    }
    
    .chat-sidebar-panel {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        height: 100% !important;
        z-index: 1000 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: rgba(8, 12, 24, 0.96) !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        border-left: 1px solid var(--card-border) !important;
        border-right: none !important;
        border-bottom: none !important;
        padding: 1.25rem !important;
        gap: 1.25rem !important;
        box-shadow: none !important;
        display: flex !important;
        flex-shrink: 0 !important;
    }
    
    .chat-sidebar-panel.open {
        transform: translateX(0) !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6) !important;
    }
    
    .chat-sidebar-header {
        display: flex !important;
    }
    
    .chat-main-panel {
        width: 100% !important;
        height: 100% !important;
        flex-grow: 1 !important;
    }
    
    .chat-header-bar {
        padding: 0.75rem 1.25rem !important;
    }
    
    .chat-messages-container {
        height: auto !important; /* Let it grow and scroll inside flex */
        padding: 1.25rem !important;
    }
    
    .chat-input-area {
        padding: 1rem 1.25rem !important;
    }
}

/* --- Elite Fixed viewport & Full-Height Chat Panel Locking --- */
body.chat-tab-active {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed;
    width: 100%;
}

@media (max-width: 1024px) {
    body.chat-tab-active .content-header {
        display: none !important; /* Hide dashboard topbar */
    }
    
    body.chat-tab-active .main-content {
        padding: 0 !important; /* Edge-to-edge chat viewport */
        height: calc(100vh - 100px) !important; /* Fixed at 100px from bottom: 20px bottom + 64px height + 16px space */
        max-height: calc(100vh - 100px) !important;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }
    
    body.chat-tab-active #tab-chat {
        flex-grow: 1;
        height: 100% !important;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }
    
    body.chat-tab-active .chat-tab-container {
        border: none !important;
        border-radius: 0 !important;
        height: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }
    
    body.chat-tab-active .chat-main-panel {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: transparent !important;
    }
    
    body.chat-tab-active .chat-messages-container {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        padding: 1.25rem !important;
    }
    
    body.chat-tab-active .chat-input-area {
        flex-shrink: 0 !important;
        background: rgba(10, 16, 32, 0.65) !important; /* Premium dark background for the input field */
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-top: 1px solid var(--card-border) !important;
        padding: 0.85rem 1.25rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
}

/* --- Optimized Compact Chat Sidebar Panel --- */
.chat-sidebar-panel {
    padding: 1.15rem !important;
    gap: 1.15rem !important;
}
.chat-sidebar-panel .panel-section {
    gap: 0.5rem !important;
}
.chat-sidebar-panel .panel-section h4 {
    font-size: 0.72rem !important;
    margin-bottom: 0.15rem !important;
    letter-spacing: 0.5px !important;
}

/* --- Premium User Profile Card Design (Replacing Dropdown) --- */
.user-profile-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.65rem 0.85rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02) !important;
}

.user-profile-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -50% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 229, 255, 0.08),
        transparent
    ) !important;
    transform: skewX(-25deg) !important;
    transition: 0.75s !important;
}

.user-profile-card:hover::before {
    left: 125% !important;
}

.user-profile-card:hover {
    border-color: rgba(0, 229, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 0 12px rgba(255, 255, 255, 0.04) !important;
}

.user-avatar-container {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    border-radius: 50% !important;
    color: var(--accent-blue) !important;
    font-size: 1.15rem !important;
    transition: all 0.3s ease !important;
}

.user-profile-card:hover .user-avatar-container {
    background: rgba(0, 229, 255, 0.15) !important;
    border-color: var(--accent-blue) !important;
    color: #00e5ff !important;
    transform: scale(1.05) !important;
}

.user-status-dot {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 8px !important;
    height: 8px !important;
    background-color: var(--accent-emerald) !important;
    border: 2px solid #070b19 !important;
    border-radius: 50% !important;
}

.user-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
}

.user-username {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0.2px !important;
}

.user-role-badge {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-secondary) !important;
}

/* --- Optimized Compact Favorites Dropdown Custom Triggers --- */
.favorites-dropdown-container {
    gap: 0.45rem !important;
    padding: 0.65rem !important;
    border-radius: 10px !important;
}
.fav-dropdown-slot-custom {
    gap: 0.5rem !important;
}
.custom-select-trigger {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.68rem !important;
    border-radius: 6px !important;
}

/* --- Optimized 2-Column Space-Efficient Quick Actions Grid (Desktop & Mobile) --- */
.quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    max-height: none !important;
}

.quick-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.5rem 0.65rem !important;
    font-size: 0.7rem !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-primary) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.quick-action-btn i {
    margin-right: 5px !important;
    font-size: 0.75rem !important;
    width: 12px !important;
    text-align: center !important;
    transition: transform 0.22s ease !important;
}

.quick-action-btn:hover {
    background: rgba(0, 229, 255, 0.06) !important;
    border-color: rgba(0, 229, 255, 0.25) !important;
    color: #00e5ff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 229, 255, 0.08) !important;
}

.quick-action-btn:hover i {
    transform: scale(1.1) !important;
}

/* --- Compact Bot Status Card in Sidebar --- */
.bot-status-card {
    margin-top: auto !important;
    background: rgba(255, 255, 255, 0.015) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 10px !important;
    padding: 0.65rem !important;
    gap: 0.65rem !important;
}

.bot-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    font-size: 1.05rem !important;
}

.bot-info h5 {
    font-size: 0.78rem !important;
    margin-bottom: 0px !important;
}

.bot-info p {
    font-size: 0.64rem !important;
    margin-bottom: 2px !important;
}

.bot-info .badge {
    padding: 0.1rem 0.35rem !important;
    font-size: 0.6rem !important;
}

/* --- High-Fidelity Floating Glassmorphic Chat Input Area (Imantree style) --- */
.chat-input-area {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important; /* Elegant tight spacing */
    padding: 0.65rem 0.85rem !important; /* Perfect tight padding */
    margin: 0 16px 0px 16px !important; /* Floating with 16px margins, but NO bottom margin to maintain vertical alignment! */
    background: rgba(8, 12, 24, 0.82) !important; /* Exact match to bottom nav background! */
    backdrop-filter: blur(24px) saturate(180%) !important; /* Exact blur match! */
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Exact border match! */
    border-radius: 18px !important; /* Curved exactly like the bottom nav! */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#chat-input-field {
    flex-grow: 1 !important;
    height: 44px !important; /* Fixed height for perfect symmetry */
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    padding: 0 1.15rem !important; /* Padding left/right for fixed height */
    border-radius: 14px !important; /* Mathematically nested rounded corners (outer 18px - padding)! */
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

#chat-input-field:focus:not(:disabled) {
    border-color: var(--accent-blue) !important;
    background: rgba(15, 23, 42, 0.8) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

#chat-send-btn {
    width: 44px !important; /* Matching height for a perfect rounded square! */
    height: 44px !important; /* Matching height! */
    min-width: 44px !important;
    border-radius: 14px !important; /* Mathematically nested rounded corners! */
    background: linear-gradient(135deg, var(--accent-blue), #2563eb) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
    padding: 0 !important; /* Reset padding for perfect centering */
}

#chat-send-btn i {
    font-size: 1rem !important;
    margin: 0 !important; /* Reset any margin */
    transition: transform 0.25s ease !important;
}

#chat-send-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.45) !important;
    background: linear-gradient(135deg, #00e5ff, var(--accent-blue)) !important;
}

#chat-send-btn:hover:not(:disabled) i {
    transform: translate(2px, -2px) rotate(-10deg) !important; /* Premium paper plane take-off dynamic effect! */
}

#chat-send-btn:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   PROJECT ANTIGRAVITY — PREMIUM SETTINGS COCKPIT & GLASS TOAST STYLING
   ========================================================================== */

body.settings-tab-active .content-header,
body.positions-tab-active .content-header {
    display: none !important;
}

body.settings-tab-active .main-content,
body.positions-tab-active .main-content {
    padding-top: 1.5rem !important;
}

/* Category grid for premium settings cockpit */
.settings-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.settings-premium-card {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-premium-card:hover {
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.05);
}

.settings-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75rem;
    margin: 0;
}

.settings-item-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.settings-item-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-item-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Premium Inputs */
.settings-premium-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.settings-premium-input {
    width: 100%;
    height: 38px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    padding: 0 0.75rem;
    outline: none;
    transition: all 0.25s ease;
}

.settings-premium-input:focus {
    border-color: var(--accent-blue);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

.settings-premium-input-wrapper.secure .settings-premium-input {
    padding-right: 2.2rem;
}

.settings-password-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: color 0.2s ease;
}

.settings-password-toggle:hover {
    color: #ffffff;
}

/* Switch sliders */
.settings-switch-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.settings-switch-label input {
    display: none;
}

.settings-switch-slider {
    width: 42px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #64748b;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-switch-label input:checked + .settings-switch-slider {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.4);
}

.settings-switch-label input:checked + .settings-switch-slider::before {
    transform: translateX(20px);
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* Simulation Mode Badge */
.mode-indicator-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.mode-indicator-badge.simulation {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--accent-amber);
}
.mode-indicator-badge.live {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--accent-emerald);
}

/* Settings Action Buttons Section */
.settings-actions-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-settings-save {
    background: linear-gradient(135deg, var(--accent-blue), #2563eb);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 0.65rem 2rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-settings-save:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.4);
    background: linear-gradient(135deg, #00e5ff, var(--accent-blue));
}

.btn-settings-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* Glassmorphic Toast Notifications */
.glass-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.glass-toast {
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 4px solid var(--accent-blue);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px 12px 12px 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    color: #ffffff;
    padding: 0.85rem 1.25rem;
    min-width: 300px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    opacity: 0;
}

.glass-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.glass-toast.success {
    border-left-color: var(--accent-emerald);
}

.glass-toast.error {
    border-left-color: var(--accent-crimson);
}

.glass-toast-icon {
    font-size: 1.25rem;
}
.glass-toast.success .glass-toast-icon {
    color: var(--accent-emerald);
}
.glass-toast.error .glass-toast-icon {
    color: var(--accent-crimson);
}

.glass-toast-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.glass-toast-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
}

.glass-toast-message {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Responsive Grid and Alignment for Settings Cockpit */
.settings-container-centered {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1.25rem 2rem 1.25rem;
}

.settings-responsive-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-First: always stacked by default */
    gap: 1rem;
}

.settings-action-row {
    margin-top: 0.5rem;
    border-top: 1px dashed rgba(255,255,255,0.06);
    padding-top: 1.25rem;
    display: flex;
    flex-direction: column; /* Mobile-First: stacked by default */
    align-items: stretch;
    gap: 1rem;
}

.settings-action-row-left {
    justify-content: center !important;
    text-align: center !important;
}

.settings-action-row-right {
    display: flex;
    justify-content: center !important;
    gap: 8px;
}

@media (min-width: 769px) {
    .settings-responsive-grid {
        gap: 1.5rem;
    }

    .settings-responsive-grid.cols-2 {
        grid-template-columns: 1fr 1fr;
    }

    .settings-responsive-grid.cols-1-1-5 {
        grid-template-columns: 1fr 1.5fr;
    }
    
    .settings-action-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }
    
    .settings-action-row-left {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .settings-action-row-right {
        justify-content: flex-end !important;
    }
}

/* --- Mobile Positions Cards Layout --- */
.positions-mobile-list {
    display: none;
}

@media (max-width: 1024px) {
    /* Hide the detailed table on mobile screens */
    #tab-positions .premium-table {
        display: none !important;
    }
    
    #tab-positions .card-body.scroll-x {
        overflow-x: visible !important;
        padding: 0.5rem !important;
    }
    
    .positions-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 1rem;
        width: 100%;
    }
    
    .position-mobile-card {
        background: rgba(30, 41, 59, 0.45);
        border: 1px solid var(--card-border);
        border-radius: 12px;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        cursor: pointer;
        transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        position: relative;
    }
    
    .position-mobile-card:hover, .position-mobile-card:active {
        background: rgba(30, 41, 59, 0.65);
        border-color: rgba(99, 102, 241, 0.4);
        transform: translateY(-2px);
    }
    
    .pos-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .pos-mobile-symbol {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1.1rem;
        color: #fff;
    }
    
    .pos-mobile-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .pos-mobile-direction {
        font-size: 0.75rem;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: 600;
    }
    
    .pos-mobile-direction.long {
        background: rgba(16, 185, 129, 0.15);
        color: var(--accent-emerald);
    }
    
    .pos-mobile-direction.short {
        background: rgba(239, 68, 68, 0.15);
        color: #f87171;
    }
    
    .pos-mobile-volume {
        font-size: 0.8rem;
        color: var(--text-muted);
    }
    
    .pos-mobile-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 0.75rem 0;
    }
    
    .pos-mobile-label {
        font-size: 0.7rem;
        color: var(--text-muted);
        text-transform: uppercase;
        display: block;
    }
    
    .pos-mobile-value {
        font-weight: 600;
        color: #fff;
        font-size: 0.9rem;
    }
    
    .pos-mobile-pnl-val {
        font-size: 1.05rem;
        font-weight: 700;
    }
    
    .pos-mobile-pnl-val.profit {
        color: var(--accent-emerald);
    }
    
    .pos-mobile-pnl-val.loss {
        color: #f87171;
    }
    
    .pos-mobile-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.25rem;
    }
    
    .pos-mobile-details-hint {
        font-size: 0.75rem;
        color: var(--accent-blue);
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 500;
    }
    
    .pos-mobile-close-btn {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #f87171;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .pos-mobile-close-btn:hover {
        background: rgba(239, 68, 68, 0.25);
    }
}

/* ==========================================================================
   Dashboard UI Redesign & Mobile Layout Optimization Overrides
   ========================================================================== */

/* 1. Header & Live Clock Improvements */
@media (max-width: 768px) {
    .content-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-bottom: 1.5rem !important;
        width: 100% !important;
    }
    
    .header-titles {
        flex-grow: 1;
        min-width: 0;
    }
    
    .page-title {
        font-size: 1.25rem !important;
        margin-bottom: 0px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .page-subtitle {
        display: none !important;
    }
    
    .clock-area {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        background: rgba(15, 23, 42, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 4px 10px !important;
        border-radius: 99px !important; /* Premium Pill */
        font-family: var(--font-heading) !important;
        font-weight: 600 !important;
        font-size: 0.8rem !important;
        color: var(--text-primary) !important;
        width: auto !important;
        margin-top: 0 !important;
        margin-left: auto !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .clock-area i {
        color: var(--accent-blue);
        font-size: 0.75rem;
    }
}

/* 2. Metrics Grid Layout stacked into a beautiful, simple, clean 2x2 Grid for Mobile */
@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Force a pristine 2x2 grid */
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .metric-card {
        display: flex !important;
        flex-direction: column !important; /* Stack contents vertically */
        align-items: flex-start !important;
        justify-content: flex-start !important; /* Distribute cleanly from the top */
        padding: 0.95rem 1rem !important; /* Balanced spacing with breathing room */
        gap: 0.55rem !important;
        border-radius: 16px !important;
        min-height: 145px !important; /* Slightly taller for perfect distribution and margins */
        max-height: 145px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Hide the line-chart SVGs on mobile for a clean, minimalist 2x2 look */
    .metric-card .kpi-sparkline svg {
        display: none !important;
    }
    
    /* Reposition and scale down the icons */
    .metric-card .metric-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 2px !important;
        flex-shrink: 0 !important;
    }
    
    /* Optimize the metrics content flex container */
    .metric-card .metric-info {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin-left: 0 !important;
        flex-grow: 1 !important;
        justify-content: flex-start !important;
    }
    
    /* Fix: Force vertical layout on the text wrapper div inside Cards 1, 2, 3 */
    .metric-card:not(:nth-child(4)) .metric-info > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        width: 100% !important;
    }
    
    /* Fit text strings beautifully */
    .metric-card .metric-label {
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 2px !important;
    }
    
    .metric-card .metric-value {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin: 0 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.2px !important;
    }
    
    .metric-card .metric-subtext {
        font-size: 0.62rem !important;
        margin-top: 2px !important;
        opacity: 0.85 !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* Elegant Margin value text glow */
    .metric-card .metric-subtext span {
        font-weight: 700 !important;
        font-family: monospace !important;
    }

    /* Keep Win-Rate Card details clean */
    .metric-card .win-progress-bar {
        width: 100% !important;
        height: 4px !important;
        margin-top: 3px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 9px !important;
        overflow: hidden !important;
    }
    
    /* Horizontally align win-rate trades subtext */
    .metric-card #sparkline-win {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        margin-left: 0 !important;
        margin-top: 2px !important;
        text-align: left !important;
    }
    
    .metric-card #sparkline-win span:first-child {
        font-size: 0.6rem !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }
    
    .metric-card #sparkline-win span#kpi-total-trades {
        font-size: 0.68rem !important;
        font-weight: bold !important;
        color: #fff !important;
    }
    
    /* Direct selection of Card 4 direct child divs to avoid styling Cards 1, 2, 3 text containers */
    .metric-card:nth-child(4) .metric-info > div {
        font-size: 0.65rem !important;
        padding-bottom: 3px !important;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.04) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .metric-card:nth-child(4) .metric-info > div:last-of-type {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    
    .metric-card:nth-child(4) .metric-info > div span {
        font-size: 0.65rem !important;
    }
    
    .metric-card .badge {
        font-size: 0.58rem !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
    }
}

/* 3. Horizontal Swipable Bars for Indicators & Favorite Tickers */
@media (max-width: 768px) {
    .indicator-control-bar,
    .hot-tickers-bar {
        display: flex !important;
        flex-wrap: nowrap !important; /* Prevent wrapping onto multiple lines */
        overflow-x: auto !important; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch !important; /* Smooth iOS kinetic scroll */
        scrollbar-width: none !important; /* Hide scrollbar Firefox */
        -ms-overflow-style: none !important; /* Hide scrollbar IE/Edge */
        padding: 8px 12px !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        width: 100% !important;
        background: rgba(15, 23, 42, 0.35) !important;
        border: 1px solid rgba(255, 255, 255, 0.03) !important;
        border-radius: 10px !important;
    }
    
    .indicator-control-bar::-webkit-scrollbar,
    .hot-tickers-bar::-webkit-scrollbar {
        display: none !important; /* Hide scrollbar Chrome/Safari */
    }
    
    .indicator-title-label {
        white-space: nowrap !important;
        font-size: 0.68rem !important;
        margin-right: 0.5rem !important;
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        flex-shrink: 0 !important;
    }
    
    .btn-indicator,
    .ticker-pill {
        flex-shrink: 0 !important; /* Prevent buttons from squishing */
        white-space: nowrap !important;
        padding: 4px 10px !important;
        font-size: 0.72rem !important;
    }
}

/* 4. Chart Header Controls Styling */
@media (max-width: 768px) {
    .card-header-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
        width: 100% !important;
        margin-top: 0.25rem;
    }
    
    .custom-dropdown-container {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    .custom-dropdown-trigger {
        width: 100% !important;
        padding: 0.55rem 1rem !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    
    .custom-dropdown-menu {
        width: 100% !important;
        box-sizing: border-box !important;
        z-index: 1100 !important;
    }
    
    .chart-header-bottom-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    .timeframe-group {
        display: flex !important;
        flex-grow: 1 !important;
        background: rgba(15, 23, 42, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 2px !important;
        border-radius: 8px !important;
        justify-content: space-around !important;
    }
    
    .btn-timeframe {
        flex-grow: 1 !important;
        text-align: center !important;
        padding: 6px 0 !important;
        font-size: 0.75rem !important;
    }
    
    .search-box-container {
        flex-grow: 1 !important;
        box-sizing: border-box !important;
        padding: 5px 10px !important;
        border-radius: 8px !important;
    }
    
    .search-box-container input {
        width: 100% !important;
        font-size: 0.8rem !important;
    }
}

/* 5. Mobile Sidebar Tab Switcher */
.sidebar-tab-switcher {
    display: none; /* Hidden on desktop */
}

@media (max-width: 1200px) {
    .sidebar-tab-switcher {
        display: flex !important;
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        padding: 4px !important;
        border-radius: 12px !important;
        margin-bottom: 1.25rem !important;
        gap: 4px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    }
    
    .sidebar-tab-btn {
        flex: 1 !important;
        background: none !important;
        border: none !important;
        color: var(--text-secondary) !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        font-family: var(--font-heading) !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    
    .sidebar-tab-btn:hover {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.03) !important;
    }
    
    .sidebar-tab-btn.active {
        background: var(--accent-blue) !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    }
    
    /* Animation helper for active tabs */
    .hyper-trader-opinion,
    .technical-summary-card,
    .pivot-points-card,
    .order-book-card,
    .chart-sidebar .action-card-mini:last-of-type {
        animation: sidebarFadeIn 0.35s ease-out;
    }
}

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


/* =====================================================================
   MARKET-MODE UI — Toggle, KPI-Kollaps, aktive Bridge-Zeile
   ===================================================================== */

/* Market-Mode Toggle — schlank, zwei visuelle Tiers
   Tier 1 (primary): VİOP | FX als segmented Pair
   Tier 2 (status):  Auto-Tag rechts daneben — kleiner, dezenter Indikator */
.market-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Segmented Pair (VİOP | FX) */
.market-mode-toggle .mm-segment {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--card-border, rgba(255,255,255,0.08));
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.20);
}

.market-mode-toggle .mm-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--text-muted, #9ca3af);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 11px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.2;
}

.market-mode-toggle .mm-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.04);
}

.market-mode-toggle .mm-btn[data-mode="viop"].active {
    background: linear-gradient(135deg, rgba(59,130,246,0.20), rgba(59,130,246,0.08));
    color: #fff;
    border-color: rgba(59,130,246,0.40);
}

.market-mode-toggle .mm-btn[data-mode="fx"].active {
    background: linear-gradient(135deg, rgba(16,185,129,0.20), rgba(16,185,129,0.08));
    color: #fff;
    border-color: rgba(16,185,129,0.40);
}

/* Auto-Status-Tag — kleiner Pill-Indikator rechts vom Pair */
.market-mode-toggle .mm-auto {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--text-muted, #6b7280);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 3px 9px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.market-mode-toggle .mm-auto:hover {
    opacity: 1;
}

.market-mode-toggle .mm-auto.active {
    color: #fbbf24;
    border-style: solid;
    border-color: rgba(251,191,36,0.45);
    background: rgba(251,191,36,0.06);
    opacity: 1;
}

.market-mode-toggle .mm-auto.active i {
    filter: drop-shadow(0 0 4px rgba(251,191,36,0.4));
}

/* Im Manuell-Modus: Auto-Label wird zu "Manuell ↺" Hinweis */
.market-mode-toggle .mm-auto:not(.active) .mm-auto-label::before {
    content: "Manuell";
}
.market-mode-toggle .mm-auto:not(.active) .mm-auto-label {
    font-size: 0;  /* versteckt das "Auto"-Textnode */
}
.market-mode-toggle .mm-auto:not(.active) .mm-auto-label::before {
    font-size: 0.62rem;
    letter-spacing: 0.4px;
}

/* Bridge-Zeilen (Telemetry) — aktiv / dimmed */
.bridge-row {
    border-radius: 6px;
    transition: background 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
    border-left: 2px solid transparent;
}

.bridge-row.is-active-bridge {
    background: rgba(16, 185, 129, 0.05);
    border-left-color: rgba(16, 185, 129, 0.55);
    box-shadow: inset 0 0 12px rgba(16,185,129,0.05);
}

.bridge-row[data-bridge="viop"].is-active-bridge {
    background: rgba(59, 130, 246, 0.05);
    border-left-color: rgba(59, 130, 246, 0.55);
    box-shadow: inset 0 0 12px rgba(59,130,246,0.05);
}

.bridge-row.is-dim-bridge {
    opacity: 0.5;
}

/* KPI-Karten — featured (Modus-relevant) / collapsed (nicht relevant) */
.metric-card[data-mode-relevance] {
    transition: opacity 0.3s ease, max-height 0.35s ease, transform 0.25s ease, box-shadow 0.3s ease;
}

.metric-card.kpi-featured {
    box-shadow: 0 0 0 1px rgba(16,185,129,0.18), 0 6px 24px rgba(16,185,129,0.08);
}

.metric-card[data-mode-relevance="viop"].kpi-featured {
    box-shadow: 0 0 0 1px rgba(59,130,246,0.20), 0 6px 24px rgba(59,130,246,0.08);
}

.metric-card.kpi-collapsed {
    opacity: 0.55;
}

.metric-card.kpi-collapsed .kpi-sparkline,
.metric-card.kpi-collapsed .metric-subtext,
.metric-card.kpi-collapsed .win-progress-bar {
    display: none !important;
}

.metric-card.kpi-collapsed .metric-value {
    font-size: 1rem !important;
    margin: 0 !important;
}

.metric-card.kpi-collapsed .metric-info > div:first-child {
    gap: 0 !important;
}

/* Click expandiert collapsed Karte temporär */
.metric-card.kpi-collapsed:hover {
    opacity: 0.95;
}

/* Mobile: collapsed Karten werden zu schmalen Streifen */
@media (max-width: 768px) {
    .metric-card.kpi-collapsed {
        min-height: 56px;
        padding: 0.55rem 0.85rem !important;
    }
    .metric-card.kpi-collapsed .metric-icon {
        transform: scale(0.85);
    }
    .market-mode-toggle .mm-btn {
        padding: 4px 10px;
        font-size: 0.66rem;
    }
    .market-mode-toggle .mm-auto {
        padding: 3px 7px;
        font-size: 0.58rem;
    }
    .market-mode-toggle .mm-auto-label {
        display: none;  /* nur Icon auf Mobile */
    }
    .market-mode-toggle .mm-auto:not(.active) .mm-auto-label::before {
        display: none;
    }
}

/* Wenn der Modus gesetzt ist: animiere den Wechsel-Indikator-Glow */
body[data-market-mode="fx"] .hot-tickers-bar {
    border-color: rgba(16,185,129,0.10) !important;
}
body[data-market-mode="viop"] .hot-tickers-bar {
    border-color: rgba(59,130,246,0.10) !important;
}

/* =====================================================================
   CHART ANALYTICS STRIP (4-Card Grid unter dem Chart)
   Ersetzt die alte hohe Sidebar — alles auf einer Zeile, kompakt.
   ===================================================================== */
.chart-analytics-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 0.85rem;
    margin-top: 1rem;
    width: 100%;
}

.analytics-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(10, 15, 30, 0.35) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 0;
    box-shadow: inset 0 1px 6px rgba(0,0,0,0.18);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.analytics-card:hover {
    border-color: rgba(59, 130, 246, 0.20);
}

.analytics-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.analytics-card-header h4 {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.analytics-pill {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.20);
    color: var(--accent-emerald, #10b981);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.analytics-card-footer {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
}

/* Playbook-Card: Setup-Details kompakt 2x4 statt 2x7 + Strategie & Risiko-Text in einer Zeile */
.analytics-card .setup-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.analytics-card .playbook-item {
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.015);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.025);
    gap: 1px;
}

.analytics-card .playbook-item:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(59, 130, 246, 0.18);
}

.analytics-card .playbook-item .label {
    font-size: 0.55rem;
    letter-spacing: 0.45px;
}

.analytics-card .playbook-item .value {
    font-size: 0.78rem;
}

.analytics-card .playbook-item.full-width {
    grid-column: span 2;
    padding: 5px 8px;
}

.analytics-card .playbook-item .desc {
    font-size: 0.66rem;
    line-height: 1.35;
}

/* Tacho-Card: Gauge zentriert, Verdict darunter */
.analytics-card .technical-gauge-wrapper {
    transform: scale(0.88);
    transform-origin: top center;
    margin: 0 auto;
}

.analytics-card .gauge-verdict-box {
    font-size: 0.78rem;
}

/* Pivot-Card: Tabelle ohne extra Padding */
.analytics-card .pivot-table td {
    padding: 1px 0;
    font-size: 0.7rem;
}

/* Orderbuch-Card: dichte Zeilen */
.analytics-card .orderbook-container { font-size: 0.66rem !important; }

/* Responsive: Tablet 2x2 statt 1x4, Mobile 1x4 stack */
@media (max-width: 1280px) {
    .chart-analytics-strip {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        grid-auto-rows: minmax(180px, auto);
    }
}
@media (max-width: 768px) {
    .chart-analytics-strip {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
}

/* Desktop: Favoriten-Pills bleiben auf einer Zeile (horizontal scroll bei Overflow) */
.hot-tickers-bar::-webkit-scrollbar {
    height: 5px;
}
.hot-tickers-bar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
}
.hot-tickers-bar .ticker-pill {
    flex-shrink: 0;
}

/* Equity-Chart Empty-State */
.equity-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 160px;
    padding: 1.5rem;
    color: var(--text-muted, #94a3b8);
    text-align: center;
}
.equity-empty-state i {
    font-size: 1.6rem;
    opacity: 0.45;
}
.equity-empty-state .empty-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #cbd5e1);
}
.equity-empty-state .empty-sub {
    font-size: 0.7rem;
    line-height: 1.35;
}

/* =====================================================================
   Live / Mock Toggles in den Admin-Settings
   ===================================================================== */
.mock-toggle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.35);
    border: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.mock-toggle-item:hover {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(255,255,255,0.08);
}
.mock-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mock-toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
    transition: background 0.2s ease;
}
.mock-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #cbd5e1;
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}
.mock-toggle-input:checked + .mock-toggle-track {
    background: rgba(16, 185, 129, 0.55);
}
.mock-toggle-input:checked + .mock-toggle-track .mock-toggle-thumb {
    transform: translateX(16px);
    background: #fff;
}
.mock-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mock-toggle-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}
.mock-toggle-sub {
    font-size: 0.66rem;
    color: var(--text-muted, #94a3b8);
    line-height: 1.3;
}
.mock-toggle-item:has(.mock-toggle-input:checked) {
    border-color: rgba(16, 185, 129, 0.30);
    background: rgba(16, 185, 129, 0.06);
}


/* =====================================================================
   PROFILES PANEL (ELITE EXERT SPECIALISTS COMMITTEE COCKPIT)
   ===================================================================== */
.profiles-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.profiles-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 2rem;
    border-radius: 12px;
    background: rgba(10, 25, 20, 0.35); /* Smaragd-Tönung */
    border: 1px solid rgba(16, 185, 129, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.profile-card:hover {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.06);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.12);
    transform: translateY(-2px);
}

.profile-card-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
    min-width: 0;
}

.profile-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.profile-badge-item {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.profile-badge-default {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue, #3b82f6);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.profile-badge-env {
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-emerald, #10b981);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.profile-meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--text-secondary, #cbd5e1);
    flex-wrap: wrap;
}

.profile-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-meta-item strong {
    color: #ffffff;
}

.profile-meta-path {
    font-family: monospace;
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.profile-card-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Action buttons inside Profile Card */
.profile-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #cbd5e1);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

.profile-action-btn:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.45);
    color: var(--accent-emerald, #10b981);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
    transform: scale(1.08);
}

.profile-action-btn.s-btn {
    font-family: 'Outfit', sans-serif;
}

/* Terminal & Shell dialog layout inside modal */
.terminal-console {
    background: #050b0a;
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    padding: 1.25rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #34d399; /* Bright matrix green */
    min-height: 250px;
    max-height: 450px;
    overflow-y: auto;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.9);
}

.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 15px;
    background: #34d399;
    animation: blink 1s infinite steps(2, start);
    vertical-align: middle;
    margin-left: 4px;
}

@keyframes blink {
    to { visibility: hidden; }
}

/* Prompt Editor */
.prompt-editor-textarea {
    width: 100%;
    min-height: 280px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 1rem;
    line-height: 1.45;
    outline: none;
    resize: vertical;
}

.prompt-editor-textarea:focus {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
}


/* =====================================================================
   KANBAN SIGNAL PIPELINE BOARD STYLING
   ===================================================================== */
.kanban-board-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    height: calc(100vh - 120px);
    min-height: 600px;
    max-width: 1440px;
    margin: 0 auto;
}

.kanban-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.kanban-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    flex-grow: 1;
    min-height: 0; /* Important for flex child scroll */
}

@media (max-width: 1200px) {
    .kanban-grid {
        grid-template-columns: repeat(2, 1fr);
        overflow-y: auto;
    }
    .kanban-board-container {
        height: auto;
    }
}

@media (max-width: 680px) {
    .kanban-grid {
        grid-template-columns: 1fr;
    }
}

.kanban-column {
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem;
    min-height: 350px;
    max-height: 100%;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.kanban-column-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-column-title i {
    font-size: 0.85rem;
}

.kanban-column-badge {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

/* Kanban column individual neon header borders */
.kanban-column[data-status="pending"] { border-top: 3px solid var(--accent-blue); }
.kanban-column[data-status="pending"] .kanban-column-badge { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
.kanban-column[data-status="processing"] { border-top: 3px solid var(--accent-amber); }
.kanban-column[data-status="processing"] .kanban-column-badge { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
.kanban-column[data-status="executed"] { border-top: 3px solid var(--accent-emerald); }
.kanban-column[data-status="executed"] .kanban-column-badge { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); }
.kanban-column[data-status="blocked"] { border-top: 3px solid var(--accent-crimson); }
.kanban-column[data-status="blocked"] .kanban-column-badge { background: rgba(239, 68, 68, 0.15); color: var(--accent-crimson); }

.kanban-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-grow: 1;
    overflow-y: auto;
    padding: 4px;
    min-height: 200px;
}

/* Drag hover effect on lane */
.kanban-cards-wrapper.drag-over {
    background: rgba(16, 185, 129, 0.04);
    border: 1px dashed rgba(16, 185, 129, 0.25);
    border-radius: 8px;
}

/* Kanban Signal Card */
.kanban-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: grab;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(30, 41, 59, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Neon glow for side w.r.t action */
.kanban-card.is-long {
    border-left: 3.5px solid var(--accent-emerald, #10b981);
}

.kanban-card.is-short {
    border-left: 3.5px solid var(--accent-crimson, #ef4444);
}

/* Dragging state */
.kanban-card.dragging {
    opacity: 0.4;
    transform: scale(0.96);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.kanban-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kanban-ticker-badge {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.kanban-card-action-badge {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
}

.kanban-card-action-badge.long {
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-emerald, #10b981);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.kanban-card-action-badge.short {
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-crimson, #ef4444);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.kanban-card-strategy {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-card-middle {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 2px;
}

.kanban-card-price {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
}

.kanban-card-time {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.04);
}

.kanban-card-action-menu {
    position: relative;
}

.kanban-dots-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.8rem;
    transition: color 0.15s ease;
}

.kanban-dots-btn:hover {
    color: #ffffff;
}

/* Kanban quick status shift options popup */
.kanban-action-menu-dropdown {
    position: absolute;
    bottom: 22px;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 4px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    min-width: 120px;
    backdrop-filter: blur(8px);
}

.kanban-action-menu-dropdown.show {
    display: flex;
}

.kanban-menu-option {
    background: none;
    border: none;
    color: var(--text-secondary);
    text-align: left;
    padding: 6px 10px;
    font-size: 0.72rem;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kanban-menu-option:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.kanban-menu-option.opt-execute:hover { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); }
.kanban-menu-option.opt-block:hover { background: rgba(239, 68, 68, 0.15); color: var(--accent-crimson); }
.kanban-menu-option.opt-process:hover { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
.kanban-menu-option.opt-pending:hover { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }

.kanban-empty-lane-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 2rem;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.kanban-empty-lane-placeholder i {
    font-size: 1.2rem;
    margin-bottom: 6px;
    opacity: 0.35;
}


/* --- Premium Arsenal Topbar Header Theme --- */
.content-header.arsenal-header-theme {
    background: rgba(10, 25, 23, 0.45);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(16, 185, 129, 0.15);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    gap: 1.5rem;
    transition: var(--transition-smooth);
}

.header-brand-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.arsenal-logo-box {
    width: 38px;
    height: 38px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(70, 246, 190, 0.35);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 217, 163, 0.25);
    transition: var(--transition-smooth);
}

.arsenal-logo-box:hover {
    box-shadow: 0 0 15px rgba(0, 217, 163, 0.45);
    border-color: rgba(70, 246, 190, 0.6);
}

.arsenal-logo-icon {
    color: var(--accent-emerald);
    font-size: 1.15rem;
    transform: rotate(45deg);
    text-shadow: 0 0 8px rgba(70, 246, 190, 0.6);
}

.arsenal-brand-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 2px;
    user-select: none;
}

.brand-main {
    color: #fff;
    font-size: 1.25rem;
    text-shadow: 0 0 10px rgba(255,255,255,0.1);
}

.brand-divider {
    color: rgba(16, 185, 129, 0.4);
    font-size: 1.25rem;
    font-weight: 300;
}

.brand-module {
    color: var(--accent-emerald);
    font-size: 1.25rem;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.header-actions-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.arsenal-header-btn {
    height: 36px;
    padding: 0 1rem;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.04);
    color: var(--accent-emerald);
    text-decoration: none;
}

.arsenal-header-btn:hover {
    border-color: var(--accent-emerald);
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
    color: #fff;
}

.arsenal-header-btn i {
    font-size: 0.85rem;
}

.sound-toggle-btn {
    width: 36px;
    padding: 0;
    justify-content: center;
}

.sound-toggle-btn.active {
    color: var(--accent-emerald);
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
}

.sound-toggle-btn.muted {
    color: var(--text-secondary);
    border-color: var(--card-border);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
}

.arsenal-status-ip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--accent-emerald);
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 0 0.75rem;
    height: 36px;
    border-radius: 6px;
    user-select: none;
}

@media (max-width: 768px) {
    .content-header.arsenal-header-theme {
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
    .brand-main, .brand-divider {
        display: none;
    }
    .brand-module {
        font-size: 1.1rem;
    }
    .arsenal-header-btn span {
        display: none;
    }
    .arsenal-header-btn {
        padding: 0 0.75rem;
    }
    .arsenal-status-ip {
        font-size: 0.7rem;
        padding: 0 0.5rem;
    }
}