*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 500; color: var(--text-secondary); }

a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

.app-layout {
    display: flex;
    height: calc(100vh - var(--header-height));
}

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
}

.panel { display: none; }
.panel.active { display: block; }

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

.flex-row { display: flex; align-items: center; gap: var(--space-md); }
.flex-col { display: flex; flex-direction: column; gap: var(--space-sm); }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.15rem; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-green { background: rgba(34,197,94,.15); color: var(--accent-green); }
.badge-amber { background: rgba(245,158,11,.15); color: var(--accent-amber); }
.badge-red { background: rgba(239,68,68,.15); color: var(--accent-red); }
.badge-blue { background: rgba(59,130,246,.15); color: var(--accent-blue); }
.badge-purple { background: rgba(168,85,247,.15); color: var(--accent-purple); }

.stat-value { font-size: 2rem; font-weight: 700; font-family: var(--font-mono); }
.stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.hidden { display: none !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }