:root {
  /* Surfaces (elevação) */
  --bg: #0B0D12;
  --surface-1: #161923;   /* cards */
  --surface-2: #1E222E;   /* hover / nested rows */
  --surface-3: #262B39;   /* popovers / active states */
  --border: #2A2E3A;
  --border-strong: #383D4D;

  /* Texto */
  --text: #E9EAEE;
  --text-muted: #8B8F9A;
  --text-faint: #5C6070;

  /* Marca */
  --accent: #FF6B35;
  --accent-hover: #E5572B;
  --accent-soft: rgba(255,107,53,0.14);
  --accent-glow: rgba(255,107,53,0.30);

  /* Semântico */
  --success: #00C853;
  --success-soft: rgba(0,200,83,0.14);
  --danger: #FF5252;
  --danger-soft: rgba(255,82,82,0.14);
  --warning: #FFB300;
  --warning-soft: rgba(255,179,0,0.14);
  --admin: #8B7CF6;
  --admin-soft: rgba(139,124,246,0.16);

  /* Marketplaces / canais */
  --telegram: #0088CC;
  --whatsapp: #25D366;
  --aliexpress: #FF6B35;
  --shopee: #EE4D2D;

  /* Tipografia */
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px;

  /* Forma */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --sidebar-w: 224px;

  /* Elevação (sombras) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 6px 16px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
  --shadow-accent: 0 6px 20px var(--accent-glow);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { -webkit-font-smoothing:antialiased; }

body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  display:flex; line-height:1.5; font-size:var(--fs-base);
}

/* Scrollbar */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-strong); }

/* Foco visível (acessibilidade) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;
}

.icon { width:16px; height:16px; stroke-width:2; flex-shrink:0; }
.icon-sm { width:14px; height:14px; }
.icon-lg { width:22px; height:22px; }

/* Sidebar */
.sidebar {
  width:var(--sidebar-w); background:var(--surface-1);
  border-right:1px solid var(--border); padding:22px 0;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100;
}
.sidebar .logo {
  font-size:19px; font-weight:800; padding:0 22px 30px;
  display:flex; align-items:center; gap:9px; letter-spacing:-0.2px;
}
.sidebar .logo .logo-icon { color:var(--accent); animation:flicker 3.2s ease-in-out infinite; }
.sidebar .logo span { color:var(--accent); }
@keyframes flicker {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.82; transform:scale(0.94); }
}
@media (prefers-reduced-motion:reduce) { .logo-icon { animation:none; } }

.sidebar nav { display:flex; flex-direction:column; gap:2px; }
.sidebar nav a {
  display:flex; align-items:center; gap:11px;
  padding:10px 22px; margin:0 10px; color:var(--text-muted);
  text-decoration:none; font-size:var(--fs-base); font-weight:500;
  border-radius:var(--radius-sm); transition:background .15s,color .15s;
  position:relative;
}
.sidebar nav a .nav-icon { width:17px; height:17px; }
.sidebar nav a:hover { background:var(--surface-2); color:var(--text); }
.sidebar nav a.active { color:var(--accent); background:var(--accent-soft); font-weight:600; }
.sidebar nav a.active::before {
  content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
  background:var(--accent); border-radius:0 3px 3px 0;
}

.sidebar .user-footer {
  margin-top:auto; padding:18px 22px 4px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:8px; font-size:var(--fs-base);
  overflow:hidden; /* nada vaza pra fora da sidebar, mesmo com email longo */
}
/* Avatar+nome+badge ficam num bloco só que pode encolher; o logout fica FORA
   dessa disputa de espaço, então nunca é ele que perde espaço. */
.user-footer-info {
  display:flex; align-items:center; gap:8px;
  flex:1 1 auto; min-width:0; overflow:hidden;
}
#navUserName {
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.avatar, .badge-pro, .badge-admin, .user-footer .logout-btn { flex-shrink:0; }
.user-footer .logout-btn {
  color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; padding:6px; border-radius:6px; transition:.15s;
}
.user-footer .logout-btn:hover { color:var(--danger); background:var(--danger-soft); }
.avatar {
  width:30px; height:30px; border-radius:var(--radius-sm);
  background:linear-gradient(145deg,var(--accent),var(--accent-hover));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-base); flex-shrink:0;
}
.badge-pro, .badge-admin {
  font-size:9.5px; font-weight:700; letter-spacing:.03em;
  padding:2.5px 7px; border-radius:20px;
}
.badge-pro { background:var(--accent-soft); color:var(--accent); }
.badge-admin { background:var(--admin-soft); color:var(--admin); }

