/* ═══════════════════════════════════════
   VARIABLES
═══════════════════════════════════════ */
:root {
  /* ── Brand ─────────────────────────── */
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: rgba(99,102,241,0.1);
  --primary-glow: rgba(99,102,241,0.25);

  /* ── Semantic colors ───────────────── */
  --color-danger: #ef4444;
  --color-danger-ring: rgba(239,68,68,0.2);
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  --color-focus-ring: rgba(99,102,241,0.22);
  --color-border-hover: #a5b4fc;
  --color-input-bg: #ffffff;

  /* ── Surfaces (light) ──────────────── */
  --bg-page: #f0f2f8;
  --bg-card: #ffffff;
  --sidebar-bg: #0f172a;
  --sidebar-hover: rgba(255,255,255,0.07);
  --sidebar-active: rgba(99,102,241,0.9);
  --color-topbar-bg: rgba(255,255,255,0.88);

  /* ── Text ──────────────────────────── */
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;

  /* ── Borders ───────────────────────── */
  --border: #e2e8f0;

  /* ── Shorthand aliases (kept for legacy rules) ── */
  --danger: var(--color-danger);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --info: var(--color-info);

  /* ── Shadows ───────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 25px 60px rgba(0,0,0,0.18);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* ── Spacing scale ─────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── Radii ─────────────────────────── */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* ── Typography ────────────────────── */
  --font-size-sm: clamp(11px, 0.7vw + 0.3rem, 13px);
  --font-size-base: clamp(13px, 0.85vw + 0.4rem, 15px);
  --font-size-lg: clamp(15px, 1vw + 0.5rem, 18px);

  /* ── Durations ─────────────────────── */
  --duration-fast: 0.15s;
  --duration-base: 0.22s;
  --duration-slow: 0.35s;
  --transition: 0.18s ease;

  /* ── Z-index ───────────────────────── */
  --z-sidebar: 200;
  --z-topbar: 50;
  --z-modal: 1000;
  --z-toast: 9999;
}

/* Traffic scope controls and locally-rendered service brand marks. */
.service-google .brand-google{background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 45%,#fbbc05 0 70%,#ea4335 0);background-clip:text;-webkit-background-clip:text;color:transparent}.service-x .sms-service-mark,.service-apple .sms-service-mark{color:#fff;background:#111827}.service-discord .sms-service-mark{color:#fff;background:#5865f2}.service-binance .sms-service-mark{color:#181a20;background:#f3ba2f}.service-amazon .sms-service-mark{color:#fff;background:#131a22;font-size:16px}.service-linkedin .sms-service-mark{color:#fff;background:#0a66c2;font-size:10px}.service-netflix .sms-service-mark{color:#e50914;background:#111;font-size:16px}.live-feed-tabs{display:inline-flex;gap:4px;width:max-content;max-width:100%;padding:4px;background:rgba(255,255,255,.88);border:1px solid rgba(88,115,155,.12);border-radius:13px;box-shadow:0 8px 22px rgba(31,65,120,.06)}.live-feed-tabs button{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;color:#64748b;background:transparent;border:0;border-radius:9px;cursor:pointer;font-size:9px;font-weight:850}.live-feed-tabs button svg{width:14px;height:14px}.live-feed-tabs button.active{color:#fff;background:linear-gradient(135deg,#1769ff,#735dff);box-shadow:0 6px 15px rgba(23,105,255,.22)}.traffic-privacy-note{display:inline-flex;align-items:center;gap:6px;color:#71829b;font-size:8px}.traffic-privacy-note svg{width:13px;height:13px}.panel-traffic-card footer{justify-content:flex-start}

/* Inbound carrier operations workspace */
.carrier-workspace { display:flex; flex-direction:column; gap:16px; min-width:0; max-width:100%; }
.carrier-catalog-shell { display:flex; flex-direction:column; gap:14px; min-width:0; padding:18px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--primary) 4%,#fff)); box-shadow:var(--shadow-sm); }
.carrier-catalog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; min-width:0; }
.carrier-catalog-head h2 { margin:3px 0 2px; color:var(--text-primary); }
.carrier-catalog-head p { margin:0; color:var(--text-secondary); font-size:12px; }
.carrier-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; }
.carrier-catalog-card { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:start; min-width:0; padding:14px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--bg-card); }
.carrier-catalog-card.configured { border-color:color-mix(in srgb,var(--success) 35%,var(--border)); box-shadow:inset 3px 0 0 var(--success); }
.carrier-catalog-card.available { border-style:dashed; }
.carrier-catalog-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; color:#fff; border-radius:12px; background:linear-gradient(135deg,#0f9f75,#0891b2); }
.carrier-catalog-copy { min-width:0; }
.carrier-catalog-title { display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
.carrier-catalog-title strong { font-size:14px; }
.carrier-catalog-copy > span,.carrier-catalog-copy p { display:block; margin:2px 0 0; color:var(--text-secondary); font-size:11px; }
.carrier-provider-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:9px; }
.carrier-provider-chip { max-width:100%; padding:5px 8px; overflow:hidden; color:var(--text-secondary); border:1px solid var(--border); border-radius:999px; background:var(--bg-page); font:inherit; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.carrier-provider-chip:hover,.carrier-provider-chip.active { color:var(--primary); border-color:var(--primary); background:var(--primary-light); }
.carrier-catalog-empty,.carrier-admin-note { color:var(--text-muted); font-size:11px; }
.carrier-catalog-action { align-self:center; }
.carrier-empty-workspace { padding:20px; }
.carrier-hero { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; overflow:hidden; padding:24px; color:#fff; border-radius:18px; background:linear-gradient(125deg,#0f766e 0%,#0891b2 54%,#4f46e5 120%); box-shadow:0 18px 45px rgba(8,145,178,.2); }
.carrier-hero::after { content:""; position:absolute; width:260px; height:260px; right:-90px; top:-130px; border-radius:50%; background:rgba(255,255,255,.14); box-shadow:-190px 170px 0 25px rgba(255,255,255,.06); pointer-events:none; }
.carrier-hero > * { position:relative; z-index:1; min-width:0; }
.carrier-hero h2 { margin:4px 0 5px; font-size:clamp(24px,4vw,36px); color:#fff; }
.carrier-hero p { max-width:680px; margin:0; color:rgba(255,255,255,.82); }
.carrier-kicker { font-size:10px; font-weight:800; letter-spacing:.16em; opacity:.72; }
.carrier-back { margin:0 0 14px; padding:0; color:rgba(255,255,255,.82); border:0; background:none; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.carrier-back:hover { color:#fff; }
.carrier-hero-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.carrier-hero-actions .fly-input { min-width:190px; color:#0f172a; background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.5); }
.carrier-hero-actions .fly-btn { box-shadow:none; }
.carrier-tabs { display:flex; gap:6px; max-width:100%; padding:6px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; border:1px solid var(--border); border-radius:14px; background:var(--bg-card); }
.carrier-tab { display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1 0 auto; min-height:42px; padding:9px 14px; color:var(--text-secondary); border:0; border-radius:10px; background:transparent; font:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; transition:.18s ease; }
.carrier-tab svg { width:17px; height:17px; }
.carrier-tab:hover { color:var(--primary); background:var(--bg-page); }
.carrier-tab.active { color:#fff; background:linear-gradient(135deg,var(--primary),#0891b2); box-shadow:0 8px 20px rgba(79,70,229,.18); }
#carrier-workspace-body { display:flex; flex-direction:column; gap:16px; min-width:0; }
.carrier-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; min-width:0; padding:4px 2px; }
.carrier-section-head h3 { margin:3px 0 0; color:var(--text-primary); font-size:20px; }
.carrier-section-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:0; flex-wrap:wrap; }
.carrier-section-actions .fly-input { width:auto; min-width:145px; }
.carrier-section-actions .carrier-search { min-width:min(260px,100%); }
.carrier-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.carrier-overview-grid,.carrier-rate-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; min-width:0; }
.carrier-detail-list { display:grid; gap:0; padding:8px 18px 16px; }
.carrier-detail-list > div { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; padding:11px 0; border-bottom:1px solid var(--border); }
.carrier-detail-list > div:last-child { border-bottom:0; }
.carrier-detail-list span:first-child { color:var(--text-secondary); font-size:12px; }
.carrier-detail-list strong { min-width:0; max-width:68%; text-align:right; overflow-wrap:anywhere; }
.carrier-commercial-list { display:flex; flex-direction:column; gap:10px; padding:14px 18px 18px; }
.carrier-commercial-row { display:grid; grid-template-columns:70px repeat(3,minmax(0,1fr)); gap:10px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-page); font-size:12px; }
.carrier-commercial-row span,.carrier-commercial-row b { text-align:right; }
.positive { color:var(--success)!important; }
.negative { color:var(--danger)!important; }
.carrier-pager { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:12px; color:var(--text-secondary); font-size:12px; }
.carrier-rate-form { display:flex; flex-direction:column; gap:12px; padding:16px; }
.carrier-percent-input { display:flex; align-items:center; gap:8px; }
.carrier-percent-input span { color:var(--text-secondary); font-size:12px; white-space:nowrap; }
.carrier-tier-head,.carrier-tier-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px; gap:8px; align-items:center; }
.carrier-tier-head { padding:0 2px; color:var(--text-secondary); font-size:11px; font-weight:700; }
#carrier-tier-list { display:flex; flex-direction:column; gap:8px; }

/* Auditable bulk-management workspace */
.bulk-operations-shell { display:flex; flex-direction:column; gap:14px; min-width:0; max-width:100%; }
.bulk-operations-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; min-width:0; padding:22px; color:#fff; border-radius:18px; background:linear-gradient(125deg,#312e81,#4f46e5 52%,#0891b2); box-shadow:0 18px 42px rgba(79,70,229,.18); }
.bulk-operations-hero h2 { margin:3px 0 4px; color:#fff; }
.bulk-operations-hero p { max-width:720px; margin:0; color:rgba(255,255,255,.8); font-size:12px; }
.bulk-operations-stats { display:flex; gap:8px; flex-wrap:wrap; }
.bulk-operations-stats span { min-width:105px; padding:9px 12px; text-align:center; border:1px solid rgba(255,255,255,.2); border-radius:12px; background:rgba(255,255,255,.1); font-size:10px; }
.bulk-operations-stats strong { display:block; color:#fff; font-size:18px; }
.bulk-operation-result { padding:11px 14px; color:var(--text-secondary); border:1px solid var(--border); border-radius:11px; background:var(--bg-card); font-size:12px; }
.bulk-operation-result.success { color:#047857; border-color:rgba(16,185,129,.32); background:rgba(16,185,129,.08); }
.bulk-operation-result.error { color:#b91c1c; border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.07); }
.bulk-operation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; min-width:0; }
.bulk-operation-grid > .card { min-width:0; margin:0; }
.bulk-operation-body { display:flex; flex-direction:column; gap:12px; min-width:0; padding:16px; }
.bulk-operation-help { min-height:34px; color:var(--text-secondary); font-size:12px; }
.bulk-selector-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:7px 0; }
.bulk-selector-actions strong { margin-left:auto; color:var(--primary); font-size:11px; }
.bulk-range-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:220px; padding:7px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--border); border-radius:10px; background:var(--bg-page); }
.bulk-range-options label { display:flex; align-items:center; gap:8px; min-width:0; padding:8px; border:1px solid transparent; border-radius:8px; background:var(--bg-card); cursor:pointer; }
.bulk-range-options label:hover { border-color:var(--color-border-hover); }
.bulk-range-options input { width:16px; height:16px; flex:0 0 auto; accent-color:var(--primary); }
.bulk-range-options span { min-width:0; }
.bulk-range-options strong,.bulk-range-options small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bulk-range-options strong { color:var(--text-primary); font-size:11px; }
.bulk-range-options small { color:var(--text-muted); font-size:9px; text-transform:uppercase; }

@media (max-width:1100px) {
  .carrier-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .carrier-overview-grid,.carrier-rate-layout { grid-template-columns:minmax(0,1fr); }
  .carrier-catalog-grid,.bulk-operation-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px) {
  .carrier-catalog-head,.bulk-operations-hero { align-items:stretch; flex-direction:column; }
  .carrier-catalog-card { grid-template-columns:38px minmax(0,1fr); }
  .carrier-catalog-icon { width:38px; height:38px; }
  .carrier-catalog-action { grid-column:1 / -1; width:100%; }
  .carrier-catalog-action .fly-btn { width:100%; }
  .bulk-operations-stats span { flex:1; }
  .bulk-range-options { grid-template-columns:minmax(0,1fr); }
  .carrier-hero { align-items:stretch; flex-direction:column; padding:18px; }
  .carrier-hero-actions { justify-content:flex-start; }
  .carrier-hero-actions .fly-input { width:100%; }
  .carrier-section-head { align-items:stretch; flex-direction:column; }
  .carrier-section-actions { justify-content:flex-start; }
  .carrier-section-actions .fly-input,.carrier-section-actions .carrier-search { width:100%; min-width:0; }
  .carrier-kpi-grid { grid-template-columns:minmax(0,1fr); }
  .carrier-commercial-row { grid-template-columns:1fr 1fr; }
  .carrier-commercial-row span,.carrier-commercial-row b { text-align:left; }
  .carrier-detail-list > div { align-items:flex-start; flex-direction:column; gap:4px; }
  .carrier-detail-list strong { max-width:100%; text-align:left; }
  .carrier-tier-head { display:none; }
  .carrier-tier-row { grid-template-columns:minmax(0,1fr) 38px; }
  .carrier-tier-row .carrier-tier-payout { grid-column:1; }
  .carrier-tier-row .action-btn { grid-column:2; grid-row:1 / span 2; }
}

/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--font-size-base);line-height:1.5;color:var(--text-primary);background:var(--bg-page);-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;transition:background var(--duration-base) ease,color var(--duration-base) ease}
h1{font-size:clamp(20px,2vw+0.5rem,28px)}
h2{font-size:clamp(17px,1.5vw+0.4rem,22px)}
h3{font-size:clamp(15px,1.2vw+0.3rem,18px)}
h4{font-size:clamp(13px,1vw+0.25rem,16px)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,.25);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,.45)}

/* ═══════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes toastSlide{from{opacity:0;transform:translateX(110%) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes ripple{from{transform:scale(0);opacity:.4}to{transform:scale(4);opacity:0}}
@keyframes coverGlow{0%,100%{transform:translate(0,0)}50%{transform:translate(10%,10%)}}
@keyframes authCardEnter{from{opacity:0;transform:scale(.92) translateY(30px);filter:blur(5px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes badgePop{0%{transform:scale(.85);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes borderGlow{0%,100%{box-shadow:0 0 0 0 var(--primary-glow)}50%{box-shadow:0 0 0 4px var(--primary-glow)}}

/* ═══════════════════════════════════════
   AUTH
═══════════════════════════════════════ */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,#f0f0ff 0%,#ede9fe 50%,#e0e7ff 100%)}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(99,102,241,.12);display:flex;max-width:900px;width:100%;animation:authCardEnter .5s cubic-bezier(.34,1.56,.64,1)}
.auth-cover{background:linear-gradient(135deg,#735DFF 0%,#5A3DE8 100%);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;width:45%;min-height:500px;padding:2rem}
.auth-cover::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 60%);animation:coverGlow 8s ease-in-out infinite}
.auth-cover-content{position:relative;z-index:1;text-align:center;color:white}
.auth-cover-content h2{font-size:1rem;font-weight:600;line-height:1.6;max-width:300px;margin-top:1.5rem;opacity:.9}
.auth-form{flex:1;padding:2.5rem 2rem;display:flex;align-items:center;justify-content:center}
.auth-form-inner{width:100%;max-width:380px}
.auth-form-inner h2{font-size:1.5rem;font-weight:800;color:var(--text-primary);margin-bottom:6px;animation:fadeInUp .3s ease}
.auth-form-inner p{color:var(--text-secondary);font-size:13px;margin-bottom:28px;animation:fadeInUp .35s ease}
.auth-card-signup{max-width:1000px;min-height:620px}
.auth-cover-signup{width:320px;flex-shrink:0;min-height:620px}
.auth-form-signup{flex:1;align-items:flex-start;padding:2.5rem;overflow-y:auto;max-height:620px}
.auth-signup-inner{width:100%;max-width:520px;margin:0 auto}
.signup-steps{display:flex;flex-direction:column;gap:14px}
.pay-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.auth-form-actions{display:flex;gap:10px;margin-top:8px}
.auth-form-actions .fly-btn{flex:1 1 0}
.auth-form-actions .auth-primary-action{flex-grow:2}


.auth-card-login{max-width:900px;min-height:500px}
.auth-cover-login{width:45%;align-items:center;justify-content:center;min-height:500px;padding:2rem;background:linear-gradient(145deg,#5b5ff0 0%,#4f46e5 52%,#4338ca 100%)}
.auth-cover-login::after{content:'';position:absolute;inset:18px;border:1px solid rgba(255,255,255,.16);border-radius:14px;pointer-events:none}
.auth-cover-content-login{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center;gap:18px}
.auth-brand-block{display:flex;flex-direction:column;align-items:center;gap:14px}
.auth-brand-mark{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 14px 34px rgba(15,23,42,.16)}
.auth-brand-mark svg{width:24px;height:24px}
.auth-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7);margin-bottom:3px}
.auth-brand-block h1,.auth-cover-content-login h1{color:#fff;font-size:30px;line-height:1.05;font-weight:900;margin:0;letter-spacing:0;text-shadow:0 1px 4px rgba(15,23,42,.16)}
.auth-cover-copy{color:rgba(255,255,255,.88);font-size:14px;font-weight:600;line-height:1.6;max-width:320px;margin:0}
.auth-form-login{padding:2.25rem;align-items:center;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.auth-login-inner{max-width:390px}
.auth-login-heading{margin-bottom:20px}
.auth-login-heading h2{font-size:26px;line-height:1.12;font-weight:900;color:var(--text-primary);margin:0 0 6px;letter-spacing:0}
.auth-login-heading p{font-size:13px;color:var(--text-secondary);margin:0}
.auth-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:11px 13px;border-radius:8px;font-size:13px;margin-bottom:14px;animation:fadeInUp .2s ease}
.auth-login-form{display:flex;flex-direction:column;gap:2px}
.auth-input-wrap{display:flex;align-items:center;position:relative;width:100%}
.auth-input-icon{position:absolute;left:12px;top:0;width:24px;height:42px;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;pointer-events:none;transition:color var(--transition);z-index:2}
.auth-input-wrap:focus-within .auth-input-icon{color:var(--primary)}
.auth-input{height:42px!important;padding-left:46px!important;padding-right:44px!important;font-size:14px;border-radius:8px;line-height:42px}
.auth-password-toggle{right:8px;width:32px;height:32px;border-radius:7px;justify-content:center;z-index:3}
.auth-captcha-card{display:grid;grid-template-columns:1fr 112px;align-items:center;gap:12px;margin:2px 0 12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#f8fafc}
.auth-captcha-question{min-width:0}
.auth-captcha-question .fly-label{margin-bottom:2px;color:var(--text-secondary)}
.auth-captcha-question strong{display:block;color:var(--primary-dark);font-size:17px;font-weight:900;letter-spacing:0}
.auth-captcha-input{height:40px;text-align:center;font-weight:800;font-size:15px;border-radius:8px;background:#fff}
.auth-submit-btn{width:100%;height:42px;margin-top:0;border-radius:9px;font-size:14px}
.auth-btn-content,.auth-btn-loading{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.auth-btn-spinner{width:16px;height:16px;border-width:2px;margin:0}
.auth-link-row{margin-top:22px;text-align:center;font-size:13px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.auth-link-row a{color:var(--primary);font-weight:800;text-decoration:none;transition:color var(--transition)}
.auth-link-row a:hover{color:var(--primary-dark)}
.security-verification{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(135deg,#f0f0ff 0%,#ede9fe 52%,#e0e7ff 100%)}
.security-verification-box{width:min(420px,100%);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 60px rgba(99,102,241,.12);padding:30px;text-align:center;animation:authCardEnter .45s cubic-bezier(.34,1.56,.64,1)}
.security-verification-mark{width:58px;height:58px;border-radius:16px;margin:0 auto 16px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center}
.security-verification-mark svg{width:26px;height:26px}
.security-verification-box h2{font-size:22px;font-weight:900;margin:0 0 8px;color:var(--text-primary);letter-spacing:0}
.security-verification-box p{font-size:13px;color:var(--text-secondary);margin:0}

/* Signup steps */
.signup-step-ind{min-height:38px;border-radius:10px;border:1.5px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:12px;font-weight:700;color:rgba(255,255,255,.72);transition:all .3s ease}
.signup-step-ind .step-num{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);color:white;flex:0 0 auto}
.signup-step-ind--active{border-color:var(--primary);background:var(--primary);color:white}

/* ═══════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════ */
.fly-label{display:block;margin-bottom:5px;font-size:12px;font-weight:600;color:var(--text-primary)}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:5px;font-size:12px;font-weight:600;color:var(--text-primary)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input-wrapper{position:relative}
.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);padding:2px;display:flex;align-items:center;transition:color var(--transition)}
.password-toggle:hover{color:var(--primary)}

.fly-input{width:100%;height:36px;padding:0 12px;font-size:13px;color:var(--text-primary);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-xs);outline:none;transition:border-color var(--transition),box-shadow var(--transition);font-family:inherit;box-sizing:border-box}
.fly-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.fly-input:hover:not(:focus){border-color:#cbd5e1}
.fly-input::placeholder{color:var(--text-muted);font-size:12px}
select.fly-input{cursor:pointer}
textarea.fly-input{height:auto;padding:8px 12px;resize:vertical;line-height:1.5}

/* Filter bar */
.filter-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);background:#fafbfc;flex-wrap:wrap}
.filter-bar-labeled{align-items:flex-end}
.filter-field{display:flex;flex-direction:column;gap:3px;flex:0 1 160px}
.filter-field-wide{flex:1 1 220px}
.filter-field label{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}
.filter-field .fly-input,.filter-field .filter-select,.filter-field .search-input{width:100%;min-width:0}
.search-input{height:36px;flex:1;min-width:160px;padding:0 12px 0 34px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;outline:none;font-family:inherit;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center,#fff;transition:border-color var(--transition),box-shadow var(--transition)}
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.filter-select{height:36px;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;outline:none;font-family:inherit;background:#fff;cursor:pointer;transition:border-color var(--transition),box-shadow var(--transition);min-width:120px}
.filter-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
input[type="date"].filter-select,input[type="date"].fly-input{min-width:0;max-width:180px;cursor:text}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.fly-btn{position:relative;overflow:hidden;height:36px;padding:0 18px;font-size:13px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border:none;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform var(--transition),box-shadow var(--transition),opacity var(--transition);box-shadow:0 4px 14px var(--primary-glow);white-space:nowrap;user-select:none;flex-shrink:0}
.fly-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 100%);pointer-events:none}
.fly-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(99,102,241,.35)}
.fly-btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.fly-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.fly-btn-sm{height:30px;padding:0 12px;font-size:11px;gap:5px;border-radius:6px}
.fly-btn-secondary,.fly-btn.secondary{background:transparent;color:var(--primary);border:1.5px solid var(--primary);box-shadow:none}
.fly-btn-secondary:hover,.fly-btn.secondary:hover{background:var(--primary-light);box-shadow:none;transform:translateY(-1px)}
.fly-btn-danger{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 2px 10px rgba(239,68,68,.2)}
.fly-btn-danger:hover{box-shadow:0 6px 18px rgba(239,68,68,.35)}
.fly-btn .ripple-el{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);width:60px;height:60px;margin-left:-30px;margin-top:-30px;animation:ripple .55s ease-out forwards;pointer-events:none}

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.dashboard-layout{display:flex;min-height:100vh}
.sidebar{position:fixed;top:0;left:0;width:256px;height:100vh;background:var(--sidebar-bg);display:flex;flex-direction:column;z-index:100;contain:layout style;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s ease}
.sidebar-logo{padding:18px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.sidebar-logo-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#735DFF,#5A3DE8);display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0;box-shadow:0 4px 12px rgba(99,102,241,.4)}
.sidebar-logo h1{color:white;font-size:15px;font-weight:800;letter-spacing:-.03em}
.sidebar-logo p{color:rgba(255,255,255,.35);font-size:9px;text-transform:uppercase;letter-spacing:.18em;margin-top:1px}
.sidebar-nav{flex:1;padding:12px 10px;overflow-y:auto;min-height:0}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:10px}
.sidebar-group{margin-bottom:4px}
.sidebar-group-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-size:10px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.12em;cursor:pointer;border-radius:var(--radius-xs);transition:color var(--transition),background var(--transition)}
.sidebar-group-header:hover{color:rgba(255,255,255,.7);background:rgba(255,255,255,.03)}
.sidebar-group-header .group-toggle{display:flex;align-items:center;transition:transform .2s ease}
.sidebar-group.collapsed .group-toggle{transform:rotate(-90deg)}
.sidebar-group-items{overflow:hidden;max-height:1200px;opacity:1;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.sidebar-group.collapsed .sidebar-group-items{max-height:0;opacity:0}
.sidebar-nav-item{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:rgba(255,255,255,.55);background:none;border:none;cursor:pointer;transition:color var(--transition),background var(--transition);text-align:left;font-family:inherit;margin-bottom:1px}
.sidebar-nav-item svg{flex-shrink:0;transition:opacity var(--transition);opacity:.6}
.sidebar-nav-item:hover{color:rgba(255,255,255,.9);background:var(--sidebar-hover);box-shadow:inset 3px 0 0 rgba(115,93,255,.5)}
.sidebar-nav-item:hover svg{opacity:1}
.sidebar-nav-item.active{color:white;background:var(--sidebar-active);font-weight:600;box-shadow:0 4px 14px rgba(99,102,241,.3)}
.sidebar-nav-item.active svg{opacity:1}
.sidebar-nav-item::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:3px;background:var(--primary);border-radius:0 3px 3px 0;opacity:0;transition:top .2s,bottom .2s,opacity .2s}
.sidebar-nav-item.active::before{top:0;bottom:0;opacity:1;background:rgba(255,255,255,.8)}
.sidebar-user{padding:12px 10px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;margin-top:auto}
.sidebar-user-info{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:4px}
.sidebar-user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,rgba(115,93,255,.5),rgba(90,61,232,.5));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:13px;flex-shrink:0;border:1.5px solid rgba(115,93,255,.4)}
.sidebar-user-name{color:white;font-size:13px;font-weight:600}
.sidebar-user-role{color:rgba(255,255,255,.35);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.sidebar-logout{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.45);font-size:12px;font-family:inherit;border-radius:var(--radius-sm);transition:color var(--transition),background var(--transition)}
.sidebar-logout:hover{color:#f87171;background:rgba(239,68,68,.1)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99}

/* Main content */
.main-content{margin-left:256px;min-height:100vh;display:flex;flex-direction:column}
.top-bar{position:sticky;top:0;z-index:50;height:60px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.top-bar-title{font-size:16px;font-weight:700;color:var(--text-primary)}
.top-bar-actions{display:flex;align-items:center;gap:12px}
.top-bar-user{display:flex;align-items:center;gap:10px}
.top-bar-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,rgba(115,93,255,.5),rgba(90,61,232,.5));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:13px;flex-shrink:0}
.top-bar-user-name{font-size:13px;font-weight:600;color:var(--text-primary)}
.top-bar-logout{display:flex;align-items:center;gap:6px;padding:7px 12px;background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);font-size:12px;font-family:inherit;font-weight:600;transition:color var(--transition),border-color var(--transition),background var(--transition)}
.top-bar-logout:hover{color:var(--danger);border-color:var(--danger);background:rgba(239,68,68,.05)}
.mobile-menu-btn{display:none;position:fixed;top:14px;left:14px;z-index:110;width:36px;height:36px;background:var(--sidebar-bg);border:none;border-radius:8px;color:white;cursor:pointer;align-items:center;justify-content:center}
.page-content{flex:1;padding:20px 24px}

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card{background:rgba(255,255,255,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden;transition:box-shadow .22s ease;animation:cardIn .28s cubic-bezier(.25,.46,.45,.94) both}
.card:hover{box-shadow:var(--card-shadow-hover)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px}
.card-title{font-size:14px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.card-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-body{padding:20px 18px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:rgba(255,255,255,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--card-shadow);transition:transform .2s ease,box-shadow .2s ease;animation:cardIn .3s cubic-bezier(.25,.46,.45,.94) both}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--card-shadow-hover)}
.stat-card-label{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.stat-card-value{font-size:26px;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;animation:fadeInUp .4s ease both}
.payout-summary-grid,.payout-request-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:16px 18px}

/* ═══════════════════════════════════════
   TABLES
═══════════════════════════════════════ */
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fly-table{width:100%;border-collapse:collapse;font-size:13px}
.fly-table thead th{padding:10px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;background:#f8fafc;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:2}
.fly-table tbody tr{border-bottom:1px solid #f1f5f9;transition:background .15s ease;animation:rowIn .22s ease both}
.fly-table tbody tr:nth-child(1){animation-delay:.03s}
.fly-table tbody tr:nth-child(2){animation-delay:.06s}
.fly-table tbody tr:nth-child(3){animation-delay:.09s}
.fly-table tbody tr:nth-child(4){animation-delay:.12s}
.fly-table tbody tr:nth-child(5){animation-delay:.15s}
.fly-table tbody tr:hover{background:#f8fafc}
.fly-table td{padding:10px 12px;color:var(--text-primary);vertical-align:middle}
.fly-table td code{font-size:12px;background:#f1f5f9;padding:2px 6px;border-radius:4px;font-family:'SF Mono','Fira Code',monospace;white-space:nowrap}
.fly-table-compact th,.fly-table-compact td{padding:7px 10px;font-size:12px}
.empty-row td{text-align:center;padding:32px;color:var(--text-muted);font-size:13px;animation:fadeInUp .3s ease both}
.message-text{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otp-code{font-family:'SF Mono','Fira Code',monospace;font-weight:700;color:var(--danger);background:rgba(239,68,68,.08);padding:2px 6px;border-radius:4px}
.actions-cell{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.action-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;font-size:11px;font-weight:600;font-family:inherit;border:1.5px solid var(--border);border-radius:6px;background:#fff;color:var(--text-primary);cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease,color .15s ease;white-space:nowrap}
.action-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:scale(1.05)}
.action-btn.delete:hover{background:rgba(239,68,68,.07);border-color:var(--danger);color:var(--danger)}

/* ═══════════════════════════════════════
   BADGES
═══════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;animation:badgePop .22s cubic-bezier(.34,1.56,.64,1) both}
.badge-primary{background:rgba(99,102,241,.12);color:#4f46e5}
.badge-success{background:rgba(16,185,129,.12);color:#059669}
.badge-danger{background:rgba(239,68,68,.12);color:#dc2626}
.badge-warning{background:rgba(245,158,11,.12);color:#d97706}
.badge-secondary{background:#f1f5f9;color:#64748b}
.badge-info{background:rgba(59,130,246,.12);color:#2563eb}

/* ═══════════════════════════════════════
   PAGINATION
═══════════════════════════════════════ */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px}
.pagination-info{font-size:12px;color:var(--text-secondary)}
.pagination-buttons{display:flex;gap:3px;flex-wrap:wrap}
.pagination-btn{height:30px;min-width:30px;padding:0 8px;border:1.5px solid var(--border);border-radius:6px;background:#fff;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s ease;color:var(--text-primary)}
.pagination-btn:hover{background:#f8fafc;border-color:var(--primary);color:var(--primary)}
.pagination-btn.active{background:var(--primary);color:white;border-color:var(--primary)}
.pagination-btn:disabled{opacity:.4;cursor:not-allowed}

/* ═══════════════════════════════════════
   SPINNER / LOADING
═══════════════════════════════════════ */
.spinner{width:24px;height:24px;border:2.5px solid var(--primary-light);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.spinner-inline{width:14px;height:14px;border-width:2px}
.loading-spinner{display:flex;align-items:center;justify-content:center;min-height:200px}
.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:6px}

/* ═══════════════════════════════════════
   MODAL
═══════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .18s ease}
.modal{background:#fff;border-radius:var(--radius);box-shadow:0 25px 60px rgba(0,0,0,.18);width:100%;max-height:calc(100vh - 32px);overflow-y:auto;animation:scaleIn .22s cubic-bezier(.34,1.2,.64,1) both}
.modal.small{max-width:400px}
.modal.medium{max-width:520px}
.modal.large{max-width:800px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:1}
.modal-title{font-size:15px;font-weight:700;color:var(--text-primary)}
.modal-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--text-muted);border-radius:6px;transition:background var(--transition),color var(--transition)}
.modal-close:hover{background:#f1f5f9;color:var(--text-primary)}
.modal-body{padding:20px}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border);flex-wrap:wrap}
.modal-footer .fly-btn{flex:0 0 auto}

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
.toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:360px}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.12);animation:toastSlide .3s cubic-bezier(.34,1.2,.64,1) both;transition:opacity .3s ease,transform .3s ease;background:#fff;border:1px solid var(--border)}
.toast-icon{flex-shrink:0;margin-top:1px}
.toast-success{border-left:3px solid var(--success)}
.toast-error{border-left:3px solid var(--danger)}
.toast-info{border-left:3px solid var(--info)}
.toast-warning{border-left:3px solid var(--warning)}

/* ═══════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════ */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;animation:fadeInUp .3s ease both}
.empty-state h3{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.empty-state p{font-size:13px;color:var(--text-secondary);margin-bottom:20px;max-width:320px}

/* ═══════════════════════════════════════
   PAY METHOD CARDS
═══════════════════════════════════════ */
.pay-method-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:108px;padding:16px 12px;border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;text-align:center;background:#fff;gap:4px}
.pay-method-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(99,102,241,.15);border-color:#c7d2fe}
.pay-method-card--active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light);animation:badgePop .2s ease}
.proof-dropzone{display:flex;align-items:center;justify-content:center;min-height:148px;width:100%;padding:20px 14px;border:1.5px dashed #c7d2fe;border-radius:var(--radius-sm);background:rgba(99,102,241,.04);color:var(--primary);text-align:center;cursor:pointer;transition:border-color var(--transition),background var(--transition),box-shadow var(--transition)}
.proof-dropzone:hover,.proof-dropzone--drag{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 3px rgba(99,102,241,.08)}
.proof-dropzone svg{margin:0 auto}
.proof-dropzone img{max-width:100%;height:auto}

/* ═══════════════════════════════════════
   PROFILE
═══════════════════════════════════════ */
.profile-layout{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start}
.profile-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-shadow);padding:24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:white;font-size:28px;font-weight:800;border:3px solid var(--primary-light)}
.profile-name{font-size:16px;font-weight:700;color:var(--text-primary)}
.profile-role{font-size:12px;color:var(--text-secondary)}
.profile-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.profile-setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}

/* ═══════════════════════════════════════
   PAGE TRANSITIONS & LIVE EFFECTS
═══════════════════════════════════════ */
.page-content>*{animation:cardIn .28s cubic-bezier(.25,.46,.45,.94) both}
.page-content>*:nth-child(2){animation-delay:.05s}
.page-content>*:nth-child(3){animation-delay:.1s}
.page-content>*:nth-child(4){animation-delay:.14s}

/* Fly-in for dashboard stats */
.stats-grid .stat-card:nth-child(1){animation-delay:.04s}
.stats-grid .stat-card:nth-child(2){animation-delay:.08s}
.stats-grid .stat-card:nth-child(3){animation-delay:.12s}
.stats-grid .stat-card:nth-child(4){animation-delay:.16s}
.stats-grid .stat-card:nth-child(5){animation-delay:.2s}
.stats-grid .stat-card:nth-child(6){animation-delay:.24s}

/* Input focus glow */
.fly-input:focus{animation:borderGlow 2s ease-in-out infinite}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (min-width:1025px){
  .mobile-menu-btn{display:none!important}
  .sidebar{transform:none!important}
  .main-content{margin-left:256px!important}
  .top-bar{padding-left:28px!important}
}
@media (max-width:1024px){
  .mobile-menu-btn{display:flex}
  .sidebar{transform:translateX(-100%);z-index:200}
  .sidebar.open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,.3)}
  .sidebar-overlay.open{display:block}
  .main-content{margin-left:0}
  .top-bar{padding-left:54px}
  .page-content{padding:14px}
  .profile-layout{grid-template-columns:1fr}
  .filter-bar>*{flex:1 1 160px}
}
@media (max-width:768px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:14px}
  .stat-card-value{font-size:20px}
  .card-header{padding:10px 14px;flex-wrap:wrap}
  .fly-table{min-width:600px}
  .fly-table th,.fly-table td{padding:8px 10px;font-size:12px;white-space:nowrap}
  .modal{max-width:calc(100vw - 24px)!important;max-height:calc(100vh - 24px)}
  .modal-body{padding:14px}
  .modal-footer{flex-wrap:wrap}
  .modal-footer .fly-btn{flex:1 1 130px}
  .form-row{grid-template-columns:1fr}
  .page-content{padding:10px}
  .profile-info-grid{grid-template-columns:1fr}
  .top-bar-user-name{display:none}
  input[type="date"].filter-select,input[type="date"].fly-input{max-width:100%}
}
@media (max-width:600px){
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{border-radius:16px 16px 0 0!important;max-width:100%!important;max-height:92vh}
  .stats-grid{grid-template-columns:1fr 1fr}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-field,.search-input,.filter-select{flex:unset;width:100%;max-width:100%}
  .top-bar-logout span{display:none}
  .top-bar-logout{padding:6px 8px}
}
@media (max-width:400px){
  .stats-grid{grid-template-columns:1fr}
  .auth-form{padding:1.5rem 1rem}
}
@media (min-width:1440px){
  .page-content{padding:28px 40px}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

/* ═══════════════════════════════════════
   PERFORMANCE
═══════════════════════════════════════ */
.sidebar{will-change:transform}
.fly-table tbody{will-change:auto}
.card,.stat-card,.modal,.toast{backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════
   MISC UTILITIES
═══════════════════════════════════════ */
.pg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}

/* SMPP / security specific */
.smpp-stat{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.15);border-radius:8px;padding:12px 16px}

/* Avatar upload */
.avatar-upload-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1.5px dashed var(--border);border-radius:8px;cursor:pointer;color:var(--text-secondary);font-size:12px;font-weight:600;transition:all var(--transition)}
.avatar-upload-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

/* ═══ DASHBOARD ICONS & SERVICE CHIPS ═══ */
.stat-icon { opacity: .15; flex-shrink: 0; }
.stat-card-change { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.service-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; min-height: 80px; align-content: flex-start; }
.service-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--primary-light); color: var(--primary-dark); border-radius: 20px; font-size: 12px; font-weight: 600; }
.service-chip-count { background: var(--primary); color: white; border-radius: 10px; padding: 1px 6px; font-size: 10px; }

/* ═══ LARGE DATA / VIRTUAL TABLE ═══ */
.table-wrapper { max-height: 600px; overflow-y: auto; }
.fly-table tbody tr { contain: layout style; }

/* ═══ ALLOCATION PROGRESS BAR ═══ */
.alloc-progress-wrap { padding: 12px 18px; background: rgba(99,102,241,.05); border-bottom: 1px solid var(--border); }
.alloc-progress-bar { height: 6px; background: #e2e8f0; border-radius: 10px; overflow: hidden; margin-top: 6px; }
.alloc-progress-fill { height: 100%; border-radius: 10px; transition: width .5s ease; background: var(--primary); }
.alloc-progress-fill.danger { background: var(--danger); }

/* ═══ PAYOUT STAT HIGHLIGHT ═══ */
.payout-total-badge { font-size: 15px; font-weight: 800; color: var(--success); }

/* ═══ ANIMATIONS FOR DYNAMIC CONTENT ═══ */
@keyframes countUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.stat-card-value { animation: countUp .4s ease both; }

/* ═══ MOBILE TABLE SCROLL HINT ═══ */
@media (max-width: 768px) {
  .table-wrapper { max-height: 400px; }
}

/* ═══════════════════════════════════════
   SUCCESS POPUP WITH ANIMATED TICK
═══════════════════════════════════════ */
@keyframes successOverlayIn { from{opacity:0} to{opacity:1} }
@keyframes successModalIn { from{opacity:0;transform:scale(.7) translateY(30px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes circleIn { from{stroke-dashoffset:157} to{stroke-dashoffset:0} }
@keyframes tickIn { from{stroke-dashoffset:50} to{stroke-dashoffset:0} }
@keyframes titleIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.success-overlay { animation: successOverlayIn .2s ease both; }
.success-modal {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px 32px;
  max-width: 380px;
  width: calc(100vw - 32px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
  animation: successModalIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.success-icon-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.success-circle { width: 80px; height: 80px; }
.success-circle-bg { stroke: #e2e8f0; stroke-width: 2; }
.success-circle-fill {
  stroke: #10b981; stroke-width: 2.5;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: circleIn .6s cubic-bezier(.4,0,.2,1) .1s forwards;
}
.success-tick {
  stroke: #10b981; stroke-width: 2.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: tickIn .35s ease .55s forwards;
}
.success-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; animation: titleIn .3s ease .6s both; }
.success-msg { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; animation: titleIn .3s ease .65s both; line-height: 1.6; }
.success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; animation: titleIn .3s ease .7s both; }
.success-dl-btn { gap: 7px; flex: 1 1 auto; min-width: 100px; }
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.table-wrapper::-webkit-scrollbar { height: 6px; }
.table-wrapper::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 10px; }
.table-wrapper::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); }

/* RESPONSIVE REPAIR LAYER - 2026-06
   Keeps the existing PSP visual scheme while fixing overflow and scaling. */
html,
body,
#app {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
}

button,
input,
select,
textarea,
.card,
.stat-card,
.modal,
.table-wrapper,
.dashboard-layout,
.main-content,
.page-content,
.top-bar,
.filter-bar,
.card-header,
.modal-body,
.form-row,
.stats-grid {
  min-width: 0;
}

.dashboard-layout {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.main-content {
  flex: 1 1 auto;
  width: calc(100% - 256px);
  max-width: calc(100% - 256px);
  min-width: 0;
  overflow-x: hidden;
}

.page-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.top-bar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.top-bar-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-bar-actions {
  min-width: 0;
  flex-shrink: 0;
}

.card,
.stat-card,
.profile-card,
.pay-method-card,
.smpp-stat {
  max-width: 100%;
  border-radius: 8px;
}

.card-header,
.card-header-actions,
.filter-bar,
.modal-footer,
.success-actions,
.actions-cell {
  min-width: 0;
}

.card-header > *,
.filter-bar > *,
.modal-footer > * {
  min-width: 0;
}

.card-header .input-wrapper,
.card-header-actions .input-wrapper,
.filter-bar .input-wrapper,
.input-wrapper[style*="width"] {
  width: min(240px, 100%) !important;
  max-width: 100% !important;
}

.fly-input,
.search-input,
.filter-select,
.fly-btn,
.action-btn {
  max-width: 100%;
}

.fly-input,
.search-input,
.filter-select {
  min-height: 38px;
}

textarea.fly-input {
  min-height: 88px;
}

.fly-btn {
  min-height: 36px;
  max-width: 100%;
}

.action-btn {
  min-height: 30px;
}

.stats-grid,
.payout-summary-grid,
.payout-request-grid,
.pg-grid,
.filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.stat-card-value {
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.profile-layout {
  min-width: 0;
}

.profile-info-grid {
  min-width: 0;
}

.table-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: scroll;
  overflow-y: auto;
  max-height: min(70vh, 640px);
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  scrollbar-gutter: stable;
}

.fly-table {
  width: 100%;
  min-width: 760px;
  table-layout: auto;
}

.fly-table th,
.fly-table td {
  max-width: 280px;
}

.fly-table td,
.fly-table th,
.message-text,
.sidebar-nav-item,
.sidebar-user-name,
.top-bar-user-name,
.badge,
code {
  overflow-wrap: anywhere;
}

.fly-table td code {
  white-space: normal;
  word-break: break-word;
}

.message-text {
  max-width: min(360px, 38vw);
}

.actions-cell {
  max-width: 320px;
}

.badge {
  max-width: 100%;
}

.modal-overlay {
  padding: 16px;
  overflow: hidden;
}

.modal {
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.modal.small { width: min(100%, 400px); }
.modal.medium { width: min(100%, 560px); }
.modal.large { width: min(100%, 960px); }

.modal-header,
.modal-footer {
  flex: 0 0 auto;
}

.modal-body {
  flex: 1 1 auto;
  overflow: auto;
  max-width: 100%;
}

.modal-body [style*="grid-template-columns"] {
  max-width: 100%;
}

.toast-container {
  width: min(360px, calc(100vw - 24px));
  right: 12px;
}

.toast {
  max-width: 100%;
}

.auth-page {
  width: 100%;
  overflow-x: hidden;
}

.auth-card {
  max-width: min(900px, 100%);
}

@media (max-width: 1200px) {
  .page-content {
    padding: 16px;
  }

  .fly-table {
    min-width: 700px;
  }

  .actions-cell {
    max-width: 260px;
  }
}

@media (min-width: 1025px) {
  .main-content {
    margin-left: 256px !important;
    width: calc(100% - 256px) !important;
    max-width: calc(100% - 256px) !important;
  }
}

@media (max-width: 1024px) {
  .sidebar {
    width: min(286px, 86vw);
  }

  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .top-bar {
    padding-right: 14px;
  }

  .page-content {
    padding: 14px;
  }
}

@media (max-width: 900px) {
  .auth-page {
    align-items: flex-start;
    padding: 12px;
    min-height: 100dvh;
  }

  .auth-card {
    flex-direction: column;
    max-width: 520px;
    min-height: 0;
    border-radius: 14px;
  }

  .auth-card-login {
    max-width: 520px;
    min-height: 0;
  }

  .auth-cover,
  .auth-cover-signup {
    width: 100% !important;
    min-height: 150px;
    padding: 1.25rem;
  }

  .auth-cover-login {
    min-height: 190px;
    gap: 16px;
  }

  .auth-cover-content-login {
    gap: 14px;
  }


  .auth-cover-content h1 {
    font-size: 22px !important;
  }

  .auth-cover-content p {
    margin-bottom: 16px !important;
  }

  .auth-form,
  .auth-form-signup {
    padding: 1.5rem 1.15rem !important;
    max-height: none;
    overflow: visible;
  }

  .auth-form-login {
    padding: 1.45rem 1.25rem 1.6rem !important;
  }

  .auth-form-inner,
  .auth-signup-inner {
    max-width: 100%;
  }

  .signup-steps {
    flex-direction: row;
    gap: 8px;
  }

  .signup-step-ind {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .auth-page {
    padding: 0;
    background: #fff;
  }

  .auth-card {
    width: 100%;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-cover,
  .auth-cover-signup {
    min-height: auto;
    padding: 18px 16px;
  }

  .auth-cover-content > div:first-child {
    font-size: 40px !important;
    margin-bottom: 8px !important;
  }

  .auth-cover-content h1 {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }

  .auth-cover-content p {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  .auth-form,
  .auth-form-signup {
    padding: 18px 16px 24px !important;
  }

  .auth-form-login {
    padding: 18px 16px 22px !important;
  }

  .auth-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .auth-brand-block h1,
  .auth-cover-content-login h1 {
    font-size: 22px !important;
  }

  .auth-cover-copy {
    font-size: 13px;
    line-height: 1.5;
  }


  .auth-login-heading h2 {
    font-size: 22px;
  }

  .auth-input {
    padding-left: 46px !important;
    padding-right: 44px !important;
  }

  .auth-input-icon {
    height: 40px;
  }

  .auth-captcha-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .auth-captcha-input {
    text-align: left;
  }

  .auth-form-inner h2,
  .auth-signup-inner h2 {
    font-size: 20px !important;
  }

  .auth-form-inner p,
  .auth-signup-inner p {
    margin-bottom: 18px !important;
  }

  .auth-form .form-row {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  .auth-form .form-group {
    margin-bottom: 13px;
  }

  .auth-form .fly-input {
    height: 40px;
    font-size: 14px;
  }

  .password-toggle {
    right: 10px;
    min-width: 30px;
    min-height: 30px;
    justify-content: center;
  }

  .signup-steps {
    flex-direction: column;
    gap: 7px;
    width: 100%;
  }

  .signup-step-ind {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .pay-method-grid {
    grid-template-columns: 1fr;
  }

  .pay-method-card {
    min-height: 88px;
  }

  .proof-dropzone {
    min-height: 124px;
    padding: 16px 12px;
  }

  #proof-preview img {
    max-width: 100%;
    height: auto;
  }

  .auth-form-actions {
    flex-direction: column;
  }

  .auth-form-actions .fly-btn,
  .auth-form-actions .auth-primary-action {
    width: 100%;
    min-height: 40px;
    flex: 1 1 auto;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 10px;
  }

  .top-bar {
    height: 56px;
    gap: 8px;
  }

  .top-bar-actions {
    gap: 8px;
  }

  .card-header {
    align-items: stretch;
  }

  .card-header-actions,
  .card-header > div:last-child {
    width: 100%;
  }

  .filter-bar {
    align-items: stretch;
  }

  .filter-field,
  .filter-field-wide {
    flex: 1 1 100%;
  }

  .form-row,
  .profile-info-grid,
  .modal-body [style*="grid-template-columns:1fr 1fr"],
  .modal-body [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .stats-grid,
  .payout-summary-grid,
  .payout-request-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-card-value {
    font-size: 19px;
  }

  .fly-table {
    min-width: 680px;
  }

  .fly-table th,
  .fly-table td {
    max-width: 220px;
  }

  .message-text {
    max-width: 240px;
  }

  .actions-cell {
    max-width: 240px;
  }

  .modal-overlay {
    padding: 10px;
  }

  .modal {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px);
  }
}

@media (max-width: 600px) {
  .mobile-menu-btn {
    top: 10px;
    left: 10px;
  }

  .top-bar {
    padding-left: 52px;
  }

  .top-bar-user {
    display: none;
  }

  .card-body,
  .modal-body {
    padding: 12px;
  }

  .card-header {
    padding: 10px 12px;
  }

  .filter-bar {
    padding: 10px 12px;
  }

  .fly-btn,
  .fly-btn-sm,
  .action-btn {
    min-width: 0;
  }

  .card-header .fly-btn {
    width: 100%;
  }

  .filter-bar .fly-btn {
    width: auto;
    flex: 0 0 auto;
  }

  .filter-bar .filter-action-btn {
    min-width: 74px;
    align-self: flex-end;
  }

  .stats-grid,
  .payout-summary-grid,
  .payout-request-grid {
    grid-template-columns: 1fr;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100% !important;
    width: 100%;
    max-height: 92dvh;
    border-radius: 14px 14px 0 0 !important;
  }

  .modal-footer {
    gap: 8px;
  }

  .modal-footer .fly-btn {
    flex: 1 1 100%;
  }

  .success-modal {
    width: 100%;
    max-width: none;
    border-radius: 14px 14px 0 0;
    padding: 28px 18px 22px;
  }
}

@media (max-width: 420px) {
  .page-content {
    padding: 8px;
  }

  .top-bar-title {
    font-size: 14px;
  }

  .card-title {
    font-size: 13px;
  }

  .fly-table {
    min-width: 620px;
  }

  .fly-table th,
  .fly-table td {
    padding: 7px 8px;
  }

  .toast-container {
    left: 8px;
    right: 8px;
    width: auto;
  }
}

/* Release 3.1 operational health workspace */
.health-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px; border-radius:24px; color:#fff; background:linear-gradient(135deg,#4338ca,#7c3aed 55%,#0891b2); box-shadow:0 20px 50px rgba(79,70,229,.22); overflow:hidden; position:relative; }
.health-hero::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-80px; top:-110px; background:rgba(255,255,255,.13); }
.health-hero.degraded { background:linear-gradient(135deg,#92400e,#d97706 55%,#f59e0b); }
.health-hero h1 { margin:5px 0 7px; font-size:clamp(25px,4vw,38px); }
.health-hero p,.health-hero .po-eyebrow { color:rgba(255,255,255,.82); margin:0; }
.health-hero-state { position:relative; z-index:1; min-width:240px; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; padding:16px 18px; border:1px solid rgba(255,255,255,.26); border-radius:18px; background:rgba(255,255,255,.13); backdrop-filter:blur(16px); }
.health-hero-state>span { width:12px; height:12px; border-radius:50%; background:#86efac; box-shadow:0 0 0 7px rgba(134,239,172,.16); grid-row:1/3; }
.health-hero.degraded .health-hero-state>span { background:#fde68a; }
.health-hero-state small { color:rgba(255,255,255,.72); }
.health-component-grid,.health-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
.health-component { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; background:var(--card-bg,#fff); border:1px solid var(--border); border-radius:18px; padding:17px; min-width:0; box-shadow:var(--shadow-sm); }
.health-state-dot { width:11px; height:11px; margin-top:5px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.11); }
.health-component.degraded .health-state-dot { background:#f59e0b; box-shadow:0 0 0 5px rgba(245,158,11,.12); }
.health-component.down .health-state-dot { background:#ef4444; }
.health-component h3 { margin:3px 0 5px; font-size:15px; }.health-component p,.health-component small { margin:0; color:var(--text-secondary); font-size:11px; overflow-wrap:anywhere; }
.health-metric-grid article { padding:20px; border-radius:18px; color:#fff; background:linear-gradient(145deg,#4f46e5,#7c3aed); box-shadow:0 12px 28px rgba(79,70,229,.16); }
.health-metric-grid article:nth-child(2) { background:linear-gradient(145deg,#0284c7,#06b6d4); }.health-metric-grid article:nth-child(3) { background:linear-gradient(145deg,#7c3aed,#db2777); }.health-metric-grid article:nth-child(4) { background:linear-gradient(145deg,#059669,#16a34a); }
.health-metric-grid span,.health-metric-grid small { display:block; color:rgba(255,255,255,.78); }.health-metric-grid strong { display:block; font-size:30px; margin:7px 0 2px; }
.health-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }.health-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }.health-refresh { display:flex; justify-content:flex-end; margin-top:15px; }
.input-readonly { display:flex; align-items:center; background:var(--bg-secondary,#f8fafc); color:var(--text-secondary); }
.range-policy-preview { margin:16px 0; padding:17px; border:1px solid rgba(79,70,229,.2); border-radius:16px; background:linear-gradient(145deg,rgba(238,242,255,.92),rgba(250,245,255,.85)); }
.range-policy-preview>header { display:flex; justify-content:space-between; gap:12px; align-items:start; }.range-policy-preview>header span:first-child { font-size:10px; color:var(--primary); font-weight:800; letter-spacing:.12em; }.range-policy-preview h3 { margin:3px 0 0; font-size:16px; }
.range-policy-preview-controls { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin:15px 0 10px; }.range-policy-preview-controls .form-group { margin:0; }
.range-policy-preview-result { display:flex; align-items:center; gap:13px; padding:14px; border:1px solid rgba(34,197,94,.24); background:rgba(240,253,244,.9); border-radius:13px; }.range-policy-preview-result>span { min-width:48px; min-height:42px; display:grid; place-items:center; border-radius:11px; background:#dcfce7; color:#15803d; font-weight:900; }.range-policy-preview-result strong,.range-policy-preview-result p { display:block; margin:0; }.range-policy-preview-result p,.range-policy-preview>p { color:var(--text-secondary); font-size:11px; margin:4px 0 0; }
.range-policy-preview-result.blocked { border-color:rgba(239,68,68,.25); background:rgba(254,242,242,.92); }.range-policy-preview-result.blocked>span { background:#fee2e2; color:#b91c1c; }.range-policy-preview-result.warning { border-color:rgba(245,158,11,.3); background:#fffbeb; }.range-policy-preview-result.warning>span { background:#fef3c7; color:#b45309; }
@media(max-width:1000px){.health-component-grid,.health-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.health-hero{align-items:flex-start;flex-direction:column;padding:22px}.health-hero-state{width:100%;min-width:0}.health-component-grid,.health-metric-grid,.health-detail-grid,.range-policy-preview-controls{grid-template-columns:1fr}.health-actions .fly-btn{width:100%}}


/* Professional admin/manager review and import surfaces */
.professional-card {
  background: #fff;
}

.professional-header {
  align-items: flex-start;
}

.professional-subtitle {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.professional-list {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.review-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.review-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.review-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.review-meta {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 2px;
}

.review-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.review-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #f8fafc;
}

.review-grid span {
  display: block;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
}

.review-grid strong {
  display: block;
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.professional-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(99,102,241,.16);
  border-radius: 8px;
  background: rgba(99,102,241,.06);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 16px;
}

.professional-note strong {
  color: var(--primary-dark);
  font-size: 13px;
}

.professional-note-warning {
  border-color: rgba(245,158,11,.25);
  background: rgba(245,158,11,.08);
  color: #92400e;
}

.professional-note-warning strong {
  color: #92400e;
}

.field-help {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.upload-panel .card-body {
  padding: 18px;
}

.upload-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.upload-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.upload-textarea {
  min-height: 260px;
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 12px;
}

.upload-file-help {
  color: var(--text-secondary);
  font-size: 12px;
}

.upload-file-picker {
  align-items: center;
  background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(16,185,129,.06));
  border: 1px dashed var(--primary);
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  gap: 3px 10px;
  grid-template-columns: auto 1fr;
  margin-bottom: 12px;
  padding: 14px;
}

.upload-file-picker > span {
  color: var(--primary);
  grid-row: 1 / 3;
}

.upload-file-picker small {
  color: var(--text-secondary);
}

.upload-file-picker input[type="file"] {
  grid-column: 1 / -1;
  margin-top: 8px;
  max-width: 100%;
}

.performance-date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.performance-date-presets button {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
}

.performance-date-presets button:hover,
.performance-date-presets button:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.upload-submit-btn {
  width: 100%;
}

@media (max-width: 700px) {
  .review-card-top,
  .upload-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .review-actions,
  .upload-toolbar-actions {
    justify-content: flex-start;
  }

  .review-actions .fly-btn,
  .upload-toolbar-actions .fly-btn {
    width: 100%;
  }
}

/* ── Icon System ─────────────────────────────────────────────── */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  flex-shrink: 0;
  transition: background var(--transition), box-shadow var(--transition);
}
.sidebar-nav-item:hover .nav-icon {
  background: rgba(115,93,255,.25);
  box-shadow: 0 0 0 1px rgba(115,93,255,.3);
}
.sidebar-nav-item.active .nav-icon {
  background: rgba(255,255,255,.15);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.sidebar-nav-item.active .nav-icon svg {
  filter: drop-shadow(0 0 4px rgba(255,255,255,.35));
}

/* stat-card icon badge */
.stat-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.stat-card-icon.purple { background: rgba(115,93,255,.12); color: #735DFF; }
.stat-card-icon.green  { background: rgba(16,185,129,.12); color: #10b981; }
.stat-card-icon.blue   { background: rgba(59,130,246,.12); color: #3b82f6; }
.stat-card-icon.amber  { background: rgba(245,158,11,.12); color: #f59e0b; }
.stat-card-icon.red    { background: rgba(239,68,68,.12);  color: #ef4444; }
.stat-card-icon svg    { width: 20px; height: 20px; }

/* action-btn icon alignment */
.action-btn svg { vertical-align: middle; flex-shrink: 0; }

/* fly-btn icon */
.fly-btn svg { flex-shrink: 0; }
.action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:0}
.action-btn-icon svg{width:15px;height:15px}

/* Staff Operations Center */
.management-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;margin-bottom:18px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,#fff),#fff 52%,color-mix(in srgb,var(--primary) 5%,#fff));box-shadow:0 16px 40px rgba(15,23,42,.07)}
.management-hero:after{content:"";position:absolute;width:240px;height:240px;right:-90px;top:-130px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 18%,transparent),transparent 68%);pointer-events:none}.management-hero h1{font-size:clamp(25px,3vw,34px);margin:5px 0 7px;color:var(--text-primary)}.management-hero p{max-width:720px;margin:0;color:var(--text-secondary)}.management-eyebrow{display:block;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.management-hero-actions{display:flex;align-items:center;gap:12px;z-index:1}.management-live{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:rgba(34,197,94,.1);color:#13743a;font-size:12px;font-weight:700;white-space:nowrap}.management-live i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12);animation:managementPulse 1.8s ease-in-out infinite}@keyframes managementPulse{50%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
.management-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.management-kpi{display:flex;align-items:center;gap:13px;min-width:0;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);box-shadow:0 8px 26px rgba(15,23,42,.055)}.management-kpi-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;color:var(--primary);background:var(--primary-light)}.management-kpi-icon svg{width:20px;height:20px}.management-kpi div{min-width:0;display:grid;gap:2px}.management-kpi div>span,.management-kpi small{color:var(--text-muted);font-size:11px}.management-kpi strong{overflow:hidden;text-overflow:ellipsis;color:var(--text-primary);font-size:19px;white-space:nowrap}
.management-search-card{position:relative;display:grid;grid-template-columns:minmax(240px,.75fr) minmax(300px,1.25fr);align-items:center;gap:18px;padding:16px 18px;margin-bottom:18px;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);box-shadow:0 8px 24px rgba(15,23,42,.05)}.management-search-copy{display:flex;align-items:center;gap:12px}.management-search-copy>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--primary-light);color:var(--primary)}.management-search-copy div{display:grid}.management-search-copy strong{color:var(--text-primary)}.management-search-copy small{color:var(--text-muted)}.management-search-results{position:absolute;z-index:30;top:calc(100% + 6px);right:18px;width:min(680px,calc(100% - 36px));max-height:400px;overflow:auto;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--bg-card);box-shadow:0 22px 55px rgba(15,23,42,.16)}
.management-result{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:10px;background:transparent;text-align:left;cursor:pointer}.management-result:hover{background:var(--primary-light)}.management-result>span:first-child{display:grid;place-items:center;color:var(--primary)}.management-result>span:nth-child(2){display:grid;gap:2px;min-width:0}.management-result strong,.management-result small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.management-result strong{color:var(--text-primary)}.management-result small{color:var(--text-muted)}.management-result em{font-size:10px;font-style:normal;text-transform:uppercase;color:var(--text-muted)}.management-searching,.management-search-empty{padding:14px;color:var(--text-muted);text-align:center}.management-searching .spinner{display:inline-block;width:15px;height:15px;margin-right:7px}
.management-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:18px}.management-main,.management-panel{padding:18px;border:1px solid var(--border);border-radius:17px;background:var(--bg-card);box-shadow:0 8px 28px rgba(15,23,42,.05)}.management-side{display:grid;align-content:start;gap:18px}.management-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.management-section-head h2{margin:3px 0;font-size:18px;color:var(--text-primary)}.management-section-head p{margin:0;color:var(--text-muted);font-size:12px}.management-filter-actions{display:flex;align-items:center;gap:8px}.management-filter-actions .fly-input{width:auto;min-width:120px}.management-saved-views{display:flex;flex-wrap:wrap;gap:7px;margin:-2px 0 12px}.management-view-chip{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:6px 8px;border:1px solid var(--border);border-radius:999px;background:var(--bg-main);color:var(--text-secondary);font-size:11px;cursor:pointer}.management-view-chip.default{border-color:var(--primary);color:var(--primary)}.management-view-chip svg{width:12px;height:12px}.management-view-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.management-view-chip i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;font-size:14px;font-style:normal}.management-view-chip i:hover{background:rgba(239,68,68,.12);color:#dc2626}
.management-inbox{display:grid;gap:8px}.management-inbox-item{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;align-items:center;gap:11px;width:100%;padding:12px 13px;border:1px solid var(--border);border-left:3px solid #eab308;border-radius:12px;background:var(--bg-card);text-align:left;cursor:pointer;transition:.18s ease}.management-inbox-item:hover{transform:translateY(-1px);border-color:var(--primary);box-shadow:0 8px 20px rgba(15,23,42,.06)}.management-inbox-item.severity-critical{border-left-color:#ef4444}.management-inbox-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--primary-light);color:var(--primary)}.management-inbox-copy{display:grid;gap:3px;min-width:0}.management-inbox-copy strong{overflow:hidden;color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap}.management-inbox-copy small{overflow:hidden;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap}.management-open{color:var(--primary);font-size:11px;font-weight:800}.management-clear-state{display:flex;align-items:center;gap:14px;padding:30px;color:#15803d;background:rgba(34,197,94,.06);border-radius:13px}.management-clear-state svg{width:28px;height:28px}.management-clear-state p{margin:3px 0 0;color:var(--text-muted)}
.management-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.management-quick{display:flex;align-items:center;gap:10px;min-width:0;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--bg-main);color:var(--primary);text-align:left;cursor:pointer;transition:.18s ease}.management-quick:hover{transform:translateY(-1px);border-color:var(--primary);background:var(--primary-light)}.management-quick>svg{width:17px;height:17px;flex:0 0 auto}.management-quick span{display:grid;gap:2px;min-width:0}.management-quick strong{color:var(--text-primary);font-size:12px}.management-quick small{overflow:hidden;color:var(--text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.management-activity{display:grid;gap:11px}.management-activity>div{display:flex;gap:9px}.management-activity>div>span{color:var(--primary)}.management-activity svg{width:15px;height:15px}.management-activity p{display:grid;margin:0;color:var(--text-secondary);font-size:11px}.management-activity small{margin-top:2px;color:var(--text-muted)}.management-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:14px}.management-detail-grid>div{display:grid;gap:3px;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--bg-main);min-width:0}.management-detail-grid span{font-size:10px;text-transform:capitalize;color:var(--text-muted)}.management-detail-grid strong{overflow-wrap:anywhere;color:var(--text-primary);font-size:12px}.command-entity-heading{padding:10px 13px 5px;color:var(--text-muted);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.management-command-result{border-top:1px solid var(--border)}
@media(max-width:1180px){.management-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.management-layout{grid-template-columns:1fr}.management-side{grid-template-columns:1fr 1fr}}@media(max-width:760px){.management-hero{align-items:flex-start;flex-direction:column;padding:21px}.management-hero-actions{align-items:stretch;flex-direction:column;width:100%}.management-hero-actions .fly-btn{width:100%}.management-kpis{grid-template-columns:1fr 1fr}.management-search-card{grid-template-columns:1fr}.management-search-results{left:12px;right:12px;width:auto}.management-section-head{flex-direction:column}.management-filter-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.management-filter-actions .fly-input,.management-filter-actions .fly-btn{width:100%;min-width:0}.management-filter-actions .fly-btn{grid-column:1/-1}.management-side{grid-template-columns:1fr}.management-inbox-item{grid-template-columns:34px minmax(0,1fr) auto}.management-inbox-item .badge{display:none}.management-open{grid-column:2}.management-detail-grid{grid-template-columns:1fr}}@media(max-width:480px){.management-kpis,.management-quick-grid{grid-template-columns:1fr}.management-kpi{padding:14px}.management-search-copy small{display:none}}

/* responsive icon sizes */
@media (max-width: 768px) {
  .nav-icon { width: 26px; height: 26px; border-radius: 6px; }
  .stat-card-icon { width: 32px; height: 32px; border-radius: 8px; }
  .stat-card-icon svg { width: 17px; height: 17px; }
}

/* ═══════════════════════════════════════
   PROFESSIONAL UI ENHANCEMENTS v2
═══════════════════════════════════════ */

/* ── New keyframes ───────────────────── */
@keyframes countUp   { from { opacity:0; transform:translateY(8px) scale(.92) } to { opacity:1; transform:none } }
@keyframes glowPulse { 0%,100% { box-shadow:0 0 0 0 rgba(99,102,241,.0) } 50% { box-shadow:0 0 0 6px rgba(99,102,241,.12) } }
@keyframes slideLeft { from { opacity:0; transform:translateX(18px) } to { opacity:1; transform:none } }
@keyframes barFill   { from { width:0 } }
@keyframes floatUp   { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-4px) } }

/* ── Page background mesh ────────────── */
body { background: #f0f2f8 url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='g' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 60V0h60' fill='none' stroke='%23e2e8f0' stroke-width='.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E"); }

/* ── Cards — deeper glass ────────────── */
.card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 2px 8px rgba(15,23,42,.06), 0 0 0 1px rgba(255,255,255,.5) inset;
  transition: box-shadow .25s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 8px 30px rgba(15,23,42,.1), 0 0 0 1px rgba(255,255,255,.6) inset; }

/* ── Stat cards — gradient accent ───── */
.stat-card {
  background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(248,250,255,.95) 100%);
  border: 1px solid rgba(99,102,241,.1);
  box-shadow: 0 2px 10px rgba(99,102,241,.07), 0 1px 3px rgba(0,0,0,.04);
  position: relative; overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, rgba(99,102,241,.07), transparent 70%);
  pointer-events: none;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(99,102,241,.13); animation: glowPulse 2s ease; }
.stat-card-value { animation: countUp .5s cubic-bezier(.34,1.56,.64,1) both; }
.stat-card-label { letter-spacing: .1em; }

/* ── Sidebar — deeper dark + glow ────── */
.sidebar { background: linear-gradient(180deg, #0d1424 0%, #0f172a 100%); box-shadow: 4px 0 24px rgba(0,0,0,.18); }
.sidebar-logo { background: rgba(255,255,255,.025); }
.sidebar-logo-icon { box-shadow: 0 4px 16px rgba(115,93,255,.5), 0 0 0 1px rgba(115,93,255,.3) inset; animation: floatUp 4s ease-in-out infinite; }
.sidebar-group-header { font-size: 9px; letter-spacing: .18em; }
.sidebar-nav-item {
  border-radius: 9px;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.sidebar-nav-item:hover { transform: translateX(2px); background: rgba(99,102,241,.12); }
.sidebar-nav-item.active {
  background: linear-gradient(135deg, rgba(99,102,241,.85) 0%, rgba(79,70,229,.9) 100%);
  box-shadow: 0 4px 16px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.sidebar-nav-item.active::before { background: #fff; }
.sidebar-user-avatar { box-shadow: 0 0 0 2px rgba(115,93,255,.4); }

/* ── Top bar — frosted ───────────────── */
.top-bar {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226,232,240,.7);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}

/* ── Buttons — deeper shadow ─────────── */
.fly-btn {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
  box-shadow: 0 4px 14px rgba(99,102,241,.3), 0 1px 0 rgba(255,255,255,.2) inset;
  letter-spacing: .01em;
}
.fly-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99,102,241,.4); }
.fly-btn:active { transform: translateY(0) scale(.97); }
.fly-btn-sm { letter-spacing: 0; }

/* ── Table — zebra + hover glow ─────── */
.fly-table thead th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  font-size: 10px; letter-spacing: .1em;
  border-bottom: 2px solid var(--border);
}
.fly-table tbody tr:hover { background: rgba(99,102,241,.04); }
.fly-table tbody tr { animation: slideLeft .2s ease both; }
.fly-table tbody tr:nth-child(even) { background: rgba(248,250,252,.7); }
.fly-table tbody tr:nth-child(even):hover { background: rgba(99,102,241,.04); }

/* ── Badges — pill with depth ────────── */
.badge { letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
.badge-success { background: rgba(16,185,129,.1); color: #047857; border: 1px solid rgba(16,185,129,.2); }
.badge-danger  { background: rgba(239,68,68,.1);  color: #b91c1c; border: 1px solid rgba(239,68,68,.2); }
.badge-primary { background: rgba(99,102,241,.1); color: #4338ca; border: 1px solid rgba(99,102,241,.2); }
.badge-warning { background: rgba(245,158,11,.1); color: #b45309; border: 1px solid rgba(245,158,11,.2); }
.badge-info    { background: rgba(59,130,246,.1); color: #1d4ed8; border: 1px solid rgba(59,130,246,.2); }
.badge-secondary { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

/* ── Action buttons ──────────────────── */
.action-btn {
  background: rgba(248,250,252,.9);
  border: 1.5px solid rgba(226,232,240,.8);
  border-radius: 7px;
  transition: all .15s ease;
}
.action-btn:hover { background: #fff; border-color: #a5b4fc; color: var(--primary); box-shadow: 0 2px 8px rgba(99,102,241,.12); transform: translateY(-1px) scale(1.03); }

/* ── Modal — polished ────────────────── */
.modal-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(15,23,42,.5); }
.modal {
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 32px 80px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.5) inset;
}
.modal-header { background: linear-gradient(180deg, #fff 0%, #fafbff 100%); }

/* ── Inputs — refined focus ──────────── */
.fly-input {
  background: rgba(255,255,255,.9);
  border: 1.5px solid rgba(226,232,240,.9);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.fly-input:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12), 0 1px 3px rgba(99,102,241,.08);
  animation: none;
}
.fly-input:hover:not(:focus) { border-color: #a5b4fc; background: #fff; }

/* ── Toasts — richer ─────────────────── */
.toast {
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 32px rgba(15,23,42,.15), 0 0 0 1px rgba(255,255,255,.8) inset;
}

/* ── Pagination ──────────────────────── */
.pagination-btn { transition: all .15s ease; font-weight: 600; }
.pagination-btn:hover { box-shadow: 0 2px 8px rgba(99,102,241,.15); }
.pagination-btn.active { box-shadow: 0 4px 12px rgba(99,102,241,.3); }

/* ── Progress bars (rate card) ───────── */
[style*="border-radius:10px;overflow:hidden"] > [style*="height:100%"] { animation: barFill .8s cubic-bezier(.4,0,.2,1) both; }

/* ── Card header ─────────────────────── */
.card-header { background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,251,255,.9) 100%); }
.card-title { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }

/* ── Bulk action bar ─────────────────── */
#bulk-action-bar {
  background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(79,70,229,.05) 100%);
  border-bottom: 1px solid rgba(99,102,241,.15);
  animation: slideLeft .2s ease;
}

/* ── Loading shimmer ─────────────────── */
.skeleton { border-radius: 8px; }

/* ── Responsive tweaks ───────────────── */
@media (max-width: 768px) {
  .stat-card::after { display: none; }
  .fly-table tbody tr { animation: none; }
}

/* ═══════════════════════════════════════
   ANIMATIONS & MODERN UI v3
═══════════════════════════════════════ */

/* ── Number counter animate ──────────── */
@keyframes numRoll { from { opacity:0; transform:translateY(12px) scale(.9) } to { opacity:1; transform:none } }
.stat-card-value { animation: numRoll .55s cubic-bezier(.34,1.56,.64,1) both; }

/* ── Stat card icon badge ─────────────── */
.stat-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.stat-card:hover .stat-icon { transform: scale(1.1) rotate(-4deg); }
.stat-card--sms     .stat-icon { background: rgba(99,102,241,.12); color: #6366f1; }
.stat-card--numbers .stat-icon { background: rgba(59,130,246,.12); color: #3b82f6; }
.stat-card--providers .stat-icon { background: rgba(245,158,11,.12); color: #f59e0b; }
.stat-card--profit  .stat-icon { background: rgba(16,185,129,.12); color: #10b981; }
.stat-card--month   .stat-icon { background: rgba(168,85,247,.12); color: #a855f7; }
.stat-card-change { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* ── Toast v2 — with progress bar ────── */
.toast { border-radius: 12px; border: none; min-width: 260px; }
.toast-progress {
  position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 12px 12px;
  animation: toastBar 4s linear forwards;
}
@keyframes toastBar { from { width:100% } to { width:0 } }
.toast-success .toast-progress { background: var(--success); }
.toast-error   .toast-progress { background: var(--danger); }
.toast-info    .toast-progress { background: var(--info); }
.toast-warning .toast-progress { background: var(--warning); }
.toast { position: relative; overflow: hidden; }
.toast-body { display: flex; flex-direction: column; gap: 1px; }
.toast-title { font-weight: 700; font-size: 13px; color: var(--text-primary); }
.toast-sub   { font-size: 12px; color: var(--text-secondary); }

/* ── Success modal ────────────────────── */
.success-overlay { backdrop-filter: blur(8px); background: rgba(15,23,42,.55); }
.success-modal {
  background: #fff;
  border-radius: 20px;
  padding: 36px 28px 28px;
  width: min(420px, calc(100vw - 32px));
  text-align: center;
  box-shadow: 0 32px 80px rgba(15,23,42,.22);
  animation: scaleIn .3s cubic-bezier(.34,1.2,.64,1) both;
}
.success-icon-wrap {
  width: 64px; height: 64px; margin: 0 auto 18px;
  animation: numRoll .4s cubic-bezier(.34,1.56,.64,1) both;
}
.success-circle-bg  { stroke: #e2e8f0; stroke-width: 2; }
.success-circle-fill {
  stroke: #10b981; stroke-width: 2;
  stroke-dasharray: 157; stroke-dashoffset: 157;
  animation: circleDraw .5s .1s ease forwards;
}
.success-tick {
  stroke: #10b981; stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: tickDraw .3s .5s ease forwards;
}
@keyframes circleDraw { to { stroke-dashoffset: 0; } }
@keyframes tickDraw   { to { stroke-dashoffset: 0; } }
.success-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
.success-msg   { font-size: 13px; color: var(--text-secondary); margin: 0 0 20px; line-height: 1.6; }
.success-actions { margin-top: 16px; }

/* ── Service chips (dashboard) ─────────── */
.service-list { padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 8px; min-height: 80px; align-content: flex-start; }
.service-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: rgba(99,102,241,.07);
  border: 1px solid rgba(99,102,241,.15); border-radius: 20px;
  font-size: 12px; font-weight: 600; color: #4338ca;
  animation: badgePop .25s cubic-bezier(.34,1.56,.64,1) both;
  transition: transform .15s ease, box-shadow .15s ease;
}
.service-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(99,102,241,.15); }
.service-chip-count {
  background: #6366f1; color: #fff;
  border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 800;
}

/* ── Page entry animation ─────────────── */
@keyframes pageIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
.page-content > * { animation: pageIn .3s ease both; }
.page-content > *:nth-child(1) { animation-delay: .02s; }
.page-content > *:nth-child(2) { animation-delay: .07s; }
.page-content > *:nth-child(3) { animation-delay: .12s; }
.page-content > *:nth-child(4) { animation-delay: .17s; }

/* ── Loading skeleton ─────────────────── */
.skeleton-row { height: 14px; border-radius: 7px; margin-bottom: 10px;
  background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
/* PSP brand entrance motion. */
@keyframes pspFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pspSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── PHONYVA / PSP BRANDING ── */
.psp-sidebar-brand {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: pspSlideIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.psp-sidebar-brand-image {
  display: block;
  width: 100%;
  max-width: 188px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  filter: drop-shadow(0 8px 18px rgba(0,114,255,.24));
}
.psp-sidebar-brand-copy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  width: 100%;
}
.psp-sidebar-brand-short {
  color: #1ea7ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-shadow: 0 0 12px rgba(30,167,255,.48);
}
.psp-sidebar-brand-name {
  color: rgba(255,255,255,.82);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.psp-login-brand {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: pspFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.psp-login-brand-image {
  display: block;
  width: min(100%, 350px);
  height: auto;
  border-radius: 22px;
  filter: drop-shadow(0 18px 42px rgba(0,114,255,.34));
}
.psp-login-brand-short,
.psp-signup-brand-short {
  color: #29aaff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .32em;
  text-indent: .32em;
  text-shadow: 0 0 18px rgba(0,198,255,.58);
}
.psp-login-brand-name {
  color: rgba(255,255,255,.92);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.psp-signup-brand-image {
  display: block;
  width: min(100%, 274px);
  height: auto;
  margin: 0 auto 4px;
  border-radius: 18px;
  filter: drop-shadow(0 14px 34px rgba(0,114,255,.3));
}
.psp-signup-brand-short { margin-bottom: 8px; }

.app-limit-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(130px, .55fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

.blocked-app-policy-row { grid-template-columns: minmax(180px,1fr) minmax(190px,.62fr) auto; }
.range-privacy-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 6px 10px; background: rgba(255,255,255,.76); border: 1px solid rgba(239,68,68,.14); border-radius: 9px; }
.range-privacy-control > span { display: flex; min-width: 0; flex-direction: column; }
.range-privacy-control strong { color: var(--text-primary); font-size: 11px; line-height: 1.2; }
.range-privacy-control small { margin-top: 2px; color: var(--text-secondary); font-size: 9px; line-height: 1.2; }
.range-policy-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 38px; height: 22px; cursor: pointer; }
.range-policy-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.range-policy-switch i { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); transition: background .18s ease,box-shadow .18s ease; }
.range-policy-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(15,23,42,.22); transition: transform .18s ease; }
.range-policy-switch input:checked + i { background: linear-gradient(135deg,#ef4444,#f97316); box-shadow: 0 4px 12px rgba(239,68,68,.22); }
.range-policy-switch input:checked + i::after { transform: translateX(16px); }
.range-policy-switch input:focus-visible + i { outline: 3px solid rgba(23,105,255,.22); outline-offset: 2px; }

@media (max-width: 640px) {
  .app-limit-row { grid-template-columns: 1fr; align-items: stretch; }
  .app-limit-row .action-btn { justify-self: end; }
}



/* ═══════════════════════════════════════════════════════
   DASHBOARD v2 — Powerful role-aware layout
   ═══════════════════════════════════════════════════════ */

/* Alert banner */
.db-alert-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(239,68,68,.08));
  border: 1px solid rgba(245,158,11,.25); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-primary); flex-wrap: wrap;
  animation: fadeInUp .3s ease;
}
.db-alert-banner svg { color: #f59e0b; flex-shrink: 0; }

/* Quick actions bar */
.db-quick-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.db-quick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--bg-card);
  color: var(--text-primary); font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: all .15s ease;
}
.db-quick-btn:hover {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-light); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,.15);
}
.db-quick-icon { display: inline-flex; align-items: center; }
.db-quick-icon svg { width: 14px; height: 14px; }

/* KPI grid */
.db-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 14px; margin-bottom: 20px;
}
.db-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--card-shadow);
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: cardIn .3s cubic-bezier(.25,.46,.45,.94) both;
}
.db-kpi-card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 70px; height: 70px;
  background: radial-gradient(circle at top right, var(--primary-light), transparent 70%);
  pointer-events: none;
}
.db-kpi-card[onclick]:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); cursor: pointer; }
.db-kpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.db-kpi-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.db-kpi-label { font-size: 11px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .08em; }
.db-kpi-value { font-size: 26px; font-weight: 800; color: var(--text-primary);
  letter-spacing: -.03em; line-height: 1.1;
  animation: numRoll .5s cubic-bezier(.34,1.56,.64,1) both; }
.db-kpi-sub { font-size: 11px; color: var(--text-secondary); margin-top: 5px; }
.db-kpi-change { margin-top: 5px; }

/* KPI colour accents */
.db-kpi--sms      .db-kpi-icon { background: rgba(99,102,241,.12); color: #6366f1; }
.db-kpi--profit   .db-kpi-icon { background: rgba(16,185,129,.12); color: #10b981; }
.db-kpi--month    .db-kpi-icon { background: rgba(168,85,247,.12); color: #a855f7; }
.db-kpi--numbers  .db-kpi-icon { background: rgba(59,130,246,.12); color: #3b82f6; }
.db-kpi--users    .db-kpi-icon { background: rgba(245,158,11,.12); color: #f59e0b; }
.db-kpi--providers .db-kpi-icon { background: rgba(236,72,153,.12); color: #ec4899; }
.db-kpi--smpp     .db-kpi-icon { background: rgba(20,184,166,.12); color: #14b8a6; }
.db-kpi--security .db-kpi-icon { background: rgba(239,68,68,.12);  color: #ef4444; }
.db-kpi--balance  .db-kpi-icon { background: rgba(16,185,129,.12); color: #10b981; }
.db-kpi--otps     .db-kpi-icon { background: rgba(99,102,241,.12); color: #6366f1; }

/* Chart cards */
.db-mid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr));
  gap: 16px; margin-bottom: 20px;
}
.db-chart-card {}
.db-chart-body { padding: 4px 16px 16px; height: 230px; }

/* Bottom grid */
.db-bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px,100%), 1fr));
  gap: 16px; margin-bottom: 24px;
}

/* Top services */
.db-service-list { padding: 0 8px; }
.db-service-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-bottom: 1px solid var(--border);
}
.db-service-row:last-child { border-bottom: none; }
.db-service-rank { width: 20px; font-size: 11px; font-weight: 800; color: var(--text-muted); flex-shrink: 0; }
.db-service-info { flex: 1; min-width: 0; }
.db-service-name { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-service-bar-wrap { height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; }
.db-service-bar { height: 100%; background: linear-gradient(90deg,#6366f1,#a78bfa);
  border-radius: 4px; transition: width .8s cubic-bezier(.4,0,.2,1); }
.db-service-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }

/* Audit log */
.db-audit-list { padding: 4px 0; }
.db-audit-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
.db-audit-row:last-child { border-bottom: none; }
.db-audit-row:hover { background: rgba(99,102,241,.04); }
.db-audit-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--primary-light);
  color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.db-audit-icon svg { width: 14px; height: 14px; }
.db-audit-body { flex: 1; min-width: 0; }
.db-audit-action { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
.db-audit-meta { font-size: 11px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-audit-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* Responsive */
@media (max-width: 768px) {
  .db-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .db-kpi-value { font-size: 20px; }
  .db-chart-body { height: 180px; }
  .db-mid-grid, .db-bot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .db-kpi-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   PSP CLIENT THEME — light glass telecom console
   This final layer is intentionally authoritative so legacy component rules
   share one consistent, client-ready visual language.
   ═══════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --primary: #2563eb;
  --primary-dark: #4338ca;
  --primary-light: rgba(37,99,235,.10);
  --primary-glow: rgba(37,99,235,.22);
  --bg-page: #f4f8ff;
  --bg-secondary: #f7faff;
  --bg-card: rgba(255,255,255,.82);
  --sidebar-bg: rgba(248,251,255,.88);
  --sidebar-hover: rgba(37,99,235,.08);
  --sidebar-active: linear-gradient(135deg,#2563eb 0%,#4f46e5 58%,#7c3aed 100%);
  --color-topbar-bg: rgba(255,255,255,.76);
  --text-primary: #10213e;
  --text-secondary: #5d6f8b;
  --text-muted: #91a0b8;
  --border: rgba(148,163,184,.23);
  --color-border-hover: rgba(37,99,235,.42);
  --shadow-sm: 0 8px 24px rgba(49,73,120,.07),0 1px 2px rgba(49,73,120,.06);
  --shadow-md: 0 18px 46px rgba(49,73,120,.13),0 4px 12px rgba(49,73,120,.06);
  --shadow-lg: 0 32px 90px rgba(37,66,120,.20);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 9px;
}

html { background: #f4f8ff; }
body {
  background:
    radial-gradient(circle at 8% 6%,rgba(56,189,248,.14),transparent 28rem),
    radial-gradient(circle at 95% 18%,rgba(129,140,248,.15),transparent 32rem),
    radial-gradient(circle at 70% 94%,rgba(192,132,252,.10),transparent 28rem),
    linear-gradient(145deg,#f8fbff 0%,#f1f6ff 48%,#f8f5ff 100%);
  background-attachment: fixed;
}

.dashboard-layout { background: transparent; }
.sidebar {
  background: linear-gradient(180deg,rgba(255,255,255,.94),rgba(243,248,255,.88));
  border-right: 1px solid rgba(255,255,255,.92);
  box-shadow: 10px 0 44px rgba(57,79,125,.10);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
}
.sidebar-logo {
  min-height: 160px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(148,163,184,.20);
  background: linear-gradient(145deg,rgba(224,242,254,.66),rgba(238,242,255,.64) 52%,rgba(250,245,255,.68));
}
.psp-sidebar-brand { gap: 7px; }
.psp-sidebar-brand-image {
  width: min(100%,214px);
  max-width: 214px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  padding: 0;
  border: 5px solid rgba(255,255,255,.92);
  border-radius: 18px;
  background: #07111f;
  box-shadow: 0 16px 36px rgba(37,99,235,.19),0 2px 8px rgba(15,23,42,.12);
  filter: none;
}
.psp-sidebar-brand-copy { gap: 6px; }
.psp-sidebar-brand-short {
  color: #2563eb;
  font-size: 12px;
  text-shadow: none;
}
.psp-sidebar-brand-name { color: #53657f; font-size: 8.5px; }
.sidebar-nav { padding: 14px 11px 18px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(37,99,235,.22); }
.sidebar-group { margin-bottom: 7px; }
.sidebar-group-header {
  color: #8a9ab2;
  padding: 9px 11px 7px;
  letter-spacing: .14em;
}
.sidebar-group-header:hover { color: #31547d; background: rgba(37,99,235,.05); }
.sidebar-nav-item {
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid transparent;
  color: #52657f;
  font-weight: 600;
  border-radius: 11px;
}
.sidebar-nav-item svg { color: #6d80a0; opacity: .88; }
.sidebar-nav-item:hover {
  color: #1d4ed8;
  background: linear-gradient(135deg,rgba(219,234,254,.72),rgba(238,242,255,.72));
  border-color: rgba(96,165,250,.20);
  box-shadow: none;
}
.sidebar-nav-item.active {
  color: #fff;
  background: var(--sidebar-active);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 10px 24px rgba(67,56,202,.23);
}
.sidebar-nav-item.active svg { color: #fff; }
.sidebar-nav-item.active::before { display: none; }
.sidebar-user {
  padding: 12px;
  border-top: 1px solid rgba(148,163,184,.20);
  background: rgba(255,255,255,.46);
}
.sidebar-user-info { padding: 8px; border-radius: 12px; background: rgba(255,255,255,.66); }
.sidebar-user-name { color: #172b4d; }
.sidebar-user-role { color: #73849d; }
.sidebar-user-avatar,.top-bar-avatar { background: linear-gradient(135deg,#38bdf8,#4f46e5 62%,#8b5cf6); border-color: rgba(255,255,255,.92); box-shadow: 0 5px 16px rgba(79,70,229,.22); }
.sidebar-logout { color: #667892; }
.sidebar-logout:hover { color: #dc2626; background: rgba(254,226,226,.72); }

.main-content { background: transparent; }
.top-bar {
  height: 72px;
  padding: 0 28px;
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 10px 32px rgba(57,79,125,.07);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.top-bar-heading { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.top-bar-eyebrow { color: #64748b; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.top-bar-title { font-size: 18px; font-weight: 850; letter-spacing: -.02em; }
.top-bar-user { padding: 5px 8px; border: 1px solid rgba(148,163,184,.18); border-radius: 13px; background: rgba(255,255,255,.64); }
.top-bar-logout { background: rgba(255,255,255,.64); border-color: rgba(148,163,184,.25); }
.mobile-menu-btn { top: 17px; background: linear-gradient(135deg,#2563eb,#4f46e5); color: #fff; box-shadow: 0 8px 22px rgba(37,99,235,.28); }
.page-content { padding: 26px 28px 30px; }
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 28px 18px;
  color: #7a8ba3;
  font-size: 11px;
  font-weight: 650;
  border-top: 1px solid rgba(148,163,184,.16);
}

.card,.stat-card,.db-kpi-card,.profile-card,.review-card,.professional-card {
  background: linear-gradient(145deg,rgba(255,255,255,.91),rgba(248,251,255,.73));
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}
.card:hover,.stat-card:hover,.db-kpi-card:hover { box-shadow: var(--shadow-md); }
.card-header {
  padding: 17px 20px;
  border-bottom-color: rgba(148,163,184,.17);
  background: linear-gradient(100deg,rgba(239,246,255,.58),rgba(245,243,255,.42),rgba(255,255,255,.12));
}
.card-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.card-body { padding: 22px 20px; }
.stats-grid,.db-kpi-grid { gap: 17px; }
.stat-card,.db-kpi-card { position: relative; overflow: hidden; padding: 20px; }
.stat-card::before,.db-kpi-card::before {
  content: '';
  position: absolute;
  width: 96px;
  height: 96px;
  right: -24px;
  top: -34px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(56,189,248,.20),transparent 68%);
  pointer-events: none;
}
.stat-card:nth-child(3n+2)::before,.db-kpi-card:nth-child(3n+2)::before { background: radial-gradient(circle,rgba(129,140,248,.20),transparent 68%); }
.stat-card:nth-child(3n)::before,.db-kpi-card:nth-child(3n)::before { background: radial-gradient(circle,rgba(192,132,252,.18),transparent 68%); }
.stat-card-label,.db-kpi-label { color: #71829b; }
.stat-card-value,.db-kpi-value { color: #12284c; }

.filter-bar {
  padding: 14px 18px;
  background: linear-gradient(110deg,rgba(239,246,255,.70),rgba(250,245,255,.55));
  border-bottom-color: rgba(148,163,184,.17);
}
.fly-input,.search-input,.filter-select {
  min-height: 42px;
  color: #142744;
  background-color: rgba(255,255,255,.88);
  border-color: rgba(148,163,184,.30);
  border-radius: 11px;
  box-shadow: inset 0 1px 2px rgba(30,64,175,.025);
}
.fly-input:focus,.search-input:focus,.filter-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(59,130,246,.11),0 6px 18px rgba(37,99,235,.07);
  animation: none;
}
.form-help { margin-top: 6px; color: #7b8ca5; font-size: 11px; line-height: 1.5; }
.proof-work-help { margin: -1px 0 8px; }
.withdrawal-account-input { min-height: 82px; padding-top: 11px; }
.fly-btn {
  min-height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg,#0ea5e9 0%,#2563eb 45%,#4f46e5 100%);
  box-shadow: 0 8px 20px rgba(37,99,235,.23);
}
.fly-btn:hover { box-shadow: 0 12px 26px rgba(37,99,235,.29); }
.fly-btn-secondary,.fly-btn.secondary { background: rgba(255,255,255,.70); color: #315fd2; border-color: rgba(59,130,246,.35); }
.action-btn,.pagination-btn,.db-quick-btn { background: rgba(255,255,255,.76); border-color: rgba(148,163,184,.26); border-radius: 9px; }

.table-wrapper { background: rgba(255,255,255,.26); }
.fly-table thead th {
  padding: 12px 14px;
  color: #64748b;
  background: linear-gradient(180deg,rgba(239,246,255,.96),rgba(248,250,252,.92));
  border-bottom-color: rgba(148,163,184,.22);
}
.fly-table tbody tr { border-bottom-color: rgba(148,163,184,.13); }
.fly-table tbody tr:nth-child(even) { background: rgba(248,250,252,.44); }
.fly-table tbody tr:hover { background: rgba(219,234,254,.42); }
.fly-table td { padding: 12px 14px; }
.fly-table td code { background: rgba(219,234,254,.60); color: #1e40af; }
.badge { padding: 4px 9px; border: 1px solid rgba(255,255,255,.74); }
.modal-overlay { background: rgba(37,50,78,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}
.modal-header { background: linear-gradient(110deg,rgba(239,246,255,.92),rgba(245,243,255,.82)); border-bottom-color: rgba(148,163,184,.18); }
.modal-footer { background: rgba(248,250,252,.64); border-top-color: rgba(148,163,184,.18); }
.toast { border-color: rgba(255,255,255,.92); border-radius: 14px; box-shadow: 0 16px 44px rgba(47,65,103,.16); backdrop-filter: blur(18px); }
.empty-state { min-height: 220px; }
.empty-state::before { content: ''; width: 54px; height: 5px; border-radius: 99px; margin-bottom: 18px; background: linear-gradient(90deg,#38bdf8,#6366f1,#c084fc); opacity: .68; }
.review-grid-wide,.profile-info-wide { grid-column: 1 / -1; }

/* Auth: compact, vertically centered, and consistent with the client panel. */
.auth-page,.security-verification {
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 10% 12%,rgba(56,189,248,.24),transparent 31rem),
    radial-gradient(circle at 88% 78%,rgba(129,140,248,.23),transparent 34rem),
    linear-gradient(140deg,#f8fcff 0%,#eef5ff 48%,#f8f5ff 100%);
}
.auth-card {
  max-width: 940px;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 30px 90px rgba(55,75,120,.18);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
}
.auth-card-login { min-height: 0; }
.auth-cover,.auth-cover-login {
  width: 46%;
  min-height: 460px;
  padding: 28px;
  background: linear-gradient(145deg,rgba(224,242,254,.94),rgba(224,231,255,.94) 52%,rgba(243,232,255,.92))!important;
}
.auth-cover::before,.auth-cover-login::before { background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.76),transparent 55%)!important; }
.auth-cover-login::after { border-color: rgba(255,255,255,.76)!important; border-radius: 18px; }
.auth-cover-content,.auth-cover-content-login { color: #10213e; }
.auth-cover-copy { color: #52657f; max-width: 330px; }
.psp-login-brand-image,.psp-signup-brand-image {
  display: block;
  width: min(100%,330px);
  height: auto;
  margin: 0 auto;
  padding: 0;
  border: 8px solid rgba(255,255,255,.94);
  border-radius: 23px;
  background: #07111f;
  box-shadow: 0 22px 48px rgba(37,99,235,.20),0 3px 10px rgba(15,23,42,.12);
  filter: none;
}
.psp-login-brand-short,.psp-signup-brand-short { color: #2563eb; text-shadow: none; }
.psp-login-brand-name { color: #17305a; }
.auth-cover-content h1 { color: #10213e!important; }
.auth-cover-content > p { color: #5c6f89!important; }
.auth-form-login { min-height: 460px; padding: 28px 34px; background: rgba(255,255,255,.72); }
.auth-login-heading { margin-bottom: 18px; }
.auth-login-heading h2 { color: #11274a; }
.auth-captcha-card { background: linear-gradient(135deg,rgba(239,246,255,.84),rgba(245,243,255,.74)); border-color: rgba(96,165,250,.20); }
.auth-card-signup { max-width: 1020px; min-height: 0; }
.auth-cover-signup { width: 340px; min-height: 650px; }
.auth-form-signup { max-height: 650px; padding: 30px 38px; }
.signup-step-ind { color: #61738e; background: rgba(255,255,255,.48); border-color: rgba(148,163,184,.24); }
.signup-step-ind .step-num { color: #315fd2; background: rgba(219,234,254,.86); }
.signup-step-ind--active { color: #fff; background: linear-gradient(135deg,#0ea5e9,#2563eb 52%,#4f46e5); border-color: transparent; box-shadow: 0 9px 22px rgba(37,99,235,.22); }
.signup-step-ind--active .step-num { color: #1d4ed8; background: #fff; }
.proof-dropzone { min-height: 142px; background: linear-gradient(145deg,rgba(239,246,255,.74),rgba(245,243,255,.58)); border-color: rgba(96,165,250,.42); border-radius: 14px; }
.proof-dropzone:hover,.proof-dropzone--drag { background: linear-gradient(145deg,rgba(219,234,254,.86),rgba(237,233,254,.76)); }
.auth-success-card {
  width: min(460px,100%);
  padding: 30px;
  text-align: center;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(24px);
}
.auth-success-logo { display: block; width: min(300px,100%); height: auto; margin: 0 auto 20px; border: 7px solid #fff; border-radius: 20px; box-shadow: 0 16px 38px rgba(37,99,235,.18); }

@media (max-width: 1024px) {
  .sidebar-logo { min-height: 160px; }
  .page-content { padding: 20px 16px 26px; }
  .top-bar { padding-right: 16px; padding-left: 64px; }
  .app-footer { padding-inline: 16px; }
}
@media (max-width: 900px) {
  .auth-page { align-items: center; padding: 16px; }
  .auth-card { max-width: 620px; }
  .auth-cover,.auth-cover-signup,.auth-cover-login { width: 100%!important; min-height: 230px; padding: 22px; }
  .auth-cover-content-login { gap: 11px; }
  .psp-login-brand-image { width: min(100%,280px); border-width: 6px; }
  .psp-signup-brand-image { width: min(100%,230px); border-width: 5px; }
  .psp-login-brand-name { font-size: 16px; }
  .auth-form-login { min-height: 0; padding: 26px!important; }
  .auth-form-signup { padding: 26px!important; }
}
@media (max-width: 640px) {
  .top-bar-user-name,.top-bar-logout span,.top-bar-eyebrow { display: none; }
  .top-bar { height: 64px; }
  .mobile-menu-btn { top: 14px; }
  .app-footer { flex-direction: column; text-align: center; }
  .profile-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .auth-page { padding: 10px; background: linear-gradient(145deg,#f5fbff,#f3f3ff); }
  .auth-card { width: 100%; min-height: 0; margin: auto; border: 1px solid rgba(255,255,255,.96); border-radius: 20px; box-shadow: 0 22px 60px rgba(55,75,120,.15); }
  .auth-cover,.auth-cover-signup,.auth-cover-login { min-height: 190px; padding: 16px; }
  .auth-cover-signup { min-height: 250px; }
  .psp-login-brand-image { width: min(100%,220px); }
  .psp-signup-brand-image { width: min(100%,190px); }
  .auth-cover-copy { display: none; }
  .auth-form,.auth-form-login,.auth-form-signup { padding: 20px 16px 24px!important; }
  .signup-steps { flex-direction: row; }
  .signup-step-ind { justify-content: center; }
  .page-content { padding: 16px 10px 22px; }
  .card,.stat-card,.db-kpi-card { border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
}

/* ═══ PSP COOL TELECOM EXPERIENCE · 2026-08 ═══ */
:root {
  --primary: #1769ff;
  --primary-dark: #0f4fd6;
  --primary-light: rgba(23,105,255,.11);
  --primary-glow: rgba(23,105,255,.22);
  --bg-main: #f4f8ff;
  --bg-card: rgba(255,255,255,.86);
  --sidebar-bg: rgba(248,251,255,.92);
  --sidebar-hover: rgba(23,105,255,.07);
  --sidebar-active: linear-gradient(135deg,#1769ff 0%,#0ea5e9 56%,#11b7b0 115%);
  --color-topbar-bg: rgba(255,255,255,.80);
  --text-primary: #10213e;
  --text-secondary: #5d6f8b;
  --text-muted: #91a0b8;
  --border: rgba(88,115,155,.14);
  --color-border-hover: rgba(23,105,255,.34);
  --shadow-sm: 0 10px 30px rgba(31,65,120,.07),0 1px 3px rgba(31,65,120,.05);
  --shadow-md: 0 20px 52px rgba(31,65,120,.12),0 5px 16px rgba(31,65,120,.06);
  --shadow-lg: 0 34px 94px rgba(25,55,100,.17);
}

html { background: #f4f8ff; }
body {
  background:
    radial-gradient(circle at 8% 7%,rgba(17,183,176,.14),transparent 29rem),
    radial-gradient(circle at 94% 14%,rgba(56,189,248,.13),transparent 31rem),
    radial-gradient(circle at 72% 94%,rgba(167,139,250,.11),transparent 29rem),
    linear-gradient(145deg,#f8fbff 0%,#eef5ff 48%,#f5fbff 100%);
}

.sidebar {
  background: linear-gradient(180deg,rgba(255,255,255,.97),rgba(240,247,255,.92));
  border-right-color: rgba(88,115,155,.11);
  box-shadow: 10px 0 44px rgba(31,65,120,.075);
}
.sidebar-logo {
  min-height: 146px;
  background: linear-gradient(145deg,rgba(239,248,255,.94),rgba(238,246,255,.88) 48%,rgba(239,246,255,.90));
  border-bottom-color: rgba(88,115,155,.12);
}
.psp-sidebar-brand-image {
  width: min(100%,220px);
  max-width: 220px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(88,115,155,.10);
  border-radius: 17px;
  background: #f8fbff;
  box-shadow: 0 14px 34px rgba(35,72,126,.11);
}
.psp-sidebar-brand-short { color: #1769ff; }
.psp-sidebar-brand-name { color: #53657f; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(23,105,255,.19); }
.sidebar-group-header:hover { color: #31547d; background: rgba(23,105,255,.045); }
.sidebar-nav-item { color: #52657f; }
.sidebar-nav-item svg { color: #6d80a0; }
.sidebar-nav-item:hover {
  color: #1769ff;
  background: linear-gradient(135deg,rgba(239,246,255,.94),rgba(238,246,255,.90));
  border-color: rgba(14,165,233,.14);
}
.sidebar-nav-item.active { box-shadow: 0 11px 25px rgba(15,79,214,.20); }
.sidebar-user { border-top-color: rgba(88,115,155,.11); background: rgba(255,255,255,.56); }
.sidebar-user-info { background: rgba(255,255,255,.62); }
.sidebar-user-avatar,.top-bar-avatar {
  background: linear-gradient(135deg,#1769ff,#0ea5e9 62%,#11b7b0);
  box-shadow: 0 5px 16px rgba(23,105,255,.18);
}

.top-bar {
  background: rgba(255,255,255,.78);
  border-bottom-color: rgba(88,115,155,.10);
  box-shadow: 0 10px 32px rgba(31,65,120,.055);
}
.top-bar-eyebrow { color: #0f6f88; }
.top-bar-user,.top-bar-logout { background: rgba(255,255,255,.78); border-color: rgba(88,115,155,.14); }
.mobile-menu-btn {
  background: linear-gradient(135deg,#1769ff,#0ea5e9 58%,#11b7b0);
  box-shadow: 0 8px 22px rgba(23,105,255,.22);
}

.card,.stat-card,.db-kpi-card,.profile-card,.review-card,.professional-card {
  background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,249,255,.78));
  border-color: rgba(255,255,255,.93);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: linear-gradient(100deg,rgba(238,246,255,.68),rgba(239,246,255,.50),rgba(255,255,255,.16));
  border-bottom-color: rgba(88,115,155,.10);
}
.fly-btn {
  background: linear-gradient(135deg,#1769ff 0%,#0ea5e9 56%,#11b7b0 120%);
  box-shadow: 0 9px 22px rgba(23,105,255,.20);
}
.fly-btn:hover { box-shadow: 0 13px 28px rgba(23,105,255,.25); }
.fly-btn-secondary,.fly-btn.secondary { color: #1769ff; background: rgba(255,255,255,.78); border-color: rgba(23,105,255,.25); }
.fly-input,.search-input,.filter-select { background-color: rgba(255,255,255,.92); border-color: rgba(88,115,155,.19); }
.fly-input:focus,.search-input:focus,.filter-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(14,165,233,.10),0 7px 18px rgba(15,79,214,.06);
}
.filter-bar,.modal-header { background: linear-gradient(110deg,rgba(238,246,255,.84),rgba(239,246,255,.66)); }
.fly-table thead th { background: linear-gradient(180deg,rgba(238,246,255,.96),rgba(255,255,255,.94)); }
.fly-table tbody tr:nth-child(even) { background: rgba(244,249,255,.48); }
.fly-table tbody tr:hover { background: rgba(239,246,255,.62); }
.fly-table td code { color: #0f4fd6; background: rgba(219,234,254,.66); }
.empty-state::before { background: linear-gradient(90deg,#f59e0b,#14b8a6,#38bdf8,#14b8a6); }

/* Crisp logo presentation on authentication surfaces. */
.auth-page,.security-verification {
  background:
    radial-gradient(circle at 9% 12%,rgba(17,183,176,.18),transparent 31rem),
    radial-gradient(circle at 88% 78%,rgba(56,189,248,.15),transparent 34rem),
    linear-gradient(140deg,#f8fbff 0%,#eff8ff 49%,#f5f9ff 100%);
}
.auth-card { box-shadow: 0 30px 90px rgba(31,65,120,.15); }
.auth-cover,.auth-cover-login {
  background: linear-gradient(145deg,rgba(239,248,255,.96),rgba(238,246,255,.94) 50%,rgba(239,246,255,.94))!important;
}
.auth-cover::before,.auth-cover-login::before { background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.82),transparent 57%)!important; }
.psp-login-brand-image,.psp-signup-brand-image,.auth-success-logo {
  object-fit: contain;
  background: #f8fbff;
  border: 1px solid rgba(88,115,155,.10);
  box-shadow: 0 20px 48px rgba(35,72,126,.12);
  filter: none;
}
.psp-login-brand-short,.psp-signup-brand-short { color: #1769ff; }
.psp-login-brand-name { color: #17305a; }
.auth-captcha-card { background: linear-gradient(135deg,rgba(238,246,255,.90),rgba(239,246,255,.76)); border-color: rgba(14,165,233,.16); }
.signup-step-ind--active { background: linear-gradient(135deg,#1769ff,#0ea5e9 58%,#11b7b0); box-shadow: 0 9px 22px rgba(23,105,255,.18); }
.signup-step-ind .step-num { color: #1769ff; background: rgba(219,234,254,.80); }
.proof-dropzone { background: linear-gradient(145deg,rgba(238,246,255,.82),rgba(239,246,255,.66)); border-color: rgba(14,165,233,.28); }
.proof-dropzone:hover,.proof-dropzone--drag { background: linear-gradient(145deg,rgba(224,242,254,.86),rgba(219,234,254,.78)); }

/* Modern dashboard hero. */
.psp-dashboard-view { display: grid; gap: 18px; position: relative; }
.psp-dashboard-hero {
  position: relative;
  isolation: isolate;
  min-height: 242px;
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(250px,.7fr);
  align-items: end;
  gap: 28px;
  padding: 34px 36px;
  overflow: hidden;
  color: #10213e;
  border: 1px solid rgba(255,255,255,.90);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.88),transparent 30%),
    linear-gradient(118deg,#e8f5ff 0%,#e9f1ff 44%,#edf4ff 74%,#e6fbf8 118%);
  box-shadow: 0 24px 64px rgba(105,72,54,.13),inset 0 1px 0 rgba(255,255,255,.92);
  animation: pspHeroIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.psp-hero-content,.psp-hero-snapshot { position: relative; z-index: 3; }
.psp-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 13px;
  padding: 7px 11px;
  color: #1558c0;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  box-shadow: 0 5px 15px rgba(35,72,126,.06);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.psp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.35); animation: pspSignal 2s ease-out infinite; }
.psp-hero-content h1 { margin: 0; color: #10213e; font-size: clamp(28px,3.2vw,46px); line-height: 1.04; letter-spacing: -.045em; font-weight: 900; }
.psp-hero-content h1 span { color: #0ea5e9; }
.psp-hero-content > p { max-width: 700px; margin: 12px 0 21px; color: #5d6f8b; font-size: 13px; line-height: 1.65; }
.psp-hero-content > p span { color: #0e7490; margin: 0 4px; }
.psp-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.psp-hero-primary,.psp-hero-secondary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.psp-hero-primary { color: #fff; border: 0; background: linear-gradient(135deg,#1769ff,#0ea5e9 60%,#11b7b0); box-shadow: 0 11px 24px rgba(23,105,255,.20); }
.psp-hero-secondary { color: #31547d; border: 1px solid rgba(255,255,255,.86); background: rgba(255,255,255,.58); }
.psp-hero-primary:hover,.psp-hero-secondary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(35,72,126,.16); }
.psp-hero-primary svg,.psp-hero-secondary svg { width: 16px; height: 16px; }
.psp-hero-snapshot {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgba(255,255,255,.43);
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 19px;
  box-shadow: 0 16px 38px rgba(35,72,126,.08);
  backdrop-filter: blur(16px) saturate(125%);
}
.psp-hero-snapshot > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.52); }
.psp-hero-snapshot span { color: #71829b; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.psp-hero-snapshot strong { color: #17305a; font-size: 19px; letter-spacing: -.03em; }
.psp-hero-updated { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 1px 3px 0; color: #71829b; font-size: 8.5px; font-weight: 700; }
.psp-hero-updated .status-dot { color: #11b7b0; width: 6px; height: 6px; }
.psp-hero-orb { position: absolute; z-index: 0; display: block; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.psp-hero-orb--one { width: 220px; height: 220px; right: 19%; top: -128px; background: radial-gradient(circle at 35% 35%,rgba(255,255,255,.82),rgba(56,189,248,.22) 46%,rgba(14,165,233,.12)); animation: pspAuroraFloat 8s ease-in-out infinite; }
.psp-hero-orb--two { width: 180px; height: 180px; left: 42%; bottom: -138px; background: radial-gradient(circle at 35% 35%,rgba(255,255,255,.72),rgba(245,158,11,.20) 48%,rgba(20,184,166,.10)); animation: pspAuroraFloat 9.5s ease-in-out -2s infinite reverse; }
.psp-hero-grid { position: absolute; z-index: 1; inset: 0; opacity: .24; background-image: linear-gradient(rgba(50,88,135,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(50,88,135,.08) 1px,transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(90deg,transparent,black 48%,black); animation: pspGridDrift 18s linear infinite; }

/* Animated gradient KPIs, still readable and restrained. */
.db-kpi-grid { gap: 16px; }
.db-kpi-card {
  min-height: 145px;
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 14px 36px rgba(31,65,120,.08);
  animation: pspKpiRise .58s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.db-kpi-card::before { width: 135px; height: 135px; right: -40px; top: -48px; opacity: .78; animation: pspAuroraFloat 7s ease-in-out infinite; }
.db-kpi-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 22%,rgba(255,255,255,.36) 42%,transparent 61%); transform: translateX(-125%); transition: transform .7s ease; }
.db-kpi-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.98); box-shadow: 0 22px 48px rgba(31,65,120,.13); }
.db-kpi-card:hover::after { transform: translateX(125%); }
.db-kpi-card:nth-child(2) { animation-delay: .05s; }
.db-kpi-card:nth-child(3) { animation-delay: .10s; }
.db-kpi-card:nth-child(4) { animation-delay: .15s; }
.db-kpi-card:nth-child(5) { animation-delay: .20s; }
.db-kpi-card:nth-child(6) { animation-delay: .25s; }
.db-kpi-card:nth-child(n+7) { animation-delay: .30s; }
.db-kpi--sms { background: linear-gradient(145deg,rgba(239,248,255,.96),rgba(238,246,255,.82)); }
.db-kpi--profit,.db-kpi--balance { background: linear-gradient(145deg,rgba(236,253,245,.95),rgba(240,253,250,.80)); }
.db-kpi--month,.db-kpi--smpp { background: linear-gradient(145deg,rgba(239,246,255,.96),rgba(245,243,255,.82)); }
.db-kpi--numbers,.db-kpi--security { background: linear-gradient(145deg,rgba(255,241,242,.95),rgba(238,246,255,.80)); }
.db-kpi--users,.db-kpi--providers { background: linear-gradient(145deg,rgba(254,252,232,.95),rgba(240,253,244,.78)); }
.db-kpi--otps { background: linear-gradient(145deg,rgba(240,253,250,.95),rgba(239,246,255,.80)); }
.db-kpi-value { color: #12284c; }
.db-kpi-label { color: #71829b; }
.db-quick-bar { padding: 10px; border: 1px solid rgba(255,255,255,.84); border-radius: 18px; background: rgba(255,255,255,.52); box-shadow: 0 11px 30px rgba(31,65,120,.055); backdrop-filter: blur(16px); }
.db-quick-btn { color: #52657f; background: rgba(255,255,255,.68); border-color: rgba(88,115,155,.12); transition: transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease; }
.db-quick-btn:hover { color: #1769ff; transform: translateY(-3px); background: linear-gradient(145deg,#fff,#eef6ff); box-shadow: 0 10px 22px rgba(31,65,120,.09); }
.db-service-bar { background: linear-gradient(90deg,#f59e0b,#14b8a6 55%,#38bdf8); background-size: 180% 100%; animation: pspGradientFlow 5s ease infinite; }
.db-chart-card { overflow: hidden; }
.db-chart-card::after { content: ''; position: absolute; width: 150px; height: 150px; right: -90px; bottom: -100px; border-radius: 50%; background: radial-gradient(circle,rgba(56,189,248,.13),transparent 68%); pointer-events: none; }

@keyframes pspHeroIn { from { opacity: 0; transform: translateY(14px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pspKpiRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pspAuroraFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(10px,12px,0) scale(1.06); } }
@keyframes pspGridDrift { to { background-position: 60px 30px,30px 60px; } }
@keyframes pspSignal { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.38); } 75%,100% { box-shadow: 0 0 0 9px rgba(16,185,129,0); } }
@keyframes pspGradientFlow { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }

@media (max-width: 900px) {
  .psp-dashboard-hero { grid-template-columns: 1fr; min-height: 0; padding: 28px; }
  .psp-hero-snapshot { grid-template-columns: repeat(3,1fr); }
  .psp-hero-snapshot > div { align-items: flex-start; flex-direction: column; gap: 3px; }
}
@media (max-width: 640px) {
  .psp-dashboard-view { gap: 13px; }
  .psp-dashboard-hero { padding: 23px 19px; border-radius: 20px; }
  .psp-hero-content h1 { font-size: 29px; }
  .psp-hero-content > p { margin-bottom: 17px; }
  .psp-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .psp-hero-snapshot { grid-template-columns: 1fr; }
  .psp-hero-snapshot > div { flex-direction: row; align-items: center; }
  .db-kpi-card { min-height: 132px; }
}
@media (max-width: 560px) {
  .auth-page { background: linear-gradient(145deg,#f8fbff,#eff8ff 56%,#eef6ff); }
}

/* ═══ PSP AUTH EXPERIENCE · REAL /login + /signup ROUTES ═══ */
.auth-page-login,.auth-page-signup {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(16px,3vw,38px);
}
.auth-ambient { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.auth-ambient-grid {
  position: absolute;
  inset: -15%;
  opacity: .23;
  background-image:
    linear-gradient(rgba(35,72,126,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,72,126,.07) 1px,transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center,black,transparent 73%);
  animation: authGridTravel 26s linear infinite;
}
.auth-ambient-orb { position: absolute; display: block; border-radius: 50%; filter: blur(2px); opacity: .82; }
.auth-ambient-orb--one {
  width: clamp(260px,38vw,620px);
  height: clamp(260px,38vw,620px);
  top: -18%;
  left: -12%;
  background: radial-gradient(circle at 40% 38%,rgba(255,255,255,.94),rgba(17,183,176,.22) 44%,rgba(56,189,248,.10) 70%,transparent 72%);
  animation: authOrbFloat 12s ease-in-out infinite;
}
.auth-ambient-orb--two {
  width: clamp(320px,45vw,720px);
  height: clamp(320px,45vw,720px);
  right: -16%;
  bottom: -25%;
  background: radial-gradient(circle at 38% 35%,rgba(255,255,255,.88),rgba(216,180,254,.22) 43%,rgba(20,184,166,.10) 69%,transparent 72%);
  animation: authOrbFloat 15s ease-in-out -4s infinite reverse;
}
.auth-card-login,.auth-card-signup {
  position: relative;
  z-index: 2;
  width: min(1080px,100%);
  max-width: 1080px;
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 30px;
  background: rgba(255,253,249,.79);
  box-shadow: 0 38px 110px rgba(31,65,120,.17),0 8px 28px rgba(31,65,120,.07);
  backdrop-filter: blur(28px) saturate(135%);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  animation: authPanelReveal .72s cubic-bezier(.2,.8,.2,1) both;
}
.auth-card-login::before,.auth-card-signup::before {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(130deg,rgba(255,255,255,.96),rgba(56,189,248,.22),rgba(167,139,250,.20),rgba(255,255,255,.82));
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.auth-cover,.auth-cover-login,.auth-cover-signup {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 15%,rgba(255,255,255,.90),transparent 31%),
    linear-gradient(145deg,rgba(255,248,225,.97),rgba(255,237,244,.94) 48%,rgba(219,234,254,.94))!important;
}
.auth-cover::after,.auth-cover-login::after,.auth-cover-signup::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  right: -150px;
  bottom: -150px;
  border: 42px solid rgba(255,255,255,.31)!important;
  border-radius: 50%!important;
  animation: authRingDrift 10s ease-in-out infinite;
}
.auth-cover-content { position: relative; z-index: 2; width: 100%; }
.auth-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 7px 11px;
  color: #1558c0;
  background: rgba(255,255,255,.59);
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px;
  box-shadow: 0 7px 20px rgba(35,72,126,.07);
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.auth-live-pill span { width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: pspSignal 2s ease-out infinite; }
.psp-login-brand-image,.psp-signup-brand-image {
  width: min(100%,390px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 1px solid rgba(88,115,155,.08);
  border-radius: 24px;
  background: #f8fbff;
  box-shadow: 0 22px 54px rgba(35,72,126,.12);
  transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
}
.psp-login-brand-image:hover,.psp-signup-brand-image:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 28px 64px rgba(35,72,126,.16); }
.psp-login-brand-short,.psp-signup-brand-short { margin-top: 7px; color: #1769ff; letter-spacing: .34em; text-indent: .34em; }
.psp-login-brand-name,.auth-signup-brand-name { margin: 2px 0 0; color: #17305a!important; font-size: 18px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.auth-cover-copy,.auth-signup-brand-copy { max-width: 390px; margin: 11px auto 20px; color: #5d6f8b!important; font-size: 12px; line-height: 1.65; text-align: center; }
.auth-feature-list { display: grid; gap: 8px; width: min(100%,390px); margin: 0 auto; }
.auth-feature-list > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #31547d;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 13px;
  text-align: left;
  transition: transform .22s ease,background .22s ease;
}
.auth-feature-list > div:hover { transform: translateX(4px); background: rgba(255,255,255,.68); }
.auth-feature-list svg { width: 18px; height: 18px; color: #1769ff; }
.auth-feature-list span { display: grid; gap: 1px; }
.auth-feature-list strong { font-size: 11px; letter-spacing: .01em; }
.auth-feature-list small { color: #71829b; font-size: 9.5px; }

.auth-form-login,.auth-form-signup { position: relative; background: rgba(255,255,255,.78); }
.auth-form-login { min-height: 600px; padding: clamp(30px,4vw,54px); }
.auth-login-inner { max-width: 410px; }
.auth-form-kicker { margin-bottom: 8px; color: #0e7490; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.auth-login-heading h2 { color: #142744; font-size: clamp(27px,3vw,36px); letter-spacing: -.04em; }
.auth-login-heading p { color: #5d6f8b; font-size: 12px; }
.auth-login-form .form-group { animation: authFieldReveal .52s cubic-bezier(.2,.8,.2,1) both; }
.auth-login-form .form-group:nth-child(1) { animation-delay: .10s; }
.auth-login-form .form-group:nth-child(2) { animation-delay: .16s; }
.auth-captcha-card { animation: authFieldReveal .52s cubic-bezier(.2,.8,.2,1) .22s both; }
.auth-submit-btn { animation: authFieldReveal .52s cubic-bezier(.2,.8,.2,1) .28s both; }
.auth-input-wrap { transition: transform .2s ease; }
.auth-input-wrap:focus-within { transform: translateY(-1px); }
.auth-input { min-height: 48px; border-radius: 13px; }
.auth-submit-btn { min-height: 48px; border-radius: 13px; }
.auth-link-row { margin-top: 18px; }
.auth-link-row a,.auth-inline-link { color: #1769ff; font-weight: 800; text-decoration: none; }
.auth-link-row a:hover,.auth-inline-link:hover { color: #0ea5e9; }
.auth-secure-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 17px; color: #71829b; font-size: 9.5px; line-height: 1.45; text-align: center; }
.auth-secure-note svg { width: 12px; height: 12px; color: #10b981; flex: 0 0 auto; }

.auth-card-signup { min-height: min(760px,calc(100dvh - 42px)); }
.auth-cover-signup { width: 370px; min-height: 720px; padding: 28px; }
.auth-form-signup { max-height: min(760px,calc(100dvh - 42px)); padding: clamp(28px,3.5vw,48px); scrollbar-color: rgba(23,105,255,.24) transparent; }
.auth-signup-inner { max-width: 560px; }
.signup-steps { width: min(100%,390px); margin: 22px auto 0; }
.signup-step-ind { min-height: 44px; padding: 9px 11px; color: #5d6f8b; background: rgba(255,255,255,.48); border-color: rgba(255,255,255,.75); border-radius: 13px; }
.signup-step-ind--active { color: #fff; background: linear-gradient(135deg,#1769ff,#0ea5e9 58%,#11b7b0); box-shadow: 0 10px 24px rgba(23,105,255,.18); transform: translateX(4px); }
.auth-signup-inner #signup-step-content > * { animation: authFieldReveal .48s cubic-bezier(.2,.8,.2,1) both; }
.auth-signup-inner #signup-step-content > form { animation-delay: .06s; }
.auth-signup-inner h2 { color: #142744; font-size: 27px!important; letter-spacing: -.035em; }
.auth-signup-inner .form-row { gap: 14px; }
.auth-signup-inner .fly-input { min-height: 46px; border-radius: 12px; }
.proof-dropzone { transition: transform .22s ease,background .22s ease,border-color .22s ease; }
.proof-dropzone:hover { transform: translateY(-2px); }

@keyframes authPanelReveal { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes authFieldReveal { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: translateY(0); } }
@keyframes authOrbFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(18px,14px,0) scale(1.055); } }
@keyframes authGridTravel { to { transform: translate3d(42px,42px,0); } }
@keyframes authRingDrift { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(-14px,-10px,0) rotate(9deg); } }

@media (max-width: 900px) {
  .auth-card-login,.auth-card-signup { width: min(650px,100%); flex-direction: column; border-radius: 25px; }
  .auth-cover,.auth-cover-login,.auth-cover-signup { width: 100%!important; min-height: 0; padding: 24px; }
  .auth-cover-login { padding-block: 25px 22px; }
  .auth-cover-signup { padding-block: 22px; }
  .psp-login-brand-image { width: min(100%,310px); }
  .psp-signup-brand-image { width: min(100%,250px); }
  .auth-feature-list { grid-template-columns: repeat(3,1fr); max-width: 560px; }
  .auth-feature-list > div { grid-template-columns: 1fr; justify-items: center; gap: 5px; text-align: center; }
  .auth-feature-list small { display: none; }
  .auth-form-login { min-height: 0; padding: 32px!important; }
  .auth-form-signup { max-height: none; overflow: visible; padding: 32px!important; }
  .auth-card-signup { min-height: 0; }
  .auth-signup-brand-copy { margin-bottom: 10px; }
  .signup-steps { flex-direction: row; margin-top: 14px; }
  .signup-step-ind { flex: 1; justify-content: center; }
  .signup-step-ind--active { transform: translateY(-2px); }
}
@media (max-width: 600px) {
  .auth-page-login,.auth-page-signup { align-items: flex-start; padding: 10px; }
  .auth-card-login,.auth-card-signup { border-radius: 21px; }
  .auth-cover-login { padding: 18px 14px; }
  .auth-cover-signup { padding: 17px 14px; }
  .auth-live-pill { margin-bottom: 10px; padding: 6px 9px; font-size: 8px; }
  .psp-login-brand-image { width: min(100%,245px); border-radius: 17px; }
  .psp-signup-brand-image { width: min(100%,205px); border-radius: 15px; }
  .psp-login-brand-short,.psp-signup-brand-short { margin-top: 3px; font-size: 11px; }
  .psp-login-brand-name,.auth-signup-brand-name { font-size: 14px; }
  .auth-cover-copy,.auth-signup-brand-copy { display: none; }
  .auth-feature-list { display: none; }
  .auth-form-login,.auth-form-signup { padding: 24px 18px 26px!important; }
  .auth-login-heading h2 { font-size: 27px; }
  .auth-signup-inner h2 { font-size: 24px!important; }
  .auth-signup-inner .form-row { grid-template-columns: 1fr; gap: 0; }
  .signup-steps { gap: 7px; margin-top: 11px; }
  .signup-step-ind { min-height: 38px; padding: 7px; font-size: 10px; }
  .signup-step-ind .step-num { width: 20px; height: 20px; font-size: 10px; }
  .auth-secure-note { padding-inline: 6px; }
}
@media (max-width: 380px) {
  .auth-page-login,.auth-page-signup { padding: 0; }
  .auth-card-login,.auth-card-signup { min-height: 100dvh; border-radius: 0; border-inline: 0; }
  .auth-cover-login,.auth-cover-signup { padding-inline: 12px; }
  .auth-form-login,.auth-form-signup { padding-inline: 15px!important; }
  .auth-captcha-card { grid-template-columns: 1fr 86px; }
  .auth-form-actions { grid-template-columns: 1fr; }
}

/* Panel Owner delivery operations */
.text-muted { color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table thead th { padding: 11px 12px; color: var(--text-secondary); background: rgba(244,249,255,.74); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table tbody tr { border-bottom: 1px solid rgba(226,232,240,.72); transition: background .18s ease; }
.data-table tbody tr:hover { background: rgba(239,246,255,.55); }
.data-table td { padding: 11px 12px; color: var(--text-primary); vertical-align: middle; }
.data-table td code { padding: 2px 6px; color: #0f4fd6; background: rgba(23,105,255,.07); border-radius: 5px; font-family: 'SF Mono','Fira Code',monospace; }
.compact-table th,.compact-table td { padding: 8px 9px; font-size: 11px; }
.table-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.action-btn.danger:hover { color: var(--danger); background: rgba(239,68,68,.07); border-color: var(--danger); }
.fly-btn.danger { color: #fff; background: linear-gradient(135deg,#ef4444,#dc2626); border: 0; box-shadow: 0 7px 18px rgba(220,38,38,.18); }
.stat-label { margin-bottom: 7px; color: var(--text-secondary); font-size: 10px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.stat-value { color: var(--text-primary); font-size: 26px; font-weight: 850; letter-spacing: -.035em; }
.check-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--text-secondary); font-size: 11px; cursor: pointer; }
.check-row input { accent-color: var(--primary); }
.info-box { margin-top: 12px; padding: 13px 15px; color: #31547d; background: linear-gradient(135deg,rgba(239,246,255,.90),rgba(236,254,255,.82)); border: 1px solid rgba(23,105,255,.13); border-radius: 12px; font-size: 11px; line-height: 1.65; }
.info-box p { margin: 6px 0 0; }
.info-box code,.payload-key-list code { color: #0f4fd6; background: rgba(23,105,255,.08); border-radius: 5px; padding: 2px 6px; }
.payload-key-list { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; flex-wrap: wrap; }
.delivery-stat { width: 100%; font-family: inherit; text-align: left; cursor: pointer; }
.delivery-stat.active { border-color: rgba(23,105,255,.45); background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,243,255,.92)); box-shadow: 0 11px 28px rgba(23,105,255,.13); }
.delivery-stat.active::after { content: ''; display: block; width: 34px; height: 3px; margin-top: 10px; background: linear-gradient(90deg,#1769ff,#0ea5e9); border-radius: 999px; }
.operations-filter-card { margin-bottom: 18px; overflow: visible; }
.operations-filter { display: grid; grid-template-columns: minmax(150px,.85fr) minmax(130px,.7fr) minmax(220px,1.35fr) minmax(135px,.7fr) minmax(135px,.7fr) auto; align-items: end; gap: 10px; padding: 15px 17px; }
.operations-filter .form-group { min-width: 0; margin: 0; }
.operations-filter .fly-input { width: 100%; max-width: none!important; }
.filter-actions { display: flex; align-items: center; gap: 7px; padding-bottom: 1px; }
.callback-test-result { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 16px; border: 1px solid; border-radius: 14px; }
.callback-test-result h3 { margin: 0 0 3px; font-size: 15px; }
.callback-test-result p { margin: 0; color: var(--text-secondary); font-size: 12px; }
.callback-test-success { color: #047857; background: rgba(236,253,245,.85); border-color: rgba(16,185,129,.25); }
.callback-test-failed { color: #b91c1c; background: rgba(254,242,242,.88); border-color: rgba(239,68,68,.23); }
.callback-test-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: #fff; background: #10b981; border-radius: 12px; font-size: 18px; font-weight: 900; box-shadow: 0 8px 18px rgba(15,23,42,.10); }
.callback-test-failed .callback-test-icon { background: #ef4444; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 15px; }
.detail-grid > div { min-width: 0; padding: 11px 12px; background: rgba(248,250,252,.82); border: 1px solid var(--border); border-radius: 10px; }
.detail-grid span { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.detail-grid strong,.detail-grid code { display: block; overflow-wrap: anywhere; color: var(--text-primary); font-size: 12px; }
.detail-wide { grid-column: 1 / -1; }
.delivery-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; color: var(--text-secondary); font-size: 11px; }
.detail-section { margin-top: 16px; }
.detail-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--text-primary); font-size: 12px; font-weight: 800; }
.payload-preview { max-height: 220px; margin: 0; padding: 14px; overflow: auto; color: #31547d; background: linear-gradient(145deg,#f8fbff,#f2fbff); border: 1px solid rgba(23,105,255,.12); border-radius: 11px; font: 11px/1.65 'SF Mono','Fira Code',monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty-state.small { padding: 20px 12px; }
.empty-state.small p { margin: 0; }

@media (max-width: 1180px) {
  .operations-filter { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .filter-actions { align-self: end; }
}
@media (max-width: 700px) {
  .operations-filter { grid-template-columns: 1fr; }
  .filter-actions,.filter-actions .fly-btn { width: 100%; }
  .filter-actions .fly-btn { flex: 1; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-wide { grid-column: auto; }
  .payload-key-list { display: flex; margin: 7px 0 0; }
  .modal-footer .fly-btn { flex: 1 1 150px; }
}

/* Dedicated Panel Owner workspace */
.po-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 174px;
  margin-bottom: 18px;
  padding: clamp(24px,3vw,38px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.23),transparent 24%),
    radial-gradient(circle at 12% 130%,rgba(17,183,176,.34),transparent 42%),
    linear-gradient(125deg,#0f4fd6 0%,#2563eb 34%,#0ea5e9 69%,#11b7b0 116%);
  border: 1px solid rgba(255,255,255,.54);
  border-radius: 24px;
  box-shadow: 0 22px 58px rgba(23,105,255,.20),0 7px 20px rgba(23,105,255,.09);
  isolation: isolate;
}
.po-hero::before,.po-hero::after { content: ''; position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; pointer-events: none; }
.po-hero::before { width: 210px; height: 210px; top: -120px; right: 8%; }
.po-hero::after { width: 120px; height: 120px; right: 29%; bottom: -88px; }
.po-hero-copy { max-width: 700px; }
.po-eyebrow { display: block; margin-bottom: 7px; color: inherit; font-size: 9px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; opacity: .78; }
.po-hero h1 { margin: 0 0 8px; color: #fff; font-size: clamp(26px,3vw,38px); line-height: 1.08; letter-spacing: -.045em; }
.po-hero p { max-width: 650px; margin: 0; color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.7; }
.po-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.po-hero .fly-btn { color: #0f4fd6; background: #fff; border-color: rgba(255,255,255,.84); box-shadow: 0 10px 25px rgba(19,66,125,.18); }
.po-hero .fly-btn.secondary { color: #fff; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.42); backdrop-filter: blur(10px); }
.po-hero .fly-btn.secondary:hover,.po-hero .fly-btn.secondary.active { background: rgba(255,255,255,.23); }

.po-kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 18px; }
.po-kpi { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 17px; background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,249,255,.76)); border: 1px solid rgba(255,255,255,.95); border-radius: 17px; box-shadow: var(--shadow-sm); }
.po-kpi-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; }
.po-kpi-icon svg { width: 19px; height: 19px; }
.po-kpi-icon.purple { color: #1769ff; background: rgba(23,105,255,.11); }
.po-kpi-icon.blue { color: #2563eb; background: rgba(37,99,235,.10); }
.po-kpi-icon.amber { color: #d97706; background: rgba(245,158,11,.12); }
.po-kpi-icon.green { color: #059669; background: rgba(16,185,129,.11); }
.po-kpi-icon.red { color: #dc2626; background: rgba(239,68,68,.10); }
.po-kpi > div { min-width: 0; }
.po-kpi span:not(.po-kpi-icon) { display: block; color: var(--text-secondary); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.po-kpi strong { display: block; margin: 1px 0; color: var(--text-primary); font-size: 24px; line-height: 1.1; letter-spacing: -.04em; }
.po-kpi small { display: block; overflow: hidden; color: var(--text-muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.po-kpi-alert { border-color: rgba(239,68,68,.16); background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(254,242,242,.75)); }

.po-workspace-card { overflow: hidden; background: linear-gradient(145deg,rgba(255,255,255,.91),rgba(244,249,255,.74)); border: 1px solid rgba(255,255,255,.96); border-radius: 21px; box-shadow: var(--shadow-sm); }
.po-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; background: linear-gradient(110deg,rgba(239,246,255,.78),rgba(238,246,255,.58)); border-bottom: 1px solid var(--border); }
.po-section-head .po-eyebrow { margin-bottom: 4px; color: #2563eb; }
.po-section-head h2 { margin: 0 0 3px; color: var(--text-primary); font-size: 17px; letter-spacing: -.02em; }
.po-section-head p { margin: 0; color: var(--text-secondary); font-size: 10.5px; }
.po-count-pill { flex: 0 0 auto; padding: 6px 10px; color: #1769ff; background: rgba(23,105,255,.08); border: 1px solid rgba(23,105,255,.12); border-radius: 999px; font-size: 10px; font-weight: 800; }
.po-owner-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 14px; padding: 17px; }
.po-owner-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 17px; overflow: hidden; background: rgba(255,255,255,.76); border: 1px solid rgba(88,115,155,.12); border-radius: 17px; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.po-owner-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: #10b981; }
.po-owner-card.offline::before { background: #94a3b8; }
.po-owner-card.danger::before { background: #ef4444; }
.po-owner-card:hover { transform: translateY(-2px); border-color: rgba(23,105,255,.22); box-shadow: 0 16px 34px rgba(35,72,126,.09); }
.po-owner-top,.po-owner-identity,.po-connection-state,.po-health > div:first-child,.po-owner-last,.po-owner-actions { display: flex; align-items: center; }
.po-owner-top { justify-content: space-between; gap: 10px; }
.po-owner-identity { min-width: 0; gap: 10px; }
.po-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: #fff; background: linear-gradient(135deg,#1769ff,#0ea5e9 65%,#11b7b0); border-radius: 13px; box-shadow: 0 7px 18px rgba(23,105,255,.19); font-size: 12px; font-weight: 900; }
.po-owner-identity > div { min-width: 0; }
.po-owner-identity h3 { margin: 0; overflow: hidden; color: var(--text-primary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.po-owner-identity p { margin: 2px 0 0; overflow: hidden; color: var(--text-muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.po-connection-state { gap: 7px; margin: 14px 0 11px; color: #047857; font-size: 10px; }
.po-owner-card.offline .po-connection-state { color: #64748b; }
.po-owner-card.danger .po-connection-state { color: #b91c1c; }
.po-state-dot { width: 7px; height: 7px; flex: 0 0 7px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb,currentColor 13%,transparent); }
.po-owner-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 12px; overflow: hidden; background: rgba(244,249,255,.76); border: 1px solid var(--border); border-radius: 11px; }
.po-owner-metrics div { padding: 9px 10px; text-align: center; border-right: 1px solid var(--border); }
.po-owner-metrics div:last-child { border: 0; }
.po-owner-metrics span,.po-owner-last span { display: block; color: var(--text-muted); font-size: 8.5px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.po-owner-metrics strong { display: block; margin-top: 2px; color: var(--text-primary); font-size: 15px; }
.danger-text { color: #dc2626!important; }
.po-health { margin-bottom: 12px; }
.po-health > div:first-child { justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--text-secondary); font-size: 9.5px; }
.po-health small { color: var(--text-muted); }
.po-health-track { height: 5px; overflow: hidden; background: rgba(148,163,184,.14); border-radius: 999px; }
.po-health-track i { display: block; height: 100%; background: linear-gradient(90deg,#10b981,#22c55e); border-radius: inherit; }
.po-owner-card.danger .po-health-track i { background: linear-gradient(90deg,#f97316,#ef4444); }
.po-owner-last { justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--border); }
.po-owner-last strong { color: var(--text-secondary); font-size: 9.5px; font-weight: 700; text-align: right; }
.po-owner-actions { gap: 7px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.po-owner-actions .fly-btn { min-height: 34px; height: 34px; padding-inline: 12px; font-size: 10px; flex: 1 1 auto; }
.po-empty { padding: 54px 24px; text-align: center; }
.po-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; color: #fff; background: linear-gradient(135deg,#1769ff,#0ea5e9); border-radius: 20px; box-shadow: 0 15px 30px rgba(23,105,255,.18); font-size: 13px; font-weight: 900; }
.po-empty h3 { margin: 0 0 6px; color: var(--text-primary); }
.po-empty p { max-width: 430px; margin: 0 auto 16px; color: var(--text-secondary); font-size: 11px; line-height: 1.6; }

.po-delivery-hero { min-height: 150px; }
.po-status-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
.po-status-card { position: relative; min-width: 0; padding: 16px 17px; overflow: hidden; font-family: inherit; text-align: left; cursor: pointer; background: rgba(255,255,255,.79); border: 1px solid rgba(255,255,255,.96); border-radius: 16px; box-shadow: var(--shadow-sm); transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.po-status-card::after { content: ''; position: absolute; width: 70px; height: 70px; right: -26px; bottom: -34px; background: var(--status-tone,rgba(23,105,255,.15)); border-radius: 50%; }
.po-status-card:hover,.po-status-card.active { transform: translateY(-2px); border-color: rgba(23,105,255,.36); box-shadow: var(--shadow-md); }
.po-status-card.active { background: linear-gradient(145deg,#fff,rgba(239,246,255,.92)); }
.po-status-card span { display: block; color: var(--text-secondary); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.po-status-card strong { display: block; margin: 3px 0; color: var(--text-primary); font-size: 26px; line-height: 1.1; }
.po-status-card small { display: block; overflow: hidden; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.po-status-card.tone-1 { --status-tone: rgba(23,105,255,.17); }
.po-status-card.tone-2 { --status-tone: rgba(16,185,129,.18); }
.po-status-card.tone-3 { --status-tone: rgba(245,158,11,.19); }
.po-status-card.tone-4 { --status-tone: rgba(239,68,68,.17); }
.po-queue-legend { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; color: var(--text-muted); font-size: 9px; }
.po-queue-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.po-queue-legend i { width: 6px; height: 6px; background: #94a3b8; border-radius: 50%; }
.po-queue-legend i.healthy { background: #10b981; }
.po-queue-legend i.waiting { background: #f59e0b; }
.po-queue-legend i.failed { background: #ef4444; }

@media (max-width: 1120px) {
  .po-kpi-grid,.po-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .po-hero { align-items: flex-start; flex-direction: column; }
  .po-hero-actions { justify-content: flex-start; }
}
@media (max-width: 800px) {
  .po-delivery-table thead { display: none; }
  .po-delivery-table,.po-delivery-table tbody,.po-delivery-table tr,.po-delivery-table td { display: block; width: 100%; }
  .po-delivery-table tbody { padding: 10px; }
  .po-delivery-table tbody tr { margin-bottom: 10px; overflow: hidden; background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 7px 18px rgba(31,65,120,.05); }
  .po-delivery-table tbody tr:last-child { margin-bottom: 0; }
  .po-delivery-table td[data-label] { display: grid; grid-template-columns: minmax(90px,34%) 1fr; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid rgba(88,115,155,.09); text-align: right; }
  .po-delivery-table td[data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: 8.5px; font-weight: 850; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
  .po-delivery-table td[data-label]:last-child { border-bottom: 0; }
  .po-delivery-table .table-actions { justify-content: flex-end; }
}
@media (max-width: 620px) {
  .po-hero { min-height: 0; padding: 23px 18px; border-radius: 19px; }
  .po-hero h1 { font-size: 25px; }
  .po-hero-actions,.po-hero-actions .fly-btn { width: 100%; }
  .po-hero-actions .fly-btn { flex: 1 1 150px; }
  .po-kpi-grid,.po-status-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .po-kpi { padding: 13px; }
  .po-kpi-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .po-kpi strong,.po-status-card strong { font-size: 21px; }
  .po-kpi small,.po-status-card small { white-space: normal; }
  .po-owner-grid { grid-template-columns: 1fr; padding: 10px; }
  .po-section-head { align-items: flex-start; padding: 17px; }
  .po-section-head p { display: none; }
  .po-owner-actions .fly-btn { flex-basis: calc(50% - 4px); }
  .po-queue-legend > span:not(.badge) { display: none; }
}
@media (max-width: 390px) {
  .po-kpi-grid,.po-status-grid { grid-template-columns: 1fr; }
  .po-owner-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .po-owner-actions .fly-btn { flex-basis: 100%; }
}

/* In-panel developer documentation */
.dev-docs-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 170px; margin-bottom: 16px; padding: clamp(24px,3vw,36px); overflow: hidden; background: radial-gradient(circle at 86% 12%,rgba(255,255,255,.72),transparent 23%),linear-gradient(125deg,rgba(239,246,255,.96),rgba(236,254,255,.92) 56%,rgba(240,249,255,.88)); border: 1px solid rgba(255,255,255,.96); border-radius: 23px; box-shadow: var(--shadow-sm); }
.dev-docs-hero .po-eyebrow { color: #2563eb; }
.dev-docs-hero h1 { margin: 0 0 8px; color: var(--text-primary); font-size: clamp(26px,3vw,36px); line-height: 1.1; letter-spacing: -.045em; }
.dev-docs-hero p { max-width: 700px; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.dev-docs-version { display: grid; place-items: center; width: 116px; height: 116px; flex: 0 0 116px; padding: 16px; color: #fff; background: linear-gradient(135deg,#1769ff,#0ea5e9 66%,#11b7b0); border: 6px solid rgba(255,255,255,.65); border-radius: 32px; box-shadow: 0 17px 34px rgba(23,105,255,.20); text-align: center; transform: rotate(2deg); }
.dev-docs-version span,.dev-docs-version small { font-size: 8px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; opacity: .78; }
.dev-docs-version strong { display: block; font-size: 28px; line-height: 1; letter-spacing: -.05em; }
.dev-doc-launch-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.dev-doc-launch { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 17px; color: var(--text-primary); background: rgba(255,255,255,.80); border: 1px solid rgba(255,255,255,.97); border-radius: 17px; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.dev-doc-launch:hover { transform: translateY(-2px); border-color: rgba(23,105,255,.24); box-shadow: var(--shadow-md); }
.dev-doc-launch.primary { background: linear-gradient(135deg,rgba(239,246,255,.94),rgba(255,255,255,.88)); }
.dev-doc-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: #1769ff; background: rgba(23,105,255,.09); border-radius: 12px; }
.dev-doc-icon svg { width: 18px; height: 18px; }
.dev-doc-launch > div { min-width: 0; }
.dev-doc-launch strong { display: block; margin-bottom: 3px; font-size: 12px; }
.dev-doc-launch p { min-height: 31px; margin: 0 0 7px; color: var(--text-secondary); font-size: 9.5px; line-height: 1.55; }
.dev-doc-launch small { color: #1769ff; font-size: 9px; font-weight: 800; }
.dev-doc-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 15px; margin-bottom: 16px; }
.dev-guide-card { min-width: 0; }
.dev-code-block { min-height: 178px; max-height: 360px; margin: 0; padding: 17px; overflow: auto; color: #eff6ff; background: radial-gradient(circle at 100% 0,rgba(14,165,233,.22),transparent 36%),linear-gradient(145deg,#071a36,#102a56); border: 1px solid rgba(255,255,255,.09); border-radius: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); font: 10.5px/1.7 'SF Mono','Fira Code',ui-monospace,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.dev-callout { margin-top: 12px; padding: 12px 13px; color: #31547d; background: rgba(239,246,255,.78); border: 1px solid rgba(23,105,255,.12); border-radius: 11px; }
.dev-callout.success { color: #17654e; background: rgba(236,253,245,.78); border-color: rgba(16,185,129,.17); }
.dev-callout strong { display: block; margin-bottom: 3px; font-size: 10px; }
.dev-callout p { margin: 0; font-size: 9.5px; line-height: 1.55; }
.dev-callout code { padding: 1px 4px; background: rgba(255,255,255,.62); border-radius: 4px; }
.dev-rule-list { display: grid; gap: 9px; }
.dev-rule-list > div { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 10px; padding: 10px; background: rgba(244,249,255,.72); border: 1px solid var(--border); border-radius: 11px; }
.dev-rule-list > div > span { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: linear-gradient(135deg,#1769ff,#0ea5e9); border-radius: 9px; font-size: 10px; font-weight: 900; }
.dev-rule-list p { margin: 0; }
.dev-rule-list strong { display: block; margin-bottom: 2px; color: var(--text-primary); font-size: 10px; }
.dev-rule-list small { display: block; color: var(--text-secondary); font-size: 9px; line-height: 1.5; }
.dev-rule-list code { color: #1769ff; font-size: 8.5px; }
.dev-endpoint-card { margin-bottom: 4px; }
.dev-endpoint-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--border); }
.dev-endpoint-grid > div { display: grid; gap: 4px; min-width: 0; padding: 15px 17px; background: rgba(255,255,255,.78); }
.dev-endpoint-grid span { color: var(--text-primary); font-size: 10px; font-weight: 850; }
.dev-endpoint-grid code { width: fit-content; max-width: 100%; overflow: hidden; padding: 3px 6px; color: #1769ff; background: rgba(23,105,255,.07); border-radius: 5px; font-size: 9px; text-overflow: ellipsis; }
.dev-endpoint-grid small { color: var(--text-muted); font-size: 8.5px; line-height: 1.45; }

@media (max-width: 900px) {
  .dev-doc-layout { grid-template-columns: 1fr; }
  .dev-doc-launch-grid { grid-template-columns: 1fr; }
  .dev-doc-launch p { min-height: 0; }
  .dev-endpoint-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .dev-docs-hero { align-items: flex-start; min-height: 0; padding: 22px 18px; }
  .dev-docs-version { width: 74px; height: 74px; flex-basis: 74px; padding: 8px; border-width: 4px; border-radius: 22px; }
  .dev-docs-version span,.dev-docs-version small { display: none; }
  .dev-docs-version strong { font-size: 22px; }
  .dev-endpoint-grid { grid-template-columns: 1fr; }
}

/* ═══ PSP WORKSPACE COMPONENTS · GUI RELEASE 2026-08 ═══ */
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid rgba(14,165,233,.34);
  outline-offset: 2px;
}
button:disabled,.fly-btn:disabled,.action-btn:disabled {
  cursor: not-allowed !important;
  filter: saturate(.55);
  opacity: .55;
}
.clipboard-fallback { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* First-paint shell; avoids a warm flash before the JavaScript workspace mounts. */
.boot-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 15%,rgba(17,183,176,.16),transparent 34%),
    radial-gradient(circle at 85% 76%,rgba(56,189,248,.16),transparent 38%),
    linear-gradient(135deg,#f8fbff 0%,#eef6ff 52%,#f4fbff 100%);
}
.boot-card { width: min(590px,94vw); text-align: center; }
.boot-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 18px;
  object-fit: contain;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(88,115,155,.11);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(31,65,120,.14);
}
.boot-status { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 7px; color: #31547d; font-size: 13px; font-weight: 750; }
.boot-status .spinner { width: 18px; height: 18px; border-color: rgba(23,105,255,.16); border-top-color: #1769ff; }
.boot-kicker { color: #0e7490; font-size: 10px; font-weight: 850; letter-spacing: .2em; }

/* Adaptive navigation shell. */
.sidebar { transition: width .24s cubic-bezier(.4,0,.2,1),transform .24s cubic-bezier(.4,0,.2,1),box-shadow .24s ease; }
.main-content { transition: margin-left .24s cubic-bezier(.4,0,.2,1),width .24s cubic-bezier(.4,0,.2,1),max-width .24s cubic-bezier(.4,0,.2,1); }
.psp-sidebar-brand-mark { display: none; width: 50px; height: 50px; object-fit: contain; border-radius: 15px; box-shadow: 0 9px 22px rgba(23,105,255,.18); }
.sidebar-shell-tools { display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 7px; padding: 10px 11px 2px; }
.sidebar-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px;
  color: #71829b;
  background: rgba(255,255,255,.73);
  border: 1px solid rgba(88,115,155,.14);
  border-radius: 11px;
  transition: border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.sidebar-search-wrap:focus-within { color: #1769ff; background: #fff; border-color: rgba(23,105,255,.32); box-shadow: 0 0 0 3px rgba(23,105,255,.08); }
.sidebar-search-wrap svg { width: 15px; height: 15px; flex: 0 0 15px; }
.sidebar-search { width: 100%; height: 100%; padding: 0; color: #10213e; background: transparent; border: 0; outline: 0; font: 600 11px/1 Inter,sans-serif; }
.sidebar-search::placeholder { color: #91a0b8; }
.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #52657f;
  background: rgba(255,255,255,.73);
  border: 1px solid rgba(88,115,155,.14);
  border-radius: 11px;
  cursor: pointer;
  font: 700 11px/1 Inter,sans-serif;
}
.sidebar-collapse-btn:hover { color: #1769ff; border-color: rgba(23,105,255,.28); background: #fff; }
.sidebar-collapse-btn span { display: none; }
.sidebar-group-header { width: 100%; background: transparent; border: 0; font-family: inherit; text-align: left; }
.sidebar-group.search-expanded .sidebar-group-items { max-height: 1400px; opacity: 1; }
.sidebar-no-results { margin: 14px 8px; padding: 15px 10px; color: #71829b; background: rgba(255,255,255,.55); border: 1px dashed rgba(88,115,155,.20); border-radius: 11px; font-size: 10px; font-weight: 700; text-align: center; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  color: #fff;
  background: #ef4444;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(239,68,68,.24);
  font-size: 9px;
  font-weight: 850;
  animation: badgePop .3s ease;
}

/* Top command bar and role-density controls. */
.top-bar-eyebrow { display: flex; align-items: center; gap: 6px; }
.top-command-btn,.top-icon-btn,.top-profile-button {
  min-height: 38px;
  color: #52657f;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(88,115,155,.14);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .17s ease,border-color .17s ease,box-shadow .17s ease,background .17s ease;
}
.top-command-btn:hover,.top-icon-btn:hover,.top-profile-button:hover { transform: translateY(-1px); color: #1769ff; background: #fff; border-color: rgba(23,105,255,.27); box-shadow: 0 8px 20px rgba(31,65,120,.08); }
.top-command-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 210px; padding: 0 9px 0 12px; font-size: 11px; font-weight: 700; }
.top-command-btn > span { margin-right: auto; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 5px; color: #71829b; background: #f2f6fc; border: 1px solid rgba(88,115,155,.16); border-bottom-width: 2px; border-radius: 6px; font: 750 9px/1 Inter,sans-serif; }
.top-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 38px; padding: 0 10px; }
.top-density-btn span { font-size: 10px; font-weight: 750; }
.top-notification-count { position: absolute; top: -6px; right: -7px; min-width: 19px; margin: 0; pointer-events: none; }
.top-profile-button { display: flex; align-items: center; gap: 9px; padding: 4px 9px 4px 5px; text-align: left; }
.top-bar-user-name { display: grid; gap: 1px; }
.top-bar-user-name > span { color: #10213e; font-size: 11px; font-weight: 750; }
.top-bar-user-name small { color: #71829b; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }

html[data-density="compact"] .page-content { padding: 18px 22px 24px; }
html[data-density="compact"] .stats-grid,html[data-density="compact"] .db-kpi-grid { gap: 10px; margin-bottom: 14px; }

/* Secure API workbench, pull-carrier controls, and settlement visibility. */
.dev-token-workbench,.dev-api-reference { margin-bottom:16px; }
.dev-token-input-row { display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap; }
.dev-token-input-row .form-group { flex:1;min-width:min(100%,280px);margin:0; }
.dev-token-input { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.dev-reference-grid,.dev-error-grid,.pull-control-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px; }
.dev-reference-grid>div,.dev-error-grid>div,.pull-control-grid>div { min-width:0;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--bg-page); }
.dev-reference-grid span,.dev-error-grid span,.pull-control-grid span { display:block;color:var(--text-secondary);font-size:11px;margin-bottom:5px; }
.dev-reference-grid code { display:block;overflow-wrap:anywhere; }
.dev-parameter-table { min-width:780px; }
.dev-response-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 8px; }
.dev-response-head small { display:block;color:var(--text-secondary); }
.dev-api-response { max-height:330px;overflow:auto; }
.provider-pull-summary { display:grid;gap:7px;margin-bottom:10px;padding:11px;border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 6%,var(--bg-page)),var(--bg-page));font-size:11px;color:var(--text-secondary); }
.provider-pull-summary span { min-width:0;overflow-wrap:anywhere; }
.provider-pull-summary strong { color:var(--text-primary);margin-right:7px; }
.provider-pull-summary .provider-pull-error { color:var(--danger); }
.provider-pull-config-form { padding:12px;margin:10px 0;border:1px solid var(--border);border-radius:14px;background:var(--bg-page); }
.provider-pull-toggles { display:grid;gap:9px;font-size:12px;color:var(--text-secondary); }
.provider-pull-toggles label { display:flex;align-items:flex-start;gap:8px; }
.pull-control-hero { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px;margin-bottom:14px;border-radius:16px;color:#fff;background:linear-gradient(125deg,#0f766e,#1769ff); }
.pull-control-hero h3 { margin:4px 0 7px;color:#fff;font-size:24px; }
.pull-control-hero p { margin:0;max-width:650px;color:rgba(255,255,255,.82);font-size:12px;line-height:1.6; }
.pull-control-grid strong { display:block;overflow-wrap:anywhere; }
.user-ledger-money { display:block;font-weight:750; }
.user-ledger-money small { display:block;margin-top:3px;color:var(--text-secondary);font-size:10px;font-weight:500; }
.user-finance-total { min-width:118px; }
.test-panel-range-policy { display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0;padding:15px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--bg-card)),var(--bg-page)); }
.test-panel-range-policy strong,.test-panel-range-policy small { display:block; }
.test-panel-range-policy small { max-width:680px;margin-top:4px;color:var(--text-secondary);font-size:11px;line-height:1.55; }
@media(max-width:900px){.dev-reference-grid,.dev-error-grid,.pull-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pull-control-hero{flex-direction:column}}
@media(max-width:560px){.dev-reference-grid,.dev-error-grid,.pull-control-grid{grid-template-columns:1fr}.dev-token-input-row>*{width:100%}.pull-control-hero{padding:17px}}
html[data-density="compact"] .card-header { padding: 13px 16px; }
html[data-density="compact"] .card-body { padding: 15px 16px; }
html[data-density="compact"] .fly-table th { padding-block: 8px; }
html[data-density="compact"] .fly-table td { padding-block: 7px; }
html[data-density="compact"] .form-group { margin-bottom: 12px; }
html[data-density="compact"] .filter-bar { padding-block: 8px; }

@media (min-width: 1025px) {
  html[data-sidebar="collapsed"] .sidebar { width: 82px; }
  html[data-sidebar="collapsed"] .main-content { margin-left: 82px !important; width: calc(100% - 82px) !important; max-width: calc(100% - 82px) !important; }
  html[data-sidebar="collapsed"] .sidebar-logo { min-height: 82px; padding: 14px; justify-content: center; }
  html[data-sidebar="collapsed"] .psp-sidebar-brand { width: auto; }
  html[data-sidebar="collapsed"] .psp-sidebar-brand-image,html[data-sidebar="collapsed"] .psp-sidebar-brand-copy { display: none; }
  html[data-sidebar="collapsed"] .psp-sidebar-brand-mark { display: block; }
  html[data-sidebar="collapsed"] .sidebar-shell-tools { display: block; padding: 9px 14px 2px; }
  html[data-sidebar="collapsed"] .sidebar-search-wrap { display: none; }
  html[data-sidebar="collapsed"] .sidebar-collapse-btn { width: 100%; }
  html[data-sidebar="collapsed"] .sidebar-nav { padding-inline: 12px; }
  html[data-sidebar="collapsed"] .sidebar-group { margin: 0; }
  html[data-sidebar="collapsed"] .sidebar-group + .sidebar-group { padding-top: 5px; border-top: 1px solid rgba(88,115,155,.10); }
  html[data-sidebar="collapsed"] .sidebar-group-header { display: none; }
  html[data-sidebar="collapsed"] .sidebar-group-items,html[data-sidebar="collapsed"] .sidebar-group.collapsed .sidebar-group-items { max-height: 1600px; opacity: 1; }
  html[data-sidebar="collapsed"] .sidebar-nav-item { justify-content: center; width: 56px; height: 42px; padding: 0; }
  html[data-sidebar="collapsed"] .sidebar-nav-item .nav-label { display: none; }
  html[data-sidebar="collapsed"] .sidebar-nav-item .nav-icon { display: grid; place-items: center; margin: 0; }
  html[data-sidebar="collapsed"] .notification-count-badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 3px; border-width: 1px; font-size: 8px; }
  html[data-sidebar="collapsed"] .sidebar-user { padding-inline: 12px; }
  html[data-sidebar="collapsed"] .sidebar-user-info { justify-content: center; padding-inline: 0; }
  html[data-sidebar="collapsed"] .sidebar-user-info > div:not(.sidebar-user-avatar) { display: none; }
  html[data-sidebar="collapsed"] .sidebar-logout { justify-content: center; }
  html[data-sidebar="collapsed"] .sidebar-logout span { display: none; }
}

/* Keyboard-first quick navigation. */
.command-palette-backdrop { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: flex-start; justify-content: center; padding: min(15vh,130px) 18px 18px; background: rgba(7,26,54,.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fadeIn .16s ease both; }
.command-palette { width: min(620px,100%); overflow: hidden; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.96); border-radius: 20px; box-shadow: 0 34px 90px rgba(7,26,54,.22); animation: scaleIn .2s cubic-bezier(.2,.8,.2,1) both; }
.command-search-wrap { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 14px 16px; color: #1769ff; border-bottom: 1px solid rgba(88,115,155,.13); }
.command-search { height: 38px; padding: 0; color: #10213e; background: transparent; border: 0; outline: 0; font: 700 15px/1 Inter,sans-serif; }
.command-search::placeholder { color: #91a0b8; }
.command-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px 7px; color: #71829b; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.command-heading small { font-size: 9px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.command-results { max-height: min(52vh,440px); padding: 5px 9px 10px; overflow-y: auto; }
.command-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 7px 10px; color: #31547d; background: transparent; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-family: inherit; text-align: left; }
.command-item:hover,.command-item.selected { color: #1769ff; background: linear-gradient(135deg,rgba(239,246,255,.94),rgba(236,254,255,.72)); border-color: rgba(23,105,255,.12); }
.command-item-icon { display: grid; place-items: center; width: 36px; height: 36px; color: currentColor; background: rgba(23,105,255,.08); border-radius: 10px; }
.command-item strong,.command-item small { display: block; }
.command-item strong { color: #10213e; font-size: 11.5px; }
.command-item small { margin-top: 2px; color: #71829b; font-size: 8.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.command-open { color: #91a0b8; font-size: 13px; }
.command-footer { display: flex; align-items: center; gap: 15px; padding: 10px 16px; color: #71829b; background: #f6f9fd; border-top: 1px solid rgba(88,115,155,.11); font-size: 9px; }
.command-footer span { display: inline-flex; align-items: center; gap: 4px; }

/* Accessible modal, feedback and shared loading/empty states. */
.modal-overlay { background: rgba(7,26,54,.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal { border: 1px solid rgba(255,255,255,.96); box-shadow: 0 30px 90px rgba(7,26,54,.20); }
.modal.small { max-width: 400px; }
.modal.medium { max-width: 520px; }
.modal.large { max-width: 820px; }
.toast { transition: opacity .3s ease,transform .3s ease; }
.toast-icon-success { color: var(--success); }
.toast-icon-error { color: var(--danger); }
.toast-icon-warning { color: var(--warning); }
.toast-icon-info { color: var(--info); }
.ui-empty-state { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 36px 20px; }
.ui-empty-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 5px; color: #1769ff; background: linear-gradient(145deg,rgba(239,246,255,.96),rgba(236,254,255,.82)); border: 1px solid rgba(23,105,255,.12); border-radius: 17px; }
.ui-empty-state h3,.ui-empty-state p { margin: 0; }
.ui-empty-state p { max-width: 480px; color: #71829b; line-height: 1.6; }
.ui-empty-actions { margin-top: 9px; }
.ui-skeleton { display: grid; gap: 10px; padding: 18px; }
.ui-skeleton > span { position: relative; display: block; height: 38px; overflow: hidden; background: #edf3fa; border-radius: 9px; }
.ui-skeleton > span::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg,transparent,rgba(255,255,255,.86),transparent); animation: pspSkeleton 1.25s ease-in-out infinite; }
.ui-skeleton .ui-skeleton-title { width: 36%; height: 24px; }
@keyframes pspSkeleton { to { transform: translateX(100%); } }

/* Data-heavy pages remain compact on desktop and become readable cards when opted in. */
.table-wrapper { border-radius: 0 0 15px 15px; scrollbar-color: rgba(23,105,255,.25) transparent; }
.fly-table thead th { position: sticky; top: 0; z-index: 2; }
.fly-table .actions-cell { white-space: nowrap; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.page-header h1 { margin: 0; color: #10213e; font-size: clamp(22px,2.5vw,30px); line-height: 1.12; letter-spacing: -.035em; }
.page-kicker { display: block; margin-bottom: 6px; color: #0e7490; font-size: 9px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.page-header p { margin: 6px 0 0; color: #71829b; font-size: 11px; line-height: 1.6; }
.page-actions,.section-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb,currentColor 12%,transparent); }
.ui-muted { color: #71829b; }
.ui-mono { font-family: 'SF Mono','Fira Code',ui-monospace,monospace; }

@media (max-width: 1320px) {
  .top-density-btn span { display: none; }
  .top-command-btn { min-width: 170px; }
}
@media (max-width: 1150px) {
  .top-command-btn { min-width: 40px; width: 40px; padding: 0; justify-content: center; }
  .top-command-btn > span,.top-command-btn kbd,.top-profile-button .top-bar-user-name { display: none; }
  .top-profile-button { width: 40px; padding: 3px; justify-content: center; }
}
@media (max-width: 1024px) {
  .sidebar-collapse-btn { display: none; }
  .sidebar-shell-tools { grid-template-columns: 1fr; padding-top: 9px; }
  .card,.stat-card,.db-kpi-card,.profile-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  html[data-density="compact"] .page-content { padding: 16px; }
}
@media (max-width: 760px) {
  .top-bar-actions { gap: 6px; }
  .top-icon-btn,.top-command-btn,.top-profile-button { width: 36px; min-width: 36px; min-height: 36px; height: 36px; padding: 0; }
  .top-density-btn { display: none; }
  .top-bar-logout { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .top-bar-logout span { display: none; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-actions { width: 100%; justify-content: flex-start; }
  .responsive-card-wrapper { max-height: none; overflow: visible; }
  .responsive-card-wrapper::after { display: none; content: none; }
  .responsive-card-table { min-width: 0 !important; max-width: 100%; table-layout: fixed; }
  .responsive-card-table thead { display: none; }
  .responsive-card-table,.responsive-card-table tbody,.responsive-card-table tr,.responsive-card-table td { display: block; width: 100%; max-width: none; }
  .responsive-card-table tbody { padding: 9px; }
  .responsive-card-table tbody tr { margin-bottom: 10px; overflow: hidden; background: rgba(255,255,255,.82); border: 1px solid rgba(88,115,155,.13); border-radius: 13px; box-shadow: 0 8px 20px rgba(31,65,120,.06); }
  .responsive-card-table td[data-label] { display: grid; grid-template-columns: minmax(92px,36%) 1fr; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid rgba(88,115,155,.09); text-align: right; }
  .responsive-card-table td[data-label]::before { content: attr(data-label); color: #71829b; font-size: 8.5px; font-weight: 850; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
  .responsive-card-table td[data-label]:last-child { border-bottom: 0; }
  .responsive-card-table td[data-label="Message"] { align-items: start; text-align: left; }
  .responsive-card-table .message-text { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; word-break: break-word; line-height: 1.55; }
  .responsive-card-table .empty-row td { display: block; padding: 28px 12px; text-align: center; }
}
@media (max-width: 560px) {
  .top-bar { padding-right: 9px; }
  .top-bar-actions { gap: 4px; }
  .top-bar-logout { display: none; }
  .command-palette-backdrop { padding: 64px 8px 8px; align-items: flex-start; }
  .command-palette { border-radius: 16px; }
  .command-results { max-height: calc(100dvh - 230px); }
  .command-footer { display: none; }
  .modal-overlay { align-items: flex-end; padding: 8px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .modal { max-height: calc(100dvh - 16px); border-radius: 18px; }
  .card,.stat-card,.db-kpi-card,.profile-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .boot-screen { padding: 12px; }
  .boot-logo { border-radius: 18px; }
}

/* ═══ MY SMS · EXPANDABLE MESSAGE REPORT 2026-08 ═══ */
.sms-report-page { display: grid; gap: 16px; }
.sms-report-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 154px;
  padding: clamp(24px,3vw,34px);
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 12%,rgba(255,255,255,.82),transparent 22%),
    radial-gradient(circle at 74% 110%,rgba(17,183,176,.18),transparent 35%),
    linear-gradient(125deg,rgba(239,246,255,.98),rgba(236,254,255,.91) 55%,rgba(240,249,255,.94));
  border: 1px solid rgba(255,255,255,.97);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}
.sms-report-hero::before,.sms-report-hero::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.sms-report-hero::before { width: 220px; height: 220px; right: 18%; top: -154px; background: rgba(56,189,248,.16); animation: pspAuroraFloat 10s ease-in-out infinite; }
.sms-report-hero::after { width: 132px; height: 132px; right: 4%; bottom: -92px; background: rgba(23,105,255,.12); animation: pspAuroraFloat 8s ease-in-out -2s infinite reverse; }
.sms-report-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #0e7490; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.sms-report-kicker i { width: 7px; height: 7px; background: #11b7b0; border-radius: 50%; box-shadow: 0 0 0 4px rgba(17,183,176,.12); animation: smsLivePulse 2s ease-in-out infinite; }
@keyframes smsLivePulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(17,183,176,.12); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgba(17,183,176,.04); transform: scale(.86); }
}
.sms-report-hero h1 { margin: 0; color: #10213e; font-size: clamp(28px,3.2vw,42px); line-height: 1; font-weight: 900; letter-spacing: -.045em; }
.sms-report-hero p { margin: 10px 0 0; color: #5d6f8b; font-size: 12px; line-height: 1.6; }
.sms-report-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.sms-last-updated { color: #71829b; font-size: 9.5px; font-weight: 700; }

.sms-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.sms-summary-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 104px;
  padding: 17px;
  overflow: hidden;
  background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(244,249,255,.78));
  border: 1px solid rgba(255,255,255,.97);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease,box-shadow .18s ease;
}
.sms-summary-card::after { content: ''; position: absolute; width: 74px; height: 74px; right: -31px; bottom: -39px; background: var(--sms-tone-soft); border-radius: 50%; }
.sms-summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sms-summary-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; color: var(--sms-tone); background: var(--sms-tone-soft); border-radius: 13px; }
.sms-summary-card > div { min-width: 0; }
.sms-summary-card small { display: block; color: #71829b; font-size: 8.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sms-summary-card strong { display: block; margin: 2px 0; overflow: hidden; color: #10213e; font-size: 24px; line-height: 1.1; font-weight: 900; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.sms-summary-card strong.sms-summary-money { font-size: 13px; letter-spacing: -.02em; }
.sms-summary-card div > span { display: block; overflow: hidden; color: #91a0b8; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.sms-summary-card.tone-blue { --sms-tone:#1769ff; --sms-tone-soft:rgba(23,105,255,.11); }
.sms-summary-card.tone-teal { --sms-tone:#0f8f8a; --sms-tone-soft:rgba(17,183,176,.12); }
.sms-summary-card.tone-sky { --sms-tone:#0284c7; --sms-tone-soft:rgba(14,165,233,.11); }
.sms-summary-card.tone-green { --sms-tone:#059669; --sms-tone-soft:rgba(16,185,129,.11); }

.sms-workspace-card { min-width: 0; overflow: hidden; background: linear-gradient(145deg,rgba(255,255,255,.93),rgba(244,249,255,.75)); border: 1px solid rgba(255,255,255,.97); border-radius: 22px; box-shadow: var(--shadow-sm); }
.sms-filter-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 19px 21px 12px; }
.sms-filter-head h2 { margin: 0; color: #10213e; font-size: 17px; letter-spacing: -.025em; }
.sms-filter-grid { display: grid; grid-template-columns: minmax(220px,1.5fr) repeat(2,minmax(140px,.8fr)) repeat(2,minmax(132px,.65fr)); gap: 10px; padding: 4px 21px 13px; }
.sms-filter-field { display: grid; gap: 5px; min-width: 0; }
.sms-filter-field > span { color: #71829b; font-size: 8.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.sms-filter-field input,.sms-filter-field select {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0 11px;
  color: #10213e;
  background: rgba(255,255,255,.91);
  border: 1px solid rgba(88,115,155,.18);
  border-radius: 11px;
  outline: 0;
  font: 650 10.5px/1 Inter,sans-serif;
  transition: border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.sms-filter-field input:focus,.sms-filter-field select:focus { background: #fff; border-color: #38bdf8; box-shadow: 0 0 0 4px rgba(14,165,233,.09); }
.sms-filter-field input[aria-invalid="true"] { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.08); }
.sms-search-control { position: relative; min-width: 0; }
.sms-search-control > svg { position: absolute; left: 12px; top: 50%; z-index: 1; width: 15px; height: 15px; color: #91a0b8; transform: translateY(-50%); pointer-events: none; }
.sms-search-control input { padding-left: 35px; }
.sms-filter-chips { display: flex; align-items: center; gap: 7px; min-height: 35px; padding: 0 21px 12px; overflow-x: auto; }
.sms-filter-chips button { display: inline-flex; align-items: center; gap: 5px; min-height: 27px; padding: 4px 8px; color: #31547d; background: rgba(239,246,255,.86); border: 1px solid rgba(23,105,255,.12); border-radius: 999px; cursor: pointer; font: 650 9px/1.2 Inter,sans-serif; white-space: nowrap; }
.sms-filter-chips button:hover { color: #1769ff; border-color: rgba(23,105,255,.26); }
.sms-filter-chips button span { color: #71829b; }
.sms-filter-chips button strong { font-weight: 800; }
.sms-filter-chips button svg { width: 11px; height: 11px; }
.sms-no-filters { color: #91a0b8; font-size: 9px; font-weight: 650; }

.sms-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 49px; padding: 9px 21px; background: linear-gradient(100deg,rgba(239,246,255,.72),rgba(236,254,255,.42)); border-top: 1px solid rgba(88,115,155,.09); border-bottom: 1px solid rgba(88,115,155,.10); }
.sms-results-bar > div { display: flex; align-items: baseline; gap: 8px; }
.sms-results-bar strong { color: #10213e; font-size: 11px; }
.sms-results-bar > div span { color: #71829b; font-size: 9px; }
.sms-page-size { display: inline-flex; align-items: center; gap: 7px; color: #71829b; font-size: 9px; font-weight: 750; }
.sms-page-size select { height: 30px; padding: 0 24px 0 8px; color: #31547d; background: #fff; border: 1px solid rgba(88,115,155,.16); border-radius: 8px; font: 750 9px Inter,sans-serif; }

.sms-results-region { position: relative; min-height: 230px; }
.sms-loading-layer { position: absolute; z-index: 8; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; color: #52657f; background: rgba(248,251,255,.74); opacity: 0; pointer-events: none; backdrop-filter: blur(2px); transition: opacity .16s ease; font-size: 10px; font-weight: 750; }
.sms-loading-layer .spinner { width: 18px; height: 18px; }
.sms-results-region.is-loading .sms-loading-layer { opacity: 1; pointer-events: auto; }
.sms-results-region.is-loading .sms-desktop-results,.sms-results-region.is-loading .sms-mobile-results { opacity: .55; }
.sms-desktop-results,.sms-mobile-results { transition: opacity .16s ease; }
.sms-mobile-results { display: none; }
.sms-report-table-wrap { max-height: min(61vh,620px); border-radius: 0; }
.sms-report-table { min-width: 920px; table-layout: fixed; }
.sms-report-table th:nth-child(1) { width: 94px; }
.sms-report-table th:nth-child(2) { width: 154px; }
.sms-report-table th:nth-child(3) { width: 154px; }
.sms-report-table th:nth-child(4) { width: 104px; }
.sms-report-table th:nth-child(5) { width: 126px; }
.sms-report-table th:nth-child(7) { width: 52px; }
.sms-report-table .sms-primary-row { cursor: default; animation: rowIn .22s ease both; }
.sms-report-table .sms-primary-row.expanded { background: linear-gradient(90deg,rgba(239,246,255,.76),rgba(236,254,255,.42)); }
.sms-report-table .sms-primary-row td { padding: 11px 13px; max-width: none; }
.sms-primary-row time { color: #52657f; font-size: 9.5px; font-weight: 750; white-space: nowrap; }
.sms-primary-row td > small { display: block; max-width: 145px; margin-top: 4px; overflow: hidden; color: #91a0b8; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.sms-primary-row td > code { display: block; max-width: 145px; overflow: hidden; color: #0f4fd6; background: rgba(219,234,254,.62); text-overflow: ellipsis; white-space: nowrap; }
.sms-app-badge { display: inline-flex; align-items: center; max-width: 145px; min-height: 24px; padding: 4px 8px; overflow: hidden; color: #0f4fd6; background: rgba(23,105,255,.09); border: 1px solid rgba(23,105,255,.10); border-radius: 8px; font-size: 9px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.sms-otp-button { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 4px 8px; color: #b42318; background: rgba(254,242,242,.88); border: 1px solid rgba(239,68,68,.13); border-radius: 8px; cursor: pointer; font: 850 10px/1 'SF Mono','Fira Code',ui-monospace,monospace; }
.sms-otp-button:hover { color: #991b1b; background: #fff; border-color: rgba(239,68,68,.28); }
.sms-otp-button svg { width: 12px; height: 12px; }
.sms-otp-hidden { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 8px; color: #7c2d12; background: linear-gradient(135deg,rgba(255,247,237,.96),rgba(254,242,242,.92)); border: 1px solid rgba(249,115,22,.18); border-radius: 8px; font-size: 9px; font-weight: 850; white-space: nowrap; }
.sms-otp-hidden svg { width: 11px; height: 11px; }
.sms-no-value { color: #b0bccd; }
.sms-payout { display: block; font-size: 9.5px; line-height: 1.35; white-space: normal; }
.sms-payout.paid { color: #047857; }
.sms-payout.zero { color: #71829b; font-weight: 700; }
.sms-message-preview { display: -webkit-box; max-width: 100%; overflow: hidden; color: #52657f; font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sms-expand-button { display: grid; place-items: center; width: 31px; height: 31px; margin-left: auto; color: #71829b; background: rgba(255,255,255,.78); border: 1px solid rgba(88,115,155,.14); border-radius: 9px; cursor: pointer; transition: color .18s ease,transform .18s ease,background .18s ease; }
.sms-expand-button:hover { color: #1769ff; background: #fff; }
.sms-expand-button[aria-expanded="true"] { color: #1769ff; transform: rotate(180deg); }
.sms-details-row { background: rgba(247,251,255,.84) !important; }
.sms-details-row td { padding: 0 !important; max-width: none !important; }

.sms-detail-panel { display: grid; grid-template-columns: minmax(260px,1.1fr) minmax(340px,.9fr); gap: 14px; padding: 16px 18px 19px; border-top: 1px dashed rgba(88,115,155,.15); animation: fadeInUp .18s ease both; }
.sms-full-message { min-width: 0; padding: 14px; background: rgba(255,255,255,.82); border: 1px solid rgba(88,115,155,.12); border-radius: 13px; }
.sms-full-message > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.sms-full-message > div > span { color: #71829b; font-size: 8.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.sms-full-message button,.sms-inline-copy { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: #1769ff; background: rgba(239,246,255,.86); border: 1px solid rgba(23,105,255,.12); border-radius: 7px; cursor: pointer; font: 750 8.5px Inter,sans-serif; }
.sms-full-message button svg,.sms-inline-copy svg { width: 11px; height: 11px; }
.sms-full-message p { margin: 0; color: #31547d; font-size: 10.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.sms-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
.sms-detail-grid > div { min-width: 0; padding: 10px 11px; background: rgba(255,255,255,.60); border: 1px solid rgba(88,115,155,.10); border-radius: 10px; }
.sms-detail-grid dt { margin-bottom: 4px; color: #91a0b8; font-size: 7.5px; font-weight: 850; letter-spacing: .065em; text-transform: uppercase; }
.sms-detail-grid dd { margin: 0; overflow: hidden; color: #31547d; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sms-detail-grid code { color: #0f4fd6; font-size: 8.5px; }
.sms-inline-copy { margin-left: 4px; padding: 3px 4px; vertical-align: middle; }

.sms-report-empty { padding: 10px; }
.sms-report-empty .ui-empty-state { min-height: 280px; }
.sms-report-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 11px 18px; border-top: 1px solid rgba(88,115,155,.10); }
.sms-report-pagination > div { display: flex; align-items: center; gap: 5px; }
.sms-report-pagination button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; color: #52657f; background: rgba(255,255,255,.74); border: 1px solid rgba(88,115,155,.14); border-radius: 9px; cursor: pointer; font: 750 9px Inter,sans-serif; }
.sms-report-pagination button:hover:not(:disabled),.sms-report-pagination button.active { color: #fff; background: linear-gradient(135deg,#1769ff,#0ea5e9); border-color: transparent; box-shadow: 0 7px 16px rgba(23,105,255,.16); }
.sms-report-pagination button:disabled { opacity: .42; }
.sms-page-gap { color: #91a0b8; padding: 0 2px; }

@media (max-width: 1180px) {
  .sms-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sms-filter-grid { grid-template-columns: minmax(220px,1.4fr) repeat(2,minmax(140px,.8fr)); }
  .sms-filter-field:nth-last-child(-n+2) { grid-column: span 1; }
}
@media (max-width: 900px) {
  .sms-report-hero { align-items: flex-start; min-height: 0; }
  .sms-desktop-results { display: none !important; }
  .sms-mobile-results { display: grid; gap: 10px; padding: 11px; }
  .sms-mobile-card { min-width: 0; padding: 14px; background: rgba(255,255,255,.84); border: 1px solid rgba(88,115,155,.12); border-radius: 15px; box-shadow: 0 8px 22px rgba(31,65,120,.06); }
  .sms-mobile-card.expanded { border-color: rgba(23,105,255,.22); box-shadow: 0 13px 28px rgba(31,65,120,.09); }
  .sms-mobile-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .sms-mobile-card > header time { color: #71829b; font-size: 9px; font-weight: 700; }
  .sms-mobile-route { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 9px; padding: 11px; background: rgba(239,246,255,.58); border-radius: 11px; }
  .sms-mobile-route > span { color: #91a0b8; }
  .sms-mobile-route div { min-width: 0; }
  .sms-mobile-route div:last-child { text-align: right; }
  .sms-mobile-route small,.sms-mobile-metrics small { display: block; margin-bottom: 3px; color: #91a0b8; font-size: 7.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
  .sms-mobile-route code,.sms-mobile-route strong { display: block; overflow: hidden; color: #31547d; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
  .sms-mobile-preview { display: -webkit-box; margin: 12px 2px; overflow: hidden; color: #52657f; font-size: 10.5px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .sms-mobile-metrics { display: grid; grid-template-columns: minmax(90px,.7fr) minmax(120px,1fr) auto; align-items: end; gap: 10px; padding-top: 11px; border-top: 1px solid rgba(88,115,155,.09); }
  .sms-mobile-expand { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 0 9px; color: #1769ff; background: rgba(239,246,255,.82); border: 1px solid rgba(23,105,255,.12); border-radius: 9px; cursor: pointer; font: 750 8.5px Inter,sans-serif; }
  .sms-mobile-expand svg { width: 12px; height: 12px; transition: transform .18s ease; }
  .sms-mobile-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sms-mobile-details { margin-top: 13px; }
  .sms-mobile-details .sms-detail-panel { grid-template-columns: 1fr; padding: 13px 0 0; border-top-color: rgba(88,115,155,.12); }
  .sms-mobile-details .sms-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .sms-report-hero { flex-direction: column; padding: 23px 18px; border-radius: 19px; }
  .sms-report-actions { width: 100%; justify-content: space-between; }
  .sms-filter-head { align-items: flex-start; padding: 17px 15px 11px; }
  .sms-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 15px; }
  .sms-filter-search { grid-column: 1 / -1; }
  .sms-filter-chips { padding-inline: 15px; }
  .sms-results-bar { padding-inline: 15px; }
  .sms-report-pagination { flex-wrap: wrap; justify-content: center; }
  .sms-report-pagination > div { order: -1; width: 100%; justify-content: center; }
}
@media (max-width: 470px) {
  .sms-report-page { gap: 10px; }
  .sms-summary-grid { gap: 8px; }
  .sms-summary-card { min-height: 92px; padding: 12px; border-radius: 14px; }
  .sms-summary-icon { width: 35px; height: 35px; flex-basis: 35px; border-radius: 10px; }
  .sms-summary-card strong { font-size: 19px; }
  .sms-summary-card strong.sms-summary-money { font-size: 9px; white-space: normal; }
  .sms-summary-card div > span { display: none; }
  .sms-filter-grid { grid-template-columns: 1fr; }
  .sms-filter-search { grid-column: auto; }
  .sms-mobile-metrics { grid-template-columns: 1fr 1fr; }
  .sms-mobile-expand { grid-column: 1 / -1; width: 100%; }
  .sms-mobile-details .sms-detail-grid { grid-template-columns: 1fr; }
  .sms-full-message > div { align-items: flex-start; }
  .sms-results-bar { align-items: flex-start; }
  .sms-results-bar > div { display: grid; gap: 2px; }
}

/* ═══ OPERATIONAL NOTIFICATION CENTER · 2026-08 ═══ */
.notification-center-page { display: grid; gap: 16px; }
.notification-center-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 148px;
  padding: clamp(24px,3vw,34px);
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 8%,rgba(255,255,255,.92),transparent 24%),
    radial-gradient(circle at 70% 118%,rgba(16,185,129,.15),transparent 35%),
    linear-gradient(125deg,rgba(239,246,255,.97),rgba(236,254,255,.90));
  border: 1px solid rgba(255,255,255,.97);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}
.notification-center-hero::after { content: ''; position: absolute; width: 180px; height: 180px; right: 18%; top: -132px; background: rgba(14,165,233,.12); border-radius: 50%; animation: pspAuroraFloat 10s ease-in-out infinite; pointer-events: none; }
.notification-center-hero h1 { margin: 3px 0 8px; color: #10213e; font-size: clamp(27px,3vw,40px); line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.notification-center-hero p { max-width: 670px; margin: 0; color: #5d6f8b; font-size: 11px; line-height: 1.65; }
.notification-hero-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.notification-unread-total { display: inline-flex; align-items: baseline; gap: 5px; min-height: 38px; padding: 9px 12px; color: #52657f; background: rgba(255,255,255,.72); border: 1px solid rgba(88,115,155,.13); border-radius: 11px; font-size: 9px; font-weight: 750; }
.notification-unread-total strong { color: #1769ff; font-size: 17px; font-weight: 900; }
.notification-center-card { overflow: hidden; background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,249,255,.77)); border: 1px solid rgba(255,255,255,.97); border-radius: 22px; box-shadow: var(--shadow-sm); }
.notification-filter-tabs { display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: rgba(239,246,255,.55); border-bottom: 1px solid rgba(88,115,155,.10); }
.notification-filter-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; color: #71829b; background: rgba(255,255,255,.66); border: 1px solid rgba(88,115,155,.13); border-radius: 9px; cursor: pointer; font: 750 9px Inter,sans-serif; }
.notification-filter-tabs button.active { color: #fff; background: linear-gradient(135deg,#1769ff,#0ea5e9); border-color: transparent; box-shadow: 0 7px 15px rgba(23,105,255,.15); }
.notification-filter-tabs button span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; color: inherit; background: rgba(255,255,255,.18); border-radius: 999px; font-size: 8px; }
.notification-operation-list { display: grid; gap: 9px; padding: 14px; }
.notification-operation { --notification-tone:#64748b; --notification-soft:rgba(100,116,139,.09); display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 13px; min-width: 0; padding: 14px 15px; background: rgba(255,255,255,.70); border: 1px solid rgba(88,115,155,.10); border-radius: 14px; transition: transform .17s ease,border-color .17s ease,box-shadow .17s ease; }
.notification-operation:hover { transform: translateY(-1px); border-color: rgba(23,105,255,.17); box-shadow: 0 10px 24px rgba(31,65,120,.06); }
.notification-operation.unread { background: linear-gradient(105deg,rgba(239,246,255,.93),rgba(255,255,255,.82)); border-color: rgba(23,105,255,.18); }
.notification-operation.tone-success { --notification-tone:#059669; --notification-soft:rgba(16,185,129,.10); }
.notification-operation.tone-warning { --notification-tone:#d97706; --notification-soft:rgba(245,158,11,.11); }
.notification-operation.tone-error { --notification-tone:#dc2626; --notification-soft:rgba(239,68,68,.10); }
.notification-operation.tone-info { --notification-tone:#1769ff; --notification-soft:rgba(23,105,255,.09); }
.notification-operation-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--notification-tone); background: var(--notification-soft); border-radius: 12px; }
.notification-operation-copy { min-width: 0; }
.notification-operation-copy > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notification-operation-copy strong { color: #10213e; font-size: 11px; font-weight: 850; }
.notification-kind { padding: 3px 6px; color: #71829b; background: rgba(241,245,249,.82); border-radius: 999px; font-size: 7px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.notification-operation-copy p { margin: 5px 0; color: #52657f; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.notification-operation-copy time { color: #91a0b8; font-size: 8px; font-weight: 700; }
.notification-operation-actions button { min-height: 30px; padding: 0 9px; color: #1769ff; background: rgba(239,246,255,.82); border: 1px solid rgba(23,105,255,.13); border-radius: 8px; cursor: pointer; font: 750 8.5px Inter,sans-serif; }
.notification-read-state { color: #91a0b8; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.notification-operation-list > .ui-empty-state { min-height: 310px; }

@media (max-width: 820px) {
  .notification-center-hero { align-items: flex-start; flex-direction: column; min-height: 0; padding: 23px 18px; border-radius: 19px; }
  .notification-hero-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .notification-center-page { gap: 10px; }
  .notification-hero-actions .fly-btn { flex: 1; }
  .notification-unread-total { width: 100%; justify-content: center; }
  .notification-filter-tabs { padding: 11px; }
  .notification-filter-tabs button { flex: 1; justify-content: center; }
  .notification-operation-list { padding: 9px; }
  .notification-operation { grid-template-columns: 36px minmax(0,1fr); align-items: start; padding: 12px; }
  .notification-operation-icon { width: 36px; height: 36px; }
  .notification-operation-actions { grid-column: 2; }
  .notification-operation-actions button { width: 100%; }
}

/* ═══ PSP WORKSPACE ROLLOUT + NUMBER HEALTH · 2026-08-12 ═══ */
.psp-workspace-page {
  --workspace-accent: #1769ff;
  --workspace-soft: rgba(23,105,255,.09);
  display: grid;
  gap: 16px;
  min-width: 0;
  animation: workspacePageIn .42s cubic-bezier(.2,.8,.2,1) both;
}
.psp-workspace-page[data-section="sms-operations"],
.psp-workspace-page[data-section="operations"] { --workspace-accent:#0891b2; --workspace-soft:rgba(8,145,178,.09); }
.psp-workspace-page[data-section="provider-infrastructure"] { --workspace-accent:#7c3aed; --workspace-soft:rgba(124,58,237,.08); }
.psp-workspace-page[data-section="accounts"],
.psp-workspace-page[data-section="finance"] { --workspace-accent:#059669; --workspace-soft:rgba(5,150,105,.08); }
.psp-workspace-page[data-section="security-access"] { --workspace-accent:#dc2626; --workspace-soft:rgba(220,38,38,.07); }
.psp-workspace-page[data-section="communication"] { --workspace-accent:#d97706; --workspace-soft:rgba(217,119,6,.08); }

.workspace-page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 142px;
  padding: 25px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 10%,rgba(255,255,255,.93),transparent 24%),
    linear-gradient(125deg,rgba(239,246,255,.96),rgba(236,254,255,.88) 56%,rgba(245,243,255,.86));
  border: 1px solid rgba(255,255,255,.97);
  border-radius: 23px;
  box-shadow: var(--shadow-sm);
}
.workspace-page-hero-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--workspace-accent);
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 17px;
  box-shadow: 0 12px 28px rgba(31,65,120,.09);
}
.workspace-page-hero-icon svg { width: 24px; height: 24px; }
.workspace-page-hero-copy { position: relative; z-index: 2; min-width: 0; }
.workspace-page-hero-copy > span { color: var(--workspace-accent); font-size: 8px; font-weight: 850; letter-spacing: .105em; text-transform: uppercase; }
.workspace-page-hero-copy h1 { margin: 4px 0 7px; color: #10213e; font-size: clamp(25px,2.8vw,35px); line-height: 1.05; font-weight: 900; letter-spacing: -.042em; }
.workspace-page-hero-copy p { max-width: 720px; margin: 0; color: #5d6f8b; font-size: 10.5px; line-height: 1.65; }
.workspace-page-hero-meta { position: relative; z-index: 2; padding: 8px 11px; color: var(--workspace-accent); background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.92); border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.workspace-page-hero-orb { position: absolute; z-index: 0; display: block; border-radius: 50%; pointer-events: none; }
.workspace-page-hero-orb-one { width: 170px; height: 170px; right: 13%; top: -122px; background: rgba(56,189,248,.13); animation: pspAuroraFloat 9s ease-in-out infinite; }
.workspace-page-hero-orb-two { width: 130px; height: 130px; left: 40%; bottom: -104px; background: var(--workspace-soft); animation: pspAuroraFloat 11s ease-in-out -3s infinite reverse; }

.workspace-surface {
  min-width: 0;
  overflow: hidden;
  border-color: rgba(255,255,255,.96) !important;
  box-shadow: 0 12px 34px rgba(31,65,120,.065) !important;
  animation: workspaceSurfaceIn .38s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--surface-order,0) * 28ms);
  transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.workspace-surface > * { min-width:0; max-width:100%; }
.workspace-surface:hover { border-color: rgba(23,105,255,.13) !important; box-shadow: 0 17px 42px rgba(31,65,120,.085) !important; }
.workspace-surface > .card-header { min-height: 59px; padding-inline: 18px; }
.workspace-surface > .card-header .card-title { color: #17305a; font-size: 11px; font-weight: 850; letter-spacing: -.012em; }
.workspace-metric-grid { gap: 12px !important; }
.workspace-metric-grid > * { min-width: 0; }
.workspace-filter-surface { border-color: rgba(88,115,155,.10); }
.workspace-scroll-shell { display:block; width:100%; max-width:100%; min-width:0; overflow:hidden; }
.workspace-table-scroll { position:relative; display:block; direction:ltr; width:100%; max-width:100%; min-width:0; overflow-x:scroll!important; overflow-y:auto; overscroll-behavior-x:contain; touch-action:pan-x pan-y; outline:none; cursor:grab; scrollbar-width:thin; scrollbar-color:rgba(23,105,255,.34) rgba(226,232,240,.45); }
.workspace-table-scroll.is-dragging { cursor:grabbing; user-select:none; }
.workspace-table-scroll:focus-visible { box-shadow: inset 0 0 0 2px rgba(23,105,255,.30); }
.workspace-table-scroll > table { width:max-content; min-width:100%; max-width:none; }
.workspace-data-table { min-width:680px; }
.workspace-scroll-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; padding:6px 10px; color:#71829b; background:linear-gradient(90deg,rgba(239,246,255,.88),rgba(248,250,252,.84)); border-top:1px solid rgba(88,115,155,.08); border-bottom:1px solid rgba(88,115,155,.08); font-size:8px; font-weight:750; }
.workspace-scroll-controls[hidden] { display:none!important; }
.workspace-scroll-controls > div { display:flex; align-items:center; gap:5px; flex:0 0 auto; }
.workspace-scroll-controls button { display:inline-grid; place-items:center; width:30px; height:27px; color:#1769ff; background:#fff; border:1px solid rgba(23,105,255,.15); border-radius:8px; box-shadow:0 3px 9px rgba(31,65,120,.06); cursor:pointer; font:800 13px Inter,sans-serif; }
.workspace-scroll-controls button:disabled { color:#a8b4c6; background:rgba(248,250,252,.78); border-color:rgba(148,163,184,.12); box-shadow:none; cursor:not-allowed; }
.workspace-scroll-controls button:focus-visible { outline:3px solid rgba(23,105,255,.18); outline-offset:1px; }
.workspace-data-table thead th { color: #71829b; font-size: 8px; font-weight: 850; letter-spacing: .065em; text-transform: uppercase; }
.workspace-data-table tbody td { color: #52657f; }
.workspace-status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; font-size: 8px; font-weight: 850; white-space: nowrap; }
.workspace-status-pill.tone-info { color:#0f4fd6;background:rgba(23,105,255,.09); }
.workspace-status-pill.tone-success { color:#047857;background:rgba(16,185,129,.10); }
.workspace-status-pill.tone-warning { color:#a16207;background:rgba(245,158,11,.12); }
.workspace-status-pill.tone-danger { color:#b42318;background:rgba(239,68,68,.10); }
.workspace-status-pill.tone-neutral { color:#64748b;background:rgba(100,116,139,.10); }
.workspace-progress { display:grid; gap:5px; min-width:100px; }
.workspace-progress > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#71829b; font-size:8px; }
.workspace-progress > div:first-child strong { color:#31547d; }
.workspace-progress > div:last-child { height:5px; overflow:hidden; background:rgba(148,163,184,.17); border-radius:999px; }
.workspace-progress i { display:block; height:100%; border-radius:inherit; background:#1769ff; }
.workspace-progress i.tone-success { background:#10b981; }.workspace-progress i.tone-warning { background:#f59e0b; }.workspace-progress i.tone-danger { background:#ef4444; }.workspace-progress i.tone-neutral { background:#94a3b8; }
.workspace-error-state { min-height: 420px; display:grid; place-items:center; }

/* Shared responsive inventory layouts */
.provider-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:14px; width:100%; max-width:100%; min-width:0; padding:16px; }
.provider-inventory-card { position:relative; width:100%; max-width:100%; min-width:0; padding:16px; overflow:hidden; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; }
.provider-inventory-card > * { min-width:0; max-width:100%; }
.provider-metric-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:10px; text-align:center; }
.provider-metric-strip > div { min-width:0; overflow:hidden; }
.provider-metric-strip strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.provider-card-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.range-inventory-scroll { width:100%; max-width:100%; }
.range-inventory-table--manager { width:max(100%,1280px)!important; min-width:1280px; }
.range-inventory-table--client { width:max(100%,1080px)!important; min-width:1080px; }
.range-policy-cell { min-width:215px; max-width:250px!important; white-space:normal!important; }
.range-policy-summary { display:grid; gap:7px; min-width:195px; }
.range-policy-summary > div { display:grid; gap:5px; }
.range-policy-chip { display:flex; align-items:center; gap:7px; min-width:0; padding:6px 8px; background:rgba(248,250,252,.82); border:1px solid rgba(88,115,155,.10); border-radius:9px; }
.range-policy-chip > i { flex:0 0 7px; width:7px; height:7px; background:#1769ff; border-radius:50%; box-shadow:0 0 0 4px rgba(23,105,255,.08); }
.range-policy-chip.blocked > i { background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.08); }
.range-policy-chip > span { min-width:0; }.range-policy-chip strong,.range-policy-chip small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.range-policy-chip strong { color:#31547d; font-size:8.5px; }.range-policy-chip small { margin-top:2px; color:#8b99ae; font-size:7px; }
.range-policy-summary > button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:28px; padding:5px 8px; color:#1769ff; background:rgba(239,246,255,.82); border:1px solid rgba(23,105,255,.13); border-radius:8px; cursor:pointer; font:800 7.5px Inter,sans-serif; }.range-policy-summary > button svg { width:11px; height:11px; }
.range-policy-empty { display:inline-flex; padding:6px 9px; color:#71829b; background:rgba(100,116,139,.08); border-radius:8px; font-size:8px; font-weight:750; white-space:nowrap; }
.range-policy-modal-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:16px; }.range-policy-modal-summary > div { min-width:0; padding:13px; background:linear-gradient(145deg,#f8fbff,#eef6ff); border:1px solid rgba(88,115,155,.09); border-radius:13px; }.range-policy-modal-summary small,.range-policy-modal-summary span { display:block; color:#8291a8; font-size:8px; }.range-policy-modal-summary strong { display:block; margin:5px 0; overflow:hidden; color:#17305a; font-size:19px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.range-policy-modal-section { margin-top:14px; overflow:hidden; border:1px solid rgba(88,115,155,.10); border-radius:14px; }.range-policy-modal-section > header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 15px; background:rgba(239,246,255,.60); }.range-policy-modal-section > header span { color:#1769ff; font-size:7px; font-weight:900; letter-spacing:.08em; }.range-policy-modal-section > header h3 { margin:3px 0 0; color:#17305a; font-size:13px; }.range-policy-modal-section > header p { max-width:390px; margin:0; color:#71829b; font-size:8px; line-height:1.5; text-align:right; }
.range-policy-modal-list { display:grid; gap:8px; padding:10px; }.range-policy-modal-list article { padding:12px; background:#fff; border:1px solid rgba(88,115,155,.09); border-left:3px solid #1769ff; border-radius:10px; }.range-policy-modal-list article.blocked { border-left-color:#ef4444; }.range-policy-modal-list article > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; }.range-policy-modal-list article > div:first-child strong { color:#29496f; font-size:10px; }.range-policy-modal-list dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:10px 0 0; }.range-policy-modal-list dl > div { padding:8px; background:#f8fafc; border-radius:8px; }.range-policy-modal-list dt { color:#91a0b8; font-size:7px; font-weight:800; text-transform:uppercase; }.range-policy-modal-list dd { margin:4px 0 0; color:#52657f; font-size:8px; font-weight:750; }
.psp-workspace-page [style*="display:grid"][style*="minmax("] { width:100%; max-width:100%; min-width:0; }
.psp-workspace-page [style*="display:grid"][style*="minmax("] > * { min-width:0; max-width:100%; }

/* Number Health control room */
.number-health-page { --workspace-accent:#0891b2; --workspace-soft:rgba(8,145,178,.09); }
.number-health-loading { display:grid; gap:14px; }
.number-health-hero-skeleton { min-height:190px; border-radius:24px; }
.number-health-kpi-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:11px; }
.health-kpi-skeleton { min-height:118px; border-radius:18px; }
.number-health-hero {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) auto;
  align-items:end;
  gap:28px;
  min-height:216px;
  padding:32px 34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 12%,rgba(255,255,255,.94),transparent 30%),
    radial-gradient(circle at 84% 112%,rgba(16,185,129,.16),transparent 32%),
    linear-gradient(120deg,#eaf7ff 0%,#edf4ff 47%,#e7fbf6 108%);
  border:1px solid rgba(255,255,255,.97);
  border-radius:25px;
  box-shadow:0 22px 58px rgba(31,65,120,.10),inset 0 1px 0 rgba(255,255,255,.95);
  animation:pspHeroIn .58s cubic-bezier(.2,.8,.2,1) both;
}
.number-health-hero-copy,.number-health-hero-actions { position:relative; z-index:2; }
.health-eyebrow { display:inline-flex; align-items:center; gap:7px; margin-bottom:12px; color:#0e7490; font-size:8px; font-weight:850; letter-spacing:.105em; text-transform:uppercase; }
.health-eyebrow i { width:7px; height:7px; background:#10b981; border-radius:50%; box-shadow:0 0 0 0 rgba(16,185,129,.35); animation:pspSignal 2s ease-out infinite; }
.number-health-hero h1 { margin:0; color:#10213e; font-size:clamp(31px,3.5vw,46px); line-height:1; font-weight:900; letter-spacing:-.05em; }
.number-health-hero h1 span { color:#0891b2; }
.number-health-hero-copy > p { max-width:720px; margin:12px 0 17px; color:#52657f; font-size:11px; line-height:1.7; }
.health-hero-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.health-hero-meta span { display:inline-flex; align-items:center; gap:6px; min-height:29px; padding:6px 9px; color:#31547d; background:rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.86); border-radius:9px; font-size:8px; font-weight:750; }
.health-hero-meta svg { width:12px; height:12px; color:#0891b2; }
.number-health-hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:290px; }
.number-health-hero-actions .fly-btn { min-height:40px; justify-content:center; }
.number-health-hero-actions > small { grid-column:1/-1; color:#71829b; font-size:8px; font-weight:700; text-align:right; }
.health-hero-orb { position:absolute; z-index:0; display:block; border-radius:50%; pointer-events:none; }
.health-hero-orb-one { width:210px; height:210px; right:14%; top:-155px; background:rgba(56,189,248,.15); animation:pspAuroraFloat 9s ease-in-out infinite; }
.health-hero-orb-two { width:150px; height:150px; left:48%; bottom:-120px; background:rgba(16,185,129,.11); animation:pspAuroraFloat 11s ease-in-out -2s infinite reverse; }

.health-kpi {
  --health-tone:#1769ff;
  --health-soft:rgba(23,105,255,.09);
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  min-height:115px;
  padding:16px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(244,249,255,.78));
  border:1px solid rgba(255,255,255,.97);
  border-radius:18px;
  box-shadow:0 11px 29px rgba(31,65,120,.065);
  animation:workspaceSurfaceIn .45s cubic-bezier(.2,.8,.2,1) both;
  transition:transform .2s ease,box-shadow .2s ease;
}
.health-kpi:hover { transform:translateY(-3px); box-shadow:0 17px 37px rgba(31,65,120,.095); }
.health-kpi.tone-success { --health-tone:#059669; --health-soft:rgba(16,185,129,.10); }.health-kpi.tone-warning { --health-tone:#d97706; --health-soft:rgba(245,158,11,.11); }.health-kpi.tone-danger { --health-tone:#dc2626; --health-soft:rgba(239,68,68,.09); }.health-kpi.tone-neutral { --health-tone:#64748b; --health-soft:rgba(100,116,139,.09); }.health-kpi.tone-info { --health-tone:#1769ff; --health-soft:rgba(23,105,255,.09); }
.health-kpi > span { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; color:var(--health-tone); background:var(--health-soft); border-radius:12px; }
.health-kpi > span svg { width:17px; height:17px; }
.health-kpi > div { min-width:0; }
.health-kpi small { display:block; color:#71829b; font-size:7.5px; font-weight:850; letter-spacing:.075em; text-transform:uppercase; }
.health-kpi strong { display:block; margin:4px 0 2px; color:#17305a; font-size:24px; line-height:1; font-weight:900; letter-spacing:-.045em; }
.health-kpi p { margin:0; color:#91a0b8; font-size:8px; line-height:1.45; }

.number-health-filter-panel,.health-range-overview,.health-access-surface,.health-attention-surface {
  min-width:0;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(244,249,255,.79));
  border:1px solid rgba(255,255,255,.97);
  border-radius:20px;
  box-shadow:var(--shadow-sm);
}
.number-health-filter-panel > header,.health-range-overview > header,.health-surface-head { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:66px; padding:14px 18px; background:linear-gradient(105deg,rgba(239,246,255,.68),rgba(236,254,255,.43)); border-bottom:1px solid rgba(88,115,155,.09); }
.number-health-filter-panel > header > div:first-child span,.health-range-overview > header > div span,.health-surface-head > div > span,.health-maintenance-zone > div:first-child > span { display:block; color:#0891b2; font-size:7.5px; font-weight:850; letter-spacing:.085em; text-transform:uppercase; }
.number-health-filter-panel > header > div:first-child strong,.health-range-overview > header > div strong { display:block; margin-top:3px; color:#17305a; font-size:12px; font-weight:850; }
.health-period-tabs { display:flex; align-items:center; gap:4px; padding:4px; background:rgba(255,255,255,.64); border:1px solid rgba(88,115,155,.11); border-radius:10px; }
.health-period-tabs button { min-width:35px; height:27px; color:#71829b; background:transparent; border:0; border-radius:7px; cursor:pointer; font:800 8px Inter,sans-serif; }
.health-period-tabs button.active { color:#fff; background:linear-gradient(135deg,#1769ff,#0891b2); box-shadow:0 6px 13px rgba(23,105,255,.16); }
.number-health-filter-grid { display:grid; grid-template-columns:repeat(5,minmax(125px,1fr)) auto; align-items:end; gap:9px; padding:14px 18px 17px; }
.number-health-filter-grid label { display:grid; gap:5px; min-width:0; }
.number-health-filter-grid label > span { color:#71829b; font-size:7.5px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.number-health-filter-grid .filter-select { width:100%; min-width:0; min-height:36px; padding:7px 27px 7px 9px; border-radius:10px; font-size:9px; }
.health-filter-reset { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 11px; color:#1769ff; background:rgba(239,246,255,.78); border:1px solid rgba(23,105,255,.14); border-radius:10px; cursor:pointer; font:800 8.5px Inter,sans-serif; white-space:nowrap; }
.health-filter-reset svg { width:13px; height:13px; }.health-filter-reset:disabled { color:#91a0b8; cursor:not-allowed; opacity:.55; }

.health-range-overview > header > p { max-width:520px; margin:0; color:#71829b; font-size:8.5px; line-height:1.5; text-align:right; }
.health-range-policy-list { display:grid; gap:9px; padding:12px; }
.health-range-policy-list > article { display:grid; grid-template-columns:minmax(150px,.75fr) repeat(3,minmax(160px,1fr)); align-items:stretch; gap:8px; padding:9px; background:rgba(255,255,255,.60); border:1px solid rgba(88,115,155,.09); border-radius:14px; }
.health-range-policy-list > article > div:first-child { display:flex; justify-content:center; flex-direction:column; min-width:0; padding:8px 10px; }
.health-range-policy-list > article > div:first-child > strong { overflow:hidden; color:#17305a; font-size:10.5px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.health-range-policy-list > article > div:first-child > small { margin-top:5px; color:#91a0b8; font-size:7.5px; }
.health-policy-tile { min-width:0; padding:10px 11px; background:linear-gradient(145deg,rgba(248,251,255,.92),rgba(239,246,255,.59)); border:1px solid rgba(88,115,155,.085); border-radius:11px; }
.health-policy-tile-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.health-policy-tile-head > span { overflow:hidden; color:#71829b; font-size:7px; font-weight:850; letter-spacing:.045em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.health-policy-tile > strong { display:block; margin:8px 0 4px; overflow:hidden; color:#31547d; font-size:10.5px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.health-policy-tile > small { display:block; margin-top:6px; color:#91a0b8; font-size:6.8px; line-height:1.4; }

.health-surface-head > div { min-width:0; }
.health-surface-head h2 { margin:3px 0 4px; color:#17305a; font-size:16px; font-weight:900; letter-spacing:-.025em; }
.health-surface-head p { margin:0; color:#71829b; font-size:8.5px; line-height:1.5; }
.health-result-count { flex:0 0 auto; min-height:29px; padding:7px 10px; color:#0f4fd6; background:rgba(23,105,255,.08); border:1px solid rgba(23,105,255,.10); border-radius:999px; font-size:8px; font-weight:850; white-space:nowrap; }
.health-result-count.tone-danger { color:#b42318; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.10); }
.health-access-table { min-width:1050px; }
.health-access-table th:last-child,.health-access-table td:last-child { width:78px; text-align:right; }
.health-access-row td { padding:11px 12px; max-width:none; vertical-align:middle; }
.health-access-row td > code,.health-access-row td > strong { display:block; color:#17305a; font-size:9px; }
.health-access-row td > code { color:#0f4fd6; }
.health-access-row td > small { display:block; max-width:155px; margin-top:4px; overflow:hidden; color:#91a0b8; font-size:7.3px; text-overflow:ellipsis; white-space:nowrap; }
.health-status-pill { display:inline-flex; align-items:center; min-height:22px; padding:4px 7px; border-radius:999px; font-size:7px; font-weight:850; white-space:nowrap; }
.health-status-pill::before { content:''; width:5px; height:5px; margin-right:5px; background:currentColor; border-radius:50%; opacity:.72; }
.health-status-success { color:#047857; background:rgba(16,185,129,.10); }.health-status-warning { color:#a16207; background:rgba(245,158,11,.12); }.health-status-danger { color:#b42318; background:rgba(239,68,68,.10); }.health-status-neutral { color:#64748b; background:rgba(100,116,139,.10); }.health-status-info { color:#0f4fd6; background:rgba(23,105,255,.09); }
.health-policy-state { min-width:110px; }
.health-progress { display:grid; gap:5px; min-width:118px; }
.health-progress.compact { min-width:105px; }
.health-progress-copy { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.health-progress-copy strong { color:#31547d; font-size:7.8px; font-weight:850; white-space:nowrap; }
.health-progress-copy span { color:#91a0b8; font-size:6.8px; white-space:nowrap; }
.health-progress-track { height:5px; overflow:hidden; background:rgba(148,163,184,.17); border-radius:999px; }
.health-progress-track i { display:block; height:100%; min-width:2px; background:#1769ff; border-radius:inherit; transition:width .35s ease; }
.health-progress-track i.tone-success { background:linear-gradient(90deg,#10b981,#14b8a6); }.health-progress-track i.tone-warning { background:linear-gradient(90deg,#f59e0b,#f97316); }.health-progress-track i.tone-danger { background:linear-gradient(90deg,#f97316,#ef4444); }.health-progress-track i.tone-neutral { background:#94a3b8; }
.health-detail-toggle,.health-mobile-toggle { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:29px; padding:0 8px; color:#1769ff; background:rgba(239,246,255,.80); border:1px solid rgba(23,105,255,.12); border-radius:8px; cursor:pointer; font:750 7.5px Inter,sans-serif; }
.health-detail-toggle svg,.health-mobile-toggle svg { width:12px; height:12px; transition:transform .18s ease; }.health-detail-toggle[aria-expanded="true"] svg,.health-mobile-toggle[aria-expanded="true"] svg { transform:rotate(90deg); }
.health-details-row { background:rgba(247,251,255,.86)!important; }.health-details-row[hidden],.health-mobile-details[hidden] { display:none!important; }.health-details-row td { padding:0!important; max-width:none!important; }
.health-detail-policy-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:13px 15px 8px; border-top:1px dashed rgba(88,115,155,.14); }
.health-detail-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:0 15px 14px; }
.health-detail-meta > span { min-width:0; padding:9px 10px; background:rgba(255,255,255,.68); border:1px solid rgba(88,115,155,.08); border-radius:9px; }
.health-detail-meta small { display:block; color:#91a0b8; font-size:6.8px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }.health-detail-meta strong { display:block; margin-top:4px; overflow:hidden; color:#52657f; font-size:7.8px; text-overflow:ellipsis; white-space:nowrap; }
.health-mobile-results { display:none; }
.health-empty { padding:12px; }.health-empty .ui-empty-state { min-height:260px; }
.health-attention-table .fly-table { min-width:720px; }
.health-maintenance-zone { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; background:linear-gradient(120deg,rgba(255,247,237,.88),rgba(254,242,242,.72)); border:1px solid rgba(249,115,22,.13); border-radius:18px; box-shadow:0 10px 28px rgba(154,52,18,.045); }
.health-maintenance-zone h2 { margin:3px 0 5px; color:#7c2d12; font-size:15px; font-weight:900; }.health-maintenance-zone p { max-width:720px; margin:0; color:#9a6046; font-size:8.5px; line-height:1.55; }.health-maintenance-zone > div:last-child { display:flex; align-items:center; gap:8px; flex:0 0 auto; }.health-danger-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:8px 13px; color:#fff; background:linear-gradient(135deg,#ef4444,#dc2626); border:0; border-radius:10px; box-shadow:0 8px 18px rgba(220,38,38,.17); cursor:pointer; font:800 8.5px Inter,sans-serif; }.health-danger-button svg { width:14px; height:14px; }

@keyframes workspacePageIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes workspaceSurfaceIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 1250px) {
  .number-health-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .number-health-filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .health-range-policy-list > article { grid-template-columns:minmax(140px,.7fr) repeat(3,minmax(145px,1fr)); }
}
@media (max-width: 980px) {
  .number-health-hero { grid-template-columns:1fr; min-height:0; padding:27px; }
  .number-health-hero-actions { grid-template-columns:auto auto; min-width:0; justify-content:start; }
  .number-health-hero-actions > small { text-align:left; }
  .health-range-policy-list > article { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .health-range-policy-list > article > div:first-child { grid-column:1/-1; }
  .health-desktop-results { display:none; }
  .health-mobile-results { display:grid; gap:10px; padding:11px; }
  .health-mobile-card { min-width:0; padding:14px; background:rgba(255,255,255,.76); border:1px solid rgba(88,115,155,.10); border-radius:14px; box-shadow:0 8px 20px rgba(31,65,120,.05); }
  .health-mobile-card > header,.health-mobile-app { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .health-mobile-card > header > div { min-width:0; }.health-mobile-card > header code { display:block; overflow:hidden; color:#0f4fd6; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.health-mobile-card > header small { display:block; margin-top:4px; color:#91a0b8; font-size:7px; }
  .health-mobile-app { margin:12px 0; padding:10px; background:rgba(239,246,255,.60); border-radius:10px; }.health-mobile-app > strong { color:#17305a; font-size:10px; }
  .health-mobile-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.health-mobile-metrics > span { min-width:0; padding:9px; background:rgba(248,251,255,.80); border:1px solid rgba(88,115,155,.08); border-radius:9px; }.health-mobile-metrics small { display:block; color:#91a0b8; font-size:6.5px; font-weight:850; text-transform:uppercase; }.health-mobile-metrics strong { display:block; margin-top:4px; overflow:hidden; color:#31547d; font-size:8.5px; text-overflow:ellipsis; white-space:nowrap; }
  .health-mobile-toggle { width:100%; margin-top:10px; }
  .health-mobile-details { margin-top:10px; padding-top:10px; border-top:1px dashed rgba(88,115,155,.13); }.health-mobile-details .health-detail-policy-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 0 8px; border:0; }.health-mobile-details .health-detail-meta { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; }
}
@media (max-width: 760px) {
  .psp-workspace-page [style*="grid-template-columns:repeat(auto-fill,minmax("],
  .psp-workspace-page [style*="grid-template-columns:repeat(auto-fit,minmax("] { grid-template-columns:minmax(0,1fr)!important; }
  .provider-card-grid { grid-template-columns:minmax(0,1fr); padding:10px; }
  .provider-inventory-card { padding:13px; }
  .workspace-scroll-controls { position:sticky; left:0; }
  .workspace-page-hero { grid-template-columns:44px minmax(0,1fr); min-height:0; padding:21px 18px; border-radius:19px; }.workspace-page-hero-icon { width:44px; height:44px; border-radius:14px; }.workspace-page-hero-meta { grid-column:2; width:max-content; }
  .number-health-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .number-health-filter-panel > header,.health-range-overview > header,.health-surface-head { align-items:flex-start; flex-direction:column; }
  .health-period-tabs { width:100%; }.health-period-tabs button { flex:1; }
  .number-health-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .health-range-overview > header > p { text-align:left; }
  .health-range-policy-list > article { grid-template-columns:1fr; }.health-range-policy-list > article > div:first-child { grid-column:auto; }
  .health-maintenance-zone { align-items:flex-start; flex-direction:column; }.health-maintenance-zone > div:last-child { width:100%; }.health-maintenance-zone > div:last-child > * { flex:1; }
}
@media (max-width: 520px) {
  .psp-workspace-page { gap:10px; }
  .workspace-page-hero { grid-template-columns:1fr; padding:19px 16px; }.workspace-page-hero-icon { width:39px; height:39px; }.workspace-page-hero-meta { grid-column:auto; }
  .number-health-hero { padding:23px 18px; border-radius:20px; }.number-health-hero h1 { font-size:31px; }.number-health-hero-actions { grid-template-columns:1fr; width:100%; }.number-health-hero-actions > small { grid-column:auto; }
  .number-health-kpi-grid { gap:8px; }.health-kpi { min-height:104px; padding:13px; }.health-kpi > span { flex-basis:34px; width:34px; height:34px; }.health-kpi strong { font-size:21px; }.health-kpi p { display:none; }
  .number-health-filter-grid { grid-template-columns:1fr; padding:12px; }.health-filter-reset { width:100%; }
  .health-surface-head { padding:15px; }.health-result-count { align-self:flex-start; }
  .health-mobile-results { padding:8px; }.health-mobile-card { padding:12px; }.health-mobile-metrics { grid-template-columns:1fr 1fr; }.health-mobile-metrics > span:last-child { grid-column:1/-1; }
  .health-mobile-details .health-detail-policy-grid,.health-mobile-details .health-detail-meta { grid-template-columns:1fr; }
  .health-maintenance-zone { padding:17px 15px; }.health-maintenance-zone > div:last-child { align-items:stretch; flex-direction:column; }.health-attention-table { display:none; }.health-attention-surface .health-surface-head { border-bottom:0; }
}
@media (prefers-reduced-motion: reduce) {
  .psp-workspace-page,.workspace-surface,.health-kpi,.number-health-hero,.workspace-page-hero-orb,.health-hero-orb { animation:none!important; }
}

/* Live traffic control room */
.traffic-live-hero,.user-analytics-hero,.leaderboard-hero { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:28px 30px; overflow:hidden; color:#15325d; background:radial-gradient(circle at 88% -20%,rgba(56,189,248,.23),transparent 35%),radial-gradient(circle at 10% 110%,rgba(99,102,241,.14),transparent 32%),linear-gradient(125deg,rgba(255,255,255,.96),rgba(232,244,255,.91)); border:1px solid rgba(255,255,255,.96); border-radius:23px; box-shadow:0 18px 46px rgba(31,65,120,.10); }
.traffic-live-hero h1,.user-analytics-hero h1,.leaderboard-hero h1 { margin:6px 0 7px; font-size:clamp(27px,3vw,38px); font-weight:900; letter-spacing:-.045em; }
.traffic-live-hero p,.user-analytics-hero p,.leaderboard-hero p { max-width:690px; margin:0; color:#60728e; font-size:11px; line-height:1.65; }
.traffic-live-kicker,.user-analytics-hero > div > span,.leaderboard-hero > div > span { color:#1769ff; font-size:8px; font-weight:900; letter-spacing:.12em; }
.traffic-live-kicker { display:flex; align-items:center; gap:7px; }.traffic-live-kicker i { width:8px; height:8px; background:#10b981; border-radius:50%; box-shadow:0 0 0 6px rgba(16,185,129,.11); animation:trafficPulse 1.7s ease-out infinite; }
.traffic-live-actions,.leaderboard-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.traffic-live-actions .filter-select { min-width:150px; }
.traffic-live-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.user-analytics-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.traffic-live-metrics article { display:flex; align-items:center; gap:12px; min-width:0; padding:16px; background:rgba(255,255,255,.89); border:1px solid rgba(255,255,255,.96); border-radius:17px; box-shadow:0 10px 27px rgba(31,65,120,.07); }
.traffic-live-metrics article > span { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; color:#1769ff; background:rgba(23,105,255,.09); border-radius:13px; }.traffic-live-metrics article > span svg { width:19px;height:19px; }
.traffic-live-metrics article.tone-violet > span { color:#7c3aed;background:rgba(124,58,237,.09); }.traffic-live-metrics article.tone-cyan > span { color:#0891b2;background:rgba(8,145,178,.09); }.traffic-live-metrics article.tone-green > span { color:#059669;background:rgba(5,150,105,.09); }
.traffic-live-metrics small { display:block; color:#8291a8; font-size:7px; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }.traffic-live-metrics strong { display:block; margin:2px 0; overflow:hidden; color:#17305a; font-size:17px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.traffic-live-metrics p { margin:0; overflow:hidden; color:#8291a8; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.traffic-live-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,34%); gap:14px; min-width:0; }.traffic-live-layout > * { min-width:0; }
.traffic-stream-card .card-header small,.traffic-users-card .card-header small,.user-performance-card .card-header small,.leaderboard-table-card .card-header small { display:block; margin-top:4px; color:#8b99ae; font-size:8px; }.traffic-live-count { padding:6px 9px; color:#1769ff; background:rgba(23,105,255,.08); border-radius:999px; font-size:8px; font-weight:850; }
.traffic-live-table { min-width:940px!important; }.traffic-live-table td { vertical-align:middle; }.traffic-live-table td strong,.traffic-live-table td small { display:block; }.traffic-live-table td small { margin-top:3px;color:#8b99ae;font-size:7px; }.traffic-live-table time { white-space:nowrap;font-size:8px; }.traffic-otp { color:#5b21b6;letter-spacing:.08em; }.traffic-message { display:block; max-width:240px; overflow:hidden; color:#61728d; text-overflow:ellipsis; white-space:nowrap; }
.traffic-account-list { display:grid; gap:1px; padding:8px; }.traffic-account-list article { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px; padding:11px 8px; border-bottom:1px solid rgba(88,115,155,.08); }.traffic-account-list article > span:last-child { grid-column:2/-1; color:#60728e; font-size:7px; }.traffic-account-list article > div { min-width:0; }.traffic-account-list strong,.traffic-account-list small { display:block; }.traffic-account-list article > div:first-of-type strong { overflow:hidden; color:#29496f; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.traffic-account-list small { margin-top:3px;color:#92a0b4;font-size:7px; }.traffic-account-list article > div:nth-of-type(2) { text-align:right; }.traffic-rank { display:grid;place-items:center;width:26px;height:26px;color:#1769ff;background:rgba(23,105,255,.08);border-radius:9px;font-size:8px;font-weight:900; }
.traffic-mobile-results { display:none; }

/* Staff user analytics and leaderboard */
.user-analytics-metrics { gap:11px; }.user-analytics-metrics article { min-height:112px; padding:18px; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,246,255,.84)); border:1px solid rgba(255,255,255,.96); border-radius:17px; box-shadow:0 10px 28px rgba(31,65,120,.07); }.user-analytics-metrics article.account-total { background:radial-gradient(circle at 90% 0,rgba(56,189,248,.20),transparent 43%),linear-gradient(145deg,#eef6ff,#e9f3ff); border-color:rgba(23,105,255,.12); }.user-analytics-metrics small,.user-analytics-metrics span { display:block;color:#8291a8;font-size:8px; }.user-analytics-metrics strong { display:block;margin:6px 0;color:#17305a;font-size:30px;font-weight:900;letter-spacing:-.04em; }.user-analytics-metrics article.account-total strong { color:#1769ff; font-size:36px; }
.performance-hero-actions{display:flex;gap:8px;flex-wrap:wrap}.performance-date-bar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:13px 16px;background:linear-gradient(120deg,rgba(23,105,255,.05),rgba(255,255,255,.9));border-bottom:1px solid rgba(88,115,155,.1)}.performance-date-bar .filter-field{display:grid;gap:4px}.performance-date-bar label{color:#71829b;font-size:8px;font-weight:800;text-transform:uppercase}.performance-date-bar>span{margin-left:auto;color:#71829b;font-size:9px;font-weight:700}.user-analytics-metrics article.selected-period{background:radial-gradient(circle at 90% 0,rgba(16,185,129,.18),transparent 43%),linear-gradient(145deg,#f0fdf8,#eefbf6)}.user-analytics-metrics article.selected-period strong{color:#07845f}
.performance-account-count { display:flex; align-items:center; gap:8px; min-height:42px; padding:6px 11px; color:#1769ff; background:linear-gradient(145deg,#eff6ff,#fff); border:1px solid rgba(23,105,255,.14); border-radius:12px; box-shadow:0 5px 14px rgba(23,105,255,.07); }.performance-account-count strong { font-size:19px; font-weight:900; line-height:1; }.performance-account-count small { color:#71829b; font-size:8px; font-weight:800; white-space:nowrap; }
.user-performance-table { min-width:1260px!important; }.user-performance-table td > strong,.user-performance-table td > small { display:block; }.user-performance-table td > small { margin-top:4px;color:#8b99ae;font-size:7px; }.performance-level { display:inline-flex;align-items:center;gap:5px;padding:5px 8px;color:var(--level-color);background:color-mix(in srgb,var(--level-color) 9%,white);border-radius:999px;font-size:8px;font-weight:850;white-space:nowrap; }.performance-rate { width:76px;height:5px;overflow:hidden;background:#e7edf5;border-radius:999px; }.performance-rate span { display:block;height:100%;background:linear-gradient(90deg,#1769ff,#10b981);border-radius:inherit; }.performance-money { color:#067a5b;font-size:8px;font-weight:800;white-space:nowrap; }
.leaderboard-controls > div { display:flex;padding:3px;background:rgba(255,255,255,.68);border:1px solid rgba(88,115,155,.10);border-radius:10px; }.leaderboard-controls > div button { padding:7px 10px;color:#71829b;background:transparent;border:0;border-radius:7px;cursor:pointer;font-size:8px;font-weight:800;text-transform:capitalize; }.leaderboard-controls > div button.active { color:#fff;background:linear-gradient(135deg,#1769ff,#5b5ce2);box-shadow:0 5px 13px rgba(23,105,255,.19); }
.leaderboard-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:end; }.leaderboard-podium > article { position:relative; min-width:0; padding:22px 17px 17px; text-align:center; background:rgba(255,255,255,.91); border:1px solid rgba(255,255,255,.98); border-radius:20px; box-shadow:0 14px 34px rgba(31,65,120,.08); }.leaderboard-podium > article.place-1 { padding-top:30px;background:radial-gradient(circle at 50% 0,rgba(250,204,21,.18),transparent 45%),rgba(255,255,255,.95); }.leader-medal { position:absolute;top:10px;right:12px;font-size:18px; }.leader-avatar { display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;color:#fff;background:linear-gradient(145deg,#1769ff,#7c3aed);border:4px solid rgba(255,255,255,.94);border-radius:17px;box-shadow:0 8px 18px rgba(23,105,255,.18);font-size:14px;font-weight:900; }.leaderboard-podium strong,.leaderboard-podium small,.leaderboard-podium b,.leaderboard-podium p { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.leaderboard-podium strong { color:#17305a;font-size:11px; }.leaderboard-podium small { margin:3px 0 11px;color:#8b99ae;font-size:7px; }.leaderboard-podium b { color:#1769ff;font-size:19px; }.leaderboard-podium p { margin:5px 0 0;color:#8291a8;font-size:7px; }.leader-rank-number { display:grid;place-items:center;width:28px;height:28px;color:#1769ff;background:rgba(23,105,255,.08);border-radius:9px;font-size:9px;font-weight:900; }
@keyframes trafficPulse { 0% { box-shadow:0 0 0 0 rgba(16,185,129,.28); } 75%,100% { box-shadow:0 0 0 9px rgba(16,185,129,0); } }

@media (max-width: 980px) {
  .traffic-live-metrics,.user-analytics-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .traffic-live-layout { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 720px) {
  .traffic-live-hero,.user-analytics-hero,.leaderboard-hero { align-items:flex-start;flex-direction:column;padding:22px 18px; }
  .traffic-live-actions,.leaderboard-controls { width:100%; }.traffic-live-actions > * { flex:1; }.leaderboard-controls > div { width:100%; }.leaderboard-controls > div button { flex:1; }
  .traffic-desktop-results { display:none; }.traffic-mobile-results { display:grid;gap:8px;padding:8px; }.traffic-mobile-card { padding:12px;background:rgba(248,251,255,.91);border:1px solid rgba(88,115,155,.09);border-radius:13px; }.traffic-mobile-card header,.traffic-mobile-card > div,.traffic-mobile-card footer { display:flex;align-items:center;justify-content:space-between;gap:10px; }.traffic-mobile-card time,.traffic-mobile-card footer { color:#8190a7;font-size:7px; }.traffic-mobile-card > div { margin:10px 0; }.traffic-mobile-card > div strong { color:#29496f;font-size:9px; }.traffic-mobile-card code { font-size:8px; }.traffic-mobile-card p { margin:0 0 10px;color:#60728e;font-size:8px;line-height:1.55; }.traffic-mobile-card footer { padding-top:8px;border-top:1px dashed rgba(88,115,155,.11); }.traffic-mobile-card footer strong { color:#067a5b; }
  .leaderboard-podium { grid-template-columns:1fr; }.leaderboard-podium > article.place-1 { order:-1; }
  .performance-hero-actions,.performance-date-bar{width:100%}.performance-hero-actions>*{flex:1}.performance-date-bar .filter-field{flex:1;min-width:130px}.performance-date-bar>span{flex-basis:100%;margin-left:0}
  .range-policy-modal-summary { grid-template-columns:1fr; }.range-policy-modal-section > header { align-items:flex-start; flex-direction:column; }.range-policy-modal-section > header p { text-align:left; }.range-policy-modal-list article dl { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .traffic-live-metrics,.user-analytics-metrics { grid-template-columns:1fr; }
}
/* Test panel and My Numbers responsive workspaces */
.test-panel-workspace { display:flex; flex-direction:column; gap:20px; min-width:0; }
.number-horizontal-scroll {
  width:100%;
  max-width:100%;
  overflow-x:scroll !important;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
  scrollbar-width:thin;
  scrollbar-color:rgba(115,93,255,.55) rgba(115,93,255,.09);
}
.number-horizontal-scroll::-webkit-scrollbar { height:8px; }
.number-horizontal-scroll::-webkit-scrollbar-track { background:rgba(115,93,255,.08); border-radius:999px; }
.number-horizontal-scroll::-webkit-scrollbar-thumb { background:linear-gradient(90deg,#755dff,#39a7ff); border-radius:999px; }
.number-horizontal-scroll .number-responsive-table { min-width:780px !important; width:100%; }
.number-horizontal-scroll .my-numbers-table { min-width:900px !important; }
.number-responsive-table th,
.number-responsive-table td { white-space:nowrap; }
.number-row-actions { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.number-scroll-hint { display:none; }
@media (max-width: 760px) {
  .test-panel-workspace .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .test-panel-workspace .stat-card { min-width:0; padding:14px; }
  .test-panel-workspace .stat-card-value { font-size:22px; }
  .test-panel-workspace .card-header,
  .my-numbers-workspace .card-header { align-items:stretch; flex-direction:column; gap:12px; }
  .my-numbers-workspace .card-header-actions { display:grid !important; grid-template-columns:1fr 1fr; width:100%; }
  .my-numbers-workspace .card-header-actions .search-input { width:100% !important; grid-column:1 / -1; }
  .my-numbers-workspace .card-header-actions .filter-select,
  .my-numbers-workspace .card-header-actions .fly-btn { width:100%; min-width:0; }
  #bulk-action-bar { position:sticky; top:8px; z-index:8; margin:0 10px; border:1px solid var(--border); border-radius:12px; box-shadow:0 9px 24px rgba(52,91,168,.13); }
  .test-panel-workspace .card-header > div:last-child { width:100%; }
  .test-panel-workspace .card-header .search-input { width:100% !important; }
  .test-responsive-table thead { display:none; }
  .test-responsive-table,
  .test-responsive-table tbody,
  .test-responsive-table tr,
  .test-responsive-table td { display:block; width:100%; }
  .test-responsive-table { min-width:0 !important; }
  .test-responsive-table tbody { display:grid; gap:11px; padding:12px; }
  .test-responsive-table tr { overflow:hidden; padding:8px 12px; background:rgba(255,255,255,.82); border:1px solid rgba(115,93,255,.12); border-radius:13px; box-shadow:0 7px 18px rgba(52,91,168,.06); }
  .test-responsive-table td { display:grid; grid-template-columns:90px minmax(0,1fr); align-items:start; gap:10px; max-width:none !important; padding:7px 0 !important; border:0 !important; text-align:right; white-space:normal !important; }
  .test-responsive-table td::before { content:attr(data-label); color:var(--text-secondary); font-size:10px; font-weight:750; letter-spacing:.04em; text-align:left; text-transform:uppercase; }
  .test-responsive-table td > * { justify-self:end; max-width:100%; }
  .number-horizontal-scroll { max-height:none; padding-bottom:3px; }
  .number-scroll-hint { display:flex; align-items:center; justify-content:center; padding:8px 12px; color:var(--text-secondary); font-size:11px; font-weight:650; letter-spacing:.01em; }
  .test-responsive-table .empty-row td { display:block; text-align:center; }
  .test-responsive-table .empty-row td::before { content:none; }
}

@media (max-width: 420px) {
  .test-panel-workspace .stats-grid { grid-template-columns:1fr 1fr; }
  .my-numbers-workspace .card-header-actions { grid-template-columns:1fr; }
  .my-numbers-workspace .card-header-actions .search-input { grid-column:auto; }
}

/* Operational/all range inventory switch. */
.range-visibility-toggle { display:flex;align-items:center;gap:8px;min-height:38px;padding:5px 9px 5px 7px;color:var(--text-secondary);background:rgba(255,255,255,.72);border:1px solid var(--border);border-radius:11px;cursor:pointer;user-select:none; }
.range-visibility-toggle input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.range-visibility-track { position:relative;width:34px;height:20px;flex:0 0 34px;background:#dbe4f0;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(71,85,105,.08);transition:background .18s ease,box-shadow .18s ease; }
.range-visibility-track i { position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(30,41,59,.20);transition:transform .18s ease; }
.range-visibility-toggle input:checked + .range-visibility-track { background:linear-gradient(135deg,var(--primary),#14b8a6);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); }
.range-visibility-toggle input:checked + .range-visibility-track i { transform:translateX(14px); }
.range-visibility-toggle input:focus-visible + .range-visibility-track { outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent);outline-offset:2px; }
.range-visibility-copy { display:grid;gap:1px;line-height:1.1; }
.range-visibility-copy strong { color:var(--text-primary);font-size:10px;font-weight:780;white-space:nowrap; }
.range-visibility-copy small { color:var(--text-muted);font-size:7.5px;white-space:nowrap; }
@media (max-width:620px) { .range-visibility-toggle { width:100%; }.range-visibility-copy { text-align:left; }.range-visibility-toggle + .input-wrapper { width:100%!important; } }

/* Responsive containment, Search Access and PSP card polish · 2026-09-10 */
html,body,#app,.app-shell,.app-layout,.main-content,.page-content{max-width:100%;min-width:0}
html,body{overflow-x:hidden;overflow-x:clip}
.page-content>*,.psp-workspace-page,.psp-workspace-page>*,.card,.card-body,.card-header,.workspace-surface{min-width:0;max-width:100%}
.psp-workspace-page pre,.psp-workspace-page code{max-width:100%}.psp-workspace-page pre{overflow:auto;overflow-wrap:anywhere}
.access-search-page{display:grid;gap:16px;width:100%;min-width:0;max-width:100%}
.access-search-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:16px;min-width:0;overflow:hidden;padding:24px;color:#17305a;background:radial-gradient(circle at 88% 8%,rgba(56,189,248,.22),transparent 31%),linear-gradient(130deg,#f6f9ff,#edf5ff 55%,#effcff);border:1px solid rgba(23,105,255,.14);border-radius:22px;box-shadow:0 16px 38px rgba(31,65,120,.08)}
.access-search-hero::after{position:absolute;z-index:-1;width:170px;height:170px;right:-78px;bottom:-116px;content:"";background:rgba(14,165,233,.12);border-radius:50%}
.access-search-hero-icon{display:grid;width:54px;height:54px;place-items:center;color:#fff;background:linear-gradient(145deg,#1769ff,#0ea5e9);border-radius:16px;box-shadow:0 12px 26px rgba(23,105,255,.22)}
.access-search-hero-icon svg{width:23px;height:23px}.access-search-hero span{color:#1769ff;font-size:9px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.access-search-hero h1{margin:3px 0 6px;font-size:clamp(25px,3vw,34px);line-height:1.08;letter-spacing:-.04em}.access-search-hero p{max-width:720px;margin:0;color:#60728e;font-size:11px;line-height:1.65}
.access-search-panel{overflow:hidden}.access-search-body{display:grid;gap:16px;padding:18px}.access-search-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;min-width:0}.access-search-input-row .fly-input{width:100%;min-width:0}
.access-search-results{display:grid;gap:14px;min-width:0}.access-result-card{margin:0;min-width:0}.access-results-table{min-width:620px}.access-results-table td:nth-child(3){white-space:normal}
.access-service-cloud{display:flex;flex-wrap:wrap;gap:5px;min-width:0}.access-service-cloud .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis}.access-results-mobile{display:none}
.access-mobile-card{min-width:0;padding:14px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,247,255,.9));border:1px solid rgba(23,105,255,.12);border-radius:14px;box-shadow:0 8px 20px rgba(31,65,120,.055)}
.access-mobile-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}.access-mobile-card header>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
.access-mobile-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:11px 0}.access-mobile-metrics>span{min-width:0;padding:9px;background:rgba(255,255,255,.72);border:1px solid rgba(23,105,255,.08);border-radius:9px}
.access-mobile-metrics small,.access-mobile-metrics strong{display:block;min-width:0;overflow-wrap:anywhere}.access-mobile-metrics small{color:var(--text-muted);font-size:8px;text-transform:uppercase}.access-mobile-metrics strong{margin-top:3px;color:var(--text-primary);font-size:11px}
.dev-doc-layout,.dev-doc-launch-grid,.dev-reference-grid,.dev-error-grid,.dev-endpoint-grid,.dev-guide-card,.dev-api-reference,.dev-token-workbench{min-width:0;max-width:100%}
.dev-guide-card .card-body,.dev-api-reference .card-body{min-width:0;overflow:hidden}.dev-code-block,.client-payload{display:block;width:100%;max-width:100%;overflow:auto;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.dev-reference-grid code,.dev-endpoint-grid code,.dev-doc-launch code,.dev-callout code{max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal}.dev-api-reference .table-wrapper{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.psp-workspace-page .workspace-surface{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(246,250,255,.88));border-color:rgba(102,126,174,.13);box-shadow:0 10px 28px rgba(31,65,120,.065);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
@media(hover:hover){.psp-workspace-page .workspace-surface:hover{transform:translateY(-2px);border-color:rgba(23,105,255,.20);box-shadow:0 16px 34px rgba(31,65,120,.10)}}
@media(max-width:720px){.access-search-hero{grid-template-columns:44px minmax(0,1fr);padding:20px 17px;border-radius:18px}.access-search-hero-icon{width:44px;height:44px;border-radius:13px}.access-search-input-row{grid-template-columns:minmax(0,1fr)}.access-search-input-row .fly-btn{width:100%}.access-search-body{padding:12px}.access-results-desktop{display:none!important}.access-results-mobile{display:grid;gap:9px;padding:10px}.access-result-card .card-header{align-items:flex-start}.dev-docs-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;width:100%}.dev-parameter-table{min-width:0!important}.dev-parameter-table thead{display:none}.dev-parameter-table,.dev-parameter-table tbody,.dev-parameter-table tr,.dev-parameter-table td{display:block;width:100%}.dev-parameter-table tbody{display:grid;gap:9px;padding:10px}.dev-parameter-table tr{padding:7px 10px;background:rgba(255,255,255,.84);border:1px solid rgba(23,105,255,.10);border-radius:11px}.dev-parameter-table td{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;padding:6px 0!important;white-space:normal!important;border:0!important;overflow-wrap:anywhere}.dev-parameter-table td::before{color:var(--text-muted);font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.dev-parameter-table td:nth-child(1)::before{content:"Parameter"}.dev-parameter-table td:nth-child(2)::before{content:"Required"}.dev-parameter-table td:nth-child(3)::before{content:"Aliases"}.dev-parameter-table td:nth-child(4)::before{content:"Description"}}
@media(max-width:420px){.access-search-hero{grid-template-columns:1fr}.access-search-hero h1{font-size:25px}.access-mobile-card header{flex-direction:column}.dev-docs-hero{grid-template-columns:minmax(0,1fr)}.dev-docs-version{justify-self:start}}
@media(prefers-reduced-motion:reduce){.psp-workspace-page .workspace-surface{transition:none;transform:none!important}}
.allocation-history-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-top:1px solid var(--border);background:rgba(247,250,255,.9)}.allocation-history-pagination>span{color:var(--text-muted);font-size:9px;text-align:center}.allocation-history-pagination .page-btn:disabled{cursor:not-allowed;opacity:.42}@media(max-width:560px){.allocation-history-pagination{display:grid;grid-template-columns:1fr 1fr}.allocation-history-pagination>span{grid-column:1/-1;grid-row:1}.allocation-history-pagination .page-btn{width:100%}}
.allocation-inventory-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.allocation-inventory-kpis article{padding:17px;background:linear-gradient(145deg,#fff,#eef6ff);border:1px solid rgba(23,105,255,.12);border-radius:16px;box-shadow:0 9px 24px rgba(31,65,120,.06)}.allocation-inventory-kpis small,.allocation-inventory-kpis strong{display:block}.allocation-inventory-kpis small{color:#8291a8;font-size:8px;text-transform:uppercase}.allocation-inventory-kpis strong{margin-top:5px;color:#1769ff;font-size:25px}.allocation-inventory-list{display:grid;gap:10px;padding:14px}.allocation-account{overflow:hidden;border:1px solid rgba(88,115,155,.11);border-radius:15px;background:linear-gradient(145deg,#fff,#f7fbff)}.allocation-account>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px}.allocation-account>header strong,.allocation-account>header span{display:block}.allocation-account>header strong{color:#17305a;font-size:12px}.allocation-account>header span{margin-top:3px;color:#8291a8;font-size:8px}.allocation-account-totals{display:flex;align-items:center;gap:9px}.allocation-account-totals b{color:#1769ff;font-size:11px}.allocation-account-totals small{color:#8291a8;font-size:8px}.allocation-range-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:7px;padding:0 14px 14px}.allocation-range-grid>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px;background:rgba(239,246,255,.72);border-radius:10px}.allocation-range-grid span{overflow:hidden;color:#405c7e;font-size:9px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.allocation-range-grid strong{color:#1769ff;font-size:11px}.allocation-range-grid small{grid-column:1/-1;color:#8b99ae;font-size:7px}@media(max-width:620px){.allocation-inventory-kpis{grid-template-columns:1fr}.allocation-account>header{align-items:flex-start;flex-direction:column}.allocation-account-totals{width:100%;flex-wrap:wrap}.allocation-account-totals .action-btn{margin-left:auto}.allocation-range-grid{grid-template-columns:1fr}}

/* Unified live traffic and rich SMS identity cards */
.sms-service-identity{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:180px;color:#29496f;font-size:9px;font-weight:850}.sms-service-identity>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-service-mark{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;color:#1769ff;background:#eaf2ff;border:1px solid rgba(23,105,255,.10);border-radius:9px}.sms-service-mark svg{width:14px;height:14px}.service-whatsapp .sms-service-mark{color:#fff;background:linear-gradient(145deg,#25d366,#12a957)}.service-telegram .sms-service-mark{color:#fff;background:linear-gradient(145deg,#38bdf8,#218acb)}.service-facebook .sms-service-mark{color:#fff;background:#1877f2;font-size:17px}.service-instagram .sms-service-mark{color:#fff;background:linear-gradient(145deg,#7c3aed,#ec4899,#f59e0b)}.service-google .sms-service-mark{color:#2563eb;background:#fff;font-size:13px;box-shadow:0 3px 10px rgba(31,65,120,.10)}.service-tiktok .sms-service-mark{color:#fff;background:#111827;font-size:15px}.service-microsoft .sms-service-mark{color:#fff;background:#6264a7}.db-country-flag{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;background:linear-gradient(145deg,#fff,#eef5ff);border:1px solid rgba(88,115,155,.11);border-radius:12px;box-shadow:0 5px 14px rgba(31,65,120,.07);font-size:20px}
.db-recent-sms{display:grid;gap:1px;padding:6px 10px 12px}.db-sms-item{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(230px,1fr);gap:10px;padding:12px 8px;border-bottom:1px solid rgba(88,115,155,.09)}.db-sms-leading{display:flex;align-items:center;gap:10px;min-width:0}.db-sms-leading>div{min-width:0}.db-sms-leading code,.db-sms-leading small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-sms-leading code{color:#735dff;font-size:9px}.db-sms-leading small{margin-top:4px;color:#8291a8;font-size:8px}.db-sms-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.db-sms-meta time{color:#8291a8;font-size:8px;white-space:nowrap}.db-sms-meta .sms-payout{font-size:8px;white-space:nowrap}.db-sms-message{grid-column:1/-1;min-width:0}.db-sms-message summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;color:#60728e;background:rgba(248,251,255,.84);border:1px solid rgba(88,115,155,.08);border-radius:10px;cursor:pointer;font-size:9px}.db-sms-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-sms-expand{color:#735dff;font-size:8px;font-weight:800;white-space:nowrap}.db-sms-close-label,.db-sms-message[open] .db-sms-open-label{display:none}.db-sms-message[open] .db-sms-close-label{display:inline}.db-sms-full{padding:11px;color:#425b7b;font-size:9px;line-height:1.6;overflow-wrap:anywhere}.db-service-name .sms-service-identity{max-width:100%}.db-service-stats small{color:#8b99ae;font-size:7px;font-weight:800;text-transform:uppercase}
.live-account-stream-card{overflow:hidden}.live-account-stream{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}.live-account-card{min-width:0;padding:14px;background:radial-gradient(circle at 100% 0,rgba(115,93,255,.10),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,244,255,.88));border:1px solid rgba(88,115,155,.10);border-radius:16px;box-shadow:0 9px 24px rgba(31,65,120,.06);animation:rowIn .22s ease both}.live-account-card header,.live-account-card footer,.live-account-origin{display:flex;align-items:center}.live-account-card header{justify-content:space-between;gap:10px}.live-account-card header time{color:#8291a8;font-size:8px;white-space:nowrap}.live-account-origin{gap:8px;min-width:0}.live-account-origin .db-country-flag{width:33px;height:33px;flex-basis:33px;font-size:17px}.live-account-route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0}.live-account-route>div{min-width:0;padding:8px;background:rgba(255,255,255,.74);border:1px solid rgba(88,115,155,.08);border-radius:9px}.live-account-route small,.live-account-route code,.live-account-route strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.live-account-route small{margin-bottom:4px;color:#91a0b8;font-size:7px;text-transform:uppercase}.live-account-route code,.live-account-route strong{color:#31547d;font-size:8px}.live-account-message{min-height:39px;margin:0 0 11px;padding:9px 10px;color:#52657f;background:rgba(245,243,255,.62);border-radius:9px;font-size:9px;line-height:1.55;overflow-wrap:anywhere}.live-account-card footer{justify-content:space-between;gap:10px;padding-top:10px;border-top:1px dashed rgba(88,115,155,.12)}.live-account-card footer .sms-payout{font-size:9px}.traffic-route-with-flag{display:flex;align-items:center;gap:8px}.traffic-route-with-flag .db-country-flag{width:31px;height:31px;flex-basis:31px;font-size:16px}.traffic-route-with-flag>span:last-child{min-width:0}.traffic-mobile-range{display:block;margin:-5px 0 9px;color:#8291a8;font-size:7px}
@media(max-width:820px){.live-account-stream{grid-template-columns:1fr}.db-sms-item{grid-template-columns:1fr}.db-sms-meta{justify-content:flex-start;flex-wrap:wrap}.db-sms-message{grid-column:1}.live-account-route{grid-template-columns:1fr 1fr}.live-account-route>div:last-child{grid-column:1/-1}}
@media(max-width:480px){.db-sms-meta time{width:100%}.live-account-stream{padding:8px}.live-account-card{padding:11px}.live-account-card header{align-items:flex-start}.live-account-route{grid-template-columns:1fr}.live-account-route>div:last-child{grid-column:auto}.sms-service-identity{max-width:135px}}