/* ============================================================
   Omnitok Analytics — Design tokens (from Omnitok UI Kit)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900&family=Open+Sans:wght@400;500;600;700&display=swap');

:root{
  /* Brand */
  --sidebar:#211f4b; --sidebar-2:#1a1840;
  --primary:#4D4A9D; --primary-dark:#3a3878; --primary-light:#6663b3;
  --accent:#FF177B; --accent-dark:#d91065; --accent-light:#ff4a96;
  /* Neutrals */
  --white:#fff; --g50:#FAFAFA; --g100:#F5F5F5; --g200:#E5E5E5; --g300:#D4D4D4;
  --g400:#A3A3A3; --g500:#737373; --g600:#525252; --g700:#404040; --g800:#262626; --g900:#171717;
  /* Semantic */
  --success:#22C55E; --success-l:#DCFCE7; --error:#EF4444; --error-l:#FEE2E2;
  --warning:#F59E0B; --warning-l:#FEF3C7; --info:#3B82F6; --info-l:#DBEAFE;
  /* Chart */
  --c1:#4D4A9D; --c2:#FF177B; --c3:#14B8A6; --c4:#F59E0B; --c5:#3B82F6;
  --c6:#FF8042; --c7:#8B5CF6; --c8:#22C55E;
  /* Fonts */
  --font:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Open Sans',monospace;
  /* Layout */
  --sidebar-w:260px; --header-h:64px;
  --radius:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;
  --shadow-card:0 1px 3px 0 rgb(0 0 0/.08),0 1px 2px -1px rgb(0 0 0/.08);
  --shadow-hover:0 6px 16px -4px rgb(33 31 75/.16),0 2px 6px -2px rgb(0 0 0/.08);
  --shadow-pop:0 16px 40px -8px rgb(33 31 75/.24);
  --gradient-brand:linear-gradient(135deg,#4D4A9D 0%,#FF177B 100%);
  --gradient-active:linear-gradient(90deg,#FF177B 0%,#4D4A9D 100%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font);color:var(--g700);background:var(--g100);-webkit-font-smoothing:antialiased;font-optical-sizing:auto;}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.mono{font-family:var(--mono);}
button{font-family:inherit;cursor:pointer;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:99px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--g400);background-clip:content-box;}

/* ---------- App layout ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--sidebar);
  display:flex;flex-direction:column;z-index:100;color:#fff;}
.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh;background:var(--g100);}
.content{flex:1;padding:24px 28px 56px;max-width:1560px;width:100%;margin:0 auto;}

/* ---------- Sidebar ---------- */
.sb-head{height:var(--header-h);display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-head img{height:24px;}
.sb-acct{padding:16px 16px 8px;}
.sb-acct-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);margin:0 4px 7px;}
.acct-switch{display:flex;align-items:center;gap:10px;width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:9px 11px;color:#fff;transition:.15s;text-align:left;}
.acct-switch:hover{background:rgba(255,255,255,.11);}
.acct-logo{width:30px;height:30px;border-radius:8px;background:var(--gradient-brand);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#fff;flex-shrink:0;}
.acct-meta{flex:1;min-width:0;}
.acct-name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acct-role{font-size:10.5px;color:rgba(255,255,255,.5);}
.acct-caret{color:rgba(255,255,255,.4);flex-shrink:0;}

.sb-nav{flex:1;overflow-y:auto;padding:10px 12px;}
.sb-group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.32);padding:14px 12px 6px;}
.sb-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:rgba(255,255,255,.66);
  font-size:13.5px;font-weight:600;border:none;background:none;width:100%;text-align:left;position:relative;transition:.13s;margin-bottom:1px;}
.sb-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.sb-item.active{background:rgba(255,255,255,.10);color:#fff;}
.sb-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent);}
.sb-item svg{width:18px;height:18px;flex-shrink:0;opacity:.9;}
.sb-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);}
.sb-user{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;}
.sb-user .av{width:32px;height:32px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;}
.sb-user .nm{font-size:13px;font-weight:700;color:#fff;line-height:1.2;}
.sb-user .em{font-size:11px;color:rgba(255,255,255,.5);}

/* ---------- Header ---------- */
.hdr{height:var(--header-h);background:#fff;border-bottom:1px solid var(--g200);display:flex;align-items:center;
  gap:16px;padding:0 28px;position:sticky;top:0;z-index:50;}
.hdr-title{font-size:19px;font-weight:800;color:var(--g800);letter-spacing:-.01em;}
.hdr-sub{font-size:12.5px;color:var(--g500);}
.hdr-spacer{flex:1;}
.hdr-pill{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--g600);background:var(--g100);
  padding:7px 12px;border-radius:99px;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5);}70%{box-shadow:0 0 0 6px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}

/* lang toggle */
.lang-tog{display:flex;background:var(--g100);border-radius:8px;padding:2px;}
.lang-tog button{border:none;background:none;font-size:12px;font-weight:700;color:var(--g500);padding:5px 10px;border-radius:6px;transition:.12s;}
.lang-tog button.on{background:#fff;color:var(--primary);box-shadow:var(--shadow-card);}

/* ---------- Page head ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.page-title{font-size:26px;font-weight:800;color:var(--g800);margin:0;letter-spacing:-.02em;}
.page-sub{font-size:13.5px;color:var(--g500);margin:3px 0 0;}
.page-actions{display:flex;gap:9px;align-items:center;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;border-radius:9px;padding:9px 14px;border:1px solid transparent;transition:.14s;white-space:nowrap;}
.btn svg{width:15px;height:15px;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:var(--accent-dark);}
.btn-ghost{background:#fff;color:var(--g700);border-color:var(--g200);}
.btn-ghost:hover{background:var(--g50);border-color:var(--g300);}
.btn-sm{padding:6px 10px;font-size:12px;}
.btn-icon{padding:8px;}

/* ---------- Filter bar ---------- */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--g200);
  border-radius:var(--radius-lg);padding:11px 14px;margin-bottom:18px;box-shadow:var(--shadow-card);}
.filt-group{display:flex;align-items:center;gap:7px;}
.filt-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--g400);}
.seg{display:flex;background:var(--g100);border-radius:8px;padding:2px;gap:2px;}
.seg button{border:none;background:none;font-size:12.5px;font-weight:700;color:var(--g500);padding:6px 11px;border-radius:6px;transition:.12s;}
.seg button.on{background:#fff;color:var(--primary);box-shadow:var(--shadow-card);}
.sel{position:relative;}
.sel-btn{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--g300);border-radius:8px;padding:7px 11px;
  font-size:13px;font-weight:600;color:var(--g700);transition:.13s;min-height:34px;}
.sel-btn:hover{border-color:var(--primary-light);}
.sel-btn .cap{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--g400);}
.sel-btn svg{width:14px;height:14px;color:var(--g400);}
.filt-spacer{flex:1;}
.chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
.chip{display:inline-flex;align-items:center;gap:6px;background:#EEF0FB;color:var(--primary-dark);border:1px solid #DADCF5;
  border-radius:99px;padding:4px 6px 4px 11px;font-size:12px;font-weight:700;}
.chip b{font-weight:800;}
.chip button{border:none;background:rgba(77,74,157,.12);color:var(--primary-dark);width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;}
.chip button:hover{background:rgba(77,74,157,.25);}
.chip-clear{font-size:12px;font-weight:700;color:var(--g500);background:none;border:none;text-decoration:underline;}

/* dropdown menu */
.menu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--g200);border-radius:10px;
  box-shadow:var(--shadow-pop);z-index:200;min-width:210px;padding:6px;max-height:320px;overflow-y:auto;}
.menu.right{left:auto;right:0;}
.menu-search{width:100%;border:1px solid var(--g200);border-radius:7px;padding:7px 9px;font-size:13px;font-family:inherit;margin-bottom:5px;}
.menu-search:focus{outline:none;border-color:var(--primary-light);}
.menu-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;font-size:13px;font-weight:600;color:var(--g700);
  border:none;background:none;width:100%;text-align:left;transition:.1s;}
.menu-item:hover{background:var(--g100);}
.menu-item.sel{color:var(--primary);background:#EEF0FB;}
.menu-item .dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.menu-item .ct{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--g400);}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--g200);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);}
.card-pad{padding:18px 20px;}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px 0;}
.card-head>div:first-child{min-width:0;flex:1;}
.card-title{font-size:15px;font-weight:800;color:var(--g800);margin:0;letter-spacing:-.01em;}
.card-desc{font-size:12px;color:var(--g500);margin:2px 0 0;}
.card-tools{display:flex;gap:6px;align-items:center;flex-shrink:0;}

/* grid */
.grid{display:grid;gap:16px;}
.g-kpi{grid-template-columns:repeat(5,1fr);}
.g-2{grid-template-columns:2fr 1fr;}
.g-2e{grid-template-columns:1fr 1fr;}
.g-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:1280px){.g-kpi{grid-template-columns:repeat(3,1fr);}}
@media(max-width:1100px){.g-2,.g-2e,.g-3{grid-template-columns:1fr;}}

/* ---------- KPI cards ---------- */
.kpi{padding:16px 18px;position:relative;overflow:hidden;}
.kpi-top{display:flex;align-items:center;justify-content:space-between;}
.kpi-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.kpi-ico svg{width:18px;height:18px;}
.kpi-label{font-size:12px;font-weight:700;color:var(--g500);margin:13px 0 2px;}
.kpi-val{font-size:30px;font-weight:800;color:var(--g900);letter-spacing:-.02em;line-height:1.05;}
.kpi-foot{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12px;font-weight:700;}
.delta{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:99px;font-size:11.5px;font-weight:800;}
.delta.up{color:#15803d;background:var(--success-l);}
.delta.down{color:#b91c1c;background:var(--error-l);}
.delta.flat{color:var(--g500);background:var(--g100);}
.kpi-foot .muted{color:var(--g400);font-weight:600;}
.kpi-spark{position:absolute;right:0;bottom:0;width:100%;height:34px;opacity:.5;pointer-events:none;}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
.tbl thead th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--g500);text-align:left;
  padding:11px 14px;border-bottom:1px solid var(--g200);background:var(--g50);white-space:nowrap;position:sticky;top:0;cursor:pointer;user-select:none;}
.tbl thead th.num{text-align:right;}
.tbl thead th .sortarrow{opacity:.45;margin-left:4px;}
.tbl tbody td{padding:11px 14px;border-bottom:1px solid var(--g100);color:var(--g700);vertical-align:middle;}
.tbl tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;}
.tbl tbody tr{transition:.1s;cursor:pointer;}
.tbl tbody tr:hover{background:#F8F8FD;}
.tbl tbody tr:last-child td{border-bottom:none;}
.rank{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--g100);
  font-size:11.5px;font-weight:800;color:var(--g500);}
.rank.top{background:#EEF0FB;color:var(--primary);}
.cell-main{display:flex;align-items:center;gap:11px;}
.thumb{width:38px;height:38px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--g100);overflow:hidden;}
.cell-name{font-weight:700;color:var(--g800);}
.cell-sku{font-size:11.5px;color:var(--g400);font-family:var(--mono);}
.barcell{display:flex;align-items:center;gap:9px;}
.barcell .track{flex:1;height:7px;background:var(--g100);border-radius:99px;overflow:hidden;min-width:54px;}
.barcell .fill{height:100%;border-radius:99px;background:var(--primary);}

/* ---------- Badge ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;line-height:1.4;}
.badge .bd{width:7px;height:7px;border-radius:50%;}
.bg-primary{background:#EEF0FB;color:var(--primary-dark);}
.bg-accent{background:#FFE6F1;color:var(--accent-dark);}
.bg-success{background:var(--success-l);color:#15803d;}
.bg-warning{background:var(--warning-l);color:#92400e;}
.bg-info{background:var(--info-l);color:#1e40af;}
.bg-gray{background:var(--g100);color:var(--g600);}

/* ---------- ranking list (horizontal bars) ---------- */
.rank-list{display:flex;flex-direction:column;}
.rank-row{display:flex;align-items:center;gap:12px;padding:9px 0;cursor:pointer;border-radius:8px;transition:.1s;}
.rank-row:hover{background:#F8F8FD;}
.rank-row .lbl{display:flex;align-items:center;gap:9px;width:140px;flex-shrink:0;font-size:13px;font-weight:700;color:var(--g700);overflow:hidden;}
.rank-row .lbl .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-row .bar{flex:1;height:24px;background:var(--g100);border-radius:7px;overflow:hidden;position:relative;}
.rank-row .bar .f{height:100%;border-radius:7px;transition:width .5s cubic-bezier(.2,.8,.2,1);}
.rank-row .val{width:64px;text-align:right;font-size:13px;font-weight:800;color:var(--g800);font-variant-numeric:tabular-nums;}
.rank-row .pct{width:46px;text-align:right;font-size:11.5px;font-weight:700;color:var(--g400);}

/* ---------- empty / loading ---------- */
.loader{position:fixed;inset:0;background:var(--g100);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:9999;}
.spinner{width:34px;height:34px;border:4px solid var(--g200);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:46px;text-align:center;color:var(--g400);}
.empty svg{width:42px;height:42px;margin-bottom:12px;opacity:.5;}

/* ---------- slide over ---------- */
.overlay{position:fixed;inset:0;background:rgba(33,31,75,.34);backdrop-filter:blur(2px);z-index:300;animation:fade .2s;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.slideover{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:94vw;background:var(--g50);z-index:310;
  box-shadow:var(--shadow-pop);display:flex;flex-direction:column;animation:slidein .26s cubic-bezier(.2,.8,.2,1);}
@keyframes slidein{from{transform:translateX(100%);}to{transform:translateX(0);}}
.so-head{background:#fff;padding:18px 22px;border-bottom:1px solid var(--g200);display:flex;align-items:flex-start;gap:14px;}
.so-body{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px;}
.so-close{margin-left:auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--g200);background:#fff;color:var(--g500);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.so-close:hover{background:var(--g100);}

/* def list */
.dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
.dl .full{grid-column:span 2;}
.dl dt{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--g400);margin-bottom:3px;}
.dl dd{font-size:14px;font-weight:700;color:var(--g800);margin:0;}

/* heatmap */
.heat{display:grid;gap:3px;}
.heat-cell{border-radius:4px;aspect-ratio:auto;height:22px;transition:.1s;cursor:default;}
.heat-cell:hover{outline:2px solid var(--primary);outline-offset:1px;}

/* cartogram tile */
.carto{position:relative;}
.ctile{position:absolute;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;font-weight:800;cursor:pointer;transition:.14s;border:2px solid transparent;}
.ctile:hover{transform:scale(1.06);z-index:5;border-color:#fff;box-shadow:var(--shadow-hover);}
.ctile .cc{font-size:13px;line-height:1;}
.ctile .cv{font-size:10px;font-weight:700;opacity:.85;margin-top:2px;}

/* tabs */
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--g200);margin-bottom:0;}
.tab{border:none;background:none;padding:11px 15px;font-size:13.5px;font-weight:700;color:var(--g500);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.12s;}
.tab:hover{color:var(--g700);}
.tab.on{color:var(--primary);border-bottom-color:var(--accent);}

/* tooltip */
.cht-tip{position:fixed;pointer-events:none;background:var(--g900);color:#fff;font-size:12px;font-weight:600;
  padding:7px 10px;border-radius:8px;z-index:500;box-shadow:var(--shadow-pop);white-space:nowrap;transition:opacity .1s;}
.cht-tip .tt-t{font-weight:800;margin-bottom:2px;}
.cht-tip .tt-r{display:flex;align-items:center;gap:6px;}
.cht-tip .tt-r .d{width:8px;height:8px;border-radius:2px;}

/* misc */
.muted{color:var(--g500);}
.note-bar{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--g500);background:#fff;border:1px dashed var(--g300);
  border-radius:9px;padding:8px 13px;margin-bottom:16px;}
.note-bar svg{width:15px;height:15px;color:var(--warning);flex-shrink:0;}
.legend{display:flex;flex-wrap:wrap;gap:12px 16px;}
.legend .li{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--g600);cursor:pointer;}
.legend .li .d{width:10px;height:10px;border-radius:3px;}
.legend .li.off{opacity:.38;}
.section-gap{height:16px;}
.insight{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(135deg,#F5F4FC,#FCF2F8);border:1px solid #E7E5F6;
  border-radius:11px;padding:13px 15px;}
.insight .ico{width:26px;height:26px;border-radius:7px;background:var(--gradient-brand);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.insight .ico svg{width:15px;height:15px;color:#fff;}
.insight .tx{font-size:12.5px;color:var(--g600);line-height:1.5;}
.insight .tx b{color:var(--g800);font-weight:800;}