:root {
    /* core tokens */
    --bg: 10, 13, 20;
    --panel: 17, 22, 31;
    --muted: 125, 130, 150;
    --text: 230, 232, 239;

    --a1: 59, 130, 246;
    --a2: 20, 184, 166;
    --a3: 139, 92, 246;

    --good: 34, 197, 94;
    --warn: 245, 158, 11;
    --bad: 239, 68, 68;

    --radius: 16px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --blur: 12px;
    --hairline: rgba(255, 255, 255, 0.06);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    --glow-1: linear-gradient(135deg, rgba(var(--a2), 0.25), rgba(var(--a3), 0.2));

    --swift: 160ms;
    --gentle: 260ms;
    --curve: cubic-bezier(.2, .8, .2, 1);

    /* derived palette */
    --ds-color-background: rgb(var(--bg));
    --ds-color-panel: rgba(var(--panel), 0.92);
    --ds-color-panel-solid: rgb(var(--panel));
    --ds-color-panel-soft: rgba(var(--panel), 0.7);
    --ds-color-border: rgba(255, 255, 255, 0.08);
    --ds-color-border-strong: rgba(255, 255, 255, 0.16);
    --ds-color-text: rgb(var(--text));
    --ds-color-text-muted: rgba(var(--muted), 0.78);
    --ds-color-overlay: rgba(2, 6, 23, 0.65);
    --ds-color-image-overlay: rgba(2, 6, 23, 0.42);
    --ds-color-inverse-text: #ffffff;

    --ds-color-primary-400: rgb(var(--a1));
    --ds-color-primary: rgb(var(--a1));
    --ds-color-primary-50: rgba(var(--a1), 0.12);
    --ds-color-primary-200: rgba(var(--a1), 0.28);
    --ds-color-primary-300: rgba(var(--a1), 0.38);
    --ds-color-primary-500: rgb(var(--a1));
    --ds-color-primary-600: #2563eb;
    --ds-color-primary-700: #1d4ed8;
    --ds-color-accent-400: rgb(var(--a2));
    --ds-color-accent-500: rgb(var(--a3));
    --ds-color-secondary-500: rgb(var(--a2));

    --ds-color-success: rgb(var(--good));
    --ds-color-success-rgb: var(--good);
    --ds-color-success-50: rgba(var(--good), 0.12);
    --ds-color-success-200: rgba(var(--good), 0.28);
    --ds-color-success-300: rgba(var(--good), 0.38);
    --ds-color-success-400: rgb(var(--good));
    --ds-color-success-500: rgb(var(--good));
    --ds-color-success-600: rgb(var(--good));
    --ds-color-success-700: rgb(var(--good));
    --ds-color-success-800: rgb(var(--good));
    --ds-color-success-900: rgb(var(--good));
    --ds-color-warning: rgb(var(--warn));
    --ds-color-warning-rgb: var(--warn);
    --ds-color-warning-50: rgba(var(--warn), 0.13);
    --ds-color-warning-200: rgba(var(--warn), 0.28);
    --ds-color-warning-300: rgba(var(--warn), 0.38);
    --ds-color-warning-400: rgb(var(--warn));
    --ds-color-warning-500: rgb(var(--warn));
    --ds-color-warning-600: rgb(var(--warn));
    --ds-color-warning-700: rgb(var(--warn));
    --ds-color-warning-800: rgb(var(--warn));
    --ds-color-warning-900: rgb(var(--warn));
    --ds-color-danger: rgb(var(--bad));
    --ds-color-danger-rgb: var(--bad);
    --ds-color-error: var(--ds-color-danger);
    --ds-color-error-rgb: var(--ds-color-danger-rgb);
    --ds-color-danger-50: rgba(var(--bad), 0.13);
    --ds-color-danger-200: rgba(var(--bad), 0.28);
    --ds-color-danger-300: rgba(var(--bad), 0.38);
    --ds-color-danger-400: rgb(var(--bad));
    --ds-color-danger-500: rgb(var(--bad));
    --ds-color-danger-600: rgb(var(--bad));
    --ds-color-danger-700: rgb(var(--bad));
    --ds-color-danger-800: rgb(var(--bad));
    --ds-color-danger-900: rgb(var(--bad));
    --ds-color-info-rgb: var(--a1);
    --ds-color-info-50: rgba(var(--a1), 0.12);
    --ds-color-info-200: rgba(var(--a1), 0.28);
    --ds-color-info-300: rgba(var(--a1), 0.38);
    --ds-color-info-400: rgb(var(--a1));
    --ds-color-info-500: rgb(var(--a1));
    --ds-color-info-600: rgb(var(--a1));
    --ds-color-info-700: rgb(var(--a1));
    --ds-color-info-800: rgb(var(--a1));
    --ds-color-info-900: rgb(var(--a1));
    --ds-color-surface-muted: rgba(var(--panel), 0.65);
    --ds-color-panel-secondary: rgba(var(--panel), 0.55);
    --ds-color-border-subtle: rgba(255, 255, 255, 0.06);
    --ds-color-text-secondary: rgba(var(--muted), 0.9);
    --ds-color-text-subtle: rgba(var(--muted), 0.68);
    --ds-color-bg: var(--ds-color-panel-solid);
    --ds-color-bg-secondary: var(--ds-color-surface-muted);
    --ds-color-bg-hover: var(--ds-color-primary-50);
    --ds-color-text-primary: var(--ds-color-text);
    --ds-color-text-tertiary: var(--ds-color-text-subtle);
    --ds-color-field-bg: var(--ds-color-panel-soft);
    --ds-color-slate-100: rgba(148, 163, 184, 0.12);
    --ds-color-slate-200: rgba(148, 163, 184, 0.22);
    --ds-color-slate-500: #94a3b8;
    --ds-color-slate-700: 51, 65, 85;
    --ds-color-slate-800: 30, 41, 59;
    --ds-color-sidebar-bg: rgba(11, 18, 32, 0.94);
    --ds-color-sidebar-border: rgba(99, 102, 241, 0.18);
    --ds-color-sidebar-text: rgba(226, 232, 240, 0.82);
    --ds-color-sidebar-text-muted: rgba(148, 163, 184, 0.72);
    --ds-color-sidebar-item-hover: rgba(59, 130, 246, 0.14);
    --ds-color-sidebar-item-active: rgba(59, 130, 246, 0.2);

    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 18px;
    --ds-radius-pill: var(--radius-pill);
    --ds-radius-full: 9999px;
    --ds-border-width: 0.0625rem;
    --ds-border-width-strong: 0.125rem;

    --ds-font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ds-font-family-mono: 'JetBrains Mono', 'Fira Mono', 'Menlo', monospace;
    --ds-font-size-xs: 0.75rem;
    --ds-font-size-sm: 0.875rem;
    --ds-font-size-md: 1rem;
    --ds-font-size-lg: 1.125rem;
    --ds-font-size-xl: 1.25rem;
    --ds-font-size-2xl: 1.5rem;
    --ds-font-size-3xl: 1.75rem;
    --ds-font-weight-medium: 500;
    --ds-font-weight-semibold: 600;
    --ds-letter-spacing-normal: 0;
    --ds-letter-spacing-sm: 0.02em;
    --ds-letter-spacing-md: 0.04em;
    --ds-letter-spacing-wide: 0.08em;

    --ds-spacing-1: 0.0625rem;
    --ds-spacing-2: 0.125rem;
    --ds-spacing-3: 0.1875rem;
    --ds-spacing-4: 0.25rem;
    --ds-spacing-6: 0.375rem;
    --ds-spacing-8: 0.5rem;
    --ds-spacing-10: 0.625rem;
    --ds-spacing-12: 0.75rem;
    --ds-spacing-14: 0.875rem;
    --ds-spacing-16: 1rem;
    --ds-spacing-18: 1.125rem;
    --ds-spacing-20: 1.25rem;
    --ds-spacing-22: 1.375rem;
    --ds-spacing-24: 1.5rem;
    --ds-spacing-28: 1.75rem;
    --ds-spacing-32: 2rem;
    --ds-spacing-36: 2.25rem;
    --ds-spacing-40: 2.5rem;
    --ds-spacing-48: 3rem;
    --ds-spacing-56: 3.5rem;
    --ds-spacing-64: 4rem;

    /* Breakpoints */
    --ds-breakpoint-xs: 480px;
    --ds-breakpoint-sm: 768px;
    --ds-breakpoint-md: 1024px;
    --ds-breakpoint-lg: 1280px;
    --ds-breakpoint-xl: 1536px;

    --ds-size-card-media-min: 7.75rem;
    --ds-size-card-media-max: 9.25rem;
    --ds-size-card-thumb-width: 2.625rem;
    --ds-size-card-thumb-height: 2.375rem;
    --ds-size-badge-stack-offset: 1.75rem;
    --ds-size-card-action-min: 6rem;
    --ds-size-gallery-max-height: 26.25rem;
    --ds-size-gallery-thumb: 5rem;
    --ds-size-content-readable: 52rem;
    --ds-size-readable-md: 32.5rem;
    --ds-size-readable-sm: 30rem;
    --ds-size-page-content: 68.75rem;
    --ds-size-page-narrow: 48rem;
    --ds-size-page-wide: 87.5rem;
    --ds-size-dashboard-side: 21.25rem;
    --ds-size-icon-sm: 1.125rem;
    --ds-size-icon-lg: 1.75rem;
    --ds-size-icon-xl: 2rem;
    --ds-size-icon-2xl: 2.25rem;
    --ds-size-icon-3xl: 2.5rem;
    --ds-size-icon-4xl: 4.25rem;
    --ds-size-icon-5xl: 4.625rem;
    --ds-size-profile-sidebar-min: 16.25rem;
    --ds-size-profile-sidebar-max: 20rem;
    --ds-size-user-card-min-height: 7.5rem;
    --ds-size-actions-column: 11.25rem;
    --ds-size-search-md: 25rem;
    --ds-size-card-compact-min: 15.625rem;
    --ds-size-card-narrow-min: 8.75rem;
    --ds-size-tile-min: 13.75rem;
    --ds-size-form-action-min: 7.5rem;
    --ds-size-upload-preview: 7.5rem;
    --ds-size-preview-banner: 10rem;
    --ds-size-editor-min-height: 12.5rem;
    --ds-size-grid-card-min: 18.75rem;
    --ds-size-filter-min: 12.5rem;
    --ds-size-filter-max: 16rem;
    --ds-size-filter-search: 24rem;
    --ds-size-datetime-time-column: 6.75rem;
    --ds-size-clients-segments-width: 17.5rem;
    --ds-size-clients-context-width: 18rem;
    --ds-size-clients-table-min-width: 72rem;
    --ds-size-clients-row-height: 3.75rem;
    --ds-size-clients-actions-width: 13rem;
    --ds-size-table-max-height: 30rem;
    --ds-size-table-compact-min-width: 50rem;
    --ds-size-stat-card-min: 15rem;
    --ds-size-stat-card-compact-min: 12.5rem;
    --ds-size-stat-card-mobile-min: 11.25rem;
    --ds-size-kanban-column-compact-min: 15rem;
    --ds-size-kanban-column-min: 17.5rem;
    --ds-size-kanban-column-max: 20rem;
    --ds-size-sidebar-width: 18.75rem;
    --ds-size-sidebar-narrow-width: 16.25rem;
    --ds-size-sidebar-collapsed-width: 6rem;
    --ds-size-agentterra-sidebar-width: 17.5rem;
    --ds-size-agentterra-sidebar-collapsed-width: 5.75rem;
    --ds-size-tabs-vertical-min: 12.5rem;
    --ds-size-dropdown-max-height: 18.75rem;
    --ds-size-multiple-select-max-height: 12.5rem;
    --ds-size-modal-sm: 30rem;
    --ds-size-modal-md: 45rem;
    --ds-size-modal-lg: 68.75rem;
    --ds-size-modal-xl: 80rem;
    --ds-size-modal-full: 100rem;
    --ds-size-toast-min-width: 18.75rem;
    --ds-size-toast-max-width: 25rem;
    --ds-size-popover-min-width: 12.5rem;
    --ds-size-popover-max-width: 18.75rem;
    --ds-size-empty-state-min-height: 18.75rem;
    --ds-size-empty-state-compact-min-height: 12.5rem;
    --ds-size-empty-state-mobile-min-height: 15.625rem;
    --ds-size-empty-state-image: 7.5rem;
    --ds-size-upload-min-height: 12.5rem;
    --ds-size-upload-mobile-min-height: 9.375rem;
    --ds-size-map-height-lg: 37.5rem;
    --ds-size-map-height-md: 25rem;
    --ds-size-map-modal-height: 31.25rem;
    --ds-size-map-loader-text: 22.5rem;
    --ds-size-map-marker-md: 1.875rem;
    --ds-size-offscreen: 625rem;
    --ds-size-drag-preview: 6.25rem;
    --ds-size-object-sticky-tabs-top: 7rem;
    --ds-size-object-sticky-panel-top: 11.25rem;
    --ds-size-object-photo-strip: 6rem;
    --ds-size-avatar-sm: 2rem;
    --ds-size-avatar-md: 2.5rem;
    --ds-size-avatar-lg: 3.5rem;
    --ds-size-avatar-xl: 5rem;
    --ds-size-avatar-status-sm: 0.625rem;
    --ds-size-avatar-status-md: 0.75rem;
    --ds-size-avatar-status-lg: 0.875rem;
    --ds-control-height-sm: 2.25rem;
    --ds-control-height-md: 2.75rem;
    --ds-control-height-lg: 3rem;
    --ds-size-control-sm: var(--ds-control-height-sm);
    --ds-size-control-md: var(--ds-control-height-md);
    --ds-size-control-lg: var(--ds-control-height-lg);
    --ds-control-icon-offset-sm: 2.25rem;
    --ds-control-icon-offset-md: 2.75rem;
    --ds-control-icon-offset-lg: 3.25rem;
    --ds-control-addon-offset-md: 3rem;
    --ds-control-check-sm: 1rem;
    --ds-control-check-md: 1.25rem;
    --ds-control-check-lg: 1.5rem;
    --ds-control-switch-sm-width: 2.25rem;
    --ds-control-switch-sm-height: 1.25rem;
    --ds-control-switch-md-width: 2.75rem;
    --ds-control-switch-md-height: 1.5rem;
    --ds-control-switch-lg-width: 3.25rem;
    --ds-control-switch-lg-height: 1.75rem;
    --ds-control-switch-thumb-sm: 0.75rem;
    --ds-control-switch-thumb-md: 1rem;
    --ds-control-switch-thumb-lg: 1.25rem;
    --ds-control-switch-shift-sm: 1rem;
    --ds-control-switch-shift-md: 1.25rem;
    --ds-control-switch-shift-lg: 1.5rem;
    --ds-control-switch-inset: 0.125rem;
    --ds-layer-dropdown: 10001;
    --ds-layer-modal: 10000;
    --ds-z-base: 1;
    --ds-color-overlay: rgba(4, 7, 14, 0.7);
    --ds-shadow-focus: 0 0 0 3px var(--ds-color-focus-ring);
    --ds-shadow-error: 0 0 0 2px rgba(var(--bad), 0.12);
    --ds-color-focus-ring: rgba(var(--a1), 0.42);
    --ds-color-primary-contrast: #ffffff;
    --ds-gradient-primary: linear-gradient(135deg, rgb(var(--a1)), rgb(var(--a2)));
    --ds-color-table-head-bg: rgba(var(--panel), 0.98);
    --ds-color-table-row-bg: rgba(var(--panel), 0.72);
    --ds-color-table-row-alt-bg: rgba(var(--panel), 0.86);
    --ds-color-table-row-hover-bg: rgba(var(--a1), 0.12);

    /* Typography scale */
    --ds-font-size-h1: 2rem;
    --ds-font-size-h2: 1.5rem;
    --ds-font-size-h3: 1.25rem;
    --ds-font-size-h4: 1.125rem;
    --ds-font-size-h5: 1rem;
    --ds-font-size-h6: 0.875rem;

    --ds-line-height-tight: 1.25;
    --ds-line-height-normal: 1.5;
    --ds-line-height-relaxed: 1.75;

    /* Shadow tokens */
    --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --ds-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
    --ds-shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.4);
    --ds-shadow-xl: 0 30px 60px rgba(0, 0, 0, 0.5);

    /* Transition tokens */
    --ds-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ds-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --ds-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --ds-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='light'] {
  --bg: 246, 248, 252;
  --panel: 255, 255, 255;
  --muted: 64, 78, 98;
  --text: 17, 24, 39;

  --a1: 37, 99, 235;
  --a2: 13, 148, 136;
  --a3: 79, 70, 229;

  --hairline: rgba(99, 116, 139, 0.18);
  --shadow: 0 14px 36px rgba(15, 23, 42, 0.08);

  --ds-color-background: rgb(var(--bg));
  --ds-color-panel: rgba(var(--panel), 0.96);
  --ds-color-panel-solid: rgb(var(--panel));
  --ds-color-panel-soft: rgba(248, 250, 252, 0.92);
  --ds-color-surface-muted: rgba(241, 245, 249, 0.92);
  --ds-color-border: rgba(148, 163, 184, 0.26);
  --ds-color-border-strong: rgba(100, 116, 139, 0.34);
  --ds-color-text: rgb(var(--text));
  --ds-color-text-muted: rgba(var(--muted), 0.9);
  --ds-color-text-secondary: rgba(var(--muted), 0.98);
  --ds-color-text-subtle: rgba(var(--muted), 0.82);
  --ds-color-overlay: rgba(15, 23, 42, 0.2);
  --ds-color-image-overlay: rgba(15, 23, 42, 0.28);
  --ds-color-inverse-text: #ffffff;
  --ds-color-primary-400: rgb(var(--a1));
  --ds-color-primary: rgb(var(--a1));
  --ds-color-primary-500: rgb(var(--a1));
  --ds-color-accent-400: rgb(var(--a2));
  --ds-color-accent-500: rgb(var(--a3));
  --ds-color-secondary-500: rgb(var(--a2));
  --ds-color-panel-secondary: rgba(248, 250, 252, 0.94);
  --ds-color-border-subtle: rgba(148, 163, 184, 0.18);
  --ds-color-primary-50: rgba(var(--a1), 0.08);
  --ds-color-slate-100: rgba(226, 232, 240, 0.76);
  --ds-color-slate-200: rgba(203, 213, 225, 0.76);
  --ds-color-slate-500: rgba(71, 85, 105, 0.72);
  --ds-color-sidebar-bg: rgba(22, 31, 44, 0.96);
  --ds-color-sidebar-border: rgba(15, 23, 42, 0.18);
  --ds-color-sidebar-text: rgba(241, 245, 249, 0.9);
  --ds-color-sidebar-text-muted: rgba(203, 213, 225, 0.72);
  --ds-color-sidebar-item-hover: rgba(59, 130, 246, 0.16);
  --ds-color-sidebar-item-active: rgba(59, 130, 246, 0.24);
  --ds-color-table-head-bg: rgba(226, 232, 240, 0.72);
  --ds-color-table-row-bg: rgba(255, 255, 255, 0.98);
  --ds-color-table-row-alt-bg: rgba(241, 245, 249, 0.72);
  --ds-color-table-row-hover-bg: rgba(37, 99, 235, 0.08);
  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ds-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08);
  --ds-shadow-lg: 0 18px 46px rgba(15, 23, 42, 0.12);
  --ds-shadow-xl: 0 26px 68px rgba(15, 23, 42, 0.14);
  --ds-color-overlay: rgba(15, 23, 42, 0.28);
}

[data-theme='contrast'] {
  --bg: 5, 5, 5;
  --panel: 10, 10, 10;
  --muted: 200, 200, 200;
  --text: 255, 255, 255;
  --ds-color-background: rgb(var(--bg));
  --ds-color-panel: rgba(var(--panel), 0.95);
  --ds-color-panel-solid: rgb(var(--panel));
  --ds-color-panel-soft: rgba(var(--panel), 0.8);
  --ds-color-surface-muted: rgba(var(--panel), 0.5);
  --ds-color-border: rgba(255, 255, 255, 0.2);
  --ds-color-border-strong: rgba(255, 255, 255, 0.3);
  --ds-color-text: rgb(var(--text));
  --ds-color-text-muted: rgba(var(--muted), 0.8);
  --ds-color-text-secondary: rgba(var(--muted), 0.9);
  --ds-color-text-subtle: rgba(var(--muted), 0.74);
  --ds-color-overlay: rgba(0, 0, 0, 0.8);
  --ds-color-image-overlay: rgba(0, 0, 0, 0.52);
  --ds-color-inverse-text: #ffffff;
  --ds-color-panel-secondary: rgba(var(--panel), 0.65);
  --ds-color-border-subtle: rgba(255, 255, 255, 0.16);
  --ds-color-primary-50: rgba(var(--a1), 0.18);
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  --hairline: rgba(255, 255, 255, 0.1);
}

