.hcgpt-user-settings {
    --hcgpt-us-border: var(--hcgpt-color-border);
    --hcgpt-us-bg: var(--hcgpt-surface);
    --hcgpt-us-muted: var(--hcgpt-color-text-muted);
    --hcgpt-us-primary: var(--hcgpt-primary);
    --hcgpt-us-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    font-family: var(--hcgpt-font-sans);
    color: var(--hcgpt-type-structural-strong);
    background: var(--hcgpt-us-bg);
    border: 1px solid var(--hcgpt-us-border);
    border-radius: 16px;
    box-shadow: var(--hcgpt-us-shadow);
    overflow: hidden;
}

.hcgpt-user-settings :is(h1, h2, h3) {
    font-family: var(--hcgpt-font-heading);
}

.hcgpt-user-settings :is(h4, h5, h6, [class*="title"], [class*="heading"]):not(h1):not(h2):not(h3) {
    font-family: var(--hcgpt-font-sans);
}

/* App view (#settings): flat container with single internal scroll surface */
#hcgpt-app-view-settings .hcgpt-user-settings {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
}

@media (min-width: 768px) {
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-settings-topbar-nav {
        justify-content: flex-end;
        margin-left: auto;
        padding-right: 10px;
    }
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-app-topbar__chat,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-app-topbar__formula,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] #hcgpt-app-view-chat,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] #hcgpt-app-view-formula {
    display: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] [data-hcgpt-chat-style-mount] {
    display: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-app-main {
    gap: 0;
    padding-bottom: 0;
    min-height: 0;
    overflow: hidden;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-app-viewhost {
    gap: 0;
    height: 100%;
    min-height: 0;
    overflow: auto;
}

#hcgpt-app-view-settings .hcgpt-us-content {
    padding: 0 !important;
}

/* Phase 3A (de-conflict): removed a legacy rule that hard-forced page
   padding/margin (via the important flag) onto `.hcgpt-settings-page` and the
   legacy `.hcgpt-mb-*` wrappers — all of which now also carry
   `.hcgpt-settings-page`. The V4 contract, loaded after this file, now owns
   `.hcgpt-settings-page` spacing. */

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] #hcgpt-app-view-settings {
    display: block;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-app-topbar__settings .hcgpt-app-topbar__title {
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-semibold, 600);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
    letter-spacing: 0;
    color: var(--hcgpt-color-text, #212121);
}

@media (max-width: 767.98px) {
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-app-topbar__settings-inner {
        gap: var(--hcgpt-space-2, 8px);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-app-topbar__settings .hcgpt-app-topbar__title {
        padding-left: var(--hcgpt-topbar-mobile-title-offset, 0px);
        font-size: var(--hcgpt-font-size-16);
        letter-spacing: 0;
        font-family: var(--hcgpt-font-sans);
        font-weight: var(--hcgpt-font-weight-semibold, 600);
        font-style: normal;
        text-transform: var(--hcgpt-text-transform-none);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-settings-topbar-nav {
        display: none;
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-settings-topbar-select {
        display: block;
    }
}

/* Archive-specific neutralizer under settings shell
   (keeps legacy chat-archive HTML untouched, but forces styleguide visuals). */
#hcgpt-app-view-settings .hcgpt-chat-archive-container {
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* Phase 3D-1: Archive rows use the V4 `.hcgpt-settings-list-item` (borderless)
   structure; the legacy border override here is removed. Radius/background come
   from public-links.css (border:0) and the V4 contract. */
#hcgpt-app-view-settings .hcgpt-chat-archive-container .hcgpt-public-link-item {
    border-radius: 14px !important;
    background: var(--hcgpt-color-surface) !important;
}

#hcgpt-app-view-settings .hcgpt-chat-archive-container .hcgpt-link-title,
#hcgpt-app-view-settings .hcgpt-chat-archive-container .hcgpt-link-date,
#hcgpt-app-view-settings .hcgpt-chat-archive-container .hcgpt-link-meta {
    color: var(--hcgpt-color-text) !important;
}

#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-link-title,
#hcgpt-app-view-settings .hcgpt-chat-archive-container .hcgpt-link-title,
#hcgpt-app-view-settings .hcgpt-chat-trash-container .hcgpt-link-title {
    font-size: var(--hcgpt-font-size-18) !important;
    font-weight: var(--hcgpt-font-weight-medium) !important;
    line-height: var(--hcgpt-line-height-130) !important;
    margin: 0 0 8px 0 !important;
    font-family: var(--hcgpt-font-editorial, var(--hcgpt-font-sans), sans-serif) !important;
    background: var(--hcgpt-brand-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

#hcgpt-app-view-settings .hcgpt-chat-archive-container .hcgpt-empty-state,
#hcgpt-app-view-settings .hcgpt-chat-archive-container .hcgpt-public-description,
#hcgpt-app-view-settings .hcgpt-chat-archive-container .hcgpt-mb-empty {
    border: 1px solid var(--hcgpt-color-border) !important;
    border-radius: 14px !important;
    background: var(--hcgpt-color-surface) !important;
    margin: 0 !important;
}

#hcgpt-app-view-settings .hcgpt-user-settings *:is(
    .hcgpt-public-link-item,
    .hcgpt-public-description,
    .hcgpt-empty-state,
    .hcgpt-mb-empty,
    .hcgpt-chat-empty-state,
    .hcgpt-us-settings-card
) {
    border: 0 !important;
    box-shadow: none !important;
}

#hcgpt-app-view-settings .hcgpt-user-settings *:is(
    .hcgpt-public-link-item:hover,
    .hcgpt-link-action-btn:hover
) {
    border-color: transparent !important;
}

.hcgpt-us-layout {
    display: flex;
    flex-direction: row;
    min-height: 520px;
}

#hcgpt-app-view-settings .hcgpt-us-layout {
    display: block;
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] {
    --hcgpt-us-sticky-top: 16px;
    --hcgpt-us-sticky-bottom: 16px;
}

.hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] .hcgpt-us-layout {
    align-items: flex-start;
}

.hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] .hcgpt-us-sidebar {
    position: sticky;
    top: var(--hcgpt-us-sticky-top);
    align-self: flex-start;
    max-height: calc(100vh - var(--hcgpt-us-sticky-top) - var(--hcgpt-us-sticky-bottom));
    overflow-y: auto;
}

.hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] .hcgpt-us-content {
    max-height: calc(100vh - var(--hcgpt-us-sticky-top) - var(--hcgpt-us-sticky-bottom));
    min-height: 0;
    overflow-y: auto;
}

#hcgpt-app-view-settings .hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] {
    --hcgpt-us-sticky-top: 0px;
    --hcgpt-us-sticky-bottom: 0px;
}

#hcgpt-app-view-settings .hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] .hcgpt-us-sidebar {
    top: 0;
    max-height: none;
    height: 100%;
    overflow: hidden;
    align-self: stretch;
}

#hcgpt-app-view-settings .hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] .hcgpt-us-content {
    max-height: none;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

body.admin-bar .hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] {
    --hcgpt-us-sticky-top: 48px;
}

.hcgpt-us-sidebar {
    width: 240px;
    background: var(--hcgpt-color-surface-2);
    border-right: 1px solid var(--hcgpt-us-border);
    padding: 16px;
}

#hcgpt-app-view-settings .hcgpt-us-sidebar {
    display: none;
}

#hcgpt-app-view-settings .hcgpt-us-content {
    width: 100%;
    max-width: none;
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg));
}

:where(.hcgpt-scope:is([data-hcgpt-theme="dark"], [data-hcgpt-resolved-theme="dark"])) #hcgpt-app-view-settings,
:where(.hcgpt-scope:is([data-hcgpt-theme="dark"], [data-hcgpt-resolved-theme="dark"])) #hcgpt-app-view-settings .hcgpt-us-content {
    background: #000 !important;
}

@media (prefers-color-scheme: dark) {
    :where(.hcgpt-scope[data-hcgpt-theme="system"]) #hcgpt-app-view-settings,
    :where(.hcgpt-scope[data-hcgpt-theme="system"]) #hcgpt-app-view-settings .hcgpt-us-content {
        background: #000 !important;
    }
}

.hcgpt-us-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#hcgpt-app-view-settings .hcgpt-us-nav {
    max-height: 100%;
    overflow-y: auto;
    padding-bottom: 12px;
}

.hcgpt-us-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--hcgpt-us-border);
    background: var(--hcgpt-color-surface);
    color: var(--hcgpt-type-structural-strong);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: var(--hcgpt-font-weight-medium);
    font-family: var(--hcgpt-font-sans);
}

.hcgpt-us-nav-btn .hcgpt-us-icon svg {
    width: 18px;
    height: 18px;
}

.hcgpt-us-nav-btn .hcgpt-us-icon {
    color: var(--hcgpt-us-muted);
    display: inline-flex;
}

.hcgpt-us-nav-btn:hover {
    border-color: var(--hcgpt-color-border-strong) !important;
    background: var(--hcgpt-color-surface-2) !important;
}

.hcgpt-us-content {
    flex: 1;
    padding: 20px 24px;
    background: var(--hcgpt-surface);
}

#hcgpt-app-view-settings .hcgpt-us-panel-body > :first-child {
    margin-top: 0 !important;
}

#hcgpt-app-view-settings .hcgpt-us-panel-body > :last-child {
    margin-bottom: 0 !important;
}

/* Phase 3B (shell/title): the legacy panel head is no longer hidden with
   display:none (which removed it from the accessibility tree). The shell markup
   now renders it with the `hcgpt-sr-only` class so it stays an accessible
   heading while the V4 `.hcgpt-settings-page__title` is the only VISIBLE title.
   `.hcgpt-sr-only` is owned by the V4 contract (scoped to #hcgpt-app-view-settings). */

.hcgpt-us-panel {
    display: none;
    animation: hcgptUsFade 0.25s ease;
}

.hcgpt-us-panel.is-active {
    display: block;
}

.hcgpt-us-panel-head h3 {
    margin: 0 0 4px;
    font-size: var(--hcgpt-font-size-18);
    font-family: var(--hcgpt-font-heading);
    font-weight: var(--hcgpt-font-weight-semibold);
    color: var(--hcgpt-type-structural-strong);
    text-transform: var(--hcgpt-text-transform-uppercase);
    letter-spacing: var(--hcgpt-letter-spacing-003em);
}

.hcgpt-us-panel-head {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--hcgpt-us-border);
    padding-bottom: 10px;
}

.hcgpt-us-panel-body {
    line-height: var(--hcgpt-line-height-150);
    color: var(--hcgpt-type-structural-soft);
}

/* Phase 4V-1: the `.hcgpt-settings-page` / `__header` / `__title` / `__subtitle`
   / `__content` rules previously declared here were neutralized. They duplicated
   the V4 contract (`user-settings-contract-v4.css`, loaded after this file) and
   the `padding: 0 12px` on `__header` was the actual source of the title /
   content axis misalignment seen on Plan / Billing / Orders / Invites.
   The V4 contract is the single owner of page width, header layout, title /
   subtitle typography and content alignment. Do NOT re-introduce these
   declarations here; extend V4 instead. */

#hcgpt-app-view-settings .hcgpt-settings-actions-col,
#hcgpt-app-view-settings .hcgpt-settings-page .hcgpt-link-actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

/* Phase 3A (de-conflict): `.hcgpt-btn` / `.hcgpt-btn--danger` removed from these
   legacy lists so the V4 contract owns `.hcgpt-btn*`. Legacy-only button classes
   (link-action / pagination / delete-link / archive-delete / trash-delete) stay. */
#hcgpt-app-view-settings .hcgpt-settings-page :is(.hcgpt-link-action-btn, .hcgpt-pagination-btn, .hcgpt-pagination-number) {
    background: transparent;
    border: 1px solid var(--hcgpt-color-border);
    border-radius: 10px;
    box-shadow: none;
    color: var(--hcgpt-color-text);
}

#hcgpt-app-view-settings .hcgpt-settings-page :is(.hcgpt-link-action-btn):hover {
    background: var(--hcgpt-color-surface-2);
    border-color: var(--hcgpt-color-border-strong);
    color: var(--hcgpt-type-structural-strong);
}

#hcgpt-app-view-settings .hcgpt-settings-page :is(.hcgpt-delete-link-btn, .hcgpt-archive-delete-btn, .hcgpt-trash-delete-btn) {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.26);
    color: var(--hcgpt-danger);
}

#hcgpt-app-view-settings .hcgpt-settings-page :is(.hcgpt-delete-link-btn, .hcgpt-archive-delete-btn, .hcgpt-trash-delete-btn):hover {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.36);
    color: var(--hcgpt-danger-hover);
}

#hcgpt-app-view-settings .hcgpt-settings-page .hcgpt-link-action-btn {
    justify-content: center;
    min-height: 36px;
    min-width: 132px;
    width: 132px;
}

.hcgpt-user-settings-empty {
    padding: 16px;
    border: 1px solid var(--hcgpt-us-border);
    border-radius: 12px;
    background: var(--hcgpt-surface);
}

@keyframes hcgptUsFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 960px) {
    .hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] .hcgpt-us-sidebar,
    .hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] .hcgpt-us-content {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }

    .hcgpt-us-layout {
        flex-direction: column;
    }

    .hcgpt-us-sidebar {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--hcgpt-us-border);
    }

    #hcgpt-app-view-settings .hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] .hcgpt-us-sidebar,
    #hcgpt-app-view-settings .hcgpt-user-settings[data-hcgpt-us-layout="fixed-nav"] .hcgpt-us-content {
        position: static;
        top: auto;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    #hcgpt-app-view-settings .hcgpt-us-nav {
        max-height: none;
        overflow: visible;
        padding-bottom: 0;
    }
}

/* =================================================================
   BRAND PASS — User Settings (7 tab uniformi)
   =================================================================
   Single source of truth per tutti i tab settings, sia di HairColorGPT
   plugin (Usage, Pref, Shared, Archive) sia di hcgpt-membership
   (Profile, Team, Orders, Plan). Approccio additivo: estende le regole
   esistenti, non rompe layout/spacing.
   Mockup approvato: docs/mockups/user-settings-brand-proposals.html
   ================================================================= */

/* Phase 4V-1: the duplicate `.hcgpt-settings-page__title` typography override
   previously declared here was neutralized. The V4 contract
   (`user-settings-contract-v4.css`) owns title font, weight, line-height and
   color. Re-introducing a sibling declaration here re-creates competing
   ownership and risks the title visual diverging from the contract. */

/* 2. TAB NAV — active = violet text + gradient underline */
#hcgpt-app-view-settings .hcgpt-settings-topbar-nav .hcgpt-settings-topbar-link {
    position: relative;
    text-decoration: none;
    transition: color 0.15s ease;
}

#hcgpt-app-view-settings .hcgpt-settings-topbar-nav .hcgpt-settings-topbar-link:hover {
    color: var(--hcgpt-color-text);
    text-decoration: none;
}

#hcgpt-app-view-settings .hcgpt-settings-topbar-nav .hcgpt-settings-topbar-link.is-active {
    color: var(--hcgpt-brand-1, #6e3aff);
    font-weight: var(--hcgpt-font-weight-bold, 700);
    text-decoration: none;
}

#hcgpt-app-view-settings .hcgpt-settings-topbar-nav .hcgpt-settings-topbar-link.is-active::after {
    display: none;
}

/* 3. PRIMARY CTA — Phase 3A (de-conflict): removed a legacy gradient override
   that used the important flag to beat the V4 contract's own `.hcgpt-btn--primary`.
   The V4 contract, loaded after this file, now owns the primary button.
   4. GHOST CTA — Phase 3A (de-conflict): removed a legacy `.hcgpt-btn` hover
   override for the same reason; the contract owns non-primary/non-danger hover. */

/* 5. INPUTS / SELECTS / TEXTAREA — focus state violet ring */
#hcgpt-app-view-settings .hcgpt-settings-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Phase 4R-STRICT: quiet focus — the brand border + 3px brand halo read as an
   active/selected state. Neutral border-color + a 1px neutral inset hairline so
   focus stays visible (incl. on the V4 borderless fields), no purple glow. */
#hcgpt-app-view-settings .hcgpt-settings-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea):focus,
#hcgpt-app-view-settings .hcgpt-settings-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea):focus-visible {
    outline: 0;
    border-color: var(--hcgpt-color-border-strong, #d0d0d5);
    box-shadow: inset 0 0 0 1px var(--hcgpt-color-border-strong, #d0d0d5);
}

/* 6. PROGRESS BARS — fill gradient brand (was grey).
   Target sia progress nativo HTML sia pattern custom .hcgpt-progress*. */
#hcgpt-app-view-settings .hcgpt-settings-page progress::-webkit-progress-value,
#hcgpt-app-view-settings .hcgpt-settings-page progress::-moz-progress-bar {
    background: var(--hcgpt-brand-gradient);
    border-radius: 999px;
}

#hcgpt-app-view-settings .hcgpt-settings-page progress {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: var(--hcgpt-color-surface-2, #f5f5f7);
    overflow: hidden;
    border: 0;
}

#hcgpt-app-view-settings .hcgpt-settings-page progress::-webkit-progress-bar {
    background: var(--hcgpt-color-surface-2, #f5f5f7);
    border-radius: 999px;
}

/* Phase 3A: important flag dropped so the V4 contract owns `.hcgpt-progress__fill`.
   Rule retained for legacy native `[class*="progress-fill"]` fills. */
#hcgpt-app-view-settings .hcgpt-settings-page :is(.hcgpt-progress__fill, [class*="progress-fill"], [class*="progress__bar"]) {
    background: var(--hcgpt-brand-gradient);
    border-radius: 999px;
}

/* 7. NEW UTILITY CLASSES — opt-in per template che vogliono il look brand premium */

/* .hcgpt-settings-card — surface card uniforme per sezioni */
#hcgpt-app-view-settings .hcgpt-settings-card {
    padding: 22px 24px;
    border: 1px solid var(--hcgpt-color-border, #e5e7eb);
    border-radius: 14px;
    background: var(--hcgpt-color-surface, #fff);
    margin-bottom: 18px;
}

/* Eyebrow Roboto Mono uppercase muted — pattern coerente con FormulaBook */
#hcgpt-app-view-settings .hcgpt-settings-card__eyebrow,
#hcgpt-app-view-settings .hcgpt-settings-section__eyebrow {
    display: block;
    font-family: var(--hcgpt-font-mono, "Roboto Mono", Menlo, Consolas, monospace);
    font-size: var(--hcgpt-font-size-11, 11px);
    font-weight: var(--hcgpt-font-weight-bold, 700);
    letter-spacing: var(--hcgpt-letter-spacing-008em, 0.08em);
    text-transform: uppercase;
    color: var(--hcgpt-color-text-muted, #6b7280);
    margin-bottom: 6px;
    line-height: 1.2;
}

/* .hcgpt-settings-tier-badge — pill brand per tier ("Plus", "Pro+", "Lite") */
#hcgpt-app-view-settings .hcgpt-settings-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 9999px;
    background: var(--hcgpt-brand-gradient);
    color: #fff;
    font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
    font-size: var(--hcgpt-font-size-11, 11px);
    font-weight: var(--hcgpt-font-weight-bold, 700);
    letter-spacing: 0.04em;
    text-transform: none;
    line-height: 1.2;
}

