/* Approved B layout. Only the outer surface supplies glass; the iframe is clear. */
.landing-body .login-backdrop { background: rgb(10 12 9 / 32%); backdrop-filter: blur(2px); }
.landing-body .login-dialog,
.account-auth .login-panel {
  border: 0;
  border-radius: 16px;
  background: rgb(24 26 21 / 58%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 245 223 / 25%), inset 0 0 0 1px rgb(255 245 223 / 12%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.landing-body .login-dialog { width: min(760px, 100%); }
.landing-body .login-dialog > header { position: relative; display: block; min-height: 0; padding: 0; border: 0; }
.landing-body .login-dialog > header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.landing-body .login-dialog > header button { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; background: transparent; color: #ddd4c5; font-size: 24px; font-weight: 400; }
.landing-body .login-dialog > header button:hover { background: rgb(255 255 255 / 9%); }
.landing-body .login-dialog > header button:focus-visible { outline: 2px solid #f4c77d; outline-offset: -4px; }
.landing-body .login-dialog__hint:not([hidden]) { margin: 0; padding: 20px 64px 16px 32px; color: #e6dbc7; font-size: 12px; line-height: 1.7; border-bottom: 1px solid rgb(239 226 202 / 15%); }
.landing-body .login-dialog iframe { height: min(var(--auth-frame-height, 540px), calc(100dvh - 120px)); background: transparent; color-scheme: dark; }
body.account-auth .login-shell { width: min(760px, calc(100% - 32px)); }
.account-auth .login-panel { padding: 0; overflow: hidden; }
.account-auth .member-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; min-height: 520px; }
.account-auth .auth-brand-side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 36px 32px; border-right: 1px solid rgb(239 226 202 / 20%); background: linear-gradient(150deg, rgb(238 201 142 / 9%), transparent 75%); }
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand img { width: 28px; height: 28px; object-fit: contain; }
.auth-brand span { font-size: 16px; font-weight: 500; color: #f8f4ed; }
.auth-brand-story h2 { margin: 0 0 20px; font-size: 34px; font-weight: 500; line-height: 1.5; letter-spacing: -.03em; color: #f8f4ed; }
.auth-brand-story p { margin: 0; color: #e0d5c3; font-size: 12px; line-height: 1.9; }
.auth-invitation-notice { margin-top:24px; padding:14px; border:1px solid #bda16b8c; border-radius:10px; background:#f4c77d0a; font-size:12px; line-height:1.8; }
.auth-invitation-notice strong { display:block; color:#f4c77d; font-size:13px; font-weight:500; }
.auth-invitation-notice span { display:block; margin-top:3px; color:#e0d5c3; }
.auth-brand-foot { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 10px; color: #e2d4bc; line-height: 1.8; }
.auth-brand-foot::before { content: ""; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #f4c77d; }
.account-auth .login-card { min-width: 0; padding: 48px 32px 28px; gap: 28px; border-radius: 0; background: transparent; }
.account-auth .card-title { gap: 8px; }
.account-auth .card-title strong { font-size: 27px; line-height: 1.35; font-weight: 500; }
.account-auth .card-title small { font-size: 12px; color: #e0d9cd; line-height: 1.8; }
.account-auth form { gap: 20px; }
.account-auth .login-card label { gap: 8px; }
.account-auth .login-card input:not([type="checkbox"]) { min-width: 0; height: 48px; border: 1px solid rgb(233 220 196 / 28%); background: rgb(8 11 7 / 24%); border-radius: 8px; color: #f8f4ed; box-shadow: none; }
.account-auth .login-card input::placeholder { color: #cfc7b9; }
.account-auth .login-card input:focus { border-color: #f4c77d; background: rgb(8 11 7 / 40%); outline: 2px solid #f4c77d; outline-offset: 3px; }
.account-auth .login-card button[type="submit"] { min-height: 48px; font-size: 14px; }
.account-auth .status:empty { display: none; }
.account-auth .status { line-height: 1.8; overflow-wrap: anywhere; }
.auth-password-field { display: grid; gap: 8px; }
.auth-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth-password-wrap { position: relative; }
.account-auth .auth-password-wrap input { width: 100%; padding-right: 48px; }
.account-auth .login-card #passwordVisibilityButton { position: absolute; top: 2px; right: 3px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; color: #d9d1c3; background: transparent; }
.account-auth .login-card #passwordVisibilityButton:hover { background: rgb(255 255 255 / 9%); }
.account-auth svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.auth-eye-slash { display: none; }
[aria-pressed="true"] .auth-eye-slash { display: block; }
.account-auth .login-card .auth-text-action { min-height: 32px; padding: 0; border: 0; border-radius: 0; color: #f6d49b; background: transparent; font-size: 12px; font-weight: 400; }
.account-auth .login-card .auth-text-action:hover { background: transparent; color: #ffe9c4; text-decoration: underline; text-underline-offset: 4px; }
.auth-register-entry { display: flex; align-items: center; justify-content: center; gap: 8px; color: #d8d0c2; font-size: 12px; }
.account-auth .login-card .auth-register-entry button { min-height: 44px; }
.auth-register-entry:has(button[hidden]) { display: none; }
.account-auth .login-card .agreement-row { font-size: 11px; line-height: 1.8; }
.auth-card-foot { display: flex; justify-content: center; align-items: center; gap: 7px; padding-top: 20px; border-top: 1px solid rgb(239 226 202 / 15%); color: #d4cbbb; font-size: 11px; }
.auth-card-foot svg { width: 13px; height: 13px; }
html.is-embedded-login, .is-embedded-login body.account-auth { background: transparent; color-scheme: dark; scrollbar-color: #877961 transparent; scrollbar-width: thin; }
/* Match the iframe scheme even when the host theme script sets a light inline scheme. */
html.is-embedded-login { color-scheme: dark !important; }
.is-embedded-login .account-auth .login-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.is-embedded-login body.account-auth .login-shell { min-height: 0; width: 100%; padding: 0; }
@media (max-width: 600px) {
  .account-auth .member-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .account-auth .auth-brand-side { display: block; padding: 24px; border-right: 0; border-bottom: 1px solid rgb(239 226 202 / 20%); }
  .auth-brand-story > h2, .auth-brand-story > p, .auth-brand-foot { display: none; }
  .auth-brand-story { display:block; }
  .auth-invitation-notice { margin-top:18px; }
  .account-auth .login-card { padding: 24px; gap: 24px; }
  .account-auth .login-card .verification-button { min-width: 96px; font-size: 12px; }
  .account-auth .verification-actions { grid-template-columns: minmax(0, 1fr) 96px; }
  .landing-body .login-dialog__hint:not([hidden]) { padding-left: 24px; }
}
@media (prefers-reduced-motion: reduce) { .landing-body .login-dialog { animation: none; } }
@media (max-width:400px) {
  .account-auth #registerForm > div:first-child .verification-actions { grid-template-columns:minmax(0,1fr); }
  .account-auth #registerInviteInput { font-size:16px; }
}
@supports not (backdrop-filter: blur(1px)) {
  .landing-body .login-dialog, .account-auth .login-panel { background: rgb(24 26 21 / 94%); }
  .is-embedded-login .account-auth .login-panel { background: transparent; }
}