/* ============================================================================
   ui.css — base visual compartilhada por TODAS as telas da ferramenta.

   Existia um CSS colado dentro de cada página, e elas foram divergindo: três
   cores de marca (rosa, roxo, azul), quatro pretos de fundo diferentes e o
   mesmo conceito com três nomes (--border-2 / --border2 / --line-2). Trocar de
   página parecia trocar de site.

   Este arquivo é a fonte única. Cada página o importa ANTES do seu próprio
   <style> e não declara mais :root — então herda a paleta daqui e continua
   podendo ajustar o que é só dela.

   Semântica das cores (decisão do dono do produto):
     ROSA  = ação    -> botão de postar/minerar/salvar, chip ativo, link
     ROXO  = dados   -> gráfico, série, KPI, indicador de métrica
   ========================================================================= */

:root{
  /* --- superfícies --- */
  --bg:#0A0D14;
  --bg-2:#0E121B;
  --panel:#141924;
  --panel-2:#1B2130;
  --panel-3:#232D40;
  --panel-solid:#141924;      /* algumas telas usavam vidro translúcido */

  /* --- linhas --- */
  --line:#222A3A;
  --line-2:#2E3849;

  /* --- texto --- */
  --text:#EDF1F8;
  --muted:#93A0B5;
  --muted-dim:#5F6B82;

  /* --- ação (rosa) --- */
  --accent:#FF3B6B;
  --accent-2:#FF7A3D;
  --accent-soft:rgba(255,59,107,.16);
  --accent-line:rgba(255,59,107,.42);

  /* --- dados (roxo) --- */
  --data:#7C5CFF;
  --data-2:#FF5C8A;
  --data-soft:rgba(124,92,255,.18);

  /* --- estado --- */
  --ok:#22C55E;
  --warn:#F5A524;
  --bad:#EF4444;
  --info:#38BDF8;

  /* --- plataformas --- */
  --ig1:#FEDA75; --ig2:#D62976; --ig3:#962FBF;
  --fb:#0866FF;
  --tt:#25F4EE;

  /* --- ritmo: um só compasso de espaçamento e canto --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  --shadow-1:0 2px 10px rgba(0,0,0,.28);
  --shadow-2:0 14px 34px -10px rgba(0,0,0,.62);
  --shadow-3:0 22px 52px -12px rgba(0,0,0,.78);

  --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);

  --nav-w:78px;      /* trilho lateral no desktop */
  --nav-h:66px;      /* barra inferior no celular */

  /* --- APELIDOS -----------------------------------------------------------
     As páginas nasceram com nomes diferentes pro mesmo conceito. Em vez de
     reescrever centenas de regras (arriscado, com 61 posts agendados rodando),
     todos os nomes antigos apontam para a mesma paleta. A unificação é
     instantânea e nenhuma regra existente quebra. */
  --bg2:var(--bg-2);
  --panel2:var(--panel-2);
  --raise:var(--panel-3);
  --border:var(--line);
  --border-2:var(--line-2);
  --border2:var(--line-2);
  --txt:var(--text);
  --dim:var(--muted-dim);
  --up:var(--ok);
  --down:var(--bad);
  --green:var(--ok);      /* a Central usava --green sem nunca declarar: era cor morta */
  --amber:var(--warn);
  --del:var(--bad);
  --err:var(--bad);
  --cy:var(--tt);
  --ghost:#B088FF;        /* modo fantasma */
  --purple:var(--ghost);  /* mesma cor que --ghost, com outro nome */
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* constantes de layout que nasceram dentro de uma tela só */
  --side:248px;   /* painel lateral da tela de Comentários */
  --hh:56px;      /* altura do cabeçalho */
  --bh:64px;      /* altura da barra inferior própria da tela */
}

*{box-sizing:border-box}

/* ============================ NAVEGAÇÃO GLOBAL ============================
   Trilho à esquerda no desktop, barra inferior no celular — igual em todas as
   telas. É `fixed`, então nenhuma página precisa mudar sua estrutura: só ganha
   um respiro (padding) na borda correspondente. */

.unav{
  position:fixed;z-index:900;display:flex;background:var(--panel);
  border-color:var(--line);border-style:solid;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.unav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--muted);text-decoration:none;font-family:var(--sans);
  font-size:9.5px;font-weight:700;letter-spacing:.02em;text-align:center;
  transition:color .15s var(--ease),background .15s var(--ease);
  position:relative;
}
.unav a .ui{font-size:19px;line-height:1;filter:grayscale(.35);transition:.15s var(--ease)}
.unav a:hover{color:var(--text)}
.unav a:hover .ui{filter:none;transform:translateY(-1px)}
.unav a[aria-current="page"]{color:var(--accent)}
.unav a[aria-current="page"] .ui{filter:none}
.unav .ubdg{
  position:absolute;top:5px;right:calc(50% - 20px);min-width:16px;height:16px;
  padding:0 4px;border-radius:var(--r-pill);background:var(--accent);color:#fff;
  font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;
}

/* --- celular e tablet: barra inferior --- */
@media(max-width:1023px){
  .unav .ulogo{display:none}   /* logo é só do trilho lateral */
  .unav{
    left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    border-width:1px 0 0 0;justify-content:space-around;align-items:stretch;
    box-shadow:0 -8px 26px rgba(0,0,0,.45);
  }
  .unav a{flex:1;padding:9px 2px 7px;min-width:0}
  .unav a[aria-current="page"]::before{
    content:"";position:absolute;top:0;left:22%;right:22%;height:2.5px;
    background:var(--accent);border-radius:0 0 3px 3px;
  }
  body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 6px)!important}
}

/* --- desktop: trilho lateral --- */
@media(min-width:1024px){
  .unav{
    top:0;bottom:0;left:0;width:var(--nav-w);
    border-width:0 1px 0 0;flex-direction:column;align-items:stretch;
    padding:14px 0 18px;gap:2px;
  }
  .unav a{padding:11px 4px;border-radius:0}
  .unav a[aria-current="page"]{background:var(--accent-soft)}
  .unav a[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
    background:var(--accent);border-radius:0 3px 3px 0;
  }
  .unav .ulogo{
    display:flex;align-items:center;justify-content:center;height:44px;margin-bottom:10px;
    font-size:21px;
  }
  body{padding-left:var(--nav-w)!important}
}

/* a navegação some quando não faz sentido (login, telas de foco) */
.unav[hidden]{display:none}

/* ====================== ACESSIBILIDADE E BASE COMUM ====================== */

/* alvo de toque decente no celular — regra do projeto */
@media(max-width:768px){
  button,.btn,[role="button"],select,input[type="date"],input[type="number"]{min-height:40px}
}

/* foco visível pra quem navega por teclado */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);
}

/* respeita quem pediu menos animação no sistema */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* nenhuma tela pode rolar de lado — o defeito nº1 em celular */
html,body{overflow-x:clip}

/* imagem e mídia nunca estouram o container */
img,video,canvas,svg{max-width:100%}

/* tabela larga rola dentro do próprio quadro, não empurra a página */
.utable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ========================== BARRA DA TELA (.ubar) =========================
   Toda tela tem o mesmo cabeçalho, nas mesmas posições. Antes cada uma tinha
   o seu: a Central com as abas dentro da barra, os Comentários com as abas
   soltas embaixo, o Minerador e o Painel com um cartão flutuante. Trocar de
   tela obrigava a reaprender onde ficava cada botão.

   Ordem, sempre a mesma:
     identidade (ícone + título + subtítulo) | abas da tela | ferramentas | ação

   Telas sem subseção simplesmente deixam o espaço das abas vazio — o resto
   continua no mesmo lugar. */

.ubar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:10px 22px;min-height:60px;
  background:var(--panel);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-family:var(--sans);
}
.ubar-id{display:flex;align-items:center;gap:11px;min-width:0;flex:0 1 auto}
.ubar-id > div{min-width:0}
.ubar-ico{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:grid;place-items:center;font-size:19px;
  background:linear-gradient(135deg,var(--accent),var(--data));
}
.ubar-id h1{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ubar-id .ubar-sub{
  font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* abas da tela — o seletor de seção mora aqui, nunca solto no corpo */
.ubar-tabs{
  display:flex;gap:4px;padding:4px;flex:none;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-md);
}
.ubar-tabs button,.ubar-tabs a{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;text-decoration:none;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:7px 15px;border-radius:9px;transition:.15s var(--ease);
}
.ubar-tabs button:hover,.ubar-tabs a:hover{color:var(--text);background:var(--panel-3)}
.ubar-tabs .on{background:var(--accent);color:#fff}
.ubar-tabs .on:hover{background:var(--accent);color:#fff}

.ubar-tools{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;min-width:0;flex-wrap:nowrap}
/* texto de status nunca estica a barra: corta com reticencias */
.ubar-tools > *{flex:none}
.ubar .live{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ubar-cta{flex:none}

/* botão comum da barra: mesma altura e mesmo peso em todas as telas */
.ubar .ubtn{
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 14px;border-radius:10px;white-space:nowrap;
  transition:.15s var(--ease);
}
.ubar .ubtn:hover{background:var(--panel-3);border-color:var(--accent-line)}
.ubar .ubtn.pri{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;
}
.ubar .ubtn.pri:hover{filter:brightness(1.08)}
.ubar .ubtn.ico{width:38px;padding:0;font-size:16px}

/* --- tablet: o subtítulo é o primeiro a sair --- */
@media(max-width:1100px){
  .ubar-id .ubar-sub{display:none}
  .ubar{gap:var(--sp-2);padding:10px 16px}
}

/* --- celular: duas linhas fixas ---------------------------------------
   Linha 1: quem é a tela + a ação principal.
   Linha 2: as abas e as ferramentas.
   A ordem é a mesma em todas as telas, então o polegar aprende uma vez.
   Antes as ferramentas disputavam a primeira linha e espremiam o título
   até ele sumir (era o que acontecia no Minerador e no Painel). */
@media(max-width:820px){
  .ubar{
    flex-wrap:wrap;padding:9px 14px;
    padding-top:calc(9px + env(safe-area-inset-top));row-gap:9px;
  }
  .ubar-id{order:1;flex:1 1 auto}
  .ubar-id h1{font-size:15px}
  .ubar-ico{width:32px;height:32px;font-size:16px;border-radius:9px}
  .ubar-cta{order:2}
  .ubar::after{content:"";width:100%;order:3;height:0}   /* quebra de linha */
  .ubar-tabs{
    order:4;flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .ubar-tabs::-webkit-scrollbar{display:none}
  .ubar-tabs button,.ubar-tabs a{flex:1 0 auto;justify-content:center;padding:8px 13px}
  .ubar-tools{order:5;margin-left:auto}
  .ubar .ubtn{height:36px;padding:0 11px;font-size:12.5px}
  .ubar .ubtn.ico{width:36px}
}