*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
        margin: 0;
        padding: 0;
        min-height: 100%;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      }

      body {
        overflow: hidden;
        filter: brightness(var(--brightness, 1));
      }

    /* ── Auth Page Styles ── */

    .auth-page {
      --auth-bg-deep: var(--bg-deep);
      --auth-bg-mid: var(--bg);
      --auth-bg-soft: var(--panel-soft);
      --auth-panel-bg-a: var(--panel);
      --auth-panel-bg-b: var(--lane-bg);
      --auth-border: var(--line);
      --auth-text: var(--text);
      --auth-muted: var(--muted);
      --auth-primary: var(--primary);
      --auth-primary-soft: var(--primary-soft);
      --auth-secondary: var(--accent-2);
      --auth-highlight: var(--accent-3);
      --auth-input-bg: var(--input-bg);
      --auth-chip-bg: var(--tag-blue-bg);
      --auth-chip-text: var(--tag-blue-text);
      --auth-switch-bg: var(--topbar-bg);
      --auth-switch-border: var(--topbar-border);
      position: relative;
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0, 1.28fr) minmax(420px, 500px);
      overflow: hidden;
      background:
        radial-gradient(circle at 16% 16%, var(--auth-primary-soft), transparent 20%),
        radial-gradient(circle at 76% 24%, rgba(34,211,238,.12), transparent 18%),
        linear-gradient(135deg, var(--auth-bg-deep) 0%, var(--auth-bg-mid) 38%, var(--auth-bg-soft) 100%);
      isolation: isolate;
    }

    .auth-page::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(rgba(125, 211, 252, .14) 1px, transparent 1px),
        linear-gradient(rgba(59,130,246,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.06) 1px, transparent 1px);
      background-size: 16px 16px, 36px 36px, 36px 36px;
      background-position: 0 0, 0 0, 0 0;
      opacity: .42;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.32));
      pointer-events: none;
      z-index: 0;
    }

    .auth-page::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 88%, rgba(56,189,248,.14), transparent 22%),
        radial-gradient(circle at 48% 64%, rgba(96,165,250,.10), transparent 26%),
        linear-gradient(180deg, rgba(2,8,20,0) 0%, rgba(2,8,20,.10) 44%, rgba(2,8,20,.46) 100%);
      pointer-events: none;
      z-index: 0;
    }

    .auth-theme-switch {
      position: absolute;
      top: 26px;
      right: 30px;
      z-index: 6;
      display: inline-flex;
      align-items: center;
      gap: 11.5px;
      padding: 11.5px 16px;
      border-radius: 21px;
      background: var(--auth-switch-bg);
      border: 1px solid var(--auth-switch-border);
      box-shadow: 0 16px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter: blur(14px);
    }

    .auth-theme-switch label {
      color: var(--auth-text);
      font-size: 15px;
      letter-spacing: .08em;
      white-space: nowrap;
    }

    .auth-theme-dropdown {
      position: relative;
    }

    .auth-theme-trigger {
      appearance: none;
      min-width: 147px;
      border: 1px solid var(--auth-border);
      border-radius: 14px;
      background: var(--auth-input-bg);
      color: var(--auth-text);
      padding: 10px 37px 10px 14px;
      font-size: 16px;
      text-align: center;
      outline: none;
      cursor: pointer;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
    }

    .auth-theme-caret {
      position: absolute;
      right: 17px;
      top: 50%;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid rgba(180, 233, 255, .92);
      pointer-events: none;
    }

    .auth-theme-trigger:focus {
      border-color: var(--auth-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-primary) 18%, transparent);
    }

    .auth-theme-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 50;
      width: 100%;
      max-height: 320px;
      overflow-y: auto;
      padding: 6px;
      border-radius: 14px;
      border: 1px solid var(--auth-border);
      background: var(--auth-input-bg);
      box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
      /* 隐藏滚动条（保留滚动功能） */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .auth-theme-menu::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .auth-theme-menu.open {
      display: block;
    }

    .auth-theme-menu button {
      display: block;
      width: 100%;
      text-align: center;
      padding: 8px 12px;
      border: none;
      background: transparent;
      color: var(--auth-text);
      font-size: 14px;
      border-radius: 9px;
      cursor: pointer;
      white-space: nowrap;
      font-family: inherit;
    }

    .auth-theme-menu button:hover,
    .auth-theme-menu button.active {
      background: var(--auth-primary-soft);
      color: var(--auth-primary);
    }

    .auth-visual,
    .auth-panel-wrap {
      position: relative;
      z-index: 1;
    }

    .auth-visual {
      padding: 56px 40px 34px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .auth-brand-row {
      display: flex;
      align-items: center;
      gap: 26px;
      transform: translateY(-5px);
    }

    .auth-brand-mark {
      width: 120px;
      height: 120px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .auth-brand-mark svg { width: 120px; height: 120px; }

    .auth-brand-copy h1 {
      margin: 0;
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.16;
      color: var(--auth-text);
      letter-spacing: .02em;
    }
    .auth-brand-copy h1 .brand-title{font-size:clamp(33px,3.5vw,43px);}
    .auth-brand-copy h1 .brand-subtitle{font-size:clamp(25px,2.5vw,33px);}

    .auth-brand-copy p {
      margin: 8px 0 0;
      color: var(--auth-muted);
      font-size: 12px;
      letter-spacing: .08em;
    }

    /* 占位：替代已删除的 KPI 行 + eyebrow，保持左侧 flex 布局高度与删除前一致 */
    .auth-visual-spacer {
      flex: 0 0 auto;
      height: 72px;
      min-height: 72px;
    }

    /* 替代已删除的 eyebrow，保持 headline 内部高度与删除前一致 */
    .auth-headline-eyebrow-spacer {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 31px;
      margin-top: 4px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: transparent;
      color: transparent;
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      visibility: hidden;
    }

    .auth-headline {
      max-width: 640px;
      margin: 26px 0 0 20px;
      transform: translateY(-70px);
    }

    .auth-headline h2 {
      margin: 16px 0 0;
      font-size: clamp(34px, 4vw, 58px);
      line-height: 1.1;
      color: var(--auth-text);
      text-shadow: 0 14px 34px rgba(63, 134, 255, .20);
    }

    .auth-headline .thin {
      display: block;
      margin-top: 12px;
      color: var(--auth-primary);
      font-size: .48em;
      line-height: 1.45;
      font-weight: 600;
    }

    .auth-headline p {
      margin: 18px 0 0;
      max-width: 560px;
      color: var(--auth-muted);
      line-height: 1.85;
      font-size: 15px;
    }

    .auth-scene {
      position: relative;
      margin-top: 2px;
      min-height: 72vh;
      overflow: visible;
      isolation: isolate;
    }

    .auth-scene::before {
      content: "";
      position: absolute;
      inset: -18% -16% -16% -18%;
      background:
        radial-gradient(circle at 52% 62%, rgba(101,178,255,.32), transparent 38%),
        radial-gradient(ellipse at 50% 86%, rgba(37,99,235,.26), transparent 52%),
        radial-gradient(circle at 42% 42%, rgba(125,211,252,.18), transparent 18%);
      filter: blur(52px);
      z-index: 0;
      pointer-events: none;
    }

    .auth-building {
      position: absolute;
      left: 50%;
      bottom: 150px;
      width: 120%;
      height: auto;
      transform: translateX(-50%) scale(0.95);
      transform-origin: center bottom;
      opacity: .96;
      pointer-events: none;
      filter: drop-shadow(0 30px 82px rgba(49,130,246,.24));
      z-index: 1;
    }

    .auth-building .wire-main {
      stroke: url(#authLineA);
      stroke-linecap: round;
      fill: none;
      filter: url(#authGlow);
    }

    .auth-building .wire-main.heavy { stroke-width: 4.6; }
    .auth-building .wire-main.mid { stroke-width: 2.9; opacity: .98; }
    .auth-building .wire-main.light { stroke-width: 2; opacity: .88; }
    .auth-building .wire-rib {
      stroke: rgba(154, 223, 255, .68);
      stroke-width: 1.4;
      opacity: .92;
      fill: none;
    }
    .auth-building .wire-mesh {
      stroke: rgba(154, 223, 255, .30);
      stroke-width: 1;
      opacity: .78;
      fill: none;
    }
    .auth-building .wire-guide {
      stroke: rgba(180, 233, 255, .20);
      stroke-width: 1;
      fill: none;
      stroke-dasharray: 5 8;
      animation: dashFlow 11s linear infinite;
    }
    .auth-building .wire-pulse {
      stroke: url(#authLineB);
      stroke-width: 2;
      fill: none;
      stroke-dasharray: 12 18;
      animation: pulseLine 8.6s linear infinite;
    }
    .auth-building .wire-ground {
      stroke: rgba(167, 225, 255, .18);
      fill: none;
    }

    .auth-floor-line {
      position: absolute;
      left: -20%;
      right: -18%;
      bottom: -8%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(171,230,255,.72), transparent);
      box-shadow: 0 0 40px rgba(93, 187, 255, .34);
      z-index: 2;
    }

    .auth-geo {
      position: absolute;
      width: 72px;
      height: 72px;
      border: 1px solid rgba(136, 212, 255, .38);
      background:
        linear-gradient(135deg, rgba(30, 117, 255, .10), rgba(38, 215, 255, .05)),
        radial-gradient(circle at 50% 50%, rgba(118, 204, 255, .18), transparent 58%);
      box-shadow: 0 0 24px rgba(64, 169, 255, .18), inset 0 0 18px rgba(122, 214, 255, .08);
      backdrop-filter: blur(8px);
      pointer-events: none;
      opacity: .86;
      animation: geoFloat 11s ease-in-out infinite;
      z-index: 3;
    }

    .auth-geo::before,
    .auth-geo::after {
      content: "";
      position: absolute;
      inset: 13px;
      border: 1px solid rgba(190, 234, 255, .28);
      transform: rotate(45deg);
    }

    .auth-geo::after {
      inset: 28px;
      border-radius: 50%;
      background: rgba(126, 213, 255, .55);
      box-shadow: 0 0 18px rgba(126, 213, 255, .75);
    }

    .auth-geo.geo-a {
      top: 10%;
      left: 7%;
      border-radius: 18px;
      transform: rotate(12deg);
    }

    .auth-geo.geo-b {
      top: 15%;
      right: 7%;
      width: 92px;
      height: 92px;
      clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%);
      animation-delay: -3.2s;
    }

    .auth-geo.geo-c {
      bottom: 12%;
      right: 20%;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      animation-delay: -6.1s;
    }

    .auth-geo.geo-d {
      bottom: 25%;
      left: 26%;
      width: 42px;
      height: 42px;
      transform: rotate(45deg);
      animation-delay: -8.2s;
    }

    .auth-orbit-ring {
      position: absolute;
      left: 42%;
      top: 30%;
      width: 270px;
      height: 90px;
      border: 1px solid rgba(112, 197, 255, .22);
      border-radius: 50%;
      transform: rotate(-12deg);
      box-shadow: 0 0 30px rgba(77, 166, 255, .10);
      animation: orbitBreath 7s ease-in-out infinite;
      pointer-events: none;
    }

    .auth-orbit-ring.ring-b {
      left: 54%;
      top: 36%;
      width: 210px;
      height: 68px;
      transform: rotate(18deg);
      opacity: .56;
      animation-delay: -2.8s;
    }

    .auth-geo-line {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(136, 212, 255, .76), transparent);
      opacity: .75;
      pointer-events: none;
      animation: geoLineShift 7.4s ease-in-out infinite;
      z-index: 2;
    }

    .auth-geo-line.line-a { width: 180px; top: 22%; left: 8%; transform: rotate(-12deg); }
    .auth-geo-line.line-b { width: 220px; top: 18%; right: 12%; transform: rotate(18deg); animation-delay: -2.2s; }
    .auth-geo-line.line-c { width: 140px; bottom: 26%; left: 32%; transform: rotate(8deg); animation-delay: -4s; }

    .auth-node {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(232, 247, 255, .96);
      box-shadow: 0 0 0 8px rgba(123,211,255,.10), 0 0 18px rgba(123,211,255,.50);
      animation: nodePulse 3.2s ease-in-out infinite;
      z-index: 3;
      pointer-events: none;
    }

    .auth-node.node-a { top: 76%; left: 30%; }
    .auth-node.node-b { top: 72%; right: 16%; animation-delay: -.9s; }
    .auth-node.node-c { top: 84%; left: 18%; animation-delay: -1.8s; }

    .auth-panel-wrap {
      position: absolute;
      z-index: 5;
      right: clamp(72px, 6.2vw, 118px);
      top: 50%;
      width: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transform: translateY(calc(-50% - 60px)) translateX(-30px);
    }

    .auth-panel {
      position: relative;
      width: 500px;
      min-height: 440px;
      max-height: calc(100vh - 150px);
      border-radius: 28px;
      border: 1px solid var(--auth-border);
      background: linear-gradient(180deg, var(--auth-panel-bg-a), var(--auth-panel-bg-b));
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(22px);
      padding: 24px;
      overflow-y: auto;
      overflow-x: hidden;
      color: var(--auth-text);
    }

    .auth-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, var(--auth-primary-soft), transparent 38%, rgba(255,255,255,.04) 72%, transparent);
      pointer-events: none;
    }

    .auth-panel-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      align-items:flex-start;
    }

    .auth-panel-top h3 {
      margin: 0;
      font-size: 24px;
      color: var(--auth-text);
    }

    .auth-form {
      display: none;
      position: relative;
      z-index: 1;
      margin-top:18px;
    }

    .auth-form.active {
      display: block;
    }

    .auth-form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    #registerForm .auth-form-grid {
      grid-template-columns: 1fr;
      align-items: start;
    }

    #registerForm .auth-form-grid > * {
      min-width: 0;
    }

    .auth-field {
      display: grid;
      gap: 8px;
    }

    .auth-field label {
      color: var(--auth-text);
      font-size: 13px;
      font-weight: 600;
    }

    .auth-field input,
    .auth-field select {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--auth-border);
      background: var(--auth-input-bg);
      border-radius: 16px;
      color: var(--auth-text);
      padding: 14px 15px;
      font-size: 14px;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
      -webkit-text-fill-color: var(--auth-text);
    }

    .auth-field input:focus,
    .auth-field select:focus {
      border-color: var(--auth-primary);
      box-shadow: 0 0 0 3px rgba(56, 189, 248, .14);
      color: var(--auth-text);
    }

    .auth-field input::placeholder {
      color: var(--auth-muted);
      opacity: .55;
    }

    .auth-field select option {
      background: var(--auth-bg-deep);
      color: var(--auth-text);
    }

    .auth-aux {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 14px 0 18px;
      color: var(--auth-muted);
      font-size: 13px;
    }

    .auth-aux a,
    .auth-switch-link {
      color: var(--auth-primary);
      text-decoration: none;
      cursor: pointer;
    }
    .auth-check-group {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .auth-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .auth-check input {
      accent-color: #2ea7ff;
    }

    .auth-submit {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: none;
      border-radius: 16px;
      padding: 15px 18px;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .4px;
      color: #ffffff;
      background: linear-gradient(135deg, var(--auth-primary), var(--auth-secondary) 56%, var(--auth-highlight));
      box-shadow: 0 18px 34px rgba(37,99,235,.28);
      cursor: pointer;
    }

    .auth-submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 22px 40px rgba(37,99,235,.30);
    }

    .auth-back {
      margin-top: 14px;
      text-align: center;
    }

    .auth-back button {
      border: 1px solid var(--auth-border);
      background: rgba(255,255,255,.05);
      color: var(--auth-text);
      padding: 10px 14px;
      border-radius: 14px;
      cursor: pointer;
    }

    /* Login brand title */
    .auth-brand-login-title{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:12px;
      line-height:1.9;
      margin:0;
    }
    .auth-brand-login-title span{
      font-size:24px;
      font-weight:700;
      color:var(--auth-text);
    }
    .auth-brand-login-title strong{
      font-size:28px;
      font-weight:800;
      color:var(--auth-primary);
      letter-spacing:.04em;
    }
    .auth-brand-login-title em{
      font-style:normal;
      font-size:20px;
      font-weight:700;
      color:var(--auth-text);
    }

    /* Login form specifics */
    #loginForm .auth-form-grid{row-gap:28px;}
    #loginForm .auth-field{gap:5px;margin-bottom:0;}
    #loginForm .auth-aux{margin:36px 0 42px;}
    #loginForm .auth-submit{letter-spacing:.55em;}
    #loginForm{margin-top:36px !important;}

    .auth-form-msg{text-align:center;padding:10px 14px;margin-bottom:12px;border-radius:10px;font-size:14px;line-height:1.5;display:none;color:#fef2f2;background:rgba(238,28,37,.22);border:1px solid rgba(238,28,37,.35);}
    .auth-form-msg.show{display:block;}

    /* Login & Register page font increase */
    .auth-form .auth-field label{font-size:19px !important;}
    .auth-form .auth-field input{font-size:20px !important;}
    .auth-form .auth-field select{font-size:20px !important;}
    .auth-form .auth-aux{font-size:19px !important;}
    .auth-form .auth-submit{font-size:21px !important;}
    .auth-form .auth-submit,
     .auth-form .auth-aux,
     .auth-form .auth-field input,
     .auth-form .auth-field select,
     .auth-form .auth-field label{line-height:1.4;}
     #registerForm .auth-aux{font-size:16px !important;}

    /* Increase spacing between 3-line login text block */
    .auth-headline h2{line-height: 1.9 !important;}
    .auth-headline .thin{display:block;margin-top:18px !important;}
    .auth-headline p{margin-top:22px !important;line-height:1.9 !important;}

    /* Starry sky */
    .auth-starry-sky{
      position:absolute;
      z-index:1;
      top:0;
      left:31%;
      right:0;
      height:44vh;
      min-height:300px;
      pointer-events:none;
      overflow:hidden;
      opacity:.95;
      background:
        radial-gradient(ellipse at 58% 30%, color-mix(in srgb, var(--auth-secondary) 22%, transparent), transparent 28%),
        radial-gradient(ellipse at 70% 18%, color-mix(in srgb, var(--auth-primary) 16%, transparent), transparent 26%),
        radial-gradient(ellipse at 46% 40%, rgba(255,255,255,.10), transparent 18%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.80) 55%, transparent 100%);
    }

    .auth-starry-sky::before{
      content:"";
      position:absolute;
      inset:-8% -4%;
      background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.92) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 42% 18%, rgba(157,220,255,.92) 0 1.4px, transparent 2px),
        radial-gradient(circle at 55% 42%, rgba(255,255,255,.82) 0 1px, transparent 1.8px),
        radial-gradient(circle at 72% 28%, rgba(150,221,255,.95) 0 1.6px, transparent 2.2px),
        radial-gradient(circle at 88% 42%, rgba(255,255,255,.70) 0 1px, transparent 1.8px),
        radial-gradient(circle at 32% 58%, rgba(255,255,255,.74) 0 1px, transparent 1.8px),
        radial-gradient(circle at 64% 64%, rgba(162,225,255,.74) 0 1px, transparent 1.8px);
      background-size: 360px 220px, 420px 260px, 300px 180px, 460px 280px, 340px 210px, 390px 240px, 430px 250px;
      animation: starDrift 26s linear infinite;
      opacity:.9;
    }

    .auth-starry-sky::after{
      content:"";
      position:absolute;
      left:24%;
      top:-28%;
      width:48%;
      height:130%;
      transform:rotate(24deg);
      background:
        radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--auth-primary) 32%, transparent), transparent 50%),
        linear-gradient(90deg, transparent, rgba(180,232,255,.12), transparent);
      filter:blur(12px);
      opacity:.72;
      animation: nebulaBreath 8s ease-in-out infinite;
    }

    .auth-starry-sky .star{
      position:absolute;
      width:4px;
      height:4px;
      border-radius:50%;
      background:#fff;
      box-shadow:
        0 0 12px rgba(255,255,255,.95),
        0 0 26px color-mix(in srgb, var(--auth-secondary) 70%, transparent);
      animation: starTwinkle 3.8s ease-in-out infinite;
    }

    .auth-starry-sky .star::before,
    .auth-starry-sky .star::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
      border-radius:999px;
    }
    .auth-starry-sky .star::before{ width:28px; height:1px; }
    .auth-starry-sky .star::after{ width:1px; height:28px; }

    .auth-starry-sky .s1{ left:14%; top:25%; animation-delay:.1s; }
    .auth-starry-sky .s2{ left:32%; top:16%; animation-delay:1.2s; }
    .auth-starry-sky .s3{ left:49%; top:37%; animation-delay:2.1s; }
    .auth-starry-sky .s4{ left:67%; top:22%; animation-delay:.7s; }
    .auth-starry-sky .s5{ left:84%; top:34%; animation-delay:1.8s; }
    .auth-starry-sky .s6{ left:40%; top:58%; animation-delay:2.8s; }
    .auth-starry-sky .s7{ left:75%; top:62%; animation-delay:3.2s; }

    .auth-starry-sky .meteor{
      position:absolute;
      width:170px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--auth-secondary) 94%, white 6%), transparent);
      box-shadow:0 0 18px color-mix(in srgb, var(--auth-secondary) 62%, transparent);
      transform:rotate(-32deg);
      opacity:.0;
      animation: meteorFly 7.8s ease-in-out infinite;
    }

    .auth-starry-sky .m1{ left:6%; top:50%; animation-delay:.2s; }
    .auth-starry-sky .m2{ left:58%; top:44%; width:210px; animation-delay:3.1s; }
    .auth-starry-sky .m3{ left:72%; top:18%; width:140px; animation-delay:5.4s; }

    @keyframes starDrift{
      from{ transform:translate3d(0,0,0); }
      to{ transform:translate3d(-80px,34px,0); }
    }
    @keyframes nebulaBreath{
      0%,100%{ opacity:.45; transform:rotate(24deg) scale(.96); }
      50%{ opacity:.82; transform:rotate(26deg) scale(1.06); }
    }
    @keyframes starTwinkle{
      0%,100%{ opacity:.45; transform:scale(.82); }
      45%{ opacity:1; transform:scale(1.25); }
    }
    @keyframes meteorFly{
      0%, 58%{ opacity:0; transform:translate3d(0,0,0) rotate(-32deg); }
      64%{ opacity:.95; }
      78%,100%{ opacity:0; transform:translate3d(210px,-118px,0) rotate(-32deg); }
    }

    @keyframes floatY {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @keyframes geoFloat {
      0%, 100% { translate: 0 0; rotate: 0deg; opacity: .72; }
      28% { translate: 28px -22px; rotate: 16deg; opacity: 1; }
      62% { translate: -18px 18px; rotate: -10deg; opacity: .86; }
    }

    @keyframes orbitBreath {
      0%, 100% { transform: rotate(-12deg) scale(.96); opacity: .28; }
      50% { transform: rotate(-8deg) scale(1.08); opacity: .55; }
    }

    @keyframes dashFlow {
      to { stroke-dashoffset: -260; }
    }

    @keyframes pulseLine {
      0%,100% { stroke-dashoffset: 0; opacity: .18; }
      50% { stroke-dashoffset: -380; opacity: .88; }
    }

    @keyframes geoLineShift {
      0%,100% { translate: 0 0; opacity: .48; }
      50% { translate: 18px -10px; opacity: .92; }
    }

    @keyframes nodePulse {
      0%,100% { transform: scale(1); box-shadow: 0 0 0 8px rgba(123,211,255,.08), 0 0 16px rgba(123,211,255,.42); }
      50% { transform: scale(1.24); box-shadow: 0 0 0 16px rgba(123,211,255,.05), 0 0 24px rgba(123,211,255,.70); }
    }

    /* Theme overrides for auth page */
    html[data-theme="lightblue"] .auth-page {
      --auth-panel-bg-a: rgba(255,255,255,.86);
      --auth-panel-bg-b: rgba(232,244,255,.78);
      --auth-input-bg: rgba(255,255,255,.92);
      --auth-switch-bg: rgba(255,255,255,.72);
      --auth-text: #102a43;
      --auth-muted: #5d7896;
    }

    html[data-theme="lightblue"] .auth-page::after {
      background:
        radial-gradient(circle at 18% 88%, rgba(56,189,248,.12), transparent 22%),
        radial-gradient(circle at 48% 64%, rgba(96,165,250,.08), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(218,235,252,.18) 46%, rgba(104,134,166,.24) 100%);
    }

    /* Toast */
    .toast {
      position: fixed;
      top: 32px;
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      background: var(--toast-bg);
      color: var(--toast-text);
      padding: 14px 28px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 16px 38px rgba(0,0,0,.22);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease, transform .25s ease;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* 登录页自动档位（html.ld-zoom-gear，html zoom = 档位÷浏览器缩放）下 toast 反向补偿：
       视觉总缩放 = 档位 110%，toast 自身 zoom=1/档位 抵消，保持原始大小（与系统页面浮层一致） */
    html.ld-zoom-gear .toast {
      zoom: calc(1/var(--ld-gear));
    }

    /* 触屏设备（手机/平板）：长按任意元素禁止浏览器原生呼出菜单（下载/分享/打印/刷新/搜索/复制）。
       -webkit-touch-callout 针对 iOS Safari（长按图片/链接/输入框呼出菜单）；user-select:none 屏蔽
       Android/iOS 长按文字弹"复制/全选/搜索"选择菜单（2026-08-14 用户要求全部屏蔽）；
       输入框/文本域/contenteditable 保留文本选择（可正常编辑与复制）；图片/视频禁止拖拽触发系统行为 */
    @media (pointer: coarse), (any-pointer: coarse) {
      * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
      input, textarea, [contenteditable="true"], [contenteditable="plaintext-only"] {
        -webkit-user-select: text; user-select: text;
      }
      img, video, canvas, svg { -webkit-user-drag: none; user-drag: none; }
    }

    /* Responsive */
    @media (max-width: 1180px) {
      .auth-page {
        grid-template-columns: 1fr;
      }
      .auth-visual {
        padding: 38px 28px 0;
      }
      .auth-panel-wrap {
        position: relative;
        right: auto;
        top: auto;
        width: auto;
        padding: 20px 28px 40px;
        transform: none;
        justify-content: center;
      }
      .auth-scene {
        min-height: 64vh;
        margin-left: 0;
        margin-right: 0;
      }
      .auth-building {
        bottom: -34%;
        width: min(1760px, 188vw);
        min-height: 76vh;
        transform: translateX(-50%) scale(1.05);
      }
    }

    @media (max-width: 760px) {
      .auth-brand-copy h1 {
        font-size: 24px;
      }
      .auth-brand-copy h1 .brand-title{font-size:29px;}
      .auth-brand-copy h1 .brand-subtitle{font-size:21px;}
      .auth-headline h2 {
        font-size: 32px;
      }
      .auth-headline .thin {
        font-size: .88em;
      }
      .auth-visual {
        padding: 24px 20px 0;
      }
      .auth-panel-wrap {
        padding: 16px 20px 28px;
      }
      .auth-panel {
        width: min(100%, 440px);
        min-height: auto;
        max-height: none;
        padding: 22px 18px;
        border-radius: 22px;
      }
      #registerForm .auth-form-grid {
        grid-template-columns: 1fr;
      }
      .auth-scene {
        min-height: 54vh;
      }
      .auth-building {
        bottom: -28%;
        width: 205vw;
        min-height: 58vh;
        transform: translateX(-50%) scale(1.28);
      }
    }


    /* ── Fixed-design proportional scaling ──
       以 2560×1289 为设计稿尺寸，页面所有元素作为一个整体等比缩放。
       注意：这段必须放在所有 @media 后面，用来覆盖原来的响应式拆列规则。 */
    :root {
      --design-width: 2560px;
      --design-height: 1289px;
      --app-scale-x: 1;
      --app-scale-y: 1;
      --panel-comp-scale-x: 1;
      --panel-comp-scale-y: 1;
      --app-left: 0px;
      --app-top: 0px;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
    }

    body {
      position: relative;
      background: var(--bg-deep);
    }

    .auth-page {
      position: fixed;
      left: var(--app-left);
      top: var(--app-top);
      width: var(--design-width);
      height: var(--design-height);
      min-width: var(--design-width);
      min-height: var(--design-height);
      max-width: none;
      max-height: none;
      transform: scale(var(--app-scale-x), var(--app-scale-y));
      transform-origin: left top;
      grid-template-columns: minmax(0, 1.28fr) minmax(420px, 500px);
    }

    .auth-visual {
      padding: 56px 40px 34px;
    }

    .auth-panel-wrap {
      position: absolute;
      right: clamp(72px, 6.2vw, 118px);
      top: 50%;
      width: 500px;
      padding: 0;
      transform: translateY(calc(-50% - 60px)) translateX(-30px);
      justify-content: center;
    }

    .auth-panel {
      width: 500px;
      min-height: 440px;
      max-height: calc(var(--design-height) - 150px);
      padding: 24px;
      border-radius: 28px;
      /*
        登录/注册窗体二次补偿缩放：
        不破坏整页 2560×1289 的整体拉伸逻辑，只在页面整体缩放后，
        当窗体最终显示宽度小于 280px 或高度小于 270px 时，
        单独把 .auth-panel 再放大。
        transform-origin: right center 表示：
        - 宽度补偿时向左扩展，不把右侧挤出屏幕；
        - 高度补偿时上下居中扩展。
      */
      transform: scale(var(--panel-comp-scale-x), var(--panel-comp-scale-y));
      transform-origin: right center;
      will-change: transform;
    }

    .auth-scene {
      height: 928px;
      min-height: 928px;
      margin-left: 0;
      margin-right: 0;
      overflow: hidden;
      isolation: isolate;
      /*
        硬裁剪桥下口：保留 2560×1289 设计稿布局尺寸，
        但把桥区域底部多余 208px 从渲染源头直接裁掉。
        这里不是遮罩覆盖，因此缩放后不会再露出下口边。
      */
      clip-path: inset(0 0 208px 0);
    }

        .auth-building {
      bottom: 150px;
      width: 120%;
      min-height: 0;
      transform: translateX(-50%) scale(0.95);
    }

    .auth-brand-copy h1 {
      font-size: clamp(28px, 3vw, 38px);
    }

    .auth-brand-copy h1 .brand-title {
      font-size: clamp(33px, 3.5vw, 43px);
    }

    .auth-brand-copy h1 .brand-subtitle {
      font-size: clamp(25px, 2.5vw, 33px);
    }

    .auth-headline h2 {
      font-size: clamp(34px, 4vw, 58px);
    }

    .auth-headline .thin {
      font-size: .48em;
    }


    /* ── 手机强制布局 V2 ──
       目标：
       1) 手机正常模式：一屏内完整显示登录框，不再超出屏幕；
       2) 手机开启“桌面网站”：仍按手机 UI 铺满屏幕，不再显示居中缩小的桌面版。
       核心：所有关键尺寸用 vw / vh / dvh，避免桌面网站模式下 420px max-width 变成很小。 */
    html.force-mobile,
    html.force-mobile body {
      width: 100%;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
      touch-action: manipulation;
    }

    html.force-mobile .auth-page {
      position: fixed;
      inset: 0;
      width: 100vw;
      width: 100dvw;
      height: 100vh;
      height: 100dvh;
      min-width: 0;
      min-height: 0;
      max-width: none;
      max-height: none;
      transform: none !important;
      transform-origin: center center;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      grid-template-columns: none !important;
      padding: 0 3.8vw 2.2vh;
      overflow: hidden;
    }

    html.force-mobile .auth-page::before,
    html.force-mobile .auth-page::after {
      inset: 0;
    }

    html.force-mobile .auth-headline,
    html.force-mobile .auth-scene {
      display: none !important;
    }

    html.force-mobile .auth-starry-sky {
      left: 0;
      right: 0;
      top: 0;
      height: 48vh;
      height: 48dvh;
      min-height: 0;
      opacity: .95;
    }

    html.force-mobile .auth-theme-switch {
      position: absolute;
      top: 2.2vh;
      top: 2.2dvh;
      right: 3.8vw;
      z-index: 8;
      gap: 2.2vw;
      padding: 1.2vh 2.8vw;
      border-radius: 5vw;
      margin: 0;
    }

    html.force-mobile .auth-theme-switch label {
      font-size: clamp(12px, 3.5vw, 16px);
      letter-spacing: .03em;
    }

    html.force-mobile .auth-theme-trigger {
      min-width: 26vw;
      max-width: 32vw;
      border-radius: 3.8vw;
      font-size: clamp(12px, 3.5vw, 16px);
      padding: 1vh 7vw 1vh 2.5vw;
    }

    html.force-mobile .auth-visual {
      display: block;
      flex: 0 0 auto;
      padding: 12vh 0 0;
      padding-top: 12dvh;
      z-index: 2;
    }

    html.force-mobile .auth-brand-row {
      transform: none;
      display: flex;
      align-items: center;
      gap: 4vw;
      margin: 0 0 4.2vh;
      margin-bottom: 4.2dvh;
    }

    html.force-mobile .auth-brand-mark {
      width: 20vw;
      height: 20vw;
      max-width: 92px;
      max-height: 92px;
      min-width: 68px;
      min-height: 68px;
    }

    html.force-mobile .auth-brand-mark svg {
      width: 100%;
      height: 100%;
    }

    html.force-mobile .auth-brand-copy {
      min-width: 0;
      flex: 1;
    }

    html.force-mobile .auth-brand-copy h1 {
      line-height: 1.28;
      white-space: normal;
    }

    html.force-mobile .auth-brand-copy h1 .brand-title {
      font-size: clamp(24px, 7.3vw, 36px);
    }

    html.force-mobile .auth-brand-copy h1 .brand-subtitle {
      font-size: clamp(18px, 5.6vw, 28px);
    }

    html.force-mobile .auth-brand-copy p {
      margin-top: .8vh;
      font-size: clamp(10px, 3.1vw, 15px);
      line-height: 1.45;
      letter-spacing: .025em;
    }

    html.force-mobile .auth-panel-wrap {
      position: relative;
      right: auto;
      top: auto;
      z-index: 4;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      padding: 0;
      /* 2026-08-15：原 -8vh 使登录窗体上移 73px，顶部侵入 logo 区域遮挡 logo；
         下移 0%（2026-08-15 由 4.5%→3.6%→0%）。
         单位用 --fm-vh（画布高的 1/100，JS 固定计算）而非原生 vh：原生 vh 基准=布局视口高，
         Edge/Chrome 浏览器 UI（地址栏/工具栏）高度不同 → 布局视口高不同 → 同百分比偏移绝对像素
         不一致（Chrome 需多下移 4.5% 才等于 Edge 0%）。--fm-vh 与浏览器无关，两浏览器视觉自动一致。
         横屏强制竖屏由 ld-login-ls 覆盖块单独控制（同样 --fm-vh，用户确认横屏无遮挡）。 */
      margin-top: calc(var(--fm-vh, 1vh) * -8);
      transform: none !important;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }

    /* 平板竖屏（走手机布局）登录窗体：0% 档（-8）基础上再上移 2.6%（2026-08-15 用户实测
       平板 0% 偏下 → 上移 2.6% = -10.6）。用 --fm-vh 画布比例保证 Edge/Chrome 一致。 */
    html.force-mobile.ld-login-tablet .auth-panel-wrap {
      margin-top: calc(var(--fm-vh, 1vh) * -10.6);
    }

    /* 平板竖屏（走手机布局）：主题切换按钮整体缩小（2026-08-15 用户反馈偏大贴 logo，
       三次各缩 20% → scale(0.512)），以右上角为锚点缩放，保持右上对齐 */
    html.force-mobile.ld-login-tablet .auth-theme-switch {
      transform: scale(0.512);
      transform-origin: top right;
    }

    /* 手机（force-mobile 布局）：主题切换按钮缩小 30%（2026-08-15 用户要求参照平板模式），
       以右上角为锚点缩放，保持右上对齐；平板竖屏仍走上面的 0.512 */
    html.force-mobile .auth-theme-switch {
      transform: scale(0.7);
      transform-origin: top right;
    }

    html.force-mobile .auth-panel {
      width: 100%;
      max-width: none;
      min-height: 0;
      max-height: none;
      height: auto;
      padding: 3.8vh 5.6vw 2.8vh;
      padding-top: 3.8dvh;
      padding-bottom: 2.8dvh;
      border-radius: 7vw;
      transform: none !important;
      transform-origin: center center;
      overflow: visible;
    }

    html.force-mobile .auth-panel-top {
      margin-bottom: 0;
    }

    html.force-mobile .auth-brand-login-title {
      gap: 0;
      line-height: 1.15;
    }

    html.force-mobile .auth-brand-login-title strong {
      font-size: clamp(30px, 9.2vw, 46px);
      line-height: 1.15;
    }

    html.force-mobile #loginForm {
      margin-top: 3vh !important;
      margin-top: 3dvh !important;
    }

    html.force-mobile #loginForm .auth-form-grid {
      row-gap: 2.4vh;
      row-gap: 2.4dvh;
    }

    html.force-mobile .auth-field {
      gap: .9vh;
    }

    html.force-mobile .auth-form .auth-field label {
      font-size: clamp(18px, 5vw, 25px) !important;
      line-height: 1.18;
    }

    html.force-mobile .auth-form .auth-field input,
    html.force-mobile .auth-form .auth-field select {
      height: 7.3vh;
      height: 7.3dvh;
      min-height: 50px;
      max-height: 66px;
      font-size: clamp(18px, 5vw, 25px) !important;
      padding: 0 5vw;
      border-radius: 4vw;
      line-height: 1.1;
    }

    html.force-mobile .auth-form .auth-aux {
      margin: 3.2vh 0 3.1vh !important;
      margin-top: 3.2dvh !important;
      margin-bottom: 3.1dvh !important;
      font-size: clamp(14px, 4.05vw, 20px) !important;
      line-height: 1.2;
      gap: 3vw;
      white-space: nowrap;
    }

    html.force-mobile .auth-check-group {
      width: auto;
      flex: 1 1 auto;
      display: flex;
      justify-content: flex-start;
      gap: 5vw;
      min-width: 0;
    }

    html.force-mobile .auth-check {
      gap: 1.8vw;
      white-space: nowrap;
    }

    html.force-mobile .auth-check input {
      width: clamp(16px, 4.5vw, 22px);
      height: clamp(16px, 4.5vw, 22px);
      flex: 0 0 auto;
    }

    html.force-mobile .auth-aux a {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    html.force-mobile .auth-submit {
      height: 7.3vh;
      height: 7.3dvh;
      min-height: 54px;
      max-height: 68px;
      border-radius: 4.2vw;
      font-size: clamp(18px, 5.4vw, 27px) !important;
      letter-spacing: .48em !important;
      padding: 0 4vw;
    }

    html.force-mobile .auth-back {
      margin-top: 1.8vh;
      margin-top: 1.8dvh;
    }

    html.force-mobile .auth-back button {
      width: 100%;
      height: 6vh;
      height: 6dvh;
      min-height: 44px;
      max-height: 58px;
      border-radius: 4.2vw;
      font-size: clamp(15px, 4.4vw, 22px) !important;
      padding: 0 3vw;
      white-space: nowrap;
    }

    /* 矮屏手机再压缩一点，保证按钮完整露出 */
    @media (max-height: 760px) {
      html.force-mobile .auth-visual {
        padding-top: 9.5vh;
        padding-top: 9.5dvh;
      }

      html.force-mobile .auth-brand-row {
        margin-bottom: 2.4vh;
        margin-bottom: 2.4dvh;
      }

      html.force-mobile .auth-brand-mark {
        width: 17vw;
        height: 17vw;
        min-width: 58px;
        min-height: 58px;
      }

      html.force-mobile .auth-brand-copy h1 .brand-title {
        font-size: clamp(22px, 6.4vw, 32px);
      }

      html.force-mobile .auth-brand-copy h1 .brand-subtitle {
        font-size: clamp(17px, 5vw, 25px);
      }

      html.force-mobile .auth-brand-copy p {
        font-size: clamp(9px, 2.8vw, 13px);
      }

      html.force-mobile .auth-panel {
        padding-top: 3vh;
        padding-top: 3dvh;
        padding-bottom: 2vh;
        padding-bottom: 2dvh;
      }

      html.force-mobile #loginForm {
        margin-top: 2.2vh !important;
        margin-top: 2.2dvh !important;
      }

      html.force-mobile #loginForm .auth-form-grid {
        row-gap: 1.8vh;
        row-gap: 1.8dvh;
      }

      html.force-mobile .auth-form .auth-aux {
        margin-top: 2.2vh !important;
        margin-bottom: 2.2vh !important;
        margin-top: 2.2dvh !important;
        margin-bottom: 2.2dvh !important;
      }
    }

    @media (max-width: 360px) {
      html.force-mobile .auth-page {
        padding-left: 3vw;
        padding-right: 3vw;
      }

      html.force-mobile .auth-form .auth-aux {
        font-size: clamp(13px, 3.75vw, 18px) !important;
      }

      html.force-mobile .auth-check-group {
        gap: 3.2vw;
      }
    }
  

    /* ── 手机强制布局 V3：修复 Android Chrome “桌面版网站”下 CSS 视口变成 980px 导致缩小的问题 ──
       思路：JS 计算真实手机屏幕宽高，CSS 使用 --fm-vw/--fm-vh 作为“真实 1vw/1vh”，
       当浏览器开启桌面版网站时，再把整个手机画布按 --fm-scale 放大到桌面视口。 */
    html.force-mobile .auth-page {
      left: 0;
      top: 0;
      right: auto;
      bottom: auto;
      width: var(--fm-w, 100vw) !important;
      height: var(--fm-h, 100dvh) !important;
      padding: 0 calc(var(--fm-vw, 1vw) * 3.8) calc(var(--fm-vh, 1vh) * 2.2) !important;
      transform: scale(var(--fm-scale, 1)) !important;
      transform-origin: left top !important;
    }

    /* ── 手机横屏强制竖屏（2026-08-15）：手机任何情况下都按竖屏显示，不产生横屏。
       横屏时 JS 给 html 加 ld-login-ls，画布尺寸换成竖屏（宽=视口高、高=视口宽），
       此处 rotate(-90°) 铺满横屏视口 → 观感与竖屏一致，横屏窄高导致的按钮被切随之消失。
       transform 从右到左：scale → rotate(-90°) → translateY(画布宽)。注意 CSS rotate(90deg)
       是顺时针（(x,y)→(-y,x)），旋转后画布落在视口左外侧会整页空白；rotate(-90deg)
       逆时针（(x,y)→(y,-x)）再下移一个画布宽（=视口高）恰好铺满横屏视口。 */
    html.force-mobile.ld-login-ls .auth-page {
      transform: translateY(var(--fm-w, 100vw)) rotate(-90deg) scale(var(--fm-scale, 1)) !important;
      transform-origin: left top !important;
    }

    /* ── 手机横屏强制竖屏：旋转画布下原生 vh/vw/dvh/dvw 按"横屏视口"计算会错乱
       （如 auth-panel-wrap 的 margin-top:-8vh 横屏仅上移 33px，竖屏应为 73px，
       导致登录窗体相对下移遮挡 logo）；--fm-vh/--fm-vw 已是竖屏视口的 1/100，
       此处把 force-mobile 区内全部原生 vh/vw 统一换成 --fm-* 等效值。
       放在短屏媒体查询之后（spec 更高）→ 同时抵消横屏视口高<760 误触发的短屏压缩。 */
    html.force-mobile.ld-login-ls .auth-starry-sky { height: calc(var(--fm-vh, 1vh) * 48) !important; }
    html.force-mobile.ld-login-ls .auth-theme-switch {
      top: calc(var(--fm-vh, 1vh) * 2.2) !important;
      right: calc(var(--fm-vw, 1vw) * 3.8) !important;
      gap: calc(var(--fm-vw, 1vw) * 2.2) !important;
      padding: calc(var(--fm-vh, 1vh) * 1.2) calc(var(--fm-vw, 1vw) * 2.8) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 5) !important;
    }
    html.force-mobile.ld-login-ls .auth-theme-switch label { font-size: clamp(12px, calc(var(--fm-vw, 1vw) * 3.5), 16px) !important; }
    html.force-mobile.ld-login-ls .auth-theme-trigger {
      min-width: calc(var(--fm-vw, 1vw) * 26) !important;
      max-width: calc(var(--fm-vw, 1vw) * 32) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 3.8) !important;
      font-size: clamp(12px, calc(var(--fm-vw, 1vw) * 3.5), 16px) !important;
      padding: calc(var(--fm-vh, 1vh) * 1) calc(var(--fm-vw, 1vw) * 7) calc(var(--fm-vh, 1vh) * 1) calc(var(--fm-vw, 1vw) * 2.5) !important;
    }
    html.force-mobile.ld-login-ls .auth-visual { padding: calc(var(--fm-vh, 1vh) * 12) 0 0 !important; }
    html.force-mobile.ld-login-ls .auth-brand-row {
      gap: calc(var(--fm-vw, 1vw) * 4) !important;
      margin: 0 0 calc(var(--fm-vh, 1vh) * 4.2) !important;
    }
    html.force-mobile.ld-login-ls .auth-brand-mark {
      width: calc(var(--fm-vw, 1vw) * 20) !important;
      height: calc(var(--fm-vw, 1vw) * 20) !important;
      min-width: 68px !important;
      min-height: 68px !important;
    }
    html.force-mobile.ld-login-ls .auth-brand-copy h1 .brand-title { font-size: clamp(24px, calc(var(--fm-vw, 1vw) * 7.3), 36px) !important; }
    html.force-mobile.ld-login-ls .auth-brand-copy h1 .brand-subtitle { font-size: clamp(18px, calc(var(--fm-vw, 1vw) * 5.6), 28px) !important; }
    html.force-mobile.ld-login-ls .auth-brand-copy p {
      margin-top: calc(var(--fm-vh, 1vh) * 0.8) !important;
      font-size: clamp(10px, calc(var(--fm-vw, 1vw) * 3.1), 15px) !important;
    }
    html.force-mobile.ld-login-ls .auth-panel-wrap { margin-top: calc(var(--fm-vh, 1vh) * -8) !important; }
    html.force-mobile.ld-login-ls .auth-panel {
      padding: calc(var(--fm-vh, 1vh) * 3.8) calc(var(--fm-vw, 1vw) * 5.6) calc(var(--fm-vh, 1vh) * 2.8) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 7) !important;
    }
    html.force-mobile.ld-login-ls .auth-brand-login-title strong { font-size: clamp(30px, calc(var(--fm-vw, 1vw) * 9.2), 46px) !important; }
    html.force-mobile.ld-login-ls #loginForm { margin-top: calc(var(--fm-vh, 1vh) * 3) !important; }
    html.force-mobile.ld-login-ls #loginForm .auth-form-grid { row-gap: calc(var(--fm-vh, 1vh) * 2.4) !important; }
    html.force-mobile.ld-login-ls .auth-field { gap: calc(var(--fm-vh, 1vh) * 0.9) !important; }
    html.force-mobile.ld-login-ls .auth-form .auth-field label { font-size: clamp(18px, calc(var(--fm-vw, 1vw) * 5), 25px) !important; }
    html.force-mobile.ld-login-ls .auth-form .auth-field input,
    html.force-mobile.ld-login-ls .auth-form .auth-field select {
      height: calc(var(--fm-vh, 1vh) * 7.3) !important;
      font-size: clamp(18px, calc(var(--fm-vw, 1vw) * 5), 25px) !important;
      padding: 0 calc(var(--fm-vw, 1vw) * 5) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 4) !important;
    }
    html.force-mobile.ld-login-ls .auth-form .auth-aux {
      margin: calc(var(--fm-vh, 1vh) * 3.2) 0 calc(var(--fm-vh, 1vh) * 3.1) !important;
      font-size: clamp(14px, calc(var(--fm-vw, 1vw) * 4.05), 20px) !important;
      gap: calc(var(--fm-vw, 1vw) * 3) !important;
    }
    html.force-mobile.ld-login-ls .auth-check-group { gap: calc(var(--fm-vw, 1vw) * 5) !important; }
    html.force-mobile.ld-login-ls .auth-check { gap: calc(var(--fm-vw, 1vw) * 1.8) !important; }
    html.force-mobile.ld-login-ls .auth-check input {
      width: clamp(16px, calc(var(--fm-vw, 1vw) * 4.5), 22px) !important;
      height: clamp(16px, calc(var(--fm-vw, 1vw) * 4.5), 22px) !important;
    }
    html.force-mobile.ld-login-ls .auth-submit {
      height: calc(var(--fm-vh, 1vh) * 7.3) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 4.2) !important;
      font-size: clamp(18px, calc(var(--fm-vw, 1vw) * 5.4), 27px) !important;
      padding: 0 calc(var(--fm-vw, 1vw) * 4) !important;
    }
    html.force-mobile.ld-login-ls .auth-back { margin-top: calc(var(--fm-vh, 1vh) * 1.8) !important; }
    html.force-mobile.ld-login-ls .auth-back button {
      height: calc(var(--fm-vh, 1vh) * 6) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 4.2) !important;
      font-size: clamp(15px, calc(var(--fm-vw, 1vw) * 4.4), 22px) !important;
      padding: 0 calc(var(--fm-vw, 1vw) * 3) !important;
    }

    html.force-mobile .auth-starry-sky {
      height: calc(var(--fm-vh, 1vh) * 48) !important;
    }

    html.force-mobile .auth-theme-switch {
      top: calc(var(--fm-vh, 1vh) * 2.2) !important;
      right: calc(var(--fm-vw, 1vw) * 3.8) !important;
      gap: calc(var(--fm-vw, 1vw) * 2.2) !important;
      padding: calc(var(--fm-vh, 1vh) * 1.2) calc(var(--fm-vw, 1vw) * 2.8) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 5) !important;
    }

    html.force-mobile .auth-theme-switch label {
      font-size: min(max(12px, calc(var(--fm-vw, 1vw) * 3.5)), 16px) !important;
    }

    html.force-mobile .auth-theme-trigger {
      min-width: calc(var(--fm-vw, 1vw) * 26) !important;
      max-width: calc(var(--fm-vw, 1vw) * 32) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 3.8) !important;
      font-size: min(max(12px, calc(var(--fm-vw, 1vw) * 3.5)), 16px) !important;
      padding: calc(var(--fm-vh, 1vh) * 1) calc(var(--fm-vw, 1vw) * 7) calc(var(--fm-vh, 1vh) * 1) calc(var(--fm-vw, 1vw) * 2.5) !important;
    }

    html.force-mobile .auth-visual {
      padding-top: calc(var(--fm-vh, 1vh) * 12) !important;
    }

    html.force-mobile .auth-brand-row {
      gap: calc(var(--fm-vw, 1vw) * 4) !important;
      margin-bottom: calc(var(--fm-vh, 1vh) * 4.2) !important;
    }

    html.force-mobile .auth-brand-mark {
      width: min(max(calc(var(--fm-vw, 1vw) * 20), 68px), 92px) !important;
      height: min(max(calc(var(--fm-vw, 1vw) * 20), 68px), 92px) !important;
    }

    html.force-mobile .auth-brand-copy h1 .brand-title {
      font-size: min(max(24px, calc(var(--fm-vw, 1vw) * 7.3)), 36px) !important;
    }

    html.force-mobile .auth-brand-copy h1 .brand-subtitle {
      font-size: min(max(18px, calc(var(--fm-vw, 1vw) * 5.6)), 28px) !important;
    }

    html.force-mobile .auth-brand-copy p {
      margin-top: calc(var(--fm-vh, 1vh) * .8) !important;
      font-size: min(max(10px, calc(var(--fm-vw, 1vw) * 3.1)), 15px) !important;
    }

    html.force-mobile .auth-panel {
      padding: calc(var(--fm-vh, 1vh) * 3.8) calc(var(--fm-vw, 1vw) * 5.6) calc(var(--fm-vh, 1vh) * 2.8) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 7) !important;
    }

    html.force-mobile .auth-brand-login-title strong {
      font-size: min(max(30px, calc(var(--fm-vw, 1vw) * 9.2)), 46px) !important;
    }

    html.force-mobile #loginForm {
      margin-top: calc(var(--fm-vh, 1vh) * 3) !important;
    }

    html.force-mobile #loginForm .auth-form-grid {
      row-gap: calc(var(--fm-vh, 1vh) * 2.4) !important;
    }

    html.force-mobile .auth-field {
      gap: calc(var(--fm-vh, 1vh) * .9) !important;
    }

    html.force-mobile .auth-form .auth-field label {
      font-size: min(max(18px, calc(var(--fm-vw, 1vw) * 5)), 25px) !important;
    }

    html.force-mobile .auth-form .auth-field input,
    html.force-mobile .auth-form .auth-field select {
      height: min(max(calc(var(--fm-vh, 1vh) * 7.3), 50px), 66px) !important;
      font-size: min(max(18px, calc(var(--fm-vw, 1vw) * 5)), 25px) !important;
      padding-left: calc(var(--fm-vw, 1vw) * 5) !important;
      padding-right: calc(var(--fm-vw, 1vw) * 5) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 4) !important;
    }

    html.force-mobile .auth-form .auth-aux {
      margin-top: calc(var(--fm-vh, 1vh) * 3.2) !important;
      margin-bottom: calc(var(--fm-vh, 1vh) * 3.1) !important;
      font-size: min(max(14px, calc(var(--fm-vw, 1vw) * 4.05)), 20px) !important;
      gap: calc(var(--fm-vw, 1vw) * 3) !important;
    }

    html.force-mobile .auth-check-group {
      gap: calc(var(--fm-vw, 1vw) * 5) !important;
    }

    html.force-mobile .auth-check {
      gap: calc(var(--fm-vw, 1vw) * 1.8) !important;
    }

    html.force-mobile .auth-check input {
      width: min(max(16px, calc(var(--fm-vw, 1vw) * 4.5)), 22px) !important;
      height: min(max(16px, calc(var(--fm-vw, 1vw) * 4.5)), 22px) !important;
    }

    html.force-mobile .auth-submit {
      height: min(max(calc(var(--fm-vh, 1vh) * 7.3), 54px), 68px) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 4.2) !important;
      font-size: min(max(18px, calc(var(--fm-vw, 1vw) * 5.4)), 27px) !important;
      padding-left: calc(var(--fm-vw, 1vw) * 4) !important;
      padding-right: calc(var(--fm-vw, 1vw) * 4) !important;
    }

    html.force-mobile .auth-back {
      margin-top: calc(var(--fm-vh, 1vh) * 1.8) !important;
    }

    html.force-mobile .auth-back button {
      height: min(max(calc(var(--fm-vh, 1vh) * 6), 44px), 58px) !important;
      border-radius: calc(var(--fm-vw, 1vw) * 4.2) !important;
      font-size: min(max(15px, calc(var(--fm-vw, 1vw) * 4.4)), 22px) !important;
      padding-left: calc(var(--fm-vw, 1vw) * 3) !important;
      padding-right: calc(var(--fm-vw, 1vw) * 3) !important;
    }

    html.force-mobile.mobile-short-screen .auth-visual {
      padding-top: calc(var(--fm-vh, 1vh) * 9.5) !important;
    }

    html.force-mobile.mobile-short-screen .auth-brand-row {
      margin-bottom: calc(var(--fm-vh, 1vh) * 2.4) !important;
    }

    html.force-mobile.mobile-short-screen .auth-brand-mark {
      width: min(max(calc(var(--fm-vw, 1vw) * 17), 58px), 92px) !important;
      height: min(max(calc(var(--fm-vw, 1vw) * 17), 58px), 92px) !important;
    }

    html.force-mobile.mobile-short-screen .auth-brand-copy h1 .brand-title {
      font-size: min(max(22px, calc(var(--fm-vw, 1vw) * 6.4)), 32px) !important;
    }

    html.force-mobile.mobile-short-screen .auth-brand-copy h1 .brand-subtitle {
      font-size: min(max(17px, calc(var(--fm-vw, 1vw) * 5)), 25px) !important;
    }

    html.force-mobile.mobile-short-screen .auth-brand-copy p {
      font-size: min(max(9px, calc(var(--fm-vw, 1vw) * 2.8)), 13px) !important;
    }

    html.force-mobile.mobile-short-screen .auth-panel {
      padding-top: calc(var(--fm-vh, 1vh) * 3) !important;
      padding-bottom: calc(var(--fm-vh, 1vh) * 2) !important;
    }

    html.force-mobile.mobile-short-screen #loginForm {
      margin-top: calc(var(--fm-vh, 1vh) * 2.2) !important;
    }

    html.force-mobile.mobile-short-screen #loginForm .auth-form-grid {
      row-gap: calc(var(--fm-vh, 1vh) * 1.8) !important;
    }

    html.force-mobile.mobile-short-screen .auth-form .auth-aux {
      margin-top: calc(var(--fm-vh, 1vh) * 2.2) !important;
      margin-bottom: calc(var(--fm-vh, 1vh) * 2.2) !important;
    }



    /* ── 手机注册页滚动修复 V4 ──
       登录页尽量一屏显示；注册页字段较多时，让整个手机页面滚动，
       而不是只滚动登录窗体内部。这样手感更接近普通手机页面。 */
    html.force-mobile .auth-page {
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      padding-bottom: calc(var(--fm-vh, 1vh) * 8) !important;
      scrollbar-width: none;
    }

    html.force-mobile .auth-page::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    html.force-mobile .auth-panel-wrap {
      flex: 0 0 auto !important;
      min-height: auto !important;
      padding-bottom: calc(var(--fm-vh, 1vh) * 5) !important;
    }

    html.force-mobile .auth-panel {
      margin-bottom: calc(var(--fm-vh, 1vh) * 3) !important;
    }

    html.force-mobile #registerForm {
      margin-top: calc(var(--fm-vh, 1vh) * 2.2) !important;
    }

    html.force-mobile #registerForm .auth-form-grid {
      row-gap: calc(var(--fm-vh, 1vh) * 1.75) !important;
    }

    html.force-mobile #registerForm .auth-aux {
      white-space: normal !important;
      align-items: flex-start !important;
      gap: calc(var(--fm-vw, 1vw) * 2.4) !important;
      margin-top: calc(var(--fm-vh, 1vh) * 2.2) !important;
      margin-bottom: calc(var(--fm-vh, 1vh) * 2.2) !important;
    }

    html.force-mobile #registerForm .auth-switch-link {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    /* ── 手机/平板竖屏注册页占满全屏（2026-08-15 用户要求）──
       点击"注册"（html 有 auth-register 类，login.js switchAuthTab 切换）时：
       隐藏顶部 logo 区与主题切换按钮，给注册对话框让路，对话框占满全屏高度。
       真手机与平板竖屏（均带 force-mobile）生效；PC（无 force-mobile）不受影响。
       手机横屏 ld-login-ls 同样生效。 */
    html.force-mobile.auth-register .auth-visual,
    html.force-mobile.auth-register .auth-theme-switch {
      display: none !important;
    }

    html.force-mobile.auth-register .auth-panel-wrap {
      flex: 1 1 auto !important;
      margin-top: 0 !important;              /* 覆盖竖屏 -8 与横屏 ld-login-ls 的 -8 上移 */
      padding-top: calc(var(--fm-vh, 1vh) * 2);
      padding-bottom: calc(var(--fm-vh, 1vh) * 4);
      align-items: stretch;
    }

    /* 平板竖屏注册页：0% 基础上再上移 1.5%（2026-08-15 用户实测微调 2.0% → 1.5%） */
    html.force-mobile.ld-login-tablet.auth-register .auth-panel-wrap {
      margin-top: calc(var(--fm-vh, 1vh) * -1.5) !important;
    }

    html.force-mobile.auth-register .auth-panel {
      height: 100% !important;
      max-height: none !important;
      margin-bottom: 0 !important;
      display: flex;
      flex-direction: column;
    }

    /* 注册内容多时整页滚动（V4 机制），面板内标题区固定、表单区自然排布 */
    html.force-mobile.auth-register .auth-panel-top {
      flex: 0 0 auto;
    }

    html.force-mobile.auth-register .auth-form {
      flex: 1 1 auto;
    }