/* Shared customer experience theme.
   This is intentionally loaded after the product and module stylesheets so
   every customer module resolves to one palette and one type system. */
body.client-body,
.client-guide-root {
    --client-font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --client-color-primary: #A45F57;
    --client-color-primary-hover: #8E4F49;
    --client-color-primary-strong: #713E3A;
    --client-color-primary-soft: #F4DDE2;
    --client-color-page: #FAF7F4;
    --client-color-surface: #FFFFFF;
    --client-color-surface-soft: #F4ECE7;
    --client-color-text: #211B1D;
    --client-color-text-secondary: #6F6361;
    --client-color-text-muted: #8A7C79;
    --client-color-border: #E6DAD4;
    --client-color-border-strong: #D9C9C1;
    --client-color-border-control: #9A8985;

    /* Frexima otthon komponensek: közös méret- és hangulat-tokenek. */
    --client-home-radius: 24px;
    --client-studio-radius: 28px;
    --client-space-xs: 8px;
    --client-space-sm: 12px;
    --client-space-md: 18px;
    --client-space-lg: 28px;
    --client-space-xl: 42px;
    --client-shadow-soft: 0 14px 34px rgba(87, 57, 50, .08);
    --client-shadow-focus: 0 0 0 4px rgba(164, 95, 87, .18);

    --fx-color-navy-950: #211A1C;
    --fx-color-navy-900: #302629;
    --fx-color-navy-800: #473B3F;
    --fx-color-purple-600: var(--client-color-primary);
    --fx-color-purple-700: var(--client-color-primary-hover);
    --fx-color-purple-900: var(--client-color-primary-strong);
    --fx-color-purple-050: var(--client-color-primary-soft);
    --fx-color-gray-025: var(--client-color-surface);
    --fx-color-gray-050: var(--client-color-page);
    --fx-color-ink-950: var(--client-color-text);
    --fx-color-ink-700: var(--client-color-text-secondary);
    --fx-color-ink-600: var(--client-color-text-muted);
    --fx-color-line-100: var(--client-color-border);
    --fx-color-line-300: var(--client-color-border-strong);
    --fx-color-line-control: var(--client-color-border-control);

    --fx-navy: var(--fx-color-navy-950);
    --fx-purple: var(--client-color-primary);
    --fx-purple-hover: var(--client-color-primary-hover);
    --fx-purple-dark: var(--client-color-primary-strong);
    --fx-purple-soft: var(--client-color-primary-soft);
    --fx-primary-border: #D8ADA7;
    --fx-page-bg: var(--client-color-page);
    --fx-card-bg: var(--client-color-surface);
    --fx-surface-soft: var(--client-color-surface-soft);
    --fx-text-primary: var(--client-color-text);
    --fx-text-secondary: var(--client-color-text-secondary);
    --fx-text-muted: var(--client-color-text-muted);
    --fx-border: var(--client-color-border);
    --fx-border-strong: var(--client-color-border-strong);
    --fx-border-control: var(--client-color-border-control);
    --fx-lavender-wash: var(--client-color-page);
    --fx-surface-page: var(--client-color-page);
    --fx-surface-raised: var(--client-color-surface);
    --fx-surface-subtle: var(--client-color-surface-soft);
    --fx-surface-selected: var(--client-color-primary-soft);
    --fx-border-subtle: var(--client-color-border);
    --fx-action-primary: var(--client-color-primary);
    --fx-action-primary-hover: var(--client-color-primary-hover);
    --fx-accent: var(--client-color-primary);
    --fx-accent-strong: var(--client-color-primary-hover);
    --fx-accent-soft: var(--client-color-primary-soft);
    --fx-primary: var(--client-color-primary);
    --fx-primary-dark: var(--client-color-primary-hover);
    --fx-sidebar: var(--fx-color-navy-950);
    --fx-background: var(--client-color-page);
    --fx-card: var(--client-color-surface);
    --fx-text: var(--client-color-text);
    --fx-focus-ring: var(--client-color-primary-strong);
    --fx-shadow-focus: 0 0 0 4px rgba(164, 95, 87, .2);

    --frexima-purple: var(--client-color-primary);
    --frexima-purple-dark: var(--client-color-primary-hover);
    --frexima-sidebar: var(--fx-color-navy-950);
    --frexima-bg: var(--client-color-page);
    --frexima-card: var(--client-color-surface);
    --frexima-border: var(--client-color-border);
    --frexima-text: var(--client-color-text);
    --frexima-muted: var(--client-color-text-secondary);
    --primary: var(--client-color-primary);
    --primary-dark: var(--client-color-primary-hover);
    --primary-light: var(--client-color-primary-soft);
    --primary-soft: var(--client-color-surface-soft);
    --text-dark: var(--client-color-text);
    --text-muted: var(--client-color-text-secondary);
    --border: var(--client-color-border);
    --surface: var(--client-color-surface);
    --surface-muted: var(--client-color-surface-soft);
    --body-bg: var(--client-color-page);

    --client-primary: var(--client-color-primary);
    --client-primary-hover: var(--client-color-primary-hover);
    --client-warm-surface: var(--client-color-surface-soft);
    --client-border: var(--client-color-border);
    --client-primary-text: var(--client-color-text);
    --client-secondary-text: var(--client-color-text-secondary);

    --bs-primary: var(--client-color-primary);
    --bs-primary-rgb: 164, 95, 87;
    --bs-body-color: var(--client-color-text);
    --bs-body-bg: var(--client-color-page);
    --bs-border-color: var(--client-color-border);
    --bs-link-color: var(--client-color-primary);
    --bs-link-hover-color: var(--client-color-primary-hover);
    --bs-focus-ring-color: rgba(164, 95, 87, .25);
}

body.client-body,
body.client-body :where(button, input, select, textarea, optgroup, dialog) {
    font-family: var(--client-font-family);
}

body.client-body {
    color: var(--client-color-text);
    background: var(--client-color-page);
}

body.client-body :where(h1, h2, h3, h4, h5, h6, legend, dt, strong) {
    color: var(--client-color-text);
}

body.client-body :where(.text-muted, .text-secondary, .form-text) {
    color: var(--client-color-text-secondary) !important;
}

body.client-body :where(.app-content, .main-content) {
    background-color: var(--client-color-page);
}

body.client-body :where(.form-control, .form-select, .form-check-input, .input-group-text) {
    color: var(--client-color-text);
    background-color: var(--client-color-surface);
    border-color: var(--client-color-border-control);
}

body.client-body :where(.form-control, .form-select)::placeholder {
    color: var(--client-color-text-muted);
}

body.client-body :where(.form-control, .form-select, .form-check-input):focus {
    border-color: var(--client-color-primary);
    box-shadow: var(--fx-shadow-focus);
}

body.client-body :where(.btn-primary, .client-primary-button, .client-community-book) {
    color: #FFFFFF !important;
    background-color: var(--client-color-primary) !important;
    border-color: var(--client-color-primary) !important;
}

body.client-body :where(.btn-primary, .client-primary-button, .client-community-book):is(:hover, :focus-visible, :active) {
    color: #FFFFFF !important;
    background-color: var(--client-color-primary-hover) !important;
    border-color: var(--client-color-primary-hover) !important;
}

body.client-body :where(.btn-outline-primary) {
    color: var(--client-color-primary);
    border-color: #C98E87;
}

body.client-body :where(.btn-outline-primary):is(:hover, :focus-visible, :active) {
    color: #FFFFFF;
    background-color: var(--client-color-primary);
    border-color: var(--client-color-primary);
}

body.client-body :where(.btn-light, .btn-outline-secondary) {
    color: var(--client-color-text);
    background-color: var(--client-color-surface);
    border-color: var(--client-color-border);
}

body.client-body :where(a, button, input, select, textarea, summary):focus-visible {
    outline-color: var(--client-color-primary);
}

body.client-body :where(
    .content-panel,
    .client-panel,
    .client-card,
    .card,
    .modal-content,
    .offcanvas,
    .dropdown-menu,
    .cw-post-card,
    .client-discovery-card
) {
    color: var(--client-color-text);
    background-color: var(--client-color-surface);
    border-color: var(--client-color-border);
}

body.client-body :where(.nav-pills .nav-link.active, .page-link.active, .active > .page-link) {
    color: #FFFFFF;
    background-color: var(--client-color-primary);
    border-color: var(--client-color-primary);
}

body.client-body :where(.section-label, .client-page-back, .client-module-backbar a) {
    color: var(--client-color-primary);
}

