/* Lanterna: identidade copiada do design system do Disrupt (board · manual da marca v1.0).
   Roxo #7E57C2 é a marca; laranja #FF9800 é a ação/destaque; neutros quentes; Geist. */
:root {
  --f-sans: 'Geist'; --f-mono: 'Geist Mono'; --f-serif: 'Instrument Serif';
  --brand-50: #F4EFFB; --brand-100: #E7DCF6; --brand-200: #D0BCF0; --brand-300: #B79CE6; --brand-400: #9C7BD9;
  --brand: #7E57C2; --brand-600: #6940A8; --brand-700: #553389; --brand-800: #3F2569; --brand-900: #2A184A; --brand-ink: #1A0F33;
  --cta-50: #FFF4E5; --cta-100: #FFE3BD; --cta: #FF9800; --cta-500: #E8800A; --cta-600: #B86200;
  --paper: #FFFFFF; --bg: #F8F9FA; --line-soft: #EFF1F3; --line: #E6E8EB; --muted: #707578; --ink-soft: #4B5358; --ink: #2D3436;
  --ok: #1F8A5B; --ok-50: #E5F4EC; --warn: #C68A12; --warn-50: #FCF0DA; --err: #C7302A; --err-50: #F8E2E1; --info: #2A6FDB; --info-50: #E7EFFC;
  --hover: #F3F4F6;
  --r-sm: 6px; --r: 10px; --r-md: 14px; --r-lg: 20px;
  --sh-1: 0 1px 0 rgba(45,52,54,.04), 0 1px 2px rgba(45,52,54,.04);
  --sh-2: 0 1px 0 rgba(45,52,54,.04), 0 6px 16px -8px rgba(45,52,54,.10);
  --sh-3: 0 1px 0 rgba(45,52,54,.04), 0 18px 40px -16px rgba(45,52,54,.18);
  --t-fast: 120ms; --t-base: 180ms; --t-slow: 280ms; --t-extra: 450ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #221737; --bg: #170F29; --line-soft: #2A1E42; --line: #34274F; --muted: #A79DBD; --ink-soft: #D6CFE6; --ink: #F3EFFA;
    --hover: #2C2046; --brand-50: #2A1E44; --brand-100: #3A2A5E; --brand-700: #D0BCF0;
    --ok-50: #163527; --warn-50: #3A2C10; --err-50: #3B1A1A; --info-50: #172A47;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; overflow-x: hidden; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-sans), ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-600); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input { font: inherit; color: inherit; }
svg { flex: none; }
code { font-family: var(--f-mono), monospace; font-size: 12.5px; background: var(--brand-50); color: var(--brand-700); padding: 2px 6px; border-radius: 6px; }
::selection { background: var(--brand-100); }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.pequeno { font-size: 12.5px; }
.centro { text-align: center; }
.spacer { flex: 1; }

/* movimento (cap. 07 do manual): rápido, ease-out, só o que entra */
@keyframes surgir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes surgir-lado { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes flutuar { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -14px); } }
@keyframes crescer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }
.entra { animation: surgir var(--t-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* marca */
.assinatura { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.assinatura:hover { text-decoration: none; }
.assinatura .palavras { display: flex; flex-direction: column; line-height: 1; }
.assinatura .wordmark { font-weight: 700; font-size: 18px; letter-spacing: -0.045em; }
.assinatura .produto { font-size: 11.5px; color: var(--brand-400); margin-top: 3px; }
.assinatura.claro .wordmark { color: #fff; }
.simbolo .q-frente { transition: transform var(--t-base) var(--spring); transform-box: fill-box; transform-origin: center; }
.assinatura:hover .q-frente { transform: translate(-3px, -3px); }
.simbolo .q-frente { animation: respirar 3.2s var(--ease-in-out) infinite; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r); font-size: 13.5px; font-weight: 550; border: 1px solid var(--line); background: var(--paper); color: var(--ink); white-space: nowrap; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn.brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.brand:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn.largo { width: 100%; height: 42px; margin-top: 8px; font-weight: 650; }
.icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px; color: var(--muted); transition: background var(--t-fast), color var(--t-fast); }
.icon-btn:hover { background: var(--hover); color: var(--ink); text-decoration: none; }

/* login: arte escura com brilho roxo + laranja (igual ao board) */
.login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); min-height: 100vh; }
.login-arte { position: relative; overflow: hidden; color: #fff; padding: 44px 48px; display: flex; flex-direction: column; background: radial-gradient(700px 520px at 20% 20%, #3A2266 0%, transparent 60%), radial-gradient(520px 420px at 85% 90%, rgba(255,152,0,.22) 0%, transparent 60%), var(--brand-ink); }
.login-arte::before { content: ""; position: absolute; left: -120px; top: 45%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(126,87,194,.35), transparent 70%); animation: flutuar 14s var(--ease-in-out) infinite; }
.login-arte > * { position: relative; }
.login-frase { margin: auto 0; max-width: 440px; animation: surgir var(--t-extra) var(--ease-out) 120ms backwards; }
.login-frase h2 { font-family: var(--f-serif), serif; font-weight: 400; font-size: clamp(40px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.01em; }
.login-frase h2 em { color: var(--cta); }
.login-frase p { margin-top: 18px; color: var(--brand-300); font-size: 15px; max-width: 380px; }
.login-pe { font-size: 12.5px; color: rgba(183,156,230,.6); }
.login-form { display: grid; place-items: center; padding: 32px 20px; background: var(--bg); }
.cartao-login { width: min(360px, 100%); display: grid; gap: 6px; }
.cartao-login h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin-top: 14px; }
.cartao-login > .muted { margin-bottom: 14px; }
.cartao-login label { font-size: 13px; font-weight: 600; margin-top: 8px; }
.cartao-login input[type=email], .cartao-login input[type=password] { height: 44px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 14px; background: var(--paper); font-size: 16px; /* 16px: o iPhone não dá zoom ao tocar no campo */ transition: border-color var(--t-fast), box-shadow var(--t-base) var(--ease-out); }
.cartao-login input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-100); }
.cartao-login .pequeno { margin-top: 12px; }
.aviso { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r); font-size: 13px; margin-bottom: 4px; }
.aviso.erro { background: var(--err-50); color: var(--err); }
.aviso svg { margin-top: 2px; }

/* estrutura do app: barra lateral escura + conteúdo */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; animation: aparecer var(--t-slow) var(--ease-out); }
.lateral-app { position: sticky; top: 0; height: 100vh; background: var(--brand-ink); color: #fff; display: flex; flex-direction: column; padding: 18px 12px 14px; overflow: hidden; }
.lateral-app::before { content: ""; position: absolute; left: -90px; top: 40%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(126,87,194,.32), transparent 70%); pointer-events: none; animation: flutuar 14s var(--ease-in-out) infinite; }
.lateral-app::after { content: ""; position: absolute; right: -120px; bottom: -110px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,152,0,.16), transparent 70%); pointer-events: none; }
.lateral-app > * { position: relative; z-index: 1; }
.topo-marca { padding: 2px 8px 22px; }
.lateral-app nav { display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; color: var(--brand-300); position: relative; transition: background var(--t-fast), color var(--t-fast); animation: surgir-lado var(--t-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-item.ativo { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.ativo::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cta); }
.lateral-app .rodape { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--cta)); font-weight: 700; font-size: 13px; flex: none; }
.rodape .quem { min-width: 0; line-height: 1.25; }
.rodape .quem b { display: block; font-size: 13px; font-weight: 600; }
.rodape .quem span { display: block; font-size: 11.5px; color: var(--brand-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.rodape form { margin-left: auto; }
.rodape .icon-btn { color: var(--brand-300); }
.rodape .icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

.conteudo { display: flex; flex-direction: column; min-width: 0; }
.cabecalho { display: flex; align-items: center; gap: 14px; padding: 18px 28px 16px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.cabecalho .titulos { min-width: 0; animation: surgir var(--t-slow) var(--ease-out) 60ms backwards; }
.eyebrow { font-family: var(--f-mono), monospace; font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.cabecalho h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-top: 2px; }
.resumo { font-size: 12.5px; color: var(--muted); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.resumo b { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.corpo { padding: 22px 28px 40px; display: grid; gap: 22px; }

/* KPIs (CartaoKpi/GradeKpis do DS de BI: um número = KPI) */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--sh-1); transition: box-shadow var(--t-base), transform var(--t-base) var(--ease-out); }
.kpi:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.kpi-rot { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.kpi-rot svg { color: var(--brand); }
.kpi-val { font-family: var(--f-mono), monospace; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; color: var(--ink); }
.kpi-det { font-size: 11.5px; color: var(--muted); }

/* cartões de vídeo */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.video-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); color: var(--ink); display: flex; flex-direction: column; transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), border-color var(--t-base); }
.video-card:hover { text-decoration: none; border-color: var(--brand-200); box-shadow: var(--sh-3); transform: translateY(-3px); }
.thumb { position: relative; aspect-ratio: 16 / 9; background: var(--brand-ink); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-extra) var(--ease-out); }
.video-card:hover .thumb img { transform: scale(1.04); }
.thumb-vazia { display: grid; place-items: center; height: 100%; color: var(--brand-300); }
.duracao { position: absolute; right: 8px; bottom: 8px; background: rgba(26,15,51,.82); color: #fff; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; font-family: var(--f-mono), monospace; }
.video-info { padding: 12px 14px 14px; display: grid; gap: 7px; }
.video-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.video-info h3 { font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }
.video-pe { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-soft); }
.video-pe span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.video-pe svg { color: var(--muted); width: 14px; height: 14px; }
.alerta-txt, .alerta-txt svg { color: var(--warn) !important; }
.video-data { font-size: 11.5px; }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--brand-700); background: var(--brand-50); border-radius: 999px; padding: 2px 9px; }
.chip svg { width: 12px; height: 12px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.badge.ok { background: var(--ok-50); color: var(--ok); }
.badge.warning { background: var(--warn-50); color: var(--warn); }
.badge.destructive { background: var(--err-50); color: var(--err); }
.badge.info { background: var(--info-50); color: var(--info); }
.badge.brand { background: var(--brand-50); color: var(--brand-700); }

/* página do vídeo */
.grade-video { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.coluna-principal, .coluna-lado { display: grid; gap: 16px; min-width: 0; }
.painel-bloco { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sh-1); min-width: 0; }
.painel-bloco h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; margin-bottom: 12px; }
.painel-bloco h2 svg { color: var(--brand); }
.painel-bloco.atencao { border-color: #EBD3A4; background: linear-gradient(0deg, var(--paper), var(--paper)), var(--warn-50); }
.painel-bloco.atencao h2 svg { color: var(--warn); }
.contagem { margin-left: auto; font-size: 11.5px; font-weight: 650; background: var(--warn-50); color: var(--warn); border-radius: 999px; padding: 1px 9px; font-variant-numeric: tabular-nums; }
.painel-bloco p + p { margin-top: 6px; }
.player { padding: 0; overflow: hidden; background: #000; }
.player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); font-family: var(--f-mono), monospace; text-transform: uppercase; letter-spacing: .05em; }
.tabela td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela-rolagem { overflow-x: auto; margin: 0 -4px; }
.barra-linha { display: flex; align-items: center; gap: 8px; }
.barra-linha span { font-size: 12.5px; white-space: nowrap; }
.barra-trilho { width: 72px; flex: none; }
.barra { height: 8px; border-radius: 0 4px 4px 0; background: var(--brand); transform-origin: left; animation: crescer var(--t-extra) var(--ease-out) 200ms backwards; }
.barra.laranja { background: var(--cta); }
.descricao { white-space: pre-wrap; word-break: break-word; font-family: var(--f-sans), sans-serif; font-size: 13px; color: var(--ink-soft); max-height: 420px; overflow: auto; }
.lista-revisar { padding-left: 18px; display: grid; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.lista-creditos { list-style: none; display: grid; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.lista-creditos li { display: grid; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); word-break: break-word; }
.lista-creditos li:last-child { border-bottom: none; }
.lista-creditos span { font-family: var(--f-mono), monospace; font-size: 11px; color: var(--brand); }
.lista-creditos em { font-style: normal; color: var(--muted); font-size: 11.5px; }
.pares { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.pares dt { color: var(--muted); }
details summary { cursor: pointer; color: var(--brand-600); font-weight: 600; margin-top: 8px; }
details ul { padding-left: 18px; margin-top: 6px; display: grid; gap: 4px; }

/* vazio e erro */
.vazio, .erro-centro { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 56px 20px; }
.vazio { background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-md); }
.vazio-icone { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); }
.vazio-icone svg { width: 24px; height: 24px; }
.erro-centro { min-height: 100vh; align-content: center; }
.erro-centro h1 { font-size: 22px; letter-spacing: -0.02em; }

/* celular */
@media (max-width: 1180px) {
  .grade-video { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .login { grid-template-columns: 1fr; }
  .login-arte { padding: 28px 20px; min-height: 260px; }
  .login-frase h2 { font-size: 38px; }
  .app { grid-template-columns: 1fr; }
  .lateral-app { position: relative; height: auto; flex-direction: row; align-items: center; padding: 10px 16px; gap: 10px; }
  .lateral-app nav, .rodape .quem { display: none; }
  .lateral-app .rodape { margin: 0 0 0 auto; border: none; padding: 0; }
  .topo-marca { padding: 0; }
  .cabecalho { padding: 14px 16px; position: static; flex-wrap: wrap; }
  .cabecalho h1 { font-size: 20px; }
  .corpo { padding: 16px; }
  .videos { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px; }
  .kpi-val { font-size: 19px; }
  .kpi-rot { font-size: 11.5px; }
  .tabela th:nth-child(2), .tabela td:nth-child(2) { display: none; }
  .tabela td, .tabela th { padding: 8px 4px; }
  .barra-trilho { width: 36px; }
}