body { font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
         background:#0b0e14; color:#cdd6f4; margin:0; min-height:100vh;
         display:flex; align-items:center; justify-content:center; }
  .card { background:#11131c; border:1px solid #313244; border-radius:10px;
          padding:28px 32px; width:300px; }
  h1 { font-size:16px; margin:0 0 2px; color:#89b4fa; }
  .sub { color:#7f849c; font-size:12px; margin-bottom:18px; }
  label { display:block; color:#7f849c; font-size:12px; margin:10px 0 3px; }
  input { font:inherit; background:#181825; color:#cdd6f4; width:100%;
          border:1px solid #313244; border-radius:5px; padding:7px 9px;
          box-sizing:border-box; }
  input:focus { outline:none; border-color:#89b4fa; }
  button { font:inherit; background:#89b4fa; color:#0b0e14; border:0;
           border-radius:5px; padding:8px 0; width:100%; margin-top:16px;
           cursor:pointer; font-weight:bold; }
  button:disabled { opacity:.5; cursor:default; }
  .err { color:#f38ba8; font-size:12px; margin-top:10px; min-height:16px;
         white-space:pre-wrap; }