:root {
  --cm-auth-bg: #020812;
  --cm-auth-panel: rgba(5, 18, 31, 0.96);
  --cm-auth-cyan: #20d8ff;
  --cm-auth-teal: #40e0c0;
  --cm-auth-text: #eef7ff;
  --cm-auth-muted: #819bb5;
  --cm-auth-line: rgba(68, 208, 242, 0.32);
}

html.cm-auth-locked,
html.cm-auth-locked body {
  min-height: 100%;
  overflow: hidden !important;
}

html.cm-auth-pending body > * { visibility: hidden; }
html.cm-auth-pending body > .cm-auth-gate { visibility: visible; }
html.cm-auth-locked body > :not(.cm-auth-gate) { visibility: hidden; }

.cm-auth-gate[hidden] { display: none !important; }

.cm-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 34px 20px 24px;
  color: var(--cm-auth-text);
  background:
    radial-gradient(circle at 50% 108%, rgba(26, 135, 213, 0.27), transparent 34%),
    radial-gradient(circle at 50% 14%, rgba(27, 130, 179, 0.11), transparent 30%),
    linear-gradient(180deg, #010711 0%, var(--cm-auth-bg) 72%, #01050c 100%);
  font-family: Inter, system-ui, sans-serif;
  isolation: isolate;
}

.cm-auth-gate::before,
.cm-auth-gate::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
}

.cm-auth-gate::before {
  width: min(1280px, 104vw);
  aspect-ratio: 2 / 1;
  left: 50%;
  bottom: -42%;
  translate: -50% 0;
  border: 1px solid rgba(56, 184, 245, 0.56);
  border-radius: 50% 50% 0 0;
  box-shadow: 0 -12px 54px rgba(27, 153, 233, 0.17);
}

.cm-auth-gate::after {
  inset: 0;
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 8% 16%, rgba(182, 239, 255, .8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 13%, rgba(182, 239, 255, .72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 21% 68%, rgba(50, 204, 247, .62) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 61%, rgba(182, 239, 255, .54) 0 1px, transparent 1.5px),
    radial-gradient(circle at 48% 8%, rgba(182, 239, 255, .58) 0 1px, transparent 1.5px);
}

.cm-auth-shell {
  width: min(100%, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: cm-auth-in 260ms ease-out both;
}

@keyframes cm-auth-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cm-auth-brand {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 28px;
  font-family: "Space Grotesk", sans-serif;
}

.cm-auth-brand-mark {
  width: 54px;
  height: 54px;
  position: relative;
  border: 1px solid rgba(39, 212, 245, .84);
  border-radius: 50%;
  box-shadow: inset 8px -5px 18px rgba(15, 147, 208, .2), 0 0 22px rgba(31, 191, 235, .11);
}

.cm-auth-brand-mark::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 36px;
  left: 12px;
  top: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e5f7ff 0%, #6db0d1 58%, #163f5c 100%);
  box-shadow: inset -7px 1px 8px rgba(1, 16, 28, .65);
}

.cm-auth-brand-mark::after {
  content: "";
  position: absolute;
  width: 68px;
  height: 24px;
  left: -8px;
  top: 15px;
  border: 1px solid rgba(39, 212, 245, .7);
  border-top-color: transparent;
  border-radius: 50%;
  rotate: -12deg;
}

.cm-auth-brand-name {
  font-size: clamp(18px, 3vw, 25px);
  font-weight: 700;
  letter-spacing: .32em;
  line-height: 1;
}

.cm-auth-brand-sub {
  margin-top: 9px;
  color: #2edfff;
  font: 600 10px/1 "JetBrains Mono", monospace;
  letter-spacing: .54em;
}

.cm-auth-card {
  width: min(100%, 620px);
  padding: clamp(27px, 5vw, 42px) clamp(22px, 6vw, 54px) 30px;
  border: 1px solid rgba(38, 215, 244, .66);
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(8, 25, 41, .97), rgba(3, 14, 26, .98));
  box-shadow: 0 36px 100px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.025);
}