/* .hcgpt-settings-plan-card — plan wrapper con bordo gradient (premium) */
#hcgpt-app-view-settings .hcgpt-settings-plan-card {
    padding: 22px 24px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(var(--hcgpt-color-surface, #fff), var(--hcgpt-color-surface, #fff)) padding-box,
        var(--hcgpt-brand-gradient) border-box;
    margin-bottom: 18px;
}

#hcgpt-app-view-settings .hcgpt-settings-plan-card__name {
    font-family: var(--hcgpt-font-editorial, "Neuton", Georgia, serif);
    font-weight: var(--hcgpt-font-weight-black, 800);
    font-size: var(--hcgpt-font-size-26, 26px);
    line-height: 1.1;
    background: var(--hcgpt-brand-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* .hcgpt-settings-wallet — saldo portafoglio in Neuton text-gradient */
#hcgpt-app-view-settings .hcgpt-settings-wallet {
    font-family: var(--hcgpt-font-editorial, "Neuton", Georgia, serif);
    font-weight: var(--hcgpt-font-weight-black, 800);
    background: var(--hcgpt-brand-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* .hcgpt-settings-avatar — bordo gradient su immagini profilo */
#hcgpt-app-view-settings .hcgpt-settings-avatar,
#hcgpt-app-view-settings .hcgpt-mb-profile img[alt*="profile" i],
#hcgpt-app-view-settings .hcgpt-mb-profile .hcgpt-avatar {
    border-radius: var(--hcgpt-photo-shape-left, 24px 0 0 24px);
    padding: 2.5px;
    background:
        linear-gradient(var(--hcgpt-color-surface, #fff), var(--hcgpt-color-surface, #fff)) padding-box,
        var(--hcgpt-brand-gradient) border-box;
    border: 0;
}

/* 8. SAVE / SUBMIT BUTTONS — align right (page-level and card-level).
   Pattern coperti:
   - .hcgpt-preferences-actions wrapper (Pref page)
   - .hcgpt-form-actions / .hcgpt-settings-actions / .hcgpt-save-actions generici
   - <form> direct-child submit (Profile, Register, e altri form senza wrapper)
   - .hcgpt-settings-card con submit/primary inside */
/* Phase 3A: important flag dropped — V4 contract owns `.hcgpt-form-actions`
   (same right-aligned outcome). Rule retained for legacy action wrappers. */
#hcgpt-app-view-settings .hcgpt-settings-page :is(.hcgpt-preferences-actions, .hcgpt-form-actions, .hcgpt-settings-actions, .hcgpt-save-actions) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    text-align: right;
}

#hcgpt-app-view-settings .hcgpt-settings-page form > button[type="submit"]:last-child,
#hcgpt-app-view-settings .hcgpt-settings-page form > .hcgpt-btn--primary:last-child,
#hcgpt-app-view-settings .hcgpt-settings-card > button[type="submit"]:last-child,
#hcgpt-app-view-settings .hcgpt-settings-card > .hcgpt-btn--primary:last-child {
    display: block;
    margin-left: auto;
    width: auto;
}

/* 9. SETTINGS FEEDBACK — promoted save/error notices.
   Server-rendered membership notices stay the data source; the app
   shell presents them as a centered branded card instead of a page
   banner. */
/* Keep the flag here because shortcode-specific notice styles may use higher
   specificity than the shell once promoted into the feedback overlay. */
.hcgpt-settings-notice--promoted {
    display: none !important;
}

.hcgpt-settings-feedback-region {
    pointer-events: none;
    position: relative;
    z-index: 2147483000;
}

.hcgpt-settings-feedback-stage {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
    position: fixed;
}

.hcgpt-settings-feedback-stage.is-leaving {
    animation: hcgptSettingsFeedbackLeave 180ms ease forwards;
}

.hcgpt-settings-feedback-backdrop {
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
            backdrop-filter: blur(12px) saturate(1.05);
    background: color-mix(in srgb, var(--hcgpt-color-bg, #f7f7f9) 58%, transparent);
    border: 0;
    cursor: default;
    inset: 0;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    position: absolute;
}

.hcgpt-settings-feedback-card {
    align-items: center;
    animation: hcgptSettingsFeedbackEnter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    background:
        linear-gradient(var(--hcgpt-color-surface, #fff), var(--hcgpt-color-surface, #fff)) padding-box,
        var(--hcgpt-brand-gradient) border-box;
    border: 1.5px solid transparent;
    border-radius: 22px 0 0 22px;
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.18);
    box-sizing: border-box;
    color: var(--hcgpt-color-text, #111827);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: min(78vw, 280px);
    overflow: hidden;
    padding: 32px 30px 26px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    width: min(84vw, 300px);
}

.hcgpt-settings-feedback-mark {
    align-items: center;
    background: var(--hcgpt-brand-gradient);
    border-radius: 22px 0 0 22px;
    box-shadow: 0 14px 28px rgba(110, 58, 255, 0.26);
    color: #fff;
    display: inline-flex;
    font-family: var(--hcgpt-font-heading, inherit);
    font-size: 34px;
    font-weight: 800;
    height: 76px;
    justify-content: center;
    line-height: 1;
    margin-bottom: 8px;
    position: relative;
    width: 76px;
}

.hcgpt-settings-feedback-mark__check {
    border-bottom: 4px solid currentColor;
    border-right: 4px solid currentColor;
    display: block;
    height: 28px;
    transform: rotate(45deg) translate(-2px, -4px);
    width: 15px;
}

.hcgpt-settings-feedback-stage--error .hcgpt-settings-feedback-card {
    background:
        linear-gradient(var(--hcgpt-color-surface, #fff), var(--hcgpt-color-surface, #fff)) padding-box,
        linear-gradient(135deg, rgba(220, 38, 38, 0.86), rgba(255, 58, 140, 0.86)) border-box;
}

.hcgpt-settings-feedback-stage--error .hcgpt-settings-feedback-mark {
    background: linear-gradient(135deg, #dc2626, #ff3a8c);
    box-shadow: 0 14px 28px rgba(220, 38, 38, 0.22);
}

.hcgpt-settings-feedback-stage--warning .hcgpt-settings-feedback-card {
    background:
        linear-gradient(var(--hcgpt-color-surface, #fff), var(--hcgpt-color-surface, #fff)) padding-box,
        linear-gradient(135deg, rgba(245, 158, 11, 0.82), rgba(255, 138, 58, 0.86)) border-box;
}

.hcgpt-settings-feedback-stage--warning .hcgpt-settings-feedback-mark {
    background: linear-gradient(135deg, #f59e0b, #ff8a3a);
    box-shadow: 0 14px 28px rgba(245, 158, 11, 0.22);
}

.hcgpt-settings-feedback-title {
    color: var(--hcgpt-type-editorial-strong, var(--hcgpt-color-text, #111827));
    font-family: var(--hcgpt-font-editorial, "Neuton", Georgia, serif);
    font-size: clamp(1.65rem, 5vw, 2rem);
    font-weight: var(--hcgpt-font-weight-black, 800);
    letter-spacing: 0;
    line-height: 1.05;
    margin: 0;
}

.hcgpt-settings-feedback-body {
    color: var(--hcgpt-color-text-muted, #6b7280);
    font-family: var(--hcgpt-font-sans, inherit);
    font-size: var(--hcgpt-font-size-14, 14px);
    line-height: 1.45;
    margin: 0;
    max-width: 24ch;
}

.hcgpt-settings-feedback-close {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--hcgpt-color-text-muted, #6b7280);
    cursor: pointer;
    font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
    font-size: var(--hcgpt-font-size-11, 11px);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-top: 2px;
    padding: 8px 10px;
    text-transform: uppercase;
}

.hcgpt-settings-feedback-close:hover,
.hcgpt-settings-feedback-close:focus-visible {
    color: var(--hcgpt-color-text, #111827);
    outline: 0;
}

.hcgpt-settings-feedback-timer {
    animation: hcgptSettingsFeedbackTimer var(--hcgpt-settings-feedback-duration, 3600ms) linear forwards;
    background: var(--hcgpt-brand-gradient);
    bottom: 0;
    height: 3px;
    left: 0;
    position: absolute;
    transform-origin: left center;
    width: 100%;
}

#hcgpt-app-view-settings .hcgpt-settings-saved-surface > :is(.hcgpt-mb-card__title, .hcgpt-settings-card__title):first-child {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

#hcgpt-app-view-settings .hcgpt-settings-save-state {
    align-items: center;
    color: #10b981;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
    font-size: var(--hcgpt-font-size-11, 11px);
    font-weight: 700;
    gap: 6px;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-left: auto;
    text-transform: uppercase;
}

#hcgpt-app-view-settings .hcgpt-settings-save-state__icon {
    background: #10b981;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
    display: inline-block;
    height: 10px;
    position: relative;
    width: 10px;
}

#hcgpt-app-view-settings .hcgpt-settings-save-state__icon::after {
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    content: "";
    height: 5px;
    left: 3px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg);
    width: 3px;
}

@keyframes hcgptSettingsFeedbackEnter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hcgptSettingsFeedbackLeave {
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes hcgptSettingsFeedbackTimer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Mobile: full-width per leggibilità + accessibilità touch (>= 44px touch target) */
@media (max-width: 600px) {
    #hcgpt-app-view-settings .hcgpt-settings-page :is(.hcgpt-preferences-actions, .hcgpt-form-actions, .hcgpt-settings-actions, .hcgpt-save-actions) {
        justify-content: stretch;
    }
    #hcgpt-app-view-settings .hcgpt-settings-page form > button[type="submit"]:last-child,
    #hcgpt-app-view-settings .hcgpt-settings-page form > .hcgpt-btn--primary:last-child,
    #hcgpt-app-view-settings .hcgpt-settings-card > button[type="submit"]:last-child,
    #hcgpt-app-view-settings .hcgpt-settings-card > .hcgpt-btn--primary:last-child {
        width: 100%;
        margin-left: 0;
    }

    .hcgpt-settings-feedback-stage {
        padding: 18px;
    }

    .hcgpt-settings-feedback-card {
        min-height: min(86vw, 270px);
        padding: 28px 24px 24px;
        width: min(86vw, 288px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hcgpt-settings-feedback-card,
    .hcgpt-settings-feedback-stage.is-leaving,
    .hcgpt-settings-feedback-timer {
        animation: none;
    }
}

/* =================================================================
   BATCH 1 — Card / Field / Progress / Empty unification (CSS-only)
   =================================================================
   Source of truth: docs/USER_SETTINGS_STYLEGUIDE.md
   Approccio page-scoped, additivo: allinea le card e i componenti
   bespoke ESISTENTI alla grammatica del guide senza toccare PHP/template.
   Batch 1: Profile, Plan, Billing, Usage, Shared. Salon resta Batch 2.
   Header/title/subtitle/width/CTA/focus/save/dark sono già coperti
   dal BRAND PASS sopra: qui si chiudono solo card, input, progress,
   empty.
   ================================================================= */

/* B1.1 CARD UNICA — .hcgpt-mb-card (Profile / Plan / Billing) → 22px 24px
   + radius 14px. La regola base (app-shell-bridge.css) usa 24/28 + radius
   --lg(12); surface/border/margin sono già corretti, override mirato. */
#hcgpt-app-view-settings .hcgpt-settings-page .hcgpt-mb-card {
    padding: 22px 24px;
    border-radius: 14px;
    border: 0 !important;
    box-shadow: none !important;
}

#hcgpt-app-view-settings .hcgpt-settings-page .hcgpt-mb-card__title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    line-height: 1.2 !important;
}

/* Phase 3D-1: the CSS-injected chart emoji on the Usage card title was removed.
   user-limits.php now renders a real `dashicons-chart-bar` (aria-hidden) in the
   title markup.
   Phase 4A: the legacy `.hcgpt-mb-card--{avatar,personal-info,billing-data,
   custom-fields,profile-2fa}` emoji pseudo-elements were removed — those
   modifier classes are no longer rendered (Profile cards now ship real
   `dashicons` icons in markup). The `.hcgpt-mb-profile-delete__summary` ⚠️
   glyph was also dropped per the no-emoji-in-Settings rule. */

/* B1.2 FIELDS — input/select/textarea su surface-2 + bordo strong, così i
   campi non si fondono col pannello (guide §4). Radius 10px + focus ring
   violet sono già definiti sopra; qui si aggiungono solo bg e bordo.
   Esclusi checkbox/radio/submit/button/file. */
#hcgpt-app-view-settings .hcgpt-settings-page :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]),
    select,
    textarea
) {
    background-color: var(--hcgpt-color-surface-2);
    /* Phase 3A (de-conflict): border removed so the V4 contract's borderless,
       surface-filled inputs become the authority (this rule out-specifies the
       contract's bare element selector, so it had to change, not just reorder). */
    border: 0;
}

/* B1.4 EMPTY STATE — convenzione unica per i due pattern in uso
   (.hcgpt-mb-empty membership, .hcgpt-empty-state HCGPT) + la utility
   legacy. Centrato, muted sans, card surface (guide §6 "Empty state"). */
#hcgpt-app-view-settings .hcgpt-settings-page :is(
    .hcgpt-mb-empty,
    .hcgpt-empty-state,
    .hcgpt-user-settings-empty
) {
    margin: 0;
    padding: 28px 20px;
    text-align: center;
    color: var(--hcgpt-color-text-muted);
    font-family: var(--hcgpt-font-sans);
    font-size: var(--hcgpt-font-size-14, 14px);
    line-height: var(--hcgpt-line-height-150, 1.5);
    background: var(--hcgpt-color-surface);
    border: 1px solid var(--hcgpt-color-border);
    border-radius: 14px;
}

/* =================================================================
   COMMON LAYER — classi utility canoniche `.hcgpt-settings-*`
   =================================================================
   Grammatica nominata del guide (TASK 2). Opt-in: i template possono
   adottarle progressivamente; le pagine Batch 1 restano normalizzate
   dagli override page-scoped sopra. Stessi token, zero valori inventati.
   ================================================================= */

#hcgpt-app-view-settings .hcgpt-settings-card__title {
    margin: 0 0 12px;
    font-family: var(--hcgpt-font-sans);
    font-size: var(--hcgpt-font-size-16, 16px);
    font-weight: var(--hcgpt-font-weight-semibold, 600);
    color: var(--hcgpt-type-structural-strong);
    line-height: 1.3;
}

#hcgpt-app-view-settings .hcgpt-settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

#hcgpt-app-view-settings .hcgpt-settings-label {
    font-family: var(--hcgpt-font-sans);
    font-size: var(--hcgpt-font-size-13, 13px);
    font-weight: var(--hcgpt-font-weight-medium, 500);
    color: var(--hcgpt-type-structural-strong);
}

#hcgpt-app-view-settings .hcgpt-settings-label > small {
    display: block;
    margin-top: 2px;
    font-size: var(--hcgpt-font-size-12, 12px);
    font-weight: var(--hcgpt-font-weight-regular, 400);
    color: var(--hcgpt-color-text-muted);
}

#hcgpt-app-view-settings :is(
    .hcgpt-settings-input,
    .hcgpt-settings-select,
    .hcgpt-settings-textarea
) {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--hcgpt-color-border-strong);
    background-color: var(--hcgpt-color-surface-2);
    color: var(--hcgpt-color-text);
    font-family: var(--hcgpt-font-sans);
    font-size: var(--hcgpt-font-size-14, 14px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#hcgpt-app-view-settings .hcgpt-settings-textarea {
    min-height: 96px;
    resize: vertical;
}

#hcgpt-app-view-settings :is(
    .hcgpt-settings-input,
    .hcgpt-settings-select,
    .hcgpt-settings-textarea
):focus,
#hcgpt-app-view-settings :is(
    .hcgpt-settings-input,
    .hcgpt-settings-select,
    .hcgpt-settings-textarea
):focus-visible {
    /* Phase 4R-STRICT: quiet focus — neutral border-color change, no purple halo. */
    outline: 0;
    border-color: var(--hcgpt-color-border-strong, #d0d0d5);
    box-shadow: none;
}

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

#hcgpt-app-view-settings .hcgpt-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--hcgpt-color-border);
    background: transparent;
    color: var(--hcgpt-color-text);
    font-family: var(--hcgpt-font-sans);
    font-size: var(--hcgpt-font-size-14, 14px);
    font-weight: var(--hcgpt-font-weight-medium, 500);
    text-transform: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

#hcgpt-app-view-settings .hcgpt-settings-btn:hover {
    background:
        linear-gradient(var(--hcgpt-color-surface), var(--hcgpt-color-surface)) padding-box,
        var(--hcgpt-brand-gradient) border-box;
    border-color: transparent;
}

#hcgpt-app-view-settings .hcgpt-settings-btn--primary {
    border-color: transparent;
    border-radius: 9999px;
    background: var(--hcgpt-brand-gradient);
    color: #fff;
    box-shadow: 0 4px 14px -2px rgba(110, 58, 255, 0.32);
}

#hcgpt-app-view-settings .hcgpt-settings-btn--primary:hover {
    background: var(--hcgpt-brand-gradient);
    color: #fff;
    border-color: transparent;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -2px rgba(110, 58, 255, 0.4);
}

#hcgpt-app-view-settings .hcgpt-settings-btn--danger {
    border-color: rgba(220, 38, 38, 0.26);
    background: rgba(220, 38, 38, 0.08);
    color: var(--hcgpt-danger);
}

