/* ═══════════════════════════════════════════════════
   style.css — Clean & Professional Theme
   设计理念：少即是多、克制、专业、清爽
   参考：brettp.dev / brittanychiang.com
   全站统一配色，数据逻辑完全不变
   ═══════════════════════════════════════════════════ */

/* ─── 色彩系统 ───────────────────────────────────
   最稳的组合：中性色 + 一个主色（蓝）
   主色只用于：链接、按钮、图标、高亮文字
   不要大面积使用彩色背景
   ─────────────────────────────────────────────── */
:root {
  /* 背景色 */
  --bg-page: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-nav: #FFFFFFEE;
  --bg-footer: #E8F5E9;
  --footer-text: #2E7D32;
  --footer-link: #1565C0;
  --footer-link-hover: #0D47A1;
  --bg-code: #F5F5F5;
  
  /* 文字色 — 别用纯黑 */
  --text-heading: #1A1A1A;
  --text-body: #333333;
  --text-muted: #666666;
  --text-inverse: #FFFFFF;
  
  /* 边框 / 分割线 */
  --border: #E5E5E5;
  --border-light: #F0F0F0;
  
  /* 主色 — 蓝 */
  --primary: #3B82F6;
  --primary-hover: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #EFF6FF;
  
  /* 功能色 */
  --success: #22C55E;
  --danger: #EF4444;
  --warning: #F59E0B;
  --info: #06B6D4;
  
  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.1);
  
  /* 圆角 */
  --radius: 8px;
  --radius-lg: 12px;
  
  /* 间距 */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 64px;
}

/* ═══ L4: Font loading optimization ═══ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiI2B.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── 字体系统 ─────────────────────────────────── */
body {
  font-family: "Inter", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-body);
  line-height: 1.7;
  font-size: 16px;
  padding-top: 64px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── 排版 ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text-heading);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }

p {
  margin-bottom: var(--space-md);
  color: var(--text-body);
}

.lead {
  font-size: 1.125rem;
  color: var(--text-muted);
  font-weight: 400;
}

.text-muted { color: var(--text-muted) !important; }
small { color: var(--text-muted); font-size: 0.875rem; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* ─── 导航栏 ─────────────────────────────────────
   原则：存在感越低越好，要用的时候能找到就行
   固定在顶部，半透明背景
   ─────────────────────────────────────────────── */
.navbar-modern {
  background: var(--bg-nav) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0.5rem 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1030 !important;
}

.navbar-modern .navbar-brand {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  padding: 0.5rem 0 !important;
}

.navbar-modern .navbar-brand i {
  color: var(--primary) !important;
  text-shadow: none !important;
}

.navbar-modern .nav-link {
  color: var(--text-body) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding: 0.5rem 1rem !important;
  margin: 0 !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 0.2s ease !important;
  border-radius: var(--radius) !important;
}

.navbar-modern .nav-link:hover,
.navbar-modern .nav-link.active {
  color: var(--primary) !important;
  background: var(--primary-light) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.navbar-modern .navbar-toggler {
  border-color: var(--border) !important;
  padding: 0.35rem 0.6rem !important;
}

.navbar-modern .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23333333' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dropdown */
.navbar .dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0.4rem !important;
  margin-top: 0.4rem !important;
}

.navbar .dropdown-item {
  border-radius: var(--radius) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.85rem !important;
  color: var(--text-body) !important;
  transition: all 0.15s ease !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: var(--primary) !important;
  background: var(--primary-light) !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════ */
.hero-section {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 48px 0 32px !important;
  margin-bottom: var(--space-xl) !important;
  text-align: center;
}

.hero-section h1 {
  font-size: 2rem !important;
  color: var(--text-heading) !important;
  margin-bottom: var(--space-sm) !important;
}

.hero-section p.lead {
  color: var(--text-muted) !important;
  font-size: 1.125rem !important;
  margin-bottom: var(--space-md) !important;
}

/* ═══════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════ */
.card-modern, .card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
}

.card-modern:hover, .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--primary-light) !important;
}

.card-modern::before, .card-modern::after,
.card::before, .card::after {
  display: none !important;
}

.card-modern .card-header, .card-header {
  background: var(--bg-page) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1rem 1.25rem !important;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 600 !important;
  color: var(--text-heading) !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card-modern .card-body, .card-body {
  padding: 1.25rem !important;
  color: var(--text-body) !important;
}

.card-modern .card-footer, .card-footer {
  background: var(--bg-page) !important;
  border-top: 1px solid var(--border) !important;
  padding: 0.85rem 1.25rem !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */
.btn-modern,
.btn {
  border-radius: var(--radius) !important;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0.5rem 1.25rem !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  text-decoration: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
  text-decoration: none !important;
}

.btn:active {
  transform: translateY(0) !important;
}

/* Primary */
.btn-primary, .btn-primary-modern {
  background: var(--primary) !important;
  color: var(--text-inverse) !important;
  border: none !important;
}
.btn-primary:hover, .btn-primary-modern:hover {
  background: var(--primary-hover) !important;
  color: var(--text-inverse) !important;
}

/* Success */
.btn-success, .btn-success-modern {
  background: var(--success) !important;
  color: var(--text-inverse) !important;
  border: none !important;
}
.btn-success:hover, .btn-success-modern:hover {
  background: #16A34A !important;
  color: var(--text-inverse) !important;
}

/* Danger */
.btn-danger, .btn-danger-modern {
  background: var(--danger) !important;
  color: var(--text-inverse) !important;
  border: none !important;
}
.btn-danger:hover, .btn-danger-modern:hover {
  background: #DC2626 !important;
  color: var(--text-inverse) !important;
}

/* Warning */
.btn-warning, .btn-warning-modern {
  background: var(--warning) !important;
  color: var(--text-inverse) !important;
  border: none !important;
}
.btn-warning:hover, .btn-warning-modern:hover {
  background: #D97706 !important;
  color: var(--text-inverse) !important;
}

/* Info */
.btn-info, .btn-info-modern {
  background: var(--info) !important;
  color: var(--text-inverse) !important;
  border: none !important;
}
.btn-info:hover, .btn-info-modern:hover {
  background: #0891B2 !important;
  color: var(--text-inverse) !important;
}

/* Outline variants */
.btn-outline-primary {
  color: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: var(--text-inverse) !important;
}

.btn-outline-secondary {
  color: var(--text-body) !important;
  border: 1.5px solid var(--border) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background: var(--bg-page) !important;
  color: var(--text-heading) !important;
  border-color: var(--text-muted) !important;
}

.btn-outline-light {
  color: var(--text-body) !important;
  border: 1.5px solid var(--border) !important;
  background: var(--bg-card) !important;
}
.btn-outline-light:hover {
  background: var(--bg-page) !important;
  color: var(--text-heading) !important;
  border-color: var(--text-muted) !important;
}

.btn-light {
  color: var(--text-body) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}
.btn-light:hover {
  background: var(--bg-page) !important;
  color: var(--text-heading) !important;
}

/* ═══════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════ */
.table {
  color: var(--text-body) !important;
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table th {
  background: var(--bg-page) !important;
  color: var(--text-heading) !important;
  border-color: var(--border) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--border) !important;
}

.table td {
  border-color: var(--border-light) !important;
  color: var(--text-body) !important;
  vertical-align: middle !important;
  padding: 0.75rem !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(250, 250, 250, 0.5) !important;
}

.table-hover tbody tr:hover {
  background: var(--primary-light) !important;
}

/* ═══════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════ */
.form-control, .form-control-modern,
input[type="text"], input[type="password"],
input[type="email"], input[type="number"],
input[type="search"], input[type="url"],
textarea, select {
  background: var(--bg-card) !important;
  color: var(--text-body) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 0.6rem 0.9rem !important;
  font-size: 0.9rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  font-family: inherit !important;
}

.form-control:focus, .form-control-modern:focus,
input:focus, textarea:focus, select:focus {
  background: var(--bg-card) !important;
  color: var(--text-body) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
  outline: none !important;
}

.form-control::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
}

.form-label {
  color: var(--text-heading) !important;
  font-weight: 500 !important;
  margin-bottom: 0.4rem !important;
}

.fw-semibold, .fw-bold {
  color: var(--text-heading) !important;
}

/* ═══════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════ */
.badge {
  border-radius: 20px !important;
  font-weight: 500 !important;
  padding: 0.25em 0.65em !important;
  font-size: 0.75rem !important;
}
.badge.bg-primary { background: var(--primary) !important; color: #fff !important; }
.badge.bg-success { background: var(--success) !important; color: #fff !important; }
.badge.bg-danger { background: var(--danger) !important; color: #fff !important; }
.badge.bg-warning { background: var(--warning) !important; color: #fff !important; }
.badge.bg-info { background: var(--info) !important; color: #fff !important; }
.badge.bg-secondary { background: #94A3B8 !important; color: #fff !important; }
.badge.bg-dark { background: #334155 !important; color: #fff !important; }
.badge.bg-light { background: #F1F5F9 !important; color: var(--text-body) !important; }

/* ═══════════════════════════════════════════════════
   IMAGES
   ═══════════════════════════════════════════════════ */
.img-card-modern {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
  background: var(--bg-card);
  display: block;
}

.img-card-modern:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
}

.img-card-modern img {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.img-card-modern .img-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent) !important;
}

.img-card-modern .img-overlay * {
  color: #fff !important;
  font-family: inherit !important;
}

/* ═══════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════ */
.pagination-modern .page-item .page-link {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 0.85rem !important;
  color: var(--text-body) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  background: var(--bg-card) !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
}

.pagination-modern .page-item .page-link:hover {
  color: var(--primary) !important;
  border-color: var(--primary-light) !important;
  background: var(--primary-light) !important;
  text-decoration: none !important;
}

.pagination-modern .page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════
   LIST GROUP
   ═══════════════════════════════════════════════════ */
.list-group-modern {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

.list-group-modern .list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 0.85rem 1.25rem !important;
  transition: background 0.15s ease !important;
  background: var(--bg-card) !important;
  color: var(--text-body) !important;
}

.list-group-modern .list-group-item:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

.list-group-modern .list-group-item:last-child {
  border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════ */
.alert {
  border-radius: var(--radius-lg) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-sm) !important;
}

.alert-info {
  background: #EFF6FF !important;
  color: #1E40AF !important;
  border-color: #BFDBFE !important;
}

.alert-success {
  background: #F0FDF4 !important;
  color: #166534 !important;
  border-color: #BBF7D0 !important;
}

.alert-warning {
  background: #FFFBEB !important;
  color: #92400E !important;
  border-color: #FDE68A !important;
}

.alert-danger {
  background: #FEF2F2 !important;
  color: #991B1B !important;
  border-color: #FECACA !important;
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.gradient-bg-dark {
  background: var(--bg-footer) !important;
  border-top: none !important;
  color: var(--footer-text) !important;
}

.gradient-bg-dark * {
  color: var(--footer-text) !important;
}

.gradient-bg-dark a {
  color: var(--footer-link) !important;
}

.gradient-bg-dark a:hover {
  color: var(--footer-link-hover) !important;
}

/* ═══════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════ */
.breadcrumb-modern {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0.75rem 1.25rem !important;
  box-shadow: var(--shadow-sm) !important;
}

.breadcrumb-modern .breadcrumb-item a {
  color: var(--primary) !important;
}

.breadcrumb-modern .breadcrumb-item.active {
  color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════════
   GRADIENT BG (general)
   ═══════════════════════════════════════════════════ */
.gradient-bg {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ═══════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════ */
.page-title {
  margin-bottom: var(--space-xl) !important;
}

.page-title h1 {
  font-size: 1.75rem !important;
  color: var(--text-heading) !important;
}

.page-title h1 i {
  color: var(--primary) !important;
}

.section-title {
  font-size: 1.25rem !important;
  color: var(--text-heading) !important;
  margin-bottom: var(--space-md) !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid var(--primary-light) !important;
  display: inline-block !important;
}

.section-title i {
  color: var(--primary) !important;
}

.stats-number {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
}

.stats-label {
  color: var(--text-muted) !important;
  font-size: 0.875rem !important;
}

/* Welcome / Hero banner */
.welcome-section {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
  border-radius: var(--radius-lg) !important;
  color: #fff !important;
  box-shadow: var(--shadow-md) !important;
}

.welcome-section h1,
.welcome-section p,
.welcome-section * {
  color: #fff !important;
}

.welcome-section .bg-white {
  background: rgba(255,255,255,0.95) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

.welcome-section .bg-white * {
  color: var(--text-body) !important;
}

/* Code blocks */
pre, code {
  background: var(--bg-code) !important;
  color: var(--text-heading) !important;
  border-radius: var(--radius) !important;
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important;
  font-size: 0.875rem !important;
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--primary) !important;
  background: var(--primary-light) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  color: var(--text-body) !important;
  font-style: italic !important;
}

/* Horizontal rule */
hr {
  border-color: var(--border) !important;
}

/* Modal */
.modal-content {
  background: var(--bg-card) !important;
  color: var(--text-body) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
}

/* Feature icon */
.feature-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  font-size: 1.5rem;
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.05);
}

/* Dashboard card icon */
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  transition: transform 0.2s ease;
}

.card-icon:hover {
  transform: scale(1.05);
}

/* 后台管理卡片图标渐变色 — 统一使用柔和色系 */
.card-icon.icon-article { background: linear-gradient(135deg, var(--primary), #6366F1); }
.card-icon.icon-game { background: linear-gradient(135deg, var(--success), #16A34A); }
.card-icon.icon-images { background: linear-gradient(135deg, #A18CD1, #FBC2EB); }
.card-icon.icon-movie { background: linear-gradient(135deg, var(--danger), #F97316); }
.card-icon.icon-comment { background: linear-gradient(135deg, var(--info), #0891B2); }
.card-icon.icon-music { background: linear-gradient(135deg, #F43B47, #453A94); }
.card-icon.icon-ai { background: linear-gradient(135deg, #667EEA, #764BA2); }
.card-icon.icon-novel { background: linear-gradient(135deg, #F093FB, #F5576C); }
.card-icon.icon-work { background: linear-gradient(135deg, var(--warning), #D97706); }
.card-icon.icon-shop { background: linear-gradient(135deg, #4FACFE, #00F2FE); }

/* ─── 主题切换按钮 ────────────────────────── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-body);
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.theme-toggle .light-icon { display: inline-flex; }
.theme-toggle .dark-icon { display: none; }
[data-theme="dark"] .theme-toggle .light-icon { display: none; }
[data-theme="dark"] .theme-toggle .dark-icon { display: inline-flex; }

/* ─── 深色主题 ───────────────────────────────
   data-theme="dark" 时覆盖 CSS 变量
   ──────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --bg-nav: #1e293bE0;
  --bg-code: #1e293b;
  --bg-footer: #1B3D1B;
  --footer-text: #CBD5E1;
  --footer-link: #93C5FD;
  --footer-link-hover: #FFFFFF;

  --text-heading: #f1f5f9;
  --text-body: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;

  --border: #334155;
  --border-light: #1e293b;

  --primary-light: #1e3a5f;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.6);
}

/* 深色主题下导航栏和卡片样式微调 */
[data-theme="dark"] .navbar-modern {
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .card-modern,
[data-theme="dark"] .card {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .btn-outline-primary-modern {
  border-color: var(--border);
  color: var(--text-body);
}
[data-theme="dark"] .btn-outline-primary-modern:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
[data-theme="dark"] .list-group-item {
  background: transparent;
  border-color: var(--border);
}
[data-theme="dark"] .table {
  color: var(--text-body);
}
[data-theme="dark"] .table thead th {
  border-color: var(--border);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
  border-color: var(--border);
}
[data-theme="dark"] .page-link {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-body);
}
[data-theme="dark"] .page-link:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
[data-theme="dark"] .page-item.disabled .page-link {
  background: var(--bg-code);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="dark"] .dropdown-menu {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .dropdown-item {
  color: var(--text-body);
}
[data-theme="dark"] .dropdown-item:hover {
  background: var(--primary-light);
  color: var(--primary);
}

/* 深色主题下表格条纹行 */
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(30, 41, 59, 0.6) !important;
}

/* 深色主题下 Badge 颜色 */
[data-theme="dark"] .badge.bg-secondary {
  background: #475569 !important;
  color: #fff !important;
}
[data-theme="dark"] .badge.bg-dark {
  background: #1e293b !important;
  color: #fff !important;
}
[data-theme="dark"] .badge.bg-light {
  background: #334155 !important;
  color: #cbd5e1 !important;
}

/* 深色主题下 Alert-Info */
[data-theme="dark"] .alert-info {
  background: #1e3a5f !important;
  color: #93c5fd !important;
  border-color: #2d5a8e !important;
}

/* ═══ L1: Accessibility — prefers-reduced-motion ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ L2: Print styles ═══ */
@media print {
  .navbar-modern, .footer-modern, .announcement-ticker, .theme-toggle,
  .bottom-player, .back-link, .sidebar, .sms-sidebar { display: none !important; }
  body { padding-top: 0 !important; background: #fff; color: #000; }
  .container { max-width: 100%; width: 100%; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ═══ M5: Page transition animation ═══ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-content { animation: fadeInUp 0.4s ease both; }

/* ═══ L7: Page title styles — use .page-title class for consistent heading style ═══ */