/*
 * HairCoPilot / HairColorGPT — User Settings CSS Contract
 * FINAL contract for every tab rendered inside #hcgpt-app-view-settings.
 *
 * Scope:
 * - HairColorGPT main plugin: Usage, Pref, Shared, Archive
 * - hcgpt-membership: Profile, Salon, Invites, Plan, Orders, Billings, Team
 * - hcgpt-salon-suite where it renders User Settings / Salon-related panels
 *
 * Visual model:
 * - Borderless layered surfaces
 * - Consistent 800px settings shell
 * - No borders on cards, panels, rows, stats, forms, inputs, selects, textareas
 * - Borders allowed only for explicit button variants: secondary, ghost, danger-outline
 * - Dashicons / approved SVG only, no emoji icons
 * - Neuton page titles, Open Sans body, Roboto Mono eyebrows/badges
 *
 * This file is a contract, not inspiration.
 */

#hcgpt-app-view-settings {
  /* Layout */
  --hcgpt-settings-content-width: 800px;
  /* Phase 4V-1: documented opt-in wide width for tabs that need a wider grid
     (e.g. Salon / Team). Use by adding `.hcgpt-settings-page--wide` to the
     page wrapper. No tab uses this by default — Salon/Team currently share
     the standard 800px column. */
  --hcgpt-settings-content-width-wide: 960px;
  --hcgpt-settings-page-inline-padding: 16px;
  --hcgpt-settings-page-top-gap: 34px;
  --hcgpt-settings-title-subtitle-gap: 6px;
  --hcgpt-settings-header-content-gap: 24px;
  --hcgpt-settings-card-gap: 18px;
  --hcgpt-settings-section-gap: 18px;
  --hcgpt-settings-page-bottom-gap: 48px;

  /* Radius */
  --hcgpt-settings-radius-card: 18px;
  --hcgpt-settings-radius-control: 12px;
  --hcgpt-settings-radius-small: 10px;
  --hcgpt-settings-radius-pill: 999px;

  /* Typography */
  --hcgpt-settings-title-size: clamp(2rem, 3vw, 2.6rem);
  --hcgpt-settings-subtitle-size: 14px;
  --hcgpt-settings-card-title-size: 15px;
  --hcgpt-settings-body-size: 14px;
  --hcgpt-settings-small-size: 12px;
  --hcgpt-settings-eyebrow-size: 11px;

  /* Borderless surface scale — light */
  --hcgpt-settings-surface-canvas: #f6f6f7;
  --hcgpt-settings-surface-0: transparent;
  --hcgpt-settings-surface-1: #ffffff;
  --hcgpt-settings-surface-2: #f1f1f3;
  --hcgpt-settings-surface-3: #e8e8eb;
  --hcgpt-settings-surface-4: #dedee3;
  --hcgpt-settings-surface-raised: #ffffff;

  /* Backwards mapping to older UI tokens */
  --hcgpt-color-surface: var(--hcgpt-settings-surface-1);
  --hcgpt-color-surface-2: var(--hcgpt-settings-surface-2);

  /* Brand / accent */
  --hcgpt-brand-1-readable: var(--hcgpt-brand-1, #6e3aff);
  --hcgpt-brand-link: var(--hcgpt-brand-1-readable);
  --hcgpt-brand-bg: color-mix(in srgb, var(--hcgpt-brand-1-readable) 12%, transparent);
  --hcgpt-focus-ring: color-mix(in srgb, var(--hcgpt-brand-1-readable) 22%, transparent);

  /* Danger */
  --hcgpt-danger-bg: #fff0f1;
  --hcgpt-danger-bg-hover: #ffe1e4;
  --hcgpt-danger-text: #b4232f;
  --hcgpt-danger-soft-shadow: color-mix(in srgb, var(--hcgpt-danger-text) 16%, transparent);

  /* Buttons: borders allowed only here */
  --hcgpt-button-border: color-mix(in srgb, var(--hcgpt-color-text, #111827) 16%, transparent);
  --hcgpt-button-border-hover: color-mix(in srgb, var(--hcgpt-color-text, #111827) 24%, transparent);
}

[data-hcgpt-theme="dark"] #hcgpt-app-view-settings,
[data-hcgpt-resolved-theme="dark"] #hcgpt-app-view-settings,
body.hcgpt-theme-dark #hcgpt-app-view-settings,
#hcgpt-app-view-settings[data-hcgpt-theme="dark"],
#hcgpt-app-view-settings[data-hcgpt-resolved-theme="dark"] {
  --hcgpt-settings-surface-canvas: #000000;
  --hcgpt-settings-surface-0: transparent;
  --hcgpt-settings-surface-1: #141416;
  --hcgpt-settings-surface-2: #1c1c1f;
  --hcgpt-settings-surface-3: #252529;
  --hcgpt-settings-surface-4: #303035;
  --hcgpt-settings-surface-raised: #19191c;

  --hcgpt-color-surface: var(--hcgpt-settings-surface-1);
  --hcgpt-color-surface-2: var(--hcgpt-settings-surface-2);

  --hcgpt-brand-1-readable: #9b7cff;
  --hcgpt-brand-link: #b69cff;
  --hcgpt-brand-bg: color-mix(in srgb, var(--hcgpt-brand-1-readable) 16%, transparent);
  --hcgpt-focus-ring: color-mix(in srgb, var(--hcgpt-brand-1-readable) 28%, transparent);

  --hcgpt-danger-bg: #341417;
  --hcgpt-danger-bg-hover: #481b20;
  --hcgpt-danger-text: #ff8a94;
  --hcgpt-danger-soft-shadow: color-mix(in srgb, var(--hcgpt-danger-text) 16%, transparent);

  --hcgpt-button-border: color-mix(in srgb, #ffffff 20%, transparent);
  --hcgpt-button-border-hover: color-mix(in srgb, #ffffff 30%, transparent);
}

/* -------------------------------------------------------------------------- */
/* Zero-reset inside Settings: prevent legacy WP/admin leakage                 */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings *,
#hcgpt-app-view-settings *::before,
#hcgpt-app-view-settings *::after {
  box-sizing: border-box;
}

#hcgpt-app-view-settings {
  background: var(--hcgpt-settings-surface-canvas);
  color: var(--hcgpt-color-text, #101828);
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
}

/* -------------------------------------------------------------------------- */
/* Page shell                                                                 */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-page {
  width: min(var(--hcgpt-settings-content-width), calc(100% - (var(--hcgpt-settings-page-inline-padding) * 2)));
  max-width: var(--hcgpt-settings-content-width);
  margin-inline: auto;
  padding-block: var(--hcgpt-settings-page-top-gap) var(--hcgpt-settings-page-bottom-gap);
  padding-inline: 0;
  background: transparent;
}

/* Phase 4V-1: opt-in wide page modifier. Not used by any current tab; reserved
   for an explicit, documented exception (Salon / Team / Workspace). Pages that
   adopt this must justify the wider grid in the audit report. */
#hcgpt-app-view-settings .hcgpt-settings-page.hcgpt-settings-page--wide {
  width: min(var(--hcgpt-settings-content-width-wide), calc(100% - (var(--hcgpt-settings-page-inline-padding) * 2)));
  max-width: var(--hcgpt-settings-content-width-wide);
}

#hcgpt-app-view-settings .hcgpt-settings-page + .hcgpt-settings-page {
  padding-top: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 var(--hcgpt-settings-header-content-gap);
  /* Phase 4V-1: header must share the page axis. Inline padding lives on the
     page (none today, full width). Any legacy 12px header padding would shift
     the title relative to content. */
  padding-inline: 0;
  max-width: none;
  width: 100%;
}

/* Phase 4V-4: mockup-faithful header stacking. The mockup wraps title + subtitle in
   `.hcgpt-settings-page__heading` so the subtitle sits UNDER the title. Several
   templates instead emit `<h1 __title> + <p __subtitle>` as direct children of
   `__header`, so flex `space-between` floated the subtitle to the right (and its
   position varied per page). When that wrapper is absent — and the header isn't the
   public-links variant, which already stacks via `.hcgpt-public-header-copy` — stack
   the children so the subtitle drops under the title (its own 6px margin-top gives
   the gap). Headers that DO ship `__heading` keep the row layout (heading left,
   actions right). */
#hcgpt-app-view-settings .hcgpt-settings-page__header:not(.hcgpt-public-header):not(:has(.hcgpt-settings-page__heading)) {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-page__heading {
  min-width: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-page__title {
  margin: 0;
  font-family: var(--hcgpt-font-editorial, Neuton, Georgia, serif);
  font-size: var(--hcgpt-settings-title-size);
  line-height: 0.98;
  font-weight: 800;
  color: var(--hcgpt-color-text, #101828);
  text-wrap: balance;
}

#hcgpt-app-view-settings .hcgpt-settings-page__subtitle {
  margin: var(--hcgpt-settings-title-subtitle-gap) 0 0;
  max-width: 560px;
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
  font-size: var(--hcgpt-settings-subtitle-size);
  line-height: 1.5;
  color: var(--hcgpt-color-text-muted, #667085);
}

#hcgpt-app-view-settings .hcgpt-settings-page__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
  flex: 0 0 auto;
}

#hcgpt-app-view-settings .hcgpt-settings-page__content {
  display: grid;
  gap: var(--hcgpt-settings-card-gap);
  /* Phase 4V-1: content shares the page axis; no inner inline padding or
     max-width caps. Width comes from the page wrapper (800px or wide token). */
  padding-inline: 0;
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

/* -------------------------------------------------------------------------- */
/* Borderless cards, panels, rows                                             */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-card,
#hcgpt-app-view-settings .hcgpt-settings-field-card,
#hcgpt-app-view-settings .hcgpt-settings-panel,
#hcgpt-app-view-settings .hcgpt-settings-list-item,
#hcgpt-app-view-settings .hcgpt-settings-stat,
#hcgpt-app-view-settings .hcgpt-settings-row,
#hcgpt-app-view-settings .hcgpt-settings-empty-state,
#hcgpt-app-view-settings .hcgpt-settings-table-card,
#hcgpt-app-view-settings .hcgpt-settings-danger-zone,
#hcgpt-app-view-settings .hcgpt-settings-notice {
  border: 0;
  box-shadow: none;
}

#hcgpt-app-view-settings .hcgpt-settings-card {
  padding: 22px 24px;
  border-radius: var(--hcgpt-settings-radius-card);
  background: var(--hcgpt-settings-surface-1);
}

