.login-page{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  background:
    radial-gradient(circle at 25% 35%, rgba(30,158,99,.25), transparent 35%),
    linear-gradient(135deg,var(--surface-page),var(--surface-elevated));
  overflow-x:hidden;
  overflow-y:auto;
}

.brand-panel{
  padding:70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:34px;
}

.brand-logo{
  width:160px;
  height:auto;
}

.brand-copy h1{
  font-size:48px;
  color:var(--sidebar-accent);
  letter-spacing:2px;
}

.brand-copy h2{
  margin-top:10px;
  font-size:24px;
  color:var(--text-primary);
}

.brand-copy p{
  margin-top:18px;
  color:var(--sidebar-accent);
  letter-spacing:2px;
}

.brand-points{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.brand-points span{
  padding:12px 18px;
  border:1px solid var(--brand-green);
  border-radius:999px;
  color:var(--sidebar-accent);
  background:var(--surface-elevated);
  font-size:14px;
}

.login-card{
  margin:auto;
  width:90%;
  max-width:430px;
  background:var(--surface-card);
  color:var(--text-primary);
  border:1px solid var(--brand-green);
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow);
}

.login-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.lfs-language-selector-wrap{
  margin-top:8px;
}

.login-page:not(.registration-page) .lfs-language-selector-wrap{
  margin-bottom:6px;
}

.lfs-language-selector{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--sidebar-accent);
  font-weight:700;
}

.lfs-language-selector select{
  min-height:36px;
  border:1px solid var(--brand-green);
  border-radius:999px;
  background:var(--surface-input);
  color:var(--text-primary);
  padding:6px 10px;
}

html[dir="rtl"] .login-card,
html[dir="rtl"] .brand-copy,
html[dir="rtl"] .brand-points,
html[dir="rtl"] .login-options,
html[dir="rtl"] .login-card label,
html[dir="rtl"] .login-card p{
  text-align:right;
}

html[dir="rtl"] .input-icon i,
html[dir="rtl"] .dial-code-display,
html[dir="rtl"] .number-preserve{
  direction:ltr;
  unicode-bidi:isolate;
}

.login-top img{
  width:78px;
  height:auto;
}

/* .theme-toggle is the actual Light/Dark/System control - js/theme.js
   binds a click handler to every element with this class and rewrites its
   icon/label, so it must never be reused purely for its pill-button look
   (see .icon-close-btn below for that). */
.theme-toggle,
.logout-navigation-button,
.login-navigation-button,
.icon-close-btn{
  width:auto;
  padding:8px 14px;
  border:1px solid var(--brand-green);
  background:transparent;
  color:var(--sidebar-accent);
  border-radius:999px;
}

.login-card h2{
  font-size:32px;
  margin-bottom:8px;
}

.login-page:not(.registration-page) .login-card h2{
  margin-top:0;
}

.login-card p{
  color:var(--text-muted);
  margin-bottom:16px;
}

.login-page:not(.registration-page) .login-card p{
  margin-top:0;
}

.login-card label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
}

.login-card input[type="email"],
.login-card input[type="password"]{
  width:100%;
  padding:15px;
  margin-bottom:14px;
  border-radius:10px;
  border:1px solid var(--border-default);
  background:var(--surface-input);
  color:var(--text-primary);
}

.login-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  font-size:14px;
  color:var(--text-muted);
}

.login-options input{
  margin-right:6px;
}

/* V1-LAUNCH-FIX-6: the whole "Remember me" row (box + text) is the tap
   target, at least 44px tall; the support e-mail link likewise. */
.login-remember{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  cursor:pointer;
}

.login-support-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

.login-options a{
  color:var(--sidebar-accent);
}

.text-link{
  border:0;
  background:transparent;
  color:var(--sidebar-accent);
  font-weight:700;
  padding:0;
}

.signin-btn{
  width:100%;
  padding:15px;
  border:0;
  border-radius:10px;
  background:var(--action-primary);
  color:var(--action-primary-text);
  font-weight:800;
  text-transform:uppercase;
}

