/* ============ LOGIN ============ */
  #login{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:0;transition:opacity .5s;
    background:
      radial-gradient(1200px 700px at 78% -10%,rgba(90,160,255,.22),transparent 60%),
      radial-gradient(900px 600px at 10% 110%,rgba(var(--accent-rgb),.16),transparent 55%),
      linear-gradient(160deg,var(--bg1),var(--bg2) 55%,var(--bg3))}
  #login::before{content:"";position:absolute;inset:0;backdrop-filter:blur(2px);
    background:rgba(5,8,14,.25)}
  #login.gone{opacity:0;pointer-events:none}
  .lg-clock{position:absolute;top:56px;left:0;right:0;text-align:center}
  .lg-clock .t{font-size:74px;font-weight:600;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;text-shadow:0 2px 20px rgba(0,0,0,.4)}
  .lg-clock .d{font-size:18px;color:var(--ink);opacity:.8;margin-top:2px}
  .lg-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
    animation:none}
  .lg-card.shake{animation:shake .4s}
  @keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-9px)}
    40%,80%{transform:translateX(9px)}}
  .lg-av{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-size:46px;
    background:linear-gradient(150deg,var(--chrome-hi),var(--chrome));
    border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 34px rgba(0,0,0,.4),inset 0 0 0 3px rgba(255,255,255,.05)}
  .lg-name{font-size:21px;font-weight:600}
  .lg-fields{display:flex;flex-direction:column;gap:10px;width:230px;margin-top:4px}
  .lg-in{position:relative;display:flex;align-items:center}
  .lg-in input{width:100%;padding:9px 38px 9px 14px;border-radius:9px;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
    color:var(--ink);font-family:var(--sans);font-size:14px;outline:none;text-align:center}
  .lg-in input::placeholder{color:rgba(255,255,255,.6)}
  .lg-in input:focus{border-color:var(--accent);background:rgba(255,255,255,.2)}
  .lg-in .go{position:absolute;right:5px;width:28px;height:28px;border-radius:50%;
    display:grid;place-items:center;color:var(--ink);opacity:.65}
  .lg-in .go:hover{opacity:1;background:rgba(255,255,255,.15)}
  .lg-err{height:16px;font-size:12px;color:#ffb3b0;letter-spacing:.02em}
  .lg-hint{position:absolute;bottom:40px;left:0;right:0;text-align:center;
    font-size:12px;color:rgba(255,255,255,.55)}
  .lg-hint code{font-family:var(--mono);color:var(--accent)}
  /* Per-act line (slice D). Absolutely positioned exactly like .lg-hint, so it can never push the
     login card off centre — the card is the only thing on this screen that must not move. */
  .act-line{position:absolute;bottom:64px;left:0;right:0;text-align:center;
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.34)}
  .act-line:empty{display:none}
  /* Sign-in / sign-up switch. Absolutely positioned for the same reason .act-line is: the card is the
     one thing on this screen that must not move, and this element appears only when an API is
     configured — so laying it out in flow would shift the card between deployments. */
  .lg-alt{position:absolute;bottom:18px;left:0;right:0;text-align:center}
  .lg-alt[hidden]{display:none}
  .lg-alt-btn{background:none;border:0;padding:4px 8px;cursor:pointer;
    font-size:12px;color:rgba(255,255,255,.55);text-decoration:underline;text-underline-offset:3px}
  .lg-alt-btn:hover{color:rgba(255,255,255,.85)}
  /* The go button is disabled for the length of a real request; without this it reads as clickable
     and invites the double-submit the disable exists to prevent. */
  .lg-in .go:disabled{opacity:.3;cursor:progress}

  @media (prefers-reduced-motion:reduce){
    .win{animation:none;opacity:1;transform:none}
    .bootbar i{animation-duration:.6s}
    .dock .app{transition:none}
    .lg-card.shake{animation:none}
  }