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

html { font-size: 15px; }

body {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}

html[data-theme="light"] body {
    background:
        radial-gradient(1300px 720px at 5% -8%, hsl(212 100% 94% / 0.98), transparent 50%),
        radial-gradient(1000px 680px at 102% 2%, hsl(199 95% 92% / 0.85), transparent 54%),
        radial-gradient(900px 800px at 48% 108%, hsl(230 85% 93% / 0.75), transparent 48%),
        radial-gradient(700px 500px at 70% 35%, hsl(218 70% 96% / 0.55), transparent 58%),
        linear-gradient(165deg, hsl(213 45% 98.5%) 0%, hsl(214 38% 96.5%) 38%, hsl(220 32% 94%) 100%);
}

/* Fixed atmosphere stack (light): canvas → aurora → radial → gloss → sheen */
html[data-theme="light"] .app-atmosphere-canvas {
    z-index: -30 !important;
    background: linear-gradient(
        200deg,
        hsl(208 55% 99.5%) 0%,
        hsl(214 42% 97.5%) 35%,
        hsl(218 36% 95%) 70%,
        hsl(222 30% 93.5%) 100%
    );
}

html[data-theme="light"] .app-atmosphere-aurora {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -28 !important;
    background:
        radial-gradient(ellipse 90% 70% at 8% 20%, hsl(218 100% 70% / 0.22), transparent 55%),
        radial-gradient(ellipse 80% 60% at 95% 15%, hsl(195 95% 68% / 0.18), transparent 52%),
        radial-gradient(ellipse 70% 55% at 85% 88%, hsl(235 90% 72% / 0.14), transparent 50%),
        radial-gradient(ellipse 60% 45% at 12% 92%, hsl(204 100% 65% / 0.12), transparent 48%);
    opacity: 0.72;
}

html[data-theme="light"] .app-atmosphere-radial {
    z-index: -26 !important;
    background:
        radial-gradient(circle at 8% 10%, hsl(220 100% 65% / 0.18), transparent 38%),
        radial-gradient(circle at 94% 4%, hsl(198 90% 58% / 0.14), transparent 36%),
        radial-gradient(circle at 72% 98%, hsl(226 85% 62% / 0.12), transparent 42%),
        radial-gradient(circle at 40% 60%, hsl(214 80% 98% / 0.9), transparent 45%);
    mix-blend-mode: normal;
}

html[data-theme="light"] .app-atmosphere-glosswave {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -24 !important;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            hsl(210 100% 100% / 0) 38%,
            hsl(210 100% 100% / 0.45) 47%,
            hsl(220 90% 99% / 0.2) 52%,
            transparent 62%,
            transparent 100%
        ),
        linear-gradient(
            205deg,
            hsl(0 0% 100% / 0.08) 0%,
            transparent 35%,
            transparent 65%,
            hsl(214 100% 99% / 0.12) 100%
        );
    opacity: 0.85;
}

html[data-theme="light"] .app-atmosphere-sheen {
    z-index: -22 !important;
    opacity: 0.62 !important;
    background: linear-gradient(
        128deg,
        hsl(0 0% 100% / 0.75) 0%,
        hsl(214 95% 99% / 0.4) 28%,
        hsl(220 80% 98% / 0.15) 52%,
        hsl(210 100% 100% / 0) 68%
    );
}

html[data-theme="dark"] .app-atmosphere-aurora,
html[data-theme="dark"] .app-atmosphere-glosswave {
    display: none;
}

html[data-theme="dark"] .app-atmosphere-sheen {
    background: linear-gradient(
        130deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.06) 34%,
        rgba(255, 255, 255, 0) 60%
    );
}

html[data-theme="dark"] .app-atmosphere-radial {
    background:
        radial-gradient(circle at 14% 10%, rgba(126, 179, 255, 0.28), transparent 38%),
        radial-gradient(circle at 84% 88%, rgba(115, 183, 255, 0.2), transparent 44%);
}

/* ── App Shell ─────────────────────────────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    transition: transform var(--transition-base), width var(--transition-base);
}

html[data-theme="light"] .sidebar {
    background: linear-gradient(
        195deg,
        hsl(210 65% 100% / 0.72) 0%,
        hsl(214 50% 98.5% / 0.68) 35%,
        hsl(218 45% 97% / 0.65) 70%,
        hsl(222 38% 95.5% / 0.62) 100%
    );
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    box-shadow:
        24px 0 56px hsl(225 40% 22% / 0.09),
        inset -1px 0 0 hsl(0 0% 100% / 0.85),
        inset 0 0 0 1px hsl(210 80% 100% / 0.35);
    border-right-color: hsl(214 35% 88% / 0.75);
}

.sidebar.collapsed {
    width: 64px;
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-4) 0;
}

/* ── Main Shell ─────────────────────────────────────────── */
.main-shell {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--transition-base);
}

.main-shell.sidebar-collapsed {
    margin-left: 64px;
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 90;
    gap: var(--space-4);
}

html[data-theme="light"] .topbar {
    background: linear-gradient(
        180deg,
        hsl(210 70% 100% / 0.78) 0%,
        hsl(214 55% 99% / 0.65) 55%,
        hsl(218 48% 97.5% / 0.58) 100%
    );
    border-bottom: 1px solid hsl(214 30% 88% / 0.55);
    box-shadow:
        0 1px 0 hsl(0 0% 100% / 0.95) inset,
        0 16px 40px hsl(225 38% 20% / 0.08),
        0 0 0 1px hsl(210 90% 100% / 0.4) inset;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

html[data-theme="light"] .main-shell {
    position: relative;
    isolation: isolate;
}

html[data-theme="light"] .page-body {
    position: relative;
}

.topbar-left  { display: flex; align-items: center; gap: var(--space-3); }
.topbar-right { display: flex; align-items: center; gap: var(--space-2); }

/* ── Page Body ──────────────────────────────────────────── */
.page-body {
    flex: 1;
    padding: var(--space-6);
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ── Page Header ────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.page-header-left { display: flex; flex-direction: column; gap: 2px; }

.page-kicker {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.page-heading {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.page-subheading {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}

.page-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ── Grids ──────────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }

/* ── Stack helpers ──────────────────────────────────────── */
.stack-xs > * + * { margin-top: var(--space-1); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.mobile-open { transform: translateX(0); }
    .main-shell { margin-left: 0 !important; }
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .page-body { padding: var(--space-4); }
    .topbar { padding: 0 var(--space-4); }
}