/* ================================================================
   白泽设计系统 · 组件工具箱 components.css（可选 · 非强制）
   ----------------------------------------------------------------
   定位：现成的「水管件」——状态栏内的列表行、输入框、按钮、卡片、
        弹层、骨架屏等全 App 应当一致的通用 UI。
   用法：想省事、想保持一致时直接拿来用；但【不强制】。
        hero / 功能区 / 识别度区域，鼓励放开手自由设计，不必套这些类。
   原则：用工具箱是为了「不重复造水管」，不是为了「把房间也拼成水管」。
   依赖：本文件依赖 tokens.css 的变量，须在其后加载。
   ================================================================ */


/* ================================================================
   A · Canvas Shell（浏览器级展示外壳 · 非设备内 UI）
   ================================================================ */

.canvas-header { padding: 0 0 var(--space-6); max-width: 1400px; width: 100%; margin: 0 auto; }
.canvas-title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: #1D1D1F; margin-bottom: 6px; }
.canvas-subtitle { font-size: 13px; color: #6E6E73; line-height: 1.6; }
.canvas-subtitle strong { color: #1D1D1F; font-weight: 600; }
.canvas-subtitle code { background: #E5E5EA; padding: 1px 5px; border-radius: 4px; font-size: var(--text-caption); }
.canvas-meta { display: flex; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--text-caption); color: var(--text-tertiary); flex-wrap: wrap; }
.canvas-meta span { display: inline-flex; align-items: center; gap: 5px; }


/* ================================================================
   B · 三方向并列 · Variants Grid（baize-page-flow 用 · 非设备内 UI）
   ================================================================ */

.variants-grid {
  display: flex; gap: var(--space-7); padding: var(--space-6) var(--space-8) 96px;
  justify-content: center; flex-wrap: wrap;
}
.variant-col { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }

.variant-label {
  display: inline-flex; align-items: center; gap: 10px;
  padding: var(--space-2) 14px;
  background: #1D1D1F; color: var(--text-primary);
  border-radius: var(--radius-full); font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
}
.variant-label .tag { padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: 11px; font-weight: 600; }

.variant-reason {
  width: var(--device-width); padding: var(--space-4) 18px;
  background: #FFFFFF; border-radius: 14px;
  font-size: 13px; color: #3C3C43; line-height: 1.6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.variant-reason strong { color: #1D1D1F; font-weight: 600; }
.variant-reason .risk {
  display: block; margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid #E5E5EA; color: #86868B; font-size: var(--text-caption);
}


/* ================================================================
   C · 区块标题 · Section Header
   ================================================================ */

.sh-b {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px var(--safe-area-x) 10px;
}
.sh-b__title {
  font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.3px;
  color: var(--text-primary);
  display: inline-flex; align-items: baseline; gap: 6px;
}
.sh-b__title span {
  background: linear-gradient(120deg, var(--brand-gradient-from), var(--brand-gradient-to));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sh-b__sub {
  font-size: 11px; color: var(--text-tertiary);
  display: inline-flex; align-items: center; gap: var(--space-1);
}


/* ================================================================
   D · 主 CTA 按钮 · Primary Button
   ================================================================ */

.btn-primary {
  width: var(--content-width); height: 52px;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0 28px;
  background: linear-gradient(135deg, var(--brand-gradient-from), var(--brand-gradient-to));
  border-radius: var(--radius-pill);
  font-family: var(--ff); font-size: 17px; font-weight: 700; color: var(--brand-text);
  box-shadow: var(--glow-brand);
  transition: opacity 0.15s;
}
.btn-primary:active { opacity: 0.75; }
.btn-primary.inline { width: auto; height: 40px; padding: 0 18px; font-size: 15px; }
.btn-primary[disabled] { opacity: 0.40; pointer-events: none; }


/* ================================================================
   E · 次按钮 · Ghost Button
   ================================================================ */

.btn-ghost {
  width: var(--content-width); height: 52px;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--bg-hairline);
  border-radius: 14px;
  font-family: var(--ff); font-size: 15px; font-weight: 600; color: var(--text-primary);
  transition: opacity 0.15s;
}
.btn-ghost:active { opacity: 0.75; }


/* ================================================================
   F · 圆形图标按钮 · Icon Button
   ================================================================ */

.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.08);
  color: var(--text-primary);
  transition: opacity 0.15s;
}
.icon-btn:active { opacity: 0.75; }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.lg { width: 38px; height: 38px; }


/* ================================================================
   G · 标准卡片 · Card
   ================================================================ */

.card {
  width: var(--content-width); padding: 14px;
  background: var(--bg-card);
  border: 0.5px solid var(--bg-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-sm);
}


/* ================================================================
   H · 列表行 · List Row
   ────────────────────────────────────────────────────────────────
   App 最高频「水管件」。容器 .list-group + 行 .list-row + 槽位。
   设置行 / 导航行 / 键值行 / 开关行 / 带副标题行都用它，省得每页重画。
   槽位：.list-row__lead（左 icon/头像）
        .list-row__body（.list-row__title + 可选 .list-row__sub）
        .list-row__trail（右：.list-row__value / chevron / 开关 / badge）
   修饰：.list-row--tappable（可点，带按压态）
   ================================================================ */

.list-group {
  width: var(--content-width);
  background: var(--bg-card);
  border: 0.5px solid var(--bg-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.list-group > .list-row + .list-row { border-top: 0.5px solid var(--bg-hairline); }

.list-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--row-min-height);
  padding: var(--space-3) var(--space-4);
}
.list-row--tappable { cursor: pointer; transition: background 0.15s; }
.list-row--tappable:active { background: var(--bg-card-elevated); }

.list-row__lead {
  flex-shrink: 0; width: var(--icon-lg, 24px);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.list-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row__title {
  font-size: var(--text-body); font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-row__sub { font-size: var(--text-caption); color: var(--text-tertiary); line-height: 1.4; }
.list-row__trail {
  flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2);
  color: var(--text-tertiary);
}
.list-row__value { font-size: var(--text-body); color: var(--text-secondary); }


/* ================================================================
   H2 · 卡片堆 · Stack
   ────────────────────────────────────────────────────────────────
   竖向排列「一排独立卡片」的容器（卡片自带底色/描边，靠 gap 分隔，
   区别于 .list-group 的描边分隔）。装 2+ 重复卡片的容器一律挂 .stack，
   避免漏写 gap 导致卡片零间距贴在一起。
   gap 必须加在卡片的「直接父级」，不能加在祖先容器上。
   动态注入卡片时也先给容器挂 .stack，再 append 子项。
   ================================================================ */

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-4); }


/* ================================================================
   I · 表单输入 · Field
   ────────────────────────────────────────────────────────────────
   文本/手机号/密码/验证码统一用它。
   结构：.field（label + control + 可选 hint）
        .field__control（玻璃底 + 描边，focus 内描边变绿）
          ├ .field__prefix（前缀如 +86）├ .field__input └ .field__suffix
   状态：.field--error（红描边 + 红 hint）
   ================================================================ */

.field { width: 100%; }
.field + .field { margin-top: var(--space-4); }
.field__label {
  display: block; margin-bottom: var(--space-2);
  font-size: 13px; color: var(--text-tertiary);
}
.field__control {
  display: flex; align-items: center;
  height: var(--control-height);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md);
  transition: border-color 0.2s;
}
.field__control:focus-within { border-color: rgba(122,224,64,0.5); }
.field__input {
  flex: 1; height: 100%; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--text-primary);
  font-family: var(--ff); font-size: 15px;
  padding: 0 var(--space-4);
}
.field__input::placeholder { color: var(--text-tertiary); font-weight: 400; }
.field__prefix {
  flex-shrink: 0; display: flex; align-items: center;
  padding: 0 var(--space-3) 0 var(--space-4);
  margin-right: var(--space-1);
  border-right: 1px solid rgba(255,255,255,0.10);
  font-size: 16px; color: var(--text-secondary); font-family: var(--ff-en);
}
.field__suffix {
  flex-shrink: 0; display: flex; align-items: center;
  padding-right: var(--space-3); color: var(--text-tertiary);
}
.field__hint { margin-top: var(--space-2); font-size: var(--text-caption); color: var(--text-tertiary); }
.field--error .field__control { border-color: rgba(255,69,58,0.6); }
.field--error .field__hint { color: rgba(255,69,58,0.9); }


