/* vision-central — login page skin.
   Layered over existing login.handlebars DOM. CSS-only, no HTML change.
   Activates on body.login. Tokens come from tokens.css (loaded via custom.css).
*/

body#body.login {
  background: var(--bg-0) !important;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(34,211,238,0.10), transparent 60%),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
  background-color: var(--bg-0) !important;
  background-size: auto, 32px 32px, 32px 32px !important;
  background-position: center top, -1px -1px, -1px -1px !important;
  background-attachment: fixed !important;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

body.login #container {
  background: transparent;
  color: var(--text-1);
  min-height: 100vh;
}

/* Masthead — wordmark area */
body.login #masthead {
  background: transparent;
  border-bottom: 1px solid var(--border-2);
  padding: 16px 24px;
}
body.login #masthead .title {
  color: var(--text-0);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-shadow: none;
}
body.login #masthead .title2 {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 400;
  text-shadow: none;
}

/* Topbar (UI selector) — keep available but de-emphasized */
body.login #topbar {
  background: transparent !important;
  border-bottom: 1px solid var(--border-1);
  color: var(--text-3);
}
body.login #uiMenuButton { color: var(--text-3); }

/* Welcome heading */
body.login #column_l { color: var(--text-1); }
body.login #column_l h1 {
  color: var(--text-0);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.025em;
  margin: 32px 0 12px;
}
body.login #welcomeText {
  color: var(--text-2);
  max-width: 560px;
  line-height: 1.55;
}

/* Welcome image — soft frame */
body.login #welcomeimage img {
  border-radius: var(--radius-5) !important;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-2);
  opacity: 0.92;
}

/* Login card */
body.login #logincell {
  vertical-align: top;
  padding: 0 0 0 32px;
}
body.login #loginpanel,
body.login #createpanel,
body.login #resetpanel,
body.login #tokenpanel {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-4);
  padding: 24px 24px 16px;
  box-shadow: var(--shadow-2);
  color: var(--text-1);
  width: 340px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
}
body.login #loginpanel b,
body.login #createpanel b,
body.login #resetpanel b,
body.login #tokenpanel b {
  color: var(--text-0);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 16px;
}

/* Form tables — relax cramped layout */
body.login #loginpanel table,
body.login #createpanel table,
body.login #resetpanel table,
body.login #tokenpanel table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
body.login #loginpanel td,
body.login #createpanel td,
body.login #resetpanel td,
body.login #tokenpanel td {
  color: var(--text-2);
  font-size: 12px;
  padding: 2px 4px;
}

/* Inputs */
body.login input[type=text],
body.login input[type=email],
body.login input[type=password] {
  width: 100%;
  height: 34px;
  background: var(--bg-4);
  border: 1px solid var(--border-3);
  border-radius: var(--radius-2);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 0 8px;
  transition: border-color .12s, background .12s, box-shadow .12s;
  outline: none;
}
body.login input[type=text]:hover,
body.login input[type=email]:hover,
body.login input[type=password]:hover {
  background: var(--bg-5);
}
body.login input[type=text]:focus,
body.login input[type=email]:focus,
body.login input[type=password]:focus {
  border-color: var(--accent-border);
  background: var(--bg-4);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
body.login input::placeholder { color: var(--text-3); }

/* Submit / primary buttons */
body.login input[type=submit] {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  border-radius: var(--radius-2);
  height: 34px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}
body.login input[type=submit]:hover { background: var(--accent-2); }
body.login input[type=submit]:disabled {
  background: var(--bg-3);
  color: var(--text-3);
  border-color: var(--border-2);
  cursor: not-allowed;
}

/* Secondary action buttons (Use SMS, Email, etc) */
body.login input[type=button] {
  background: var(--bg-3);
  color: var(--text-0);
  border: 1px solid var(--border-3);
  border-radius: var(--radius-2);
  height: 30px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  margin-left: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.login input[type=button]:hover {
  background: var(--bg-4);
  border-color: var(--border-4);
}
/* Create Account is the primary action on the signup panel — it's type=button
   (so it inherited the muted secondary style above). Promote it to the accent
   CTA, matching #loginButton, while keeping a clear disabled state. */
body.login #createButton {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  height: 34px;
  font-weight: 500;
  font-size: 13px;
  margin-left: 0;
}
body.login #createButton:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
body.login #createButton:disabled {
  background: var(--bg-3);
  color: var(--text-3);
  border-color: var(--border-2);
  cursor: not-allowed;
}