#hcgpt-app-view-settings .hcgpt-settings-card--subtle {
  background: var(--hcgpt-settings-surface-2);
}

#hcgpt-app-view-settings .hcgpt-settings-card--flat {
  background: transparent;
  padding-inline: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-panel {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--hcgpt-settings-surface-2);
}

/* Structured card: header/body/footer without borders */
#hcgpt-app-view-settings .hcgpt-settings-card--structured {
  padding: 0;
  overflow: hidden;
}

#hcgpt-app-view-settings .hcgpt-settings-card__header,
#hcgpt-app-view-settings .hcgpt-settings-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: var(--hcgpt-settings-surface-2);
  border: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-card__body {
  padding: 22px 24px;
  background: var(--hcgpt-settings-surface-1);
}

#hcgpt-app-view-settings .hcgpt-settings-card__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-card__heading-text {
  min-width: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-card__eyebrow,
#hcgpt-app-view-settings .hcgpt-settings-eyebrow {
  margin: 0 0 6px;
  font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
  font-size: var(--hcgpt-settings-eyebrow-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hcgpt-color-text-muted, #667085);
}

#hcgpt-app-view-settings .hcgpt-settings-card__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
  font-size: var(--hcgpt-settings-card-title-size);
  line-height: 1.3;
  font-weight: 700;
  color: var(--hcgpt-color-text, #101828);
}

#hcgpt-app-view-settings .hcgpt-settings-card__description {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hcgpt-color-text-muted, #667085);
}

/* -------------------------------------------------------------------------- */
/* Icons                                                                      */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hcgpt-brand-bg);
  color: var(--hcgpt-brand-1-readable);
  border: 1px solid color-mix(in srgb, var(--hcgpt-brand-1-readable, #6e3aff) 22%, transparent);
  box-sizing: border-box;
  flex: 0 0 40px;
  margin: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-icon.dashicons::before {
  width: 19px;
  height: 19px;
  font-size: 19px;
  line-height: 1;
}

#hcgpt-app-view-settings .hcgpt-settings-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}

#hcgpt-app-view-settings :is(
  .hcgpt-settings-card__title,
  .hcgpt-mb-card__title,
  .hcgpt-user-limit-card__title
) {
  display: flex;
  align-items: center;
  gap: 14px;
}

#hcgpt-app-view-settings :is(
  .hcgpt-settings-card__title,
  .hcgpt-mb-card__title,
  .hcgpt-user-limit-card__title
) > .dashicons:first-child:not(.hcgpt-settings-icon) {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  margin: 0;
  box-sizing: border-box;
  background: var(--hcgpt-brand-bg);
  color: var(--hcgpt-brand-1-readable);
  border: 1px solid color-mix(in srgb, var(--hcgpt-brand-1-readable, #6e3aff) 22%, transparent);
}

#hcgpt-app-view-settings :is(
  .hcgpt-settings-card__title,
  .hcgpt-mb-card__title,
  .hcgpt-user-limit-card__title
) > .dashicons:first-child:not(.hcgpt-settings-icon)::before {
  width: 19px;
  height: 19px;
  font-size: 19px;
  line-height: 1;
}

/* Icons must live in headers, never attached to form controls */
#hcgpt-app-view-settings .hcgpt-settings-icon + input,
#hcgpt-app-view-settings .hcgpt-settings-icon + select,
#hcgpt-app-view-settings .hcgpt-settings-icon + textarea {
  margin-left: 14px; /* fallback safety; templates should not use this structure */
}

/* -------------------------------------------------------------------------- */
/* Field cards                                                                */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#hcgpt-app-view-settings .hcgpt-settings-field-card {
  padding: 22px 24px;
  border-radius: var(--hcgpt-settings-radius-card);
  background: var(--hcgpt-settings-surface-1);
}

#hcgpt-app-view-settings .hcgpt-settings-field-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

#hcgpt-app-view-settings .hcgpt-settings-field-card__heading {
  min-width: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-field-card__title {
  margin: 0;
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--hcgpt-color-text, #101828);
}

#hcgpt-app-view-settings .hcgpt-settings-field-card__description,
#hcgpt-app-view-settings .hcgpt-settings-field-card__hint {
  margin: 0;
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.45;
  color: var(--hcgpt-color-text-muted, #667085);
}

#hcgpt-app-view-settings .hcgpt-settings-field-card__control {
  display: grid;
  gap: 8px;
}

/* -------------------------------------------------------------------------- */
/* Forms: borderless by default                                               */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings input[type="text"],
#hcgpt-app-view-settings input[type="email"],
#hcgpt-app-view-settings input[type="password"],
#hcgpt-app-view-settings input[type="url"],
#hcgpt-app-view-settings input[type="tel"],
#hcgpt-app-view-settings input[type="number"],
#hcgpt-app-view-settings input[type="search"],
#hcgpt-app-view-settings input[type="date"],
#hcgpt-app-view-settings input[type="time"],
#hcgpt-app-view-settings select,
#hcgpt-app-view-settings textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: var(--hcgpt-settings-radius-control);
  background: var(--hcgpt-settings-surface-2);
  color: var(--hcgpt-color-text, #101828);
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  transition: background-color .16s ease, box-shadow .16s ease;
}

#hcgpt-app-view-settings textarea {
  min-height: 112px;
  padding-block: 12px;
  resize: vertical;
}

#hcgpt-app-view-settings input:hover,
#hcgpt-app-view-settings select:hover,
#hcgpt-app-view-settings textarea:hover {
  background: var(--hcgpt-settings-surface-3);
}

/* Phase 4R-STRICT: quiet focus — the brand-tinted 3px halo read as an unwanted
   "selected" state. Replaced with a neutral 1px inset hairline + the existing
   surface lift, so focus stays visible but product-like (no purple glow). */
#hcgpt-app-view-settings input:focus,
#hcgpt-app-view-settings select:focus,
#hcgpt-app-view-settings textarea:focus {
  background: var(--hcgpt-settings-surface-1);
  box-shadow: inset 0 0 0 1px var(--hcgpt-color-border-strong, #d0d0d5);
}

#hcgpt-app-view-settings input::placeholder,
#hcgpt-app-view-settings textarea::placeholder {
  color: color-mix(in srgb, var(--hcgpt-color-text-muted, #667085) 78%, transparent);
}

#hcgpt-app-view-settings label,
#hcgpt-app-view-settings .hcgpt-settings-field {
  display: grid;
  gap: 8px;
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 650;
  color: var(--hcgpt-color-text, #101828);
}

#hcgpt-app-view-settings label small,
#hcgpt-app-view-settings .hcgpt-settings-field-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--hcgpt-color-text-muted, #667085);
}

/* Choice chips */
#hcgpt-app-view-settings .hcgpt-settings-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#hcgpt-app-view-settings .hcgpt-settings-choice {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--hcgpt-settings-radius-pill);
  background: var(--hcgpt-settings-surface-2);
  color: var(--hcgpt-color-text, #101828);
  font-weight: 700;
  cursor: pointer;
}

