:root{
  --cal:#F4F6FB; --paper:#FFFFFF; --ink:#1B1F2A; --ink-soft:#667085; --line:#E2E6EF;
  --azulejo:#3654D6; --terracotta:#C1502E; --jasmine:#15803D; --err:#B91C1C;
  --ok-bg:#DCFCE7; --err-bg:#FEE2E2;
}
@media (prefers-color-scheme: dark){
  :root{ --cal:#0F1220; --paper:#181C2F; --ink:#E8EAF3; --ink-soft:#9AA3B8; --line:#2A3050;
         --azulejo:#818CF8; --terracotta:#E07A57; --jasmine:#4ADE80; --err:#F87171;
         --ok-bg:#12331F; --err-bg:#3B1518; }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; min-height:100vh; background:var(--cal); color:var(--ink);
  font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display:flex; justify-content:center; align-items:flex-start; padding:32px 16px; }
.card{ width:100%; max-width:460px; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; padding:24px 22px 28px; box-shadow:0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink-soft); margin-bottom:18px; }
.tile{ width:22px; height:22px; border-radius:6px; }
h1{ font-weight:700; letter-spacing:-.01em; font-size:1.6rem; line-height:1.2; margin:0 0 8px; }
h2{ font-weight:700; letter-spacing:-.01em; font-size:1.1rem; margin:0 0 10px; }
section{ border-top:1px solid var(--line); margin-top:22px; padding-top:18px; }
.lead{ color:var(--ink-soft); margin:0 0 20px; }
.hint{ color:var(--ink-soft); font-size:.9rem; margin:8px 0; }
small{ color:var(--ink-soft); }
a{ color:var(--azulejo); }
nav.top{ display:flex; justify-content:space-between; margin-bottom:14px; font-size:.95rem; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:600;
  padding:11px 16px; border-radius:12px; border:1.5px solid var(--line); background:var(--cal); color:var(--ink);
  cursor:pointer; text-decoration:none; min-height:44px; transition:transform .06s ease, filter .15s ease; }
.btn:active{ transform:scale(.98); }
.btn:hover{ filter:brightness(.97); border-color:var(--ink-soft); }
.btn:disabled{ opacity:.55; cursor:default; }
.btn.primary{ width:100%; background:var(--azulejo); border-color:var(--azulejo); color:#fff; font-size:1.05rem; }
.btn.primary svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.btn.small{ padding:6px 10px; min-height:36px; font-size:.88rem; font-weight:500; }
.btn.danger{ color:var(--err); }
details.alt{ margin-top:22px; border-top:1px solid var(--line); padding-top:14px; }
details.alt summary{ cursor:pointer; color:var(--azulejo); font-weight:600; }
form{ margin:0; }
details form, section > form:not(.inline){ display:grid; gap:12px; margin-top:12px; }
label{ display:grid; gap:4px; font-size:.92rem; color:var(--ink-soft); }
label.check{ display:flex; align-items:center; gap:8px; }
input{ font:inherit; font-size:16px; padding:10px 12px; border-radius:10px; border:1.5px solid var(--line);
  background:var(--paper); color:var(--ink); width:100%; }
input[type=checkbox]{ width:auto; }
input:focus-visible, .btn:focus-visible, summary:focus-visible{ outline:3px solid color-mix(in srgb, var(--azulejo) 45%, transparent); outline-offset:2px; }
.msg{ padding:10px 12px; border-radius:10px; margin:0 0 16px; }
.msg p{ margin:0 0 8px; }
.msg.err{ background:var(--err-bg); color:var(--err); }
.msg.ok{ background:var(--ok-bg); color:var(--jasmine); }
[hidden]{ display:none !important; }
.list{ list-style:none; margin:0 0 12px; padding:0; }
.list li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.list li:last-child{ border-bottom:0; }
.list li.user{ flex-wrap:wrap; }
.actions{ display:flex; flex-wrap:wrap; gap:6px; }
.inline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.tag{ display:inline-block; font-size:.75rem; padding:1px 7px; border-radius:99px; background:var(--ok-bg); color:var(--jasmine); }
.tag.warn{ background:var(--err-bg); color:var(--err); }
.copy{ font-family:ui-monospace, "JetBrains Mono", monospace; font-size:.85rem; }
.logout{ margin-top:26px; }