:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: #060608; color: #f0f7f2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex; align-items: center; justify-content: center;
  /* iPhone standalone: clear the status bar / home indicator. box-sizing: border-box
     (set globally above) keeps this inside min-height:100vh so flex centering still works. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(57,255,136,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(57,255,136,.04) 1px, transparent 1px);
  background-size: 18px 18px;
}
.mono { font-family: "Courier New", monospace; }
.accent { color: #39ff88; }
.frame { position: relative; width: 100%; max-width: 400px; padding: 16px; }
.connect {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 48px 24px 36px; border: 2px solid #39ff88; border-radius: 14px;
  box-shadow: 0 0 30px rgba(57,255,136,.15) inset; background: #060608;
}
.logo { font-size: 24px; font-weight: 700; letter-spacing: .1em; }
.sub { font-size: 10px; opacity: .55; letter-spacing: .05em; margin-bottom: 20px; }
.field { width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.field span { font-size: 9px; letter-spacing: .14em; color: #39ff88; }
.field input {
  width: 100%; background: #0c0c10; border: 1px solid #204a35; border-radius: 6px; padding: 10px 12px;
  font-family: "Courier New", monospace; font-size: 14px; color: #7fd6a8;
}
.field input:focus { outline: none; border-color: #39ff88; }
#totp { letter-spacing: .3em; }
.btn {
  width: 100%; max-width: 260px; margin-top: 8px; background: #39ff88; color: #04180d; border: none;
  border-radius: 6px; padding: 10px; font-weight: 700; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; cursor: pointer;
}
.btn:disabled { opacity: .5; }
.message { min-height: 1.2em; margin: 4px 0 0; font-size: 12px; color: #ffb3c2; }
.footer { font-size: 9px; opacity: .4; margin-top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }