/* ─────────────────────────────────────────────────────────────────
   3RD-VN AFFILIATE PLATFORM — PREMIUM FINTECH UI DESIGN SYSTEM
   Typography: Plus Jakarta Sans, Inter & JetBrains Mono
   Aesthetics: Glassmorphism, Luxury Gradients, Micro-Interactions
───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ─── DESIGN TOKENS (LIGHT & DARK THEMES) ─── */
:root {
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* Typography weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Primary Brand Colors (Fintech Emerald & Royal Indigo) */
  --c-primary:          #00b04f;
  --c-primary-hover:    #009643;
  --c-primary-subtle:   #ecfdf3;
  --c-primary-border:   #a6f4c5;
  --c-primary-glow:     rgba(0, 176, 79, 0.25);

  --c-accent:           #6366f1;
  --c-accent-subtle:    #eef2ff;

  /* Backgrounds & Surfaces (Light) */
  --c-bg-page:          #f8fafc;
  --bg-gradient-1:      rgba(255, 218, 185, 0.5); /* Light Peach */
  --bg-gradient-2:      rgba(135, 206, 235, 0.4); /* Sky Blue */
  --c-bg-surface:       rgba(255, 255, 255, 0.65);
  --c-bg-subtle:        rgba(241, 245, 249, 0.5);
  --c-bg-muted:         rgba(248, 250, 252, 0.5);
  --c-bg-hover:         rgba(255, 255, 255, 0.8);
  --c-bg-active:        rgba(241, 245, 249, 0.7);
  --c-bg-sidebar:       rgba(255, 255, 255, 0.65);
  --c-bg-glass:         rgba(255, 255, 255, 0.85);

  /* Borders */
  --c-border:           #e2e8f0;
  --c-border-strong:    #cbd5e1;
  --c-border-subtle:    #f1f5f9;

  /* Text colors */
  --c-text:             #0f172a;
  --c-text-sec:         #334155;
  --c-text-muted:       #64748b;
  --c-text-subtle:      #94a3b8;
  --c-text-ph:          #94a3b8;

  /* Functional Status Colors */
  --c-success:          #10b981;
  --c-success-bg:       #ecfdf5;
  --c-success-border:   #a7f3d0;
  --c-success-text:     #047857;

  --c-warning:          #f59e0b;
  --c-warning-bg:       #fffbeb;
  --c-warning-border:   #fde68a;
  --c-warning-text:     #b45309;

  --c-danger:           #ef4444;
  --c-danger-bg:        #fef2f2;
  --c-danger-border:    #fecaca;
  --c-danger-text:      #b91c1c;

  --c-info:             #3b82f6;
  --c-info-bg:          #eff6ff;
  --c-info-border:      #bfdbfe;
  --c-info-text:        #1d4ed8;

  /* Radius */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-pill: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 16px -4px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
  --shadow-glow: 0 0 20px rgba(0, 176, 79, 0.2);

  /* Layout dimensions */
  --sidebar-w: 260px;
  --header-h: 72px;
  --page-pad: 28px;
}

/* Lost order tickets */
.lost-order-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.lost-order-head p{margin:5px 0 0;color:#64748b}.lost-order-flow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px 18px;margin-bottom:14px}.lost-order-flow span{font-weight:700;color:#64748b;white-space:nowrap}.lost-order-flow span.active{color:#059669}.lost-order-flow i{height:2px;background:#cbd5e1;flex:1}.lost-order-filters{display:grid;grid-template-columns:minmax(250px,1fr) 250px;gap:12px;margin-bottom:14px}.lost-order-list{display:grid;gap:14px}.lost-order-card{background:#fff;border:1px solid #e2e8f0;border-left:5px solid #f59e0b;border-radius:16px;padding:18px;box-shadow:0 4px 18px rgba(15,23,42,.05)}.lost-order-card.status-adv_confirmed{border-left-color:#2563eb}.lost-order-card.status-recorded{border-left-color:#10b981}.lost-order-card.status-rejected{border-left-color:#dc2626}.lost-order-card__top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.lost-order-card__top>div{display:grid;gap:3px}.lost-order-card__top b{font-size:17px;color:#0f172a}.lost-order-card__top span{color:#64748b}.lost-order-card__top em{font-style:normal;font-weight:800;font-size:12px;border-radius:999px;background:#fff7ed;color:#c2410c;padding:7px 10px}.status-adv_confirmed .lost-order-card__top em{background:#eff6ff;color:#1d4ed8}.status-recorded .lost-order-card__top em{background:#ecfdf5;color:#047857}.status-rejected .lost-order-card__top em{background:#fef2f2;color:#b91c1c}.lost-order-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0;padding:12px;background:#f8fafc;border-radius:12px}.lost-order-meta span{font-size:13px;color:#64748b}.lost-order-meta b{color:#1e293b}.lost-order-card p{white-space:pre-wrap;color:#334155}.lost-order-rejection{display:grid;gap:4px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:12px;color:#991b1b;margin:12px 0}.lost-order-rejection small{color:#b45353}.lost-order-files{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.lost-order-file{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:10px;padding:8px 10px;cursor:pointer}.lost-order-card details{border-top:1px solid #e2e8f0;margin-top:12px;padding-top:12px}.lost-order-card summary{cursor:pointer;font-weight:700;color:#475569}.lost-order-history{display:grid;gap:10px;margin:12px 0 0;padding-left:24px}.lost-order-history li b,.lost-order-history li span,.lost-order-history li small{display:block}.lost-order-history li span,.lost-order-history li small{color:#64748b;font-size:12px;margin-top:2px}.lost-order-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.lost-order-reject-control{display:flex;align-items:center;gap:8px}.lost-order-reject-control select{min-width:310px}.lost-order-modal{max-width:760px}.lost-order-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.lost-order-form label{display:grid;gap:7px;font-weight:700;color:#475569}.lost-order-form .full{grid-column:1/-1}.lost-order-upload{border:1px dashed #94a3b8;border-radius:12px;padding:14px}.lost-order-upload small{font-weight:400;color:#64748b}
@media(max-width:760px){.lost-order-head{align-items:stretch;flex-direction:column}.lost-order-flow{padding:12px;overflow:auto}.lost-order-flow i{min-width:28px}.lost-order-filters,.lost-order-form{grid-template-columns:1fr}.lost-order-form .full{grid-column:auto}.lost-order-meta{grid-template-columns:1fr 1fr}.lost-order-card{padding:14px}.lost-order-card__top{flex-direction:column}.lost-order-card__top em{align-self:flex-start}.lost-order-actions,.lost-order-reject-control{width:100%;display:grid}.lost-order-reject-control select{min-width:0;width:100%}.lost-order-actions .pv3-btn{width:100%}}
.lost-order-modal{overflow:hidden}.lost-order-modal .pv3-modal-header>div{min-width:0}.lost-order-modal .pv3-modal-header h3,.lost-order-modal .pv3-modal-header p{margin:0}.lost-order-modal .pv3-modal-header p{margin-top:4px;color:#64748b;font-size:13px}.lost-order-modal .pv3-modal-body{overflow-y:auto}.lost-order-form input,.lost-order-form textarea{width:100%;box-sizing:border-box}
.lost-order-ticket-progress{display:flex;align-items:center;margin:16px 0 4px;padding:12px 14px;background:#f8fafc;border-radius:12px}.lost-order-ticket-progress>b{height:2px;flex:1;background:#cbd5e1}.lost-order-step{display:flex;align-items:center;gap:7px;color:#94a3b8;font-size:12px;font-weight:700;white-space:nowrap}.lost-order-step i{display:grid;place-items:center;width:25px;height:25px;border:2px solid #cbd5e1;border-radius:50%;font-style:normal;background:#fff}.lost-order-step.current{color:#2563eb}.lost-order-step.current i{border-color:#2563eb;background:#2563eb;color:#fff}.lost-order-step.done{color:#059669}.lost-order-step.done i{border-color:#10b981;background:#10b981;color:#fff}.lost-order-step.done+b{background:#10b981}
@media(max-width:620px){.lost-order-ticket-progress{align-items:flex-start;padding:10px}.lost-order-step{flex-direction:column;text-align:center;font-size:9px;white-space:normal;max-width:74px}.lost-order-ticket-progress>b{margin-top:12px}.lost-order-step i{width:23px;height:23px}}
.pv3-sidebar-backdrop{display:none;border:0;padding:0}
@media(max-width:768px){
  .pv3-sidebar{display:flex!important;position:fixed!important;top:0!important;bottom:0!important;left:0!important;width:min(85vw,310px)!important;z-index:5000!important;transform:translateX(-105%)!important;transition:transform .25s ease!important;overflow:hidden!important}
  .pv3-sidebar.mobile-open{transform:translateX(0)!important}
  .pv3-sidebar-trigger{display:flex!important;flex:0 0 38px!important;width:38px!important;height:38px!important;position:relative!important;z-index:1!important}
  .pv3-sidebar-backdrop{position:fixed;inset:0;z-index:4990;background:rgba(15,23,42,.65);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .pv3-sidebar-backdrop.open{display:block}
  body.mobile-sidebar-open{overflow:hidden!important}
}

.camp-app-mobile-only{display:none}
@media(max-width:768px){
  .camp-app-desktop-only{display:none!important}.camp-app-mobile-only{display:block}
  .camp-mobile-filter{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px;margin:0 0 12px;padding:10px;background:var(--c-bg-surface);border:1px solid var(--c-border);border-radius:12px}.camp-mobile-filter input{width:100%;min-width:0;font-size:11px}.camp-mobile-filter span{color:var(--c-text-muted);font-size:11px}
  .camp-mobile-section{margin:12px 0}.camp-mobile-section--report{overflow:hidden;padding:0;border:1px solid var(--c-border);border-radius:14px;background:var(--c-bg-surface);box-shadow:var(--shadow-xs)}.camp-mobile-section__head{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px 14px;border-bottom:1px solid var(--c-border)}.camp-mobile-section__head h3{margin:0;font-size:15px;color:var(--c-text)}.camp-mobile-section__head span{padding:4px 8px;border-radius:999px;background:var(--c-primary-soft);color:var(--c-primary);font-size:10px;font-weight:800}.camp-mobile-section--report>h4{margin:0;padding:12px 12px 8px;color:var(--c-text-muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.camp-mobile-section--report>h4:not(:first-of-type){margin-top:12px;border-top:1px solid var(--c-border)}.camp-mobile-section--report>.camp-mobile-projects,.camp-mobile-section--report>.camp-mobile-sales,.camp-mobile-section--report>.camp-mobile-cases{padding:0 10px 10px}.camp-mobile-section--report>.camp-mobile-pagination{margin:0 10px 10px}
  .camp-mobile-projects,.camp-mobile-sales,.camp-mobile-cases{display:flex;flex-direction:column;gap:8px}.camp-mobile-project-card,.camp-mobile-sale-card,.camp-mobile-case-card{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:11px;padding:12px;box-shadow:none}
  .camp-mobile-project-card__head{display:flex;align-items:center;justify-content:space-between}.camp-mobile-project-card__head strong{font-size:15px;color:var(--c-text)}.camp-mobile-project-card__head b{padding:4px 7px;border-radius:8px;background:var(--c-primary-soft);color:var(--c-primary);font-size:11px}
  .camp-mobile-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px}.camp-mobile-metrics span{text-align:center;padding:7px 2px;border-radius:8px;background:var(--c-bg-elevated);color:var(--c-text-muted);font-size:8px}.camp-mobile-metrics b{display:block;color:var(--c-text);font-size:15px}.camp-mobile-metrics .ok b{color:var(--c-success)}.camp-mobile-metrics .wait b{color:#d88b00}.camp-mobile-metrics .bad b{color:var(--c-danger)}
  .camp-mobile-sale-card{display:grid;grid-template-columns:minmax(0,1fr) 42px 42px;gap:8px;align-items:center;border-left:4px solid var(--c-primary)}.camp-mobile-sale-card>div:first-child strong{display:block;font:800 13px var(--pv3-mono);color:var(--c-text)}.camp-mobile-sale-card>div:first-child small{display:block;margin-top:2px;color:var(--c-text-muted);font-size:9px}.camp-mobile-sale-card>div:nth-child(2),.camp-mobile-sale-card>div:nth-child(3){text-align:center}.camp-mobile-sale-card>div>b{display:block;font-size:16px;color:var(--c-text)}.camp-mobile-sale-card>div>span{display:block;font-size:8px;color:var(--c-text-muted)}.camp-mobile-sale-card__status{grid-column:1/-1;display:flex;gap:5px}.camp-mobile-sale-card__status i{padding:4px 7px;border-radius:7px;font-size:9px;font-style:normal;font-weight:800}.camp-mobile-sale-card__status .ok{color:#078454;background:#e9fbf4}.camp-mobile-sale-card__status .wait{color:#a45b00;background:#fff5dd}.camp-mobile-sale-card__status .bad{color:#c33d49;background:#fff0f1}
  .camp-mobile-case-card{border-left:5px solid #e6a331}.camp-mobile-case-card.ok{border-left-color:var(--c-success)}.camp-mobile-case-card.bad{border-left-color:var(--c-danger)}.camp-mobile-case-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.camp-mobile-case-card__top strong{font-size:14px;color:var(--c-text)}.camp-mobile-case-card__top span{font-size:9px;font-weight:800;color:#a45b00}.camp-mobile-case-card.ok .camp-mobile-case-card__top span{color:var(--c-success)}.camp-mobile-case-card.bad .camp-mobile-case-card__top span{color:var(--c-danger)}.camp-mobile-case-card__sale{margin:8px 0;font-size:11px;color:var(--c-text-muted)}.camp-mobile-case-card__sale b{color:var(--c-text);font-family:var(--pv3-mono)}.camp-mobile-case-card code{display:block;overflow-wrap:anywhere;font-size:9px;color:var(--c-text-subtle)}.camp-mobile-case-card time{display:block;margin-top:5px;font-size:9px;color:var(--c-text-muted)}
  .camp-mobile-pagination{display:grid;grid-template-columns:40px 1fr auto 40px;align-items:center;gap:7px;margin-top:10px;padding:8px;border:1px solid var(--c-border);border-radius:12px;background:var(--c-bg-surface)}.camp-mobile-pagination:empty{display:none}.camp-mobile-pagination button{height:34px;border:1px solid var(--c-border);border-radius:9px;background:var(--c-bg-elevated);color:var(--c-primary);font-size:22px;font-weight:800}.camp-mobile-pagination button:disabled{opacity:.35;color:var(--c-text-subtle)}.camp-mobile-pagination span{font-size:10px;color:var(--c-text-muted)}.camp-mobile-pagination strong{font-size:10px;color:var(--c-text);white-space:nowrap}
  .pv3-bottom-nav__item{font-size:8px;gap:2px}.pv3-bottom-nav__item svg{width:19px;height:19px}
}

/* Camp App report: operational view */
.commission-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.commission-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.commission-kpis article,.commission-list-shell{background:var(--c-bg-surface);border:1px solid var(--c-border);border-radius:16px;box-shadow:var(--shadow-xs)}.commission-kpis article{padding:16px}.commission-kpis span{display:block;color:var(--c-text-muted);font-size:10px;font-weight:700;text-transform:uppercase}.commission-kpis strong{display:block;margin-top:7px;font-size:23px;color:var(--c-text)}.commission-user-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.commission-user-toolbar input{max-width:320px}.commission-user-list{padding:8px}.commission-user-card{display:grid;grid-template-columns:44px minmax(0,1fr) 90px auto;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--c-border)}.commission-user-card:last-child{border-bottom:0}.commission-user-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--c-primary-soft);color:var(--c-primary);font-weight:900}.commission-user-info strong,.commission-user-info span,.commission-user-info small{display:block}.commission-user-info span{margin-top:3px;font-size:11px;color:var(--c-text)}.commission-user-info small{margin-top:2px;font-size:10px;color:var(--c-text-muted)}.commission-user-configured{text-align:center}.commission-user-configured b{display:block;color:var(--c-primary);font-size:18px}.commission-user-configured span{font-size:9px;color:var(--c-text-muted)}.pv3-modal.commission-config-modal{width:min(920px,calc(100vw - 32px));max-width:920px;overflow:hidden}.commission-config-modal .pv3-modal-header,.commission-config-modal .pv3-modal-footer{flex-shrink:0}.commission-config-modal .pv3-modal-body{min-width:0;overflow-x:hidden;overflow-y:auto}.commission-campaign-config-list{display:flex;min-width:0;flex-direction:column;gap:12px}.commission-campaign-config{display:grid;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 14px 14px;border:1px solid var(--c-border);border-radius:14px;background:var(--c-bg-elevated);overflow:hidden}.commission-campaign-config__name{grid-column:1/-1;margin:0 -14px;padding:12px 14px;border-bottom:1px solid var(--c-border);background:var(--c-bg-surface)}.commission-campaign-config__name strong,.commission-campaign-config__name span{display:block}.commission-campaign-config__name strong{font-size:15px;color:var(--c-text)}.commission-campaign-config__name span{margin-top:3px;font-size:10px;color:var(--c-text-muted)}.commission-campaign-config label{min-width:0}.commission-campaign-config label>span{display:block;margin-bottom:5px;font-size:9px;font-weight:700;color:var(--c-text-muted);text-transform:uppercase}.commission-campaign-config input,.commission-campaign-config select{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:700px){.commission-kpis{grid-template-columns:1fr}.commission-user-toolbar{align-items:stretch;flex-direction:column}.commission-user-toolbar input{max-width:none;width:100%}.commission-user-card{grid-template-columns:40px 1fr auto}.commission-user-configured{display:none}.commission-user-card button{grid-column:2/-1;width:100%}.commission-campaign-config{grid-template-columns:1fr;padding:0 12px 12px}.commission-campaign-config__name{grid-column:1;margin:0 -12px;padding:12px}.commission-config-modal .pv3-modal-body{padding:12px!important;overflow-x:hidden!important}}

/* A commission is configured as exactly one type: percentage or fixed amount. */
.commission-campaign-config{grid-template-columns:repeat(2,minmax(0,1fr))}
.commission-campaign-config.is-locked{opacity:.62}
.commission-value-control{position:relative}
.commission-value-control input{padding-right:44px}
.commission-value-control b{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--c-text-muted);font-size:13px;pointer-events:none}
@media(max-width:700px){.commission-campaign-config{grid-template-columns:1fr}}
.pv3-custom-select-wrap--compact{min-width:0}
.pv3-custom-select-wrap--compact .pv3-custom-select-dropdown{position:relative;top:6px;min-width:0;box-shadow:var(--shadow-md)}
.pv3-custom-select-wrap--compact .pv3-select-options-list{max-height:none;padding:4px}
.pv3-custom-select-wrap--compact .pv3-select-option{min-height:38px;padding:6px 10px;border-radius:7px}
.pv3-custom-select-wrap.is-disabled .pv3-custom-select-trigger{cursor:not-allowed;opacity:.65;background:var(--c-bg-subtle)}
.api-client-create{padding:18px;margin-bottom:16px;background:var(--c-bg-surface);border:1px solid var(--c-border);border-radius:16px}.api-client-create__fields{display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,.7fr) minmax(260px,1.1fr) auto;gap:12px;align-items:end}.api-client-create__fields label>span{display:block;margin-bottom:6px;font-size:10px;font-weight:800;color:var(--c-text-muted);text-transform:uppercase}.api-client-scope{display:flex!important;align-items:center;gap:9px;min-height:42px}.api-client-scope>span{margin:0!important;text-transform:none!important;font-size:12px!important}.api-client-created-key,.api-client-doc{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:12px}.api-client-created-key{background:var(--c-primary-subtle);border:1px solid var(--c-primary)}.api-client-created-key strong,.api-client-created-key code,.api-client-doc strong,.api-client-doc span{display:block}.api-client-created-key code{margin-top:6px;word-break:break-all}.api-client-doc{align-items:flex-start;flex-direction:column;background:var(--c-bg-subtle);border:1px solid var(--c-border)}.api-client-doc code{font-size:12px;color:var(--c-primary)}.api-client-doc span{font-size:11px;color:var(--c-text-muted)}.api-client-list{padding:8px}.api-client-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.45fr) auto auto;align-items:center;gap:14px;padding:14px;border-bottom:1px solid var(--c-border)}.api-client-card:last-child{border-bottom:0}.api-client-card strong,.api-client-card span,.api-client-card small{display:block}.api-client-card span{margin-top:4px;color:var(--c-text);font-size:12px}.api-client-card small{margin-top:3px;color:var(--c-text-muted);font-size:10px}.api-client-card code{font-size:11px;word-break:break-all}
@media(max-width:800px){.api-client-create__fields{grid-template-columns:1fr}.api-client-created-key{align-items:stretch;flex-direction:column}.api-client-card{grid-template-columns:1fr}.api-client-card button{width:100%}}
.api-self-service-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.api-self-service-head span,.api-self-service-head strong,.api-self-service-head small{display:block}.api-self-service-head span{font-size:10px;font-weight:800;color:var(--c-text-muted);text-transform:uppercase}.api-self-service-head strong{margin-top:5px;font-family:var(--pv3-mono);font-size:20px;color:var(--c-primary)}.api-self-service-head small{margin-top:4px;color:var(--c-text-muted)}.api-guide{margin-bottom:16px;padding:0 18px 18px;background:var(--c-bg-surface);border:1px solid var(--c-border);border-radius:16px}.api-guide ol{margin:0 0 16px;padding-left:20px;color:var(--c-text-sec);font-size:13px;line-height:1.75}.api-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.api-guide-grid>div{padding:12px;background:var(--c-bg-subtle);border:1px solid var(--c-border);border-radius:10px}.api-guide-grid span,.api-guide-grid code{display:block}.api-guide-grid span{margin-bottom:6px;font-size:10px;font-weight:800;color:var(--c-text-muted);text-transform:uppercase}.api-guide h4{margin:18px 0 8px;font-size:13px}.api-guide pre{margin:0;padding:14px;overflow:auto;background:#0f172a;color:#e2e8f0;border-radius:10px;font:11px/1.65 var(--pv3-mono);white-space:pre}.api-param-table{display:grid;grid-template-columns:130px 1fr;border:1px solid var(--c-border);border-radius:10px;overflow:hidden}.api-param-table>*{padding:9px 12px;border-bottom:1px solid var(--c-border)}.api-param-table code{color:var(--c-primary);background:var(--c-bg-subtle)}.api-param-table span{font-size:12px;color:var(--c-text-sec)}.api-guide p{margin:14px 0 0;font-size:11px;color:var(--c-text-muted)}
@media(max-width:700px){.api-self-service-head{align-items:stretch;flex-direction:column}.api-self-service-head button{width:100%}.api-guide-grid{grid-template-columns:1fr}.api-param-table{grid-template-columns:100px 1fr}.api-guide{padding:0 12px 12px}.api-guide pre{font-size:10px}}
.announcement-admin-card{margin-bottom:16px;background:var(--c-bg-surface);border:1px solid var(--c-border);border-radius:16px;overflow:hidden}.announcement-admin-card__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--c-border)}.announcement-admin-card__head h3{margin:0;font-size:16px}.announcement-admin-card__head span{display:block;margin-top:4px;font-size:11px;color:var(--c-text-muted)}.announcement-admin-card__body{display:grid;grid-template-columns:1fr 1fr minmax(180px,.7fr);gap:14px;align-items:start;padding:16px 18px}.announcement-admin-card__body label>span,.announcement-upload>span{display:block;margin-bottom:6px;font-size:10px;font-weight:800;color:var(--c-text-muted);text-transform:uppercase}.announcement-upload input{display:block;width:100%;padding:10px;border:1px dashed var(--c-border-strong);border-radius:10px;background:var(--c-bg-subtle)}.announcement-upload small{display:block;margin-top:5px;color:var(--c-text-muted)}.announcement-preview-box{display:grid;place-items:center;min-height:100px;padding:8px;background:var(--c-bg-subtle);border:1px solid var(--c-border);border-radius:12px}.announcement-preview-box img{display:block;max-width:100%;max-height:180px;object-fit:contain;border-radius:8px}.announcement-admin-card__footer{display:flex;justify-content:flex-end;padding:0 18px 16px}.announcement-popup{position:fixed;inset:0;z-index:20000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,.72);backdrop-filter:blur(5px)}.announcement-popup.open{display:flex;animation:announcementFade .18s ease-out}.announcement-popup__panel{position:relative;max-width:min(760px,92vw);max-height:90vh;animation:announcementPop .24s cubic-bezier(.2,.8,.2,1)}.announcement-popup__panel a{display:block}.announcement-popup__panel img{display:block;max-width:100%;max-height:88vh;object-fit:contain;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.42)}.announcement-popup__close{position:absolute;z-index:2;top:-14px;right:-14px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid #fff;border-radius:50%;background:#111827;color:#fff;font-size:25px;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3)}@keyframes announcementFade{from{opacity:0}to{opacity:1}}@keyframes announcementPop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){.announcement-admin-card__head{align-items:flex-start;flex-direction:column}.announcement-admin-card__body{grid-template-columns:1fr}.announcement-admin-card__footer button{width:100%}.announcement-popup{padding:14px}.announcement-popup__panel{max-width:94vw}.announcement-popup__close{top:-10px;right:-8px;width:36px;height:36px}}
.announcement-options{display:flex;align-items:flex-start;flex-direction:column;gap:10px;padding:10px 12px;background:var(--c-bg-subtle);border:1px solid var(--c-border);border-radius:10px}.announcement-options label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650}.announcement-admin-list{padding:0 18px 16px}.announcement-admin-item{display:grid;grid-template-columns:100px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--c-border)}.announcement-admin-item>img{width:100px;height:66px;object-fit:cover;border-radius:9px}.announcement-admin-item strong,.announcement-admin-item span{display:block}.announcement-admin-item span{margin-top:5px;font-size:11px;color:var(--c-text-muted)}.announcement-admin-item__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.announcement-slide-track{position:relative}.announcement-slide{display:none}.announcement-slide.active{display:block;animation:announcementSlideIn .28s ease-out}.announcement-slider-arrow{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:40px;height:54px;padding:0;transform:translateY(-50%);border:1px solid rgba(255,255,255,.5);background:rgba(15,23,42,.65);color:#fff;font-size:32px;cursor:pointer;backdrop-filter:blur(6px)}.announcement-slider-arrow--prev{left:10px;border-radius:12px}.announcement-slider-arrow--next{right:10px;border-radius:12px}.announcement-slide-dots{position:absolute;z-index:3;left:50%;bottom:12px;display:flex;gap:7px;transform:translateX(-50%);padding:6px 9px;border-radius:20px;background:rgba(15,23,42,.48)}.announcement-slide-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}.announcement-slide-dots button.active{width:22px;border-radius:8px;background:#fff}@keyframes announcementSlideIn{from{opacity:.25;transform:translateX(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){.announcement-admin-item{grid-template-columns:74px 1fr}.announcement-admin-item>img{width:74px;height:52px}.announcement-admin-item__actions{grid-column:1/-1;justify-content:stretch}.announcement-admin-item__actions button{flex:1}.announcement-slider-arrow{width:34px;height:46px;font-size:26px}.announcement-slider-arrow--prev{left:5px}.announcement-slider-arrow--next{right:5px}}

/* Keep carousel slides mutually exclusive despite the generic popup anchor rule. */
.announcement-popup__panel .announcement-slide{display:none}
.announcement-popup__panel .announcement-slide.active{display:block}

.commission-user-filters{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(140px,1fr)) auto;gap:9px;padding:12px;border-bottom:1px solid var(--c-border);background:var(--c-bg-subtle)}.commission-user-filters>*{width:100%;min-width:0}.commission-list-shell>.pv3-pagination{border-top:1px solid var(--c-border)}
@media(max-width:900px){.commission-user-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.commission-user-filters>button{grid-column:1/-1}.commission-config-modal .pv3-modal-header,.commission-config-modal .pv3-modal-footer{position:relative;z-index:2;background:var(--c-bg-surface)}}
@media(max-width:560px){.commission-head{align-items:flex-start}.commission-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.commission-kpis article{padding:10px 7px;border-radius:11px}.commission-kpis span{font-size:7px;line-height:1.25}.commission-kpis strong{font-size:14px;margin-top:5px;overflow-wrap:anywhere}.commission-user-filters{grid-template-columns:1fr;padding:10px}.commission-user-filters>button{grid-column:auto}.commission-user-card{grid-template-columns:38px minmax(0,1fr)}.commission-user-card .pv3-btn{grid-column:1/-1}.commission-user-avatar{width:38px;height:38px}.commission-config-modal .pv3-modal-header{position:sticky;top:0}.commission-config-modal .pv3-modal-footer{position:sticky;bottom:0}.commission-config-modal .pv3-modal-footer .pv3-btn{font-size:12px!important}}

.pv3-plink-card{position:relative}.commission-sticker{position:absolute;top:10px;right:-5px;z-index:3;display:inline-flex;align-items:center;gap:4px;padding:6px 11px 6px 9px;border:1px solid #f6c453;border-right:0;border-radius:9px 0 0 9px;background:linear-gradient(135deg,#fff8cf,#ffd966);color:#7a4700;box-shadow:0 5px 14px rgba(181,119,0,.22);font-size:10px;font-weight:900;letter-spacing:.04em;transform:rotate(1deg)}.commission-sticker i{font-style:normal;color:#d18a00}.commission-detail-sticker{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,#fff3b0,#ffd45c);color:#7a4700;font-size:10px;font-weight:900;letter-spacing:.04em}.commission-detail-sticker[hidden]{display:none}
@media(max-width:560px){.commission-sticker{top:8px;right:-3px;padding:5px 8px;font-size:8px}.pv3-plink-card:has(.commission-sticker) .pv3-plink-card__info{padding-right:76px}}

.camp-report-toolbar{display:flex;justify-content:flex-end;margin:4px 0 14px}.camp-report-toolbar .pv3-table-filters{padding:0;background:transparent;border:0}
.camp-report-section{margin-top:16px;padding:18px;border:1px solid var(--c-border);border-radius:18px;background:var(--c-bg-surface);box-shadow:var(--shadow-xs)}
.camp-report-section__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.camp-report-section__head h3{margin:0;color:var(--c-text);font-size:18px}.camp-report-section__head p{margin:4px 0 0;color:var(--c-text-muted);font-size:12px}.camp-case-count{padding:6px 10px;border-radius:999px;background:var(--c-primary-soft);color:var(--c-primary);font-size:12px;font-weight:800;white-space:nowrap}
.camp-data-ok,.camp-data-warning{margin:10px 0 0;padding:11px 14px;border-radius:12px;font-size:12px;font-weight:600}.camp-data-ok{color:#087a50;background:#eafbf4;border:1px solid #a6ead2}.camp-data-warning{color:#9a4f00;background:#fff7e7;border:1px solid #f2cf86}
.camp-project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.camp-project-card{padding:15px;border:1px solid var(--c-border);border-radius:14px;background:var(--c-bg-elevated)}
.camp-project-card__head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.camp-project-card__head strong{display:block;font-size:16px;color:var(--c-text)}.camp-project-card__head span{display:block;margin-top:2px;font-size:10px;color:var(--c-text-subtle)}.camp-project-card__head>b{color:var(--c-primary);font-size:15px;white-space:nowrap}
.camp-project-card__traffic{display:flex;gap:18px;margin:16px 0 12px;color:var(--c-text-muted);font-size:11px}.camp-project-card__traffic b{display:block;color:var(--c-text);font-size:22px;line-height:1.05}
.camp-status-row{display:flex;gap:6px;flex-wrap:wrap}.camp-status-row span{padding:5px 7px;border-radius:8px;font-size:10px;font-weight:800;white-space:nowrap}.camp-status-row .is-pending{color:#a45b00;background:#fff5dd}.camp-status-row .is-approved{color:#078454;background:#e9fbf4}.camp-status-row .is-rejected{color:#c33d49;background:#fff0f1}
.camp-sale-list,.camp-case-list{display:flex;flex-direction:column;gap:9px}.camp-sale-card{display:grid;grid-template-columns:minmax(220px,1fr) 90px 90px auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--c-border);border-left:4px solid var(--c-primary);border-radius:12px;background:var(--c-bg-elevated)}.camp-sale-card.is-unknown{border-left-color:var(--c-danger)}
.camp-sale-card__identity>span,.camp-sale-card__number span{display:block;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--c-text-subtle)}.camp-sale-card__identity strong{display:block;margin:2px 0;color:var(--c-text);font:800 15px var(--pv3-mono)}.camp-sale-card.is-unknown .camp-sale-card__identity strong{color:var(--c-danger)}.camp-sale-card__identity small{display:block;color:var(--c-text-muted);font-size:10px;white-space:normal}.camp-sale-card__number b{font-size:20px;color:var(--c-text)}.camp-sale-card__number--case b{color:var(--c-primary)}
.camp-case-card{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:14px;padding:14px;border:1px solid var(--c-border);border-left:5px solid #e6a331;border-radius:12px;background:var(--c-bg-elevated)}.camp-case-card.is-approved{border-left-color:#0bb47a}.camp-case-card.is-rejected{border-left-color:#e45561}.camp-case-card__status{font-size:11px;font-weight:900;color:#a45b00}.camp-case-card.is-approved .camp-case-card__status{color:#078454}.camp-case-card.is-rejected .camp-case-card__status{color:#c33d49}.camp-case-card__main{display:grid;grid-template-columns:1fr 1fr;gap:14px}.camp-case-card__main span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-subtle)}.camp-case-card__main strong{display:block;margin-top:3px;color:var(--c-text);font-size:14px}.camp-case-card__meta{text-align:right;color:var(--c-text-muted);font-size:10px}.camp-case-card__meta span{display:block;margin:2px 0}.camp-case-card__meta b{font-family:var(--pv3-mono);font-weight:700}
@media(max-width:900px){.camp-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.camp-sale-card{grid-template-columns:1fr 60px 60px}.camp-sale-card .camp-status-row{grid-column:1/-1}.camp-case-card{grid-template-columns:1fr}.camp-case-card__meta{text-align:left}}
@media(max-width:560px){.camp-report-toolbar{justify-content:stretch}.camp-report-toolbar .pv3-table-filters{width:100%;display:grid;grid-template-columns:1fr auto 1fr}.camp-report-section{padding:13px;border-radius:14px}.camp-project-grid{grid-template-columns:1fr}.camp-project-card__traffic b{font-size:20px}.camp-sale-card{grid-template-columns:1fr 52px 52px;padding:12px 10px}.camp-sale-card__identity small{font-size:9px}.camp-case-card__main{grid-template-columns:1fr 1fr}.camp-case-card__meta{overflow-wrap:anywhere}}

/* ── Admin Traffic Management ─────────────────────────────── */
.pv3-traffic-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.pv3-traffic-kpis {
  margin-bottom: 18px;
}

.pv3-traffic-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(150px, 1fr));
  gap: 10px;
  align-items: center;
}

.pv3-traffic-filters .pv3-input-filter,
.pv3-traffic-filters .pv3-select {
  width: 100%;
  min-width: 0;
}

.pv3-traffic-table td small {
  display: block;
  color: var(--c-text-muted);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 3px;
}

.pv3-traffic-id {
  color: var(--c-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}

.pv3-traffic-source {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  color: #047857;
  background: rgba(16, 185, 129, .12);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.pv3-traffic-modal {
  width: min(820px, calc(100vw - 32px));
}

.pv3-traffic-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pv3-traffic-detail-item {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-bg-subtle);
}

.pv3-traffic-detail-item span {
  display: block;
  margin-bottom: 5px;
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pv3-traffic-detail-item strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1280px) {
  .pv3-traffic-filters { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .pv3-traffic-search { grid-column: span 2; }
}

@media (max-width: 768px) {
  .pv3-traffic-heading { align-items: stretch; flex-direction: column; }
  .pv3-traffic-heading .pv3-btn { width: 100%; justify-content: center; }
  .pv3-traffic-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pv3-traffic-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv3-traffic-search { grid-column: 1 / -1; }
  .pv3-traffic-detail-grid { grid-template-columns: 1fr; }
  .pv3-traffic-table { min-width: 1080px; }
  .pv3-mobile-traffic-nav { display: flex; }
  .pv3-bottom-nav__item { min-width: 0; font-size: 9.5px; }
  .pv3-bottom-nav__item svg { width: 20px; height: 20px; }
}

/* ─── DARK THEME OVERRIDES ─── */
[data-theme="dark"] {
  --c-bg-page:          #0b0f19;
  --c-bg-surface:       #111827;
  --c-bg-subtle:        #1f2937;
  --c-bg-muted:         #182234;
  --c-bg-hover:         #1e293b;
  --c-bg-active:        #334155;
  --c-bg-sidebar:       #111827;
  --c-bg-glass:         rgba(17, 24, 39, 0.85);

  --c-border:           rgba(255, 255, 255, 0.08);
  --c-border-strong:    rgba(255, 255, 255, 0.16);
  --c-border-subtle:    rgba(255, 255, 255, 0.04);

  --c-text:             #f8fafc;
  --c-text-sec:         #cbd5e1;
  --c-text-muted:       #94a3b8;
  --c-text-subtle:      #64748b;
  --c-text-ph:          #64748b;

  --c-primary-subtle:   rgba(0, 176, 79, 0.12);
  --c-primary-border:   rgba(0, 176, 79, 0.3);

  --c-success-bg:       rgba(16, 185, 129, 0.12);
  --c-success-border:   rgba(16, 185, 129, 0.25);
  --c-success-text:     #34d399;

  --c-warning-bg:       rgba(245, 158, 11, 0.12);
  --c-warning-border:   rgba(245, 158, 11, 0.25);
  --c-warning-text:     #fbbf24;

  --c-danger-bg:        rgba(239, 68, 68, 0.12);
  --c-danger-border:    rgba(239, 68, 68, 0.25);
  --c-danger-text:      #f87171;

  --c-info-bg:          rgba(59, 130, 246, 0.12);
  --c-info-border:      rgba(59, 130, 246, 0.25);
  --c-info-text:        #60a5fa;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

/* ─── BASE RESET & DEFAULTS ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--c-bg-page);
  background-image: radial-gradient(circle at 15% 50%, var(--bg-gradient-1) 0%, transparent 60%), radial-gradient(circle at 85% 30%, var(--bg-gradient-2) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--c-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── CUSTOM SCROLLBARS ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-text-subtle); }

/* ─── APP LAYOUT ─── */
.pub-v3 {
  display: flex;
  min-height: 100vh;
  background: var(--c-bg-page);
}

.pv3 {
  display: flex;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* ─── SIDEBAR (LEFT NAVIGATION) ─── */
.pv3-sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--c-bg-sidebar);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-xs);
}

.pv3-sidebar.collapsed {
  width: 78px;
}

.pv3-sidebar-header {
  height: var(--header-h);
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}

.pv3-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--c-text);
  overflow: hidden;
}

.pv3-logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00b04f 0%, #059669 100%);
  box-shadow: 0 4px 10px rgba(0, 176, 79, 0.3);
  flex-shrink: 0;
}
.pv3-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pv3-sidebar-logo__text {
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s, width 0.2s;
  white-space: nowrap;
}
.pv3-sidebar.collapsed .pv3-sidebar-logo__text {
  display: none;
}

.pv3-sidebar-logo__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  letter-spacing: -0.02em;
}

.pv3-sidebar-logo__sub {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pv3-sidebar-toggle-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.pv3-sidebar-toggle-btn:hover {
  background: var(--c-bg-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

/* 3RDVN brand lockup: one persistent mark + animated text, driven by the
   sidebar's existing .collapsed state to avoid image swapping/flicker. */
.pv3-sidebar-brand {
  flex: 1;
  min-width: 0;
}

.pv3-sidebar-header {
  position: relative;
  padding-inline: 4px;
}

.pv3-sidebar-toggle-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
}

.logo3rdvn {
  --logo-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --logo-open: 280px;
  --logo-shut: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: var(--logo-open);
  min-width: 0;
  overflow: hidden;
  transition: width 420ms var(--logo-ease);
}

.pv3-sidebar.collapsed .logo3rdvn {
  width: var(--logo-shut);
  gap: 0;
}

.pv3-sidebar.collapsed .pv3-sidebar-brand {
  flex: 0 0 66px;
  overflow: visible;
}

.pv3-sidebar.collapsed .pv3-sidebar-toggle-btn {
  top: 22px;
  right: -14px;
}

.logo3rdvn-mark {
  width: 52px;
  height: 58px;
  flex-shrink: 0;
  object-fit: contain;
  transform-origin: center;
  transition: transform 420ms var(--logo-ease);
}

.pv3-sidebar.collapsed .logo3rdvn-mark {
  transform: scale(1.12);
}

.logo3rdvn-text {
  min-width: 0;
  max-width: 200px;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 240ms var(--logo-ease),
    transform 420ms var(--logo-ease),
    max-width 420ms var(--logo-ease);
}

.pv3-sidebar.collapsed .logo3rdvn-text {
  opacity: 0;
  max-width: 0;
  transform: translateX(-10px);
  pointer-events: none;
}

.logo3rdvn-wordmark {
  font-family: Manrope, "Avenir Next", Inter, system-ui, sans-serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
  white-space: nowrap;
  color: #0b2a4a;
}

.logo3rdvn-slogan {
  margin-top: 5px;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.05px;
  white-space: nowrap;
  line-height: 1.2;
}

.logo3rdvn-slogan-a { color: #c4a35a; }
.logo3rdvn-slogan-b { color: #0b2a4a; }

[data-theme="dark"] .logo3rdvn-wordmark,
[data-theme="dark"] .logo3rdvn-slogan-b {
  color: #f8fafc;
}

@media (prefers-reduced-motion: reduce) {
  .logo3rdvn,
  .logo3rdvn-mark,
  .logo3rdvn-text {
    transition: none;
  }
}

.pv3-sidebar-nav {
  flex: 1;
  padding: 18px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pv3-nav-section-label {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-subtle);
  padding: 12px 10px 6px;
  margin-top: 4px;
}
.pv3-sidebar.collapsed .pv3-nav-section-label {
  display: none;
}

.pv3-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  color: var(--c-text-sec);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  text-align: left;
  white-space: nowrap;
}

.pv3-nav-item svg {
  flex-shrink: 0;
  color: var(--c-text-muted);
  transition: color 0.15s;
}

.pv3-nav-item:hover {
  background: var(--c-bg-subtle);
  color: var(--c-text);
}
.pv3-nav-item:hover svg {
  color: var(--c-primary);
}

.pv3-nav-item.active {
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  font-weight: var(--fw-bold);
  border-color: var(--c-primary-border);
}
.pv3-nav-item.active svg {
  color: var(--c-primary);
}

.pv3-nav-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: #fee2e2;
  color: #dc2626;
}

.pv3-sidebar.collapsed .pv3-nav-item span {
  display: none;
}
.pv3-sidebar.collapsed .pv3-nav-item {
  justify-content: center;
  padding: 12px 0;
}

/* ─── MAIN CONTENT WRAPPER ─── */
.pv3-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pv3-main.sidebar-collapsed {
  margin-left: 78px;
}

/* ─── TOPBAR (HEADER) ─── */
.pv3-header {
  height: var(--header-h);
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 950;
  background: var(--c-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-border);
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pv3-main.sidebar-collapsed .pv3-header {
  left: 78px;
}

.pv3-sidebar-trigger {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  color: var(--c-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pv3-header-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  letter-spacing: -0.02em;
}

.pv3-header-search {
  position: relative;
  max-width: 360px;
  width: 100%;
  display: flex;
  align-items: center;
}
.pv3-header-search svg {
  position: absolute;
  left: 12px;
  color: var(--c-text-subtle);
  pointer-events: none;
}
.pv3-search-input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  color: var(--c-text);
  font-size: 13px;
  outline: none;
  transition: all 0.2s;
}
.pv3-search-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}

.pv3-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Buttons */
.pv3-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.pv3-btn-primary {
  background: linear-gradient(135deg, #00b04f 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 176, 79, 0.25);
}
.pv3-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 176, 79, 0.35);
  background: linear-gradient(135deg, #009643 0%, #047857 100%);
}

.pv3-btn-secondary {
  background: var(--c-bg-surface);
  color: var(--c-text-sec);
  border-color: var(--c-border);
  box-shadow: var(--shadow-xs);
}
.pv3-btn-secondary:hover {
  background: var(--c-bg-subtle);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

.pv3-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}
.pv3-btn-xs {
  padding: 4px 10px;
  font-size: 11px;
}

.pv3-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  color: var(--c-text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.pv3-btn-icon:hover {
  background: var(--c-bg-subtle);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

/* User Profile Badge */
.pv3-user-dropdown-wrap {
  position: relative;
}

.pv3-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  cursor: pointer;
  transition: all 0.15s;
}
.pv3-user-btn:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-xs);
}

.pv3-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pv3-user-btn__text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.pv3-user-btn__name {
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 14px;
}
.pv3-user-btn__code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
}

/* User Dropdown */
.pv3-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
}
.pv3-user-dropdown.open {
  display: flex;
}
.pv3-user-dropdown__header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
}
.pv3-user-dropdown__name {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}
.pv3-user-dropdown__code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
}
.pv3-user-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--c-text-sec);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.pv3-user-dropdown__item:hover {
  background: var(--c-bg-subtle);
  color: var(--c-text);
}
.pv3-user-dropdown__item--danger {
  color: var(--c-danger);
}
.pv3-user-dropdown__item--danger:hover {
  background: var(--c-danger-bg);
  color: var(--c-danger);
}
.pv3-user-dropdown__divider {
  height: 1px;
  background: var(--c-border);
}

/* ─── PAGE WRAPPER & VIEWS ─── */
.pv3-page {
  padding: calc(var(--header-h) + 24px) var(--page-pad) 48px var(--page-pad);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100vh;
}

.pv3-view {
  display: none;
  flex-direction: column;
  gap: 24px;
}
.pv3-view.active {
  display: flex;
  animation: viewFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── DASHBOARD LIVE FEED & SALES LEADERBOARD ─── */
.pv3-dashboard-feature-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pv3-live-feed {
  min-height: 48px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(16, 185, 129, .28);
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, rgba(16, 185, 129, .11), var(--c-bg-surface) 22%);
  box-shadow: var(--shadow-sm);
}
.pv3-live-feed__label {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  color: #047857;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  border-right: 1px solid rgba(16, 185, 129, .22);
  background: rgba(16, 185, 129, .09);
  flex: 0 0 auto;
  z-index: 2;
}
.pv3-live-feed__label span,
.pv3-leaderboard-live span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 5px rgba(16, 185, 129, .12);
  animation: pv3LivePulse 1.8s ease-in-out infinite;
}
.pv3-live-feed__viewport { min-width: 0; flex: 1; overflow: hidden; }
.pv3-live-feed__track {
  width: max-content;
  display: flex;
  align-items: center;
  animation: pv3Ticker 46s linear infinite;
}
.pv3-live-feed:hover .pv3-live-feed__track { animation-play-state: paused; }
.pv3-live-feed__track.is-static { animation: none; }
.pv3-live-feed__item {
  white-space: nowrap;
  padding: 0 30px 0 20px;
  font-size: 12.5px;
  color: var(--c-text-muted);
}
.pv3-live-feed__item strong { color: var(--c-text); }
.pv3-live-feed__item b { color: #059669; }
.pv3-live-feed__item em { color: var(--c-primary); font-style: normal; font-weight: 800; }
.pv3-live-feed__item time { color: var(--c-text-subtle); }
.pv3-live-feed__dot { display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: #10b981; vertical-align: 1px; }
.pv3-live-feed__empty { padding: 14px 18px; color: var(--c-text-muted); font-size: 12.5px; }
@keyframes pv3Ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pv3LivePulse { 50% { opacity: .45; transform: scale(.82); } }

.pv3-leaderboard-shell {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pv3-leaderboard-shell::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--c-primary), #10b981, transparent); opacity: .8; }
.pv3-leaderboard-header { min-height: 48px; padding-top: 9px; padding-bottom: 9px; }
.pv3-leaderboard-header h3 { font-size: 14px; }
.pv3-leaderboard-period { margin-top: 1px; color: var(--c-text-muted); font-size: 10.5px; }
.pv3-leaderboard-live { display: flex; align-items: center; gap: 8px; color: #059669; font-size: 11.5px; font-weight: 700; }
.pv3-leaderboard-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--c-border); }
.pv3-leaderboard-column { min-width: 0; padding: 10px 12px 12px; }
.pv3-leaderboard-column + .pv3-leaderboard-column { border-left: 1px solid var(--c-border); }
.pv3-leaderboard-title { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.pv3-leaderboard-title strong { display: block; color: var(--c-text); font-size: 12.5px; }
.pv3-leaderboard-title small { display: block; margin-top: 1px; color: var(--c-text-muted); font-size: 10px; }
.pv3-leaderboard-index { color: var(--c-primary); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.pv3-leaderboard-list { display: flex; flex-direction: column; gap: 4px; }
.pv3-rank-row { position: relative; min-height: 43px; display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 8px; overflow: hidden; border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-bg); transition: transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out; }
.pv3-rank-row:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--c-primary) 28%, var(--c-border)); box-shadow: 0 4px 14px rgba(15, 23, 42, .07); }
.pv3-rank-row--1 { min-height: 48px; border-color: rgba(245,158,11,.34); background: linear-gradient(100deg, rgba(255,247,204,.78), rgba(245,158,11,.08) 46%, var(--c-bg) 100%); box-shadow: inset 0 0 22px rgba(245,158,11,.06); }
.pv3-rank-row--2 { border-color: rgba(148,163,184,.30); background: linear-gradient(100deg, rgba(226,232,240,.52), var(--c-bg) 44%); }
.pv3-rank-row--3 { border-color: rgba(198,106,43,.24); background: linear-gradient(100deg, rgba(255,237,213,.48), var(--c-bg) 44%); }
.pv3-rank-row--1::after { content: ""; position: absolute; inset: 0; transform: translateX(-115%); background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.34) 50%, transparent 58%); animation: pv3RankSheen 5.4s ease-in-out infinite; pointer-events: none; }
.pv3-rank-number { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: var(--c-bg-subtle); color: var(--c-text-muted); font-size: 10.5px; font-weight: 800; }
.pv3-rank-star { position: relative; width: 34px; height: 34px; display: grid; place-items: center; isolation: isolate; filter: drop-shadow(0 3px 5px rgba(15,23,42,.18)); }
.pv3-rank-star::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: currentColor; opacity: .18; filter: blur(5px); z-index: -1; }
.pv3-rank-star svg { position: absolute; inset: 0; width: 34px; height: 34px; fill: currentColor; stroke: rgba(255,255,255,.88); stroke-width: 1.1; stroke-linejoin: round; }
.pv3-rank-star b { position: relative; z-index: 1; color: #fff; font-size: 12px; line-height: 1; font-weight: 950; text-shadow: 0 1px 3px rgba(0,0,0,.48); }
.pv3-rank-star--1 { color: #f2b705; transform: scale(1.12); animation: pv3RankStarGlow 2.2s ease-in-out infinite; }
.pv3-rank-star--2 { color: #8d9bab; }
.pv3-rank-star--3 { color: #bd642b; }
.pv3-rank-row--1 .pv3-rank-number { background: #fef3c7; color: #b45309; }
.pv3-rank-row--2 .pv3-rank-number { background: #f1f5f9; color: #475569; }
.pv3-rank-row--3 .pv3-rank-number { background: #ffedd5; color: #c2410c; }
.pv3-rank-person { min-width: 0; }
.pv3-rank-person strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); font-size: 11.5px; }
.pv3-rank-person small { display: block; margin-top: 1px; color: var(--c-text-muted); font-size: 9.5px; }
.pv3-rank-total { display: grid; gap: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv3-rank-total small { color: var(--c-text-subtle); font-size: 8px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.pv3-rank-total strong { color: #059669; font-size: 11px; font-weight: 900; }
.pv3-rank-row--1 .pv3-rank-total strong { color: #b77900; font-size: 12px; }
.pv3-leaderboard-empty { padding: 14px; text-align: center; color: var(--c-text-muted); font-size: 11px; }
@keyframes pv3RankSheen { 0%, 68% { transform: translateX(-115%); } 82%, 100% { transform: translateX(115%); } }
@keyframes pv3RankStarGlow { 50% { transform: scale(1.15) rotate(2deg); filter: drop-shadow(0 0 8px rgba(245,183,0,.62)); } }

.pv3-featured-compact { min-width: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg-surface); padding: 11px 12px 12px; box-shadow: var(--shadow-sm); }
.pv3-featured-compact__header { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.pv3-featured-compact__header .pv3-page-title { font-size: 14px; }
.pv3-featured-compact__header .pv3-page-subtitle { margin-top: 1px; font-size: 10.5px; }
#dashCampGrid { grid-template-columns: 1fr; gap: 6px; }
#dashCampGrid .pv3-plink-card { min-height: 0; padding: 9px 10px; gap: 0; border-radius: 9px; box-shadow: none; }
#dashCampGrid .pv3-plink-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
#dashCampGrid .pv3-plink-card__top { align-items: center; gap: 9px; }
#dashCampGrid .pv3-plink-card__logo { width: 38px; height: 38px; border-radius: 9px; padding: 4px; }
#dashCampGrid .pv3-plink-badge-row { display: none; }
#dashCampGrid .pv3-plink-card__name { font-size: 12px; }
#dashCampGrid .pv3-plink-card__desc { margin-top: 2px; font-size: 9.5px; line-height: 1.3; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
#dashCampGrid .pv3-plink-card__tags,
#dashCampGrid .pv3-card-copy-box,
#dashCampGrid .pv3-plink-card__footer { display: none; }

@media (max-width: 760px) {
  .pv3-dashboard-feature-row { grid-template-columns: 1fr; }
  .pv3-live-feed { min-height: 44px; border-radius: 12px; }
  .pv3-live-feed__label { padding: 0 10px; font-size: 10px; }
  .pv3-live-feed__item { padding-left: 14px; font-size: 11px; }
  .pv3-leaderboard-grid { grid-template-columns: 1fr; }
  .pv3-leaderboard-column { padding: 9px 10px 10px; }
  .pv3-leaderboard-column + .pv3-leaderboard-column { border-left: 0; border-top: 1px solid var(--c-border); }
  .pv3-leaderboard-header { min-height: 48px; padding: 9px 11px; }
  .pv3-rank-row { grid-template-columns: 35px minmax(0, 1fr) auto; padding: 5px 7px; }
  .pv3-rank-total strong { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pv3-live-feed__track { animation: none; }
  .pv3-live-feed__label span, .pv3-leaderboard-live span { animation: none; }
  .pv3-rank-row--1::after { animation: none; }
  .pv3-rank-star--1 { animation: none; }
}

@keyframes viewFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.pv3-page-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  letter-spacing: -0.03em;
}
.pv3-page-subtitle {
  font-size: 13px;
  color: var(--c-text-muted);
  margin-top: 2px;
}

/* ─── KPI HERO CARDS ─── */
.pv3-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pv3-kpi-card {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pv3-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-border-strong);
}

.pv3-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00b04f, #6366f1);
  opacity: 0.8;
}

.pv3-kpi-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.pv3-kpi-label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.pv3-kpi-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pv3-kpi-sub {
  font-size: 11.5px;
  color: var(--c-text-subtle);
  margin-top: 6px;
}

.pv3-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pv3-kpi-icon--blue   { background: #eff6ff; color: #2563eb; }
.pv3-kpi-icon--indigo { background: #eef2ff; color: #4f46e5; }
.pv3-kpi-icon--amber  { background: #fffbeb; color: #d97706; }
.pv3-kpi-icon--green  { background: #ecfdf5; color: #059669; }

/* ─── CAMPAIGN CARDS (KHO CHIẾN DỊCH & DASHBOARD) ─── */
.pv3-camp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.pv3-plink-card {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.pv3-plink-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-primary);
}

.pv3-plink-card__top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pv3-plink-card__logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--c-border);
  background: #ffffff;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.pv3-plink-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pv3-plink-card__info {
  flex: 1;
  min-width: 0;
}

.pv3-plink-badge-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.pv3-plink-badge {
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pv3-plink-badge--hot {
  background: #fee2e2;
  color: #dc2626;
}
.pv3-plink-badge--info {
  background: var(--c-bg-subtle);
  color: var(--c-text-sec);
}

.pv3-plink-card__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv3-plink-card__desc {
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 16px;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv3-plink-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pv3-plink-tag {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--c-bg-subtle);
  color: var(--c-text-sec);
  border: 1px solid var(--c-border);
}
.pv3-plink-tag--green {
  background: var(--c-success-bg);
  color: var(--c-success-text);
  border-color: var(--c-success-border);
}

/* Quick Copy Box on Card */
.pv3-card-copy-box {
  background: var(--c-bg-subtle);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pv3-card-copy-box__url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv3-plink-card__footer {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
}

/* ─── DATA TABLES & CONTAINERS ─── */
.pv3-table-shell {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pv3-card-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-surface);
}
.pv3-card-header h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.pv3-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 300px);
  min-height: 240px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  -webkit-overflow-scrolling: touch;
}

.pv3-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.pv3-table-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.pv3-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 13px;
}

.pv3-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.pv3-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-bg-subtle, #f8fafc);
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-border);
  box-shadow: inset 0 -1px 0 var(--c-border), 0 2px 4px rgba(0, 0, 0, 0.03);
  white-space: nowrap;
}

.pv3-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border-subtle);
  color: var(--c-text);
  vertical-align: middle;
}

.pv3-table tbody tr {
  transition: background 0.15s;
}
.pv3-table tbody tr:hover {
  background: var(--c-bg-subtle);
}

.pv3-mobile-customer-group {
  display: none;
}

/* ─── KPI METRIC STRIP (LOS-STYLE REALTIME STATS) ─── */
.pv3-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.pv3-kpi-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pv3-kpi-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pv3-kpi-item__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.pv3-kpi-item__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pv3-kpi-item__label {
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv3-kpi-item__value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
}

.pv3-kpi-item--primary .pv3-kpi-item__icon { background: rgba(37, 99, 235, 0.1); color: var(--c-primary); }
.pv3-kpi-item--primary .pv3-kpi-item__value { color: var(--c-primary); }

.pv3-kpi-item--warning .pv3-kpi-item__icon { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.pv3-kpi-item--warning .pv3-kpi-item__value { color: #d97706; }

.pv3-kpi-item--success .pv3-kpi-item__icon { background: rgba(16, 185, 129, 0.12); color: #059669; }
.pv3-kpi-item--success .pv3-kpi-item__value { color: #059669; }

.pv3-kpi-item--purple .pv3-kpi-item__icon { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.pv3-kpi-item--purple .pv3-kpi-item__value { color: #7c3aed; }

.pv3-kpi-item--danger .pv3-kpi-item__icon { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.pv3-kpi-item--danger .pv3-kpi-item__value { color: #dc2626; }

.pv3-kpi-item--info .pv3-kpi-item__icon { background: rgba(6, 182, 212, 0.12); color: #0891b2; }
.pv3-kpi-item--info .pv3-kpi-item__value { color: #0891b2; }

/* SHB has eight metrics: keep every label and amount readable instead of
   forcing all cards into one clipped row. */
#kpiStripShb {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#kpiStripShb .pv3-kpi-item {
  min-width: 0;
}

#kpiStripShb .pv3-kpi-item__content {
  flex: 1;
  min-width: 0;
}

#kpiStripShb .pv3-kpi-item__label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
  min-height: 2.5em;
}

#kpiStripShb .pv3-kpi-item__value {
  max-width: 100%;
  font-size: clamp(15px, 1.15vw, 18px);
  letter-spacing: -0.01em;
}

@media (max-width: 1100px) {
  #kpiStripShb {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #kpiStripShb {
    grid-template-columns: 1fr;
  }

  #kpiStripShb .pv3-kpi-item__label {
    min-height: 0;
  }
}

/* Status Badges */
.pv3-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.pv3-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.pv3-badge-success {
  background: var(--c-success-bg);
  color: var(--c-success-text);
  border: 1px solid var(--c-success-border);
}
.pv3-badge-success::before { background: var(--c-success); }

.pv3-badge-warning {
  background: var(--c-warning-bg);
  color: var(--c-warning-text);
  border: 1px solid var(--c-warning-border);
}
.pv3-badge-warning::before { background: var(--c-warning); }

.pv3-badge-danger {
  background: var(--c-danger-bg);
  color: var(--c-danger-text);
  border: 1px solid var(--c-danger-border);
}
.pv3-badge-danger::before { background: var(--c-danger); }

.pv3-badge-primary {
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  border: 1px solid var(--c-primary-border);
}
.pv3-badge-primary::before { background: var(--c-primary); }

.pv3-badge--primary {
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  border: 1px solid var(--c-primary-border);
}
.pv3-badge--primary::before { background: var(--c-primary); }

.pv3-badge--success {
  background: var(--c-success-bg);
  color: var(--c-success-text);
  border: 1px solid var(--c-success-border);
}
.pv3-badge--success::before { background: var(--c-success); }

.pv3-badge--warning {
  background: var(--c-warning-bg);
  color: var(--c-warning-text);
  border: 1px solid var(--c-warning-border);
}
.pv3-badge--warning::before { background: var(--c-warning); }

.pv3-badge--danger {
  background: var(--c-danger-bg);
  color: var(--c-danger-text);
  border: 1px solid var(--c-danger-border);
}
.pv3-badge--danger::before { background: var(--c-danger); }

.pv3-badge--purple {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}
.pv3-badge--purple::before { background: #8b5cf6; }

.pv3-badge--info {
  background: var(--c-info-bg);
  color: var(--c-info-text);
  border: 1px solid var(--c-info-border);
}
.pv3-badge--info::before { background: var(--c-info); }

/* ─── TABLE FILTER TOOLBAR & LUXURY CONTROLS ─── */
.pv3-table-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--c-bg-surface);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  margin-bottom: 14px;
}

.pv3-table-filters--sticky {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--c-bg-surface);
}

.pv3-input-date {
  width: 135px !important;
  font-size: 12.5px !important;
  padding: 0 8px !important;
}

.pv3-filter-search-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
}

.pv3-filter-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}

.pv3-input-filter {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--c-text);
  background: var(--c-bg-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.pv3-input-filter:hover {
  border-color: var(--c-border-strong);
  background: var(--c-bg-surface);
}

.pv3-input-filter:focus {
  background: var(--c-bg-surface);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3.5px var(--c-primary-glow);
}

.pv3-filter-select-wrap {
  position: relative;
  min-width: 165px;
}

.pv3-select {
  width: 100%;
  height: 42px;
  padding: 0 34px 0 14px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text-sec);
  background-color: var(--c-bg-page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.pv3-select:hover {
  border-color: var(--c-border-strong);
  background-color: var(--c-bg-surface);
  color: var(--c-text);
}

.pv3-select:focus {
  background-color: var(--c-bg-surface);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3.5px var(--c-primary-glow);
}

/* ─── SEARCHABLE SELECT DROPDOWN COMPONENT ─── */
.pv3-custom-select-wrap {
  position: relative;
  min-width: 170px;
  user-select: none;
}

.pv3-custom-select-trigger {
  width: 100%;
  height: 42px;
  padding: 0 34px 0 14px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text);
  background-color: var(--c-bg-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.pv3-custom-select-trigger:hover {
  border-color: var(--c-border-strong);
  background-color: var(--c-bg-surface);
}

.pv3-custom-select-wrap.active {
  z-index: 2500 !important;
  position: relative !important;
}

.pv3-custom-select-wrap.active .pv3-custom-select-trigger {
  background-color: var(--c-bg-surface);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3.5px var(--c-primary-glow);
}

.pv3-custom-select-trigger .pv3-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  transition: transform 0.2s;
  pointer-events: none;
}

.pv3-custom-select-wrap.active .pv3-select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--c-primary);
}

.pv3-custom-select-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
  z-index: 1050;
  display: none;
  flex-direction: column;
  overflow: hidden;
  min-width: 210px;
}

.pv3-custom-select-wrap.active .pv3-custom-select-dropdown {
  display: flex;
  z-index: 2600 !important;
}

/* Elevate ancestor container when select is active so tables or siblings never overlay it */
.pv3-filter-select-wrap.has-active-select,
.pv3-filter-select-wrap:has(.pv3-custom-select-wrap.active),
.pv3-table-filters.has-active-select,
.pv3-table-filters:has(.pv3-custom-select-wrap.active),
.pv3-table-shell.has-active-select,
.pv3-table-shell:has(.pv3-custom-select-wrap.active),
.pv3-form-group.has-active-select,
.pv3-form-group:has(.pv3-custom-select-wrap.active),
.commission-user-filters.has-active-select,
.commission-user-filters:has(.pv3-custom-select-wrap.active),
.lost-order-filters.has-active-select,
.lost-order-filters:has(.pv3-custom-select-wrap.active),
.pv3-traffic-filters.has-active-select,
.pv3-traffic-filters:has(.pv3-custom-select-wrap.active) {
  z-index: 2500 !important;
  overflow: visible !important;
}

.pv3-select-search-box {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pv3-select-search-input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  outline: none;
  color: var(--c-text);
  box-sizing: border-box;
}

.pv3-select-search-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-primary-glow);
}

.pv3-select-options-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}

.pv3-select-option {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--c-text-sec);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.1s;
}

.pv3-select-option:hover {
  background: var(--c-bg-hover);
  color: var(--c-text);
}

.pv3-select-option.selected {
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  font-weight: 600;
}

.pv3-select-option.hidden {
  display: none;
}

/* Table Pagination (Luxury Fintech) */
.pv3-pagination {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  flex-wrap: wrap;
  gap: 12px;
}

.pv3-pagin-info {
  font-size: 13px;
  color: var(--c-text-muted);
  font-weight: 500;
}

.pv3-pagin-info strong {
  color: var(--c-text);
  font-weight: 700;
}

.pv3-pagin-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pv3-pagin-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  color: var(--c-text-sec);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-sizing: border-box;
}

.pv3-pagin-btn:hover:not(:disabled):not(.active) {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-subtle);
  transform: translateY(-1px);
}

.pv3-pagin-btn.active {
  background: var(--c-primary);
  color: #ffffff !important;
  border-color: var(--c-primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 176, 79, 0.35);
}

.pv3-pagin-btn:disabled,
.pv3-pagin-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--c-bg-page);
  border-color: var(--c-border);
  color: var(--c-text-muted);
}

.pv3-pagin-ellipsis {
  padding: 0 6px;
  color: var(--c-text-muted);
  font-size: 13px;
  font-weight: 700;
}

/* Row Action Buttons */
.pv3-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pv3-btn-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  color: var(--c-text-sec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.pv3-btn-icon:hover {
  background: var(--c-bg-hover);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

.pv3-btn-icon--primary:hover {
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  border-color: var(--c-primary);
}

.pv3-btn-icon--warning:hover {
  background: #fef3c7;
  color: #d97706;
  border-color: #f59e0b;
}

.pv3-btn-icon--danger:hover {
  background: var(--c-danger-subtle);
  color: var(--c-danger);
  border-color: var(--c-danger);
}

/* Detail Modal Key-Value Grid */
.pv3-detail-card {
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 14px;
}

.pv3-detail-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pv3-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.pv3-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pv3-detail-label {
  font-size: 11.5px;
  color: var(--c-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pv3-detail-val {
  font-size: 13.5px;
  color: var(--c-text);
  font-weight: 600;
}

/* ─── MODALS ─── */
.pv3-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pv3-modal-backdrop.open {
  display: flex;
}

.pv3-modal, .pv3-modal-card {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.pv3-modal--lg {
  max-width: 780px;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pv3-modal-header {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-border);
}
.pv3-modal-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.pv3-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pv3-modal-footer {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
}

/* ─── TOAST NOTIFICATIONS ─── */
.pv3-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.pv3-toast {
  background: var(--c-text);
  color: var(--c-bg-page);
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── FORM INPUTS ─── */
.pv3-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pv3-form-label {
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-sec);
}
.pv3-form-input {
  height: 42px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  color: var(--c-text);
  font-size: 13.5px;
  outline: none;
  transition: all 0.15s;
}
.pv3-form-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}

/* ─── EMPTY STATES ─── */
.pv3-campaign-admin__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.pv3-campaign-admin__notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--c-primary-border);
  border-radius: var(--r-sm);
  background: var(--c-primary-subtle);
  color: var(--c-text-sec);
  font-size: 13px;
  line-height: 1.5;
}

.pv3-campaign-admin__notice strong {
  flex: 0 0 auto;
  color: var(--c-primary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pv3-campaign-admin__list {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-surface);
  box-shadow: var(--shadow-sm);
}

.pv3-campaign-admin__item + .pv3-campaign-admin__item {
  border-top: 1px solid var(--c-border);
}

.pv3-campaign-admin__item-head,
.pv3-campaign-admin__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pv3-campaign-admin__item-head {
  padding: 16px 18px;
  background: var(--c-bg-subtle);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  transition: background .18s ease;
}
.pv3-campaign-admin__item-head:hover { background: var(--c-bg-hover); }
.pv3-campaign-admin__item-head:focus-visible { box-shadow: inset 0 0 0 2px var(--c-primary); outline: none; }

.pv3-campaign-admin__identity,
.pv3-campaign-admin__state-control,
.pv3-campaign-admin__toggle {
  display: flex;
  align-items: center;
}

.pv3-campaign-admin__identity { gap: 12px; min-width: 0; }
.pv3-campaign-admin__identity img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  padding: 5px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: #fff;
}
.pv3-campaign-admin__identity h3 {
  margin: 0 0 3px;
  color: var(--c-text);
  font-size: 15px;
  font-weight: var(--fw-bold);
}
.pv3-campaign-admin__identity span {
  color: var(--c-text-muted);
  font-size: 11.5px;
}

.pv3-campaign-admin__state-control { gap: 14px; }
.pv3-campaign-admin__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-sec);
  cursor: pointer;
}
.pv3-campaign-admin__expand:hover { background: var(--c-bg-hover); color: var(--c-text); }
.pv3-campaign-admin__expand svg { transition: transform .18s ease; }
.pv3-campaign-admin__item.is-expanded .pv3-campaign-admin__expand svg { transform: rotate(180deg); }
.pv3-campaign-admin__status {
  padding: 5px 9px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.pv3-campaign-admin__status.is-open { background: var(--c-success-bg); color: var(--c-success-text); }
.pv3-campaign-admin__status.is-closed { background: var(--c-warning-bg); color: var(--c-warning-text); }

.pv3-campaign-admin__toggle { gap: 9px; cursor: pointer; color: var(--c-text-sec); font-size: 12.5px; font-weight: var(--fw-semibold); }
.pv3-campaign-admin__toggle input { position: absolute; opacity: 0; pointer-events: none; }
.pv3-campaign-admin__toggle i {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 38px;
  border-radius: 999px;
  background: var(--c-border-strong);
  transition: background .18s ease;
}
.pv3-campaign-admin__toggle i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.25);
  transition: transform .18s ease;
}
.pv3-campaign-admin__toggle input:checked + i { background: var(--c-success); }
.pv3-campaign-admin__toggle input:checked + i::after { transform: translateX(16px); }
.pv3-campaign-admin__toggle input:focus-visible + i { box-shadow: 0 0 0 3px var(--c-primary-glow); }

.pv3-campaign-admin__body { padding: 18px; }
.pv3-campaign-admin__schedule {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.pv3-campaign-admin__datetime {
  width: 100%;
  font-family: var(--font-body);
  color-scheme: light;
}
[data-theme="dark"] .pv3-campaign-admin__datetime { color-scheme: dark; }
.pv3-campaign-admin__message {
  width: 100%;
  min-height: 82px;
  height: auto;
  padding: 11px 13px;
  resize: vertical;
  font-family: var(--font-body);
  line-height: 1.5;
}
.pv3-campaign-admin__footer {
  min-height: 56px;
  padding: 10px 18px;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
}
.pv3-campaign-admin__footer > span { color: var(--c-text-muted); font-size: 11.5px; }

.pv3-campaign-admin__body,
.pv3-campaign-admin__footer { display: none; }
.pv3-campaign-admin__item.is-expanded .pv3-campaign-admin__body { display: block; }
.pv3-campaign-admin__item.is-expanded .pv3-campaign-admin__footer { display: flex; }

@media (max-width: 680px) {
  .pv3-campaign-admin__header,
  .pv3-campaign-admin__item-head,
  .pv3-campaign-admin__footer { align-items: stretch; flex-direction: column; }
  .pv3-campaign-admin__notice { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pv3-campaign-admin__state-control { justify-content: space-between; }
  .pv3-campaign-admin__schedule { grid-template-columns: 1fr; }
  .pv3-campaign-admin__footer .pv3-btn { width: 100%; justify-content: center; }
}

.pv3-empty-state {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pv3-empty-state__icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.pv3-empty-state__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}
.pv3-empty-state__desc {
  font-size: 12.5px;
  color: var(--c-text-muted);
  margin-top: 4px;
}

/* ─── RESPONSIVE BREAKPOINTS ─── */
@media (max-width: 992px) {
  .pv3-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --page-pad: 16px; }
  .pv3-sidebar {
    transform: translateX(-280px);
    width: 260px !important;
  }
  .pv3-sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }
  .pv3-sidebar-trigger {
    display: flex;
  }
  .pv3-main, .pv3-main.sidebar-collapsed {
    margin-left: 0 !important;
  }
  .pv3-user-btn__text {
    display: none;
  }
  .pv3-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.flex-1 { flex: 1; }
.text-muted { color: var(--c-text-muted); }
.text-sm { font-size: 12px; }
.mono { font-family: var(--font-mono); }
.font-semibold { font-weight: var(--fw-semibold); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── NOTIFICATION CENTER & WEB PUSH ─── */
.pv3-notif-dropdown-wrap {
  position: relative;
}

.pv3-notif-btn {
  position: relative;
}

.pv3-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--c-danger, #ef4444);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
  animation: notifPulse 2s infinite;
}

@keyframes notifPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.pv3-notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: notifFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pv3-notif-dropdown.active {
  display: flex;
}

@keyframes notifFadeIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pv3-notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--c-border);
}

.pv3-notif-mark-read {
  background: none;
  border: none;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: all .15s;
}
.pv3-notif-mark-read:hover {
  background: var(--c-primary-subtle);
}

.pv3-notif-push-card {
  background: var(--c-bg-subtle);
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-border);
}

.pv3-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.pv3-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.pv3-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--c-border-strong);
  transition: .25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 999px;
}
.pv3-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
input:checked + .pv3-slider {
  background-color: var(--c-primary);
}
input:checked + .pv3-slider:before {
  transform: translateX(16px);
}

.pv3-notif-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-surface);
}
.pv3-notif-tab {
  background: none;
  border: 1px solid transparent;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .15s;
}
.pv3-notif-tab.active {
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  border-color: var(--c-primary-border);
}

.pv3-notif-list {
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.pv3-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.pv3-notif-item:hover {
  background: var(--c-bg-subtle);
}
.pv3-notif-item.unread {
  background: var(--c-primary-subtle);
}

.pv3-notif-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.pv3-notif-item__icon.success { background: #dcfce7; color: #16a34a; }
.pv3-notif-item__icon.warning { background: #fef3c7; color: #d97706; }
.pv3-notif-item__icon.danger  { background: #fee2e2; color: #dc2626; }
.pv3-notif-item__icon.info    { background: #e0e7ff; color: #4338ca; }

.pv3-notif-item__content {
  flex: 1;
  min-width: 0;
}
.pv3-notif-item__title {
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 18px;
  margin-bottom: 4px;
}
.pv3-notif-item__body {
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.55;
  margin-bottom: 6px;
  white-space: pre-line;
  word-break: break-word;
}
.pv3-notif-item__time {
  font-size: 11px;
  color: var(--c-text-subtle);
  font-weight: var(--fw-medium);
}

/* ─── CAMPAIGN DETAIL MODAL STYLES ─── */
.pv3-camp-detail__hero, .pv3-camp-detail-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px;
}

.pv3-camp-detail__logo, .pv3-camp-detail__logo-wrap {
  width: 72px;
  height: 72px;
  min-width: 72px;
  max-width: 72px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: #ffffff;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pv3-camp-detail__logo img,
.pv3-camp-detail__logo-wrap img,
#detailHeroLogo {
  width: 100% !important;
  height: 100% !important;
  max-width: 60px !important;
  max-height: 60px !important;
  object-fit: contain !important;
  display: block;
}

.pv3-btn-admin-edit-logo {
  margin-top: 6px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--c-border-strong);
  background: var(--c-bg-surface);
  color: var(--c-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.pv3-btn-admin-edit-logo:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.pv3-camp-detail__meta {
  flex: 1;
  min-width: 0;
}

.pv3-camp-detail__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  line-height: 24px;
}
.pv3-camp-detail__desc {
  font-size: 13px;
  color: var(--c-text-muted);
  margin-top: 4px;
}

.pv3-detail-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 2px;
}
.pv3-detail-tab-btn {
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.pv3-detail-tab-btn.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

.pv3-detail-pane {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.pv3-detail-pane.active {
  display: flex;
}

.pv3-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pv3-info-chip {
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pv3-info-chip__label {
  font-size: 11px;
  color: var(--c-text-subtle);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}
.pv3-info-chip__value {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.pv3-step-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border-subtle);
}
.pv3-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pv3-step-text {
  font-size: 13px;
  color: var(--c-text);
  line-height: 20px;
}

/* ─── LOGIN PAGE STYLES ─── */
.pv3-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 10%, rgba(0, 176, 79, 0.08) 0%, transparent 60%), var(--c-bg-page);
  padding: 24px;
}

.pv3-login-wrap {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pv3-login-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pv3-login-logo {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, #00b04f 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 176, 79, 0.35);
  overflow: hidden;
}
.pv3-login-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pv3-login-brand__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  letter-spacing: -0.03em;
}
.pv3-login-brand__desc {
  font-size: 13.5px;
  color: var(--c-text-muted);
  line-height: 20px;
}

.pv3-login-card {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-xl);
}

.pv3-login-alert {
  display: none;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: var(--fw-medium);
  margin-bottom: 16px;
}
.pv3-login-alert.error {
  display: block;
  background: var(--c-danger-bg);
  color: var(--c-danger-text);
  border: 1px solid var(--c-danger-border);
}

.pv3-login-footer {
  text-align: center;
  font-size: 12px;
  color: var(--c-text-subtle);
  line-height: 18px;
}

/* ─── PUSH NOTIFICATION BANNER ─── */
.pv3-push-banner {
  background: linear-gradient(135deg, rgba(0, 176, 79, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
  border: 1px solid var(--c-primary-border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-xs);
  animation: bannerFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bannerFade {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.pv3-push-banner__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--c-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 176, 79, 0.2);
}

.pv3-modal-close {
  background: none;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.pv3-modal-close:hover {
  background: var(--c-bg-subtle);
  color: var(--c-text);
}

/* ─── REALTIME NOTIFICATION ANIMATIONS & LIVE TOAST ─── */
@keyframes pv3BellShake {
  0% { transform: rotate(0); }
  15% { transform: rotate(16deg) scale(1.15); }
  30% { transform: rotate(-14deg) scale(1.15); }
  45% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}

.pv3-bell-shake {
  animation: pv3BellShake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

.pv3-live-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  max-width: 380px;
  width: calc(100vw - 48px);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 99999;
  cursor: pointer;
  animation: pv3ToastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pv3-live-toast:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.pv3-live-toast--fadeout {
  opacity: 0;
  transform: translateY(-16px) scale(0.95);
}

@keyframes pv3ToastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pv3-live-toast--success {
  border-left: 4px solid #10b981;
}

.pv3-live-toast--danger {
  border-left: 4px solid #ef4444;
}

.pv3-live-toast--warning {
  border-left: 4px solid #f59e0b;
}

.pv3-live-toast--info {
  border-left: 4px solid #3b82f6;
}

.pv3-live-toast__icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.pv3-live-toast__body {
  flex: 1;
  min-width: 0;
}

.pv3-live-toast__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.pv3-live-toast__title {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
}

.pv3-live-toast__time {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.pv3-live-toast__text {
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.4;
  word-break: break-word;
}

.pv3-live-toast__close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
  margin-top: -2px;
  margin-right: -4px;
  transition: color 0.15s;
}

.pv3-live-toast__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   NATIVE MOBILE APP UI & BOTTOM NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════ */

/* Mobile Bottom Navigation Bar */
.pv3-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--c-card-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--c-border);
  z-index: 990;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.pv3-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 700;
  transition: all 0.15s ease;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  cursor: pointer;
}

.pv3-bottom-nav__item svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pv3-bottom-nav__item.active {
  color: var(--c-primary);
}

.pv3-bottom-nav__item.active svg {
  transform: scale(1.15);
  stroke: var(--c-primary);
}

.pv3-bottom-nav__item.active::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 20px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--c-primary);
  box-shadow: 0 0 8px var(--c-primary-glow);
}

.pv3-bottom-nav__badge {
  position: absolute;
  top: 6px;
  right: 25%;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--c-danger);
  color: white;
  font-size: 9.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
}

/* Smart PWA Install Bottom Sheet Modal */
.pv3-pwa-install-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pv3-pwa-install-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.pv3-pwa-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--c-card);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  border: 1px solid var(--c-border-strong);
  border-bottom: none;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  position: relative;
}

.pv3-pwa-install-backdrop.open .pv3-pwa-sheet {
  transform: translateY(0);
}

.pv3-pwa-sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--c-border-strong);
  margin: 0 auto 18px;
}

.pv3-pwa-sheet__logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  margin: 0 auto 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 2px solid var(--c-border);
}

.pv3-pwa-sheet__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: 6px;
}

.pv3-pwa-sheet__subtitle {
  font-size: 13px;
  color: var(--c-text-muted);
  line-height: 1.5;
  margin-bottom: 18px;
}

.pv3-pwa-sheet__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 20px;
}

.pv3-pwa-sheet__feat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text);
}

/* iOS Safari Bouncing Share Pointer */
.pv3-ios-pointer {
  display: none;
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-card);
  border: 2px solid var(--c-primary);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 10001;
  text-align: center;
  animation: pv3Bounce 1.5s infinite;
  max-width: 320px;
  width: 90%;
}

.pv3-ios-pointer__arrow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--c-primary);
}

@keyframes pv3Bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -10px); }
}

/* ═══════════════════════════════════════════════════════════════
   DEDICATED NATIVE MOBILE APP DESIGN SYSTEM & BOTTOM SHEETS
   ═══════════════════════════════════════════════════════════════ */

/* Mobile Header Brand & Logo */
.pv3-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pv3-header-brand-logo {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Mobile Member Hero Card Widget */
.pv3-mobile-user-card {
  display: none;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.pv3-mobile-user-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pv3-mobile-user-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-primary), #059669);
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px var(--c-primary-glow);
}

.pv3-mobile-user-card__info {
  flex: 1;
  min-width: 0;
}

.pv3-mobile-user-card__name {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.pv3-mobile-user-card__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.pv3-mobile-user-card__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}

.pv3-mobile-quick-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pv3-mobile-quick-btn:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.15);
}

.pv3-mobile-quick-btn svg {
  color: var(--c-primary);
}

/* Profile Hero Component */
.pv3-profile-hero {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
}

.pv3-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-primary), #059669);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 4px 12px var(--c-primary-glow);
  flex-shrink: 0;
}

.pv3-profile-main {
  flex: 1;
  min-width: 0;
}

.pv3-profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pv3-profile-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-text);
  margin: 0;
  line-height: 1.3;
}

.pv3-profile-meta-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--c-text-muted);
}

.pv3-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--c-bg-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  border: 1px solid var(--c-border);
}

/* Detail Card & Grid */
.pv3-detail-card {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
  box-sizing: border-box;
  width: 100%;
}

.pv3-detail-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: 12px;
  border-bottom: 1px solid var(--c-border-subtle);
  padding-bottom: 8px;
}

.pv3-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
}

.pv3-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pv3-detail-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
}

.pv3-detail-val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Universal Anti-Distortion & Strict SVG/Icon Sizing */
svg {
  flex-shrink: 0 !important;
  display: inline-block;
  vertical-align: middle;
  shape-rendering: auto;
}

