@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@500;700&display=swap");

:root {
  --bg: #07080a;
  --card: #0e1012;
  --card2: #13161a;
  --linha: #1f2328;
  --txt: #f4f5f2;
  --mut: #9aa1a6;
  --verde: #10f592;
  --verde-suave: rgba(16, 245, 146, 0.12);
  --verde-borda: rgba(16, 245, 146, 0.35);
  --erro: #ff5b5b;
  --sans: "Inter Tight", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --raio: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--verde); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.verde { color: var(--verde); }
.mut { color: var(--mut); }

.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linha); background: transparent; color: var(--txt); font: 600 15px var(--sans); padding: 13px 22px; border-radius: 12px; cursor: pointer; text-decoration: none; transition: .15s; }
.btn:hover { border-color: var(--verde-borda); }
.btn.primario { background: var(--verde); color: #04140b; border-color: var(--verde); }
.btn.primario:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; }

input, textarea { width: 100%; background: var(--card2); border: 1px solid var(--linha); color: var(--txt); font: 500 16px var(--sans); padding: 14px 16px; border-radius: 12px; outline: none; }
input:focus, textarea:focus { border-color: var(--verde-borda); box-shadow: 0 0 0 3px var(--verde-suave); }
label { display: block; font: 700 11px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--mut); margin: 0 0 8px; }

.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); }
.cubo { width: 34px; height: 34px; border: 2px solid var(--verde); border-radius: 9px; display: grid; place-items: center; font: 800 15px var(--sans); color: var(--verde); }
[hidden] { display: none !important; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .ic { width: 34px; height: 34px; flex: none; }
.logo .nome { height: 13px; width: auto; }