.login-status-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #fca5a5;
  background:rgba(252,165,165,.1);
  color:var(--tone-error);
  font-size:14px;
}

.login-status-banner.hidden{
  display:none;
}

.login-status-banner.connectivity{
  /* V1-GLOBAL-GREEN-BRAND-BLUE-ACTIONS-1: this banner is a genuine
     attention-required/caution state ("Reconnect required...",
     "Internet connection required...", see js/auth.js setLoginStatus()
     callers), not decorative branding, so it is pointed at --warning/
     --tone-warn instead of the brand accent - never --brand-green.
     .login-retry-btn below inherits this color via currentColor, so it
     follows automatically. */
  border-color:var(--warning);
  background:rgba(255,193,7,.1);
  color:var(--tone-warn);
}

.login-retry-btn{
  flex:0 0 auto;
  padding:8px 14px;
  border:1px solid currentColor;
  border-radius:999px;
  background:transparent;
  color:inherit;
  font-weight:700;
}

.login-retry-btn.hidden{
  display:none;
}

/* CT-A3: pages/login.html only - never register.html (its <main> also
   carries "registration-page", excluded by :not() below). css/
   dashboard.css's own .lfs-sync-pill/tone-class rules are not loaded on
   this page at all, so this mirrors that same visual contract here
   rather than leaving the pill (now mounted inside .login-card by
   js/sync-status-widget.js's loginCardTarget()) render as unstyled
   plain text. Never fixed/sticky/floating/full-screen - normal document
   flow, same as the dashboard original. */
.login-page:not(.registration-page) .lfs-sync-pill{
  display:inline-block;
  margin:10px 0 14px;
  background:var(--surface-card);
  color:var(--text-primary);
  border:1px solid var(--border-default);
  border-radius:999px;
  padding:.35rem .75rem;
  font-size:.8rem;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  cursor:default;
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;
}

.login-page:not(.registration-page) .lfs-sync-tone-ok{color:var(--tone-ok)}
.login-page:not(.registration-page) .lfs-sync-tone-neutral{color:var(--tone-neutral)}
.login-page:not(.registration-page) .lfs-sync-tone-warn{color:var(--tone-warn)}
.login-page:not(.registration-page) .lfs-sync-tone-error{color:var(--tone-error)}
.login-page:not(.registration-page) .lfs-sync-tone-primary{color:var(--text-primary)}

.register-btn{
  width:100%;
  padding:14px;
  margin-top:10px;
  border:1px solid var(--brand-green);
  border-radius:10px;
  background:var(--surface-card);
  color:var(--sidebar-accent);
  font-weight:800;
}

.register-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.login-card input:not([type="checkbox"]),
.login-card select{
  width:100%;
  padding:15px;
  margin-bottom:14px;
  border-radius:10px;
  border:1px solid var(--border-default);
  background:var(--surface-input);
  color:var(--text-primary);
}

.login-card select{
  appearance:auto;
}

.login-card small{
  display:block;
  margin-top:14px;
  text-align:center;
  color:var(--text-muted);
}

.login-card small a{
  color:var(--sidebar-accent);
}

.dial-code-display{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin:8px 0;
  padding:6px 10px;
  border:1px solid var(--brand-green);
  border-radius:8px;
  color:var(--sidebar-accent);
  font-weight:800;
}

#registerPhonePreview{
  min-height:18px;
  margin-top:-10px;
  text-align:left;
}

.password-recovery-panel{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(0,0,0,.72);
}

.password-recovery-panel.hidden{
  display:none;
}

.password-recovery-card{
  width:min(460px,100%);
  max-height:calc(100vh - 44px);
  overflow:auto;
  padding:26px;
  border:1px solid var(--brand-green);
  border-radius:18px;
  background:var(--surface-card);
  color:var(--text-primary);
  box-shadow:var(--shadow);
  max-height:calc(100vh - 28px);
  overflow:auto;
}

