:root {
  --os-bg: #0f0f0f;
  --os-surface: #ffffff;
  --os-surface-muted: #f3f4f6;
  --os-border: #d1d5db;

  --os-text-primary: #0f0f0f;
  --os-text-secondary: #4b5563;
  --os-text-muted: #6b7280;

  --os-accent: #111827;
  --os-danger: #b91c1c;

  --os-font: 'Montserrat', system-ui, sans-serif;

  --os-weight-regular: 450;
  --os-weight-medium: 550;
  --os-weight-semibold: 650;
  --os-weight-bold: 750;

  --os-radius-sm: 4px;
  --os-radius-md: 6px;
  --os-radius-lg: 10px;

  --os-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --os-shadow-md: 0 4px 10px rgba(0,0,0,0.08);
}

dashboard-shell {
  display: block;
  min-height: 100vh;
  background: var(--os-bg);
  color: var(--os-text-primary);
  font-family: var(--os-font);
}

body {
  font-family: var(--os-font);
  font-weight: var(--os-weight-regular);
  color: var(--os-text-primary);
}

h1, h2, h3 {
  font-weight: var(--os-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--os-text-primary);
}

h1 {
  font-size: 1.25rem;
}

h2 {
  font-size: 1.05rem;
}

.db-hint,
.db-setting-label {
  font-size: 0.8rem;
  font-weight: var(--os-weight-medium);
  color: var(--os-text-muted);
}

.db-main {
  padding: 1.75rem;
  background: var(--os-surface-muted);
  min-height: 100vh;
  box-sizing: border-box;
}

.db-card {
  background: var(--os-surface);
  border-radius: var(--os-radius-md);
  padding: 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--os-shadow-sm);
  border: none;
}

.db-card--primary {
  box-shadow: var(--os-shadow-md);
}

.db-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--os-font);
  font-weight: var(--os-weight-medium);
  font-size: 0.85rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--os-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}

.db-btn--primary {
  background: var(--os-accent);
  color: #fff;
}

.db-btn--primary:hover {
  background: #000;
}

.db-btn--ghost {
  background: transparent;
  color: var(--os-text-primary);
  border: 1px solid var(--os-border);
}

.db-btn--ghost:hover {
  background: var(--os-surface-muted);
}

.db-btn--danger {
  color: var(--os-danger);
  border-color: rgba(185,28,28,0.3);
}

.db-error {
  font-size: 0.8rem;
  color: #b33;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}
