/** * App-shell bridge — applies the HairColorGPT UI Kit dark/card styling * to the modern hcgpt-membership shortcodes when they're rendered * INSIDE the legacy [hcgpt_user_settings] app shell. * * Selectors target the actual markup classes the new plugin emits: * - .hcgpt-mb-profile-form (ProfileForm::render — Profile tab) * - .hcgpt-mb-summary (AccountPage::render_plan_summary — Plan tab, a
) * - .hcgpt-mb-billing (AccountPage::render_billing_placeholder) * - .hcgpt-mb-mga-team (MGATeamPage::render — Team tab) * - .hcgpt-mb-table (generic data table) * - .hcgpt-mb-btn / --primary / --ghost * - .hcgpt-mb-notice / --warning / --error / --success * - .hcgpt-mb-badge / --{status} * - .hcgpt-mb-empty (empty-state messages) * * Tokens reused from `HairColorGPT/assets/css/ui-tokens.css`: * --hcgpt-color-surface / --hcgpt-color-surface-2 / --hcgpt-color-border * --hcgpt-color-text / --hcgpt-color-text-muted * --hcgpt-radius-{md,lg,full} / --hcgpt-text-{xs,sm,base,md,lg} * --hcgpt-primary / --hcgpt-primary-hover * * IMPORTANT — ALWAYS use the `--hcgpt-color-*` token names. They * cascade light/dark via `:root` vs `[data-hcgpt-theme="dark"]`. * Hardcoded fallbacks like `rgba(255,255,255,…)` or `#f1f1f1` look * fine in dark mode but are invisible in light mode (white-on-white). * See `docs/plugins/haircolorgpt/APP_SHELL_TAB_CONTRACT.md` § 9.5. * * @package HCGPT\Membership */ /* ================================================================= Brand v2 tokens (beta.62) — single source of truth for the membership app-shell surfaces (Profile, Plan, Usage, Invites, Billing, Team, Orders). -------------------------------------------------------------------- Beta.64 widened the scope to `:root` after Davide reported the buttons stayed neutral on /account/ — the previous `:where(.hcgpt-mb-profile-form, …)` scope didn't always include the actual button parents (e.g. when the button sits in a tab- header outside the form, or in an admin dropdown). With the tokens at `:root` the `var(--hcgpt-mb-brand-*)` references resolve from any descendant in the document, which is what the buttons / progress bars / pills below assume. -------------------------------------------------------------------- Tokens are name-spaced `--hcgpt-mb-*` so they never collide with HairColorGPT's `--hcgpt-*` tokens (when both plugins' CSS load on the same page). All values defined locally so they resolve even when HairColorGPT/ui-tokens.css isn't on the page (verified live on staging35: /account/ only enqueues hcgpt-membership-{app-shell-bridge,frontend}.min.css, no HairColorGPT CSS at all). ================================================================= */ :root, .hcgpt-mb-profile-form, .hcgpt-mb-summary, .hcgpt-mb-billing, .hcgpt-mb-mga-team, .hcgpt-mb-account, .hcgpt-mb-pricing, .hcgpt-mb-checkout, .hcgpt-mb-profile, .hcgpt-mb-empty, .hcgpt-scope { --hcgpt-mb-brand-1: #6e3aff; --hcgpt-mb-brand-2: #ff3a8c; --hcgpt-mb-brand-3: #ff8a3a; --hcgpt-mb-brand-gradient: linear-gradient(135deg, #6e3aff 0%, #ff3a8c 50%, #ff8a3a 100%); --hcgpt-mb-brand-bg: rgba(110, 58, 255, 0.08); --hcgpt-mb-brand-shadow: 0 8px 20px rgba(110, 58, 255, 0.30); --hcgpt-mb-brand-shadow-lg: 0 12px 28px rgba(110, 58, 255, 0.40); } /* ================================================================= Common spacing for top-level shortcode wrappers ================================================================= */ /* Phase 4V-1: width + auto-centering are scoped to standalone usage. Inside `#hcgpt-app-view-settings` these wrappers also carry `.hcgpt-settings-page` and the V4 contract owns the 800px page width + centering. Allowing the legacy 960px to win would push these shortcodes wider than every other settings tab. Typography stays unscoped. */ .hcgpt-mb-profile-form, .hcgpt-mb-summary, .hcgpt-mb-billing, .hcgpt-mb-mga-team { color: var( --hcgpt-color-text ); font-size: var( --hcgpt-text-base, 16px ); line-height: 1.5; box-sizing: border-box; } .hcgpt-mb-profile-form:not(.hcgpt-settings-page), .hcgpt-mb-summary:not(.hcgpt-settings-page), .hcgpt-mb-billing:not(.hcgpt-settings-page), .hcgpt-mb-mga-team:not(.hcgpt-settings-page) { max-width: 960px; margin: 0 auto; } /* Empty state — used by Plan / Orders / Team when no data */ .hcgpt-mb-empty { color: var( --hcgpt-color-text-muted ); font-size: var( --hcgpt-text-sm, 14px ); background: var( --hcgpt-color-surface ); border: 1px dashed var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-lg, 12px ); padding: 24px 28px; max-width: 960px; margin: 8px auto; } .hcgpt-mb-empty a { color: var( --hcgpt-primary ); text-decoration: underline; } /* ================================================================= Profile form ================================================================= */ .hcgpt-mb-profile-form { /* Phase 3D-4: the Profile cards moved from `.hcgpt-mb-card` (which carried a 18px bottom margin) to the V4 `.hcgpt-settings-card`. The card gap is now provided by making the form a grid, so the V4 borderless cards no longer touch. V4 owns the card/field/button chrome via #id specificity. */ display: grid; gap: var( --hcgpt-settings-card-gap, 18px ); padding: 8px 0 24px; } /* Card chrome — used by Personal info / Billing data inside the profile form AND by the inline 2FA / Delete cards below the form. Selector is form-agnostic on purpose so the 2FA + Delete cards align with the upper Profile cards. */ .hcgpt-mb-card { background: var( --hcgpt-color-surface ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-lg, 12px ); padding: 24px 28px; margin: 0 0 18px; box-sizing: border-box; } .hcgpt-mb-card__title { font-size: var( --hcgpt-text-md, 18px ); font-weight: 600; margin: 0 0 18px; color: var( --hcgpt-color-text ); } .hcgpt-mb-profile-form label { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; } .hcgpt-mb-profile-form label > span { font-size: var( --hcgpt-text-sm, 14px ); color: var( --hcgpt-color-text-muted ); font-weight: 500; } .hcgpt-mb-profile-form label > span > small { display: inline; margin-left: 4px; font-weight: 400; font-size: var( --hcgpt-text-xs, 12px ); color: var( --hcgpt-color-text-muted ); } .hcgpt-mb-profile-form input[type="text"], .hcgpt-mb-profile-form input[type="email"], .hcgpt-mb-profile-form input[type="password"], .hcgpt-mb-profile-form input[type="tel"], .hcgpt-mb-profile-form input[type="url"], .hcgpt-mb-profile-form select, .hcgpt-mb-profile-form textarea { background: var( --hcgpt-color-surface-2 ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); color: var( --hcgpt-color-text ); padding: 10px 12px; font: inherit; width: 100%; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease; } .hcgpt-mb-profile-form input:focus, .hcgpt-mb-profile-form select:focus, .hcgpt-mb-profile-form textarea:focus { border-color: var( --hcgpt-primary ); background: var( --hcgpt-color-surface-2 ); outline: none; } .hcgpt-mb-profile-form button[type="submit"] { background: var( --hcgpt-primary ); color: #fff; border: none; border-radius: var( --hcgpt-radius-full, 9999px ); padding: 12px 32px; font-weight: 600; font-size: var( --hcgpt-text-sm, 14px ); letter-spacing: 0.02em; cursor: pointer; margin-top: 8px; transition: opacity 0.15s ease, transform 0.1s ease; } .hcgpt-mb-profile-form button[type="submit"]:hover { opacity: 0.92; } .hcgpt-mb-profile-form button[type="submit"]:active { transform: translateY( 1px ); } #hcgpt-app-view-settings .hcgpt-mb-profile .hcgpt-settings-page__content, #hcgpt-app-view-settings .hcgpt-mb-profile-form { gap: 22px; } #hcgpt-app-view-settings .hcgpt-mb-profile-form { padding: 0; } #hcgpt-app-view-settings .hcgpt-mb-profile-card { background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); } #hcgpt-app-view-settings .hcgpt-mb-profile-card .hcgpt-settings-card__header, #hcgpt-app-view-settings .hcgpt-mb-card--profile-delete .hcgpt-settings-card__header { min-height: 96px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } #hcgpt-app-view-settings .hcgpt-mb-profile-card .hcgpt-settings-card__body, #hcgpt-app-view-settings .hcgpt-mb-card--profile-delete .hcgpt-settings-card__body { background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); } #hcgpt-app-view-settings .hcgpt-mb-profile-card .hcgpt-settings-card__footer { min-height: 54px; align-items: center; background: var( --hcgpt-settings-surface-3, var( --hcgpt-color-surface-2, #e8e8eb ) ); color: var( --hcgpt-color-text-muted, #667085 ); font-size: 12px; line-height: 1.45; } #hcgpt-app-view-settings .hcgpt-mb-profile-card .hcgpt-settings-card__footer strong { flex: 0 0 auto; color: var( --hcgpt-color-text, #101828 ); font-family: var( --hcgpt-font-mono, "Roboto Mono", monospace ); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #hcgpt-app-view-settings .hcgpt-mb-profile-card .hcgpt-settings-card__footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hcgpt-app-view-settings .hcgpt-mb-profile-card__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hcgpt-app-view-settings .hcgpt-mb-profile-field-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 14px; } #hcgpt-app-view-settings .hcgpt-mb-business-fields.hcgpt-mb-profile-field-grid { margin-top: 14px; } #hcgpt-app-view-settings .hcgpt-mb-profile-field { display: flex; min-width: 0; min-height: 104px; flex-direction: column; justify-content: center; gap: 8px; margin: 0; padding: 14px; border-radius: 14px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } #hcgpt-app-view-settings .hcgpt-mb-profile-field > span { display: block; overflow: hidden; color: var( --hcgpt-color-text-muted, #667085 ); font-family: var( --hcgpt-font-mono, "Roboto Mono", monospace ); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } #hcgpt-app-view-settings .hcgpt-mb-profile-field > span > small { display: inline; margin-left: 4px; color: var( --hcgpt-color-text-muted, #667085 ); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } #hcgpt-app-view-settings .hcgpt-mb-profile-field :is(input:not([type="checkbox"]), select, textarea) { min-height: 44px; background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); border: 0; border-radius: 12px; color: var( --hcgpt-color-text, #101828 ); padding: 0 14px; } #hcgpt-app-view-settings .hcgpt-mb-profile-field textarea { min-height: 96px; padding-top: 12px; padding-bottom: 12px; } #hcgpt-app-view-settings .hcgpt-mb-avatar-field { display: grid; grid-template-columns: 180px minmax( 0, 1fr ); gap: 18px; align-items: stretch; } #hcgpt-app-view-settings .hcgpt-mb-avatar-field__controls { min-width: 0; padding: 16px; border-radius: 14px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } #hcgpt-app-view-settings .hcgpt-mb-avatar-field__upload, #hcgpt-app-view-settings .hcgpt-mb-avatar-field__remove { margin: 0; } #hcgpt-app-view-settings .hcgpt-mb-avatar-field__hint { margin: 0; color: var( --hcgpt-color-text-muted, #667085 ); font-size: 12px; line-height: 1.45; } #hcgpt-app-view-settings .hcgpt-mb-card--profile-2fa .hcgpt-mb-security { max-width: none; padding: 0; } #hcgpt-app-view-settings .hcgpt-mb-card--profile-delete { background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); } #hcgpt-app-view-settings .hcgpt-mb-card--profile-delete > .hcgpt-mb-profile-delete__summary, #hcgpt-app-view-settings .hcgpt-mb-card--profile-delete[open] > .hcgpt-mb-profile-delete__summary { margin: 0; padding: 18px 24px; border-bottom: 0; } #hcgpt-app-view-settings .hcgpt-mb-card--profile-delete .hcgpt-mb-profile-delete__body { padding: 22px 24px; } @media ( min-width: 720px ) { /* 2-col grid only on the Personal info / Billing data cards inside the profile
. The 2FA / Delete cards live outside the form so they keep the natural single-column flow. */ .hcgpt-mb-profile-form .hcgpt-mb-card { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } .hcgpt-mb-profile-form .hcgpt-mb-card__title { grid-column: 1 / -1; } .hcgpt-mb-profile-form .hcgpt-mb-card > div { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px; } .hcgpt-mb-profile-form .hcgpt-mb-card > .hcgpt-mb-business-fields { grid-template-columns: 1fr; } } @media ( max-width: 720px ) { #hcgpt-app-view-settings .hcgpt-mb-profile-field-grid, #hcgpt-app-view-settings .hcgpt-mb-avatar-field { grid-template-columns: 1fr; } #hcgpt-app-view-settings .hcgpt-mb-profile-card .hcgpt-settings-card__footer { align-items: flex-start; flex-direction: column; } #hcgpt-app-view-settings .hcgpt-mb-profile-card .hcgpt-settings-card__footer span { white-space: normal; } } /* ================================================================= Plan summary ([hcgpt-membership-account default-tab="plan"]) The
lives inside the canonical `.hcgpt-settings-page__content` wrapper which already ships card chrome — no own background/border here, otherwise double card. ================================================================= */ .hcgpt-mb-summary { display: grid; grid-template-columns: max-content 1fr; gap: 14px 28px; align-items: baseline; margin: 0; } .hcgpt-mb-summary dt { font-size: var( --hcgpt-text-sm, 14px ); color: var( --hcgpt-color-text-muted ); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .hcgpt-mb-summary dd { margin: 0; font-weight: 600; color: var( --hcgpt-color-text ); } /* ================================================================= Billing placeholder card ================================================================= */ .hcgpt-mb-billing { background: var( --hcgpt-color-surface ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-lg, 12px ); box-sizing: border-box; padding: 24px 28px; } .hcgpt-mb-billing > p { margin: 0 0 16px; } .hcgpt-mb-billing__hint { color: var( --hcgpt-color-text-muted ); font-size: var( --hcgpt-text-xs, 12px ); margin-top: 12px !important; } /* Phase 4A: the `.hcgpt-mb-orders-table` block was removed — OrdersTable::render now emits the V4 `.hcgpt-settings-table` inside a `.hcgpt-settings-table-card` (owned by the V4 contract). No markup renders `.hcgpt-mb-orders-table` anymore. */ /* ================================================================= MGA team ================================================================= */ /* `.hcgpt-mb-mga-team` is now the .hcgpt-settings-page wrapper. It also carries `.hcgpt-public-links-container` (added in the render markup) so the entire public-links / archive UI Kit stylesheet (item card chrome, action buttons) applies for free — identical to what `[hcgpt_public_links]` and `[hcgpt_chat_archive]` get on individual list items. But `.hcgpt-public-links-container` ALSO ships `max-width: 800px !important; padding: 40px 20px !important` on the outer wrapper itself. That's fine for Shared/Archive (their

is INSIDE this 800px container), but it makes the title on Team appear visually misaligned with the inner card — because our `__header` (canonical max-width: 800px) gets squeezed by the parent's 40px horizontal padding while the inner `__content` is also 800px-capped, so the title sits farther right than the card. We override BOTH: drop the wrapper max-width + padding so the wrapper is full-width (like Pref's `.hcgpt-preferences-form-wrapper`), and let the canonical `__header` / `__content` (both 800px, margin: 0 auto from `user-settings.css`) handle the visual centering. End result: the page title and the card below it share the exact same 800px column, pixel-perfect aligned, just like Pref. */ /* Same override applies to any of our shortcode wrappers that opt into the .hcgpt-public-links-container chrome (Team, Invites, …). Drops the `max-width: 800px !important` and `padding: 40px 20px !important` that public-links.css ships, then replaces just the top/bottom padding with the canonical .hcgpt-settings-page rhythm so the topbar→title gap matches Profile / Plan / Orders / Billings. */ #hcgpt-app-view-settings .hcgpt-mb-mga-team.hcgpt-public-links-container, .hcgpt-mb-mga-team.hcgpt-public-links-container, #hcgpt-app-view-settings .hcgpt-mb-referral.hcgpt-public-links-container, .hcgpt-mb-referral.hcgpt-public-links-container { max-width: none !important; /* Phase 4V-3: use the V4 page rhythm (34px top / 48px bottom) instead of the legacy clamp (30px / 14px) so Invites + Team match Profile/Plan/Orders. */ padding: var(--hcgpt-settings-page-top-gap) 0 var(--hcgpt-settings-page-bottom-gap) !important; } /* Orders uses the canonical max-width: 800px from `.hcgpt-settings-page__content` — same as Profile / Plan / Billings. No overrides; the 5-column table fits comfortably. */ /* No `text-align` overrides on any hcgpt-membership shortcode header. All page titles use the canonical left-aligned look from `.hcgpt-settings-page__header` (in user-settings.css), matching Shared / Archive / Profile / Plan / Orders / Billings / Team. */ /* Invite section — sub-section of the Team page, sits below the members list. Uses the canonical layout (flex form). */ .hcgpt-mb-mga-team__invite { background: var( --hcgpt-color-surface ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-lg, 12px ); box-sizing: border-box; margin-top: 24px; padding: 24px 28px; } .hcgpt-mb-mga-team__invite > h3 { font-size: var( --hcgpt-text-md, 18px ); font-weight: 600; margin: 0 0 12px; color: var( --hcgpt-color-text ); } /* Invite form — 2-column grid with the primary action isolated below. The previous flex-wrap layout let the browser pack `Email`, `First/Last`, `Level`, `Send invite` on the same row based on whatever widths the placeholders happened to require — visually random. The grid below pins: row 1 │ Email address (full width) row 2 │ First name │ Last name row 3 │ Seat plan / professional level / role row 4 │ Skills row 5 │ [Send invite] ← right-aligned On screens narrower than 540px the grid collapses to a single column for thumb-friendly tap targets. */ .hcgpt-mb-mga-team__invite-form { display: flex; flex-direction: column; gap: 16px; } .hcgpt-mb-mga-team__invite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .hcgpt-mb-mga-team__field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; /* prevent grid blowout on long option labels */ } .hcgpt-mb-mga-team__field--full { grid-column: 1 / -1; } .hcgpt-mb-mga-team__field-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var( --hcgpt-color-text-muted ); text-transform: uppercase; } .hcgpt-mb-mga-team__field-input { width: 100%; box-sizing: border-box; background: var( --hcgpt-color-surface-2 ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); color: var( --hcgpt-color-text ); padding: 10px 12px; font: inherit; line-height: 1.4; transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Phase 4R-STRICT: quiet focus — neutral border-color change, no indigo halo. */ .hcgpt-mb-mga-team__field-input:focus { outline: none; border-color: var( --hcgpt-color-border-strong, #d0d0d5 ); box-shadow: none; } .hcgpt-mb-mga-team__skills, .hcgpt-mb-mga-team__bookable-services { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 14px; background: var( --hcgpt-color-surface-2 ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); } .hcgpt-mb-mga-team__skills legend, .hcgpt-mb-mga-team__bookable-services legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var( --hcgpt-color-text ); } .hcgpt-mb-mga-team__skills-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var( --hcgpt-color-text-muted ); } .hcgpt-mb-mga-team__skills-group { display: flex; flex-direction: column; gap: 8px; } .hcgpt-mb-mga-team__skills-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hcgpt-mb-mga-team__skills-title { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var( --hcgpt-color-text-muted ); } .hcgpt-mb-mga-team__select-all { appearance: none; border: 1px solid var( --hcgpt-color-border ); border-radius: 999px; background: var( --hcgpt-color-surface ); color: var( --hcgpt-color-text-muted ); cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; line-height: 1; padding: 6px 10px; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .hcgpt-mb-mga-team__select-all:hover, .hcgpt-mb-mga-team__select-all:focus-visible { border-color: var( --hcgpt-color-accent ); color: var( --hcgpt-color-text ); background: var( --hcgpt-color-surface-2 ); outline: none; } .hcgpt-mb-mga-team__skills-options { display: flex; flex-wrap: wrap; gap: 8px; } .hcgpt-mb-mga-team__skill-option { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; margin: 0; padding: 7px 10px; background: var( --hcgpt-color-surface ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); color: var( --hcgpt-color-text ); font-size: 13px; line-height: 1.2; cursor: pointer; } .hcgpt-mb-mga-team__skill-option input { margin: 0; } .hcgpt-mb-mga-team__invite-actions { display: flex; justify-content: flex-end; margin-top: 4px; } @media ( max-width: 540px ) { .hcgpt-mb-mga-team__invite-grid { grid-template-columns: 1fr; } .hcgpt-mb-mga-team__invite-actions { justify-content: stretch; } .hcgpt-mb-mga-team__invite-actions .hcgpt-btn { width: 100%; } } .hcgpt-mb-inline-form { display: inline-flex; margin: 0; } /* Edit panel: revealed below the matching team member card when the "Edit" action button toggles its [hidden] attribute via account-tabs.js. */ .hcgpt-mb-team-edit-row[hidden] { display: none; } .hcgpt-mb-team-edit-row { background: var( --hcgpt-color-surface-2 ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-lg, 12px ); padding: 18px 20px; margin-top: -8px; } .hcgpt-mb-mga-team__edit-form { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 12px 16px; align-items: start; } .hcgpt-mb-mga-team__edit-form > label { display: flex; flex-direction: column; gap: 6px; margin: 0; } .hcgpt-mb-mga-team__edit-form > label > span { font-size: var( --hcgpt-text-sm, 14px ); color: var( --hcgpt-color-text-muted ); font-weight: 500; } .hcgpt-mb-mga-team__edit-form input[type="text"], .hcgpt-mb-mga-team__edit-form select { width: 100%; min-width: 0; height: 40px; box-sizing: border-box; background: var( --hcgpt-color-surface ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); color: var( --hcgpt-color-text ); padding: 8px 12px; font: inherit; line-height: 1.2; } .hcgpt-mb-mga-team__edit-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 4px; } @media ( max-width: 720px ) { .hcgpt-mb-mga-team__edit-form { grid-template-columns: 1fr; } } .hcgpt-mb-status-pill { display: inline-flex; align-items: center; border-radius: var( --hcgpt-radius-full, 9999px ); border: 1px solid var( --hcgpt-color-border ); padding: 4px 10px; font-size: var( --hcgpt-text-xs, 12px ); font-weight: 600; line-height: 1; } .hcgpt-mb-status-pill--active { background: rgba( 34, 197, 94, 0.1 ); border-color: rgba( 34, 197, 94, 0.3 ); color: #16a34a; } .hcgpt-mb-status-pill--invited { background: rgba( 250, 204, 21, 0.08 ); border-color: rgba( 250, 204, 21, 0.3 ); color: #fde047; } /* beta.70: pending invitee pill — Davide directive * "il PENDING pill, lo voglio colorato". `--unregistered` is the * class used in src/Frontend/ReferralDashboardPage.php:89 for * statuses other than `completed` (i.e. the visible "pending" * label on the Invites tab). Painted with the brand v2 gradient. */ .hcgpt-mb-status-pill--unregistered { background: var( --hcgpt-mb-brand-gradient ); border-color: transparent; color: #fff; } /* Email-status variants for the per-row Email cell */ .hcgpt-mb-status-pill--sent { background: rgba( 34, 197, 94, 0.1 ); border-color: rgba( 34, 197, 94, 0.3 ); color: #16a34a; } .hcgpt-mb-status-pill--queued { background: var( --hcgpt-color-surface-2 ); color: var( --hcgpt-color-text-muted ); } .hcgpt-mb-status-pill--failed { background: rgba( 239, 68, 68, 0.1 ); border-color: rgba( 239, 68, 68, 0.3 ); color: #fca5a5; } /* ================================================================= Generic table (.hcgpt-mb-table) — used by MGA members list ================================================================= */ .hcgpt-mb-table { width: 100%; border-collapse: collapse; margin: 12px 0; } .hcgpt-mb-table th, .hcgpt-mb-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var( --hcgpt-color-border ); font-size: var( --hcgpt-text-sm, 14px ); } .hcgpt-mb-table th { font-weight: 600; color: var( --hcgpt-color-text-muted ); text-transform: uppercase; font-size: var( --hcgpt-text-xs, 12px ); letter-spacing: 0.04em; } .hcgpt-mb-table tr:last-child td { border-bottom: none; } .hcgpt-mb-table tbody tr { transition: background 0.15s ease; } .hcgpt-mb-table tbody tr:hover { background: var( --hcgpt-color-surface-2 ); } /* ================================================================= Buttons (.hcgpt-mb-btn variants) ================================================================= */ .hcgpt-mb-btn, .hcgpt-mb-profile .hcgpt-btn, .hcgpt-mb-account .hcgpt-btn, .hcgpt-mb-profile-form .hcgpt-btn, .hcgpt-mb-billing .hcgpt-btn, .hcgpt-mb-summary .hcgpt-btn, button.hcgpt-mb-btn, a.hcgpt-mb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: var( --hcgpt-text-sm, 14px ); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; font-family: inherit; line-height: 1.2; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; text-decoration: none; } /* Beta.62: gradient pill brand v2 — covers BOTH the membership-style * .hcgpt-mb-btn--primary AND the HairColorGPT-style * .hcgpt-btn--primary / .hcgpt-btn-primary that ProfileForm.php and * other templates emit (the templates ship with HairColorGPT classes * but the page often runs without HairColorGPT CSS loaded). */ /* Beta.64: gradient pill brand v2. * * `!important` is used here intentionally because: * 1. `frontend.css` ships an earlier rule * `.hcgpt-mb-btn--primary { background: var(--hcgpt-mb-color-accent) }` * that's literally the same selector — same specificity (0,1,0) * — and CSS source-order tie-breaks. Both files load on most * pages, but on some surfaces (auth pages, embedded shortcodes) * frontend.css can win the tie because of how WP enqueues the * handles. `!important` removes the tie-break uncertainty. * 2. `account-preferences.css` and other module CSS legacies * paint the same selector with theme colours — likewise. * * The gradient itself uses brand v2 tokens (resolved at :root, see * top of file) plus a hardcoded fallback so even if the cascade * somehow strips the var, the literal gradient still paints. */ .hcgpt-mb-btn--primary, button.hcgpt-mb-btn--primary, a.hcgpt-mb-btn--primary, .hcgpt-mb-profile .hcgpt-btn--primary, .hcgpt-mb-profile .hcgpt-btn-primary, .hcgpt-mb-account .hcgpt-btn--primary, .hcgpt-mb-account .hcgpt-btn-primary, .hcgpt-mb-profile-form .hcgpt-btn--primary, .hcgpt-mb-profile-form .hcgpt-btn-primary, .hcgpt-mb-billing .hcgpt-btn--primary, .hcgpt-mb-summary .hcgpt-btn--primary, /* beta.70: extend brand v2 to Plan tab buttons (Upgrade, Redeem) * and Invites tab Copy Link button. Verified parent classes via * grep on src/Frontend/AccountPage.php:331,389 and * src/Frontend/ReferralDashboardPage.php:42. */ .hcgpt-mb-plan-manage .hcgpt-btn--primary, .hcgpt-mb-plan-redeem .hcgpt-btn--primary, .hcgpt-mb-referral .hcgpt-btn--primary { /* Phase 3A (de-conflict): the important flag was removed so the V4 contract owns `.hcgpt-btn--primary` inside the Settings app view. The contract selector `#hcgpt-app-view-settings .hcgpt-btn--primary` (ID+class) already out-specifies these `.hcgpt-mb-* .hcgpt-btn--primary` rules (two classes), so no override flag is needed for this membership brand pill to remain the fallback on standalone membership pages (where the contract is not loaded). */ background: linear-gradient(135deg, #6e3aff 0%, #ff3a8c 50%, #ff8a3a 100%); background: var( --hcgpt-mb-brand-gradient ); border: none; border-radius: 999px; color: #fff; box-shadow: 0 8px 20px rgba(110, 58, 255, 0.30); box-shadow: var( --hcgpt-mb-brand-shadow ); font-weight: 700; } .hcgpt-mb-btn--primary:hover, button.hcgpt-mb-btn--primary:hover, a.hcgpt-mb-btn--primary:hover, .hcgpt-mb-profile .hcgpt-btn--primary:hover, .hcgpt-mb-profile .hcgpt-btn-primary:hover, .hcgpt-mb-account .hcgpt-btn--primary:hover, .hcgpt-mb-account .hcgpt-btn-primary:hover, .hcgpt-mb-profile-form .hcgpt-btn--primary:hover, .hcgpt-mb-profile-form .hcgpt-btn-primary:hover, .hcgpt-mb-billing .hcgpt-btn--primary:hover, .hcgpt-mb-summary .hcgpt-btn--primary:hover, .hcgpt-mb-plan-manage .hcgpt-btn--primary:hover, .hcgpt-mb-plan-redeem .hcgpt-btn--primary:hover, .hcgpt-mb-referral .hcgpt-btn--primary:hover { /* Phase 3A (de-conflict): important flag removed — see the base rule above. */ background: linear-gradient(135deg, #6e3aff 0%, #ff3a8c 50%, #ff8a3a 100%); background: var( --hcgpt-mb-brand-gradient ); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(110, 58, 255, 0.40); box-shadow: var( --hcgpt-mb-brand-shadow-lg ); opacity: 1; color: #fff; } .hcgpt-mb-btn--primary:active { transform: translateY(0); } .hcgpt-mb-btn--ghost { background: transparent; color: var( --hcgpt-color-text ); border-color: var( --hcgpt-color-border ); padding: 9px 18px; font-size: var( --hcgpt-text-sm, 13px ); text-transform: none; letter-spacing: 0; font-weight: 600; } .hcgpt-mb-btn--ghost:hover { background: var( --hcgpt-mb-brand-bg ); border-color: var( --hcgpt-mb-brand-1 ); color: var( --hcgpt-mb-brand-1 ); } .hcgpt-mb-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ================================================================= Notices (.hcgpt-mb-notice variants) ================================================================= */ .hcgpt-mb-notice { padding: 12px 16px; border-radius: var( --hcgpt-radius-md, 8px ); font-size: var( --hcgpt-text-sm, 14px ); margin: 12px 0; border: 1px solid transparent; } .hcgpt-mb-notice--success { background: rgba( 34, 197, 94, 0.1 ); border-color: rgba( 34, 197, 94, 0.3 ); color: #16a34a; } .hcgpt-mb-notice--warning { background: rgba( 250, 204, 21, 0.08 ); border-color: rgba( 250, 204, 21, 0.3 ); color: #fde047; } .hcgpt-mb-notice--error { background: rgba( 239, 68, 68, 0.1 ); border-color: rgba( 239, 68, 68, 0.3 ); color: #fca5a5; } /* ================================================================= Badges (.hcgpt-mb-badge variants) ================================================================= */ .hcgpt-mb-badge { display: inline-block; padding: 3px 10px; border-radius: var( --hcgpt-radius-full, 9999px ); font-size: var( --hcgpt-text-xs, 12px ); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var( --hcgpt-color-surface-2 ); color: var( --hcgpt-color-text ); } .hcgpt-mb-badge--paid, .hcgpt-mb-badge--active, .hcgpt-mb-badge--completed { background: rgba( 34, 197, 94, 0.15 ); color: #16a34a; } .hcgpt-mb-badge--pending, .hcgpt-mb-badge--processing { background: rgba( 250, 204, 21, 0.12 ); color: #fde047; } .hcgpt-mb-badge--failed, .hcgpt-mb-badge--cancelled, .hcgpt-mb-badge--refunded { background: rgba( 239, 68, 68, 0.12 ); color: #fca5a5; } /* ================================================================= 2FA / Security — `[hcgpt-membership-security]` Match the visual language of the legacy Usage / Pref tabs in the HairColorGPT app shell: bold page title, muted subtitle, dark card wrapper with comfortable padding. ================================================================= */ .hcgpt-mb-security { color: var( --hcgpt-color-text ); max-width: 960px; margin: 0 auto; padding: 8px 0 24px; box-sizing: border-box; } .hcgpt-mb-security__panel { background: var( --hcgpt-color-surface ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-lg, 12px ); padding: 28px 32px; margin: 0 0 18px; } .hcgpt-mb-security__panel h2 { font-size: var( --hcgpt-text-lg, 22px ); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px; color: var( --hcgpt-color-text ); } .hcgpt-mb-security__panel p { font-size: var( --hcgpt-text-base, 16px ); line-height: 1.6; color: var( --hcgpt-color-text-muted ); margin: 0 0 18px; } .hcgpt-mb-security__qr { background: var( --hcgpt-color-surface-2 ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); padding: 16px; display: inline-block; margin: 8px 0 16px; } .hcgpt-mb-security__secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var( --hcgpt-color-surface-2 ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); padding: 10px 14px; font-size: var( --hcgpt-text-sm, 14px ); user-select: all; } /* ================================================================= Delete Account — `[hcgpt-membership-delete-account]` ================================================================= */ .hcgpt-mb-delete-account-form { color: var( --hcgpt-color-text ); max-width: 960px; margin: 0 auto; padding: 8px 0 24px; box-sizing: border-box; } .hcgpt-mb-warning { background: rgba( 239, 68, 68, 0.06 ); border: 1px solid rgba( 239, 68, 68, 0.3 ); border-radius: var( --hcgpt-radius-lg, 12px ); padding: 24px 28px; margin: 0 0 18px; } .hcgpt-mb-warning > p:first-child, .hcgpt-mb-warning strong:first-child { font-size: var( --hcgpt-text-md, 18px ); font-weight: 700; color: #fca5a5; display: block; margin: 0 0 12px; } .hcgpt-mb-warning ul { margin: 0; padding-left: 22px; color: var( --hcgpt-color-text-muted ); font-size: var( --hcgpt-text-sm, 14px ); line-height: 1.7; } .hcgpt-mb-delete-account-form > label, .hcgpt-mb-delete-account-form > div > label { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; font-size: var( --hcgpt-text-sm, 14px ); color: var( --hcgpt-color-text-muted ); } .hcgpt-mb-delete-account-form select, .hcgpt-mb-delete-account-form input[type="password"], .hcgpt-mb-delete-account-form input[type="text"] { background: var( --hcgpt-color-surface-2 ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); color: var( --hcgpt-color-text ); padding: 10px 12px; font: inherit; width: 100%; max-width: 460px; box-sizing: border-box; } .hcgpt-mb-checkbox { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; font-size: var( --hcgpt-text-sm, 14px ); margin: 18px 0 !important; color: var( --hcgpt-color-text ) !important; } .hcgpt-mb-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ef4444; margin: 0; } .hcgpt-mb-btn--danger { display: inline-block; background: #ef4444; color: #fff; border: none; border-radius: var( --hcgpt-radius-full, 9999px ); padding: 12px 28px; font-weight: 700; font-size: var( --hcgpt-text-sm, 14px ); letter-spacing: 0.02em; cursor: pointer; transition: opacity 0.15s ease; } .hcgpt-mb-btn--danger:hover { opacity: 0.92; } .hcgpt-mb-btn--danger[disabled] { opacity: 0.4; cursor: not-allowed; } /* ================================================================= Page-level title / subtitle for tabs whose shortcode emits its own

/

+

at the top (matches Usage's "I tuoi limiti di utilizzo" / Pref's "Migliorare l'esperienza di chat" treatment). ================================================================= */ /* Page title / subtitle styling is owned by the HairColorGPT UI Kit (`.hcgpt-settings-page__title` / `__subtitle` from modules/personalized-chat/templates/user-limits.php and preferences-form.php). Our shortcodes now emit those classes directly so they inherit the exact same large light-weight centered look as Usage / Pref. No bridge override needed. */ /* Demote the previously-large team header h2 now that there's a proper page title above it (it becomes a card/section heading). */ .hcgpt-mb-mga-team__header h2 { font-size: var( --hcgpt-text-md, 18px ); font-weight: 600; margin: 0 0 4px; color: var( --hcgpt-color-text ); } /* Sub-section headers inside MGA team page (Members / Invite). */ .hcgpt-mb-mga-team__members > h3, .hcgpt-mb-mga-team__invite > h3 { font-size: var( --hcgpt-text-md, 18px ); font-weight: 600; margin: 18px 0 12px; color: var( --hcgpt-color-text ); } /* ================================================================= Profile inline 2FA card + Delete drawer card. Both wrappers have `.hcgpt-mb-card` so they pick up the same surface/border/radius/padding as the upper Personal info / Billing data cards (defined in the form-agnostic .hcgpt-mb-card rule above). The rules below only cover what's specific: - Delete drawer:

open/close behavior + chevron rotation + a thin separator under the summary when expanded. - Inline SecurityPage embed: strip the inner .hcgpt-mb-security__panel chrome so it doesn't draw a card-inside-a-card. ================================================================= */ .hcgpt-mb-card--profile-delete > .hcgpt-mb-card__title, .hcgpt-mb-profile-delete__summary, .hcgpt-mb-card--plan-cancel > .hcgpt-mb-card__title, .hcgpt-mb-plan-cancel__summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; } .hcgpt-mb-profile-delete__summary::-webkit-details-marker, .hcgpt-mb-plan-cancel__summary::-webkit-details-marker { display: none; } .hcgpt-mb-profile-delete__summary::marker, .hcgpt-mb-plan-cancel__summary::marker { display: none; content: ''; } .hcgpt-mb-profile-delete__chevron, .hcgpt-mb-plan-cancel__chevron { font-size: 14px; color: var( --hcgpt-color-text-muted ); transition: transform 0.2s ease; flex: 0 0 auto; } .hcgpt-mb-card--profile-delete[open] .hcgpt-mb-profile-delete__chevron, .hcgpt-mb-card--plan-cancel[open] .hcgpt-mb-plan-cancel__chevron { transform: rotate( 180deg ); } /* When the drawer is closed, the summary acts as the card title and takes up zero extra space; when open, give the body breathing room and a thin separator. */ .hcgpt-mb-card--profile-delete:not([open]) > .hcgpt-mb-profile-delete__summary, .hcgpt-mb-card--plan-cancel:not([open]) > .hcgpt-mb-plan-cancel__summary { margin-bottom: 0; } .hcgpt-mb-card--profile-delete[open] > .hcgpt-mb-profile-delete__summary, .hcgpt-mb-card--plan-cancel[open] > .hcgpt-mb-plan-cancel__summary { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var( --hcgpt-color-border ); } /* SecurityPage embed: strip the inner panel chrome so the body blends with the host card instead of drawing a second card. */ .hcgpt-mb-card--profile-2fa .hcgpt-mb-security__panel { background: transparent; border: none; padding: 0; margin: 0; } .hcgpt-mb-card--profile-2fa .hcgpt-mb-security__panel h2 { font-size: var( --hcgpt-text-sm, 14px ); font-weight: 500; color: var( --hcgpt-color-text-muted ); margin: 0 0 8px; } .hcgpt-mb-card--profile-2fa .hcgpt-mb-security__panel p { margin: 0 0 12px; color: var( --hcgpt-color-text ); font-size: var( --hcgpt-text-sm, 14px ); line-height: 1.5; } /* DeleteAccount embed: same logic — no double card. */ .hcgpt-mb-card--profile-delete .hcgpt-mb-delete-account-form--embed { background: transparent; border: none; padding: 0; margin: 0; } /* ================================================================= CancelSubscriptionPage form (`.hcgpt-mb-cancel-form`) Renders inside the Plan-tab Cancel drawer (and, optionally, on a standalone /cancel/ page). The reason step has 6+ radio reasons that, without explicit display rules, run as inline text and look like a wall of garbled labels. ================================================================= */ .hcgpt-mb-cancel-form { display: flex; flex-direction: column; gap: 14px; } .hcgpt-mb-cancel-form > h2 { font-size: var( --hcgpt-text-md, 18px ); font-weight: 600; margin: 0; color: var( --hcgpt-color-text ); } .hcgpt-mb-cancel-form > p { margin: 0; color: var( --hcgpt-color-text ); font-size: var( --hcgpt-text-sm, 14px ); line-height: 1.5; } /* Each reason on its own row, radio + label side by side. `.hcgpt-mb-radio` is the legacy class the template emits — we re-style it here without renaming so the markup stays the same. */ .hcgpt-mb-cancel-form .hcgpt-mb-radio { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 14px; background: var( --hcgpt-color-surface-2 ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); color: var( --hcgpt-color-text ); font-size: var( --hcgpt-text-sm, 14px ); transition: border-color 0.15s ease, background 0.15s ease; } .hcgpt-mb-cancel-form .hcgpt-mb-radio:hover { border-color: var( --hcgpt-color-border-strong ); } .hcgpt-mb-cancel-form .hcgpt-mb-radio input[type="radio"] { flex: 0 0 auto; margin: 0; accent-color: var( --hcgpt-primary ); } .hcgpt-mb-cancel-form .hcgpt-mb-radio input[type="radio"]:checked + span { color: var( --hcgpt-color-text ); font-weight: 500; } .hcgpt-mb-cancel-form > label:not(.hcgpt-mb-radio):not(.hcgpt-mb-checkbox) { display: flex; flex-direction: column; gap: 6px; } .hcgpt-mb-cancel-form > label > span { font-size: var( --hcgpt-text-sm, 14px ); color: var( --hcgpt-color-text-muted ); } .hcgpt-mb-cancel-form textarea { width: 100%; min-height: 80px; box-sizing: border-box; background: var( --hcgpt-color-surface-2 ); border: 1px solid var( --hcgpt-color-border ); border-radius: var( --hcgpt-radius-md, 8px ); color: var( --hcgpt-color-text ); padding: 10px 12px; font: inherit; line-height: 1.5; resize: vertical; } .hcgpt-mb-cancel-form textarea:focus { border-color: var( --hcgpt-primary ); outline: none; } /* Confirm step has a checkbox label. */ .hcgpt-mb-cancel-form .hcgpt-mb-checkbox { display: flex; align-items: center; gap: 10px; color: var( --hcgpt-color-text ); font-size: var( --hcgpt-text-sm, 14px ); } .hcgpt-mb-cancel-form .hcgpt-mb-checkbox input[type="checkbox"] { flex: 0 0 auto; margin: 0; accent-color: var( --hcgpt-primary ); } /* Retention step uses two side-by-side actions (Accept / Decline). */ .hcgpt-mb-cancel-form__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } /* ================================================================= Referral / Invites tab — `[hcgpt-membership-referral]`. The Settings shell owns the page chrome; these rules only compose the Invites-specific V4 card, link, share, stats and recent-list surfaces. ================================================================= */ #hcgpt-app-view-settings .hcgpt-mb-referral .hcgpt-settings-page__content { gap: 22px; } #hcgpt-app-view-settings .hcgpt-mb-referral__hero, #hcgpt-app-view-settings .hcgpt-mb-referral__share-card, #hcgpt-app-view-settings .hcgpt-mb-referral__recent { background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); } #hcgpt-app-view-settings .hcgpt-mb-referral__hero .hcgpt-settings-card__header, #hcgpt-app-view-settings .hcgpt-mb-referral__share-card .hcgpt-settings-card__header, #hcgpt-app-view-settings .hcgpt-mb-referral__recent .hcgpt-settings-card__header { background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } #hcgpt-app-view-settings .hcgpt-mb-referral__hero .hcgpt-settings-card__footer, #hcgpt-app-view-settings .hcgpt-mb-referral__recent .hcgpt-settings-card__footer { align-items: flex-start; background: var( --hcgpt-settings-surface-3, var( --hcgpt-color-surface-2, #e8e8eb ) ); color: var( --hcgpt-color-text-muted, #667085 ); font-size: 12px; line-height: 1.45; } #hcgpt-app-view-settings .hcgpt-mb-referral__hero .hcgpt-settings-card__footer strong, #hcgpt-app-view-settings .hcgpt-mb-referral__recent .hcgpt-settings-card__footer strong { color: var( --hcgpt-color-text, #101828 ); font-family: var( --hcgpt-font-mono, "Roboto Mono", monospace ); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #hcgpt-app-view-settings .hcgpt-mb-referral__link-row { display: grid; grid-template-columns: minmax( 0, 1fr ) auto; gap: 12px; align-items: center; } #hcgpt-app-view-settings .hcgpt-mb-referral__link-row input[type="text"] { width: 100%; min-width: 0; height: 44px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); border: 0; border-radius: 12px; 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; padding: 0 14px; } #hcgpt-app-view-settings .hcgpt-mb-referral__link-row .hcgpt-btn--primary { flex: 0 0 auto; min-height: 44px; border: 0; border-radius: 12px; background: var( --hcgpt-mb-brand-gradient ); box-shadow: var( --hcgpt-mb-brand-shadow ); color: #fff; font-weight: 700; padding-inline: 18px; white-space: nowrap; } #hcgpt-app-view-settings .hcgpt-mb-referral__link-row .hcgpt-btn--primary:hover, #hcgpt-app-view-settings .hcgpt-mb-referral__link-row .hcgpt-btn--primary:focus-visible { box-shadow: var( --hcgpt-mb-brand-shadow-lg ); transform: translateY(-1px); } #hcgpt-app-view-settings .hcgpt-mb-referral__share-card .hcgpt-settings-card__body { display: grid; grid-template-columns: auto minmax( 0, 1fr ); gap: 14px; align-items: center; } #hcgpt-app-view-settings .hcgpt-mb-referral__share-label { color: var( --hcgpt-color-text-muted, #667085 ); font-size: var( --hcgpt-text-sm, 14px ); font-weight: 600; white-space: nowrap; } #hcgpt-app-view-settings .hcgpt-mb-referral__share-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; min-width: 0; } #hcgpt-app-view-settings .hcgpt-mb-referral__share .hcgpt-btn { min-height: 40px; min-width: 112px; border: 1px solid transparent; border-radius: 12px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); color: var( --hcgpt-color-text, #101828 ); font-weight: 700; text-transform: none; } #hcgpt-app-view-settings .hcgpt-mb-referral__share .hcgpt-btn:hover, #hcgpt-app-view-settings .hcgpt-mb-referral__share .hcgpt-btn:focus-visible { background: linear-gradient( var( --hcgpt-settings-surface-1, #fff ), var( --hcgpt-settings-surface-1, #fff ) ) padding-box, var( --hcgpt-mb-brand-gradient ) border-box; color: var( --hcgpt-mb-brand-1 ); } #hcgpt-app-view-settings .hcgpt-mb-referral__stats { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } #hcgpt-app-view-settings .hcgpt-mb-referral__stat { min-height: 92px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } #hcgpt-app-view-settings .hcgpt-mb-referral__stat .hcgpt-settings-stat__number { background: var( --hcgpt-mb-brand-gradient ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; } #hcgpt-app-view-settings .hcgpt-mb-referral__recent .hcgpt-public-links-list { background: transparent; padding: 0; } #hcgpt-app-view-settings .hcgpt-mb-referral__invite-row { grid-template-columns: 1fr; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } #hcgpt-app-view-settings .hcgpt-mb-referral__invite-row code { color: var( --hcgpt-mb-brand-1 ); font-family: var( --hcgpt-font-mono, "Roboto Mono", monospace ); font-size: 14px; font-weight: 800; } @media ( max-width: 720px ) { #hcgpt-app-view-settings .hcgpt-mb-referral__link-row, #hcgpt-app-view-settings .hcgpt-mb-referral__share-card .hcgpt-settings-card__body, #hcgpt-app-view-settings .hcgpt-mb-referral__stats { grid-template-columns: 1fr; } #hcgpt-app-view-settings .hcgpt-mb-referral__share-actions { justify-content: stretch; } #hcgpt-app-view-settings .hcgpt-mb-referral__share .hcgpt-btn, #hcgpt-app-view-settings .hcgpt-mb-referral__link-row .hcgpt-btn--primary { width: 100%; } } /* ================================================================= Plan tab — hero card + manage card. See `Frontend/AccountPage::render_plan_summary()`. ================================================================= */ .hcgpt-mb-plan-hero { /* Structured by the Settings card grammar below. */ } #hcgpt-app-view-settings .hcgpt-mb-plan .hcgpt-settings-page__content { gap: 22px; } #hcgpt-app-view-settings .hcgpt-mb-plan .hcgpt-settings-card { display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 18px; background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); box-shadow: none; overflow: hidden; } #hcgpt-app-view-settings .hcgpt-mb-plan .hcgpt-settings-card__header { align-items: center; min-height: 96px; padding: 20px 22px 18px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } #hcgpt-app-view-settings .hcgpt-mb-plan .hcgpt-settings-card__body { display: grid; gap: 14px; flex: 1 1 auto; padding: 22px; background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); } #hcgpt-app-view-settings .hcgpt-mb-plan .hcgpt-settings-card__footer { display: flex; align-items: center; min-height: 54px; padding: 13px 22px; background: var( --hcgpt-settings-surface-3, var( --hcgpt-color-surface-2, #e8e8eb ) ); color: var( --hcgpt-color-text-muted ); font-size: 13px; line-height: 1.45; } #hcgpt-app-view-settings .hcgpt-mb-plan .hcgpt-settings-card__footer p, #hcgpt-app-view-settings .hcgpt-mb-plan .hcgpt-settings-card__footer span { margin: 0; } .hcgpt-mb-plan-hero__heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 4px; } .hcgpt-mb-plan-hero__name { max-width: 100%; font-size: 20px; font-weight: 800; margin: 0; color: var( --hcgpt-color-text ); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hcgpt-mb-plan-hero__cycle { font-size: var( --hcgpt-text-sm, 14px ); color: var( --hcgpt-color-text-muted ); margin: 0 0 18px; } .hcgpt-mb-plan-hero__period { display: grid; gap: 12px; min-height: 112px; margin: 0; padding: 14px 16px; border-radius: 14px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } .hcgpt-mb-plan-hero__dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var( --hcgpt-text-sm, 14px ); color: var( --hcgpt-color-text ); margin: 0; } .hcgpt-mb-plan-hero__arrow { color: var( --hcgpt-color-text-muted ); flex: 0 0 auto; } #hcgpt-app-view-settings .hcgpt-mb-plan-hero__progress, .hcgpt-mb-plan-hero__progress { width: 100%; height: 8px; background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); border-radius: 9999px; overflow: hidden; margin: 0; } .hcgpt-mb-plan-hero__progress-bar { height: 100%; background: var( --hcgpt-primary ); border-radius: 9999px; transition: width 0.3s ease; } .hcgpt-mb-plan-hero__remaining { margin: 0; } .hcgpt-mb-plan-hero__renew { display: flex; align-items: center; gap: 8px; font-size: var( --hcgpt-text-sm, 14px ); color: var( --hcgpt-color-text-muted ); margin: 0; padding: 0; border-top: 0; } .hcgpt-mb-plan-hero__fallback { margin: 0; color: var( --hcgpt-color-text-muted ); font-size: var( --hcgpt-text-sm, 14px ); line-height: 1.45; } /* Manage card: row of actions (Upgrade button + Cancel
). * * The two children share a flex row when the cancel drawer is closed. * When the drawer opens, the
grows vertically (it now * holds the reason-picker) — without intervention, `align-items: * center` would vertically-centre the Upgrade button against the * expanded drawer, parking it half-way down the list of reasons * (the bug Davide flagged in beta.37). * * Fix: pin items to the top, and force the cancel
to * its own full-width row when [open] so Upgrade stays anchored at * the top-left and the drawer takes the whole second row. The * `[open]` attribute selector is enough — no JS, no `:has()`, no * MutationObserver. The chevron rotation lives on the older * `.hcgpt-mb-plan-cancel__summary` rule above and still applies. */ .hcgpt-mb-plan-manage__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } .hcgpt-mb-plan-manage__cancel { display: inline-block; flex: 0 0 auto; max-width: 100%; } .hcgpt-mb-plan-manage__cancel[open] { flex: 1 1 100%; width: 100%; } .hcgpt-mb-plan-manage__cancel > summary { width: auto; } .hcgpt-mb-plan-manage__cancel[open] > summary { margin-bottom: 14px; } .hcgpt-mb-plan-manage__cancel .hcgpt-mb-plan-cancel__body { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba( 23, 23, 23, .08 ); } @media ( max-width: 540px ) { .hcgpt-mb-plan-hero__heading { flex-direction: column; align-items: flex-start; gap: 8px; } .hcgpt-mb-plan-manage__actions { flex-direction: column; align-items: stretch; } .hcgpt-mb-plan-manage__cancel > summary { width: 100%; justify-content: space-between; } } /* ----------------------------------------------------------------- * Plan tab — token-code redemption card * * Small standalone card under the manage card. Shows the user's * Token Wallet balance (when available) inline with the title, * an inline notice (success/error) for the previous POST roundtrip, * and a single text input + redeem button. Tokens never expire * once credited so we don't surface any decay copy. * --------------------------------------------------------------- */ .hcgpt-mb-plan-redeem__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0; } .hcgpt-mb-plan-redeem__balance { display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 54px; min-width: 126px; padding: 10px 14px; border-radius: 14px; background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); font-size: 12px; color: var( --hcgpt-color-text-muted ); } .hcgpt-mb-plan-redeem__balance-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; } .hcgpt-mb-plan-redeem__balance-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; color: var( --hcgpt-color-text ); line-height: 1.1; } .hcgpt-mb-plan-redeem__notice { border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; border: 1px solid var( --hcgpt-color-border ); background: var( --hcgpt-color-surface-2 ); color: var( --hcgpt-color-text ); } .hcgpt-mb-plan-redeem__notice--success { border-color: rgba( 34, 197, 94, 0.4 ); background: rgba( 34, 197, 94, 0.08 ); } .hcgpt-mb-plan-redeem__notice--error { border-color: rgba( 239, 68, 68, 0.4 ); background: rgba( 239, 68, 68, 0.08 ); } .hcgpt-mb-plan-redeem__form { display: grid; grid-template-columns: minmax( 0, 1fr ) auto; gap: 10px; align-items: stretch; padding: 14px 16px; border-radius: 14px; background: var( --hcgpt-settings-surface-2, var( --hcgpt-color-surface-2, #f4f4f5 ) ); } .hcgpt-mb-plan-redeem__input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 0; background: var( --hcgpt-settings-surface-1, var( --hcgpt-color-surface, #fff ) ); color: var( --hcgpt-color-text ); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: 0.04em; box-shadow: inset 0 0 0 1px rgba( 23, 23, 23, .04 ); } .hcgpt-mb-plan-redeem__input:focus { outline: 2px solid var( --hcgpt-color-accent ); outline-offset: 1px; border-color: transparent; } .hcgpt-mb-plan-redeem__hint { margin: 0; font-size: 12px; color: var( --hcgpt-color-text-muted ); line-height: 1.5; } @media ( max-width: 540px ) { .hcgpt-mb-plan-redeem__header { flex-direction: column; align-items: flex-start; } .hcgpt-mb-plan-redeem__balance { align-items: flex-start; } .hcgpt-mb-plan-redeem__form { flex-direction: column; } } /* ----------------------------------------------------------------- * Team tab — action buttons (Edit / Resend / Remove) * * IMPORTANT — CLASSES MUST BE IN OUR NAMESPACE (`hcgpt-mb-team-action--*`). * * The Shared/Archive pattern uses `.hcgpt-link-action-btn .hcgpt-action-item * .hcgpt-archive-resume-btn .hcgpt-delete-link-btn` — those classes are * hijacked by global delegated jQuery handlers in HairColorGPT * (logs-buttons.js + public-links.js) that run preventDefault + * stopPropagation on click and try to dispatch chat-archive AJAX * actions, silently blocking our form submits. Anything we put in * those classes stops working. * * The styling rules below replicate the previous look without the * trojan classes: neutral edit, green-tinted resend, red-tinted * remove. Tokens come from the canonical UI Kit so light/dark * theming Just Works. * --------------------------------------------------------------- */ .hcgpt-mb-team-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; } .hcgpt-mb-team-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var( --hcgpt-color-border ); background: var( --hcgpt-color-surface-2 ); color: var( --hcgpt-color-text ); font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; text-decoration: none; font-family: inherit; } .hcgpt-mb-team-action svg { flex: 0 0 auto; } .hcgpt-mb-team-action:hover { background: var( --hcgpt-color-surface-3, var( --hcgpt-color-surface-2 ) ); border-color: var( --hcgpt-color-border-strong, var( --hcgpt-color-border ) ); } .hcgpt-mb-team-action:focus-visible { outline: 2px solid var( --hcgpt-color-accent ); outline-offset: 1px; } .hcgpt-mb-team-action--resend { color: rgb( 22, 163, 74 ); border-color: rgba( 34, 197, 94, 0.4 ); background: rgba( 34, 197, 94, 0.08 ); } .hcgpt-mb-team-action--resend:hover { background: rgba( 34, 197, 94, 0.16 ); border-color: rgba( 34, 197, 94, 0.6 ); } .hcgpt-mb-team-action--remove { color: rgb( 220, 38, 38 ); border-color: rgba( 239, 68, 68, 0.4 ); background: rgba( 239, 68, 68, 0.08 ); } .hcgpt-mb-team-action--remove:hover { background: rgba( 239, 68, 68, 0.16 ); border-color: rgba( 239, 68, 68, 0.6 ); } .hcgpt-mb-inline-form { margin: 0; padding: 0; display: inline-flex; } /* ================================================================= Brand v2 (beta.65) — touches on REAL classes only -------------------------------------------------------------------- Beta.62-64 added a wide "surface-wide" block whose selectors didn't match any rendered template (.hcgpt-mb-stat, .hcgpt-mb-pill, .hcgpt-mb-progress, .hcgpt-mb-toggle, .hcgpt-mb-tabs, .hcgpt-mb-section-card, …). Those rules were dead code and the user's "il resto ZERO" feedback was correct. This block now restyles ONLY classes that actually appear in src/Frontend/*.php (verified via grep before writing): - .hcgpt-mb-referral__stat .hcgpt-settings-stat__number → Invites numbers - .hcgpt-mb-plan-hero__progress-bar → Plan-tab progress fill - .hcgpt-mb-account__tab.is-active → active account tab pill - inputs inside .hcgpt-mb-account/.hcgpt-mb-profile-form etc → focus ring Card chrome, notices, status pills are already styled earlier in this same file (.hcgpt-mb-card line ~122, .hcgpt-mb-notice line ~742, .hcgpt-mb-status-pill line ~536) — not redefined here. ================================================================= */ /* Invites stats numbers are rendered by the app-shell scoped Invites block * above via `.hcgpt-mb-referral__stat .hcgpt-settings-stat__number`. */ /* Plan tab progress — fill is `.hcgpt-mb-plan-hero__progress-bar` * inside `.hcgpt-mb-plan-hero__progress` (AccountPage.php:280–281). * Width is set inline by PHP, we only colour the fill. */ .hcgpt-mb-plan-hero__progress-bar { background: var( --hcgpt-mb-brand-gradient ); transition: width 0.4s ease; } /* Active account-tab pill — `