.password-recovery-card h2{
  font-size:24px;
}

.password-recovery-card p{
  color:var(--text-muted);
  margin-bottom:16px;
}

/* Owner point 45: one step at a time, as "Confirm it is you" (css/main.css .lfs-stepup-step). */
.password-recovery-card .recovery-step{
  border:1px solid var(--border-default);
  border-radius:10px;
  padding:12px 14px 14px;
  margin:12px 0 0;
}
.password-recovery-card .recovery-step.hidden{display:none}
.password-recovery-card .recovery-step-title{
  margin:0 0 4px;
  font-size:1rem;
  font-weight:700;
  color:var(--text-primary);
}
.password-recovery-card .recovery-step-help{margin:0 0 8px;overflow-wrap:anywhere}
.password-recovery-card .recovery-step label{
  display:block;
  margin:10px 0 4px;
  font-weight:600;
  color:var(--text-primary);
}
.password-recovery-card .recovery-step input{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  padding:8px 10px;
  border:1px solid var(--border-default);
  border-radius:8px;
  background:var(--surface-card);
  color:var(--text-primary);
  font:inherit;
}
.password-recovery-card .recovery-step button{width:100%;min-height:44px;margin-top:12px}
.password-recovery-card .recovery-again{width:auto;background:none;border:0}

.recovery-status{
  white-space:pre-line;
  color:var(--sidebar-accent);
  font-weight:700;
}

.recovery-status.recovery-status-error{
  color:var(--tone-error);
}

/* PHASE 2A login-time workspace chooser */
.login-context-chooser{
  margin:16px 0;
}

.login-context-heading{
  margin:0 0 10px;
}

.login-company-chooser-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  width:100%;
}

.login-context-option{
  width:100%;
  min-height:56px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  padding:11px 14px;
  border:1px solid var(--border-default);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.login-context-option:hover,
.login-context-option:focus-visible{
  border-color:var(--brand-green);
}

.login-context-title{
  display:block;
  font-size:15px;
  line-height:1.3;
}

.login-context-subtitle{
  display:block;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.3;
}

.platform-admin-entry{
  width:100%;
  min-height:56px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  margin-top:12px;
  border:1px solid var(--border-default);
  border-radius:12px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.platform-admin-entry:hover,
.platform-admin-entry:focus-visible{
  border-color:var(--brand-green);
}

.platform-admin-entry-icon{
  flex:0 0 auto;
}

.platform-admin-entry-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.platform-admin-entry-copy strong{
  font-size:15px;
}

.platform-admin-entry-copy small{
  color:var(--text-muted);
  font-size:13px;
}

.login-invitation-row{
  width:100%;
  box-sizing:border-box;
}

@media(max-width:520px){
  .login-context-option,
  .platform-admin-entry{
    min-height:56px;
  }

  .login-company-chooser-list{
    grid-template-columns:minmax(0,1fr);
  }
}

.mfa-panel{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(0,0,0,.72);
}

.mfa-panel.hidden{
  display:none;
}

.mfa-card{
  width:min(360px,100%);
  max-height:calc(100vh - 44px);
  overflow:auto;
  padding:26px;
  border:1px solid var(--brand-green);
  border-radius:18px;
  background:var(--surface-card);
  color:var(--text-primary);
  box-shadow:var(--shadow);
  box-sizing:border-box;
}

.mfa-card h2{
  font-size:22px;
  margin-bottom:8px;
}

.mfa-card p{
  color:var(--text-muted);
  margin-bottom:16px;
}

.mfa-card label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
}

.mfa-card input{
  width:100%;
  min-height:44px;
  box-sizing:border-box;
  padding:12px 15px;
  margin-bottom:12px;
  border-radius:10px;
  border:1px solid var(--border-default);
  background:var(--surface-input);
  color:var(--text-primary);
  font-size:20px;
  letter-spacing:4px;
  text-align:center;
}

.mfa-status{
  min-height:20px;
  margin-bottom:12px;
  color:var(--tone-error);
  font-size:14px;
}

.mfa-actions{
  display:flex;
  gap:12px;
}

.mfa-actions button{
  flex:1;
  width:auto;
  min-height:44px;
  margin-top:0;
}

@media(max-width:520px){
  .mfa-card{
    padding:20px;
    border-radius:14px;
  }
}

@media(max-width:850px){
  .login-page{
    grid-template-columns:minmax(0,1fr);
    overflow-x:hidden;
    overflow-y:auto;
  }

  .brand-panel{
    padding:35px 24px;
    text-align:center;
    align-items:center;
  }

  .brand-copy h1{
    font-size:34px;
  }

  /* CT-A2 (corrected): the login card already carries the LATC identity
     (logo + title inside .login-top) - the full branding column is
     redundant on narrow screens and pushes the real controls below the
     fold. pages/register.html's <main> carries BOTH "login-page" and
     "registration-page" classes at once, so a bare .login-page
     .brand-panel selector would ALSO match registration - :not(
     .registration-page) makes this rule login-page-exclusive.
     Registration keeps the shared .brand-panel/.brand-copy h1 rules
     above unchanged. Hidden responsively only, never removed from the
     HTML. */
  .login-page:not(.registration-page) .brand-panel{
    display:none;
  }

  .login-card{
    margin:10px auto 35px;
    max-height:none;
  }

  .register-grid{
    grid-template-columns:minmax(0,1fr);
  }

  /* CT-A3: modest additional portrait trims for the real login page only
     - .login-card/.login-top/.lfs-language-selector-wrap/.login-card h2/
     .login-card p are all shared with pages/register.html's own markup,
     so a bare override here would also retighten registration; scoped
     to leave registration at exactly its existing (CT-A2) spacing. Not
     pursuing zero-scroll - only trimming decorative margins, never
     input/button padding, control height, or font sizes. */
  .login-page:not(.registration-page) .login-card{
    margin:10px auto 20px;
  }

  .login-page:not(.registration-page) .login-top{
    margin-bottom:12px;
  }

  .login-page:not(.registration-page) .lfs-language-selector-wrap{
    margin-top:4px;
  }

  .login-page:not(.registration-page) .login-card h2{
    margin-bottom:6px;
  }

  .login-page:not(.registration-page) .login-card p{
    margin-bottom:10px;
  }

  .login-page:not(.registration-page) .login-card small{
    margin-top:8px;
  }
}

@media(max-width:520px){
  .brand-panel{
    padding:24px 16px;
  }

  .brand-copy h1{
    font-size:30px;
  }

  .brand-points span{
    width:100%;
    text-align:center;
  }

  .login-card{
    width:calc(100% - 24px);
    padding:22px;
    border-radius:16px;
  }

  .login-options{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }

  .login-page:not(.registration-page) .login-top img{
    width:64px;
  }

  .login-page:not(.registration-page) .login-card h2{
    font-size:26px;
  }

  .login-page:not(.registration-page) .login-card{
    padding:18px;
  }

  .login-page:not(.registration-page) .login-top{
    margin-bottom:8px;
  }

  .login-page:not(.registration-page) .lfs-language-selector-wrap{
    margin-top:2px;
    margin-bottom:4px;
  }

  .login-page:not(.registration-page) .login-options{
    gap:8px;
    margin-bottom:10px;
  }

  .login-page:not(.registration-page) .lfs-sync-pill{
    margin:6px 0 10px;
  }

  .login-page:not(.registration-page) .login-card label{
    margin-bottom:4px;
  }

  .login-page:not(.registration-page) .login-card input[type="email"],
  .login-page:not(.registration-page) .login-card input[type="password"]{
    margin-bottom:10px;
  }
}

@media(max-height:560px){
  .login-page:not(.registration-page) .brand-panel{
    padding:24px 40px;
    gap:16px;
  }

  .login-page:not(.registration-page) .brand-logo{
    width:96px;
  }

  .login-page:not(.registration-page) .brand-copy h1{
    font-size:28px;
  }

  .login-page:not(.registration-page) .brand-copy p{
    margin-top:8px;
  }

  .login-page:not(.registration-page) .brand-points{
    gap:8px;
  }

  .login-card{
    padding:20px;
  }

  .login-top{
    margin-bottom:12px;
  }

  .login-top img{
    width:56px;
  }

  .login-card h2{
    margin-bottom:4px;
  }

  .login-card p{
    margin-bottom:12px;
  }

  .login-options{
    margin-bottom:12px;
  }

  .login-card small{
    margin-top:10px;
  }
}

/* Global Business registration */
.registration-page{grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);overflow:auto}.registration-card{width:min(920px,calc(100% - 32px));max-width:none;margin:32px auto}.registration-step{margin:22px 0;padding:20px;border:1px solid rgba(30,158,99,.38);border-radius:16px;background:var(--surface-elevated)}.registration-step[hidden],.registration-success[hidden]{display:none!important}.step-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.step-heading>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--brand-green);color:#000;font-weight:900}.step-heading h3{margin:2px 0 3px;color:var(--text-primary)}.step-heading p{margin:0;color:var(--text-muted)}.account-choice-grid,.profile-choice-grid,.module-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.module-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.registration-choice,.module-choice{position:relative;display:block!important;min-width:0;margin:0!important}.registration-choice input,.module-choice input{position:absolute;opacity:0;pointer-events:none}.registration-choice>span,.module-choice>span{display:flex;align-items:center;gap:9px;min-height:54px;padding:12px;border:1px solid var(--border-default);border-radius:12px;background:var(--surface-card);color:var(--text-primary);cursor:pointer;overflow-wrap:anywhere}.account-choice-grid .registration-choice>span{align-items:flex-start;min-height:96px;flex-direction:column}.registration-choice i{color:var(--sidebar-accent);font-size:20px}.registration-choice small{margin:0;text-align:left}.registration-choice input:focus-visible+span,.module-choice input:focus-visible+span{outline:3px solid var(--sidebar-accent);outline-offset:2px}.registration-choice input:checked+span,.registration-choice.selected>span,.module-choice input:checked+span{border-color:var(--brand-green);box-shadow:inset 0 0 0 1px var(--brand-green);background:rgba(30,158,99,.12)}.module-choice input:checked+span::before{content:"✓";color:var(--sidebar-accent);font-weight:900}.registration-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.registration-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand-green);border-radius:999px;padding:7px 11px;background:var(--surface-card);color:var(--sidebar-accent)}.register-span-2{grid-column:1/-1}.registration-summary dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.registration-summary dl div{min-width:0;padding:11px;border-radius:10px;background:var(--surface-card)}.registration-summary dt{color:var(--text-muted);font-size:12px;text-transform:uppercase}.registration-summary dd{margin:4px 0 0;color:var(--text-primary);overflow-wrap:anywhere}.registration-message{min-height:24px;color:var(--sidebar-accent)}.registration-message.error{color:var(--tone-error)}.registration-success{text-align:center}.success-icon{font-size:54px;color:var(--sidebar-accent)}.identity-code{display:block;margin:8px auto 20px;color:var(--text-primary);overflow-wrap:anywhere}.identity-code.gbid{font-size:25px;letter-spacing:2px;color:var(--sidebar-accent)}.registration-qr{display:grid;place-items:center;width:196px;min-height:196px;margin:15px auto;padding:8px;border-radius:12px;background:#fff;color:#000;overflow-wrap:anywhere}.registration-qr svg{max-width:100%;height:auto}.connection-link{display:block;margin:10px 0 22px;color:var(--sidebar-accent);overflow-wrap:anywhere}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1050px){.registration-page{grid-template-columns:1fr}.registration-page .brand-panel{padding:30px 24px}.registration-card{margin:10px auto 34px}.profile-choice-grid,.module-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.registration-card{width:calc(100% - 20px);padding:18px}.registration-step{padding:14px}.account-choice-grid,.profile-choice-grid,.module-choice-grid,.registration-summary dl{grid-template-columns:minmax(0,1fr)}.register-span-2{grid-column:auto}.step-heading h3{font-size:18px}}
.registration-optional-fields{margin-top:1rem}.registration-privacy-options{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.registration-privacy-options label{display:flex;align-items:center;gap:.55rem;padding:.65rem .8rem;border:1px solid rgba(30,158,99,.28);border-radius:10px}.registration-field-error{display:block;color:var(--tone-error);margin-top:.35rem;font-size:.78rem}.registration-page [aria-invalid=true]{border-color:#ff6b6b!important;box-shadow:0 0 0 2px rgba(255,107,107,.14)}[dir=rtl] .registration-page{text-align:right}[dir=rtl] .step-heading,[dir=rtl] .registration-privacy-options label,[dir=rtl] .registration-choice>span{direction:rtl}[dir=rtl] .registration-chip span{margin-right:.35rem;margin-left:0}
.business-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.business-type-grid .registration-choice>span{min-height:54px}.register-plan-card{margin-top:16px}.register-plan-card[hidden]{display:none!important}.register-plan-intro{margin:0 0 8px;font-weight:800;color:var(--text-primary)}.register-plan-more{margin:10px 0 0}.register-plan-more a,.register-terms-consent a{color:var(--sidebar-accent)}.register-terms-consent{display:grid!important;gap:10px;margin:18px 0 6px;padding:12px 14px;border:1px solid rgba(30,158,99,.38);border-radius:12px;background:var(--surface-elevated);color:var(--text-primary);line-height:1.45}
@media(max-width:650px){.business-type-grid{grid-template-columns:minmax(0,1fr)}}

/* V1 Task 3b (decision 2026-10-18 section 11): new-device proof and the
   staff quick PIN (js/sign-in-protection.js). */
.login-proof-panel{
  margin:16px 0 0;
  padding:14px;
  border:1px solid var(--border-default);
  border-radius:12px;
  background:var(--surface-card);
  color:var(--text-primary);
  text-align:left;
}
.login-proof-panel[hidden]{display:none}
.login-proof-panel h2{margin:0 0 8px;font-size:17px}
.login-proof-panel label{display:block;margin:10px 0 6px;font-weight:700}
.login-proof-message,
.login-proof-note{margin:0 0 10px;color:var(--text-secondary);line-height:1.4;overflow-wrap:anywhere}
.login-proof-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.login-proof-panel button{
  min-height:44px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--border-default);
  background:var(--surface-card);
  color:var(--text-primary);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.login-proof-panel .login-proof-confirm,
.login-proof-panel .login-proof-passkey,
.login-proof-panel .quick-pin-go{
  background:var(--action-primary);
  border-color:var(--action-primary);
  color:var(--action-primary-text);
}
.login-proof-panel .login-proof-passkey{width:100%;margin-bottom:8px}
.login-proof-backup{margin:6px 0 10px}
.login-proof-backup summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--sidebar-accent);font-weight:700}
.quick-pin-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.quick-pin-names[hidden],
.quick-pin-entry[hidden]{display:none}
.quick-pin-name{width:100%;overflow-wrap:anywhere}
.quick-pin-name:disabled{opacity:.6;cursor:not-allowed}

/* Owner request 105c: "This wasn't me" (pages/not-me.html) */
.not-me-steps{margin:8px 0 16px;padding-left:20px;line-height:1.5;color:var(--text-secondary,#4b5563);}
.not-me-steps li{margin:4px 0;}
#notMeResult{margin:12px 0 0;line-height:1.5;}
#notMeResult[data-tone="ok"]{color:var(--success,#15803d);font-weight:600;}
#notMeResult[data-tone="error"]{color:var(--danger,#b91c1c);}
.not-me-link{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:600;color:var(--primary,#1E9E63);}