:root { --primary: #2dd4bf; }

.fundo-grade { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 30rem at 10% -10%, rgba(45, 212, 191, .12), transparent 60%),
    radial-gradient(50rem 30rem at 110% 10%, rgba(56, 189, 248, .08), transparent 60%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 32px; }

.vidro { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }

.entrar-suave { animation: entrar .22s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.campo { margin-top: .25rem; width: 100%; border-radius: .75rem; border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.6); padding: .5rem .75rem; color: #e2e8f0; outline: none; }
.campo:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,212,191,.2); }

.botao { border-radius: .75rem; background: #14b8a6; padding: .5rem 1rem; font-weight: 600; color: #022c22;
  transition: background .15s, transform .1s; }
.botao:hover { background: #2dd4bf; }
.botao:active { transform: scale(.98); }
.botao-discreto { border-radius: .75rem; border: 1px solid rgba(255,255,255,.12); padding: .25rem .75rem;
  font-size: .8rem; color: #cbd5e1; }
.botao-discreto:hover { border-color: var(--primary); color: var(--primary); }

.mensagem { border-radius: .75rem; border: 1px solid rgba(45,212,191,.3); background: rgba(45,212,191,.1);
  padding: .5rem 1rem; font-size: .875rem; }
.mensagem-error { border-color: rgba(251,113,133,.4); background: rgba(251,113,133,.12); }

.selo-saude { border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.selo-verde { background: rgba(52,211,153,.15); color: #6ee7b7; }
.selo-ambar { background: rgba(251,191,36,.15); color: #fcd34d; }
.selo-sem-dados { background: rgba(148,163,184,.15); color: #cbd5e1; }
.selo-vermelho { background: rgba(251,113,133,.15); color: #fda4af; }
.cartao.saude-verde { border-left: 3px solid #34d399; }
.cartao.saude-ambar { border-left: 3px solid #fbbf24; }
.cartao.saude-sem-dados { border-left: 3px solid #64748b; }
.cartao.saude-vermelho { border-left: 3px solid #fb7185; }
.selo-sem-forja { border-radius: 999px; border: 1px dashed rgba(255,255,255,.25); padding: .05rem .5rem;
  font-size: .7rem; color: #94a3b8; }
.selo-atrasado { border-radius: 999px; background: rgba(251,113,133,.18); color: #fda4af; padding: 0 .5rem; font-size: .7rem; }
.selo-hoje { border-radius: 999px; background: rgba(45,212,191,.18); color: #5eead4; padding: 0 .5rem; font-size: .7rem; }

.anel { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(#2dd4bf calc(var(--progresso) * 1%), rgba(255,255,255,.08) 0); }
.anel span { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  background: #020617; font-size: .7rem; color: #e2e8f0; }

kbd { border: 1px solid rgba(255,255,255,.2); border-radius: .3rem; padding: 0 .3rem; font-size: .7rem; color: #94a3b8; }

dialog::backdrop { background: rgba(2,6,23,.7); backdrop-filter: blur(2px); }

/* Ajuda contextual (componente da Forja, tema escuro) */
.help-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--primary); color: #022c22; border: none; cursor: pointer; font-size: 1.1rem; font-weight: 700;
  font-family: serif; box-shadow: 0 3px 10px rgba(0,0,0,.4); z-index: 900; display: flex; align-items: center;
  justify-content: center; transition: transform .15s; }
.help-btn:hover { transform: scale(1.08); }
.help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 950; cursor: pointer; opacity: 0;
  transition: opacity .25s; }
.help-overlay.is-open { opacity: 1; }
.help-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(430px, 100vw); background: #0b1220;
  color: #cbd5e1; box-shadow: -4px 0 28px rgba(0,0,0,.5); z-index: 960; display: flex; flex-direction: column;
  transform: translateX(110%); transition: transform .28s cubic-bezier(.4,0,.2,1); border-left: 1px solid rgba(255,255,255,.08); }
.help-panel.is-open { transform: translateX(0); }
.help-panel-header { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.help-panel-header h2 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--primary); }
.help-page-title { font-style: normal; font-weight: 400; font-size: .9em; margin-left: .2rem; color: #e2e8f0; }
.help-close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #94a3b8; line-height: 1; }
.help-close-btn:hover { color: #e2e8f0; }
.help-panel-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.help-panel-body h3 { font-size: .78rem; font-weight: 700; color: var(--primary); margin: 1.1rem 0 .4rem;
  text-transform: uppercase; letter-spacing: .07em; }
.help-panel-body h3:first-child { margin-top: 0; }
.help-panel-body p, .help-panel-body ul { font-size: .875rem; line-height: 1.65; margin: 0 0 .7rem; }
.help-panel-body ul { padding-left: 1.2rem; list-style: disc; }
.help-panel-body li { margin-bottom: .3rem; }
.help-tip { background: rgba(45,212,191,.08); border-left: 3px solid var(--primary); padding: .55rem .875rem;
  border-radius: 0 4px 4px 0; font-size: .82rem; margin: .75rem 0; line-height: 1.5; }
.help-warning { background: rgba(251,191,36,.08); border-left: 3px solid #fbbf24; padding: .55rem .875rem;
  border-radius: 0 4px 4px 0; font-size: .82rem; color: #fde68a; margin: .75rem 0; line-height: 1.5; }
.help-step { display: flex; gap: .75rem; margin-bottom: .7rem; align-items: flex-start; }
.help-step-num { flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--primary);
  color: #022c22; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: .1rem; }
.help-step-text { font-size: .875rem; line-height: 1.6; }
@media print { .help-btn, .help-panel, .help-overlay { display: none !important; } }