/* 登录场景 v2：3D 照片球 + 两侧大图轮播 + 形态切换 + 动态点阵背景
   素材：图库内 source=抖音 的人像 / 风景照片，48 张（人像 24 / 风景 24），已做 dhash 去重 */
:root {
  /* L1 批次4：登录页明确定义为独立「深色封面」，字体/圆角/按钮形制与主站一致，
     强调色跟随主站 4 套主题。只换 RGB 分量，所有渐变 / 描边 / 按钮一起换色。 */
  --scene-accent-rgb: 126 201 169;         /* 雾绿 sage（默认） */
  --scene-accent-strong-rgb: 147 220 189;
  --scene-accent2-rgb: 139 126 240;
  --scene-accent: rgb(var(--scene-accent-rgb));
  --scene-accent2: rgb(var(--scene-accent2-rgb));
  --scene-bg0: #06080b;
  --scene-bg1: #0b1118;
}
:root[data-theme="sand"]  { --scene-accent-rgb: 224 170 118; --scene-accent-strong-rgb: 240 196 152; --scene-accent2-rgb: 198 132 170; }
:root[data-theme="slate"] { --scene-accent-rgb: 130 168 232; --scene-accent-strong-rgb: 165 196 245; --scene-accent2-rgb: 154 140 232; }
:root[data-theme="dark"]  { --scene-accent-rgb: 125 185 163; --scene-accent-strong-rgb: 160 214 194; --scene-accent2-rgb: 154 146 226; }

/* ---------- 容器 ---------- */
.auth {
  display: block;
  position: relative;
  min-height: 100vh;
  font-family: var(--font);           /* 与主站同一套字体栈 */
  background: var(--scene-bg0);
  color: #eef2f0;
  overflow: hidden;
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 0;
  overflow: hidden;
  max-width: 100vw;
}

.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.scene-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgb(var(--scene-accent-rgb) / 0.11), transparent 70%),
    radial-gradient(ellipse 50% 45% at 82% 18%, rgb(var(--scene-accent2-rgb) / 0.10), transparent 72%),
    linear-gradient(180deg, rgb(6 8 11 / 0.55) 0%, transparent 22%, transparent 74%, rgb(6 8 11 / 0.72) 100%);
}

/* ---------- 顶部 ---------- */
.scene-top {
  position: relative;
  z-index: 4;
  flex: none;
  height: 88px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(16px, 2.4vw, 34px);
}

.st-left { flex: none; display: grid; gap: 3px; }
.st-mark { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.st-mark i { width: 17px; height: 17px; color: var(--scene-accent); }
.st-sub { font-size: 9.5px; letter-spacing: 0.2em; color: rgb(255 255 255 / 0.48); text-transform: uppercase; }

.st-strip {
  flex: 1;
  min-width: 0;
  height: 58px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.st-track { display: flex; gap: 7px; width: max-content; animation: stripMove 66s linear infinite; }
.st-track img {
  height: 58px;
  width: 174px;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.5;
  filter: saturate(0.9);
  transition: opacity 0.35s;
}
.st-strip:hover .st-track { animation-play-state: paused; }
.st-strip:hover .st-track img { opacity: 0.78; }
@keyframes stripMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.st-right { flex: none; text-align: right; display: grid; gap: 2px; }
.st-right b { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: 0.02em; }
.st-right span { font-size: 10.5px; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.56); }

/* ---------- 中部：两侧轮播 + 中央舞台 ---------- */
.scene-mid {
  position: relative;
  z-index: 3;
  flex: 1;
  min-height: 0;
  padding: 0 clamp(14px, 2.4vw, 34px);
  padding-right: clamp(320px, 26vw, 388px);   /* 右侧让给登录面板 */
}

/* 两侧大图轮播：浮在球区左右边缘，不遮挡球体 */
.side-rail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(160px, 13.5vw, 186px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
/* 2026-11-08 阿润验收：两侧展示区原来贴着屏幕左缘 / 登录面板，整体往中间收 */
.side-rail[data-side="scene"] { left: clamp(28px, 3vw, 48px); }
.side-rail[data-side="portrait"] { right: clamp(356px, 28.5vw, 424px); }
.rail-label { display: flex; align-items: baseline; gap: 8px; }
.rl-cat { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 0.06em; }
.rl-en { font-size: 9px; letter-spacing: 0.22em; color: rgb(255 255 255 / 0.46); text-transform: uppercase; }

.rail-stage {
  position: relative;
  flex: none;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #0c1219;
  box-shadow: 0 18px 46px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.07);
}
.rail-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s ease, transform 7.5s linear;
}
.rail-stage img.is-on { opacity: 1; transform: scale(1); }
.rail-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgb(6 8 11 / 0.82) 100%);
}

