/* * CSA Customer Workspace V2 * Authenticated customer workspace layer. It only applies when the document has * and . */ /* -------------------------------------------------------------------------- */ /* Foundation */ /* -------------------------------------------------------------------------- */ html.csa-v2 body.csa-client.customer-workspace-v2 { --v4-canvas: #f6f7fb; --v4-surface: #ffffff; --v4-surface-subtle: #f8fafc; --v4-surface-muted: #f1f4f8; --v4-ink: #0f172a; --v4-ink-soft: #334155; --v4-muted: #64748b; --v4-faint: #94a3b8; --v4-line: #e2e8f0; --v4-line-strong: #cbd5e1; --v4-primary: #4f46e5; --v4-primary-hover: #4338ca; --v4-primary-soft: #eef2ff; --v4-info: #0891b2; --v4-info-soft: #ecfeff; --v4-success: #059669; --v4-success-soft: #ecfdf5; --v4-warning: #d97706; --v4-warning-soft: #fffbeb; --v4-danger: #dc2626; --v4-danger-soft: #fef2f2; --v4-blue: #2563eb; --v4-blue-soft: #eff6ff; --v4-cyan: #0891b2; --v4-cyan-soft: #ecfeff; --v4-emerald: #059669; --v4-emerald-soft: #ecfdf5; --v4-amber: #d97706; --v4-amber-soft: #fff7ed; --v4-rose: #e11d48; --v4-rose-soft: #fff1f2; --v4-violet: #7c3aed; --v4-violet-soft: #f5f3ff; --v4-teal: #0f766e; --v4-teal-soft: #f0fdfa; --v4-sidebar: #0f172a; --v4-sidebar-soft: #172033; --v4-sidebar-text: #cbd5e1; --v4-sidebar-muted: #7f8ba3; --v4-sidebar-width: 248px; --v4-topbar-height: 64px; --v4-container: 1360px; --v4-grid-gap: 20px; --v4-page-gutter: 28px; --v4-control-height: 42px; --v4-radius-control: 11px; --v4-radius-card: 15px; --v4-radius-section: 20px; --v4-shadow-xs: 0 8px 24px rgba(15, 23, 42, .055); --v4-shadow-float: 0 18px 50px rgba(15, 23, 42, .14); min-height: 100vh; margin: 0; overflow-x: hidden; overflow-x: clip; color: var(--v4-ink); background: radial-gradient(circle at 78% -12%, rgba(79, 70, 229, .075), transparent 31rem), radial-gradient(circle at 9% 36%, rgba(8, 145, 178, .045), transparent 27rem), var(--v4-canvas); 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; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-app, html.csa-v2 body.csa-client.customer-workspace-v2 .client-app * { box-sizing: border-box; } html.csa-v2 body.csa-client.customer-workspace-v2 :where( .client-app, .client-shell, .client-workspace, .app-content, .v4-dashboard, .v4-dashboard-layout, .v4-dashboard-primary, .v4-dashboard-rail, .v4-rentals, .v4-rental-card, .v4-rental-content, .v4-rental-facts, .v4-account, .v4-account-center, .v4-account-hero, .v4-account-grid, .v4-account-panels, .v4-account-main, .v4-account-rail, .v4-profile-grid, .v4-account-card, .v4-section, .v4-account-panel ) { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 :where( .v4-dashboard, .v4-dashboard-layout, .v4-rentals, .v4-account, .v4-account-center, .v4-account-card, .v4-rental-card, .v4-task-panel, .v4-notice-list, .v4-section, .v4-account-panel ) :where(h1, h2, h3, h4, p, span, strong, small, dd, dt) { overflow-wrap: anywhere; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(img, svg, video) { max-width: 100%; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(button, input, select, textarea) { font: inherit; } html.csa-v2 body.csa-client.customer-workspace-v2 button { cursor: pointer; } html.csa-v2 body.csa-client.customer-workspace-v2 button:disabled { cursor: not-allowed; } html.csa-v2 body.csa-client.customer-workspace-v2 .hidden { display: none !important; } html.csa-v2 body.csa-client.customer-workspace-v2 ::selection { color: #fff; background: rgba(79, 70, 229, .84); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid rgba(79, 70, 229, .22); outline-offset: 2px; } html.csa-v2 body.csa-client.customer-workspace-v2 .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.customer-workspace-v2 :where(button, .btn, a) > .ui-icon { width: 17px; min-width: 17px; height: 17px; flex-basis: 17px; } /* -------------------------------------------------------------------------- */ /* Type, controls and shared surfaces */ /* -------------------------------------------------------------------------- */ html.csa-v2 body.csa-client.customer-workspace-v2 :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-height: var(--v4-control-height); padding: 9px 12px; border: 1px solid var(--v4-line-strong); border-radius: var(--v4-radius-control); outline: 0; color: var(--v4-ink); background: var(--v4-surface); box-shadow: none; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 textarea { min-height: 112px; resize: vertical; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(input, textarea)::placeholder { color: var(--v4-faint); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: #b8c3d2; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { border-color: var(--v4-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, .10); } html.csa-v2 body.csa-client.customer-workspace-v2 .field { display: grid; gap: 6px; min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .field > label { color: var(--v4-ink-soft); font-size: 12px; font-weight: 600; line-height: 1.4; } html.csa-v2 body.csa-client.customer-workspace-v2 .field :where(small, .field-help) { color: var(--v4-muted); font-size: 12px; line-height: 1.5; } html.csa-v2 body.csa-client.customer-workspace-v2 .btn { display: inline-flex; min-height: var(--v4-control-height); gap: 7px; align-items: center; justify-content: center; padding: 8px 13px; border: 1px solid var(--v4-line-strong); border-radius: var(--v4-radius-control); color: var(--v4-ink-soft); background: var(--v4-surface); box-shadow: none; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: border-color .16s ease, color .16s ease, background-color .16s ease, transform .16s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .btn:hover:not(:disabled) { border-color: #aeb9c9; color: var(--v4-ink); background: var(--v4-surface-subtle); transform: translateY(-1px); } html.csa-v2 body.csa-client.customer-workspace-v2 .btn.primary { border-color: var(--v4-primary); color: #fff; background: var(--v4-primary); } html.csa-v2 body.csa-client.customer-workspace-v2 .btn.primary:hover:not(:disabled) { border-color: var(--v4-primary-hover); color: #fff; background: var(--v4-primary-hover); } html.csa-v2 body.csa-client.customer-workspace-v2 .btn.danger { border-color: #fecaca; color: var(--v4-danger); background: var(--v4-danger-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .btn:disabled, html.csa-v2 body.csa-client.customer-workspace-v2 .btn[aria-disabled="true"] { opacity: .5; transform: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .pill { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 8px; border: 1px solid var(--v4-line); border-radius: 999px; color: var(--v4-muted); background: var(--v4-surface-subtle); font-size: 11px; font-weight: 600; line-height: 1.2; } html.csa-v2 body.csa-client.customer-workspace-v2 .pill.good { border-color: #a7f3d0; color: var(--v4-success); background: var(--v4-success-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .pill.warn { border-color: #fde68a; color: var(--v4-warning); background: var(--v4-warning-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .pill.bad { border-color: #fecaca; color: var(--v4-danger); background: var(--v4-danger-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .panel, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-panel { border: 1px solid rgba(203, 213, 225, .72); border-radius: var(--v4-radius-section); background: rgba(255, 255, 255, .96); box-shadow: var(--v4-shadow-xs); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.panel-head, .v4-section-head, .v4-account-panel > header) { display: flex; min-height: 56px; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--v4-line); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.panel-head, .v4-section-head, .v4-account-panel > header) h2 { margin: 0; color: var(--v4-ink); font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.panel-head, .v4-section-head, .v4-account-panel > header) p { margin: 3px 0 0; color: var(--v4-muted); font-size: 12px; line-height: 1.45; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.panel-body, .v4-section-body, .v4-account-panel > .body) { padding: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-kicker { color: var(--v4-primary); font-size: 11px; font-weight: 700; letter-spacing: .07em; line-height: 1.4; text-transform: uppercase; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-page-title { margin: 4px 0 0; color: var(--v4-ink); font-size: clamp(24px, 2vw, 28px); font-weight: 700; letter-spacing: -.035em; line-height: 1.25; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-page-subtitle { max-width: 720px; margin: 6px 0 0; color: var(--v4-muted); font-size: 14px; line-height: 1.55; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--v4-grid-gap); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-span-4 { grid-column: span 4; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-span-5 { grid-column: span 5; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-span-7 { grid-column: span 7; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-span-8 { grid-column: span 8; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-span-12 { grid-column: 1 / -1; } /* -------------------------------------------------------------------------- */ /* Application shell */ /* -------------------------------------------------------------------------- */ html.csa-v2 body.csa-client.customer-workspace-v2 .client-shell { display: grid !important; grid-template-columns: var(--v4-sidebar-width) minmax(0, 1fr); width: 100%; min-height: 100vh; margin: 0; padding: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-shell.hidden { display: none !important; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 70; display: flex; width: var(--v4-sidebar-width); min-height: 100vh; min-height: 100dvh; flex-direction: column; padding: 16px 12px 12px; color: var(--v4-sidebar-text); background: radial-gradient(circle at 12% 2%, rgba(79, 70, 229, .19), transparent 15rem), linear-gradient(180deg, #10182a 0%, #0f172a 56%, #0b1322 100%); box-shadow: 12px 0 32px rgba(15, 23, 42, .08); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-brand { display: flex; min-height: 58px; align-items: center; padding: 2px 4px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-brand .brand { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-brand .brand img { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 11px; background: rgba(255, 255, 255, .06); object-fit: cover; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-brand .brand h1 { margin: 0; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-brand .brand p { margin: 2px 0 0; color: var(--v4-sidebar-muted); font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-account { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; align-items: center; margin: 12px 0 5px; padding: 9px; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--v4-radius-card); background: rgba(255, 255, 255, .035); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-avatar { display: grid; width: 36px; height: 36px; place-items: center; overflow: hidden; border-radius: 10px; color: #fff; background: var(--v4-primary); font-size: 13px; font-weight: 700; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-account strong { display: block; min-width: 0; color: #f8fafc; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-account span { display: flex; gap: 5px; align-items: center; margin-top: 2px; color: var(--v4-sidebar-muted); font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav { flex: 1; min-height: 0; margin-top: 6px; padding: 0 0 8px; overflow-y: auto; } html.csa-v2 body.csa-client.customer-workspace-v2 .nav-group { margin-top: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .nav-group:first-child { margin-top: 4px; } html.csa-v2 body.csa-client.customer-workspace-v2 .nav-group-label { display: block; padding: 0 9px 5px; color: #66738b; font-size: 10px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab { display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; gap: 8px; align-items: center; width: 100%; min-height: 42px; margin: 2px 0; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px; color: #98a4b8; background: transparent; font-size: 12.5px; font-weight: 500; text-align: left; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab:hover { color: #f8fafc; background: rgba(255, 255, 255, .05); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab.active { border-color: rgba(129, 140, 248, .34); color: #fff; background: linear-gradient(135deg, rgba(79, 70, 229, .31), rgba(8, 145, 178, .14)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab.active :where(i, .ui-icon) { color: #a5b4fc; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-foot { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-foot :where(.language-current, .sidebar-logout) { width: 100%; min-height: 42px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 9px; color: var(--v4-sidebar-text); background: rgba(255, 255, 255, .035); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-close, html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-scrim, html.csa-v2 body.csa-client.customer-workspace-v2 .menu-toggle { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-workspace { grid-column: 2; display: flex; width: 100%; min-height: 100vh; flex-direction: column; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-topbar { position: sticky; top: 0; z-index: 45; width: 100%; min-height: var(--v4-topbar-height); border-bottom: 1px solid rgba(203, 213, 225, .62); background: rgba(255, 255, 255, .94); box-shadow: 0 8px 26px rgba(15, 23, 42, .035); backdrop-filter: blur(14px); } html.csa-v2 body.csa-client.customer-workspace-v2 .client-topbar .topbar-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; width: min(100%, var(--v4-container)); min-height: var(--v4-topbar-height); margin: 0 auto; padding: 8px var(--v4-page-gutter); } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-heading { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-heading > span { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-heading h1 { margin: 0; color: var(--v4-ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-heading p { margin: 1px 0 0; color: var(--v4-muted); font-size: 11.5px; line-height: 1.4; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-actions { display: flex; min-width: 0; gap: 7px; align-items: center; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet { display: grid; grid-template-columns: auto auto 20px; gap: 6px; align-items: center; min-height: 42px; padding: 5px 7px 5px 10px; border: 1px solid var(--v4-line); border-radius: var(--v4-radius-control); color: var(--v4-muted); background: var(--v4-surface); font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet strong { max-width: 128px; color: var(--v4-ink); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet > :where(i, .ui-icon) { display: grid; width: 20px; min-width: 20px; height: 20px; place-items: center; border-radius: 6px; color: #fff; background: var(--v4-primary); } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-profile { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid var(--v4-line); border-radius: var(--v4-radius-control); background: var(--v4-surface); } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-profile span { display: grid; width: 28px; height: 28px; place-items: center; overflow: hidden; border-radius: 8px; color: #fff; background: var(--v4-primary); font-size: 11px; font-weight: 700; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-profile span img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-shell .app-content { width: min(100%, var(--v4-container)); max-width: var(--v4-container); min-height: calc(100dvh - var(--v4-topbar-height)); margin: 0 auto; padding: 28px var(--v4-page-gutter) 52px; } /* -------------------------------------------------------------------------- */ /* Dashboard */ /* -------------------------------------------------------------------------- */ html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard { display: grid; gap: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-bar { display: grid; grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; border: 1px solid rgba(203, 213, 225, .68); border-radius: var(--v4-radius-section); background: rgba(255, 255, 255, .86); box-shadow: 0 10px 28px rgba(15, 23, 42, .05); backdrop-filter: blur(10px); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; min-width: 0; min-height: 66px; align-items: center; padding: 9px 11px; border: 1px solid transparent; border-radius: 14px; color: var(--v4-ink-soft); background: rgba(248, 250, 252, .7); text-align: left; text-decoration: none; transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action:hover { border-color: var(--v4-line-strong); color: var(--v4-ink); background: #fff; transform: translateY(-1px); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action > :where(i, .ui-icon) { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: var(--v4-primary); background: var(--v4-primary-soft); font-size: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action > span { display: grid; min-width: 0; gap: 1px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action strong { color: currentColor; font-size: 12.5px; font-weight: 650; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action small { color: var(--v4-muted); font-size: 10.5px; font-weight: 500; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action.is-primary { border-color: #c7d2fe; color: #3730a3; background: linear-gradient(135deg, #eef2ff, #f0f9ff); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action.is-primary > :where(i, .ui-icon) { color: #fff; background: var(--v4-primary); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(292px, 320px); gap: 18px; align-items: start; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard-primary, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard-rail { display: grid; min-width: 0; gap: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard-rail { position: sticky; top: calc(var(--v4-topbar-height) + 18px); } html.csa-v2 body.csa-client.customer-workspace-v2 :where( .v4-rentals, .v4-attention-panel, .v4-notice-panel, .v4-task-panel ) { min-width: 0; overflow: hidden; border: 1px solid rgba(203, 213, 225, .72); border-radius: var(--v4-radius-section); background: rgba(255, 255, 255, .95); box-shadow: 0 10px 28px rgba(15, 23, 42, .05); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section-heading { display: flex; min-width: 0; min-height: 64px; gap: 14px; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid rgba(226, 232, 240, .82); background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .72)); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section-heading > div { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section-heading > div > span, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-kicker { display: block; color: var(--v4-primary); font-size: 9.5px; font-weight: 750; letter-spacing: .08em; line-height: 1.25; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section-heading h2, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rentals-empty h2 { margin: 2px 0 0; color: var(--v4-ink); font-size: 16px; font-weight: 700; letter-spacing: -.018em; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section-heading p, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rentals-empty p { margin: 2px 0 0; color: var(--v4-muted); font-size: 11px; line-height: 1.45; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section-heading > :where(i, .ui-icon) { display: grid; width: 32px; min-width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--v4-primary); background: var(--v4-primary-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-count-badge { display: grid; min-width: 32px; height: 28px; place-items: center; padding-inline: 9px; border: 1px solid var(--v4-line); border-radius: 999px; color: var(--v4-ink-soft); background: var(--v4-surface-subtle); font-size: 11px; font-weight: 700; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-list { display: grid; gap: 0; padding: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(130px, auto); gap: 13px; align-items: center; padding: 15px 14px; border: 0; border-radius: 0; background: transparent; transition: background-color .16s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card:hover { background: rgba(248, 250, 252, .78); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card + .v4-rental-card { border-top: 1px solid rgba(226, 232, 240, .9); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card[data-lifecycle="expired"] { background: #fcfcfd; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card[data-lifecycle="attention"], html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card[data-lifecycle="waiting-reset"] { background: linear-gradient(90deg, rgba(255, 251, 235, .72), transparent 44%); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-content { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-media { display: grid; width: 52px; height: 52px; place-items: center; overflow: hidden; border: 1px solid var(--v4-line); border-radius: 11px; background: var(--v4-surface-subtle); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-media img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-title-row { display: flex; min-width: 0; gap: 10px; align-items: flex-start; justify-content: space-between; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-title-row > div { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-title-row h3 { margin: 3px 0 0; color: var(--v4-ink); font-size: 13.5px; font-weight: 650; letter-spacing: -.012em; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-mode, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-status { display: inline-flex; min-height: 21px; gap: 5px; align-items: center; padding: 2px 7px; border: 1px solid var(--v4-line); border-radius: 999px; color: var(--v4-muted); background: var(--v4-surface-subtle); font-size: 9.5px; font-weight: 700; line-height: 1; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-mode { color: #0369a1; background: #f0f9ff; border-color: #bae6fd; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-status.is-good { color: #047857; background: var(--v4-success-soft); border-color: #a7f3d0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-status.is-warn { color: #b45309; background: var(--v4-warning-soft); border-color: #fde68a; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-status.is-bad { color: #b91c1c; background: var(--v4-danger-soft); border-color: #fecaca; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-facts { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(190px, 1.1fr); gap: 0; margin-top: 9px; overflow: visible; border: 0; border-radius: 0; background: transparent; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-facts > div { display: grid; min-width: 0; align-content: center; padding: 6px 10px 6px 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-facts > div + div { border-left: 1px solid var(--v4-line); padding-left: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-facts :where(span, small) { color: var(--v4-muted); font-size: 9.5px; font-weight: 500; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-facts strong { margin-top: 2px; color: var(--v4-ink); font-size: 11.5px; font-weight: 650; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-quota-progress { width: 100%; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--v4-surface-muted); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-quota-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--v4-primary); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-actions { display: grid; min-width: 130px; gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-actions :where(.btn, .v4-rental-disabled) { width: 100%; min-height: 36px; padding-inline: 10px; font-size: 11px; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-disabled { cursor: not-allowed; color: var(--v4-muted); background: var(--v4-surface-muted); box-shadow: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .btn.v4-rental-disabled[aria-disabled="true"] { opacity: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-primary { font-weight: 650; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-list, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-list { display: grid; margin: 0; padding: 6px; list-style: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-partial { margin: 0 10px 10px; padding: 7px 9px; border: 1px solid var(--v4-line); border-radius: 8px; color: var(--v4-muted); background: var(--v4-surface-subtle); font-size: 9.5px; line-height: 1.4; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-partial > :where(i, .ui-icon) { margin-right: 5px; color: var(--v4-info); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 9px; min-height: 54px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 9px; color: var(--v4-ink-soft); background: transparent; text-align: left; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item:hover { background: var(--v4-surface-subtle); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item > :where(i, .ui-icon):first-child { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: var(--v4-primary); background: var(--v4-primary-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item.is-warning > :where(i, .ui-icon):first-child { color: var(--v4-warning); background: var(--v4-warning-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item span { display: grid; min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item strong { color: var(--v4-ink); font-size: 13px; font-weight: 700; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item small { color: var(--v4-muted); font-size: 10.5px; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-item { display: grid; gap: 5px; min-height: 64px; padding: 10px; border-radius: 9px; outline: 0; cursor: pointer; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-item:hover, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-item:focus-visible { background: var(--v4-surface-subtle); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-item > div { display: flex; min-width: 0; gap: 8px; align-items: baseline; justify-content: space-between; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-item strong { min-width: 0; color: var(--v4-ink); font-size: 11.5px; font-weight: 650; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-item time { flex: 0 0 auto; color: var(--v4-faint); font-size: 9px; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-item p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--v4-muted); font-size: 10.5px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html.csa-v2 body.csa-client.customer-workspace-v2 :where( .v4-attention-loading, .v4-attention-empty, .v4-notice-empty ) { display: grid; min-height: 112px; place-items: center; align-content: center; gap: 5px; padding: 16px; color: var(--v4-muted); text-align: center; } html.csa-v2 body.csa-client.customer-workspace-v2 :where( .v4-attention-loading, .v4-attention-empty, .v4-notice-empty ) > :where(i, .ui-icon) { color: var(--v4-primary); font-size: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-empty.is-good > :where(i, .ui-icon) { color: var(--v4-success); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-empty strong { color: var(--v4-ink-soft); font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-empty span, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-empty span, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-loading span { font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rentals-empty { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 132px; padding: 20px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-empty-visual { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; color: var(--v4-primary); background: var(--v4-primary-soft); font-size: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-empty-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; } /* -------------------------------------------------------------------------- */ /* Account and profile */ /* -------------------------------------------------------------------------- */ html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-center { display: grid; width: 100%; max-width: var(--v4-container); gap: 16px; margin-inline: auto; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-hero { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--v4-line); border-radius: var(--v4-radius-section); background: var(--v4-surface); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-avatar, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-avatar { display: grid; width: 68px; height: 68px; place-items: center; overflow: hidden; padding: 0; border: 1px solid #c7d2fe; border-radius: 16px; color: #fff; background: var(--v4-primary); font-size: 22px; font-weight: 700; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-avatar:hover { border-color: var(--v4-primary); } html.csa-v2 body.csa-client.customer-workspace-v2 button.v4-profile-avatar { appearance: none; cursor: pointer; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-avatar img, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-identity { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-identity h1, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-identity h2 { margin: 3px 0 0; color: var(--v4-ink); font-size: 20px; font-weight: 700; letter-spacing: -.025em; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-identity p { max-width: 660px; margin: 3px 0 0; color: var(--v4-muted); font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-badges, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-status, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-hero-actions, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-card-actions { display: flex; flex-wrap: wrap; gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-telegram-actions { display: flex; min-width: 0; flex-wrap: wrap; gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-badges { margin-top: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-status.is-info { color: #0369a1; background: #f0f9ff; border-color: #bae6fd; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-status.is-muted { color: var(--v4-muted); background: var(--v4-surface-muted); border-color: var(--v4-line); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--v4-line); border-radius: 12px; background: var(--v4-surface-muted); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tabs :where(button, a) { display: inline-flex; min-width: 0; min-height: 40px; gap: 7px; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--v4-muted); background: transparent; font-size: 12.5px; font-weight: 600; text-decoration: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab:hover, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tabs :where(button, a):hover { color: var(--v4-ink); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab.is-active, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tabs :where(button, a).active, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tabs :where(button, a)[aria-selected="true"] { border-color: var(--v4-line); color: var(--v4-primary); background: var(--v4-surface); box-shadow: var(--v4-shadow-xs); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-panels { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-panel { display: none; min-width: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-panel.is-active { display: block; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-grid, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-card, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section { display: grid; min-width: 0; gap: 16px; padding: 16px; border: 1px solid var(--v4-line); border-radius: var(--v4-radius-section); background: var(--v4-surface); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-card-wide { grid-column: 1 / -1; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-card-heading { display: flex; min-width: 0; gap: 12px; align-items: center; justify-content: space-between; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-card-heading > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); min-width: 0; gap: 10px; align-items: center; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-card-heading > div > :where(i, .ui-icon) { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: var(--v4-primary); background: var(--v4-primary-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-card-heading > div > span { display: grid; min-width: 0; gap: 2px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-card-heading strong { color: var(--v4-ink); font-size: 13.5px; font-weight: 650; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-card-heading small { color: var(--v4-muted); font-size: 10.5px; font-weight: 400; line-height: 1.4; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric { display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; min-width: 0; min-height: 68px; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--v4-line); border-radius: var(--v4-radius-card); color: var(--v4-ink-soft); background: var(--v4-surface-subtle); text-align: left; } html.csa-v2 body.csa-client.customer-workspace-v2 button.v4-metric:hover { border-color: var(--v4-line-strong); background: #fff; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric > :where(i, .ui-icon):first-child { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: var(--v4-primary); background: var(--v4-primary-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric > span, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value > span { display: grid; min-width: 0; gap: 2px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric small, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value small { color: var(--v4-muted); font-size: 10px; font-weight: 500; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric strong, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value strong { color: var(--v4-ink); font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-detail-list { display: grid; margin: 0; padding: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-detail-list > div { display: flex; min-height: 40px; gap: 14px; align-items: center; justify-content: space-between; padding-block: 8px; border-bottom: 1px solid var(--v4-line); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-detail-list > div:first-child { border-top: 1px solid var(--v4-line); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-detail-list :where(dt, dd) { margin: 0; font-size: 11.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-detail-list dt { color: var(--v4-muted); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-detail-list dd { color: var(--v4-ink); font-weight: 600; text-align: right; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-shortcut { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 8px; min-width: 0; min-height: 48px; align-items: center; padding: 8px 9px; border: 1px solid var(--v4-line); border-radius: 10px; color: var(--v4-ink-soft); background: var(--v4-surface-subtle); font-size: 11.5px; font-weight: 600; text-align: left; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-shortcut:hover { border-color: var(--v4-line-strong); color: var(--v4-primary); background: #fff; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-shortcut > :where(i, .ui-icon):first-child { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--v4-primary); background: var(--v4-primary-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value { display: grid; grid-template-columns: 34px minmax(0, 1fr); min-width: 0; min-height: 66px; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--v4-line); border-radius: var(--v4-radius-card); background: var(--v4-surface-subtle); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value > :where(i, .ui-icon) { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: var(--v4-info); background: var(--v4-info-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 58px; padding: 10px 12px; border: 1px solid var(--v4-line); border-radius: var(--v4-radius-card); background: var(--v4-surface-subtle); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-setting-row > span { display: grid; min-width: 0; gap: 2px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-setting-row strong { color: var(--v4-ink); font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-setting-row small { color: var(--v4-muted); font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-setting-row input[role="switch"] { position: relative; width: 42px; min-width: 42px; height: 24px; min-height: 24px; margin: 0; padding: 0; appearance: none; border: 0; border-radius: 999px; background: var(--v4-line-strong); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-setting-row input[role="switch"]::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .18); content: ""; transition: transform .16s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-setting-row input[role="switch"]:checked { background: var(--v4-primary); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-setting-row input[role="switch"]:checked::after { transform: translateX(18px); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-inline-warning, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-inline-status { display: flex; min-height: 38px; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #fde68a; border-radius: 9px; color: #92400e; background: var(--v4-warning-soft); font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-inline-status:empty { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-inline-status { min-height: 0; border-color: #bae6fd; color: #075985; background: #f0f9ff; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-item.is-collapsed { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-list.is-expanded .v4-session-item.is-collapsed { display: grid; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-toggle { justify-self: start; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-toggle .ui-icon { transition: transform .16s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-toggle.is-expanded .ui-icon { transform: rotate(45deg); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 66px; padding: 10px; border: 1px solid var(--v4-line); border-radius: var(--v4-radius-card); background: var(--v4-surface-subtle); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-item.is-current { border-color: #c7d2fe; background: #fafaff; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-icon { display: grid; width: 38px; min-width: 38px; height: 38px; place-items: center; border-radius: 9px; color: var(--v4-info); background: var(--v4-info-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-copy { display: grid; min-width: 0; gap: 2px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-copy > div { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-copy strong { color: var(--v4-ink); font-size: 12.5px; font-weight: 650; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-copy > span, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-copy > small { color: var(--v4-muted); font-size: 10.5px; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-copy > small { overflow: hidden; color: var(--v4-faint); text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-current-session { display: inline-flex; min-height: 19px; align-items: center; padding: 2px 6px; border-radius: 999px; color: #047857; background: var(--v4-success-soft); font-size: 9px; font-weight: 700; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-empty { display: flex; min-height: 92px; gap: 8px; align-items: center; justify-content: center; color: var(--v4-muted); font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-avatar-form { display: grid; gap: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-avatar-preview { display: grid; width: 104px; height: 104px; place-items: center; overflow: hidden; margin-inline: auto; border: 1px solid #c7d2fe; border-radius: 24px; color: #fff; background: var(--v4-primary); font-size: 30px; font-weight: 700; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-avatar-preview img { display: block; width: 100%; height: 100%; object-fit: cover; } /* -------------------------------------------------------------------------- */ /* Responsive: shell at 1024, content at 768 and narrow phones at 390 */ /* -------------------------------------------------------------------------- */ @media (max-width: 1024px) { html.csa-v2 body.csa-client.customer-workspace-v2 { --v4-page-gutter: 24px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-shell { display: block !important; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-shell.hidden { display: none !important; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-sidebar { width: min(304px, calc(100vw - 32px)); transform: translateX(-105%); transition: transform .2s ease; } html.csa-v2 body.csa-client.customer-workspace-v2.menu-open .client-sidebar { transform: translateX(0); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-close { display: grid; width: 40px; height: 40px; min-height: 40px; margin-left: auto; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .10); border-radius: 9px; color: var(--v4-sidebar-text); background: rgba(255, 255, 255, .04); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-scrim { position: fixed; inset: 0; z-index: 60; display: block; border: 0; background: rgba(15, 23, 42, .46); opacity: 0; pointer-events: none; transition: opacity .2s ease; } html.csa-v2 body.csa-client.customer-workspace-v2.menu-open .sidebar-scrim { opacity: 1; pointer-events: auto; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-workspace { grid-column: auto; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-topbar .topbar-main { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .menu-toggle { display: grid; width: 44px; height: 44px; min-height: 44px; place-items: center; padding: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard-layout { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-hero { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-main { grid-column: span 7; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-rail { grid-column: span 5; } } @media (max-width: 768px) { html.csa-v2 body.csa-client.customer-workspace-v2 { --v4-page-gutter: 18px; --v4-grid-gap: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-heading p { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet { grid-template-columns: auto 20px; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet > span { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-shell .app-content { padding-top: 20px; padding-bottom: 40px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard-rail { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; align-items: start; padding: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-media { grid-column: 1; grid-row: 1; width: 48px; height: 48px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-content { grid-column: 2; grid-row: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-actions { grid-column: 2; display: flex; min-width: 0; flex-wrap: wrap; justify-content: flex-start; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-actions :where(.btn, .v4-rental-disabled) { width: auto; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-facts > div + div { border-left: 1px solid var(--v4-line); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rentals-empty { grid-template-columns: 48px minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-empty-actions { grid-column: 2; justify-content: flex-start; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-hero { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-avatar, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-avatar { width: 60px; height: 60px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-hero-actions { grid-column: 2; justify-content: flex-start; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-grid { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-card-wide { grid-column: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-main, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-rail { grid-column: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } } @media (max-width: 390px) { html.csa-v2 body.csa-client.customer-workspace-v2 { --v4-page-gutter: 12px; --v4-grid-gap: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-topbar .topbar-main { gap: 7px; padding-block: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-heading h1 { font-size: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet { gap: 4px; padding-inline: 7px 5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet strong { max-width: 78px; font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-profile { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-shell .app-content { padding-top: 16px; padding-bottom: 32px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-center { gap: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-hero { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 15px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; min-height: 54px; padding: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action > :where(i, .ui-icon) { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action strong { font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action small { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section-heading { min-height: 58px; padding: 11px 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section-heading p { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; padding: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-media { width: 42px; height: 42px; border-radius: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-title-row { display: grid; gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-status { justify-self: start; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-facts { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-facts > div + div { border-top: 1px solid var(--v4-line); border-left: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-actions :where(.btn, .v4-rental-disabled) { width: 100%; min-width: 0; white-space: normal; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-actions > :only-child { grid-column: 1 / -1; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rentals-empty { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; padding: 15px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-empty-visual { width: 44px; height: 44px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-empty-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-empty-actions .btn { width: 100%; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-avatar, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-avatar { width: 52px; height: 52px; border-radius: 13px; font-size: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-identity h2 { font-size: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-identity p { font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-hero-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-hero-actions .btn { width: 100%; min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab { min-height: 40px; padding-inline: 7px; font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-grid { gap: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-card { gap: 12px; padding: 12px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-card-heading { flex-wrap: wrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric-grid { grid-template-columns: minmax(0, 1fr); gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric { min-height: 58px; padding: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value { min-height: 62px; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; padding: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value > :where(i, .ui-icon) { width: 30px; height: 30px; border-radius: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-item { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-item > .btn { grid-column: 2; justify-self: start; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-session-copy > small { white-space: normal; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-setting-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.panel-head, .v4-section-head, .v4-account-panel > header, .v4-section > header) { padding-inline: 15px; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.panel-body, .v4-section-body, .v4-account-panel > .body, .v4-section > .body) { padding: 15px; } } @media (pointer: coarse) { html.csa-v2 body.csa-client.customer-workspace-v2 :where( button, .btn, input:not([type="checkbox"]):not([type="radio"]), select ) { min-height: 44px; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-close, html.csa-v2 body.csa-client.customer-workspace-v2 .menu-toggle, html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-profile { width: 44px; height: 44px; } } @keyframes csa-v4-enter { from { opacity: 0; transform: translateY(4px); } } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.v4-dashboard, .v4-account, .v4-account-center) > * { animation: csa-v4-enter .18s ease both; } @media (prefers-reduced-motion: reduce) { html.csa-v2 body.csa-client.customer-workspace-v2 *, html.csa-v2 body.csa-client.customer-workspace-v2 *::before, html.csa-v2 body.csa-client.customer-workspace-v2 *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- */ /* Guide center and embedded reader */ /* -------------------------------------------------------------------------- */ html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide { display: grid; gap: 18px; animation: csa-v4-enter .18s ease both; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: 28px; align-items: end; padding: 28px 30px; overflow: hidden; border: 1px solid rgba(199, 210, 254, .78); border-radius: 24px; background: linear-gradient(120deg, rgba(255, 255, 255, .98), rgba(248, 250, 255, .95)), var(--v4-surface); box-shadow: 0 16px 42px rgba(30, 41, 59, .075); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero::after { position: absolute; top: -110px; right: 7%; width: 270px; height: 270px; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(99, 102, 241, .11), transparent 68%); pointer-events: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero > * { position: relative; z-index: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero-copy h2 { max-width: 670px; margin: 6px 0 0; color: var(--v4-ink); font-size: clamp(25px, 2.5vw, 34px); font-weight: 700; letter-spacing: -.045em; line-height: 1.16; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero-copy p { max-width: 650px; margin: 9px 0 0; color: var(--v4-muted); font-size: 13.5px; line-height: 1.58; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-search { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(203, 213, 225, .82); border-radius: 16px; background: rgba(255, 255, 255, .88); box-shadow: 0 12px 28px rgba(15, 23, 42, .065); backdrop-filter: blur(12px); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-search > span { display: flex; gap: 7px; align-items: center; color: var(--v4-ink-soft); font-size: 11px; font-weight: 700; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-search > span .ui-icon { width: 15px; min-width: 15px; height: 15px; color: var(--v4-primary); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-search input { min-height: 46px; border-color: rgba(203, 213, 225, .85); border-radius: 12px; background: #fbfcff; font-size: 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-library { display: grid; gap: 20px; padding: 20px; border: 1px solid rgba(203, 213, 225, .72); border-radius: 22px; background: rgba(255, 255, 255, .88); box-shadow: 0 12px 34px rgba(15, 23, 42, .05); backdrop-filter: blur(10px); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-toolbar { display: flex; min-height: 42px; gap: 14px; align-items: center; justify-content: space-between; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-category-tabs { display: flex; min-width: 0; flex-wrap: wrap; gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-category-tabs .category-pill { min-height: 36px; padding: 7px 12px; border: 1px solid transparent; border-radius: 999px; color: var(--v4-muted); background: var(--v4-surface-muted); font-size: 11.5px; font-weight: 600; transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-category-tabs .category-pill:hover { color: var(--v4-ink); background: #e9edf4; transform: translateY(-1px); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-category-tabs .category-pill.active { color: #3730a3; background: #eef2ff; box-shadow: inset 0 0 0 1px #c7d2fe; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-count { display: inline-flex; min-height: 32px; flex: 0 0 auto; align-items: center; padding: 5px 10px; border-radius: 999px; color: var(--v4-muted); background: var(--v4-surface-muted); font-size: 11px; font-weight: 650; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-results, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-section { display: grid; gap: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-section + .v4-guide-section { padding-top: 18px; border-top: 1px solid var(--v4-line); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-section-head { display: flex; gap: 16px; align-items: end; justify-content: space-between; padding-inline: 2px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-section-head span { display: block; margin-bottom: 2px; color: var(--v4-faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-section-head h3 { margin: 0; color: var(--v4-ink); font-size: 17px; font-weight: 700; letter-spacing: -.02em; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-section-head small { color: var(--v4-muted); font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 13px; align-items: center; min-height: 108px; padding: 15px; border: 1px solid rgba(203, 213, 225, .76); border-radius: 17px; color: var(--v4-ink); background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(249, 250, 253, .94)); box-shadow: 0 7px 20px rgba(15, 23, 42, .04); text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card:hover { border-color: #b9c4d6; box-shadow: 0 14px 32px rgba(15, 23, 42, .085); transform: translateY(-2px); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: var(--v4-primary); background: linear-gradient(145deg, #eef2ff, #ecfeff); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-icon .ui-icon { width: 21px; min-width: 21px; height: 21px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-copy { display: grid; min-width: 0; gap: 4px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-copy > span { color: var(--v4-primary); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-copy > strong { color: var(--v4-ink); font-size: 14.5px; font-weight: 700; line-height: 1.38; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-copy > small { display: inline-flex; gap: 5px; align-items: center; color: var(--v4-muted); font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-copy > small .ui-icon { width: 13px; min-width: 13px; height: 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-action { display: inline-flex; gap: 8px; align-items: center; color: var(--v4-ink-soft); font-size: 11px; font-weight: 650; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-action em { font-style: normal; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-action .ui-icon { display: grid; width: 32px; min-width: 32px; height: 32px; place-items: center; padding: 8px; border-radius: 10px; color: var(--v4-primary); background: var(--v4-primary-soft); transition: transform .18s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card:hover .v4-guide-card-action .ui-icon { transform: translateX(2px); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] { grid-template-columns: minmax(0, 1fr); place-items: center; align-items: center; justify-content: center; padding: 28px; background: rgba(8, 15, 28, .52); backdrop-filter: blur(8px); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] .drawer-panel { grid-column: 1; justify-self: center; width: min(1240px, calc(100vw - 56px)); height: min(860px, calc(100dvh - 56px)); max-height: calc(100dvh - 56px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .68); border-radius: 23px; background: #f8fafc; box-shadow: 0 34px 90px rgba(8, 15, 28, .30); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] .drawer-head { min-height: 70px; padding: 13px 17px 13px 20px; border-bottom: 1px solid rgba(203, 213, 225, .72); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] .drawer-head h2 { font-size: 17px; letter-spacing: -.02em; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] .drawer-head p { margin-top: 2px; font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] .drawer-close { width: 38px; height: 38px; min-height: 38px; border-radius: 11px; background: var(--v4-surface-subtle); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] .drawer-body { display: flex; flex: 1; min-height: 0; padding: 0; overflow: hidden; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] .guide-article, html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] .v4-guide-viewer { display: flex; width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; flex-direction: column; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-toolbar { display: flex; min-height: 64px; gap: 16px; align-items: center; justify-content: space-between; padding: 10px 14px 10px 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-source { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #dbeafe; border-radius: 11px; color: var(--v4-primary); background: #eef2ff; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-source > span:last-child { display: grid; min-width: 0; gap: 1px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-source small, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-source em { color: var(--v4-muted); font-size: 10px; font-style: normal; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-source strong { overflow: hidden; color: var(--v4-ink); font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-actions { display: flex; flex: 0 0 auto; gap: 7px; align-items: center; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-load-status { display: inline-flex; gap: 6px; align-items: center; margin-right: 4px; color: var(--v4-muted); font-size: 10.5px; font-weight: 600; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-load-status.is-ready { color: var(--v4-success); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-load-status .ui-icon { width: 14px; min-width: 14px; height: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-actions .btn { min-height: 38px; padding: 7px 10px; background: #fff; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-frame-shell { position: relative; flex: 1; min-height: 0; margin: 0 14px 14px; overflow: hidden; border: 1px solid rgba(203, 213, 225, .82); border-radius: 17px; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, .08); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-frame-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--v4-muted); background: radial-gradient(circle at center, rgba(238, 242, 255, .86), transparent 20rem), #f8fafc; transition: opacity .22s ease, visibility .22s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-frame-loading > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: var(--v4-primary); background: #eef2ff; box-shadow: 0 10px 24px rgba(79, 70, 229, .12); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-frame-loading strong { font-size: 12px; font-weight: 650; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-frame-shell.is-ready .v4-guide-frame-loading { opacity: 0; visibility: hidden; pointer-events: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer > .guide-article-body { margin: 0 14px 14px; padding: 14px; border: 1px solid var(--v4-line); border-radius: 14px; background: #fff; } @media (max-width: 1280px) { html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard-layout { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-dashboard-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-search { width: 100%; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-load-status { display: none; } } @media (max-width: 768px) { html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide { gap: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero { padding: 20px; border-radius: 19px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero-copy h2 { font-size: 25px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-library { gap: 16px; padding: 15px; border-radius: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-toolbar { align-items: flex-start; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-list { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] { align-items: stretch; padding: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="guide"] .drawer-panel { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-toolbar { min-height: 58px; gap: 10px; padding: 8px 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-actions .btn { width: 38px; min-width: 38px; padding: 0; font-size: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-actions .btn .ui-icon { width: 16px; min-width: 16px; height: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-frame-shell { margin: 0 8px 8px; border-radius: 13px; } } @media (max-width: 390px) { html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero { gap: 16px; padding: 17px; border-radius: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero-copy h2 { font-size: 22px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-search { padding: 9px; border-radius: 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-library { padding: 12px; border-radius: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-count { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card { grid-template-columns: 42px minmax(0, 1fr) 32px; gap: 10px; min-height: 96px; padding: 12px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-icon { width: 42px; height: 42px; border-radius: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-action em { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-source { grid-template-columns: 34px minmax(0, 1fr); gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-icon { width: 34px; height: 34px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-viewer-source em { display: none; } } /* Icon sizing, semantic states and stable functional accents. */ html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet > .ui-icon { padding: 5px; background: linear-gradient(145deg, #10b981, #059669); box-shadow: 0 4px 11px rgba(5, 150, 105, .24); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="dashboard"] { --nav-strong: #2563eb; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="plans"] { --nav-strong: #0891b2; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="topup"] { --nav-strong: #047857; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="orders"] { --nav-strong: #b45309; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="guide"] { --nav-strong: #0369a1; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="tickets"] { --nav-strong: #be123c; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="commission"] { --nav-strong: #7e22ce; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="profile"] { --nav-strong: #0f766e; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab.active > .ui-icon:first-child { color: #fff; background: var(--nav-strong, #334155); box-shadow: 0 5px 14px color-mix(in srgb, var(--nav-strong, #334155) 28%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action > .ui-icon { padding: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-section-heading > .ui-icon, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item > .ui-icon:first-child { padding: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-card-heading > div > .ui-icon { padding: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 :where( .v4-metric, .v4-profile-shortcut, .v4-finance-value ) > .ui-icon:first-child { padding: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-mode > .ui-icon, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-status > .ui-icon { width: 12px; min-width: 12px; height: 12px; flex: 0 0 12px; } /* 2026-07-31: compact customer flow, one package-details gate, responsive 4-up catalog. */ html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty { min-height: 214px; grid-template-areas: "visual copy" "visual steps" "visual action"; gap: 10px 18px; padding: 24px 26px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-visual { width: 62px; height: 62px; border-radius: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-visual .ui-icon { width: 26px; height: 26px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-copy h2 { margin-block: 4px 5px; font-size: clamp(20px, 1.65vw, 25px); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-copy p { max-width: 620px; font-size: 12px; line-height: 1.5; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-steps span { padding: 5px 8px; border-radius: 8px; font-size: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-cta { grid-area: action; width: fit-content; min-height: 36px; padding: 8px 13px; font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3[data-plan-count="1"] { grid-template-columns: minmax(0, 410px); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3[data-plan-count="2"] { grid-template-columns: repeat(2, minmax(0, 410px)); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3[data-plan-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card.plan-tile-v3 { min-width: 0; min-height: 278px; overflow: hidden; border-radius: 16px; cursor: pointer; transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .18s ease, box-shadow .18s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card.plan-tile-v3:focus-visible { outline: 3px solid color-mix(in srgb, var(--plan-accent, #2563eb) 30%, transparent); outline-offset: 3px; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card.plan-tile-v3 > .body { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 9px; padding: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-head-v3 { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-head-v3 .media-button { width: 52px; min-width: 52px; height: 52px; padding: 5px; border-radius: 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-head-v3 .media-button img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-title-v3 { display: grid; min-width: 0; gap: 5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-badges-v3 { display: flex; min-width: 0; gap: 5px; align-items: center; flex-wrap: wrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-v3 :where(.mode-badge, .category-badge) { min-height: 22px; padding: 3px 7px; border-radius: 7px; font-size: 9.5px; line-height: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-title-v3 h3 { display: -webkit-box; min-height: 37px; margin: 0; overflow: hidden; color: #121b2e; font-size: 14px; font-weight: 780; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-summary-v3 { display: -webkit-box; min-height: 33px; margin: 0; overflow: hidden; color: #68768b; font-size: 10.5px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-specs-v3:not(.plan-detail-specs-v3) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-v3 .plan-specs-v3 > div { min-width: 0; min-height: 57px; padding: 8px 9px; border-radius: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-v3 .plan-specs-v3 dt { font-size: 8.5px; line-height: 1.2; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-v3 .plan-specs-v3 dd { margin-top: 3px; overflow: hidden; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-v3 .plan-specs-v3 small { display: -webkit-box; margin-top: 2px; overflow: hidden; font-size: 8.5px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-card-footer.plan-tile-footer-v3 { display: flex; min-width: 0; gap: 8px; align-items: end; justify-content: space-between; margin-top: auto; padding-top: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-footer-v3 .plan-from-price { display: grid; min-width: 0; gap: 1px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-footer-v3 .plan-from-price span { font-size: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-footer-v3 .plan-from-price strong { overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-footer-v3 .btn { min-height: 36px; flex: 0 0 auto; padding: 8px 10px; border-radius: 10px; font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card[data-quota="daily"] { --plan-accent: #5b5ce8; --plan-soft: #f0efff; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card[data-quota="total"] { --plan-accent: #0891b2; --plan-soft: #ecfeff; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card[data-quota="manual"] { --plan-accent: #e58a18; --plan-soft: #fff7e7; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .drawer-panel { width: min(620px, calc(100vw - 32px)); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .drawer-body { padding: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-form-v3 { display: grid; gap: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-selection-v4 { display: grid; gap: 7px; padding: 9px; border: 1px solid #dde3ee; border-radius: 14px; background: linear-gradient(145deg, #fff 0%, #f8f9ff 100%); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-selection-v4 .checkout-plan { padding: 0 0 8px; border: 0; border-bottom: 1px solid #e4e8f1; border-radius: 0; background: transparent; box-shadow: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-selection-v4 :where(.checkout-specs-v3, .period-picker-v3, .checkout-total) { margin: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .checkout-back-v4 { width: fit-content; min-height: 34px; padding: 7px 10px; color: #4c5c74; font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-plan { gap: 10px; padding: 10px; border-radius: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-plan-image { width: 54px; min-width: 54px; height: 54px; padding: 4px; border-radius: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-plan h3 { margin-block: 2px 4px; font-size: 14px; line-height: 1.3; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-steps-v3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-steps-v3 span { min-width: 0; min-height: 34px; gap: 5px; padding: 5px 7px; border-radius: 8px; font-size: 9px; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-steps-v3 b { width: 20px; min-width: 20px; height: 20px; font-size: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-specs-v3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-specs-v3 > div { min-width: 0; padding: 9px 10px; border-radius: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] :where(.rent-period-note, .checkout-note) { padding: 9px 10px; border-radius: 9px; font-size: 10px; line-height: 1.45; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .period-picker-v3 { padding: 9px; border-radius: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .period-options-v3 { gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .period-option-v3 > span, html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .period-option-v3 > strong { padding-block: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-total { min-height: 58px; padding: 9px 12px; border-radius: 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-total > strong { font-size: 20px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-extras-v3 summary { min-height: 36px; padding: 8px 10px; font-size: 10px; } /* Compact package detail: information stays available without pushing the rent action below the fold. */ html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .drawer-panel { width: min(680px, calc(100vw - 24px)); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .drawer-body { padding: 12px; overscroll-behavior: contain; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-v3 { gap: 8px; padding-bottom: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-summary-v3 { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-summary-v3 :where(.preview-image-button, img) { width: 72px; height: 72px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-summary-v3 h3 { display: -webkit-box; margin: 5px 0 3px; overflow: hidden; font-size: 15px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-summary-v3 p { display: -webkit-box; margin: 0; overflow: hidden; color: #6a788d; font-size: 10.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-specs-v3 { gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-specs-v3 > div { min-height: 68px; padding: 8px 9px; border-radius: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-specs-v3 dt { font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-specs-v3 dd { margin-top: 3px; font-size: 11.5px; line-height: 1.3; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-specs-v3 small { display: -webkit-box; margin-top: 2px; overflow: hidden; font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-pricing-v3 { display: grid; gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-rent-v4 { display: grid; gap: 8px; min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-pricing-v4 { padding: 9px; border: 1px solid #dfe4ef; border-radius: 12px; background: linear-gradient(145deg, #fff 0%, #f7f9ff 100%); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-picker-v4 { min-width: 0; margin: 0; padding: 0; border: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-picker-v4 > legend { margin-bottom: 6px; padding: 0; color: #2b3548; font-size: 10px; font-weight: 780; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-periods-v4 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-periods-v4 .period-option-v3 { min-height: 46px; padding: 7px 9px; border-radius: 9px; box-shadow: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-periods-v4 .period-option-v3:hover { transform: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-periods-v4 .period-option-v3 span { font-size: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-periods-v4 .period-option-v3 strong { font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-codes-v4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-codes-v4 .field { gap: 4px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-codes-v4 label { font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-codes-v4 input { min-height: 36px; padding: 7px 9px; border-radius: 9px; font-size: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-total-v4 { min-height: 48px; padding: 7px 10px; border-radius: 10px; box-shadow: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-total-v4 > div { display: grid; gap: 1px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-total-v4 :where(span, small) { color: #71809a; font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-total-v4 > strong { color: #3157bf; font-size: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-code-disclosure-v4 { overflow: hidden; border-radius: 10px; background: #fff; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-code-disclosure-v4 > summary { display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; gap: 7px; align-items: center; min-height: 40px; padding: 8px 10px; list-style: none; color: #56647a; font-size: 9.5px; font-weight: 750; cursor: pointer; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-code-disclosure-v4 > summary::-webkit-details-marker { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-code-disclosure-v4 > summary > .ui-icon { width: 14px; min-width: 14px; height: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-code-disclosure-v4 > summary > .ui-icon:last-child { transition: transform .2s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-code-disclosure-v4[open] > summary > .ui-icon:last-child { transform: rotate(180deg); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-pricing-v3 > h3 { margin: 0; font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-price-list { gap: 5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-price-list > div { min-height: 38px; padding: 7px 10px; border-radius: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-disclosure-v4 { padding: 0 !important; overflow: clip; border-radius: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-disclosure-v4 > summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 56px; padding: 8px 10px; list-style: none; cursor: pointer; user-select: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-disclosure-v4 > summary::-webkit-details-marker { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-disclosure-v4 > summary:focus-visible { outline: 3px solid rgba(79, 96, 238, .16); outline-offset: -3px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-icon-v4 { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #4f5feb; background: #eef0ff; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-label-v4 { display: grid; min-width: 0; gap: 2px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-label-v4 strong { color: #172137; font-size: 11.5px; line-height: 1.3; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-label-v4 small { overflow: hidden; color: #6b788d; font-size: 9.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-toggle-v4 { display: inline-flex; gap: 6px; align-items: center; min-height: 30px; padding: 6px 8px; border: 1px solid #dce2ef; border-radius: 9px; color: #4d5b72; font-size: 9.5px; font-weight: 750; background: #fff; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-toggle-v4 .ui-icon { width: 12px; min-width: 12px; height: 12px; transition: transform .2s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-close-v4, html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-disclosure-v4[open] .plan-info-open-v4 { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-disclosure-v4[open] .plan-info-close-v4 { display: inline; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-disclosure-v4[open] .plan-info-toggle-v4 .ui-icon { transform: rotate(180deg); } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-panel-v4 { padding: 0 10px 10px; border-top: 1px solid #e8ebf2; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-panel-v4 .plan-detail-desc { padding-top: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-actions-v3 { position: sticky; z-index: 5; bottom: -12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; margin: 0 -12px -12px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #e3e7f0; background: rgba(255, 255, 255, .96); box-shadow: 0 -10px 24px rgba(31, 45, 86, .10); backdrop-filter: blur(14px); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-actions-v3 .btn { min-height: 40px; padding: 9px 12px; border-radius: 10px; font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-rent-cta { width: 100%; } @media (hover: hover) and (pointer: fine) { html.csa-v2 body.csa-client.customer-workspace-v2 .store-card.plan-tile-v3:hover { transform: translateY(-3px); } } @media (max-width: 1180px) { html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3[data-plan-count="1"] { grid-template-columns: minmax(0, 410px); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3[data-plan-count="2"] { grid-template-columns: repeat(2, minmax(0, 410px)); } } @media (max-width: 900px) { html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3, html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3[data-plan-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3[data-plan-count="1"] { grid-template-columns: minmax(0, 410px); } } @media (max-width: 720px) { html.csa-v2 body.csa-client.customer-workspace-v2 .store-header-v3 { gap: 11px; padding: 16px; border-radius: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-header-v3 h1, html.csa-v2 body.csa-client.customer-workspace-v2 .store-header-v3 h2 { margin-block: 5px 3px; font-size: 23px; line-height: 1.15; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-header-v3 > div:first-child > p { font-size: 10.5px; line-height: 1.45; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-header-v3 .store-search { gap: 5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-header-v3 .store-search label { font-size: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-header-v3 .store-search input { min-height: 42px; padding: 9px 12px; font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .catalog-category-row-v3 { min-height: 0; padding: 10px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .catalog-category-row-v3 > span, html.csa-v2 body.csa-client.customer-workspace-v2 .catalog-category-row-v3 > label { display: block; margin-bottom: 7px; font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .catalog-category-row-v3 .category-list { display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1px; scroll-snap-type: x proximity; scrollbar-width: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .catalog-category-row-v3 .category-list::-webkit-scrollbar { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .catalog-category-row-v3 .category-pill { min-height: 34px; flex: 0 0 auto; padding: 6px 9px; border-radius: 9px; scroll-snap-align: start; font-size: 10px; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .catalog-category-row-v3 .category-pill > .category-icon { width: 18px; min-width: 18px; height: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-toolbar-v3 { min-height: 34px; padding-block: 5px; font-size: 9.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty { min-height: 0; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "visual copy" "steps steps" "action action"; gap: 9px 11px; padding: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-visual { width: 46px; height: 46px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-visual .ui-icon { width: 20px; height: 20px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-copy h2 { margin-top: 2px; font-size: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-copy p { display: -webkit-box; overflow: hidden; font-size: 10.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-steps { grid-column: auto; flex-wrap: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-steps span { min-width: 0; flex: 1 1 0; padding-inline: 5px; font-size: 9px; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-cta { width: 100%; justify-content: center; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3, html.csa-v2 body.csa-client.customer-workspace-v2 .store-grid.store-grid-v3[data-plan-count] { grid-template-columns: minmax(0, 1fr); gap: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card.plan-tile-v3 { min-height: 224px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card.plan-tile-v3 > .body { gap: 7px; padding: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-head-v3 { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-head-v3 .media-button { width: 46px; min-width: 46px; height: 46px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-title-v3 h3 { min-height: 32px; font-size: 13px; line-height: 1.25; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-summary-v3 { min-height: 0; font-size: 9.5px; -webkit-line-clamp: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-v3 .plan-specs-v3 > div { min-height: 49px; padding: 7px 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-tile-footer-v3 .btn { min-height: 34px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] { align-items: end; padding: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .drawer-panel { width: 100%; max-width: none; max-height: 100dvh; border-radius: 18px 18px 0 0 !important; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .drawer-head { min-height: 56px; padding: 9px 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .drawer-head h2 { font-size: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .drawer-head p { font-size: 9.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .drawer-close { width: 38px; height: 38px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .drawer-body { padding: 9px 10px max(9px, env(safe-area-inset-bottom)); overscroll-behavior: contain; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-form-v3 { gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-back-v4 { min-height: 30px; padding: 5px 8px; font-size: 9.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-plan { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; padding: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-plan-image { width: 46px; min-width: 46px; height: 46px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-plan > div > span:first-child { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-plan h3 { display: -webkit-box; margin: 0 0 3px; overflow: hidden; font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-steps-v3 span { min-height: 30px; padding: 4px 5px; font-size: 8.5px; overflow: hidden; text-overflow: ellipsis; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-steps-v3 b { width: 18px; min-width: 18px; height: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-specs-v3 > div { padding: 7px 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-specs-v3 span { font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-specs-v3 strong { font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-specs-v3 small { display: -webkit-box; overflow: hidden; font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .period-picker-v3 { padding: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-total { min-height: 50px; padding: 7px 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-total > strong { font-size: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-note { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-form-v3 > .btn.primary[type="submit"] { position: sticky; z-index: 5; bottom: 0; min-height: 43px; margin-top: 0; box-shadow: 0 -8px 22px rgba(44, 64, 154, .14), 0 8px 18px rgba(70, 85, 221, .20); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"], html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] { align-items: center; padding: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .drawer-panel, html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .drawer-panel { width: min(100%, 680px); max-width: 100%; height: auto; max-height: calc(100dvh - 16px); border-radius: 18px !important; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .drawer-head { min-height: 56px; padding: 9px 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .drawer-body { padding: 9px 10px max(9px, env(safe-area-inset-bottom)); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-selection-v4 { gap: 6px; padding: 7px; border-radius: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-selection-v4 .checkout-plan { padding-bottom: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-v3 { gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-rent-v4 { gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-pricing-v4 { gap: 6px; padding: 7px; border-radius: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-periods-v4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-periods-v4 .period-option-v3 { min-height: 42px; padding: 6px 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-codes-v4 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-codes-v4 input { min-height: 34px; padding: 6px 8px; font-size: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-total-v4 { min-height: 44px; padding: 6px 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-inline-total-v4 > strong { font-size: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-summary-v3 { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; padding: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-summary-v3 :where(.preview-image-button, img) { width: 54px; height: 54px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-summary-v3 h3 { margin-top: 3px; font-size: 12.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-summary-v3 p { font-size: 9px; -webkit-line-clamp: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-specs-v3 > div { min-height: 58px; padding: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-specs-v3 dt { font-size: 7.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-specs-v3 dd { font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-specs-v3 small { font-size: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-disclosure-v4 > summary { grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 50px; padding: 7px 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-icon-v4 { width: 30px; height: 30px; border-radius: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-label-v4 strong { font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-label-v4 small { font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .plan-info-toggle-v4 { min-height: 28px; padding: 5px 7px; font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-actions-v3 { bottom: -9px; margin: 0 -10px -9px; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="plan-detail"] .plan-detail-actions-v3 .btn { min-height: 38px; padding: 8px 9px; font-size: 9.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-card.client-order-row-v3 { gap: 8px; padding: 11px; border-radius: 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-main { gap: 8px; align-items: start; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-title strong { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-title span { display: block; margin-top: 3px; overflow: hidden; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line > span { min-width: 0; padding: 7px 8px; border: 1px solid #e1e7f1; border-radius: 9px; background: #f8fafc; font-size: 9px; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line > span:nth-child(n + 3) { grid-column: 1 / -1; padding-block: 5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .order-context-v3 { margin: 0; font-size: 9.5px; line-height: 1.4; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions .btn { min-height: 34px; padding: 7px 8px; font-size: 9.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .support-finance-note { gap: 8px; padding: 9px 10px; border-radius: 11px; font-size: 10px; } } @media (max-width: 360px) { html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-steps span { gap: 3px; font-size: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-steps-v3 span { justify-content: center; font-size: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="checkout"] .checkout-steps-v3 b { font-size: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- */ /* Customer workspace V2 — live dashboard, navigation and responsive bridge */ /* -------------------------------------------------------------------------- */ html.csa-v2 body.csa-client.customer-workspace-v2 { --customer-deep: #081326; --customer-navy: #0d1b35; --customer-indigo: #5b55ef; --customer-blue: #3974e8; --customer-cyan: #10a9c4; --customer-emerald: #0aa77b; --customer-amber: #e9a32b; --customer-rose: #e45d77; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-shell.customer-workspace-v2 { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-avatar, html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-profile > span, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-avatar { overflow: hidden; padding: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.sidebar-avatar, .workspace-profile > span, .v4-profile-avatar) img { width: 100%; height: 100%; display: block; object-fit: cover; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab .ui-icon { width: 34px; min-width: 34px; height: 34px; padding: 8px; border-radius: 10px; color: #91a3bd; background: rgba(148, 163, 184, .08); transition: color .18s ease, background .18s ease, transform .18s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .nav-group:nth-child(1) .tab:nth-of-type(1) .ui-icon { color: #77b7ff; background: rgba(59, 130, 246, .14); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .nav-group:nth-child(1) .tab:nth-of-type(2) .ui-icon { color: #8d80ff; background: rgba(124, 92, 255, .14); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .nav-group:nth-child(2) .tab:nth-of-type(1) .ui-icon { color: #38d6d1; background: rgba(20, 184, 166, .14); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .nav-group:nth-child(2) .tab:nth-of-type(2) .ui-icon { color: #f8c86b; background: rgba(245, 158, 11, .14); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .nav-group:nth-child(3) .tab:nth-of-type(1) .ui-icon { color: #63d5a7; background: rgba(16, 185, 129, .14); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .nav-group:nth-child(3) .tab:nth-of-type(2) .ui-icon { color: #72a7ff; background: rgba(96, 165, 250, .14); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .nav-group:nth-child(4) .tab:nth-of-type(1) .ui-icon { color: #f09caf; background: rgba(244, 114, 182, .13); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .nav-group:nth-child(4) .tab:nth-of-type(2) .ui-icon { color: #a5a8ff; background: rgba(129, 140, 248, .14); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab.active .ui-icon { color: #fff; background: linear-gradient(145deg, #635bff, #18afc9); box-shadow: 0 8px 20px rgba(53, 101, 222, .24); transform: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-mobile-dock { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-dashboard-v2 { display: grid; min-width: 0; gap: 20px; animation: customerPageIn .36s cubic-bezier(.2, .8, .2, 1) both; } @keyframes customerPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-bar { display: grid; grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(180px, 1fr)); gap: 10px; padding: 12px; border: 1px solid rgba(130, 155, 210, .24); border-radius: 20px; background: radial-gradient(circle at 18% 0%, rgba(29, 184, 205, .19), transparent 31%), radial-gradient(circle at 88% 100%, rgba(104, 79, 234, .20), transparent 37%), linear-gradient(135deg, #0b1b32 0%, #101d3c 58%, #171c43 100%); box-shadow: 0 20px 45px rgba(18, 30, 62, .16); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action { position: relative; display: flex; min-width: 0; min-height: 76px; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid rgba(202, 215, 244, .16); border-radius: 14px; color: #dce7fa; background: rgba(255, 255, 255, .055); text-align: left; text-decoration: none; box-shadow: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action:hover { border-color: rgba(135, 180, 244, .32); background: rgba(255, 255, 255, .09); transform: translateY(-2px); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action > .ui-icon { width: 42px; min-width: 42px; height: 42px; padding: 11px; border-radius: 13px; color: #72d8ed; background: rgba(21, 174, 198, .16); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action:nth-child(3) > .ui-icon { color: #f4c35d; background: rgba(234, 165, 45, .15); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action:nth-child(4) > .ui-icon { color: #78dcb8; background: rgba(22, 186, 131, .14); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action.is-primary { border-color: rgba(118, 159, 255, .36); color: #fff; background: linear-gradient(135deg, rgba(91, 85, 239, .92), rgba(27, 164, 205, .89)); box-shadow: 0 12px 30px rgba(65, 86, 225, .25); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action.is-primary > .ui-icon { color: #fff; background: rgba(255, 255, 255, .16); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action span { display: grid; min-width: 0; gap: 3px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action strong { overflow: hidden; color: inherit; font-size: 13px; font-weight: 750; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action small { overflow: hidden; color: #9fb0ca; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action.is-primary small { color: rgba(255, 255, 255, .76); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); gap: 20px; align-items: start; min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.customer-dashboard-primary, .customer-dashboard-rail) { display: grid; min-width: 0; gap: 20px; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.customer-rentals, .customer-attention-panel, .customer-notice-panel) { min-width: 0; border: 1px solid #dce4ef; border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 38px rgba(27, 42, 74, .07); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-section-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 22px 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-section-heading > div { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-section-heading span, html.csa-v2 body.csa-client.customer-workspace-v2 .customer-kicker { color: #5c5ae9; font-size: 10px; font-weight: 800; letter-spacing: .105em; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-section-heading h2 { margin: 3px 0 0; color: #111b30; font-size: 20px; line-height: 1.25; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-section-heading p { margin: 4px 0 0; color: #718096; font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-section-heading > b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #5b55ef; background: #f0efff; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-section-heading > b .ui-icon { width: 17px; height: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-count-badge { display: grid; min-width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #4c49d5; background: #efefff; font-size: 15px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty { min-height: 310px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "visual copy" "visual steps"; gap: 14px 20px; align-content: center; padding: 34px; background: radial-gradient(circle at 92% 10%, rgba(95, 85, 239, .10), transparent 28%), radial-gradient(circle at 5% 92%, rgba(16, 169, 196, .08), transparent 30%), #fff; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-visual { grid-area: visual; display: grid; width: 74px; height: 74px; place-items: center; align-self: center; border: 1px solid #d8e3f3; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #625aef, #12aec5); box-shadow: 0 16px 32px rgba(72, 92, 221, .22); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-visual .ui-icon { width: 30px; height: 30px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-copy { grid-area: copy; align-self: end; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-copy h2 { margin: 5px 0 7px; color: #111a2f; font-size: clamp(22px, 2vw, 30px); line-height: 1.14; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-copy p { max-width: 680px; margin: 0; color: #66758c; font-size: 13px; line-height: 1.65; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-steps { grid-area: steps; display: flex; gap: 8px; align-self: start; flex-wrap: wrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-steps span { display: inline-flex; gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid #e0e7f2; border-radius: 10px; color: #5d6b82; background: #f8fafd; font-size: 11px; font-weight: 650; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-steps b { color: #5b55ef; font-size: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-list { display: grid; gap: 0; padding: 0 12px 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 10px; border-top: 1px solid #e5ebf4; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-card:first-child { border-top: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-media { width: 58px; height: 58px; overflow: hidden; padding: 5px; border: 1px solid #e1e7f0; border-radius: 16px; background: #f8fafc; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-content { display: grid; min-width: 0; gap: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-title { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-title h3 { margin: 4px 0 0; overflow: hidden; color: #182238; font-size: 14px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-mode { display: inline-flex; gap: 5px; align-items: center; color: #087f93; font-size: 10px; font-weight: 750; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-mode .ui-icon { width: 12px; min-width: 12px; height: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-facts > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid #e1e7f1; border-radius: 10px; background: #f8fafc; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-facts span { color: #8793a6; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-facts strong { color: #182238; font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-facts small { color: #6f7d92; font-size: 10px; line-height: 1.45; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-quota-progress { height: 3px; overflow: hidden; border-radius: 99px; background: #e9edf5; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-quota-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5e58ef, #14acc5); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-actions { display: grid; min-width: 150px; gap: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-actions .btn { width: 100%; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-disabled { color: #8a96a8; background: #f3f5f8; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-list { display: grid; gap: 8px; padding: 0 14px 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-item, html.csa-v2 body.csa-client.customer-workspace-v2 .customer-referral-note { display: flex; width: 100%; gap: 11px; align-items: center; padding: 11px; border: 1px solid #e1e7ef; border-radius: 12px; color: #2d3a50; background: #fafbfd; text-align: left; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-item > .ui-icon { width: 36px; min-width: 36px; height: 36px; padding: 10px; border-radius: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-item.tone-amber > .ui-icon { color: #b9780f; background: #fff3d9; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-item.tone-blue > .ui-icon { color: #376bd7; background: #eaf1ff; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-item.tone-rose > .ui-icon { color: #c64d69; background: #fff0f3; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-item span { display: grid; gap: 1px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-item strong { color: #172238; font-size: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-item small { color: #718095; font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-clear { display: flex; gap: 11px; align-items: center; padding: 13px; border-radius: 12px; color: #147a60; background: #effaf6; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-clear > .ui-icon { width: 30px; min-width: 30px; height: 30px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-clear div { display: grid; gap: 2px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-clear strong { font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-attention-clear span { color: #5c8578; font-size: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-referral-note { margin: 0 14px 14px; width: calc(100% - 28px); color: #6656c9; background: #f5f3ff; font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-referral-note .ui-icon { color: #735ee0; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-notice-list { display: grid; gap: 0; padding: 0 14px 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-notice-item { padding: 11px 2px; border-top: 1px solid #e7ecf3; cursor: pointer; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-notice-item:first-child { border-top: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-notice-item > div { display: flex; gap: 10px; align-items: start; justify-content: space-between; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-notice-item strong { color: #1c273d; font-size: 11px; line-height: 1.4; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-notice-item time { flex: 0 0 auto; color: #95a0b1; font-size: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-notice-item p { margin: 4px 0 0; color: #718096; font-size: 10px; line-height: 1.5; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-notice-empty { display: flex; gap: 9px; align-items: center; padding: 0 16px 18px; color: #8090a5; font-size: 11px; } /* Keep the transactional pages inside their grid at every width. */ html.csa-v2 body.csa-client.customer-workspace-v2 :where(.topup-layout, .support-workspace, .profile-commission-grid, .profile-main-grid) > * { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .topup-history-list, html.csa-v2 body.csa-client.customer-workspace-v2 .topup-history-row, html.csa-v2 body.csa-client.customer-workspace-v2 .topup-layout .panel-body { min-width: 0; width: 100%; } @media (max-width: 1180px) { html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-dashboard-layout { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-dashboard-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { html.csa-v2 body.csa-client.customer-workspace-v2 .client-workspace { padding-bottom: 78px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-mobile-dock { position: fixed; z-index: 80; right: 10px; bottom: max(9px, env(safe-area-inset-bottom)); left: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border: 1px solid rgba(205, 216, 233, .92); border-radius: 18px; background: rgba(255, 255, 255, .93); box-shadow: 0 16px 42px rgba(15, 28, 57, .20); backdrop-filter: blur(18px); } html.csa-v2 body.csa-client.customer-workspace-v2 .client-mobile-dock button { display: grid; min-height: 48px; gap: 3px; place-items: center; padding: 5px 3px; border: 0; border-radius: 12px; color: #78859a; background: transparent; font-size: 9px; font-weight: 700; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-mobile-dock button .ui-icon { width: 18px; min-width: 18px; height: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-mobile-dock button.active { color: #fff; background: linear-gradient(135deg, #5f58ef, #16aac3); box-shadow: 0 8px 20px rgba(67, 88, 222, .23); } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-profile { display: inline-grid !important; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet > span { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet { min-width: 0; padding-inline: 9px !important; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; border-radius: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action { min-height: 68px; padding: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action > .ui-icon { width: 35px; min-width: 35px; height: 35px; padding: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action small { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-dashboard-rail { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty { min-height: 280px; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 22px 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-visual { width: 52px; height: 52px; border-radius: 16px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-visual .ui-icon { width: 23px; height: 23px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-copy h2 { font-size: 21px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-steps { grid-column: 1 / -1; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-card { grid-template-columns: 48px minmax(0, 1fr); padding: 15px 4px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-media { width: 48px; height: 48px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; padding-left: 62px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-title h3 { white-space: normal; } html.csa-v2 body.csa-client.customer-workspace-v2 .topup-layout, html.csa-v2 body.csa-client.customer-workspace-v2 .support-workspace, html.csa-v2 body.csa-client.customer-workspace-v2 .profile-commission-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; } html.csa-v2 body.csa-client.customer-workspace-v2 .topup-history-row :where(.topup-history-meta, .actions) { min-width: 0; } } @media (max-width: 480px) { html.csa-v2 body.csa-client.customer-workspace-v2 .customer-dashboard-v2 { gap: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-bar { gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action { gap: 8px; min-height: 62px; padding: 8px; border-radius: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action > .ui-icon { width: 31px; min-width: 31px; height: 31px; padding: 8px; border-radius: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action strong { font-size: 11px; white-space: normal; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-section-heading { padding: 16px 15px 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-section-heading h2 { font-size: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-facts { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rental-actions { grid-template-columns: minmax(0, 1fr); padding-left: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-empty-steps span { flex: 1 1 auto; justify-content: center; } } @media (prefers-reduced-motion: reduce) { html.csa-v2 body.csa-client.customer-workspace-v2 .customer-dashboard-v2 { animation: none; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.customer-smart-action, .sidebar-nav .tab .ui-icon) { transition: none; } } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card[data-lifecycle="attention"], html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card[data-lifecycle="waiting-reset"] { box-shadow: inset 3px 0 0 var(--v4-amber); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card[data-lifecycle="attention"]:hover, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card[data-lifecycle="waiting-reset"]:hover { background: linear-gradient(90deg, rgba(255, 247, 237, .95), rgba(255, 255, 255, .96) 48%); box-shadow: inset 3px 0 0 var(--v4-amber); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value { --finance-accent: var(--v4-cyan); --finance-soft: var(--v4-cyan-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value[data-kind="balance"] { --finance-accent: var(--v4-emerald); --finance-soft: var(--v4-emerald-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value:is( [data-kind="commission"], [data-kind="rate"], [data-kind="discount"] ) { --finance-accent: var(--v4-violet); --finance-soft: var(--v4-violet-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value[data-kind="ready"] { --finance-accent: var(--v4-success); --finance-soft: var(--v4-success-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value:is( [data-kind="rentals"], [data-kind="quota"] ) { --finance-accent: var(--v4-blue); --finance-soft: var(--v4-blue-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value[data-kind="expiry"] { --finance-accent: var(--v4-amber); --finance-soft: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value > .ui-icon:first-child { color: var(--finance-accent); background: var(--finance-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.v4-guide-hero, .v4-account-hero) .v4-kicker { font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .ui-icon-spin { animation: csa-v4-icon-spin .8s linear infinite; } @keyframes csa-v4-icon-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- */ /* Functional colour and icon language */ /* -------------------------------------------------------------------------- */ html.csa-v2 body.csa-client.customer-workspace-v2 { background: radial-gradient(circle at 82% -8%, rgba(124, 58, 237, .075), transparent 29rem), radial-gradient(circle at 7% 31%, rgba(6, 182, 212, .065), transparent 28rem), radial-gradient(circle at 86% 88%, rgba(245, 158, 11, .035), transparent 25rem), var(--v4-canvas); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-brand .brand img, html.csa-v2 body.csa-client.customer-workspace-v2 :where(.sidebar-avatar, .workspace-profile span) { background: linear-gradient(145deg, #4f46e5 0%, #2563eb 52%, #06b6d4 100%); box-shadow: 0 7px 18px rgba(37, 99, 235, .20); } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet { border-color: rgba(16, 185, 129, .20); background: linear-gradient(135deg, #fff, rgba(236, 253, 245, .72)); } html.csa-v2 body.csa-client.customer-workspace-v2 .workspace-wallet > :where(i, .ui-icon) { background: linear-gradient(145deg, #10b981, #059669); box-shadow: 0 4px 11px rgba(5, 150, 105, .24); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab { --nav-accent: #94a3b8; --nav-soft: rgba(148, 163, 184, .10); --nav-border: rgba(148, 163, 184, .24); --nav-active: linear-gradient(135deg, rgba(148, 163, 184, .15), rgba(255, 255, 255, .035)); transition: color .18s cubic-bezier(.2, .8, .2, 1), background-color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="dashboard"] { --nav-accent: #60a5fa; --nav-soft: rgba(59, 130, 246, .13); --nav-border: rgba(96, 165, 250, .30); --nav-active: linear-gradient(135deg, rgba(37, 99, 235, .28), rgba(14, 165, 233, .10)); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="plans"] { --nav-accent: #22d3ee; --nav-soft: rgba(6, 182, 212, .13); --nav-border: rgba(34, 211, 238, .30); --nav-active: linear-gradient(135deg, rgba(8, 145, 178, .28), rgba(14, 165, 233, .10)); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="topup"] { --nav-accent: #34d399; --nav-soft: rgba(16, 185, 129, .13); --nav-border: rgba(52, 211, 153, .30); --nav-active: linear-gradient(135deg, rgba(5, 150, 105, .27), rgba(20, 184, 166, .10)); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="orders"] { --nav-accent: #fbbf24; --nav-soft: rgba(245, 158, 11, .13); --nav-border: rgba(251, 191, 36, .30); --nav-active: linear-gradient(135deg, rgba(217, 119, 6, .26), rgba(245, 158, 11, .09)); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="guide"] { --nav-accent: #38bdf8; --nav-soft: rgba(14, 165, 233, .13); --nav-border: rgba(56, 189, 248, .30); --nav-active: linear-gradient(135deg, rgba(2, 132, 199, .27), rgba(6, 182, 212, .10)); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="tickets"] { --nav-accent: #fb7185; --nav-soft: rgba(244, 63, 94, .13); --nav-border: rgba(251, 113, 133, .30); --nav-active: linear-gradient(135deg, rgba(225, 29, 72, .25), rgba(244, 63, 94, .09)); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="commission"] { --nav-accent: #c084fc; --nav-soft: rgba(168, 85, 247, .14); --nav-border: rgba(192, 132, 252, .30); --nav-active: linear-gradient(135deg, rgba(124, 58, 237, .27), rgba(168, 85, 247, .10)); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab[data-view="profile"] { --nav-accent: #2dd4bf; --nav-soft: rgba(20, 184, 166, .14); --nav-border: rgba(45, 212, 191, .30); --nav-active: linear-gradient(135deg, rgba(15, 118, 110, .28), rgba(6, 182, 212, .09)); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab > :where(i, .ui-icon):first-child { display: grid; width: 28px; min-width: 28px; height: 28px; place-items: center; padding: 6px; border-radius: 8px; color: var(--nav-accent); background: var(--nav-soft); transition: color .18s ease, background-color .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab:hover { transform: translateX(2px); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab.active { border-color: var(--nav-border); background: var(--nav-active); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab.active > :where(i, .ui-icon):first-child { color: #fff; background: var(--nav-accent); box-shadow: 0 5px 14px color-mix(in srgb, var(--nav-accent) 24%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav .tab .nav-caret { color: var(--nav-accent); opacity: .64; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action { --action-accent: var(--v4-blue); --action-soft: var(--v4-blue-soft); --action-border: rgba(37, 99, 235, .24); background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--action-soft) 62%, #fff)); transition: border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action.is-primary { --action-accent: #4f46e5; --action-soft: #eef2ff; --action-border: rgba(79, 70, 229, .28); border-color: var(--action-border); color: #3730a3; background: linear-gradient(135deg, #eef2ff 0%, #eff6ff 52%, #ecfeff 100%); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action[data-go="topup"] { --action-accent: var(--v4-emerald); --action-soft: var(--v4-emerald-soft); --action-border: rgba(5, 150, 105, .25); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action[data-go="orders"] { --action-accent: var(--v4-amber); --action-soft: var(--v4-amber-soft); --action-border: rgba(217, 119, 6, .25); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action[data-go="tickets"] { --action-accent: var(--v4-rose); --action-soft: var(--v4-rose-soft); --action-border: rgba(225, 29, 72, .23); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action > :where(i, .ui-icon), html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action.is-primary > :where(i, .ui-icon) { color: var(--action-accent); background: var(--action-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--action-accent) 12%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action.is-primary > :where(i, .ui-icon) { color: #fff; background: linear-gradient(145deg, #4f46e5, #2563eb 58%, #06b6d4); box-shadow: 0 6px 14px rgba(37, 99, 235, .22); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action:hover { border-color: var(--action-border); box-shadow: 0 9px 22px color-mix(in srgb, var(--action-accent) 10%, transparent); transform: translateY(-2px); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-smart-action:hover > :where(i, .ui-icon) { transform: translateY(-1px) scale(1.045); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-panel .v4-section-heading > :where(i, .ui-icon) { color: var(--v4-amber); background: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-panel .v4-section-heading > :where(i, .ui-icon) { color: var(--v4-rose); background: var(--v4-rose-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item[data-go="orders"] > :where(i, .ui-icon):first-child { color: var(--v4-amber); background: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-attention-item[data-go="tickets"] > :where(i, .ui-icon):first-child { color: var(--v4-rose); background: var(--v4-rose-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-notice-item { border-left: 2px solid rgba(225, 29, 72, .24); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card { --rental-accent: var(--v4-cyan); --rental-accent-2: var(--v4-blue); --rental-soft: var(--v4-cyan-soft); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--rental-accent) 55%, transparent); transition: background-color .18s ease, box-shadow .18s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card[data-delivery="manual"] { --rental-accent: var(--v4-amber); --rental-accent-2: var(--v4-rose); --rental-soft: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--rental-soft) 66%, #fff), #fff 46%); box-shadow: inset 3px 0 0 var(--rental-accent); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card[data-lifecycle="expired"] { --rental-accent: #94a3b8; --rental-accent-2: #64748b; --rental-soft: #f8fafc; box-shadow: inset 3px 0 0 rgba(148, 163, 184, .38); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card .v4-rental-media { border-color: color-mix(in srgb, var(--rental-accent) 20%, var(--v4-line)); background: linear-gradient(145deg, #fff, var(--rental-soft)); box-shadow: 0 6px 16px color-mix(in srgb, var(--rental-accent) 10%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card .v4-mode { color: var(--rental-accent); border-color: color-mix(in srgb, var(--rental-accent) 26%, transparent); background: var(--rental-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card .v4-quota-progress > span { background: linear-gradient(90deg, var(--rental-accent), var(--rental-accent-2)); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card .v4-rental-primary { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--rental-accent), var(--rental-accent-2)); box-shadow: 0 7px 17px color-mix(in srgb, var(--rental-accent) 22%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-rental-card .v4-rental-primary:hover { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--rental-accent), var(--rental-accent-2)); filter: saturate(1.06) brightness(.98); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.mode-badge.automatic, [data-delivery="automatic"] .mode-badge) { color: #0369a1; border-color: #a5e5f1; background: var(--v4-cyan-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.mode-badge.manual, [data-delivery="manual"] .mode-badge) { color: #b45309; border-color: #fed7aa; background: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card[data-delivery="automatic"] { --plan-accent: var(--v4-cyan); --plan-soft: var(--v4-cyan-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card[data-delivery="manual"] { --plan-accent: var(--v4-amber); --plan-soft: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card[data-delivery] { border-color: color-mix(in srgb, var(--plan-accent, #94a3b8) 16%, var(--v4-line)); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--plan-accent, #94a3b8) 45%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card[data-delivery]:hover { border-color: color-mix(in srgb, var(--plan-accent, #94a3b8) 35%, var(--v4-line)); box-shadow: inset 0 3px 0 var(--plan-accent, #94a3b8), 0 15px 30px color-mix(in srgb, var(--plan-accent, #94a3b8) 10%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card[data-delivery="automatic"] .btn.primary { border-color: transparent; background: linear-gradient(135deg, #2563eb, #06b6d4); } html.csa-v2 body.csa-client.customer-workspace-v2 .store-card[data-delivery="manual"] .btn.primary { border-color: transparent; background: linear-gradient(135deg, #f59e0b, #f43f5e); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero { border-color: rgba(125, 211, 252, .62); background: radial-gradient(circle at 78% 10%, rgba(124, 58, 237, .095), transparent 15rem), radial-gradient(circle at 96% 92%, rgba(245, 158, 11, .07), transparent 12rem), linear-gradient(125deg, #fff 0%, #f5fbff 48%, #faf7ff 100%); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-hero::after { background: radial-gradient(circle, rgba(6, 182, 212, .12), transparent 68%); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-search > span .ui-icon, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-section-head span { color: var(--v4-cyan); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-category-tabs .category-pill.active { color: #0e7490; background: linear-gradient(135deg, #ecfeff, #eff6ff); box-shadow: inset 0 0 0 1px #a5f3fc; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card { --guide-accent: var(--v4-cyan); --guide-soft: var(--v4-cyan-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card[data-tone="violet"] { --guide-accent: var(--v4-violet); --guide-soft: var(--v4-violet-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card[data-tone="amber"] { --guide-accent: var(--v4-amber); --guide-soft: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card[data-tone="rose"] { --guide-accent: var(--v4-rose); --guide-soft: var(--v4-rose-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card:hover { border-color: color-mix(in srgb, var(--guide-accent) 32%, var(--v4-line)); box-shadow: 0 14px 32px color-mix(in srgb, var(--guide-accent) 11%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-icon { color: var(--guide-accent); background: linear-gradient(145deg, var(--guide-soft), #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--guide-accent) 12%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-copy > span, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-action .ui-icon { color: var(--guide-accent); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-guide-card-action .ui-icon { background: var(--guide-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab { --account-tab-accent: var(--v4-blue); --account-tab-soft: var(--v4-blue-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab[data-v4-profile-tab="finance"] { --account-tab-accent: var(--v4-emerald); --account-tab-soft: var(--v4-emerald-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab[data-v4-profile-tab="connections"] { --account-tab-accent: var(--v4-cyan); --account-tab-soft: var(--v4-cyan-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab[data-v4-profile-tab="security"] { --account-tab-accent: var(--v4-violet); --account-tab-soft: var(--v4-violet-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab.is-active, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--account-tab-accent) 22%, var(--v4-line)); color: var(--account-tab-accent); background: linear-gradient(145deg, #fff, var(--account-tab-soft)); box-shadow: 0 6px 16px color-mix(in srgb, var(--account-tab-accent) 9%, transparent); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-shortcut, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric { --shortcut-accent: var(--v4-blue); --shortcut-soft: var(--v4-blue-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.v4-profile-shortcut, .v4-metric)[data-go="orders"] { --shortcut-accent: var(--v4-amber); --shortcut-soft: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.v4-profile-shortcut, .v4-metric)[data-go="tickets"] { --shortcut-accent: var(--v4-rose); --shortcut-soft: var(--v4-rose-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.v4-profile-shortcut, .v4-metric)[data-go="guide"] { --shortcut-accent: var(--v4-cyan); --shortcut-soft: var(--v4-cyan-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.v4-profile-shortcut, .v4-metric)[data-go="commission"] { --shortcut-accent: var(--v4-violet); --shortcut-soft: var(--v4-violet-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.v4-profile-shortcut, .v4-metric) > :where(i, .ui-icon):first-child { color: var(--shortcut-accent); background: var(--shortcut-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.v4-profile-shortcut, button.v4-metric):hover { border-color: color-mix(in srgb, var(--shortcut-accent) 28%, var(--v4-line)); color: var(--shortcut-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--shortcut-accent) 8%, transparent); transform: translateY(-1px); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-card[data-section="snapshot"] .v4-card-heading > div > :where(i, .ui-icon) { color: var(--v4-blue); background: var(--v4-blue-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-card[data-section="membership"] .v4-card-heading > div > :where(i, .ui-icon) { color: var(--v4-teal); background: var(--v4-teal-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-card[data-section="shortcuts"] .v4-card-heading > div > :where(i, .ui-icon) { color: var(--v4-violet); background: var(--v4-violet-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-card[data-section="finance-summary"] .v4-card-heading > div > :where(i, .ui-icon), html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value:is([data-kind="balance"], [data-kind="ready"]) > :where(i, .ui-icon) { color: var(--v4-emerald); background: var(--v4-emerald-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value:is([data-kind="commission"], [data-kind="rate"], [data-kind="discount"]) > :where(i, .ui-icon) { color: var(--v4-violet); background: var(--v4-violet-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-account-card[data-section="rental-summary"] .v4-card-heading > div > :where(i, .ui-icon), html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value[data-kind="delivery"] > :where(i, .ui-icon) { color: var(--v4-cyan); background: var(--v4-cyan-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value:is([data-kind="rentals"], [data-kind="quota"]) > :where(i, .ui-icon) { color: var(--v4-blue); background: var(--v4-blue-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value[data-kind="expiry"] > :where(i, .ui-icon) { color: var(--v4-amber); background: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 :where( .v4-smart-action, .v4-profile-shortcut, .v4-metric, .v4-guide-card, .v4-rental-primary, .store-card[data-delivery] ) :where(.ui-icon, img) { transition: transform .18s cubic-bezier(.2, .8, .2, 1); } @media (hover: hover) and (pointer: fine) { html.csa-v2 body.csa-client.customer-workspace-v2 :where( .v4-profile-shortcut, button.v4-metric, .v4-guide-card, .store-card[data-delivery] ):hover > :where(i, .ui-icon, .v4-guide-card-icon):first-child { transform: translateY(-1px) scale(1.04); } } /* Final specificity pass: keep legacy V2 rules from flattening V4 accents. */ html.csa-v2 body.csa-client.customer-workspace-v2 .sidebar-nav { overflow-x: hidden; } html.csa-v2 body.csa-client.customer-workspace-v2 :where(.v4-mode, .v4-status) > .ui-icon { width: 12px; min-width: 12px; height: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric[data-go="orders"] > .ui-icon:first-child, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-shortcut[data-go="orders"] > .ui-icon:first-child { color: var(--v4-amber); background: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric[data-go="tickets"] > .ui-icon:first-child, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-shortcut[data-go="tickets"] > .ui-icon:first-child { color: var(--v4-rose); background: var(--v4-rose-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-metric[data-go="commission"] > .ui-icon:first-child { color: var(--v4-violet); background: var(--v4-violet-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-shortcut[data-go="plans"] > .ui-icon:first-child { color: var(--v4-blue); background: var(--v4-blue-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-profile-shortcut[data-go="guide"] > .ui-icon:first-child { color: var(--v4-cyan); background: var(--v4-cyan-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value:is([data-kind="balance"], [data-kind="ready"]) > .ui-icon:first-child { color: var(--v4-emerald); background: var(--v4-emerald-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value:is([data-kind="commission"], [data-kind="rate"], [data-kind="discount"]) > .ui-icon:first-child { color: var(--v4-violet); background: var(--v4-violet-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value[data-kind="delivery"] > .ui-icon:first-child { color: var(--v4-cyan); background: var(--v4-cyan-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value:is([data-kind="rentals"], [data-kind="quota"]) > .ui-icon:first-child { color: var(--v4-blue); background: var(--v4-blue-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-finance-value[data-kind="expiry"] > .ui-icon:first-child { color: var(--v4-amber); background: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .category-pill[data-plan-category] { --category-accent: var(--v4-blue); --category-soft: var(--v4-blue-soft); transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1); } html.csa-v2 body.csa-client.customer-workspace-v2 .category-pill[data-plan-category="game"] { --category-accent: var(--v4-emerald); --category-soft: var(--v4-emerald-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .category-pill[data-plan-category="creative"] { --category-accent: var(--v4-rose); --category-soft: var(--v4-rose-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .category-pill[data-plan-category="utility"] { --category-accent: var(--v4-amber); --category-soft: var(--v4-amber-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .category-pill[data-plan-category="premium"] { --category-accent: var(--v4-violet); --category-soft: var(--v4-violet-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .category-pill[data-plan-category] > .category-icon { width: 21px; min-width: 21px; height: 21px; padding: 3px; border-radius: 6px; color: var(--category-accent); background: var(--category-soft); } html.csa-v2 body.csa-client.customer-workspace-v2 .category-pill[data-plan-category]:hover, html.csa-v2 body.csa-client.customer-workspace-v2 .category-pill[data-plan-category].active { border-color: color-mix(in srgb, var(--category-accent) 28%, var(--v4-line)); color: var(--category-accent); background: linear-gradient(145deg, #fff, var(--category-soft)); } html.csa-v2 body.csa-client.customer-workspace-v2 .v4-mode > .ui-icon, html.csa-v2 body.csa-client.customer-workspace-v2 .v4-status > .ui-icon { width: 12px; min-width: 12px; height: 12px; flex: 0 0 12px; } /* Final dashboard empty-state override (must stay after the legacy dashboard block). */ html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty { min-height: 214px; grid-template-areas: "visual copy" "visual steps" "visual action"; gap: 10px 18px; padding: 24px 26px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-visual { width: 62px; height: 62px; border-radius: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-visual .ui-icon { width: 26px; height: 26px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-copy h2 { margin-block: 4px 5px; font-size: clamp(20px, 1.65vw, 25px); } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-copy p { max-width: 620px; font-size: 12px; line-height: 1.5; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-steps span { padding: 5px 8px; border-radius: 8px; font-size: 10px; } @media (max-width: 720px) { html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty { min-height: 0; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "visual copy" "steps steps" "action action"; gap: 9px 11px; padding: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-visual { width: 46px; height: 46px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-visual .ui-icon { width: 20px; height: 20px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-copy h2 { margin-top: 2px; font-size: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-copy p { display: -webkit-box; overflow: hidden; font-size: 10.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-steps { grid-column: 1 / -1; flex-wrap: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-steps span { min-width: 0; flex: 1 1 0; padding-inline: 5px; font-size: 9px; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-rentals-empty .customer-empty-cta { width: 100%; justify-content: center; } } @media (max-width: 480px) { html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-bar { gap: 5px; padding: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action { min-height: 52px; gap: 6px; padding: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action > .ui-icon { width: 27px; min-width: 27px; height: 27px; padding: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .customer-smart-action strong { font-size: 10px; line-height: 1.2; } } /* -------------------------------------------------------------------------- */ /* Customer orders + payment workspace V5 */ /* -------------------------------------------------------------------------- */ html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-tools { display: grid; grid-template-columns: minmax(280px, 520px) auto; gap: 10px; align-items: end; margin-bottom: 10px; padding: 10px; border: 1px solid #e1e7f0; border-radius: 13px; background: linear-gradient(145deg, #fbfcff, #f6f8fc); } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-tools .field { max-width: none; gap: 5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-tools .field label { font-size: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-tools .field input { min-height: 40px; padding: 8px 11px; border-radius: 10px; font-size: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-count { justify-self: end; margin: 0; padding: 8px 10px; border: 1px solid #dde4ee; border-radius: 9px; background: #fff; color: #56647a; font-size: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-list { gap: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-card.client-order-row-v3 { --order-accent: #19a9c3; position: relative; gap: 7px 13px; padding: 11px 13px 11px 15px; overflow: hidden; border-color: #e0e6ef; border-radius: 13px; box-shadow: 0 5px 16px rgba(31, 45, 86, .035); } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-card.client-order-row-v3::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--order-accent); content: ''; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3.is-good { --order-accent: #0aa77b; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3.is-warn { --order-accent: #e6a126; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3.is-bad { --order-accent: #e45d77; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-title strong { font-size: 13px; line-height: 1.3; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-title span { margin-top: 3px; font-size: 9.5px; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line > span { display: grid; min-width: 0; gap: 2px; padding: 7px 8px; border: 1px solid #e3e8f0; border-radius: 9px; background: #f8fafc; color: #7a8799; font-size: 8.5px; line-height: 1.25; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line strong { overflow: hidden; color: #1b2435; font-size: 10.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .order-context-v3 { display: -webkit-box; margin: 0; overflow: hidden; color: #69778a; font-size: 9.5px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions { gap: 6px; padding: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions .btn { min-height: 36px; padding: 7px 10px; border-radius: 9px; font-size: 10px; white-space: nowrap; } @media (min-width: 1181px) { html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-card.client-order-row-v3 { grid-template-columns: minmax(250px, 1.05fr) minmax(390px, 1.25fr) minmax(175px, auto); grid-template-areas: "main meta actions" "context meta actions"; align-items: center; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-main { grid-area: main; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line { grid-area: meta; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .order-context-v3 { grid-area: context; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions { grid-area: actions; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-self: center; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-review { grid-column: 1 / 3; } } @media (min-width: 721px) and (max-width: 1180px) { html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-card.client-order-row-v3 { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "meta meta" "context context"; align-items: center; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-main { grid-area: main; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line { grid-area: meta; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .order-context-v3 { grid-area: context; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions { grid-area: actions; } } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] { grid-template-columns: minmax(0, 1fr); place-items: center; padding: 12px; background: rgba(8, 15, 28, .52); backdrop-filter: blur(9px); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-panel { grid-column: 1; display: flex; width: min(860px, calc(100vw - 24px)); min-height: 0; max-height: calc(100dvh - 24px); overflow: hidden; flex-direction: column; border: 1px solid rgba(255, 255, 255, .7); border-radius: 21px; box-shadow: 0 28px 80px rgba(8, 15, 28, .32); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-head { position: relative; min-height: 66px; flex: 0 0 auto; padding: 11px 14px 11px 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-head h2 { font-size: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-head p { margin-top: 2px; font-size: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-close { width: 38px; height: 38px; min-height: 38px; border-radius: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-body { display: block; min-height: 0; padding: 12px; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] :where(.payment-result, .payment-guide, .bank-invoice-grid, .bank-details) { min-width: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice { gap: 10px; padding: 11px; border-radius: 16px; background: radial-gradient(circle at top right, rgba(16, 169, 196, .10), transparent 31%), linear-gradient(145deg, #fff, #f8faff); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-head-v4 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid #e2e8f0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-head-v4 > div { display: grid; gap: 3px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-head-v4 span { display: inline-flex; gap: 6px; align-items: center; color: #167e92; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-head-v4 strong { color: #1b2435; font-size: 12px; line-height: 1.35; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-all-v4 { min-height: 36px; padding: 7px 10px; border-radius: 9px; font-size: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-grid { grid-template-columns: 210px minmax(0, 1fr); gap: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-qr-block { gap: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-qr { width: 100%; max-width: 210px; padding: 8px; border-radius: 14px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-qr img { border-radius: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .qr-download { min-height: 36px; border-radius: 9px; font-size: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; align-content: start; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: "label button" "value button"; gap: 2px 7px; align-items: center; min-height: 58px; padding: 7px 8px; border-radius: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row.no-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value"; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row span { grid-area: label; min-width: 0; color: #778398; font-size: 8px; line-height: 1.2; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row strong { grid-area: value; min-width: 0; overflow: hidden; font-size: 11.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row .btn { grid-area: button; width: 30px; min-width: 30px; height: 30px; min-height: 30px; margin: 0; padding: 0; border-radius: 8px; font-size: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row .btn .ui-icon { width: 13px; min-width: 13px; height: 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-details > .bank-copy-row:nth-child(5), html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-expire { grid-column: 1 / -1; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-expire { min-height: 40px; padding: 8px 10px; border-radius: 10px; font-size: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-instructions-disclosure-v4 { overflow: hidden; border: 1px solid #e1e7f0; border-radius: 10px; background: #fff; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-instructions-disclosure-v4 > summary { display: grid; grid-template-columns: 16px minmax(0, 1fr) 13px; gap: 7px; align-items: center; min-height: 36px; padding: 7px 9px; list-style: none; color: #647188; font-size: 9.5px; font-weight: 780; cursor: pointer; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-instructions-disclosure-v4 > summary::-webkit-details-marker { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-instructions-disclosure-v4 > summary .ui-icon:last-child { transition: transform .18s ease; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-instructions-disclosure-v4[open] > summary .ui-icon:last-child { transform: rotate(180deg); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-instructions-disclosure-v4 .bank-instructions { padding: 8px 10px 10px; border-top: 1px solid #e6ebf2; font-size: 10px; line-height: 1.45; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-live-status { padding: 9px 10px; border-radius: 10px; font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-actions { position: sticky; z-index: 5; bottom: -12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin: 0 -12px -12px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #e2e7ef; background: rgba(255, 255, 255, .96); box-shadow: 0 -10px 24px rgba(31, 45, 86, .10); backdrop-filter: blur(14px); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-actions .btn { min-height: 40px; padding: 8px 11px; border-radius: 10px; font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-form { gap: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .payment-due-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; padding: 11px 12px; border: 1px solid #dfe5f0; border-radius: 12px; background: linear-gradient(135deg, #f8f9ff, #f1f8ff); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .payment-due-summary span { color: #6f7c92; font-size: 9px; font-weight: 800; text-transform: uppercase; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .payment-due-summary strong { grid-row: 1 / 3; grid-column: 2; color: #274daf; font-size: 22px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .payment-due-summary small { color: #738097; font-size: 9.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-card { min-height: 92px; gap: 4px; padding: 10px; border-radius: 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-card span { width: 34px; height: 34px; border-radius: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-card strong { font-size: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-card small { font-size: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-form > .btn.primary { min-height: 42px; border-radius: 10px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .usdt-invoice .bank-invoice-grid { grid-template-columns: 190px minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .usdt-invoice > h3 { font-size: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .usdt-invoice > .bank-invoice-sub { font-size: 10.5px; } @media (max-width: 720px) { html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-tools { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 8px; border-radius: 11px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-count { width: auto; justify-self: stretch; padding: 7px 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-card.client-order-row-v3 { gap: 7px; padding: 10px 10px 10px 12px; border-radius: 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-main { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-title strong { font-size: 12.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-line > span:nth-child(n + 3) { grid-column: 1 / -1; } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } html.csa-v2 body.csa-client.customer-workspace-v2 .client-order-row-v3 .client-order-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] { align-items: center; padding: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-panel { width: min(100%, 680px); max-width: 100%; max-height: calc(100dvh - 12px); border-radius: 17px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-head { min-height: 56px; padding: 8px 10px 8px 12px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-head h2 { font-size: 15px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-head p { font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-close { width: 36px; height: 36px; min-height: 36px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .drawer-body { padding: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice { gap: 8px; padding: 8px; border-radius: 13px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-head-v4 { gap: 7px; padding-bottom: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-head-v4 strong { font-size: 10.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-all-v4 { min-height: 32px; padding: 5px 8px; font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-grid { grid-template-columns: 150px minmax(0, 1fr); gap: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-qr, html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-qr-block { width: 100%; max-width: 150px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-details { grid-template-columns: minmax(0, 1fr); gap: 5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-details > .bank-copy-row:nth-child(5), html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-expire { grid-column: auto; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row { min-height: 43px; padding: 5px 6px; border-radius: 8px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row span { flex: initial; font-size: 7px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row strong { flex: initial; font-size: 9.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-row .btn { flex: initial; width: 28px; min-width: 28px; height: 28px; min-height: 28px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-expire { min-height: 34px; padding: 6px 7px; font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-instructions-disclosure-v4 > summary { min-height: 32px; padding: 5px 7px; font-size: 8.5px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-actions { bottom: -8px; margin: 0 -8px -8px; padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-actions .btn { min-height: 38px; padding: 7px 8px; font-size: 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .payment-due-summary { padding: 8px 9px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .payment-due-summary strong { font-size: 18px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-card { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "icon title" "icon hint"; min-height: 56px; gap: 1px 8px; align-content: center; justify-items: start; padding: 7px 9px; text-align: left; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-card > span { grid-area: icon; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-card > strong { grid-area: title; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .pay-method-card > small { grid-area: hint; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .usdt-invoice .bank-invoice-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 380px) { html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-grid { grid-template-columns: 126px minmax(0, 1fr); } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-qr, html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-qr-block { max-width: 126px; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-invoice-head-v4 strong { display: none; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-all-v4 { font-size: 0; } html.csa-v2 body.csa-client.customer-workspace-v2 .drawer[data-variant="payment"] .bank-copy-all-v4 .ui-icon { margin: 0; } }