/* Painel ORYLON: escuro por escolha (azul-marinho, azul elétrico e violeta), sem tema claro */
:root {
  --fundo: #0B1020;
  --superficie: #121931;
  --superficie-2: #18213F;
  --linha: #26304F;
  --texto: #F7F8FB;
  --suave: #A9B1C7;
  --apagado: #6F7893;
  --azul: #4A5FF2;
  --violeta: #9B6CFF;
  --verde: #14D9A0;
  --alerta: #F5B54A;
  --erro: #FF6B7A;
  --display: Sora, "Segoe UI", system-ui, sans-serif;
  --texto-f: Inter, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(circle at 85% -10%, rgba(124, 58, 237, .18), transparent 40%), var(--fundo);
  background-attachment: fixed;
  color: var(--texto);
  font: 15px/1.5 var(--texto-f);
  min-height: 100vh;
}
a { color: var(--azul); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Estrutura */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.lateral { min-width: 0; border-right: 1px solid var(--linha); padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; align-items: center; gap: 10px; font: 700 18px var(--display); letter-spacing: .08em; padding-left: 8px; }
.marca img { width: 30px; height: 30px; }
.marca small { display: block; font: 500 10px var(--mono); letter-spacing: .14em; color: var(--suave); }
nav { display: grid; gap: 4px; min-width: 0; }
nav button { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; color: var(--suave); font-weight: 500; }
nav button:hover { background: var(--superficie); color: var(--texto); }
nav button[aria-current="page"] { background: linear-gradient(135deg, rgba(74, 95, 242, .22), rgba(155, 108, 255, .16)); color: var(--texto); }
nav .etapa { font: 500 10px var(--mono); color: var(--apagado); border: 1px solid var(--linha); border-radius: 999px; padding: 1px 7px; }
.usuario { margin-top: auto; font-size: 12px; color: var(--apagado); display: grid; gap: 8px; padding-left: 8px; word-break: break-all; }
.usuario button { all: unset; cursor: pointer; color: var(--suave); text-decoration: underline; }

main { padding: 32px clamp(16px, 4vw, 48px) 64px; display: grid; gap: 24px; align-content: start; min-width: 0; }
.topo { min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.topo h1 { font: 700 clamp(24px, 3vw, 30px)/1.15 var(--display); margin: 0; letter-spacing: -.01em; }
.topo p { overflow-wrap: anywhere; margin: 4px 0 0; color: var(--suave); font-size: 13px; }
.botao { cursor: pointer; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 13px; }
.botao:hover { border-color: var(--azul); }
.botao[disabled] { opacity: .5; cursor: wait; }
.botao.primario { background: linear-gradient(135deg, #1B33C9, #7C3AED); border: 0; }
.aviso { padding: 10px 14px; border-radius: 10px; background: rgba(245, 181, 74, .12); color: var(--alerta); font-size: 13px; }
.aviso.erro { background: rgba(255, 107, 122, .12); color: var(--erro); }

.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 20px; min-width: 0; }
.cartao h2 { font: 600 15px var(--display); margin: 0 0 4px; }
.cartao .sub { color: var(--apagado); font-size: 12px; margin: 0 0 16px; }
.rotulo { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }

/* Meta */
.meta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; background: linear-gradient(135deg, rgba(27, 51, 201, .35), rgba(124, 58, 237, .25)), var(--superficie); }
.meta .numero { font: 800 clamp(48px, 7vw, 72px)/1 var(--display); letter-spacing: -.03em; margin: 8px 0 4px; }
.meta .de { color: var(--suave); }
.barra { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); margin: 22px 0 8px; }
.barra span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--azul), var(--verde)); min-width: 6px; }
.barra i { position: absolute; top: -4px; width: 2px; height: 18px; background: rgba(255, 255, 255, .35); }
.marcos { display: flex; justify-content: space-between; font: 500 11px var(--mono); color: var(--suave); }
.proxima { display: grid; gap: 12px; align-content: center; }
.proxima dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
.proxima dt { color: var(--suave); font-size: 13px; }
.proxima dd { margin: 0; text-align: right; font: 600 14px var(--mono); }
.nota { color: var(--apagado); font-size: 12px; margin: 0; }

