/*
 * CSA Experience System — 2026.07
 * Add-only visual layer for landing, customer, admin, CTV and Apple ID flows.
 * Existing application behavior and API contracts remain unchanged.
 */

:root {
    --csa-v2-canvas: #f3f5fa;
    --csa-v2-surface: rgba(255, 255, 255, .88);
    --csa-v2-surface-solid: #ffffff;
    --csa-v2-surface-soft: #f7f8fc;
    --csa-v2-ink: #101426;
    --csa-v2-muted: #687086;
    --csa-v2-line: rgba(40, 47, 78, .11);
    --csa-v2-line-strong: rgba(40, 47, 78, .18);
    --csa-v2-brand: #5557e8;
    --csa-v2-brand-strong: #3f42ca;
    --csa-v2-cyan: #07a9c3;
    --csa-v2-violet: #8b5cf6;
    --csa-v2-good: #12845d;
    --csa-v2-warn: #c46c13;
    --csa-v2-danger: #d63c58;
    --csa-v2-radius-sm: 12px;
    --csa-v2-radius: 18px;
    --csa-v2-radius-lg: 26px;
    --csa-v2-shadow-sm: 0 10px 28px rgba(27, 32, 63, .07);
    --csa-v2-shadow: 0 22px 58px rgba(27, 32, 63, .11);
    --csa-v2-shadow-float: 0 34px 90px rgba(20, 25, 54, .18);
    --csa-v2-ease: cubic-bezier(.2, .72, .22, 1);
}

html.csa-v2 {
    min-height: 100%;
    color-scheme: light;
    scroll-behavior: smooth;
}

html.csa-v2,
html.csa-v2 body,
html.csa-v2 button,
html.csa-v2 input,
html.csa-v2 textarea,
html.csa-v2 select {
    font-family: "Be Vietnam Pro", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.csa-v2 body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html.csa-v2 ::selection {
    color: #fff;
    background: rgba(85, 87, 232, .82);
}

html.csa-v2 :focus-visible {
    outline: 3px solid rgba(85, 87, 232, .28);
    outline-offset: 3px;
}

html.csa-v2 * {
    scrollbar-width: thin;
    scrollbar-color: rgba(85, 87, 232, .28) transparent;
}

html.csa-v2 *::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

html.csa-v2 *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(85, 87, 232, .25);
    background-clip: padding-box;
}

html.csa-v2 .btn,
html.csa-v2 .csa-btn {
    border-radius: 13px !important;
    border-color: var(--csa-v2-line);
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: none;
    transition:
        transform .2s var(--csa-v2-ease),
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

html.csa-v2 .btn:hover,
html.csa-v2 .csa-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(85, 87, 232, .26);
    box-shadow: 0 12px 24px rgba(31, 36, 74, .10);
}

html.csa-v2 .btn:active,
html.csa-v2 .csa-btn:active {
    transform: translateY(0) scale(.985);
}

html.csa-v2 .btn.primary,
html.csa-v2 .csa-btn-fill {
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--csa-v2-brand), #6568f0 52%, var(--csa-v2-cyan)) !important;
    box-shadow: 0 12px 26px rgba(85, 87, 232, .22);
}

html.csa-v2 .btn.primary:hover,
html.csa-v2 .csa-btn-fill:hover {
    box-shadow: 0 16px 34px rgba(85, 87, 232, .30);
}

html.csa-v2 .field input,
html.csa-v2 .field textarea,
html.csa-v2 .field select {
    border-radius: 13px !important;
    border-color: var(--csa-v2-line-strong);
    background: rgba(255, 255, 255, .92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

html.csa-v2 .field input:focus,
html.csa-v2 .field textarea:focus,
html.csa-v2 .field select:focus {
    border-color: rgba(85, 87, 232, .62);
    box-shadow: 0 0 0 4px rgba(85, 87, 232, .12);
}

html.csa-v2 .pill {
    border-color: var(--csa-v2-line);
    border-radius: 999px !important;
    background: rgba(247, 248, 252, .92);
}

html.csa-v2 .drawer {
    background: rgba(12, 16, 34, .50);
    backdrop-filter: blur(8px);
}

html.csa-v2 .drawer-panel,
html.csa-v2 .confirm-card {
    border-color: rgba(255, 255, 255, .7);
    border-radius: 24px !important;
    box-shadow: var(--csa-v2-shadow-float) !important;
}

html.csa-v2 body.csa-drawer-open {
    overflow: hidden;
}

html.csa-v2 .drawer-panel {
    overscroll-behavior: contain;
}

html.csa-v2 .notice {
    border-radius: 16px !important;
    box-shadow: var(--csa-v2-shadow);
}

/* -------------------------------------------------------------------------- */
/* Landing — Vault Aurora                                                     */
/* -------------------------------------------------------------------------- */

html.csa-v2.landing-day,
html.csa-v2.landing-night {
    --landing-v2-text: #101426;
    --landing-v2-muted: #687086;
}

html.csa-v2.landing-day body,
html.csa-v2.landing-night body {
    min-height: 100%;
    color: var(--landing-v2-text);
    background:
        radial-gradient(circle at 11% 2%, rgba(7, 169, 195, .12), transparent 27rem),
        radial-gradient(circle at 88% 1%, rgba(139, 92, 246, .13), transparent 31rem),
        linear-gradient(180deg, #f8f9fd 0%, #f2f4f9 46%, #eef1f7 100%);
}

html.csa-v2.landing-night body {
    --landing-v2-text: #f7f8ff;
    --landing-v2-muted: #aeb7cf;
    color-scheme: dark;
    background:
        radial-gradient(circle at 12% 0%, rgba(7, 169, 195, .18), transparent 30rem),
        radial-gradient(circle at 89% 4%, rgba(139, 92, 246, .18), transparent 34rem),
        #090d1b;
}

html.csa-v2 .csa-legacy-space,
html.csa-v2 .csa-legacy-fg,
html.csa-v2 .landing-cloud,
html.csa-v2 .landing-leaf,
html.csa-v2 .landing-petal,
html.csa-v2 .float-item-day {
    display: none !important;
}

html.csa-v2 .csa-space-bg,
html.csa-v2 .csa-space-fg {
    opacity: .22;
    filter: saturate(.78);
}

html.csa-v2 .container {
    width: min(1240px, calc(100vw - 40px));
}

html.csa-v2 .site-header {
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 90;
    width: min(1240px, calc(100vw - 40px));
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .70);
    border-radius: 20px;
    background: rgba(251, 252, 255, .78);
    box-shadow: 0 16px 45px rgba(28, 33, 65, .10);
    backdrop-filter: blur(22px) saturate(1.35);
}

html.csa-v2.landing-night .site-header {
    border-color: rgba(255, 255, 255, .10);
    background: rgba(13, 18, 38, .76);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .34);
}

html.csa-v2 .nav-wrap {
    min-height: 70px;
    padding: 9px 12px 9px 18px;
}

html.csa-v2 .brand-logo img {
    max-height: 42px;
    filter: drop-shadow(0 7px 12px rgba(29, 35, 70, .12));
}

html.csa-v2 .nav-links {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--csa-v2-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .58);
}

html.csa-v2.landing-night .nav-links {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .05);
}

html.csa-v2 .nav-links a {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--landing-v2-muted);
    font-size: 13px;
    font-weight: 800;
}

html.csa-v2 .nav-links a.active {
    color: #fff;
    background: #11162c;
    box-shadow: 0 8px 18px rgba(16, 20, 38, .18);
}

html.csa-v2 .landing-lang-current,
html.csa-v2 .icon-btn {
    border-radius: 12px !important;
}

html.csa-v2 .landing-theme-toggle {
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 15px;
    background: rgba(255, 255, 255, .82);
    color: #242a4a;
    box-shadow: 0 16px 38px rgba(28, 33, 65, .16);
    backdrop-filter: blur(16px);
}

html.csa-v2 .hero {
    padding: 112px 0 34px;
}

html.csa-v2 .hero-grid {
    position: relative;
    isolation: isolate;
    min-height: 610px;
    padding: 66px;
    gap: 52px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 38px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(106, 111, 255, .43), transparent 29rem),
        radial-gradient(circle at 18% 82%, rgba(7, 169, 195, .21), transparent 24rem),
        linear-gradient(140deg, #0b1022 0%, #111936 54%, #0b1228 100%);
    box-shadow: 0 42px 100px rgba(20, 25, 54, .25);
}

html.csa-v2 .hero-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .33;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, #000, transparent 76%);
}

html.csa-v2 .hero-grid::after {
    content: "";
    position: absolute;
    top: -8rem;
    right: -8rem;
    z-index: -1;
    width: 28rem;
    height: 28rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 55px rgba(255, 255, 255, .025),
        0 0 0 110px rgba(255, 255, 255, .018);
}

html.csa-v2 .hero .badge {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #c8fbff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}

html.csa-v2 .hero h1 {
    max-width: 670px;
    margin-top: 18px;
    color: #fff;
    font-size: clamp(48px, 5.3vw, 78px);
    line-height: .98;
    letter-spacing: -.055em;
    text-wrap: balance;
}

html.csa-v2 .hero p {
    max-width: 650px;
    color: rgba(232, 237, 255, .72);
    font-size: 16px;
    line-height: 1.75;
}

html.csa-v2 .hero-actions {
    margin-top: 28px;
}

html.csa-v2 .hero-actions .csa-btn {
    min-height: 50px;
    padding-inline: 18px;
}

html.csa-v2 .hero-actions .csa-btn-ghost {
    border-color: rgba(255, 255, 255, .16);
    color: #f7f8ff;
    background: rgba(255, 255, 255, .07);
}

html.csa-v2 .hero-media {
    perspective: 1000px;
}

html.csa-v2 .hero-media-shell {
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 28px;
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .35);
    backdrop-filter: blur(22px);
    transform: rotateY(-3deg) rotateX(1deg);
}

html.csa-v2 .hero-media-shell img {
    border-radius: 20px;
}

html.csa-v2 .hero-command,
html.csa-v2 .hero-mini-stack span {
    border-color: rgba(255, 255, 255, .14);
    border-radius: 13px;
    color: #fff;
    background: rgba(11, 16, 34, .68);
    backdrop-filter: blur(14px);
}

html.csa-v2 .hero + .container {
    margin-top: -2px;
}

html.csa-v2 .stats {
    gap: 12px;
}

html.csa-v2 main > .container > .stats .stat {
    position: relative;
    overflow: hidden;
    min-height: 108px;
    border: 1px solid var(--csa-v2-line);
    border-radius: 19px;
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--csa-v2-shadow-sm);
    backdrop-filter: blur(12px);
}

html.csa-v2.landing-night main > .container > .stats .stat {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .05);
}

html.csa-v2 main > .container > .stats .stat strong {
    color: var(--csa-v2-brand);
    font-size: 30px;
    letter-spacing: -.04em;
}

html.csa-v2 .smart-actions {
    gap: 12px;
}

html.csa-v2 .smart-action {
    min-height: 100px;
    border: 1px solid var(--csa-v2-line);
    border-radius: 19px;
    background: rgba(255, 255, 255, .74);
    box-shadow: var(--csa-v2-shadow-sm);
    backdrop-filter: blur(12px);
}

html.csa-v2.landing-night .smart-action {
    border-color: rgba(255, 255, 255, .09);
    color: #f7f8ff;
    background: rgba(255, 255, 255, .05);
}

html.csa-v2 .smart-action > i {
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, var(--csa-v2-brand), var(--csa-v2-cyan));
}

html.csa-v2 .section-panel,
html.csa-v2 .feature-card,
html.csa-v2 .csa-free-card {
    border-color: var(--csa-v2-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--csa-v2-shadow-sm);
    backdrop-filter: blur(12px);
}

html.csa-v2.landing-night .section-panel,
html.csa-v2.landing-night .feature-card,
html.csa-v2.landing-night .csa-free-card {
    border-color: rgba(255, 255, 255, .09);
    color: #f7f8ff;
    background: rgba(255, 255, 255, .055);
}

html.csa-v2 .section-panel {
    padding: 34px;
}

html.csa-v2 .section-title {
    color: var(--landing-v2-text);
    font-size: clamp(30px, 4vw, 48px);
    letter-spacing: -.04em;
}

html.csa-v2 .section-desc,
html.csa-v2 .feature-card p,
html.csa-v2 .csa-card-body p {
    color: var(--landing-v2-muted);
}

html.csa-v2 .csa-card-media {
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

html.csa-v2 .csa-card-media img {
    transition: transform .5s var(--csa-v2-ease);
}

html.csa-v2 .csa-free-card:hover .csa-card-media img {
    transform: scale(1.045);
}

html.csa-v2 .feature-card {
    min-height: 195px;
    padding: 24px;
}

html.csa-v2 .feature-card > i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, var(--csa-v2-brand), var(--csa-v2-cyan));
    box-shadow: 0 12px 24px rgba(85, 87, 232, .20);
}

html.csa-v2 .footer {
    margin-top: 48px;
    color: #d9def2;
    background:
        radial-gradient(circle at 85% 0%, rgba(85, 87, 232, .20), transparent 28rem),
        #0c1123;
}

html.csa-v2 .search-overlay {
    background: rgba(10, 14, 30, .62);
    backdrop-filter: blur(12px);
}

html.csa-v2 .search-shell {
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 26px;
    box-shadow: var(--csa-v2-shadow-float);
}

/* -------------------------------------------------------------------------- */
/* Customer application                                                       */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-client {
    --bg: var(--csa-v2-canvas);
    --panel: var(--csa-v2-surface-solid);
    --panel-2: var(--csa-v2-surface-soft);
    --text: var(--csa-v2-ink);
    --muted: var(--csa-v2-muted);
    --line: var(--csa-v2-line);
    --brand: var(--csa-v2-brand);
    --brand-2: var(--csa-v2-cyan);
    --ink: var(--csa-v2-ink);
    position: relative;
    background:
        radial-gradient(circle at 8% 0%, rgba(7, 169, 195, .10), transparent 28rem),
        radial-gradient(circle at 90% 2%, rgba(139, 92, 246, .11), transparent 32rem),
        var(--csa-v2-canvas);
}

html.csa-v2 body.csa-client::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .26;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(49, 56, 91, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49, 56, 91, .035) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, #000, transparent 65%);
}

html.csa-v2 .client-shell {
    width: min(1380px, calc(100vw - 40px));
    padding: 18px 0 64px;
}

html.csa-v2 .client-topbar {
    top: 14px;
    gap: 12px;
    margin-bottom: 24px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .80);
    box-shadow: 0 20px 50px rgba(30, 36, 70, .10) !important;
    backdrop-filter: blur(22px) saturate(1.35);
}

html.csa-v2 .client-topbar .brand img {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 15px;
    box-shadow: 0 9px 20px rgba(48, 56, 100, .15);
}

html.csa-v2 .client-topbar .brand h1 {
    color: var(--csa-v2-ink);
    font-size: 19px;
    letter-spacing: -.025em;
}

html.csa-v2 .client-topbar .tabs {
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--csa-v2-line);
    border-radius: 15px !important;
    background: rgba(245, 247, 252, .86);
}

html.csa-v2 .client-topbar .tab {
    min-height: 42px;
    border-radius: 11px !important;
    color: #70788e;
    font-size: 13px;
}

html.csa-v2 .client-topbar .tab:hover {
    color: var(--csa-v2-ink);
    background: rgba(255, 255, 255, .78);
}

html.csa-v2 .client-topbar .tab.active {
    color: #fff;
    background: linear-gradient(135deg, #141a34, #252b53 64%, #343a70);
    box-shadow: 0 9px 20px rgba(22, 27, 55, .19);
}

html.csa-v2 .app-content {
    animation: csa-v2-view-in .38s var(--csa-v2-ease) both;
}

html.csa-v2 .client-shell .panel,
html.csa-v2 .client-shell .stat,
html.csa-v2 .client-shell .mobile-data-card,
html.csa-v2 .client-shell .store-card,
html.csa-v2 .client-shell .profile-action-card {
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .84);
    box-shadow: var(--csa-v2-shadow-sm) !important;
    backdrop-filter: blur(14px);
}

html.csa-v2 .client-shell .panel-head {
    padding: 21px 21px 0;
}

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

html.csa-v2 .client-shell .rental-dashboard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 235px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 28px !important;
    color: #fff;
    background:
        radial-gradient(circle at 84% 12%, rgba(99, 102, 241, .58), transparent 25rem),
        radial-gradient(circle at 12% 92%, rgba(7, 169, 195, .26), transparent 22rem),
        linear-gradient(135deg, #0d1227, #121a38 60%, #0d152e) !important;
    box-shadow: 0 32px 80px rgba(23, 29, 64, .24) !important;
}

html.csa-v2 .client-shell .rental-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .34;
    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: 40px 40px;
    mask-image: linear-gradient(90deg, #000, transparent 76%);
}

html.csa-v2 .client-shell .rental-dashboard .panel-kicker,
html.csa-v2 .client-shell .rental-dashboard p {
    color: rgba(226, 231, 250, .70);
}

html.csa-v2 .client-shell .rental-dashboard h2 {
    max-width: 780px;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -.045em;
}

html.csa-v2 .client-shell .rental-dashboard .btn:not(.primary) {
    border-color: rgba(255, 255, 255, .14);
    color: #f8f9ff;
    background: rgba(255, 255, 255, .08);
}

html.csa-v2 .client-shell .rental-dashboard .btn:not(.primary):hover {
    background: rgba(255, 255, 255, .14);
}

html.csa-v2 .dashboard-utility-grid {
    gap: 18px;
}

html.csa-v2 .account-line,
html.csa-v2 .money-stack > div,
html.csa-v2 .rental-metrics > div,
html.csa-v2 .mobile-card-meta > div,
html.csa-v2 .price-list > div {
    border-color: var(--csa-v2-line);
    border-radius: 14px !important;
    background: var(--csa-v2-surface-soft);
}

html.csa-v2 .card-row {
    border-color: var(--csa-v2-line);
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .86);
}

html.csa-v2 .card-row:hover {
    border-color: rgba(85, 87, 232, .23);
    box-shadow: 0 14px 30px rgba(36, 42, 81, .09);
}

html.csa-v2 .store-card,
html.csa-v2 .product-card {
    overflow: hidden;
    border-radius: 22px !important;
    transition: transform .28s var(--csa-v2-ease), box-shadow .28s ease, border-color .28s ease;
}

html.csa-v2 .store-card:hover,
html.csa-v2 .product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(85, 87, 232, .22);
    box-shadow: 0 22px 46px rgba(33, 39, 78, .13) !important;
}

html.csa-v2 .store-card img,
html.csa-v2 .product-card img,
html.csa-v2 .rental-product-media {
    border-radius: 16px !important;
}

html.csa-v2 .profile-hero,
html.csa-v2 .wallet-balance-card,
html.csa-v2 .checkout-total {
    border-radius: 20px !important;
}

html.csa-v2 .drawer-head {
    background:
        radial-gradient(circle at 90% 0%, rgba(85, 87, 232, .10), transparent 16rem),
        #fff;
}

/* -------------------------------------------------------------------------- */
/* Admin — Command Ledger                                                     */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-admin {
    --bg: #f2f4f8;
    --panel: #fff;
    --panel-2: #f7f8fb;
    --text: var(--csa-v2-ink);
    --muted: var(--csa-v2-muted);
    --line: var(--csa-v2-line);
    --brand: var(--csa-v2-brand);
    --brand-2: var(--csa-v2-cyan);
    --ink: var(--csa-v2-ink);
    background: #f2f4f8;
}

html.csa-v2 .csa-admin #appView {
    grid-template-columns: 276px minmax(0, 1fr);
}

html.csa-v2 .csa-admin .tabs {
    gap: 5px;
    padding: 104px 14px 20px;
    background:
        radial-gradient(circle at 15% 8%, rgba(7, 169, 195, .22), transparent 15rem),
        radial-gradient(circle at 90% 85%, rgba(139, 92, 246, .16), transparent 19rem),
        linear-gradient(180deg, #0a0f20 0%, #0d142a 54%, #0a1022 100%);
    box-shadow: 14px 0 44px rgba(18, 23, 50, .10);
}

html.csa-v2 .csa-admin .tabs::before {
    top: 29px;
    left: 22px;
    content: "CSA / CONTROL";
    color: #fff;
    font-size: 18px;
    letter-spacing: .04em;
}

html.csa-v2 .csa-admin .tabs::after {
    content: "OPERATIONS · 2026";
    position: absolute;
    left: 23px;
    bottom: 22px;
    color: rgba(203, 211, 235, .42);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

html.csa-v2 .csa-admin .tab {
    min-height: 45px;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 12px !important;
    color: #aeb8d2;
    font-size: 13px;
}

html.csa-v2 .csa-admin .tab:hover {
    border-color: rgba(255, 255, 255, .08);
    color: #fff;
    background: rgba(255, 255, 255, .065);
}

html.csa-v2 .csa-admin .tab.active {
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
    background: linear-gradient(135deg, rgba(85, 87, 232, .88), rgba(7, 169, 195, .72));
    box-shadow: 0 12px 28px rgba(38, 43, 108, .30);
}

html.csa-v2 .csa-admin .topbar {
    min-height: 76px;
    padding: 13px 22px;
    border-bottom: 1px solid rgba(40, 47, 78, .09);
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 8px 24px rgba(28, 33, 65, .04);
    backdrop-filter: blur(20px) saturate(1.3);
}

html.csa-v2 .csa-admin .topbar .brand img {
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(38, 45, 89, .12);
}

html.csa-v2 .csa-admin #content {
    max-height: calc(100dvh - 76px);
    padding: 22px 24px 34px;
    background:
        radial-gradient(circle at 100% 0%, rgba(139, 92, 246, .055), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(7, 169, 195, .045), transparent 28rem),
        #f2f4f8;
}

html.csa-v2 .csa-admin .admin-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 150px;
    padding: 26px 28px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 24px !important;
    color: #fff;
    background:
        radial-gradient(circle at 84% 10%, rgba(99, 102, 241, .52), transparent 22rem),
        linear-gradient(135deg, #0e142c, #151e42 62%, #111a39);
    box-shadow: 0 24px 60px rgba(28, 34, 72, .18) !important;
}

html.csa-v2 .csa-admin .admin-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .26;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg, #000, transparent 75%);
}

html.csa-v2 .csa-admin .admin-hero h2 {
    color: #fff;
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: -.04em;
}

html.csa-v2 .csa-admin .admin-hero p,
html.csa-v2 .csa-admin .admin-hero .panel-kicker {
    color: rgba(224, 229, 248, .72);
}

html.csa-v2 .csa-admin .admin-hero .btn:not(.primary) {
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

html.csa-v2 .csa-admin .panel,
html.csa-v2 .csa-admin .stat,
html.csa-v2 .csa-admin .table-wrap,
html.csa-v2 .csa-admin .admin-health-panel,
html.csa-v2 .csa-admin .admin-mobile-card,
html.csa-v2 .csa-admin .metric,
html.csa-v2 .csa-admin .content-tools,
html.csa-v2 .csa-admin .admin-plan-tools,
html.csa-v2 .csa-admin .admin-user-tools,
html.csa-v2 .csa-admin .admin-order-tools,
html.csa-v2 .csa-admin .order-admin-table-wrap,
html.csa-v2 .csa-admin .plan-admin-table-wrap,
html.csa-v2 .csa-admin .user-admin-table-wrap,
html.csa-v2 .csa-admin .content-table-wrap,
html.csa-v2 .csa-admin .ctv-admin-table-wrap,
html.csa-v2 .csa-admin .ticket-admin-table-wrap {
    border: 1px solid rgba(40, 47, 78, .10);
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 30px rgba(31, 37, 74, .055) !important;
}

html.csa-v2 .csa-admin .stats {
    gap: 12px;
}

html.csa-v2 .csa-admin .stat {
    position: relative;
    overflow: hidden;
    min-height: 102px;
    padding: 17px;
}

html.csa-v2 .csa-admin .stat::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -28px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(85, 87, 232, .07);
}

html.csa-v2 .csa-admin .stat strong {
    color: var(--csa-v2-ink);
    font-size: 24px;
    letter-spacing: -.035em;
}

html.csa-v2 .csa-admin .stat-icon {
    border-radius: 13px;
    color: var(--csa-v2-brand);
    background: rgba(85, 87, 232, .09);
}

html.csa-v2 .csa-admin .admin-health-grid {
    gap: 11px;
}

html.csa-v2 .csa-admin .admin-health-card {
    border-radius: 15px !important;
    background: #f8f9fc;
}

html.csa-v2 .csa-admin .admin-health-card.good {
    border-color: rgba(18, 132, 93, .16);
    background: #f0faf6;
}

html.csa-v2 .csa-admin .admin-health-card.warn {
    border-color: rgba(196, 108, 19, .18);
    background: #fff8ef;
}

html.csa-v2 .csa-admin th {
    border-bottom-color: var(--csa-v2-line);
    color: #5c657c;
    background: #f6f7fb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
}

html.csa-v2 .csa-admin td {
    border-bottom-color: rgba(40, 47, 78, .08);
}

html.csa-v2 .csa-admin tr:hover td {
    background: #f8f9fd;
}

html.csa-v2 .csa-admin .login-shell {
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 26px !important;
    box-shadow: var(--csa-v2-shadow-float);
}

/* -------------------------------------------------------------------------- */
/* CTV portal and standalone admin tools                                      */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-staff-portal-v2,
html.csa-v2 body.csa-admin-tool {
    min-height: 100%;
    color: var(--csa-v2-ink);
    background:
        radial-gradient(circle at 8% 0%, rgba(7, 169, 195, .10), transparent 27rem),
        radial-gradient(circle at 92% 0%, rgba(139, 92, 246, .10), transparent 30rem),
        var(--csa-v2-canvas);
}

html.csa-v2 body.csa-staff-portal-v2 .app,
html.csa-v2 body.csa-staff-portal-v2 > main,
html.csa-v2 body.csa-admin-tool .app,
html.csa-v2 body.csa-admin-tool > main {
    width: min(1420px, calc(100vw - 40px));
    max-width: 1420px;
    margin-inline: auto;
    padding-top: 20px;
}

