/* ==========================================================================
   Qshop — Neo-Brutalism 主题样式表
   ========================================================================== */

/* ==========================================================================
   加载动画系统 (Loading Overlay) — 保证 DOM 加载后立即显示
   ========================================================================== */
.loader-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1f2937 0%, #312e81 50%, #581c87 100%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 400ms ease-out, visibility 0ms linear 400ms;
}

.loader-overlay.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-box {
  width: min(92vw, 460px);
  background: #ffffff;
  border: 4px solid #000;
  box-shadow: 8px 8px 0 #000, 0 0 40px rgba(139, 92, 246, 0.4);
  padding: 40px 36px 32px;
  text-align: center;
  animation: loader-box-in 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes loader-box-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.loader-spinner-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
}

.loader-spinner {
  position: absolute;
  inset: 8px;
  border: 5px solid #e5e7eb;
  border-top-color: #8b5cf6;
  border-right-color: #8b5cf6;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

.loader-spinner-ring {
  position: absolute;
  inset: 0;
  border: 2px dashed #10b981;
  border-radius: 50%;
  animation: loader-spin-rev 6s linear infinite;
}

@keyframes loader-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes loader-spin-rev {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

.loader-title {
  font-size: 24px;
  font-weight: 900;
  color: #1f2937;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.loader-title img {
  width: 22px;
  height: 22px;
  vertical-align: -3px;
  margin-right: 6px;
}
.loader-subtitle {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 28px;
}

.loader-progress-wrap {
  width: 100%;
  height: 16px;
  background: #e5e7eb;
  border: 3px solid #000;
  box-shadow: 2px 2px 0 #000;
  overflow: hidden;
  margin-bottom: 10px;
}

.loader-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 50%, #8b5cf6 100%);
  background-size: 200% 100%;
  animation: loader-shimmer 1.6s linear infinite;
  transition: width 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes loader-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.loader-progress-text {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 18px;
}

.loader-tip {
  font-size: 12px;
  color: #dc2626;
  background: #fee2e2;
  border: 2px solid #dc2626;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-weight: 700;
  animation: loader-tip-pulse 2s ease-in-out infinite;
}
@keyframes loader-tip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.loader-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #4b5563;
  font-weight: 600;
}
.loader-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  opacity: 0.45;
  transition: opacity 300ms ease, color 300ms ease;
}
.loader-stat.active {
  opacity: 1;
  color: #8b5cf6;
}
.loader-stat.done {
  opacity: 1;
  color: #059669;
}
.loader-stat .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #9ca3af;
  border-radius: 50%;
  border: 2px solid #000;
  flex-shrink: 0;
}
.loader-stat.active .dot {
  background: #8b5cf6;
  animation: loader-dot-pulse 0.8s ease-in-out infinite;
}
.loader-stat.done .dot {
  background: #10b981;
  animation: none;
}
@keyframes loader-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

/* 网络较慢时 - 增强提示 */
.loader-overlay.slow-net .loader-tip {
  background: #fffbe6;
  border-color: #d97706;
  color: #d97706;
}
.loader-overlay.slow-net .loader-spinner {
  border-top-color: #f59e0b;
  border-right-color: #f59e0b;
}

/* ---- CSS 变量与基础设置 (Theme Tokens) ---- */
:root {
  --bg-color: #f4f3ee;
  --primary: #8b5cf6;     /* 紫色 */
  --secondary: #10b981;   /* 绿色 */
  --accent: #f59e0b;      /* 黄色 */
  --danger: #ef4444;      /* 红色 */
  --info: #3b82f6;        /* 蓝色 */
  --dark: #1f2937;

  --border-color: #000000;
  --border-width: 3px;
  --shadow-offset: 5px;

  --card-bg: #ffffff;
  --card-bg-alt: #fffbe6;

  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --anim-fast: 150ms;
  --anim: 250ms;

  --sidebar-w: 280px;
}

/* ==========================================================================
   动画关键帧 (Keyframes) —— 60fps 性能优化
   使用 transform 和 opacity，避免布局重排 (reflow)
   ========================================================================== */

