/* ==========================================================================
   CLIENT PORTAL — clean light layout (Outfit, indigo accent, white cards).
   Loaded after client/ui/theme/app.css; overrides their tokens and layout.
   ========================================================================== */

:root, :root[data-theme="light"] {
    --p-primary: #4361ee;
    --p-primary-hover: #3451d1;
    --p-primary-soft: #eef2ff;
    --p-bg: #f8fafc;
    --p-card: #ffffff;
    --p-border: #e2e8f0;
    --p-border-soft: #f1f5f9;
    --p-text: #0f172a;
    --p-text-2: #475569;
    --p-muted: #94a3b8;
    --p-radius: 12px;
    --p-radius-sm: 8px;
    --p-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
    --p-success: #16a34a; --p-success-soft: #dcfce7;
    --p-warning: #b45309; --p-warning-soft: #fef3c7;
    --p-danger: #dc2626;  --p-danger-soft: #fee2e2;
    --p-info: #2563eb;    --p-info-soft: #dbeafe;

    --brand: var(--p-primary);
    --brand-hover: var(--p-primary-hover);
    --brand-soft: var(--p-primary-soft);
    --brand-blue: var(--p-primary);
    --primary: var(--p-primary);
    --primary-hover: var(--p-primary-hover);
    --primary-light: var(--p-primary-soft);
    --canvas: var(--p-bg);
    --surface: var(--p-card);
    --line: var(--p-border);
    --font-body: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --sidebar-width: 248px;
    --header-height: 68px;
}
:root[data-theme="dark"] {
    --p-primary: #6378ff;
    --p-primary-hover: #7c8dff;
    --p-primary-soft: rgba(99, 120, 255, .14);
    --p-bg: #0b0f19;
    --p-card: #141c2f;
    --p-border: #1e293b;
    --p-border-soft: #182235;
    --p-text: #e2e8f0;
    --p-text-2: #a5b1c4;
    --p-muted: #6b7a90;
    --p-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --p-success-soft: rgba(22, 163, 74, .15);
    --p-warning: #f59e0b; --p-warning-soft: rgba(245, 158, 11, .14);
    --p-danger-soft: rgba(220, 38, 38, .15);
    --p-info: #60a5fa; --p-info-soft: rgba(37, 99, 235, .16);
}

body.is-client, body.is-guest {
    background: var(--p-bg) !important;
    color: var(--p-text);
    font-family: var(--font-body);
}
body.is-client h1, body.is-client h2, body.is-client h3, body.is-client h4 { font-family: var(--font-display); }

/* ---------- Sidebar ---------- */
body.is-client .client-sidebar {
    width: var(--sidebar-width);
    background: var(--p-card) !important;
    backdrop-filter: none;
    border-right: 1px solid var(--p-border);
}
body.is-client .sidebar-brand {
    background: var(--p-card) !important;
    color: var(--p-text);
    border-bottom: 1px solid var(--p-border);
    height: var(--header-height);
    padding: 0 20px;
}
body.is-client .sidebar-brand::after { display: none; }
body.is-client .brand-link { display: flex; align-items: center; gap: 10px; color: var(--p-text); }
body.is-client .brand-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--p-primary) !important; color: #fff;
    box-shadow: 0 3px 10px rgba(67, 97, 238, .3);
}
body.is-client .brand-icon.has-logo { background: transparent !important; box-shadow: none; }
body.is-client .brand-name { color: var(--p-text) !important; font-size: 17px; font-weight: 700; }
body.is-client .sidebar-close-btn { color: var(--p-text-2); }

body.is-client .sidebar-nav { padding: 10px 0 14px; }
body.is-client .nav-group-title {
    padding: 14px 20px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--p-muted);
}
body.is-client .nav-list { margin: 0; padding: 0 10px; }
body.is-client .nav-item { margin: 1px 0; }
body.is-client .nav-item a,
body.is-client .nav-logout-btn {
    display: flex; align-items: center; width: 100%;
    padding: 8px 10px;
    border-radius: var(--p-radius-sm);
    background: none; border: 0; cursor: pointer;
    color: var(--p-text-2);
    font: 500 13.5px/1.3 var(--font-body);
    text-align: left;
    box-shadow: none;
    transform: none !important;
}
body.is-client .nav-link-content { gap: 10px; }
body.is-client .nav-link-content svg,
body.is-client .nav-item.active svg {
    width: 18px; height: 18px; padding: 0;
    background: none !important; box-shadow: none !important;
    color: currentColor; transform: none !important;
}
body.is-client .nav-item:hover a,
body.is-client .nav-logout-btn:hover { background: var(--p-bg); color: var(--p-text); }
body.is-client .nav-item.active a {
    background: var(--p-primary-soft) !important;
    color: var(--p-primary) !important;
    font-weight: 600;
    box-shadow: none;
}
body.is-client .nav-logout-btn:hover { color: var(--p-danger); }

body.is-client .sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--p-border);
    display: grid;
    gap: 10px;
}
.sidebar-wallet {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--p-radius-sm);
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    color: var(--p-text);
}
.sidebar-wallet:hover { border-color: var(--p-primary); color: var(--p-text); }
.sidebar-wallet-ico {
    grid-row: span 2;
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--p-primary-soft); color: var(--p-primary);
}
.sidebar-wallet-ico svg { width: 17px; height: 17px; }
.sidebar-wallet-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--p-muted); }
.sidebar-wallet-amount { font-size: 15px; font-weight: 700; }
.sidebar-referral {
    padding: 14px;
    border-radius: var(--p-radius);
    background: linear-gradient(135deg, var(--p-primary-soft), var(--p-card));
    border: 1px solid var(--p-border);
}
.sidebar-referral-title { display: block; font-weight: 700; font-size: 14px; color: var(--p-text); }
.sidebar-referral-desc { margin: 4px 0 10px; font-size: 12px; color: var(--p-text-2); line-height: 1.45; }
.btn-referral {
    display: inline-block;
    padding: 6px 16px;
    border: 1.5px solid var(--p-primary);
    border-radius: 20px;
    background: var(--p-card);
    color: var(--p-primary) !important;
    font-size: 11.5px; font-weight: 600;
    transition: background .2s, color .2s;
}
.btn-referral:hover { background: var(--p-primary); color: #fff !important; }

/* ---------- Main + top bar ---------- */
body.is-client .client-main { margin-left: var(--sidebar-width); }
body.is-client .client-header {
    height: var(--header-height);
    padding: 0 24px;
    gap: 16px;
    background: var(--p-card) !important;
    border-bottom: 1px solid var(--p-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .03);
}
body.is-client .header-greeting { min-width: 0; }
.topbar-title {
    margin: 0;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--p-text) !important;
    letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.is-client .header-right { gap: 12px; }

.topbar-search {
    position: relative;
    display: flex; align-items: center;
    width: 240px;
}
.topbar-search svg { position: absolute; left: 12px; color: var(--p-muted); pointer-events: none; }
.topbar-search input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--p-border);
    border-radius: 10px;
    background: var(--p-bg);
    color: var(--p-text);
    font-size: 13.5px;
}
.topbar-search input:focus { outline: none; border-color: var(--p-primary); background: var(--p-card); box-shadow: 0 0 0 3px var(--p-primary-soft); }

.quick-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 320px;
    max-height: 380px;
    overflow-y: auto;
    background: var(--p-card, #ffffff);
    border: 1px solid var(--p-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 14px 34px -4px rgba(15, 23, 42, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    z-index: 1050;
    padding: 6px;
}
:root[data-theme="dark"] .quick-search-dropdown {
    background: #111827;
    border-color: #374151;
    box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}
.quick-search-header {
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--p-muted, #94a3b8);
}
.quick-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--p-text, #1e293b);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
:root[data-theme="dark"] .quick-search-item {
    color: #f3f4f6;
}
.quick-search-item:hover, .quick-search-item.is-selected {
    background: var(--p-primary-soft, #eff6ff);
    color: var(--p-primary, #2563eb);
}
:root[data-theme="dark"] .quick-search-item:hover, :root[data-theme="dark"] .quick-search-item.is-selected {
    background: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
}
.quick-search-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--p-bg, #f8fafc);
    color: var(--p-muted, #64748b);
    flex-shrink: 0;
}
:root[data-theme="dark"] .quick-search-icon {
    background: #1f2937;
    color: #9ca3af;
}
.quick-search-item:hover .quick-search-icon, .quick-search-item.is-selected .quick-search-icon {
    background: var(--p-primary, #2563eb);
    color: #ffffff;
}
.quick-search-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quick-search-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--p-bg, #f1f5f9);
    color: var(--p-muted, #64748b);
}
:root[data-theme="dark"] .quick-search-badge {
    background: #1f2937;
    color: #9ca3af;
}
.quick-search-empty {
    padding: 16px;
    text-align: center;
    color: var(--p-muted, #64748b);
    font-size: 13px;
    line-height: 1.4;
}

.topbar-cart {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 6px;
    color: var(--p-text);
}
.topbar-cart:hover { color: var(--p-primary); }
.topbar-cart-ico {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--p-primary-soft); color: var(--p-primary);
}
.topbar-cart-text { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-cart-text strong { font-size: 13px; font-weight: 600; }
.topbar-cart-text small { font-size: 11.5px; color: var(--p-muted); }

body.is-client .icon-btn {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    color: var(--p-text-2);
}
body.is-client .notif-count { background: var(--p-danger); }

body.is-client .header-avatar-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--p-border);
    border-radius: 12px;
    background: var(--p-card);
    cursor: pointer;
    width: auto; height: auto;
}
body.is-client .header-avatar-btn .user-avatar {
    width: 34px !important; height: 34px !important;
    border-radius: 9px !important;
    background: var(--p-primary) !important;
    font-size: 13px;
}
.app-user-meta { display: flex; flex-direction: column; text-align: left; line-height: 1.2; min-width: 0; }
.app-user-name { font-size: 13px; font-weight: 600; color: var(--p-text); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-user-email { font-size: 11.5px; color: var(--p-muted); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-user-id {
    font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 6px;
    background: var(--p-primary-soft); color: var(--p-primary);
}

body.is-client .client-content { padding: 24px; max-width: 1440px; }

/* ---------- Generic cards & buttons on every client page ---------- */
body.is-client .client-card,
body.is-client .data-card {
    background: var(--p-card) !important;
    border: 1px solid var(--p-border) !important;
    border-radius: var(--p-radius) !important;
    box-shadow: var(--p-shadow) !important;
}
body.is-client .btn-primary {
    background: var(--p-primary) !important;
    border-color: var(--p-primary) !important;
    color: #fff !important;
    box-shadow: none;
}
body.is-client .btn-primary:hover { background: var(--p-primary-hover) !important; border-color: var(--p-primary-hover) !important; }

/* ---------- Dashboard ---------- */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.dash-stat {
    position: relative;
    display: flex; flex-direction: column;
    padding: 18px;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow);
    color: var(--p-text);
    transition: border-color .2s, transform .2s;
}
.dash-stat:hover { border-color: var(--p-primary); transform: translateY(-2px); color: var(--p-text); }
.dash-stat-ico {
    position: absolute; top: 16px; right: 16px;
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
}
.dash-stat-ico svg { width: 19px; height: 19px; }
.tone-blue   { background: var(--p-primary-soft); color: var(--p-primary); }
.tone-cyan   { background: #cffafe; color: #0e7490; }
.tone-violet { background: #ede9fe; color: #7c3aed; }
.tone-amber  { background: var(--p-warning-soft); color: var(--p-warning); }
.tone-green  { background: var(--p-success-soft); color: var(--p-success); }
.tone-rose   { background: #ffe4e6; color: #e11d48; }
:root[data-theme="dark"] .tone-cyan   { background: rgba(6, 182, 212, .15); color: #22d3ee; }
:root[data-theme="dark"] .tone-violet { background: rgba(139, 92, 246, .15); color: #a78bfa; }
:root[data-theme="dark"] .tone-rose   { background: rgba(225, 29, 72, .15); color: #fb7185; }
.dash-stat-label {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--p-muted);
    margin-bottom: 6px;
    padding-right: 44px;
}
.dash-stat-value { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--p-text); }
.dash-stat-link { margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--p-primary); }

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}
.dash-col { display: grid; gap: 20px; min-width: 0; }
.dash-card {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow);
    padding: 18px 20px;
    min-width: 0;
}
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dash-card-title { margin: 0; font-size: 16px !important; font-weight: 600 !important; color: var(--p-text) !important; }
.dash-card-action { font-size: 12.5px; font-weight: 600; color: var(--p-primary); white-space: nowrap; }

.dash-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    white-space: nowrap;
}
.dash-badge--active  { background: var(--p-success-soft); color: #15803d; }
.dash-badge--warning { background: var(--p-warning-soft); color: var(--p-warning); }
.dash-badge--danger  { background: var(--p-danger-soft);  color: var(--p-danger); }
.dash-badge--info    { background: var(--p-info-soft);    color: var(--p-info); }
.dash-badge--muted   { background: var(--p-border-soft);  color: var(--p-text-2); }
:root[data-theme="dark"] .dash-badge--active { color: #4ade80; }

.dash-service-list, .dash-row-list { list-style: none; margin: 0; padding: 0; }
.dash-service {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--p-border-soft);
}
.dash-service:first-child { border-top: 0; padding-top: 4px; }
.dash-service-main { display: flex; flex-direction: column; min-width: 0; color: var(--p-text); }
.dash-service-main:hover .dash-service-name { color: var(--p-primary); }
.dash-service-name { font-weight: 600; font-size: 14px; }
.dash-service-name small { font-weight: 500; color: var(--p-muted); }
.dash-service-domain { font-size: 12.5px; color: var(--p-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-service-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.dash-service-renew { font-size: 12px; color: var(--p-muted); }
.dash-service-renew strong { color: var(--p-text-2); font-weight: 600; }
.dash-service-sso { font-size: 12px; font-weight: 600; color: var(--p-primary); }

.dash-row-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--p-border-soft);
}
.dash-row-list li:first-child { border-top: 0; padding-top: 4px; }
.dash-row-list li > a:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--p-text); }
.dash-row-list li > a:first-child:hover strong { color: var(--p-primary); }
.dash-row-list strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-list small { font-size: 12px; color: var(--p-muted); }
.dash-row-amount { font-weight: 700; color: var(--p-warning); white-space: nowrap; }

.dash-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 22px 12px; text-align: center;
    color: var(--p-text-2); font-size: 13px;
}
.dash-empty strong { color: var(--p-text); font-size: 14px; }
.dash-empty .btn { margin-top: 10px; }
.dash-empty--row { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; gap: 4px 10px; padding: 6px 0; }
.dash-empty--row .btn { margin: 0 0 0 auto; }

.dash-account { margin: 0; }
.dash-account-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--p-border-soft);
    font-size: 13px;
}
.dash-account-row:first-child { border-top: 0; padding-top: 0; }
.dash-account-row dt { color: var(--p-muted); font-weight: 500; }
.dash-account-val { margin: 0; color: var(--p-text); font-weight: 600; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.dash-account-val small { font-size: 11.5px; font-weight: 500; color: var(--p-muted); font-family: var(--font-mono, monospace); }

.dash-wallet-balance { font-size: 28px; font-weight: 700; color: var(--p-text); line-height: 1.2; }
.dash-wallet-note { margin: 4px 0 14px; font-size: 12.5px; color: var(--p-muted); }
.btn-block { width: 100%; justify-content: center; }

.dash-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash-quick a {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--p-border);
    border-radius: 10px;
    background: var(--p-bg);
    color: var(--p-text);
    font-size: 12.5px; font-weight: 600; text-align: center;
    transition: border-color .2s, color .2s;
}
.dash-quick a span { font-size: 20px; }
.dash-quick a:hover { border-color: var(--p-primary); color: var(--p-primary); }

/* Add-credit dialog */
.credit-modal {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--p-card);
    color: var(--p-text);
    box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
}
.credit-modal::backdrop { background: rgba(15, 23, 42, .45); }
.credit-modal-body { padding: 22px; display: grid; gap: 12px; }
.credit-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.credit-modal-title { margin: 0; font-size: 18px; font-weight: 700; }
.credit-modal-sub { margin: 2px 0 0; font-size: 13px; color: var(--p-muted); }
.credit-modal-close { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--p-muted); cursor: pointer; }
.credit-modal-label { font-size: 13px; font-weight: 600; }
.credit-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.credit-preset {
    padding: 6px 12px;
    border: 1px solid var(--p-border);
    border-radius: 999px;
    background: var(--p-bg);
    color: var(--p-text);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
}
.credit-preset:hover { border-color: var(--p-primary); color: var(--p-primary); }
.credit-modal-note { margin: 0; font-size: 12px; color: var(--p-muted); }
.credit-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .topbar-cart-text { display: none; }
}
@media (max-width: 1100px) {
    .dash-grid { grid-template-columns: 1fr; }
    .app-user-meta, .app-user-id { display: none; }
    body.is-client .header-avatar-btn { padding: 4px; }
}
@media (max-width: 1024px) {
    body.is-client .client-main { margin-left: 0; }
    .topbar-search { width: 180px; }
}
@media (max-width: 720px) {
    .topbar-search, .topbar-cart { display: none; }
    .topbar-title { font-size: 16px !important; }
    body.is-client .client-header { padding: 0 16px; }
    body.is-client .client-content { padding: 16px; }
    .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .dash-stat { padding: 14px; }
    .dash-stat-value { font-size: 20px; }
    .dash-service { flex-direction: column; align-items: flex-start; gap: 8px; }
    .dash-service-side { justify-content: flex-start; }
}
@media (max-width: 400px) {
    .dash-stats { grid-template-columns: 1fr; }
}

