/* =========================================================
   元能台 · 后台管理页面统一UI覆盖样式
   设计规范：亮色鲜明有朝气，参考腾讯/微信后台管理设计风格
   主色调：#4A90D9（蓝）→ #1677FF（紫）渐变
   背景: #FFFFFF  卡片: #F8FAFC  文字: #1E293B
   适用页面：admin / profile / settings / recharge / shop / checkin / publish-v2
   ========================================================= */

/* ========== 1. 全局基础 ========== */
body {
  background: #FFFFFF !important;
  color: #1E293B !important;
  font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif !important;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4A90D9, #1677FF);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3B82F6, #1D4ED8);
}

/* ========== 2. 顶部导航栏 ========== */
.nav {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  height: 60px !important;
  padding: 0 24px !important;
}

.nav h1,
.nav .brand-zh,
.nav .nav-brand-link,
.nav .nav-logo,
.nav .nav-brand {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  font-size: 20px !important;
}

.nav-links a,
.nav-links .nav-item {
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.nav-links a:hover,
.nav-links .nav-item:hover {
  color: #1677FF !important;
  background: #F0F7FF !important;
}

.nav-links a.active,
.nav-links .nav-item.active {
  color: #1677FF !important;
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.1), rgba(22, 119, 255, 0.1)) !important;
  font-weight: 600 !important;
}

/* ========== 3. 容器与通用卡片 ========== */
.container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 20px !important;
}

.card,
.form-card,
.preview-card,
.skill-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}

.card:hover,
.skill-card:hover {
  box-shadow: 0 4px 16px rgba(74, 144, 217, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* section通用标题 */
.section h2,
.section-title,
.section-header h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ========== 4. 数据统计卡片 ========== */
.stats-grid,
.checkin-stats,
.shop-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}

.stat-card,
.stat-item,
.stats-row .stat,
.balance-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.stat-card::before,
.stat-item::before,
.balance-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #4A90D9, #1677FF) !important;
}

.stat-card:hover,
.stat-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(74, 144, 217, 0.15) !important;
}

.stat-card .label,
.stat-label,
.stat .stat-label,
.balance-label {
  font-size: 13px !important;
  color: #64748B !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}

.stat-card .num,
.stat-num,
.stat .stat-num,
.balance-num {
  font-size: 28px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 保留各色含义但改用渐变/同色系 */
.stat-card .num.gold { background: linear-gradient(135deg, #F59E0B, #EF4444) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.stat-card .num.green { background: linear-gradient(135deg, #10B981, #059669) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.stat-card .num.blue { background: linear-gradient(135deg, #4A90D9, #1677FF) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.stat-card .num.red { background: linear-gradient(135deg, #F87171, #DC2626) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.stat-card .num.blue-accent { background: linear-gradient(135deg, #69B1FF, #1677FF) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }

.stat-value,
.amount {
  font-weight: 700 !important;
  color: #1677FF !important;
}

/* ========== 5. Tabs / 标签页 ========== */
.tabs {
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 24px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 4px !important;
  overflow: hidden !important;
}

.tab,
.tab-btn,
.filter-btn,
.step-item {
  padding: 10px 20px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #64748B !important;
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  font-weight: 500 !important;
  position: relative !important;
}

.tab:hover,
.tab-btn:hover,
.filter-btn:hover {
  color: #4A90D9 !important;
  background: #E6F4FF !important;
}

.tab.active,
.tab-btn.active,
.filter-btn.active {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3) !important;
}

/* panel显隐保留JS逻辑 */
.panel,
.tab-content {
  display: none;
}
.panel.active,
.tab-content.active {
  display: block;
}

/* ========== 6. 数据表格 ========== */
table {
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  background: linear-gradient(90deg, rgba(74, 144, 217, 0.08), rgba(22, 119, 255, 0.08)) !important;
  padding: 14px 16px !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #334155 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

tr:nth-child(even) td {
  background: #F8FAFC !important;
}

tr:hover td {
  background: linear-gradient(90deg, rgba(74, 144, 217, 0.05), rgba(22, 119, 255, 0.05)) !important;
}

tr:last-child td {
  border-bottom: none !important;
}

/* ========== 7. 按钮系统 ========== */
.btn,
.btn-primary,
.btn-success,
.btn-danger,
.btn-warn,
.btn-save,
.btn-outline,
.btn-sm,
.btn-back,
.btn-next,
.btn-submit,
.btn-recharge,
.btn-confirm-pay,
.btn-checkin,
.btn-contact,
.btn-publish,
.amt-btn,
.pay-btn,
.pricing-card,
.step-num {
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.btn-primary,
.btn-success,
.btn-save,
.btn-submit,
.btn-recharge,
.btn-confirm-pay,
.btn-checkin,
.btn-next {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.25) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-save:hover,
.btn-submit:hover,
.btn-recharge:hover,
.btn-confirm-pay:hover,
.btn-checkin:hover,
.btn-next:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.35) !important;
  opacity: 1 !important;
}

.btn-danger {
  background: linear-gradient(135deg, #F87171, #DC2626) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.btn-danger:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
  opacity: 1 !important;
}

.btn-warn {
  background: linear-gradient(135deg, #FBBF24, #F59E0B) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.btn-outline {
  background: #FFFFFF !important;
  color: #1677FF !important;
  border: 1px solid #69B1FF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.btn-outline:hover {
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.08), rgba(22, 119, 255, 0.08)) !important;
  border-color: #1677FF !important;
}

/* 次按钮描边 */
.btn-back,
.btn-contact {
  background: #FFFFFF !important;
  color: #475569 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

.btn-back:hover,
.btn-contact:hover {
  color: #1677FF !important;
  border-color: #69B1FF !important;
  background: #FAF5FF !important;
}

/* 按钮大小 */
.btn-sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* ========== 8. 表单控件 ========== */
.form-group,
.withdraw-form select,
.withdraw-form input,
.txid-input input,
.tag-input-wrap input,
.custom-price input {
  margin-bottom: 16px !important;
}

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=tel],
textarea,
select,
.form-group input,
.form-group textarea,
.form-group select,
.withdraw-form input,
.withdraw-form select,
.txid-input,
.tag-input-wrap input,
.custom-price input {
  background: #F8FAFC !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  color: #1E293B !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  width: auto !important;
}

input:focus,
textarea:focus,
select:focus,
.form-group input:focus,
.form-group textarea:focus,
.withdraw-form input:focus,
.withdraw-form select:focus,
.tag-input-wrap input:focus,
.custom-price input:focus {
  border-color: #1677FF !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15) !important;
  background: #FFFFFF !important;
}

label,
.form-group label,
.label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.required::after {
  content: '*' !important;
  color: #EF4444 !important;
  margin-left: 4px !important;
}

.form-hint,
.hint {
  font-size: 12px !important;
  color: #94A3B8 !important;
  margin-top: 4px !important;
}

/* ========== 9. 状态徽章/标签 ========== */
.status,
.badge,
.cat-badge,
.badge-master,
.badge-member,
.badge-verified,
.badge-unverified,
.master-badge,
.soul-level-badge,
.tag,
.price-tag {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.status.completed,
.status.approved,
.badge-verified,
.ok {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
}

.status.pending,
.status.pending_confirm,
.pending,
.warning {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #D97706 !important;
}

.status.rejected,
.rejected,
.fail,
.error {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #DC2626 !important;
}

.badge-master,
.master-badge {
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.15), rgba(22, 119, 255, 0.15)) !important;
  color: #1677FF !important;
  border: 1px solid rgba(22, 119, 255, 0.2) !important;
}

.badge-member {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #2563EB !important;
}

.tag {
  background: #F1F5F9 !important;
  color: #475569 !important;
}

.cat-badge {
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.12), rgba(22, 119, 255, 0.12)) !important;
  color: #1677FF !important;
}

.badge-unverified {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #64748B !important;
}

/* ========== 10. 进度条 ========== */
.frag-bar,
.layer-bar,
.stepper-bar,
.stats-bar {
  background: #E2E8F0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  height: 8px !important;
}

.frag-fill,
.layer-bar-fill,
.stepper-bar-fill {
  background: linear-gradient(90deg, #4A90D9, #1677FF) !important;
  border-radius: 20px !important;
  height: 100% !important;
  transition: width 0.5s ease !important;
}

/* ========== 11. 模态框 / 弹窗 ========== */
.tool-modal-overlay,
.modal-overlay {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.tool-modal,
.modal {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid #E2E8F0 !important;
}

/* ========== 12. 空状态 ========== */
.empty,
.empty-state,
.fav-empty {
  text-align: center !important;
  padding: 48px 20px !important;
  color: #94A3B8 !important;
  background: #F8FAFC !important;
  border-radius: 12px !important;
  border: 1px dashed #CBD5E1 !important;
}

.empty-icon {
  font-size: 48px !important;
  margin-bottom: 12px !important;
  opacity: 0.6 !important;
}

/* ========== 13. Toast 提示 ========== */
.toast {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  font-size: 13px !important;
  color: #1E293B !important;
}

.toast.success {
  border-left: 4px solid #10B981 !important;
}

.toast.error {
  border-left: 4px solid #EF4444 !important;
}

/* ========== 14. profile 页面专项 ========== */
.profile-header {
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.08), rgba(22, 119, 255, 0.08)) !important;
  border: 1px solid rgba(22, 119, 255, 0.15) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
}

.avatar-wrap img,
.seller-avatar-wrap img,
.shop-avatar img,
.avatar-circle {
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.2) !important;
}

.nickname {
  color: #1E293B !important;
  font-weight: 700 !important;
  font-size: 22px !important;
}

.bio {
  color: #64748B !important;
  font-size: 14px !important;
}

.subnav {
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 20px !important;
  border-bottom: 2px solid #E2E8F0 !important;
}

.subnav a {
  padding: 10px 20px !important;
  font-size: 14px !important;
  color: #64748B !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  position: relative !important;
  transition: all 0.2s !important;
  margin-bottom: -2px !important;
}

.subnav a:hover {
  color: #1677FF !important;
}

.subnav a.active {
  color: #1677FF !important;
  font-weight: 600 !important;
}

.subnav a.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 10% !important;
  right: 10% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #4A90D9, #1677FF) !important;
  border-radius: 2px !important;
}

/* 技能卡片 */
.skills-grid,
.skill-grid,
.fav-grid,
.sb-profile-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

.skill-cover {
  border-radius: 10px 10px 0 0 !important;
}

.skill-body {
  padding: 14px !important;
}

.skill-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  margin-bottom: 6px !important;
}

.skill-price {
  color: #1677FF !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.skill-rating,
.rating {
  color: #F59E0B !important;
  font-size: 13px !important;
}

.sb-profile-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}

.sb-profile-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(74, 144, 217, 0.12) !important;
  border-color: #69B1FF !important;
}

.sb-profile-card-icon {
  font-size: 32px !important;
  margin-bottom: 8px !important;
}

.sb-profile-card-title {
  font-weight: 600 !important;
  color: #1E293B !important;
  margin-bottom: 4px !important;
}

.sb-profile-card-desc {
  font-size: 12px !important;
  color: #94A3B8 !important;
}

/* ========== 15. settings 页面专项 ========== */
.profile-banner {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  color: #FFFFFF !important;
  margin-bottom: 24px !important;
}

.banner-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.banner-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

.profile-form {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.form-status.complete {
  color: #059669 !important;
}

.form-status.incomplete {
  color: #F59E0B !important;
}

/* toggle开关 */
.toggle-switch {
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
  background: #CBD5E1 !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}

.toggle-switch.active,
.toggle-switch.on {
  background: linear-gradient(90deg, #4A90D9, #1677FF) !important;
}

.toggle-slider {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
  transition: all 0.3s !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.toggle-switch.active .toggle-slider,
.toggle-switch.on .toggle-slider {
  left: 22px !important;
}

/* 灵魂碎片/层级 */
.soul-header {
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.1), rgba(22, 119, 255, 0.1)) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

.layer-item {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
  transition: all 0.2s !important;
}

.layer-item:hover {
  border-color: #69B1FF !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1) !important;
}

.layer-name {
  font-weight: 600 !important;
  color: #1E293B !important;
}

.layer-pct {
  color: #1677FF !important;
  font-weight: 700 !important;
}

/* 日志列表 */
.log-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.log-time {
  font-size: 12px !important;
  color: #94A3B8 !important;
}

.log-source {
  font-size: 12px !important;
  color: #1677FF !important;
  font-weight: 500 !important;
}

.log-detail {
  color: #334155 !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* ========== 16. recharge 页面专项 ========== */
.amounts {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.amt-btn {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  text-align: center !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  font-size: 18px !important;
}

.amt-btn:hover {
  border-color: #69B1FF !important;
  background: #FAF5FF !important;
  color: #1677FF !important;
}

.amt-btn.active {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  color: #FFFFFF !important;
  border-color: #1677FF !important;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3) !important;
}

.amt-btn .bonus {
  display: block !important;
  font-size: 11px !important;
  color: #F59E0B !important;
  margin-top: 4px !important;
}

.amt-btn.active .bonus {
  color: #FDE68A !important;
}

.pay-methods {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

.pay-btn {
  flex: 1 !important;
  min-width: 120px !important;
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 14px !important;
  text-align: center !important;
  font-weight: 500 !important;
  color: #475569 !important;
  font-size: 14px !important;
}

.pay-btn:hover {
  border-color: #69B1FF !important;
  color: #1677FF !important;
}

.pay-btn.active {
  border-color: #1677FF !important;
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.08), rgba(22, 119, 255, 0.08)) !important;
  color: #1677FF !important;
  font-weight: 600 !important;
}

.pay-panel,
.pay-info,
.history-item,
.result {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

.history-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  padding: 14px 18px !important;
  transition: all 0.2s !important;
}

.history-item:hover {
  border-color: #69B1FF !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1) !important;
}

.result.ok .icon {
  color: #10B981 !important;
}

.result.fail .icon {
  color: #EF4444 !important;
}

/* ========== 17. shop 页面专项 ========== */
.shop-banner {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  border-radius: 0 0 16px 16px !important;
  padding: 40px 24px 32px !important;
  position: relative !important;
  overflow: hidden !important;
}

.shop-banner::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  right: -20% !important;
  width: 300px !important;
  height: 300px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%) !important;
  border-radius: 50% !important;
}

.shop-info {
  color: #FFFFFF !important;
}

.shop-desc {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
}

.shop-meta {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px !important;
}

.stats-bar {
  height: 6px !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.shop-content {
  padding: 24px 20px !important;
}

.review-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s !important;
}

.review-card:hover {
  border-color: #69B1FF !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.08) !important;
}

.reviewer {
  font-weight: 600 !important;
  color: #1E293B !important;
}

.review-date {
  font-size: 12px !important;
  color: #94A3B8 !important;
}

.review-text {
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.contact-bar,
.contact-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 14px !important;
}

/* ========== 18. checkin 签到页面专项 ========== */
.checkin-hero {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  color: #FFFFFF !important;
  text-align: center !important;
  margin-bottom: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

.points-display {
  font-size: 48px !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.checkin-btn-area {
  margin-top: 20px !important;
}

.btn-checkin {
  background: #FFFFFF !important;
  color: #1677FF !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 12px 36px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.btn-checkin:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.calendar-section {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.cal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
}

.cal-nav {
  background: #F1F5F9 !important;
  border: none !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  cursor: pointer !important;
  color: #475569 !important;
  transition: all 0.2s !important;
}

.cal-nav:hover {
  background: #E6F4FF !important;
  color: #1677FF !important;
}

.cal-weekday {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #64748B !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  margin-bottom: 8px !important;
}

.cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}

.cal-day {
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.cal-day:hover:not(.other-month) {
  background: #E6F4FF !important;
  color: #1677FF !important;
}

.cal-day.other-month {
  color: #CBD5E1 !important;
}

.cal-day.checked {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3) !important;
}

.cal-day.today {
  border: 2px solid #1677FF !important;
  font-weight: 600 !important;
}

.cal-day.today.checked {
  border-color: #FFFFFF !important;
}

/* 签到规则 */
.rules-section,
.shop-section {
  margin-bottom: 24px !important;
}

.rule-item {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.2s !important;
}

.rule-item:hover {
  border-color: #69B1FF !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1) !important;
}

.rule-icon {
  font-size: 24px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.1), rgba(22, 119, 255, 0.1)) !important;
  border-radius: 10px !important;
}

.rule-name {
  font-weight: 600 !important;
  color: #1E293B !important;
  flex: 1 !important;
}

.rule-points {
  color: #1677FF !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.rule-desc,
.rule-text {
  font-size: 12px !important;
  color: #64748B !important;
  margin-top: 2px !important;
}

/* 积分商城 */
.shop-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 12px !important;
}

.shop-item {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.shop-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(74, 144, 217, 0.12) !important;
  border-color: #69B1FF !important;
}

.item-icon {
  font-size: 36px !important;
  margin-bottom: 8px !important;
}

.item-name {
  font-weight: 600 !important;
  color: #1E293B !important;
  font-size: 14px !important;
  margin-bottom: 4px !important;
}

.item-cost {
  color: #1677FF !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* ========== 19. publish-v2 发布页面专项 ========== */
.stepper {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 32px !important;
  position: relative !important;
}

.step-item {
  flex: 1 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  border: none !important;
}

.step-num {
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #E2E8F0 !important;
  color: #94A3B8 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.step-item.active .step-num {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3) !important;
}

.step-item.done .step-num {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

.step-label {
  font-size: 12px !important;
  color: #64748B !important;
}

.step-item.active .step-label {
  color: #1677FF !important;
  font-weight: 600 !important;
}

.step-connector {
  position: absolute !important;
  top: 18px !important;
  left: calc(50% + 18px) !important;
  right: calc(-50% + 18px) !important;
  height: 2px !important;
  background: #E2E8F0 !important;
  z-index: 0 !important;
}

.step-item.done + .step-item .step-connector,
.step-connector.done {
  background: linear-gradient(90deg, #4A90D9, #1677FF) !important;
}

.upload-zone {
  border: 2px dashed #CBD5E1 !important;
  border-radius: 12px !important;
  padding: 40px !important;
  text-align: center !important;
  transition: all 0.3s !important;
  background: #F8FAFC !important;
  cursor: pointer !important;
  color: #64748B !important;
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: #1677FF !important;
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.05), rgba(22, 119, 255, 0.05)) !important;
  color: #1677FF !important;
}

.cover-preview,
.preview-cover {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.pricing-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}

.pricing-card {
  border: 2px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 18px !important;
  background: #FFFFFF !important;
  text-align: center !important;
}

.pricing-card:hover {
  border-color: #69B1FF !important;
  background: #FAF5FF !important;
}

.pricing-card.selected {
  border-color: #1677FF !important;
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.06), rgba(22, 119, 255, 0.06)) !important;
  box-shadow: 0 4px 16px rgba(22, 119, 255, 0.15) !important;
}

