/* 远扬登录页：全屏实拍海上视频轮播（login-scene.js）+ 右侧黄金分割处的毛玻璃登录框 + 流动的「远扬」标识。
   单一视觉，不跟随站点的浅色 / 深色主题。研究站、OA、交易台共用。 */
.vl-login { margin: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #16213d; color: #fff8ef;
  font: 400 14px/1.5 "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.vl-scene { position: fixed; inset: -2%; overflow: hidden; background: #0d1526;
  transform: translate3d(calc(var(--vl-mx, 0) * -10px), calc(var(--vl-my, 0) * -6px), 0) scale(1.03); }
.vl-layer { position: absolute; inset: 0; overflow: hidden; background: #0d1526 center / cover no-repeat; will-change: transform; }
.vl-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* 压暗：右侧给登录框、顶部给标识、四角暗角；不改素材本身 */
.vl-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(8,12,24,0) 38%, rgba(8,12,24,.30) 100%),
              linear-gradient(180deg, rgba(8,12,24,.38) 0%, rgba(8,12,24,0) 22%),
              radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(4,8,18,.42) 100%); }
/* 底部渐变模糊：画面下缘柔化，衬托文字 */
.vl-fade { position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; pointer-events: none;
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.65) 45%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.65) 45%, transparent 100%);
  background: linear-gradient(to top, rgba(10,16,32,.55), rgba(10,16,32,0)); }

