/* Design system da Claricia (https://claude.ai/artifact/CURmefqnX9uurKk1fjQvdX).
   Paleta espelhada de C:\code\oticas\src\lib\tema.ts: mude nos dois lugares. */
@font-face{font-family:Manrope;src:url('/static/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}

:root,[data-theme="light"]{
  --cl-paper:#f7f5ef;--cl-paper-bright:#fdfcf8;--cl-surface:#efede6;--cl-ink:#171a2e;--cl-ink-soft:#252a43;--cl-muted:#646778;
  --cl-line:#171a2e24;--cl-line-strong:#171a2e3d;--cl-amber:#d9a441;--cl-amber-dark:#ad7414;--cl-teal:#2f7375;--cl-info:#3d4f8f;
  --cl-destructive:#a63232;--cl-warning:#8a5a0c;--cl-primary:#171a2e;--cl-on-primary:#f7f5ef;--cl-focus-ring:#ad7414;color-scheme:light}
[data-theme="dark"]{
  --cl-paper:#0f1120;--cl-paper-bright:#171a2e;--cl-surface:#22263d;--cl-ink:#f1efe7;--cl-ink-soft:#dcdad2;--cl-muted:#9a9db0;
  --cl-line:#f1efe724;--cl-line-strong:#f1efe73d;--cl-amber:#d9a441;--cl-amber-dark:#e6b85c;--cl-teal:#5fb3b5;--cl-info:#9fb0e8;
  --cl-destructive:#ef8a8a;--cl-warning:#e6b85c;--cl-primary:#d9a441;--cl-on-primary:#171a2e;--cl-focus-ring:#d9a441;color-scheme:dark}
/* "Sistema" antes de o navegador informar o modo: segue a preferência do sistema operacional. */
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --cl-paper:#0f1120;--cl-paper-bright:#171a2e;--cl-surface:#22263d;--cl-ink:#f1efe7;--cl-ink-soft:#dcdad2;--cl-muted:#9a9db0;
  --cl-line:#f1efe724;--cl-line-strong:#f1efe73d;--cl-amber:#d9a441;--cl-amber-dark:#e6b85c;--cl-teal:#5fb3b5;--cl-info:#9fb0e8;
  --cl-destructive:#ef8a8a;--cl-warning:#e6b85c;--cl-primary:#d9a441;--cl-on-primary:#171a2e;--cl-focus-ring:#d9a441;color-scheme:dark}}
@media print{:root,[data-theme="dark"]{
  --cl-paper:#f7f5ef;--cl-paper-bright:#fdfcf8;--cl-surface:#efede6;--cl-ink:#171a2e;--cl-muted:#646778;--cl-line:#171a2e24;--cl-line-strong:#171a2e3d;
  --cl-teal:#2f7375;--cl-info:#3d4f8f;--cl-destructive:#a63232;--cl-primary:#171a2e;--cl-on-primary:#f7f5ef;color-scheme:light}}

*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:var(--cl-paper);color:var(--cl-ink);font:400 14px/1.5 Manrope,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:var(--cl-teal)}
:focus-visible{outline:2px solid var(--cl-focus-ring);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

h1{font-size:32px;line-height:1.15;font-weight:650;letter-spacing:-.04em;margin:0 0 4px}
h2{font-size:20px;line-height:1.25;font-weight:650;letter-spacing:-.02em;margin:0}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cl-muted);margin-bottom:8px}
.legenda{color:var(--cl-muted);margin:0;font-size:13px}

.marca{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;letter-spacing:-.03em}
.simbolo{width:32px;height:32px;flex:none}
.simbolo-anel{stroke:var(--cl-ink)}
.simbolo-arco{stroke:var(--cl-amber)}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 16px;border:1px solid var(--cl-line-strong);border-radius:8px;background:var(--cl-paper-bright);font-weight:600;cursor:pointer;white-space:nowrap}
.botao:hover{background:var(--cl-surface)}
.botao-primario{background:var(--cl-primary);border-color:var(--cl-primary);color:var(--cl-on-primary)}
.botao-primario:hover{background:var(--cl-primary);filter:brightness(1.12)}
.botao:disabled{opacity:.55;cursor:progress}

.seletor-tema{display:inline-flex;border:1px solid var(--cl-line-strong);border-radius:8px;overflow:hidden;background:var(--cl-paper-bright)}
.seletor-tema button{border:0;background:transparent;padding:6px 12px;font-size:13px;font-weight:600;color:var(--cl-muted);cursor:pointer}
.seletor-tema button+button{border-left:1px solid var(--cl-line)}
.seletor-tema button[aria-checked="true"]{background:var(--cl-surface);color:var(--cl-ink)}

.cartao{background:var(--cl-paper-bright);border:1px solid var(--cl-line);border-radius:12px}
.campo{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.campo input{height:40px;padding:0 12px;border:1px solid var(--cl-line-strong);border-radius:8px;background:var(--cl-paper);font-weight:400}
.aviso{margin:0 0 16px;padding:12px 16px;border:1px solid var(--cl-line-strong);border-radius:8px;background:var(--cl-surface)}
.aviso-erro{border-color:var(--cl-destructive);color:var(--cl-destructive)}

/* Login */
.login{max-width:400px;margin:0 auto;padding:24px 12px}
.login-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0 32px}
.login-cartao{display:flex;flex-direction:column;gap:16px;padding:24px}
.login-cartao h1{font-size:28px}
.login-cartao .botao{min-height:40px}

/* Painel */
.cabecalho{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 24px;border-bottom:1px solid var(--cl-line);background:var(--cl-paper-bright)}
.cabecalho-acoes{display:flex;align-items:center;gap:12px}
.cabecalho-acoes form{margin:0}
.conteudo{max-width:1200px;margin:0 auto;padding:24px}
.titulo-tela{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.numeros{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:24px;overflow:hidden}
.numero{padding:16px;border-right:1px solid var(--cl-line)}
.numero:last-child{border-right:0}
.numero span{display:block;color:var(--cl-muted);font-size:12px;font-weight:600}
.numero strong{font-size:28px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.numero-filtro{display:block;width:100%;text-align:left;border:0;border-right:1px solid var(--cl-line);background:transparent;cursor:pointer;font:inherit;color:inherit}
.numero-filtro:last-child{border-right:0}
.numero-filtro:hover{background:var(--cl-surface)}
.numero-filtro[aria-pressed="true"]{background:var(--cl-surface);box-shadow:inset 0 -3px 0 var(--cl-primary)}
.numero small{display:block;color:var(--cl-muted);font-size:12px}
.numero-filtro[aria-pressed="true"] small{color:var(--cl-ink);font-weight:600}
.ferramentas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.busca{flex:1 1 280px}
.busca input{width:100%;height:40px;padding:0 12px;border:1px solid var(--cl-line-strong);border-radius:8px;background:var(--cl-paper-bright)}
.filtro-contas{display:flex;gap:4px;flex-wrap:wrap}
.chip{border:1px solid var(--cl-line-strong);background:var(--cl-paper-bright);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--cl-muted)}
.chip[aria-pressed="true"]{background:var(--cl-primary);border-color:var(--cl-primary);color:var(--cl-on-primary)}
.chip b{font-weight:600;font-variant-numeric:tabular-nums;margin-left:4px}
.alternar{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.alternar input{accent-color:var(--cl-primary)}

.conta{margin-bottom:32px}
.conta-titulo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--cl-line)}
.conta-titulo .legenda{font-variant-numeric:tabular-nums}
.projetos{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.projeto{padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.projeto-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.projeto-nome{font-size:16px;font-weight:650;letter-spacing:-.02em;overflow-wrap:anywhere}
.projeto-topo a{font-size:13px;font-weight:600;white-space:nowrap}
.ambiente{border-top:1px solid var(--cl-line);padding-top:8px}
.ambiente-nome{font-size:12px;font-weight:700;color:var(--cl-muted);margin-bottom:4px}
.servico{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:6px 0}
.servico+.servico{border-top:1px dashed var(--cl-line)}
.servico-nome{font-weight:600;overflow-wrap:anywhere}
.servico-detalhe{grid-column:1/-1;font-size:12px;color:var(--cl-muted);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.servico-detalhe a{color:var(--cl-teal)}
.vazio{color:var(--cl-muted);font-size:13px;margin:0}
.situacao{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}
.situacao i{width:8px;height:8px;border-radius:50%;background:currentColor}
.situacao.no-ar{color:var(--cl-teal)}
.situacao.subindo{color:var(--cl-info)}
.situacao.falhou{color:var(--cl-destructive)}
.situacao.parado,.situacao.sem-deploy{color:var(--cl-muted)}
.situacao.sem-deploy i{background:transparent;border:1.5px solid currentColor}
.estado-vazio{padding:48px 16px;text-align:center;color:var(--cl-muted);border:1px dashed var(--cl-line-strong);border-radius:12px}

@media (max-width:760px){
  .cabecalho{padding:12px}
  .conteudo{padding:16px 12px}
  .titulo-tela{flex-direction:column;align-items:stretch}
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numeros>*{border-bottom:1px solid var(--cl-line)}
  .numeros>:nth-child(2n){border-right:0}
  .numeros>:last-child{grid-column:1/-1;border-bottom:0}
  .projetos{grid-template-columns:minmax(0,1fr)}
  h1{font-size:28px}
}

/* Ligar e desligar */
.projeto-acoes{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.botao-pequeno{min-height:32px;padding:0 12px;font-size:13px}
.botao-desligar{color:var(--cl-destructive)}
.aviso-ok{border-color:var(--cl-teal);color:var(--cl-ink)}
.dialogo{width:min(440px,calc(100vw - 24px));padding:24px;color:var(--cl-ink)}
.dialogo::backdrop{background:#0f112099}
.dialogo form{display:flex;flex-direction:column;gap:16px;margin:0}
.dialogo-acoes{display:flex;justify-content:flex-end;gap:8px}
.botao-primario.perigo{background:var(--cl-destructive);border-color:var(--cl-destructive);color:var(--cl-paper-bright)}

/* Rodapé: uso da Railway */
.rodape{border-top:1px solid var(--cl-line);background:var(--cl-paper-bright);margin-top:32px}
.rodape-conteudo{max-width:1200px;margin:0 auto;padding:24px}
.usos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:12px}
.uso{padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--cl-paper)}
.uso-conta{font-weight:650}
.uso-valor{font-size:28px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.uso-barra{height:8px;border-radius:999px;background:var(--cl-surface);overflow:hidden}
.uso-barra>div{height:100%;border-radius:999px;background:var(--cl-teal)}
.uso-barra.uso-aviso>div{background:var(--cl-warning)}
.uso-barra.uso-estourado>div{background:var(--cl-destructive)}
.uso-situacao{font-size:12px;font-weight:700;color:var(--cl-teal)}
.uso-situacao.uso-aviso{color:var(--cl-warning)}
.uso-situacao.uso-estourado{color:var(--cl-destructive)}
.uso-total{border-style:dashed}
.rodape-nota{font-size:12px}
@media (max-width:760px){.rodape-conteudo{padding:16px 12px}}