#hcgpt-app-view-settings .hcgpt-settings-choice:hover {
  background: var(--hcgpt-settings-surface-3);
}

#hcgpt-app-view-settings .hcgpt-settings-choice.is-selected,
#hcgpt-app-view-settings .hcgpt-settings-choice[aria-pressed="true"] {
  background: var(--hcgpt-brand-bg);
  color: var(--hcgpt-brand-1-readable);
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease;
}

#hcgpt-app-view-settings .hcgpt-btn .dashicons {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

#hcgpt-app-view-settings .hcgpt-btn:hover {
  transform: translateY(-1px);
}

/* Phase 4R-STRICT: quiet keyboard focus — neutral outline instead of a purple halo. */
#hcgpt-app-view-settings .hcgpt-btn:focus-visible {
  outline: 2px solid var(--hcgpt-color-border-strong, #d0d0d5);
  outline-offset: 2px;
  box-shadow: none;
}

#hcgpt-app-view-settings .hcgpt-btn--primary {
  min-height: 44px;
  padding-inline: 20px;
  border-radius: var(--hcgpt-settings-radius-pill);
  background: var(--hcgpt-brand-gradient, linear-gradient(135deg, #6e3aff, #e738ce, #ff7a3d));
  color: #fff;
  /* Phase 4R-STRICT: calmed — the large brand-tinted glow (0 10px 24px) read as
     marketing decoration. Restrained neutral elevation; gradient fill retained. */
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

#hcgpt-app-view-settings .hcgpt-btn--utility {
  background: var(--hcgpt-settings-surface-2);
  color: var(--hcgpt-color-text, #101828);
}

#hcgpt-app-view-settings .hcgpt-btn--utility:hover {
  background: var(--hcgpt-settings-surface-3);
}

#hcgpt-app-view-settings .hcgpt-btn--secondary,
#hcgpt-app-view-settings .hcgpt-btn--ghost {
  background: transparent;
  color: var(--hcgpt-color-text, #101828);
  border: 1px solid var(--hcgpt-button-border);
}

#hcgpt-app-view-settings .hcgpt-btn--secondary:hover,
#hcgpt-app-view-settings .hcgpt-btn--ghost:hover {
  background: var(--hcgpt-settings-surface-2);
  border-color: var(--hcgpt-button-border-hover);
}

#hcgpt-app-view-settings .hcgpt-btn--danger {
  background: var(--hcgpt-danger-bg);
  color: var(--hcgpt-danger-text);
  border: 0;
}

#hcgpt-app-view-settings .hcgpt-btn--danger:hover {
  background: var(--hcgpt-danger-bg-hover);
}

#hcgpt-app-view-settings .hcgpt-btn--danger-bulk {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: var(--hcgpt-settings-radius-pill);
  background: var(--hcgpt-danger-bg);
  color: var(--hcgpt-danger-text);
  border: 0;
  font-weight: 800;
  /* Phase 4V-2: removed the heavy red glow (0 10px 24px) — it read as a marketing
     banner. Destructive intent stays via the danger fill + text; elevation is now
     restrained and neutral, matching the calmed `.hcgpt-btn--primary`. */
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

#hcgpt-app-view-settings .hcgpt-btn--danger-bulk:hover {
  background: var(--hcgpt-danger-bg-hover);
}

#hcgpt-app-view-settings .hcgpt-btn--danger-outline {
  background: transparent;
  color: var(--hcgpt-danger-text);
  border: 1px solid color-mix(in srgb, var(--hcgpt-danger-text) 38%, transparent);
}

/* Legacy WP buttons inside settings must be visually neutralized until migrated */
#hcgpt-app-view-settings .button,
#hcgpt-app-view-settings .button-primary,
#hcgpt-app-view-settings .button-secondary,
#hcgpt-app-view-settings .button-link {
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
}

/* -------------------------------------------------------------------------- */
/* Links                                                                      */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings a {
  color: var(--hcgpt-brand-link);
}

#hcgpt-app-view-settings .hcgpt-settings-url,
#hcgpt-app-view-settings .hcgpt-settings-list-item__url {
  color: var(--hcgpt-brand-link);
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------- */
/* Lists: Shared / Archive / Orders / Billings                                */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-list {
  display: grid;
  gap: 16px;
}

