/* ============================================
   推薪客统一UI系统 v7.0
   紫色主题 - 2026-04-25
   ============================================ */

/* --- CSS变量 --- */
:root {
  --primary: #F97316;
  --primary-50: rgba(249,115,22,0.05);
  --primary-100: rgba(249,115,22,0.1);
  --primary-200: rgba(249,115,22,0.2);
  --primary-300: rgba(249,115,22,0.3);
  --primary-light: #FB923C;
  --primary-dark: #EA580C;
  --primary-gradient: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  --secondary: #EA580C;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --bg: #f3f4f6;
  --bg-card: #ffffff;
  --border: #e5e7eb;
  --border-light: #f3f4f6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* --- 重置 --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
ul, ol { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }

/* ============================================
   导航栏
   ============================================ */
.navbar {
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary) !important;
  flex-shrink: 0;
}
.navbar-brand img { height: 26px; }
.navbar-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.navbar-links a {
  padding: 6px 14px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.navbar-links a:hover, .navbar-links a.active { background: var(--primary-50); color: var(--primary); }
.navbar > .container > .navbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.navbar-links .navbar-actions { display: none; }
.navbar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-secondary);
  border-radius: 6px;
}
.navbar-toggle:hover { background: var(--primary-50); }

/* ============================================
   按钮
   ============================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.2s; line-height: 1.4;
}
.btn-primary { background: var(--primary-gradient); color: white; }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(79,70,229,0.3); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: white; }
.btn-light { background: white; color: var(--primary-dark); }
.btn-outline-light { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.7); }
.btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: white; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-warning { background: var(--warning); color: white; }

/* ============================================
   Hero区域
   ============================================ */
.hero-section {
  padding: 100px 0 60px;
  background: var(--primary-gradient);
  color: white;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -50%; right: -5%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-title { font-size: 48px; font-weight: 700; margin-bottom: 20px; line-height: 1.2; }
.hero-subtitle { font-size: 20px; opacity: 0.9; margin-bottom: 40px; line-height: 1.5; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-container { position: relative; z-index: 1; }

/* ============================================
   Section
   ============================================ */
.section { padding: 60px 0; }
.section-alt { background: var(--bg); }
.section-title { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 8px; color: var(--text); }
.section-subtitle { font-size: 15px; color: var(--text-secondary); text-align: center; margin-bottom: 40px; }

/* ============================================
   网格组件
   ============================================ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px; transition: all 0.25s;
}
.feature-card:hover {
  box-shadow: 0 4px 16px rgba(79,70,229,0.08);
  border-color: var(--primary-200);
  transform: translateY(-2px);
}
.feature-icon { font-size: 40px; margin-bottom: 16px; }
.feature-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card { text-align: center; padding: 24px; }
.stat-number { font-size: 32px; font-weight: 800; color: var(--primary); }
.stat-label { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }

.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.role-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 32px; text-align: center; transition: all 0.25s;
}
.role-card:hover {
  box-shadow: 0 4px 16px rgba(79,70,229,0.08);
  border-color: var(--primary-200);
  transform: translateY(-2px);
}
.role-icon { font-size: 48px; margin-bottom: 16px; }
.role-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.role-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* ============================================
   门户页面
   ============================================ */
.portal-header {
  background: var(--primary-gradient); color: white;
  padding: 36px 0; position: relative; overflow: hidden;
}
.portal-header::before {
  content: '';
  position: absolute;
  top: -60%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}
.portal-header h1 { font-size: 28px; font-weight: 700; position: relative; z-index: 1; }
.portal-header p { font-size: 15px; opacity: 0.9; margin-top: 6px; position: relative; z-index: 1; }

.portal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.portal-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 20px;
  color: var(--text); text-decoration: none; font-size: 13px;
  transition: all 0.2s;
}
.portal-action:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }

.hero-stats { display: flex; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
.portal-stat {
  text-align: center; padding: 16px;
  background: rgba(255,255,255,0.12); border-radius: 12px;
  min-width: 120px; backdrop-filter: blur(4px);
}
.portal-stat .number { font-size: 26px; font-weight: 800; }
.portal-stat .label { font-size: 13px; opacity: 0.8; margin-top: 2px; }

.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.portal-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

.portal-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px; transition: all 0.25s ease;
  text-decoration: none; color: inherit; display: block;
}
.portal-card:hover {
  box-shadow: 0 4px 16px rgba(79,70,229,0.1);
  border-color: var(--primary-200); transform: translateY(-2px);
}
.portal-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.portal-card p { font-size: 13px; color: var(--text-secondary); margin: 6px 0; line-height: 1.5; }
.portal-card .portal-emoji { font-size: 36px; margin-bottom: 12px; }

.portal-badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
}
.portal-badge-primary { background: var(--primary-100); color: var(--primary); }
.portal-badge-success { background: #d1fae5; color: #065f46; }
.portal-badge-warning { background: #fef3c7; color: #92400e; }
.portal-badge-danger { background: #fee2e2; color: #991b1b; }

/* ============================================
   登录页
   ============================================ */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--primary-gradient); padding: 20px;
}
.login-card {
  background: white; border-radius: 16px; padding: 40px;
  width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.login-card h1 { font-size: 24px; font-weight: 700; margin-bottom: 24px; text-align: center; }
.login-card input {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 15px; outline: none; transition: border-color 0.2s;
}
.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.login-card label { font-size: 14px; font-weight: 500; display: block; margin-bottom: 6px; }
.login-card .btn { width: 100%; padding: 12px; font-size: 15px; margin-top: 8px; }
.login-card .form-group { margin-bottom: 16px; }

/* ============================================
   页脚
   ============================================ */
.footer {
  background: #1f2937; color: rgba(255,255,255,0.8);
}
.footer .container { padding: 32px 20px; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: white; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; margin: 12px 0; }
.footer-links a { color: rgba(255,255,255,0.7); font-size: 14px; }
.footer-links a:hover { color: white; }
.footer-bottom { font-size: 13px; opacity: 0.6; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); }

/* ============================================
   移动端响应式
   ============================================ */
@media (max-width: 768px) {
  .navbar { height: 50px; }
  .navbar .container { height: 50px; padding: 0 12px; }
  .navbar-brand { font-size: 16px; }
  .navbar-brand img { height: 22px; }
  .navbar > .container > .navbar-actions { display: none; }
  .navbar-toggle { display: flex; align-items: center; justify-content: center; }
  .navbar-links {
    display: none;
    position: fixed; top: 50px; left: 0; right: 0;
    background: var(--bg-card); flex-direction: column;
    padding: 12px 16px 16px; gap: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--border); z-index: 99;
  }
  .navbar-links.active { display: flex; }
  .navbar-links a { padding: 10px 14px; font-size: 15px; width: 100%; border-radius: 8px; }
  .navbar-links a:active { background: var(--primary-50); }
  .navbar-links .navbar-actions {
    display: flex; gap: 10px; margin-top: 10px;
    padding: 10px 14px 4px; border-top: 1px solid var(--border); width: 100%;
  }
  .navbar-links .navbar-actions .btn { flex: 1; text-align: center; padding: 10px 0; font-size: 14px; }

  .hero-section { padding: 70px 0 40px; }
  .hero-title { font-size: 28px; }
  .hero-subtitle { font-size: 16px; margin-bottom: 30px; }
  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions .btn { width: 100%; max-width: 300px; }
  .feature-grid { grid-template-columns: 1fr; gap: 16px; }
  .role-grid { grid-template-columns: 1fr; gap: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 40px 0; }
  .section-title { font-size: 22px; }
  .login-card { padding: 28px 20px; }
  .footer .container { padding: 24px 16px; }
  .footer-links { justify-content: center; }
  .portal-header { padding: 24px 16px; }
  .portal-header h1 { font-size: 20px; }
  .portal-header p { font-size: 14px; }
  .portal-grid { grid-template-columns: 1fr; gap: 10px; }
  .portal-grid-3 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .portal-card { padding: 16px; }
  .portal-stat { min-width: 100px; padding: 12px; }
  .portal-stat .number { font-size: 20px; }
  .hero-stats { gap: 10px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 24px; }
  .portal-header h1 { font-size: 18px; }
  .portal-grid-3 { grid-template-columns: 1fr; }
  .hero-stats { flex-direction: column; align-items: center; }
  .portal-stat { width: 100%; max-width: 260px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* ============================================
   紫色增强
   ============================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--border-light); }
::-webkit-scrollbar-thumb { background: var(--primary-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
::selection { background: var(--primary-200); color: var(--primary-dark); }

/* ============================================
   功能页面组件
   ============================================ */

/* 页面头 */
.page-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.page-header h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.page-header p { font-size: 14px; color: var(--text-secondary); }

/* 统计卡片 */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; transition: all 0.2s;
}
.stat-card:hover { box-shadow: 0 2px 8px rgba(79,70,229,0.06); }
.stat-card .num { font-size: 28px; font-weight: 800; color: var(--primary); }
.stat-card .label { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.stat-card .trend { font-size: 12px; font-weight: 600; margin-top: 4px; }
.stat-card .trend.up { color: var(--success); }
.stat-card .trend.down { color: var(--danger); }

/* 搜索栏 */
.search-bar {
  display: flex; gap: 12px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 20px; align-items: flex-end;
}
.search-bar .field { display: flex; flex-direction: column; gap: 4px; }
.search-bar .field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.search-bar .field input, .search-bar .field select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; outline: none; transition: border-color 0.2s;
}
.search-bar .field input:focus, .search-bar .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-100); }
.search-bar .actions { display: flex; gap: 8px; align-items: flex-end; }

/* 表格 */
.table-wrap {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th {
  padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); background: var(--border-light);
  border-bottom: 1px solid var(--border);
}
.table-wrap td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--border-light); }
.table-wrap tr:hover td { background: var(--primary-50); }
.table-wrap .empty-row td { text-align: center; padding: 40px; color: var(--text-secondary); font-size: 14px; }

/* 状态标签 */
.status { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.status-active { background: #d1fae5; color: #065f46; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-closed { background: #fee2e2; color: #991b1b; }
.status-draft { background: #e5e7eb; color: #374151; }
.status-review { background: #dbeafe; color: #1e40af; }

/* 操作按钮组 */
.action-group { display: flex; gap: 4px; }
.action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); cursor: pointer; font-size: 14px;
  transition: all 0.2s; color: var(--text-secondary);
}
.action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.action-btn-danger:hover { border-color: var(--danger); color: var(--danger); background: #fee2e2; }

/* 工具栏 */
.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.toolbar-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar-right { display: flex; gap: 8px; align-items: center; }

/* 内容卡片 */
.content-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px; margin-bottom: 20px;
}
.content-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-100);
}

/* 分页 */
.pagination {
  display: flex; justify-content: center; gap: 4px; padding: 16px;
  border-top: 1px solid var(--border-light);
}
.pagination button {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); cursor: pointer; font-size: 13px; transition: all 0.15s;
}
.pagination button:hover { border-color: var(--primary); color: var(--primary); }
.pagination button.active { background: var(--primary); color: white; border-color: var(--primary); }

/* 面板布局 */
.panel-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.panel-grid-full { grid-column: 1 / -1; }
@media (max-width: 768px) { .panel-grid { grid-template-columns: 1fr; } }

/* 进度条 */
.progress-bar {
  height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; margin: 4px 0;
}
.progress-bar .fill { height: 100%; border-radius: 3px; background: var(--primary-gradient); transition: width 0.3s; }

/* 信息行 */
.info-row { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; }
.info-row dt { color: var(--text-secondary); font-size: 13px; }
.info-row dd { font-weight: 500; margin: 0; }
.info-group { min-width: 120px; }

/* 空状态 */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.empty-state .icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.empty-state p { font-size: 14px; margin-bottom: 20px; }

/* 标签 */
.tag { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 12px; background: var(--primary-50); color: var(--primary); }
.tag-success { background: #d1fae5; color: #065f46; }
.tag-warning { background: #fef3c7; color: #92400e; }
.tag-danger { background: #fee2e2; color: #991b1b; }

/* === 合并自独立CSS文件 === */
/* 推薪客优化样式表 */
/* 创建时间: $(date) */

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 字体优化 */
body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 布局优化 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

/* 性能优化类 */
.optimized-image {
    max-width: 100%;
    height: auto;
}

.lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy-load.loaded {
    opacity: 1;
}

/* 动画优化 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 按钮优化 */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 卡片优化 */
.card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
/* 推薪客移动端优化CSS - 基础版本 */

/* 移动端基础设置 */
@media (max-width: 768px) {
  /* 基础重置 */
  html {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  /* 容器优化 */
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
  
  /* 触摸目标优化 */
  button, 
  .btn,
  a.button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    font-size: 16px;
  }
  
  /* 表单优化 */
  input, select, textarea {
    font-size: 16px; /* 防止iOS缩放 */
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* 安全区域适配 */
  .safe-area {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  /* 隐藏桌面元素，显示移动元素 */
  .desktop-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block !important;
  }
}

/* 小屏幕手机 */
@media (max-width: 375px) {
  html {
    font-size: 13px;
  }
  
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* 横屏模式 */
@media (orientation: landscape) and (max-height: 500px) {
  .navbar {
    position: static;
  }
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #ffffff;
  }
}
/* 推薪客移动端深度适配 */

/* 移动端基础优化 */
@media (max-width: 768px) {
  /* 容器优化 */
  .container {
    padding: 0 16px;
  }
  
  /* 字体优化 */
  html {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }
  
  h2 {
    font-size: 1.5rem;
    margin-bottom: 0.875rem;
  }
  
  h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  /* 按钮优化 */
  .btn {
    min-height: 44px; /* 最小触摸目标尺寸 */
    padding: 12px 20px;
    font-size: 16px; /* 防止iOS缩放 */
  }
  
  .btn-sm {
    min-height: 36px;
    padding: 8px 16px;
  }
  
  .btn-lg {
    min-height: 52px;
    padding: 16px 24px;
  }
  
  /* 表单优化 */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* 防止iOS缩放 */
    min-height: 44px;
    padding: 12px 16px;
  }
  
  /* 导航优化 */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }
  
  .nav-container {
    padding: 12px 16px;
  }
  
  .nav-links {
    display: none; /* 移动端隐藏导航链接，使用汉堡菜单 */
  }
  
  .mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
  }
  
  .mobile-menu {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: none;
  }
  
  .mobile-menu.active {
    display: block;
  }
  
  .mobile-menu .nav-link {
    display: block;
    padding: 16px;
    border-bottom: 1px solid #E2E8F0;
  }
  
  /* 卡片优化 */
  .card {
    margin-bottom: 16px;
    border-radius: 12px;
  }
  
  .card-header {
    padding: 16px;
  }
  
  .card-body {
    padding: 16px;
  }
  
  .card-footer {
    padding: 16px;
  }
  
  /* 表格优化 */
  .table-container {
    margin: 0 -16px;
    padding: 0 16px;
  }
  
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table th,
  .table td {
    min-width: 100px;
    padding: 12px 8px;
  }
  
  /* 模态框优化 */
  .modal {
    width: 90% !important;
    max-width: 400px !important;
    max-height: 80vh;
    border-radius: 16px;
  }
  
  .modal-header {
    padding: 16px;
  }
  
  .modal-body {
    padding: 16px;
    max-height: calc(80vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 底部安全区域 */
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* 手势优化 */
  .swipe-area {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  
  .swipe-item {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  
  /* 触摸反馈 */
  .touch-feedback:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

/* 小屏幕手机优化 */
@media (max-width: 375px) {
  .container {
    padding: 0 12px;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  .btn {
    padding: 10px 16px;
  }
}

/* 平板优化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 0 24px;
  }
  
  .nav-links {
    gap: 12px;
  }
  
  .nav-link {
    padding: 8px 12px;
  }
}

/* 横屏优化 */
@media (max-height: 500px) and (orientation: landscape) {
  .navbar {
    position: static;
  }
  
  .modal {
    max-height: 90vh;
  }
  
  .modal-body {
    max-height: calc(90vh - 120px);
  }
}

/* 暗色模式移动端优化 */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .mobile-menu {
    background: #1F2937;
  }
  
  .mobile-menu .nav-link {
    border-bottom-color: #374151;
    color: #D1D5DB;
  }
  
  .mobile-menu .nav-link:hover {
    background: #374151;
    color: white;
  }
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .btn,
  .form-input,
  .nav-link {
    border-width: 0.5px;
  }
}

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 鸿蒙系统优化 */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari特有优化 */
  .btn,
  .form-input {
    -webkit-appearance: none;
  }
  
  .modal-body {
    -webkit-overflow-scrolling: touch;
  }
}

/* 安卓系统优化 */
@supports not (-webkit-touch-callout: none) {
  .btn,
  .form-input {
    outline: none;
  }
  
  .btn:focus,
  .form-input:focus {
    outline: 2px solid #F97316;
    outline-offset: 2px;
  }
}

/* 移动端特定组件 */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
}

/* 底部导航栏（移动端） */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  text-decoration: none;
  color: #64748B;
  flex: 1;
}

.mobile-bottom-nav-item.active {
  color: #F97316;
}

.mobile-bottom-nav-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.mobile-bottom-nav-label {
  font-size: 10px;
}

/* 上拉加载更多 */
.pull-to-refresh {
  position: relative;
  overflow: hidden;
}

.pull-to-refresh-indicator {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
}

/* 下拉刷新 */
.infinite-scroll-loader {
  padding: 20px;
  text-align: center;
  color: #64748B;
}

/* 移动端图片优化 */
.mobile-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 移动端视频优化 */
.mobile-video {
  width: 100%;
  height: auto;
  max-height: 50vh;
}

/* 移动端地图优化 */
.mobile-map {
  width: 100%;
  height: 300px;
}

/* 移动端聊天优化 */
.mobile-chat {
  height: calc(100vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-chat-input {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #E2E8F0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* 移动端支付优化 */
.mobile-payment {
  max-width: 400px;
  margin: 0 auto;
}

/* 移动端分享优化 */
.mobile-share-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 1001;
}

/* 移动端通知优化 */
.mobile-notification {
  position: fixed;
  top: 60px;
  left: 16px;
  right: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 1000;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 移动端搜索优化 */
.mobile-search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 1001;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-search-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 16px;
}

/* 移动端筛选优化 */
.mobile-filter {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 1001;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 移动端引导页优化 */
.mobile-onboarding {
  height: 100vh;
  overflow: hidden;
}

.mobile-onboarding-slide {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.mobile-onboarding-image {
  max-width: 80%;
  max-height: 40vh;
  margin-bottom: 40px;
}

.mobile-onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.mobile-onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E2E8F0;
}

.mobile-onboarding-dot.active {
  background: #F97316;
}

/* 移动端错误页面优化 */
.mobile-error {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.mobile-error-icon {
  font-size: 64px;
  margin-bottom: 20px;
  color: #EF4444;
}

.mobile-error-title {
  font-size: 24px;
  margin-bottom: 12px;
  color: #1E293B;
}

.mobile-error-message {
  color: #64748B;
  margin-bottom: 32px;
}

/* 移动端空状态优化 */
.mobile-empty {
  padding: 60px 20px;
  text-align: center;
}

.mobile-empty-icon {
  font-size: 48px;
  margin-bottom: 20px;
  color: #9CA3AF;
}

.mobile-empty-title {
  font-size: 18px;
  margin-bottom: 8px;
  color: #374151;
}

.mobile-empty-description {
  color: #6B7280;
  margin-bottom: 24px;
}

/* 移动端加载状态优化 */
.mobile-loading {
  padding: 60px 20px;
  text-align: center;
}

.mobile-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E2E8F0;
  border-radius: 50%;
  border-top-color: #F97316;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-loading-text {
  color: #64748B;
}

/* 移动端性能优化 */
.mobile-performance {
  /* 减少重绘和重排 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 移动端无障碍优化 */
.mobile-accessibility {
  /* 增加触摸目标尺寸 */
  min-height: 44px;
  min-width: 44px;
  
  /* 增加对比度 */
  color: #1F2937;
  background: white;
  
  /* 支持屏幕阅读器 */
  -webkit-tap-highlight-color: transparent;
}

/* 移动端测试类 */
.mobile-test-border {
  border: 1px solid red;
}

.mobile-test-bg {
  background: rgba(255, 0, 0, 0.1);
}
/* === 合并自 css/core/ === */
/* 
 * 推薪客系统 - 基础样式
 * 版本: v2.0.0
 * 包含: 重置样式、排版、基础元素
 */

/* ===== CSS重置和规范化 ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-family-sans, var(--font-family-chinese));
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== 排版系统 ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: var(--spacing-4);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-6);
}

h2 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-5);
}

h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-4);
}

h4 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-3);
}

h5 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-2);
}

h6 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-2);
}

p {
  margin-top: 0;
  margin-bottom: var(--spacing-4);
}

/* 链接样式 */
a {
  color: var(--color-link);
  text-decoration: none;
  background-color: transparent;
  transition: color var(--transition-duration-fast) var(--transition-timing-ease);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

a:visited {
  color: var(--color-link-visited);
}

/* 列表样式 */
ul, ol {
  margin-top: 0;
  margin-bottom: var(--spacing-4);
  padding-left: var(--spacing-6);
}

ul ul, ul ol, ol ul, ol ol {
  margin-bottom: 0;
}

li {
  margin-bottom: var(--spacing-2);
}

/* 文本样式 */
strong, b {
  font-weight: var(--font-weight-bold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--font-size-sm);
}

sub, sup {
  font-size: var(--font-size-xs);
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* 代码样式 */
code, kbd, pre, samp {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

code {
  background-color: var(--color-neutral-100);
  padding: var(--spacing-0-5) var(--spacing-1);
  border-radius: var(--radius-sm);
  color: var(--color-error-600);
}

pre {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-100);
  padding: var(--spacing-4);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: var(--spacing-4);
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

/* 引用样式 */
blockquote {
  margin: 0 0 var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-6);
  border-left: 4px solid var(--color-neutral-300);
  background-color: var(--color-neutral-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* 水平线 */
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-8) 0;
}

/* ===== 图片和媒体 ===== */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 0 0 var(--spacing-4);
}

figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--spacing-2);
}

/* ===== 表格样式 ===== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-4);
}

thead {
  background-color: var(--color-neutral-50);
}

th {
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: var(--spacing-3);
  border-bottom: 2px solid var(--color-border);
}

td {
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--color-border-light);
}

tbody tr:hover {
  background-color: var(--color-neutral-50);
}

/* ===== 表单元素 ===== */
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  border: 1px solid var(--color-border);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  border-radius: var(--radius);
}

legend {
  font-weight: var(--font-weight-bold);
  padding: 0 var(--spacing-2);
}

label {
  display: inline-block;
  margin-bottom: var(--spacing-2);
  font-weight: var(--font-weight-medium);
}

input, select, textarea {
  display: block;
  width: 100%;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  border: var(--form-input-border-width) solid var(--color-border);
  border-radius: var(--form-input-border-radius);
  background-color: white;
  transition: border-color var(--transition-duration-fast) var(--transition-timing-ease);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

input:disabled, select:disabled, textarea:disabled {
  background-color: var(--color-neutral-100);
  cursor: not-allowed;
  opacity: 0.6;
}

textarea {
  resize: vertical;
  min-height: 5rem;
}

/* 复选框和单选框 */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  margin-right: var(--spacing-2);
}

/* ===== 工具类 ===== */
/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* 文本颜色 */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-disabled { color: var(--color-text-disabled); }
.text-inverse { color: var(--color-text-inverse); }

.text-brand { color: var(--color-brand-600); }
.text-success { color: var(--color-success-600); }
.text-warning { color: var(--color-warning-600); }
.text-error { color: var(--color-error-600); }
.text-info { color: var(--color-info-600); }

/* 背景颜色 */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }
.bg-card { background-color: var(--color-bg-card); }

.bg-brand { background-color: var(--color-brand-600); }
.bg-success { background-color: var(--color-success-600); }
.bg-warning { background-color: var(--color-warning-600); }
.bg-error { background-color: var(--color-error-600); }
.bg-info { background-color: var(--color-info-600); }

/* 显示和隐藏 */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.grid { display: grid; }

/* 浮动 */
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 溢出 */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

/* 定位 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/* 可见性 */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* 光标 */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }

/* 用户选择 */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* 指针事件 */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* 盒阴影 */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-none { box-shadow: var(--shadow-none); }

/* 圆角 */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* 边框 */
.border { border-width: 1px; border-style: solid; border-color: var(--color-border); }
.border-0 { border-width: 0; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-8 { border-width: 8px; }

.border-light { border-color: var(--color-border-light); }
.border-dark { border-color: var(--color-border-dark); }
.border-brand { border-color: var(--color-brand-600); }
.border-success { border-color: var(--color-success-600); }
.border-warning { border-color: var(--color-warning-600); }
.border-error { border-color: var(--color-error-600); }
.border-info { border-color: var(--color-info-600); }

/* 宽度和高度 */
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }

.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }

.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

.max-w-none { max-width: none; }
.max-w-full { max-width: 100%; }
.max-w-screen-sm { max-width: var(--breakpoint-sm); }
.max-w-screen-md { max-width: var(--breakpoint-md); }
.max-w-screen-lg { max-width: var(--breakpoint-lg); }
.max-w-screen-xl { max-width: var(--breakpoint-xl); }
.max-w-screen-2xl { max-width: var(--breakpoint-2xl); }

.max-h-none { max-height: none; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }

/* 间距工具类 (基于设计令牌) */
/* 边距 */
.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }
.m-10 { margin: var(--spacing-10); }
.m-12 { margin: var(--spacing-12); }
.m-16 { margin: var(--spacing-16); }
.m-20 { margin: var(--spacing-20); }
.m-24 { margin: var(--spacing-24); }
.m-32 { margin: var(--spacing-32); }
.m-auto { margin: auto; }

/* 上下边距 */
.my-0 { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.my-10 { margin-top: var(--spacing-10); margin-bottom: var(--spacing-10); }
.my-12 { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }
.my-16 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }
.my-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
.my-24 { margin-top: var(--spacing-24); margin-bottom: var(--spacing-24); }
.my-32 { margin-top: var(--spacing-32); margin-bottom: var(--spacing-32); }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* 左右边距 */
.mx-0 { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
.mx-8 { margin-left: var(--spacing-8); margin-right: var
/* === 合并自 css/core/components === */
/* 
 * 推薪客系统 - 组件样式
 * 版本: v2.0.0
 * 包含: 按钮、卡片、表单、导航、模态框等
 */

/* ===== 按钮组件 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid transparent;
  cursor: pointer;
  transition: all var(--transition-duration-fast) var(--transition-timing-ease);
  user-select: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.btn:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 按钮尺寸 */
.btn-sm {
  padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
  font-size: var(--btn-sm-font-size);
}

.btn-lg {
  padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
  font-size: var(--btn-lg-font-size);
}

/* 按钮变体 */
.btn-primary {
  background-color: var(--color-brand-600);
  color: white;
  border-color: var(--color-brand-600);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-brand-700);
  border-color: var(--color-brand-700);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--color-brand-800);
  border-color: var(--color-brand-800);
}

.btn-secondary {
  background-color: var(--color-neutral-200);
  color: var(--color-text-primary);
  border-color: var(--color-neutral-200);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-neutral-300);
  border-color: var(--color-neutral-300);
}

.btn-secondary:active:not(:disabled) {
  background-color: var(--color-neutral-400);
  border-color: var(--color-neutral-400);
}

.btn-success {
  background-color: var(--color-success-600);
  color: white;
  border-color: var(--color-success-600);
}

.btn-success:hover:not(:disabled) {
  background-color: var(--color-success-700);
  border-color: var(--color-success-700);
}

.btn-warning {
  background-color: var(--color-warning-600);
  color: white;
  border-color: var(--color-warning-600);
}

.btn-warning:hover:not(:disabled) {
  background-color: var(--color-warning-700);
  border-color: var(--color-warning-700);
}

.btn-error {
  background-color: var(--color-error-600);
  color: white;
  border-color: var(--color-error-600);
}

.btn-error:hover:not(:disabled) {
  background-color: var(--color-error-700);
  border-color: var(--color-error-700);
}

.btn-info {
  background-color: var(--color-info-600);
  color: white;
  border-color: var(--color-info-600);
}

.btn-info:hover:not(:disabled) {
  background-color: var(--color-info-700);
  border-color: var(--color-info-700);
}

/* 轮廓按钮 */
.btn-outline {
  background-color: transparent;
  color: var(--color-brand-600);
  border-color: var(--color-brand-600);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--color-brand-50);
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--color-brand-600);
  border-color: var(--color-brand-600);
}

.btn-outline-primary:hover:not(:disabled) {
  background-color: var(--color-brand-50);
}

.btn-outline-secondary {
  background-color: transparent;
  color: var(--color-neutral-600);
  border-color: var(--color-neutral-300);
}

.btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--color-neutral-50);
}

/* 幽灵按钮 */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-neutral-100);
}

/* 链接按钮 */
.btn-link {
  background-color: transparent;
  color: var(--color-link);
  border-color: transparent;
  text-decoration: underline;
}

.btn-link:hover:not(:disabled) {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* 按钮组 */
.btn-group {
  display: inline-flex;
  border-radius: var(--radius);
  overflow: hidden;
}

.btn-group .btn {
  border-radius: 0;
  border-right-width: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.btn-group .btn:last-child {
  border-right-width: var(--btn-border-width);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* ===== 卡片组件 ===== */
.card {
  background-color: var(--color-bg-card);
  border-radius: var(--card-border-radius);
  border: var(--card-border-width) solid var(--color-border);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  transition: all var(--transition-duration) var(--transition-timing-ease);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  padding-bottom: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-2);
  color: var(--color-text-primary);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.card-body {
  margin-bottom: var(--spacing-4);
}

.card-body:last-child {
  margin-bottom: 0;
}

.card-footer {
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 卡片变体 */
.card-primary {
  border-color: var(--color-brand-300);
}

.card-primary .card-header {
  background-color: var(--color-brand-50);
  border-color: var(--color-brand-300);
}

.card-success {
  border-color: var(--color-success-300);
}

.card-success .card-header {
  background-color: var(--color-success-50);
  border-color: var(--color-success-300);
}

.card-warning {
  border-color: var(--color-warning-300);
}

.card-warning .card-header {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-300);
}

.card-error {
  border-color: var(--color-error-300);
}

.card-error .card-header {
  background-color: var(--color-error-50);
  border-color: var(--color-error-300);
}

/* ===== 表单组件 ===== */
.form-group {
  margin-bottom: var(--spacing-4);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.form-label.required::after {
  content: " *";
  color: var(--color-error-500);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: white;
  border: var(--form-input-border-width) solid var(--color-border);
  border-radius: var(--form-input-border-radius);
  transition: border-color var(--transition-duration-fast) var(--transition-timing-ease);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.form-control:disabled {
  background-color: var(--color-neutral-100);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-control.is-invalid {
  border-color: var(--color-error-500);
}

.form-control.is-invalid:focus {
  border-color: var(--color-error-500);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-control.is-valid {
  border-color: var(--color-success-500);
}

.form-control.is-valid:focus {
  border-color: var(--color-success-500);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* 表单帮助文本 */
.form-text {
  display: block;
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.form-text.is-invalid {
  color: var(--color-error-600);
}

.form-text.is-valid {
  color: var(--color-success-600);
}

/* 复选框和单选框 */
.form-check {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

.form-check-input {
  width: var(--form-checkbox-size);
  height: var(--form-checkbox-size);
  margin-right: var(--spacing-2);
  cursor: pointer;
}

.form-check-label {
  margin-bottom: 0;
  cursor: pointer;
}

.form-check-inline {
  display: inline-flex;
  margin-right: var(--spacing-4);
}

/* 选择框 */
.form-select {
  display: block;
  width: 100%;
  padding: var(--form-select-padding-y) var(--form-select-padding-x);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: white;
  border: var(--form-input-border-width) solid var(--color-border);
  border-radius: var(--form-input-border-radius);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.form-select:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.form-select:disabled {
  background-color: var(--color-neutral-100);
  cursor: not-allowed;
  opacity: 0.6;
}

/* 输入组 */
.input-group {
  display: flex;
  border-radius: var(--radius);
  overflow: hidden;
}

.input-group .form-control {
  border-radius: 0;
  border-right-width: 0;
}

.input-group .form-control:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.input-group .form-control:last-child {
  border-right-width: var(--form-input-border-width);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  background-color: var(--color-neutral-100);
  border: var(--form-input-border-width) solid var(--color-border);
  white-space: nowrap;
}

/* ===== 导航组件 ===== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: var(--nav-padding-y) var(--nav-padding-x);
  background-color: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
}

.navbar-brand {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-right: var(--spacing-4);
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius);
  transition: all var(--transition-duration-fast) var(--transition-timing-ease);
}

.nav-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-neutral-100);
}

.nav-link.active {
  color: var(--color-brand-600);
  background-color: var(--color-brand-50);
}

/* 侧边栏 */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--color-bg-card);
  border-right: 1px solid var(--color-border);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-fixed);
  transition: width var(--transition-duration) var(--transition-timing-ease);
  overflow-y: auto;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-header {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-body {
  padding: var(--spacing-4);
}

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-item {
  margin-bottom: var(--spacing-2);
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: var(--spacing-3);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius);
  transition: all var(--transition-duration-fast) var(--transition-timing-ease);
}

.sidebar-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-neutral-100);
}

.sidebar-link.active {
  color: var(--color-brand-600);
  background-color: var(--color-brand-50);
}

.sidebar-icon {
  margin-right: var(--spacing-3);
  width: 1.25rem;
  height: 1.25rem;
}

.sidebar.collapsed .sidebar-text {
  display: none;
}

/* ===== 模态框组件 ===== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-modal);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-overlay);
  z-index: var(--z-index-modal-backdrop);
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: var(--spacing-4);
  z-index: var(--z-index-modal);
}

.modal-content {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--spacing-1);
  border-radius: var(--radius);
  transition: all var(--transition-duration-fast) var(--transition-timing-ease);
}

.modal-close:hover {
  color: var(--color-text-primary);
  background-color: var(--color-neutral-100);
}

.modal-body {
  padding: var(--spacing-6);
  max-height: 60vh;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-6);
  border-top: 1px solid var(--color-border);
  gap: var(--spacing-3);

/* === 合并自 css/core/design-tokens === */
/* 
 * 推薪客系统 - 设计令牌 (Design Tokens)
 * 版本: v2.0.0
 * 优化目标: 统一、可维护、高性能
 */

/* ===== CSS自定义属性 (CSS Custom Properties) ===== */
:root {
  /* ===== 颜色系统 ===== */
  /* 品牌色 - 紫色系 (主品牌) */
  --color-brand-50: #f5f3ff;
  --color-brand-100: #ede9fe;
  --color-brand-200: #ddd6fe;
  --color-brand-300: #c4b5fd;
  --color-brand-400: #a78bfa;
  --color-brand-500: #8b5cf6;
  --color-brand-600: #ea580c;
  --color-brand-700: #6d28d9;
  --color-brand-800: #5b21b6;
  --color-brand-900: #4c1d95;
  
  /* 中性色 - 灰度 */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;
  --color-neutral-950: #030712;
  
  /* 功能色 - 语义化 */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;
  
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;
  
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;
  
  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;
  --color-info-400: #60a5fa;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-info-800: #1e40af;
  --color-info-900: #1e3a8a;
  
  /* 角色主题色 */
  --color-role-employer: var(--color-brand-600);
  --color-role-broker: var(--color-success-600);
  --color-role-jobseeker: var(--color-warning-600);
  --color-role-admin: var(--color-neutral-700);
  
  /* 界面语义色 */
  --color-bg-primary: var(--color-neutral-50);
  --color-bg-secondary: var(--color-neutral-100);
  --color-bg-tertiary: var(--color-neutral-200);
  --color-bg-card: #ffffff;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  
  --color-border-light: var(--color-neutral-200);
  --color-border: var(--color-neutral-300);
  --color-border-dark: var(--color-neutral-400);
  
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse: #ffffff;
  
  --color-link: var(--color-brand-600);
  --color-link-hover: var(--color-brand-700);
  --color-link-visited: var(--color-brand-800);
  
  /* 交互状态 */
  --color-focus-ring: var(--color-brand-500);
  --color-selection-bg: var(--color-brand-100);
  --color-selection-text: var(--color-brand-900);
  
  /* ===== 间距系统 (8px基准) ===== */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem;  /* 2px */
  --spacing-1: 0.25rem;     /* 4px */
  --spacing-1-5: 0.375rem;  /* 6px */
  --spacing-2: 0.5rem;      /* 8px */
  --spacing-2-5: 0.625rem;  /* 10px */
  --spacing-3: 0.75rem;     /* 12px */
  --spacing-3-5: 0.875rem;  /* 14px */
  --spacing-4: 1rem;        /* 16px */
  --spacing-5: 1.25rem;     /* 20px */
  --spacing-6: 1.5rem;      /* 24px */
  --spacing-7: 1.75rem;     /* 28px */
  --spacing-8: 2rem;        /* 32px */
  --spacing-9: 2.25rem;     /* 36px */
  --spacing-10: 2.5rem;     /* 40px */
  --spacing-11: 2.75rem;    /* 44px */
  --spacing-12: 3rem;       /* 48px */
  --spacing-14: 3.5rem;     /* 56px */
  --spacing-16: 4rem;       /* 64px */
  --spacing-20: 5rem;       /* 80px */
  --spacing-24: 6rem;       /* 96px */
  --spacing-28: 7rem;       /* 112px */
  --spacing-32: 8rem;       /* 128px */
  --spacing-36: 9rem;       /* 144px */
  --spacing-40: 10rem;      /* 160px */
  --spacing-44: 11rem;      /* 176px */
  --spacing-48: 12rem;      /* 192px */
  --spacing-52: 13rem;      /* 208px */
  --spacing-56: 14rem;      /* 224px */
  --spacing-60: 15rem;      /* 240px */
  --spacing-64: 16rem;      /* 256px */
  --spacing-72: 18rem;      /* 288px */
  --spacing-80: 20rem;      /* 320px */
  --spacing-96: 24rem;      /* 384px */
  
  /* ===== 字体系统 ===== */
  /* 字体家族 */
  --font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-family-chinese: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  
  /* 字体大小 (rem基准) */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */
  --font-size-6xl: 3.75rem;    /* 60px */
  --font-size-7xl: 4.5rem;     /* 72px */
  --font-size-8xl: 6rem;       /* 96px */
  --font-size-9xl: 8rem;       /* 128px */
  
  /* 行高 */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* 字重 */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* 字母间距 */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  /* ===== 圆角系统 ===== */
  --radius-none: 0;
  --radius-sm: 0.125rem;   /* 2px */
  --radius: 0.25rem;       /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-3xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;
  
  /* ===== 阴影系统 ===== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 50px 100px -20px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: 0 0 #0000;
  
  /* ===== 过渡动画 ===== */
  --transition-duration-fast: 150ms;
  --transition-duration: 300ms;
  --transition-duration-slow: 500ms;
  
  --transition-timing-linear: linear;
  --transition-timing-ease: ease;
  --transition-timing-ease-in: ease-in;
  --transition-timing-ease-out: ease-out;
  --transition-timing-ease-in-out: ease-in-out;
  
  /* ===== 层级 (z-index) ===== */
  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --z-index-auto: auto;
  
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
  
  /* ===== 响应式断点 ===== */
  --breakpoint-xs: 0;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ===== 容器宽度 ===== */
  --container-xs: 100%;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* ===== 网格系统 ===== */
  --grid-columns: 12;
  --grid-gap: var(--spacing-4);
  --grid-gap-sm: var(--spacing-2);
  --grid-gap-lg: var(--spacing-6);
  
  /* ===== 表单元素 ===== */
  --form-input-height: 2.5rem;
  --form-input-padding-x: var(--spacing-3);
  --form-input-padding-y: var(--spacing-2);
  --form-input-border-width: 1px;
  --form-input-border-radius: var(--radius);
  
  --form-select-height: 2.5rem;
  --form-select-padding-x: var(--spacing-3);
  --form-select-padding-y: var(--spacing-2);
  
  --form-checkbox-size: 1rem;
  --form-radio-size: 1rem;
  
  /* ===== 按钮系统 ===== */
  --btn-padding-x: var(--spacing-4);
  --btn-padding-y: var(--spacing-2);
  --btn-font-size: var(--font-size-sm);
  --btn-font-weight: var(--font-weight-medium);
  --btn-line-height: var(--line-height-normal);
  --btn-border-radius: var(--radius);
  --btn-border-width: 1px;
  
  --btn-sm-padding-x: var(--spacing-3);
  --btn-sm-padding-y: var(--spacing-1-5);
  --btn-sm-font-size: var(--font-size-xs);
  
  --btn-lg-padding-x: var(--spacing-6);
  --btn-lg-padding-y: var(--spacing-3);
  --btn-lg-font-size: var(--font-size-base);
  
  /* ===== 卡片系统 ===== */
  --card-padding: var(--spacing-6);
  --card-border-radius: var(--radius-lg);
  --card-border-width: 1px;
  --card-shadow: var(--shadow);
  
  /* ===== 导航系统 ===== */
  --nav-height: 4rem;
  --nav-padding-x: var(--spacing-6);
  --nav-padding-y: var(--spacing-3);
  
  --sidebar-width: 16rem;
  --sidebar-collapsed-width: 4rem;
  
  /* ===== 表格系统 ===== */
  --table-cell-padding: var(--spacing-3) var(--spacing-
/* === 合并自 css/core/responsive === */
/* 
 * 推薪客系统 - 响应式工具类
 * 版本: v2.0.0
 * 包含: 响应式断点、网格系统、移动端优化
 */

/* ===== 响应式容器 ===== */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-4);
  padding-left: var(--spacing-4);
}

@media (min-width: var(--breakpoint-sm)) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (min-width: var(--breakpoint-md)) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: var(--breakpoint-lg)) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: var(--breakpoint-xl)) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: var(--breakpoint-2xl)) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* 全宽容器 */
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-4);
  padding-left: var(--spacing-4);
}

/* ===== 响应式断点工具类 ===== */
/* 移动端优先: 默认样式适用于所有屏幕，大屏幕覆盖 */

/* 隐藏/显示工具类 */
.hidden { display: none !important; }
.block { display: block !important; }

/* 超小屏幕 (xs): < 640px */
@media (max-width: 639px) {
  .hidden-xs { display: none !important; }
  .block-xs { display: block !important; }
  .flex-xs { display: flex !important; }
  .grid-xs { display: grid !important; }
}

/* 小屏幕 (sm): ≥ 640px */
@media (min-width: var(--breakpoint-sm)) {
  .hidden-sm { display: none !important; }
  .block-sm { display: block !important; }
  .flex-sm { display: flex !important; }
  .grid-sm { display: grid !important; }
}

/* 中屏幕 (md): ≥ 768px */
@media (min-width: var(--breakpoint-md)) {
  .hidden-md { display: none !important; }
  .block-md { display: block !important; }
  .flex-md { display: flex !important; }
  .grid-md { display: grid !important; }
}

/* 大屏幕 (lg): ≥ 1024px */
@media (min-width: var(--breakpoint-lg)) {
  .hidden-lg { display: none !important; }
  .block-lg { display: block !important; }
  .flex-lg { display: flex !important; }
  .grid-lg { display: grid !important; }
}

/* 超大屏幕 (xl): ≥ 1280px */
@media (min-width: var(--breakpoint-xl)) {
  .hidden-xl { display: none !important; }
  .block-xl { display: block !important; }
  .flex-xl { display: flex !important; }
  .grid-xl { display: grid !important; }
}

/* 2xl屏幕: ≥ 1536px */
@media (min-width: var(--breakpoint-2xl)) {
  .hidden-2xl { display: none !important; }
  .block-2xl { display: block !important; }
  .flex-2xl { display: flex !important; }
  .grid-2xl { display: grid !important; }
}

/* ===== 网格系统 ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
  gap: var(--grid-gap, var(--spacing-4));
}

/* 列跨度 */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
.col-span-full { grid-column: 1 / -1; }

/* 列起始位置 */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }

/* 行跨度 */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-4 { grid-row: span 4; }
.row-span-5 { grid-row: span 5; }
.row-span-6 { grid-row: span 6; }
.row-span-full { grid-row: 1 / -1; }

/* 行起始位置 */
.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-7 { grid-row-start: 7; }

/* 响应式网格列 */
@media (max-width: 639px) {
  .xs\:col-span-1 { grid-column: span 1; }
  .xs\:col-span-2 { grid-column: span 2; }
  .xs\:col-span-3 { grid-column: span 3; }
  .xs\:col-span-4 { grid-column: span 4; }
  .xs\:col-span-5 { grid-column: span 5; }
  .xs\:col-span-6 { grid-column: span 6; }
  .xs\:col-span-7 { grid-column: span 7; }
  .xs\:col-span-8 { grid-column: span 8; }
  .xs\:col-span-9 { grid-column: span 9; }
  .xs\:col-span-10 { grid-column: span 10; }
  .xs\:col-span-11 { grid-column: span 11; }
  .xs\:col-span-12 { grid-column: span 12; }
  .xs\:col-span-full { grid-column: 1 / -1; }
}

@media (min-width: var(--breakpoint-sm)) {
  .sm\:col-span-1 { grid-column: span 1; }
  .sm\:col-span-2 { grid-column: span 2; }
  .sm\:col-span-3 { grid-column: span 3; }
  .sm\:col-span-4 { grid-column: span 4; }
  .sm\:col-span-5 { grid-column: span 5; }
  .sm\:col-span-6 { grid-column: span 6; }
  .sm\:col-span-7 { grid-column: span 7; }
  .sm\:col-span-8 { grid-column: span 8; }
  .sm\:col-span-9 { grid-column: span 9; }
  .sm\:col-span-10 { grid-column: span 10; }
  .sm\:col-span-11 { grid-column: span 11; }
  .sm\:col-span-12 { grid-column: span 12; }
  .sm\:col-span-full { grid-column: 1 / -1; }
}

@media (min-width: var(--breakpoint-md)) {
  .md\:col-span-1 { grid-column: span 1; }
  .md\:col-span-2 { grid-column: span 2; }
  .md\:col-span-3 { grid-column: span 3; }
  .md\:col-span-4 { grid-column: span 4; }
  .md\:col-span-5 { grid-column: span 5; }
  .md\:col-span-6 { grid-column: span 6; }
  .md\:col-span-7 { grid-column: span 7; }
  .md\:col-span-8 { grid-column: span 8; }
  .md\:col-span-9 { grid-column: span 9; }
  .md\:col-span-10 { grid-column: span 10; }
  .md\:col-span-11 { grid-column: span 11; }
  .md\:col-span-12 { grid-column: span 12; }
  .md\:col-span-full { grid-column: 1 / -1; }
}

@media (min-width: var(--breakpoint-lg)) {
  .lg\:col-span-1 { grid-column: span 1; }
  .lg\:col-span-2 { grid-column: span 2; }
  .lg\:col-span-3 { grid-column: span 3; }
  .lg\:col-span-4 { grid-column: span 4; }
  .lg\:col-span-5 { grid-column: span 5; }
  .lg\:col-span-6 { grid-column: span 6; }
  .lg\:col-span-7 { grid-column: span 7; }
  .lg\:col-span-8 { grid-column: span 8; }
  .lg\:col-span-9 { grid-column: span 9; }
  .lg\:col-span-10 { grid-column: span 10; }
  .lg\:col-span-11 { grid-column: span 11; }
  .lg\:col-span-12 { grid-column: span 12; }
  .lg\:col-span-full { grid-column: 1 / -1; }
}

@media (min-width: var(--breakpoint-xl)) {
  .xl\:col-span-1 { grid-column: span 1; }
  .xl\:col-span-2 { grid-column: span 2; }
  .xl\:col-span-3 { grid-column: span 3; }
  .xl\:col-span-4 { grid-column: span 4; }
  .xl\:col-span-5 { grid-column: span 5; }
  .xl\:col-span-6 { grid-column: span 6; }
  .xl\:col-span-7 { grid-column: span 7; }
  .xl\:col-span-8 { grid-column: span 8; }
  .xl\:col-span-9 { grid-column: span 9; }
  .xl\:col-span-10 { grid-column: span 10; }
  .xl\:col-span-11 { grid-column: span 11; }
  .xl\:col-span-12 { grid-column: span 12; }
  .xl\:col-span-full { grid-column: 1 / -1; }
}

/* ===== 弹性盒子工具类 ===== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }

/* 方向 */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* 换行 */
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

/* 对齐方式 */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }

/* 弹性项目 */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

.flex-grow-0 { flex-grow: 0; }
.flex-grow { flex-grow: 1; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink { flex-shrink: 1; }

/* 顺序 */
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }

/* ===== 间距响应式工具类 ===== */
/* 边距 - 响应式 */
@media (min-width: var(--breakpoint-sm)) {
  .sm\:m-0 { margin: var(--spacing-0); }
  .sm\:m-1 { margin: var(--spacing-1); }
  .sm\:m-2 { margin: var(--spacing-2); }
  .sm\:m-3 { margin: var(--spacing-3); }
  .sm\:m-4 { margin: var(--spacing-4); }
  .sm\:m-5 { margin: var(--spacing-5); }
  .sm\:m-6 { margin: var(--spacing-6); }
  .sm\:m-8 { margin: var(--spacing-8); }
  .sm\:m-10 { margin: var(--spacing-10); }
  .sm\:m-12 { margin: var(--spacing-12); }
  .sm\:m-16 { margin: var(--spacing-16); }
  .sm\:m-20 { margin: var(--spacing-20); }
  .sm\:m-24 { margin: var(--spacing-24); }
  .sm\:m-32 { margin: var(--spacing-32); }
  .sm\:m-auto { margin: auto; }
}

@media (min-width: var(--breakpoint-md)) {
  .md\:m-0 { margin: var(--spacing-0); }
  .md\:m-1 { margin: var(--spacing-1); }
  .md\:m-2 { margin: var(--spacing-2); }
  .md\:m-3 { margin: var(--spacing-3); }
  .md\:m-4 { margin: var(--spacing-4); }
  .md\:m-5 { margin: var(--spacing-5); }
  .md\:m-6 { margin: var(--spacing-6); }
  .md\:m-8 { margin: var(--spacing-8); }
  .md\:m-10 { margin: var(--spacing-10); }
  .md\:m-12 { margin: var(--spacing-12); }
  .md\:m-16 { margin: var(--spacing-16); }
  .md\:m-20 { margin: var(--spacing-20); }
  .md\:m-24 { margin: var(--spacing-24); }
  .md\:m-32 { margin: var(--spacing-32); }
  .md\:m-auto { margin: auto; }
}

@media (min-width: var(--breakpoint-lg)) {
  .lg\:m-0 { margin: var(--spacing-0); }
  .lg\:m-1 { margin: var(--spacing-1); }
  .lg\:m-2 { margin: var(--spacing-2); }
  .lg\:m-3 { margin: var(--spacing-3); }
  .lg\:m-4 { margin: var(--spacing-4); }
  .lg\:m-5 { margin: var(--spacing-5); }
  .lg\:m-6 { margin: var(--spacing-6); }
  .lg\:m-8 { margin: var(--spacing-8); }
  .lg\:m-10 { margin: var(--spacing-10); }
  .lg\:m-12 { margin: var(--spacing-12); }
  .lg\:m
/* ======== 实用工具类 (Utility Classes) v1.0 ======== */

/* Flexbox */
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-around { display: flex; align-items: center; justify-content: space-around; }
.inline-flex { display: inline-flex; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Gap */
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-25 { gap: 25px; }
.gap-30 { gap: 30px; }
.gap-40 { gap: 40px; }

/* Spacing */
.mt-2 { margin-top: 2px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.py-5 { padding-top: 5px; padding-bottom: 5px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.3rem; }
.text-2xl { font-size: 1.5rem; }
.text-muted { color: var(--text-secondary, #6b7280); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success, #10b981); }
.text-warning { color: var(--warning, #f59e0b); }
.text-danger { color: var(--danger, #ef4444); }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Card */
.card { background: var(--bg-card, #fff); border-radius: var(--radius-md, 12px); padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

/* Badge */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
.badge-success { background: #d1fae5; color: #059669; }
.badge-warning { background: #fef3c7; color: #d97706; }
.badge-danger { background: #fee2e2; color: #dc2626; }
.badge-info { background: #dbeafe; color: #2563eb; }
.badge-secondary { background: #f3f4f6; color: #6b7280; }

/* Avatar */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; color: #fff; }
.avatar-sm { width: 36px; height: 36px; font-size: 0.85rem; }

/* Progress */
.progress-bar { height: 8px; background: #f3f4f6; border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 10px; transition: width 0.5s ease; }
.progress-safe { background: linear-gradient(135deg, #10b981, #059669); }
.progress-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.progress-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* List group */
.list-group { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border, #e5e7eb); transition: all 0.2s; }
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--bg, #f8f9fa); padding-left: 8px; padding-right: 8px; margin: 0 -8px; border-radius: var(--radius-sm, 8px); }

/* Button sizes */
.btn-xs { padding: 4px 10px; font-size: 0.8rem; min-height: 0; min-width: 0; }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }

/* Container variant */
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* Responsive grids */
@media (max-width: 992px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }
}