/* ============================================================
   站内主题 · T8 紫粉渐变（2026-11-14）
   - 背景：左上紫 → 右下粉的对角渐变
   - 卡片：纯白，与背景形成层次
   - 主色：紫 #9B6FB0 / 深紫 #835593
   - 覆盖站点原米黄（--card:#EFEBDC）与暖棕（--primary:#CB8D73）
   - 登录/注册页（body.gskin）保持原樱花粉皮肤，不受影响
   ============================================================ */

/* ---------- 1. 主题变量 ---------- */
:root {
  --bg: #F4ECFC;

  --panel: rgba(255, 255, 255, .92);
  --card: #FFFFFF;

  --primary: #9B6FB0;
  --primary-deep: #835593;
  --primary-soft: rgba(155, 111, 176, .10);

  --text-2: #645A6C;
  --text-3: #A29AAB;

  --line: #EADCF1;

  --shadow: 0 2px 12px rgba(92, 58, 110, .08);
  --shadow-hover: 0 4px 18px rgba(92, 58, 110, .14);

  --success: #9B6FB0;
  --success-soft: rgba(155, 111, 176, .12);

  /* 原 warn 底为土黄 rgba(217,142,4,.12)，图标底板会显黄块 → 统一改淡紫，
     但 --warn 文字保持橙色，告警语义不丢 */
  --warn-soft: rgba(155, 111, 176, .14);

  --van-button-primary-background: #835593;
  --van-button-primary-border-color: #835593;
  --van-dialog-confirm-button-text-color: #9B6FB0;
}

