/* ZenAxon Theme Color Palette & Layout Styles */

/* DEFAULT THEME: Dawn Sunlight (晨曦日光 - Day Mode) */
:root {
    --theme-name: 'dawn-sunlight';
    --bg-dark: #f4f6fa;
    --bg-gradient: linear-gradient(135deg, #f4f6fa 0%, #e0e7ff 50%, #f4f6fa 100%);
    --bg-panel: rgba(255, 255, 255, 0.75);
    --bg-card: rgba(255, 255, 255, 0.6);
    --bg-card-solid: #ffffff;
    --bg-console: #ffffff;
    --primary: #4f46e5; /* Indigo */
    --primary-glow: rgba(79, 70, 229, 0.15);
    --primary-dark: #3730a3;
    --secondary: #6366f1;
    --accent: #06b6d4; /* Cyan */
    --accent-glow: rgba(6, 182, 212, 0.15);
    --text-main: #1e293b;
    --text-muted: #475569;
    --text-dim: #64748b;
    --border-color: rgba(0, 0, 0, 0.08);
    --success: #10b981;
    --danger: #ef4444;
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-display: 'Outfit', sans-serif;
    
    --bg-dashboard-card: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(224, 231, 255, 0.5));
    --bg-dashboard-card-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(224, 231, 255, 0.75));
    --border-dashboard-card: rgba(79, 70, 229, 0.12);
    --border-dashboard-card-hover: rgba(79, 70, 229, 0.3);
    
    --phone-frame-border: #334155;
    --phone-frame-bg: #0f172a;
    --shadow-color: rgba(79, 70, 229, 0.12);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --bg-day-circle: rgba(0, 0, 0, 0.04);
    --bg-input: rgba(0, 0, 0, 0.04);
    --bg-input-focus: rgba(0, 0, 0, 0.06);
    --calendar-filter: invert(0);
}

/* Warm Sunset (落日余晖 - Light/Day) */
body.theme-warm-sunset {
    --theme-name: 'warm-sunset';
    --bg-dark: #fdf8f5;
    --bg-gradient: linear-gradient(135deg, #fdf8f5 0%, #ffedd5 50%, #fdf8f5 100%);
    --bg-panel: rgba(255, 255, 255, 0.8);
    --bg-card: rgba(255, 255, 255, 0.65);
    --bg-card-solid: #ffffff;
    --bg-console: #ffffff;
    --primary: #ea580c; /* Sunset Orange */
    --primary-glow: rgba(234, 88, 12, 0.15);
    --primary-dark: #c2410c;
    --secondary: #f97316;
    --accent: #ec4899; /* Warm Rose */
    --accent-glow: rgba(236, 72, 153, 0.15);
    --text-main: #3c2f2f;
    --text-muted: #786262;
    --text-dim: #9c8a8a;
    --border-color: rgba(139, 92, 26, 0.08);
    --success: #10b981;
    --danger: #ef4444;
    
    --bg-dashboard-card: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(254, 243, 199, 0.5));
    --bg-dashboard-card-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(254, 243, 199, 0.75));
    --border-dashboard-card: rgba(234, 88, 12, 0.12);
    --border-dashboard-card-hover: rgba(234, 88, 12, 0.3);
    
    --phone-frame-border: #334155;
    --phone-frame-bg: #0f172a;
    --shadow-color: rgba(234, 88, 12, 0.08);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --bg-day-circle: rgba(0, 0, 0, 0.04);
    --bg-input: rgba(0, 0, 0, 0.04);
    --bg-input-focus: rgba(0, 0, 0, 0.06);
    --calendar-filter: invert(0);
}

/* Forest Zen (林间幽禅 - Dark) */
body.theme-forest-zen {
    --theme-name: 'forest-zen';
    --bg-dark: #060f0e;
    --bg-gradient: linear-gradient(135deg, #060f0e 0%, #11221f 50%, #060f0e 100%);
    --bg-panel: rgba(17, 34, 31, 0.6);
    --bg-card: rgba(30, 47, 44, 0.65);
    --bg-card-solid: #1a2d2a;
    --bg-console: #040b0a;
    --primary: #10b981; /* Emerald Zen */
    --primary-glow: rgba(16, 185, 129, 0.3);
    --primary-dark: #047857;
    --secondary: #34d399;
    --accent: #84cc16; /* Lime Green */
    --accent-glow: rgba(132, 204, 22, 0.2);
    --text-main: #ecfdf5;
    --text-muted: #a7f3d0;
    --text-dim: #65a30d;
    --border-color: rgba(255, 255, 255, 0.06);
    --success: #10b981;
    --danger: #f87171;
    
    --bg-dashboard-card: linear-gradient(135deg, rgba(16, 44, 34, 0.7), rgba(6, 15, 14, 0.7));
    --bg-dashboard-card-hover: linear-gradient(135deg, rgba(16, 44, 34, 0.85), rgba(6, 15, 14, 0.85));
    --border-dashboard-card: rgba(16, 185, 129, 0.2);
    --border-dashboard-card-hover: rgba(16, 185, 129, 0.4);
    
    --phone-frame-border: #1a2d2a;
    --phone-frame-bg: #060f0e;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --nav-bg: rgba(6, 15, 14, 0.9);
    --bg-day-circle: rgba(255, 255, 255, 0.05);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-input-focus: rgba(255, 255, 255, 0.08);
    --calendar-filter: invert(1);
}

/* Deep Ocean (深海潜航 - Dark) */
body.theme-deep-ocean {
    --theme-name: 'deep-ocean';
    --bg-dark: #050b14;
    --bg-gradient: linear-gradient(135deg, #050b14 0%, #0b2545 50%, #050b14 100%);
    --bg-panel: rgba(11, 37, 69, 0.5);
    --bg-card: rgba(20, 50, 90, 0.6);
    --bg-card-solid: #13315c;
    --bg-console: #02060d;
    --primary: #0077b6; /* Deep Sea Blue */
    --primary-glow: rgba(0, 119, 182, 0.3);
    --primary-dark: #03045e;
    --secondary: #00b4d8;
    --accent: #2a9d8f; /* Ocean Green/Teal */
    --accent-glow: rgba(42, 157, 143, 0.25);
    --text-main: #f0f8ff;
    --text-muted: #8ecae6;
    --text-dim: #457b9d;
    --border-color: rgba(255, 255, 255, 0.07);
    --success: #34d399;
    --danger: #f87171;
    
    --bg-dashboard-card: linear-gradient(135deg, rgba(11, 37, 69, 0.7), rgba(5, 11, 20, 0.7));
    --bg-dashboard-card-hover: linear-gradient(135deg, rgba(11, 37, 69, 0.85), rgba(5, 11, 20, 0.85));
    --border-dashboard-card: rgba(0, 119, 182, 0.2);
    --border-dashboard-card-hover: rgba(0, 119, 182, 0.4);
    
    --phone-frame-border: #13315c;
    --phone-frame-bg: #050b14;
    --shadow-color: rgba(0, 0, 0, 0.7);
    --nav-bg: rgba(5, 11, 20, 0.9);
    --bg-day-circle: rgba(255, 255, 255, 0.05);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-input-focus: rgba(255, 255, 255, 0.08);
    --calendar-filter: invert(1);
}

/* Nebula Night (星云幻境 - Dark) */
body.theme-nebula-night {
    --theme-name: 'nebula-night';
    --bg-dark: #0a0614;
    --bg-gradient: linear-gradient(135deg, #0a0614 0%, #22093a 50%, #0a0614 100%);
    --bg-panel: rgba(34, 9, 58, 0.4);
    --bg-card: rgba(50, 20, 80, 0.65);
    --bg-card-solid: #2e114d;
    --bg-console: #05020a;
    --primary: #a855f7; /* Cosmic Purple */
    --primary-glow: rgba(168, 85, 247, 0.35);
    --primary-dark: #7e22ce;
    --secondary: #d8b4fe;
    --accent: #f43f5e; /* Nebula Rose */
    --accent-glow: rgba(244, 63, 94, 0.25);
    --text-main: #f3e8ff;
    --text-muted: #c084fc;
    --text-dim: #7e22ce;
    --border-color: rgba(255, 255, 255, 0.08);
    --success: #34d399;
    --danger: #f87171;
    
    --bg-dashboard-card: linear-gradient(135deg, rgba(30, 27, 75, 0.7), rgba(15, 23, 42, 0.7));
    --bg-dashboard-card-hover: linear-gradient(135deg, rgba(30, 27, 75, 0.85), rgba(15, 23, 42, 0.85));
    --border-dashboard-card: rgba(139, 92, 246, 0.2);
    --border-dashboard-card-hover: rgba(139, 92, 246, 0.4);
    
    --phone-frame-border: #2e114d;
    --phone-frame-bg: #0a0614;
    --shadow-color: rgba(0, 0, 0, 0.7);
    --nav-bg: rgba(10, 6, 20, 0.9);
    --bg-day-circle: rgba(255, 255, 255, 0.05);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-input-focus: rgba(255, 255, 255, 0.08);
    --calendar-filter: invert(1);
}

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

body {
    background: #0b0f19; /* 极简沉浸深色外围，突出手机本身 */
    color: var(--text-main);
    font-family: var(--font-sans);
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.5s ease, color 0.5s ease;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.2);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.4);
}

/* Hide scrollbars completely inside the phone simulator to prevent layout squeezing */
.phone-frame * {
    scrollbar-width: none; /* Firefox */
}
.phone-frame *::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}


/* Layout Wrapper */
.app-dashboard {
    display: grid;
    grid-template-columns: 300px 380px 1fr;
    width: 100vw;
    height: 100vh;
    padding: 16px;
    gap: 16px;
    overflow: hidden;
}

/* Sidebar Styling Common */
.tracker-panel {
    background: var(--bg-panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
    transition: background 0.5s ease, border-color 0.5s ease;
}

/* Middle Layout (Simulator + Compact Logs) */
.middle-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start; /* Align contents to the top */
    min-width: 0;
    min-height: 0;
}

/* Smartphone Simulator */
.simulator-container {
    flex: 0 0 auto; /* Keep fixed/natural phone size */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Stick phone to the top */
    width: 100%;
}

.phone-frame {
    width: 350px;
    height: 670px; /* Slightly shorter to leave space for logs */
    background: var(--phone-frame-bg);
    border: 12px solid var(--phone-frame-border);
    border-radius: 44px;
    box-shadow: 0 20px 50px -10px var(--shadow-color), 
                0 0 0 4px rgba(255, 255, 255, 0.05),
                0 0 35px var(--primary-glow);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Dynamic Island */
.dynamic-island {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 30px;
    background: #000;
    border-radius: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: flex-end;
}
.camera {
    width: 8px;
    height: 8px;
    background: #111;
    border-radius: 50%;
    box-shadow: inset 0 0 2px rgba(255,255,255,0.4);
}
.island-pill {
    color: var(--secondary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: var(--font-display);
    margin-right: auto;
    margin-left: 10px;
}

/* Phone Status Bar */
.status-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 24px 6px 24px;
    background: transparent; /* 还原为完全透明 */
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 1002;
    pointer-events: none; /* 允许穿透点击 */
}
.status-bar .icons {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Phone Content Screen */
.phone-content {
    flex-grow: 1;
    padding: 56px 20px 12px 20px; /* padding-top 设为 56px 避开状态栏文字 */
    overflow: hidden;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-gradient); /* 使用渐变色底 */
    transition: background 0.5s ease;
    overflow-x: hidden;
}
.phone-content::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

/* 创造底层的沉浸式流体流动发光球 */
.phone-content::before,
.phone-content::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
    /* 移除 mix-blend-mode 以确保在浅色和深色背景下均能完美呈现颜色球 */
}