.cm-auth-shield {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  color: var(--cm-auth-teal);
  border: 1px solid rgba(41, 213, 236, .28);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(32, 216, 255, .08);
}

.cm-auth-shield svg { width: 44px; height: 44px; }

.cm-auth-eyebrow {
  color: var(--cm-auth-cyan);
  text-align: center;
  font: 700 12px/1.3 "JetBrains Mono", monospace;
  letter-spacing: .34em;
}

.cm-auth-title {
  margin-top: 13px;
  text-align: center;
  color: var(--cm-auth-text);
  font: 600 clamp(30px, 5vw, 42px)/1.12 "Space Grotesk", sans-serif;
}

.cm-auth-copy {
  margin: 12px auto 29px;
  color: var(--cm-auth-muted);
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
}

.cm-auth-label {
  display: block;
  margin-bottom: 9px;
  color: #eaf4fc;
  font: 500 14px/1.3 "Space Grotesk", sans-serif;
}

.cm-auth-email,
.cm-auth-code {
  display: flex;
  min-height: 56px;
  overflow: hidden;
  border: 1px solid rgba(104, 161, 201, .46);
  border-radius: 10px;
  background: rgba(3, 12, 23, .58);
  transition: border-color .16s, box-shadow .16s;
}

.cm-auth-email:focus-within,
.cm-auth-code:focus-within {
  border-color: rgba(38, 215, 244, .88);
  box-shadow: 0 0 0 3px rgba(32, 216, 255, .09);
}

.cm-auth-prefix {
  min-width: 92px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(104, 161, 201, .31);
  color: #f2f8fc;
  font: 600 17px/1 "Space Grotesk", sans-serif;
}

.cm-auth-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cm-auth-text);
  padding: 0 20px;
  font: 500 18px/1 "Space Grotesk", sans-serif;
  letter-spacing: .025em;
}

.cm-auth-input::placeholder { color: #56718c; }
.cm-auth-input-code { text-align: center; letter-spacing: .5em; font-size: 23px; }

.cm-auth-button {
  width: 100%;
  min-height: 59px;
  margin-top: 15px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(100deg, #2ed3f4, #42dfbe);
  color: #01121c;
  font: 700 16px/1 "Space Grotesk", sans-serif;
  box-shadow: 0 12px 34px rgba(34, 206, 233, .12);
  transition: transform .15s, filter .15s;
}

.cm-auth-button:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.cm-auth-button:disabled { cursor: wait; opacity: .58; }

.cm-auth-link {
  display: block;
  margin: 13px auto 0;
  border: 0;
  background: none;
  color: #74cfe4;
  cursor: pointer;
  font: 500 12px/1.4 "Space Grotesk", sans-serif;
}

.cm-auth-link:disabled { cursor: default; opacity: .55; }

.cm-auth-security {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 13px;
  align-items: center;
  margin-top: 20px;
  padding: 14px 17px;
  border: 1px solid rgba(47, 220, 190, .42);
  border-radius: 10px;
  color: #91aac2;
  font-size: 12px;
  line-height: 1.55;
}

.cm-auth-security svg { width: 35px; color: var(--cm-auth-teal); }
.cm-auth-security strong { display: block; color: #ddecf6; font-weight: 500; }

.cm-auth-error,
.cm-auth-info {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.cm-auth-error { border: 1px solid rgba(255, 86, 111, .45); background: rgba(255, 65, 96, .08); color: #ff9daf; }
.cm-auth-info { border: 1px solid rgba(32, 216, 255, .3); background: rgba(32, 216, 255, .06); color: #9bd9e8; }

.cm-auth-progress {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  padding-top: 19px;
  border-top: 1px solid rgba(101, 145, 180, .22);
}

.cm-auth-progress-line { height: 1px; background: repeating-linear-gradient(90deg, #326a85 0 5px, transparent 5px 10px); }
.cm-auth-step { display: flex; align-items: center; gap: 8px; color: #647e98; font-size: 11px; white-space: nowrap; }
.cm-auth-step:first-child { justify-content: flex-end; }
.cm-auth-step-dot { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #3f6886; border-radius: 50%; font: 600 12px/1 "JetBrains Mono", monospace; }
.cm-auth-step.is-active { color: #d9f7fc; }
.cm-auth-step.is-active .cm-auth-step-dot { border-color: var(--cm-auth-teal); color: var(--cm-auth-teal); box-shadow: 0 0 16px rgba(64,224,192,.1); }

.cm-auth-footer {
  margin-top: 24px;
  color: #58718b;
  text-align: center;
  font: 500 9px/1.4 "JetBrains Mono", monospace;
  letter-spacing: .3em;
}

.cm-auth-preview-badge {
  position: fixed;
  top: 16px;
  right: 16px;
  padding: 7px 11px;
  border: 1px solid rgba(244, 174, 61, .4);
  border-radius: 999px;
  background: rgba(244, 174, 61, .08);
  color: #f1be66;
  font: 600 9px/1 "JetBrains Mono", monospace;
  letter-spacing: .14em;
}

@media (max-width: 620px) {
  .cm-auth-gate { align-items: start; padding-top: 22px; }
  .cm-auth-brand { margin-bottom: 18px; }
  .cm-auth-brand-mark { width: 45px; height: 45px; }
  .cm-auth-brand-mark::before { width: 20px; height: 30px; left: 10px; top: 7px; }
  .cm-auth-brand-mark::after { width: 58px; left: -7px; top: 11px; }
  .cm-auth-brand-name { font-size: 17px; letter-spacing: .23em; }
  .cm-auth-brand-sub { font-size: 8px; }
  .cm-auth-card { border-radius: 19px; }
  .cm-auth-shield { width: 60px; height: 60px; }
  .cm-auth-progress { gap: 8px; }
  .cm-auth-step { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-auth-shell { animation: none; }
  .cm-auth-button { transition: none; }
}

/* Shared language control: login and all application topbars. */
.cm-language{display:inline-flex;flex:0 0 auto;align-items:center;gap:2px;padding:3px;border:1px solid #245169;border-radius:16px;background:#04121e;vertical-align:middle;box-sizing:border-box;max-width:100%}
.cm-language .cm-language__option{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:7px 10px;margin:0;border:1px solid transparent;border-radius:12px;background:transparent;color:#89a4ba;font:600 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;box-sizing:border-box;white-space:nowrap;box-shadow:none;transition:background .15s,border-color .15s,color .15s}
.cm-language .cm-language__option[aria-pressed="true"]{color:#e5f8ff;background:#073043;border-color:#27cdef;box-shadow:inset 0 0 12px #20c4eb12,0 0 9px #20c4eb18}
.cm-language .cm-language__option:hover:not(:disabled){background:#0b2c3e;color:#fff}
.cm-language .cm-language__option:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cm-language .cm-language__option:disabled{opacity:.55;cursor:wait}
.cm-language__flag{display:block;width:24px;height:16px;flex:0 0 24px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px #ffffff16}
.cm-language__dot{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:transparent}
[aria-pressed="true"]>.cm-language__dot{background:#27cdef;box-shadow:0 0 7px #27cdef88}
.cm-auth-card>.cm-language{display:flex;width:max-content;margin:0 0 24px auto}
@media(max-width:600px){.cm-language{border-radius:13px}.cm-language .cm-language__option{min-height:40px;padding:6px;gap:5px}.cm-language__flag{width:21px;height:14px;flex-basis:21px}.cm-language__dot{display:none}}
@media(prefers-reduced-motion:reduce){.cm-language .cm-language__option{transition:none}}
.cm-session-notice{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:10001;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;padding:12px 18px;border:1px solid #b8862c;border-radius:12px;background:#14202b;color:#f4d69a;font:14px/1.5 system-ui,sans-serif;box-shadow:0 6px 24px #0006}