.km-auth-open { overflow: hidden; }
.km-auth-modal { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 18px; }
.km-auth-modal[hidden] { display: none; }
.km-auth-backdrop { position: absolute; inset: 0; border: 0; background: rgba(7, 9, 12, .84); backdrop-filter: blur(8px); }
.km-auth-dialog { position: relative; z-index: 1; width: min(100%, 440px); max-height: calc(100dvh - 36px); overflow: auto; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #1b1f24; color: #f8fafc; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.km-auth-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 6px; background: #282e35; color: #d6dce3; }
.km-auth-close svg, .km-account-indicator svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.km-auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.km-auth-brand > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 7px; background: #ffc528; color: #11151a; font-weight: 900; }
.km-auth-brand div { display: grid; gap: 2px; }
.km-auth-brand small, .km-auth-dialog > p { color: #aeb7c2; }
.km-auth-dialog h2 { margin: 0 38px 8px 0; font-size: 23px; line-height: 1.2; letter-spacing: 0; }
.km-auth-dialog > p { margin: 0 0 22px; font-size: 14px; line-height: 1.55; }
.km-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin-bottom: 18px; border: 1px solid #353d46; border-radius: 7px; background: #15191d; }
.km-auth-tabs button { min-height: 40px; border: 0; border-radius: 5px; background: transparent; color: #aeb7c2; font-weight: 750; }
.km-auth-tabs button.active { background: #303740; color: #fff; }
.km-auth-dialog form { display: grid; gap: 14px; }
.km-auth-dialog label { display: grid; gap: 7px; color: #dfe5eb; font-size: 13px; font-weight: 700; }
.km-auth-dialog input { width: 100%; min-height: 48px; box-sizing: border-box; border: 1px solid #414a55; border-radius: 6px; padding: 0 13px; background: #11151a; color: #fff; font: inherit; }
.km-auth-dialog input:focus { outline: 2px solid rgba(255,197,40,.28); border-color: #ffc528; }
.km-auth-password { position: relative; display: block; }
.km-auth-password input { padding-right: 52px; }
.km-auth-password button { position: absolute; top: 5px; right: 5px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #aeb7c2; }
.km-auth-password button:hover, .km-auth-password button:focus-visible { background: #282e35; color: #fff; outline: none; }
.km-auth-password button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.km-auth-primary, .km-auth-secondary, .km-auth-danger { min-height: 48px; border-radius: 6px; padding: 0 16px; font-weight: 850; }
.km-auth-primary { border: 0; background: #ffc528; color: #11151a; }
.km-auth-secondary { width: 100%; border: 1px solid #46505c; background: #282e35; color: #fff; }
.km-auth-danger { width: 100%; margin-top: 10px; border: 1px solid rgba(239,68,68,.5); background: rgba(127,29,29,.2); color: #fecaca; }
.km-auth-link, .km-auth-back-link { border: 0; background: transparent; color: #d8dee5; text-decoration: underline; text-underline-offset: 3px; }
.km-auth-back-link { display: block; margin: 18px auto 0; }
.km-auth-feedback { margin-top: 16px; padding: 11px 12px; border-radius: 6px; background: rgba(22,163,74,.13); color: #bbf7d0; font-size: 13px; line-height: 1.45; }
.km-auth-feedback[data-tone="error"] { background: rgba(220,38,38,.14); color: #fecaca; }
.km-auth-account-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 20px; padding: 14px; border: 1px solid #353d46; border-radius: 7px; background: #15191d; }
.km-auth-account-row div { min-width: 0; display: grid; gap: 3px; }
.km-auth-account-row small { overflow: hidden; text-overflow: ellipsis; color: #aeb7c2; }
.km-auth-avatar { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #ffc528; color: #11151a; font-weight: 900; }
.km-account-indicator { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; margin-left: auto; border: 1px solid rgba(255,197,40,.34); border-radius: 6px; padding: 0 10px; background: rgba(255,197,40,.1); color: #ffe28a; font-weight: 750; }
.km-auth-modal button { cursor: pointer; }
.km-auth-modal button:disabled, .km-auth-modal input:disabled { cursor: wait; opacity: .65; }
@media (max-width: 560px) {
  .km-auth-modal { place-items: end center; padding: 0; }
  .km-auth-dialog { width: 100%; max-height: 94dvh; padding: 24px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 8px 8px 0 0; }
  .km-account-indicator span { display: none; }
  .km-account-indicator { width: 38px; justify-content: center; padding: 0; }
}