/* Discovery is the front room of the client experience: the same quiet arrival
   surface is shared by salon search, nail inspiration and appointment finding. */
body.client-body :where(.client-discovery-page, .client-inspirations) {
    --client-room-radius: var(--client-home-radius);
    color: var(--client-color-text);
}

body.client-body :where(.client-discovery-hero, .client-inspirations-hero) {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .82), transparent 31%),
        linear-gradient(135deg, var(--client-color-surface), var(--client-color-surface-soft));
    border: 1px solid var(--client-color-border);
    border-radius: var(--client-room-radius);
    box-shadow: var(--client-shadow-soft);
}

body.client-body :where(.client-discovery-page, .client-inspirations) :where(.section-label, .client-discovery-area) {
    color: var(--client-color-primary-hover);
}

body.client-body :where(.client-discovery-page, .client-inspirations) :where(.client-explore-tabs, .client-inspirations-tabs) {
    border-color: var(--client-color-border);
}

/* The four guided rooms share one arrival rhythm while keeping their own
   character (mirror, palette, manicure table or fitting room). */
body.client-body :where(.hair-studio-page, .makeup-studio-page, .style-studio-page, .client-nail-catalogue) {
    color: var(--client-color-text);
}

body.client-body :where(.hair-studio-hero, .makeup-studio-hero, .style-studio-hero, .client-nail-catalogue .client-discovery-hero) {
    border-color: var(--client-color-border);
    border-radius: var(--client-studio-radius);
    box-shadow: var(--client-shadow-soft);
}

body.client-body :where(.hair-studio-page, .makeup-studio-page, .style-studio-page, .client-nail-catalogue) :where(.section-label, .hair-studio-eyebrow, .makeup-eyebrow, .style-studio-eyebrow) {
    color: var(--client-color-primary-hover);
}

body.client-body :where(.hair-studio-page, .makeup-studio-page, .style-studio-page, .client-nail-catalogue) :where(.btn-primary, .hair-studio-magic-action button, .style-studio-result-actions button) {
    background: linear-gradient(135deg, var(--client-color-primary), var(--client-color-primary-hover));
    border-color: transparent;
    box-shadow: 0 9px 22px rgba(113, 62, 58, .16);
}

body.client-body .client-home-page {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
    padding: clamp(18px, 4vw, 44px) 0 72px;
}

body.client-body .client-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--client-color-border);
    border-radius: var(--client-home-radius);
    background: linear-gradient(135deg, var(--client-color-surface), var(--client-color-surface-soft));
    box-shadow: var(--client-shadow-soft);
}

body.client-body .client-home-hero > div:first-child { padding: clamp(28px, 5vw, 56px); align-self: center; }
body.client-body .client-home-hero h1 { max-width: 600px; margin: 12px 0; letter-spacing: -.04em; }
body.client-body .client-home-hero p { max-width: 540px; color: var(--client-color-text-secondary); font-size: 1.02rem; line-height: 1.65; }
body.client-body .client-home-actions { display: flex; flex-wrap: wrap; gap: var(--client-space-sm); margin-top: 24px; }
body.client-body .client-home-room { min-height: 280px; position: relative; overflow: hidden; isolation: isolate; perspective: 900px; background: linear-gradient(135deg, #eadfd1, #f6eee4 58%, #d6c4ad); }
body.client-body .client-home-room-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .92; }
body.client-body .client-home-room::before { content: ''; position: absolute; inset: -8%; z-index: -1; background: radial-gradient(circle at 68% 34%, rgba(255,255,255,.75), transparent 26%), linear-gradient(120deg, transparent 40%, rgba(255,255,255,.64) 41%, transparent 69%); transform: translateZ(-24px) scale(1.08); }
body.client-body .client-home-room::after { content: ''; position: absolute; inset: auto 0 0; z-index: 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(99,70,48,.12)); pointer-events: none; transform: translateZ(6px); }
body.client-body .client-home-arch { position: absolute; left: 28%; top: 12%; width: 42%; height: 67%; border: 8px solid #b69b7c; border-radius: 90px 90px 5px 5px; background: linear-gradient(130deg, #fff9eb, #c7bbaa); box-shadow: 0 12px 28px rgba(84,61,39,.13); transform: translateZ(10px); }
body.client-body .client-home-seat { position: absolute; left: 27%; bottom: 12%; width: 45%; height: 25%; border-radius: 34px 34px 12px 12px; background: #bb987c; box-shadow: inset 0 -12px rgba(91,57,36,.10), 0 18px 24px rgba(84,61,39,.12); transform: translateZ(16px); }
body.client-body .client-home-plant { position: absolute; right: 10%; bottom: 25%; width: 12%; height: 35%; border-left: 3px solid #777651; transform: translateZ(22px); }
body.client-body .client-home-plant::before, body.client-body .client-home-plant::after { content: ''; position: absolute; width: 28px; height: 50px; background: #8e966d; border-radius: 90% 0 90% 0; transform: rotate(-27deg); left: -22px; top: 5px; }
body.client-body .client-home-plant::after { transform: scaleX(-1) rotate(-27deg); left: 1px; top: 35px; background: #a3a47c; }
body.client-body .client-home-bella { position:absolute; right:6%; bottom:8%; z-index:2; display:flex; align-items:center; gap:8px; max-width:190px; padding:8px 10px 8px 8px; color:#453b34; text-decoration:none; border:1px solid rgba(117,98,79,.14); border-radius:16px; background:rgba(255,253,249,.9); box-shadow:0 10px 22px rgba(84,67,51,.12); transition:transform .2s ease, box-shadow .2s ease; }
body.client-body .client-home-bella:hover, body.client-body .client-home-bella:focus-visible { color:#453b34; transform:translateY(-2px); box-shadow:0 14px 28px rgba(84,67,51,.16); }
body.client-body .client-home-bella img { width:42px; height:42px; flex:0 0 42px; object-fit:cover; border-radius:50%; border:2px solid #fff; }
body.client-body .client-home-bella span { display:grid; gap:2px; min-width:0; }
body.client-body .client-home-bella strong { font-size:.78rem; }
body.client-body .client-home-bella small { color:var(--client-color-text-secondary); font-size:.64rem; line-height:1.25; }
body.client-body .client-home-section { margin-top: clamp(30px, 5vw, 54px); }
body.client-body .client-home-heading { margin-bottom: 16px; }
body.client-body .client-home-heading h2 { margin: 6px 0 0; }
body.client-body .client-home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
body.client-body .client-home-card { display: flex; flex-direction: column; gap: 8px; min-height: 205px; padding: 20px; color: var(--client-color-text); text-decoration: none; border: 1px solid var(--client-color-border); border-radius: var(--client-home-radius); background: var(--client-color-surface); box-shadow: 0 8px 24px rgba(87,57,50,.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
body.client-body .client-home-card:hover, body.client-body .client-home-card:focus-visible { color: var(--client-color-text); border-color: var(--client-color-primary); box-shadow: var(--client-shadow-soft); transform: translateY(-2px); }
body.client-body .client-home-card-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 14px; color: var(--client-color-primary-hover); background: var(--client-color-primary-soft); }
body.client-body .client-home-card small { color: var(--client-color-text-secondary); line-height: 1.5; }
body.client-body .client-home-card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--client-color-primary-hover); font-weight: 700; }
body.client-body .client-home-quiet-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
body.client-body .client-home-quiet-row a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: var(--client-color-text); text-decoration: none; border-top: 1px solid var(--client-color-border); border-bottom: 1px solid var(--client-color-border); }
body.client-body .client-home-quiet-row a > i:first-child { color: var(--client-color-primary-hover); font-size: 1.25rem; }
body.client-body .client-home-quiet-row a > i:last-child { margin-left: auto; color: var(--client-color-primary-hover); }
body.client-body .client-home-quiet-row span { display: grid; gap: 3px; }
body.client-body .client-home-quiet-row small { color: var(--client-color-text-secondary); }
@media (prefers-reduced-motion: reduce) {
    body.client-body .client-home-room,
    body.client-body .client-home-room::before,
    body.client-body .client-home-room::after,
    body.client-body .client-home-arch,
    body.client-body .client-home-seat,
    body.client-body .client-home-plant { transform: none; }
}
body.client-body .ultra-home-page { max-width: 880px; margin-inline: auto; padding-bottom: 52px; }
body.client-body .ultra-home-page .client-home-welcome { padding: 44px clamp(24px, 5vw, 52px); border: 1px solid var(--client-color-border); border-radius: 26px; background: linear-gradient(135deg,#f2e5d8,#eadbcd); }
body.client-body .ultra-home-page .client-home-welcome h1 { margin: 12px 0 14px; font-size: clamp(2rem,5vw,3.1rem); letter-spacing: -.045em; }
body.client-body .ultra-home-page .client-home-welcome p { max-width: 620px; margin-bottom: 24px; color: var(--client-color-text-secondary); font-size: 1.08rem; line-height: 1.7; }
body.client-body .ultra-home-page .client-home-block-heading { margin: 34px 0 14px; }
body.client-body .ultra-home-page .client-home-block-heading h2 { margin: 6px 0 0; font-size: clamp(1.35rem,3vw,1.75rem); letter-spacing: -.025em; }
body.client-body .ultra-home-page .client-home-plan-card, body.client-body .ultra-home-page .client-home-community { padding: 28px; border: 1px solid var(--client-color-border); border-radius: 24px; background: var(--client-color-surface); }
body.client-body .ultra-home-page .client-home-plan-card { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
body.client-body .ultra-home-page .client-home-plan-card h3 { margin: 14px 0 8px; font-size: 1.35rem; }
body.client-body .ultra-home-page .client-home-plan-card p { margin: 0; color: var(--client-color-text-secondary); }
body.client-body .ultra-home-page .client-home-community-list { display: grid; }
body.client-body .ultra-home-page .client-home-community-list a { display: flex; align-items: center; gap: 16px; padding: 16px 0; color: var(--client-color-text); text-decoration: none; border-bottom: 1px solid var(--client-color-border); }
body.client-body .ultra-home-page .client-home-community-list a:last-child { border-bottom: 0; }
body.client-body .ultra-home-page .client-home-avatar { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--client-color-primary-hover); background: #eddccf; font-family: Georgia,serif; font-size: 1.1rem; }
body.client-body .ultra-home-page .client-home-community-list a > span:nth-child(2) { display: grid; gap: 4px; }
body.client-body .ultra-home-page .client-home-community-list small { color: var(--client-color-text-secondary); }
body.client-body .ultra-home-page .client-home-community-list a > i { margin-left: auto; color: var(--client-color-primary-hover); }
body.client-body .ultra-home-page .client-home-community-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
body.client-body .ultra-home-page .client-home-space-links { display: flex; flex-wrap: wrap; gap: 10px; }
body.client-body .ultra-home-page .client-home-space-links a { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 12px 16px; border: 1px solid var(--client-color-border); border-radius: 17px; color: var(--client-color-text); text-decoration: none; background: var(--client-color-surface); }
body.client-body .ultra-home-page .client-home-space-links a > i { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; color: var(--client-color-primary-hover); border-radius: 11px; background: #f0dfd2; }
body.client-body .ultra-home-page .client-home-space-links a > span { display: grid; gap: 2px; }
body.client-body .ultra-home-page .client-home-space-links small { color: var(--client-color-text-secondary); font-size: .78rem; }

/* Quick actions are the client's home-screen apps: recognizable at a glance,
   quiet enough to keep the page feeling like a room instead of a CRM menu. */
body.client-body .ultra-home-page .client-home-quick { margin-top: 6px; }
body.client-body .ultra-home-page .client-home-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
body.client-body .ultra-home-page .client-home-quick-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 14px;
    color: var(--client-color-text);
    text-decoration: none;
    border: 1px solid var(--client-color-border);
    border-radius: 20px;
    background: rgba(255,253,251,.88);
    box-shadow: 0 7px 20px rgba(87,57,50,.045);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.client-body .ultra-home-page .client-home-quick-card:hover,
body.client-body .ultra-home-page .client-home-quick-card:focus-visible {
    color: var(--client-color-text);
    border-color: var(--client-color-primary);
    box-shadow: 0 12px 26px rgba(87,57,50,.10);
    transform: translateY(-2px);
}
body.client-body .ultra-home-page .client-home-quick-icon {
    display: grid;
    flex: 0 0 44px;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #7b503d;
    border-radius: 15px;
    background: #f0dfd2;
    box-shadow: inset 0 1px rgba(255,255,255,.7);
    font-size: 1.15rem;
}
body.client-body .ultra-home-page .client-home-quick-icon.is-sage { color: #5f6c4e; background: #e5ead8; }
body.client-body .ultra-home-page .client-home-quick-icon.is-blue { color: #5d6872; background: #e4ebed; }
body.client-body .ultra-home-page .client-home-quick-icon.is-rose { color: #8b5960; background: #f0dfe0; }
body.client-body .ultra-home-page .client-home-quick-icon.is-gold { color: #876b3e; background: #f1e8cf; }
body.client-body .ultra-home-page .client-home-quick-icon.is-lilac { color: #756378; background: #e9e0ed; }
body.client-body .ultra-home-page .client-home-quick-icon.is-bella { color: #84644f; background: linear-gradient(145deg,#f7e8d8,#eee0ef); }
body.client-body .ultra-home-page .client-home-quick-card > span:last-child { display: grid; gap: 3px; min-width: 0; }
body.client-body .ultra-home-page .client-home-quick-card strong { font-size: .94rem; line-height: 1.2; }
body.client-body .ultra-home-page .client-home-quick-card small { color: var(--client-color-text-secondary); line-height: 1.35; }

@media (max-width: 860px) { body.client-body .client-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    body.client-body .client-home-page { width: min(100% - 20px, 1180px); }
    body.client-body .client-home-hero { grid-template-columns: 1fr; }
    body.client-body .client-home-room { min-height: 180px; order: -1; }
    body.client-body .client-home-bella { right:4%; bottom:6%; max-width:165px; }
    body.client-body .client-home-hero > div:first-child { padding: 24px 20px 26px; }
    body.client-body .client-home-grid, body.client-body .client-home-quiet-row { grid-template-columns: 1fr; }
    body.client-body .ultra-home-page { width: min(100% - 24px, 680px); padding-bottom: 34px; }
    body.client-body .ultra-home-page .client-home-welcome { padding: 30px 22px; border-radius: 20px; }
    body.client-body .ultra-home-page .client-home-plan-card { align-items: flex-start; flex-direction: column; padding: 22px; border-radius: 20px; }
    body.client-body .ultra-home-page .client-home-plan-card .btn { width: 100%; }
    body.client-body .ultra-home-page .client-home-community { padding: 20px; border-radius: 20px; }
    body.client-body .ultra-home-page .client-home-space-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.client-body .ultra-home-page .client-home-space-links a { min-width: 0; display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; text-align: center; }
    body.client-body .ultra-home-page .client-home-space-links a > i { width: 40px; height: 40px; font-size: 1.15rem; }
    body.client-body .ultra-home-page .client-home-space-links small { display: none; }
    body.client-body .ultra-home-page .client-home-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    body.client-body .ultra-home-page .client-home-quick-card {
        display: grid;
        justify-items: center;
        align-content: start;
        gap: 8px;
        min-height: 112px;
        padding: 12px 6px 10px;
        border-radius: 18px;
        text-align: center;
    }
    body.client-body .ultra-home-page .client-home-quick-icon { width: 48px; height: 48px; border-radius: 16px; font-size: 1.2rem; }
    body.client-body .ultra-home-page .client-home-quick-card strong { font-size: .78rem; }
    body.client-body .ultra-home-page .client-home-quick-card small { display: none; }
}

/* The personal-space drawer should feel like a calm room map, not an admin
   index. The existing module classes keep their behavior; this only supplies
   the shared client surface language. */
body.client-body .client-more-page {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
    padding: clamp(18px, 4vw, 42px) 0 70px;
}
body.client-body .client-more-page .client-more-group {
    border-top: 1px solid var(--client-color-border);
    padding-top: 22px;
    margin-top: 28px;
}
body.client-body .client-more-page .client-more-group h2 {
    color: var(--client-color-text);
    font-size: 1.15rem;
    letter-spacing: -.02em;
}
body.client-body .client-more-page .client-more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
body.client-body .client-more-page .client-more-grid a {
    align-items: center;
    background: var(--client-color-surface);
    border: 1px solid var(--client-color-border);
    border-radius: 16px;
    color: var(--client-color-text);
    display: flex;
    gap: 11px;
    min-height: 58px;
    padding: 12px 14px;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.client-body .client-more-page .client-more-grid a > i:first-child { color: var(--client-color-primary-hover); }
body.client-body .client-more-page .client-more-grid a > i:last-child { color: var(--client-color-text-muted); margin-left: auto; }
body.client-body .client-more-page .client-more-grid a:hover,
body.client-body .client-more-page .client-more-grid a:focus-visible {
    border-color: var(--client-color-primary);
    box-shadow: 0 8px 20px rgba(87, 57, 50, .07);
    color: var(--client-color-text);
    transform: translateY(-1px);
}
body.client-body .client-more-page + .client-more-device-setup {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 60px;
}
@media (max-width: 760px) {
    body.client-body .client-more-page .client-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    body.client-body .client-more-page { width: min(100% - 20px, 1180px); }
    body.client-body .client-more-page .client-more-grid { grid-template-columns: 1fr; }
    body.client-body .client-more-page + .client-more-device-setup { width: min(100% - 20px, 1180px); }
}

@media (max-width: 640px) {
    body.client-body :where(.hair-studio-hero, .makeup-studio-hero, .style-studio-hero, .client-nail-catalogue .client-discovery-hero) {
        border-radius: 20px;
    }
}

/* Keep customer pages inside the phone viewport.  Several older modules use
   desktop-first rows and wide media blocks; clipping the shell here lets
   their own responsive rules work without creating a page-level horizontal
   scroll trap. */
body.client-body {
    min-width: 0;
    overflow-x: hidden;
}

body.client-body :where(.app-shell, .app-content, .main-content, .content-panel, .card, .client-card, .client-panel) {
    min-width: 0;
    max-width: 100%;
}

body.client-body :where(img, video, canvas, svg) {
    max-width: 100%;
}

.client-mobile-locale-switcher {
    display: none;
}

.forum-mobile-language {
    display: none;
}

@media (max-width: 767.98px) {
    /* Keep long module labels, preview controls and translated copy from
       creating a page-width scrollbar on narrow client devices. */
    body.client-body {
        max-width: 100vw;
        overflow-x: clip;
    }

    body.client-body .main-content > * {
        max-width: 100%;
        min-width: 0;
    }

    /* The generic client shell keeps a compact language control at the
       leading edge of the header.  The dedicated For You header has its own
       matching control and is intentionally unaffected by this rule. */
    body.client-body:not(:has(.frexima-client-dashboard)) .topbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        padding-inline: var(--fx-page-gutter, 16px) !important;
    }

    body.client-body:not(:has(.frexima-client-dashboard)) .client-mobile-locale-switcher {
        display: flex;
        grid-column: 1;
        grid-row: 1;
        align-items: center;
        min-width: 0;
    }

    body.client-body:not(:has(.frexima-client-dashboard)) .client-mobile-locale-switcher .locale-switcher-button,
    body.client-body [data-client-mobile-home] .client-dashboard-language .locale-switcher-button,
    body.client-body .cw-client-mobile-language .locale-switcher-button,
    body.client-body .forum-mobile-language .locale-switcher-button {
        display: inline-grid;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(128, 100, 95, .18);
        border-radius: 14px;
        color: var(--client-color-primary-strong);
        background: var(--client-color-surface);
        box-shadow: 0 7px 20px rgba(60, 42, 45, .07);
    }

    body.client-body:not(:has(.frexima-client-dashboard)) .client-mobile-locale-switcher .locale-switcher-button [data-locale-current],
    body.client-body:not(:has(.frexima-client-dashboard)) .client-mobile-locale-switcher .locale-switcher-caret,
    body.client-body [data-client-mobile-home] .client-dashboard-language .locale-switcher-button [data-locale-current],
    body.client-body [data-client-mobile-home] .client-dashboard-language .locale-switcher-caret,
    body.client-body .cw-client-mobile-language .locale-switcher-button [data-locale-current],
    body.client-body .cw-client-mobile-language .locale-switcher-caret,
    body.client-body .forum-mobile-language .locale-switcher-button [data-locale-current],
    body.client-body .forum-mobile-language .locale-switcher-caret {
        display: none;
    }

    body.client-body .cw-client-mobile-language {
        display: flex;
        flex: 0 0 44px;
        align-items: center;
        min-width: 44px;
    }

    body.client-body .cw-client-mobile-header {
        gap: 4px;
    }

    body.client-body .cw-client-mobile-header > h1 {
        flex: 1 1 auto;
    }

    body.client-body .forum-mobile-intro {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    body.client-body .forum-mobile-language {
        display: flex;
        grid-column: 1;
        grid-row: 1;
        align-items: center;
    }

    body.client-body .forum-mobile-intro > :not(.forum-mobile-language) {
        grid-column: 2;
    }

    body.client-body:not(:has(.frexima-client-dashboard)) .topbar-title {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
    }

    body.client-body:not(:has(.frexima-client-dashboard)) .topbar-actions {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
        max-width: 100%;
        gap: 5px;
        flex-wrap: nowrap;
        overflow: visible;
    }

    body.client-body .main-content {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        overflow-x: hidden;
    }

    body.client-body [data-client-mobile-home] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.client-body [data-client-mobile-home] .client-dashboard-top,
    body.client-body [data-client-mobile-home] .client-welcome,
    body.client-body [data-client-mobile-home] .client-top-actions {
        min-width: 0;
        max-width: 100%;
    }

    body.client-body [data-client-mobile-home] .client-logout-form {
        display: contents;
    }

    body.client-body [data-client-mobile-home] .client-logout-button {
        color: var(--client-color-danger, #a33f4b);
    }

    body.client-body [data-client-mobile-home] .client-welcome h1,
    body.client-body [data-client-mobile-home] .client-welcome p {
        overflow-wrap: anywhere;
    }

    body.client-body :where(.table-responsive, .client-explore-tabs, .client-lookbook-view-tabs, .client-inbox-tabs) {
        max-width: 100%;
        overscroll-behavior-inline: contain;
    }
}

@media (max-width: 369.98px) {
    body.client-body:not(:has(.frexima-client-dashboard)) .topbar {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 6px;
        padding-inline: var(--fx-page-gutter, 16px) !important;
    }

    body.client-body:not(:has(.frexima-client-dashboard)) .client-mobile-locale-switcher .locale-switcher-button {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }
}

/* Legacy module aliases resolve to the shared customer palette. */
body.client-body:has(.frexima-client-dashboard) {
    --client-ink: var(--client-color-text);
    --client-muted: var(--client-color-text-secondary);
    --client-line: var(--client-color-border);
    --client-purple: var(--client-color-primary);
    --client-purple-dark: var(--client-color-primary-hover);
    --client-pink: var(--client-color-primary-soft);
    --client-warm: var(--client-color-surface-soft);
    background: var(--client-color-page);
}

body.client-body .client-progress span,
body.client-body .client-my-day-avatar {
    background: linear-gradient(135deg, var(--client-color-primary-soft), var(--client-color-primary));
}

body.client-body .client-sticky-book {
    box-shadow: 0 18px 36px rgba(164, 95, 87, .24);
}

body.client-body .client-salon-cover {
    background: linear-gradient(145deg, var(--client-color-surface-soft), #ead2ce);
}

body.client-body .client-salon-cover > span {
    color: var(--client-color-primary);
}

body.client-body:has(.client-book-page) .client-guide-floating-launcher {
    bottom: 112px;
}

@media (max-width: 767.98px) {
    body.client-body:has(.client-book-page) .client-guide-floating-launcher {
        bottom: calc(154px + env(safe-area-inset-bottom, 0px));
    }
}

body.client-body:has(.frexima-community-page) {
    --community-ink: var(--client-color-text);
    --community-muted: var(--client-color-text-secondary);
    --community-line: var(--client-color-border);
    --community-purple: var(--client-color-primary);
    --community-purple-deep: var(--client-color-primary-hover);
    --community-panel: var(--client-color-surface);
    background: var(--client-color-page);
}

body.client-body:has(.frexima-community-wall-page) {
    --cw-ink: var(--client-color-text);
    --cw-muted: var(--client-color-text-secondary);
    --cw-line: var(--client-color-border);
    --cw-border: var(--client-color-border);
    --cw-purple: var(--client-color-primary);
    --cw-purple-dark: var(--client-color-primary-hover);
    --cw-lavender: var(--client-color-primary-soft);
    --cw-soft: var(--client-color-page);
    background:
        linear-gradient(180deg, rgba(255, 250, 248, .78) 0, var(--client-color-page) 360px),
        url('../img/hair-studio/salon-room-mobile-v2.png') top center / 100% auto no-repeat,
        var(--client-color-page);
}

/* The community is the shared lounge of the product: a quiet visual arrival
   zone keeps the feed warm without competing with posts or controls. */
body.client-body .frexima-community-wall-page {
    position: relative;
    isolation: isolate;
}

body.client-body .frexima-community-wall-page::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 250px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 12% 20%, rgba(255,255,255,.86), transparent 42%),
        linear-gradient(110deg, rgba(185, 126, 119, .10), transparent 65%);
}

body.client-body .frexima-community-wall-page .cw-header {
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(106, 76, 69, .08);
}

/* Every guided beauty room should feel like part of the same Frexima house. */
body.client-body:has(.makeup-studio-page),
body.client-body:has(.style-studio-page),
body.client-body:has(.nail-studio-page),
body.client-body:has(.hair-studio-page) {
    background:
        radial-gradient(circle at 88% 4%, rgba(255,255,255,.82), transparent 30%),
        linear-gradient(145deg, var(--client-color-page), #f5e8e3);
}

body.client-body :where(.makeup-studio-page, .style-studio-page, .nail-studio-page, .hair-studio-page) :where(.btn-primary, button[type="submit"]) {
    box-shadow: 0 8px 18px rgba(132, 87, 82, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}

body.client-body :where(.makeup-studio-page, .style-studio-page, .nail-studio-page, .hair-studio-page) :where(.btn-primary, button[type="submit"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(132, 87, 82, .24);
}

/* Shared studio shell: aligns independently built modules into one calm
   reading column and one spacing rhythm. */
body.client-body :where(.makeup-studio-page, .style-studio-page, .nail-studio-page, .hair-studio-page) {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
    padding-block: clamp(18px, 3vw, 42px) clamp(42px, 6vw, 78px);
}

body.client-body :where(.makeup-studio-page, .style-studio-page, .nail-studio-page, .hair-studio-page) :where(section, article, .card) {
    border-color: var(--client-color-border);
}

body.client-body :where(.makeup-studio-page, .style-studio-page, .nail-studio-page, .hair-studio-page) :where(h1, h2, h3) {
    letter-spacing: -.02em;
}

body.client-body :where(.makeup-studio-page, .style-studio-page, .nail-studio-page, .hair-studio-page) :where(.card, .studio-card, .selection-card, .service-card, .result-card) {
    border-radius: var(--client-studio-radius, 22px);
    background: rgba(255, 253, 249, .82);
    box-shadow: 0 12px 28px rgba(84, 67, 51, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}
body.client-body :where(.makeup-studio-page, .style-studio-page, .nail-studio-page, .hair-studio-page) :where(.card, .studio-card, .selection-card, .service-card, .result-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(84, 67, 51, .11);
}
body.client-body :where(.makeup-studio-page, .style-studio-page, .nail-studio-page, .hair-studio-page) :where(input, select, textarea) {
    border-radius: 14px;
    border-color: rgba(117, 98, 79, .2);
    background: rgba(255,255,255,.8);
}

@media (max-width: 640px) {
    body.client-body :where(.makeup-studio-page, .style-studio-page, .nail-studio-page, .hair-studio-page) {
        width: min(100% - 20px, 1180px);
        padding-top: 12px;
    }
}

body.client-body .frexima-community-wall-page :where(.cw-profile-chip span, .cw-avatar, .cw-person-suggestion-avatar) {
    background: linear-gradient(135deg, var(--client-color-primary-soft), var(--client-color-primary));
}

/* Community navigation must use the same active and hover states as every
   other customer module, including the compact phone navigation. */
body.client-body .frexima-community-wall-page:not(.salon-community-page) :where(
    .client-explore-tabs,
    .cw-client-primary-feed-switch,
    .cw-client-feed-tabs,
    .cw-category-rail,
    .cw-client-mobile-feed-switch,
    .cw-filter-discovery
) {
    border-color: var(--client-color-border);
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) :where(
    .client-explore-tabs a,
    .cw-client-primary-feed-switch a,
    .cw-client-feed-tabs a,
    .cw-category-rail a,
    .cw-client-mobile-feed-switch a,
    .cw-filter-discovery a
) {
    color: var(--client-color-text-secondary);
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) :where(
    .client-explore-tabs a.active,
    .cw-client-primary-feed-switch a.active,
    .cw-client-primary-feed-switch a:hover,
    .cw-client-primary-feed-switch a:focus-visible,
    .cw-client-feed-tabs .cw-client-bookable-tab,
    .cw-mobile-create-trigger
) {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--client-color-primary), var(--client-color-primary-hover));
    border-color: var(--client-color-primary);
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) :where(
    .cw-client-feed-tabs a.active,
    .cw-client-feed-tabs a:hover,
    .cw-client-feed-tabs a:focus-visible,
    .cw-category-rail a.active,
    .cw-category-rail a:hover,
    .cw-category-rail a:focus-visible,
    .cw-filter-discovery a:hover,
    .cw-filter-discovery a:focus-visible,
    .cw-client-mobile-header a:hover,
    .cw-client-mobile-header a:focus-visible,
    .cw-client-mobile-header button:hover,
    .cw-client-mobile-header button:focus-visible
) {
    color: var(--client-color-primary-hover);
    background: var(--client-color-primary-soft);
    border-color: #D8ADA7;
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-client-mobile-feed-switch a:is(.active, :hover, :focus-visible) {
    color: var(--client-color-primary-hover);
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-client-mobile-feed-switch a.active::after {
    background: var(--client-color-primary);
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-filter-discovery a i {
    color: var(--client-color-primary-hover);
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) :where(
    .cw-story-add,
    .cw-story-avatar b,
    .cw-story-composer-avatar,
    .cw-story-composer-plus
) {
    color: #FFFFFF;
    background: var(--client-color-primary);
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) :where(.cw-story-add-button, .cw-story-share-link) {
    color: var(--client-color-primary-hover);
    background: var(--client-color-surface);
    border-color: #D8ADA7;
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-story-avatar {
    color: #FFFFFF;
    background: var(--client-color-primary);
    border-color: #D8ADA7;
}

body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-story-avatar.is-live {
    border-color: var(--client-color-primary);
    box-shadow: 0 0 0 3px var(--client-color-primary-soft);
}

body.client-body:has(.client-timeline-page),
body.client-body:has(.frexima-timeline-workspace) {
    --frexima-ink: var(--client-color-text);
    --frexima-muted: var(--client-color-text-secondary);
    --frexima-soft: var(--client-color-page);
    --frexima-line: var(--client-color-border);
    --frexima-purple: var(--client-color-primary);
    --frexima-purple-deep: var(--client-color-primary-hover);
    --timeline-ink: var(--client-color-text);
    --timeline-muted: var(--client-color-text-secondary);
    --timeline-line: var(--client-color-border);
    --timeline-purple: var(--client-color-primary);
    --timeline-lavender: var(--client-color-primary-soft);
}

body.client-body:has(.client-book-page),
body.client-body:has(.booking-request-page) {
    --booking-ink: var(--client-color-text);
    --booking-muted: var(--client-color-text-secondary);
    --booking-line: var(--client-color-border);
    --booking-purple: var(--client-color-primary);
    --booking-purple-dark: var(--client-color-primary-hover);
    --booking-purple-soft: var(--client-color-primary-soft);
    --booking-soft: var(--client-color-surface-soft);
}

body.client-body:has(.frexima-forum-page) {
    --forum-ink: var(--client-color-text);
    --forum-muted: var(--client-color-text-secondary);
    --forum-line: var(--client-color-border);
    --forum-purple: var(--client-color-primary);
    --forum-lavender: var(--client-color-primary-soft);
    --forum-soft: var(--client-color-page);
    --forum-blue: var(--client-color-surface-soft);
    --forum-green: #EAF4EE;
    --forum-pink: var(--client-color-primary-soft);
    background: var(--client-color-page);
}

body.client-body .messenger-messages-shell {
    --message-accent: var(--client-color-primary);
    --message-accent-deep: var(--client-color-primary-hover);
    --message-surface: var(--client-color-surface);
    --message-soft: var(--client-color-primary-soft);
    --message-border: var(--client-color-border);
    --message-text: var(--client-color-text);
}

body.client-body .video-hub-page,
body.client-body .video-hub-create-modal {
    --video-hub-accent: var(--client-color-primary);
    --video-hub-accent-dark: var(--client-color-primary-hover);
    --video-hub-ink: var(--client-color-text);
    --video-hub-muted: var(--client-color-text-secondary);
    --video-hub-border: var(--client-color-border);
    --video-hub-cream: var(--client-color-page);
    --video-hub-card: var(--client-color-surface);
}

body.client-body .creator-profile-page {
    --creator-profile-accent: var(--client-color-primary);
    --creator-profile-accent-strong: var(--client-color-primary-hover);
    --creator-profile-ink: var(--client-color-text);
    --creator-profile-muted: var(--client-color-text-secondary);
    --creator-profile-surface: var(--client-color-surface);
    --creator-profile-soft: var(--client-color-primary-soft);
    --creator-profile-border: var(--client-color-border);
}

body.client-body .content-rating {
    --rating-accent: var(--client-color-primary);
    --rating-accent-strong: var(--client-color-primary-hover);
    --rating-accent-soft: var(--client-color-primary-soft);
    --rating-surface: var(--client-color-surface);
    --rating-border: var(--client-color-border);
    --rating-text: var(--client-color-text);
    --rating-muted: var(--client-color-text-secondary);
}

body.client-body .client-inspirations {
    --inspiration-ink: var(--client-color-text);
    --inspiration-muted: var(--client-color-text-secondary);
    --inspiration-surface: var(--client-color-surface);
    --inspiration-soft: var(--client-color-surface-soft);
    --inspiration-accent: var(--client-color-primary);
}

body.client-body .inspirations-hero {
    background: radial-gradient(circle at 90% 5%, rgba(255, 255, 255, .72), transparent 30%),
        linear-gradient(135deg, var(--client-color-primary-soft), var(--client-color-surface-soft));
    box-shadow: 0 20px 60px rgba(53, 37, 42, .1);
}

body.client-body .inspirations-hero .section-label,
body.client-body .collection-copy em {
    color: var(--client-color-primary-hover);
}

body.client-body .inspirations-tabs a.active,
body.client-body .look-wizard-progress span.active {
    color: #FFFFFF;
    background: var(--client-color-primary);
}

body.client-body :where(
    .inspirations-tabs,
    .inspirations-search label,
    .inspirations-filter-panel,
    .inspiration-card,
    .inspiration-collection-card,
    .inspiration-share-list article,
    .inspiration-look-compare,
    .inspiration-detail-dialog,
    .inspiration-form-dialog,
    .look-upload-dialog
) {
    border-color: var(--client-color-border);
    background: var(--client-color-surface);
}

body.client-body :where(
    .inspiration-card-placeholder,
    .collection-cover,
    .inspiration-look-compare-grid article,
    .inspiration-detail-tags span,
    .inspiration-dialog-form header button,
    .look-upload-wizard header button,
    .inspiration-dialog-form > p,
    .look-wizard-progress span,
    .look-preview,
    .look-privacy-note
) {
    color: var(--client-color-primary-hover);
    background: var(--client-color-surface-soft);
}

body.client-body :where(.inspiration-order-actions button, .share-icon) {
    color: var(--client-color-primary-hover);
    background: var(--client-color-primary-soft);
    border-color: var(--client-color-border);
}

body.client-body .client-inspirations :where(button, a, input, select, textarea):focus-visible {
    outline-color: var(--client-color-primary);
}

body.client-body .connections-hero {
    background: linear-gradient(135deg, var(--client-color-surface), var(--client-color-primary-soft));
    border-color: var(--client-color-border);
}

body.client-body :where(.connections-hero p, .connections-card p, .connections-empty p, .connections-card-meta, .connections-section > header p, .connections-table-location small) {
    color: var(--client-color-text-secondary);
}

body.client-body :where(.connections-card, .connections-stat, .connections-empty) {
    color: var(--client-color-text);
    background: var(--client-color-surface);
    border-color: var(--client-color-border);
}

body.client-body .connections-tabs {
    background: var(--client-color-surface-soft);
}

body.client-body .connections-privacy {
    background: var(--client-color-surface-soft);
    border-color: var(--client-color-border);
}

body.client-body .connections-tabs a {
    color: var(--client-color-text-secondary);
}

body.client-body .connections-tabs a.active {
    color: var(--client-color-primary-hover);
    background: var(--client-color-surface);
}

body.client-body .connections-avatar {
    color: var(--client-color-primary-hover);
    background: var(--client-color-primary-soft);
}

body.client-body .connections-invite-card {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--client-color-primary-strong), var(--client-color-primary));
}

body.client-body .connections-invite-card :where(h2, p) {
    color: #FFFFFF;
}
/* Community wall: a calm shared living room for the client experience */
body.client-body .frexima-community-wall-page { background: linear-gradient(180deg, rgba(250,248,244,.78), rgba(246,243,237,.96)); }
body.client-body .frexima-community-wall-page .cw-header { max-width:1180px; margin:0 auto; padding:1.15rem 1.25rem; border:1px solid rgba(117,98,79,.12); border-radius:24px; background:rgba(255,255,255,.72); box-shadow:0 14px 34px rgba(84,67,51,.07); backdrop-filter:blur(10px); }
body.client-body .frexima-community-wall-page .cw-main { max-width:1180px; margin:1.1rem auto 0; }
body.client-body .frexima-community-wall-page .cw-story-rail, body.client-body .frexima-community-wall-page .cw-client-feed-navigation, body.client-body .frexima-community-wall-page .cw-people-suggestions { border:1px solid rgba(117,98,79,.11); border-radius:22px; background:rgba(255,255,255,.68); box-shadow:0 12px 28px rgba(84,67,51,.055); }
body.client-body .frexima-community-wall-page .cw-story-rail { padding:1rem 1.1rem; }
body.client-body .frexima-community-wall-page .cw-story-card { transition:transform .2s ease, box-shadow .2s ease; }
body.client-body .frexima-community-wall-page .cw-story-card:hover { transform:translateY(-3px); }
body.client-body .frexima-community-wall-page .cw-post-grid { gap:1.1rem; }
body.client-body .frexima-community-wall-page .cw-post-card { overflow:hidden; border:1px solid rgba(117,98,79,.13); border-radius:24px; background:var(--client-color-surface,#fffdf9); box-shadow:0 14px 32px rgba(84,67,51,.075); transition:transform .2s ease, box-shadow .2s ease; }
body.client-body .frexima-community-wall-page .cw-post-card:hover { transform:translateY(-2px); box-shadow:0 18px 38px rgba(84,67,51,.11); }
body.client-body .frexima-community-wall-page .cw-post-card--client { background:linear-gradient(180deg,#fffdf9,#fbf7f0); }
body.client-body .frexima-community-wall-page .cw-post-header, body.client-body .frexima-community-wall-page .cw-card-body { padding:1rem 1.1rem; }
body.client-body .frexima-community-wall-page .cw-post-title { margin:0; color:var(--client-color-ink,#453b34); font-size:1.05rem; line-height:1.4; }
body.client-body .frexima-community-wall-page .cw-post-caption { color:var(--client-color-muted,#776b61); line-height:1.65; }
body.client-body .client-bottom-nav {
    border-top: 1px solid rgba(117,98,79,.12);
    background: rgba(255,253,249,.9);
    box-shadow: 0 -10px 28px rgba(84,67,51,.08);
    backdrop-filter: blur(14px);
}
body.client-body .client-bottom-nav a { color: var(--client-color-muted, #776b61); transition: color .2s ease, transform .2s ease; }
body.client-body .client-bottom-nav a:hover, body.client-body .client-bottom-nav a.is-active { color: var(--client-color-primary, #9b6f68); }
body.client-body .client-bottom-nav-primary { background: var(--client-color-primary, #9b6f68); color: #fff !important; box-shadow: 0 8px 18px rgba(132,87,82,.22); }
body.client-body .client-more-page { border-radius: 26px; box-shadow: 0 14px 34px rgba(84,67,51,.06); }
body.client-body .client-more-group { border-color: rgba(117,98,79,.12); background: rgba(255,255,255,.68); border-radius: 22px; }
body.client-body .client-more-grid a { border-radius: 16px; transition: transform .2s ease, background .2s ease; }
body.client-body .client-more-grid a:hover { transform: translateY(-2px); background: rgba(185,126,119,.1); }
body.brand-body {
    background: radial-gradient(circle at 90% 0%, rgba(255,255,255,.8), transparent 32%), linear-gradient(145deg, #f8f3ee, #efe5df);
}
body.brand-body :where(.brand-app-content, .brand-main-content) { color: #453b34; }
body.brand-body :where(.brand-experience-card, .brand-module-guide-card, .content-panel, .card) {
    border-radius: 22px;
    border-color: rgba(117,98,79,.13);
    box-shadow: 0 14px 32px rgba(84,67,51,.07);
}
body.client-body :where(.client-booking-card, .client-booking-result) { border-radius:22px; box-shadow:0 14px 30px rgba(84,67,51,.08); }
body.brand-body :where(.frexima-calendar-page, .appointment-booking-workspace) { background:rgba(255,253,249,.72); border-radius:24px; }
body.brand-body :where(.calendar-main-panel, .booking-request-card, .appointment-booking-card, .appointment-select-card, .appointment-choice-card) { border-radius:18px; border-color:rgba(117,98,79,.14); box-shadow:0 10px 24px rgba(84,67,51,.06); }
body.brand-body :where(.appointment-quick-dates button.active, .appointment-choice-action:hover) { background:#a46b64; border-color:#a46b64; color:#fff; }
body.brand-body .appointment-booking-workspace .appointment-quick-dates { gap:8px; padding:4px 2px 10px; overflow-x:auto; scrollbar-width:none; }
body.brand-body .appointment-booking-workspace .appointment-quick-dates::-webkit-scrollbar { display:none; }
body.brand-body .appointment-booking-workspace .appointment-quick-dates button { min-width:82px; min-height:48px; border-radius:14px; }
body.brand-body .appointment-booking-workspace .appointment-availability { border-radius:18px; background:rgba(255,255,255,.72); }
body.brand-body .appointment-booking-workspace .appointment-availability-button { min-height:48px; border-radius:14px; transition:transform .2s ease, box-shadow .2s ease; }
body.brand-body .appointment-booking-workspace .appointment-availability-button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(84,67,51,.1); }
@media (max-width:767.98px) { body.brand-body .appointment-booking-workspace .appointment-date-time-picker { gap:12px; } body.brand-body .appointment-booking-workspace .appointment-availability-button { width:100%; } }
body.brand-body:has(.frexima-calendar-page), body.brand-body:has(.appointment-booking-workspace) {
    background: linear-gradient(180deg, rgba(248,243,238,.76), rgba(239,229,223,.96)), url('../img/hair-studio/salon-room-mobile-v2.png') top right / 520px auto no-repeat;
}
body.client-body:has(.client-booking-card), body.client-body:has(.client-booking-result) {
    background: linear-gradient(180deg, rgba(250,248,244,.8), rgba(246,243,237,.98)), url('../img/hair-studio/salon-room-mobile-v2.png') top right / 420px auto no-repeat;
}
body.client-body:has(.messages-shell), body.client-body:has(.salon-messages-shell) {
    background: linear-gradient(180deg, rgba(250,248,244,.82), rgba(246,243,237,.98)), url('../img/makeup-studio/salon-consultation.webp') top right / 460px auto no-repeat;
}
body.client-body:has(.client-inspirations) {
    background: linear-gradient(180deg, rgba(250,248,244,.82), rgba(246,243,237,.98)), url('../img/makeup-studio/salon-photo-vanity.webp') top right / 460px auto no-repeat;
}
body.client-body :where(.conversation-card, .message-thread, .messages-panel, .inspiration-card, .saved-inspiration-card) {
    border-radius: 20px;
    border-color: rgba(117,98,79,.13);
    box-shadow: 0 12px 28px rgba(84,67,51,.065);
}
body.client-body:has(.profile-page), body.client-body:has(.client-profile-page) {
    background: linear-gradient(180deg, rgba(250,248,244,.82), rgba(246,243,237,.98)), url('../img/makeup-studio/salon-reveal.webp') top right / 460px auto no-repeat;
}
body.client-body:has(.salons-page), body.client-body:has(.client-salons-page), body.client-body:has(.connections-page) {
    background: linear-gradient(180deg, rgba(250,248,244,.82), rgba(246,243,237,.98)), url('../img/makeup-studio/salon-stylist-working.webp') top right / 460px auto no-repeat;
}
body.client-body:has(.invites-page) {
    background: linear-gradient(180deg, rgba(250,248,244,.82), rgba(246,243,237,.98)), url('../img/makeup-studio/salon-makeup-counter.webp') top right / 460px auto no-repeat;
}
body.client-body :where(.profile-card, .salon-card, .connection-card, .video-card, .invite-card) {
    border-radius: 20px;
    border-color: rgba(117,98,79,.13);
    box-shadow: 0 12px 28px rgba(84,67,51,.065);
}
body.client-body:has(.client-timeline-page), body.client-body:has(.frexima-timeline-workspace) { background: linear-gradient(180deg,rgba(250,248,244,.8),rgba(246,243,237,.98)), url('../img/makeup-studio/salon-consultation.webp') top right/480px auto no-repeat; }
body.client-body :where(.client-timeline-page, .frexima-timeline-workspace, .connection-social-profile) :where(.timeline-post-card, .timeline-composer, .profile-card, article, .content-panel) { border-radius:22px; border-color:rgba(117,98,79,.13); box-shadow:0 12px 28px rgba(84,67,51,.07); }
body.client-body:has(.video-hub-page), body.brand-body:has(.video-hub-page) {
    background: linear-gradient(180deg, rgba(250,248,244,.8), rgba(246,243,237,.98)), url('../img/makeup-studio/salon-reveal.webp') top right / 480px auto no-repeat;
}
body.client-body .video-hub-page :where(.video-hub-stage, .video-hub-card, .short-video-public-card) {
    border-radius: 22px;
    border-color: rgba(117,98,79,.14);
    box-shadow: 0 14px 30px rgba(84,67,51,.08);
    overflow: hidden;
}
body.client-body:has(.hair-studio-page) { background: linear-gradient(180deg,rgba(250,248,244,.8),rgba(246,243,237,.98)), url('../img/hair-studio/salon-room-mobile-v2.png') top right/480px auto no-repeat; }
body.client-body:has(.makeup-studio-page) { background: linear-gradient(180deg,rgba(250,248,244,.8),rgba(246,243,237,.98)), url('../img/makeup-studio/salon-photo-vanity.webp') top right/480px auto no-repeat; }
body.client-body:has(.client-nail-catalogue) { background: linear-gradient(180deg,rgba(250,248,244,.8),rgba(246,243,237,.98)), url('../img/makeup-studio/salon-makeup-counter.webp') top right/480px auto no-repeat; }
body.client-body:has(.style-studio-page) { background: linear-gradient(180deg,rgba(250,248,244,.8),rgba(246,243,237,.98)), url('../img/makeup-studio/salon-stylist-working.webp') top right/480px auto no-repeat; }
body.client-body .client-openings-marketplace .client-discovery-search { position: sticky; top: 10px; z-index: 3; border-radius: 20px; box-shadow: 0 12px 26px rgba(84,67,51,.08); }
body.client-body .client-openings-marketplace .client-discovery-card { border-radius: 22px; box-shadow: 0 14px 30px rgba(84,67,51,.075); }
body.client-body .client-opening-result-card .client-discovery-availability { border-radius: 14px; background: rgba(185,126,119,.1); padding: 10px 12px; }
body.client-body .client-discovery-active-filters span { border-radius: 999px; }
@media (max-width:767.98px) { body.client-body .client-openings-marketplace .client-discovery-search { position: static; } body.client-body .client-openings-marketplace .client-discovery-submit { width:100%; } }
body.client-body:has(.forum-page), body.client-body:has(.forum-shell) { background: linear-gradient(180deg,rgba(250,248,244,.8),rgba(246,243,237,.98)), url('../img/makeup-studio/salon-consultation.webp') top right/480px auto no-repeat; }
body.client-body .frexima-forum-page { max-width:1180px; margin-inline:auto; padding:clamp(18px,3vw,38px); border:1px solid rgba(117,98,79,.12); border-radius:26px; background:rgba(255,253,249,.72); box-shadow:0 14px 34px rgba(84,67,51,.06); }
body.client-body .frexima-forum-page .forum-shell { border-radius:22px; background:rgba(255,255,255,.68); }
body.client-body .frexima-forum-page .forum-topic-row, body.client-body .frexima-forum-page .forum-topic-main { border-radius:16px; transition:background .2s ease, transform .2s ease; }
body.client-body .frexima-forum-page .forum-topic-row:hover { transform:translateY(-2px); background:rgba(185,126,119,.08); }
@media (max-width:767.98px) { body.client-body .frexima-forum-page { width:calc(100% - 20px); padding:16px 12px; border-radius:20px; } }
body.client-body :where(.module-back, .studio-back, .wizard-back, .client-module-back) { color:var(--client-color-muted,#776b61); border-radius:999px; transition:color .2s ease, background .2s ease; }
body.client-body :where(.module-back, .studio-back, .wizard-back, .client-module-back):hover { color:var(--client-color-primary,#9b6f68); background:rgba(185,126,119,.1); }
body.client-body :where(.module-next, .studio-next, .wizard-next, .client-module-next, .save-action) { border-radius:999px; min-height:46px; box-shadow:0 8px 18px rgba(132,87,82,.16); }
/* Every client module inherits the same quiet house envelope. */
body.client-body :where(.client-lookbook-page, .client-salon-space-page, .client-salon-page, .client-invitations-page, .client-privacy-page, .client-onboarding-page, .client-discovery-page, .connections-page, .forum-page, .notifications-page, .payments-page, .account-page) {
    background: linear-gradient(180deg, rgba(250,248,244,.72), rgba(246,243,237,.96));
    border-radius: 24px;
}
body.client-body :where(.client-lookbook-page, .client-salon-space-page, .client-salon-page, .client-invitations-page, .client-privacy-page, .client-onboarding-page, .client-discovery-page, .connections-page, .forum-page, .notifications-page, .payments-page, .account-page) :where(.card, .content-panel, article, section) {
    border-radius: 20px;
    border-color: rgba(117,98,79,.13);
    box-shadow: 0 10px 26px rgba(84,67,51,.055);
}
body.brand-body :where(.brand-dashboard-page, .brand-calendar-page, .brand-appointments-page, .brand-booking-page, .brand-clients-page, .brand-services-page, .brand-team-page, .brand-campaigns-page, .brand-reports-page, .brand-settings-page, .brand-main-content, .brand-app-content) :where(.card, .content-panel, article, section, .table-responsive) {
    border-radius: 20px;
    border-color: rgba(117,98,79,.13);
    box-shadow: 0 10px 26px rgba(84,67,51,.055);
}
body.brand-body :where(.brand-dashboard-page, .brand-calendar-page, .brand-appointments-page, .brand-booking-page, .brand-clients-page, .brand-services-page, .brand-team-page, .brand-campaigns-page, .brand-reports-page, .brand-settings-page) :where(.btn-primary, .btn-success) {
    border-radius: 999px;
    background: #a46b64;
    border-color: #a46b64;
}
body.client-body :where(.empty-state, .client-empty-state, .no-results, .loading-state, .skeleton-card, .success-state, .error-state),
body.brand-body :where(.empty-state, .no-results, .loading-state, .skeleton-card, .success-state, .error-state) {
    border-radius: 20px;
    border: 1px solid rgba(117,98,79,.12);
    background: rgba(255,253,249,.72);
    box-shadow: 0 10px 24px rgba(84,67,51,.05);
}
body.client-body :where(.modal-content, .offcanvas, .dropdown-menu), body.brand-body :where(.modal-content, .offcanvas, .dropdown-menu) {
    border-radius: 20px;
    border-color: rgba(117,98,79,.14);
    box-shadow: 0 18px 42px rgba(84,67,51,.14);
}
body.client-body :where(a, button, input, select, textarea):focus-visible,
body.brand-body :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(164,107,100,.35);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    body.client-body *, body.brand-body * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
body.client-body :where(.studio-step, .style-step, .hair-step, .makeup-step, .nail-step, .wizard-step) {
    border-radius: 20px;
    border: 1px solid rgba(117,98,79,.12);
    background: rgba(255,255,255,.66);
}
body.client-body :where(.studio-choice, .style-choice, .hair-choice, .makeup-choice, .nail-choice, .wizard-choice, [data-choice]) {
    border-radius: 16px;
    border-color: rgba(117,98,79,.16);
    background: rgba(255,253,249,.86);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
body.client-body :where(.studio-choice, .style-choice, .hair-choice, .makeup-choice, .nail-choice, .wizard-choice, [data-choice]):hover,
body.client-body :where(.studio-choice, .style-choice, .hair-choice, .makeup-choice, .nail-choice, .wizard-choice, [data-choice]).is-selected,
body.client-body :where(.studio-choice, .style-choice, .hair-choice, .makeup-choice, .nail-choice, .wizard-choice, [data-choice])[aria-checked="true"] {
    border-color: var(--client-color-primary, #9b6f68);
    background: rgba(185,126,119,.1);
    transform: translateY(-2px);
}
body.client-body :where(.studio-result, .style-result, .hair-result, .makeup-result, .nail-result, .wizard-summary) {
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(250,241,236,.84));
    box-shadow: 0 16px 34px rgba(84,67,51,.09);
}
@media (max-width:640px) { body.client-body .frexima-community-wall-page .cw-header { margin-inline:.75rem; border-radius:20px; padding:.9rem; } body.client-body .frexima-community-wall-page .cw-main { margin-inline:.75rem; } body.client-body .frexima-community-wall-page .cw-story-rail { border-radius:18px; padding:.8rem; } body.client-body .frexima-community-wall-page .cw-post-card { border-radius:20px; } }
@media (max-width:767.98px) {
    body.client-body .main-content { padding-inline: var(--fx-page-gutter, 16px); padding-bottom: 92px; }
    body.client-body :where(.content-panel, .client-card, .client-panel) { border-radius: 18px; padding: 16px; }
    body.client-body :where(.section-heading, .page-heading, .hero-heading) { gap: 10px; }
    body.client-body :where(.section-heading, .page-heading, .hero-heading) h1 { font-size: clamp(1.45rem, 7vw, 2rem); line-height: 1.12; }
    body.client-body :where(.main-content > .content-panel .btn, .client-more-page .btn) { min-height: 44px; }
    body.client-body :where(.table-responsive, .overflow-auto) { margin-inline: -4px; padding-inline: 4px; }
    body.client-body :where(.d-flex, .flex-row) { min-width: 0; }
    body.client-body :where(.hair-studio-flow, .style-studio-flow, .makeup-studio-flow, .nail-studio-flow) { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
    body.client-body :where(.hair-studio-flow, .style-studio-flow, .makeup-studio-flow, .nail-studio-flow)::-webkit-scrollbar { display:none; }
    body.client-body :where(.hair-studio-flow, .style-studio-flow, .makeup-studio-flow, .nail-studio-flow) > * { flex:0 0 104px; }
    body.client-body :where(.hair-style-card, .makeup-style-card, .style-look-card, .nail-inspiration-card, .service-card) { min-height:112px; }
    body.client-body .client-bottom-nav { padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
    body.client-body .client-bottom-nav a { font-size:.68rem; min-height:52px; }
    body.client-body .client-bottom-nav-primary { width:50px; height:50px; min-height:50px !important; border-radius:50%; }
}
body.client-body :where(.topbar, .client-topbar, .app-topbar) {
    background: rgba(255,253,249,.86);
    border-bottom: 1px solid rgba(117,98,79,.1);
    box-shadow: 0 8px 22px rgba(84,67,51,.045);
    backdrop-filter: blur(12px);
}
body.client-body .main-content > .content-panel :where(h1, h2, h3, h4) { color: var(--client-color-text, #453b34); }
body.client-body .main-content > .content-panel .btn-primary { border-radius: 999px; }
body.client-body :where(.btn-light, .btn-outline-secondary) { border-radius: 999px; border-color: rgba(117,98,79,.18); background: rgba(255,255,255,.72); }
body.client-body :where(.alert, .notice, .flash-message) { border-radius: 16px; border-color: rgba(117,98,79,.12); }

/* Keep the community feed compact and every home navigation target on one row. */
@media (max-width: 767.98px) {
    body.client-body .client-bottom-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); transition: opacity .16s ease, transform .16s ease; }
    body.client-body .client-bottom-nav > :is(a, button) { min-width: 0; }
    body.client-body .frexima-community-wall-page .cw-main { margin: 0; width: 100%; }
    body.client-body .frexima-community-wall-page .cw-story-rail { padding: 6px 8px; }
}

body.client-body .forum-icon-button { flex-shrink: 0; min-width: 44px; min-height: 44px; }

/* The forum shares the available page width with the desktop sidebar. */
body.client-body .frexima-forum-page {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}
body.client-body .forum-topbar > *,
body.client-body .forum-profile-chip,
body.client-body .forum-profile-chip strong {
    min-width: 0;
}
body.client-body .forum-profile-chip {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
body.client-body .forum-profile-chip :is(img, span) { flex-shrink: 0; }
@media (min-width: 1200px) {
    body.client-body .forum-topbar {
        grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr) minmax(0, .9fr);
    }
}