.rail-meta {
  flex: none;
  min-height: 38px;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.78);
}
.rail-meta b { display: block; color: rgb(255 255 255 / 0.9); font-weight: 600; font-size: 12.5px; }
.rail-meta em { font-style: normal; color: rgb(255 255 255 / 0.58); }

.rail-dots { flex: none; display: flex; gap: 5px; flex-wrap: wrap; }
.rail-dots button {
  width: 14px;
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.3);
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
}
.rail-dots button.on { background: var(--scene-accent); width: 24px; }

/* ---------- 中央舞台：三种形态 ---------- */
.stage-core { position: relative; height: 100%; min-height: 0; width: 100%; }
.stage-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.965);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stage-view.is-on { opacity: 1; pointer-events: auto; transform: none; }

/* 形态 1：3D 照片球 */
.sphere-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1500px;
  cursor: grab;
  touch-action: none;
}
.sphere-wrap.dragging { cursor: grabbing; }
.sphere {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.sf-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cw, 68px);
  height: var(--ch, 91px);
  margin-left: calc(var(--cw, 68px) / -2);
  margin-top: calc(var(--ch, 91px) / -2);
  border-radius: 6px;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.6);
  background: #0d131a;
}
.sf-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-card::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
  border-radius: 6px;
  pointer-events: none;
}
.sphere-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(var(--scene-accent-rgb) / 0.13), transparent 62%);
}

/* 形态 2：弧形画廊 */
.arc-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1300px;
}
.arc-item {
  position: absolute;
  width: clamp(150px, 15vw, 208px);
  height: calc(clamp(150px, 15vw, 208px) * 1.5);
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 22px 52px rgb(0 0 0 / 0.62);
  transition: transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, box-shadow 0.6s;
  will-change: transform;
}
.arc-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arc-ctrl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.arc-ctrl button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.05);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.arc-ctrl button:hover { background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.3); }
.arc-ctrl i { width: 15px; height: 15px; }
.arc-meta { min-width: 240px; text-align: center; font-size: 12px; color: rgb(255 255 255 / 0.78); }
.arc-meta b { display: block; color: #fff; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }

/* 形态 3：网格 */
.grid-scroll {
  position: absolute;
  inset: 6px 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 7px;
  padding: 4px 200px;
  scrollbar-width: thin;
}
.grid-scroll::-webkit-scrollbar { width: 5px; }
.grid-scroll::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.14); border-radius: 3px; }
.grid-cell {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  overflow: hidden;
  background: #0d131a;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}
.grid-cell img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.86; transition: opacity 0.25s, transform 0.25s; }
.grid-cell:hover img { opacity: 1; transform: scale(1.06); }

/* ---------- 移动端横向流（桌面隐藏） ---------- */
.scene-mflow { display: none; }

/* ---------- 底部 ---------- */
.scene-bottom {
  position: relative;
  z-index: 4;
  flex: none;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 clamp(16px, 2.4vw, 34px);
}

