.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-3);
  box-shadow: var(--c-shadow);
  overflow: hidden;
}

.h,
.card-h {
  background: var(--c-surface-subtle);
  border-bottom: 1px solid var(--c-border);
}

.muted,
.hint,
label {
  color: var(--c-text-secondary);
}

.btn,
.btn2,
.saveBtn,
.ghostBtn,
.logoutBtn,
.themeToggle,
.headerMenu,
.top-menu {
  border-radius: var(--radius-2);
  font-weight: 600;
  letter-spacing: 0;
}

input,
select,
textarea {
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-2);
  color: var(--c-text-primary);
  color-scheme: inherit;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-focus) 24%, transparent);
}

.pill {
  background: color-mix(in srgb, var(--c-interactive) 10%, var(--c-surface));
  border: 1px solid color-mix(in srgb, var(--c-interactive) 22%, var(--c-border));
  border-radius: var(--radius-2);
  color: var(--c-interactive);
  font-weight: 600;
}

.ok {
  color: var(--c-success);
}

.ng {
  color: var(--c-danger);
}

.themeToggle {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.themeToggle:hover {
  background: rgba(255, 255, 255, 0.20);
}

.themeToggleTrack {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.35);
}

table {
  background: var(--c-surface);
}

thead th {
  background: var(--c-surface-subtle);
  color: var(--c-text-secondary);
}

tbody td {
  border-color: var(--c-border);
}