/* tokens do DESIGN.md (clickhouse) */
  :root{
    --primary:#faff69; --primary-active:#e6eb52; --on-primary:#0a0a0a;
    --canvas:#0a0a0a; --surface-soft:#121212; --surface-card:#1a1a1a;
    --surface-elevated:#242424; --hairline:#2a2a2a; --hairline-strong:#3a3a3a;
    --ink:#ffffff; --body:#cccccc; --body-strong:#e6e6e6; --muted:#888888;
    --muted-soft:#5a5a5a;
    --success:#22c55e; --warning:#f59e0b; --error:#ef4444;

    /* escala fluida: ultrawide → mobile sem breakpoint por tamanho */
    --larg: clamp(20rem, 88vw, 96rem);        /* 320px … 1536px, curva contínua */
    --larg-texto: 68ch;                        /* linha de leitura confortável */
    --gap: clamp(0.75rem, 1.2vw, 1.25rem);
    --sec: clamp(3.5rem, 7vw, 7rem);           /* respiro entre seções */
    --pad-lateral: clamp(1rem, 4vw, 2.5rem);
    --t-display: clamp(2.125rem, 1.15rem + 3.4vw, 3.6rem);
    --t-titulo:  clamp(1.625rem, 1.1rem + 2.2vw, 2.75rem);
    --t-sub:     clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
    --t-corpo:   clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --raio: 12px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--canvas);color:var(--body);
    font:400 16px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
  nav{min-height:64px;display:flex;align-items:center;flex-wrap:wrap;row-gap:8px;
    gap:clamp(12px,2.2vw,28px);padding:8px clamp(16px,4vw,32px);
    border-bottom:1px solid var(--hairline)}
  nav .marca{color:var(--ink);font-weight:700;font-size:16px;letter-spacing:-.3px}
  nav .marca span{color:var(--primary)}
  nav a{color:var(--body);text-decoration:none;font-size:14px;font-weight:500;
    display:inline-flex;align-items:center;min-height:44px}
  nav .direita{display:flex;align-items:center;gap:clamp(12px,2vw,20px)}
  .email-nav{max-width:min(38vw,220px);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;color:var(--muted);font-size:13px}
  @media (max-width:600px){.email-nav{display:none}}
  nav a:hover{color:var(--ink)}
  nav .direita{margin-left:auto}
  main{max-width:1080px;margin:0 auto;padding:48px 32px 96px}
  h1{color:var(--ink);font-size:32px;font-weight:700;letter-spacing:-1px;
    line-height:1.2;margin:0 0 6px}
  h2{color:var(--ink);font-size:18px;font-weight:600;margin:48px 0 12px}
  .sub{color:var(--muted);margin:0 0 24px;font-size:14px}
  .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px}

  .stats{display:flex;gap:48px;margin:32px 0 16px;flex-wrap:wrap}
  .stat .n{color:var(--primary);font-size:56px;font-weight:700;
    letter-spacing:-1.5px;line-height:1;font-variant-numeric:tabular-nums}
  .stat .l{color:var(--muted);font-size:12px;font-weight:600;
    text-transform:uppercase;letter-spacing:1.5px;margin-top:8px}

  .cartao{background:var(--surface-card);border:1px solid var(--hairline);
    border-radius:12px;padding:24px;margin-top:16px}
  table{border-collapse:collapse;width:100%;font-size:14px}
  th{color:var(--muted);text-align:left;font-weight:600;font-size:12px;
    text-transform:uppercase;letter-spacing:1.5px;padding:8px 12px;
    border-bottom:1px solid var(--hairline-strong)}
  td{padding:11px 12px;border-bottom:1px solid var(--hairline);vertical-align:top;
    color:var(--body)}
  td strong{color:var(--ink);font-weight:600}
  tr:last-child td{border-bottom:none}

  .pill{display:inline-block;font-size:13px;font-weight:500;padding:3px 12px;
    border-radius:9999px;background:var(--surface-elevated);color:var(--ink)}
  .pill.conectado,.pill.publicado,.pill.concluido{color:var(--success)}
  .pill.erro,.pill.abandonado{color:var(--error)}
  .pill.novo,.pill.rascunho,.pill.pendente,.pill.aprovado,.pill.agendado,
  .pill.reconectar,.pill.executando{color:var(--warning)}

  .botao{display:inline-flex;align-items:center;justify-content:center;
    background:var(--primary);color:var(--on-primary);
    border:none;border-radius:8px;padding:12px 20px;min-height:40px;
    font:600 14px/1 Inter,sans-serif;cursor:pointer;text-decoration:none}
  @media (pointer:coarse){.botao{min-height:44px}}
  .botao:active{background:var(--primary-active)}
  .botao.secundario{background:var(--surface-card);color:var(--ink);
    border:1px solid var(--hairline-strong)}
  form.inline{display:inline-block;margin-right:8px}

  label{display:block;font-size:13px;font-weight:500;color:var(--body-strong);
    margin:16px 0 6px}
  input[type=text],input[type=password]{width:100%;height:40px;padding:10px 14px;
    background:var(--surface-card);color:var(--ink);border:1px solid var(--hairline-strong);
    border-radius:8px;font:400 15px Inter,sans-serif}
  input::placeholder{color:var(--muted-soft)}
  input:focus{outline:none;border-color:var(--primary)}

  .abas{display:flex;gap:4px;border-bottom:1px solid var(--hairline);
    margin-top:24px}
  .abas a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;
    padding:8px 14px;border-radius:8px 8px 0 0}
  .abas a:hover{color:var(--ink)}
  .abas a.ativa{background:var(--surface-card);color:var(--ink);
    border:1px solid var(--hairline);border-bottom-color:var(--surface-card)}
  .aviso{border:1px solid var(--hairline-strong);border-left:3px solid var(--warning);
    background:var(--surface-soft);padding:12px 16px;border-radius:0 8px 8px 0;
    margin:16px 0;color:var(--body-strong);font-size:14px}
  .check{list-style:none;padding:0;margin:0}
  .check li{padding:9px 0;border-bottom:1px solid var(--hairline);color:var(--body)}
  .check li strong{color:var(--ink);font-weight:600}
  .check li:last-child{border-bottom:none}
  .check .correcao{color:var(--muted);font-size:13px;margin:6px 0 0 28px;
    white-space:pre-wrap;font-family:"JetBrains Mono",monospace}
  .vazio{color:var(--muted);padding:16px 0}
  a{color:var(--primary)}
  /* (o CSS da landing agora vive em estatico/landing.css) */

  @media (max-width:768px){
    .hero h1{font-size:36px;letter-spacing:-1px}
    .hero{padding:48px 0 32px}
    .grade3{grid-template-columns:1fr}
    .faixa-cta{padding:40px 24px}
    .faixa-cta h2{font-size:28px}

    main{padding:32px 20px 64px}
    .stats{gap:28px}
    .stat .n{font-size:40px}
  }