img {
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MEDIA QUERY: PURE DEDICATED NATIVE MOBILE APP UI (< 768px)
   ═══════════════════════════════════════════════════════════════ */
.pv3-mobile-report-projects {
  display: none;
}

@media (max-width: 768px) {
  .pv3-mobile-customer-group {
    display: block;
    width: max-content;
    max-width: 220px;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 25%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
    color: var(--c-text);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .pv3-mobile-customer-group span {
    color: var(--c-text-muted);
    font-weight: 600;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  .pv3 {
    flex-direction: column !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .pv3-sidebar {
    display: none !important;
  }

  .pv3-main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .pv3-bottom-nav {
    display: flex !important;
  }

  .pv3-header-brand-logo {
    display: block !important;
  }

  .pv3-mobile-user-card {
    display: block !important;
  }

  .pv3-hide-mobile {
    display: none !important;
  }

  .pv3-sidebar-trigger {
    display: none !important;
  }

  .pv3-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 14px 6px !important;
    height: 56px !important;
    min-height: 56px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .pv3-page {
    padding: calc(56px + env(safe-area-inset-top, 0px) + 12px) 12px calc(80px + env(safe-area-inset-bottom, 0px)) 12px !important;
  }

  .pv3-header-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
  }

  .pv3-header-search {
    display: none !important;
  }

  .pv3-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .pv3-user-btn {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .pv3-user-btn__text,
  .pv3-user-btn svg {
    display: none !important;
  }

  .pv3-user-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  .pv3-btn-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .pv3-view {
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .pv3-mobile-report-projects {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 2px 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pv3-mobile-report-projects::-webkit-scrollbar {
    display: none;
  }

  .pv3-mobile-report-projects button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    background: var(--c-bg-surface);
    color: var(--c-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
  }

  .pv3-mobile-report-projects button.active {
    border-color: var(--c-success);
    background: color-mix(in srgb, var(--c-success) 16%, var(--c-bg-surface));
    color: var(--c-success);
  }

  .pv3-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .pv3-page-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .pv3-kpi-grid,
  .pv3-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .pv3-kpi-card,
  .pv3-stat-card {
    padding: 12px 10px !important;
    gap: 8px !important;
    border-radius: var(--radius-md) !important;
  }

  .pv3-kpi-icon,
  .pv3-stat-card__icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
  }

  .pv3-kpi-icon svg,
  .pv3-stat-card__icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .pv3-kpi-val,
  .pv3-stat-card__val {
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .pv3-kpi-label,
  .pv3-stat-card__label {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .pv3-camp-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .pv3-plink-card {
    padding: 16px 14px !important;
    border-radius: var(--radius-lg) !important;
  }

  .pv3-plink-card__logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: var(--radius-md) !important;
  }

  .pv3-plink-card__name {
    font-size: 15px !important;
  }

  .pv3-card-copy-box {
    padding: 8px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .pv3-card-copy-box__url {
    font-size: 11.5px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Bottom Sheets for All Modals on Mobile */
  .pv3-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
  }

  .pv3-modal,
  .pv3-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    border: 1px solid var(--c-border-strong) !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .pv3-modal-header {
    padding: 16px 18px 12px !important;
    border-bottom: 1px solid var(--c-border) !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }

  .pv3-modal-header::before {
    content: '' !important;
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 36px !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: var(--c-border-strong) !important;
  }

  .pv3-modal-body {
    padding: 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .pv3-modal-footer {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--c-border) !important;
    flex-shrink: 0 !important;
    background: var(--c-bg-surface) !important;
    gap: 8px !important;
  }

  .pv3-modal-footer .pv3-btn {
    flex: 1 !important;
    height: 44px !important;
    font-size: 14px !important;
    justify-content: center !important;
  }

  .pv3-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .pv3-notif-dropdown {
    width: calc(100vw - 20px) !important;
    right: -40px !important;
    max-width: 350px !important;
  }

  .pv3-user-dropdown {
    width: calc(100vw - 20px) !important;
    right: 0 !important;
    max-width: 270px !important;
  }
}

/* ─── MOBILE SIDEBAR & DRAWER SYSTEM (DEFINITIVE HIGH-PRIORITY OVERRIDE) ─── */
@media (max-width: 768px) {
  /* Backdrop sits above bottom nav (4000) */
  .pv3-sidebar-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 4990 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  .pv3-sidebar-backdrop.open {
    display: block !important;
  }
  body.mobile-sidebar-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Drawer sits above bottom nav (5000 vs 4000) so no menu items are covered */
  .pv3-sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: min(85vw, 310px) !important;
    max-width: 310px !important;
    z-index: 5000 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    background: var(--c-bg-sidebar) !important;
    border-right: 1px solid var(--c-border) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  .pv3-sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* Header: clean flex row, no cut-off brand/logo */
  .pv3-sidebar-header {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 12px 0 16px !important;
    border-bottom: 1px solid var(--c-border) !important;
    background: var(--c-bg-surface) !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  .pv3-sidebar-brand {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-decoration: none !important;
  }
  .logo3rdvn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .logo3rdvn-mark {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
  }
  .logo3rdvn-text {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .logo3rdvn-wordmark {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    color: var(--c-text) !important;
  }
  .logo3rdvn-slogan {
    display: flex !important;
    flex-direction: column !important;
    margin-top: 2px !important;
    font-size: 7.5px !important;
    line-height: 1.2 !important;
    color: var(--c-text-muted) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .pv3-sidebar-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
    background: var(--c-bg-subtle) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
  }

  /* Navigation body: smooth scrolling, comfortable safe-area bottom padding */
  .pv3-sidebar-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 10px calc(48px + env(safe-area-inset-bottom, 0px)) 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-height: 0 !important;
  }
  .pv3-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  .pv3-nav-count {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-size: 9.5px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }
  .pv3-nav-section-label {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--c-text-muted) !important;
    padding: 10px 10px 4px !important;
    margin-top: 6px !important;
    display: block !important;
  }

  /* Header trigger button */
  .pv3-sidebar-trigger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: var(--c-bg-subtle) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text) !important;
    cursor: pointer !important;
  }

  /* Bottom nav: 5 items cleanly spaced */
  .pv3-bottom-nav > .pv3-bottom-nav__item:nth-child(n+5) { display: none !important; }
  .pv3-bottom-nav > .pv3-bottom-nav__more { display: flex !important; }
  .pv3-bottom-nav__item { font-size: 10px !important; min-width: 0 !important; }
  .pv3-bottom-nav__item svg { width: 22px !important; height: 22px !important; }
}


/* Commission bulk + auto-tier allocation */
.commission-head{align-items:flex-start;gap:12px}
.commission-head .pv3-page-subtitle{margin:6px 0 0;max-width:620px}
.commission-bulk-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--c-border);background:linear-gradient(180deg,rgba(124,58,237,.06),transparent)}
.commission-check-all{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--c-text)}
.commission-check-all input,.commission-user-check input{width:16px;height:16px;accent-color:#7c3aed}
.commission-selected-count{font-size:12px;font-weight:700;color:var(--c-text-muted)}
.commission-bulk-actions{display:flex;gap:8px;flex-wrap:wrap}
.commission-user-card{grid-template-columns:24px 44px minmax(0,1fr) 90px auto}
.commission-user-check{display:flex;align-items:center;justify-content:center}
.commission-user-card.is-selected{background:rgba(124,58,237,.08)}
.commission-auto-panel{margin:0 0 14px;padding:14px;border:1px solid var(--c-border);border-radius:14px;background:var(--c-bg-subtle)}
.commission-auto-panel__head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.commission-auto-panel__head strong{font-size:14px}
.commission-auto-panel__head span{font-size:12px;color:var(--c-text-muted);line-height:1.45}
.commission-auto-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end}
.commission-auto-grid label>span{display:block;margin-bottom:6px;font-size:10px;font-weight:800;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.04em}
.commission-auto-grid .pv3-btn{white-space:nowrap;height:42px}
@media(max-width:900px){
  .commission-auto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .commission-auto-grid .pv3-btn{grid-column:1/-1;width:100%}
  .commission-bulk-bar{align-items:stretch;flex-direction:column}
  .commission-bulk-actions .pv3-btn{flex:1}
}
@media(max-width:700px){
  .commission-user-card{grid-template-columns:22px 40px minmax(0,1fr) auto}
  .commission-user-configured{display:none}
  .commission-head{flex-direction:column}
}
@media(max-width:560px){
  .commission-auto-grid{grid-template-columns:1fr}
  .commission-user-card{grid-template-columns:22px 38px minmax(0,1fr)}
  .commission-user-card .pv3-btn{grid-column:1/-1}
}

.commission-default-card{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 14px;padding:16px 18px;border:1px solid var(--c-border);border-radius:16px;background:linear-gradient(135deg,rgba(124,58,237,.08),var(--c-bg-surface))}
.commission-default-card h3{margin:0 0 6px;font-size:16px}
.commission-default-card p{margin:0 0 10px;color:var(--c-text-muted);font-size:13px;line-height:1.5;max-width:640px}
.commission-default-card__actions{display:flex;flex-direction:column;gap:8px;min-width:210px}
.commission-invite{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.commission-invite code{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 10px;border-radius:10px;background:var(--c-bg-subtle);font-size:12px}
.commission-default-card small{display:block;color:var(--c-text-muted);font-size:12px}
@media(max-width:800px){
  .commission-default-card{flex-direction:column}
  .commission-default-card__actions,.commission-default-card__actions .pv3-btn{width:100%}
}

@media (max-width: 760px) {
  [data-view="commissions"] { overflow-x: hidden; min-width: 0; }
  .commission-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .commission-head .pv3-btn { width: 100%; justify-content: center; }
  .commission-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .commission-kpis article { padding: 10px 8px; }
  .commission-kpis span { font-size: 8px; line-height: 1.25; }
  .commission-kpis strong { font-size: 15px; margin-top: 4px; overflow-wrap: anywhere; }
  .commission-default-card { flex-direction: column; gap: 12px; padding: 14px; margin-bottom: 12px; }
  .commission-default-card h3 { font-size: 15px; line-height: 1.35; }
  .commission-default-card p { font-size: 12px; margin-bottom: 8px; }
  .commission-default-card__actions { min-width: 0; width: 100%; }
  .commission-default-card__actions .pv3-btn,
  .commission-invite .pv3-btn,
  .commission-bulk-actions .pv3-btn { width: 100%; justify-content: center; }
  .commission-invite { flex-direction: column; align-items: stretch; }
  .commission-invite code { max-width: 100%; width: 100%; box-sizing: border-box; white-space: normal; word-break: break-all; line-height: 1.4; }
  .commission-bulk-bar { flex-direction: column; align-items: stretch; padding: 10px; }
  .commission-bulk-actions { width: 100%; display: flex; flex-direction: column; }
  .commission-user-filters { grid-template-columns: 1fr; padding: 10px; }
  .commission-user-card { grid-template-columns: 22px 36px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .commission-user-configured { display: none; }
  .commission-user-card .pv3-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .commission-user-info strong { font-size: 14px; overflow-wrap: anywhere; }
  .pv3-modal.commission-config-modal {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0;
  }
  .commission-config-modal .pv3-modal-header,
  .commission-config-modal .pv3-modal-footer { border-radius: 0; }
  .commission-config-modal .pv3-modal-body { padding: 12px; }
  .commission-auto-grid { grid-template-columns: 1fr; }
  .commission-auto-grid .pv3-btn { width: 100%; }
  .commission-campaign-config { grid-template-columns: 1fr; }
}

.commission-template-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.commission-template-bar small{color:var(--c-text-muted);font-size:12px;font-weight:700}
@media (max-width: 760px) {
  .commission-template-bar { flex-direction: column; align-items: stretch; }
  .commission-template-bar .pv3-btn { width: 100%; justify-content: center; }
}

/* Lost-order quiet UI — override Codex flashy styles */
.lost-order-head{align-items:flex-end;margin-bottom:14px}
.lost-order-head p{margin:4px 0 0;color:var(--c-text-muted);font-size:13px;line-height:1.45}
.lost-order-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,220px);gap:10px;margin-bottom:12px}
.lost-order-filters .pv3-form-input,.lost-order-filters .pv3-form-select{width:100%;min-width:0}
.lost-order-list{display:flex;flex-direction:column;gap:10px}
.lost-order-card{background:var(--c-bg-surface);border:1px solid var(--c-border);border-left:1px solid var(--c-border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-xs)}
.lost-order-card.status-adv_confirmed,.lost-order-card.status-recorded,.lost-order-card.status-rejected{border-left-color:var(--c-border)}
.lost-order-card__top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.lost-order-card__top>div{display:grid;gap:2px;min-width:0}
.lost-order-card__top b{font-size:15px;color:var(--c-text)}
.lost-order-card__top span{color:var(--c-text-muted);font-size:13px}
.lost-order-card__top em{font-style:normal;font-weight:700;font-size:11px;border-radius:999px;padding:5px 9px;background:var(--c-bg-subtle);color:var(--c-text-muted);white-space:nowrap}
.status-adv_confirmed .lost-order-card__top em{background:#eef4ff;color:#1d4ed8}
.status-recorded .lost-order-card__top em{background:#ecfdf5;color:#047857}
.status-rejected .lost-order-card__top em{background:#fef2f2;color:#b91c1c}
.lost-order-ticket-progress{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px;padding:0;background:transparent;border-radius:0}
.lost-order-ticket-progress>b{display:none}
.lost-order-step{display:inline-flex;align-items:center;gap:6px;color:var(--c-text-subtle);font-size:11px;font-weight:700}
.lost-order-step i{display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--c-border);border-radius:50%;font-style:normal;font-size:10px;background:transparent}
.lost-order-step.current{color:var(--c-text)}
.lost-order-step.current i{border-color:var(--c-text);background:var(--c-text);color:#fff}
.lost-order-step.done{color:#047857}
.lost-order-step.done i{border-color:#10b981;background:#10b981;color:#fff}
.lost-order-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin:12px 0;padding:0;background:transparent;border-radius:0}
.lost-order-meta span{font-size:12px;color:var(--c-text-muted)}
.lost-order-meta b{color:var(--c-text);font-weight:700}
.lost-order-card>p{margin:0;white-space:pre-wrap;color:var(--c-text);font-size:13px;line-height:1.5}
.lost-order-rejection{display:grid;gap:4px;background:var(--c-bg-subtle);border:1px solid var(--c-border);border-radius:10px;padding:10px 12px;color:var(--c-text);margin:12px 0}
.lost-order-rejection b{font-size:11px;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.04em}
.lost-order-rejection small{color:var(--c-text-muted)}
.lost-order-files{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.lost-order-file{border:1px solid var(--c-border);background:var(--c-bg-subtle);color:var(--c-text);border-radius:10px;padding:7px 10px;cursor:pointer;font-size:12px}
.lost-order-card details{border-top:1px solid var(--c-border);margin-top:12px;padding-top:10px}
.lost-order-card summary{cursor:pointer;font-weight:700;color:var(--c-text-muted);font-size:13px}
.lost-order-history{display:grid;gap:8px;margin:10px 0 0;padding-left:18px}
.lost-order-history li b,.lost-order-history li span,.lost-order-history li small{display:block}
.lost-order-history li span,.lost-order-history li small{color:var(--c-text-muted);font-size:12px;margin-top:2px}
.lost-order-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:12px}
.lost-order-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lost-order-form label{display:grid;gap:6px;font-weight:700;color:var(--c-text);font-size:13px}
.lost-order-form .full{grid-column:1/-1}
.lost-order-form input,.lost-order-form textarea,.lost-order-form select{width:100%;min-width:0;box-sizing:border-box}
.lost-order-upload{border:1px dashed var(--c-border);border-radius:12px;padding:12px}
.lost-order-upload small{font-weight:400;color:var(--c-text-muted)}
.lost-order-modal,.lost-order-process-modal{width:min(640px,calc(100vw - 24px));max-width:640px;overflow:hidden}
.lost-order-modal .pv3-modal-body,.lost-order-process-modal .pv3-modal-body{overflow-y:auto}
@media(max-width:760px){
  .lost-order-head{align-items:stretch;flex-direction:column}
  .lost-order-head .pv3-btn{width:100%;justify-content:center}
  .lost-order-filters,.lost-order-form{grid-template-columns:1fr}
  .lost-order-form .full{grid-column:auto}
  .lost-order-card__top{flex-direction:column}
  .lost-order-card__top em{align-self:flex-start}
  .lost-order-actions{width:100%}
  .lost-order-actions .pv3-btn{flex:1;justify-content:center}
  .lost-order-modal,.lost-order-process-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
}

/* Lost-order mobile v2 */
@media (max-width: 760px) {
  [data-view="lost-orders"] {
    overflow-x: hidden;
    min-width: 0;
    gap: 12px;
  }
  .lost-order-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .lost-order-head .pv3-btn,
  .lost-order-actions .pv3-btn,
  .lost-order-files .lost-order-file,
  .lost-order-filters .pv3-form-input,
  .lost-order-filters .pv3-form-select {
    width: 100%;
    justify-content: center;
  }
  .lost-order-filters,
  .lost-order-form {
    grid-template-columns: 1fr;
  }
  .lost-order-form .full { grid-column: auto; }
  .lost-order-card {
    padding: 12px;
    border-radius: 12px;
    overflow: hidden;
  }
  .lost-order-card__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .lost-order-card__top b,
  .lost-order-card__top span,
  .lost-order-meta b,
  .lost-order-card > p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .lost-order-ticket-progress { display: none; }
  .lost-order-meta { gap: 6px 10px; }
  .lost-order-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .pv3-modal-backdrop:has(.lost-order-modal),
  .pv3-modal-backdrop:has(.lost-order-process-modal) {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .lost-order-modal,
  .lost-order-process-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .lost-order-modal .pv3-modal-header,
  .lost-order-process-modal .pv3-modal-header,
  .lost-order-modal .pv3-modal-footer,
  .lost-order-process-modal .pv3-modal-footer {
    flex-shrink: 0;
  }
  .lost-order-modal .pv3-modal-body,
  .lost-order-process-modal .pv3-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
  }
  .lost-order-modal .pv3-modal-footer,
  .lost-order-process-modal .pv3-modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .lost-order-modal .pv3-modal-footer .pv3-btn,
  .lost-order-process-modal .pv3-modal-footer .pv3-btn {
    width: 100%;
    justify-content: center;
  }
  .lost-order-form input,
  .lost-order-form select,
  .lost-order-form textarea {
    font-size: 16px;
  }
  .lost-order-upload input[type="file"] {
    width: 100%;
    max-width: 100%;
  }
}

.lost-order-preview-modal{width:min(920px,calc(100vw - 24px));max-width:920px;max-height:92vh;overflow:hidden}
.lost-order-preview-body{padding:0!important;background:#0b1220;min-height:min(70vh,640px);display:flex;align-items:center;justify-content:center}
.lost-order-preview-image{display:block;max-width:100%;max-height:min(72vh,720px);width:auto;height:auto;margin:0 auto;object-fit:contain}
.lost-order-preview-frame{width:100%;height:min(72vh,720px);border:0;background:#fff}
.lost-order-preview-empty{color:#cbd5e1;padding:24px;text-align:center}
@media (max-width: 760px) {
  .pv3-modal-backdrop:has(.lost-order-preview-modal){padding:0;align-items:stretch}
  .lost-order-preview-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .lost-order-preview-body{min-height:0;flex:1}
  .lost-order-preview-image{max-height:calc(100dvh - 150px)}
  .lost-order-preview-frame{height:calc(100dvh - 150px)}
  .lost-order-preview-modal .pv3-modal-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .lost-order-preview-modal .pv3-modal-footer .pv3-btn{width:100%;justify-content:center}
}

/* Dash mobile v1 — keep bottom nav glued, stop table inner-scroll, cardify recent conversions */
@media (max-width: 768px) {
  html, body {
    overflow-x: clip !important;
  }
  .pv3 {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  .pv3-main {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  .pv3-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 4000 !important;
    -webkit-transform: none !important;
  }
  .pv3-table-wrap {
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  .pv3-table thead {
    position: static;
  }
  [data-view="dashboard"] .pv3-table,
  [data-view="reports"] .pv3-table {
    min-width: 0 !important;
    width: 100%;
  }
  [data-view="dashboard"] .pv3-table thead,
  [data-view="reports"] .pv3-table thead {
    display: none;
  }
  #tbodyRecent tr,
  #tbodyReports tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 12px 4px 14px;
    border-bottom: 1px solid var(--c-border);
    background: transparent;
  }
  #tbodyRecent td,
  #tbodyReports td {
    display: block !important;
    width: auto !important;
    max-width: 100%;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #tbodyRecent td:nth-child(1),
  #tbodyReports td:nth-child(1) { display: none !important; }
  #tbodyRecent td:nth-child(2),
  #tbodyReports td:nth-child(2) { grid-column: 1; grid-row: 1; min-width: 0; }
  #tbodyRecent td:nth-child(7),
  #tbodyReports td:nth-child(8) { grid-column: 2; grid-row: 1; justify-self: end; }
  #tbodyRecent td:nth-child(3),
  #tbodyReports td:nth-child(3) { grid-column: 1 / -1; }
  #tbodyRecent td:nth-child(4),
  #tbodyRecent td:nth-child(5),
  #tbodyRecent td:nth-child(6),
  #tbodyRecent td:nth-child(8),
  #tbodyReports td:nth-child(4),
  #tbodyReports td:nth-child(5),
  #tbodyReports td:nth-child(6),
  #tbodyReports td:nth-child(7),
  #tbodyReports td:nth-child(9) {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--c-text-muted);
  }
  [data-view="dashboard"] .pv3-card-header {
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* ─── MOBILE TABLE & CONTROLS RESPONSIVE RULES (FIX SELECT & OVERLAYS) ─── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }
  .pv3,
  .pv3-main,
  .pv3-view {
    overflow-x: visible !important;
  }

  /* Sticky filters must NOT stick under fixed topbar (56px) on phone */
  .pv3-table-filters,
  .pv3-table-filters--sticky {
    position: static !important;
    top: auto !important;
    z-index: 10 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
    overflow: visible !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .pv3-filter-search-wrap {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .pv3-filter-select-wrap {
    flex: 1 1 auto !important;
    min-width: 135px !important;
    max-width: 100% !important;
  }

  .pv3-custom-select-wrap {
    width: 100% !important;
    min-width: 135px !important;
  }

  .pv3-date-custom-group {
    width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .pv3-date-custom-group .pv3-date-picker {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .pv3-table-filters .pv3-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: center !important;
  }

  /* Custom select dropdown mobile sizing and touch styling */
  .pv3-custom-select-dropdown {
    max-width: min(360px, calc(100vw - 20px)) !important;
  }
  .pv3-select-option {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
  }

  /* Other mobile filter toolbars: wrap cleanly with zero clipping */
  .lost-order-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .lost-order-filters .pv3-custom-select-wrap {
    width: 100% !important;
  }
  .commission-user-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .commission-user-filters .pv3-custom-select-wrap {
    width: 100% !important;
  }
  .pv3-traffic-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .pv3-traffic-filters .pv3-custom-select-wrap {
    width: 100% !important;
  }

  /* Horizontal swipeable chips / tabs (WITHOUT hiding vertical overflow of selects) */
  .pv3-mobile-report-projects,
  .pv3-detail-tabs,
  .pv3-notif-tabs,
  .pv3-mobile-user-card__chips {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    max-width: 100%;
  }
  .pv3-mobile-report-projects > *,
  .pv3-detail-tabs > *,
  .pv3-notif-tabs > * {
    flex-shrink: 0;
  }

  /* Tables: campaign tables swipe horizontally, dashboard/report tables cardify */
  .pv3-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-height: none !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }
  [data-view="dashboard"] .pv3-table-wrap,
  [data-view="reports"] .pv3-table-wrap {
    overflow-x: hidden !important;
  }
  [data-view]:not([data-view="dashboard"]):not([data-view="reports"]) .pv3-table {
    min-width: 760px;
  }
}

.pv3-team-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(37, 99, 235, 0.08);
  color: var(--c-primary, #2563eb);
  border: 1px solid rgba(37, 99, 235, 0.18);
  white-space: nowrap;
}