/* =============================================================================
 * app.css —— H5 设计系统基础层
 * 职责：--app-* 设计令牌（PRD §七 深色主题）、reset、页面布局、TabBar、safe-area 适配
 * 约束：零 CDN、零构建；不沿用 admin 的 --shell-* 变量（两端零共享）
 * ========================================================================== */

/* ------------------------------ 设计令牌 ------------------------------ */
:root {
  --app-bg: #0f0f10;            /* 页面背景 */
  --app-card: #1c1c1e;          /* 卡片/浮层 */
  --app-card-2: #2a2a2c;        /* 次级背景 */
  --app-text: #ffffff;          /* 主文字 */
  --app-text-2: #999999;        /* 次级文字 */
  --app-text-3: #666666;        /* 三级文字/禁用 */
  --app-accent: #ff4d4f;        /* 强调红 */
  --app-accent-soft: rgba(255, 77, 79, .14);
  --app-accent-grad: linear-gradient(135deg, #ff7875, #ff4d4f);
  --app-line: #2c2c2e;          /* 分隔线 */
  --app-ok: #52c41a;
  --app-warn: #faad14;
  --app-tabbar-h: 56px;
  --app-radius: 12px;
  --app-radius-sm: 8px;
  --app-gap: 12px;
  --app-sat: env(safe-area-inset-top, 0px);
  --app-sab: env(safe-area-inset-bottom, 0px);
  --app-sal: env(safe-area-inset-left, 0px);
  --app-sar: env(safe-area-inset-right, 0px);
}

/* ------------------------------ Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button {
  font-family: inherit; border: 0; background: none; color: inherit;
  padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }
::-webkit-scrollbar { display: none; }        /* H5 全局隐藏滚动条 */

/* 通用点击反馈 */
.tap { transition: opacity .15s; }
.tap:active { opacity: .62; }

/* ------------------------------ 页面布局 ------------------------------ */
.app { min-height: 100vh; }
.app-page {
  min-height: 100vh;
  padding-bottom: calc(var(--app-tabbar-h) + var(--app-sab) + 8px);
}
/* 沉浸页（播放页/二级页）：TabBar 隐藏时仍保留底部安全区呼吸空间 */
.app-page.page--flush { padding-bottom: calc(24px + var(--app-sab)); }

/* 顶部通用导航条（二级页） */
.page-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + var(--app-sat)) 12px 8px;
  background: rgba(15, 15, 16, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.page-nav__back {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--app-card-2); color: var(--app-text);
}
.page-nav__back svg { width: 20px; height: 20px; }
.page-nav__title {
  flex: 1; min-width: 0; font-size: 16.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-nav__extra { flex: none; }

/* ------------------------------ TabBar ------------------------------ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex;
  height: calc(var(--app-tabbar-h) + var(--app-sab));
  padding-bottom: var(--app-sab);
  background: rgba(23, 23, 25, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--app-line);
  transition: transform .22s ease, opacity .22s ease;
}
.tabbar__item {
  flex: 1; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--app-text-2);
}
.tabbar__icon { width: 23px; height: 23px; }
.tabbar__label { font-size: 10.5px; line-height: 1.2; }
.tabbar__item.is-active { color: var(--app-accent); }
.tabbar--hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* ------------------------------ 通用文字 ------------------------------ */
.text-2 { color: var(--app-text-2); }
.text-3 { color: var(--app-text-3); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ellipsis-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}