/* 登录框：左边轮播平台自己生成的短片，右边是表单（参考即梦 / LibTV 的双栏登录）。
   基础样式（输入框、按钮、Tab）仍在 base.css，这里只管双栏布局和展示区。
   窄屏只留表单：展示区不渲染，js/login-show.js 也不会去拉视频。 */
/* 高度固定、表单从顶上排：登录 / 注册来回切，弹窗不跟着伸缩，标题和 Tab 也不跳，只有下面的输入栏变。
   700 是注册页（Google + 邮箱 + 密码 + 邀请码）刚好放下的高度；屏幕更矮、或者多出验证码栏时表单区自己滚。 */
#login .box.loginsplit{width:min(920px,100%);height:min(700px,calc(100dvh - 48px));padding:0;display:grid;
  grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:minmax(0,1fr);overflow:hidden;border-radius:16px;
  box-shadow:0 32px 96px rgba(0,0,0,.42)}
.loginmain{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;padding:44px 40px 36px}
#login .loginmain h2{font-size:26px}
/* 主按钮反色：深色主题白底黑字、浅色主题黑底白字。颜色交给左边的片子，青色只留给输入焦点和 logo */
#login .go{background:var(--fg);color:var(--bg)}
#login .go:hover:not(:disabled){opacity:.88}
#login .go:disabled{background:var(--hole);color:var(--dim)}

.loginshow{position:relative;margin:8px 0 8px 8px;border-radius:11px;overflow:hidden;background:#0b0d0e;isolation:isolate;
  color:#fff;min-height:0}
.loginshow video,.loginshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.loginshow video{opacity:0;transition:opacity .8s ease}
.loginshow video.on{opacity:1}
/* 上下两道压暗，让标题和说明在任何画面上都读得清 */
.loginshow::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0,rgba(0,0,0,.18) 26%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 52%,rgba(0,0,0,.8) 100%)}
.lsh-head{position:absolute;left:28px;right:28px;top:30px;z-index:2}
.lsh-head strong{display:block;font-size:30px;line-height:1.3;font-weight:700;letter-spacing:.02em;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.lsh-head span{display:block;margin-top:10px;font-size:13px;color:rgba(255,255,255,.84);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.lsh-cap{position:absolute;left:28px;right:28px;bottom:26px;z-index:2}
.lsh-tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:11px;color:rgba(255,255,255,.9)}
.lsh-tag .ui-icon{width:12px;height:12px}
.lsh-title{margin:10px 0 6px;font-size:18px;font-weight:650;line-height:1.4}
#login .lsh-prompt{margin:0 0 14px;font-size:12px;line-height:1.65;color:rgba(255,255,255,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lsh-foot{display:flex;align-items:center;gap:12px;min-height:28px}
.lsh-dots{display:flex;gap:6px}
.lsh-dots button{position:relative;width:16px;height:4px;padding:0;border:0;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.32);cursor:pointer;transition:width .3s ease}
.lsh-dots button[aria-current="true"]{width:32px}
/* 当前那一格按播放进度填满（--p 由脚本写，0~1） */
.lsh-dots button::after{content:'';position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.lsh-dots button[aria-current="true"]::after{transform:scaleX(var(--p,1))}
#login .lsh-dots button:disabled{opacity:1}
.lsh-pause{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);color:#fff;cursor:pointer}
.lsh-pause:hover{background:rgba(255,255,255,.28)}
.lsh-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lsh-pause .ui-icon{width:13px;height:13px}

@media(max-width:860px){
  #login .box.loginsplit{width:min(440px,100%);height:min(720px,calc(100dvh - 48px));grid-template-columns:minmax(0,1fr)}
  .loginshow{display:none}
}
@media(max-width:480px){
  #login .box.loginsplit{height:min(680px,calc(100dvh - 24px))}
  .loginmain{padding:28px 22px 24px}
  #login .loginmain h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .loginshow video{transition:none}
  .lsh-dots button{transition:none}
}