/* ==========================================================================
   verdant 翠庭 · 前台主题样式
   配色令牌与后台 admin-native/css/app.css 保持一致（同一套 --n-* 变量名）
   核心关注：内容溢出防护（详见 §1 与文件末尾「溢出防线」注释）
   ========================================================================== */

/* ---------- §0 设计令牌（照搬后台 :root，变量名不另起） ---------- */
:root{
  --n-primary:#36b368; --n-primary-hover:#45c377; --n-primary-active:#2f9d5a;
  --n-primary-soft:#f0f9eb; --n-primary-line:#cdeecd;
  --n-blue:#2d8cf0; --n-blue-soft:#ecf5ff;
  --n-warm:#f6ad55; --n-warm-soft:#fdf6ec;
  --n-danger:#f56c6c; --n-danger-soft:#fef0f0;
  --n-gray:#909399; --n-gray-soft:#f4f4f5;
  --n-pink:#d6336c; --n-pink-soft:#fdeef4;

  --n-text:#333a45; --n-text-2:#6b7480; --n-text-3:#9aa2ad;
  --n-border:#e6eaef; --n-bg:#f2f4f7; --n-card:#ffffff;

  --n-side-bg:#23262e; --n-side-bg-2:#1d2027;
  --n-side-text:#b6bcc7; --n-side-text-hl:#ffffff; --n-side-line:#33383f;

  --n-radius:8px; --n-radius-sm:4px; --n-radius-lg:12px;
  --n-shadow:0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05);
  --n-shadow-lg:0 8px 32px rgba(16,24,40,.18);

  --n-head-h:52px; --n-cat-h:44px;
  --n-max:1200px;
  --n-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --n-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}

/* 主色预设（后台「强调色」配置注入 data-accent；主色相同时 hover/soft 成套跟随） */
:root[data-accent="blue"]  { --n-primary:#2d8cf0; --n-primary-hover:#5ba4f5; --n-primary-active:#2575d0; --n-primary-soft:#ecf5ff; --n-primary-line:#b8dcff; }
:root[data-accent="cyan"]  { --n-primary:#13b5b1; --n-primary-hover:#31c9c5; --n-primary-active:#0f9d99; --n-primary-soft:#e7f8f8; --n-primary-line:#b3e9e7; }
:root[data-accent="violet"]{ --n-primary:#7a5cf5; --n-primary-hover:#8f75f7; --n-primary-active:#6547d8; --n-primary-soft:#f1eeff; --n-primary-line:#d5cbff; }
:root[data-accent="amber"] { --n-primary:#e8a33d; --n-primary-hover:#f0b557; --n-primary-active:#c98a2c; --n-primary-soft:#fdf4e6; --n-primary-line:#f5dcae; }
:root[data-accent="rose"]  { --n-primary:#e0518b; --n-primary-hover:#ea6a9e; --n-primary-active:#c23e74; --n-primary-soft:#fdecf3; --n-primary-line:#f7c8dd; }

/* 深色模式：底/卡/描边换值，主色保持（暗底上对比度足够） */
:root[data-theme="dark"]{
  --n-text:#e6e9ef; --n-text-2:#a8b0bd; --n-text-3:#7b8493;
  --n-border:#33383f; --n-bg:#1a1d23; --n-card:#23262e;
  --n-primary-soft:#1e2f24; --n-primary-line:#2f4a38;
  --n-blue-soft:#182534; --n-warm-soft:#2b2418; --n-danger-soft:#2e1d1d;
  --n-gray-soft:#282c34; --n-pink-soft:#2c1a22;
  --n-shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.24);
  --n-shadow-lg:0 8px 28px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---------- §1 溢出防线：全局基线 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--n-bg);color:var(--n-text);
  font-family:var(--n-font);font-size:14.5px;line-height:1.6;
  overflow-x:hidden; /* 兜底：任何一处未截断的横向溢出都不撑破整页 */
  display:flex;flex-direction:column;min-height:100vh; /* 页脚贴底：内容不足一屏时 footer 仍落到视口底部 */
}
img,svg,canvas,video{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;max-width:100%}
/* 长串无空格内容（URL/域名/英文长词）允许任意断行，不溢出容器 */
.vd-break{overflow-wrap:anywhere;word-break:break-word}

/* ---------- §2 布局容器 ---------- */
.vd-wrap{width:100%;max-width:var(--n-max);margin:0 auto;padding:0 16px}
.vd-main{padding-top:16px;padding-bottom:8px;flex:1 0 auto;width:100%}
.vd-spacer{flex:1;min-width:0}

/* ---------- §3 顶栏 ---------- */
.vd-header{
  position:sticky;top:0;z-index:40;height:var(--n-head-h);
  background:var(--n-card);border-bottom:1px solid var(--n-border);
}
.vd-header-in{display:flex;align-items:center;gap:12px;height:100%}
.vd-logo{display:flex;align-items:center;gap:9px;flex:none;min-width:0}
.vd-logo-mark{width:28px;height:28px;flex:none;border-radius:var(--n-radius-sm);background:var(--n-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.vd-logo-mark img{width:100%;height:100%;border-radius:var(--n-radius-sm);display:block;object-fit:cover}
.vd-logo-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-search{flex:1;max-width:420px;min-width:0;position:relative;margin:0 auto}
.vd-search input{
  width:100%;height:32px;border:1px solid var(--n-border);background:var(--n-bg);
  border-radius:16px;padding:0 12px 0 32px;font-size:13px;color:var(--n-text);outline:none;
}
.vd-search input:focus{background:var(--n-card);border-color:var(--n-primary);box-shadow:0 0 0 3px rgba(54,179,104,.14)}
.vd-search .vd-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--n-text-3);fill:none;stroke-width:2;pointer-events:none}
.vd-head-right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
/* 顶栏搜索按钮（替代内联搜索框）：点击弹出搜索弹窗 */
.vd-search-toggle{
  display:inline-flex;align-items:center;gap:6px;flex:none;height:30px;padding:0 12px;
  border:1px solid var(--n-border);background:var(--n-bg);color:var(--n-text-2);
  border-radius:var(--n-radius-sm);font-size:13px;cursor:pointer;transition:border-color .15s,color .15s;
}
.vd-search-toggle:hover{border-color:var(--n-primary);color:var(--n-primary)}
.vd-search-toggle .vd-ico{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.vd-search-modal-box{max-width:560px;padding:18px}
/* 弹窗内：热门词行 / 站外引擎行 */
.vd-sm-row{display:flex;align-items:flex-start;gap:10px;margin-top:14px;min-width:0}
.vd-sm-lbl{flex:none;font-size:12.5px;color:var(--n-text-3);line-height:26px}
.vd-sm-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.vd-sm-chips .vd-chip{line-height:18px}
.vd-sm-engine.on{background:var(--n-primary);color:#fff;border-color:var(--n-primary)}
.vd-btn-ghost{
  height:30px;padding:0 12px;border:1px solid var(--n-border);background:transparent;
  border-radius:var(--n-radius-sm);color:var(--n-text-2);font-size:13px;cursor:pointer;
  white-space:nowrap;transition:border-color .15s,color .15s;
}
.vd-btn-ghost:hover{border-color:var(--n-primary);color:var(--n-primary)}
.vd-avatar{width:28px;height:28px;flex:none;border-radius:50%;background:var(--n-blue-soft);color:var(--n-blue);display:grid;place-items:center;font-size:12px;font-weight:600;overflow:hidden}

/* ---------- §4 吸顶分类条 ---------- */
.vd-cats{
  position:sticky;top:var(--n-head-h);z-index:35;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--n-border);
}
:root[data-theme="dark"] .vd-cats{background:rgba(29,32,39,.86)}
.vd-cats-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vd-cats-in::-webkit-scrollbar{display:none}
.vd-cat{
  flex:none;padding:0 14px;height:var(--n-cat-h);display:grid;place-items:center;
  font-size:14px;color:var(--n-text-2);position:relative;white-space:nowrap;transition:color .15s;
}
.vd-cat:hover{color:var(--n-primary)}
.vd-cat.on{color:var(--n-primary);font-weight:600}
.vd-cat.on::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--n-primary);border-radius:2px}

/* ---------- §5 卡片基座 ---------- */
.vd-card{background:var(--n-card);border:1px solid var(--n-border);border-radius:var(--n-radius);box-shadow:var(--n-shadow)}
.vd-card-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--n-border);min-width:0}
.vd-card-title{font-size:15px;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-card-title::before{content:"";display:inline-block;width:3px;height:14px;background:var(--n-primary);border-radius:2px;margin-right:8px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(54,179,104,.18)}
.vd-count{flex:none;font-size:12px;color:var(--n-text-3);background:var(--n-gray-soft);padding:2px 8px;border-radius:10px;white-space:nowrap}
.vd-more{flex:none;font-size:13px;color:var(--n-text-2)}
.vd-more:hover{color:var(--n-primary)}
.vd-card-bd{padding:16px 18px}

/* ---------- §6 公告条 ---------- */
.vd-alert{
  display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:11px 14px;
  background:var(--n-primary-soft);border:1px solid var(--n-primary-line);border-radius:var(--n-radius);
  font-size:13.5px;color:var(--n-primary-active);min-width:0;
}
:root[data-theme="dark"] .vd-alert{color:var(--n-primary-hover)}
.vd-alert .vd-ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.vd-alert-body{min-width:0;overflow-wrap:anywhere;flex:1}
.vd-alert a{text-decoration:underline;text-underline-offset:2px}
/* 多条公告纵向轮播：容器定高显示一条，仅当前条可见，JS 按间隔切换 */
.vd-ann-roll{position:relative;overflow:hidden;height:22px}
.vd-ann-item{margin:0;position:absolute;left:0;right:0;top:0;line-height:22px;height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(100%);transition:transform .45s ease,opacity .45s ease}
.vd-ann-item.out{opacity:0;transform:translateY(-100%)}
.vd-ann-item.in{opacity:0;transform:translateY(100%)}
.vd-ann-item.cur{opacity:1;transform:none}
.vd-ann-item[data-link]{cursor:pointer}
.vd-ann-item[data-link]:hover{text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .vd-ann-item{transition:none}
}

/* ---------- §7 首屏搜索卡（居中大搜索） ---------- */
.vd-hero{padding:32px 24px 28px;margin-top:16px;position:relative;overflow:hidden;text-align:center}
/* 首屏主色晕染：居中柔光渐变，白卡内容不受影响 */
.vd-hero::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:420px;height:320px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(54,179,104,.14),transparent 72%);
  pointer-events:none;
}
:root[data-theme="dark"] .vd-hero::before{background:radial-gradient(closest-side,rgba(54,179,104,.12),transparent 72%)}
.vd-hero>*{position:relative} /* 晕染之下内容置顶 */
.vd-hero h1{margin:0;font-size:24px;letter-spacing:.3px;overflow-wrap:anywhere}
.vd-hero-sub{margin:8px 0 22px;color:var(--n-text-2);font-size:13.5px;overflow-wrap:anywhere}
.vd-hero-form{display:flex;max-width:640px;margin:0 auto}
.vd-hero-form input{
  flex:1;min-width:0;height:46px;border:1px solid var(--n-border);border-right:0;
  border-radius:var(--n-radius) 0 0 var(--n-radius);padding:0 16px;font-size:15px;
  background:var(--n-bg);color:var(--n-text);outline:none;
}
.vd-hero-form input:focus{background:var(--n-card);border-color:var(--n-primary);box-shadow:0 0 0 3px rgba(54,179,104,.14)}
.vd-btn-primary{
  flex:none;height:46px;padding:0 28px;border:0;background:var(--n-primary);color:#fff;
  border-radius:0 var(--n-radius) var(--n-radius) 0;font-size:15px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .15s;
}
.vd-btn-primary:hover{background:var(--n-primary-hover)}
.vd-btn-primary:active{background:var(--n-primary-active)}
.vd-btn-primary[disabled]{opacity:.6;cursor:not-allowed}
.vd-hot{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center;justify-content:flex-start}
/* 搜索页紧凑版：无标题/副标题，仅居中搜索框 */
.vd-hero-sm{padding:22px 24px}
.vd-hero-sm::before{display:none}
.vd-chip{
  font-size:12.5px;padding:3px 11px;border-radius:13px;background:var(--n-gray-soft);
  color:var(--n-text-2);cursor:pointer;border:1px solid transparent;transition:background .15s,color .15s;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vd-chip:hover{background:var(--n-primary-soft);color:var(--n-primary);border-color:var(--n-primary-line)}
.vd-chip.on{background:var(--n-primary);color:#fff;border-color:var(--n-primary)}
.vd-chip.on:hover{background:var(--n-primary-hover);color:#fff}
/* 标签聚合页：热门标签计数角标 */
.vd-tag-n{font-style:normal;font-size:10.5px;margin-left:4px;padding:0 5px;border-radius:8px;background:rgba(54,179,104,.12);color:var(--n-primary)}
.vd-chip.on .vd-tag-n{background:rgba(255,255,255,.22);color:#fff}

/* ---------- §8 站点卡片网格（溢出重点区）---------- */
/* 关键：minmax(0,1fr) —— 只写 1fr 时，长域名/长英文词会把轨道撑破导致整行溢出 */
.vd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px 18px}
.vd-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.vd-grid[data-cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.vd-grid[data-cols="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.vd-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}

.vd-site{
  display:flex;gap:11px;padding:12px;min-width:0;
  border:1px solid transparent;border-radius:var(--n-radius);cursor:pointer;
  transition:box-shadow .18s,transform .18s,border-color .18s,background .18s;
}
.vd-site:hover{border-color:var(--n-primary-line);background:var(--n-card);box-shadow:0 4px 16px rgba(16,24,40,.08);transform:translateY(-1px)}
.vd-site:hover .vd-site-ico{transform:scale(1.06)}
.vd-site-ico{
  width:40px;height:40px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:16px;overflow:hidden;
  transition:transform .18s;
}
.vd-site-ico img{width:100%;height:100%;object-fit:cover;display:block}
.vd-site-body{min-width:0;flex:1} /* min-width:0 是 flex 子项可截断的前提 */
.vd-site-name{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;min-width:0}
.vd-site-name .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-site-desc{
  margin:3px 0 0;font-size:12px;color:var(--n-text-3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.vd-site-url{margin:3px 0 0;font-size:12px;color:var(--n-text-3);font-family:var(--n-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.vd-site-url .vd-lock{flex:none;color:var(--n-primary)}
.vd-site-ft{display:flex;align-items:center;gap:6px;margin-top:6px;min-width:0}
.vd-badge{
  flex:none;font-size:10.5px;font-weight:600;padding:1px 5px;border-radius:3px;
  line-height:15px;font-style:normal;white-space:nowrap;
}
.vd-badge.warm{background:var(--n-warm-soft);color:var(--n-warm)}
.vd-badge.blue{background:var(--n-blue-soft);color:var(--n-blue)}
.vd-badge.pink{background:var(--n-pink-soft);color:var(--n-pink)}
.vd-badge.gray{background:var(--n-gray-soft);color:var(--n-gray)}
.vd-badge.ok{background:var(--n-primary-soft);color:var(--n-primary-active)}
.vd-views{margin-left:auto;flex:none;font-size:11.5px;color:var(--n-text-3);white-space:nowrap;display:flex;align-items:center;gap:3px}
.vd-tag{font-size:11px;padding:1px 7px;border-radius:10px;background:var(--n-gray-soft);color:var(--n-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:84px}

/* 密度三档：compact=仅站名，standard=站名+描述+域名，rich=再额外显示标签/浏览数(vd-site-ft) */
.vd-dense-compact .vd-site-desc,.vd-dense-compact .vd-site-ft,.vd-dense-compact .vd-site-url{display:none}
.vd-dense-compact .vd-site{padding:10px}
.vd-dense-standard .vd-site-ft{display:none}

/* 深色模式：core 模块（nav-module-*，自带浅色内联样式）强制对齐主题令牌。
   模块 <style> 在 body 内输出、晚于本文件，故需 !important 压制 */
:root[data-theme="dark"] .nav-module{background:var(--n-card)!important;border-color:var(--n-border)!important}
:root[data-theme="dark"] .nav-module-title{color:var(--n-text)!important;border-left-color:var(--n-primary)!important}
:root[data-theme="dark"] .nav-module-body{color:var(--n-text-2)!important}
:root[data-theme="dark"] .nav-module-site,
:root[data-theme="dark"] .nav-module-cat-list{color:var(--n-text)!important}
:root[data-theme="dark"] .nav-module-site:hover,
:root[data-theme="dark"] .nav-module-cat-list:hover{background:var(--n-bg)!important;color:var(--n-primary)!important}
:root[data-theme="dark"] .nav-module-site-url{color:var(--n-text-3)!important}
:root[data-theme="dark"] .nav-module-links a{color:var(--n-text-2)!important}
:root[data-theme="dark"] .nav-module-links a:hover{color:var(--n-primary)!important}
:root[data-theme="dark"] .nav-module-nav{border-bottom-color:var(--n-border)!important}
:root[data-theme="dark"] .nav-module .count{color:var(--n-text-3)!important}

/* ---------- §11 详情页 ---------- */
.vd-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--n-text-3);padding:14px 0 0;min-width:0;flex-wrap:wrap}
.vd-crumb a:hover{color:var(--n-primary)}
.vd-crumb .cur{color:var(--n-text-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.vd-detail-hd{padding:20px 18px 14px;display:flex;gap:16px;align-items:flex-start}
.vd-detail-ico{width:60px;height:60px;flex:none;border-radius:var(--n-radius);display:grid;place-items:center;font-size:24px;font-weight:700;overflow:hidden}
.vd-detail-ico img{width:100%;height:100%;object-fit:cover}
.vd-detail-info{flex:1;min-width:0}
.vd-detail-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.vd-detail-name h1{margin:0;font-size:20px;min-width:0;overflow-wrap:anywhere}
.vd-detail-url{margin-top:5px;font-size:13px;font-family:var(--n-mono);color:var(--n-text-2);overflow-wrap:anywhere}
.vd-detail-url a{display:inline-flex;align-items:center;gap:4px}
.vd-detail-url a .vd-lock{flex:none;color:var(--n-primary)}
.vd-detail-url a:hover{color:var(--n-primary)}
.vd-detail-ops{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.vd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;
  border:1px solid var(--n-border);background:var(--n-card);color:var(--n-text-2);
  border-radius:var(--n-radius-sm);font-size:13px;cursor:pointer;white-space:nowrap;transition:.15s;
}
.vd-btn:hover{border-color:var(--n-primary);color:var(--n-primary)}
.vd-btn.ok{background:var(--n-primary);border-color:var(--n-primary);color:#fff}
.vd-btn.ok:hover{background:var(--n-primary-hover);border-color:var(--n-primary-hover);color:#fff}
.vd-btn.danger-soft{background:var(--n-card);border-color:#fbc4c4;color:var(--n-danger)}
.vd-btn.danger-soft:hover{background:var(--n-danger-soft)}
.vd-btn[disabled]{opacity:.6;cursor:not-allowed}
.vd-btn .vd-ico{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* 详情页：主列单列（内 aside 已上移为顶部信息条，右侧仅保留全局侧栏） */
.vd-detail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.vd-detail-main{min-width:0}

/* 详情头部下方信息条：整条浅灰底横贯，KV 网格（权重/分类/时间/浏览/反馈 + 评分同构一格） */
.vd-detail-stats{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0 18px 18px;padding:12px;
  background:var(--n-bg);border:1px solid var(--n-border);border-radius:var(--n-radius)}
.vd-kv-stats{grid-template-columns:repeat(5,minmax(0,1fr));padding:0;gap:8px}
.vd-kv-stats .vd-kv-item,
.vd-kv-rate{background:var(--n-card);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);padding:10px 8px;text-align:center;min-width:0}
.vd-kv-rate{display:grid;place-items:center;gap:2px}
.vd-kv-rate .vd-kv-v{display:flex;align-items:center;justify-content:center;font-size:16px}
.vd-kv-rate .vd-kv-l{font-size:12px;color:var(--n-text-3)}
.vd-kv-rate .vd-stars{gap:2px}

.vd-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 18px 16px}
.vd-kv-item{background:var(--n-bg);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);padding:10px 12px;text-align:center;min-width:0}
.vd-kv-v{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-kv-l{font-size:12px;color:var(--n-text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-kv-item.is-link{cursor:pointer;transition:.15s}
.vd-kv-item.is-link:hover{border-color:var(--n-primary);background:var(--n-primary-soft)}
.vd-kv-item.is-link:hover .vd-kv-v{color:var(--n-primary)}

.vd-rate{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vd-stars{display:flex;gap:3px}
.vd-star{cursor:pointer;font-size:19px;color:var(--n-border);line-height:1;transition:color .12s;background:none;border:0;padding:0}
.vd-star.on{color:var(--n-warm)}
.vd-rate-txt{font-size:13px;color:var(--n-text-2)}
.vd-rate-txt b{font-size:17px;color:var(--n-warm)}

.vd-block{margin-top:16px}
.vd-desc-body{font-size:14px;color:var(--n-text-2);line-height:1.75;overflow-wrap:anywhere}
.vd-tags{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 16px}
.vd-trend{width:100%;height:120px;display:block}

/* ---------- §11.5 文章（article 插件覆写模板）---------- */
.vd-article{display:block;padding:14px 0;border-bottom:1px dashed var(--n-border);color:inherit;text-decoration:none;min-width:0}
.vd-article:first-child{padding-top:6px}
.vd-article:last-child{border-bottom:0}
.vd-article-t{font-size:15.5px;font-weight:600;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color .15s}
.vd-article:hover .vd-article-t{color:var(--n-primary)}
.vd-article-x{margin:6px 0 0;font-size:13px;color:var(--n-text-2);line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.vd-article-m{margin-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--n-text-3);font-family:var(--n-mono);min-width:0}
.vd-article-m .vd-badge{font-family:var(--n-font)}
.vd-article-meta{margin-top:6px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--n-text-3);font-family:var(--n-mono)}
.vd-article-meta .vd-badge{font-family:var(--n-font)}
.vd-article-body{padding:4px 18px 18px;font-size:15px;line-height:1.85;color:var(--n-text);overflow-wrap:anywhere;word-break:break-word}
.vd-article-body img{max-width:100%;height:auto;border-radius:var(--n-radius)}
.vd-article-body h2,.vd-article-body h3{font-size:17px;margin:20px 0 10px;overflow-wrap:anywhere}
.vd-article-body p{margin:0 0 12px}
.vd-article-body pre{background:var(--n-gray-soft);padding:12px;border-radius:var(--n-radius);overflow-x:auto;font-family:var(--n-mono);font-size:13px}
.vd-article-body a{color:var(--n-primary)}
.vd-article-body blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid var(--n-primary-line);background:var(--n-primary-soft);border-radius:0 var(--n-radius-sm) var(--n-radius-sm) 0;color:var(--n-text-2)}
.vd-article-body table{width:100%;border-collapse:collapse}
.vd-article-body table td,.vd-article-body table th{border:1px solid var(--n-border);padding:6px 10px}

/* ---------- §12 分页（核心 renderPagination 输出 .pagination）---------- */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:20px 0 8px;padding:0 12px}
.pagination .page-item{
  min-width:32px;height:32px;padding:0 9px;display:grid;place-items:center;
  border:1px solid var(--n-border);border-radius:var(--n-radius-sm);
  background:var(--n-card);color:var(--n-text-2);font-size:13px;transition:.15s;
}
.pagination .page-item:hover{border-color:var(--n-primary);color:var(--n-primary)}
.pagination .page-item.active{background:var(--n-primary);border-color:var(--n-primary);color:#fff;font-weight:600}
.pagination .page-ellipsis{color:var(--n-text-3);padding:0 2px;align-self:center}

/* ---------- §13 表单（搜索页 / 提交页）---------- */
.vd-form{max-width:760px;margin:16px auto 0;padding:22px 24px}
/* 提交页左右布局：主表单 + 右侧收录规则 */
.vd-submit-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;margin-top:16px;align-items:start}
.vd-submit-main{min-width:0}
.vd-submit-main .vd-form{margin:0;max-width:none}
.vd-submit-side{min-width:0}
.vd-submit-side .vd-card{position:sticky;top:calc(var(--n-head-h) + var(--n-cat-h) + 14px)}
@media (max-width:900px){
  .vd-submit-layout{grid-template-columns:minmax(0,1fr)}
  .vd-submit-side .vd-card{position:static}
}
.vd-field{margin-bottom:16px;min-width:0}
.vd-label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.vd-label .req{color:var(--n-danger)}
.vd-input,.vd-select,.vd-textarea{
  width:100%;border:1px solid var(--n-border);border-radius:var(--n-radius-sm);
  background:var(--n-bg);color:var(--n-text);padding:0 12px;height:38px;font-size:14px;outline:none;transition:.15s;
}
.vd-textarea{height:auto;padding:10px 12px;resize:vertical;line-height:1.6}
.vd-select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa2ad' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.vd-input:focus,.vd-select:focus,.vd-textarea:focus{background:var(--n-card);border-color:var(--n-primary);box-shadow:0 0 0 3px rgba(54,179,104,.14)}
.vd-help{font-size:12px;color:var(--n-text-3);margin-top:5px;overflow-wrap:anywhere}
.vd-form-msg{min-height:0;margin-bottom:12px}

/* ---------- §14 空态 / 错误页 ---------- */
.vd-empty{text-align:center;padding:56px 20px;color:var(--n-text-3)}
.vd-empty .vd-ico{width:44px;height:44px;stroke:var(--n-border);fill:none;stroke-width:1.6;margin-bottom:12px}
.vd-empty-t{font-size:15px;color:var(--n-text-2);margin:0 0 4px;overflow-wrap:anywhere}
.vd-empty-h{font-size:13px;margin:0}
.vd-empty a{color:var(--n-primary)}
.vd-404-code{font-size:76px;font-weight:800;color:var(--n-primary);line-height:1;letter-spacing:2px}

/* ---------- §15 弹窗（详情页反馈）---------- */
.vd-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.vd-modal[hidden]{display:none}
.vd-modal-bd{position:absolute;inset:0;background:rgba(16,24,40,.45)}
.vd-modal-box{position:relative;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow:auto;background:var(--n-card);border-radius:var(--n-radius-lg);box-shadow:var(--n-shadow-lg);display:flex;flex-direction:column}
.vd-modal-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--n-border);flex:none}
.vd-modal-hd h3{margin:0;font-size:15px;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-modal-x{margin-left:auto;flex:none;width:26px;height:26px;border:0;background:transparent;color:var(--n-text-3);font-size:20px;line-height:1;cursor:pointer;border-radius:var(--n-radius-sm)}
.vd-modal-x:hover{background:var(--n-gray-soft);color:var(--n-text)}
.vd-modal-bdy{padding:16px 18px;min-width:0}
.vd-modal-ft{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--n-border);flex:none;flex-wrap:wrap}
.vd-ext-lead{margin:0;font-size:13.5px;color:var(--n-text-2)}
.vd-ext-url{margin:10px 0 0;padding:8px 12px;background:var(--n-gray-soft);border-radius:var(--n-radius-sm);font-size:13px;color:var(--n-text);font-family:var(--n-mono);word-break:break-all;line-height:1.5}
.vd-ext-tip{margin:12px 0 0;font-size:12.5px;color:var(--n-text-3);line-height:1.6}
.vd-radio-group{display:flex;flex-wrap:wrap;gap:8px}
.vd-radio{
  padding:5px 13px;border:1px solid var(--n-border);border-radius:14px;font-size:13px;
  cursor:pointer;color:var(--n-text-2);background:var(--n-bg);transition:.15s;white-space:nowrap;
}
.vd-radio.on{border-color:var(--n-primary);background:var(--n-primary-soft);color:var(--n-primary-active);font-weight:600}

/* ---------- §16 提示条（toast）---------- */
.vd-toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;padding:0 16px}
.vd-toast{
  max-width:min(90vw,420px);padding:9px 16px;border-radius:20px;font-size:13.5px;
  background:var(--n-side-bg);color:#fff;box-shadow:var(--n-shadow-lg);
  white-space:normal;overflow-wrap:anywhere;animation:vd-fade .2s ease;
}
.vd-toast.ok{background:var(--n-primary)}
.vd-toast.err{background:var(--n-danger)}
@keyframes vd-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vd-ico.vd-spin{animation:vd-spin 0.9s linear infinite}
@keyframes vd-spin{to{transform:rotate(360deg)}}

/* ---------- §17 页脚（深色，呼应后台侧栏）---------- */
.vd-footer{margin-top:24px;background:var(--n-side-bg);color:var(--n-side-text);padding:26px 0 20px;font-size:13px}
.vd-footer a:hover{color:var(--n-side-text-hl)}
.vd-f-nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center;min-width:0}
.vd-f-sep{color:#3a3f4a}
.vd-f-links-box{margin:24px auto 0;padding:18px 20px;background:var(--n-card);border:1px solid var(--n-border);border-radius:var(--n-radius);box-shadow:var(--n-shadow);font-size:13px;min-width:0}
.vd-fl-hd{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed var(--n-border)}
.vd-fl-title{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--n-text)}
.vd-fl-dot{width:8px;height:8px;border-radius:50%;background:var(--n-primary);box-shadow:0 0 0 3px var(--n-primary-soft)}
.vd-fl-sub{font-size:12px;color:var(--n-text-3)}
.vd-f-links{display:flex;flex-wrap:wrap;gap:8px 10px;min-width:0}
.vd-f-links .nav-module{background:transparent;border:0;padding:0;margin:0;width:100%}
.vd-f-links .nav-module-title{display:none}
.vd-f-links .nav-module-links{display:flex;flex-wrap:wrap;gap:8px 10px}
.vd-f-links .nav-module-links a{display:inline-flex;align-items:center;color:var(--n-text-2);background:var(--n-gray-soft);padding:4px 12px;border-radius:14px;font-size:12.5px;transition:color .15s,background .15s;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-f-links .nav-module-links a:hover{color:var(--n-primary);background:var(--n-primary-soft)}
.vd-f-copy{margin-top:14px;font-size:12px;color:#7b8493;display:flex;flex-wrap:wrap;gap:4px 12px;min-width:0}
.vd-f-copy span{min-width:0;overflow-wrap:anywhere}
.vd-footer .custom-footer{margin-bottom:14px;overflow-wrap:anywhere}
.vd-footer .custom-footer img{max-width:100%}

/* ---------- §18 插件模块容器（核心输出 .nav-module，主题在此适配）---------- */
.nav-module{margin-top:16px}
.vd-card .nav-module{margin-top:0}
.nav-module .nav-module-body{min-width:0;overflow-wrap:anywhere}
.nav-module a:hover{color:var(--n-primary)}

/* ---------- §19 移动端「回到顶部」---------- */
.vd-top{
  position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:45;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--n-border);
  background:var(--n-card);color:var(--n-text-2);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--n-shadow);opacity:0;pointer-events:none;transition:opacity .2s;
}
.vd-top.show{opacity:1;pointer-events:auto}
.vd-top:hover{border-color:var(--n-primary);color:var(--n-primary)}

/* ---------- §20 安全区 + 响应式 ---------- */
@supports (padding-top:env(safe-area-inset-top)){
  .vd-header{height:calc(var(--n-head-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  .vd-cats{top:calc(var(--n-head-h) + env(safe-area-inset-top))}
}
@media (max-width:1199px){
  .vd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vd-kv{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .vd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vd-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 详情页信息条：KV 收敛为两列 */
  .vd-kv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 移动端顶栏：搜索按钮收成纯图标，节省宽度 */
  .vd-header-in{gap:8px}
  .vd-search-toggle{width:30px;padding:0;justify-content:center}
  .vd-search-toggle span{display:none}
  .vd-head-right{margin-left:0;gap:6px}
}
@media (max-width:600px){
  body{font-size:14px}
  .vd-wrap{padding:0 12px}
  .vd-grid{gap:8px;padding:12px}
  .vd-site{padding:9px;gap:8px}
  .vd-site-ico{width:34px;height:34px;font-size:14px}
  .vd-site-desc{-webkit-line-clamp:1}
  .vd-card-hd{padding:12px 14px;gap:8px}
  .vd-card-bd{padding:14px}
  .vd-hero{padding:20px 16px 18px}
  .vd-hero h1{font-size:19px}
  .vd-hero-form input{height:40px;padding:0 12px;font-size:14px}
  .vd-btn-primary{height:40px;padding:0 18px;font-size:14px}
  .vd-detail-hd{padding:16px 14px;gap:12px}
  .vd-detail-ico{width:48px;height:48px;font-size:20px}
  .vd-detail-name h1{font-size:17px}
  .vd-form{padding:18px 16px}
  .vd-grid[data-cols="5"],.vd-grid[data-cols="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vd-404-code{font-size:56px}
}
@media (max-width:380px){
  .vd-grid,.vd-grid[data-cols="5"],.vd-grid[data-cols="6"]{grid-template-columns:minmax(0,1fr)}
}

/* ---------- §21 无障碍：减少动效 + 焦点可见 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .vd-site:hover{transform:none}
}
:focus-visible{outline:2px solid var(--n-primary);outline-offset:2px;border-radius:var(--n-radius-sm)}
/* 文本选中色：主色 soft，与主题同语言 */
::selection{background:var(--n-primary-soft);color:var(--n-primary-active)}
:root[data-theme="dark"] ::selection{background:rgba(54,179,104,.28);color:var(--n-side-text-hl)}
.vd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- §22 右侧栏（模块化可配置）---------- */
/* 两栏布局：主区 1fr + 侧栏 300px；align-items:start 让 sticky 生效 */
.vd-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.vd-content{min-width:0}
.vd-sidebar{min-width:0;width:300px;align-self:start;position:sticky;top:calc(var(--n-head-h) + var(--n-cat-h) + 14px)}
.vd-sidebar .vd-card{margin-top:0}
.vd-sidebar .vd-card + .vd-card{margin-top:14px}
.vd-sidebar .vd-card-bd{padding:12px 14px}
/* 侧栏内嵌 core 模块：去框融入卡片，隐藏模块自带标题（避免与卡片标题重复） */
.vd-sidebar .nav-module{margin-top:0;background:transparent;border:0;border-radius:0;padding:0}
.vd-sidebar .nav-module .nav-module-title{display:none}
/* 侧栏榜单紧凑横排：站名左、域名右、虚线分隔，主次分明 */
.vd-sidebar .nav-module .nav-module-site{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--n-border);color:var(--n-text);transition:color .15s}
.vd-sidebar .nav-module .nav-module-site:last-child{border-bottom:0}
.vd-sidebar .nav-module .nav-module-site:hover{background:transparent;color:var(--n-primary)}
.vd-sidebar .nav-module .nav-module-site-name{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-sidebar .nav-module .nav-module-site-url{flex:none;font-size:11.5px;color:var(--n-text-3);font-family:var(--n-mono);max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left;display:inline-flex;align-items:center;gap:4px}
.vd-sidebar .nav-module .nav-module-site-url .vd-lock{flex:none;color:var(--n-primary)}
.vd-sidebar .nav-module .nav-module-site:hover .nav-module-site-url{color:var(--n-primary)}
.vd-sidebar .nav-module .nav-module-site,
.vd-sidebar .nav-module-cat-list{font-size:13px}
/* 侧栏榜单 Tab 聚合卡 */
.vd-sbt-nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.vd-sbt-tab{flex:none;padding:4px 10px;font-size:12px;line-height:1.4;color:var(--n-text-2);background:var(--n-bg);
  border:1px solid var(--n-border);border-radius:999px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.vd-sbt-tab:hover{color:var(--n-primary);border-color:var(--n-primary)}
.vd-sbt-tab.on{color:#fff;background:var(--n-primary);border-color:var(--n-primary)}
.vd-sbt-pane .nav-module{margin-top:0;margin-bottom:0;background:transparent;border:0;border-radius:0;padding:0}
/* 分类云 chip */
.vd-cat-cloud{display:flex;flex-wrap:wrap;gap:8px}
.vd-cat-cloud .vd-chip{max-width:100%}
/* 关于本站 */
.vd-about .vd-about-name{font-size:14px;font-weight:700;color:var(--n-text)}
.vd-about p{margin:0 0 8px;font-size:13px;color:var(--n-text-2);line-height:1.7;overflow-wrap:anywhere}
.vd-about p:last-child{margin-bottom:0}
/* 有侧栏时主区卡片收敛为最多 3 列，避免内容被挤窄 */
.vd-layout.has-sidebar .vd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.vd-layout.has-sidebar .vd-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.vd-layout.has-sidebar .vd-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){
  .vd-layout{grid-template-columns:minmax(0,1fr) 280px}
  .vd-sidebar{width:280px}
}
/* ≤900px：侧栏折叠到内容下方（单栏），恢复主区原始列数规则 */
@media (max-width:900px){
  .vd-layout,.vd-layout.has-sidebar{grid-template-columns:minmax(0,1fr);gap:14px}
  .vd-content{order:1}
  .vd-sidebar{order:2;width:auto;position:static;top:auto}
}
@media (prefers-reduced-motion:reduce){
  .vd-sidebar{position:static}
}
/* 有侧栏时与无侧栏断点保持一致：≤600 两列，≤380 单列 */
@media (max-width:600px){
  .vd-layout.has-sidebar .vd-grid,
  .vd-layout.has-sidebar .vd-grid[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:380px){
  .vd-layout.has-sidebar .vd-grid,
  .vd-layout.has-sidebar .vd-grid[data-cols="3"]{grid-template-columns:minmax(0,1fr)}
}