html.csa-v2 body.csa-staff-portal-v2 .topbar,
html.csa-v2 body.csa-admin-tool .topbar {
    position: sticky;
    top: 14px;
    z-index: 40;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 22px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--csa-v2-shadow);
    backdrop-filter: blur(20px) saturate(1.3);
}

html.csa-v2 body.csa-staff-portal-v2 .brand img,
html.csa-v2 body.csa-admin-tool .brand img {
    border-radius: 14px;
    box-shadow: 0 9px 20px rgba(35, 42, 82, .13);
}

html.csa-v2 body.csa-staff-portal-v2 .tabs,
html.csa-v2 body.csa-admin-tool .tabs {
    gap: 5px;
    padding: 5px;
    border-color: var(--csa-v2-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--csa-v2-shadow-sm);
}

html.csa-v2 body.csa-staff-portal-v2 .tab,
html.csa-v2 body.csa-admin-tool .tab {
    border-radius: 11px;
    color: #6d758a;
}

html.csa-v2 body.csa-staff-portal-v2 .tab.active,
html.csa-v2 body.csa-admin-tool .tab.active {
    color: #fff;
    background: linear-gradient(135deg, #161b35, #2c3262);
    box-shadow: 0 9px 20px rgba(25, 30, 61, .18);
}

html.csa-v2 body.csa-staff-portal-v2 .panel,
html.csa-v2 body.csa-staff-portal-v2 .stat,
html.csa-v2 body.csa-admin-tool .panel,
html.csa-v2 body.csa-admin-tool .stat {
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 19px !important;
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--csa-v2-shadow-sm) !important;
    backdrop-filter: blur(12px);
}

html.csa-v2 body.csa-staff-portal-v2 .stat,
html.csa-v2 body.csa-admin-tool .stat {
    min-height: 102px;
}

html.csa-v2 body.csa-staff-portal-v2 .workspace,
html.csa-v2 body.csa-admin-tool .workspace {
    gap: 18px;
}

html.csa-v2 body.csa-staff-portal-v2 .plan-row,
html.csa-v2 body.csa-staff-portal-v2 .compact-card,
html.csa-v2 body.csa-staff-portal-v2 .check-item,
html.csa-v2 body.csa-staff-portal-v2 .detail-card,
html.csa-v2 body.csa-admin-tool .type-card,
html.csa-v2 body.csa-admin-tool .item,
html.csa-v2 body.csa-admin-tool .link-row {
    border-color: var(--csa-v2-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    transition: transform .22s var(--csa-v2-ease), border-color .22s ease, box-shadow .22s ease;
}

html.csa-v2 body.csa-staff-portal-v2 .plan-row:hover,
html.csa-v2 body.csa-admin-tool .type-card:hover,
html.csa-v2 body.csa-admin-tool .item:hover,
html.csa-v2 body.csa-admin-tool .link-row:hover {
    transform: translateY(-2px);
    border-color: rgba(85, 87, 232, .22);
    box-shadow: 0 15px 30px rgba(34, 40, 79, .09);
}

html.csa-v2 body.csa-admin-tool .editor-panel {
    top: 96px;
}

html.csa-v2 body.csa-admin-tool .link-row > .pill {
    color: var(--csa-v2-brand);
    background: rgba(85, 87, 232, .08);
}

html.csa-v2 body.csa-staff-portal-v2 .login-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(470px, calc(100vw - 28px));
    max-width: 470px;
    margin-top: 9vh;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 27px;
    background:
        radial-gradient(circle at 100% 0%, rgba(99, 102, 241, .13), transparent 17rem),
        rgba(255, 255, 255, .90);
    box-shadow: var(--csa-v2-shadow-float);
    backdrop-filter: blur(20px);
}

html.csa-v2 body.csa-staff-portal-v2 .login-shell::before {
    content: "PARTNER NETWORK";
    display: inline-flex;
    margin-bottom: 16px;
    padding: 6px 9px;
    border: 1px solid rgba(85, 87, 232, .14);
    border-radius: 999px;
    color: var(--csa-v2-brand);
    background: rgba(85, 87, 232, .07);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
}

html.csa-v2 body.csa-staff-portal-v2 .login-shell h1 {
    margin-bottom: 6px;
    font-size: 30px;
    letter-spacing: -.045em;
}

html.csa-v2 body.csa-staff-portal-v2 .login-shell p {
    margin-bottom: 22px;
}

html.csa-v2 body.csa-staff-portal-v2 .login-shell input {
    min-height: 48px;
    background: rgba(255, 255, 255, .94);
}

/* -------------------------------------------------------------------------- */
/* Apple ID delivery flows                                                    */
/* -------------------------------------------------------------------------- */

html.csa-v2 body.csa-appleid-v2 {
    min-height: 100vh;
    color: var(--csa-v2-ink);
    background:
        radial-gradient(circle at 10% 0%, rgba(7, 169, 195, .14), transparent 28rem),
        radial-gradient(circle at 90% 2%, rgba(139, 92, 246, .15), transparent 30rem),
        linear-gradient(180deg, #f7f8fc, #edf1f7);
}

html.csa-v2 body.csa-appleid-v2 .shell,
html.csa-v2 body.csa-appleid-v2 .card {
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--csa-v2-shadow-float);
    backdrop-filter: blur(18px);
}

html.csa-v2 body.csa-appleid-v2 .header,
html.csa-v2 body.csa-appleid-v2 .head {
    position: relative;
    overflow: hidden;
    border-radius: 27px 27px 0 0 !important;
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(99, 102, 241, .55), transparent 19rem),
        linear-gradient(135deg, #0d1328, #151f43);
}

html.csa-v2 body.csa-appleid-v2 .header::after,
html.csa-v2 body.csa-appleid-v2 .head::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 34px 34px;
}

html.csa-v2 body.csa-appleid-v2 .header > *,
html.csa-v2 body.csa-appleid-v2 .head > * {
    position: relative;
    z-index: 1;
}

html.csa-v2 body.csa-appleid-v2 .body {
    padding: 24px;
}

html.csa-v2 body.csa-appleid-v2 .item,
html.csa-v2 body.csa-appleid-v2 .field,
html.csa-v2 body.csa-appleid-v2 .meta,
html.csa-v2 body.csa-appleid-v2 .ib,
html.csa-v2 body.csa-appleid-v2 .note,
html.csa-v2 body.csa-appleid-v2 .guide {
    border-color: var(--csa-v2-line);
    border-radius: 17px !important;
}

html.csa-v2 body.csa-appleid-v2 .copy {
    border-radius: 11px;
    color: var(--csa-v2-brand);
    background: rgba(85, 87, 232, .08);
}

html.csa-v2 body.csa-appleid-v2 .btn {
    border-radius: 13px !important;
    background: linear-gradient(135deg, var(--csa-v2-brand), var(--csa-v2-cyan));
    box-shadow: 0 12px 26px rgba(85, 87, 232, .22);
}

html.csa-v2 body.csa-appleid-v2 .btn.secondary {
    color: var(--csa-v2-ink);
    background: #fff;
    box-shadow: none;
}

/* Specificity bridge for legacy landing/admin blocks that use !important. */
html.csa-v2 .hero {
    padding-top: 112px !important;
    padding-bottom: 34px !important;
}

html.csa-v2 .hero::before {
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.csa-v2 .hero-grid {
    width: min(1240px, calc(100vw - 40px)) !important;
    min-height: 610px !important;
    padding: 66px !important;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .9fr) !important;
    gap: 52px !important;
}

html.csa-v2 .hero-grid > div:first-child {
    max-width: 670px !important;
}

html.csa-v2 .hero h1 {
    max-width: 670px !important;
    color: #fff !important;
    font-size: clamp(48px, 5.3vw, 78px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
}

html.csa-v2 .hero p {
    max-width: 650px !important;
    color: rgba(232, 237, 255, .74) !important;
}

html.csa-v2 .hero .badge,
html.csa-v2 .hero .badge span,
html.csa-v2 .hero-mini-stack strong {
    color: #fff !important;
}

html.csa-v2 .csa-admin .admin-hero {
    border-color: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 84% 10%, rgba(99, 102, 241, .52), transparent 22rem),
        linear-gradient(135deg, #0e142c, #151e42 62%, #111a39) !important;
}

html.csa-v2 .csa-admin .admin-hero h2 {
    color: #fff !important;
}

html.csa-v2 .csa-admin .admin-hero p,
html.csa-v2 .csa-admin .admin-hero .panel-kicker {
    color: rgba(224, 229, 248, .74) !important;
}

/* -------------------------------------------------------------------------- */
/* Operations workspace: filters, density and controllable data columns       */
/* -------------------------------------------------------------------------- */

html.csa-v2 .csa-admin .csa-data-panel {
    overflow: visible;
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
}

html.csa-v2 .csa-admin .csa-data-panel > .panel-head {
    position: relative;
    z-index: 22;
    gap: 18px;
    margin-bottom: 12px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 0%, rgba(99, 102, 241, .10), transparent 18rem),
        rgba(255, 255, 255, .92);
    box-shadow: 0 15px 38px rgba(31, 37, 74, .075);
    backdrop-filter: blur(18px);
}

html.csa-v2 .csa-admin .csa-data-panel > .panel-head h2 {
    font-size: clamp(24px, 2.3vw, 32px);
    letter-spacing: -.04em;
}

html.csa-v2 .csa-admin .csa-data-panel > .panel-head p {
    max-width: 760px;
    margin-top: 5px;
    color: #687188;
}

html.csa-v2 .csa-admin .csa-data-panel > .panel-body {
    display: grid;
    gap: 12px;
    padding: 0;
}

html.csa-v2 .csa-data-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

html.csa-v2 .csa-visible-count {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 11px;
    border: 1px solid rgba(85, 87, 232, .12);
    border-radius: 999px;
    color: #555ce8;
    background: rgba(85, 87, 232, .07);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

html.csa-v2 .csa-density-toggle {
    min-height: 36px;
    padding-inline: 11px;
    gap: 6px;
    white-space: nowrap;
}

html.csa-v2 .csa-density-toggle span {
    font-size: 17px;
    line-height: 1;
}

html.csa-v2 .csa-column-picker {
    position: relative;
}

html.csa-v2 .csa-column-picker > summary {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(40, 47, 78, .13);
    border-radius: 11px;
    color: #333b53;
    background: #fff;
    font-size: 12px;
    font-weight: 850;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

html.csa-v2 .csa-column-picker > summary::-webkit-details-marker {
    display: none;
}

html.csa-v2 .csa-column-picker[open] > summary {
    border-color: rgba(85, 87, 232, .30);
    color: var(--csa-v2-brand);
    box-shadow: 0 0 0 3px rgba(85, 87, 232, .08);
}

html.csa-v2 .csa-column-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    display: grid;
    min-width: 230px;
    max-height: 360px;
    gap: 3px;
    overflow: auto;
    padding: 9px;
    border: 1px solid rgba(40, 47, 78, .12);
    border-radius: 15px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 60px rgba(26, 32, 68, .20);
    backdrop-filter: blur(18px);
}

html.csa-v2 .csa-column-menu label {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 9px;
    color: #424b62;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

html.csa-v2 .csa-column-menu label:hover {
    background: #f4f5fb;
}

html.csa-v2 .csa-column-menu input {
    width: 15px;
    height: 15px;
    accent-color: var(--csa-v2-brand);
}

html.csa-v2 .csa-filter-dock {
    position: relative;
    top: auto;
    z-index: 18;
    gap: 11px !important;
    margin: 0 !important;
    padding: 15px !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    border-radius: 18px !important;
    background: rgba(248, 249, 253, .91) !important;
    box-shadow: 0 14px 34px rgba(30, 36, 73, .09) !important;
    backdrop-filter: blur(20px) saturate(1.25);
}

html.csa-v2 .csa-admin .admin-plan-tools {
    grid-template-columns: minmax(290px, 1.7fr) minmax(170px, .7fr) minmax(150px, .6fr);
}

html.csa-v2 .csa-admin .admin-user-tools {
    grid-template-columns: minmax(280px, 1.7fr) minmax(210px, .9fr) minmax(190px, .8fr) auto auto;
}

html.csa-v2 .csa-admin .admin-order-tools {
    grid-template-columns: minmax(230px, 1.25fr) repeat(4, minmax(128px, .66fr)) auto auto;
}

html.csa-v2 .csa-filter-dock .field {
    margin: 0;
}

html.csa-v2 .csa-filter-dock .field label {
    margin-bottom: 5px;
    color: #666f86;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

html.csa-v2 .csa-filter-dock input,
html.csa-v2 .csa-filter-dock select {
    min-height: 42px;
    border-color: rgba(40, 47, 78, .12);
    background-color: rgba(255, 255, 255, .96);
}

html.csa-v2 .csa-filter-dock > .btn {
    min-height: 42px;
    align-self: end;
}

html.csa-v2 .csa-filter-presets {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
}

html.csa-v2 .csa-filter-presets::-webkit-scrollbar {
    display: none;
}

html.csa-v2 .csa-filter-presets > span {
    margin-right: 4px;
    color: #737b90;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

html.csa-v2 .csa-filter-preset {
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid rgba(40, 47, 78, .10);
    border-radius: 999px;
    color: #5b647a;
    background: rgba(255, 255, 255, .80);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: .18s ease;
}

html.csa-v2 .csa-filter-preset:hover {
    border-color: rgba(85, 87, 232, .23);
    color: var(--csa-v2-brand);
}

html.csa-v2 .csa-filter-preset.active {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #5557e8, #07a9c3);
    box-shadow: 0 8px 18px rgba(85, 87, 232, .20);
}

html.csa-v2 .csa-data-frame {
    position: relative;
    max-height: min(67vh, 760px);
    overflow: auto !important;
    border: 1px solid rgba(40, 47, 78, .10) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 13px 34px rgba(31, 37, 74, .06) !important;
    scrollbar-gutter: stable;
}

html.csa-v2 .csa-data-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

html.csa-v2 .csa-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    padding-top: 12px;
    padding-bottom: 12px;
    background: rgba(244, 246, 251, .97) !important;
    box-shadow: inset 0 -1px rgba(40, 47, 78, .10);
    backdrop-filter: blur(12px);
}

html.csa-v2 .csa-data-table tbody tr:nth-child(even) td {
    background-color: rgba(248, 249, 253, .58);
}

html.csa-v2 .csa-data-table tbody tr:hover td,
html.csa-v2 .csa-data-table tbody tr:focus-within td {
    background-color: #f3f5fb !important;
}

html.csa-v2 .csa-data-table th[hidden],
html.csa-v2 .csa-data-table td[hidden] {
    display: none !important;
}

html.csa-v2 .csa-admin .admin-pagination,
html.csa-v2 .csa-admin .content-pagination {
    justify-self: center;
    margin-top: 2px;
    padding: 7px;
    border: 1px solid rgba(40, 47, 78, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 10px 25px rgba(31, 37, 74, .05);
}

@media (min-width: 1101px) {
    html.csa-v2 .csa-data-table th:first-child,
    html.csa-v2 .csa-data-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 5;
        box-shadow: 1px 0 rgba(40, 47, 78, .08);
    }

    html.csa-v2 .csa-data-table th:first-child {
        z-index: 12;
    }

    html.csa-v2 .csa-data-table th:last-child,
    html.csa-v2 .csa-data-table td:last-child {
        position: sticky;
        right: 0;
        z-index: 5;
        box-shadow: -1px 0 rgba(40, 47, 78, .08);
    }

    html.csa-v2 .csa-data-table th:last-child {
        z-index: 12;
    }

    html.csa-v2 .csa-data-table td:first-child,
    html.csa-v2 .csa-data-table td:last-child {
        background: rgba(255, 255, 255, .98);
    }

    html.csa-v2 .csa-data-table tbody tr:nth-child(even) td:first-child,
    html.csa-v2 .csa-data-table tbody tr:nth-child(even) td:last-child {
        background: #f8f9fc;
    }
}

html.csa-v2.csa-density-compact .csa-data-table th {
    padding: 9px 10px !important;
}

html.csa-v2.csa-density-compact .csa-data-table td {
    padding: 8px 10px !important;
    font-size: 12px;
}

html.csa-v2.csa-density-compact .csa-data-table .btn {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 10px;
}

html.csa-v2.csa-density-compact .csa-data-table .plan-admin-product img {
    width: 42px;
    height: 42px;
}

html.csa-v2.csa-density-compact .csa-data-table p,
html.csa-v2.csa-density-compact .csa-data-table small {
    line-height: 1.35;
}

/* CTV changes from a long page of tabs into a task-oriented workspace. */
@media (min-width: 901px) {
    html.csa-v2 body.csa-staff-portal-v2 #portalView:not(.hidden) {
        display: grid;
        grid-template-columns: 224px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }

    html.csa-v2 body.csa-staff-portal-v2 #portalView > .topbar,
    html.csa-v2 body.csa-staff-portal-v2 #portalView > .stats {
        grid-column: 1 / -1;
    }

    html.csa-v2 body.csa-staff-portal-v2 #portalView > .tabs {
        position: sticky;
        top: 96px;
        z-index: 24;
        display: grid;
        grid-column: 1;
        grid-row: 3 / span 10;
        gap: 5px;
        padding: 9px;
        border: 1px solid rgba(255, 255, 255, .78);
        border-radius: 20px;
        background:
            radial-gradient(circle at 0 0, rgba(99, 102, 241, .10), transparent 14rem),
            rgba(255, 255, 255, .89);
        box-shadow: 0 16px 42px rgba(31, 37, 74, .08);
        backdrop-filter: blur(18px);
    }

    html.csa-v2 body.csa-staff-portal-v2 #portalView > .tabs .tab {
        min-height: 43px;
        justify-content: flex-start;
        padding: 0 13px;
        text-align: left;
    }

    html.csa-v2 body.csa-staff-portal-v2 #portalView > .tabs .tab::before {
        content: "";
        width: 7px;
        height: 7px;
        border: 2px solid currentColor;
        border-radius: 50%;
        opacity: .48;
    }

    html.csa-v2 body.csa-staff-portal-v2 #portalView > .tabs .tab.active::before {
        border-color: #fff;
        background: #fff;
        opacity: 1;
    }

    html.csa-v2 body.csa-staff-portal-v2 #portalView > .view {
        grid-column: 2;
        grid-row: 3;
        min-width: 0;
    }
}

@media (max-width: 1380px) {
    html.csa-v2 .csa-admin .admin-order-tools {
        grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(145px, 1fr));
    }

    html.csa-v2 .csa-admin .admin-order-tools > :nth-child(5) {
        grid-column: 1 / 2;
    }
}

