/* Tipografia, controles e o painel — os tijolos que todas as telas reusam. */

/* ---------- tipografia ---------- */
.display{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
}
.eyebrow{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ash-dim);
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- botões ---------- */
button{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--panel);color:var(--ash);
  border:1px solid var(--line2);border-radius:10px;
  padding:9px 14px;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
button:hover:not(:disabled){background:#fdeccb;border-color:var(--ember-dim);color:#5a3d1f}
button:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
button:disabled{opacity:.35;cursor:not-allowed}
button.primary{background:var(--ember);border-color:var(--ember-dim);color:#fff;font-weight:700;box-shadow:0 3px 0 var(--ember-dim)}
button.primary:hover:not(:disabled){background:#ff9d55;border-color:var(--ember-dim);color:#fff;transform:translateY(-1px)}
button.ghost{background:transparent;border-color:var(--line)}
button.danger{border-color:#5a2626;color:#e08080}
button.danger:hover:not(:disabled){background:#2a1414;border-color:var(--red);color:#fff}
button.sm{padding:5px 9px;font-size:10px}

/* ---------- campos ---------- */
input{
  font-family:var(--mono);font-size:13px;
  background:var(--panel2);color:var(--ash);
  border:1px solid var(--line2);border-radius:10px;
  padding:9px 11px;width:100%;
}
input:focus{outline:none;border-color:var(--ember)}
input::placeholder{color:#b9a77f}

/* ---------- painéis e telas ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 4px 0 rgba(150,120,60,.13),0 10px 24px rgba(120,95,40,.10)}
.panel h2{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.01em;margin-bottom:14px;color:#5a3d1f}
.screen{display:none}
.screen.on{display:block}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}