/* ============================================================
   GLOBAL STYLES - X RPL 2 Website V2
   Design System: Swiss Brutalist Monochromatic
   Reference: DESIGN.md  brutalist Swiss grid in graphite and chalk
   ============================================================ */

/* ===== CSS VARIABLES  Design Tokens ===== */
:root {
  /* Colors  strictly achromatic */
  --color-graphite:   #0a0a0a;
  --color-pure-black: #000000;
  --color-carbon:     #171717;
  --color-concrete:   #737373;
  --color-ash:        #a1a1a1;
  --color-smoke:      #b9b9b9;
  --color-hairline:   #e5e5e5;
  --color-mist:       #f2f2f2;
  --color-chalk:      #ffffff;

  /* Semantic aliases (used throughout) */
  --text-primary:    #0a0a0a;
  --text-secondary:  #737373;
  --text-disabled:   #a1a1a1;
  --bg-canvas:       #ffffff;
  --bg-card:         #ffffff;
  --bg-muted:        #f2f2f2;
  --bg-inverted:     #171717;
  --border-hairline: #e5e5e5;
  --border-emphasis: #0a0a0a;
  --border-disabled: #a1a1a1;

  /* Legacy variable aliases  kept so existing inline styles don't break */
  --primary:                    #0a0a0a;
  --on-primary:                 #ffffff;
  --primary-container:          #171717;
  --on-primary-container:       #ffffff;
  --secondary:                  #0a0a0a;
  --on-secondary:               #ffffff;
  --secondary-container:        #e5e5e5;
  --on-secondary-container:     #0a0a0a;
  --tertiary:                   #0a0a0a;
  --on-tertiary:                #ffffff;
  --tertiary-container:         #e5e5e5;
  --on-tertiary-container:      #0a0a0a;
  --error:                      #0a0a0a;
  --on-error:                   #ffffff;
  --error-container:            #f2f2f2;
  --on-error-container:         #0a0a0a;
  --background:                 #ffffff;
  --on-background:              #0a0a0a;
  --surface:                    #ffffff;
  --on-surface:                 #0a0a0a;
  --surface-variant:            #f2f2f2;
  --on-surface-variant:         #737373;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #f2f2f2;
  --surface-container:          #f2f2f2;
  --surface-container-high:     #e5e5e5;
  --surface-container-highest:  #e5e5e5;
  --outline:                    #737373;
  --outline-variant:            #e5e5e5;

  /* Typography */
  --font-geist:      'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  --font-body:       var(--font-geist);

  /* Type Scale */
  --text-caption:            12px;
  --leading-caption:         1.5;
  --text-body:               14px;
  --leading-body:            1.43;
  --text-subheading:         18px;
  --leading-subheading:      1.5;
  --tracking-subheading:     -0.45px;
  --text-display:            48px;
  --leading-display:         1.1;
  --tracking-display:        -2.4px;

  /* Weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-4:  4px;
  --spacing-5:  5px;
  --spacing-6:  6px;
  --spacing-8:  8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-80: 80px;
  --spacing-83: 83px;

  /* Legacy spacing */
  --base:             8px;
  --gutter:           24px;
  --margin-mobile:    16px;
  --margin-desktop:   40px;
  --container-max:    1200px;

  /* Border Radius  exact scale, no deviation */
  --radius-sm:      4px;
  --radius-md:      4px;
  --radius-lg:      10px;
  --radius-xl:      14px;
  --radius-2xl:     14px;
  --radius-3xl:     26px;
  --radius-full:    9999px;
  --radius-nav:     10px;
  --radius-cards:   14px;
  --radius-pills:   9999px;
  --radius-badges:  26px;
  --radius-inputs:  10px;
  --radius-buttons: 10px;

  /* Shadows  border-first, almost no elevation */
  --shadow-subtle:   lab(100 0 0) 0px 0px 0px 2px;
  --shadow-subtle-2: oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px;
  --shadow-sm:       oklab(0.145 0 0 / 0.06) 0px 0px 0px 1px;
  --shadow-md:       oklab(0.145 0 0 / 0.08) 0px 0px 0px 1px;
  --shadow-lg:       oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px;
  --shadow-xl:       oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px;
  --shadow-2xl:      oklab(0.145 0 0 / 0.12) 0px 0px 0px 1px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap:    48px;
  --card-padding:   16px;
  --element-gap:    8px;

  /* Surfaces */
  --surface-canvas:           #ffffff;
  --surface-card:             #ffffff;
  --surface-muted-surface:    #f2f2f2;
  --surface-inverted-surface: #171717;
}

/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:not(html):not(body) {
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-geist);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-geist);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