@media (max-width: 1100px) {
    html.csa-v2 .csa-admin .admin-plan-tools,
    html.csa-v2 .csa-admin .admin-user-tools,
    html.csa-v2 .csa-admin .admin-order-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.csa-v2 .csa-admin .admin-plan-tools > .field:first-of-type,
    html.csa-v2 .csa-admin .admin-user-tools > .field:first-of-type,
    html.csa-v2 .csa-admin .admin-order-tools > .field:first-of-type {
        grid-column: 1 / -1;
    }

    html.csa-v2 .csa-admin .admin-order-tools > :nth-child(5) {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    html.csa-v2 .csa-admin .csa-data-panel > .panel-head {
        display: grid;
        gap: 13px;
        padding: 18px;
        border-radius: 18px;
    }

    html.csa-v2 .csa-data-controls {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        overflow: visible;
        flex-wrap: wrap;
    }

    html.csa-v2 .csa-data-controls > .btn:first-child {
        flex: 1 1 150px;
    }

    html.csa-v2 .csa-visible-count {
        order: 3;
    }

    html.csa-v2 .csa-filter-dock {
        position: relative;
        top: auto;
        z-index: 12;
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    html.csa-v2 .csa-filter-dock > *,
    html.csa-v2 .csa-filter-dock > .field:first-of-type {
        grid-column: 1 !important;
    }

    html.csa-v2 .csa-filter-presets {
        grid-column: 1 !important;
    }

    html.csa-v2 .csa-data-frame {
        max-height: none;
        border-radius: 15px !important;
        scrollbar-gutter: auto;
    }

    html.csa-v2 .csa-data-table thead th {
        position: static;
    }

    html.csa-v2 body.csa-staff-portal-v2 .csa-data-table td::before,
    html.csa-v2 .csa-admin .csa-data-table td::before {
        content: attr(data-csa-label) !important;
        color: #6c7488;
        font-weight: 850;
    }

    html.csa-v2 .csa-column-menu {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 78px;
        left: 12px;
        max-height: 48vh;
    }
}

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

@keyframes csa-v2-view-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
    html.csa-v2 .hero-grid {
        min-height: 0 !important;
        padding: 48px !important;
        gap: 34px !important;
    }

    html.csa-v2 .hero h1 {
        font-size: clamp(44px, 7vw, 64px);
    }

    html.csa-v2 .hero-media-shell {
        transform: none;
    }

    html.csa-v2 .csa-admin #appView {
        grid-template-columns: 244px minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    html.csa-v2 .site-header {
        top: 10px;
        width: calc(100vw - 24px);
    }

    html.csa-v2 .container {
        width: calc(100vw - 24px);
    }

    html.csa-v2 .hero {
        padding-top: 98px;
    }

    html.csa-v2 .hero-grid {
        width: calc(100vw - 24px) !important;
        padding: 38px 28px !important;
        grid-template-columns: 1fr !important;
        border-radius: 28px;
    }

    html.csa-v2 .hero h1 {
        font-size: clamp(42px, 11vw, 58px);
    }

    html.csa-v2 .hero-media {
        margin-top: 4px;
    }

    html.csa-v2 .section-panel {
        padding: 25px;
    }

    html.csa-v2 .client-shell {
        width: calc(100vw - 24px);
    }

    html.csa-v2 .csa-admin #appView {
        grid-template-columns: 1fr;
    }

    html.csa-v2 .csa-admin .tabs {
        box-shadow: 0 12px 30px rgba(18, 23, 50, .14);
    }

    html.csa-v2 .csa-admin .tabs::before,
    html.csa-v2 .csa-admin .tabs::after {
        display: none;
    }
}

@media (max-width: 700px) {
    html.csa-v2 .site-header {
        border-radius: 17px;
    }

    html.csa-v2 .nav-wrap {
        min-height: 62px;
        padding: 8px 10px 8px 13px;
    }

    html.csa-v2 .brand-logo img {
        max-width: 142px;
        max-height: 38px;
    }

    html.csa-v2 .hero-grid {
        width: calc(100vw - 20px) !important;
        padding: 32px 20px 24px !important;
        border-radius: 24px;
    }

    html.csa-v2 .hero h1 {
        font-size: clamp(39px, 13vw, 54px) !important;
        letter-spacing: -.06em;
    }

    html.csa-v2 .hero p {
        font-size: 14px !important;
        line-height: 1.65;
    }

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

    html.csa-v2 .hero-actions .csa-btn {
        width: 100%;
    }

    html.csa-v2 .hero-media-shell {
        border-radius: 20px;
    }

    html.csa-v2 .client-shell {
        width: calc(100vw - 20px);
        padding-bottom: 104px;
    }

    html.csa-v2 .client-topbar {
        top: 8px;
        padding: 10px;
        border-radius: 19px !important;
    }

    html.csa-v2 .client-topbar .brand h1 {
        font-size: 15px;
    }

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

    html.csa-v2 .client-topbar .tabs {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 80;
        display: flex;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, .76);
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .89);
        box-shadow: 0 18px 48px rgba(24, 30, 66, .20);
        backdrop-filter: blur(22px) saturate(1.3);
    }

    html.csa-v2 .client-topbar .tab {
        min-width: 70px;
        min-height: 48px;
        padding: 8px 10px;
        flex-direction: column;
        gap: 3px;
        font-size: 10px;
    }

    html.csa-v2 .client-topbar .tab i {
        font-size: 14px;
    }

    html.csa-v2 .client-shell .rental-dashboard {
        min-height: 0;
        padding: 24px 20px;
        border-radius: 22px !important;
    }

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

    html.csa-v2 .client-shell .panel,
    html.csa-v2 .client-shell .stat {
        border-radius: 17px !important;
    }

    html.csa-v2 .csa-admin #content {
        padding: 14px 12px 28px;
    }

    html.csa-v2 .csa-admin .topbar {
        min-height: 66px;
        padding: 10px 12px;
    }

    html.csa-v2 .csa-admin .tabs {
        padding: 7px;
        border-radius: 0 !important;
        background: rgba(255, 255, 255, .96);
    }

    html.csa-v2 .csa-admin .tab {
        width: auto;
        min-width: max-content;
        color: #6d758a;
    }

    html.csa-v2 .csa-admin .tab.active {
        color: #fff;
        background: linear-gradient(135deg, var(--csa-v2-brand), var(--csa-v2-cyan));
    }

    html.csa-v2 .csa-admin .admin-hero {
        padding: 22px 18px;
        border-radius: 19px !important;
    }

    html.csa-v2 body.csa-staff-portal-v2 .app,
    html.csa-v2 body.csa-staff-portal-v2 > main,
    html.csa-v2 body.csa-admin-tool .app,
    html.csa-v2 body.csa-admin-tool > main {
        width: calc(100vw - 20px);
        padding-top: 10px;
    }

    html.csa-v2 body.csa-staff-portal-v2 .topbar,
    html.csa-v2 body.csa-admin-tool .topbar {
        top: 8px;
        border-radius: 18px;
    }

    html.csa-v2 body.csa-staff-portal-v2 .tabs {
        position: sticky;
        top: 84px;
        z-index: 30;
        backdrop-filter: blur(18px);
    }

    html.csa-v2 body.csa-appleid-v2 .shell,
    html.csa-v2 body.csa-appleid-v2 .card {
        width: calc(100vw - 20px);
        border-radius: 22px !important;
    }

    html.csa-v2 body.csa-appleid-v2 .header,
    html.csa-v2 body.csa-appleid-v2 .head {
        border-radius: 21px 21px 0 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.csa-v2 {
        scroll-behavior: auto;
    }

    html.csa-v2 *,
    html.csa-v2 *::before,
    html.csa-v2 *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}