:root {
  --bg: #0f1115;
  --card: #171a21;
  --card2: #1e222b;
  --line: #2a2f3a;
  --txt: #e6e9ef;
  --muted: #8b93a3;
  --accent: #4a90d9;
  --accent2: #e67e22;
  --ok: #1a7f37;
  --bad: #c0392b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--txt);
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; }
.rank-app { max-width: 1180px; margin: 0 auto; padding: 24px; }

.topbar { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.eyebrow { color: var(--accent); font-size: 12px; letter-spacing: 2px; font-weight: 700; }
.hero-copy h1 { margin: 4px 0 8px; font-size: 26px; }
.hero-copy p { margin: 0; color: var(--muted); max-width: 640px; line-height: 1.55; }
.hero-actions { display: flex; flex-direction: column; gap: 8px; }
.search-entry { display: inline-block; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 8px; color: var(--txt); text-decoration: none; font-size: 13px; white-space: nowrap; }
.search-entry:hover { border-color: var(--accent); }
.search-entry.alt2 { border-color: var(--accent2); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 18px; }
.section-title { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px; }
.section-title h2 { margin: 4px 0; font-size: 18px; }
.section-title p { margin: 0; color: var(--muted); font-size: 13px; max-width: 720px; line-height: 1.5; }
.section-kicker { color: var(--accent); font-size: 11px; letter-spacing: 1.5px; font-weight: 700; }
.status { font-size: 12px; padding: 3px 10px; border-radius: 10px; }
.status.subtle { color: var(--muted); background: var(--card2); }
.status.ok { color: var(--ok); background: #16321f; }
.status.err { color: var(--bad); background: #3a1d1d; }

.grid { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
button { cursor: pointer; font: inherit; }
.signal { background: var(--accent); color: #fff; border: none; padding: 10px 18px;
  border-radius: 8px; font-weight: 600; }
.signal:hover { filter: brightness(1.08); }
.signal:disabled { opacity: .5; cursor: default; }
.ghost { background: transparent; color: var(--txt); border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 8px; }
.ghost:hover:not(:disabled) { border-color: var(--accent); }
.ghost:disabled { opacity: .45; cursor: default; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 12px; }
.badge.dim { background: var(--card2); color: var(--muted); }

.cov-note { margin-top: 12px; }
.empty-note { background: #2a2415; border: 1px solid #5a4a1a; color: #e0b84a;
  padding: 14px; border-radius: 8px; font-size: 13px; }

.preview { width: 100%; height: 78vh; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; }

/* 方案 B：店铺绑定面板脉冲高亮（引导用户操作） */
#shop-bind-panel.pulse-highlight {
  animation: pulseBorder 1.2s ease-in-out;
}
@keyframes pulseBorder {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 144, 217, 0); }
  50% { box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.35); }
}

/* 方案 B：无绑定店铺时下拉框禁用态 */
#report-shop-select:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--card2);
}