.pin-screen { --pin-bg:#071820; --pin-text:#edf5f8; --pin-muted:#99b1c0; --pin-accent:#00bd88; --pin-key-bg:#10232e; --pin-line:#294450; box-sizing:border-box; min-height:100dvh; display:grid; place-items:center; padding:24px 20px; background:var(--pin-bg); color:var(--pin-text); font-family:Inter,Arial,sans-serif; }
html[data-theme='light'] .pin-screen { --pin-bg:#f3f6f8; --pin-text:#172f43; --pin-muted:#50667a; --pin-accent:#007b59; --pin-key-bg:#ffffff; --pin-line:#cbd6de; }
html body .pin-screen button { font-family:inherit; }
.pin-card { width:min(100%,390px); text-align:center; }
.pin-wordmark { width:250px; max-width:80%; height:auto; object-fit:contain; margin:0 auto 6px; display:block; }
.pin-brand-caption { margin:0 0 26px; font-size:20px; line-height:24px; color:var(--pin-muted); }
.pin-card h1 { font-size:36px; line-height:1.2; margin:0 0 14px; font-weight:750; overflow-wrap:anywhere; }
.pin-description { color:var(--pin-muted); font-size:20px; line-height:28px; margin:0 auto 18px; max-width:100%; }
.pin-dots { position:relative; display:flex; gap:28px; justify-content:center; box-sizing:border-box; width:220px; margin:auto; padding:8px; cursor:text; }
.pin-dots input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:text; }
.pin-dots > span:not(.pin-sr-only) { box-sizing:border-box; flex:none; width:24px; height:24px; border:1.5px solid var(--pin-muted); border-radius:50%; pointer-events:none; }
.pin-dots > span.is-filled { background:var(--pin-accent); border-color:var(--pin-accent); }
.pin-dots:focus-within { outline:2px solid var(--green,#00c78b); outline-offset:3px; border-radius:8px; }
.pin-feedback { min-height:16px; margin:0 0 12px; font-size:13px; line-height:1.3; color:var(--pin-muted); overflow-wrap:anywhere; }
.pin-keypad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pin-keypad-wrap { position:relative; }
.pin-autumn-leaf { position:absolute; right:-24px; bottom:-24px; width:52px; height:auto; pointer-events:none; user-select:none; }
.pin-keypad button,.pin-keypad-spacer { box-sizing:border-box; min-width:0; height:72px; padding:0; display:grid; place-items:center; background:var(--pin-key-bg); border:1px solid var(--pin-line); border-radius:15px; color:var(--pin-text); font-size:34px; font-weight:600; box-shadow:none; }
.pin-keypad-spacer { pointer-events:none; }
.pin-keypad button svg { width:32px; height:32px; }
html body .pin-screen .pin-keypad button,html body .pin-screen .pin-keypad button svg { color:var(--pin-text) !important; }
.pin-keypad button:hover { border-color:var(--pin-accent); }
.pin-keypad button:active { background:var(--surface-hover,#173542); }
.pin-keypad button:disabled { opacity:.5; cursor:wait; }
.pin-text-button,.pin-other-button { background:none; border:0; box-shadow:none; min-height:44px; padding:8px; font-size:22px; line-height:28px; display:block; margin:24px auto 0; color:var(--pin-accent); font-weight:650; }
html body .pin-screen .pin-text-button { color:var(--pin-accent) !important; }
.pin-other-button { margin-top:0; font-size:20px; color:var(--pin-muted); font-weight:400; }
.pin-footnote { font-size:16px; line-height:20px; color:var(--pin-muted); margin:12px auto 0; }
.pin-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.pin-screen button:focus-visible { outline:2px solid var(--green,#00c78b); outline-offset:2px; }
html body .pin-screen button:focus:not(:focus-visible) { outline:none; }
.pin-loading { min-height:100dvh; display:grid; place-items:center; background:var(--bg,#071820); color:var(--text,#edf5f8); }
@media(max-width:600px) {
  .pin-screen { padding:24px 20px; padding-top:max(24px,env(safe-area-inset-top)); padding-bottom:max(24px,env(safe-area-inset-bottom)); }
  .pin-wordmark { width:190px; }
  .pin-brand-caption { font-size:16px; margin-bottom:24px; }
  .pin-card h1 { font-size:26px; margin-bottom:12px; }
  .pin-description { font-size:16px; line-height:24px; margin-bottom:16px; }
  .pin-dots { gap:24px; width:200px; }
  .pin-dots > span:not(.pin-sr-only) { width:20px; height:20px; }
  .pin-keypad button,.pin-keypad-spacer { height:62px; font-size:28px; border-radius:13px; }
  .pin-keypad button svg { width:26px; height:26px; }
  .pin-autumn-leaf { width:40px; right:-10px; bottom:-18px; }
  .pin-text-button,.pin-other-button { font-size:16px; line-height:24px; }
  .pin-text-button { margin-top:18px; }
  .pin-other-button { font-size:14px; }
  .pin-footnote { font-size:12px; line-height:18px; }
}
@media(max-height:740px) {
  .pin-screen { padding-block:16px; }
  .pin-wordmark { width:160px; }
  .pin-brand-caption { font-size:15px; line-height:20px; margin-bottom:18px; }
  .pin-card h1 { font-size:24px; margin-bottom:10px; }
  .pin-description { font-size:16px; line-height:22px; margin-bottom:12px; }
  .pin-dots > span:not(.pin-sr-only) { width:18px; height:18px; }
  .pin-keypad button,.pin-keypad-spacer { height:52px; font-size:26px; }
  .pin-keypad button svg { width:24px; height:24px; }
  .pin-text-button,.pin-other-button { font-size:16px; line-height:24px; }
  .pin-text-button { margin-top:12px; }
  .pin-other-button { font-size:14px; }
  .pin-footnote { font-size:12px; line-height:18px; margin-top:8px; }
}
.pin-biometric-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; padding:12px 14px; margin:0 auto 18px; border:1px solid #00bf85; border-radius:12px; background:#007f5b; color:#fff; font-family:inherit; font-size:16px; font-weight:600; line-height:1.4; cursor:pointer; }
.pin-biometric-button:disabled { opacity:.55; cursor:wait; }
.pin-screen .pin-biometric-manage { margin:8px auto 0; font-size:14px; line-height:20px; }
.pin-passkey-setup .pin-passkey-symbol { display:block; margin:0 auto 20px; color:var(--pin-accent); }
.pin-passkey-setup h1 { font-size:28px; }
.pin-passkey-copy { color:var(--pin-muted); font-size:14px; line-height:1.6; margin:16px 0; }
.pin-passkey-setup .pin-feedback { min-height:40px; }
.pin-desktop-consent { display:flex; gap:12px; align-items:center; min-height:44px; font-size:14px; line-height:1.5; color:var(--pin-text); text-align:left; }
.pin-desktop-consent input { width:20px; height:20px; flex:none; accent-color:#008d64; }
html[data-theme="light"] .pin-screen .pin-biometric-button { color:#fff; }
@media(max-height:740px) { .pin-biometric-button { min-height:44px; margin-bottom:12px; } .pin-passkey-setup h1 { font-size:24px; } }