/* WeChat QR login (direct and app-initiated). Uses shared tokens from style.css only. */
.login-wrap{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--bg);color:var(--ink)}

/* ---- brand column ---- */
.brandcol{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  background:var(--navy-deep);color:var(--on-navy);
  padding:max(36px,env(safe-area-inset-top)) 44px max(40px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left));
}
.brand-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.brandcol::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(11 26 51 / .45) 0%,transparent 28%,transparent 48%,rgb(11 26 51 / .92) 100%);
}
.brand-top,.brand-mid{position:relative;z-index:1}
.brand-top a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.brand-mid{max-width:420px}
.brand-title{font-size:var(--fs-30);font-weight:600;line-height:1.3;margin:0;color:var(--on-navy)}
.brand-description{font-size:var(--fs-15);line-height:1.7;color:var(--on-navy-2);margin:10px 0 0}

/* ---- auth card ---- */
.auth-stage{display:flex;align-items:center;justify-content:center;min-width:0;padding:40px clamp(20px,4vw,64px) max(40px,env(safe-area-inset-bottom))}
.authcol{
  width:100%;max-width:420px;margin:0 auto;padding:32px;display:flex;flex-direction:column;gap:16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-4);box-shadow:var(--sh-2);
}
.auth-heading{text-align:center}
.auth-heading h1{font-size:var(--fs-24);font-weight:600;line-height:1.35;color:var(--ink)}
.auth-heading p{margin:6px 0 0;color:var(--ink-2);font-size:var(--fs-14)}
.qr-heading{font-size:var(--fs-15);font-weight:600;text-align:center;color:var(--ink)}

