/* ============================================================
   astrbot.css — 站点「AstrBot」栏样式
   ------------------------------------------------------------
   类名统一 astro- 前缀，避免污染其它板块。
   全部颜色走站点已有的 CSS 变量，并带兜底值（万一变量没定义
   也不会变成透明/黑块）：
     --bg #0d0f12  --card #161a20  --text #e8eaed
     --muted #8b939e  --accent #e8a33d  --ok #4ade80  --bad #ff5d5d
   风格对齐站点：深色玻璃拟态、圆角 ~14px、
   边框 rgba(255,255,255,.07)、暖橙 accent。
   ============================================================ */

/* ---------- 栏目根容器 ---------- */
.astro{ display:block; }

/* ---------- 头部：标题 / 副标题 / 统计 ---------- */
.astro-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  margin-bottom:14px;
  background:var(--card,#161a20);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.25);
}
.astro-head-main{ min-width:0; flex:1 1 260px; }

.astro-title{
  margin:0 0 6px;
  font-size:22px;
  line-height:1.25;
  font-weight:700;
  color:var(--text,#e8eaed);
  letter-spacing:.5px;
}
.astro-sub{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--muted,#8b939e);
}
.astro-sub[hidden]{ display:none; }
.astro-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.astro-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 11px;
  font-size:12.5px;
  line-height:1;
  color:var(--text,#e8eaed);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  white-space:nowrap;
}
.astro-pill-dim{ color:var(--muted,#8b939e); }

/* ---------- 简介 ---------- */
.astro-intro{
  margin:0 0 16px;
  padding:0 4px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted,#8b939e);
}
.astro-intro[hidden]{ display:none; }

/* ---------- 子栏导航 ----------
   窄屏横向滚动：overflow-x:auto + nowrap，
   并隐藏滚动条（桌面端不出现难看的长条）。 */
.astro-tabs{
  display:flex;
  gap:8px;
  margin-bottom:16px;
  padding:6px;
  background:var(--card,#161a20);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  /* 隐藏滚动条（Firefox / IE / WebKit 三套写法） */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.astro-tabs::-webkit-scrollbar{ display:none; height:0; width:0; }

.astro-tab{
  /* flex:0 0 auto 保证窄屏不被压缩，从而触发父级横向滚动 */
  flex:0 0 auto;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 16px;
  font-family:inherit;
  font-size:13.5px;
  line-height:1;
  color:var(--muted,#8b939e);
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
  transition:color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.astro-tab:hover{
  color:var(--text,#e8eaed);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.07);
}
.astro-tab:focus-visible{
  outline:2px solid var(--accent,#e8a33d);
  outline-offset:2px;
}
.astro-tab.is-active{
  color:var(--accent,#e8a33d);
  background:rgba(232,163,61,.12);
  border-color:rgba(232,163,61,.35);
  box-shadow:0 0 0 1px rgba(232,163,61,.08) inset;
}
.astro-tab-ic{ font-size:14px; line-height:1; }
.astro-tab-tx{ font-weight:600; }
.astro-tab-n{
  display:inline-block;
  min-width:18px;
  padding:1px 6px;
  font-size:11px;
  line-height:16px;
  text-align:center;
  color:var(--muted,#8b939e);
  background:rgba(255,255,255,.07);
  border-radius:999px;
}
.astro-tab.is-active .astro-tab-n{
  color:var(--accent,#e8a33d);
  background:rgba(232,163,61,.18);
}
.astro-tab-n[hidden]{ display:none; }
/* ---------- 面板与网格 ---------- */
.astro-pane{ display:block; }
.astro-pane[hidden]{ display:none; }

.astro-grid{
  display:grid;
  /* auto-fit + minmax：窄屏自动降列，无需写一堆媒体查询 */
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}

/* ---------- 通用卡片 ---------- */
.astro-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:16px 17px;
  background:var(--card,#161a20);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  color:inherit;
  text-decoration:none;
  overflow:hidden;
  transition:transform .24s cubic-bezier(.22,.75,.28,1),
             border-color .24s ease,
             box-shadow .24s ease,
             background .24s ease;
}

/* hover：整体抬起 + 边框亮起 + 暖橙微光 */
.astro-card:hover{
  transform:translateY(-3px);
  border-color:rgba(232,163,61,.35);
  box-shadow:0 12px 30px rgba(0,0,0,.32), 0 0 0 1px rgba(232,163,61,.12);
  /* 兜底：不支持 color-mix 的浏览器用这一条 */
  background:#1a1e25;
  background:color-mix(in srgb, var(--card,#161a20) 92%, var(--accent,#e8a33d));
}
.astro-card:focus-visible{
  outline:2px solid var(--accent,#e8a33d);
  outline-offset:2px;
}

/* 卡片顶部高光条：hover 时从左展开 */
.astro-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--accent,#e8a33d), transparent);
  opacity:0;
  transform:scaleX(.3);
  transform-origin:left center;
  transition:opacity .24s ease, transform .32s cubic-bezier(.22,.75,.28,1);
}
.astro-card:hover::before{
  opacity:1;
  transform:scaleX(1);
}

.astro-card-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-height:20px;
}
.astro-card-title{
  margin:0;
  font-size:15.5px;
  font-weight:700;
  line-height:1.35;
  color:var(--text,#e8eaed);
  word-break:break-word;
}
.astro-card-desc{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--muted,#8b939e);
  /* 摘要最多 4 行，超出省略，保证卡片等高好看 */
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.astro-dim{ opacity:.6; font-style:italic; }
.astro-card-foot{
  font-size:11.5px;
  color:var(--muted,#8b939e);
  opacity:.85;
}
/* ---------- 人格卡 ---------- */
.astro-persona .astro-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  flex:0 0 auto;
  font-size:17px;
  background:rgba(232,163,61,.12);
  border:1px solid rgba(232,163,61,.28);
  border-radius:11px;
  transition:transform .3s cubic-bezier(.22,.75,.28,1), background .24s ease;
}
.astro-persona:hover .astro-avatar{
  transform:rotate(-6deg) scale(1.06);
  background:rgba(232,163,61,.2);
}
.astro-persona .astro-card-title{ flex:1 1 auto; min-width:0; }

/* ---------- 插件卡 ---------- */
.astro-plugin .astro-tag{
  flex:0 0 auto;
  font-size:11.5px;
  padding:3px 9px;
  border-radius:999px;
}
.astro-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  font-size:11.5px;
  line-height:1.4;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.astro-badge.is-on{
  color:var(--ok,#4ade80);
  background:rgba(74,222,128,.1);
  border-color:rgba(74,222,128,.28);
}
.astro-badge.is-off{
  color:var(--muted,#8b939e);
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.07);
}
.astro-pid{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11.5px;
  color:var(--muted,#8b939e);
  opacity:.75;
  word-break:break-all;
}
.astro-link{ cursor:pointer; }
.astro-open{
  margin-top:auto;
  padding-top:4px;
  font-size:12.5px;
  color:var(--accent,#e8a33d);
  opacity:.75;
  transition:opacity .22s ease, transform .22s ease;
}
.astro-link:hover .astro-open{
  opacity:1;
  transform:translateX(3px);
}

/* ---------- 小标签组 ---------- */
.astro-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
}
.astro-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 9px;
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted,#8b939e);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  white-space:nowrap;
}
/* ---------- 骨架屏（数据未到时） ---------- */
.astro-skel-line{
  height:11px;
  border-radius:6px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.09) 37%,
    rgba(255,255,255,.05) 63%);
  background-size:400% 100%;
  animation:astroShimmer 1.4s ease-in-out infinite;
}
.astro-skel-line.w40{ width:40%; }
.astro-skel-line.w50{ width:50%; }
.astro-skel-line.w60{ width:60%; }
.astro-skel-line.w80{ width:80%; }
.astro-skel-line.w90{ width:90%; }
@keyframes astroShimmer{
  0%   { background-position:100% 0; }
  100% { background-position:0 0; }
}
.astro-card[data-skel='1']{ cursor:default; }
.astro-card[data-skel='1']:hover{
  transform:none;
  border-color:rgba(255,255,255,.07);
  box-shadow:none;
}
.astro-card[data-skel='1']:hover::before{ opacity:0; }

/* ---------- 空状态 / 错误态 ---------- */
.astro-empty{
  grid-column:1 / -1;   /* 横跨整行，居中显示 */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:44px 20px;
  text-align:center;
  background:var(--card,#161a20);
  border:1px dashed rgba(255,255,255,.12);
  border-radius:14px;
}
.astro-empty-ic{ font-size:30px; line-height:1; opacity:.85; }
.astro-empty-t{
  font-size:14.5px;
  font-weight:600;
  color:var(--text,#e8eaed);
}
.astro-empty-h{
  max-width:420px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--muted,#8b939e);
}

/* ---------- 顶部状态条 ---------- */
.astro-status{
  margin-bottom:14px;
  padding:10px 14px;
  font-size:12.5px;
  line-height:1.7;
  border-radius:11px;
  border:1px solid transparent;
}
.astro-status[hidden]{ display:none; }
.astro-status-ok{
  color:var(--ok,#4ade80);
  background:rgba(74,222,128,.08);
  border-color:rgba(74,222,128,.25);
}
.astro-status-warn{
  color:var(--accent,#e8a33d);
  background:rgba(232,163,61,.09);
  border-color:rgba(232,163,61,.3);
}
.astro-status-err{
  color:var(--bad,#ff5d5d);
  background:rgba(255,93,93,.08);
  border-color:rgba(255,93,93,.28);
}

/* ---------- 脚注 ---------- */
.astro-foot{
  margin-top:14px;
  font-size:11.5px;
  color:var(--muted,#8b939e);
  opacity:.7;
  text-align:right;
}
/* ---------- 移动端适配 ---------- */
@media (max-width:720px){
  .astro-head{
    padding:15px 16px;
    border-radius:12px;
  }
  .astro-title{ font-size:19px; }
  .astro-grid{
    /* 单列，卡片铺满，避免窄屏两列挤成豆腐块 */
    grid-template-columns:1fr;
    gap:12px;
  }
  .astro-tabs{
    /* 窄屏：横向滚动子栏（需求明确要求） */
    gap:6px;
    padding:5px;
    border-radius:12px;
  }
  .astro-tab{
    padding:8px 13px;
    font-size:13px;
    /* 触屏上没有 hover，靠 active 反馈 */
  }
  .astro-tab:active{ transform:scale(.96); }
  .astro-card{
    padding:14px 15px;
    border-radius:12px;
  }
  .astro-card:hover{ transform:none; }
  .astro-meta{ width:100%; }
  .astro-foot{ text-align:left; }
}

@media (max-width:420px){
  .astro-pill{ font-size:11.5px; padding:4px 9px; }
  .astro-tab-n{ display:none; }   /* 极窄屏先省掉数字角标 */
  .astro-empty{ padding:34px 14px; }
}

/* ---------- 无障碍 / 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce){
  .astro-card,
  .astro-tab,
  .astro-avatar,
  .astro-open{ transition:none !important; }
  .astro-card:hover{ transform:none; }
  .astro-skel-line{ animation:none; }
}
/* ---------- 进场动画兜底 ----------
   core.js 的 setupReveal() 只在 renderPage 时扫描一次，
   而本栏卡片是异步填充的，可能错过扫描而停在 opacity:0。
   astrobot.js 里的 revealNow() 会主动补 .in；
   这里再加一道 CSS 级兜底：骨架卡不参与 reveal，
   避免极端情况下（JS 报错）整栏看起来是白屏。 */
.astro .astro-card[data-skel="1"]{ opacity:1 !important; transform:none !important; }

@media print{
  .astro-tabs,.astro-foot,.astro-status{ display:none !important; }
  .astro-card{ break-inside:avoid; }
}
/* ============================================================
   ★ 可复制卡片（人格文案等）与复制提示
   ============================================================ */
.astro-copyable{
  cursor:pointer;
  position:relative;
  transition:border-color .18s, transform .18s, background .18s;
}
.astro-copyable:hover{
  border-color:color-mix(in srgb,var(--accent,#e8a33d) 45%,transparent);
  transform:translateY(-1px);
}
.astro-copyable:active{ transform:translateY(0) scale(.995); }
.astro-copyable:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent,#e8a33d) 60%,transparent);
  outline-offset:2px;
}
.astro-copy-hint{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:10px;
  padding:5px 11px;
  border-radius:20px;
  font-size:12px;
  color:var(--accent,#e8a33d);
  background:color-mix(in srgb,var(--accent,#e8a33d) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#e8a33d) 34%,transparent);
  user-select:none;
}
.astro-copyable:hover .astro-copy-hint{
  background:color-mix(in srgb,var(--accent,#e8a33d) 20%,transparent);
}
/* 复制的原始文案不参与布局 */
.astro-copy-body{ display:none !important; }

/* 复制提示条：底部居中浮出 */
.astro-toast{
  position:fixed;
  left:50%;
  bottom:calc(28px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 14px);
  z-index:99999;
  max-width:calc(100vw - 40px);
  padding:11px 18px;
  border-radius:12px;
  font-size:13.5px;
  line-height:1.5;
  text-align:center;
  overflow-wrap:anywhere;
  background:#161a20;
  color:var(--text,#e8eaed);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.astro-toast.on{ opacity:1; transform:translate(-50%, 0); }
.astro-toast-ok{ border-color:color-mix(in srgb,var(--ok,#4ade80) 45%,transparent); }
.astro-toast-bad{ border-color:rgba(255,93,93,.5); }

/* 窄屏：提示更靠下、字号略小 */
@media (max-width:860px){
  .astro-toast{ font-size:13px; padding:10px 15px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
  .astro-copy-hint{ font-size:11.5px; padding:5px 10px; }
}
/* ★ 标题区：无边框无背景，避免出现多余的方框 */
.astro-head-plain{
  display:block;
  padding:0;
  margin:0 0 18px;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.astro-head-plain .astro-title{ margin:0 0 8px; }
.astro-head-plain .astro-sub{ margin:0; }