/* 前台小组件样式：从 style.css 抽出的「JS 动态组件」最小子集
   （举报弹窗 / 删除弹窗 / toast / pulse / notice / 跳过链接 / 忙碌态 / 按钮变体）。
   前台布局只加载本文件 + 演示端 app.css/tw.css，不再整包加载 style.css（120KB）；
   后台 admin 继续加载 style.css，不受影响。 */

/* 令牌桥：下面这些规则引用的是旧站变量名，这里指到演示端令牌上，
   暗色随 html.dark 自动跟随（演示端令牌本身已按 html.dark 重定义）。 */
:root {
  --bg: var(--surface-muted);
  --card: var(--surface);
  --line: var(--border-line);
  --txt: var(--text-strong);
  --sub: var(--text-base);
  --muted: var(--text-muted);
  --accent: var(--brand-primary);
  --accent-soft: var(--brand-primary-soft);
  --accent-ink: var(--brand-primary);
  --accent-fg: var(--on-brand);
  --accent-2: #a35f10;
  --shadow: var(--sh-1);
  --shadow-lg: var(--sh-3);
  --r-pill: 999px;
  --ease: var(--ease-out);
  --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-5xl: 24px;
}
html.dark { --accent-2: #d9822b; }

.ic { fill: currentColor; vertical-align: -2px; flex: none; }

/* 请求在途的按钮：禁点并给出视觉反馈 */
[data-like].is-busy, [data-collect].is-busy, [data-subscribe].is-busy, [data-follow].is-busy { opacity: .55; pointer-events: none; }

.muted { color: var(--muted); }

.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 1px 2px rgba(48, 60, 160, .25), 0 3px 10px rgba(48, 60, 160, .18); }

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 3px 6px rgba(48, 60, 160, .28), 0 8px 20px rgba(48, 60, 160, .22); }

.btn-primary:active { transform: translateY(0) scale(.985); box-shadow: 0 1px 2px rgba(48, 60, 160, .25); filter: brightness(.97); }

.btn-ghost { border-color: var(--line); color: var(--sub); background: var(--card); }

.btn-ghost:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.btn-ghost.on { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

.btn-danger { background: #c93030; color: #fff; }

.btn-danger:hover { filter: brightness(1.06); }

.btn-danger:active { transform: scale(.98); }

.btn-danger:disabled { filter: none; transform: none; opacity: .6; cursor: default; }

.btn[disabled], .btn.is-busy { opacity: .55; pointer-events: none; }

.tips li.muted { color: var(--muted); font-size: var(--fs-xs); }

.fan-list .muted { grid-column: 1 / -1; font-size: var(--fs-xs); }

/* ===== 筛选条 ===== */
.notice {
  display: flex; align-items: flex-start; gap: 8px; background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent-2) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: var(--fs-sm); color: var(--txt);
}

.notice b { flex: none; font-size: var(--fs-xs); background: var(--accent); color: var(--accent-fg); border-radius: 8px; padding: 2px 9px; margin-top: 1px; }

.fi .hint { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }

.src-opt .hint { grid-column: 2; }

.toast-wrap { position: fixed; top: 78px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; }

.toast { background: rgba(32, 36, 48, .93); color: #fff; padding: 9px 18px; border-radius: 8px; font-size: var(--fs-sm); box-shadow: var(--shadow-lg); animation: pop .2s ease; }

.toast.ok { background: rgba(30, 168, 105, .95); }

.toast.err { background: rgba(226, 68, 68, .95); }

.toast.wait { background: rgba(224, 154, 22, .95); }

/* 弹窗（举报） */
.modal-mask { position: fixed; inset: 0; background: rgba(15, 18, 26, .45); z-index: 110; display: grid; place-items: center; padding: 20px; }

.modal { background: var(--card); border-radius: 12px; padding: 22px; width: min(420px, 100%); box-shadow: var(--shadow-lg); }

.modal h3 { font-size: var(--fs-base); margin-bottom: 12px; }

.modal .reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.modal .reasons label { font-size: var(--fs-sm); padding: 5px 12px; border-radius: 8px; background: var(--bg); cursor: pointer; }

.modal .reasons input { display: none; }

.modal .reasons input:checked + span { color: var(--accent); font-weight: 600; }

.modal textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: var(--bg); outline: none; resize: vertical; }

.modal-ft { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* 弹窗（删除二次确认） */
.del-modal h3 { color: #c93030; }

body.dark .del-modal h3 { color: #ef8a8a; }

.del-tt { margin: 0 0 12px; font-size: var(--fs-base); font-weight: 600; line-height: 1.4; }

.del-tt i { display: block; font-style: normal; font-weight: 400; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

.del-warn { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--sub); }

.del-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.del-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-sm); padding: 6px 0; border-bottom: 1px dashed var(--line); }

.del-list li span { color: var(--muted); }

.del-list li b { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.del-list li.zero { opacity: .45; }

.del-notes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }

.del-notes li { font-size: var(--fs-xs); color: var(--muted); padding-left: 12px; position: relative; }

.del-notes li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #e24444; opacity: .5; }

.hint { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }

.av-ops .hint { max-width: 460px; }

.menu-pop button.danger { color: #c93030; }

body.dark .menu-pop button.danger { color: #ef8a8a; }

/* 左下：社区动态播报 */
.pulse-wrap { position: fixed; left: 16px; bottom: 104px; z-index: 110; display: flex; flex-direction: column-reverse; gap: 8px; max-width: 300px; }

.pulse-card {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 26px 9px 10px;
  border-radius: 12px; background: var(--card); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  animation: qsr-slide .28s ease;
}

.pulse-card.out { opacity: 0; transform: translateX(-12px); transition: .3s; }

.pulse-card > img { width: 30px; height: 30px; border-radius: 50%; flex: none; }

.pulse-card > span { min-width: 0; }

.pulse-card b { display: block; font-size: var(--fs-xs); font-weight: 600; }

.pulse-card i { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pulse-card em { position: absolute; right: 10px; bottom: 6px; font-style: normal; font-size: var(--fs-xs); color: var(--muted); }

.pulse-x { position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: var(--fs-xs); line-height: 1; cursor: pointer; }

.pulse-x:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce){
  .pulse-card { animation: none; }
}

.rss-meta .warn { font-style: normal; color: var(--accent-2); }

.cur-tt .ic { color: var(--accent); }

@media (max-width: 640px){
  .btn-ghost:not(.sm) { display: none; }
  .pulse-wrap { left: 10px; bottom: 92px; max-width: 240px; }
}

.pay-tip.muted, .pay-note { color: var(--muted, #7a8194); }

/* 2. 按压反馈：主/危险按钮早有 scale(.98)，次级按钮与胶囊类导航补齐同一档，
      点击从「无声变色」变成「按得动」。这些都是 flex 子项（块化），transform 生效 */
.btn-ghost:active, .cpill:active, .ft:active, .pager-simple .pgs:active { transform: scale(.98); }

.tip-hd .muted { font-size: var(--fs-xs); font-weight: 400; margin-left: 6px; }

.btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-ghost:active { transform: translateY(0); box-shadow: none; }

/* Toast：胶囊形 + 缓入动效，浮在内容之上而不是压住它 */
.toast { border-radius: var(--r-pill); padding: 10px 20px; box-shadow: var(--shadow-lg); animation: qsr-toast-in .32s var(--ease); }

/* ============================================================
   v61 无障碍与移动端修复（全站审查落地）
   —— B1 暗色 accent 前景 / R1 对比度 / R2 触控目标 / R3 焦点环 / B2 移动导航
   ============================================================ */

/* R3：这些输入框在各自段落里写了 outline:none，把全局 :focus-visible 环吃掉了。
   统一在这里补回实线环（写在文件末尾，靠顺序赢过前面的同特异度规则） */
.search input:focus-visible, .compose textarea:focus-visible, .compose input[type=text]:focus-visible,
.fi input:focus-visible, .fi textarea:focus-visible, .fi select:focus-visible,
.src-pane input:focus-visible, .search-big input:focus-visible, .modal textarea:focus-visible,
.hk-row input:focus-visible, .rss-bar input:focus-visible, .adp-form input:focus-visible,
.adp-form select:focus-visible, .adp-form textarea:focus-visible, .mb-redeem input:focus-visible,
.clip-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ============================================================
   v63 无障碍收尾（R2–R6 / S1–S2）
   ============================================================ */

/* R3：跳到主内容。常态移出视口上沿，Tab 聚焦时滑入 */
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 300;
  background: var(--card); color: var(--accent-ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 16px; box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm); text-decoration: none; transition: top .18s var(--ease);
}

.skip-link:focus { top: 10px; }

/* toast 与弹窗的进场动画：原只在 style.css 定义，卸载后必须随组件一起搬过来 */
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }

@keyframes qsr-slide { from { opacity: 0; transform: translateX(-12px); } }

@keyframes qsr-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } }