/* Estilo comum das páginas da plataforma (entrar, senha, minha conta). */
:root {
  --bg: #E9EDF0; --panel: #FFFFFF; --sunk: #F3F5F7; --ink: #1A2027; --muted: #5A6570; --line: #D6DCE1;
  --accent: #F2B705; --accent-ink: #1A2027; --pick: #D92B63; --bad: #B4232F; --ok: #1E8A4C; --grid: rgba(26,32,39,.06);
  --font-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111417; --panel: #191D22; --sunk: #14171B; --ink: #E9EDF1; --muted: #98A3AD; --line: #2A3138;
    --accent: #F5C21C; --accent-ink: #15181C; --pick: #FF5E8E; --bad: #FF7A84; --ok: #47C27E; --grid: rgba(255,255,255,.05); color-scheme: dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-body);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px;
  min-height: 100vh; padding: 24px max(16px, env(safe-area-inset-left, 0px)); }
body.center { display: grid; place-items: center; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pick); outline-offset: 2px; }
.card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px 22px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.hexmark { width: 36px; height: 32px; background: var(--accent); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); display: grid; place-items: center; flex: none; }
.hexmark::after { content: ""; width: 11px; height: 10px; background: var(--ink); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
h1 { margin: 0; font: 400 28px/1 var(--font-display); }
h2 { margin: 0; font-size: 17px; }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
input { background: var(--sunk); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: 15px; color: var(--ink); }
input:focus { border-color: var(--pick); outline: none; }
.btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; text-align: center; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font-size: 13.5px; }
.msg { margin: 0; font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line); }
.msg.bad { color: var(--bad); border-color: currentColor; }
.msg.ok { color: var(--ok); border-color: currentColor; }
.note { font-size: 13.5px; background: var(--sunk); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; }
.foot { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }