/* ==========================================================
   0. 变量与重置
   ========================================================== */
:root{
  --cyan:#7fc4ff;
  --violet:#9b7bff;
  --ease-spring: cubic-bezier(.34, 1.32, .48, 1);
  --ease-drop:   cubic-bezier(.5, 0, .78, .28);
  --ease-fly:    cubic-bezier(.22, 1.06, .36, 1);
  --ease-depth:  cubic-bezier(.4, 0, .6, 1);
  --ease-slide:  cubic-bezier(.45, 0, .25, 1);
  --ease-path:   cubic-bezier(.62, .02, .25, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html{
  height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(ellipse 110% 90% at 76% 48%,
      #0b2f66 0%, #071c46 26%, #030c25 56%, #01040e 100%);
  background-attachment:fixed;
  color:#eaf2ff;
  font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
              "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}

/* ==========================================================
   1. 星空 + 暗角
   ========================================================== */
.stars-layer{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:1; pointer-events:none; overflow:hidden;
  transition:opacity .9s ease;
}
.star{
  position:absolute; border-radius:50%;
  animation-name:twinkle;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  will-change:opacity;
}
@keyframes twinkle{ 0%,100%{opacity:.25;} 50%{opacity:1;} }
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(0,0,0,0) 42%, rgba(0,0,0,.62) 100%);
  transition:opacity .9s ease;
}

/* ==========================================================
   2. CNT 背景层
   ========================================================== */
.cnt-bg{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:0; visibility:hidden; overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 40%,
      #16264a 0%, #0a1530 45%, #03081a 100%);
  transition:opacity 1.1s ease, visibility 0s linear 1.1s;
}
.cnt-bg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:blur(24px) brightness(.55) saturate(1.1);
  transform:scale(1.12);
  transition:filter 1.4s var(--ease-slide),
             transform 1.4s var(--ease-slide);
  will-change:filter, transform;
}
.cnt-bg-overlay{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 50%,
    rgba(60,110,220,.10) 0%, rgba(6,16,40,.55) 55%, rgba(2,6,20,.85) 100%);
}
body.cnt-hero-mode .cnt-bg,
body.content-mode.cnt-context .cnt-bg{
  opacity:1; visibility:visible;
  transition:opacity 1.1s ease, visibility 0s;
}
body.cnt-hero-mode .cnt-bg-img,
body.content-mode.cnt-context .cnt-bg-img{
  filter:blur(0) brightness(.7) saturate(1.05);
  transform:scale(1);
}
body.cnt-hero-mode .stars-layer,
body.content-mode.cnt-context .stars-layer{
  opacity:.18;
}

/* ==========================================================
   3. 黑洞
   ========================================================== */
.blackhole{
  position:fixed;
  left:50%; top:50%;
  width:58vmin; height:58vmin;
  margin-left:-29vmin;
  margin-top:-29vmin;
  transform:translate(28vw, 4vh) scale(1);
  opacity:1;
  transition:transform .9s var(--ease-path),
             opacity  .5s ease, filter .5s ease;
  z-index:55;
  pointer-events:none;
  will-change:transform, opacity, filter;
}

body.c-to-top .blackhole{
  transform:translate(0, -38vh) scale(.16);
  pointer-events:none;
}
body.bh-gone .blackhole{
  transform:translate(0, -38vh) scale(.02);
  opacity:0;
  filter:blur(20px);
}

.blackhole > div{
  position:absolute; left:50%; top:50%;
  border-radius:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.g1{ width:150%;height:150%;
  background:radial-gradient(circle,rgba(96,158,255,.42) 0%,rgba(70,120,235,.18) 34%,rgba(40,80,190,0) 68%);
  filter:blur(14px); animation:breathe 6s ease-in-out infinite; }
.g2{ width:230%;height:230%;
  background:radial-gradient(circle,rgba(150,100,255,.22) 0%,rgba(80,80,220,.10) 40%,rgba(0,0,0,0) 70%);
  filter:blur(26px); animation:breathe 9s ease-in-out infinite reverse; }
.g3{ width:330%;height:330%;
  background:radial-gradient(circle,rgba(40,90,200,.15) 0%,rgba(20,50,140,.06) 45%,rgba(0,0,0,0) 72%);
  filter:blur(42px); }
.halo{ width:98%;height:98%;
  background:radial-gradient(circle,rgba(0,0,0,0) 56%,rgba(130,190,255,.45) 68%,rgba(170,130,255,.22) 78%,rgba(0,0,0,0) 90%);
  filter:blur(7px); animation:breathe 7s ease-in-out infinite; }
.d1{ width:132%;height:132%;
  background:conic-gradient(from 0deg,
    rgba(120,200,255,0) 0deg,rgba(140,210,255,.9) 45deg,rgba(185,150,255,.78) 95deg,
    rgba(120,200,255,0) 150deg,rgba(120,200,255,0) 185deg,rgba(110,180,255,.62) 255deg,
    rgba(195,145,255,.88) 300deg,rgba(120,200,255,0) 352deg,rgba(120,200,255,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 50%,#000 56%,#000 72%,transparent 79%);
  mask:radial-gradient(circle,transparent 50%,#000 56%,#000 72%,transparent 79%);
  filter:blur(2px); animation:spin 26s linear infinite; }
.d2{ width:164%;height:164%;
  background:conic-gradient(from 180deg,
    rgba(170,225,255,0) 0deg,rgba(205,238,255,.5) 60deg,rgba(140,180,255,0) 130deg,
    rgba(170,225,255,0) 235deg,rgba(215,180,255,.55) 300deg,rgba(170,225,255,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 60%,#000 72%,transparent 80%);
  mask:radial-gradient(circle,transparent 54%,#000 60%,#000 72%,transparent 80%);
  filter:blur(3px); animation:spin 17s linear infinite reverse; }
.core{ width:70%;height:70%;
  background:radial-gradient(circle,#000 0%,#000 58%,rgba(0,0,0,.88) 76%,rgba(0,0,0,0) 100%); }
@keyframes spin{ to{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.78;}
  50%{transform:translate(-50%,-50%) scale(1.06);opacity:1;}
}

/* ==========================================================
   4. C 元素
   ========================================================== */
.c-element{
  position:fixed;
  left:50%; top:50%;
  width:58vmin; height:58vmin;
  margin-left:-29vmin;
  margin-top:-29vmin;
  transform:translate(28vw, 4vh) scale(1.15);
  transform-origin:center center;
  transition:transform .9s var(--ease-path), filter .35s ease;
  z-index:65;
  pointer-events:none;
  will-change:transform;
  filter:
    drop-shadow(0 0 3px rgba(210,235,255,.9))
    drop-shadow(0 0 12px rgba(150,200,255,.7))
    drop-shadow(0 0 30px rgba(100,155,255,.45));
  animation:cAmbient 5.5s ease-in-out infinite;
}
body.c-to-top .c-element{
  transform:translate(0, -38vh) scale(.16);
  pointer-events:auto;
  cursor:pointer;
}
body.c-to-top .c-element::after{
  content:''; position:absolute; left:-50%; top:-50%;
  width:200%; height:200%; border-radius:50%;
}
@keyframes cAmbient{
  0%,100%{
    filter:
      drop-shadow(0 0 3px rgba(210,235,255,.9))
      drop-shadow(0 0 12px rgba(150,200,255,.7))
      drop-shadow(0 0 30px rgba(100,155,255,.45));
  }
  50%{
    filter:
      drop-shadow(0 0 5px rgba(232,246,255,1))
      drop-shadow(0 0 20px rgba(175,220,255,.9))
      drop-shadow(0 0 48px rgba(120,175,255,.6));
  }
}
.c-element > div{
  position:absolute; left:50%; top:50%;
  border-radius:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.c-glow-outer{ width:92%;height:92%;
  background:radial-gradient(circle,rgba(170,210,255,0) 55%,rgba(170,210,255,.35) 70%,rgba(190,180,255,.2) 82%,rgba(0,0,0,0) 94%);
  filter:blur(10px); }
.c-glow-mid{ width:84%;height:84%;
  background:radial-gradient(circle,rgba(200,228,255,0) 58%,rgba(200,228,255,.5) 72%,rgba(0,0,0,0) 90%);
  filter:blur(4px); }
.c-ring{
  width:78%;height:78%;
  background:conic-gradient(from 27deg,
    rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 30deg,rgba(234,243,255,1) 48deg,
    rgba(168,204,255,1) 90deg,rgba(185,168,255,1) 150deg,rgba(200,180,255,1) 210deg,
    rgba(168,204,255,1) 270deg,rgba(234,243,255,1) 330deg,rgba(255,255,255,0) 355deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 64%,#000 88%,transparent 96%);
  mask:radial-gradient(circle,transparent 56%,#000 64%,#000 88%,transparent 96%);
  filter:blur(.3px);
}
.c-hl-violet{
  width:78%;height:78%;
  background:conic-gradient(from 27deg,
    rgba(180,140,255,0) 0deg,rgba(180,140,255,0) 120deg,rgba(180,140,255,.85) 135deg,
    rgba(180,140,255,0) 155deg,rgba(180,140,255,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 62%,#000 90%,transparent 96%);
  mask:radial-gradient(circle,transparent 56%,#000 62%,#000 90%,transparent 96%);
}
.c-hl-cyan{
  width:78%;height:78%;
  background:conic-gradient(from 27deg,
    rgba(150,225,255,0) 0deg,rgba(150,225,255,0) 235deg,rgba(150,225,255,.9) 250deg,
    rgba(150,225,255,0) 268deg,rgba(150,225,255,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 62%,#000 90%,transparent 96%);
  mask:radial-gradient(circle,transparent 56%,#000 62%,#000 90%,transparent 96%);
}
.nt-text{
  position:absolute; left:27%; top:50%;
  transform:translateY(-50%);
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:800; font-size:14vmin;
  letter-spacing:.04em; line-height:1; color:#d0e4ff;
  text-shadow:0 0 6px rgba(200,232,255,.9),0 0 16px rgba(150,200,255,.55);
  opacity:0; white-space:nowrap; pointer-events:none;
  transition:opacity .3s ease; will-change:opacity;
}
body.c-to-top .nt-text{ opacity:1; }

/* ==========================================================
   5. CNT 欢迎页
   ========================================================== */
.cnt-hero{
  position:fixed; inset:0; z-index:10;
  display:flex;
  align-items:center;
  padding:0 7vw;
  pointer-events:none;
  transition:transform 1s var(--ease-slide), opacity .8s ease;
  will-change:transform, opacity;
}
.cnt-hero-inner{
  max-width:min(52vw, 820px);
  width:100%;
  perspective:900px;
}
body.content-mode .cnt-hero{
  transform:translateY(-40vh) scale(.7);
  opacity:0;
  filter:blur(14px);
  transition:transform .9s var(--ease-depth),
             opacity .8s var(--ease-depth),
             filter .8s var(--ease-depth);
}

.cnt-title{
  display:block;
  font-size:clamp(2rem, 5.2vw, 5rem);
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.14;
  color:#ffffff;
  text-shadow:
    0 0 18px rgba(180,215,255,.7),
    0 0 60px rgba(110,170,255,.45),
    0 0 130px rgba(80,140,255,.3);
  will-change:transform, opacity;
}
.cnt-sub{
  display:block;
  margin-top:1.4rem;
  font-size:clamp(.8rem, 1.05vw, 1.05rem);
  letter-spacing:.1em;
  line-height:1.9;
  color:rgba(230,240,255,.85);
  text-shadow:0 0 16px rgba(140,190,255,.5);
  max-width:100%;
}

/* ==========================================================
   6. 内容区
   ========================================================== */
.content-layer{
  position:fixed; inset:0; z-index:20; pointer-events:none;
}
.page{
  position:absolute; inset:0;
  display:none;
  overflow-y:auto;
  overflow-x:hidden;
  padding:118px 7vw 172px;
  pointer-events:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(110,170,255,.28) transparent;
}
.page.active{
  display:flex;
  align-items:center;
  justify-content:center;
}
.page::-webkit-scrollbar{ width:6px; }
.page::-webkit-scrollbar-track{ background:transparent; }
.page::-webkit-scrollbar-thumb{
  background:rgba(110,170,255,.28);
  border-radius:3px;
}

.card{
  position:relative;
  width:100%;
  max-width:920px;
  flex:0 0 auto;
  margin:auto;
  padding:clamp(28px, 4vw, 56px);
  padding-top:clamp(64px, 6vw, 88px);
  padding-bottom:clamp(46px, 6vw, 76px);
  border-radius:26px;
  background:linear-gradient(145deg,
    rgba(16,38,82,.78),
    rgba(6,16,40,.68));
  border:1px solid rgba(110,170,255,.16);
  box-shadow:
    0 26px 90px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  will-change:transform, opacity, filter;
}
.card::before{
  content:'';
  position:absolute;
  left:0; top:0;
  width:3px; height:100%;
  background:linear-gradient(180deg,
    transparent, var(--cyan), var(--violet), transparent);
  opacity:.85;
}

body.show-page .page.active .card{
  visibility:visible;
  animation:flyIn 1.15s var(--ease-fly) both;
}
@keyframes flyIn{
  0%{
    opacity:0;
    transform:translate3d(0, 58px, 0) scale(.84);
    filter:blur(16px);
  }
  58%{
    opacity:1;
    transform:translate3d(0, -9px, 0) scale(1.042);
    filter:blur(0);
  }
  78%{
    transform:translate3d(0, 3px, 0) scale(.991);
  }
  100%{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
    filter:blur(0);
  }
}
body.page-sinking .page.active .card{
  animation:pageSink .55s cubic-bezier(.5,0,.78,.28) forwards !important;
}
@keyframes pageSink{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);}
  100%{opacity:0;transform:translate3d(0,90px,0) scale(.9);filter:blur(16px);}
}

.tag{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.34em;
  color:rgba(140,195,255,.85);
  margin-bottom:1.1rem;
  text-transform:uppercase;
}
.card-title{
  display:block;
  font-size:clamp(1.55rem, 2.9vw, 2.6rem);
  font-weight:800;
  letter-spacing:.08em;
  color:#fff;
  margin-bottom:1.3rem;
  text-shadow:0 0 26px rgba(120,180,255,.5);
}
.card-text{
  display:block;
  font-size:clamp(.88rem, 1.02vw, 1.02rem);
  line-height:2.05;
  letter-spacing:.04em;
  color:rgba(200,220,255,.82);
  margin-bottom:.95rem;
}
.card-text:last-of-type{ margin-bottom:0; }
.card-quote{
  margin-top:1.6rem; padding-top:1.4rem;
  border-top:1px solid rgba(110,170,255,.14);
  font-style:italic;
  color:rgba(180,210,255,.72);
  letter-spacing:.06em;
}
.hint{
  display:block;
  margin-top:1.4rem;
  font-size:.82rem;
  letter-spacing:.14em;
  color:rgba(140,190,255,.6);
}

/* ==========================================================
   7. 返回按钮
   ========================================================== */
.card-back{
  position:absolute;
  left:clamp(16px, 3vw, 22px);
  top:clamp(16px, 3vw, 22px);
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(110,170,255,.32);
  background:rgba(10,24,56,.7);
  color:rgba(190,220,255,.9);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5;
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--ease-spring),
             border-color .3s ease,background .3s ease,
             color .3s ease,box-shadow .3s ease;
}
.card-back .back-arrow{
  font-size:1.1rem; line-height:1; font-weight:600;
  transform:translateY(-1px);
}
.card-back:hover{
  color:#fff;
  border-color:rgba(160,210,255,.7);
  background:rgba(40,90,200,.6);
  box-shadow:0 0 22px rgba(90,150,255,.4);
  transform:scale(1.08);
}
.card-back:active{ transform:scale(.94); }

/* ==========================================================
   8. 中转站 / 表单
   ========================================================== */
.register-entry{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:2rem;
  padding:1rem 1.5rem;
  font-size:clamp(.88rem, 1.1vw, 1.05rem);
  letter-spacing:.08em;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  border-radius:14px;
  border:1px solid rgba(110,170,255,.32);
  background:linear-gradient(135deg,
    rgba(60,110,220,.28),
    rgba(40,80,190,.16));
  box-shadow:
    0 0 22px rgba(80,150,255,.2),
    inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer;
  transition:transform .35s var(--ease-spring),
             border-color .3s ease,background .3s ease,box-shadow .3s ease;
  user-select:none; -webkit-user-select:none;
}
.register-entry:hover{
  transform:translateY(-2px);
  border-color:rgba(150,200,255,.6);
  background:linear-gradient(135deg,
    rgba(80,140,255,.38), rgba(55,100,220,.22));
  box-shadow:0 0 34px rgba(100,170,255,.4);
}
.register-arrow{
  font-size:1.2em;
  color:rgba(180,220,255,.9);
  transition:transform .35s var(--ease-spring);
}
.register-entry:hover .register-arrow{ transform:translateX(4px); }
.register-hint{
  margin-top:1.1rem;
  font-size:clamp(.76rem, .9vw, .86rem);
  letter-spacing:.08em;
  color:rgba(170,190,220,.55);
  text-align:center;
  cursor:pointer;
  user-select:none;
  transition:color .3s ease, text-shadow .3s ease;
}
.register-hint:hover{
  color:rgba(190,220,255,.95);
  text-shadow:0 0 12px rgba(130,180,255,.5);
}

.register-form{
  display:flex; flex-direction:column;
  gap:1.15rem;
  margin-top:1.6rem;
}
.form-item{ display:flex; flex-direction:column; gap:.5rem; }
.form-label{
  font-size:clamp(.78rem, .95vw, .88rem);
  letter-spacing:.08em;
  color:rgba(200,220,255,.85);
  font-weight:500;
}
.form-input{
  width:100%;
  padding:.85rem 1.1rem;
  font-size:16px;
  font-family:inherit;
  letter-spacing:.04em;
  color:#eaf2ff;
  background:rgba(4,14,34,.55);
  border:1px solid rgba(110,170,255,.22);
  border-radius:12px;
  outline:none;
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;
  -webkit-appearance:none;
  appearance:none;
}
.form-input::placeholder{ color:rgba(150,180,220,.4); }
.form-input:focus{
  border-color:rgba(140,200,255,.6);
  background:rgba(10,24,56,.7);
  box-shadow:
    0 0 0 3px rgba(80,150,255,.15),
    0 0 18px rgba(80,150,255,.2);
}
.form-textarea{
  resize:vertical;
  min-height:140px;
  font-family:inherit;
  line-height:1.8;
}
.form-row{ display:flex; gap:.7rem; }
.form-input-code{ flex:1 1 auto; min-width:0; }
.form-code-btn{
  flex:0 0 auto;
  white-space:nowrap;
  padding:.85rem 1.05rem;
  font-size:clamp(.76rem, .92vw, .86rem);
  font-family:inherit;
  font-weight:600;
  letter-spacing:.06em;
  color:#fff;
  background:linear-gradient(180deg,
    rgba(80,140,255,.32),
    rgba(50,100,220,.2));
  border:1px solid rgba(110,170,255,.35);
  border-radius:12px;
  cursor:pointer;
  transition:background .3s ease,border-color .3s ease,
             box-shadow .3s ease,transform .25s var(--ease-spring);
}
.form-code-btn:hover:not(:disabled){
  border-color:rgba(160,210,255,.7);
  background:linear-gradient(180deg,
    rgba(100,160,255,.45),
    rgba(60,120,240,.3));
  box-shadow:0 0 22px rgba(90,150,255,.35);
}
.form-code-btn:disabled{
  cursor:not-allowed;
  opacity:.55;
  border-color:rgba(110,170,255,.18);
  background:rgba(60,100,180,.1);
  color:rgba(200,220,255,.6);
}
.form-submit{
  margin-top:.6rem;
  width:100%;
  padding:1rem 1.5rem;
  font-size:clamp(.9rem, 1.1vw, 1.02rem);
  font-family:inherit;
  font-weight:700;
  letter-spacing:.14em;
  color:#fff;
  background:linear-gradient(135deg,
    rgba(90,150,255,.55),
    rgba(120,90,230,.5));
  border:1px solid rgba(150,200,255,.4);
  border-radius:14px;
  cursor:pointer;
  box-shadow:
    0 0 24px rgba(90,150,255,.32),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .3s var(--ease-spring),
             box-shadow .3s ease,background .3s ease;
}
.form-submit:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:
    0 0 38px rgba(110,170,255,.5),
    inset 0 1px 0 rgba(255,255,255,.2);
  background:linear-gradient(135deg,
    rgba(105,165,255,.65),
    rgba(135,105,245,.6));
}
.form-submit:disabled{
  cursor:not-allowed;
  opacity:.62;
  transform:none;
}
.form-msg{
  margin-top:.4rem;
  min-height:1.2em;
  font-size:clamp(.72rem, .88vw, .8rem);
  letter-spacing:.06em;
  text-align:center;
  color:rgba(180,200,230,.7);
  transition:color .3s ease;
}
.form-msg-success{ color:rgba(140,220,170,.95); }
.form-msg-error{ color:rgba(255,160,160,.95); }
.form-switch{
  margin-top:1.6rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(110,170,255,.14);
  font-size:clamp(.76rem, .9vw, .86rem);
  letter-spacing:.06em;
  color:rgba(170,190,220,.6);
  text-align:center;
}
.form-switch-link{
  color:rgba(140,195,255,.9);
  cursor:pointer;
  transition:color .3s ease, text-shadow .3s ease;
}
.form-switch-link:hover{
  color:#fff;
  text-shadow:0 0 12px rgba(140,190,255,.6);
}
.mode-switch-row{
  display:flex;
  justify-content:flex-end;
  margin-top:-.35rem;
  margin-bottom:.25rem;
}
.mode-switch{
  font-size:clamp(.7rem, .84vw, .78rem);
  letter-spacing:.06em;
  color:rgba(120,180,255,.9);
  cursor:pointer;
  transition:color .3s ease, text-shadow .3s ease;
}
.mode-switch:hover{
  color:#a8d4ff;
  text-shadow:0 0 12px rgba(140,200,255,.7);
}
#loginForm[data-mode="password"] .code-only{ display:none !important; }
#loginForm[data-mode="code"] .pwd-only{ display:none !important; }

/* 记住我 */
.remember-row{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:.2rem;
  margin-bottom:.1rem;
  cursor:pointer;
  user-select:none;
}
.remember-row input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.remember-box{
  position:relative;
  flex:0 0 auto;
  width:18px; height:18px;
  border-radius:5px;
  border:1.5px solid rgba(110,170,255,.4);
  background:rgba(4,14,34,.55);
  transition:border-color .3s ease,background .3s ease,
             box-shadow .3s ease,transform .25s var(--ease-spring);
}
.remember-row:hover .remember-box{
  border-color:rgba(150,200,255,.75);
  box-shadow:0 0 12px rgba(90,150,255,.3);
}
.remember-row input:checked + .remember-box{
  border-color:rgba(140,200,255,.95);
  background:linear-gradient(135deg,
    rgba(90,150,255,.95),
    rgba(120,90,230,.85));
  box-shadow:0 0 16px rgba(90,150,255,.55);
}
.remember-row input:checked + .remember-box::after{
  content:'';
  position:absolute;
  left:5px; top:2px;
  width:5px; height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.remember-text{
  font-size:clamp(.76rem, .9vw, .86rem);
  letter-spacing:.06em;
  color:rgba(180,200,235,.75);
}
.remember-row.remember-disabled{
  opacity:.5;
  pointer-events:none;
}
.remember-row.remember-disabled::after{
  content:'访问账户不可用';
  margin-left:auto;
  font-size:clamp(.66rem, .78vw, .74rem);
  color:rgba(180,200,230,.5);
  font-style:italic;
}

/* ==========================================================
   9. 账户页面
   ========================================================== */
.guest-warning{
  margin-top:1.2rem;
  margin-bottom:.8rem;
  padding:1rem 1.2rem;
  font-size:clamp(.82rem, 1vw, .92rem);
  letter-spacing:.08em;
  font-weight:600;
  text-align:center;
  color:#ff8b8b;
  border-radius:14px;
  border:1px solid rgba(255,120,120,.45);
  background:linear-gradient(135deg,
    rgba(200,50,50,.15),
    rgba(150,30,30,.08));
  text-shadow:0 0 10px rgba(255,130,130,.5);
}
.guest-inline-warning{
  margin-top:1rem;
  padding:.85rem 1.1rem;
  font-size:clamp(.78rem, .95vw, .88rem);
  letter-spacing:.06em;
  text-align:center;
  color:#ff8b8b;
  border-radius:12px;
  border:1px solid rgba(255,120,120,.4);
  background:rgba(200,50,50,.12);
  text-shadow:0 0 8px rgba(255,130,130,.4);
}

.account-avatar-section{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
  margin-top:1.4rem;
  margin-bottom:1.6rem;
}
.account-avatar{
  position:relative;
  width:96px; height:96px;
  border-radius:50%;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 36% 30%,
    #d8ebff 0%, #6a9dff 32%, #2050ac 68%, #0a1d45 100%);
  box-shadow:
    0 0 28px rgba(110,175,255,.75),
    0 0 78px rgba(70,130,255,.42),
    inset 0 0 20px rgba(200,230,255,.45);
}
.account-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.account-avatar-letter{
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:800;
  font-size:2.4rem;
  line-height:1;
  color:#fff;
  text-shadow:
    0 0 12px rgba(220,240,255,.9),
    0 0 28px rgba(150,200,255,.6);
}
.avatar-upload-btn{
  padding:.6rem 1.4rem;
  font-size:clamp(.74rem, .9vw, .84rem);
  font-family:inherit;
  font-weight:600;
  letter-spacing:.1em;
  color:rgba(220,236,255,.9);
  background:rgba(60,110,220,.2);
  border:1px solid rgba(110,170,255,.35);
  border-radius:999px;
  cursor:pointer;
  transition:background .3s ease,border-color .3s ease,
             box-shadow .3s ease,transform .25s var(--ease-spring);
}
.avatar-upload-btn:hover{
  border-color:rgba(160,210,255,.7);
  background:rgba(80,140,255,.35);
  box-shadow:0 0 22px rgba(90,150,255,.35);
}
.avatar-hint{
  font-size:clamp(.66rem, .78vw, .74rem);
  letter-spacing:.08em;
  color:rgba(160,180,210,.5);
  text-align:center;
}

.account-item{
  position:relative;
  margin-top:1rem;
  border-radius:14px;
  border:1px solid rgba(110,170,255,.18);
  background:rgba(4,14,34,.35);
  overflow:hidden;
  transition:border-color .3s ease,background .3s ease;
}
.account-item:hover{
  border-color:rgba(110,170,255,.32);
  background:rgba(4,14,34,.5);
}
.account-item-head{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.95rem 1.1rem;
}
.account-item-label{
  flex:0 0 auto;
  min-width:76px;
  font-size:clamp(.78rem, .94vw, .88rem);
  letter-spacing:.08em;
  color:rgba(180,205,240,.85);
  font-weight:500;
}
.account-item-value{
  flex:1 1 auto;
  min-width:0;
  font-size:clamp(.82rem, 1vw, .92rem);
  letter-spacing:.04em;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-item-btn{
  flex:0 0 auto;
  padding:.45rem 1rem;
  font-size:clamp(.7rem, .84vw, .78rem);
  font-family:inherit;
  letter-spacing:.08em;
  font-weight:600;
  color:rgba(180,210,255,.9);
  background:transparent;
  border:1px solid rgba(110,170,255,.32);
  border-radius:999px;
  cursor:pointer;
  transition:color .3s ease,border-color .3s ease,
             background .3s ease,box-shadow .3s ease;
}
.account-item-btn:hover{
  color:#fff;
  border-color:rgba(160,210,255,.7);
  background:rgba(80,140,255,.22);
  box-shadow:0 0 18px rgba(90,150,255,.3);
}
.account-item-panel{
  display:none;
  flex-direction:column;
  gap:.7rem;
  padding:0 1.1rem 1.1rem;
}
.account-item.expanded .account-item-panel{ display:flex; }
.account-item-actions{
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
  margin-top:.2rem;
}
.form-mini-btn{
  padding:.55rem 1.15rem;
  font-family:inherit;
  font-size:clamp(.72rem, .86vw, .8rem);
  letter-spacing:.08em;
  font-weight:600;
  color:rgba(200,220,255,.75);
  background:rgba(20,40,80,.5);
  border:1px solid rgba(110,170,255,.25);
  border-radius:10px;
  cursor:pointer;
  transition:color .3s ease,background .3s ease,
             border-color .3s ease,box-shadow .3s ease;
}
.form-mini-btn:hover{
  color:#fff;
  border-color:rgba(150,200,255,.6);
  background:rgba(40,80,160,.6);
}
.form-mini-btn.primary{
  color:#fff;
  background:linear-gradient(135deg,
    rgba(90,150,255,.55),
    rgba(120,90,230,.5));
  border-color:rgba(150,200,255,.5);
}
.form-mini-btn.primary:hover{
  background:linear-gradient(135deg,
    rgba(105,165,255,.75),
    rgba(135,105,245,.7));
  box-shadow:0 0 22px rgba(110,170,255,.45);
}
.account-guest .account-avatar{ filter:grayscale(.55) brightness(.85); }
.account-guest .avatar-upload-btn,
.account-guest .account-item-btn{
  opacity:.4;
  pointer-events:none;
  cursor:not-allowed;
}
.account-guest .account-item-value{
  color:rgba(180,200,230,.55);
}

/* 退出按钮 */
.account-logout-btn{
  display:block;
  width:100%;
  max-width:280px;
  margin:2rem auto 0;
  padding:.95rem 1.4rem;
  font-family:inherit;
  font-size:clamp(.86rem, 1.05vw, .96rem);
  font-weight:700;
  letter-spacing:.14em;
  color:rgba(255,190,190,.95);
  background:linear-gradient(135deg,
    rgba(200,60,60,.22),
    rgba(150,40,40,.14));
  border:1px solid rgba(255,120,120,.42);
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 0 20px rgba(220,80,80,.18);
  transition:transform .3s var(--ease-spring),
             background .3s ease,border-color .3s ease,
             box-shadow .3s ease,color .3s ease;
}
.account-logout-btn:hover{
  color:#fff;
  border-color:rgba(255,150,150,.75);
  background:linear-gradient(135deg,
    rgba(230,80,80,.4),
    rgba(180,50,50,.28));
  box-shadow:0 0 32px rgba(240,100,100,.4);
  transform:translateY(-2px);
}
.account-logout-btn:active{ transform:translateY(0) scale(.98); }

/* ==========================================================
   10. 阅览列表
   ========================================================== */
.browse-list{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  margin-top:1.6rem;
}
.browse-item{
  padding:1.2rem 1.3rem;
  border-radius:14px;
  border:1px solid rgba(110,170,255,.18);
  background:rgba(4,14,34,.38);
  cursor:pointer;
  transition:border-color .3s ease,background .3s ease,
             transform .3s var(--ease-spring);
}
.browse-item:hover{
  border-color:rgba(130,190,255,.45);
  background:rgba(10,24,56,.55);
  transform:translateY(-2px);
  box-shadow:0 0 26px rgba(80,140,255,.2);
}
.browse-item-meta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.55rem;
  font-size:clamp(.68rem, .82vw, .76rem);
  letter-spacing:.08em;
  color:rgba(150,190,240,.6);
}
.browse-item-author{
  color:rgba(140,195,255,.85);
  font-weight:500;
}
.browse-item-title{
  display:block;
  font-size:clamp(.92rem, 1.1vw, 1.02rem);
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  margin-bottom:.45rem;
}
.browse-item-preview{
  font-size:clamp(.78rem, .94vw, .88rem);
  line-height:1.7;
  letter-spacing:.04em;
  color:rgba(200,220,255,.7);
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* ==========================================================
   11. 悬浮导航栏
   ========================================================== */
.menu{
  position:fixed;
  left:50%;
  bottom:calc(26px + var(--safe-b));
  transform:translateX(-50%) translateY(140px);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:min(560px, calc(100vw - 48px));
  height:58px;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(110,170,255,.24);
  background:linear-gradient(180deg,
    rgba(14,34,74,.92),
    rgba(6,18,44,.94));
  box-shadow:
    0 12px 44px rgba(0,0,0,.55),
    0 0 34px rgba(50,120,255,.16),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  cursor:default;
  user-select:none;
  transition:
    left .78s var(--ease-spring),
    bottom .78s var(--ease-spring),
    transform .78s var(--ease-spring),
    width .62s var(--ease-spring),
    height .62s var(--ease-spring),
    padding .5s var(--ease-spring),
    border-radius .48s ease,
    background .42s ease,
    box-shadow .48s ease,
    border-color .42s ease;
  will-change:transform,width,height;
}

/* 欢迎页时导航栏进入 */
body.cnt-hero-mode .cnt-menu{
  transform:translateX(-50%) translateY(0);
}

/* ============================================================
   收缩态：液态玻璃小球
   ============================================================ */
body.content-mode.menu-collapsed .cnt-menu{
  left:auto;
  right:20px;
  bottom:calc(20px + var(--safe-b));
  transform:translateX(0) translateY(0);
  width:60px;
  height:60px;
  padding:0;
  border-radius:50%;
  cursor:pointer;
  pointer-events:auto;
  overflow:visible;

  border:1px solid rgba(190, 225, 255, .75);

  background:
    radial-gradient(circle at 30% 26%,
      rgba(255,255,255,.85) 0%,
      rgba(220,238,255,.5) 14%,
      rgba(140,190,255,.4) 34%,
      rgba(70,130,230,.4) 60%,
      rgba(20,55,140,.55) 92%);

  box-shadow:
    0 0 0 1px rgba(210,235,255,.3) inset,
    0 6px 18px rgba(80,140,255,.5),
    0 0 28px rgba(120,185,255,.85),
    0 0 62px rgba(80,145,255,.55),
    0 0 110px rgba(55,115,255,.32),
    inset 0 -8px 18px rgba(150,200,255,.4),
    inset 0 7px 14px rgba(255,255,255,.5);

  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);

  animation:glassBallPulse 3s ease-in-out infinite;

  transition:
    left .5s var(--ease-spring),
    right .5s var(--ease-spring),
    bottom .5s var(--ease-spring),
    width .42s cubic-bezier(.34,1.32,.48,1),
    height .42s cubic-bezier(.34,1.32,.48,1),
    padding .42s cubic-bezier(.34,1.32,.48,1),
    border-radius .4s ease,
    background .5s ease,
    box-shadow .5s ease,
    border-color .4s ease,
    transform .5s var(--ease-spring);
}

/* 顶部玻璃反光 */
body.content-mode.menu-collapsed .cnt-menu::before{
  content:'';
  position:absolute;
  left:14%;
  top:8%;
  width:52%;
  height:38%;
  border-radius:50%;
  background:radial-gradient(ellipse at 32% 30%,
    rgba(255,255,255,.95) 0%,
    rgba(235,246,255,.5) 40%,
    rgba(200,225,255,0) 85%);
  filter:blur(1.5px);
  pointer-events:none;
  z-index:2;
}

/* 右下角深色折光 */
body.content-mode.menu-collapsed .cnt-menu::after{
  content:'';
  position:absolute;
  right:12%;
  bottom:12%;
  width:34%;
  height:34%;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(160,205,255,.55) 0%,
    rgba(85,145,255,.25) 55%,
    rgba(0,0,0,0) 100%);
  filter:blur(3px);
  pointer-events:none;
}

/* 玻璃球脉冲光晕 */
@keyframes glassBallPulse{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(210,235,255,.3) inset,
      0 6px 18px rgba(80,140,255,.5),
      0 0 28px rgba(120,185,255,.85),
      0 0 62px rgba(80,145,255,.55),
      0 0 110px rgba(55,115,255,.32),
      inset 0 -8px 18px rgba(150,200,255,.4),
      inset 0 7px 14px rgba(255,255,255,.5);
    filter:brightness(1);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(230,245,255,.45) inset,
      0 8px 22px rgba(105,165,255,.65),
      0 0 42px rgba(150,210,255,1),
      0 0 90px rgba(100,165,255,.7),
      0 0 150px rgba(75,140,255,.45),
      inset 0 -10px 22px rgba(180,220,255,.55),
      inset 0 9px 18px rgba(255,255,255,.65);
    filter:brightness(1.15);
  }
}

body.content-mode.menu-collapsed .cnt-menu .menu-btn{
  opacity:0;
  transform:scale(.28);
  pointer-events:none;
  transition:opacity .2s ease, transform .28s cubic-bezier(.5,0,.75,.3);
}

.menu-btn{
  flex:1 1 0;
  min-width:0;
  white-space:nowrap;
  border:0;
  background:transparent;
  font:inherit;
  font-size:clamp(.72rem, 2.4vw, .92rem);
  letter-spacing:.06em;
  color:rgba(220,236,255,.82);
  padding:.7rem .3rem;
  border-radius:999px;
  cursor:pointer;
  text-align:center;
  touch-action:manipulation;
  transition:
    color .3s ease, background .3s ease,
    opacity .32s ease, transform .5s var(--ease-spring);
}
.menu-btn:hover{
  color:#fff;
  background:rgba(90,150,255,.2);
}
.menu-btn.active{
  color:#fff;
  background:linear-gradient(180deg,
    rgba(96,158,255,.42),
    rgba(60,110,220,.24));
}

/* ==========================================================
   12. 公告入口 + 面板
   ========================================================== */
.announce-entry{
  position:fixed;
  left:24px;
  top:calc(24px + var(--safe-t));
  width:52px; height:52px;
  border-radius:50%;
  display:none;
  align-items:center; justify-content:center;
  background:radial-gradient(circle at 36% 30%,
    rgba(180,215,255,.28) 0%,
    rgba(80,140,240,.45) 40%,
    rgba(30,70,160,.75) 100%);
  border:1px solid rgba(140,200,255,.55);
  box-shadow:0 0 22px rgba(110,175,255,.6);
  cursor:pointer;
  z-index:120;
  transition:transform .35s var(--ease-spring);
}
body.cnt-hero-mode .announce-entry,
body.content-mode.cnt-context .announce-entry{ display:flex; }
.announce-entry:hover{
  transform:scale(1.1);
}
.announce-entry:active{ transform:scale(.95); }
.announce-icon{
  font-size:1.4rem; line-height:1;
  filter:drop-shadow(0 0 6px rgba(180,220,255,.7));
}
.announce-badge{
  position:absolute;
  top:-4px; right:-4px;
  min-width:20px; height:20px;
  padding:0 5px;
  display:flex;
  align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; line-height:1;
  color:#fff;
  background:linear-gradient(135deg,#ff5a5a,#d62d2d);
  border:2px solid rgba(8,16,32,.9);
  border-radius:999px;
  box-shadow:0 0 12px rgba(255,80,80,.7);
}

.announce-overlay{
  position:fixed; inset:0;
  z-index:200;
  display:flex;
  align-items:center; justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}
body.announce-open .announce-overlay{
  pointer-events:auto; opacity:1;
}
.announce-overlay::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(2,8,20,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.announce-panel{
  position:relative;
  z-index:1;
  width:min(720px, calc(100vw - 40px));
  max-height:min(78vh, 720px);
  padding:clamp(24px, 3.5vw, 40px);
  border-radius:24px;
  border:2px solid rgba(140,200,255,.55);
  background:linear-gradient(145deg,
    rgba(16,38,82,.96),
    rgba(6,16,40,.96));
  box-shadow:0 30px 100px rgba(0,0,0,.65);
  display:flex;
  flex-direction:column;
  transform:scale(.85);
  opacity:0;
  transition:transform .4s var(--ease-spring), opacity .3s ease;
}
body.announce-open .announce-panel{
  transform:scale(1); opacity:1;
}
.announce-panel-head{
  display:flex;
  align-items:center; justify-content:space-between;
  gap:1rem;
  margin-bottom:1.2rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(110,170,255,.18);
}
.announce-panel-title{
  font-size:clamp(1.1rem, 2vw, 1.5rem);
  font-weight:800;
  letter-spacing:.14em;
  color:#fff;
}
.announce-close{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(110,170,255,.3);
  background:rgba(10,24,56,.6);
  color:rgba(200,220,255,.85);
  font-size:1.1rem;
  cursor:pointer;
  display:flex;
  align-items:center; justify-content:center;
}
.announce-list{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  overflow-y:auto;
}
.announce-tile{
  padding:1.1rem 1.3rem;
  border-radius:14px;
  border:1px solid rgba(110,170,255,.2);
  background:linear-gradient(135deg,
    rgba(60,110,220,.16),
    rgba(40,80,190,.08));
  cursor:pointer;
  transition:border-color .3s ease,background .3s ease;
}
.announce-tile:hover{
  border-color:rgba(150,205,255,.5);
  background:linear-gradient(135deg,
    rgba(80,140,255,.28),
    rgba(50,100,220,.16));
}
.announce-tile-head{
  display:flex;
  gap:.8rem;
  margin-bottom:.6rem;
  font-size:clamp(.68rem, .84vw, .76rem);
  color:rgba(150,190,240,.62);
}
.announce-tile-author{
  color:rgba(140,195,255,.9);
  font-weight:600;
}
.announce-tile-title{
  display:block;
  font-size:clamp(.92rem, 1.1vw, 1.05rem);
  font-weight:700;
  color:#fff;
  margin-bottom:.4rem;
}
.announce-tile-body{
  font-size:clamp(.78rem, .94vw, .88rem);
  line-height:1.75;
  color:rgba(200,220,255,.78);
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.announce-empty{
  padding:2.4rem 1rem;
  text-align:center;
  font-size:clamp(.82rem, 1vw, .92rem);
  color:rgba(160,185,220,.55);
}

/* 公告详情 */
.announce-detail-meta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.2rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(110,170,255,.14);
  font-size:clamp(.72rem, .88vw, .82rem);
  color:rgba(150,190,240,.62);
}
.announce-detail-author{
  color:rgba(140,195,255,.9);
  font-weight:600;
}
.announce-detail-title{
  display:block;
  font-size:clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight:800;
  color:#fff;
  margin-bottom:1.2rem;
}
.announce-detail-content{
  font-size:clamp(.86rem, 1vw, .98rem);
  line-height:2.05;
  color:rgba(215,228,255,.88);
  white-space:pre-wrap;
  word-break:break-word;
}

/* ==========================================================
   13. 品牌
   ========================================================== */
.brand{
  position:absolute;
  right:clamp(16px, 3vw, 28px);
  bottom:clamp(14px, 2.2vw, 22px);
  font-size:clamp(.58rem, 1.3vw, .68rem);
  font-weight:400;
  letter-spacing:.08em;
  line-height:1;
  color:rgba(150,190,255,.3);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  transition:color .35s ease;
}
.card:hover .brand{
  color:rgba(175,210,255,.52);
}

/* ==========================================================
   14. 手机端（≤ 768px）
   ========================================================== */
@media (max-width:768px){
  .blackhole{
    width:64vmin;
    height:64vmin;
    margin-left:-32vmin;
    margin-top:-32vmin;
    transform:translate(18vw, 10vh) scale(1);
  }
  .c-element{
    width:64vmin;
    height:64vmin;
    margin-left:-32vmin;
    margin-top:-32vmin;
    transform:translate(18vw, 10vh) scale(1.15);
  }
  body.c-to-top .blackhole,
  body.c-to-top .c-element{
    transform:translate(0, -32vh) scale(.18);
  }

  .cnt-hero{
    align-items:flex-start;
    padding:14vh 7vw 0 7vw;
  }
  .cnt-hero-inner{ max-width:86vw; }
  .cnt-title{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
  .cnt-sub{ font-size:clamp(.82rem, 3.6vw, .95rem); }

  .page{
    padding:80px 4.5vw 120px;
    align-items:flex-start;
  }
  .card{
    max-width:100%;
    padding:20px 18px 24px;
    padding-top:72px;
    border-radius:20px;
  }
  .card-title{
    font-size:clamp(1.3rem, 6vw, 1.6rem);
    padding-right:2rem;
  }
  .card-text{
    font-size:clamp(.86rem, 3.7vw, .96rem);
    line-height:1.9;
  }
  .card-back{
    width:36px; height:36px;
    left:14px; top:14px;
  }
  .card-back .back-arrow{ font-size:1rem; }

  .register-entry{
    padding:.9rem 1.2rem;
    font-size:clamp(.88rem, 3.9vw, 1rem);
  }
  .register-hint{
    font-size:clamp(.76rem, 3.4vw, .86rem);
  }

  .form-input{ padding:.85rem 1rem; }
  .form-textarea{ min-height:120px; }
  .form-row{ flex-wrap:wrap; }
  .form-input-code{ flex:1 1 100%; }
  .form-code-btn{
    flex:1 1 100%;
    padding:.85rem 1rem;
    margin-top:.1rem;
  }

  .account-item-head{ padding:.85rem .95rem; gap:.6rem; }
  .account-item-label{ min-width:64px; }
  .account-item-btn{ padding:.42rem .85rem; }
  .account-avatar{ width:84px; height:84px; }
  .account-avatar-letter{ font-size:2.1rem; }
  .account-logout-btn{
    max-width:100%;
    padding:.9rem 1rem;
  }

  .menu{
    width:calc(100vw - 24px);
    max-width:480px;
    bottom:calc(16px + var(--safe-b));
    height:56px;
    padding:6px;
  }
  .menu-btn{
    font-size:clamp(.72rem, 3.3vw, .86rem);
    padding:.65rem .25rem;
  }

  /* 手机端小球放大，触摸更友好 */
  body.content-mode.menu-collapsed .cnt-menu{
    width:64px;
    height:64px;
    right:18px;
    bottom:calc(18px + var(--safe-b));
  }

  .announce-entry{
    left:16px;
    top:calc(16px + var(--safe-t));
    width:46px;
    height:46px;
  }
  .announce-icon{ font-size:1.25rem; }
  .announce-badge{
    min-width:18px; height:18px;
    font-size:.64rem;
  }
  .announce-panel{
    padding:20px 16px;
    max-height:82vh;
    border-radius:20px;
  }
  .announce-panel-title{ letter-spacing:.1em; }

  .brand{
    right:14px;
    bottom:12px;
    font-size:.6rem;
  }
}