#hcgpt-app-view-settings .hcgpt-settings-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border-radius: var(--hcgpt-settings-radius-card);
  background: var(--hcgpt-settings-surface-1);
}

#hcgpt-app-view-settings .hcgpt-settings-list-item--subtle {
  background: var(--hcgpt-settings-surface-2);
}

#hcgpt-app-view-settings .hcgpt-settings-list-item__title {
  margin: 0 0 8px;
  font-family: var(--hcgpt-font-sans, "Open Sans", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--hcgpt-color-text, #101828);
}

#hcgpt-app-view-settings .hcgpt-settings-list-item__url {
  margin: 0 0 8px;
  font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
  font-size: 13px;
  line-height: 1.45;
}

#hcgpt-app-view-settings .hcgpt-settings-list-item__meta {
  margin: 0;
  font-size: 12px;
  color: var(--hcgpt-color-text-muted, #667085);
}

#hcgpt-app-view-settings .hcgpt-settings-list-item__actions {
  display: grid;
  gap: 10px;
  min-width: 132px;
}

/* Tables as borderless list surfaces */
#hcgpt-app-view-settings .hcgpt-settings-table-card {
  overflow: hidden;
  border-radius: var(--hcgpt-settings-radius-card);
  background: var(--hcgpt-settings-surface-1);
}

#hcgpt-app-view-settings .hcgpt-settings-table {
  width: 100%;
  border-collapse: collapse;
}

#hcgpt-app-view-settings .hcgpt-settings-table th,
#hcgpt-app-view-settings .hcgpt-settings-table td {
  padding: 14px 16px;
  border: 0;
  text-align: left;
}

#hcgpt-app-view-settings .hcgpt-settings-table thead {
  background: var(--hcgpt-settings-surface-2);
}

#hcgpt-app-view-settings .hcgpt-settings-table tbody tr:nth-child(even) {
  background: var(--hcgpt-settings-surface-2);
}

/* -------------------------------------------------------------------------- */
/* Stats, progress, rows                                                      */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

#hcgpt-app-view-settings .hcgpt-settings-stat {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--hcgpt-settings-surface-2);
}

#hcgpt-app-view-settings .hcgpt-settings-stat__number {
  margin: 0 0 4px;
  font-family: var(--hcgpt-font-editorial, Neuton, Georgia, serif);
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  color: var(--hcgpt-brand-1-readable);
}

#hcgpt-app-view-settings .hcgpt-settings-stat__label {
  margin: 0;
  font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hcgpt-color-text-muted, #667085);
}

#hcgpt-app-view-settings .hcgpt-progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--hcgpt-settings-radius-pill);
  background: var(--hcgpt-settings-surface-3);
}

#hcgpt-app-view-settings .hcgpt-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--hcgpt-brand-gradient, linear-gradient(135deg, #6e3aff, #e738ce, #ff7a3d));
}

#hcgpt-app-view-settings .hcgpt-settings-row {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--hcgpt-settings-surface-2);
}

#hcgpt-app-view-settings .hcgpt-settings-row--nested {
  background: var(--hcgpt-settings-surface-3);
}

/* -------------------------------------------------------------------------- */
/* Empty, feedback, notices, danger zone                                      */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-empty-state {
  padding: 34px 24px;
  border-radius: var(--hcgpt-settings-radius-card);
  background: var(--hcgpt-settings-surface-1);
  text-align: center;
}

#hcgpt-app-view-settings .hcgpt-settings-empty-state__title {
  margin: 0 0 8px;
  font-family: var(--hcgpt-font-editorial, Neuton, Georgia, serif);
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 800;
  color: var(--hcgpt-color-text, #101828);
}

#hcgpt-app-view-settings .hcgpt-settings-empty-state__body {
  margin: 0 auto;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hcgpt-color-text-muted, #667085);
}

#hcgpt-app-view-settings .hcgpt-settings-notice {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--hcgpt-settings-surface-2);
  color: var(--hcgpt-color-text, #101828);
}

#hcgpt-app-view-settings .hcgpt-settings-notice--success {
  background: color-mix(in srgb, #16a34a 12%, var(--hcgpt-settings-surface-1));
}

#hcgpt-app-view-settings .hcgpt-settings-notice--warning {
  background: color-mix(in srgb, #f59e0b 14%, var(--hcgpt-settings-surface-1));
}

#hcgpt-app-view-settings .hcgpt-settings-notice--danger,
#hcgpt-app-view-settings .hcgpt-settings-danger-zone {
  background: var(--hcgpt-danger-bg);
  color: var(--hcgpt-danger-text);
}

#hcgpt-app-view-settings .hcgpt-settings-notice--promoted {
  display: none;
}

#hcgpt-app-view-settings .hcgpt-settings-danger-zone {
  padding: 20px 22px;
  border-radius: var(--hcgpt-settings-radius-card);
}

/* -------------------------------------------------------------------------- */
/* Form actions                                                               */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}


/* -------------------------------------------------------------------------- */
/* Accessibility / ARIA                                                        */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#hcgpt-app-view-settings [aria-current="page"] {
  color: var(--hcgpt-brand-link);
}

#hcgpt-app-view-settings [aria-invalid="true"] {
  background: color-mix(in srgb, var(--hcgpt-danger-bg) 65%, var(--hcgpt-settings-surface-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hcgpt-danger-text) 18%, transparent);
}

#hcgpt-app-view-settings .hcgpt-settings-field-error {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--hcgpt-danger-text);
}

#hcgpt-app-view-settings [disabled],
#hcgpt-app-view-settings [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .56;
  transform: none;
}

#hcgpt-app-view-settings [aria-busy="true"] {
  cursor: progress;
}

#hcgpt-app-view-settings .hcgpt-settings-choice[role="radio"][aria-checked="true"],
#hcgpt-app-view-settings .hcgpt-settings-choice[role="switch"][aria-checked="true"] {
  background: var(--hcgpt-brand-bg);
  color: var(--hcgpt-brand-1-readable);
}

/* Phase 4R-STRICT: keyboard focus is kept accessible but neutral — a 2px
   neutral outline instead of the brand-tinted halo. No purple glow. */
#hcgpt-app-view-settings .hcgpt-settings-choice:focus-visible,
#hcgpt-app-view-settings .hcgpt-settings-tabs a:focus-visible,
#hcgpt-app-view-settings a:focus-visible,
#hcgpt-app-view-settings button:focus-visible,
#hcgpt-app-view-settings input:focus-visible,
#hcgpt-app-view-settings select:focus-visible,
#hcgpt-app-view-settings textarea:focus-visible {
  outline: 2px solid var(--hcgpt-color-border-strong, #d0d0d5);
  outline-offset: 2px;
  box-shadow: none;
}

#hcgpt-app-view-settings .hcgpt-settings-notice[role="status"],
#hcgpt-app-view-settings .hcgpt-settings-notice[role="alert"] {
  font-weight: 650;
}

@media (prefers-reduced-motion: reduce) {
  #hcgpt-app-view-settings *,
  #hcgpt-app-view-settings *::before,
  #hcgpt-app-view-settings *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}


/* -------------------------------------------------------------------------- */
/* Additional state patterns: info panels, empty icons, compact status         */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-info-panel {
  padding: 20px 24px;
  border: 0;
  border-radius: var(--hcgpt-settings-radius-card);
  background: var(--hcgpt-settings-surface-2);
  color: var(--hcgpt-color-text-muted, #667085);
  text-align: left;
  box-shadow: none;
}

#hcgpt-app-view-settings .hcgpt-settings-info-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

#hcgpt-app-view-settings .hcgpt-settings-empty-state__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--hcgpt-settings-surface-2);
  color: var(--hcgpt-color-text-muted, #667085);
}

#hcgpt-app-view-settings .hcgpt-settings-empty-state__icon.dashicons::before {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

#hcgpt-app-view-settings .hcgpt-settings-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--hcgpt-settings-radius-pill);
  background: color-mix(in srgb, #16a34a 16%, var(--hcgpt-settings-surface-2));
  color: #16a34a;
  font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

#hcgpt-app-view-settings .hcgpt-settings-plan-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

#hcgpt-app-view-settings .hcgpt-settings-plan-name {
  margin: 0;
  font-family: var(--hcgpt-font-editorial, Neuton, Georgia, serif);
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  color: var(--hcgpt-color-text, #101828);
}

#hcgpt-app-view-settings .hcgpt-settings-muted {
  color: var(--hcgpt-color-text-muted, #667085);
}


/* -------------------------------------------------------------------------- */
/* Schedule / working-hours list                                               */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-schedule-list {
  display: grid;
  gap: 2px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--hcgpt-settings-surface-2);
  box-shadow: none;
}

#hcgpt-app-view-settings .hcgpt-settings-schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 12px 16px;
  background: var(--hcgpt-settings-surface-1);
  border: 0;
  border-radius: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-schedule-row:nth-child(even) {
  background: var(--hcgpt-settings-surface-2);
}

#hcgpt-app-view-settings .hcgpt-settings-schedule-row__day {
  font-weight: 700;
  color: var(--hcgpt-color-text, #101828);
}

#hcgpt-app-view-settings .hcgpt-settings-schedule-row__time {
  font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--hcgpt-color-text-muted, #667085);
  white-space: nowrap;
}


/* -------------------------------------------------------------------------- */
/* Section heading with icon for simple cards                                  */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin-bottom: 16px;
}

