/* ==========================================================================
   优讯云生图 · 前台（用户端）布局层
   仅补充「顶部导航 + 内容容器 + 页脚 + 生图页舞台」等前台专属结构，
   颜色、字号、圆角、阴影、动效全部取自 tokens.css
   ========================================================================== */

/* 声明式登录态切换依赖 hidden 属性，避免被组件类上的 display 覆盖 */
[hidden] {
  display: none !important;
}

body.t-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- 内容容器 ---------- */
.site-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 顶部导航（复用 t-header，去除侧栏占位） ---------- */
.t-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

.t-header.t-header--site {
  padding: 0;
}

.t-header--site .t-header__brand {
  width: auto;
  flex: none;
  padding-left: 0;
  gap: 8px;
}

.t-header--site .t-header__nav {
  margin-left: 24px;
}

.site-assets {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.site-points {
  height: 28px;
  padding: 0 10px;
  gap: 4px;
  border: 1px solid var(--td-border-level-1-color);
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-secondary);
}

.site-points:hover {
  border-color: var(--td-brand-color-3);
  color: var(--td-brand-color);
}

.site-points b {
  font-size: var(--td-font-size-body-medium);
  color: var(--td-brand-color);
}

.t-header--site .t-popup-anchor {
  position: relative;
}

/* ---------- 工作区 ---------- */
.site-main {
  flex: 1 1 auto;
  padding: 24px 0 40px;
}

/* 品牌头部条：与登录页品牌区同一套品牌色渐变 */
.site-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: var(--td-radius-medium);
  color: var(--td-text-color-anti);
  background: linear-gradient(
    135deg,
    var(--td-brand-color-10) 0%,
    var(--td-brand-color-8) 34%,
    var(--td-brand-color-7) 68%,
    var(--td-brand-color-6) 100%
  );
}

.site-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: var(--td-radius-circle);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
}

.site-hero__title {
  font-size: var(--td-font-size-headline-small);
  line-height: var(--td-line-height-headline-small);
  font-weight: var(--td-font-weight-bold);
}

.site-hero__desc {
  margin-top: 8px;
  max-width: 640px;
  font-size: var(--td-font-size-body-medium);
  color: rgba(255, 255, 255, 0.78);
}

.site-hero__actions {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- 生图结果舞台 ---------- */
.site-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 260px;
}

.site-stage__status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--td-radius-default);
  background: var(--td-brand-color-light);
  color: var(--td-brand-color);
}

.site-stage__status .t-progress {
  max-width: 320px;
}

/* ---------- 套餐卡 / 充值档位 ---------- */
.site-plan {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-plan.is-active {
  border-color: var(--td-brand-color);
  box-shadow: 0 0 0 1px var(--td-brand-color);
}

.site-plan__price {
  font-size: var(--td-font-size-headline-small);
  font-weight: var(--td-font-weight-bold);
  color: var(--td-text-color-primary);
}

.site-plan__price small {
  font-size: var(--td-font-size-body-small);
  font-weight: var(--td-font-weight-regular);
  color: var(--td-text-color-secondary);
}

.site-plan__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-secondary);
}

.site-plan__features span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.site-plan__features .t-icon {
  color: var(--td-success-color);
  flex: none;
  margin-top: 3px;
}

.site-amount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}

.site-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-container);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--td-anim-duration-base) var(--td-anim-timing-ease-default),
    box-shadow var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.site-amount:hover {
  border-color: var(--td-brand-color-3);
}

.site-amount.is-active {
  border-color: var(--td-brand-color);
  background: var(--td-brand-color-light);
  box-shadow: 0 0 0 1px var(--td-brand-color);
}

.site-amount__value {
  font-size: var(--td-font-size-title-small);
  font-weight: var(--td-font-weight-bold);
  color: var(--td-text-color-primary);
}

.site-amount__gift {
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-secondary);
}

/* ---------- 左上角汉堡菜单 + 左侧抽屉导航 ---------- */
.site-menu-btn {
  flex: none;
  margin: 0 4px 0 0;
}

/* 复用 t-drawer 结构，仅把抽屉方向改为从左侧滑出（对应左上角汉堡菜单） */
.site-drawer.t-drawer {
  left: 0;
  right: auto;
  width: 320px;
  transform: translateX(-100%);
}

.site-drawer.t-drawer.is-visible {
  transform: translateX(0);
}

.site-drawer__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--td-border-level-1-color);
}

.site-drawer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--td-font-size-body-large);
  font-weight: var(--td-font-weight-bold);
  color: var(--td-text-color-primary);
}

.site-drawer__brand .t-icon {
  color: var(--td-brand-color);
}

.site-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
}

.site-drawer__group-title {
  padding: 12px 12px 4px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

.site-drawer__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--td-radius-default);
  color: var(--td-text-color-primary);
  font-size: var(--td-font-size-body-medium);
  transition: background var(--td-anim-duration-base) var(--td-anim-timing-ease-default),
    color var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.site-drawer__item:hover {
  background: var(--td-bg-color-container-hover);
}

