/* ============================================================
 * wd-ui.css · WARDOGS 全站暗金设计系统 v2（2026-10-27）
 * v2：按钮系统按 Binance DESIGN.md（VoltAgent/awesome-design-md）润色——
 *     实心金主 CTA（黑字金底）+ 按压加深 + solid 次级钮 + pill 强调钮 +
 *     sm 紧凑钮（表格行内）+ 统一 focus ring。
 * 域名即语言：wardogs.vip=en/tw · bilibot.cn=zh
 * 用法：<link rel="stylesheet" href="/wd-ui.css?v=2">（根路径，nginx no-cache）
 * 原则：tokens 驱动；组件类一次定义全站复用；不覆盖页面自有样式，
 *       新页面与重构页面统一引用本文件。
 * ============================================================ */

:root {
  /* 色板 */
  --wd-bg:        #0B0E13;
  --wd-bg-2:      #10141C;
  --wd-panel:     #12161F;
  --wd-panel-2:   #1A2030;
  --wd-elevated:  #232B3D;             /* 悬浮面（次级钮 hover / 嵌套卡） */
  --wd-line:      #262D3D;
  --wd-line-2:    #38415498;
  --wd-gold:      #D9AD32;
  --wd-gold-2:    #B98A1D;             /* 按压/加深（= active） */
  --wd-gold-hi:   #E7C55C;             /* 描边钮 hover 文字 */
  --wd-gold-dim:  rgba(217,173,50,.10);
  --wd-gold-line: rgba(217,173,50,.35);
  --wd-on-gold:   #141510;             /* 金底上的黑字（不可反转成白字） */
  --wd-txt:       #E8EAF0;
  --wd-txt-2:     #9AA3B5;
  --wd-txt-3:     #5C6478;
  --wd-ok:        #3FA46A;
  --wd-warn:      #D9822B;
  --wd-danger:    #C94F4F;
  --wd-info:      #4A7DB5;

  /* 字体 */
  --wd-font: "Barlow Condensed","PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;

  /* 圆角/间距：按钮 6px（Binance md），卡 12-16px */
  --wd-r-btn: 6px;
  --wd-r-sm: 8px;
  --wd-r:    12px;
  --wd-r-lg: 16px;
  --wd-sp:   8px;   /* 基数网格：4/8/12/16/24/32 */
}

/* ---------- 基础 ---------- */
.wdu-root { background: var(--wd-bg); color: var(--wd-txt); font-family: var(--wd-font); }
.wdu-root a { color: var(--wd-gold); }

/* ---------- 卡片 ---------- */
.wd-card {
  background: var(--wd-panel);
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-r);
  padding: calc(var(--wd-sp) * 2);
}
.wd-card--2 { background: var(--wd-panel-2); }
.wd-card--gold { border-color: var(--wd-gold-line); background: linear-gradient(180deg, var(--wd-gold-dim), var(--wd-panel) 60%); }
.wd-card-t {
  font-size: 15px; font-weight: 500; color: var(--wd-txt);
  letter-spacing: .04em; margin: 0 0 calc(var(--wd-sp) * 1.5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--wd-sp);
}
.wd-card-sub { font-size: 13px; color: var(--wd-txt-2); margin: -8px 0 14px; }

/* ---------- 按钮（Binance 式：黑字金底主 CTA / 面色次级钮 / 描边钮） ---------- */
.wd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 9px 20px; border-radius: var(--wd-r-btn);
  border: 1px solid var(--wd-line-2); background: transparent;
  color: var(--wd-txt); font-family: var(--wd-font);
  font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: border-color .15s, background .15s, color .15s, transform .08s;
}
.wd-btn:hover { border-color: var(--wd-gold-line); color: var(--wd-gold-hi); background: var(--wd-gold-dim); }
.wd-btn:active { transform: translateY(1px); }

/* 主 CTA：实心金 + 黑字（签名组合，hover 提亮 / active 加深，绝不反白） */
.wd-btn--gold {
  background: linear-gradient(135deg, var(--wd-gold), var(--wd-gold-2));
  border-color: transparent; color: var(--wd-on-gold); font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset;
}
.wd-btn--gold:hover { filter: brightness(1.08); color: var(--wd-on-gold); }
.wd-btn--gold:active { filter: brightness(.94); background: var(--wd-gold-2); color: var(--wd-on-gold); transform: none; }

/* 次级钮（实底面色，Binance button-secondary-on-dark） */
.wd-btn--solid {
  background: var(--wd-panel-2); border-color: transparent; color: var(--wd-txt);
}
.wd-btn--solid:hover { background: var(--wd-elevated); border-color: var(--wd-line); color: var(--wd-txt); }

/* 强调 pill（"这是页面上唯一的动作"信号，节制使用） */
.wd-btn--pill { border-radius: 999px; padding: 10px 28px; min-height: 42px; }

/* 紧凑钮（表格/订单行内，28px 高） */
.wd-btn--sm { min-height: 28px; padding: 4px 14px; font-size: 12.5px; border-radius: var(--wd-r-btn); }

/* 危险钮 */
.wd-btn--danger { border-color: rgba(201,79,79,.5); color: var(--wd-danger); }
.wd-btn--danger:hover { border-color: var(--wd-danger); background: rgba(201,79,79,.08); color: var(--wd-danger); }
.wd-btn--danger:active { transform: translateY(1px); }

/* 行内图标（按钮/徽章内 SVG 统一 16px 对齐） */
.wd-btn .wd-ico, .wd-badge .wd-ico { width: 16px; height: 16px; flex: none; }

.wd-btn[disabled], .wd-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ---------- 徽章 ---------- */
.wd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 99px;
  font-size: 12px; letter-spacing: .04em; line-height: 1.7;
  background: var(--wd-panel-2); color: var(--wd-txt-2); border: 1px solid var(--wd-line);
}
.wd-badge--gold  { background: var(--wd-gold-dim); color: var(--wd-gold); border-color: var(--wd-gold-line); }
.wd-badge--ok    { background: rgba(63,164,106,.12); color: var(--wd-ok); border-color: rgba(63,164,106,.35); }
.wd-badge--warn  { background: rgba(217,130,43,.12); color: var(--wd-warn); border-color: rgba(217,130,43,.35); }
.wd-badge--danger{ background: rgba(201,79,79,.12); color: var(--wd-danger); border-color: rgba(201,79,79,.35); }

/* ---------- 统计卡 ---------- */
.wd-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--wd-sp) + 4px; }
.wd-stat {
  background: var(--wd-panel-2); border-radius: var(--wd-r-sm);
  padding: var(--wd-sp) * 1.5; padding: 12px;
}
.wd-stat .k { font-size: 12px; color: var(--wd-txt-2); margin: 0; }
.wd-stat .v { font-size: 22px; font-weight: 500; color: var(--wd-txt); margin: 2px 0 0; line-height: 1.2; }
.wd-stat .v small { font-size: 13px; color: var(--wd-txt-3); font-weight: 400; }

/* ---------- 进度条 ---------- */
.wd-progress { height: 6px; background: var(--wd-bg-2); border-radius: 99px; overflow: hidden; }
.wd-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--wd-gold), var(--wd-gold-2)); border-radius: 99px; }

/* ---------- 表格 ---------- */
.wd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wd-table th {
  text-align: left; font-weight: 500; color: var(--wd-txt-3);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 10px; border-bottom: 1px solid var(--wd-line);
}
.wd-table td { padding: 10px; border-bottom: 1px solid var(--wd-line); color: var(--wd-txt-2); }
.wd-table tr:last-child td { border-bottom: 0; }
.wd-table td b, .wd-table td .hl { color: var(--wd-txt); font-weight: 500; }
.wd-table tr:hover td { background: rgba(255,255,255,.02); }

/* ---------- Tab ---------- */
.wd-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--wd-line); flex-wrap: wrap; }
.wd-tab {
  padding: 8px 16px; font-size: 14px; letter-spacing: .05em;
  color: var(--wd-txt-2); cursor: pointer; border: 0; background: none;
  font-family: var(--wd-font); border-bottom: 2px solid transparent;
}
.wd-tab:hover { color: var(--wd-txt); }
.wd-tab.on { color: var(--wd-gold); border-bottom-color: var(--wd-gold); }
.wd-tabpane { display: none; padding-top: var(--wd-sp) * 2; padding-top: 16px; }
.wd-tabpane.on { display: block; }

/* ---------- 表单 ---------- */
.wd-input, .wd-select, .wd-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--wd-bg-2); border: 1px solid var(--wd-line);
  border-radius: var(--wd-r-sm); color: var(--wd-txt);
  font-family: var(--wd-font); font-size: 14px;
  padding: 10px 12px; outline: none;
}
.wd-input:focus, .wd-select:focus, .wd-textarea:focus { border-color: var(--wd-gold); }
.wd-input::placeholder, .wd-textarea::placeholder { color: var(--wd-txt-3); }
.wd-label { display: block; font-size: 12px; color: var(--wd-txt-2); letter-spacing: .06em; margin: 0 0 6px; }

/* ---------- 提示条 ---------- */
.wd-note {
  border: 1px solid var(--wd-line); border-left: 3px solid var(--wd-gold);
  border-radius: var(--wd-r-sm); background: var(--wd-panel-2);
  padding: 10px 14px; font-size: 13px; color: var(--wd-txt-2);
}
.wd-note--danger { border-left-color: var(--wd-danger); }
.wd-note--ok { border-left-color: var(--wd-ok); }

/* ---------- Toast ---------- */
.wd-toast {
  position: fixed; top: 74px; right: 20px; z-index: 99999;
  background: var(--wd-panel-2); border: 1px solid var(--wd-gold-line);
  border-radius: var(--wd-r-sm); padding: 12px 18px;
  font-size: 14px; color: var(--wd-txt); max-width: 320px;
}
.wd-toast--danger { border-color: rgba(201,79,79,.5); }

/* ---------- 骨架屏 ---------- */
.wd-skel {
  background: linear-gradient(90deg, var(--wd-panel-2) 25%, var(--wd-panel) 50%, var(--wd-panel-2) 75%);
  background-size: 200% 100%; animation: wd-skel 1.2s infinite;
  border-radius: var(--wd-r-sm); min-height: 14px;
}
@keyframes wd-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wd-skel { animation: none; } }

/* ---------- 空状态 ---------- */
.wd-empty { text-align: center; padding: 32px 16px; color: var(--wd-txt-3); font-size: 13px; }
.wd-empty b { display: block; color: var(--wd-txt-2); font-weight: 500; font-size: 15px; margin-bottom: 6px; }

/* ---------- 键盘焦点（统一金色 focus ring，50% 环） ---------- */
.wd-btn:focus-visible, .wd-tab:focus-visible, .wd-input:focus-visible,
.wd-select:focus-visible, .wd-textarea:focus-visible {
  outline: none; box-shadow: 0 0 0 2px rgba(217,173,50,.45);
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .wd-statgrid { grid-template-columns: repeat(2, 1fr); }
  .wd-card { padding: 14px; }
  .wd-table { display: block; overflow-x: auto; white-space: nowrap; }
}