[data-theme='light'] body {
  background: var(--ds-color-background);
}

[data-theme='light'] .ds-card {
  background: var(--ds-color-panel-solid);
  border-color: var(--ds-color-border);
  box-shadow: var(--ds-shadow-md);
  backdrop-filter: none;
}

[data-theme='light'] .ds-card::before {
  border-color: rgba(255, 255, 255, 0.82);
}

[data-theme='light'] .ds-card::after {
  opacity: 0;
}

[data-theme='light'] .ds-card.is-hoverable:hover {
  box-shadow: var(--ds-shadow-lg);
}

[data-theme='light'] .ds-badge {
  background: var(--ds-color-surface-muted);
  border-color: var(--ds-color-border-subtle);
  color: var(--ds-color-text-secondary);
}

[data-theme='light'] .ds-table {
  background: var(--ds-color-panel-solid);
  border-color: var(--ds-color-border);
  box-shadow: var(--ds-shadow-sm);
  backdrop-filter: none;
}

[data-theme='light'] .ds-table thead th {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-subtle);
}

[data-theme='light'] .ds-table tbody td {
  border-top-color: var(--ds-color-border-subtle);
}

[data-theme='light'] .ds-table tbody tr:hover {
  background: var(--ds-color-primary-50);
}

[data-theme='light'] .ds-surface-blur {
  background: var(--ds-color-panel-solid);
  border-color: var(--ds-color-border);
  box-shadow: var(--ds-shadow-sm);
  backdrop-filter: none;
}

