/* CRCC Roteiro: modo noite do CRCC (marinho, marfim, dourado), feito para o celular. */
:root{
  --bg:#070B14; --bg2:#0E1626; --bg3:#131D31; --line:#22324A;
  --fg:#ECE7DC; --muted:#9AA6B8; --gold:#D2B074; --gold2:#B8975A;
  --dopa:#4DA8F0; --oxi:#D98FA6; --endo:#8FD1A8; --acao:#D2B074;
  --erro:#F08A7E;
  --serif:"Playfair Display",Georgia,serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}

/* Login */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-caixa{width:100%;max-width:360px}
.kicker{color:var(--gold);letter-spacing:.2em;font-size:12px;font-weight:800;margin:0}
.login .botao{width:100%;margin-top:6px}
.login h1{font-family:var(--serif);font-size:44px;margin:4px 0 28px;font-weight:600}
.login h1 em,.topo h1 em{color:var(--gold);font-style:italic}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:14px}
input,textarea,select{display:block;width:100%;margin-top:6px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:16px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--gold2)}
textarea{resize:vertical;line-height:1.45}

/* Botões */
.botao{background:var(--gold);color:#1A1306;border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;min-height:46px}
.botao:disabled{opacity:.5}
.botao.grande{width:100%;font-size:18px;padding:16px}
.botao.secundario{background:transparent;border:1px solid var(--line);color:var(--muted);width:100%}
.erro{color:var(--erro);font-size:14px}
.dica,.nota{color:var(--muted);font-size:13px}

/* Estrutura */
.topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:rgba(7,11,20,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topo h1{font-family:var(--serif);font-size:20px;margin:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voltar{background:none;border:0;font-size:32px;line-height:1;color:var(--gold);padding:0 8px 0 0;cursor:pointer}
main{padding:16px 16px calc(env(safe-area-inset-bottom) + 90px);max-width:720px;margin:0 auto}
.abas{position:fixed;bottom:0;left:0;right:0;display:flex;background:rgba(14,22,38,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
.abas a{flex:1;text-align:center;padding:14px 0;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}
.abas a.ativa{color:var(--gold)}
body.na-conversa .abas{display:none}
body.na-conversa main{padding-bottom:calc(env(safe-area-inset-bottom) + 170px)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted)}
.chip[aria-checked="true"]{background:var(--gold);color:#1A1306;border-color:var(--gold)}
.chips.pequenos{flex-wrap:nowrap;overflow-x:auto;margin-bottom:8px;scrollbar-width:none}
.chips.pequenos .chip{white-space:nowrap;padding:6px 12px;font-size:13px}
.campo{font-size:14px;color:var(--fg);font-weight:600}
.mais{margin:0 0 16px}
.mais summary{color:var(--muted);font-size:14px;cursor:pointer;margin-bottom:6px}

/* Conversa */
.pedido{background:var(--bg3);border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:10px 14px;margin:0 0 14px auto;max-width:88%;white-space:pre-wrap;font-size:14px;color:var(--muted)}
.cartao{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:12px}
.cartao h2{font-family:var(--serif);font-weight:600;font-size:20px;margin:0;color:var(--gold)}
.cartao-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.copiar{background:transparent;border:1px solid var(--gold2);color:var(--gold);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0}
.copiar.ok{background:var(--gold);color:#1A1306}
.corpo p{margin:0 0 10px}
.corpo ul,.corpo ol{margin:0 0 10px;padding-left:20px}
.corpo li{margin-bottom:6px}
.corpo strong{color:var(--fg)}
.versao-antiga{opacity:.75}
.versoes{margin:6px 0 16px}
.versoes summary{color:var(--muted);font-size:13px;cursor:pointer}
.meta{color:var(--muted);font-size:12px;margin:-4px 0 18px;text-align:right}

/* Roteiro com faixa de hormônio */
.falas{list-style:none;margin:0;padding:0}
.fala{border-left:4px solid var(--line);padding:6px 0 6px 12px;margin-bottom:6px;font-size:18px;line-height:1.45}
.fala small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;margin-bottom:2px}
.fala.dopamina{border-color:var(--dopa)} .fala.dopamina small{color:var(--dopa)}
.fala.ocitocina{border-color:var(--oxi)} .fala.ocitocina small{color:var(--oxi)}
.fala.endorfina{border-color:var(--endo)} .fala.endorfina small{color:var(--endo)}
.fala.acao{border-color:var(--acao)} .fala.acao small{color:var(--acao)}
.cena{color:var(--muted);font-style:italic;font-size:14px;padding:2px 0 6px 16px}

/* Carregando */
.gerando{display:flex;gap:12px;align-items:center;color:var(--muted)}
.gerando .bola{width:14px;height:14px;border-radius:50%;background:var(--gold);animation:pulsa 1.2s ease-in-out infinite;flex-shrink:0}
@keyframes pulsa{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* Ajuste */
.ajuste{position:fixed;left:0;right:0;bottom:0;background:rgba(14,22,38,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 16px calc(env(safe-area-inset-bottom) + 10px);z-index:6}
.ajuste>*{max-width:720px;margin-left:auto;margin-right:auto}
.linha-ajuste{display:flex;gap:8px;align-items:flex-end}
.linha-ajuste textarea,.linha-ajuste input{margin:0;flex:1}
.linha-ajuste .botao{min-width:52px}

/* Histórico */
.lista{list-style:none;margin:0;padding:0}
.lista li a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
.lista .rotulo{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:800}
.lista .quando{font-size:12px;color:var(--muted)}
.vazio{color:var(--muted);text-align:center;padding:40px 0}
.base{margin:8px 0;padding-left:18px;font-size:13px;color:var(--muted)}

.aviso{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 90px);transform:translateX(-50%);background:var(--gold);color:#1A1306;font-weight:700;padding:10px 18px;border-radius:999px;z-index:20;font-size:14px;max-width:calc(100% - 32px);text-align:center}
.cartao.simulado{border-color:var(--erro);color:var(--erro);font-size:14px}
.chave-card{border-color:var(--gold2)}
.chave-card h2{margin-bottom:4px}
.chave-card form{margin-top:10px}
.chave-card form .botao{margin-top:10px}
.chave-card a{color:var(--gold)}
.chave-mini{display:block;margin:0 0 14px auto;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer}

/* Histórico */
#busca{margin:0 0 12px}
.filtros{margin-bottom:8px}
.lista li.item a{padding:14px 2px}
.item .linha1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.item .titulo{font-weight:600;margin:4px 0 2px}
.item .previa{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.selo{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 8px;border:1px solid var(--line);color:var(--muted)}
.selo.aprovado{color:var(--endo);border-color:var(--endo)}
.selo.gravado{color:var(--dopa);border-color:var(--dopa)}
.selo.publicado{color:#1A1306;background:var(--gold);border-color:var(--gold)}
.estrela{color:var(--gold)}
.barra-peca{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.barra-peca select{margin:0;flex:1;padding:8px 12px}
.icone{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;color:var(--muted);font-size:14px}
#favorito-peca{color:var(--gold);font-size:18px;padding:6px 12px}