@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0f14;--bg2:#161b24;--bg3:#1e2535;--bg4:#252d3d;--bg5:#2d3650;
  --border:#2a3347;--border2:#3a4560;
  --text:#e8edf5;--text2:#8b96b0;--text3:#5a6480;
  --green:#22c55e;--green-bg:#0f2318;
  --red:#ef4444;--red-bg:#2a0f0f;
  --blue:#3b82f6;--blue-bg:#0f1e3a;
  --amber:#f59e0b;--amber-bg:#2a1f0a;
  --purple:#a855f7;--teal:#14b8a6;
  --font:'Sora',sans-serif;--mono:'JetBrains Mono',monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:13px;min-height:100vh}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:200;background:var(--bg2);border-bottom:1px solid var(--border);padding:0 20px;height:52px;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;letter-spacing:-.3px;white-space:nowrap}
.logo-icon{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#3b82f6,#a855f7);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.topbar-sep{width:1px;height:22px;background:var(--border)}
.tabs{display:flex;gap:2px}
.tab{padding:5px 13px;border-radius:6px;cursor:pointer;color:var(--text2);font-size:12px;font-weight:500;border:1px solid transparent;background:transparent;font-family:var(--font);transition:all .15s}
.tab:hover,.tab.active{background:var(--bg3);color:#fff;border-color:var(--border)}
.spacer{flex:1}
.status-row{display:flex;align-items:center;gap:6px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);transition:background .3s}
.status-dot.warn{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.status-dot.err{background:var(--red);box-shadow:0 0 6px var(--red)}
.status-label{font-size:11px;color:var(--text2);white-space:nowrap}
.sync-btn{padding:5px 14px;background:var(--blue);border-radius:6px;border:none;color:#fff;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:5px;transition:background .15s}
.sync-btn:hover{background:#2563eb}
.sync-icon{display:inline-block;font-size:14px}
.sync-icon.spinning{animation:spin .8s linear infinite}

/* FILTERBAR */
.filterbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:sticky;top:52px;z-index:100}
.filter-group{display:flex;align-items:center;gap:6px}
.filter-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.filter-input,.filter-select{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 10px;font-size:12px;font-family:var(--font);outline:none;height:30px;transition:border-color .15s}
.filter-input:focus,.filter-select:focus{border-color:var(--blue)}
.filter-sep{width:1px;height:20px;background:var(--border)}
.btn-filter{padding:5px 14px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .15s}
.btn-filter:hover{background:var(--bg4)}
.btn-primary{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.btn-primary:hover{background:#2563eb!important}
.btn-clear{color:var(--text3)}
.active-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filter-tag{background:var(--blue-bg);border:1px solid var(--blue);border-radius:20px;padding:3px 10px;font-size:11px;color:var(--blue);display:flex;align-items:center;gap:5px}
.filter-tag-close{cursor:pointer;font-size:14px;line-height:1}

/* MAIN */
.main{padding:20px;display:flex;flex-direction:column;gap:20px;max-width:1600px;margin:0 auto}

/* LOADING/ERROR */
.loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:80px 20px;color:var(--text2)}
.loading-spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--border2);border-top-color:var(--blue);animation:spin .8s linear infinite}
.error-icon{font-size:40px}
.error-state h3{font-size:16px;color:var(--text)}

/* SECTION */
.section{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Títulos de grid com mais destaque */
.section-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.2px}
/* Espaçamento maior (superior e inferior) para o grid de Produtos */
#section-produtos{margin:22px 0}
.prod-id{font-size:10.5px;color:var(--text3);font-family:var(--mono);margin-top:1px}
.search-input{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 10px;font-size:12px;font-family:var(--font);outline:none;height:30px;width:200px;transition:border-color .15s}
.search-input:focus{border-color:var(--blue)}
.pill-btn{padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s}
.pill-btn:hover,.pill-btn.active{background:var(--bg3);color:var(--text);border-color:var(--border2)}

/* KPI GRID */
.kpi-grid{display:flex;flex-direction:column;gap:12px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;transition:border-color .15s;cursor:default}
.kpi:hover{border-color:var(--border2)}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.kpi.green::before{background:var(--green)}
.kpi.blue::before{background:var(--blue)}
.kpi.amber::before{background:var(--amber)}
.kpi.red::before{background:var(--red)}
.kpi.purple::before{background:var(--purple)}
.kpi.teal::before{background:var(--teal)}
.kpi-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.kpi-value{font-size:21px;font-weight:700;font-family:var(--mono);letter-spacing:-1px;line-height:1.2;white-space:nowrap}
/* Destaque especial para o box Lucro */
.kpi.highlight{background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(20,184,166,.07));border-color:rgba(34,197,94,.45)}
.kpi.highlight .kpi-label{color:var(--green)}
.kpi.highlight .kpi-value{color:var(--green)}
.kpi.highlight::before{height:3px}
.kpi-footer{display:flex;align-items:center;gap:6px;margin-top:2px}
.kpi-badge{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:600}
.kpi-badge.up{background:var(--green-bg);color:var(--green)}
.kpi-badge.dn{background:var(--red-bg);color:var(--red)}
.kpi-compare{font-size:10px;color:var(--text3)}
.sparkline{margin-top:6px;height:28px;width:100%;display:block}

/* HIGHLIGHT CARDS */
.highlight-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.hl-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px 18px;display:flex;align-items:center;gap:14px;transition:border-color .15s}
.hl-card:hover{border-color:var(--border2)}
.hl-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.hl-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.hl-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;margin-bottom:3px}
.hl-value{font-size:12px;font-family:var(--mono);color:var(--green)}
.hl-sub{font-size:10px;color:var(--text3)}

