@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --auth-ink: #171717;
  --auth-muted: #7a756d;
  --auth-cream: #fff4e5;
  --auth-cream-line: #f8ebd8;
  --auth-gold: #f6bd59;
  --auth-gold-deep: #df9d32;
  --auth-brown: #735014;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body.auth-page {
  background: #fff !important;
  color: var(--auth-ink);
  font-family: 'DM Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.auth-canvas { width: 100%; min-height: 100svh; margin: 0 auto; background: #fff; }
.auth-content { width: min(100%, 430px); margin: 0 auto; padding: 14px 18px 32px; }
.auth-brand { display: flex; justify-content: center; margin: 8px 0 18px; }
.auth-brand img { display: block; width: 275px; max-width: 100%; height: auto; object-fit: contain; object-position: center; }
.auth-title { margin: 0 auto 22px; color: var(--auth-brown); font-size: 21px; line-height: 1.25; font-weight: 700; text-align: center; letter-spacing: -.02em; }
.auth-form { display: grid; gap: 13px; }
.auth-field { display: grid; gap: 5px; }
.auth-label { color: #38342d; font-size: 11px; line-height: 1.2; font-weight: 700; }
.auth-input-row { display: flex; min-height: 48px; align-items: center; overflow: hidden; border: 1px solid transparent; border-radius: 12px; background: var(--auth-cream); transition: border-color .18s, box-shadow .18s, background .18s; }
.auth-input-row:focus-within { border-color: #e9bb68; background: #fff9f0; box-shadow: 0 0 0 3px rgba(230,173,75,.13); }
.auth-input-row.has-error { border-color: #e9aaaa; }
.auth-prefix { display: flex; min-width: 78px; align-items: center; justify-content: center; gap: 6px; align-self: stretch; padding: 0 10px; border-right: 1px solid rgba(145,111,57,.11); color: #403a31; font-size: 12px; font-weight: 700; }
.auth-input { width: 100%; min-width: 0; min-height: 46px; padding: 0 13px; border: 0; outline: 0; color: var(--auth-ink); background: transparent; font: 500 13px 'DM Sans',sans-serif; }
.auth-input::placeholder { color: #969087; opacity: 1; }
.auth-input-row input:-webkit-autofill { -webkit-text-fill-color: var(--auth-ink); box-shadow: 0 0 0 100px var(--auth-cream) inset; }
.auth-icon-button { display: grid; width: 42px; min-width: 42px; height: 46px; place-items: center; border: 0; color: #8a7e68; background: transparent; }
.auth-error { margin: 0 0 0 5px; color: #b23b35; font-size: 10px; line-height: 1.3; }
.auth-captcha { display: flex; min-width: 94px; height: 34px; align-items: center; justify-content: center; margin-right: 7px; border: 1px solid #e5d8c3; border-radius: 7px; color: #30291f; background: repeating-linear-gradient(135deg,#fff 0 6px,#f3eadc 6px 7px); font: 800 16px/1 Georgia,serif; letter-spacing: 5px; text-decoration: line-through; user-select: none; }
.auth-captcha-refresh { margin-right: 11px; border: 0; color: #937546; background: transparent; }
.auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 1px 2px; }
.auth-check { display: inline-flex; align-items: center; gap: 7px; color: #625d55; font-size: 10px; font-weight: 500; }
.auth-check input { width: 16px; height: 16px; margin: 0; accent-color: #efb84f; }
.auth-small-link { color: #80612d; font-size: 10px; font-weight: 600; text-decoration: none; }
.auth-primary { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 9px; margin-top: 4px; border: 1px solid #edb750; border-radius: 12px; color: #65460d; background: linear-gradient(180deg,#ffdc87 0%,#f7bf59 100%); box-shadow: 0 5px 12px rgba(177,123,35,.11); font: 700 14px 'DM Sans',sans-serif; cursor: pointer; transition: transform .16s, filter .16s; }
.auth-primary:hover { filter: saturate(1.04); }
.auth-primary:active { transform: scale(.99); }
.auth-secondary { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; margin-top: 0; padding: 10px 12px; border: 1px solid #8a8a8a; border-radius: 10px; color: #181818; background: #fff; font-size: 12px; line-height: 1.3; font-weight: 600; text-align: center; text-decoration: none; }
.auth-download { display: block; margin: 17px auto 0; color: #242424; font-size: 11px; font-weight: 600; text-align: center; text-decoration: none; }
.auth-notice { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #ecd7aa; border-radius: 10px; color: #6b521e; background: #fff7e7; font-size: 12px; }
.auth-alert { margin: 0; padding: 9px 11px; border-radius: 9px; color: #9a3029; background: #fff0ed; font-size: 11px; }
.auth-floating { position: fixed; right: max(16px, calc((100vw - 430px) / 2 + 16px)); bottom: 28px; z-index: 5; display: flex; flex-direction: column; gap: 9px; }
.auth-float { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; color: white; box-shadow: 0 5px 14px rgba(37,28,15,.18); }
.auth-float.chat { background: #f1ac48; }
.auth-float.help { background: #d64c8d; }
.auth-float i { font-size: 17px; }

@media (min-width: 640px) {
  body.auth-page { display: grid; place-items: center; padding: 28px; background: #f4efe7 !important; }
  .auth-canvas { min-height: 0; max-width: 430px; overflow: hidden; border: 1px solid #eee8de; border-radius: 18px; box-shadow: 0 20px 70px rgba(49,38,18,.1); }
  .auth-content { padding-top: 7px; padding-bottom: 28px; }
}