/* •••••••••••••••••••••••••••••••••••••••••••
           HYPERION DESIGN SYSTEM - CSS Variables
           ••••••••••••••••••••••••••••••••••••••••••• */
        :root {
            --bg-primary: #06060b;
            --bg-secondary: #0c0c14;
            --bg-card: rgba(14, 14, 22, 0.75);
            --bg-card-hover: rgba(20, 20, 32, 0.85);
            --border: rgba(255,255,255,0.06);
            --border-hover: rgba(255,255,255,0.12);
            --accent: #00d4aa;
            --accent-glow: rgba(0, 212, 170, 0.15);
            --accent-dark: #00a585;
            --text-primary: #e8e8ed;
            --text-secondary: #8888a0;
            --text-muted: #55556a;
            --danger: #ff4466;
            --warning: #ffaa33;
            --docker: #2496ed;
            --font-display: 'Outfit', sans-serif;
            --font-body: 'Sora', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --radius: 16px;
            --radius-sm: 10px;
            --radius-xs: 6px;
            --glass-blur: 24px;
            --sidebar-width: 340px;
            --wallpaper-opacity: 0.15;
            --wallpaper-blur: 0px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        *::before, *::after { box-sizing: border-box; }

        html, body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: var(--font-body);
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        /* App root = full viewport column */
        #app {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* Top section (header + main) takes all remaining space */
        .hyp-viewport {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 10px 16px 0;
            max-width: 1920px;
            margin: 0 auto;
            width: 100%;
        }

        /* Header shrinks to content */
        .hyp-header-zone {
            flex-shrink: 0;
        }

        /* Main area = bookmarks + sidebar, fills remaining */
        .hyp-main {
            flex: 1;
            min-height: 0;
            display: flex;
            gap: 16px;
            overflow: hidden;
        }

        /* Bookmarks column scrolls internally */
        .hyp-bookmarks {
            flex: 1;
            min-width: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 4px;
            padding-bottom: 12px;
        }

        /* Sidebar: fixed width, never shrinks, scrolls internally */
        .hyp-sidebar {
            width: 340px;
            flex-shrink: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 12px;
        }
        .hyp-sidebar::-webkit-scrollbar { width: 5px; }
        .hyp-sidebar::-webkit-scrollbar-track { background: transparent; }
        .hyp-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

        /* ••••••• TOPBAR ••••••• */
        .sys-topbar a:hover span { text-decoration: underline; }
        @media (max-width: 1280px) {
            .sys-topbar { flex-wrap: wrap !important; }
        }
        @media (max-width: 640px) {
            .sys-topbar > div:first-child > span:nth-child(n+4) { display: none !important; }
        }

        /* ••••••• WALLPAPER ••••••• */
        #wallpaper-layer {
            position: fixed; inset: 0; z-index: 0;
            background-size: cover; background-position: center;
            opacity: var(--wallpaper-opacity);
            filter: blur(var(--wallpaper-blur));
            transition: opacity 0.8s ease, filter 0.8s ease;
        }

        /* ••••••• AMBIENT BACKGROUND ••••••• */
        .ambient-bg {
            position: fixed; inset: 0; z-index: 1; pointer-events: none;
        }
        .ambient-bg::before {
            content: ''; position: absolute; inset: 0;
            background: 
                radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,212,170,0.04) 0%, transparent 70%),
                radial-gradient(ellipse 60% 80% at 80% 90%, rgba(36,150,237,0.03) 0%, transparent 70%),
                radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,0.3) 0%, transparent 100%);
        }
        .ambient-bg::after {
            content: ''; position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
            background-size: 32px 32px;
        }

        /* ••••••• PARTICLE CANVAS ••••••• */
        #particles-canvas {
            position: fixed; inset: 0; z-index: 1; pointer-events: none;
            opacity: 0.7;
        }

        /* ••••••• GLASS MORPHISM ••••••• */
        .glass {
            background: var(--bg-card);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border: 1px solid var(--border);
            border-radius: var(--radius);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .glass:hover {
            border-color: var(--border-hover);
            background: var(--bg-card-hover);
        }
        .glass-static {
            background: var(--bg-card);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

        /* ••••••• SCROLLBAR ••••••• */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

        /* ••••••• ANIMATIONS ••••••• */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes pulse-glow {
            0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--accent); }
            50% { opacity: 0.6; box-shadow: 0 0 8px var(--accent); }
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-8px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes ring-progress {
            from { stroke-dashoffset: var(--ring-circumference); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-4px); }
        }

        .animate-in { animation: fadeInUp 0.5s ease-out both; }
        .animate-fade { animation: fadeIn 0.4s ease-out both; }
        body.loaded .animate-in { animation: none; }

        /* ••••••• LIVE INDICATOR ••••••• */
        .live-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: #00e5b0;
            animation: pulse-glow 2s ease-in-out infinite;
        }
        .live-dot.offline { background: var(--danger); animation: none; }

        /* ••••••• SORTABLE ••••••• */
        .sortable-ghost { opacity: 0.3; }
        .sortable-chosen { 
            transform: scale(1.02); 
            box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,212,170,0.2);
            z-index: 100;
        }
        .sortable-drag { opacity: 0.9; }

        /* ••••••• MASONRY LAYOUT ••••••• */
        .bookmark-group { 
            min-width: 0; 
            overflow: hidden;
            break-inside: avoid;
            -webkit-column-break-inside: avoid;
            margin-bottom: 12px;
            padding: 16px;
        }
        .bookmarks-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
            gap: 8px;
        }

        /* ••••••• BOOKMARK ITEM ••••••• */
        .bookmark-link {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 16px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, transparent 100%);
            border: 1px solid rgba(255,255,255,0.03);
            transition: all 0.25s ease;
            text-decoration: none; color: inherit;
            position: relative; overflow: hidden;
            min-height: 62px;
        }
        .bookmark-link::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 60%);
            opacity: 0; transition: opacity 0.3s ease;
        }
        .bookmark-link:hover {
            border-color: rgba(0,212,170,0.15);
            background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
            transform: translateY(-1px);
        }
        .bookmark-link:hover::before { opacity: 1; }
        .bookmark-link:hover .bookmark-icon { transform: scale(1.08); }

        .bookmark-icon {
            width: 38px; height: 38px; border-radius: 10px;
            background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; transition: transform 0.25s ease;
            overflow: hidden;
        }
        .bookmark-icon img { width: 24px; height: 24px; object-fit: contain; }
        .bookmark-icon .emoji { font-size: 19px; line-height: 1; }

        .bookmark-text {
            flex: 1; min-width: 0;
            display: flex; flex-direction: column;
            justify-content: center; gap: 2px;
            position: relative; z-index: 1;
        }
        .bookmark-name {
            font-size: 13px; font-weight: 600;
            color: var(--text-primary);
            line-height: 1.3;
            word-break: break-word;
        }
        .bookmark-desc {
            font-size: 11px; font-weight: 400;
            color: var(--text-muted);
            line-height: 1.3;
            word-break: break-word;
        }

        /* ••••••• STAT CARDS ••••••• */
        .stat-card {
            padding: 14px 16px;
            border-radius: var(--radius);
            background: var(--bg-card);
            backdrop-filter: blur(var(--glass-blur));
            border: 1px solid var(--border);
            position: relative; overflow: hidden;
        }
        .stat-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            opacity: 0; transition: opacity 0.3s ease;
        }
        .stat-card:hover::before { opacity: 1; }

        .stat-label {
            font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
            text-transform: uppercase; color: var(--text-muted);
            margin-bottom: 6px;
        }
        .stat-value {
            font-family: var(--font-display);
            font-size: 26px; font-weight: 700;
            color: white; line-height: 1;
        }
        .stat-sub {
            font-size: 10px; color: var(--text-secondary);
            margin-top: 4px; font-family: var(--font-mono);
        }

        /* ••••••• PROGRESS BAR ••••••• */
        .progress-track {
            height: 5px; border-radius: 10px;
            background: rgba(255,255,255,0.06);
            overflow: hidden; margin-top: 8px;
        }
        .progress-fill {
            height: 100%; border-radius: 10px;
            background: var(--accent);
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .progress-fill::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
        }
        .progress-fill.warn { background: var(--warning); }
        .progress-fill.danger { background: var(--danger); }

        /* ••••••• SEARCH BAR ••••••• */
        .search-container {
            position: relative;
            max-width: 600px; margin: 0 auto 20px;
        }
        .search-input {
            width: 100%; padding: 14px 20px 14px 48px;
            border-radius: 20px;
            background: rgba(14, 14, 22, 0.6);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.06);
            color: var(--text-primary);
            font-family: var(--font-body); font-size: 14px;
            outline: none;
            transition: all 0.3s ease;
        }
        .search-input:focus {
            border-color: rgba(0,212,170,0.3);
            box-shadow: 0 0 0 3px rgba(0,212,170,0.06), 0 8px 32px rgba(0,0,0,0.3);
            background: rgba(14, 14, 22, 0.85);
        }
        .search-input::placeholder { color: var(--text-muted); }
        .search-icon {
            position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
            color: var(--text-muted); font-size: 16px;
            transition: color 0.3s ease;
        }
        .search-input:focus + .search-icon, .search-input:focus ~ .search-icon { color: var(--accent); }

        /* ••••••• GREETING ••••••• */
        .greeting-section {
            text-align: center; padding: 6px 0 8px;
        }
        .greeting-time {
            font-family: var(--font-display);
            font-size: 56px; font-weight: 800;
            letter-spacing: -2px;
            background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            line-height: 1.1;
        }
        .greeting-text {
            font-size: 18px; font-weight: 400;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .greeting-date {
            font-size: 12px; color: var(--text-muted);
            font-family: var(--font-mono);
            margin-top: 6px;
        }

        /* ••••••• WEATHER WIDGET ••••••• */
        .weather-pill {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 6px 14px; border-radius: 20px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            font-size: 12px; color: var(--text-secondary);
            margin-top: 10px;
        }

        /* ••••••• DISK ROW ••••••• */
        .disk-row {
            padding: 10px 12px;
            border-radius: var(--radius-sm);
            background: rgba(255,255,255,0.02);
            border: 1px solid transparent;
            transition: all 0.2s ease;
        }
        .disk-row:hover {
            background: rgba(255,255,255,0.04);
            border-color: rgba(255,255,255,0.06);
        }

        /* ••••••• CONTAINER ITEM ••••••• */
        .container-item {
            display: flex; align-items: center; gap: 10px;
            padding: 7px 10px;
            border-radius: var(--radius-xs);
            transition: background 0.2s ease;
        }
        .container-item:hover { background: rgba(255,255,255,0.03); }

        /* ••••••• MODAL ••••••• */
        .modal-overlay {
            position: fixed; inset: 0; z-index: 1000;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            display: flex; align-items: center; justify-content: center;
            padding: 16px;
            animation: fadeIn 0.2s ease;
        }
        .modal-content {
            background: #0e0e16;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 20px;
            padding: 28px;
            width: 100%; max-width: 480px;
            max-height: 85vh; overflow-y: auto;
            animation: slideIn 0.3s ease;
            box-shadow: 0 40px 100px rgba(0,0,0,0.6);
        }
        .modal-title {
            font-family: var(--font-display);
            font-size: 20px; font-weight: 700;
            color: white; margin-bottom: 20px;
        }

        /* ••••••• FORM ELEMENTS ••••••• */
        .input-field {
            width: 100%; padding: 10px 14px;
            border-radius: var(--radius-sm);
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-primary);
            font-family: var(--font-body); font-size: 13px;
            outline: none;
            transition: all 0.2s ease;
        }
        .input-field:focus {
            border-color: rgba(0,212,170,0.4);
            box-shadow: 0 0 0 3px rgba(0,212,170,0.08);
        }
        .input-field::placeholder { color: var(--text-muted); }

        .input-label {
            display: block; font-size: 11px; font-weight: 600;
            color: var(--text-secondary); margin-bottom: 6px;
            text-transform: uppercase; letter-spacing: 0.5px;
        }

        .btn {
            padding: 10px 20px; border-radius: var(--radius-sm);
            font-family: var(--font-body); font-size: 13px; font-weight: 600;
            border: none; cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        }
        .btn-primary {
            background: var(--accent); color: #000;
        }
        .btn-primary:hover { background: #00e5b8; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,212,170,0.3); }
        .btn-ghost {
            background: rgba(255,255,255,0.04); color: var(--text-secondary);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .btn-ghost:hover { background: rgba(255,255,255,0.08); color: white; }
        .btn-danger {
            background: rgba(255,68,102,0.1); color: var(--danger);
            border: 1px solid rgba(255,68,102,0.15);
        }
        .btn-danger:hover { background: rgba(255,68,102,0.2); }

        /* ••••••• TABS ••••••• */
        .tabs-bar {
            display: flex; gap: 2px; padding: 3px;
            background: rgba(255,255,255,0.03);
            border-radius: 12px; margin-bottom: 20px;
        }
        .tab-btn {
            flex: 1; padding: 8px 12px; border-radius: 10px;
            font-size: 12px; font-weight: 500;
            color: var(--text-muted); background: transparent;
            border: none; cursor: pointer;
            transition: all 0.2s ease;
        }
        .tab-btn.active {
            background: rgba(255,255,255,0.08);
            color: white;
        }
        .tab-btn:hover:not(.active) { color: var(--text-secondary); }

        /* ••••••• TOGGLE SWITCH ••••••• */
        .toggle-container { display: flex; align-items: center; justify-content: space-between; }
        .toggle-switch {
            width: 40px; height: 22px; border-radius: 11px;
            background: rgba(255,255,255,0.1);
            position: relative; cursor: pointer;
            transition: background 0.2s ease;
        }
        .toggle-switch.active { background: var(--accent); }
        .toggle-switch::after {
            content: ''; position: absolute;
            width: 16px; height: 16px; border-radius: 50%;
            background: white; top: 3px; left: 3px;
            transition: transform 0.2s ease;
        }
        .toggle-switch.active::after { transform: translateX(18px); }

        /* ••••••• SLIDER ••••••• */
        .range-slider {
            -webkit-appearance: none; width: 100%;
            height: 4px; border-radius: 2px;
            background: rgba(255,255,255,0.1);
            outline: none;
        }
        .range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px; height: 16px; border-radius: 50%;
            background: var(--accent); cursor: pointer;
            box-shadow: 0 0 8px rgba(0,212,170,0.3);
        }

        /* ••••••• AVATAR ••••••• */
        .avatar {
            width: 40px; height: 40px; border-radius: 12px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--docker) 100%);
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-display); font-weight: 700; font-size: 16px;
            color: white; flex-shrink: 0;
            overflow: hidden;
        }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }

        /* ••••••• COLOR SWATCH ••••••• */
        .color-grid {
            display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
        }
        .color-swatch {
            width: 100%; aspect-ratio: 1; border-radius: 10px;
            cursor: pointer; border: 2px solid transparent;
            transition: all 0.2s ease;
        }
        .color-swatch:hover { transform: scale(1.1); }
        .color-swatch.active { border-color: white; box-shadow: 0 0 12px var(--accent-glow); }

        /* Sidebar panels */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .sidebar .glass-static {
            padding: 14px 16px !important;
        }
        .sidebar .sb-panel {
            position: relative;
        }
        .sidebar .sb-head:hover svg {
            color: white !important;
        }
        .sidebar .disk-row {
            padding: 8px 10px;
            border-radius: 6px;
            background: rgba(255,255,255,0.02);
        }
        .sidebar .container-item {
            padding: 5px 8px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        #calendar-widget table { font-size: 10px !important; }
        #calendar-widget td, #calendar-widget th { padding: 2px !important; }
        
        /* Emby Latest strip */
        #emby-latest::-webkit-scrollbar { height: 0; }
        #emby-latest { -ms-overflow-style: none; }
        

        /* ••••••• RESPONSIVE ••••••• */
        
        /* Tablet / small laptop: sidebar below bookmarks */
        @media (max-width: 1280px) {
            html, body {
                height: auto !important;
                overflow: auto !important;
            }
            #app {
                height: auto !important;
                overflow: visible !important;
            }
            .hyp-viewport {
                overflow: visible !important;
            }
            .hyp-main {
                flex-direction: column;
                overflow: visible !important;
                min-height: auto;
            }
            .hyp-bookmarks {
                width: 100% !important;
                flex: none !important;
                overflow: visible !important;
                order: 1;
            }
            .hyp-sidebar {
                width: 100% !important;
                flex: none !important;
                overflow: visible !important;
                order: 2;
            }
            .sidebar { 
                display: grid !important; 
                grid-template-columns: 1fr 1fr !important; 
                gap: 12px !important;
            }
            .hyp-bottom-bar { display: none !important; }
        }
        
        /* Tablet portrait */
        @media (max-width: 900px) {
            :root { --bm-cols: 2 !important; }
            .header-bar { 
                flex-wrap: wrap; 
                gap: 8px !important;
                padding: 0 !important;
            }
            .greeting-time { 
                font-size: 48px !important; 
                letter-spacing: -1px; 
            }
            .greeting-text { font-size: 15px; }
            .greeting-section { margin-bottom: 14px !important; }
            #groups-container { column-count: 2 !important; }
            .glass-static { padding: 12px !important; }
        }
        
        /* Mobile */
        @media (max-width: 640px) {
            :root { --bm-cols: 1 !important; }
            body { font-size: 13px; }
            
            .hyp-viewport { padding: 8px 10px 0; }
            .hyp-bottom-bar { display: none !important; }
            
            .header-bar { 
                flex-wrap: nowrap !important;
                justify-content: space-between !important;
            }
            .header-bar > div:first-child { gap: 8px !important; }
            .header-bar .avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; }
            .greeting-time { font-size: 40px !important; }
            .greeting-text { font-size: 14px; }
            .greeting-date { font-size: 11px; }
            .search-container { max-width: 100% !important; }
            .search-input { padding: 12px 14px 12px 40px !important; font-size: 13px !important; }
            
            /* Sidebar: single column on mobile */
            .sidebar { 
                grid-template-columns: 1fr !important; 
                gap: 10px !important;
            }
            
            /* Bookmarks: single column of groups */
            #groups-container { column-count: 1 !important; }
            .bookmark-group { padding: 12px !important; margin-bottom: 10px !important; }
            
            /* Bookmark tiles: still 2 columns inside group, but smaller */
            .bookmarks-list { gap: 3px !important; }
            .bookmark-link { padding: 6px 8px !important; gap: 6px !important; }
            .bookmark-icon { width: 24px !important; height: 24px !important; }
            .bookmark-icon img { width: 15px !important; height: 15px !important; }
            .bookmark-icon .emoji { font-size: 13px !important; }
            .bookmark-name { font-size: 10px !important; }
            
            /* Modals full-screen on mobile */
            .modal-overlay { padding: 0 !important; }
            .modal-content { 
                padding: 16px !important; 
                max-width: 100% !important; 
                width: 100vw !important; 
                max-height: 100vh !important;
                border-radius: 0 !important; 
                margin: 0 !important;
            }
            .tabs-bar { 
                flex-wrap: wrap; 
                gap: 4px !important;
            }
            .tab-btn { font-size: 10px !important; padding: 5px 8px !important; }
            .modal-title { font-size: 15px !important; }
            
            /* Now Playing tiles stack on mobile */
            #emby-now-playing { 
                flex-direction: column !important;
            }
            #emby-now-playing > div {
                min-width: 0 !important;
                max-width: 100% !important;
            }
            
            /* System panel: single column on mobile */
            #system-panel > div:first-child { 
                grid-template-columns: 1fr !important;
                gap: 8px !important;
            }
            
            /* Calendar smaller */
            #calendar-widget { font-size: 11px; }
        }
        
        /* Small mobile (iPhone SE etc.) */
        @media (max-width: 400px) {
            .greeting-time { font-size: 34px !important; }
            .bookmark-name { font-size: 9px !important; }
            .glass-static { padding: 10px !important; }
            .bookmark-group { padding: 10px !important; }
        }


        /* ••••••• GRAFANA PANELS ••••••• */
        .grafana-section iframe {
            background: transparent;
        }
        @media (max-width: 900px) {
            #grafana-panels {
                grid-template-columns: 1fr !important;
            }
        }
        body.mobile-mode .grafana-section { display: none !important; }

        /* ••••••• MOBILE MODE (/mobile) ••••••• */
        body.mobile-mode {
            height: auto !important;
            overflow: auto !important;
        }
        body.mobile-mode #app {
            height: auto !important;
            overflow: visible !important;
        }
        body.mobile-mode .hyp-viewport {
            overflow: visible !important;
            padding: 8px 12px 0;
        }
        body.mobile-mode .hyp-main {
            flex-direction: column;
            overflow: visible !important;
        }
        body.mobile-mode .hyp-bookmarks {
            width: 100% !important;
            flex: none !important;
            overflow: visible !important;
            order: 1;
        }
        body.mobile-mode .hyp-sidebar {
            width: 100% !important;
            flex: none !important;
            overflow: visible !important;
            order: 2;
        }
        body.mobile-mode .hyp-bottom-bar { display: none !important; }
        body.mobile-mode .greeting-section { margin-bottom: 10px !important; }
        body.mobile-mode .greeting-time { font-size: 36px !important; }
        body.mobile-mode .greeting-text { font-size: 13px; }
        body.mobile-mode .search-container { max-width: 100% !important; }
        body.mobile-mode #groups-container { column-count: 1 !important; }
        body.mobile-mode .bookmark-group { padding: 10px !important; margin-bottom: 8px !important; }
        body.mobile-mode .bookmark-group > div:first-child { margin-bottom: 8px !important; padding-bottom: 6px !important; }
        body.mobile-mode .bookmarks-list { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
        body.mobile-mode .bookmark-link {
            flex-direction: column !important;
            align-items: center !important;
            padding: 10px 4px 8px !important;
            gap: 6px !important;
            min-height: auto !important;
            text-align: center;
        }
        body.mobile-mode .bookmark-icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
        body.mobile-mode .bookmark-icon img { width: 26px !important; height: 26px !important; }
        body.mobile-mode .bookmark-icon .emoji { font-size: 22px !important; }
        body.mobile-mode .bookmark-text { align-items: center; width: 100%; }
        body.mobile-mode .bookmark-name {
            font-size: 10px !important; font-weight: 500 !important; text-align: center;
            white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
            max-width: 100%; word-break: normal !important;
        }
        body.mobile-mode .bookmark-desc { display: none !important; }
        body.mobile-mode [data-bookmark-id] > div:last-child:not(:first-child) { display: none !important; }
        body.mobile-mode .sidebar { display: flex !important; flex-direction: column !important; gap: 8px !important; }
        body.mobile-mode .glass-static { padding: 10px 12px !important; }

        /* ••••••• LIGHT THEME ••••••• */
        body.theme-light {
            --bg-primary: #f0f2f5;
            --bg-secondary: #e4e7ec;
            --bg-card: rgba(255, 255, 255, 0.85);
            --bg-card-hover: rgba(255, 255, 255, 0.95);
            --border: rgba(0,0,0,0.08);
            --border-hover: rgba(0,0,0,0.15);
            --accent-glow: rgba(0, 212, 170, 0.12);
            --text-primary: #1a1a2e;
            --text-secondary: #5a5a7a;
            --text-muted: #8888a0;
            --glass-blur: 16px;
        }
        body.theme-light .ambient-bg::before {
            background: 
                radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,212,170,0.06) 0%, transparent 70%),
                radial-gradient(ellipse 60% 80% at 80% 90%, rgba(36,150,237,0.04) 0%, transparent 70%);
        }
        body.theme-light .ambient-bg::after { opacity: 0.3; }
        body.theme-light .stat-card { background: var(--bg-card); }
        body.theme-light .stat-value { color: var(--text-primary); }
        body.theme-light .glass-static { background: var(--bg-card); }
        body.theme-light .modal-content { background: #fff; border-color: rgba(0,0,0,0.1); }
        body.theme-light .input-field { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: var(--text-primary); }
        body.theme-light .input-field::placeholder { color: var(--text-muted); }
        body.theme-light .input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,212,170,0.1); }
        body.theme-light .btn-ghost { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: var(--text-secondary); }
        body.theme-light .btn-ghost:hover { background: rgba(0,0,0,0.08); color: var(--text-primary); }
        body.theme-light .tab-btn { color: var(--text-muted); }
        body.theme-light .tab-btn.active { background: rgba(0,0,0,0.06); color: var(--text-primary); }
        body.theme-light .tabs-bar { background: rgba(0,0,0,0.04); }
        body.theme-light .search-input { background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.1); }
        body.theme-light .search-input:focus { background: #fff; }
        body.theme-light .greeting-time { background: linear-gradient(135deg, #1a1a2e, #3a3a5e); -webkit-background-clip: text; }
        body.theme-light .bookmark-link { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.05); }
        body.theme-light .bookmark-link:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,212,170,0.2); }
        body.theme-light .bookmark-name { color: var(--text-primary); }
        body.theme-light .disk-row { background: rgba(0,0,0,0.02); }
        body.theme-light .disk-row:hover { background: rgba(0,0,0,0.04); }
        body.theme-light .container-item:hover { background: rgba(0,0,0,0.03); }
        body.theme-light .progress-track { background: rgba(0,0,0,0.08); }
        body.theme-light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
        body.theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
        body.theme-light #particles-canvas { opacity: 0.3; }

        /* ••••••• EDIT MODE GLOW ••••••• */
        .edit-mode-active .bookmark-group {
            border: 1px dashed rgba(0,212,170,0.2);
        }

        /* ••••••• NOTIFICATION BADGE ••••••• */
        .notif-badge {
            position: absolute; top: -2px; right: -2px;
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--danger);
            border: 2px solid var(--bg-primary);
        }

        /* ••••••• TEMP COLORS ••••••• */
        .temp-cool { color: #60a5fa; }
        .temp-ok { color: #34d399; }
        .temp-warm { color: #fbbf24; }
        .temp-hot { color: #f87171; }
        .temp-bg-cool { background: rgba(96,165,250,0.12); }
        .temp-bg-ok { background: rgba(52,211,153,0.12); }
        .temp-bg-warm { background: rgba(251,191,36,0.12); }
        .temp-bg-hot { background: rgba(248,113,113,0.12); }