/* RexZap painel — identidade visual da familia REX (TyrexCO) */
:root {
  --ink:#0A0A0B; --ink-2:#131316; --ink-3:#1E1E22; --ink-4:#2A2A30;
  --line:#2E2E34; --line-soft:#1E1E22;
  --paper:#F4F1EA; --paper-2:#E9E4D9; --paper-3:#D9D3C5;
  --muted:#6B6B72; --muted-2:#9A9AA1;
  --help:#FF4D2E;             /* vermelho REX (erros/perigo) */
  --zap:#22C964;             /* verde RexZap (acento do produto) */
  --zap-2:#1BA552;
  --serif:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",monospace;
}

* { box-sizing:border-box; }
html,body {
  margin:0; padding:0; min-height:100%;
  font-family:var(--serif);
  background:var(--ink); color:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--zap); color:var(--ink); }
a { color:var(--zap); text-decoration:none; }
a:hover { color:var(--paper); }

/* ---------- Header ---------- */
header {
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.bar { max-width:1040px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 22px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand .mark { width:26px; height:26px; background:url('/brand/rex-mark-silver.png') center/contain no-repeat; }
.brand .wm { font-family:var(--serif); font-size:21px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--paper); }
.brand .wm .pre { font-weight:400; opacity:.5; }
.brand .wm .zap { color:var(--zap); }
nav { display:flex; align-items:center; gap:22px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
nav a { color:var(--muted-2); }
nav a:hover { color:var(--paper); }
nav .who { color:var(--muted); text-transform:none; letter-spacing:0; font-family:var(--serif); font-size:13px; }
.btn-link { color:var(--muted-2); }

main { max-width:1040px; margin:32px auto; padding:0 22px; }
footer {
  max-width:1040px; margin:48px auto; padding:28px 22px;
  color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  border-top:1px solid var(--line-soft);
}

/* ---------- Tipografia ---------- */
h1 { font-family:var(--serif); font-size:clamp(30px,4vw,44px); font-weight:700; letter-spacing:-.03em; line-height:1; margin:8px 0 24px; }
h2 { font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.02em; margin:0 0 14px; }
.muted { color:var(--muted-2); font-size:13px; }
code { font-family:var(--mono); background:var(--ink-3); padding:2px 7px; border-radius:6px; font-size:12px; letter-spacing:.02em; color:var(--paper-2); }

/* ---------- Cards / layout ---------- */
.card { background:var(--ink-2); border:1px solid var(--line); border-radius:18px; padding:22px; margin-bottom:18px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.center { max-width:440px; margin:48px auto; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------- Forms ---------- */
label { display:block; margin:12px 0 5px; color:var(--muted-2); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
input,select {
  width:100%; padding:11px 13px; background:var(--ink-3); border:1px solid var(--line);
  border-radius:9px; color:var(--paper); font-family:var(--serif); font-size:14px; outline:none;
  transition:border-color .15s ease;
}
input:focus,select:focus { border-color:var(--zap); }
input::placeholder { color:var(--muted); }

/* ---------- Buttons (padrao REX: primario = paper) ---------- */
.btn {
  display:inline-block; background:var(--paper); color:var(--ink); border:none;
  padding:11px 18px; border-radius:9px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600; cursor:pointer;
  transition:transform .12s ease, background .15s ease;
}
.btn:hover { transform:translateY(-1px); background:#fff; color:var(--ink); }
.btn.acc { background:var(--zap); color:var(--ink); }
.btn.acc:hover { background:var(--zap-2); color:var(--ink); }
.btn.sec { background:transparent; border:1px solid var(--line); color:var(--paper); }
.btn.sec:hover { border-color:var(--muted-2); background:transparent; color:var(--paper); }
.btn.danger { background:transparent; border:1px solid var(--help); color:var(--help); }
.btn.danger:hover { background:rgba(255,77,46,.12); color:var(--help); }

/* ---------- Alerts ---------- */
.alert { padding:11px 14px; border-radius:10px; margin:14px 0; font-size:13px; border:1px solid; }
.alert.err  { background:rgba(255,77,46,.10);  border-color:rgba(255,77,46,.5);  color:#ffd5cf; }
.alert.ok   { background:rgba(34,201,100,.10); border-color:rgba(34,201,100,.5); color:#bff5d4; }
.alert.warn { background:rgba(255,196,0,.10);  border-color:rgba(255,196,0,.5);  color:#ffe9b0; }

/* ---------- Pills ---------- */
.pill { display:inline-block; padding:3px 11px; border-radius:999px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; border:1px solid; }
.pill.on  { background:rgba(34,201,100,.12); color:var(--zap);  border-color:rgba(34,201,100,.45); }
.pill.off { background:rgba(154,154,161,.10); color:var(--muted-2); border-color:var(--line); }

/* ---------- Tables ---------- */
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:10px 10px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:500; }
td { text-align:left; padding:10px 10px; border-bottom:1px solid var(--line-soft); font-size:14px; }

/* ---------- QR ---------- */
.qr img { width:240px; height:240px; background:#fff; border-radius:12px; padding:10px; }