#hcgpt-app-view-settings .hcgpt-settings-btn--danger:hover {
    border-color: rgba(220, 38, 38, 0.36);
    background: rgba(220, 38, 38, 0.14);
    color: var(--hcgpt-danger-hover, var(--hcgpt-danger));
}

#hcgpt-app-view-settings .hcgpt-settings-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 9999px;
    background: var(--hcgpt-brand-gradient);
    color: #fff;
    font-family: var(--hcgpt-font-mono, "Roboto Mono", monospace);
    font-size: var(--hcgpt-font-size-11, 11px);
    font-weight: var(--hcgpt-font-weight-bold, 700);
    letter-spacing: 0.04em;
    line-height: 1.2;
}

#hcgpt-app-view-settings .hcgpt-settings-empty {
    margin: 0;
    padding: 28px 20px;
    text-align: center;
    color: var(--hcgpt-color-text-muted);
    font-family: var(--hcgpt-font-sans);
    font-size: var(--hcgpt-font-size-14, 14px);
    line-height: var(--hcgpt-line-height-150, 1.5);
    background: var(--hcgpt-color-surface);
    border: 1px solid var(--hcgpt-color-border);
    border-radius: 14px;
}

#hcgpt-app-view-settings .hcgpt-settings-progress {
    height: 6px;
    border-radius: 9999px;
    background: var(--hcgpt-color-surface-2);
    overflow: hidden;
}

