/* The subscriber workspace uses its own visual tokens in both themes.
   Light: bg/card were only a couple of points apart, so cards had no visible
   edge -- bg is pulled down and lines darkened enough to read as structure.
   Dark: pulled back from near-black/near-white the same way the main app
   theme was, so this page doesn't feel harsher than the rest of the app. */
.client-page { --cp-bg:#eaf1ef; --cp-card:#fff; --cp-text:#1c3235; --cp-muted:#5c6f73; --cp-line:#d2e0dd; --cp-soft:#eef4f3; --cp-green:#0f6d5a; --cp-green-soft:#e3f2ed; --cp-blue:#3c6288; --cp-red:#a34435; --cp-warn:#8a6310; }
[data-theme="dark"] .client-page { --cp-bg:#15232a; --cp-card:#1d2f36; --cp-text:#dbe7e4; --cp-muted:#94a9ac; --cp-line:#2c434a; --cp-soft:#213539; --cp-green:#63c4a4; --cp-green-soft:#1e3a34; --cp-blue:#93b6d9; --cp-red:#e69182; --cp-warn:#d9bd72; }
.client-page .content { background:var(--cp-bg); padding:28px 36px 48px; }
.client-page .topbar { background:var(--cp-card); border-color:var(--cp-line); box-shadow:none; }
.client-page .topbar h1 { color:var(--cp-text); font-size:16px; }
.client-page .topbar p { color:var(--cp-muted); }
.client-page .sidebar { background:#f2f8f7; box-shadow:none; border:0; }
.client-page .sidebar .nav-item { color:#43595c; border-radius:9px; }
.client-page .sidebar .nav-item.active { background:#dcece8; color:#12433c; box-shadow:none; }
.client-page .sidebar .nav-item:hover { background:#e6f1ef; }
.client-page .sidebar .brand-mark:not(.has-logo) { background:#0f6d5a; box-shadow:none; }
.client-page .sidebar .brand-text strong { color:#173a35; }
.client-page .sidebar .brand-text small { color:#537370; }
[data-theme="dark"] .client-page .sidebar { background:#132a2c; }
[data-theme="dark"] .client-page .sidebar .nav-item { color:#a6bebc; }
[data-theme="dark"] .client-page .sidebar .nav-item.active { background:#234244; color:#fff; }
[data-theme="dark"] .client-page .sidebar .nav-item:hover { background:#1c3436; }
[data-theme="dark"] .client-page .sidebar .brand-mark:not(.has-logo) { background:#2c6058; }
[data-theme="dark"] .client-page .sidebar .brand-text strong { color:#e9f5f2; }
[data-theme="dark"] .client-page .sidebar .brand-text small { color:#9fb8b5; }
.client-page #quickPaymentBtn { display:none; }
#view-subscriber-detail { max-width:1520px; margin:0 auto; color:var(--cp-text); }
.cp-breadcrumb { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--cp-muted); margin:0 0 26px; }
.cp-breadcrumb button { border:0; background:none; color:var(--cp-muted); cursor:pointer; padding:0; font:inherit; }
.cp-breadcrumb button:hover { color:var(--cp-green); }
.cp-page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:30px; }
.cp-identity { display:flex; gap:18px; align-items:center; min-width:0; }
.cp-company-mark { width:58px; height:58px; flex-shrink:0; background:var(--cp-card); border:1px solid var(--cp-line); border-radius:16px; display:grid; place-items:center; color:var(--cp-green); }
.cp-company-mark .icon { width:25px; height:25px; }
.cp-page-heading #detailCompany { margin:0 0 9px; font-size:28px; line-height:1.3; color:var(--cp-text); font-weight:750; letter-spacing:-.7px; overflow-wrap:anywhere; }
#detailMeta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0; font-size:13px; color:var(--cp-muted); }
.cp-action-group { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.client-page .cp-button,.client-page .cp-icon-button,.client-page .cp-text-button { font-family:inherit; cursor:pointer; }
.cp-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:10px 15px; background:var(--cp-card); border:1px solid var(--cp-line); color:var(--cp-text); border-radius:8px; font-size:13px; line-height:1.5; font-weight:600; text-decoration:none; }
.cp-button .icon { width:16px; height:16px; flex-shrink:0; }
.cp-button:hover { background:var(--cp-soft); border-color:var(--cp-green); }
.cp-button.primary { background:#187d6b; color:white; border-color:#187d6b; box-shadow:0 2px 3px #164a3010; }
.cp-button.primary:hover { background:#126957; }
.cp-button.danger { color:var(--cp-red); }
.cp-button:disabled { opacity:.55; cursor:wait; }
.cp-icon-button { display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid var(--cp-line); border-radius:8px; background:var(--cp-card); color:var(--cp-muted); font-size:22px; }
.cp-icon-button .icon { width:15px; height:15px; }
.cp-icon-button:hover { color:var(--cp-green); background:var(--cp-green-soft); }
.cp-text-button { background:none; border:0; color:var(--cp-green); font-size:13px; padding:8px 0 8px 12px; white-space:nowrap; }
.cp-tabs { display:flex; align-items:center; gap:30px; border-bottom:1px solid var(--cp-line); margin-bottom:28px; overflow-x:auto; }
.cp-tabs button { background:none; border:0; border-bottom:2px solid transparent; color:var(--cp-muted); white-space:nowrap; padding:0 2px 15px; font-size:13px; font-weight:600; line-height:1.5; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:42px; }
.cp-tabs button[aria-selected="true"] { color:var(--cp-green); border-bottom-color:var(--cp-green); }
.cp-tabs button span { border-radius:5px; background:var(--cp-line); padding:1px 6px; font-size:12px; color:var(--cp-muted); }
.cp-tabs button[aria-selected="true"] span { color:var(--cp-green); background:var(--cp-green-soft); }
.cp-tab-panel[hidden] { display:none!important; }
.cp-section-intro { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:0 0 21px; }
.cp-eyebrow { display:block; color:var(--cp-muted); font-size:12px; font-weight:600; letter-spacing:.7px; margin-bottom:8px; }
.client-panel h2 { font-size:19px; font-weight:650; line-height:1.5; margin:0; letter-spacing:-.3px; }
.cp-section-intro p { font-size:13px; color:var(--cp-muted); line-height:1.8; margin:5px 0 0; }
.cp-updated { display:flex; gap:7px; align-items:center; color:var(--cp-muted); font-size:12px; white-space:nowrap; }
.cp-updated i { width:6px; height:6px; border-radius:50%; background:var(--cp-green); }
.cp-summary { display:grid; grid-template-columns:1.08fr 1fr 1fr; gap:18px; margin-bottom:24px; }
.cp-balance,.cp-metric { min-width:0; border-radius:13px; min-height:186px; padding:23px 25px 19px; border:1px solid var(--cp-line); }
.cp-balance { background:#187967; color:#fff; border-color:#187967; position:relative; overflow:hidden; }
.cp-balance:after { content:''; width:190px; height:190px; border:1px solid #ffffff0f; position:absolute; right:-80px; bottom:-90px; border-radius:50%; pointer-events:none; box-shadow:0 0 0 26px #ffffff04,0 0 0 52px #ffffff03; }
.cp-balance.has-debt { background:#844b43; border-color:#844b43; }
.cp-balance-top { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#d4eae4; }
.cp-balance-top .icon { width:19px; height:19px; }
.cp-balance>strong { display:block; font-size:44px; font-weight:600; letter-spacing:-1.3px; line-height:1.2; margin:20px 0 19px; font-variant-numeric:tabular-nums; }
.cp-balance-foot { border-top:1px solid #ffffff25; padding-top:13px; display:flex; align-items:center; gap:7px; font-size:12px; color:#e1f2eb; }
.cp-balance-foot .icon { width:14px; height:14px; flex-shrink:0; }
.cp-metric { background:var(--cp-card); }
.cp-metric-label { color:var(--cp-muted); display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.cp-metric-label .icon { width:18px; height:18px; color:var(--cp-muted); }
.cp-metric>strong { font-size:37px; line-height:1.2; font-weight:600; letter-spacing:-.7px; margin:18px 0 5px; display:block; color:var(--cp-text); }
.cp-metric>strong.cp-paid-month { font-size:29px; margin-top:23px; }
.cp-metric>p { font-size:12px; color:var(--cp-muted); margin:0 0 17px; }
.cp-metric-foot { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-top:11px; border-top:1px solid var(--cp-line); color:var(--cp-muted); font-size:12px; min-height:32px; }
.cp-metric-foot b { color:var(--cp-text); font-weight:600; margin-left:3px; }
.cp-badge { display:inline-flex; align-items:center; gap:5px; border-radius:5px; padding:4px 8px; font-size:12px; line-height:1.6; font-weight:500; white-space:nowrap; background:var(--cp-soft); color:var(--cp-muted); }
.cp-badge.good { background:var(--cp-green-soft); color:var(--cp-green); }
.cp-badge.good:before { content:''; width:4px; height:4px; border-radius:50%; background:currentColor; }
.cp-badge.blue { color:var(--cp-blue); background:color-mix(in srgb,var(--cp-blue) 9%,var(--cp-card)); }
.cp-badge.bad { color:var(--cp-red); background:color-mix(in srgb,var(--cp-red) 9%,var(--cp-card)); }
.cp-badge.warn { color:var(--cp-warn); background:color-mix(in srgb,var(--cp-warn) 10%,var(--cp-card)); }
.cp-main-grid { display:grid; grid-template-columns:minmax(0,2.15fr) minmax(255px,1fr); gap:22px; align-items:start; }
.cp-main-column,.cp-side-column { display:grid; gap:20px; min-width:0; }
.cp-card { background:var(--cp-card); border:1px solid var(--cp-line); border-radius:12px; min-width:0; overflow:hidden; }
.cp-card-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:21px 23px 17px; }
.client-panel h3 { font-size:14px; line-height:1.55; font-weight:650; margin:0; color:var(--cp-text); }
.cp-card-head p { font-size:12px; color:var(--cp-muted); margin:5px 0 0; line-height:1.7; }
.cp-equation { display:grid; grid-template-columns:1fr 15px 1fr 15px 1.15fr; align-items:center; gap:10px; padding:8px 23px 19px; }
.cp-equation>div { padding:12px 0; min-width:0; }
.cp-equation span:not(.cp-operator) { display:block; font-size:12px; color:var(--cp-muted); line-height:1.5; }
.cp-equation strong { display:block; font-size:28px; font-weight:600; line-height:1.25; margin:9px 0 7px; letter-spacing:-.7px; }
.cp-equation small { display:block; color:var(--cp-muted); font-size:11px; line-height:1.6; }
.cp-operator { color:var(--cp-muted); font-size:21px; }
.cp-equation .cp-equation-result { background:var(--cp-green-soft); border:1px solid color-mix(in srgb,var(--cp-green) 14%,var(--cp-card)); padding:14px; border-radius:9px; }
.cp-equation-result strong { color:var(--cp-green); }
.cp-cycle-dates { display:flex; flex-wrap:wrap; gap:22px; border-top:1px solid var(--cp-line); margin:0 23px; padding:17px 0; }
.cp-cycle-dates>div { display:flex; align-items:center; gap:9px; color:var(--cp-muted); font-size:12px; }
.cp-cycle-dates .icon { width:16px; height:16px; }
.cp-cycle-dates b { display:block; color:var(--cp-text); margin-top:4px; font-size:12px; font-weight:600; }
.cp-explainer { color:var(--cp-muted); font-size:12px; line-height:1.9; margin:0; }
.cp-cycle>.cp-explainer { padding:12px 23px; background:var(--cp-soft); border-top:1px solid var(--cp-line); }
.cp-month-strip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; padding:5px 17px 19px; }
.cp-month { min-width:0; border:0; background:none; text-align:center; cursor:pointer; padding:7px 3px; border-radius:8px; font:inherit; color:var(--cp-text); }
.cp-month:hover { background:var(--cp-soft); }
.cp-month>span { display:block; color:var(--cp-muted); font-size:12px; }
.cp-month>b { display:block; font-size:13px; font-weight:600; margin:8px 0 12px; }
.cp-month i { width:25px; height:25px; margin:0 auto 8px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--cp-green) 25%,var(--cp-card)); border-radius:50%; color:var(--cp-green); background:var(--cp-green-soft); }
.cp-month i .icon { width:13px; height:13px; }
.cp-month.owing i { color:var(--cp-red); border-color:var(--cp-red); background:var(--cp-soft); }
.cp-month.zero i { color:var(--cp-muted); border-color:var(--cp-line); background:var(--cp-soft); }
.cp-month small { font-size:11px; color:var(--cp-muted); }
.cp-strip-footer { display:flex; justify-content:space-between; padding:12px 23px; border-top:1px solid var(--cp-line); font-size:11px; color:var(--cp-muted); }
.cp-recent-row { display:flex; align-items:center; gap:12px; padding:17px 23px; border-top:1px solid var(--cp-line); }
.cp-receipt-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--cp-green-soft); color:var(--cp-green); flex-shrink:0; }
.cp-receipt-icon.debt { background:var(--cp-soft); color:var(--cp-red); }
.cp-receipt-icon .icon { width:16px; height:16px; }
.cp-recent-row>div { flex:1; min-width:0; }
.cp-recent-row b { display:block; font-size:12px; font-weight:600; }
.cp-recent-row small { display:block; font-size:12px; color:var(--cp-muted); margin-top:5px; line-height:1.6; }
.cp-recent-row>strong { font-size:15px; white-space:nowrap; font-weight:600; }
.cp-green { color:var(--cp-green)!important; }
.cp-red { color:var(--cp-red)!important; }
.cp-service { padding:0 21px 20px; }
.cp-service .cp-card-head { padding:21px 0 19px; }
.cp-speed { display:flex; align-items:center; gap:10px; }
.cp-speed>.icon { color:var(--cp-green); width:23px; height:23px; }
.cp-speed strong { font-size:25px; font-weight:600; letter-spacing:-.5px; }
.cp-service>p { margin:6px 0 21px; font-size:12px; color:var(--cp-muted); }
.cp-service-price { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:15px; }
.cp-service-price span { color:var(--cp-muted); }
.cp-service-price b { font-size:20px; font-weight:600; }
.cp-info-line { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--cp-muted); border-top:1px solid var(--cp-line); padding:15px 0; }
.cp-info-line b { color:var(--cp-text); font-weight:500; }
.cp-service>.cp-button { width:100%; background:var(--cp-soft); }
.cp-money-flow { padding:0 21px 20px; }
.cp-money-flow .cp-card-head { padding:21px 0 17px; }
.cp-money-flow>div:not(.cp-card-head):not(.cp-flow-bar) { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--cp-muted); margin-bottom:13px; }
.cp-money-flow b { color:var(--cp-text); font-size:13px; font-weight:600; }
.cp-money-flow>.cp-flow-total { border-top:1px solid var(--cp-line); padding-top:14px; }
.cp-money-flow>.cp-flow-total b { color:var(--cp-green); }
.cp-flow-bar { width:100%; height:5px; border-radius:6px; overflow:hidden; background:#9dcabc; margin:16px 0 9px; }
.cp-flow-bar i { display:block; background:#258a72; height:100%; border-radius:6px; }
.cp-money-flow>small { color:var(--cp-muted); font-size:11px; }
.cp-history-help { padding:21px; background:var(--cp-green-soft); border:1px dashed color-mix(in srgb,var(--cp-green) 25%,var(--cp-card)); border-radius:12px; }
.cp-help-icon { display:block; color:var(--cp-green); margin-bottom:12px; }
.cp-help-icon .icon { width:20px; height:20px; }
.cp-history-help h3 { font-size:13px; }
.cp-history-help p { color:var(--cp-muted); font-size:12px; line-height:1.9; margin:9px 0 16px; }
.cp-history-help .cp-button { background:transparent; border-color:color-mix(in srgb,var(--cp-green) 22%,var(--cp-card)); color:var(--cp-green); width:100%; }
.cp-filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:18px 20px; border-bottom:1px solid var(--cp-line); }
.cp-search { display:flex; align-items:center; gap:8px; padding:0 11px; background:var(--cp-soft); border:1px solid var(--cp-line); border-radius:8px; flex:1; min-width:200px; }
.cp-search .icon { width:15px; height:15px; color:var(--cp-muted); }
.cp-search input { width:100%; min-width:0; background:none; border:0; padding:11px 0; font:inherit; font-size:12px; color:var(--cp-text); box-shadow:none; }
.cp-search input::placeholder { color:var(--cp-muted); }
.cp-year { display:flex; align-items:center; gap:8px; color:var(--cp-muted); font-size:12px; }
.cp-year select { background:var(--cp-card); border:1px solid var(--cp-line); border-radius:7px; padding:10px; color:var(--cp-text); font:inherit; }
.cp-check { display:flex; gap:7px; align-items:center; font-size:12px; color:var(--cp-muted); }
.cp-check input { accent-color:#187d6b; width:15px; height:15px; }
.cp-table-scroll { overflow-x:auto; }
.cp-table { width:100%; border-collapse:collapse; color:var(--cp-text); font-size:12px; }
.cp-table th { text-align:left!important; color:var(--cp-muted); font-size:12px; background:var(--cp-soft); padding:15px 16px; border-bottom:1px solid var(--cp-line); white-space:nowrap; font-weight:500; position:static; }
.cp-table td { text-align:left!important; padding:17px 16px; border-bottom:1px solid var(--cp-line); line-height:1.7; }
.cp-table tr:last-child td { border-bottom:0; }
.cp-table td.cp-number { text-align:right!important; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cp-table td b { display:block; font-weight:500; }
.cp-table td small { display:block; color:var(--cp-muted); font-size:12px; margin-top:3px; }
.cp-table tbody tr:hover { background:var(--cp-soft); }
.cp-payment-note { max-width:350px; overflow-wrap:anywhere; }
.cp-table-footer { display:flex; justify-content:space-between; gap:12px; padding:17px 20px; border-top:1px solid var(--cp-line); font-size:12px; color:var(--cp-muted); }
.cp-table-footer b { color:var(--cp-text); margin-left:6px; }
.cp-empty { padding:55px 25px; text-align:center; }
.cp-empty>.icon { width:28px; height:28px; color:var(--cp-muted); margin-bottom:15px; }
.cp-empty p { color:var(--cp-muted); font-size:13px; line-height:1.8; margin:8px 0 0; }
.cp-profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cp-profile-row { display:flex; justify-content:space-between; gap:20px; padding:17px 23px; border-top:1px solid var(--cp-line); font-size:13px; }
.cp-profile-row>span { color:var(--cp-muted); flex-shrink:0; }
.cp-profile-row>b { font-weight:500; text-align:right; overflow-wrap:anywhere; min-width:0; }
.cp-contact-actions { display:flex; flex-wrap:wrap; gap:10px; padding:20px 23px; }
.cp-service-management { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:23px; margin-top:22px; }
.cp-service-management p { font-size:13px; color:var(--cp-muted); line-height:1.8; margin:6px 0 0; }
.cp-dialog { width:min(510px,calc(100vw - 30px)); padding:27px; color:var(--cp-text); background:var(--cp-card); border:1px solid var(--cp-line); border-radius:16px; box-shadow:0 24px 100px #102b3240; max-height:90dvh; overflow-y:auto; }
.cp-dialog::backdrop { background:#102b3277; backdrop-filter:blur(3px); }
.cp-dialog-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:20px; }
.cp-field { display:flex; flex-direction:column; gap:9px; font-size:13px; margin-bottom:17px; }
.cp-field input { width:100%; border:1px solid var(--cp-line); border-radius:8px; background:var(--cp-soft); color:var(--cp-text); padding:12px; font:inherit; font-size:15px; }
.cp-month-context { display:flex; flex-direction:column; gap:11px; padding:15px; background:var(--cp-green-soft); border-radius:8px; margin-bottom:20px; font-size:12px; color:var(--cp-muted); }
.cp-month-context span { display:flex; justify-content:space-between; gap:14px; }
.cp-month-context b { color:var(--cp-text); font-weight:600; }
.cp-dialog-actions { display:flex; justify-content:space-between; gap:10px; margin-top:23px; }
.client-panel button:focus-visible,.client-panel input:focus-visible,.client-panel select:focus-visible,.cp-page-heading button:focus-visible { outline:3px solid #69b8aa; outline-offset:3px; }
@media (min-width:1600px) { .client-page .content { padding:32px 50px 60px; } .cp-equation { gap:20px; } .cp-summary { gap:22px; } }
@media (max-width:1200px) { .client-page .content { padding:24px; } .cp-main-grid { grid-template-columns:minmax(0,1fr) 255px; gap:18px; } .cp-page-heading { flex-wrap:wrap; } .cp-balance,.cp-metric { padding:20px; } .cp-equation { gap:6px; padding-left:18px; padding-right:18px; } .cp-equation strong { font-size:24px; } .cp-card-head { padding:19px 18px; } .cp-summary { gap:12px; } }
@media (max-width:1000px) { .cp-main-grid { grid-template-columns:1fr; } .cp-side-column { grid-template-columns:1fr 1fr; } .cp-history-help { grid-column:1/-1; } .cp-updated { display:none; } .cp-section-intro { align-items:flex-start; flex-wrap:wrap; } .cp-balance>strong { font-size:36px; } .cp-metric>strong { font-size:32px; } .cp-metric>strong.cp-paid-month { font-size:24px; } }
@media (max-width:640px) { .client-page .content { padding:20px 15px 35px; } .cp-breadcrumb { margin-bottom:20px; } .cp-page-heading { margin-bottom:22px; gap:20px; } .cp-page-heading #detailCompany { font-size:24px; } .cp-company-mark { width:45px; height:45px; border-radius:12px; } .cp-identity { gap:12px; } #detailMeta { gap:7px 12px; font-size:12px; } .cp-page-heading>.cp-action-group { width:100%; } .cp-page-heading>.cp-action-group>.cp-button { flex:1; padding:10px; font-size:12px; } .cp-tabs { gap:23px; margin-bottom:22px; } .cp-tabs button { font-size:13px; } .client-panel h2 { font-size:17px; } .cp-summary { grid-template-columns:1fr 1fr; gap:12px; } .cp-balance { grid-column:1/-1; min-height:172px; } .cp-metric { padding:17px 14px; min-height:172px; } .cp-metric-label { font-size:12px; gap:7px; } .cp-metric-label .icon { width:15px; } .cp-metric>strong { font-size:30px; } .cp-metric>strong.cp-paid-month { font-size:23px; } .cp-metric>p { font-size:11px; line-height:1.6; } .cp-metric-foot { font-size:11px; gap:5px; } .cp-metric-foot .cp-badge { font-size:8px; } .cp-card-head { padding:18px 15px 12px; align-items:flex-start; } .cp-card-head h3 { font-size:13px; } .cp-card-head p { font-size:11px; } .cp-card-head .cp-badge { font-size:8px; } .cp-equation { grid-template-columns:1fr 10px 1fr 10px 1.1fr; padding:9px 13px 17px; gap:5px; } .cp-equation strong { font-size:23px; } .cp-equation span:not(.cp-operator) { font-size:8px; } .cp-equation small { font-size:8px; } .cp-equation .cp-equation-result { padding:12px 8px; } .cp-operator { font-size:16px; } .cp-cycle-dates { margin:0 15px; gap:18px; } .cp-cycle-dates>div { font-size:11px; } .cp-cycle>.cp-explainer { padding:12px 15px; font-size:11px; } .cp-month-strip { padding:7px 10px 16px; grid-template-columns:repeat(3,1fr); row-gap:12px; } .cp-strip-footer { padding:12px 15px; font-size:8px; gap:15px; } .cp-recent-row { padding:16px 15px; } .cp-side-column { grid-template-columns:1fr; } .cp-history-help { grid-column:auto; } .cp-profile-grid { grid-template-columns:1fr; } .cp-profile-row { flex-direction:column; gap:7px; } .cp-profile-row>b { text-align:left; } .cp-service-management { flex-direction:column; align-items:flex-start; } .cp-dialog { padding:21px; } .cp-dialog-actions { flex-wrap:wrap; } .cp-dialog-actions button { flex:1; font-size:12px; } .cp-text-button { font-size:12px; } .cp-table { min-width:780px; } .cp-filter-bar { gap:12px; padding:15px; } .cp-search { flex-basis:100%; } .cp-section-intro .cp-action-group { width:100%; } .cp-section-intro .cp-action-group button { font-size:12px; flex:1; } }
@media (prefers-reduced-motion:no-preference) { .cp-tab-panel:not([hidden]) { animation:cp-appear .18s ease-out; } @keyframes cp-appear { from { opacity:.6; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } } }

.client-page .sidebar .user-info strong, .client-page .user-card strong { color:#173a35; }
.client-page .sidebar .user-info small, .client-page .user-card small { color:#537370; }
[data-theme="dark"] .client-page .sidebar .user-info strong, [data-theme="dark"] .client-page .user-card strong { color:#dcece8; }
[data-theme="dark"] .client-page .sidebar .user-info small, [data-theme="dark"] .client-page .user-card small { color:#aac1be; }

.cp-speed .cp-no-speed { font-size:13px; font-weight:500; line-height:1.7; letter-spacing:0; color:var(--cp-muted); }
@media(max-width:640px) { .client-page .sidebar { display:none; } .client-page .workspace { width:100%!important; margin-left:0!important; } .cp-equation strong { font-size:24px; } }

.cp-row-actions { display:flex; gap:6px; }

.cp-history-details { padding:0; margin-top:20px; }
.cp-history-details > summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:21px 23px; cursor:pointer; list-style:none; }
.cp-history-details > summary::-webkit-details-marker { display:none; }
.cp-history-details > summary b { display:block; font-size:14px; font-weight:650; color:var(--cp-text); }
.cp-history-details > summary small { display:block; color:var(--cp-muted); font-size:12px; margin-top:4px; font-weight:400; }
.cp-history-body { padding:0 23px 23px; border-top:1px solid var(--cp-line); }
.cp-history-body table input[type=number] { width:110px; border:1px solid var(--cp-line); border-radius:7px; background:var(--cp-soft); color:var(--cp-text); padding:8px 10px; font:inherit; font-size:12px; }
.cp-history-body table input:disabled { opacity:.5; }
.cp-history-body table input[aria-invalid="true"] { border-color:var(--cp-red); }
.cp-history-body table input[type=checkbox] { accent-color:#187d6b; width:16px; height:16px; }
.cp-history-actions { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:16px 0; font-size:12px; color:var(--cp-muted); }
.cp-history-actions b { color:var(--cp-text); }
.cp-history-compare { display:grid; gap:2px; margin:14px 0; }
.cp-history-compare > div { display:grid; grid-template-columns:1fr auto auto; gap:20px; align-items:center; padding:9px 0; border-bottom:1px solid var(--cp-line); font-size:12.5px; }
.cp-history-compare > div:first-child { color:var(--cp-muted); font-weight:600; font-size:11px; }
.cp-history-compare b { font-variant-numeric:tabular-nums; text-align:right; min-width:70px; }
.cp-history-changed { color:var(--cp-green); }
.cp-history-save { display:flex; justify-content:flex-end; margin-top:16px; }
.client-page { --panel:var(--cp-card); --panel-elevated:var(--cp-card); --panel-muted:var(--cp-soft); --text:var(--cp-text); --muted:var(--cp-muted); --line:var(--cp-line); --primary:#187d6b; --primary-soft:var(--cp-green-soft); --btn-primary-bg:#187d6b; --btn-primary-bg-hover:#126957; --btn-primary-text:#fff; --btn-primary-shadow:none; --btn-primary-shadow-hover:none; }