/* ---------- Override the older dark-sidebar / glass-header layers (app.css, theme.css use !important) ---------- */
:root body.is-client .client-sidebar { background: var(--p-card) !important; background-image: none !important; border-right: 1px solid var(--p-border) !important; }
:root body.is-client .client-sidebar .sidebar-brand { border-bottom: 1px solid var(--p-border) !important; }
:root body.is-client .client-sidebar .brand-icon:not(.has-logo) { background: var(--p-primary) !important; border-radius: 10px !important; box-shadow: 0 3px 10px rgba(67, 97, 238, .3) !important; }
:root body.is-client .client-sidebar .brand-name { color: var(--p-text) !important; font-weight: 700 !important; }
:root body.is-client .client-sidebar .nav-group-title { color: var(--p-muted) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; }
:root body.is-client .client-sidebar .nav-item a,
:root body.is-client .client-sidebar .nav-logout-btn { color: var(--p-text-2) !important; padding: 8px 10px !important; border-radius: var(--p-radius-sm) !important; font-weight: 500; }
:root body.is-client .client-sidebar .nav-item a svg,
:root body.is-client .client-sidebar .nav-logout-btn svg { color: var(--p-muted) !important; }
:root body.is-client .client-sidebar .nav-item a:hover,
:root body.is-client .client-sidebar .nav-logout-btn:hover { background: var(--p-bg) !important; color: var(--p-text) !important; }
:root body.is-client .client-sidebar .nav-item a:hover svg { color: var(--p-primary) !important; }
:root body.is-client .client-sidebar .nav-logout-btn:hover,
:root body.is-client .client-sidebar .nav-logout-btn:hover svg { color: var(--p-danger) !important; }
:root body.is-client .client-sidebar .nav-item.active a { background: var(--p-primary-soft) !important; color: var(--p-primary) !important; font-weight: 600; box-shadow: none !important; }
:root body.is-client .client-sidebar .nav-item.active a::before { display: none !important; }
:root body.is-client .client-sidebar .nav-item.active a svg { color: var(--p-primary) !important; }

:root body.is-client .client-header {
    background: var(--p-card) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom: 1px solid var(--p-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .03) !important;
}
:root body.is-client .client-header .icon-btn,
:root body.is-client .client-header .mobile-menu-btn {
    background-color: var(--p-bg) !important;
    border: 1px solid var(--p-border) !important;
    border-radius: 10px !important;
    color: var(--p-text-2) !important;
    box-shadow: none !important;
}
:root body.is-client .client-header .user-avatar { background: var(--p-primary) !important; box-shadow: none !important; }
body.is-client .header-left { flex: 1 1 auto; min-width: 0; }
body.is-client .header-right { flex: 0 0 auto; }
@media (min-width: 1025px) { :root body.is-client .client-header .mobile-menu-btn { display: none !important; } }
@media (max-width: 1440px) { .topbar-cart-text { display: none; } .topbar-search { width: 200px; } }