[data-theme='light'] .ds-scrollbar {
  scrollbar-color: rgba(var(--a1), 0.45) rgba(226, 232, 240, 0.9);
}

[data-theme='light'] .ds-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(var(--a1), 0.45);
}

[data-theme='light'] .ds-scrollbar::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.9);
}

[data-theme='light'] .app-header {
  background: rgba(var(--panel), 0.94);
  border-bottom-color: var(--ds-color-border);
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.14);
  backdrop-filter: blur(var(--blur));
}

[data-theme='light'] .app-header__menu-toggle,
[data-theme='light'] .app-header__action-btn,
[data-theme='light'] .app-header__user-button {
  background: var(--ds-color-panel-secondary);
  border-color: var(--ds-color-border);
  color: var(--ds-color-text-secondary);
}

[data-theme='light'] .app-header__search-form input {
  background: var(--ds-color-panel-solid);
  border-color: var(--ds-color-border);
  color: var(--ds-color-text);
}

[data-theme='light'] .app-header__dropdown {
  background: var(--ds-color-panel-solid);
  border-color: var(--ds-color-border);
  box-shadow: var(--ds-shadow-lg);
}

[data-theme='light'] .app-header__dropdown .dropdown-item {
  color: var(--ds-color-text-secondary);
}

[data-theme='contrast'] body {
  background: radial-gradient(circle at 10% 0%, rgba(139, 92, 246, 0.3), transparent 55%),
    radial-gradient(circle at 90% 0%, rgba(20, 184, 166, 0.25), transparent 60%),
    var(--ds-color-background);
}

body {
  font-family: var(--ds-font-family-base);
  background: radial-gradient(circle at 10% 0%, rgba(var(--a3), 0.22), transparent 55%),
    radial-gradient(circle at 90% 0%, rgba(var(--a2), 0.18), transparent 60%),
    var(--ds-color-background);
  color: var(--ds-color-text);
}

.ds-card {
  position: relative;
  background: rgba(var(--panel), 0.92);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow);
  color: var(--ds-color-text);
  display: flex;
  flex-direction: column;
  padding: var(--ds-spacing-24);
  backdrop-filter: blur(var(--blur));
  transition: transform var(--gentle) var(--curve), box-shadow var(--gentle) var(--curve);
  overflow: hidden;
}

.ds-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.ds-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  opacity: 0.35;
  pointer-events: none;
}

.ds-card.is-hoverable:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(var(--a2), 0.25);
}

.ds-card__header {
  font-size: var(--ds-font-size-lg);
  font-weight: 600;
  margin-bottom: var(--ds-spacing-16);
}

.ds-card__body {
  flex: 1 1 auto;
  font-size: var(--ds-font-size-sm);
  color: var(--ds-color-text-muted);
}

.ds-card__footer {
  margin-top: var(--ds-spacing-20);
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-spacing-12);
}

.ds-badge {
  border-radius: var(--ds-radius-pill);
  padding: var(--ds-spacing-4) var(--ds-spacing-12);
  font-size: var(--ds-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(var(--panel), 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(var(--text), 0.78);
}

.ds-badge--primary {
  background: rgba(var(--a1), 0.18);
  border-color: rgba(var(--a1), 0.35);
  color: rgb(var(--a1));
}

.ds-badge--success {
  background: rgba(var(--good), 0.18);
  border-color: rgba(var(--good), 0.35);
  color: rgb(var(--good));
}

.ds-badge--warning {
  background: rgba(var(--warn), 0.2);
  border-color: rgba(var(--warn), 0.35);
  color: rgb(var(--warn));
}

.ds-badge--danger {
  background: rgba(var(--bad), 0.2);
  border-color: rgba(var(--bad), 0.35);
  color: rgb(var(--bad));
}

.ds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(var(--panel), 0.75);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(var(--blur));
}

.ds-table thead th {
  font-size: var(--ds-font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--ds-spacing-12) var(--ds-spacing-16);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(var(--muted), 0.68);
}

.ds-table tbody td {
  padding: var(--ds-spacing-12) var(--ds-spacing-16);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: var(--ds-font-size-sm);
  color: var(--ds-color-text-muted);
}

.ds-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.12);
}

.ds-surface-blur {
  background: rgba(var(--panel), 0.7);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ds-radius-lg);
}

.ds-scrollbar {
  scrollbar-color: rgba(99, 102, 241, 0.65) rgba(15, 23, 42, 0.18);
}

.ds-scrollbar::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

.ds-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.65);
  border-radius: var(--ds-radius-md);
}

.ds-scrollbar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.18);
}

.app-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(var(--panel), 0.92);
    backdrop-filter: blur(var(--blur));
    color: var(--ds-color-text);
}

.app-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-header__menu-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(var(--panel), 0.6);
    color: rgba(var(--text), 0.78);
    display: grid;
    place-items: center;
    transition: background var(--swift) var(--curve), color var(--swift) var(--curve), border-color var(--swift) var(--curve);
}

.app-header__menu-toggle:hover {
    background: rgba(var(--a1), 0.2);
    border-color: rgba(var(--a1), 0.4);
    color: rgb(var(--a1));
}

.app-header__center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.app-header__search-form {
    position: relative;
    width: min(420px, 100%);
}

.app-header__search-form i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(var(--muted), 0.42);
}

.app-header__search-form input {
    width: 100%;
    padding: 10px 16px 10px 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(var(--panel), 0.55);
    color: var(--ds-color-text);
    font-size: 14px;
    transition: border-color var(--swift) var(--curve), box-shadow var(--swift) var(--curve);
}

.app-header__search-form input:focus {
    outline: none;
    border-color: rgba(var(--a2), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--a2), 0.24);
}

.app-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-header__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(var(--panel), 0.55);
    color: rgba(var(--text), 0.88);
    font-size: 14px;
    text-decoration: none;
    transition: background var(--swift) var(--curve), color var(--swift) var(--curve), box-shadow var(--swift) var(--curve);
}

.app-header__action-btn:hover {
    background: rgba(var(--a1), 0.18);
    color: rgb(var(--a1));
    box-shadow: 0 12px 24px rgba(var(--a1), 0.2);
}

.app-header__right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.app-header__logo-link {
    color: var(--ds-color-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.app-header__user {
    position: relative;
}

.app-header__user-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    background: rgba(var(--panel), 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 14px;
    color: var(--ds-color-text);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--swift) var(--curve), border-color var(--swift) var(--curve), box-shadow var(--swift) var(--curve);
}

.app-header__user-button:hover {
    background: rgba(var(--a3), 0.22);
    border-color: rgba(var(--a3), 0.4);
    box-shadow: 0 12px 24px rgba(var(--a3), 0.22);
}

.app-header__user-avatar i {
    font-size: 20px;
}

.app-header__dropdown {
    background: rgba(var(--panel), 0.98);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 180px;
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.45);
    padding: 8px 0;
}

