/* ═══════════════════════════════════════════════
   Components v3 — Light Tech
   ═══════════════════════════════════════════════ */

/* ── 按钮 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 24px; border-radius:var(--radius-full); font-weight:600; font-size:14px;
  cursor:pointer; border:none; transition:all .2s ease; white-space:nowrap;
  user-select:none; line-height:1.4;
}
.btn:active{ transform:scale(.97) }

.btn-primary{
  background:var(--gradient-brand); color:#fff;
  box-shadow:var(--shadow-brand);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(37,99,235,.2),0 14px 40px rgba(124,58,237,.12) }
.btn-primary:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none }

.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--text);
}
.btn-ghost:hover{ border-color:var(--border-light); background:var(--surface); transform:translateY(-1px) }

.btn-danger{ background:transparent; border:1px solid var(--error); color:var(--error) }
.btn-danger:hover{ background:var(--error-bg) }

.btn-sm{ padding:8px 16px; font-size:13px }
.btn-xs{ padding:5px 12px; font-size:12px }
.btn-lg{ padding:14px 36px; font-size:16px }

/* ── 表单 ── */
.field{ margin-bottom:20px }
.field label{ display:block; font-size:13px; margin-bottom:8px; color:var(--text-secondary); font-weight:500 }
.field input,.field select,.field textarea{
  width:100%; padding:12px 16px; background:var(--bg);
  border:1.5px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-size:15px; font-family:var(--font); outline:none;
  transition:all .2s ease;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-muted) }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow);
}
.field input:disabled{ opacity:.5; cursor:not-allowed }

/* ── 卡片 ── */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px;
  transition:all .3s ease; box-shadow:var(--shadow-sm);
}
.card:hover{ border-color:var(--border-light); box-shadow:var(--shadow); transform:translateY(-2px) }

/* ── 统计卡片 ── */
.stat-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px 24px; text-align:center;
  box-shadow:var(--shadow-sm); transition:all .3s ease;
}
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.stat-card .num{ font-size:36px; font-weight:700; color:var(--brand); letter-spacing:-.03em }
.stat-card .label{ font-size:12px; color:var(--text-muted); margin-top:8px; letter-spacing:.02em }

/* ── 徽章 ── */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--radius-full); font-size:12px; font-weight:500;
  border:1px solid var(--border); background:var(--bg); color:var(--text-secondary);
}
.badge-success{ border-color:rgba(16,185,129,.2); background:var(--success-bg); color:var(--success) }
.badge-warning{ border-color:rgba(245,158,11,.2); background:var(--warning-bg); color:var(--warning) }
.badge-error{   border-color:rgba(239,68,68,.2); background:var(--error-bg); color:var(--error) }
.badge-info{    border-color:rgba(37,99,235,.15); background:var(--brand-light); color:var(--brand) }
.badge-dot{ width:6px; height:6px; border-radius:50%; display:inline-block; flex-shrink:0 }

/* ── 表格 ── */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg); border:1px solid var(--border) }
table{ width:100%; border-collapse:collapse; font-size:14px }
thead th{
  padding:14px 16px; text-align:left; color:var(--text-muted); font-weight:500;
  border-bottom:1px solid var(--border); font-size:12px; letter-spacing:.02em;
  background:var(--bg-alt);
}
tbody td{ padding:14px 16px; border-bottom:1px solid var(--border); color:var(--text-secondary) }
tbody tr:hover td{ background:var(--bg-alt) }
tbody tr:last-child td{ border-bottom:none }
td code,th code{
  background:var(--surface); padding:2px 8px; border-radius:4px;
  font-size:12px; font-family:var(--font-mono); color:var(--brand);
}

/* ── 分页 ── */
.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:24px }
.pagination button{
  padding:8px 18px; border:1px solid var(--border); border-radius:var(--radius-full);
  background:var(--bg); color:var(--text); font-size:13px; cursor:pointer; transition:all .2s;
}
.pagination button:hover:not(:disabled){ background:var(--surface); border-color:var(--border-light) }
.pagination button:disabled{ opacity:.35; cursor:not-allowed }

/* ── Tab ── */
.tabs{ display:flex; gap:0; border-bottom:1px solid var(--border) }
.tab-btn{
  padding:14px 24px; border:none; background:transparent; color:var(--text-muted);
  font-size:14px; font-weight:500; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .2s;
}
.tab-btn:hover{ color:var(--text-secondary) }
.tab-btn.active{ color:var(--brand); border-bottom-color:var(--brand) }
.tab-panel{ display:none } .tab-panel.active{ display:block }

/* ── Toast ── */
.toast-container{ position:fixed; top:80px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none }
.toast{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:var(--radius); min-width:300px; max-width:440px;
  font-size:14px; border:1px solid var(--border);
  pointer-events:auto; animation:toastIn .3s var(--ease-out);
  background:var(--bg); box-shadow:var(--shadow-lg);
}
.toast-ok{    border-color:rgba(16,185,129,.2); color:var(--success) }
.toast-error{ border-color:rgba(239,68,68,.2); color:var(--error) }
.toast-info{  border-color:rgba(37,99,235,.2); color:var(--brand) }
.toast .toast-icon{ font-size:16px; flex-shrink:0 }
.toast .toast-msg{ flex:1; line-height:1.4; color:var(--text) }
.toast .toast-close{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:14px }

/* ── 空状态/加载 ── */
.empty-state{ text-align:center; padding:60px 24px; color:var(--text-muted) }
.loading-spinner{ display:flex; align-items:center; justify-content:center; padding:40px; color:var(--text-muted); font-size:14px; gap:10px }
.loading-spinner::before{
  content:''; width:16px; height:16px; border:2px solid var(--border);
  border-top-color:var(--brand); border-radius:50%; animation:spin .6s linear infinite;
}

/* ── 分割线/代码 ── */
.divider{ border:none; border-top:1px solid var(--border); margin:32px 0 }
pre{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; overflow:auto; font-size:13px; line-height:1.7;
}
pre code{ font-family:var(--font-mono); color:var(--text-secondary); background:none }

/* ── Modal ── */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.3); backdrop-filter:blur(4px); z-index:1000; align-items:center; justify-content:center }
.modal-overlay.open{ display:flex }
.modal{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-xl);
  width:440px; max-width:92vw; overflow:hidden; animation:fadeInScale .3s ease;
  box-shadow:var(--shadow-lg);
}
.modal-header{ padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.modal-header h3{ margin:0; font-size:16px; font-weight:600 }
.modal-body{ padding:32px 24px; text-align:center }