/* ============================================================================
 * 用户端样式：与参考站（gamecsh）1:1 对齐
 *
 * 所有数值都取自线上真实渲染结果（getComputedStyle），不是凭截图目测：
 *   容器     max-width 900px / padding 30px 20px / 背景 #121212 / 文字 #e5e5e5
 *   标题     28px 700 #fff / letter-spacing 2px / DM Sans
 *   副标题   13px 500 #737373 / letter-spacing 2px
 *   筛选栏   背景 #1a1a1a / 1px solid #333 / padding 20px / gap 15px / 直角
 *   下拉框   背景 #000 / 1px solid #404040 / 14px / 直角 / 悬停 #ea580c
 *   卡片     背景 #1C1411 / 1px solid #3a2a22 / 底部 2px #000 / 左侧 4px #ea580c
 *            padding 20px 24px 20px 28px / gap 12px / 直角
 *   价格标签 12px 600 #ea580c / 1px solid #ea580c / 透明底
 *   服务器   12px 600 #a3a3a3 / 背景 #333 / 1px solid #404040
 *   组合文本 15px 500 #f5f5f5 / line-height 1.6
 *
 * 作用域限定在 .app-container 内：管理端用的是 assets/styles.css 那套亮色主题，
 * 两边互不干扰（index.html 里本文件的加载顺序在 styles.css 之后）。
 * ========================================================================== */

.app-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px;
  background: #121212;
  min-height: 100vh;
  /* 参考站容器基准字号是 16px；本项目全局 body 是 14px，这里显式盖回来，
     否则筛选栏、卡片、卡片网格的 font-size 都会比参考站小一号 */
  font-size: 16px;
  color: #e5e5e5;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  box-sizing: border-box;
}

/* 参考站字体来自 Google Fonts；国内网络常拉不到，这里只做「有则用」的渐进增强，
   拉不到时回落到 PingFang SC / 微软雅黑，不影响布局 */
@supports (font-variation-settings: normal) {
  .app-container { font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
}

.app-container * { box-sizing: border-box; }

/* ---------------- 标题区 ---------------- */
.app-container .header { text-align: center; padding: 20px 0 30px; }
.app-container .title {
  font-size: 28px;
  margin: 0;
  color: #ffffff;
  font-family: 'DM Sans', 'PingFang SC', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
}
.app-container .subtitle {
  font-size: 13px;
  color: #737373;
  margin-top: 10px;
  display: block;
  letter-spacing: 2px;
  font-weight: 500;
}

/* ---------------- 筛选区 ---------------- */
.app-container .filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  margin-bottom: 25px;
  padding: 20px;
  border-radius: 0;
  background: #1a1a1a;
  border: 1px solid #333;
}
.app-container .filter-item { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.app-container .filter-item label {
  font-size: 13px;
  color: #a3a3a3;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-container .ninja-label { display: flex; align-items: center; gap: 6px; }

/* 🏃 纯 CSS 小黑（与参考站同一实现） */
.app-container .running-kuro {
  position: relative;
  width: 18px;
  height: 24px;
  display: inline-block;
  animation: kuro-bounce 0.4s infinite alternate ease-in-out;
}
.app-container .kuro-head { position: absolute; top: 0; left: 3px; width: 12px; height: 10px; background: #fff; border-radius: 0; }
.app-container .kuro-head::after { content: ''; position: absolute; top: 2px; left: -4px; width: 16px; height: 3px; background: #ea580c; border-radius: 0; }
.app-container .kuro-body { position: absolute; top: 10px; left: 4px; width: 10px; height: 8px; background: #fff; border-radius: 0; }
.app-container .kuro-legs { position: absolute; bottom: 0; left: 2px; width: 14px; height: 6px; background: #fff; border-radius: 0; animation: kuro-run 0.4s infinite steps(2, end); }
@keyframes kuro-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
@keyframes kuro-run { 0% { transform: skewX(-25deg); } 100% { transform: skewX(25deg); } }

/* 下拉框 */
.app-container .custom-select {
  padding: 10px 12px;
  border-radius: 0;
  border: 1px solid #404040;
  background: #000;
  color: #e5e5e5;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  font-family: inherit;
}
.app-container .custom-select:hover { border-color: #ea580c; }
.app-container .custom-select:focus { border-color: #ea580c; box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2); }
/* 下拉面板本身由系统绘制，给暗色主题下的选项一个可读配色 */
.app-container .custom-select option { background: #000; color: #e5e5e5; }

/* ---------------- 列表与卡片 ---------------- */
.app-container .list-container { display: block; }
.app-container .ref-card-grid { display: flex; flex-direction: column; gap: 14px; }

.app-container .card {
  position: relative;
  overflow: hidden;
  background-color: #1C1411;
  border-radius: 0;
  padding: 20px 24px 20px 28px;
  border: 1px solid #3a2a22;
  border-left: none;
  border-bottom: 2px solid #000;
  box-shadow: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 贯穿上下的橙色装饰条 */
.app-container .card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: #ea580c;
}
.app-container .card:hover {
  transform: translateY(-2px);
  background-color: #241a16;
  border-color: #ea580c;
}

.app-container .ref-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.app-container .tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.app-container .tag.price { background: transparent; color: #ea580c; border: 1px solid #ea580c; }
.app-container .tag.server { background: #333; color: #a3a3a3; border: 1px solid #404040; }

.app-container .ref-card-content { z-index: 1; }
.app-container .combination {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #f5f5f5;
  font-weight: 500;
  word-break: break-word;
}

/* 空状态 */
.app-container .empty-state { text-align: center; padding: 60px 20px; color: #525252; }
.app-container .empty-icon { font-size: 48px; margin-bottom: 15px; }
.app-container .reset-btn {
  margin-top: 15px;
  padding: 8px 24px;
  background: transparent;
  border: 1px solid #404040;
  color: #a3a3a3;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  font-size: 14px;
}
.app-container .reset-btn:hover { background: #ea580c; border-color: #ea580c; color: #000; }

/* 加载/错误提示（参考站没有这个状态，配色沿用同一套暗色） */
.app-container .muted-note { color: #737373; font-size: 14px; text-align: center; padding: 30px 0; }

/* 一键复制（参考站没有此功能，放在列表下方，尽量不打扰卡片视觉） */
.app-container .list-tools { display: flex; justify-content: center; padding: 22px 0 40px; }

/* 站点公告（参考站没有；沿用同一套暗色+橙色，插在标题区下方） */
.app-container .ref-announcement {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: #1a1a1a;
  border: 1px solid #3a2a22;
  border-left: 4px solid #ea580c;
  color: #ea580c;
  font-size: 13px;
  line-height: 1.6;
}

/* 列表进出动画（与参考站一致） */
.list-enter-active, .list-leave-active { transition: all 0.3s ease; }
.list-enter-from, .list-leave-to { opacity: 0; transform: translateY(10px); }

/* ---------------- 手机端 ---------------- */
@media (max-width: 600px) {
  .app-container { padding: 20px 14px; }
  .app-container .filter-bar { flex-direction: column; gap: 12px; padding: 16px; }
  .app-container .card { padding: 16px 18px 16px 22px; }
  .app-container .title { font-size: 24px; }
  /* 手机上卡片内组合文本略小一点，一屏能多看一条 */
  .app-container .combination { font-size: 14px; }
  .app-container .tag { font-size: 11px; padding: 3px 8px; }
}