/* 呼吸流体球 A：位于左上方，主要偏向主色调 */
.phone-content::before {
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 80%);
    top: -50px;
    left: -50px;
    animation: floatBlobA 18s ease-in-out infinite alternate;
}

/* 呼吸流体球 B：位于右下方，主要偏向辅助/点缀色调 */
.phone-content::after {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 80%);
    bottom: -80px;
    right: -80px;
    animation: floatBlobB 22s ease-in-out infinite alternate;
}

/* 确保所有子元素内容都在流光层上方，防止文字被遮挡 */
.phone-content > * {
    position: relative;
    z-index: 1;
}

@keyframes floatBlobA {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(60px, 80px) scale(1.15);
    }
    100% {
        transform: translate(-30px, 140px) scale(0.9);
    }
}

@keyframes floatBlobB {
    0% {
        transform: translate(0, 0) scale(0.9);
    }
    50% {
        transform: translate(-80px, -60px) scale(1.1);
    }
    100% {
        transform: translate(20px, -120px) scale(1.05);
    }
}

/* Navigation bar */
.app-nav {
    flex-shrink: 0;
    height: 64px;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 8px;
    z-index: 999;
    transition: background 0.5s ease, border-color 0.5s ease;
}
.nav-item {
    background: none;
    border: none;
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    width: 60px;
}
.nav-item i {
    font-size: 1.1rem;
}
.nav-item.active {
    color: var(--primary);
}
.nav-item:hover {
    color: var(--secondary);
}

.home-indicator {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background: rgba(128, 128, 128, 0.4);
    border-radius: 10px;
    z-index: 1000;
}

/* Right Panel: Console Logs & EEG Graph */
.console-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.console-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
}
.status-indicator {
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.status-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
}
.status-indicator.online {
    background: rgba(52, 211, 153, 0.15);
    color: var(--success);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.2);
}
.status-indicator.offline {
    background: rgba(248, 113, 113, 0.15);
    color: var(--danger);
}

.eeg-wave-container {
    background: rgba(128, 128, 128, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eeg-wave-container canvas {
    width: 100%;
    height: 80px;
    display: block;
}
.eeg-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

.console-logs {
    background: var(--bg-console);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    flex-grow: 1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(100vh - 230px);
    transition: background 0.5s ease, border-color 0.5s ease;
}
.log-entry.system { color: #4f46e5; }
.log-entry.ble { color: #0284c7; }
.log-entry.algo { color: #7c3aed; }
.log-entry.user { color: #059669; }
.log-entry.error { color: #dc2626; }

/* Custom log text adjustments for dark themes to keep them readable */
body.theme-forest-zen .log-entry.system,
body.theme-deep-ocean .log-entry.system,
body.theme-nebula-night .log-entry.system { color: #a78bfa; }
body.theme-forest-zen .log-entry.ble,
body.theme-deep-ocean .log-entry.ble,
body.theme-nebula-night .log-entry.ble { color: #38bdf8; }
body.theme-forest-zen .log-entry.algo,
body.theme-deep-ocean .log-entry.algo,
body.theme-nebula-night .log-entry.algo { color: #c084fc; }
body.theme-forest-zen .log-entry.user,
body.theme-deep-ocean .log-entry.user,
body.theme-nebula-night .log-entry.user { color: #a7f3d0; }

/* General Button Styles */
.btn {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 15px var(--primary-glow);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}
.btn-secondary {
    background: rgba(128, 128, 128, 0.08);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover {
    background: rgba(128, 128, 128, 0.15);
}
.btn-reset {
    margin-top: 12px;
    padding: 8px;
    font-size: 0.75rem;
}

/* Flow Tracker View Toggle & Flowchart styling */
.tracker-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 3px;
    margin: 12px 0 16px 0;
    border: 1px solid var(--border-color);
}
.tracker-toggle .toggle-btn {
    flex: 1;
    padding: 8px;
    border-radius: 9px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.tracker-toggle .toggle-btn.active {
    background: var(--bg-card-solid);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.flow-graph-container {
    width: 100%;
    height: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin-bottom: 15px;
    min-width: 0;
    min-height: 0;
}
.mermaid-scroll-container {
    flex: 1;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: none !important;             /* Fully borderless to blend in */
    background: transparent !important;  /* Fully transparent to match panel background exactly */
    position: relative;
    box-shadow: none !important;         /* Remove box shadow to match tracker-panel */
    cursor: grab;
    user-select: none;
}
.mermaid-scroll-container:active {
    cursor: grabbing;
}
#mermaid-renderer {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.graph-zoom-controls {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 10;
}
.graph-zoom-controls .btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 0;
    font-size: 0.7rem;
    min-height: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mermaid SVG node adaptations to active theme variables */
.mermaid svg {
    background: transparent !important;
}
.mermaid .node rect,
.mermaid .node polygon,
.mermaid .node circle,
.mermaid .node path {
    fill: var(--bg-card-solid) !important; /* Adapts to white in day mode, dark-green/blue/purple in night mode */
    stroke: var(--border-color) !important;
    stroke-width: 1.5px !important;
    transition: all 0.3s ease;
}
.mermaid text,
.mermaid .node .label,
.mermaid .node text,
.mermaid .label,
.mermaid .edgeLabel,
.mermaid .edgeLabel text,
.mermaid .label h4,
.mermaid .label span,
.mermaid .label div,
.mermaid .label br {
    color: var(--text-main) !important; /* Adapts to dark slate in day mode, light neon colors in night mode */
    fill: var(--text-main) !important;   /* Crucial for SVG text tags readability */
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
}
.mermaid .edgePath .path {
    stroke: var(--primary) !important; /* Use theme primary color (Indigo/Emerald/etc) for high contrast lines */
    stroke-width: 2px !important;      /* Thicker lines for visibility */
}
.mermaid .edgeArrowhead {
    fill: var(--primary) !important;
    stroke: var(--primary) !important;
}

/* Highlighted node styling with pulsing glow shadow on light background */
@keyframes node-pulse-light {
    0% {
        filter: drop-shadow(0 0 2px rgba(99, 102, 241, 0.4)) drop-shadow(0 0 4px rgba(99, 102, 241, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.8)) drop-shadow(0 0 12px rgba(99, 102, 241, 0.4));
    }
    100% {
        filter: drop-shadow(0 0 2px rgba(99, 102, 241, 0.4)) drop-shadow(0 0 4px rgba(99, 102, 241, 0.2));
    }
}
.mermaid .node.highlighted rect,
.mermaid .node.highlighted polygon,
.mermaid .node.highlighted circle,
.mermaid .node.highlighted path {
    stroke: #6366f1 !important; /* Primary Indigo border */
    stroke-width: 2.5px !important;
    animation: node-pulse-light 2s infinite !important;
    fill: #e0e7ff !important; /* Light indigo glow fill */
}

/* Node color differentiation by category */
/* Phase / Milestone headers */
.mermaid .node[id*="Root"] rect,
.mermaid .node[id*="Phase1"] rect,
.mermaid .node[id*="Phase2"] rect {
    fill: var(--primary-glow) !important;
    stroke: var(--primary) !important;
    stroke-width: 2px !important;
}
/* Decision / Logic gate nodes (diamond shapes) */
.mermaid .node[id*="Guide"] polygon,
.mermaid .node[id*="Check_Bind"] polygon,
.mermaid .node[id*="Sync_Quest"] polygon {
    fill: rgba(245, 158, 11, 0.12) !important;
    stroke: #f59e0b !important;
    stroke-width: 2px !important;
}
/* Error / Block alert nodes */
.mermaid .node[id*="Block"] rect,
.mermaid .node[id*="Bind_Fail"] rect {
    fill: rgba(239, 68, 68, 0.1) !important;
    stroke: #ef4444 !important;
    stroke-width: 1.5px !important;
}
/* Core Tab nodes */
.mermaid .node[id*="-Home-"] rect,
.mermaid .node[id*="-Report-"] rect,
.mermaid .node[id*="-Music-"] rect,
.mermaid .node[id*="-Profile-"] rect {
    fill: var(--accent-glow) !important;
    stroke: var(--accent) !important;
    stroke-width: 2px !important;
}
/* BLE connection & EEG monitor flow nodes */
.mermaid .node[id*="BLE"] rect,
.mermaid .node[id*="EEG"] rect {
    fill: rgba(6, 182, 212, 0.1) !important;
    stroke: #06b6d4 !important;
    stroke-width: 1.5px !important;
}
/* Success / Generation complete nodes */
.mermaid .node[id*="Sync_Success"] rect,
.mermaid .node[id*="Gen_Plan"] rect {
    fill: rgba(16, 185, 129, 0.1) !important;
    stroke: #10b981 !important;
    stroke-width: 1.5px !important;
}
/* Future / v2.0 planned nodes (hexagons) */
.mermaid .node[id*="AI_Tab"] polygon,
.mermaid .node[id*="AI_Entry"] polygon {
    fill: rgba(168, 85, 247, 0.1) !important;
    stroke: #a855f7 !important;
    stroke-dasharray: 4 2 !important;
}

/* Specific theme overrides for dark themes */
body.theme-forest-zen .tracker-toggle,
body.theme-deep-ocean .tracker-toggle,
body.theme-nebula-night .tracker-toggle {
    background: rgba(0, 0, 0, 0.2);
}
body.theme-forest-zen .tracker-toggle .toggle-btn.active,
body.theme-deep-ocean .tracker-toggle .toggle-btn.active,
body.theme-nebula-night .tracker-toggle .toggle-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}


/* Compact Logs and Dedicated Flowchart Layout Adaptations */
.console-panel-mini {
    width: 350px;
    background: var(--bg-panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0%; /* Fills the remaining vertical space under the phone */
    min-height: 0; /* Prevents overflow */
    transition: background 0.5s ease, border-color 0.5s ease;
}
.console-panel-mini .console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.console-panel-mini .console-header h3 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
}
.console-logs-mini {
    background: transparent !important; /* Fully transparent to inherit panel background like tracker-panel */
    border: none !important;             /* Remove internal card border */
    padding: 0 !important;              /* Tight layout alignment */
    flex-grow: 1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    line-height: 1.4;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-main) !important; /* Default theme text */
}
.console-logs-mini::-webkit-scrollbar {
    width: 4px;
}
.console-logs-mini::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.2);
    border-radius: 2px;
}

/* Explicit console log styling inside the card container - works on both light & dark backgrounds */
.console-logs-mini .log-entry {
    color: var(--text-main) !important;
}
.console-logs-mini .log-entry.system { color: var(--primary) !important; }
.console-logs-mini .log-entry.ble { color: var(--accent) !important; }
.console-logs-mini .log-entry.algo { color: #8b5cf6 !important; } /* Soft purple */
.console-logs-mini .log-entry.user { color: #10b981 !important; } /* Emerald green */
.console-logs-mini .log-entry.error { color: #ef4444 !important; } /* High visibility red */

.flowchart-panel {
    background: var(--bg-panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
    height: 100%;
    width: 100%;
    min-width: 0;   /* Key fix for CSS Grid content overflow */
    min-height: 0;  /* Key fix for CSS Grid content overflow */
    transition: background 0.5s ease, border-color 0.5s ease;
}
.flowchart-panel .panel-header {
    flex-shrink: 0;
}
.flowchart-panel .panel-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}
.flowchart-panel .panel-header p {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 16px;
}