:root{
  /* Prefer marketing site variables when available; fall back to safe values */
  --auth-bg-start: var(--panel-bg, #f6f9fb);
  --auth-bg-end: var(--panel-bg, #f6f9fb);
  --auth-card: #ffffff;
  --auth-border: var(--card-border, #e6eef4);
  --auth-text: var(--card-text, #0f172a);
  --auth-muted: var(--muted, #64748b);
  --auth-link: var(--brand-blue, #2563eb);
}

html,body{height:100%;margin:0;font-family:Inter,Segoe UI,system-ui,-apple-system,Roboto,"Helvetica Neue",Arial;}
.body-bg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 12px;
  background: linear-gradient(135deg, var(--auth-bg-start) 0%, var(--auth-bg-end) 100%);
}
.shell{width:min(380px, 100%);} 
.card{
  background:var(--auth-card);
  border:1px solid var(--auth-border);
  border-radius:12px;
  padding:18px;
  box-shadow:0 12px 30px rgba(2, 6, 23, 0.10);
  color:var(--auth-text);
}

.card-header{background:var(--banner-bg, #d0d4d9) !important; padding:14px 18px; display:flex; align-items:center; gap:12px; border-top-left-radius:12px; border-top-right-radius:12px; margin-bottom:0 !important}
.card-header img{height:40px}
.card-header .title{color:#000000;font-weight:700;margin:0;font-size:1.05rem}
.card-body{padding:20px}
.tag{font-weight:600;color:#07101b}

.signup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.signup-grid > div { display:flex; flex-direction:column; }
.pw-input { font-family:inherit; }
/* captcha row layout: image, answer input, refresh button inline */
.signup-grid #signupCaptcha, #signupCaptcha { grid-column: 1 / -1; display:flex; gap:12px; align-items:center; flex-direction:row; justify-content:center; }
.captcha-image { width:160px; height: auto; max-height:64px; object-fit:cover; border-radius:6px; border:1px solid #e5e7eb; }
.captcha-answer { width:120px; max-width:140px; padding:6px 8px; text-align:left; box-sizing:border-box; }
.signup-grid #signupCaptcha input[type="text"], #signupCaptcha input[type="text"] { height:40px; }
.signup-grid #signupCaptcha button { margin-left:8px; }
.captcha-refresh { background:#111;color:#fff;border-radius:6px;padding:8px 12px;border:none;cursor:pointer }
.captcha-refresh-icon { background:#111;border-radius:8px;padding:8px 10px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.captcha-refresh-icon svg{display:block}

/* back button in header */
.back-btn{background:transparent;border:none;font-size:18px;cursor:pointer;color:#0b1b2b;padding:6px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;transition:background .18s ease,transform .12s ease;color:var(--auth-text)}
.back-btn:focus{outline:2px solid rgba(37,99,235,0.18)}
.back-btn:hover{background:rgba(2,6,23,0.06); transform:translateX(-2px); color:var(--brand-blue, #0000FF)}
.home-link img{height:40px;vertical-align:middle}

/* plan buttons */
.plan-btn{background:#fff;border:1px solid #e6eef4;padding:8px 12px;border-radius:8px;cursor:pointer}
.plan-btn.active{background:var(--brand-blue, #0000FF);color:#fff;border-color:var(--brand-blue, #0000FF)}
.plan-select{display:flex;gap:8px;justify-content:center}

/* Billing term buttons */
.term-btn {
  background: #f8fbff;
  border: 1px solid #dbe3ee;
  color: var(--auth-text);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.term-btn.active {
  background: var(--brand-blue, #0000FF);
  color: #ffffff;
  border-color: var(--brand-blue, #0000FF);
}

#termToggle .term-btn {
  background: #f8fbff !important;
  border: 1px solid #dbe3ee !important;
  color: var(--auth-text) !important;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

#termToggle .term-btn.active {
  background: var(--brand-blue, #0000FF) !important;
  color: #ffffff !important;
  border-color: var(--brand-blue, #0000FF) !important;
}

@media (max-width:420px) {
  .captcha-image { width:96px; max-height:44px; }
  .captcha-answer { width:40px; }
  #signupCaptcha { gap:8px; }
}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;}
.brand img{height:30px;}
h1{margin:0;font-size:1.25rem;color:var(--auth-text);font-weight:700;}
.sub{display:none;}
.field{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
label{font-size:0.92rem;color:var(--auth-muted);font-weight:600;}
.simple-input{
  width:100%;
  height:36px;
  box-sizing:border-box;
  border-radius:8px;
  border:1px solid #dbe3ee;
  background:#f8fbff;
  color:var(--auth-text);
  font-size:0.95rem;
  padding:8px 10px;
}
.simple-input:focus{outline:2px solid rgba(37,99,235,0.18); border-color:#93c5fd;}
.field-link{font-size:0.82rem;color:var(--auth-link);text-decoration:none;}
.field-links{margin-top:2px;margin-bottom:0;}
.help{margin-top:8px;display:flex;align-items:center;}
.remember{display:flex;align-items:center;gap:8px;color:var(--auth-muted);white-space:nowrap;}
.actions{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.actions .btn-primary { width:100%; padding:12px 14px; border-radius:10px; }

/* Signup footer layout: register left, back center, cancel right */
.signup-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:18px}
.signup-footer .register-btn{justify-self:start}
.signup-footer .back-link{justify-self:center}
.signup-footer .cancel-link{justify-self:end}
.btn-primary,
.primary{
  border:none;
  border-radius:8px;
  padding:10px 12px;
  background:var(--brand-blue, #0000FF) !important;
  color:#ffffff !important;
  font-weight:700;
  cursor:pointer;
}
.footer{margin-top:12px;color:var(--auth-muted);font-size:0.9rem;}

/* Password strength list style */
.pw-strength { width:100%; }
.pw-strength-bar { transition: width 220ms ease-in-out; background:linear-gradient(90deg,#10b981,#06b6d4); height:8px; border-radius:6px; }
.pw-strength-list { margin-top:8px; color:var(--auth-text) !important; list-style:disc; padding-left:20px; font-size:0.95rem; }
.pw-strength-list li { margin:6px 0; }
.pw-strength-list li.ok::before { content: '\2713\00a0'; color:#10b981; font-weight:700; }
.pw-strength-list li.ok { color:#10b981; font-weight:600; }
.link,.small{color:var(--auth-muted);}
#app-snackbar{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%) translateY(6px);
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s;
  z-index:9999;
}
#app-snackbar.show{opacity:1;transform:translateX(-50%) translateY(0);}
#app-snackbar.error{background:#b91c1c}
#app-snackbar.success{background:#16a34a}
#app-snackbar .msg{font-size:0.92rem}
@media (max-width:520px){
  .card{padding:14px;border-radius:10px;}
  h1{font-size:1.1rem;}
}

/* Reduce modal width for the marketing overlay login to match compact auth pages */
.login-card{ width:min(92%,480px); max-width:480px; }

/* Force auth-area primary buttons to exact blue used on marketing */
.body-bg .btn-primary,
.body-bg .primary,
.login-card .primary {
  background: #0000FF !important;
  color: #ffffff !important;
}

/* Auth pages: links in auth area use brand blue; keep card/input borders at theme defaults */
.body-bg a {
  color: #0000FF !important;
}
.body-bg .field-link { color: #0000FF !important; }
/* ── Reset-password page styles ─────────────────────────────────── */
.reset-wrap {
  max-width: 520px;
  margin: 40px auto;
  padding: clamp(16px, 4vw, 32px);
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--auth-border);
  box-shadow: 0 8px 24px rgba(15,23,36,0.08);
}
.reset-wrap h2 { margin-top: 0; color: var(--auth-text); }
.reset-wrap p { color: var(--auth-muted); }
.reset-msg { margin-top: 10px; font-size: 0.92rem; }
.reset-error { color: #b91c1c; }
.reset-success { color: #16a34a; }
.reset-wrap .field { display: flex; flex-direction: column; margin-top: 10px; gap: 4px; }
.reset-wrap label { font-size: 0.92rem; color: var(--auth-muted); font-weight: 600; }
.in-lite {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #dbe3ee;
  background: #f8fbff;
  color: var(--auth-text);
  font-size: 0.95rem;
}
.in-lite:focus { outline: 2px solid rgba(37,99,235,0.18); border-color: #93c5fd; }
.reset-wrap .btn { padding: 10px 18px; border-radius: 8px; border: none; cursor: pointer; font-weight: 700; font-size: 0.95rem; }
.reset-wrap .btn.btn-primary { background: var(--brand-blue, #0000FF); color: #fff; }

/* ── Large screen / TV / projector support ───────────────────────── */
/* Auth card scales up gracefully on large displays */
@media (min-width: 1400px) {
  .shell { width: min(440px, 100%); }
  .card { font-size: 1.05rem; }
  .simple-input { height: 40px; font-size: 1rem; }
  .reset-wrap { max-width: 600px; }
}

@media (min-width: 1920px) {
  .shell { width: min(520px, 100%); }
  .card { font-size: 1.1rem; }
  .simple-input { height: 44px; font-size: 1.05rem; }
  .btn-primary, .primary { padding: 13px 16px; font-size: 1.05rem; }
  .reset-wrap { max-width: 680px; padding: 40px; }
}

@media (min-width: 2560px) {
  .shell { width: min(640px, 100%); }
  .card { font-size: 1.2rem; }
  .simple-input { height: 50px; font-size: 1.15rem; }
  .btn-primary, .primary { padding: 15px 20px; font-size: 1.15rem; }
  .reset-wrap { max-width: 800px; }
}