/* ---- 品牌：帆形标识 + 「远扬」金色流光 ---- */
.vl-brand { position: fixed; top: max(28px, env(safe-area-inset-top, 0px)); left: clamp(20px, 4vw, 56px); display: flex; align-items: center; gap: 14px; z-index: 2; }
.vl-mark { width: 46px; height: 46px; filter: drop-shadow(0 4px 14px rgba(255,190,120,.35)); animation: vl-sway 7s ease-in-out infinite; transform-origin: 50% 90%; }
.vl-mark path { vector-effect: non-scaling-stroke; }
.vl-mark .vl-draw { stroke-dasharray: 220; stroke-dashoffset: 220; animation: vl-draw 2.4s .2s cubic-bezier(.6,.1,.2,1) forwards; }
.vl-word { display: flex; flex-direction: column; line-height: 1.05; }
.vl-word b { font: 600 28px/1.1 "Noto Serif SC", "Songti SC", "STSong", serif; letter-spacing: .12em; }
.vl-word span { margin-top: 4px; font: 500 10.5px/1 "IBM Plex Sans", sans-serif; letter-spacing: .42em; color: rgba(255,240,220,.72); }
.vl-flow { background: linear-gradient(100deg, #f3cf98 0%, #fff7ea 18%, #e7ad62 36%, #fff3dc 54%, #f3cf98 72%, #fff7ea 90%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: vl-flow 9s linear infinite; }

/* ---- 登录框：右侧黄金分割点（横向 76.4%），毛玻璃，浮在画面上；高光跟着鼠标走 ---- */
.vl-stage { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.vl-card { --w: min(400px, calc(100vw - 32px)); pointer-events: auto; position: absolute; top: 50%; left: calc(76.4% - var(--w) / 2);
  width: var(--w); box-sizing: border-box; transform: translateY(-50%) translate(calc(var(--vl-mx, 0) * -6px), calc(var(--vl-my, 0) * -6px));
  display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 28px; border-radius: 22px; overflow: hidden;
  background: rgba(18, 26, 48, .38); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 80px rgba(6,10,24,.45), inset 0 1px 0 rgba(255,255,255,.18); animation: vl-rise .9s .15s both cubic-bezier(.2,.7,.2,1); }
.vl-card::before { content: ""; position: absolute; inset: -40%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at calc(50% + var(--vl-mx, 0) * 30%) calc(40% + var(--vl-my, 0) * 30%), rgba(255,214,160,.22), transparent 42%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vl-card { background: rgba(18,26,48,.82); } }
.vl-card-h { display: flex; flex-direction: column; gap: 6px; }
.vl-card-h h1 { margin: 0; font: 600 22px/1.3 "IBM Plex Sans", "PingFang SC", sans-serif; letter-spacing: .02em; color: #fffaf2; }
.vl-card-h p { margin: 0; color: rgba(255,240,222,.72); font-size: 13px; }
.vl-site { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,226,186,.86); }
.vl-env { padding: 1px 8px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; background: rgba(255,196,120,.18); border: 1px solid rgba(255,196,120,.55); color: #ffd9a6; }
.vl-field { display: flex; flex-direction: column; gap: 6px; }
.vl-field label { font-size: 12.5px; color: rgba(255,238,218,.8); }
.vl-field input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); color: #fffaf2; font: 500 15px/1 "IBM Plex Sans", "PingFang SC", sans-serif; outline: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.vl-field input::placeholder { color: rgba(255,238,218,.4); }
.vl-field input:focus { border-color: rgba(255,208,150,.85); background: rgba(255,255,255,.12); box-shadow: 0 0 0 4px rgba(255,196,120,.18); }
.vl-field input[name="code"], .vl-field input[name="otp"] { font: 600 22px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .4em; text-align: center; }
.vl-help { font-size: 12px; color: rgba(255,232,206,.66); }
.vl-btn { height: 48px; border: 0; border-radius: 12px; cursor: pointer; font: 600 15px/1 "IBM Plex Sans", "PingFang SC", sans-serif; letter-spacing: .08em;
  color: #2a1606; background: linear-gradient(135deg, #ffe0ad 0%, #f2b877 55%, #e29658 100%); box-shadow: 0 10px 24px rgba(226,150,88,.35);
  transition: transform .15s, box-shadow .15s, filter .15s; }
.vl-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(226,150,88,.45); filter: brightness(1.04); }
.vl-btn:active { transform: translateY(0); }
.vl-btn:focus-visible { outline: 2px solid #fff3dc; outline-offset: 3px; }
.vl-err { padding: 10px 12px; border-radius: 12px; background: rgba(214,74,60,.24); border: 1px solid rgba(255,140,120,.45); color: #ffe1da; font-size: 13px; }
.vl-who { margin: 0; font-size: 13px; color: rgba(255,238,218,.8); }
.vl-who a { color: #ffd9a6; }
.vl-secret { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.25); font: 500 13px/1.4 "IBM Plex Mono", monospace; word-break: break-all; }

/* ---- 底部一行：流动的格言 ---- */
.vl-foot { position: fixed; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: rgba(255,238,218,.62); font-size: 12px; letter-spacing: .08em; }
.vl-motto { font: 500 clamp(18px, 2.2vw, 26px)/1.2 "Noto Serif SC", "Songti SC", serif; letter-spacing: .32em; }

/* 窄屏：登录框居中，画面照旧在后面 */
@media (max-width: 900px) {
  .vl-card { left: 50%; transform: translate(-50%, -50%); top: 54%; padding: 26px 22px 24px; }
  .vl-brand { left: 50%; transform: translateX(-50%); top: max(20px, env(safe-area-inset-top, 0px)); }
  .vl-foot { justify-content: center; } .vl-foot > span:last-child { display: none; }
}
@media (max-height: 620px) and (max-width: 900px) { .vl-brand { display: none; } .vl-card { top: 50%; } }

@keyframes vl-flow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes vl-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes vl-draw { to { stroke-dashoffset: 0; } }
@keyframes vl-rise { from { opacity: 0; transform: translateY(calc(-50% + 18px)); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .vl-mark, .vl-flow, .vl-card { animation: none !important; }
  .vl-mark .vl-draw { animation: none; stroke-dashoffset: 0; }
}

/* ---- 场景轮播：底部三段进度条（可点），当前一段随时间填满 ---- */
.vl-dots { position: fixed; left: 50%; bottom: max(26px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 4;
  display: flex; gap: 14px; }
.vl-dot { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  color: rgba(255,240,222,.55); font: 500 12px/1 "IBM Plex Sans", "PingFang SC", sans-serif; letter-spacing: .12em; transition: color .2s; }
.vl-dot:hover, .vl-dot.is-on { color: #fff6e8; }
.vl-dot:focus-visible { outline: 2px solid rgba(255,220,170,.8); outline-offset: 4px; border-radius: 4px; }
.vl-dot-bar { position: relative; width: 72px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.vl-dot-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #ffe0ad, #f0b070); transform: scaleX(0); transform-origin: left center; }
.vl-dot.is-on .vl-dot-bar { background: rgba(255,255,255,.32); }
.vl-scene { cursor: grab; }
.vl-scene:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .vl-scene { transform: none; inset: 0; } }
@media (max-width: 900px) {
  .vl-dots { bottom: max(64px, calc(env(safe-area-inset-bottom, 0px) + 56px)); gap: 10px; }
  .vl-dot-bar { width: 52px; }
  .vl-scene::after { background: linear-gradient(180deg, rgba(8,12,24,.45) 0%, rgba(8,12,24,.15) 40%, rgba(8,12,24,.35) 100%); }
}

/* 验证码那一步的隐藏用户名框：看不见、点不到，但留在页面里给 iPhone「密码」认账号（不用 display:none，有的密码管理器会忽略） */
.vl-user-hint { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }