:root {
  --primary: #2563eb;
  --primary-soft: #3b82f6;
  --accent: #f97316;
  --surface: #ffffff;
  --bg-light: #f8fafc;
  --text-main: #0f172a;
  --text-secondary: #475569;
  --border-light: #e2e8f0;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.08);
  --radius-xl: 1.5rem;
  --radius-lg: 1rem;
  --radius-md: 0.75rem;
}

.bi {
  font-family: 'bootstrap-icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi::before {
  font-family: 'bootstrap-icons' !important;
}

.icon-user, .icon-folder, .icon-users, .icon-shield, .icon-mail, .icon-bell, .icon-file, .icon-list {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.icon-user {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.icon-folder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
}

.icon-users {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm6-6c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.icon-shield {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
}

.icon-mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.icon-bell {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-2.48.48-4.86 1.41-6.99C10.83 4.42 11.91 4 12 4c.09 0 1.17.42 1.6 1.71 1.37 3.36 1.85 6.24 1.6 9.09-1.49 1.64-3.68 2.35-5.82 1.83-.58-.12-1.17-.19-1.74-.19h-.06c-3.12 0-5.84 1.99-6.87 4.79C2.69 20.53 3.64 21 4.68 21h14.63c1.06 0 2.02-.47 2.57-1.21 1.12-3.09-1.61-5.92-4.52-6.7z'/%3E%3C/svg%3E");
}

.icon-file {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
}

.icon-list {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z'/%3E%3C/svg%3E");
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #ffffff;
  color: #0f172a;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: 70px;
}

.navbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 0;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-link {
  font-weight: 500;
  color: #334155 !important;
  margin: 0 0.25rem;
  padding: 0.5rem 1rem !important;
  border-radius: 2rem;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background: #f1f5f9;
  color: #0f172a !important;
}

.btn-primary-modern {
  background: #0f172a;
  border: none;
  padding: 0.9rem 2.5rem;
  font-weight: 600;
  border-radius: 3rem;
  color: white;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary-modern:hover {
  background: #1e293b;
  transform: translateY(-2px);
  box-shadow: 0 15px 25px -8px rgba(15, 23, 42, 0.4);
  color: white;
}

.btn-outline-modern {
  background: transparent;
  border: 1.5px solid #cbd5e1;
  padding: 0.9rem 2.5rem;
  font-weight: 600;
  border-radius: 3rem;
  color: #1e293b;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-outline-modern:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.card-modern {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.card-modern:hover {
  border-color: #e2e8f0;
  box-shadow: var(--shadow-md);
}

.form-control, .form-select {
  border-radius: var(--radius-md);
  border: 1.5px solid #e2e8f0;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

.btn-sm-modern {
  padding: 0.4rem 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.footer-international {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 3.5rem 0 2rem;
  margin-top: 3rem;
  color: #334155;
}

.footer-heading {
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0f172a;
  margin-bottom: 1.25rem;
}

.footer-link {
  color: #475569;
  text-decoration: none;
  display: block;
  padding: 0.35rem 0;
  font-weight: 450;
  transition: color 0.2s;
}

.footer-link:hover {
  color: #0f172a;
  text-decoration: underline;
}

.copyright {
  font-size: 0.9rem;
  color: #64748b;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}

.alert-modern {
  border-radius: var(--radius-md);
  border: none;
  padding: 1rem 1.25rem;
}

.table-modern {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table-modern thead th {
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  font-weight: 600;
  color: #334155;
}

.table-modern tbody tr:hover {
  background: #fafafa;
}

.sidebar-menu {
  background: white;
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow-sm);
}

.sidebar-menu .list-group-item {
  border: none;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  color: #334155;
  border-radius: 0;
  transition: all 0.2s ease;
}

.sidebar-menu .list-group-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.sidebar-menu .list-group-item.active {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: white;
}

.sidebar-menu .list-group-item .bi {
  color: inherit;
  font-size: 1.1rem;
  width: 1.25rem;
  text-align: center;
}

.sidebar-menu .list-group-item.active .bi {
  color: white;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1.5rem;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.section-header p {
  color: #64748b;
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ==================== 加载和刷新效果 ==================== */
/* 页面加载遮罩 */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* 加载动画 */
.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* 加载波纹效果 */
.loader-pulse {
  display: inline-flex;
  gap: 4px;
}
.loader-pulse span {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}
.loader-pulse span:nth-child(2) { animation-delay: 0.2s; }
.loader-pulse span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* 骨架屏加载 */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 元素进入动画 */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 卡片进入动画 */
.card-stagger {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.card-stagger.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 按钮加载状态 */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}
.btn-loading .btn-text {
  visibility: hidden;
}
.btn-loading .btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* 加载成功动画 */
.success-check {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 32px;
  animation: popIn 0.4s ease;
}

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* 刷新图标动画 */
.refresh-spin {
  animation: spin 0.8s linear infinite;
}

/* 下拉刷新指示器 */
.pull-refresh {
  text-align: center;
  padding: 1rem;
  color: #64748b;
  font-size: 0.875rem;
}
.pull-refresh i {
  display: inline-block;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}

/* 数据刷新指示器 */
.refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.refresh-indicator i {
  animation: spin 1s linear infinite;
}

/* 内容更新闪烁 */
.content-flash {
  animation: flash 0.6s ease;
}

@keyframes flash {
  0% { background: rgba(59, 130, 246, 0.1); }
  100% { background: transparent; }
}

/* 数字变化动画 */
.count-up {
  display: inline-block;
}

/* 状态点 */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
}
.status-dot.active {
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.1); }
}