/* ==========================================================================
   mcpanel — login.css
   Self-contained sign-in skin. This page is served pre-auth with its own tiny
   shell (bg / bg2 / #login-root) and does NOT load app.css, so every token it
   needs is (re)declared here. It mirrors the app's "Aurora" glassmorphism —
   deep #05080f field, soft radial blobs, one frosted glass card. Dark only.

   Strict CSP: no @imports, no external fonts/images, no url() to any host.

   Section index:
     1. Reset + design tokens
     2. Page + animated background blobs
     3. The glass card
     4. Head (logo / title / subtitle)
     5. Panes, fields, code input
     6. Buttons + text links
     7. QR pane
     8. Notes, hints, errors
     9. Responsive + safe-area
     10. Reduced motion / focus
   ========================================================================== */

/* ---- 1. Reset + design tokens ------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#05080f;
  --fg:#eef3f8;
  --muted:#8fa1b6;
  --muted2:#7e8ea2;
  --dim:#5a6573;
  --accent:#58a6ff;
  --accent-rgb:88,166,255;
  --accent-2:#15d1c0;
  --accent-fg:#cfe4ff;
  --error:#f85149;
  --error-bg:rgba(248,81,73,.10);
  --error-border:rgba(248,81,73,.34);
  /* glass surfaces */
  --card:rgba(255,255,255,.06);
  --card-border:rgba(255,255,255,.14);
  --card-shadow:0 24px 70px rgba(2,6,16,.60),0 2px 8px rgba(2,6,16,.40),
                inset 0 1px 0 rgba(255,255,255,.18);
  --field:rgba(5,8,15,.42);
  --field-border:rgba(255,255,255,.12);
  --field-border-focus:rgba(var(--accent-rgb),.70);
  --hover:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --radius:18px;
  --radius-sm:12px;
  --brand-grad:linear-gradient(90deg,#00c9ff,#7aa2ff 55%,#9b8bff);
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,
              Helvetica,Arial,system-ui,sans-serif;
  --font-num:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,
             system-ui,sans-serif;
  color-scheme:dark;
}

/* ---- 2. Page + animated background blobs -------------------------------- */
html,body{min-height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  overflow-x:hidden;               /* the page body must never scroll sideways */
}

/* Two fixed blob layers behind everything — the exact Aurora palette the panel
   and public stats widget share. They drift slowly so the glass has life. */
.bg,.bg2{position:fixed;inset:0;pointer-events:none;will-change:transform}
.bg{
  z-index:-2;
  background:
    radial-gradient(38% 48% at 18% 22%, rgba(0,201,255,.40), transparent 60%),
    radial-gradient(44% 52% at 82% 28%, rgba(94,108,255,.34), transparent 62%),
    radial-gradient(50% 50% at 62% 88%, rgba(21,209,192,.30), transparent 60%),
    radial-gradient(42% 46% at 12% 82%, rgba(177,76,255,.24), transparent 60%),
    var(--bg);
  animation:blobDrift 30s ease-in-out infinite alternate;
}
.bg2{
  z-index:-1;
  background:
    radial-gradient(34% 40% at 70% 55%, rgba(0,201,255,.12), transparent 62%),
    radial-gradient(30% 36% at 30% 40%, rgba(150,90,255,.10), transparent 62%);
  animation:blobDrift2 38s ease-in-out infinite alternate;
}
@keyframes blobDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2.5%,1.8%,0) scale(1.06)}
}
@keyframes blobDrift2{
  from{transform:translate3d(0,0,0) scale(1.04)}
  to{transform:translate3d(3%,-2%,0) scale(1)}
}

/* ---- 3. The glass card -------------------------------------------------- */
#login-root{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100dvh;
  width:100%;
  /* safe-area so nothing hides under a notch / home indicator on phones */
  padding:calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
          calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.login-card{
  width:100%;
  max-width:384px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  padding:30px 28px 26px;
  /* frosted glass — vendor-prefixed for Safari/iOS */
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  position:relative;
  overflow:hidden;
}
/* faint specular sheen along the top edge, like the app cards */
.login-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  pointer-events:none;
}

/* ---- 4. Head (logo / title / subtitle) ---------------------------------- */
.login-head{text-align:center;margin-bottom:22px}
.login-logo{
  width:46px;height:46px;margin:0 auto 14px;border-radius:14px;
  background:var(--brand-grad);
  box-shadow:0 8px 22px rgba(0,140,255,.30),inset 0 1px 0 rgba(255,255,255,.45);
  position:relative;
}
/* a small glyph cut into the logo tile */
.login-logo::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border-radius:5px;border:2.5px solid rgba(5,8,15,.55);
}
.login-title{
  font-family:var(--font-num);
  font-size:22px;font-weight:800;letter-spacing:.2px;line-height:1.2;
  word-break:break-word;                /* long panel names must not overflow */
}
.login-sub{margin-top:5px;color:var(--muted);font-size:12.5px}

/* ---- 5. Panes, fields, code input --------------------------------------- */
.pane{display:flex;flex-direction:column;gap:12px}
.pane[hidden]{display:none}

.field-label{
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);
}

.field{
  width:100%;
  background:var(--field);
  color:var(--fg);
  border:1px solid var(--field-border);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:15px;font-family:inherit;
  outline:none;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
  -webkit-appearance:none;appearance:none;
}
.field::placeholder{color:var(--dim)}
.field:focus{
  border-color:var(--field-border-focus);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.20);
  background:rgba(5,8,15,.55);
}

/* The 6-digit enrol input — big, centred, wide-tracked, tabular figures. */
.code-input{
  text-align:center;
  font-family:var(--font-num);
  font-size:30px;font-weight:700;
  letter-spacing:.34em;
  /* letter-spacing pushes text right; pull the padding left so it looks centred */
  padding-left:calc(14px + .34em);
  font-variant-numeric:tabular-nums;
  caret-color:var(--accent);
}

/* ---- 6. Buttons + text links -------------------------------------------- */
.btn{
  width:100%;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:12px 16px;
  font-family:var(--font-num);
  font-size:14px;font-weight:700;
  cursor:pointer;
  transition:transform .1s ease,filter .14s ease,background .14s ease,opacity .14s ease;
  -webkit-appearance:none;appearance:none;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default}
.btn-primary{
  color:#fff;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),1),rgba(var(--accent-rgb),.86));
  box-shadow:0 6px 18px rgba(var(--accent-rgb),.32),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-ghost{
  color:var(--accent-fg);
  background:var(--hover);
  border-color:var(--field-border);
}
.btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.10)}

/* the "sign in another way" row + inline text links */
.login-alt{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 10px;text-align:center;
}
.linkbtn{
  background:none;border:none;padding:2px 2px;cursor:pointer;
  color:var(--accent);font-family:inherit;font-size:12.5px;font-weight:600;
  border-radius:6px;transition:color .12s ease;
}
.linkbtn:hover{color:var(--accent-fg);text-decoration:underline}
.alt-dot{color:var(--dim);font-size:12px;user-select:none}

/* ---- 7. QR pane --------------------------------------------------------- */
.qr-box{
  align-self:center;
  background:#fff;                       /* white quiet-zone so any scanner reads it */
  border-radius:14px;
  padding:14px;
  width:200px;height:200px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(2,6,16,.45);
}
.qr-box svg,.qr-box img{width:100%;height:100%;display:block}
.qr-box.is-loading{
  color:#0b0f17;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.9);
}
.qr-cap{color:var(--muted);font-size:12.5px;text-align:center;line-height:1.4}
/* fallback shown if the QR encoder is missing or the link can't be drawn */
.qr-fallback{
  font-size:12px;color:var(--muted);text-align:center;word-break:break-all;
}
.qr-fallback a{color:var(--accent)}

/* ---- 8. Notes, hints, errors -------------------------------------------- */
.hint{color:var(--muted2);font-size:12px;text-align:center;margin-top:2px}

/* friendly note shown when this (unauth) device is asked to approve a sign-in */
.login-note{
  background:rgba(var(--accent-rgb),.10);
  border:1px solid rgba(var(--accent-rgb),.32);
  border-radius:var(--radius-sm);
  padding:11px 13px;margin-bottom:18px;
  color:var(--accent-fg);font-size:12.5px;line-height:1.45;text-align:center;
}
.login-note[hidden]{display:none}

/* inline field error, one per form; aria-live so screen readers announce it */
.field-error{
  color:var(--error);
  background:var(--error-bg);
  border:1px solid var(--error-border);
  border-radius:10px;
  padding:9px 12px;font-size:12.5px;line-height:1.4;
}
.field-error[hidden]{display:none}
.qr-status{
  color:var(--error);font-size:12.5px;text-align:center;font-weight:600;
}
.qr-status[hidden]{display:none}

/* ---- 9. Responsive + safe-area ------------------------------------------ */
@media (max-width:420px){
  .login-card{padding:26px 20px 22px;border-radius:16px}
  .login-title{font-size:20px}
  .code-input{font-size:26px;letter-spacing:.26em;padding-left:calc(14px + .26em)}
  .qr-box{width:180px;height:180px}
}
@media (max-height:560px){
  #login-root{align-items:flex-start}
}

/* ---- 10. Reduced motion / focus ----------------------------------------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.field:focus-visible{outline:none}   /* fields show their own focus ring above */

@media (prefers-reduced-motion:reduce){
  .bg,.bg2{animation:none}
  *{transition-duration:.001ms !important}
}

/* QR verification number (anti-QRLJacking number matching) */
.qr-verify{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:10px}
.qr-verify-label{font-size:11px;color:#8b98ad;text-transform:uppercase;letter-spacing:.6px}
.qr-verify-code{font-family:ui-monospace,Menlo,monospace;font-size:26px;font-weight:800;letter-spacing:6px;color:#eef3f8}

/* ---- Passkey pane (WebAuthn) -------------------------------------------- */
.pane-passkey{align-items:center;text-align:center}
.passkey-icon{
  width:66px;height:66px;margin:2px auto 2px;border-radius:20px;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.20),rgba(21,209,192,.13));
  border:1px solid var(--card-border);
  display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 22px rgba(2,6,16,.35);
}
.passkey-icon::after{
  content:"";width:34px;height:34px;background:var(--brand-grad);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M14 2a6 6 0 0 0-5.6 8.2L2 16.6V22h5.4l1-1v-2h2v-2h2l1.2-1.2A6 6 0 1 0 14 2zm2.5 5.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M14 2a6 6 0 0 0-5.6 8.2L2 16.6V22h5.4l1-1v-2h2v-2h2l1.2-1.2A6 6 0 1 0 14 2zm2.5 5.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>') center/contain no-repeat;
}
.btn-passkey{width:100%;margin-top:4px;font-size:15px;padding:12px 16px}