.app-header__dropdown .dropdown-item {
    color: rgba(var(--text), 0.85);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.app-header__dropdown .dropdown-item:hover {
    background: rgba(var(--a2), 0.18);
    color: rgb(var(--a2));
}

[data-theme='dark'] .ds-table thead th {
  background: rgba(15, 23, 42, 0.45);
  color: rgba(226, 232, 240, 0.78);
}

[data-theme='dark'] .ds-table tbody tr:hover {
  background: rgba(79, 70, 229, 0.12);
}

[data-theme='dark'] .ds-surface-blur {
  background: rgba(15, 23, 42, 0.68);
}

[data-theme='dark'] .ds-scrollbar {
  scrollbar-color: rgba(99, 102, 241, 0.65) rgba(15, 23, 42, 0.15);
}

[data-theme='dark'] .ds-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.65);
}

[data-theme='dark'] .ds-scrollbar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.12);
}

[data-theme='dark'] .app-header {
    border-bottom: 1px solid rgba(99, 102, 241, 0.16);
    background: rgba(11, 18, 32, 0.86);
}

[data-theme='dark'] .app-header__menu-toggle {
    border: 1px solid rgba(99, 102, 241, 0.28);
    background: rgba(15, 23, 42, 0.65);
    color: rgba(226, 232, 240, 0.85);
}

[data-theme='dark'] .app-header__search-form input {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.55);
    color: #f8fafc;
}

[data-theme='dark'] .app-header__action-btn {
    background: rgba(15, 23, 42, 0.55);
    color: rgba(236, 242, 255, 0.92);
}

[data-theme='dark'] .app-header__user-button {
    background: rgba(99, 102, 241, 0.16);
    border: 1px solid rgba(99, 102, 241, 0.32);
}

[data-theme='dark'] .app-header__dropdown {
    background: rgba(11, 18, 32, 0.94);
    border: 1px solid rgba(99, 102, 241, 0.22);
    box-shadow: 0 28px 65px rgba(11, 18, 32, 0.55);
}

[data-theme='dark'] .app-header__dropdown .dropdown-item {
    color: rgba(226, 232, 240, 0.85);
}

[data-theme='dark'] .app-header__dropdown .dropdown-item:hover {
    color: #fff;
}

body {
    background: radial-gradient(circle at 20% 0%, rgba(var(--a3), 0.22), transparent 55%),
        radial-gradient(circle at 80% 15%, rgba(var(--a2), 0.18), transparent 60%),
        var(--ds-color-background);
    color: var(--ds-color-text);
    font-family: var(--ds-font-family-base);
    min-height: 100vh;
}

body.agentterra-shell-ready {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}

body.agentterra-shell-ready::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body.agentterra-shell-ready #agentterra-app {
    min-height: 100vh;
}