/* ════════════════════════════════════════════════════════════
   LOGIN PAGE v2.0 — Frozen UI
════════════════════════════════════════════════════════════ */
#loginPage{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;padding:40px 16px 48px;background:transparent;overflow-y:auto}
.lp-wrap{width:100%;max-width:540px;display:flex;flex-direction:column;align-items:center}
.lp-hero{width:100%;text-align:center;margin-bottom:32px}
.lp-logo{width:80px;height:80px;border-radius:24px;display:grid;place-items:center;margin:0 auto 20px}
.lp-title{font-size:clamp(36px,7vw,64px);font-weight:900;letter-spacing:-.04em;color:#fff;margin-bottom:10px;line-height:1.1}
.lp-sub{font-size:clamp(13px,2vw,16px);color:rgba(210,222,255,.82);line-height:1.7;margin-bottom:24px}
.lp-login-box{width:100%;background:rgba(18,24,45,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px;margin-bottom:14px;text-align:left}
.lp-field{margin-bottom:12px}
.lp-inp{width:100%;padding:13px 15px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font:inherit;font-size:15px;outline:none;transition:.18s;-webkit-appearance:none}
.lp-inp:focus{border-color:#6d8cff;background:rgba(255,255,255,.11)}
.lp-inp::placeholder{color:rgba(255,255,255,.28)}
.lp-pw{position:relative}
.lp-pw .lp-inp{padding-right:48px}
.lp-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(210,222,255,.82);cursor:pointer;font-size:16px;padding:6px;min-width:36px;text-align:center}
.lp-eye:hover{color:#fff}
.lp-err{font-size:12px;color:#fca5a5;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:9px;padding:9px 13px;margin-bottom:9px;display:none;text-align:center;line-height:1.5}
.lp-btn{width:100%;padding:15px;border-radius:14px;border:none;cursor:pointer;background:linear-gradient(90deg,#6f8cff 0%,#5f7dff 100%);color:#fff;font:inherit;font-size:16px;font-weight:800;box-shadow:0 12px 30px rgba(76,102,255,.28);transition:.2s;margin-bottom:10px;display:block;-webkit-appearance:none}
.lp-btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(76,102,255,.4)}
.lp-btn:active{transform:none}
.lp-btn.busy{opacity:.65;cursor:not-allowed;transform:none!important}
.lp-note{font-size:12px;color:rgba(255,255,255,.28);text-align:center}
.lp-carousel{width:100%;margin-top:32px}
.lp-car-nav{display:flex;align-items:center;gap:10px}
.lp-car-vp{flex:1;overflow:hidden;border-radius:12px}
.lp-car-track{display:flex;gap:12px;transition:transform .42s cubic-bezier(.4,0,.2,1);will-change:transform}
.lp-card{flex:0 0 calc((100% - 24px) / 3);background:rgba(18,24,45,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px;min-height:96px}
.lp-card-i{font-size:22px;margin-bottom:8px}
.lp-card-n{font-size:13px;font-weight:800;color:#fff;margin-bottom:5px}
.lp-card-d{font-size:11px;color:rgba(210,222,255,.82);line-height:1.5}
.lp-nav{width:36px;min-width:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:.14s;line-height:1;align-self:center}
.lp-nav:hover{background:rgba(255,255,255,.13)}
.lp-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.lp-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:.25s}
.lp-dot.on{background:#6d8cff;width:18px;border-radius:999px}
@media(min-width:768px) and (max-width:1199px){.lp-wrap{max-width:min(80%,680px)}.lp-card{flex:0 0 calc((100% - 12px) / 2)}}
@media(max-width:767px){
  #loginPage{padding:28px 0 40px}
  .lp-wrap{width:calc(100% - 32px);max-width:none;margin:0 auto}
  .lp-logo{width:64px;height:64px;font-size:30px;margin-bottom:16px}
  .lp-title{font-size:clamp(28px,8vw,42px)}
  .lp-sub{font-size:13px;margin-bottom:20px}
  .lp-login-box{background:rgba(16,22,40,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .lp-inp{font-size:16px;padding:14px 15px}
  .lp-btn{font-size:17px;padding:16px;box-shadow:0 10px 20px rgba(76,102,255,.22)}
  .lp-card{flex:0 0 100%;background:rgba(16,22,40,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .lp-nav{width:32px;min-width:32px;font-size:20px}
}

/* ═══════════════════════════════════════════════════════════════
   LatteCha Pro — Dark Glass UI
   Merged: new dark theme + all functional styles
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background-color: #050816;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(76,102,255,.18), transparent 28%),
    radial-gradient(circle at 80% 78%, rgba(255,155,60,.10), transparent 26%),
    linear-gradient(180deg, #081126 0%, #050816 55%, #040612 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  color:#e8f0fe;
  background:
    radial-gradient(circle at 8% 12%, rgba(124,156,255,.18), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(245,158,11,.14), transparent 24%),
    radial-gradient(circle at 50% 95%, rgba(34,197,94,.08), transparent 30%),
    linear-gradient(150deg,#080c1a 0%,#0d1427 50%,#080f1e 100%);
}
button,input,textarea,select{font:inherit}

:root{
  --glass:rgba(255,255,255,.07);
  --glass-2:rgba(255,255,255,.11);
  --glass-3:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.06);
  --soft:#8da4c8;
  --soft-2:#b8cceb;
  --white:#fff;
  --primary:#7c9cff;
  --primary-2:#5d7cff;
  --primary-soft:rgba(124,156,255,.18);
  --primary-shadow:rgba(79,130,255,.24);
  --chat-admin-bubble:linear-gradient(135deg,#6387ff,#4ccff6);
  --chat-admin-text:#fff;
  --chat-room-bg:linear-gradient(180deg,rgba(8,13,31,.38),rgba(6,10,24,.5));
  --chat-header-bg:rgba(255,255,255,.03);
  --chat-grid-line:rgba(255,255,255,.018);
  --chat-grid-line-2:rgba(255,255,255,.014);
  --reply-panel-bg:linear-gradient(180deg,rgba(15,25,49,.94),rgba(7,13,30,.98));
  --success:#22c55e;
  --success-soft:rgba(34,197,94,.15);
  --warning:#f59e0b;
  --warning-soft:rgba(245,158,11,.15);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,.15);
  --shadow:0 20px 60px rgba(0,0,0,.4);
  --shadow-sm:0 8px 24px rgba(0,0,0,.28);
  --r:22px;
  --r-sm:14px;
  --r-xs:10px;
}

:root[data-ui-theme="orange"]{
  --primary:#f59e0b;
  --primary-2:#fb7185;
  --primary-soft:rgba(245,158,11,.18);
  --primary-shadow:rgba(245,158,11,.26);
  --chat-admin-bubble:linear-gradient(135deg,#f59e0b,#fb7185);
  --chat-room-bg:linear-gradient(180deg,rgba(35,20,14,.46),rgba(18,10,18,.62));
  --chat-header-bg:rgba(245,158,11,.06);
  --chat-grid-line:rgba(245,158,11,.030);
  --chat-grid-line-2:rgba(251,113,133,.024);
  --reply-panel-bg:linear-gradient(180deg,rgba(45,24,17,.95),rgba(18,10,18,.98));
  --soft:#d6b68b;
  --soft-2:#ffe2b0;
  --warning:#f59e0b;
  --warning-soft:rgba(245,158,11,.16);
}
:root[data-ui-theme="violet"]{
  --primary:#a78bfa;
  --primary-2:#ec4899;
  --primary-soft:rgba(167,139,250,.18);
  --primary-shadow:rgba(167,139,250,.26);
  --chat-admin-bubble:linear-gradient(135deg,#a78bfa,#ec4899);
  --chat-room-bg:linear-gradient(180deg,rgba(22,13,45,.46),rgba(12,8,26,.62));
  --chat-header-bg:rgba(167,139,250,.06);
  --chat-grid-line:rgba(167,139,250,.030);
  --chat-grid-line-2:rgba(236,72,153,.024);
  --reply-panel-bg:linear-gradient(180deg,rgba(28,16,56,.95),rgba(12,8,26,.98));
  --soft:#bba9dc;
  --soft-2:#eadcff;
}
:root[data-ui-theme="ocean"]{
  --primary:#38bdf8;
  --primary-2:#2563eb;
  --primary-soft:rgba(56,189,248,.17);
  --primary-shadow:rgba(56,189,248,.25);
  --chat-admin-bubble:linear-gradient(135deg,#38bdf8,#2563eb);
  --chat-room-bg:linear-gradient(180deg,rgba(6,26,48,.46),rgba(4,13,28,.62));
  --chat-header-bg:rgba(56,189,248,.055);
  --chat-grid-line:rgba(56,189,248,.030);
  --chat-grid-line-2:rgba(37,99,235,.024);
  --reply-panel-bg:linear-gradient(180deg,rgba(7,31,57,.95),rgba(4,13,28,.98));
  --soft:#93c5dd;
  --soft-2:#d9f4ff;
}
:root[data-ui-theme="emerald"]{
  --primary:#34d399;
  --primary-2:#14b8a6;
  --primary-soft:rgba(52,211,153,.16);
  --primary-shadow:rgba(52,211,153,.23);
  --chat-admin-bubble:linear-gradient(135deg,#34d399,#14b8a6);
  --chat-room-bg:linear-gradient(180deg,rgba(5,34,24,.46),rgba(3,16,13,.62));
  --chat-header-bg:rgba(52,211,153,.055);
  --chat-grid-line:rgba(52,211,153,.028);
  --chat-grid-line-2:rgba(20,184,166,.024);
  --reply-panel-bg:linear-gradient(180deg,rgba(6,39,29,.95),rgba(3,16,13,.98));
  --soft:#95d8c0;
  --soft-2:#d7ffef;
  --success:#34d399;
  --success-soft:rgba(52,211,153,.16);
}
:root[data-ui-theme="gold"]{
  --primary:#f8d477;
  --primary-2:#d69e2e;
  --primary-soft:rgba(248,212,119,.16);
  --primary-shadow:rgba(248,212,119,.23);
  --chat-admin-bubble:linear-gradient(135deg,#f8d477,#d69e2e);
  --chat-admin-text:#170f04;
  --chat-room-bg:linear-gradient(180deg,rgba(26,22,13,.52),rgba(10,8,5,.66));
  --chat-header-bg:rgba(248,212,119,.055);
  --chat-grid-line:rgba(248,212,119,.030);
  --chat-grid-line-2:rgba(214,158,46,.024);
  --reply-panel-bg:linear-gradient(180deg,rgba(31,25,13,.95),rgba(10,8,5,.98));
  --soft:#cdbb91;
  --soft-2:#fff0bf;
  --warning:#f8d477;
  --warning-soft:rgba(248,212,119,.16);
}
:root[data-ui-theme="white"]{
  --glass:rgba(255,255,255,.78);
  --glass-2:rgba(255,255,255,.92);
  --glass-3:rgba(248,250,252,.82);
  --line:rgba(148,163,184,.26);
  --line-2:rgba(148,163,184,.18);
  --soft:#64748b;
  --soft-2:#334155;
  --white:#172033;
  --primary:#d69e2e;
  --primary-2:#f59e0b;
  --primary-soft:rgba(214,158,46,.15);
  --primary-shadow:rgba(180,119,19,.18);
  --chat-admin-bubble:linear-gradient(135deg,#fff5cf,#f7c857 52%,#d69e2e);
  --chat-admin-text:#2a1b05;
  --chat-room-bg:linear-gradient(180deg,rgba(255,255,255,.74),rgba(245,248,252,.92));
  --chat-header-bg:rgba(255,255,255,.74);
  --chat-grid-line:rgba(214,158,46,.028);
  --chat-grid-line-2:rgba(99,102,241,.016);
  --reply-panel-bg:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,250,252,.98));
  --success:#16a34a;
  --success-soft:rgba(22,163,74,.12);
  --warning:#d97706;
  --warning-soft:rgba(217,119,6,.12);
  --danger:#dc2626;
  --danger-soft:rgba(220,38,38,.10);
  --shadow:0 22px 58px rgba(15,23,42,.12);
  --shadow-sm:0 10px 26px rgba(15,23,42,.08);
}

html[data-ui-theme="orange"],html[data-ui-theme="orange"] body{
  background:
    radial-gradient(circle at 10% 12%, rgba(245,158,11,.22), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(251,113,133,.18), transparent 24%),
    radial-gradient(circle at 50% 94%, rgba(252,211,77,.09), transparent 30%),
    linear-gradient(150deg,#120a12 0%,#1b1020 46%,#0b0710 100%);
}
html[data-ui-theme="violet"],html[data-ui-theme="violet"] body{
  background:
    radial-gradient(circle at 8% 12%, rgba(167,139,250,.24), transparent 28%),
    radial-gradient(circle at 92% 9%, rgba(236,72,153,.16), transparent 24%),
    radial-gradient(circle at 48% 96%, rgba(59,130,246,.10), transparent 30%),
    linear-gradient(150deg,#090716 0%,#150b27 50%,#080711 100%);
}
html[data-ui-theme="ocean"],html[data-ui-theme="ocean"] body{
  background:
    radial-gradient(circle at 8% 12%, rgba(56,189,248,.23), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(37,99,235,.18), transparent 24%),
    radial-gradient(circle at 50% 95%, rgba(20,184,166,.10), transparent 30%),
    linear-gradient(150deg,#04111f 0%,#071b32 50%,#040914 100%);
}
html[data-ui-theme="emerald"],html[data-ui-theme="emerald"] body{
  background:
    radial-gradient(circle at 8% 12%, rgba(52,211,153,.21), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(20,184,166,.17), transparent 24%),
    radial-gradient(circle at 50% 95%, rgba(132,204,22,.09), transparent 30%),
    linear-gradient(150deg,#04130f 0%,#08231b 50%,#030b09 100%);
}
html[data-ui-theme="gold"],html[data-ui-theme="gold"] body{
  background:
    radial-gradient(circle at 8% 12%, rgba(248,212,119,.20), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(214,158,46,.16), transparent 24%),
    radial-gradient(circle at 50% 95%, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(150deg,#080705 0%,#14100a 50%,#050403 100%);
}
html[data-ui-theme="white"],html[data-ui-theme="white"] body{
  color:#172033;
  background-color:#f6f8fc;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.92), transparent 26%),
    radial-gradient(circle at 86% 10%, rgba(247,213,122,.30), transparent 25%),
    radial-gradient(circle at 44% 96%, rgba(148,163,184,.16), transparent 32%),
    linear-gradient(150deg,#fbfcff 0%,#f2f5fa 48%,#e9eef7 100%);
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}

/* ── Glass card ─────────────────────────────────────────────── */
.glass{
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.hidden{display:none!important}

/* ══════════════════════════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════════════════════════ */
.app-shell{
  display:grid;
  grid-template-columns:260px 1fr;
  height:100vh;
  gap:0;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar{
  display:flex;flex-direction:column;
  padding:20px 16px;
  border-right:1px solid var(--line-2);
  background:rgba(255,255,255,.04);
  overflow-y:auto;
  gap:6px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  padding:4px 8px 20px;
  border-bottom:1px solid var(--line-2);
  margin-bottom:10px;
}
.brand-mark{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  flex-shrink:0;
}
.brand-logo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,0) 34%),
    radial-gradient(circle at 28% 20%,rgba(181,244,255,.6),transparent 18%),
    linear-gradient(135deg,#06152e 0%,#0d2c68 45%,#080914 100%);
  border:1px solid rgba(181,244,255,.28);
  box-shadow:
    0 22px 58px rgba(25,115,255,.42),
    0 0 0 1px rgba(123,236,255,.28) inset,
    0 0 38px rgba(255,218,132,.24) inset;
}
.brand-logo::before{
  content:"";
  position:absolute;
  inset:-42%;
  z-index:-1;
  background:conic-gradient(from 205deg,#66f3ff,#4f8cff,#a779ff,#ffd783,#66f3ff);
  animation:logoSpin 8s linear infinite;
  opacity:.9;
}
.brand-logo::after{
  content:"";
  position:absolute;
  inset:3px;
  z-index:-1;
  border-radius:inherit;
  background:
    radial-gradient(circle at 72% 24%,rgba(245,196,81,.24),transparent 24%),
    radial-gradient(circle at 18% 78%,rgba(69,132,255,.18),transparent 27%),
    linear-gradient(145deg,#102764,#06101f 72%);
}
.logo-bubble{
  position:relative;
  width:48%;
  height:38%;
  border-radius:32% 32% 32% 12%;
  background:linear-gradient(145deg,#ffffff 0%,#bdf7ff 42%,#5edcff 64%,#6d8cff 100%);
  box-shadow:
    0 7px 18px rgba(89,224,255,.42),
    0 0 0 1px rgba(255,255,255,.68) inset;
}
.logo-bubble::before,
.logo-bubble::after{
  content:"";
  position:absolute;
  top:42%;
  width:13%;
  aspect-ratio:1;
  border-radius:50%;
  background:#092047;
  opacity:.76;
}
.logo-bubble::before{left:28%}
.logo-bubble::after{right:28%}
.logo-spark{
  position:absolute;
  right:22%;
  top:19%;
  width:18%;
  aspect-ratio:1;
  transform:rotate(45deg);
  background:linear-gradient(135deg,#fff8d6,#ffd783 52%,#f4b54d);
  box-shadow:0 0 20px rgba(255,215,131,.86);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}
.brand-mark .logo-bubble{width:50%;height:39%}
.brand-mark .logo-spark{right:20%;top:18%;width:17%}
@keyframes logoSpin{to{transform:rotate(1turn)}}
.brand h1{font-size:20px;font-weight:800;letter-spacing:-.03em}
.brand p{font-size:11px;color:var(--soft);margin-top:2px}

.nav{display:flex;flex-direction:column;gap:4px}
.nav-btn{
  display:flex;align-items:center;gap:10px;
  text-align:left;padding:12px 14px;border-radius:14px;
  background:transparent;color:#c8d8f0;font-weight:600;
  border:none;cursor:pointer;font-size:14px;
  transition:all .18s ease;position:relative;
}
.nav-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-btn.active{
  background:linear-gradient(135deg,rgba(124,156,255,.25),rgba(124,156,255,.12));
  border:1px solid rgba(124,156,255,.28);color:#fff;
}
.nav-badge{
  margin-left:auto;background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;
  min-width:20px;text-align:center;
}

.sidebar-footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2)}
.status-card{
  display:flex;gap:10px;align-items:center;
  padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.05);
}
.dot{width:8px;height:8px;border-radius:999px;flex-shrink:0}
.dot.online{background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.15)}
.dot.offline{background:var(--danger)}
.status-card small{display:block;color:var(--soft);font-size:11px;margin-top:3px}
.user-avatar{
  width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  font-weight:800;font-size:13px;flex-shrink:0;
}

/* ── Main area ──────────────────────────────────────────────── */
.main-area{
  display:flex;flex-direction:column;
  overflow:hidden;min-width:0;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  border-bottom:1px solid var(--line-2);
  background:var(--chat-header-bg);
  flex-shrink:0;
}
.topbar-left .eyebrow{font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.1em}
.topbar-left h2{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:2px}
.topbar-actions{display:flex;gap:10px;align-items:center}

/* Buttons */
.ghost-btn,.primary-btn{
  padding:10px 16px;border-radius:12px;font-weight:700;
  cursor:pointer;border:none;font-size:13px;transition:all .18s;
}
.ghost-btn{
  background:var(--glass-2);color:#dce8ff;
  border:1px solid var(--line);
}
.ghost-btn:hover{background:rgba(255,255,255,.14)}
.primary-btn{
  color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 10px 28px rgba(93,124,255,.3);
}
.primary-btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(93,124,255,.4)}
.primary-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ai-btn{
  padding:10px 16px;border-radius:12px;border:1px solid rgba(34,211,238,.35);
  background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(124,58,237,.18));
  color:#dffbff;font-size:13px;font-weight:800;cursor:pointer;
  box-shadow:0 10px 28px rgba(34,211,238,.12);transition:all .18s;
}
.ai-btn:hover{transform:translateY(-1px);border-color:rgba(34,211,238,.58);box-shadow:0 14px 34px rgba(34,211,238,.18)}
.ai-btn.mini{padding:7px 11px;font-size:12px;border-radius:10px}
.danger-btn{
  background:var(--danger-soft);color:var(--danger);
  border:1px solid rgba(239,68,68,.25);padding:8px 12px;border-radius:10px;
  cursor:pointer;font:inherit;font-weight:600;font-size:13px;
  transition:.18s;
}
.danger-btn:hover{background:rgba(239,68,68,.25)}
.copy-btn{
  background:var(--primary-soft);color:var(--primary);
  border:none;padding:8px 12px;border-radius:10px;
  cursor:pointer;font:inherit;font-weight:600;font-size:13px;
}

/* ── Pages ──────────────────────────────────────────────────── */
.page-content{flex:1;overflow:auto;padding:20px 22px;display:none}
.page-content.active{display:block}

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════════════════ */
#loginPage{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 20% 30%, rgba(124,156,255,.2), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(245,158,11,.12), transparent 40%),
    #080c1a;
  z-index:1000;
}
.login-box{
  width:min(400px,90vw);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(24px);
  border-radius:28px;
  padding:36px;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  animation:popIn .3s ease;
}
.login-logo{
  width:56px;height:56px;border-radius:18px;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  display:grid;place-items:center;font-size:26px;
  margin:0 auto 20px;
  box-shadow:0 14px 34px rgba(245,158,11,.35);
}
.login-box h2{text-align:center;font-size:26px;font-weight:800;margin-bottom:6px}
.login-box p{text-align:center;color:var(--soft);font-size:14px;margin-bottom:28px}
.login-field{position:relative;margin-bottom:14px}
.login-field input{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;color:#fff;font-size:14px;
  transition:.2s;outline:none;
}
.login-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,156,255,.15)}
.login-field input::placeholder{color:rgba(255,255,255,.3)}
.eye-btn{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:16px;color:var(--soft);
  padding:0;width:auto;
}
.login-submit{
  width:100%;padding:15px;border-radius:16px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font-weight:800;font-size:15px;border:none;cursor:pointer;
  box-shadow:0 14px 34px rgba(93,124,255,.35);
  transition:.2s;margin-top:6px;
}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(93,124,255,.45)}
.login-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.login-spinner{text-align:center;padding:10px 0}
.login-spinner-ring{
  display:inline-block;width:20px;height:20px;
  border:2px solid rgba(255,255,255,.2);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .7s linear infinite;
}
#loginError{
  color:#ff8080;font-size:13px;text-align:center;
  margin-top:10px;min-height:18px;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════════════ */
.report-cycle-text{
  display:inline-flex;align-items:center;gap:8px;
  min-height:30px;margin-bottom:12px;padding:7px 12px;
  border-radius:999px;background:rgba(124,156,255,.1);
  border:1px solid rgba(124,156,255,.18);
  color:#aebfff;font-size:12px;font-weight:700;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.stat-card{
  min-height:118px;border-radius:18px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.16);
}
.stat-label{font-size:11px;color:var(--soft);font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.35}
.stat-value{font-size:32px;font-weight:800;margin-top:10px;letter-spacing:-.03em;line-height:1}
.stat-value.danger{color:#ff8080}
.stat-trend{margin-top:6px;font-size:12px;color:var(--soft)}
.stat-trend.positive{color:#7ee7a1}
.stat-trend.warn{color:#fcd34d}
.stat-trend.danger{color:#ffb4b4}

.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.95fr);gap:14px;align-items:start}
.panel{
  border-radius:22px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 38px rgba(0,0,0,.18);
}
.panel-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:16px;gap:12px}
.panel-head h3{font-size:18px;font-weight:800;letter-spacing:-.03em}
.panel-head p{font-size:12px;color:var(--soft);margin-top:3px}
.chip-row{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--glass-2);color:#c8d8f0;border:1px solid var(--line);
  cursor:pointer;transition:.18s;
}
.chip.active{background:var(--primary-soft);border-color:rgba(124,156,255,.4);color:#c8d8ff}
.chip:hover{background:rgba(255,255,255,.1)}

/* Bar chart */
.bars{display:flex;align-items:end;gap:12px;height:150px;padding:8px 4px 0}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--soft);font-size:11px;flex:1}
.bar{
  width:100%;max-width:36px;border-radius:10px 10px 5px 5px;
  background:var(--chat-admin-bubble);
  box-shadow:0 8px 20px var(--primary-shadow);
  transition:.4s cubic-bezier(.34,1.56,.64,1);min-height:6px;
}
.bar:hover{filter:brightness(1.2)}

/* Ranking */
.ranking-list{display:flex;flex-direction:column;gap:8px}
.rank-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:14px;
  background:rgba(255,255,255,.05);transition:.2s;cursor:default;
}
.rank-item:hover{background:rgba(255,255,255,.09)}
.rank-badge{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:14px;flex-shrink:0;
}
.rank-item:first-child .rank-badge{background:rgba(245,158,11,.25);color:#fcd34d}
.rank-item:nth-child(2) .rank-badge{background:rgba(180,180,200,.2);color:#c8d8f0}
.rank-item:nth-child(3) .rank-badge{background:rgba(205,127,50,.2);color:#f4a460}
.rank-item:nth-child(n+4) .rank-badge{background:var(--primary-soft);color:var(--primary)}
.rank-item > div{flex:1;min-width:0}
.rank-item strong{display:block;font-size:13px;font-weight:700}
.rank-item small{display:block;color:var(--soft);font-size:11px;margin-top:2px}
.rank-score{font-size:16px;font-weight:800;color:var(--primary);flex-shrink:0}
.star-bar{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:12px}

/* Store bars */
.store-count-list{display:flex;flex-direction:column;gap:10px}
.store-count-row{display:grid;grid-template-columns:90px 1fr 44px;gap:10px;align-items:center}
.store-count-name{font-size:12px;color:var(--soft);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-count-track{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.store-count-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-2));transition:width .4s ease}
.store-count-value{font-size:12px;font-weight:800;color:var(--primary);text-align:right}

.summary-card{
  border-radius:16px;padding:14px;
  background:rgba(124,156,255,.08);border:1px solid rgba(124,156,255,.15);
  margin-bottom:16px;
}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.summary-row:last-child{border:none;padding-bottom:0}
.summary-row span{font-size:12px;color:var(--soft)}
.summary-row strong{font-size:13px;font-weight:700}

/* ══════════════════════════════════════════════════════════════
   CHAT LAYOUT
══════════════════════════════════════════════════════════════ */
.chat-shell{
  display:grid;grid-template-columns:150px 320px minmax(420px,1fr);
  height:calc(100vh - 57px);/* topbar */
  overflow:hidden;
}
.chat-shell.has-inspector{grid-template-columns:150px 300px minmax(420px,1fr) 300px}
@media(max-width:1400px){.chat-shell{grid-template-columns:138px 300px minmax(360px,1fr)}.chat-shell.has-inspector{grid-template-columns:132px 290px minmax(360px,1fr) 270px}}
@media(max-width:1200px){.chat-shell,.chat-shell.has-inspector{grid-template-columns:300px 1fr}.store-nav-panel{display:none!important}}
@media(max-width:1200px){.campaign-shell{grid-template-columns:1fr}.campaign-log{grid-template-columns:1fr}.campaign-log-stat{justify-content:flex-start}}
@media(max-width:768px){.chat-shell{display:block;position:relative;overflow:hidden}}
.store-nav-panel{
  background:linear-gradient(180deg,rgba(7,9,30,.94),rgba(8,13,31,.98));
  border-right:1px solid var(--line);
  overflow-y:auto;padding:0;
  display:flex;flex-direction:column;
}
.store-nav-head{
  font-size:11px;font-weight:800;color:#a8bad8;
  text-transform:uppercase;letter-spacing:.07em;
  padding:14px 14px 8px;
}
.storeNavSection{font-size:11px;color:var(--text-3,#8da4c8);padding:8px 14px 4px;font-weight:700}
.storeNavItem{
  display:flex;align-items:center;gap:8px;
  padding:10px 11px;cursor:pointer;border-radius:12px;
  margin:3px 8px;transition:.12s;border:1px solid transparent;
}
.storeNavItem:hover{background:rgba(255,255,255,.05)}
.storeNavItem.active{background:rgba(var(--primary-rgb,109,140,255),.15);border-color:rgba(var(--primary-rgb,109,140,255),.25);color:#fff}
.sni-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-size:12px;font-weight:800;color:#fff}
.sni-name{font-size:13px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2,#c8d8f0)}
.storeNavItem.active .sni-name{color:#fff}
.sni-count{font-size:10px;font-weight:800;background:var(--danger,#ef4444);color:#fff;padding:1px 5px;border-radius:999px;min-width:16px;text-align:center}
.sni-count.zero{background:rgba(255,255,255,.1);color:var(--text-3,#8da4c8)}
.storeNavDivider{height:1px;background:var(--line);margin:5px 10px}

/* Chat list */
.chat-list-panel{
  display:flex;flex-direction:column;
  border-right:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  min-height:0;
}
.chat-list-head{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--line-2);
  flex-shrink:0;
}
.chat-list-head h3{font-size:17px;font-weight:800;margin-bottom:12px;letter-spacing:-.02em}
.search-wrap{position:relative}
.search-wrap input{
  width:100%;padding:12px 14px 12px 44px;
  background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;color:#fff;font-size:13px;outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.search-wrap input:focus{border-color:rgba(124,156,255,.55);box-shadow:0 0 0 3px rgba(124,156,255,.1)}
.search-wrap input::placeholder{color:rgba(255,255,255,.25)}
.search-ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:8px;
  display:grid;place-items:center;font-size:0;
  color:#8fb4ff;background:rgba(124,156,255,.12);
  border:1px solid rgba(124,156,255,.18);
}
.search-ico::before{
  content:"";width:9px;height:9px;border:2px solid currentColor;border-radius:50%;
  transform:translate(-1px,-1px);
}
.search-ico::after{
  content:"";position:absolute;width:7px;height:2px;border-radius:999px;
  background:currentColor;transform:translate(5px,5px) rotate(45deg);
}

.filter-bar{
  padding:10px 16px;border-bottom:1px solid var(--line-2);
  position:relative;flex-shrink:0;
}
#filterDropdownBtn{
  width:100%;padding:11px 13px;background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#d8e8ff;
  cursor:pointer;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;
}
#filterDropdownBtn:hover{background:var(--glass-2)}
.fd-arrow{font-size:10px;color:var(--soft);transition:.2s}
#filterDropdownBtn.open .fd-arrow{transform:rotate(180deg)}
#filterDropdownMenu{
  display:none;position:absolute;left:16px;right:16px;
  top:calc(100% - 4px);z-index:100;
  background:#0f1a30;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
#filterDropdownMenu.show{display:block}
.fd-item{
  padding:10px 14px;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:10px;color:#c8d8f0;
}
.fd-item:hover{background:rgba(255,255,255,.06)}
.fd-item.active{background:var(--primary-soft);color:var(--primary)}
.fd-icon{font-size:13px;width:18px;text-align:center}
.fd-name{flex:1}
.fd-count{
  background:var(--primary);color:#fff;font-size:10px;
  font-weight:700;border-radius:999px;padding:2px 7px;
}
.fd-count.zero{background:rgba(255,255,255,.1);color:var(--soft)}

#oaFilterWrap{
  display:none;
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(124,156,255,.045),rgba(0,0,0,.03));
  padding:8px 14px 7px;
}
#oaFilterWrap.show{
  display:block;
}
#oaFilter{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:0 2px 5px;
  max-width:100%;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  touch-action:pan-x;
  user-select:none;
  cursor:grab;
}
#oaFilter.dragging{
  cursor:grabbing;
}
#oaFilter.dragging .oaFilterBtn{
  pointer-events:none;
}
#oaFilter::-webkit-scrollbar{
  display:none;
}
#oaFilterScrollbar{
  display:none;
  height:3px;
  margin:1px 4px 0;
  border-radius:999px;
  background:rgba(148,163,184,.12);
  overflow:hidden;
}
#oaFilterScrollbar.show{
  display:block;
}
#oaFilterScrollbarThumb{
  display:block;
  width:32px;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#5eead4,#8fb4ff);
  box-shadow:0 0 10px rgba(94,234,212,.28);
  transform:translateX(0);
}
.oa-filter-scope{
  flex:0 0 auto;
  color:#8ea6cc;
  font-size:10px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:0 3px;
}
.oaFilterBtn,
.oa-filter-btn{
  flex:0 0 auto;
  min-height:25px;
  max-width:128px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(148,163,184,.14);
  color:#a9bbd7;
  font-size:10.5px;
  font-weight:850;
  cursor:pointer;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:5px;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  scroll-snap-align:start;
}
.oaFilterBtn.active,
.oa-filter-btn.active{
  background:linear-gradient(135deg,rgba(94,234,212,.16),rgba(124,156,255,.15));
  border-color:rgba(94,234,212,.28);
  color:#f4fbff;
  box-shadow:0 10px 22px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.10);
}
.oa-filter-dot{
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:999px;
  background:#5eead4;
  box-shadow:0 0 0 3px rgba(94,234,212,.12);
}
.oa-filter-dot.all{
  background:#8fb4ff;
  box-shadow:0 0 0 3px rgba(143,180,255,.12);
}

#chatList{flex:1;overflow-y:auto;padding:0}
.chat-empty-state{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:28px 18px;
  color:var(--soft);
  text-align:center;
  font-size:13px;
}
.chat-empty-state strong{color:#e8f0fe;font-size:14px}
.chat-empty-state span{max-width:220px;line-height:1.5}
.chat-item-row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 62px;
  align-items:start;
  column-gap:10px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer;transition:.15s;position:relative;
}
.chat-item-row:hover{background:rgba(255,255,255,.04)}
.chat-item-row.active{background:rgba(124,156,255,.12);border-left:3px solid var(--primary)}
.chat-item-row.pinned{background:rgba(245,158,11,.06);border-left:3px solid var(--warning)}
.chat-item-row.spam{opacity:.5}
.chat-item-row.vip{
  border-left:3px solid #f6c453;
  background:
    linear-gradient(135deg,rgba(246,196,83,.10),rgba(93,124,255,.06)),
    rgba(255,255,255,.018);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.chat-item-row.vip.active{
  border-left-color:#facc15;
  background:
    linear-gradient(135deg,rgba(250,204,21,.16),rgba(64,151,255,.12)),
    rgba(124,156,255,.10);
}
.chat-item-row.vip .chat-avatar{
  box-shadow:0 0 0 2px rgba(250,204,21,.28),0 12px 24px rgba(250,204,21,.12);
}
.vip-chat-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  max-width:48px;
  height:18px;
  padding:0 6px;
  border:1px solid rgba(250,204,21,.36);
  border-radius:999px;
  color:#fde68a;
  background:
    linear-gradient(135deg,rgba(250,204,21,.22),rgba(251,146,60,.10)),
    rgba(15,23,42,.72);
  box-shadow:0 6px 16px rgba(250,204,21,.12),inset 0 1px 0 rgba(255,255,255,.12);
  font-size:10px;
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  flex:0 0 auto;
}
.vip-chat-badge span{
  color:#facc15;
  font-size:9px;
  filter:drop-shadow(0 0 5px rgba(250,204,21,.45));
}
.chat-avatar{
  width:38px;height:38px;border-radius:13px;
  background:var(--chat-admin-bubble);
  display:grid;place-items:center;font-weight:800;font-size:14px;
  flex-shrink:0;overflow:hidden;
}
.chat-avatar img{width:100%;height:100%;object-fit:cover}
.chat-avatar-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:inherit;
  background:linear-gradient(135deg,#66e8ff 0%,#7aa8ff 58%,#c8f7ff 100%);
  color:#08213a;
  font-weight:900;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.chat-info{min-width:0;padding-right:0}
.chat-name{font-size:13px;font-weight:700;display:flex;align-items:center;gap:4px;flex-wrap:nowrap;min-width:0}
.chat-display-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-preview{font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.chat-preview.unread{color:#c8d8f0;font-weight:600}
.chat-item-row.new-friend{
  background:linear-gradient(135deg,rgba(255,214,125,.12),rgba(72,139,255,.08));
  border:1px solid rgba(255,214,125,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.chat-item-row.new-friend .chat-avatar{
  box-shadow:0 0 0 2px rgba(255,214,125,.22),0 10px 24px rgba(255,190,92,.12);
}
.chat-preview.new-friend{
  display:flex;
  align-items:center;
  gap:7px;
  color:#f7d77c;
  margin-top:5px;
}
.new-friend-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  padding:3px 8px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,220,130,.18),rgba(255,255,255,.05));
  border:1px solid rgba(255,214,125,.24);
  color:#ffe6a3;
  font-size:11px;
  font-weight:800;
  letter-spacing:0;
  box-shadow:0 8px 18px rgba(255,190,92,.08);
}
.new-friend-mark{
  font-size:8px;
  line-height:1;
  padding:2px 4px;
  border-radius:999px;
  background:#f7d77c;
  color:#111827;
}
.new-friend-copy{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#9fd8ff;
  font-size:11px;
  font-weight:700;
}
.chat-meta{
  min-width:58px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:8px;
  justify-self:end;
  align-self:start;
  padding-top:1px;
}
.chat-time{
  min-width:44px;
  padding:5px 7px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.13);
  background:rgba(3,7,18,.34);
  color:#b9c9e6;
  font-size:11px;
  font-weight:700;
  line-height:1.05;
  white-space:nowrap;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.chat-date-label{
  color:#8ea3c8;
  font-size:9px;
  font-weight:800;
  line-height:1;
}
.chat-clock{
  color:inherit;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
.unread-badge{
  background:linear-gradient(135deg,#fb7185 0%,#ef4444 48%,#b91c1c 100%);
  color:#fff;
  font-size:10px;font-weight:800;border-radius:999px;
  padding:3px 7px;min-width:22px;text-align:center;
  line-height:1;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 18px rgba(239,68,68,.34),inset 0 1px 0 rgba(255,255,255,.22);
}
.status-tag{
  font-size:10px;padding:2px 7px;border-radius:999px;font-weight:700;
}
.status-tag.pending{background:rgba(245,158,11,.2);color:#fcd34d;border:1px solid rgba(245,158,11,.3)}
.status-tag.done{background:rgba(34,197,94,.15);color:#86efac;border:1px solid rgba(34,197,94,.25)}
.oa-tag{font-size:9px;background:var(--primary-soft);color:var(--primary);padding:2px 6px;border-radius:999px;flex-shrink:0}
.chat-list-chip-row{
  display:flex;
  align-items:center;
  gap:3px;
  margin-top:2px;
  margin-bottom:1px;
  min-width:0;
  max-width:100%;
  min-height:16px;
  max-height:36px;
  overflow:hidden;
  flex-wrap:wrap;
  align-content:flex-start;
  white-space:normal;
}
.tag-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:16px;
  font-size:9px;
  line-height:1.1;
  padding:3px 7px;
  border-radius:999px;
  color:#fff;
  font-weight:800;
  letter-spacing:0;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.chat-list-chip-row .status-tag,
.chat-list-chip-row .tag-badge,
.chat-list-chip-row .signup-status-chip{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-list-chip-row .status-tag{
  max-width:92px;
  flex:0 1 auto;
  padding-inline:5px;
}
.chat-list-chip-row .tag-badge{
  max-width:116px;
  flex:0 1 auto;
}
.chat-list-chip-row .signup-status-chip{
  max-width:104px;
  flex:0 1 auto;
  padding:2px 5px;
}
.chat-list-chip-row .signup-status-chip strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-list-chip-row .tag-badge.deposit-issue,
.chat-list-chip-row .tag-badge.forgot-password,
.chat-list-chip-row .tag-badge.slip-notice{
  max-width:112px;
}
.chat-list-chip-row:empty{
  display:none;
}
.chat-item-row .chat-preview{
  margin-top:1px;
}
.tag-badge.deposit-issue{
  color:#fff7ed;
  background:linear-gradient(135deg,#f97316,#c2410c);
  border-color:rgba(251,191,36,.42);
}
.tag-badge.forgot-password{
  max-width:86px;
  color:#fff7ed;
  background:linear-gradient(135deg,#e11d48,#9f1239);
  border-color:rgba(251,113,133,.48);
}
.tag-badge.slip-notice{
  color:#fff5f5;
  background:linear-gradient(135deg,#dc2626,#991b1b);
  border-color:rgba(248,113,113,.46);
}
.tag-badge.slip-notice span{
  padding:1px 4px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg,#fb7185,#dc2626);
  font-size:7px;
  font-weight:900;
  letter-spacing:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 3px 7px rgba(185,28,28,.16);
}
.chat-dot-btn{
  display:none;position:absolute;right:12px;bottom:8px;
  background:var(--glass-2);border:1px solid var(--line);width:26px;height:26px;
  border-radius:8px;cursor:pointer;font-size:14px;color:var(--soft);
  align-items:center;justify-content:center;
}
.chat-item-row:hover .chat-dot-btn{display:flex}
.chat-load-more{padding:10px;text-align:center;font-size:12px;color:var(--soft)}

/* Chat room */
.chat-room-wrap{
  display:flex;flex-direction:column;
  position:relative;
  border-right:1px solid var(--line-2);min-height:0;
  background:var(--chat-room-bg);
  padding-bottom:14px;
}
#chatHeader{
  padding:12px 18px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  background:var(--chat-header-bg);
}
#headerAvatar{
  width:38px;height:38px;border-radius:13px;
  background:var(--chat-admin-bubble);
  display:grid;place-items:center;font-weight:800;font-size:15px;
  flex-shrink:0;overflow:hidden;
}
#headerAvatar img{width:100%;height:100%;object-fit:cover}
.chat-placeholder-avatar,
#headerAvatar.chat-placeholder-avatar{
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(145deg,#182244 0%,#5c79ff 50%,#72e7ff 100%);
  border:1px solid rgba(152,181,255,.38);
  box-shadow:0 10px 24px rgba(55,103,255,.22),inset 0 1px 0 rgba(255,255,255,.18);
}
.chat-placeholder-mark{
  position:relative;
  width:21px;
  height:16px;
  border-radius:8px 8px 8px 4px;
  background:linear-gradient(135deg,#f8fbff,#cfe4ff);
  box-shadow:0 5px 12px rgba(0,0,0,.2),inset 0 -2px 0 rgba(64,100,202,.18);
}
.chat-placeholder-mark::before,
.chat-placeholder-mark::after{
  content:"";
  position:absolute;
  display:block;
}
.chat-placeholder-mark::before{
  left:5px;right:5px;top:5px;height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#4e6fff,#20d9ff);
  box-shadow:0 5px 0 rgba(37,89,230,.6);
}
.chat-placeholder-mark::after{
  right:0;bottom:-4px;
  width:7px;height:7px;
  background:#cfe4ff;
  clip-path:polygon(0 0,100% 0,0 100%);
}
#headerInfo{flex:1;min-width:0}
#headerName{font-weight:700;font-size:16px;letter-spacing:-.02em}
#headerOaName{font-size:12px;color:var(--soft);margin-top:5px;min-height:20px}
.header-oa-pill{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:3px 8px;border-radius:999px;
  background:var(--primary-soft);border:1px solid color-mix(in srgb, var(--primary) 36%, transparent);
  color:#bed2ff;font-size:11px;font-weight:700;line-height:1;
  vertical-align:top;
}
.header-oa-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#61e6ff;box-shadow:0 0 10px rgba(97,230,255,.58);
  flex-shrink:0;
}
#headerActions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.header-btn{
  min-width:86px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--glass-3);color:#c8d8f0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  transition:.15s;
}
.header-btn:hover{background:var(--glass-2)}
.header-btn.status-pending{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.3);color:#fcd34d}
.header-btn.status-done{background:var(--success-soft);border-color:rgba(34,197,94,.3);color:#86efac}
.header-icon-btn{
  width:32px;height:32px;border:1px solid var(--line);background:var(--glass-3);
  border-radius:10px;cursor:pointer;font-size:15px;color:var(--soft);
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.header-icon-btn:hover{background:var(--glass-2);color:#fff}
@media (min-width:1201px){
  .chat-shell.has-inspector #noteToggleBtn{
    display:none!important;
  }
  .chat-shell.has-inspector .rp-status-section{
    display:none!important;
  }
}

#inChatSearch{
  padding:8px 16px;background:rgba(245,215,110,.06);
  border-bottom:1px solid rgba(245,215,110,.15);
  display:none;align-items:center;gap:8px;flex-shrink:0;
}
#inChatSearch.show{display:flex}
#inChatSearchInput{
  flex:1;padding:8px 12px;border:1px solid var(--line);
  background:var(--glass-3);border-radius:10px;color:#fff;font-size:13px;outline:none;
}
.msg-highlight{box-shadow:0 0 0 2px rgba(245,215,110,.5) inset!important;background:rgba(245,215,110,.08)!important}

#messages{
  flex:1;overflow-y:auto;padding:18px 22px;
  display:flex;flex-direction:column;gap:8px;
  overflow-anchor:none;
  scroll-behavior:auto;
}
#messages.messages-scroll-settling{
  visibility:hidden;
}
.msg{
  max-width:70%;padding:10px 13px;border-radius:18px;
  font-size:13px;line-height:1.55;
}
.msgWrap{
  max-width:70%;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:3px 0 8px;
}
.msgWrap.customer{align-self:flex-start;align-items:flex-start}
.msgWrap.admin{align-self:flex-end;align-items:flex-end}
.msgWrap .msg{
  max-width:100%;
  align-self:stretch;
}
.msgHeader{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:min(100%,520px);
  padding:0 8px;
  color:rgba(226,232,240,.72);
  font-size:11.5px;
  line-height:1.2;
  white-space:nowrap;
}
.msgWrap.admin .msgHeader{justify-content:flex-end;text-align:right}
.msgHeader span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:800;
}
.msgHeader em{
  flex:0 0 auto;
  font-style:normal;
  font-weight:800;
  color:rgba(226,232,240,.58);
}
.msg.customer{
  background:rgba(255,255,255,.09);align-self:flex-start;border-radius:4px 18px 18px 18px;
}
.msg.admin{
  background:var(--chat-admin-bubble);
  align-self:flex-end;border-radius:18px 4px 18px 18px;
}
.msg.follow{
  align-self:center;
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
  font-weight:800;
  color:#ffe6a3;
  background:linear-gradient(135deg,rgba(255,214,125,.18),rgba(69,132,255,.12));
  border:1px solid rgba(255,214,125,.28);
  box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
}
.msg-meta{font-size:10px;opacity:.65;margin-top:4px}

#typingIndicator{
  padding:6px 18px;font-size:12px;color:var(--primary);
  background:var(--primary-soft);display:none;flex-shrink:0;
}
#stickerPanel{
  display:none;padding:10px 14px;
  border-top:1px solid var(--line-2);flex-wrap:wrap;gap:8px;
  background:rgba(255,255,255,.03);flex-shrink:0;
}
#stickerPanel.show{display:flex}
.sticker-item{
  width:56px;height:56px;cursor:pointer;border-radius:12px;padding:3px;
  border:2px solid transparent;transition:.15s;
}
.sticker-item:hover{border-color:var(--primary);background:var(--glass-2)}
.sticker-item img{width:100%;height:100%;object-fit:contain}

#replyBox{
  min-height:70px;padding:12px 14px;border:1px solid rgba(255,255,255,.11);
  margin:0 18px 18px;
  display:flex;gap:10px;align-items:center;
  background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(8,13,31,.98));
  border-radius:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.28),0 0 0 1px rgba(124,156,255,.05) inset;
  flex-shrink:0;
}
.reply-icon-btn{
  width:42px;height:42px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--soft);transition:.15s;flex-shrink:0;
}
.reply-icon-btn:hover{background:var(--glass-2);color:#fff}

.reply-script-btn{
  width:auto;
  min-width:78px;
  padding:0 11px;
  gap:6px;
  font-size:12px;
  font-weight:800;
  color:#fcd34d;
  border-color:rgba(245,158,11,.25);
  background:rgba(245,158,11,.1);
}
.reply-script-btn span{line-height:1;white-space:nowrap}
.reply-script-btn:hover{color:#fff;background:rgba(245,158,11,.18)}
#replyInput{
  flex:1;height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.12);
  border-radius:14px;background:rgba(255,255,255,.07);color:#fff;font-size:13px;outline:none;
  min-width:0;
}
#replyInput:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
#replyInput::placeholder{color:rgba(255,255,255,.25)}
#sendBtn{
  height:44px;min-width:58px;padding:0 18px;border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font-weight:700;font-size:13px;border:none;cursor:pointer;
  box-shadow:0 8px 20px var(--primary-shadow);transition:.18s;flex-shrink:0;
}
#sendBtn:hover{transform:translateY(-1px)}
#sendBtn:disabled{opacity:.5;cursor:not-allowed;transform:none}

#emptyState{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:var(--soft);
  min-height:360px;
}
#emptyState .empty-icon{font-size:48px;opacity:.4}
#emptyState .chat-empty-icon{
  width:64px;
  height:64px;
  border-radius:22px;
  display:grid;
  place-items:center;
  opacity:.82;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.2),transparent 30%),
    linear-gradient(145deg,rgba(21,32,65,.92),rgba(90,121,255,.72) 54%,rgba(87,219,255,.9));
  border:1px solid rgba(142,172,255,.28);
  box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 34px rgba(92,121,255,.18);
}
#emptyState .chat-empty-icon .chat-placeholder-mark{
  width:32px;
  height:24px;
  border-radius:12px 12px 12px 5px;
}
#emptyState .chat-empty-icon .chat-placeholder-mark::before{
  left:7px;right:7px;top:7px;height:3px;
  box-shadow:0 7px 0 rgba(37,89,230,.58);
}
#emptyState .chat-empty-icon .chat-placeholder-mark::after{
  bottom:-6px;width:10px;height:10px;
}

/* Right panel */
#rightPanel{
  display:none;flex-direction:column;
  overflow-y:auto;background:rgba(255,255,255,.025);
}
#rightPanel.show{display:flex}
.rp-top{
  padding:18px 16px 14px;border-bottom:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.rp-avatar{
  width:58px;height:58px;border-radius:18px;
  background:var(--chat-admin-bubble);
  display:grid;place-items:center;font-weight:800;font-size:22px;overflow:hidden;
}
.rp-avatar img{width:100%;height:100%;object-fit:cover}
.rp-name{font-weight:700;font-size:16px;text-align:center;letter-spacing:-.02em}
.rp-section{
  margin:10px 12px 0;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.rp-section-title{font-size:11px;color:var(--soft);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.status-btn-group{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  padding:4px;border-radius:14px;background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.06);
}
.status-btn-group button{
  min-height:36px;padding:8px 4px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:#c8d8f0;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  transition:.15s;
}
.status-btn-group button.active-pending{background:var(--warning-soft);border-color:rgba(245,158,11,.3);color:#fcd34d}
.status-btn-group button.active-done{background:var(--success-soft);border-color:rgba(34,197,94,.3);color:#86efac}
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;padding:8px 2px;color:#d7e5ff;
}
.toggle-row + .toggle-row{border-top:1px solid rgba(255,255,255,.055)}
.toggle-switch{position:relative;width:40px;height:22px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;inset:0;background:rgba(255,255,255,.15);
  border-radius:999px;cursor:pointer;transition:.25s;
}
.toggle-slider:before{
  content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.25s;
}
input:checked + .toggle-slider{background:var(--warning)}
input:checked + .toggle-slider:before{transform:translateX(18px)}
.pin-slider:checked + .toggle-slider{background:#a78bfa}
.spam-slider:checked + .toggle-slider{background:var(--danger)}

#tagInput{
  display:flex;flex-wrap:wrap;gap:5px;padding:9px 11px;
  border:1px solid rgba(255,255,255,.1);border-radius:13px;cursor:text;
  background:rgba(255,255,255,.055);min-height:42px;align-items:center;
}
#tagRealInput{border:none;outline:none;font-size:13px;min-width:80px;flex:1;background:transparent;color:#fff}
#tagRealInput::placeholder{color:rgba(255,255,255,.25)}
.tag-chip,
.tagChip{
  color:#fff;
  min-height:24px;
  padding:4px 9px 4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.tag-chip button,
.tagChip button{
  width:16px;
  height:16px;
  border:0;
  border-radius:50%;
  background:rgba(15,23,42,.22);
  color:#fff;
  cursor:pointer;
  font-size:12px;
  line-height:16px;
  padding:0;
}
.note-area{
  width:100%;min-height:88px;padding:11px 12px;
  border:1px solid rgba(255,255,255,.1);border-radius:14px;
  background:rgba(255,255,255,.055);color:#fff;font:inherit;font-size:13px;
  resize:none;outline:none;
}
.note-area:focus{border-color:var(--primary)}
.note-area::placeholder{color:rgba(255,255,255,.25)}
.note-save-btn{
  margin-top:8px;width:100%;padding:9px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font:inherit;font-weight:700;font-size:13px;cursor:pointer;
  transition:.18s;
}
.note-save-btn:hover{transform:translateY(-1px)}
.note-save-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ══════════════════════════════════════════════════════════════
   TEAM / OA / SETTINGS PAGES
══════════════════════════════════════════════════════════════ */
.page-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.page-header h2{font-size:22px;font-weight:800;letter-spacing:-.03em}
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  padding:12px 14px;text-align:left;font-size:12px;
  color:var(--soft);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--line);
}
.data-table td{
  padding:12px 14px;font-size:13px;border-bottom:1px solid var(--line-2);
}
.data-table tr:hover td{background:rgba(255,255,255,.03)}
.role-badge{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}
.role-badge.owner{background:rgba(245,158,11,.18);color:#fcd34d}
.role-badge.admin{background:var(--primary-soft);color:var(--primary)}
.role-badge.staff,.role-badge.agent{background:rgba(255,255,255,.08);color:var(--soft)}
.oa-info-box{
  padding:14px 16px;border-radius:14px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);
  font-size:13px;margin-bottom:16px;color:#86efac;
}

/* Campaign */
.campaign-shell{display:grid;grid-template-columns:minmax(0,1.5fr) 360px;gap:16px;margin-bottom:16px}
.campaign-composer,.campaign-side,.campaign-history-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  border:1px solid rgba(148,163,184,.14);
}
.campaign-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.campaign-field{display:flex;flex-direction:column;gap:7px}
.campaign-field span{
  font-size:11px;color:var(--soft);font-weight:800;text-transform:uppercase;letter-spacing:.07em;
}
.campaign-field input,.campaign-field select,.campaign-field textarea{
  width:100%;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  background:rgba(6,12,28,.72);color:#fff;font:inherit;font-size:13px;outline:none;
  padding:11px 13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.campaign-field textarea{resize:vertical;min-height:150px;line-height:1.6}
.campaign-message{margin-top:4px}
.campaign-warning{
  margin:12px 0 14px;padding:11px 13px;border-radius:14px;
  background:linear-gradient(135deg,rgba(247,200,91,.14),rgba(255,172,68,.05));
  border:1px solid rgba(247,200,91,.22);color:#f8d58a;font-size:12px;line-height:1.55;
}
.campaign-flex-editor{
  margin-top:12px;padding:14px;border-radius:18px;
  background:linear-gradient(180deg,rgba(79,70,229,.12),rgba(15,23,42,.28));
  border:1px solid rgba(129,140,248,.2);
}
.campaign-flex-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;padding:9px 10px;border-radius:14px;
  background:rgba(6,12,28,.48);border:1px solid rgba(255,255,255,.08);
}
.campaign-flex-toolbar span{
  color:#cfe7ff;font-size:12px;font-weight:900;letter-spacing:.02em;
}
.campaign-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.campaign-side{display:flex;flex-direction:column;gap:14px}
.campaign-stat{
  display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:8px;
  padding:14px;border-radius:16px;background:rgba(93,124,255,.1);
  border:1px solid rgba(93,124,255,.22);
}
.campaign-stat span{font-size:12px;color:#a9bbff;font-weight:800}
.campaign-stat strong{font-size:34px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.campaign-stat small{font-size:12px;color:var(--soft);padding-bottom:4px}
.campaign-samples,.campaign-log-list{display:flex;flex-direction:column;gap:8px}
.campaign-sample{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
}
.campaign-sample-avatar{
  width:36px;height:36px;border-radius:12px;overflow:hidden;flex-shrink:0;
  display:grid;place-items:center;background:linear-gradient(135deg,#5d7cff,#41d7ff);
  color:#fff;font-weight:900;
}
.campaign-sample-avatar img{width:100%;height:100%;object-fit:cover}
.campaign-sample strong{display:block;font-size:13px}
.campaign-sample small{display:block;font-size:11px;color:var(--soft);margin-top:2px}
.empty-mini{
  padding:18px;border-radius:14px;text-align:center;color:var(--soft);
  border:1px dashed rgba(255,255,255,.12);font-size:13px;
}
.campaign-log{
  display:grid;grid-template-columns:180px minmax(0,1fr) 220px;gap:12px;align-items:center;
  padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.campaign-log.ok{border-left:3px solid #32d583}
.campaign-log.warn{border-left:3px solid #f7c85b}
.campaign-log.bad{border-left:3px solid #ef4444}
.campaign-log strong{font-size:13px}
.campaign-log small{display:block;color:var(--soft);font-size:11px;margin-top:3px}
.campaign-log-msg{font-size:13px;color:#dbe7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.campaign-log-stat{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.campaign-log-stat span{font-size:11px;color:var(--soft);padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.055)}

/* Settings */
.settings-shell{display:grid;grid-template-columns:200px 1fr;gap:0;height:100%}
.settings-nav{
  border-right:1px solid var(--line-2);padding:12px 0;
  background:rgba(255,255,255,.02);
}
.settings-nav-title{
  padding:8px 16px;font-size:11px;color:var(--soft);
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;
}
.settings-nav-item{
  padding:10px 16px;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:8px;color:#c8d8f0;transition:.15s;
}
.settings-nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.settings-nav-item.active{background:var(--primary-soft);color:var(--primary)}
.settings-content{overflow-y:auto;padding:20px}
.settings-content h2{font-size:18px;font-weight:800;margin-bottom:18px}
.settings-tab{display:none}
.settings-tab.active{display:block}
.theme-panel{position:relative;overflow:hidden}
.theme-panel::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  opacity:.75;
}
.theme-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;
}
.theme-panel-head h3{font-size:16px;font-weight:850;margin:2px 0 0;color:#f6f9ff}
#themeActiveLabel{
  font-size:11px;font-weight:850;color:var(--primary);
  padding:5px 10px;border-radius:999px;background:var(--primary-soft);
  border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);
}
.theme-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:10px;
}
.theme-choice{
  min-height:76px;border-radius:14px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);color:#dfe8ff;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:12px;text-align:left;
  font-size:12px;font-weight:800;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.theme-choice:hover{
  transform:translateY(-1px);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.065);
}
.theme-choice.active{
  border-color:color-mix(in srgb,var(--primary) 58%,transparent);
  background:linear-gradient(135deg,var(--primary-soft),rgba(255,255,255,.04));
  box-shadow:0 12px 28px rgba(0,0,0,.22),0 0 0 1px color-mix(in srgb,var(--primary) 15%,transparent) inset;
  color:#fff;
}
.theme-swatch{
  width:38px;height:38px;border-radius:12px;flex:0 0 38px;
  background:
    radial-gradient(circle at 28% 28%,var(--sw1),transparent 34%),
    linear-gradient(135deg,var(--sw2),var(--sw3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px rgba(0,0,0,.24);
}
.theme-note{
  margin-top:10px;font-size:11px;line-height:1.6;color:var(--soft);
}
.store-color-dot{
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;transition:.15s;
}
.store-color-dot.selected{border-color:#fff;transform:scale(1.15)}

/* Report */
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.report-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.report-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);
}
.report-list li span{font-size:13px;color:var(--soft)}
.report-list li strong{font-size:14px;font-weight:700}
.report-cycle-text{font-size:12px;color:var(--soft);margin-bottom:12px}

/* ══════════════════════════════════════════════════════════════
   MODALS & POPUPS
══════════════════════════════════════════════════════════════ */
.modal,#qrPopup,#previewPopup{
  display:none;position:fixed;inset:0;
  background:rgba(5,8,20,.7);z-index:500;
  align-items:center;justify-content:center;
}
.modal.show,#qrPopup.show,#previewPopup.show{display:flex}
.modal-box{
  background:#0d1832;border:1px solid rgba(255,255,255,.12);
  border-radius:26px;padding:26px;width:420px;max-width:92vw;
  box-shadow:var(--shadow);animation:popIn .22s ease;
}
.modal-box h3{font-size:20px;font-weight:800;margin-bottom:18px;letter-spacing:-.03em}
.modal-box input,.modal-box textarea{
  width:100%;padding:11px 14px;font-size:13px;margin-bottom:12px;
  background:var(--glass-3);border:1px solid var(--line);border-radius:12px;color:#fff;outline:none;
}
.modal-box input:focus,.modal-box textarea:focus{border-color:var(--primary)}
.modal-box input::placeholder,.modal-box textarea::placeholder{color:rgba(255,255,255,.25)}
.modal-box textarea{height:78px;resize:none}
.modal-btns{display:flex;gap:8px;margin-top:6px}
.modal-btns button{flex:1;padding:11px;border:none;border-radius:14px;cursor:pointer;font:inherit;font-size:14px;font-weight:700}
.btn-confirm{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;transition:.18s}
.btn-confirm:hover{transform:translateY(-1px)}
.btn-confirm:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-cancel{background:rgba(255,255,255,.08);color:#c8d8f0}
#modalError,#oaModalError{color:#ff8080;font-size:12px;margin-top:6px}

/* QR Popup */
#qrPopupBox,#previewBox{
  background:#0d1832;border:1px solid rgba(255,255,255,.12);
  border-radius:26px;width:92%;max-width:480px;max-height:82vh;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
#qrPopupHeader,#previewBoxHeader{
  padding:16px 18px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
#qrPopupHeader h3,#previewBoxHeader h3{font-size:16px;font-weight:800}
#qrPopupClose,#previewBoxHeader button{background:none;border:none;font-size:18px;cursor:pointer;color:var(--soft)}
#qrPopupSearch{padding:10px 14px;border-bottom:1px solid var(--line-2)}
#qrPopupSearch input{
  width:100%;padding:9px 12px;border:1px solid var(--line);
  background:var(--glass-3);border-radius:12px;color:#fff;font-size:13px;outline:none;
}
#qrPopupList{flex:1;overflow-y:auto;padding:6px}
#previewBoxMsgs{flex:1;overflow-y:auto;background:rgba(0,0,0,.2);display:flex;flex-direction:column;gap:8px;padding:14px}
.qr-popup-item{
  padding:12px;border:1px solid transparent;border-radius:14px;cursor:pointer;
  transition:.15s;
}
.qr-popup-item:hover{background:rgba(255,255,255,.05);border-color:var(--line)}
.qr-popup-item-title{font-size:13px;font-weight:700}
.qr-popup-item-msg{font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
#qrPopupAdd{
  padding:12px 14px;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:8px;flex-shrink:0;
}
#qrPopupAdd input,#qrPopupAdd textarea{
  width:100%;padding:9px 11px;font-size:12px;
  background:var(--glass-3);border:1px solid var(--line);border-radius:10px;color:#fff;outline:none;
}
#qrPopupAdd textarea{height:56px;resize:none}
#qrPopupAddBtn{
  padding:9px;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;border:none;border-radius:10px;cursor:pointer;font:inherit;font-weight:700;
}

.qr-premium-overlay{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:
    radial-gradient(circle at 20% 0%,rgba(250,204,21,.12),transparent 32%),
    radial-gradient(circle at 85% 10%,rgba(96,165,250,.16),transparent 34%),
    rgba(2,6,23,.78);
  backdrop-filter:blur(12px);
}
.qr-premium-box{
  width:min(94vw,560px);
  max-height:84vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(250,204,21,.20);
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(30,41,59,.96),rgba(8,13,29,.98)),
    #10162a;
  box-shadow:0 28px 80px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04) inset;
}
.qr-premium-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(250,204,21,.10),rgba(59,130,246,.08) 58%,rgba(255,255,255,.02));
}
.qr-premium-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}
.qr-premium-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#111827;
  background:linear-gradient(135deg,#facc15,#f97316);
  box-shadow:0 10px 26px rgba(250,204,21,.28);
}
.qr-premium-title strong{
  display:block;
  color:#fff;
  font-size:17px;
  font-weight:900;
}
.qr-premium-title small{
  display:block;
  margin-top:2px;
  color:#9fb1d1;
  font-size:11px;
  font-weight:600;
}
.qr-premium-close{
  width:36px;
  height:36px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  color:#cbd5e1;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  font-size:16px;
  transition:.15s;
}
.qr-premium-close:hover{
  color:#fff;
  border-color:rgba(250,204,21,.34);
  background:rgba(250,204,21,.10);
}
.qr-premium-tabs{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  margin:14px 16px 12px;
  padding:8px;
  min-height:56px;
  overflow-x:auto;
  border:1px solid rgba(148,163,184,.16);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(15,23,42,.48));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 28px rgba(0,0,0,.18);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  touch-action:pan-x;
  user-select:none;
}
.qr-premium-tabs::-webkit-scrollbar{display:none}
.qr-premium-tabs.dragging{cursor:grabbing;scroll-behavior:auto}
.qr-premium-tab{
  flex:0 0 auto;
  min-width:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:13px;
  color:#aebbd4;
  background:transparent;
  cursor:pointer;
  font:inherit;
  font-size:12px;
  font-weight:900;
  transition:.18s;
  touch-action:pan-x;
}
.qr-premium-tab-dot{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--tab-color,#facc15);
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
.qr-premium-tab span{
  max-width:116px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.qr-premium-tab em{
  min-width:19px;
  padding:2px 6px;
  border-radius:999px;
  color:#fff7cc;
  background:rgba(250,204,21,.12);
  font-style:normal;
  font-size:10px;
  text-align:center;
}
.qr-premium-tab:hover,.qr-premium-tab.active{
  color:#fff;
  border-color:rgba(250,204,21,.28);
  background:linear-gradient(135deg,rgba(250,204,21,.16),rgba(96,165,250,.08));
  box-shadow:0 10px 22px rgba(0,0,0,.20),0 0 0 1px rgba(255,255,255,.045) inset;
}
.qr-premium-list{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  height:clamp(160px,26vh,260px);
  overflow-y:auto;
  margin:4px 16px 16px;
  padding:14px;
  border:1px solid rgba(148,163,184,.13);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(15,23,42,.58),rgba(10,16,32,.48));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  isolation:isolate;
}
.qr-premium-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 13px 13px 14px;
  margin-bottom:10px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;
}
.qr-premium-item:hover{
  transform:translateY(-1px);
  border-color:rgba(250,204,21,.36);
  background:linear-gradient(135deg,rgba(250,204,21,.12),rgba(59,130,246,.08));
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}
.qr-premium-item-info{min-width:0;flex:1}
.qr-premium-item-title{
  display:inline-flex;
  max-width:100%;
  align-items:center;
  padding:4px 9px;
  border:1px solid rgba(250,204,21,.24);
  border-radius:999px;
  color:#fde68a;
  background:rgba(250,204,21,.08);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qr-premium-item-store{
  display:inline-flex;
  max-width:100%;
  margin:6px 0 0;
  color:#9fb1d1;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qr-premium-item-msg{
  margin-top:5px;
  color:#eef2ff;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.qr-premium-delete{
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  opacity:.70;
  transition:.15s;
}
.qr-premium-delete:hover{
  opacity:1;
  border-color:rgba(248,113,113,.34);
  background:rgba(248,113,113,.12);
}
.qr-premium-empty{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#8da4c8;
  text-align:center;
  font-size:13px;
}
.qr-premium-empty:before{
  content:'';
  width:42px;
  height:42px;
  margin-bottom:8px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(250,204,21,.18),rgba(96,165,250,.12));
  border:1px solid rgba(250,204,21,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}
.qr-premium-empty strong{color:#e2e8f0;font-size:14px}
.qr-premium-empty span{color:#91a3c2;font-size:12px}
.qr-premium-add{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "title tab"
    "input input"
    "msg msg"
    "btn btn";
  gap:8px 10px;
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(15,23,42,.66),rgba(15,23,42,.92));
}
.qr-premium-add-title{
  grid-area:title;
  display:flex;
  align-items:center;
  gap:7px;
  color:#cbd7f2;
  font-size:12px;
  font-weight:900;
  min-width:0;
}
.qr-premium-add-title span{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:8px;
  color:#111827;
  background:linear-gradient(135deg,#facc15,#60a5fa);
  box-shadow:0 8px 18px rgba(250,204,21,.16);
}
.qr-premium-store-label{
  grid-area:tab;
  justify-self:end;
  align-self:center;
  max-width:min(280px,42vw);
  padding:5px 10px;
  border:1px solid rgba(250,204,21,.20);
  border-radius:999px;
  color:#fde68a;
  background:rgba(250,204,21,.075);
  font-size:10.5px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qr-premium-add input,.qr-premium-add textarea{
  width:100%;
  border:1px solid rgba(148,163,184,.22);
  border-radius:13px;
  outline:none;
  color:#fff;
  background:rgba(255,255,255,.055);
  font:inherit;
  font-size:12.5px;
  font-weight:650;
  transition:.15s;
}
.qr-premium-add input{grid-area:input;padding:10px 12px}
.qr-premium-add textarea{
  grid-area:msg;
  min-height:58px;
  height:58px;
  padding:10px 12px;
  resize:none;
  line-height:1.38;
}
.qr-premium-add input:focus,.qr-premium-add textarea:focus{
  border-color:rgba(250,204,21,.46);
  box-shadow:0 0 0 3px rgba(250,204,21,.10);
}
.qr-premium-add input::placeholder,.qr-premium-add textarea::placeholder{color:rgba(203,213,225,.42)}
.qr-premium-add button{
  grid-area:btn;
  min-height:42px;
  border:none;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,#f59e0b,#ef4444 48%,#4f46e5);
  cursor:pointer;
  font:inherit;
  font-size:13.5px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(239,68,68,.24);
  transition:.15s;
}
.qr-premium-add button:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(239,68,68,.31);
}
.qr-premium-add button:disabled{
  cursor:wait;
  opacity:.72;
  transform:none;
}
@media(max-width:520px){
  .qr-premium-overlay{padding:10px}
  .qr-premium-box{width:100%;max-height:88vh;border-radius:20px}
  .qr-premium-header{padding:15px}
  .qr-premium-title small{display:none}
  .qr-premium-tabs{margin:0 12px 10px;padding:7px;min-height:52px;max-width:calc(100% - 24px)}
  .qr-premium-tab{min-height:36px;padding:8px 11px}
  .qr-premium-tab span{max-width:88px}
  .qr-premium-list{height:clamp(145px,24vh,220px);margin:4px 12px 12px;padding:10px}
  .qr-premium-add{
    grid-template-columns:1fr;
    grid-template-areas:"title" "tab" "input" "msg" "btn";
    gap:8px;
    padding:11px 12px 12px;
  }
  .qr-premium-store-label{justify-self:start;max-width:100%}
  .qr-premium-add textarea{min-height:58px;height:58px}
  .qr-premium-add button{min-height:42px}
}

/* Context menu */
#ctxMenu{
  display:none;position:fixed;
  background:#0d1832;border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:6px;min-width:180px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:300;
}
.ctx-item{
  padding:10px 14px;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:10px;border-radius:10px;
  color:#c8d8f0;transition:.15s;
}
.ctx-item:hover{background:rgba(255,255,255,.07)}
.ctx-item.danger{color:var(--danger)}
.ctx-sep{height:1px;background:var(--line-2);margin:4px 0}

/* Store perm modal */
#storePermModal .modal-box{width:460px}

/* ══════════════════════════════════════════════════════════════
   RATING POPUP — spec: dark glass + luxury
══════════════════════════════════════════════════════════════ */
#ratingPopup{
  display:none;position:fixed;inset:0;
  background:rgba(4,7,18,.78);backdrop-filter:blur(12px);
  align-items:center;justify-content:center;z-index:600;
}
.rating-card{
  background:linear-gradient(180deg,#0f1e3d 0%,#090f22 100%);
  border:1px solid rgba(255,255,255,.13);
  border-radius:28px;padding:32px 28px;width:min(390px,92vw);
  text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(124,156,255,.08);
  animation:cardPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cardPop{
  from{transform:scale(.88) translateY(20px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
.rating-card h3{font-size:18px;font-weight:800;margin:10px 0 4px}
#ratingPopupAdminName{font-size:13px;color:var(--soft);margin-bottom:18px}
#ratingStars{
  display:flex;justify-content:center;gap:10px;
  margin-bottom:16px;font-size:36px;cursor:pointer;letter-spacing:2px;
}
#ratingStars span{
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .15s;
  filter:grayscale(1) opacity(.35);
  display:inline-block;
}
#ratingStars span.selected, #ratingStars span:hover{
  filter:none;transform:scale(1.18);
}
#ratingAlreadyDone{
  display:none;border-radius:12px;padding:10px 14px;
  font-size:13px;margin-bottom:14px;
  border:1px solid rgba(255,255,255,.15);
}
#ratingComment{
  width:100%;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;font-size:13px;resize:none;outline:none;
  color:#fff;background:var(--glass-3);font:inherit;margin-bottom:14px;
}
#ratingComment::placeholder{color:rgba(255,255,255,.25)}
.rating-btns{display:flex;gap:10px}
#ratingSubmitBtn{
  flex:2;padding:12px;border:none;border-radius:14px;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer;
  box-shadow:0 10px 28px rgba(245,158,11,.3);transition:.18s;
}
#ratingSubmitBtn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(245,158,11,.4)}
#ratingSubmitBtn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ══════════════════════════════════════════════════════════════
   TOASTS & NOTIFICATIONS
══════════════════════════════════════════════════════════════ */
#toast{
  position:fixed;top:18px;right:18px;
  background:#0d1832;border:1px solid rgba(255,255,255,.12);
  border-radius:16px;color:#fff;padding:13px 16px;min-width:220px;
  display:none;z-index:800;
  box-shadow:0 20px 50px rgba(0,0,0,.5);animation:slideIn .25s ease;
}
#toast .toast-name{font-weight:700;color:var(--primary)}
#toast .toast-msg{color:var(--soft);font-size:12px;margin-top:3px}
#sysToast{
  display:none;position:fixed;top:18px;right:18px;
  z-index:1200;padding:9px 14px;border-radius:999px;font-size:12px;font-weight:800;
  color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);
  pointer-events:none;transition:opacity .22s, transform .22s;max-width:min(280px,calc(100vw - 28px));
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);
  animation:toastDrop .2s ease;
}
@keyframes toastDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){#sysToast{top:12px;right:12px;left:auto;max-width:calc(100vw - 24px);}}

/* Alert popup */
#alertPopup{
  position:fixed;inset:0;background:rgba(5,8,20,.65);backdrop-filter:blur(6px);
  display:grid;place-items:center;z-index:700;
}
.popup-card{
  width:min(420px,92vw);padding:26px;border-radius:28px;
  background:#0d1832;border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);animation:popIn .22s ease;
}
.popup-badge{
  display:inline-flex;padding:7px 12px;border-radius:999px;
  background:var(--warning-soft);color:#fcd34d;font-size:12px;font-weight:800;
}
.popup-card h3{font-size:26px;font-weight:800;margin:14px 0 8px;letter-spacing:-.03em}
.popup-card p{margin:0;color:var(--soft)}
.popup-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════════════ */
@keyframes popIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideUp{from{transform:translateX(-50%) translateY(12px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile / Tablet
══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1280px) ────────────────────────────────────────*/
@media (max-width:1280px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .dashboard-grid,.report-grid,.settings-grid{grid-template-columns:1fr}
  .chat-shell{grid-template-columns:300px 1fr}
  #rightPanel{display:none!important}
}

/* ── Mobile (≤768px) ─────────────────────────────────────────*/
@media (max-width:768px){

  /* Layout */
  .app-shell{
    grid-template-columns:1fr;
    grid-template-rows:1fr 60px; /* content + bottom nav */
    grid-template-areas:"main" "nav";
    height:100dvh;
    overflow:hidden;
  }
  .main-area{
    grid-area:main;
    overflow-y:auto;
  }

  /* Sidebar → hide completely */
  .sidebar{display:none!important}

  /* ── Bottom Navigation Bar ─────────────────────────────── */
  .bottom-nav{
    grid-area:nav;
    display:flex!important;
    align-items:stretch;
    justify-content:space-around;
    background:rgba(8,12,26,.98);
    border-top:1px solid rgba(255,255,255,.1);
    padding:0;
    z-index:200;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }
  .bottom-nav-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;padding:8px 4px;border:none;background:transparent;
    color:rgba(255,255,255,.45);font-size:10px;font-weight:700;
    font-family:inherit;cursor:pointer;transition:.15s;
    -webkit-tap-highlight-color:transparent;
  }
  .bottom-nav-btn .bn-icon{font-size:20px;line-height:1}
  .bottom-nav-btn.active{color:var(--primary)}
  .bottom-nav-btn .nav-badge{
    position:absolute;top:6px;right:calc(50% - 18px);
    font-size:9px;padding:1px 5px;
  }

  /* Topbar */
  .topbar{
    padding:10px 14px 8px;
    flex-wrap:wrap;gap:8px;
  }
  .topbar-left h2{font-size:18px}
  .topbar-actions{gap:6px}
  .chip-row{flex-wrap:wrap;gap:5px}
  .chip{padding:6px 10px;font-size:11px}

  /* Stats grid → 2 columns */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:14px 16px;border-radius:16px}
  .stat-value{font-size:26px;margin-top:6px}
  .stat-trend{margin-top:4px;font-size:11px}
  .dashboard-grid{grid-template-columns:1fr;gap:12px}
  .panel{border-radius:18px;padding:16px}
  .panel-head h3{font-size:16px}
  .bars{height:120px;gap:8px}
  .rank-item{padding:10px 12px;border-radius:12px;gap:9px}
  .rank-badge{width:26px;height:26px;border-radius:8px;font-size:12px}
  .rank-score{font-size:15px}
  .star-bar{font-size:11px}
  .stat-card{padding:12px}
  .stat-value{font-size:28px}

  /* Dashboard grid → 1 column */
  .dashboard-grid,.report-grid,.settings-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* KPI / ranking cards */
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}

  /* Panels */
  .panel{padding:14px;border-radius:16px}
  .panel-head h3{font-size:14px}

  /* ── Chat page ─────────────────────────────────────────── */
  .chat-shell{
    grid-template-columns:1fr;
    height:calc(100dvh - 60px - 57px); /* minus bottom nav + topbar */
  }
  /* Chat list full width by default */
  .chat-list-panel{
    position:absolute;
    top:57px; left:0; right:0; bottom:60px;
    z-index:100;
    background:var(--bg);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  .chat-list-panel.slide-out{
    transform:translateX(-100%);
  }
  /* Chat window hidden until room selected */
  .chat-window{
    position:absolute;
    top:57px; left:0; right:0; bottom:60px;
    z-index:100;
    background:var(--bg);
    transform:translateX(100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  .chat-window.slide-in{
    transform:translateX(0);
  }
  /* Back button in chat header */
  .header-icon-btn{min-width:36px;min-height:36px;font-size:16px}
  .chat-back-btn{
    display:flex!important;
    align-items:center;gap:8px;
    padding:6px 10px;border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:#fff;font:inherit;font-size:13px;
    cursor:pointer;flex-shrink:0;
  }

  /* Reply input area */
  .reply-bar{padding:10px 12px;gap:8px}
  .reply-bar input{font-size:14px;padding:10px 13px}

  /* Chat items */
  .chat-item-row{
    grid-template-columns:40px minmax(0,1fr) 58px;
    padding:10px 12px;
  }
  .chat-meta{min-width:54px;gap:7px}
  .chat-avatar{width:40px;height:40px;border-radius:13px;font-size:15px}
  .chat-name{font-size:13px}
  .chat-preview{font-size:12px}

  /* Right panel always hidden */
  #rightPanel{display:none!important}

  /* ── Report charts scroll ─────────────────────────────── */
  #rcBarWrap{min-width:400px!important}
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important}

  /* Settings */
  .settings-layout{flex-direction:column}
  .settings-nav{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line-2);padding:8px}
  .settings-nav-item{white-space:nowrap;padding:8px 14px}
  .campaign-grid{grid-template-columns:1fr}
  .campaign-actions{justify-content:stretch}
  .campaign-actions button{flex:1}

  /* Ranking list */
  .rank-item{padding:10px 12px}

  /* Modals */
  .modal-box{
    width:calc(100vw - 32px)!important;
    max-height:90dvh!important;
    border-radius:20px!important;
  }

  /* Alert popup */
  #alertPopup .popup-card{
    width:calc(100vw - 32px)!important;
    border-radius:20px!important;
  }

  /* Page content padding */
  .page-content{padding:14px 12px}
}

  /* ── Note bar mobile ─────────────────────────────────────── */
  #noteBar{padding:10px 12px;gap:6px}
  #noteInput{font-size:13px;padding:8px 11px}
  #notesList{max-height:90px}
  #noteToggleBtn{font-size:14px;padding:5px 8px}

/* ── Small mobile (≤480px) ────────────────────────────────── */
@media (max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr!important}
  .topbar-left h2{font-size:16px}
}

#ratingComment, .rating-comment{
  width:100%;padding:11px 13px;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  background:rgba(255,255,255,.06);color:#fff;
  font:inherit;font-size:13px;resize:none;outline:none;
  margin-bottom:14px;transition:.2s;
}
#ratingComment:focus,.rating-comment:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,156,255,.1);
}
#ratingComment::placeholder,.rating-comment::placeholder{color:rgba(255,255,255,.25)}

/* ── Internal Note Bar ────────────────────────────────────────*/
#noteBar{
  flex-direction:column;gap:8px;
  padding:12px 14px;
  background:rgba(245,158,11,.04);
  border-top:1px solid rgba(245,158,11,.2);
  flex-shrink:0;
}
#notesList{
  max-height:120px;overflow-y:auto;
  display:flex;flex-direction:column;gap:5px;
}
#noteInput{
  width:100%;padding:9px 13px;border-radius:12px;
  background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.25);
  color:#fcd34d;font:inherit;font-size:13px;
  outline:none;resize:none;line-height:1.5;
  transition:.2s;
}
#noteInput:focus{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.14)}
#noteInput::placeholder{color:rgba(245,158,11,.35)}

/* ── Rating Popup ─────────────────────────────────────────────*/
#ratingOverlay{backdrop-filter:blur(8px)}
.star-btn{
  cursor:pointer;transition:transform .1s;display:inline-block;
  -webkit-tap-highlight-color:transparent;
}
.star-btn:hover{transform:scale(1.2)}
@keyframes popIn{
  from{opacity:0;transform:scale(.88) translateY(14px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* ████ LOGIN — MOBILE COLOR FIX (frozen) ████ */
@media (max-width: 767px) {
  body {
    background-attachment: scroll;
  }
  .login-box {
    background: rgba(16,22,40,.88) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
  .login-submit {
    box-shadow: 0 10px 20px rgba(76,102,255,.22) !important;
  }
}
/* END LOGIN MOBILE FIX */

/* ═══════════════════════════════════════════════════════════
   OPS DASHBOARD STYLES
═══════════════════════════════════════════════════════════ */
.ops-hcard{background:#161b24;border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:12px 14px;transition:border-color .2s;}
.ops-hcard.ok{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.03);}
.ops-hcard.warn{border-color:rgba(234,179,8,.3);}
.ops-hcard.crit{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.04);}
.ops-hc-label{font-size:9px;color:#64748b;font-family:monospace;letter-spacing:.5px;margin-bottom:6px;}
.ops-hc-row{display:flex;align-items:center;gap:6px;}
.ops-hc-val{font-size:12px;font-weight:600;color:#e2e8f0;}
.ops-hc-sub{font-size:10px;color:#64748b;margin-top:4px;font-family:monospace;}
.ops-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.ops-dot.green{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.5);}
.ops-dot.yellow{background:#eab308;box-shadow:0 0 6px rgba(234,179,8,.5);}
.ops-dot.red{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.5);animation:ops-pulse 1.2s infinite;}
.ops-dot.gray{background:#64748b;}
@keyframes ops-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.ops-metric{background:#161b24;border-radius:5px;padding:10px;}
.ops-metric-label{font-size:9px;color:#64748b;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;font-family:monospace;}
.ops-metric-val{font-size:20px;font-weight:700;font-family:monospace;color:#e2e8f0;}
.ops-metric-val.ok{color:#22c55e;}
.ops-metric-val.danger{color:#ef4444;}
.ops-metric-val.warn{color:#eab308;}
.ops-qcard{background:#161b24;border-radius:5px;padding:10px;text-align:center;border:1px solid transparent;}
.ops-qalert{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.04);}
.ops-qlabel{font-size:9px;color:#64748b;text-transform:uppercase;margin-bottom:5px;}
.ops-qval{font-size:22px;font-weight:700;font-family:monospace;}
.ops-alert-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#161b24;border-radius:5px;border-left:3px solid transparent;margin-bottom:5px;}
.ops-alert-crit{border-color:#ef4444;background:rgba(239,68,68,.06);}
.ops-alert-warn{border-color:#eab308;}
.ops-alert-info{border-color:#3b82f6;}
.ops-sev-badge{font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px;flex-shrink:0;font-family:monospace;margin-top:1px;}
.ops-sev-crit{background:rgba(239,68,68,.2);color:#ef4444;}
.ops-sev-warn{background:rgba(234,179,8,.2);color:#eab308;}
.ops-sev-info{background:rgba(59,130,246,.2);color:#3b82f6;}
.ops-alert-title{font-size:12px;font-weight:500;color:#e2e8f0;}
.ops-alert-time{font-size:10px;color:#64748b;font-family:monospace;margin-top:2px;}
.ops-integ-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#161b24;border-radius:5px;margin-bottom:5px;}
.ops-integ-name{font-size:12px;font-weight:500;flex:1;color:#e2e8f0;}
.ops-integ-stat{font-size:11px;font-family:monospace;font-weight:600;}
.ops-integ-note{font-size:10px;color:#64748b;font-family:monospace;}
.ops-act-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:4px;}
.ops-act-item:hover{background:#161b24;}
.ops-act-type{font-size:10px;width:80px;flex-shrink:0;font-family:monospace;color:#64748b;}
.ops-act-text{font-size:12px;flex:1;color:#e2e8f0;}
.ops-act-time{font-size:10px;color:#64748b;font-family:monospace;}
.ops-empty{color:#64748b;font-size:12px;text-align:center;padding:20px;}

/* ═══════════════════════════════════════════════════════════
   CHAT CENTER PREMIUM PASS
═══════════════════════════════════════════════════════════ */
.chat-shell{
  gap:0;
  background:
    radial-gradient(circle at 52% -10%,rgba(87,156,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(5,9,22,.95),rgba(4,7,18,.98));
}
.store-nav-panel,
.chat-list-panel,
.chat-room-wrap,
#rightPanel{
  background:rgba(8,13,31,.74);
  backdrop-filter:blur(18px);
}
.chat-list-panel,
.chat-room-wrap,
#rightPanel{
  box-shadow:inset 1px 0 0 rgba(255,255,255,.035);
}
.store-nav-panel{border-right:1px solid rgba(148,163,184,.12)}
.store-nav-head{
  padding:16px 14px 9px;
  color:#91a8d5;
  font-size:10px;
}
.storeNavItem{
  margin:4px 8px;
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.storeNavItem.active{
  background:linear-gradient(135deg,rgba(83,126,255,.22),rgba(72,211,255,.1));
  border-color:rgba(113,176,255,.34);
  box-shadow:0 12px 28px rgba(24,58,140,.18);
}
.sni-icon{
  border-radius:12px;
  background:linear-gradient(145deg,rgba(105,139,255,.22),rgba(38,217,255,.12)) !important;
  border:1px solid rgba(137,178,255,.2);
}
.chat-list-head{
  padding:18px 16px 13px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}
.chat-list-head h3{
  font-size:16px;
  margin-bottom:13px;
  color:#f3f7ff;
}
.search-wrap input{
  height:46px;
  border-radius:16px;
  background:rgba(3,7,18,.56);
  border-color:rgba(134,166,255,.16);
}
.search-wrap input:focus{
  background:rgba(5,11,26,.82);
  border-color:rgba(86,196,255,.62);
  box-shadow:0 0 0 3px rgba(86,196,255,.12),0 12px 28px rgba(0,0,0,.22);
}
.search-ico{
  width:26px;height:26px;border-radius:10px;
  background:linear-gradient(135deg,rgba(77,125,255,.28),rgba(77,211,255,.16));
  border-color:rgba(113,211,255,.26);
  color:#8ee9ff;
}
.filter-bar{padding:12px 16px;background:rgba(0,0,0,.08)}
#filterDropdownBtn{
  min-height:42px;
  border-radius:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  border-color:rgba(148,163,184,.14);
  color:#dceaff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
#filterDropdownMenu{
  top:calc(100% + 4px);
  border-radius:18px;
  background:rgba(8,15,33,.98);
  border-color:rgba(141,169,255,.18);
  box-shadow:0 24px 56px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.03) inset;
}
.fd-item{
  margin:5px;
  padding:10px 11px;
  border-radius:13px;
}
.fd-item.active{
  background:linear-gradient(135deg,rgba(83,126,255,.2),rgba(80,210,255,.1));
  color:#eff6ff;
}
.fd-icon{
  position:relative;
  width:22px;height:22px;
  border-radius:9px;
  background:rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.14);
  flex:0 0 22px;
}
.fd-icon::before,
.fd-icon::after{
  content:"";
  position:absolute;
  display:block;
}
.fd-all::before{left:6px;right:6px;top:6px;height:2px;background:#9dc2ff;box-shadow:0 4px 0 #9dc2ff,0 8px 0 #9dc2ff;border-radius:99px}
.fd-unread::before{width:8px;height:8px;left:6px;top:6px;border-radius:50%;background:#ff5d7d;box-shadow:0 0 12px rgba(255,93,125,.7)}
.fd-pending::before{width:11px;height:11px;left:5px;top:5px;border:2px solid #f7c85b;border-radius:50%}
.fd-pending::after{width:5px;height:2px;left:10px;top:10px;background:#f7c85b;transform-origin:left center;transform:rotate(-45deg);border-radius:99px}
.fd-done::before{width:11px;height:6px;left:5px;top:6px;border-left:2px solid #70f0a5;border-bottom:2px solid #70f0a5;transform:rotate(-45deg)}
.fd-pinned::before{width:10px;height:10px;left:6px;top:4px;background:#c5a8ff;clip-path:polygon(20% 0,80% 0,70% 55%,100% 80%,55% 80%,55% 100%,45% 100%,45% 80%,0 80%,30% 55%)}
.fd-spam::before{width:12px;height:12px;left:4px;top:4px;border:2px solid #ff7c96;border-radius:50%}
.fd-spam::after{width:12px;height:2px;left:5px;top:10px;background:#ff7c96;transform:rotate(-45deg);border-radius:99px}
.fd-count{
  background:rgba(89,129,255,.22);
  color:#b9ceff;
  border:1px solid rgba(111,150,255,.22);
}
.chat-item-row{
  margin:6px 9px;
  padding:11px 11px;
  border:1px solid transparent;
  border-bottom:0;
  border-radius:16px;
}
.chat-item-row:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.055);
}
.chat-item-row.active{
  background:linear-gradient(135deg,var(--primary-soft),color-mix(in srgb, var(--primary-2) 10%, transparent));
  border:1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.chat-item-row.active .chat-time{
  background:rgba(10,20,46,.72);
  border-color:color-mix(in srgb, var(--primary) 32%, transparent);
  color:var(--soft-2);
  box-shadow:0 0 18px var(--primary-shadow),inset 0 1px 0 rgba(255,255,255,.08);
}
.chat-item-row.active .unread-badge{
  background:linear-gradient(135deg,#ff8aa0 0%,#ef4444 44%,#991b1b 100%);
  box-shadow:0 10px 22px rgba(239,68,68,.42),inset 0 1px 0 rgba(255,255,255,.25);
}
.chat-avatar,
#headerAvatar,
.rp-avatar{
  background:var(--chat-admin-bubble);
  border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow:0 10px 22px var(--primary-shadow),inset 0 1px 0 rgba(255,255,255,.16);
}
.chat-name{gap:5px;color:#eff6ff}
.oa-tag,
.header-oa-pill{
  background:var(--primary-soft);
  border:1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  color:var(--soft-2);
}
.status-tag,
.tag-badge{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.chat-room-wrap{
  padding-bottom:18px;
  background:
    radial-gradient(circle at 50% 0,var(--primary-soft),transparent 32%),
    var(--chat-room-bg);
}
#chatHeader{
  min-height:70px;
  padding:13px 20px;
  background:var(--chat-header-bg);
}
#headerName{font-size:15px;color:#f4f8ff}
.header-btn{
  border-radius:999px;
  padding:8px 13px;
  background:rgba(255,255,255,.055);
  border-color:rgba(148,163,184,.14);
}
.header-btn::before,
.status-btn-group button::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  display:inline-block;
  margin-right:7px;
  background:#8ea3ca;
  box-shadow:0 0 10px rgba(142,163,202,.3);
}
#statusPendingBtn::before,
#rpPendingStatusBtn::before{background:#f7c85b;box-shadow:0 0 12px rgba(247,200,91,.45)}
#statusDoneBtn::before,
#rpDoneStatusBtn::before{background:#66eba1;box-shadow:0 0 12px rgba(102,235,161,.45)}
.header-icon-btn{
  width:36px;height:36px;
  border-radius:13px;
  background:rgba(255,255,255,.055);
  border-color:rgba(148,163,184,.14);
}
.header-icon-btn::before,
.header-icon-btn::after{
  content:"";
  position:absolute;
  display:block;
}
.header-icon-btn{position:relative}
.search-action::before{
  width:11px;height:11px;border:2px solid #9dc2ff;border-radius:50%;
  left:10px;top:9px;
}
.search-action::after{
  width:8px;height:2px;border-radius:99px;background:#9dc2ff;
  left:20px;top:22px;transform:rotate(45deg);
}
.note-action::before{
  width:15px;height:17px;left:10px;top:8px;border-radius:4px;
  border:2px solid #f2c76b;background:rgba(242,199,107,.08);
}
.note-action::after{
  width:8px;height:2px;left:14px;top:15px;border-radius:99px;
  background:#f2c76b;box-shadow:0 5px 0 rgba(242,199,107,.8);
}
#messages{
  padding:22px 24px;
  gap:10px;
  background:
    linear-gradient(var(--chat-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--chat-grid-line-2) 1px,transparent 1px);
  background-size:34px 34px;
}
.msg{
  padding:11px 14px;
  border-radius:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.msg.customer{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.07);
}
.msg.admin{
  background:var(--chat-admin-bubble);
  color:var(--chat-admin-text);
  box-shadow:0 14px 30px var(--primary-shadow);
}
.msgWrap{
  max-width:70%;
  gap:7px;
  margin:3px 0 8px;
}
.msgWrap .msg{
  max-width:100%;
}
.msgHeader{
  color:rgba(226,232,240,.72);
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.msgHeader em{
  color:rgba(226,232,240,.58);
}
#replyBox{
  min-height:76px;
  margin:0 22px 22px;
  padding:13px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:22px;
  background:var(--reply-panel-bg);
  border-color:color-mix(in srgb, var(--primary) 28%, transparent);
  box-shadow:0 18px 46px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent) inset;
}
.reply-icon-btn{
  width:44px;height:44px;
  border-radius:15px;
  background:rgba(255,255,255,.06);
  border-color:rgba(148,163,184,.15);
}
.reply-icon-btn:hover{
  background:rgba(94,139,255,.16);
  border-color:rgba(118,183,255,.3);
  color:#d9f7ff;
}
.reply-flex-send-btn{
  height:44px;
  width:58px;
  padding:0 10px;
  border-radius:15px;
  border:1px solid rgba(255,122,24,.45);
  background:linear-gradient(135deg,#ff7a18,#ff4b24);
  color:#fff;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(255,75,36,.28);
  flex-shrink:0;
}
.reply-flex-send-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.reply-flex-send-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
#replyInput{
  flex:1 1 180px;
  min-width:140px;
  height:46px;
  border-radius:16px;
  background:rgba(3,7,18,.48);
  border-color:rgba(148,163,184,.14);
}
#sendBtn{
  flex-shrink:0;
  height:46px;
  border-radius:16px;
  min-width:64px;
  background:var(--chat-admin-bubble);
  color:var(--chat-admin-text);
  box-shadow:0 12px 28px var(--primary-shadow);
}
#rightPanel{
  background:linear-gradient(180deg,rgba(12,19,42,.88),rgba(6,11,25,.94));
  border-left:1px solid rgba(148,163,184,.12);
}
.rp-top{
  padding:20px 16px 16px;
  background:
    radial-gradient(circle at 50% 0,rgba(82,191,255,.16),transparent 55%),
    rgba(255,255,255,.025);
}
.rp-name{color:#f4f8ff}
.rp-section{
  margin:11px 12px 0;
  padding:13px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border-color:rgba(148,163,184,.13);
}
.rp-section-title{
  color:#91a8d5;
  font-size:10px;
}
.status-btn-group{
  gap:7px;
  padding:5px;
  border-radius:16px;
  background:rgba(2,6,18,.36);
}
.status-btn-group button{
  min-height:40px;
  border-radius:13px;
}
.status-btn-group button.active-pending,
.header-btn.status-pending{
  background:linear-gradient(135deg,rgba(247,200,91,.22),rgba(255,172,68,.09));
  border-color:rgba(247,200,91,.34);
}
.status-btn-group button.active-done,
.header-btn.status-done{
  background:linear-gradient(135deg,rgba(102,235,161,.18),rgba(48,214,156,.08));
  border-color:rgba(102,235,161,.3);
}
.toggle-row{
  min-height:38px;
  padding:9px 3px;
}
.customer-flags-section{
  padding:11px;
}
.vip-toggle-row{
  min-height:54px;
  margin:-2px -1px;
  padding:10px 11px;
  border:1px solid rgba(250,204,21,.20);
  border-radius:16px;
  background:
    linear-gradient(135deg,rgba(250,204,21,.12),rgba(59,130,246,.06)),
    rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.14);
}
.vip-toggle-label{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:#fde68a;
}
.vip-toggle-crown{
  width:30px;
  height:30px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#111827;
  background:linear-gradient(135deg,#fde68a,#f59e0b);
  box-shadow:0 10px 22px rgba(250,204,21,.22),inset 0 1px 0 rgba(255,255,255,.45);
  font-size:14px;
  font-weight:900;
}
.vip-toggle-label strong{
  display:block;
  color:#fde68a;
  font-size:14px;
  font-weight:900;
  line-height:1.1;
}
.vip-toggle-label small{
  display:block;
  margin-top:2px;
  color:#b8c5de;
  font-size:10px;
  font-weight:700;
  line-height:1.1;
}
.toggle-switch{width:44px;height:24px}
.toggle-slider{background:rgba(92,111,148,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.toggle-slider:before{width:18px;height:18px}
input:checked + .toggle-slider{background:linear-gradient(135deg,#5d7cff,#41d7ff)}
input:checked + .toggle-slider:before{transform:translateX(20px)}
.vip-switch .toggle-slider{
  border:1px solid rgba(250,204,21,.16);
  background:rgba(92,111,148,.28);
}
.vip-slider-input:checked + .toggle-slider{
  background:linear-gradient(135deg,#facc15,#f97316);
  box-shadow:0 0 18px rgba(250,204,21,.30),inset 0 1px 2px rgba(0,0,0,.18);
}
.vip-slider-input:checked + .toggle-slider:before{
  background:#fff7ed;
  box-shadow:0 2px 8px rgba(120,53,15,.28);
}
#tagInput,
.note-area{
  background:rgba(3,7,18,.34);
  border-color:rgba(148,163,184,.14);
}
#tagInput:focus-within,
.note-area:focus{
  border-color:rgba(83,204,255,.45);
  box-shadow:0 0 0 3px rgba(83,204,255,.09);
}
.note-save-btn{
  border-radius:14px;
  background:var(--chat-admin-bubble);
  color:var(--chat-admin-text);
  box-shadow:0 12px 26px var(--primary-shadow);
}


/* Composer responsive fix: inspector view leaves the chat column narrow. */
@media (max-width:1500px){
  .chat-shell.has-inspector #replyBox{
    flex-wrap:wrap;
    align-content:center;
    row-gap:9px;
  }
  .chat-shell.has-inspector #stickerBtn,
  .chat-shell.has-inspector #imgBtn,
  .chat-shell.has-inspector #quickBtn,
  .chat-shell.has-inspector #flexBtn,
  .chat-shell.has-inspector #flexSendBtn{
    order:1;
  }
  .chat-shell.has-inspector #replyInput{
    order:2;
    flex:1 1 calc(100% - 88px);
    min-width:0;
  }
  .chat-shell.has-inspector #sendBtn{
    order:3;
    width:68px;
    min-width:68px;
  }
}

@media (max-width:1180px){
  #replyBox{
    flex-wrap:wrap;
    row-gap:9px;
  }
  #replyInput{
    order:2;
    flex:1 1 calc(100% - 88px);
    min-width:0;
  }
  #sendBtn{
    order:3;
    min-width:68px;
  }
}


/* Hide duplicate Flex icon; the orange Flex button is the single Flex action. */
#flexBtn{
  display:none!important;
}

/* Premium store navigation counts */
.storeNavItem,.storeNavSubItem{
  min-width:0;
}
.storeNavItem{
  position:relative;
}
.storeNavItem .sni-name,.storeNavSubItem .sni-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sni-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:24px;
  padding:0 9px;
  margin-left:auto;
  border-radius:999px;
  color:#f8fbff !important;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:0;
  background:linear-gradient(135deg,rgba(94,234,212,.24),rgba(96,165,250,.24)) !important;
  border:1px solid rgba(125,211,252,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px rgba(14,165,233,.16);
}
.sni-badge-danger{
  background:linear-gradient(135deg,#ff4d6d,#ff8a3d) !important;
  border-color:rgba(255,179,102,.55);
  box-shadow:0 8px 20px rgba(255,77,109,.26);
}
.storeNavItem.active .sni-badge,.storeNavSubItem.active .sni-badge{
  background:linear-gradient(135deg,#ffe08a,#5eead4) !important;
  color:#07111f !important;
  border-color:rgba(255,224,138,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 24px rgba(94,234,212,.18);
}
.storeNavSubItem{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  margin:3px 12px 5px 22px;
  padding:8px 10px;
  border-radius:12px;
  color:#9fb3d7;
  cursor:pointer;
  background:rgba(255,255,255,.018);
  border:1px solid rgba(148,163,184,.08);
}
.storeNavSubItem:hover{
  color:#e7f0ff;
  background:rgba(255,255,255,.045);
}
.storeNavSubItem.active{
  color:#f6fbff;
  background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(59,130,246,.14));
  border-color:rgba(125,211,252,.22);
}
.storeNavSubItem svg{
  flex:0 0 auto;
  color:#78d7ff;
}


/* Premium admin sticker picker */
#stickerPanel{
  display:none;
  flex-direction:column;
  gap:12px;
  width:auto;
  min-width:0;
  margin:0 22px 12px;
  padding:14px 16px 16px;
  border:1px solid rgba(125,211,252,.14);
  border-radius:24px;
  background:
    radial-gradient(circle at 18% 0,rgba(94,234,212,.10),transparent 34%),
    radial-gradient(circle at 88% 8%,rgba(255,224,138,.10),transparent 32%),
    linear-gradient(180deg,rgba(9,14,32,.98),rgba(5,10,24,.98));
  box-shadow:0 18px 45px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
  flex-shrink:0;
  max-height:min(48vh,420px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(94,234,212,.42) transparent;
}
#stickerPanel.show{display:flex}
.sticker-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 0;
}
.sticker-panel-head strong{
  display:block;
  color:#f7fbff;
  font-size:14px;
  font-weight:900;
  letter-spacing:0;
}
.sticker-panel-head span{
  display:block;
  margin-top:2px;
  color:#8ea6cc;
  font-size:11px;
  font-weight:700;
}
.sticker-panel-head button{
  width:30px;
  height:30px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:10px;
  color:#c8d8f0;
  background:rgba(255,255,255,.055);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.sticker-pack-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  min-width:0;
}
.sticker-pack-tab{
  min-height:32px;
  max-width:100%;
  padding:0 12px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:10px;
  color:#c8d8f0;
  background:rgba(255,255,255,.055);
  font-size:12px;
  font-weight:900;
  line-height:1.1;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease;
}
.sticker-pack-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(94,234,212,.42);
  background:rgba(94,234,212,.10);
}
.sticker-pack-tab.active{
  color:#07111f;
  border-color:rgba(94,234,212,.74);
  background:linear-gradient(135deg,#ffe08a,#5eead4);
  box-shadow:0 10px 22px rgba(94,234,212,.16);
}
.sticker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:12px;
  min-width:0;
}
.sticker-item{
  position:relative;
  width:100%;
  height:auto;
  min-height:96px;
  aspect-ratio:1;
  padding:5px;
  border-radius:16px;
  border:1px solid rgba(191,219,254,.55);
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.96),rgba(226,239,255,.92) 58%,rgba(196,216,242,.86) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 10px 22px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.sticker-item:hover{
  transform:translateY(-2px);
  border-color:rgba(94,234,212,.66);
  background:
    radial-gradient(circle at 50% 18%,#fff,rgba(232,248,255,.96) 58%,rgba(191,235,246,.88) 100%);
  box-shadow:0 14px 30px rgba(14,165,233,.18),inset 0 1px 0 rgba(255,255,255,.96);
}
.sticker-item img{
  width:92%;
  height:92%;
  margin:auto;
  object-fit:contain;
  display:block;
  image-rendering:auto;
  filter:contrast(1.04) saturate(1.06);
}
.sticker-img.is-lazy{
  opacity:0;
  transform:scale(.96);
}
.sticker-img.is-loaded{
  opacity:1;
  transform:scale(1);
  transition:opacity .16s ease,transform .16s ease;
}
.sticker-item span{
  position:absolute;
  right:6px;
  bottom:5px;
  min-width:16px;
  height:16px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#07111f;
  background:linear-gradient(135deg,#ffe08a,#5eead4);
  font-size:9px;
  font-weight:900;
  box-shadow:0 3px 9px rgba(94,234,212,.18);
}
.chat-shell.has-inspector #stickerPanel{margin:0 16px 10px;max-height:min(44vh,360px);}
.chat-shell.has-inspector .sticker-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;}
.chat-shell.has-inspector .sticker-item{min-height:88px;border-radius:14px;padding:5px;}
@media(max-width:900px){#stickerPanel{margin:0 12px 10px;max-height:min(44vh,340px);padding:12px}.sticker-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:9px}.sticker-item{min-height:84px;border-radius:14px;padding:5px}}


/* Sticker panel hard override: keep header and grid stacked in narrow chat columns. */
#stickerPanel.show{
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
}
#stickerPanel .sticker-panel-head{
  width:100%!important;
  flex:0 0 auto!important;
  align-self:stretch!important;
}
#stickerPanel .sticker-pack-tabs{
  width:100%!important;
  flex:0 0 auto!important;
  align-self:stretch!important;
}
#stickerPanel .sticker-grid{
  width:100%!important;
  max-width:100%!important;
  flex:0 0 auto!important;
  align-self:stretch!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr))!important;
  overflow:visible!important;
}
.chat-shell.has-inspector #stickerPanel .sticker-grid{
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr))!important;
}
#stickerPanel .sticker-item{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  aspect-ratio:1/1!important;
}
@media(max-width:900px){
  #stickerPanel .sticker-grid{grid-template-columns:repeat(auto-fit,minmax(86px,1fr))!important;}
}


/* Premium chat-list chip for LINE Store admin stickers. */
.chat-item-row.admin-sticker{
  background:linear-gradient(135deg,rgba(255,214,125,.08),rgba(94,234,212,.06),rgba(96,165,250,.05));
  border-color:rgba(255,214,125,.14);
}
.chat-preview .admin-sticker-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:4px 9px 4px 5px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,224,138,.18),rgba(94,234,212,.12));
  border:1px solid rgba(255,224,138,.26);
  color:#f8fbff;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:0 9px 20px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10);
}
.admin-sticker-mark{
  flex:0 0 auto;
  padding:3px 5px;
  border-radius:999px;
  color:#07111f;
  background:linear-gradient(135deg,#ffe08a,#5eead4);
  font-size:8px;
  font-weight:1000;
  box-shadow:0 4px 10px rgba(94,234,212,.18);
}
.chat-preview .admin-sticker-chip span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* Premium header status pills. */
#statusPendingBtn,
#statusDoneBtn{
  min-width:94px;
  height:38px;
  padding:0 12px;
  border-radius:15px;
  border:1px solid rgba(148,163,184,.18);
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035)),
    rgba(8,14,34,.72);
  color:#dfeaff;
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
}
#statusPendingBtn:hover,
#statusDoneBtn:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045)),
    rgba(13,23,52,.84);
}
#statusPendingBtn::before,
#statusDoneBtn::before{
  margin:0!important;
  width:7px!important;
  height:7px!important;
  flex:0 0 auto;
  border-radius:999px;
}
#statusPendingBtn::before{
  background:#ffd166!important;
  box-shadow:0 0 0 4px rgba(255,209,102,.10),0 0 16px rgba(255,209,102,.55)!important;
}
#statusDoneBtn::before{
  background:#5ef2a6!important;
  box-shadow:0 0 0 4px rgba(94,242,166,.10),0 0 16px rgba(94,242,166,.52)!important;
}
#statusPendingBtn.status-pending{
  color:#fff0b8!important;
  border-color:rgba(255,209,102,.42)!important;
  background:linear-gradient(135deg,rgba(255,209,102,.22),rgba(255,255,255,.055)),rgba(12,18,38,.88)!important;
  box-shadow:0 14px 34px rgba(255,184,77,.16),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
#statusDoneBtn.status-done{
  color:#c9ffe2!important;
  border-color:rgba(94,242,166,.38)!important;
  background:linear-gradient(135deg,rgba(94,242,166,.19),rgba(96,165,250,.055)),rgba(12,18,38,.88)!important;
  box-shadow:0 14px 34px rgba(34,197,94,.15),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
@media(max-width:900px){
  #statusPendingBtn,#statusDoneBtn{min-width:78px;height:32px;padding:0 9px;font-size:11px;border-radius:13px;gap:5px;}
  #statusPendingBtn::before,#statusDoneBtn::before{width:6px!important;height:6px!important;}
}

/* Premium dashboard fit 20260711 */
.topbar{
  min-height:82px;
  padding:16px 26px;
  gap:18px;
  background:linear-gradient(135deg,rgba(10,17,36,.86),rgba(18,28,55,.66)),radial-gradient(circle at 72% 0%,var(--primary-soft),transparent 34%);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 42px rgba(0,0,0,.18);
}
.topbar-left{min-width:220px;flex:0 0 auto}
.topbar-left .eyebrow{color:#9fb4da;letter-spacing:.14em;font-size:10px;font-weight:800}
.topbar-left h2{font-size:27px;line-height:1.05;letter-spacing:-.025em;text-shadow:0 10px 28px var(--primary-shadow)}
.topbar-actions{flex:1 1 auto;min-width:0;justify-content:flex-end}
.topbar-actions > div{width:min(100%,760px);justify-content:flex-end;padding:8px;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 38px rgba(0,0,0,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#dashRangeChips{flex-wrap:nowrap;padding:4px;border-radius:16px;background:rgba(5,10,24,.34);border:1px solid rgba(255,255,255,.08)}
#dashRangeChips .chip{height:38px;padding:0 16px;border-radius:13px;border-color:transparent;background:transparent;color:#bfd0ee;font-weight:800;white-space:nowrap}
#dashRangeChips .chip.active{color:var(--chat-admin-text);background:var(--chat-admin-bubble);box-shadow:0 10px 24px var(--primary-shadow),inset 0 1px 0 rgba(255,255,255,.14)}
#dateFilterControls{padding:4px;border-radius:16px;background:rgba(5,10,24,.30);border:1px solid rgba(255,255,255,.08);gap:5px!important;flex-wrap:nowrap}
#dateFilterControls > div{gap:4px!important}
#dateFilterControls label{padding-left:4px;color:#90a7cc!important;font-size:10px!important;letter-spacing:.08em!important}
#dateFilterControls input{height:38px;min-width:142px;padding:0 12px!important;border-radius:13px!important;background:rgba(255,255,255,.085)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#dateFilterControls button{height:38px;padding:0 16px!important;border-radius:13px!important;background:var(--chat-admin-bubble)!important;color:var(--chat-admin-text)!important;box-shadow:0 12px 26px var(--primary-shadow)!important}
#dashboardPage{padding:24px 26px 34px;background:radial-gradient(circle at 18% 12%,var(--primary-soft),transparent 30%),radial-gradient(circle at 72% 86%,color-mix(in srgb, var(--primary-2) 12%, transparent),transparent 28%)}
#dashboardPage .report-cycle-text{margin-bottom:14px;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,var(--primary-soft),color-mix(in srgb, var(--primary-2) 9%, transparent));border-color:color-mix(in srgb, var(--primary) 28%, transparent);box-shadow:0 10px 24px rgba(0,0,0,.12)}
#dashboardPage .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
#dashboardPage .stat-card{min-height:126px;border-radius:20px;padding:18px 20px;background:linear-gradient(150deg,rgba(255,255,255,.105),rgba(255,255,255,.045)),radial-gradient(circle at 90% 0%,var(--primary-soft),transparent 38%);border:1px solid color-mix(in srgb, var(--primary) 22%, rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 42px rgba(0,0,0,.18)}
#dashboardPage .stat-value{font-size:34px;margin-top:12px}
#dashboardPage .dashboard-grid{grid-template-columns:minmax(0,1.55fr) minmax(340px,.85fr);gap:18px}
#dashboardPage .panel{border-radius:24px;padding:20px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04)),radial-gradient(circle at 100% 0%,var(--primary-soft),transparent 34%);border:1px solid color-mix(in srgb, var(--primary) 20%, rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 52px rgba(0,0,0,.22)}
#dashboardPage .summary-card{border-radius:18px;background:var(--primary-soft);border:1px solid color-mix(in srgb, var(--primary) 22%, transparent)}
@media (max-width:1280px){#dashboardPage .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}#dashboardPage .dashboard-grid{grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);gap:14px}.topbar{padding:14px 18px;align-items:flex-start}.topbar-actions > div{width:min(100%,720px)}#dateFilterControls input{min-width:126px}}
@media (max-width:980px){.topbar{flex-direction:column;align-items:stretch}.topbar-left{min-width:0}.topbar-actions > div{width:100%;justify-content:flex-start}#dashboardPage .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#dashboardPage .dashboard-grid{grid-template-columns:1fr}}
@media (max-width:640px){.topbar-actions > div,#dateFilterControls{flex-wrap:wrap!important}#dashRangeChips{width:100%}#dashRangeChips .chip{flex:1;justify-content:center}#dateFilterControls input{min-width:0;width:100%}#dateFilterControls > div{flex:1 1 132px}#dashboardPage{padding:16px 12px 26px}#dashboardPage .stats-grid{grid-template-columns:1fr}}

/* App shell full-width fix 20260711 */
#mainApp{
  width:100vw!important;
  max-width:100vw!important;
  overflow:hidden;
}
.app-shell{
  width:100vw!important;
  max-width:100vw!important;
  min-width:0;
}
.main-area{
  width:100%;
  min-width:0;
}
@media (min-width:1281px){
  .app-shell{grid-template-columns:260px minmax(0,1fr)}
}

/* Compact premium dashboard topbar 20260711 */
.topbar{
  min-height:74px!important;
  padding:12px 24px!important;
  align-items:center!important;
}
.topbar-left{min-width:210px!important}
.topbar-left h2{font-size:25px!important}
.topbar-actions{
  flex:0 1 auto!important;
  justify-content:flex-end!important;
}
.topbar-actions > div{
  width:auto!important;
  max-width:100%!important;
  padding:6px!important;
  border-radius:18px!important;
  gap:7px!important;
}
#dashRangeChips{padding:3px!important;border-radius:14px!important}
#dashRangeChips .chip{height:36px!important;padding:0 15px!important;border-radius:12px!important}
#dateFilterControls{padding:3px!important;border-radius:14px!important;gap:4px!important}
#dateFilterControls input{height:36px!important;min-width:132px!important}
#dateFilterControls button{height:36px!important;padding:0 15px!important}
@media (max-width:1280px){
  .topbar{padding:12px 18px!important}
  .topbar-actions > div{width:auto!important}
}
@media (max-width:980px){
  .topbar-actions{width:100%!important}
  .topbar-actions > div{width:100%!important;justify-content:flex-start!important}
}

/* Premium dashboard detail polish 20260711 */
#dashboardPage .ranking-list{gap:12px}
#dashboardPage .rank-item{
  position:relative;
  overflow:hidden;
  padding:14px 16px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.038))!important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.14);
}
#dashboardPage .rank-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,#7c9cff,#35d6ff);
  opacity:.75;
}
#dashboardPage .rank-item:first-child{
  background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(255,255,255,.04))!important;
  border-color:rgba(245,158,11,.22);
}
#dashboardPage .rank-item:first-child::before{background:linear-gradient(180deg,#ffd88a,#f59e0b)}
#dashboardPage .rank-badge{
  width:38px;height:38px;border-radius:14px;
  background:linear-gradient(135deg,rgba(124,156,255,.28),rgba(53,214,255,.14))!important;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px rgba(0,0,0,.16);
}
#dashboardPage .rank-item:first-child .rank-badge{background:linear-gradient(135deg,#f59e0b,#704310)!important;color:#fff}
#dashboardPage .rank-item strong{font-size:14px;font-weight:850;color:#f4f8ff}
#dashboardPage .rank-item small{color:#99afd2;font-size:11px;letter-spacing:.01em}
#dashboardPage .star-bar{min-height:16px;color:#f6c96b}
#dashboardPage .rank-score{
  min-width:58px;
  padding:7px 12px;
  border-radius:999px;
  text-align:center;
  color:#dfe8ff!important;
  background:rgba(124,156,255,.14);
  border:1px solid rgba(124,156,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
#dashboardPage .store-count-list{gap:11px;margin-top:2px}
#dashboardPage .store-count-row{
  grid-template-columns:82px minmax(0,1fr) 34px;
  gap:12px;
  padding:7px 0;
}
#dashboardPage .store-count-name{font-size:12px;color:#d1dcf2;font-weight:750}
#dashboardPage .store-count-track{
  height:9px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22);
}
#dashboardPage .store-count-fill{
  background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--soft-2));
  box-shadow:0 0 18px var(--primary-shadow);
}
#dashboardPage .store-count-value{
  color:#dfe8ff;
  font-size:12px;
  font-weight:850;
}
#dashStoreBars{display:none!important}
#dashboardPage .summary-card{margin-bottom:20px}
#dashboardPage .summary-row strong{color:#f4f8ff;font-weight:850}

/* Live realtime bars 20260711 */
#realtimeBars{align-items:end;gap:18px;padding:10px 8px 0}
#realtimeBars .bar-col{position:relative;min-width:0}
#realtimeBars .bar{min-height:8px;box-shadow:0 0 18px var(--primary-shadow),inset 0 1px 0 rgba(255,255,255,.35)}
#realtimeBars .bar-count{font-style:normal;font-size:11px;font-weight:850;color:#dfe8ff;min-height:15px;opacity:.92}
#realtimeBars span{font-weight:650;color:#8fa5c8}

/* Premium 24h realtime operations 20260711 */
#dashboardPage .panel:has(#realtimeBars){position:relative;overflow:hidden}
#dashboardPage .panel:has(#realtimeBars)::after{
  content:"";position:absolute;inset:auto 22px 92px auto;width:160px;height:160px;
  background:radial-gradient(circle,var(--primary-soft),transparent 66%);pointer-events:none;
}
#realtimeBars{
  position:relative;
  display:grid;
  grid-template-columns:repeat(24,minmax(14px,1fr));
  align-items:end;
  gap:7px;
  height:214px;
  padding:40px 14px 34px;
  margin-top:6px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(9,16,31,.58),rgba(7,12,24,.30)),radial-gradient(circle at 80% 0,var(--primary-soft),transparent 48%);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -18px 42px rgba(0,0,0,.20);
  overflow:hidden;
}
#realtimeBars .realtime-bars-track{display:contents}
#realtimeBars[data-range="week"]{grid-template-columns:repeat(7,minmax(44px,1fr));gap:14px}
#realtimeBars::before{
  content:"";position:absolute;left:14px;right:14px;top:42px;bottom:35px;
  background:repeating-linear-gradient(to top,rgba(255,255,255,.055) 0 1px,transparent 1px 36px);
  pointer-events:none;opacity:.75;
}
#realtimeBars .bar-col{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;min-width:0;height:100%;color:#8fa5c8;font-size:10px;font-weight:750;
}
#realtimeBars .bar{
  position:relative;width:100%;max-width:22px;min-height:7px;border-radius:999px 999px 7px 7px;
  background:linear-gradient(180deg,var(--soft-2) 0%,var(--primary) 44%,var(--primary-2) 100%);
  box-shadow:0 10px 24px var(--primary-shadow),0 0 20px var(--primary-soft),inset 0 1px 0 rgba(255,255,255,.55);
  transition:height .35s ease,filter .18s ease,transform .18s ease;
}
#realtimeBars .bar i{position:absolute;left:3px;right:3px;top:4px;height:30%;border-radius:999px;background:rgba(255,255,255,.26)}
#realtimeBars .bar-col:hover .bar{filter:brightness(1.15);transform:translateY(-2px)}
#realtimeBars .bar-col.is-peak .bar{background:linear-gradient(180deg,#ffe6a6 0%,#f4c56b 42%,#ff5f6d 100%);box-shadow:0 12px 28px rgba(244,197,107,.34),0 0 24px rgba(255,95,109,.20)}
#realtimeBars .bar-count{
  min-height:16px;font-style:normal;font-size:10px;font-weight:900;color:#eef5ff;
  padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);
}
#realtimeBars span{font-size:9px;font-weight:800;color:#9fb2d1;white-space:nowrap}
#realtimeBars span.muted-hour{opacity:.42}
#realtimeBars .realtime-summary{
  position:absolute;z-index:2;top:10px;left:14px;right:14px;display:flex;align-items:center;gap:10px;
  color:#dfe8ff;font-size:11px;font-weight:800;pointer-events:none;
}
#realtimeBars .realtime-summary strong{font-size:22px;line-height:1;color:var(--soft-2);text-shadow:0 0 18px var(--primary-shadow)}
#realtimeBars .realtime-summary span{font-size:11px;color:#dfe8ff;opacity:.92}
#realtimeBars .realtime-summary small{margin-left:auto;color:#9fb2d1;font-size:11px;font-weight:750}
@media (max-width:900px){
  #realtimeBars{grid-template-columns:repeat(12,minmax(18px,1fr));height:238px;gap:8px;padding-bottom:48px}
  #realtimeBars span.muted-hour{display:none}
  #realtimeBars .realtime-summary{flex-wrap:wrap;gap:6px}
  #realtimeBars .realtime-summary small{margin-left:0;width:100%}
}

/* Premium admin ranking cards 20260711 */
#dashboardPage .ranking-panel{
  position:relative;
  overflow:hidden;
}
#dashboardPage .ranking-panel::after{
  content:"";
  position:absolute;
  right:-44px;
  top:-58px;
  width:168px;
  height:168px;
  background:radial-gradient(circle,rgba(247,217,138,.14),transparent 68%);
  pointer-events:none;
}
#dashboardPage .ranking-list{
  gap:14px!important;
}
#dashboardPage .rank-item{
  position:relative;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center!important;
  gap:14px!important;
  min-height:108px;
  padding:16px 18px!important;
  border-radius:22px!important;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 16px 34px rgba(0,0,0,.20);
}
#dashboardPage .rank-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,#7c9cff,#35d6ff);
  opacity:.9;
}
#dashboardPage .rank-glow{
  position:absolute;
  inset:-42px auto auto -34px;
  width:138px;
  height:138px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(124,156,255,.20),transparent 67%);
  pointer-events:none;
}
#dashboardPage .rank-first{
  min-height:126px;
  background:
    linear-gradient(135deg,rgba(247,217,138,.19),rgba(255,255,255,.045) 48%,rgba(124,156,255,.06))!important;
  border-color:rgba(247,217,138,.27);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px rgba(0,0,0,.24),0 0 0 1px rgba(247,217,138,.06);
}
#dashboardPage .rank-first::before{background:linear-gradient(180deg,#ffe6a6,#f59e0b)}
#dashboardPage .rank-second::before{background:linear-gradient(180deg,#dce8ff,#66d9ff)}
#dashboardPage .rank-third::before{background:linear-gradient(180deg,#ffd0a6,#f59e0b)}
#dashboardPage .rank-badge{
  position:relative;
  z-index:1;
  width:52px!important;
  height:52px!important;
  border-radius:18px!important;
  display:grid;
  place-items:center;
  flex:none!important;
  background:linear-gradient(145deg,rgba(124,156,255,.30),rgba(53,214,255,.12))!important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px rgba(0,0,0,.22);
}
#dashboardPage .rank-badge span{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#f4f8ff;
  font-size:14px;
  font-weight:950;
  background:rgba(5,8,18,.34);
  border:1px solid rgba(255,255,255,.12);
}
#dashboardPage .rank-first .rank-badge{
  width:64px!important;
  height:64px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#f7b733,#8a5314)!important;
  border-color:rgba(255,230,166,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 18px 34px rgba(245,158,11,.24);
}
#dashboardPage .rank-first .rank-badge span{
  color:#1b1205;
  background:linear-gradient(180deg,#ffe6a6,#f7b733);
  border-color:rgba(255,255,255,.42);
}
#dashboardPage .rank-main{
  position:relative;
  z-index:1;
  min-width:0;
}
#dashboardPage .rank-name-line{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
#dashboardPage .rank-name-line strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f6f9ff;
  font-size:18px!important;
  font-weight:950!important;
  letter-spacing:0!important;
}
#dashboardPage .rank-first .rank-name-line strong{font-size:20px!important}
#dashboardPage .rank-crown{
  flex:none;
  padding:3px 8px;
  border-radius:999px;
  color:#201402;
  font-size:9px;
  font-weight:950;
  background:linear-gradient(180deg,#ffe6a6,#f4c56b);
  box-shadow:0 0 18px rgba(244,197,107,.22);
}
#dashboardPage .rank-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:7px;
}
#dashboardPage .rank-metrics span{
  padding:5px 9px;
  border-radius:999px;
  color:#b8c8e4;
  font-size:11px;
  font-weight:800;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.075);
}
#dashboardPage .star-bar{
  display:flex!important;
  align-items:center;
  gap:7px!important;
  min-height:auto!important;
  margin-top:9px!important;
  color:#f7d98a!important;
  font-size:12px!important;
}
#dashboardPage .star-bar b{
  color:#f7d98a;
  font-size:12px;
  font-weight:950;
}
#dashboardPage .star-bar em{
  color:#8fa5c8;
  font-style:normal;
  font-size:10px;
  font-weight:750;
}
#dashboardPage .star-bar.is-empty{
  display:inline-flex!important;
  width:max-content;
  max-width:100%;
  padding:4px 9px;
  border-radius:999px;
  color:#f4c56b!important;
  background:rgba(244,197,107,.095);
  border:1px solid rgba(244,197,107,.16);
}
#dashboardPage .star-bar.is-empty b{color:#f4c56b;font-size:11px}
#dashboardPage .rank-score{
  position:relative;
  z-index:1;
  min-width:74px!important;
  padding:9px 12px!important;
  border-radius:18px!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:#f4f8ff!important;
  background:linear-gradient(180deg,rgba(124,156,255,.20),rgba(53,214,255,.08))!important;
  border:1px solid rgba(124,156,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 10px 24px rgba(0,0,0,.16)!important;
}
#dashboardPage .rank-score span{
  font-size:21px;
  line-height:1;
  font-weight:950;
}
#dashboardPage .rank-score small{
  margin:0;
  color:#94a8c8;
  font-size:9px;
  font-weight:850;
}
#dashboardPage .rank-first .rank-score{
  background:linear-gradient(180deg,rgba(247,217,138,.24),rgba(245,158,11,.10))!important;
  border-color:rgba(247,217,138,.28)!important;
}
#dashboardPage .rank-empty{
  grid-template-columns:46px minmax(0,1fr);
  min-height:82px;
}
@media (max-width:760px){
  #dashboardPage .ranking-list{
    gap:8px!important;
  }
  #dashboardPage .ranking-panel::after,
  #dashboardPage .rank-glow{
    display:none!important;
  }
  #dashboardPage .rank-item{
    grid-template-columns:34px minmax(0,1fr) 50px;
    gap:8px!important;
    min-height:0;
    padding:8px 9px!important;
    border-radius:15px!important;
    align-items:center!important;
  }
  #dashboardPage .rank-first{
    min-height:0;
  }
  #dashboardPage .rank-item::before{
    width:4px;
  }
  #dashboardPage .rank-score{
    grid-column:3;
    grid-row:1;
    width:50px!important;
    min-width:50px!important;
    margin-top:0;
    padding:5px 6px!important;
    border-radius:12px!important;
    flex-direction:column;
    justify-self:end;
  }
  #dashboardPage .rank-score span{
    font-size:15px;
  }
  #dashboardPage .rank-score small{
    font-size:7px;
  }
  #dashboardPage .rank-badge,
  #dashboardPage .rank-first .rank-badge{
    width:32px!important;
    height:32px!important;
    border-radius:12px!important;
  }
  #dashboardPage .rank-badge span{
    width:20px;
    height:20px;
    font-size:11px;
  }
  #dashboardPage .rank-name-line{
    gap:5px;
  }
  #dashboardPage .rank-name-line strong,
  #dashboardPage .rank-first .rank-name-line strong{
    font-size:14px!important;
  }
  #dashboardPage .rank-crown{
    padding:2px 5px;
    font-size:7px;
  }
  #dashboardPage .rank-metrics{
    gap:4px;
    margin-top:4px;
    flex-wrap:nowrap;
  }
  #dashboardPage .rank-metrics span{
    padding:3px 6px;
    font-size:9px;
    white-space:nowrap;
  }
  #dashboardPage .star-bar{
    margin-top:4px!important;
    font-size:10px!important;
    gap:5px!important;
  }
  #dashboardPage .star-bar.is-empty{
    display:none!important;
  }
  #dashboardPage .star-bar.is-empty{
    padding:3px 7px;
  }
  #dashboardPage .star-bar.is-empty b{
    font-size:10px;
  }
}


#dashboardPage .ranking-panel-head{
  align-items:flex-start;
  gap:12px;
}
#dashboardPage .ranking-refresh-box{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}
#dashboardPage #rankingLastUpdated{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  color:#9fb2d2;
  font-size:11px;
  font-weight:800;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}
#dashboardPage #rankingLastUpdated[data-state="ok"]{
  color:#bfead4;
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.18);
}
#dashboardPage #rankingLastUpdated[data-state="loading"]{
  color:#f7d98a;
  background:rgba(247,217,138,.10);
  border-color:rgba(247,217,138,.16);
}
#dashboardPage #rankingLastUpdated[data-state="error"]{
  color:#ffc0c0;
  background:rgba(239,68,68,.11);
  border-color:rgba(239,68,68,.20);
}
#dashboardPage .ranking-refresh-btn{
  min-height:28px;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(124,156,255,.28);
  color:#f4f8ff;
  font-size:11px;
  font-weight:900;
  background:linear-gradient(135deg,rgba(124,156,255,.24),rgba(53,214,255,.11));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.14);
  cursor:pointer;
}
#dashboardPage .ranking-refresh-btn:hover{
  border-color:rgba(124,156,255,.42);
  transform:translateY(-1px);
}
#dashboardPage .ranking-refresh-btn:disabled{
  opacity:.58;
  cursor:wait;
  transform:none;
}
@media (max-width:760px){
  #dashboardPage .ranking-panel-head{
    align-items:stretch;
  }
  #dashboardPage .ranking-refresh-box{
    width:100%;
    justify-content:space-between;
    margin-left:0;
  }
  #dashboardPage #rankingLastUpdated{
    flex:1;
    min-width:0;
    justify-content:center;
  }
}

/* Premium login refresh 20260711 */
#loginPage{
  position:relative;
  align-items:center!important;
  padding:34px 18px 42px!important;
  background:
    radial-gradient(circle at 50% 12%,rgba(70,214,255,.12),transparent 22%),
    radial-gradient(circle at 18% 78%,rgba(124,156,255,.12),transparent 24%),
    radial-gradient(circle at 82% 82%,rgba(244,197,107,.09),transparent 24%);
}
#loginPage::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 70%);
  opacity:.34;
}
.lp-wrap{
  position:relative;
  z-index:1;
  max-width:760px!important;
}
.lp-hero{
  margin-bottom:22px!important;
}
.lp-logo{
  width:86px!important;
  height:86px!important;
  border-radius:28px!important;
  margin-bottom:18px!important;
  box-shadow:
    0 24px 70px rgba(53,214,255,.26),
    0 0 0 8px rgba(255,255,255,.018),
    inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.lp-title{
  font-size:clamp(44px,6vw,70px)!important;
  line-height:.98!important;
  margin-bottom:12px!important;
  letter-spacing:0!important;
  text-shadow:0 18px 46px rgba(0,0,0,.36);
}
.lp-sub{
  max-width:660px;
  margin:0 auto 24px!important;
  color:#aebdda!important;
  font-size:clamp(14px,1.8vw,17px)!important;
  line-height:1.68!important;
}
.lp-login-box{
  position:relative;
  max-width:560px;
  margin:0 auto 14px!important;
  padding:18px!important;
  border-radius:24px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.lp-login-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(247,217,138,.20),rgba(72,216,255,.14),rgba(124,156,255,.18));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  padding:1px;
  opacity:.72;
}
.lp-field{margin-bottom:12px!important}
.lp-inp{
  height:58px!important;
  padding:0 20px!important;
  border-radius:18px!important;
  color:#f7fbff!important;
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.12);
}
.lp-inp:focus{
  border-color:rgba(72,216,255,.48)!important;
  background:rgba(255,255,255,.105)!important;
  box-shadow:0 0 0 4px rgba(72,216,255,.09),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.lp-inp::placeholder{
  color:#7d8aa6!important;
  font-weight:650;
}
.lp-eye{
  right:14px!important;
  width:36px;
  height:36px;
  border-radius:12px!important;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.lp-btn{
  max-width:560px;
  height:64px;
  margin:0 auto 12px!important;
  border-radius:22px!important;
  background:
    linear-gradient(90deg,#f7d98a 0%,#57dcff 46%,#6f8cff 100%)!important;
  color:#071126!important;
  font-size:17px!important;
  font-weight:950!important;
  letter-spacing:0!important;
  box-shadow:0 24px 56px rgba(76,102,255,.28),0 0 24px rgba(72,216,255,.18)!important;
}
.lp-btn:hover{
  transform:translateY(-2px)!important;
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 28px 68px rgba(76,102,255,.36),0 0 28px rgba(247,217,138,.18)!important;
}
.lp-note{
  color:#53617c!important;
  font-size:12px!important;
  font-weight:650;
}
.lp-carousel{
  max-width:760px;
  margin-top:34px!important;
}
.lp-car-nav{display:block!important}
.lp-nav,.lp-dots{display:none!important}
.lp-car-vp{
  overflow:visible!important;
  border-radius:0!important;
}
.lp-car-track{
  transform:none!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px!important;
}
.lp-card:nth-child(n+4){display:none!important}
.lp-card{
  flex:none!important;
  min-height:130px!important;
  padding:20px 22px!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032))!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 36px rgba(0,0,0,.18);
}
.lp-card-i{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:14px!important;
  border-radius:16px;
  font-size:20px!important;
  background:linear-gradient(135deg,rgba(247,217,138,.18),rgba(72,216,255,.12));
  border:1px solid rgba(255,255,255,.10);
}
.lp-card-n{
  font-size:15px!important;
  font-weight:950!important;
  margin-bottom:7px!important;
}
.lp-card-d{
  color:#98a8c6!important;
  font-size:12px!important;
  line-height:1.55!important;
}
@media(max-width:767px){
  #loginPage{align-items:flex-start!important;padding:26px 0 34px!important}
  .lp-wrap{width:calc(100% - 28px)!important}
  .lp-logo{width:70px!important;height:70px!important;border-radius:22px!important}
  .lp-title{font-size:40px!important}
  .lp-login-box{border-radius:20px!important;padding:14px!important}
  .lp-btn{height:58px;border-radius:18px!important}
  .lp-car-track{grid-template-columns:1fr!important}
  .lp-card:nth-child(n+4){display:none!important}
  .lp-card{min-height:106px!important}
}


/* Premium new-friends store breakdown 20260711 */
#dashboardPage .store-count-list{
  gap:10px;
  margin-top:4px;
}
#dashboardPage .store-count-empty{
  padding:16px;
  border-radius:16px;
  color:#aebbd4;
  text-align:center;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
}
#dashboardPage .store-count-row{
  display:grid;
  grid-template-columns:minmax(118px,1fr) minmax(96px,1.15fr) auto;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:10px 12px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.12);
}
#dashboardPage .store-count-row.has-count{
  background:
    radial-gradient(circle at 12% 12%,rgba(244,197,107,.20),transparent 34%),
    linear-gradient(135deg,rgba(124,156,255,.16),rgba(38,216,255,.08) 48%,rgba(244,197,107,.13));
  border-color:rgba(244,197,107,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.18),0 0 24px rgba(124,156,255,.10);
}
#dashboardPage .store-count-row.is-zero{opacity:.72}
#dashboardPage .store-count-brand{display:flex;align-items:center;gap:10px;min-width:0}
#dashboardPage .store-count-icon{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  color:#dfe9ff;font-size:13px;font-weight:900;
  background:linear-gradient(135deg,rgba(124,156,255,.26),rgba(72,216,255,.12));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
#dashboardPage .store-count-row.has-count .store-count-icon{
  color:#111827;background:linear-gradient(135deg,#f7d777,#6ee7ff 56%,#86a8ff);
  box-shadow:0 0 22px rgba(244,197,107,.22),inset 0 1px 0 rgba(255,255,255,.42);
}
#dashboardPage .store-count-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
#dashboardPage .store-count-name{font-size:13px;color:#f4f7ff;font-weight:850;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dashboardPage .store-count-sub{font-size:10px;color:#91a4c4;font-weight:750;white-space:nowrap}
#dashboardPage .store-count-row.has-count .store-count-sub{color:#f5d894}
#dashboardPage .store-count-track{
  height:10px;border-radius:999px;overflow:hidden;
  background:rgba(13,23,43,.62);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.32);
}
#dashboardPage .store-count-fill{
  height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--primary) 0%,var(--primary-2) 52%,var(--soft-2) 100%);
  box-shadow:0 0 18px var(--primary-shadow),0 0 18px var(--primary-soft);
  transition:width .45s ease;
}
#dashboardPage .store-count-value{
  min-width:52px;padding:7px 10px;border-radius:14px;text-align:center;
  color:#dfe8ff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
#dashboardPage .store-count-value strong{display:block;font-size:18px;line-height:1;font-weight:950;color:#f7faff}
#dashboardPage .store-count-value span{display:block;margin-top:2px;font-size:9px;font-weight:800;color:#93a4c2}
#dashboardPage .store-count-row.has-count .store-count-value{
  background:linear-gradient(135deg,rgba(247,215,119,.24),rgba(78,220,255,.12));
  border-color:rgba(247,215,119,.30);
}
#dashboardPage .store-count-row.has-count .store-count-value strong{color:#f7d777}
@media (max-width:900px){
  #dashboardPage .store-count-row{grid-template-columns:1fr auto;gap:10px}
  #dashboardPage .store-count-track{grid-column:1 / -1;order:3}
}

/* TikTok Ads Operator 20260717 */
.tiktok-ads-shell{display:flex;flex-direction:column;gap:14px}
.tiktok-hero{display:flex;justify-content:space-between;align-items:center;gap:18px}
.tiktok-hero h3{font-size:22px;font-weight:900;margin:2px 0 6px}
.tiktok-hero p{margin:0;color:var(--soft);font-size:13px;line-height:1.55}
.tiktok-policy-lock{display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding:12px 14px;border-radius:16px;background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.24);min-width:190px}
.tiktok-policy-lock strong{font-size:13px;color:#fecaca;letter-spacing:.08em}
.tiktok-policy-lock span{font-size:11px;color:#fca5a5;text-align:right}
.tiktok-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tiktok-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:14px;align-items:start}
.tiktok-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.tiktok-rules div{padding:12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.tiktok-rules strong{display:block;font-size:12px;color:#f7faff;margin-bottom:5px}
.tiktok-rules span{display:block;font-size:11px;color:var(--soft);line-height:1.45}
.tiktok-list,.tiktok-log-list{display:flex;flex-direction:column;gap:10px}
.tiktok-row,.tiktok-campaign-card,.tiktok-log-item{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);border-radius:16px;padding:12px}
.tiktok-row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.tiktok-row strong,.tiktok-campaign-card strong,.tiktok-log-item strong{display:block;font-size:13px;color:#f7faff;font-weight:850}
.tiktok-row span,.tiktok-campaign-card span,.tiktok-log-item span{display:block;margin-top:3px;font-size:11px;color:var(--soft);line-height:1.4}
.tiktok-row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tiktok-row-actions button{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#dbe7ff;border-radius:999px;padding:6px 9px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.tiktok-row-actions button:hover{background:rgba(255,255,255,.1)}
.tiktok-row-actions .danger-lite{border-color:rgba(239,68,68,.24);background:rgba(239,68,68,.09);color:#fca5a5}
.tiktok-campaign-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.tiktok-campaign-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tiktok-campaign-meta span{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.05);font-weight:750}
.tt-status{font-style:normal;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:5px 8px;border-radius:999px;color:#cbd5e1;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.18)}
.tt-pending{color:#fde68a;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.24)}
.tt-paused{color:#bfdbfe;background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.20)}
.tiktok-log-item small{display:block;margin-top:8px;font-size:10px;color:#7f90ad}
@media(max-width:1100px){.tiktok-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tiktok-grid,.tiktok-rules{grid-template-columns:1fr}}
@media(max-width:768px){
  .tiktok-hero{flex-direction:column;align-items:stretch}
  .tiktok-policy-lock{align-items:flex-start;min-width:0}
  .tiktok-policy-lock span{text-align:left}
  .tiktok-stat-grid{grid-template-columns:1fr}
  .bottom-nav-btn span:not(.bn-icon):not(.nav-badge){font-size:9px}
}

/* Premium pending signup chips. */
.chat-item-row.signup-pending{
  background:linear-gradient(135deg,rgba(244,114,182,.10),rgba(250,204,21,.08),rgba(94,234,212,.05));
  border-color:rgba(244,114,182,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(244,114,182,.05);
}
.chat-item-row.signup-pending .chat-avatar{
  box-shadow:0 0 0 2px rgba(244,114,182,.22),0 12px 24px rgba(250,204,21,.10);
}
.signup-status-chip,
.chat-preview .signup-preview-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:4px 9px 4px 5px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(244,114,182,.20),rgba(250,204,21,.14),rgba(94,234,212,.10));
  border:1px solid rgba(250,204,21,.28);
  color:#fff7ed;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:0 9px 20px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.12);
}
.signup-status-chip span,
.signup-preview-mark{
  flex:0 0 auto;
  padding:3px 5px;
  border-radius:999px;
  color:#190b16;
  background:linear-gradient(135deg,#f9a8d4,#fde68a,#5eead4);
  font-size:8px;
  font-weight:1000;
  box-shadow:0 4px 10px rgba(244,114,182,.18);
}
.chat-preview .signup-preview-chip span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.msg.admin:has(+ .msg),
.msg.admin{
  overflow-wrap:anywhere;
}

/* Premium signup lead compact refresh. */
.chat-item-row.signup-pending{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 20%,rgba(248,113,113,.18),transparent 34%),
    linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.88));
  border:1px solid rgba(250,204,21,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.24),0 0 0 1px rgba(94,234,212,.06);
}
.chat-item-row.signup-pending::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#fde68a,#fb7185,#5eead4);
  box-shadow:0 0 14px rgba(250,204,21,.45);
}
.chat-item-row.signup-pending .chat-avatar{
  box-shadow:0 0 0 2px rgba(250,204,21,.34),0 12px 26px rgba(251,113,133,.18);
}
.chat-item-row.signup-pending .tag-badge{
  display:inline-flex;
}
.signup-status-chip,
.chat-preview .signup-preview-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  max-width:100%;
  border-radius:999px;
  border:1px solid rgba(250,204,21,.36);
  background:linear-gradient(135deg,rgba(250,204,21,.20),rgba(251,113,133,.16),rgba(94,234,212,.12));
  color:#fff7ed;
  font-weight:900;
  box-shadow:0 4px 10px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.12);
}
.signup-status-chip{
  padding:2px 6px 2px 3px;
  font-size:8.5px;
  line-height:1;
  letter-spacing:0;
}
.signup-status-chip strong{
  font-size:8.5px;
  line-height:1;
  white-space:nowrap;
}
.chat-preview .signup-preview-chip{
  padding:4px 9px 4px 5px;
  font-size:11px;
}
.signup-status-chip span,
.signup-preview-mark{
  flex:0 0 auto;
  padding:1px 4px;
  border-radius:999px;
  color:#111827;
  background:linear-gradient(135deg,#fde68a,#fca5a5,#67e8f9);
  font-size:7px;
  font-weight:1000;
  box-shadow:0 3px 7px rgba(250,204,21,.16);
}
.chat-preview .signup-preview-chip span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chat-preview .signup-preview-text{
  display:block;
  color:rgba(226,232,240,.72);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Premium right inspector tags and notes. */
#rightPanel .rp-tags-section,
#rightPanel .rp-note-section{
  position:relative;
  overflow:hidden;
  margin:12px 12px 0;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.16);
  background:
    radial-gradient(circle at 12% 0%,rgba(93,124,255,.14),transparent 34%),
    linear-gradient(145deg,rgba(15,23,42,.78),rgba(2,6,23,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 32px rgba(0,0,0,.20);
}
#rightPanel .rp-tags-section::before,
#rightPanel .rp-note-section::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,234,212,.40),rgba(250,204,21,.28),transparent);
}
#rightPanel .rp-section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  color:#dbeafe;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
}
#rightPanel .rp-section-title span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#rightPanel .rp-tags-section .rp-section-title span::before,
#rightPanel .rp-note-section .rp-section-title span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(135deg,#fde68a,#5eead4);
  box-shadow:0 0 12px rgba(94,234,212,.55);
}
#rightPanel .rp-section-title small{
  color:#7dd3fc;
  font-size:9px;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
  opacity:.82;
  white-space:nowrap;
}
#rightPanel #tagInput{
  position:relative;
  min-height:50px;
  padding:9px;
  gap:7px;
  border-radius:17px;
  border:1px solid rgba(125,211,252,.16);
  background:linear-gradient(145deg,rgba(2,6,23,.68),rgba(15,23,42,.52));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px rgba(0,0,0,.18);
}
#rightPanel #tagInput:focus-within{
  border-color:rgba(94,234,212,.46);
  box-shadow:0 0 0 3px rgba(94,234,212,.08),inset 0 1px 0 rgba(255,255,255,.08);
}
#rightPanel .tagChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  min-height:24px;
  padding:4px 6px 4px 10px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1.1;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
#rightPanel .tagChip.deposit-issue{
  color:#fff7ed;
  background:linear-gradient(135deg,#f97316,#c2410c)!important;
  border-color:rgba(251,191,36,.42);
  text-shadow:none;
}
#rightPanel .tagChip.forgot-password{
  color:#fff7ed;
  background:linear-gradient(135deg,#e11d48,#9f1239)!important;
  border-color:rgba(251,113,133,.48);
  text-shadow:none;
}
#rightPanel .tagChip button{
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(15,23,42,.42);
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
#rightPanel #tagRealInput{
  min-width:115px;
  min-height:26px;
  color:#e0f2fe;
  font-size:12.5px;
  font-weight:700;
}
#rightPanel #tagRealInput::placeholder{color:rgba(191,219,254,.36)}
#rightPanel .note-area{
  min-height:112px;
  padding:14px;
  border-radius:19px;
  border:1px solid rgba(125,211,252,.14);
  background:
    linear-gradient(145deg,rgba(2,6,23,.72),rgba(15,23,42,.46));
  color:#f8fafc;
  font-size:13px;
  font-weight:750;
  line-height:1.55;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px rgba(0,0,0,.16);
}
#rightPanel .note-area:focus{
  border-color:rgba(94,234,212,.50);
  box-shadow:0 0 0 3px rgba(94,234,212,.08),inset 0 1px 0 rgba(255,255,255,.08);
}
#rightPanel .note-area::placeholder{color:rgba(191,219,254,.34)}
#rightPanel .note-save-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  margin-top:12px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:17px;
  background:linear-gradient(135deg,#5d7cff 0%,#38bdf8 52%,#22d3ee 100%);
  color:white;
  font-size:14px;
  font-weight:950;
  letter-spacing:0;
  box-shadow:0 14px 30px rgba(56,189,248,.24),inset 0 1px 0 rgba(255,255,255,.22);
}
#rightPanel .note-save-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(56,189,248,.30),inset 0 1px 0 rgba(255,255,255,.26);
}
#rightPanel .note-save-btn:disabled{opacity:.58;transform:none;box-shadow:none}

/* Signup complete action in inspector. */
#rightPanel .signup-complete-section{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
#rightPanel .signup-complete-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(250,204,21,.28);
  background:linear-gradient(145deg,rgba(15,23,42,.88),rgba(30,41,59,.72)),radial-gradient(circle at 18% 0%,rgba(250,204,21,.18),transparent 42%);
  box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08);
}
#rightPanel .signup-complete-card strong{
  display:block;
  color:#fef3c7;
  font-size:12.5px;
  font-weight:950;
}
#rightPanel .signup-complete-card span{
  display:block;
  margin-top:3px;
  color:#bae6fd;
  font-size:10.5px;
  font-weight:750;
  line-height:1.35;
}
#rightPanel #signupCompleteBtn{
  min-width:112px;
  border:0;
  border-radius:14px;
  padding:9px 10px;
  cursor:pointer;
  color:#0f172a;
  background:linear-gradient(135deg,#fde68a,#5eead4 52%,#60a5fa);
  box-shadow:0 12px 22px rgba(94,234,212,.18),0 8px 18px rgba(250,204,21,.14),inset 0 1px 0 rgba(255,255,255,.55);
}
#rightPanel #signupCompleteBtn span{
  margin:0;
  color:#0f172a;
  font-size:12px;
  font-weight:950;
  line-height:1.1;
}
#rightPanel #signupCompleteBtn small{
  display:block;
  margin-top:2px;
  color:rgba(15,23,42,.68);
  font-size:9px;
  font-weight:900;
}
#rightPanel #signupCompleteBtn:disabled{
  opacity:.65;
  cursor:wait;
}


/* Mobile dashboard readability 20260712 */
@media (max-width: 720px){
  body{overflow-x:hidden!important;background:#050817!important;}
  #mainApp,.app-shell,.main-area,#dashboardPage{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important;}
  .main-area{padding:0!important;}
  .topbar{
    min-height:auto!important;
    padding:16px 16px 12px!important;
    gap:12px!important;
    border-bottom-color:rgba(255,255,255,.06)!important;
    background:linear-gradient(180deg,rgba(14,22,48,.96),rgba(8,13,30,.92))!important;
  }
  .topbar-left{min-width:0!important;width:100%!important;}
  .topbar-left .eyebrow{font-size:10px!important;letter-spacing:.16em!important;color:#aebdea!important;}
  .topbar-left h2{font-size:30px!important;line-height:1.05!important;margin-top:4px!important;}
  .topbar-actions{width:100%!important;justify-content:stretch!important;}
  .topbar-actions > div{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:10px!important;
    border-radius:22px!important;
    background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.035))!important;
  }
  #dashRangeChips{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:5px!important;
    border-radius:18px!important;
  }
  #dashRangeChips .chip{
    width:100%!important;
    height:42px!important;
    min-width:0!important;
    padding:0 8px!important;
    justify-content:center!important;
    font-size:13px!important;
    border-radius:15px!important;
  }
  #dateFilterControls{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  #dateFilterControls > div{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
  }
  #dateFilterControls label{
    padding:0 2px!important;
    font-size:10px!important;
    color:#9fb0d2!important;
  }
  #dateFilterControls input{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:42px!important;
    border-radius:15px!important;
    font-size:14px!important;
    color:#f5f8ff!important;
  }
  #dateFilterControls button{
    width:100%!important;
    height:46px!important;
    justify-content:center!important;
    border-radius:16px!important;
    font-size:14px!important;
  }
  #dashboardPage{
    padding:14px 14px calc(92px + env(safe-area-inset-bottom,0px))!important;
    background:radial-gradient(circle at 50% 0%,var(--primary-soft),transparent 34%),#070b1b!important;
  }
  #dashboardPage .report-cycle-text{
    display:inline-flex!important;
    max-width:100%!important;
    margin:4px 0 14px!important;
    padding:7px 12px!important;
    font-size:12px!important;
    border-radius:999px!important;
  }
  #dashboardPage .stats-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-bottom:14px!important;
  }
  #dashboardPage .stat-card{
    min-height:104px!important;
    padding:15px 16px!important;
    border-radius:20px!important;
  }
  #dashboardPage .stat-label{font-size:13px!important;letter-spacing:.02em!important;}
  #dashboardPage .stat-value{font-size:34px!important;margin-top:10px!important;line-height:.95!important;}
  #dashboardPage .stat-card small,#dashboardPage .stat-card .muted{font-size:12px!important;line-height:1.35!important;}
  #dashboardPage .dashboard-grid{grid-template-columns:1fr!important;gap:12px!important;}
  #dashboardPage .panel{padding:15px!important;border-radius:20px!important;}
  #realtimeBars{min-height:190px!important;overflow-x:auto!important;padding-bottom:4px!important;}
  #realtimeBars .bar{min-width:18px!important;}
  .bottom-nav{height:64px!important;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important;}
}

/* Mobile dashboard realtime graph: keep 24h in one scrollable row 20260712 */
@media (max-width: 720px){
  #dashboardPage .panel:has(#realtimeBars){
    min-width:0!important;
    overflow:hidden!important;
  }
  #realtimeBars[data-range="today"]{
    display:block!important;
    height:224px!important;
    min-height:224px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    max-inline-size:calc(100vw - 68px)!important;
    box-sizing:border-box!important;
    padding:44px 14px 38px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:rgba(142,220,255,.48) rgba(255,255,255,.06);
    touch-action:pan-x!important;
    overscroll-behavior-x:contain!important;
    contain:layout paint!important;
  }
  #realtimeBars[data-range="today"] .realtime-bars-track{
    display:grid!important;
    grid-template-columns:repeat(24,36px)!important;
    grid-template-rows:1fr!important;
    grid-auto-flow:column!important;
    align-items:end!important;
    justify-content:start!important;
    gap:10px!important;
    width:max-content!important;
    min-width:max-content!important;
    height:100%!important;
  }
  #realtimeBars[data-range="today"]::before{
    left:14px!important;
    right:14px!important;
    bottom:38px!important;
  }
  #realtimeBars[data-range="today"] .bar-col{
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    scroll-snap-align:start;
  }
  #realtimeBars[data-range="today"] .bar{
    width:22px!important;
    min-width:22px!important;
  }
  #realtimeBars[data-range="today"] span,
  #realtimeBars[data-range="today"] span.muted-hour{
    display:block!important;
    opacity:1!important;
    font-size:9px!important;
  }
  #realtimeBars[data-range="today"] .bar-count{
    font-size:10px!important;
    padding:2px 6px!important;
  }
  #realtimeBars[data-range="today"] .realtime-summary{
    position:sticky!important;
    left:14px!important;
    right:auto!important;
    width:calc(100vw - 70px)!important;
    max-width:320px!important;
    flex-wrap:wrap!important;
    gap:6px 8px!important;
  }
  #realtimeBars[data-range="today"] .realtime-summary small{
    width:100%!important;
    margin-left:0!important;
  }
}

/* Mobile dashboard realtime graph: fit cleanly in one card 20260712 */
@media (max-width: 720px){
  #realtimeBars[data-range="today"]{
    display:grid!important;
    grid-template-columns:repeat(24,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    gap:3px!important;
    width:100%!important;
    max-width:100%!important;
    max-inline-size:100%!important;
    height:210px!important;
    min-height:210px!important;
    padding:42px 10px 28px!important;
    overflow:hidden!important;
    touch-action:auto!important;
    contain:layout paint!important;
  }
  #realtimeBars[data-range="today"] .realtime-bars-track{
    display:contents!important;
  }
  #realtimeBars[data-range="today"]::before{
    left:10px!important;
    right:10px!important;
    top:44px!important;
    bottom:32px!important;
  }
  #realtimeBars[data-range="today"] .bar-col{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    gap:5px!important;
    overflow:visible!important;
  }
  #realtimeBars[data-range="today"] .bar{
    width:100%!important;
    max-width:11px!important;
    min-width:5px!important;
    margin:0 auto!important;
    border-radius:999px 999px 5px 5px!important;
  }
  #realtimeBars[data-range="today"] .bar-count{
    min-height:14px!important;
    min-width:14px!important;
    padding:1px 4px!important;
    font-size:8px!important;
    line-height:1.1!important;
  }
  #realtimeBars[data-range="today"] .bar-count.zero{
    visibility:hidden!important;
  }
  #realtimeBars[data-range="today"] .bar-col span{
    display:none!important;
  }
  #realtimeBars[data-range="today"] .bar-col:nth-child(3n+1) span{
    display:block!important;
    font-size:8px!important;
    letter-spacing:0!important;
    opacity:.78!important;
    transform:translateX(-1px)!important;
  }
  #realtimeBars[data-range="today"] .realtime-summary{
    position:absolute!important;
    top:10px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  #realtimeBars[data-range="today"] .realtime-summary strong{font-size:20px!important}
  #realtimeBars[data-range="today"] .realtime-summary span{
    font-size:10px!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #realtimeBars[data-range="today"] .realtime-summary small{
    width:auto!important;
    margin-left:auto!important;
    font-size:9px!important;
    white-space:nowrap!important;
  }
}

/* Mobile dashboard realtime graph: active hours only 20260712 */
@media (max-width: 720px){
  #realtimeBars[data-range="today"]{
    grid-template-columns:repeat(auto-fit,minmax(58px,1fr))!important;
    gap:12px!important;
    min-height:204px!important;
    height:204px!important;
    padding:52px 14px 34px!important;
  }
  #realtimeBars[data-range="today"] .bar-col.is-zero{
    display:none!important;
  }
  #realtimeBars[data-range="today"] .bar-col{
    min-width:58px!important;
    gap:7px!important;
  }
  #realtimeBars[data-range="today"] .bar{
    max-width:18px!important;
    min-width:14px!important;
  }
  #realtimeBars[data-range="today"] .bar-count{
    visibility:visible!important;
    min-width:24px!important;
    padding:3px 7px!important;
    font-size:11px!important;
  }
  #realtimeBars[data-range="today"] .bar-col span,
  #realtimeBars[data-range="today"] .bar-col:nth-child(3n+1) span{
    display:block!important;
    font-size:11px!important;
    opacity:.9!important;
    transform:none!important;
  }
}
@media (max-width: 390px){
  .topbar{padding-left:12px!important;padding-right:12px!important;}
  #dashboardPage{padding-left:10px!important;padding-right:10px!important;}
  .topbar-left h2{font-size:28px!important;}
  #dashRangeChips .chip{height:40px!important;font-size:12px!important;}
  #dashboardPage .stat-card{min-height:98px!important;}
}

/* Mobile dashboard realtime graph: contained horizontal scroll 20260712 */
@media (max-width: 720px){
  #dashboardPage .panel:has(#realtimeBars){
    position:relative!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  #dashboardPage .panel:has(#realtimeBars)::after{
    content:""!important;
    position:absolute!important;
    top:72px!important;
    right:14px!important;
    bottom:24px!important;
    width:36px!important;
    pointer-events:none!important;
    border-radius:0 18px 18px 0!important;
    background:linear-gradient(90deg,rgba(12,18,32,0),rgba(12,18,32,.92))!important;
    z-index:3!important;
  }
  #realtimeBars[data-range="today"]{
    position:relative!important;
    display:block!important;
    inline-size:100%!important;
    max-inline-size:100%!important;
    min-inline-size:0!important;
    height:226px!important;
    min-height:226px!important;
    padding:54px 14px 36px!important;
    box-sizing:border-box!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(142,220,255,.48) rgba(255,255,255,.06)!important;
    contain:paint!important;
  }
  #realtimeBars[data-range="today"] .realtime-bars-track{
    display:grid!important;
    grid-template-columns:repeat(24,42px)!important;
    grid-template-rows:1fr!important;
    grid-auto-flow:column!important;
    align-items:end!important;
    justify-content:start!important;
    gap:10px!important;
    width:max-content!important;
    min-width:max-content!important;
    height:100%!important;
    padding-right:24px!important;
  }
  #realtimeBars[data-range="today"]::before{
    left:14px!important;
    right:14px!important;
    top:56px!important;
    bottom:38px!important;
  }
  #realtimeBars[data-range="today"] .bar-col,
  #realtimeBars[data-range="today"] .bar-col.is-zero{
    display:flex!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    gap:7px!important;
    overflow:visible!important;
    scroll-snap-align:start!important;
  }
  #realtimeBars[data-range="today"] .bar{
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    margin:0 auto!important;
    border-radius:999px 999px 6px 6px!important;
  }
  #realtimeBars[data-range="today"] .bar-count,
  #realtimeBars[data-range="today"] .bar-count.zero{
    visibility:visible!important;
    min-height:15px!important;
    min-width:22px!important;
    padding:2px 6px!important;
    font-size:10px!important;
    line-height:1.1!important;
  }
  #realtimeBars[data-range="today"] .bar-count.zero{
    opacity:.28!important;
  }
  #realtimeBars[data-range="today"] .bar-col span,
  #realtimeBars[data-range="today"] .bar-col:nth-child(3n+1) span,
  #realtimeBars[data-range="today"] span.muted-hour{
    display:block!important;
    font-size:10px!important;
    opacity:.86!important;
    transform:none!important;
    white-space:nowrap!important;
  }
  #realtimeBars[data-range="today"] .bar-col.is-zero span{
    opacity:.44!important;
  }
  #realtimeBars[data-range="today"] .realtime-summary{
    position:sticky!important;
    top:10px!important;
    left:0!important;
    z-index:4!important;
    width:min(320px,calc(100vw - 76px))!important;
    max-width:min(320px,calc(100vw - 76px))!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:8px!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  #realtimeBars[data-range="today"] .realtime-summary strong{
    font-size:20px!important;
  }
  #realtimeBars[data-range="today"] .realtime-summary span{
    min-width:0!important;
    font-size:10px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #realtimeBars[data-range="today"] .realtime-summary small{
    width:auto!important;
    margin-left:auto!important;
    font-size:9px!important;
    white-space:nowrap!important;
  }
}

/* Mobile dashboard stat cards: center content 20260712 */
@media (max-width: 720px){
  #dashboardPage .stats-grid .stat-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    min-height:112px!important;
    padding:16px 18px!important;
  }
  #dashboardPage .stats-grid .stat-label,
  #dashboardPage .stats-grid .stat-value,
  #dashboardPage .stats-grid .stat-trend{
    width:100%!important;
    text-align:center!important;
  }
  #dashboardPage .stats-grid .stat-label{
    line-height:1.35!important;
  }
  #dashboardPage .stats-grid .stat-value{
    margin-top:8px!important;
  }
  #dashboardPage .stats-grid .stat-trend{
    margin-top:7px!important;
  }
}

/* Mobile compact dashboard filter 20260712 */
@media (max-width: 720px){
  .topbar{
    padding:12px 14px 10px!important;
    gap:9px!important;
  }
  .topbar-left .eyebrow{font-size:9px!important;line-height:1.1!important;}
  .topbar-left h2{font-size:28px!important;margin:2px 0 0!important;}
  .topbar-actions > div{
    gap:7px!important;
    padding:8px!important;
    border-radius:18px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.20)!important;
  }
  #dashRangeChips{
    height:48px!important;
    padding:4px!important;
    gap:4px!important;
    border-radius:16px!important;
  }
  #dashRangeChips .chip{
    height:40px!important;
    min-height:40px!important;
    padding:0 6px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  #dateFilterControls{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:6px!important;
    width:100%!important;
  }
  #dateFilterControls > div{
    min-width:0!important;
    width:100%!important;
    gap:3px!important;
  }
  #dateFilterControls > div:nth-child(3){grid-column:1 / -1!important;}
  #dateFilterControls label{
    font-size:9px!important;
    line-height:1.1!important;
    padding:0 2px!important;
    letter-spacing:.04em!important;
  }
  #dateFilterControls input{
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 10px!important;
    border-radius:12px!important;
    font-size:12px!important;
    box-sizing:border-box!important;
  }
  #dateFilterControls button{
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 12px!important;
    border-radius:13px!important;
    font-size:13px!important;
  }
  #dashboardPage{padding-top:10px!important;}
}
@media (max-width: 390px){
  .topbar{padding-left:10px!important;padding-right:10px!important;}
  .topbar-left h2{font-size:26px!important;}
  #dateFilterControls{gap:5px!important;}
  #dateFilterControls input{height:34px!important;font-size:11px!important;}
  #dateFilterControls button{height:38px!important;}
}

/* Hide dashboard range shortcut chips 20260712 */
#dashRangeChips{
  display:none!important;
}
.topbar-actions > div{
  width:auto!important;
  max-width:620px!important;
  margin-left:auto!important;
}
#dateFilterControls{
  flex-wrap:nowrap!important;
}
@media (max-width: 980px){
  .topbar-actions > div{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
  }
}
@media (max-width: 720px){
  .topbar-actions > div{
    display:block!important;
  }
  #dateFilterControls{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:7px!important;
  }
  #dateFilterControls > div:nth-child(3){grid-column:1 / -1!important;}
}

/* Mobile dashboard date in title rail 20260712 */
@media (max-width: 720px){
  .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(182px,46vw)!important;
    align-items:start!important;
    column-gap:10px!important;
    row-gap:8px!important;
    padding:12px 14px 8px!important;
  }
  .topbar-left{
    grid-column:1!important;
    width:auto!important;
    min-width:0!important;
  }
  .topbar-left .eyebrow{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:8.5px!important;
  }
  .topbar-left h2{
    font-size:27px!important;
    line-height:1!important;
  }
  .topbar-actions{
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    align-self:start!important;
  }
  .topbar-actions > div{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #dateFilterControls{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
    width:100%!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
  }
  #dateFilterControls > div{
    min-width:0!important;
    width:100%!important;
    gap:2px!important;
  }
  #dateFilterControls label{
    font-size:8px!important;
    line-height:1!important;
    padding:0 2px!important;
    color:#9fb2d8!important;
    white-space:nowrap!important;
  }
  #dateFilterControls input{
    width:100%!important;
    height:30px!important;
    min-height:30px!important;
    padding:0 7px!important;
    border-radius:11px!important;
    font-size:10px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-sizing:border-box!important;
  }
  #dateFilterControls > div:nth-child(3){
    grid-column:1 / -1!important;
  }
  #dateFilterControls button{
    width:100%!important;
    height:34px!important;
    min-height:34px!important;
    margin-top:2px!important;
    border-radius:12px!important;
    font-size:12px!important;
    padding:0 10px!important;
  }
  #dashboardPage{padding-top:9px!important;}
}
@media (max-width: 390px){
  .topbar{grid-template-columns:minmax(0,1fr) minmax(160px,45vw)!important;column-gap:8px!important;padding-left:10px!important;padding-right:10px!important;}
  .topbar-left h2{font-size:24px!important;}
  #dateFilterControls{gap:4px!important;}
  #dateFilterControls input{height:28px!important;font-size:9.5px!important;padding:0 6px!important;}
  #dateFilterControls button{height:32px!important;font-size:11px!important;}
}

/* Mobile dashboard date row compact 20260712 */
@media (max-width: 720px){
  .topbar{
    grid-template-columns:minmax(0,1fr) minmax(238px,54vw)!important;
    column-gap:8px!important;
    row-gap:6px!important;
    padding-top:12px!important;
    padding-bottom:8px!important;
  }
  .topbar-left h2{font-size:27px!important;}
  #dateFilterControls{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important;
    align-items:end!important;
    gap:4px!important;
    width:100%!important;
  }
  #dateFilterControls > div:nth-child(3){
    grid-column:auto!important;
  }
  #dateFilterControls label{
    font-size:7.5px!important;
    line-height:1!important;
    margin:0!important;
    padding:0 1px!important;
  }
  #dateFilterControls input{
    height:30px!important;
    min-height:30px!important;
    padding:0 6px!important;
    border-radius:10px!important;
    font-size:9px!important;
  }
  #dateFilterControls button{
    width:36px!important;
    min-width:36px!important;
    height:30px!important;
    min-height:30px!important;
    margin:0!important;
    padding:0!important;
    border-radius:10px!important;
    font-size:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  #dateFilterControls button::after{
    content:'🔍';
    font-size:14px!important;
    line-height:1!important;
  }
}
@media (max-width: 390px){
  .topbar{grid-template-columns:minmax(0,1fr) minmax(218px,56vw)!important;column-gap:6px!important;}
  .topbar-left h2{font-size:24px!important;}
  #dateFilterControls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px!important;gap:3px!important;}
  #dateFilterControls input{height:28px!important;font-size:8.5px!important;padding:0 5px!important;}
  #dateFilterControls button{width:32px!important;min-width:32px!important;height:28px!important;min-height:28px!important;}
  #dateFilterControls button::after{font-size:13px!important;}
}

/* Mobile dashboard date fields polish 20260712 */
@media (max-width: 720px){
  .topbar{grid-template-columns:minmax(0,1fr) minmax(246px,56vw)!important;}
  #dateFilterControls{
    align-items:center!important;
    padding:3px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(255,255,255,.07)!important;
  }
  #dateFilterControls > div{gap:2px!important;}
  #dateFilterControls label{
    font-size:7px!important;
    line-height:1!important;
    opacity:.92!important;
    transform:translateY(1px)!important;
  }
  #dateFilterControls input{
    height:31px!important;
    min-height:31px!important;
    color:#f4f7ff!important;
    -webkit-text-fill-color:#f4f7ff!important;
    color-scheme:dark!important;
    background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055))!important;
    border:1px solid rgba(159,178,216,.22)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.12)!important;
  }
  #dateFilterControls input::-webkit-datetime-edit{padding:0!important;color:#f4f7ff!important;}
  #dateFilterControls input::-webkit-calendar-picker-indicator{opacity:.75;width:12px;height:12px;margin-left:1px;}
  #dateFilterControls button{
    height:31px!important;
    min-height:31px!important;
    box-shadow:0 10px 22px rgba(93,124,255,.25)!important;
  }
}
@media (max-width: 390px){
  .topbar{grid-template-columns:minmax(0,1fr) minmax(226px,58vw)!important;}
  #dateFilterControls{padding:2px!important;}
  #dateFilterControls label{font-size:6.5px!important;}
  #dateFilterControls input{height:29px!important;min-height:29px!important;font-size:8.5px!important;}
  #dateFilterControls button{height:29px!important;min-height:29px!important;}
}

/* Mobile dashboard date premium capsule 20260712 */
@media (max-width: 720px){
  .topbar{
    grid-template-columns:minmax(0,1fr) minmax(234px,55vw)!important;
    align-items:center!important;
    padding-top:11px!important;
    padding-bottom:9px!important;
  }
  .topbar-left h2{font-size:27px!important;line-height:1.02!important;}
  #dateFilterControls{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px!important;
    gap:3px!important;
    padding:4px!important;
    border-radius:17px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;
    border:1px solid rgba(132,155,210,.16)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.18)!important;
  }
  #dateFilterControls > div{gap:0!important;}
  #dateFilterControls label{
    height:0!important;
    overflow:hidden!important;
    opacity:0!important;
    padding:0!important;
    margin:0!important;
  }
  #dateFilterControls input{
    height:34px!important;
    min-height:34px!important;
    padding:0 6px!important;
    border-radius:13px!important;
    font-size:10px!important;
    text-align:center!important;
    background:rgba(6,12,30,.58)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.075)!important;
  }
  #dateFilterControls input::-webkit-datetime-edit{text-align:center!important;}
  #dateFilterControls input::-webkit-calendar-picker-indicator{display:none!important;}
  #dateFilterControls button{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    border-radius:13px!important;
    background:linear-gradient(135deg,#8da7ff,#5f7cff)!important;
    box-shadow:0 10px 20px rgba(93,124,255,.30),inset 0 1px 0 rgba(255,255,255,.22)!important;
  }
  #dateFilterControls button::after{font-size:14px!important;}
}
@media (max-width: 390px){
  .topbar{grid-template-columns:minmax(0,1fr) minmax(214px,57vw)!important;column-gap:6px!important;}
  .topbar-left h2{font-size:24px!important;}
  #dateFilterControls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 31px!important;padding:3px!important;}
  #dateFilterControls input{height:31px!important;min-height:31px!important;font-size:9px!important;padding:0 4px!important;}
  #dateFilterControls button{width:31px!important;min-width:31px!important;height:31px!important;min-height:31px!important;}
}

/* Premium mobile search icon button 20260712 */
@media (max-width: 720px){
  #dateFilterControls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px!important;}
  #dateFilterControls button{
    position:relative!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    border-radius:16px!important;
    background:
      radial-gradient(circle at 32% 24%,rgba(255,255,255,.48),transparent 22%),
      linear-gradient(145deg,#9fb4ff 0%,#6d8bff 46%,#5b6bff 100%)!important;
    border:1px solid rgba(255,255,255,.24)!important;
    box-shadow:
      0 12px 26px rgba(93,124,255,.34),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -8px 16px rgba(30,44,135,.22)!important;
    color:transparent!important;
    text-shadow:none!important;
  }
  #dateFilterControls button::before{
    content:''!important;
    position:absolute!important;
    left:11px!important;
    top:9px!important;
    width:12px!important;
    height:12px!important;
    border:2px solid rgba(255,255,255,.96)!important;
    border-radius:999px!important;
    box-shadow:0 1px 4px rgba(0,0,0,.18)!important;
  }
  #dateFilterControls button::after{
    content:''!important;
    position:absolute!important;
    left:22px!important;
    top:22px!important;
    width:9px!important;
    height:3px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.96)!important;
    transform:rotate(45deg)!important;
    transform-origin:left center!important;
    box-shadow:0 1px 4px rgba(0,0,0,.18)!important;
  }
}
@media (max-width: 390px){
  #dateFilterControls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px!important;}
  #dateFilterControls button{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;border-radius:14px!important;}
  #dateFilterControls button::before{left:10px!important;top:8px!important;width:10px!important;height:10px!important;}
  #dateFilterControls button::after{left:20px!important;top:20px!important;width:8px!important;height:3px!important;}
}

/* Premium mobile bottom navigation icons 20260712 */
@media (max-width: 720px){
  .bottom-nav{
    height:72px!important;
    padding:7px 10px max(8px,env(safe-area-inset-bottom,0px))!important;
    align-items:center!important;
    gap:5px!important;
    background:linear-gradient(180deg,rgba(10,15,34,.96),rgba(5,8,20,.98))!important;
    border-top:1px solid rgba(134,158,218,.18)!important;
    box-shadow:0 -18px 36px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)!important;
  }
  .bottom-nav-btn{
    position:relative!important;
    height:56px!important;
    padding:4px 2px!important;
    gap:4px!important;
    border-radius:16px!important;
    color:rgba(213,222,246,.56)!important;
    font-size:10px!important;
    letter-spacing:.01em!important;
  }
  .bottom-nav-btn .bn-icon{
    width:32px!important;
    height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(255,255,255,.06)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
    transition:.18s ease!important;
  }
  .bottom-nav-btn .bn-svg{
    width:19px!important;
    height:19px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.9!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  .bottom-nav-btn.active{
    color:#8fb0ff!important;
  }
  .bottom-nav-btn.active .bn-icon{
    background:linear-gradient(145deg,rgba(103,132,255,.34),rgba(61,87,194,.20))!important;
    border-color:rgba(151,176,255,.38)!important;
    box-shadow:0 10px 24px rgba(93,124,255,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
  }
  .bottom-nav-btn.active::before{
    content:''!important;
    position:absolute!important;
    top:1px!important;
    width:18px!important;
    height:3px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#79f2c0,#8ea7ff)!important;
    box-shadow:0 0 12px rgba(121,242,192,.42)!important;
  }
  .bottom-nav-btn span:not(.bn-icon):not(.nav-badge){
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* Mobile nav safety and hidden date controls 20260712 */
@media (max-width: 720px){
  #dateFilterControls[style*="display: none"],
  #dateFilterControls[style*="display:none"]{
    display:none!important;
  }
  .bottom-nav{
    height:64px!important;
    min-height:64px!important;
    padding:4px 8px max(6px,env(safe-area-inset-bottom,0px))!important;
    pointer-events:auto!important;
  }
  .bottom-nav-btn{
    height:52px!important;
    min-height:52px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .bottom-nav-btn .bn-icon{
    width:30px!important;
    height:28px!important;
  }
  .main-area{
    padding-bottom:0!important;
  }
  .chat-list-item,
  .conversation-item,
  [data-user-id],
  [data-chat-id]{
    pointer-events:auto!important;
  }
}

/* Mobile Chat Center search-first layout 20260712 */
@media (max-width: 768px){
  #chatPage .chat-shell.mobile-chat-search-first{
    display:flex!important;
    flex-direction:column!important;
    position:relative!important;
    height:calc(100dvh - 57px - 64px)!important;
    overflow:hidden!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head{
    order:1!important;
    flex:0 0 auto!important;
    position:relative!important;
    z-index:8!important;
    padding:12px 16px 10px!important;
    border-bottom:1px solid rgba(134,158,218,.13)!important;
    background:linear-gradient(180deg,rgba(8,13,31,.96),rgba(8,13,31,.84))!important;
    box-shadow:0 14px 28px rgba(0,0,0,.20)!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head h3{
    margin:0 0 8px!important;
    font-size:15px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-wrap input{
    height:42px!important;
    border-radius:16px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #storeNavPanel{
    order:2!important;
    display:block!important;
    position:relative!important;
    flex:0 0 auto!important;
    max-height:94px!important;
    min-height:70px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    z-index:6!important;
    padding:8px 10px 9px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(134,158,218,.12)!important;
    background:linear-gradient(180deg,rgba(8,13,31,.86),rgba(7,10,24,.74))!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #storeNavPanel .store-nav-head{
    padding:0 6px 6px!important;
    font-size:11px!important;
    color:#dfe8ff!important;
    text-transform:none!important;
    letter-spacing:0!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #storeNavContent{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    min-width:max-content!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .storeNavItem{
    flex:0 0 auto!important;
    min-width:118px!important;
    margin:0!important;
    padding:8px 10px!important;
    border-radius:16px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #chatListPanel{
    order:3!important;
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    z-index:4!important;
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    overflow:hidden!important;
    transform:none!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #filterRow{
    flex:0 0 auto!important;
    padding:10px 16px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #chatList{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding-bottom:88px!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .chat-window{
    top:0!important;
    bottom:0!important;
    z-index:20!important;
  }
}

/* Mobile Chat Center slide layering fix 20260712 */
@media (max-width: 768px){
  #chatPage .chat-shell.mobile-chat-search-first{
    position:relative!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #chatListPanel{
    transform:translateX(0)!important;
    transition:transform .24s cubic-bezier(.4,0,.2,1)!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #chatListPanel.slide-out{
    transform:translateX(-100%)!important;
    pointer-events:none!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .chat-window{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:20!important;
    transform:translateX(100%)!important;
    transition:transform .24s cubic-bezier(.4,0,.2,1)!important;
    background:var(--bg)!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .chat-window.slide-in{
    transform:translateX(0)!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .chat-window:not(.slide-in){
    pointer-events:none!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #chatListPanel:not(.slide-out){
    pointer-events:auto!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #replyBox,
  #chatPage .chat-shell.mobile-chat-search-first #chatComposer,
  #chatPage .chat-shell.mobile-chat-search-first .composer{
    z-index:24!important;
  }
}

/* Mobile Chat Center room wrapper slide fix 20260712 */
@media (max-width: 768px){
  #chatPage .chat-shell.mobile-chat-search-first .chat-room-wrap,
  #chatPage .chat-shell.mobile-chat-search-first .chat-window{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:20!important;
    width:100%!important;
    min-height:0!important;
    transform:translateX(100%)!important;
    transition:transform .24s cubic-bezier(.4,0,.2,1)!important;
    background:var(--bg)!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .chat-room-wrap.slide-in,
  #chatPage .chat-shell.mobile-chat-search-first .chat-window.slide-in{
    transform:translateX(0)!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .chat-room-wrap:not(.slide-in),
  #chatPage .chat-shell.mobile-chat-search-first .chat-window:not(.slide-in){
    pointer-events:none!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #chatListPanel:not(.slide-out){
    z-index:10!important;
  }
}

/* Mobile Chat Center compact controls 20260712 */
@media (max-width: 768px){
  #chatPage .chat-item-row{
    touch-action:pan-y!important;
    cursor:pointer!important;
  }
  #chatPage .chat-item-row:hover{
    background:inherit!important;
  }
  #chatPage .chat-item-row.active:hover{
    background:rgba(124,156,255,.12)!important;
  }
  #chatPage .chat-item-row:hover .chat-dot-btn{
    display:none!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head{
    padding:8px 14px 7px!important;
    border-bottom-color:rgba(134,158,218,.10)!important;
    box-shadow:0 10px 20px rgba(0,0,0,.16)!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head h3{
    margin:0 0 6px!important;
    font-size:13px!important;
    line-height:1.1!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-wrap{
    min-height:34px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-wrap input{
    height:34px!important;
    min-height:34px!important;
    border-radius:14px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    font-size:13px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-ico{
    width:28px!important;
    height:28px!important;
    font-size:14px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #storeNavPanel{
    min-height:50px!important;
    max-height:60px!important;
    padding:6px 10px 7px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #storeNavPanel .store-nav-head{
    display:none!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #storeNavContent{
    gap:7px!important;
    align-items:center!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .storeNavItem{
    min-width:96px!important;
    min-height:40px!important;
    padding:6px 9px!important;
    border-radius:14px!important;
    gap:7px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .storeIcon,
  #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .store-nav-icon,
  #chatPage .chat-shell.mobile-chat-search-first .storeNavItem [class*="icon"]{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    font-size:12px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .storeName,
  #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .store-nav-name,
  #chatPage .chat-shell.mobile-chat-search-first .storeNavItem span{
    font-size:12px!important;
    line-height:1.05!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #filterRow{
    padding:7px 14px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #filterDropdownBtn{
    min-height:38px!important;
    height:38px!important;
    border-radius:14px!important;
    padding:0 12px!important;
    font-size:13px!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first #chatList{
    padding-top:4px!important;
  }
}

/* Mobile Chat Center premium search field icon 20260712 */
@media (max-width: 768px){
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-wrap{
    position:relative!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-ico{
    font-size:0!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    border-radius:10px!important;
    display:grid!important;
    place-items:center!important;
    background:linear-gradient(145deg,rgba(99,157,255,.22),rgba(39,72,138,.24))!important;
    border:1px solid rgba(126,176,255,.32)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px rgba(54,112,255,.16)!important;
    color:transparent!important;
    overflow:hidden!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-ico::before{
    content:""!important;
    width:9px!important;
    height:9px!important;
    border:2px solid #8edcff!important;
    border-radius:50%!important;
    transform:translate(-1px,-1px)!important;
    box-sizing:border-box!important;
  }
  #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-ico::after{
    content:""!important;
    position:absolute!important;
    width:7px!important;
    height:2px!important;
    border-radius:999px!important;
    background:#8edcff!important;
    transform:translate(5px,5px) rotate(45deg)!important;
    box-shadow:0 0 7px rgba(142,220,255,.55)!important;
  }
}

/* Mobile Chat Center condensed top controls 20260722 */
@media (max-width: 768px){
  body[data-active-page="chat"] .topbar{
    min-height:0!important;
    padding:7px 12px 6px!important;
    display:block!important;
  }
  body[data-active-page="chat"] .topbar-left{
    width:100%!important;
  }
  body[data-active-page="chat"] .topbar-left .eyebrow{
    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    opacity:.68!important;
  }
  body[data-active-page="chat"] .topbar-left h2{
    margin-top:1px!important;
    font-size:22px!important;
    line-height:1!important;
  }
  body[data-active-page="chat"] .topbar-actions{
    display:none!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first{
    height:calc(100dvh - 42px - 64px)!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head{
    padding:6px 12px!important;
    box-shadow:0 8px 18px rgba(0,0,0,.14)!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head h3{
    display:none!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-wrap{
    min-height:32px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-wrap input{
    height:32px!important;
    min-height:32px!important;
    padding-left:38px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first > .chat-list-head .search-ico{
    left:8px!important;
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    border-radius:9px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first #storeNavPanel{
    min-height:42px!important;
    max-height:46px!important;
    padding:5px 8px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first #storeNavContent{
    gap:6px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .storeNavItem{
    min-width:82px!important;
    min-height:32px!important;
    padding:4px 8px!important;
    border-radius:13px!important;
    gap:6px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .sni-icon,
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .storeIcon,
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .store-nav-icon,
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .storeNavItem [class*="icon"]{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    border-radius:9px!important;
    font-size:11px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .sni-name,
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .storeName,
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .store-nav-name{
    max-width:64px!important;
    font-size:11px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .storeNavItem .sni-count{
    min-width:18px!important;
    padding:1px 5px!important;
    font-size:10px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first #filterRow{
    padding:6px 12px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first #filterDropdownBtn{
    height:34px!important;
    min-height:34px!important;
    padding:0 12px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first #oaFilterWrap{
    padding:6px 10px 5px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first #oaFilter{
    gap:5px!important;
    padding-bottom:4px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .oa-filter-scope{
    display:none!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .oaFilterBtn,
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .oa-filter-btn{
    min-height:22px!important;
    max-width:108px!important;
    padding:4px 7px!important;
    border-radius:10px!important;
    font-size:9.5px!important;
    gap:4px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first .oa-filter-dot{
    width:5px!important;
    height:5px!important;
    box-shadow:0 0 0 2px rgba(94,234,212,.12)!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first #oaFilterScrollbar{
    height:2px!important;
    margin-top:0!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first #chatList{
    padding-top:3px!important;
  }
}
@media (max-width: 390px){
  body[data-active-page="chat"] .topbar{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body[data-active-page="chat"] .topbar-left h2{
    font-size:20px!important;
  }
  body[data-active-page="chat"] #chatPage .chat-shell.mobile-chat-search-first{
    height:calc(100dvh - 39px - 64px)!important;
  }
}

#chatBackBtn{display:none}

/* Mobile Chat Center composer open fix 20260712 */
@media (max-width: 768px){
  #chatPage .chat-shell.mobile-chat-room-open #headerActions{
    gap:5px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #statusPendingBtn,
  #chatPage .chat-shell.mobile-chat-room-open #statusDoneBtn{
    min-width:76px!important;
    width:auto!important;
    height:31px!important;
    padding:0 8px!important;
    border-radius:12px!important;
    font-size:10.5px!important;
    box-shadow:0 6px 16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.09)!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #statusPendingBtn::before,
  #chatPage .chat-shell.mobile-chat-room-open #statusDoneBtn::before{
    width:6px!important;
    height:6px!important;
    box-shadow:0 0 0 3px rgba(255,255,255,.05),0 0 10px currentColor!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open .chat-room-wrap,
  #chatPage .chat-shell.mobile-chat-search-first.mobile-chat-room-open .chat-room-wrap{
    display:flex!important;
    flex-direction:column!important;
    transform:translateX(0)!important;
    pointer-events:auto!important;
    z-index:40!important;
    padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px))!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #messages{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding-bottom:12px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:60!important;
    margin:6px 10px 8px!important;
    flex-shrink:0!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #chatBackBtn{
    display:flex!important;
  }
  #chatBackBtn{
    display:none;
    align-items:center;
    justify-content:center;
    gap:5px;
    height:30px;
    min-width:58px;
    padding:0 9px 0 6px;
    margin-right:6px;
    border:1px solid rgba(142,220,255,.20);
    border-radius:999px;
    background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
    color:#eef6ff;
    font:inherit;
    font-size:12px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:0 8px 20px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    -webkit-tap-highlight-color:transparent;
  }
  #chatBackBtn .chat-back-icon{
    width:20px;
    height:20px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:rgba(142,220,255,.14);
    color:#9ee8ff;
    font-size:14px;
    font-weight:900;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 12px rgba(82,197,255,.18);
  }
  #chatBackBtn .chat-back-label{
    transform:translateY(-.5px);
  }
  #chatPage .chat-shell.mobile-chat-room-open #chatListPanel{
    pointer-events:none!important;
  }
}

/* Mobile chat header readability polish 20260719 */
@media (max-width: 768px){
  #chatPage .chat-shell.mobile-chat-room-open #chatHeader{
    min-height:64px!important;
    padding:8px 10px!important;
    gap:8px!important;
    align-items:center!important;
    background:
      linear-gradient(180deg,rgba(15,25,55,.94),rgba(9,15,32,.88))!important;
    border-bottom:1px solid rgba(130,166,255,.16)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.16)!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #chatBackBtn{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    padding:0!important;
    margin-right:0!important;
    border-radius:15px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #chatBackBtn .chat-back-label{
    display:none!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #chatBackBtn .chat-back-icon{
    width:24px!important;
    height:24px!important;
    font-size:16px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #headerAvatar{
    width:36px!important;
    height:36px!important;
    border-radius:13px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #headerInfo{
    flex:1 1 auto!important;
    min-width:76px!important;
    overflow:hidden!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #headerName{
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.18!important;
    font-weight:850!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #headerOaName{
    min-height:0!important;
    margin-top:4px!important;
    font-size:0!important;
    line-height:1!important;
    overflow:hidden!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open .header-oa-pill{
    max-width:100%!important;
    height:22px!important;
    padding:0 8px!important;
    gap:5px!important;
    border-radius:999px!important;
    font-size:10.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    background:linear-gradient(135deg,rgba(84,169,255,.20),rgba(95,232,255,.10))!important;
    border-color:rgba(121,207,255,.28)!important;
    color:#d8f5ff!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open .header-oa-pill::before{
    width:5px!important;
    height:5px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #headerActions{
    flex:0 0 auto!important;
    gap:5px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #statusPendingBtn,
  #chatPage .chat-shell.mobile-chat-room-open #statusDoneBtn{
    min-width:58px!important;
    height:30px!important;
    padding:0 7px!important;
    border-radius:13px!important;
    font-size:10px!important;
    gap:4px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #statusPendingBtn::before,
  #chatPage .chat-shell.mobile-chat-room-open #statusDoneBtn::before{
    width:5px!important;
    height:5px!important;
    box-shadow:0 0 8px currentColor!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open .header-icon-btn{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:14px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045))!important;
    border-color:rgba(142,220,255,.20)!important;
  }
}

@media (max-width: 390px){
  #chatPage .chat-shell.mobile-chat-room-open #chatHeader{
    padding-left:8px!important;
    padding-right:8px!important;
    gap:6px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #chatBackBtn{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #headerAvatar{
    width:32px!important;
    height:32px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #statusPendingBtn,
  #chatPage .chat-shell.mobile-chat-room-open #statusDoneBtn{
    min-width:52px!important;
    height:28px!important;
    padding:0 6px!important;
    font-size:9.5px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open .header-icon-btn{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }
}

/* Mobile Chat Center compact composer polish 20260712 */
@media (max-width: 768px){
  #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    min-height:auto!important;
    padding:9px 10px!important;
    gap:7px!important;
    row-gap:7px!important;
    border-radius:18px!important;
    align-items:center!important;
    align-content:center!important;
    box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 1px rgba(124,213,255,.06) inset!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #stickerBtn,
  #chatPage .chat-shell.mobile-chat-room-open #imgBtn,
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:13px!important;
    padding:0!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn.reply-script-btn{
    width:auto!important;
    min-width:88px!important;
    height:36px!important;
    padding:0 12px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn{
    width:52px!important;
    height:36px!important;
    min-width:52px!important;
    padding:0 9px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #replyInput{
    height:40px!important;
    min-height:40px!important;
    border-radius:14px!important;
    padding:0 13px!important;
    font-size:13px!important;
    flex:1 1 calc(100% - 74px)!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    height:40px!important;
    width:62px!important;
    min-width:62px!important;
    border-radius:14px!important;
    padding:0 12px!important;
    font-size:13px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #messages{
    padding:12px 14px 8px!important;
  }
}

/* LINE-like mobile composer 20260712 */
@media (max-width: 768px){
  #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    flex-wrap:nowrap!important;
    min-height:54px!important;
    padding:7px 8px!important;
    gap:6px!important;
    border-radius:24px!important;
    background:linear-gradient(180deg,rgba(12,18,34,.92),rgba(6,10,22,.96))!important;
    border:1px solid rgba(145,174,255,.14)!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #stickerBtn,
  #chatPage .chat-shell.mobile-chat-room-open #imgBtn,
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn,
  #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn,
  #chatPage .chat-shell.mobile-chat-room-open #replyInput,
  #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    order:0!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #stickerBtn,
  #chatPage .chat-shell.mobile-chat-room-open #imgBtn,
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.065)!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn.reply-script-btn{
    width:32px!important;
    min-width:32px!important;
    padding:0!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn.reply-script-btn span{
    display:none!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn{
    width:40px!important;
    min-width:40px!important;
    height:32px!important;
    border-radius:999px!important;
    padding:0!important;
    font-size:11px!important;
    letter-spacing:0!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #replyInput{
    flex:1 1 auto!important;
    min-width:72px!important;
    height:36px!important;
    min-height:36px!important;
    border-radius:999px!important;
    padding:0 12px!important;
    background:rgba(255,255,255,.07)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    width:42px!important;
    min-width:42px!important;
    height:36px!important;
    border-radius:999px!important;
    padding:0!important;
    font-size:12px!important;
  }
}

@media (max-width: 390px){
  #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    gap:5px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #stickerBtn,
  #chatPage .chat-shell.mobile-chat-room-open #imgBtn,
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn{
    width:36px!important;
    min-width:36px!important;
    font-size:10px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    width:38px!important;
    min-width:38px!important;
  }
}


/* Mobile Chat Center keyboard docking like LINE 20260712 */
@media (max-width: 768px){
  body.mobile-chat-keyboard-open .bottom-nav{
    transform:translateY(120%)!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body.mobile-chat-keyboard-open .app-shell{
    grid-template-rows:1fr 0px!important;
    height:100dvh!important;
  }
  body.mobile-chat-keyboard-open .main-area{
    overflow:hidden!important;
  }
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open .chat-room-wrap{
    padding-bottom:0!important;
  }
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #messages{
    padding-bottom:72px!important;
  }
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    position:fixed!important;
    left:6px!important;
    right:6px!important;
    bottom:calc(var(--mobile-keyboard-offset, 0px) + max(5px, env(safe-area-inset-bottom, 0px)))!important;
    margin:0!important;
    z-index:1200!important;
    min-height:50px!important;
    border-radius:24px!important;
    box-shadow:0 8px 24px rgba(0,0,0,.38),0 0 0 1px rgba(133,174,255,.14) inset!important;
    transform:translateZ(0)!important;
  }
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyInput{
    height:34px!important;
    min-height:34px!important;
    font-size:13px!important;
  }
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    height:34px!important;
    min-height:34px!important;
  }
}


/* Hide mobile bottom nav while reading a chat room 20260712 */
@media (max-width: 768px){
  body.mobile-chat-room-focused .bottom-nav{
    transform:translateY(120%)!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body.mobile-chat-room-focused .app-shell{
    grid-template-rows:1fr 0px!important;
    height:100dvh!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open .chat-room-wrap{
    padding-bottom:max(8px, env(safe-area-inset-bottom, 0px))!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #messages{
    padding-bottom:10px!important;
  }
  body.mobile-chat-room-focused:not(.mobile-chat-keyboard-open) #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    margin:6px 8px max(7px, env(safe-area-inset-bottom, 0px))!important;
  }
}

/* Hard remove legacy note header button 20260712 */
#noteToggleBtn{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Report real-data polish 20260712 */
#reportPage{
  letter-spacing:0!important;
}
#reportPage .panel{
  border-color:rgba(148,163,184,.16)!important;
}
#reportPage .report-filter-panel{
  align-items:flex-end!important;
  padding:14px!important;
  background:linear-gradient(180deg,rgba(17,24,43,.94),rgba(9,14,27,.98))!important;
  border:1px solid rgba(124,156,255,.16)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.22)!important;
}
#reportPage .report-filter-panel > div{
  min-width:132px;
}
#reportPage .report-filter-panel input,
#reportPage .report-filter-panel select{
  min-height:38px!important;
  width:100%!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  border-radius:10px!important;
  color:#eef5ff!important;
  letter-spacing:0!important;
}
#reportPage .report-filter-panel .chip-row{
  gap:6px!important;
}
#reportPage .report-filter-panel .chip{
  min-height:38px;
  padding:0 12px!important;
  border-radius:10px!important;
}
#reportPage .report-search-btn{
  min-height:38px!important;
  border-radius:10px!important;
}
#reportPage .report-scope-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
  padding:0 2px;
}
#reportPage .report-scope-copy{
  color:#8fa2c0;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
#reportPage .report-store-select{
  min-height:36px;
  padding:0 12px;
  background:rgba(13,20,39,.86);
  border:1px solid rgba(148,163,184,.18);
  border-radius:999px;
  color:#eef5ff;
  font:inherit;
  font-size:12px;
  font-weight:700;
  outline:none;
  color-scheme:dark;
}
#reportPage .report-dashboard-link{
  min-height:36px;
  border-radius:999px;
}
#reportPage .report-cycle-card{
  border-radius:14px!important;
  background:linear-gradient(135deg,rgba(124,156,255,.13),rgba(34,197,94,.06))!important;
  border:1px solid rgba(124,156,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#reportPage .report-tab-row .chip{
  min-height:36px;
  border-radius:999px!important;
}
#reportPage .report-stats-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
#reportPage .report-stats-grid .stat-card{
  min-height:92px!important;
  padding:16px 14px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045))!important;
}
#reportPage .report-stats-grid .stat-label{
  font-size:11px!important;
  color:#9db0d0!important;
  margin-bottom:6px!important;
}
#reportPage .report-stats-grid .stat-value{
  font-size:28px!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums!important;
}
#reportPage .report-chart-grid{
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr)!important;
  gap:12px!important;
}
#reportPage .report-chart-panel,
#reportPage .report-summary-panel,
#reportPage .report-ranking-panel,
#reportPage .report-breakdown-panel{
  border-radius:14px!important;
  padding:16px!important;
  background:linear-gradient(180deg,rgba(13,20,39,.98),rgba(8,13,27,.98))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
}
#reportPage canvas{
  max-width:100%!important;
}
#reportPage .report-chart-scroll{
  margin:0 -4px;
  padding:0 4px 6px;
  scrollbar-width:thin;
}
#reportPage .report-list{
  display:grid;
  gap:9px;
}
#reportPage .report-list li{
  padding:11px 0!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
}
#reportPage .report-list span{
  color:#9db0d0!important;
}
#reportPage .report-list strong{
  color:#eef5ff!important;
}
#reportPage .report-breakdown-row{
  display:grid;
  grid-template-columns:minmax(120px,1.15fr) minmax(120px,1.4fr) repeat(3,minmax(64px,.55fr));
  gap:10px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(148,163,184,.11);
}
#reportPage .report-breakdown-row:last-child{
  border-bottom:0;
}
#reportPage .report-breakdown-brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
#reportPage .report-breakdown-brand strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
#reportPage .report-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(255,255,255,.04);
}
#reportPage .report-breakdown-track{
  height:8px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}
#reportPage .report-breakdown-track span{
  display:block;
  height:100%;
  border-radius:999px;
}
#reportPage .report-breakdown-metric{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
#reportPage .report-breakdown-metric b{
  display:block;
  font-size:13px;
  color:#eef5ff;
}
#reportPage .report-breakdown-metric span{
  display:block;
  margin-top:1px;
  font-size:10px;
  color:#8fa2c0;
}

@media (max-width: 980px){
  #reportPage .report-chart-grid{
    grid-template-columns:1fr!important;
  }
  #reportPage .report-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width: 768px){
  #reportPage{
    padding:10px!important;
  }
  #reportPage .report-scope-row{
    gap:8px;
    margin-bottom:10px;
    padding:0;
  }
  #reportPage .report-scope-copy{
    flex-basis:100%;
    font-size:11px;
  }
  #reportPage .report-scope-row .chip-row{
    gap:6px;
  }
  #reportPage .report-scope-row .chip{
    min-height:34px;
    padding:0 11px!important;
    border-radius:999px!important;
  }
  #reportPage .report-store-select{
    flex:1 1 130px;
    min-width:120px;
  }
  #reportPage .report-dashboard-link{
    flex:0 0 auto;
  }
  #reportPage .report-filter-panel{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    padding:12px!important;
  }
  #reportPage .report-filter-panel > div{
    min-width:0!important;
  }
  #reportPage .report-filter-panel > div:nth-child(3),
  #reportPage .report-filter-panel > div:nth-child(4){
    grid-column:1 / -1;
  }
  #reportPage .report-filter-panel .report-search-btn,
  #reportPage .report-filter-panel .ghost-btn{
    width:100%!important;
    min-height:40px!important;
  }
  #reportPage .report-cycle-card{
    grid-template-columns:1fr!important;
    text-align:left!important;
    padding:13px!important;
  }
  #reportPage .report-cycle-card > div:last-child{
    text-align:left!important;
  }
  #reportPage .report-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #reportPage .report-stats-grid .stat-card{
    min-height:82px!important;
    padding:13px 12px!important;
    align-items:center!important;
    text-align:center!important;
  }
  #reportPage .report-stats-grid .stat-value{
    font-size:24px!important;
  }
  #reportPage .report-chart-panel,
  #reportPage .report-summary-panel,
  #reportPage .report-ranking-panel,
  #reportPage .report-breakdown-panel{
    padding:13px!important;
    border-radius:13px!important;
  }
  #reportPage .report-breakdown-row{
    grid-template-columns:1fr auto;
    gap:8px 10px;
  }
  #reportPage .report-breakdown-track{
    grid-column:1 / -1;
    order:3;
  }
  #reportPage .report-breakdown-metric{
    text-align:right;
  }
}

@media (max-width: 390px){
  #reportPage .report-filter-panel{
    grid-template-columns:1fr!important;
  }
  #reportPage .report-filter-panel > div{
    grid-column:1 / -1;
  }
  #reportPage .report-stats-grid .stat-value{
    font-size:22px!important;
  }
}

/* Realtime Operations stable chart reset 20260712 */
#realtimeBars.has-active-bars[data-range="today"]{
  grid-template-columns:repeat(auto-fit,minmax(42px,1fr))!important;
}
#realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
  display:contents!important;
}
#realtimeBars .bar-col.is-zero .bar{
  height:0!important;
  min-height:0!important;
  opacity:0!important;
  box-shadow:none!important;
}
#realtimeBars .bar-count.zero{
  display:none!important;
}
#realtimeBars.is-empty{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:178px!important;
  height:178px!important;
  padding:22px!important;
  overflow:hidden!important;
}
#realtimeBars.is-empty::before{
  opacity:.45!important;
}
#realtimeBars .realtime-empty{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  width:100%;
  min-height:120px;
  border-radius:18px;
  border:1px dashed rgba(142,220,255,.26);
  background:linear-gradient(135deg,rgba(142,220,255,.08),rgba(124,156,255,.045));
}
#realtimeBars .realtime-empty strong{
  color:#eaf3ff;
  font-size:15px;
  font-weight:900;
}
#realtimeBars .realtime-empty span{
  color:#9fb2d1;
  font-size:12px;
  font-weight:650;
  line-height:1.35;
  max-width:260px;
  white-space:normal;
}
@media (max-width:720px){
  #realtimeBars.has-active-bars[data-range="today"]{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(56px,1fr))!important;
    gap:10px!important;
    height:204px!important;
    min-height:204px!important;
    padding:52px 14px 34px!important;
    overflow:hidden!important;
  }
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
    display:contents!important;
    width:auto!important;
    min-width:0!important;
    padding-right:0!important;
  }
  #realtimeBars.has-active-bars[data-range="today"] .bar-col,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero{
    display:flex!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  #realtimeBars.has-active-bars[data-range="today"] .bar-count.zero{
    display:none!important;
  }
  #realtimeBars.is-empty{
    height:172px!important;
    min-height:172px!important;
    padding:18px!important;
  }
}

/* Realtime Operations: fixed 24-hour frame to stop live-update jumping 20260712 */
#realtimeBars.has-active-bars[data-range="today"]{
  display:grid!important;
  grid-template-columns:repeat(24,minmax(14px,1fr))!important;
  gap:7px!important;
  overflow:hidden!important;
}
#realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
  display:contents!important;
  width:auto!important;
  min-width:0!important;
  padding-right:0!important;
}
#realtimeBars.has-active-bars[data-range="today"] .bar-col,
#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero{
  display:flex!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
}
#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{
  height:0!important;
  min-height:0!important;
  opacity:0!important;
  transform:none!important;
}
#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar i{
  display:none!important;
}
@media (max-width:720px){
  #realtimeBars.has-active-bars[data-range="today"]{
    display:block!important;
    height:214px!important;
    min-height:214px!important;
    padding:52px 14px 34px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(142,220,255,.42) rgba(255,255,255,.05)!important;
  }
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
    display:grid!important;
    grid-template-columns:repeat(24,38px)!important;
    grid-auto-flow:column!important;
    align-items:end!important;
    gap:9px!important;
    width:max-content!important;
    min-width:max-content!important;
    height:100%!important;
    padding-right:18px!important;
  }
  #realtimeBars.has-active-bars[data-range="today"] .bar-col,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
  #realtimeBars.has-active-bars[data-range="today"] .bar-count.zero{
    display:none!important;
  }
}

/* Realtime Operations: fixed baseline, only numbers/heights update 20260712 */
#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{
  height:7%!important;
  min-height:6px!important;
  opacity:.16!important;
  box-shadow:none!important;
  background:rgba(142,220,255,.24)!important;
}
#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar i{
  display:none!important;
}
#realtimeBars.has-active-bars[data-range="today"] .bar-count.zero{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:.38!important;
  color:#8fa5c8!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.055)!important;
}
#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero span{
  opacity:.46!important;
}
@media (max-width:720px){
  #realtimeBars.has-active-bars[data-range="today"] .bar-count.zero{
    display:inline-flex!important;
    min-width:20px!important;
    visibility:visible!important;
  }
}

/* Chat composer + admin message footer restore 20260712 */
#replyBox{
  align-items:flex-end!important;
}
#replyInput{
  flex:1 1 220px!important;
  min-width:0!important;
  min-height:42px!important;
  height:42px;
  max-height:112px!important;
  padding:11px 14px!important;
  line-height:1.35!important;
  resize:none!important;
  overflow-y:hidden;
  white-space:pre-wrap;
}
#replyInput::-webkit-scrollbar{width:4px}
#replyInput::-webkit-scrollbar-thumb{background:rgba(148,163,184,.32);border-radius:999px}
.msg.admin{
  padding-bottom:8px;
}
.msg.image{
  padding:8px 9px 7px;
  line-height:1.25;
}
.msgText{
  white-space:pre-wrap;
}
.msgOlderBtn{
  align-self:center;
  display:block;
  margin:8px auto 12px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.22);
  color:#cfefff;
  background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(14,165,233,.10));
  font-size:11px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(2,6,23,.16),inset 0 1px 0 rgba(255,255,255,.08);
}
.msgOlderBtn:hover{
  border-color:rgba(186,230,253,.38);
  background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(14,165,233,.16));
}
.msgImageWrap{
  appearance:none;
  border:0;
  padding:0;
  font:inherit;
  cursor:zoom-in;
  position:relative;
  display:inline-block;
  max-width:240px;
  min-width:150px;
  min-height:112px;
  overflow:hidden;
  border-radius:10px;
  background:
    linear-gradient(135deg,rgba(148,163,184,.16),rgba(59,130,246,.10));
}
.msgImage{
  display:block;
  width:auto;
  max-width:100%;
  max-height:360px;
  border-radius:10px;
}
.msgImage.is-lazy{
  opacity:0;
}
.msgImage.is-loaded{
  opacity:1;
  transition:opacity .18s ease;
}
.previewImageWrap{
  display:inline-block;
  width:160px;
  min-height:110px;
  overflow:hidden;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(148,163,184,.16),rgba(59,130,246,.10));
}
.previewImage{
  display:block;
  max-width:200px;
  width:100%;
  border-radius:8px;
}
.previewImage.is-lazy{opacity:0}
.previewImage.is-loaded{
  opacity:1;
  transition:opacity .18s ease;
}
.msgImageBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
  min-height:20px;
}
.msgImageBar .msgMeta{
  margin:0;
  font-size:12px;
  opacity:.74;
}
.msgImageBar .msgAdminFooter{
  margin:0;
  padding:0;
  border:0;
  justify-content:flex-start;
  flex:1 1 auto;
  min-width:0;
}
.msgImageSave{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(56,189,248,.12));
  border:1px solid rgba(125,211,252,.24);
  color:rgba(235,247,255,.9);
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  line-height:1;
  flex:0 0 auto;
  box-shadow:0 6px 14px rgba(14,165,233,.10),inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
}
.msgImageSave::before{
  content:"↓";
  width:13px;
  height:13px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#60a5fa,#38bdf8);
  color:#03132d;
  font-size:10px;
  font-weight:950;
}
.msgImageSave:hover{
  transform:translateY(-1px);
  border-color:rgba(186,230,253,.42);
  background:linear-gradient(135deg,rgba(59,130,246,.28),rgba(56,189,248,.18));
}
.image-lightbox{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,7,18,.78);
  backdrop-filter:blur(18px);
}
.image-lightbox.show{
  display:flex;
}
.image-lightbox-card{
  position:relative;
  width:min(96vw,980px);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(15,23,42,.94),rgba(2,6,23,.92));
  box-shadow:0 30px 90px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.10);
}
.image-lightbox-card img{
  display:block;
  max-width:100%;
  max-height:calc(92vh - 96px);
  object-fit:contain;
  border-radius:14px;
  background:rgba(0,0,0,.22);
}
.image-lightbox-close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  color:#ffffff;
  background:rgba(15,23,42,.76);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.image-lightbox-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.image-lightbox-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  color:#ffffff;
  text-decoration:none;
  font-size:13px;
  font-weight:850;
  background:rgba(255,255,255,.08);
}
.image-lightbox-actions a:last-child{
  color:#07111f;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
body.image-lightbox-open{
  overflow:hidden;
}
html[data-ui-theme="white"] .image-lightbox{
  background:rgba(15,23,42,.42);
}
html[data-ui-theme="white"] .image-lightbox-card{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,252,.96));
  border-color:rgba(100,116,139,.28);
  box-shadow:0 30px 90px rgba(15,23,42,.24),inset 0 1px 0 rgba(255,255,255,.94);
}
html[data-ui-theme="white"] .image-lightbox-close,
html[data-ui-theme="white"] .image-lightbox-actions a{
  color:#0f172a;
  border-color:rgba(100,116,139,.26);
  background:rgba(255,255,255,.90);
}
html[data-ui-theme="white"] .image-lightbox-actions a:last-child{
  color:#1f1303;
  background:linear-gradient(135deg,#f4c75c,#d97706);
}
@media(max-width:720px){
  .msgWrap{
    max-width:82%;
  }
  .msgHeader{
    max-width:100%;
    font-size:10.5px;
  }
  .msgHeader span{
    max-width:42vw;
  }
  .image-lightbox{
    padding:10px;
  }
  .image-lightbox-card{
    width:100%;
    max-height:94vh;
    padding:10px;
    border-radius:18px;
  }
  .image-lightbox-card img{
    max-height:calc(94vh - 92px);
  }
  .image-lightbox-actions{
    justify-content:stretch;
  }
  .image-lightbox-actions a{
    flex:1;
  }
}
.msgAdminFooter{
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  color:rgba(236,244,255,.78);
  font-size:10.5px;
  line-height:1.2;
  max-width:100%;
}
.msgAdminFooter span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
}
.msgAdminFooter em{
  flex-shrink:0;
  font-style:normal;
  color:rgba(236,244,255,.58);
  font-weight:700;
}

/* Regression guard 20260712: hide composer until a chat is selected and keep controls compact. */
.chat-shell.no-active-chat #replyBox,
.chat-shell.no-active-chat #typingIndicator,
.chat-shell.no-active-chat #stickerPanel{
  display:none!important;
}

#replyBox{
  gap:6px!important;
  padding:8px 10px!important;
}
#replyBox .reply-icon-btn{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  padding:0!important;
  border-radius:10px!important;
}
#replyBox .reply-script-btn{
  width:auto!important;
  min-width:56px!important;
  max-width:68px!important;
  padding:0 8px!important;
  gap:4px!important;
}
#replyBox .reply-script-btn span{
  font-size:11px!important;
  white-space:nowrap;
}
#replyBox #flexSendBtn{
  height:32px!important;
  min-width:42px!important;
  padding:0 9px!important;
  font-size:11px!important;
  border-radius:10px!important;
}
#replyBox #sendBtn{
  height:34px!important;
  min-width:48px!important;
  padding:0 12px!important;
  border-radius:11px!important;
  font-size:12px!important;
}
#replyBox #replyInput{
  flex:1 1 0!important;
  min-width:120px!important;
}

@media (max-width:1100px){
  #replyBox{
    gap:5px!important;
    padding:7px 8px!important;
  }
  #replyBox .reply-icon-btn{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }
  #replyBox .reply-script-btn{
    min-width:52px!important;
    max-width:62px!important;
    padding:0 7px!important;
  }
  #replyBox #flexSendBtn{
    min-width:38px!important;
    padding:0 7px!important;
  }
  #replyBox #sendBtn{
    min-width:44px!important;
    padding:0 10px!important;
  }
}

/* Mobile composer parity 20260713: keep the phone input bar like desktop, just tighter. */
@media (max-width:768px){
  #chatPage .chat-shell.mobile-chat-room-open #replyBox,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:flex-end!important;
    gap:5px!important;
    min-height:48px!important;
    padding:6px!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,rgba(13,20,38,.94),rgba(7,11,24,.98))!important;
    border:1px solid rgba(148,163,184,.18)!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #stickerBtn,
  #chatPage .chat-shell.mobile-chat-room-open #imgBtn,
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn{
    display:flex!important;
    flex:0 0 28px!important;
    width:28px!important;
    min-width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    padding:0!important;
    order:0!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn.reply-script-btn{
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    padding:0!important;
    gap:0!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn.reply-script-btn span{
    display:none!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    height:28px!important;
    border-radius:999px!important;
    padding:0!important;
    font-size:10.5px!important;
    order:0!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #replyInput,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyInput{
    flex:1 1 auto!important;
    order:0!important;
    min-width:0!important;
    width:auto!important;
    height:auto!important;
    min-height:32px!important;
    max-height:96px!important;
    padding:7px 11px!important;
    border-radius:16px!important;
    font-size:13px!important;
    line-height:1.35!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #sendBtn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    flex:0 0 42px!important;
    order:0!important;
    width:42px!important;
    min-width:42px!important;
    height:32px!important;
    min-height:32px!important;
    border-radius:999px!important;
    padding:0!important;
    font-size:12px!important;
  }
}

@media (max-width:390px){
  #chatPage .chat-shell.mobile-chat-room-open #replyBox,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    gap:4px!important;
    padding:5px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #stickerBtn,
  #chatPage .chat-shell.mobile-chat-room-open #imgBtn,
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn{
    flex-basis:26px!important;
    width:26px!important;
    min-width:26px!important;
    height:26px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #quickBtn.reply-script-btn{
    width:26px!important;
    min-width:26px!important;
    max-width:26px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn{
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
    height:26px!important;
    font-size:10px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #sendBtn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    flex-basis:38px!important;
    width:38px!important;
    min-width:38px!important;
  }
}

/* Composer align polish 20260713: when the textarea grows, keep controls near the top. */
#replyBox{
  align-items:flex-start!important;
}
#replyBox .reply-icon-btn,
#replyBox #flexSendBtn,
#replyBox #sendBtn{
  margin-top:3px!important;
}
#replyBox #replyInput{
  margin-top:0!important;
}

@media (max-width:768px){
  #chatPage .chat-shell.mobile-chat-room-open #replyBox,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    align-items:flex-start!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open .reply-icon-btn,
  #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn,
  #chatPage .chat-shell.mobile-chat-room-open #sendBtn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open .reply-icon-btn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    margin-top:2px!important;
  }
}

/* Chat ownership lock 20260713 */
#chatLockBanner{
  display:none;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-top:1px solid rgba(250,204,21,.15);
  border-bottom:1px solid rgba(250,204,21,.18);
  background:linear-gradient(90deg,rgba(245,158,11,.13),rgba(56,189,248,.08));
  color:#fef3c7;
  font-size:12px;
  line-height:1.25;
  flex:0 0 auto;
}
#chatLockBanner strong{font-weight:850;color:#fff7d6;white-space:nowrap}
#chatLockBanner small{color:rgba(254,243,199,.72);font-size:11px;min-width:0}
.chat-lock-dot{width:8px;height:8px;border-radius:999px;background:#facc15;box-shadow:0 0 0 4px rgba(250,204,21,.14),0 0 14px rgba(250,204,21,.35);flex:0 0 auto}
.chat-locked-by-other #replyBox{opacity:.72}
.chat-locked-by-other #replyBox button:disabled,
.chat-locked-by-other #replyInput:disabled,
.header-btn:disabled{cursor:not-allowed;filter:saturate(.7);opacity:.55}
.status-tag.pending{white-space:nowrap}
@media (max-width:768px){
  #chatLockBanner{padding:8px 12px;align-items:flex-start;flex-wrap:wrap}
  #chatLockBanner strong{font-size:11px}
  #chatLockBanner small{flex-basis:100%;padding-left:16px}
}


/* Dashboard topbar follows selected UI theme 20260714 */
.topbar{
  background:
    radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 36%),
    radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--primary-2) 18%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, rgba(8,12,28,.92)), color-mix(in srgb, var(--primary-2) 16%, rgba(15,22,45,.78)))!important;
  border-bottom:1px solid color-mix(in srgb, var(--primary) 28%, transparent)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22), inset 0 -1px 0 color-mix(in srgb, var(--primary) 12%, transparent)!important;
}
.topbar-left .eyebrow{color:var(--soft-2)!important}
.topbar-left h2{text-shadow:0 10px 30px var(--primary-shadow)!important}
.topbar-actions > div{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, rgba(255,255,255,.075)), color-mix(in srgb, var(--primary-2) 10%, rgba(255,255,255,.035)))!important;
  border:1px solid color-mix(in srgb, var(--primary) 24%, rgba(255,255,255,.08))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 38px rgba(0,0,0,.18),0 0 28px color-mix(in srgb, var(--primary) 10%, transparent)!important;
}
#dateFilterControls,
#dashRangeChips{
  background:color-mix(in srgb, var(--primary) 10%, rgba(5,10,24,.42))!important;
  border-color:color-mix(in srgb, var(--primary) 20%, rgba(255,255,255,.08))!important;
}
#dateFilterControls input{
  background:color-mix(in srgb, var(--primary) 10%, rgba(255,255,255,.075))!important;
  border-color:color-mix(in srgb, var(--primary) 22%, rgba(255,255,255,.10))!important;
}


/* Chat Center containers follow selected UI theme 20260714 */
.chat-shell{
  background:
    radial-gradient(circle at 52% -10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%),
    radial-gradient(circle at 78% 92%, color-mix(in srgb, var(--primary-2) 12%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, rgba(5,9,22,.95)), color-mix(in srgb, var(--primary-2) 7%, rgba(4,7,18,.98)))!important;
}
.store-nav-panel,
.chat-list-panel,
.chat-room-wrap,
#rightPanel{
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 38%),
    color-mix(in srgb, var(--primary) 8%, rgba(8,13,31,.78))!important;
  border-color:color-mix(in srgb, var(--primary) 18%, rgba(148,163,184,.10))!important;
}
.chat-list-head,
#chatHeader,
.rp-top{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, rgba(255,255,255,.035)), color-mix(in srgb, var(--primary-2) 8%, rgba(255,255,255,.02)))!important;
  border-color:color-mix(in srgb, var(--primary) 18%, rgba(255,255,255,.06))!important;
}
.search-wrap input,
#filterDropdownBtn,
.storeNavItem,
.chat-item-row,
#tagInput,
.note-area{
  background:color-mix(in srgb, var(--primary) 7%, rgba(255,255,255,.055))!important;
  border-color:color-mix(in srgb, var(--primary) 14%, rgba(255,255,255,.08))!important;
}
.storeNavItem.active,
.chat-item-row.active,
#filterDropdownBtn.active{
  background:linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--primary-2) 11%, transparent))!important;
  border-color:color-mix(in srgb, var(--primary) 30%, transparent)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.18),0 0 24px color-mix(in srgb, var(--primary) 10%, transparent)!important;
}
.search-wrap input:focus,
#tagInput:focus-within,
.note-area:focus{
  border-color:color-mix(in srgb, var(--primary) 42%, transparent)!important;
  box-shadow:0 0 0 3px var(--primary-soft)!important;
}

/* Premium white theme 20260714 */
html[data-ui-theme="white"]{
  color-scheme:light;
}
html[data-ui-theme="white"] body,
html[data-ui-theme="white"] #mainApp,
html[data-ui-theme="white"] .main-area{
  color:#172033;
}
html[data-ui-theme="white"] .sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(246,248,252,.82))!important;
  border-right-color:rgba(148,163,184,.22)!important;
  box-shadow:12px 0 38px rgba(15,23,42,.06)!important;
}
html[data-ui-theme="white"] .brand,
html[data-ui-theme="white"] .sidebar-footer{
  border-color:rgba(148,163,184,.20)!important;
}
html[data-ui-theme="white"] .brand h1,
html[data-ui-theme="white"] .topbar-left h2,
html[data-ui-theme="white"] #headerName,
html[data-ui-theme="white"] .rp-name,
html[data-ui-theme="white"] .panel h3,
html[data-ui-theme="white"] .stat-value{
  color:#172033!important;
}
html[data-ui-theme="white"] .brand p,
html[data-ui-theme="white"] .topbar-left .eyebrow,
html[data-ui-theme="white"] #headerOaName,
html[data-ui-theme="white"] .chat-load-more,
html[data-ui-theme="white"] .rp-section-title,
html[data-ui-theme="white"] .status-card small{
  color:#64748b!important;
}
html[data-ui-theme="white"] .nav-btn,
html[data-ui-theme="white"] .ghost-btn,
html[data-ui-theme="white"] .header-btn,
html[data-ui-theme="white"] .status-btn-group button,
html[data-ui-theme="white"] .toggle-row,
html[data-ui-theme="white"] .theme-note,
html[data-ui-theme="white"] .chat-item-row{
  color:#334155!important;
}
html[data-ui-theme="white"] .nav-btn:hover,
html[data-ui-theme="white"] .nav-btn.active,
html[data-ui-theme="white"] .header-icon-btn:hover{
  color:#172033!important;
}
html[data-ui-theme="white"] .nav-btn.active,
html[data-ui-theme="white"] .status-card,
html[data-ui-theme="white"] .glass,
html[data-ui-theme="white"] .panel,
html[data-ui-theme="white"] .rp-section,
html[data-ui-theme="white"] .theme-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(247,250,252,.72))!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 18px 46px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
html[data-ui-theme="white"] .topbar{
  background:
    radial-gradient(circle at 82% 0%, rgba(247,213,122,.30), transparent 38%),
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(243,246,251,.86))!important;
  border-bottom-color:rgba(148,163,184,.22)!important;
  box-shadow:0 16px 44px rgba(15,23,42,.08), inset 0 -1px 0 rgba(255,255,255,.86)!important;
}
html[data-ui-theme="white"] .topbar-actions > div,
html[data-ui-theme="white"] #dateFilterControls,
html[data-ui-theme="white"] #dashRangeChips{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(148,163,184,.24)!important;
  box-shadow:0 14px 32px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
html[data-ui-theme="white"] #dashRangeChips .chip{
  color:#64748b!important;
}
html[data-ui-theme="white"] #dateFilterControls label{
  color:#64748b!important;
}
html[data-ui-theme="white"] input,
html[data-ui-theme="white"] textarea,
html[data-ui-theme="white"] select,
html[data-ui-theme="white"] #dateFilterControls input,
html[data-ui-theme="white"] #inChatSearchInput{
  color:#172033!important;
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(148,163,184,.28)!important;
}
html[data-ui-theme="white"] input::placeholder,
html[data-ui-theme="white"] textarea::placeholder{
  color:#94a3b8!important;
}
html[data-ui-theme="white"] .chat-shell{
  background:
    radial-gradient(circle at 24% -10%, rgba(247,213,122,.22), transparent 36%),
    radial-gradient(circle at 82% 92%, rgba(148,163,184,.16), transparent 38%),
    linear-gradient(180deg,rgba(251,252,255,.82),rgba(237,242,249,.96))!important;
}
html[data-ui-theme="white"] .store-nav-panel,
html[data-ui-theme="white"] .chat-list-panel,
html[data-ui-theme="white"] .chat-room-wrap,
html[data-ui-theme="white"] #rightPanel{
  background:
    radial-gradient(circle at 84% 0%, rgba(247,213,122,.18), transparent 38%),
    rgba(255,255,255,.78)!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 18px 46px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.86)!important;
}
html[data-ui-theme="white"] .chat-list-head,
html[data-ui-theme="white"] #chatHeader,
html[data-ui-theme="white"] .rp-top{
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(248,250,252,.70))!important;
  border-color:rgba(148,163,184,.20)!important;
}
html[data-ui-theme="white"] .search-wrap input,
html[data-ui-theme="white"] #filterDropdownBtn,
html[data-ui-theme="white"] .storeNavItem,
html[data-ui-theme="white"] .chat-item-row,
html[data-ui-theme="white"] #tagInput,
html[data-ui-theme="white"] .note-area{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(148,163,184,.22)!important;
}
html[data-ui-theme="white"] .storeNavItem.active,
html[data-ui-theme="white"] .chat-item-row.active,
html[data-ui-theme="white"] #filterDropdownBtn.active{
  background:linear-gradient(135deg,rgba(255,246,214,.90),rgba(255,255,255,.82))!important;
  border-color:rgba(214,158,46,.42)!important;
  box-shadow:0 14px 32px rgba(180,119,19,.12),0 0 0 1px rgba(255,255,255,.82) inset!important;
}
html[data-ui-theme="white"] #messages{
  background:
    linear-gradient(90deg,rgba(214,158,46,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(148,163,184,.030) 1px,transparent 1px);
  background-size:32px 32px;
}
html[data-ui-theme="white"] .msg.customer{
  color:#172033!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 10px 24px rgba(15,23,42,.07);
}
html[data-ui-theme="white"] .msg.admin{
  color:var(--chat-admin-text)!important;
  box-shadow:0 12px 28px rgba(180,119,19,.16),inset 0 1px 0 rgba(255,255,255,.58);
}
html[data-ui-theme="white"] .msg-meta{
  color:#64748b;
}
html[data-ui-theme="white"] .header-oa-pill{
  background:rgba(255,246,214,.86)!important;
  color:#8a5a0a!important;
  border-color:rgba(214,158,46,.34)!important;
}
html[data-ui-theme="white"] .header-btn.status-pending,
html[data-ui-theme="white"] .status-btn-group button.active-pending{
  color:#92400e!important;
}
html[data-ui-theme="white"] .header-btn.status-done,
html[data-ui-theme="white"] .status-btn-group button.active-done{
  color:#166534!important;
}
html[data-ui-theme="white"] .primary-btn,
html[data-ui-theme="white"] #dateFilterControls button,
html[data-ui-theme="white"] #dashRangeChips .chip.active,
html[data-ui-theme="white"] #sendBtn{
  color:#2a1b05!important;
}
html[data-ui-theme="white"] #dashboardPage{
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.86), transparent 30%),
    radial-gradient(circle at 76% 84%, rgba(247,213,122,.18), transparent 30%),
    linear-gradient(180deg,rgba(250,252,255,.82),rgba(235,241,249,.92))!important;
}
html[data-ui-theme="white"] #dashboardPage .stat-card,
html[data-ui-theme="white"] #dashboardPage .panel,
html[data-ui-theme="white"] #dashboardPage .summary-card{
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(246,248,252,.76)),radial-gradient(circle at 96% 0%,rgba(247,213,122,.18),transparent 38%)!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
html[data-ui-theme="white"] .theme-choice{
  color:#334155!important;
  background:rgba(255,255,255,.74)!important;
  border-color:rgba(148,163,184,.22)!important;
}
html[data-ui-theme="white"] .theme-choice.active{
  background:linear-gradient(135deg,rgba(255,246,214,.92),rgba(255,255,255,.86))!important;
  border-color:rgba(214,158,46,.46)!important;
}

/* Force dark readable text only in the premium white theme 20260714 */
html[data-ui-theme="white"] .sidebar,
html[data-ui-theme="white"] .topbar,
html[data-ui-theme="white"] #dashboardPage,
html[data-ui-theme="white"] .chat-shell,
html[data-ui-theme="white"] .store-nav-panel,
html[data-ui-theme="white"] .chat-list-panel,
html[data-ui-theme="white"] .chat-room-wrap,
html[data-ui-theme="white"] #rightPanel,
html[data-ui-theme="white"] .theme-panel,
html[data-ui-theme="white"] .settings-panel,
html[data-ui-theme="white"] .modal,
html[data-ui-theme="white"] .glass{
  color:#111827!important;
}
html[data-ui-theme="white"] .sidebar :where(h1,h2,h3,h4,p,span,small,strong,em,label,button,div),
html[data-ui-theme="white"] .topbar :where(h1,h2,h3,h4,p,span,small,strong,em,label,button,div),
html[data-ui-theme="white"] #dashboardPage :where(h1,h2,h3,h4,p,span,small,strong,em,label,button,div),
html[data-ui-theme="white"] .store-nav-panel :where(h1,h2,h3,h4,p,span,small,strong,em,label,button,div),
html[data-ui-theme="white"] .chat-list-panel :where(h1,h2,h3,h4,p,span,small,strong,em,label,button,div),
html[data-ui-theme="white"] .chat-room-wrap :where(h1,h2,h3,h4,p,span,small,strong,em,label,button,div),
html[data-ui-theme="white"] #rightPanel :where(h1,h2,h3,h4,p,span,small,strong,em,label,button,div),
html[data-ui-theme="white"] .theme-panel :where(h1,h2,h3,h4,p,span,small,strong,em,label,button,div),
html[data-ui-theme="white"] .settings-panel :where(h1,h2,h3,h4,p,span,small,strong,em,label,button,div){
  color:#111827!important;
}
html[data-ui-theme="white"] :where(.muted,.subtle,.chat-preview,.chat-time,.store-count-sub,.sni-count,.sni-name,.rp-section-title small,.msg-meta,.theme-note,.topbar-left .eyebrow,#headerOaName){
  color:#4b5563!important;
}
html[data-ui-theme="white"] :where(.primary-btn,#dateFilterControls button,#dashRangeChips .chip.active,#sendBtn,.msg.admin,.user-avatar,.rp-avatar,#headerAvatar){
  color:#1f1303!important;
}
html[data-ui-theme="white"] :where(.danger-btn,.header-btn.status-pending,.status-btn-group button.active-pending){
  color:#7c2d12!important;
}
html[data-ui-theme="white"] :where(.header-btn.status-done,.status-btn-group button.active-done){
  color:#14532d!important;
}
html[data-ui-theme="white"] :where(.deposit-issue,.tagChip.deposit-issue,.tag-badge.deposit-issue){
  color:#2a1b05!important;
}


/* Premium white clarity pass 20260714 */
html[data-ui-theme="white"]{
  --glass:rgba(255,255,255,.94);
  --glass-2:rgba(255,255,255,.98);
  --glass-3:rgba(241,245,249,.94);
  --line:rgba(100,116,139,.34);
  --line-2:rgba(100,116,139,.24);
  --soft:#475569;
  --soft-2:#1f2937;
  --white:#0f172a;
  --primary:#b7791f;
  --primary-2:#d97706;
  --primary-soft:rgba(180,119,31,.16);
  --primary-shadow:rgba(120,72,12,.18);
  --chat-admin-bubble:linear-gradient(135deg,#fff7d6 0%,#f4c75c 58%,#c78318 100%);
  --chat-admin-text:#1f1303;
  --chat-room-bg:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,245,249,.98));
  --chat-header-bg:rgba(255,255,255,.95);
  --reply-panel-bg:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,245,249,.98));
  --shadow:0 18px 46px rgba(15,23,42,.14);
  --shadow-sm:0 10px 24px rgba(15,23,42,.10);
}
html[data-ui-theme="white"] body{
  color:#0f172a!important;
}
html[data-ui-theme="white"] .glass,
html[data-ui-theme="white"] .panel,
html[data-ui-theme="white"] .status-card,
html[data-ui-theme="white"] #dashboardPage .stat-card,
html[data-ui-theme="white"] #dashboardPage .summary-card,
html[data-ui-theme="white"] .store-nav-panel,
html[data-ui-theme="white"] .chat-list-panel,
html[data-ui-theme="white"] .chat-room-wrap,
html[data-ui-theme="white"] #rightPanel,
html[data-ui-theme="white"] .rp-section,
html[data-ui-theme="white"] .theme-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,250,252,.92))!important;
  border-color:rgba(100,116,139,.30)!important;
  box-shadow:0 16px 42px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
html[data-ui-theme="white"] .topbar,
html[data-ui-theme="white"] .chat-list-head,
html[data-ui-theme="white"] #chatHeader,
html[data-ui-theme="white"] .rp-top{
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(241,245,249,.94))!important;
  border-color:rgba(100,116,139,.28)!important;
  box-shadow:0 12px 32px rgba(15,23,42,.10),inset 0 -1px 0 rgba(255,255,255,.9)!important;
}
html[data-ui-theme="white"] .sidebar,
html[data-ui-theme="white"] .settings-sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,245,249,.94))!important;
  border-color:rgba(100,116,139,.28)!important;
}
html[data-ui-theme="white"] :where(.brand h1,.topbar-left h2,#headerName,.rp-name,.panel h3,.stat-value,.settings-content h2,.theme-panel-head h3,.chat-display-name,.sni-name,.store-count-name,.chat-name,.qr-premium-item-title){
  color:#0f172a!important;
  text-shadow:none!important;
}
html[data-ui-theme="white"] :where(.brand p,.topbar-left .eyebrow,#headerOaName,.chat-preview,.chat-time,.chat-date-label,.store-count-sub,.sni-count,.rp-section-title,.rp-section-title small,.msg-meta,.theme-note,.status-card small,.qr-premium-item-msg,.qr-premium-item-store){
  color:#475569!important;
}
html[data-ui-theme="white"] .chat-preview.unread,
html[data-ui-theme="white"] .chat-item-row.unread .chat-preview,
html[data-ui-theme="white"] .chat-item-row.unread .chat-display-name{
  color:#0f172a!important;
  font-weight:850!important;
}
html[data-ui-theme="white"] .storeNavItem,
html[data-ui-theme="white"] .chat-item-row,
html[data-ui-theme="white"] .theme-choice,
html[data-ui-theme="white"] .search-wrap input,
html[data-ui-theme="white"] #filterDropdownBtn,
html[data-ui-theme="white"] #filterDropdownMenu,
html[data-ui-theme="white"] #tagInput,
html[data-ui-theme="white"] .note-area,
html[data-ui-theme="white"] #messageInput{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(100,116,139,.30)!important;
  color:#0f172a!important;
  box-shadow:0 8px 20px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
html[data-ui-theme="white"] .storeNavItem:hover,
html[data-ui-theme="white"] .chat-item-row:hover,
html[data-ui-theme="white"] .theme-choice:hover{
  background:rgba(248,250,252,.98)!important;
  border-color:rgba(180,119,31,.38)!important;
}
html[data-ui-theme="white"] .storeNavItem.active,
html[data-ui-theme="white"] .chat-item-row.active,
html[data-ui-theme="white"] .theme-choice.active{
  background:linear-gradient(135deg,rgba(255,248,225,.98),rgba(255,255,255,.96))!important;
  border-color:rgba(180,119,31,.52)!important;
  color:#0f172a!important;
  box-shadow:0 12px 28px rgba(120,72,12,.14),0 0 0 1px rgba(255,255,255,.94) inset!important;
}
html[data-ui-theme="white"] .storeNavItem.active .sni-name,
html[data-ui-theme="white"] .chat-item-row.active .chat-display-name,
html[data-ui-theme="white"] .theme-choice.active span,
html[data-ui-theme="white"] .theme-choice.active strong{
  color:#0f172a!important;
}
html[data-ui-theme="white"] .chat-time{
  background:linear-gradient(180deg,#ffffff,#f1f5f9)!important;
  border-color:rgba(100,116,139,.34)!important;
  color:#334155!important;
  box-shadow:0 6px 14px rgba(15,23,42,.08)!important;
}
/* Active chat clarity 20260715 */
.chat-item-row{
  position:relative;
}
.chat-item-row.active{
  transform:translateX(1px);
}
.chat-item-row.active::before{
  content:"";
  position:absolute;
  left:7px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  box-shadow:0 0 18px color-mix(in srgb, var(--primary) 38%, transparent);
}
.chat-item-row.active .chat-avatar{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 38%, transparent),0 10px 22px rgba(0,0,0,.18);
}
.chat-item-row.active .chat-display-name{
  font-weight:850;
}
html[data-ui-theme="white"] .chat-item-row.active{
  background:
    linear-gradient(135deg,rgba(255,241,184,.96),rgba(255,251,235,.98) 58%,rgba(255,255,255,.98))!important;
  border-color:rgba(180,119,31,.70)!important;
  box-shadow:0 16px 34px rgba(120,72,12,.20),0 0 0 1px rgba(255,255,255,.96) inset!important;
}
html[data-ui-theme="white"] .chat-item-row.active::before{
  background:linear-gradient(180deg,#b7791f,#f59e0b);
  box-shadow:0 0 16px rgba(180,119,31,.36);
}
html[data-ui-theme="white"] .chat-item-row.active .chat-avatar{
  box-shadow:0 0 0 2px rgba(180,119,31,.42),0 10px 20px rgba(120,72,12,.18)!important;
}
html[data-ui-theme="white"] .chat-item-row.active .chat-time{
  background:linear-gradient(180deg,#fff7ed,#ffedd5)!important;
  border-color:rgba(180,119,31,.46)!important;
  color:#7c2d12!important;
}
html:not([data-ui-theme="white"]) .chat-item-row.active{
  background:
    radial-gradient(circle at 12% 50%, rgba(93,214,255,.22), transparent 34%),
    linear-gradient(135deg,rgba(54,91,185,.72),rgba(34,52,114,.94) 56%,rgba(22,31,70,.96))!important;
  border-color:rgba(125,211,252,.72)!important;
  box-shadow:
    0 18px 38px rgba(5,13,35,.38),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 26px rgba(56,189,248,.24)!important;
}
html:not([data-ui-theme="white"]) .chat-item-row.active::before{
  left:6px;
  top:8px;
  bottom:8px;
  width:5px;
  background:linear-gradient(180deg,#e0f2fe,#38bdf8 52%,#60a5fa);
  box-shadow:0 0 22px rgba(56,189,248,.58);
}
html:not([data-ui-theme="white"]) .chat-item-row.active .chat-display-name,
html:not([data-ui-theme="white"]) .chat-item-row.active .chat-preview{
  color:#f8fbff!important;
}
html:not([data-ui-theme="white"]) .chat-item-row.active .chat-time{
  background:rgba(4,15,39,.76)!important;
  border-color:rgba(125,211,252,.58)!important;
  color:#e0f2fe!important;
}
html:not([data-ui-theme="white"]) .chat-item-row.active .chat-avatar{
  box-shadow:0 0 0 2px rgba(125,211,252,.52),0 12px 24px rgba(5,13,35,.36)!important;
}
html[data-ui-theme="white"] .oa-tag,
html[data-ui-theme="white"] .header-oa-pill{
  background:#fff7ed!important;
  color:#7c2d12!important;
  border:1px solid rgba(180,83,9,.34)!important;
  font-weight:900!important;
}
html[data-ui-theme="white"] .signup-status-chip,
html[data-ui-theme="white"] .chat-preview .signup-preview-chip{
  background:linear-gradient(135deg,#fff7ed,#fef3c7 58%,#fce7f3)!important;
  border-color:rgba(180,83,9,.46)!important;
  color:#111827!important;
  box-shadow:0 8px 18px rgba(120,72,12,.14),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
html[data-ui-theme="white"] .signup-status-chip strong,
html[data-ui-theme="white"] .chat-preview .signup-preview-chip span:last-child{
  color:#111827!important;
}
html[data-ui-theme="white"] .signup-status-chip span,
html[data-ui-theme="white"] .signup-preview-mark{
  background:linear-gradient(135deg,#f59e0b,#ec4899)!important;
  color:#ffffff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.20)!important;
}
html[data-ui-theme="white"] .tag-badge:not(.deposit-issue):not(.slip-notice):not(.forgot-password){
  color:#ffffff!important;
  font-weight:850!important;
  text-shadow:0 1px 2px rgba(15,23,42,.28)!important;
  box-shadow:0 6px 14px rgba(15,23,42,.12)!important;
}
html[data-ui-theme="white"] .tag-badge.deposit-issue,
html[data-ui-theme="white"] #rightPanel .tagChip.deposit-issue{
  color:#2a1200!important;
  background:linear-gradient(135deg,#fed7aa,#fb923c,#f97316)!important;
  border-color:rgba(194,65,12,.42)!important;
  text-shadow:none!important;
}
html[data-ui-theme="white"] .tag-badge.forgot-password,
html[data-ui-theme="white"] #rightPanel .tagChip.forgot-password{
  color:#7f1d1d!important;
  background:linear-gradient(135deg,#fff7ed,#fecdd3 45%,#fb7185 78%,#be123c)!important;
  border-color:rgba(190,18,60,.30)!important;
  text-shadow:none!important;
  box-shadow:0 8px 18px rgba(190,18,60,.14),inset 0 1px 0 rgba(255,255,255,.68)!important;
}
html[data-ui-theme="white"] .tag-badge.slip-notice{
  color:#ffffff!important;
  background:linear-gradient(135deg,#ef4444,#b91c1c)!important;
  border-color:rgba(185,28,28,.34)!important;
}
html[data-ui-theme="white"] #rightPanel .tagChip{
  color:#0f172a!important;
  background:linear-gradient(135deg,#ffffff,#f1f5f9)!important;
  border-color:rgba(100,116,139,.34)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.08)!important;
}
html[data-ui-theme="white"] #rightPanel .tagChip button{
  color:#334155!important;
}
html[data-ui-theme="white"] .msg.customer{
  color:#0f172a!important;
  background:#ffffff!important;
  border-color:rgba(100,116,139,.30)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.10)!important;
}
html[data-ui-theme="white"] .msg.admin{
  color:#1f1303!important;
  border:1px solid rgba(180,119,31,.34)!important;
  box-shadow:0 12px 28px rgba(120,72,12,.18),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
html[data-ui-theme="white"] .msgHeader{
  color:#475569!important;
  text-shadow:none!important;
}
html[data-ui-theme="white"] .msgHeader span{
  color:#334155!important;
}
html[data-ui-theme="white"] .msgHeader em{
  color:#64748b!important;
}
html[data-ui-theme="white"] .msg.system,
html[data-ui-theme="white"] .system-msg{
  color:#334155!important;
  background:rgba(241,245,249,.92)!important;
  border-color:rgba(100,116,139,.26)!important;
}
html[data-ui-theme="white"] input::placeholder,
html[data-ui-theme="white"] textarea::placeholder,
html[data-ui-theme="white"] #rightPanel #tagRealInput::placeholder,
html[data-ui-theme="white"] #rightPanel .note-area::placeholder{
  color:#64748b!important;
  opacity:1!important;
}
html[data-ui-theme="white"] .primary-btn,
html[data-ui-theme="white"] #sendBtn,
html[data-ui-theme="white"] #dashRangeChips .chip.active,
html[data-ui-theme="white"] #dateFilterControls button{
  background:linear-gradient(135deg,#f4c75c,#d97706)!important;
  color:#1f1303!important;
  border-color:rgba(120,72,12,.24)!important;
  font-weight:900!important;
}


/* Dashboard topbar compact polish 20260715 */
.topbar{
  min-height:60px!important;
  padding:8px 22px!important;
  gap:14px!important;
}
.topbar-left{min-width:190px!important}
.topbar-left .eyebrow{font-size:9px!important;letter-spacing:.13em!important;line-height:1.1!important}
.topbar-left h2{font-size:22px!important;line-height:1.02!important;margin-top:1px!important}
.topbar-actions > div{
  padding:5px!important;
  border-radius:16px!important;
  gap:6px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px rgba(0,0,0,.13)!important;
}
#dashRangeChips{padding:2px!important;border-radius:12px!important}
#dashRangeChips .chip{height:32px!important;padding:0 12px!important;border-radius:10px!important;font-size:12px!important}
#dateFilterControls{padding:2px!important;border-radius:12px!important;gap:4px!important}
#dateFilterControls label{font-size:9px!important;line-height:1!important;padding-left:3px!important}
#dateFilterControls input{height:32px!important;min-width:124px!important;padding:0 10px!important;border-radius:10px!important;font-size:12px!important}
#dateFilterControls button{height:32px!important;padding:0 13px!important;border-radius:10px!important;font-size:12px!important}
#dashboardPage{padding-top:18px!important}
@media (max-width:1280px){
  .topbar{min-height:58px!important;padding:8px 16px!important}
  .topbar-left{min-width:170px!important}
  .topbar-left h2{font-size:21px!important}
  #dateFilterControls input{min-width:116px!important}
}
@media (max-width:980px){
  .topbar{min-height:auto!important;padding:10px 14px!important}
  .topbar-actions > div{width:100%!important}
}


/* Sidebar brand and topbar alignment 20260715 */
.sidebar{
  padding:0 14px 16px!important;
}
.brand{
  min-height:60px!important;
  padding:0 8px!important;
  margin-bottom:8px!important;
  gap:10px!important;
}
.brand-mark{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
}
.brand h1{font-size:18px!important;line-height:1.05!important}
.brand p{font-size:10px!important;margin-top:1px!important}
.nav-btn{padding:10px 13px!important;border-radius:13px!important}
@media (max-width:1200px){
  .sidebar{padding:0 12px 14px!important}
  .brand{min-height:58px!important}
}


/* Header equal height lock 20260715 */
:root{--app-header-height:64px}
.topbar{
  height:var(--app-header-height)!important;
  min-height:var(--app-header-height)!important;
  max-height:var(--app-header-height)!important;
  padding:7px 22px!important;
  box-sizing:border-box!important;
}
.sidebar{
  padding:0 14px 16px!important;
}
.brand{
  height:var(--app-header-height)!important;
  min-height:var(--app-header-height)!important;
  max-height:var(--app-header-height)!important;
  padding:0 8px!important;
  margin:0 0 8px!important;
  box-sizing:border-box!important;
  align-items:center!important;
}
.brand-mark{width:42px!important;height:42px!important}
.brand h1{font-size:18px!important;line-height:1.05!important}
.brand p{font-size:10px!important;line-height:1.05!important;margin-top:1px!important}
.topbar-left h2{font-size:22px!important;line-height:1!important;margin-top:1px!important}
.topbar-left .eyebrow{font-size:9px!important;line-height:1!important}
.topbar-actions > div{padding:4px!important;border-radius:15px!important}
#dateFilterControls input,#dateFilterControls button,#dashRangeChips .chip{height:31px!important}
@media (max-width:1280px){
  :root{--app-header-height:62px}
  .topbar{padding:7px 16px!important}
}
@media (max-width:980px){
  .topbar{height:auto!important;max-height:none!important;min-height:auto!important}
}


/* Premium dashboard date filter 20260715 */
@media (min-width:981px){
  .topbar-actions > div{
    align-items:center!important;
    padding:3px 4px!important;
    gap:6px!important;
    max-height:48px!important;
    border-radius:18px!important;
    background:
      linear-gradient(135deg,color-mix(in srgb,var(--primary) 11%,rgba(255,255,255,.07)),color-mix(in srgb,var(--primary-2) 7%,rgba(255,255,255,.035)))!important;
    border:1px solid color-mix(in srgb,var(--primary) 18%,rgba(255,255,255,.10))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 30px rgba(0,0,0,.14)!important;
  }
  #dateFilterControls{
    align-items:center!important;
    padding:0!important;
    gap:6px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  #dateFilterControls > div{
    position:relative!important;
    gap:0!important;
  }
  #dateFilterControls label{
    position:absolute!important;
    top:5px!important;
    left:12px!important;
    z-index:1!important;
    padding:0!important;
    font-size:7.5px!important;
    line-height:1!important;
    letter-spacing:.10em!important;
    font-weight:900!important;
    color:color-mix(in srgb,var(--soft-2) 86%,#ffffff 8%)!important;
    pointer-events:none!important;
    opacity:.86!important;
  }
  #dateFilterControls input{
    width:136px!important;
    min-width:136px!important;
    height:40px!important;
    min-height:40px!important;
    padding:15px 30px 5px 12px!important;
    border-radius:14px!important;
    font-size:11.5px!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:.01em!important;
    color:var(--white)!important;
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--primary) 11%,rgba(255,255,255,.12)),color-mix(in srgb,var(--primary-2) 6%,rgba(255,255,255,.06)))!important;
    border:1px solid color-mix(in srgb,var(--primary) 22%,rgba(255,255,255,.13))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 8px 18px rgba(0,0,0,.10)!important;
  }
  #dateFilterControls input:hover,
  #dateFilterControls input:focus{
    border-color:color-mix(in srgb,var(--primary) 44%,rgba(255,255,255,.18))!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent),inset 0 1px 0 rgba(255,255,255,.14)!important;
  }
  #dateFilterControls input::-webkit-datetime-edit{
    padding:0!important;
    color:var(--white)!important;
  }
  #dateFilterControls input::-webkit-calendar-picker-indicator{
    width:14px!important;
    height:14px!important;
    margin:0!important;
    opacity:.76!important;
    filter:brightness(1.8) saturate(.95)!important;
  }
  #dateFilterControls > div:nth-child(3) label{display:none!important;}
  #dateFilterControls button{
    height:40px!important;
    min-height:40px!important;
    min-width:86px!important;
    padding:0 17px!important;
    border-radius:14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
    background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
    color:var(--chat-admin-text,#fff)!important;
    border:1px solid color-mix(in srgb,var(--primary) 36%,rgba(255,255,255,.18))!important;
    box-shadow:0 10px 24px var(--primary-shadow),inset 0 1px 0 rgba(255,255,255,.22)!important;
  }
  #dateFilterControls button:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 14px 28px var(--primary-shadow),inset 0 1px 0 rgba(255,255,255,.24)!important;
  }
}
@media (min-width:981px) and (max-width:1280px){
  #dateFilterControls input{width:126px!important;min-width:126px!important;}
  #dateFilterControls button{min-width:78px!important;padding:0 14px!important;}
}
html[data-ui-theme="white"] #dateFilterControls label{
  color:#64748b!important;
}
html[data-ui-theme="white"] #dateFilterControls input{
  color:#0f172a!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.94))!important;
  border-color:rgba(100,116,139,.30)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
html[data-ui-theme="white"] #dateFilterControls input::-webkit-datetime-edit{
  color:#0f172a!important;
}
html[data-ui-theme="white"] #dateFilterControls input::-webkit-calendar-picker-indicator{
  filter:none!important;
  opacity:.72!important;
}
html[data-ui-theme="white"] .topbar-actions > div{
  background:rgba(255,255,255,.74)!important;
  border-color:rgba(100,116,139,.24)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.94)!important;
}

/* Composer responsive guard 20260715: keep reply input usable at browser zoom 90/110 and narrow chat panes. */
#replyBox{
  width:auto!important;
  min-width:0!important;
  flex-wrap:wrap!important;
  align-content:flex-start!important;
  row-gap:7px!important;
}
#replyBox .reply-icon-btn,
#replyBox #flexSendBtn,
#replyBox #sendBtn{
  flex:0 0 auto!important;
}
#replyBox #replyInput{
  flex:999 1 260px!important;
  min-width:180px!important;
}
.chat-shell.has-inspector #replyBox #replyInput{
  flex-basis:220px!important;
}

@media (max-width:1280px){
  #replyBox #replyInput{
    flex-basis:calc(100% - 62px)!important;
    min-width:0!important;
    order:2!important;
  }
  #replyBox #sendBtn{
    order:3!important;
  }
  #replyBox #stickerBtn,
  #replyBox #imgBtn,
  #replyBox #quickBtn,
  #replyBox #flexBtn,
  #replyBox #flexSendBtn{
    order:1!important;
  }
}

@media (max-width:1120px){
  #replyBox .reply-script-btn{
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    padding:0!important;
    gap:0!important;
  }
  #replyBox .reply-script-btn span{
    display:none!important;
  }
}

@media (max-width:768px){
  #chatPage .chat-shell.mobile-chat-room-open #replyBox,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    flex-wrap:wrap!important;
    row-gap:6px!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #replyInput,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyInput{
    flex:1 1 calc(100% - 48px)!important;
    min-width:0!important;
    order:2!important;
  }
  #chatPage .chat-shell.mobile-chat-room-open #sendBtn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    order:3!important;
  }
}

#newMessageJumpBtn{position:absolute;left:50%;bottom:118px;transform:translate(-50%,10px);z-index:80;border:1px solid rgba(125,211,252,.65);border-radius:999px;padding:6px 10px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(219,244,255,.95));color:#075985;font-weight:800;font-size:11.5px;line-height:1;box-shadow:0 8px 20px rgba(14,165,233,.22),0 1px 0 rgba(255,255,255,.9) inset;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
#newMessageJumpBtn.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
@media(max-width:720px){#newMessageJumpBtn{bottom:110px;font-size:11px;padding:6px 9px}}

/* Quoted message replies 20260718 */
.msgReplyBtn{
  width:22px;height:22px;border:1px solid rgba(148,163,184,.24);
  border-radius:999px;background:rgba(255,255,255,.07);color:rgba(226,232,240,.78);
  display:inline-grid;place-items:center;cursor:pointer;font-size:12px;line-height:1;
  flex:0 0 auto;opacity:.76;transition:.15s;
}
.msgReplyBtn:hover{opacity:1;color:#fff;background:rgba(125,211,252,.16);border-color:rgba(125,211,252,.42)}
.msgQuote{
  margin:0 0 7px;padding:7px 9px;border-left:3px solid rgba(125,211,252,.72);
  border-radius:8px;background:rgba(15,23,42,.2);color:rgba(255,255,255,.82);
  display:flex;flex-direction:column;gap:2px;max-width:100%;
}
.msgQuote strong{font-size:11px;line-height:1.2;color:#e0f2fe;font-weight:850}
.msgQuote span{
  font-size:12px;line-height:1.35;color:rgba(255,255,255,.72);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}
.selected-reply-bar{
  order:0!important;flex:1 0 100%!important;min-width:100%!important;
  position:relative;align-items:center;justify-content:flex-start;gap:8px;
  min-height:42px;padding:7px 40px 7px 12px;
  border:1px solid rgba(125,211,252,.18);border-left:3px solid rgba(56,189,248,.82);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(59,130,246,.07));
  color:#e0f2fe;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.selected-reply-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.selected-reply-text strong{font-size:11px;font-weight:850;line-height:1.15;color:#f8fbff}
.selected-reply-text span{font-size:11.5px;line-height:1.22;color:rgba(224,242,254,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selected-reply-bar button{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border:1px solid rgba(148,163,184,.24);border-radius:999px;
  background:rgba(15,23,42,.18);color:rgba(241,245,249,.82);cursor:pointer;
  font-size:15px;line-height:19px;display:grid;place-items:center;flex:0 0 auto;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.selected-reply-bar button:hover{background:rgba(56,189,248,.16);border-color:rgba(125,211,252,.38);color:#fff;transform:translateY(-50%) scale(1.04)}
html[data-ui-theme="white"] .msgReplyBtn{background:rgba(15,23,42,.04);color:#64748b;border-color:rgba(100,116,139,.2)}
html[data-ui-theme="white"] .msgReplyBtn:hover{background:rgba(14,165,233,.11);color:#0369a1;border-color:rgba(14,165,233,.24)}
html[data-ui-theme="white"] .msgQuote{background:rgba(255,255,255,.52);border-left-color:rgba(14,165,233,.62);color:#334155}
html[data-ui-theme="white"] .msgQuote strong{color:#0369a1}
html[data-ui-theme="white"] .msgQuote span{color:#475569}
html[data-ui-theme="white"] .selected-reply-bar{background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(255,255,255,.72));border-color:rgba(14,165,233,.16);border-left-color:rgba(14,165,233,.62);color:#0369a1;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
html[data-ui-theme="white"] .selected-reply-text strong{color:#075985}
html[data-ui-theme="white"] .selected-reply-text span{color:#475569}
html[data-ui-theme="white"] .selected-reply-bar button{background:rgba(255,255,255,.72);border-color:rgba(100,116,139,.18);color:#64748b}
html[data-ui-theme="white"] .selected-reply-bar button:hover{background:rgba(14,165,233,.12);border-color:rgba(14,165,233,.26);color:#0369a1}

/* Compact luxury admin ranking 20260720 */
#dashboardPage .panel .ranking-panel-head{
  margin-bottom:8px!important;
  align-items:center;
}
#dashboardPage .ranking-panel-head h3{
  font-size:15px!important;
  line-height:1.1!important;
}
#dashboardPage .ranking-panel-head p{
  font-size:10px!important;
  margin-top:2px!important;
  color:#8fa5c8!important;
}
#dashboardPage .ranking-refresh-box{
  gap:6px!important;
}
#dashboardPage #rankingLastUpdated,
#dashboardPage .ranking-refresh-btn{
  min-height:24px!important;
  padding:4px 8px!important;
  font-size:10px!important;
  border-radius:999px!important;
}
#dashboardPage .ranking-list{
  gap:8px!important;
}
#dashboardPage .rank-item{
  grid-template-columns:42px minmax(0,1fr) 62px!important;
  gap:10px!important;
  min-height:72px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.070),rgba(255,255,255,.026))!important;
  border-color:rgba(255,255,255,.095)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 24px rgba(0,0,0,.18)!important;
}
#dashboardPage .rank-first{
  min-height:82px!important;
  background:linear-gradient(135deg,rgba(247,217,138,.145),rgba(255,255,255,.035) 52%,rgba(124,156,255,.045))!important;
  border-color:rgba(247,217,138,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 12px 28px rgba(0,0,0,.22),0 0 0 1px rgba(247,217,138,.045)!important;
}
#dashboardPage .rank-item::before{
  width:3px!important;
  opacity:.82!important;
}
#dashboardPage .rank-glow{
  inset:-30px auto auto -26px!important;
  width:92px!important;
  height:92px!important;
  opacity:.65!important;
}
#dashboardPage .rank-badge,
#dashboardPage .rank-first .rank-badge{
  width:40px!important;
  height:40px!important;
  border-radius:13px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px rgba(0,0,0,.18)!important;
}
#dashboardPage .rank-first .rank-badge{
  width:44px!important;
  height:44px!important;
  border-radius:15px!important;
}
#dashboardPage .rank-badge span{
  width:23px!important;
  height:23px!important;
  font-size:12px!important;
}
#dashboardPage .rank-name-line{
  gap:6px!important;
}
#dashboardPage .rank-name-line strong,
#dashboardPage .rank-first .rank-name-line strong{
  font-size:15px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
#dashboardPage .rank-crown{
  padding:2px 6px!important;
  font-size:8px!important;
  box-shadow:0 0 12px rgba(244,197,107,.16)!important;
}
#dashboardPage .rank-metrics{
  gap:5px!important;
  margin-top:4px!important;
}
#dashboardPage .rank-metrics span{
  padding:3px 7px!important;
  font-size:9px!important;
  border-radius:999px!important;
}
#dashboardPage .star-bar{
  gap:5px!important;
  margin-top:4px!important;
  font-size:10px!important;
}
#dashboardPage .star-bar b{
  font-size:10px!important;
}
#dashboardPage .star-bar em{
  font-size:9px!important;
}
#dashboardPage .star-bar.is-empty{
  padding:3px 7px!important;
}
#dashboardPage .rank-score{
  min-width:58px!important;
  padding:6px 8px!important;
  border-radius:13px!important;
  gap:1px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px rgba(0,0,0,.14)!important;
}
#dashboardPage .rank-score span{
  font-size:17px!important;
}
#dashboardPage .rank-score small{
  font-size:8px!important;
  letter-spacing:0!important;
}
@media (min-width:761px){
  #dashboardPage .ranking-list{max-height:445px;overflow:auto;padding-right:2px;}
}

/* Executive compact admin ranking 20260720 */
#dashboardPage .panel .ranking-panel-head{
  margin-bottom:10px!important;
}
#dashboardPage .ranking-panel-head h3{
  font-size:14px!important;
  font-weight:850!important;
  color:#eef5ff!important;
}
#dashboardPage .ranking-panel-head p{
  font-size:10px!important;
  color:#7890b5!important;
}
#dashboardPage .ranking-refresh-box{
  align-items:center!important;
  gap:6px!important;
}
#dashboardPage #rankingLastUpdated{
  min-height:22px!important;
  padding:3px 8px!important;
  border-radius:8px!important;
  font-size:10px!important;
  color:#91a7c8!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.07)!important;
}
#dashboardPage .ranking-refresh-btn{
  min-height:22px!important;
  padding:3px 8px!important;
  border-radius:8px!important;
  font-size:10px!important;
  color:#dbe7ff!important;
  background:rgba(124,156,255,.12)!important;
  border:1px solid rgba(124,156,255,.18)!important;
  box-shadow:none!important;
}
#dashboardPage .ranking-list{
  gap:6px!important;
}
#dashboardPage .rank-item{
  grid-template-columns:30px minmax(0,1fr) 54px!important;
  min-height:56px!important;
  padding:8px 10px!important;
  gap:9px!important;
  border-radius:10px!important;
  background:rgba(10,16,31,.58)!important;
  border:1px solid rgba(151,169,205,.105)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
}
#dashboardPage .rank-item:hover{
  background:rgba(15,23,42,.72)!important;
  border-color:rgba(151,169,205,.17)!important;
}
#dashboardPage .rank-item::before{
  width:2px!important;
  opacity:.55!important;
  background:linear-gradient(180deg,#9bb5ff,#5dd6ff)!important;
}
#dashboardPage .rank-first{
  min-height:62px!important;
  background:linear-gradient(135deg,rgba(31,41,55,.78),rgba(12,18,34,.72))!important;
  border-color:rgba(245,201,107,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 22px rgba(0,0,0,.16)!important;
}
#dashboardPage .rank-first::before{background:linear-gradient(180deg,#f7d98a,#d9982f)!important;opacity:.86!important;}
#dashboardPage .rank-second::before{background:linear-gradient(180deg,#d6e4ff,#80d8ff)!important;}
#dashboardPage .rank-third::before{background:linear-gradient(180deg,#f0c19a,#e48b4a)!important;}
#dashboardPage .rank-glow{display:none!important;}
#dashboardPage .rank-badge,
#dashboardPage .rank-first .rank-badge{
  width:28px!important;
  height:28px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
}
#dashboardPage .rank-first .rank-badge{
  background:rgba(245,201,107,.16)!important;
  border-color:rgba(245,201,107,.24)!important;
}
#dashboardPage .rank-badge span,
#dashboardPage .rank-first .rank-badge span{
  width:auto!important;
  height:auto!important;
  border:0!important;
  background:transparent!important;
  color:#dce8ff!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
}
#dashboardPage .rank-first .rank-badge span{color:#f7d98a!important;}
#dashboardPage .rank-main{min-width:0!important;}
#dashboardPage .rank-name-line{gap:5px!important;}
#dashboardPage .rank-name-line strong,
#dashboardPage .rank-first .rank-name-line strong{
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:850!important;
  color:#f2f6ff!important;
}
#dashboardPage .rank-crown{
  padding:1px 5px!important;
  border-radius:6px!important;
  font-size:7px!important;
  letter-spacing:0!important;
  color:#2a1b05!important;
  background:#f3c965!important;
  box-shadow:none!important;
}
#dashboardPage .rank-metrics{
  gap:4px!important;
  margin-top:3px!important;
}
#dashboardPage .rank-metrics span{
  padding:1px 5px!important;
  border-radius:6px!important;
  font-size:9px!important;
  font-weight:750!important;
  color:#92a7c9!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.055)!important;
}
#dashboardPage .star-bar{
  gap:4px!important;
  margin-top:3px!important;
  min-height:12px!important;
  font-size:9px!important;
  color:#e7bd5c!important;
}
#dashboardPage .star-bar span{
  max-width:44px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
#dashboardPage .star-bar b{
  font-size:9px!important;
  font-weight:850!important;
  color:#dcb767!important;
}
#dashboardPage .star-bar em{
  font-size:8px!important;
  color:#7288a9!important;
}
#dashboardPage .star-bar.is-empty{
  width:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#7f92b1!important;
}
#dashboardPage .star-bar.is-empty b{font-size:9px!important;color:#7f92b1!important;}
#dashboardPage .rank-score,
#dashboardPage .rank-first .rank-score{
  min-width:48px!important;
  padding:5px 6px!important;
  border-radius:8px!important;
  gap:0!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:none!important;
  color:#eef5ff!important;
}
#dashboardPage .rank-score span{
  font-size:15px!important;
  line-height:1!important;
  font-weight:900!important;
  color:#f2f6ff!important;
}
#dashboardPage .rank-score small{
  font-size:7px!important;
  line-height:1.1!important;
  margin-top:1px!important;
  color:#748aab!important;
  font-weight:750!important;
  letter-spacing:0!important;
}
@media (min-width:761px){
  #dashboardPage .ranking-list{max-height:330px!important;overflow:auto!important;padding-right:2px!important;}
}
@media (max-width:760px){
  #dashboardPage .rank-item{grid-template-columns:28px minmax(0,1fr) 48px!important;min-height:54px!important;padding:8px!important;}
  #dashboardPage .rank-metrics span{font-size:8px!important;}
  #dashboardPage .rank-score span{font-size:14px!important;}
}

/* Executive Ranking v2 - polished dashboard component 20260720 */
#dashboardPage .panel:has(#rankingList){
  --rank-ink:#f7f8fb;
  --rank-muted:#8d99ad;
  --rank-line:rgba(226,232,240,.095);
  --rank-surface:rgba(9,13,24,.52);
  --rank-surface-2:rgba(15,23,42,.70);
  --rank-accent:#d7b46a;
}
#dashboardPage .ranking-panel-head{
  padding:0 2px!important;
  margin-bottom:9px!important;
}
#dashboardPage .ranking-panel-head h3{
  font-size:14px!important;
  font-weight:900!important;
  color:var(--rank-ink)!important;
}
#dashboardPage .ranking-panel-head p{
  font-size:10px!important;
  color:#7f8da3!important;
}
#dashboardPage .ranking-refresh-box{
  gap:6px!important;
}
#dashboardPage #rankingLastUpdated,
#dashboardPage .ranking-refresh-btn{
  min-height:22px!important;
  padding:3px 8px!important;
  border-radius:7px!important;
  font-size:10px!important;
  line-height:1!important;
  box-shadow:none!important;
}
#dashboardPage #rankingLastUpdated{
  color:#8795ad!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.055)!important;
}
#dashboardPage .ranking-refresh-btn{
  color:#dfe7f5!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.09)!important;
}
#dashboardPage .ranking-refresh-btn:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(215,180,106,.22)!important;
}
#dashboardPage #rankingList.ranking-list{
  gap:7px!important;
  padding:8px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.024))!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
}
#dashboardPage #rankingList .rank-item{
  position:relative!important;
  grid-template-columns:34px minmax(0,1fr) 58px!important;
  min-height:58px!important;
  gap:10px!important;
  padding:8px 10px!important;
  border-radius:11px!important;
  background:rgba(6,10,20,.38)!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}
#dashboardPage #rankingList .rank-item:hover{
  transform:translateY(-1px)!important;
  background:rgba(10,16,30,.68)!important;
  border-color:rgba(255,255,255,.08)!important;
}
#dashboardPage #rankingList .rank-item::before{
  content:""!important;
  position:absolute!important;
  inset:12px auto 12px 0!important;
  width:2px!important;
  border-radius:99px!important;
  opacity:.55!important;
  background:#64748b!important;
}
#dashboardPage #rankingList .rank-first{
  min-height:82px!important;
  grid-template-columns:44px minmax(0,1fr) 72px!important;
  padding:12px!important;
  background:linear-gradient(180deg,rgba(22,28,42,.92),rgba(9,13,24,.78))!important;
  border-color:rgba(215,180,106,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 28px rgba(0,0,0,.18)!important;
}
#dashboardPage #rankingList .rank-first::after{
  content:"";
  position:absolute;
  inset:0 12px auto 12px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(215,180,106,.55),transparent);
}
#dashboardPage #rankingList .rank-first::before{background:var(--rank-accent)!important;opacity:.95!important;}
#dashboardPage #rankingList .rank-second::before{background:#9fb4d9!important;}
#dashboardPage #rankingList .rank-third::before{background:#c9966b!important;}
#dashboardPage #rankingList .rank-glow{display:none!important;}
#dashboardPage #rankingList .rank-badge,
#dashboardPage #rankingList .rank-first .rank-badge{
  width:32px!important;
  height:32px!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:none!important;
}
#dashboardPage #rankingList .rank-first .rank-badge{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  background:rgba(215,180,106,.13)!important;
  border-color:rgba(215,180,106,.24)!important;
}
#dashboardPage #rankingList .rank-badge span,
#dashboardPage #rankingList .rank-first .rank-badge span{
  width:auto!important;
  height:auto!important;
  background:transparent!important;
  border:0!important;
  color:#dce3ee!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
}
#dashboardPage #rankingList .rank-first .rank-badge span{
  color:#f3d58c!important;
  font-size:14px!important;
}
#dashboardPage #rankingList .rank-main{min-width:0!important;}
#dashboardPage #rankingList .rank-name-line{
  gap:6px!important;
  min-width:0!important;
}
#dashboardPage #rankingList .rank-name-line strong,
#dashboardPage #rankingList .rank-first .rank-name-line strong{
  font-size:13px!important;
  line-height:1.18!important;
  font-weight:900!important;
  color:#f5f7fb!important;
}
#dashboardPage #rankingList .rank-first .rank-name-line strong{font-size:15px!important;}
#dashboardPage #rankingList .rank-crown{
  padding:2px 5px!important;
  border-radius:6px!important;
  color:#1f1605!important;
  background:#d7b46a!important;
  font-size:7px!important;
  font-weight:950!important;
  box-shadow:none!important;
}
#dashboardPage #rankingList .rank-metrics{
  margin-top:4px!important;
  gap:4px!important;
}
#dashboardPage #rankingList .rank-metrics span{
  padding:2px 6px!important;
  border-radius:7px!important;
  color:#9aa8bc!important;
  font-size:9px!important;
  font-weight:800!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.048)!important;
}
#dashboardPage #rankingList .rank-first .rank-metrics span{
  color:#b4c0d2!important;
  background:rgba(255,255,255,.055)!important;
}
#dashboardPage #rankingList .star-bar{
  margin-top:4px!important;
  gap:4px!important;
  min-height:12px!important;
  color:#d7b46a!important;
  font-size:9px!important;
}
#dashboardPage #rankingList .star-bar span{
  max-width:48px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  opacity:.9!important;
}
#dashboardPage #rankingList .star-bar b{
  color:#c8aa67!important;
  font-size:9px!important;
  font-weight:850!important;
}
#dashboardPage #rankingList .star-bar em{
  color:#717f96!important;
  font-size:8px!important;
  font-weight:750!important;
}
#dashboardPage #rankingList .star-bar.is-empty{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#69778f!important;
}
#dashboardPage #rankingList .star-bar.is-empty b{color:#69778f!important;font-size:9px!important;}
#dashboardPage #rankingList .rank-score,
#dashboardPage #rankingList .rank-first .rank-score{
  min-width:52px!important;
  padding:5px 6px!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.065)!important;
  box-shadow:none!important;
}
#dashboardPage #rankingList .rank-first .rank-score{
  min-width:66px!important;
  padding:8px!important;
  background:rgba(215,180,106,.10)!important;
  border-color:rgba(215,180,106,.18)!important;
}
#dashboardPage #rankingList .rank-score span{
  color:#f7f8fb!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:950!important;
}
#dashboardPage #rankingList .rank-first .rank-score span{font-size:20px!important;color:#f3d58c!important;}
#dashboardPage #rankingList .rank-score small{
  margin-top:2px!important;
  color:#76849a!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:0!important;
}
#dashboardPage #rankingList .rank-empty{grid-template-columns:34px minmax(0,1fr)!important;}
@media (min-width:761px){
  #dashboardPage #rankingList.ranking-list{max-height:360px!important;overflow:auto!important;}
}
@media (max-width:760px){
  #dashboardPage #rankingList.ranking-list{padding:7px!important;}
  #dashboardPage #rankingList .rank-item{grid-template-columns:30px minmax(0,1fr) 50px!important;gap:8px!important;padding:8px!important;}
  #dashboardPage #rankingList .rank-first{grid-template-columns:38px minmax(0,1fr) 58px!important;min-height:76px!important;}
  #dashboardPage #rankingList .rank-badge{width:28px!important;height:28px!important;}
  #dashboardPage #rankingList .rank-first .rank-badge{width:36px!important;height:36px!important;}
  #dashboardPage #rankingList .rank-name-line strong{font-size:12px!important;}
  #dashboardPage #rankingList .rank-first .rank-name-line strong{font-size:14px!important;}
  #dashboardPage #rankingList .rank-metrics span{font-size:8px!important;padding:2px 5px!important;}
  #dashboardPage #rankingList .rank-score span{font-size:14px!important;}
  #dashboardPage #rankingList .rank-first .rank-score span{font-size:18px!important;}
}

/* Admin Ranking v3 - quiet luxury table 20260720 */
#dashboardPage .panel:has(#rankingList){
  background:linear-gradient(180deg,rgba(18,32,48,.82),rgba(9,18,30,.88))!important;
  border:1px solid rgba(168,185,210,.14)!important;
  border-radius:18px!important;
  box-shadow:0 18px 46px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.045)!important;
  padding:18px 20px 20px!important;
}
#dashboardPage .panel:has(#rankingList)::before,
#dashboardPage .panel:has(#rankingList)::after,
#dashboardPage #rankingList .rank-glow{display:none!important;}
#dashboardPage .ranking-panel-head{
  align-items:flex-start!important;
  padding:0!important;
  margin-bottom:12px!important;
}
#dashboardPage .ranking-panel-head h3{
  font-size:15px!important;
  line-height:1.15!important;
  font-weight:850!important;
  color:#f3f7ff!important;
}
#dashboardPage .ranking-panel-head p{
  margin-top:3px!important;
  font-size:10px!important;
  color:#7f8da0!important;
}
#dashboardPage .ranking-refresh-box{gap:8px!important;}
#dashboardPage #rankingLastUpdated,
#dashboardPage .ranking-refresh-btn{
  min-height:26px!important;
  padding:5px 10px!important;
  border-radius:9px!important;
  font-size:10px!important;
  font-weight:800!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:#a9b6c8!important;
  box-shadow:none!important;
}
#dashboardPage .ranking-refresh-btn{color:#e9eef7!important;background:rgba(255,255,255,.07)!important;}
#dashboardPage .ranking-refresh-btn:hover{background:rgba(255,255,255,.10)!important;border-color:rgba(222,190,119,.24)!important;}
#dashboardPage #rankingList.ranking-list{
  gap:0!important;
  padding:0!important;
  max-height:310px!important;
  overflow:auto!important;
  border-radius:14px!important;
  background:rgba(4,10,18,.20)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  align-items:center!important;
  min-height:54px!important;
  gap:12px!important;
  padding:9px 14px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
#dashboardPage #rankingList .rank-item + .rank-item{border-top:1px solid rgba(255,255,255,.055)!important;}
#dashboardPage #rankingList .rank-item:hover{background:rgba(255,255,255,.035)!important;transform:none!important;}
#dashboardPage #rankingList .rank-item::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:14px!important;
  bottom:14px!important;
  width:2px!important;
  border-radius:0 999px 999px 0!important;
  background:rgba(129,145,166,.42)!important;
  opacity:1!important;
}
#dashboardPage #rankingList .rank-first::before{background:#d8b86d!important;box-shadow:0 0 14px rgba(216,184,109,.22)!important;}
#dashboardPage #rankingList .rank-second::before{background:#9fb0ca!important;}
#dashboardPage #rankingList .rank-third::before{background:#c69a72!important;}
#dashboardPage #rankingList .rank-first::after{display:none!important;}
#dashboardPage #rankingList .rank-badge,
#dashboardPage #rankingList .rank-first .rank-badge{
  width:30px!important;
  height:30px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:none!important;
}
#dashboardPage #rankingList .rank-first .rank-badge{background:rgba(216,184,109,.13)!important;border-color:rgba(216,184,109,.26)!important;}
#dashboardPage #rankingList .rank-badge span,
#dashboardPage #rankingList .rank-first .rank-badge span{
  color:#dce5f3!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1!important;
  background:transparent!important;
  border:0!important;
}
#dashboardPage #rankingList .rank-first .rank-badge span{color:#f1d58d!important;}
#dashboardPage #rankingList .rank-main{min-width:0!important;}
#dashboardPage #rankingList .rank-name-line{gap:7px!important;align-items:center!important;min-width:0!important;}
#dashboardPage #rankingList .rank-name-line strong,
#dashboardPage #rankingList .rank-first .rank-name-line strong{
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:850!important;
  color:#f5f8fd!important;
  letter-spacing:0!important;
}
#dashboardPage #rankingList .rank-crown{
  padding:2px 6px!important;
  border-radius:999px!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:900!important;
  color:#241804!important;
  background:#d8b86d!important;
  box-shadow:none!important;
}
#dashboardPage #rankingList .rank-metrics{
  margin-top:4px!important;
  display:flex!important;
  gap:5px!important;
  flex-wrap:wrap!important;
}
#dashboardPage #rankingList .rank-metrics span,
#dashboardPage #rankingList .rank-first .rank-metrics span{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#8795a8!important;
  font-size:9px!important;
  line-height:1.25!important;
  font-weight:750!important;
}
#dashboardPage #rankingList .rank-metrics span + span::before{content:"/";margin-right:5px;color:#526173;}
#dashboardPage #rankingList .star-bar{
  margin-top:4px!important;
  gap:4px!important;
  min-height:11px!important;
  font-size:9px!important;
  line-height:1!important;
  color:#d8b86d!important;
  opacity:.86!important;
}
#dashboardPage #rankingList .star-bar span{max-width:44px!important;overflow:hidden!important;white-space:nowrap!important;}
#dashboardPage #rankingList .star-bar b{font-size:9px!important;color:#c7ad70!important;font-weight:800!important;}
#dashboardPage #rankingList .star-bar em{font-size:8px!important;color:#65758b!important;font-weight:700!important;}
#dashboardPage #rankingList .star-bar.is-empty,
#dashboardPage #rankingList .star-bar.is-empty b{color:#637286!important;opacity:.75!important;}
#dashboardPage #rankingList .rank-score,
#dashboardPage #rankingList .rank-first .rank-score{
  min-width:58px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:right!important;
}
#dashboardPage #rankingList .rank-score span,
#dashboardPage #rankingList .rank-first .rank-score span{
  display:block!important;
  color:#eef4ff!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:0!important;
}
#dashboardPage #rankingList .rank-first .rank-score span{color:#f1d58d!important;font-size:18px!important;}
#dashboardPage #rankingList .rank-score small{
  display:block!important;
  margin-top:3px!important;
  color:#617086!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:750!important;
}
@media (max-width:760px){
  #dashboardPage .panel:has(#rankingList){padding:15px!important;border-radius:16px!important;}
  #dashboardPage .ranking-panel-head{gap:8px!important;}
  #dashboardPage #rankingList.ranking-list{max-height:330px!important;}
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first{grid-template-columns:34px minmax(0,1fr) 52px!important;gap:9px!important;padding:9px 10px!important;min-height:58px!important;}
  #dashboardPage #rankingList .rank-badge,
  #dashboardPage #rankingList .rank-first .rank-badge{width:28px!important;height:28px!important;border-radius:9px!important;}
  #dashboardPage #rankingList .rank-score span,
  #dashboardPage #rankingList .rank-first .rank-score span{font-size:15px!important;}
}

/* Report compact luxury polish 20260720 */
#reportPage{
  --report-card-bg:linear-gradient(180deg,rgba(12,18,33,.96),rgba(7,11,22,.98));
  --report-line:rgba(148,163,184,.12);
  --report-muted:#8797ad;
}
#reportPage .report-scope-row{
  margin-bottom:10px!important;
  gap:8px!important;
}
#reportPage .report-scope-copy{
  font-size:11px!important;
  color:#7f8fa7!important;
}
#reportPage .report-store-select,
#reportPage .report-dashboard-link,
#reportPage .report-scope-row .chip,
#reportPage .report-tab-row .chip{
  min-height:30px!important;
  padding:0 10px!important;
  font-size:11px!important;
  border-radius:999px!important;
}
#reportPage .report-cycle-card{
  min-height:0!important;
  margin-bottom:10px!important;
  padding:10px 14px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(20,29,48,.98),rgba(10,15,28,.98))!important;
  border-color:rgba(197,167,96,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#reportPage #reportCycleText{
  font-size:13px!important;
  line-height:1.25!important;
  color:#e8eef8!important;
}
#reportPage #cycleCountdown{
  font-size:17px!important;
  color:#e1c781!important;
}
#reportPage .report-tab-row{
  margin-bottom:10px!important;
  gap:7px!important;
}
#reportPage .report-stats-grid{
  gap:8px!important;
  margin-bottom:10px!important;
}
#reportPage .report-stats-grid .stat-card{
  min-height:68px!important;
  padding:11px 12px!important;
  border-radius:12px!important;
  background:var(--report-card-bg)!important;
  border:1px solid var(--report-line)!important;
  box-shadow:none!important;
}
#reportPage .report-stats-grid .stat-label{
  margin-bottom:4px!important;
  font-size:10px!important;
  letter-spacing:0!important;
  color:#7e8da3!important;
}
#reportPage .report-stats-grid .stat-value{
  font-size:22px!important;
  line-height:1!important;
  color:#eef3fb!important;
}
#reportPage .report-chart-grid,
#reportPage .report-grid{
  gap:10px!important;
  margin-bottom:10px!important;
}
#reportPage .report-chart-panel,
#reportPage .report-summary-panel,
#reportPage .report-ranking-panel,
#reportPage .report-breakdown-panel{
  padding:12px!important;
  border-radius:12px!important;
  background:var(--report-card-bg)!important;
  border:1px solid var(--report-line)!important;
  box-shadow:none!important;
}
#reportPage .panel-head{
  margin-bottom:8px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid rgba(148,163,184,.09)!important;
}
#reportPage .panel-head h3,
#reportPage .report-chart-panel h3,
#reportPage .report-breakdown-panel h3{
  font-size:13px!important;
  line-height:1.2!important;
  color:#eef3fb!important;
}
#reportPage .report-chart-panel .chip-row{
  gap:5px!important;
}
#reportPage .report-chart-panel .chip{
  min-height:28px!important;
  padding:0 9px!important;
  font-size:10px!important;
  border-radius:999px!important;
}
#reportPage #rcLineChart{height:176px!important;max-height:176px!important;}
#reportPage #rcDonutChart{height:164px!important;max-height:164px!important;}
#reportPage #rcBarChart{height:172px!important;max-height:172px!important;}
#reportPage #rcBarWrap{min-width:520px!important;}
#reportPage #rcLineLegend,
#reportPage #rcDonutLegend{
  margin-top:7px!important;
  gap:6px!important;
  font-size:10px!important;
  color:#8998ad!important;
}
#reportPage .report-list{
  gap:0!important;
}
#reportPage .report-list li{
  min-height:36px!important;
  padding:8px 0!important;
  border-bottom:1px solid rgba(148,163,184,.09)!important;
}
#reportPage .report-list li span{
  font-size:11px!important;
  color:#8493aa!important;
}
#reportPage .report-list li strong{
  font-size:12px!important;
  color:#edf3fb!important;
}
#reportPage .report-summary-panel > div[style*="rgba(245,158,11"]{
  margin-top:10px!important;
  padding:10px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(197,167,96,.08),rgba(197,167,96,.035))!important;
  border-color:rgba(197,167,96,.16)!important;
}
#reportPage #reportAvgStars,
#reportPage #reportRatingCount{
  font-size:21px!important;
  line-height:1!important;
}
#reportPage #reportAvgStarBar{
  font-size:12px!important;
  letter-spacing:1px!important;
  color:#d8bd77!important;
}
#reportPage #reportTopRatingAdmin{
  font-size:12px!important;
}
#reportPage #reportRankingList.ranking-list{
  gap:0!important;
  max-height:255px!important;
  overflow:auto!important;
  padding-right:2px!important;
}
#reportPage #reportRankingList .rank-item,
#reportPage #reportRankingList .rank-first{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr) 52px!important;
  align-items:center!important;
  gap:8px!important;
  min-height:46px!important;
  padding:7px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(148,163,184,.09)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#reportPage #reportRankingList .rank-first{
  border-top:1px solid rgba(197,167,96,.16)!important;
  border-bottom-color:rgba(197,167,96,.16)!important;
}
#reportPage #reportRankingList .rank-badge,
#reportPage #reportRankingList .rank-first .rank-badge{
  width:24px!important;
  height:24px!important;
  border-radius:8px!important;
  display:grid!important;
  place-items:center!important;
  font-size:10px!important;
  font-weight:900!important;
  background:rgba(148,163,184,.09)!important;
  border:1px solid rgba(148,163,184,.13)!important;
  color:#cbd6e6!important;
  box-shadow:none!important;
}
#reportPage #reportRankingList .rank-first .rank-badge{
  background:rgba(197,167,96,.13)!important;
  border-color:rgba(197,167,96,.25)!important;
  color:#e5ca83!important;
}
#reportPage #reportRankingList .rank-info,
#reportPage #reportRankingList .rank-main{
  min-width:0!important;
}
#reportPage #reportRankingList .rank-name{
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:800!important;
  color:#eef3fb!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#reportPage #reportRankingList .rank-crown{
  display:none!important;
}
#reportPage #reportRankingList .rank-metrics{
  margin-top:3px!important;
  display:flex!important;
  gap:5px!important;
  flex-wrap:wrap!important;
}
#reportPage #reportRankingList .rank-metrics span{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#77869c!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:700!important;
}
#reportPage #reportRankingList .rank-metrics span + span::before{
  content:"/";
  margin-right:5px;
  color:#4d5b70;
}
#reportPage #reportRankingList .star-bar{
  margin-top:3px!important;
  gap:3px!important;
  min-height:10px!important;
  font-size:9px!important;
  color:#d8bd77!important;
  opacity:.82!important;
}
#reportPage #reportRankingList .rank-score{
  min-width:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:right!important;
}
#reportPage #reportRankingList .rank-score span{
  display:block!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:900!important;
  color:#eef3fb!important;
}
#reportPage #reportRankingList .rank-first .rank-score span{
  color:#e5ca83!important;
}
#reportPage #reportRankingList .rank-score small{
  margin-top:2px!important;
  font-size:8px!important;
  color:#64738a!important;
}
#reportPage .report-breakdown-row{
  padding:8px 0!important;
  gap:8px!important;
}
#reportPage .report-breakdown-brand strong,
#reportPage .report-breakdown-metric b{
  font-size:12px!important;
}
#reportPage .report-breakdown-track{
  height:6px!important;
}
@media (max-width:768px){
  #reportPage{padding:8px!important;}
  #reportPage .report-stats-grid .stat-card{min-height:62px!important;padding:10px!important;}
  #reportPage .report-stats-grid .stat-value{font-size:20px!important;}
  #reportPage .report-chart-panel,
  #reportPage .report-summary-panel,
  #reportPage .report-ranking-panel,
  #reportPage .report-breakdown-panel{padding:10px!important;}
  #reportPage #rcLineChart{height:150px!important;max-height:150px!important;}
  #reportPage #rcDonutChart{height:146px!important;max-height:146px!important;}
  #reportPage #rcBarChart{height:150px!important;max-height:150px!important;}
}

/* KPI Summary Cards - premium reference 20260720 */
#dashboardPage > .stats-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:24px!important;
  margin:0 0 18px!important;
}
#dashboardPage > .stats-grid .stat-card{
  position:relative!important;
  min-height:126px!important;
  height:100%!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:space-between!important;
  gap:20px!important;
  padding:18px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:radial-gradient(circle at 14% 8%,var(--kpi-aura),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.058),rgba(255,255,255,0) 46%),#101C2E!important;
  box-shadow:0 10px 40px rgba(0,0,0,.35)!important;
  color:rgba(255,255,255,.94)!important;
  font-family:Inter,'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease!important;
}
#dashboardPage > .stats-grid .stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 26%,transparent 74%,rgba(255,255,255,.055)),radial-gradient(circle at 88% 86%,var(--kpi-glow),transparent 36%);
  opacity:.58;
}
#dashboardPage > .stats-grid .stat-card:hover{
  transform:translateY(-4px)!important;
  border-color:var(--kpi-border)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.42),0 0 0 1px var(--kpi-ring)!important;
}
#dashboardPage > .stats-grid .kpi-card__main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:16px;
}
#dashboardPage > .stats-grid .kpi-card__icon{
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:grid;
  place-items:center;
  border-radius:17px;
  color:var(--kpi-icon);
  background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.34),transparent 29%),linear-gradient(145deg,var(--kpi-icon-bg-start),var(--kpi-icon-bg-end));
  border:1px solid var(--kpi-icon-border);
  box-shadow:0 0 24px var(--kpi-icon-glow),inset 0 1px 0 rgba(255,255,255,.18);
}
#dashboardPage > .stats-grid .kpi-card__icon svg{
  width:29px;
  height:29px;
  filter:drop-shadow(0 0 12px var(--kpi-icon-glow));
}
#dashboardPage > .stats-grid .kpi-card__content{
  min-width:0;
  display:grid;
  align-content:center;
  gap:7px;
}
#dashboardPage > .stats-grid .stat-label{
  margin:0!important;
  color:rgba(226,232,240,.68)!important;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:nowrap!important;
}
#dashboardPage > .stats-grid .stat-value{
  margin:0!important;
  color:rgba(255,255,255,.96)!important;
  font-size:40px!important;
  line-height:.96!important;
  font-weight:700!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
#dashboardPage > .stats-grid .stat-value.danger{color:rgba(255,255,255,.96)!important;}
#dashboardPage > .stats-grid .stat-trend{
  margin:0!important;
  color:rgba(226,232,240,.48)!important;
  font-size:12px!important;
  line-height:1.32!important;
  font-weight:400!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
#dashboardPage > .stats-grid .stat-trend.positive,
#dashboardPage > .stats-grid .stat-trend.danger{color:rgba(226,232,240,.48)!important;}
#dashboardPage > .stats-grid .kpi-card__side{
  flex:0 0 88px;
  min-width:88px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
#dashboardPage > .stats-grid .kpi-card__trend{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(105,217,154,.18);
  background:rgba(105,217,154,.08);
  color:#69d99a;
  font-size:12px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
#dashboardPage > .stats-grid .kpi-card__sparkline{
  width:84px;
  height:36px;
  overflow:visible;
}
#dashboardPage > .stats-grid .kpi-card__sparkline-line{
  fill:none;
  stroke:var(--kpi-line);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px var(--kpi-line-glow));
}
#dashboardPage > .stats-grid .kpi-card__sparkline-fill{fill:var(--kpi-fill);}
#dashboardPage > .stats-grid .kpi-card--messages{
  --kpi-icon:#dce8ff;--kpi-line:#5d8cff;--kpi-fill:rgba(93,140,255,.14);--kpi-line-glow:rgba(93,140,255,.34);--kpi-aura:rgba(61,111,255,.24);--kpi-glow:rgba(61,111,255,.16);--kpi-border:rgba(117,155,255,.38);--kpi-ring:rgba(117,155,255,.16);--kpi-icon-bg-start:rgba(67,104,255,.34);--kpi-icon-bg-end:rgba(40,55,138,.42);--kpi-icon-border:rgba(127,159,255,.36);--kpi-icon-glow:rgba(82,123,255,.46);
}
#dashboardPage > .stats-grid .kpi-card--waiting{
  --kpi-icon:#ffe0e6;--kpi-line:#ff607d;--kpi-fill:rgba(255,96,125,.12);--kpi-line-glow:rgba(255,96,125,.28);--kpi-aura:rgba(255,77,111,.19);--kpi-glow:rgba(255,77,111,.13);--kpi-border:rgba(255,120,143,.34);--kpi-ring:rgba(255,120,143,.14);--kpi-icon-bg-start:rgba(255,77,111,.30);--kpi-icon-bg-end:rgba(111,35,55,.42);--kpi-icon-border:rgba(255,128,149,.33);--kpi-icon-glow:rgba(255,80,113,.42);
}
#dashboardPage > .stats-grid .kpi-card--friends{
  --kpi-icon:#ffe9b8;--kpi-line:#f4bd57;--kpi-fill:rgba(244,189,87,.13);--kpi-line-glow:rgba(244,189,87,.30);--kpi-aura:rgba(244,180,72,.20);--kpi-glow:rgba(244,180,72,.13);--kpi-border:rgba(244,203,119,.34);--kpi-ring:rgba(244,203,119,.14);--kpi-icon-bg-start:rgba(244,183,75,.30);--kpi-icon-bg-end:rgba(104,73,31,.42);--kpi-icon-border:rgba(244,204,123,.35);--kpi-icon-glow:rgba(244,188,84,.42);
}
#dashboardPage > .stats-grid .kpi-card--rating{
  --kpi-icon:#eadcff;--kpi-line:#9c6dff;--kpi-fill:rgba(156,109,255,.13);--kpi-line-glow:rgba(156,109,255,.32);--kpi-aura:rgba(142,91,255,.22);--kpi-glow:rgba(142,91,255,.14);--kpi-border:rgba(178,143,255,.36);--kpi-ring:rgba(178,143,255,.15);--kpi-icon-bg-start:rgba(142,91,255,.34);--kpi-icon-bg-end:rgba(66,42,136,.44);--kpi-icon-border:rgba(184,150,255,.36);--kpi-icon-glow:rgba(151,96,255,.46);
}
@media (max-width:1280px){
  #dashboardPage > .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;}
  #dashboardPage > .stats-grid .stat-card{min-height:118px!important;padding:16px!important;gap:14px!important;}
  #dashboardPage > .stats-grid .kpi-card__main{gap:13px!important;}
  #dashboardPage > .stats-grid .kpi-card__icon{width:50px!important;height:50px!important;flex-basis:50px!important;border-radius:15px!important;}
  #dashboardPage > .stats-grid .kpi-card__icon svg{width:25px!important;height:25px!important;}
  #dashboardPage > .stats-grid .stat-value{font-size:34px!important;}
  #dashboardPage > .stats-grid .kpi-card__side{flex-basis:74px!important;min-width:74px!important;}
  #dashboardPage > .stats-grid .kpi-card__sparkline{width:72px!important;}
}
@media (max-width:980px){
  #dashboardPage > .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;}
  #dashboardPage > .stats-grid .stat-card{min-height:136px!important;padding:22px!important;}
  #dashboardPage > .stats-grid .kpi-card__icon{width:62px!important;height:62px!important;flex-basis:62px!important;border-radius:18px!important;}
  #dashboardPage > .stats-grid .kpi-card__icon svg{width:31px!important;height:31px!important;}
  #dashboardPage > .stats-grid .stat-value{font-size:46px!important;}
  #dashboardPage > .stats-grid .kpi-card__side{flex-basis:104px!important;min-width:104px!important;}
  #dashboardPage > .stats-grid .kpi-card__sparkline{width:104px!important;}
}
@media (max-width:640px){
  #dashboardPage > .stats-grid{grid-template-columns:1fr!important;gap:16px!important;}
  #dashboardPage > .stats-grid .stat-card{min-height:132px!important;padding:20px!important;align-items:stretch!important;text-align:left!important;}
  #dashboardPage > .stats-grid .kpi-card__main{gap:16px!important;}
  #dashboardPage > .stats-grid .kpi-card__icon{width:58px!important;height:58px!important;flex-basis:58px!important;}
  #dashboardPage > .stats-grid .kpi-card__icon svg{width:29px!important;height:29px!important;}
  #dashboardPage > .stats-grid .stat-label,#dashboardPage > .stats-grid .stat-value,#dashboardPage > .stats-grid .stat-trend{width:auto!important;text-align:left!important;}
  #dashboardPage > .stats-grid .stat-value{font-size:42px!important;}
  #dashboardPage > .stats-grid .kpi-card__side{flex-basis:94px!important;min-width:94px!important;}
  #dashboardPage > .stats-grid .kpi-card__sparkline{width:94px!important;height:34px!important;}
}
@media (max-width:430px){
  #dashboardPage > .stats-grid .stat-card{min-height:170px!important;flex-direction:column!important;justify-content:space-between!important;}
  #dashboardPage > .stats-grid .kpi-card__side{width:100%!important;min-width:0!important;flex:0 0 auto!important;flex-direction:row!important;align-items:flex-end!important;}
  #dashboardPage > .stats-grid .kpi-card__sparkline{width:142px!important;}
}

/* Realtime Operations premium stacked chart 20260720 */
#dashboardPage .panel:has(#realtimeBars){
  background:linear-gradient(180deg,rgba(9,16,31,.92),rgba(8,14,28,.82))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 46px rgba(0,0,0,.30)!important;
}
#dashboardPage .panel:has(#realtimeBars) .panel-head{align-items:flex-start!important;margin-bottom:12px!important;}
#dashboardPage .panel:has(#realtimeBars) .panel-head h3{font-size:17px!important;font-weight:800!important;letter-spacing:0!important;}
#dashboardPage .panel:has(#realtimeBars) .panel-head p{color:rgba(203,213,225,.62)!important;font-size:12px!important;}
.realtime-range-tabs{padding:4px!important;border-radius:14px!important;background:rgba(9,18,35,.76)!important;border:1px solid rgba(255,255,255,.07)!important;gap:3px!important;}
.realtime-range-tabs .chip{height:34px!important;padding:0 18px!important;border-radius:11px!important;background:transparent!important;border:0!important;color:rgba(203,213,225,.68)!important;font-size:12px!important;font-weight:800!important;}
.realtime-range-tabs .chip.active{background:linear-gradient(180deg,#248cff,#106df0)!important;color:#fff!important;box-shadow:0 10px 28px rgba(28,126,255,.32),inset 0 1px 0 rgba(255,255,255,.20)!important;}
#realtimeBars{
  position:relative!important;
  display:block!important;
  height:292px!important;
  min-height:292px!important;
  padding:68px 24px 38px 44px!important;
  margin-top:4px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(7,18,36,.88),rgba(7,16,31,.72)),radial-gradient(circle at 58% -18%,rgba(47,140,255,.18),transparent 38%)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -22px 48px rgba(0,0,0,.22)!important;
  overflow:visible!important;
}
#realtimeBars::before{content:""!important;position:absolute!important;left:44px!important;right:24px!important;top:76px!important;bottom:44px!important;background:repeating-linear-gradient(to top,rgba(148,163,184,.12) 0 1px,transparent 1px 42px)!important;opacity:.62!important;pointer-events:none!important;}
#realtimeBars .realtime-chart-toolbar{position:absolute;z-index:4;left:24px;right:24px;top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto;}
#realtimeBars .realtime-legend{display:flex;align-items:center;gap:18px;min-width:0;overflow:hidden;}
#realtimeBars .realtime-legend-item{display:inline-flex;align-items:center;gap:7px;color:rgba(226,232,240,.82);font-size:12px;font-weight:700;white-space:nowrap;}
#realtimeBars .realtime-legend-item i{width:9px;height:9px;border-radius:999px;background:var(--legend-color);box-shadow:0 0 14px var(--legend-color);}
#realtimeBars .realtime-store-filter{height:34px;padding:0 14px;border-radius:11px;border:1px solid rgba(255,255,255,.09);background:rgba(8,15,30,.72);color:rgba(226,232,240,.78);font-size:12px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
#realtimeBars span.realtime-store-filter{display:inline-flex;align-items:center;justify-content:center;cursor:default;pointer-events:none;}
#realtimeBars .realtime-scale{position:absolute;z-index:2;left:15px;top:76px;bottom:40px;display:flex;flex-direction:column;justify-content:space-between;color:rgba(203,213,225,.62);font-size:11px;font-weight:800;pointer-events:none;}
#realtimeBars .realtime-bars-track{position:relative!important;z-index:3!important;display:grid!important;grid-template-columns:repeat(24,minmax(18px,1fr))!important;align-items:end!important;gap:10px!important;width:100%!important;height:100%!important;min-width:0!important;}
#realtimeBars[data-range="week"] .realtime-bars-track{grid-template-columns:repeat(7,minmax(52px,1fr))!important;gap:18px!important;}
#realtimeBars[data-range="month"]{overflow-x:auto!important;overflow-y:visible!important;padding-bottom:42px!important;}
#realtimeBars[data-range="month"] .realtime-bars-track{grid-template-columns:repeat(30,28px)!important;width:max-content!important;min-width:max-content!important;gap:9px!important;padding-right:4px!important;}
#realtimeBars .bar-col,#realtimeBars.has-active-bars[data-range="today"] .bar-col,#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero{position:relative!important;z-index:3!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;width:auto!important;min-width:0!important;max-width:none!important;height:100%!important;color:rgba(203,213,225,.62)!important;font-size:10px!important;font-weight:800!important;}
#realtimeBars .bar{position:relative!important;width:100%!important;max-width:28px!important;min-height:9px!important;display:flex!important;flex-direction:column-reverse!important;overflow:hidden!important;border-radius:999px 999px 8px 8px!important;background:rgba(28,44,68,.88)!important;box-shadow:0 12px 24px rgba(0,0,0,.28),0 0 18px rgba(47,140,255,.16),inset 0 1px 0 rgba(255,255,255,.24)!important;transition:height .34s ease,transform 180ms ease,filter 180ms ease!important;}
#realtimeBars .bar-segment{display:block!important;width:100%!important;min-height:6px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important;}
#realtimeBars .bar i{position:absolute!important;left:5px!important;right:5px!important;top:5px!important;height:28%!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0))!important;pointer-events:none!important;}
#realtimeBars .bar-col:hover .bar{transform:translateY(-3px)!important;filter:brightness(1.08)!important;}
#realtimeBars .bar-count,#realtimeBars.has-active-bars[data-range="today"] .bar-count{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:16px!important;padding:0!important;border:0!important;background:transparent!important;color:rgba(241,245,249,.92)!important;font-size:11px!important;font-weight:900!important;text-shadow:0 2px 10px rgba(0,0,0,.36)!important;}
#realtimeBars .bar-count.zero,#realtimeBars.has-active-bars[data-range="today"] .bar-count.zero{opacity:.34!important;color:rgba(148,163,184,.78)!important;}
#realtimeBars .bar-col.is-zero .bar,#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{height:7%!important;min-height:7px!important;opacity:.24!important;background:rgba(71,85,105,.72)!important;box-shadow:none!important;}
#realtimeBars .bar-col.is-zero .bar-segment{background:rgba(71,85,105,.72)!important;}
#realtimeBars .bar-col > span{font-size:11px!important;font-weight:800!important;color:rgba(203,213,225,.70)!important;white-space:nowrap!important;}
#realtimeBars span.muted-hour{opacity:1!important;}
#realtimeBars .realtime-summary{position:absolute!important;z-index:4!important;left:44px!important;right:24px!important;bottom:9px!important;top:auto!important;display:flex!important;align-items:center!important;gap:10px!important;pointer-events:none!important;}
#realtimeBars .realtime-summary strong{font-size:22px!important;line-height:1!important;color:#f8fbff!important;text-shadow:0 0 18px rgba(47,140,255,.22)!important;}
#realtimeBars .realtime-summary span{font-size:12px!important;font-weight:800!important;color:rgba(226,232,240,.72)!important;}
#realtimeBars .realtime-summary small{margin-left:auto!important;font-size:11px!important;font-weight:800!important;color:rgba(203,213,225,.62)!important;}
#realtimeBars .realtime-tooltip{position:absolute;z-index:10;left:50%;bottom:52px;min-width:154px;padding:10px 12px;border-radius:14px;background:rgba(8,15,30,.96);border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity 160ms ease,transform 160ms ease;}
#realtimeBars .bar-col:hover .realtime-tooltip{opacity:1;transform:translate(-50%,0);}
#realtimeBars .realtime-tooltip strong{display:block;margin-bottom:7px;color:#f8fbff;font-size:12px;font-weight:900;}
#realtimeBars .realtime-tooltip div{display:flex;align-items:center;justify-content:space-between;gap:16px;color:rgba(226,232,240,.76);font-size:11px;font-weight:750;line-height:1.8;}
#realtimeBars .realtime-tooltip span{display:flex;align-items:center;gap:7px;color:rgba(226,232,240,.72);font-size:11px;}
#realtimeBars .realtime-tooltip i{width:7px;height:7px;border-radius:999px;display:inline-block;}
#realtimeBars .realtime-tooltip hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:7px 0 4px;}
@media (max-width:980px){#realtimeBars{height:276px!important;min-height:276px!important;padding:72px 18px 40px 38px!important;}#realtimeBars .realtime-bars-track{gap:8px!important;}#realtimeBars .realtime-legend{gap:10px;flex-wrap:wrap;}#realtimeBars .realtime-store-filter{display:none;}#realtimeBars::before{left:38px!important;right:18px!important;}}
@media (max-width:720px){#dashboardPage .panel:has(#realtimeBars) .panel-head{flex-direction:column!important;}#realtimeBars,#realtimeBars.has-active-bars[data-range="today"]{display:block!important;height:270px!important;min-height:270px!important;padding:80px 16px 42px 36px!important;overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important;}#realtimeBars .realtime-bars-track,#realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{display:grid!important;grid-template-columns:repeat(24,34px)!important;grid-auto-flow:column!important;width:max-content!important;min-width:max-content!important;height:100%!important;gap:9px!important;padding-right:14px!important;}#realtimeBars[data-range="week"] .realtime-bars-track{grid-template-columns:repeat(7,48px)!important;}#realtimeBars .realtime-chart-toolbar{left:16px;right:16px;top:14px;align-items:flex-start;}#realtimeBars .realtime-legend{max-width:calc(100vw - 96px);gap:8px;}#realtimeBars .realtime-legend-item{font-size:11px;}#realtimeBars .realtime-summary{left:36px!important;right:16px!important;}#realtimeBars .realtime-summary small{display:none!important;}}


/* Realtime premium chart final specificity guard 20260720 */
#realtimeBars.has-active-bars[data-range="today"]{
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  overflow:visible!important;
}
#realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
  display:grid!important;
  grid-template-columns:repeat(24,minmax(18px,1fr))!important;
  grid-auto-flow:row!important;
  align-items:end!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  padding-right:0!important;
}
#realtimeBars.has-active-bars[data-range="today"] .bar-col,
#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}
@media (max-width:720px){
  #realtimeBars.has-active-bars[data-range="today"]{
    display:block!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
  }
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
    grid-template-columns:repeat(24,34px)!important;
    grid-auto-flow:column!important;
    width:max-content!important;
    min-width:max-content!important;
    gap:9px!important;
    padding-right:14px!important;
  }
}

/* Realtime chart focus and fit refinement 20260720 */
#realtimeBars .realtime-bars-track{
  grid-template-columns:repeat(var(--realtime-bars,24),minmax(34px,1fr))!important;
  gap:13px!important;
}
#realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
  grid-template-columns:repeat(var(--realtime-bars,24),minmax(34px,1fr))!important;
  gap:13px!important;
}
#realtimeBars[data-focused="true"]{
  padding-left:38px!important;
  padding-right:28px!important;
}
#realtimeBars[data-focused="true"]::before{
  left:38px!important;
  right:28px!important;
}
#realtimeBars[data-focused="true"] .bar{
  max-width:36px!important;
}
#realtimeBars[data-focused="true"] .bar-count{
  font-size:12px!important;
}
#realtimeBars[data-focused="true"] .bar-col > span{
  font-size:12px!important;
}
#realtimeBars[data-focused="true"] .realtime-summary{
  left:38px!important;
  right:28px!important;
}
#dashboardPage > .stats-grid{
  gap:16px!important;
}
@media (max-width:1440px){
  #dashboardPage > .stats-grid{gap:14px!important;}
  #dashboardPage > .stats-grid .stat-card{padding:16px!important;gap:12px!important;}
  #dashboardPage > .stats-grid .kpi-card__icon{width:50px!important;height:50px!important;flex-basis:50px!important;border-radius:15px!important;}
  #dashboardPage > .stats-grid .kpi-card__icon svg{width:25px!important;height:25px!important;}
  #dashboardPage > .stats-grid .stat-value{font-size:34px!important;}
  #dashboardPage > .stats-grid .kpi-card__side{flex-basis:72px!important;min-width:72px!important;}
  #dashboardPage > .stats-grid .kpi-card__sparkline{width:72px!important;}
}
@media (max-width:720px){
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
    grid-template-columns:repeat(var(--realtime-bars,24),42px)!important;
    gap:10px!important;
  }
  #realtimeBars[data-focused="true"] .bar{max-width:34px!important;}
}

/* Realtime chart slender bars refinement 20260720 */
#realtimeBars,
#realtimeBars.has-active-bars[data-range="today"]{
  padding-left:46px!important;
  padding-right:30px!important;
}
#realtimeBars::before,
#realtimeBars.has-active-bars[data-range="today"]::before{
  left:46px!important;
  right:30px!important;
}
#realtimeBars .realtime-bars-track,
#realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
  grid-template-columns:repeat(24,minmax(24px,1fr))!important;
  gap:14px!important;
  justify-items:center!important;
}
#realtimeBars[data-range="week"] .realtime-bars-track{
  grid-template-columns:repeat(7,minmax(42px,1fr))!important;
  gap:16px!important;
}
#realtimeBars[data-range="month"] .realtime-bars-track{
  grid-template-columns:repeat(30,20px)!important;
  gap:10px!important;
}
#realtimeBars .bar,
#realtimeBars[data-focused="true"] .bar,
#realtimeBars.has-active-bars[data-range="today"] .bar{
  width:20px!important;
  max-width:20px!important;
  border-radius:14px 14px 6px 6px!important;
  box-shadow:0 10px 18px rgba(0,0,0,.22),0 0 12px rgba(47,140,255,.12),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
#realtimeBars .bar-segment,
#realtimeBars.has-active-bars[data-range="today"] .bar-segment{
  min-height:4px!important;
}
#realtimeBars .bar i,
#realtimeBars.has-active-bars[data-range="today"] .bar i{
  left:4px!important;
  right:4px!important;
  top:4px!important;
  height:24%!important;
  opacity:.72!important;
}
#realtimeBars .bar-col,
#realtimeBars.has-active-bars[data-range="today"] .bar-col{
  gap:6px!important;
}
#realtimeBars .bar-count,
#realtimeBars[data-focused="true"] .bar-count,
#realtimeBars.has-active-bars[data-range="today"] .bar-count{
  font-size:11px!important;
}
#realtimeBars .bar-col > span,
#realtimeBars[data-focused="true"] .bar-col > span,
#realtimeBars.has-active-bars[data-range="today"] .bar-col > span{
  font-size:11px!important;
}
#realtimeBars .realtime-summary,
#realtimeBars[data-focused="true"] .realtime-summary,
#realtimeBars.has-active-bars[data-range="today"] .realtime-summary{
  left:46px!important;
  right:30px!important;
}
@media (max-width:980px){
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{gap:12px!important;}
  #realtimeBars .bar,
  #realtimeBars[data-focused="true"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar{width:18px!important;max-width:18px!important;}
}
@media (max-width:720px){
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
    grid-template-columns:repeat(24,32px)!important;
    gap:8px!important;
  }
  #realtimeBars .bar,
  #realtimeBars[data-focused="true"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar{width:16px!important;max-width:16px!important;}
}

/* Realtime chart ultra slender bars refinement 20260720 */
#realtimeBars .realtime-bars-track,
#realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
  grid-template-columns:repeat(24,minmax(28px,1fr))!important;
  gap:16px!important;
  justify-items:center!important;
}
#realtimeBars[data-range="week"] .realtime-bars-track{
  grid-template-columns:repeat(7,minmax(44px,1fr))!important;
  gap:18px!important;
}
#realtimeBars[data-range="month"] .realtime-bars-track{
  grid-template-columns:repeat(30,22px)!important;
  gap:12px!important;
}
#realtimeBars .bar,
#realtimeBars[data-focused="true"] .bar,
#realtimeBars.has-active-bars[data-range="today"] .bar,
#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{
  width:13px!important;
  max-width:13px!important;
  min-width:13px!important;
  border-radius:10px 10px 4px 4px!important;
  box-shadow:0 8px 14px rgba(0,0,0,.20),0 0 8px rgba(47,140,255,.10),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
#realtimeBars .bar-segment,
#realtimeBars.has-active-bars[data-range="today"] .bar-segment{
  min-height:3px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
}
#realtimeBars .bar i,
#realtimeBars.has-active-bars[data-range="today"] .bar i{
  left:3px!important;
  right:3px!important;
  top:3px!important;
  height:22%!important;
  opacity:.52!important;
}
#realtimeBars .bar-col:hover .bar{
  transform:translateY(-2px)!important;
  filter:brightness(1.05)!important;
}
#realtimeBars .bar-count,
#realtimeBars[data-focused="true"] .bar-count,
#realtimeBars.has-active-bars[data-range="today"] .bar-count{
  font-size:10px!important;
  line-height:1!important;
  text-shadow:0 2px 8px rgba(0,0,0,.30)!important;
}
#realtimeBars .bar-col > span,
#realtimeBars[data-focused="true"] .bar-col > span,
#realtimeBars.has-active-bars[data-range="today"] .bar-col > span{
  font-size:10px!important;
}
@media (max-width:980px){
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{grid-template-columns:repeat(24,minmax(26px,1fr))!important;gap:14px!important;}
  #realtimeBars .bar,
  #realtimeBars[data-focused="true"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{width:12px!important;max-width:12px!important;min-width:12px!important;}
}
@media (max-width:720px){
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{grid-template-columns:repeat(24,30px)!important;gap:8px!important;}
  #realtimeBars .bar,
  #realtimeBars[data-focused="true"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{width:10px!important;max-width:10px!important;min-width:10px!important;}
}

/* Realtime chart balanced spacing refinement 20260720 */
#realtimeBars .realtime-bars-track,
#realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{
  grid-template-columns:repeat(24,minmax(22px,1fr))!important;
  gap:9px!important;
  justify-items:center!important;
}
#realtimeBars[data-range="week"] .realtime-bars-track{
  grid-template-columns:repeat(7,minmax(44px,1fr))!important;
  gap:14px!important;
}
#realtimeBars[data-range="month"] .realtime-bars-track{
  grid-template-columns:repeat(30,19px)!important;
  gap:8px!important;
}
#realtimeBars .bar,
#realtimeBars[data-focused="true"] .bar,
#realtimeBars.has-active-bars[data-range="today"] .bar,
#realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{
  width:14px!important;
  max-width:14px!important;
  min-width:14px!important;
  border-radius:10px 10px 4px 4px!important;
}
@media (max-width:980px){
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{grid-template-columns:repeat(24,minmax(24px,1fr))!important;gap:10px!important;}
  #realtimeBars .bar,
  #realtimeBars[data-focused="true"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{width:13px!important;max-width:13px!important;min-width:13px!important;}
}
@media (max-width:720px){
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track{grid-template-columns:repeat(24,26px)!important;gap:6px!important;}
  #realtimeBars .bar,
  #realtimeBars[data-focused="true"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{width:11px!important;max-width:11px!important;min-width:11px!important;}
}

/* Realtime chart complete legend refinement 20260720 */
#realtimeBars .realtime-chart-toolbar{
  align-items:flex-start!important;
}
#realtimeBars .realtime-legend{
  flex-wrap:wrap!important;
  row-gap:7px!important;
  column-gap:12px!important;
  max-width:calc(100% - 118px)!important;
  overflow:visible!important;
}
#realtimeBars .realtime-legend-item{
  gap:5px!important;
  font-size:11px!important;
  line-height:1.1!important;
}
#realtimeBars .realtime-legend-item i{
  width:7px!important;
  height:7px!important;
  box-shadow:0 0 10px var(--legend-color)!important;
}
@media (max-width:980px){
  #realtimeBars .realtime-legend{max-width:100%!important;column-gap:10px!important;}
}

/* Admin Ranking top 15 refinement 20260720 */
#dashboardPage #rankingList.ranking-list{
  max-height:720px!important;
  overflow:auto!important;
  padding-right:4px!important;
  scrollbar-gutter:stable;
}
#dashboardPage #rankingList.ranking-list::-webkit-scrollbar{
  width:6px;
}
#dashboardPage #rankingList.ranking-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.03);
  border-radius:999px;
}
#dashboardPage #rankingList.ranking-list::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.32);
  border-radius:999px;
}
#dashboardPage #rankingList .rank-item:nth-child(n+6){
  min-height:64px!important;
}
#dashboardPage #rankingList .rank-item:nth-child(n+6) .rank-name-line strong{
  font-size:14px!important;
}
#dashboardPage #rankingList .rank-item:nth-child(n+6) .rank-score span{
  font-size:16px!important;
}
@media (max-width:980px){
  #dashboardPage #rankingList.ranking-list{
    max-height:620px!important;
  }
}

/* Store breakdown color accents 20260720 */
#dashboardPage .store-count-row{
  --store-accent:#2f8cff;
  --store-accent-rgb:47,140,255;
}
#dashboardPage .store-count-row.has-count{
  background:
    radial-gradient(circle at 10% 12%,rgba(var(--store-accent-rgb),.24),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.065),rgba(var(--store-accent-rgb),.105) 52%,rgba(255,255,255,.025));
  border-color:rgba(var(--store-accent-rgb),.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.18),0 0 24px rgba(var(--store-accent-rgb),.10);
}
#dashboardPage .store-count-row.has-count .store-count-icon{
  color:#071321;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.65),transparent 32%),
    linear-gradient(135deg,#eaf4ff 0%,var(--store-accent) 72%);
  border-color:rgba(var(--store-accent-rgb),.46);
  box-shadow:0 0 20px rgba(var(--store-accent-rgb),.26),inset 0 1px 0 rgba(255,255,255,.52);
}
#dashboardPage .store-count-row.has-count .store-count-sub{
  color:rgba(var(--store-accent-rgb),.92);
}
#dashboardPage .store-count-fill{
  background:
    linear-gradient(90deg,rgba(var(--store-accent-rgb),.20) 0%,var(--store-accent) 58%,rgba(234,242,255,.96) 100%);
  box-shadow:0 0 16px rgba(var(--store-accent-rgb),.38);
}
#dashboardPage .store-count-row.has-count .store-count-value{
  background:linear-gradient(135deg,rgba(var(--store-accent-rgb),.18),rgba(255,255,255,.055));
  border-color:rgba(var(--store-accent-rgb),.34);
}
#dashboardPage .store-count-row.has-count .store-count-value strong{
  color:var(--store-accent);
  text-shadow:0 0 14px rgba(var(--store-accent-rgb),.22);
}

/* Admin Ranking premium SaaS leaderboard 20260720 */
#dashboardPage .panel:has(#rankingList){
  --leader-bg:#071321;
  --leader-card:#0f1729;
  --leader-border:rgba(255,255,255,.06);
  --leader-text:rgba(248,250,252,.96);
  --leader-muted:rgba(203,213,225,.66);
  --leader-soft:rgba(148,163,184,.52);
  --leader-gold:#f5c85b;
  --leader-silver:#d8e2f2;
  --leader-bronze:#d79a63;
  --leader-blue:#2f8cff;
  --leader-purple:#8d5cff;
  --leader-green:#36d399;
  --leader-red:#fb7185;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  padding:22px!important;
  border-radius:28px!important;
  background:radial-gradient(circle at 12% 0%,rgba(47,140,255,.10),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),var(--leader-bg)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
#dashboardPage .admin-ranking-panel{margin-top:18px!important;}
#dashboardPage .admin-ranking-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:20px!important;margin:0 0 18px!important;padding:0!important;}
#dashboardPage .admin-ranking-kicker{display:block!important;margin-bottom:5px!important;color:rgba(125,178,255,.82)!important;font-size:10px!important;line-height:1!important;font-weight:700!important;letter-spacing:.12em!important;}
#dashboardPage .admin-ranking-title h3{margin:0!important;color:var(--leader-text)!important;font-size:22px!important;line-height:1.1!important;font-weight:700!important;letter-spacing:0!important;}
#dashboardPage .admin-ranking-title p{margin:7px 0 0!important;color:var(--leader-muted)!important;font-size:13px!important;line-height:1.35!important;font-weight:400!important;}
#dashboardPage .admin-ranking-actions{display:flex!important;align-items:center!important;gap:10px!important;}
#dashboardPage #rankingLastUpdated,#dashboardPage .ranking-refresh-btn{height:34px!important;min-height:34px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 13px!important;border-radius:12px!important;color:rgba(226,232,240,.78)!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.07)!important;font-size:12px!important;font-weight:600!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;}
#dashboardPage .ranking-refresh-btn{cursor:pointer!important;color:rgba(248,250,252,.92)!important;transition:transform 180ms ease,border-color 180ms ease,background 180ms ease!important;}
#dashboardPage .ranking-refresh-btn:hover{transform:translateY(-1px)!important;background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.14)!important;}
#dashboardPage #rankingList.premium-leaderboard{display:grid!important;gap:12px!important;max-height:820px!important;overflow:auto!important;padding:2px 4px 2px 2px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;scrollbar-gutter:stable!important;}
#dashboardPage #rankingList.premium-leaderboard::-webkit-scrollbar{width:6px!important;}
#dashboardPage #rankingList.premium-leaderboard::-webkit-scrollbar-track{background:rgba(255,255,255,.03)!important;border-radius:999px!important;}
#dashboardPage #rankingList.premium-leaderboard::-webkit-scrollbar-thumb{background:rgba(148,163,184,.32)!important;border-radius:999px!important;}
#dashboardPage #rankingList .rank-item,#dashboardPage #rankingList .rank-first{position:relative!important;min-height:72px!important;display:grid!important;grid-template-columns:46px 48px minmax(220px,1fr) 118px 82px 82px 96px 132px!important;align-items:center!important;gap:12px!important;padding:18px!important;overflow:hidden!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.016)),#0f1729!important;border:1px solid var(--leader-border)!important;box-shadow:0 12px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035)!important;transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease,background 180ms ease!important;}
#dashboardPage #rankingList .rank-item + .rank-item{border-top:1px solid var(--leader-border)!important;}
#dashboardPage #rankingList .rank-item::before{content:""!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;pointer-events:none!important;background:radial-gradient(circle at 0% 50%,rgba(47,140,255,.12),transparent 26%)!important;opacity:.7!important;}
#dashboardPage #rankingList .rank-item::after{display:none!important;}
#dashboardPage #rankingList .rank-item:hover{transform:translateY(-4px)!important;border-color:rgba(125,178,255,.24)!important;box-shadow:0 22px 46px rgba(0,0,0,.30),0 0 0 1px rgba(125,178,255,.10),inset 0 1px 0 rgba(255,255,255,.06)!important;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.022)),#0f1729!important;}
#dashboardPage #rankingList .rank-glow{display:none!important;}
#dashboardPage #rankingList .rank-medal,#dashboardPage #rankingList .rank-badge,#dashboardPage #rankingList .rank-first .rank-badge{position:relative!important;z-index:1!important;width:46px!important;height:46px!important;display:grid!important;place-items:center!important;border-radius:999px!important;color:rgba(248,250,252,.92)!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.09)!important;font-size:20px!important;font-weight:700!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.22)!important;}
#dashboardPage #rankingList .rank-badge span,#dashboardPage #rankingList .rank-first .rank-badge span{font-size:15px!important;font-weight:700!important;color:rgba(248,250,252,.92)!important;background:transparent!important;border:0!important;line-height:1!important;}
#dashboardPage #rankingList .rank-first .rank-medal,#dashboardPage #rankingList .rank-first .rank-badge{background:rgba(245,200,91,.13)!important;border-color:rgba(245,200,91,.32)!important;box-shadow:0 0 24px rgba(245,200,91,.20),inset 0 1px 0 rgba(255,255,255,.12)!important;}
#dashboardPage #rankingList .rank-second .rank-medal,#dashboardPage #rankingList .rank-second .rank-badge{background:rgba(216,226,242,.10)!important;border-color:rgba(216,226,242,.26)!important;box-shadow:0 0 22px rgba(216,226,242,.14),inset 0 1px 0 rgba(255,255,255,.12)!important;}
#dashboardPage #rankingList .rank-third .rank-medal,#dashboardPage #rankingList .rank-third .rank-badge{background:rgba(215,154,99,.11)!important;border-color:rgba(215,154,99,.25)!important;box-shadow:0 0 22px rgba(215,154,99,.15),inset 0 1px 0 rgba(255,255,255,.12)!important;}
#dashboardPage #rankingList .rank-avatar{position:relative!important;z-index:1!important;width:48px!important;height:48px!important;display:grid!important;place-items:center!important;border-radius:50%!important;color:#071321!important;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.85),transparent 34%),linear-gradient(135deg,#dbeafe 0%,#60a5fa 58%,#8b5cf6 100%)!important;border:1px solid rgba(255,255,255,.24)!important;font-size:16px!important;font-weight:700!important;box-shadow:0 12px 28px rgba(47,140,255,.24),inset 0 1px 0 rgba(255,255,255,.60)!important;}
#dashboardPage #rankingList .rank-main{position:relative!important;z-index:1!important;min-width:0!important;display:grid!important;gap:7px!important;}
#dashboardPage #rankingList .rank-name-line{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;}
#dashboardPage #rankingList .rank-name-line strong,#dashboardPage #rankingList .rank-first .rank-name-line strong{min-width:0!important;color:var(--leader-text)!important;font-size:18px!important;line-height:1.08!important;font-weight:700!important;letter-spacing:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#dashboardPage #rankingList .rank-crown{padding:4px 8px!important;border-radius:999px!important;color:#1f1603!important;background:linear-gradient(135deg,#ffe79a,#f5c85b)!important;border:1px solid rgba(255,255,255,.24)!important;font-size:10px!important;line-height:1!important;font-weight:700!important;box-shadow:0 0 18px rgba(245,200,91,.24)!important;}
#dashboardPage #rankingList .rank-subtitle{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px 12px!important;color:var(--leader-muted)!important;font-size:12px!important;line-height:1.2!important;font-weight:600!important;}
#dashboardPage #rankingList .rank-subtitle span{white-space:nowrap!important;}
#dashboardPage #rankingList .rank-subtitle span + span::before{content:""!important;margin:0!important;}
#dashboardPage #rankingList .rank-score,#dashboardPage #rankingList .rank-first .rank-score{position:relative!important;z-index:1!important;display:grid!important;justify-items:start!important;gap:2px!important;min-width:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:left!important;}
#dashboardPage #rankingList .rank-score span,#dashboardPage #rankingList .rank-first .rank-score span{color:var(--leader-gold)!important;font-size:36px!important;line-height:.92!important;font-weight:700!important;letter-spacing:0!important;text-shadow:0 0 20px rgba(245,200,91,.18)!important;}
#dashboardPage #rankingList .rank-score small,#dashboardPage #rankingList .rank-stat span{display:block!important;margin:0!important;color:var(--leader-soft)!important;font-size:11px!important;line-height:1!important;font-weight:600!important;}
#dashboardPage #rankingList .rank-stat{position:relative!important;z-index:1!important;display:grid!important;gap:5px!important;}
#dashboardPage #rankingList .rank-stat strong{color:rgba(248,250,252,.92)!important;font-size:18px!important;line-height:1!important;font-weight:700!important;}
#dashboardPage #rankingList .rank-rating{position:relative!important;z-index:1!important;display:grid!important;gap:5px!important;opacity:1!important;}
#dashboardPage #rankingList .rank-rating span{color:var(--leader-gold)!important;font-size:12px!important;line-height:1!important;letter-spacing:0!important;text-shadow:0 0 14px rgba(245,200,91,.20)!important;white-space:nowrap!important;}
#dashboardPage #rankingList .rank-rating b{color:rgba(248,250,252,.88)!important;font-size:12px!important;line-height:1!important;font-weight:700!important;}
#dashboardPage #rankingList .rank-rating em{color:#718099!important;font-size:9px!important;font-style:normal!important;font-weight:600!important;}
#dashboardPage #rankingList .rank-rating.is-empty span{display:none!important;}
#dashboardPage #rankingList .rank-performance{position:relative!important;z-index:1!important;min-height:32px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 12px!important;border-radius:999px!important;font-size:11px!important;line-height:1!important;font-weight:700!important;white-space:nowrap!important;border:1px solid rgba(255,255,255,.10)!important;}
#dashboardPage #rankingList .rank-performance--fast{color:#a7f3d0!important;background:rgba(54,211,153,.10)!important;border-color:rgba(54,211,153,.22)!important;}
#dashboardPage #rankingList .rank-performance--normal{color:#bfdbfe!important;background:rgba(47,140,255,.10)!important;border-color:rgba(47,140,255,.20)!important;}
#dashboardPage #rankingList .rank-performance--slow{color:#fecdd3!important;background:rgba(251,113,133,.10)!important;border-color:rgba(251,113,133,.22)!important;}
#dashboardPage #rankingList .rank-progress{position:absolute!important;left:124px!important;right:18px!important;bottom:10px!important;height:3px!important;overflow:hidden!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;}
#dashboardPage #rankingList .rank-progress i{display:block!important;width:var(--rank-progress,50%)!important;height:100%!important;border-radius:inherit!important;background:linear-gradient(90deg,var(--leader-blue),var(--leader-purple))!important;box-shadow:0 0 16px rgba(141,92,255,.32)!important;animation:rankProgressIn 680ms cubic-bezier(.2,.8,.2,1) both!important;}
@keyframes rankProgressIn{from{transform:scaleX(.18);transform-origin:left;opacity:.45}to{transform:scaleX(1);transform-origin:left;opacity:1}}
@media (max-width:1280px){#dashboardPage #rankingList .rank-item,#dashboardPage #rankingList .rank-first{grid-template-columns:42px 46px minmax(180px,1fr) 104px 70px 70px 84px 110px!important;padding:16px!important;}#dashboardPage #rankingList .rank-score span,#dashboardPage #rankingList .rank-first .rank-score span{font-size:30px!important;}#dashboardPage #rankingList .rank-name-line strong,#dashboardPage #rankingList .rank-first .rank-name-line strong{font-size:16px!important;}}
@media (max-width:980px){#dashboardPage .admin-ranking-head{flex-direction:column!important;}#dashboardPage .admin-ranking-actions{width:100%!important;justify-content:space-between!important;}#dashboardPage #rankingList .rank-item,#dashboardPage #rankingList .rank-first{grid-template-columns:42px 46px minmax(0,1fr) 94px!important;grid-template-areas:"medal avatar main score" "medal avatar perf perf"!important;row-gap:10px!important;}#dashboardPage #rankingList .rank-medal,#dashboardPage #rankingList .rank-badge{grid-area:medal!important;}#dashboardPage #rankingList .rank-avatar{grid-area:avatar!important;}#dashboardPage #rankingList .rank-main{grid-area:main!important;}#dashboardPage #rankingList .rank-score{grid-area:score!important;justify-items:end!important;text-align:right!important;}#dashboardPage #rankingList .rank-stat,#dashboardPage #rankingList .rank-rating{display:none!important;}#dashboardPage #rankingList .rank-performance{grid-area:perf!important;justify-self:end!important;}#dashboardPage #rankingList .rank-progress{left:118px!important;}}

/* Admin Ranking rebalanced premium leaderboard 20260720 */
#dashboardPage .admin-ranking-panel,
#dashboardPage .panel:has(#rankingList){
  --rank-bg:#071321;
  --rank-surface:#0f1729;
  --rank-surface-2:#111d31;
  --rank-line:rgba(255,255,255,.075);
  --rank-line-2:rgba(148,163,184,.14);
  --rank-text:#f7fbff;
  --rank-muted:#8fa2bd;
  --rank-soft:#5f718a;
  --rank-gold:#f2c75c;
  --rank-blue:#3b82f6;
  --rank-purple:#8b5cf6;
  padding:20px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.014)),#071321!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
#dashboardPage .admin-ranking-head{margin-bottom:14px!important;align-items:center!important;}
#dashboardPage .admin-ranking-kicker{color:#78a7ff!important;font-size:10px!important;letter-spacing:.16em!important;}
#dashboardPage .admin-ranking-title h3{font-size:21px!important;font-weight:800!important;color:#f8fbff!important;}
#dashboardPage .admin-ranking-title p{font-size:12px!important;color:#7890ad!important;margin-top:6px!important;}
#dashboardPage #rankingLastUpdated,
#dashboardPage .ranking-refresh-btn{height:32px!important;border-radius:11px!important;background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.075)!important;color:#b9c7d9!important;}
#dashboardPage #rankingList,
#dashboardPage #rankingList.premium-leaderboard{
  display:grid!important;
  gap:10px!important;
  max-height:650px!important;
  padding:1px 4px 1px 1px!important;
  overflow:auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  position:relative!important;
  min-height:72px!important;
  display:grid!important;
  grid-template-columns:44px 48px minmax(260px,1.35fr) minmax(92px,.55fr) minmax(168px,.8fr) minmax(104px,.48fr)!important;
  grid-template-areas:"badge avatar main score metrics status"!important;
  align-items:center!important;
  column-gap:14px!important;
  row-gap:0!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:linear-gradient(90deg,rgba(22,34,55,.98),rgba(15,23,41,.98) 54%,rgba(13,20,36,.98))!important;
  border:1px solid rgba(255,255,255,.065)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)!important;
  transform:none!important;
}
#dashboardPage #rankingList .rank-item::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:96px!important;
  height:auto!important;
  opacity:.88!important;
  pointer-events:none!important;
  background:radial-gradient(circle at 32px 50%,rgba(59,130,246,.20),transparent 62%)!important;
}
#dashboardPage #rankingList .rank-first::before{background:radial-gradient(circle at 32px 50%,rgba(242,199,92,.22),transparent 62%)!important;}
#dashboardPage #rankingList .rank-second::before{background:radial-gradient(circle at 32px 50%,rgba(203,213,225,.18),transparent 62%)!important;}
#dashboardPage #rankingList .rank-third::before{background:radial-gradient(circle at 32px 50%,rgba(204,142,89,.18),transparent 62%)!important;}
#dashboardPage #rankingList .rank-item:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(125,178,255,.23)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 0 1px rgba(125,178,255,.10),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
#dashboardPage #rankingList .rank-glow{display:none!important;}
#dashboardPage #rankingList .rank-medal,
#dashboardPage #rankingList .rank-badge,
#dashboardPage #rankingList .rank-first .rank-badge{
  grid-area:badge!important;
  position:relative!important;
  z-index:1!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  flex:none!important;
  color:#dbe7f8!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  font-size:19px!important;
  font-weight:800!important;
  box-shadow:0 10px 22px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
#dashboardPage #rankingList .rank-badge span{font-size:14px!important;font-weight:800!important;color:inherit!important;}
#dashboardPage #rankingList .rank-first .rank-medal{background:rgba(242,199,92,.13)!important;border-color:rgba(242,199,92,.30)!important;box-shadow:0 0 20px rgba(242,199,92,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;}
#dashboardPage #rankingList .rank-second .rank-medal{background:rgba(203,213,225,.11)!important;border-color:rgba(203,213,225,.24)!important;box-shadow:0 0 18px rgba(203,213,225,.12),inset 0 1px 0 rgba(255,255,255,.12)!important;}
#dashboardPage #rankingList .rank-third .rank-medal{background:rgba(204,142,89,.12)!important;border-color:rgba(204,142,89,.25)!important;box-shadow:0 0 18px rgba(204,142,89,.12),inset 0 1px 0 rgba(255,255,255,.12)!important;}
#dashboardPage #rankingList .rank-avatar{
  grid-area:avatar!important;
  position:relative!important;
  z-index:1!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  color:#0b1424!important;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.86),transparent 34%),linear-gradient(135deg,#dbeafe,#72a7ff 58%,#9b7cff)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  font-size:16px!important;
  font-weight:800!important;
  box-shadow:0 10px 24px rgba(59,130,246,.20),inset 0 1px 0 rgba(255,255,255,.58)!important;
}
#dashboardPage #rankingList .rank-main{
  grid-area:main!important;
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
  display:grid!important;
  gap:7px!important;
}
#dashboardPage #rankingList .rank-name-line{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;}
#dashboardPage #rankingList .rank-name-line strong,
#dashboardPage #rankingList .rank-first .rank-name-line strong{
  display:block!important;
  min-width:0!important;
  max-width:none!important;
  color:#f8fbff!important;
  font-size:17px!important;
  line-height:1.1!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#dashboardPage #rankingList .rank-crown{flex:none!important;padding:4px 8px!important;border-radius:999px!important;font-size:10px!important;color:#1e1605!important;background:linear-gradient(135deg,#fff0aa,#f2c75c)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 0 14px rgba(242,199,92,.18)!important;}
#dashboardPage #rankingList .rank-subtitle{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  color:#8fa2bd!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:650!important;
}
#dashboardPage #rankingList .rank-subtitle span{white-space:nowrap!important;}
#dashboardPage #rankingList .rank-subtitle span:not(:last-child)::after{content:"/";margin-left:6px;color:#52657c;}
#dashboardPage #rankingList .rank-score,
#dashboardPage #rankingList .rank-first .rank-score{
  grid-area:score!important;
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  justify-items:start!important;
  gap:3px!important;
  min-width:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#dashboardPage #rankingList .rank-score span,
#dashboardPage #rankingList .rank-first .rank-score span{
  color:#f2c75c!important;
  font-size:31px!important;
  line-height:.92!important;
  font-weight:800!important;
  text-shadow:0 0 16px rgba(242,199,92,.14)!important;
}
#dashboardPage #rankingList .rank-score small{font-size:10px!important;color:#7f90a8!important;font-weight:700!important;}
#dashboardPage #rankingList .rank-stat,
#dashboardPage #rankingList .rank-rating{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
}
#dashboardPage #rankingList .rank-stat:first-of-type{grid-area:metrics!important;}
#dashboardPage #rankingList .rank-stat:nth-of-type(2){grid-area:metrics!important;justify-self:end!important;min-width:58px!important;}
#dashboardPage #rankingList .rank-rating{grid-area:metrics!important;justify-self:center!important;min-width:58px!important;}
#dashboardPage #rankingList .rank-stat strong{font-size:15px!important;line-height:1!important;font-weight:800!important;color:#edf5ff!important;}
#dashboardPage #rankingList .rank-stat span{font-size:10px!important;line-height:1!important;font-weight:700!important;color:#6d7f96!important;}
#dashboardPage #rankingList .rank-rating span{font-size:10px!important;color:#f2c75c!important;max-width:43px!important;overflow:hidden!important;white-space:nowrap!important;}
#dashboardPage #rankingList .rank-rating b{font-size:11px!important;color:#d9c381!important;font-weight:800!important;}
#dashboardPage #rankingList .rank-rating em{display:none!important;}
#dashboardPage #rankingList .rank-performance{
  grid-area:status!important;
  justify-self:end!important;
  position:relative!important;
  z-index:1!important;
  min-height:30px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
#dashboardPage #rankingList .rank-progress{left:124px!important;right:16px!important;bottom:9px!important;height:2px!important;background:rgba(255,255,255,.045)!important;}
#dashboardPage #rankingList .rank-progress i{background:linear-gradient(90deg,#3b82f6,#8b5cf6)!important;box-shadow:0 0 12px rgba(139,92,246,.24)!important;}
@media (min-width:981px){
  #dashboardPage #rankingList .rank-item{grid-auto-flow:column!important;}
  #dashboardPage #rankingList .rank-stat:nth-of-type(2){transform:translateX(-62px)!important;}
  #dashboardPage #rankingList .rank-rating{transform:translateX(22px)!important;}
}
@media (max-width:1280px){
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first{grid-template-columns:40px 44px minmax(210px,1.25fr) 84px minmax(140px,.72fr) 92px!important;column-gap:11px!important;padding:13px 14px!important;}
  #dashboardPage #rankingList .rank-medal,#dashboardPage #rankingList .rank-badge{width:38px!important;height:38px!important;min-width:38px!important;}
  #dashboardPage #rankingList .rank-avatar{width:44px!important;height:44px!important;min-width:44px!important;}
  #dashboardPage #rankingList .rank-name-line strong{font-size:15px!important;}
  #dashboardPage #rankingList .rank-score span{font-size:27px!important;}
  #dashboardPage #rankingList .rank-performance{font-size:9px!important;padding:0 8px!important;}
}
@media (max-width:980px){
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first{grid-template-columns:38px 44px minmax(0,1fr) 78px!important;grid-template-areas:"badge avatar main score" "badge avatar main status"!important;min-height:76px!important;padding:13px!important;}
  #dashboardPage #rankingList .rank-stat,#dashboardPage #rankingList .rank-rating{display:none!important;}
  #dashboardPage #rankingList .rank-performance{justify-self:end!important;}
  #dashboardPage #rankingList .rank-progress{left:112px!important;}
}

/* Admin Ranking final component layout 20260720 */
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  grid-template-columns:minmax(104px,112px) minmax(260px,1fr) minmax(210px,.82fr) minmax(90px,.34fr) minmax(112px,.36fr)!important;
  grid-template-areas:"left main metrics score side"!important;
  gap:16px!important;
  padding:14px 18px!important;
  min-height:76px!important;
  background:linear-gradient(90deg,rgba(18,31,51,.98),rgba(15,23,41,.98) 48%,rgba(13,20,36,.98))!important;
}
#dashboardPage #rankingList .rank-left{
  grid-area:left!important;
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}
#dashboardPage #rankingList .rank-left .rank-medal,
#dashboardPage #rankingList .rank-left .rank-badge{grid-area:auto!important;flex:0 0 42px!important;}
#dashboardPage #rankingList .rank-left .rank-avatar{grid-area:auto!important;flex:0 0 48px!important;}
#dashboardPage #rankingList .rank-main{grid-area:main!important;}
#dashboardPage #rankingList .rank-metrics{
  grid-area:metrics!important;
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  min-width:0!important;
}
#dashboardPage #rankingList .rank-metrics .rank-stat,
#dashboardPage #rankingList .rank-metrics .rank-rating{
  display:grid!important;
  align-content:center!important;
  gap:4px!important;
  min-width:0!important;
  min-height:44px!important;
  padding:8px 10px!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.032)!important;
  border:1px solid rgba(255,255,255,.055)!important;
  justify-self:stretch!important;
  transform:none!important;
}
#dashboardPage #rankingList .rank-metrics .rank-stat strong{font-size:15px!important;color:#edf5ff!important;}
#dashboardPage #rankingList .rank-metrics .rank-stat span{font-size:10px!important;color:#7b8ba2!important;}
#dashboardPage #rankingList .rank-metrics .rank-rating span{font-size:10px!important;color:#f2c75c!important;line-height:1!important;max-width:100%!important;}
#dashboardPage #rankingList .rank-metrics .rank-rating b{font-size:11px!important;color:#ead08b!important;}
#dashboardPage #rankingList .rank-score{grid-area:score!important;justify-items:end!important;text-align:right!important;}
#dashboardPage #rankingList .rank-side{grid-area:side!important;position:relative!important;z-index:1!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;min-width:0!important;}
#dashboardPage #rankingList .rank-performance{grid-area:auto!important;max-width:100%!important;}
#dashboardPage #rankingList .rank-progress{left:132px!important;right:18px!important;bottom:8px!important;}
@media (max-width:1280px){
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{grid-template-columns:96px minmax(200px,1fr) minmax(174px,.7fr) 74px 86px!important;gap:12px!important;padding:13px 15px!important;}
  #dashboardPage #rankingList .rank-metrics{gap:6px!important;}
  #dashboardPage #rankingList .rank-metrics .rank-stat,
  #dashboardPage #rankingList .rank-metrics .rank-rating{padding:7px 8px!important;}
}
@media (max-width:980px){
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{grid-template-columns:94px minmax(0,1fr) 76px!important;grid-template-areas:"left main score" "left metrics side"!important;min-height:92px!important;}
  #dashboardPage #rankingList .rank-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #dashboardPage #rankingList .rank-metrics .rank-rating{display:none!important;}
  #dashboardPage #rankingList .rank-side{justify-content:flex-end!important;}
}

/* Admin Ranking compatibility polish for cached DOM 20260720 */
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  min-height:74px!important;
  grid-template-columns:46px 48px minmax(280px,1fr) minmax(96px,.24fr) minmax(112px,.28fr)!important;
  grid-template-areas:"badge avatar main score status"!important;
  align-items:center!important;
  gap:14px!important;
  padding:14px 18px!important;
  background:linear-gradient(90deg,rgba(17,31,51,.96),rgba(15,23,41,.98) 46%,rgba(14,21,37,.98))!important;
}
#dashboardPage #rankingList .rank-item::before{width:118px!important;background:linear-gradient(90deg,rgba(59,130,246,.11),rgba(59,130,246,0))!important;opacity:1!important;}
#dashboardPage #rankingList .rank-medal,
#dashboardPage #rankingList .rank-badge,
#dashboardPage #rankingList .rank-first .rank-badge{grid-area:badge!important;align-self:center!important;justify-self:center!important;width:42px!important;height:42px!important;min-width:42px!important;border-radius:50%!important;font-size:18px!important;transform:none!important;}
#dashboardPage #rankingList .rank-avatar{grid-area:avatar!important;align-self:center!important;justify-self:center!important;width:48px!important;height:48px!important;min-width:48px!important;max-width:48px!important;border-radius:50%!important;font-size:16px!important;transform:none!important;opacity:1!important;}
#dashboardPage #rankingList .rank-left{display:contents!important;}
#dashboardPage #rankingList .rank-left .rank-medal,
#dashboardPage #rankingList .rank-left .rank-badge{grid-area:badge!important;}
#dashboardPage #rankingList .rank-left .rank-avatar{grid-area:avatar!important;}
#dashboardPage #rankingList .rank-main{grid-area:main!important;display:grid!important;grid-template-columns:minmax(150px,.5fr) minmax(190px,.7fr) minmax(70px,.22fr)!important;grid-template-areas:"name subtitle rating"!important;align-items:center!important;gap:16px!important;min-width:0!important;}
#dashboardPage #rankingList .rank-name-line{grid-area:name!important;min-width:0!important;}
#dashboardPage #rankingList .rank-name-line strong,
#dashboardPage #rankingList .rank-first .rank-name-line strong{max-width:none!important;font-size:16px!important;color:#f8fbff!important;}
#dashboardPage #rankingList .rank-subtitle{grid-area:subtitle!important;display:grid!important;grid-template-columns:repeat(2,max-content)!important;gap:4px 12px!important;justify-content:start!important;color:#91a4bd!important;font-size:10px!important;}
#dashboardPage #rankingList .rank-subtitle span:last-child{display:none!important;}
#dashboardPage #rankingList .rank-subtitle span:not(:last-child)::after{display:none!important;}
#dashboardPage #rankingList .rank-rating{grid-area:rating!important;justify-self:start!important;display:grid!important;min-width:64px!important;min-height:0!important;padding:0!important;background:transparent!important;border:0!important;transform:none!important;}
#dashboardPage #rankingList .rank-score,
#dashboardPage #rankingList .rank-first .rank-score{grid-area:score!important;justify-self:end!important;justify-items:end!important;text-align:right!important;min-width:82px!important;}
#dashboardPage #rankingList .rank-score span,
#dashboardPage #rankingList .rank-first .rank-score span{font-size:30px!important;}
#dashboardPage #rankingList .rank-stat,
#dashboardPage #rankingList .rank-metrics{display:none!important;}
#dashboardPage #rankingList .rank-side{grid-area:status!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;}
#dashboardPage #rankingList > .rank-item > .rank-performance{grid-area:status!important;justify-self:end!important;}
#dashboardPage #rankingList .rank-performance{min-height:28px!important;padding:0 10px!important;font-size:10px!important;}
#dashboardPage #rankingList .rank-progress{left:126px!important;right:18px!important;bottom:8px!important;height:2px!important;}
@media (max-width:1280px){
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{grid-template-columns:40px 44px minmax(220px,1fr) 82px 88px!important;gap:11px!important;padding:13px 14px!important;}
  #dashboardPage #rankingList .rank-main{grid-template-columns:minmax(120px,.55fr) minmax(150px,.7fr) minmax(54px,.2fr)!important;gap:10px!important;}
  #dashboardPage #rankingList .rank-name-line strong{font-size:15px!important;}
  #dashboardPage #rankingList .rank-score span{font-size:27px!important;}
}
@media (max-width:980px){
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{grid-template-columns:38px 44px minmax(0,1fr) 76px!important;grid-template-areas:"badge avatar main score" "badge avatar main status"!important;min-height:82px!important;}
  #dashboardPage #rankingList .rank-main{grid-template-columns:1fr!important;grid-template-areas:"name" "subtitle"!important;gap:6px!important;}
  #dashboardPage #rankingList .rank-rating{display:none!important;}
}

/* Admin Ranking reference table redesign 20260720 */
#dashboardPage .admin-ranking-panel,
#dashboardPage .panel:has(#rankingList){
  --rank-bg:#06111f;
  --rank-row:#0c1728;
  --rank-row-hot:#161f31;
  --rank-border:rgba(255,255,255,.065);
  --rank-text:#f6f8fb;
  --rank-muted:#7d90aa;
  --rank-gold:#f6c75f;
  --rank-blue:#3785ff;
  --rank-purple:#7c3cff;
  padding:18px 18px 20px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012)),#06111f!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
#dashboardPage .admin-ranking-head{margin:0 0 12px!important;padding:0!important;align-items:flex-start!important;}
#dashboardPage .admin-ranking-kicker{display:none!important;}
#dashboardPage .admin-ranking-title h3{font-size:20px!important;line-height:1.1!important;font-weight:800!important;color:#f8fbff!important;}
#dashboardPage .admin-ranking-title p{margin:6px 0 0!important;color:#8ca0ba!important;font-size:12px!important;}
#dashboardPage .ranking-refresh-btn{height:36px!important;border-radius:12px!important;padding:0 14px!important;background:rgba(255,255,255,.045)!important;color:#dce6f5!important;}
#dashboardPage #rankingLastUpdated{display:none!important;}
#dashboardPage .ranking-table-head{
  display:grid!important;
  grid-template-columns:54px minmax(230px,1.2fr) 112px 76px 76px 106px 118px 112px!important;
  align-items:center!important;
  gap:14px!important;
  padding:0 14px 9px!important;
  color:#7f91ab!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:700!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
#dashboardPage #rankingList,
#dashboardPage #rankingList.premium-leaderboard{
  display:grid!important;
  gap:0!important;
  max-height:540px!important;
  overflow:auto!important;
  padding:0!important;
  border-radius:14px!important;
  background:rgba(3,10,20,.18)!important;
  border:1px solid rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  position:relative!important;
  min-height:62px!important;
  display:grid!important;
  grid-template-columns:54px minmax(230px,1.2fr) 112px 76px 76px 106px 118px 112px!important;
  grid-template-areas:"position admin score closed customers rating speed result"!important;
  align-items:center!important;
  gap:14px!important;
  padding:10px 14px!important;
  border-radius:0!important;
  background:rgba(12,23,40,.72)!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.045)!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
}
#dashboardPage #rankingList .rank-item:hover{background:rgba(22,34,53,.94)!important;transform:none!important;box-shadow:none!important;border-color:transparent!important;}
#dashboardPage #rankingList .rank-first{background:linear-gradient(90deg,rgba(246,199,95,.10),rgba(12,23,40,.86) 42%,rgba(12,23,40,.72))!important;}
#dashboardPage #rankingList .rank-item::before,
#dashboardPage #rankingList .rank-item::after,
#dashboardPage #rankingList .rank-glow{display:none!important;}
#dashboardPage #rankingList .rank-position{grid-area:position!important;display:flex!important;align-items:center!important;justify-content:center!important;}
#dashboardPage #rankingList .rank-medal,
#dashboardPage #rankingList .rank-badge,
#dashboardPage #rankingList .rank-first .rank-badge{
  width:38px!important;height:38px!important;min-width:38px!important;display:grid!important;place-items:center!important;border-radius:13px!important;
  color:#fff!important;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.10)!important;
  font-size:18px!important;font-weight:800!important;box-shadow:0 8px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
#dashboardPage #rankingList .rank-badge{border-radius:50%!important;color:#dbe6f7!important;background:rgba(20,34,55,.9)!important;}
#dashboardPage #rankingList .rank-badge span{font-size:14px!important;color:inherit!important;font-weight:800!important;}
#dashboardPage #rankingList .rank-first .rank-medal{background:linear-gradient(145deg,#f6c75f,#8b5a12)!important;border-color:rgba(255,218,119,.45)!important;box-shadow:0 0 18px rgba(246,199,95,.25),inset 0 1px 0 rgba(255,255,255,.22)!important;}
#dashboardPage #rankingList .rank-second .rank-medal{background:linear-gradient(145deg,#d8e2f2,#6d7b8f)!important;border-color:rgba(222,232,246,.35)!important;}
#dashboardPage #rankingList .rank-third .rank-medal{background:linear-gradient(145deg,#d89456,#7d411d)!important;border-color:rgba(238,164,98,.35)!important;}
#dashboardPage #rankingList .rank-admin{grid-area:admin!important;display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;}
#dashboardPage #rankingList .rank-avatar{width:42px!important;height:42px!important;min-width:42px!important;border-radius:50%!important;display:grid!important;place-items:center!important;color:#08111f!important;background:linear-gradient(135deg,#f3f7ff,#7eb1ff 62%,#8d6cff)!important;border:2px solid rgba(246,199,95,.32)!important;font-size:15px!important;font-weight:800!important;box-shadow:0 8px 20px rgba(0,0,0,.22)!important;}
#dashboardPage #rankingList .rank-main{display:grid!important;gap:4px!important;min-width:0!important;}
#dashboardPage #rankingList .rank-name-line{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;}
#dashboardPage #rankingList .rank-name-line strong{font-size:15px!important;line-height:1.12!important;font-weight:800!important;color:#f8fbff!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#dashboardPage #rankingList .rank-crown{padding:3px 7px!important;border-radius:999px!important;background:#f6c75f!important;color:#261902!important;font-size:9px!important;font-weight:900!important;box-shadow:none!important;}
#dashboardPage #rankingList .rank-subtitle{display:flex!important;gap:5px!important;flex-wrap:wrap!important;color:#8ca0b8!important;font-size:10px!important;line-height:1.2!important;font-weight:650!important;}
#dashboardPage #rankingList .rank-subtitle span:first-child::after{content:"|";margin-left:5px;color:#52647a!important;}
#dashboardPage #rankingList .rank-score{grid-area:score!important;justify-self:start!important;text-align:left!important;display:block!important;min-width:0!important;}
#dashboardPage #rankingList .rank-score span{font-size:22px!important;line-height:1!important;font-weight:800!important;color:#f2c75c!important;text-shadow:none!important;}
#dashboardPage #rankingList .rank-score small{display:none!important;}
#dashboardPage #rankingList .rank-closed{grid-area:closed!important;}
#dashboardPage #rankingList .rank-customers{grid-area:customers!important;}
#dashboardPage #rankingList .rank-stat{display:block!important;min-width:0!important;padding:0!important;background:transparent!important;border:0!important;}
#dashboardPage #rankingList .rank-stat strong{font-size:17px!important;line-height:1!important;font-weight:700!important;color:#d9e2ef!important;}
#dashboardPage #rankingList .rank-stat span{display:none!important;}
#dashboardPage #rankingList .rank-rating{grid-area:rating!important;display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;padding:0!important;background:transparent!important;border:0!important;transform:none!important;}
#dashboardPage #rankingList .rank-rating span{width:16px!important;max-width:16px!important;overflow:hidden!important;color:#ffb21f!important;font-size:16px!important;line-height:1!important;text-shadow:none!important;}
#dashboardPage #rankingList .rank-rating b{font-size:14px!important;font-weight:800!important;color:#f0f4fb!important;}
#dashboardPage #rankingList .rank-rating em{display:none!important;}
#dashboardPage #rankingList .rank-speed{grid-area:speed!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;}
#dashboardPage #rankingList .rank-performance{min-height:28px!important;padding:0 11px!important;border-radius:8px!important;font-size:10px!important;font-weight:800!important;}
#dashboardPage #rankingList .rank-performance--fast{color:#65e79a!important;background:rgba(40,201,108,.12)!important;border-color:rgba(40,201,108,.22)!important;}
#dashboardPage #rankingList .rank-performance--normal{color:#dbe5f4!important;background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.08)!important;}
#dashboardPage #rankingList .rank-performance--slow{color:#ff9bab!important;background:rgba(251,113,133,.10)!important;border-color:rgba(251,113,133,.22)!important;}
#dashboardPage #rankingList .rank-result{grid-area:result!important;display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;}
#dashboardPage #rankingList .rank-progress{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;display:block!important;flex:1 1 auto!important;min-width:54px!important;height:8px!important;border-radius:999px!important;background:rgba(255,255,255,.07)!important;overflow:hidden!important;}
#dashboardPage #rankingList .rank-progress i{height:100%!important;border-radius:inherit!important;background:linear-gradient(90deg,#493cff,#31a2ff)!important;box-shadow:0 0 12px rgba(49,162,255,.25)!important;}
#dashboardPage #rankingList .rank-result b{min-width:30px!important;color:#8fa0b6!important;font-size:11px!important;font-weight:800!important;text-align:right!important;}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head,
  #dashboardPage #rankingList .rank-item{grid-template-columns:48px minmax(190px,1fr) 92px 62px 62px 84px 92px 92px!important;gap:10px!important;}
  #dashboardPage #rankingList .rank-score span{font-size:20px!important;}
  #dashboardPage #rankingList .rank-stat strong{font-size:15px!important;}
}
@media (max-width:980px){
  #dashboardPage .ranking-table-head{display:none!important;}
  #dashboardPage #rankingList .rank-item{grid-template-columns:42px minmax(0,1fr) 82px!important;grid-template-areas:"position admin score" "position admin result"!important;min-height:72px!important;}
  #dashboardPage #rankingList .rank-closed,#dashboardPage #rankingList .rank-customers,#dashboardPage #rankingList .rank-rating,#dashboardPage #rankingList .rank-speed{display:none!important;}
}

/* Admin Ranking old-DOM fallback after table redesign 20260720 */
@supports selector(.rank-item:has(.rank-position)){
  #dashboardPage #rankingList .rank-item:not(:has(.rank-position)){
    grid-template-columns:54px 48px minmax(230px,1.2fr) 112px 106px 118px 112px!important;
    grid-template-areas:"badge avatar main score rating speed result"!important;
  }
  #dashboardPage #rankingList .rank-item:not(:has(.rank-position)) .rank-medal,
  #dashboardPage #rankingList .rank-item:not(:has(.rank-position)) .rank-badge{grid-area:badge!important;justify-self:center!important;}
  #dashboardPage #rankingList .rank-item:not(:has(.rank-position)) .rank-avatar{grid-area:avatar!important;}
  #dashboardPage #rankingList .rank-item:not(:has(.rank-position)) .rank-main{grid-area:main!important;display:grid!important;grid-template-columns:1fr!important;gap:4px!important;}
  #dashboardPage #rankingList .rank-item:not(:has(.rank-position)) .rank-stat{display:none!important;}
  #dashboardPage #rankingList .rank-item:not(:has(.rank-position)) .rank-rating{grid-area:rating!important;display:flex!important;}
  #dashboardPage #rankingList .rank-item:not(:has(.rank-position)) > .rank-performance{grid-area:speed!important;justify-self:start!important;}
  #dashboardPage #rankingList .rank-item:not(:has(.rank-position)) .rank-progress{grid-area:result!important;position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:8px!important;}
}

/* Admin Ranking column fit and subtitle fix 20260720 */
#dashboardPage .ranking-table-head,
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  grid-template-columns:56px minmax(270px,1.05fr) 100px 68px 68px 86px 96px minmax(96px,.45fr)!important;
  gap:12px!important;
}
#dashboardPage #rankingList,
#dashboardPage #rankingList.premium-leaderboard{overflow-y:auto!important;overflow-x:hidden!important;}
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{min-width:0!important;padding:10px 12px!important;}
#dashboardPage #rankingList .rank-admin{min-width:0!important;gap:12px!important;}
#dashboardPage #rankingList .rank-main{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:none!important;align-items:center!important;gap:4px!important;min-width:0!important;}
#dashboardPage #rankingList .rank-name-line{grid-area:auto!important;min-width:0!important;max-width:100%!important;}
#dashboardPage #rankingList .rank-name-line strong{max-width:170px!important;}
#dashboardPage #rankingList .rank-subtitle{grid-area:auto!important;display:flex!important;width:100%!important;min-width:0!important;gap:5px!important;flex-wrap:nowrap!important;overflow:hidden!important;white-space:nowrap!important;font-size:10px!important;}
#dashboardPage #rankingList .rank-subtitle span{min-width:0!important;white-space:nowrap!important;}
#dashboardPage #rankingList .rank-subtitle span:first-child::after{content:"|"!important;margin-left:5px!important;color:#52647a!important;}
#dashboardPage #rankingList .rank-score{justify-self:start!important;min-width:0!important;}
#dashboardPage #rankingList .rank-score span{font-size:28px!important;}
#dashboardPage #rankingList .rank-stat strong{font-size:17px!important;}
#dashboardPage #rankingList .rank-result{justify-self:stretch!important;width:100%!important;min-width:0!important;gap:7px!important;}
#dashboardPage #rankingList .rank-progress{min-width:0!important;width:auto!important;}
#dashboardPage #rankingList .rank-result b{min-width:28px!important;font-size:10px!important;}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head,
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{grid-template-columns:50px minmax(230px,1fr) 88px 58px 58px 74px 82px minmax(74px,.42fr)!important;gap:9px!important;}
  #dashboardPage #rankingList .rank-name-line strong{max-width:142px!important;font-size:14px!important;}
  #dashboardPage #rankingList .rank-score span{font-size:23px!important;}
  #dashboardPage #rankingList .rank-stat strong{font-size:15px!important;}
  #dashboardPage #rankingList .rank-performance{padding:0 8px!important;font-size:9px!important;}
}

/* Admin Ranking score column balance 20260720 */
#dashboardPage .ranking-table-head,
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  grid-template-columns:56px minmax(310px,1.18fr) 78px 62px 62px 82px 92px minmax(104px,.46fr)!important;
  gap:11px!important;
}
#dashboardPage .ranking-table-head span:nth-child(3),
#dashboardPage #rankingList .rank-score{
  justify-self:start!important;
  text-align:left!important;
}
#dashboardPage #rankingList .rank-score,
#dashboardPage #rankingList .rank-first .rank-score{
  min-width:0!important;
  width:auto!important;
  display:flex!important;
  align-items:center!important;
}
#dashboardPage #rankingList .rank-score span,
#dashboardPage #rankingList .rank-first .rank-score span{
  font-size:22px!important;
  line-height:1!important;
  font-weight:800!important;
  color:#f4f7fb!important;
  text-shadow:none!important;
  letter-spacing:0!important;
}
#dashboardPage #rankingList .rank-first .rank-score span{
  font-size:24px!important;
  color:#f6c75f!important;
}
#dashboardPage #rankingList .rank-item:nth-child(n+6) .rank-score span{
  font-size:18px!important;
  color:#e4ebf6!important;
}
#dashboardPage #rankingList .rank-admin{gap:11px!important;}
#dashboardPage #rankingList .rank-name-line strong{max-width:190px!important;}
#dashboardPage #rankingList .rank-subtitle{max-width:210px!important;}
#dashboardPage #rankingList .rank-stat strong{font-size:16px!important;color:#dfe7f2!important;}
#dashboardPage #rankingList .rank-rating b{font-size:13px!important;}
#dashboardPage #rankingList .rank-result{gap:7px!important;}
#dashboardPage #rankingList .rank-progress{height:7px!important;}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head,
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{grid-template-columns:50px minmax(260px,1fr) 72px 56px 56px 72px 78px minmax(82px,.42fr)!important;gap:8px!important;}
  #dashboardPage #rankingList .rank-score span{font-size:19px!important;}
  #dashboardPage #rankingList .rank-first .rank-score span{font-size:21px!important;}
  #dashboardPage #rankingList .rank-name-line strong{max-width:158px!important;}
  #dashboardPage #rankingList .rank-subtitle{max-width:174px!important;}
}

/* Admin Ranking tighten score column 20260720 */
#dashboardPage .ranking-table-head,
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  grid-template-columns:54px minmax(255px,1.04fr) 72px 58px 58px 76px 84px minmax(88px,.40fr)!important;
  gap:8px!important;
}
#dashboardPage .ranking-table-head span:nth-child(3){
  justify-self:start!important;
  text-align:left!important;
  padding-left:0!important;
}
#dashboardPage #rankingList .rank-item > .rank-score,
#dashboardPage #rankingList .rank-first > .rank-score,
#dashboardPage #rankingList .rank-second > .rank-score,
#dashboardPage #rankingList .rank-third > .rank-score{
  grid-area:score!important;
  justify-self:stretch!important;
  align-self:center!important;
  width:72px!important;
  min-width:0!important;
  max-width:72px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:left!important;
  padding:0!important;
  margin:0!important;
}
#dashboardPage #rankingList .rank-item > .rank-score span,
#dashboardPage #rankingList .rank-first > .rank-score span,
#dashboardPage #rankingList .rank-second > .rank-score span,
#dashboardPage #rankingList .rank-third > .rank-score span{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:72px!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:800!important;
  text-align:left!important;
  color:#f3f6fb!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}
#dashboardPage #rankingList .rank-first > .rank-score span{
  font-size:22px!important;
  color:#f6c75f!important;
}
#dashboardPage #rankingList .rank-item:nth-child(n+6) > .rank-score span{font-size:17px!important;}
#dashboardPage #rankingList .rank-admin{gap:10px!important;}
#dashboardPage #rankingList .rank-name-line strong{max-width:176px!important;}
#dashboardPage #rankingList .rank-subtitle{max-width:190px!important;}
#dashboardPage #rankingList .rank-stat strong{font-size:15px!important;}
#dashboardPage #rankingList .rank-rating span{font-size:14px!important;width:14px!important;max-width:14px!important;}
#dashboardPage #rankingList .rank-rating b{font-size:12px!important;}
#dashboardPage #rankingList .rank-performance{min-height:26px!important;padding:0 9px!important;}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head,
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{grid-template-columns:48px minmax(230px,1fr) 66px 52px 52px 68px 76px minmax(76px,.38fr)!important;gap:7px!important;}
  #dashboardPage #rankingList .rank-item > .rank-score{width:66px!important;max-width:66px!important;}
  #dashboardPage #rankingList .rank-item > .rank-score span{font-size:18px!important;max-width:66px!important;}
  #dashboardPage #rankingList .rank-first > .rank-score span{font-size:20px!important;}
}


/* Settings Premium Luxury - 20260721 */
#settingsPage{
  padding:0 !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(88, 126, 255, .11), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(245, 200, 91, .07), transparent 26%),
    #071321;
  color:rgba(248,250,252,.96);
  overflow:hidden;
}
#settingsPage .settings-premium-shell{
  height:100%;
  min-height:calc(100vh - 86px);
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#settingsPage .settings-premium-nav{
  padding:22px 16px;
  border-right:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow:inset -1px 0 0 rgba(255,255,255,.025);
}
#settingsPage .settings-brand-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  margin-bottom:20px;
  border-radius:22px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055);
}
#settingsPage .settings-brand-orb{
  width:42px;height:42px;display:grid;place-items:center;border-radius:16px;
  color:#dbeafe;
  background:linear-gradient(135deg, rgba(91,141,255,.34), rgba(124,92,255,.22));
  border:1px solid rgba(142,170,255,.22);
  box-shadow:0 0 24px rgba(91,141,255,.20), inset 0 1px 0 rgba(255,255,255,.16);
  font-size:18px;
}
#settingsPage .settings-brand-title{font-size:15px;font-weight:800;line-height:1;color:#f8fafc;letter-spacing:0}
#settingsPage .settings-brand-subtitle{margin-top:5px;font-size:11px;font-weight:600;color:rgba(203,213,225,.56);letter-spacing:0}
#settingsPage .settings-nav-title{
  padding:14px 8px 8px;
  color:rgba(148,163,184,.70);
  font-size:10px;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
}
#settingsPage .settings-nav-item{
  position:relative;
  min-height:44px;
  padding:0 12px;
  margin:4px 0;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:15px;
  color:rgba(226,232,240,.74);
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  border:1px solid transparent;
  background:transparent;
  transition:transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
#settingsPage .settings-nav-item:hover{
  transform:translateY(-1px);
  color:#fff;
  background:rgba(255,255,255,.052);
  border-color:rgba(255,255,255,.08);
}
#settingsPage .settings-nav-item.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(91,141,255,.19), rgba(255,255,255,.055));
  border-color:rgba(124,156,255,.24);
  box-shadow:0 10px 30px rgba(42,74,180,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
#settingsPage .settings-nav-ico{
  width:24px;height:24px;display:grid;place-items:center;border-radius:9px;
  color:#c7d2fe;background:rgba(124,156,255,.10);border:1px solid rgba(124,156,255,.12);
  font-size:13px;flex:0 0 24px;
}
#settingsPage .settings-premium-content{
  overflow:auto;
  padding:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.018), transparent 24%);
}
#settingsPage .settings-tab{display:none;max-width:1240px;margin:0 auto;animation:settingsFadeIn 180ms ease both}
#settingsPage .settings-tab.active{display:block}
@keyframes settingsFadeIn{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}}
#settingsPage .settings-page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px;
}
#settingsPage .settings-page-head h2{
  margin:4px 0 0;
  color:#f8fafc;
  font-size:28px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:0;
}
#settingsPage .settings-page-head p{
  margin:9px 0 0;
  color:rgba(203,213,225,.62);
  font-size:13px;
  line-height:1.45;
  font-weight:500;
  letter-spacing:0;
}
#settingsPage .settings-eyebrow,
#settingsPage .eyebrow{
  color:rgba(125,178,255,.82);
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
#settingsPage .settings-head-status{
  min-height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 13px;border-radius:999px;
  color:rgba(209,250,229,.90);background:rgba(34,197,94,.075);border:1px solid rgba(34,197,94,.16);
  font-size:12px;font-weight:800;white-space:nowrap;
}
#settingsPage .settings-head-status span{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 14px rgba(52,211,153,.7)}
#settingsPage .settings-profile-grid{display:grid;grid-template-columns:minmax(280px,390px) minmax(0,1fr);gap:20px;margin-bottom:20px}
#settingsPage .settings-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(124,156,255,.08), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.018)),
    #101c2e;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
#settingsPage .settings-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,.075), transparent 34%, transparent 78%, rgba(255,255,255,.035));opacity:.55;
}
#settingsPage .settings-card > *{position:relative;z-index:1}
#settingsPage .settings-card-topline{position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,156,255,.65),transparent)}
#settingsPage .settings-profile-card{min-height:274px;display:flex;flex-direction:column;justify-content:space-between}
#settingsPage .settings-profile-row{display:flex;align-items:center;gap:16px}
#settingsPage .settings-profile-avatar,
#settingsPage .user-avatar.settings-profile-avatar{
  width:76px;height:76px;border-radius:24px;
  background:radial-gradient(circle at 32% 22%, rgba(255,255,255,.60), transparent 32%),linear-gradient(135deg,#dbeafe,#60a5fa 55%,#8b5cf6);
  color:#071321;
  font-size:30px;font-weight:900;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 22px 42px rgba(76,111,255,.25), inset 0 1px 0 rgba(255,255,255,.60);
}
#settingsPage .settings-profile-label{font-size:11px;color:rgba(148,163,184,.70);font-weight:800;text-transform:uppercase;letter-spacing:.12em}
#settingsPage .settings-profile-name{margin-top:6px;color:#f8fafc;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:0}
#settingsPage .settings-profile-role{margin-top:6px;color:rgba(203,213,225,.66);font-size:13px;font-weight:700}
#settingsPage .settings-action-stack{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
#settingsPage .settings-action-btn,
#settingsPage .settings-top-action,
#settingsPage .settings-generate-btn,
#settingsPage .settings-unlink-btn{
  min-height:44px;border-radius:15px!important;font:inherit;font-size:13px!important;font-weight:800!important;letter-spacing:0;
  transition:transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
#settingsPage .settings-action-btn:hover,
#settingsPage .settings-top-action:hover,
#settingsPage .settings-generate-btn:hover,
#settingsPage .settings-unlink-btn:hover{transform:translateY(-2px)}
#settingsPage .settings-action-btn--primary{background:rgba(124,156,255,.12)!important;border:1px solid rgba(124,156,255,.22)!important;color:#dbeafe!important}
#settingsPage .settings-action-btn--danger{background:rgba(251,113,133,.10)!important;border:1px solid rgba(251,113,133,.20)!important;color:#fecdd3!important}
#settingsPage .settings-theme-card{min-height:274px}
#settingsPage .theme-panel::before{display:none}
#settingsPage .theme-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
#settingsPage .theme-panel-head h3,
#settingsPage .settings-card-header h3{margin:5px 0 0;color:#f8fafc;font-size:18px;font-weight:800;line-height:1.15;letter-spacing:0}
#settingsPage .theme-panel-head p,
#settingsPage .settings-card-header p{margin:7px 0 0;color:rgba(203,213,225,.60);font-size:12px;font-weight:500;line-height:1.45}
#settingsPage #themeActiveLabel,
#settingsPage .settings-status-badge{
  padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
  color:rgba(226,232,240,.82);font-size:11px;font-weight:800;white-space:nowrap;
}
#settingsPage .theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#settingsPage .theme-choice{
  min-height:72px;padding:12px;border-radius:18px;background:rgba(255,255,255,.042);border:1px solid rgba(255,255,255,.075);
  color:rgba(226,232,240,.84);font-size:12px;font-weight:800;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
#settingsPage .theme-choice:hover{background:rgba(255,255,255,.06);border-color:rgba(124,156,255,.18);transform:translateY(-2px)}
#settingsPage .theme-choice.active{background:rgba(124,156,255,.13);border-color:rgba(124,156,255,.34);box-shadow:0 16px 30px rgba(42,74,180,.18)}
#settingsPage .theme-swatch{width:44px;height:20px;border-radius:999px;background:linear-gradient(135deg,var(--sw1),var(--sw2) 55%,var(--sw3));border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 20px rgba(0,0,0,.20)}
#settingsPage .theme-note{margin-top:14px;color:rgba(148,163,184,.66);font-size:11px;font-weight:600;line-height:1.45}
#settingsPage .settings-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
#settingsPage .settings-telegram-card{margin-bottom:20px}
#settingsPage .settings-guide-box,
#settingsPage .settings-linked-card,
#settingsPage .settings-code-box{
  padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.075);
}
#settingsPage .settings-guide-box strong{display:block;color:#e2e8f0;font-size:13px;font-weight:800;margin-bottom:10px}
#settingsPage .settings-guide-box ol{margin:0 0 8px 18px;padding:0;color:rgba(203,213,225,.72);font-size:12px;line-height:1.8;font-weight:600}
#settingsPage .settings-guide-box span{color:rgba(148,163,184,.62);font-size:11px;font-weight:600}
#settingsPage .settings-guide-box code,
#settingsPage .settings-code-command code{background:rgba(124,156,255,.13);color:#c7d2fe;padding:2px 7px;border-radius:8px;border:1px solid rgba(124,156,255,.14)}
#settingsPage .settings-generate-btn{width:100%;margin-top:14px;border:0!important;color:#fff!important;background:linear-gradient(135deg,#7c9cff,#6d5dfc)!important;box-shadow:0 14px 30px rgba(93,124,255,.25)!important}
#settingsPage .settings-linked-row{display:flex;align-items:center;gap:12px}
#settingsPage .settings-linked-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;background:rgba(34,197,94,.14);color:#86efac;border:1px solid rgba(34,197,94,.22);font-size:18px;font-weight:900}
#settingsPage .settings-linked-title{font-size:14px;font-weight:800;color:#86efac}
#settingsPage .settings-linked-meta,#settingsPage .settings-linked-date{font-size:12px;color:rgba(203,213,225,.66);font-weight:600;margin-top:2px}
#settingsPage .settings-duty-badge{margin-left:auto;padding:7px 10px;border-radius:999px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.20);color:#86efac;font-size:11px;font-weight:800}
#settingsPage .settings-unlink-btn{width:100%;margin-top:14px;background:rgba(251,113,133,.09)!important;border:1px solid rgba(251,113,133,.20)!important;color:#fecdd3!important}
#settingsPage .settings-code-box{margin:14px 0 0;text-align:center;background:rgba(124,156,255,.075);border-color:rgba(124,156,255,.16)}
#settingsPage .settings-code-label{font-size:11px;color:rgba(203,213,225,.62);font-weight:800;text-transform:uppercase;letter-spacing:.12em}
#settingsPage .settings-code-row{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px}
#settingsPage #tgCodeDisplay{font-size:28px;font-weight:900;letter-spacing:5px;color:#dbeafe;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
#settingsPage .settings-code-row button{padding:8px 12px;border-radius:12px;border:1px solid rgba(124,156,255,.24);background:rgba(124,156,255,.12);color:#c7d2fe;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
#settingsPage .settings-code-command,#settingsPage .settings-code-expiry{margin-top:9px;color:rgba(203,213,225,.62);font-size:12px;font-weight:600}
#settingsPage .settings-page-head--inline{align-items:center;margin-bottom:18px}
#settingsPage .settings-top-action{padding:0 16px!important;border:0!important;color:#fff!important;background:linear-gradient(135deg,#7c9cff,#6d5dfc)!important;box-shadow:0 14px 30px rgba(93,124,255,.22)!important;white-space:nowrap}
#settingsPage .settings-list-card,
#settingsPage .settings-table-card{padding:18px}
#settingsPage #settingsStoreList{display:grid;gap:12px}
#settingsPage #settingsStoreList > div{
  background:rgba(255,255,255,.042)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:18px!important;
  padding:16px!important;
  color:#f8fafc!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#settingsPage #settingsStoreList > div > div:first-child{border-radius:14px!important;box-shadow:0 10px 24px rgba(0,0,0,.20)!important}
#settingsPage #settingsStoreList strong,
#settingsPage #settingsStoreList div{letter-spacing:0}
#settingsPage #settingsStoreList button,
#settingsPage .settings-data-table button,
#settingsPage .copy-btn,
#settingsPage .danger-btn{
  border-radius:12px!important;font-weight:800!important;font-size:12px!important;
}
#settingsPage .settings-data-table{width:100%;border-collapse:separate;border-spacing:0 10px}
#settingsPage .settings-data-table thead th{
  padding:0 14px 6px!important;color:rgba(148,163,184,.74)!important;font-size:10px!important;font-weight:900!important;letter-spacing:.12em;text-transform:uppercase;border:0!important;background:transparent!important;
}
#settingsPage .settings-data-table tbody tr{background:rgba(255,255,255,.04)!important;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
#settingsPage .settings-data-table tbody td{padding:14px!important;border:0!important;color:rgba(226,232,240,.86)!important;background:transparent!important;font-size:13px!important;font-weight:650;vertical-align:middle}
#settingsPage .settings-data-table tbody td:first-child{border-radius:16px 0 0 16px;color:#f8fafc!important}
#settingsPage .settings-data-table tbody td:last-child{border-radius:0 16px 16px 0}
#settingsPage .settings-data-table code{color:#c7d2fe!important;background:rgba(124,156,255,.10)!important;border:1px solid rgba(124,156,255,.12);padding:4px 7px;border-radius:9px}
#settingsPage .settings-oa-note{margin-bottom:14px;border-radius:18px!important;padding:14px 16px!important;background:rgba(124,156,255,.075)!important;border:1px solid rgba(124,156,255,.14)!important;color:rgba(219,234,254,.90)!important;font-size:12px!important;font-weight:800!important}
#settingsPage .settings-data-table tbody tr.oa-groups-row,
.data-table tbody tr.oa-groups-row{
  background:transparent!important;box-shadow:none!important;border-radius:0!important;
}
#settingsPage .settings-data-table tbody tr.oa-groups-row > td,
.data-table tbody tr.oa-groups-row > td{
  padding:0!important;border:0!important;background:transparent!important;
}
.oa-store-groups{display:grid;gap:12px}
.oa-store-group{
  border:1px solid rgba(148,163,184,.13);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.oa-store-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(148,163,184,.10);
  background:rgba(6,12,28,.28);
}
.oa-store-head strong{display:block;color:#f8fafc;font-size:14px;font-weight:900}
.oa-store-kicker{display:block;margin-bottom:2px;color:rgba(148,163,184,.78);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.oa-store-count{
  flex:0 0 auto;padding:5px 9px;border-radius:999px;
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.18);
  color:#86efac;font-size:11px;font-weight:900;
}
.oa-mini-list{display:grid;gap:8px;padding:10px}
.oa-mini-card{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:9px 10px;border-radius:12px;
  background:rgba(15,23,42,.44);border:1px solid rgba(148,163,184,.10);
}
.oa-mini-card.line{border-left:3px solid #22c55e}
.oa-mini-card.facebook{border-left:3px solid #38bdf8}
.oa-mini-avatar{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;overflow:hidden;
  background:rgba(124,156,255,.13);color:#c7d2fe;font-size:13px;font-weight:900;
}
.oa-mini-avatar img{width:100%;height:100%;object-fit:cover}
.oa-mini-main{min-width:0}
.oa-mini-title{display:flex;align-items:center;gap:7px;min-width:0}
.oa-mini-title strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f8fafc;font-size:13px;font-weight:900}
.oa-mini-title span{
  flex:0 0 auto;padding:2px 6px;border-radius:999px;
  background:rgba(124,156,255,.13);color:#c7d2fe;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;
}
.oa-mini-card code{
  display:block;width:100%;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#c7d2fe!important;background:rgba(124,156,255,.08)!important;border-color:rgba(124,156,255,.10)!important;
}
.oa-mini-actions{display:flex;gap:6px;align-items:center}
.oa-mini-actions .copy-btn,.oa-mini-actions .danger-btn{padding:7px 10px!important;white-space:nowrap}
.oa-empty-state{
  padding:18px;text-align:center;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px dashed rgba(148,163,184,.20);
  color:rgba(203,213,225,.70);font-size:13px;font-weight:700;
}
html[data-ui-theme="white"] #settingsPage{
  background:linear-gradient(180deg,#f8fafc,#eef3fb)!important;color:#111827!important;
}
html[data-ui-theme="white"] #settingsPage .settings-card,
html[data-ui-theme="white"] #settingsPage .settings-brand-card,
html[data-ui-theme="white"] #settingsPage .settings-guide-box,
html[data-ui-theme="white"] #settingsPage .settings-linked-card,
html[data-ui-theme="white"] #settingsPage .settings-code-box,
html[data-ui-theme="white"] #settingsPage #settingsStoreList > div,
html[data-ui-theme="white"] #settingsPage .settings-data-table tbody tr{
  background:rgba(255,255,255,.82)!important;border-color:rgba(15,23,42,.08)!important;color:#0f172a!important;box-shadow:0 10px 34px rgba(15,23,42,.08)!important;
}
html[data-ui-theme="white"] #settingsPage .settings-page-head h2,
html[data-ui-theme="white"] #settingsPage .settings-brand-title,
html[data-ui-theme="white"] #settingsPage .settings-profile-name,
html[data-ui-theme="white"] #settingsPage .theme-panel-head h3,
html[data-ui-theme="white"] #settingsPage .settings-card-header h3{color:#0f172a!important}
html[data-ui-theme="white"] #settingsPage .settings-page-head p,
html[data-ui-theme="white"] #settingsPage .settings-brand-subtitle,
html[data-ui-theme="white"] #settingsPage .settings-profile-role,
html[data-ui-theme="white"] #settingsPage .theme-panel-head p,
html[data-ui-theme="white"] #settingsPage .settings-card-header p{color:#64748b!important}
html[data-ui-theme="white"] .oa-store-group,
html[data-ui-theme="white"] .oa-mini-card{
  background:rgba(255,255,255,.76)!important;border-color:rgba(15,23,42,.08)!important;
}
html[data-ui-theme="white"] .oa-store-head{background:rgba(241,245,249,.72)!important;border-color:rgba(15,23,42,.07)!important}
html[data-ui-theme="white"] .oa-store-head strong,
html[data-ui-theme="white"] .oa-mini-title strong{color:#0f172a!important}
html[data-ui-theme="white"] .oa-store-kicker{color:#64748b!important}
html[data-ui-theme="white"] .oa-mini-card code{background:#eef2ff!important;color:#4338ca!important;border-color:#dbeafe!important}
@media (max-width:1180px){
  #settingsPage .settings-premium-shell{grid-template-columns:230px minmax(0,1fr)}
  #settingsPage .settings-profile-grid{grid-template-columns:1fr}
  #settingsPage .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  #settingsPage{overflow:auto}
  #settingsPage .settings-premium-shell{display:block;min-height:0}
  #settingsPage .settings-premium-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;overflow:auto;padding:12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.075)}
  #settingsPage .settings-brand-card{min-width:190px;margin:0;padding:10px 12px;border-radius:18px}
  #settingsPage .settings-nav-title{display:none!important}
  #settingsPage .settings-nav-item{min-width:max-content;margin:0;min-height:38px}
  #settingsPage .settings-premium-content{padding:18px}
  #settingsPage .settings-page-head{flex-direction:column;align-items:flex-start}
  #settingsPage .settings-page-head--inline{align-items:stretch}
  #settingsPage .settings-page-head h2{font-size:24px}
  #settingsPage .settings-card{padding:18px;border-radius:22px}
  #settingsPage .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #settingsPage .settings-action-stack{grid-template-columns:1fr}
  #settingsPage .settings-table-card{overflow:auto}
  .oa-mini-card{grid-template-columns:34px minmax(0,1fr)}
  .oa-mini-actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap}
}

/* Settings Sidebar Premium v2 - 20260721 */
#settingsPage .settings-premium-shell{
  grid-template-columns:236px minmax(0,1fr) !important;
}
#settingsPage .settings-premium-nav.settings-nav-v2{
  position:relative;
  padding:18px 14px !important;
  background:
    linear-gradient(180deg, rgba(13,27,46,.92), rgba(6,18,31,.96)) !important;
  border-right:1px solid rgba(148,163,184,.10) !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.025), 18px 0 50px rgba(0,0,0,.18) !important;
}
#settingsPage .settings-premium-nav.settings-nav-v2::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(125,178,255,.42), transparent);
  pointer-events:none;
}
#settingsPage .settings-brand-card.settings-brand-card-v2{
  min-height:64px !important;
  margin:0 0 22px !important;
  padding:12px !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(125,178,255,.18), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.070), rgba(255,255,255,.030)) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
#settingsPage .settings-brand-orb.settings-brand-orb-v2{
  width:42px !important;
  height:42px !important;
  border-radius:15px !important;
  color:#dbeafe !important;
  background:linear-gradient(135deg, rgba(85,133,255,.32), rgba(126,91,255,.22)) !important;
  border:1px solid rgba(148,180,255,.24) !important;
  box-shadow:0 0 22px rgba(85,133,255,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
#settingsPage .settings-brand-orb svg{
  width:19px;
  height:19px;
  fill:currentColor;
  opacity:.96;
}
#settingsPage .settings-brand-copy{min-width:0}
#settingsPage .settings-brand-title{
  font-size:13px !important;
  font-weight:800 !important;
  color:#f8fafc !important;
}
#settingsPage .settings-brand-subtitle{
  margin-top:5px !important;
  font-size:10px !important;
  font-weight:700 !important;
  color:rgba(203,213,225,.52) !important;
  text-transform:uppercase;
  letter-spacing:.08em !important;
}
#settingsPage .settings-nav-group{
  padding:0 0 14px;
  margin:0 0 12px;
  border-bottom:1px solid rgba(255,255,255,.055);
}
#settingsPage .settings-nav-group:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
#settingsPage .settings-nav-title{
  padding:0 8px 9px !important;
  color:rgba(148,163,184,.58) !important;
  font-size:10px !important;
  font-weight:800 !important;
  text-transform:uppercase;
  letter-spacing:.13em !important;
}
#settingsPage .settings-nav-item{
  min-height:42px !important;
  margin:3px 0 !important;
  padding:0 10px !important;
  gap:10px !important;
  border-radius:14px !important;
  color:rgba(226,232,240,.68) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
}
#settingsPage .settings-nav-item::before{
  content:"";
  position:absolute;
  left:-1px;
  top:10px;
  bottom:10px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,#7db2ff,#8b5cf6);
  opacity:0;
  transition:opacity 180ms ease, box-shadow 180ms ease;
}
#settingsPage .settings-nav-item:hover{
  transform:translateY(-1px) !important;
  color:rgba(248,250,252,.94) !important;
  background:rgba(255,255,255,.040) !important;
  border-color:rgba(255,255,255,.060) !important;
}
#settingsPage .settings-nav-item.active{
  color:#f8fafc !important;
  background:
    linear-gradient(135deg, rgba(125,178,255,.15), rgba(139,92,246,.075) 48%, rgba(255,255,255,.035)) !important;
  border-color:rgba(125,178,255,.20) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.070) !important;
}
#settingsPage .settings-nav-item.active::before{
  opacity:1;
  box-shadow:0 0 14px rgba(125,178,255,.55);
}
#settingsPage .settings-nav-ico{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border-radius:10px !important;
  color:rgba(219,234,254,.86) !important;
  background:rgba(15,23,42,.56) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
  font-size:12px !important;
}
#settingsPage .settings-nav-item.active .settings-nav-ico{
  color:#ffffff !important;
  background:linear-gradient(135deg, rgba(85,133,255,.42), rgba(139,92,246,.25)) !important;
  border-color:rgba(125,178,255,.24) !important;
  box-shadow:0 0 18px rgba(85,133,255,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
#settingsPage .settings-nav-copy{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12.5px;
  line-height:1;
  font-weight:760;
  letter-spacing:0;
}
html[data-ui-theme="white"] #settingsPage .settings-premium-nav.settings-nav-v2{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94)) !important;
  border-right-color:rgba(15,23,42,.08) !important;
}
html[data-ui-theme="white"] #settingsPage .settings-nav-item{color:#64748b !important}
html[data-ui-theme="white"] #settingsPage .settings-nav-item.active{color:#0f172a !important;background:rgba(59,130,246,.09) !important;border-color:rgba(59,130,246,.16) !important}
@media (max-width:980px){
  #settingsPage .settings-premium-shell{grid-template-columns:1fr !important}
  #settingsPage .settings-premium-nav.settings-nav-v2{position:sticky;top:0;display:flex;align-items:center;gap:8px;overflow:auto;padding:12px !important;border-right:0 !important;border-bottom:1px solid rgba(255,255,255,.075) !important}
  #settingsPage .settings-brand-card.settings-brand-card-v2{min-width:170px !important;margin:0 !important}
  #settingsPage .settings-nav-group{display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0}
  #settingsPage .settings-nav-title{display:none !important}
  #settingsPage .settings-nav-item{min-width:max-content !important;margin:0 !important}
}

/* Settings Sidebar Slim Luxury - 20260721 */
#settingsPage .settings-premium-shell{
  grid-template-columns:218px minmax(0,1fr) !important;
}
#settingsPage .settings-premium-nav.settings-nav-v2{
  padding:20px 12px !important;
  background:linear-gradient(180deg, rgba(7,19,33,.46), rgba(7,19,33,.30)) !important;
  border-right:1px solid rgba(255,255,255,.055) !important;
  box-shadow:none !important;
}
#settingsPage .settings-premium-nav.settings-nav-v2::before{opacity:.35 !important}
#settingsPage .settings-brand-card.settings-brand-card-v2{
  min-height:44px !important;
  margin:0 4px 24px !important;
  padding:0 !important;
  gap:10px !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#settingsPage .settings-brand-orb.settings-brand-orb-v2{
  width:34px !important;
  height:34px !important;
  border-radius:12px !important;
  color:#dbeafe !important;
  background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.35), transparent 36%), linear-gradient(135deg, rgba(111,146,255,.42), rgba(114,78,255,.22)) !important;
  border:1px solid rgba(148,180,255,.20) !important;
  box-shadow:0 10px 24px rgba(71,112,255,.14), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
#settingsPage .settings-brand-orb svg{width:16px !important;height:16px !important}
#settingsPage .settings-brand-title{font-size:12px !important;font-weight:800 !important;line-height:1 !important}
#settingsPage .settings-brand-subtitle{margin-top:4px !important;font-size:9px !important;color:rgba(203,213,225,.46) !important;letter-spacing:.11em !important}
#settingsPage .settings-nav-group{
  position:relative;
  margin:0 0 18px !important;
  padding:0 0 18px !important;
  border-bottom:1px solid rgba(255,255,255,.040) !important;
}
#settingsPage .settings-nav-group:last-child{margin-bottom:0 !important;padding-bottom:0 !important;border-bottom:0 !important}
#settingsPage .settings-nav-title{
  padding:0 6px 10px !important;
  color:rgba(148,163,184,.46) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.16em !important;
}
#settingsPage .settings-nav-item{
  min-height:38px !important;
  margin:2px 0 !important;
  padding:0 8px !important;
  gap:9px !important;
  border-radius:13px !important;
  color:rgba(226,232,240,.62) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
}
#settingsPage .settings-nav-item::before{
  left:0 !important;
  top:12px !important;
  bottom:12px !important;
  width:2px !important;
  background:linear-gradient(180deg, rgba(125,178,255,.95), rgba(139,92,246,.85)) !important;
}
#settingsPage .settings-nav-item:hover{
  transform:none !important;
  color:rgba(248,250,252,.88) !important;
  background:rgba(255,255,255,.032) !important;
  border-color:rgba(255,255,255,.045) !important;
}
#settingsPage .settings-nav-item.active{
  color:#f8fafc !important;
  background:linear-gradient(90deg, rgba(125,178,255,.14), rgba(125,178,255,.050) 46%, rgba(255,255,255,.018)) !important;
  border-color:rgba(125,178,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
}
#settingsPage .settings-nav-item.active::before{opacity:1 !important;box-shadow:0 0 12px rgba(125,178,255,.46) !important}
#settingsPage .settings-nav-ico{
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  border-radius:8px !important;
  color:rgba(203,213,225,.68) !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.045) !important;
  box-shadow:none !important;
  font-size:11px !important;
}
#settingsPage .settings-nav-item.active .settings-nav-ico{
  color:#eaf1ff !important;
  background:linear-gradient(135deg, rgba(96,165,250,.24), rgba(139,92,246,.16)) !important;
  border-color:rgba(125,178,255,.16) !important;
  box-shadow:0 0 14px rgba(96,165,250,.12), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#settingsPage .settings-nav-copy{font-size:12px !important;font-weight:760 !important;color:inherit !important}
#settingsPage .settings-premium-content{padding-left:26px !important}
html[data-ui-theme="white"] #settingsPage .settings-premium-nav.settings-nav-v2{background:rgba(248,250,252,.72) !important;border-right-color:rgba(15,23,42,.06) !important}
@media (max-width:980px){
  #settingsPage .settings-premium-shell{grid-template-columns:1fr !important}
  #settingsPage .settings-premium-nav.settings-nav-v2{padding:10px 12px !important;background:rgba(7,19,33,.88) !important;box-shadow:0 12px 32px rgba(0,0,0,.16) !important}
  #settingsPage .settings-brand-card.settings-brand-card-v2{min-width:154px !important;margin:0 !important}
  #settingsPage .settings-nav-group{margin:0 !important;padding:0 !important;border:0 !important}
}

/* Settings Sidebar No Icons - 20260721 */
#settingsPage .settings-premium-shell{grid-template-columns:206px minmax(0,1fr) !important}
#settingsPage .settings-premium-nav.settings-nav-v2{padding:22px 14px !important;background:linear-gradient(180deg, rgba(7,19,33,.34), rgba(7,19,33,.18)) !important}
#settingsPage .settings-brand-card.settings-brand-card-v2{min-height:auto !important;margin:0 6px 26px !important;padding:0 !important;display:block !important}
#settingsPage .settings-brand-orb.settings-brand-orb-v2{display:none !important}
#settingsPage .settings-brand-title{font-size:13px !important;line-height:1.1 !important;font-weight:800 !important;letter-spacing:0 !important}
#settingsPage .settings-brand-subtitle{margin-top:6px !important;font-size:9px !important;line-height:1 !important;font-weight:800 !important;letter-spacing:.14em !important;color:rgba(148,163,184,.52) !important}
#settingsPage .settings-nav-group{margin:0 0 22px !important;padding:0 !important;border-bottom:0 !important}
#settingsPage .settings-nav-title{padding:0 6px 12px !important;font-size:9px !important;letter-spacing:.18em !important;color:rgba(148,163,184,.42) !important}
#settingsPage .settings-nav-item{min-height:40px !important;padding:0 12px 0 14px !important;margin:2px 0 !important;gap:0 !important;border-radius:13px !important;background:transparent !important;border:1px solid transparent !important;color:rgba(203,213,225,.58) !important}
#settingsPage .settings-nav-ico{display:none !important}
#settingsPage .settings-nav-copy{font-size:12.5px !important;font-weight:760 !important;letter-spacing:0 !important}
#settingsPage .settings-nav-item::before{left:0 !important;top:11px !important;bottom:11px !important;width:2px !important;opacity:0 !important}
#settingsPage .settings-nav-item:hover{color:rgba(248,250,252,.88) !important;background:rgba(255,255,255,.028) !important;border-color:rgba(255,255,255,.040) !important}
#settingsPage .settings-nav-item.active{color:#f8fafc !important;background:linear-gradient(90deg, rgba(125,178,255,.13), rgba(125,178,255,.040) 44%, transparent) !important;border-color:rgba(125,178,255,.13) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important}
#settingsPage .settings-nav-item.active::before{opacity:1 !important;box-shadow:0 0 12px rgba(125,178,255,.42) !important}
#settingsPage .settings-premium-content{padding-left:30px !important}
html[data-ui-theme="white"] #settingsPage .settings-nav-item{color:#64748b !important}
html[data-ui-theme="white"] #settingsPage .settings-nav-item.active{color:#0f172a !important;background:rgba(59,130,246,.075) !important}
@media (max-width:980px){#settingsPage .settings-premium-shell{grid-template-columns:1fr !important}#settingsPage .settings-brand-card.settings-brand-card-v2{min-width:128px !important;margin:0 !important}#settingsPage .settings-nav-item{min-width:max-content !important}}

/* Settings Content Compact Luxury - 20260721 */
#settingsPage .settings-premium-content{
  padding:22px 26px 24px !important;
}
#settingsPage .settings-tab{
  max-width:1120px !important;
}
#settingsPage .settings-page-head{
  margin-bottom:16px !important;
  min-height:auto !important;
}
#settingsPage .settings-eyebrow,
#settingsPage .eyebrow{
  font-size:9px !important;
  letter-spacing:.17em !important;
  margin-bottom:7px !important;
}
#settingsPage .settings-page-head h2{
  font-size:27px !important;
  line-height:1.05 !important;
  margin:0 !important;
}
#settingsPage .settings-page-head p{
  margin-top:8px !important;
  font-size:12px !important;
  line-height:1.45 !important;
  color:rgba(203,213,225,.58) !important;
}
#settingsPage .settings-head-status{
  min-height:32px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  font-size:11px !important;
  box-shadow:none !important;
}
#settingsPage .settings-profile-grid{
  grid-template-columns:minmax(260px,360px) minmax(0,1fr) !important;
  gap:16px !important;
  margin-bottom:16px !important;
}
#settingsPage .settings-card{
  padding:20px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028)) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
#settingsPage .settings-profile-card,
#settingsPage .settings-theme-card{
  min-height:230px !important;
}
#settingsPage .settings-card-topline{
  left:20px !important;
  right:20px !important;
  opacity:.58 !important;
}
#settingsPage .settings-profile-row{
  gap:14px !important;
}
#settingsPage .settings-profile-avatar,
#settingsPage .user-avatar.settings-profile-avatar{
  width:64px !important;
  height:64px !important;
  border-radius:18px !important;
  font-size:25px !important;
  box-shadow:0 14px 32px rgba(91,141,255,.22) !important;
}
#settingsPage .settings-profile-label{
  font-size:9px !important;
  letter-spacing:.14em !important;
}
#settingsPage .settings-profile-name{
  margin-top:5px !important;
  font-size:19px !important;
}
#settingsPage .settings-profile-role{
  margin-top:5px !important;
  font-size:12px !important;
}
#settingsPage .settings-action-stack{
  gap:10px !important;
  margin-top:18px !important;
}
#settingsPage .settings-action-btn,
#settingsPage .settings-generate-btn,
#settingsPage .settings-unlink-btn{
  min-height:42px !important;
  border-radius:14px !important;
  font-size:12px !important;
  font-weight:800 !important;
}
#settingsPage .theme-panel-head,
#settingsPage .settings-card-header{
  margin-bottom:14px !important;
}
#settingsPage .theme-panel-head h3,
#settingsPage .settings-card-header h3{
  font-size:16px !important;
}
#settingsPage .theme-panel-head p,
#settingsPage .settings-card-header p{
  margin-top:6px !important;
  font-size:11px !important;
}
#settingsPage #themeActiveLabel,
#settingsPage .settings-status-badge{
  min-height:30px !important;
  padding:0 12px !important;
  font-size:11px !important;
}
#settingsPage .theme-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:9px !important;
}
#settingsPage .theme-choice{
  min-height:82px !important;
  padding:13px 12px !important;
  border-radius:17px !important;
  align-items:flex-start !important;
  justify-content:center !important;
}
#settingsPage .theme-swatch{
  width:40px !important;
  height:28px !important;
  border-radius:999px !important;
  box-shadow:0 10px 22px rgba(0,0,0,.22) !important;
}
#settingsPage .theme-choice span:last-child,
#settingsPage .theme-choice .theme-name{
  margin-top:9px !important;
  font-size:11px !important;
  line-height:1.1 !important;
}
#settingsPage .theme-note{
  margin-top:12px !important;
  font-size:10.5px !important;
}
#settingsPage .settings-telegram-card{
  margin-bottom:0 !important;
  padding:20px !important;
  border-radius:22px !important;
}
#settingsPage .settings-guide-box,
#settingsPage .settings-linked-card,
#settingsPage .settings-code-box{
  padding:16px 18px !important;
  border-radius:18px !important;
}
#settingsPage .settings-guide-box strong{
  font-size:12px !important;
  margin-bottom:8px !important;
}
#settingsPage .settings-guide-box ol{
  font-size:11.5px !important;
  line-height:1.68 !important;
}
#settingsPage .settings-guide-box span,
#settingsPage .settings-code-command,
#settingsPage .settings-code-expiry{
  font-size:10.5px !important;
}
#settingsPage .settings-generate-btn{
  margin-top:12px !important;
  min-height:40px !important;
  box-shadow:0 12px 26px rgba(93,124,255,.22) !important;
}
@media (max-width:1200px){
  #settingsPage .settings-profile-grid{grid-template-columns:1fr !important}
  #settingsPage .settings-profile-card,#settingsPage .settings-theme-card{min-height:auto !important}
}
@media (max-width:760px){
  #settingsPage .settings-premium-content{padding:16px !important}
  #settingsPage .settings-page-head h2{font-size:23px !important}
  #settingsPage .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #settingsPage .settings-card{padding:16px !important;border-radius:20px !important}
}

/* Hide unused TikTok Ads navigation - 20260721 */
#btnTiktok,
#bnTiktok{
  display:none !important;
}

/* Modern login refresh 20260723 */
#loginPage{
  isolation:isolate;
  align-items:center!important;
  padding:30px 18px 34px!important;
  background:
    radial-gradient(circle at 18% 52%,rgba(0,165,255,.24),transparent 30%),
    radial-gradient(circle at 82% 52%,rgba(198,54,255,.22),transparent 31%),
    radial-gradient(circle at 50% 18%,rgba(80,125,255,.18),transparent 26%),
    linear-gradient(180deg,#05091b 0%,#060a18 54%,#020512 100%)!important;
}
#loginPage::before{
  content:"";
  position:fixed;
  inset:-14vh -12vw;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(ellipse at center,transparent 0 39%,rgba(37,188,255,.42) 39.3%,transparent 40.2%,transparent 52%,rgba(158,64,255,.34) 52.3%,transparent 53.1%,transparent 64%,rgba(255,255,255,.08) 64.2%,transparent 64.7%),
    radial-gradient(circle at 31% 26%,rgba(86,184,255,.95) 0 1px,transparent 2px),
    radial-gradient(circle at 71% 27%,rgba(170,128,255,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 20% 72%,rgba(67,190,255,.7) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 70%,rgba(230,82,255,.7) 0 1px,transparent 2px);
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 26px rgba(56,190,255,.25));
  opacity:.82;
  mask-image:radial-gradient(ellipse at 50% 48%,#000 0 62%,transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 48%,#000 0 62%,transparent 82%);
}
#loginPage::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 46%,rgba(45,215,255,.10),transparent 28%),
    linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.035) 50%,transparent 53%);
  opacity:.75;
}
.lp-wrap{max-width:560px!important;width:min(100%,560px)!important}
.lp-hero{margin-bottom:0!important;text-align:center!important}
.lp-logo{
  width:94px!important;
  height:94px!important;
  border-radius:24px!important;
  margin-bottom:24px!important;
  background:linear-gradient(145deg,rgba(40,210,255,.92),rgba(105,120,255,.52) 50%,rgba(220,58,255,.88))!important;
  box-shadow:0 0 36px rgba(42,208,255,.48),0 0 54px rgba(193,62,255,.30),inset 0 1px 0 rgba(255,255,255,.52)!important;
}
.lp-title{
  font-size:clamp(50px,7vw,78px)!important;
  font-weight:950!important;
  line-height:.94!important;
  margin-bottom:18px!important;
  letter-spacing:0!important;
  color:transparent!important;
  background:linear-gradient(90deg,#ffffff 0%,#eaf4ff 30%,#1cc8ff 52%,#b142ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:none!important;
}
.lp-sub{font-size:16px!important;line-height:1.72!important;color:#aab7d6!important;margin:0 auto 22px!important}
.lp-login-box{
  max-width:532px!important;
  margin:0 auto 18px!important;
  padding:26px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(13,24,52,.72),rgba(8,14,34,.76))!important;
  border:1px solid rgba(83,211,255,.35)!important;
  box-shadow:0 0 0 1px rgba(171,65,255,.30),0 0 34px rgba(36,197,255,.25),0 0 58px rgba(170,52,255,.22),0 24px 70px rgba(0,0,0,.38)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.lp-login-box::before{background:linear-gradient(90deg,rgba(26,194,255,.85),rgba(95,117,255,.36),rgba(223,59,255,.82))!important;opacity:.94!important}
.lp-field{margin-bottom:14px!important;position:relative!important}
.lp-field-icon .lp-inp{padding-left:64px!important}
.lp-input-icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#d8e7ff;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  font-size:18px;
}
.lp-inp{
  height:56px!important;
  border-radius:14px!important;
  background:rgba(4,11,29,.58)!important;
  border:1px solid rgba(93,121,169,.40)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.18)!important;
}
.lp-inp:focus{border-color:rgba(45,204,255,.82)!important;box-shadow:0 0 0 4px rgba(45,204,255,.12),0 0 28px rgba(179,55,255,.18)!important}
.lp-eye{right:13px!important;background:transparent!important;border:none!important;color:#98a7c5!important;font-size:20px!important}
.lp-options{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 18px;color:#8fa1c5;font-size:13px;font-weight:700}
.lp-remember{display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.lp-remember input{width:17px;height:17px;accent-color:#20b8ff}
.lp-forgot{border:none;background:transparent;color:#819dff;font:inherit;font-size:13px;font-weight:800;cursor:pointer;padding:4px 0}
.lp-forgot:hover{color:#d46bff}
.lp-btn{
  max-width:none!important;
  width:100%!important;
  height:58px!important;
  margin:0!important;
  border-radius:14px!important;
  background:linear-gradient(90deg,#1394ff 0%,#2878ff 42%,#a039ff 74%,#e03bff 100%)!important;
  color:#fff!important;
  font-size:17px!important;
  box-shadow:0 16px 38px rgba(30,131,255,.28),0 0 30px rgba(190,57,255,.22)!important;
}
.lp-note{display:flex;align-items:center;justify-content:center;gap:14px;color:#7f8dad!important;font-size:13px!important}
.lp-note::before,.lp-note::after{content:"";height:1px;width:120px;max-width:22vw;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18))}
.lp-note::after{background:linear-gradient(90deg,rgba(255,255,255,.18),transparent)}
@media(max-width:767px){
  #loginPage{padding:24px 16px 30px!important;align-items:flex-start!important}
  .lp-wrap{width:100%!important}
  .lp-logo{width:76px!important;height:76px!important;margin-bottom:18px!important}
  .lp-title{font-size:44px!important;margin-bottom:14px!important}
  .lp-sub{font-size:13px!important;margin-bottom:18px!important}
  .lp-login-box{padding:18px!important;border-radius:20px!important}
  .lp-options{font-size:12px;gap:10px}
  .lp-note::before,.lp-note::after{width:58px;max-width:18vw}
}

/* Modern login cache-fix polish 20260723 */
.lp-field-icon{position:relative!important}
.lp-field-icon .lp-inp{padding-left:66px!important;padding-right:18px!important}
.lp-pw .lp-inp{padding-left:66px!important;padding-right:58px!important}
.lp-input-icon{
  position:absolute!important;
  left:13px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:3!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  line-height:38px!important;
  font-size:17px!important;
  text-align:center!important;
  pointer-events:none!important;
}
.lp-options{min-height:22px!important;line-height:1.2!important}
.lp-remember span,.lp-forgot{white-space:nowrap!important}
.lp-title{background:linear-gradient(90deg,#fff 0%,#eff7ff 34%,#22c7ff 58%,#b640ff 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}

/* Premium logo-first login polish 20260723 */
#loginPage{
  padding:24px 18px 30px!important;
  background:
    radial-gradient(circle at 50% 18%,rgba(49,201,255,.18),transparent 26%),
    radial-gradient(circle at 33% 52%,rgba(45,149,255,.16),transparent 24%),
    radial-gradient(circle at 70% 52%,rgba(204,64,255,.16),transparent 24%),
    linear-gradient(180deg,#080c22 0%,#050918 56%,#030612 100%)!important;
}
.lp-wrap{width:min(100%,540px)!important;max-width:540px!important}
.lp-hero{display:flex;flex-direction:column;align-items:center!important}
.lp-logo{
  width:148px!important;
  height:148px!important;
  border-radius:40px!important;
  margin:0 auto 26px!important;
  border:2px solid transparent!important;
  background:
    linear-gradient(#071024,#071024) padding-box,
    linear-gradient(135deg,#7ee9ff 0%,#2a9dff 34%,#7a5cff 62%,#ec4cff 100%) border-box!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 34px rgba(67,204,255,.42),
    0 0 60px rgba(204,67,255,.30),
    0 26px 80px rgba(0,0,0,.44)!important;
}
.lp-logo::before{
  inset:30px!important;
  z-index:0!important;
  opacity:1!important;
  border-radius:999px!important;
  background:conic-gradient(from 215deg,rgba(58,195,255,.10),#249dff,#6857ff,#b642ff,rgba(255,215,112,.92),rgba(58,195,255,.10))!important;
  animation:none!important;
  filter:drop-shadow(0 0 18px rgba(72,162,255,.38));
}
.lp-logo::after{
  inset:8px!important;
  z-index:-1!important;
  border-radius:34px!important;
  background:
    radial-gradient(circle at 72% 24%,rgba(255,216,118,.16),transparent 18%),
    radial-gradient(circle at 38% 50%,rgba(58,160,255,.18),transparent 32%),
    linear-gradient(145deg,#0b1532 0%,#060a1a 78%)!important;
}
.lp-logo .logo-bubble{
  z-index:2!important;
  width:62%!important;
  height:45%!important;
  border-radius:36% 36% 36% 12%!important;
  background:linear-gradient(145deg,#ffffff 0%,#eafcff 38%,#d6dcff 70%,#f0d5ff 100%)!important;
  transform:translateY(8px)!important;
  box-shadow:0 12px 28px rgba(61,199,255,.34),0 0 0 1px rgba(255,255,255,.75) inset!important;
}
.lp-logo .logo-bubble::before,.lp-logo .logo-bubble::after{
  width:12%!important;
  background:#060b22!important;
  opacity:.92!important;
}
.lp-logo .logo-spark{
  z-index:3!important;
  right:21%!important;
  top:21%!important;
  width:18%!important;
  background:linear-gradient(135deg,#fff9dc,#ffdc78 54%,#ffbd45)!important;
  box-shadow:0 0 24px rgba(255,218,122,.9),0 0 46px rgba(255,188,70,.38)!important;
}
.lp-title{
  font-size:clamp(58px,7.4vw,86px)!important;
  line-height:.9!important;
  margin:0 0 16px!important;
  font-weight:950!important;
  background:linear-gradient(90deg,#fff 0%,#f7fbff 28%,#24bfff 52%,#715dff 72%,#d84dff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}
.lp-sub{margin-bottom:24px!important;color:#aab8d4!important;font-size:15px!important;line-height:1.65!important}
.lp-login-box{
  width:100%!important;
  max-width:520px!important;
  padding:22px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(18,27,54,.72),rgba(8,13,31,.78))!important;
  border:1px solid rgba(126,233,255,.24)!important;
  box-shadow:0 0 0 1px rgba(216,77,255,.18),0 20px 62px rgba(0,0,0,.34),0 0 34px rgba(36,191,255,.14)!important;
}
.lp-field{margin-bottom:12px!important}
.lp-inp{height:54px!important;border-radius:16px!important;background:rgba(8,14,34,.72)!important}
.lp-options{width:100%;margin:2px 0 16px!important;font-size:12px!important;color:#9dafcf!important}
.lp-forgot{color:#9aaeff!important}
.lp-btn{height:58px!important;border-radius:16px!important;background:linear-gradient(90deg,#188cff 0%,#36c7ff 38%,#7b74ff 68%,#d946ef 100%)!important;color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.22)!important}
.lp-note{margin-top:2px!important;text-transform:uppercase!important;letter-spacing:.18em!important;font-size:11px!important;color:#7d88a7!important}
@media(max-width:767px){
  #loginPage{padding:22px 14px 28px!important}
  .lp-logo{width:104px!important;height:104px!important;border-radius:30px!important;margin-bottom:20px!important}
  .lp-logo::before{inset:22px!important}
  .lp-logo::after{inset:7px!important;border-radius:24px!important}
  .lp-title{font-size:48px!important;margin-bottom:12px!important}
  .lp-sub{font-size:13px!important;margin-bottom:18px!important}
  .lp-login-box{padding:17px!important;border-radius:20px!important}
  .lp-options{align-items:flex-start!important;gap:8px!important}
  .lp-note{letter-spacing:.1em!important;font-size:10px!important}
}

/* Real generated premium logo login 20260723 */
.lp-logo.lp-logo-img{
  width:154px!important;
  height:154px!important;
  padding:0!important;
  border:0!important;
  border-radius:38px!important;
  background:transparent!important;
  overflow:visible!important;
  box-shadow:0 0 42px rgba(54,203,255,.26),0 0 70px rgba(203,68,255,.16)!important;
}
.lp-logo.lp-logo-img::before,.lp-logo.lp-logo-img::after{display:none!important;content:none!important}
.lp-logo.lp-logo-img img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  border-radius:38px!important;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.36));
}
.lp-title{font-size:clamp(54px,6.8vw,78px)!important;margin-top:4px!important}
.lp-sub{margin-bottom:26px!important}
.lp-login-box{margin-top:0!important}
@media(max-width:767px){
  .lp-logo.lp-logo-img{width:112px!important;height:112px!important;border-radius:28px!important;margin-bottom:18px!important}
  .lp-logo.lp-logo-img img{border-radius:28px!important}
  .lp-title{font-size:46px!important}
}

/* Login icon and toast cleanup 20260723 */
.lp-input-icon svg,.lp-eye svg,.lp-btn-icon svg{
  width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.lp-input-icon{
  color:#aebbd7!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035))!important;
}
.lp-eye{
  color:#9aa8c5!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.lp-eye:hover,.lp-eye.is-visible{color:#36c7ff!important;border-color:rgba(54,199,255,.24)!important;background:rgba(54,199,255,.08)!important}
.lp-btn{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important}
.lp-btn-icon{width:24px;height:24px;display:grid;place-items:center;color:#fff}
#sysToast.sys-toast{
  top:calc(env(safe-area-inset-top,0px) + 14px)!important;
  left:50%!important;right:auto!important;
  transform:translate(-50%,0);
  width:max-content;max-width:min(440px,calc(100vw - 28px))!important;
  padding:10px 15px!important;border-radius:14px!important;
  white-space:normal!important;text-overflow:clip!important;
  font-size:12px!important;font-weight:800!important;line-height:1.35!important;
  color:#f6f8ff!important;background:rgba(8,14,34,.78)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 22px rgba(54,199,255,.12)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
}
#sysToast.sys-toast-warn{border-color:rgba(255,193,92,.34)!important;box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 20px rgba(255,193,92,.13)!important}
#sysToast.sys-toast-error{border-color:rgba(248,113,113,.34)!important}
#sysToast.sys-toast-success{border-color:rgba(52,211,153,.32)!important}
#sysToast.sys-toast-info{border-color:rgba(96,165,250,.32)!important}
#sysToast.line-alert-toast{
  max-width:min(560px,calc(100vw - 28px))!important;
  padding:13px 17px!important;
  text-align:left!important;
  font-size:13px!important;
  border-radius:16px!important;
}
#sysToast.sys-toast-line-alert{
  background:linear-gradient(135deg,rgba(69,16,28,.92),rgba(17,24,45,.92))!important;
  border-color:rgba(248,113,113,.48)!important;
  box-shadow:0 22px 52px rgba(0,0,0,.42),0 0 24px rgba(248,113,113,.2)!important;
}
#sysToast.sys-toast-line-warn{
  background:linear-gradient(135deg,rgba(82,50,16,.92),rgba(17,24,45,.92))!important;
  border-color:rgba(251,191,36,.48)!important;
  box-shadow:0 22px 52px rgba(0,0,0,.42),0 0 24px rgba(251,191,36,.18)!important;
}
@media(max-width:640px){#sysToast.sys-toast{top:calc(env(safe-area-inset-top,0px) + 10px)!important;left:50%!important;right:auto!important;max-width:calc(100vw - 24px)!important}}

/* Login error visibility 20260723 */
.lp-err{
  display:none;
  width:100%;
  margin:2px 0 14px!important;
  padding:10px 12px!important;
  border-radius:12px!important;
  text-align:left!important;
  color:#fecaca!important;
  background:rgba(127,29,29,.28)!important;
  border:1px solid rgba(248,113,113,.42)!important;
  box-shadow:0 0 18px rgba(248,113,113,.12)!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.45!important;
}
.lp-err:not(:empty){display:block!important}
.lp-login-box:has(.lp-err:not(:empty)) .lp-inp{border-color:rgba(248,113,113,.36)!important}

/* Login mobile vertical balance 20260723 */
@media (max-width:767px){
  #loginPage{
    min-height:100svh!important;
    padding:calc(env(safe-area-inset-top,0px) + 14px) 14px calc(env(safe-area-inset-bottom,0px) + 18px)!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #loginPage::before{
    inset:-8vh -18vw!important;
    transform:scale(.86)!important;
    opacity:.62!important;
    filter:drop-shadow(0 0 18px rgba(56,190,255,.18))!important;
  }
  #loginPage::after{opacity:.52!important}
  .lp-wrap{
    width:min(100%,430px)!important;
    max-width:430px!important;
  }
  .lp-hero{
    justify-content:center!important;
  }
  .lp-logo.lp-logo-img{
    width:86px!important;
    height:86px!important;
    margin:0 auto 10px!important;
    border-radius:22px!important;
    box-shadow:0 0 28px rgba(54,203,255,.18),0 0 42px rgba(203,68,255,.10)!important;
  }
  .lp-logo.lp-logo-img img{
    border-radius:22px!important;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,.30))!important;
  }
  .lp-title{
    font-size:39px!important;
    line-height:.96!important;
    margin:0 0 8px!important;
  }
  .lp-sub{
    max-width:330px!important;
    margin:0 auto 14px!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
  .lp-login-box{
    max-width:100%!important;
    padding:14px!important;
    margin:0 auto 12px!important;
    border-radius:18px!important;
    box-shadow:0 0 0 1px rgba(216,77,255,.14),0 14px 44px rgba(0,0,0,.30),0 0 24px rgba(36,191,255,.10)!important;
  }
  .lp-field{margin-bottom:9px!important}
  .lp-inp{
    height:47px!important;
    border-radius:13px!important;
    font-size:16px!important;
  }
  .lp-field-icon .lp-inp,
  .lp-pw .lp-inp{
    padding-left:54px!important;
  }
  .lp-pw .lp-inp{padding-right:52px!important}
  .lp-input-icon{
    left:10px!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:11px!important;
  }
  .lp-input-icon svg,
  .lp-eye svg,
  .lp-btn-icon svg{
    width:18px!important;
    height:18px!important;
  }
  .lp-eye{
    right:9px!important;
    width:36px!important;
    height:36px!important;
    border-radius:12px!important;
  }
  .lp-options{
    margin:0 0 10px!important;
    min-height:20px!important;
    font-size:11px!important;
    gap:8px!important;
  }
  .lp-remember{gap:6px!important}
  .lp-remember input{
    width:15px!important;
    height:15px!important;
  }
  .lp-forgot{
    font-size:11px!important;
    padding:2px 0!important;
  }
  .lp-err{
    margin:0 0 10px!important;
    padding:8px 10px!important;
    font-size:12px!important;
    border-radius:11px!important;
    line-height:1.35!important;
  }
  .lp-btn{
    height:50px!important;
    border-radius:14px!important;
    font-size:15px!important;
    gap:8px!important;
    box-shadow:0 12px 28px rgba(30,131,255,.22),0 0 22px rgba(190,57,255,.16)!important;
  }
  .lp-btn-icon{
    width:20px!important;
    height:20px!important;
  }
  .lp-note{
    margin-top:0!important;
    font-size:9px!important;
    line-height:1.35!important;
    letter-spacing:.12em!important;
    opacity:.82!important;
  }
  .lp-note::before,
  .lp-note::after{
    width:42px!important;
    max-width:13vw!important;
  }
}

/* Mobile dashboard readability refresh 20260724 */
@media (max-width:720px){
  .topbar{
    padding:12px 14px 10px!important;
    gap:10px!important;
  }
  .topbar-left .eyebrow{
    font-size:9px!important;
    letter-spacing:.15em!important;
  }
  .topbar-left h2{
    font-size:26px!important;
    line-height:1!important;
  }
  .topbar-actions > div{
    padding:8px!important;
    border-radius:18px!important;
  }
  #dateFilterControls{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px!important;
    align-items:end!important;
    gap:6px!important;
  }
  #dateFilterControls > div{
    min-width:0!important;
    width:100%!important;
  }
  #dateFilterControls label{
    display:none!important;
  }
  #dateFilterControls input{
    height:40px!important;
    min-width:0!important;
    width:100%!important;
    padding:0 8px!important;
    border-radius:13px!important;
    font-size:12px!important;
    text-align:center!important;
  }
  #dateFilterControls button{
    width:44px!important;
    min-width:44px!important;
    height:40px!important;
    padding:0!important;
    border-radius:13px!important;
  }
  #dateFilterControls button span{
    display:none!important;
  }
  #dashboardPage{
    padding:12px 12px calc(88px + env(safe-area-inset-bottom,0px))!important;
  }
  #dashboardPage .dashboard-grid{
    gap:14px!important;
  }
  #dashboardPage .panel:has(#realtimeBars){
    padding:16px!important;
    border-radius:20px!important;
  }
  #dashboardPage .panel:has(#realtimeBars) .panel-head{
    gap:12px!important;
    margin-bottom:12px!important;
  }
  #dashboardPage .panel:has(#realtimeBars) .panel-head h3{
    font-size:20px!important;
    line-height:1.22!important;
  }
  #dashboardPage .panel:has(#realtimeBars) .panel-head p{
    font-size:12px!important;
    line-height:1.35!important;
  }
  #dashboardPage .panel:has(#realtimeBars) .tabs{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:5px!important;
  }
  #dashboardPage .panel:has(#realtimeBars) .tabs .chip{
    min-width:0!important;
    width:100%!important;
    height:40px!important;
    justify-content:center!important;
    padding:0 8px!important;
    font-size:12px!important;
    border-radius:13px!important;
  }
  #realtimeBars,
  #realtimeBars.has-active-bars[data-range="today"],
  #realtimeBars[data-range="today"]{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:0!important;
    padding:12px!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }
  #realtimeBars::before,
  #realtimeBars.has-active-bars[data-range="today"]::before,
  #realtimeBars[data-range="today"]::before{
    top:72px!important;
    left:12px!important;
    right:12px!important;
    bottom:62px!important;
  }
  #realtimeBars .realtime-chart-toolbar{
    position:relative!important;
    z-index:3!important;
    inset:auto!important;
    display:block!important;
    margin:0 0 10px!important;
  }
  #realtimeBars .realtime-legend{
    max-width:100%!important;
    width:100%!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:9px!important;
    overflow-x:auto!important;
    padding-bottom:2px!important;
    scrollbar-width:none!important;
  }
  #realtimeBars .realtime-legend::-webkit-scrollbar{
    display:none!important;
  }
  #realtimeBars .realtime-legend-item{
    flex:0 0 auto!important;
    font-size:10px!important;
    color:rgba(226,232,240,.80)!important;
  }
  #realtimeBars .realtime-store-filter,
  #realtimeBars .realtime-scale{
    display:none!important;
  }
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
  #realtimeBars[data-range="today"] .realtime-bars-track{
    position:relative!important;
    z-index:2!important;
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(52px,1fr))!important;
    grid-auto-flow:row!important;
    align-items:end!important;
    justify-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    height:150px!important;
    padding:0!important;
  }
  #realtimeBars[data-range="week"] .realtime-bars-track{
    grid-template-columns:repeat(7,minmax(34px,1fr))!important;
  }
  #realtimeBars[data-range="month"] .realtime-bars-track{
    grid-template-columns:repeat(10,minmax(24px,1fr))!important;
    gap:7px!important;
  }
  #realtimeBars[data-range="today"] .bar-col.is-zero,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero{
    display:none!important;
  }
  #realtimeBars .bar-col,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col,
  #realtimeBars[data-range="today"] .bar-col{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:100%!important;
    gap:6px!important;
    overflow:visible!important;
  }
  #realtimeBars .bar,
  #realtimeBars[data-focused="true"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar,
  #realtimeBars[data-range="today"] .bar{
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
  }
  #realtimeBars .bar-count,
  #realtimeBars.has-active-bars[data-range="today"] .bar-count,
  #realtimeBars[data-range="today"] .bar-count{
    display:inline-flex!important;
    visibility:visible!important;
    min-width:22px!important;
    min-height:16px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    font-size:11px!important;
  }
  #realtimeBars .bar-col > span,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col > span,
  #realtimeBars[data-range="today"] .bar-col span,
  #realtimeBars[data-range="today"] .bar-col:nth-child(3n+1) span{
    display:block!important;
    font-size:10px!important;
    line-height:1!important;
    opacity:.82!important;
    transform:none!important;
  }
  #realtimeBars .realtime-summary,
  #realtimeBars[data-focused="true"] .realtime-summary,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #realtimeBars[data-range="today"] .realtime-summary{
    position:relative!important;
    z-index:3!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:2px 10px!important;
    margin:12px 0 0!important;
    padding:10px 12px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    overflow:hidden!important;
  }
  #realtimeBars .realtime-summary strong,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
  #realtimeBars[data-range="today"] .realtime-summary strong{
    grid-row:1 / span 2!important;
    font-size:24px!important;
    line-height:1!important;
  }
  #realtimeBars .realtime-summary span,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-summary span,
  #realtimeBars[data-range="today"] .realtime-summary span{
    min-width:0!important;
    font-size:11px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #realtimeBars .realtime-summary small,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-summary small,
  #realtimeBars[data-range="today"] .realtime-summary small{
    display:none!important;
  }
}

/* Restore classic mobile realtime graph 20260724 */
@media (max-width:720px){
  #realtimeBars,
  #realtimeBars.has-active-bars[data-range="today"],
  #realtimeBars[data-range="today"]{
    display:block!important;
    height:270px!important;
    min-height:270px!important;
    padding:80px 16px 42px 36px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
  }
  #realtimeBars::before,
  #realtimeBars.has-active-bars[data-range="today"]::before,
  #realtimeBars[data-range="today"]::before{
    left:36px!important;
    right:16px!important;
    top:80px!important;
    bottom:42px!important;
  }
  #realtimeBars .realtime-chart-toolbar{
    position:absolute!important;
    z-index:4!important;
    left:16px!important;
    right:16px!important;
    top:14px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin:0!important;
  }
  #realtimeBars .realtime-legend{
    width:auto!important;
    max-width:calc(100% - 94px)!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px 9px!important;
    overflow:visible!important;
    padding:0!important;
  }
  #realtimeBars .realtime-legend-item{
    font-size:10px!important;
  }
  #realtimeBars .realtime-store-filter{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    height:34px!important;
    min-width:78px!important;
    padding:0 12px!important;
    border-radius:11px!important;
  }
  #realtimeBars .realtime-scale{
    display:block!important;
  }
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
  #realtimeBars[data-range="today"] .realtime-bars-track{
    display:grid!important;
    grid-template-columns:repeat(24,26px)!important;
    grid-auto-flow:column!important;
    align-items:end!important;
    justify-items:center!important;
    gap:6px!important;
    width:max-content!important;
    min-width:max-content!important;
    height:100%!important;
    padding:0 14px 0 0!important;
  }
  #realtimeBars[data-range="week"] .realtime-bars-track{
    grid-template-columns:repeat(7,48px)!important;
    gap:9px!important;
  }
  #realtimeBars[data-range="month"] .realtime-bars-track{
    grid-template-columns:repeat(30,22px)!important;
    gap:8px!important;
  }
  #realtimeBars .bar-col,
  #realtimeBars .bar-col.is-zero,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero,
  #realtimeBars[data-range="today"] .bar-col,
  #realtimeBars[data-range="today"] .bar-col.is-zero{
    display:flex!important;
    width:26px!important;
    min-width:26px!important;
    max-width:26px!important;
    height:100%!important;
    gap:6px!important;
  }
  #realtimeBars .bar,
  #realtimeBars[data-focused="true"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar,
  #realtimeBars[data-range="today"] .bar{
    width:11px!important;
    min-width:11px!important;
    max-width:11px!important;
    border-radius:10px 10px 4px 4px!important;
  }
  #realtimeBars .bar-col.is-zero .bar,
  #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar{
    display:block!important;
    height:7%!important;
    min-height:7px!important;
    opacity:.24!important;
  }
  #realtimeBars .bar-count,
  #realtimeBars .bar-count.zero,
  #realtimeBars.has-active-bars[data-range="today"] .bar-count,
  #realtimeBars.has-active-bars[data-range="today"] .bar-count.zero,
  #realtimeBars[data-range="today"] .bar-count{
    display:inline-flex!important;
    visibility:visible!important;
    min-width:16px!important;
    min-height:16px!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:10px!important;
  }
  #realtimeBars .bar-count.zero,
  #realtimeBars.has-active-bars[data-range="today"] .bar-count.zero{
    opacity:.34!important;
  }
  #realtimeBars .bar-col > span,
  #realtimeBars span.muted-hour,
  #realtimeBars[data-range="today"] .bar-col span,
  #realtimeBars[data-range="today"] .bar-col:nth-child(3n+1) span{
    display:block!important;
    font-size:10px!important;
    line-height:1!important;
    opacity:.82!important;
    transform:none!important;
  }
  #realtimeBars .realtime-summary,
  #realtimeBars[data-focused="true"] .realtime-summary,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #realtimeBars[data-range="today"] .realtime-summary{
    position:absolute!important;
    z-index:4!important;
    left:36px!important;
    right:16px!important;
    bottom:9px!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  #realtimeBars .realtime-summary strong,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
  #realtimeBars[data-range="today"] .realtime-summary strong{
    grid-row:auto!important;
    font-size:22px!important;
  }
  #realtimeBars .realtime-summary span,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-summary span,
  #realtimeBars[data-range="today"] .realtime-summary span{
    min-width:0!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* Mobile realtime axis and left edge readability 20260724 */
@media (max-width:720px){
  #realtimeBars,
  #realtimeBars.has-active-bars[data-range="today"],
  #realtimeBars[data-range="today"]{
    padding-left:62px!important;
    padding-right:16px!important;
    scroll-padding-left:0!important;
  }
  #realtimeBars::before,
  #realtimeBars.has-active-bars[data-range="today"]::before,
  #realtimeBars[data-range="today"]::before{
    left:62px!important;
    right:16px!important;
  }
  #realtimeBars .realtime-chart-toolbar{
    left:62px!important;
    right:16px!important;
  }
  #realtimeBars .realtime-legend{
    max-width:calc(100% - 94px)!important;
    padding-left:0!important;
  }
  #realtimeBars .realtime-scale{
    display:flex!important;
    position:absolute!important;
    z-index:3!important;
    left:24px!important;
    top:82px!important;
    bottom:56px!important;
    width:30px!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    align-items:flex-end!important;
    color:rgba(203,213,225,.72)!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1!important;
    pointer-events:none!important;
  }
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
  #realtimeBars[data-range="today"] .realtime-bars-track{
    padding-left:0!important;
    margin-left:0!important;
  }
  #realtimeBars .realtime-summary,
  #realtimeBars[data-focused="true"] .realtime-summary,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #realtimeBars[data-range="today"] .realtime-summary{
    left:62px!important;
    right:16px!important;
  }
}

/* Mobile realtime visible axis labels 20260724 */
@media (max-width:720px){
  #realtimeBars,
  #realtimeBars.has-active-bars[data-range="today"],
  #realtimeBars[data-range="today"]{
    padding-left:76px!important;
  }
  #realtimeBars::before,
  #realtimeBars.has-active-bars[data-range="today"]::before,
  #realtimeBars[data-range="today"]::before{
    left:76px!important;
  }
  #realtimeBars .realtime-chart-toolbar{
    left:76px!important;
  }
  #realtimeBars .realtime-legend{
    max-width:calc(100% - 84px)!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  #realtimeBars .realtime-legend-item{
    font-size:9px!important;
    gap:4px!important;
    min-width:0!important;
  }
  #realtimeBars .realtime-legend-item i{
    width:6px!important;
    height:6px!important;
    flex:0 0 6px!important;
  }
  #realtimeBars .realtime-store-filter{
    min-width:74px!important;
    height:32px!important;
    padding:0 10px!important;
    font-size:10px!important;
  }
  #realtimeBars .realtime-scale{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:30!important;
    left:16px!important;
    top:86px!important;
    bottom:56px!important;
    width:48px!important;
    align-items:flex-end!important;
    color:#dbeafe!important;
    text-shadow:0 2px 8px rgba(0,0,0,.65),0 0 12px rgba(56,189,248,.28)!important;
  }
  #realtimeBars .realtime-scale span{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    min-width:28px!important;
    text-align:right!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  #realtimeBars .realtime-bars-track,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
  #realtimeBars[data-range="today"] .realtime-bars-track{
    padding-left:0!important;
  }
  #realtimeBars .realtime-summary,
  #realtimeBars[data-focused="true"] .realtime-summary,
  #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #realtimeBars[data-range="today"] .realtime-summary{
    left:76px!important;
  }
}

/* JS-backed fixed realtime axis for mobile 20260724 */
@media (max-width:720px){
  #realtimeBars .realtime-axis-fixed{
    position:absolute!important;
    z-index:60!important;
    left:16px!important;
    top:86px!important;
    bottom:56px!important;
    width:46px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    align-items:flex-end!important;
    pointer-events:none!important;
  }
  #realtimeBars .realtime-axis-fixed span{
    display:block!important;
    min-width:28px!important;
    text-align:right!important;
    color:#eaf2ff!important;
    font-size:11px!important;
    font-weight:950!important;
    line-height:1!important;
    text-shadow:0 2px 8px rgba(0,0,0,.72),0 0 14px rgba(59,130,246,.36)!important;
  }
  #realtimeBars .realtime-scale{
    display:none!important;
  }
  #realtimeBars .realtime-legend{
    max-width:calc(100% - 68px)!important;
    gap:5px!important;
  }
  #realtimeBars .realtime-legend-item{
    font-size:8px!important;
    gap:3px!important;
  }
  #realtimeBars .realtime-store-filter{
    min-width:62px!important;
    height:31px!important;
    padding:0 8px!important;
    font-size:9px!important;
  }
}

/* Mobile chat room fullscreen/composer fix 20260723 */
@media (max-width:768px){
  body.mobile-chat-room-focused{
    overflow:hidden!important;
    background:#050816!important;
  }
  body.mobile-chat-room-focused #mainApp,
  body.mobile-chat-room-focused .app-shell{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  body.mobile-chat-room-focused .app-shell{
    grid-template-rows:1fr 0!important;
  }
  body.mobile-chat-room-focused .main-area{
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.mobile-chat-room-focused .topbar{
    flex:0 0 62px!important;
    min-height:62px!important;
    padding:9px 16px 8px!important;
  }
  body.mobile-chat-room-focused .topbar-actions{
    display:none!important;
  }
  body.mobile-chat-room-focused #chatPage.active{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open,
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-search-first.mobile-chat-room-open{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    position:relative!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open .chat-room-wrap,
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-search-first.mobile-chat-room-open .chat-room-wrap{
    top:0!important;
    bottom:0!important;
    height:100%!important;
    min-height:0!important;
    padding-bottom:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #chatHeader{
    flex:0 0 auto!important;
    min-height:70px!important;
    padding:10px 14px!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #messages{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:16px 14px 8px!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #replyBox,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    flex:0 0 auto!important;
    margin:0 8px max(8px,env(safe-area-inset-bottom,0px))!important;
    padding:6px!important;
    min-height:48px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:5px!important;
    border-radius:21px!important;
    z-index:80!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #selectedReplyBar{
    flex:1 0 100%!important;
    order:-1!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #stickerBtn,
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #imgBtn,
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #quickBtn{
    flex:0 0 30px!important;
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    order:0!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn{
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    height:30px!important;
    order:0!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #replyInput,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyInput{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    order:0!important;
    height:34px!important;
    min-height:34px!important;
    max-height:72px!important;
    padding:7px 11px!important;
    font-size:13px!important;
  }
  body.mobile-chat-room-focused #chatPage .chat-shell.mobile-chat-room-open #sendBtn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    height:34px!important;
    order:0!important;
  }
  body.mobile-chat-room-focused .bottom-nav{
    transform:translateY(120%)!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}

/* iOS keyboard no-zoom fix 20260723 */
@media (max-width:768px){
  #chatPage .chat-shell.mobile-chat-room-open #replyInput,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyInput{
    font-size:16px!important;
    line-height:1.35!important;
    min-height:36px!important;
    height:36px!important;
    padding:7px 12px!important;
  }
  #chatPage input,
  #chatPage textarea,
  #chatPage select{
    font-size:16px!important;
  }
}

/* Mobile keyboard composer readability 20260723 */
@media (max-width:768px){
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyBox{
    gap:7px!important;
    padding:7px!important;
    align-items:flex-end!important;
  }
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #stickerBtn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #imgBtn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #quickBtn,
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #flexSendBtn{
    display:none!important;
  }
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #replyInput{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:42px!important;
    max-height:112px!important;
    padding:10px 14px!important;
    border-radius:18px!important;
    font-size:16px!important;
    line-height:1.42!important;
    white-space:pre-wrap!important;
    overflow-y:auto!important;
  }
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #sendBtn{
    flex:0 0 48px!important;
    width:48px!important;
    min-width:48px!important;
    height:42px!important;
    min-height:42px!important;
    border-radius:999px!important;
  }
  body.mobile-chat-keyboard-open #chatPage .chat-shell.mobile-chat-room-open #messages{
    padding-bottom:8px!important;
  }
}

/* Dashboard balanced density 20260724-1945
   Scoped density pass for Dashboard only. Keep JS/backend untouched. */
#dashboardPage{
  padding:18px 20px 28px!important;
}
#dashboardPage .report-cycle-text{
  margin-bottom:10px!important;
  padding:6px 12px!important;
  font-size:12px!important;
}
#dashboardPage .stats-grid{
  gap:12px!important;
  margin-bottom:14px!important;
}
#dashboardPage .stat-card{
  min-height:104px!important;
  padding:14px 16px!important;
  border-radius:18px!important;
}
#dashboardPage .stat-label{
  font-size:12px!important;
  line-height:1.25!important;
}
#dashboardPage .stat-value{
  margin-top:8px!important;
  font-size:29px!important;
  line-height:1!important;
}
#dashboardPage .stat-card small,
#dashboardPage .stat-card .muted{
  font-size:11px!important;
  line-height:1.3!important;
}
#dashboardPage .dashboard-grid{
  grid-template-columns:minmax(0,1.45fr) minmax(310px,.82fr)!important;
  gap:14px!important;
}
#dashboardPage .panel{
  padding:16px!important;
  border-radius:20px!important;
}
#dashboardPage .panel-head,
#dashboardPage .ranking-panel-head{
  margin-bottom:11px!important;
  gap:10px!important;
}
#dashboardPage .panel-head h3,
#dashboardPage .ranking-panel-head h3{
  font-size:15px!important;
  line-height:1.2!important;
}
#dashboardPage .panel-head p,
#dashboardPage .ranking-panel-head p{
  font-size:11px!important;
  line-height:1.25!important;
}
#dashboardPage .summary-card{
  margin-bottom:14px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
}
#dashboardPage .summary-row{
  min-height:28px!important;
  gap:10px!important;
}
#realtimeBars{
  height:188px!important;
  margin-top:4px!important;
  padding:34px 12px 30px!important;
  border-radius:16px!important;
  gap:6px!important;
}
#realtimeBars .realtime-summary{
  top:8px!important;
  left:12px!important;
  right:12px!important;
}
#realtimeBars .realtime-summary strong{
  font-size:19px!important;
}
#realtimeBars .bar-count{
  font-size:9px!important;
  min-height:14px!important;
  padding:1px 5px!important;
}
#realtimeBars span{
  font-size:8px!important;
}
#dashboardPage .store-count-list{
  gap:8px!important;
}
#dashboardPage .store-count-row{
  grid-template-columns:minmax(108px,1fr) minmax(82px,.9fr) 44px!important;
  gap:8px!important;
  min-height:42px!important;
  padding:6px 0!important;
}
#dashboardPage .store-count-brand{
  gap:8px!important;
}
#dashboardPage .store-count-icon{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  border-radius:10px!important;
  font-size:11px!important;
}
#dashboardPage .store-count-name{
  font-size:11px!important;
  line-height:1.1!important;
}
#dashboardPage .store-count-sub{
  font-size:8px!important;
  line-height:1.1!important;
}
#dashboardPage .store-count-track{
  height:6px!important;
}
#dashboardPage .store-count-value{
  min-width:40px!important;
  max-width:40px!important;
  font-size:11px!important;
}
#dashboardPage .store-count-value strong{
  font-size:15px!important;
}
#dashboardPage .store-count-value span{
  font-size:7px!important;
}
#dashboardPage #dashStoreBars{
  height:54px!important;
}
#dashboardPage #rankingList.ranking-list{
  max-height:340px!important;
}
@media (max-width:1280px){
  #dashboardPage{padding:16px 16px 26px!important;}
  #dashboardPage .stats-grid{gap:10px!important;}
  #dashboardPage .stat-card{min-height:96px!important;padding:12px 14px!important;}
  #dashboardPage .stat-value{font-size:26px!important;}
  #dashboardPage .dashboard-grid{grid-template-columns:minmax(0,1.32fr) minmax(292px,.88fr)!important;gap:12px!important;}
  #dashboardPage .panel{padding:14px!important;border-radius:18px!important;}
  #realtimeBars{height:176px!important;}
  #dashboardPage .store-count-row{grid-template-columns:minmax(96px,1fr) minmax(68px,.8fr) 38px!important;gap:7px!important;}
}
@media (max-width:980px){
  #dashboardPage .dashboard-grid{grid-template-columns:1fr!important;}
}
@media (max-width:640px){
  #dashboardPage{padding:14px 10px 24px!important;}
  #dashboardPage .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #dashboardPage .stat-card{min-height:90px!important;}
  #dashboardPage .stat-value{font-size:24px!important;}
  #dashboardPage .panel{padding:12px!important;border-radius:16px!important;}
}

/* Dashboard realtime summary bottom polish 20260724-1952 */
#dashboardPage #realtimeBars{
  padding:34px 12px 52px!important;
}
#dashboardPage #realtimeBars .realtime-summary,
#dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
  top:auto!important;
  bottom:12px!important;
  left:16px!important;
  right:16px!important;
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:6px 10px!important;
  border-radius:13px!important;
  background:rgba(2,8,23,.56)!important;
  border:1px solid rgba(148,163,184,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(10px)!important;
}
#dashboardPage #realtimeBars .realtime-summary strong,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary strong{
  flex:0 0 auto!important;
  font-size:22px!important;
  line-height:1!important;
  letter-spacing:0!important;
}
#dashboardPage #realtimeBars .realtime-summary span,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary span,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary span{
  flex:0 1 auto!important;
  min-width:0!important;
  font-size:11px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#dashboardPage #realtimeBars .realtime-summary small,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary small,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary small{
  margin-left:auto!important;
  max-width:44%!important;
  min-width:0!important;
  font-size:11px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media (max-width:720px){
  #dashboardPage #realtimeBars{
    padding-bottom:58px!important;
  }
  #dashboardPage #realtimeBars .realtime-summary,
  #dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
    left:14px!important;
    right:14px!important;
    bottom:12px!important;
  }
}

/* Dashboard realtime summary slim footer 20260724-1956 */
#dashboardPage #realtimeBars{
  padding:34px 12px 34px!important;
}
#dashboardPage #realtimeBars .realtime-summary,
#dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
  top:auto!important;
  bottom:7px!important;
  left:26px!important;
  right:26px!important;
  min-height:24px!important;
  display:flex!important;
  align-items:baseline!important;
  gap:7px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#dashboardPage #realtimeBars .realtime-summary strong,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary strong{
  flex:0 0 auto!important;
  font-size:24px!important;
  line-height:1!important;
  color:#f8fafc!important;
  text-shadow:0 10px 22px rgba(0,0,0,.32)!important;
}
#dashboardPage #realtimeBars .realtime-summary span,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary span,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary span{
  flex:0 1 auto!important;
  min-width:0!important;
  font-size:11px!important;
  line-height:1.1!important;
  color:rgba(226,232,240,.72)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#dashboardPage #realtimeBars .realtime-summary small,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary small,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary small{
  margin-left:auto!important;
  max-width:44%!important;
  min-width:0!important;
  font-size:11px!important;
  line-height:1.1!important;
  color:rgba(203,213,225,.72)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media (max-width:720px){
  #dashboardPage #realtimeBars{
    padding-bottom:42px!important;
  }
  #dashboardPage #realtimeBars .realtime-summary,
  #dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
    left:14px!important;
    right:14px!important;
    bottom:8px!important;
  }
  #dashboardPage #realtimeBars .realtime-summary strong,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-summary strong{
    font-size:21px!important;
  }
}

/* Dashboard realtime summary compact badge 20260724-1959 */
#dashboardPage #realtimeBars{
  padding:62px 12px 30px!important;
}
#dashboardPage #realtimeBars .realtime-summary,
#dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
  top:42px!important;
  bottom:auto!important;
  left:76px!important;
  right:auto!important;
  width:auto!important;
  max-width:calc(100% - 190px)!important;
  min-height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  background:rgba(2,8,23,.50)!important;
  border:1px solid rgba(148,163,184,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(10px)!important;
  overflow:hidden!important;
}
#dashboardPage #realtimeBars .realtime-summary strong,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary strong{
  flex:0 0 auto!important;
  font-size:18px!important;
  line-height:1!important;
  color:#f8fafc!important;
}
#dashboardPage #realtimeBars .realtime-summary span,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary span,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary span{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:150px!important;
  font-size:10px!important;
  line-height:1!important;
  color:rgba(226,232,240,.70)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#dashboardPage #realtimeBars .realtime-summary small,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary small,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary small{
  display:none!important;
}
@media (max-width:720px){
  #dashboardPage #realtimeBars{
    padding-top:74px!important;
    padding-bottom:34px!important;
  }
  #dashboardPage #realtimeBars .realtime-summary,
  #dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
    top:46px!important;
    left:14px!important;
    max-width:calc(100% - 112px)!important;
  }
}

/* Dashboard realtime summary placed below time axis 20260724-2002 */
#dashboardPage #realtimeBars{
  padding:62px 12px 64px!important;
}
#dashboardPage #realtimeBars .realtime-summary,
#dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
  top:auto!important;
  bottom:12px!important;
  left:76px!important;
  right:auto!important;
  width:auto!important;
  max-width:calc(100% - 170px)!important;
  min-height:26px!important;
  display:inline-flex!important;
  align-items:baseline!important;
  gap:8px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow:hidden!important;
}
#dashboardPage #realtimeBars .realtime-summary strong,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary strong{
  flex:0 0 auto!important;
  font-size:24px!important;
  line-height:1!important;
  color:#f8fafc!important;
  text-shadow:0 8px 20px rgba(0,0,0,.34)!important;
}
#dashboardPage #realtimeBars .realtime-summary span,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary span,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary span{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:180px!important;
  font-size:11px!important;
  line-height:1.05!important;
  color:rgba(226,232,240,.68)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#dashboardPage #realtimeBars .realtime-summary small,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary small,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary small{
  display:none!important;
}
@media (max-width:720px){
  #dashboardPage #realtimeBars{
    padding-top:74px!important;
    padding-bottom:58px!important;
  }
  #dashboardPage #realtimeBars .realtime-summary,
  #dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
    left:14px!important;
    bottom:10px!important;
    max-width:calc(100% - 28px)!important;
  }
  #dashboardPage #realtimeBars .realtime-summary strong,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-summary strong{
    font-size:21px!important;
  }
}

/* Dashboard realtime slender bars 20260724-2005 */
#dashboardPage #realtimeBars .bar-col,
#dashboardPage #realtimeBars .bar-col.is-zero,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-col,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero,
#dashboardPage #realtimeBars[data-range="today"] .bar-col,
#dashboardPage #realtimeBars[data-range="today"] .bar-col.is-zero{
  gap:5px!important;
}
#dashboardPage #realtimeBars .bar,
#dashboardPage #realtimeBars[data-focused="true"] .bar,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar,
#dashboardPage #realtimeBars[data-range="today"] .bar{
  width:7px!important;
  min-width:7px!important;
  max-width:7px!important;
  min-height:6px!important;
  max-height:88%!important;
  border-radius:8px 8px 4px 4px!important;
  box-shadow:0 8px 18px rgba(0,0,0,.22),0 0 14px rgba(47,140,255,.12),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
#dashboardPage #realtimeBars .bar-segment,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-segment{
  min-height:4px!important;
}
#dashboardPage #realtimeBars .bar i{
  left:1px!important;
  right:1px!important;
  top:3px!important;
  height:26%!important;
}
#dashboardPage #realtimeBars .bar-col:hover .bar{
  transform:translateY(-2px)!important;
}
#dashboardPage #realtimeBars .bar-count,
#dashboardPage #realtimeBars .bar-count.zero,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-count,
#dashboardPage #realtimeBars[data-range="today"] .bar-count{
  font-size:10px!important;
  min-height:13px!important;
  line-height:1!important;
}
#dashboardPage #realtimeBars .bar-col > span,
#dashboardPage #realtimeBars span.muted-hour,
#dashboardPage #realtimeBars[data-range="today"] .bar-col span,
#dashboardPage #realtimeBars[data-range="today"] .bar-col:nth-child(3n+1) span{
  font-size:9px!important;
}

/* Dashboard realtime 24h axis fit 20260724-2008 */
#dashboardPage #realtimeBars .realtime-axis-fixed{
  display:none!important;
}
#dashboardPage #realtimeBars,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"],
#dashboardPage #realtimeBars[data-range="today"]{
  overflow-x:hidden!important;
  overflow-y:visible!important;
}
#dashboardPage #realtimeBars .realtime-bars-track,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
#dashboardPage #realtimeBars[data-range="today"] .realtime-bars-track{
  display:grid!important;
  grid-template-columns:repeat(24,minmax(0,1fr))!important;
  grid-auto-flow:column!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  gap:4px!important;
  padding:0 2px!important;
  margin:0!important;
}
#dashboardPage #realtimeBars .bar-col,
#dashboardPage #realtimeBars .bar-col.is-zero,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-col,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero,
#dashboardPage #realtimeBars[data-range="today"] .bar-col,
#dashboardPage #realtimeBars[data-range="today"] .bar-col.is-zero{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}
#dashboardPage #realtimeBars .bar-col > span,
#dashboardPage #realtimeBars span.muted-hour,
#dashboardPage #realtimeBars[data-range="today"] .bar-col span,
#dashboardPage #realtimeBars[data-range="today"] .bar-col:nth-child(3n+1) span{
  display:block!important;
  width:100%!important;
  font-size:8px!important;
  text-align:center!important;
  letter-spacing:0!important;
  transform:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
@media (max-width:720px){
  #dashboardPage #realtimeBars .realtime-bars-track,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-bars-track{
    gap:2px!important;
    padding:0!important;
  }
  #dashboardPage #realtimeBars .bar,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar,
  #dashboardPage #realtimeBars[data-range="today"] .bar{
    width:5px!important;
    min-width:5px!important;
    max-width:5px!important;
  }
  #dashboardPage #realtimeBars .bar-col > span,
  #dashboardPage #realtimeBars span.muted-hour,
  #dashboardPage #realtimeBars[data-range="today"] .bar-col span,
  #dashboardPage #realtimeBars[data-range="today"] .bar-col:nth-child(3n+1) span{
    font-size:7px!important;
  }
  #dashboardPage #realtimeBars .realtime-axis-fixed{
    display:flex!important;
  }
}


/* Dashboard realtime tighter spacing dashboard-realtime-bars-tight-20260724-2044
   Keep the 24-hour axis visible, but make columns feel less scattered. */
#dashboardPage #realtimeBars .realtime-bars-track,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
#dashboardPage #realtimeBars[data-range="today"] .realtime-bars-track{
  gap:2px!important;
  padding:0 6px!important;
}
#dashboardPage #realtimeBars .bar,
#dashboardPage #realtimeBars[data-focused="true"] .bar,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero .bar,
#dashboardPage #realtimeBars[data-range="today"] .bar{
  width:8px!important;
  min-width:8px!important;
  max-width:8px!important;
}
#dashboardPage #realtimeBars .bar-col,
#dashboardPage #realtimeBars .bar-col.is-zero,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-col,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar-col.is-zero,
#dashboardPage #realtimeBars[data-range="today"] .bar-col,
#dashboardPage #realtimeBars[data-range="today"] .bar-col.is-zero{
  gap:4px!important;
}
@media (max-width:720px){
  #dashboardPage #realtimeBars .realtime-bars-track,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-bars-track{
    gap:1px!important;
    padding:0 2px!important;
  }
  #dashboardPage #realtimeBars .bar,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .bar,
  #dashboardPage #realtimeBars[data-range="today"] .bar{
    width:6px!important;
    min-width:6px!important;
    max-width:6px!important;
  }
}


/* Dashboard realtime summary polish dashboard-realtime-summary-polish-20260724-2109
   Keep the total below the axis, but make it lighter and aligned with the plot. */
#dashboardPage #realtimeBars,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"],
#dashboardPage #realtimeBars[data-range="today"]{
  padding-bottom:58px!important;
}
#dashboardPage #realtimeBars .realtime-summary,
#dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
  left:76px!important;
  right:auto!important;
  bottom:8px!important;
  min-height:28px!important;
  display:inline-flex!important;
  align-items:baseline!important;
  gap:9px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#dashboardPage #realtimeBars .realtime-summary strong,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary strong{
  font-size:23px!important;
  line-height:1!important;
  letter-spacing:0!important;
  color:#f8fafc!important;
  text-shadow:0 8px 18px rgba(0,0,0,.28)!important;
}
#dashboardPage #realtimeBars .realtime-summary span,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary span,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary span{
  font-size:10.5px!important;
  line-height:1!important;
  color:rgba(226,232,240,.66)!important;
  white-space:nowrap!important;
}
#dashboardPage #realtimeBars .realtime-summary small,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary small,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary small{
  display:none!important;
}
@media (max-width:720px){
  #dashboardPage #realtimeBars,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"],
  #dashboardPage #realtimeBars[data-range="today"]{
    padding-bottom:52px!important;
  }
  #dashboardPage #realtimeBars .realtime-summary,
  #dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
    left:18px!important;
    bottom:8px!important;
    gap:7px!important;
  }
  #dashboardPage #realtimeBars .realtime-summary strong,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary strong,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-summary strong{
    font-size:20px!important;
  }
}


/* Dashboard realtime axis gutter dashboard-realtime-axis-gutter-20260724-2114
   Reserve a clean left gutter so Y-axis labels do not overlap the first hours. */
#dashboardPage #realtimeBars .realtime-bars-track,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
#dashboardPage #realtimeBars[data-range="today"] .realtime-bars-track{
  padding-left:58px!important;
  padding-right:8px!important;
}
#dashboardPage #realtimeBars .realtime-scale{
  z-index:3!important;
  pointer-events:none!important;
}
#dashboardPage #realtimeBars .bar-col:first-child .bar-count,
#dashboardPage #realtimeBars .bar-col:first-child > span{
  transform:none!important;
}
@media (max-width:720px){
  #dashboardPage #realtimeBars .realtime-bars-track,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-bars-track{
    padding-left:34px!important;
    padding-right:2px!important;
  }
}


/* Dashboard realtime full-frame balance dashboard-realtime-full-frame-20260724-2128
   Reduce the left gutter after the axis fix so bars fill the chart frame cleanly. */
#dashboardPage #realtimeBars .realtime-bars-track,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
#dashboardPage #realtimeBars[data-range="today"] .realtime-bars-track{
  padding-left:34px!important;
  padding-right:0!important;
  gap:2px!important;
}
#dashboardPage #realtimeBars::before{
  left:54px!important;
  right:18px!important;
}
#dashboardPage #realtimeBars .realtime-summary,
#dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
#dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
#dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
  left:62px!important;
}
@media (max-width:720px){
  #dashboardPage #realtimeBars .realtime-bars-track,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-bars-track,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-bars-track{
    padding-left:28px!important;
    padding-right:0!important;
    gap:1px!important;
  }
  #dashboardPage #realtimeBars::before{
    left:38px!important;
    right:12px!important;
  }
  #dashboardPage #realtimeBars .realtime-summary,
  #dashboardPage #realtimeBars[data-focused="true"] .realtime-summary,
  #dashboardPage #realtimeBars.has-active-bars[data-range="today"] .realtime-summary,
  #dashboardPage #realtimeBars[data-range="today"] .realtime-summary{
    left:42px!important;
  }
}


/* Dashboard Admin Ranking real-screen fit 20260724-2228
   Keep the current visual style, only make the 8-column table fit inside
   the user's real dashboard viewport with an internal scrollbar present. */
#dashboardPage .ranking-table-head,
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  grid-template-columns:46px minmax(190px,1fr) 76px 54px 54px 70px 82px 112px!important;
  gap:8px!important;
}
#dashboardPage #rankingList.ranking-list,
#dashboardPage #rankingList.premium-leaderboard{
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:10px!important;
  scrollbar-gutter:stable!important;
}
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  padding:9px 10px!important;
  min-width:0!important;
}
#dashboardPage #rankingList .rank-admin{min-width:0!important;gap:10px!important;}
#dashboardPage #rankingList .rank-avatar{width:40px!important;height:40px!important;min-width:40px!important;}
#dashboardPage #rankingList .rank-name-line strong{max-width:150px!important;font-size:14px!important;}
#dashboardPage #rankingList .rank-subtitle{max-width:168px!important;font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;}
#dashboardPage #rankingList .rank-score{width:76px!important;max-width:76px!important;justify-self:start!important;}
#dashboardPage #rankingList .rank-score span{font-size:20px!important;max-width:76px!important;}
#dashboardPage #rankingList .rank-first .rank-score span{font-size:22px!important;}
#dashboardPage #rankingList .rank-stat strong{font-size:14px!important;}
#dashboardPage #rankingList .rank-rating{gap:4px!important;}
#dashboardPage #rankingList .rank-rating span{font-size:13px!important;width:13px!important;max-width:13px!important;}
#dashboardPage #rankingList .rank-rating b{font-size:12px!important;}
#dashboardPage #rankingList .rank-performance{min-height:25px!important;padding:0 8px!important;font-size:9px!important;white-space:nowrap!important;}
#dashboardPage #rankingList .rank-result{width:112px!important;max-width:112px!important;gap:6px!important;justify-self:stretch!important;overflow:visible!important;}
#dashboardPage #rankingList .rank-progress{flex:1 1 68px!important;min-width:48px!important;max-width:72px!important;height:7px!important;}
#dashboardPage #rankingList .rank-result b{min-width:28px!important;font-size:10px!important;text-align:right!important;}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head,
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{
    grid-template-columns:44px minmax(174px,1fr) 70px 50px 50px 64px 76px 104px!important;
    gap:7px!important;
  }
  #dashboardPage #rankingList .rank-name-line strong{max-width:132px!important;}
  #dashboardPage #rankingList .rank-subtitle{max-width:148px!important;}
  #dashboardPage #rankingList .rank-score{width:70px!important;max-width:70px!important;}
  #dashboardPage #rankingList .rank-score span{font-size:18px!important;max-width:70px!important;}
  #dashboardPage #rankingList .rank-first .rank-score span{font-size:20px!important;}
  #dashboardPage #rankingList .rank-result{width:104px!important;max-width:104px!important;}
  #dashboardPage #rankingList .rank-progress{max-width:64px!important;}
}

/* Dashboard Admin Ranking typography trim 20260725-1755
   Make the dense ranking table feel lighter without changing the data layout. */
#dashboardPage .admin-ranking-panel,
#dashboardPage .panel:has(#rankingList){
  padding:16px 16px 18px!important;
}
#dashboardPage .admin-ranking-title h3{
  font-size:18px!important;
  letter-spacing:0!important;
}
#dashboardPage .admin-ranking-title p{
  font-size:11px!important;
  margin-top:5px!important;
}
#dashboardPage .ranking-refresh-btn{
  height:32px!important;
  padding:0 12px!important;
  font-size:11px!important;
  border-radius:10px!important;
}
#dashboardPage .ranking-table-head,
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  grid-template-columns:42px minmax(178px,1fr) 66px 48px 48px 62px 72px 96px!important;
  gap:7px!important;
}
#dashboardPage .ranking-table-head{
  padding:0 12px 8px!important;
  font-size:10px!important;
  font-weight:700!important;
}
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  min-height:56px!important;
  padding:8px 10px!important;
}
#dashboardPage #rankingList .rank-medal,
#dashboardPage #rankingList .rank-badge,
#dashboardPage #rankingList .rank-first .rank-badge{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:11px!important;
  font-size:15px!important;
}
#dashboardPage #rankingList .rank-badge{border-radius:50%!important;}
#dashboardPage #rankingList .rank-badge span{font-size:12px!important;}
#dashboardPage #rankingList .rank-avatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  font-size:13px!important;
  border-width:1px!important;
}
#dashboardPage #rankingList .rank-admin{gap:9px!important;}
#dashboardPage #rankingList .rank-main{gap:3px!important;}
#dashboardPage #rankingList .rank-name-line{gap:5px!important;}
#dashboardPage #rankingList .rank-name-line strong{
  max-width:138px!important;
  font-size:12.5px!important;
  line-height:1.14!important;
  font-weight:800!important;
}
#dashboardPage #rankingList .rank-crown{
  padding:2px 6px!important;
  font-size:8px!important;
}
#dashboardPage #rankingList .rank-subtitle{
  max-width:154px!important;
  font-size:9px!important;
  line-height:1.15!important;
  gap:4px!important;
}
#dashboardPage #rankingList .rank-score,
#dashboardPage #rankingList .rank-first .rank-score{
  width:66px!important;
  max-width:66px!important;
}
#dashboardPage #rankingList .rank-item > .rank-score span,
#dashboardPage #rankingList .rank-first > .rank-score span,
#dashboardPage #rankingList .rank-second > .rank-score span,
#dashboardPage #rankingList .rank-third > .rank-score span{
  max-width:66px!important;
  font-size:17px!important;
  font-weight:750!important;
}
#dashboardPage #rankingList .rank-first > .rank-score span{
  font-size:18px!important;
}
#dashboardPage #rankingList .rank-item:nth-child(n+6) > .rank-score span{
  font-size:15px!important;
}
#dashboardPage #rankingList .rank-stat strong{
  font-size:12.5px!important;
  font-weight:750!important;
}
#dashboardPage #rankingList .rank-rating{
  gap:3px!important;
}
#dashboardPage #rankingList .rank-rating span{
  width:11px!important;
  max-width:11px!important;
  font-size:11px!important;
}
#dashboardPage #rankingList .rank-rating b{
  font-size:10.5px!important;
  font-weight:750!important;
}
#dashboardPage #rankingList .rank-performance{
  min-height:22px!important;
  padding:0 7px!important;
  border-radius:7px!important;
  font-size:8px!important;
  font-weight:800!important;
}
#dashboardPage #rankingList .rank-result{
  width:96px!important;
  max-width:96px!important;
  gap:5px!important;
}
#dashboardPage #rankingList .rank-progress{
  min-width:38px!important;
  max-width:60px!important;
  height:6px!important;
}
#dashboardPage #rankingList .rank-result b{
  min-width:26px!important;
  font-size:9px!important;
}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head,
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{
    grid-template-columns:40px minmax(160px,1fr) 60px 44px 44px 56px 66px 86px!important;
    gap:6px!important;
  }
  #dashboardPage #rankingList .rank-name-line strong{max-width:118px!important;font-size:12px!important;}
  #dashboardPage #rankingList .rank-subtitle{max-width:132px!important;font-size:8.5px!important;}
  #dashboardPage #rankingList .rank-score,
  #dashboardPage #rankingList .rank-first .rank-score{width:60px!important;max-width:60px!important;}
  #dashboardPage #rankingList .rank-item > .rank-score span{font-size:16px!important;max-width:60px!important;}
  #dashboardPage #rankingList .rank-first > .rank-score span{font-size:17px!important;}
  #dashboardPage #rankingList .rank-result{width:86px!important;max-width:86px!important;}
  #dashboardPage #rankingList .rank-progress{max-width:52px!important;}
}

/* Dashboard Admin Ranking column trim 20260725-1806
   Compact the rating and response-speed columns that were still visually too wide. */
#dashboardPage .ranking-table-head,
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  grid-template-columns:40px minmax(184px,1fr) 60px 42px 42px 46px 52px 82px!important;
  gap:6px!important;
}
#dashboardPage .ranking-table-head{
  font-size:9.5px!important;
  padding-left:10px!important;
  padding-right:10px!important;
}
#dashboardPage .ranking-table-head span:nth-child(6),
#dashboardPage .ranking-table-head span:nth-child(7){
  justify-self:center!important;
  text-align:center!important;
}
#dashboardPage #rankingList .rank-rating,
#dashboardPage #rankingList .rank-speed{
  justify-self:center!important;
  justify-content:center!important;
}
#dashboardPage #rankingList .rank-rating{
  gap:2px!important;
}
#dashboardPage #rankingList .rank-rating span{
  width:10px!important;
  max-width:10px!important;
  font-size:10px!important;
}
#dashboardPage #rankingList .rank-rating b{
  font-size:9.5px!important;
}
#dashboardPage #rankingList .rank-performance{
  min-height:20px!important;
  padding:0 6px!important;
  border-radius:6px!important;
  font-size:7.5px!important;
}
#dashboardPage #rankingList .rank-result{
  width:82px!important;
  max-width:82px!important;
  gap:4px!important;
}
#dashboardPage #rankingList .rank-progress{
  min-width:32px!important;
  max-width:48px!important;
  height:5px!important;
}
#dashboardPage #rankingList .rank-result b{
  min-width:24px!important;
  font-size:8.5px!important;
}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head,
  #dashboardPage #rankingList .rank-item,
  #dashboardPage #rankingList .rank-first,
  #dashboardPage #rankingList .rank-second,
  #dashboardPage #rankingList .rank-third{
    grid-template-columns:38px minmax(168px,1fr) 56px 40px 40px 42px 48px 76px!important;
    gap:5px!important;
  }
  #dashboardPage #rankingList .rank-performance{font-size:7px!important;padding:0 5px!important;}
  #dashboardPage #rankingList .rank-result{width:76px!important;max-width:76px!important;}
  #dashboardPage #rankingList .rank-progress{max-width:42px!important;}
}

/* Dashboard Admin Ranking header/body alignment 20260725-1812
   Keep every visible row cell on the same grid axis as its header. */
#dashboardPage .admin-ranking-panel,
#dashboardPage .panel:has(#rankingList){
  --ranking-cols-aligned:42px minmax(184px,1fr) 64px 46px 46px 58px 62px 86px;
  --ranking-gap-aligned:6px;
  --ranking-pad-x-aligned:12px;
}
#dashboardPage .ranking-table-head,
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  grid-template-columns:var(--ranking-cols-aligned)!important;
  gap:var(--ranking-gap-aligned)!important;
  column-gap:var(--ranking-gap-aligned)!important;
  box-sizing:border-box!important;
}
#dashboardPage .ranking-table-head{
  padding:0 var(--ranking-pad-x-aligned) 8px!important;
}
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  padding:8px var(--ranking-pad-x-aligned)!important;
  grid-template-areas:"position admin score closed customers rating speed result"!important;
}
#dashboardPage .ranking-table-head span{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;text-align:center!important;justify-self:center!important;}
#dashboardPage .ranking-table-head span:nth-child(2){text-align:left!important;justify-self:start!important;}
#dashboardPage #rankingList .rank-position{grid-area:position!important;justify-self:center!important;}
#dashboardPage #rankingList .rank-admin{grid-area:admin!important;justify-self:stretch!important;}
#dashboardPage #rankingList .rank-score{grid-area:score!important;width:auto!important;max-width:none!important;min-width:0!important;justify-self:center!important;justify-items:center!important;text-align:center!important;}
#dashboardPage #rankingList .rank-closed{grid-area:closed!important;justify-self:center!important;text-align:center!important;}
#dashboardPage #rankingList .rank-customers{grid-area:customers!important;justify-self:center!important;text-align:center!important;}
#dashboardPage #rankingList .rank-rating{grid-area:rating!important;justify-self:center!important;justify-content:center!important;text-align:center!important;min-width:0!important;}
#dashboardPage #rankingList .rank-speed{grid-area:speed!important;justify-self:center!important;justify-content:center!important;text-align:center!important;min-width:0!important;}
#dashboardPage #rankingList .rank-result{grid-area:result!important;width:100%!important;max-width:none!important;justify-self:stretch!important;justify-content:center!important;}
#dashboardPage #rankingList .rank-result b{text-align:right!important;}
@media (max-width:1280px){
  #dashboardPage .admin-ranking-panel,
  #dashboardPage .panel:has(#rankingList){
    --ranking-cols-aligned:38px minmax(168px,1fr) 58px 40px 40px 48px 54px 76px;
    --ranking-gap-aligned:5px;
    --ranking-pad-x-aligned:10px;
  }
  #dashboardPage .ranking-table-head{font-size:9px!important;}
}

/* Dashboard Admin Ranking left-weighted metrics 20260725-1820
   Keep the admin column from swallowing the center gap so scores start closer to names. */
#dashboardPage .admin-ranking-panel,
#dashboardPage .panel:has(#rankingList){
  --ranking-cols-aligned:42px minmax(260px,300px) 64px 46px 46px 58px 62px 86px;
  --ranking-gap-aligned:6px;
  --ranking-pad-x-aligned:12px;
}
#dashboardPage .ranking-table-head,
#dashboardPage #rankingList .rank-item,
#dashboardPage #rankingList .rank-first,
#dashboardPage #rankingList .rank-second,
#dashboardPage #rankingList .rank-third{
  justify-content:start!important;
}
#dashboardPage #rankingList .rank-admin{
  max-width:300px!important;
}
@media (max-width:1280px){
  #dashboardPage .admin-ranking-panel,
  #dashboardPage .panel:has(#rankingList){
    --ranking-cols-aligned:38px minmax(232px,260px) 58px 40px 40px 48px 54px 76px;
    --ranking-gap-aligned:5px;
    --ranking-pad-x-aligned:10px;
  }
  #dashboardPage #rankingList .rank-admin{
    max-width:260px!important;
  }
}

/* Dashboard Admin Ranking header/value left nudge 20260725-1835
   Tighten the admin column further so the highlighted metric header group sits left and cleaner. */
#dashboardPage .admin-ranking-panel,
#dashboardPage .panel:has(#rankingList){
  --ranking-cols-aligned:42px minmax(228px,248px) 64px 46px 46px 58px 62px 86px;
  --ranking-gap-aligned:6px;
  --ranking-pad-x-aligned:12px;
}
#dashboardPage #rankingList .rank-admin{
  max-width:248px!important;
}
#dashboardPage #rankingList .rank-name-line strong{
  max-width:126px!important;
}
#dashboardPage #rankingList .rank-subtitle{
  max-width:148px!important;
}
@media (max-width:1280px){
  #dashboardPage .admin-ranking-panel,
  #dashboardPage .panel:has(#rankingList){
    --ranking-cols-aligned:38px minmax(196px,214px) 58px 40px 40px 48px 54px 76px;
    --ranking-gap-aligned:5px;
    --ranking-pad-x-aligned:10px;
  }
  #dashboardPage #rankingList .rank-admin{
    max-width:214px!important;
  }
  #dashboardPage #rankingList .rank-name-line strong{
    max-width:112px!important;
  }
  #dashboardPage #rankingList .rank-subtitle{
    max-width:126px!important;
  }
}

/* Dashboard Admin Ranking score column alignment 20260725-1840
   Align the คะแนนรวม header with the visual right edge of score numbers. */
#dashboardPage .ranking-table-head span:nth-child(3){
  width:100%!important;
  justify-self:stretch!important;
  text-align:right!important;
  padding-right:6px!important;
}
#dashboardPage #rankingList .rank-score,
#dashboardPage #rankingList .rank-first .rank-score{
  width:100%!important;
  max-width:none!important;
  justify-self:stretch!important;
  justify-items:end!important;
  text-align:right!important;
  padding-right:6px!important;
}
#dashboardPage #rankingList .rank-item > .rank-score span,
#dashboardPage #rankingList .rank-first > .rank-score span,
#dashboardPage #rankingList .rank-second > .rank-score span,
#dashboardPage #rankingList .rank-third > .rank-score span{
  width:100%!important;
  max-width:none!important;
  text-align:right!important;
}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head span:nth-child(3),
  #dashboardPage #rankingList .rank-score,
  #dashboardPage #rankingList .rank-first .rank-score{
    padding-right:4px!important;
  }
}

/* Dashboard Admin Ranking score gap 20260725-1848
   Give the คะแนนรวม column breathing room before ปิดงาน. */
#dashboardPage .ranking-table-head span:nth-child(n+4){
  transform:translateX(12px)!important;
}
#dashboardPage #rankingList .rank-closed,
#dashboardPage #rankingList .rank-customers,
#dashboardPage #rankingList .rank-rating,
#dashboardPage #rankingList .rank-speed,
#dashboardPage #rankingList .rank-result{
  transform:translateX(12px)!important;
}
#dashboardPage .ranking-table-head span:nth-child(3),
#dashboardPage #rankingList .rank-score,
#dashboardPage #rankingList .rank-first .rank-score{
  padding-right:8px!important;
}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head span:nth-child(n+4),
  #dashboardPage #rankingList .rank-closed,
  #dashboardPage #rankingList .rank-customers,
  #dashboardPage #rankingList .rank-rating,
  #dashboardPage #rankingList .rank-speed,
  #dashboardPage #rankingList .rank-result{
    transform:translateX(10px)!important;
  }
  #dashboardPage .ranking-table-head span:nth-child(3),
  #dashboardPage #rankingList .rank-score,
  #dashboardPage #rankingList .rank-first .rank-score{
    padding-right:6px!important;
  }
}

/* Dashboard Admin Ranking score center alignment 20260725-1922
   Center คะแนนรวม so the larger first-row score and normal rows share the same axis. */
#dashboardPage .ranking-table-head span:nth-child(3){
  width:100%!important;
  justify-self:stretch!important;
  text-align:center!important;
  padding-right:0!important;
}
#dashboardPage #rankingList .rank-score,
#dashboardPage #rankingList .rank-first .rank-score,
#dashboardPage #rankingList .rank-second .rank-score,
#dashboardPage #rankingList .rank-third .rank-score{
  width:100%!important;
  max-width:none!important;
  justify-self:stretch!important;
  justify-items:center!important;
  text-align:center!important;
  padding-right:0!important;
}
#dashboardPage #rankingList .rank-item > .rank-score span,
#dashboardPage #rankingList .rank-first > .rank-score span,
#dashboardPage #rankingList .rank-second > .rank-score span,
#dashboardPage #rankingList .rank-third > .rank-score span{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  text-align:center!important;
}
@media (max-width:1280px){
  #dashboardPage .ranking-table-head span:nth-child(3),
  #dashboardPage #rankingList .rank-score,
  #dashboardPage #rankingList .rank-first .rank-score,
  #dashboardPage #rankingList .rank-second .rank-score,
  #dashboardPage #rankingList .rank-third .rank-score{
    padding-right:0!important;
  }
}

/* Dashboard store-count polish 20260725: keep the right count badge quiet and balanced. */
#dashboardPage .store-count-list{
  gap:8px!important;
}
#dashboardPage .store-count-row{
  grid-template-columns:minmax(132px,1.05fr) minmax(108px,1fr) 42px!important;
  gap:10px!important;
  min-height:48px!important;
  padding:8px 10px!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.022))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 18px rgba(0,0,0,.10)!important;
}
#dashboardPage .store-count-row.has-count{
  background:linear-gradient(135deg,rgba(124,156,255,.12),rgba(38,216,255,.055) 52%,rgba(244,197,107,.08))!important;
  border-color:rgba(244,197,107,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 20px rgba(0,0,0,.13)!important;
}
#dashboardPage .store-count-brand{gap:8px!important}
#dashboardPage .store-count-icon{
  width:30px!important;
  height:30px!important;
  border-radius:10px!important;
  font-size:12px!important;
}
#dashboardPage .store-count-name{
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.12!important;
}
#dashboardPage .store-count-sub{
  font-size:9px!important;
  line-height:1.1!important;
}
#dashboardPage .store-count-track{
  height:7px!important;
  align-self:center!important;
  opacity:.88!important;
}
#dashboardPage .store-count-fill{box-shadow:0 0 10px var(--primary-shadow)!important}
#dashboardPage .store-count-value{
  min-width:42px!important;
  width:42px!important;
  padding:5px 0!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#dashboardPage .store-count-value strong{
  font-size:14px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:0!important;
  color:#edf4ff!important;
}
#dashboardPage .store-count-value span{
  margin-top:1px!important;
  font-size:8px!important;
  font-weight:750!important;
  color:#8fa1bf!important;
}
#dashboardPage .store-count-row.has-count .store-count-value{
  background:rgba(247,215,119,.13)!important;
  border-color:rgba(247,215,119,.20)!important;
}
#dashboardPage .store-count-row.has-count .store-count-value strong{color:#f3d276!important}
@media (max-width:900px){
  #dashboardPage .store-count-row{
    grid-template-columns:1fr 42px!important;
    gap:8px!important;
  }
  #dashboardPage .store-count-track{
    grid-column:1 / -1!important;
    order:3!important;
  }
}

/* Chat list header compact polish 20260725: reduce the oversized filter/search stack. */
#chatPage .chat-list-head{
  padding:12px 14px 8px!important;
}
#chatPage .chat-list-head h3{
  font-size:15px!important;
  line-height:1.15!important;
  margin-bottom:9px!important;
}
#chatPage .search-wrap input{
  height:40px!important;
  padding:9px 12px 9px 39px!important;
  border-radius:14px!important;
  font-size:12px!important;
}
#chatPage .search-ico{
  left:10px!important;
  width:24px!important;
  height:24px!important;
  border-radius:9px!important;
}
#chatPage .search-ico::before{
  width:8px!important;
  height:8px!important;
  border-width:2px!important;
}
#chatPage .search-ico::after{
  width:6px!important;
}
#chatPage .filter-bar{
  padding:8px 14px!important;
}
#chatPage #filterDropdownBtn{
  min-height:36px!important;
  height:36px!important;
  padding:0 12px!important;
  border-radius:13px!important;
  font-size:12px!important;
}
#chatPage #oaFilterWrap{
  padding:6px 12px 5px!important;
}
#chatPage #oaFilter{
  gap:5px!important;
  padding:0 1px 4px!important;
}
#chatPage .oa-filter-scope{
  font-size:9px!important;
  padding:0 2px!important;
}
#chatPage .oaFilterBtn,
#chatPage .oa-filter-btn{
  min-height:22px!important;
  max-width:116px!important;
  padding:4px 7px!important;
  border-radius:10px!important;
  font-size:9.5px!important;
  gap:4px!important;
}
#chatPage .oa-filter-dot{
  width:5px!important;
  height:5px!important;
  box-shadow:0 0 0 2px rgba(94,234,212,.12)!important;
}
#chatPage #oaFilterScrollbar{
  height:2px!important;
  margin-top:0!important;
}
#chatPage #chatList{
  padding-top:5px!important;
}

@media (max-width:900px){
  #chatPage .chat-list-head{
    padding:10px 12px 7px!important;
  }
  #chatPage .search-wrap input{
    height:38px!important;
  }
  #chatPage .filter-bar{
    padding:7px 12px!important;
  }
}

/* line-chat-pop-notify-20260817: make fresh customer LINE messages visible even after fast replies */
.chat-item-row.customer-pulse{
  border-left:3px solid #22c55e;
  background:linear-gradient(90deg,rgba(34,197,94,.13),rgba(34,197,94,.035));
}
.customer-pulse-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:18px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(34,197,94,.16);
  color:#86efac;
  border:1px solid rgba(34,197,94,.32);
  font-size:10px;
  line-height:1;
  white-space:nowrap;
}
.customer-pulse-chip span{
  font-size:8px;
  font-weight:800;
  letter-spacing:0;
}
.customer-pulse-chip strong{font-weight:700}
html[data-ui-theme="white"] .chat-item-row.customer-pulse{
  background:linear-gradient(90deg,rgba(22,163,74,.12),rgba(22,163,74,.03));
}
html[data-ui-theme="white"] .customer-pulse-chip{
  background:rgba(22,163,74,.1);
  color:#15803d;
  border-color:rgba(22,163,74,.28);
}