/* ==========================================================================
   登录 / 注册页 定制样式（本地镜像自建，不改动打包产物 app.css）
   --------------------------------------------------------------------------
   1) 更换整页背景：深空蓝紫渐变 + 柔光 + 细网格 + 原子轨道环
   2) 布局改为：顶部文案（横向） → 下方「6 个物理可视化动画(左)」+「12 个免费实验(右)」横向并排
   3) 隐藏顶部导航（产品下载 / 联系我们 / 帮助中心）
   4) 右侧「免费实验」展示位：4 列 × 3 行（12 个），单张缩略图 209×118
   5) 左侧物理可视化动画：6 个 Canvas 卡片（2 列 × 3 行），单卡 260×146（比上一版再缩小）
   6) 整页内容控制在一屏内，右侧不出现纵向滚动条
   ========================================================================== */

/* ---------------- 1. 背景 ---------------- */
.app-layout.is_login {
  background-color: #050a14 !important;
  background-image:
    /* 右上冷光（主光） */
    radial-gradient(1250px 720px at 82% -12%, rgba(62, 126, 255, .52), rgba(62, 126, 255, 0) 62%),
    /* 左上紫色补光 */
    radial-gradient(760px 520px at 6% -6%, rgba(126, 92, 255, .26), rgba(126, 92, 255, 0) 66%),
    /* 左下青绿光 */
    radial-gradient(940px 640px at 2% 104%, rgba(24, 196, 178, .24), rgba(24, 196, 178, 0) 64%),
    /* 中部紫光 */
    radial-gradient(860px 580px at 52% 48%, rgba(120, 88, 255, .16), rgba(120, 88, 255, 0) 68%),
    /* 底色 */
    linear-gradient(168deg, #060b18 0%, #091428 40%, #06101f 70%, #04070f 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
  isolation: isolate;
  /* 内容比一屏高，允许整页纵向滚动（原样式是 100vh + overflow:hidden 会裁掉） */
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* 细网格（中心清晰、四周淡出） */
.app-layout.is_login::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(128, 172, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 172, 255, .055) 1px, transparent 1px);
  background-size: 52px 52px, 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 44%, #000 38%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 44%, #000 38%, transparent 100%);
}

/* 原子轨道环（物理意象）+ 中心辉光 */
.app-layout.is_login::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .75;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none'%3E%3Cellipse cx='1050' cy='330' rx='430' ry='158' stroke='%237db0ff' stroke-opacity='.22' stroke-width='1.1'/%3E%3Cellipse cx='1050' cy='330' rx='430' ry='158' stroke='%237db0ff' stroke-opacity='.10' stroke-width='1.1' transform='rotate(58 1050 330)'/%3E%3Cellipse cx='1050' cy='330' rx='430' ry='158' stroke='%237db0ff' stroke-opacity='.10' stroke-width='1.1' transform='rotate(-58 1050 330)'/%3E%3Cellipse cx='1050' cy='330' rx='300' ry='104' stroke='%2355e0d0' stroke-opacity='.16' stroke-width='1'/%3E%3Ccircle cx='1050' cy='330' r='7' fill='%23a8ccff' fill-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 承载内容的层要压在装饰层之上 */
.app-layout.is_login .global-header,
.app-layout.is_login .login-container,
.app-layout.is_login footer {
  position: relative;
  z-index: 2;
}

/* ---------------- 2. 隐藏顶部导航 ---------------- */
.global-header .middle-container {
  display: none !important;
}

/* ---------------- 3. 布局：三栏（动画 536 | 免费实验 884 | 登录卡 360），文案横跨前两栏 ---------------- */
.app-layout.is_login .login-container {
  display: grid !important;
  /* 用 fr 比例（536 : 884）分配，1920 下精确为 536 / 884，窄屏等比收缩 */
  grid-template-columns: minmax(0, 536fr) minmax(0, 884fr) 360px;
  grid-template-rows: auto auto;
  /* 内容不足一屏时垂直居中（safe 保证内容超高时不会向上溢出） */
  align-content: safe center;
  align-items: start;
  column-gap: clamp(18px, 1.5vw, 26px);
  row-gap: clamp(12px, 1.5vh, 20px);
  padding: clamp(12px, 2.2vh, 26px) clamp(20px, 2.4vw, 44px) clamp(14px, 2.4vh, 28px) !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
  min-height: 0;
}

/* 顶部通栏文案：位于「可视化动画 + 免费实验」上方，横向铺开 */
.app-layout.is_login .login-container .desc-container {
  grid-column: 1 / 3;
  grid-row: 1;
  width: auto !important;
  max-width: none;
  align-self: start;
  margin: 0 !important;
  padding: 0 2px;
}

.app-layout.is_login .login-container .desc-container .desc {
  margin-top: 0 !important;
  font-size: clamp(13px, .94vw, 15.2px) !important;
  line-height: 1.95 !important;
  letter-spacing: .3px;
  color: rgba(202, 218, 244, .78) !important;
  text-shadow: none !important;
}

/* 文案前的小竖条（与「免费实验」标题同一视觉语言） */
.app-layout.is_login .login-container .desc-container .desc::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 10px;
  vertical-align: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6fa8ff, #35d0ba);
  box-shadow: 0 0 10px rgba(53, 208, 186, .55);
}

/* 内容区（第二行）：左「可视化动画」｜右「免费实验」，横向并排（536 : 884） */
.media-wrap {
  grid-column: 1 / 3;
  grid-row: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 536fr) minmax(0, 884fr);
  justify-content: space-between;
  align-items: start;
  /* 与 login-container 的列间距保持一致，两块宽度才能精确落在 536 / 884 */
  gap: clamp(18px, 1.5vw, 26px);
}

/* 右：登录卡片，纵向贯穿两行，贴顶 */
.app-layout.is_login .login-container .logn-content {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  flex: 0 0 360px;
  width: 360px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------------- 4. 免费实验展示位（右侧，4 列 × 3 行，单图 209×118） ---------------- */
.fexp-panel {
  width: auto;
  min-width: 0;
  max-width: none;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  animation: fexpIn .55s cubic-bezier(.22, .8, .3, 1) both;
}

@keyframes fexpIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.fexp-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 2px;
}

.fexp-head .bar {
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6fa8ff, #35d0ba);
  box-shadow: 0 0 10px rgba(53, 208, 186, .55);
}

.fexp-head .t {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: .5px;
}

.fexp-head .s {
  margin-left: auto;
  font-size: 12px;
  color: rgba(190, 210, 245, .5);
  letter-spacing: .3px;
}

.fexp-grid {
  display: grid;
  /* 12 个实验：4 列 × 3 行 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.fexp-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  background: rgba(255, 255, 255, .045);
  /* 用内阴影代替 1px 边框，保证缩略图内容区精确 209×118 */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .13) inset;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.fexp-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .075);
  box-shadow: 0 0 0 1px rgba(88, 146, 255, .8) inset,
              0 14px 30px -14px rgba(58, 118, 255, .9);
}

.fexp-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a1322;
  overflow: hidden;
}

.fexp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

/* 统一缩略图色调：把白底截图压成冷调，与深色封面放在一起不打架 */
.fexp-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(156deg, rgba(12, 24, 52, .42) 0%, rgba(8, 16, 34, .20) 58%, rgba(28, 60, 120, .16) 100%);
}

.fexp-card:hover .fexp-thumb img {
  transform: scale(1.06);
}

/* 缩略图底部压暗，让角标更清楚 */
.fexp-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 8, 18, 0) 55%, rgba(3, 8, 18, .45) 100%);
  pointer-events: none;
}

/* 「免费」角标 */
.fexp-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 11px;
  line-height: 16px;
  color: #04241f;
  font-weight: 700;
  letter-spacing: .5px;
  background: linear-gradient(90deg, #4de3c6, #7cf0d8);
  box-shadow: 0 2px 10px rgba(53, 208, 186, .45);
}

.fexp-name {
  padding: 8px 10px 9px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .92);
  border-top: 1px solid rgba(255, 255, 255, .07);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 空态 / 加载态 */
.fexp-empty {
  padding: 34px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(190, 210, 245, .45);
  border: 1px dashed rgba(255, 255, 255, .13);
  border-radius: 11px;
}

/* 未登录点击时给个轻提示 */
.fexp-tip {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 9999;
  padding: 11px 24px;
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
  background: rgba(12, 22, 42, .94);
  border: 1px solid rgba(88, 146, 255, .5);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.fexp-tip.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 输入框抖动，提示去登录 */
@keyframes fexpShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); }
  90% { transform: translateX(2px); }
}

.fexp-shake {
  animation: fexpShake .5s ease;
  box-shadow: 0 0 0 3px rgba(255, 110, 110, .35) !important;
  border-radius: 6px;
}

/* ---------------- 5. 物理可视化动画（左侧，6 个卡片：2 列 × 3 行，单卡 260×146） ---------------- */
.phys-gallery {
  width: auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 0;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.phys-tile {
  position: relative;
  border-radius: 14px;
  /* 用内阴影代替 1px 边框，保证画面区精确 434×244 */
  border: 0;
  background: linear-gradient(160deg, rgba(16, 30, 60, .55), rgba(6, 12, 26, .60));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 18px 44px -26px rgba(0, 0, 0, .9);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease;
  animation: fexpIn .55s cubic-bezier(.22, .8, .3, 1) both;
}

.phys-tile:hover {
  box-shadow: 0 0 0 1px rgba(88, 146, 255, .6) inset, 0 20px 46px -24px rgba(58, 118, 255, .6);
}

.phys-tile:nth-child(1) { animation-delay: .02s; }
.phys-tile:nth-child(2) { animation-delay: .07s; }
.phys-tile:nth-child(3) { animation-delay: .12s; }
.phys-tile:nth-child(4) { animation-delay: .17s; }
.phys-tile:nth-child(5) { animation-delay: .22s; }
.phys-tile:nth-child(6) { animation-delay: .27s; }

.phys-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 100% at 18% 0%, rgba(58, 108, 210, .16), rgba(6, 12, 26, 0) 62%),
    linear-gradient(180deg, rgba(10, 20, 40, .55), rgba(4, 8, 18, .65));
}

.phys-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.phys-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(210, 226, 250, .88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phys-label i {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35d0ba;
  box-shadow: 0 0 8px rgba(53, 208, 186, .8);
  animation: physPulse 1.6s ease-in-out infinite;
}

@keyframes physPulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* ---------------- 6. 窄屏 / 小屏适配 ---------------- */
/* 放不下 536 + 884 + 360 时，三栏按 536 : 884 比例分配宽度（卡片尺寸等比缩小） */
@media (max-width: 1919px) {
  .app-layout.is_login .login-container {
    grid-template-columns: minmax(0, 536fr) minmax(0, 884fr) 340px;
    column-gap: 20px;
  }
  .app-layout.is_login .login-container .logn-content {
    flex: 0 0 340px;
    width: 340px;
  }
  .phys-gallery { gap: 12px; }
  .media-wrap { grid-template-columns: minmax(0, 536fr) minmax(0, 884fr); }
  .fexp-grid { gap: 14px; }
}

@media (max-width: 1400px) {
  .app-layout.is_login .login-container {
    grid-template-columns: minmax(0, 536fr) minmax(0, 884fr) 320px;
  }
  .app-layout.is_login .login-container .logn-content {
    flex: 0 0 320px;
    width: 320px;
    padding: 0 30px;
  }
  .fexp-head .t { font-size: 15px; }
  .fexp-name { font-size: 12px; padding: 7px 8px; }
  .phys-label { font-size: 11.5px; }
}

/* 三栏挤不下时改为单栏：文案 → 登录卡 → 动画 → 免费实验 */
@media (max-width: 1080px) {
  .app-layout.is_login .login-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    padding: 0 22px 24px !important;
  }
  .app-layout.is_login .login-container .desc-container {
    grid-column: 1;
    grid-row: 1;
  }
  .app-layout.is_login .login-container .logn-content {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin-top: 8px;
  }
  .media-wrap {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 8px;
  }
  .fexp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fexp-head .s { display: none; }
}

@media (max-width: 720px) {
  .phys-gallery { grid-template-columns: minmax(0, 1fr); }
  .fexp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}