/* Links */
body.login a {
  color: var(--accent-2);
  text-decoration: none;
  transition: color .12s;
}
body.login a:hover { color: var(--accent); text-decoration: underline; }

/* Dividers */
body.login hr {
  border: 0;
  border-top: 1px solid var(--border-2);
  margin: 16px 0 12px;
}

/* Reset / create-account / hint footer rows */
body.login #resetAccountDiv,
body.login #newAccountDiv,
body.login #showPassHintLink {
  color: var(--text-2);
  font-size: 12px;
}

/* Messages (error / info banners) */
body.login #message1,
body.login #message2,
body.login #message3,
body.login #message4 {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: var(--radius-2);
  padding: 8px 12px;
  font-size: 12px;
  margin-bottom: 12px;
}
body.login #message1:empty,
body.login #message2:empty,
body.login #message3:empty,
body.login #message4:empty { display: none; }

/* OAuth provider buttons row */
body.login #authStrategies a img {
  border-radius: var(--radius-2) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px var(--border-3) !important;
  transition: transform .12s, box-shadow .12s;
}
body.login #authStrategies a img:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.5), 0 0 0 1px var(--accent-border) !important;
}
body.login #authStrategies > div:first-child {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

/* Token / 2FA remember checkbox */
body.login #tokenInputRememberLabel { color: var(--text-2); font-size: 12px; }
body.login input[type=checkbox] { accent-color: var(--accent); }

/* CAPTCHA image — soft frame */
body.login #newAccountCaptchaImg img {
  border-radius: var(--radius-2);
  border: 1px solid var(--border-2);
}

/* Force-dark scrollbar within login surface */
body.login::-webkit-scrollbar { width: 10px; height: 10px; }
body.login::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
body.login::-webkit-scrollbar-track { background: transparent; }

/* ─── login2.handlebars (centered single-card layout) ──────────────────
   Different DOM from login.handlebars: #centralTable centered, big brand,
   then #loginpanel card. Make it look like the design's split login.
*/
body.login #centralTable {
  width: 100%;
  height: 100vh;
}
body.login #logincell {
  text-align: center;
  vertical-align: middle;
  padding: 24px;
}
body.login #loginPicture {
  max-width: 80px;
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 24px var(--accent-bg-strong));
}
body.login .loginBrand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-sans) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em;
  color: var(--text-0) !important;
  margin: 0 0 24px;
  padding: 0 12px;
  text-shadow: 0 0 24px rgba(34,211,238,0.25);
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
@media (max-width: 420px) {
  body.login .loginBrand { font-size: 22px !important; gap: 8px; }
  body.login .loginBrandMark { flex: 0 0 32px; width: 32px; height: 32px; }
}
body.login .loginBrandMark {
  flex: 0 0 42px;
  filter: drop-shadow(0 0 16px rgba(34,211,238,0.4));
}
body.login .loginBrandText { display: inline-block; }
body.login .loginBrandSub {
  font-size: 13px !important;
  font-weight: 400;
  color: var(--text-2);
  letter-spacing: 0;
  margin-left: var(--space-2);
  align-self: baseline;
}

/* override the cream input bg from old inline styles (now stripped) */
body.login #username,
body.login #password,
body.login #showPassHintLink {
  width: 100% !important;
  max-width: none;
  background: var(--bg-4) !important;
  background-color: var(--bg-4) !important;
  border: 1px solid var(--border-3) !important;
  border-radius: var(--radius-2) !important;
  color: var(--text-0) !important;
  height: 36px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
}
body.login #username:focus-visible,
body.login #password:focus-visible {
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 3px var(--accent-bg) !important;
}
body.login #username:focus,
body.login #password:focus { outline: none; }
body.login #loginButton {
  width: 100% !important;
  max-width: none;
  height: 36px;
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-2) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background .12s;
  box-sizing: border-box !important;
}
body.login #loginButton:hover { background: var(--accent-2) !important; }

/* the login2 form panel — make it a real card */
body.login #loginpanel {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius-4) !important;
  box-shadow: var(--shadow-pop) !important;
  padding: 24px !important;
  display: inline-block;
  margin: 0 auto;
}

/* hide the welcome.png faded backdrop — we have the grid + radial */
body.login #backgroundImage { display: none !important; }

/* ─── Polish pass ─────────────────────────────────────────────────────── */

/* uiMenuButton (♦ glyph) — make it a real icon button */
body.login #uiMenuButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  margin-left: 8px;
  border-radius: var(--radius-2);
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  transition: color .12s, background .12s;
}
body.login #uiMenuButton:hover {
  color: var(--accent-2);
  background: var(--bg-2);
}
body.login #uiMenu {
  position: absolute;
  margin-top: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border-3);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-pop);
  padding: 8px;
  display: flex;
  gap: 8px;
  z-index: 50;
}
body.login .uiSelector {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-2);
  border: 1px solid var(--border-3);
  background: var(--bg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s, background .12s;
}
body.login .uiSelector:hover {
  background: var(--bg-4);
  border-color: var(--accent-border);
}

/* OAuth row — kill the inline drop-shadow and white square on OIDC icons */
body.login #authStrategies a img {
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px var(--border-3) !important;
}
body.login #authStrategies a img[src*="oidc"],
body.login #auth-oidc img,
body.login #auth-oidc-azure img,
body.login #auth-oidc-google img {
  background-color: var(--bg-3) !important;
  padding: 4px;
  box-sizing: border-box;
}
/* only force-show when actually shown — JS (QV) clears inline display:none when
   an SSO strategy exists; otherwise the divider must stay hidden (login2.handlebars:93) */
body.login #authStrategies:not([style*="none"]) {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
body.login #authStrategies > div:first-of-type {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
body.login #authStrategies > div:first-of-type::before,
body.login #authStrategies > div:first-of-type::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-2);
  margin: 0;
}
body.login #loginuserpasshr { display: none !important; }
body.login #authStrategies a { display: inline-flex; }

/* Token panel — keep the secondary key-method buttons on one row, not floated */
body.login #tokenpanel td[colspan="2"] > div[style*="float:right"] {
  float: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
body.login #tokenpanel input[type=submit] {
  width: 100%;
  margin-top: 8px;
}

/* Form table layout — labels above inputs on narrow screens; remove 100px width hack */
body.login #loginpanel td[width="100"],
body.login #createpanel td[width="100"],
body.login #resetpanel td[width="100"],
body.login #tokenpanel td[width="100"] {
  text-align: left !important;
  width: auto !important;
  padding-right: 8px;
  /* !important: validateCreate() inline-sets these labels to 'black' (valid,
     invisible on dark) or '#7b241c' (invalid — fires on the empty initial
     load, so every label looks errored). Pin to the theme colour instead. */
  color: var(--text-2) !important;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.login #loginpanel td[align="right"],
body.login #createpanel td[align="right"],
body.login #resetpanel td[align="right"],
body.login #tokenpanel td[align="right"] {
  text-align: left !important;
  color: var(--text-2) !important;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-right: 8px;
}

/* CAPTCHA frame. svg-captcha draws #222/#333/#444 strokes on a TRANSPARENT background, so it
   needs a light plate behind it to be legible. It used to be inverted instead, which turned the
   dark strokes light on top of an already-light plate and left the code all but invisible. */
body.login #newAccountCaptchaImg img,
body.login img[src*="captcha"] {
  border-radius: var(--radius-2);
  border: 1px solid var(--border-3);
  background: #eef2f8;
  padding: 4px;
}

/* Password policy callout — visible when shown */
body.login #passwordPolicyCallout:not([style*="display:none"]),
body.login #rpasswordPolicyCallout:not([style*="display:none"]) {
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-2);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-2);
  margin: 4px 0 12px;
}

