:root {
  /* ============================================
     DASHBOARD TOKENS
     Extends builder tokens with dashboard-specific values
     ============================================ */

  /* Core colors - linked to builder tokens */
  --dashboard-bg-gradient-start: var(--color-bg-gradient-start, #232336);
  --dashboard-bg-gradient-end: var(--color-bg-gradient-end, #181824);
  --dashboard-surface: var(--color-surface, #ffffff);
  --dashboard-surface-light: var(--color-surface-light, #f4f3ff);
  --dashboard-surface-hover: var(--color-gray-50, #f8f8f8);
  --dashboard-border: var(--color-border-light, rgba(31, 33, 60, 0.12));
  --dashboard-border-strong: var(--color-border, rgba(31, 33, 60, 0.18));

  /* Text colors - linked to builder tokens */
  --dashboard-text: var(--color-ink, #1f2238);
  --dashboard-text-muted: var(--color-ink-muted, rgba(31, 33, 60, 0.72));
  --dashboard-text-hint: var(--color-ink-hint, rgba(31, 33, 60, 0.55));
  --dashboard-text-secondary: var(--color-gray-500, #64748b);

  /* Accent colors - linked to builder tokens */
  --dashboard-primary: var(--color-accent-primary, #5a4af2);
  --dashboard-primary-dark: var(--color-accent-tertiary, #5716c4);
  --dashboard-accent: var(--color-purple-vivid, #a855f7);
  --dashboard-accent-hover: var(--color-purple-vivid, #9333ea);

  /* Dark theme surfaces (sidebar, dark cards) */
  --dashboard-dark-card: #2a2a3e;
  --dashboard-dark-bg: #1e1e2e;
  --dashboard-dark-text: #f3f3ff;

  /* Interaction states */
  --dashboard-hover: rgba(0, 0, 0, 0.04);

  /* Spacing - uses builder tokens where applicable */
  --dashboard-gap: var(--space-lg, 16px);
  --dashboard-gap-lg: var(--space-2xl, 24px);
  --dashboard-section-gap: var(--space-4xl, 32px);

  /* Card styling */
  --dashboard-card-radius: var(--tile-radius, 20px);
  --dashboard-card-padding: 20px 24px;
  --dashboard-card-shadow: var(--shadow-sm, 0 4px 12px rgba(33, 26, 83, 0.06));
}

/* === Base Reset === */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
}

h1, h2, h3, p {
  margin: 0;
}

.hidden {
  display: none !important;
}

/* === Dashboard Page === */
body.dashboard-page {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--dashboard-bg-gradient-start) 0%, var(--dashboard-bg-gradient-end) 100%);
  background-attachment: fixed;
  color: var(--dashboard-text);
  font-family: var(--font-family, 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.dashboard-container {
  display: flex;
  align-items: flex-start;
  width: min(1536px, 96vw);
  margin: 24px auto;
  gap: 24px;
}

.dashboard-sidebar {
  position: sticky;
  top: calc(var(--app-header-height, 53px) + var(--dashboard-gap-lg));
  width: 220px;
  height: calc(100vh - var(--app-header-height, 53px) - var(--dashboard-gap-lg) - 48px);
  border-radius: 22px;
  padding: 18px 8px;
  background: linear-gradient(165deg, rgba(88, 85, 146, 0.32), rgba(29, 27, 44, 0.9));
  color: var(--dashboard-dark-text);
  box-shadow: 0 28px 52px rgba(0, 0, 0, 0.42);
  overflow-y: auto;
}

.dashboard-main {
  flex: 1;
  padding: 0 24px 24px;
  max-width: 1200px;
}

/* Mobile adjustments - see mobile.css for fixed panel architecture */

@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-sidebar {
    width: 72px;
  }
}

@media (min-width: 1024px) {
  .dashboard-mobile-tabs {
    display: none;
  }
}