/* ---------- Sidebar: collapsible groups, coloured links, wallet "+" and referral card ---------- */
:root body.is-client .client-sidebar .nav-group-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--p-radius-sm);
    background: none; cursor: pointer; text-align: left;
    color: var(--p-text-2); font: 500 13.5px/1.3 var(--font-body);
}
:root body.is-client .client-sidebar .nav-group-toggle svg { width: 18px; height: 18px; color: var(--p-muted); flex-shrink: 0; }
:root body.is-client .client-sidebar .nav-group-toggle:hover { background: var(--p-bg); color: var(--p-text); }
:root body.is-client .client-sidebar .nav-group.is-open > .nav-group-toggle { color: var(--p-text); }
.nav-chevron { transition: transform .2s; }
.nav-group.is-open .nav-chevron { transform: rotate(180deg); }
.nav-sub { list-style: none; margin: 2px 0 4px; padding: 0 0 0 38px; position: relative; }
.nav-sub::before { content: ''; position: absolute; left: 19px; top: 4px; bottom: 4px; width: 1px; background: var(--p-border); }
:root body.is-client .client-sidebar .nav-sub .nav-item a { padding: 6px 10px !important; font-size: 13px; }
:root body.is-client .client-sidebar .nav-tone-violet a,
:root body.is-client .client-sidebar .nav-tone-violet a svg { color: #7c3aed !important; font-weight: 600; }
:root body.is-client .client-sidebar .nav-tone-red a,
:root body.is-client .client-sidebar .nav-tone-red a svg { color: #dc2626 !important; font-weight: 600; }

.sidebar-wallet { grid-template-columns: auto 1fr auto; background: #f0fdf4; border-color: #bbf7d0; }
.sidebar-wallet-ico { background: #dcfce7; color: #15803d; }
.sidebar-wallet-add {
    grid-row: span 2; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: #16a34a; color: #fff; font-size: 18px; font-weight: 600; line-height: 1;
    box-shadow: 0 0 0 3px #bbf7d0;
}
:root[data-theme="dark"] .sidebar-wallet { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .3); }
:root[data-theme="dark"] .sidebar-wallet-ico { background: rgba(22, 163, 74, .2); color: #4ade80; }
.sidebar-referral {
    background: linear-gradient(135deg, #4361ee 0%, #7c3aed 100%);
    border: 0; color: #fff;
}
.sidebar-referral-title { color: #fff; }
.sidebar-referral-desc { color: rgba(255, 255, 255, .85); }
.btn-referral { background: #fff; border-color: #fff; color: #4361ee !important; }
.btn-referral:hover { background: rgba(255, 255, 255, .9); color: #4361ee !important; }

/* ---------- Top bar: support PIN chip and keyboard hint ---------- */
.topbar-pin {
    display: flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 12px;
    border: 1px solid #c7d2fe; border-radius: 10px;
    background: var(--p-primary-soft); color: var(--p-text-2);
    font-size: 13px; white-space: nowrap;
}
.topbar-pin svg { color: var(--p-primary); }
.topbar-pin-value { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--p-primary); letter-spacing: .12em; min-width: 6ch; }
.topbar-pin button { border: 0; background: none; padding: 2px; color: var(--p-muted); cursor: pointer; display: grid; }
.topbar-pin button:hover { color: var(--p-primary); }
.topbar-search kbd {
    position: absolute; right: 8px;
    padding: 2px 7px; border: 1px solid var(--p-border); border-radius: 6px;
    background: var(--p-card); color: var(--p-muted);
    font: 600 11px/1.4 var(--font-body);
}
.topbar-search input { padding-right: 56px; }
@media (max-width: 1280px) { .topbar-pin-label { display: none; } }
@media (max-width: 900px) { .topbar-pin { display: none; } }
/* Wallet box: explicit grid placement so the "+" stays on the right */
.sidebar-wallet-ico { grid-column: 1; grid-row: 1 / span 2; }
.sidebar-wallet-label { grid-column: 2; grid-row: 1; }
.sidebar-wallet-amount { grid-column: 2; grid-row: 2; }
.sidebar-wallet-add { grid-column: 3; grid-row: 1 / span 2; }
/* Keep the welcome title readable next to the PIN chip and search */
@media (max-width: 1560px) { .topbar-pin-label { display: none; } .topbar-search { width: 200px; } }

/* ---------- Sidebar scrolls as one column (menu, credits and referral card together) ---------- */
:root body.is-client .client-sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--p-border) transparent;
}
:root body.is-client .client-sidebar .sidebar-brand {
    position: sticky; top: 0; z-index: 2;
    flex-shrink: 0;
}
:root body.is-client .client-sidebar .sidebar-nav { flex: 0 0 auto; min-height: auto; overflow: visible; }
:root body.is-client .client-sidebar .sidebar-footer { flex-shrink: 0; margin-top: auto; }

/* Referral card: live numbers, copyable link, can be hidden */
.sidebar-referral { position: relative; }
.sidebar-referral-close {
    position: absolute; top: 6px; right: 8px;
    border: 0; background: none; cursor: pointer;
    color: rgba(255, 255, 255, .75); font-size: 18px; line-height: 1; padding: 2px 4px;
}
.sidebar-referral-close:hover { color: #fff; }
.sidebar-referral-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.sidebar-referral-stats span {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, .14);
}
.sidebar-referral-stats strong { font-size: 13px; color: #fff; white-space: nowrap; }
.sidebar-referral-stats small { font-size: 10.5px; color: rgba(255, 255, 255, .8); }
.sidebar-referral-link { display: flex; gap: 6px; margin-bottom: 10px; }
.sidebar-referral-link input {
    flex: 1; min-width: 0; height: 30px; padding: 0 8px;
    border: 0; border-radius: 6px; background: rgba(255, 255, 255, .92); color: #1e293b;
    font-size: 11.5px;
}
.sidebar-referral-link button {
    height: 30px; padding: 0 10px; border: 0; border-radius: 6px; cursor: pointer;
    background: #fff; color: #4361ee; font-size: 11.5px; font-weight: 700;
}
.sidebar-referral-link button.is-copied { background: #16a34a; color: #fff; }
.sidebar-referral-reopen {
    border: 1px dashed var(--p-border); border-radius: 8px; background: none; cursor: pointer;
    padding: 8px; color: var(--p-text-2); font: 600 12.5px var(--font-body);
}
.sidebar-referral-reopen:hover { border-color: var(--p-primary); color: var(--p-primary); }

/* ---------- Responsive sidebar ---------- */
@media (min-width: 1025px) and (max-width: 1280px) {
    :root { --sidebar-width: 228px; }
    :root body.is-client .client-sidebar .nav-item a,
    :root body.is-client .client-sidebar .nav-group-toggle { font-size: 13px; padding: 7px 9px !important; }
}
@media (max-width: 1024px) {
    /* Off-canvas drawer on tablets and phones: wider tap targets, full height, smooth slide */
    :root body.is-client .client-sidebar { width: min(300px, 86vw); transition: transform .25s ease; }
    :root body.is-client .client-sidebar .nav-item a,
    :root body.is-client .client-sidebar .nav-group-toggle,
    :root body.is-client .client-sidebar .nav-logout-btn { padding: 11px 12px !important; font-size: 14.5px; }
    :root body.is-client .client-sidebar .nav-sub .nav-item a { padding: 9px 10px !important; }
    :root body.is-client .client-sidebar .sidebar-close-btn { display: inline-flex; }
}
@media (max-height: 720px) and (min-width: 1025px) {
    /* Short laptop screens: tighter menu so more of it fits */
    :root body.is-client .client-sidebar .nav-group-title { padding-top: 10px; }
    :root body.is-client .client-sidebar .nav-item a,
    :root body.is-client .client-sidebar .nav-group-toggle { padding-top: 6px !important; padding-bottom: 6px !important; }
}
@media (prefers-reduced-motion: reduce) {
    :root body.is-client .client-sidebar, .nav-chevron { transition: none; }
}

/* Brand name shown when the uploaded logo file is missing */
.brand-logo-fallback { font: 700 17px var(--font-display, var(--font-body)); color: var(--p-text); white-space: nowrap; }

/* ==========================================================================
   FOUNDATION v2 — shared client-area chrome and components
   One look for every client page (new and legacy markup alike):
   white 12px cards, hairline borders, soft shadows, flat indigo actions,
   Outfit type, no glass blur / gradients / glows. Scoped to body.is-client
   and body.is-guest so admin pages are untouched.
   Specificity: `:root body.is-client .x` (0,3,1) beats the legacy
   `:root .x` (0,2,0) Aurora layer in app.css and the bare rules in
   client/ui/theme.css, so their markup needs no changes.
   Sections: 1 tokens · 2 base · 3 sidebar · 4 icon rail · 5 drawer ·
   6 top bar · 7 menus · 8 banners · 9 page header · 10 cards · 11 KPI ·
   12 tables · 13 buttons · 14 forms · 15 badges · 16 alerts · 17 tabs ·
   18 pagination · 19 empty · 20 modals · 21 tooltip/progress ·
   22 public header/footer · 23 mobile chrome · 24 responsive · 25 dark
   ========================================================================== */

/* ---------- 1. Tokens: extra --p-* roles + legacy tokens re-pointed at them ---------- */
:root, :root[data-theme="light"] {
    --p-text-3: #64748b;
    --p-hover: #f8fafc;
    --p-ring: rgba(67, 97, 238, .16);
    --p-shadow-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .08);
    --p-shadow-pop: 0 4px 12px rgba(15, 23, 42, .06), 0 20px 48px rgba(15, 23, 42, .14);
    --p-violet: #7c3aed; --p-violet-soft: #ede9fe;
    --p-cyan: #0e7490;   --p-cyan-soft: #cffafe;
    --p-success-ink: #15803d;
    --p-rail-width: 76px;
}
:root[data-theme="dark"] {
    --p-text-3: #8a97ab;
    --p-hover: #182235;
    --p-ring: rgba(99, 120, 255, .28);
    --p-shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    --p-shadow-pop: 0 4px 12px rgba(0, 0, 0, .4), 0 24px 56px rgba(0, 0, 0, .55);
    --p-violet: #a78bfa; --p-violet-soft: rgba(139, 92, 246, .16);
    --p-cyan: #22d3ee;   --p-cyan-soft: rgba(6, 182, 212, .15);
    --p-success-ink: #4ade80;
}
body.is-client, body.is-guest {
    /* app.css "UI 2 / Aurora" tokens */
    --u-font: var(--font-body);
    --u-brand: var(--p-primary); --u-brand-2: var(--p-primary); --u-brand-ink: var(--p-primary);
    --u-brand-soft: var(--p-primary-soft); --u-brand-ring: var(--p-ring);
    --u-green: var(--p-success); --u-green-soft: var(--p-success-soft); --u-green-ink: var(--p-success-ink);
    --u-amber: #d97706; --u-amber-soft: var(--p-warning-soft); --u-amber-ink: var(--p-warning);
    --u-red: var(--p-danger); --u-red-soft: var(--p-danger-soft); --u-red-ink: var(--p-danger);
    --u-violet: var(--p-violet); --u-violet-soft: var(--p-violet-soft); --u-violet-ink: var(--p-violet);
    --u-cyan: var(--p-cyan); --u-cyan-soft: var(--p-cyan-soft); --u-cyan-ink: var(--p-cyan);
    --u-slate-soft: var(--p-border-soft); --u-slate-ink: var(--p-text-2);
    --u-ink: var(--p-text); --u-ink-2: var(--p-text-2); --u-ink-3: var(--p-text-3); --u-ink-4: var(--p-muted);
    --u-canvas: var(--p-bg);
    --u-glow-1: transparent; --u-glow-2: transparent; --u-glow-3: transparent;
    --u-glass: var(--p-card); --u-glass-strong: var(--p-card); --u-glass-soft: var(--p-card); --u-solid: var(--p-card);
    --u-sunken: var(--p-bg); --u-line: var(--p-border-soft); --u-line-2: var(--p-border); --u-rim: var(--p-border);
    --u-field: var(--p-card); --u-field-line: var(--p-border); --u-hover: var(--p-hover);
    --u-r-sm: 8px; --u-r-md: 8px; --u-r-lg: var(--p-radius); --u-r-xl: var(--p-radius);
    --u-blur: none;
    --u-e1: none; --u-e2: var(--p-shadow); --u-e3: var(--p-shadow-lg); --u-e4: var(--p-shadow-pop);
    /* tokens.css / theme.css / ui.css tokens */
    --surface: var(--p-card); --surface-2: var(--p-bg); --surface-3: var(--p-border-soft); --surface-glass: var(--p-card); --surface-raised: var(--p-card);
    --bg-card: var(--p-card); --bg-surface: var(--p-card); --bg-elevated: var(--p-card); --bg-glass: var(--p-card); --bg-muted: var(--p-bg); --bg-card-muted: var(--p-bg); --bg-card-hover: var(--p-hover);
    --ink: var(--p-text); --ink-2: var(--p-text-2); --ink-3: var(--p-text-3);
    --text-main: var(--p-text); --text-muted: var(--p-text-3); --text-light: var(--p-muted); --text-subtle: var(--p-muted);
    --line: var(--p-border); --line-soft: var(--p-border-soft); --line-strong: var(--p-border);
    --border-color: var(--p-border); --border-subtle: var(--p-border-soft); --border-focus: var(--p-primary);
    --brand-border: color-mix(in srgb, var(--p-primary) 30%, transparent); --brand-ring: var(--p-ring);
    --shadow-xs: none; --shadow-sm: var(--p-shadow); --shadow-md: var(--p-shadow); --shadow-lg: var(--p-shadow-lg); --shadow-xl: var(--p-shadow-pop);
    --card-shadow-hover: var(--p-shadow-lg); --glow-brand: none; --glow-strong: none; --shadow-glow: none;
    --grad-primary: var(--p-primary); --grad-brand: var(--p-primary); --grad-accent: var(--p-primary); --grad-brand-hover: var(--p-primary-hover);
    --radius-md: 10px; --radius-lg: var(--p-radius); --radius-xl: 16px; --r-md: 10px; --r-lg: var(--p-radius); --r-xl: 16px;
    --overlay: rgba(15, 23, 42, .45);
}

/* ---------- 2. Base ---------- */
:root body.is-client::before, :root body.is-guest::before { display: none !important; }
html:has(> body.is-client), html:has(> body.is-guest) { background: var(--p-bg) !important; }
:root body.is-client, :root body.is-guest { font-family: var(--font-body) !important; font-size: 14px; }
:root body.is-client a:not(.btn), :root body.is-guest a:not(.btn) { text-underline-offset: 2px; }
:root body.is-client :focus-visible, :root body.is-guest :focus-visible { outline: 2px solid var(--p-primary); outline-offset: 2px; }
:root body.is-client ::selection, :root body.is-guest ::selection { background: var(--p-primary-soft); }
:root body.is-client .client-content, :root body.is-guest .client-content { animation: none; }
:root body.is-client .client-main, :root body.is-guest .client-main { min-width: 0; }

/* ---------- 3. Sidebar ---------- */
:root body.is-client .client-sidebar {
    width: var(--sidebar-width);
    background: var(--p-card) !important; background-image: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-right: 1px solid var(--p-border) !important;
    box-shadow: none !important;
    color: var(--p-text-2);
    transition: width .2s ease, transform .25s ease;
}
:root body.is-client .client-sidebar .sidebar-brand {
    height: var(--header-height); padding: 0 16px 0 20px; gap: 8px;
    background: var(--p-card) !important; border-bottom: 1px solid var(--p-border) !important;
}
:root body.is-client .client-sidebar .brand-link { min-width: 0; flex: 1 1 auto; }
:root body.is-client .client-sidebar .brand-icon:not(.has-logo) { width: 34px; height: 34px; box-shadow: 0 2px 8px color-mix(in srgb, var(--p-primary) 30%, transparent) !important; }
:root body.is-client .client-sidebar .brand-rail-mark { display: none; }
:root body.is-client .client-sidebar .sidebar-close-btn {
    width: 36px; height: 36px; flex: 0 0 auto; align-items: center; justify-content: center;
    border: 1px solid var(--p-border) !important; border-radius: 10px;
    background: var(--p-card) !important; color: var(--p-text-2) !important;
}
:root body.is-client .client-sidebar .sidebar-close-btn:hover { color: var(--p-text) !important; background: var(--p-hover) !important; }

:root body.is-client .client-sidebar .sidebar-nav { padding: 12px 0 8px; }
:root body.is-client .client-sidebar .nav-group-title {
    margin: 0; padding: 16px 22px 6px !important;
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase;
    color: var(--p-muted) !important; white-space: nowrap;
}
:root body.is-client .client-sidebar .nav-list { list-style: none; margin: 0; padding: 0; }
:root body.is-client .client-sidebar .nav-item { margin: 1px 0; }
:root body.is-client .client-sidebar .nav-item a,
:root body.is-client .client-sidebar .nav-group-toggle,
:root body.is-client .client-sidebar .nav-logout-btn {
    position: relative;
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px;
    padding: 8px 20px 8px 22px !important; margin: 0;
    border: 0; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    color: var(--p-text-2) !important;
    font: 500 13.5px/1.3 var(--font-body) !important; text-align: left; text-decoration: none;
    cursor: pointer; transform: none !important;
    transition: background-color .15s ease, color .15s ease;
}
:root body.is-client .client-sidebar .nav-link-content { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
:root body.is-client .client-sidebar .nav-link-content > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root body.is-client .client-sidebar .nav-link-content svg,
:root body.is-client .client-sidebar .nav-group-toggle .nav-link-content svg {
    flex: 0 0 18px; width: 18px !important; height: 18px !important; padding: 0 !important;
    color: var(--p-muted) !important; background: none !important; box-shadow: none !important;
    transition: color .15s ease;
}
:root body.is-client .client-sidebar .nav-item a:hover,
:root body.is-client .client-sidebar .nav-group-toggle:hover,
:root body.is-client .client-sidebar .nav-logout-btn:hover { background: var(--p-hover) !important; color: var(--p-text) !important; }
:root body.is-client .client-sidebar .nav-item a:hover svg,
:root body.is-client .client-sidebar .nav-group-toggle:hover svg { color: var(--p-text-2) !important; }
:root body.is-client .client-sidebar .nav-item.active > a {
    background: var(--p-primary-soft) !important; color: var(--p-primary) !important; font-weight: 600 !important;
}
:root body.is-client .client-sidebar .nav-item.active > a svg { color: var(--p-primary) !important; }
/* slim indicator on the active top-level link */
:root body.is-client .client-sidebar .nav-list > .nav-item.active > a::before {
    content: '' !important; display: block !important; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--p-primary) !important; box-shadow: none !important;
}
:root body.is-client .client-sidebar .nav-logout-btn,
:root body.is-client .client-sidebar .nav-logout-btn svg { color: var(--p-danger) !important; }
:root body.is-client .client-sidebar .nav-logout-btn:hover { color: var(--p-danger) !important; background: var(--p-danger-soft) !important; }

/* coloured action links (Write a Review / Report Bug) */
:root body.is-client .client-sidebar .nav-tone-violet > a,
:root body.is-client .client-sidebar .nav-tone-violet > a svg { color: var(--p-violet) !important; font-weight: 500 !important; }
:root body.is-client .client-sidebar .nav-tone-red > a,
:root body.is-client .client-sidebar .nav-tone-red > a svg { color: var(--p-danger) !important; font-weight: 500 !important; }
:root body.is-client .client-sidebar .nav-tone-violet > a:hover { background: var(--p-violet-soft) !important; }
:root body.is-client .client-sidebar .nav-tone-red > a:hover { background: var(--p-danger-soft) !important; }

/* collapsible groups */
:root body.is-client .client-sidebar .nav-group-toggle { justify-content: space-between; }
:root body.is-client .client-sidebar .nav-group.is-open > .nav-group-toggle { color: var(--p-text) !important; }
:root body.is-client .client-sidebar .nav-group.is-open > .nav-group-toggle .nav-link-content svg { color: var(--p-text-2) !important; }
:root body.is-client .client-sidebar .nav-group:has(.nav-sub .nav-item.active) > .nav-group-toggle,
:root body.is-client .client-sidebar .nav-group:has(.nav-sub .nav-item.active) > .nav-group-toggle .nav-link-content svg { color: var(--p-primary) !important; }
:root body.is-client .client-sidebar .nav-chevron {
    flex: 0 0 16px; width: 16px !important; height: 16px !important; color: var(--p-muted) !important;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
:root body.is-client .client-sidebar .nav-group.is-open .nav-chevron { transform: rotate(180deg); }
:root body.is-client .client-sidebar .nav-sub { list-style: none; margin: 0 0 4px; padding: 0 0 0 0; position: relative; }
:root body.is-client .client-sidebar .nav-sub:not([hidden]) { animation: p-sub-in .2s ease; }
@keyframes p-sub-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
:root body.is-client .client-sidebar .nav-sub::before { left: 30px; top: 2px; bottom: 2px; background: var(--p-border); }
:root body.is-client .client-sidebar .nav-sub .nav-item { margin: 1px 0; }
:root body.is-client .client-sidebar .nav-sub .nav-item a { min-height: 34px; padding: 6px 20px 6px 52px !important; font-size: 13px !important; }
:root body.is-client .client-sidebar .nav-sub .nav-item.active > a { background: transparent !important; color: var(--p-primary) !important; }
:root body.is-client .client-sidebar .nav-sub .nav-item.active > a::after {
    content: ''; position: absolute; left: 28px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
    background: var(--p-primary); box-shadow: 0 0 0 3px var(--p-card);
}

/* footer: credits + referral */
:root body.is-client .client-sidebar .sidebar-footer { padding: 12px; gap: 10px; border-top: 1px solid var(--p-border) !important; background: var(--p-card); }
:root body.is-client .sidebar-wallet {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 10px;
    background: #f0fdf4; border: 1px solid #dcfce7;
    color: var(--p-text); text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
:root body.is-client .sidebar-wallet:hover { border-color: color-mix(in srgb, var(--p-success) 45%, var(--p-border)); background: var(--p-card); }
:root body.is-client .sidebar-wallet-ico { width: 20px; height: 20px; border-radius: 0; background: none; color: var(--p-success); flex: 0 0 auto; }
:root body.is-client .sidebar-wallet-ico svg { width: 17px; height: 17px; }
:root body.is-client .sidebar-wallet-label { flex: 1 1 auto; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--p-text-2); }
:root body.is-client .sidebar-wallet-amount { font-size: 13.5px; font-weight: 700; color: var(--p-success); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root body.is-client .sidebar-wallet-add {
    flex: 0 0 22px; width: 22px; height: 22px; font-size: 16px; background: var(--p-success); color: #fff;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--p-success); margin: 0 2px 0 4px; transition: transform .15s ease;
}
:root body.is-client .sidebar-wallet:hover .sidebar-wallet-add { transform: scale(1.08); }
:root body.is-client .sidebar-referral {
    padding: 14px; border-radius: var(--p-radius);
    background: linear-gradient(135deg, #4f5bf0 0%, #7c3aed 100%); border: 0; color: #fff;
}
:root body.is-client .sidebar-referral-title { font-size: 14px; font-weight: 700; color: #fff; padding-right: 18px; }
:root body.is-client .sidebar-referral-desc { margin: 4px 0 12px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
:root body.is-client .sidebar-referral-close { width: 24px; height: 24px; top: 8px; right: 8px; display: grid; place-items: center; border-radius: 6px; }
:root body.is-client .sidebar-referral-close:hover { background: rgba(255, 255, 255, .14); }
:root body.is-client .sidebar-referral-stats span { background: rgba(255, 255, 255, .13); }
:root body.is-client .btn-referral { padding: 6px 16px; border-radius: 999px; border: 0; background: #fff; color: #4f46e5 !important; font-weight: 600; text-decoration: none; }
:root body.is-client .btn-referral:hover { background: rgba(255, 255, 255, .88); }
:root body.is-client .sidebar-referral-reopen { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; }
:root body.is-client .sidebar-referral-reopen[hidden] { display: none; }
:root body.is-client .sidebar-referral-reopen svg { width: 15px; height: 15px; }

/* ---------- 4. Desktop icon rail (html.sb-rail, toggled from the top bar) ---------- */
.rail-toggle { display: none !important; }
@media (min-width: 1025px) {
    :root body.is-client .client-header .rail-toggle { display: inline-flex !important; flex: 0 0 auto; }
    :root.sb-rail .rail-toggle-arrow { transform: rotate(180deg); transform-origin: 14.5px 12px; }
    :root.sb-rail { --sidebar-width: var(--p-rail-width); }
    :root body.is-client .client-main { transition: margin-left .2s ease; }
    :root.sb-rail body.is-client .client-sidebar { overflow-x: hidden; scrollbar-width: none; }
    :root.sb-rail body.is-client .client-sidebar::-webkit-scrollbar { display: none; }
    :root.sb-rail body.is-client .client-sidebar .sidebar-brand { padding: 0; justify-content: center; }
    :root.sb-rail body.is-client .client-sidebar .brand-link { flex: 0 0 auto; justify-content: center; }
    :root.sb-rail body.is-client .client-sidebar .brand-text,
    :root.sb-rail body.is-client .client-sidebar .brand-logo-wide { display: none !important; }
    :root.sb-rail body.is-client .client-sidebar .brand-rail-mark { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; overflow: hidden; }
    :root.sb-rail body.is-client .client-sidebar .brand-rail-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
    :root.sb-rail body.is-client .client-sidebar .nav-group-title {
        height: 1px; margin: 10px 18px !important; padding: 0 !important; overflow: hidden;
        font-size: 0 !important; background: var(--p-border);
    }
    :root.sb-rail body.is-client .client-sidebar .nav-list { padding: 0 12px; }
    :root.sb-rail body.is-client .client-sidebar .nav-item a,
    :root.sb-rail body.is-client .client-sidebar .nav-group-toggle,
    :root.sb-rail body.is-client .client-sidebar .nav-logout-btn { border-radius: 8px !important; }
    :root.sb-rail body.is-client .client-sidebar .nav-list > .nav-item.active > a::before { left: -12px; top: 8px; bottom: 8px; }
    :root.sb-rail body.is-client .client-sidebar .nav-item a,
    :root.sb-rail body.is-client .client-sidebar .nav-group-toggle,
    :root.sb-rail body.is-client .client-sidebar .nav-logout-btn { justify-content: center; padding: 10px !important; min-height: 42px; }
    :root.sb-rail body.is-client .client-sidebar .nav-link-content { flex: 0 0 auto; gap: 0; }
    :root.sb-rail body.is-client .client-sidebar .nav-link-content > span,
    :root.sb-rail body.is-client .client-sidebar .nav-chevron { display: none !important; }
    :root.sb-rail body.is-client .client-sidebar .nav-sub { display: none !important; }
    :root.sb-rail body.is-client .client-sidebar .nav-group:has(.nav-sub .nav-item.active) > .nav-group-toggle { background: var(--p-primary-soft) !important; }
    :root.sb-rail body.is-client .client-sidebar .nav-group-toggle[aria-expanded="true"] { background: var(--p-hover) !important; }
    :root.sb-rail body.is-client .client-sidebar .nav-group > .nav-group-toggle::after {
        content: ''; position: absolute; right: 6px; bottom: 6px; width: 0; height: 0;
        border-left: 4px solid transparent; border-bottom: 4px solid var(--p-muted);
    }
    :root.sb-rail body.is-client .client-sidebar .sidebar-footer { padding: 12px 10px; }
    :root.sb-rail body.is-client .sidebar-wallet { justify-content: center; padding: 8px; }
    :root.sb-rail body.is-client .sidebar-wallet:hover { background: var(--p-success-soft); }
    :root.sb-rail body.is-client .sidebar-wallet > :not(.sidebar-wallet-ico) { display: none; }
    :root.sb-rail body.is-client .sidebar-wallet-ico { width: 24px; height: 24px; }
    :root.sb-rail body.is-client .sidebar-referral,
    :root.sb-rail body.is-client .sidebar-referral-reopen { display: none !important; }
}
/* Floating label / flyout for rail items (created by the layout script) */
.sb-flyout {
    position: fixed; z-index: 400; min-width: 0; max-width: 260px;
    padding: 6px 10px; border-radius: 8px;
    background: #0f172a; color: #fff;
    font: 600 12.5px/1.3 var(--font-body); white-space: nowrap;
    box-shadow: var(--p-shadow-pop); pointer-events: none;
}
.sb-flyout[hidden] { display: none; }
.sb-flyout::before { content: ''; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: inherit; transform: rotate(45deg); }
.sb-flyout.has-links {
    min-width: 200px; padding: 6px; pointer-events: auto;
    background: var(--p-card); color: var(--p-text); border: 1px solid var(--p-border);
}
.sb-flyout.has-links::before { top: 18px; border-left: 1px solid var(--p-border); border-bottom: 1px solid var(--p-border); }
.sb-flyout.has-links .sb-flyout-title { padding: 6px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted); }
.sb-flyout-link { display: block; padding: 8px 10px; border-radius: 6px; color: var(--p-text-2) !important; font-weight: 500; text-decoration: none !important; }
.sb-flyout-link:hover, .sb-flyout-link:focus-visible { background: var(--p-hover); color: var(--p-text) !important; }
.sb-flyout-link.is-active { background: var(--p-primary-soft); color: var(--p-primary) !important; font-weight: 600; }
:root[data-theme="dark"] .sb-flyout:not(.has-links) { background: #e2e8f0; color: #0f172a; }

/* ---------- 5. Off-canvas drawer (≤1024px) ---------- */
@media (max-width: 1024px) {
    :root body.is-client .client-sidebar {
        width: min(300px, 86vw) !important; border-radius: 0 16px 16px 0;
        border-right: 0 !important;
    }
    :root body.is-client .client-sidebar.open { box-shadow: var(--p-shadow-pop) !important; }
    :root body.is-client .client-sidebar .sidebar-brand { padding: 0 14px 0 20px; border-radius: 0 16px 0 0; }
    :root body.is-client .client-sidebar .sidebar-close-btn { display: inline-flex !important; }
    :root body.is-client .client-sidebar .nav-item a,
    :root body.is-client .client-sidebar .nav-group-toggle,
    :root body.is-client .client-sidebar .nav-logout-btn { min-height: 44px; padding: 10px 20px 10px 22px !important; font-size: 14.5px !important; }
    :root body.is-client .client-sidebar .nav-sub .nav-item a { min-height: 40px; padding: 8px 20px 8px 52px !important; font-size: 14px !important; }
    :root body.is-client .sidebar-backdrop { background: rgba(15, 23, 42, .55) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    :root body.is-client .client-sidebar .sidebar-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ---------- 6. Top bar ---------- */
:root body.is-client .client-header {
    position: sticky; top: 0; z-index: 90;
    display: flex; align-items: center; gap: 16px;
    height: var(--header-height); padding: 0 24px;
    background: var(--p-card) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom: 1px solid var(--p-border) !important;
    box-shadow: none !important;
}
:root body.is-client .header-left { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
:root body.is-client .header-right { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
:root body.is-client .topbar-title { font-size: 19px !important; font-weight: 600 !important; }
:root body.is-client .client-header .icon-btn,
:root body.is-client .client-header .mobile-menu-btn {
    position: relative; flex: 0 0 auto;
    width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-card) !important; border: 1px solid var(--p-border) !important; border-radius: 10px !important;
    color: var(--p-text-2) !important; box-shadow: none !important; transform: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
:root body.is-client .client-header .icon-btn:hover,
:root body.is-client .client-header .mobile-menu-btn:hover { background: var(--p-hover) !important; color: var(--p-text) !important; border-color: var(--p-border) !important; }
:root body.is-client .client-header .icon-btn[aria-expanded="true"] { background: var(--p-primary-soft) !important; color: var(--p-primary) !important; border-color: color-mix(in srgb, var(--p-primary) 30%, transparent) !important; }
:root body.is-client .notif-count {
    top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--p-danger) !important; border: 2px solid var(--p-card); color: #fff; font-size: 10px; font-weight: 700;
}
/* support PIN chip */
:root body.is-client .topbar-pin {
    height: 36px; padding: 0 6px 0 12px; gap: 6px;
    border: 1px solid color-mix(in srgb, var(--p-primary) 22%, var(--p-border)); border-radius: 8px;
    background: color-mix(in srgb, var(--p-primary-soft) 55%, var(--p-card)); color: var(--p-text-2); font-size: 12.5px;
}
:root body.is-client .topbar-pin svg { color: var(--p-primary); flex: 0 0 auto; }
:root body.is-client .topbar-pin-label { display: inline !important; font-weight: 500; color: var(--p-text-2); }
:root body.is-client .topbar-pin-value { font-size: 13px; color: var(--p-primary); letter-spacing: .14em; }
:root body.is-client .topbar-pin button { width: 28px; height: 28px; place-items: center; border-radius: 7px; }
:root body.is-client .topbar-pin button:hover { background: var(--p-hover); }
:root body.is-client .topbar-pin button[aria-pressed="true"] { color: var(--p-primary); }
/* search */
:root body.is-client .topbar-search { width: 260px; flex: 0 1 260px; min-width: 160px; }
:root body.is-client .topbar-search input {
    height: 40px; min-height: 40px !important; padding: 0 58px 0 36px !important;
    background: var(--p-bg) !important; border: 1px solid var(--p-border) !important; border-radius: 999px !important;
    color: var(--p-text) !important; font-size: 13.5px !important; box-shadow: none !important;
}
:root body.is-client .topbar-search input::placeholder { color: var(--p-muted); }
:root body.is-client .topbar-search input:focus { background: var(--p-card) !important; border-color: var(--p-primary) !important; box-shadow: 0 0 0 3px var(--p-ring) !important; }
:root body.is-client .topbar-search input::-webkit-search-cancel-button { display: none; }
:root body.is-client .topbar-search kbd { right: 10px; border-radius: 999px !important; padding: 1px 6px; font-size: 10.5px; border-radius: 5px; background: var(--p-card); color: var(--p-text-3); border-color: var(--p-border); pointer-events: none; }
/* order button */
:root body.is-client .topbar-cart { gap: 10px; padding: 0; border-radius: 10px; text-decoration: none; flex: 0 0 auto; }
:root body.is-client .topbar-cart-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--p-card); border: 1px solid var(--p-border); color: var(--p-text-2); transition: background-color .15s ease, color .15s ease; }
:root body.is-client .topbar-cart:hover .topbar-cart-ico { background: var(--p-hover); color: var(--p-primary); }
/* account chip */
:root body.is-client .header-avatar-btn {
    height: 44px; padding: 3px 10px 3px 3px; gap: 10px;
    border: 1px solid var(--p-border) !important; border-radius: 12px; background: var(--p-card) !important;
    box-shadow: none !important; transition: background-color .15s ease, border-color .15s ease;
}
:root body.is-client .header-avatar-btn:hover, :root body.is-client .header-avatar-btn[aria-expanded="true"] { background: var(--p-hover) !important; }
:root body.is-client .header-avatar-btn .user-avatar,
:root body.is-client .client-header .user-avatar {
    width: 36px !important; height: 36px !important; flex: 0 0 36px; border-radius: 9px !important;
    display: grid; place-items: center; overflow: hidden;
    background: var(--p-primary) !important; color: #fff !important; box-shadow: none !important;
    font-size: 13px; font-weight: 600;
}
:root body.is-client .client-header .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
:root body.is-client .app-user-name { font-size: 13px; }
:root body.is-client .app-user-email { font-size: 11.5px; color: var(--p-text-3); }
:root body.is-client .app-user-id { border-radius: 6px; font-size: 10.5px; letter-spacing: .02em; }
:root body.is-client .app-user-id { white-space: nowrap; }
@media (max-width: 1599px) { :root body.is-client .app-user-id { display: none; } }
:root body.is-client .app-user-chevron { flex: 0 0 auto; color: var(--p-muted); transition: transform .2s ease; }
:root body.is-client .header-avatar-btn[aria-expanded="true"] .app-user-chevron { transform: rotate(180deg); }
:root body.is-client .header-avatar-btn .user-avatar { border-radius: 50% !important; }
:root body.is-client .header-btn-whatsapp { height: 40px; min-height: 40px; padding: 0 12px; border-radius: 10px !important; background: #16a34a !important; border: 0 !important; box-shadow: none !important; }

/* ---------- 7. Dropdown menus & notifications ---------- */
:root body.is-client :is(.header-menu, .topbar-menu, .notif-menu, .dropdown-menu) {
    background: var(--p-card) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid var(--p-border) !important; border-radius: var(--p-radius) !important;
    box-shadow: var(--p-shadow-pop) !important; padding: 6px !important; color: var(--p-text);
}
:root body.is-client .header-menu { top: calc(100% + 8px); min-width: 240px; animation: p-pop .16s ease; }
@keyframes p-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
:root body.is-client :is(.header-menu-title, .topbar-menu-title) { padding: 8px 10px 6px; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .07em !important; color: var(--p-muted) !important; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root body.is-client :is(.header-menu-item, .topbar-menu-item, .dropdown-item) {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px !important;
    color: var(--p-text-2) !important; font-size: 13px; font-weight: 500; text-decoration: none;
}
:root body.is-client :is(.header-menu-item, .topbar-menu-item, .dropdown-item):hover { background: var(--p-hover) !important; color: var(--p-text) !important; }
:root body.is-client .header-menu-item.danger { color: var(--p-danger) !important; }
:root body.is-client .header-menu-item.danger:hover { background: var(--p-danger-soft) !important; }
:root body.is-client .header-menu .menu-ico { width: 30px; height: 30px; border-radius: 8px !important; font-size: 14px; }
:root body.is-client .header-menu .menu-ico svg { width: 16px; height: 16px; }
:root body.is-client .ico-violet { background: var(--p-violet-soft); color: var(--p-violet); }
:root body.is-client .ico-blue { background: var(--p-primary-soft); color: var(--p-primary); }
:root body.is-client .ico-green { background: var(--p-success-soft); color: var(--p-success-ink); }
:root body.is-client .ico-red { background: var(--p-danger-soft); color: var(--p-danger); }
:root body.is-client .ico-amber { background: var(--p-warning-soft); color: var(--p-warning); }
:root body.is-client .notif-menu { width: min(380px, calc(100vw - 24px)); padding: 0 !important; overflow: hidden; }
:root body.is-client .notif-menu-head { padding: 12px 16px; border-bottom: 1px solid var(--p-border); }
:root body.is-client .notif-menu-head strong { font-size: 14px; font-weight: 600; color: var(--p-text); }
:root body.is-client .notif-mark { color: var(--p-primary); font-weight: 600; }
:root body.is-client .notif-item { gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--p-border-soft); color: var(--p-text) !important; }
:root body.is-client .notif-item:hover { background: var(--p-hover); }
:root body.is-client .notif-item.is-unread { background: color-mix(in srgb, var(--p-primary-soft) 60%, var(--p-card)); }
:root body.is-client .notif-item.is-unread .notif-text strong::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--p-primary); vertical-align: middle; }
:root body.is-client .notif-ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; display: grid; place-items: center; background: var(--p-bg); }
:root body.is-client .notif-ico svg { width: 16px; height: 16px; }
:root body.is-client .notif-text strong { font-weight: 600; }
:root body.is-client .notif-text small { color: var(--p-text-2); }
:root body.is-client .notif-text time { color: var(--p-muted); }
:root body.is-client .notif-empty { color: var(--p-text-3); padding: 28px 16px; }
:root body.is-client .notif-all { display: block; padding: 11px 16px; text-align: center; font-size: 13px; font-weight: 600; color: var(--p-primary); background: var(--p-card); text-decoration: none; }
:root body.is-client .notif-all:hover { background: var(--p-hover); }

/* ---------- 8. Impersonation / verify-email banners ---------- */
:root body.is-client .impersonation-bar {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 20px; font-size: 13px; font-weight: 500; text-align: center;
    background: #fffbeb !important; color: #92400e !important; border-bottom: 1px solid #fde68a;
}
:root body.is-client .impersonation-bar.verify-banner-bar { background: var(--p-primary-soft) !important; color: var(--p-primary) !important; border-bottom-color: color-mix(in srgb, var(--p-primary) 22%, transparent); }
:root body.is-client .impersonation-bar svg { width: 16px; height: 16px; vertical-align: -3px; }
:root body.is-client .impersonation-bar button {
    min-height: 28px !important; padding: 0 10px !important; border-radius: 7px !important;
    border: 1px solid currentColor !important; background: transparent !important; color: inherit !important;
    font: 600 12.5px var(--font-body) !important; text-decoration: none !important; cursor: pointer;
}
:root body.is-client .impersonation-bar button:hover { background: rgba(255, 255, 255, .6) !important; }
:root[data-theme="dark"] body.is-client .impersonation-bar:not(.verify-banner-bar) { background: rgba(245, 158, 11, .12) !important; color: #fbbf24 !important; border-bottom-color: rgba(245, 158, 11, .25); }
:root[data-theme="dark"] body.is-client .impersonation-bar button:hover { background: rgba(255, 255, 255, .06) !important; }

/* ---------- 9. Page headers & breadcrumbs ---------- */
:root body:is(.is-client, .is-guest) :is(.client-page-header, .page-header) {
    display: flex; align-items: flex-start !important; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
    margin: 0 0 22px !important; padding: 0 !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
}
:root body:is(.is-client, .is-guest) :is(.client-page-header, .page-header)::before,
:root body:is(.is-client, .is-guest) :is(.client-page-header, .page-header)::after { display: none !important; }
:root body:is(.is-client, .is-guest) :is(.client-page-title, .page-title, .page-header h1, .client-page-header h1) {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 !important; font-family: var(--font-display) !important;
    font-size: 24px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -.01em !important;
    color: var(--p-text) !important; background: none !important; -webkit-text-fill-color: currentColor;
}
:root body:is(.is-client, .is-guest) :is(.client-page-title, .page-title) > svg { width: 26px; height: 26px; color: var(--p-primary); flex: 0 0 auto; }
:root body:is(.is-client, .is-guest) :is(.client-page-desc, .page-subtitle, .page-header p, .client-page-header > div > p) {
    margin: 6px 0 0 !important; font-size: 13.5px !important; line-height: 1.5; color: var(--p-text-2) !important; max-width: 72ch;
}
:root body:is(.is-client, .is-guest) :is(.client-page-header, .page-header) :is(.header-actions, .header-btns) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root body:is(.is-client, .is-guest) .page-header .header-title-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
:root body:is(.is-client, .is-guest) .breadcrumb-trail,
:root body:is(.is-client, .is-guest) :is(.breadcrumb, .breadcrumbs) {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: 0 0 8px !important; padding: 0; background: none; list-style: none;
    font-size: 12.5px; color: var(--p-text-3);
}
:root body:is(.is-client, .is-guest) :is(.breadcrumb-trail, .breadcrumb, .breadcrumbs) a { color: var(--p-text-2) !important; font-weight: 500; text-decoration: none; }
:root body:is(.is-client, .is-guest) :is(.breadcrumb-trail, .breadcrumb, .breadcrumbs) a:hover { color: var(--p-primary) !important; }
:root body:is(.is-client, .is-guest) .breadcrumb-separator { color: var(--p-muted); }
:root body:is(.is-client, .is-guest) .back-link {
    display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;
    font-size: 12.5px; font-weight: 500; color: var(--p-text-2) !important; text-decoration: none;
}
:root body:is(.is-client, .is-guest) .back-link:hover { color: var(--p-primary) !important; }

/* ---------- 10. Cards ---------- */
:root body:is(.is-client, .is-guest) :is(.client-card, .data-card, .chart-card, .form-card, .guh-card, .client-empty-card, .filter-bar-card, .whmcs-action-card, .whmcs-section-panel, .checkout-summary, .checkout-main, .news-card, .plan-card, .srv-card, .modal-card) {
    background: var(--p-card) !important; background-image: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid var(--p-border) !important; border-radius: var(--p-radius) !important;
    box-shadow: var(--p-shadow) !important; color: var(--p-text);
}
:root body:is(.is-client, .is-guest) :is(.client-card, .data-card, .chart-card, .form-card):hover { transform: none; }
:root body:is(.is-client, .is-guest) :is(.client-card, .data-card, .chart-card, .form-card)::before,
:root body:is(.is-client, .is-guest) :is(.client-card, .data-card)::after { display: none !important; }
:root body:is(.is-client, .is-guest) :is(.client-card, .data-card) :is(.client-card, .data-card, .srv-card, .form-card) {
    background: var(--p-card) !important; box-shadow: none !important; border-radius: 10px !important;
}
:root body:is(.is-client, .is-guest) :is(.card-head, .client-card-header, .chart-header, .guh-card-header) {
    display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap;
    min-height: 0 !important; padding: 16px 20px !important;
    background: transparent !important; border-bottom: 1px solid var(--p-border-soft) !important; border-radius: 0 !important; box-shadow: none !important;
}
:root body:is(.is-client, .is-guest) :is(.card-head h2, .card-head h3, .card-head .card-title, .client-card-title, .chart-header h3, .guh-card-title, .client-card-header h2, .client-card-header h3) {
    display: flex; align-items: center; gap: 8px;
    margin: 0 !important; font-family: var(--font-display) !important;
    font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.35 !important;
    color: var(--p-text) !important;
}
:root body:is(.is-client, .is-guest) :is(.card-head, .client-card-header) :is(p, small, .muted) { font-size: 12.5px !important; color: var(--p-text-3) !important; margin: 2px 0 0 !important; font-weight: 400; }
:root body:is(.is-client, .is-guest) :is(.card-body, .client-card-body) { padding: 20px !important; }
:root body:is(.is-client, .is-guest) :is(.card-footer, .client-card-footer) {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    padding: 14px 20px; border-top: 1px solid var(--p-border-soft); background: transparent !important;
}
:root body:is(.is-client, .is-guest) .dash-card { border-radius: var(--p-radius); }

/* ---------- 11. KPI / stat cards ---------- */
:root body.is-client :is(.client-kpi-grid, .kpi-grid) { gap: 16px !important; margin-bottom: 20px !important; }
:root body.is-client :is(.client-kpi-card, .kpi-card) {
    gap: 4px; padding: 18px !important;
    background: var(--p-card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid var(--p-border) !important; border-radius: var(--p-radius) !important;
    box-shadow: var(--p-shadow) !important; color: var(--p-text) !important;
    transition: border-color .2s ease, transform .2s ease !important;
}
:root body.is-client :is(.client-kpi-card, .kpi-card)::before,
:root body.is-client :is(.client-kpi-card, .kpi-card)::after { display: none !important; content: none !important; }
:root body.is-client :is(.client-kpi-card, .kpi-card):hover { transform: none; border-color: color-mix(in srgb, var(--p-primary) 35%, var(--p-border)) !important; box-shadow: var(--p-shadow) !important; }
:root body.is-client :is(.client-kpi-card, .kpi-card) .kpi-label {
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important;
    color: var(--p-muted) !important; font-family: var(--font-body) !important;
}
:root body.is-client :is(.client-kpi-card, .kpi-card) :is(.kpi-icon.kpi-icon, .kpi-icon-pill.kpi-icon-pill) {
    width: 38px !important; height: 38px !important; border-radius: 10px !important;
    background: var(--k-soft, var(--p-primary-soft)) !important; color: var(--k-ink, var(--p-primary)) !important; box-shadow: none !important;
}
:root body.is-client :is(.client-kpi-card, .kpi-card) :is(.kpi-icon, .kpi-icon-pill) svg { width: 19px !important; height: 19px !important; color: currentColor !important; stroke: currentColor !important; }
:root body.is-client :is(.client-kpi-card, .kpi-card) .kpi-val {
    margin: 4px 0 0 !important; font-family: var(--font-display) !important;
    font-size: 26px !important; font-weight: 600 !important; letter-spacing: -.01em !important; line-height: 1.2 !important; color: var(--p-text) !important;
}
:root body.is-client :is(.client-kpi-card, .kpi-card) :is(.kpi-sub, .kpi-meta) { font-size: 12.5px !important; color: var(--p-text-3) !important; }
:root body.is-client .client-kpi-card .kpi-trend { border-top-color: var(--p-border-soft); font-weight: 600; }
:root body.is-client .client-kpi-card .kpi-trend, :root body.is-client .client-kpi-card .kpi-trend a { color: var(--p-primary) !important; }

/* ---------- 12. Tables ---------- */
:root body:is(.is-client, .is-guest) :is(.table-responsive, .table-scroll, .table-wrap) {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0;
    scrollbar-width: thin; scrollbar-color: var(--p-border) transparent;
}
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table, .mini-table, table.table, .guh-table) {
    width: 100%; border-collapse: separate !important; border-spacing: 0;
    background: transparent !important; font-size: 13.5px; color: var(--p-text);
}
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table, .mini-table, table.table, .guh-table) th {
    padding: 14px 16px !important; text-align: left; white-space: nowrap;
    background: var(--p-card) !important; color: var(--p-text-3) !important;
    font-family: var(--font-body) !important; font-size: 11.5px !important; font-weight: 600 !important;
    letter-spacing: .06em !important; text-transform: uppercase !important;
    border-bottom: 1px solid var(--p-border) !important; border-top: 0 !important;
}
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table, .mini-table, table.table, .guh-table) td {
    padding: 16px !important; vertical-align: middle;
    background: transparent !important; color: var(--p-text);
    border-bottom: 1px solid var(--p-border-soft) !important; border-top: 0 !important;
}
:root body:is(.is-client, .is-guest) .mini-table :is(th, td) { padding: 9px 12px !important; }
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table, .mini-table, table.table) tbody tr:last-child td { border-bottom: 0 !important; }
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table, table.table, .guh-table) tbody tr:hover td { background: var(--p-hover) !important; }
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table, .mini-table) td strong { color: var(--p-text); font-weight: 600; }
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table, .mini-table) td a:not(.btn):not(.badge) { color: var(--p-primary); font-weight: 600; }
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table) td .empty-state { padding: 36px 16px !important; }
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table) td[colspan] { text-align: center; color: var(--p-text-3); }
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table) :is(td, th):first-child { padding-left: 20px !important; }
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table) :is(td, th):last-child { padding-right: 20px !important; }
:root body:is(.is-client, .is-guest) :is(.client-table, .data-table) code { font-size: 12.5px; color: var(--p-text-2); background: var(--p-bg); padding: 2px 6px; border-radius: 5px; }

/* ---------- 13. Buttons ---------- */
:root body:is(.is-client, .is-guest) .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px !important; padding: 0 16px !important;
    border: 1px solid transparent !important; border-radius: var(--p-radius-sm) !important;
    font-family: var(--font-body) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2 !important;
    background-image: none !important; box-shadow: none !important; text-shadow: none !important;
    transform: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}
:root body:is(.is-client, .is-guest) .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--p-ring) !important; }
:root body:is(.is-client, .is-guest) .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
:root body:is(.is-client, .is-guest) .btn-sm { min-height: 32px !important; padding: 0 12px !important; font-size: 12.5px !important; border-radius: 7px !important; }
:root body:is(.is-client, .is-guest) .btn-xs { min-height: 26px !important; padding: 0 9px !important; font-size: 11.5px !important; border-radius: 6px !important; }
:root body:is(.is-client, .is-guest) .btn-lg { min-height: 46px !important; padding: 0 22px !important; font-size: 15px !important; border-radius: 10px !important; }
:root body:is(.is-client, .is-guest) .btn-block { display: flex; width: 100%; }
:root body:is(.is-client, .is-guest) :is(.btn-primary, .btn-primary:focus, .guh-btn-primary) {
    background: var(--p-primary) !important; border-color: var(--p-primary) !important; color: #fff !important;
}
:root body:is(.is-client, .is-guest) :is(.btn-primary, .guh-btn-primary):hover { background: var(--p-primary-hover) !important; border-color: var(--p-primary-hover) !important; color: #fff !important; }
:root body:is(.is-client, .is-guest) :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default, .guh-btn-secondary) {
    background: var(--p-card) !important; border-color: var(--p-border) !important; color: var(--p-text) !important;
}
:root body:is(.is-client, .is-guest) :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default, .guh-btn-secondary):hover {
    background: var(--p-hover) !important; border-color: color-mix(in srgb, var(--p-primary) 40%, var(--p-border)) !important; color: var(--p-primary) !important;
}
:root body:is(.is-client, .is-guest) .btn-success { background: var(--p-success) !important; border-color: var(--p-success) !important; color: #fff !important; }
:root body:is(.is-client, .is-guest) .btn-success:hover { background: #15803d !important; border-color: #15803d !important; }
:root body:is(.is-client, .is-guest) .btn-danger { background: var(--p-danger) !important; border-color: var(--p-danger) !important; color: #fff !important; }
:root body:is(.is-client, .is-guest) .btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
:root body:is(.is-client, .is-guest) .btn-warning { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
:root body:is(.is-client, .is-guest) :is(.btn-ghost, .btn-link) { background: transparent !important; border-color: transparent !important; color: var(--p-primary) !important; }
:root body:is(.is-client, .is-guest) .btn-ghost:hover { background: var(--p-primary-soft) !important; }
:root body:is(.is-client, .is-guest) .btn-ghost-danger { background: var(--p-card) !important; border-color: color-mix(in srgb, var(--p-danger) 35%, var(--p-border)) !important; color: var(--p-danger) !important; }
:root body:is(.is-client, .is-guest) .btn-ghost-danger:hover { background: var(--p-danger-soft) !important; border-color: var(--p-danger) !important; color: var(--p-danger) !important; }
:root body:is(.is-client, .is-guest) :is(.btn:disabled, .btn.disabled, .btn[aria-disabled="true"]) { opacity: .5 !important; cursor: not-allowed; }
:root body:is(.is-client, .is-guest) .btn-cpanel { background: #ea580c !important; border-color: #ea580c !important; color: #fff !important; }
:root body:is(.is-client, .is-guest) .btn-whatsapp { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
:root body:is(.is-client, .is-guest) .btn-icon { width: 38px; padding: 0 !important; }
:root body:is(.is-client, .is-guest) .btn-sm.btn-icon { width: 32px; }

/* ---------- 14. Forms ---------- */
:root body:is(.is-client, .is-guest) .form-group { margin-bottom: 16px; }
:root body:is(.is-client, .is-guest) :is(.form-label, label.form-label) {
    display: block; margin: 0 0 6px !important;
    font-size: 13px !important; font-weight: 500 !important; color: var(--p-text) !important; letter-spacing: 0 !important;
}
:root body:is(.is-client, .is-guest) :is(.req, .form-label .req) { color: var(--p-danger) !important; }
:root body:is(.is-client, .is-guest) :is(.form-help, .form-text, .help-text) { display: block; margin-top: 6px; font-size: 12.5px !important; color: var(--p-text-3) !important; line-height: 1.5; }
:root body:is(.is-client, .is-guest) :is(.form-control, .filter-select) {
    min-height: 40px !important; padding-top: 9px !important; padding-bottom: 9px !important;
    font-family: var(--font-body) !important; font-size: 14px !important; line-height: 1.4 !important;
    color: var(--p-text) !important; background-color: var(--p-card) !important;
    border: 1px solid var(--p-border) !important; border-radius: var(--p-radius-sm) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
:root body:is(.is-client, .is-guest) :is(.form-control, .filter-select)::placeholder { color: var(--p-muted) !important; }
:root body:is(.is-client, .is-guest) :is(.form-control, .filter-select):hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--p-text-3) 45%, var(--p-border)) !important; }
:root body:is(.is-client, .is-guest) :is(.form-control, .filter-select):focus {
    outline: none !important; border-color: var(--p-primary) !important; background-color: var(--p-card) !important;
    box-shadow: 0 0 0 3px var(--p-ring) !important;
}
:root body:is(.is-client, .is-guest) :is(.form-control:disabled, .form-control[readonly]) { background-color: var(--p-bg) !important; color: var(--p-text-3) !important; }
:root body:is(.is-client, .is-guest) textarea.form-control { min-height: 96px !important; }
:root body:is(.is-client, .is-guest) :is(.form-control.is-invalid, .has-error .form-control, .form-control[aria-invalid="true"]) {
    border-color: var(--p-danger) !important; box-shadow: 0 0 0 3px var(--p-danger-soft) !important;
}
:root body:is(.is-client, .is-guest) :is(.invalid-feedback, .form-error, .field-error, .error-text) { display: block; margin-top: 6px; font-size: 12.5px; color: var(--p-danger); }
:root body:is(.is-client, .is-guest) .error-list { margin: 6px 0 0; padding-left: 18px; }
:root body:is(.is-client, .is-guest) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--p-primary); }
/* input groups (prefix/suffix + field) */
:root body:is(.is-client, .is-guest) .input-group { display: flex; align-items: stretch; width: 100%; }
:root body:is(.is-client, .is-guest) .input-group > .form-control { flex: 1 1 auto; min-width: 0; }
:root body:is(.is-client, .is-guest) .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; }
:root body:is(.is-client, .is-guest) .input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
:root body:is(.is-client, .is-guest) :is(.input-group-text, .input-group-addon) {
    display: inline-flex; align-items: center; padding: 0 12px; white-space: nowrap;
    background: var(--p-bg); border: 1px solid var(--p-border); border-radius: var(--p-radius-sm);
    color: var(--p-text-2); font-size: 13.5px;
}
:root body:is(.is-client, .is-guest) .input-group > .btn { min-height: 40px !important; }
/* toggles (Ui::toggle) */
:root body:is(.is-client, .is-guest) .switch .slider { background: var(--p-border) !important; box-shadow: none !important; }
:root body:is(.is-client, .is-guest) .switch .slider::before { box-shadow: 0 1px 2px rgba(15, 23, 42, .2) !important; }
:root body:is(.is-client, .is-guest) .switch input:checked + .slider { background: var(--p-primary) !important; }
:root body:is(.is-client, .is-guest) .switch input:focus-visible + .slider { box-shadow: 0 0 0 3px var(--p-ring) !important; }
:root body:is(.is-client, .is-guest) .switch-row strong { font-weight: 600; color: var(--p-text); }
:root body:is(.is-client, .is-guest) .switch-row small { color: var(--p-text-3); }

/* ---------- 15. Badges & status pills ---------- */
:root body:is(.is-client, .is-guest) :is(.status-badge, .badge) {
    --b: var(--p-text-2); --b-soft: var(--p-border-soft);
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 3px 10px !important; border-radius: 999px !important; border: 0 !important;
    background: var(--b-soft) !important; color: var(--b) !important;
    font-family: var(--font-body) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.6 !important;
    letter-spacing: .04em !important; text-transform: uppercase !important; box-shadow: none !important; white-space: nowrap;
}
:root body:is(.is-client, .is-guest) .status-badge::before { display: none !important; }
:root body.is-client .dash-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
:root body:is(.is-client, .is-guest) :is(.status-badge, .badge):is(.badge-active, .badge-success, .badge-paid, .badge-verified, .badge-green, .badge-yes, .badge-completed, .badge-online, .badge-open, .badge-approved, .badge-delivered, .badge-resolved) { --b: var(--p-success-ink); --b-soft: var(--p-success-soft); }
:root body:is(.is-client, .is-guest) :is(.status-badge, .badge):is(.badge-pending, .badge-warning, .badge-unpaid, .badge-under-review, .badge-amber, .badge-draft, .badge-in-progress, .badge-on-hold, .badge-customer-reply, .badge-expiring) { --b: var(--p-warning); --b-soft: var(--p-warning-soft); }
:root body:is(.is-client, .is-guest) :is(.status-badge, .badge):is(.badge-danger, .badge-failed, .badge-critical, .badge-overdue, .badge-suspended, .badge-rejected, .badge-terminated, .badge-fraud, .badge-red, .badge-expired, .badge-high, .badge-urgent) { --b: var(--p-danger); --b-soft: var(--p-danger-soft); }
:root body:is(.is-client, .is-guest) :is(.status-badge, .badge):is(.badge-info, .badge-blue, .badge-primary, .badge-answered, .badge-medium) { --b: var(--p-primary); --b-soft: var(--p-primary-soft); }
:root body:is(.is-client, .is-guest) :is(.status-badge, .badge):is(.badge-vip, .badge-enterprise, .badge-reseller, .badge-agency, .badge-purple) { --b: var(--p-violet); --b-soft: var(--p-violet-soft); }
:root body:is(.is-client, .is-guest) :is(.status-badge, .badge):is(.badge-secondary, .badge-cancelled, .badge-closed, .badge-refunded, .badge-muted, .badge-low, .badge-inactive) { --b: var(--p-text-2); --b-soft: var(--p-border-soft); }

/* ---------- 16. Alerts & flash messages ---------- */
:root body:is(.is-client, .is-guest) .alert {
    --a: var(--p-primary); --a-soft: var(--p-primary-soft); --a-ink: var(--p-primary);
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 16px; padding: 12px 16px !important;
    background: var(--a-soft) !important; color: var(--p-text) !important;
    border: 1px solid color-mix(in srgb, var(--a) 22%, transparent) !important; border-left-width: 1px !important;
    border-radius: 10px !important; box-shadow: none !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-size: 13.5px !important; line-height: 1.5;
}
:root body:is(.is-client, .is-guest) .alert > svg:first-child { float: none; margin: 1px 0 0; width: 18px; height: 18px; color: var(--a-ink); flex: 0 0 auto; }
:root body:is(.is-client, .is-guest) .alert::after { display: none; }
:root body:is(.is-client, .is-guest) .alert > :is(span, div) { flex: 1 1 auto; min-width: 0; }
:root body:is(.is-client, .is-guest) .alert strong { color: var(--a-ink); font-weight: 600; }
:root body:is(.is-client, .is-guest) .alert a:not(.btn) { color: var(--a-ink); font-weight: 600; text-decoration: underline; }
:root body:is(.is-client, .is-guest) .alert-success { --a: var(--p-success); --a-soft: var(--p-success-soft); --a-ink: var(--p-success-ink); }
:root body:is(.is-client, .is-guest) .alert-warning { --a: #d97706; --a-soft: var(--p-warning-soft); --a-ink: var(--p-warning); }
:root body:is(.is-client, .is-guest) :is(.alert-danger, .alert-error) { --a: var(--p-danger); --a-soft: var(--p-danger-soft); --a-ink: var(--p-danger); }
:root body:is(.is-client, .is-guest) .alert-info { --a: var(--p-info); --a-soft: var(--p-info-soft); --a-ink: var(--p-info); }
:root body.is-client .client-content > .alert:first-child { margin-bottom: 18px; }
:root body.is-client .client-flash-bar { background: var(--p-card) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--p-border) !important; border-radius: var(--p-radius) !important; box-shadow: var(--p-shadow) !important; }

/* ---------- 17. Tabs & segmented controls ---------- */
:root body:is(.is-client, .is-guest) :is(.seg-tabs, .group-tabs, .guh-nav-tabs, .pay-tabs, .seg-control, .segmented) {
    display: inline-flex !important; flex-wrap: wrap; gap: 2px; padding: 3px !important;
    background: var(--p-bg) !important; border: 1px solid var(--p-border) !important; border-radius: 10px !important; box-shadow: none !important;
}
:root body:is(.is-client, .is-guest) :is(.seg-tabs, .group-tabs, .seg-control, .segmented) :is(a, button),
:root body:is(.is-client, .is-guest) :is(.guh-tab-btn, .pay-tab) {
    min-height: 32px; padding: 0 14px !important; border-radius: 7px !important;
    font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 500 !important;
    color: var(--p-text-2) !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
:root body:is(.is-client, .is-guest) :is(.seg-tabs, .group-tabs, .seg-control, .segmented) :is(a, button):hover,
:root body:is(.is-client, .is-guest) :is(.guh-tab-btn, .pay-tab):hover { color: var(--p-text) !important; }
:root body:is(.is-client, .is-guest) :is(.seg-tabs, .group-tabs, .seg-control, .segmented) :is(a, button):is(.active, .is-active, [aria-selected="true"], [aria-current="page"]),
:root body:is(.is-client, .is-guest) :is(.guh-tab-btn.active, .pay-tab.is-active) {
    background: var(--p-card) !important; color: var(--p-primary) !important; font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}
/* underline tabs */
:root body:is(.is-client, .is-guest) :is(.tabs, .nav-tabs, .tab-nav) {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; padding: 0;
    border-bottom: 1px solid var(--p-border); list-style: none; background: none;
}
:root body:is(.is-client, .is-guest) :is(.tabs, .nav-tabs, .tab-nav) :is(a, button, .tab) {
    position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px;
    background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    color: var(--p-text-2); font: 500 13.5px var(--font-body); white-space: nowrap; cursor: pointer; text-decoration: none;
}
:root body:is(.is-client, .is-guest) :is(.tabs, .nav-tabs, .tab-nav) :is(a, button, .tab):hover { color: var(--p-text); }
:root body:is(.is-client, .is-guest) :is(.tabs, .nav-tabs, .tab-nav) :is(a, button, .tab):is(.active, .is-active, [aria-selected="true"], [aria-current="page"]) { color: var(--p-primary); border-bottom-color: var(--p-primary); font-weight: 600; }

/* ---------- 18. Pagination ---------- */
:root body:is(.is-client, .is-guest) :is(.pager, .table-pagination) { padding: 14px 20px; border-top: 1px solid var(--p-border-soft); }
:root body:is(.is-client, .is-guest) .pager-info { font-size: 13px; color: var(--p-text-3); }
:root body:is(.is-client, .is-guest) :is(.pager-link, .pagination a, .pagination span, .page-link) {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px !important; height: 34px !important; padding: 0 10px;
    border-radius: 8px !important; border: 1px solid var(--p-border) !important; background: var(--p-card) !important;
    color: var(--p-text-2) !important; font-size: 13px; font-weight: 500 !important; text-decoration: none; box-shadow: none !important;
}
:root body:is(.is-client, .is-guest) :is(.pager-link, .pagination a, .page-link):hover { border-color: var(--p-primary) !important; color: var(--p-primary) !important; }
:root body:is(.is-client, .is-guest) :is(.pager-link.is-current, .pagination .active > *, .pagination .is-current, .page-item.active .page-link) {
    background: var(--p-primary) !important; border-color: var(--p-primary) !important; color: #fff !important;
}
:root body:is(.is-client, .is-guest) .pagination { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

/* ---------- 19. Empty states ---------- */
:root body:is(.is-client, .is-guest) .empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    padding: 40px 24px !important; color: var(--p-text-2); background: transparent !important; border: 0 !important; box-shadow: none !important;
}
:root body:is(.is-client, .is-guest) .empty-state :is(h3, h4) { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--p-text-2); }
:root body:is(.is-client, .is-guest) .empty-state p { margin: 2px 0 0; max-width: 46ch; font-size: 13.5px; color: var(--p-text-3); }
:root body:is(.is-client, .is-guest) .empty-state .btn { margin-top: 14px; }
:root body:is(.is-client, .is-guest) .empty-icon {
    width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; font-size: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent !important; color: var(--p-muted) !important; opacity: .8;
}
:root body:is(.is-client, .is-guest) .empty-icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
:root body:is(.is-client, .is-guest) .empty-art .ea-card { fill: var(--p-card); stroke: var(--p-border); }
:root body:is(.is-client, .is-guest) .empty-art :is(.ea-line, .ea-line2) { fill: var(--p-border-soft); }
:root body:is(.is-client, .is-guest) .empty-art .ea-line { fill: var(--p-border); }
:root body:is(.is-client, .is-guest) .empty-art :is(.ea-dot, .ea-dot2) { fill: var(--p-primary-soft); }
:root body:is(.is-client, .is-guest) .empty-badge { background: var(--p-primary) !important; color: #fff !important; box-shadow: 0 0 0 4px var(--p-card) !important; }

/* ---------- 20. Modals & dialogs ---------- */
:root body:is(.is-client, .is-guest) :is(.modal-overlay, .modal-backdrop, .drawer-overlay) { background: rgba(15, 23, 42, .45) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
:root body:is(.is-client, .is-guest) :is(.modal-dialog, .modal-content, .modal-box, .slide-drawer) {
    background: var(--p-card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid var(--p-border) !important; border-radius: 16px !important; box-shadow: var(--p-shadow-pop) !important; color: var(--p-text);
}
:root body:is(.is-client, .is-guest) .modal-header { padding: 18px 22px !important; border-bottom: 1px solid var(--p-border-soft) !important; }
:root body:is(.is-client, .is-guest) .modal-title { font-size: 17px !important; font-weight: 600 !important; color: var(--p-text) !important; font-family: var(--font-display) !important; }
:root body:is(.is-client, .is-guest) .modal-body { padding: 20px 22px !important; }
:root body:is(.is-client, .is-guest) .modal-footer { padding: 14px 22px !important; border-top: 1px solid var(--p-border-soft) !important; background: var(--p-card) !important; }
:root body:is(.is-client, .is-guest) .modal-close {
    width: 34px; height: 34px; min-width: 34px; min-height: 34px; display: inline-grid; place-items: center;
    border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--p-muted) !important; cursor: pointer; font-size: 20px; line-height: 1;
}
:root body:is(.is-client, .is-guest) .modal-close:hover { background: var(--p-hover) !important; color: var(--p-text) !important; }
:root body:is(.is-client, .is-guest) dialog:is(.credit-modal, .cf-modal) { border: 1px solid var(--p-border); border-radius: 16px; background: var(--p-card); color: var(--p-text); box-shadow: var(--p-shadow-pop); }
:root body:is(.is-client, .is-guest) dialog::backdrop { background: rgba(15, 23, 42, .45); }
:root body:is(.is-client, .is-guest) .credit-modal-close { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
:root body:is(.is-client, .is-guest) .credit-modal-close:hover { background: var(--p-hover); color: var(--p-text); }

/* ---------- 21. Tooltips & progress bars ---------- */
:root body:is(.is-client, .is-guest) [data-tip] { position: relative; }
:root body:is(.is-client, .is-guest) [data-tip]:is(:hover, :focus-visible)::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 50;
    padding: 5px 9px; border-radius: 6px; background: #0f172a; color: #fff;
    font: 500 12px/1.3 var(--font-body); white-space: nowrap; pointer-events: none; box-shadow: var(--p-shadow-lg);
}
:root[data-theme="dark"] body:is(.is-client, .is-guest) [data-tip]:is(:hover, :focus-visible)::after { background: #e2e8f0; color: #0f172a; }
:root body:is(.is-client, .is-guest) :is(.progress, .progress-track, .usage-bar, .meter-track) {
    height: 8px; overflow: hidden; border-radius: 999px; background: var(--p-border-soft) !important; box-shadow: none !important; border: 0;
}
:root body:is(.is-client, .is-guest) :is(.progress-bar, .progress-fill, .usage-fill, .meter-fill) {
    height: 100%; border-radius: inherit; background: var(--p-primary) !important; background-image: none !important; box-shadow: none !important;
    transition: width .4s ease;
}
:root body:is(.is-client, .is-guest) progress { height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--p-border-soft); accent-color: var(--p-primary); }
:root body:is(.is-client, .is-guest) progress::-webkit-progress-bar { background: var(--p-border-soft); border-radius: 999px; }
:root body:is(.is-client, .is-guest) progress::-webkit-progress-value { background: var(--p-primary); border-radius: 999px; }

/* ---------- 22. Public (logged-out) header & footer ---------- */
:root body.is-guest .client-main { margin-left: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
:root body.is-guest .client-content { flex: 1 0 auto; margin: 0 auto; width: 100%; max-width: 1240px; padding: 28px 24px 40px; }
:root body.is-guest .public-header {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 28px;
    height: var(--header-height); padding: 0 max(24px, calc((100% - 1240px) / 2 + 24px));
    background: var(--p-card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom: 1px solid var(--p-border) !important; box-shadow: none !important;
}
:root body.is-guest .public-brand { gap: 10px; color: var(--p-text) !important; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
:root body.is-guest .public-brand-mark {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; overflow: hidden;
    background: var(--p-primary); color: #fff;
}
:root body.is-guest .public-brand-mark.has-logo { background: transparent; }
:root body.is-guest .public-brand-mark:empty::before {
    content: ''; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2'/%3E%3Cpath d='M12 12v9'/%3E%3Cpath d='m8 17 4-4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2'/%3E%3Cpath d='M12 12v9'/%3E%3Cpath d='m8 17 4-4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root body.is-guest .public-links { gap: 4px; margin-left: 0; }
:root body.is-guest .public-links a { padding: 8px 12px; border-radius: 8px; color: var(--p-text-2) !important; font-size: 14px; font-weight: 500; }
:root body.is-guest .public-links a:hover { background: var(--p-hover); color: var(--p-text) !important; }
:root body.is-guest .public-links a[aria-current="page"] { color: var(--p-primary) !important; background: var(--p-primary-soft); }
:root body.is-guest .public-actions { gap: 8px; }
:root body.is-guest .public-footer { flex-shrink: 0; border-top: 1px solid var(--p-border); background: var(--p-card); }
:root body.is-guest .public-footer-inner {
    display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap;
    max-width: 1240px; margin: 0 auto; padding: 20px 24px;
    font-size: 13px; color: var(--p-text-3);
}
:root body.is-guest .public-footer-brand { font-family: var(--font-display); font-weight: 700; color: var(--p-text); text-decoration: none; }
:root body.is-guest .public-footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
:root body.is-guest .public-footer-links a { color: var(--p-text-2); text-decoration: none; }
:root body.is-guest .public-footer-links a:hover { color: var(--p-primary); }
:root body.is-guest .public-footer-copy { margin-left: auto; }

/* ---------- 23. Mobile chrome: bottom nav + help button ---------- */
:root body.is-client .help-fab {
    background: var(--p-card) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid var(--p-border) !important; box-shadow: var(--p-shadow-lg) !important; color: var(--p-text) !important;
}
:root body.is-client .help-fab svg { color: var(--p-primary); }
:root body.is-client .bottom-nav {
    background: var(--p-card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid var(--p-border) !important; box-shadow: var(--p-shadow-lg) !important;
}
:root body.is-client .bottom-nav-item { color: var(--p-text-3) !important; font-weight: 500; }
:root body.is-client .bottom-nav-item.active { color: var(--p-primary) !important; }
:root body.is-client .bottom-nav-fab { background: var(--p-primary) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--p-primary) 35%, transparent) !important; }

/* ---------- 24. Responsive ---------- */
@media (max-width: 1440px) {
    :root body.is-client .topbar-search { width: 220px; flex-basis: 220px; }
}
@media (max-width: 1280px) {
    :root body.is-client .client-header { gap: 12px; padding: 0 20px; }
    :root body.is-client .header-right { gap: 8px; }
    :root body.is-client .topbar-pin-label { display: none !important; }
    :root body.is-client .topbar-search { width: 200px; flex-basis: 200px; }
}
@media (max-width: 1100px) {
    :root body.is-client .topbar-search { width: 180px; flex-basis: 180px; }
    :root body.is-client .topbar-search kbd { display: none; }
    :root body.is-client .topbar-search input { padding-right: 12px !important; }
    :root body.is-client .header-avatar-btn { padding: 3px; }
    :root body.is-client .client-content { padding: 20px; }
}
@media (max-width: 1024px) {
    :root body.is-client .client-header { padding: 0 16px; }
    :root body.is-client .topbar-title { font-size: 17px !important; }
    :root body.is-guest .public-header { gap: 16px; }
}
@media (max-width: 900px) {
    :root body.is-client .header-greeting { display: none; }
    :root body.is-client .header-left { flex: 0 0 auto; }
    :root body.is-client .header-right { flex: 1 1 auto; justify-content: flex-end; }
    :root body.is-client .topbar-search { flex: 1 1 auto; width: auto; max-width: 320px; }
    :root body.is-guest .public-links a { padding: 8px 8px; }
}
@media (max-width: 768px) {
    :root body:is(.is-client, .is-guest) :is(.client-page-title, .page-title, .page-header h1, .client-page-header h1) { font-size: 20px !important; }
    :root body:is(.is-client, .is-guest) :is(.client-page-header, .page-header) { margin-bottom: 18px !important; }
    :root body:is(.is-client, .is-guest) :is(.client-page-header, .page-header) > :is(.btn, .header-actions, .header-btns, a.btn) { width: 100%; }
    :root body:is(.is-client, .is-guest) :is(.client-page-header, .page-header) :is(.header-actions, .header-btns) > .btn { flex: 1 1 auto; }
    :root body:is(.is-client, .is-guest) :is(.card-head, .client-card-header) { padding: 14px 16px !important; }
    :root body:is(.is-client, .is-guest) :is(.card-body, .client-card-body) { padding: 16px !important; }
    :root body.is-client :is(.client-kpi-grid, .kpi-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    :root body.is-client :is(.client-kpi-card, .kpi-card) { padding: 14px !important; }
    :root body.is-client :is(.client-kpi-card, .kpi-card) .kpi-val { font-size: 20px !important; }
    :root body:is(.is-client, .is-guest) :is(.seg-tabs, .group-tabs, .pay-tabs) { display: flex !important; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    :root body:is(.is-client, .is-guest) :is(.seg-tabs, .group-tabs, .pay-tabs) > * { flex: 0 0 auto; }
    :root body.is-guest .public-links { display: none; }
    :root body.is-guest .public-header { padding: 0 16px; }
    :root body.is-guest .client-content { padding: 20px 16px 32px; }
    :root body.is-guest .public-footer-copy { margin-left: 0; width: 100%; }
}
@media (max-width: 720px) {
    :root body.is-client .topbar-search { display: none; }
}
@media (max-width: 640px) {
    /* Phones: tables that carry per-cell labels (data-label, filled in by the layout script) stack into cards */
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable,
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable :is(tbody, tr, td) { display: block; width: 100%; }
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable tr { padding: 10px 0; border-bottom: 1px solid var(--p-border); }
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable tbody tr:last-child { border-bottom: 0; }
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right;
        padding: 6px 16px !important; border: 0 !important; white-space: normal;
    }
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable td[data-label]::before {
        content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left;
        font-size: 12px; font-weight: 500; color: var(--p-text-3);
    }
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable td:not([data-label]),
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable td[colspan] { display: block; text-align: left; }
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable td:empty { display: none; }
    :root body:is(.is-client, .is-guest) :is(.client-table, .data-table).is-stackable tbody tr:hover td { background: transparent !important; }
    :root body.is-client .header-avatar-btn { height: 40px; border: 0 !important; padding: 0; background: transparent !important; }
    :root body.is-client .topbar-cart { display: none; }
    :root body.is-client .client-header .icon-btn,
    :root body.is-client .client-header .mobile-menu-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
    :root body.is-client .client-content { padding: 16px; }
    :root body.is-guest .public-actions .btn-secondary { display: inline-flex !important; }
    :root body.is-guest .public-footer-inner { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
    :root body.is-client :is(.client-kpi-grid, .kpi-grid) { grid-template-columns: 1fr !important; }
    :root body.is-guest .public-brand strong { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    :root body.is-client .client-sidebar, :root body.is-client .client-main, :root body.is-client .nav-chevron,
    :root body.is-client .client-sidebar .nav-sub:not([hidden]), :root body.is-client .header-menu { transition: none !important; animation: none !important; }
}

/* ---------- 25. Dark mode specifics ---------- */
:root[data-theme="dark"] body.is-client .client-sidebar .sidebar-close-btn { background: var(--p-card) !important; }
:root[data-theme="dark"] body:is(.is-client, .is-guest) :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default) { background: var(--p-card) !important; color: var(--p-text) !important; }
:root[data-theme="dark"] body:is(.is-client, .is-guest) :is(.client-table, .data-table) code { background: var(--p-bg); }
:root[data-theme="dark"] body:is(.is-client, .is-guest) .switch .slider { background: #334155 !important; }
:root[data-theme="dark"] body:is(.is-client, .is-guest) :is(.status-badge, .badge):is(.badge-active, .badge-success, .badge-paid, .badge-verified, .badge-completed, .badge-online) { --b: #4ade80; }
:root[data-theme="dark"] body:is(.is-client, .is-guest) :is(.status-badge, .badge):is(.badge-pending, .badge-warning, .badge-unpaid, .badge-in-progress, .badge-customer-reply) { --b: #fbbf24; }
:root[data-theme="dark"] body:is(.is-client, .is-guest) :is(.status-badge, .badge):is(.badge-danger, .badge-overdue, .badge-suspended, .badge-high, .badge-urgent, .badge-terminated) { --b: #f87171; }
:root[data-theme="dark"] body:is(.is-client, .is-guest) .alert { color: var(--p-text) !important; }
:root[data-theme="dark"] body:is(.is-client, .is-guest) .alert-warning { --a-ink: #fbbf24; }
:root[data-theme="dark"] body:is(.is-client, .is-guest) .alert-danger { --a-ink: #f87171; }
:root[data-theme="dark"] body.is-client .sidebar-referral { background: linear-gradient(135deg, #3046c9 0%, #4a3bb8 100%); }
:root[data-theme="dark"] body.is-client .client-header .user-avatar { color: #fff !important; }
:root[data-theme="dark"] body:is(.is-client, .is-guest) .form-control { color-scheme: dark; }
/* ---------- 26. Auto breadcrumb (layout) ---------- */
:root body.is-client .page-crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: -4px 0 14px;
    font-size: 12.5px; color: var(--p-text-3);
}
:root body.is-client .page-crumbs a { color: var(--p-text-3); text-decoration: none; font-weight: 500; }
:root body.is-client .page-crumbs a:hover { color: var(--p-primary); }
:root body.is-client .page-crumbs [aria-current="page"] { color: var(--p-text); font-weight: 600; }
:root body.is-client .page-crumbs-sep { color: var(--p-muted); flex: 0 0 auto; }

/* ---------- 27. Offer strips above the top bar ---------- */
:root body.is-client .offer-strip {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    min-height: 44px; padding: 7px 52px; color: #fff; text-align: center; font-size: 14px;
}
:root body.is-client .offer-strip[hidden] { display: none; }
:root body.is-client .offer-strip--slate { background: #374151; }
:root body.is-client .offer-strip--teal { background: #0f5a4f; }
:root body.is-client .offer-strip-text { margin: 0; line-height: 1.4; }
:root body.is-client .offer-strip-text strong { font-weight: 600; }
:root body.is-client .offer-strip-text span { opacity: .9; }
:root body.is-client .offer-strip-btn {
    padding: 4px 14px; border: 1.5px dashed rgba(255, 255, 255, .75); border-radius: 999px;
    color: #fff !important; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
:root body.is-client .offer-strip-btn:hover { background: rgba(255, 255, 255, .12); border-style: solid; }
:root body.is-client .offer-strip-close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px;
    background: transparent; color: rgba(255, 255, 255, .8); font-size: 20px; line-height: 1; cursor: pointer;
}
:root body.is-client .offer-strip-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 640px) {
    :root body.is-client .offer-strip { padding: 8px 44px 8px 16px; justify-content: flex-start; text-align: left; font-size: 13px; gap: 8px; }
    :root body.is-client .offer-strip-close { right: 8px; }
}
:root[data-theme="dark"] body.is-client .sidebar-wallet { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .25); }
:root[data-theme="dark"] body.is-client .sidebar-wallet-amount { color: #4ade80; }
:root[data-theme="dark"] body.is-client .sidebar-wallet-add { box-shadow: 0 0 0 2px var(--p-card), 0 0 0 3.5px var(--p-success); }
/* ===================== END FOUNDATION v2 ===================== */