:root {
  --ui-btn-bg: var(--qh-text-primary);
  --ui-btn-border: var(--qh-text-primary);
  --ui-btn-color: var(--qh-surface);
  --ui-btn-hover-bg: color-mix(in srgb, var(--qh-text-primary) 92%, black);
  --ui-btn-hover-border: color-mix(in srgb, var(--qh-text-primary) 92%, black);
  --ui-btn-hover-color: var(--qh-surface);
  --ui-btn-height: var(--qh-control-height-md);
  --ui-btn-padding-x: 18px;
  --ui-btn-radius: var(--qh-radius-md);
  --ui-control-bg: var(--qh-surface);
  --ui-control-border: var(--qh-border-muted);
  --ui-control-focus-border: var(--qh-border-strong);
  --ui-control-color: var(--qh-text-primary);
  --ui-control-placeholder: color-mix(in srgb, var(--qh-text-secondary) 74%, transparent);
  --ui-card-bg: var(--qh-surface);
  --ui-card-border: var(--qh-card-border);
  --ui-card-shadow: var(--qh-card-shadow);
  --ui-card-radius: var(--qh-radius-xl);
}

body {
  font-family: var(--qh-font-sans);
  font-size: var(--qh-font-size-body-md);
  line-height: var(--qh-line-relaxed);
}

button,
input,
select,
textarea {
  font: inherit;
}

.ui-eyebrow {
  font-size: var(--qh-font-size-caption);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qh-text-secondary);
}

.ui-label,
.ui-field-label,
.auth-label,
.settings-v2-profile-label,
.settings-field,
.signup-field {
  font-size: var(--qh-font-size-body-sm);
  line-height: var(--qh-line-normal);
}

.ui-text-sm {
  font-size: var(--qh-font-size-body-sm);
  line-height: var(--qh-line-normal);
}

.ui-text-md {
  font-size: var(--qh-font-size-body-md);
  line-height: var(--qh-line-relaxed);
}

.ui-text-muted {
  color: var(--qh-text-secondary);
}

.ui-title-sm {
  font-size: var(--qh-font-size-title-sm);
  line-height: var(--qh-line-tight);
}

.ui-title-md {
  font-size: var(--qh-font-size-title-md);
  line-height: var(--qh-line-tight);
}

.ui-title-lg {
  font-size: var(--qh-font-size-title-lg);
  line-height: calc(var(--qh-line-tight) - 0.05);
}

.ui-title-hero {
  font-size: var(--qh-font-size-hero);
  line-height: calc(var(--qh-line-tight) - 0.05);
}

.ui-font-mono {
  font-family: var(--qh-font-mono);
}

