/* 登录页：整页白。左边浅灰舞台放产品图，右边字标＋一个邮箱框＋一个蓝胶囊（v7.2 主按钮苹果蓝）。 */
#pg-login .lgn { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--bg); }

/* ---------- 左：舞台 ---------- */
#pg-login .lg-stage { padding: 16px 0 16px 16px; }
#pg-login .lg-stage-in { position: sticky; top: 16px; height: calc(100vh - 32px); min-height: 600px; display: flex; flex-direction: column;
  background: var(--stage); border-radius: var(--r-stage); padding: 40px 48px 36px; overflow: hidden; }
#pg-login .lg-k { position: relative; z-index: 5; }

/* 工具柜：四个窗口错落叠放（询盘分级、广交会名片、样品跟进、报价单），角上各一个前后数字。
   窗口画在一块 700×460 的画布上，login.js 按舞台大小整体缩放，哪个屏幕上构图都一样。 */
#pg-login .lg-scene { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 8px; }
#pg-login .lg-canvas { position: absolute; left: 50%; top: 50%; width: 700px; height: 460px; transform: translate(-50%, -50%); transform-origin: 50% 50%; perspective: 2000px; }
#pg-login .lg-win { position: absolute; }
#pg-login .lg-win .device { box-shadow: var(--shadow-product); }
#pg-login .lg-win .device-title { color: var(--device-ink); font-weight: 500; }
/* 英文工具名长（Canton Fair cards, filed same night），一行会钻到右上角数字签底下：标题栏右边按数字签宽度（login.js 量的 --num-w）留出位置，
   标题最多折两行（44px 高的标题栏放得下）。中文名短，一行就放下，不挂这条 */
html[lang="en"] #pg-login .lg-win .device-bar { padding-right: calc(var(--num-w, 140px) + 28px); }
html[lang="en"] #pg-login .lg-win .device-title { white-space: normal; line-height: 1.25; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#pg-login .lg-win .device-body { padding: 8px 18px 10px; }
#pg-login .lg-win .d-row { min-height: 34px; padding: 4px 0; }
#pg-login .lg-win .d-table td, #pg-login .lg-win .d-table th { padding: 6px 8px; }
#pg-login .lg-win .d-table tr:nth-child(n+4), #pg-login .lg-win .d-row:nth-child(n+4) { display: none; }   /* 每张露三行 */
#pg-login .lg-win.w1 .d-table :is(th, td):nth-child(4) { display: none; }   /* 询盘：去掉「问了什么」长句 */
#pg-login .lg-win.w2 .d-table :is(th, td):nth-child(4) { display: none; }   /* 名片：去掉「要什么」 */
#pg-login .lg-win.w3 .d-soft { display: none; }
#pg-login .lg-win.w1 { z-index: 2; left: 0; top: 34px; width: 372px; }
#pg-login .lg-win.w2 { z-index: 1; left: 344px; top: 0; width: 356px; }
#pg-login .lg-win.w3 { z-index: 3; left: 18px; top: 266px; width: 330px; }
#pg-login .lg-win.w4 { z-index: 4; left: 336px; top: 226px; width: 364px; }
#pg-login .lg-win.w1 .device { transform: rotateY(8deg) rotateX(2deg); transform-origin: 0 50%; }
#pg-login .lg-win.w2 .device { transform: rotateY(-7deg) rotateX(2deg); transform-origin: 100% 50%; }
#pg-login .lg-win.w3 .device { transform: rotateY(6deg) rotateX(2deg); transform-origin: 0 50%; }
#pg-login .lg-win.w4 .device { transform: rotateY(-6deg) rotateX(2deg); transform-origin: 100% 50%; }

/* 角上的前后数字：一个白色小签，压在窗口一角 */
#pg-login .lg-num { position: absolute; z-index: 2; top: -19px; right: 16px; display: inline-flex; align-items: baseline; gap: 4px; height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); background: var(--device-bg); box-shadow: var(--shadow-product), 0 0 0 1px var(--device-line); white-space: nowrap; line-height: 40px; font-variant-numeric: tabular-nums; }
#pg-login .lg-num s { font-size: var(--t15); font-weight: 300; color: var(--ink-2); text-decoration-thickness: 1px; }
#pg-login .lg-num svg { align-self: center; color: var(--ink-2); }
#pg-login .lg-num b { font-size: var(--t21); font-weight: 700; color: var(--ink); }
#pg-login .lg-num em { font-style: normal; font-size: var(--t14); color: var(--ink-2); }

#pg-login .lg-say { position: relative; z-index: 5; margin-top: 24px; }
#pg-login .lg-say-h { font-size: var(--t40); line-height: 1.2; font-weight: 500; color: var(--ink); }   /* 40 号标题跟 .h2 一样 500 */
#pg-login .lg-say-p { margin-top: 12px; font-size: var(--t17); color: var(--ink-2); }

/* ---------- 右：字标和表单 ---------- */
#pg-login .lg-side { display: flex; flex-direction: column; padding: 16px 56px 24px; min-width: 0; }
#pg-login .lg-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
#pg-login .lg-lang { height: 36px; }   /* 和外观三档（3px 内边距＋30px 按钮）一样高 */
#pg-login .lg-theme button { height: 30px; padding: 0 10px; color: var(--ink-2); }
#pg-login .lg-box { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 400px; margin: 0 auto; padding: 24px 0 8px; }
#pg-login .lg-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
#pg-login .lg-mark .wm { display: inline-block; font-size: var(--t56); line-height: 1; }
/* ² 贴着 I 的右上角：主字号 0.42 倍，基线抬 0.9em（按 ² 自己的字号算），往左收 0.04em */
#pg-login .lg-mark .wm-sq { display: inline; font-size: .42em; line-height: 1; vertical-align: .9em; margin: 0 .1em 0 -.04em; }
#pg-login .lg-sub { font-size: var(--t21); line-height: 1.4; color: var(--ink); }
#pg-login .lg-inv { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t14); color: var(--ink-2); }
#pg-login .lg-inv i { width: 20px; height: 1px; background: var(--ink-2); opacity: .6; }

#pg-login .lg-form { margin-top: 40px; display: flex; flex-direction: column; }
#pg-login .lg-h { font-size: var(--t28); line-height: 1.3; font-weight: 700; }
#pg-login .lg-lead { margin-top: 4px; font-size: var(--t15); color: var(--ink-2); }
#pg-login .lg-form .field.mt3 { margin-top: 24px; }
#pg-login .lg-err { margin-top: 10px; }
#pg-login .lg-go { width: 100%; margin-top: 16px; }
#pg-login .lg-note { margin-top: 12px; }

#pg-login .lg-sent { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-card); background: var(--bg-2); font-size: var(--t15); line-height: 1.6; color: var(--ink); }
#pg-login .lg-sent-i { flex: none; margin-top: 2px; color: var(--ink-2); }
#pg-login .lg-to { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: var(--t15); color: var(--ink-2); min-width: 0; }
#pg-login .lg-to > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#pg-login .lg-to .lnk, #pg-login .lg-resend .lnk, #pg-login .lg-foot .lnk { font-size: var(--t15); flex: none; }
#pg-login .lg-code { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
#pg-login .lg-code legend { padding: 0; margin-bottom: 10px; font-size: var(--t15); font-weight: 500; color: var(--ink); }
#pg-login .lg-cells { display: flex; align-items: center; gap: 8px; }
#pg-login .lg-cell { width: 0; flex: 1 1 0; min-width: 0; height: 64px; padding: 0; text-align: center; border-radius: var(--r-sm); border: 1px solid var(--line-firm); background: var(--bg);
  color: var(--ink); font-size: var(--t28); font-weight: 500; font-variant-numeric: tabular-nums; caret-color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
#pg-login .lg-cell:hover { border-color: var(--ink-3); }
#pg-login .lg-cell:focus { border-color: var(--accent); box-shadow: var(--focus); }
#pg-login .lg-cell.filled { border-color: var(--ink-2); }
#pg-login .lg-cell.err { border-color: var(--err); }
#pg-login .lg-cell:disabled { opacity: .4; cursor: not-allowed; }
#pg-login .lg-dash { flex: none; width: 8px; height: 2px; border-radius: 1px; background: var(--line); }
#pg-login .lg-code .form-note { margin-top: 10px; }
#pg-login .lg-resend { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; min-height: 24px; }
#pg-login .lg-resend .form-note { font-variant-numeric: tabular-nums; }

#pg-login .lg-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: var(--t14); line-height: 1.6; color: var(--ink-2); }
#pg-login .lg-foot-2 { margin-top: 4px; }
#pg-login .lg-foot-3 { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
#pg-login .lg-foot-3 .lnk { font-size: var(--t14); }
#pg-login .lg-fake { color: var(--ink-2); }
/* v7.2 英文：28 号以上标题收一点字距，正文行距 1.5（中文照旧）。左边舞台的大字是 40 号，字重照旧 700 */
html[lang="en"] #pg-login :is(.lg-say-h, .lg-h) { letter-spacing: -0.015em; }
html[lang="en"] #pg-login :is(.lg-sent, .lg-foot) { line-height: 1.5; }

/* 三条规矩弹层（登录前也能看） */
body[data-page="login"] .lg-rules .lg-rl { margin-top: 24px; display: flex; flex-direction: column; }
body[data-page="login"] .lg-rules .lg-rl li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--line-2); }
body[data-page="login"] .lg-rules .lg-rn { font-size: var(--t28); line-height: 1.2; font-weight: 300; color: var(--ink-2); }
body[data-page="login"] .lg-rules .lg-rt { font-size: var(--t17); font-weight: 500; color: var(--ink); }
body[data-page="login"] .lg-rules .lg-rp { margin-top: 4px; font-size: var(--t15); color: var(--ink-2); }

/* ---------- 屏幕矮的时候收一收 ---------- */
@media (max-height: 760px) and (min-width: 1100px) {
  #pg-login .lg-stage-in { padding: 32px 40px 28px; }
  #pg-login .lg-mark { gap: 8px; }
  #pg-login .lg-mark .wm { font-size: var(--t40); }
  #pg-login .lg-form { margin-top: 28px; }
  #pg-login .lg-form .field.mt3 { margin-top: 16px; }
  #pg-login .lg-foot { margin-top: 24px; padding-top: 16px; }
  #pg-login .lg-say-h { font-size: var(--t40); }
  #pg-login .lg-box { padding-top: 8px; }
  #pg-login #lg-f2 { margin-top: 24px; }
  #pg-login .lg-sent { padding: 12px 16px; font-size: var(--t14); }
  #pg-login .lg-to { margin-top: 12px; }
  #pg-login .lg-code { margin-top: 16px; }
  #pg-login .lg-code legend { margin-bottom: 8px; }
  #pg-login .lg-cell { height: 56px; }
  #pg-login .lg-code .form-note { margin-top: 8px; }
  #pg-login .lg-resend { margin-top: 12px; }
  #pg-login .lg-box:has(#lg-f2:not([hidden])) .lg-foot-2 { display: none; }
}

/* ---------- 窄屏：先表单，舞台放下面 ---------- */
@media (max-width: 1099px) {
  #pg-login .lgn { grid-template-columns: minmax(0, 1fr); }
  #pg-login .lg-side { order: 1; padding: 16px 32px 40px; }
  #pg-login .lg-stage { order: 2; padding: 0 16px 16px; }
  #pg-login .lg-stage-in { position: relative; top: 0; height: 660px; min-height: 0; }
}
@media (max-width: 759px) {
  #pg-login .lg-side { padding: 12px 16px 32px; }
  #pg-login .lg-box { padding-top: 16px; }
  #pg-login .lg-mark .wm { font-size: var(--t40); }
  #pg-login .lg-stage-in { height: 420px; padding: 24px 20px; border-radius: var(--r-img); }
  #pg-login .lg-win .device { transform: none !important; }
  #pg-login .lg-say-h { font-size: var(--t28); }
  #pg-login .lg-cell { height: 56px; font-size: var(--t21); }
}