@import url('./account-callout-shell.css');
.account-stage { position:absolute; left:50%; transform:translate(-50%,-50%); }
.account-shape { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.account-content { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.account-form { position:relative; pointer-events:auto; margin:0; }
.account-field { position:absolute; left:0; right:0; height:var(--ac-hit); cursor:text; }
.account-field-label { position:absolute; top:var(--ac-title-y); transform:translateY(-50%); font-size:var(--ac-label-size); line-height:var(--ac-label-line); text-decoration:underline; pointer-events:none; }
.account-input-row { position:absolute; inset:0; display:flex; align-items:center; gap:var(--ac-field-gap); }
.account-field[data-field="password"] .account-input-row,
.account-field[data-field="confirm"] .account-input-row { column-gap:var(--ac-password-action-gap); }
.account-input-row::after { content:""; position:absolute; top:var(--ac-underline-y); left:0; right:0; height:var(--ac-line-width); background:var(--ac-ink); pointer-events:none; }
.account-input-row:focus-within::after { background:var(--ac-focus); }
.account-input-row img { width:var(--ac-icon-size); height:var(--ac-icon-size); object-fit:contain; flex:none; }
.account-input-row input { min-width:0; flex:1; width:100%; background:transparent; color:inherit; border:0; outline:0; font:inherit; padding:0; height:var(--ac-hit); }
.account-input-row input:autofill { box-shadow:0 0 0 var(--ac-autofill-cover) var(--ac-paper) inset; color:var(--ac-ink); caret-color:var(--ac-ink); }
.account-input-row input:-webkit-autofill { -webkit-box-shadow:0 0 0 var(--ac-autofill-cover) var(--ac-paper) inset; -webkit-text-fill-color:var(--ac-ink); caret-color:var(--ac-ink); }
.account-panel button { color:inherit; font:inherit; cursor:pointer; }
.account-panel button:disabled { cursor:default; }
.account-text-action { background:transparent; border:0; padding:0; min-height:var(--ac-action-height); min-width:var(--ac-hit); text-decoration:underline; text-underline-offset:var(--ac-outline-offset); }
.account-actions { position:absolute; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:var(--ac-field-gap); }
.account-actions.single { justify-content:flex-end; }
.account-visibility-slot { position:relative; width:var(--ac-icon-size); height:var(--ac-hit); flex:none; }
.account-visibility { position:absolute; left:0; top:0; background:transparent; border:0; width:var(--ac-hit); min-width:var(--ac-hit); height:var(--ac-hit); display:grid; align-items:center; justify-items:start; padding:0; }
.account-panel button:focus-visible { outline:var(--ac-field-focus-width) solid var(--ac-focus); outline-offset:var(--ac-outline-offset); }
.account-code { position:absolute; left:0; right:0; display:flex; justify-content:center; gap:var(--ac-code-gap); }
.account-code-cell { position:relative; width:var(--ac-hit); height:var(--ac-hit); flex:none; }
.account-code-cell::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:var(--ac-code-visual-size); height:var(--ac-code-visual-size); background:var(--ac-code); border-radius:var(--ac-code-radius); }
.account-code input { position:relative; width:var(--ac-hit); height:var(--ac-hit); border:0; border-radius:var(--ac-code-radius); background:transparent; color:inherit; text-align:center; font:inherit; font-size:var(--ac-code-font-size); padding:0; outline-color:var(--ac-focus); }
.account-submit { position:absolute; left:50%; transform:translateX(-50%); width:var(--ac-hit); height:var(--ac-hit); border:0; border-radius:var(--ac-trigger-radius); padding:0; background:var(--ac-trigger-background); display:grid; place-items:center; }
.account-submit-icon { width:var(--ac-trigger-icon); height:var(--ac-trigger-icon); display:block; overflow:visible; }
.account-feedback { position:absolute; left:50%; transform:translateX(-50%); width:var(--ac-feedback-width); max-width:100%; margin:0; font-size:var(--ac-feedback-size); line-height:var(--ac-feedback-line); color:var(--ac-error); text-align:center; overflow-wrap:anywhere; }
.account-feedback[hidden] { display:none; }
.account-apple { position:absolute; left:50%; transform:translateX(-50%); width:var(--ac-apple-width); height:var(--ac-apple-height); padding:0; border:0; border-radius:var(--ac-apple-radius); overflow:hidden; background:transparent; }
.account-apple img { width:100%; height:100%; object-fit:contain; }