.ui-btn,
.modal-primary,
.auth-primary,
.auth-secondary,
.settings-v2-avatar-btn,
.settings-v2-avatar-edit-chip,
.ritual-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-2);
  min-height: var(--ui-btn-height);
  padding: 0 var(--ui-btn-padding-x);
  border: 1px solid var(--ui-btn-border);
  border-radius: var(--ui-btn-radius);
  background: var(--ui-btn-bg);
  color: var(--ui-btn-color);
  -webkit-text-fill-color: currentColor;
  font-family: var(--qh-font-sans);
  font-size: var(--qh-font-size-body-md);
  font-weight: var(--qh-font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.ui-btn:hover:not(:disabled),
.modal-primary:hover:not(:disabled),
.auth-primary:hover:not(:disabled),
.auth-secondary:hover:not(:disabled),
.settings-v2-avatar-btn:hover:not(:disabled),
.settings-v2-avatar-edit-chip:hover:not(:disabled),
.ritual-button:hover:not(:disabled) {
  background: var(--ui-btn-hover-bg);
  border-color: var(--ui-btn-hover-border);
  color: var(--ui-btn-hover-color);
  transform: translateY(-1px);
}

.ui-btn:focus-visible,
.modal-primary:focus-visible,
.auth-primary:focus-visible,
.auth-secondary:focus-visible,
.settings-v2-avatar-btn:focus-visible,
.settings-v2-avatar-edit-chip:focus-visible,
.ritual-button:focus-visible {
  outline: none;
  box-shadow: var(--qh-focus-ring);
}

.ui-btn:disabled,
.modal-primary:disabled,
.auth-primary:disabled,
.auth-secondary:disabled,
.settings-v2-avatar-btn:disabled,
.settings-v2-avatar-edit-chip:disabled,
.ritual-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.ui-btn--primary,
.modal-primary,
.auth-primary,
.ritual-button.primary {
  --ui-btn-bg: var(--qh-text-primary);
  --ui-btn-border: var(--qh-text-primary);
  --ui-btn-color: var(--qh-surface);
  --ui-btn-hover-bg: color-mix(in srgb, var(--qh-text-primary) 90%, black);
  --ui-btn-hover-border: color-mix(in srgb, var(--qh-text-primary) 90%, black);
  --ui-btn-hover-color: var(--qh-surface);
}

.ui-btn--secondary,
.auth-secondary,
.settings-v2-avatar-btn,
.settings-v2-avatar-edit-chip,
.ritual-button:not(.primary) {
  --ui-btn-bg: var(--qh-surface);
  --ui-btn-border: var(--qh-border-strong);
  --ui-btn-color: var(--qh-text-primary);
  --ui-btn-hover-bg: var(--qh-surface-soft);
  --ui-btn-hover-border: var(--qh-border-muted);
  --ui-btn-hover-color: var(--qh-text-primary);
}

.ui-btn--ghost,
.settings-v2-avatar-btn.ghost {
  --ui-btn-bg: transparent;
  --ui-btn-border: transparent;
  --ui-btn-color: var(--qh-text-primary);
  --ui-btn-hover-bg: var(--qh-surface-soft);
  --ui-btn-hover-border: transparent;
  --ui-btn-hover-color: var(--qh-text-primary);
}

.ui-btn--danger,
.settings-v2-avatar-btn.danger {
  --ui-btn-bg: color-mix(in srgb, var(--qh-danger) 10%, var(--qh-surface));
  --ui-btn-border: color-mix(in srgb, var(--qh-danger) 24%, var(--qh-border-strong));
  --ui-btn-color: color-mix(in srgb, var(--qh-danger) 88%, var(--qh-text-primary));
  --ui-btn-hover-bg: color-mix(in srgb, var(--qh-danger) 16%, var(--qh-surface));
  --ui-btn-hover-border: color-mix(in srgb, var(--qh-danger) 30%, var(--qh-border-strong));
  --ui-btn-hover-color: color-mix(in srgb, var(--qh-danger) 92%, var(--qh-text-primary));
}

.ui-btn--sm {
  --ui-btn-height: 36px;
  --ui-btn-padding-x: 14px;
  font-size: var(--qh-font-size-body-sm);
}

.ui-btn--md {
  --ui-btn-height: var(--qh-control-height-md);
}

.ui-btn--lg,
.auth-primary,
.auth-secondary {
  --ui-btn-height: var(--qh-control-height-lg);
  --ui-btn-padding-x: 20px;
  font-size: var(--qh-font-size-body-lg);
}

.ui-btn--block {
  width: 100%;
}

.ui-segmented,
.auth-tabs,
.settings-v2-theme-segmented,
.tier-switcher-group {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border-radius: var(--qh-radius-lg);
  background: var(--qh-surface-muted);
  box-sizing: border-box;
}

.ui-segmented-option,
.auth-tab,
.settings-v2-theme-option,
.tier-switcher-btn {
  border: 1px solid transparent;
  border-radius: var(--qh-radius-md);
  background: transparent;
  color: var(--qh-text-secondary);
  min-height: var(--qh-control-height-md);
  padding: 0 12px;
  font-size: var(--qh-font-size-body-md);
  font-weight: var(--qh-font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ui-segmented-option:hover,
.auth-tab:hover,
.settings-v2-theme-option:hover,
.tier-switcher-btn:hover {
  transform: translateY(-1px);
}

.ui-segmented-option:focus-visible,
.auth-tab:focus-visible,
.settings-v2-theme-option:focus-visible,
.tier-switcher-btn:focus-visible {
  outline: none;
  box-shadow: var(--qh-focus-ring);
}

.ui-segmented-option.is-active,
.auth-tab.active,
.settings-v2-theme-option.active,
.tier-switcher-btn.active {
  background: var(--qh-surface);
  border-color: var(--qh-border-strong);
  color: var(--qh-text-primary);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--qh-text-primary) 12%, transparent);
}

.ui-field,
.auth-field,
.signup-field,
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  color: var(--qh-text-primary);
}

.ui-field-label,
.auth-label,
.settings-v2-profile-label {
  display: block;
  margin-bottom: 0;
  font-size: var(--qh-font-size-body-sm);
  font-weight: var(--qh-font-weight-semibold);
  color: var(--qh-text-primary);
}

.ui-field-help,
.settings-hint {
  min-height: 14px;
  font-size: var(--qh-font-size-caption);
  line-height: var(--qh-line-normal);
  color: var(--qh-text-tertiary);
}

.ui-control,
.auth-input,
.form-input,
.settings-v2-profile-input,
.settings-field input,
.settings-field select,
.signup-field input,
.signup-field select {
  width: 100%;
  min-height: var(--qh-control-height-md);
  padding: 10px 12px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--qh-radius-md);
  background: var(--ui-control-bg);
  color: var(--ui-control-color);
  font-family: var(--qh-font-sans);
  font-size: var(--qh-font-size-body-md);
  line-height: var(--qh-line-normal);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ui-control::placeholder,
.auth-input::placeholder,
.form-input::placeholder,
.settings-v2-profile-input::placeholder,
.settings-field input::placeholder,
.settings-field select::placeholder,
.signup-field input::placeholder,
.signup-field select::placeholder {
  color: var(--ui-control-placeholder);
  opacity: 1;
}

.ui-control:focus,
.auth-input:focus,
.form-input:focus,
.settings-v2-profile-input:focus,
.settings-field input:focus,
.settings-field select:focus,
.signup-field input:focus,
.signup-field select:focus {
  outline: none;
  border-color: var(--ui-control-focus-border);
  box-shadow: var(--qh-focus-ring);
}

.ui-control:disabled,
.auth-input:disabled,
.form-input:disabled,
.settings-v2-profile-input:disabled,
.settings-field input:disabled,
.settings-field select:disabled,
.signup-field input:disabled,
.signup-field select:disabled {
  background: var(--qh-surface-soft);
  color: var(--qh-text-tertiary);
  cursor: not-allowed;
}

.ui-suggestions,
.city-suggestions {
  margin-top: 6px;
  border: 1px solid var(--qh-border-muted);
  border-radius: var(--qh-radius-md);
  background: var(--qh-surface);
  box-shadow: var(--qh-shadow-sm);
  overflow-y: auto;
}

.ui-suggestion-item,
.city-suggestions button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--qh-text-primary);
  font-size: var(--qh-font-size-body-sm);
  cursor: pointer;
}

.ui-suggestion-item:hover,
.city-suggestions button:hover {
  background: var(--qh-surface-soft);
}

.ui-suggestion-status,
.city-suggestions .city-status {
  padding: 10px 12px;
  color: var(--qh-text-secondary);
  font-size: var(--qh-font-size-label);
  line-height: var(--qh-line-normal);
}

.ui-card,
.auth-card,
.modal-card,
.settings-v2-profile-card,
.settings-v2-tier-card,
.settings-v2-tier-summary,
.card,
.ritual-card,
.chart-wrap,
.house-table,
.calendar-panel {
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-shadow);
  box-sizing: border-box;
}

.ui-card--panel,
.auth-card,
.settings-v2-profile-card,
.card,
.ritual-card,
.chart-wrap,
.house-table,
.calendar-panel {
  --ui-card-radius: var(--qh-radius-xl);
  --ui-card-shadow: var(--qh-card-shadow);
}

.ui-card--modal,
.modal-card {
  --ui-card-radius: var(--qh-radius-xl);
  --ui-card-shadow: var(--qh-card-shadow-strong);
}

.ui-card--feature,
.settings-v2-tier-card,
.settings-v2-tier-summary {
  --ui-card-radius: var(--qh-radius-feature);
}

.ui-card--soft {
  --ui-card-bg: var(--qh-surface-soft);
}

.ui-card--elevated {
  --ui-card-shadow: var(--qh-card-shadow-strong);
}

.settings-v2-avatar-btn-icon-slot,
.settings-v2-avatar-btn > span:last-child {
  line-height: 1;
}