/* ============================================================================
   归浦GEO 认证页 + 工作台加载动画
   —— 与落地页（landing.html）同一套浅色设计语言：#FFFFFF 底 / #F5F8FD 面 /
      #3B82F6 主色 / 24px 大圆角 / 发丝级描边 / 克制动效
   本文件在 v8.css 之后加载，仅覆盖 .v8-login 相关样式与新增的加载层，
   不触碰工作台外壳（.v8-shell / .v8-side …）的既有视觉契约。
   ========================================================================= */

:root{
  --lg-bg:#FAFAF7;
  --lg-bg2:#F1F0E9;
  --lg-card:#FFFFFF;
  --lg-card2:#F4F3EE;
  --lg-line:rgba(17,17,16,.10);
  --lg-line2:rgba(17,17,16,.18);
  --lg-txt:#111110;
  --lg-txt2:rgba(17,17,16,.62);
  --lg-txt3:rgba(17,17,16,.40);
  --lg-accent:#1D4ED8;
  --lg-accent2:#2563EB;
  --lg-soft:rgba(29,78,216,.10);
  --lg-r:24px;
  --lg-ease:cubic-bezier(.22,1,.36,1)}

/* ============================ 登录页容器 ============================ */
/* 手机端上下不再露出白底：根背景固定为深色 + 禁用橡皮筋回弹 */
html, body{
  background:var(--lg-bg);
  overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;      /* 禁止 iOS 横屏自动放大字号 */
}
.v8-login{
  min-height:100vh;
  min-height:100dvh;                 /* 移动端真实可视高度，避免地址栏导致的空白 */
  display:grid;
  grid-template-columns:1.05fr 1fr;
  background:var(--lg-bg);
  position:relative;
  overflow:hidden}

/* 背景动态光斑 */
.v8-login::before,
.v8-login::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  z-index:0}
.v8-login::before{
  width:620px;height:620px;left:-160px;top:-140px;
  background:radial-gradient(circle,rgba(59,130,246,.30),transparent 68%);
  animation:lgOrb1 18s ease-in-out infinite}
.v8-login::after{
  width:540px;height:540px;right:-120px;bottom:-160px;
  background:radial-gradient(circle,rgba(147,110,231,.22),transparent 70%);
  animation:lgOrb2 22s ease-in-out infinite}
@keyframes lgOrb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.12)}}
@keyframes lgOrb2{0%,100%{transform:translate(0,0) scale(1.06)}50%{transform:translate(-60px,-46px) scale(.94)}}

/* ---------------- 左侧品牌区 ---------------- */
.v8-login__brand{
  position:relative;
  z-index:1;
  background:
    radial-gradient(900px 460px at 20% 16%, rgba(59,130,246,.20), transparent 62%),
    linear-gradient(160deg, #FFFFFF 0%, #F1F0E9 62%);
  color:var(--lg-txt);
  padding:48px 56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  border-right:1px solid var(--lg-line)}
.v8-login__brand::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(760px 620px at 30% 30%, #000 10%, transparent 78%);
  -webkit-mask-image:radial-gradient(760px 620px at 30% 30%, #000 10%, transparent 78%);
  pointer-events:none}
.v8-login__logo{
  display:flex;align-items:center;gap:13px;position:relative;z-index:2;
  animation:lgIn .8s var(--lg-ease) both}
.v8-login__logo img{
  width:40px;height:40px;object-fit:contain;border-radius:9px;
  animation:lgFloat 6s ease-in-out infinite}
.v8-login__logo b{
  font-size:20px;letter-spacing:.4px;font-weight:700;color:var(--lg-txt)}
.v8-login__logo b em{
  font-style:normal;font-size:11px;letter-spacing:.22em;color:var(--lg-txt3);
  display:block;font-weight:500;margin-top:2px}
@keyframes lgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.v8-login__hero{position:relative;z-index:2;max-width:520px}
.v8-login__hero h1{
  font-size:clamp(30px,3.4vw,42px);line-height:1.22;margin:0 0 18px;
  font-weight:800;letter-spacing:-.03em;color:var(--lg-txt)}
.v8-login__hero h1 .ch{
  display:inline-block;white-space:pre;opacity:0;
  transform:translateY(.5em) scale(.94);filter:blur(6px);
  animation:lgChPop .8s var(--lg-ease) forwards}
.v8-login__hero h1 em{font-style:normal;color:var(--lg-accent2)}
@keyframes lgChPop{60%{opacity:1}to{opacity:1;transform:none;filter:blur(0)}}
.v8-login__hero p{
  font-size:15px;color:var(--lg-txt2);margin:0 0 32px;line-height:1.8;
  animation:lgIn .8s var(--lg-ease) .18s both}
@keyframes lgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.v8-login__points{display:grid;gap:12px}
.v8-login__point{
  display:flex;gap:13px;align-items:flex-start;
  background:rgba(15,23,42,.028);
  border:1px solid var(--lg-line);
  border-radius:16px;padding:14px 16px;
  backdrop-filter:blur(8px);
  transition:.28s var(--lg-ease);
  animation:lgIn .7s var(--lg-ease) both}
.v8-login__point:nth-child(1){animation-delay:.28s}
.v8-login__point:nth-child(2){animation-delay:.38s}
.v8-login__point:nth-child(3){animation-delay:.48s}
.v8-login__point:hover{
  background:rgba(15,23,42,.05);border-color:var(--lg-line2);transform:translateX(4px)}
.v8-login__point i{
  width:26px;height:26px;flex:none;border-radius:8px;
  background:var(--lg-soft);border:1px solid rgba(147,197,253,.28);
  color:var(--lg-accent2);display:grid;place-items:center;
  font-size:12px;font-style:normal;font-weight:700}
.v8-login__point div b{display:block;font-size:14px;font-weight:600;color:var(--lg-txt)}
.v8-login__point div span{font-size:12.5px;color:var(--lg-txt3);line-height:1.6}

.v8-login__foot{
  position:relative;z-index:2;font-size:12.5px;color:var(--lg-txt3);line-height:1.7;
  animation:lgIn .8s var(--lg-ease) .6s both}

/* ---------------- 右侧表单区 ---------------- */
.v8-login__panel{
  display:grid;place-items:center;padding:40px;
  background:var(--lg-bg);position:relative;z-index:1}
.v8-login__form{
  width:100%;max-width:392px;
  background:var(--lg-card);
  border:1px solid var(--lg-line);
  border-radius:var(--lg-r);
  padding:34px 32px 28px;
  
  animation:lgCard .9s var(--lg-ease) .1s both}
@keyframes lgCard{
  from{opacity:0;transform:translateY(26px) scale(.97)}
  to{opacity:1;transform:none}
}
.v8-login__form h2{
  font-size:24px;margin:0 0 6px;font-weight:700;letter-spacing:-.02em;color:var(--lg-txt)}
.v8-login__form > p{color:var(--lg-txt3);margin:0 0 26px;font-size:13.5px}

.v8-field{margin-bottom:16px;position:relative}
.v8-field label{
  display:block;font-size:12px;font-weight:600;margin-bottom:7px;
  color:var(--lg-txt2);letter-spacing:.02em}
.v8-input{
  width:100%;height:44px;padding:0 13px;
  border:1px solid var(--lg-line2);border-radius:12px;
  background:var(--lg-bg2);font-size:14px;color:var(--lg-txt);
  transition:border-color .22s var(--lg-ease), box-shadow .22s var(--lg-ease),
             background .22s var(--lg-ease);
  font-family:inherit;
  box-sizing:border-box}
.v8-input:hover{border-color:rgba(15,23,42,.30)}
.v8-input:focus{
  outline:none;border-color:var(--lg-accent);background:var(--lg-card2)}
.v8-input::placeholder{color:var(--lg-txt3)}

.v8-btn{font-family:inherit;border-radius:12px;transition:.22s var(--lg-ease)}
.v8-btn--primary{
  background:var(--lg-accent);border:1px solid var(--lg-accent);color:#fff;font-weight:600;
  position:relative;overflow:hidden}
.v8-btn--primary::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(15,23,42,.10),transparent);
  transition:left .55s var(--lg-ease)}
.v8-btn--primary:hover::after{left:130%}
.v8-btn--primary:hover{background:#2f74e8;border-color:#2f74e8;transform:translateY(-1px)}
.v8-btn--primary:active{transform:translateY(0)}
.v8-btn--block{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}

.v8-login__form .v8-btn--primary{height:44px;font-size:14.5px;margin-top:6px}
.v8-login__form .v8-btn:not(.v8-btn--primary){
  background:transparent;border:1px solid var(--lg-line2);color:var(--lg-txt2)}
.v8-login__form .v8-btn:not(.v8-btn--primary):hover{
  background:rgba(15,23,42,.035);border-color:rgba(15,23,42,.20);color:var(--lg-txt)}

/* 分隔线 + 微信 */
.v8-wx-entry{margin-top:20px}
.v8-wx-divider{
  display:flex;align-items:center;gap:12px;color:var(--lg-txt3);font-size:12px;margin-bottom:16px}
.v8-wx-divider::before,.v8-wx-divider::after{
  content:"";flex:1;height:1px;background:var(--lg-line)}
.v8-wx-btn{
  height:44px;background:rgba(15,23,42,.028);border:1px solid var(--lg-line2);
  color:var(--lg-txt2);font-size:14px}
.v8-wx-btn:hover{background:rgba(15,23,42,.06);color:var(--lg-txt);border-color:rgba(15,23,42,.26)}

/* 提示条（已去掉「演示环境」） */
.v8-login__hint{
  margin-top:20px;padding:12px 14px;background:var(--lg-bg2);
  border:1px solid var(--lg-line);border-radius:14px;
  font-size:12.5px;color:var(--lg-txt3);line-height:1.7;text-align:center}
.v8-badge--warn{
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);
  color:#B42318;border-radius:12px;padding:10px 13px;font-size:13px}

/* 响应式 */
@media (max-width:900px){
  .v8-login{grid-template-columns:1fr;min-height:100dvh}
  .v8-login__brand{display:none}
  /* 上下留白与安全区：与加载动画同一张品牌 logo、同一视觉比例 */
  .v8-login__panel{
    padding:calc(28px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
    align-content:center;background:var(--lg-bg)}
  .v8-login__form{max-width:100%;padding:28px 22px 24px;margin-top:52px}
}
@media (max-width:900px){
  .v8-login__panel::before{
    content:"";position:absolute;top:calc(24px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
    width:56px;height:56px;border-radius:16px;
    background:no-repeat center/contain url("/assets/brand/logo.png?v=20261012b");
    filter:)}
}

/* 加载动画：手机 / 电脑同一张 logo、同一比例，仅尺寸随屏幕收敛 */
@media (max-width:760px){
  .gp-boot__mark{width:104px;height:104px}
  .gp-boot__logo{width:60px;height:60px;border-radius:15px}
  .gp-boot__txt{font-size:15px;margin-top:24px}
}


/* ============================================================================
   工作台加载动画（进入工作台 / 登录成功后）
   ========================================================================= */
.gp-boot{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(900px 520px at 50% 42%, #FFFFFF 0%, #F1F0E9 68%);
  overflow:hidden;
  transition:opacity .5s var(--lg-ease), transform .5s var(--lg-ease)}
.gp-boot.is-out{opacity:0;transform:scale(1.04);pointer-events:none}

/* 背景网格 */
.gp-boot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.040) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(560px 460px at 50% 46%, #000 8%, transparent 76%);
  -webkit-mask-image:radial-gradient(560px 460px at 50% 46%, #000 8%, transparent 76%)}

/* Logo 与光环 */
.gp-boot__mark{position:relative;width:132px;height:132px;display:grid;place-items:center}
.gp-boot__ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(59,130,246,.85) 120deg,
             rgba(147,197,253,.95) 220deg, transparent 300deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation:gpSpin 1.5s linear infinite}
.gp-boot__ring2{
  position:absolute;inset:16px;border-radius:50%;
  background:conic-gradient(from 180deg, transparent 0deg, rgba(147,110,231,.55) 140deg, transparent 260deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation:gpSpin 2.4s linear infinite reverse}
@keyframes gpSpin{to{transform:rotate(360deg)}}
.gp-boot__logo{
  width:74px;height:74px;object-fit:contain;border-radius:18px;
  animation:gpPulse 2.2s ease-in-out infinite;
  filter:)}
@keyframes gpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* 文案 */
.gp-boot__txt{
  margin-top:30px;font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--lg-txt);
  display:flex;align-items:center;gap:2px}
.gp-boot__txt b{
  font-weight:700;
  background:linear-gradient(96deg,#1D4ED8,#2563EB 55%,#7C3AED);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gp-boot__dot{display:inline-flex;gap:4px;margin-left:3px}
.gp-boot__dot i{
  width:4px;height:4px;border-radius:50%;background:var(--lg-txt3);
  animation:gpDot 1.25s ease-in-out infinite}
.gp-boot__dot i:nth-child(2){animation-delay:.16s}
.gp-boot__dot i:nth-child(3){animation-delay:.32s}
@keyframes gpDot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.gp-boot__sub{
  margin-top:10px;font-size:12.5px;color:var(--lg-txt3);letter-spacing:.04em}

/* 进度条 */
.gp-boot__bar{
  margin-top:26px;width:240px;height:3px;border-radius:99px;
  background:rgba(15,23,42,.10);overflow:hidden;position:relative}
.gp-boot__bar i{
  display:block;height:100%;width:8%;border-radius:99px;
  background:linear-gradient(90deg,#3B82F6,#93C5FD);
  
  animation:gpBar 2.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes gpBar{0%{width:6%}55%{width:72%}85%{width:88%}100%{width:96%}}

/* 无障碍：尊重系统减弱动效设置 */
@media (prefers-reduced-motion:reduce){
  .v8-login::before,.v8-login::after,.v8-login__logo img,
  .gp-boot__ring,.gp-boot__ring2,.gp-boot__logo,.gp-boot__dot i{animation:none}
  .v8-login__hero h1 .ch{animation:none;opacity:1;transform:none;filter:none}
  .v8-login__logo,.v8-login__hero p,.v8-login__point,.v8-login__foot,
  .v8-login__form{animation:none;opacity:1;transform:none}
  .gp-boot__bar i{animation:none;width:96%}
}