.display-lg {
  font-size: var(--text-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.headline-lg {
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.headline-md {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

.body-lg {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--text-secondary);
}

.body-md {
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
}

.label-md {
  font-family: var(--font-geist);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  letter-spacing: 0;
}

.code-sm {
  font-family: var(--font-geist-mono);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
}

/* ===== CARD ===== */
/* Replace glassmorphism with border-first flat card */
.glass-card,
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  transition: box-shadow 0.15s ease;
}

.glass-card:hover,
.card:hover {
  box-shadow: var(--shadow-subtle-2);
}

/* ===== NAVIGATION ===== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-hairline);
  z-index: 1000;
}

nav .container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--margin-desktop);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  gap: var(--spacing-10);
}

nav .logo {
  font-family: var(--font-geist);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  z-index: 1001;
  letter-spacing: -0.025em;
  flex-shrink: 0;
}

/* Desktop Navigation */
.desktop-nav {
  display: flex;
  gap: var(--spacing-10);
  list-style: none;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.desktop-nav a {
  font-family: var(--font-geist);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-decoration: none;
  padding: 4px var(--spacing-8);
  border-radius: var(--radius-nav);
  transition: background 0.15s ease, color 0.15s ease;
}

.desktop-nav a:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.desktop-nav a.active {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* Desktop/Mobile Auth Toggle */
.desktop-auth {
  display: block;
  flex-shrink: 0;
}

.mobile-auth {
  display: none;
}

/* Mobile Navigation - Hidden on Desktop */
.mobile-nav {
  display: none;
}

/* ===== MOBILE MENU ===== */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.mobile-menu-toggle span {
  width: 20px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 0;
  transition: all 0.2s ease;
  transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 768px) {
  nav .container {
    padding: 0 var(--margin-mobile);
  }

  .desktop-nav {
    display: none;
  }

  .desktop-auth {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .mobile-nav {
    display: flex;
    position: fixed;
    top: 64px;
    right: -100%;
    width: 260px;
    max-height: calc(100vh - 64px);
    background: var(--bg-canvas);
    border-left: 1px solid var(--border-hairline);
    flex-direction: column;
    padding: 0;
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 1000;
  }

  .mobile-nav.active {
    right: 0;
  }

  .mobile-nav a {
    padding: var(--spacing-12) var(--spacing-16);
    font-family: var(--font-geist);
    font-size: var(--text-body);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-hairline);
    transition: background 0.15s;
    flex-shrink: 0;
  }

  .mobile-nav a:hover {
    background: var(--bg-muted);
  }

  .mobile-nav a.active {
    background: var(--bg-muted);
    font-weight: var(--font-weight-semibold);
  }

  .mobile-auth {
    display: block;
    padding: var(--spacing-16);
    border-top: 1px solid var(--border-hairline);
    flex-shrink: 0;
  }

  .mobile-auth .btn {
    width: 100%;
    justify-content: center;
  }

  .mobile-auth .user-chip {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    border: none;
    background: transparent;
    padding: 0;
  }
  
  .mobile-auth .user-dropdown {
    position: static;
    width: 100%;
    margin-top: var(--spacing-8);
    box-shadow: none;
    border-color: var(--border-hairline);
  }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: 6px var(--spacing-16);
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary: the single black filled CTA */
.btn-primary {
  background: var(--color-graphite);
  color: var(--color-chalk);
  border-color: var(--color-graphite);
}

.btn-primary:hover {
  background: var(--color-carbon);
  border-color: var(--color-carbon);
  transform: none;
}

.btn-primary:active {
  background: var(--color-pure-black);
  transform: none;
}

/* Ghost: text only, hover adds mist background */
.btn-ghost,
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
}

.btn-ghost:hover,
.btn-secondary:hover {
  background: var(--bg-muted);
  border-color: transparent;
}

/* Outline variant (for secondary actions needing a border) */
.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-hairline);
}

.btn-outline:hover {
  background: var(--bg-muted);
  border-color: var(--text-primary);
}

/* Danger/destructive reuse achromatic */
.btn-danger {
  background: var(--color-graphite);
  color: var(--color-chalk);
  border-color: var(--color-graphite);
}

.btn-danger:hover {
  background: var(--color-carbon);
}

/* ===== CONTAINER ===== */
.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--margin-desktop);
  width: 100%;
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--margin-mobile);
  }
}

/* ===== SECTION SPACING ===== */
section {
  padding: 96px 0;
}

@media (max-width: 768px) {
  section {
    padding: 64px 0;
  }
}

/* ===== PILL BADGE ===== */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  background: var(--bg-muted);
  color: var(--text-primary);
  padding: 2px var(--spacing-10);
  border-radius: var(--radius-pills);
  font-family: var(--font-geist);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  border: none;
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-box {
  background: var(--bg-canvas);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-cards);
  padding: var(--spacing-32);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-subtle-2);
}

.modal-close {
  position: absolute;
  top: var(--spacing-16);
  right: var(--spacing-16);
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-canvas);
  border-radius: var(--radius-sm);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  color: var(--text-primary);
}

.modal-close:hover {
  background: var(--bg-muted);
}

