/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* LAYOUT */
.app { max-width: 1400px; margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--page-px); border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 100; background: var(--bg-primary); }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.logo { font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: -0.03em; color: var(--accent); }
.logo span { color: var(--text-muted); font-weight: 400; }
.connection-badge { font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: 0.04em; text-transform: uppercase; }
.badge-live { background: var(--green-dim); color: var(--green); }
.badge-offline { background: var(--red-dim); color: var(--red); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.theme-toggle { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 14px; display: grid; place-items: center; transition: all 0.15s; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* TABS */
.tab-nav { display: flex; gap: 0; padding: 0 var(--page-px); border-bottom: 1px solid var(--border-subtle); }
.tab-btn { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; text-transform: uppercase; letter-spacing: 0.06em; transition: all 0.15s; }
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-content { display: none; padding: 20px var(--page-px) 40px; }
.tab-content.active { display: block; }