*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-14);
  line-height: var(--line-height-normal);
  min-height: 100vh;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-open {
  overflow: hidden;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

body.theme-transition,
body.theme-transition .app-shell,
body.theme-transition .sidebar,
body.theme-transition .topbar,
body.theme-transition .topbar-search,
body.theme-transition .user-chip,
body.theme-transition .nav-tab,
body.theme-transition .stat-card,
body.theme-transition .streak-card,
body.theme-transition .chart-card,
body.theme-transition .heatmap-wrap,
body.theme-transition .cmp-range-box,
body.theme-transition .hm-stat,
body.theme-transition .ex-card,
body.theme-transition .detail-modal,
body.theme-transition .pr-recent-card,
body.theme-transition .ses-list-panel,
body.theme-transition .ses-detail-panel,
body.theme-transition .cmp-table-wrap,
body.theme-transition .pr-table-wrap {
  transition:
    background-color var(--theme-transition),
    color var(--theme-transition),
    border-color var(--theme-transition),
    box-shadow var(--theme-transition),
    fill var(--theme-transition);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
}

.ambient-bg {
  position: fixed;
  inset: -20vh 0 0 0;
  background:
    radial-gradient(1200px 600px at 10% 10%, var(--ambient-1), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, var(--ambient-2), transparent 55%),
    radial-gradient(800px 500px at 50% 90%, var(--ambient-3), transparent 60%);
  z-index: 0;
  pointer-events: none;
}

#app { display: none; position: relative; z-index: 1; }
#upload-screen { position: relative; z-index: 1; }

/* Global scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }

/* Utility classes */
.u-hidden { display: none !important; }
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid { display: grid; }
.u-center { display: flex; align-items: center; justify-content: center; }
.u-between { display: flex; align-items: center; justify-content: space-between; }
.u-wrap { flex-wrap: wrap; }
.u-nowrap { white-space: nowrap; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-uppercase { text-transform: uppercase; letter-spacing: 0.08em; }

.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }

.u-m-0 { margin: var(--space-0); }
.u-m-1 { margin: var(--space-1); }
.u-m-2 { margin: var(--space-2); }
.u-m-3 { margin: var(--space-3); }
.u-m-4 { margin: var(--space-4); }
.u-m-5 { margin: var(--space-5); }
.u-m-6 { margin: var(--space-6); }

.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }

.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }

.u-p-1 { padding: var(--space-1); }
.u-p-2 { padding: var(--space-2); }
.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }
.u-p-5 { padding: var(--space-5); }
.u-p-6 { padding: var(--space-6); }

.u-radius-sm { border-radius: var(--radius-sm); }
.u-radius-md { border-radius: var(--radius-md); }
.u-radius-lg { border-radius: var(--radius-lg); }
.u-radius-xl { border-radius: var(--radius-xl); }
.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }
.u-shadow-lg { box-shadow: var(--shadow-lg); }