:root {
  --ink: #111827;
  --muted: #68758d;
  --blue: #0aa3bb;
  --blue-dark: #087f93;
  --blue-soft: #e8fbfe;
  --line: #e3e9f2;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #f4f7fb; }
body { min-height: 100vh; margin: 0; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
.auth-shell { min-height: 100vh; padding: 30px 18px; display: grid; place-items: center; overflow: hidden; position: relative; background: radial-gradient(circle at 16% 10%, rgba(84, 239, 255, .16), transparent 30%), radial-gradient(circle at 88% 82%, rgba(140, 92, 255, .11), transparent 28%), linear-gradient(145deg, #ffffff, #f4f7fb 72%); }
.auth-shell::before, .auth-shell::after { content: ""; position: absolute; border: 1px solid rgba(84, 239, 255, .13); border-radius: 50%; pointer-events: none; }.auth-shell::before { width: 580px; height: 580px; top: -310px; right: -160px; }.auth-shell::after { width: 430px; height: 430px; bottom: -260px; left: -100px; }
.auth-card { width: min(455px, 100%); padding: 40px; position: relative; z-index: 1; border: 1px solid #e4eaf2; border-radius: 26px; background: rgba(255,255,255,.98); box-shadow: 0 30px 80px rgba(18, 37, 62, .12), inset 0 1px 0 #fff; }
.auth-brand { width: fit-content; min-height: 61px; padding: 6px 12px 6px 8px; display: flex; align-items: center; gap: 13px; overflow: hidden; border: 1px solid #202b40; border-radius: 16px; background: #05070d; color: #fff; text-decoration: none; box-shadow: 0 14px 30px rgba(5, 7, 13, .2), inset 0 1px 0 rgba(255,255,255,.08); }
.auth-logo { width: 174px; height: 54px; display: block; object-fit: cover; object-position: center; }
.auth-crm-label { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.2); color: #baff3c; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.auth-heading { margin: 37px 0 25px; }
.eyebrow { margin: 0; color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.auth-heading h1 { margin: 8px 0 10px; font-size: clamp(34px, 8vw, 43px); font-weight: 790; line-height: 1; letter-spacing: -.05em; }
.auth-heading > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 7px; color: #4d596f; font-size: 11px; font-weight: 750; }
.auth-form input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: #fbfbfc; color: var(--ink); font-size: 14px; transition: .18s ease; }
.auth-form input:focus { border-color: #54d9e8; background: #fff; box-shadow: 0 0 0 4px rgba(84,239,255,.13); }
.auth-form small { color: #8a9793; font-size: 10px; font-weight: 500; }
.auth-button { height: 49px; margin-top: 5px; border: 1px solid #087f93; border-radius: 12px; background: linear-gradient(135deg, #8c5cff, #087f93); color: white; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(54,102,143,.24), inset 0 1px 0 rgba(255,255,255,.24); transition: .18s ease; }
.auth-button:hover { background: linear-gradient(135deg, #7c4df0, #066d7e); transform: translateY(-1px); box-shadow: 0 16px 32px rgba(54,102,143,.3); }
.auth-button:disabled { cursor: wait; opacity: .7; }
.auth-error { margin: -5px 0 18px; padding: 11px 13px; border: 1px solid #efc7bd; border-radius: 10px; background: #fff2ef; color: #9b4938; font-size: 11px; line-height: 1.45; }
.auth-footnote { margin: 22px 0 0; color: #899692; font-size: 10px; text-align: center; }
.text-button { width: 100%; margin-top: 20px; border: 0; background: transparent; color: var(--blue); font-size: 11px; font-weight: 750; cursor: pointer; }

@media (max-width: 520px) {
  .auth-shell { padding: 14px; }
  .auth-card { padding: 30px 22px; border-radius: 18px; }
  .auth-brand { min-height: 55px; padding: 8px 10px 8px 12px; gap: 10px; }
  .auth-logo { width: 148px; height: 48px; }
  .auth-crm-label { padding-left: 9px; font-size: 9px; }
  .auth-heading { margin-top: 34px; }
}