/* 视口宽度大于 450px 时（电脑/平板横屏）：主内容区固定 450px 居中；手机端仍铺满 */

@media (min-width: 451px) {
  .phone {
    max-width: 450px;
    width: 100%;
  }

  /* 底栏居中逻辑在 tabbar-main-nav.css（max-width + margin:auto），此处不再覆盖 */

  .btn-submit {
    left: 50%;
    right: auto;
    width: 450px;
    max-width: 450px;
    transform: translateX(-50%);
    box-sizing: border-box;
  }

  .sheet {
    left: 50%;
    right: auto;
    width: 450px;
    max-width: 450px;
    transform: translateX(-50%) translateY(calc(100vh + 80px));
    pointer-events: none;
  }

  .sheet.show {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  /* 划转中心等页：底部钱包列表与主内容同宽居中 */
  .tf-sheet {
    left: 50%;
    right: auto;
    width: 450px;
    max-width: 450px;
    transform: translateX(-50%) translateY(100%);
  }

  .tf-sheet.is-open {
    transform: translateX(-50%) translateY(0);
  }

  /* 量化页底部弹层与主栏同宽，避免宽于 .phone 造成「宽度超出」 */
  .qt-sheet {
    left: 50%;
    right: auto;
    width: 450px;
    max-width: 450px;
    transform: translateX(-50%) translateY(100%);
    box-sizing: border-box;
  }

  .qt-sheet.is-open {
    transform: translateX(-50%) translateY(0);
  }

  .qt-sheet.qt-cycle-sheet {
    width: 450px;
    max-width: 450px;
  }

  .modal-mask .modal {
    max-width: 450px;
  }

  .bottom-actions {
    left: 50%;
    right: auto;
    width: 450px;
    max-width: 450px;
    transform: translateX(-50%);
  }

  /* 合约 Close / TP·SL 等底部弹层与 .phone 同宽，避免宽于主栏 */
  .ct-modal-card {
    max-width: 450px;
    width: 100%;
  }
}

/* 全站统一返回键（配合 nav-back.js [data-history-back]） */
button.app-back,
a.app-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--link, var(--primary, #2563eb));
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
  flex-shrink: 0;
}

button.app-back:active,
a.app-back:active {
  opacity: 0.72;
}

.hd .app-back {
  justify-self: start;
}

/* ICO / DEFI 等深色顶栏：返回箭头用浅色 */
.hero .app-back,
.hero-top .app-back {
  color: #fff;
}

/* -------------------------------------------------------------------------
   顶栏安全区（viewport-fit=cover + 刘海/灵动岛）：页头整体上移，返回与标题可点。
   全站背景仍可铺满（html::before / body）；仅约束常见顶栏与侧滑/弹层顶条。
   首页 index 的 header.header 已在页面内联样式含 safe-top，此处用 :not(.header) 排除。
------------------------------------------------------------------------- */
.phone > header:not(.header),
.phone > .top:first-child,
.phone .page-inner > .top:first-child,
.phone > .hd:first-child,
.so-drawer .so-drawer-hd,
.qt-sheet .qt-grid-hd {
  padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 12px));
}

/* 登录/注册/找回密码：后台「首页欢迎图」全屏底（auth-welcome-bg.js） */
.auth-welcome-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

html.auth-splash-on body > .phone {
  position: relative;
  z-index: 1;
}

/** 有配置欢迎图时主栏半透明，透出底图；无图时仍用各页原样式 */
html.auth-splash-on .phone {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-app-theme="starry_dark"].auth-splash-on .phone,
html[data-app-theme="starry_blue"].auth-splash-on .phone {
  background: rgba(6, 10, 18, 0.62) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}