/* ===== shell do app (sidebar) ===== */
.shell{display:flex;min-height:100vh}
.lateral{width:clamp(200px,15vw,264px);flex-shrink:0;border-right:1px solid var(--hairline);
  padding:20px 14px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh}
.lateral .marca{color:var(--ink);font-weight:700;font-size:16px;
  letter-spacing:-.3px;padding:6px 12px 18px;display:block;text-decoration:none}
.lateral .marca span{color:var(--primary)}
.lateral a.item{display:flex;align-items:center;gap:10px;color:var(--muted);
  text-decoration:none;font-size:14px;font-weight:500;padding:9px 12px;
  border-radius:8px}
.lateral a.item:hover{color:var(--ink);background:var(--surface-soft)}
.lateral a.item.ativa{color:var(--ink);background:var(--surface-card)}
.lateral a.item .ico{width:18px;text-align:center;opacity:.9}
.lateral .rodape-lateral{margin-top:auto;border-top:1px solid var(--hairline);
  padding-top:12px}
.lateral .rodape-lateral .email{color:var(--muted-soft);font-size:12px;
  padding:0 12px 6px;word-break:break-all}
.conteudo{flex:1;min-width:0;padding:clamp(20px,2.4vw,40px) var(--pad-lateral) 80px;
  max-width:min(100%, 1600px)}
.topo-pagina{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:8px}
.topo-pagina h1{margin:0}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin:20px 0}
.kpi{background:var(--surface-card);border:1px solid var(--hairline);
  border-radius:12px;padding:18px 20px}
.kpi .rotulo{color:var(--muted);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:1.2px}
.kpi .valor{color:var(--ink);font-size:34px;font-weight:700;
  letter-spacing:-1px;line-height:1.15;margin-top:6px;
  font-variant-numeric:tabular-nums}
.kpi .valor small{color:var(--muted);font-size:14px;font-weight:500;
  letter-spacing:0}
.kpi.destaque .valor{color:var(--primary)}

/* gráfico de barras */
.grafico{background:var(--surface-card);border:1px solid var(--hairline);
  border-radius:12px;padding:20px 22px}
.grafico h3{color:var(--ink);font-size:15px;font-weight:600;margin:0 0 4px}
.grafico .sub{margin:0 0 14px;font-size:13px}
.grafico svg{display:block;width:100%;height:auto}
.grafico .barra{fill:var(--primary)}
.grafico .barra:hover{fill:var(--primary-active)}
.grafico .eixo{stroke:var(--hairline-strong)}
.grafico .grade{stroke:var(--hairline)}
.grafico text{font:500 11px Inter,sans-serif;fill:var(--muted)}
.grafico text.valor-barra{fill:var(--body-strong);font-weight:600}

/* grade de duas colunas do painel */
.duas-colunas{display:grid;grid-template-columns:3fr 2fr;gap:14px;
  align-items:start}
.atividade{background:var(--surface-card);border:1px solid var(--hairline);
  border-radius:12px;padding:20px 22px}
.atividade h3{color:var(--ink);font-size:15px;font-weight:600;margin:0 0 10px}
.atividade .linha{display:flex;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--hairline);font-size:13px;color:var(--body)}
.atividade .linha:last-child{border-bottom:none}
.atividade .quando{color:var(--muted-soft);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* cards de site */
.cards-sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;margin-top:16px}
.card-site{background:var(--surface-card);border:1px solid var(--hairline);
  border-radius:12px;padding:20px;display:block;text-decoration:none}
.card-site:hover{border-color:var(--hairline-strong)}
.card-site h3{color:var(--ink);font-size:16px;font-weight:600;margin:0 0 4px}
.card-site .url{color:var(--muted);font-size:13px;
  font-family:"JetBrains Mono",monospace}
.card-site .meta-site{display:flex;gap:14px;margin-top:14px;color:var(--muted);
  font-size:12px}
.card-site .meta-site b{color:var(--body-strong);font-weight:600}

@media (max-width:900px){
  .shell{flex-direction:column}
  .lateral{width:100%;height:auto;position:static;flex-direction:row;
    align-items:center;overflow-x:auto;border-right:none;
    border-bottom:1px solid var(--hairline);padding:10px 14px}
  .lateral .marca{padding:0 10px 0 0}
  .lateral .rodape-lateral{margin:0 0 0 auto;border:none;padding:0;
    display:flex;align-items:center;gap:8px}
  .lateral .rodape-lateral .email{display:none}
  .conteudo{padding:24px 20px 64px}
  .duas-colunas{grid-template-columns:1fr}
}

/* ===== calendário ===== */
.mes{margin-top:20px}
.mes h3{color:var(--ink);font-size:15px;font-weight:600;margin:0 0 10px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .cabeca{color:var(--muted);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:1px;padding:0 0 4px;text-align:center}
.cal .dia{background:var(--surface-card);border:1px solid var(--hairline);
  border-radius:8px;min-height:88px;padding:8px}
.cal .dia.fora{background:transparent;border-color:transparent}
.cal .dia.hoje{border-color:var(--primary)}
.cal .num{color:var(--muted);font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums}
.cal .dia.hoje .num{color:var(--primary)}
.cal .item{display:block;margin-top:5px;padding:4px 6px;border-radius:5px;
  font-size:11px;line-height:1.25;text-decoration:none;
  background:var(--surface-elevated);color:var(--body-strong);
  border-left:3px solid var(--muted-soft)}
.cal .item .hora{color:var(--muted);font-variant-numeric:tabular-nums;
  margin-right:4px}
.cal .item.agendado{border-left-color:var(--primary)}
.cal .item.publicado{border-left-color:var(--success)}
.cal .item.vaga{border-left-color:var(--hairline-strong);color:var(--muted-soft);
  background:transparent;border:1px dashed var(--hairline-strong)}
.legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;
  color:var(--muted);font-size:12px}
.legenda span{display:flex;align-items:center;gap:6px}
.legenda i{width:10px;height:10px;border-radius:2px;display:inline-block}
@media (max-width:700px){
  .cal .dia{min-height:64px;padding:5px}
  .cal .item{font-size:10px}
}