/* Main */
.main { margin-left:var(--sidebar-w); flex:1; padding:28px 32px; overflow-y:auto; }
.main > * { max-width:1280px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; max-width:1280px; flex-wrap:wrap; gap:12px; }
.topbar-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar h1 { font-size:var(--fs-xl); font-weight:700; display:flex; align-items:center; gap:10px; }
.topbar h1 .icon-lg { color:var(--accent); }
.topbar .updated { font-size:var(--fs-sm); color:var(--text-muted); display:flex; align-items:center; gap:7px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--success); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(0,200,83,.5); } 50% { opacity:.7; box-shadow:0 0 0 4px rgba(0,200,83,0); } }
@media (prefers-reduced-motion:reduce) { .live-dot { animation:none; } }

/* Cards */
.card {
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm);
  transition:border-color .15s, box-shadow .15s;
}
.card.hoverable:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); }

.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px; }
.metric-card .label { font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.metric-card .label .icon { color:var(--accent); }
.metric-card .value { font-size:var(--fs-3xl); font-weight:700; letter-spacing:-0.5px; }
.metric-card .trend { font-size:var(--fs-xs); margin-top:5px; display:flex; align-items:center; gap:4px; }
.trend-up { color:var(--success); }
.trend-down { color:var(--danger); }

/* Grid */
.panels { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
.chart-wrap { position:relative; height:250px; display:flex; align-items:center; justify-content:center; }
.chart-wrap canvas { max-height:100%; }
.section-title {
  font-size:var(--fs-md); font-weight:600; margin-bottom:14px; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.section-title .icon { color:var(--text-muted); }

/* Table */
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
th { text-align:left; color:var(--text-muted); padding:10px 12px; font-weight:500; border-bottom:1px solid var(--border); }
td { padding:11px 12px; border-bottom:1px solid var(--surface-2); }
tr:hover td { background:var(--surface-2); }
.rank { font-weight:700; display:flex; align-items:center; }
.rank.gold .icon { color:#FFD700; }
.rank.silver .icon { color:#C7CDD6; }
.rank.bronze .icon { color:#CD7F32; }
.discount-pct { font-weight:600; color:var(--success); }
.link-icon { color:var(--accent); display:inline-flex; padding:5px; border-radius:6px; transition:background .15s; }
.link-icon:hover { background:var(--accent-soft); }

/* Badges */
.badge { padding:3px 9px; border-radius:6px; font-size:var(--fs-xs); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.badge-ae { background:rgba(255,107,53,0.14); color:var(--aliexpress); }
.badge-sp { background:rgba(238,77,45,0.14); color:var(--shopee); }

/* Feed */
.feed { max-height:220px; overflow-y:auto; }
.feed-item { display:flex; justify-content:space-between; align-items:center; padding:10px 2px; border-bottom:1px solid var(--surface-2); font-size:var(--fs-sm); }
.feed-item:last-child { border-bottom:none; }
.feed-item .time { color:var(--text-muted); min-width:40px; }
.feed-item .item-name { flex:1; margin:0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Channels */
.channels-mini { display:flex; flex-direction:column; gap:9px; }
.channel-row {
  display:flex; align-items:center; gap:11px; padding:12px; margin-bottom:10px;
  background:var(--surface-2); border-radius:var(--radius-sm); font-size:var(--fs-sm);
}
.channels-mini .channel-row { margin-bottom:0; }
.channel-row .ch-icon-wrap {
  width:34px; height:34px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.channel-row .ch-icon-wrap.telegram { background:rgba(0,136,204,.16); color:var(--telegram); }
.channel-row .ch-icon-wrap.whatsapp { background:rgba(37,211,102,.16); color:var(--whatsapp); }
.channel-row .ch-info { flex:1; min-width:0; }
.channel-row .ch-name { font-weight:600; }
.channel-row .ch-id { font-size:var(--fs-xs); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ch-status.on { background:var(--success); animation:pulse 2s ease-in-out infinite; }
.ch-status.off { background:var(--text-faint); }

/* Buttons */
.btn {
  background:var(--accent); color:#fff; border:none;
  padding:10px 20px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:var(--fs-base); font-weight:600; transition:background .15s, box-shadow .15s, transform .1s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.btn:hover { background:var(--accent-hover); box-shadow:var(--shadow-accent); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn-full { width:100%; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-outline:hover { background:var(--surface-2); box-shadow:none; border-color:var(--border-strong); }
.btn-sm { padding:6px 13px; font-size:var(--fs-xs); }
.btn-icon { padding:8px; }

/* Forms */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:6px; font-weight:500; }
.input-wrap { position:relative; }
.input-wrap .icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; }
.input-wrap input { padding-left:38px; }
input, select, textarea {
  background:var(--bg); color:var(--text); border:1px solid var(--border);
  padding:10px 13px; border-radius:var(--radius-sm); font-size:var(--fs-base); width:100%;
  font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color:var(--text-faint); }
input:hover, select:hover, textarea:hover { border-color:var(--border-strong); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input:read-only { color:var(--text-muted); cursor:default; }
select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238B8F9A' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
textarea { resize:vertical; min-height:80px; }

/* Preview */
.img-preview { width:200px; border-radius:var(--radius-sm); margin-top:10px; border:1px solid var(--border); display:none; }
.img-preview.show { display:block; }

/* Spinner */
.spinner { display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; }
.spinner.show { display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Toast */
.toast-container { position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast {
  padding:13px 18px; border-radius:var(--radius-sm); font-size:var(--fs-base); font-weight:500;
  animation:slideIn .25s ease; max-width:380px; display:flex; align-items:center; gap:9px;
  box-shadow:var(--shadow-lg);
}
.toast-success { background:#122B1F; color:#4EE092; border:1px solid rgba(0,200,83,.35); }
.toast-error { background:#301416; color:#FF8A8A; border:1px solid rgba(255,82,82,.35); }
.toast-warning { background:#2E2412; color:#FFCB5C; border:1px solid rgba(255,179,0,.35); }
@keyframes slideIn { from { transform:translateX(110%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* Skeleton */
.skeleton { background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-3) 50%,var(--surface-1) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:6px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .skeleton { animation:none; } }

/* Toggle Switch */
.toggle { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .slider { position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:24px; transition:.2s; }
.toggle .slider:before { content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .slider { background:var(--success); }
.toggle input:checked + .slider:before { transform:translateX(18px); }

/* Expand form */
.expand-form { display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.expand-form.open { display:block; }
.error-msg { color:var(--danger); font-size:var(--fs-xs); margin-top:5px; display:none; align-items:center; gap:5px; }
.error-msg.show { display:flex; }

/* Login page */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); position:relative; overflow:hidden; }
.login-body::before {
  content:""; position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 70%);
  top:-220px; right:-220px; filter:blur(10px); pointer-events:none;
}
.login-card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-lg); padding:38px; width:100%; max-width:400px; box-shadow:var(--shadow-lg); position:relative; z-index:1; }
.login-card .logo { font-size:26px; font-weight:800; text-align:center; margin-bottom:28px; display:flex; align-items:center; justify-content:center; gap:9px; }
.login-card .logo .logo-icon { color:var(--accent); }
.login-card .logo span { color:var(--accent); }

/* Empty / error state */
.empty-state { text-align:center; padding:36px 20px; color:var(--text-muted); font-size:var(--fs-base); }
.empty-state .icon { width:36px; height:36px; margin:0 auto 12px; opacity:.55; display:block; }
.empty-state.is-error .icon { color:var(--danger); opacity:.8; }

/* Range slider */
input[type=range] { -webkit-appearance:none; height:6px; background:var(--border); border-radius:3px; padding:0; border:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; background:var(--accent); border-radius:50%; cursor:pointer; box-shadow:0 0 0 4px var(--accent-soft); }
.range-row { display:flex; gap:12px; align-items:center; }
.range-row input[type=number] { width:70px; }

/* Filtro de período */
.period-toggle {
  display:inline-flex; background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:3px; margin-bottom:22px; gap:2px;
}
.period-toggle button {
  background:transparent; border:none; color:var(--text-muted); cursor:pointer;
  padding:7px 14px; border-radius:7px; font-size:var(--fs-sm); font-weight:600;
  font-family:inherit; transition:.15s;
}
.period-toggle button:hover { color:var(--text); }
.period-toggle button.active { background:var(--accent); color:#fff; }

/* Chip de filtro ativo (clique no gráfico) */
.filter-chip {
  display:none; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent);
  font-size:var(--fs-xs); font-weight:600; padding:4px 8px 4px 10px; border-radius:20px;
  margin-bottom:12px; width:fit-content;
}
.filter-chip.show { display:flex; }
.filter-chip button { background:none; border:none; color:inherit; cursor:pointer; display:flex; padding:2px; border-radius:50%; }
.filter-chip button:hover { background:rgba(255,107,53,.25); }

/* Toolbar de tabela (busca) */
.table-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.table-toolbar .input-wrap { max-width:220px; }
.table-toolbar input { padding:8px 12px 8px 34px; font-size:var(--fs-sm); }
.table-toolbar .input-wrap .icon { left:11px; }

/* Ordenação nas colunas */
th.sortable { cursor:pointer; user-select:none; }
th.sortable .sort-row { display:flex; align-items:center; gap:4px; }
th.sortable .icon { width:12px; height:12px; opacity:.5; }
th.sortable.sort-active .icon { opacity:1; color:var(--accent); }

/* Item novo no feed (chegou via polling em tempo real) */
.feed-item.is-new { animation:newItemGlow 2.4s ease; }
@keyframes newItemGlow {
  0% { background:var(--accent-soft); }
  100% { background:transparent; }
}
.feed-badge {
  display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:var(--success);
  background:var(--success-soft); padding:2px 8px; border-radius:20px; margin-left:8px; font-weight:600;
}

/* Period tabs */
.period-tabs { display:flex; gap:3px; background:var(--surface-2); padding:4px; border-radius:var(--radius-sm); }
.period-tab {
  padding:6px 13px; border-radius:6px; font-size:var(--fs-sm); font-weight:600;
  color:var(--text-muted); cursor:pointer; border:none; background:transparent; transition:.15s;
}
.period-tab.active { background:var(--accent); color:#fff; }
.period-tab:hover:not(.active) { color:var(--text); }

/* Filter chips */
.filter-chips { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.filter-chip {
  display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent);
  padding:5px 6px 5px 12px; border-radius:20px; font-size:var(--fs-xs); font-weight:600; cursor:pointer;
}
.filter-chip:hover { background:rgba(255,107,53,.22); }
.filter-chip .icon { width:13px; height:13px; }

/* Toolbar (busca) acima das tabelas */
.table-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; }
.search-input-wrap { position:relative; max-width:200px; width:100%; }
.search-input-wrap .icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-faint); width:14px; height:14px; pointer-events:none;
}
.search-input-wrap input { padding-left:31px; padding-top:7px; padding-bottom:7px; font-size:var(--fs-sm); }

/* Colunas ordenáveis */
th.sortable { cursor:pointer; user-select:none; transition:color .15s; }
th.sortable:hover { color:var(--text); }
th.sortable .icon { width:11px; height:11px; vertical-align:-1px; margin-left:3px; opacity:.45; }
th.sortable.sort-active { color:var(--accent); }
th.sortable.sort-active .icon { opacity:1; }

/* Item novo (chegou via polling em tempo real) */
@keyframes newItemPulse { 0% { background:var(--accent-soft); } 100% { background:transparent; } }
.is-new { animation:newItemPulse 2.4s ease-out; }
.new-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; margin-right:6px;
  animation:pulse 1.4s ease-in-out infinite;
}

/* Gráficos clicáveis */
.chart-wrap canvas { cursor:pointer; }
.chart-hint { font-size:var(--fs-xs); color:var(--text-faint); text-align:center; margin-top:8px; }

/* Notebook / janela estreita (entre desktop grande e o corte mobile em 768px).
   Sem isso, telas ~900-1180px ficavam "espremidas" no layout de 3 colunas. */
@media (max-width:1180px) {
  .main { padding:22px; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .panels { grid-template-columns:1fr; }
  .topbar { flex-wrap:wrap; row-gap:10px; }
}
@media (max-width:900px) {
  .metrics { grid-template-columns:1fr; }
}

/* Tabelas nunca quebram o layout — se não couber, rola por dentro em vez de
   espremer colunas ou vazar pra fora do card. */
.table-scroll { overflow-x:auto; }

/* Mobile */
@media (max-width:768px) {
  .sidebar { width:100%; height:56px; flex-direction:row; padding:0; bottom:auto; top:0; align-items:center; }
  .sidebar .logo { padding:0 14px 0 16px; font-size:15px; }
  .sidebar nav { flex:1; flex-direction:row; overflow-x:auto; gap:0; }
  .sidebar nav a { padding:0 11px; height:56px; margin:0; border-radius:0; font-size:10.5px; white-space:nowrap; flex-direction:column; gap:3px; justify-content:center; }
  .sidebar nav a.active::before { left:8px; right:8px; top:auto; bottom:0; height:2px; width:auto; border-radius:2px 2px 0 0; }
  .sidebar .user-footer { border-top:none; padding:0 14px; margin:0; }
  .sidebar .user-footer span:not(.logout-btn) { display:none; }
  .main { margin-left:0; margin-top:56px; padding:16px; }
  .metrics { grid-template-columns:1fr; }
  .panels { grid-template-columns:1fr; }
  .login-card { margin:20px; }
}