/* ===== FORM ELEMENTS ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
textarea,
select {
  width: 100%;
  padding: var(--spacing-10) var(--spacing-12);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-inputs);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  background: var(--bg-canvas);
  color: var(--text-primary);
  transition: border-color 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-secondary);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--border-emphasis);
  background: var(--bg-canvas);
  box-shadow: none;
}

label {
  display: block;
  margin-bottom: var(--spacing-6);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

/* ===== AUTH STYLES ===== */
.auth-tabs {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-24);
  background: var(--bg-muted);
  padding: var(--spacing-4);
  border-radius: var(--radius-inputs);
}

.auth-tab {
  flex: 1;
  padding: var(--spacing-8) var(--spacing-12);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-geist);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s;
  color: var(--text-secondary);
  font-size: var(--text-body);
}

.auth-tab.active {
  background: var(--bg-canvas);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
}

.auth-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.5);
}

.auth-error {
  background: var(--bg-muted);
  color: var(--text-primary);
  padding: var(--spacing-10) var(--spacing-12);
  border-radius: var(--radius-inputs);
  border: 1px solid var(--border-hairline);
  margin-bottom: var(--spacing-16);
  font-size: var(--text-body);
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.auth-error[hidden] {
  display: none !important;
}

.auth-error::before {
  content: '';
  font-size: 14px;
}

.form-group {
  margin-bottom: var(--spacing-16);
}

/* ===== UTILITY CLASSES ===== */
.text-center {
  text-align: center;
}

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.hidden {
  display: none !important;
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
@media (max-width: 768px) {
  .display-lg {
    font-size: 32px;
    letter-spacing: -0.03em;
  }

  .headline-lg {
    font-size: 24px;
  }

  nav .container {
    padding: 0 var(--margin-mobile);
  }
}

/* ===== LOADING SPINNER ===== */
.spinner {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-hairline);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== USER CHIP & DROPDOWN ===== */
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-6) var(--spacing-12);
  background: var(--bg-canvas);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-buttons);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.user-chip:hover {
  background: var(--bg-muted);
  border-color: var(--text-primary);
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  color: var(--color-chalk);
  background: var(--color-graphite);
  flex-shrink: 0;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.user-name {
  font-family: var(--font-geist);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-body);
  color: var(--text-primary);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-canvas);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-cards);
  min-width: 220px;
  overflow: hidden;
  z-index: 1001;
  box-shadow: var(--shadow-subtle-2);
}

.user-dropdown[hidden] {
  display: none;
}

.user-dropdown-header {
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-muted);
}

.user-dropdown-name {
  font-family: var(--font-geist);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-body);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.user-dropdown-role {
  font-family: var(--font-geist);
  font-size: var(--text-caption);
  color: var(--text-secondary);
  letter-spacing: 0;
  font-weight: var(--font-weight-medium);
  text-transform: none;
}

.user-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--spacing-10) var(--spacing-16);
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
}

.user-dropdown-item:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.user-dropdown-item:active {
  background: var(--color-hairline);
}

/* ===== TOAST NOTIFICATION ===== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-inputs);
  padding: var(--spacing-12) var(--spacing-16);
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  z-index: 3000;
  animation: slideIn 0.2s ease;
  box-shadow: var(--shadow-subtle-2);
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.success {
  border-left: 3px solid var(--color-graphite);
}

.toast.error {
  border-left: 3px solid var(--color-graphite);
}

/* ===== SECTION HEADER ===== */
.section-header {
  margin-bottom: var(--spacing-40);
}

.section-label {
  display: inline-block;
  font-family: var(--font-geist);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--spacing-8);
}

/* ===== FOOTER ===== */
footer {
  background: var(--bg-canvas);
  border-top: 1px solid var(--border-hairline);
  padding: 48px 0 32px;
}

footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-24);
}

footer .footer-links {
  display: flex;
  gap: var(--spacing-32);
  list-style: none;
}

footer .footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-geist);
  font-size: var(--text-body);
  transition: color 0.15s;
}

footer .footer-links a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

@media (max-width: 768px) {
  footer .container {
    flex-direction: column;
    text-align: center;
  }

  footer {
    padding: 32px 0 24px;
  }
}

/* ===== DIVIDER ===== */
.divider {
  border: none;
  border-top: 1px solid var(--border-hairline);
  margin: var(--spacing-24) 0;
}

/* ===== TAG / CHIP ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--spacing-8);
  background: var(--bg-muted);
  border-radius: var(--radius-badges);
  font-family: var(--font-geist);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  border: none;
}

/* ===== DATA TABLE ===== */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: var(--spacing-10) var(--spacing-12);
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  text-align: left;
  color: var(--text-primary);
}

th {
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: var(--bg-muted);
}

tr:hover td {
  background: var(--bg-muted);
}

/* ===== MESH GRADIENT  removed, canvas is pure white ===== */
.mesh-gradient {
  background: var(--bg-canvas);
}