.mode-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.09);
}
.mode-switch button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(255 255 255 / 0.62);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.28s, background 0.28s;
}
.mode-switch button i { width: 14px; height: 14px; }
.mode-switch button:hover { color: #fff; }
.mode-switch button.active { background: rgb(var(--scene-accent-rgb) / 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgb(var(--scene-accent-rgb) / 0.32); }

.scene-meta { flex: 1; min-width: 0; text-align: center; font-size: 12.5px; color: rgb(255 255 255 / 0.84); }
.scene-meta b { color: #fff; font-weight: 600; }
.scene-meta span { color: rgb(255 255 255 / 0.62); }

.scene-tip { flex: none; font-size: 11px; letter-spacing: 0.06em; color: rgb(255 255 255 / 0.52); }

/* ---------- 登录面板（桌面：浮在球中央的玻璃卡） ---------- */
.auth .auth-panel {
  /* 在面板作用域内把浅色主题变量换成深色，seg / demo-hint / input / 按钮全部自动适配 */
  --bg: rgb(255 255 255 / 0.05);
  --surface: rgb(255 255 255 / 0.13);
  --ink: #fff;
  --muted: rgb(255 255 255 / 0.72);
  --faint: rgb(255 255 255 / 0.5);
  --border: rgb(255 255 255 / 0.14);
  --border-strong: rgb(255 255 255 / 0.26);
  --accent: rgb(var(--scene-accent-rgb));
  --accent-strong: rgb(var(--scene-accent-strong-rgb));

  position: absolute;
  z-index: 6;
  right: clamp(20px, 2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(300px, 23vw, 340px);
  max-height: calc(100vh - 188px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: rgb(9 13 18 / 0.46);
  -webkit-backdrop-filter: blur(11px) saturate(1.2);
  backdrop-filter: blur(11px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / 0.13);
  box-shadow: 0 26px 70px rgb(0 0 0 / 0.55);
  scrollbar-width: none;
}
.auth .auth-panel::-webkit-scrollbar { width: 0; }
.auth .auth-panel .auth-brand { display: none; }          /* 左上角场景里已有品牌，避免重复 */
.auth .auth-panel .auth-form-wrap { max-width: none; }
.auth .auth-panel h1 { font-size: 21px; margin-bottom: 5px; }
.auth .auth-panel .eyebrow { font-size: 10px; margin-bottom: 8px; }
.auth .auth-panel .auth-subtitle { margin-bottom: 16px; font-size: 12.5px; line-height: 1.6; }
.auth .auth-panel .seg { margin-bottom: 15px; }
.auth .auth-panel .auth-foot { margin-top: 16px; font-size: 11px; }
.auth .auth-visual { display: none; }

/* 测试账号提示：降为描边次级卡片，保证绿色主 CTA 唯一 */
.auth .auth-panel .demo-hint {
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.04);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  margin-bottom: 13px;
}
.auth .auth-panel .demo-hint-head { margin-bottom: 7px; }
.auth .auth-panel .demo-hint-head span { font-size: 11.5px; }
.auth .auth-panel .demo-cred code {
  background: rgb(255 255 255 / 0.07);
  border-color: rgb(255 255 255 / 0.14);
  color: rgb(255 255 255 / 0.86);
}
.auth .auth-panel .demo-note {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10.5px;
  margin-top: 7px;
}
.auth .auth-panel #useDemo {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.18);
  color: rgb(255 255 255 / 0.82);
  font-weight: 600;
  font-size: 12.5px;
  padding: 7px 12px;
}
.auth .auth-panel #useDemo:hover { background: rgb(255 255 255 / 0.08); color: #fff; filter: none; }

/* ---------- 移动端吸底登录条 ---------- */
.mobile-login-bar {
  position: fixed;
  z-index: 40;
  left: 12px;
  right: 12px;
  bottom: 14px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: var(--radius);
  background: rgb(13 18 24 / 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.5);
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-login-bar span { font-size: 12.5px; color: rgb(255 255 255 / 0.66); }
.mobile-login-bar b { color: #fff; margin-right: 4px; }
.mobile-login-bar button {
  flex: none;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(var(--scene-accent-rgb)), rgb(var(--scene-accent2-rgb)));
  color: #101820;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 900px) {
  .mobile-login-bar { display: flex; }
  .mobile-login-bar.show { transform: none; }
}

/* ============ 移动端 ============ */
@media (max-width: 900px) {
  .auth {
    min-height: 100vh;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #06080b 0%, #080c11 60%, #0b1016 100%);
  }
  .scene {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 78vh;
    display: block;
    padding-bottom: 14px;
  }
  .scene-veil { display: none; }
  .scene-top { height: auto; padding: 16px 16px 10px; flex-direction: column; align-items: stretch; gap: 10px; }
  .st-left { display: flex; align-items: center; justify-content: space-between; }
  .st-sub { display: none; }
  .st-strip { height: 46px; }
  .st-track img { height: 46px; width: 138px; }
  .st-right { display: none; }

  .scene-mid { display: block; padding: 0 12px; }
  .side-rail { display: none; position: static; transform: none; width: auto; }
  .stage-core { height: 348px; }

  .scene-mflow {
    display: block;
    position: relative;
    z-index: 3;
    margin: 16px 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .scene-mflow::-webkit-scrollbar { display: none; }
  .mf-track { display: flex; gap: 8px; padding: 0 12px; width: max-content; }
  .mf-track img { width: 104px; height: 156px; object-fit: cover; border-radius: 8px; opacity: 0.92; box-shadow: 0 8px 22px rgb(0 0 0 / 0.45); }

  .scene-bottom { height: auto; padding: 8px 12px 4px; flex-direction: column; gap: 10px; }
  .mode-switch { align-self: center; }
  .mode-switch button { padding: 6px 12px; font-size: 12px; }
  .scene-meta { font-size: 11.5px; }
  .scene-tip { text-align: center; font-size: 10.5px; }

  .auth .auth-panel {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    max-height: none;
    overflow: visible;
    margin: 14px 12px 26px;
    padding: 22px 20px;
    background: rgb(13 18 24 / 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgb(255 255 255 / 0.08);
  }
}

@media (max-width: 400px) {
  .mode-switch button span { display: none; }
  .mode-switch button { padding: 7px 12px; }
}