/* Indicadores */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { display: grid; gap: 6px; align-content: start; }
.kpi strong { font: 700 28px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.kpi small { color: var(--apagado); font-size: 12px; }
.kpi .sobe { color: var(--verde); }
.kpi .desce { color: var(--erro); }
.kpi.vazio strong { color: var(--apagado); font-size: 20px; }

.duas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.grafico { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--apagado); font: 11px var(--mono); }
.legenda-graf { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--suave); margin-top: 8px; }
.legenda-graf span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c); vertical-align: -1px; }

/* Listas */
.fila { display: grid; gap: 10px; }
.fila li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.fila img { width: 44px; height: 55px; object-fit: cover; border-radius: 6px; background: var(--superficie-2); }
.fila .story img { height: 78px; }
.fila b { display: block; font: 600 12px var(--mono); color: var(--suave); }
.fila p { margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul { list-style: none; margin: 0; padding: 0; }
.log li { display: flex; gap: 10px; font-size: 12px; color: var(--suave); padding: 6px 0; border-top: 1px solid var(--linha); }
.log li:first-child { border-top: 0; }
.selo { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; background: rgba(20, 217, 160, .14); color: var(--verde); white-space: nowrap; }
.selo.parcial { background: rgba(245, 181, 74, .14); color: var(--alerta); }
.selo.erro { background: rgba(255, 107, 122, .14); color: var(--erro); }

/* Desempenho */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros button { cursor: pointer; border: 1px solid var(--linha); background: transparent; color: var(--suave); border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.filtros button[aria-pressed="true"] { background: var(--superficie-2); color: var(--texto); border-color: var(--azul); }
.filtros select { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; }
.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: right; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th:nth-child(-n+2), td:nth-child(-n+2) { text-align: left; }
td { padding: 10px; border-bottom: 1px solid var(--linha); text-align: right; font-variant-numeric: tabular-nums; vertical-align: middle; }
td .tit { display: flex; align-items: center; gap: 10px; min-width: 260px; }
td .tit img { width: 36px; height: 45px; object-fit: cover; border-radius: 5px; flex: none; background: var(--superficie-2); }
td .tit span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pos { font: 700 13px var(--mono); color: var(--apagado); }
.porTipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

.breve { text-align: center; padding: 48px 20px; display: grid; gap: 10px; justify-items: center; }
.breve h2 { font: 700 22px var(--display); margin: 0; }
.breve p { color: var(--suave); max-width: 52ch; margin: 0; }
.breve ul { text-align: left; color: var(--suave); font-size: 14px; display: grid; gap: 6px; list-style: disc; padding-left: 20px; }

/* Entrar */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.entrar form { width: min(380px, 100%); display: grid; gap: 14px; }
.entrar h1 { font: 700 24px var(--display); margin: 8px 0 0; }
.entrar p { color: var(--suave); margin: 0; font-size: 14px; }
.entrar label { display: grid; gap: 6px; font-size: 13px; color: var(--suave); }
.entrar input { background: var(--superficie-2); border: 1px solid var(--linha); color: var(--texto); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 16px; }
.entrar input:focus { outline: 2px solid var(--azul); border-color: transparent; }
.entrar .botao { justify-self: start; padding: 11px 22px; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas, .meta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linha); gap: 14px; padding: 16px; }
  nav { grid-auto-flow: column; overflow-x: auto; }
  nav button { white-space: nowrap; }
  nav .etapa { display: none; }
  .usuario { display: none; }
  .kpi strong { font-size: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cartao { animation: surgir .35s ease both; }
  .barra span { transition: width .8s ease; }
}
@keyframes surgir { from { transform: translateY(6px); } to { transform: none; } }