/* ============================================================
 * xlang website — extlibs.css
 * 扩展库频道：列表页 + 详情页专用样式
 * ============================================================ */

/* ===== 分类主题色（卡片左侧色条 / 悬停描边） ===== */
.c-fmt   { --cat: #c084fc; }
.c-zip   { --cat: #fb923c; }
.c-db    { --cat: #60a5fa; }
.c-net   { --cat: #22d3ee; }
.c-ai    { --cat: #f472b6; }
.c-sec   { --cat: #f87171; }
.c-sys   { --cat: #94a3b8; }
.c-sci   { --cat: #fbbf24; }
.c-txt   { --cat: #4ade80; }
.c-mail  { --cat: #2dd4bf; }
.c-doc   { --cat: #a5b4fc; }
.c-ui    { --cat: #e879f9; }
.c-ds    { --cat: #a3e635; }
.c-cloud { --cat: #38bdf8; }
.c-hash  { --cat: #34d399; }

/* ===== 列表页头部 ===== */
.ext-hero .ext-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.28em;
  color: var(--brand); text-transform: uppercase; margin-bottom: 10px;
}
.ext-hero h1 { font-size: 40px; }
.ext-hero-import {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  padding: 10px 20px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-code); font-family: var(--font-mono); font-size: 14px;
  color: var(--text-soft); transition: border-color 0.2s;
}
.ext-hero-import:hover { border-color: var(--brand); }
.ext-hero-import .kw { color: var(--code-kw); }
.ext-hero-import .lib { color: var(--code-fn); font-weight: 700; }
.ext-hero-import .cm { color: var(--code-cm); font-size: 12px; }
.ext-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.ext-stat-pill {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 16px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card);
  font-size: 13px; color: var(--text-soft);
}
.ext-stat-pill b { font-size: 16px; font-weight: 800; color: var(--brand); font-family: var(--font-mono); }

/* ===== 列表页布局 ===== */
.ext-layout { max-width: var(--max-w); margin: 0 auto; padding: 28px 24px 80px; }

.ext-search { margin-bottom: 14px; }
.ext-search input {
  width: 100%; padding: 13px 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-input); color: var(--text); font-size: 15px; font-family: var(--font-sans);
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.ext-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }

.ext-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: thin; }
.ext-chips::-webkit-scrollbar { height: 4px; }
.ext-chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.ext-chip {
  flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-soft); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; font-family: var(--font-sans);
}
.ext-chip .n { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.ext-chip:hover { border-color: var(--brand); color: var(--text); transform: translateY(-1px); }
.ext-chip.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ext-chip.active .n { color: var(--on-brand); opacity: 0.75; }

.ext-result-line { font-size: 13px; color: var(--text-muted); margin: 2px 0 16px; }
.ext-result-line b { color: var(--brand); font-family: var(--font-mono); }

/* ===== 卡片网格 ===== */
.ext-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 14px; }

@keyframes extIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.ext-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 18px 14px 22px; overflow: hidden; text-decoration: none;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  animation: extIn 0.45s ease backwards;
}
.ext-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: var(--cat, var(--brand)); opacity: 0.85; transition: width 0.2s;
}
.ext-card:hover { transform: translateY(-3px); border-color: var(--cat, var(--brand)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
.ext-card:hover::before { width: 6px; }
.ext-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ext-top-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.ext-name { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); transition: color 0.15s; word-break: break-all; }
a.ext-card:hover .ext-name { color: var(--cat, var(--brand)); }
.ext-ver {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 8px; border-radius: 999px;
}
.ext-desc { font-size: 13px; color: var(--text-soft); line-height: 1.55; flex: 1; }
.ext-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.ext-impl { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.impl-c  { color: var(--orange); background: var(--orange-glow); }
.impl-xl { color: var(--green);  background: var(--green-glow); }
.ext-dep { font-size: 10px; padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.ext-dep.dep-zero { color: var(--green); background: var(--green-glow); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.ext-dep.dep-has { color: var(--text-muted); background: var(--bg-soft); border: 1px solid var(--border); }
.ext-cat-tag { font-size: 11px; color: var(--cat, var(--brand)); opacity: 0.9; }
.ext-doc {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--cat, var(--brand));
  opacity: 0; transform: translateX(-6px); transition: all 0.2s;
}
a.ext-card:hover .ext-doc { opacity: 1; transform: none; }

.ext-empty { display: none; padding: 56px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.ext-empty.show { display: block; }

/* ===== 详情页 ===== */
.extlib-layout { max-width: 940px; margin: 0 auto; padding: 32px 24px 80px; }

.extlib-head { margin-bottom: 8px; }
.extlib-title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.extlib-title-row h1 { font-family: var(--font-mono); font-size: 34px; font-weight: 800; letter-spacing: -0.5px; margin: 0; }
.extlib-cat-badge {
  font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px;
  color: var(--cat, var(--brand)); background: var(--bg-card); border: 1px solid var(--cat, var(--brand));
}
.extlib-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 10px; }
.extlib-badge {
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-soft);
  font-family: var(--font-mono);
}
.extlib-badge.hot { color: var(--orange); background: var(--orange-glow); border-color: transparent; }
.extlib-badge.pure { color: var(--green); background: var(--green-glow); border-color: transparent; }
.extlib-lead { color: var(--text-soft); font-size: 16px; line-height: 1.8; max-width: 720px; }

/* --- Tab 栏 --- */
.ext-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  margin: 30px 0 34px; overflow-x: auto; scrollbar-width: none;
}
.ext-tabs::-webkit-scrollbar { display: none; }
.ext-tab {
  padding: 11px 22px; font-size: 14px; font-weight: 600; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap;
  font-family: var(--font-sans); margin-bottom: -1px;
}
.ext-tab:hover { color: var(--text); }
.ext-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

.ext-panel { display: none; }
.ext-panel.active { display: block; animation: extIn 0.3s ease; }

/* --- 面板内容 --- */
.ext-panel h2 { font-size: 22px; font-weight: 700; margin: 40px 0 14px; letter-spacing: -0.3px; }
.ext-panel h2:first-child { margin-top: 0; }
.ext-panel h3 { font-size: 17px; font-weight: 700; margin: 28px 0 10px; color: var(--text); }
.ext-panel p { color: var(--text-soft); font-size: 14.5px; margin-bottom: 14px; }
.ext-panel ul, .ext-panel ol { color: var(--text-soft); padding-left: 24px; margin-bottom: 14px; font-size: 14.5px; }
.ext-panel li { margin-bottom: 6px; }
.ext-panel .code-block { margin: 16px 0 22px; }
.ext-panel code { color: var(--brand); }

.ext-scenes { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.ext-scene {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); font-size: 13px; font-weight: 600; color: var(--text-soft);
  transition: all 0.2s;
}
.ext-scene:hover { border-color: var(--cat, var(--brand)); color: var(--text); transform: translateY(-1px); }

.ext-kv { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-size: 14px; }
.ext-kv th, .ext-kv td { border: 1px solid var(--border); padding: 9px 16px; text-align: left; }
.ext-kv th { background: var(--bg-card); color: var(--text-muted); font-weight: 700; width: 150px; white-space: nowrap; font-size: 13px; }
.ext-kv td { color: var(--text-soft); font-family: var(--font-mono); font-size: 13px; }

/* --- API 条目 --- */
.api-item { margin: 0 0 26px; }
.api-sig {
  background: var(--bg-code); border: 1px solid var(--border); border-left: 3px solid var(--cat, var(--brand));
  border-radius: var(--radius); padding: 12px 18px; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; overflow-x: auto; white-space: pre;
  color: var(--text);
}
.api-sig .kw { color: var(--code-kw); }
.api-sig .fn { color: var(--code-fn); font-weight: 700; }
.api-sig .type { color: var(--code-type); }
.api-sig .cm { color: var(--code-cm); }
.api-item > p { font-size: 14px; margin: 0 0 8px; }
.api-note {
  font-size: 13px; color: var(--text-muted); background: var(--bg-soft);
  border-radius: var(--radius); padding: 10px 16px; margin-top: 8px;
}
.api-note code { color: var(--brand); }
.api-group-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

/* --- 底部返回 --- */
.ext-back {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 48px; padding: 12px 24px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  color: var(--text-soft); font-size: 14px; font-weight: 600; transition: all 0.2s;
}
.ext-back:hover { border-color: var(--brand); color: var(--brand); transform: translateX(-2px); }

@media (max-width: 768px) {
  .ext-grid { grid-template-columns: 1fr 1fr; }
  .extlib-title-row h1 { font-size: 26px; }
}
@media (max-width: 520px) {
  .ext-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ext-card { animation: none; }
}