/* Hint/warning text rows */
body.login #passWarning,
body.login #rpassWarning {
  color: var(--warn);
  font-size: 12px;
}

/* "Show Hint" link — let it sit nicely under password */
body.login #showPassHintLink {
  text-align: left;
  margin-top: 4px;
}
body.login #showPassHintLink a { font-size: 12px; }

/* Welcome image — hide entirely on narrow screens, keep layout single column */
@media (max-width: 980px) {
  body.login #welcomeimage { display: none !important; }
  body.login #centralTable { width: 100%; }
  body.login #logincell { padding: 0 16px !important; }
  body.login #loginpanel,
  body.login #createpanel,
  body.login #resetpanel,
  body.login #tokenpanel { width: 100% !important; max-width: 420px; margin: 0 auto; }
}

/* Subtle entrance — keeps things feeling modern, not jumpy */
@media (prefers-reduced-motion: no-preference) {
  body.login #loginpanel:not([style*="display:none"]),
  body.login #createpanel:not([style*="display:none"]),
  body.login #resetpanel:not([style*="display:none"]),
  body.login #tokenpanel:not([style*="display:none"]),
  body.login #resettokenpanel:not([style*="display:none"]),
  body.login #resetpasswordpanel:not([style*="display:none"]) {
    animation: vision-fade-up .28s ease-out both;
  }
}
@keyframes vision-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "Back to login" link — tighten + add chevron */
body.login a[onclick*="xgo(1"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 8px;
}
body.login a[onclick*="xgo(1"]:hover { color: var(--accent-2); text-decoration: none; }
body.login a[onclick*="xgo(1"]::before {
  content: '';
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>") center/contain no-repeat;
}

/* Welcome heading — bigger, more inviting (JS controls #welcomeText visibility) */
body.login #column_l h1 {
  font-size: 32px !important;
}
body.login #welcomeText {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 0 16px;
}
@media (max-width: 980px) {
  body.login #column_l { padding: 0 16px; text-align: center; }
  body.login #column_l h1 { font-size: 26px !important; margin-top: 24px; }
}

/* ─── login-mobile.handlebars overrides ────────────────────────────────
   This view has heavy inline styling (background-color:#979797 panels,
   #036 masthead, color:black body). Override aggressively. */

body.login[style*="color:black"],
body.login[style*="color: black"] {
  color: var(--text-1) !important;
  background: var(--bg-0) !important;
}

/* Masthead — strip the legacy logo + dark blue */
body.login #masthead[style*="background-color:#036"],
body.login #masthead[style*="logo.png"] {
  background: var(--bg-1) !important;
  background-image:
    radial-gradient(ellipse 60% 90% at 0% 50%, rgba(34,211,238,0.10), transparent 70%) !important;
  background-repeat: no-repeat !important;
  height: 56px !important;
  border-bottom: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  padding: 0 16px;
}
body.login #masthead font {
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  color: var(--text-0) !important;
  letter-spacing: -0.02em;
}
body.login #masthead strong + div font,
body.login #masthead div:nth-child(2) font {
  font-size: 11px !important;
  color: var(--text-2) !important;
  font-weight: 400 !important;
}

/* Mobile panels (#loginpanel/#createpanel/#resetpanel/#tokenpanel/#resettokenpanel/
   #resetpasswordpanel/#checkemailpanel) — kill the grey rounded-rect look */
body.login [id$="panel"][style*="background-color:#979797"],
body.login div[style*="background-color:#979797"] {
  background: var(--bg-2) !important;
  background-color: var(--bg-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius-4) !important;
  box-shadow: var(--shadow-2) !important;
  width: min(340px, calc(100vw - 24px)) !important;
  padding: 24px !important;
  text-align: left !important;
  color: var(--text-1) !important;
}

