/* Colmeia — tela de entrada (mesmos tokens do painel; escuro por padrão) */
:root {
  --bg: #12151b; --surface: #1a1e27; --line: #2b3140; --line-strong: #3a4254;
  --ink: #e8ebf2; --ink-2: #b4bccc; --muted: #838c9f;
  --action: #8b97ff; --action-strong: #6f7cf6; --action-ink: #0d1022; --err: #ff6b5f;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --text: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--text);
  display: grid; place-items: center; padding: 24px 16px; }
.wrap { width: min(400px, 100%); display: grid; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 1.35rem var(--display); letter-spacing: -.01em; }
.mark { width: 24px; height: 26px; background: var(--action); position: relative;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.mark::after { content: ""; position: absolute; inset: 3px; background: var(--bg); clip-path: inherit; }
.mark::before { content: ""; position: absolute; inset: 8px; background: var(--action); z-index: 1;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; display: grid; gap: 6px; }
h1 { font: 700 1.6rem/1.1 var(--display); margin: 0; letter-spacing: -.02em; }
.sub { color: var(--ink-2); margin: 4px 0 12px; }
label { font-weight: 500; font-size: .9rem; margin-top: 8px; }
input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg);
  color: var(--ink); font: inherit; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.hint { color: var(--muted); font-size: .82rem; margin: 2px 0 0; }
.msg { color: var(--err); font-size: .9rem; min-height: 1.35em; margin: 8px 0 0; }
button { margin-top: 6px; padding: 12px; border: 0; border-radius: 10px; background: var(--action); color: var(--action-ink);
  font: 600 1rem var(--text); cursor: pointer; }
button:hover { background: var(--action-strong); }
button:disabled { opacity: .6; cursor: progress; }
button.link { background: transparent; color: var(--ink-2); font-weight: 500; padding: 8px; }
button.link:hover { color: var(--ink); background: transparent; }