/* ==========================================================================
   Navix 皮肤层 —— 按 nav.iowen.cn 渲染实测值重定义视觉
   --------------------------------------------------------------------------
   本文件只做「视觉重定义」，不改结构语义；排在 main.css 之后加载以覆盖取值。
   所有尺寸/色值均来自对原站的 CDP 实测（getComputedStyle + getBoundingClientRect），
   基准视口 1424×900。改动请同步注释里的实测值，避免后面越改越偏。

   色板        bg #1b1d1f   card #2d2e2f   text #b4b8bf   brand #f1404b
   顶栏        80 高，内条 60 / 圆角 12 / padding 0 10 / blur 22
   Hero        604 高，45° 三色渐变 + 400% 背景 + 68% 黑罩 + 底部 380 渐隐
   搜索        tab 行 800×44 · 输入条 800×50 · 快捷链接行 800×42
   热门条      1200×108，压在 Hero 下沿（距 Hero 底 48）
   三栏        左 140 · 主列自适应 · 右 310，gap 15
   站点卡      213×106（4 列），图标 60 正圆，标签行 34
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root,
html[data-theme="dark"] {
	--nv-primary: #f1404b;
	--nv-accent: #f1404b;
	--nv-grad-from: #8618db;
	--nv-grad-via: #d711ff;
	--nv-grad-to: #460fdd;

	--nv-bg: #1b1d1f;
	--nv-card: #2d2e2f;
	--nv-card-soft: #262829;
	--nv-line: rgba(116, 116, 116, .14);
	--nv-line-strong: rgba(116, 116, 116, .22);
	--nv-text: #b4b8bf;
	--nv-text-2: #dfe2e6;
	--nv-muted: #73757a;

	--nv-radius-xl: 12px;
	--nv-radius-lg: 12px;
	--nv-radius: 12px;
	--nv-radius-sm: 8px;

	--nv-shadow-sm: 0 5px 15px -5px rgba(0, 0, 0, .2);
	--nv-shadow: 0 5px 20px rgba(0, 0, 0, .1);
	--nv-shadow-lg: 0 12px 40px -18px rgba(0, 0, 0, .8);

	/* 皮肤自有变量 */
	--nv-ink: #fff;
	--nv-topbar-bg: rgba(46, 46, 46, .65);
	--nv-blur-bg: rgba(46, 46, 46, .65);
	--nv-input: #24272a;
	--nv-veil: .68;

	--nv-header-h: 80px;
	--nv-container: 1620px;
}

/* 浅色：原站没有浅色主题，这里作为可选扩展（同一套尺寸，换色板） */
html[data-theme="light"] {
	/* 品牌色在两种模式下都是同一颗红，显式复述避免被主样式的 :root 抢回去 */
	--nv-primary: #f1404b;
	--nv-accent: #f1404b;
	--nv-grad-from: #8618db;
	--nv-grad-via: #d711ff;
	--nv-grad-to: #460fdd;

	--nv-bg: #f2f4f7;
	--nv-card: #ffffff;
	--nv-card-soft: #f7f8fa;
	--nv-line: rgba(116, 116, 116, .13);
	--nv-line-strong: rgba(116, 116, 116, .2);
	--nv-text: #484b4f;
	--nv-text-2: #1d2126;
	--nv-muted: #93959a;

	--nv-ink: #1d2126;
	--nv-topbar-bg: rgba(255, 255, 255, .94);
	--nv-blur-bg: rgba(255, 255, 255, .8);
	--nv-input: rgba(242, 244, 247, .9);
	--nv-veil: .72;

	--nv-shadow-sm: 0 5px 15px -5px rgba(0, 0, 0, .08);
	--nv-shadow: 0 5px 20px rgba(0, 0, 0, .06);
	--nv-shadow-lg: 0 16px 44px -24px rgba(16, 20, 40, .35);
}

/* ---------- 2. 基础 ---------- */
body.nv-body {
	padding-top: var(--nv-header-h);
	background: var(--nv-bg);
	color: var(--nv-text);
	font-size: 16px;
	line-height: 1.5;
	font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
	transition: background-color .3s ease, color .3s ease;
}

.nv-container { width: 100%; max-width: var(--nv-container); margin-inline: auto; padding-inline: 10px; }

/* 通用组件按原站口径收紧 */
.nv-btn { height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.nv-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.nv-btn--primary { background: var(--nv-primary); box-shadow: none; }
.nv-btn--primary:hover { background: #e0343f; box-shadow: none; transform: none; }
.nv-btn--ghost { background: transparent; border-color: var(--nv-line-strong); color: var(--nv-text); }
.nv-btn--ghost:hover { color: var(--nv-text-2); border-color: var(--nv-muted); background: rgba(116, 116, 116, .08); }

.nv-iconbtn { width: 32px; height: 32px; border-radius: 8px; color: var(--nv-text); }
.nv-iconbtn:hover { background: rgba(116, 116, 116, .14); color: var(--nv-text-2); }

.nv-chip {
	height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12px;
	background: transparent; color: var(--nv-muted); border-color: transparent;
}
.nv-chip:hover { color: var(--nv-text-2); background: rgba(116, 116, 116, .12); border-color: transparent; }
.nv-chip--sm { height: 24px; padding: 0 8px; font-size: 11.5px; }

.nv-tag {
	height: 19px; padding: 0 5px; border-radius: 4px;
	font-size: 11px; line-height: 1; font-weight: 400;
	background: rgba(241, 64, 75, .1); color: var(--nv-tag-color, var(--nv-primary));
	max-width: 76px; overflow: hidden; white-space: nowrap;
}
.nv-tag--ghost { background: rgba(116, 116, 116, .12); color: var(--nv-muted); }
.nv-tag--ghost:hover { background: rgba(116, 116, 116, .2); color: var(--nv-text-2); }

.nv-termicon { width: 24px; height: 24px; border-radius: 7px; }

/* ---------- 3. 页头：80 外框 + 60 浮条 ---------- */
.nv-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 80;
	height: var(--nv-header-h); padding: 10px;
	background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
	border-bottom: 0; box-shadow: none;
}
.nv-header.is-stuck { border-bottom: 0; box-shadow: none; }

.nv-header__inner {
	height: 60px; gap: 0;
	padding: 0 10px;
	border-radius: var(--nv-radius);
	background: var(--nv-topbar-bg);
	-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}

.nv-brand { gap: 9px; margin-right: 24px; }
.nv-brand__link { gap: 9px; }
.nv-brand__mark {
	width: 36px; height: 36px; border-radius: 0;
	background: none; box-shadow: none; color: var(--nv-primary);
}
.nv-brand__mark svg { width: 32px; height: 32px; filter: drop-shadow(0 4px 10px rgba(241, 64, 75, .45)); }
.nv-brand__text strong { font-size: 17px; font-weight: 700; letter-spacing: .4px; color: var(--nv-text-2); }
.nv-brand__text em { font-size: 11px; color: var(--nv-muted); }

.nv-nav { flex: 0 1 auto; margin-right: 16px; }
.nv-nav__list { gap: 0; }
.nv-nav__list > li > a {
	height: 32px; padding: 0 10px; border-radius: 8px;
	font-size: 15px; font-weight: 400; color: var(--nv-text);
}
.nv-nav__list > li > a:hover { background: rgba(116, 116, 116, .12); color: var(--nv-text-2); }
.nv-nav__list .current-menu-item > a,
.nv-nav__list .current_page_item > a { background: rgba(116, 116, 116, .14); color: var(--nv-text-2); }

.nv-nav__list .sub-menu {
	min-width: 168px; padding: 6px; border-radius: 10px;
	background: var(--nv-card); border-color: var(--nv-line);
	box-shadow: var(--nv-shadow-lg);
}
.nv-nav__list .sub-menu a { font-size: 13.5px; border-radius: 6px; color: var(--nv-text); }
.nv-nav__list .sub-menu a:hover { background: rgba(116, 116, 116, .14); color: var(--nv-text-2); }

.nv-actions { gap: 6px; }
.nv-fav-count { background: var(--nv-primary); }
.nv-submit-btn { margin-left: 6px; height: 32px; padding: 0 12px; font-size: 13px; }

.nv-mobilemenu {
	padding: 12px 14px 16px; border-radius: 0 0 var(--nv-radius) var(--nv-radius);
	background: var(--nv-card); border-bottom: 1px solid var(--nv-line);
}
.nv-mobilemenu__list a { border-radius: 8px; font-size: 15px; }
.nv-mobilemenu__list a:hover { background: rgba(116, 116, 116, .12); color: var(--nv-text-2); }
.nv-mobilemenu__count { background: rgba(241, 64, 75, .14); color: var(--nv-primary); }

.nv-drawer__panel { background: var(--nv-card); }
.nv-favrow { border-color: var(--nv-line); border-radius: 10px; }
.nv-favrow:hover { border-color: rgba(241, 64, 75, .4); background: var(--nv-card-soft); }
.nv-favrow__del:hover { color: var(--nv-primary); background: rgba(241, 64, 75, .12); }

/* ---------- 4. Hero：604 高，压到顶栏之下 ---------- */
.nv-hero {
	position: relative; isolation: isolate;
	height: 604px; min-height: 0;
	margin-top: calc(-1 * var(--nv-header-h));
	padding: 0 0 24px;
	overflow: hidden;
	color: var(--nv-ink);
}
.nv-hero__bg {
	inset: 0; z-index: -3;
	background: linear-gradient(45deg, #8618db 0%, #d711ff 50%, #460fdd 100%);
	background-size: 400% auto; background-position: 0% 50%;
	animation: nv-hero-flow 30s ease-in-out infinite;
	filter: none;
}
@keyframes nv-hero-flow {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 24% 50%; }
}
/* 原站：整体叠一层 68% 黑罩，再用底部 380px 渐隐隐回页面底色 */
.nv-hero__bg::before {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: rgba(0, 0, 0, var(--nv-veil));
}
.nv-hero__bg::after {
	content: ""; position: absolute; top: auto; left: 0; right: 0; bottom: -1px; height: 380px; z-index: 3;
	background: linear-gradient(to top, var(--nv-bg) 0%, transparent 80%);
	mix-blend-mode: normal;
}
.nv-hero__orb, .nv-hero__grid { display: none; }
/* main.css 用 html[data-theme="dark"] .nv-hero__bg 压过亮度，此处按同优先级覆盖回来 */
html[data-theme="dark"] .nv-hero__bg { filter: none; }

.nv-hero__inner {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center;
	padding-top: 172px; text-align: center;
}

/* 首页不显示大标题（原站只有搜索区），但保留 h1 语义给读屏与 SEO */
.nv-hero__badge { display: none; }
.nv-hero[data-context="home"] .nv-hero__title,
.nv-hero[data-context="home"] .nv-hero__sub {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nv-hero__title { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: 0; text-shadow: none; }
.nv-hero__sub { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .88); }

/* ---------- 5. 搜索区：tab 行 44 / 输入条 50 / 快捷行 42 ---------- */
.nv-search { width: min(800px, 100%); margin-top: 0; }

.nv-search__modes {
	justify-content: center; gap: 4px;
	height: 44px; padding: 0; border-radius: 0; background: none;
}
.nv-search__mode {
	position: relative;
	height: 44px; padding: 0 16px; border-radius: 0;
	font-size: 15px; font-weight: 400;
	color: rgba(255, 255, 255, .82);
	background: none;
}
.nv-search__mode:hover { color: #fff; background: none; }
.nv-search__mode.is-active { color: #fff; font-weight: 500; background: none; box-shadow: none; }
.nv-search__mode.is-active::after {
	content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px;
	height: 2px; border-radius: 2px; background: #fff;
}
.nv-search__mode--link { display: inline-flex; align-items: center; }

.nv-search__form {
	display: flex; align-items: center; gap: 0;
	height: 50px; padding: 5px 5px 5px 14px;
	background: var(--nv-input);
	border-radius: var(--nv-radius);
	box-shadow: none;
	border: 1px solid rgba(255, 255, 255, .08);
}
.nv-search__form:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.nv-search__icon { color: var(--nv-muted); padding-left: 0; }
.nv-search__form input[type="search"] { font-size: 15px; color: var(--nv-text-2); }
.nv-search__form input[type="search"]::placeholder { color: #8a8d92; }
.nv-search__submit {
	width: 40px; height: 40px; padding: 0; border-radius: 8px;
	background: var(--nv-primary); color: #fff;
	box-shadow: none; justify-content: center;
}
.nv-search__submit:hover { background: #e0343f; transform: none; box-shadow: none; }
.nv-search__submit-text { display: none; }

.nv-search__hot {
	height: 42px; margin-top: 0;
	display: flex; align-items: center; justify-content: center; gap: 14px;
	flex-wrap: nowrap; overflow: hidden;
}
.nv-search__hot .nv-chip {
	height: 24px; padding: 0 2px; font-size: 12.5px; border-radius: 4px;
	background: none; border: 0;
	color: rgba(255, 255, 255, .82);
	backdrop-filter: none;
}
.nv-search__hot .nv-chip:hover { color: #fff; background: none; text-decoration: underline; }

.nv-suggest {
	top: calc(100% + 8px); padding: 6px; border-radius: 10px;
	background: var(--nv-card); border-color: var(--nv-line);
	box-shadow: var(--nv-shadow-lg);
}
.nv-suggest__item { border-radius: 8px; }
.nv-suggest__item:hover, .nv-suggest__item.is-hover { background: rgba(116, 116, 116, .14); }
.nv-suggest__title { color: var(--nv-text-2); }

/* ---------- 6. 热门条：压 Hero 下沿 ---------- */
.nv-hotbar {
	position: relative; z-index: 3;
	width: min(1200px, calc(100% - 40px));
	margin: -156px auto 0;
	padding: 10px 16px 12px;
	background: var(--nv-blur-bg);
	border-radius: var(--nv-radius);
	-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
	box-shadow: var(--nv-shadow-sm);
}
.nv-hotbar__head { display: flex; align-items: center; justify-content: space-between; height: 24px; margin-bottom: 6px; }
.nv-hotbar__title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--nv-text); }
.nv-hotbar__title .nv-block__flame { color: var(--nv-primary); }
.nv-hotbar__cta {
	display: inline-flex; align-items: center; gap: 4px;
	height: 22px; padding: 0 8px; border-radius: 5px;
	font-size: 11.5px; color: #e8a33c;
	border: 1px solid rgba(232, 163, 60, .55);
	background: rgba(232, 163, 60, .08);
}
.nv-hotbar__cta:hover { color: #ffc46b; border-color: rgba(255, 196, 107, .8); }

/* 条内 2 行 × 3 列，行高 26 才会落在原站 108 的总高里 */
.nv-hotbar .nv-hotlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
.nv-hotbar .nv-mini { height: 26px; padding: 0 6px; gap: 7px; border-radius: 6px; }
.nv-hotbar .nv-mini:hover { background: rgba(116, 116, 116, .14); transform: none; }
.nv-hotbar .nv-mini__title { font-size: 12px; font-weight: 400; color: var(--nv-text); }
.nv-hotbar .nv-mini__desc { display: none; }

/* ---------- 7. 布局骨架：140 / 1fr / 310 ---------- */
.nv-shell {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr) 310px;
	grid-template-rows: auto 1fr;
	column-gap: 15px; row-gap: 0;
	align-items: start;
	margin-top: 72px; padding-bottom: 48px;
}
.nv-shell--noside { grid-template-columns: 140px minmax(0, 1fr); }
.nv-shell--norail { grid-template-columns: minmax(0, 1fr) 310px; }
.nv-shell--norail.nv-shell--noside { grid-template-columns: minmax(0, 1fr); }

.nv-infobar { grid-column: 2; grid-row: 1; margin-bottom: 16px; }
.nv-rail { grid-column: 1; grid-row: 1 / 3; }
.nv-main { grid-column: 2; grid-row: 2; gap: 16px; }

/* 信息条：原站此处是一条贴边的细横条（时区行），这里压成同等体量 */
.nv-infobar {
	display: flex; align-items: center; gap: 8px;
	height: 28px; padding: 0; margin-bottom: 10px;
	border-radius: 0; border: 0; background: none;
	box-shadow: none; backdrop-filter: none;
	font-size: 12px; color: var(--nv-muted);
}
.nv-infobar__dot { width: 6px; height: 6px; background: var(--nv-primary); box-shadow: 0 0 0 3px rgba(241, 64, 75, .16); }
.nv-infobar strong { font-weight: 500; color: var(--nv-text); }
.nv-infobar__sep { color: var(--nv-line-strong); }
.nv-infobar__right { color: var(--nv-muted); }

/* ---------- 8. 分类栏 ---------- */
.nv-rail {
	position: sticky; top: 90px;
	height: calc(100vh - 133px); max-height: 767px;
	padding: 10px; gap: 1px;
	background: var(--nv-blur-bg);
	border-radius: var(--nv-radius);
	-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
	box-shadow: var(--nv-shadow-sm);
	overflow: auto; scrollbar-width: none;
}
.nv-rail::-webkit-scrollbar { display: none; }
.nv-rail__item { height: 39px; padding: 0 10px; gap: 9px; border-radius: 7px; font-size: 13px; font-weight: 400; color: var(--nv-text); }
.nv-rail__item:hover { background: rgba(116, 116, 116, .14); color: var(--nv-text-2); }
.nv-rail__item.is-active {
	background: rgba(241, 64, 75, .12);
	color: var(--nv-primary);
	font-weight: 500;
}
.nv-rail__item.is-active::before {
	content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
	width: 2px; border-radius: 2px; background: var(--nv-primary);
}
.nv-rail__icon { width: 15px; opacity: .72; }
.nv-rail__item.is-active .nv-rail__icon { opacity: 1; }
.nv-rail__count { font-size: 11px; color: var(--nv-muted); }
.nv-rail__all { justify-content: flex-start; padding-left: 10px; margin-top: 4px; border-top: 0; font-size: 12px; }
.nv-rail__all:hover { color: var(--nv-text-2); }

/* ---------- 9. 站点卡：横排 213×106 ---------- */
.nv-grid { gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nv-card {
	padding: 0; gap: 0;
	background: var(--nv-card);
	border: 0; border-radius: var(--nv-radius);
	box-shadow: inset 0 0 25px rgba(116, 116, 116, .1);
	overflow: hidden;
}
.nv-card:hover {
	transform: translateY(-2px);
	border-color: transparent;
	box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6), inset 0 0 25px rgba(116, 116, 116, .1);
}
.nv-card__link {
	flex-direction: row; align-items: center; gap: 8px;
	height: 72px; padding: 10px 10px 0;
}
.nv-card__icon { align-self: auto; }
.nv-card__body { justify-content: center; gap: 2px; padding-bottom: 2px; }
.nv-card__title {
	font-size: 14px; font-weight: 500; line-height: 21px;
	letter-spacing: 0; padding-right: 0; color: var(--nv-text-2);
}
.nv-card__desc {
	font-size: 12px; line-height: 18px; color: var(--nv-muted);
	-webkit-line-clamp: 1; line-clamp: 1;
	min-height: 18px;
}
.nv-card__go {
	position: absolute; top: auto; right: 8px; bottom: 8px;
	width: 18px; height: 18px; border-radius: 5px;
	color: var(--nv-muted); background: transparent;
	opacity: .75; transform: none;
}
.nv-card:hover .nv-card__go { opacity: 1; color: var(--nv-primary); background: rgba(241, 64, 75, .12); }

.nv-card__foot { height: 34px; padding: 5px 10px 10px; margin-top: 0; gap: 3px; }
.nv-card__tags { gap: 3px; overflow: hidden; }
.nv-card__tags .nv-tag { height: 19px; font-size: 11px; padding: 0 5px; }
.nv-card__stat { display: none; }

/* 站点图标：白底圆形（原站口径），深色页面上作为高对比的视觉锚点 */
.nv-siteicon {
	width: 60px; height: 60px; border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 3px 10px -4px rgba(0, 0, 0, .45);
}
.nv-siteicon__letter { font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--nv-icon-color, var(--nv-primary)); opacity: 1; }
.nv-siteicon__img { width: 62%; height: 62%; }
.nv-siteicon--sm { width: 14px; height: 14px; border-radius: 50%; box-shadow: none; background: var(--nv-icon-color, var(--nv-primary)); }
.nv-siteicon--sm .nv-siteicon__letter { display: none; }
.nv-siteicon--sm .nv-siteicon__img { display: none; }
.nv-siteicon--lg { width: 72px; height: 72px; border-radius: 50%; }
.nv-siteicon--lg .nv-siteicon__letter { font-size: 26px; }
/* 分类图标：原站只用纯色描边图标，不带色块底 */
.nv-termicon { background: none; border-radius: 0; }

/* ---------- 10. 区块（内容卡） ---------- */
.nv-block {
	padding: 0 0 12px;
	background: var(--nv-card);
	border-radius: var(--nv-radius);
	box-shadow: var(--nv-shadow-sm);
	overflow: hidden;
}
.nv-block__head {
	display: flex; align-items: center; gap: 8px;
	height: 44px; padding: 0 14px; margin-bottom: 0;
	border-bottom: 1px solid var(--nv-line);
}
.nv-block__title { font-size: 15px; font-weight: 500; color: var(--nv-text-2); gap: 6px; }
.nv-block__count { font-size: 11px; color: var(--nv-muted); padding: 0 5px; height: 17px; border-radius: 4px; }
.nv-block__chips { gap: 2px; margin-left: auto; }
.nv-block__more { font-size: 12px; color: var(--nv-muted); margin-left: auto; gap: 2px; }
.nv-block__more:hover { color: var(--nv-primary); background: none; }
.nv-block .nv-grid { padding: 12px 12px 0; }

/* 分类块内的小分类 chips 与「更多」并排时留白 */
.nv-block__chips + .nv-block__more { margin-left: 8px; }

/* 编辑推荐横幅（第 3 个分类后插入）压成同色系卡片，避免破坏节奏 */
.nv-pick { background: var(--nv-card); border-radius: var(--nv-radius); padding: 12px 14px 14px; box-shadow: var(--nv-shadow-sm); }
.nv-pick__lead, .nv-pick__item { background: var(--nv-card-soft); border: 0; border-radius: 10px; }
.nv-pick__name { font-size: 17px; color: var(--nv-text-2); }
.nv-pick__cta { color: var(--nv-primary); }

.nv-empty { background: var(--nv-card); border-radius: var(--nv-radius); padding: 40px 24px; }
.nv-loadmore .nv-btn { background: var(--nv-card); border: 1px solid var(--nv-line); color: var(--nv-text); }
.nv-loadmore .nv-btn:hover { color: var(--nv-primary); border-color: rgba(241, 64, 75, .4); }
.nv-pagination .page-numbers { border-color: var(--nv-line); border-radius: 8px; }
.nv-pagination .page-numbers.current { background: var(--nv-primary); border-color: var(--nv-primary); }

/* ---------- 11. 侧栏 310 ---------- */
.nv-sidebar { grid-column: 3; grid-row: 1 / 3; gap: 16px; }
.nv-widget {
	padding: 0 0 12px;
	background: var(--nv-card);
	border: 0; border-radius: var(--nv-radius);
	box-shadow: var(--nv-shadow-sm);
	overflow: hidden;
}
.nv-widget__head { height: 44px; padding: 0 14px; margin-bottom: 0; border-bottom: 1px solid var(--nv-line); }
.nv-widget__title { font-size: 15px; font-weight: 500; color: var(--nv-text-2); }
.nv-widget__title svg { color: var(--nv-primary); opacity: 1; }
.nv-widget__more { font-size: 12px; color: var(--nv-muted); }
.nv-widget > :not(.nv-widget__head) { margin-left: 14px; margin-right: 14px; }

.nv-promo {
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 9px),
		linear-gradient(120deg, #6d28d9 0%, #a21caf 55%, #4c1d95 100%);
	border-radius: var(--nv-radius);
	padding: 14px 16px 12px;
}
.nv-promo__glow { display: none; }
.nv-promo h2 { font-size: 15px; font-weight: 600; }
.nv-promo p { font-size: 11.5px; color: rgba(255, 255, 255, .78); }

.nv-statcard { padding: 12px 14px 14px; }
.nv-statcard__hero { border: 1px solid rgba(241, 64, 75, .45); background: rgba(241, 64, 75, .06); border-radius: 10px; }
.nv-statcard__hero strong { color: var(--nv-primary); }
.nv-statcard__cell { border-radius: 9px; border: 1px solid var(--nv-line-strong); }

.nv-rank { gap: 1px; }
.nv-rank__item { height: 32px; }
.nv-rank__no { width: 18px; height: 18px; border-radius: 4px; background: transparent; color: var(--nv-muted); border: 0; }
.nv-rank__no.is-top { background: var(--nv-primary); color: #fff; }
.nv-rank__link { padding: 0 4px; border-radius: 6px; height: 32px; }
.nv-rank__link:hover { background: rgba(116, 116, 116, .12); }

/* ---------- 12. 页脚 ---------- */
.nv-footer { background: var(--nv-bg); color: var(--nv-muted); margin-top: 24px; border-top: 1px solid var(--nv-line); }
.nv-footer__grid { grid-template-columns: 1.25fr 1fr 1fr 1.15fr; gap: 32px; }
.nv-footer .nv-brand__text strong { color: var(--nv-text-2); }
.nv-footer h3 { font-size: 13.5px; font-weight: 500; color: var(--nv-text-2); margin-bottom: 12px; }
.nv-footer__about { font-size: 12.5px; line-height: 1.75; color: var(--nv-muted); }
.nv-footer__col a { font-size: 13px; color: var(--nv-muted); }
.nv-footer__col a:hover { color: var(--nv-text-2); }
.nv-footer__col--cta p { font-size: 12.5px; color: var(--nv-muted); }
.nv-footer__col--cta .nv-btn--light { background: var(--nv-card); color: var(--nv-text-2); box-shadow: inset 0 0 0 1px var(--nv-line-strong); }
.nv-footer__col--cta .nv-btn--light:hover { background: var(--nv-card-soft); color: #fff; }
.nv-footer__stats { font-size: 12px; color: var(--nv-muted); }
.nv-footer__stats strong { color: var(--nv-text); font-size: 13px; }
.nv-footer__friends, .nv-footer__bottom { border-top-color: var(--nv-line); }
.nv-footer__legal a { color: var(--nv-muted); }
.nv-footer__legal a:hover { color: var(--nv-text-2); }
.nv-totop { border-radius: 50%; background: var(--nv-card); color: var(--nv-muted); box-shadow: var(--nv-shadow-sm); }
.nv-totop:hover { color: var(--nv-primary); }

/* ---------- 13. 内页 / 详情页的配色跟随 ---------- */
.nv-detail { grid-template-columns: minmax(0, 1fr) 310px; gap: 15px; max-width: 1620px; }
.nv-detail-wrap { margin-top: 0; padding-top: 14px; padding-bottom: 48px; }
.nv-detail__main,
.nv-detail__side > * { background: var(--nv-card); border-radius: var(--nv-radius); box-shadow: var(--nv-shadow-sm); }
.nv-detail__title { font-size: 22px; font-weight: 600; letter-spacing: 0; color: var(--nv-text-2); }
.nv-detail__desc { color: var(--nv-text); }
.nv-shot__placeholder { background: rgba(116, 116, 116, .1); border-color: var(--nv-line-strong); }
.nv-shot__frame { background: rgba(116, 116, 116, .06); border-color: var(--nv-line); }
.nv-panel { background: var(--nv-card); border-radius: var(--nv-radius); box-shadow: var(--nv-shadow-sm); }
.nv-panel__bar { border-bottom: 1px solid var(--nv-line); }
.nv-sort { background: rgba(116, 116, 116, .1); border-radius: 8px; }
.nv-sort__item.is-active { background: var(--nv-card); color: var(--nv-text-2); box-shadow: none; }
.nv-subcats__item.is-active { background: rgba(241, 64, 75, .12); color: var(--nv-primary); }
.nv-subcats__item:hover { background: rgba(116, 116, 116, .12); color: var(--nv-text-2); }

/* ---------- 14. 深色优先级修正 ----------
   main.css 的深色块用 html[data-theme="dark"] 前缀（特异度 0,2,1），
   普通类选择器（0,1,0）压不过它，因此凡是被深色块点名的组件都要在此复述一遍。 */
html[data-theme="dark"] .nv-siteicon {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 3px 10px -4px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .nv-promo {
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 9px),
		linear-gradient(120deg, #6d28d9 0%, #a21caf 55%, #4c1d95 100%);
	box-shadow: none;
}
html[data-theme="dark"] .nv-infobar {
	background: none; border-color: transparent; box-shadow: none;
}
html[data-theme="dark"] .nv-infobar strong { color: var(--nv-text); }
html[data-theme="dark"] .nv-statcard__hero,
html[data-theme="dark"] .nv-statcard__cell {
	background: none; border: 1px solid var(--nv-line-strong);
}
html[data-theme="dark"] .nv-statcard__hero { border-color: rgba(241, 64, 75, .45); background: rgba(241, 64, 75, .06); }
html[data-theme="dark"] .nv-statcard__hero strong { color: var(--nv-primary); }
html[data-theme="dark"] .nv-pick {
	background: var(--nv-card);
	border: 0;
	box-shadow: var(--nv-shadow-sm);
}
html[data-theme="dark"] .nv-pick__lead,
html[data-theme="dark"] .nv-pick__item {
	background: var(--nv-card-soft);
	border: 0;
}
html[data-theme="dark"] .nv-footer { background: var(--nv-bg); color: var(--nv-muted); }
html[data-theme="dark"] .nv-sort__item:hover { background: rgba(116, 116, 116, .14); color: var(--nv-text-2); }
html[data-theme="dark"] .nv-sort__item.is-active { background: var(--nv-card); color: var(--nv-text-2); box-shadow: none; }
html[data-theme="dark"] .nv-shot__placeholder { background: rgba(116, 116, 116, .1); }
html[data-theme="dark"] .nv-shot__frame { background: rgba(116, 116, 116, .06); border-color: var(--nv-line); }

/* ---------- 15. 响应式 ---------- */
@media (max-width: 1400px) {
	.nv-hotbar { width: calc(100% - 40px); }
}

@media (max-width: 1180px) {
	.nv-shell,
	.nv-shell--noside,
	.nv-shell--norail { grid-template-columns: 1fr; }
	.nv-infobar, .nv-main, .nv-sidebar, .nv-rail { grid-column: 1; grid-row: auto; }
	.nv-rail {
		position: static; height: auto; max-height: none;
		flex-direction: row; flex-wrap: nowrap; gap: 2px;
		padding: 8px; overflow-x: auto;
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
	}
	.nv-rail__item { flex: none; white-space: nowrap; height: 32px; font-size: 12.5px; }
	.nv-rail__item.is-active::before { display: none; }
	.nv-rail__all { display: none; }
	.nv-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.nv-nav { display: none; }
	.nv-nav-toggle { display: inline-grid; }
	.nv-hero { height: auto; padding-bottom: 120px; }
	.nv-hero__inner { padding-top: 92px; }
	.nv-hotbar { margin-top: -84px; }
	.nv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.nv-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	:root { --nv-header-h: 64px; }
	.nv-header { padding: 6px; }
	.nv-header__inner { height: 52px; padding: 0 8px; }
	.nv-brand { margin-right: 8px; }
	.nv-brand__text em { display: none; }
	.nv-submit-btn span { display: none; }
	.nv-hero { padding-bottom: 96px; }
	.nv-hero__inner { padding-top: 72px; }
	.nv-search__modes { overflow-x: auto; justify-content: flex-start; padding: 0 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); }
	.nv-search__modes::-webkit-scrollbar { display: none; }
	.nv-search__mode { padding: 0 12px; font-size: 14px; }
	.nv-search__hot { gap: 10px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
	.nv-hotbar { width: calc(100% - 24px); margin-top: -72px; padding: 8px 12px 10px; }
	.nv-hotlist { grid-template-columns: 1fr; }
	.nv-grid { grid-template-columns: 1fr !important; }
}