#hcgpt-app-view-settings .hcgpt-settings-progress__fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--hcgpt-brand-gradient);
}

/* Mobile: i CTA primari delle settings restano full-width (touch ≥44px) */
@media (max-width: 600px) {
    #hcgpt-app-view-settings .hcgpt-settings-form-actions {
        justify-content: stretch;
    }
    #hcgpt-app-view-settings .hcgpt-settings-form-actions .hcgpt-settings-btn {
        width: 100%;
        min-height: 44px;
    }
}

/* =================================================================
   SETTINGS LEGACY CLASS NORMALIZATION — Tab-by-tab hard overrides.
   Applica solo all'interno di #hcgpt-app-view-settings e neutralizza
   gli holder legacy senza toccare logica/template funzionale.
   ================================================================= */

/* Phase 4A: the `.hcgpt-preferences-form-wrapper` normalization block was
   removed — the Preferences template (preferences-form.php) no longer renders
   `.hcgpt-preferences-form-wrapper`, `.hcgpt-preferences-grid`,
   `.hcgpt-preference-card`, `.hcgpt-pref-label` or `.hcgpt-pref-label-icon`.
   It now uses the V4 `.hcgpt-settings-field-*` grammar (owned by the V4
   contract). The still-rendered JS hooks `.hcgpt-preferences-actions` and
   `.hcgpt-save-preferences-btn` keep their app-shell styling from the
   page-scoped `.hcgpt-settings-page :is(.hcgpt-preferences-actions, …)` rule
   above plus the V4 contract — they were never owned by this dead wrapper. */