#hcgpt-app-view-settings .hcgpt-settings-section-heading > div {
  min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  #hcgpt-app-view-settings {
    --hcgpt-settings-page-inline-padding: 12px;
    --hcgpt-settings-page-top-gap: 24px;
    --hcgpt-settings-header-content-gap: 20px;
    --hcgpt-settings-page-bottom-gap: 36px;
  }

  #hcgpt-app-view-settings .hcgpt-settings-page__header,
  #hcgpt-app-view-settings .hcgpt-settings-card__header,
  #hcgpt-app-view-settings .hcgpt-settings-card__footer {
    flex-direction: column;
    align-items: stretch;
  }

  #hcgpt-app-view-settings .hcgpt-settings-page__actions {
    justify-content: flex-start;
  }

  #hcgpt-app-view-settings .hcgpt-settings-field-grid {
    grid-template-columns: 1fr;
  }

  #hcgpt-app-view-settings .hcgpt-settings-list-item {
    grid-template-columns: 1fr;
  }

  #hcgpt-app-view-settings .hcgpt-settings-list-item__actions {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }

  #hcgpt-app-view-settings .hcgpt-form-actions {
    flex-direction: column;
  }

  #hcgpt-app-view-settings .hcgpt-form-actions .hcgpt-btn,
  #hcgpt-app-view-settings .hcgpt-settings-page__actions .hcgpt-btn {
    width: 100%;
  }

  #hcgpt-app-view-settings .hcgpt-settings-card,
  #hcgpt-app-view-settings .hcgpt-settings-field-card,
  #hcgpt-app-view-settings .hcgpt-settings-list-item,
  #hcgpt-app-view-settings .hcgpt-settings-empty-state,
  #hcgpt-app-view-settings .hcgpt-settings-danger-zone {
    padding: 18px;
  }

  #hcgpt-app-view-settings .hcgpt-settings-card--structured {
    padding: 0;
  }

  #hcgpt-app-view-settings .hcgpt-settings-card__header,
  #hcgpt-app-view-settings .hcgpt-settings-card__body,
  #hcgpt-app-view-settings .hcgpt-settings-card__footer {
    padding: 18px;
  }
}

#hcgpt-app-view-settings .hcgpt-form-actions--start { justify-content: flex-start; }

#hcgpt-app-view-settings .hcgpt-settings-table-card__heading { padding: 18px 18px 0; }


/* -------------------------------------------------------------------------- */
/* Living-styleguide state variants                                            */
/* -------------------------------------------------------------------------- */

#hcgpt-app-view-settings .hcgpt-settings-state-block {
  display: grid;
  gap: 14px;
}

#hcgpt-app-view-settings .hcgpt-settings-state-label {
  margin: 0;
  font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hcgpt-color-text-muted, #667085);
}

#hcgpt-app-view-settings .hcgpt-settings-state-variant {
  display: grid;
  gap: 14px;
}

#hcgpt-app-view-settings .hcgpt-settings-state-variant + .hcgpt-settings-state-variant {
  margin-top: 10px;
}

#hcgpt-app-view-settings .hcgpt-settings-state-note {
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--hcgpt-settings-surface-2);
  color: var(--hcgpt-color-text-muted, #667085);
  font-size: 13px;
  line-height: 1.5;
}

#hcgpt-app-view-settings .hcgpt-settings-empty-state--compact {
  padding: 26px 22px;
}

#hcgpt-app-view-settings .hcgpt-settings-page__actions .hcgpt-btn .dashicons,
#hcgpt-app-view-settings .hcgpt-settings-list-item__actions .hcgpt-btn .dashicons {
  flex: 0 0 auto;
}