[v-cloak] { display: none; }
        body { background: #000; margin: 0; }

        .ui-solid { background: #000000; border-bottom: 1px solid rgba(255,255,255,0.1); }

        #loading-screen {
        position: fixed; inset: 0; background: #000000;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        z-index: 9999; transition: opacity 0.5s ease;
        }

        .avero-logo-loader {
            width: 80px; height: 80px; background: #000000; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 0 40px rgba(79, 70, 229, 0.2);
            animation: pulse 2s infinite ease-in-out;
            overflow: hidden; padding: 12px; box-sizing: border-box;
        }

        .avero-logo-loader img, .start-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

        .avero-start-btn {
            background: #000000 !important; border: 1px solid rgba(255,255,255,0.1) !important;
            display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4px !important;
        }
        .avero-start-btn:hover { border-color: var(--avero-accent) !important; box-shadow: 0 0 15px rgba(79, 70, 229, 0.3); }

        .sub-bar {
            height: 48px; background: #000000; border-bottom: 1px solid rgba(255,255,255,0.1);
            display: flex; align-items: center; gap: 12px; z-index: 90; padding: 0 16px;
        }

        .functions-scroll {
            display: flex; gap: 8px; overflow-x: auto; flex: 1; padding: 4px 0;
            scrollbar-width: 1px;
        }
        .functions-scroll::-webkit-scrollbar { display: none; }

        .mini-app-card {
            flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
            padding: 4px 12px; background: #111; border: 1px solid rgba(255,255,255,0.05);
            border-radius: 8px; cursor: pointer; transition: 0.2s;
        }
        .mini-app-card:hover { border-color: var(--avero-accent); }

        .hypr-tab {
            height: 28px; padding: 0 12px; border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex; align-items: center; gap: 8px;
            cursor: pointer; transition: all 0.3s;
            background: rgba(255, 255, 255, 0.03); margin: 0 4px;
        }
        .hypr-tab.active { border-color: var(--avero-accent); background: rgba(99, 102, 241, 0.15); }

        .desktop-grid { display: grid; gap: 6px; height: 100%; width: 100%; background: #000000; padding: 6px; box-sizing: border-box; }
        .grid-1 { grid-template-columns: 1fr; }
        .grid-2 { grid-template-columns: 1fr 1fr; }
        .grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
        .grid-3 > :first-child { grid-row: span 2; }

        .app-window { display: flex; flex-direction: column; background: #000; overflow: hidden; border-radius: 12px; border: 2px solid rgba(255,255,255,0.05); position: relative; }
        .app-window.focused { border-color: var(--avero-accent); }

        .focus-overlay { position: absolute; inset: 0; z-index: 50; cursor: pointer; }
        iframe { background: #fff; width: 100%; height: 100%; border: none; }

        .action-icon {
            opacity: 0.6; transition: all 0.2s; cursor: pointer;
            width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
            border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
        }
        .action-icon:hover { opacity: 1; border-color: var(--avero-accent); }

        .search-dropdown {
            position: absolute; top: 52px; left: 16px; width: 280px;
            background: #111; border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); z-index: 1000;
        }

        .search-small {
            color: black
        }