/* =====================================================================
   可路汇·网咖掌柜 · 全站共享 UI 设计系统（现代 SaaS 高端风）
   引用：<link rel="stylesheet" href="/common/ui.css">
   --------------------------------------------------------------------- */
:root {
  /* ============ 品牌色 ============ */
  --brand:#2563eb; --brand-hover:#1d4ed8; --brand-active:#1e40af;
  --brand-light:#eff6ff; --brand-soft:#dbeafe;

  /* ============ 中性灰阶 ============ */
  --g-50:#f8fafc; --g-100:#f1f5f9; --g-200:#e2e8f0; --g-300:#cbd5e1;
  --g-400:#94a3b8; --g-500:#64748b; --g-600:#475569; --g-700:#334155;
  --g-800:#1e293b; --g-900:#0f172a;

  /* ============ 状态色 ============ */
  --success:#16a34a; --success-soft:#dcfce7;
  --warning:#d97706; --warning-soft:#fef3c7;
  --danger:#dc2626;  --danger-soft:#fee2e2;
  --info:#0ea5e9;    --info-soft:#e0f2fe;
  --purple:#7c3aed;  --purple-soft:#ede9fe;

  /* ============ 语义化表面 ============ */
  --bg:#f8fafc; --surface:#fff; --surface-2:#f1f5f9;
  --border:#e2e8f0; --border-strong:#cbd5e1;
  --text-1:#0f172a; --text-2:#475569; --text-3:#94a3b8;
  --text-on-brand:#fff;

  /* ============ 圆角体系 ============ */
  --r-sm:6px; --r:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* ============ 间距 4 倍数 ============ */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ============ 精致双层阴影 ============ */
  --sh-xs:0 1px 2px rgba(15,23,42,.04);
  --sh-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh:0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);
  --sh-md:0 2px 4px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.08);
  --sh-lg:0 4px 8px rgba(15,23,42,.05), 0 16px 40px rgba(15,23,42,.12);
  --sh-focus:0 0 0 3px rgba(37,99,235,.14);

  /* ============ 字号字重 ============ */
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px;
  --fs-lg:16px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:28px; --fs-4xl:36px;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.2; --lh-snug:1.4; --lh-normal:1.6; --lh-relaxed:1.75;

  /* ============ 动效 ============ */
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.12s; --dur:.18s; --dur-slow:.25s;

  /* ============ 字体 ============ */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"SF Mono","Cascadia Code",Consolas,"Roboto Mono",monospace;
}

/* ============ 全局重置 + 防断屏铁律 ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; max-width:100vw; overflow-x:hidden; overflow-x:clip; overscroll-behavior-x:none; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  font-family:var(--font-sans); background:var(--bg); color:var(--text-1);
  font-size:var(--fs-md); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img, canvas, svg, video { max-width:100%; height:auto; }
a { color:var(--brand); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover { color:var(--brand-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:var(--sp-2);
  padding:9px 16px; min-height:36px; border:1px solid transparent;
  border-radius:var(--r); background:var(--brand); color:var(--text-on-brand);
  font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-medium); line-height:1.2;
  cursor:pointer; user-select:none; white-space:nowrap; outline:none;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
            box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  box-shadow:0 1px 2px rgba(15,23,42,.08), 0 1px 1px rgba(15,23,42,.04);
}
.btn:hover { background:var(--brand-hover); }
.btn:active { transform:translateY(1px); box-shadow:0 1px 1px rgba(15,23,42,.06); }
.btn:disabled, .btn[disabled] { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn.block { display:flex; width:100%; padding:13px 16px; min-height:44px; }
.btn.sm { padding:5px 10px; font-size:var(--fs-sm); min-height:28px; }
.btn.lg { padding:12px 22px; font-size:var(--fs-lg); min-height:44px; }
.btn.gray, .btn.secondary { background:var(--g-100); color:var(--text-2); border-color:var(--border); box-shadow:none; }
.btn.gray:hover, .btn.secondary:hover { background:var(--g-200); color:var(--text-1); }
.btn.outline { background:var(--surface); border-color:var(--border-strong); color:var(--text-1); box-shadow:none; }
.btn.outline:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-light); }
.btn.success { background:var(--success); }
.btn.success:hover { background:#15803d; }
.btn.warning { background:var(--warning); }
.btn.warning:hover { background:#b45309; }
.btn.danger, .btn.red { background:var(--danger); }
.btn.danger:hover, .btn.red:hover { background:#b91c1c; }
.btn.ghost { background:transparent; color:var(--text-2); box-shadow:none; }
.btn.ghost:hover { background:var(--g-100); color:var(--text-1); }
.btn.plain { background:transparent; color:var(--brand); padding:4px 6px; box-shadow:none; min-height:auto; }
.btn.plain:hover { background:var(--brand-light); }
.btn.gold { background:linear-gradient(135deg,#d4a017,#b8860b); box-shadow:0 1px 2px rgba(184,134,11,.18); }
.btn.orange { background:linear-gradient(135deg,#f59e0b,#d97706); }

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

/* ============ 表单 ============ */
input, select, textarea {
  font-family:inherit; font-size:var(--fs-md); color:var(--text-1);
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r); padding:9px 12px; min-height:36px; outline:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width:100%;
}
input:focus, select:focus, textarea:focus { border-color:var(--brand); box-shadow:var(--sh-focus); }
input::placeholder, textarea::placeholder { color:var(--text-3); }
textarea { min-height:80px; resize:vertical; line-height:var(--lh-normal); }
input[type="checkbox"], input[type="radio"] { width:auto; min-height:auto; }
.field { margin-bottom:var(--sp-3); }
.field label { display:block; font-size:var(--fs-sm); color:var(--text-2); margin-bottom:var(--sp-1); font-weight:var(--fw-medium); }

/* ============ 表格 ============ */
table { width:100%; border-collapse:collapse; font-size:var(--fs-md); }
.tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll table { min-width:100%; }
th, td { padding:11px 16px; 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-sm); letter-spacing:.02em; white-space:nowrap; }
td { color:var(--text-1); }
tr:hover td { background:var(--g-50); }

/* ============ Tag ============ */
.tag {
  display:inline-flex; align-items:center; padding:2px 10px;
  border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:var(--fw-medium);
  background:var(--g-100); color:var(--text-2); white-space:nowrap;
}
.tag.brand, .tag.blue { background:var(--brand-soft); color:var(--brand-active); }
.tag.success, .tag.green { background:var(--success-soft); color:#166534; }
.tag.warning, .tag.orange { background:var(--warning-soft); color:#92400e; }
.tag.danger, .tag.red { background:var(--danger-soft); color:#991b1b; }
.tag.info, .tag.teal, .tag.cyan { background:var(--info-soft); color:#075985; }
.tag.purple { background:var(--purple-soft); color:#5b21b6; }
.tag.gold { background:#fff7e3; color:#b8860b; }
.tag.gray { background:var(--g-100); color:var(--text-2); }

/* ============ 统计卡 ============ */
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-5); box-shadow:var(--sh-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-sm); margin-top:var(--sp-1); }

/* ============ 工具栏 + 分页 ============ */
.toolbar { display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4); 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-sm); flex-wrap:wrap; }

/* ============ 消息提示 ============ */
.msg { text-align:center; padding:30px 16px; color:var(--text-3); font-size:var(--fs-md); }
.hint { font-size:var(--fs-sm); color:var(--text-3); margin-top:var(--sp-1); line-height:var(--lh-relaxed); }
.center { text-align:center; }

/* ============ Toast 全局容器（被各页 JS 引用） ============ */
#__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; }

/* 防止 flex 子项被内容撑爆导致横向溢出（手机端关键） */
.row > *, .between > *, .col > * { min-width:0; }

/* 触屏按钮在手机端放大 */
@media (max-width: 768px) {
  .btn { min-height:40px; }
  .btn.sm { min-height:32px; }
  .btn.block, .btn.lg { min-height:48px; padding:14px 18px; font-size:var(--fs-lg); }
  input, select, textarea { font-size:16px; } /* 防 iOS 缩放 */
}