/* 分层关注样式 —— 我的关注（mw*）与管理页（ad*）
 *
 * 【为什么单独一个文件】
 * `style.css` 已 298 行，本项目规范单文件 ≤300 行。
 * 塞进去必然顶破红线，且 style.css 是主样式表，
 * 改它会让所有既有页面的回归风险上升。
 * 独立文件后：style.css 一行不动（零回归风险）。
 *
 * 【🔴 颜色纪律：本文件不写任何颜色字面量】
 * 项目约定颜色值只允许出现在 `style.css` 的 `:root` 里，
 * 破这条规矩的后果是换主题时漏改这些硬编码值，
 * 表现为「部分文字在深色下看不见」。
 *所以下面只用 `var(--token)`，**不写 `var(--token, #fallback)`**：
 * 写 fallback 看起来更稳，实则会把「token 名拼错」这件事掩盖掉 ——
 * token 名一拼错就静默回落成那个颜色，页面看起来正常，
 * 直到主样式表改了 token 值才发现这里的颜色从没跟着变过。
 *
 * 【不用 emoji 作图标】
 * 状态区分靠**形状 + 文字**（标签文案 + 边框样式），
 * 不靠颜色，也不靠图标 —— 只靠颜色区分是可达性缺陷。
 */
:root {
  --mw-mine:   var(--brand);
  --mw-store:  var(--warn);
}

/* ---- 面板容器 ---- */
/* 🔴 不用 position:fixed 全屏遮罩 —— 销售在手机上常常是
   「查一半价格 → 想看自己关注了什么 → 回来继续查」，
   遮罩会把来的路堵死。这里用普通块级面板，页面可继续滚动。 */
#mw-host, #ad-host { margin: var(--space-4) 0; }
#mw-host[hidden], #ad-host[hidden] { display: none; }

/* ---- 身份条 ---- */
.mw__ident {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.mw__ident--warn { border-color: var(--mw-store); }
.mw__ident--bad  { border-color: var(--danger); }
.mw__ident-text  { margin: 0 0 var(--space-2); font-weight: 600; }
.mw__ident-hint  { margin: 0 0 var(--space-2); font-size: var(--text-sm);
                   color: var(--muted); }
.mw__ident-input { width: 100%; margin-bottom: var(--space-2); }

/* ---- 分区 ---- */
.mw__section {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-base);
  border-left: 3px solid var(--mw-mine);
  padding-left: var(--space-2);
}
.mw__list, .ad__list { list-style: none; margin: 0; padding: 0; }

/* ---- 行 ---- */
.mw__row, .ad__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.ad__row--tight { padding: var(--space-2) 0; }

.mw__main, .ad__main { flex: 1; min-width: 0; }
.mw__name, .ad__name { margin: 0 0 var(--space-1); font-weight: 600; }
/* ⚠️ 商品名来自爬虫，可能很长。不断行会撑破手机屏。 */
.mw__name, .ad__name { overflow-wrap: anywhere; }
.mw__meta, .ad__meta { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.ad__note { margin: var(--space-1) 0 0; font-size: var(--text-sm); }

.ad__ops { display: flex; flex-direction: column; gap: var(--space-2);
           max-width: 46%; }
.ad__noteinput { max-width: 100%; }

/* ---- 标签：两类关注必须一眼可分 ---- */
/* 🔴 不只靠颜色：标签有文字（"我的关注"/"全店关注"）+ 不同边框样式
   （实线 vs 虚线）。色盲用户与灰度打印都能分辨。 */
.mw__tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 6px;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.mw__tag--mine {
  color: var(--mw-mine);
  border: 1px solid var(--mw-mine);
  background: none;
}
.mw__tag--store {
  color: var(--mw-store);
  border: 1px dashed var(--mw-store);
  font-weight: 600;
}

/* ---- 表单与提示 ---- */
.ad__add { display: flex; flex-wrap: wrap; gap: var(--space-2);
           margin: var(--space-3) 0; }
.ad__noteinput--wide { flex: 1 1 100%; }
.ad__h { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.ad__hint, .mw__note { margin: 0 0 var(--space-2); font-size: var(--text-sm);
                       color: var(--muted); }
.ad__empty, .mw__empty { margin: var(--space-2) 0; font-size: var(--text-sm);
                         color: var(--muted); }
.ad__empty--bad, .mw__note--bad { color: var(--danger); }
.ad__denied {
  margin: var(--space-2) 0;
  padding: var(--space-2);
  border: 1px dashed var(--mw-store);
  color: var(--mw-store);
  font-size: var(--text-sm);
}

/* ---- 按钮 ---- */
.btn {
  padding: var(--space-1) 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.btn:disabled { opacity: 0.55; cursor: default; }
.btn--primary { border-color: var(--brand); color: var(--brand); }
.btn--danger { border-color: var(--danger); color: var(--danger); }

/* ---- 顶部入口按钮（默认隐藏，JS 挂载后显示） ---- */
/* ⚠️ 隐藏而不是直接删掉：JS 没挂上时页面仍然完整可用，
   只是少两个入口 —— 比「按钮存在但点了没反应」好排查。
   展开式：面板显示时把入口也隐藏，避免同一个按钮有两种行为。 */
[data-mw-open], [data-ad-open] { display: none; }