/* 1. 页面切换：淡入淡出 + 位移组合 */
@keyframes page-fade-in {
  0%   { opacity: 0; transform: translateY(20px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes page-fade-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

/* 2. 水平滑动：从右侧滑入 */
@keyframes page-slide-right {
  0%   { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* 3. 垂直滑动：从下方滑入 */
@keyframes page-slide-up {
  0%   { opacity: 0; transform: translateY(60px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 4. 缩放淡入：中心展开 */
@keyframes page-scale-in {
  0%   { opacity: 0; transform: scale(0.95); }
  60%  { opacity: 0.9; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* 5. 滚动触发：元素进入视口的渐显 + 位移动画 */
@keyframes scroll-reveal {
  0%   { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 6. 波纹点击效果 */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

/* 7. 搜索框聚焦脉冲 */
@keyframes input-pulse {
  0%, 100% { box-shadow: 5px 5px 0 var(--border-color), 0 0 0 0 rgba(139, 92, 246, 0.3); }
  50%      { box-shadow: 5px 5px 0 var(--border-color), 0 0 0 8px rgba(139, 92, 246, 0); }
}

/* 8. 浮动提示出现 */
@keyframes toast-slide-in {
  0%   { opacity: 0; transform: translateY(-20px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   通用动画类 (用于 JS 添加/移除)
   ========================================================================== */

/* 页面切换动画容器 (性能优化: contain 避免全局 reflow) */
.tab-panel {
  animation: page-fade-in 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  will-change: transform, opacity;
  contain: layout style;
  position: relative;
}

/* 内容容器：contain content 让子元素更新不影响外部布局 */
#content-area {
  contain: layout style paint;
  position: relative;
}

/* 三种页面过渡效果 */
.tab-panel.anim-fade {
  /* 淡入淡出 + 位移组合（默认） */
  animation: page-fade-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tab-panel.anim-slide-right {
  /* 从右侧滑入 */
  animation: page-slide-right 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tab-panel.anim-slide-up {
  /* 从下方滑入 */
  animation: page-slide-up 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tab-panel.anim-scale {
  /* 缩放淡入（中心展开） */
  animation: page-scale-in 450ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* 滚动触发动画：元素初始隐藏，进入视口时由 JS 添加 .in-view */
.anim-reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  will-change: transform, opacity;
  contain: layout style;
  transition: opacity 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.anim-reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 交错延迟：让多个元素依次出现，避免视觉混乱 */
.anim-reveal.delay-1 { transition-delay: 80ms; }
.anim-reveal.delay-2 { transition-delay: 160ms; }
.anim-reveal.delay-3 { transition-delay: 240ms; }
.anim-reveal.delay-4 { transition-delay: 320ms; }
.anim-reveal.delay-5 { transition-delay: 400ms; }

/* 尊重用户的 "减少动画" 偏好 (无障碍) */
@media (prefers-reduced-motion: reduce) {
  .tab-panel, .anim-reveal, .shop-card, .item-card, .neo-btn, .topnav-tab,
  .stat-card, .search-box input, .search-box button, .filter-select, .filter-input {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   自定义鼠标指针样式
   ========================================================================== */

/* 交互区域使用自定义指针 */
.neo-btn, .shop-card, .item-card, .topnav-tab, .search-box button,
.filter-select, .material-card, .modal-close {
  cursor: pointer;
}

/* 文本输入区域使用 I-beam */
.search-box input, .filter-input, input[type="text"], textarea {
  cursor: text;
}

/* ----- Reset ----- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background-color: var(--bg-color);
  color: var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  min-height: 100vh;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--border-color);
}

/* ==========================================================================
   通用组件样式 (Neo-Brutalism Core)
   ========================================================================== */
.neo-box {
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
  transition: all var(--anim) ease;
  margin-bottom: 10px;
  padding: 16px;
  border-radius: var(--radius);
}

.neo-box:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--border-color);
}

/* ----- Neo 按钮 ----- */
.neo-btn {
  padding: 10px 20px;
  font-weight: 800;
  cursor: pointer;
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: 4px 4px 0 var(--border-color);
  font-family: 'Courier New', Courier, monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  /* 增强：使用 transform，避免重排 */
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 250ms ease;
  will-change: transform;
  border-radius: var(--radius);
  font-size: 13px;
  letter-spacing: 0.5px;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.neo-btn:hover {
  /* 悬停：位移 + 阴影加深 + 轻微缩放 */
  transform: translate(-2px, -2px) scale(1.03);
  box-shadow: 6px 6px 0 var(--border-color);
}

.neo-btn:active {
  /* 点击：位移 + 缩小，产生按压反馈 */
  transform: translate(2px, 2px) scale(0.98);
  box-shadow: 2px 2px 0 var(--border-color);
  transition-duration: 120ms;
}

/* 波纹效果容器 */
.neo-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.neo-btn:active::after {
  animation: ripple 350ms ease-out;
  width: 200%;
  height: 200%;
}

.neo-btn.primary { background-color: var(--primary); color: #fff; }
.neo-btn.success { background-color: var(--secondary); color: var(--border-color); }
.neo-btn.danger  { background-color: var(--danger);  color: #fff; }
.neo-btn.warning { background-color: var(--accent);  color: var(--border-color); }
.neo-btn.info    { background-color: var(--info);    color: #fff; }

/* ----- Neo 输入框 ----- */
.neo-input,
.neo-select,
.neo-textarea {
  width: 100%;
  padding: 12px;
  border: var(--border-width) solid var(--border-color);
  background: #fff;
  font-weight: 600;
  box-shadow: 3px 3px 0 var(--border-color);
  margin-bottom: 15px;
  font-family: inherit;
  outline: none;
  border-radius: var(--radius);
  transition: background var(--anim-fast) ease;
}

.neo-input:focus,
.neo-select:focus,
.neo-textarea:focus {
  background: var(--card-bg-alt);
}

.neo-textarea {
  min-height: 100px;
  resize: vertical;
  font-family: 'Consolas', monospace;
}

/* ----- Neo Badge 标签 ----- */
.neo-badge {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--border-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: var(--accent);
  box-shadow: 2px 2px 0 var(--border-color);
  border-radius: var(--radius);
  margin-left: 6px;
}

.neo-badge.ok   { background: var(--secondary); color: var(--border-color); }
.neo-badge.warn { background: var(--accent);    color: var(--border-color); }
.neo-badge.danger { background: var(--danger);  color: #fff; }
.neo-badge.info { background: var(--info); color: #fff; }
.neo-badge.inverted { background: var(--border-color); color: #fff; }

/* ==========================================================================
   侧边栏 (Sidebar Navigation)
   ========================================================================== */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--primary);
  border-right: var(--border-width) solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 20px;
  min-height: 100vh;
  position: fixed;       /* 固定在左侧，不随页面滚动 */
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;      /* 内容超出时可滚动 */
}

.logo {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 30px;
  padding: 15px;
  background: #fff;
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 2px;
  border-radius: var(--radius);
}

.logo small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--dark);
  margin-top: 6px;
  letter-spacing: 1px;
  font-family: inherit;
}

.nav-item {
  padding: 15px;
  margin-bottom: 15px;
  background: #fff;
  border: var(--border-width) solid var(--border-color);
  box-shadow: 4px 4px 0 var(--border-color);
  font-weight: bold;
  cursor: pointer;
  transition: all var(--anim-fast) ease;
  text-decoration: none;
  color: var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  border-radius: var(--radius);
}

.nav-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--border-color);
}

.nav-item.active {
  background: var(--border-color);
  color: #fff;
  box-shadow: none;
  transform: translate(4px, 4px);
}

.nav-item span:last-child {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  font-family: 'Courier New', monospace;
}

/* ==========================================================================
   主内容区 (Main Content)
   ========================================================================== */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);  /* 为固定侧边栏留出空间 */
  padding: 30px;
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 20px 20px;
  min-height: 100vh;
}

.section-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 25px;
  background: #fff;
  display: inline-block;
  padding: 10px 20px;
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  letter-spacing: 1px;
  border-radius: var(--radius);
}

/* ==========================================================================
   统计卡片 (Stats Row)
   ========================================================================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.stat-card {
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
  padding: 16px;
  text-align: center;
  border-radius: var(--radius);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  cursor: default;
}

.stat-card:hover {
  transform: translate(-2px, -2px) scale(1.02);
  box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--border-color);
}

.stat-card:nth-child(1) { background: #fff; }
.stat-card:nth-child(2) { background: #e8f5f3; }
.stat-card:nth-child(3) { background: #fffbe6; }
.stat-card:nth-child(4) { background: #f0e8f5; }

.stat-card .val {
  font-size: 28px;
  font-weight: 900;
  color: var(--border-color);
  letter-spacing: 1px;
}

.stat-card .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--border-color);
  margin-top: 4px;
  font-weight: 700;
  opacity: 0.75;
}

/* ==========================================================================
   分类卡片 (Material Category Grid)
   ========================================================================== */
.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.material-card {
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
  padding: 16px;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.material-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 6px;
  background: var(--primary);
  transition: width 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.material-card:hover {
  transform: translate(-3px, -3px) scale(1.03);
  box-shadow: calc(var(--shadow-offset) + 3px) calc(var(--shadow-offset) + 3px) 0 var(--border-color);
}

.material-card:hover::before {
  width: 120px;
}

.material-card .mat-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border: 3px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  background: var(--card-bg-alt);
  border-radius: var(--radius);
}

.material-card .mat-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.material-card .mat-meta {
  font-size: 11px;
  color: var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-weight: 600;
  opacity: 0.7;
}

.material-card .mat-score {
  font-size: 10px;
  padding: 3px 8px;
  background: var(--border-color);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: var(--radius);
}

/* ==========================================================================
   搜索与工具栏 (Search & Toolbar)
   ========================================================================== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  align-items: stretch;
}

.search-box {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: stretch;
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: 4px 4px 0 var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.search-box input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  /* 繁体字兼容字体栈 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei",
               "Noto Sans CJK TC", "Noto Sans CJK SC", sans-serif;
  /* 字符编码：使用 UTF-8 渲染 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 250ms ease,
              transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.search-box input:focus {
  background: var(--card-bg-alt);
  transform: translateX(2px);
}

.search-box input::placeholder {
  color: #9ca3af;
  font-weight: 500;
  opacity: 0.8;
}

.search-box button {
  padding: 0 20px;
  background: var(--border-color);
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 12px;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 250ms ease,
              box-shadow 250ms ease;
  will-change: transform;
}

.search-box button:hover { background: var(--primary); transform: scale(1.02); }
.search-box button:active { transform: scale(0.96); }

.filter-select {
  padding: 12px 16px;
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: 4px 4px 0 var(--border-color);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  border-radius: var(--radius);
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 250ms ease;
  will-change: transform;
}

.filter-select:hover {
  transform: translate(-2px, -2px) scale(1.02);
  box-shadow: 6px 6px 0 var(--border-color);
  background: var(--card-bg-alt);
}

.filter-select:active {
  transform: translate(2px, 2px) scale(0.98);
  box-shadow: 2px 2px 0 var(--border-color);
  transition-duration: 120ms;
}

.filter-input {
  padding: 12px 16px;
  border: var(--border-width) solid var(--border-color);
  box-shadow: 4px 4px 0 var(--border-color);
  font-size: 13px;
  background: var(--card-bg);
  font-weight: 600;
  outline: none;
  border-radius: var(--radius);
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 250ms ease;
  will-change: transform;
  /* 繁体字兼容字体 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei",
               "Noto Sans CJK TC", "Noto Sans CJK SC", sans-serif;
}

.filter-input:focus {
  transform: translateX(2px);
  background: var(--card-bg-alt);
}

.toolbar .neo-btn {
  margin-bottom: 0;
  margin-right: 0;
}

/* ==========================================================================
   商店卡片网格 (Shop Card Grid)
   ========================================================================== */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
  margin-bottom: 20px;
}

.shop-card {
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
  padding: 16px;
  border-radius: var(--radius);
  contain: layout style;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 280ms ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

.shop-card:hover {
  transform: translate(-2px, -2px) scale(1.03);
  box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--border-color);
  background: #fffbe6;
}

.shop-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.shop-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.shop-material {
  font-size: 11px;
  color: var(--border-color);
  font-family: 'Consolas', 'Monaco', monospace;
  letter-spacing: 1px;
  display: block;
  margin-top: 3px;
  opacity: 0.7;
  font-weight: 600;
}

/* ----- 物品图片容器 (2D 平面，无旋转效果) ----- */
.shop-card-left {
  width: 100%;
  height: 140px;
  margin-bottom: 14px;
  background: #fffbe6;
  border: 3px solid #000000;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.item-image {
  width: 110px;
  height: 110px;
  object-fit: contain;
  image-rendering: pixelated;     /* Minecraft 像素风格保持清晰 */
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: optimizeSpeed;
  transition: transform 0.2s ease;
}

.shop-card-left:hover .item-image {
  transform: scale(1.05);          /* 轻微放大 (不旋转) */
}

.item-fallback {
  width: 110px;
  height: 110px;
  border: 3px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-weight: 900;
  font-size: 14px;
  color: #000;
  background: #e8e8e8;
  box-shadow: inset 0 0 0 2px #fff;
  word-break: break-all;
  text-align: center;
  padding: 6px;
  line-height: 1.3;
  border-radius: 4px;
}

/* —— 贴图错误占位（中文提示）—— */
.item-image-placeholder {
  width: 110px;
  height: 110px;
  border: 3px solid #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', 'PingFang SC', 'Microsoft YaHei', monospace;
  font-weight: 900;
  font-size: 16px;
  color: #dc2626;
  background: #fee2e2;
  box-shadow: inset 0 0 0 2px #fff;
  text-align: center;
  padding: 6px;
  line-height: 1.3;
  border-radius: 4px;
  letter-spacing: 1px;
}

/* —— 价格溢出处理：过长数值换行 + 截断 —— */
.price-col {
  color: #1f2937;
  font-size: 15px;
  font-weight: 900;
  word-break: break-all;
  line-height: 1.3;
  max-width: 140px;
}

/* —— 商店卡片数据表格单元格宽度优化 —— */
.kv-table td:first-child {
  color: #6b7280;
  width: 38%;
  font-weight: 700;
}
.kv-table td:last-child {
  font-weight: 700;
  font-family: 'Consolas', monospace;
  text-align: right;
  word-break: break-all;
  white-space: normal;
  max-width: 180px;
}

.item-loading {
  font-size: 12px;
  color: #666;
  font-weight: 600;
  text-align: center;
}

.item-loading-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #ccc;
  border-top-color: #8b5cf6;
  border-right-color: #8b5cf6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 6px;
}

/* ----- 商店数据表格 ----- */
.kv-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  margin-top: 8px;
}

.kv-table td {
  padding: 5px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}

.kv-table td:first-child {
  color: var(--border-color);
  width: 42%;
  font-weight: 700;
  opacity: 0.75;
}

.kv-table td:last-child {
  font-weight: 700;
  font-family: 'Consolas', monospace;
  text-align: right;
}

.price-col {
  color: var(--primary);
  font-size: 15px;
  font-weight: 900;
}

/* ----- NBT 面板 ----- */
.nbt-panel {
  margin-top: 12px;
  border: 2px solid var(--border-color);
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}

.nbt-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--border-color);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.nbt-panel-body {
  padding: 10px;
  font-size: 11px;
  font-family: 'Consolas', monospace;
  color: var(--border-color);
  white-space: pre-wrap;
  max-height: 140px;
  overflow: auto;
  font-weight: 600;
}

/* ==========================================================================
   分页 (Pagination)
   ========================================================================== */
.pagination-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
  padding: 15px;
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: 4px 4px 0 var(--border-color);
  border-radius: var(--radius);
}

.page-info {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.page-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  box-shadow: 3px 3px 0 var(--border-color);
  font-weight: 800;
  font-size: 12px;
  transition: all var(--anim-fast) ease;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: 'Courier New', monospace;
}

.page-btn:hover:not(:disabled):not(.active) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--border-color);
  background: var(--card-bg-alt);
}

.page-btn.active {
  background: var(--border-color);
  color: #fff;
  box-shadow: none;
  transform: translate(3px, 3px);
}

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

.load-more {
  width: 100%;
  padding: 15px;
  margin-top: 15px;
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: 4px 4px 0 var(--border-color);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  transition: all var(--anim-fast) ease;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: 'Courier New', monospace;
}

.load-more:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--border-color);
  background: var(--primary);
  color: #fff;
}

.load-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   加载指示 (Loading Indicator) - 多动画支持 + 骨架屏
   ========================================================================== */
.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--border-color);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* 大尺寸 spinner (用于主页面加载) */
.spinner-lg {
  width: 56px;
  height: 56px;
  border: 5px solid rgba(139, 92, 246, 0.15);
  border-top-color: #8b5cf6;
  border-right-color: #3b82f6;
  border-bottom-color: #06b6d4;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.3));
}

/* 双环 spinner (视觉更丰富) */
.spinner-dual {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #8b5cf6;
  border-bottom-color: #3b82f6;
  animation: spin 0.9s linear infinite;
  position: relative;
}
.spinner-dual::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: #06b6d4;
  border-right-color: #10b981;
  animation: spin 0.6s linear infinite reverse;
}

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

/* ===== 骨架屏 (Skeleton Shimmer) ===== */
.skeleton {
  background: #e5e7eb;
  background: linear-gradient(
    90deg,
    rgba(229, 231, 235, 0.8) 0%,
    rgba(209, 213, 219, 0.9) 50%,
    rgba(229, 231, 235, 0.8) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-card {
  width: 100%;
  height: 120px;
  border: 3px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 #000;
  background: linear-gradient(
    90deg,
    #f3f4f6 0%,
    #e5e7eb 30%,
    #f3f4f6 60%,
    #e5e7eb 100%
  );
  background-size: 400% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

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

/* 骨架卡片行 (用于 shop 网格) */
.skeleton-shop {
  height: 140px;
  border: 3px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 #000;
  background: var(--card-bg);
  position: relative;
  overflow: hidden;
}
.skeleton-shop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 92, 246, 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep 1.6s ease-in-out infinite;
}
.skeleton-shop::after {
  content: "";
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  background-image:
    linear-gradient(#e5e7eb 100%, transparent 100%),
    linear-gradient(#e5e7eb 100%, transparent 100%),
    linear-gradient(#e5e7eb 100%, transparent 100%);
  background-size: 80px 100px, 120px 14px, 80px 12px;
  background-position: 0 10px, 100px 20px, 100px 44px;
  background-repeat: no-repeat;
}

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

/* 渐入渐出 (淡入页面元素) */
.fade-in {
  animation: fadeIn 0.4s ease-out both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 弹跳脉冲 */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b5cf6;
  animation: pulse-dot 1.2s ease-in-out infinite;
  margin: 0 2px;
}
.pulse-dot:nth-child(2) { animation-delay: 0.15s; background: #3b82f6; }
.pulse-dot:nth-child(3) { animation-delay: 0.3s; background: #06b6d4; }

@keyframes pulse-dot {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* 进度条动画 */
.progress-bar-animated {
  width: 280px;
  max-width: 100%;
  height: 18px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 2px;
  box-shadow: 4px 4px 0 #000;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
  background-size: 200% 100%;
  animation: gradient-slide 2s ease-in-out infinite;
  transition: width 0.3s ease;
}

@keyframes gradient-slide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.progress-bar-animated::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: progress-slide 1.5s ease-in-out infinite;
}

@keyframes progress-slide {
  0%   { left: -60%; }
  100% { left: 100%; }
}

/* 文字跳动 */
.loading-text {
  font-family: 'Courier New', monospace;
  font-weight: 900;
  animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ==========================================================================
   空状态 (Empty State)
   ========================================================================== */
.empty-state {
  padding: 48px 20px;
  text-align: center;
  background: var(--card-bg);
  border: var(--border-width) dashed var(--border-color);
  border-radius: var(--radius);
}

.empty-state strong {
  font-size: 18px;
  font-weight: 900;
  display: block;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.empty-state span {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
}

/* ==========================================================================
   Toast 通知
   ========================================================================== */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.toast {
  padding: 12px 20px;
  background: #fff;
  color: var(--border-color);
  border: 3px solid var(--border-color);
  box-shadow: 5px 5px 0 var(--border-color);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  animation: toastIn var(--anim) var(--ease) both;
  border-radius: var(--radius);
}

.toast.is-ok    { background: var(--secondary); color: var(--border-color); }
.toast.is-warn  { background: var(--accent);    color: var(--border-color); }
.toast.is-err   { background: var(--danger);    color: #fff; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   响应式布局 (Responsive)
   ========================================================================== */
/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
  .main-content { padding: 20px 24px; }
  .material-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
  .section-title { font-size: 22px; }
}

/* Mobile: < 768px */
@media (max-width: 768px) {
  body {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    min-height: auto;
    position: sticky;
    top: 0;
    height: auto;
    border-right: none;
    border-bottom: var(--border-width) solid var(--border-color);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px;
    gap: 10px;
    overflow-x: auto;
  }

  .main-content {
    margin-left: 0;
    padding: 16px 14px 40px;
  }

  .logo {
    font-size: 18px;
    padding: 8px 12px;
    margin-bottom: 0;
    margin-right: 10px;
    flex-shrink: 0;
    letter-spacing: 1px;
  }
  .logo small { display: none; }

  .nav-item {
    padding: 8px 12px;
    font-size: 12px;
    flex-shrink: 0;
    margin-bottom: 0;
    box-shadow: 3px 3px 0 var(--border-color);
  }

  .main-content {
    padding: 16px 14px 40px;
  }

  .shop-card { padding: 14px; }

  .material-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .shop-grid { grid-template-columns: 1fr; gap: 15px; }

  .toolbar { gap: 10px; }
  .search-box { min-width: 100%; order: -1; flex-basis: 100%; }

  .toast-stack {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .section-title { font-size: 18px; padding: 8px 14px; }

  .pagination-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Tiny mobile */
@media (max-width: 480px) {
  .material-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* High-DPI screens */
@media (min-resolution: 2dppx) {
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
}

/* ==========================================================================
   管理后台布局样式
   ========================================================================== */
.admin-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.admin-row > div {
  flex: 1;
  min-width: 120px;
}

.admin-row label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.admin-row input {
  width: 100%;
  padding: 10px;
  border: 3px solid #000;
  background: #fff;
  font-family: 'Courier New', monospace;
  font-weight: 600;
  box-shadow: 3px 3px 0 #000;
  outline: none;
  font-size: 13px;
}

.admin-row input:focus {
  background: #fffbe6;
}

.code-editor {
  font-family: 'Consolas', 'Courier New', monospace;
  background: #1a1a1a;
  color: #e8e8e8;
  padding: 15px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
}

/* ==========================================================================
   顶部导航栏 (Top Navigation)
   ========================================================================== */
.topnav {
  background: #ffffff;
  border-bottom: var(--border-width) solid var(--border-color);
  box-shadow: 0 var(--shadow-offset) 0 var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topnav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.topnav-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.topnav-logo {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--primary);
  white-space: nowrap;
}

.topnav-logo img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
}

/* 插件版本号徽章（导航栏 Logo 旁，由 /api/health 动态填充） */
.app-version {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--primary);
  border: 2px solid #000;
  border-radius: 2px;
  box-shadow: 2px 2px 0 #000;
  vertical-align: middle;
  user-select: none;
}
.app-version:empty {
  display: none;
}

.topnav-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.topnav-tab {
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  color: var(--border-color);
  background: #fff;
  border: var(--border-width) solid var(--border-color);
  box-shadow: 3px 3px 0 var(--border-color);
  border-radius: var(--radius);
  /* 使用 transform 避免布局重排 */
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 250ms ease,
              color 250ms ease;
  will-change: transform;
  letter-spacing: 0.5px;
}

.topnav-tab:hover {
  background: #fff7ed;
  transform: translate(-1px, -1px) scale(1.02);
  box-shadow: 5px 5px 0 var(--border-color);
}

.topnav-tab:active {
  transform: translate(2px, 2px) scale(0.98);
  box-shadow: 1px 1px 0 var(--border-color);
  transition-duration: 120ms;
}

.topnav-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 3px 3px 0 var(--border-color);
  transform: translateY(0);
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qsfilter-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #fff;
  border: var(--border-width) solid var(--border-color);
  box-shadow: 3px 3px 0 var(--border-color);
  border-radius: var(--radius);
  cursor: help;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.qsfilter-status:hover {
  transform: translate(-1px, -1px);
}

.qsfilter-status .status-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.auth-info {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  background: #fff;
  border: var(--border-width) solid var(--border-color);
  box-shadow: 3px 3px 0 var(--border-color);
  border-radius: var(--radius);
}

.auth-info .role-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 900;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--border-color);
  border-radius: 2px;
}

.auth-info.admin .role-badge {
  background: var(--danger);
}

/* ==========================================================================
   主要内容区布局
   ========================================================================== */
.main-content {
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

/* ==========================================================================
   模态框 (Modal)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: fadeIn 200ms ease;
}

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

.modal-panel {
  background: #fff;
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  padding: 0;
  animation: slideDown 250ms var(--ease);
}

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

.modal-header {
  padding: 18px 24px;
  border-bottom: var(--border-width) solid var(--border-color);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--border-color);
}

.modal-header.danger {
  color: var(--danger);
}

.modal-body {
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #1f2937;
}

.modal-body .warn-text {
  color: var(--danger);
  font-weight: 700;
}

.modal-body .muted-text {
  color: #6b7280;
  font-size: 12px;
  margin-top: 8px;
}

.modal-body ul {
  margin: 8px 0 8px 20px;
}

.modal-body li {
  margin: 4px 0;
}

.modal-footer {
  padding: 14px 24px;
  border-top: var(--border-width) solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  background: #fafafa;
}

/* ==========================================================================
   登录模态框表单
   ========================================================================== */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #333;
}

.auth-form input {
  width: 100%;
  padding: 10px 12px;
  border: var(--border-width) solid var(--border-color);
  background: #fff;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
}

.auth-form input:focus {
  background: #fffbe6;
  outline: none;
}

/* ==========================================================================
   强制终止按钮 (Terminate Button)
   ========================================================================== */
.terminate-btn {
  min-width: 140px;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  background: var(--danger);
  color: #fff;
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--anim-fast) ease;
  text-transform: uppercase;
}

.terminate-btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--border-color);
  background: #dc2626;
}

.terminate-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--border-color);
}

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

/* ==========================================================================
   Toast 提示
   ========================================================================== */
#toast-root {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-item {
  background: #fff;
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  color: var(--border-color);
  min-width: 240px;
  max-width: 360px;
  animation: toastSlide 300ms var(--ease);
  display: flex;
  align-items: center;
  gap: 10px;
}

@keyframes toastSlide {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.toast-item.success { background: #dcfce7; }
.toast-item.error { background: #fee2e2; }
.toast-item.warning { background: #fef3c7; }
.toast-item.info { background: #dbeafe; }

.toast-icon {
  font-size: 18px;
  font-weight: 900;
}

/* ==========================================================================
   数据管理面板 (Admin Panel)
   ========================================================================== */
.admin-card {
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.admin-card h3 {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  color: var(--border-color);
}

.admin-card p.hint {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 12px;
  line-height: 1.6;
}

.admin-card .btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.admin-card input,
.admin-card select {
  padding: 10px 12px;
  border: var(--border-width) solid var(--border-color);
  background: #fff;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
}

.admin-card input:focus,
.admin-card select:focus {
  outline: none;
  background: #fffbe6;
}

.progress-track {
  width: 100%;
  height: 14px;
  background: #f3f4f6;
  border: var(--border-width) solid var(--border-color);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.1);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 12px 0 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--info));
  width: 0%;
  transition: width 300ms ease;
}

.progress-status {
  font-size: 12px;
  color: #374151;
  font-weight: 600;
}

/* ==========================================================================
   物品堆叠列表 / 物品详情页
   ========================================================================== */

.page-title-row {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 3px solid #000;
}

.page-title {
  font-size: 22px;
  color: #000;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: 0.3px;
}

.page-subtitle {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

.items-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 14px;
  background: #fff;
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  align-items: center;
}

.items-toolbar .search-box {
  flex: 1;
  min-width: 280px;
  display: flex;
  gap: 8px;
}

.filter-input {
  padding: 8px 12px;
  border: 2px solid #000;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  min-width: 130px;
  transition: all 0.15s;
}

.filter-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.filter-select {
  padding: 8px 12px;
  border: 2px solid #000;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-width: 130px;
}

.filter-select:hover {
  border-color: #8b5cf6;
  background: #fafafa;
}

/* 物品卡片网格（响应式：桌面 3 列，平板 2 列，手机 1 列） */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

/* 原始 item-card（保留兼容） */
.item-card {
  background: #fff;
  border: 3px solid #000;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 5px 5px 0 #000;
  cursor: pointer;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 300ms ease;
  will-change: transform;
  position: relative;
}

.item-card:hover {
  transform: translate(-3px, -3px) scale(1.03);
  box-shadow: 8px 8px 0 #000;
  background: #fefce8;
}

.item-card:active {
  transform: translate(0, 0) scale(0.98);
  box-shadow: 3px 3px 0 #000;
  transition-duration: 120ms;
}

/* —— 增强的物品卡片：左侧图片 + 右侧信息 —— */
.enhanced-item-card {
  display: flex;
  gap: 14px;
  align-items: stretch;
  contain: layout style;
  position: relative;
  padding: 14px;
  min-height: 150px;
}

.enhanced-item-card .item-card-image-box {
  flex: 0 0 110px;
  width: 110px;
  background: #f4f4ee;
  border: 3px solid #000;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  overflow: hidden;
}

.enhanced-item-card .item-card-image {
  max-width: 100%;
  max-height: 100%;
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.enhanced-item-card .item-card-image-fallback {
  width: 100px;
  height: 100px;
  border: 3px solid #dc2626;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  font-family: 'Courier New', monospace;
  font-weight: 900;
  font-size: 13px;
  text-align: center;
  border-radius: 4px;
}

.enhanced-item-card .item-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.enhanced-item-card .item-card-name-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.enhanced-item-card .item-card-name {
  font-size: 18px;
  font-weight: 900;
  color: #000;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

.enhanced-item-card .item-card-material {
  font-size: 11px;
  color: #6b7280;
  font-family: 'Consolas', 'Courier New', monospace;
  letter-spacing: 0.5px;
}

.enhanced-item-card .item-card-data-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.enhanced-item-card .item-card-price-block,
.enhanced-item-card .item-card-shops-block {
  flex: 1;
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.enhanced-item-card .item-card-shops-block {
  background: #dbeafe;
  border-color: #3b82f6;
}

.enhanced-item-card .item-card-price-label,
.enhanced-item-card .item-card-shops-label {
  font-size: 11px;
  font-weight: 700;
  color: #78350f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.enhanced-item-card .item-card-shops-label {
  color: #1e3a8a;
}

.enhanced-item-card .item-card-price-val {
  font-size: 18px;
  font-weight: 900;
  color: #b45309;
  font-family: 'Consolas', 'Courier New', monospace;
  word-break: break-all;
}

.enhanced-item-card .item-card-shops-val {
  font-size: 18px;
  font-weight: 900;
  color: #1e3a8a;
  font-family: 'Consolas', 'Courier New', monospace;
}

.enhanced-item-card .item-card-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.enhanced-item-card .item-card-chip {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  background: #f3f4f6;
  border: 2px solid #000;
  border-radius: 4px;
}

.enhanced-item-card .item-card-chip.selling {
  background: #d1fae5;
  color: #065f46;
}

.enhanced-item-card .item-card-chip.buying {
  background: #fee2e2;
  color: #991b1b;
}

.enhanced-item-card .item-card-chip.owner {
  background: #ede9fe;
  color: #5b21b6;
}

.enhanced-item-card .item-card-chip.world {
  background: #cffafe;
  color: #155e75;
}

.enhanced-item-card .item-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.enhanced-item-card .item-detail-btn {
  background: #8b5cf6;
  color: #fff;
  border: 3px solid #000;
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
  transition: all 150ms ease;
}

.enhanced-item-card .item-detail-btn:hover {
  background: #a855f7;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}

/* —— 详情页商店卡片：库存高亮 —— */
.shop-row-quantity.highlight-row {
  background: linear-gradient(135deg, #dcfce7, #86efac);
  border: 2px solid #16a34a;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0;
}

.shop-row-quantity.highlight-row .k {
  color: #166534;
  font-size: 12px;
  font-weight: 800;
}

.shop-row-quantity.highlight-row .quantity-big {
  font-size: 22px;
  font-weight: 900;
  color: #14532d;
  font-family: 'Consolas', 'Courier New', monospace;
  letter-spacing: 0.5px;
}

/* —— 库存状态颜色扩展 —— */
/* 无限库存：深紫渐变 */
.shop-row-quantity.quantity-infinite {
  background: linear-gradient(135deg, #ede9fe, #a5b4fc);
  border-color: #6366f1;
}
.shop-row-quantity.quantity-infinite .k { color: #1e1b4b; }
.shop-row-quantity.quantity-infinite .quantity-big { color: #3730a3; }

/* 普通可用库存：保持绿色 */
.shop-row-quantity.quantity-normal {
  background: linear-gradient(135deg, #dcfce7, #86efac);
  border-color: #16a34a;
}
.shop-row-quantity.quantity-normal .k { color: #166534; }
.shop-row-quantity.quantity-normal .quantity-big { color: #14532d; }

/* 低库存（≤10）：红色警告 */
.shop-row-quantity.quantity-low {
  background: linear-gradient(135deg, #fee2e2, #fca5a5);
  border-color: #dc2626;
  animation: pulseLow 2.5s ease-in-out infinite;
}
.shop-row-quantity.quantity-low .k { color: #7f1d1d; }
.shop-row-quantity.quantity-low .quantity-big {
  color: #991b1b;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
@keyframes pulseLow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.15); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* ✅ 未知库存（未设置/未知来源：灰色中性色，明确标识非虚构数据 */
.shop-row-quantity.quantity-unknown {
  background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
  border-color: #64748b;
}
.shop-row-quantity.quantity-unknown .k { color: #334155; }
.shop-row-quantity.quantity-unknown .quantity-big {
  color: #475569;
  font-style: italic;
  opacity: 0.85;
}

/* —— 徽标颜色：出售 vs 收购 —— */
.neo-badge.badge-selling {
  background: #111827;
  color: #fff;
}
.neo-badge.badge-buying {
  background: #0e7490;
  color: #fff;
}

/* —— 统计卡片：出售/收购色 —— */
.stat-card.stat-selling {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-color: #059669;
}
.stat-card.stat-selling .val { color: #065f46; }
.stat-card.stat-selling .lbl { color: #065f46; opacity: 0.75; }

.stat-card.stat-buying {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #d97706;
}
.stat-card.stat-buying .val { color: #78350f; }
.stat-card.stat-buying .lbl { color: #78350f; opacity: 0.75; }

/* —— 物品浏览卡片：出售/收购数据块颜色扩展 —— */
.enhanced-item-card .item-card-price-block.block-selling {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 2px solid #059669;
}
.enhanced-item-card .item-card-price-block.block-selling .item-card-price-label { color: #065f46; }
.enhanced-item-card .item-card-price-block.block-selling .item-card-price-val { color: #065f46; }

.enhanced-item-card .item-card-price-block.block-buying {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #d97706;
}
.enhanced-item-card .item-card-price-block.block-buying .item-card-price-label { color: #78350f; }
.enhanced-item-card .item-card-price-block.block-buying .item-card-price-val { color: #78350f; }

.item-card-price-range {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
  margin-top: 4px;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* 响应式：详情页统计卡片换行 */
@media (max-width: 900px) {
  .item-stats-row .stat-card { flex: 1 1 140px; min-width: 140px; }
}
@media (max-width: 600px) {
  .item-stats-row .stat-card { flex: 1 1 48%; min-width: 0; }
}

.item-card-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #e5e7eb;
}

.item-name {
  font-size: 16px;
  font-weight: 800;
  color: #000;
  margin-bottom: 2px;
  letter-spacing: 0.3px;
}

.item-material {
  font-size: 11px;
  color: #6b7280;
  font-family: monospace;
  letter-spacing: 0.5px;
}

/* 价格区 */
.item-price-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 6px;
}

.price-label {
  font-size: 11px;
  color: #78350f;
  font-weight: 600;
  text-transform: uppercase;
}

.price-avg {
  font-size: 18px;
  font-weight: 800;
  color: #78350f;
}

.price-min {
  font-size: 12px;
  color: #065f46;
  font-weight: 600;
}

.price-max {
  font-size: 12px;
  color: #991b1b;
  font-weight: 600;
}

/* 统计 chip */
.item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.stat-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  border: 2px solid #000;
  background: #f3f4f6;
  color: #1f2937;
  letter-spacing: 0.3px;
}

.stat-chip.shops { background: #dbeafe; color: #1e3a8a; border-color: #2563eb; }
.stat-chip.owners { background: #dcfce7; color: #166534; border-color: #16a34a; }
.stat-chip.worlds { background: #ede9fe; color: #4c1d95; border-color: #7c3aed; }
.stat-chip.selling { background: #fef9c3; color: #713f12; border-color: #ca8a04; }
.stat-chip.buying { background: #fce7f3; color: #9d174d; border-color: #db2777; }
.stat-chip.activity { background: #fee2e2; color: #7f1d1d; border-color: #dc2626; }

/* 点击提示 */
.item-hint {
  text-align: right;
  font-size: 11px;
  color: #8b5cf6;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 6px;
}

.items-status {
  text-align: center;
  font-size: 13px;
  color: #374151;
  margin: 12px 0;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.items-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  font-size: 15px;
  color: #6b7280;
  background: #f9fafb;
  border: 3px dashed #d1d5db;
  border-radius: 8px;
  font-weight: 600;
}

/* 分页 */
.items-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  border-radius: 8px;
}

.items-pageinfo {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.3px;
}

/* 物品详情页 */
.item-detail-back {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 3px solid #000;
}

.item-detail-title {
  font-size: 22px;
  font-weight: 800;
  color: #000;
  margin: 0;
  letter-spacing: 0.3px;
}

.item-stats-row {
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.shop-detail-card {
  background: #fff;
  border: 3px solid #000;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 5px 5px 0 #000;
  transition: all 0.15s ease;
}

.shop-detail-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #000;
  background: #fdf2f8;
}

.shop-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px dashed #e5e7eb;
}

.shop-row:last-child {
  border-bottom: none;
}

.shop-row .k {
  color: #6b7280;
  font-weight: 500;
}

.shop-row .v {
  color: #000;
  font-weight: 700;
  text-align: right;
}

/* 响应式 */
@media (max-width: 768px) {
  .items-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .items-toolbar .search-box {
    flex: none;
    width: 100%;
  }

  .filter-input, .filter-select {
    width: 100%;
  }

  .items-grid {
    grid-template-columns: 1fr;
  }

  /* 移动端：物品卡片图片减小，优化触控 */
  .enhanced-item-card {
    flex-direction: row;
    min-height: 130px;
    padding: 12px;
    gap: 10px;
  }

  .enhanced-item-card .item-card-image-box {
    flex: 0 0 86px;
    width: 86px;
  }

  .enhanced-item-card .item-card-image {
    width: 76px;
    height: 76px;
  }

  .enhanced-item-card .item-card-name {
    font-size: 16px;
  }

  .enhanced-item-card .item-card-price-val,
  .enhanced-item-card .item-card-shops-val {
    font-size: 16px;
  }

  .page-title {
    font-size: 18px;
  }

  .items-pager {
    flex-direction: column;
    gap: 8px;
  }
}

/* ==========================================================================
   首页 Hero 区域 + 公告卡片
   ========================================================================== */
.home-hero {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  padding: 40px 28px;
  text-align: center;
  margin-bottom: 24px;
  color: #fff;
}
.home-hero-title {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 8px 0;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}
.home-hero-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.announcement-wrapper {
  margin-bottom: 20px;
}

.announcement-loading, .announcement-empty, .announcement-error {
  padding: 30px 20px;
  background: #f9fafb;
  border: 3px dashed #9ca3af;
  text-align: center;
  color: #6b7280;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 3px 3px 0 #000;
}
.announcement-error {
  border-color: #dc2626;
  color: #b91c1c;
  background: #fef2f2;
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.announcement-card {
  background: #fff;
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  padding: 18px 20px;
  contain: layout style;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.announcement-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #000;
}

.announcement-card.priority-high {
  background: linear-gradient(to bottom, #fffbeb, #ffffff);
  border-color: #d97706;
}

.announcement-card.priority-low {
  opacity: 0.9;
  background: #f9fafb;
}

.announcement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #d1d5db;
}

.announcement-title {
  font-size: 18px;
  font-weight: 900;
  color: #1f2937;
  flex: 1;
}

.announcement-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  background: #e5e7eb;
  color: #374151;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
}
.priority-high .announcement-badge {
  background: #fcd34d;
  color: #78350f;
}
.priority-low .announcement-badge {
  background: #e5e7eb;
  color: #4b5563;
}

.announcement-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.announcement-content {
  font-size: 14px;
  color: #374151;
  line-height: 1.7;
  font-weight: 500;
}
.announcement-line {
  margin: 0 0 4px 0;
}
.announcement-line:last-child {
  margin-bottom: 0;
}

.announcement-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px dashed #d1d5db;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 公告编辑弹窗中的表单元素 */
.ann-editor .form-row {
  margin-bottom: 14px;
}
.ann-editor .form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}
.ann-editor .form-input, .ann-editor .form-select, .ann-editor .form-textarea {
  width: 100%;
  padding: 9px 11px;
  font-size: 14px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
}
.ann-editor .form-input:focus, .ann-editor .form-select:focus, .ann-editor .form-textarea:focus {
  box-shadow: 3px 3px 0 #8b5cf6;
  border-color: #8b5cf6;
}
.ann-editor .form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

/* ==========================================================================
   系统商店 & 玩家商店 样式扩展（v2 新增）
   ========================================================================== */
/* 顶部双徽章布局：交易类型 + 系统/玩家标识 */
.shop-title-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.shop-title-badges .neo-badge { margin: 0; }

/* 系统商店徽章：金色高亮 */
.neo-badge.badge-system {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #78350f;
  border: 2px solid #b45309;
  font-weight: 800;
  letter-spacing: 0.5px;
}
/* 玩家商店徽章：青色普通 */
.neo-badge.badge-player {
  background: #e0f2fe;
  color: #075985;
  border: 2px solid #0ea5e9;
  font-weight: 700;
}

/* 卡片级系统商店背景（整张卡片带金色边框） */
.shop-card.shop-detail-card.shop-card-system {
  border: 2px solid #f59e0b !important;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

/* ==========================================================================
   打印样式
   ========================================================================== */
@media print {
  .topnav, .sidebar, .toast-stack, .toolbar, .pagination-bar { display: none !important; }
  .main-content { margin: 0; padding: 0; max-width: 100%; }
  .shop-card, .neo-box, .panel, .stat-card, .material-card {
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* 图片加载失败时的错误提示图 */
img.error-img {
  width: 100%;
  height: auto;
  max-height: 128px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  display: block;
  margin: 0 auto;
  background-color: #fef2f2;
  border: 2px solid #ef4444;
  border-radius: 4px;
}
.shop-card-left img.error-img,
.item-card-image-box img.error-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* ===== 文本缺失 → 自动显示预设图片 ===== */
/* 缺失文本整行：居中淡入过渡 */
.text-missing-row {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 4px;
  background-color: #f8fafc;
  border: 1px dashed #cbd5e1;
  transition: opacity 350ms ease, background-color 350ms ease;
}

/* 文本缺失图片：像素化风格，居中 + 淡入 */
img.text-missing-img,
img.text-missing-row-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  display: inline-block;
  vertical-align: middle;
  transition: opacity 350ms ease, transform 300ms ease;
}

img.text-missing-row-img {
  width: 40px;
  height: 40px;
}

.shop-card img.text-missing-row-img,
.item-card img.text-missing-row-img {
  width: 32px;
  height: 32px;
}

/* 小尺寸内联（用于材质缺失微图标） */
img.text-missing-img-inline {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

.shop-material.shop-material-missing {
  display: inline-flex;
  align-items: center;
}

/* 悬停轻放大反馈（视觉提示该图片表示缺失） */
.text-missing-row-img:hover {
  transform: scale(1.08);
  opacity: 0.85;
}

/* 文本缺失容器淡入（由 JS 添加 .text-missing-visible） */
.text-missing {
  opacity: 0;
  transition: opacity 300ms ease;
}
.text-missing.text-missing-visible {
  opacity: 1;
}

/* ===== Online purchase (web buy) ===== */
.shop-buy-bar {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.purchase-btn {
  cursor: pointer;
  font-weight: 700;
  padding: 8px 18px;
  font-size: 14px;
}
.purchase-dialog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 340px;
  max-width: 460px;
}
.purchase-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 2px solid #000;
  border-radius: 6px;
  background: #f9fafb;
}
.purchase-img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  flex: 0 0 auto;
}
.purchase-name {
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.purchase-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.purchase-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.purchase-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.purchase-input {
  padding: 8px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}
.purchase-input:focus {
  box-shadow: 3px 3px 0 #000;
}
.purchase-summary {
  padding: 8px 10px;
  background: #ecfdf5;
  border: 2px dashed #059669;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #065f46;
  text-align: center;
}
.purchase-tip {
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  padding: 6px 8px;
  line-height: 1.5;
}

/* ===== 多设备适配（平板 / 手机） ===== */
@media (max-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .items-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .topnav-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}
@media (max-width: 768px) {
  .topnav-inner { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; }
  .topnav-left { flex-wrap: wrap; gap: 8px; max-width: 100%; }
  .topnav-tabs { max-width: 100%; padding-bottom: 2px; }
  .topnav-tab { padding: 6px 10px; font-size: 12px; flex: 0 0 auto; }
  .topnav-right { flex-wrap: wrap; gap: 6px; }
  .main-content { padding: 12px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
  .shop-card { padding: 12px; }
  .modal-panel { width: calc(100vw - 32px) !important; max-width: 460px !important; }
  .purchase-dialog { min-width: 0 !important; width: 100%; }
  .modal-footer { gap: 8px; flex-wrap: wrap; }
  .toolbar { flex-wrap: wrap !important; }
  .toolbar input, .toolbar select { flex: 1 1 100% !important; min-width: 0 !important; }
  .stats-row { flex-wrap: wrap; }
  .home-hero-title { font-size: 20px; }
  .home-hero-subtitle { font-size: 13px; }
}
@media (max-width: 480px) {
  .shop-grid { grid-template-columns: 1fr !important; }
  .items-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .topnav-tab { font-size: 11px; padding: 5px 8px; }
  .main-content { padding: 8px; }
  .shop-name { font-size: 14px; }
  .purchase-qty { width: 90px !important; }
  .modal-panel { width: calc(100vw - 16px) !important; }
}
.auth-info { display: inline-flex; align-items: center; gap: 6px; }
.auth-info.player { background: #ecfdf5; border: 2px solid #059669; border-radius: 4px; padding: 4px 8px; }