@charset "UTF-8";
:root{color-scheme:light;--white:#fff;--ink:#f9faff;--violet:#c0a5ff;--line:rgba(255,255,255,.57);font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#8c93a1;color:var(--ink);min-width:320px;min-height:100svh;overflow-x:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #f4eaff;outline-offset:4px}input:focus-visible{outline:none}.icon-library,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{pointer-events:none}
/* A freestanding sheet of glass, lit by a soft, silver studio. */
body { position: relative; isolation: isolate; }
.studio-light {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at 13% -9%, #eff3f9b3 0, #dae1ed42 18%, transparent 39%),
    radial-gradient(ellipse at 77% 75%, #dce3ef61 0, transparent 42%),
    radial-gradient(ellipse at 9% 54%, #5963725c 0, transparent 43%),
    linear-gradient(117deg, #9ba4b2 0%, #959daa 34%, #788190 72%, #858e9f 100%);
}
.studio-light::before {
  content: ""; position: absolute; inset: -20%; opacity: .7; filter: blur(24px);
  background: linear-gradient(119deg, transparent 17%, #f8fbff63 23%, transparent 29%, #edf3ff26 34%, transparent 43%);
}
.studio-light::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 44%, #e2e7f322, transparent 45%), linear-gradient(0deg, #535f7a26, transparent 34%);
}
.studio-floor {
  position: fixed; left: -10%; right: -10%; top: 71.5%; bottom: 0;
  z-index: -1; pointer-events: none; filter: blur(5px);
  background:
    radial-gradient(ellipse 42% 7% at 78% 5%, #fbfcffad, transparent 90%),
    radial-gradient(ellipse 30% 6% at 27% 22%, #f8f9ff8c, transparent 82%),
    linear-gradient(179deg, transparent, #e2e7f04d 4%, #bec8dc21 9%, #6471871c 18%, #dce3f23d 24%, #d3ddf012 32%, #6d7a9026 48%, #bac4d538 82%, #b4bfce24);
}
.studio-floor::before {
  content: ""; position: absolute; left: 15%; right: 8%; top: 15%; height: 44%;
  background: linear-gradient(171deg, transparent 35%, #f8f9ff57 40%, transparent 47%);
  filter: blur(7px);
}
.studio-floor::after {
  content: ""; position: absolute; inset: 34% 5% -25%; opacity: .65;
  background: linear-gradient(105deg, transparent 31%, #f1f3ff52 34%, transparent 39%, transparent 61%, #eff1ff59 63%, transparent 67%);
  filter: blur(14px);
}
.page-nav {
  position: absolute; top: 30px; left: 48px; right: 48px; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end;
  font-size: 11px; letter-spacing: 2px; color: #f7f9ffe0;
}
.page-nav a { font-size: 13px; letter-spacing: 1px; }
.page-nav .nav-brand { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.page-nav .home-icon { -webkit-mask-image: url("/assets/images/home-outline.svg"); mask-image: url("/assets/images/home-outline.svg"); }
.page-nav .home-link { transition: color 280ms ease; }
.page-nav .home-link:is(:hover, :focus-visible) { color: #7851b5; background: transparent; box-shadow: none; }
.page-nav .home-link:is(:hover, :focus-visible) .home-icon { background: currentColor; }
.nav-slash { opacity: .6; margin: 0 13px; }
.page-footer {
  position: absolute; bottom: 28px; left: 48px; right: 48px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 1.8px; color: #f0f3ffd1; pointer-events: none;
}
.page-footer b { font-weight: 400; margin: 0 8px; }
.page-footer > span:first-child > i {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 9px #fff; margin-right: 12px;
}
.page-footer > span:last-child { font-size: 9px; letter-spacing: 1.4px; }
.footer-cross { font-style: normal; padding: 0 15px; font-size: 14px; }
.login-stage { position: relative; width: 100%; height: 100svh; min-height: 620px; overflow: hidden; }
.glass-anchor {
  --glass-scale: .9;
  position: absolute; width: 548px; height: 746px; left: 50%; top: 47%;
  transform: translate(-50%, -50%) scale(var(--panel-scale, .9)); transform-origin: center;
}
.holo-panel {
  position: relative; width: 548px; height: 746px;
  border: 1px solid #f4f6ffc7; border-radius: 9px;
  background: linear-gradient(117deg, #e9eefc24, #e2e8f214 40%, #e4eaff0c 65%, #e6ecff24);
  box-shadow: inset 2px 0 2px #fff8, inset -1px 0 2px #fff8, inset 0 0 28px #edf0ff12, 0 0 2px #fff9, 0 0 18px #e6eaff24;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  text-shadow: 0 1px 6px #6b778929;
  transform: perspective(1500px) rotateY(calc(12deg + var(--pointer-x, 0deg))) rotateX(calc(1deg + var(--pointer-y, 0deg))) scale(var(--glass-scale));
  transition: transform .45s ease-out;
}
.holo-panel::before, .holo-panel::after {
  content: ""; position: absolute; pointer-events: none; left: -2px; width: 3px;
  background: #fff; border-radius: 50%; box-shadow: 0 0 5px #fff, 0 0 13px 2px #ebecffb3;
}
.holo-panel::before { top: 47px; height: 75px; }
.holo-panel::after { bottom: 65px; height: 330px; background: linear-gradient(transparent, #fff 34%, #fff 92%, transparent); }
.glass-edge-light {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 170px 3px at 91% 0%, #fff, transparent), radial-gradient(ellipse 3px 160px at 100% 88%, #fff, transparent), radial-gradient(ellipse 240px 3px at 49% 100%, #fff, transparent);
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #e0ddff);
}
.panel-header{position:relative;padding:37px 44px 0}.archive-wordmark{display:inline-block;font-size:34px;font-weight:600;letter-spacing:-1.5px;line-height:.98}.archive-wordmark span{letter-spacing:-2px}.brand-motto{position:absolute;right:28px;top:44px;text-align:right;font-family:Consolas,monospace;font-size:9px;letter-spacing:1.65px;line-height:1.6;color:#fffD}.brand-motto i{display:block;margin:10px 0 0 auto;background:#fff9;width:28px;height:1px}.panel-header h1{font-size:13px;font-weight:400;letter-spacing:1.8px;margin:13px 0 0;height:20px;line-height:20px}.panel-header h1 span{font:9px Consolas,monospace;letter-spacing:1.4px;margin-left:9px;color:#f4f5ffbf}
.panel-viewport{position:relative;margin:24px auto 0;width:358px;height:517px}.panel-view{width:100%;position:absolute;inset:0}.panel-view[hidden]{display:none!important}.input-shell{position:relative;display:flex;align-items:center;gap:14px;width:100%;height:43px;padding:0 15px;border:1px solid var(--line);border-radius:4px;background:#edf0ff04;transition:background .2s,border-color .2s,box-shadow .2s}.input-shell:focus-within{border-color:#f8f3ff;background:#f7eaff12;box-shadow:0 0 15px #d5bfff23,inset 0 0 12px #e8d8ff0d}.input-shell:has([aria-invalid="true"]){border-color:#ffeadc;box-shadow:0 0 12px #ffe0d426}.input-shell>svg{width:21px;height:21px}.input-shell input{border:0;background:transparent;min-width:0;width:100%;padding:0;outline:none;height:100%;font-size:13px;font-weight:400;letter-spacing:1.2px;color:white;caret-color:#f5dfff}.input-shell input::placeholder{color:#fcfcffd4;opacity:1}.input-shell input:-webkit-autofill{-webkit-text-fill-color:white;transition:background-color 99999s ease-in-out 0s}.credential-group{position:relative;display:grid;gap:12px}.field-corner{width:9px;height:9px;position:absolute;pointer-events:none;opacity:.8}.top-left{left:-25px;top:-12px;border-top:1px solid white;border-left:1px solid white}.bottom-right{right:-25px;bottom:-12px;border-right:1px solid white;border-bottom:1px solid white}.input-caret{height:14px;width:1px;display:block;background:#fff7;margin-right:8px}.input-shell:focus-within .input-caret{opacity:0}.eye-button{flex-shrink:0;border:0;padding:0;background:none;width:23px;height:30px;display:grid;place-items:center;color:#fffC}.eye-button[aria-pressed="true"]{color:#e2caff}.eye-button svg{width:21px;height:21px}
.form-options{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.6px;margin:12px 5px 14px}.check-label{display:flex;align-items:center;gap:5px;cursor:pointer}input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:14px;height:14px;flex:0 0 14px;margin:0;border:1px solid #fffd;border-radius:50%;background:transparent;cursor:pointer;display:inline-grid;place-items:center;vertical-align:middle}input[type="checkbox"]:checked{border-color:#e9dfff;background:#c7aff3;box-shadow:0 0 9px #dcc7ff66}input[type="checkbox"]:checked:after{content:"";width:6px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translateY(-1px)}.primary-button{position:relative;display:flex;align-items:center;justify-content:center;height:47px;width:calc(100% - 10px);margin:0 5px;border:1px solid #fffc;border-radius:3px;background:linear-gradient(120deg,#f3f4fc,#eeeff8);color:#252634;font-size:16px;letter-spacing:4px;box-shadow:0 0 22px #fff1;transition:background .2s,box-shadow .2s,transform .1s}.primary-button svg{position:absolute;right:22px;width:28px;stroke-width:1.3;transition:transform .2s}.primary-button:hover{background:#fff;box-shadow:0 0 25px #e6d6ff6b}.primary-button:hover svg{transform:translateX(4px)}.primary-button:active{transform:translateY(2px);background:#e5d7ff}.signup-prompt{text-align:center;font-size:10px;letter-spacing:.8px;color:#fafaffb8;margin:11px 0 0}.text-button{border:0;background:none;padding:0 3px;color:white;font-size:11px;letter-spacing:.8px}.text-button span{padding-left:4px}.text-button:hover,.form-options a:hover,.agreement-line button:hover{color:#eee3ff;text-shadow:0 0 8px #e2cdff}.method-divider{display:flex;align-items:center;gap:12px;color:#fafaffe0;font-size:10px;letter-spacing:2px;margin:15px 5px 12px}.method-divider:before,.method-divider:after{content:"";height:1px;background:#fff5;flex:1}.wechat-button{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 auto;width:292px;height:39px;border:1px solid var(--line);border-radius:4px;background:#ffffff03;letter-spacing:2px;font-size:14px;transition:background .2s,transform .1s}.wechat-button svg{width:27px;height:24px}.wechat-button:hover,.code-button:hover,.return-button:hover{background:#c5b2ee44;border-color:#f1e3ff}.wechat-button:active,.code-button:active,.return-button:active{transform:translateY(2px)}.agreement-line{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin:15px -6px 0;color:#fffC;font-size:10px;line-height:1.9;letter-spacing:.1px}.agreement-line input{width:12px;height:12px;flex-basis:12px;margin-top:4px;border-color:#fff9}.agreement-line div{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px}.agreement-line label{cursor:pointer}.agreement-line button{font:inherit;border:0;padding:0;background:none;color:#fff;white-space:nowrap}
.view-intro{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1px;padding-bottom:22px;color:#fffE}.view-intro small{font:8px Consolas,monospace;color:#fffa;letter-spacing:1.1px}.register-fields{display:grid;gap:14px}.register-fields .input-shell{height:47px}.verification-row{display:flex;gap:9px}.verification-row .input-shell{min-width:0;flex:1;padding-right:10px}.verification-row .input-shell input{letter-spacing:.5px}.code-button{flex-shrink:0;width:114px;border:1px solid var(--line);border-radius:4px;background:#fff0;font-size:11px;letter-spacing:1px;transition:all .2s}.field-hint{font-size:10px;letter-spacing:1px;color:#fffa;margin:17px 0 24px}.register-agreement{margin:0 0 18px}.register-agreement div{max-width:305px}.register-fields+.field-hint+.agreement-line+.primary-button{height:47px}.legal-meta{display:flex;justify-content:space-between;font:9px Consolas,monospace;letter-spacing:1.4px;padding-bottom:18px;border-bottom:1px solid #fff4}.legal-document{height:402px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#eae1ff80 #fff0;padding:16px 14px 10px 0;font-size:12px;line-height:1.95;color:#fff;overflow-wrap:anywhere;text-shadow:0 1px 2px #60657755}.legal-document :is(p,div,span,h1,h2,h3,h4,li){color:inherit!important;background:transparent!important;font-family:inherit!important;max-width:100%}.legal-document p{margin:0 0 13px}.legal-document :is(h1,h2,h3,h4){font-size:14px;font-weight:500;letter-spacing:.6px;margin:18px 0 10px}.legal-document h1:first-child,.legal-document h2:first-child{margin-top:0}.legal-document ul,.legal-document ol{padding-left:20px}.legal-document a{text-decoration:underline}.return-button{display:flex;justify-content:center;align-items:center;gap:7px;width:100%;height:43px;margin-top:18px;border:1px solid var(--line);border-radius:4px;background:#ffffff08;font-size:12px;letter-spacing:1px;transition:all .2s}.return-button>span:first-child{margin-right:7px}.wechat-frame{height:355px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;text-align:center}.wechat-frame iframe{border:0;height:370px;width:320px;background:#fff;border-radius:4px}.wechat-hint{text-align:center;font-size:11px;color:#fffc;letter-spacing:1px}.wechat-view .return-button{margin-top:28px}
.form-status{position:absolute;left:26px;right:26px;bottom:48px;z-index:4;border:1px solid #efe5ff70;background:#696574ef;box-shadow:0 4px 20px #44445122;border-radius:4px;padding:9px 14px;line-height:1.6;color:#fff;font-size:12px;text-align:center;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .2s}.form-status.is-visible{opacity:1;transform:translateY(0);pointer-events:none}.form-status[data-kind="success"]{background:#6a7b78ef}.laser-scan{pointer-events:none;position:absolute;top:139px;left:1px;right:1px;height:2px;opacity:0;background:#fff;box-shadow:0 0 5px 1px #fff,0 0 18px 4px #d9bdff,0 0 46px 12px #c3a5f98a;z-index:5}.laser-scan:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:65px;background:linear-gradient(0deg,#ccb0ff30,transparent)}.scan-grain{position:absolute;inset:139px 1px 45px;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,#d5b8ff11 0px,#d5b8ff11 1px,transparent 1px,transparent 4px);z-index:3}/* The laser and content masks share one measured position, including centered views. */
.is-erasing :is(.panel-header, .panel-viewport) { animation: content-erase .24s ease-in forwards; }
.is-revealing :is(.panel-header, .panel-viewport) {
  clip-path: polygon(
    -32px -16px, calc(100% + 32px) -16px,
    calc(100% + 32px) max(-16px, calc(var(--scan-y) - var(--scan-offset))),
    -32px max(-16px, calc(var(--scan-y) - var(--scan-offset)))
  );
}
.is-revealing .laser-scan { top: var(--scan-y); opacity: var(--scan-opacity); }
.is-revealing .scan-grain {
  inset: 0 1px;
  opacity: calc(var(--scan-opacity) * .45);
  clip-path: polygon(0 0, 100% 0, 100% var(--scan-y), 0 var(--scan-y));
}
.is-transitioning :is(.panel-header, .panel-viewport) { pointer-events: none; }
@keyframes content-erase{0%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(3px);transform:translateY(-3px)}}
/* Match the reference's generous top margin and compact, centered controls. */
.panel-header { padding: 44px 54px 0; }
.brand-motto { right: 28px; top: 59px; }
.panel-viewport { margin-top: 24px; }

.form-options { margin-left: 0; margin-right: 0; }
.primary-button { width: 100%; margin-left: 0; margin-right: 0; }
.method-divider { margin-left: 0; margin-right: 0; }



/* Phones use full-size native controls rather than a shrunken desktop scene. */
@media (max-width: 700px) {
  .page-nav { top: 23px; left: 22px; right: 22px; font-size: 8px; letter-spacing: 1px; }
  .page-nav a { font-size: 11px; }
  .nav-slash { margin: 0 5px; }
  .page-footer { left: 20px; right: 20px; bottom: 22px; justify-content: center; font-size: 9px; letter-spacing: .7px; }
  .page-footer > span:last-child { display: none; }
  .login-stage { height: auto; min-height: 100svh; padding: 72px 24px 66px; }
  .glass-anchor { position: relative; width: 100%; max-width: 440px; height: auto; left: auto; top: auto; margin: 0 auto; transform: none; }
  .holo-panel { width: 100%; height: auto; min-height: 704px; padding-bottom: 48px; transform: scale(var(--glass-scale)); background: linear-gradient(120deg, #e5ebf224, #dbe3f013 60%, #e2e8f526); }
  .panel-header { padding: 24px 25px 0; }
  .archive-wordmark { font-size: 29px; }
  .brand-motto { top: 38px; right: 22px; font-size: 7px; letter-spacing: 1px; }
  .brand-motto i { width: 22px; }
  .panel-header h1 { margin-top: 10px; font-size: 13px; letter-spacing: 1.4px; }
  .panel-header h1 span { font-size: 8px; margin-left: 7px; letter-spacing: 1px; }
  .panel-viewport { width: calc(100% - 48px); height: auto; min-height: 516px; margin-top: 20px; }
  .panel-view { position: relative; inset: auto; }
  .input-shell { height: 44px; gap: 10px; padding: 0 12px; }
  .credential-group { gap: 10px; }
  .input-shell input { font-size: 16px; letter-spacing: 0; }
  .input-shell > svg { width: 20px; height: 20px; }
  .field-corner { width: 6px; height: 6px; }
  .top-left { left: -12px; top: -9px; }
  .bottom-right { right: -12px; bottom: -9px; }
  
  
  .form-options { font-size: 11px; margin-top: 10px; margin-bottom: 10px; }
  .primary-button { height: 44px; font-size: 16px; }
  .primary-button svg { width: 24px; right: 18px; }
  .signup-prompt { font-size: 11px; margin-top: 10px; }
  .text-button { font-size: 12px; }
  .method-divider { font-size: 10px; margin-top: 13px; margin-bottom: 11px; }
  .wechat-button { width: 90%; height: 40px; font-size: 14px; }
  .agreement-line { margin: 12px -7px 0; font-size: 10px; gap: 5px; }
  .agreement-line div { justify-content: center; }
  
  
  
  .view-intro { font-size: 12px; padding-bottom: 20px; letter-spacing: 0; }
  .view-intro small { font-size: 7px; letter-spacing: .6px; }
  .register-fields { gap: 14px; }
  .register-fields .input-shell { height: 46px; }
  .verification-row { gap: 8px; }
  .code-button { width: 94px; font-size: 11px; letter-spacing: 0; }
  .verification-row .input-shell { padding: 0 9px; gap: 6px; }
  .verification-row input { font-size: 14px; }
  .field-hint { font-size: 10px; letter-spacing: 0; margin: 18px 0 22px; }
  .register-agreement { margin: 0 -7px 18px; }
  .legal-meta { font-size: 8px; letter-spacing: .8px; }
  .legal-document { height: 416px; font-size: 14px; line-height: 1.95; padding-right: 9px; }
  .return-button { font-size: 13px; height: 45px; }
  .form-status { left: 14px; right: 14px; bottom: 46px; font-size: 12px; }
  .laser-scan { top: 140px; }
  .scan-grain { top: 140px; }
  .studio-floor { top: 74%; }
}
@media (max-width: 360px) {
  .login-stage { padding-left: 17px; padding-right: 17px; }
  .page-nav { left: 18px; right: 18px; font-size: 7px; letter-spacing: .6px; }
  .panel-header { padding-left: 21px; }
  .archive-wordmark { font-size: 28px; }
  .brand-motto { right: 18px; font-size: 6px; }
  .panel-viewport { width: calc(100% - 38px); }
  .code-button { width: 82px; font-size: 10px; }
  .verification-row .input-shell > svg { display: none; }
  .agreement-line { font-size: 9px; gap: 4px; }
  
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Physical glass is rendered behind native, full-resolution HTML controls. */
#glassScene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.holo-panel { text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.glass-ready .holo-panel {
  transform-origin: 0 0; transition: none; border-color: #f3f7ff85;
  background: linear-gradient(110deg, #46577128, #50617b33 60%, #68799024);
  box-shadow: inset 0 0 20px #e6eeff09;
}
.glass-ready .holo-panel::before, .glass-ready .holo-panel::after { opacity: .75; }
.holo-panel :is(input, button, a, h1, p, label, .legal-document) { text-shadow: none; }
.input-shell input { font-weight: 500; }
.input-shell input::placeholder { color: #fff; }
:is(.form-options, .signup-prompt, .method-divider, .agreement-line, .field-hint) { color: #fff; font-weight: 500; }

.legal-document { text-shadow: none; }
@media (min-width: 701px) {
  .glass-anchor {
    width: clamp(440px, 36vw, 548px); height: clamp(616px, calc(100svh - 158px), 780px);
    transform: translate(-50%, -50%);
  }
  .holo-panel { width: 100%; height: 100%; }
  .panel-header { padding: 36px 44px 0; }
  .archive-wordmark { font-size: 36px; font-weight: 600; }
  .panel-header h1 { font-size: 16px; font-weight: 500; }
  .panel-header h1 span { font-size: 10px; color: #f4f7ff; }
  .brand-motto { top: 49px; right: 27px; font-size: 9px; color: #fff; }
  .panel-viewport { width: 73%; height: calc(100% - 196px); margin-top: 22px; }
  .input-shell { height: 46px; gap: 12px; }
  .input-shell input { font-size: 16px; letter-spacing: .6px; }
  
  
  .form-options { font-size: 13px; margin-top: 12px; margin-bottom: 12px; }
  .primary-button { height: 48px; font-size: 18px; }
  .signup-prompt { font-size: 12px; margin-top: 12px; }
  .text-button { font-size: 13px; }
  .method-divider { font-size: 11px; margin-top: 14px; margin-bottom: 12px; }
  .wechat-button { width: 86%; height: 42px; font-size: 16px; }
  .agreement-line { font-size: 11px; line-height: 1.7; margin-top: 13px; letter-spacing: 0; }
  .register-agreement { margin-top: 0; margin-bottom: 18px; }
  .legal-document { height: calc(100% - 89px); font-size: 14px; }
  
}
/* Short desktop windows keep the text size while tightening only the spacing. */
@media (min-width: 701px) and (max-height: 820px) {
  .panel-header { padding-top: 22px; padding-left: 36px; }
  .archive-wordmark { font-size: 30px; }
  .panel-header h1 { margin-top: 9px; font-size: 15px; }
  .brand-motto { top: 36px; font-size: 8px; }
  .panel-viewport { margin-top: 16px; height: calc(100% - 168px); }
  .credential-group { gap: 9px; }
  .input-shell { height: 38px; padding: 0 12px; }
  
  
  .form-options { margin-top: 9px; margin-bottom: 9px; font-size: 12px; }
  .primary-button { height: 40px; font-size: 16px; }
  .signup-prompt { margin-top: 10px; }
  .method-divider { margin-top: 12px; margin-bottom: 10px; }
  .wechat-button { height: 36px; font-size: 15px; }
  .agreement-line { margin-top: 10px; font-size: 11px; }
  .view-intro { padding-bottom: 14px; }
  .register-fields { gap: 10px; }
  .register-fields .input-shell { height: 43px; }
  .field-hint { margin: 14px 0 16px; font-size: 11px; }
  .register-agreement { margin: 0 0 15px; }
  .register-fields + .field-hint + .agreement-line + .primary-button { height: 40px; }
  
}
@media (max-width: 700px) {
  .glass-ready .holo-panel { background: linear-gradient(110deg, #46577126, #50617b30 60%, #68799020); }
  .input-shell input { font-weight: 500; }
  .agreement-line { color: #fff; }
}

/* Frost only the backdrop. Native text and controls stay on a sharp front layer. */
.holo-panel, .glass-ready .holo-panel {
  isolation: isolate;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.glass-frost {
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 6px;
  pointer-events: none;
  background: linear-gradient(115deg, #59677dad, #46546c9e);
  backdrop-filter: blur(24px) saturate(.8);
  -webkit-backdrop-filter: blur(24px) saturate(.8);
  box-shadow: inset 0 0 35px #e7efff14;
}
/* Keep the login heading and form together in the middle of the existing glass. */
.holo-panel[data-view="login"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 40px 0;
}
.holo-panel[data-view="login"] .panel-header {
  flex-shrink: 0;
  width: 76%;
  margin: 0 auto;
  padding: 0;
}
.holo-panel[data-view="login"] .brand-motto { right: 0; top: 12px; }
.holo-panel[data-view="login"] .panel-viewport {
  flex-shrink: 0;
  width: 76%;
  height: auto;
  min-height: 0;
  margin: 0 auto;
}
.holo-panel[data-view="login"] .panel-view { position: relative; inset: auto; }
#loginForm .credential-group { gap: 12px; }
#loginForm .input-shell { height: 46px; }
#loginForm .input-shell input { font-size: 16px; font-weight: 500; }
#loginForm .form-options { margin: 16px 0 14px; font-size: 13px; }
#loginForm .primary-button { height: 46px; font-size: 18px; }
#loginForm .signup-prompt { margin-top: 14px; font-size: 13px; }
#loginForm .text-button { font-size: 14px; }
#loginForm .method-divider { margin: 18px 0 12px; font-size: 12px; }
#loginForm .wechat-button { width: 100%; height: 44px; font-size: 16px; }
.agreement-line {
  margin: 22px 0 0;
  gap: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
}
.agreement-line > div { display: block; min-width: 0; max-width: 100%; text-align: left; }
.agreement-line label { margin-right: 4px; }
.agreement-line .agreement-links { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.agreement-line button { font-weight: 600; }
.agreement-line button:hover { color: #e4d5ff; text-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.agreement-line input { width: 16px; height: 16px; flex-basis: 16px; margin-top: 5px; border-color: #fff; }
.register-agreement { margin: 0 0 20px; }
@media (max-width: 700px) {
  .holo-panel[data-view="login"] { padding: 48px 0; }
  .holo-panel[data-view="login"] .panel-header,
  .holo-panel[data-view="login"] .panel-viewport { width: calc(100% - 48px); }
  .holo-panel[data-view="login"] .brand-motto { top: 10px; }
  #loginForm .form-options { font-size: 12px; }
  .register-agreement { margin-left: 0; margin-right: 0; }
}
@media (max-width: 360px) {
  .holo-panel[data-view="login"] .panel-header,
  .holo-panel[data-view="login"] .panel-viewport { width: calc(100% - 38px); }
  .agreement-line { font-size: 15px; }
}

/* Validation messages stay below the enlarged agreement text. */
.form-status { top: calc(100% + 12px); bottom: auto; }

.consent-dialog { width: min(440px, calc(100% - 40px)); max-height: calc(100% - 40px); padding: 28px; border: 1px solid #edf1ff99; border-radius: 12px; background: #566176; color: #fff; box-shadow: 0 20px 70px #17203466; }
.consent-dialog::backdrop { background: #17203480; backdrop-filter: blur(6px); }
.consent-dialog h2 { margin: 0 0 16px; font-size: 20px; font-weight: 500; }
.consent-dialog p { margin: 0; font-size: 16px; line-height: 1.9; }
.consent-dialog [data-consent-go] { padding: 0; border: 0; background: none; color: #e4d5ff; font: inherit; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 12px; margin-top: 26px; }
.consent-actions button { flex: 1; min-height: 44px; border: 1px solid #edf1ff99; border-radius: 5px; background: transparent; color: #fff; font-size: 16px; }
.consent-actions #consentAccept { background: #f0edf8; color: #30364a; }
.consent-actions button:hover { box-shadow: 0 0 16px #e4d5ff40; }