/* ============================================================
   深色科技感 · 首页着陆页 & 登录页
   ============================================================ */
.dark-stage{
  min-height:100vh;width:100%;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#081a30 0%,#0d2240 45%,#16365c 100%);
  color:#e8eef7;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  display:flex;flex-direction:column;
}
/* 网格线背景 */
.dark-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(120,160,220,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,220,.07) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
}
/* 径向光斑漂移 */
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55;}
.glow-1{width:520px;height:520px;background:radial-gradient(circle,#2f6fb2,transparent 65%);top:-140px;left:-120px;animation:drift1 16s ease-in-out infinite alternate;}
.glow-2{width:460px;height:460px;background:radial-gradient(circle,rgba(192,0,0,.75),transparent 65%);bottom:-160px;right:-100px;animation:drift2 20s ease-in-out infinite alternate;}
.glow-3{width:340px;height:340px;background:radial-gradient(circle,#3aa17e,transparent 65%);top:38%;left:56%;opacity:.3;animation:drift1 24s ease-in-out infinite alternate-reverse;}
@keyframes drift1{from{transform:translate(0,0) scale(1);}to{transform:translate(90px,60px) scale(1.15);}}
@keyframes drift2{from{transform:translate(0,0) scale(1);}to{transform:translate(-80px,-70px) scale(1.12);}}

/* 浮动粒子 */
.particles i{
  position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;
  background:rgba(160,200,255,.7);box-shadow:0 0 10px rgba(160,200,255,.9);
  animation:rise linear infinite;pointer-events:none;
}
@keyframes rise{
  0%{transform:translateY(0);opacity:0;}
  8%{opacity:1;}
  92%{opacity:.9;}
  100%{transform:translateY(-105vh);opacity:0;}
}
/* 齿轮装饰 */
.gear{
  position:absolute;border:3px dashed rgba(150,190,240,.22);border-radius:50%;pointer-events:none;
  animation:spin linear infinite;
}
.gear::after{content:"";position:absolute;inset:16%;border:2px dashed rgba(150,190,240,.14);border-radius:50%;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 超大渐变标题（字号已整体上调） */
.mega-title{
  font-size:clamp(2.4rem,5vw,4.6rem);font-weight:900;line-height:1.28;letter-spacing:.06em;
  background:linear-gradient(115deg,#ffffff 15%,#9cc3f0 45%,#ffd2d2 62%,#ffffff 90%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shine 7s linear infinite;
  text-shadow:0 0 42px rgba(80,140,220,.35);
}
@keyframes shine{to{background-position:220% center;}}
/* 标题层级：校院名 > 平台名（入场动画见文末编排区） */
.mega-title-main{font-size:clamp(2.9rem,6.2vw,4.5rem);}
.mega-title-sub{font-size:clamp(2rem,4vw,3rem);font-weight:800;}
.mega-sub{
  font-size:clamp(1rem,1.5vw,1.3rem);color:#a9bede;letter-spacing:.34em;font-weight:300;
}
.mega-tag{
  display:inline-block;padding:.35rem 1.1rem;border:1px solid rgba(255,217,102,.4);border-radius:999px;
  color:#ffd966;font-size:.8rem;letter-spacing:.28em;
  background:rgba(255,217,102,.06);backdrop-filter:blur(4px);
}

/* 着陆页按钮 */
.btn-landing{
  padding:.9rem 2.6rem;border-radius:999px;font-weight:700;letter-spacing:.14em;font-size:1.02rem;
  transition:all .3s ease;text-decoration:none;display:inline-block;
}
.btn-landing-primary{
  color:#fff;background:linear-gradient(135deg,#c00000,#7a0d1e);
  box-shadow:0 10px 32px rgba(192,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-landing-primary:hover{color:#fff;transform:translateY(-3px) scale(1.03);box-shadow:0 16px 44px rgba(192,0,0,.6);}
.btn-landing-ghost{
  color:#cfe0f5;border:1.5px solid rgba(160,200,255,.45);background:rgba(160,200,255,.07);
  backdrop-filter:blur(8px);
}
.btn-landing-ghost:hover{color:#fff;border-color:#9cc3f0;background:rgba(160,200,255,.16);transform:translateY(-3px);}

/* 登录卡片 */
.login-panel{
  background:rgba(255,255,255,.06);border:1px solid rgba(160,200,255,.22);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  border-radius:1.2rem;box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:fadeUp .7s ease both;
}
.login-panel .form-control{
  background:rgba(8,26,48,.55);border:1px solid rgba(160,200,255,.28);color:#fff;
}
.login-panel .form-control:focus{background:rgba(8,26,48,.75);border-color:#9cc3f0;color:#fff;box-shadow:0 0 0 .2rem rgba(120,170,240,.18);}
.login-panel .form-control::placeholder{color:#7d93b5;}
.role-card{
  background:rgba(255,255,255,.055);border:1px solid rgba(160,200,255,.18);border-radius:1rem;
  padding:1.15rem 1rem;height:100%;text-align:center;color:#dbe7f7;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s;
}
.role-card:hover{transform:translateY(-6px);border-color:rgba(255,217,102,.55);box-shadow:0 14px 34px rgba(0,0,0,.4);}
.role-card .ric{
  width:52px;height:52px;margin:0 auto .6rem;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:#fff;background:linear-gradient(135deg,#16365c,#2f6fb2);
  box-shadow:0 6px 18px rgba(22,54,92,.5);
}
.demo-table{--bs-table-bg:transparent;--bs-table-color:#c9d6ea;font-size:.82rem;}
.demo-table th{color:#ffd966;font-weight:600;border-color:rgba(160,200,255,.18)!important;}
.demo-table td{border-color:rgba(160,200,255,.12)!important;}

/* ---------- 第四轮：端口选择页 ---------- */
.guest-strip{
  background:rgba(255,255,255,.07);border:1px solid rgba(160,200,255,.25);border-radius:.9rem;
  padding:.55rem 1rem;color:#c9d6ea;font-size:15px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s;
}
.guest-strip:hover{transform:translateY(-3px);border-color:rgba(255,217,102,.5);box-shadow:0 10px 26px rgba(0,0,0,.35);color:#fff;}
.role-card-link{color:#dbe7f7;}
.role-card-link:hover{color:#fff;}

/* 端口专属登录页顶栏色带 */
.portal-hero{
  border-radius:1rem;padding:.9rem 1.2rem;margin-bottom:1rem;display:flex;align-items:center;gap:.8rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(160,200,255,.2);
}

/* 全站字号下限 15px（低优先级覆盖，含徽章/表格/脚注） */
:where(body, body *):not(style):not(script):not(svg):not(svg *){font-size:max(15px,100%);}
.demo-table{font-size:.95rem;}

/* ---------- 首页入场编排：一组联动动态效果（舒缓版） ---------- */
/* 0. 整体开场轻推近 */
.dark-stage .flex-grow-1{animation:heroZoom 1.6s cubic-bezier(.16,1,.3,1) both;}
@keyframes heroZoom{from{opacity:0;transform:scale(1.05);}to{opacity:1;transform:scale(1);}}
/* 1. 顶部标签弹落 */
.mega-tag{animation:tagIn 1s .35s cubic-bezier(.2,1.35,.4,1) both;}
@keyframes tagIn{from{opacity:0;transform:translateY(-26px) scale(.55);}to{opacity:1;transform:none;}}
/* 2. 校院名大标题：模糊升起 */
.mega-title-main{animation:shine 7s linear infinite,titleIn 1.5s .7s cubic-bezier(.16,1,.3,1) both;}
@keyframes titleIn{from{opacity:0;transform:translateY(46px);filter:blur(16px);}to{opacity:1;transform:none;filter:blur(0);}}
/* 3. 平台名副标题：自右滑入 */
.mega-title-sub{animation:shine 7s linear infinite,subIn 1.4s 1.4s cubic-bezier(.16,1,.3,1) both;}
@keyframes subIn{from{opacity:0;transform:translateX(70px);filter:blur(8px);}to{opacity:1;transform:none;filter:blur(0);}}
/* 4. 金色分隔线向两侧展开 */
.mega-line{width:min(420px,60%);height:2px;margin:0 auto 1rem;border-radius:2px;
  background:linear-gradient(90deg,transparent,#9cc3f0,#ffd966,#9cc3f0,transparent);
  animation:lineIn 1.3s 2s ease both;}
@keyframes lineIn{from{opacity:0;transform:scaleX(0);}to{opacity:1;transform:scaleX(1);}}
/* 5. 标语字距收拢浮现 */
.mega-sub{animation:trackIn 1.5s 2.3s ease both;}
@keyframes trackIn{from{opacity:0;letter-spacing:.7em;transform:translateY(10px);}to{opacity:1;letter-spacing:.34em;transform:none;}}
/* 6. 两个按钮左右对向弹入（backwards 填充，结束后不影响悬浮效果） */
.btn-in-l{animation:btnInL 1.1s 2.9s cubic-bezier(.2,1.3,.4,1) backwards;}
@keyframes btnInL{from{opacity:0;transform:translateX(-60px) scale(.85);}to{opacity:1;transform:none;}}
.btn-in-r{animation:btnInR 1.1s 3.15s cubic-bezier(.2,1.3,.4,1) backwards;}
@keyframes btnInR{from{opacity:0;transform:translateX(60px) scale(.85);}to{opacity:1;transform:none;}}
/* 7. 页脚最后淡入 */
.landing-footer{animation:footIn 1.4s 3.8s ease both;}
@keyframes footIn{from{opacity:0;}to{opacity:1;}}
/* 系统减少动态时全部关闭 */
@media (prefers-reduced-motion:reduce){.dark-stage,.dark-stage *{animation:none!important;}}

/* ---------- 第六轮：端口选择页宽屏大卡片（演示账号下沉至各端口登录页） ---------- */
.portal-card{
  --pc:#2f6fb2;
  position:relative;display:block;height:100%;overflow:hidden;text-decoration:none;text-align:center;
  padding:2.4rem 1.6rem 1.9rem;border-radius:1.35rem;color:#dbe7f7;
  background:rgba(255,255,255,.055);border:1px solid rgba(160,200,255,.2);
  background:linear-gradient(165deg,color-mix(in srgb,var(--pc) 26%,rgba(9,22,42,.94)),rgba(9,22,42,.94) 62%);
  border-color:color-mix(in srgb,var(--pc) 42%,rgba(160,200,255,.18));
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  animation:fadeUp .7s ease both;
}
.portal-card::before{ /* 顶部角色色光带 */
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,transparent,var(--pc),transparent);opacity:.85;
}
.portal-card::after{ /* 悬浮扫光 */
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-18deg);transition:left .6s ease;
}
.portal-card:hover{
  transform:translateY(-9px);color:#fff;border-color:var(--pc);
  box-shadow:0 24px 54px rgba(0,0,0,.5),0 0 38px color-mix(in srgb,var(--pc) 38%,transparent);
}
.portal-card:hover::after{left:130%;}
.pc-ric{
  width:78px;height:78px;margin:0 auto 1rem;border-radius:22px;display:flex;align-items:center;justify-content:center;
  font-size:2.15rem;color:#fff;
  background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 65%,#8fb6e8));
  box-shadow:0 12px 28px color-mix(in srgb,var(--pc) 45%,transparent);
  transition:transform .35s ease;
}
.portal-card:hover .pc-ric{transform:scale(1.07) rotate(-3deg);}
.pc-name{display:block;font-size:1.32rem;font-weight:700;color:#fff;letter-spacing:.04em;}
.pc-desc{display:block;margin:.55rem auto 1.05rem;color:#9db3d0;font-size:15px;min-height:2.8em;max-width:26em;}
.pc-go{
  display:inline-block;padding:.38rem 1.15rem;border-radius:99px;font-size:15px;font-weight:600;
  color:#c9d6ea;border:1px solid rgba(160,200,255,.3);background:rgba(255,255,255,.06);
  color:color-mix(in srgb,var(--pc) 55%,#dce8fa);
  border-color:color-mix(in srgb,var(--pc) 55%,transparent);
  background:color-mix(in srgb,var(--pc) 14%,transparent);
  transition:all .3s ease;
}
.portal-card:hover .pc-go{color:#fff;background:var(--pc);border-color:var(--pc);}

/* 端口登录页·本端口演示账号盒 */
.demo-box{
  margin-top:1.4rem;padding:1rem 1.1rem;border-radius:1rem;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,217,102,.35);
}

@media (prefers-reduced-motion:reduce){
  .portal-card{animation:none;}
  .portal-card,.portal-card::after,.pc-ric,.pc-go{transition:none;}
}