/* ================================================================
   J · 页面 Hero（文字型）· Page Hero
   ────────────────────────────────────────────────────────────────
   纯文字页眉（标题 + 副标题）的省事写法。
   注：沉浸式大图 hero 差异大，本就该页面自定义，不必套这里。
   ================================================================ */

.page-hero { padding: var(--space-2) var(--safe-area-x) var(--space-5); }
.page-hero--center { text-align: center; }
.page-hero__title {
  font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.3px;
  color: var(--text-primary);
}
.page-hero__sub {
  margin-top: 6px; font-size: var(--text-body);
  color: var(--text-tertiary); line-height: 1.5;
}


/* ================================================================
   K · 空态 / 错误态 · Empty State
   ────────────────────────────────────────────────────────────────
   列表/搜索/页面无内容、加载失败时的省事写法。
   槽位：.empty-state__icon + __title + __sub + 可选 __action（放 .btn-*）
   ================================================================ */

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--space-3);
  padding: var(--space-8) var(--safe-area-x);
}
.empty-state__icon { color: var(--text-tertiary); }
.empty-state__title { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.empty-state__sub { font-size: var(--text-caption); color: var(--text-tertiary); line-height: 1.5; max-width: 260px; }
.empty-state__action { margin-top: var(--space-2); }


/* ================================================================
   L · Badge
   ================================================================ */

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 22px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600;
}
.badge-accent { background: rgba(202,255,176,0.18); color: var(--brand-accent); }
.badge-ghost  { background: rgba(255,255,255,0.08); color: var(--text-secondary); }
.badge-warm   { background: rgba(251,191,36,0.18); color: #FFD28A; }


/* ================================================================
   M · Toast
   ================================================================ */

.toast {
  position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);
  padding: 10px var(--space-4);
  background: rgba(28,28,30,0.95); backdrop-filter: blur(20px);
  border-radius: var(--radius-full);
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  box-shadow: var(--elevation-md);
  white-space: nowrap; z-index: 70;
  transition: opacity 0.25s, transform 0.25s;
}


/* ================================================================
   N · Pill Tabs / 段控
   ================================================================ */

.pill-tabs {
  display: flex; width: 100%; height: 40px; padding: var(--space-1);
  background: rgba(255,255,255,0.06); border-radius: var(--radius-full);
}
.pill-tab {
  flex: 1; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  font-size: 12.5px; font-weight: 600; color: var(--text-tertiary);
  transition: background 0.2s, color 0.2s;
}
.pill-tab.active {
  background: rgba(255,255,255,0.12); color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}


/* ================================================================
   O · Filter Chip
   ================================================================ */

.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 28px; padding: 5px 11px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.08);
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  transition: background 0.2s, border-color 0.2s;
}
.chip.active {
  background: rgba(122,224,64,0.15); border-color: rgba(122,224,64,0.35);
  color: var(--brand-accent);
}


/* ================================================================
   P · Sheet / Overlay
   ================================================================ */

.overlay-mask {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 40;
  display: none;
}
.overlay-mask.open { display: block; }

.sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--bg-primary);
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  padding: var(--space-5); z-index: 41;
  transform: translateY(100%); transition: transform 0.3s ease;
}
.sheet.open { transform: translateY(0); }

.sheet-handle {
  width: 36px; height: 5px;
  background: rgba(255,255,255,0.20);
  border-radius: 3px; margin: 0 auto var(--space-4);
}


/* ================================================================
   Q · 骨架屏 · Skeleton
   ================================================================ */

@keyframes bz-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 37%,
    rgba(255,255,255,0.04) 63%
  );
  background-size: 200% 100%;
  animation: bz-shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text   { height: 12px; border-radius: 4px; margin: 6px 0; }
.skeleton-title  { height: 18px; width: 60%; border-radius: 6px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); }
.skeleton-card   { width: var(--content-width); height: 120px; border-radius: var(--radius-md); }


/* ================================================================
   R · 交互状态工具类
   ================================================================ */

.state-hover { transition: opacity 0.15s; }
.state-hover:hover { opacity: 0.88; }
.state-pressed:active { opacity: 0.75; }
.state-disabled { pointer-events: none; }