/* Maw3ed Bold visual layer (Phase77).
   A screen-only, additive layer loaded last by Views/Shared/Phase76/_Layout76.cshtml.
   It re-tokens and re-skins the existing Phase76 `mw76-*` components. It does not change markup contracts,
   form destinations, antiforgery, validation, authorization, EN/AR/FR text, or print styles.
   Palette is the existing Maw3ed brand: pink #FF0080 / action #C90065, indigo #282B8B, amber #FFA621, ink #151519.
   Every selector is anchored on `.mw76-frame` so it out-ranks the Phase76 files without !important. */
@media screen {

/* ------------------------------------------------------------------ 1. Tokens */
.mw76-frame .mw76-root,
.mw76-frame,
body.mw76-root,
body.mw76-root .mw76-root {
    --mw76-surface: #ffffff;
    --mw76-surface-muted: #f7f5fb;
    --mw76-surface-tint: #f9e8f2;
    --mw76-text: #151519;
    --mw76-text-muted: #575c6c;
    --mw76-radius-card: 1.25rem;
    --mw76-radius-control: 0.875rem;
    --mw76-shadow-card: 0 6px 24px rgb(40 43 139 / 9%);
    --mw76-font-display: var(--mw76-font-ui);

    --bold-ink: #151519;
    --bold-pink: #ff0080;
    --bold-action: #c90065;
    --bold-indigo: #282b8b;
    --bold-amber: #ffa621;
    --bold-grad: linear-gradient(90deg, #c90065, #ff0080);
    --bold-grad-text: linear-gradient(90deg, #e6007a, #282b8b);
    --bold-line: rgb(21 21 25 / 12%);
    --bold-line-strong: rgb(21 21 25 / 22%);
    --bold-tile: #f1eff8;
    --bold-glass: rgb(255 255 255 / 88%);
    --bold-canvas: #f7f5fb;
    --bold-lift: 0 14px 34px rgb(40 43 139 / 16%);
    --bold-glow: 0 0 0 4px rgb(255 0 128 / 20%);
    --bold-ease: cubic-bezier(0.2, 0, 0, 1);
    --bold-chip-bg: rgb(255 166 33 / 22%);
    --bold-chip-fg: #7a4a00;
}

[data-theme="dark"] .mw76-frame .mw76-root,
[data-theme="dark"] .mw76-frame,
[data-theme="dark"] body.mw76-root,
[data-theme="dark"] body.mw76-root .mw76-root {
    --mw76-surface: #1e1e27;
    --mw76-surface-muted: #151519;
    --mw76-surface-tint: #2d2036;
    --mw76-text: #f4f4f8;
    --mw76-text-muted: #b6b8c6;
    --mw76-border: #7e8296;
    --mw76-shadow-card: 0 8px 28px rgb(0 0 0 / 38%);
    --mw-theme-line: #3a3a48;
    --mw-theme-raised: #262631;
    --mw-theme-action-fill: #c90065;
    --mw76-o-line: #3a3a48;
    --mw76-e-line: #3a3a48;

    --bold-line: rgb(255 255 255 / 14%);
    --bold-line-strong: rgb(255 255 255 / 26%);
    --bold-tile: rgb(255 255 255 / 8%);
    --bold-glass: rgb(30 30 39 / 90%);
    --bold-canvas: #151519;
    --bold-grad-text: linear-gradient(90deg, #ff4fa3, #ffa621);
    --bold-lift: 0 14px 34px rgb(0 0 0 / 46%);
    --bold-chip-bg: rgb(255 166 33 / 18%);
    --bold-chip-fg: #ffc46b;
}

/* ------------------------------------------------------------------ 2. Page backdrop */
/* Soft brand glows live on the body background itself (no fixed layer), so they scroll with the page and stay cheap to paint. */
html {
    background-color: #f7f5fb;
    background-image:
        radial-gradient(closest-side, rgb(255 0 128 / 15%), transparent),
        radial-gradient(closest-side, rgb(40 43 139 / 13%), transparent),
        radial-gradient(closest-side, rgb(255 166 33 / 15%), transparent);
    background-repeat: no-repeat;
    background-size: 900px 760px, 980px 820px, 760px 640px;
    background-position: right -240px top -260px, left -320px top 120px, right 8% bottom -320px;
}
html[dir="rtl"] { background-position: left -240px top -260px, right -320px top 120px, left 8% bottom -320px; }
html[data-theme="dark"] {
    background-color: #151519;
    background-image:
        radial-gradient(closest-side, rgb(255 0 128 / 32%), transparent),
        radial-gradient(closest-side, rgb(40 43 139 / 62%), transparent),
        radial-gradient(closest-side, rgb(255 166 33 / 12%), transparent);
}
/* The legacy shell paints an opaque canvas on the body with !important; hand the page back to <html>. */
html body.app-body,
html body.public-body { background: transparent !important; }
.mw76-frame > .mw76-root,
.mw76-frame > .mw76-root.mw76-content { background: transparent; }

/* ------------------------------------------------------------------ 3. Typography */
.mw76-frame .mw76-root.mw76-content :is(h1, h2, h3) {
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--mw76-text);
}
.mw76-frame .mw76-root.mw76-content h1 { line-height: 1.1; }
.mw76-frame .mw76-root.mw76-content :is(h2, h3) { line-height: 1.2; }
[lang="ar"] .mw76-frame .mw76-root.mw76-content :is(h1, h2, h3) { letter-spacing: 0; font-weight: 700; line-height: 1.4; }
[lang="ar"] .mw76-frame .mw76-root { letter-spacing: 0; }
.mw76-frame .mw76-root :is(.mw76-kicker, .mw76-public-kicker, .mw76-c-page-kicker, .mw76-c-booking-kicker, .mw76-c-marketplace-eyebrow, .mw76-t-page-kicker,
    .mw76-t-section-kicker, .mw76-t-panel-label, .mw76-o-page-kicker, .mw76-o-booking-kicker, .mw76-p-kicker, .mw76-booking-kicker, .mw76-eyebrow, .mw76-auth-eyebrow, .mw76-c-success-kicker) {
    color: var(--mw76-color-action);
    font-weight: 800;
    letter-spacing: 0;
}

/* ------------------------------------------------------------------ 4. Buttons (every family) */
.mw76-frame .mw76-root :is(.mw76-action, .mw-button--primary, .mw76-button, .mw76-c-button, .mw76-e-button, .mw76-e-button--quiet, .mw76-o-button, .mw76-p-button, .mw76-verify-action, .mw76-security-danger-button) {
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s var(--bold-ease), box-shadow 0.18s var(--bold-ease), background-color 0.18s var(--bold-ease), border-color 0.18s var(--bold-ease), color 0.18s var(--bold-ease);
}
.mw76-frame .mw76-root :is(.mw76-action, .mw-button--primary, .mw76-button, .mw76-c-button, .mw76-e-button, .mw76-e-button--quiet, .mw76-o-button, .mw76-p-button, .mw76-verify-action):hover {
    text-decoration: none;
    transform: translateY(-1px);
}
.mw76-frame .mw76-root :is(.mw76-action, .mw76-button, .mw76-c-button, .mw76-o-button, .mw76-p-button, .mw76-e-button--quiet):not(:is(.mw76-action--primary, .mw76-button--primary, .mw76-c-button--primary, .mw76-p-button--primary, .mw76-action--quiet, .mw76-button--ghost, .mw76-c-danger-action, .mw76-o-danger-action, .mw76-t-danger-action, .mw76-t-success-action, .mw76-p-button--danger, .mw76-p-button--warning, .mw76-p-button--success)) {
    background: var(--mw76-surface);
    border-color: var(--bold-line-strong);
    color: var(--mw76-link);
}
.mw76-frame .mw76-root :is(.mw76-action, .mw76-button, .mw76-c-button, .mw76-o-button, .mw76-p-button, .mw76-e-button--quiet):not(:is(.mw76-action--primary, .mw76-button--primary, .mw76-c-button--primary, .mw76-p-button--primary, .mw76-action--quiet, .mw76-button--ghost, .mw76-c-danger-action, .mw76-o-danger-action, .mw76-t-danger-action, .mw76-t-success-action, .mw76-p-button--danger, .mw76-p-button--warning, .mw76-p-button--success)):hover {
    border-color: var(--bold-pink);
    background: var(--mw76-surface-tint);
}
.mw76-frame .mw76-root :is(.mw76-action--primary, .mw-button--primary, .mw76-button--primary, .mw76-c-button--primary, .mw76-e-button, .mw76-p-button--primary, .mw76-verify-action) {
    background: var(--bold-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgb(255 0 128 / 26%);
}
.mw76-frame .mw76-root :is(.mw76-action--primary, .mw-button--primary, .mw76-button--primary, .mw76-c-button--primary, .mw76-e-button, .mw76-p-button--primary, .mw76-verify-action):hover {
    background: var(--bold-grad);
    color: #fff;
    box-shadow: 0 10px 26px rgb(255 0 128 / 38%);
}
.mw76-frame .mw76-root :is(.mw76-action--primary, .mw76-button--primary, .mw76-c-button--primary, .mw76-p-button--primary, .mw76-e-button, .mw76-verify-action):active { transform: translateY(0); }
/* A disabled action must look unavailable (gradient fills hid the native disabled state, e.g. email change when not eligible). */
.mw76-frame .mw76-root :is(.mw76-action, .mw76-button, .mw76-c-button, .mw76-o-button, .mw76-p-button, .mw76-e-button):disabled {
    background: var(--bold-tile); border-color: var(--bold-line); color: var(--mw76-text-muted); box-shadow: none; transform: none; cursor: not-allowed; opacity: 1;
}
.mw76-frame .mw76-root :is(.mw76-action--quiet, .mw76-button--ghost) { background: transparent; border-color: transparent; box-shadow: none; }
.mw76-frame .mw76-root :is(.mw76-action--quiet, .mw76-button--ghost):hover { background: var(--mw76-surface-tint); }
.mw76-frame .mw76-root :is(.mw76-action, .mw76-button, .mw76-c-button, .mw76-o-button, .mw76-p-button) :is(svg, i) { transition: transform 0.18s var(--bold-ease); }
.mw76-frame .mw76-root :is(.mw76-action, .mw76-button):hover :is(svg, i):not(.mw76-directional-icon) { transform: translate(1px, -1px); }
.mw76-frame .mw76-root :is(.mw76-icon-button, .mw76-search__clear) { border-radius: 999px; }

/* ------------------------------------------------------------------ 5. Shell chrome */
.mw76-frame > .mw76-root.mw76-header {
    background: var(--bold-glass);
    border-block-end: 1px solid var(--bold-line);
}
.mw76-frame > .mw76-root.mw76-footer { background: transparent; border-block-start: 1px solid var(--bold-line); }
.mw76-frame .mw76-root.mw76-public.mw76-footer { background: transparent; border-block-start-color: var(--bold-line); }
.mw76-frame .mw76-root .mw76-brand { color: var(--mw76-text); font-weight: 800; letter-spacing: -0.02em; }
.mw76-frame .mw76-root .mw76-brand-mark {
    background: linear-gradient(135deg, #ff0080, #ffa621);
    color: #fff;
    border-radius: 0.8rem;
    box-shadow: 0 6px 16px rgb(255 0 128 / 30%);
    font-weight: 800;
}
.mw76-frame .mw76-root.mw76-public .mw76-public-brand-copy small { color: var(--mw76-text-muted); }
.mw76-frame .mw76-root.mw76-public .mw76-public-link {
    border-block-end: 0;
    border-radius: 999px;
    padding-inline: var(--mw76-space-4);
    color: var(--mw76-text-muted);
    font-weight: 700;
    transition: background-color 0.18s var(--bold-ease), color 0.18s var(--bold-ease);
}
.mw76-frame .mw76-root.mw76-public .mw76-public-link:hover { background: var(--mw76-surface-tint); color: var(--mw76-text); }
.mw76-frame .mw76-root.mw76-public .mw76-public-link.is-active { background: var(--mw76-text); color: var(--mw76-surface); }
.mw76-frame .mw76-root.mw76-public .mw76-public-footer-brand strong { color: var(--mw76-text); }

/* Sidebars: tenant, customer and platform share one rail language. */
.mw76-frame .mw76-root.mw76-tenant.mw76-tenant-sidebar,
.mw76-frame .mw76-root.mw76-customer.mw76-customer-sidebar { background: transparent; }
@media (min-width: 992px) {
    .mw76-frame .mw76-root.mw76-tenant .mw76-tenant-panel,
    .mw76-frame .mw76-root.mw76-customer .mw76-customer-panel {
        background: var(--mw76-surface);
        border: 1px solid var(--bold-line);
        border-radius: 1.5rem;
        box-shadow: var(--mw76-shadow-card);
    }
}
.mw76-frame .mw76-root.mw76-platform.mw76-platform-sidebar { background: linear-gradient(180deg, #202547 0%, #282b8b 55%, #3a1f6e 100%); }
[data-theme="dark"] .mw76-frame .mw76-root.mw76-platform.mw76-platform-sidebar,
[data-theme="dark"] .mw76-frame .mw76-root.mw76-platform .mw76-platform-panel { background: linear-gradient(180deg, #1b1c33 0%, #20225a 60%, #2d1a55 100%); }
/* Below 992px the sidebar collapses to zero height and the panel becomes a fixed offcanvas, so it paints its own gradient.
   On the desktop rail the sidebar already paints it, and a transparent panel avoids a second gradient seam. */
.mw76-frame .mw76-root.mw76-platform .mw76-platform-panel { background: linear-gradient(180deg, #202547 0%, #282b8b 55%, #3a1f6e 100%); color: #fff; }
@media (min-width: 992px) {
    .mw76-frame .mw76-root.mw76-platform .mw76-platform-panel { background: transparent; }
}
.mw76-frame .mw76-root:is(.mw76-tenant, .mw76-customer, .mw76-platform) .app-nav-link,
.mw76-frame .mw76-root.mw76-public .mw76-operational-links .app-nav-link {
    border-inline-start: 0;
    border-radius: 999px;
    font-weight: 700;
    transition: background-color 0.18s var(--bold-ease), color 0.18s var(--bold-ease), transform 0.18s var(--bold-ease);
}
.mw76-frame .mw76-root:is(.mw76-tenant, .mw76-customer) .app-nav-link { color: var(--mw76-text-muted); }
.mw76-frame .mw76-root:is(.mw76-tenant, .mw76-customer) .app-nav-link:hover { background: var(--mw76-surface-tint); color: var(--mw76-text); transform: translateX(2px); }
[dir="rtl"] .mw76-frame .mw76-root:is(.mw76-tenant, .mw76-customer) .app-nav-link:hover { transform: translateX(-2px); }
.mw76-frame .mw76-root:is(.mw76-tenant, .mw76-customer) .app-nav-link.is-active,
.mw76-frame .mw76-root.mw76-public .mw76-operational-links .app-nav-link.is-active {
    background: var(--bold-grad);
    color: #fff;
    box-shadow: 0 6px 16px rgb(255 0 128 / 26%);
}
.mw76-frame .mw76-root.mw76-platform .app-nav-link { color: rgb(255 255 255 / 82%); }
.mw76-frame .mw76-root.mw76-platform .app-nav-link:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.mw76-frame .mw76-root.mw76-platform .app-nav-link.is-active { background: var(--bold-grad); border-inline-start-color: transparent; color: #fff; box-shadow: 0 6px 16px rgb(255 0 128 / 30%); }
.mw76-frame .mw76-root.mw76-platform .app-nav-title,
.mw76-frame .mw76-root.mw76-platform .mw76-platform-navigation-title { color: rgb(255 255 255 / 62%); }
.mw76-frame .mw76-root :is(.mw76-tenant-account-toggle, .mw76-customer-account-toggle, .mw76-platform-account-toggle) {
    border-radius: 999px;
    border-color: var(--bold-line);
    background: var(--mw76-surface);
}
.mw76-frame .mw76-root :is(.mw76-tenant-avatar, .mw76-customer-avatar) { background: linear-gradient(135deg, #ff0080, #ffa621); color: #fff; }
.mw76-frame .mw76-root.mw76-platform .mw76-platform-avatar { background: linear-gradient(135deg, #ff0080, #ffa621); color: #fff; border-radius: 50%; }
.mw76-frame .mw76-root.mw76-platform .mw76-platform-emblem { background: var(--mw76-surface-tint); color: var(--mw76-color-action); border-radius: 0.8rem; }
.mw76-frame .mw76-root :is(.mw76-tenant-account-menu, .mw76-customer-account-menu, .mw76-platform-account-menu, .dropdown-menu) {
    border-radius: 1.1rem;
    border-color: var(--bold-line);
    box-shadow: var(--bold-lift);
}
.mw76-frame .mw76-root :is(.mw76-tenant-workspace, .mw76-customer-workspace, .mw76-platform-workspace) { color: var(--mw76-text); }
.mw76-frame .mw76-root :is(.mw-language-button) { border-radius: 999px; font-weight: 700; }
.mw76-frame .mw76-root .mw-language-button.is-active { background: var(--mw76-text); color: var(--mw76-surface); border-color: var(--mw76-text); }

/* ------------------------------------------------------------------ 6. Surfaces (cards, panels, tiles) */
.mw76-frame .mw76-root.mw76-content :is(
    .mw76-c-panel, .mw76-c-card, .mw76-c-booking-section, .mw76-c-booking-summary, .mw76-c-metric, .mw76-c-metric-card, .mw76-c-summary-card, .mw76-c-request-panel, .mw76-c-review-card,
    .mw76-c-appointment-card, .mw76-c-appointment-request-card, .mw76-c-customer-calendar-card, .mw76-c-customer-notification-card, .mw76-c-salon-card,
    .mw76-t-panel, .mw76-t-card, .mw76-t-owner-setup-card, .mw76-t-side-panel, .mw76-t-metric, .mw76-t-service-card, .mw76-t-report-card, .mw76-t-report-metric-card, .mw76-t-branch-card, .mw76-t-hour-card, .mw76-t-check-card,
    .mw76-o-panel, .mw76-o-side-panel, .mw76-o-metric-card, .mw76-o-today-summary-card, .mw76-o-appointment-card, .mw76-o-bookings-filter-card, .mw76-o-bookings-results-card, .mw76-o-bookings-request-card, .mw76-o-owner-table-card, .mw76-o-customer-search-card, .mw76-o-request-attention-card, .mw76-o-availability-summary-card,
    .mw76-e-panel, .mw76-e-focus-card, .mw76-e-preference-card, .mw76-p-panel, .mw76-p-metric, .mw76-p-form-panel,
    .mw76-booking-section, .mw76-discovery-card, .mw76-public-salon-card, .mw76-security-card, .mw76-verification-card, .mw76-state-surface) {
    border: 1px solid var(--bold-line);
    border-radius: var(--mw76-radius-card);
    background: var(--mw76-surface);
    box-shadow: var(--mw76-shadow-card);
}
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-appointment-card, .mw76-c-salon-card, .mw76-c-metric, .mw76-c-metric-card, .mw76-t-metric, .mw76-t-service-card, .mw76-o-metric-card, .mw76-o-today-summary-card, .mw76-o-appointment-card, .mw76-p-metric, .mw76-discovery-card, .mw76-public-salon-card, .mw76-t-report-metric-card, .mw76-e-focus-card) {
    transition: transform 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease);
}
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-appointment-card, .mw76-c-salon-card, .mw76-c-metric, .mw76-c-metric-card, .mw76-t-metric, .mw76-t-service-card, .mw76-o-metric-card, .mw76-o-today-summary-card, .mw76-o-appointment-card, .mw76-p-metric, .mw76-discovery-card, .mw76-public-salon-card, .mw76-t-report-metric-card, .mw76-e-focus-card):hover {
    transform: translateY(-3px);
    border-color: var(--bold-pink);
    box-shadow: var(--bold-lift);
}
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-panel, .mw76-t-panel, .mw76-o-panel, .mw76-e-panel, .mw76-p-panel) :is(.mw76-c-panel-header, .mw76-t-panel-header, .mw76-o-panel-header) { border-block-end-color: var(--bold-line); }
.mw76-frame .mw76-root.mw76-content .mw76-state-surface { border-block-start: 4px solid var(--bold-pink); }

/* Page headers: strong title, hairline and room. */
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-page-header, .mw76-c-marketplace-hero, .mw76-c-booking-context, .mw76-t-page-header, .mw76-o-page-header, .mw76-p-header, .mw76-explore__header, .mw76-e-heading) {
    border-block-end-color: var(--bold-line);
}
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-page-header, .mw76-t-page-header, .mw76-o-page-header, .mw76-p-header) h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }

/* ------------------------------------------------------------------ 7. Forms */
.mw76-frame .mw76-root :is(.mw76-input, .mw76-select, .mw76-c-input, .mw76-t-input, .mw76-o-input, .mw76-e-input, .mw76-p-input, .mw76-booking-native-select) {
    border-radius: var(--mw76-radius-control);
    background: var(--mw76-surface);
    transition: border-color 0.18s var(--bold-ease), box-shadow 0.18s var(--bold-ease);
}
.mw76-frame .mw76-root :is(.mw76-input, .mw76-select, .mw76-c-input, .mw76-t-input, .mw76-o-input, .mw76-e-input, .mw76-p-input, .mw76-booking-native-select):hover { border-color: var(--bold-pink); }
.mw76-frame .mw76-root :is(.mw76-input, .mw76-select, .mw76-c-input, .mw76-t-input, .mw76-o-input, .mw76-e-input, .mw76-p-input, .mw76-booking-native-select):focus,
.mw76-frame .mw76-root :is(.mw76-input, .mw76-select, .mw76-c-input, .mw76-t-input, .mw76-o-input, .mw76-e-input, .mw76-p-input, .mw76-booking-native-select):focus-visible {
    border-color: var(--bold-pink);
    box-shadow: var(--bold-glow);
}
.mw76-frame .mw76-root :is(.mw76-search-field, .mw76-explore-search__field) { border-radius: 999px; }
.mw76-frame .mw76-root :is(.mw76-field-label, .mw76-c-label, .mw76-t-label, .mw76-o-label, .mw76-e-label, .mw76-p-label) { font-weight: 700; }

/* ------------------------------------------------------------------ 8. Status chips, badges, filters */
.mw76-frame .mw76-root :is(.mw76-c-status, .mw76-c-status-badge, .mw76-t-status, .mw76-o-status, .mw76-o-bookings-status-badge, .mw76-p-status, .mw76-e-badge, .mw76-account-badge, .mw76-security-badge,
    .mw76-c-soft-pill, .mw76-o-soft-pill, .mw76-t-soft-pill, .mw76-o-chip, .mw76-t-count-pill, .mw76-filter-chip, .mw76-c-filter-chip) {
    border-radius: 999px;
    font-weight: 700;
}
.mw76-frame .mw76-root :is(.mw76-filter-chip, .mw76-c-filter-chip) { background: rgb(255 0 128 / 12%); border-color: rgb(255 0 128 / 45%); }

/* ------------------------------------------------------------------ 9. Tables */
.mw76-frame .mw76-root :is(.mw76-c-table, .mw76-t-table, .mw76-o-table, .mw76-p-table, .mw76-e-request-table, .mw76-billing-table) th {
    font-weight: 800;
    letter-spacing: 0;
}
.mw76-frame .mw76-root :is(.mw76-c-table-scroll, .mw76-t-table-scroll, .mw76-o-table-scroll, .mw76-e-table-scroll, .mw76-o-bookings-table-wrap) { border-radius: 1rem; }
.mw76-frame .mw76-root :is(.mw76-c-table, .mw76-t-table, .mw76-o-table, .mw76-p-table, .mw76-e-request-table, .mw76-billing-table) tbody tr { transition: background-color 0.15s var(--bold-ease); }

/* ------------------------------------------------------------------ 9b. Public header layout */
.mw76-frame .mw76-root.mw76-public .mw76-public-links,
.mw76-frame .mw76-root.mw76-public .mw76-public-account-links { flex-wrap: nowrap; }
.mw76-frame .mw76-root.mw76-public .mw76-public-menu { flex-wrap: nowrap; }
@media (max-width: 991.98px) {
    .mw76-frame .mw76-root.mw76-public .mw76-public-links,
    .mw76-frame .mw76-root.mw76-public .mw76-public-account-links { flex-wrap: wrap; }
}

.mw76-frame .mw76-root :is(.mw76-public-link, .mw76-public-account-links a, .mw76-public-account-links .mw76-action) { white-space: nowrap; }
.mw76-frame .mw76-root .mw-appearance select {
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border-radius: 999px;
    border-color: var(--bold-line-strong);
    background-color: var(--mw76-surface);
    color: var(--mw76-text);
    font-weight: 700;
}
.mw76-frame .mw76-root .mw-appearance select:hover { border-color: var(--bold-pink); }

/* ------------------------------------------------------------------ 11. Home */
.mw76-frame .mw76-root.mw76-public-content .mw76-home-hero {
    background: transparent;
    padding-block: var(--mw76-space-12) var(--mw76-space-6);
    position: relative;
}
.mw76-frame .mw76-root.mw76-public-content .mw76-home-hero-grid { gap: var(--mw76-space-8); }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-copy h1 {
    color: var(--mw76-text);
    font-size: clamp(2.25rem, 5vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
    margin-block-end: var(--mw76-space-6);
}
[lang="ar"] .mw76-frame .mw76-root.mw76-public-content .mw76-home-copy h1 { line-height: 1.3; letter-spacing: 0; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-copy h1::after {
    content: "";
    display: block;
    inline-size: 4.5rem;
    block-size: 0.4rem;
    margin-block-start: var(--mw76-space-4);
    border-radius: 999px;
    background: linear-gradient(90deg, #ff0080, #ffa621);
}
.mw76-frame .mw76-root.mw76-public-content .mw76-home-copy .mw76-eyebrow {
    display: inline-flex;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--bold-line-strong);
    border-radius: 999px;
    background: var(--mw76-surface);
    color: var(--mw76-text);
    font-size: 0.8125rem;
}
.mw76-frame .mw76-root.mw76-public-content .mw76-home-copy .mw76-eyebrow svg { color: var(--bold-amber); }
.mw76-frame .mw76-root.mw76-public-content .mw76-lead { color: var(--mw76-text-muted); }

/* Decorative booking card + floating chips (aria-hidden markup in Home/Index.cshtml). */
.mw76-frame .mw76-root.mw76-public-content .mw76-home-art { min-block-size: 26rem; --mx: 0; --my: 0; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone {
    inline-size: 13rem;
    padding: 0.7rem;
    border: 1px solid var(--bold-line);
    border-radius: 1.8rem;
    background: var(--mw76-surface);
    box-shadow: var(--bold-lift);
    transform: perspective(900px) rotateY(calc(var(--mx) * 8deg - 9deg)) rotateX(calc(var(--my) * -6deg + 4deg));
    transition: transform 0.15s ease-out;
}
[dir="rtl"] .mw76-frame .mw76-root.mw76-public-content .mw76-home-phone { transform: perspective(900px) rotateY(calc(var(--mx) * 8deg + 9deg)) rotateX(calc(var(--my) * -6deg + 4deg)); }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone__head {
    display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem;
    min-block-size: 6.4rem; padding: 0.75rem 0.9rem; border-radius: 1.3rem; color: #fff;
    background: linear-gradient(135deg, #282b8b, #ff0080);
}
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone__head svg { inline-size: 1.9rem; block-size: 1.9rem; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone__head small { font-weight: 700; font-size: 0.75rem; color: #fff; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone__slots { display: flex; gap: 0.4rem; margin-block-start: 0.7rem; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone__slots span { flex: 1; text-align: center; padding: 0.45rem 0; border-radius: 0.8rem; background: var(--bold-tile); font-weight: 700; font-size: 0.75rem; color: var(--mw76-text); }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone__slots .is-active { background: var(--mw76-text); color: var(--mw76-surface); }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone__bar { block-size: 0.4rem; margin: 0.85rem 0.15rem 0.7rem; border-radius: 99px; background: var(--bold-tile); overflow: hidden; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone__bar b { display: block; inline-size: 68%; block-size: 100%; background: linear-gradient(90deg, #ff0080, #ffa621); }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-phone__cta { display: block; text-align: center; padding: 0.55rem 0; border-radius: 0.95rem; background: var(--bold-grad); color: #fff; font-weight: 800; font-size: 0.8125rem; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-float {
    position: absolute;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--bold-line);
    border-radius: 1rem;
    background: var(--mw76-surface);
    box-shadow: var(--mw76-shadow-card);
    color: var(--mw76-text);
    font-weight: 800; font-size: 0.75rem;
    transform: translate(calc(var(--mx) * var(--k, 14) * 1px), calc(var(--my) * var(--k, 14) * 1px));
    transition: transform 0.2s ease-out;
    animation: mw-bold-float 6s ease-in-out infinite;
}
[dir="rtl"] .mw76-frame .mw76-root.mw76-public-content .mw76-home-float { transform: translate(calc(var(--mx) * var(--k, 14) * -1px), calc(var(--my) * var(--k, 14) * 1px)); }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-float svg { inline-size: 1rem; block-size: 1rem; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-float__stars { display: inline-flex; color: var(--bold-amber); }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-float--review { inset-block-start: 14%; inset-inline-end: 0; --k: 26; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-float--book { inset-block-end: 20%; inset-inline-start: 0; --k: -22; background: var(--mw76-text); color: var(--mw76-surface); animation-delay: -2s; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-float--book svg { color: #ff4fa3; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-float--spark { inset-block-end: 6%; inset-inline-end: 12%; --k: 34; inline-size: 3.1rem; block-size: 3.1rem; justify-content: center; padding: 0; border: 0; border-radius: 1.1rem; background: var(--bold-amber); color: #151519; animation-delay: -3s; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-float--spark svg { inline-size: 1.5rem; block-size: 1.5rem; }
@keyframes mw-bold-float { 50% { translate: 0 -8px; } }

/* Search card */
.mw76-frame .mw76-root.mw76-public-content .mw76-home-search { border: 1px solid var(--bold-line); border-radius: 1.6rem; box-shadow: var(--bold-lift); background: var(--mw76-surface); }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-search:hover { border-color: var(--bold-pink); }

/* Marquee */
.mw76-frame .mw76-root.mw76-public-content .mw76-home-marquee {
    margin-block-start: var(--mw76-space-8);
    overflow: hidden;
    white-space: nowrap;
    padding-block: 0.85rem;
    border-block: 1px solid var(--bold-line);
    background: var(--bold-tile);
}
.mw76-frame .mw76-root.mw76-public-content .mw76-home-marquee__track { display: inline-flex; animation: mw-bold-marquee 26s linear infinite; }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-marquee__group { display: inline-flex; align-items: center; gap: 1.6rem; padding-inline-end: 1.6rem; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--mw76-text); }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-marquee__group i { color: var(--bold-amber); font-style: normal; }
@keyframes mw-bold-marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .mw76-frame .mw76-root.mw76-public-content .mw76-home-marquee__track { animation-name: mw-bold-marquee-rtl; }
@keyframes mw-bold-marquee-rtl { to { transform: translateX(50%); } }
.mw76-frame .mw76-root.mw76-public-content .mw76-home-marquee:hover .mw76-home-marquee__track { animation-play-state: paused; }

/* Trust strip, discovery, steps, audiences, callout */
.mw76-frame .mw76-root.mw76-public-content .mw76-trust-strip { border-block-end-color: var(--bold-line); }
.mw76-frame .mw76-root.mw76-public-content .mw76-trust-strip svg { color: var(--bold-action); }
.mw76-frame .mw76-root.mw76-public-content .mw76-discovery-card .mw76-discovery-icon,
.mw76-frame .mw76-root.mw76-public-content .mw76-discovery-icon { background: var(--bold-tile); color: var(--bold-action); border-radius: 1rem; }
.mw76-frame .mw76-root.mw76-public-content .mw76-discovery-card:hover .mw76-discovery-icon { background: var(--bold-grad); color: #fff; }
.mw76-frame .mw76-root.mw76-public-content .mw76-discovery-icon { transition: background-color 0.2s var(--bold-ease), color 0.2s var(--bold-ease); }
.mw76-frame .mw76-root.mw76-public-content .mw76-how-section { background: var(--bold-tile); }
.mw76-frame .mw76-root.mw76-public-content .mw76-section-heading h2 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
.mw76-frame .mw76-root.mw76-public-content .mw76-journey { text-align: start; }
.mw76-frame .mw76-root.mw76-public-content .mw76-journey li {
    padding: var(--mw76-space-6);
    border: 1px solid var(--bold-line);
    border-radius: var(--mw76-radius-card);
    background: var(--mw76-surface);
    box-shadow: var(--mw76-shadow-card);
    transition: transform 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease);
}
.mw76-frame .mw76-root.mw76-public-content .mw76-journey li:hover { transform: translateY(-4px); border-color: var(--bold-pink); box-shadow: var(--bold-lift); }
.mw76-frame .mw76-root.mw76-public-content .mw76-journey li > span {
    display: block; inline-size: auto; block-size: auto; background: none; border-radius: 0;
    margin-block-end: var(--mw76-space-4);
    font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em;
    color: transparent; -webkit-text-stroke: 1.3px var(--bold-line-strong);
    transition: color 0.2s var(--bold-ease);
}
.mw76-frame .mw76-root.mw76-public-content .mw76-journey li:hover > span {
    background: linear-gradient(135deg, #ff0080, #ffa621);
    -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0;
}
.mw76-frame .mw76-root.mw76-public-content .mw76-audiences article { border: 1px solid var(--bold-line); background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card); border-radius: var(--mw76-radius-card); }
.mw76-frame .mw76-root.mw76-public-content .mw76-callout {
    padding: var(--mw76-space-8) var(--mw76-space-10, 2.5rem);
    border-radius: 1.8rem;
    color: #fff;
    background: linear-gradient(115deg, #282b8b 8%, #ff0080 70%, #ffa621);
}
[dir="rtl"] .mw76-frame .mw76-root.mw76-public-content .mw76-callout { background: linear-gradient(245deg, #282b8b 8%, #ff0080 70%, #ffa621); }
.mw76-frame .mw76-root.mw76-public-content .mw76-callout :is(h2, p, .mw76-eyebrow) { color: #fff; }
.mw76-frame .mw76-root.mw76-public-content .mw76-callout h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.mw76-frame .mw76-root.mw76-public-content .mw76-callout .mw76-action--primary { background: #fff; color: #151519; box-shadow: 0 8px 22px rgb(21 21 25 / 25%); }
.mw76-frame .mw76-root.mw76-public-content .mw76-callout .mw76-action--primary:hover { background: #fff; color: #151519; }
@media (max-width: 991.98px) {
    .mw76-frame .mw76-root.mw76-public-content .mw76-home-art { min-block-size: 22rem; margin-block-start: var(--mw76-space-6); }
    .mw76-frame .mw76-root.mw76-public-content .mw76-journey li > span { font-size: 2.6rem; }
}
@media (max-width: 575.98px) {
    .mw76-frame .mw76-root.mw76-public-content .mw76-home-art { min-block-size: 20rem; }
    .mw76-frame .mw76-root.mw76-public-content .mw76-home-float--review { inset-inline-end: -0.25rem; }
}

/* ------------------------------------------------------------------ 11b. Public profile and salon media */
.mw76-frame .mw76-root .mw76-media-fallback {
    background: linear-gradient(135deg, #282b8b, #c90065);
    color: #fff;
}
.mw76-frame .mw76-root .mw76-media-fallback :is(svg, span) { color: #fff; }
.mw76-frame .mw76-root.mw76-public-content :is(.mw76-public-profile__cover, .mw76-profile-preview-tiles a) { border-radius: 1.6rem; overflow: hidden; }
.mw76-frame .mw76-root.mw76-public-content .mw76-public-profile__section-nav { gap: 0.5rem; }
.mw76-frame .mw76-root.mw76-public-content .mw76-public-profile__section-nav a {
    border-radius: 999px;
    border: 1px solid var(--bold-line-strong);
    background: var(--mw76-surface);
    color: var(--mw76-text);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.18s var(--bold-ease), color 0.18s var(--bold-ease), border-color 0.18s var(--bold-ease);
}
.mw76-frame .mw76-root.mw76-public-content .mw76-public-profile__section-nav a:hover { border-color: var(--bold-pink); background: var(--mw76-surface-tint); }
.mw76-frame .mw76-root.mw76-public-content :is(.mw76-public-service, .mw76-public-service-group) { border-radius: var(--mw76-radius-card); }
.mw76-frame .mw76-root.mw76-public-content .mw76-public-service { border: 1px solid var(--bold-line); background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card); transition: transform 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease); }
.mw76-frame .mw76-root.mw76-public-content .mw76-public-service:hover { transform: translateY(-2px); border-color: var(--bold-pink); box-shadow: var(--bold-lift); }
.mw76-frame .mw76-root.mw76-public-content .mw76-public-count { border-radius: 999px; background: var(--bold-chip-bg); color: var(--bold-chip-fg); font-weight: 800; }

/* ------------------------------------------------------------------ 11c. Booking flow (choose service, professional, date/time, review) */
.mw76-frame .mw76-root.mw76-booking-content { padding: var(--mw76-space-8) var(--mw76-space-6); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context h1 { font-family: var(--mw76-font-ui); font-weight: 800; letter-spacing: -0.03em; color: var(--mw76-text); }
[lang="ar"] .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context h1 { letter-spacing: 0; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context__mark { border-radius: 1.1rem; background: linear-gradient(135deg, #ff0080, #ffa621); color: #fff; box-shadow: 0 8px 20px rgb(255 0 128 / 26%); }
.mw76-frame .mw76-root.mw76-booking-content :is(.mw76-booking-section, .mw76-booking-times, .mw76-booking-summary, .mw76-booking-slot, .mw76-booking-choice) {
    border-color: var(--bold-line);
    border-radius: var(--mw76-radius-card);
}
.mw76-frame .mw76-root.mw76-booking-content :is(.mw76-booking-times, .mw76-booking-slot) { background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card); }
.mw76-frame .mw76-root.mw76-booking-content :is(.mw76-booking-summary h2, .mw76-booking-section__heading h2, .mw76-booking-times__heading h2, .mw76-booking-slot__time, .mw76-confirm-price) { color: var(--mw76-text); }
.mw76-frame .mw76-root.mw76-booking-content :is(.mw76-booking-summary__heading, .mw76-booking-summary dl > div, .mw76-confirm-price) { border-color: var(--bold-line); }

/* Progress rail */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step { font-weight: 700; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step-marker { border-color: var(--bold-line-strong); background: var(--mw76-surface); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step.is-current { color: var(--mw76-text); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step.is-current .mw76-booking-step-marker { background: var(--bold-grad); border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgb(255 0 128 / 18%); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step.is-complete { color: var(--mw76-text); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step.is-complete .mw76-booking-step-marker { background: var(--bold-chip-bg); border-color: transparent; color: var(--bold-chip-fg); }

/* Selectable cards and dates */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice { border-color: var(--bold-line-strong); transition: transform 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease), background-color 0.2s var(--bold-ease); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice:hover { transform: translateY(-2px); border-color: var(--bold-pink); box-shadow: var(--bold-lift); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice.is-selected { border-color: var(--bold-pink); background: var(--mw76-surface-tint); box-shadow: 0 0 0 3px rgb(255 0 128 / 18%); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice__media { border-radius: 1rem; background: var(--bold-tile); color: var(--bold-action); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-choice { border-radius: 1.1rem; border-color: var(--bold-line-strong); transition: transform 0.18s var(--bold-ease), border-color 0.18s var(--bold-ease); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-choice:hover { transform: translateY(-2px); border-color: var(--bold-pink); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-choice.is-selected { background: var(--bold-grad); border-color: transparent; color: #fff; text-decoration: none; box-shadow: 0 8px 20px rgb(255 0 128 / 28%); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot { transition: transform 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot:hover { transform: translateY(-3px); border-color: var(--bold-pink); box-shadow: var(--bold-lift); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__action { border-radius: 999px; background: var(--bold-tile); color: var(--mw76-text); font-weight: 800; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__action:hover,
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__action.is-selected { background: var(--bold-grad); color: #fff; text-decoration: none; }
.mw76-frame .mw76-root.mw76-booking-content :is(.mw76-booking-complete-label, .mw76-booking-count) { border-radius: 999px; font-weight: 700; }

/* Review step */
.mw76-frame .mw76-root.mw76-booking-content .mw76-confirm-service { border-radius: 1.1rem; background: var(--bold-chip-bg); color: var(--mw76-text); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-confirm-service svg { color: var(--bold-chip-fg); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-confirm-price strong { background: linear-gradient(135deg, var(--mw76-text), var(--bold-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.mw76-frame .mw76-root.mw76-booking-content :is(.mw76-booking-alert, .mw76-booking-validation-summary.validation-summary-errors) { border-radius: 1rem; }

/* ------------------------------------------------------------------ 12. Auth (login, register, recovery, MFA) */
.mw76-frame > .mw76-root.mw76-header.mw76-auth { background: transparent; border-block-end: 0; }
.mw76-frame .mw76-root.mw76-auth .mw76-auth-chrome {
    flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;
    max-inline-size: 72rem; gap: var(--mw76-space-3); padding: var(--mw76-space-4) var(--mw76-space-6);
}
.mw76-frame .mw76-root.mw76-auth .mw76-auth-chrome .mw76-brand { margin-inline-end: auto; }
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content { align-content: center; padding-block: var(--mw76-space-6) var(--mw76-space-12); }
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content :is(.mw76-auth-experience, .mw76-auth-access-denied) {
    border: 1px solid var(--bold-line);
    border-block-start: 4px solid var(--bold-pink);
    border-radius: 1.6rem;
    box-shadow: var(--bold-lift);
}
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-emblem { border-radius: 1.1rem; background: linear-gradient(135deg, #ff0080, #ffa621); color: #fff; box-shadow: 0 8px 20px rgb(255 0 128 / 28%); }
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-intro h1 { font-family: var(--mw76-font-ui); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; color: var(--mw76-text); }
[lang="ar"] :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-intro h1 { letter-spacing: 0; line-height: 1.35; }
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-next { border: 1px solid var(--bold-line); border-radius: 1.1rem; background: var(--bold-tile); }
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-next strong { color: var(--mw76-text); font-weight: 700; }
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-password-toggle { border-radius: 999px; }
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-primary { border-radius: 999px; }
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-switch { border-block-start-color: var(--bold-line); }
:is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-check__input { accent-color: var(--bold-action); }

/* Login-style split: intro text beside the form card (only when both parts are direct children). */
@media (min-width: 992px) {
    :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-experience:has(> .mw76-auth-intro):has(> .mw76-auth-form-panel) {
        max-inline-size: 70rem;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--mw76-space-16);
        align-items: start;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    /* The intro lines up with the top of the card and stays in view while a long form scrolls. */
    :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-experience:has(> .mw76-auth-intro):has(> .mw76-auth-form-panel) > .mw76-auth-intro {
        text-align: start; margin: 0;
        position: sticky; inset-block-start: var(--mw76-space-8); padding-block-start: var(--mw76-space-12);
    }
    /* Registration has two fields per row, so the form gets the wider column. */
    :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-experience--register:has(> .mw76-auth-intro):has(> .mw76-auth-form-panel) {
        max-inline-size: 76rem;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: var(--mw76-space-12);
    }
    :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-experience.mw76-auth-experience--register:has(> .mw76-auth-intro):has(> .mw76-auth-form-panel) .mw76-auth-intro h1 { font-size: clamp(2.2rem, 3.4vw, 2.9rem); }
    :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-experience:has(> .mw76-auth-intro):has(> .mw76-auth-form-panel) .mw76-auth-intro h1 { font-size: clamp(2.4rem, 4.6vw, 3.4rem); margin-block-end: var(--mw76-space-4); }
    :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-experience:has(> .mw76-auth-intro):has(> .mw76-auth-form-panel) .mw76-auth-emblem { inline-size: 3.6rem; block-size: 3.6rem; margin-block-end: var(--mw76-space-6); }
    :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-experience:has(> .mw76-auth-intro):has(> .mw76-auth-form-panel) .mw76-auth-intro-message { font-size: 1.0625rem; line-height: 1.7; max-inline-size: 28rem; }
    :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-experience:has(> .mw76-auth-intro):has(> .mw76-auth-form-panel) .mw76-auth-next { max-inline-size: 28rem; }
    :is(.mw76-frame, .mw76-recovery-page) .mw76-root.mw76-auth-content .mw76-auth-experience:has(> .mw76-auth-intro):has(> .mw76-auth-form-panel) > .mw76-auth-form-panel {
        padding: var(--mw76-space-8);
        background: var(--mw76-surface);
        border: 1px solid var(--bold-line);
        border-radius: 1.6rem;
        box-shadow: var(--bold-lift);
    }
}

/* ------------------------------------------------------------------ 13. Metrics and big numbers */
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-metric, .mw76-t-metric, .mw76-o-today-summary-card, .mw76-o-metric-card, .mw76-p-metric, .mw76-t-report-metric-card, .mw76-c-metric-card) strong,
.mw76-frame .mw76-root.mw76-content .mw76-t-readiness-score {
    background: linear-gradient(135deg, var(--mw76-text), var(--bold-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-metric-icon, .mw76-t-metric-icon) {
    border-radius: 0.9rem;
    background: rgb(255 0 128 / 13%);
    color: var(--mw76-color-action);
}
.mw76-frame .mw76-root.mw76-content .mw76-p-metric { border-block-start: 1px solid var(--bold-line); }
[lang="ar"] .mw76-frame .mw76-root.mw76-content :is(.mw76-c-metric, .mw76-t-metric, .mw76-o-today-summary-card, .mw76-p-metric) strong { letter-spacing: 0; }

/* Progress bars and tracks */
.mw76-frame .mw76-root.mw76-content progress.mw76-t-progress { border-radius: 999px; overflow: hidden; border: 0; background: var(--bold-tile); }
.mw76-frame .mw76-root.mw76-content progress.mw76-t-progress::-webkit-progress-bar { background: var(--bold-tile); border-radius: 999px; }
.mw76-frame .mw76-root.mw76-content progress.mw76-t-progress::-webkit-progress-value { background: linear-gradient(90deg, #ff0080, #ffa621); border-radius: 999px; }
.mw76-frame .mw76-root.mw76-content progress.mw76-t-progress::-moz-progress-bar { background: linear-gradient(90deg, #ff0080, #ffa621); border-radius: 999px; }

/* ------------------------------------------------------------------ 14. Families that hard-code colours (platform, receptionist, employee, account) */
.mw76-frame .mw76-root.mw76-superadmin-content { padding: var(--mw76-space-8); }
.mw76-frame .mw76-root.mw76-superadmin-content :is(h1, h2, h3, h4, h5, h6) { font-family: var(--mw76-font-ui); color: var(--mw76-text); }
.mw76-frame .mw76-root .mw76-p-section-heading,
.mw76-frame .mw76-root .mw76-p-destination { border-block-end-color: var(--bold-line); color: var(--mw76-text); }
.mw76-frame .mw76-root :is(.mw76-p-filter, .mw76-p-scroll, .mw76-p-editor, .mw76-p-mutations > form) { border-color: var(--bold-line); border-radius: 1.1rem; }
.mw76-frame .mw76-root .mw76-p-filter { background: var(--bold-tile); }
.mw76-frame .mw76-root :is(.mw76-p-table, .mw76-o-table, .mw76-e-request-table) th { background: var(--bold-tile); color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-p-table :is(th, td) { border-block-end-color: var(--bold-line); }
.mw76-frame .mw76-root :is(.mw76-p-table tbody tr, .mw76-o-table-hover tbody tr):hover { background: var(--mw76-surface-tint); }
.mw76-frame .mw76-root .mw76-p-icon { border-radius: 0.9rem; }
.mw76-frame .mw76-root :is(.mw76-p-guidance, .mw76-p-reply) { border-radius: 1.1rem; background: var(--bold-tile); border-inline-start-color: var(--bold-pink); }
.mw76-frame .mw76-root .mw76-p-code { border-radius: 0.5rem; background: var(--bold-tile); color: var(--mw76-text-muted); }
.mw76-frame .mw76-root :is(.mw76-p-input, .mw76-o-input, .mw76-e-input) { border-radius: var(--mw76-radius-control); }
.mw76-frame .mw76-root :is(.mw76-p-input, .mw76-o-input, .mw76-e-input)[readonly] { background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-label { color: var(--mw76-text); }
.mw76-frame .mw76-root .mw76-p-jump a { border-radius: 999px; border-color: var(--bold-line-strong); background: var(--mw76-surface); }
.mw76-frame .mw76-root .mw76-p-page-link { border-radius: 999px; border-color: var(--bold-line-strong); }
.mw76-frame .mw76-root .mw76-p-warning { border-radius: 1.1rem; }

/* Statuses: keep semantic colours (success/warning/danger/info), restyle the shape. */
.mw76-frame .mw76-root :is(.mw76-o-status, .mw76-o-soft-pill, .mw76-o-chip, .mw76-o-bookings-status-badge) {
    border-color: color-mix(in srgb, currentColor 32%, transparent);
    border-radius: 999px;
    padding-inline: 0.7rem;
}
.mw76-frame .mw76-root :is(.mw76-e-badge, .mw76-p-status, .mw76-t-status, .mw76-c-status) { border-radius: 999px; padding-inline: 0.7rem; }
.mw76-frame .mw76-root .mw76-o-appointment-group-header { background: var(--bold-tile); border-radius: 0.9rem; border-inline-start-color: var(--bold-pink); }
.mw76-frame .mw76-root .mw76-o-availability-summary-card { background: var(--bold-tile); border-radius: 1rem; }
.mw76-frame .mw76-root .mw76-e-empty { background: var(--bold-tile); border-radius: 1.1rem; }
.mw76-frame .mw76-root .mw76-e-timeline-item { border-inline-start-color: var(--bold-pink); }
.mw76-frame .mw76-root .mw76-employee-content .mw76-e-button--quiet,
.mw76-frame .mw76-root.mw76-employee-content .mw76-e-button--quiet { background: var(--mw76-surface); }
.mw76-frame .mw76-root :is(.mw76-email-status, .mw76-email-status.is-verified) { border-radius: 999px; }
.mw76-frame .mw76-root :is(.mw76-email-feedback, .mw76-verification-footnote) { border-color: var(--bold-line); }
.mw76-frame .mw76-root .mw76-account-errors.validation-summary-errors { border-radius: 1rem; }

/* ------------------------------------------------------------------ 14a. Operations redesign (bookings, calendar, customers, reports, staff)
   Row-card tables, status chips nav, week strip, timeline rails and gradient report bars.
   Markup additions live in Views/Bookings (Index, Calendar); everything else is CSS only. */
.mw76-frame .mw76-root.mw76-receptionist-content :is(.mw76-o-bookings-command-header, .mw76-o-page-header) h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-command-actions { gap: 0.5rem; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-command-actions .mw76-action--secondary { font-size: 0.8125rem; padding-inline: var(--mw76-space-4); background: transparent; }

/* Request queue: two compact tiles instead of a thin text strip */
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-request-strip { border-block: 0; padding-block: 0; gap: 0.75rem; margin-block-end: 1rem; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-request-card {
    justify-content: space-between; min-inline-size: 15rem; padding: 0.7rem 1rem;
    border: 1px solid var(--bold-line); border-radius: 1.1rem; background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card);
    color: var(--mw76-text); transition: transform 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease);
}
.mw76-frame .mw76-root.mw76-receptionist-content a.mw76-o-bookings-request-card:hover { transform: translateY(-2px); border-color: var(--bold-pink); box-shadow: var(--bold-lift); }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-request-count { background: var(--bold-grad); color: #fff; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-request-count.warning { background: var(--bold-chip-bg); color: var(--bold-chip-fg); }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-request-strip > div:first-child { display: none; }

/* Status quick filters (server-driven GET links) */
.mw76-o-statusnav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1rem; }
.mw76-frame .mw76-root .mw76-o-statuschip {
    display: inline-flex; align-items: center; padding: 0.45rem 1rem; border: 1px solid var(--bold-line-strong); border-radius: 999px;
    background: var(--mw76-surface); color: var(--mw76-text); font-size: 0.8125rem; font-weight: 700; text-decoration: none;
    transition: transform 0.18s var(--bold-ease), border-color 0.18s var(--bold-ease), background-color 0.18s var(--bold-ease);
}
.mw76-frame .mw76-root .mw76-o-statuschip:hover { transform: translateY(-1px); border-color: var(--bold-pink); background: var(--mw76-surface-tint); }
.mw76-frame .mw76-root .mw76-o-statuschip.is-active { background: var(--bold-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgb(255 0 128 / 26%); }

/* Filter card becomes a quiet tray */
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-filter-card { background: var(--bold-tile); box-shadow: none; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-filter-card .mw76-o-bookings-results-header { margin-block-end: 0.75rem; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-filter-card h2 { font-size: 1rem; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-label { font-size: 0.75rem; color: var(--mw76-text-muted); font-weight: 700; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-clear-link { color: var(--mw76-link); font-weight: 700; text-underline-offset: 0.2em; }

/* People cells */
.mw76-o-person { display: flex; align-items: center; gap: 0.75rem; min-inline-size: 0; }
.mw76-o-person__copy { display: grid; min-inline-size: 0; gap: 0.1rem; }
.mw76-o-person__copy strong { font-size: 0.9rem; }
.mw76-o-person__copy span { color: var(--mw76-text-muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-o-avatar {
    display: grid; place-items: center; flex-shrink: 0; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%;
    background: linear-gradient(135deg, #ff0080, #ffa621); color: #fff; font-weight: 800; font-size: 0.95rem;
}

/* Row-card tables: bookings, customers, staff */
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-table-scroll,
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-bookings-table-wrap { border: 0; border-radius: 0; }
.mw76-frame .mw76-root .mw76-o-table { border-collapse: separate; border-spacing: 0 0.5rem; min-inline-size: 46rem; }
.mw76-frame .mw76-root .mw76-o-table thead th {
    background: transparent; border: 0; padding: 0.25rem 0.9rem; color: var(--mw76-text-muted); font-weight: 800; font-size: 0.72rem;
}
.mw76-frame .mw76-root .mw76-o-table tbody td {
    background: var(--mw76-surface); border-block: 1px solid var(--bold-line); padding: 0.85rem 0.9rem; vertical-align: middle;
    transition: background-color 0.18s var(--bold-ease), border-color 0.18s var(--bold-ease);
}
.mw76-frame .mw76-root .mw76-o-table tbody td:first-child { border-inline-start: 1px solid var(--bold-line); border-start-start-radius: 1rem; border-end-start-radius: 1rem; min-inline-size: 13rem; }
.mw76-frame .mw76-root .mw76-o-table tbody td:last-child { border-inline-end: 1px solid var(--bold-line); border-start-end-radius: 1rem; border-end-end-radius: 1rem; }
.mw76-frame .mw76-root .mw76-o-table-hover tbody tr:hover td { background: var(--mw76-surface-tint); border-color: rgb(255 0 128 / 35%); }
.mw76-frame .mw76-root .mw76-o-table td { word-break: normal; overflow-wrap: break-word; }
.mw76-frame .mw76-root .mw76-o-bookings-time-cell strong { display: block; font-variant-numeric: tabular-nums; }

/* Staff roster: responsive grid of person cards (the table keeps its semantics; rows become cards) */
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-staff-roster { border-spacing: 0; min-inline-size: 0; }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-staff-roster tbody { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1rem; }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-staff-roster tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0.35rem 1rem; padding: 1.15rem; border: 1px solid var(--bold-line);
    border-radius: 1.4rem; background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card);
    transition: transform 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease);
}
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-staff-roster tr:hover { transform: translateY(-3px); border-color: var(--bold-pink); box-shadow: var(--bold-lift); }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-staff-roster td { background: transparent; border: 0; border-radius: 0; padding: 0.25rem 0; font-size: 0.8125rem; }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-staff-roster td:first-child { min-inline-size: 0; padding-block-end: 0.85rem; margin-block-end: 0.35rem; border-block-end: 1px solid var(--bold-line); }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-staff-roster td:last-child { padding-block-start: 0.6rem; }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-staff-roster td:nth-child(2) { grid-column: 1 / -1; overflow-wrap: anywhere; }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-owner-table-card:has(.mw76-t-staff-roster) { background: transparent; border: 0; box-shadow: none; }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-owner-table-card:has(.mw76-t-staff-roster) > .mw76-t-panel-body { padding: 0; }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-staff-roster .mw76-t-identity strong { font-size: 1.02rem; font-weight: 800; }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-avatar { inline-size: 3.4rem; block-size: 3.4rem; background: linear-gradient(135deg, #ff0080, #ffa621); color: #fff; font-weight: 800; font-size: 1.2rem; }

/* Metric cards that use headings instead of <strong> */
.mw76-frame .mw76-root.mw76-content .mw76-o-metric-card :is(h2, h3, h4, .h4, .display-6) {
    background: linear-gradient(135deg, var(--mw76-text), var(--bold-pink));
    -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: -0.03em;
}
.mw76-frame .mw76-root.mw76-content .mw76-o-metric-card :is(.mw76-o-warning, .mw76-o-good, .mw76-o-error, .mw76-o-ink, .text-dark) { color: transparent; }

/* Calendar: week strip, compact summary, timeline rails */
.mw76-o-weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin-block-end: 1rem; }
.mw76-frame .mw76-root .mw76-o-weekday {
    display: grid; justify-items: center; gap: 0.1rem; padding: 0.7rem 0.25rem; border: 1px solid var(--bold-line-strong); border-radius: 1.1rem;
    background: var(--mw76-surface); color: var(--mw76-text); text-decoration: none;
    transition: transform 0.18s var(--bold-ease), border-color 0.18s var(--bold-ease), box-shadow 0.18s var(--bold-ease);
}
.mw76-frame .mw76-root .mw76-o-weekday small { color: var(--mw76-text-muted); font-weight: 700; font-size: 0.72rem; }
.mw76-frame .mw76-root .mw76-o-weekday strong { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.mw76-frame .mw76-root .mw76-o-weekday:hover { transform: translateY(-2px); border-color: var(--bold-pink); }
.mw76-frame .mw76-root .mw76-o-weekday.is-today:not(.is-active) { border-color: var(--bold-pink); box-shadow: 0 0 0 3px rgb(255 0 128 / 16%); }
.mw76-frame .mw76-root .mw76-o-weekday.is-active { background: var(--bold-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgb(255 0 128 / 28%); }
.mw76-frame .mw76-root .mw76-o-weekday.is-active small { color: rgb(255 255 255 / 88%); }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-calendar-summary { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1rem; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-calendar-summary > [class*="col-"] { flex: 1 1 7rem; inline-size: auto; max-inline-size: none; padding: 0; margin: 0; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-calendar-summary .mw76-o-metric-card { padding: 0.75rem 1rem; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-calendar-summary .mw76-o-metric-card :is(h4, .h4) { font-size: 1.6rem; line-height: 1.1; margin-block-start: 0.15rem; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-agenda-event {
    border-inline-start: 5px solid var(--tone, var(--bold-pink)); border-radius: 1.2rem; background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card);
    transition: transform 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease);
}
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-agenda-event:hover { transform: translateY(-2px); box-shadow: var(--bold-lift); border-color: var(--tone, var(--bold-pink)); }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-agenda-event.is-pending { --tone: #ffa621; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-agenda-event.is-confirmed { --tone: #ff0080; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-agenda-event.is-completed { --tone: #282b8b; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-agenda-event:is(.is-cancelled, .is-noshow) { --tone: #8a8f9c; }
.mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-agenda-clock { font-size: 1.1rem; font-weight: 800; }
[data-theme="dark"] .mw76-frame .mw76-root.mw76-receptionist-content .mw76-o-agenda-event.is-completed { --tone: #7a83ff; }

/* Owner reports: thicker gradient bars, rounded cards */
.mw76-frame .mw76-root.mw76-tenant-management-content :is(.mw76-t-chart-track, .progress) { block-size: 0.65rem; border-radius: 999px; background: var(--bold-tile); overflow: hidden; }
.mw76-frame .mw76-root.mw76-tenant-management-content :is(.mw76-t-chart-bar, .progress-bar) { border-radius: 999px; background: linear-gradient(90deg, #ff0080, #ffa621); color: transparent; }
.mw76-frame .mw76-root.mw76-tenant-management-content :is(.mw76-t-report-card, .mw76-t-report-metric-card, .mw76-t-report-filter) { border-radius: var(--mw76-radius-card); border: 1px solid var(--bold-line); box-shadow: var(--mw76-shadow-card); }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-report-metric-card :is(.h3, .h4, .h5) {
    background: linear-gradient(135deg, var(--mw76-text), var(--bold-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: -0.03em;
}
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-report-card .h5 { font-weight: 800; }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-success-action { color: var(--mw76-link); border-color: var(--bold-line-strong); background: var(--mw76-surface); }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-success-action:hover { border-color: var(--bold-pink); background: var(--mw76-surface-tint); }
.mw76-frame .mw76-root.mw76-tenant-management-content .mw76-t-report-note { border-radius: 1.1rem; }

@media (max-width: 575.98px) {
    .mw76-o-weekstrip { grid-template-columns: repeat(7, minmax(2.6rem, 1fr)); overflow-x: auto; }
    .mw76-frame .mw76-root .mw76-o-weekday strong { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------ 14a2. Empty states: one vivid pattern for every role */
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-empty-state, .mw76-o-empty-state, .mw76-t-empty-state, .mw76-o-bookings-empty-state, .mw76-o-owner-empty-state, .mw76-t-owner-empty-state, .mw76-c-marketplace-empty, .mw76-e-empty, .mw76-p-empty) {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 2.75rem 1.5rem; text-align: center;
    border: 1px dashed var(--bold-line-strong); border-radius: 1.6rem; background: var(--bold-tile);
}
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-empty-state, .mw76-o-empty-state, .mw76-t-empty-state, .mw76-o-bookings-empty-state, .mw76-o-owner-empty-state, .mw76-t-owner-empty-state, .mw76-c-marketplace-empty, .mw76-e-empty, .mw76-p-empty)::before {
    content: ""; position: absolute; inset: -40% 10% auto; block-size: 14rem; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgb(255 0 128 / 14%), transparent);
}
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-empty-icon, .mw76-o-empty-icon, .mw76-t-empty-icon, .mw76-e-empty-icon) {
    display: inline-grid; place-items: center; inline-size: 4rem; block-size: 4rem; margin-block-end: 1rem; border-radius: 1.3rem;
    background: linear-gradient(135deg, #ff0080, #ffa621); color: #fff; box-shadow: 0 10px 24px rgb(255 0 128 / 28%); transform: rotate(-6deg);
}
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-empty-icon, .mw76-o-empty-icon, .mw76-t-empty-icon, .mw76-e-empty-icon) svg { inline-size: 1.9rem; block-size: 1.9rem; color: #fff; }
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-empty-state, .mw76-o-empty-state, .mw76-t-empty-state, .mw76-o-bookings-empty-state, .mw76-o-owner-empty-state, .mw76-t-owner-empty-state) :is(h2, h3) { font-size: 1.25rem; margin-block-end: 0.35rem; }
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-empty-state, .mw76-o-empty-state, .mw76-t-empty-state, .mw76-o-bookings-empty-state) p { color: var(--mw76-text-muted); max-inline-size: 32rem; margin-inline: auto; }
.mw76-frame .mw76-root.mw76-content :is(.mw76-c-empty-state, .mw76-o-empty-state, .mw76-t-empty-state) .mw76-action { margin-block-start: 0.5rem; }
.mw76-frame .mw76-root .mw-ui-state__icon { border-radius: 1.3rem; background: linear-gradient(135deg, #ff0080, #ffa621); color: #fff; transform: rotate(-6deg); box-shadow: 0 10px 24px rgb(255 0 128 / 28%); }

/* ------------------------------------------------------------------ 14b. Bootstrap utilities used by legacy markup, mapped to AA-safe tokens
   (stock .text-warning/.text-info/.text-muted and <code> fail 4.5:1 on the new canvas). */
.mw76-frame .mw76-root .text-muted { color: var(--mw76-text-muted) !important; }
.mw76-frame .mw76-root .text-warning { color: var(--mw76-warning) !important; }
.mw76-frame .mw76-root .text-info { color: var(--mw76-info) !important; }
.mw76-frame .mw76-root .text-success { color: var(--mw76-success) !important; }
.mw76-frame .mw76-root .text-danger { color: var(--mw76-error) !important; }
.mw76-frame .mw76-root code { color: var(--mw76-color-action); }
.mw76-frame .mw76-root .mw76-p-icon { background: var(--mw76-surface-tint); color: var(--mw76-color-action); }

/* ------------------------------------------------------------------ 15. Standalone layouts (recovery, email verification, MFA, email change) */
body.mw76-root:is(.mw76-recovery-page, .mw76-verification-page) { background: transparent; color: var(--mw76-text); }
body.mw76-root > main.mw76-root.mw76-auth-content { background: transparent; }
body.mw76-root :is(.mw76-recovery-brand, .mw76-verification-brand) {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mw76-space-4); flex-wrap: wrap;
    max-inline-size: 72rem; margin-inline: auto; background: transparent; border: 0;
}
body.mw76-root :is(.mw76-recovery-brand, .mw76-verification-brand) a { color: var(--mw76-text); letter-spacing: -0.03em; }
[lang="ar"] body.mw76-root :is(.mw76-recovery-brand, .mw76-verification-brand) a { letter-spacing: 0; }
body.mw76-root :is(.mw76-recovery-brand, .mw76-verification-brand) span { color: var(--bold-pink); }
body.mw76-root .mw76-verification-card {
    border: 1px solid var(--bold-line);
    border-block-start: 4px solid var(--bold-pink);
    border-radius: 1.6rem;
    box-shadow: var(--bold-lift);
    background: var(--mw76-surface);
}
body.mw76-root .mw76-verification-symbol { border-radius: 1.1rem; background: linear-gradient(135deg, #ff0080, #ffa621); color: #fff; }
body.mw76-root .mw76-verification-symbol.is-verified { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }
body.mw76-root .mw76-verification-card h1 { color: var(--mw76-text); font-weight: 800; letter-spacing: -0.03em; }
[lang="ar"] body.mw76-root .mw76-verification-card h1 { letter-spacing: 0; }
body.mw76-root .mw76-verify-action { border-radius: 999px; background: var(--bold-grad); border-color: transparent; color: #fff; font-weight: 800; box-shadow: 0 6px 18px rgb(255 0 128 / 26%); transition: transform 0.18s var(--bold-ease), box-shadow 0.18s var(--bold-ease); }
body.mw76-root .mw76-verify-action:hover:not(:disabled) { background: var(--bold-grad); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 26px rgb(255 0 128 / 38%); }
body.mw76-root .mw76-verify-action:disabled { background: var(--bold-tile); color: var(--mw76-text-muted); box-shadow: none; }
body.mw76-root :is(.mw76-input, .mw76-email-request input) { border-radius: var(--mw76-radius-control); }
body.mw76-root .mw76-recovery-page #recovery-link-status,
body.mw76-recovery-page #recovery-link-status { border-radius: 1rem; background: var(--bold-tile); }

/* ------------------------------------------------------------------ 10. Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mw76-frame .mw76-root *,
    .mw76-frame .mw76-root *::before,
    .mw76-frame .mw76-root *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .mw76-frame .mw76-root :is(.mw76-action, .mw76-button, .mw76-c-button, .mw76-o-button, .mw76-p-button, .mw76-e-button):hover,
    .mw76-frame .mw76-root.mw76-content :is(.mw76-c-appointment-card, .mw76-c-salon-card, .mw76-t-metric, .mw76-public-salon-card):hover { transform: none; }
}

/* ------------------------------------------------------------------ 16. Booking studio (availability pages + live refresh) */
/* Layout: the choices read top to bottom; the selection summary stays in view beside them; the chosen time floats a confirm bar. */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-page { position: relative; max-inline-size: 74rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-page.is-refreshing::before {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: -0.5rem; block-size: 3px; border-radius: 3px; z-index: 10;
    background: linear-gradient(90deg, transparent, #ff0080, #ffa621, transparent); background-size: 220% 100%;
    animation: mw-booking-bar 0.9s linear infinite;
}
@keyframes mw-booking-bar { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-page.is-refreshing .mw76-booking-times { opacity: 0.62; transition: opacity 0.15s var(--bold-ease); }

/* Hero */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context {
    position: relative; overflow: hidden; isolation: isolate; padding: 1.6rem 1.9rem; border-radius: 1.9rem; margin-block-end: 1.5rem; color: #fff;
    background: linear-gradient(118deg, #282b8b 0%, #8d1d86 46%, #ff0080 100%); box-shadow: var(--bold-lift);
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context::after {
    content: ""; position: absolute; z-index: -1; inline-size: 17rem; block-size: 17rem; inset-inline-end: -5rem; inset-block-start: -7rem; border-radius: 50%;
    background: radial-gradient(circle, rgb(255 166 33 / 62%), transparent 68%);
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context :is(h1, p, .mw76-booking-kicker, .mw76-booking-context__salon, .mw76-booking-context__location) { color: #fff; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context .mw76-booking-kicker { opacity: 0.85; letter-spacing: 0.04em; text-transform: uppercase; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context__mark { background: rgb(255 255 255 / 20%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context :is(.mw76-action, .mw76-booking-back-link) { background: rgb(255 255 255 / 16%); border: 1px solid rgb(255 255 255 / 40%); color: #fff; border-radius: 999px; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context :is(.mw76-action, .mw76-booking-back-link):hover { background: #fff; color: #8d1d86; }

/* Grid: choices + sticky summary + floating confirm bar */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-layout { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-rows: auto auto; gap: 1.5rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-decisions { grid-column: 1; grid-row: 1; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.mw76-frame .mw76-root.mw76-booking-content :is(.mw76-booking-section, .mw76-booking-times) { min-inline-size: 0; max-inline-size: 100%; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-strip { inline-size: 100%; max-inline-size: 100%; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: 5.75rem; align-self: start; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta { grid-column: 1 / -1; grid-row: 2; position: sticky; inset-block-end: 1rem; z-index: 6; }

/* Summary card */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary {
    padding: 1.4rem 1.4rem 1.2rem; border-radius: 1.6rem; border: 1px solid var(--bold-line); box-shadow: var(--bold-lift);
    background-color: var(--mw76-surface);
    background-image: linear-gradient(90deg, #c90065, #ff0080, #ffa621); background-repeat: no-repeat; background-size: 100% 6px; background-position: top;
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary__heading { border-block-start: 0; padding-block-start: 0.4rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary dl > div { display: grid; gap: 0.1rem; border-block-end: 1px dashed var(--bold-line-strong); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary dl > div:last-child { border-block-end: 0; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary dt { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary dd { font-size: 1rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary dl > div:last-child dd { font-weight: 800; background: var(--bold-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Stepper: vertical rail with a connecting line that fills as steps complete */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-progress-list { gap: 0; margin-block-end: 1.1rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step { position: relative; padding-block: 0.55rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step:not(:last-child)::after {
    content: ""; position: absolute; inset-inline-start: calc(1rem - 1px); inset-block-start: calc(50% + 1.2rem); inline-size: 2px; block-size: calc(100% - 0.45rem);
    background: var(--bold-line-strong); border-radius: 2px;
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step.is-complete:not(:last-child)::after { background: linear-gradient(180deg, #ff0080, #ffa621); }

/* Step sections */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-section, .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-times { padding: 1.5rem 1.6rem; border-radius: 1.6rem; scroll-margin-block-start: 5.75rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-section__heading > div, .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-times__heading > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; align-items: center; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-section__heading > div > :is(h2, p), .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-times__heading > div > :is(h2, p) { grid-column: 2; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-section__index {
    grid-row: 1 / span 2; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; margin: 0; border-radius: 0.9rem; font-size: 0.95rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #c90065, #ff0080); box-shadow: 0 6px 16px rgb(255 0 128 / 30%);
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-times__heading .mw76-booking-kicker { display: none; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-times__heading > div::before {
    content: ""; grid-row: 1 / span 2; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 0.9rem;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M12 7v5l3 2%27/%3E%3C/svg%3E") center / 1.35rem no-repeat, linear-gradient(135deg, #282b8b, #8d1d86); box-shadow: 0 6px 16px rgb(40 43 139 / 30%);
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-section__heading h2, .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-times__heading h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
[lang="ar"] .mw76-frame .mw76-root.mw76-booking-content :is(.mw76-booking-section__heading h2, .mw76-booking-times__heading h2) { letter-spacing: 0; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-complete-label { border-radius: 999px; padding: 0.3rem 0.8rem; background: var(--bold-chip-bg); color: var(--bold-chip-fg); font-weight: 700; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-count { border-radius: 999px; padding: 0.35rem 0.9rem; background: var(--bold-tile); color: var(--mw76-text); font-weight: 800; }

/* Native fallbacks stay in the DOM (they carry the form values) but the rich controls replace them once live */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-page.is-live .mw76-booking-native-select { display: none; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-page.is-live [data-mw-booking-submit] { display: none; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-control { max-inline-size: 13rem; margin-block-end: 0.9rem; }

/* Service cards */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice-list--services { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.9rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-service-choice { position: relative; padding: 0; overflow: hidden; gap: 0; border-radius: 1.4rem; text-align: start; background: var(--mw76-surface); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-service-choice .mw76-booking-choice__media {
    aspect-ratio: 16 / 6.2; border-radius: 0; background: linear-gradient(135deg, rgb(255 0 128 / 14%), rgb(40 43 139 / 16%) 60%, rgb(255 166 33 / 22%)); color: var(--bold-action);
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-service-choice .mw76-booking-choice__media > svg { inline-size: 2.4rem; block-size: 2.4rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-service-choice .mw76-booking-choice__content { padding: 0.95rem 1.1rem 1.1rem; gap: 0.6rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-service-choice .mw76-booking-choice__content strong { font-size: 1.05rem; font-weight: 800; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice__facts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice__facts > span { padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--bold-tile); color: var(--mw76-text); font-weight: 700; font-size: 0.8rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice__facts > span:last-child:not(:first-child) { background: var(--bold-chip-bg); color: var(--bold-chip-fg); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice__status {
    position: absolute; inset-block-start: 0.7rem; inset-inline-end: 0.7rem; padding: 0.25rem 0.7rem 0.25rem 0.55rem; border-radius: 999px; color: #fff; font-weight: 700;
    background: linear-gradient(90deg, #c90065, #ff0080); box-shadow: 0 6px 14px rgb(255 0 128 / 35%);
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice.is-selected { background: var(--mw76-surface-tint); }

/* Specialists: avatar pills */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice-list--providers { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-provider-choice {
    position: relative; flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.45rem 1.2rem 0.45rem 0.45rem; border-radius: 999px; text-align: start; min-inline-size: 0;
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-provider-choice .mw76-booking-choice__media--avatar { inline-size: 3rem; block-size: 3rem; border-radius: 50%; align-self: center; flex-shrink: 0; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-provider-choice .mw76-booking-choice__content { gap: 0.1rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-provider-choice .mw76-booking-choice__content > span { font-size: 0.75rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-provider-choice .mw76-booking-choice__status { position: static; padding: 0.2rem; box-shadow: none; font-size: 0; gap: 0; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-provider-choice .mw76-booking-choice__status svg { inline-size: 1rem; block-size: 1rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-provider-choice.is-selected .mw76-booking-choice__media--avatar { box-shadow: 0 0 0 3px var(--mw76-surface), 0 0 0 5px var(--bold-pink); }

/* Dates: a scrollable fortnight */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-strip {
    display: flex; gap: 0.6rem; overflow-x: auto; padding-block: 0.45rem 0.9rem; margin-inline: -0.25rem; padding-inline: 0.25rem;
    scroll-snap-type: x proximity; scrollbar-width: thin; position: relative;
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-choice { flex: 0 0 4.7rem; scroll-snap-align: center; padding: 0.7rem 0.2rem 0.75rem; gap: 0.15rem; border-radius: 1.3rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-choice > span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.8; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-choice strong { font-size: 1.6rem; line-height: 1.1; font-weight: 800; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-choice small { font-size: 0.72rem; opacity: 0.8; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-choice.is-closed { border-style: dashed; opacity: 0.58; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-choice.is-closed.is-selected { opacity: 1; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-date-footer { margin-block-start: 0.4rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-hours-context { padding: 0.55rem 0.95rem; border-radius: 1rem; background: var(--bold-tile); }

/* Times: grouped by part of the day */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-period + .mw76-booking-period { margin-block-start: 1.4rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-period__title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 800; color: var(--mw76-text); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-period__title > svg { box-sizing: content-box; inline-size: 1rem; block-size: 1rem; padding: 0.45rem; border-radius: 0.8rem; color: #fff; background: linear-gradient(135deg, #ffa621, #ff0080); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-period__title > span { margin-inline-start: auto; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--bold-tile); font-size: 0.78rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot-grid { grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: 0.65rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot {
    position: relative; display: grid; gap: 0.15rem; justify-items: center; padding: 0.85rem 0.6rem; border-radius: 1.15rem; text-align: center; cursor: pointer;
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__time { justify-content: center; flex-direction: column; align-items: center; gap: 0; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__time strong { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__time span { font-size: 0.72rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__time span::before { content: "\2013\00a0"; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__detail strong { display: none; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__detail.is-generic { display: none; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__detail > span { justify-content: center; font-size: 0.75rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__action {
    position: absolute; inset: 0; z-index: 1; padding: 0; min-block-size: 0; border-radius: inherit; background: transparent; color: transparent; font-size: 0;
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__action > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__action > svg { display: none; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__action:hover, .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__action.is-selected { background: transparent; text-decoration: none; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot:focus-within { outline: 3px solid var(--mw76-focus, #ff0080); outline-offset: 2px; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot.is-selected { background: var(--bold-grad); border-color: transparent; color: #fff; box-shadow: 0 12px 26px rgb(255 0 128 / 34%); transform: translateY(-2px); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot.is-selected :is(.mw76-booking-slot__time, .mw76-booking-slot__time span, .mw76-booking-slot__detail > span) { color: #fff; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__unavailable { text-align: center; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-no-availability { padding-block: 0.5rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-auth-note { border-radius: 1.2rem; }

/* Floating confirm bar (appears once a time is chosen) */
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0.85rem 0.8rem 1.4rem; border-radius: 1.5rem;
    background: var(--mw76-surface); border: 1px solid var(--bold-line-strong); box-shadow: 0 20px 44px rgb(40 43 139 / 30%);
    animation: mw-booking-cta-in 0.28s var(--bold-ease);
}
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta[hidden] { display: none; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta__text { display: grid; gap: 0.1rem; min-inline-size: 0; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta__text > span { font-size: 0.78rem; color: var(--mw76-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta__text > strong { font-size: 1.15rem; font-weight: 800; color: var(--mw76-text); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta .mw76-action { white-space: nowrap; border-radius: 999px; padding-inline: 1.5rem; }
@keyframes mw-booking-cta-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Confirm step */
.mw76-frame .mw76-root.mw76-booking-content .mw76-confirm-layout { gap: 1.5rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-confirm-service { border-radius: 1.4rem; background: linear-gradient(120deg, rgb(255 0 128 / 10%), rgb(40 43 139 / 12%)); border: 1px solid var(--bold-line); }
.mw76-frame .mw76-root.mw76-booking-content .mw76-confirm-facts dd { font-size: 1.02rem; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-confirm-price strong { background: var(--bold-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.mw76-frame .mw76-root.mw76-booking-content .mw76-confirm-decision { position: sticky; inset-block-start: 5.75rem; }

/* Responsive */
@media (max-width: 1199.98px) {
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-layout { grid-template-columns: minmax(0, 1fr); }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary { grid-column: 1; grid-row: 1; position: static; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-decisions { grid-column: 1; grid-row: 2; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta { grid-column: 1; grid-row: 3; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step:not(:last-child)::after { display: none; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-progress-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step { flex-direction: column; text-align: center; gap: 0.35rem; padding-block: 0.2rem; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-context { padding: 1.2rem 1.2rem; border-radius: 1.4rem; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-section, .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-times { padding: 1.1rem 1rem; border-radius: 1.3rem; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-choice-list--services { grid-template-columns: minmax(0, 1fr); }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-service-choice { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: stretch; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-service-choice .mw76-booking-choice__media { aspect-ratio: auto; block-size: 100%; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-service-choice .mw76-booking-choice__status { inset-block-start: 0.5rem; inset-inline-end: 0.5rem; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot { padding-inline: 0.65rem; min-block-size: 7.5rem; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__detail { min-inline-size: 0; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-slot__detail > span { min-inline-size: 0; overflow-wrap: anywhere; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-step > span:last-child { font-size: 0.7rem; }
    /* On a phone the stepper is the summary: the choices themselves show their selected state and the confirm bar shows the time. */
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary { padding: 0.9rem 0.8rem 0.7rem; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary .mw76-booking-summary__heading,
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary dl,
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-summary > p { display: none; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-progress-list { margin-block-end: 0; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta { inset-block-end: 0.5rem; padding: 0.7rem 0.7rem 0.7rem 1rem; }
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta .mw76-action { padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-cta, .mw76-frame .mw76-root.mw76-booking-content .mw76-booking-page.is-refreshing::before { animation: none; }
}

/* ------------------------------------------------------------------ 17. Reception desk (notifications feed, request cards, availability schedule) */
/* Phase76 shells.css centres `.mw76-content` vertically. Role containers that switch it to a block must also drop that centring,
   otherwise a short page (an empty state) floats down the canvas. Booking, customer and superadmin containers already do this. */
.mw76-frame .mw76-root:is(.mw76-receptionist-content, .mw76-employee-content) { align-content: start; }

/* Notifications: a feed of readable items instead of a squeezed eight-column table */
.mw76-frame .mw76-root .mw76-o-notify-panel .mw76-o-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.mw76-frame .mw76-root .mw76-o-notify-unread-chip {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem; border-radius: 999px;
    background: rgb(255 0 128 / 10%); color: var(--bold-action); font-size: 0.8rem; font-weight: 800;
}
[data-theme="dark"] .mw76-frame .mw76-root .mw76-o-notify-unread-chip { background: rgb(255 0 128 / 18%); color: #ff7ab9; }
.mw76-frame .mw76-root .mw76-o-notify-dot { display: inline-block; flex: none; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--bold-pink); box-shadow: 0 0 0 3px rgb(255 0 128 / 18%); }
.mw76-frame .mw76-root .mw76-o-notify-feed { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.mw76-frame .mw76-root .mw76-o-notify-item {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.85rem 1rem;
    padding: 1rem 1.1rem; border: 1px solid var(--bold-line); border-radius: 1.1rem; background: var(--mw76-surface);
    transition: border-color 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease);
}
.mw76-frame .mw76-root .mw76-o-notify-item:hover { border-color: var(--bold-line-strong); box-shadow: var(--mw76-shadow-card); }
.mw76-frame .mw76-root .mw76-o-notify-item.is-unread { border-color: rgb(255 0 128 / 30%); background: linear-gradient(90deg, rgb(255 0 128 / 6%), transparent 45%), var(--mw76-surface); }
.mw76-frame .mw76-root .mw76-o-notify-item.is-unread::before {
    content: ""; position: absolute; inset-block: 0.9rem; inset-inline-start: -1px; inline-size: 4px;
    border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--bold-grad);
}
.mw76-frame .mw76-root .mw76-o-notify-icon { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 0.9rem; color: #fff; }
.mw76-frame .mw76-root .mw76-o-notify-icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
.mw76-frame .mw76-root .mw76-o-notify-icon--info { background: linear-gradient(135deg, #5a6cff, #282b8b); }
.mw76-frame .mw76-root .mw76-o-notify-icon--success { background: linear-gradient(135deg, #2ccf93, #0d8a5f); }
.mw76-frame .mw76-root .mw76-o-notify-icon--danger { background: linear-gradient(135deg, #ff6a86, #cf1249); }
.mw76-frame .mw76-root .mw76-o-notify-icon--warning { background: linear-gradient(135deg, #ffc24f, #f08300); }
.mw76-frame .mw76-root .mw76-o-notify-icon--brand { background: var(--bold-grad); }
.mw76-frame .mw76-root .mw76-o-notify-body { min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-o-notify-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; flex-wrap: wrap; }
.mw76-frame .mw76-root .mw76-o-notify-heading h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 800; color: var(--mw76-text); }
.mw76-frame .mw76-root .mw76-o-notify-item.is-read .mw76-o-notify-heading h3 { font-weight: 700; }
.mw76-frame .mw76-root .mw76-o-notify-message { margin: 0.3rem 0 0; color: var(--mw76-text-muted); line-height: 1.55; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-o-notify-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin-block-start: 0.65rem; font-size: 0.78rem; color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-o-notify-meta > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.mw76-frame .mw76-root .mw76-o-notify-meta svg { inline-size: 0.95rem; block-size: 0.95rem; }
.mw76-frame .mw76-root .mw76-o-notify-read { color: var(--mw76-success, #12805a); font-weight: 600; }
.mw76-frame .mw76-root .mw76-o-notify-actions { align-self: center; }
.mw76-frame .mw76-root .mw76-o-notify-actions:empty { display: none; }
.mw76-frame .mw76-root .mw76-o-notify-actions .mw76-action { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-o-notify-actions svg { inline-size: 1rem; block-size: 1rem; }

/* Cancellation and reschedule requests: one review card per request, actions always in view */
.mw76-frame .mw76-root .mw76-o-request-list { display: grid; gap: 1rem; }
.mw76-frame .mw76-root .mw76-o-request-card {
    display: grid; gap: 1rem; padding: 1.25rem 1.35rem; border: 1px solid var(--bold-line); border-radius: var(--mw76-radius-card);
    background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card);
}
.mw76-frame .mw76-root .mw76-o-request-card.is-pending { border-inline-start: 4px solid var(--bold-amber); }
.mw76-frame .mw76-root .mw76-o-request-card__head { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.mw76-frame .mw76-root .mw76-o-request-avatar { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--bold-grad); color: #fff; font-size: 1.05rem; font-weight: 800; }
.mw76-frame .mw76-root .mw76-o-request-who { display: grid; flex: 1 1 12rem; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-o-request-who h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--mw76-text); }
.mw76-frame .mw76-root .mw76-o-request-who span { color: var(--mw76-text-muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-o-request-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mw76-frame .mw76-root .mw76-o-request-label { display: block; color: var(--mw76-text-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.mw76-frame .mw76-root .mw76-o-request-booking > .mw76-o-request-label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mw76-frame .mw76-root .mw76-o-request-label .mw76-o-status { letter-spacing: 0; text-transform: none; }
.mw76-frame .mw76-root .mw76-o-request-card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1rem; }
.mw76-frame .mw76-root :is(.mw76-o-request-booking, .mw76-o-request-reason) { display: grid; align-content: start; gap: 0.35rem; padding: 0.95rem 1rem; border-radius: 1rem; background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-o-request-booking strong { font-size: 1rem; color: var(--mw76-text); }
.mw76-frame .mw76-root .mw76-o-request-booking > span { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--mw76-text-muted); font-size: 0.85rem; }
.mw76-frame .mw76-root .mw76-o-request-booking svg { flex: none; inline-size: 1rem; block-size: 1rem; }
.mw76-frame .mw76-root .mw76-o-request-booking .mw76-action { justify-self: start; margin-block-start: 0.35rem; }
.mw76-frame .mw76-root .mw76-o-request-reason blockquote {
    margin: 0.1rem 0 0.35rem; padding-inline-start: 0.85rem; border-inline-start: 3px solid var(--bold-pink);
    color: var(--mw76-text); font-size: 0.95rem; white-space: pre-wrap; overflow-wrap: anywhere;
}
.mw76-frame .mw76-root .mw76-o-request-meta { color: var(--mw76-text-muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-o-request-timeshift { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem; }
.mw76-frame .mw76-root .mw76-o-request-time { display: grid; gap: 0.15rem; padding: 0.85rem 1rem; border: 1px dashed var(--bold-line-strong); border-radius: 1rem; }
.mw76-frame .mw76-root .mw76-o-request-time strong { color: var(--mw76-text); font-size: 1.05rem; font-weight: 800; }
.mw76-frame .mw76-root .mw76-o-request-time small { color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-o-request-time.is-current strong { color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-o-request-time.is-requested { border-style: solid; border-color: rgb(255 0 128 / 35%); background: linear-gradient(120deg, rgb(255 0 128 / 9%), rgb(40 43 139 / 9%)); }
.mw76-frame .mw76-root .mw76-o-request-arrow { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: var(--bold-grad); color: #fff; }
.mw76-frame .mw76-root .mw76-o-request-arrow svg { inline-size: 1.1rem; block-size: 1.1rem; }
/* Directional arrows point along the reading direction (Phase76 flips them only inside the booking and auth containers). */
.mw76-frame .mw76-root :is(.mw76-o-request-arrow, .mw76-o-availability-slot-row) .mw76-directional-icon:dir(rtl) { transform: scaleX(-1); }
.mw76-frame .mw76-root :is(.mw76-o-request-card__actions, .mw76-o-request-card__review) { display: grid; gap: 0.6rem; padding-block-start: 1rem; border-block-start: 1px solid var(--bold-line); }
.mw76-frame .mw76-root .mw76-o-request-card__review p { margin: 0; color: var(--mw76-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-o-request-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.mw76-frame .mw76-root .mw76-o-request-card .mw76-o-request-action-form { display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-o-request-card .mw76-o-request-action-form .mw76-o-input { flex: 1 1 auto; min-inline-size: 0; margin: 0; }
.mw76-frame .mw76-root .mw76-o-request-card .mw76-o-request-action-form .mw76-action { display: inline-flex; flex: none; align-items: center; gap: 0.35rem; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-o-request-card .mw76-o-request-action-form svg { inline-size: 1rem; block-size: 1rem; }

/* Staff availability: schedule rows grouped by part of the day instead of a grid of repeated cards */
.mw76-frame .mw76-root .mw76-o-availability-results-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mw76-frame .mw76-root .mw76-o-availability-results-chips svg { inline-size: 0.9rem; block-size: 0.9rem; }
.mw76-frame .mw76-root .mw76-o-availability-slot-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.mw76-frame .mw76-root .mw76-o-availability-period__title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.7rem; color: var(--mw76-text); font-size: 0.95rem; font-weight: 800; }
.mw76-frame .mw76-root .mw76-o-availability-period__title > svg { box-sizing: content-box; inline-size: 1rem; block-size: 1rem; padding: 0.45rem; border-radius: 0.8rem; color: #fff; background: linear-gradient(135deg, #ffa621, #ff0080); }
.mw76-frame .mw76-root .mw76-o-availability-period__title > span { margin-inline-start: auto; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--bold-tile); font-size: 0.78rem; }
.mw76-frame .mw76-root .mw76-o-availability-period__rows { display: grid; gap: 0.5rem; }
.mw76-frame .mw76-root .mw76-o-availability-slot-row {
    display: grid; grid-template-columns: 7.5rem minmax(0, 1.35fr) minmax(0, 1fr) auto; align-items: center; gap: 1rem;
    padding: 0.7rem 0.9rem; border: 1px solid var(--bold-line); border-radius: 1rem; background: var(--mw76-surface);
    transition: border-color 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease), transform 0.2s var(--bold-ease);
}
.mw76-frame .mw76-root .mw76-o-availability-slot-row:hover { border-color: rgb(255 0 128 / 35%); box-shadow: var(--bold-lift); transform: translateY(-1px); }
.mw76-frame .mw76-root .mw76-o-availability-slot-time { display: grid; gap: 0; }
.mw76-frame .mw76-root .mw76-o-availability-slot-time strong { color: var(--mw76-text); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.mw76-frame .mw76-root .mw76-o-availability-slot-time small { color: var(--mw76-text-muted); font-size: 0.75rem; }
.mw76-frame .mw76-root .mw76-o-availability-slot-row .mw76-o-availability-slot-meta { display: grid; gap: 0.05rem; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-o-availability-slot-row .mw76-o-availability-slot-meta strong { overflow: hidden; color: var(--mw76-text); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-o-availability-slot-row .mw76-o-availability-slot-meta small { overflow: hidden; color: var(--mw76-text-muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-o-availability-slot-row .mw76-o-availability-slot-staff { display: flex; align-items: center; gap: 0.6rem; }
.mw76-frame .mw76-root .mw76-o-availability-slot-staff > span:last-child { display: grid; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-o-availability-slot-avatar { display: grid; place-items: center; flex: none; inline-size: 2.1rem; block-size: 2.1rem; border-radius: 50%; background: var(--bold-grad); color: #fff; font-size: 0.85rem; font-weight: 800; }
.mw76-frame .mw76-root .mw76-o-availability-slot-row .mw76-action { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-o-availability-slot-row .mw76-action svg { inline-size: 1rem; block-size: 1rem; }

@media (max-width: 991.98px) {
    .mw76-frame .mw76-root .mw76-o-request-card__body, .mw76-frame .mw76-root .mw76-o-request-forms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .mw76-frame .mw76-root .mw76-o-availability-slot-row { grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.9rem; }
    .mw76-frame .mw76-root .mw76-o-availability-slot-row .mw76-action { grid-column: 1 / -1; justify-content: center; }
    .mw76-frame .mw76-root .mw76-o-availability-slot-row > .mw76-o-availability-slot-meta:not(.mw76-o-availability-slot-staff) { grid-column: 2; }
}
@media (max-width: 640px) {
    .mw76-frame .mw76-root .mw76-o-notify-item { grid-template-columns: auto minmax(0, 1fr); padding: 0.9rem; }
    .mw76-frame .mw76-root .mw76-o-notify-actions { grid-column: 2; justify-self: start; }
    .mw76-frame .mw76-root .mw76-o-request-card { padding: 1rem; }
    .mw76-frame .mw76-root .mw76-o-request-timeshift { grid-template-columns: minmax(0, 1fr); }
    .mw76-frame .mw76-root .mw76-o-request-arrow { justify-self: center; transform: rotate(90deg); }
    .mw76-frame .mw76-root .mw76-o-request-arrow:dir(rtl) { transform: rotate(-90deg); }
    .mw76-frame .mw76-root .mw76-o-request-card .mw76-o-request-action-form { flex-wrap: wrap; }
    .mw76-frame .mw76-root .mw76-o-request-card .mw76-o-request-action-form .mw76-action { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .mw76-frame .mw76-root :is(.mw76-o-notify-item, .mw76-o-availability-slot-row) { transition: none; }
    .mw76-frame .mw76-root .mw76-o-availability-slot-row:hover { transform: none; }
}

/* ------------------------------------------------------------------ 18. Platform workspace (SuperAdmin) */
/* Topbar: at common laptop widths the account controls pushed onto a second row whenever a page had a scrollbar.
   Phones and tablets keep the Phase76 wrapping layout. */
@media (min-width: 992px) and (max-width: 1439.98px) {
    .mw76-frame .mw76-root.mw76-header.mw76-platform .mw76-platform-topbar { flex-wrap: nowrap; gap: 1rem; }
    .mw76-frame .mw76-root.mw76-header.mw76-platform .mw76-platform-account-controls { flex-wrap: nowrap; gap: 0.75rem; min-inline-size: 0; }
    .mw76-frame .mw76-root.mw76-header.mw76-platform .mw-language-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .mw76-frame .mw76-root.mw76-header.mw76-platform .mw76-platform-account-toggle { max-inline-size: 15rem; }
    .mw76-frame .mw76-root.mw76-header.mw76-platform .mw76-platform-account-copy { min-inline-size: 0; }
    .mw76-frame .mw76-root.mw76-header.mw76-platform .mw76-platform-account-copy :is(strong, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Tables: Phase76 lets every cell break anywhere, which split words and codes mid-word ("professiona l"). Break only between words. */
.mw76-frame .mw76-root.mw76-superadmin-content :is(td, .mw76-p-table code, .mw76-p-table bdi) { word-break: normal; overflow-wrap: break-word; }
/* Headings may wrap between words, so wide numeric tables (booking growth) fit their card instead of scrolling sideways. */
.mw76-frame .mw76-root.mw76-superadmin-content .mw76-p-table th { white-space: normal; }
/* A cell form that is only a button (Activate, Retire, Deprecate) does not need the 12rem reserved for forms with fields. */
.mw76-frame .mw76-root.mw76-superadmin-content .mw76-p-table td > form:not(:has(input:not([type="hidden"]), select, textarea)) { min-inline-size: 0; }

/* Two tables side by side squeezed their columns and cut off actions: stack table panels until there is room for both. */
@media (max-width: 1599.98px) {
    .mw76-frame .mw76-root.mw76-superadmin-content .mw76-p-grid:has(table) { grid-template-columns: minmax(0, 1fr); }
    .mw76-frame .mw76-root.mw76-superadmin-content .row > .col-xl-6:has(table) { flex: 0 0 auto; inline-size: 100%; }
}

/* Shared platform chip (state, plan, role) */
.mw76-frame .mw76-root .mw76-p-usage-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.7rem; border-radius: 999px;
    border: 1px solid transparent; font-size: 0.76rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.mw76-frame .mw76-root .mw76-p-usage-chip svg { inline-size: 0.85rem; block-size: 0.85rem; }
.mw76-frame .mw76-root .mw76-p-usage-chip.is-success { background: rgb(18 128 90 / 12%); color: #0d7a52; }
.mw76-frame .mw76-root .mw76-p-usage-chip.is-warning { background: var(--bold-chip-bg); color: var(--bold-chip-fg); }
.mw76-frame .mw76-root .mw76-p-usage-chip.is-danger { background: rgb(207 18 73 / 11%); color: #b3123f; }
.mw76-frame .mw76-root .mw76-p-usage-chip.is-info { background: rgb(40 43 139 / 10%); color: var(--bold-indigo); }
.mw76-frame .mw76-root .mw76-p-usage-chip.is-muted { background: var(--bold-tile); color: var(--mw76-text-muted); }
[data-theme="dark"] .mw76-frame .mw76-root .mw76-p-usage-chip.is-success { color: #5be0a8; }
[data-theme="dark"] .mw76-frame .mw76-root .mw76-p-usage-chip.is-danger { color: #ff7d9b; }
[data-theme="dark"] .mw76-frame .mw76-root .mw76-p-usage-chip.is-info { background: rgb(140 146 255 / 16%); color: #b9bdff; }
.mw76-frame .mw76-root .mw76-p-usage-avatar { display: grid; place-items: center; flex: none; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: var(--bold-grad); color: #fff; font-weight: 800; }

/* Reports: compact KPI tiles, icon beside the label and number, so the summary fits above the fold. */
.mw76-frame .mw76-root.mw76-content .mw76-p-panel.mw76-p-kpi { padding: 1rem 1.1rem; }
.mw76-frame .mw76-root .mw76-p-kpi .mw76-p-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.1rem 0.8rem; }
.mw76-frame .mw76-root .mw76-p-kpi .mw76-p-body > :not(.mw76-p-kpi__icon) { grid-column: 2; margin: 0; }
.mw76-frame .mw76-root .mw76-p-kpi__icon { grid-row: span 2; display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; margin: 0; border-radius: 0.85rem; background: rgb(255 0 128 / 12%); color: var(--bold-action); }
.mw76-frame .mw76-root .mw76-p-kpi__icon svg { inline-size: 1.15rem; block-size: 1.15rem; }
.mw76-frame .mw76-root .mw76-p-kpi--text-success .mw76-p-kpi__icon { background: rgb(18 128 90 / 12%); color: #0d7a52; }
.mw76-frame .mw76-root .mw76-p-kpi--text-warning .mw76-p-kpi__icon { background: var(--bold-chip-bg); color: var(--bold-chip-fg); }
.mw76-frame .mw76-root .mw76-p-kpi--text-secondary .mw76-p-kpi__icon { background: var(--bold-tile); color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-p-kpi .mw76-p-kpi__value { font-size: 1.6rem; font-weight: 800; line-height: 1.15; }

/* Tenant usage: one card per tenant with a tile per metric */
.mw76-frame .mw76-root .mw76-p-usage-list { display: grid; gap: 1.25rem; }
.mw76-frame .mw76-root .mw76-p-usage-tenant { padding: 1.25rem 1.35rem; border: 1px solid var(--bold-line); border-radius: var(--mw76-radius-card); background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card); }
.mw76-frame .mw76-root .mw76-p-usage-tenant__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-block-end: 1.1rem; }
.mw76-frame .mw76-root .mw76-p-usage-tenant__name { display: grid; flex: 1 1 14rem; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-usage-tenant__name h2 { margin: 0; color: var(--mw76-text); font-size: 1.1rem; font-weight: 800; }
.mw76-frame .mw76-root .mw76-p-usage-tenant__name > span { color: var(--mw76-text-muted); font-size: 0.85rem; }
.mw76-frame .mw76-root .mw76-p-usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 0.85rem; }
.mw76-frame .mw76-root .mw76-p-usage-tile { display: grid; align-content: start; gap: 0.6rem; padding: 1rem 1.05rem; border: 1px solid var(--bold-line); border-radius: 1.1rem; background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-usage-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.mw76-frame .mw76-root .mw76-p-usage-tile__top h3 { margin: 0; color: var(--mw76-text); font-size: 0.92rem; font-weight: 800; }
.mw76-frame .mw76-root .mw76-p-usage-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.mw76-frame .mw76-root .mw76-p-usage-figure strong { background: var(--bold-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.9rem; font-weight: 800; line-height: 1; }
.mw76-frame .mw76-root .mw76-p-usage-figure > span { color: var(--mw76-text-muted); font-size: 0.85rem; font-weight: 600; }
.mw76-frame .mw76-root .mw76-p-usage-meter { block-size: 0.45rem; overflow: hidden; border-radius: 999px; background: rgb(21 21 25 / 8%); }
.mw76-frame .mw76-root .mw76-p-usage-meter > span { display: block; block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff0080, #ffa621); }
.mw76-frame .mw76-root .mw76-p-usage-tile.is-danger .mw76-p-usage-meter > span { background: linear-gradient(90deg, #ff4d6d, #cf1249); }
.mw76-frame .mw76-root .mw76-p-usage-facts { display: grid; gap: 0.3rem; margin: 0; padding-block-start: 0.55rem; border-block-start: 1px dashed var(--bold-line-strong); font-size: 0.78rem; }
.mw76-frame .mw76-root .mw76-p-usage-facts > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.mw76-frame .mw76-root .mw76-p-usage-facts dt { color: var(--mw76-text-muted); font-weight: 500; }
.mw76-frame .mw76-root .mw76-p-usage-facts dd { margin: 0; color: var(--mw76-text); font-weight: 600; text-align: end; }

/* Support impersonation: account cards with a compact start form */
.mw76-frame .mw76-root .mw76-p-imp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; margin-block-start: 1.25rem; }
.mw76-frame .mw76-root .mw76-p-imp-card { display: grid; align-content: start; gap: 0.75rem; padding: 1.1rem 1.15rem; border: 1px solid var(--bold-line); border-radius: 1.15rem; background: var(--mw76-surface); transition: border-color 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease); }
.mw76-frame .mw76-root .mw76-p-imp-card:hover, .mw76-frame .mw76-root .mw76-p-imp-card:focus-within { border-color: rgb(255 0 128 / 32%); box-shadow: var(--mw76-shadow-card); }
.mw76-frame .mw76-root .mw76-p-imp-card__head { display: flex; align-items: center; gap: 0.75rem; }
.mw76-frame .mw76-root .mw76-p-imp-card__who { display: grid; flex: 1 1 auto; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-imp-card__who h3 { margin: 0; overflow: hidden; color: var(--mw76-text); font-size: 0.98rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-p-imp-card__who > span { color: var(--mw76-text-muted); font-size: 0.8rem; }
.mw76-frame .mw76-root .mw76-p-imp-card__branches { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--mw76-text-muted); font-size: 0.8rem; }
.mw76-frame .mw76-root .mw76-p-imp-card__branches svg { flex: none; inline-size: 0.95rem; block-size: 0.95rem; }
.mw76-frame .mw76-root .mw76-p-imp-form { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: end; gap: 0.5rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--bold-line); }
.mw76-frame .mw76-root .mw76-p-imp-form__duration { margin: 0; font-size: 0.75rem; }
.mw76-frame .mw76-root .mw76-p-imp-form__duration .mw76-p-input { margin-block-start: 0.25rem; }
.mw76-frame .mw76-root .mw76-p-imp-form :is(.mw76-p-imp-form__ticket, .mw76-p-imp-form__submit) { grid-column: 1 / -1; }
.mw76-frame .mw76-root .mw76-p-imp-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.mw76-frame .mw76-root .mw76-p-imp-form__submit svg { inline-size: 1rem; block-size: 1rem; }

/* Subscription plans: plan cards; draft editors collapse like the create form.
   The workspace's implicit grid column grew to its widest content and pushed phones sideways. */
.mw76-frame .mw76-root .mw76-p-plan-workspace { grid-template-columns: minmax(0, 1fr); }
.mw76-frame .mw76-root .mw76-p-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-block-start: 0.75rem; }
.mw76-frame .mw76-root .mw76-p-plan-card {
    position: relative; display: grid; align-content: start; gap: 0.55rem; padding: 1.15rem 1.15rem 1rem; overflow: hidden;
    border: 1px solid var(--bold-line); border-radius: 1.2rem; background: var(--mw76-surface);
}
.mw76-frame .mw76-root .mw76-p-plan-card::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; background: var(--bold-grad); }
.mw76-frame .mw76-root .mw76-p-plan-card.is-retired { opacity: 0.72; }
.mw76-frame .mw76-root .mw76-p-plan-card.is-retired::before { background: var(--bold-line-strong); }
.mw76-frame .mw76-root .mw76-p-plan-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.mw76-frame .mw76-root .mw76-p-plan-card__chips code { padding: 0.15rem 0.5rem; border-radius: 0.5rem; background: var(--bold-tile); color: var(--bold-action); font-size: 0.75rem; }
.mw76-frame .mw76-root .mw76-p-plan-card h3 { margin: 0.2rem 0 0; color: var(--mw76-text); font-size: 1.2rem; font-weight: 800; text-transform: capitalize; }
.mw76-frame .mw76-root .mw76-p-plan-card__price { margin: 0; background: var(--bold-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.05rem; font-weight: 800; }
.mw76-frame .mw76-root .mw76-p-plan-card__version { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; color: var(--mw76-text-muted); font-size: 0.8rem; }
.mw76-frame .mw76-root .mw76-p-plan-card__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.35rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--bold-line); }
.mw76-frame .mw76-root .mw76-p-plan-draft > summary { gap: 0.5rem; }
.mw76-frame .mw76-root .mw76-p-plan-draft > summary svg { inline-size: 1rem; block-size: 1rem; color: var(--bold-action); }
.mw76-frame .mw76-root .mw76-p-plan-draft > summary code { padding: 0.1rem 0.45rem; border-radius: 0.45rem; background: var(--bold-tile); color: var(--bold-action); }

@media (max-width: 575.98px) {
    .mw76-frame .mw76-root .mw76-p-usage-tenant { padding: 1rem; }
    .mw76-frame .mw76-root :is(.mw76-p-usage-grid, .mw76-p-imp-grid, .mw76-p-plan-grid) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .mw76-frame .mw76-root .mw76-p-imp-card { transition: none; }
}

/* ------------------------------------------------------------------ 18b. Platform admin building blocks (redesigned SuperAdmin pages)
   Used by Multi-country configuration, Marketplace analytics/observation and marketplace moderation detail.
   Markup keeps the mw76-p-* family; colours come from theme tokens, so Light/Dark and RTL need no extra rules. */

/* Page head: kicker, title, one-line purpose and the page-level actions. */
.mw76-frame .mw76-root .mw76-p-pagehead {
    position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem;
    margin-block-end: 1.5rem; padding: clamp(1.15rem, 2.4vw, 1.75rem); border: 1px solid var(--bold-line); border-radius: 1.5rem; box-shadow: var(--mw76-shadow-card);
    background: radial-gradient(55% 140% at 100% 0%, rgb(255 0 128 / 11%), transparent 62%), radial-gradient(45% 140% at 0% 100%, rgb(40 43 139 / 10%), transparent 62%), var(--mw76-surface);
}
.mw76-frame .mw76-root .mw76-p-pagehead::after { content: ""; position: absolute; inset-block-start: -3rem; inset-inline-end: -3rem; inline-size: 9rem; block-size: 9rem; border-radius: 50%; border: 22px solid rgb(255 0 128 / 7%); pointer-events: none; }
.mw76-frame .mw76-root .mw76-p-pagehead > * { position: relative; z-index: 1; }
.mw76-frame .mw76-root .mw76-p-pagehead > :first-child { flex: 1 1 26rem; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-pagehead h1 { margin: 0.35rem 0 0.45rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; }
.mw76-frame .mw76-root .mw76-p-pagehead h1 { inline-size: fit-content; background: var(--bold-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
[lang="ar"] .mw76-frame .mw76-root .mw76-p-pagehead h1 { letter-spacing: 0; padding-block: 0.1em; }
@media (forced-colors: active) { .mw76-frame .mw76-root .mw76-p-pagehead h1 { background: none; color: CanvasText; } }
.mw76-frame .mw76-root .mw76-p-pagehead p { margin: 0; max-inline-size: 52rem; color: var(--mw76-text-muted); line-height: 1.7; }
.mw76-frame .mw76-root .mw76-p-pagehead-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mw76-frame .mw76-root .mw76-p-pagehead-actions form { margin: 0; }

/* KPI tiles: compact, labelled numbers. A metric that cannot be measured renders as a muted sentence, never as a giant number. */
.mw76-frame .mw76-root .mw76-p-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.9rem; margin-block-end: 1.25rem; }
.mw76-frame .mw76-root .mw76-p-stat {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.2rem 0.85rem; min-inline-size: 0; margin: 0;
    padding: 1rem 1.1rem; border: 1px solid var(--bold-line); border-radius: 1.1rem; background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card); color: var(--mw76-text); text-decoration: none;
}
.mw76-frame .mw76-root .mw76-p-stat:not(:has(.mw76-p-stat-icon)) { grid-template-columns: minmax(0, 1fr); }
.mw76-frame .mw76-root a.mw76-p-stat:hover { border-color: var(--bold-pink); }
.mw76-frame .mw76-root .mw76-p-stat-icon { grid-row: span 2; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 0.85rem; background: var(--mw76-surface-tint); color: var(--mw76-color-action); }
.mw76-frame .mw76-root .mw76-p-stat-icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
.mw76-frame .mw76-root .mw76-p-stat-label { color: var(--mw76-text-muted); font-size: 0.8rem; font-weight: 700; line-height: 1.4; }
.mw76-frame .mw76-root .mw76-p-stat-value { margin: 0; color: var(--mw76-text); font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-p-stat-value small { margin-inline-start: 0.3rem; color: var(--mw76-text-muted); font-size: 0.8rem; font-weight: 700; }
.mw76-frame .mw76-root .mw76-p-stat-hint { grid-column: 1 / -1; margin: 0.25rem 0 0; color: var(--mw76-text-muted); font-size: 0.75rem; line-height: 1.5; }
.mw76-frame .mw76-root .mw76-p-stat--muted .mw76-p-stat-value { color: var(--mw76-text-muted); font-size: 0.92rem; font-weight: 700; line-height: 1.45; }
.mw76-frame .mw76-root .mw76-p-stat-value--text { font-size: 1rem; line-height: 1.45; }
.mw76-frame .mw76-root ol.mw76-p-stats { padding: 0; list-style: none; }
.mw76-frame .mw76-root .mw76-p-stat--attention { border-color: color-mix(in srgb, var(--mw76-warning) 45%, var(--bold-line)); }
.mw76-frame .mw76-root .mw76-p-stat--attention .mw76-p-stat-icon { background: color-mix(in srgb, var(--mw76-warning) 14%, var(--mw76-surface)); color: var(--mw76-warning); }

/* Callouts: state messages in the reader's language, with the next step. */
.mw76-frame .mw76-root .mw76-p-callout {
    --callout-tone: var(--mw76-info);
    display: flex; align-items: flex-start; gap: 0.85rem; margin-block-end: 1.25rem; padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--callout-tone) 30%, var(--bold-line)); border-inline-start: 4px solid var(--callout-tone); border-radius: 1rem;
    background: color-mix(in srgb, var(--callout-tone) 8%, var(--mw76-surface)); color: var(--mw76-text); line-height: 1.65;
}
.mw76-frame .mw76-root .mw76-p-callout > svg, .mw76-frame .mw76-root .mw76-p-callout > i { flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.2rem; color: var(--callout-tone); }
.mw76-frame .mw76-root .mw76-p-callout > div { min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-callout strong { display: block; }
.mw76-frame .mw76-root .mw76-p-callout p { margin: 0.2rem 0 0; color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-p-callout ul { margin: 0.4rem 0 0; padding-inline-start: 1.1rem; color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-p-callout--warning { --callout-tone: var(--mw76-warning); }
.mw76-frame .mw76-root .mw76-p-callout--danger { --callout-tone: var(--mw76-error); }
.mw76-frame .mw76-root .mw76-p-callout--success { --callout-tone: var(--mw76-success); }

/* Section head inside a panel: title, record count, purpose and the section action. */
.mw76-frame .mw76-root .mw76-p-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-block-end: 1rem; }
.mw76-frame .mw76-root .mw76-p-section-head > div { min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-section-head h2 { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.mw76-frame .mw76-root .mw76-p-section-head p { margin: 0.3rem 0 0; color: var(--mw76-text-muted); font-size: 0.875rem; line-height: 1.6; }
.mw76-frame .mw76-root .mw76-p-count { display: inline-grid; place-items: center; min-inline-size: 1.8rem; block-size: 1.8rem; padding-inline: 0.5rem; border-radius: 999px; background: var(--bold-tile); color: var(--mw76-text-muted); font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Labelled filter bar. */
.mw76-frame .mw76-root .mw76-p-filterbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; gap: 0.85rem; margin: 0; padding: 1rem; border: 1px solid var(--bold-line); border-radius: 1.1rem; background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-panel > .mw76-p-filterbar { padding: 0; border: 0; background: transparent; }
.mw76-frame .mw76-root .mw76-p-filterbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mw76-frame .mw76-root .mw76-p-active-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.85rem; color: var(--mw76-text-muted); font-size: 0.85rem; }

/* Form layout: every field has a visible label; units and hints sit next to the input. */
.mw76-frame .mw76-root .mw76-p-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem 1.1rem; }
.mw76-frame .mw76-root .mw76-p-formgrid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.mw76-frame .mw76-root .mw76-p-formfield { display: flex; flex-direction: column; gap: 0.4rem; min-inline-size: 0; margin: 0; }
.mw76-frame .mw76-root .mw76-p-formfield--span { grid-column: 1 / -1; }
.mw76-frame .mw76-root .mw76-p-formfield > label, .mw76-frame .mw76-root .mw76-p-formfield > .mw76-p-formlabel { margin: 0; color: var(--mw76-text); font-size: 0.8rem; font-weight: 700; line-height: 1.4; }
.mw76-frame .mw76-root .mw76-p-formfield > small { color: var(--mw76-text-muted); font-size: 0.75rem; line-height: 1.5; }
.mw76-frame .mw76-root .mw76-p-unit { display: flex; align-items: stretch; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-unit > .mw76-p-input { flex: 1 1 auto; min-inline-size: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
.mw76-frame .mw76-root .mw76-p-unit > span {
    display: inline-flex; align-items: center; padding-inline: 0.85rem; border: 1px solid var(--mw76-border); border-inline-start: 0;
    border-start-end-radius: var(--mw76-radius-control); border-end-end-radius: var(--mw76-radius-control);
    background: var(--bold-tile); color: var(--mw76-text-muted); font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.mw76-frame .mw76-root .mw76-p-fieldset { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem 1.1rem 1.15rem; border: 1px solid var(--bold-line); border-radius: 1.1rem; background: var(--mw76-surface); }
.mw76-frame .mw76-root .mw76-p-fieldset > legend { float: none; inline-size: auto; margin: 0; padding-inline: 0.4rem; color: var(--mw76-text); font-size: 0.9rem; font-weight: 800; }
.mw76-frame .mw76-root .mw76-p-fieldset > p { margin: 0 0 0.9rem; color: var(--mw76-text-muted); font-size: 0.85rem; line-height: 1.6; }
.mw76-frame .mw76-root .mw76-p-fieldset--danger { border-color: color-mix(in srgb, var(--mw76-error) 40%, var(--bold-line)); background: color-mix(in srgb, var(--mw76-error) 5%, var(--mw76-surface)); }
.mw76-frame .mw76-root .mw76-p-check {
    display: flex; align-items: flex-start; gap: 0.65rem; min-block-size: 44px; margin: 0; padding: 0.65rem 0.85rem;
    border: 1px solid var(--bold-line); border-radius: var(--mw76-radius-control); background: var(--mw76-surface); color: var(--mw76-text); font-weight: 600; line-height: 1.5; cursor: pointer;
}
.mw76-frame .mw76-root .mw76-p-check input { flex-shrink: 0; inline-size: 1.15rem; block-size: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--mw76-color-action); }
.mw76-frame .mw76-root .mw76-p-check small { display: block; color: var(--mw76-text-muted); font-size: 0.78rem; font-weight: 400; }
.mw76-frame .mw76-root .mw76-p-formactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-block-start: 1.1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--bold-line); }
.mw76-frame .mw76-root .mw76-p-formactions > p { flex: 1 1 16rem; margin: 0; color: var(--mw76-text-muted); font-size: 0.8rem; }

/* Create panels: a disclosure that opens a labelled form instead of a row of unlabeled boxes. */
.mw76-frame .mw76-root .mw76-p-create { margin-block-end: 1rem; border: 1px dashed var(--bold-line-strong); border-radius: 1.1rem; background: var(--mw76-surface); }
.mw76-frame .mw76-root .mw76-p-create > summary { display: flex; align-items: center; gap: 0.6rem; min-block-size: 52px; padding: 0.75rem 1.1rem; color: var(--bold-action); font-weight: 800; list-style: none; cursor: pointer; }
.mw76-frame .mw76-root .mw76-p-create > summary::-webkit-details-marker { display: none; }
.mw76-frame .mw76-root .mw76-p-create > summary svg { inline-size: 1.1rem; block-size: 1.1rem; }
.mw76-frame .mw76-root .mw76-p-create[open] { border-style: solid; }
.mw76-frame .mw76-root .mw76-p-create[open] > summary { border-block-end: 1px solid var(--bold-line); }
.mw76-frame .mw76-root .mw76-p-create > form { padding: 1.1rem; }

/* Record list: readable rows; the editor opens in place with labelled fields and the record's status action. */
.mw76-frame .mw76-root .mw76-p-records { margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--bold-line); border-radius: 1.1rem; background: var(--mw76-surface); }
.mw76-frame .mw76-root .mw76-p-records > li + li { border-block-start: 1px solid var(--bold-line); }
.mw76-frame .mw76-root :is(.mw76-p-record > summary, .mw76-p-record-row) {
    display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem 1rem; min-block-size: 64px; padding: 0.8rem 1.1rem;
}
.mw76-frame .mw76-root .mw76-p-record > summary { list-style: none; cursor: pointer; transition: background-color 0.15s var(--bold-ease); }
.mw76-frame .mw76-root .mw76-p-record > summary::-webkit-details-marker { display: none; }
.mw76-frame .mw76-root .mw76-p-record > summary:hover { background: var(--mw76-surface-tint); }
.mw76-frame .mw76-root .mw76-p-record[open] > summary { border-block-end: 1px solid var(--bold-line); background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-record-badge {
    display: grid; place-items: center; min-inline-size: 2.6rem; block-size: 2.6rem; padding-inline: 0.45rem; border-radius: 0.8rem;
    background: var(--mw76-surface-tint); color: var(--mw76-color-action); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; direction: ltr;
}
.mw76-frame .mw76-root .mw76-p-record-title { min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-record-title strong { display: block; color: var(--mw76-text); font-size: 0.95rem; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-p-record-title small { display: block; margin-block-start: 0.15rem; color: var(--mw76-text-muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-p-record-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-chip { display: inline-flex; align-items: center; gap: 0.3rem; max-inline-size: 100%; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--bold-tile); color: var(--mw76-text-muted); font-size: 0.75rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-p-chip svg { flex-shrink: 0; inline-size: 0.85rem; block-size: 0.85rem; }
.mw76-frame .mw76-root .mw76-p-record-toggle { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--mw76-link); font-size: 0.82rem; font-weight: 800; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-p-record-toggle svg { inline-size: 1rem; block-size: 1rem; transition: transform 0.2s var(--bold-ease); }
.mw76-frame .mw76-root .mw76-p-record[open] .mw76-p-record-toggle svg { transform: rotate(180deg); }
.mw76-frame .mw76-root .mw76-p-record-row > form { margin: 0; }
.mw76-frame .mw76-root .mw76-p-record-body { padding: 1.1rem; }
.mw76-frame .mw76-root .mw76-p-record-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-start: 1.1rem; padding-block-start: 1rem; border-block-start: 1px dashed var(--bold-line-strong); }
.mw76-frame .mw76-root .mw76-p-record-footer form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.mw76-frame .mw76-root .mw76-p-record-footer p { margin: 0; color: var(--mw76-text-muted); font-size: 0.8rem; }
.mw76-frame .mw76-root .mw76-p-records-empty { display: grid; justify-items: center; gap: 0.35rem; padding: 2rem 1.25rem; color: var(--mw76-text-muted); text-align: center; }
.mw76-frame .mw76-root .mw76-p-records-empty svg { inline-size: 1.6rem; block-size: 1.6rem; color: var(--mw76-color-action); }
.mw76-frame .mw76-root .mw76-p-records-empty strong { color: var(--mw76-text); }
.mw76-frame .mw76-root .mw76-p-records-empty p { max-inline-size: 34rem; margin: 0; font-size: 0.85rem; line-height: 1.6; }

/* Action cards: one sensitive action per card, its effect stated before the form. */
.mw76-frame .mw76-root .mw76-p-actiongrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.mw76-frame .mw76-root .mw76-p-actioncard {
    --action-tone: var(--bold-indigo);
    display: flex; flex-direction: column; gap: 0.7rem; min-inline-size: 0; padding: 1.1rem;
    border: 1px solid var(--bold-line); border-block-start: 4px solid var(--action-tone); border-radius: 1.1rem; background: var(--mw76-surface);
}
.mw76-frame .mw76-root .mw76-p-actioncard h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; }
.mw76-frame .mw76-root .mw76-p-actioncard h3 svg { inline-size: 1.1rem; block-size: 1.1rem; color: var(--action-tone); }
.mw76-frame .mw76-root .mw76-p-actioncard > p { margin: 0; color: var(--mw76-text-muted); font-size: 0.85rem; line-height: 1.6; }
.mw76-frame .mw76-root .mw76-p-actioncard form { display: grid; gap: 0.75rem; margin: 0.25rem 0 0; }
.mw76-frame .mw76-root .mw76-p-actioncard form > .mw76-p-button { justify-self: start; }
.mw76-frame .mw76-root .mw76-p-actioncard--warning { --action-tone: var(--mw76-warning); }
.mw76-frame .mw76-root .mw76-p-actioncard--danger { --action-tone: var(--mw76-error); }
.mw76-frame .mw76-root .mw76-p-actioncard--success { --action-tone: var(--mw76-success); }
.mw76-frame .mw76-root .mw76-p-actioncard--brand { --action-tone: var(--mw76-color-action); }
/* Indigo is too dark on the dark surface; only the neutral card needs a lighter tone. */
[data-theme="dark"] .mw76-frame .mw76-root .mw76-p-actioncard:not([class*="mw76-p-actioncard--"]) { --action-tone: #8c92ff; }

/* Lifecycle steps (observation window). */
.mw76-frame .mw76-root .mw76-p-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem; margin: 0 0 1.1rem; padding: 0; list-style: none; counter-reset: mw-step; }
.mw76-frame .mw76-root .mw76-p-step {
    display: flex; align-items: center; gap: 0.6rem; min-inline-size: 0; padding: 0.65rem 0.8rem;
    border: 1px solid var(--bold-line); border-radius: 0.9rem; background: var(--mw76-surface); color: var(--mw76-text-muted); font-size: 0.82rem; font-weight: 700;
}
.mw76-frame .mw76-root .mw76-p-step::before { counter-increment: mw-step; content: counter(mw-step); display: grid; place-items: center; flex-shrink: 0; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; background: var(--bold-tile); font-size: 0.75rem; }
.mw76-frame .mw76-root .mw76-p-step.is-done { color: var(--mw76-text); }
.mw76-frame .mw76-root .mw76-p-step.is-done::before { content: "\2713"; background: var(--mw76-success); color: #fff; }
.mw76-frame .mw76-root .mw76-p-step.is-current { border-color: var(--bold-pink); color: var(--mw76-text); box-shadow: 0 0 0 3px rgb(255 0 128 / 12%); }
.mw76-frame .mw76-root .mw76-p-step.is-current::before { background: var(--bold-grad); color: #fff; }
.mw76-frame .mw76-root .mw76-p-step.is-stopped::before { content: "\00D7"; background: var(--mw76-error); color: #fff; }

/* Fact grid: short facts side by side instead of a tall definition list. */
.mw76-frame .mw76-root .mw76-p-factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.75rem; margin: 0; }
.mw76-frame .mw76-root .mw76-p-factgrid > div { min-inline-size: 0; padding: 0.85rem 1rem; border: 1px solid var(--bold-line); border-radius: 1rem; background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-factgrid dt { margin-block-end: 0.35rem; color: var(--mw76-text-muted); font-size: 0.75rem; font-weight: 700; }
.mw76-frame .mw76-root .mw76-p-factgrid dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; color: var(--mw76-text); font-weight: 800; overflow-wrap: anywhere; }
.mw76-frame .mw76-root .mw76-p-factgrid dd small { color: var(--mw76-text-muted); font-size: 0.75rem; font-weight: 600; }

/* Inline disclosure for a secondary detail (technical evidence, raw identifiers kept off the main row). */
.mw76-frame .mw76-root .mw76-p-more > summary { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--mw76-link); font-size: 0.8rem; font-weight: 700; cursor: pointer; list-style: none; }
.mw76-frame .mw76-root .mw76-p-more > summary::-webkit-details-marker { display: none; }
.mw76-frame .mw76-root .mw76-p-more > summary svg { inline-size: 0.9rem; block-size: 0.9rem; }
.mw76-frame .mw76-root .mw76-p-more[open] > summary { margin-block-end: 0.5rem; }
.mw76-frame .mw76-root .mw76-p-more pre { max-block-size: 14rem; margin: 0; padding: 0.75rem; overflow: auto; border-radius: 0.75rem; background: var(--bold-tile); color: var(--mw76-text-muted); font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: start; }

/* Section jump links: one segmented bar instead of loose outlined chips. */
.mw76-frame .mw76-root .mw76-p-jump { inline-size: fit-content; max-inline-size: 100%; gap: 0.3rem; padding: 0.35rem; border: 1px solid var(--bold-line); border-radius: 1rem; background: var(--mw76-surface); box-shadow: var(--mw76-shadow-card); }
.mw76-frame .mw76-root .mw76-p-jump a { display: inline-flex; align-items: center; min-block-size: 40px; border: 0; border-radius: 0.75rem; background: transparent; color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-p-jump a:hover { background: var(--mw76-surface-tint); color: var(--mw76-color-action); }

@media (max-width: 767.98px) {
    .mw76-frame .mw76-root :is(.mw76-p-record > summary, .mw76-p-record-row) { grid-template-columns: auto minmax(0, 1fr) auto; }
    .mw76-frame .mw76-root :is(.mw76-p-record > summary, .mw76-p-record-row) > .mw76-p-record-meta { grid-column: 2 / -1; grid-row: 2; }
    .mw76-frame .mw76-root :is(.mw76-p-record > summary, .mw76-p-record-row) > :is(.mw76-p-usage-chip, .mw76-p-record-status) { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
    .mw76-frame .mw76-root .mw76-p-record-row > form { grid-column: 3; grid-row: 1; }
    .mw76-frame .mw76-root .mw76-p-record-toggle > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .mw76-frame .mw76-root .mw76-p-pagehead-actions { inline-size: 100%; }
    .mw76-frame .mw76-root .mw76-p-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .mw76-frame .mw76-root .mw76-p-stat { grid-template-columns: minmax(0, 1fr); padding: 0.85rem; }
    .mw76-frame .mw76-root .mw76-p-stat-icon { display: none; }
    .mw76-frame .mw76-root .mw76-p-stat-value { font-size: 1.35rem; }
    .mw76-frame .mw76-root .mw76-p-jump { inline-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .mw76-frame .mw76-root :is(.mw76-p-record > summary, .mw76-p-record-toggle svg) { transition: none; }
}

/* ------------------------------------------------------------------ 18c. Platform overview: hero, charts and shortcuts
   Chart palette: brand hues stepped and validated (dataviz six checks) for the light and dark card surfaces.
   Slot order is fixed: 1 indigo, 2 pink, 3 amber, 4 lavender. Status colours are reserved for salon health. */
.mw76-frame {
    --chart-1: #4f53c9; --chart-2: #e6007a; --chart-3: #e08a00; --chart-4: #8f7fc4; --chart-other: #b6b8c6;
    --chart-grid: rgb(21 21 25 / 8%); --chart-axis: rgb(21 21 25 / 22%);
    --status-good: #0ca30c; --status-warning: #fab219; --status-inactive: #9aa0b4;
    --status-good-ink: #0d7a52; --status-warning-ink: #8a5300;
}
[data-theme="dark"] .mw76-frame {
    --chart-1: #6f73e8; --chart-2: #ec2f8a; --chart-3: #c27a0c; --chart-4: #8b78cf; --chart-other: #5c5f72;
    --chart-grid: rgb(255 255 255 / 7%); --chart-axis: rgb(255 255 255 / 18%);
    --status-inactive: #6b6f84; --status-good-ink: #5be0a8; --status-warning-ink: #ffc46b;
}

/* Hero: the sidebar's indigo gradient with brand glows, the page title and the one headline figure. */
.mw76-frame .mw76-root .mw76-p-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; gap: 1.5rem;
    margin-block-end: 1.25rem; padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: 1.75rem; color: #fff;
    background:
        radial-gradient(55% 95% at 100% 0%, rgb(255 0 128 / 42%), transparent 62%),
        radial-gradient(45% 80% at 0% 100%, rgb(255 166 33 / 26%), transparent 62%),
        linear-gradient(135deg, #202547 0%, #282b8b 55%, #3a1f6e 100%);
    box-shadow: 0 24px 60px rgb(40 43 139 / 26%);
}
.mw76-frame .mw76-root .mw76-p-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55; pointer-events: none;
    background-image: radial-gradient(rgb(255 255 255 / 14%) 1px, transparent 1px); background-size: 18px 18px;
    mask-image: linear-gradient(to left, #000, transparent 70%);
}
.mw76-frame .mw76-root .mw76-p-hero-copy { display: flex; flex-direction: column; justify-content: center; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-hero-kicker {
    display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; padding: 0.3rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px; background: rgb(255 255 255 / 10%); color: rgb(255 255 255 / 88%); font-size: 0.78rem; font-weight: 700;
}
.mw76-frame .mw76-root .mw76-p-hero-kicker svg { inline-size: 0.95rem; block-size: 0.95rem; color: #ffc46b; }
.mw76-frame .mw76-root .mw76-p-hero h1 { margin: 0.85rem 0 0.5rem; color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.mw76-frame .mw76-root .mw76-p-hero-copy > p { margin: 0; max-inline-size: 40rem; color: rgb(255 255 255 / 78%); line-height: 1.7; }
.mw76-frame .mw76-root .mw76-p-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1.4rem; }
.mw76-frame .mw76-root .mw76-p-hero-button {
    display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding: 0.55rem 1.1rem;
    border: 1px solid rgb(255 255 255 / 26%); border-radius: 999px; background: rgb(255 255 255 / 10%); color: #fff; font-weight: 800; font-size: 0.88rem; text-decoration: none;
    transition: background-color 0.18s var(--bold-ease), transform 0.18s var(--bold-ease);
}
.mw76-frame .mw76-root .mw76-p-hero-button:hover { background: rgb(255 255 255 / 20%); color: #fff; transform: translateY(-2px); }
.mw76-frame .mw76-root .mw76-p-hero-button--solid { border-color: transparent; background: #fff; color: #c90065; box-shadow: 0 10px 26px rgb(0 0 0 / 22%); }
.mw76-frame .mw76-root .mw76-p-hero-button--solid:hover { background: #fff; color: #a60053; }
.mw76-frame .mw76-root .mw76-p-hero-button svg { inline-size: 1.05rem; block-size: 1.05rem; }
.mw76-frame .mw76-root .mw76-p-hero-button:focus-visible { outline: 3px solid #ffc46b; outline-offset: 3px; }
.mw76-frame .mw76-root .mw76-p-hero-figure {
    position: relative; display: flex; flex-direction: column; min-inline-size: 0; padding: 1.2rem 1.25rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.35rem; background: rgb(255 255 255 / 9%); backdrop-filter: blur(8px);
}
.mw76-frame .mw76-root .mw76-p-hero-figure-label { color: rgb(255 255 255 / 78%); font-size: 0.85rem; font-weight: 700; }
.mw76-frame .mw76-root .mw76-p-hero-number { margin-block: 0.15rem 0.25rem; color: #fff; font-size: clamp(3rem, 5.5vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.mw76-frame .mw76-root .mw76-p-hero-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; color: rgb(255 255 255 / 82%); font-size: 0.82rem; }
.mw76-frame .mw76-root .mw76-p-hero-delta b { color: #fff; }
.mw76-frame .mw76-root .mw76-p-hero-trend { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgb(255 255 255 / 12%); font-weight: 700; }
.mw76-frame .mw76-root .mw76-p-hero-trend svg { inline-size: 0.9rem; block-size: 0.9rem; }
.mw76-frame .mw76-root .mw76-p-hero-trend.is-up { color: #7dffc4; }
.mw76-frame .mw76-root .mw76-p-hero-trend.is-down { color: #ffb4cf; }
.mw76-frame .mw76-root .mw76-p-hero-sparkwrap { position: relative; display: block; block-size: 6rem; margin-block-start: auto; padding-block-start: 0; translate: 0 -0.25rem; }
.mw76-frame .mw76-root .mw76-p-hero-figure > .mw76-p-hero-delta { margin-block-end: 0.85rem; }
.mw76-frame .mw76-root .mw76-p-hero-spark { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.mw76-frame .mw76-root .mw76-p-hero-spark-area { fill: url(#dashboard-spark-fill); }
.mw76-frame .mw76-root .mw76-p-hero-spark-line {
    fill: none; stroke: #ff7ab8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
    stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: mw-dash-draw 1.4s var(--bold-ease) 0.15s forwards;
}
.mw76-frame .mw76-root .mw76-p-hero-spark-end {
    /* --x is physical: the SVG path is already mirrored for right-to-left reading. */
    position: absolute; left: var(--x); top: var(--y); inline-size: 12px; block-size: 12px;
    border: 2px solid #282b8b; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgb(255 122 184 / 30%);
    translate: -50% -50%;
}
@keyframes mw-dash-draw { to { stroke-dashoffset: 0; } }

/* KPI row on the overview: stat tiles with a share meter. */
.mw76-frame .mw76-root .mw76-p-dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mw76-frame .mw76-root .mw76-p-dash-kpi { position: relative; overflow: hidden; transition: transform 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease); }
.mw76-frame .mw76-root a.mw76-p-dash-kpi:hover { transform: translateY(-3px); box-shadow: var(--bold-lift); }
.mw76-frame .mw76-root .mw76-p-dash-kpi::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--bold-grad); opacity: 0.85; }
.mw76-frame .mw76-root .mw76-p-dash-kpi .mw76-p-stat-value { font-size: 1.9rem; }
.mw76-frame .mw76-root .mw76-p-meter { grid-column: 1 / -1; display: block; block-size: 6px; margin-block-start: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-meter > span { display: block; inline-size: var(--v); block-size: 100%; border-radius: 999px; background: var(--bold-grad); }

/* Overview layout: a wide chart beside a stack of short panels, then two-up panels. */
.mw76-frame .mw76-root .mw76-p-dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1.25rem; }
.mw76-frame .mw76-root .mw76-p-dash-span2 { grid-column: span 2; }
.mw76-frame .mw76-root .mw76-p-dash-stack { display: grid; gap: 1.25rem; min-inline-size: 0; }
.mw76-frame .mw76-root :is(.mw76-p-dash-grid, .mw76-p-dash-stack) > .mw76-p-panel { margin: 0; min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-link-more { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--mw76-link); font-size: 0.82rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-p-link-more svg { inline-size: 1rem; block-size: 1rem; }
.mw76-frame .mw76-root .mw76-p-link-more .mw76-directional-icon:dir(rtl) { transform: scaleX(-1); }
.mw76-frame .mw76-root .mw76-p-count--hot { background: var(--bold-grad); color: #fff; }
.mw76-frame .mw76-root .mw76-p-segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-segmented a { display: inline-flex; align-items: center; min-block-size: 36px; padding: 0.3rem 0.85rem; border-radius: 999px; color: var(--mw76-text-muted); font-size: 0.8rem; font-weight: 800; text-decoration: none; }
.mw76-frame .mw76-root .mw76-p-segmented a[aria-current="page"] { background: var(--mw76-surface); color: var(--mw76-text); box-shadow: 0 2px 8px rgb(40 43 139 / 14%); }

/* Legend: always present for multi-series charts; text in ink tokens, identity on the swatch. */
.mw76-frame .mw76-root .mw76-p-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0 0 0.25rem; padding: 0; list-style: none; color: var(--mw76-text-muted); font-size: 0.8rem; }
.mw76-frame .mw76-root .mw76-p-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.mw76-frame .mw76-root .mw76-p-legend b { color: var(--mw76-text); }
.mw76-frame .mw76-root .mw76-p-swatch { display: inline-block; inline-size: 0.7rem; block-size: 0.7rem; border-radius: 3px; }
.mw76-frame .mw76-root .mw76-p-swatch--s1, .mw76-frame .mw76-root .mw76-p-seg--s1 { background: var(--chart-1); }
.mw76-frame .mw76-root .mw76-p-swatch--s2, .mw76-frame .mw76-root .mw76-p-seg--s2 { background: var(--chart-2); }
.mw76-frame .mw76-root .mw76-p-swatch--s3, .mw76-frame .mw76-root .mw76-p-seg--s3 { background: var(--chart-3); }
.mw76-frame .mw76-root .mw76-p-swatch--s4, .mw76-frame .mw76-root .mw76-p-seg--s4 { background: var(--chart-4); }
.mw76-frame .mw76-root .mw76-p-swatch--other, .mw76-frame .mw76-root .mw76-p-seg--other { background: var(--chart-other); }

/* Column chart: HTML columns (crisp text, mirrors with the reading direction), hairline grid, 2px gaps, rounded data end. */
.mw76-frame .mw76-root .mw76-p-chartcard { container-type: inline-size; }
.mw76-frame .mw76-root .mw76-p-columns { position: relative; block-size: 15rem; margin-block-start: 1rem; }
/* Month labels thin out by the card width, not the viewport (the same chart sits in wide and narrow cards). */
@container (max-width: 620px) { .mw76-frame .mw76-root .mw76-p-columns.is-dense .mw76-p-column:nth-child(even) .mw76-p-column-label { visibility: hidden; } }
@container (max-width: 360px) { .mw76-frame .mw76-root .mw76-p-columns.is-dense .mw76-p-column:not(:nth-child(3n+1)) .mw76-p-column-label { visibility: hidden; } }
.mw76-frame .mw76-root .mw76-p-columns--single { block-size: 11rem; }
.mw76-frame .mw76-root .mw76-p-columns-grid { position: absolute; inset: 0 0 1.75rem; }
.mw76-frame .mw76-root .mw76-p-columns-grid > span { position: absolute; inset-inline: 2.5rem 0; inset-block-end: var(--at); border-block-start: 1px solid var(--chart-grid); }
.mw76-frame .mw76-root .mw76-p-columns-grid > span:last-child { border-block-start-color: var(--chart-axis); }
.mw76-frame .mw76-root .mw76-p-columns-grid b { position: absolute; inset-inline-end: calc(100% + 0.5rem); inset-block-start: -0.6rem; color: var(--mw76-text-muted); font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-p-columns-plot { position: absolute; inset-block: 0; inset-inline: 2.5rem 0; display: flex; }
.mw76-frame .mw76-root .mw76-p-column { position: relative; flex: 1 1 0; display: grid; grid-template-rows: minmax(0, 1fr) 1.75rem; justify-items: center; min-inline-size: 0; border-radius: 0.6rem; outline: none; }
.mw76-frame .mw76-root .mw76-p-column::before { content: ""; position: absolute; inset: 0 12% 1.75rem; border-radius: 0.6rem; background: var(--bold-tile); opacity: 0; transition: opacity 0.15s var(--bold-ease); }
.mw76-frame .mw76-root .mw76-p-column:is(:hover, :focus-visible)::before { opacity: 1; }
.mw76-frame .mw76-root .mw76-p-column:focus-visible { box-shadow: 0 0 0 2px var(--mw76-focus); }
.mw76-frame .mw76-root .mw76-p-column-stack {
    position: relative; align-self: end; display: flex; flex-direction: column-reverse; gap: 2px;
    inline-size: min(24px, 62%); block-size: var(--h); transform-origin: bottom; animation: mw-col-grow 0.7s var(--bold-ease) both;
}
.mw76-frame .mw76-root .mw76-p-seg { flex: var(--g) 1 0; min-block-size: 3px; }
.mw76-frame .mw76-root .mw76-p-column-stack > :last-child { border-start-start-radius: 4px; border-start-end-radius: 4px; }
.mw76-frame .mw76-root .mw76-p-column-label { align-self: center; color: var(--mw76-text-muted); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
@keyframes mw-col-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Share bar (salon health): one 100% bar, status colours with icon and label beside it. */
.mw76-frame .mw76-root .mw76-p-sharebar { display: flex; gap: 2px; block-size: 14px; margin-block: 0.25rem 1rem; overflow: hidden; border-radius: 999px; background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-sharebar-seg { flex: 0 0 var(--w); min-inline-size: 8px; outline: none; transform-origin: left center; animation: mw-bar-grow 0.8s var(--bold-ease) both; }
.mw76-frame .mw76-root .mw76-p-sharebar-seg:focus-visible { box-shadow: inset 0 0 0 2px var(--mw76-focus); }
.mw76-frame .mw76-root .mw76-p-sharebar-seg--good { background: var(--status-good); }
.mw76-frame .mw76-root .mw76-p-sharebar-seg--warning { background: var(--status-warning); }
.mw76-frame .mw76-root .mw76-p-sharebar-seg--inactive { background: var(--status-inactive); }
.mw76-frame .mw76-root .mw76-p-statuslist { margin: 0; padding: 0; list-style: none; }
.mw76-frame .mw76-root .mw76-p-statuslist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 2.8rem; align-items: center; gap: 0.6rem; padding-block: 0.5rem; border-block-start: 1px solid var(--bold-line); color: var(--mw76-text); font-size: 0.88rem; }
.mw76-frame .mw76-root .mw76-p-statuslist svg { inline-size: 1.05rem; block-size: 1.05rem; }
.mw76-frame .mw76-root .mw76-p-statuslist .is-good { color: var(--status-good-ink); }
.mw76-frame .mw76-root .mw76-p-statuslist .is-warning { color: var(--status-warning-ink); }
.mw76-frame .mw76-root .mw76-p-statuslist .is-inactive { color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-p-statuslist small { color: var(--mw76-text-muted); font-size: 0.75rem; text-align: end; }
@keyframes mw-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mw76-frame .mw76-root :is(.mw76-p-sharebar-seg, .mw76-p-barlist-track > span):dir(rtl) { transform-origin: right center; }

/* Moderation queue: what is waiting, each row a link. */
.mw76-frame .mw76-root .mw76-p-queue { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.mw76-frame .mw76-root .mw76-p-queue a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-block-size: 44px; padding: 0.5rem 0.75rem; border-radius: 0.85rem; background: var(--bold-tile); color: var(--mw76-text); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.mw76-frame .mw76-root .mw76-p-queue a:hover { background: var(--mw76-surface-tint); }
.mw76-frame .mw76-root .mw76-p-queue svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--mw76-text-muted); }
.mw76-frame .mw76-root .mw76-p-queue b { min-inline-size: 1.9rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--mw76-surface); color: var(--mw76-text-muted); text-align: center; font-size: 0.8rem; }
.mw76-frame .mw76-root .mw76-p-queue .is-waiting svg { color: var(--mw76-color-action); }
.mw76-frame .mw76-root .mw76-p-queue .is-waiting b { background: var(--bold-grad); color: #fff; }
.mw76-frame .mw76-root .mw76-p-allclear { display: grid; justify-items: center; gap: 0.4rem; padding: 1.25rem 0.75rem; border-radius: 1rem; background: color-mix(in srgb, var(--mw76-success) 8%, var(--mw76-surface)); color: var(--mw76-text); text-align: center; }
.mw76-frame .mw76-root .mw76-p-allclear svg { inline-size: 1.8rem; block-size: 1.8rem; color: var(--bold-pink); }

/* Bar list and leaderboard: label, bar to scale, value at the tip. */
.mw76-frame .mw76-root :is(.mw76-p-barlist, .mw76-p-leaderboard) { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.mw76-frame .mw76-root :is(.mw76-p-barlist, .mw76-p-leaderboard) > li { display: grid; grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 1.6fr) 2.4rem; align-items: center; gap: 0.75rem; padding: 0.5rem 0.35rem; border-radius: 0.75rem; outline: none; }
.mw76-frame .mw76-root .mw76-p-leaderboard > li { grid-template-columns: 1.9rem minmax(6.5rem, 1fr) minmax(0, 1.4fr) 2.4rem; }
.mw76-frame .mw76-root :is(.mw76-p-barlist, .mw76-p-leaderboard) > li:is(:hover, :focus-visible) { background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-barlist-label { min-inline-size: 0; }
.mw76-frame .mw76-root .mw76-p-barlist-label b { display: block; overflow: hidden; color: var(--mw76-text); font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.mw76-frame .mw76-root .mw76-p-barlist-label small { display: block; color: var(--mw76-text-muted); font-size: 0.72rem; }
.mw76-frame .mw76-root .mw76-p-barlist-track { display: block; block-size: 10px; overflow: hidden; border-radius: 999px; background: var(--bold-tile); outline: none; }
.mw76-frame .mw76-root .mw76-p-barlist-track > span { display: block; inline-size: var(--v); block-size: 100%; border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--chart-2); transform-origin: left center; animation: mw-bar-grow 0.8s var(--bold-ease) both; }
.mw76-frame .mw76-root .mw76-p-barlist-track--indigo > span { background: var(--chart-1); }
.mw76-frame .mw76-root .mw76-p-barlist-value { color: var(--mw76-text); font-size: 0.88rem; font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; }
.mw76-frame .mw76-root .mw76-p-rank { display: grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; background: var(--bold-tile); color: var(--mw76-text-muted); font-size: 0.78rem; font-weight: 800; }
.mw76-frame .mw76-root .mw76-p-leaderboard > li:first-child .mw76-p-rank { background: var(--bold-grad); color: #fff; }

/* Discovery funnel (marketplace analytics): one shared scale, icon and step number beside each bar. */
.mw76-frame .mw76-root .mw76-p-funnel { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.mw76-frame .mw76-root .mw76-p-funnel > li { display: grid; grid-template-columns: auto minmax(8rem, 1fr) minmax(0, 2.2fr) 3.2rem; align-items: center; gap: 0.85rem; padding: 0.55rem 0.75rem; border: 1px solid var(--bold-line); border-radius: 1rem; background: var(--mw76-surface); outline: none; }
.mw76-frame .mw76-root .mw76-p-funnel > li:is(:hover, :focus-visible) { border-color: var(--bold-pink); background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-funnel-icon { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 0.8rem; background: var(--mw76-surface-tint); color: var(--mw76-color-action); }
.mw76-frame .mw76-root .mw76-p-funnel-icon svg { inline-size: 1.1rem; block-size: 1.1rem; }
.mw76-frame .mw76-root .mw76-p-funnel-label { display: flex; align-items: center; gap: 0.5rem; color: var(--mw76-text); font-size: 0.88rem; font-weight: 700; }
.mw76-frame .mw76-root .mw76-p-funnel-label small { display: grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: var(--bold-tile); color: var(--mw76-text-muted); font-size: 0.7rem; }
.mw76-frame .mw76-root .mw76-p-funnel-track { display: block; block-size: 14px; overflow: hidden; border-radius: 999px; background: var(--bold-tile); }
.mw76-frame .mw76-root .mw76-p-funnel-track > span { display: block; inline-size: var(--v); block-size: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--chart-2), #ff5aa8); transform-origin: left center; animation: mw-bar-grow 0.8s var(--bold-ease) both; }
.mw76-frame .mw76-root .mw76-p-funnel-track > span:dir(rtl) { transform-origin: right center; background: linear-gradient(270deg, var(--chart-2), #ff5aa8); }
.mw76-frame .mw76-root .mw76-p-funnel > li > strong { color: var(--mw76-text); font-size: 1.05rem; font-weight: 800; text-align: end; }
@media (max-width: 575.98px) { .mw76-frame .mw76-root .mw76-p-funnel > li { grid-template-columns: auto minmax(0, 1fr) auto; } .mw76-frame .mw76-root .mw76-p-funnel-track { grid-column: 1 / -1; } }

/* Shortcut tiles: every platform destination, colour-coded by area. */
.mw76-frame .mw76-root .mw76-p-workspace.mw76-p-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.9rem; }
.mw76-frame .mw76-root .mw76-p-shortcut {
    --tone-bg: rgb(255 0 128 / 12%); --tone-fg: var(--mw76-color-action);
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.2rem 0.85rem; padding: 1rem;
    border: 1px solid var(--bold-line); border-radius: 1.15rem; background: var(--mw76-surface); color: var(--mw76-text); text-decoration: none;
    transition: transform 0.2s var(--bold-ease), box-shadow 0.2s var(--bold-ease), border-color 0.2s var(--bold-ease);
}
.mw76-frame .mw76-root .mw76-p-shortcut:hover { transform: translateY(-3px); border-color: var(--tone-fg); box-shadow: var(--bold-lift); color: var(--mw76-text); }
.mw76-frame .mw76-root .mw76-p-shortcut--indigo { --tone-bg: rgb(40 43 139 / 10%); --tone-fg: var(--bold-indigo); }
.mw76-frame .mw76-root .mw76-p-shortcut--amber { --tone-bg: var(--bold-chip-bg); --tone-fg: var(--bold-chip-fg); }
[data-theme="dark"] .mw76-frame .mw76-root .mw76-p-shortcut--indigo { --tone-bg: rgb(140 146 255 / 16%); --tone-fg: #b9bdff; }
.mw76-frame .mw76-root .mw76-p-shortcut-icon { grid-row: span 2; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 0.9rem; background: var(--tone-bg); color: var(--tone-fg); }
.mw76-frame .mw76-root .mw76-p-shortcut-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.mw76-frame .mw76-root .mw76-p-shortcut strong { font-size: 0.95rem; }
.mw76-frame .mw76-root .mw76-p-shortcut small { overflow: hidden; color: var(--mw76-text-muted); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }

/* Shared chart tooltip (appended to body by maw3ed-admin-charts.js). */
body .mw76-p-chart-tooltip { position: fixed; z-index: 2000; max-inline-size: 20rem; padding: 0.45rem 0.75rem; border-radius: 0.65rem; background: #151519; color: #fff; font-size: 0.78rem; font-weight: 600; line-height: 1.5; box-shadow: 0 12px 32px rgb(0 0 0 / 28%); pointer-events: none; }
[data-theme="dark"] body .mw76-p-chart-tooltip { background: #f4f4f8; color: #151519; }

@media (max-width: 1199.98px) {
    .mw76-frame .mw76-root .mw76-p-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mw76-frame .mw76-root .mw76-p-dash-span2 { grid-column: 1 / -1; }
    .mw76-frame .mw76-root .mw76-p-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .mw76-frame .mw76-root .mw76-p-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .mw76-frame .mw76-root .mw76-p-dash-grid { grid-template-columns: minmax(0, 1fr); }
    .mw76-frame .mw76-root .mw76-p-hero { border-radius: 1.35rem; }
    .mw76-frame .mw76-root .mw76-p-hero-actions > * { flex: 1 1 auto; justify-content: center; }
    .mw76-frame .mw76-root .mw76-p-columns-grid > span { inset-inline-start: 2rem; }
    .mw76-frame .mw76-root .mw76-p-columns-plot { inset-inline-start: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mw76-frame .mw76-root :is(.mw76-p-column-stack, .mw76-p-sharebar-seg, .mw76-p-barlist-track > span, .mw76-p-funnel-track > span) { animation: none; }
    .mw76-frame .mw76-root .mw76-p-hero-spark-line { animation: none; stroke-dashoffset: 0; }
    .mw76-frame .mw76-root :is(.mw76-p-hero-button, .mw76-p-dash-kpi, .mw76-p-shortcut) { transition: none; }
}

} /* end @media screen */