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

.auth-scope {
  --ink:        #05070a;   
  --panel:      #12161d;   
  --panel-2:    #1a1f28;   
  --border:     #262c36;
  --border-2:   #333c49;   
  --text:       #e7ebf1;
  --muted:      #8a93a3;
  --accent:     #1f9be0;
  --accent-h:   #33abee;
  --green:      #17e88f;
  --danger:     #ff6b81;
  --radius:     12px;
  --radius-lg:  18px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

footer.site-footer, .cs-tas-nudge { display: none !important; }

.container-fluid > .alert { display: none !important; }

body { background: #0a0d12; }

.auth-shell {
  max-width: 470px;
  margin: 0 auto;
  padding: clamp(28px, calc((100vh - 640px) / 2), 120px) 20px 64px;
}

.auth-brand {
  display: none; align-items: center; gap: 9px;
  margin: 0 0 24px;
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--text); text-decoration: none;
}
.auth-brand:hover, .auth-brand:focus { color: #fff; text-decoration: none; }
.auth-brand .mark {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 4px rgba(23,232,143,.14);
}

.auth-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.auth-form-pane {
  padding: 40px 34px; background: var(--panel);
  display: flex; flex-direction: column; justify-content: center;
}
.auth-form-pane h1 {
  margin: 0 0 6px;
  font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; color: var(--text);
}
.auth-form-pane .auth-h-note {
  margin: 0 0 26px; font-size: .85rem; color: var(--muted);
}
.auth-form-pane .auth-h-note a { color: var(--accent); font-weight: 600; }

.auth-form-pane h1 + .auth-sso { margin-top: 26px; }

.auth-sso {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px;
  background: #fff; color: #16181d;
  border: 1px solid #fff; border-radius: var(--radius);
  font-size: .92rem; font-weight: 700; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.auth-sso:hover {
  color: #16181d; text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.auth-sso img { width: 19px; height: 19px; }

.auth-or {
  display: flex; align-items: center; gap: 13px; margin: 24px 0;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
}

.auth-form-pane .form-group { margin: 0 0 18px; }
.auth-form-pane label {
  display: block; margin: 0 0 7px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em; color: #aeb6c4;
}

.auth-form-pane input.form-control {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px !important;
  font-size: .93rem !important; font-family: inherit;
  color: var(--text) !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.auth-form-pane input.form-control::placeholder { color: #5d6675; }
.auth-form-pane input.form-control:hover { border-color: var(--border-2) !important; }

.auth-form-pane input.form-control:focus {
  outline: none;
  background: #1d2230 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(31,155,224,.22) !important;
}

.auth-form-pane input:-webkit-autofill,
.auth-form-pane input:-webkit-autofill:hover,
.auth-form-pane input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #1d2230 inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

.auth-pw { position: relative; }
.auth-pw input.form-control { padding-right: 62px !important; }
.auth-pw-toggle {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  padding: 7px 10px; border: none; border-radius: 8px; background: none;
  font: 700 .7rem/1 inherit; letter-spacing: .05em; color: var(--muted);
  cursor: pointer;
}
.auth-pw-toggle:hover { color: var(--text); background: rgba(255,255,255,.05); }
.auth-pw-toggle:focus-visible {
  outline: none; color: var(--text);
  box-shadow: 0 0 0 2px rgba(31,155,224,.55);
}

.auth-form-pane .text-danger,
.auth-form-pane .text-danger p {
  margin: 6px 0 0; font-size: .78rem; color: var(--danger) !important;
}

.auth-check { display: flex; align-items: center; gap: 9px; margin: 2px 0 22px; }

.auth-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 17px; height: 17px; margin: 0;
  background: var(--panel-2);
  border: 1px solid var(--border-2); border-radius: 5px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.auth-check input[type="checkbox"]:hover { border-color: var(--accent); }
.auth-check input[type="checkbox"]:checked {
  background: var(--accent) center/11px no-repeat
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  border-color: var(--accent);
}
.auth-check input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(31,155,224,.3);
}
.auth-check label { margin: 0; font-size: .84rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.auth-check label:hover { color: var(--text); }

.auth-submit {
  display: block; width: 100%;
  padding: 15px 18px;
  font-family: inherit; font-size: .97rem; font-weight: 800; letter-spacing: -.005em;
  color: #fff;
  background: linear-gradient(180deg, var(--accent-h), var(--accent));
  border: none; border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(31,155,224,.3);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.auth-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(31,155,224,.38);
}
.auth-submit:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(31,155,224,.3); }
.auth-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,155,224,.5); }

.auth-microcopy {
  margin: 14px 0 0; text-align: center;
  font-size: .76rem; line-height: 1.5; color: var(--muted);
}
.auth-microcopy a { color: var(--muted); text-decoration: underline; }
.auth-microcopy a:hover { color: var(--text); }

.auth-consent {
  margin: 9px 0 0; text-align: center;
  font-size: .76rem; line-height: 1.5; color: var(--muted);
}
.auth-consent a { color: var(--text); text-decoration: underline; }

.auth-hint {
  margin: 6px 2px 0; font-size: .74rem; line-height: 1.45; color: var(--muted);
}

.pw-rules {
  list-style: none; margin: 7px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  font-size: .74rem; line-height: 1.4;
}
.pw-rules[hidden] { display: none; }
.pw-rule {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); transition: color .12s ease;
}
.pw-ico {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
}

.pw-rule.bad { color: #e0576a; }
.pw-rule.ok { color: #3f9c68; }
.pw-rule.ok .pw-ico { background: currentColor; border-color: currentColor; }
.pw-rule.ok .pw-ico::after {
  content: ""; width: 6px; height: 3px; margin-top: -2px;
  border-left: 1.5px solid var(--bg, #0c1016);
  border-bottom: 1.5px solid var(--bg, #0c1016);
  transform: rotate(-45deg);
}

.auth-agree {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0 16px; cursor: pointer;
  font-size: .82rem; line-height: 1.5; color: var(--muted);
}
.auth-agree input[type="checkbox"] {
  width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto;
  accent-color: var(--accent, #1f9be0); cursor: pointer;
}
.auth-agree a { color: var(--text); text-decoration: underline; }
.auth-agree a:hover { color: var(--accent, #1f9be0); }

.auth-alt {
  margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center; font-size: .86rem; color: var(--muted);
}
.auth-alt a { color: var(--accent); font-weight: 600; }
.auth-alt a:hover { color: var(--accent-h); }
.auth-alt p { margin: 0 0 6px; }
.auth-alt p:last-child { margin: 0; }

.auth-new { margin: 22px 0 0; }
.auth-new-note {
  margin: 0 0 10px; text-align: center;
  font-size: .8rem; font-weight: 600; color: var(--muted);
}
.auth-create {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box;
  padding: 18px 18px; min-height: 58px;
  background: #fff; color: #16181d;
  border: 1px solid #fff; border-radius: var(--radius);
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em;
  text-align: center; text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.auth-create:hover, .auth-create:focus {
  color: #16181d; text-decoration: none;
  filter: brightness(.97);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,.5);
}
.auth-create:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.auth-create:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,155,224,.6); }

.auth-flash {
  margin: 0 0 20px; padding: 12px 14px;
  border: 1px solid rgba(255,107,129,.35);
  border-radius: var(--radius);
  background: rgba(255,107,129,.09);
  font-size: .84rem; color: #ffb3bf;
}
.auth-flash p { margin: 0; }
.auth-flash p + p { margin-top: 6px; }

.auth-help {
  margin: 22px 0 0; text-align: center;
  font-size: .78rem; color: var(--muted);
}
.auth-help a { color: var(--accent); }

@media (max-width: 900px) {
  .auth-form-pane { padding: 36px 26px; }
}
@media (max-width: 420px) {
  
  .auth-shell { padding: clamp(20px, 5vh, 44px) 14px 48px; }
  .auth-form-pane { padding: 30px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-scope * { transition: none !important; }
  .auth-sso:hover, .auth-submit:hover { transform: none; }
}