/* CHART LAYOUTS */
.charts-row-1{display:grid;grid-template-columns:1fr;gap:12px}
.charts-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.charts-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.chart-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px}
.wide{grid-column:1/-1}
.chart-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.chart-title{font-size:13px;font-weight:600;color:var(--text)}
.chart-sub{font-size:11px;color:var(--text3);margin-top:2px}
.chart-wrap{position:relative;width:100%}
.chart-wrap canvas{display:block}
.legend-row{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--text2)}
.legend-item{display:flex;align-items:center;gap:5px}
.legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.no-data{text-align:center;color:var(--text3);padding:40px 0;font-size:12px}

/* FUNNEL */
.funnel-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.funnel-step-label{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}
.funnel-bar-bg{height:34px;border-radius:6px;background:var(--bg3);position:relative;border:1px solid var(--border);overflow:hidden}
.funnel-bar-fill{height:100%;border-radius:5px;display:flex;align-items:center;padding:0 10px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;transition:width .5s cubic-bezier(.4,0,.2,1)}
.funnel-meta{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text2);font-family:var(--mono)}

/* TABLES */
.table-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;min-width:700px}
.data-table thead th{background:var(--bg3);padding:9px 14px;text-align:left;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
.data-table tbody tr:last-child{border-bottom:none}
.data-table tbody tr:hover{background:var(--bg3)}
.data-table tbody td{padding:10px 14px;font-size:12px;color:var(--text);vertical-align:middle}
.td-prod{display:flex;align-items:center;gap:8px}
.prod-dot{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.prod-name{font-weight:600;font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod-cat{font-size:10px;color:var(--text3)}
.badge{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;white-space:nowrap}
.badge-hotmart{background:#1a1230;color:#a855f7;border:1px solid #4c1d95}
.badge-facebook{background:#0f1e3a;color:#3b82f6;border:1px solid #1e3a5f}
.badge-google{background:#1a1a0a;color:#f59e0b;border:1px solid #3d2f00}
.badge-organic{background:var(--green-bg);color:var(--green);border:1px solid #14532d}
.status-badge{padding:3px 8px;border-radius:4px;font-size:10px;font-weight:600}
.status-APPROVED{background:var(--green-bg);color:var(--green);border:1px solid #14532d}
.status-WAITING_PAYMENT{background:var(--amber-bg);color:var(--amber);border:1px solid #3d2f00}
.status-REFUNDED{background:var(--red-bg);color:var(--red);border:1px solid #7f1d1d}
.status-CANCELLED{background:#1a1a1a;color:var(--text2);border:1px solid var(--border)}
.mono{font-family:var(--mono);font-size:11px}
.c-green{color:var(--green)} .c-red{color:var(--red)} .c-amber{color:var(--amber)} .c-muted{color:var(--text2)}

/* CONNECTIONS */
.conn-grid-full{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.conn-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.conn-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.conn-name{font-size:12px;font-weight:600;color:var(--text)}
.conn-status{font-size:10px;margin-top:2px}
.conn-status.ok{color:var(--green)} .conn-status.err{color:var(--red)} .conn-status.warn{color:var(--amber)} .conn-status.off{color:var(--text3)}
.conn-info{flex:1;min-width:0}

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .3s ease}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}

@media(max-width:900px){
  .charts-row-2,.charts-row-3{grid-template-columns:1fr}
  .tabs{display:none}
}

/* ── TOP CARDS ─────────────────────────────────────────────────────────────── */
.top-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;   /* espaçamento superior/inferior maior (Produto + Maior Faturamento) */
}
.top-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.top-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.top-card-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.top-card-meta {
  font-size: 12px;
  color: var(--text2);
  font-family: var(--mono);
}

/* ── KPI SUB TEXT ───────────────────────────────────────────────────────────── */
.kpi-sub-text {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

/* ── 4-COL CHART ROW ────────────────────────────────────────────────────────── */
.charts-4col {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 12px;
}

/* ── EMPTY CHART ────────────────────────────────────────────────────────────── */
.empty-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text3);
  font-size: 12px;
  min-height: 80px;
}

/* ── CONN-GRID (standalone) ─────────────────────────────────────────────────── */
.section > .conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

@media (max-width: 900px) {
  .charts-4col { grid-template-columns: 1fr 1fr; }
  .top-cards   { grid-template-columns: 1fr; }
  .charts-4col .chart-card[style*="span 2"] { grid-column: span 2; }
}
@media (max-width: 600px) {
  .charts-4col { grid-template-columns: 1fr; }
  .charts-4col .chart-card[style*="span 2"] { grid-column: span 1; }
}

/* ── CHARTS 3 COL ────────────────────────────────────────────────────────── */
.charts-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* ── SORTABLE TABLE HEADERS ──────────────────────────────────────────────── */
.th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.th-sort:hover { color: var(--text); background: var(--bg4); }

.sort-arrow::after { content: ' ⇅'; color: var(--text3); font-size: 10px; }
.th-sort.sort-asc  .sort-arrow::after { content: ' ↑'; color: var(--blue); }
.th-sort.sort-desc .sort-arrow::after { content: ' ↓'; color: var(--blue); }

/* ── BADGE AFFILIATE ─────────────────────────────────────────────────────── */
.badge-affiliate { background: #1a2a0a; color: #84cc16; border: 1px solid #365314; }

/* ── CONN-GRID STANDALONE ────────────────────────────────────────────────── */
.section > .conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

@media (max-width: 900px) {
  .charts-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .charts-3col { grid-template-columns: 1fr; }
  .top-cards   { grid-template-columns: 1fr; }
}

/* ── MISC ────────────────────────────────────────────────────────────────── */
.td-empty { text-align:center; color:var(--text3); padding:30px; font-size:12px; }

/* ── Paginação de tabelas ─────────────────────────────────────────────────── */
.table-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;margin-top:8px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  font-size:12px;color:var(--text2);flex-wrap:wrap}
.table-pager .pager-info{color:var(--text3)}
.table-pager .pager-size{display:flex;align-items:center;gap:7px}
.table-pager select{background:var(--bg3);border:1px solid var(--border);border-radius:7px;color:var(--text);
  font-family:var(--font);font-size:12px;padding:5px 8px;cursor:pointer}
.table-pager select:focus{outline:none;border-color:var(--blue)}
.table-pager .pager-nav{display:flex;align-items:center;gap:5px}
.table-pager .pg-btn{background:var(--bg3);border:1px solid var(--border);border-radius:7px;color:var(--text);
  font-family:var(--font);font-size:12px;min-width:30px;height:29px;padding:0 9px;cursor:pointer;transition:.15s}
.table-pager .pg-btn:hover:not(:disabled){background:var(--bg4);border-color:var(--border2)}
.table-pager .pg-btn.active{background:var(--blue);border-color:var(--blue);color:#fff}
.table-pager .pg-btn:disabled{opacity:.4;cursor:default}
.table-pager .pg-ellipsis{color:var(--text3);padding:0 2px}

/* ── Seletor de sócio + menu de usuário no header ──────────────────────────── */
.partner-picker{display:flex;align-items:center;gap:7px;margin-left:14px;padding:5px 10px;
  background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(59,130,246,.18));
  border:1px solid var(--border2);border-radius:9px}
.partner-picker .pp-icon{font-size:13px}
.partner-picker .pp-label{font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.partner-picker select{background:var(--bg3);border:1px solid var(--border2);border-radius:7px;color:var(--text);
  font-family:var(--font);font-size:13px;font-weight:600;padding:5px 9px;cursor:pointer;max-width:200px}
.partner-picker select:focus{outline:none;border-color:var(--blue)}
.user-menu{display:flex;align-items:center;gap:9px;margin-left:12px}
.user-menu .user-name{font-size:12px;color:var(--text2);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text2);
  font-family:var(--font);font-size:12px;padding:6px 12px;cursor:pointer;transition:.15s}
.logout-btn:hover{background:var(--red-bg);border-color:var(--red);color:#fecaca}

/* ── Campanhas ativas (Facebook) — insights + badges ───────────────────────── */
.insights-panel{display:flex;flex-direction:column;gap:7px}
.insight{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.45;color:var(--text);
  background:var(--bg2);border:1px solid var(--border);border-left-width:3px;border-radius:9px;padding:9px 12px}
.insight .insight-ico{flex-shrink:0}
.insight.good{border-left-color:var(--green)}
.insight.warn{border-left-color:var(--amber)}
.insight.bad{border-left-color:var(--red)}
.obj-badge{font-size:10.5px;padding:2px 8px;border-radius:20px;background:var(--bg4);color:var(--text2);white-space:nowrap}
.roas-tag{font-size:12px;font-weight:600;padding:2px 8px;border-radius:6px}
.roas-tag.pos{background:var(--green-bg);color:#bbf7d0}
.roas-tag.mid{background:rgba(245,158,11,.16);color:#fcd34d}
.roas-tag.neg{background:var(--red-bg);color:#fecaca}

/* ── Widget mapa-múndi de vendas por país ──────────────────────────────────── */
.map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.map-tabs{display:flex;gap:4px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:3px}
.map-tab{font-family:var(--font);font-size:11px;font-weight:600;color:var(--text2);background:transparent;border:none;
  padding:5px 11px;border-radius:6px;cursor:pointer;transition:.15s}
.map-tab:hover{color:var(--text)}
.map-tab.active{background:var(--bg5);color:var(--text)}
.world-map-wrap{position:relative;width:100%;height:230px;background:radial-gradient(ellipse at center,#101725,#0b0f18);
  border-radius:8px;overflow:hidden}
#worldMap{width:100%;height:100%;display:block}
#worldMap .land{fill:#1c2740;stroke:#2a3855;stroke-width:.5}
#worldMap .graticule{fill:none;stroke:#182236;stroke-width:.5}
.sale-dot-halo{fill:#14b8a6;opacity:.35;transform-origin:center;transform-box:fill-box;animation:dotPulse 2s ease-out infinite}
.sale-dot-core{fill:#2dd4bf;stroke:#0b0f18;stroke-width:.6}
.dot-label{fill:#e8edf5;font-size:11px;font-weight:700;font-family:var(--mono);paint-order:stroke;
  stroke:#0b0f18;stroke-width:2.5px;text-anchor:middle;pointer-events:none}
@keyframes dotPulse{0%{transform:scale(.7);opacity:.5}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.map-tip{position:absolute;pointer-events:none;background:var(--bg5);border:1px solid var(--border2);border-radius:7px;
  padding:5px 9px;font-size:11.5px;color:var(--text);display:none;white-space:nowrap;z-index:5;transform:translate(-50%,-130%)}
.country-rank{display:flex;flex-direction:column;gap:7px;padding:2px 2px 4px;max-height:230px;overflow-y:auto}
.rank-row{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px;font-size:12.5px}
.rank-pos{color:var(--text3);font-family:var(--mono);font-size:11px;text-align:right}
.rank-name{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-bar-wrap{grid-column:2/3;height:5px;background:var(--bg4);border-radius:3px;margin-top:3px;overflow:hidden}
.rank-bar{height:100%;background:linear-gradient(90deg,#14b8a6,#2dd4bf);border-radius:3px}
.rank-count{color:var(--text);font-family:var(--mono);font-weight:600;font-size:12px}
.rank-item{display:flex;flex-direction:column;gap:0}