/* =====================================================================
 * 网咖连锁 · 全站共享 UI 设计系统（现代极简 · 高端 SaaS 风格）
 * 依赖：/common/tokens.css
 * --------------------------------------------------------------------- */
@import './tokens.css';

:root {
  /* 与 tokens.css 别名保持完全对齐 */
  --brand: var(--primary);
  --brand-hover: var(--primary-hover);
  --brand-active: var(--primary-active);
  --brand-light: var(--primary-bg);
  --brand-soft: var(--primary-bg);

  --g-50: var(--bg-surface);
  --g-100: var(--bg-raised);
  --g-200: var(--bg-overlay);
  --g-300: rgba(148, 163, 184, 0.16);
  --g-400: var(--text-dim);
  --g-500: var(--text-muted);
  --g-600: var(--text-muted);
  --g-700: var(--text);
  --g-800: var(--bg-surface);
  --g-900: var(--bg-base);

  --success: var(--ok);
  --success-soft: var(--ok-bg);
  --warning: var(--warn);
  --warning-soft: var(--warn-bg);
  --danger: var(--danger);
  --danger-soft: var(--danger-bg);
  --info: var(--primary);
  --info-soft: var(--primary-bg);
  --purple: var(--text-dim);
  --purple-soft: var(--bg-raised);

  --bg: var(--bg-base);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-raised);
  --border: var(--border);
  --border-strong: var(--border-strong);
  --text-1: var(--text);
  --text-2: var(--text-muted);
  --text-3: var(--text-dim);
  --text-on-brand: var(--on-primary);

  --r-sm: var(--r-xs);
  --r: var(--r-sm);
  --r-md: var(--r-md);
  --r-lg: var(--r-md);
  --r-xl: var(--r-md);
  --r-pill: var(--r-pill);

  --sh-xs: var(--shadow-sm);
  --sh-sm: var(--shadow-sm);
  --sh: var(--shadow-md);
  --sh-md: var(--shadow-md);
  --sh-lg: var(--shadow-lg);
  --sh-focus: 0 0 0 2px var(--border-focus);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .15s;
  --dur-fast: .1s;
}

/* ============ 全局重置 + 基础排版 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; max-width: 100vw; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-display); background: var(--bg); color: var(--text-1);
  font-size: var(--fs-md); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, canvas, svg, video { max-width: 100%; height: auto; }
a { color: var(--primary); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--primary-hover); }
.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-family: var(--font-mono); }
.mono { font-family: var(--font-mono); }

/* ============ 统一按钮体系（克制、去霓虹、主次分明） ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; min-height: 32px; border: 1px solid transparent;
  border-radius: var(--r); background: var(--primary); color: var(--on-primary);
  font-family: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.2;
  cursor: pointer; user-select: none; white-space: nowrap; outline: none;
  transition: all var(--dur) var(--ease);
}
.btn:hover { background: var(--primary-hover); }
.btn:active { transform: translateY(1px); opacity: 0.9; }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn.block { display: flex; width: 100%; padding: 10px 16px; min-height: 40px; }
.btn.sm { padding: 4px 10px; font-size: var(--fs-2xs); min-height: 26px; }
.btn.lg { padding: 10px 20px; font-size: var(--fs-md); min-height: 40px; }

/* 次级与轮廓按钮（最推荐的默认形态） */
.btn.gray, .btn.secondary, .btn.outline {
  background: var(--surface-2); color: var(--text-2); border-color: var(--border);
}
.btn.gray:hover, .btn.secondary:hover, .btn.outline:hover {
  background: var(--bg-overlay); color: var(--text-1); border-color: var(--border-strong);
}

.btn.ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); color: var(--text-1); }

.btn.plain { background: transparent; color: var(--primary); padding: 4px 6px; min-height: auto; border: none; }
.btn.plain:hover { color: var(--primary-hover); text-decoration: underline; }

/* 状态化按钮（降噪收敛，不再大块荧光） */
.btn.green, .btn.success {
  background: var(--surface-2); color: var(--ok); border-color: rgba(52, 211, 153, 0.25);
}
.btn.green:hover, .btn.success:hover {
  background: var(--ok-bg); border-color: var(--ok);
}

.btn.warning, .btn.amber, .btn.orange, .btn.gold {
  background: var(--surface-2); color: var(--warn); border-color: rgba(251, 191, 36, 0.25);
}
.btn.warning:hover, .btn.amber:hover, .btn.orange:hover, .btn.gold:hover {
  background: var(--warn-bg); border-color: var(--warn);
}

.btn.danger, .btn.red {
  background: var(--surface-2); color: var(--danger); border-color: rgba(248, 113, 113, 0.25);
}
.btn.danger:hover, .btn.red:hover {
  background: var(--danger-bg); border-color: var(--danger);
}

/* ============ 精致扁平卡片 ============ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.card h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-1); margin-bottom: var(--sp-3); }
.card.flush { padding: 0; overflow: hidden; }
.card.pad-sm { padding: var(--sp-3); }

/* ============ 表单控件 ============ */
input, select, textarea {
  font-family: inherit; font-size: var(--fs-sm); color: var(--text-1);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 7px 11px; min-height: 32px; outline: none;
  transition: border-color var(--dur) var(--ease);
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 1px solid var(--border-focus); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: auto; cursor: pointer; }
.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: var(--fs-xs); color: var(--text-2); margin-bottom: var(--sp-1); font-weight: var(--fw-medium); }

/* ============ 数据表格 ============ */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll table { min-width: 100%; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--surface-2); color: var(--text-3); font-weight: var(--fw-medium); font-size: var(--fs-xs); white-space: nowrap; }
td { color: var(--text-1); }
tr:hover td { background: rgba(148, 163, 184, 0.04); }

/* ============ 微胶囊标签（已全面收敛，不再是杂乱大色块） ============ */
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
  white-space: nowrap;
}
.tag.brand, .tag.blue, .tag.info, .tag.teal, .tag.cyan {
  background: var(--primary-bg); color: var(--primary); border-color: rgba(56, 189, 248, 0.2);
}
.tag.success, .tag.green {
  background: var(--ok-bg); color: var(--ok); border-color: rgba(52, 211, 153, 0.2);
}
.tag.warning, .tag.orange, .tag.gold {
  background: var(--warn-bg); color: var(--warn); border-color: rgba(251, 191, 36, 0.2);
}
.tag.danger, .tag.red {
  background: var(--danger-bg); color: var(--danger); border-color: rgba(248, 113, 113, 0.2);
}
.tag.purple {
  background: var(--surface-2); color: var(--text-2); border-color: var(--border);
}
.tag.gray { background: var(--surface-2); color: var(--text-3); }

/* ============ 统计卡片 ============ */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.stat .num { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-1); letter-spacing: -.02em; line-height: 1.1; }
.stat .label { color: var(--text-3); font-size: var(--fs-xs); margin-top: var(--sp-1); }

/* ============ 工具栏与分页 ============ */
.toolbar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select { width: auto; min-width: 120px; }
.toolbar .spacer { flex: 1; }
.pager { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-xs); flex-wrap: wrap; }

/* ============ 消息提示与辅助 ============ */
.msg { text-align: center; padding: 24px 16px; color: var(--text-3); font-size: var(--fs-sm); }
.hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-1); line-height: 1.4; }
.center { text-align: center; }

#__toastWrap {
  position: fixed; top: calc(16px + env(safe-area-inset-top));
  left: 0; right: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding: 0 16px; max-width: 100vw;
}
#__toastWrap > div { max-width: 100%; word-break: break-word; }

.hide { display: none !important; }
.muted { color: var(--text-3); }
.bold { font-weight: var(--fw-semibold); }
.row { display: flex; gap: var(--sp-2); align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--sp-2); }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.spacer { flex: 1; }
.row > *, .between > *, .col > * { min-width: 0; }