/*
 * CSA Premium Client
 * Additive visual layer for public, authentication and customer surfaces only.
 * Backend markup and behavior remain unchanged.
 */

/* -------------------------------------------------------------------------- */
/* Customer design tokens and shared controls                                 */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client {
    --pc-ink: #0b1020;
    --pc-ink-2: #151b34;
    --pc-ink-3: #222b4d;
    --pc-text: #11182b;
    --pc-muted: #647089;
    --pc-faint: #8b95aa;
    --pc-bg: #f3f5fa;
    --pc-surface: #ffffff;
    --pc-surface-soft: #f8f9fd;
    --pc-line: #e1e5ef;
    --pc-line-strong: #d2d8e5;
    --pc-cyan: #08b9e7;
    --pc-cyan-dark: #047ea8;
    --pc-violet: #725cff;
    --pc-violet-dark: #5542d9;
    --pc-blue: #2864e8;
    --pc-success: #0f9b6c;
    --pc-warning: #c17715;
    --pc-danger: #d24655;
    --pc-accent-gradient: linear-gradient(125deg, #6f5cff 0%, #4d71f4 48%, #09bce2 100%);
    --pc-ink-gradient:
        radial-gradient(circle at 16% -10%, rgba(8, 185, 231, .18), transparent 36%),
        radial-gradient(circle at 106% 12%, rgba(114, 92, 255, .24), transparent 32%),
        linear-gradient(145deg, #0a1022 0%, #121933 54%, #171d3d 100%);
    --pc-shadow-xs: 0 1px 2px rgba(12, 18, 36, .04);
    --pc-shadow-sm: 0 8px 24px rgba(25, 36, 68, .07);
    --pc-shadow-md: 0 18px 46px rgba(24, 33, 62, .10);
    --pc-shadow-accent: 0 15px 34px rgba(74, 94, 222, .24);
    --pc-radius-sm: 9px;
    --pc-radius: 14px;
    --pc-radius-lg: 20px;
    min-height: 100vh;
    color: var(--pc-text);
    background:
        radial-gradient(circle at 88% 0%, rgba(114, 92, 255, .08), transparent 26rem),
        radial-gradient(circle at 18% 24%, rgba(8, 185, 231, .055), transparent 30rem),
        var(--pc-bg);
}

html.csa-v2 body.csa-client::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: block !important;
    pointer-events: none;
    content: "";
    opacity: .34;
    background-image:
        linear-gradient(rgba(21, 30, 58, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 30, 58, .035) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

html.csa-v2 body.csa-client :where(button, input, select, textarea) {
    font-family: inherit;
}

html.csa-v2 body.csa-client :where(input, select, textarea) {
    min-height: 42px;
    border: 1px solid var(--pc-line-strong);
    border-radius: var(--pc-radius-sm);
    color: var(--pc-text);
    background-color: rgba(255, 255, 255, .96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--pc-shadow-xs);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

html.csa-v2 body.csa-client :where(input, select, textarea)::placeholder {
    color: #a1aabd;
}

html.csa-v2 body.csa-client :where(input, select, textarea):hover {
    border-color: #b8c1d2;
}

html.csa-v2 body.csa-client :where(input, select, textarea):focus {
    border-color: rgba(74, 102, 233, .78);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(78, 102, 231, .11), 0 8px 20px rgba(43, 56, 105, .07);
}

html.csa-v2 body.csa-client .field {
    gap: 6px;
}

html.csa-v2 body.csa-client .field label {
    color: #59647a;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .btn {
    position: relative;
    min-height: 38px;
    padding: 8px 13px;
    overflow: hidden;
    border: 1px solid var(--pc-line-strong);
    border-radius: var(--pc-radius-sm);
    color: #293249;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 2px rgba(14, 24, 47, .04);
    font-size: 12.5px;
    font-weight: 760;
    letter-spacing: -.005em;
    transition:
        transform .18s cubic-bezier(.2, .75, .2, 1),
        border-color .18s ease,
        color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

html.csa-v2 body.csa-client .btn:hover {
    border-color: #b9c2d3;
    color: var(--pc-text);
    background: #fff;
    box-shadow: 0 8px 20px rgba(26, 38, 71, .09);
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .btn:active {
    box-shadow: var(--pc-shadow-xs);
    transform: translateY(0);
}

html.csa-v2 body.csa-client .btn.primary {
    border-color: transparent;
    color: #fff;
    background: var(--pc-accent-gradient);
    box-shadow: 0 9px 22px rgba(75, 92, 218, .22), inset 0 1px 0 rgba(255, 255, 255, .24);
}

html.csa-v2 body.csa-client .btn.primary::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .22) 48%, transparent 76%);
    transform: translateX(-70%);
    transition: opacity .18s ease, transform .42s ease;
}

html.csa-v2 body.csa-client .btn.primary:hover {
    border-color: transparent;
    color: #fff;
    background: var(--pc-accent-gradient);
    box-shadow: 0 13px 30px rgba(72, 90, 219, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
}

html.csa-v2 body.csa-client .btn.primary:hover::after {
    opacity: 1;
    transform: translateX(70%);
}

html.csa-v2 body.csa-client .btn.danger {
    border-color: rgba(210, 70, 85, .2);
    color: #bd3444;
    background: #fff6f7;
}

html.csa-v2 body.csa-client .pill {
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .015em;
}

html.csa-v2 body.csa-client :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(8, 185, 231, .24);
    outline-offset: 2px;
}

html.csa-v2 body.csa-client .empty {
    min-height: 100px;
    border: 1px dashed #cfd6e4;
    border-radius: var(--pc-radius);
    color: var(--pc-muted);
    background:
        radial-gradient(circle at 50% 0%, rgba(8, 185, 231, .07), transparent 65%),
        rgba(255, 255, 255, .72);
}

/* -------------------------------------------------------------------------- */
/* Premium customer workspace                                                 */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .client-app,
html.csa-v2 body.csa-client .client-shell:not(.hidden) {
    width: 100%;
    min-height: 100dvh;
}

html.csa-v2 body.csa-client .client-topbar {
    width: 246px;
    padding: 18px 13px 14px;
    overflow: hidden;
    border: 0;
    border-right: 1px solid rgba(157, 174, 212, .15);
    background: var(--pc-ink-gradient);
    box-shadow: 16px 0 45px rgba(13, 20, 44, .07);
}

html.csa-v2 body.csa-client .client-topbar::before {
    position: absolute;
    top: -130px;
    left: -110px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(8, 185, 231, .21), transparent 67%);
}

html.csa-v2 body.csa-client .client-topbar::after {
    position: absolute;
    right: -120px;
    bottom: -130px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(114, 92, 255, .24), transparent 67%);
}

html.csa-v2 body.csa-client .client-topbar > * {
    position: relative;
    z-index: 1;
}

html.csa-v2 body.csa-client .client-topbar .brand {
    gap: 11px;
    padding: 0 4px 17px;
    border-bottom-color: rgba(255, 255, 255, .1);
}

html.csa-v2 body.csa-client .client-topbar .brand img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22), 0 0 22px rgba(8, 185, 231, .12);
}

html.csa-v2 body.csa-client .client-topbar .brand h1 {
    color: #f8faff;
    font-size: 14px;
    font-weight: 820;
    letter-spacing: -.018em;
}

html.csa-v2 body.csa-client .client-topbar .brand p {
    margin-top: 3px;
    color: #91a0bb;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .07em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .client-topbar .tabs {
    gap: 5px;
    margin: 16px 0;
    padding: 0;
}

html.csa-v2 body.csa-client .client-topbar .tab {
    position: relative;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #9aa8c0;
    background: transparent;
    font-size: 12.5px;
    font-weight: 690;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}

html.csa-v2 body.csa-client .client-topbar .tab i {
    width: 18px;
    color: #7786a1;
    font-size: 13px;
    transition: color .18s ease, transform .18s ease;
}

html.csa-v2 body.csa-client .client-topbar .tab:hover {
    border-color: rgba(255, 255, 255, .075);
    color: #f5f7ff;
    background: rgba(255, 255, 255, .055);
    transform: translateX(2px);
}

html.csa-v2 body.csa-client .client-topbar .tab:hover i {
    color: #9cecff;
    transform: scale(1.05);
}

html.csa-v2 body.csa-client .client-topbar .tab.active {
    border-color: rgba(118, 191, 255, .24);
    color: #fff;
    background:
        linear-gradient(115deg, rgba(113, 92, 255, .85), rgba(46, 111, 230, .78) 55%, rgba(8, 185, 231, .7));
    box-shadow: 0 10px 26px rgba(26, 53, 142, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}

html.csa-v2 body.csa-client .client-topbar .tab.active::before {
    position: absolute;
    top: 50%;
    left: -14px;
    width: 3px;
    height: 22px;
    border-radius: 0 4px 4px 0;
    content: "";
    background: #38d9ff;
    box-shadow: 0 0 16px rgba(56, 217, 255, .72);
    transform: translateY(-50%);
}

html.csa-v2 body.csa-client .client-topbar .tab.active i {
    color: #fff;
}

html.csa-v2 body.csa-client .client-topbar .actions {
    gap: 7px;
    padding-top: 12px;
    border-top-color: rgba(255, 255, 255, .1);
}

html.csa-v2 body.csa-client .client-topbar .actions .btn,
html.csa-v2 body.csa-client .client-topbar .language-current {
    min-height: 37px;
    border-color: rgba(255, 255, 255, .1);
    border-radius: 9px;
    color: #d9e1f0;
    background: rgba(255, 255, 255, .055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

html.csa-v2 body.csa-client .client-topbar .actions .btn:hover,
html.csa-v2 body.csa-client .client-topbar .language-current:hover {
    border-color: rgba(255, 255, 255, .19);
    color: #fff;
    background: rgba(255, 255, 255, .09);
}

html.csa-v2 body.csa-client .client-shell .app-content {
    width: calc(100% - 246px);
    margin-left: 246px;
    padding: 22px 24px 44px;
    background: transparent;
}

html.csa-v2 body.csa-client .client-shell .app-content > * {
    max-width: 1480px;
}

html.csa-v2 body.csa-client .client-shell .panel {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(216, 222, 234, .92);
    border-radius: var(--pc-radius);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--pc-shadow-sm);
}

html.csa-v2 body.csa-client .client-shell .panel-head {
    min-height: 60px;
    padding: 13px 16px;
    border-bottom: 1px solid #e9ecf3;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 251, 254, .94));
}

html.csa-v2 body.csa-client .client-shell .panel-head h2 {
    color: var(--pc-text);
    font-size: 15px;
    font-weight: 820;
    letter-spacing: -.015em;
}

html.csa-v2 body.csa-client .client-shell .panel-head h2 i {
    color: #5268df;
}

html.csa-v2 body.csa-client .client-shell .panel-head p {
    margin-top: 3px;
    color: var(--pc-muted);
    font-size: 11.5px;
}

html.csa-v2 body.csa-client .client-shell .panel-body {
    padding: 15px 16px;
}

/* -------------------------------------------------------------------------- */
/* Dashboard and active rentals                                               */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .client-shell :where(.rental-product-card, .rental-row, .rental-row-v3) {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 14px;
    min-height: 102px;
    padding: 12px;
    border: 1px solid var(--pc-line);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(247, 249, 254, .82), transparent 42%),
        #fff;
    box-shadow: var(--pc-shadow-xs);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.csa-v2 body.csa-client .client-shell :where(.rental-product-card, .rental-row, .rental-row-v3):hover {
    border-color: #c8d0e2;
    box-shadow: var(--pc-shadow-sm);
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .client-shell :where(.rental-product-card, .rental-row, .rental-row-v3) img {
    width: 70px;
    height: 70px;
    border: 1px solid rgba(211, 218, 233, .9);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(20, 31, 61, .1);
}

html.csa-v2 body.csa-client .client-shell .rental-product-title h3 {
    color: var(--pc-text);
    font-size: 15.5px;
    letter-spacing: -.012em;
}

html.csa-v2 body.csa-client .client-shell .rental-progress {
    height: 6px;
    background: #e8ebf3;
}

html.csa-v2 body.csa-client .client-shell .rental-progress > span {
    background: var(--pc-accent-gradient);
    box-shadow: 0 0 12px rgba(8, 185, 231, .3);
}

html.csa-v2 body.csa-client :where(.rental-facts, .plan-specs, .plan-v3-specs, .plan-specs-v3, .rental-facts-v3, .checkout-mechanics-v3) {
    gap: 7px;
}

html.csa-v2 body.csa-client :where(.rental-facts, .plan-specs, .plan-v3-specs, .plan-specs-v3, .rental-facts-v3, .checkout-mechanics-v3) > div {
    min-height: 54px;
    padding: 8px 9px;
    border: 1px solid #e5e9f2;
    border-left: 1px solid #e5e9f2;
    border-radius: 9px;
    background: linear-gradient(145deg, #fafbfe, #f5f7fb);
}

html.csa-v2 body.csa-client :where(.rental-facts, .plan-specs, .plan-v3-specs, .plan-specs-v3, .rental-facts-v3, .checkout-mechanics-v3) :where(dt, span) {
    color: var(--pc-faint);
    font-size: 8.5px;
    letter-spacing: .075em;
}

html.csa-v2 body.csa-client :where(.rental-facts, .plan-specs, .plan-v3-specs, .plan-specs-v3, .rental-facts-v3) dd,
html.csa-v2 body.csa-client .checkout-mechanics-v3 strong {
    margin-top: 3px;
    color: #202a43;
    font-size: 11px;
    line-height: 1.35;
}

html.csa-v2 body.csa-client .dashboard-utility-grid {
    grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr);
    gap: 14px;
}

html.csa-v2 body.csa-client .account-summary .panel-body {
    gap: 8px;
}

html.csa-v2 body.csa-client .account-line {
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid #e8ebf2;
    border-radius: 9px;
    background: linear-gradient(145deg, #fafbfe, #f6f8fc);
}

html.csa-v2 body.csa-client .account-line span {
    color: var(--pc-faint);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .account-line strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #20283d;
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .account-actions {
    gap: 7px;
    margin-top: 4px;
}

html.csa-v2 body.csa-client .notice-list {
    gap: 8px;
}

html.csa-v2 body.csa-client .notice-card {
    position: relative;
    padding: 11px 12px 11px 15px;
    overflow: hidden;
    border: 1px solid #e5e9f2;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbfcff, #f7f9fd);
    box-shadow: none;
}

html.csa-v2 body.csa-client .notice-card::before {
    position: absolute;
    inset: 8px auto 8px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    content: "";
    background: var(--pc-accent-gradient);
}

html.csa-v2 body.csa-client .notice-card h3 {
    color: var(--pc-text);
    font-size: 13px;
    font-weight: 790;
}

/* -------------------------------------------------------------------------- */
/* Rental catalog                                                             */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .store-hero.store-header-v3 {
    position: relative;
    min-height: 126px;
    margin-bottom: 12px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid rgba(111, 132, 205, .28);
    border-radius: var(--pc-radius-lg);
    color: #fff;
    background: var(--pc-ink-gradient);
    box-shadow: 0 20px 48px rgba(13, 20, 48, .16);
}

html.csa-v2 body.csa-client .store-hero.store-header-v3::before {
    position: absolute;
    top: -150px;
    right: -30px;
    display: block !important;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle, rgba(14, 203, 238, .23), transparent 65%);
}

html.csa-v2 body.csa-client .store-hero.store-header-v3::after {
    position: absolute;
    right: 22%;
    bottom: -210px;
    display: block !important;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle, rgba(114, 92, 255, .29), transparent 65%);
}

html.csa-v2 body.csa-client .store-hero.store-header-v3 > * {
    position: relative;
    z-index: 1;
}

html.csa-v2 body.csa-client .store-hero .eyebrow {
    color: #65ddfb;
    font-size: 9.5px;
    font-weight: 860;
    letter-spacing: .105em;
}

html.csa-v2 body.csa-client .store-hero h2 {
    margin-top: 4px;
    color: #fff;
    font-size: clamp(22px, 2.2vw, 31px);
    font-weight: 860;
    letter-spacing: -.04em;
}

html.csa-v2 body.csa-client .store-hero p {
    max-width: 700px;
    margin-top: 7px;
    color: #abb8ce;
    font-size: 12.5px;
    line-height: 1.55;
}

html.csa-v2 body.csa-client .store-header-v3 .store-search {
    flex-basis: 360px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(14px);
}

html.csa-v2 body.csa-client .store-header-v3 .store-search label {
    color: #aab8d2;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .store-header-v3 .store-search input {
    min-height: 40px;
    border-color: rgba(255, 255, 255, .13);
    color: #fff;
    background: rgba(7, 13, 29, .48);
    box-shadow: none;
}

html.csa-v2 body.csa-client .store-header-v3 .store-search input::placeholder {
    color: #7e8aa2;
}

html.csa-v2 body.csa-client .catalog-filters-v3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid rgba(216, 222, 234, .96);
    border-radius: var(--pc-radius);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--pc-shadow-sm);
}

html.csa-v2 body.csa-client .catalog-filters-v3 :where(input, select) {
    min-height: 40px;
    background-color: #fafbfe;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 {
    gap: 12px;
    margin-bottom: 9px;
    padding: 9px 11px;
    border: 1px solid var(--pc-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--pc-shadow-xs);
}

html.csa-v2 body.csa-client .catalog-category-row-v3 > span {
    color: var(--pc-faint);
    font-size: 9px;
    letter-spacing: .08em;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 .category-list {
    gap: 6px;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 .category-pill {
    min-height: 31px;
    padding: 5px 10px;
    border: 1px solid #e0e5ef;
    border-radius: 999px;
    color: #667189;
    background: #f9fafe;
    font-size: 10.5px;
    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 .category-pill:hover {
    border-color: #cbd2e2;
    color: #35415c;
    background: #fff;
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .catalog-category-row-v3 .category-pill.active {
    border-color: rgba(91, 104, 235, .28);
    color: #4e4bcd;
    background: linear-gradient(135deg, rgba(114, 92, 255, .11), rgba(8, 185, 231, .09));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
}

html.csa-v2 body.csa-client .store-toolbar-v3 {
    min-height: 39px;
    margin-bottom: 8px;
    padding: 3px 2px;
}

html.csa-v2 body.csa-client .store-toolbar-v3 strong {
    color: #222c45;
    font-size: 12px;
}

html.csa-v2 body.csa-client .store-grid.store-grid-v3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3 {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(216, 222, 234, .94);
    border-radius: var(--pc-radius);
    background:
        radial-gradient(circle at 100% 0%, rgba(114, 92, 255, .06), transparent 38%),
        #fff;
    box-shadow: 0 5px 18px rgba(28, 38, 69, .055);
    transform: translateZ(0);
    transition:
        transform .22s cubic-bezier(.2, .75, .2, 1),
        border-color .22s ease,
        box-shadow .22s ease;
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 3px;
    content: "";
    opacity: .8;
    background: var(--pc-accent-gradient);
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3[data-delivery="manual"]::before {
    background: linear-gradient(90deg, #f0a847, #e27668);
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3:hover {
    border-color: rgba(137, 149, 196, .52);
    box-shadow: 0 18px 38px rgba(29, 40, 76, .12);
    transform: translateY(-3px);
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3 .body {
    gap: 11px;
    padding: 15px;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 .media {
    width: 76px;
    height: 76px;
    min-height: 76px;
    border: 1px solid #dce2ed;
    border-radius: 12px;
    background: #f2f4f9;
    box-shadow: 0 9px 22px rgba(22, 31, 59, .11);
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 .media img {
    transition: transform .35s cubic-bezier(.2, .75, .2, 1);
}

html.csa-v2 body.csa-client .plan-tile-v3:hover .plan-tile-head-v3 .media img {
    transform: scale(1.045);
}

html.csa-v2 body.csa-client .plan-badges-v3 {
    gap: 5px;
    margin-bottom: 5px;
}

html.csa-v2 body.csa-client :where(.mode-badge, .delivery-badge, .quota-badge) {
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid rgba(26, 167, 211, .23);
    color: #087d9e;
    background: linear-gradient(135deg, rgba(8, 185, 231, .1), rgba(40, 100, 232, .07));
    font-size: 9.5px;
    letter-spacing: .01em;
}

html.csa-v2 body.csa-client :where(.mode-badge.manual, .delivery-badge.manual) {
    border-color: rgba(208, 145, 56, .27);
    color: #a56512;
    background: linear-gradient(135deg, #fff7e8, #fffaf2);
}

html.csa-v2 body.csa-client .category-badge {
    min-height: 23px;
    padding: 3px 8px;
    border-color: #e0e4ec;
    color: #6c7587;
    background: #f7f8fb;
    font-size: 9.5px;
}

html.csa-v2 body.csa-client .store-card h3 {
    color: #151d32;
    font-size: 16.5px;
    font-weight: 840;
    letter-spacing: -.025em;
    line-height: 1.3;
}

html.csa-v2 body.csa-client .store-card .plan-summary-v3 {
    min-height: 35px;
    color: #6a7488;
    font-size: 11.5px;
    line-height: 1.52;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-specs-v3 {
    margin-top: 0;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-specs-v3 > div {
    min-height: 58px;
    background: linear-gradient(145deg, #fafbfe, #f5f7fb);
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-specs-v3 small {
    display: block;
    margin-top: 2px;
    color: #8993a7;
    font-size: 9px;
    line-height: 1.3;
}

html.csa-v2 body.csa-client .plan-card-footer.plan-tile-footer-v3 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid #e9ecf2;
}

html.csa-v2 body.csa-client .plan-from-price {
    display: grid;
    gap: 2px;
    min-width: 0;
}

html.csa-v2 body.csa-client .plan-from-price span {
    color: var(--pc-faint);
    font-size: 8.5px;
    font-weight: 820;
    letter-spacing: .07em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .plan-from-price strong {
    overflow-wrap: anywhere;
    color: #171f35;
    font-size: 14px;
    font-weight: 850;
}

html.csa-v2 body.csa-client .rent-period-note,
html.csa-v2 body.csa-client .checkout-note {
    padding: 9px 10px;
    border: 1px solid rgba(56, 132, 218, .15);
    border-radius: 9px;
    color: #53647c;
    background: linear-gradient(135deg, rgba(8, 185, 231, .06), rgba(114, 92, 255, .055));
    font-size: 10.5px;
}

/* -------------------------------------------------------------------------- */
/* Drawers, plan details and checkout                                          */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .drawer {
    background: rgba(7, 12, 27, .55);
    backdrop-filter: blur(9px) saturate(115%);
}

html.csa-v2 body.csa-client .drawer-panel {
    width: min(760px, 100vw);
    border-left: 1px solid rgba(255, 255, 255, .65);
    background:
        radial-gradient(circle at 100% 0%, rgba(114, 92, 255, .08), transparent 26rem),
        #f8f9fc;
    box-shadow: -24px 0 70px rgba(4, 9, 24, .25);
}

html.csa-v2 body.csa-client .drawer.drawer-compact .drawer-panel {
    width: min(700px, 100vw);
}

html.csa-v2 body.csa-client .drawer-head {
    min-height: 68px;
    padding: 12px 17px;
    border-bottom: 1px solid #e2e6ef;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px);
}

html.csa-v2 body.csa-client .drawer-head h2 {
    color: #161d31;
    font-size: 18px;
    font-weight: 840;
    letter-spacing: -.025em;
}

html.csa-v2 body.csa-client .drawer-head p {
    margin-top: 3px;
    color: var(--pc-muted);
    font-size: 11px;
}

html.csa-v2 body.csa-client .drawer-close {
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 10px;
    font-size: 20px;
}

html.csa-v2 body.csa-client .drawer-body {
    gap: 12px;
    padding: 17px;
}

html.csa-v2 body.csa-client .plan-detail-v3,
html.csa-v2 body.csa-client .checkout-form-v3,
html.csa-v2 body.csa-client .detail-stack {
    gap: 12px;
}

html.csa-v2 body.csa-client .plan-detail-summary-v3,
html.csa-v2 body.csa-client .checkout-plan,
html.csa-v2 body.csa-client .detail-card,
html.csa-v2 body.csa-client .manual-contact-checkout-v3 {
    border: 1px solid #e0e5ef;
    border-radius: 13px;
    background:
        radial-gradient(circle at 100% 0%, rgba(114, 92, 255, .06), transparent 40%),
        #fff;
    box-shadow: var(--pc-shadow-sm);
}

html.csa-v2 body.csa-client .plan-detail-summary-v3 {
    grid-template-columns: 116px minmax(0, 1fr);
    padding: 13px;
}

html.csa-v2 body.csa-client .plan-detail-summary-v3 img {
    width: 116px;
    height: 116px;
    border-color: #dce1ec;
    border-radius: 13px;
    box-shadow: 0 10px 24px rgba(25, 34, 64, .12);
}

html.csa-v2 body.csa-client .plan-description-v3 {
    border: 1px solid #e3e7f0;
    border-radius: 11px;
    background: #fff;
}

html.csa-v2 body.csa-client .checkout-plan {
    padding: 12px;
}

html.csa-v2 body.csa-client .checkout-plan-image {
    border: 1px solid #dce1ec;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(23, 32, 61, .1);
}

html.csa-v2 body.csa-client .checkout-plan h3 {
    color: #171e32;
    font-size: 16px;
    letter-spacing: -.02em;
}

html.csa-v2 body.csa-client .checkout-steps-v3 {
    gap: 7px;
}

html.csa-v2 body.csa-client .checkout-steps-v3 span {
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid #e1e5ef;
    border-radius: 10px;
    color: #566176;
    background: linear-gradient(145deg, #fff, #f7f8fc);
    box-shadow: var(--pc-shadow-xs);
}

html.csa-v2 body.csa-client .checkout-steps-v3 b {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    background: var(--pc-accent-gradient);
    box-shadow: 0 5px 12px rgba(76, 95, 224, .22);
}

html.csa-v2 body.csa-client .checkout-detail-grid > div {
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    background: #fff;
}

html.csa-v2 body.csa-client .period-picker-v3 {
    padding: 11px;
    border: 1px solid #dfe4ee;
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--pc-shadow-xs);
}

html.csa-v2 body.csa-client .period-picker-v3 legend {
    color: #3c465d;
    font-size: 10px;
    letter-spacing: .055em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .period-options-v3 {
    gap: 8px;
}

html.csa-v2 body.csa-client .period-option-v3 {
    min-height: 62px;
    padding: 10px;
    border: 1px solid #dde2ec;
    border-radius: 10px;
    background: linear-gradient(145deg, #fff, #f8f9fc);
    box-shadow: var(--pc-shadow-xs);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.csa-v2 body.csa-client .period-option-v3:hover {
    border-color: #bac5db;
    background: #fff;
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .period-option-v3:has(input:checked) {
    border-color: rgba(83, 89, 223, .65);
    background: linear-gradient(145deg, rgba(114, 92, 255, .12), rgba(8, 185, 231, .08));
    box-shadow: 0 0 0 2px rgba(93, 92, 226, .11), 0 9px 20px rgba(63, 76, 164, .09);
}

html.csa-v2 body.csa-client .period-option-v3 strong {
    color: #19213a;
    font-size: 13.5px;
}

html.csa-v2 body.csa-client .checkout-total {
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid rgba(95, 97, 222, .18);
    border-radius: 12px;
    color: #fff;
    background: var(--pc-ink-gradient);
    box-shadow: 0 13px 28px rgba(17, 25, 57, .15);
}

html.csa-v2 body.csa-client .checkout-total span,
html.csa-v2 body.csa-client .checkout-total small {
    color: #aab8d1;
}

html.csa-v2 body.csa-client .checkout-total strong {
    color: #fff;
    font-size: 21px;
    letter-spacing: -.025em;
}

html.csa-v2 body.csa-client .checkout-extras-v3 {
    border: 1px solid #e0e5ee;
    border-radius: 11px;
    background: #fff;
}

html.csa-v2 body.csa-client .checkout-extras-v3 > summary {
    padding: 10px 12px;
    color: #59647a;
}

html.csa-v2 body.csa-client .checkout-extras-fields-v3 {
    padding: 11px;
    border-top-color: #e8ebf2;
    background: #fafbfe;
}

html.csa-v2 body.csa-client .checkout-form-v3 > .btn.primary {
    min-height: 46px;
    font-size: 13.5px;
}

html.csa-v2 body.csa-client .manual-contact-checkout-v3 {
    padding: 17px;
}

html.csa-v2 body.csa-client .manual-contact-checkout-v3 h3 {
    margin: 0;
    color: #171e32;
    font-size: 19px;
    letter-spacing: -.025em;
}

html.csa-v2 body.csa-client :where(.detail-card, .bank-invoice, .payment-result) {
    border-color: #e0e5ef;
    border-radius: 13px;
    background-color: #fff;
    box-shadow: var(--pc-shadow-sm);
}

html.csa-v2 body.csa-client .detail-grid > div,
html.csa-v2 body.csa-client .bank-copy-row {
    border-color: #e5e9f1;
    border-radius: 9px;
    background: #f8f9fc;
}

html.csa-v2 body.csa-client .wallet-balance-card {
    border: 1px solid rgba(98, 103, 226, .2);
    border-radius: 14px;
    color: #fff;
    background: var(--pc-ink-gradient);
    box-shadow: 0 18px 38px rgba(16, 23, 53, .16);
}

html.csa-v2 body.csa-client .wallet-balance-card :where(span, p, em) {
    color: #aebad0;
}

html.csa-v2 body.csa-client .wallet-balance-card strong {
    color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Orders                                                                     */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .client-order-tools {
    align-items: end;
    gap: 10px;
    margin-bottom: 11px;
    padding: 11px;
    border: 1px solid #e2e6ef;
    border-radius: 11px;
    background: #f8f9fc;
}

html.csa-v2 body.csa-client .client-order-tools .field {
    max-width: 480px;
}

html.csa-v2 body.csa-client .client-order-count {
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid #e0e5ef;
    border-radius: 9px;
    color: #59647b;
    background: #fff;
    font-size: 11px;
}

html.csa-v2 body.csa-client .client-order-list {
    gap: 9px;
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 {
    position: relative;
    display: grid;
    grid-template-columns: minmax(230px, 1.1fr) minmax(260px, 1fr) minmax(210px, .85fr);
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 12px 13px 12px 16px;
    overflow: hidden;
    border: 1px solid #e0e5ee;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(248, 250, 254, .75), transparent 45%),
        #fff;
    box-shadow: var(--pc-shadow-xs);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3::before {
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    content: "";
    background: var(--pc-accent-gradient);
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3[data-delivery="manual"]::before {
    background: linear-gradient(#efad4d, #dd7569);
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3:hover {
    border-color: #c8d0e0;
    box-shadow: 0 13px 30px rgba(27, 38, 72, .09);
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .client-order-main {
    min-width: 0;
}

html.csa-v2 body.csa-client .client-order-title strong {
    color: #182037;
    font-size: 13.5px;
    font-weight: 820;
    letter-spacing: -.012em;
}

html.csa-v2 body.csa-client .client-order-title span {
    color: #7d879a;
    font-size: 9.5px;
}

html.csa-v2 body.csa-client .client-order-title span b {
    color: #45516a;
}

html.csa-v2 body.csa-client .client-order-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

html.csa-v2 body.csa-client .client-order-line > span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #e7eaf1;
    border-radius: 8px;
    color: #8a94a7;
    background: #f8f9fc;
    font-size: 8.5px;
    font-weight: 760;
    letter-spacing: .03em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .client-order-line strong {
    overflow-wrap: anywhere;
    color: #2a334a;
    font-size: 10.5px;
    letter-spacing: 0;
    text-transform: none;
}

html.csa-v2 body.csa-client .order-context-v3 {
    margin: 0;
    color: #69748a;
    font-size: 10.5px;
    line-height: 1.5;
}

html.csa-v2 body.csa-client .client-order-review {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 8px;
}

html.csa-v2 body.csa-client .client-order-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 7px;
    margin: -2px 0 0;
    padding-top: 9px;
    border-top: 1px solid #eaedf3;
}

html.csa-v2 body.csa-client .client-order-actions .btn {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 10.5px;
}

html.csa-v2 body.csa-client .pagination {
    gap: 8px;
    margin-top: 12px;
    padding: 8px 0 0;
}

/* -------------------------------------------------------------------------- */
/* Profile and secondary customer pages                                       */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .profile-page {
    gap: 14px;
}

html.csa-v2 body.csa-client .profile-hero {
    position: relative;
    gap: 16px;
    min-height: 124px;
    padding: 18px;
    overflow: hidden;
    border-color: rgba(112, 130, 201, .25);
    color: #fff;
    background: var(--pc-ink-gradient);
    box-shadow: 0 20px 46px rgba(14, 21, 49, .17);
}

html.csa-v2 body.csa-client .profile-hero::after {
    position: absolute;
    top: -130px;
    right: -80px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle, rgba(8, 185, 231, .25), transparent 67%);
}

html.csa-v2 body.csa-client .profile-hero > * {
    position: relative;
    z-index: 1;
}

html.csa-v2 body.csa-client .profile-avatar {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 18px;
    color: #fff;
    background: var(--pc-accent-gradient);
    box-shadow: 0 13px 30px rgba(36, 50, 137, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
    font-size: 26px;
}

html.csa-v2 body.csa-client .profile-hero .panel-kicker {
    color: #6de1fb;
}

html.csa-v2 body.csa-client .profile-hero-copy h2 {
    color: #fff;
    font-size: 20px;
    letter-spacing: -.025em;
}

html.csa-v2 body.csa-client .profile-hero-copy p {
    color: #aebbd1;
}

html.csa-v2 body.csa-client .profile-stat-grid {
    gap: 11px;
}

html.csa-v2 body.csa-client .profile-stat {
    position: relative;
    min-height: 92px;
    padding: 14px 15px 14px 52px;
    overflow: hidden;
    border: 1px solid #dfe4ee;
    border-radius: 13px;
    background:
        radial-gradient(circle at 100% 0%, rgba(114, 92, 255, .07), transparent 50%),
        #fff;
    box-shadow: var(--pc-shadow-sm);
}

html.csa-v2 body.csa-client .profile-stat-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: var(--pc-accent-gradient);
    box-shadow: 0 8px 17px rgba(67, 85, 203, .22);
    transform: translateY(-50%);
}

html.csa-v2 body.csa-client .profile-stat span {
    color: var(--pc-faint);
    font-size: 9px;
    letter-spacing: .06em;
}

html.csa-v2 body.csa-client .profile-stat strong {
    color: #1a2239;
    font-size: 18px;
    letter-spacing: -.02em;
}

html.csa-v2 body.csa-client .profile-main-grid {
    gap: 14px;
}

html.csa-v2 body.csa-client .profile-action-grid {
    gap: 8px;
}

html.csa-v2 body.csa-client .profile-action-card {
    min-height: 90px;
    padding: 12px 12px 12px 48px;
    border: 1px solid #e0e5ef;
    border-radius: 11px;
    color: #1c253b;
    background: linear-gradient(145deg, #fff, #f8f9fc);
    box-shadow: var(--pc-shadow-xs);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.csa-v2 body.csa-client .profile-action-card:hover {
    border-color: #bfc9db;
    box-shadow: var(--pc-shadow-sm);
    transform: translateY(-2px);
}

html.csa-v2 body.csa-client .profile-action-card.primary {
    border-color: rgba(90, 99, 226, .2);
    color: #fff;
    background: var(--pc-ink-gradient);
    box-shadow: 0 13px 28px rgba(18, 26, 61, .15);
}

html.csa-v2 body.csa-client .profile-action-card.primary span {
    color: #aebbd0;
}

html.csa-v2 body.csa-client .profile-action-icon {
    top: 14px;
    left: 13px;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    color: #fff;
    background: var(--pc-accent-gradient);
    box-shadow: 0 7px 16px rgba(71, 88, 211, .2);
}

html.csa-v2 body.csa-client .profile-security-note {
    border: 1px solid rgba(52, 134, 217, .15);
    border-radius: 10px;
    color: #56647a;
    background: linear-gradient(135deg, rgba(8, 185, 231, .06), rgba(114, 92, 255, .05));
}

html.csa-v2 body.csa-client :where(.guide-card, .ticket-list-item) {
    border-color: #e1e5ee;
    border-radius: 11px;
    background: linear-gradient(145deg, #fff, #f8f9fc);
    box-shadow: var(--pc-shadow-xs);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html.csa-v2 body.csa-client :where(.guide-card, .ticket-list-item):hover {
    border-color: #c4cede;
    box-shadow: var(--pc-shadow-sm);
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .support-hero {
    min-height: 108px;
    border-color: rgba(100, 118, 194, .22);
    color: #fff;
    background: var(--pc-ink-gradient);
    box-shadow: 0 18px 42px rgba(16, 23, 55, .15);
}

html.csa-v2 body.csa-client .support-hero h2 {
    color: #fff;
}

html.csa-v2 body.csa-client .support-hero p {
    color: #aebbd1;
}

html.csa-v2 body.csa-client .topup-layout,
html.csa-v2 body.csa-client .support-workspace {
    gap: 14px;
}

/* -------------------------------------------------------------------------- */
/* Public SPA landing and guest catalog                                       */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .public-view {
    min-height: 100vh;
    padding: 1px 0 44px;
    background:
        radial-gradient(circle at 12% 0%, rgba(8, 185, 231, .11), transparent 31rem),
        radial-gradient(circle at 94% 13%, rgba(114, 92, 255, .12), transparent 34rem),
        linear-gradient(180deg, #f7f8fc, #f1f4f9);
}

html.csa-v2 body.csa-client .public-nav {
    position: sticky;
    top: 12px;
    z-index: 30;
    width: min(1220px, calc(100% - 32px));
    min-height: 68px;
    margin: 12px auto 16px;
    padding: 10px 13px;
    border: 1px solid rgba(214, 221, 234, .82);
    border-radius: 15px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 34px rgba(24, 34, 65, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(20px) saturate(135%);
}

html.csa-v2 body.csa-client .public-nav .brand {
    gap: 10px;
}

html.csa-v2 body.csa-client .public-nav .brand img {
    width: 42px;
    height: 42px;
    border: 1px solid #dce2ed;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(28, 40, 75, .11);
}

html.csa-v2 body.csa-client .public-nav .brand h1 {
    color: #141b2f;
    font-size: 15.5px;
    font-weight: 840;
    letter-spacing: -.02em;
}

html.csa-v2 body.csa-client .public-nav .brand p {
    color: #778197;
    font-size: 10.5px;
}

html.csa-v2 body.csa-client .hero-stage {
    position: relative;
    width: min(1220px, calc(100% - 32px));
    min-height: 402px;
    margin: 0 auto 16px;
    overflow: hidden;
    border: 1px solid rgba(112, 132, 202, .26);
    border-radius: 24px;
    background-color: var(--pc-ink);
    background-image: var(--pc-ink-gradient);
    box-shadow: 0 27px 65px rgba(14, 21, 50, .2);
}

html.csa-v2 body.csa-client .hero-stage::before {
    position: absolute;
    top: -190px;
    right: -70px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(8, 185, 231, .26), transparent 65%);
}

html.csa-v2 body.csa-client .hero-stage::after {
    position: absolute;
    bottom: -300px;
    left: 26%;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(114, 92, 255, .3), transparent 64%);
}

html.csa-v2 body.csa-client .hero-inner {
    position: relative;
    z-index: 1;
    gap: 34px;
    min-height: 402px;
    padding: 38px 42px;
}

html.csa-v2 body.csa-client .hero-copy {
    padding-bottom: 0;
}

html.csa-v2 body.csa-client .hero-copy .eyebrow {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(100, 221, 251, .23);
    border-radius: 999px;
    color: #65ddfa;
    background: rgba(8, 185, 231, .08);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .1em;
}

html.csa-v2 body.csa-client .hero-stage .hero-copy h2 {
    max-width: 700px;
    margin-top: 14px;
    color: #fff;
    font-size: clamp(37px, 4.4vw, 61px);
    font-weight: 880;
    letter-spacing: -.055em;
    line-height: .98;
}

html.csa-v2 body.csa-client .hero-copy > p {
    max-width: 650px;
    margin-top: 17px;
    color: #aebbd1;
    font-size: 14px;
    line-height: 1.62;
}

html.csa-v2 body.csa-client .hero-actions {
    gap: 9px;
    margin-top: 20px;
}

html.csa-v2 body.csa-client .hero-actions .btn {
    min-height: 43px;
    padding-inline: 16px;
}

html.csa-v2 body.csa-client .hero-actions .btn.dark {
    border-color: rgba(255, 255, 255, .14);
    color: #edf2ff;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

html.csa-v2 body.csa-client .hero-proof {
    gap: 7px;
    margin-top: 24px;
}

html.csa-v2 body.csa-client .proof-item {
    min-height: 56px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .055);
    backdrop-filter: blur(10px);
}

html.csa-v2 body.csa-client .proof-item strong {
    color: #eef3ff;
    font-size: 10.5px;
}

html.csa-v2 body.csa-client .proof-item span {
    color: #8999b5;
    font-size: 9px;
}

html.csa-v2 body.csa-client .showcase-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 18px;
    background: rgba(255, 255, 255, .075);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(14px);
    transform: rotate(1.2deg);
    transition: transform .3s ease, box-shadow .3s ease;
}

html.csa-v2 body.csa-client .showcase-card:hover {
    box-shadow: 0 30px 64px rgba(0, 0, 0, .32), 0 0 32px rgba(8, 185, 231, .08);
    transform: rotate(0deg) translateY(-3px);
}

html.csa-v2 body.csa-client .showcase-card img {
    filter: saturate(.95) contrast(1.03);
}

html.csa-v2 body.csa-client .public-band {
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto 16px;
    padding: 24px;
    border: 1px solid rgba(216, 222, 234, .9);
    border-radius: 20px;
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--pc-shadow-sm);
    backdrop-filter: blur(15px);
}

html.csa-v2 body.csa-client .public-band .section-title {
    gap: 6px;
    margin-bottom: 17px;
}

html.csa-v2 body.csa-client .public-band .section-title h2 {
    color: #141b2f;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 860;
    letter-spacing: -.04em;
}

html.csa-v2 body.csa-client .public-band .section-title p {
    color: #6c778d;
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .public-band .product-strip {
    gap: 12px;
}

html.csa-v2 body.csa-client .public-band .product-card {
    overflow: hidden;
    border: 1px solid #dfe4ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(25, 36, 69, .06);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

html.csa-v2 body.csa-client .public-band .product-card:hover {
    border-color: rgba(122, 137, 188, .5);
    box-shadow: 0 17px 37px rgba(26, 37, 72, .11);
    transform: translateY(-3px);
}

html.csa-v2 body.csa-client #guestPlanList.product-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3 {
    position: relative;
    gap: 11px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid #dfe4ed;
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(114, 92, 255, .07), transparent 40%),
        #fff;
    box-shadow: 0 6px 20px rgba(25, 36, 69, .06);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    content: "";
    background: var(--pc-accent-gradient);
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3[data-delivery="manual"]::before {
    background: linear-gradient(90deg, #f0aa4a, #df7769);
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3:hover {
    border-color: rgba(122, 137, 188, .52);
    box-shadow: 0 18px 40px rgba(25, 36, 70, .12);
    transform: translateY(-3px);
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3 .plan-tile-head-v3 {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3 .product-thumb {
    width: 72px;
    height: 72px;
    border: 1px solid #dce2ed;
    border-radius: 12px;
    box-shadow: 0 9px 22px rgba(24, 34, 65, .1);
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3 h3 {
    color: #161e33;
    font-size: 16px;
    font-weight: 830;
    letter-spacing: -.02em;
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3 .plan-summary-v3 {
    min-height: 35px;
    color: #6a758a;
    font-size: 11.5px;
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3 .plan-tile-footer-v3 {
    padding-top: 11px;
    border-top-color: #e8ebf2;
}

html.csa-v2 body.csa-client .feature-grid {
    gap: 12px;
}

html.csa-v2 body.csa-client .feature-tile {
    min-height: 150px;
    padding: 18px;
    border: 1px solid #dfe4ed;
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(8, 185, 231, .07), transparent 48%),
        linear-gradient(145deg, #fff, #f8f9fc);
    box-shadow: var(--pc-shadow-xs);
}

html.csa-v2 body.csa-client .feature-mark {
    color: transparent;
    background: var(--pc-accent-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 27px;
    font-weight: 900;
}

/* -------------------------------------------------------------------------- */
/* Authentication                                                             */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .auth-view {
    min-height: 100dvh;
    padding: 34px;
    overflow: hidden;
    background:
        radial-gradient(circle at 9% 4%, rgba(8, 185, 231, .22), transparent 30rem),
        radial-gradient(circle at 92% 92%, rgba(114, 92, 255, .28), transparent 34rem),
        linear-gradient(145deg, #090f20, #111833 55%, #151c3c);
}

html.csa-v2 body.csa-client .auth-view::before {
    position: fixed;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .3;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}

html.csa-v2 body.csa-client .auth-stage {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
    gap: clamp(44px, 8vw, 104px);
    width: min(1120px, 100%);
    min-height: calc(100dvh - 68px);
    margin: 0 auto;
    align-items: center;
}

html.csa-v2 body.csa-client .auth-copy {
    max-width: 640px;
}

html.csa-v2 body.csa-client .auth-copy .eyebrow {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    padding: 6px 11px;
    border: 1px solid rgba(91, 219, 250, .24);
    border-radius: 999px;
    color: #68e1fb;
    background: rgba(8, 185, 231, .08);
    font-size: 9.5px;
    font-weight: 840;
    letter-spacing: .09em;
    text-decoration: none;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .auth-title {
    margin: 20px 0 14px;
    color: #fff;
    font-size: clamp(39px, 5.2vw, 68px);
    font-weight: 880;
    letter-spacing: -.055em;
    line-height: .98;
}

html.csa-v2 body.csa-client .auth-title-product {
    color: transparent;
    background: linear-gradient(105deg, #70e5ff, #7797ff 48%, #b29bff);
    background-clip: text;
    -webkit-background-clip: text;
}

html.csa-v2 body.csa-client .auth-copy > p {
    max-width: 570px;
    color: #a9b6cd;
    font-size: 14px;
    line-height: 1.65;
}

html.csa-v2 body.csa-client .auth-proof {
    gap: 8px;
    margin-top: 22px;
}

html.csa-v2 body.csa-client .auth-proof span {
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: #c4cee0;
    background: rgba(255, 255, 255, .055);
    font-size: 10px;
}

html.csa-v2 body.csa-client .auth-card {
    position: relative;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(114, 92, 255, .08), transparent 44%),
        rgba(255, 255, 255, .96);
    box-shadow: 0 30px 80px rgba(2, 7, 23, .36), inset 0 1px 0 #fff;
    backdrop-filter: blur(22px);
}

html.csa-v2 body.csa-client .auth-card::before {
    position: absolute;
    inset: -1px -1px auto;
    height: 4px;
    border-radius: 20px 20px 0 0;
    content: "";
    background: var(--pc-accent-gradient);
}

html.csa-v2 body.csa-client .auth-card-top {
    gap: 13px;
    margin-bottom: 22px;
}

html.csa-v2 body.csa-client .auth-card h1 {
    color: #141b30;
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -.04em;
}

html.csa-v2 body.csa-client .auth-card p {
    color: #6d778b;
    font-size: 11.5px;
    line-height: 1.5;
}

html.csa-v2 body.csa-client .auth-card form {
    gap: 12px;
}

html.csa-v2 body.csa-client .auth-card .btn {
    min-height: 43px;
}

html.csa-v2 body.csa-client .auth-card .auth-back-link {
    margin-top: 4px;
    color: #6e788d;
    font-size: 11px;
}

html.csa-v2 body.csa-client .auth-card .language-current {
    border-color: #dce1eb;
    background: #f8f9fc;
}

/* -------------------------------------------------------------------------- */
/* Server-rendered public landing                                             */
/* -------------------------------------------------------------------------- */

html.csa-v2:is(.landing-day, .landing-night) body {
    --premium-landing-cyan: #08b9e7;
    --premium-landing-violet: #725cff;
}

html.csa-v2.landing-day body {
    background:
        radial-gradient(circle at 10% 1%, rgba(8, 185, 231, .12), transparent 30rem),
        radial-gradient(circle at 92% 9%, rgba(114, 92, 255, .11), transparent 34rem),
        linear-gradient(180deg, #f8f9fc 0%, #f2f5f9 58%, #eef2f7 100%) !important;
}

html.csa-v2.landing-night body {
    background:
        radial-gradient(circle at 10% 1%, rgba(8, 185, 231, .17), transparent 31rem),
        radial-gradient(circle at 92% 9%, rgba(114, 92, 255, .2), transparent 36rem),
        linear-gradient(155deg, #080e1d 0%, #10172e 58%, #111731 100%) !important;
}

html.csa-v2:is(.landing-day, .landing-night) .site-header {
    border-bottom-color: color-mix(in srgb, var(--csa-line) 76%, transparent) !important;
    box-shadow: 0 8px 28px rgba(13, 22, 43, .055);
    backdrop-filter: blur(22px) saturate(140%);
}

html.csa-v2:is(.landing-day, .landing-night) .hero {
    padding-top: clamp(58px, 7vw, 86px);
}

html.csa-v2:is(.landing-day, .landing-night) .hero::before {
    inset: 9% 4vw auto !important;
    height: 68% !important;
    border-radius: 34px !important;
    background:
        linear-gradient(115deg, transparent, rgba(8, 185, 231, .12) 35%, rgba(114, 92, 255, .12) 64%, transparent) !important;
}

html.csa-v2:is(.landing-day, .landing-night) .hero-grid {
    gap: clamp(32px, 5vw, 66px);
}

html.csa-v2:is(.landing-day, .landing-night) .hero h1 {
    max-width: 760px;
    font-weight: 880;
    letter-spacing: -.05em !important;
    line-height: 1;
}

html.csa-v2:is(.landing-day, .landing-night) .hero p {
    margin-top: 18px;
    margin-bottom: 23px;
    line-height: 1.65;
}

html.csa-v2:is(.landing-day, .landing-night) .csa-btn {
    min-height: 42px;
    padding-inline: 17px;
    border-radius: 10px !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

html.csa-v2:is(.landing-day, .landing-night) .csa-btn-fill {
    background: linear-gradient(125deg, #6f5cff, #4d71f4 48%, #09bce2) !important;
    box-shadow: 0 13px 28px rgba(71, 90, 213, .25), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

html.csa-v2:is(.landing-day, .landing-night) .hero-media img {
    width: min(535px, 100%);
}

html.csa-v2:is(.landing-day, .landing-night) :where(.section-panel, .feature-card, .csa-free-card, .feature-note) {
    border-radius: 18px !important;
    box-shadow: 0 16px 44px rgba(17, 26, 53, .095);
}

html.csa-v2:is(.landing-day, .landing-night) .csa-free-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

html.csa-v2:is(.landing-day, .landing-night) .csa-free-card:hover {
    box-shadow: 0 22px 50px rgba(35, 55, 106, .14);
    transform: translateY(-3px);
}

html.csa-v2:is(.landing-day, .landing-night) .stat {
    min-height: 86px;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(18, 27, 54, .07);
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    html.csa-v2 body.csa-client .client-topbar {
        width: 228px;
    }

    html.csa-v2 body.csa-client .client-shell .app-content {
        width: calc(100% - 228px);
        margin-left: 228px;
        padding: 18px 18px 36px;
    }

    html.csa-v2 body.csa-client .store-grid.store-grid-v3,
    html.csa-v2 body.csa-client #guestPlanList.product-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 {
        grid-template-columns: minmax(220px, 1fr) minmax(250px, 1fr);
    }

    html.csa-v2 body.csa-client .client-order-card .order-context-v3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    html.csa-v2 body.csa-client .client-topbar {
        position: sticky;
        inset: 0 auto auto;
        width: 100%;
        height: auto;
        padding: 8px 10px;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--pc-line);
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 8px 24px rgba(17, 26, 54, .08);
        backdrop-filter: blur(18px) saturate(135%);
    }

    html.csa-v2 body.csa-client .client-topbar::before,
    html.csa-v2 body.csa-client .client-topbar::after {
        display: none;
    }

    html.csa-v2 body.csa-client .client-topbar .brand {
        padding: 0;
        border: 0;
    }

    html.csa-v2 body.csa-client .client-topbar .brand img {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-color: var(--pc-line);
        background: #fff;
        box-shadow: var(--pc-shadow-sm);
    }

    html.csa-v2 body.csa-client .client-topbar .brand h1 {
        max-width: 190px;
        color: var(--pc-text);
    }

    html.csa-v2 body.csa-client .client-topbar .actions .btn,
    html.csa-v2 body.csa-client .client-topbar .language-current {
        border-color: var(--pc-line);
        color: var(--pc-text);
        background: #fff;
    }

    html.csa-v2 body.csa-client .client-topbar .tabs {
        top: calc(100% + 7px);
        border-color: rgba(138, 154, 194, .28);
        border-radius: 14px;
        background: var(--pc-ink-gradient);
        box-shadow: 0 24px 56px rgba(8, 14, 33, .32);
    }

    html.csa-v2 body.csa-client .client-topbar .tab.active::before {
        display: none;
    }

    html.csa-v2 body.csa-client .client-shell .app-content {
        width: 100%;
        margin-left: 0;
        padding: 12px 12px 30px;
    }

    html.csa-v2 body.csa-client .dashboard-utility-grid {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .store-hero.store-header-v3 {
        min-height: 0;
    }

    html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .client-order-card .client-order-main,
    html.csa-v2 body.csa-client .client-order-card .client-order-line,
    html.csa-v2 body.csa-client .client-order-card .order-context-v3 {
        grid-column: auto;
    }

    html.csa-v2 body.csa-client .client-order-card .order-context-v3 {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .hero-inner {
        padding: 32px;
    }

    html.csa-v2 body.csa-client .auth-view {
        padding: 24px;
    }

    html.csa-v2 body.csa-client .auth-stage {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 640px;
        padding-block: 28px;
    }

    html.csa-v2 body.csa-client .auth-copy {
        text-align: center;
    }

    html.csa-v2 body.csa-client .auth-copy > p {
        margin-inline: auto;
    }

    html.csa-v2 body.csa-client .auth-proof {
        justify-content: center;
    }
}

@media (max-width: 720px) {
    html.csa-v2 body.csa-client :where(.btn, button, input, select, textarea) {
        min-height: 44px;
    }

    html.csa-v2 body.csa-client .rental-dashboard.rental-dashboard-empty {
        min-height: 0;
    }

    html.csa-v2 body.csa-client .rental-dashboard-empty {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    html.csa-v2 body.csa-client .store-hero.store-header-v3 {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }

    html.csa-v2 body.csa-client .store-header-v3 .store-search {
        flex-basis: auto;
        width: 100%;
    }

    html.csa-v2 body.csa-client .catalog-filters-v3 {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .store-grid.store-grid-v3,
    html.csa-v2 body.csa-client #guestPlanList.product-strip {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .client-order-card .client-order-main,
    html.csa-v2 body.csa-client .client-order-card .client-order-line,
    html.csa-v2 body.csa-client .client-order-card .order-context-v3 {
        grid-column: 1;
    }

    html.csa-v2 body.csa-client .profile-stat-grid,
    html.csa-v2 body.csa-client .profile-main-grid {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .public-nav {
        position: relative;
        top: auto;
        align-items: stretch;
        flex-direction: column;
    }

    html.csa-v2 body.csa-client .public-nav .actions {
        width: 100%;
    }

    html.csa-v2 body.csa-client .hero-stage {
        min-height: 0;
    }

    html.csa-v2 body.csa-client .hero-inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    html.csa-v2 body.csa-client .showcase-card {
        max-width: 430px;
        margin-inline: auto;
        transform: none;
    }
}

@media (max-width: 520px) {
    html.csa-v2 body.csa-client .client-shell .app-content {
        padding: 9px 9px 24px;
    }

    html.csa-v2 body.csa-client .client-topbar .brand h1 {
        max-width: 145px;
        font-size: 12.5px;
    }

    html.csa-v2 body.csa-client .client-shell .panel,
    html.csa-v2 body.csa-client .client-shell .rental-dashboard,
    html.csa-v2 body.csa-client .store-hero.store-header-v3 {
        border-radius: 12px !important;
    }

    html.csa-v2 body.csa-client .client-shell .panel-head,
    html.csa-v2 body.csa-client .client-shell .panel-body {
        padding-right: 12px;
        padding-left: 12px;
    }

    html.csa-v2 body.csa-client .rental-dashboard.rental-dashboard-empty {
        padding: 14px;
    }

    html.csa-v2 body.csa-client .rental-dashboard h2 {
        font-size: 20px;
    }

    html.csa-v2 body.csa-client :where(.rental-product-card, .rental-row, .rental-row-v3) {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
    }

    html.csa-v2 body.csa-client :where(.rental-product-card, .rental-row, .rental-row-v3) img {
        width: 52px;
        height: 52px;
    }

    html.csa-v2 body.csa-client :where(.rental-facts, .plan-specs, .plan-v3-specs, .plan-specs-v3, .rental-facts-v3, .checkout-mechanics-v3) {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .catalog-category-row-v3 {
        align-items: flex-start;
        flex-direction: column;
    }

    html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3,
    html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3 .plan-tile-head-v3 {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 .media,
    html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3 .product-thumb {
        width: 62px;
        height: 62px;
        min-height: 62px;
    }

    html.csa-v2 body.csa-client .plan-card-footer.plan-tile-footer-v3 {
        align-items: stretch;
        flex-direction: column;
    }

    html.csa-v2 body.csa-client .plan-card-footer.plan-tile-footer-v3 .btn {
        width: 100%;
    }

    html.csa-v2 body.csa-client .checkout-steps-v3,
    html.csa-v2 body.csa-client .period-options-v3,
    html.csa-v2 body.csa-client .checkout-extras-fields-v3 {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .client-order-line {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .client-order-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .profile-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    html.csa-v2 body.csa-client .public-nav,
    html.csa-v2 body.csa-client .hero-stage,
    html.csa-v2 body.csa-client .public-band {
        width: calc(100% - 18px);
    }

    html.csa-v2 body.csa-client .public-nav .actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    html.csa-v2 body.csa-client .public-nav .language-switch {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .hero-inner {
        padding: 25px 20px;
    }

    html.csa-v2 body.csa-client .hero-stage .hero-copy h2 {
        font-size: 36px;
    }

    html.csa-v2 body.csa-client .hero-proof {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .public-band {
        padding: 16px;
        border-radius: 14px;
    }

    html.csa-v2 body.csa-client .auth-view {
        padding: 12px;
    }

    html.csa-v2 body.csa-client .auth-stage {
        gap: 22px;
        padding-block: 18px;
    }

    html.csa-v2 body.csa-client .auth-title {
        font-size: 39px;
    }

    html.csa-v2 body.csa-client .auth-card {
        padding: 19px;
        border-radius: 15px;
    }

    html.csa-v2 body.csa-client .drawer-panel {
        width: 100vw;
    }

    html.csa-v2 body.csa-client .drawer-body {
        padding: 12px;
    }

    html.csa-v2 body.csa-client .plan-detail-summary-v3 {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    html.csa-v2 body.csa-client .plan-detail-summary-v3 img {
        width: 78px;
        height: 78px;
    }

    html.csa-v2:is(.landing-day, .landing-night) .hero h1 {
        font-size: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.csa-v2 body.csa-client *,
    html.csa-v2 body.csa-client *::before,
    html.csa-v2 body.csa-client *::after,
    html.csa-v2:is(.landing-day, .landing-night) * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Production visual QA: keep long Vietnamese brand and helper copy readable. */
html.csa-v2 body.csa-client .client-shell .brand > div {
    width: auto;
    min-width: 0;
    max-width: calc(100% - 52px);
}

html.csa-v2 body.csa-client .client-shell .brand :where(h1, p) {
    width: 100%;
    min-width: 0;
}

html.csa-v2 body.csa-client .client-shell .brand h1 {
    overflow: visible;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
}

html.csa-v2 body.csa-client .client-shell .brand p {
    display: none;
}

html.csa-v2 body.csa-client .public-view .section-title p,
html.csa-v2 body.csa-client .public-view .public-band .section-title p {
    letter-spacing: -.01em;
}

/* -------------------------------------------------------------------------- */
/* Production detail polish: sidebar footer, popovers and compact drawers     */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .client-topbar {
    isolation: isolate;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
}

html.csa-v2 body.csa-client .client-topbar .tabs {
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-color: rgba(170, 190, 225, .34) transparent;
    scrollbar-width: thin;
}

html.csa-v2 body.csa-client .client-topbar .tabs::-webkit-scrollbar {
    width: 4px;
}

html.csa-v2 body.csa-client .client-topbar .tabs::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(170, 190, 225, .3);
}

html.csa-v2 body.csa-client .client-topbar .actions {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
    margin-top: auto;
    margin-bottom: 2px;
    padding-bottom: 2px;
}

html.csa-v2 body.csa-client .client-topbar .actions > *,
html.csa-v2 body.csa-client .client-topbar .language-switch {
    min-width: 0;
}

html.csa-v2 body.csa-client .client-topbar .language-switch {
    position: relative;
    z-index: 40;
    width: 100%;
}

html.csa-v2 body.csa-client .client-topbar .language-current {
    max-width: 100%;
}

html.csa-v2 body.csa-client .client-topbar .language-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.csa-v2 body.csa-client .client-topbar .language-menu {
    top: auto;
    right: auto;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 80;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: min(220px, calc(100dvh - 92px));
    gap: 4px;
    padding: 6px;
    overflow-x: clip;
    overflow-y: auto;
    border-color: rgba(205, 214, 230, .96);
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -16px 38px rgba(5, 12, 30, .24), 0 2px 8px rgba(5, 12, 30, .08);
    transform: translateY(6px) scale(.98);
    transform-origin: bottom left;
    overscroll-behavior: contain;
}

html.csa-v2 body.csa-client .client-topbar .language-orb.open .language-menu {
    transform: translateY(0) scale(1);
}

html.csa-v2 body.csa-client .client-topbar .language-menu button {
    min-height: 38px;
    height: auto;
    padding: 7px 9px;
    border-color: transparent;
    border-radius: 8px;
    color: #3f4a61;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 720;
}

html.csa-v2 body.csa-client .client-topbar .language-menu button strong {
    min-width: 30px;
    height: 24px;
    background: #edf6ff;
    color: #087789;
}

html.csa-v2 body.csa-client .client-topbar .language-menu button:hover {
    border-color: #dfe6f1;
    color: #121a2c;
    background: #f4f7fb;
    box-shadow: none;
    transform: none;
}

html.csa-v2 body.csa-client .client-topbar .language-menu button:focus-visible {
    border-color: rgba(8, 185, 231, .56);
    outline: 3px solid rgba(8, 185, 231, .18);
    outline-offset: -1px;
    color: #121a2c;
    background: #f4fbfd;
}

html.csa-v2 body.csa-client .client-topbar .language-current[aria-expanded="true"] {
    border-color: rgba(87, 196, 240, .42);
    color: #fff;
    background: rgba(88, 111, 216, .2);
    box-shadow: 0 0 0 3px rgba(8, 185, 231, .09);
}

html.csa-v2 body.csa-client .client-topbar .actions .btn.danger:hover,
html.csa-v2 body.csa-client .client-topbar .actions .btn.danger:focus-visible {
    border-color: rgba(255, 132, 145, .3);
    color: #ffd8dd;
    background: rgba(210, 70, 85, .15);
}

html.csa-v2 body.csa-client .client-topbar .tab:focus-visible {
    border-color: rgba(125, 211, 252, .34);
    outline: 3px solid rgba(8, 185, 231, .18);
    outline-offset: -2px;
    color: #fff;
    background: rgba(255, 255, 255, .075);
}

html.csa-v2 body.csa-client .drawer-panel {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
}

html.csa-v2 body.csa-client .drawer-head {
    flex: 0 0 auto;
    align-items: center;
}

html.csa-v2 body.csa-client .drawer-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

html.csa-v2 body.csa-client .drawer-head :where(h2, p) {
    min-width: 0;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

html.csa-v2 body.csa-client .drawer-close {
    flex: 0 0 36px;
}

html.csa-v2 body.csa-client .drawer-close:hover,
html.csa-v2 body.csa-client .drawer-close:focus-visible {
    border-color: #c7d0df;
    color: #172038;
    background: #f1f4f9;
    box-shadow: 0 7px 18px rgba(22, 31, 58, .1);
}

html.csa-v2 body.csa-client .drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

html.csa-v2 body.csa-client .drawer.drawer-compact {
    padding: clamp(8px, 2.4vh, 20px);
}

html.csa-v2 body.csa-client .drawer.drawer-compact .drawer-panel {
    width: min(700px, calc(100vw - 24px));
    height: auto;
    max-height: calc(100dvh - clamp(16px, 4.8vh, 40px));
}

html.csa-v2 body.csa-client .drawer.drawer-compact .drawer-head {
    position: relative;
}

html.csa-v2 body.csa-client .drawer.drawer-compact .confirm-card {
    width: min(100%, 540px);
    margin: auto;
}

html.csa-v2 body.csa-client .confirm-card {
    align-items: start;
    gap: 13px;
    padding: 16px;
    border-radius: 13px;
}

html.csa-v2 body.csa-client .confirm-card > div {
    min-width: 0;
}

html.csa-v2 body.csa-client .confirm-card :where(h3, p) {
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

html.csa-v2 body.csa-client .confirm-actions {
    justify-content: flex-end;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid #e8ebf2;
}

html.csa-v2 body.csa-client .confirm-actions .btn {
    min-width: 108px;
}

html.csa-v2 body.csa-client :where(.plan-detail-summary-v3, .checkout-plan) {
    align-items: start;
}

html.csa-v2 body.csa-client :where(.plan-detail-summary-v3, .checkout-plan) > * {
    min-width: 0;
}

html.csa-v2 body.csa-client :where(
    .drawer-head,
    .plan-detail-summary-v3,
    .checkout-plan,
    .manual-contact-checkout-v3,
    .detail-card,
    .rent-period-note,
    .checkout-note
) :where(h2, h3, h4, p, span, strong, small, dt, dd, li, a) {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

html.csa-v2 body.csa-client :where(
    .plan-detail-summary-v3,
    .checkout-plan,
    .manual-contact-checkout-v3,
    .detail-card
) :where(h2, h3, p) {
    text-wrap: pretty;
}

html.csa-v2 body.csa-client .plan-description-v3 {
    min-width: 0;
    overflow: hidden;
}

html.csa-v2 body.csa-client .plan-description-v3 .plan-detail-desc {
    line-height: 1.62;
}

html.csa-v2 body.csa-client .plan-description-v3 :where(img, video, iframe) {
    max-width: 100%;
}

html.csa-v2 body.csa-client .plan-description-v3 table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

html.csa-v2 body.csa-client .plan-detail-actions-v3 {
    justify-content: flex-end;
    gap: 7px;
    padding-top: 11px;
    border-top: 1px solid #e5e9f1;
}

html.csa-v2 body.csa-client :where(
    .plan-tile-v3,
    .notice-card.interactive,
    .guide-card,
    .pay-method-card,
    .period-option-v3
):focus-visible {
    border-color: rgba(72, 103, 225, .54);
    outline: 3px solid rgba(74, 102, 233, .14);
    outline-offset: 2px;
    box-shadow: 0 12px 28px rgba(35, 50, 103, .12);
}

html.csa-v2 body.csa-client :where(
    .checkout-plan,
    .period-picker-v3,
    .checkout-extras-v3,
    .detail-card
):focus-within {
    border-color: rgba(88, 111, 216, .36);
    box-shadow: 0 0 0 3px rgba(78, 102, 231, .075), var(--pc-shadow-sm);
}

@media (min-width: 981px) and (max-height: 760px) {
    html.csa-v2 body.csa-client .client-topbar {
        padding-top: 11px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    html.csa-v2 body.csa-client .client-topbar .brand {
        padding-bottom: 10px;
    }

    html.csa-v2 body.csa-client .client-topbar .tabs {
        gap: 2px;
        margin: 8px 0;
    }

    html.csa-v2 body.csa-client .client-topbar .tab {
        min-height: 35px;
        padding-block: 6px;
    }

    html.csa-v2 body.csa-client .client-topbar .actions {
        gap: 5px;
        padding-top: 8px;
    }

    html.csa-v2 body.csa-client .client-topbar .actions .btn,
    html.csa-v2 body.csa-client .client-topbar .language-current {
        min-height: 34px;
    }
}

@media (min-width: 981px) and (max-height: 560px) {
    html.csa-v2 body.csa-client .client-topbar .brand img {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    html.csa-v2 body.csa-client .client-topbar .tabs {
        margin: 5px 0;
    }

    html.csa-v2 body.csa-client .client-topbar .tab {
        min-height: 32px;
        padding: 5px 9px;
        font-size: 11.5px;
    }

    html.csa-v2 body.csa-client .client-topbar .actions {
        padding-top: 6px;
    }
}

@media (max-width: 980px) {
    html.csa-v2 body.csa-client .client-topbar {
        padding-bottom: 8px;
    }

    html.csa-v2 body.csa-client .client-topbar .actions {
        z-index: 70;
        margin: 0;
        padding: 0;
    }

    html.csa-v2 body.csa-client .client-topbar .language-switch {
        width: auto;
    }

    html.csa-v2 body.csa-client .client-topbar .language-menu {
        top: calc(100% + 8px);
        right: 0;
        bottom: auto;
        left: auto;
        width: min(180px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 72px);
        transform: translateY(-6px) scale(.98);
        transform-origin: top right;
    }

    html.csa-v2 body.csa-client .client-topbar .language-orb.open .language-menu {
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 520px) {
    html.csa-v2 body.csa-client .drawer.drawer-compact {
        padding: 6px;
    }

    html.csa-v2 body.csa-client .drawer.drawer-compact .drawer-panel {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
    }

    html.csa-v2 body.csa-client .drawer-head {
        gap: 9px;
        padding: 10px 12px;
    }

    html.csa-v2 body.csa-client .drawer-head h2 {
        font-size: 17px;
        line-height: 1.22;
    }

    html.csa-v2 body.csa-client .drawer-head p {
        margin-top: 2px;
        font-size: 10.5px;
        line-height: 1.35;
    }

    html.csa-v2 body.csa-client .drawer-body {
        padding: 10px;
        scrollbar-gutter: auto;
    }

    html.csa-v2 body.csa-client .confirm-card {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding: 13px;
    }

    html.csa-v2 body.csa-client .confirm-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    html.csa-v2 body.csa-client .confirm-actions .btn {
        width: 100%;
        min-width: 0;
    }

    html.csa-v2 body.csa-client .plan-detail-actions-v3 {
        display: grid;
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .plan-detail-actions-v3 .btn {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------- */
/* Premium client P4: information-led rental workspace                        */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client {
    --p4-canvas: #f4f4f1;
    --p4-canvas-deep: #ecece8;
    --p4-surface: #ffffff;
    --p4-surface-soft: #f8f8f6;
    --p4-surface-blue: #f2f6ff;
    --p4-ink: #15181e;
    --p4-ink-soft: #5f6672;
    --p4-ink-faint: #89909a;
    --p4-line: #dedfdd;
    --p4-line-strong: #cdd0d1;
    --p4-sidebar: #11151c;
    --p4-sidebar-soft: #1a202a;
    --p4-blue: #2f63d8;
    --p4-blue-deep: #234daa;
    --p4-blue-soft: #eaf1ff;
    --p4-cyan: #147f92;
    --p4-cyan-soft: #eaf7f8;
    --p4-amber: #a76312;
    --p4-amber-soft: #fff5e6;
    --p4-green: #167455;
    --p4-green-soft: #eaf7f1;
    --p4-red: #b8404e;
    --p4-red-soft: #fff0f1;
    --p4-radius-xs: 6px;
    --p4-radius-sm: 9px;
    --p4-radius: 12px;
    --p4-shadow: 0 1px 2px rgba(21, 24, 30, .04), 0 10px 28px rgba(21, 24, 30, .045);
    --p4-shadow-raised: 0 2px 4px rgba(21, 24, 30, .05), 0 18px 42px rgba(21, 24, 30, .075);
    --pc-text: var(--p4-ink);
    --pc-muted: var(--p4-ink-soft);
    --pc-faint: var(--p4-ink-faint);
    --pc-bg: var(--p4-canvas);
    --pc-surface: var(--p4-surface);
    --pc-surface-soft: var(--p4-surface-soft);
    --pc-line: var(--p4-line);
    --pc-line-strong: var(--p4-line-strong);
    --pc-blue: var(--p4-blue);
    --pc-cyan: var(--p4-cyan);
    --pc-violet: var(--p4-blue);
    --pc-accent-gradient: var(--p4-blue);
    --pc-ink-gradient: var(--p4-sidebar);
    color: var(--p4-ink);
    background: var(--p4-canvas);
    font-family: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    text-rendering: optimizeLegibility;
}

html.csa-v2 body.csa-client::before {
    display: none !important;
}

html.csa-v2 body.csa-client :where(button, input, select, textarea) {
    font: inherit;
}

html.csa-v2 body.csa-client :where(input, select, textarea) {
    min-height: 40px;
    border-color: var(--p4-line-strong);
    border-radius: var(--p4-radius-xs);
    color: var(--p4-ink);
    background: var(--p4-surface);
    box-shadow: 0 1px 0 rgba(21, 24, 30, .025);
}

html.csa-v2 body.csa-client :where(input, select, textarea):hover {
    border-color: #aeb3b8;
}

html.csa-v2 body.csa-client :where(input, select, textarea):focus {
    border-color: var(--p4-blue);
    box-shadow: 0 0 0 3px rgba(47, 99, 216, .12);
}

html.csa-v2 body.csa-client .field {
    gap: 5px;
}

html.csa-v2 body.csa-client .field label {
    color: #707782;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .045em;
}

html.csa-v2 body.csa-client .btn {
    min-height: 36px;
    padding: 7px 12px;
    overflow: visible;
    border-color: var(--p4-line-strong);
    border-radius: var(--p4-radius-xs);
    color: #2f3540;
    background: var(--p4-surface);
    box-shadow: 0 1px 1px rgba(21, 24, 30, .035);
    font-size: 12px;
    font-weight: 720;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

html.csa-v2 body.csa-client .btn::after {
    display: none;
}

html.csa-v2 body.csa-client .btn:hover {
    border-color: #aeb4bb;
    color: var(--p4-ink);
    background: #fbfbfa;
    box-shadow: 0 5px 14px rgba(21, 24, 30, .07);
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .btn.primary {
    border-color: var(--p4-blue);
    color: #fff;
    background: var(--p4-blue);
    box-shadow: 0 5px 14px rgba(47, 99, 216, .2);
}

html.csa-v2 body.csa-client .btn.primary:hover {
    border-color: var(--p4-blue-deep);
    color: #fff;
    background: var(--p4-blue-deep);
    box-shadow: 0 7px 18px rgba(47, 99, 216, .25);
}

html.csa-v2 body.csa-client .btn.danger {
    border-color: #efc8cd;
    color: var(--p4-red);
    background: #fffafa;
}

html.csa-v2 body.csa-client .pill {
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 750;
}

html.csa-v2 body.csa-client .client-topbar {
    width: 236px;
    padding: 18px 14px max(14px, env(safe-area-inset-bottom));
    border-right: 1px solid #242b35;
    background: var(--p4-sidebar);
    box-shadow: 8px 0 30px rgba(17, 21, 28, .07);
}

html.csa-v2 body.csa-client .client-topbar::before,
html.csa-v2 body.csa-client .client-topbar::after {
    display: none !important;
}

html.csa-v2 body.csa-client .client-topbar .brand {
    gap: 11px;
    padding: 0 3px 16px;
    border-bottom: 1px solid #2a3039;
}

html.csa-v2 body.csa-client .client-topbar .brand img {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    padding: 0;
    border: 1px solid #353d49;
    border-radius: 10px;
    background: #202631;
    box-shadow: none;
}

html.csa-v2 body.csa-client .client-topbar .brand h1 {
    color: #f4f5f7;
    font-size: 12px;
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: -.01em;
}

html.csa-v2 body.csa-client .client-topbar .tabs {
    gap: 3px;
    margin: 14px 0 12px;
}

html.csa-v2 body.csa-client .client-topbar .tab {
    min-height: 39px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #98a1ae;
    font-size: 12px;
    font-weight: 650;
    transform: none;
}

html.csa-v2 body.csa-client .client-topbar .tab i {
    width: 18px;
    color: #707b89;
    font-size: 12px;
}

html.csa-v2 body.csa-client .client-topbar .tab:hover {
    border-color: #2b333e;
    color: #f3f4f6;
    background: #191f28;
    transform: none;
}

html.csa-v2 body.csa-client .client-topbar .tab:hover i {
    color: #b9c8e5;
    transform: none;
}

html.csa-v2 body.csa-client .client-topbar .tab.active {
    border-color: #e2e5e9;
    color: #171c24;
    background: #f5f6f7;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .15);
}

html.csa-v2 body.csa-client .client-topbar .tab.active::before {
    top: 9px;
    left: -15px;
    width: 3px;
    height: 21px;
    background: #6f96ed;
    box-shadow: none;
    transform: none;
}

html.csa-v2 body.csa-client .client-topbar .tab.active i {
    color: var(--p4-blue);
}

html.csa-v2 body.csa-client .client-topbar .actions {
    gap: 6px;
    padding-top: 11px;
    border-top: 1px solid #2a3039;
}

html.csa-v2 body.csa-client .client-topbar .actions .btn,
html.csa-v2 body.csa-client .client-topbar .language-current {
    min-height: 36px;
    border-color: #303844;
    border-radius: 8px;
    color: #c6ccd4;
    background: #181e27;
    box-shadow: none;
    font-size: 11.5px;
}

html.csa-v2 body.csa-client .client-topbar .actions .btn:hover,
html.csa-v2 body.csa-client .client-topbar .language-current:hover {
    border-color: #424c5b;
    color: #fff;
    background: #202731;
    box-shadow: none;
}

html.csa-v2 body.csa-client .client-topbar .language-code {
    min-width: 30px;
    height: 24px;
    padding: 0 7px;
    background: #303a48;
    font-size: 9.5px;
}

html.csa-v2 body.csa-client .client-shell .app-content {
    width: calc(100% - 236px);
    margin-left: 236px;
    padding: 24px 28px 48px;
}

html.csa-v2 body.csa-client .client-shell .app-content > * {
    max-width: 1500px;
}

html.csa-v2 body.csa-client .client-shell .panel {
    margin-bottom: 12px;
    border-color: var(--p4-line);
    border-radius: var(--p4-radius);
    background: var(--p4-surface);
    box-shadow: var(--p4-shadow);
}

html.csa-v2 body.csa-client .client-shell .panel-head {
    min-height: 58px;
    padding: 13px 16px;
    border-bottom-color: #e8e8e5;
    background: var(--p4-surface);
}

html.csa-v2 body.csa-client .client-shell .panel-head h2 {
    color: var(--p4-ink);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.015em;
}

html.csa-v2 body.csa-client .client-shell .panel-head h2 i {
    color: var(--p4-blue);
}

html.csa-v2 body.csa-client .client-shell .panel-head p {
    color: var(--p4-ink-soft);
    font-size: 11px;
}

html.csa-v2 body.csa-client .client-shell .panel-body {
    padding: 15px 16px;
}

html.csa-v2 body.csa-client .client-shell :where(.rental-product-card, .rental-row, .rental-row-v3) {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
    min-height: 106px;
    padding: 13px;
    border-color: var(--p4-line);
    border-radius: var(--p4-radius-sm);
    background: var(--p4-surface);
    box-shadow: none;
}

html.csa-v2 body.csa-client .client-shell :where(.rental-product-card, .rental-row, .rental-row-v3):hover {
    border-color: #babec2;
    box-shadow: var(--p4-shadow);
    transform: none;
}

html.csa-v2 body.csa-client .client-shell :where(.rental-product-card, .rental-row, .rental-row-v3) img {
    width: 68px;
    height: 68px;
    border-color: var(--p4-line);
    border-radius: 11px;
    box-shadow: none;
}

html.csa-v2 body.csa-client .client-shell .rental-product-title h3 {
    color: var(--p4-ink);
    font-size: 15px;
    font-weight: 760;
}

html.csa-v2 body.csa-client .client-shell .rental-progress {
    height: 4px;
    background: #e3e5e7;
}

html.csa-v2 body.csa-client .client-shell .rental-progress > span {
    background: var(--p4-blue);
    box-shadow: none;
}

html.csa-v2 body.csa-client :where(.rental-facts, .plan-specs, .plan-v3-specs, .plan-specs-v3, .rental-facts-v3, .checkout-mechanics-v3) {
    gap: 6px;
    margin-top: 8px;
}

html.csa-v2 body.csa-client :where(.rental-facts, .plan-specs, .plan-v3-specs, .plan-specs-v3, .rental-facts-v3, .checkout-mechanics-v3) > div {
    min-height: 58px;
    padding: 8px 9px;
    border: 1px solid #e1e3e4;
    border-left: 3px solid #b7c9ef;
    border-radius: 7px;
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client :where(.rental-facts, .rental-facts-v3, .checkout-mechanics-v3) > div:nth-child(2) {
    border-left-color: #9fcbd1;
}

html.csa-v2 body.csa-client :where(.rental-facts, .rental-facts-v3, .checkout-mechanics-v3) > div:nth-child(3) {
    border-left-color: #e2bd82;
}

html.csa-v2 body.csa-client :where(.rental-facts, .plan-specs, .plan-v3-specs, .plan-specs-v3, .rental-facts-v3, .checkout-mechanics-v3) :where(dt, span) {
    color: var(--p4-ink-faint);
    font-size: 8.5px;
    font-weight: 780;
    letter-spacing: .065em;
}

html.csa-v2 body.csa-client :where(.rental-facts, .plan-specs, .plan-v3-specs, .plan-specs-v3, .rental-facts-v3) dd,
html.csa-v2 body.csa-client .checkout-mechanics-v3 strong {
    color: #252a33;
    font-size: 11px;
    font-weight: 720;
    line-height: 1.35;
}

html.csa-v2 body.csa-client .dashboard-utility-grid {
    grid-template-columns: minmax(300px, .68fr) minmax(0, 1.32fr);
    gap: 12px;
}

html.csa-v2 body.csa-client .account-line {
    min-height: 42px;
    padding: 8px 10px;
    border-color: #e5e6e5;
    border-radius: 7px;
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .account-line span {
    color: var(--p4-ink-faint);
    font-size: 9px;
    font-weight: 760;
}

html.csa-v2 body.csa-client .account-line strong {
    color: #262b33;
    font-size: 12px;
}

html.csa-v2 body.csa-client .notice-card {
    padding: 11px 12px 11px 15px;
    border-color: #e3e4e3;
    border-radius: 8px;
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .notice-card::before {
    background: var(--p4-blue);
}

html.csa-v2 body.csa-client .notice-card h3 {
    color: var(--p4-ink);
    font-size: 12.5px;
    font-weight: 720;
}

html.csa-v2 body.csa-client .store-hero.store-header-v3 {
    min-height: 100px;
    margin-bottom: 10px;
    padding: 13px 2px 17px;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--p4-line-strong);
    border-radius: 0;
    color: var(--p4-ink);
    background: transparent;
    box-shadow: none;
}

html.csa-v2 body.csa-client .store-hero.store-header-v3::before,
html.csa-v2 body.csa-client .store-hero.store-header-v3::after {
    display: none !important;
}

html.csa-v2 body.csa-client .store-hero .eyebrow {
    color: var(--p4-blue);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
}

html.csa-v2 body.csa-client .store-hero h2 {
    color: var(--p4-ink);
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 760;
    letter-spacing: -.045em;
}

html.csa-v2 body.csa-client .store-hero p {
    color: var(--p4-ink-soft);
    font-size: 12px;
}

html.csa-v2 body.csa-client .store-header-v3 .store-search {
    flex-basis: 370px;
    padding: 10px;
    border: 1px solid var(--p4-line);
    border-radius: var(--p4-radius-sm);
    background: var(--p4-surface);
    box-shadow: var(--p4-shadow);
    backdrop-filter: none;
}

html.csa-v2 body.csa-client .store-header-v3 .store-search label {
    color: var(--p4-ink-faint);
    font-size: 9px;
}

html.csa-v2 body.csa-client .store-header-v3 .store-search input {
    border-color: var(--p4-line-strong);
    color: var(--p4-ink);
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .store-header-v3 .store-search input::placeholder {
    color: #999fa7;
}

html.csa-v2 body.csa-client .catalog-filters-v3 {
    gap: 8px;
    margin-bottom: 8px;
    padding: 9px;
    border-color: var(--p4-line);
    border-radius: var(--p4-radius-sm);
    background: var(--p4-surface);
    box-shadow: none;
}

html.csa-v2 body.csa-client .catalog-filters-v3 :where(input, select) {
    min-height: 38px;
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .catalog-category-row-v3 {
    gap: 10px;
    margin-bottom: 6px;
    padding: 8px 1px 9px;
    border: 0;
    border-bottom: 1px solid var(--p4-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 > span {
    color: var(--p4-ink-faint);
    font-size: 9px;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 .category-pill {
    min-height: 29px;
    padding: 5px 9px;
    border-color: var(--p4-line);
    border-radius: 7px;
    color: var(--p4-ink-soft);
    background: var(--p4-surface);
    font-size: 10px;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 .category-pill:hover {
    border-color: #aeb5bf;
    color: var(--p4-ink);
    background: #fff;
    transform: none;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 .category-pill.active {
    border-color: #b9caf0;
    color: var(--p4-blue-deep);
    background: var(--p4-blue-soft);
    box-shadow: none;
}

html.csa-v2 body.csa-client .store-toolbar-v3 {
    min-height: 34px;
    margin-bottom: 7px;
}

html.csa-v2 body.csa-client .store-toolbar-v3 strong {
    color: #333943;
    font-size: 11.5px;
}

html.csa-v2 body.csa-client .store-grid.store-grid-v3 {
    gap: 11px;
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3 {
    border-color: var(--p4-line);
    border-radius: var(--p4-radius);
    background: var(--p4-surface);
    box-shadow: 0 1px 2px rgba(21, 24, 30, .025);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3::before {
    inset: 0 auto 0 0;
    width: 3px;
    height: auto;
    opacity: 1;
    background: var(--p4-blue);
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3[data-delivery="manual"]::before {
    background: #c17b23;
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3:hover {
    border-color: #b9bdc2;
    box-shadow: var(--p4-shadow-raised);
    transform: translateY(-2px);
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3 .body {
    gap: 10px;
    padding: 14px 14px 13px 16px;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 .media {
    width: 68px;
    height: 68px;
    min-height: 68px;
    border-color: var(--p4-line);
    border-radius: 11px;
    background: var(--p4-surface-soft);
    box-shadow: none;
}

html.csa-v2 body.csa-client .plan-tile-v3:hover .plan-tile-head-v3 .media img {
    transform: none;
}

html.csa-v2 body.csa-client .plan-badges-v3 {
    gap: 4px;
    margin-bottom: 5px;
}

html.csa-v2 body.csa-client :where(.mode-badge, .delivery-badge, .quota-badge) {
    min-height: 21px;
    padding: 3px 7px;
    border-color: #b9d8dc;
    border-radius: 5px;
    color: #176d79;
    background: var(--p4-cyan-soft);
    font-size: 9px;
    font-weight: 750;
}

html.csa-v2 body.csa-client :where(.mode-badge.manual, .delivery-badge.manual) {
    border-color: #e4c691;
    color: var(--p4-amber);
    background: var(--p4-amber-soft);
}

html.csa-v2 body.csa-client .category-badge {
    min-height: 21px;
    padding: 3px 7px;
    border-color: var(--p4-line);
    border-radius: 5px;
    color: #6d747e;
    background: var(--p4-surface-soft);
    font-size: 9px;
}

html.csa-v2 body.csa-client .store-card h3 {
    color: var(--p4-ink);
    font-size: 16px;
    font-weight: 760;
    letter-spacing: -.025em;
    line-height: 1.28;
}

html.csa-v2 body.csa-client .store-card .plan-summary-v3 {
    min-height: 34px;
    color: var(--p4-ink-soft);
    font-size: 11px;
    line-height: 1.48;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-specs-v3 {
    gap: 5px;
    margin-top: 1px;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-specs-v3 > div {
    min-height: 61px;
    padding: 8px;
    border: 1px solid #e3e4e3;
    border-top: 2px solid #b8c9ec;
    border-left-width: 1px;
    border-radius: 7px;
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-specs-v3 > div:nth-child(2) {
    border-top-color: #9fcbd1;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-specs-v3 > div:nth-child(3) {
    border-top-color: #dfbc83;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-specs-v3 small {
    color: #858c95;
    font-size: 8.5px;
    line-height: 1.3;
}

html.csa-v2 body.csa-client .plan-card-footer.plan-tile-footer-v3 {
    align-items: center;
    gap: 10px;
    padding-top: 11px;
    border-top-color: #e5e6e5;
}

html.csa-v2 body.csa-client .plan-from-price span {
    color: var(--p4-ink-faint);
    font-size: 8px;
}

html.csa-v2 body.csa-client .plan-from-price strong {
    color: var(--p4-ink);
    font-size: 17px;
    font-weight: 780;
    letter-spacing: -.025em;
}

html.csa-v2 body.csa-client .plan-card-footer .btn.primary {
    min-height: 34px;
    padding-inline: 11px;
}

html.csa-v2 body.csa-client :where(.plan-mechanic, .mechanic-summary, .rental-mechanic, .rent-mechanic-inline-v3) {
    gap: 6px;
    padding: 9px 10px;
    border-color: #d9dde2;
    border-left: 3px solid var(--p4-blue);
    border-radius: 7px;
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .rent-period-note,
html.csa-v2 body.csa-client .checkout-note {
    padding: 9px 10px;
    border-color: #ccd8ed;
    border-left: 3px solid var(--p4-blue);
    border-radius: 7px;
    color: #46566f;
    background: var(--p4-surface-blue);
}

html.csa-v2 body.csa-client .drawer {
    background: rgba(15, 18, 23, .55);
    backdrop-filter: blur(3px);
}

html.csa-v2 body.csa-client .drawer-panel {
    width: min(800px, 100vw);
    border-left-color: #d9dbdc;
    background: var(--p4-canvas);
    box-shadow: -18px 0 54px rgba(15, 18, 23, .2);
}

html.csa-v2 body.csa-client .drawer.drawer-compact .drawer-panel {
    width: min(720px, calc(100vw - 24px));
    border: 1px solid #d5d7d8;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 18, 23, .22);
}

html.csa-v2 body.csa-client .drawer-head {
    min-height: 64px;
    padding: 11px 16px;
    border-bottom-color: #dfe0df;
    background: rgba(255, 255, 255, .96);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

html.csa-v2 body.csa-client .drawer-head h2 {
    color: var(--p4-ink);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -.025em;
}

html.csa-v2 body.csa-client .drawer-head p {
    color: var(--p4-ink-soft);
    font-size: 10.5px;
}

html.csa-v2 body.csa-client .drawer-close {
    border-color: var(--p4-line);
    border-radius: 8px;
    color: #505762;
    background: var(--p4-surface-soft);
    box-shadow: none;
}

html.csa-v2 body.csa-client .drawer-body {
    gap: 10px;
    padding: 14px;
}

html.csa-v2 body.csa-client :where(
    .plan-detail-summary-v3,
    .checkout-plan,
    .detail-card,
    .manual-contact-checkout-v3
) {
    border-color: var(--p4-line);
    border-radius: var(--p4-radius-sm);
    background: var(--p4-surface);
    box-shadow: none;
}

html.csa-v2 body.csa-client .plan-detail-summary-v3 {
    grid-template-columns: 104px minmax(0, 1fr);
    padding: 12px;
}

html.csa-v2 body.csa-client .plan-detail-summary-v3 img {
    width: 104px;
    height: 104px;
    border-color: var(--p4-line);
    border-radius: 10px;
    box-shadow: none;
}

html.csa-v2 body.csa-client .plan-description-v3 {
    border-color: var(--p4-line);
    background: var(--p4-surface);
}

html.csa-v2 body.csa-client .plan-description-v3 h3,
html.csa-v2 body.csa-client .detail-card h3 {
    color: var(--p4-ink);
    font-size: 14px;
    font-weight: 750;
}

html.csa-v2 body.csa-client .plan-description-v3 .plan-detail-desc {
    color: #505761;
    font-size: 12px;
    line-height: 1.65;
}

html.csa-v2 body.csa-client .checkout-plan {
    padding: 11px;
}

html.csa-v2 body.csa-client .checkout-plan-image {
    border-color: var(--p4-line);
    border-radius: 10px;
    box-shadow: none;
}

html.csa-v2 body.csa-client .checkout-plan h3 {
    color: var(--p4-ink);
    font-size: 15px;
    font-weight: 760;
}

html.csa-v2 body.csa-client .checkout-steps-v3 {
    position: relative;
    gap: 5px;
}

html.csa-v2 body.csa-client .checkout-steps-v3 span {
    min-height: 38px;
    padding: 7px 8px;
    border-color: var(--p4-line);
    border-radius: 7px;
    color: var(--p4-ink-soft);
    background: var(--p4-surface);
    box-shadow: none;
    font-size: 10px;
}

html.csa-v2 body.csa-client .checkout-steps-v3 b {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
    background: var(--p4-blue);
    box-shadow: none;
}

html.csa-v2 body.csa-client .checkout-detail-grid > div {
    border-color: #e1e3e4;
    border-radius: 7px;
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .period-picker-v3 {
    padding: 10px;
    border-color: var(--p4-line);
    border-radius: 8px;
    background: var(--p4-surface);
    box-shadow: none;
}

html.csa-v2 body.csa-client .period-picker-v3 legend {
    color: #69717c;
    font-size: 9.5px;
    font-weight: 780;
}

html.csa-v2 body.csa-client .period-options-v3 {
    gap: 6px;
}

html.csa-v2 body.csa-client .period-option-v3 {
    min-height: 58px;
    padding: 9px;
    border-color: var(--p4-line);
    border-radius: 7px;
    background: var(--p4-surface-soft);
    box-shadow: none;
}

html.csa-v2 body.csa-client .period-option-v3:hover {
    border-color: #aeb4bc;
    background: #fff;
    transform: none;
}

html.csa-v2 body.csa-client .period-option-v3:has(input:checked) {
    border-color: var(--p4-blue);
    background: var(--p4-blue-soft);
    box-shadow: inset 0 0 0 1px var(--p4-blue);
}

html.csa-v2 body.csa-client .period-option-v3 strong {
    color: var(--p4-ink);
    font-size: 13px;
    font-weight: 750;
}

html.csa-v2 body.csa-client .checkout-total {
    min-height: 64px;
    padding: 11px 13px;
    border: 1px solid #cdd8ed;
    border-left: 4px solid var(--p4-blue);
    border-radius: 8px;
    color: var(--p4-ink);
    background: var(--p4-surface-blue);
    box-shadow: none;
}

html.csa-v2 body.csa-client .checkout-total span,
html.csa-v2 body.csa-client .checkout-total small {
    color: #647087;
}

html.csa-v2 body.csa-client .checkout-total strong {
    color: var(--p4-blue-deep);
    font-size: 21px;
    font-weight: 780;
}

html.csa-v2 body.csa-client .checkout-extras-v3 {
    border-color: var(--p4-line);
    border-radius: 8px;
    background: var(--p4-surface);
}

html.csa-v2 body.csa-client .checkout-extras-fields-v3 {
    border-top-color: var(--p4-line);
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .checkout-form-v3 > .btn.primary {
    min-height: 44px;
    font-size: 13px;
}

html.csa-v2 body.csa-client .manual-contact-checkout-v3 {
    padding: 15px;
    border-left: 4px solid #c17b23;
}

html.csa-v2 body.csa-client .manual-contact-checkout-v3 h3 {
    color: var(--p4-ink);
    font-size: 18px;
    font-weight: 760;
}

html.csa-v2 body.csa-client .client-order-tools {
    gap: 8px;
    margin-bottom: 8px;
    padding: 9px;
    border-color: var(--p4-line);
    border-radius: 8px;
    background: var(--p4-surface);
}

html.csa-v2 body.csa-client .client-order-count {
    min-height: 38px;
    padding: 9px 11px;
    border-color: var(--p4-line);
    border-radius: 7px;
    color: var(--p4-ink-soft);
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .client-order-list {
    gap: 7px;
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 {
    min-height: 88px;
    padding: 11px 12px 11px 15px;
    border-color: var(--p4-line);
    border-radius: 9px;
    background: var(--p4-surface);
    box-shadow: none;
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3::before {
    inset-block: 0;
    width: 3px;
    border-radius: 9px 0 0 9px;
    background: var(--p4-blue);
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3[data-delivery="manual"]::before {
    background: #c17b23;
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3:hover {
    border-color: #b9bdc2;
    box-shadow: var(--p4-shadow);
    transform: none;
}

html.csa-v2 body.csa-client .client-order-title strong {
    color: var(--p4-ink);
    font-size: 13px;
    font-weight: 750;
}

html.csa-v2 body.csa-client .client-order-line > span {
    padding: 7px 8px;
    border-color: #e4e5e4;
    border-radius: 6px;
    color: var(--p4-ink-faint);
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .client-order-line strong {
    color: #303640;
}

html.csa-v2 body.csa-client .client-order-actions {
    border-top-color: #e6e7e6;
}

html.csa-v2 body.csa-client .profile-hero,
html.csa-v2 body.csa-client .support-hero {
    min-height: 112px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--p4-line);
    border-left: 4px solid var(--p4-blue);
    border-radius: var(--p4-radius);
    color: var(--p4-ink);
    background: var(--p4-surface);
    box-shadow: var(--p4-shadow);
}

html.csa-v2 body.csa-client .profile-hero::after {
    display: none;
}

html.csa-v2 body.csa-client .profile-avatar {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--p4-blue);
    box-shadow: none;
    font-size: 23px;
}

html.csa-v2 body.csa-client .profile-hero .panel-kicker {
    color: var(--p4-blue);
}

html.csa-v2 body.csa-client .profile-hero-copy h2,
html.csa-v2 body.csa-client .support-hero h2 {
    color: var(--p4-ink);
    font-weight: 760;
}

html.csa-v2 body.csa-client .profile-hero-copy p,
html.csa-v2 body.csa-client .support-hero p {
    color: var(--p4-ink-soft);
}

html.csa-v2 body.csa-client .profile-stat {
    min-height: 84px;
    padding: 12px 13px 12px 49px;
    border-color: var(--p4-line);
    border-radius: 9px;
    background: var(--p4-surface);
    box-shadow: none;
}

html.csa-v2 body.csa-client .profile-stat-icon {
    left: 12px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--p4-blue);
    box-shadow: none;
}

html.csa-v2 body.csa-client .profile-stat strong {
    color: var(--p4-ink);
    font-size: 17px;
}

html.csa-v2 body.csa-client .profile-action-card,
html.csa-v2 body.csa-client :where(.guide-card, .ticket-list-item) {
    border-color: var(--p4-line);
    border-radius: 9px;
    color: var(--p4-ink);
    background: var(--p4-surface);
    box-shadow: none;
}

html.csa-v2 body.csa-client .profile-action-card:hover,
html.csa-v2 body.csa-client :where(.guide-card, .ticket-list-item):hover {
    border-color: #b8bdc2;
    box-shadow: var(--p4-shadow);
    transform: none;
}

html.csa-v2 body.csa-client .profile-action-card.primary {
    border-color: #b8c9ee;
    color: var(--p4-blue-deep);
    background: var(--p4-blue-soft);
    box-shadow: none;
}

html.csa-v2 body.csa-client .profile-action-card.primary span {
    color: #64728d;
}

html.csa-v2 body.csa-client .profile-action-icon {
    color: #fff;
    background: var(--p4-blue);
    box-shadow: none;
}

html.csa-v2 body.csa-client .profile-security-note {
    border-color: #ccd8ed;
    border-left: 3px solid var(--p4-blue);
    color: #4d5d76;
    background: var(--p4-surface-blue);
}

html.csa-v2 body.csa-client .wallet-balance-card {
    border: 1px solid #242b35;
    border-radius: 10px;
    color: #fff;
    background: var(--p4-sidebar);
    box-shadow: none;
}

html.csa-v2 body.csa-client .wallet-balance-card :where(span, p, em) {
    color: #aeb6c1;
}

html.csa-v2 body.csa-client .wallet-balance-card strong {
    color: #fff;
    font-weight: 760;
    letter-spacing: -.035em;
}

html.csa-v2 body.csa-client .segmented {
    gap: 4px;
    padding: 4px;
    border-color: var(--p4-line);
    border-radius: 8px;
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .segmented button {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--p4-ink-soft);
    background: transparent;
    box-shadow: none;
    font-size: 11px;
    font-weight: 700;
}

html.csa-v2 body.csa-client .segmented button:hover {
    color: var(--p4-ink);
    background: #f0f1ef;
}

html.csa-v2 body.csa-client .segmented button.active {
    border-color: var(--p4-line-strong);
    color: var(--p4-blue-deep);
    background: var(--p4-surface);
    box-shadow: 0 2px 7px rgba(21, 24, 30, .07);
}

html.csa-v2 body.csa-client .guide-tools {
    gap: 9px;
    margin-bottom: 13px;
    padding: 9px;
    border: 1px solid var(--p4-line);
    border-radius: 8px;
    background: var(--p4-surface-soft);
}

html.csa-v2 body.csa-client .guide-category-tabs {
    gap: 5px;
}

html.csa-v2 body.csa-client .guide-category-tabs .category-pill {
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--p4-line);
    border-radius: 6px;
    color: var(--p4-ink-soft);
    background: var(--p4-surface);
    font-size: 10.5px;
    font-weight: 700;
}

html.csa-v2 body.csa-client .guide-category-tabs .category-pill:hover {
    border-color: #aeb4bb;
    color: var(--p4-ink);
}

html.csa-v2 body.csa-client .guide-category-tabs .category-pill.active {
    border-color: #b9caf0;
    color: var(--p4-blue-deep);
    background: var(--p4-blue-soft);
}

html.csa-v2 body.csa-client .guide-card-list {
    gap: 8px;
}

html.csa-v2 body.csa-client .guide-card {
    min-width: 0;
    padding: 12px;
}

html.csa-v2 body.csa-client .guide-card > span {
    color: var(--p4-blue);
    font-size: 9px;
    font-weight: 780;
    letter-spacing: .055em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .guide-card > strong {
    color: var(--p4-ink);
    font-size: 13px;
    font-weight: 740;
    line-height: 1.4;
}

html.csa-v2 body.csa-client .guide-card > small {
    color: var(--p4-ink-faint);
}

html.csa-v2 body.csa-client .guide-card > em {
    color: var(--p4-blue-deep);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 720;
}

html.csa-v2 body.csa-client .empty {
    min-height: 112px;
    padding: 22px;
    border: 1px dashed #c9cccf;
    border-radius: var(--p4-radius-sm);
    color: #737a84;
    background: #fafaf8;
}

html.csa-v2 body.csa-client .pagination .btn,
html.csa-v2 body.csa-client .pagination button {
    min-width: 34px;
    border-radius: 6px;
}

@media (max-width: 1280px) and (min-width: 981px) {
    html.csa-v2 body.csa-client .client-topbar {
        width: 224px;
    }

    html.csa-v2 body.csa-client .client-shell .app-content {
        width: calc(100% - 224px);
        margin-left: 224px;
        padding: 20px 20px 40px;
    }

    html.csa-v2 body.csa-client .store-grid.store-grid-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    html.csa-v2 body.csa-client .client-topbar {
        padding-top: 11px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    html.csa-v2 body.csa-client .client-topbar .brand {
        padding-bottom: 10px;
    }

    html.csa-v2 body.csa-client .client-topbar .tabs {
        gap: 2px;
        margin: 7px 0;
    }

    html.csa-v2 body.csa-client .client-topbar .tab {
        min-height: 34px;
        padding-block: 6px;
    }

    html.csa-v2 body.csa-client .client-topbar .actions {
        gap: 5px;
        padding-top: 7px;
    }
}

@media (min-width: 981px) and (max-height: 560px) {
    html.csa-v2 body.csa-client .client-topbar .brand img {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    html.csa-v2 body.csa-client .client-topbar .tabs {
        margin: 4px 0;
    }

    html.csa-v2 body.csa-client .client-topbar .tab {
        min-height: 31px;
        padding: 5px 9px;
        font-size: 11.5px;
    }

    html.csa-v2 body.csa-client .client-topbar .actions {
        padding-top: 5px;
    }
}

@media (max-width: 980px) {
    html.csa-v2 body.csa-client .client-topbar {
        width: 100%;
        padding: 8px 10px;
        border-right: 0;
        border-bottom: 1px solid var(--p4-line);
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 8px 26px rgba(21, 24, 30, .08);
    }

    html.csa-v2 body.csa-client .client-topbar .brand {
        padding: 0;
        border: 0;
    }

    html.csa-v2 body.csa-client .client-topbar .brand img {
        border-color: var(--p4-line);
        background: var(--p4-surface-soft);
    }

    html.csa-v2 body.csa-client .client-topbar .brand h1 {
        color: var(--p4-ink);
    }

    html.csa-v2 body.csa-client .client-topbar .actions .btn,
    html.csa-v2 body.csa-client .client-topbar .language-current {
        border-color: var(--p4-line);
        color: var(--p4-ink);
        background: #fff;
    }

    html.csa-v2 body.csa-client .client-topbar .actions {
        gap: 6px;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
    }

    html.csa-v2 body.csa-client .client-topbar .tabs {
        gap: 4px;
        margin: 0;
        border-color: #2c3440;
        background: var(--p4-sidebar);
    }

    html.csa-v2 body.csa-client .client-topbar .tab.active {
        color: #171c24;
        background: #f5f6f7;
    }

    html.csa-v2 body.csa-client .client-shell .app-content {
        width: 100%;
        margin-left: 0;
        padding: 16px 14px 32px;
    }

    html.csa-v2 body.csa-client .store-grid.store-grid-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 > * {
        min-width: 0;
    }

    html.csa-v2 body.csa-client .client-order-card .order-context-v3 {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .store-hero.store-header-v3 {
        padding-inline: 1px;
    }

    html.csa-v2 body.csa-client .drawer-panel {
        width: min(760px, 100vw);
    }
}

@media (max-width: 720px) {
    html.csa-v2 body.csa-client .store-hero.store-header-v3 {
        gap: 14px;
        padding-bottom: 14px;
    }

    html.csa-v2 body.csa-client .store-grid.store-grid-v3 {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .catalog-filters-v3 {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .dashboard-utility-grid {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    html.csa-v2 body.csa-client .client-shell .app-content {
        padding: 12px 10px 26px;
    }

    html.csa-v2 body.csa-client .client-shell .rental-dashboard {
        padding: 14px;
    }

    html.csa-v2 body.csa-client .client-shell .rental-dashboard.rental-dashboard-empty {
        min-height: 0;
    }

    html.csa-v2 body.csa-client .client-shell :where(.rental-product-card, .rental-row, .rental-row-v3) {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    html.csa-v2 body.csa-client .client-shell :where(.rental-product-card, .rental-row, .rental-row-v3) img {
        width: 52px;
        height: 52px;
    }

    html.csa-v2 body.csa-client .plan-tile-v3 .plan-specs-v3,
    html.csa-v2 body.csa-client :where(.rental-facts, .rental-facts-v3, .checkout-mechanics-v3) {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .plan-card-footer.plan-tile-footer-v3 {
        align-items: stretch;
    }

    html.csa-v2 body.csa-client .drawer.drawer-compact .drawer-panel {
        border-radius: 11px;
    }

    html.csa-v2 body.csa-client .checkout-steps-v3,
    html.csa-v2 body.csa-client .period-options-v3,
    html.csa-v2 body.csa-client .checkout-extras-fields-v3 {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* P6 — Customer workspace redesign                                           */
/* One visual system for navigation, commerce, support and account surfaces.  */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client {
    --p6-bg: #f5f6fa;
    --p6-surface: #fff;
    --p6-surface-soft: #f8f9fc;
    --p6-surface-muted: #f1f3f8;
    --p6-ink: #111827;
    --p6-ink-soft: #334155;
    --p6-muted: #697386;
    --p6-faint: #94a0b3;
    --p6-line: #e2e6ef;
    --p6-line-strong: #d3d9e5;
    --p6-sidebar: #0c1425;
    --p6-sidebar-soft: #141f35;
    --p6-primary: #5b5cf0;
    --p6-primary-dark: #4647d8;
    --p6-cyan: #10aeca;
    --p6-success: #118664;
    --p6-warning: #b76b12;
    --p6-danger: #d14354;
    --p6-radius-sm: 10px;
    --p6-radius: 14px;
    --p6-radius-lg: 20px;
    --p6-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --p6-shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
    --p6-shadow-md: 0 20px 50px rgba(15, 23, 42, .10);
    min-height: 100vh;
    color: var(--p6-ink);
    background:
        radial-gradient(circle at 72% -12%, rgba(91, 92, 240, .08), transparent 32rem),
        var(--p6-bg);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

html.csa-v2 body.csa-client::before {
    display: none !important;
}

html.csa-v2 body.csa-client :where(.client-app, .client-shell, .client-workspace) {
    min-width: 0;
}

html.csa-v2 body.csa-client .ui-icon {
    display: inline-block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    flex: 0 0 18px;
    overflow: visible;
    vertical-align: -3px;
}

html.csa-v2 body.csa-client :where(button, .btn, a) > .ui-icon {
    width: 17px;
    min-width: 17px;
    height: 17px;
    flex-basis: 17px;
}

html.csa-v2 body.csa-client .panel-head h2 > .ui-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    flex-basis: 20px;
    color: var(--p6-primary);
}

html.csa-v2 body.csa-client .ui-icon-spin {
    animation: p6-icon-spin .9s linear infinite;
}

@keyframes p6-icon-spin {
    to { transform: rotate(360deg); }
}

html.csa-v2 body.csa-client :where(button, input, select, textarea) {
    font: inherit;
}

html.csa-v2 body.csa-client :where(input, select, textarea) {
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--p6-line-strong);
    border-radius: var(--p6-radius-sm);
    color: var(--p6-ink);
    background: #fff;
    box-shadow: none;
}

html.csa-v2 body.csa-client textarea {
    min-height: 112px;
    resize: vertical;
}

html.csa-v2 body.csa-client .currency-input-wrap {
    position: relative;
    width: 100%;
}

html.csa-v2 body.csa-client .currency-input-wrap input {
    width: 100%;
    padding-right: 46px;
    font-variant-numeric: tabular-nums;
}

html.csa-v2 body.csa-client .currency-input-wrap > span {
    position: absolute;
    top: 50%;
    right: 13px;
    color: var(--p6-muted);
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
    transform: translateY(-50%);
}

html.csa-v2 body.csa-client :where(input, select, textarea):hover {
    border-color: #b9c2d1;
}

html.csa-v2 body.csa-client :where(input, select, textarea):focus {
    border-color: rgba(91, 92, 240, .78);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(91, 92, 240, .12);
}

html.csa-v2 body.csa-client .field {
    gap: 6px;
}

html.csa-v2 body.csa-client .field label {
    color: #596579;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .field :where(small, .field-help) {
    margin: 0;
    color: var(--p6-muted);
    font-size: 13px;
    line-height: 1.45;
}

html.csa-v2 body.csa-client .btn {
    min-height: 42px;
    padding: 9px 14px;
    gap: 7px;
    border: 1px solid var(--p6-line-strong);
    border-radius: var(--p6-radius-sm);
    color: #273247;
    background: #fff;
    box-shadow: var(--p6-shadow-xs);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
}

html.csa-v2 body.csa-client .btn:hover:not(:disabled) {
    border-color: #b9c1d1;
    color: #171f31;
    background: #fafbfe;
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .btn.primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(115deg, var(--p6-primary), #586eea 58%, var(--p6-cyan));
    box-shadow: 0 8px 20px rgba(80, 87, 222, .22);
}

html.csa-v2 body.csa-client .btn.primary:hover:not(:disabled) {
    color: #fff;
    background: linear-gradient(115deg, #4f50e1, #4f63dc 58%, #0b9db9);
    box-shadow: 0 10px 24px rgba(80, 87, 222, .28);
}

html.csa-v2 body.csa-client .btn.danger {
    border-color: #f2c9cf;
    color: var(--p6-danger);
    background: #fff7f8;
}

html.csa-v2 body.csa-client .btn:disabled,
html.csa-v2 body.csa-client .btn[aria-disabled="true"] {
    opacity: .52;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

html.csa-v2 body.csa-client .panel {
    overflow: hidden;
    border: 1px solid var(--p6-line);
    border-radius: var(--p6-radius);
    background: var(--p6-surface);
    box-shadow: var(--p6-shadow-sm);
}

html.csa-v2 body.csa-client .panel-head {
    min-height: 72px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--p6-line);
    background: #fff;
}

html.csa-v2 body.csa-client .panel-head h2 {
    gap: 8px;
    margin: 0;
    color: var(--p6-ink);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
}

html.csa-v2 body.csa-client .panel-head h2 > i {
    color: var(--p6-primary);
}

html.csa-v2 body.csa-client .panel-head p {
    margin: 4px 0 0;
    color: var(--p6-muted);
    font-size: 13px;
    line-height: 1.45;
}

html.csa-v2 body.csa-client .panel-body {
    padding: 20px;
}

html.csa-v2 body.csa-client .client-shell .panel-head {
    min-height: 72px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--p6-line);
    background: #fff;
}

html.csa-v2 body.csa-client .client-shell .panel-head h2 {
    color: var(--p6-ink);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
}

html.csa-v2 body.csa-client .client-shell .panel-head p {
    margin-top: 4px;
    color: var(--p6-muted);
    font-size: 13px;
    line-height: 1.45;
}

html.csa-v2 body.csa-client .client-shell .panel-body {
    padding: 20px;
}

html.csa-v2 body.csa-client .panel-kicker,
html.csa-v2 body.csa-client .eyebrow {
    color: var(--p6-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .pill {
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid #dbe1eb;
    border-radius: 999px;
    color: #526078;
    background: #f7f9fc;
    font-size: 12px;
    font-weight: 600;
}

html.csa-v2 body.csa-client .pill.good {
    border-color: #bfe5d6;
    color: #087252;
    background: #ecfbf5;
}

html.csa-v2 body.csa-client .pill.warn {
    border-color: #f1d59d;
    color: #9b5b0a;
    background: #fff9ea;
}

html.csa-v2 body.csa-client .pill.bad {
    border-color: #f2c3cb;
    color: #bd3045;
    background: #fff3f5;
}

/* App chrome */

html.csa-v2 body.csa-client .client-shell {
    display: grid !important;
    grid-template-columns: 268px minmax(0, 1fr);
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: transparent;
}

html.csa-v2 body.csa-client .client-shell.hidden {
    display: none !important;
}

html.csa-v2 body.csa-client .client-sidebar {
    position: sticky;
    top: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: 268px;
    height: 100vh;
    padding: 18px 14px 14px;
    overflow: hidden;
    color: #dbe4f4;
    background:
        radial-gradient(circle at 12% -5%, rgba(16, 174, 202, .15), transparent 16rem),
        linear-gradient(160deg, #101a30 0%, var(--p6-sidebar) 72%);
    box-shadow: 14px 0 38px rgba(14, 23, 40, .08);
}

html.csa-v2 body.csa-client .sidebar-brand {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 4px 5px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

html.csa-v2 body.csa-client .sidebar-brand .brand {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

html.csa-v2 body.csa-client .sidebar-brand .brand img {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
}

html.csa-v2 body.csa-client .sidebar-brand .brand h1 {
    display: -webkit-box;
    max-width: 184px;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

html.csa-v2 body.csa-client .sidebar-brand .brand p {
    margin: 3px 0 0;
    color: #8190aa;
    font-size: 12px;
    font-weight: 500;
}

html.csa-v2 body.csa-client .sidebar-close {
    display: none;
}

html.csa-v2 body.csa-client .sidebar-account {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    margin: 13px 2px 5px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

html.csa-v2 body.csa-client .sidebar-avatar,
html.csa-v2 body.csa-client .workspace-profile span {
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #6466ef, #16acc7);
    font-weight: 700;
}

html.csa-v2 body.csa-client .sidebar-avatar {
    width: 40px;
    height: 40px;
}

html.csa-v2 body.csa-client .sidebar-account strong {
    display: block;
    overflow: hidden;
    color: #f4f7fd;
    font-size: 12.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.csa-v2 body.csa-client .sidebar-account span {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 3px;
    color: #8c9ab1;
    font-size: 12px;
}

html.csa-v2 body.csa-client .sidebar-account span i {
    color: #36c997;
    font-size: 6px;
}

html.csa-v2 body.csa-client .sidebar-status-dot {
    display: inline-block;
    width: 7px;
    min-width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #36c997;
    box-shadow: 0 0 0 3px rgba(54, 201, 151, .12);
}

html.csa-v2 body.csa-client .sidebar-nav {
    display: block;
    flex: 1;
    min-height: 0;
    margin: 6px 0 0;
    padding: 0 1px 10px;
    overflow-y: auto;
    border: 0;
    background: transparent;
    scrollbar-width: thin;
}

html.csa-v2 body.csa-client .nav-group {
    margin-top: 16px;
}

html.csa-v2 body.csa-client .nav-group:first-child {
    margin-top: 3px;
}

html.csa-v2 body.csa-client .nav-group-label {
    display: block;
    padding: 0 10px 5px;
    color: #64738c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
}

html.csa-v2 body.csa-client .sidebar-nav .tab {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    gap: 9px;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 2px 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #9ba9c0;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
}

html.csa-v2 body.csa-client .sidebar-nav .tab > i:first-child {
    width: 25px;
    color: #70809b;
    font-size: 12px;
    text-align: center;
}

html.csa-v2 body.csa-client .sidebar-nav .tab > .ui-icon:first-child {
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-inline: 6px;
    color: #70809b;
}

html.csa-v2 body.csa-client .sidebar-nav .tab .nav-caret {
    color: #57657b;
    font-size: 12px;
    opacity: 0;
}

html.csa-v2 body.csa-client .sidebar-nav .tab:hover {
    color: #eef3fc;
    background: rgba(255, 255, 255, .055);
}

html.csa-v2 body.csa-client .sidebar-nav .tab.active {
    border-color: rgba(117, 125, 255, .30);
    color: #fff;
    background: linear-gradient(105deg, rgba(91, 92, 240, .28), rgba(16, 174, 202, .12));
    box-shadow: inset 3px 0 0 #7b7df9;
}

html.csa-v2 body.csa-client .sidebar-nav .tab.active > i:first-child {
    color: #8ee7f3;
}

html.csa-v2 body.csa-client .sidebar-nav .tab.active > .ui-icon:first-child {
    color: #8ee7f3;
}

html.csa-v2 body.csa-client .sidebar-nav .tab.active .nav-caret {
    color: #8ee7f3;
    opacity: 1;
}

html.csa-v2 body.csa-client .sidebar-foot {
    display: grid;
    gap: 7px;
    padding: 11px 1px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

html.csa-v2 body.csa-client .sidebar-foot .language-switch {
    width: 100%;
}

html.csa-v2 body.csa-client .sidebar-foot .language-current,
html.csa-v2 body.csa-client .sidebar-logout {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 10px;
    color: #b5c0d2;
    background: rgba(255, 255, 255, .04);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

html.csa-v2 body.csa-client .sidebar-foot .language-code {
    display: grid;
    place-items: center;
    width: 28px;
    height: 24px;
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

html.csa-v2 body.csa-client .sidebar-foot .language-name {
    color: #b5c0d2;
}

html.csa-v2 body.csa-client .sidebar-logout > i {
    width: 28px;
    color: #ff9aa7;
    text-align: center;
}

html.csa-v2 body.csa-client .sidebar-logout > .ui-icon {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-inline: 6px;
    color: #ff9aa7;
}

html.csa-v2 body.csa-client .sidebar-logout:hover {
    color: #fff;
    background: rgba(209, 67, 84, .14);
}

html.csa-v2 body.csa-client .sidebar-foot .language-menu {
    inset: auto 0 calc(100% + 7px) 0;
    width: 100%;
    border-color: #2d3950;
    background: #131e32;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
}

html.csa-v2 body.csa-client .sidebar-foot .language-menu button {
    color: #dce5f4;
    background: transparent;
}

html.csa-v2 body.csa-client .sidebar-scrim {
    display: none;
}

html.csa-v2 body.csa-client .client-workspace {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

html.csa-v2 body.csa-client .client-topbar {
    position: sticky;
    top: 0;
    z-index: 45;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 82px;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid rgba(219, 224, 235, .94);
    border-radius: 0;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 5px 18px rgba(20, 30, 51, .035);
    backdrop-filter: blur(16px);
}

html.csa-v2 body.csa-client .client-topbar .topbar-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    width: 100%;
    max-width: 1600px;
    min-height: 82px;
    margin: 0 auto;
    padding: 12px 28px;
    border: 0;
    background: transparent;
}

html.csa-v2 body.csa-client .workspace-heading {
    min-width: 0;
}

html.csa-v2 body.csa-client .workspace-heading > span {
    display: block;
    margin-bottom: 2px;
    color: var(--p6-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
}

html.csa-v2 body.csa-client .workspace-heading h1 {
    margin: 0;
    color: var(--p6-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.025em;
}

html.csa-v2 body.csa-client .workspace-heading p {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--p6-muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.csa-v2 body.csa-client .workspace-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

html.csa-v2 body.csa-client .workspace-wallet {
    display: grid;
    grid-template-columns: auto auto 22px;
    gap: 7px;
    align-items: center;
    min-height: 46px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--p6-line);
    border-radius: 12px;
    color: var(--p6-muted);
    background: #fff;
    box-shadow: var(--p6-shadow-xs);
}

html.csa-v2 body.csa-client .workspace-wallet span {
    font-size: 12px;
    font-weight: 600;
}

html.csa-v2 body.csa-client .workspace-wallet strong {
    color: var(--p6-ink);
    max-width: 150px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.csa-v2 body.csa-client .workspace-wallet > i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    color: #fff;
    background: var(--p6-primary);
    font-size: 12px;
}

html.csa-v2 body.csa-client .workspace-wallet > .ui-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 5px;
    border-radius: 7px;
    color: #fff;
    background: var(--p6-primary);
    box-sizing: border-box;
}

html.csa-v2 body.csa-client .workspace-profile {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--p6-line);
    border-radius: 12px;
    background: #fff;
}

html.csa-v2 body.csa-client .workspace-profile span {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

html.csa-v2 body.csa-client .menu-toggle {
    display: none;
}

html.csa-v2 body.csa-client .client-shell .app-content {
    width: 100%;
    max-width: 1600px;
    min-width: 0;
    min-height: calc(100vh - 82px);
    margin: 0 auto;
    padding: 24px 28px 48px;
}

/* Dashboard */

html.csa-v2 body.csa-client .dashboard-command {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(540px, .95fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 20px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid #dfe3ee;
    border-radius: var(--p6-radius-lg);
    background:
        radial-gradient(circle at 90% -45%, rgba(91, 92, 240, .15), transparent 23rem),
        #fff;
    box-shadow: var(--p6-shadow-sm);
}

html.csa-v2 body.csa-client .dashboard-command-copy h2 {
    max-width: 720px;
    margin: 7px 0 7px;
    color: var(--p6-ink);
    font-size: clamp(25px, 2vw, 32px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.13;
}

html.csa-v2 body.csa-client .dashboard-command-copy > p {
    max-width: 680px;
    margin: 0;
    color: var(--p6-muted);
    font-size: 14px;
    line-height: 1.55;
}

html.csa-v2 body.csa-client .dashboard-command-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

html.csa-v2 body.csa-client .dashboard-command-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

html.csa-v2 body.csa-client .dashboard-command-stats button {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value"
        "detail detail";
    gap: 2px 10px;
    min-height: 112px;
    padding: 15px;
    border: 1px solid var(--p6-line);
    border-radius: 13px;
    color: var(--p6-ink);
    background: rgba(248, 249, 253, .88);
    text-align: left;
}

html.csa-v2 body.csa-client .dashboard-command-stats button:hover {
    border-color: #cdd3e1;
    background: #fff;
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .dashboard-command-stats span,
html.csa-v2 body.csa-client .dashboard-command-stats small {
    display: block;
    overflow: hidden;
    color: var(--p6-muted);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.csa-v2 body.csa-client .dashboard-command-stats strong {
    display: block;
    grid-area: value;
    margin: 1px 0 0;
    overflow: hidden;
    color: var(--p6-ink);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.csa-v2 body.csa-client .rental-dashboard {
    min-height: 0;
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid var(--p6-line);
    border-radius: var(--p6-radius-lg);
    background: #fff;
    box-shadow: var(--p6-shadow-sm);
}

html.csa-v2 body.csa-client .rental-dashboard.rental-dashboard-empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    min-height: 156px;
    padding: 22px;
    color: var(--p6-ink);
    background:
        radial-gradient(circle at 96% 10%, rgba(16, 174, 202, .11), transparent 20rem),
        #fff;
}

html.csa-v2 body.csa-client .rental-empty-copy h2,
html.csa-v2 body.csa-client .rental-dashboard-head h2 {
    margin: 5px 0 5px;
    color: var(--p6-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.025em;
}

html.csa-v2 body.csa-client .rental-empty-copy p,
html.csa-v2 body.csa-client .rental-dashboard-head p {
    max-width: 760px;
    margin: 0;
    color: var(--p6-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

html.csa-v2 body.csa-client .rental-dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--p6-line);
}

html.csa-v2 body.csa-client .rental-dashboard-tools {
    display: flex;
    min-width: 0;
    gap: 10px;
    align-items: center;
}

html.csa-v2 body.csa-client .rental-total {
    display: flex;
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    gap: 7px;
    align-items: center;
    border: 1px solid var(--p6-line);
    border-radius: 11px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .rental-total strong {
    font-size: 20px;
    line-height: 1;
}

html.csa-v2 body.csa-client .rental-total span {
    max-width: 112px;
    color: var(--p6-muted);
    font-size: 12px;
    line-height: 1.2;
}

html.csa-v2 body.csa-client .rental-list-v3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

html.csa-v2 body.csa-client .rental-product-card.rental-row-v3 {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--p6-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: none;
}

html.csa-v2 body.csa-client .rental-product-card.rental-row-v3 + .rental-product-card.rental-row-v3 {
    margin-top: 0;
}

html.csa-v2 body.csa-client .rental-product-media img {
    width: 76px;
    height: 76px;
    border: 1px solid var(--p6-line);
    border-radius: 13px;
    object-fit: cover;
}

html.csa-v2 body.csa-client .rental-product-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

html.csa-v2 body.csa-client .rental-product-title h3 {
    margin: 5px 0 0;
    color: var(--p6-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

html.csa-v2 body.csa-client .mode-badge,
html.csa-v2 body.csa-client .category-badge {
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
}

html.csa-v2 body.csa-client .mode-badge.automatic {
    border-color: #b9e3ea;
    color: #087b8f;
    background: #effbfd;
}

html.csa-v2 body.csa-client .mode-badge.manual {
    border-color: #d6d1fb;
    color: #5546bd;
    background: #f5f3ff;
}

html.csa-v2 body.csa-client .rental-facts-v3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

html.csa-v2 body.csa-client .rental-facts-v3 > div {
    min-height: 78px;
    padding: 11px 12px;
    border: 1px solid var(--p6-line);
    border-radius: 10px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .rental-facts-v3 span,
html.csa-v2 body.csa-client .rental-facts-v3 small {
    color: var(--p6-muted);
    font-size: 12px;
    line-height: 1.4;
}

html.csa-v2 body.csa-client .rental-facts-v3 strong {
    display: block;
    margin: 4px 0 3px;
    color: var(--p6-ink);
    font-size: 14px;
    font-weight: 700;
}

html.csa-v2 body.csa-client .rental-card-actions {
    gap: 9px;
    margin-top: 12px;
}

html.csa-v2 body.csa-client .dashboard-bento {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr);
    gap: 20px;
    align-items: start;
}

html.csa-v2 body.csa-client .dashboard-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html.csa-v2 body.csa-client .dashboard-shortcut {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    gap: 11px;
    align-items: center;
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--p6-line);
    border-radius: 11px;
    color: var(--p6-ink);
    background: #fff;
    text-align: left;
}

html.csa-v2 body.csa-client .dashboard-shortcut > i:first-child {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--p6-primary);
    background: #f0f0ff;
}

html.csa-v2 body.csa-client .dashboard-shortcut > i:last-child {
    color: #a4adbc;
    font-size: 9px;
}

html.csa-v2 body.csa-client .dashboard-shortcut strong,
html.csa-v2 body.csa-client .dashboard-shortcut small {
    display: block;
}

html.csa-v2 body.csa-client .dashboard-shortcut strong {
    font-size: 14px;
}

html.csa-v2 body.csa-client .dashboard-shortcut small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--p6-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Catalog */

html.csa-v2 body.csa-client .store-hero.store-header-v3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 28px;
    align-items: end;
    min-height: 0;
    margin: 0 0 16px;
    padding: 22px;
    border: 1px solid var(--p6-line);
    border-radius: var(--p6-radius);
    color: var(--p6-ink);
    background: #fff;
    box-shadow: var(--p6-shadow-sm);
}

html.csa-v2 body.csa-client .store-hero h2 {
    margin: 5px 0;
    color: var(--p6-ink);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.035em;
}

html.csa-v2 body.csa-client .store-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--p6-muted);
    font-size: 14px;
    line-height: 1.55;
}

html.csa-v2 body.csa-client .store-header-v3 .store-search {
    gap: 5px;
    flex-basis: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

html.csa-v2 body.csa-client .store-header-v3 .store-search label {
    color: var(--p6-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .store-header-v3 .store-search input {
    min-height: 48px;
    font-size: 14px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .shop-layout-v3 {
    display: block;
}

html.csa-v2 body.csa-client .catalog-filters-v3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid var(--p6-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--p6-shadow-xs);
}

html.csa-v2 body.csa-client .catalog-category-row-v3 {
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--p6-line);
    border-radius: 12px;
    background: #fff;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 > span {
    color: var(--p6-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .category-list,
html.csa-v2 body.csa-client .guide-category-tabs {
    gap: 5px;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 .category-pill {
    min-height: 40px;
    padding: 8px 12px;
    border-color: var(--p6-line);
    border-radius: 9px;
    color: #536078;
    background: var(--p6-surface-soft);
    font-size: 13px;
    font-weight: 600;
}

html.csa-v2 body.csa-client .catalog-category-row-v3 .category-pill.active {
    border-color: rgba(91, 92, 240, .22);
    color: #4748d5;
    background: #efefff;
    box-shadow: none;
}

html.csa-v2 body.csa-client .store-toolbar-v3 {
    min-height: 44px;
    margin: 0 0 10px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
}

html.csa-v2 body.csa-client .store-grid.store-grid-v3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

html.csa-v2 body.csa-client .store-grid.store-grid-v3[data-plan-count="1"] {
    grid-template-columns: minmax(0, 760px);
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3 {
    min-width: 0;
    border: 1px solid var(--p6-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--p6-shadow-xs);
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3:hover {
    border-color: #cbd2e1;
    box-shadow: var(--p6-shadow-sm);
    transform: translateY(-2px);
}

html.csa-v2 body.csa-client .store-card.plan-tile-v3 .body {
    gap: 14px;
    padding: 18px;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 .media {
    width: 76px;
    height: 76px;
    min-height: 76px;
    border: 1px solid var(--p6-line);
    border-radius: 12px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .plan-tile-head-v3 .media img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

html.csa-v2 body.csa-client .plan-badges-v3 {
    gap: 4px;
    margin: 0;
}

html.csa-v2 body.csa-client .plan-tile-title-v3 h3 {
    margin: 6px 0 0;
    color: var(--p6-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

html.csa-v2 body.csa-client .plan-summary-v3 {
    min-height: 0;
    margin: 0;
    color: var(--p6-muted);
    font-size: 13px;
    line-height: 1.5;
}

html.csa-v2 body.csa-client .plan-specs-v3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

html.csa-v2 body.csa-client .plan-specs-v3 > div {
    min-height: 74px;
    padding: 10px 12px;
    border: 1px solid var(--p6-line);
    border-radius: 9px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .plan-specs-v3 > div:last-child:nth-child(odd) {
    grid-column: auto;
}

html.csa-v2 body.csa-client .plan-specs-v3 dt,
html.csa-v2 body.csa-client .plan-specs-v3 small {
    color: var(--p6-muted);
    font-size: 12px;
}

html.csa-v2 body.csa-client .plan-specs-v3 dd {
    margin: 3px 0 0;
    color: var(--p6-ink);
    font-size: 14px;
    font-weight: 700;
}

html.csa-v2 body.csa-client .plan-card-footer.plan-tile-footer-v3 {
    gap: 9px;
    align-items: end;
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid var(--p6-line);
}

html.csa-v2 body.csa-client .plan-from-price span {
    color: var(--p6-muted);
    font-size: 12px;
}

html.csa-v2 body.csa-client .plan-from-price strong {
    margin-top: 2px;
    color: var(--p6-ink);
    font-size: 20px;
    font-weight: 700;
}

/* Top-up, orders, guide, support */

html.csa-v2 body.csa-client .topup-layout {
    grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr);
    gap: 20px;
    align-items: start;
}

html.csa-v2 body.csa-client .topup-layout > .panel {
    align-self: start;
}

html.csa-v2 body.csa-client .wallet-balance-card {
    min-height: 132px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #25334c;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 0%, rgba(16, 174, 202, .30), transparent 16rem),
        linear-gradient(145deg, #121b2c, #17243b);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
}

html.csa-v2 body.csa-client .wallet-balance-card :where(span, strong, p, em) {
    color: inherit;
}

html.csa-v2 body.csa-client .wallet-balance-card span {
    color: #b7c2d5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .wallet-balance-card strong {
    display: block;
    margin: 7px 0 3px;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.04em;
}

html.csa-v2 body.csa-client .wallet-balance-card :where(p, em) {
    margin: 4px 0 0;
    color: #bec9da;
    font-size: 13px;
    line-height: 1.45;
}

html.csa-v2 body.csa-client .topup-form {
    gap: 16px;
}

html.csa-v2 body.csa-client .topup-method-tabs {
    min-height: 46px;
}

html.csa-v2 body.csa-client .topup-method-tabs :where(button, span) {
    display: flex;
    min-height: 40px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 9px;
    color: var(--p6-muted);
    font-size: 13px;
    font-weight: 600;
}

html.csa-v2 body.csa-client .topup-method-tabs :where(button, span).active {
    color: var(--p6-primary-dark);
    background: #fff;
    box-shadow: var(--p6-shadow-xs);
}

html.csa-v2 body.csa-client .topup-method-tabs.is-readonly span {
    width: 100%;
    justify-content: flex-start;
}

html.csa-v2 body.csa-client .topup-method-tabs.is-readonly small {
    margin-left: auto;
    color: var(--p6-success);
    font-size: 12px;
}

html.csa-v2 body.csa-client .topup-amount-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

html.csa-v2 body.csa-client .topup-amount-presets button {
    min-height: 42px;
    padding: 8px;
    border: 1px solid var(--p6-line);
    border-radius: 8px;
    color: #4d5b72;
    background: var(--p6-surface-soft);
    font-size: 13px;
    font-weight: 600;
}

html.csa-v2 body.csa-client .topup-amount-presets button.active {
    border-color: rgba(91, 92, 240, .34);
    color: #4849d4;
    background: #efefff;
}

html.csa-v2 body.csa-client .card-list {
    gap: 10px;
}

html.csa-v2 body.csa-client .card-row {
    padding: 14px;
    border: 1px solid var(--p6-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

html.csa-v2 body.csa-client .client-order-tools {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid var(--p6-line);
    border-radius: 11px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .client-order-list {
    display: grid;
    gap: 10px;
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 8px 16px;
    min-width: 0;
    min-height: 0;
    padding: 16px;
    border: 1px solid var(--p6-line);
    border-left: 3px solid #ccd2e0;
    border-radius: 13px;
    background: #fff;
    box-shadow: none;
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3[data-delivery="automatic"] {
    border-left-color: var(--p6-cyan);
}

html.csa-v2 body.csa-client .client-order-card.client-order-row-v3[data-delivery="manual"] {
    border-left-color: #7a67ec;
}

html.csa-v2 body.csa-client .client-order-main,
html.csa-v2 body.csa-client .client-order-line,
html.csa-v2 body.csa-client .order-context-v3,
html.csa-v2 body.csa-client .client-order-review {
    grid-column: 1;
}

html.csa-v2 body.csa-client .client-order-actions {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-content: flex-end;
    margin: 0;
}

html.csa-v2 body.csa-client .client-order-title strong {
    color: var(--p6-ink);
    font-size: 15px;
    line-height: 1.35;
}

html.csa-v2 body.csa-client .client-order-title span,
html.csa-v2 body.csa-client .client-order-line,
html.csa-v2 body.csa-client .order-context-v3 {
    color: var(--p6-muted);
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .client-order-line {
    gap: 13px;
}

html.csa-v2 body.csa-client .order-context-v3 {
    margin: 0;
}

html.csa-v2 body.csa-client .pagination {
    gap: 7px;
    margin-top: 11px;
}

html.csa-v2 body.csa-client .guide-panel .panel-body {
    padding: 13px;
}

html.csa-v2 body.csa-client .guide-tools {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
    gap: 10px;
    align-items: end;
    margin-bottom: 13px;
    padding: 10px;
    border: 1px solid var(--p6-line);
    border-radius: 11px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .guide-card-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

html.csa-v2 body.csa-client .guide-section + .guide-section {
    margin-top: 15px;
}

html.csa-v2 body.csa-client .guide-section > h3 {
    margin: 0 0 8px;
    color: var(--p6-ink-soft);
    font-size: 15px;
    font-weight: 700;
}

html.csa-v2 body.csa-client .guide-card {
    min-height: 112px;
    padding: 12px;
    border: 1px solid var(--p6-line);
    border-radius: 11px;
    color: var(--p6-ink);
    background: #fff;
    box-shadow: none;
    text-align: left;
}

html.csa-v2 body.csa-client .guide-card:hover {
    border-color: #c5ccdc;
    background: #fcfcff;
    transform: translateY(-1px);
}

html.csa-v2 body.csa-client .guide-card > span,
html.csa-v2 body.csa-client .guide-card > small {
    color: var(--p6-muted);
    font-size: 12px;
}

html.csa-v2 body.csa-client .guide-card strong {
    margin: 8px 0;
    font-size: 15px;
}

html.csa-v2 body.csa-client .guide-card em {
    color: var(--p6-primary);
    font-size: 12px;
}

html.csa-v2 body.csa-client .guide-external-resource {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--p6-line);
    border-radius: 12px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .guide-resource-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--p6-primary);
    background: #ececff;
}

html.csa-v2 body.csa-client .guide-resource-copy span,
html.csa-v2 body.csa-client .guide-resource-copy strong {
    display: block;
}

html.csa-v2 body.csa-client .guide-resource-copy span {
    color: var(--p6-muted);
    font-size: 12px;
}

html.csa-v2 body.csa-client .guide-resource-copy strong {
    margin-top: 3px;
    font-size: 15px;
}

html.csa-v2 body.csa-client .guide-resource-copy p {
    margin: 7px 0 0;
    color: var(--p6-muted);
    font-size: 13px;
    line-height: 1.5;
}

html.csa-v2 body.csa-client .guide-external-resource > .actions,
html.csa-v2 body.csa-client .guide-external-resource > .guide-article-body {
    grid-column: 1 / -1;
}

html.csa-v2 body.csa-client .support-hero {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 20px;
}

html.csa-v2 body.csa-client .support-hero h2 {
    margin: 5px 0;
    font-size: 24px;
}

html.csa-v2 body.csa-client .support-hero p {
    margin: 0;
    color: var(--p6-muted);
    font-size: 13.5px;
}

html.csa-v2 body.csa-client .support-finance-note,
html.csa-v2 body.csa-client .finance-data-warning {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #ead7ab;
    border-radius: 11px;
    color: #76501a;
    background: #fffaf0;
}

html.csa-v2 body.csa-client .support-finance-note > i,
html.csa-v2 body.csa-client .finance-data-warning > i {
    color: #b27620;
    text-align: center;
}

html.csa-v2 body.csa-client .support-finance-note > .ui-icon,
html.csa-v2 body.csa-client .finance-data-warning > .ui-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-inline: 5px;
    color: #b27620;
}

html.csa-v2 body.csa-client .finance-data-warning strong {
    display: block;
    font-size: 13.5px;
}

html.csa-v2 body.csa-client .finance-data-warning p {
    margin: 3px 0 0;
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .support-workspace {
    display: grid;
    grid-template-columns: minmax(340px, .8fr) minmax(460px, 1.2fr);
    gap: 20px;
    align-items: start;
}

html.csa-v2 body.csa-client .ticket-list {
    gap: 7px;
}

html.csa-v2 body.csa-client .ticket-list-item,
html.csa-v2 body.csa-client .ticket-open-guard {
    padding: 10px 11px;
    border: 1px solid var(--p6-line);
    border-radius: 10px;
    background: #fff;
}

html.csa-v2 body.csa-client .ticket-list-item strong {
    font-size: 14px;
}

html.csa-v2 body.csa-client .ticket-list-item span,
html.csa-v2 body.csa-client .ticket-list-item p {
    color: var(--p6-muted);
    font-size: 12.5px;
}

/* Profile and commission */

html.csa-v2 body.csa-client .profile-page {
    gap: 20px;
}

html.csa-v2 body.csa-client .profile-hero {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    padding: 20px;
}

html.csa-v2 body.csa-client .profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 15px;
    font-size: 24px;
    background: linear-gradient(145deg, var(--p6-primary), var(--p6-cyan));
}

html.csa-v2 body.csa-client .profile-hero-copy h2 {
    margin: 4px 0 2px;
    font-size: 22px;
    font-weight: 700;
}

html.csa-v2 body.csa-client .profile-hero-copy p {
    margin: 0;
    color: var(--p6-muted);
    font-size: 13.5px;
}

html.csa-v2 body.csa-client .profile-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

html.csa-v2 body.csa-client .profile-stat {
    min-height: 88px;
    padding: 14px;
    border: 1px solid var(--p6-line);
    border-radius: 11px;
    background: #fff;
    box-shadow: var(--p6-shadow-xs);
}

html.csa-v2 body.csa-client .profile-stat-icon {
    color: var(--p6-primary);
}

html.csa-v2 body.csa-client .profile-stat span {
    color: var(--p6-muted);
    font-size: 12px;
}

html.csa-v2 body.csa-client .profile-stat strong {
    margin-top: 5px;
    font-size: 18px;
    font-weight: 700;
}

html.csa-v2 body.csa-client .profile-main-grid,
html.csa-v2 body.csa-client .profile-commission-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: 20px;
    align-items: start;
}

html.csa-v2 body.csa-client .profile-main-grid > .panel,
html.csa-v2 body.csa-client .profile-commission-grid > .panel {
    align-self: start;
}

html.csa-v2 body.csa-client .profile-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html.csa-v2 body.csa-client .profile-action-card {
    min-height: 94px;
    padding: 14px;
    border: 1px solid var(--p6-line);
    border-radius: 10px;
    color: var(--p6-ink);
    background: #fff;
}

html.csa-v2 body.csa-client .profile-action-card.primary {
    border-color: #d6d5fb;
    color: var(--p6-ink);
    background: #f6f5ff;
    box-shadow: none;
}

html.csa-v2 body.csa-client .profile-action-card .profile-action-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 7px;
    color: #fff;
    background: linear-gradient(145deg, var(--p6-primary), var(--p6-cyan));
    box-sizing: border-box;
}

html.csa-v2 body.csa-client .profile-action-card strong {
    font-size: 14px;
}

html.csa-v2 body.csa-client .profile-action-card span {
    color: var(--p6-muted);
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .profile-security-action {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 96px;
    padding: 15px;
    border: 1px solid var(--p6-line);
    border-radius: 11px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .profile-security-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--p6-primary);
    background: #ececff;
}

html.csa-v2 body.csa-client .profile-security-action strong {
    font-size: 14px;
}

html.csa-v2 body.csa-client .profile-security-action p {
    margin: 4px 0 0;
    color: var(--p6-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

html.csa-v2 body.csa-client .security-password-form {
    display: grid;
    gap: 12px;
}

html.csa-v2 body.csa-client .security-password-intro {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
    border: 1px solid #d9ddf6;
    border-radius: 11px;
    background: #f7f7ff;
}

html.csa-v2 body.csa-client .security-password-intro > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--p6-primary);
    background: #e9e9ff;
}

html.csa-v2 body.csa-client .security-password-intro strong {
    font-size: 14px;
}

html.csa-v2 body.csa-client .security-password-intro p {
    margin: 4px 0 0;
    color: var(--p6-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

html.csa-v2 body.csa-client .password-input-wrap {
    position: relative;
}

html.csa-v2 body.csa-client .password-input-wrap input {
    width: 100%;
    padding-right: 43px;
}

html.csa-v2 body.csa-client .password-visibility {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    color: var(--p6-muted);
    background: transparent;
}

html.csa-v2 body.csa-client .password-visibility:hover {
    color: var(--p6-primary);
    background: #f0f0ff;
}

html.csa-v2 body.csa-client .drawer-inline-error {
    min-height: 0;
    color: var(--p6-danger);
    font-size: 12.5px;
    font-weight: 600;
}

html.csa-v2 body.csa-client .profile-commission-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html.csa-v2 body.csa-client .commission-actions {
    padding: 4px;
    border: 1px solid var(--p6-line);
    border-radius: 12px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .commission-history-table {
    border: 1px solid var(--p6-line);
    border-radius: 12px;
    overflow: hidden;
}

html.csa-v2 body.csa-client .commission-history-table :where(th, td) {
    padding: 12px 14px;
    font-size: 13px;
}

/* Drawer and transactional success */

html.csa-v2 body.csa-client .drawer {
    background: rgba(9, 15, 27, .46);
    backdrop-filter: blur(4px);
}

html.csa-v2 body.csa-client .drawer-panel {
    width: min(720px, calc(100vw - 22px));
    border-left: 1px solid var(--p6-line);
    background: #fff;
    box-shadow: -24px 0 70px rgba(8, 15, 28, .18);
}

html.csa-v2 body.csa-client .drawer.drawer-compact .drawer-panel {
    width: min(570px, calc(100vw - 22px));
    border-radius: 0;
}

html.csa-v2 body.csa-client .drawer-head {
    min-height: 76px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--p6-line);
    background: rgba(255, 255, 255, .96);
}

html.csa-v2 body.csa-client .drawer-head h2 {
    font-size: 19px;
}

html.csa-v2 body.csa-client .drawer-head p {
    margin-top: 3px;
    color: var(--p6-muted);
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .drawer-close {
    width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 10px;
    font-size: 19px;
}

html.csa-v2 body.csa-client .drawer-body {
    padding: 20px;
}

html.csa-v2 body.csa-client .payment-success-card {
    padding: 16px 4px 4px;
    text-align: center;
}

html.csa-v2 body.csa-client .payment-success-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, #1aa278, #14b7b8);
    box-shadow: 0 12px 28px rgba(18, 160, 131, .22);
}

html.csa-v2 body.csa-client .payment-success-card h3 {
    margin: 0;
    font-size: 18px;
}

html.csa-v2 body.csa-client .payment-success-card p {
    max-width: 440px;
    margin: 7px auto 0;
    color: var(--p6-muted);
    font-size: 13px;
    line-height: 1.5;
}

html.csa-v2 body.csa-client .payment-success-plan {
    display: block;
    margin: 13px auto 0;
    color: var(--p6-ink);
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .payment-success-actions {
    display: grid;
    gap: 7px;
    margin-top: 13px;
}

html.csa-v2 body.csa-client .payment-success-blocked {
    margin-top: 13px;
    padding: 11px 12px;
    border: 1px solid #f0d9a2;
    border-radius: 11px;
    color: #74420c;
    background: #fffaf0;
    text-align: left;
}

html.csa-v2 body.csa-client .payment-success-blocked strong {
    display: block;
    font-size: 12px;
}

html.csa-v2 body.csa-client .payment-success-blocked p {
    margin: 3px 0 0;
    color: #8b5d21;
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .payment-outcome-card {
    padding: 18px;
    border: 1px solid #efd2d4;
    border-radius: 15px;
    color: var(--p6-ink);
    background: #fff;
    text-align: center;
}

html.csa-v2 body.csa-client .payment-outcome-card.warn {
    border-color: #ecdba8;
}

html.csa-v2 body.csa-client .payment-outcome-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 11px;
    border-radius: 16px;
    color: #fff;
    background: #d84c59;
    box-shadow: 0 12px 26px rgba(216, 76, 89, .18);
}

html.csa-v2 body.csa-client .payment-outcome-card.warn .payment-outcome-icon {
    background: #d18b19;
    box-shadow: 0 12px 26px rgba(209, 139, 25, .18);
}

html.csa-v2 body.csa-client .payment-outcome-card h3 {
    margin: 0;
    font-size: 17px;
}

html.csa-v2 body.csa-client .payment-outcome-card > p {
    max-width: 460px;
    margin: 7px auto 0;
    color: var(--p6-muted);
    font-size: 13px;
    line-height: 1.55;
}

html.csa-v2 body.csa-client .payment-outcome-code {
    display: inline-flex;
    gap: 5px;
    margin-top: 11px;
    padding: 6px 9px;
    border-radius: 8px;
    color: var(--p6-muted);
    background: var(--p6-surface-soft);
    font-size: 12px;
}

/* Auth and guest catalog */

html.csa-v2 body.csa-client .auth-view,
html.csa-v2 body.csa-client .public-view {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, rgba(16, 174, 202, .10), transparent 28rem),
        radial-gradient(circle at 88% 20%, rgba(91, 92, 240, .12), transparent 34rem),
        #f7f8fc;
}

html.csa-v2 body.csa-client .auth-stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 460px);
    gap: clamp(36px, 7vw, 96px);
    width: min(1160px, calc(100% - 40px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 48px 0;
}

html.csa-v2 body.csa-client .auth-copy {
    max-width: 640px;
}

html.csa-v2 body.csa-client .auth-title {
    margin: 13px 0 15px;
    color: var(--p6-ink);
    font-size: clamp(35px, 5vw, 65px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .98;
}

html.csa-v2 body.csa-client .auth-copy > p {
    max-width: 590px;
    color: var(--p6-muted);
    font-size: 14px;
    line-height: 1.65;
}

html.csa-v2 body.csa-client .auth-card {
    padding: 22px;
    border: 1px solid var(--p6-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--p6-shadow-md);
}

html.csa-v2 body.csa-client .auth-card-top h1 {
    font-size: 20px;
}

html.csa-v2 body.csa-client .auth-minor-link {
    color: var(--p6-primary);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

html.csa-v2 body.csa-client .guest-plan-unavailable {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 13px;
    border: 1px solid #efd7a5;
    border-radius: 12px;
    color: #75521e;
    background: #fffbf2;
}

html.csa-v2 body.csa-client .guest-plan-unavailable > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff2d5;
}

html.csa-v2 body.csa-client .guest-plan-unavailable strong {
    font-size: 14px;
}

html.csa-v2 body.csa-client .guest-plan-unavailable p {
    margin: 4px 0 0;
    font-size: 12.5px;
}

html.csa-v2 body.csa-client #guestPlanList.product-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* Component alignment shared by the customer workspace. */

html.csa-v2 body.csa-client .dashboard-command-stats .dashboard-stat-icon {
    grid-area: icon;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 10px;
    color: var(--p6-primary);
    background: #ececff;
    box-sizing: border-box;
}

html.csa-v2 body.csa-client .dashboard-command-stats span {
    grid-area: label;
}

html.csa-v2 body.csa-client .dashboard-command-stats small {
    grid-area: detail;
    margin-top: 7px;
}

html.csa-v2 body.csa-client .dashboard-shortcut .dashboard-shortcut-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 11px;
    color: var(--p6-primary);
    background: #efefff;
    box-sizing: border-box;
}

html.csa-v2 body.csa-client .dashboard-shortcut .dashboard-shortcut-arrow {
    width: 17px;
    min-width: 17px;
    height: 17px;
    color: #a4adbc;
}

html.csa-v2 body.csa-client .topup-history-list {
    gap: 12px;
}

html.csa-v2 body.csa-client .topup-history-row {
    position: relative;
    overflow: hidden;
    padding: 16px;
}

html.csa-v2 body.csa-client .topup-history-row::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    content: "";
    background: #d39a35;
}

html.csa-v2 body.csa-client .topup-history-row[data-status="completed"]::before {
    background: var(--p6-success);
}

html.csa-v2 body.csa-client .topup-history-row[data-status="cancelled"]::before {
    background: var(--p6-danger);
}

html.csa-v2 body.csa-client .topup-history-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
}

html.csa-v2 body.csa-client .topup-history-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--p6-primary);
    background: #efefff;
}

html.csa-v2 body.csa-client .topup-history-head small,
html.csa-v2 body.csa-client .topup-history-meta span {
    display: block;
    color: var(--p6-muted);
    font-size: 12px;
}

html.csa-v2 body.csa-client .topup-history-head h3 {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.3;
}

html.csa-v2 body.csa-client .topup-history-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
}

html.csa-v2 body.csa-client .topup-history-meta > div {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 9px;
    background: var(--p6-surface-soft);
}

html.csa-v2 body.csa-client .topup-history-meta strong {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: var(--p6-ink);
    font-size: 13px;
}

html.csa-v2 body.csa-client .profile-stat {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";
    column-gap: 11px;
    align-items: center;
}

html.csa-v2 body.csa-client .profile-stat .profile-stat-icon {
    grid-area: icon;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 11px;
    color: var(--p6-primary);
    background: #efefff;
    box-sizing: border-box;
}

html.csa-v2 body.csa-client .profile-stat span {
    grid-area: label;
}

html.csa-v2 body.csa-client .profile-stat strong {
    grid-area: value;
}

html.csa-v2 body.csa-client .commission-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

html.csa-v2 body.csa-client .commission-actions .btn,
html.csa-v2 body.csa-client .commission-history-tabs button {
    justify-content: center;
}

/* Responsive */

@media (max-width: 1260px) {
    html.csa-v2 body.csa-client .store-grid.store-grid-v3,
    html.csa-v2 body.csa-client .guide-card-list,
    html.csa-v2 body.csa-client #guestPlanList.product-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .dashboard-command {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1120px) {
    html.csa-v2 body.csa-client .topup-layout,
    html.csa-v2 body.csa-client .support-workspace,
    html.csa-v2 body.csa-client .profile-main-grid,
    html.csa-v2 body.csa-client .profile-commission-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    html.csa-v2 body.csa-client .client-shell {
        display: block !important;
    }

    html.csa-v2 body.csa-client .client-shell.hidden {
        display: none !important;
    }

    html.csa-v2 body.csa-client .client-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(286px, calc(100vw - 48px));
        transform: translateX(-105%);
        transition: transform .22s ease;
    }

    html.csa-v2 body.csa-client.menu-open .client-sidebar {
        transform: translateX(0);
    }

    html.csa-v2 body.csa-client .sidebar-close {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        margin-left: auto;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 9px;
        color: #c8d3e3;
        background: rgba(255, 255, 255, .05);
        font-size: 18px;
    }

    html.csa-v2 body.csa-client .sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: block;
        border: 0;
        background: rgba(7, 12, 22, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    html.csa-v2 body.csa-client.menu-open .sidebar-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    html.csa-v2 body.csa-client .client-topbar .topbar-main {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 68px;
        padding: 9px 14px;
    }

    html.csa-v2 body.csa-client .menu-toggle {
        display: grid;
        place-items: center;
        width: 38px;
        min-height: 38px;
        padding: 0;
    }

    html.csa-v2 body.csa-client .workspace-heading > span,
    html.csa-v2 body.csa-client .workspace-heading p {
        display: none;
    }

    html.csa-v2 body.csa-client .workspace-heading h1 {
        font-size: 16px;
    }

    html.csa-v2 body.csa-client .client-shell .app-content {
        padding: 14px 13px 32px;
    }

    html.csa-v2 body.csa-client .dashboard-bento,
    html.csa-v2 body.csa-client .topup-layout,
    html.csa-v2 body.csa-client .support-workspace,
    html.csa-v2 body.csa-client .profile-main-grid,
    html.csa-v2 body.csa-client .profile-commission-grid {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .store-hero.store-header-v3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    html.csa-v2 body.csa-client .client-order-tools {
        grid-template-columns: minmax(0, 1fr);
    }

    html.csa-v2 body.csa-client .client-order-count {
        justify-self: start;
    }

    html.csa-v2 body.csa-client .workspace-wallet {
        grid-template-columns: auto 22px;
        padding-left: 9px;
    }

    html.csa-v2 body.csa-client .workspace-wallet span {
        display: none;
    }

    html.csa-v2 body.csa-client .workspace-profile {
        display: none;
    }

    html.csa-v2 body.csa-client .dashboard-command {
        gap: 16px;
        padding: 17px;
    }

    html.csa-v2 body.csa-client .dashboard-command-copy h2 {
        font-size: 23px;
    }

    html.csa-v2 body.csa-client .dashboard-command-stats {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .dashboard-command-stats button {
        min-height: 92px;
    }

    html.csa-v2 body.csa-client .dashboard-command-stats strong {
        margin: 4px 0 2px;
        font-size: 15px;
    }

    html.csa-v2 body.csa-client .rental-dashboard.rental-dashboard-empty {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .rental-dashboard-head {
        display: block;
    }

    html.csa-v2 body.csa-client .rental-dashboard-tools {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    html.csa-v2 body.csa-client .rental-product-card.rental-row-v3 {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    html.csa-v2 body.csa-client .rental-product-media img {
        width: 56px;
        height: 56px;
    }

    html.csa-v2 body.csa-client .catalog-filters-v3,
    html.csa-v2 body.csa-client .guide-tools {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .rental-facts-v3 {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .rental-facts-v3 > div:last-child:nth-child(odd) {
        grid-column: auto;
    }

    html.csa-v2 body.csa-client .store-grid.store-grid-v3,
    html.csa-v2 body.csa-client .guide-card-list,
    html.csa-v2 body.csa-client #guestPlanList.product-strip {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .client-order-card.client-order-row-v3 {
        display: block;
    }

    html.csa-v2 body.csa-client .client-order-line {
        display: grid;
        gap: 3px;
        margin-top: 8px;
    }

    html.csa-v2 body.csa-client .client-order-actions {
        justify-content: stretch;
        margin-top: 10px;
    }

    html.csa-v2 body.csa-client .client-order-actions .btn {
        flex: 1;
    }

    html.csa-v2 body.csa-client .profile-security-action {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    html.csa-v2 body.csa-client .profile-security-action .btn {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .profile-stat-grid,
    html.csa-v2 body.csa-client .profile-commission-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .commission-history-table {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    html.csa-v2 body.csa-client .commission-history-table table,
    html.csa-v2 body.csa-client .commission-history-table tbody,
    html.csa-v2 body.csa-client .commission-history-table tr,
    html.csa-v2 body.csa-client .commission-history-table td {
        display: block;
        width: 100%;
    }

    html.csa-v2 body.csa-client .commission-history-table thead {
        display: none;
    }

    html.csa-v2 body.csa-client .commission-history-table tbody {
        display: grid;
        gap: 10px;
    }

    html.csa-v2 body.csa-client .commission-history-table tr {
        overflow: hidden;
        border: 1px solid var(--p6-line);
        border-radius: 12px;
        background: #fff;
    }

    html.csa-v2 body.csa-client .commission-history-table td {
        display: grid;
        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
        gap: 12px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--p6-line);
        text-align: right;
        overflow-wrap: anywhere;
    }

    html.csa-v2 body.csa-client .commission-history-table td:last-child {
        border-bottom: 0;
    }

    html.csa-v2 body.csa-client .commission-history-table td::before {
        color: var(--p6-muted);
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
        text-align: left;
    }

    html.csa-v2 body.csa-client .support-hero {
        display: block;
    }

    html.csa-v2 body.csa-client .support-links {
        margin-top: 10px;
    }

    html.csa-v2 body.csa-client .support-finance-note,
    html.csa-v2 body.csa-client .finance-data-warning {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    html.csa-v2 body.csa-client .support-finance-note .btn,
    html.csa-v2 body.csa-client .finance-data-warning .btn {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .auth-stage {
        grid-template-columns: 1fr;
        width: min(100% - 24px, 520px);
        padding: 28px 0;
    }

    html.csa-v2 body.csa-client .auth-copy {
        display: block;
    }

    html.csa-v2 body.csa-client .auth-title {
        font-size: 38px;
    }
}

@media (max-width: 480px) {
    html.csa-v2 body.csa-client .client-shell .app-content {
        padding: 11px 9px 28px;
    }

    html.csa-v2 body.csa-client .client-topbar .topbar-main {
        padding-inline: 9px;
    }

    html.csa-v2 body.csa-client .dashboard-command-actions,
    html.csa-v2 body.csa-client .rental-empty-actions,
    html.csa-v2 body.csa-client .rental-card-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .dashboard-shortcut-grid,
    html.csa-v2 body.csa-client .profile-action-grid,
    html.csa-v2 body.csa-client .profile-stat-grid,
    html.csa-v2 body.csa-client .profile-commission-stats,
    html.csa-v2 body.csa-client .plan-specs-v3 {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .rental-product-card.rental-row-v3 {
        display: block;
    }

    html.csa-v2 body.csa-client .rental-product-media {
        margin-bottom: 10px;
    }

    html.csa-v2 body.csa-client .rental-product-title {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .topup-history-meta {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .commission-actions {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .plan-specs-v3 > div:last-child:nth-child(odd) {
        grid-column: auto;
    }

    html.csa-v2 body.csa-client .topup-amount-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .drawer-panel,
    html.csa-v2 body.csa-client .drawer.drawer-compact .drawer-panel {
        width: 100vw;
        border-radius: 0;
    }
}

html.csa-v2 body.csa-client .payment-due-summary {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--csa-primary) 28%, var(--csa-line));
    border-radius: 16px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--csa-primary) 9%, transparent), transparent 68%),
        var(--csa-surface);
}

html.csa-v2 body.csa-client .payment-due-summary > span,
html.csa-v2 body.csa-client .payment-due-summary > small {
    color: var(--csa-muted);
    font-size: 12px;
    line-height: 1.45;
}

html.csa-v2 body.csa-client .payment-due-summary > strong {
    color: var(--csa-ink);
    font-size: clamp(24px, 4vw, 32px);
    letter-spacing: -.035em;
    line-height: 1.05;
}

/* -------------------------------------------------------------------------- */
/* Customer P6.1: compact, progressive responsive surfaces                    */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .catalog-mobile-tools {
    display: none;
}

html.csa-v2 body.csa-client .catalog-filter-toggle-v3 {
    width: 100%;
    justify-content: flex-start;
}

html.csa-v2 body.csa-client .catalog-filter-toggle-v3 b {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff;
    background: var(--p6-primary);
    font-size: 11px;
    line-height: 1;
}

html.csa-v2 body.csa-client .catalog-filter-toggle-v3 b.hidden {
    display: none;
}

html.csa-v2 body.csa-client .client-shell .panel {
    margin: 0;
    border-radius: var(--p6-radius);
    box-shadow: var(--p6-shadow-sm);
}

html.csa-v2 body.csa-client .pill.info {
    border-color: #cbd7f5;
    color: #3657a8;
    background: #f1f5ff;
}

html.csa-v2 body.csa-client .dashboard-command {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

html.csa-v2 body.csa-client .dashboard-command.dashboard-command-compact {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    padding: 20px 22px;
}

html.csa-v2 body.csa-client .dashboard-command-compact .dashboard-command-copy h2 {
    font-size: clamp(23px, 1.8vw, 29px);
}

html.csa-v2 body.csa-client .dashboard-command-compact .dashboard-command-actions {
    align-self: center;
    margin: 0;
}

html.csa-v2 body.csa-client .dashboard-bento.dashboard-bento-single,
html.csa-v2 body.csa-client .profile-main-grid.profile-security-grid {
    grid-template-columns: minmax(0, 1fr);
}

html.csa-v2 body.csa-client .topup-layout {
    grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
}

html.csa-v2 body.csa-client .store-grid.store-grid-v3[data-plan-count="1"] {
    width: 100%;
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
}

html.csa-v2 body.csa-client .profile-stat .profile-stat-icon {
    position: static;
    inset: auto;
    margin: 0;
    transform: none;
}

html.csa-v2 body.csa-client .active-rental-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
    padding: 13px 14px;
    border: 1px solid #bee6d7;
    border-radius: 13px;
    background: linear-gradient(110deg, #f0fbf7, #f7fbff);
    box-shadow: var(--p6-shadow-xs);
}

html.csa-v2 body.csa-client .active-rental-banner-text {
    min-width: 0;
}

html.csa-v2 body.csa-client .active-rental-banner-text strong,
html.csa-v2 body.csa-client .active-rental-banner-text span {
    display: flex;
    align-items: center;
}

html.csa-v2 body.csa-client .active-rental-banner-text strong {
    gap: 7px;
    color: #087252;
    font-size: 14px;
}

html.csa-v2 body.csa-client .active-rental-banner-text span {
    margin-top: 3px;
    color: var(--p6-muted);
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .payment-due-summary {
    border-color: var(--p6-line-strong);
    border-radius: var(--p6-radius);
    background:
        linear-gradient(135deg, rgba(91, 92, 240, .08), transparent 68%),
        var(--p6-surface);
}

html.csa-v2 body.csa-client .payment-due-summary > span,
html.csa-v2 body.csa-client .payment-due-summary > small {
    color: var(--p6-muted);
}

html.csa-v2 body.csa-client .payment-due-summary > strong {
    color: var(--p6-ink);
}

html.csa-v2 body.csa-client #content > * {
    animation: p6-content-enter .18s ease both;
}

@keyframes p6-content-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

html.csa-v2 body.csa-client .client-loading-state {
    display: grid;
    gap: 14px;
}

html.csa-v2 body.csa-client .client-loading-heading,
html.csa-v2 body.csa-client .client-loading-card {
    overflow: hidden;
    border: 1px solid var(--p6-line);
    border-radius: var(--p6-radius);
    background: #fff;
}

html.csa-v2 body.csa-client .client-loading-heading {
    display: grid;
    gap: 9px;
    min-height: 112px;
    align-content: center;
    padding: 20px;
}

html.csa-v2 body.csa-client .client-loading-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

html.csa-v2 body.csa-client .client-loading-card {
    display: grid;
    gap: 10px;
    min-height: 168px;
    align-content: center;
    padding: 18px;
}

html.csa-v2 body.csa-client .client-loading-state i {
    display: block;
    width: 62%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef1f6 20%, #f8f9fc 45%, #eef1f6 70%);
    background-size: 220% 100%;
    animation: p6-skeleton 1.2s ease-in-out infinite;
}

html.csa-v2 body.csa-client .client-loading-state i:first-child {
    width: 36%;
    height: 17px;
}

html.csa-v2 body.csa-client .client-loading-state i:last-child {
    width: 78%;
}

@keyframes p6-skeleton {
    to { background-position: -220% 0; }
}

html.csa-v2 body.csa-client .client-order-actions .btn,
html.csa-v2 body.csa-client .client-shell .rental-card-actions .btn,
html.csa-v2 body.csa-client .plan-card-footer .btn.primary {
    min-height: 42px;
    padding: 9px 13px;
    border-radius: var(--p6-radius-sm);
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

html.csa-v2 body.csa-client .client-order-line > span,
html.csa-v2 body.csa-client .client-order-line > span > strong {
    font-size: 12.5px;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}

html.csa-v2 body.csa-client .topup-history-meta {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (max-width: 720px) {
    html.csa-v2 body.csa-client .client-topbar {
        min-height: 64px !important;
        border-radius: 0 !important;
        box-shadow: 0 3px 14px rgba(20, 30, 51, .07) !important;
    }

    html.csa-v2 body.csa-client .client-topbar .topbar-main {
        min-height: 64px;
        padding: 8px 10px;
    }

    html.csa-v2 body.csa-client .client-shell .app-content {
        min-height: calc(100dvh - 64px);
        padding-top: 12px;
    }

    html.csa-v2 body.csa-client .catalog-mobile-tools {
        display: flex;
        margin-bottom: 10px;
    }

    html.csa-v2 body.csa-client .catalog-filters-v3 {
        display: none;
        margin-bottom: 10px;
        padding: 11px;
    }

    html.csa-v2 body.csa-client .catalog-filters-v3.is-open {
        display: grid;
    }

    html.csa-v2 body.csa-client .catalog-category-row-v3 {
        padding: 10px 11px;
    }

    html.csa-v2 body.csa-client .catalog-category-row-v3 .category-pill {
        min-height: 36px;
        padding: 7px 10px;
    }

    html.csa-v2 body.csa-client .rental-facts-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .rental-facts-v3 > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .client-order-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    html.csa-v2 body.csa-client .client-order-line > span {
        min-width: 0;
        padding: 8px 9px;
        border: 1px solid var(--p6-line);
        border-radius: 8px;
        background: var(--p6-surface-soft);
    }

    html.csa-v2 body.csa-client .client-order-line > span:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .dashboard-command.dashboard-command-compact {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 16px;
    }

    html.csa-v2 body.csa-client .dashboard-command-compact .dashboard-command-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    html.csa-v2 body.csa-client .dashboard-command-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .dashboard-command-stats > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .dashboard-command-stats button {
        min-height: 76px;
    }

    html.csa-v2 body.csa-client .commission-history-table table {
        min-width: 0 !important;
    }

    html.csa-v2 body.csa-client .active-rental-banner {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    html.csa-v2 body.csa-client .active-rental-banner .btn {
        width: 100%;
    }

    html.csa-v2 body.csa-client .client-loading-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    html.csa-v2 body.csa-client .store-hero.store-header-v3 {
        gap: 16px;
        margin-bottom: 10px;
        padding: 16px;
    }

    html.csa-v2 body.csa-client .store-hero h2 {
        font-size: 24px;
        line-height: 1.15;
    }

    html.csa-v2 body.csa-client .store-grid.store-grid-v3[data-plan-count="1"] {
        grid-template-columns: minmax(0, 1fr);
    }

    html.csa-v2 body.csa-client .rental-dashboard {
        padding: 14px;
    }

    html.csa-v2 body.csa-client .rental-dashboard-head {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    html.csa-v2 body.csa-client .rental-product-card.rental-row-v3 {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
    }

    html.csa-v2 body.csa-client .rental-product-media {
        margin: 0;
    }

    html.csa-v2 body.csa-client .rental-product-media img {
        width: 48px;
        height: 48px;
        border-radius: 11px;
    }

    html.csa-v2 body.csa-client .rental-product-title {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    html.csa-v2 body.csa-client .rental-product-title h3 {
        font-size: 15px;
    }

    html.csa-v2 body.csa-client .rental-facts-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 10px;
    }

    html.csa-v2 body.csa-client .rental-facts-v3 > div {
        min-height: 0;
        padding: 9px;
    }

    html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 11px;
    }

    html.csa-v2 body.csa-client .plan-tile-v3 .plan-tile-head-v3 .media {
        width: 60px;
        height: 60px;
        min-height: 60px;
    }

    html.csa-v2 body.csa-client .plan-specs-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    html.csa-v2 body.csa-client .plan-specs-v3 > div {
        min-height: 0;
        padding: 9px;
    }

    html.csa-v2 body.csa-client .plan-specs-v3 > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .profile-stat-grid,
    html.csa-v2 body.csa-client .profile-commission-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .profile-stat-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .profile-stat {
        min-height: 78px;
        padding: 11px;
    }

    html.csa-v2 body.csa-client .profile-stat {
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 9px;
    }

    html.csa-v2 body.csa-client .profile-stat .profile-stat-icon {
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 8px;
    }

    html.csa-v2 body.csa-client .profile-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    html.csa-v2 body.csa-client .profile-action-card {
        min-height: 108px;
        padding: 11px;
    }

    html.csa-v2 body.csa-client .topup-history-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .topup-history-meta > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-client .commission-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 body.csa-client .dashboard-shortcut-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    html.csa-v2 body.csa-client .dashboard-shortcut {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        min-height: 72px;
        padding: 10px;
    }

    html.csa-v2 body.csa-client .dashboard-shortcut small,
    html.csa-v2 body.csa-client .dashboard-shortcut .dashboard-shortcut-arrow {
        display: none;
    }

    html.csa-v2 body.csa-client .drawer {
        align-items: flex-end;
        justify-content: center;
        padding: 0 !important;
    }

    html.csa-v2 body.csa-client .drawer-panel,
    html.csa-v2 body.csa-client .drawer.drawer-compact .drawer-panel {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 8px);
        margin: 0;
        border-radius: 18px 18px 0 0;
    }
}

@media (pointer: coarse) and (max-width: 980px) {
    html.csa-v2 body.csa-client .menu-toggle,
    html.csa-v2 body.csa-client .sidebar-close,
    html.csa-v2 body.csa-client .drawer-close,
    html.csa-v2 body.csa-client .password-visibility {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    html.csa-v2 body.csa-client .client-order-actions .btn,
    html.csa-v2 body.csa-client .client-shell .rental-card-actions .btn,
    html.csa-v2 body.csa-client .plan-card-footer .btn.primary {
        min-height: 44px;
    }
}

@media (max-width: 560px) {
    html.csa-v2 body.csa-home-page .hero {
        padding: 88px 0 24px !important;
    }

    html.csa-v2 body.csa-home-page .hero-grid {
        gap: 16px !important;
    }

    html.csa-v2 body.csa-home-page .hero h1 {
        max-width: 350px !important;
        font-size: clamp(38px, 11.4vw, 44px) !important;
        line-height: .98 !important;
    }

    html.csa-v2 body.csa-home-page .hero p {
        max-width: 340px !important;
        margin: 16px auto 18px !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    html.csa-v2 body.csa-home-page .hero-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: min(100%, 350px) !important;
    }

    html.csa-v2 body.csa-home-page .hero-actions > :first-child {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-home-page .hero-actions .csa-btn {
        min-height: 42px !important;
        padding-inline: 10px !important;
        font-size: 11.5px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.csa-v2 body.csa-client #content > *,
    html.csa-v2 body.csa-client .client-loading-state i {
        animation: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Customer P6.1: final responsive reconciliation                             */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .store-card.plan-tile-v3::before,
html.csa-v2 body.csa-client .client-order-card.client-order-row-v3::before {
    display: none;
    content: none;
}

html.csa-v2 body.csa-client .profile-hero,
html.csa-v2 body.csa-client .support-hero {
    border-left-width: 1px;
}

html.csa-v2 body.csa-client .support-workspace {
    grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
    gap: 16px;
}

html.csa-v2 body.csa-client .support-workspace > *,
html.csa-v2 body.csa-client .support-workspace :where(.panel-body, .ticket-list, .ticket-list-item, .ticket-open-guard),
html.csa-v2 body.csa-client .topup-layout > *,
html.csa-v2 body.csa-client .profile-main-grid > *,
html.csa-v2 body.csa-client .profile-commission-grid > *,
html.csa-v2 body.csa-client .dashboard-bento > *,
html.csa-v2 body.csa-client .store-hero.store-header-v3 > * {
    min-width: 0;
}

html.csa-v2 body.csa-client .ticket-list-item :where(strong, span, p),
html.csa-v2 body.csa-client .ticket-open-guard :where(strong, span, p),
html.csa-v2 body.csa-client .support-finance-note > span,
html.csa-v2 body.csa-client .finance-data-warning :where(strong, p) {
    overflow-wrap: anywhere;
}

html.csa-v2 body.csa-client .support-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

html.csa-v2 body.csa-client .empty {
    display: grid;
    place-items: center;
    min-height: 82px;
    padding: 14px 16px;
    border-radius: 11px;
    color: var(--p6-muted);
    background: var(--p6-surface-soft);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

html.csa-v2 body.csa-client .client-empty-state.is-compact {
    grid-template-columns: auto minmax(0, max-content);
    justify-content: center;
    gap: 8px;
    min-height: 64px;
}

html.csa-v2 body.csa-client .client-empty-state.is-compact .ui-icon,
html.csa-v2 body.csa-client :where(.sidebar-close, .drawer-close, .image-zoom-close) .ui-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

html.csa-v2 body.csa-client .sidebar-foot .language-current {
    grid-template-columns: 30px minmax(0, 1fr) 12px;
}

html.csa-v2 body.csa-client .sidebar-foot .language-current::after {
    justify-self: end;
    margin-left: 0;
}

html.csa-v2 body.csa-client .rental-dashboard.rental-dashboard-empty {
    gap: 16px;
    min-height: 136px;
    padding: 18px 20px;
}

html.csa-v2 body.csa-client .client-topbar,
html.csa-v2 body.csa-client .client-topbar .topbar-main {
    min-height: 72px;
}

html.csa-v2 body.csa-client .client-topbar {
    padding: 0;
}

html.csa-v2 body.csa-client .client-topbar .topbar-main {
    padding: 10px 24px;
}

html.csa-v2 body.csa-client .workspace-heading > span {
    display: none;
}

html.csa-v2 body.csa-client .workspace-heading h1 {
    line-height: 1.15;
}

html.csa-v2 body.csa-client .client-shell .app-content {
    min-height: calc(100dvh - 72px);
    padding: 20px 24px 44px;
}

html.csa-v2 body.csa-client .workspace-wallet,
html.csa-v2 body.csa-client .workspace-profile {
    min-height: 42px;
    border-radius: 10px;
}

html.csa-v2 body.csa-client .workspace-profile {
    width: 42px;
    height: 42px;
}

html.csa-v2 body.csa-client :where(input:not([type="checkbox"]):not([type="radio"]), select),
html.csa-v2 body.csa-client .catalog-filters-v3 :where(input, select),
html.csa-v2 body.csa-client .client-order-tools :where(input, select),
html.csa-v2 body.csa-client .guide-tools :where(input, select) {
    min-height: 42px;
}

html.csa-v2 body.csa-client .password-input-wrap input {
    padding-right: 48px;
}

html.csa-v2 body.csa-client .password-visibility {
    top: 3px;
    right: 3px;
    width: 36px;
    height: 36px;
    min-height: 36px;
}

html.csa-v2 body.csa-client .drawer-close {
    width: 40px;
    height: 40px;
    min-height: 40px;
}

@media (max-width: 1180px) {
    html.csa-v2 body.csa-client .support-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    html.csa-v2 body.csa-client .client-topbar,
    html.csa-v2 body.csa-client .client-topbar .topbar-main {
        min-height: 64px;
    }

    html.csa-v2 body.csa-client .client-topbar .topbar-main {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px 12px;
    }

    html.csa-v2 body.csa-client .client-shell .app-content {
        min-height: calc(100dvh - 64px);
        padding: 14px 13px 32px;
    }

    html.csa-v2 body.csa-client .menu-toggle {
        width: 44px;
        height: 44px;
        min-height: 44px;
    }

    html.csa-v2 body.csa-client .workspace-actions {
        min-width: 0;
        gap: 6px;
    }

    html.csa-v2 body.csa-client .workspace-wallet {
        min-width: 0;
        min-height: 44px;
    }

    html.csa-v2 body.csa-client .workspace-wallet strong {
        max-width: 112px;
    }

    html.csa-v2 body.csa-client .workspace-profile {
        width: 44px;
        height: 44px;
        min-height: 44px;
    }
}

@media (max-width: 720px) {
    html.csa-v2 body.csa-client .client-topbar .topbar-main {
        padding-inline: 10px;
    }

    html.csa-v2 body.csa-client .client-shell .app-content {
        padding: 12px 10px 28px;
    }

    html.csa-v2 body.csa-client .empty {
        min-height: 64px;
        padding: 12px;
    }

    html.csa-v2 body.csa-client .rental-dashboard.rental-dashboard-empty {
        gap: 12px;
        min-height: 0;
        padding: 15px;
    }

    html.csa-v2 body.csa-client .rental-empty-copy h2 {
        font-size: 20px;
    }

    html.csa-v2 body.csa-client .support-hero {
        display: grid;
        gap: 12px;
        padding: 15px;
    }

    html.csa-v2 body.csa-client .support-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-top: 0;
    }

    html.csa-v2 body.csa-client .support-links .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    html.csa-v2 body.csa-client .client-topbar .topbar-main {
        padding-inline: 9px;
    }

    html.csa-v2 body.csa-client .client-shell .app-content {
        padding: 11px 9px 26px;
    }

    html.csa-v2 body.csa-client .workspace-wallet {
        gap: 4px;
        padding-inline: 8px 6px;
    }

    html.csa-v2 body.csa-client .workspace-wallet strong {
        max-width: 84px;
        font-size: 13px;
    }
}

@media (pointer: coarse) {
    html.csa-v2 body.csa-client .client-shell .app-content :where(button, .btn, input:not([type="checkbox"]):not([type="radio"]), select),
    html.csa-v2 body.csa-client .drawer-panel :where(button, .btn, input:not([type="checkbox"]):not([type="radio"]), select),
    html.csa-v2 body.csa-client :where(.public-view, .auth-view) :where(button, .btn, input:not([type="checkbox"]):not([type="radio"]), select) {
        min-height: 44px;
    }

    html.csa-v2 body.csa-client .sidebar-close,
    html.csa-v2 body.csa-client .drawer-close,
    html.csa-v2 body.csa-client .password-visibility {
        width: 44px;
        height: 44px;
        min-height: 44px;
    }

    html.csa-v2 body.csa-client .password-visibility {
        top: 0;
        right: 0;
    }
}

@media (min-width: 981px) {
    html.csa-v2 body.csa-client .client-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

    html.csa-v2 body.csa-client .client-workspace {
        grid-column: 2;
        min-width: 0;
    }
}

/* -------------------------------------------------------------------------- */
/* P7 — Guest plan catalogue and direct-plan detail                            */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client .public-view .guest-plan-page-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

html.csa-v2 body.csa-client .public-view .guest-plan-kicker {
    color: var(--p6-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
}

html.csa-v2 body.csa-client .public-view .guest-plan-back {
    width: auto;
    max-width: max-content;
    align-self: flex-start;
    justify-self: start;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    padding: 7px 11px;
    border: 1px solid var(--p6-line);
    border-radius: 10px;
    color: #46536b;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: var(--p6-shadow-xs);
    transition: color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

html.csa-v2 body.csa-client .public-view .guest-plan-back .ui-icon {
    width: 14px;
    min-width: 14px;
    height: 14px;
    flex-basis: 14px;
    vertical-align: 0;
}

html.csa-v2 body.csa-client .public-view .guest-plan-back:hover {
    transform: translateX(-2px);
    border-color: rgba(91, 92, 240, .28);
    color: var(--p6-primary-dark);
    box-shadow: 0 8px 20px rgba(33, 45, 82, .08);
}

html.csa-v2 body.csa-client .public-view .plan-badges-v3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

html.csa-v2 body.csa-client .public-view .mode-badge {
    gap: 5px;
    line-height: 1;
}

html.csa-v2 body.csa-client .public-view .mode-badge > .ui-icon,
html.csa-v2 body.csa-client .public-view .rent-mechanic-inline-v3 > strong > .ui-icon,
html.csa-v2 body.csa-client .public-view .plan-card-footer .btn > .ui-icon {
    width: 14px;
    min-width: 14px;
    height: 14px;
    flex-basis: 14px;
    margin: 0;
    vertical-align: 0;
}

html.csa-v2 body.csa-client .public-view .rent-mechanic-inline-v3 > strong {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3 {
    transition:
        transform .26s cubic-bezier(.2, .75, .2, 1),
        border-color .26s ease,
        box-shadow .26s ease;
}

html.csa-v2 body.csa-client .public-view .guest-plan-tile-v3:hover {
    transform: translateY(-2px);
}

html.csa-v2 body.csa-client .public-view .guest-plan-card-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.csa-v2 body.csa-client .public-view .guest-plan-card-specs > div:last-child:nth-child(odd) {
    grid-column: auto;
}

html.csa-v2 body.csa-client .public-view .guest-plan-card-note {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 11px;
    color: #526078;
    background: #f6f8fc;
    font-size: 10.5px;
    line-height: 1.4;
}

html.csa-v2 body.csa-client .public-view .guest-plan-card-note .ui-icon {
    width: 15px;
    min-width: 15px;
    height: 15px;
    flex-basis: 15px;
    color: #169b82;
    vertical-align: 0;
}

html.csa-v2 body.csa-client .public-view .plan-card-footer .btn {
    gap: 8px;
}

html.csa-v2 body.csa-client .public-view .plan-card-footer .btn .ui-icon {
    transition: transform .22s cubic-bezier(.2, .75, .2, 1);
}

html.csa-v2 body.csa-client .public-view .plan-card-footer .btn:hover .ui-icon {
    transform: translateX(3px);
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog {
    display: grid;
    grid-template-columns: minmax(230px, .58fr) minmax(0, 1.72fr);
    align-items: center;
    gap: 24px;
    padding: 24px;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-page-title {
    min-width: 0;
    margin: 0;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-page-title h2 {
    max-width: 280px;
    font-size: clamp(27px, 2.55vw, 34px);
    line-height: 1.08;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-page-title p {
    max-width: 270px;
    line-height: 1.6;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog #guestPlanList.product-strip {
    min-width: 0;
    display: block;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-tile-v3 {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(205px, .82fr) minmax(230px, .7fr);
    grid-template-areas:
        "head specs buy"
        "summary note buy";
    align-items: center;
    gap: 12px 16px;
    padding: 18px;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(24, 35, 70, .085);
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-tile-head-v3 {
    grid-area: head;
    min-width: 0;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .product-thumb {
    width: 82px;
    height: 82px;
    padding: 7px;
    object-fit: contain;
    object-position: center;
    background: #f8fafc;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-tile-title-v3 {
    min-width: 0;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-tile-title-v3 h3 {
    margin-top: 8px;
    overflow-wrap: anywhere;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-summary-v3 {
    grid-area: summary;
    min-height: 0;
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-card-specs {
    grid-area: specs;
    align-self: stretch;
    margin: 0;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-card-note {
    grid-area: note;
    min-height: 42px;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-tile-footer-v3 {
    grid-area: buy;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 15px;
    margin: 0;
    padding: 17px;
    border: 0;
    border-left: 1px solid #e4e9f2;
    border-radius: 0 14px 14px 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(91, 92, 240, .10), transparent 68%),
        linear-gradient(145deg, #f8faff, #f4f7fc);
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-from-price {
    display: grid;
    gap: 4px;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-from-price strong {
    font-size: 22px;
    line-height: 1.15;
}

html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-tile-footer-v3 .btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    padding-inline: 13px;
    white-space: nowrap;
}

html.csa-v2 body.csa-client .guest-plan-detail-view .guest-plans-band {
    padding: 27px;
    overflow: visible;
}

html.csa-v2 body.csa-client .guest-plan-detail-view #guestPlanList.product-strip {
    display: block;
}

html.csa-v2 body.csa-client .guest-plan-detail-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 370px);
    gap: 24px;
    padding: 24px;
    overflow: clip;
    border: 1px solid #dce2ed;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(91, 92, 240, .07), transparent 31rem),
        linear-gradient(145deg, #fff 0%, #fbfcff 74%);
    box-shadow: 0 20px 52px rgba(24, 35, 70, .085);
}

html.csa-v2 body.csa-client .guest-plan-detail-product {
    min-width: 0;
}

html.csa-v2 body.csa-client .guest-plan-detail-head {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

html.csa-v2 body.csa-client .guest-plan-detail-media {
    width: 104px;
    height: 104px;
    overflow: hidden;
    padding: 8px;
    border: 1px solid #e0e5ef;
    border-radius: 22px;
    background: #f7f9fc;
    box-shadow: 0 14px 30px rgba(26, 38, 75, .10);
}

html.csa-v2 body.csa-client .guest-plan-detail-media img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

html.csa-v2 body.csa-client .guest-plan-detail-identity h1 {
    max-width: 760px;
    margin: 9px 0 7px;
    color: #121a2e;
    font-size: clamp(24px, 2.35vw, 33px);
    font-weight: 840;
    letter-spacing: -.035em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

html.csa-v2 body.csa-client .guest-plan-detail-identity > p {
    max-width: 720px;
    margin: 0;
    color: #68748a;
    font-size: 12.5px;
    line-height: 1.6;
}

html.csa-v2 body.csa-client .guest-plan-detail-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 0;
}

html.csa-v2 body.csa-client .guest-plan-detail-facts > div {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 86px;
    padding: 13px;
    border: 1px solid #e4e9f2;
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(247, 250, 254, .92));
    box-shadow: 0 7px 18px rgba(29, 42, 78, .035);
    transition: transform .24s cubic-bezier(.2, .75, .2, 1), border-color .24s ease, box-shadow .24s ease;
}

html.csa-v2 body.csa-client .guest-plan-detail-facts > div:hover {
    transform: translateY(-2px);
    border-color: rgba(91, 92, 240, .20);
    box-shadow: 0 12px 26px rgba(29, 42, 78, .065);
}

html.csa-v2 body.csa-client .guest-plan-fact-icon,
html.csa-v2 body.csa-client .guest-plan-content-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #0b93a5;
    background: #e5f7fa;
}

html.csa-v2 body.csa-client .guest-plan-fact-icon.is-purple {
    color: #5b5cf0;
    background: #ededff;
}

html.csa-v2 body.csa-client :where(.guest-plan-fact-icon, .guest-plan-content-icon) .ui-icon {
    width: 19px;
    min-width: 19px;
    height: 19px;
    flex-basis: 19px;
    vertical-align: 0;
}

html.csa-v2 body.csa-client .guest-plan-detail-facts dt {
    margin: 0;
    color: #7a869b;
    font-size: 9.5px;
    font-weight: 780;
    letter-spacing: .055em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .guest-plan-detail-facts dd {
    margin: 3px 0 0;
    color: #172036;
    font-size: 13.5px;
    font-weight: 780;
}

html.csa-v2 body.csa-client .guest-plan-detail-facts small {
    display: block;
    margin-top: 2px;
    color: #778399;
    font-size: 10px;
    line-height: 1.4;
}

html.csa-v2 body.csa-client .guest-plan-content-card {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #e2e7f0;
    border-radius: 17px;
    background: #fff;
}

html.csa-v2 body.csa-client .guest-plan-content-heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

html.csa-v2 body.csa-client .guest-plan-content-heading h2 {
    margin: 0;
    color: #172036;
    font-size: 15px;
}

html.csa-v2 body.csa-client .guest-plan-content-heading p {
    margin: 3px 0 0;
    color: #778399;
    font-size: 10.5px;
}

html.csa-v2 body.csa-client .guest-plan-content {
    overflow: hidden;
    border-radius: 13px;
}

html.csa-v2 body.csa-client .guest-plan-content .plan-html {
    color: #29364d;
}

html.csa-v2 body.csa-client .guest-plan-content [data-plan-scope] .sr-wrap {
    max-width: none !important;
}

html.csa-v2 body.csa-client .guest-plan-purchase {
    position: sticky;
    top: 104px;
    align-self: start;
    padding: 23px;
    overflow: hidden;
    border: 1px solid rgba(133, 151, 210, .24);
    border-radius: 20px;
    color: #eef4fc;
    background:
        radial-gradient(circle at 100% 0%, rgba(107, 83, 232, .30), transparent 48%),
        radial-gradient(circle at 0% 100%, rgba(15, 177, 199, .16), transparent 42%),
        linear-gradient(148deg, #152843 0%, #0a172b 74%);
    box-shadow: 0 24px 56px rgba(5, 15, 38, .22), inset 0 1px rgba(255, 255, 255, .06);
}

html.csa-v2 body.csa-client .guest-plan-purchase-kicker {
    color: #82e0eb;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .09em;
}

html.csa-v2 body.csa-client .guest-plan-purchase h2 {
    margin: 6px 0 0;
    color: #fff;
    font-size: 21px;
    letter-spacing: -.025em;
}

html.csa-v2 body.csa-client .guest-plan-purchase > p {
    margin: 7px 0 0;
    color: #aab9cd;
    font-size: 11px;
    line-height: 1.5;
}

html.csa-v2 body.csa-client .guest-plan-period-list {
    display: grid;
    gap: 8px;
    margin-top: 17px;
}

html.csa-v2 body.csa-client .guest-plan-period-row {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 13px;
    background: rgba(255, 255, 255, .055);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

html.csa-v2 body.csa-client .guest-plan-period-row.is-featured {
    border-color: rgba(79, 213, 226, .30);
    background: rgba(24, 179, 196, .10);
}

html.csa-v2 body.csa-client .guest-plan-period-row > span > strong,
html.csa-v2 body.csa-client .guest-plan-period-row > span > small {
    display: block;
}

html.csa-v2 body.csa-client .guest-plan-period-row > span > strong {
    color: #f4f8fd;
    font-size: 12.5px;
}

html.csa-v2 body.csa-client .guest-plan-period-row > span > small {
    margin-top: 2px;
    color: #90a3bd;
    font-size: 9.5px;
}

html.csa-v2 body.csa-client .guest-plan-period-row > strong {
    color: #fff;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

html.csa-v2 body.csa-client .guest-plan-period-empty {
    padding: 13px;
    border: 1px dashed rgba(255, 255, 255, .16);
    border-radius: 13px;
    color: #b4c2d5;
    font-size: 11px;
    line-height: 1.5;
}

html.csa-v2 body.csa-client .guest-plan-price-summary {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

html.csa-v2 body.csa-client .guest-plan-price-summary span {
    color: #91a5bf;
    font-size: 9.5px;
    font-weight: 780;
    letter-spacing: .055em;
    text-transform: uppercase;
}

html.csa-v2 body.csa-client .guest-plan-price-summary strong {
    color: #fff;
    font-size: 21px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    text-align: right;
}

html.csa-v2 body.csa-client .guest-plan-register-cta {
    width: 100%;
    min-height: 50px;
    gap: 9px;
    margin-top: 16px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #6858ee, #4f70e7 56%, #11acc8);
    box-shadow: 0 14px 30px rgba(69, 90, 220, .28);
}

html.csa-v2 body.csa-client .guest-plan-register-cta .ui-icon {
    width: 15px;
    min-width: 15px;
    height: 15px;
    flex-basis: 15px;
    vertical-align: 0;
    transition: transform .22s cubic-bezier(.2, .75, .2, 1);
}

html.csa-v2 body.csa-client .guest-plan-register-cta:hover .ui-icon {
    transform: translateX(3px);
}

html.csa-v2 body.csa-client .guest-plan-login-link {
    display: block;
    margin-top: 12px;
    color: #d7e1ef;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

html.csa-v2 body.csa-client .guest-plan-login-link:hover {
    color: #79e1ec;
}

html.csa-v2 body.csa-client .guest-plan-preserve-note {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    margin-top: 17px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    color: #aebdd1;
    background: rgba(255, 255, 255, .045);
    font-size: 10px;
    line-height: 1.5;
}

html.csa-v2 body.csa-client .guest-plan-preserve-note .ui-icon {
    width: 16px;
    min-width: 16px;
    height: 16px;
    flex-basis: 16px;
    color: #70ddc6;
    vertical-align: 0;
}

html.csa-v2 body.csa-client .guest-steps-band {
    display: grid;
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.65fr);
    align-items: center;
    gap: 25px;
    padding: 22px 24px;
}

html.csa-v2 body.csa-client .guest-steps-band .section-title {
    margin: 0;
}

html.csa-v2 body.csa-client .guest-steps-band .section-title h2 {
    font-size: clamp(22px, 2.3vw, 30px);
}

html.csa-v2 body.csa-client .guest-steps-band .feature-grid {
    gap: 9px;
}

html.csa-v2 body.csa-client .guest-steps-band .feature-tile {
    min-height: 112px;
    padding: 15px;
    border-radius: 15px;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

html.csa-v2 body.csa-client .guest-steps-band .feature-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(91, 92, 240, .22);
    box-shadow: 0 13px 28px rgba(25, 36, 69, .08);
}

html.csa-v2 body.csa-client .guest-steps-band .feature-mark {
    font-size: 22px;
}

html.csa-v2 body.csa-client .guest-steps-band .feature-tile h3 {
    margin-top: 9px;
    font-size: 14px;
}

html.csa-v2 body.csa-client .guest-steps-band .feature-tile p {
    margin-top: 5px;
    font-size: 10.5px;
    line-height: 1.45;
}

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

@media (prefers-reduced-motion: no-preference) {
    html.csa-v2 body.csa-client .guest-plan-detail-card {
        animation: guestPlanRise .42s cubic-bezier(.16, 1, .3, 1) both;
    }

    html.csa-v2 body.csa-client .guest-plan-purchase {
        animation: guestPlanRise .46s .05s cubic-bezier(.16, 1, .3, 1) both;
    }
}

@media (hover: hover) {
    html.csa-v2 body.csa-client .guest-plan-period-row:hover {
        transform: translateY(-1px);
        border-color: rgba(111, 221, 235, .30);
        background: rgba(255, 255, 255, .075);
    }
}

@media (max-width: 900px) {
    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 18px;
    }

    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-page-title h2,
    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-page-title p {
        max-width: none;
    }

    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-tile-v3 {
        grid-template-columns: minmax(250px, 1.2fr) minmax(200px, .82fr) minmax(220px, .7fr);
    }

    html.csa-v2 body.csa-client .guest-plan-detail-card {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .guest-plan-purchase {
        position: static;
    }

    html.csa-v2 body.csa-client .guest-steps-band {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-tile-v3 {
        grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
        grid-template-areas:
            "head buy"
            "summary buy"
            "specs buy"
            "note buy";
    }
}

@media (max-width: 620px) {
    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog {
        display: block;
        padding: 16px;
    }

    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-page-title {
        margin-bottom: 16px;
    }

    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .guest-plan-tile-v3 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "summary"
            "specs"
            "note"
            "buy";
        gap: 11px;
        padding: 15px;
        border-radius: 16px;
    }

    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-tile-head-v3 {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .product-thumb {
        width: 70px;
        height: 70px;
    }

    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-tile-footer-v3 {
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 13px 0 0;
        border-top: 1px solid #e5eaf2;
        border-left: 0;
        border-radius: 0;
        background: transparent;
    }

    html.csa-v2 body.csa-client .public-view .guest-plans-band.is-single-catalog .plan-tile-footer-v3 .btn {
        width: auto;
        min-width: 168px;
    }

    html.csa-v2 body.csa-client .guest-plan-detail-view .guest-plans-band {
        padding: 16px;
    }

    html.csa-v2 body.csa-client .guest-plan-detail-card {
        gap: 15px;
        padding: 15px;
        border-radius: 18px;
    }

    html.csa-v2 body.csa-client .guest-plan-detail-head {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 12px;
    }

    html.csa-v2 body.csa-client .guest-plan-detail-media {
        width: 74px;
        height: 74px;
        padding: 6px;
        border-radius: 17px;
    }

    html.csa-v2 body.csa-client .guest-plan-detail-media img {
        border-radius: 11px;
    }

    html.csa-v2 body.csa-client .guest-plan-detail-identity h1 {
        margin-top: 7px;
        font-size: 20px;
    }

    html.csa-v2 body.csa-client .guest-plan-detail-identity > p {
        grid-column: 1 / -1;
        font-size: 11.5px;
    }

    html.csa-v2 body.csa-client .guest-plan-detail-facts {
        grid-template-columns: 1fr;
        margin-top: 15px;
    }

    html.csa-v2 body.csa-client .guest-plan-content-card {
        padding: 13px;
    }

    html.csa-v2 body.csa-client .guest-plan-purchase {
        padding: 18px;
        border-radius: 17px;
    }

    html.csa-v2 body.csa-client .guest-plan-price-summary {
        display: block;
    }

    html.csa-v2 body.csa-client .guest-plan-price-summary strong {
        display: block;
        margin-top: 3px;
        text-align: left;
    }

    html.csa-v2 body.csa-client .guest-steps-band {
        gap: 15px;
        padding: 17px 16px;
    }

    html.csa-v2 body.csa-client .guest-steps-band .feature-grid {
        grid-template-columns: 1fr;
    }

    html.csa-v2 body.csa-client .guest-steps-band .feature-tile {
        min-height: 0;
    }
}