/* ---------- 2. 页面底色：紫 → 粉 对角渐变 ---------- */
html { background: #F4ECFC !important; }

body:not(.gskin) {
  background: linear-gradient(155deg, #F4ECFC 0%, #F8E9FA 45%, #FDE8F1 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

body:not(.gskin) #app,
body:not(.gskin) .app-shell,
body:not(.gskin) .app-wrapper,
body:not(.gskin) .main-area {
  background: transparent !important;
}

/* ---------- 3. 顶栏 / 页内标题条（原 rgba(239,206,196,.88) 暖粉，改半透明紫） ---------- */
body:not(.gskin) .pagehead,
body:not(.gskin) header.pagehead {
  background: rgba(246, 238, 253, .9) !important;
  border-bottom: 1px solid rgba(234, 220, 241, .9) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* 顶部剩余天数徽标（原黄色 warn 底）改为主色淡紫 */
body:not(.gskin) .g-badge.warn {
  background: var(--primary-soft) !important;
  color: var(--primary-deep) !important;
}

/* 右下角悬浮球（原樱花粉渐变）跟随主题改紫 */
body:not(.gskin) #g-inv-btn {
  background: linear-gradient(180deg, #B992D0, #9B6FB0) !important;
  box-shadow: 0 6px 18px rgba(155, 111, 176, .42) !important;
}

/* ---------- 4. 侧边栏 / 抽屉（原 #efebdc 米黄） ---------- */
body:not(.gskin) .sidebar {
  background: rgba(255, 255, 255, .74) !important;
  border-right: 1px solid var(--line) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- 5. 数据表弹层 / 日志框（原 #efebdc 米黄） ---------- */
body:not(.gskin) .dt-sheet,
body:not(.gskin) .log-box {
  background: rgba(255, 255, 255, .96) !important;
}

/* 弹层遮罩下的表头保持淡紫，避免白色一片 */
body:not(.gskin) .dt-sheet .dt-head {
  background: rgba(248, 242, 253, .96);
}

/* ---------- 6. 登录/注册页保持樱花粉 ---------- */
html:has(body.gskin) { background: #ffd9e8 !important; }

/* ---------- 8. 游戏账号页：工具条内联「新增账号」 ---------- */
body:not(.gskin) .acc-list .tool-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

/* 原来用于把搜索框顶到右边的占位，改成搜索框自适应居中 */
body:not(.gskin) .acc-list .tool-row .flex-fill { display: none !important; }

/* 全选 / 反选 不再被挤压换行 */
body:not(.gskin) .acc-list .tool-row .g-btn.sm.plain {
  flex: 0 0 auto !important;
  white-space: nowrap;
  padding: 7px 9px !important;
  font-size: 12.5px !important;
}

body:not(.gskin) .acc-list .tool-row .search-ipt {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 3px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  text-align: center;
}

body:not(.gskin) .acc-list .tool-row .g-btn.add-acc-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  background: var(--primary-deep) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0 11px !important;
  font-size: 12.5px !important;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(131, 85, 147, .26);
}

/* ---------- 9. 手机端表单自适应：单列 + 提示文字移到输入框下方 ---------- */
@media (max-width: 768px) {
  body:not(.gskin) { overflow-x: hidden; }

  /* 原来是两列网格，窄屏下每列 307px 会撑破屏幕 → 改单列满宽 */
  body:not(.gskin) .form-grid {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* 字段：输入框在上、说明文字在下 */
  body:not(.gskin) .g-field {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 8px 0 !important;
  }
  body:not(.gskin) .g-field > input,
  body:not(.gskin) .g-field > select,
  body:not(.gskin) .g-field > textarea {
    order: 1;
    width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box;
  }
  body:not(.gskin) .g-field > label {
    order: 2;
    width: auto !important;
    flex: 0 0 auto !important;
    font-size: 12px !important;
    line-height: 1.45;
    color: var(--text-3) !important;
    padding-left: 2px;
    white-space: normal;
    word-break: break-word;
  }

  /* 弹窗内的表单同样处理 */
  body:not(.gskin) .van-dialog .g-field,
  body:not(.gskin) .g-modal .g-field {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ---------- 10. 顶部胶囊导航（N1 · 每行固定 5 个） ---------- */
.g-topnav { display: none; }

@media (max-width: 768px) {
  .g-topnav {
    display: flex;
    flex-wrap: wrap;           /* 10 项 → 两行，每行 5 个，不滑动 */
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    overflow: visible;
    padding: 8px 10px;
    position: sticky;
    top: 55px;                 /* 顶栏高度 */
    z-index: 60;
    background: rgba(246, 238, 253, .93);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(234, 220, 241, .9);
  }

  /* 每行 5 个：宽度 = (100% - 4×6px 间隙) / 5 */
  .g-topnav-it {
    flex: 0 0 calc((100% - 24px) / 5);
    box-sizing: border-box;
    padding: 8px 2px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(234, 220, 241, .95);
    color: #645A6C;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(92, 58, 110, .05);
    transition: background .15s, color .15s;
  }

  .g-topnav-it.on {
    background: #835593;
    border-color: #835593;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(131, 85, 147, .32);
  }

  /* 顶部导航已承担跳转，页面内容顶部留一点呼吸 */
  .g-topnav + main.content { padding-top: 2px; }

  /* ---------- 11. 手机端彻底停用左侧抽屉 ---------- */
  body:not(.gskin) .nav-burger { display: none !important; }
  body:not(.gskin) .sidebar { display: none !important; }
  body:not(.gskin) .sidebar-mask { display: none !important; }
  /* 顶栏标题往左收，去掉汉堡留下的缩进 */
  body:not(.gskin) header.pagehead .h-left { gap: 0 !important; }
}

/* ---------- 12. 超窄屏（≤340px）微调，避免文字贴边 ---------- */
@media (max-width: 340px) {
  .g-topnav { padding: 8px 8px; }
  .g-topnav-it { font-size: 11px; padding: 8px 0; }

  body:not(.gskin) .acc-list .tool-row .search-ipt {
    font-size: 11.5px !important;
    padding: 8px 6px !important;
  }
  body:not(.gskin) .acc-list .tool-row .g-btn.sm.plain {
    padding: 7px 7px !important;
    font-size: 11.5px !important;
  }
  body:not(.gskin) .acc-list .tool-row .g-btn.add-acc-btn {
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }
}