:root {
            --primary: #1e1b4b; --accent: #4f46e5; --accent-hover: #4338ca;
            --bg-color: #f3f4f6; --card-bg: #ffffff;
            --text-main: #111827; --text-muted: #6b7280; --border: #d1d5db;
        }
        
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; -webkit-tap-highlight-color: transparent; }
        body, html { width: 100vw; height: 100vh; overflow: hidden; background: var(--bg-color); color: var(--text-main); }
        
        /* ------------------- DASHBOARD UI ------------------- */
        .app-container { display: flex; flex-direction: column; height: 100vh; width: 100vw; }
        
        /* Header */
        .header { background: var(--primary); color: #fff; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; z-index: 10; }
        .header-logo { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; }
        .header-logo .menu-toggle { font-size: 20px; cursor: pointer; color: #fff; padding: 2px 6px; border-radius: 4px; transition: background 0.2s; }
        .header-logo .menu-toggle:active { background: rgba(255,255,255,0.2); }
        .header-logo .app-icon { color: #818cf8; font-size: 20px; }
        .header-user { font-size: 10px; color: #cbd5e1; display: flex; flex-direction: column; align-items: flex-end; }
        .logout-btn { color: #f87171; text-decoration: none; font-size: 16px; margin-left: 12px; }

        /* Scrollable Menu (2 Lines, 20 Buttons) */
        .nav-scroll-container { 
            display: flex; 
            flex-direction: column; 
            gap: 1px; 
            background: var(--border); 
            overflow-x: auto; 
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
            scrollbar-width: thin; 
            max-height: 200px; /* Fits the 2 rows */
            transition: max-height 0.3s ease-in-out; /* Slide up animation */
        }
        .nav-scroll-container.collapsed {
            max-height: 0;
            border: none;
        }
        .nav-scroll-container::-webkit-scrollbar { height: 3px; }
        .nav-scroll-container::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
        
        .nav-row { 
            display: flex; 
            gap: 1px; 
            width: max-content; /* Forces items to stay in a line and triggers horizontal scroll */
        }
        
        .nav-btn { 
            background: var(--card-bg); 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            padding: 10px 2px; 
            text-decoration: none; 
            border: none; 
            cursor: pointer; 
            color: var(--text-main); 
            width: 20vw; /* Shows exactly 5 buttons per screen width on mobile */
            max-width: 90px; /* Prevents buttons from getting huge on tablets/desktops */
            height: 65px;
        }
        .nav-btn i { font-size: 18px; color: var(--accent); margin-bottom: 4px; }
        .nav-btn span { font-size: 9px; font-weight: 700; white-space: nowrap; }
        .nav-btn:active { background: #eef2ff; }

        /* Tabs Container (Chrome Style) */
        .tabs-container { display: flex; overflow-x: auto; background: #e2e8f0; padding: 6px 6px 0 6px; scrollbar-width: none; }
        .tabs-container::-webkit-scrollbar { display: none; }
        .tab { background: #cbd5e1; color: #475569; padding: 8px 14px; border-radius: 10px 10px 0 0; margin-right: 4px; font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; border: 1px solid #cbd5e1; border-bottom: none; transition: 0.2s; }
        .tab.active { background: var(--card-bg); color: var(--accent); border-color: var(--border); }
        .close-tab { font-size: 12px; color: #94a3b8; padding: 2px; }
        .tab.active .close-tab { color: #ef4444; }

        /* Iframes Container */
        .content-area { flex: 1; position: relative; background: var(--bg-color); width: 100%; }
        .tab-frame { width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0; display: none; background: var(--card-bg); }
        .tab-frame.active { display: block; }
        
        /* Dashboard Home Splash */
        .home-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; opacity: 0.4; }
        .home-splash i { font-size: 60px; margin-bottom: 10px; }