html { font-size: 26px }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

body {
  background: var(--bg); color: var(--text);
  font-family: 'DM Mono', monospace;
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}

.app-shell {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}

main {
  flex: 1; overflow-y: auto;
  padding: 20px 28px; min-width: 0;
  max-width: 1600px; margin: 0 auto;
}

.tab-panel { display: none }
.tab-panel.active { display: block }

.hidden { display: none !important }

.empty {
  text-align: center; padding: 36px 20px;
  color: var(--muted); font-size: .71rem; line-height: 1.8;
}
.empty .icon { font-size: 1.5rem; display: block; margin-bottom: 8px; opacity: .4 }

::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px }

:root.light ::-webkit-scrollbar-track { background: var(--bg) }
:root.light ::-webkit-scrollbar-thumb { background: var(--border) }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: translateY(0) } }