/* ---- QR ---- */
.qrwrap{align-self:center;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.qrbox{
  width:216px;height:216px;position:relative;padding:12px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-3);
  transition:filter var(--dur-2) var(--ease);
}
.qrbox canvas,.qrbox img{width:100%;height:100%;display:block;border-radius:var(--r-1)}
#qrimg:not([src]){display:none}
.qrmask{
  position:absolute;inset:0;border-radius:var(--r-3);display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  color:#16233A;
}
.qrbox.qr-loading canvas,.qrbox.qr-loading img{opacity:.28;filter:grayscale(.35)}
.qrbox.qr-loading .qrmask.m-loading{display:flex;background:rgb(255 255 255 / .7)}
.qrbox.qr-loading .qrmask.m-loading .spinner{border-color:#E3E4E6;border-top-color:#2350C8}
.qrbox.qr-pending .qrmask{display:none}
.qrbox.qr-scanned .qrmask.m-scan{display:flex;background:rgb(22 35 58 / .06)}
.qrbox.qr-confirmed .qrmask.m-ok{display:flex;background:rgb(255 255 255 / .94)}
.qrbox.qr-expired canvas,.qrbox.qr-expired img,.qrbox.qr-consumed canvas,.qrbox.qr-consumed img,.qrbox.qr-canceled canvas,.qrbox.qr-canceled img{filter:blur(5px)}
.qrbox.qr-expired .qrmask.m-exp,.qrbox.qr-consumed .qrmask.m-exp,.qrbox.qr-canceled .qrmask.m-exp{display:flex;background:rgb(255 255 255 / .92)}
.qrbox.qr-error .qrmask.m-err{display:flex;background:rgb(255 255 255 / .9)}
.qrmask .circ{
  width:56px;height:56px;border-radius:50%;background:#fff;color:#5B6578;
  box-shadow:0 0 0 1px #E3E4E6,0 8px 24px rgb(22 35 58 / .1);display:flex;align-items:center;justify-content:center;
}
.qrmask .circ-scan{color:#087C45}
.qrmask .circ-ok{background:#07C160;color:#fff;box-shadow:none}
.qrmask .circ-err{color:#C0393F}
.qrmask .pill{font-size:var(--fs-14);color:#16233A;background:#fff;border-radius:var(--r-pill);padding:2px 12px;box-shadow:0 0 0 1px #E3E4E6}
.qrmask .text{font-size:var(--fs-14);font-weight:500;color:#16233A}
.qrmask .text-danger{color:#C0393F}
.qrhint{font-size:var(--fs-14);line-height:22px;color:var(--ink-2);text-align:center;max-width:320px;margin:0;min-height:22px}
.qrhint b{color:var(--wechat-text);font-weight:600}
.qrhint.err b{color:var(--danger)}
.qrhint.warn b{color:var(--warn)}
.qrhint-sm{font-size:var(--fs-12);color:var(--ink-3)}
.qr-actions{min-height:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.qr-actions [hidden]{display:none !important}
.qr-countdown{font-size:var(--fs-12);color:var(--ink-3)}
.qr-help{
  margin:0;width:100%;max-width:340px;padding:10px 14px;border-radius:var(--r-2);
  background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-12);line-height:1.7;text-align:center;
}
.qr-noscript{max-width:300px;color:var(--danger);font-size:var(--fs-14);text-align:center;margin:0}

.agreement-hint{margin:0;text-align:center;font-size:var(--fs-12);line-height:1.7;color:var(--ink-3)}
.agreement-hint a{color:var(--ink-2)}
.agreement-hint a:hover{color:var(--brand)}
.auth-footer{padding-top:16px;border-top:1px solid var(--border)}

/* ---- announcement ---- */
.announcement-bar{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-2);line-height:1.5;
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent);
}
.announcement-icon{flex:none;display:inline-flex;color:var(--warn);padding-top:1px}
.announcement-copy{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--fs-14)}
.announcement-title{color:var(--ink);font-weight:600}
.announcement-content{color:var(--ink-2)}

/* legacy password panes (hidden on the public page, kept for login.js compatibility) */
form.pane{display:flex;flex-direction:column;gap:14px}
form.pane > .btn{width:100%;margin-top:4px}
.authcol .formfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:var(--fs-14)}

/* ---- app-initiated compact layout ---- */
.login-wrap.login-compact{
  display:flex;align-items:center;justify-content:center;
  padding:max(32px,env(safe-area-inset-top)) var(--gutter-r) max(32px,env(safe-area-inset-bottom)) var(--gutter);
}
.login-compact .compact-card{max-width:440px;gap:16px}
.login-compact .compact-head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.login-compact .compact-head .wordmark{font-size:var(--fs-15);color:var(--ink-2)}
.login-compact .compact-head .wordmark .mk{width:22px;height:22px;border-radius:6px}
.compact-client-icon{width:56px;height:56px;border-radius:var(--r-3);object-fit:cover;margin:8px auto 0;box-shadow:0 0 0 1px var(--border)}
.login-compact .compact-title{font-size:var(--fs-24);font-weight:600;line-height:1.35;color:var(--ink);margin:4px 0 0;overflow-wrap:anywhere}
.login-compact .compact-title b{font-weight:600;color:var(--brand)}
.login-compact .compact-sub{margin:0;font-size:var(--fs-14);color:var(--ink-2);overflow-wrap:anywhere}
.login-compact .compact-sub b{font-weight:500;color:var(--ink)}
.login-compact .qr-heading{padding-top:16px;border-top:1px solid var(--border)}

@media (max-width:959px){
  .login-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
  .brandcol{padding-left:max(28px,env(safe-area-inset-left));padding-right:28px}
  .brand-title{font-size:var(--fs-24)}
}
@media (max-width:720px){
  .login-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .brandcol{
    gap:0;min-height:0;justify-content:center;
    padding:max(12px,env(safe-area-inset-top)) var(--gutter-r) 12px var(--gutter);
  }
  .brand-art{object-position:center 38%;opacity:.55}
  .brandcol::after{background:rgb(11 26 51 / .4)}
  .brandcol .brand-mid{display:none}
  .auth-stage{padding:20px var(--gutter-r) max(24px,env(safe-area-inset-bottom)) var(--gutter);align-items:flex-start}
  .authcol{padding:24px 20px;border-radius:var(--r-3)}
  .auth-heading h1,.login-compact .compact-title{font-size:var(--fs-20)}
  .qrbox{width:200px;height:200px;padding:10px}
  .auth-footer{padding-top:4px}
}