: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-primary-400: rgb(var(--a1));
    --ds-color-accent-400: rgb(var(--a2));
    --ds-color-accent-500: rgb(var(--a3));
    
    --ds-color-success: rgb(var(--good));
    --ds-color-warning: rgb(var(--warn));
    --ds-color-danger: rgb(var(--bad));
    --ds-color-surface-muted: rgba(var(--panel), 0.65);

    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 18px;

    --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-spacing-4: 0.25rem;
    --ds-spacing-6: 0.375rem;
    --ds-spacing-8: 0.5rem;
    --ds-spacing-12: 0.75rem;
    --ds-spacing-16: 1rem;
    --ds-spacing-20: 1.25rem;
    --ds-spacing-24: 1.5rem;
    --ds-spacing-32: 2rem;
    --ds-spacing-40: 2.5rem;
    --ds-spacing-48: 3rem;
    --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;

    /* 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'] {
  --ds-color-background: #f3f6fc;
  --ds-color-panel: rgba(255, 255, 255, 0.92);
  --ds-color-panel-solid: #ffffff;
  --ds-color-panel-soft: rgba(255, 255, 255, 0.8);
  --ds-color-surface-muted: rgba(15, 23, 42, 0.06);
  --ds-color-border: rgba(15, 23, 42, 0.08);
  --ds-color-border-strong: rgba(15, 23, 42, 0.14);
  --ds-color-text: #0f172a;
  --ds-color-text-muted: rgba(15, 23, 42, 0.62);
  --ds-color-overlay: rgba(15, 23, 42, 0.12);
  --shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  --hairline: rgba(15, 23, 42, 0.08);
}

[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-overlay: rgba(0, 0, 0, 0.8);
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  --hairline: rgba(255, 255, 255, 0.1);
}

[data-theme='light'] body {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.03)),
    var(--ds-color-background);
}

[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;
}