/* Password policy callouts (yellow-FFC pop on mobile) */
body.login #passwordPolicyCallout[style*="background-color:#FFC"],
body.login #rpasswordPolicyCallout[style*="background-color:#FFC"] {
  background: var(--bg-3) !important;
  background-color: var(--bg-3) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-3) !important;
  border-left: 3px solid var(--info) !important;
  border-radius: var(--radius-2) !important;
  box-shadow: var(--shadow-pop) !important;
  font-size: 12px !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  margin: 8px 0 12px !important;
}

/* Inline <style> block in head overrides — anchor color */
body.login a[style*="cursor:pointer"],
body.login a[onclick*="xgo"] {
  color: var(--accent-2) !important;
}
body.login a[style*="cursor:pointer"]:hover,
body.login a[onclick*="xgo"]:hover {
  color: var(--accent) !important;
}

/* Page content container (mobile) */
body.login #page_content[style*="overflow-y:scroll"] {
  background: var(--bg-0);
}
body.login #page_content #column_l { padding: 24px 12px; }

/* Mobile: stack labels above inputs (the right-aligned 100px label cells
   look bad on phones) */
@media (max-width: 480px) {
  body.login #loginpanel table tr,
  body.login #createpanel table tr,
  body.login #resetpanel table tr,
  body.login #tokenpanel table tr,
  body.login #resettokenpanel table tr,
  body.login #resetpasswordpanel table tr { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 4px; }
  body.login #loginpanel table td,
  body.login #createpanel table td,
  body.login #resetpanel table td,
  body.login #tokenpanel table td,
  body.login #resettokenpanel table td,
  body.login #resetpasswordpanel table td {
    width: 100% !important;
    text-align: left !important;
    padding: 2px 0 !important;
  }
  body.login input[type=submit],
  body.login input[type=button] {
    width: 100% !important;
    height: 40px !important;
    margin: 4px 0 !important;
  }
}

/* ─── Footer link breathing room ───────────────────────────────────────
   #flink "Terms & Privacy" ships inline float:right;margin-right: 4px
   (login2.handlebars:346) — crammed flush into the bottom-right corner.
   Override the inline margin (needs !important) to give ~16px edge gutters
   matching the rest of the layout. Center it on narrow viewports. */
body.login #flink[style*="float:right"] {
  margin: 0 16px 12px 0 !important;
}
@media (max-width: 480px) {
  body.login #flink[style*="float:right"] {
    float: none !important;
    text-align: center;
    margin: 8px 0 12px !important;
  }
}

/* ═══ Contract enforcement (design/UI-CONTRACT.md) ═══
   The login page's <body> is `class="arg_hide login"` — it has no `vision`
   class, so the app-layer contract rules do not reach it. Same scale, keyed to
   this page. Found by `node .pw/lint.js`. */
body.login #loginpanel { padding: var(--space-6) !important; }
body.login #username,
body.login #password {
  padding-left: var(--space-3) !important;
  padding-right: var(--space-3) !important;
}

/* Terms acceptance row on the create-account form */
body.login .vcTermsCell {
  padding-top: var(--space-3, 12px);
}

body.login .vcTermsLabel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  color: var(--text-2, #8a96ab);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

body.login .vcTermsLabel input[type=checkbox] {
  margin: 2px 0 0 0;
  flex-shrink: 0;
}

body.login .vcTermsLabel a {
  color: var(--accent, #22d3ee);
}

/* ---------------------------------------------------------------------------
   WhatsApp contact button — floating, bottom-right (login pages).
   Same rule as vision-app.css; login views do not load that file.
   --------------------------------------------------------------------------- */

.vcWaFab {
  position: fixed;
  right: var(--space-6, 24px);
  bottom: var(--space-6, 24px);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.vcWaFab:hover {
  background: #1eb457;
  transform: scale(1.05);
}

.vcWaFab:active {
  transform: scale(0.98);
}

.vcWaFab:focus-visible {
  outline: 3px solid rgba(34, 211, 238, 0.6);
  outline-offset: 2px;
}

.vcWaFab svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: #fff;
}

@media (max-width: 600px) {
  .vcWaFab {
    right: var(--space-4, 16px);
    bottom: var(--space-4, 16px);
  }
}

@media print {
  .vcWaFab { display: none; }
}