:root {
    --hub-bg: #0f172a;
    --hub-text: #f8fafc;
    --hub-accent: #3b82f6;
    --hub-hover: #1e293b;
    --hub-border: #334155;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, sans-serif; }
body { display: flex; height: 100vh; overflow: hidden; background: var(--hub-bg); color: var(--hub-text); }
.hub-sidebar { width: 280px; display: flex; flex-direction: column; border-right: 1px solid var(--hub-border); }
.hub-header { padding: 24px; border-bottom: 1px solid var(--hub-border); }
.hub-header h2 { font-size: 1.5rem; letter-spacing: -0.5px; }
.hub-header p { font-size: 0.85rem; color: #94a3b8; margin-top: 4px; }
.app-list { list-style: none; padding: 16px 0; flex: 1; }
.app-item { padding: 16px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: 0.2s; }
.app-item:hover:not(.disabled) { background: var(--hub-hover); }
.app-item.active { border-left: 4px solid var(--hub-accent); background: var(--hub-hover); }
.app-item.disabled { opacity: 0.5; cursor: not-allowed; }
.hub-footer { padding: 16px 24px; border-top: 1px solid var(--hub-border); font-size: 0.85rem; }
.status-indicator::before { content: '●'; margin-right: 6px; color: #10b981; }
.hub-main { flex: 1; background: #ffffff; }
iframe { width: 100%; height: 100%; display: block; }