.price-type {
  font-weight: 700 !important;
  color: #1E293B !important;
  font-size: 16px !important;
  margin-bottom: 4px !important;
}

.price-emoji {
  font-size: 28px !important;
  margin-bottom: 8px !important;
}

.price-desc {
  font-size: 12px !important;
  color: #64748B !important;
}

/* 工具列表 */
.tool-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
}

.tool-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 14px !important;
  transition: all 0.2s !important;
}

.tool-card:hover {
  border-color: #69B1FF !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1) !important;
}

.tool-icon {
  font-size: 24px !important;
  margin-bottom: 8px !important;
}

.tool-name {
  font-weight: 600 !important;
  color: #1E293B !important;
  font-size: 14px !important;
  margin-bottom: 4px !important;
}

.tool-desc {
  font-size: 12px !important;
  color: #64748B !important;
  line-height: 1.5 !important;
}

.tool-params {
  font-size: 11px !important;
  color: #94A3B8 !important;
  margin-top: 6px !important;
}

/* 聊天测试区 */
.chat-test {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.chat-test-header {
  background: linear-gradient(90deg, #4A90D9, #1677FF) !important;
  color: #FFFFFF !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
}

.chat-test-body {
  padding: 16px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

.chat-msg {
  margin-bottom: 12px !important;
  display: flex !important;
}

.chat-msg.user {
  justify-content: flex-end !important;
}

.bubble {
  max-width: 70% !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.chat-msg.user .bubble {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  color: #FFFFFF !important;
  border-bottom-right-radius: 4px !important;
}

.chat-msg.assistant .bubble {
  background: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #E2E8F0 !important;
  border-bottom-left-radius: 4px !important;
}

.typing {
  color: #94A3B8 !important;
}

.chat-test-input {
  display: flex !important;
  gap: 8px !important;
  padding: 12px !important;
  border-top: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
}

.chat-test-hint {
  font-size: 11px !important;
  color: #94A3B8 !important;
  padding: 0 12px 8px !important;
}

/* checklist */
.checklist {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 12px !important;
}

.check-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
}

.check-item.done {
  color: #059669 !important;
  text-decoration: line-through !important;
}

.check-item.error {
  color: #DC2626 !important;
}

.check-item .icon {
  font-size: 16px !important;
}

/* ========== 20. 页脚 ========== */
.site-footer {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  padding: 32px 20px 24px !important;
  margin-top: 40px !important;
}

.footer-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.footer-col h4 {
  color: #1E293B !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}

.footer-col a,
.footer-desc {
  color: #64748B !important;
  font-size: 13px !important;
  text-decoration: none !important;
  line-height: 2 !important;
}

.footer-col a:hover {
  color: #1677FF !important;
}

.footer-brand {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  font-size: 20px !important;
}

.footer-icp,
.footer-bottom {
  color: #94A3B8 !important;
  font-size: 12px !important;
  text-align: center !important;
  border-top: 1px solid #F1F5F9 !important;
  padding-top: 16px !important;
  margin-top: 24px !important;
}

/* ========== 21. 分页 ========== */
.pagination,
.page-nav {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-top: 24px !important;
}

.pagination button,
.page-nav button,
.pagination span {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #475569 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 500 !important;
}

.pagination button:hover:not(:disabled):not(.active),
.page-nav button:hover:not(:disabled):not(.active) {
  border-color: #69B1FF !important;
  color: #1677FF !important;
  background: #FAF5FF !important;
}

.pagination .active,
.page-nav .active {
  background: linear-gradient(135deg, #4A90D9, #1677FF) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3) !important;
}

.pagination button:disabled,
.page-nav button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ========== 22. 响应式适配 ========== */
@media (max-width: 768px) {
  .nav {
    padding: 0 16px !important;
    height: 56px !important;
  }

  .container {
    padding: 16px 14px !important;
  }

  .stats-grid,
  .checkin-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .stat-card {
    padding: 14px !important;
  }

  .stat-card .num {
    font-size: 22px !important;
  }

  .tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .tab,
  .tab-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .skills-grid,
  .skill-grid,
  .fav-grid,
  .pricing-options,
  .tool-list {
    grid-template-columns: 1fr !important;
  }

  th, td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .profile-header,
  .checkin-hero,
  .shop-banner {
    padding: 24px 16px !important;
  }

  .stepper {
    overflow-x: auto !important;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .amounts {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* ===== 非首页隐藏天下技能标语 ===== */
.sb-nav-brand-slogan { display: none !important; }