.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-app); } .header { height: var(--topbar-height); padding: 0 var(--space-lg); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface); flex-shrink: 0; box-shadow: var(--shadow-sm); z-index: 5; } .title { font-size: 14px; font-weight: 500; color: var(--text-secondary); } .status { display: flex; align-items: center; gap: var(--space-xs); font-size: 13px; font-weight: 500; transition: all 200ms ease-in-out; } .statusDot { width: 6px; height: 6px; border-radius: var(--radius-full); transition: background-color 200ms ease-in-out; } .status.connected { color: var(--color-success); } .status.connected .statusDot { background-color: var(--color-success); box-shadow: 0 0 8px var(--color-success); } .status.disconnected { color: var(--text-tertiary); } .status.disconnected .statusDot { background-color: var(--border-medium); } .headerRight { display: flex; align-items: center; gap: var(--space-md); } .btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--space-md); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); border: 1px solid var(--border-medium); background: var(--bg-surface); color: var(--text-secondary); outline: none; } .btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); border-color: var(--border-medium); } .btn:active { background: var(--border-light); } .content { flex: 1; overflow: hidden; position: relative; background: var(--bg-app); } .loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-tertiary); font-size: 14px; } .empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-tertiary); font-size: 14px; }