.ui-surface,
.ui-card,
.ui-panel {
  background: var(--ui-surface-bg, var(--card, rgba(255,255,255,.04)));
  border: 1px solid var(--ui-surface-border, var(--border, var(--border-subtle, rgba(255,255,255,.08))));
  border-radius: var(--ui-surface-radius, var(--radius-lg, 16px));
}

.ui-card,
.ui-panel {
  box-shadow: var(--ui-surface-shadow, none);
}

.ui-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--ui-surface-border, var(--border, var(--border-subtle, rgba(255,255,255,.08))));
}

.ui-card-body {
  min-width: 0;
}

.ui-panel {
  --ui-surface-bg: rgba(13,15,30,.85);
  --ui-surface-border: rgba(99,102,241,.14);
  --ui-surface-radius: var(--radius-xl, 22px);
  --ui-surface-shadow: var(--shadow-card, 0 24px 64px rgba(0,0,0,.4));
  overflow: hidden;
}

.glass-panel {
  background: rgba(12,17,32,.85);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 64px rgba(0,0,0,.36);
}

.ui-divider {
  height: 1px;
  background: var(--border, var(--border-subtle, rgba(255,255,255,.08)));
}