/* ===========================================================================
   音箱后台管理 · 样式（Element Plus 版）
   ===========================================================================
   几条约定：
   1. **不引任何外部资源**（字体/CDN/图标库）。这个后端常常部署在内网，
      没有外网就整个界面垮掉 —— 那是最难解释的一类故障。
   2. 配色与小程序一致（主色 #1558c0）。这里**不用适老化那套大字号**：
      运营人员的桌面工具，信息密度优先。
   3. 颜色语义固定：绿=正常/成功，橙=需要关注，红=停用/危险，蓝=进行中。
      涨跌红绿那套是给行情用的，这里不适用。
   4. 组件外观交给 Element Plus；这个文件只管「布局」和「它管不了的部分」。
   =========================================================================== */

:root {
  --bg: #f2f4f7;
  --panel: #ffffff;
  --line: #e3e7ec;
  --line-strong: #cfd6de;
  --ink: #1a1d21;
  --ink-2: #545c68;
  --ink-3: #7a828d;
  --brand: #1558c0;
  --brand-dark: #124a9e;
  --brand-soft: #eaf1fc;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(26, 29, 33, .08), 0 6px 20px rgba(26, 29, 33, .05);

  /* 让 Element Plus 用我们的主色，而不是它默认的 #409eff */
  --el-color-primary: #1558c0;
  --el-color-primary-light-3: #4d7fd0;
  --el-color-primary-light-5: #8aa9de;
  --el-color-primary-light-7: #b8cbea;
  --el-color-primary-light-8: #d0ddf1;
  --el-color-primary-light-9: #eaf1fc;
  --el-color-primary-dark-2: #124a9e;
  --el-font-size-base: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.55 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

[hidden] { display: none !important; }

/* ============================= 通用小件 ============================= */

.dim { color: var(--ink-3); font-size: 12.5px; line-height: 1.7; margin: 4px 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.wrap { word-break: break-all; }
.nowrap { white-space: nowrap; }
.spacer { flex: 1 1 auto; }

.loading-box { padding: 26px 0; text-align: center; color: var(--ink-3); font-size: 13px; }
.footnote { margin: 12px 0 0; }
.block-title { margin: 20px 0 10px; font-size: 14px; font-weight: 600; }
.block-head { margin: 20px 0 10px; }
.inner-table { margin-top: 10px; }

/* ============================= 登录 ============================= */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 28px;
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.brand-mark {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 24px;
  line-height: 44px;
  text-align: center;
}
.brand-mark.small { width: 32px; height: 32px; font-size: 17px; line-height: 32px; border-radius: 9px; }
.login-title { font-size: 19px; font-weight: 600; }
.login-sub { font-size: 12.5px; color: var(--ink-3); }
.login-form .el-form-item { margin-bottom: 16px; }
.login-error { margin: 0 0 14px; font-size: 12.5px; color: #b02525; line-height: 1.6; }
.login-submit { width: 100%; }

/* ============================= 布局 ============================= */

.admin-root { min-height: 100vh; }
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 214px;
  flex: 0 0 auto;
  background: #1f2937;
  color: #e5e8ec;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  /* ★ 粘住视口，不随右侧内容一起拉长。
     不加这三行的话，遇到「微信支付设置」这种超长页面时 .layout 会被内容撑高，
     侧边栏跟着变高，`margin-top:auto` 的退出登录就被推到几屏之外 —— 看起来就是「退出登录不见了」。 */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; }
.sidebar-brand-text { min-width: 0; }
.sidebar-title { font-size: 15px; font-weight: 600; }
.sidebar-sub {
  font-size: 12px; color: #9aa4b2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 深色侧边栏里的 el-menu：把它的默认浅色皮肤整段压掉 */
.sidebar .nav {
  border-right: 0;
  background: transparent;
  --el-menu-bg-color: transparent;
  --el-menu-text-color: #cfd6de;
  --el-menu-hover-bg-color: #2a3644;
  --el-menu-active-color: #ffffff;
}
.sidebar .nav .el-menu-item {
  height: 40px;
  line-height: 40px;
  margin-bottom: 3px;
  padding-left: 12px !important;
  border-radius: 8px;
  font-weight: 500;
}
.sidebar .nav .el-menu-item:hover { background: #2a3644; color: #fff; }
.sidebar .nav .el-menu-item.is-active { background: var(--brand); color: #fff; }

.sidebar-foot { margin-top: auto; padding-top: 16px; }
.logout-btn {
  width: 100%;
  background: #2a3644 !important;
  border-color: #3a4757 !important;
  color: #e5e8ec !important;
}
.logout-btn:hover { background: #33404f !important; }
.sidebar-info {
  margin-top: 10px; font-size: 11.5px; color: #7d8794;
  line-height: 1.7; word-break: break-all;
}

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.page-title { margin: 0; font-size: 17px; font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; gap: 8px; }
.page { padding: 18px 22px 60px; }

/* ============================= 卡片 / 筛选 ============================= */

.filter-card { margin-bottom: 16px; }
.filter-card .el-card__body { padding: 14px 16px; }
.section-card { margin-bottom: 16px; }
.section-card .el-card__header { padding: 12px 16px; }
.section-card .el-card__body { padding: 14px 16px; }

.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-title { font-size: 15px; font-weight: 600; }
.card-sub { font-size: 12.5px; color: var(--ink-3); }

.filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.inline-filters { margin-bottom: 12px; }
.filter-item { min-width: 160px; display: flex; flex-direction: column; gap: 5px; }
.filter-item-wide { min-width: 240px; flex: 1 1 240px; }
.filter-label { font-size: 12.5px; color: var(--ink-2); }
.filter-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 1px; }

/* ============================= 概览 ============================= */

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-k { font-size: 12.5px; color: var(--ink-2); }
.stat-v { font-size: 25px; font-weight: 600; line-height: 1.3; margin-top: 4px; }
.stat-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.rate-big { font-size: 30px; font-weight: 600; line-height: 1.2; }

/* ============================= 列表 ============================= */

.batch-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pager { margin-top: 14px; justify-content: flex-end; }

.el-table { font-size: 13px; }
.el-table th.el-table__cell { background: #f7f9fc; font-size: 12.5px; }

/* ============================= 弹窗里的表单 ============================= */

.admin-form-dialog .el-dialog__body { padding-top: 10px; }
.admin-form-dialog .el-form-item { margin-bottom: 16px; }
.form-note {
  margin: 0 0 14px;
  padding: 9px 12px;
  background: #f7f9fc;
  border-left: 3px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.form-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin-top: 4px; }

.admin-info-dialog .el-dialog__body { max-height: 70vh; overflow: auto; }

.secret-box { margin-top: 8px; }
.copy-box {
  display: block;
  padding: 14px;
  margin: 10px 0;
  border: 2px dashed var(--brand);
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-family: Consolas, Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  word-break: break-all;
  user-select: all;
}
.secret-box p { margin: 8px 0 0; }

/* ============================= 试听播放器 ============================= */

.preview-meta { margin: 0 0 14px; color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.preview-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 4px;
}
.preview-toggle { min-width: 82px; }
.preview-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 时间轴：缓冲区间与播放进度各自画，el-slider 只负责拖动和滑块 */
.preview-timeline { position: relative; height: 34px; margin: 10px 0 6px; }
.preview-buffered,
.preview-played {
  position: absolute;
  left: 0;
  top: 14px;
  height: 6px;
  border-radius: 3px;
  pointer-events: none;
}
.preview-buffered { width: 100%; background: #e9edf2; overflow: hidden; }
.preview-buffered span { position: absolute; height: 100%; background: #9daebe; }
.preview-played { width: 0; background: var(--brand); z-index: 1; }

.preview-seek { position: absolute; inset: 0; z-index: 2; }
.preview-seek .el-slider { height: 34px; }
.preview-seek .el-slider__runway { margin: 14px 0; height: 6px; background: transparent; }
.preview-seek .el-slider__bar { background: transparent; }
.preview-seek .el-slider__button-wrapper { top: -11px; }
.preview-seek .el-slider__button { width: 16px; height: 16px; border: 2px solid var(--brand); }

.preview-feedback {
  display: flex; justify-content: space-between; gap: 8px 16px;
  flex-wrap: wrap; font-size: 12.5px;
}
.preview-status { color: var(--ink-2); }
.preview-buffer-text { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ============================= 微信支付设置 ============================= */

/* 和其他页面一样：卡片 + card-head + 两列表单。这里只保留「字段怎么排」的样式，
   不再有独立的页头、说明栏、步骤列表 —— 页面只放数据和操作。 */
.view-payment .el-form-item { margin-bottom: 0; }
.view-payment .el-form-item__label { padding-bottom: 4px; line-height: 1.4; }

.pay-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}
.pay-grid .pay-wide { grid-column: 1 / -1; }

.pay-section-title {
  margin: 20px 0 12px; padding-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.pay-section-title:first-child { margin-top: 0; }

.pay-field-top { display: inline-flex; align-items: center; gap: 8px; }
.field-label { font-size: 13px; color: #39434e; font-weight: 500; }
.pay-flag { font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.pay-flag.is-saved { color: #126448; background: #eef8f3; }
.pay-flag.is-required { color: #b02525; background: #fdeaea; }

/* ============================= 窄屏 ============================= */

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: static; overflow: visible;
  }
  .sidebar .nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .sidebar .nav .el-menu-item { margin: 0; }
  .page { padding: 14px 12px 40px; }
}
@media (max-width: 680px) {
  .pay-grid { grid-template-columns: minmax(0, 1fr); }
}