:root {
    --dashperf-client-navy: #0b1d36;
    --dashperf-client-blue: #0d6efd;
    --dashperf-client-paper: #f6f8fb;
    --dashperf-client-line: #d8e0ea;
}

.design-surface-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 38px;
    padding: .42rem .7rem;
    border: 1px solid rgba(13, 66, 105, .16);
    border-radius: 10px;
    color: #174360;
    background: rgba(255, 255, 255, .72);
    font: inherit;
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.design-surface-toggle:hover {
    border-color: #087dcc;
    color: #075e9b;
    background: #edf8ff;
    transform: translateY(-1px);
}

.design-surface-toggler {
    position: fixed;
    top: 20px;
    right: 260px;
    z-index: 1000 !important;
}

html[data-dashperf-surface="vitrine"] .design-surface-toggler .icon {
    color: #087dcc !important;
    background: #e9f8ff !important;
}

/* The client direction keeps the black, white, grey and blue Dashperf palette. */
html[data-dashperf-surface="client"] .mock-public-body {
    --vitrine-navy: #0b1d36;
    --vitrine-blue: #0d6efd;
    --vitrine-cyan: #0d6efd;
    --vitrine-lime: #c8e6ff;
    --vitrine-green: #0d6efd;
    --vitrine-orange: #3a80cf;
    --vitrine-paper: #ffffff;
    --vitrine-ink: #10233f;
    --vitrine-muted: #5d6d82;
    --vitrine-line: #dce4ee;
    background: linear-gradient(180deg, #f9fbfd 0%, #eff4f8 100%);
}

html[data-dashperf-surface="client"] .mock-public-nav--site .mock-button--primary,
html[data-dashperf-surface="client"] .mock-button--lime {
    color: #fff;
    background: #0d6efd;
    box-shadow: none;
}

html[data-dashperf-surface="client"] .mock-button--lime:hover,
html[data-dashperf-surface="client"] .mock-public-nav--site .mock-button--primary:hover {
    color: #fff;
    background: #0b5ed7;
}

html[data-dashperf-surface="client"] .vitrine-page-hero,
html[data-dashperf-surface="client"] .vitrine-home-hero,
html[data-dashperf-surface="client"] .public-product-hero,
html[data-dashperf-surface="client"] .public-order-intro {
    background: linear-gradient(135deg, #0b1d36, #143f70);
}

html[data-dashperf-surface="client"] .vitrine-solutions-mega {
    border-color: #d7e1ec;
    background: #fff;
    box-shadow: 0 18px 42px rgba(11, 29, 54, .16);
}

html[data-dashperf-surface="client"] .design-surface-toggle {
    border-color: #bad0e7;
    color: #0d4d87;
    background: #eff7ff;
}

/* The vitrine direction is deliberately broader and applies to existing client pages too. */
html[data-dashperf-surface="vitrine"] {
    --bs-primary: #087dcc;
    --bs-primary-rgb: 8, 125, 204;
    --bs-link-color: #087dcc;
    --bs-link-hover-color: #055f9d;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) {
    background:
        radial-gradient(circle at 9% 4%, rgba(17, 168, 216, .13), transparent 25rem),
        radial-gradient(circle at 94% 8%, rgba(183, 243, 92, .12), transparent 23rem),
        #edf5f9;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .card,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .modal-content,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .list-group-item,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .table-responsive {
    color: #102a42 !important;
    background-color: rgba(255, 255, 255, .94) !important;
    border-color: rgba(8, 89, 139, .16) !important;
    box-shadow: 0 15px 38px rgba(15, 61, 91, .08);
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .card,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .modal-content {
    border-radius: 18px;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .btn-primary,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .bg-primary {
    border-color: #087dcc !important;
    background-color: #087dcc !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .navbar-vertical {
    background:
        radial-gradient(circle at 18% 0%, rgba(17, 168, 216, .34), transparent 19rem),
        linear-gradient(180deg, #061629, #093e5c) !important;
    border-right: 1px solid rgba(112, 205, 237, .18) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav .navbar-brand,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav .nav-link,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav #nav-titre,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav .text-uppercase {
    color: rgba(244, 251, 255, .86) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav .nav-link.active,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .navbar-vertical .navbar-nav > .nav-item .nav-link.active {
    border: 1px solid rgba(183, 243, 92, .45) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #087dcc, #0b5e78) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav .nav-link.active .icon,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav .nav-link.active .icon-shape {
    color: #08243c !important;
    background: #b7f35c !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .form-control,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .form-select,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) textarea,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) input {
    color: #102a42 !important;
    background: #fff !important;
    border-color: #c9dae5 !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .table,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .table td,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .table th,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .table-light,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .table-light th {
    color: #102a42 !important;
    background-color: transparent !important;
    border-color: #d9e5ec !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .table-light,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .card-header.bg-white {
    background: linear-gradient(135deg, #edf9ff, #f8ffed) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .header-action-btn .icon,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .notification-button .icon {
    color: #087dcc !important;
    background: #effaff !important;
}

html[data-dashperf-surface="vitrine"] .design-surface-toggle {
    border-color: rgba(8, 125, 204, .25);
    color: #076397;
    background: #e9f8ff;
}

@media (max-width: 720px) {
    .design-surface-toggle span { display: none; }
    .design-surface-toggle { width: 38px; padding: .42rem; }
}

/*
 * The switch keeps each navigation model in place: the public site remains
 * horizontal and the signed-in portal remains vertical. It only changes the
 * colour system and the shape of the content objects.
 */
html[data-dashperf-surface="client"] .mock-public-body .mock-public-brand--wordmark {
    border-radius: 10px;
    box-shadow: none;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro {
    border: 1px solid rgba(24, 75, 125, .15);
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(11, 29, 54, .13);
}

html[data-dashperf-surface="client"] .mock-public-body .mock-universe-card,
html[data-dashperf-surface="client"] .mock-public-body .mock-public-card,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-card,
html[data-dashperf-surface="client"] .mock-public-body .public-product-highlights > div,
html[data-dashperf-surface="client"] .mock-public-body .public-product-route,
html[data-dashperf-surface="client"] .mock-public-body .public-order-form-shell {
    border-color: #d9e3ed;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(11, 29, 54, .07);
}

html[data-dashperf-surface="client"] .mock-public-body .mock-button--lime,
html[data-dashperf-surface="client"] .mock-public-body .mock-button--primary {
    border-radius: 9px;
}

html[data-dashperf-surface="client"] .mock-public-body .public-product-offer-card,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro aside {
    border-radius: 16px;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .navbar-vertical {
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(7, 29, 50, .16) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .card,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .modal-content,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .list-group-item,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .table-responsive {
    border-radius: 18px;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .btn,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .form-control,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .form-select {
    border-radius: 10px;
}

/*
 * Client direction on the public site: keep the public horizontal header, but
 * give the content the same modular dashboard language as the signed-in area.
 */
html[data-dashperf-surface="client"] .mock-public-body {
    background:
        radial-gradient(circle at 8% 6%, rgba(13, 110, 253, .12), transparent 29rem),
        radial-gradient(circle at 94% 8%, rgba(30, 173, 108, .10), transparent 27rem),
        linear-gradient(180deg, #f7f9fc, #edf3f8) !important;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-shell {
    width: min(1440px, calc(100% - 3rem));
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-nav-links a {
    border-radius: 9px;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-nav-links a:hover {
    background: #eef5ff;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro {
    color: #10253f !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(241, 247, 252, .98)) !important;
    box-shadow: 0 20px 46px rgba(11, 29, 54, .11) !important;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero::before,
html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero::after,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero::before,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero::after,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero::before,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero::after,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro::before,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro::after {
    display: none;
}

html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero h1,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero h1,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro h1,
html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero h1 {
    color: #10253f !important;
}

html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero p,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero p,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro p,
html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero p {
    color: #5d6d82 !important;
}

html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero .mock-button--outline,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero .mock-button--outline {
    border-color: #b8c9da;
    color: #174360;
    background: #fff;
}

html[data-dashperf-surface="client"] .mock-public-body .vitrine-hero-note,
html[data-dashperf-surface="client"] .mock-public-body .public-product-offer-card,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro aside {
    border-color: #d9e4ee !important;
    color: #10253f !important;
    background: #f6f9fc !important;
    box-shadow: 0 10px 24px rgba(11, 29, 54, .06);
    backdrop-filter: none;
}

html[data-dashperf-surface="client"] .mock-public-body .vitrine-hero-note strong,
html[data-dashperf-surface="client"] .mock-public-body .public-product-offer-card > strong,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro aside > strong {
    color: #10253f !important;
}

html[data-dashperf-surface="client"] .mock-public-body .vitrine-hero-note span,
html[data-dashperf-surface="client"] .mock-public-body .public-product-offer-card > span,
html[data-dashperf-surface="client"] .mock-public-body .public-product-offer-card > small,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro aside > span {
    color: #6b7c91 !important;
}

html[data-dashperf-surface="client"] .mock-public-body .vitrine-hero-note i,
html[data-dashperf-surface="client"] .mock-public-body .public-product-offer-card > b {
    color: #0d6efd !important;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-universe-card,
html[data-dashperf-surface="client"] .mock-public-body .mock-public-card,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-card,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-contact-channel,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-legal-card,
html[data-dashperf-surface="client"] .mock-public-body .public-product-highlights > div,
html[data-dashperf-surface="client"] .mock-public-body .public-product-route,
html[data-dashperf-surface="client"] .mock-public-body .public-order-form-shell {
    border: 1px solid #d9e4ee;
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 28px rgba(11, 29, 54, .07);
}

/* The client navigation stays vertical in both directions; never replace it with a public header. */
@media (min-width: 769px) {
    html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) #sidenav-main.sidenav,
    html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) #sidenav-main.sidenav.closed,
    html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) #sidenav-main.sidenav.open {
        display: flex !important;
        flex-direction: column;
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) #main-content.main-content {
        margin-left: 250px !important;
    }
}

@media (max-width: 720px) {
    html[data-dashperf-surface="client"] .mock-public-body .mock-public-shell {
        width: calc(100% - 1.25rem);
    }

}

/*
 * The vitrine is now the default signed-in direction. The former client skin
 * remains available only as a visual comparison, not as an alternate layout.
 */
html[data-dashperf-surface="vitrine"] {
    --vitrine-navy: #071b31;
    --vitrine-blue: #176ca8;
    --vitrine-cyan: #4a9dcc;
    --vitrine-lime: #efb24d;
    --vitrine-green: #337fae;
    --vitrine-orange: #df7959;
    --vitrine-paper: #ffffff;
    --vitrine-ink: #10283d;
    --vitrine-muted: #61758a;
    --vitrine-line: #d6e1eb;
    --vitrine-canvas: #eef4f7;
    --vitrine-glow-one: rgba(74, 157, 204, .16);
    --vitrine-glow-two: rgba(239, 178, 77, .12);
    --vitrine-side-geometry-one: rgba(74, 157, 204, .26);
    --vitrine-side-geometry-two: rgba(239, 178, 77, .16);
    --vitrine-side-from: #071b31;
    --vitrine-side-to: #0d4461;
    --vitrine-card: linear-gradient(145deg, rgba(255, 255, 255, .98) 0 72%, rgba(228, 242, 247, .98) 72.2% 100%);
    --vitrine-card-border: rgba(23, 108, 168, .17);
    --vitrine-card-header: rgba(74, 157, 204, .09);
    --vitrine-icon-pale: #edf7fb;
    --vitrine-card-shadow: rgba(10, 51, 76, .09);
    --vitrine-rail-shadow: rgba(7, 27, 49, .20);
    --vitrine-rail-border: rgba(74, 157, 204, .22);
    --vitrine-active-to: #0f5372;
    --vitrine-active-border: rgba(239, 178, 77, .52);
    --vitrine-focus-ring: rgba(74, 157, 204, .15);
    --bs-primary: var(--vitrine-blue);
    --bs-link-color: var(--vitrine-blue);
    --bs-link-hover-color: var(--vitrine-navy);
}

html[data-dashperf-surface="vitrine"][data-dashperf-palette="cobalt"] {
    --vitrine-navy: #111633;
    --vitrine-blue: #4d49df;
    --vitrine-cyan: #8aa8ff;
    --vitrine-lime: #f0be62;
    --vitrine-green: #6c8de9;
    --vitrine-orange: #d76573;
    --vitrine-ink: #1a2146;
    --vitrine-muted: #68729a;
    --vitrine-line: #dce1f4;
    --vitrine-canvas: #f2f4ff;
    --vitrine-glow-one: rgba(77, 73, 223, .15);
    --vitrine-glow-two: rgba(240, 190, 98, .12);
    --vitrine-side-geometry-one: rgba(138, 168, 255, .25);
    --vitrine-side-geometry-two: rgba(240, 190, 98, .16);
    --vitrine-side-from: #111633;
    --vitrine-side-to: #363b82;
    --vitrine-card: linear-gradient(145deg, rgba(255, 255, 255, .98) 0 66%, rgba(229, 233, 255, .98) 66.2% 100%);
    --vitrine-card-border: rgba(77, 73, 223, .17);
    --vitrine-card-header: rgba(138, 168, 255, .14);
    --vitrine-icon-pale: #edf0ff;
    --vitrine-card-shadow: rgba(31, 33, 104, .13);
    --vitrine-rail-shadow: rgba(17, 22, 51, .26);
    --vitrine-rail-border: rgba(138, 168, 255, .30);
    --vitrine-active-to: #222864;
    --vitrine-active-border: rgba(240, 190, 98, .58);
    --vitrine-focus-ring: rgba(77, 73, 223, .18);
}

html[data-dashperf-surface="vitrine"][data-dashperf-palette="signal"] {
    --vitrine-navy: #151d2b;
    --vitrine-blue: #2675bb;
    --vitrine-cyan: #78b9eb;
    --vitrine-lime: #ef7565;
    --vitrine-green: #4b8dbf;
    --vitrine-orange: #e39a57;
    --vitrine-ink: #1c2a3b;
    --vitrine-muted: #657889;
    --vitrine-line: #d9e3eb;
    --vitrine-canvas: #f4f6f9;
    --vitrine-glow-one: rgba(38, 117, 187, .14);
    --vitrine-glow-two: rgba(239, 117, 101, .13);
    --vitrine-side-geometry-one: rgba(120, 185, 235, .24);
    --vitrine-side-geometry-two: rgba(239, 117, 101, .18);
    --vitrine-side-from: #151d2b;
    --vitrine-side-to: #274766;
    --vitrine-card: linear-gradient(145deg, rgba(255, 255, 255, .98) 0 71%, rgba(252, 234, 230, .98) 71.2% 100%);
    --vitrine-card-border: rgba(38, 117, 187, .17);
    --vitrine-card-header: rgba(120, 185, 235, .13);
    --vitrine-icon-pale: #eef7fd;
    --vitrine-card-shadow: rgba(27, 47, 71, .10);
    --vitrine-rail-shadow: rgba(21, 29, 43, .23);
    --vitrine-rail-border: rgba(120, 185, 235, .28);
    --vitrine-active-to: #244967;
    --vitrine-active-border: rgba(239, 117, 101, .62);
    --vitrine-focus-ring: rgba(38, 117, 187, .18);
}

html[data-dashperf-surface="vitrine"][data-dashperf-palette="graphite"] {
    --vitrine-navy: #0b1018;
    --vitrine-blue: #146fe0;
    --vitrine-cyan: #78bfff;
    --vitrine-lime: #c8ddf5;
    --vitrine-green: #397fc8;
    --vitrine-orange: #6c9fe0;
    --vitrine-ink: #141d2a;
    --vitrine-muted: #637185;
    --vitrine-line: #d8e0e8;
    --vitrine-canvas: #f0f3f6;
    --vitrine-glow-one: rgba(20, 111, 224, .15);
    --vitrine-glow-two: rgba(116, 159, 208, .11);
    --vitrine-side-geometry-one: rgba(120, 191, 255, .23);
    --vitrine-side-geometry-two: rgba(200, 221, 245, .18);
    --vitrine-side-from: #0b1018;
    --vitrine-side-to: #152b48;
    --vitrine-card: linear-gradient(145deg, rgba(255, 255, 255, .99) 0 69%, rgba(229, 236, 244, .98) 69.2% 100%);
    --vitrine-card-border: rgba(20, 111, 224, .16);
    --vitrine-card-header: rgba(120, 191, 255, .12);
    --vitrine-icon-pale: #e8f2ff;
    --vitrine-card-shadow: rgba(12, 22, 35, .12);
    --vitrine-rail-shadow: rgba(9, 14, 22, .27);
    --vitrine-rail-border: rgba(120, 191, 255, .25);
    --vitrine-active-to: #15345b;
    --vitrine-active-border: rgba(120, 191, 255, .62);
    --vitrine-focus-ring: rgba(20, 111, 224, .18);
}

html[data-dashperf-surface="vitrine"][data-dashperf-palette="aurora"] {
    --vitrine-navy: #10203d;
    --vitrine-blue: #0d82b9;
    --vitrine-cyan: #5accc8;
    --vitrine-lime: #f0ad68;
    --vitrine-green: #2b9e9b;
    --vitrine-orange: #dc765b;
    --vitrine-ink: #152a42;
    --vitrine-muted: #617589;
    --vitrine-line: #d6e4e8;
    --vitrine-canvas: #f0f7f7;
    --vitrine-glow-one: rgba(90, 204, 200, .14);
    --vitrine-glow-two: rgba(240, 173, 104, .14);
    --vitrine-side-geometry-one: rgba(90, 204, 200, .25);
    --vitrine-side-geometry-two: rgba(240, 173, 104, .18);
    --vitrine-side-from: #10203d;
    --vitrine-side-to: #0f5970;
    --vitrine-card: linear-gradient(145deg, rgba(255, 255, 255, .99) 0 68%, rgba(230, 246, 244, .98) 68.2% 100%);
    --vitrine-card-border: rgba(13, 130, 185, .17);
    --vitrine-card-header: rgba(90, 204, 200, .11);
    --vitrine-icon-pale: #e5f8f6;
    --vitrine-card-shadow: rgba(13, 61, 77, .10);
    --vitrine-rail-shadow: rgba(9, 39, 55, .24);
    --vitrine-rail-border: rgba(90, 204, 200, .29);
    --vitrine-active-to: #12516e;
    --vitrine-active-border: rgba(240, 173, 104, .58);
    --vitrine-focus-ring: rgba(13, 130, 185, .18);
}

.design-palette-picker {
    position: relative;
    z-index: 1002;
}

.design-palette-picker > summary {
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    min-height: 38px;
    padding: .42rem .62rem;
    border: 1px solid rgba(16, 40, 61, .16);
    border-radius: 10px;
    color: #174360;
    background: rgba(255, 255, 255, .78);
    cursor: pointer;
    font-size: .74rem;
    font-weight: 800;
    list-style: none;
}

.design-palette-picker > summary::-webkit-details-marker { display: none; }
.design-palette-picker[open] > summary { border-color: var(--vitrine-blue); color: var(--vitrine-blue); }

.design-palette-menu {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    display: grid;
    min-width: 210px;
    padding: .45rem;
    border: 1px solid rgba(16, 40, 61, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 38px rgba(7, 27, 49, .18);
}

.design-palette-menu button {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: .55rem;
    width: 100%;
    padding: .55rem .6rem;
    border: 0;
    border-radius: 10px;
    color: #173047;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.design-palette-menu button:hover,
.design-palette-menu button[aria-pressed="true"] { background: #eef6fa; }
.design-palette-menu button strong,
.design-palette-menu button small { display: block; }
.design-palette-menu button strong { font-size: .76rem; }
.design-palette-menu button small { margin-top: .08rem; color: #6b7f91; font-size: .67rem; }

.design-palette-dot {
    display: block;
    width: 20px;
    height: 20px;
    margin-top: .1rem;
    border: 2px solid rgba(7, 27, 49, .18);
    border-radius: 50%;
    background: linear-gradient(135deg, #071b31 0 48%, #efb24d 49% 100%);
}

.design-palette-dot--cobalt { background: linear-gradient(135deg, #101a42 0 48%, #e5b95d 49% 100%); }
.design-palette-dot--signal { background: linear-gradient(135deg, #172233 0 48%, #ef7565 49% 100%); }
.design-palette-dot--graphite { background: linear-gradient(135deg, #0b1018 0 48%, #146fe0 49% 100%); }
.design-palette-dot--aurora { background: linear-gradient(135deg, #10203d 0 48%, #5accc8 49% 76%, #f0ad68 77% 100%); }

.design-surface-toggler {
    display: flex;
    align-items: center;
    gap: .42rem;
}

.design-surface-toggler .design-palette-menu {
    right: auto;
    left: 0;
}

html[data-dashperf-surface="vitrine"] .design-surface-toggle,
html[data-dashperf-surface="vitrine"] .design-palette-picker > summary {
    border-color: rgba(23, 108, 168, .24);
    color: var(--vitrine-navy);
    background: rgba(255, 255, 255, .86);
}

html[data-dashperf-surface="vitrine"] .design-surface-toggler .icon,
html[data-dashperf-surface="vitrine"] .header-action-btn .icon,
html[data-dashperf-surface="vitrine"] .notification-button .icon {
    color: var(--vitrine-blue) !important;
    background: var(--vitrine-icon-pale) !important;
}

html[data-dashperf-surface="vitrine"] .design-surface-toggle:hover,
html[data-dashperf-surface="vitrine"] .design-palette-picker > summary:hover {
    border-color: var(--vitrine-blue);
    color: var(--vitrine-blue);
    background: #f5f9fb;
}

/* Signed-in pages receive the same layered geometry as the public direction. */
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) {
    color: var(--vitrine-ink);
    background:
        linear-gradient(124deg, transparent 0 70%, color-mix(in srgb, var(--vitrine-cyan) 18%, transparent) 70.1% 70.45%, transparent 70.55%) 0 0 / 100% 390px no-repeat,
        radial-gradient(circle at 8% 2%, var(--vitrine-glow-one), transparent 28rem),
        radial-gradient(circle at 96% 8%, var(--vitrine-glow-two), transparent 25rem),
        var(--vitrine-canvas);
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .main-content {
    position: relative;
    min-height: 100vh;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .main-content > .container,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .main-content > .container-fluid {
    position: relative;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .navbar-vertical {
    /* Keep the existing client rail out of the document flow.  The former
       relative positioning pushed every page body below the full-height rail. */
    position: fixed !important;
    overflow: hidden;
    border-color: var(--vitrine-rail-border) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(145deg, var(--vitrine-side-geometry-one) 0 19%, transparent 19.2%),
        linear-gradient(25deg, transparent 0 80%, var(--vitrine-side-geometry-two) 80.2% 82%, transparent 82.2%),
        linear-gradient(180deg, var(--vitrine-side-from), var(--vitrine-side-to)) !important;
    box-shadow: 0 22px 48px var(--vitrine-rail-shadow) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav::before {
    position: absolute;
    top: 10.2rem;
    right: -4.5rem;
    width: 11rem;
    height: 11rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav .nav-link.active,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .navbar-vertical .navbar-nav > .nav-item .nav-link.active {
    border-color: var(--vitrine-active-border) !important;
    background: linear-gradient(135deg, var(--vitrine-blue), var(--vitrine-active-to)) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav .nav-link.active .icon,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .sidenav .nav-link.active .icon-shape {
    color: var(--vitrine-navy) !important;
    background: var(--vitrine-lime) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .card,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .modal-content {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vitrine-card-border) !important;
    border-radius: 22px !important;
    background: var(--vitrine-card) !important;
    box-shadow: 0 16px 36px var(--vitrine-card-shadow) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .card::before,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .modal-content::before {
    position: absolute;
    top: 0;
    right: 1.8rem;
    width: 5.5rem;
    height: 4px;
    background: var(--vitrine-lime);
    content: "";
    transform: skewX(-34deg);
    transform-origin: right top;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .card-header {
    border-bottom-color: var(--vitrine-card-border) !important;
    background:
        linear-gradient(135deg, var(--vitrine-card-header), transparent 34%),
        var(--vitrine-card) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .table-responsive {
    border: 1px solid color-mix(in srgb, var(--vitrine-blue) 18%, transparent) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .form-control,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .form-select,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) textarea,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) input {
    border-color: color-mix(in srgb, var(--vitrine-blue) 28%, transparent) !important;
    border-left: 3px solid color-mix(in srgb, var(--vitrine-cyan) 62%, transparent) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .form-control:focus,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .form-select:focus,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) textarea:focus,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) input:focus {
    border-color: var(--vitrine-blue) !important;
    border-left-color: var(--vitrine-lime) !important;
    box-shadow: 0 0 0 .2rem var(--vitrine-focus-ring) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .btn-primary,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .bg-primary {
    border-color: var(--vitrine-blue) !important;
    background: linear-gradient(135deg, var(--vitrine-blue), var(--vitrine-active-to)) !important;
}

html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .btn,
html[data-dashperf-surface="vitrine"] body:not(.mock-public-body) .badge {
    border-radius: 10px;
}

/* Public pages use the same variables as the signed-in surface.  Earlier
   versions only recolored buttons, which made palette changes too subtle. */
html[data-dashperf-surface="vitrine"] .mock-public-body {
    color: var(--vitrine-ink);
    background:
        linear-gradient(128deg, transparent 0 69%, color-mix(in srgb, var(--vitrine-cyan) 13%, transparent) 69.1% 69.45%, transparent 69.55%) 0 0 / 100% 480px no-repeat,
        radial-gradient(circle at 5% 3%, var(--vitrine-glow-one), transparent 28rem),
        radial-gradient(circle at 96% 7%, var(--vitrine-glow-two), transparent 25rem),
        var(--vitrine-canvas);
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-nav--site {
    border-color: color-mix(in srgb, var(--vitrine-blue) 18%, transparent);
    background: color-mix(in srgb, var(--vitrine-paper) 92%, var(--vitrine-canvas));
    box-shadow: 0 12px 30px var(--vitrine-card-shadow);
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-nav-links a:hover,
html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-nav-solutions:hover .vitrine-nav-solutions-trigger {
    color: var(--vitrine-blue);
    background: color-mix(in srgb, var(--vitrine-icon-pale) 75%, transparent);
}

html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-page-hero,
html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-hero,
html[data-dashperf-surface="vitrine"] .mock-public-body .public-product-hero,
html[data-dashperf-surface="vitrine"] .mock-public-body .public-order-intro {
    background:
        linear-gradient(143deg, transparent 0 63%, color-mix(in srgb, var(--vitrine-cyan) 22%, transparent) 63.1% 63.45%, transparent 63.55%),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--vitrine-lime) 17%, transparent), transparent 20rem),
        linear-gradient(135deg, var(--vitrine-side-from), var(--vitrine-side-to));
    box-shadow: 0 24px 56px var(--vitrine-card-shadow);
}

html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-page-hero::before,
html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-page-hero::after,
html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-hero::before,
html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-hero::after {
    border-color: color-mix(in srgb, var(--vitrine-cyan) 30%, transparent);
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-universe-card,
html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-card,
html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-story-chapter,
html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-split-card,
html[data-dashperf-surface="vitrine"] .mock-public-body .public-product-highlights > div,
html[data-dashperf-surface="vitrine"] .mock-public-body .public-product-route,
html[data-dashperf-surface="vitrine"] .mock-public-body .public-product-offer-card,
html[data-dashperf-surface="vitrine"] .mock-public-body .public-order-form-shell {
    border-color: var(--vitrine-card-border);
    background: var(--vitrine-card);
    box-shadow: 0 14px 32px var(--vitrine-card-shadow);
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-universe-card::after,
html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-card::after {
    background: color-mix(in srgb, var(--vitrine-cyan) 14%, transparent);
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-kicker,
html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-breadcrumb i,
html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-hero-note i {
    color: var(--vitrine-lime);
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-button--lime {
    color: var(--vitrine-navy);
    border-color: var(--vitrine-lime);
    background: var(--vitrine-lime);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--vitrine-lime) 28%, transparent);
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-button--primary,
html[data-dashperf-surface="vitrine"] .mock-public-body .vitrine-page-hero .mock-button--primary {
    border-color: var(--vitrine-blue);
    background: linear-gradient(135deg, var(--vitrine-blue), var(--vitrine-active-to));
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-footer--v2 {
    border-color: color-mix(in srgb, var(--vitrine-cyan) 16%, transparent);
    background:
        linear-gradient(125deg, transparent 0 75%, color-mix(in srgb, var(--vitrine-cyan) 15%, transparent) 75.2% 75.45%, transparent 75.6%),
        linear-gradient(135deg, var(--vitrine-side-from), var(--vitrine-side-to));
}

/* The comparison skin keeps the public site's original geometry.  Its role is
   visual comparison only: the horizontal header, broad shell and hero layout
   never become a narrow dashboard-like page. */
html[data-dashperf-surface="client"] .mock-public-body .mock-public-shell {
    width: min(1440px, calc(100% - 3rem));
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro {
    color: #fff !important;
    border: 0;
    border-radius: 30px;
    background:
        radial-gradient(circle at 18% 105%, rgba(13, 110, 253, .52), transparent 25rem),
        linear-gradient(120deg, #0b1d36 0%, #143f70 58%, #176ca8 100%) !important;
    box-shadow: 0 24px 56px rgba(11, 29, 54, .16) !important;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero::before,
html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero::after,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero::before,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero::after,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero::before,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero::after,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro::before,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro::after {
    display: block;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero h1,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero h1,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero h1,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro h1 {
    color: #fff !important;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-public-hero p,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-hero p,
html[data-dashperf-surface="client"] .mock-public-body .public-product-hero p,
html[data-dashperf-surface="client"] .mock-public-body .public-order-intro p {
    color: rgba(235, 246, 255, .82) !important;
}

html[data-dashperf-surface="client"] .mock-public-body .mock-universe-card,
html[data-dashperf-surface="client"] .mock-public-body .mock-public-card,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-page-card,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-contact-channel,
html[data-dashperf-surface="client"] .mock-public-body .vitrine-legal-card,
html[data-dashperf-surface="client"] .mock-public-body .public-product-highlights > div,
html[data-dashperf-surface="client"] .mock-public-body .public-product-route,
html[data-dashperf-surface="client"] .mock-public-body .public-order-form-shell {
    border-radius: 18px;
}

/*
 * The public skin keeps the original, wide vitrine composition.  Only its
 * palette and object finish change: the navigation must not collapse into a
 * narrow application header when the comparison skin is inactive.
 */
html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-shell {
    width: min(1600px, calc(100% - 2.5rem));
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-nav--site {
    display: grid;
    min-height: 84px;
    margin-top: .8rem;
    padding: .48rem .7rem .48rem .85rem;
    border: 1px solid color-mix(in srgb, var(--vitrine-blue) 18%, transparent);
    border-radius: 17px;
    background: color-mix(in srgb, var(--vitrine-paper) 92%, var(--vitrine-canvas));
    box-shadow: 0 12px 30px var(--vitrine-card-shadow);
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-nav--site .mock-public-nav-links {
    min-width: 0;
    justify-content: center;
}

html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-nav--site .mock-public-nav-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

@media (max-width: 1180px) and (min-width: 721px) {
    html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-shell {
        width: min(1440px, calc(100% - 2rem));
    }

    html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-nav--site {
        grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto;
        gap: .3rem;
    }

    html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-nav--site .mock-public-nav-links a {
        padding-right: .48rem;
        padding-left: .48rem;
        font-size: .8rem;
    }

    html[data-dashperf-surface="vitrine"] .mock-public-body .design-surface-toggle span {
        display: none;
    }
}

@media (max-width: 720px) {
    .design-palette-picker > summary span { display: none; }
    .design-palette-picker > summary { width: 38px; padding: .42rem; justify-content: center; }
    .design-palette-menu { right: 0; min-width: 196px; }
    .design-surface-toggler { right: 132px; }
    .design-surface-toggler .design-palette-menu { right: auto; left: 0; }
    html[data-dashperf-surface="client"] .mock-public-body .mock-public-shell { width: calc(100% - 1.25rem); }
    html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-shell { width: calc(100% - 1.25rem); }
    html[data-dashperf-surface="vitrine"] .mock-public-body .mock-public-nav--site {
        display: flex;
        margin-top: .35rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}