| .shell { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| } | |
| .tab-bar { | |
| display: flex; | |
| align-items: center; | |
| background: var(--surface); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 0 0.5rem; | |
| } | |
| .tab { | |
| padding: 0.9rem 1.5rem; | |
| text-decoration: none; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| border-bottom: 3px solid transparent; | |
| transition: color 0.2s, border-color 0.2s; | |
| } | |
| .tab:hover { | |
| color: var(--text-primary); | |
| } | |
| .tab.active { | |
| border-bottom-color: var(--accent); | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| .logout { | |
| margin-left: auto; | |
| align-self: center; | |
| margin-right: 1rem; | |
| padding: 0.45rem 1.1rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background 0.2s, color 0.2s, border-color 0.2s; | |
| } | |
| .logout:hover { | |
| background: rgba(239, 68, 68, 0.12); | |
| border-color: var(--danger); | |
| color: var(--danger); | |
| } | |
| .content { | |
| flex: 1; | |
| padding: 2rem; | |
| } | |