/* Moved out of index.html unchanged (2026-10-15), so the page can run under a
   Content-Security-Policy without 'unsafe-inline'. */
  /* login card */
  .login-back{
    position:fixed;inset:0;background:rgba(5,8,12,.86);
    display:none;align-items:center;justify-content:center;padding:20px;z-index:100;
    overflow-y:auto;
  }
  .login-back.show{display:flex}
  .login{
    width:100%;max-width:400px;background:linear-gradient(180deg,#1c232e,#161c25);
    border:1px solid #38445533;border-radius:16px;padding:28px;
    box-shadow:0 26px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(240,192,90,.09);
    animation:rise .28s cubic-bezier(.2,.9,.3,1);margin:auto;
  }
  @keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}}
  .login h2{text-align:center;margin:0 0 4px;font-size:1.3rem}
  .login .sub{text-align:center;color:#7b8ca3;font-size:.84rem;margin:0 0 22px}
  .pw-wrap{position:relative}
  .pw-wrap input{padding-right:64px}
  .pw-toggle{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    background:none;border:0;color:#8fa0b6;cursor:pointer;font-size:.78rem;
    padding:8px 10px;border-radius:6px;font-weight:600;letter-spacing:.4px;
  }
  .pw-toggle:hover{color:#f0c05a;background:rgba(255,255,255,.04)}
  .row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 16px}
  .remember{display:flex;align-items:center;gap:8px;cursor:pointer;color:#a7b4c6;font-size:.87rem;margin:0}
  .remember input{width:18px;height:18px;accent-color:#c9962e;margin:0}
  .forgot{font-size:.83rem;color:#7b8ca3}

  /* human verification */
  .verify{
    border:1px solid #384455;border-radius:10px;padding:13px 15px;margin-bottom:16px;
    background:#12171f;display:flex;align-items:center;gap:12px;cursor:pointer;
    transition:border-color .2s;
  }
  /* Cloudflare renders its own widget in an iframe and styles it itself, so
     the container drops the placeholder's chrome and just holds the space. */
  .verify.turnstile-live{
    border:0;background:none;padding:0;cursor:default;display:block;min-height:65px;
  }
  .spinner{
    width:17px;height:17px;border:2px solid #55637a;border-top-color:#c9962e;border-radius:50%;
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  .login .btn{width:100%;margin-top:2px}
  .setup-note{
    font-size:.84rem;color:#a7b4c6;line-height:1.6;margin:0 0 16px;padding:11px 13px;
    background:rgba(78,163,224,.09);border:1px solid rgba(78,163,224,.3);border-radius:8px;
  }
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:420px){.field-row{grid-template-columns:1fr}}
  .login .msg{
    font-size:.83rem;margin:12px 0 0;padding:9px 12px;border-radius:7px;display:none;text-align:center;
  }
  .login .msg.show{display:block}
  .login .msg.bad{background:rgba(208,85,75,.14);color:#eda49d;border:1px solid rgba(208,85,75,.35)}
  .login .msg.ok{background:rgba(63,164,106,.14);color:#79d3a2;border:1px solid rgba(63,164,106,.35)}
  .login .close{
    position:absolute;top:14px;right:16px;background:none;border:0;color:#5f6f84;
    font-size:1.7rem;cursor:pointer;line-height:1;
  }
  .login-inner{position:relative}

  /* THE STAGE AS THE DOOR, for the length of a chase — see the stage's handler
     further down, which gives the stage its role and tabindex and takes
     them away again. Hung off the role, so the ring exists exactly while the
     stage is a control. The lamp's own ring, white and three pixels, and like
     the lamp's nothing for a pointer press: that press is already opening the
     card. Drawn inside the stage's box, because .hero clips what spills. */
  #carStage[role="button"]:focus{outline:none}
  #carStage[role="button"]:focus-visible{outline:3px solid #fff;outline-offset:-6px;border-radius:14px}