/* ==========================================================================
   ecomspy — 手写样式系统(无构建链)
   视觉:Claude 官网风 —— 暖灰底 / 深棕黑字 / 琥珀强调 / 白卡 1px 边框
   克制:无渐变 · 无阴影 · 无动画 · 无装饰。信息密度优先。
   tokens + 基础元素 + 顶栏 + 布局 + KPI + 过滤器 + 表单(本文件)
   组件(卡片/表格/徽标/图表/详情/tabs/feed) 见 components.css
   ========================================================================== */

:root {
  /* 文本 / 背景 —— 暖灰调 */
  --txt:        #1A1714;   /* 深棕黑主文字 */
  --mut:        #6B655C;   /* 次要文字 / 说明(暖灰) */
  --mut-2:      #A39C90;   /* 更弱文字 / 占位(浅暖灰) */
  --bd:         #E7E2D8;   /* 主边框(暖灰) */
  --bd-2:       #F0ECE3;   /* 浅分隔线 / 浅底 */
  --bg:         #FAFAF8;   /* 页面暖灰底 */
  --card-bg:    #FFFFFF;   /* 卡片白底 */
  --hover:      #F5F2EB;   /* 行 / 单元 hover 极浅暖灰 */

  /* 强调色 —— 琥珀 */
  --pri:        #B45309;   /* 琥珀:主按钮 / 链接 / 激活态 / 新品信号 */
  --pri-bg:     #FBEEDD;   /* 琥珀浅底(徽标 / callout) */
  --accent:     #B45309;   /* --pri 同义别名 */
  --accent-h:   #92400E;   /* 琥珀 hover / 按下 深色 */

  /* 功能色 —— 一律深色字 + 浅底 */
  --up:         #15803D;   /* 涨 / 上升 深绿(文字 / 图线 / 色条) */
  --up-bg:      #DCF5E3;   /* 涨 浅绿底 */
  --warn:       #BC4C2E;   /* 跌 / 警告 深砖红(文字 / 色条) */
  --warn-bg:    #F8E5DC;   /* 跌 / 警告 浅底 */
  --ok:         #15803D;   /* 成功 深绿 */
  --fail:       #B42318;   /* 失败 深红 */
  --flat:       #8A8377;   /* 持平 中性暖灰 */

  /* 排版 */
  --fs: 15px;
  --radius: 10px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--txt);
  background: var(--bg);
  font-size: var(--fs);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pri); text-decoration: none; }
/* 可点元素 hover 统一:变深(--accent-h)、无下划线。各组件不再各写一份 hover 覆盖。 */
a:hover { color: var(--accent-h); text-decoration: none; }
/* 全局键盘焦点环(输入框保留各自 :focus 边框方案) */
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

/* 数字一律等宽右对齐成柱 */
.num, .price, .rk-now, .delta, td.num, .kpi .n, .visits-big, .stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.num, td.num { text-align: right; }

/* ============================== 顶栏(毛玻璃) ============================== */
header.top {
  background: rgba(250, 250, 248, 0.8);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bd);
  padding: 0 clamp(12px, 4vw, 24px);
  height: 54px;
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 28px);
  position: sticky;
  top: 0;
  z-index: 20;
}
header.top .brand {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--txt);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}

header.top nav {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
header.top nav::-webkit-scrollbar { display: none; }
header.top nav a {
  flex: 0 0 auto;
  color: var(--mut);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
header.top nav a:hover { background: var(--bd-2); text-decoration: none; color: var(--txt); }
/* 当前导航项:琥珀字 + 琥珀浅底 */
header.top nav a.active { color: var(--pri); background: var(--pri-bg); font-weight: 600; }

main { max-width: 1360px; margin: 0 auto; padding: 20px 24px 64px; }

h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 15px; margin: 28px 0 12px; font-weight: 700; color: var(--txt); letter-spacing: -0.01em; }
.muted { color: var(--mut); }

/* ============================== KPI 横条 ============================== */
.kpi {
  display: inline-flex;   /* 收紧:按内容宽,不再一格占 1/4 屏宽 */
  gap: 0;
  background: var(--card-bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.kpi .cell {
  flex: 0 0 auto;
  min-width: 128px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--bd);
}
.kpi .cell:last-child { border-right: none; }
.kpi .n {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--txt);
}
.kpi .n.warn { color: var(--warn); }
.kpi .n.up { color: var(--up); }
.kpi .n.pri { color: var(--pri); }
.kpi .n.fail { color: var(--fail); }
.kpi .l { font-size: 12px; color: var(--mut); }

/* KPI 单元格链接化 */
.kpi a.cell {
  color: inherit;
  text-decoration: none;
}
.kpi a.cell:hover {
  background: var(--hover);
  text-decoration: none;
}

/* ============================== filter bar ============================== */
.filterbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.chips { display: inline-flex; gap: 4px; background: var(--card-bg); border: 1px solid var(--bd); border-radius: 999px; padding: 3px; }
.chips a {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mut);
}
.chips a:hover { color: var(--txt); text-decoration: none; }
.chips a.on { background: var(--txt); color: #fff; font-weight: 600; }
/* 动态流站点过滤 chip */
.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
}
.active-filter:hover { text-decoration: none; }
.active-filter .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  color: var(--mut);
  line-height: 1;
  flex-shrink: 0;
}
.active-filter .x:hover {
  background: var(--bd);
  color: var(--txt);
  text-decoration: none;
}
/* 下拉:原生 <details class="dd"><summary>,默认收起,点击开合,无 JS。
   dd-menu 绝对定位 + z-index,展开不撑开布局。 */
details.dd {
  position: relative;
  display: inline-block;
}
details.dd > summary {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border: 1px solid var(--bd); border-radius: var(--radius-sm);
  background: var(--card-bg); font-size: 13px; color: var(--txt); font-weight: 500;
  cursor: pointer; list-style: none; user-select: none;
}
details.dd > summary::-webkit-details-marker { display: none; }
details.dd > summary::before { content: none; }  /* 覆盖通用 details ▸ 箭头 */
details.dd > summary:hover { border-color: var(--mut-2); }
details.dd > summary::after { content: "▾"; color: var(--mut); font-size: 10px; }
details.dd[open] > summary { border-color: var(--mut-2); }
details.dd[open] > summary::after { content: "▴"; }
.ddmenu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 140px;
  background: var(--card-bg); border: 1px solid var(--bd); border-radius: var(--radius-sm);
  padding: 4px; z-index: 30;
}
.ddmenu a {
  display: block; padding: 7px 10px; font-size: 13px; color: var(--txt);
  border-radius: 4px;
}
.ddmenu a:hover { background: var(--bd-2); text-decoration: none; }
.ddmenu a.on { color: var(--pri); font-weight: 600; }

/* ============================== 卡片网格 ============================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /* 大屏一行 5-6 张 */
  gap: 14px;
}
/* "查看全部"次级链接 */
.more-link {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mut);
}

/* ---- pcard(高频组件,与卡片网格同处) ---- */
.pcard {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  overflow: hidden;
}
.pcard::before {
  /* 左侧 3px 色条 —— 按 data-sig 着色 */
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; z-index: 2;
  background: var(--bd);
}
.pcard[data-sig="rank_surge"]::before   { background: var(--up); }     /* 上升 绿 */
.pcard[data-sig="new_entrant"]::before  { background: var(--pri); }    /* 新品 琥珀 */
.pcard:hover { border-color: var(--mut-2); }
.pcard .thumb {
  position: relative;
  width: 100%; aspect-ratio: 1;
  background: var(--bd-2);
  overflow: hidden;
}
.pcard .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 图片加载失败:onerror 给 .thumb 加 noimg,用首字母兜底(浅底深字),不留灰块 */
.pcard .thumb.noimg {
  background: var(--bd-2);
  display: flex; align-items: center; justify-content: center;
}
.pcard .thumb.noimg::after {
  content: attr(data-ph);
  font-size: 30px; font-weight: 700; color: var(--mut-2);
}
.noimg-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: var(--mut-2);
  background: var(--bd-2);
  letter-spacing: 0;
}
.pcard .body { padding: 10px 12px 12px; }
.pcard .title {
  font-weight: 600; font-size: 13px; line-height: 1.4;
  color: var(--txt);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.pcard .row-1 {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px;
}
.pcard .price { font-weight: 700; font-size: 14px; color: var(--txt); }
.pcard .rankline { display: inline-flex; align-items: baseline; gap: 6px; }
.pcard .rk-now { font-weight: 700; font-size: 14px; color: var(--txt); }
.pcard .delta {
  font-weight: 700; font-size: 12px;
  padding: 2px 8px; border-radius: 4px;
}
.pcard .delta.up   { color: var(--up);   background: var(--up-bg); }
.pcard .delta.down { color: var(--warn); background: var(--warn-bg); }
.pcard .delta.flat { color: var(--mut);  background: var(--bd-2); }

.pcard .row-2 {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  font-size: 12px;
}
.shop-link {
  color: var(--mut) !important;
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 500;
}
.shop-link:hover { color: var(--accent-h) !important; }

/* ============================== 表单 / 管理页 ============================== */
.page-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-head .primary-link {
  margin-left: auto; padding: 6px 13px; border-radius: var(--radius-sm);
  color: #fff; background: var(--pri); font-size: 13px; font-weight: 600;
}
.page-head .primary-link:hover { background: var(--accent-h); color: #fff; text-decoration: none; }
.back-link { margin-left: auto; font-size: 13px; }
.admin-card {
  max-width: 620px; padding: 22px; background: var(--card-bg); border: 1px solid var(--bd);
  border-radius: var(--radius);
}
.form-intro { margin: 0 0 18px; color: var(--mut); }
.shop-form { display: grid; gap: 8px; }
.shop-form label { margin-top: 8px; font-weight: 600; }
.shop-form input[type="text"] {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bd);
  border-radius: var(--radius-sm); background: var(--card-bg); color: var(--txt); font-size: 14px;
}
.shop-form input[type="text"]:focus { outline: none; border-color: var(--pri); }
.shop-form small, .form-note { color: var(--mut); font-size: 12px; }
.shop-form button {
  width: max-content; margin-top: 12px; padding: 8px 16px; border: 0;
  border-radius: var(--radius-sm); color: #fff; background: var(--pri);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.shop-form button:hover { background: var(--accent-h); }
.form-note { margin: 18px 0 0; }
/* callout:左侧 3px 色条 + 浅底,无图标 */
.form-error {
  margin-bottom: 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--fail); background: var(--warn-bg); border-left: 3px solid var(--fail);
}
.save-success {
  margin-bottom: 14px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--ok); background: var(--up-bg); border-left: 3px solid var(--ok);
}
.section-count { font-size: 13px; font-weight: 400; }

/* ============================== 分页 ============================== */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 18px; font-size: 13px;
}
.pager a { font-weight: 600; }
.pager .disabled { color: var(--mut-2); }
.pager .pager-info { color: var(--mut); font-variant-numeric: tabular-nums; }

.empty { color: var(--mut); font-style: italic; padding: 16px 0; font-size: 13px; }