/* ──────────────────────────────────────────────────────────────────────
 * Banapeak — 共享组件 CSS (v0.9.54 抽离)
 * 抽自 user.html 内联,管理端 admin/index.html 后续也可 link 复用
 * 依赖:/css/tokens.css(--bg2 / --text3 / --accent / --radius-sm 等)
 * ────────────────────────────────────────────────────────────────────── */

/* ─── 空状态 ─────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 48px 20px; color: var(--text3);
}
.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; opacity: .5; }
/* v1.0.155: 空态图标改品牌 SVG 线性图标(呼应 404「焦点」金线风格), 替代 emoji。
   金色描边 + 极淡金光晕, outline-only。 */
.empty-state .empty-icon svg {
  width: 52px; height: 52px; display: block; margin: 0 auto;
  stroke: var(--accent, #f0b90b); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 4px 14px rgba(240,185,11,.18));
}
.empty-state:has(.empty-icon svg) .empty-icon { opacity: 1; }  /* SVG 自带描边色, 不再整体压暗 */
.empty-state .empty-text { font-size: 14px; margin-bottom: 16px; }
/* v1.0.147: 统一空态 — 标题 + 一句引导 + 内联主按钮 */
.empty-state .empty-title { font-size: 15px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.empty-state .empty-sub { font-size: 12.5px; color: var(--text4); line-height: 1.6; margin-bottom: 16px; max-width: 280px; margin-left: auto; margin-right: auto; }
.empty-state .empty-cta { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ─── 通用弱化文本 ───────────────────────────────────────────── */
.muted-sm { color: var(--text3); font-size: var(--fz-13); }

/* ─── Toast 通知(右下角) ────────────────────────────────────── */
.toast-wrap {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  padding: 10px 16px; border-radius: var(--r); font-size: 13px; max-width: 280px;
  animation: toast-in .2s ease; pointer-events: all;
  background: var(--bg2); border: 1px solid var(--border2); color: var(--text1);
}
.toast.success { border-color: var(--green-border); color: var(--green); }
.toast.error   { border-color: var(--red-border);   color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ─── 骨架屏 shimmer(慢数据加载占位) ───────────────────────── */
.skel-shimmer .skel-line {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 37%, var(--bg2) 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease infinite;
}
@keyframes skel-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ─── Segmented control(日/周/月 + 卡片/表格 + 视图切换)──── */
.dr-period-seg {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--bg2); border-radius: var(--radius-sm); border: 1px solid var(--border);
  margin-left: 4px;
}
.dr-period-chip {
  border: none; background: transparent; cursor: pointer;
  color: var(--text3); font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 3px;
  font-family: var(--mono);
  transition: background .12s, color .12s;
}
.dr-period-chip:hover { color: var(--text1); }
.dr-period-chip.active { background: var(--bg1); color: var(--accent); font-weight: 600; }
.dr-period-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1px solid var(--accent-border);
  background: var(--accent-dim); color: var(--accent);
  border-radius: var(--radius-sm); font-size: 11.5px;
  text-decoration: none; font-weight: 600;
}
.dr-period-link:hover { background: var(--accent); color: var(--bg0); }

/* ─── 价格闪烁(盘中跳动)── 红涨绿跌 ─────────────────────── */
@keyframes price-flash-up   { 0% { background: rgba(239,68,68,.32); } 100% { background: transparent; } }
@keyframes price-flash-down { 0% { background: rgba(34,197,94,.32); } 100% { background: transparent; } }
.px-flash-up   { animation: price-flash-up   .9s ease-out; border-radius: 3px; }
.px-flash-down { animation: price-flash-down .9s ease-out; border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════════════
 * S0 共享通用组件(spec §4.4)— btn / chip / card / table / banner
 * 三页(home/diag/workbench)共用;全走 tokens,红涨绿跌强制走 token。
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── btn 按钮 ───(btn / btn-pry / btn-sec / btn-ghost,三档 size) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-md);
  font-family: var(--sans); font-size: var(--fz-13); font-weight: 500;
  background: var(--bg2); color: var(--text1);
  border: 1px solid var(--border); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg3); border-color: var(--border2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-pry { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn-pry:hover { background: var(--accent-light); border-color: var(--accent-light); }
.btn-sec { background: var(--bg1); color: var(--text2); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text3); }
.btn-ghost:hover { color: var(--text1); background: var(--bg2); }
.btn-sm { padding: 5px 10px; font-size: var(--fz-12); }
.btn-lg { padding: 11px 18px; font-size: var(--fz-14); }

/* Sub-Sprint 1.3 (v1.0.357) — 替代旧 .btn-primary / .adm-btn(+danger/+success)
 * xs: 表格行内紧凑(原 .adm-btn 规格);
 * block: 表单底部全宽;
 * strong: 字重 700 强调(原 .btn-primary 字重);
 * danger / success: 语义色边框(原 .adm-btn.danger/.success) */
.btn-xs     { padding: 3px 9px; font-size: var(--fz-11); border-radius: 4px; gap: 4px; }
.btn-block  { width: 100%; }
.btn-strong { font-weight: 700; }
.btn-danger  { color: var(--red-light, var(--red)); border-color: rgba(248,113,113,.25); }
.btn-danger:hover  { background: var(--red-bg);   border-color: rgba(248,113,113,.4);  color: var(--red-light, var(--red)); }
.btn-success { color: var(--green);                border-color: rgba(34,197,94,.25); }
.btn-success:hover { background: var(--green-bg); border-color: rgba(34,197,94,.4);    color: var(--green); }
/* v1.0.393 5.7c: auth 提交按钮 — 登录/注册/找回密码 CTA, 触控目标高度 44px, 不再"薄"
   双类选择器 .btn.btn-auth-submit 提权, 压住 workbench/user.html 页内 .btn 5/12 重定义 */
.btn.btn-auth-submit { min-height: 44px; padding: 12px 20px; font-size: var(--fz-14); letter-spacing: .05em; }

/* ─── chip 标签 ───(中性 + 涨跌 + 主题色变体) */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: var(--fz-11);
  background: var(--bg2); color: var(--text3);
  border: 1px solid var(--border);
}
.chip-up { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }
.chip-dn { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.chip-acc { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); }
.chip-warn { color: var(--col-warn); background: var(--yellow-bg); border-color: var(--yellow-border); }

/* ─── card 卡片 ───(基础卡 + 高亮变体) */
.card {
  background: var(--bg1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.card-feature { border-color: var(--accent-border); background: linear-gradient(180deg, var(--accent-dim), var(--bg1)); }
.card-title { font-size: var(--fz-14); font-weight: 600; color: var(--text1); margin-bottom: 8px; }
.card-subtitle { font-size: var(--fz-11); color: var(--text3); margin-bottom: 10px; letter-spacing: .3px; }

/* ─── table 数据表 ───(行高紧凑,数字右对齐,tabular-nums) */
.table { width: 100%; border-collapse: collapse; font-size: var(--fz-12); }
.table th, .table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.table th { color: var(--text3); font-weight: 500; font-size: var(--fz-11); letter-spacing: .3px; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--bg2); }
.table .num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ─── banner 横幅 ───(info/warn/danger 三档 + 关闭按钮) */
.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-md);
  font-size: var(--fz-13); line-height: 1.5;
  background: var(--bg2); color: var(--text2);
  border: 1px solid var(--border);
}
.banner-info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.20); color: var(--text-info); }
.banner-warn { background: var(--yellow-bg); border-color: var(--yellow-border); color: var(--text-warn); }
.banner-danger { background: var(--red-bg); border-color: var(--red-border); color: var(--text-danger); }
.banner-close { margin-left: auto; cursor: pointer; opacity: .6; }
.banner-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
 * Sub-Sprint 1.2 (v1.0.356) — SVG icon host + status dot
 * 极简 inline SVG 替代装饰图标 / 关闭十字 / 红绿状态点
 * ═══════════════════════════════════════════════════════════ */

/* icons.js 锚点容器: <span class="ic-host" data-ic="warn"></span>
 * 默认 16×16 行内, currentColor 跟文字色;
 * --inline 微调 baseline; --xl 用于 hero/empty-state 大图标 (64×64) */
.ic-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -2px;
  line-height: 0;
}
.ic-host svg {
  width: 16px;
  height: 16px;
  display: block;
}
.ic-host--inline svg { width: 14px; height: 14px; }
.ic-host--xl svg     { width: 64px; height: 64px; }

/* 状态点: 替代 emoji 🔴 🟢 — A 股语义 红涨绿跌 */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  margin-right: 2px;
  background: var(--text3);
}
.status-dot--red   { background: var(--up,    #f6465d); }
.status-dot--green { background: var(--down,  #0ecb81); }