/* The portal's sign-in page, all of its look in this one file (EMM #628, 2026-10-03). A quiet,
   centred page: one card, generous space, the account's logo, one heading, the ways in. To
   restyle it, change the --si-* tokens first; the rules below read only them. The accent can be
   set per account (Account settings, Sign-in page), which overrides --si-accent on .si. */
:root{
  --si-page:#0b0d10; --si-card:#111418; --si-line:#1f242b; --si-ink:#e8ecf1; --si-dim:#8b95a1;
  --si-field:#0b0d10; --si-field-line:#262c34; --si-accent:#1f6feb; --si-accent-ink:#ffffff;
  --si-radius:16px; --si-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -20px rgba(0,0,0,.6);
  --si-font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,system-ui,sans-serif;
  --si-width:400px; --si-gap:14px;
  --si-bad:#e5484d;
}
html[data-bs-theme=light]{
  --si-page:#f6f7f9; --si-card:#ffffff; --si-line:#e7e9ed; --si-ink:#14171b; --si-dim:#69727d;
  --si-field:#ffffff; --si-field-line:#d9dde3;
  --si-shadow:0 1px 2px rgba(16,24,40,.04), 0 24px 48px -24px rgba(16,24,40,.18);
}
body.bare{ background:var(--si-page); }
body.bare .page{ max-width:none; padding:0; }
.si{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 16px; font-family:var(--si-font); color:var(--si-ink); position:relative; }
.si-mode{ position:absolute; top:16px; right:16px; background:transparent; border:1px solid var(--si-line);
  color:var(--si-dim); border-radius:999px; padding:3px 10px; font:inherit; font-size:.75rem; cursor:pointer; }
.si-mode:hover{ color:var(--si-ink); }
.si-card{ width:100%; max-width:var(--si-width); background:var(--si-card); border:1px solid var(--si-line);
  border-radius:var(--si-radius); box-shadow:var(--si-shadow); padding:40px 32px 32px; display:flex;
  flex-direction:column; gap:var(--si-gap); }
.si-logo{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:56px; margin-bottom:8px; }
.si-logo img{ max-height:56px; max-width:220px; width:auto; height:auto; display:block; }
.si-x{ color:var(--si-dim); }
.si-name{ font-weight:600; font-size:1.15rem; letter-spacing:-.01em; }
.si-h{ margin:0; text-align:center; font-size:1.5rem; font-weight:600; letter-spacing:-.02em; }
.si-sub{ margin:-6px 0 6px; text-align:center; color:var(--si-dim); font-size:.92rem; line-height:1.45; }
.si-btn{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px;
  border-radius:10px; font:inherit; font-size:.95rem; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:filter .15s ease, background .15s ease; }
a.si-btn{ text-decoration:none; }
.si-primary{ background:var(--si-accent); color:var(--si-accent-ink); }
.si-primary:hover{ filter:brightness(1.08); }
.si-secondary{ background:transparent; color:var(--si-ink); border-color:var(--si-field-line); margin-top:10px; }
.si-secondary:hover{ border-color:var(--si-accent); }
.si-ghost{ background:transparent; color:var(--si-dim); border-color:var(--si-line); }
.si-ghost:disabled{ cursor:not-allowed; opacity:.75; }
.si-btn:focus-visible, .si-field input:focus-visible, .si-code summary:focus-visible{
  outline:2px solid var(--si-accent); outline-offset:2px; }
.si-code{ border-top:1px solid var(--si-line); padding-top:14px; margin-top:4px; }
.si-code summary{ list-style:none; cursor:pointer; text-align:center; color:var(--si-dim); font-size:.86rem; }
.si-code summary::-webkit-details-marker{ display:none; }
.si-code summary:hover{ color:var(--si-ink); }
.si-code[open] summary{ margin-bottom:12px; }
.si-field{ display:block; }
.si-field span, .si-field > label{ display:block; font-size:.8rem; color:var(--si-dim); margin-bottom:6px; }
.si-field input{ width:100%; height:44px; background:var(--si-field); color:var(--si-ink); border:1px solid var(--si-field-line);
  border-radius:10px; padding:0 12px; font:inherit; }
.si-field input:focus{ border-color:var(--si-accent); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--si-accent) 22%, transparent); }
/* the code in six boxes (EMM #1362, 2026-10-30), and room between the code and Sign in */
.si-verify{ display:flex; flex-direction:column; gap:24px; }
.si-otp{ display:flex; gap:8px; justify-content:space-between; }
.si-otp[hidden]{ display:none; }
.si-field .si-otp-box{ width:100%; min-width:0; max-width:52px; height:56px; padding:0; text-align:center;
  font-size:1.4rem; font-weight:600; font-variant-numeric:tabular-nums; caret-color:var(--si-accent); }
.si-otp-box:focus-visible{ outline:2px solid var(--si-accent); outline-offset:2px; }
.si-otp-box[aria-invalid="true"]{ border-color:var(--si-bad); }
@media (max-width:360px){ .si-otp{ gap:6px; } .si-field .si-otp-box{ height:48px; font-size:1.2rem; } }
.si-hint{ color:var(--si-dim); font-size:.82rem; text-align:center; margin:0; min-height:0; }
.si-hint:empty{ display:none; }
.si-link{ background:none; border:0; padding:0; color:var(--si-accent); font:inherit; cursor:pointer; text-decoration:underline; }
.si-alert{ border-radius:10px; padding:10px 12px; font-size:.86rem; background:color-mix(in srgb, var(--si-accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--si-accent) 30%, transparent); }
.si-bad{ background:color-mix(in srgb, var(--si-bad) 12%, transparent); border-color:color-mix(in srgb, var(--si-bad) 35%, transparent); }
.si-foot{ margin-top:22px; max-width:var(--si-width); text-align:center; color:var(--si-dim); font-size:.78rem; }
.si a{ color:var(--si-accent); }
@media (max-width:480px){ .si{ padding:56px 16px 32px; justify-content:flex-start; } .si-card{ padding:32px 20px 24px; } }