/* Phase 4V-1: the `.hcgpt-public-links-container.hcgpt-settings-page` and
   inner `__header` width/padding overrides previously declared here were
   neutralized. They duplicated V4's 800px page width and re-introduced the
   `padding: 0 12px` header offset that broke title / content axis alignment
   on Shared / Archive / Team / Invites.
   V4 owns page width; the standalone-only padding for `.hcgpt-public-links-container`
   is now scoped `:not(.hcgpt-settings-page)` in `public-links.css`. */

#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-public-title,
#hcgpt-app-view-settings .hcgpt-mb-referral .hcgpt-mb-referral__section-title {
    font-family: var(--hcgpt-font-editorial, "Neuton", Georgia, serif) !important;
    color: var(--hcgpt-type-editorial-strong, var(--hcgpt-color-text, #111827)) !important;
}

#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-public-description,
#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-empty-state,
#hcgpt-app-view-settings .hcgpt-user-settings-empty,
#hcgpt-app-view-settings .hcgpt-mb-empty {
    border: 1px solid var(--hcgpt-color-border) !important;
    border-radius: 14px !important;
    background: var(--hcgpt-color-surface) !important;
    margin: 0 !important;
    text-align: center !important;
}

#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-public-link-item,
#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-link-content,
#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-link-title,
#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-public-url {
    width: 100% !important;
}

#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-public-links-list {
    display: grid !important;
    gap: 16px !important;
}

/* Phase 3D-1: the `.hcgpt-public-link-item` border override was removed — Shared
   and Archive rows now use the V4 `.hcgpt-settings-list-item` structure and a
   borderless card (public-links.css already ships border:0). */

#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-link-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Phase 3D-1: narrowed to the still-legacy Trash buttons. Invites now renders
   through the membership bridge V4 card grammar. Shared/Archive action buttons (`.hcgpt-copy-link-btn`,
   `.hcgpt-delete-link-btn`, `.hcgpt-archive-resume-btn`, `.hcgpt-archive-delete-btn`)
   now render through their V4 variants — the legacy `.hcgpt-link-action-btn`
   visual class was dropped from their markup. */
#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-trash-restore-btn,
#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-trash-delete-btn {
    background: transparent !important;
    border: 1px solid var(--hcgpt-color-border) !important;
    color: var(--hcgpt-color-text) !important;
    border-radius: 10px !important;
    min-width: 132px !important;
    text-transform: none !important;
    font-weight: var(--hcgpt-font-weight-medium) !important;
}

#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-trash-restore-btn:hover,
#hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-trash-delete-btn:hover {
    background:
        linear-gradient(var(--hcgpt-color-surface), var(--hcgpt-color-surface)) padding-box,
        var(--hcgpt-brand-gradient) border-box !important;
    border-color: transparent !important;
}

@media (max-width: 767.98px) {
    #hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-public-header,
    #hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-settings-page__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Phase 3D-1: narrowed to Trash; Shared/Archive/Invites use V4 variants. */
    #hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-trash-restore-btn,
    #hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-trash-delete-btn {
        min-width: 36px !important;
        width: auto !important;
    }

    #hcgpt-app-view-settings .hcgpt-public-links-container .hcgpt-link-actions {
        justify-content: stretch !important;
    }
}