.site-drawer__item.is-active {
  background: var(--td-brand-color-light);
  color: var(--td-brand-color);
  font-weight: var(--td-font-weight-medium);
}

.site-drawer__item .t-icon {
  flex: none;
}

.site-drawer__item-text {
  flex: 1 1 auto;
}

.site-drawer__foot {
  flex: none;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--td-border-level-1-color);
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

.site-login-entry {
  white-space: nowrap;
}

/* ---------- 生图页：生成配置卡片 ---------- */
.site-config {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.site-config__row-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.site-config__row-title .t-form__label {
  margin-bottom: 0;
}

.site-config__row-extra {
  margin-left: auto;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

/* 选项卡片：分辨率（4 个横向卡片）与比例（横向滚动）共用同一套样式与选中态 */
.site-opt-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.site-opt-cards--scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.site-opt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-container);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--td-anim-duration-base) var(--td-anim-timing-ease-default),
    box-shadow var(--td-anim-duration-base) var(--td-anim-timing-ease-default),
    background var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.site-opt-cards--scroll .site-opt-card {
  flex: 0 0 auto;
  min-width: 108px;
  scroll-snap-align: start;
}

.site-opt-card:hover {
  border-color: var(--td-brand-color-3);
}

.site-opt-card.is-active {
  border-color: var(--td-brand-color);
  background: var(--td-brand-color-light);
  box-shadow: 0 0 0 1px var(--td-brand-color);
}

.site-opt-card__label {
  font-size: var(--td-font-size-body-large);
  font-weight: var(--td-font-weight-medium);
  color: var(--td-text-color-primary);
  line-height: 1.3;
}

.site-opt-card.is-active .site-opt-card__label {
  color: var(--td-brand-color);
}

.site-opt-card__price {
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

.site-opt-card__desc {
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

.site-opt-card__badge {
  position: absolute;
  top: -1px;
  right: 6px;
  padding: 0 6px;
  border-radius: 0 0 var(--td-radius-small) var(--td-radius-small);
  background: var(--td-brand-color);
  color: var(--td-text-color-anti);
  font-size: var(--td-font-size-s);
  line-height: 16px;
}

/* 选择「自定义」比例后展开的宽高输入 */
.site-ratio-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.site-ratio-custom .t-input {
  width: 140px;
}

.site-ratio-custom__times {
  font-size: var(--td-font-size-body-large);
  font-weight: var(--td-font-weight-bold);
  color: var(--td-text-color-placeholder);
}

/* 生成数量滑块下方的实时费用提示（14px） */
.site-cost-hint {
  margin-top: 8px;
  font-size: var(--td-font-size-m);
  color: var(--td-text-color-secondary);
}

.site-cost-hint b {
  color: var(--td-error-color);
  font-size: var(--td-font-size-l);
}

.site-cost-hint small {
  margin-left: 8px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

.site-field-hint {
  margin-top: 8px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

/* 背景 / 图片格式等单选行的补充说明 */
.site-radio-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.site-radio-note {
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

.site-tip-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

/* 参考图（可选）：默认收起，由按钮展开 */
.site-ref-panel {
  margin-top: 12px;
}

.site-config__footer-note {
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

/* ---------- 页脚 ---------- */
.site-footer {
  padding: 16px 0 24px;
  border-top: 1px solid var(--td-border-level-1-color);
  background: var(--td-bg-color-container);
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--td-text-color-secondary);
}

.site-footer a:hover {
  color: var(--td-brand-color);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .t-header--site .t-header__nav {
    margin-left: 12px;
  }

  .site-opt-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .t-header--site .t-header__nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .site-container {
    padding: 0 16px;
  }

  .site-main {
    padding: 16px 0 32px;
  }

  .t-header--site .t-header__subtitle {
    display: none;
  }

  .site-hero {
    padding: 20px;
  }
}

/* ---------- 登录态页头溢出防护 ----------
   登录后页头右侧才会出现「积分胶囊 + 用户菜单」，而 .t-header 是固定高度（56px /
   生图页 52px）、.t-header__inner 与 .t-header__actions 均为 flex:none，登录态下
   窄屏（≤400px）、浏览器放大字号、余额位数变多或出现「不足」标签时整行会超出视口；
   生图页又是 body.gx { height:100dvh; overflow:hidden }，溢出部分无法滚动出来，
   表现为元素错位 / 被裁切 / 重叠。
   这里让「品牌区」单独承担收缩（标题走省略号），积分与用户菜单保持完整且不换行。 */
.t-header--site .t-header__inner {
  min-width: 0;
}

.t-header--site .t-header__brand {
  flex: 0 1 auto;
  min-width: 0;
}

.t-header--site .t-header__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .t-header--site .t-header__inner {
    padding: 0 12px;
  }

  .t-header--site .site-points {
    padding: 0 8px;
  }
}