/*
Theme Name: NewsPress
Theme URI: https://example.com/themes/newspress
Author: NewsPress Studio
Author URI: https://example.com
Description: NewsPress 是一款面向自媒体与资讯站的现代化 WordPress 杂志主题。内置可视化首页模块布局、主题设置面板、文章与视频模板、SEO 与性能优化选项，安装即可搭建专业的内容站点。默认使用经典编辑器（TinyMCE），支持中文站的 ICP 与公安备案展示（内置 / 自定义图标）、页脚频道导航菜单、手机底部导航栏。
Version: 1.8.31
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newspress
Domain Path: /languages
Tags: news, blog, magazine, custom-menu, custom-logo, featured-images, footer-widgets, translation-ready, responsive-layout, two-columns, custom-colors, threaded-comments
Requires at least: 6.1
Tested up to: 6.8
Requires PHP: 7.4
Stable tag: 1.8.29
*/

/* ==========================================================================
   0. 设计令牌
   ========================================================================== */
:root {
  --np-primary: #2271b1;
  --np-primary-dark: #135e96;
  --np-primary-soft: rgba(34, 113, 177, 0.1);
  --np-accent: #d63638;
  --np-text: #1f2328;
  --np-text-2: #4a5058;
  --np-muted: #7a838f;
  --np-line: #e6e9ee;
  --np-bg: #ffffff;
  --np-bg-soft: #f6f8fa;
  --np-bg-deep: #0f1419;
  --np-radius: 8px;
  --np-radius-sm: 5px;
  --np-container: 1200px;
  --np-sidebar: 320px;
  --np-gap: 24px;
  --np-header-h: 64px;
  --np-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);
  --np-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 暗色模式令牌（由主题设置切换 body.np-dark） */
body.np-dark {
  --np-primary: #4f9ce8;
  --np-primary-soft: rgba(79, 156, 232, 0.16);
  --np-text: #e8eaed;
  --np-text-2: #b9c0c9;
  --np-muted: #8b939e;
  --np-line: #262c33;
  --np-bg: #14181d;
  --np-bg-soft: #1b2127;
  --np-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   1. 基础重置
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--np-bg);
  color: var(--np-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background var(--np-transition), color var(--np-transition);
}

body.np-dark {
  background: var(--np-bg);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--np-transition);
}

a:hover {
  color: var(--np-primary);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 12px;
  line-height: 1.35;
  font-weight: 700;
  color: inherit;
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p {
  margin: 0 0 14px;
}

ul, ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

blockquote {
  margin: 20px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--np-primary);
  background: var(--np-bg-soft);
  color: var(--np-text-2);
  border-radius: 0 var(--np-radius-sm) var(--np-radius-sm) 0;
}

code, pre, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

pre {
  background: var(--np-bg-soft);
  padding: 14px 16px;
  border-radius: var(--np-radius-sm);
  overflow-x: auto;
  border: 1px solid var(--np-line);
}

code {
  background: var(--np-bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

th, td {
  border: 1px solid var(--np-line);
  padding: 8px 12px;
  text-align: left;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  clip: auto;
  padding: 8px 14px;
  background: var(--np-primary);
  color: #fff;
  z-index: 100;
}

/* ==========================================================================
   2. 布局骨架
   ========================================================================== */
.np-container {
  width: 100%;
  max-width: var(--np-container);
  margin: 0 auto;
  padding: 0 20px;
}

.np-container--narrow {
  max-width: 820px;
}

.np-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.np-main {
  flex: 1 0 auto;
  padding: var(--np-gap) 0 48px;
}

.np-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--np-sidebar);
  gap: var(--np-gap);
  align-items: start;
}

.np-layout--left {
  grid-template-columns: var(--np-sidebar) minmax(0, 1fr);
}

.np-layout--left .np-content { order: 2; }
.np-layout--left .np-sidebar-col { order: 1; }

.np-layout--none {
  grid-template-columns: minmax(0, 1fr);
}

.np-layout--none .np-sidebar-col {
  display: none;
}

/* ==========================================================================
   3. 顶部导航
   ========================================================================== */
.np-header {
  position: relative;
  z-index: 60;
  background: var(--np-bg);
  border-bottom: 1px solid var(--np-line);
}

.np-header.is-sticky {
  position: sticky;
  top: 0;
  backdrop-filter: saturate(180%) blur(10px);
  background: color-mix(in srgb, var(--np-bg) 88%, transparent);
}

/* 手机上下滑时头部滑走 / 滑回来（JS 给 body 头部的兄弟节点加 is-hidden）。
 * 只动 transform，不碰 top，避免重排；阴影和搜索面板一起跟着平移，
 * 否则收起时会在屏幕顶端留一条边。 */
@media (max-width: 960px) {
  /* 「滚动时自动收起顶部导航」只有在头部吸顶时才有意义：
     没开「固定头部」时 header 跟着文档流一起滚出视口，
     translateY(-100%) 的位移根本看不出来，功能形同失效。
     所以开了自动收起的手机端无条件吸顶。 */
  .np-header--autohide {
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--np-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }

  .np-header--autohide.is-sticky {
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }

  .np-header.is-hidden {
    transform: translateY(-100%);
  }

  /* 抽屉打开时头部必须原位，不然关掉抽屉会看到它从上面掉下来 */
  body.np-drawer-on .np-header {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-header.is-sticky,
  .np-header--autohide,
  .np-mnav--autohide,
  .np-fab {
    transition: none;
  }
}

.np-header__inner {
  display: flex;
  align-items: center;
  gap: var(--np-gap);
  height: var(--np-header-h);
}

.np-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.np-brand__logo {
  max-height: 36px;
  width: auto;
}

.np-brand__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.np-brand__name em {
  font-style: normal;
  color: var(--np-primary);
}

.np-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.np-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.np-nav li {
  position: relative;
}

.np-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--np-radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--np-text-2);
  white-space: nowrap;
}

.np-nav a:hover,
.np-nav .current-menu-item > a,
.np-nav .current-menu-ancestor > a {
  color: var(--np-primary);
  background: var(--np-primary-soft);
}

/* 二级菜单 */
.np-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 168px;
  background: var(--np-bg);
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  box-shadow: var(--np-shadow);
  padding: 6px;
  flex-direction: column;
  gap: 0;
}

.np-nav ul li:hover > ul {
  display: flex;
}

.np-nav ul ul a {
  font-size: 14px;
  padding: 7px 10px;
}

.np-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.np-search-toggle,
.np-dark-toggle,
.np-translate-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: transparent;
  color: var(--np-text-2);
  cursor: pointer;
  transition: var(--np-transition);
}

.np-search-toggle:hover,
.np-dark-toggle:hover,
.np-translate-toggle:hover {
  color: var(--np-primary);
  border-color: var(--np-primary);
}

.np-search-toggle svg,
.np-dark-toggle svg,
.np-translate-toggle svg {
  width: 16px;
  height: 16px;
}

/* --- 网页翻译（translate.js）：头部小图标 + 下拉选语种 --- */
.np-translate-wrap {
  position: relative;
  flex: none;
}

.np-translate-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  display: none;
  width: 184px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  box-shadow: var(--np-shadow);
  overscroll-behavior: contain;
}

.np-translate-menu.is-open {
  display: block;
}

.np-translate-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--np-radius-sm);
  color: var(--np-text-2);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.np-translate-menu__item em {
  flex: none;
  font-style: normal;
  font-size: 11px;
  color: var(--np-muted);
}

.np-translate-menu__item:hover {
  background: var(--np-bg-soft);
  color: var(--np-text);
}

.np-translate-menu__item.is-active {
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.np-translate-menu__item.is-active em {
  color: var(--np-primary);
}

.np-translate-toggle[aria-expanded="true"] {
  color: var(--np-primary);
  border-color: var(--np-primary);
}

/* 首次加载 translate.js 时图标呼吸，避免点了没反馈 */
.np-translate-toggle.is-loading svg,
.np-drawer__translate.is-loading svg {
  animation: np-translate-pulse 1s ease-in-out infinite;
}

@keyframes np-translate-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .np-translate-toggle.is-loading svg,
  .np-drawer__translate.is-loading svg {
    animation: none;
  }
}

/* --- 语言切换 --- */
.np-lang {
  position: relative;
  flex: none;
}

.np-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: transparent;
  color: var(--np-text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--np-transition);
}

.np-lang__btn:hover {
  color: var(--np-primary);
  border-color: var(--np-primary);
}

.np-lang__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 70;
  min-width: 132px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  box-shadow: var(--np-shadow);
  display: none;
}

.np-lang.is-open .np-lang__list {
  display: block;
}

.np-lang__list a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--np-text-2);
}

.np-lang__list a:hover,
.np-lang__list a.is-active {
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.np-user-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  color: var(--np-text-2);
  overflow: hidden;
  transition: var(--np-transition);
}

.np-user-toggle:hover {
  color: var(--np-primary);
  border-color: var(--np-primary);
}

.np-user-toggle svg {
  width: 16px;
  height: 16px;
}

.np-user-toggle__avatar {
  width: 100%;
  height: 100%;
  display: block;
}

.np-header__search {
  display: none;
  border-top: 1px solid var(--np-line);
  padding: 12px 0;
  background: var(--np-bg);
}

.np-header__search.is-open {
  display: block;
}

.np-search-form {
  display: flex;
  gap: 8px;
}

.np-search-form input[type='search'],
.np-search-form .np-field {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  /* search 类型输入框在部分浏览器里会被内容盒压矮，用 min-height 锁死与按钮同高。 */
  height: 38px;
  min-height: 38px;
  line-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.np-search-form input:focus {
  border-color: var(--np-primary);
}

.np-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  white-space: nowrap;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--np-primary);
  border-radius: var(--np-radius-sm);
  background: var(--np-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--np-transition);
}

.np-btn:hover {
  background: var(--np-primary-dark);
  border-color: var(--np-primary-dark);
  color: #fff;
}

.np-btn--ghost {
  background: transparent;
  color: var(--np-primary);
}

.np-btn--ghost:hover {
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.np-menu-toggle {
  display: none;
}

/* 抽屉里的额外块在桌面上不存在，统一隐藏；手机断点里再逐块 display 回来。
 * 必须限定桌面宽度并加 .np-nav 前缀：会员横幅 / 语言胶囊本身是 <a>，
 * 会被下面 .np-nav a{display:block}（特异性更高）反过来盖住，导致桌面导航里
 * 露出一条「开通会员」。放进 min-width 媒体后手机端这条规则根本不参与层叠。 */
@media (min-width: 961px) {
  .np-nav .np-drawer__top,
  .np-nav .np-drawer__langs,
  .np-nav .np-drawer__vipbar,
  .np-nav .np-drawer__account,
  .np-nav .np-translate-menu--inline,
  .np-drawer-mask {
    display: none;
  }
}

/* ==========================================================================
   4. 首页模块
   ========================================================================== */
.np-module {
  margin-bottom: 36px;
}

.np-module__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--np-line);
}

.np-module__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.np-module__title::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--np-primary);
}

.np-module__more {
  font-size: 13px;
  color: var(--np-muted);
}

.np-module__more:hover {
  color: var(--np-primary);
}

/* --- 轮播 --- */
.np-slider {
  position: relative;
  border-radius: var(--np-radius);
  overflow: hidden;
  background: var(--np-bg-deep);
  box-shadow: var(--np-shadow);
}

.np-slider__track {
  display: flex;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.np-slider__slide {
  flex: 0 0 100%;
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}

.np-slider__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.np-slider__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 12, 18, 0.86) 0%, rgba(8, 12, 18, 0.15) 55%, rgba(8, 12, 18, 0) 100%);
}

.np-slider__caption {
  position: relative;
  z-index: 2;
  padding: 28px 32px;
  color: #fff;
  max-width: 720px;
}

.np-slider__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--np-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.np-slider__caption h2 {
  margin: 0 0 8px;
  font-size: 26px;
  color: #fff;
}

.np-slider__caption p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-slider__dots {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  gap: 7px;
}

.np-slider__dot {
  width: 8px;
  height: 8px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: var(--np-transition);
}

.np-slider__dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: #fff;
}

/* --- 公告 --- */
.np-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--np-line);
  border-left: 3px solid var(--np-accent);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
  font-size: 14px;
}

.np-notice__icon {
  flex: none;
  color: var(--np-accent);
  font-weight: 700;
}

/* 跑马灯：视口截断，轨道滚动两份同样的文本，无缝循环 */
.np-notice__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* 只在右缘做淡出，左侧保留文字清晰（遮罩压左缘会把首字母切一半）。 */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent);
}

.np-notice__track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

.np-notice__text {
  flex: none;
  padding-right: 64px;
  color: var(--np-text-2);
}

.np-notice--scroll .np-notice__track {
  animation: np-notice-marquee 18s linear infinite;
}

@keyframes np-notice-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 窄屏文字多、滚动距离长，放慢速度免得闪得眼花 */
@media (max-width: 640px) {
  .np-notice {
    padding: 9px 12px;
    font-size: 13px;
  }
  .np-notice--scroll .np-notice__track {
    animation-duration: 26s;
  }
  .np-notice__text {
    padding-right: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-notice--scroll .np-notice__track {
    animation: none;
  }
}

.np-notice__link {
  flex: none;
  color: var(--np-primary);
  font-weight: 600;
  font-size: 13px;
}

/* --- 分类导航 --- */
.np-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.np-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg);
  font-size: 14px;
  font-weight: 500;
  transition: var(--np-transition);
}

.np-cat:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
  transform: translateY(-1px);
}

.np-cat__count {
  font-size: 12px;
  color: var(--np-muted);
}

.np-cat__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--np-primary);
}

/* --- 文章条目：列表 --- */
.np-post-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.np-post-item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--np-line);
}

.np-post-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.np-post-item__thumb {
  position: relative;
  border-radius: var(--np-radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--np-bg-soft);
}

.np-post-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.np-post-item:hover .np-post-item__thumb img {
  transform: scale(1.05);
}

.np-post-item__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 没有封面时父级没有真实高度可继承，height:100% 会塌陷成 0，
     导致文字压到上方缩略图区域，这里给一个最小高度兜底。 */
  min-height: 100px;
  color: var(--np-muted);
  font-size: 12px;
  background: linear-gradient(135deg, var(--np-primary-soft), transparent);
}

.np-post-item__badge {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--np-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.np-post-item__body {
  min-width: 0;
}

.np-post-item__title {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.45;
}

.np-post-item__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-post-item__excerpt {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--np-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-post-meta__author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.np-post-meta__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

/* --- 文章条目：网格 / 卡片 --- */
.np-post-grid {
  display: grid;
  grid-template-columns: repeat(var(--np-cols, 3), minmax(0, 1fr));
  gap: 20px;
}

.np-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  overflow: hidden;
  transition: var(--np-transition);
}

.np-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--np-shadow);
  border-color: color-mix(in srgb, var(--np-primary) 35%, var(--np-line));
}

.np-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--np-bg-soft);
  overflow: hidden;
}

.np-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.np-card:hover .np-card__thumb img {
  transform: scale(1.05);
}

.np-card__body {
  padding: 14px 16px 16px;
}

.np-card__title {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 精选排行 --- */
.np-pick {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.np-pick__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.np-pick__rank {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--np-muted);
  background: var(--np-bg-soft);
}

.np-pick__item:nth-child(1) .np-pick__rank,
.np-pick__item:nth-child(2) .np-pick__rank,
.np-pick__item:nth-child(3) .np-pick__rank {
  background: var(--np-primary);
  color: #fff;
}

.np-pick__title {
  font-size: 14.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 视频模块 --- */
.np-video-grid {
  display: grid;
  grid-template-columns: repeat(var(--np-cols, 3), minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.np-video-card {
  min-width: 0;
}

.np-video-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* 部分浏览器在 grid 项内不会自动用 aspect-ratio 撑高，给一个 min-height 兜底，
     否则卡片会被压成一条，标题直接贴到缩略图上。 */
  min-height: 120px;
  border-radius: var(--np-radius);
  overflow: hidden;
  background: var(--np-bg-deep);
}

.np-video-card__thumb img,
.np-video-card__thumb .np-post-item__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
  opacity: 0.82;
}

.np-video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.np-video-card__play span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: var(--np-transition);
}

.np-video-card:hover .np-video-card__play span {
  transform: scale(1.12);
}

.np-video-card__meta {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 11.5px;
}

/* --- 视频播放列表页 --- */
/* 页头做成深色 hero：视频页的主角本来就是播放器，页头用同一套深色语言
 * 跟播放器框呼应，比一行黑字 + 一行灰字有页面感。 */
.np-video-head {
  margin: 4px 0 22px;
  padding: 26px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1b2431, #0d1117);
  color: #fff;
}

.np-video-head__title {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.01em;
}

.np-video-head__sub {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
}

.np-video-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
  margin-bottom: 56px;
}

.np-video-stage {
  min-width: 0;
}

.np-video-stage__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #0d1117;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  transition: box-shadow 0.25s ease;
}

.np-video-stage__frame:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}

.np-video-stage__frame iframe,
.np-video-stage__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.np-video-stage__link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1b2431, #0d1117);
}

.np-video-stage__meta {
  padding: 16px 2px 0;
}

.np-video-stage__title {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.35;
}

.np-video-stage__desc {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--np-text-2);
}

.np-video-stage__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.np-video-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 113, 177, 0.1);
  color: var(--np-primary);
  font-size: 12.5px;
  font-weight: 600;
}

.np-video-chip--muted {
  background: var(--np-bg-soft);
  color: var(--np-muted);
  font-variant-numeric: tabular-nums;
}

.np-video-stage__origin {
  margin-left: auto;
  font-size: 13px;
  color: var(--np-muted);
  text-decoration: none;
}

.np-video-stage__origin:hover {
  color: var(--np-primary);
}

.np-video-stage__nav {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* 上一个 / 下一个：原来是无样式的浏览器默认按钮，和整体设计语言脱节 */
.np-video-nav {
  padding: 8px 18px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg);
  color: var(--np-text-2);
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--np-transition), border-color var(--np-transition);
}

.np-video-nav:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-video-nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 播放列表 */
.np-video-list {
  position: sticky;
  top: calc(var(--np-header-h) + 20px);
  border: 1px solid var(--np-line);
  border-radius: 14px;
  background: var(--np-bg);
  overflow: hidden;
}

.np-video-list__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--np-line);
  background: var(--np-bg-soft);
}

.np-video-list__head h3 {
  margin: 0;
  font-size: 15px;
}

.np-video-list__count {
  margin-left: auto;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.np-video-list__group {
  margin: 0;
  padding: 10px 16px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--np-muted);
  letter-spacing: 0.04em;
}

.np-video-list__items {
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--np-line) transparent;
}

.np-video-list__items::-webkit-scrollbar {
  width: 6px;
}

.np-video-list__items::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--np-line);
}

.np-video-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}

.np-video-item:hover {
  background: var(--np-bg-soft);
}

.np-video-item:hover .np-video-item__thumb img {
  transform: scale(1.06);
}

.np-video-item.is-active {
  background: rgba(34, 113, 177, 0.09);
}

/* 正在播放：左侧竖条比单靠底色更醒目，列表长了也能一眼定位 */
.np-video-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: var(--np-primary);
}

.np-video-item.is-active .np-video-item__title {
  color: var(--np-primary);
  font-weight: 600;
}

.np-video-item__thumb {
  position: relative;
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(135deg, #24303f, #111823);
}

.np-video-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.np-video-item__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  font-weight: 700;
}

.np-video-item__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: #111;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.np-video-item__dur {
  position: absolute;
  right: 4px;
  bottom: 3px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* 视频门禁：封面上的「付费可见 / 会员可见」 */
.np-video-item.is-locked .np-video-item__title {
  color: var(--np-text);
}

.np-video-item__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 14, 22, 0.46);
  color: #fff;
}

.np-video-item__lock--vip {
  background: rgba(60, 36, 6, 0.5);
  color: #ffd479;
}

.np-video-item__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(34, 113, 177, 0.12);
  color: var(--np-primary);
  font-size: 10.5px;
  line-height: 16px;
  vertical-align: 1px;
}

.np-video-item__badge--vip {
  background: rgba(214, 154, 20, 0.16);
  color: #8a6100;
}

/* 播放器信息区的访问级别标记 */
.np-video-access-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(34, 113, 177, 0.12);
  color: var(--np-primary);
  font-size: 11.5px;
  line-height: 18px;
}

.np-video-access-tag--vip {
  background: rgba(214, 154, 20, 0.16);
  color: #8a6100;
}

.np-vlock {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #24303f, #111823);
}

.np-vlock__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) saturate(0.8) brightness(0.6);
  transform: scale(1.08);
}

.np-vlock__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(36, 48, 63, 0.9), rgba(13, 19, 27, 0.95));
}

.np-vlock__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  color: #fff;
}

/* 锁标：直接放大 SVG 本身，不再套圆形底，避免小尺寸下描边发虚。 */
.np-vlock__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.92;
}

.np-vlock__badge svg {
  display: block;
}

.np-vlock--vip .np-vlock__badge {
  color: #ffd479;
}

.np-vlock--stage .np-vlock__title {
  font-size: 17px;
}

.np-vlock__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.np-vlock__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}

.np-vlock__acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}

/* 缩略图尺寸的锁标（播放列表右侧） */
.np-vlock--thumb .np-vlock__chip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: rgba(9, 14, 22, 0.46);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

.np-vlock--thumb .np-vlock__chip svg {
  display: block;
}

.np-vlock--thumb .np-vlock__chip em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.02em;
}

/* 列表下方的解锁条 */
.np-vlock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
}

.np-vlock-bar__text {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--np-text-2);
}

.np-video-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.np-video-item__title {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--np-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-video-item__group {
  font-size: 12px;
  color: var(--np-muted);
}

.np-video-empty {
  margin-bottom: 56px;
  padding: 48px 24px;
  border: 1px dashed var(--np-line);
  border-radius: 14px;
  text-align: center;
}

.np-video-empty p {
  margin: 0 0 8px;
}

.np-video-empty__tip {
  font-size: 13px;
  color: var(--np-muted);
}

@media (max-width: 1024px) {
  .np-video-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .np-video-list__items {
    max-height: none;
  }
}

@media (max-width: 600px) {
  .np-video-head {
    margin-bottom: 16px;
    padding: 20px 18px;
    border-radius: 13px;
  }

  .np-video-head__title {
    font-size: 20px;
  }

  .np-video-stage__title {
    font-size: 18px;
  }

  .np-video-stage__frame {
    border-radius: 11px;
  }

  .np-video-stage__nav {
    flex-direction: row;
  }

  .np-video-stage__nav .np-video-nav {
    flex: 1;
    padding: 9px 12px;
    text-align: center;
  }

  /* 手机上列表不再跟随滚动（整页滚就行），限个高度让播放器保持主角地位 */
  .np-video-list {
    position: static;
  }

  /* 手机上列表缩略图放大一号：96px 在 390 宽里只剩指甲盖大小，
   * 看不出画面内容，缩略图就失去意义了。 */
  .np-video-item__thumb {
    width: 124px;
  }

  .np-video-item {
    padding: 9px;
    gap: 12px;
  }

  .np-video-list__items {
    display: grid;
    grid-template-columns: 1fr;
    max-height: 420px;
  }
}

/* --- 文章内视频短代码 --- */
.np-video-embed {
  margin: 1.6em 0;
}

/* 竖屏 / 方形视频在宽正文里会被撑得极高，限制一个最大宽度并居中。 */
.np-video-embed[data-ratio='9 / 16'],
.np-video-embed[data-ratio='1 / 1'],
.np-video-embed[data-ratio='4 / 5'] {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.np-video-embed[data-ratio='1 / 1'] {
  max-width: 520px;
}

.np-video-embed__frame,
.np-video-list-wrap .np-video-stage__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--np-radius);
  background: #0b0d12;
}

.np-video-embed__frame iframe,
.np-video-embed__frame video,
.np-video-list-wrap .np-video-stage__frame iframe,
.np-video-list-wrap .np-video-stage__frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 「点击后再加载」的封面层：避免一篇文章里多个第三方播放器同时请求。 */
.np-video-embed__cover,
.np-video-stage__cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(135deg, #161a23, #0b0d12);
  cursor: pointer;
  overflow: hidden;
}

.np-video-embed__cover img,
.np-video-stage__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.4s ease;
}

.np-video-embed__cover:hover img,
.np-video-stage__cover:hover img {
  transform: scale(1.03);
}

.np-video-embed__grad {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 22% 78%, rgba(94, 132, 255, 0.32), transparent 70%),
    radial-gradient(50% 60% at 82% 24%, rgba(255, 122, 89, 0.28), transparent 70%);
}

.np-video-embed__play {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 20px;
  line-height: 1;
  text-indent: 4px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease;
}

.np-video-embed__cover:hover .np-video-embed__play,
.np-video-stage__cover:hover .np-video-embed__play {
  transform: scale(1.08);
}

.np-video-embed__badge {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  max-width: calc(100% - 28px);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-video-embed__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  padding: 20px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.np-video-embed__cap {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--np-muted);
}

.np-video-embed__title {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--np-text);
}

.np-video-embed__desc {
  display: block;
}

/* 文章内播放列表：沿用视频页的 .np-video-layout，只调整外边距与标题层级。 */
.np-video-list-wrap {
  margin: 1.8em 0;
}

.np-video-list-wrap__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
}

.np-video-list-wrap--stage .np-video-list {
  display: none;
}

.np-video-list-wrap--stage .np-video-layout {
  display: block;
}

.np-video-list-wrap .np-video-stage__frame {
  aspect-ratio: 16 / 9;
}

.np-video-list-wrap .np-video-list__items {
  max-height: 420px;
  overflow-y: auto;
}

.np-video-list-wrap .np-video-item__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* 文章正文里的播放列表：容器较窄，缩略图收一号给文字留空间。 */
.np-entry .np-video-item__thumb {
  width: 84px;
}

.np-entry .np-video-item__body {
  padding-top: 2px;
}

@media (max-width: 640px) {
  .np-video-embed {
    margin: 1.2em 0;
  }

  .np-video-embed__play {
    width: 52px;
    height: 52px;
    font-size: 17px;
  }

  .np-video-embed__badge {
    left: 10px;
    bottom: 10px;
    font-size: 11.5px;
  }

  .np-video-list-wrap {
    margin: 1.4em 0;
  }

  .np-video-list-wrap .np-video-list__items {
    max-height: none;
  }
}

/* --- 数据统计 --- */
.np-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  padding: 26px;
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
  border: 1px solid var(--np-line);
}

.np-stat {
  text-align: center;
}

.np-stat__num {
  font-size: 30px;
  font-weight: 800;
  color: var(--np-primary);
  line-height: 1.2;
}

.np-stat__label {
  font-size: 13px;
  color: var(--np-muted);
  margin-top: 4px;
}

/* --- 侧栏组件：通栏卡（会员推广 / 用户中心 / 站长名片共用） --- */
/* 这三张卡自带完整的视觉体系（渐变头图 / 封面图），widget 的内边距和标题栏
 * 只会碍事，所以整体改成 flush：卡片自己就是整个小工具。 */
.np-widget--flush {
  padding: 0;
  border: 0;
  overflow: hidden;
}

/* flush 卡里没有标题栏，全局 li / ul 的虚线分隔也不要 */
.np-widget--flush li {
  padding: 0;
  border-bottom: 0;
}

/* --- 会员推广卡 --- */
.np-vipcard__hero {
  position: relative;
  padding: 44px 16px 18px;
  background: linear-gradient(135deg, #ff7d59, #ff2d55);
  color: #fff;
  text-align: center;
}

.np-vipcard__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11.5px;
  font-weight: 600;
}

.np-vipcard__sold {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(23, 32, 51, 0.75);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.np-vipcard__num {
  font-weight: 800;
  line-height: 1.1;
}

.np-vipcard__num strong {
  font-size: 34px;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.np-vipcard__cur {
  font-size: 16px;
  margin-right: 2px;
}

.np-vipcard__unit {
  margin-left: 4px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
}

.np-vipcard__tip {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(23, 32, 51, 0.45);
  font-size: 12px;
}

.np-vipcard__tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 档位：一高一低才好比价 */
/* 档位：两列网格，月卡 / 季卡 / 年卡 / 永久卡排成两行。
 * 分隔线用「容器铺线色 + 1px gap + 每格铺背景色」画出来：
 * 换成 border 的话，两行布局里只有相邻格有边，行与行之间会缺一条横线。 */
.np-vipcard__tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--np-line);
}

.np-vipcard__tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 9px;
  background: var(--np-bg);
}

/* 奇数档（只启用 3 档）：最后一格会孤零零占左半行，右边空出的一格
 * 露出来的就是容器的线色背景，看着像一块灰补丁——让它跨满整行。
 * :last-child:nth-child(odd) 正好命中「总数是奇数时的最后一格」。 */
.np-vipcard__tier:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.np-vipcard__tier-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.np-vipcard__tier-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--np-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-vipcard__tier-days {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--np-muted);
  font-variant-numeric: tabular-nums;
}

/* 当前所处档位：天数位换成「在用中」，用主色点一下，比再挂角标省地方 */
.np-vipcard__tier.is-owned .np-vipcard__tier-days {
  color: var(--np-primary);
  font-weight: 600;
}

.np-vipcard__tier-price {
  font-size: 15.5px;
  font-weight: 700;
  color: #ff4d5e;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.np-vipcard__tier-price i {
  margin-right: 1px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

/* 永久卡：换个颜色，和时长卡一眼分开（买断不是「更长的时长」） */
.np-vipcard__tier.is-perm .np-vipcard__tier-price {
  color: #b45309;
}

.np-vipcard__tier.is-perm .np-vipcard__tier-days {
  color: #b45309;
  font-weight: 600;
}

.np-widget .np-vipcard__srv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 0;
  padding: 13px 16px;
  border-top: 1px solid var(--np-line);
}

.np-widget .np-vipcard__srv li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--np-text-2);
}

.np-vipcard__srv svg {
  flex: none;
  color: var(--np-primary);
}

.np-vipcard__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 16px 16px;
  padding: 11px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4facfe, #2563eb);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--np-transition), transform var(--np-transition);
}

.np-vipcard__cta:hover {
  color: #fff;
  opacity: 0.92;
  transform: translateY(-1px);
}

/* --- 用户名片（原「用户中心卡」+「站长名片」合并） --- */
/* 登录看自己、未登录看站长：一张卡兼顾两种身份，省掉侧栏两张卡的高度。 */
.np-profile__cover {
  position: relative;
  height: 130px;
  background-size: cover;
  background-position: center;
}

/* 没配封面时给一个安静的渐变，别留一片白 */
.np-profile__cover--default {
  background: linear-gradient(135deg, #8ec5fc, #4d6bdb);
}

.np-profile__avatar {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 3px solid var(--np-bg);
  background: var(--np-bg-soft);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.np-profile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-profile__body {
  padding: 42px 18px 18px;
  text-align: center;
}

.np-profile__hi {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--np-muted);
  letter-spacing: 0.2px;
}

.np-profile__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 16.5px;
  font-weight: 700;
}

.np-profile__name > a {
  color: var(--np-text);
  text-decoration: none;
}

.np-profile__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd76e, #f59e0b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.np-profile__badge svg {
  width: 11px;
  height: 11px;
}

.np-profile__follow {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ff4d5e;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.np-profile__follow svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
}

.np-profile__follow:hover {
  color: #ff2d55;
}

.np-profile__sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-widget .np-profile__stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 0;
}

.np-widget .np-profile__stats li {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
}

.np-profile__stat b {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.np-profile__stat i {
  font-style: normal;
  opacity: 0.78;
}

.np-profile__stat--posts {
  background: color-mix(in srgb, #2563eb 13%, transparent);
  color: #2563eb;
}

.np-profile__stat--comments {
  background: color-mix(in srgb, #16a34a 13%, transparent);
  color: #16a34a;
}

.np-profile__stat--views {
  background: color-mix(in srgb, #ea580c 13%, transparent);
  color: #ea580c;
}

.np-profile__desc {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--np-muted);
  text-align: center;
}

/* --- 文章会员卡：汇总本文的付费可见 / 会员可见 / 免费下载 --- */
.np-postcard__tip {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--np-muted);
}

.np-postcard__group {
  padding: 12px 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
}

.np-widget .np-postcard__group + .np-postcard__group {
  margin-top: 10px;
}

.np-postcard__ghead {
  display: flex;
  align-items: center;
  gap: 7px;
}

.np-postcard__gico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #fff;
}

.np-postcard__gname {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--np-text);
}

.np-postcard__gprice {
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #d97706;
  font-size: 11.5px;
  font-weight: 700;
}

.np-postcard__gcount {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--np-muted);
  font-variant-numeric: tabular-nums;
}

.np-widget .np-postcard__items {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.np-widget .np-postcard__items li {
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.np-postcard__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--np-bg);
}

.np-postcard__item-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
}

a.np-postcard__item-link:hover .np-postcard__item-name {
  color: var(--np-primary);
}

.np-postcard__item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--np-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-postcard__item-meta {
  flex: none;
  font-size: 11px;
  color: var(--np-muted);
}

.np-postcard__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.np-postcard__tag svg {
  flex: none;
}

.np-postcard__tag.is-lock {
  background: color-mix(in srgb, #ff2d55 12%, transparent);
  color: #ff2d55;
  font-variant-numeric: tabular-nums;
}

.np-postcard__tag.is-ok {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #16a34a;
}

.np-postcard__dl {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--np-primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--np-transition);
}

.np-postcard__dl:hover {
  color: #fff;
  opacity: 0.88;
}

/* 三类用色：付费橙红、会员金、下载蓝 */
.np-postcard__group--pay .np-postcard__gico {
  background: linear-gradient(135deg, #ff7d59, #ff2d55);
}

.np-postcard__group--vip .np-postcard__gico {
  background: linear-gradient(135deg, #ffd76e, #f59e0b);
}

.np-postcard__group--free .np-postcard__gico {
  background: linear-gradient(135deg, #4facfe, #2563eb);
}

.np-postcard__tag.is-need {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #d97706;
}

/* 解锁入口：主按钮（购买）+ 次按钮（会员） */
.np-postcard__actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.np-postcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--np-transition);
}

.np-postcard__btn b {
  font-variant-numeric: tabular-nums;
}

.np-postcard__btn--buy {
  background: linear-gradient(90deg, #4facfe, #2563eb);
  color: #fff;
}

.np-postcard__btn--buy:hover {
  color: #fff;
  opacity: 0.9;
}

.np-postcard__btn--vip {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #d97706;
}

.np-postcard__btn--vip:hover {
  color: #b45309;
}

/* 卡内条目点击后滚动定位，留出让吸顶导航遮挡的余量 */
.np-locked,
.np-download {
  scroll-margin-top: 90px;
}

.np-profile__btns {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.np-profile__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 0;
  border-radius: 8px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--np-transition);
}

.np-profile__btn:hover {
  color: #fff;
  opacity: 0.9;
}

.np-profile__btn--go {
  background: linear-gradient(135deg, #4facfe, #2563eb);
}

.np-profile__btn--alt {
  background: linear-gradient(135deg, #ffab40, #ff6d00);
}

/* 通栏卡上方若填了标题，贴着卡片走，不要留出 widget 的标题留白 */
.np-widget--flush .np-widget__title {
  margin: 0;
  padding: 12px 16px 0;
}

.np-sidebar-empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--np-muted);
}

/* --- 侧栏组件：活跃作者 --- */
.np-users {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-user__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--np-radius-sm);
  text-decoration: none;
  transition: border-color var(--np-transition), background var(--np-transition);
}

.np-user__link:hover {
  border-color: color-mix(in srgb, var(--np-primary) 35%, transparent);
  background: var(--np-primary-soft);
}

/* 名次：有榜就有先后，比单纯罗列更好扫 */
.np-user__rank {
  flex: none;
  width: 16px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--np-muted);
  text-align: center;
}

.np-users li:nth-child(-n + 3) .np-user__rank {
  color: var(--np-primary);
  font-weight: 700;
}

/* 侧栏 .np-widget 给 li 加了虚线分隔与内边距，作者榜自己有卡片样式，别叠两层 */
.np-widget .np-users li {
  padding: 0;
  border-bottom: 0;
}

.np-user__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--np-bg-soft);
}

.np-user__img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: block;
}

.np-user__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.np-user__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--np-text);
}

.np-user__desc {
  font-size: 12px;
  color: var(--np-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.np-user__count {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  color: var(--np-muted);
  font-variant-numeric: tabular-nums;
}

/* --- 侧栏组件：文章日历 --- */
.np-cal {
  padding: 12px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
}

.np-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.np-cal__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--np-text);
}

.np-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--np-line);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: var(--np-text-2);
  text-decoration: none;
  transition: color var(--np-transition), border-color var(--np-transition);
}

.np-cal__nav:hover {
  color: var(--np-primary);
  border-color: var(--np-primary);
}

.np-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.np-cal__weekday {
  padding: 3px 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--np-muted);
}

.np-cal__cell {
  aspect-ratio: 1 / 1;
}

.np-cal__cell.is-empty {
  visibility: hidden;
}

.np-cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  font-size: 12px;
  color: var(--np-text-2);
  text-decoration: none;
  transition: background var(--np-transition), color var(--np-transition);
}

.np-cal__day.is-empty {
  color: var(--np-muted);
  opacity: 0.5;
}

.np-cal__cell.has-posts .np-cal__day {
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 600;
}

.np-cal__cell.has-posts .np-cal__day:hover {
  background: var(--np-primary);
  color: #fff;
}

.np-cal__cell.is-today .np-cal__day {
  box-shadow: inset 0 0 0 1px var(--np-primary);
}

/* 当天有文章时用一个小圆点标出来，比数字更轻 */
.np-cal__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.np-cal__empty {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--np-muted);
  text-align: center;
}

/* 模块空状态提示 */
.np-module__empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
  font-size: 13px;
  color: var(--np-muted);
  text-align: center;
}

/* --- 广告位 --- */
.np-ad {
  border-radius: var(--np-radius);
  overflow: hidden;
}

.np-ad__img {
  width: 100%;
  border-radius: var(--np-radius);
}

.np-ad__code {
  padding: 14px;
  border: 1px dashed var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
  text-align: center;
  font-size: 13px;
  color: var(--np-muted);
}

/* --- 备案信息 --- */
.np-icp {
  font-size: 13.5px;
  color: var(--np-text-2);
}

.np-icp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.np-icp__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.np-icp a {
  color: var(--np-text-2);
}

.np-icp a:hover {
  color: var(--np-primary);
}

.np-icp__label {
  color: var(--np-muted);
  font-size: 13px;
}

.np-icp__value {
  font-weight: 600;
  color: var(--np-text);
}

.np-icp--inline .np-icp__item + .np-icp__item {
  padding-left: 14px;
  border-left: 1px solid var(--np-line);
}

.np-icp--block .np-icp__list {
  display: grid;
  gap: 10px;
}

.np-icp--block .np-icp__item {
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
}

.np-icp--card {
  padding: 20px 22px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
}

.np-icp__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--np-text);
}

.np-icp__shield {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  align-items: center;
  justify-content: center;
}

.np-icp--card .np-icp__list {
  display: grid;
  gap: 10px;
}

.np-icp--card .np-icp__item {
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--np-line);
}

.np-icp--card .np-icp__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.np-icp__extra {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--np-muted);
}

/* --- 备案胶囊（页脚默认） ---
 * 备案号天生又长又没重点，直接一行排开会被读成「一串灰字」。
 * 做成胶囊后每一条有边界、有图标、可点，扫一眼就知道有几项、分别是什么；
 * 图标统一用 currentColor，胶囊 hover 时图标跟着一起变色。 */
.np-icp--chip .np-icp__list {
  gap: 8px;
  justify-content: center;
}

.np-icp--chip .np-icp__item {
  padding: 0;
  border: 0;
}

.np-icp__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 13px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg);
  color: var(--np-text-2);
  font-size: 12.5px;
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--np-transition), border-color var(--np-transition), background var(--np-transition);
}

.np-icp__chip:hover {
  color: var(--np-primary);
  border-color: color-mix(in srgb, var(--np-primary) 42%, transparent);
  background: var(--np-primary-soft);
}

.np-icp--chip .np-icp__label {
  font-size: 12px;
  color: var(--np-muted);
}

.np-icp--chip .np-icp__value {
  font-weight: 500;
}

.np-icp__icon {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: 14px;
  color: var(--np-muted);
  transition: color var(--np-transition);
}

.np-icp__icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.np-icp__chip:hover .np-icp__icon,
.np-icp__item:hover .np-icp__icon {
  color: currentColor;
}

/* block / card 样式里图标贴在类型名前面，跟胶囊一样留 6px 呼吸 */
.np-icp--block .np-icp__label,
.np-icp--card .np-icp__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 自定义图标可能是任意比例的位图，按 1em 兜住，别把胶囊撑变形。 */
.np-icp__img {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
}

.np-footer__icp {
  padding: 6px 0 0;
}

.np-footer__icp .np-icp {
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-footer__icp a {
  color: var(--np-muted);
}

.np-footer__icp a:hover {
  color: var(--np-primary);
}

/* --- 手机底部导航栏 --- */
.np-mnav {
  display: none;
}

/* 底部导航固定在屏幕底部，会盖住页面最后一屏内容（页脚的备案号、最后一篇文章）。
 * 这里给 body 兜一层 padding，再由下面的 .np-site 抵消——只靠 .np-site 的 padding
 * 不够：.np-footer 自带 margin，margin 折叠后把 padding 吃掉了一部分。
 * 另外 iOS 的 safe-area 也要算进去，否则 iPhone 底部横条会压住「首页」。
 * --np-mnav-h 由底栏自身高度决定，改高度只要改这一个变量。 */
:root {
  --np-mnav-h: 56px;
}

body.np-mnav-on {
  padding-bottom: calc(var(--np-mnav-h) + env(safe-area-inset-bottom, 0px) + 8px);
}

@media (max-width: 768px) {
  body.np-mnav-on .np-site {
    padding-bottom: calc(var(--np-mnav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* 页脚本来靠 margin 与正文拉开距离，二者叠加会多出一段空白；
     取消 margin 后由 .np-site 的 padding 统一兜住。 */
  body.np-mnav-on .np-footer {
    margin-bottom: 0;
  }

  .np-mnav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--np-bg) 94%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--np-line);
  }

  /* 滚动时收起底部菜单栏：整条往下位移滑出屏幕。
     用 transform 而不是改 bottom / display——transform 不触发重排，
     body 为底栏预留的 padding 也保持不变，收起时正文不会突然被拉长一截。 */
  .np-mnav--autohide {
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }

  .np-mnav.is-hidden {
    transform: translateY(100%);
  }

  /* 抽屉打开时底栏保持原位，理由同顶部导航 */
  body.np-drawer-on .np-mnav {
    transform: none;
  }

  /* 底栏收起后，「返回顶部」跟着落到屏幕角上，
     否则右下角会空出一块底栏的高度，看着像少了东西。 */
  body.np-bars-hidden .np-fab {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .np-mnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    color: var(--np-muted);
    -webkit-tap-highlight-color: transparent;
  }

  .np-mnav__item.is-active {
    color: var(--np-primary);
  }

  .np-mnav__icon {
    display: flex;
    align-items: center;
  }

  /* 底部导航出现时，悬浮组整体抬高到导航栏之上 */
  /* 悬浮组要避开底部导航：抬高到导航之上，并且只留返回顶部一个按钮，
     明暗在抽屉里也有入口，不必在右下角再占一个。 */
  .np-fab {
    bottom: calc(var(--np-mnav-h) + env(safe-area-inset-bottom, 0px) + 16px);
    right: 14px;
    gap: 8px;
    transition: bottom 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* 手机：底部导航右侧已有「会员」，明暗按钮也进抽屉，
     再放一个圆形按钮会正好压住会员图标——这里只留「返回顶部」一个。 */
  .np-fab .np-fab__dark {
    display: none;
  }

  body:not(.np-mnav-on) .np-fab {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- 会员：登录注册 / 用户中心 --- */
.np-auth {
  display: flex;
  justify-content: center;
  padding: 46px 0 60px;
}

.np-auth__card {
  width: 100%;
  max-width: 420px;
  padding: 34px 34px 30px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  box-shadow: var(--np-shadow);
}

.np-auth__brand {
  text-align: center;
  margin-bottom: 22px;
}

.np-auth__logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--np-text);
}

.np-auth__sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--np-muted);
}

.np-auth__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
  padding: 4px;
}

.np-auth__tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: var(--np-radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--np-text-2);
}

.np-auth__tab.is-active {
  background: var(--np-bg);
  color: var(--np-primary);
  box-shadow: var(--np-shadow);
}

.np-auth__title {
  margin: 0 0 16px;
  font-size: 19px;
}

.np-auth__tip {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--np-text-2);
}

.np-auth__msg {
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: var(--np-radius-sm);
  font-size: 13.5px;
}

.np-auth__msg--ok {
  background: rgba(0, 163, 42, 0.1);
  color: #00a32a;
}

.np-auth__msg--err {
  background: rgba(214, 54, 54, 0.1);
  color: var(--np-accent);
}

.np-form-row {
  margin-bottom: 14px;
}

.np-form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--np-text);
}

.np-form-row input[type='text'],
.np-form-row input[type='email'],
.np-form-row input[type='password'],
.np-form-row input[type='url'],
.np-form-row textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 14px;
  outline: none;
  transition: var(--np-transition);
}

.np-form-row textarea {
  height: auto;
  padding: 10px 12px;
  line-height: 1.6;
  resize: vertical;
}

.np-form-row input:focus,
.np-form-row textarea:focus {
  border-color: var(--np-primary);
  box-shadow: 0 0 0 3px var(--np-primary-soft);
}

.np-form-row--check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--np-text-2);
}

.np-form-row--check input {
  width: 15px;
  height: 15px;
}

.np-auth__submit {
  width: 100%;
  margin-top: 6px;
}

.np-auth__alt {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 13px;
}

.np-auth__alt a {
  color: var(--np-muted);
}

.np-auth__alt a:hover {
  color: var(--np-primary);
}

.np-form-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--np-muted);
}

/* 用户中心 */
.np-account {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--np-gap);
  padding: 36px 0 60px;
  align-items: start;
}

.np-account__card {
  padding: 24px;
  margin-bottom: var(--np-gap);
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
}

.np-account__card:last-child {
  margin-bottom: 0;
}

.np-account__me {
  text-align: center;
}

.np-account__avatar {
  display: inline-flex;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--np-primary-soft);
}

.np-account__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.np-account__name {
  margin: 12px 0 2px;
  font-size: 18px;
}

.np-account__email {
  margin: 0;
  font-size: 13px;
  color: var(--np-muted);
  word-break: break-all;
}

.np-account__role {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 12px;
  font-weight: 600;
}

.np-account__meta {
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
  text-align: left;
}

.np-account__meta > div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.np-account__meta dt {
  color: var(--np-muted);
}

.np-account__meta dd {
  margin: 0;
  font-weight: 600;
}

.np-account__logout {
  width: 100%;
  margin-top: 18px;
  color: var(--np-accent);
  border-color: var(--np-accent);
}

.np-account__logout:hover {
  background: rgba(214, 54, 54, 0.08);
  color: var(--np-accent);
  border-color: var(--np-accent);
}

.np-account__cardtitle {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--np-line);
  font-size: 15.5px;
}

.np-account__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--np-muted);
}

.np-account__avatarlink {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--np-primary);
}

.np-account__comments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.np-account__comments li {
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--np-line);
}

.np-account__comments li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.np-account__commenttext {
  font-size: 14px;
  color: var(--np-text);
  line-height: 1.7;
}

.np-account__commentmeta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-account__commentmeta a {
  color: var(--np-text-2);
}

.np-account__commentmeta a:hover {
  color: var(--np-primary);
}

@media (max-width: 768px) {
  .np-auth {
    padding: 24px 0 40px;
  }

  .np-auth__card {
    padding: 24px 20px;
  }

  .np-account {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 0 40px;
  }
}

/* ==========================================================================
   5. 归档 / 单篇
   ========================================================================== */
.np-archive-head {
  padding: 22px 24px;
  margin-bottom: var(--np-gap);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
  border: 1px solid var(--np-line);
}

.np-archive-head h1 {
  margin: 0 0 6px;
  font-size: 24px;
}

.np-archive-head p {
  margin: 0;
  color: var(--np-text-2);
  font-size: 14px;
}

.np-breadcrumb {
  font-size: 13px;
  color: var(--np-muted);
  margin-bottom: 14px;
}

.np-breadcrumb a:hover {
  color: var(--np-primary);
}

.np-breadcrumb__sep {
  margin: 0 6px;
  opacity: 0.6;
}

.np-single {
  max-width: none;
}

.np-single__header {
  margin-bottom: 22px;
}

.np-single__title {
  font-size: 30px;
  line-height: 1.35;
  margin: 0 0 14px;
}

.np-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--np-line);
  font-size: 13px;
  color: var(--np-muted);
}

.np-single__cats a {
  padding: 2px 9px;
  border-radius: 4px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 600;
  font-size: 12.5px;
}

.np-entry {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--np-text);
}

.np-entry > *:last-child {
  margin-bottom: 0;
}

.np-entry img {
  border-radius: var(--np-radius);
}

.np-entry h2,
.np-entry h3 {
  margin-top: 30px;
  padding-left: 11px;
  border-left: 3px solid var(--np-primary);
}

.np-entry ul,
.np-entry ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.np-entry li {
  margin-bottom: 6px;
}

.np-entry table {
  font-size: 14px;
}

.np-entry th {
  background: var(--np-bg-soft);
  font-weight: 600;
}

.np-entry hr {
  margin: 26px 0;
  border: 0;
  border-top: 1px solid var(--np-line);
}

.np-entry iframe,
.np-entry embed,
.np-entry video {
  max-width: 100%;
}

/* 经典编辑器「格式」下拉产出的样式 */
.np-entry .np-lead {
  font-size: 17px;
  color: var(--np-text-2);
}

.np-entry .np-note {
  padding: 12px 16px;
  margin: 0 0 16px;
  border-left: 3px solid var(--np-accent);
  background: var(--np-primary-soft);
  border-radius: 0 var(--np-radius-sm) var(--np-radius-sm) 0;
  font-size: 14.5px;
}

.np-entry img.alignleft,
.np-entry img.alignright {
  max-width: 50%;
  height: auto;
}

.np-entry .wp-caption-text,
.np-entry figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--np-muted);
  margin-top: 6px;
}

.np-single__footer {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--np-line);
}

.np-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.np-tag {
  padding: 3px 11px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--np-text-2);
}

.np-tag:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-author-box {
  display: flex;
  gap: 16px;
  padding: 20px;
  margin-top: 24px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
}

.np-author-box__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.np-author-box__name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.np-author-box__desc {
  font-size: 14px;
  color: var(--np-text-2);
  margin-bottom: 8px;
}

.np-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}

.np-post-nav__item {
  padding: 14px 16px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  font-size: 14px;
}

.np-post-nav__item span {
  display: block;
  font-size: 12px;
  color: var(--np-muted);
  margin-bottom: 4px;
}

.np-post-nav__item--next {
  text-align: right;
}

.np-related {
  margin-top: 36px;
}

/* ==========================================================================
   6. 侧栏与小工具
   ========================================================================== */
.np-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--np-header-h) + 20px);
}

.np-widget {
  padding: 18px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
}

.np-widget__title {
  margin: 0 0 14px;
  font-size: 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--np-line);
  display: flex;
  align-items: center;
  gap: 8px;
}

.np-widget__title::before {
  content: '';
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--np-primary);
}

.np-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.np-widget li {
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--np-line);
}

.np-widget li:last-child {
  border-bottom: 0;
}

.np-widget select,
.np-widget input[type='search'] {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
}

.np-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 侧栏广告位 */
.np-adbox {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.np-adbox__tag {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.np-adbox__link,
.np-adbox__img {
  display: block;
  width: 100%;
}

.np-adbox__img {
  height: auto;
  border-radius: var(--np-radius);
}

.np-adbox__text {
  display: block;
  padding: 22px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--np-text-2);
  background: var(--np-bg-soft);
  border-radius: var(--np-radius);
}

.np-adbox__html {
  padding: 0;
}

.np-adbox__html > *:first-child {
  margin-top: 0;
}

.np-adbox__html > *:last-child {
  margin-bottom: 0;
}

/* 空广告位不留白框 */
.np-adbox:empty {
  display: none;
}

/* ==========================================================================
   7. 分页 & 评论
   ========================================================================== */
.np-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.np-pagination .page-numbers,
.np-pagination a,
.np-pagination span {
  min-width: 36px;
  height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  font-size: 14px;
  color: var(--np-text-2);
}

.np-pagination .current {
  background: var(--np-primary);
  border-color: var(--np-primary);
  color: #fff;
  font-weight: 600;
}

.np-pagination a:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-comments {
  margin-top: 40px;
}

.np-comments__title {
  font-size: 19px;
  margin-bottom: 18px;
}

.np-comment-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.np-comment-list .children {
  list-style: none;
  padding-left: 26px;
  margin: 0;
}

.np-comment {
  padding: 14px 0;
  border-bottom: 1px solid var(--np-line);
}

.np-comment__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}

.np-comment__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.np-comment__author {
  font-weight: 600;
}

.np-comment__date {
  color: var(--np-muted);
  font-size: 12.5px;
}

.np-comment__text {
  font-size: 14.5px;
  color: var(--np-text-2);
}

.np-comment-form input,
.np-comment-form textarea {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 14px;
  font-family: inherit;
}

.np-comment-form textarea {
  min-height: 108px;
  resize: vertical;
}

.np-comment-form input:focus,
.np-comment-form textarea:focus {
  border-color: var(--np-primary);
  outline: none;
}

.np-comment-note {
  font-size: 13px;
  color: var(--np-muted);
  margin-bottom: 12px;
}

/* ==========================================================================
   8. 页脚
   ========================================================================== */
.np-footer {
  margin-top: 56px;
  padding: 44px 0 0;
  border-top: 1px solid var(--np-line);
  background: var(--np-bg-soft);
  font-size: 14px;
  color: var(--np-text-2);
}

.np-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--np-transition);
}

/* --- 内置布局：品牌区 + 两列链接 --- */
.np-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding-bottom: 36px;
}

.np-footer__logo {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--np-text);
}

.np-footer__logo:hover {
  color: var(--np-primary);
}

.np-footer__logo-img {
  display: block;
  max-height: 36px;
  width: auto;
}

.np-footer__desc {
  margin: 12px 0 0;
  max-width: 34em;
  font-size: 14px;
  line-height: 1.75;
  color: var(--np-muted);
}

/* 统计三格：数字大、单位小，横向一排不占高度，把品牌区的空白填实 */
/* 三格等宽：以前用 flex + 固定间距，列宽随内容长短变，三项看着像随便排的。
 * 等宽三列之后，三个数字的起始位置和单位行都在同一条竖线上。 */
.np-footer__stats {
  display: grid;
  /* 列数跟着条目数走，等宽均分：站点还没有文章时只有两格，也不会空出半排。 */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.np-footer__stats li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--np-muted);
}

/* 单位那截允许换行但不断词，列窄的时候往下走而不是把列撑开 */
.np-footer__stats li span {
  min-width: 0;
  overflow-wrap: break-word;
}

.np-footer__stats strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--np-text);
  font-variant-numeric: tabular-nums;
}

/* 社交入口：文字胶囊比两个字的圆点信息量大，也更好点 */
.np-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.np-footer__social a,
.np-footer__social button {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg);
  font-size: 13px;
  font-family: inherit;
  line-height: 1;
  color: var(--np-muted);
  cursor: pointer;
  transition: color var(--np-transition), border-color var(--np-transition);
}

.np-footer__social a:hover,
.np-footer__social button:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-footer__title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--np-text);
}

.np-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.np-footer__list a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 5px 0;
  font-size: 14px;
  color: var(--np-text-2);
}

.np-footer__list a:hover {
  color: var(--np-primary);
}

.np-footer__list-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 计数胶囊：复用分类卡的克制感，不抢链接本身的注意力 */
.np-footer__count {
  flex: none;
  min-width: 22px;
  padding: 0 6px;
  font-size: 11.5px;
  line-height: 18px;
  text-align: center;
  color: var(--np-muted);
  background: var(--np-bg);
  border: 1px solid var(--np-line);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.np-footer__empty {
  margin: 0;
  font-size: 13.5px;
  color: var(--np-muted);
}

/* --- 小工具布局（老用户配过 sidebar 时） --- */
.np-footer__widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  padding-bottom: 30px;
}

.np-footer__widgets .np-widget {
  padding: 0;
  border: 0;
  background: none;
}

.np-footer__widgets .np-widget__title {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--np-text);
}

.np-footer__widgets .np-widget__title::before {
  display: none;
}

.np-footer__widgets .np-widget li {
  padding: 4px 0;
  border-bottom: 0;
  font-size: 14px;
  color: var(--np-text-2);
}

/* --- 底栏 --- */
/* 页脚里的备案信息不用组件默认的竖线：竖线在窄屏换行时会留下一段悬空的线头。
 * 宽屏靠间距分隔，窄屏干脆一列一列排，比中点、比竖线都干净。 */
.np-footer__icp .np-icp--inline {
  padding: 0;
}

.np-footer__icp .np-icp--inline .np-icp__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-footer__icp .np-icp--inline .np-icp__item {
  padding: 0;
  border: 0;
  gap: 6px;
}

.np-footer__icp .np-icp--inline .np-icp__item + .np-icp__item {
  padding-left: 0;
  border-left: 0;
}

/* 卡片样式在页脚里太占地方，收掉外框，只留内容本身。 */
.np-footer__icp .np-icp--card {
  padding: 14px 16px;
}

.np-footer__bottom {
  margin-top: 16px;
  padding: 14px 0 22px;
  border-top: 1px solid var(--np-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: 13px;
  color: var(--np-muted);
}

.np-footer__copy {
  min-width: 0;
}

.np-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}

.np-footer__nav a {
  color: var(--np-muted);
}

.np-footer__nav a:hover {
  color: var(--np-primary);
}

/* 右下悬浮操作组：手机上「明暗切换 + 返回顶部」叠成一列。
 * 以前返回顶部自己 fixed 在右下，明暗按钮挤在头部；
 * 合成一组后两者共用一条竖线，不会互相错位。 */
.np-fab {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 82;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.np-fab__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--np-line);
  border-radius: 50%;
  background: var(--np-bg);
  color: var(--np-text-2);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(9, 14, 22, 0.12);
  transition: var(--np-transition);
  -webkit-tap-highlight-color: transparent;
}

.np-fab__btn:active {
  transform: scale(0.94);
}

/* 深色模式下按太阳/月亮切换图标 */
.np-fab__dark .np-fab__icon--sun {
  display: none;
}

body.np-dark .np-fab__dark .np-fab__icon--sun {
  display: block;
}

body.np-dark .np-fab__dark .np-fab__icon--moon {
  display: none;
}

body.np-dark .np-fab__dark {
  color: #f5d76e;
}

.np-backtop {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--np-primary);
  color: #fff;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--np-primary) 32%, transparent);
}

/* 桌面上悬浮组不需要明暗按钮（头部已有），只显示返回顶部 */
@media (min-width: 769px) {
  .np-fab .np-fab__dark {
    display: none;
  }
}

.np-backtop.is-visible {
  display: flex;
}

/* ==========================================================================
   9. 404 / 搜索空态
   ========================================================================== */
.np-empty {
  text-align: center;
  padding: 70px 20px;
}

.np-empty__code {
  font-size: 76px;
  font-weight: 800;
  color: var(--np-primary);
  line-height: 1;
  margin-bottom: 10px;
}

.np-empty p {
  color: var(--np-text-2);
  margin-bottom: 20px;
}

/* ==========================================================================
   10. 响应式
   ========================================================================== */
@media (max-width: 1100px) {
  :root {
    --np-sidebar: 280px;
  }
}

@media (max-width: 960px) {
  /* 页脚：三栏压成两栏，品牌区独占一行——窄屏下硬塞三列会把链接挤成省略号 */
  .np-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
  }

  .np-footer__brand {
    grid-column: 1 / -1;
  }

  .np-layout,
  .np-layout--left {
    grid-template-columns: minmax(0, 1fr);
  }

  .np-layout--left .np-content,
  .np-layout--left .np-sidebar-col {
    order: initial;
  }

  .np-sidebar-col {
    position: static;
  }

  .np-post-grid,
  .np-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 手机头部：汉堡在左、站名居中、操作区靠右。
   * 站名用绝对定位居中，不被两侧宽度差挤歪。 */
  .np-header__inner {
    position: relative;
    justify-content: space-between;
  }

  .np-menu-toggle {
    display: inline-flex;
    order: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--np-line);
    border-radius: var(--np-radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--np-text);
  }

  .np-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: 46%;
    justify-content: center;
  }

  .np-header__actions {
    order: 2;
    margin-left: auto;
  }

  /* 导航改为抽屉：从屏幕左缘滑入，点汉堡往右弹出。
   *
   * 层级必须高于 .np-mnav（80）和 .np-backtop，且不能待在 .np-header 里——
   * 头部是 sticky + backdrop-filter，会创建层叠上下文，之前抽屉的 z-index:90
   * 反而被底部导航盖住。JS 会把 .np-nav 搬到 body 下，这里只是纯视觉。 */
  .np-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 96;
    width: min(304px, 82vw);
    padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--np-bg);
    box-shadow: 0 0 60px rgba(9, 14, 22, 0.28);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.3s;
  }

  /* 桌面宽度下 JS 已把抽屉搬出头部，这里必须重新收起，否则会平铺在页面顶部 */
  body:not(.np-drawer-on) .np-nav {
    height: 100%;
  }

  .np-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .np-drawer-mask {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(9, 14, 22, 0.48);
    opacity: 0;
    transition: opacity 0.24s ease;
  }

  .np-drawer-mask.is-on {
    opacity: 1;
  }

  /* display:block 会盖掉 [hidden] 的默认 display:none，必须显式声明 */
  .np-drawer-mask[hidden] {
    display: none;
  }

  /* --- 抽屉内容 --- */
  .np-drawer__top {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px 18px;
    border-bottom: 1px solid var(--np-line);
  }

  /* 右上角：明暗 + 关闭 两个圆形小按钮 */
  .np-drawer__top-btns {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .np-drawer__logo {
    max-height: 30px;
    width: auto;
    object-fit: contain;
  }

  .np-drawer__name {
    font-size: 17px;
    font-weight: 800;
    color: var(--np-text);
  }

  .np-drawer__iconbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--np-bg-soft);
    color: var(--np-text-2);
    cursor: pointer;
    transition: var(--np-transition);
  }

  .np-drawer__iconbtn:hover {
    color: var(--np-primary);
    background: var(--np-primary-soft);
  }

  /* 明暗按钮：浅色显月亮、深色显太阳 */
  .np-drawer__dark .np-drawer__icon-sun {
    display: none;
  }

  body.np-dark .np-drawer__dark .np-drawer__icon-moon {
    display: none;
  }

  body.np-dark .np-drawer__dark .np-drawer__icon-sun {
    display: block;
  }

  body.np-dark .np-drawer__dark {
    color: #f5d76e;
  }

  /* 桌面 .np-nav 的 align-items:center 在抽屉里会把子项压成内容宽度，
     全部拉满，宽度交给下面的 margin/padding 控制。 */
  .np-nav {
    align-items: stretch;
  }

  /* --- 主菜单：两列胶囊按钮（对齐子比抽屉） --- */
  .np-nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-self: stretch;
    padding: 14px 16px 4px;
  }

  .np-nav li {
    width: auto;
    min-width: 0;
  }

  .np-nav li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 6px 10px;
    border: 1px solid var(--np-line);
    border-radius: 10px;
    background: var(--np-bg-soft);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .np-nav .current-menu-item > a,
  .np-nav .current-menu-ancestor > a {
    border-color: var(--np-primary);
    background: var(--np-primary-soft);
    color: var(--np-primary);
  }

  /* 二级菜单跟一级一样平铺进网格：字号小一号、去底色，层级靠缩进文字表达 */
  .np-nav ul ul {
    display: contents;
  }

  .np-nav ul ul li > a {
    min-height: 38px;
    border-style: dashed;
    background: transparent;
    font-size: 13px;
    color: var(--np-text-2);
  }

  /* --- 语言：三个胶囊，当前项高亮 --- */
  .np-drawer__langs {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 12px 16px 2px;
  }

  .np-drawer__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--np-line);
    border-radius: 999px;
    background: transparent;
    color: var(--np-text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
  }

  .np-drawer__chip em {
    font-style: normal;
    font-weight: 500;
    font-size: 11.5px;
    color: var(--np-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .np-drawer__chip.is-active {
    border-color: var(--np-primary);
    background: var(--np-primary-soft);
    color: var(--np-primary);
  }

  .np-drawer__chip.is-active em {
    color: var(--np-primary);
  }

  /* --- 会员横幅：深色通栏，金色文字 --- */
  .np-drawer__vipbar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 16px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #23262e 0%, #33302a 100%);
    color: #f5d493;
    font-size: 14px;
  }

  .np-drawer__vipbar > svg {
    flex: none;
  }

  .np-drawer__vipbar strong {
    color: #f7ddaa;
    font-weight: 700;
  }

  .np-drawer__vipbar-sub {
    font-size: 12px;
    color: rgba(245, 212, 147, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .np-drawer__vipbar.is-vip {
    background: linear-gradient(135deg, #1f2b25 0%, #2e3b2c 100%);
  }

  /* 这几个块本身是 <a>，全局 .np-nav a{display:block}（0,1,1）会盖掉下面
     单类选择器（0,1,0）的 flex 布局，导致会员横幅不居中、圆钮错位。
     统一提权到 0,2,1 把 display 抢回来，位置放在各自定义之后也不受影响。 */
  .np-nav a.np-drawer__vipbar {
    display: flex;
    /* 同样要提权：.np-nav a{color:var(--np-text-2)} 会把整条横幅（含图标）
       压成灰色，放在深色渐变背景上就是「不亮」。 */
    color: #f5d493;
  }

  .np-nav a.np-drawer__chip { display: inline-flex; }
  .np-nav a.np-drawer__circle { display: flex; }

  /* 皇冠做成实心 + 微光，描边太细在深色背景上几乎是隐形的 */
  .np-nav a.np-drawer__vipbar > svg {
    flex: none;
    fill: currentColor;
    filter: drop-shadow(0 0 3px rgba(245, 212, 147, 0.5));
  }

  /* --- 账号区 --- */
  .np-drawer__account {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* 未登录：三个彩色圆钮（登录 / 注册 / 找回密码），对齐子比 */
  .np-drawer__auth {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0 6px;
  }

  .np-drawer__circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .np-drawer__circle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--np-bg-soft);
    border: 1px solid var(--np-line);
    transition: var(--np-transition);
  }

  .np-drawer__circle-text {
    font-size: 12.5px;
    color: var(--np-text-2);
    white-space: nowrap;
  }

  .np-drawer__circle:hover .np-drawer__circle-icon {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(9, 14, 22, 0.12);
  }

  .np-drawer__circle--login .np-drawer__circle-icon {
    color: var(--np-primary);
    background: var(--np-primary-soft);
    border-color: transparent;
  }

  .np-drawer__circle--login .np-drawer__circle-text {
    color: var(--np-primary);
  }

  .np-drawer__circle--reg .np-drawer__circle-icon {
    color: #2f9e5f;
    background: rgba(47, 158, 95, 0.12);
    border-color: transparent;
  }

  .np-drawer__circle--reg .np-drawer__circle-text {
    color: #2f9e5f;
  }

  .np-drawer__circle--lost .np-drawer__circle-icon {
    color: #d95f8f;
    background: rgba(217, 95, 143, 0.12);
    border-color: transparent;
  }

  .np-drawer__circle--lost .np-drawer__circle-text {
    color: #d95f8f;
  }

  /* 已登录：头像 + 用户名 + 用户中心 */
  .np-drawer__user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--np-text-2);
  }

  .np-drawer__user-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
  }

  .np-drawer__user strong {
    font-size: 15px;
    color: var(--np-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .np-drawer__user a,
  .np-drawer__user-link {
    font-size: 12.5px;
    color: var(--np-primary);
  }

  .np-drawer__user-sub {
    font-size: 12.5px;
    color: var(--np-muted);
  }

  /* 已登录且能写文章的人，抽屉里给一枚进后台的短链接 */
  .np-drawer__admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--np-bg-soft);
    font-size: 12.5px;
    color: var(--np-text);
    text-decoration: none;
  }

  .np-drawer__admin svg {
    width: 14px;
    height: 14px;
    flex: none;
  }

  .np-drawer__admin:hover {
    color: var(--np-primary);
  }

  .np-drawer__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  /* --- 汉堡图标：三条杠，展开时变 X --- */
  .np-menu-toggle__bars {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
  }

  .np-menu-toggle__bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.28s ease, opacity 0.18s ease, top 0.28s ease;
  }

  .np-menu-toggle__bars i:nth-child(1) { top: 0; }
  .np-menu-toggle__bars i:nth-child(2) { top: 5px; }
  .np-menu-toggle__bars i:nth-child(3) { top: 10px; }

  .np-menu-toggle[aria-expanded='true'] .np-menu-toggle__bars i:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
  }

  .np-menu-toggle[aria-expanded='true'] .np-menu-toggle__bars i:nth-child(2) {
    opacity: 0;
  }

  .np-menu-toggle[aria-expanded='true'] .np-menu-toggle__bars i:nth-child(3) {
    top: 5px;
    transform: rotate(-45deg);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14.5px;
  }

  /* 侧栏组件在手机上是全宽单列，行高略微放开，别贴成一条 */
  .np-user__link {
    padding: 10px 12px;
  }

  .np-profile__cover {
    height: 150px;
  }

  .np-cal {
    padding: 14px;
  }

  .np-cal__day {
    font-size: 12.5px;
  }

  /* 页脚：单列后每块之间的垂直空隙最容易失控，这里逐项收紧 */
  .np-footer {
    margin-top: 40px;
    padding-top: 30px;
  }

  .np-footer__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding-bottom: 24px;
  }

  .np-footer__desc {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.7;
  }

  .np-footer__social {
    margin-top: 14px;
  }

  .np-footer__stats {
    gap: 0 10px;
    margin-top: 14px;
  }

  .np-footer__stats li {
    font-size: 12px;
  }

  .np-footer__stats strong {
    font-size: 16px;
  }

  .np-footer__title {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .np-footer__list {
    /* 窄屏两列排，比一路竖着堆短得多 */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .np-footer__list a {
    padding: 6px 0;
    font-size: 13.5px;
  }

  .np-footer__widgets {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-bottom: 24px;
  }

  /* 窄屏备案与版权都居中：上面胶囊居中、下面一行左对齐，看着像没对齐过的两块。 */
  .np-footer__bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 14px 0 18px;
    font-size: 12.5px;
  }

  .np-footer__nav {
    justify-content: center;
    gap: 6px 16px;
  }

  /* 窄屏备案信息竖排：横排换行后每行长短不齐，看着比一列更乱 */
  .np-footer__icp .np-icp--inline .np-icp__list {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  /* 手机备案：原来按文字长短自动换行，四条宽度 242/276/258/215 参差不齐，
     换行位置也各说各话。改成一列等宽、内容居中——读起来是一份清单，
     点按区域同时从「一小块」变成「整行」。 */
  .np-footer__icp .np-icp--chip .np-icp__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .np-footer__icp .np-icp--chip .np-icp__item {
    width: 100%;
    max-width: 320px;
  }

  .np-footer__icp .np-icp--chip .np-icp__chip {
    width: 100%;
    justify-content: center;
    padding: 8px 14px;
  }

  .np-footer__icp .np-icp--chip .np-icp__label {
    flex: none;
  }

  /* 手机上头部只留「菜单 + 站名 + 搜索」：
     语言、明暗、账号都进了抽屉，头部再堆三个按钮，站名会被挤成省略号。 */
  .np-lang,
  .np-dark-toggle,
  .np-user-toggle {
    display: none;
  }

  /* 手机图文列表
   *
   * 原来缩略图 130×81、摘要两行、meta 四项挤成一排换行，一条 188px 高，
   * 一屏只能看到两条半。改成：
   *   - 缩略图 116×87（4:3 略偏方），信息密度更接近常见资讯 App；
   *   - 摘要收一行，meta 只留作者 + 日期 + 阅读数，其余交给详情页；
   *   - 条目本身卡片化（白底 + 圆角），条目之间的分隔线换成留白。
   */
  .np-post-list {
    gap: 10px;
  }

  .np-post-item {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--np-line);
    border-bottom: 1px solid var(--np-line);
    border-radius: 12px;
    background: var(--np-bg);
  }

  .np-post-item:last-child {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--np-line);
  }

  .np-post-item__thumb {
    align-self: start;
    aspect-ratio: 4 / 3;
    border-radius: 9px;
  }

  .np-post-item__thumb--empty {
    min-height: 0;
    font-size: 11px;
  }

  .np-post-item__title {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.42;
    font-weight: 650;
  }

  .np-post-item__excerpt {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.6;
    -webkit-line-clamp: 1;
  }

  /* meta 在窄条里只留「作者 · 日期 · 阅读」，且必须死守一行——
     作者名一长就被挤到第二行，右侧就空出一块，条目高度还会跟着字数跳。 */
  .np-post-item .np-post-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 6px;
    height: 18px;
    overflow: hidden;
    font-size: 11.5px;
    color: var(--np-muted);
    white-space: nowrap;
  }

  /* 阅读时间、评论数在小屏上没有决策价值，隐藏（nth-last-child 从后往前数两项） */
  .np-post-item .np-post-meta > span:nth-last-child(-n + 2) {
    display: none;
  }

  /* 侧栏宽度只有 190px 上下，塞不下头像 + 作者 + 日期 + 阅读数。
     小屏干脆不显示作者（列表页本来也不靠作者做判断），只留「日期 · 阅读」。 */
  .np-post-item .np-post-meta__author {
    display: none;
  }

  .np-post-item .np-post-meta > time::before {
    content: none;
  }

  .np-post-item .np-post-meta > span + span::before,
  .np-post-item .np-post-meta > span + time::before,
  .np-post-item .np-post-meta > time + span::before {
    content: '·';
    margin-right: 6px;
    color: var(--np-line);
  }

  .np-post-item .np-post-meta__avatar {
    width: 16px;
    height: 16px;
  }

  /* 图片加载失败的 alt 文字会撑出灰底长条，这里裁掉 */
  .np-post-item__thumb img {
    display: block;
  }

  .np-post-grid,
  .np-video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 视频专区在单列下缩略图占满整宽，按钮与角标同步收一号，避免过于抢眼。 */
  .np-video-card__thumb {
    min-height: 160px;
  }

  .np-video-card__play span {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  .np-video-card__meta {
    right: 10px;
    bottom: 10px;
    font-size: 11px;
  }

  .np-video-card > h4 {
    margin-top: 9px !important;
    font-size: 14.5px !important;
    line-height: 1.45;
  }

  .np-single__title {
    font-size: 23px;
  }

  .np-post-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .np-post-nav__item--next {
    text-align: left;
  }

  .np-slider__slide {
    min-height: 240px;
  }

  .np-slider__caption {
    padding: 18px 20px;
  }

  .np-slider__caption h2 {
    font-size: 19px;
  }

  /* 热门频道：横向滑动的频道条（≤640px）
   * 一排 4 个的网格在窄屏里每个格子只有 80px 上下，长分类名要么折行要么
   * 挤成竖条。改成单行横向滑动：分类多时左右滑，少时自然收拢，观感同
   * 常见资讯 App 的频道栏。滚动条隐藏，右缘一道淡出提示还能滑。 */
  .np-cats {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  }

  .np-cats::-webkit-scrollbar {
    display: none;
  }

  .np-cat {
    flex: 0 0 auto;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--np-bg);
    box-shadow: inset 0 0 0 1px var(--np-line), 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }

  .np-cat:active {
    transform: scale(0.96);
  }

  .np-cat__dot {
    width: 8px;
    height: 8px;
    /* 圆点外围的淡色光晕取各自频道的颜色（modules.php 内联到 --np-cat-color） */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-cat-color, #999) 16%, transparent);
  }

  .np-cat__count {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(125, 125, 125, 0.12);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
  }
}

/* 超窄屏（≤380px）：站名 + 菜单 + 三个图标按钮容易顶出屏幕，
   压缩间距并允许站名省略，避免整页横向溢出。 */
@media (max-width: 380px) {
  .np-header__inner {
    gap: 10px;
  }

  .np-brand {
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
  }

  .np-header__actions {
    gap: 5px;
    flex: none;
  }

  .np-search-toggle,
  .np-dark-toggle,
  .np-translate-toggle,
  .np-user-toggle {
    width: 31px;
    height: 31px;
  }

}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   11. WordPress 必需类
   ========================================================================== */
.alignleft { float: left; margin: 6px 18px 12px 0; }
.alignright { float: right; margin: 6px 0 12px 18px; }
.aligncenter { display: block; margin: 12px auto; }
.wp-caption { max-width: 100%; }
.gallery-caption { display: block; }
.bypostauthor { display: block; }
.sticky { position: relative; }
.np-sticky-flag {
  color: var(--np-accent);
  font-weight: 600;
}

/* ==========================================================================
   12. VIP 会员页
   ========================================================================== */
.np-vip-hero {
  position: relative;
  margin: 28px 0 24px;
  padding: 56px 32px 48px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #14181f 0%, #1d2530 45%, #2a1f18 100%);
  color: #fff;
  text-align: center;
}

.np-vip-hero__glow {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 420px;
  background: radial-gradient(closest-side, rgba(214, 154, 20, 0.35), transparent 70%);
  pointer-events: none;
}

/* hero 外层裁剪光晕，避免横向溢出撑出滚动条。 */
.np-vip-hero {
  overflow: hidden;
}

.np-vip-hero__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.np-vip-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #f5d493;
}

.np-vip-hero__title {
  margin: 18px 0 12px;
  font-size: 34px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.np-vip-hero__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
}

.np-vip-hero__desc strong {
  color: #f5d493;
}

.np-vip-hero__notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(46, 160, 67, 0.18);
  border: 1px solid rgba(46, 160, 67, 0.4);
  font-size: 13.5px;
  color: #8ff0a4;
}

.np-vip-hero__notice--warn {
  background: rgba(214, 154, 20, 0.16);
  border-color: rgba(214, 154, 20, 0.42);
  color: #f3cf87;
}

.np-vip-hero.is-active .np-vip-hero__glow {
  background: radial-gradient(closest-side, rgba(46, 160, 67, 0.3), transparent 70%);
}

/* 权益 */
.np-vip-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.np-vip-benefit {
  padding: 22px 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.np-vip-benefit:hover {
  border-color: var(--np-primary);
  transform: translateY(-2px);
}

.np-vip-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.np-vip-benefit__title {
  margin: 14px 0 6px;
  font-size: 15.5px;
  font-weight: 600;
}

.np-vip-benefit__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--np-muted);
}

/* 套餐 */
.np-vip-plans {
  margin-bottom: 40px;
  text-align: center;
}

.np-vip-plans__sub {
  margin: -6px 0 24px;
  font-size: 13.5px;
  color: var(--np-muted);
}

.np-vip-plan-grid {
  display: grid;
  /* 4 档套餐（月/季/年/永久）一行铺满，窄屏自动降列 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.np-vip-plan-grid:has(.np-vip-plan:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.np-vip-plan-grid:has(.np-vip-plan:nth-child(4)) .np-vip-plan {
  padding: 28px 18px 24px;
}

.np-vip-plan-grid:has(.np-vip-plan:nth-child(4)) .np-vip-plan__cur {
  font-size: 27px;
}

.np-vip-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 26px;
  border: 1px solid var(--np-line);
  border-radius: 16px;
  background: var(--np-bg);
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.np-vip-plan:hover {
  border-color: var(--np-primary);
  box-shadow: var(--np-shadow);
  transform: translateY(-3px);
}

.np-vip-plan.is-featured {
  border-color: #c99a35;
  box-shadow: 0 0 0 1px rgba(201, 154, 53, 0.35), 0 16px 40px -18px rgba(201, 154, 53, 0.5);
}

/* 永久卡：紫色描边区分「一次买断」 */
.np-vip-plan.is-lifetime {
  border-color: #7c5cff;
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.05), transparent 60%);
}

.np-vip-plan.is-lifetime:hover {
  border-color: #6a48f5;
  box-shadow: 0 16px 40px -20px rgba(124, 92, 255, 0.55);
}

.np-vip-plan__tag--perm {
  background: #7c5cff;
  color: #fff;
}

/* 永久卡已拥有：整卡去饱和、按钮禁用，一眼看出「不用再买」 */
.np-vip-plan.is-disabled {
  opacity: 0.62;
}

.np-vip-plan.is-disabled .np-vip-plan__btn {
  background: var(--np-bg-soft);
  color: var(--np-muted);
  border: 1px solid var(--np-line);
  cursor: not-allowed;
}

.np-vip-plan .np-vip-plan__tag--owned {
  background: var(--np-text-2);
  color: #fff;
}

/* 可升级角标：会员视角下档位更高的卡 */
.np-vip-plan .np-vip-plan__tag--upgrade {
  background: var(--np-primary);
  color: #fff;
}

.np-vip-plan__tag {
  position: absolute;
  top: -12px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d6a028, #b8821a);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.np-vip-plan__name {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
}

.np-vip-plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.np-vip-plan__cur {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--np-text);
  letter-spacing: -0.02em;
}

.np-vip-plan__days {
  font-size: 13px;
  color: var(--np-muted);
}

.np-vip-plan__origin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--np-muted);
}

.np-vip-plan__save {
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(214, 54, 56, 0.1);
  color: var(--np-accent);
  font-size: 12px;
}

.np-vip-plan__perday {
  margin: 10px 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--np-line);
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-vip-plan__btn {
  margin-top: auto;
  width: 100%;
}

.np-vip-login-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  padding: 14px 18px;
  border: 1px dashed var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
  font-size: 14px;
  color: var(--np-text-2);
}

.np-vip-login-tip svg {
  flex: 0 0 auto;
  color: var(--np-muted);
}

.np-vip-orders {
  margin-bottom: 40px;
}

.np-vip-faq {
  margin-bottom: 48px;
}

.np-faq__item {
  border-bottom: 1px solid var(--np-line);
}

.np-faq__item summary {
  padding: 16px 0;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

.np-faq__item summary::-webkit-details-marker {
  display: none;
}

.np-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--np-muted);
  font-weight: 400;
}

.np-faq__item[open] summary::after {
  content: "\2212";
}

.np-faq__item p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--np-text-2);
}

/* ==========================================================================
   13. 付费短代码：锁定态与下载
   ========================================================================== */
.np-locked {
  position: relative;
  margin: 28px 0;
}

.np-locked--pay {
  border-radius: var(--np-radius);
  overflow: hidden;
}

.np-locked__mask {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius) var(--np-radius) 0 0;
  background: var(--np-bg-soft);
  filter: blur(5px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  max-height: 150px;
  overflow: hidden;
}

.np-locked__mask span {
  height: 10px;
  border-radius: 5px;
  background: #d5dae1;
}

.np-locked__mask span:nth-child(1) { width: 92%; }
.np-locked__mask span:nth-child(2) { width: 74%; }
.np-locked__mask span:nth-child(3) { width: 88%; }
.np-locked__mask span:nth-child(4) { width: 62%; }
.np-locked__mask span:nth-child(5) { width: 80%; }
.np-locked__mask span:nth-child(6) { width: 45%; }

.np-locked__box {
  position: relative;
  margin-top: -78px;
  padding: 34px 26px 30px;
  border: 1px solid var(--np-line);
  border-top: 0;
  border-radius: 0 0 var(--np-radius) var(--np-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--np-bg) 42%);
  text-align: center;
}

.np-locked__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.np-locked__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}

.np-locked__desc {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--np-muted);
}

.np-locked__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.np-locked__cur {
  font-size: 30px;
  font-weight: 700;
  color: var(--np-accent);
  letter-spacing: -0.02em;
}

.np-locked__unit {
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-locked__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.np-locked__tip {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-locked__tip a {
  color: var(--np-primary);
}

.np-locked--open {
  margin: 28px 0;
}

.np-locked--vip {
  padding: 30px 24px;
  border: 1px dashed #d9c08a;
  border-radius: var(--np-radius);
  background: linear-gradient(180deg, #fdf9ee, #fffdf8);
  text-align: center;
}

.np-locked--vip .np-locked__badge {
  background: rgba(201, 154, 53, 0.14);
  color: #b8821a;
}

.np-locked--vip .np-locked__actions {
  margin-top: 18px;
}

/* 下载条 */
.np-download {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
}

.np-download--paid {
  border-color: rgba(46, 160, 67, 0.35);
  background: rgba(46, 160, 67, 0.06);
}

.np-download__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--np-bg);
  border: 1px solid var(--np-line);
  color: var(--np-primary);
}

.np-download__body {
  flex: 1 1 auto;
  min-width: 0;
}

.np-download__name {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-download__meta {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-download__size {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--np-bg);
  border: 1px solid var(--np-line);
  font-size: 11.5px;
}

.np-download__btn {
  flex: 0 0 auto;
}

/* ==========================================================================
   14. 支付收银台
   ========================================================================== */
.np-pay {
  max-width: 1000px;
  margin: 32px auto 56px;
}

.np-pay__head {
  margin-bottom: 26px;
  text-align: center;
}

.np-pay__title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.np-pay__sub {
  margin: 0;
  font-size: 14px;
  color: var(--np-muted);
}

.np-pay__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

.np-pay__card {
  padding: 22px 24px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
}

.np-pay__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--np-line);
  font-size: 14px;
}

.np-pay__row:last-child {
  border-bottom: 0;
}

.np-pay__label {
  flex: 0 0 auto;
  color: var(--np-muted);
}

.np-pay__value {
  text-align: right;
  word-break: break-all;
}

.np-pay__row--amount {
  border-bottom: 0;
  padding-top: 14px;
}

.np-pay__amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--np-accent);
  letter-spacing: -0.02em;
}

.np-pay__methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.np-pay__method {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.np-pay__method:hover {
  border-color: var(--np-primary);
}

.np-pay__method.is-active {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
  box-shadow: 0 0 0 1px var(--np-primary) inset;
}

.np-pay__method input {
  display: none;
}

.np-pay__method-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--np-bg-soft);
  color: var(--np-text-2);
}

.np-pay__method-logo--alipay_f2f,
.np-pay__method-logo--alipay_personal {
  background: rgba(22, 119, 255, 0.1);
  color: #1677ff;
}

.np-pay__method-logo--wechat,
.np-pay__method-logo--wechat_personal {
  background: rgba(7, 193, 96, 0.12);
  color: #07c160;
}

.np-pay__method-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.np-pay__method-text strong {
  font-size: 13.5px;
  font-weight: 600;
}

.np-pay__method-text small {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--np-muted);
}

.np-pay__stage {
  min-height: 60px;
}

.np-pay__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
  border: 1px dashed var(--np-line);
  border-radius: var(--np-radius-sm);
  font-size: 13.5px;
  color: var(--np-muted);
}

.np-pay__warn {
  padding: 14px 16px;
  border: 1px solid rgba(214, 54, 56, 0.3);
  border-radius: var(--np-radius-sm);
  background: rgba(214, 54, 56, 0.06);
  font-size: 13.5px;
  color: var(--np-accent);
}

.np-pay__done {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(46, 160, 67, 0.34);
  border-radius: var(--np-radius-sm);
  background: rgba(46, 160, 67, 0.07);
  color: #1a7f37;
}

.np-pay__done p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--np-text-2);
}

.np-pay__right {
  position: sticky;
  top: 80px;
}

.np-pay__qrcode {
  padding: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  text-align: center;
}

.np-pay__qr-img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  font-size: 13px;
  color: var(--np-muted);
}

/* 当面付的二维码现在是前端本地画的 SVG（不再走 <img>），
 * 两种载体必须同规格：白底卡片、随容器缩放。
 * 写死 220px 在窄栏里会溢出，在宽栏里又显得小——
 * 用 min() 让它撑到 260px 封顶、小屏自动收窄。 */
.np-pay__qr-img img,
.np-pay__qr-img svg {
  display: block;
  width: min(260px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 8px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  /* SVG 是矢量，不需要 pixelated；那会让缩放后的模块边缘发虚/锯齿 */
  shape-rendering: crispEdges;
}

/* 手机上把二维码再放大一号：扫码时手机离屏幕近，260px 偏小 */
@media (max-width: 600px) {
  .np-pay__qr-img img,
  .np-pay__qr-img svg {
    width: min(300px, 100%);
  }

  .np-pay__qrcode {
    padding: 16px 12px;
  }
}

.np-pay__qr-tip {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--np-muted);
}

.np-pay__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
  font-size: 13px;
  color: var(--np-text-2);
}

.np-pay__status.is-ok {
  background: rgba(46, 160, 67, 0.1);
  color: #1a7f37;
  font-weight: 600;
}

.np-pay__status.is-fail {
  background: rgba(214, 54, 56, 0.08);
  color: var(--np-accent);
}

.np-pay__help {
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
}

.np-pay__help h3 {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
}

.np-pay__help ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--np-muted);
}

.np-pay-empty {
  max-width: 440px;
  margin: 80px auto;
  text-align: center;
  color: var(--np-text-2);
}

.np-pay-empty svg {
  color: var(--np-muted);
}

.np-pay-empty h1 {
  margin: 16px 0 8px;
  font-size: 22px;
}

.np-pay-empty p {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--np-muted);
}

/* 通用小件 */
.np-btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

.np-btn--lg {
  padding: 12px 26px;
  font-size: 15px;
}

.np-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--np-line);
  border-top-color: var(--np-primary);
  border-radius: 50%;
  animation: np-spin 0.7s linear infinite;
}

.np-spinner--sm {
  width: 13px;
  height: 13px;
  border-width: 1.6px;
}

@keyframes np-spin {
  to { transform: rotate(360deg); }
}

.np-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
}

.np-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.np-table th,
.np-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--np-line);
  white-space: nowrap;
}

.np-table th {
  background: var(--np-bg-soft);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-table tbody tr:last-child td {
  border-bottom: 0;
}

.np-table code {
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--np-bg-soft);
}

.np-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.np-status--paid {
  background: rgba(46, 160, 67, 0.12);
  color: #1a7f37;
}

.np-status--pending {
  background: rgba(214, 154, 20, 0.14);
  color: #8a6100;
}

.np-status--closed,
.np-status--refunded {
  background: var(--np-bg-soft);
  color: var(--np-muted);
}

/* 后台订单统计 */
.np-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}

.np-stat {
  padding: 16px 18px;
  border: 1px solid #dcdcde;
  border-radius: 8px;
  background: #fff;
}

.np-stat.is-warn {
  border-color: #dba617;
  background: #fcf9e8;
}

.np-stat__label {
  display: block;
  font-size: 12px;
  color: #646970;
}

.np-stat__value {
  display: block;
  margin: 6px 0 2px;
  font-size: 22px;
  line-height: 1.2;
  color: #1d2327;
}

.np-stat__sub {
  font-size: 11.5px;
  color: #8c8f94;
}

.np-orders-table {
  margin-top: 12px;
}

.np-orders-table .np-muted {
  color: #8c8f94;
  font-size: 12px;
}

/* 订单页工具条：搜索 + 一键清除 */
.np-orders-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

.np-orders-bar .np-orders-search {
  margin: 0;
}

.np-orders-bar .search-box {
  margin: 0;
}

.np-orders-wipe {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.np-orders-wipe .button-link-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.np-orders-wipe .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
}

.np-orders-wipe .description {
  font-size: 12px;
  color: #8c8f94;
}

@media (max-width: 782px) {
  .np-orders-wipe .description {
    display: none;
  }
}

.newspress-sc-help code {
  font-size: 12px;
}

/* ==========================================================================
   15. VIP / 支付响应式
   ========================================================================== */
@media (max-width: 1024px) {
  .np-vip-benefits {
    grid-template-columns: repeat(2, 1fr);
  }

  .np-pay__grid {
    grid-template-columns: 1fr;
  }

  .np-pay__right {
    position: static;
  }
}

@media (max-width: 782px) {
  .np-vip-hero {
    margin: 16px 0 18px;
    padding: 40px 20px 34px;
    border-radius: 14px;
  }

  .np-vip-hero__title {
    font-size: 25px;
  }

  .np-vip-hero__desc {
    font-size: 14px;
  }

  .np-vip-benefits {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }

  .np-vip-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
  }

  /* 移动端图标与文字并排，文字区需可收缩，避免标题被 icon 挤成两行 */
  .np-vip-benefit > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  .np-vip-benefit__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .np-vip-benefit__title {
    margin: 2px 0 5px;
    white-space: nowrap;
  }

  /* 四档套餐在窄屏必须回到单列，这里要压过 :has() 的 4 列规则。 */
  .np-vip-plan-grid,
  .np-vip-plan-grid:has(.np-vip-plan:nth-child(4)) {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .np-vip-plan-grid:has(.np-vip-plan:nth-child(4)) .np-vip-plan {
    padding: 24px 20px 22px;
  }

  .np-vip-plan-grid:has(.np-vip-plan:nth-child(4)) .np-vip-plan__cur {
    font-size: 30px;
  }

  .np-vip-plan {
    padding: 24px 20px 22px;
  }

  .np-vip-plan.is-featured {
    order: -1;
  }

  .np-vip-plan__cur {
    font-size: 30px;
  }

  .np-locked__box {
    padding: 28px 18px 24px;
  }

  .np-locked__actions {
    flex-direction: column;
  }

  .np-locked__actions .np-btn {
    width: 100%;
  }

  .np-download {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 14px;
  }

  .np-download__body {
    flex: 1 1 calc(100% - 60px);
  }

  .np-download__btn {
    width: 100%;
    margin-top: 2px;
  }

  .np-pay {
    margin: 18px auto 40px;
  }

  .np-pay__title {
    font-size: 21px;
  }

  .np-pay__card {
    padding: 16px 16px;
  }

  .np-pay__amount {
    font-size: 24px;
  }

  .np-pay__methods {
    grid-template-columns: 1fr;
  }

  .np-pay__method {
    padding: 11px 12px;
  }

  .np-pay__qr-img img,
  .np-pay__qr-img svg {
    width: min(210px, 100%);
  }

  .np-pay__help {
    padding: 14px;
  }
}

/* 锁定卡片 / 下载条内的标题不要继承正文 h2/h3 的左侧装饰线 */
.np-entry .np-locked__title,
.np-entry .np-download__name,
.np-entry .np-pay__help h3,
.np-entry .np-vip-benefit__title {
  margin: 0 0 8px;
  padding-left: 0;
  border-left: 0;
}

.np-entry .np-download__name {
  margin: 0;
}

.np-entry .np-pay__help h3 {
  margin: 0 0 10px;
}

.np-entry .np-vip-benefit__title {
  margin: 14px 0 6px;
}

/* ==========================================================================
   16. 用户中心：会员卡 / 订单表 / 紧凑套餐
   ========================================================================== */
.np-account__vipcard {
  background: linear-gradient(160deg, rgba(124, 92, 255, 0.08), transparent 65%);
  border-color: rgba(124, 92, 255, 0.28);
}

.np-account__vipstate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(201, 154, 53, 0.14);
  color: #9a7320;
  font-size: 13px;
  font-weight: 600;
}

.np-account__vipstate--perm {
  background: rgba(124, 92, 255, 0.14);
  color: #5b3fd6;
}

.np-account__vipstate--none {
  background: var(--np-bg-soft);
  color: var(--np-muted);
}

.np-account__vipbtn {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

/* 订单计数角标 */
.np-account__count {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
  text-align: center;
}

.np-account__link {
  color: var(--np-primary);
  font-weight: 500;
}

.np-account__link:hover {
  text-decoration: underline;
}

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

.np-account__hint--warn {
  color: #b45309;
}

/* 用户中心里的紧凑套餐卡 */
.np-vip-plan-grid--compact {
  gap: 12px;
  margin-top: 14px;
}

.np-vip-plan-grid--compact .np-vip-plan {
  padding: 20px 14px 16px;
  border-radius: 13px;
}

.np-vip-plan-grid--compact .np-vip-plan__name {
  font-size: 15px;
}

.np-vip-plan-grid--compact .np-vip-plan__cur {
  font-size: 24px;
}

.np-vip-plan-grid--compact .np-vip-plan__days {
  font-size: 12px;
}

.np-vip-plan-grid--compact .np-vip-plan__origin,
.np-vip-plan-grid--compact .np-vip-plan__perday {
  font-size: 12px;
}

.np-vip-plan-grid--compact .np-vip-plan__btn {
  padding: 9px 10px;
  font-size: 13px;
}

.np-vip-plan.is-owned {
  opacity: 0.75;
}

@media (max-width: 782px) {
  .np-vip-plan-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .np-vip-plan-grid--compact .np-vip-plan__cur {
    font-size: 21px;
  }

  /* 订单表在手机上转成竖排卡片 */
  .np-table--orders thead {
    display: none;
  }

  .np-table--orders,
  .np-table--orders tbody,
  .np-table--orders tr,
  .np-table--orders td {
    display: block;
    width: 100%;
  }

  .np-table--orders tr {
    margin-bottom: 12px;
    border: 1px solid var(--np-line);
    border-radius: 10px;
    overflow: hidden;
  }

  .np-table--orders td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 13px;
    border: 0;
    border-bottom: 1px solid var(--np-line);
    text-align: right;
  }

  .np-table--orders td:last-child {
    border-bottom: 0;
  }

  .np-table--orders td::before {
    content: attr(data-label);
    flex: none;
    color: var(--np-muted);
    font-size: 12.5px;
    text-align: left;
  }
}


/* ==========================================================================
   手机端网页翻译：入口收进抽屉顶栏，语言菜单就地展开
   ========================================================================== */
@media (max-width: 960px) {
  /* 头部不再重复放翻译按钮，抽屉顶栏已有同款且紧挨明暗切换 */
  .np-header__actions .np-translate-wrap {
    display: none;
  }

  .np-drawer__translate[aria-expanded="true"] {
    color: var(--np-primary);
    background: var(--np-primary-soft);
  }

  /* 抽屉 overflow-y:auto 会裁切绝对定位浮层，所以改成顶栏下方就地展开，
     两列排布，8 个语种只占 4 行。 */
  .np-nav .np-translate-menu--inline {
    position: static;
    display: none;
    flex: none;
    align-self: stretch;
    width: auto;
    max-height: none;
    margin: 0;
    padding: 10px 16px 12px;
    border: 0;
    border-bottom: 1px solid var(--np-line);
    border-radius: 0;
    background: var(--np-bg-soft);
    box-shadow: none;
    z-index: auto;
  }

  .np-nav .np-translate-menu--inline.is-open {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  /* 全局 .np-nav a{display:block} 特异性 0,1,1，这里提权把 flex 布局抢回来 */
  .np-nav .np-translate-menu__item {
    display: flex;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--np-line);
    border-radius: 9px;
    background: var(--np-bg);
    font-size: 12.5px;
  }

  .np-nav .np-translate-menu__item span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .np-nav .np-translate-menu__item em {
    display: none;
  }
}

/* 头像加载失败时的首字占位（脚本把破图换成这个） */
.np-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
}

.np-member__avatar .np-avatar-fallback {
  font-size: 17px;
}

/* ==========================================================================
   16. 会员卡档位点选 + 收银台弹窗
   ========================================================================== */

/* 档位可点：主价格跟着选中档位走，省得进弹窗前还不知道自己买了哪个 */
.np-vipcard__tiers--pick .np-vipcard__tier {
  position: relative;
  cursor: pointer;
  transition: background var(--np-transition), color var(--np-transition);
}

.np-vipcard__tiers--pick .np-vipcard__tier:hover {
  background: var(--np-bg-soft);
}

.np-vipcard__tiers--pick .np-vipcard__tier.is-active {
  background: var(--np-primary-soft);
}

/* 选中档位：底部一条主色线 + 右上角对勾，不用大色块，卡片整体仍是浅色调 */
.np-vipcard__tiers--pick .np-vipcard__tier.is-active::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--np-primary);
}

.np-vipcard__tiers--pick .np-vipcard__tier.is-active::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--np-primary);
  box-shadow: 0 0 0 3px var(--np-primary-soft);
}

.np-vipcard__tiers--pick .np-vipcard__tier.is-active .np-vipcard__tier-name {
  color: var(--np-primary);
}

/* 按钮：真正的 <button>，重置掉浏览器默认外观 */
button.np-vipcard__cta {
  width: calc(100% - 32px);
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.np-vipcard__cta.is-done {
  background: var(--np-bg-soft);
  color: var(--np-text-2);
  cursor: default;
}

.np-vipcard__cta.is-done:hover {
  transform: none;
  opacity: 1;
}

.np-vipcard__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: -8px 16px 14px;
  font-size: 11.5px;
  color: var(--np-muted);
}

.np-vipcard__note svg {
  color: var(--np-primary);
}

/* --- 弹窗骨架 --------------------------------------------------------- */
html.np-checkout-lock {
  overflow: hidden;
}

.np-checkout {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.np-checkout[hidden] {
  display: none;
}

.np-checkout__mask {
  position: absolute;
  inset: 0;
  background: rgba(12, 17, 24, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: np-ck-fade 0.2s ease both;
}

.np-checkout__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: min(86vh, 720px);
  border-radius: 16px;
  background: var(--np-bg);
  box-shadow: 0 24px 60px rgba(9, 15, 25, 0.28);
  overflow: hidden;
  animation: np-ck-pop 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.np-checkout.is-closing .np-checkout__panel {
  animation: np-ck-out 0.18s ease both;
}

.np-checkout.is-closing .np-checkout__mask {
  animation: np-ck-fade 0.18s ease both reverse;
}

@keyframes np-ck-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes np-ck-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes np-ck-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.98); }
}

.np-checkout__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--np-bg-soft);
  color: var(--np-muted);
  cursor: pointer;
  transition: background var(--np-transition), color var(--np-transition);
}

.np-checkout__close:hover {
  background: var(--np-line);
  color: var(--np-text);
}

/* 头图：和侧栏会员卡同一套渐变，让用户一眼认出是"刚才那张卡" */
.np-checkout__head {
  position: relative;
  padding: 20px 22px 18px;
  background: linear-gradient(135deg, #ff7d59, #ff2d55);
  color: #fff;
}

.np-checkout__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11.5px;
  font-weight: 600;
}

.np-checkout__title {
  margin: 10px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.np-checkout__account {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  font-size: 12px;
  opacity: 0.9;
}

.np-checkout__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 22px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.np-checkout__label {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--np-muted);
}

.np-checkout__step + .np-checkout__step {
  margin-top: 18px;
}

/* --- 套餐 --- */
.np-checkout__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.np-checkout__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px 10px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: var(--np-bg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--np-transition), background var(--np-transition), box-shadow var(--np-transition);
}

.np-checkout__plan:hover {
  border-color: var(--np-primary);
}

.np-checkout__plan.is-active {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
  box-shadow: 0 0 0 1px var(--np-primary) inset;
}

.np-checkout__plan-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--np-text);
}

.np-checkout__plan-price {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

.np-checkout__plan-meta {
  font-size: 11px;
  color: var(--np-muted);
}

.np-checkout__plan-origin {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  color: var(--np-muted);
}

.np-checkout__plan-origin s {
  opacity: 0.8;
}

/* --- 支付渠道 --- */
.np-checkout__gateways {
  display: grid;
  gap: 8px;
}

.np-checkout__gw {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: var(--np-bg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--np-transition), background var(--np-transition);
}

.np-checkout__gw:hover {
  border-color: var(--np-primary);
}

.np-checkout__gw.is-active {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
}

.np-checkout__gw-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.np-checkout__gw--alipay .np-checkout__gw-logo {
  background: rgba(22, 119, 255, 0.1);
  color: #1677ff;
}

.np-checkout__gw--wechat .np-checkout__gw-logo {
  background: rgba(7, 193, 96, 0.12);
  color: #07c160;
}

.np-checkout__gw-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.np-checkout__gw-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--np-text);
}

.np-checkout__gw-text small {
  margin-top: 1px;
  font-size: 11px;
  color: var(--np-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-checkout__gw-tick {
  display: none;
  color: var(--np-primary);
}

.np-checkout__gw.is-active .np-checkout__gw-tick {
  display: flex;
}

.np-checkout__warn {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(214, 54, 56, 0.28);
  border-radius: 8px;
  background: rgba(214, 54, 56, 0.06);
  font-size: 12.5px;
  color: var(--np-accent);
}

/* --- 底栏 --- */
.np-checkout__foot {
  flex: 0 0 auto;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--np-line);
  background: var(--np-bg);
}

.np-checkout__foot[hidden] {
  display: none;
}

.np-checkout__sum {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.np-checkout__sum-label {
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-checkout__sum-price {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

.np-checkout__sum-origin {
  font-size: 12px;
  color: var(--np-muted);
}

.np-checkout__submit {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #4facfe, #2563eb);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--np-transition), transform var(--np-transition);
}

.np-checkout__submit:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

.np-checkout__submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.np-checkout.is-busy .np-checkout__submit {
  position: relative;
  color: transparent;
}

.np-checkout.is-busy .np-checkout__submit::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: np-ck-spin 0.7s linear infinite;
}

@keyframes np-ck-spin {
  to { transform: rotate(360deg); }
}

.np-checkout__safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 9px 0 0;
  font-size: 11px;
  color: var(--np-muted);
}

.np-checkout__safe svg {
  flex: 0 0 auto;
  color: #2ea043;
}

/* --- 二维码步骤 --- */
.np-checkout__step--pay {
  padding-bottom: 14px;
}

.np-checkout__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 46px 0;
  font-size: 13px;
  color: var(--np-muted);
}

.np-checkout__spin {
  width: 16px;
  height: 16px;
  border: 2px solid var(--np-line);
  border-top-color: var(--np-primary);
  border-radius: 50%;
  animation: np-ck-spin 0.7s linear infinite;
}

.np-checkout__qr {
  text-align: center;
}

.np-checkout__qr-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}

.np-checkout__qr-head strong {
  font-size: 14px;
  font-weight: 600;
}

.np-checkout__qr-head small {
  font-size: 12px;
  color: var(--np-muted);
}

.np-checkout__qr-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--np-line);
  border-radius: 12px;
  background: #fff;
}

.np-checkout__qr-img svg,
.np-checkout__qr-img img {
  display: block;
  width: min(216px, 58vw);
  height: auto;
  aspect-ratio: 1 / 1;
}

.np-checkout__qr-warn {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
  font-size: 11.5px;
  line-height: 1.65;
  color: #a16207;
  text-align: left;
}

.np-checkout__open-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 0;
  border: 0;
  border-radius: 10px;
  background: #1677ff;
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.np-checkout__qr-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--np-text-2);
}

.np-checkout__qr-status.is-fail {
  color: var(--np-accent);
}

.np-checkout__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ea043;
  box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.5);
  animation: np-ck-pulse 1.6s ease-out infinite;
}

@keyframes np-ck-pulse {
  70% { box-shadow: 0 0 0 7px rgba(46, 160, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0); }
}

.np-checkout__qr-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
}

.np-checkout__link {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--np-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.np-checkout__link:hover {
  color: var(--np-primary);
}

/* --- 成功态 --- */
.np-checkout__step--done {
  padding: 26px 0 30px;
}

.np-checkout__done {
  text-align: center;
}

.np-checkout__done-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(46, 160, 67, 0.12);
  color: #2ea043;
}

.np-checkout__done strong {
  display: block;
  margin-top: 12px;
  font-size: 16px;
}

.np-checkout__done p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--np-muted);
}

/* --- 手机：底部抽屉 --- */
@media (max-width: 640px) {
  .np-checkout {
    align-items: flex-end;
    padding: 0;
  }

  .np-checkout__panel {
    width: 100%;
    max-height: 90vh;
    border-radius: 18px 18px 0 0;
    animation: np-ck-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .np-checkout.is-closing .np-checkout__panel {
    animation: np-ck-down 0.2s ease both;
  }

  @keyframes np-ck-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @keyframes np-ck-down {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
  }

  .np-checkout__head {
    padding: 18px 18px 16px;
  }

  .np-checkout__body {
    padding: 16px 18px 4px;
  }

  .np-checkout__foot {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .np-checkout__plans {
    gap: 8px;
  }

  .np-checkout__plan {
    padding: 10px 11px 9px;
  }

  .np-checkout__plan-price {
    font-size: 17px;
  }

  .np-checkout__qr-img svg,
  .np-checkout__qr-img img {
    width: min(230px, 62vw);
  }
}

/* 暗色：弹窗自带白底二维码，其余跟随令牌 */
body.np-dark .np-checkout__panel {
  background: var(--np-bg);
}

body.np-dark .np-checkout__mask {
  background: rgba(0, 0, 0, 0.66);
}

/* --- 整页收银台：手机端唤起支付宝 --- */
.np-pay__open-app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 0;
  border: 0;
  border-radius: 10px;
  background: #1677ff;
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--np-transition);
}

.np-pay__open-app:hover {
  opacity: 0.92;
  color: #fff;
}

.np-pay__qr-warn {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
  font-size: 12px;
  line-height: 1.7;
  color: #a16207;
  text-align: left;
}

.np-pay__qr-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--np-muted);
}

@media (prefers-reduced-motion: reduce) {
  .np-checkout__panel,
  .np-checkout__mask,
  .np-checkout__pulse,
  .np-checkout__spin,
  .np-checkout.is-busy .np-checkout__submit::after {
    animation: none !important;
  }
}

/* ==========================================================================
   17. 课程模块
   ========================================================================== */

/* --- 头部：封面 + 标题 + 价格 CTA --- */
.np-course-hero {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
  padding: 18px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
}

.np-course-hero__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--np-radius) - 2px);
  background: var(--np-bg-soft);
  overflow: hidden;
}

.np-course-hero__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-course-hero__ph {
  display: flex;
  color: var(--np-muted);
  opacity: 0.7;
}

.np-course-hero__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(12, 17, 24, 0.62);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

.np-course-hero__tag--free {
  background: #16a34a;
}

.np-course-hero__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.np-course-hero__cats a {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 12px;
  font-weight: 600;
}

.np-course-hero__title {
  margin: 0;
  font-size: 23px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.np-course-hero__sub {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--np-text-2);
}

.np-course-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-course-hero__rate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.np-course-hero__rate b {
  color: #f59e0b;
}

.np-course-hero__teacher {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 13px;
}

.np-course-hero__teacher span {
  color: var(--np-muted);
  font-size: 12px;
}

.np-course-hero__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.np-course-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--np-line);
}

.np-course-hero__price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.np-course-hero__price b {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

.np-course-hero__price s {
  font-size: 13px;
  color: var(--np-muted);
}

.np-course-hero__price--done b {
  font-size: 19px;
  color: #16a34a;
}

/* 学习进度 */
.np-course-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.np-course-progress__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--np-bg-soft);
  overflow: hidden;
}

.np-course-progress__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4facfe, #2563eb);
  transition: width 300ms ease;
}

.np-course-progress__text {
  font-size: 12px;
  color: var(--np-muted);
  white-space: nowrap;
}

.np-course-progress__go {
  padding: 4px 10px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg);
  font-family: inherit;
  font-size: 12px;
  color: var(--np-primary);
  cursor: pointer;
}

/* --- 播放器 --- */
.np-course-player {
  margin-top: 18px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  overflow: hidden;
}

.np-course-player__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b1016;
}

.np-course-player__frame iframe,
.np-course-player__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.np-course-player__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.np-course-player__ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.np-course-player__ph-tip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 10px;
  background: rgba(12, 17, 24, 0.55);
  color: #fff;
  text-align: center;
}

.np-course-player__ph-tip p {
  margin: 0;
  font-size: 13px;
}

.np-course-player__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--np-line);
}

.np-course-player__title {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-course-player__done {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg);
  font-family: inherit;
  font-size: 12px;
  color: var(--np-text-2);
  cursor: pointer;
  transition: color var(--np-transition), border-color var(--np-transition);
}

.np-course-player__done.is-on {
  border-color: rgba(46, 160, 67, 0.45);
  background: rgba(46, 160, 67, 0.1);
  color: #16a34a;
}

/* --- 锚点导航 --- */
.np-course-nav {
  position: sticky;
  top: var(--np-header-h, 64px);
  z-index: 5;
  display: flex;
  gap: 4px;
  margin: 18px 0 0;
  padding: 6px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg);
  overflow-x: auto;
  scrollbar-width: none;
}

.np-course-nav::-webkit-scrollbar {
  display: none;
}

.np-course-nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--np-text-2);
  white-space: nowrap;
  transition: background var(--np-transition), color var(--np-transition);
}

.np-course-nav a:hover {
  background: var(--np-bg-soft);
}

.np-course-nav a.is-active {
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 600;
}

.np-course-nav a i {
  padding: 0 5px;
  border-radius: 999px;
  background: var(--np-bg-soft);
  font-size: 11px;
  font-style: normal;
}

/* --- 通用区块 --- */
.np-course-sec {
  margin-top: 26px;
  /* 锚点跳转时留出「吸顶导航条 + 站点头部」的高度，否则标题会被压在条下面 */
  scroll-margin-top: calc(var(--np-header-h, 64px) + 74px);
}

.np-course-sec__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
}

.np-course-sec__act {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--np-primary);
  cursor: pointer;
}

.np-course-sec__meta {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-course-empty {
  padding: 26px 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--np-muted);
}

.np-course-intro {
  font-size: 15px;
  line-height: 1.85;
}

.np-course-block {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: var(--np-bg-soft);
}

.np-course-block__title {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 700;
}

.np-course-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-course-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13.5px;
  line-height: 1.6;
}

.np-course-benefits svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #16a34a;
}

.np-course-audience {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--np-text-2);
}

/* --- 目录 --- */
.np-course-chapter {
  margin-bottom: 10px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: var(--np-bg);
  overflow: hidden;
}

.np-course-chapter__head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.np-course-chapter__head:hover {
  background: var(--np-bg-soft);
}

.np-course-chapter__arrow {
  flex: 0 0 auto;
  color: var(--np-muted);
  transition: transform var(--np-transition);
}

.np-course-chapter.is-open .np-course-chapter__arrow {
  transform: rotate(90deg);
}

.np-course-chapter__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 12px;
  font-weight: 700;
}

.np-course-chapter__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-course-chapter__meta {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--np-muted);
}

.np-course-chapter__list {
  display: none;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}

.np-course-chapter.is-open .np-course-chapter__list {
  display: block;
}

.np-course-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px dashed var(--np-line);
  cursor: pointer;
  transition: background var(--np-transition);
}

.np-course-lesson:hover {
  background: var(--np-bg-soft);
}

.np-course-lesson__no {
  flex: 0 0 auto;
  width: 32px;
  font-size: 12.5px;
  color: var(--np-muted);
  font-variant-numeric: tabular-nums;
}

.np-course-lesson__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.np-course-lesson__title {
  font-size: 13.5px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-course-lesson__desc {
  font-size: 11.5px;
  color: var(--np-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-course-lesson__tag,
.np-course-lesson__lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

.np-course-lesson__tag {
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 600;
}

.np-course-lesson__lock {
  background: var(--np-bg-soft);
  color: var(--np-muted);
}

.np-course-lesson__play {
  flex: 0 0 auto;
  color: var(--np-muted);
  opacity: 0.75;
}

.np-course-lesson__dur {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--np-muted);
  font-variant-numeric: tabular-nums;
}

.np-course-lesson__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--np-line);
  border-radius: 50%;
  background: var(--np-bg);
  color: var(--np-muted);
  cursor: pointer;
  transition: all var(--np-transition);
}

.np-course-lesson__done:hover {
  border-color: #16a34a;
  color: #16a34a;
}

.np-course-lesson.is-done .np-course-lesson__done {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}

.np-course-lesson.is-done .np-course-lesson__title {
  color: var(--np-muted);
}

.np-course-lesson.is-playing {
  background: var(--np-primary-soft);
}

.np-course-lesson.is-playing .np-course-lesson__title {
  color: var(--np-primary);
  font-weight: 600;
}

.np-course-lesson.is-locked {
  cursor: pointer;
}

/* --- 资料 --- */
.np-course-files {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  overflow: hidden;
}

.np-course-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
}

.np-course-files li + li {
  border-top: 1px dashed var(--np-line);
}

.np-course-files__ico {
  display: inline-flex;
  color: var(--np-primary);
}

.np-course-files__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-course-files__size {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--np-muted);
}

.np-course-files__btn {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--np-primary);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--np-primary);
}

.np-course-lockbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 18px;
  border: 1px dashed var(--np-line);
  border-radius: 10px;
  background: var(--np-bg-soft);
  text-align: center;
}

.np-course-lockbox__ico {
  display: inline-flex;
  color: var(--np-muted);
}

.np-course-lockbox__text {
  margin: 0;
  font-size: 13px;
  color: var(--np-text-2);
}

/* --- 常见问题 --- */
.np-course-faq {
  border: 1px solid var(--np-line);
  border-radius: 10px;
  overflow: hidden;
}

.np-course-faq__item + .np-course-faq__item {
  border-top: 1px solid var(--np-line);
}

.np-course-faq__item summary {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.np-course-faq__item summary::-webkit-details-marker {
  display: none;
}

.np-course-faq__item summary::after {
  content: '+';
  float: right;
  color: var(--np-muted);
  font-weight: 400;
}

.np-course-faq__item[open] summary::after {
  content: '−';
}

.np-course-faq__a {
  padding: 0 14px 14px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--np-text-2);
}

/* --- 评价 --- */
.np-course-rating {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: var(--np-bg-soft);
}

.np-course-rating__score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.np-course-rating__score b {
  font-size: 26px;
  font-weight: 800;
  color: #f59e0b;
  line-height: 1;
}

.np-course-rating__score span {
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-course-rating__empty {
  margin: 0;
  font-size: 13px;
  color: var(--np-muted);
}

.np-stars {
  display: inline-flex;
  gap: 1px;
  color: #f59e0b;
}

.np-stars__item {
  display: inline-flex;
  opacity: 0.26;
}

.np-stars__item.is-full {
  opacity: 1;
}

.np-stars__item.is-half {
  opacity: 0.62;
}

.np-course-rate-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- 侧栏 --- */
.np-course-side {
  position: sticky;
  top: calc(var(--np-header-h, 64px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - var(--np-header-h, 64px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.np-course-buy {
  padding: 16px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
}

.np-course-buy__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}

.np-course-buy__price b {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

.np-course-buy__price s {
  font-size: 13px;
  color: var(--np-muted);
}

.np-course-buy__price--done {
  flex-direction: column;
  gap: 4px;
}

.np-course-buy__price--done b {
  font-size: 19px;
  color: #16a34a;
}

.np-course-buy__price--done span {
  font-size: 12px;
  color: var(--np-muted);
}

.np-course-buy__off {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(214, 54, 56, 0.1);
  color: var(--np-accent);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}

.np-course-buy__vip {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--np-primary);
}

.np-course-buy__off-sale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border-radius: 10px;
  background: var(--np-bg-soft);
  font-size: 13.5px;
  color: var(--np-muted);
}

.np-course-params {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.np-course-params li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px dashed var(--np-line);
  font-size: 12.5px;
}

.np-course-params li span {
  color: var(--np-muted);
}

.np-course-params li b {
  font-weight: 600;
  text-align: right;
}

.np-course-buy__notice {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--np-bg-soft);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--np-muted);
}

.np-course-teacher__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.np-course-teacher__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.np-course-teacher__head span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.np-course-teacher__head i {
  font-size: 12px;
  font-style: normal;
  color: var(--np-muted);
}

.np-course-teacher__desc {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--np-text-2);
}

.np-course-rel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-course-rel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.np-course-rel__item + .np-course-rel__item {
  border-top: 1px dashed var(--np-line);
}

.np-course-rel__thumb {
  display: block;
  flex: 0 0 auto;
  width: 78px;
  height: 52px;
  border-radius: 6px;
  background: var(--np-bg-soft);
  overflow: hidden;
}

.np-course-rel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-course-rel__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.np-course-rel__body b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-course-rel__body i {
  font-size: 11.5px;
  font-style: normal;
  color: var(--np-accent);
}

/* --- 小屏底部购买条 --- */
.np-course-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--np-line);
  background: var(--np-bg);
  box-shadow: 0 -6px 22px rgba(9, 15, 25, 0.1);
  transform: translateY(115%);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.np-course-buybar.is-show {
  transform: translateY(0);
}

.np-course-buybar__price {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.np-course-buybar__price b {
  font-size: 21px;
  font-weight: 800;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

.np-course-buybar__price s {
  font-size: 12px;
  color: var(--np-muted);
}

/* --- 课程列表 --- */
.np-course-archive {
  padding: 4px 0 12px;
}

.np-course-archive__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.np-course-archive__desc {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--np-text-2);
}

.np-course-archive__count {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-course-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.np-course-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--np-text-2);
  transition: all var(--np-transition);
}

.np-course-chip:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-course-chip.is-active {
  border-color: var(--np-primary);
  background: var(--np-primary);
  color: #fff;
}

.np-course-chip i {
  font-size: 11px;
  font-style: normal;
  opacity: 0.7;
}

.np-course-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--np-line);
}

.np-course-sort__item {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-course-sort__item:hover {
  background: var(--np-bg-soft);
  color: var(--np-text);
}

.np-course-sort__item.is-active {
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 600;
}

.np-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.np-course-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.np-course-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.np-course-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.np-course-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  overflow: hidden;
  transition: transform var(--np-transition), box-shadow var(--np-transition), border-color var(--np-transition);
}

.np-course-card:hover {
  transform: translateY(-2px);
  border-color: var(--np-primary);
  box-shadow: var(--np-shadow);
}

.np-course-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--np-bg-soft);
  overflow: hidden;
}

.np-course-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-course-card__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--np-muted);
  opacity: 0.7;
}

.np-course-card__level {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(12, 17, 24, 0.6);
  color: #fff;
  font-size: 11px;
}

.np-course-card__tag--free {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.np-course-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  padding: 12px 13px 13px;
}

.np-course-card__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}

.np-course-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-course-card__sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--np-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-course-card__meta {
  margin: 0;
  font-size: 11.5px;
  color: var(--np-muted);
}

.np-course-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--np-line);
}

.np-course-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.np-course-card__price b {
  font-size: 18px;
  font-weight: 800;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

.np-course-card__price s {
  font-size: 11.5px;
  color: var(--np-muted);
}

.np-course-card__price--free {
  font-size: 15px;
  font-weight: 700;
  color: #16a34a;
}

.np-course-card__go {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--np-primary);
}

/* --- 收银台：固定商品（课程 / 单篇）摘要 --- */
.np-checkout__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: var(--np-bg-soft);
}

.np-checkout__item-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.np-checkout__item-name {
  font-size: 13.5px;
  font-weight: 600;
}

.np-checkout__item-desc {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--np-muted);
}

.np-checkout__item-price {
  flex: 0 0 auto;
  font-size: 19px;
  font-weight: 800;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

/* --- 响应式 --- */
@media (max-width: 1024px) {
  .np-course-hero {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .np-course-grid--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .np-course-hero {
    grid-template-columns: 1fr;
  }

  .np-course-hero__media {
    aspect-ratio: 16 / 9;
  }

  .np-course-side {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .np-course-buybar {
    display: flex;
  }

  body.has-np-course-bar .np-content {
    padding-bottom: 78px;
  }

  .np-course-grid,
  .np-course-grid--2,
  .np-course-grid--3,
  .np-course-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .np-course-hero {
    padding: 14px;
  }

  .np-course-hero__title {
    font-size: 20px;
  }

  .np-course-sec {
    margin-top: 20px;
  }

  .np-course-lesson {
    padding: 10px 12px;
  }

  .np-course-lesson__desc {
    display: none;
  }

  .np-course-grid,
  .np-course-grid--2,
  .np-course-grid--3,
  .np-course-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .np-course-rating {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 暗色：封面占位与播放器在深色下别糊成一片 */
body.np-dark .np-course-player__frame {
  background: #000;
}

body.np-dark .np-course-card__level {
  background: rgba(0, 0, 0, 0.66);
}

body.np-dark .np-course-buybar {
  box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .np-course-card,
  .np-course-buybar,
  .np-course-progress__bar i {
    transition: none !important;
  }
}

/* ==========================================================================
   18. 商城模块
   ========================================================================== */

/* --- 面包屑 --- */
.np-shop-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 0 2px;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-shop-crumb a {
  color: var(--np-muted);
}

.np-shop-crumb a:hover {
  color: var(--np-primary);
}

.np-shop-crumb__sep {
  opacity: 0.5;
}

.np-shop-crumb__now {
  color: var(--np-text-2);
}

/* --- 商城头部 --- */
.np-shop-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--np-line);
}

.np-shop-hero__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.np-shop-hero__desc {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--np-text-2);
}

.np-shop-hero__count {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-shop-hero__cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--np-text-2);
  transition: border-color var(--np-transition), color var(--np-transition);
}

.np-shop-hero__cart:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-shop-hero__cart b {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--np-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

/* --- 服务保障条 --- */
.np-shop-service {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.np-shop-service li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: var(--np-bg-soft);
}

.np-shop-service__ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--np-primary);
}

.np-shop-service span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.np-shop-service strong {
  font-size: 13px;
  font-weight: 600;
}

.np-shop-service small {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--np-muted);
}

/* --- 筛选 / 排序 --- */
.np-shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 0;
}

.np-shop-tabs,
.np-shop-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.np-shop-tab {
  padding: 6px 14px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--np-text-2);
  transition: all var(--np-transition);
}

.np-shop-tab:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-shop-tab.is-active {
  border-color: var(--np-primary);
  background: var(--np-primary);
  color: #fff;
  font-weight: 600;
}

.np-shop-sort__item {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-shop-sort__item:hover {
  background: var(--np-bg-soft);
  color: var(--np-text);
}

.np-shop-sort__item.is-active {
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 600;
}

.np-shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.np-shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--np-text-2);
  transition: all var(--np-transition);
}

.np-shop-chip:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-shop-chip.is-active {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 600;
}

.np-shop-chip i {
  font-size: 11px;
  font-style: normal;
  opacity: 0.65;
}

/* --- 商品网格 --- */
.np-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.np-shop-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.np-shop-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.np-shop-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  overflow: hidden;
  transition: transform var(--np-transition), box-shadow var(--np-transition), border-color var(--np-transition);
}

.np-shop-card:hover {
  transform: translateY(-2px);
  border-color: var(--np-primary);
  box-shadow: var(--np-shadow);
}

.np-shop-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--np-bg-soft);
  overflow: hidden;
}

.np-shop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}

.np-shop-card:hover .np-shop-card__img {
  transform: scale(1.03);
}

.np-shop-card__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--np-muted);
  opacity: 0.7;
}

.np-shop-card__off,
.np-shop-card__sold {
  position: absolute;
  top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.np-shop-card__off {
  left: 8px;
  background: var(--np-accent);
}

.np-shop-card__sold {
  right: 8px;
  background: rgba(12, 17, 24, 0.62);
}

.np-shop-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  padding: 11px 12px 12px;
}

.np-shop-card__title {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 600;
}

.np-shop-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-shop-card__sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--np-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-shop-card__badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(214, 54, 56, 0.08);
  color: var(--np-accent);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.np-shop-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 9px;
}

.np-shop-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.np-shop-card__price b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

.np-shop-card__price s {
  font-size: 11.5px;
  color: var(--np-muted);
}

.np-shop-card__sales {
  font-size: 11.5px;
  color: var(--np-muted);
  white-space: nowrap;
}

.np-shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 46px 0 60px;
  text-align: center;
}

.np-shop-empty p {
  margin: 0;
  max-width: 460px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--np-muted);
}

.np-shop-empty-sm {
  padding: 20px 0;
  text-align: center;
  font-size: 13px;
  color: var(--np-muted);
}

/* --- 商品详情 --- */
.np-product {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 26px;
  margin-top: 16px;
}

.np-product__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
  overflow: hidden;
}

.np-product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-product__ph {
  display: flex;
  color: var(--np-muted);
  opacity: 0.65;
}

.np-product__off {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--np-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.np-product__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.np-product__thumbs::-webkit-scrollbar {
  display: none;
}

.np-product__thumb {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  padding: 0;
  border: 1px solid var(--np-line);
  border-radius: 8px;
  background: var(--np-bg);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--np-transition), border-color var(--np-transition);
}

.np-product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-product__thumb:hover {
  opacity: 1;
}

.np-product__thumb.is-active {
  opacity: 1;
  border-color: var(--np-primary);
}

.np-product__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.np-product__sub {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--np-text-2);
}

.np-product__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(214, 54, 56, 0.08);
  color: var(--np-accent);
  font-size: 12px;
  font-weight: 600;
}

.np-product__pricebox {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(214, 54, 56, 0.07), rgba(214, 54, 56, 0.02));
}

.np-product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.np-product__price b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

.np-product__price s {
  font-size: 13.5px;
  color: var(--np-muted);
}

.np-product__tagoff {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--np-accent);
  color: #fff;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
}

.np-product__meta {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--np-muted);
}

/* 规格 */
.np-product__specs {
  margin-top: 16px;
}

.np-product__spec + .np-product__spec {
  margin-top: 12px;
}

.np-product__spec-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--np-text-2);
}

.np-product__spec-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.np-product__spec-val {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 7px 14px;
  border: 1px solid var(--np-line);
  border-radius: 8px;
  background: var(--np-bg);
  font-family: inherit;
  font-size: 13px;
  color: var(--np-text-2);
  cursor: pointer;
  transition: all var(--np-transition);
}

.np-product__spec-val:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-product__spec-val.is-active {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 600;
}

.np-product__spec-val i {
  font-size: 11px;
  font-style: normal;
  opacity: 0.85;
}

/* 数量 */
.np-product__qty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.np-product__qty-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--np-text-2);
}

.np-product__stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--np-line);
  border-radius: 8px;
  overflow: hidden;
}

.np-product__stepper button {
  width: 34px;
  border: 0;
  background: var(--np-bg-soft);
  font-family: inherit;
  font-size: 16px;
  color: var(--np-text-2);
  cursor: pointer;
  transition: background var(--np-transition);
}

.np-product__stepper button:hover {
  background: var(--np-line);
}

.np-product__stepper input {
  width: 54px;
  padding: 7px 0;
  border: 0;
  border-left: 1px solid var(--np-line);
  border-right: 1px solid var(--np-line);
  background: var(--np-bg);
  font-family: inherit;
  font-size: 14px;
  color: var(--np-text);
  text-align: center;
  -moz-appearance: textfield;
}

.np-product__stepper input::-webkit-outer-spin-button,
.np-product__stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.np-product__stock {
  font-size: 12.5px;
  color: var(--np-muted);
}

/* 按钮 */
.np-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.np-product__actions .np-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
}

.np-product__off-sale {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--np-bg-soft);
  font-size: 14px;
  color: var(--np-muted);
}

.np-product__owned {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: #16a34a;
}

.np-product__service {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.np-product__service li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--np-muted);
}

.np-product__service svg {
  color: var(--np-primary);
}

/* 详情 Tab */
.np-product__tabs {
  margin-top: 30px;
}

.np-shop-nav {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: var(--np-bg-soft);
  overflow-x: auto;
  scrollbar-width: none;
}

.np-shop-nav::-webkit-scrollbar {
  display: none;
}

.np-shop-nav button {
  flex: 0 0 auto;
  padding: 8px 18px;
  border: 0;
  border-radius: 7px;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--np-text-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--np-transition), color var(--np-transition);
}

.np-shop-nav button.is-active {
  background: var(--np-bg);
  color: var(--np-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(9, 15, 25, 0.08);
}

.np-shop-panel {
  padding: 18px 0 0;
}

.np-shop-panel[hidden] {
  display: none;
}

.np-product__content {
  font-size: 15px;
  line-height: 1.85;
}

.np-product__params {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  overflow: hidden;
}

.np-product__params th,
.np-product__params td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--np-line);
  font-size: 13.5px;
  text-align: left;
}

.np-product__params tr:last-child th,
.np-product__params tr:last-child td {
  border-bottom: 0;
}

.np-product__params th {
  width: 160px;
  background: var(--np-bg-soft);
  font-weight: 600;
  color: var(--np-text-2);
}

.np-shop-related {
  margin-top: 34px;
}

.np-shop-related__title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
}

/* --- 购物车 --- */
.np-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--np-line);
}

.np-cart-head__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.np-cart-head__clear {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--np-muted);
  cursor: pointer;
}

.np-cart-head__clear:hover {
  color: var(--np-accent);
}

.np-cart-issues {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
}

.np-cart-issues p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #a16207;
}

.np-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  margin-top: 16px;
  align-items: start;
}

.np-cart__list {
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  overflow: hidden;
}

.np-cart__row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto 96px 34px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.np-cart__row + .np-cart__row {
  border-top: 1px dashed var(--np-line);
}

.np-cart__thumb {
  display: block;
  width: 78px;
  height: 78px;
  border-radius: 8px;
  background: var(--np-bg-soft);
  overflow: hidden;
}

.np-cart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-cart__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-cart__spec {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--np-muted);
}

.np-cart__price {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--np-muted);
}

.np-cart__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--np-line);
  border-radius: 8px;
  overflow: hidden;
}

.np-cart__qty button {
  width: 28px;
  border: 0;
  background: var(--np-bg-soft);
  font-family: inherit;
  font-size: 15px;
  color: var(--np-text-2);
  cursor: pointer;
}

.np-cart__qty button:hover {
  background: var(--np-line);
}

.np-cart__qty input {
  width: 44px;
  padding: 6px 0;
  border: 0;
  border-left: 1px solid var(--np-line);
  border-right: 1px solid var(--np-line);
  background: var(--np-bg);
  font-family: inherit;
  font-size: 13.5px;
  text-align: center;
  -moz-appearance: textfield;
}

.np-cart__qty input::-webkit-outer-spin-button,
.np-cart__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.np-cart__sum {
  font-size: 15px;
  font-weight: 700;
  color: var(--np-accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.np-cart__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--np-muted);
  cursor: pointer;
  transition: background var(--np-transition), color var(--np-transition);
}

.np-cart__del:hover {
  background: rgba(214, 54, 56, 0.1);
  color: var(--np-accent);
}

.np-cart__side {
  position: sticky;
  top: calc(var(--np-header-h, 64px) + 16px);
}

.np-cart__box {
  padding: 16px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
}

.np-cart__box-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.np-cart__sum-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-cart__sum-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px dashed var(--np-line);
  font-size: 13px;
  color: var(--np-text-2);
}

.np-cart__sum-list li b {
  font-weight: 600;
  color: var(--np-text);
}

.np-cart__tip {
  margin: 8px 0 0;
  font-size: 12px;
  color: #a16207;
}

.np-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--np-line);
}

.np-cart__total span {
  font-size: 13px;
  color: var(--np-text-2);
}

.np-cart__total b {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--np-accent);
  font-variant-numeric: tabular-nums;
}

.np-cart__off {
  display: block;
  padding: 12px 0;
  border-radius: 8px;
  background: var(--np-bg-soft);
  font-size: 13.5px;
  color: var(--np-muted);
  text-align: center;
}

.np-cart__back {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--np-muted);
  text-align: center;
}

.np-cart__back:hover {
  color: var(--np-primary);
}

.np-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 0 80px;
  color: var(--np-muted);
  text-align: center;
}

.np-cart-empty p {
  margin: 0;
  font-size: 14px;
}

/* --- 移动端底部操作条 --- */
.np-product-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--np-line);
  background: var(--np-bg);
  box-shadow: 0 -6px 22px rgba(9, 15, 25, 0.1);
  transform: translateY(115%);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.np-product-bar.is-show {
  transform: translateY(0);
}

.np-product-bar .np-btn {
  flex: 1 1 auto;
  padding: 11px 0;
}

.np-product-bar__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 40px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  color: var(--np-text-2);
}

.np-product-bar__cart b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--np-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

/* --- 头部购物车入口 --- */
.np-cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--np-text-2);
  transition: background var(--np-transition), color var(--np-transition);
}

.np-cart-toggle:hover {
  background: var(--np-bg-soft);
  color: var(--np-primary);
}

.np-cart-toggle__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--np-accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* --- 轻提示 --- */
.np-shop-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-radius: 10px;
  background: rgba(17, 24, 34, 0.94);
  color: #fff;
  font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(9, 15, 25, 0.28);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.np-shop-toast.is-show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.np-shop-toast__link {
  color: #7ec8ff;
  font-weight: 600;
  white-space: nowrap;
}

/* --- 响应式 --- */
@media (max-width: 1024px) {
  .np-product {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .np-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .np-cart {
    grid-template-columns: minmax(0, 1fr);
  }

  .np-cart__side {
    position: static;
  }
}

@media (max-width: 782px) {
  .np-product {
    grid-template-columns: minmax(0, 1fr);
  }

  .np-product-bar {
    display: flex;
  }

  body.has-np-shop-bar {
    padding-bottom: 78px;
  }

  .np-shop-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .np-shop-service {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .np-shop-grid,
  .np-shop-grid--2,
  .np-shop-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .np-cart__row {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb body del"
      "thumb qty sum";
    row-gap: 8px;
  }

  .np-cart__thumb {
    grid-area: thumb;
    width: 62px;
    height: 62px;
  }

  .np-cart__body {
    grid-area: body;
  }

  .np-cart__qty {
    grid-area: qty;
  }

  .np-cart__sum {
    grid-area: sum;
  }

  .np-cart__del {
    grid-area: del;
  }
}

@media (max-width: 560px) {
  .np-shop-grid,
  .np-shop-grid--2,
  .np-shop-grid--3,
  .np-shop-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .np-product__title {
    font-size: 20px;
  }

  .np-product__price b {
    font-size: 26px;
  }

  .np-shop-service {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.np-dark .np-shop-toast {
  background: rgba(0, 0, 0, 0.9);
}

body.np-dark .np-shop-nav button.is-active {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .np-shop-card,
  .np-shop-card__img,
  .np-product-bar {
    transition: none !important;
  }
}

/* ==========================================================================
   19. 刷题模块
   ========================================================================== */

/* --- 面包屑 --- */
.np-quiz-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 0 2px;
  font-size: 12.5px;
  color: var(--np-muted);
}

.np-quiz-crumb a:hover {
  color: var(--np-primary);
}

.np-quiz-crumb__sep {
  opacity: 0.5;
}

.np-quiz-crumb__now {
  color: var(--np-text-2);
}

/* --- 题库列表 --- */
.np-quiz-archive {
  padding: 14px 0 6px;
}

.np-quiz-archive__title {
  margin: 0 0 6px;
  font-size: 26px;
}

.np-quiz-archive__desc {
  color: var(--np-text-2);
  font-size: 14px;
}

.np-quiz-archive__count {
  margin: 6px 0 0;
  color: var(--np-muted);
  font-size: 13px;
}

.np-quiz-archive__go {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 16px;
  border-radius: var(--np-radius-sm);
  background: var(--np-primary);
  color: #fff;
  font-size: 14px;
}

.np-quiz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
}

.np-quiz-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg);
  color: var(--np-text-2);
  font-size: 13px;
}

.np-quiz-chip i {
  font-style: normal;
  color: var(--np-muted);
  font-size: 12px;
}

.np-quiz-chip.is-active {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.np-quiz-grid {
  display: grid;
  gap: 18px;
  padding: 8px 0 20px;
}

.np-quiz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.np-quiz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.np-quiz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.np-quiz-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  overflow: hidden;
  transition: transform var(--np-transition), box-shadow var(--np-transition);
}

.np-quiz-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--np-shadow);
}

.np-quiz-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--np-primary-soft), var(--np-bg-soft));
  overflow: hidden;
}

.np-quiz-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.np-quiz-card__letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--np-primary);
  font-size: 40px;
  font-weight: 700;
}

.np-quiz-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
}

.np-quiz-card__badge--pay {
  background: var(--np-accent);
}

.np-quiz-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px 15px;
}

.np-quiz-card__cat {
  color: var(--np-primary);
  font-size: 12px;
}

.np-quiz-card__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.np-quiz-card__title a {
  color: var(--np-text);
}

.np-quiz-card__sub {
  margin: 0;
  color: var(--np-muted);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-quiz-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--np-muted);
  font-size: 12.5px;
}

.np-quiz-card__meta strong {
  color: var(--np-text);
}

.np-quiz-card__go {
  margin-top: 4px;
  padding: 8px 0;
  border-radius: var(--np-radius-sm);
  background: var(--np-primary-soft);
  color: var(--np-primary);
  text-align: center;
  font-size: 14px;
}

.np-quiz-empty {
  padding: 40px 0;
  color: var(--np-muted);
  text-align: center;
}

/* --- 题库详情 --- */
.np-quiz-hero {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0 20px;
}

.np-quiz-hero__media {
  border-radius: var(--np-radius);
  overflow: hidden;
  background: var(--np-bg-soft);
}

.np-quiz-hero__img {
  width: 100%;
  height: auto;
  display: block;
}

.np-quiz-hero__title {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.3;
}

.np-quiz-hero__sub {
  margin: 0 0 12px;
  color: var(--np-text-2);
  font-size: 14.5px;
}

.np-quiz-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  color: var(--np-muted);
  font-size: 13px;
}

.np-quiz-hero__meta strong {
  color: var(--np-text);
  font-size: 18px;
  margin-right: 3px;
}

.np-quiz-hero__types {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: var(--np-text-2);
  font-size: 13px;
}

.np-quiz-hero__types li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.np-quiz-hero__types i {
  font-style: normal;
  color: var(--np-muted);
}

.np-quiz-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--np-primary);
}

.np-quiz-hero__dot--multi { background: #0f8a5f; }
.np-quiz-hero__dot--judge { background: #dba617; }
.np-quiz-hero__dot--fill { background: #7b4fd8; }
.np-quiz-hero__dot--essay { background: #d63638; }

.np-quiz-hero__ops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.np-quiz-single__content {
  padding: 12px 0 20px;
  font-size: 15.5px;
  line-height: 1.85;
}

.np-quiz-off {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
  color: var(--np-muted);
}

.np-quiz-lock {
  padding: 26px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
  text-align: center;
}

.np-quiz-lock h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.np-quiz-lock__ops,
.np-quiz-lock__try {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
}

/* --- 刷题页头部 --- */
.np-quiz-head {
  padding: 14px 0 8px;
}

.np-quiz-head__title {
  margin: 0 0 12px;
  font-size: 26px;
}

.np-quiz-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--np-line);
  margin-bottom: 14px;
}

.np-quiz-tab {
  padding: 8px 2px 10px;
  color: var(--np-muted);
  font-size: 15px;
}

.np-quiz-tab.is-active {
  box-shadow: inset 0 -2px 0 var(--np-primary);
  color: var(--np-primary);
  font-weight: 600;
}

.np-quiz-sub {
  margin: 0 0 14px;
  font-size: 20px;
}

.np-quiz-tip {
  color: var(--np-muted);
  font-size: 13px;
}

.np-quiz-tip a {
  color: var(--np-primary);
}

.npq-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.npq-stats li {
  display: flex;
  flex-direction: column;
}

.npq-stats strong {
  font-size: 22px;
  color: var(--np-text);
}

.npq-stats span {
  color: var(--np-muted);
  font-size: 12.5px;
}

/* --- 答题界面 --- */
.npq {
  margin: 10px 0 30px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  overflow: hidden;
}

.npq-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--np-bg-soft);
  border-bottom: 1px solid var(--np-line);
}

.npq-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.npq-bar__bank {
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.npq-bar__mode {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 12px;
}

.npq-bar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.npq-bar__progress {
  color: var(--np-text-2);
  font-size: 13.5px;
}

.npq-bar__timer {
  padding: 3px 10px;
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  border: 1px solid var(--np-line);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.npq-bar__timer.is-urgent {
  border-color: var(--np-accent);
  color: var(--np-accent);
}

.npq-progress {
  height: 3px;
  background: var(--np-line);
}

.npq-progress i {
  display: block;
  height: 100%;
  background: var(--np-primary);
  transition: width var(--np-transition);
}

.npq-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
  padding: 18px;
}

.npq-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.npq-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--np-primary);
  color: #fff;
  font-size: 13px;
}

.npq-item__type {
  padding: 2px 8px;
  border-radius: var(--np-radius-sm);
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 12px;
}

.npq-item__type--multi { background: rgba(15, 138, 95, 0.12); color: #0f8a5f; }
.npq-item__type--judge { background: rgba(219, 166, 23, 0.14); color: #a37a08; }
.npq-item__type--fill { background: rgba(123, 79, 216, 0.12); color: #6a3fd0; }
.npq-item__type--essay { background: rgba(214, 54, 56, 0.12); color: #c6282a; }

.npq-item__diff {
  color: var(--np-muted);
  font-size: 12px;
}

.npq-item__diff--4,
.npq-item__diff--5 {
  color: var(--np-accent);
}

.npq-item__points {
  color: var(--np-muted);
  font-size: 12px;
}

.npq-item__title {
  margin-bottom: 16px;
  font-size: 16.5px;
  line-height: 1.75;
}

.npq-item__title p {
  margin: 0 0 8px;
}

.npq-options {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.npq-option {
  margin-bottom: 9px;
}

.npq-option__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  cursor: pointer;
  transition: border-color var(--np-transition), background var(--np-transition);
}

.npq-option__label:hover {
  border-color: var(--np-primary);
}

.npq-option input {
  margin: 4px 0 0;
}

.npq-option__key {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--np-text-2);
}

.npq-option__text {
  flex: 1 1 auto;
  line-height: 1.6;
}

.npq-option.is-right .npq-option__label {
  border-color: #0f8a5f;
  background: rgba(15, 138, 95, 0.08);
}

.npq-option.is-wrong .npq-option__label {
  border-color: var(--np-accent);
  background: rgba(214, 54, 56, 0.07);
}

.npq-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 15px;
}

.npq-input:focus {
  outline: none;
  border-color: var(--np-primary);
}

.npq-input--area {
  resize: vertical;
  line-height: 1.7;
}

.npq-feedback {
  margin: 0 0 14px;
  padding: 13px 15px;
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
  font-size: 14px;
  line-height: 1.7;
}

.npq-feedback__flag {
  margin: 0 0 6px;
  font-weight: 600;
}

.npq-feedback__flag--ok { color: #0f8a5f; }
.npq-feedback__flag--no { color: var(--np-accent); }

.npq-feedback__right span,
.npq-feedback__ana span {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 12px;
}

.npq-feedback__ana {
  margin-top: 6px;
  color: var(--np-text-2);
}

.npq-item__foot {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}

.npq-btn {
  padding: 8px 18px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.npq-btn:hover {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.npq-btn--primary {
  border-color: var(--np-primary);
  background: var(--np-primary);
  color: #fff;
}

.npq-btn--primary:hover {
  background: var(--np-primary-dark, var(--np-primary));
  color: #fff;
}

.npq-btn--ghost {
  background: transparent;
}

.npq-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- 答题卡 --- */
.npq-side {
  min-width: 0;
}

.npq-card {
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  padding: 14px;
}

.npq-card__title {
  margin: 0 0 10px;
  font-size: 14px;
}

.npq-card__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.npq-card__num {
  padding: 7px 0;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text-2);
  font-size: 13px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.npq-card__num.is-done {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.npq-card__num.is-current {
  box-shadow: 0 0 0 2px var(--np-primary-soft);
  font-weight: 600;
}

.npq-card__tip {
  margin: 10px 0 0;
  color: var(--np-muted);
  font-size: 12px;
}

/* --- 结果 --- */
.npq-result {
  border-top: 1px solid var(--np-line);
  padding: 18px;
}

.npq-result__card {
  padding: 22px;
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
  text-align: center;
}

.npq-result__title {
  margin: 0 0 10px;
  font-size: 18px;
}

.npq-result__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.npq-result__score b {
  font-size: 46px;
  color: var(--np-primary);
  line-height: 1;
}

.npq-result__score span {
  color: var(--np-muted);
}

.npq-result__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.npq-result__meta li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.npq-result__meta span {
  color: var(--np-muted);
  font-size: 12.5px;
}

.npq-result__meta b {
  font-size: 17px;
}

.npq-result__flag {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
}

.npq-result__flag--pass { color: #0f8a5f; }
.npq-result__flag--fail { color: var(--np-accent); }

.npq-result__ops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.npq-result__tip {
  margin: 14px 0 0;
  color: var(--np-muted);
  font-size: 12.5px;
}

/* --- 错题本 --- */
.npq-wrong__sum {
  margin: 0 0 14px;
  color: var(--np-muted);
  font-size: 13px;
}

.npq-wrong__group {
  margin-bottom: 22px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  overflow: hidden;
}

.npq-wrong__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--np-bg-soft);
}

.npq-wrong__head h3 {
  margin: 0;
  font-size: 16px;
}

.npq-wrong__ops {
  display: flex;
  align-items: center;
  gap: 10px;
}

.npq-wrong__count {
  color: var(--np-muted);
  font-size: 13px;
}

.npq-wrong__list {
  margin: 0;
  padding: 0 16px;
  list-style: none;
}

.npq-wrong__item {
  padding: 14px 0;
  border-bottom: 1px dashed var(--np-line);
}

.npq-wrong__item:last-child {
  border-bottom: 0;
}

.npq-wrong__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  line-height: 1.7;
}

.npq-wrong__answer {
  margin-top: 8px;
  color: var(--np-text-2);
  font-size: 14px;
  line-height: 1.7;
}

.npq-wrong__answer ul {
  margin: 0 0 6px;
  padding-left: 18px;
}

.npq-wrong__ana {
  margin: 4px 0 0;
}

.npq-wrong__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.npq-wrong__times {
  color: var(--np-muted);
  font-size: 12.5px;
}

/* --- 练习记录 --- */
.npq-records {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.npq-records th,
.npq-records td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--np-line);
  text-align: left;
}

.npq-records th {
  background: var(--np-bg-soft);
  font-weight: 600;
}

.npq-records__sub {
  color: var(--np-muted);
  font-size: 12.5px;
}

.npq-pass {
  margin-left: 6px;
  color: #0f8a5f;
  font-size: 12px;
}

.npq-fail {
  margin-left: 6px;
  color: var(--np-accent);
  font-size: 12px;
}

@media (max-width: 900px) {
  .np-quiz-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .npq-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .npq-card {
    display: none;
  }

  .npq-card.is-open {
    display: block;
  }

  .np-quiz-grid--3,
  .np-quiz-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .np-quiz-grid--2,
  .np-quiz-grid--3,
  .np-quiz-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .npq-bar {
    padding: 10px 12px;
  }

  .npq-bar__right {
    width: 100%;
    justify-content: space-between;
  }

  .npq-body {
    padding: 14px;
  }

  .npq-item__foot {
    position: sticky;
    bottom: 0;
    padding: 10px 0 4px;
    background: var(--np-bg);
  }

  .npq-item__foot .npq-btn {
    flex: 1 1 auto;
  }

  .npq-result__score b {
    font-size: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-quiz-card,
  .npq-progress i {
    transition: none !important;
  }
}

/* ==========================================================================
   20. 课程 × 题库联动（1.8.23）
   ========================================================================== */

/* --- 返回课程 / 试刷提示 / 所属课程 --- */
.np-quiz-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 18px;
  padding: 8px 14px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg-soft);
  color: var(--np-text-2);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--np-transition), border-color var(--np-transition);
}

.np-quiz-back:hover {
  color: var(--np-primary);
  border-color: var(--np-primary);
}

.np-quiz-trytip {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 3px solid #d97706;
  border-radius: var(--np-radius-sm);
  background: rgba(217, 119, 6, 0.09);
  color: var(--np-text-2);
  font-size: 13px;
}

.np-quiz-trytip--ok {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, 0.09);
}

.np-quiz-courses {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 20px;
}

.np-quiz-courses__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  padding: 10px 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
  text-decoration: none;
  transition: border-color var(--np-transition), transform var(--np-transition);
}

.np-quiz-courses__item:hover {
  border-color: var(--np-primary);
  transform: translateY(-1px);
}

.np-quiz-courses__ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  flex: 0 0 auto;
}

.np-quiz-courses__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.np-quiz-courses__body i {
  color: var(--np-muted);
  font-size: 11px;
  font-style: normal;
}

.np-quiz-courses__body b {
  color: var(--np-text);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-quiz-courses__go {
  margin-left: auto;
  color: var(--np-primary);
  font-size: 12px;
  white-space: nowrap;
}

/* --- 课程页：随堂测验 --- */
.np-course-quizzes__sum {
  margin-left: 10px;
  color: var(--np-muted);
  font-size: 13px;
  font-weight: 400;
}

.np-course-quizzes__progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--np-text-2);
  font-size: 13px;
}

.np-course-quizzes__ring {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--np-primary);
  border-radius: 50%;
  color: var(--np-primary);
  font-size: 11px;
}

.np-course-quizzes__ring b {
  font-size: 14px;
}

.np-course-quizzes__pass,
.np-course-quizzes__todo {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
}

.np-course-quizzes__pass {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.np-course-quizzes__todo {
  background: var(--np-bg-soft);
  color: var(--np-muted);
}

.np-course-quizzes__hint {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--np-radius-sm);
  background: var(--np-primary-soft);
  color: var(--np-text-2);
  font-size: 13px;
}

.np-course-quizzes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.np-course-quiz {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
}

.np-course-quiz.is-final {
  border-color: rgba(217, 119, 6, 0.5);
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.06), transparent 60%);
}

.np-course-quiz.is-passed {
  border-color: rgba(22, 163, 74, 0.45);
}

.np-course-quiz__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.np-course-quiz__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  flex: 0 0 auto;
}

.np-course-quiz__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.np-course-quiz__title b {
  color: var(--np-text);
  font-size: 15px;
  line-height: 1.4;
}

.np-course-quiz__tag {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
  font-size: 11px;
  font-style: normal;
}

.np-course-quiz__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--np-muted);
  font-size: 12px;
}

.np-course-quiz__meta strong {
  color: var(--np-text);
  font-size: 14px;
}

.np-course-quiz__best {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--np-text-2);
  font-size: 12px;
}

.np-course-quiz__best b {
  color: var(--np-primary);
  font-size: 17px;
}

.np-course-quiz__best em {
  color: var(--np-muted);
  font-style: normal;
}

.np-course-quiz__best--none {
  color: var(--np-muted);
}

.np-course-quiz__ok {
  color: #15803d !important;
}

.np-course-quiz__ops {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.np-course-quiz__more {
  margin-left: auto;
  color: var(--np-muted);
  font-size: 12px;
}

/* --- 课程目录里的本章测验 --- */
.np-course-chapter__quiz {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px dashed var(--np-primary);
  border-radius: var(--np-radius-sm);
  background: var(--np-primary-soft);
  color: var(--np-text-2);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--np-transition);
}

.np-course-chapter__quiz:hover {
  background: rgba(34, 113, 177, 0.16);
}

.np-course-chapter__quiz.is-passed {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.09);
}

.np-course-chapter__quiz-ico {
  display: grid;
  place-items: center;
  color: var(--np-primary);
  flex: 0 0 auto;
}

.np-course-chapter__quiz.is-passed .np-course-chapter__quiz-ico {
  color: #15803d;
}

.np-course-chapter__quiz-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--np-text);
}

.np-course-chapter__quiz-meta {
  color: var(--np-muted);
  font-size: 12px;
  white-space: nowrap;
}

.np-course-chapter__quiz-go {
  margin-left: auto;
  color: var(--np-primary);
  font-size: 12px;
  white-space: nowrap;
}

/* --- 后台：题库选择 --- */
.np-course-quizpick,
.np-quiz-coursepick {
  display: grid;
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
}

.np-course-quizpick__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
}

.np-course-quizpick__item span {
  flex: 1;
}

.np-course-quizpick__item i {
  color: var(--np-muted);
  font-style: normal;
  font-size: 12px;
}

.np-quiz-coursepick label {
  display: block;
  font-size: 13px;
}

.np-course-ch__quiz {
  margin: 6px 0 10px;
  padding-left: 22px;
  font-size: 12px;
}

.np-course-ch__quiz select {
  max-width: 260px;
}

@media (max-width: 640px) {
  .np-course-quizzes__grid {
    grid-template-columns: 1fr;
  }

  .np-course-chapter__quiz {
    flex-wrap: wrap;
  }

  .np-course-chapter__quiz-go {
    margin-left: 0;
  }
}

/* ==========================================================================
   21. 订单交付：地址表单 / 订单详情 / 卡密 / 物流 / 后台发货（1.8.24）
   ========================================================================== */

/* --- 收货地址表单（购物车、商品详情页、订单页共用） --- */
.np-addr {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg-soft);
}

.np-addr__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--np-text);
}

.np-addr__req {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--np-accent);
}

.np-addr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.np-addr__field {
  display: block;
  min-width: 0;
}

.np-addr__field--wide {
  grid-column: 1 / -1;
}

.np-addr__field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--np-text-2);
}

.np-addr__field i {
  color: var(--np-accent);
  font-style: normal;
}

.np-addr__field input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 13px;
  box-sizing: border-box;
}

.np-addr__field input:focus {
  outline: none;
  border-color: var(--np-primary);
  box-shadow: 0 0 0 3px var(--np-primary-soft);
}

.np-addr__tip {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--np-accent);
}

/* --- 订单详情页 --- */
.np-order {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 0 48px;
}

.np-order-empty {
  max-width: 520px;
  margin: 60px auto;
  padding: 40px 24px;
  text-align: center;
  color: var(--np-muted);
}

.np-order-empty h1 {
  margin: 14px 0 8px;
  font-size: 22px;
  color: var(--np-text);
}

.np-order-empty p {
  margin: 0 0 20px;
  font-size: 14px;
}

.np-order__hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--np-line);
  border-left: 4px solid var(--np-primary);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  box-shadow: var(--np-shadow);
}

.np-order__hero.is-paid {
  border-left-color: #16a34a;
}

.np-order__hero.is-just {
  animation: npOrderIn 500ms ease-out both;
}

@keyframes npOrderIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.np-order__hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #16a34a1a;
  color: #16a34a;
}

.np-order__hero.is-pending .np-order__hero-icon {
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.np-order__hero-text {
  flex: 1 1 auto;
  min-width: 0;
}

.np-order__hero-text h1 {
  margin: 0 0 5px;
  font-size: 22px;
  color: var(--np-text);
}

.np-order__hero-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--np-text-2);
}

.np-order__hero-meta {
  flex: 0 0 auto;
  text-align: right;
  font-size: 12px;
  color: var(--np-muted);
}

.np-order__hero-meta span {
  display: block;
  margin-bottom: 6px;
}

.np-order__hero-meta code {
  margin-left: 6px;
  color: var(--np-text-2);
  font-size: 11px;
}

.np-order__hero-meta strong {
  font-size: 22px;
  color: var(--np-accent);
}

/* 进度条 */
.np-order__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 20px 0;
  padding: 16px 10px;
  list-style: none;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
}

.np-order__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--np-muted);
}

.np-order__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 60%;
  width: 80%;
  height: 2px;
  background: var(--np-line);
}

.np-order__step.is-done:not(:last-child)::after {
  background: #16a34a;
}

.np-order__step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--np-line);
  background: var(--np-bg);
  font-size: 12px;
  font-weight: 600;
}

.np-order__step.is-done .np-order__step-dot {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}

.np-order__step.is-current .np-order__step-dot {
  border-color: var(--np-primary);
  color: var(--np-primary);
}

.np-order__step-label {
  font-weight: 600;
  color: var(--np-text-2);
}

.np-order__step.is-done .np-order__step-label {
  color: var(--np-text);
}

.np-order__step time {
  font-size: 11px;
}

/* 两栏主体 */
.np-order__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.np-order__main {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.np-order__side {
  display: grid;
  gap: 16px;
}

.np-order__card {
  padding: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  box-shadow: var(--np-shadow);
}

.np-order__card--side {
  padding: 16px;
}

.np-order__card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--np-line);
  font-size: 16px;
  color: var(--np-text);
}

.np-order__card-title svg {
  color: var(--np-primary);
}

.np-order__badge {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 11px;
  font-weight: 600;
}

.np-order__badge--delivered,
.np-order__badge--completed {
  background: #16a34a1a;
  color: #16a34a;
}

.np-order__badge--pending {
  background: #d977061a;
  color: #b45309;
}

.np-order__hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--np-text-2);
}

/* 交付物 */
.np-deliver {
  padding: 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
}

.np-deliver + .np-deliver {
  margin-top: 12px;
}

.np-deliver__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 14px;
}

.np-deliver__head strong {
  color: var(--np-text);
}

.np-deliver__head > span {
  font-size: 12px;
  color: var(--np-muted);
}

.np-deliver__tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 20px;
  background: #16a34a1a;
  color: #16a34a;
  font-size: 11px;
  font-style: normal;
}

.np-deliver__tag--wait {
  background: #d977061a;
  color: #b45309;
}

.np-deliver__cards {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-deliver__cards li {
  padding: 10px 12px;
  border: 1px dashed var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
}

.np-deliver__kv {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: 13px;
}

.np-deliver__kv > span {
  flex: 0 0 38px;
  color: var(--np-muted);
  font-size: 12px;
}

.np-deliver__kv code {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--np-text);
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}

.np-deliver__copy {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-primary);
  font-size: 11px;
  cursor: pointer;
  transition: var(--np-transition);
}

.np-deliver__copy:hover,
.np-deliver__copy.is-copied {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
}

.np-deliver__content {
  padding: 12px 14px;
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  font-size: 13px;
  line-height: 1.85;
  color: var(--np-text-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.np-deliver__download {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.np-deliver__text,
.np-deliver__tip {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--np-text-2);
}

.np-deliver__wait {
  margin: 8px 0 0;
  font-size: 12px;
  color: #b45309;
}

.np-deliver__warn {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--np-radius-sm);
  background: #d977061a;
  color: #b45309;
  font-size: 12px;
}

.np-deliver__ship {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  font-size: 12px;
}

.np-deliver__ship span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--np-muted);
}

.np-deliver__ship b,
.np-deliver__ship code {
  color: var(--np-text);
}

.np-order__receive {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--np-radius-sm);
  background: var(--np-primary-soft);
}

.np-order__receive p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  color: var(--np-text-2);
}

.np-order__done-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: #16a34a;
}

/* 明细表 */
.np-table--order-items tfoot td {
  border-top: 1px solid var(--np-line);
  padding-top: 10px;
  font-size: 13px;
  color: var(--np-text-2);
}

.np-table--order-items tfoot td:last-child,
.np-table--order-items td:last-child {
  text-align: right;
}

.np-table--order-items small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--np-muted);
}

.np-order__total td {
  font-weight: 600;
  color: var(--np-text) !important;
}

.np-order__total b {
  font-size: 17px;
  color: var(--np-accent);
}

/* 侧栏 */
.np-order__addr p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--np-text-2);
}

.np-order__addr strong {
  font-size: 15px;
  color: var(--np-text);
}

.np-order__addr span {
  margin-left: 8px;
  color: var(--np-muted);
}

.np-order__addr-note {
  padding-top: 6px;
  border-top: 1px dashed var(--np-line);
  color: var(--np-muted) !important;
  font-size: 12px !important;
}

.np-order__addr-form {
  margin-top: 12px;
}

.np-order__addr-form[hidden],
.np-orders-ship[hidden] {
  display: none !important;
}

.np-order__meta {
  margin: 0;
  display: grid;
  gap: 9px;
  font-size: 12px;
}

.np-order__meta > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.np-order__meta dt {
  color: var(--np-muted);
}

.np-order__meta dd {
  margin: 0;
  text-align: right;
  color: var(--np-text-2);
}

.np-order__meta code {
  font-size: 11px;
  word-break: break-all;
}

.np-order__ops {
  display: grid;
  gap: 10px;
}

.np-order__msg {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.np-order__msg.is-ok { color: #16a34a; }
.np-order__msg.is-err { color: var(--np-accent); }
.np-order__msg--global { text-align: center; }

/* 我的订单：交付状态小标 */
.np-order-flag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 11px;
  white-space: nowrap;
}

.np-order-flag--pending { background: #d977061a; color: #b45309; }
.np-order-flag--delivered,
.np-order-flag--completed { background: #16a34a1a; color: #16a34a; }

/* 后台发货面板 */
.np-orders-ship {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 20, 25, 0.55);
}

.np-orders-ship__box {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 22px 24px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.np-orders-ship__box h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.np-orders-ship__box .form-table th {
  width: 130px;
}

.np-orders-ship__box .submit {
  margin-bottom: 0;
}

/* 响应式 */
@media (max-width: 980px) {
  .np-order__grid {
    grid-template-columns: 1fr;
  }

  .np-order__side {
    order: -1;
  }
}

@media (max-width: 640px) {
  .np-order {
    padding: 16px 0 36px;
  }

  .np-order__hero {
    flex-wrap: wrap;
    padding: 16px;
  }

  .np-order__hero-text {
    flex: 1 1 calc(100% - 70px);
  }

  .np-order__hero-meta {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding-top: 10px;
    border-top: 1px solid var(--np-line);
  }

  .np-order__hero-meta span { margin-bottom: 0; }

  .np-order__steps {
    padding: 12px 4px;
  }

  .np-order__step-label { font-size: 11px; }
  .np-order__step time { display: none; }

  .np-order__card { padding: 14px; }
  .np-order__card--side { padding: 14px; }

  .np-deliver__head { font-size: 13px; }
  .np-deliver__tag { margin-left: 0; }

  .np-deliver__kv { flex-wrap: wrap; }
  .np-deliver__kv code { flex-basis: 100%; order: 3; }
  .np-deliver__kv .np-deliver__copy { margin-left: auto; }

  .np-addr__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .np-order__hero.is-just { animation: none; }
}

/* ==========================================================================
   22. 卡密中心与站内私信（1.8.25）
   ========================================================================== */

/* hidden 属性在这些组件里必须真的藏起来：徽标、空态、表单都靠它切换。 */
.npm [hidden],
.npm-toggle__badge[hidden],
.np-redeem [hidden],
.np-account__quick [hidden] { display: none !important; }

/* --- 头部私信入口 --- */
.npm-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--np-text-2);
  border-radius: var(--np-radius-sm);
  transition: background var(--np-transition), color var(--np-transition);
}
.npm-toggle:hover { background: var(--np-bg-soft); color: var(--np-primary); }
.npm-toggle__badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--np-accent);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.np-drawer__quick {
  display: flex;
  gap: 8px;
  margin: 10px 0 4px;
  flex-wrap: wrap;
}
.np-drawer__quick a {
  position: relative;
  padding: 6px 12px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--np-text-2);
}
.np-drawer__quick a:hover { border-color: var(--np-primary); color: var(--np-primary); }
.np-drawer__quick .npm-toggle__badge { top: -6px; right: -6px; }

.np-account__quick { list-style: none; margin: 0; padding: 0; }
.np-account__quick li + li { border-top: 1px solid var(--np-line); }
.np-account__quick a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 2px;
  color: var(--np-text);
}
.np-account__quick a:hover strong { color: var(--np-primary); }
.np-account__quick strong { font-size: 14px; }
.np-account__quick span { font-size: 12px; color: var(--np-muted); }
.np-account__quick .npm-toggle__badge { position: absolute; top: 12px; right: 4px; }

/* --- 卡密兑换页 --- */
.np-redeem { max-width: 980px; margin: 32px auto 56px; }
.np-redeem__hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  margin-bottom: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  box-shadow: var(--np-shadow);
}
.np-redeem__hero-icon {
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--np-primary-soft);
  color: var(--np-primary);
}
.np-redeem__hero h1 { margin: 0 0 4px; font-size: 21px; }
.np-redeem__hero p { margin: 0; font-size: 13px; color: var(--np-muted); line-height: 1.6; }
.np-redeem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.np-redeem__panel {
  padding: 20px;
  margin-bottom: 18px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
}
.np-redeem__grid .np-redeem__panel { margin-bottom: 0; }
.np-redeem__title { margin: 0 0 14px; font-size: 16px; }
.np-redeem__form .np-form-row { margin-bottom: 12px; }
.np-redeem__form .np-form-row label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.np-redeem__form input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 14px;
}
.np-redeem__result {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--np-radius-sm);
  font-size: 13px;
  line-height: 1.6;
}
.np-redeem__result.is-ok { background: rgba(29, 122, 61, 0.1); color: #1d7a3d; }
.np-redeem__result.is-err { background: rgba(214, 54, 56, 0.1); color: var(--np-accent); }
.np-redeem__result.is-info { background: var(--np-bg-soft); color: var(--np-text-2); }
.np-redeem__hint { margin: 12px 0 0; font-size: 12px; line-height: 1.7; color: var(--np-muted); }
.np-redeem__who { margin: 10px 0 0; font-size: 12px; color: var(--np-muted); }
.np-redeem__empty { margin: 6px 0; font-size: 13px; color: var(--np-muted); }
.np-redeem__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--np-line);
}
.np-redeem__card:last-child { border-bottom: 0; }
.np-redeem__card.is-done { opacity: 0.6; }
.np-redeem__card-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.np-redeem__card-main strong { font-size: 13px; }
.np-redeem__card-main code { font-size: 12px; color: var(--np-primary); word-break: break-all; }
.np-redeem__card-main span { font-size: 12px; color: var(--np-muted); }
.np-redeem__tag {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--np-bg-soft);
  font-size: 11px;
  font-style: normal;
  color: var(--np-muted);
}
.np-redeem__logs { list-style: none; margin: 0; padding: 0; }
.np-redeem__logs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--np-line);
  font-size: 12px;
}
.np-redeem__logs li:last-child { border-bottom: 0; }
.np-redeem__logs code { color: var(--np-primary); }
.np-redeem__logs span { flex: 1; color: var(--np-text-2); }
.np-redeem__logs time { color: var(--np-muted); }
.np-redeem__foot { display: flex; gap: 18px; margin-top: 16px; font-size: 13px; }
.np-redeem__login { text-align: center; }
.np-redeem__login h1, .np-redeem__login h2 { margin-top: 0; }
.np-deliver__redeem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--np-radius-sm);
  background: var(--np-primary-soft);
  font-size: 13px;
  color: var(--np-primary);
}

/* --- 后台卡密 / 私信管理 --- */
.np-admin-cards__stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.np-admin-cards__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 104px;
  padding: 12px 16px;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  background: #fff;
}
.np-admin-cards__stat strong { font-size: 22px; line-height: 1.2; }
.np-admin-cards__stat span { font-size: 12px; color: #646970; }
.np-admin-cards__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.np-admin-cards__panel {
  padding: 14px 18px 18px;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  background: #fff;
}
.np-admin-cards__panel h2 { margin-top: 0; font-size: 15px; }
.np-admin-cards__filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; align-items: center; }

/* --- 私信页 --- */
.npm {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: min(72vh, 660px);
  min-height: 460px;
  margin: 30px 0 16px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-bg);
  box-shadow: var(--np-shadow);
  overflow: hidden;
}
.npm__side { display: flex; flex-direction: column; border-right: 1px solid var(--np-line); min-height: 0; }
.npm__side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--np-line);
}
.npm__side-head h1 { margin: 0; font-size: 16px; }
.npm__new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: var(--np-bg);
  color: var(--np-primary);
  font-size: 12px;
  cursor: pointer;
}
.npm__new:hover { border-color: var(--np-primary); }
.npm__search { padding: 12px 14px; border-bottom: 1px solid var(--np-line); }
.npm__search input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 13px;
}
.npm__search-list { max-height: 180px; overflow-y: auto; margin-top: 8px; }
.npm__search-hint { margin: 8px 0 0; font-size: 11px; color: var(--np-muted); }
.npm__none { padding: 16px 14px; margin: 0; font-size: 12px; color: var(--np-muted); }
.npm__user {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--np-radius-sm);
  background: transparent;
  color: var(--np-text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.npm__user:hover { background: var(--np-bg-soft); }
.npm__user img { width: 28px; height: 28px; border-radius: 50%; }
.npm__threads { flex: 1; overflow-y: auto; min-height: 0; }
.npm__thread {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--np-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.npm__thread:hover { background: var(--np-bg-soft); }
.npm__thread.is-active { background: var(--np-primary-soft); }
.npm__thread-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; }
.npm__thread-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.npm__thread-name { font-size: 13px; color: var(--np-text); }
.npm__thread-last { font-size: 12px; color: var(--np-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npm__thread.is-unread .npm__thread-name { font-weight: 700; }
.npm__thread-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.npm__thread-meta time { font-size: 10px; color: var(--np-muted); }
.npm__thread-badge {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--np-accent);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.npm__chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.npm__chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--np-line);
}
.npm__back { display: none; border: 0; background: transparent; color: var(--np-text-2); cursor: pointer; }
.npm__peer-avatar { width: 34px; height: 34px; border-radius: 50%; }
.npm__peer { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.npm__peer strong { font-size: 14px; }
.npm__peer span { font-size: 11px; color: var(--np-muted); }
.npm__hide { border: 0; background: transparent; color: var(--np-muted); font-size: 12px; cursor: pointer; }
.npm__hide:hover { color: var(--np-accent); }
.npm__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--np-bg-soft);
}
.npm__msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 14px; }
.npm__msg.is-mine { align-items: flex-end; }
.npm__bubble {
  max-width: min(76%, 560px);
  padding: 9px 13px;
  border: 1px solid var(--np-line);
  border-radius: 12px 12px 12px 3px;
  background: var(--np-bg);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.npm__msg.is-mine .npm__bubble {
  border-color: transparent;
  border-radius: 12px 12px 3px 12px;
  background: var(--np-primary);
  color: #fff;
}
.npm__msg-time { font-size: 10px; color: var(--np-muted); }
.npm__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--np-muted);
  text-align: center;
  padding: 20px;
}
.npm__empty h2 { margin: 4px 0 0; font-size: 16px; color: var(--np-text-2); }
.npm__empty p { margin: 0; font-size: 12px; }
.npm__composer { padding: 12px 16px; border-top: 1px solid var(--np-line); }
.npm__composer textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 13px;
  resize: vertical;
}
.npm__composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.npm__tip { flex: 1; font-size: 12px; color: var(--np-accent); }
.npm__foot { display: flex; gap: 18px; font-size: 13px; color: var(--np-muted); }

@media (max-width: 760px) {
  .np-redeem__grid { grid-template-columns: 1fr; }
  .npm { grid-template-columns: 1fr; height: min(78vh, 620px); }
  .npm:not(.is-chat) .npm__chat { display: none; }
  .npm.is-chat .npm__side { display: none; }
  .npm__back { display: inline-flex; }
  .np-redeem__hero { padding: 16px; }
  .np-redeem__hero h1 { font-size: 18px; }
  .np-deliver__redeem { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   23. QQ 快捷登录（1.8.26，图标于 1.8.27 改用官方在线图标）
   ========================================================================== */
.np-auth__social { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--np-line); text-align: center; }
.np-auth__social-label { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; font-size: 12px; color: var(--np-muted); }
.np-auth__social-label::before,
.np-auth__social-label::after { content: ''; flex: 1; height: 1px; background: var(--np-line); }

.np-auth__qq {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 42px; padding: 0 16px;
  border: 1px solid #12b7f5; border-radius: var(--np-radius-sm);
  background: #12b7f5; color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: var(--np-transition);
}
.np-auth__qq:hover { background: #0aa3dd; border-color: #0aa3dd; color: #fff; }
.np-auth__qq svg,
.np-auth__qq img { flex: none; }
/* 官方 QQ 在线图标（透明底彩色企鹅）；与内置兜底 SVG 同尺寸，切换时不跳动 */
.np-auth__qq .np-auth__qq-logo { display: block; width: 22px; height: 22px; object-fit: contain; }
.np-auth__qq--inline { width: auto; min-height: 38px; padding: 0 18px; }
.np-auth__social .np-form-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--np-muted); }

.np-account__qq .np-auth__form { margin-top: 12px; }
.np-qq-unbind { margin-top: 12px; }

/* 主题设置里的配置说明块 */
.np-qq-tip { max-width: 680px; }
.np-qq-tip p { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: var(--np-text-2); }
.np-qq-tip__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-qq-tip__row label { font-weight: 600; }
.np-qq-tip__row input { font-family: monospace; font-size: 12px; }
.np-qq-tip__hint { color: var(--np-muted) !important; }
.np-qq-tip__warn { color: var(--np-accent) !important; }
.np-qq-tip__ok { color: #1d7a3d !important; }

@media (max-width: 760px) {
  .np-auth__qq--inline { width: 100%; }
}

/* ==========================================================================
   24. 商城购买登录要求与登录弹窗（1.8.28）
   ========================================================================== */
body.np-login-open { overflow: hidden; }

/* z-index 高于收银台：服务端返回「需要登录」时登录框要盖在收银台上面 */
.np-login {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.np-login[hidden] { display: none; }
.np-login__mask {
  position: absolute;
  inset: 0;
  background: rgba(12, 17, 24, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: np-ck-fade 0.2s ease both;
}
.np-login__panel {
  position: relative;
  width: min(400px, 100%);
  max-height: min(90vh, 720px);
  overflow-y: auto;
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: var(--np-bg);
  box-shadow: 0 24px 60px rgba(9, 15, 25, 0.3);
  animation: np-ck-pop 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.np-login__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--np-muted);
  cursor: pointer;
}
.np-login__close:hover { background: var(--np-bg-soft); color: var(--np-text); }

.np-login__head { text-align: center; margin-bottom: 18px; }
.np-login__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--np-primary-soft);
  color: var(--np-primary);
}
.np-login__title { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--np-text); }
.np-login__sub { margin: 0; font-size: 12px; line-height: 1.7; color: var(--np-muted); }

.np-login__tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--np-line); }
.np-login__tabs button {
  flex: 1;
  padding: 9px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--np-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.np-login__tabs button.is-active { color: var(--np-primary); border-bottom-color: var(--np-primary); }

.np-login__msg {
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: var(--np-radius-sm);
  font-size: 13px;
  line-height: 1.6;
}
.np-login__msg[hidden] { display: none; }
.np-login__msg.is-ok { background: rgba(29, 122, 61, 0.09); color: #1d7a3d; }
.np-login__msg.is-err { background: rgba(214, 54, 56, 0.09); color: var(--np-accent); }

.np-login__form .np-form-row { margin-bottom: 12px; }
.np-login__remember {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 16px;
  font-size: 13px;
  color: var(--np-text-2);
  cursor: pointer;
}

.np-login__foot { margin-top: 18px; }
.np-login__links { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.np-login__links a { color: var(--np-muted); text-decoration: none; }
.np-login__links a:hover { color: var(--np-primary); }
.np-login__links a[hidden] { display: none; }
.np-login__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--np-muted);
  font-size: 12px;
}
.np-login__or::before,
.np-login__or::after { content: ''; flex: 1; height: 1px; background: var(--np-line); }
.np-login__qq { width: 100%; }

/* 商品详情页 / 购物车页的「需要登录」提示 */
.np-product__login-tip,
.np-cart__login-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-bg-soft);
  font-size: 12px;
  line-height: 1.65;
  color: var(--np-text-2);
}
.np-product__login-tip svg { flex: none; color: var(--np-primary); }
.np-product__login-tip span { flex: 1; min-width: 180px; }
.np-product__login-go,
.np-cart__login-go {
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--np-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.np-product__login-go:hover,
.np-cart__login-go:hover { text-decoration: underline; }
.np-cart__login-tip { display: block; }
.np-cart__login-tip .np-cart__login-go { margin-left: 6px; }

@media (max-width: 760px) {
  .np-login { padding: 0; align-items: flex-end; }
  .np-login__panel {
    width: 100%;
    max-height: 90vh;
    padding: 24px 18px 22px;
    border-radius: 16px 16px 0 0;
  }
  .np-product__login-tip span { min-width: 100%; }
}

/* ==========================================================================
   25. 手机商品页购买选项 / 主题授权 / 用户投稿（1.8.29）
   ========================================================================== */

/* --- 商品页底部常驻操作条：私信入口 --- */
.np-product-bar__pm {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 40px;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  color: var(--np-text-2);
  transition: background var(--np-transition), color var(--np-transition);
}

.np-product-bar__pm:hover { color: var(--np-primary); background: var(--np-bg-soft); }

.np-product-bar__pm .npm-toggle__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--np-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* 商品页隐藏全局底栏后，操作条常驻：补偿被遮住的内容 */
@media (max-width: 782px) {
  body.np-product-no-mnav.has-np-shop-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.np-product-no-mnav .np-product-bar { transform: none; }
  .np-product-bar { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .np-product-bar__pm, .np-product-bar__cart { width: 38px; }
  .np-product-bar .np-btn { font-size: 13px; padding-left: 4px; padding-right: 4px; }
}

/* --- 购买选项弹窗（SKU 面板） --- */
.np-buy {
  position: fixed;
  inset: 0;
  z-index: 9997; /* 低于收银台 9998 与登录框 9999，提交后它们能正常盖上来 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.np-buy[hidden] { display: none; }

.np-buy__mask {
  position: absolute;
  inset: 0;
  background: rgba(12, 17, 24, 0.52);
  opacity: 0;
  transition: opacity 200ms ease;
}

.np-buy.is-open .np-buy__mask { opacity: 1; }

.np-buy__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  background: var(--np-bg);
  box-shadow: 0 -12px 44px rgba(9, 15, 25, 0.24);
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.np-buy.is-open .np-buy__panel { transform: translateY(0); }

@media (min-width: 783px) {
  .np-buy { align-items: center; }
  .np-buy__panel {
    max-height: 84vh;
    border-radius: 14px;
    transform: translateY(16px) scale(0.98);
    opacity: 0;
  }
  .np-buy.is-open .np-buy__panel { transform: translateY(0) scale(1); opacity: 1; }
}

.np-buy__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--np-bg-soft);
  color: var(--np-text-2);
  cursor: pointer;
}

.np-buy__head { display: flex; gap: 14px; padding: 20px 52px 14px 18px; }

.np-buy__thumb {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  background: var(--np-bg-soft);
}

.np-buy__thumb img { width: 100%; height: 100%; object-fit: cover; }
.np-buy__thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--np-muted); }

.np-buy__headinfo { min-width: 0; flex: 1; }
.np-buy__title { margin: 2px 0 8px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--np-text); }
.np-buy__priceline { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.np-buy__priceline b { font-size: 22px; color: var(--np-accent); }
.np-buy__priceline s { font-size: 13px; color: var(--np-muted); }
.np-buy__picked { margin: 0; font-size: 12.5px; color: var(--np-muted); }

.np-buy__services { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; border-bottom: 1px solid var(--np-line); }
.np-buy__services span {
  padding: 3px 8px;
  border: 1px solid var(--np-line);
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--np-text-2);
}

.np-buy__body { flex: 1; overflow-y: auto; padding: 16px 18px 8px; }
.np-buy__spec { margin-bottom: 18px; }
.np-buy__label { display: block; margin-bottom: 9px; font-size: 13.5px; font-weight: 600; color: var(--np-text); }
.np-buy__spec-vals { display: flex; flex-wrap: wrap; gap: 8px; }

.np-buy__spec-val {
  padding: 8px 13px;
  border: 1px solid var(--np-line);
  border-radius: 6px;
  background: var(--np-bg);
  color: var(--np-text-2);
  font-size: 13px;
  cursor: pointer;
  transition: var(--np-transition);
}

.np-buy__spec-val i { margin-left: 4px; font-style: normal; font-size: 11px; color: var(--np-accent); }
.np-buy__spec-val:hover { border-color: var(--np-primary); }
.np-buy__spec-val.is-active { border-color: var(--np-primary); background: var(--np-primary-soft); color: var(--np-primary); font-weight: 600; }

.np-buy__qty { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.np-buy__qty .np-buy__label { margin: 0; }
.np-buy__stepper { display: inline-flex; align-items: center; border: 1px solid var(--np-line); border-radius: 6px; overflow: hidden; }
.np-buy__stepper button { width: 34px; height: 34px; border: 0; background: var(--np-bg-soft); color: var(--np-text); font-size: 18px; cursor: pointer; }
.np-buy__stepper input { width: 46px; height: 34px; border: 0; border-left: 1px solid var(--np-line); border-right: 1px solid var(--np-line); text-align: center; font-size: 14px; background: var(--np-bg); color: var(--np-text); }
.np-buy__stock { font-size: 12.5px; color: var(--np-muted); }

.np-buy__msg { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.np-buy__msg.is-err { background: rgba(214, 54, 56, 0.08); color: var(--np-accent); }
.np-buy__msg.is-ok { background: var(--np-primary-soft); color: var(--np-primary); }

.np-buy__foot {
  display: flex;
  gap: 10px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--np-line);
}
.np-buy__foot .np-btn { flex: 1; min-height: 44px; }
.np-buy__cart { border-color: var(--np-primary); color: var(--np-primary); }
.np-buy__submit { background: var(--np-accent); border-color: var(--np-accent); }

html.np-buy-lock, body.np-buy-open { overflow: hidden; }

/* --- 主题授权后台 --- */
.np-license__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 18px; }
.np-license__card { padding: 20px; border: 1px solid var(--np-line); border-radius: 10px; background: #fff; }
.np-dark .np-license__card { background: var(--np-bg); }
.np-license__card h2 { margin: 0 0 14px; font-size: 16px; }
.np-license__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 14px; }
.np-license__badge.is-active { background: rgba(34, 163, 103, 0.12); color: #128a56; }
.np-license__badge.is-none { background: var(--np-bg-soft); color: var(--np-muted); }
.np-license__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.np-license__meta { margin: 16px 0; }
.np-license__meta div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--np-line); font-size: 13px; }
.np-license__meta dt { color: var(--np-muted); }
.np-license__meta dd { margin: 0; color: var(--np-text); font-weight: 500; word-break: break-all; }
.np-license__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.np-license__result { margin: 12px 0 0; font-size: 13px; }
.np-license__result.is-ok, .np-license__form-msg.is-ok, .np-license__gen-msg.is-ok { color: #128a56; }
.np-license__result.is-err, .np-license__form-msg.is-err, .np-license__gen-msg.is-err { color: var(--np-accent); }
.np-license__tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--np-line); }
.np-license__tabs button { padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--np-muted); font-size: 13px; cursor: pointer; }
.np-license__tabs button.is-active { border-bottom-color: var(--np-primary); color: var(--np-primary); font-weight: 600; }
.np-license__form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.np-license__form input[type='text'] { width: 100%; margin-bottom: 8px; }
.np-license__form .description { margin: 0 0 12px; color: var(--np-muted); }
.np-license__form-msg { margin-top: 10px; font-size: 13px; }
.np-license__row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.np-license__row label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--np-muted); }
.np-license__wide { display: block; margin-bottom: 12px; font-size: 12.5px; color: var(--np-muted); }
.np-license__wide input { display: block; width: 100%; margin-top: 4px; }
.np-license__cards { width: 100%; margin-top: 12px; font-family: monospace; font-size: 12px; }
.np-license__help ul { margin: 0 0 14px; padding-left: 20px; }
.np-license__help li { margin-bottom: 8px; font-size: 13px; line-height: 1.7; color: var(--np-text-2); }
.np-license__issued h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.np-license__issued-clear { font-size: 12px; color: var(--np-muted); }
.np-license__issued-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.np-license__issued-table th, .np-license__issued-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--np-line); }
.np-license__issued-table th { color: var(--np-muted); font-weight: 600; }
.np-license__issued-table .np-license__code code { background: var(--np-bg-soft); padding: 2px 6px; border-radius: 4px; }
.np-license__issued-table .button-link { color: var(--np-primary); cursor: pointer; }
.np-license-inline { display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.np-license-inline.is-active { background: rgba(34, 163, 103, 0.12); color: #128a56; }
.np-license-inline.is-none { background: var(--np-bg-soft); color: var(--np-muted); }

/* --- 用户投稿前台 --- */
.np-submit { max-width: 1040px; margin: 0 auto; padding: 20px 0 60px; }
.np-submit__hero { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--np-line); border-radius: 12px; background: var(--np-bg-soft); }
.np-submit__hero-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: var(--np-primary-soft); color: var(--np-primary); }
.np-submit__hero h1 { margin: 2px 0 6px; font-size: 20px; }
.np-submit__hero p { margin: 0; font-size: 13.5px; color: var(--np-muted); line-height: 1.7; }
.np-submit__note { margin: 14px 0; padding: 11px 14px; border-radius: 8px; font-size: 13.5px; }
.np-submit__note.is-ok { background: rgba(34, 163, 103, 0.1); color: #128a56; }
.np-submit__note.is-err { background: rgba(214, 54, 56, 0.09); color: var(--np-accent); }
.np-submit__login { margin-top: 18px; padding: 30px; text-align: center; border: 1px solid var(--np-line); border-radius: 12px; }
.np-submit__login h2 { margin: 0 0 8px; font-size: 17px; }
.np-submit__login p { margin: 0 0 18px; color: var(--np-muted); font-size: 13.5px; }
.np-submit__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-top: 18px; }
.np-submit__panel { padding: 20px; border: 1px solid var(--np-line); border-radius: 12px; background: var(--np-bg); }
.np-submit__title { margin: 0 0 16px; font-size: 15px; }
.np-submit__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.np-submit__form .np-form-row em { color: var(--np-accent); font-style: normal; }
.np-submit__form select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--np-line); border-radius: var(--np-radius-sm); background: var(--np-bg); color: var(--np-text); font-size: 14px; }
.np-submit__count { margin-top: 6px; font-size: 12px; color: var(--np-muted); text-align: right; }
.np-submit__count .is-over { color: var(--np-accent); font-weight: 600; }
.np-submit__preview { position: relative; width: 140px; margin-bottom: 14px; }
.np-submit__preview img { width: 140px; height: 90px; object-fit: cover; border: 1px solid var(--np-line); border-radius: 8px; }
.np-submit__preview-del { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--np-accent); color: #fff; cursor: pointer; }
.np-submit__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.np-submit__tip { font-size: 12.5px; color: var(--np-muted); }
.np-submit__rules { margin: 0; padding-left: 18px; }
.np-submit__rules li { margin-bottom: 8px; font-size: 13px; line-height: 1.7; color: var(--np-text-2); }
.np-submit__empty { margin: 0; font-size: 13px; color: var(--np-muted); }
.np-submit__list { margin: 0; padding: 0; list-style: none; }
.np-submit__list li { padding: 10px 0; border-bottom: 1px dashed var(--np-line); }
.np-submit__list li:last-child { border-bottom: 0; }
.np-submit__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.np-submit__row a { color: var(--np-text); text-decoration: none; }
.np-submit__row a:hover { color: var(--np-primary); }
.np-submit__badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--np-bg-soft); color: var(--np-muted); font-size: 11px; font-style: normal; }
.np-submit__badge.is-publish { background: rgba(34, 163, 103, 0.12); color: #128a56; }
.np-submit__badge.is-pending { background: rgba(230, 162, 60, 0.14); color: #b26a12; }
.np-submit__rowmeta { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--np-muted); }
.np-submit__withdraw { padding: 0; border: 0; background: none; color: var(--np-accent); font-size: 12px; cursor: pointer; }

@media (max-width: 900px) {
  .np-submit__grid { grid-template-columns: minmax(0, 1fr); }
  .np-submit__side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-content: start; }
}

@media (max-width: 560px) {
  .np-submit__hero { padding: 16px; }
  .np-submit__two { grid-template-columns: 1fr; }
  .np-submit__panel { padding: 16px; }
  .np-license__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .np-buy__mask, .np-buy__panel { transition: none !important; }
}

/* ==========================================================================
   26. 1.8.30 SEO 站点图片 / 软件下载
   ========================================================================== */

/* --- 主题 SEO 设置的站点 Logo（只存 URL，不生成附件） --- */
.np-brand__logo { display: inline-flex; align-items: center; max-height: 48px; }
.np-brand__logo img { display: block; max-height: 48px; max-width: 200px; width: auto; height: auto; object-fit: contain; }

/* --- 软件：公共 --- */
.np-soft-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0; font-size: 13px; color: var(--np-muted); }
.np-soft-crumb a { color: var(--np-muted); text-decoration: none; }
.np-soft-crumb a:hover { color: var(--np-primary); }
.np-soft-crumb > span:last-child { color: var(--np-text); }

.np-soft-archive { padding: 22px 0 10px; }
.np-soft-archive__title { margin: 0 0 6px; font-size: 26px; }
.np-soft-archive__count { margin: 0; color: var(--np-muted); font-size: 13px; }
.np-soft-archive__desc { margin-top: 12px; color: var(--np-text-2); font-size: 14px; line-height: 1.8; }

.np-soft-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.np-soft-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--np-line); border-radius: 999px; background: var(--np-bg); color: var(--np-text-2); font-size: 13px; text-decoration: none; transition: all .18s ease; }
.np-soft-chip:hover { border-color: var(--np-primary); color: var(--np-primary); }
.np-soft-chip.is-active { border-color: var(--np-primary); background: var(--np-primary-soft); color: var(--np-primary); font-weight: 600; }
.np-soft-chip i { font-style: normal; font-size: 11px; color: var(--np-muted); }
.np-soft-chips--plat .np-soft-chip { border-radius: 6px; }

.np-soft-sort { display: flex; gap: 18px; margin: 8px 0 20px; border-bottom: 1px solid var(--np-line); }
.np-soft-sort__item { padding: 8px 2px 12px; color: var(--np-muted); font-size: 13.5px; text-decoration: none; border-bottom: 2px solid transparent; }
.np-soft-sort__item:hover { color: var(--np-primary); }
.np-soft-sort__item.is-active { color: var(--np-primary); border-bottom-color: var(--np-primary); font-weight: 600; }

.np-soft-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.np-soft-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.np-soft-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.np-soft-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--np-line); border-radius: 12px; background: var(--np-bg); transition: transform .18s ease, box-shadow .18s ease; }
.np-soft-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .07); }
.np-soft-card__media { position: relative; display: flex; align-items: center; justify-content: center; height: 148px; padding: 18px; background: var(--np-bg-soft); }
.np-soft-card__icon { max-width: 96px; max-height: 96px; width: auto; height: auto; border-radius: 18px; object-fit: contain; }
.np-soft-card__ph { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 18px; background: var(--np-primary-soft); color: var(--np-primary); font-size: 40px; }
.np-soft-card__ph svg, .np-soft__ph svg, .np-soft__icon--ph svg { width: 1em; height: 1em; }
.np-soft-card__lic { position: absolute; top: 10px; right: 10px; padding: 2px 9px; border-radius: 999px; background: var(--np-bg); color: var(--np-muted); font-size: 11px; }
.np-soft-card__body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 16px; }
.np-soft-card__title { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.np-soft-card__title a { color: var(--np-text); text-decoration: none; }
.np-soft-card__title a:hover { color: var(--np-primary); }
.np-soft-card__meta { margin: 0 0 12px; color: var(--np-muted); font-size: 12px; }
.np-soft-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--np-line); }
.np-soft-card__count { color: var(--np-muted); font-size: 12px; }
.np-soft-card__go { color: var(--np-primary); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.np-soft-empty { padding: 46px 20px; text-align: center; color: var(--np-muted); }

.np-soft__img-fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 56px; background: var(--np-primary-soft); color: var(--np-primary); font-size: 34px; border-radius: 12px; }

/* --- 软件：详情页 --- */
.np-soft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin: 8px 0 30px; }
.np-soft__gallery { min-width: 0; }
.np-soft__stage { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: 16px; border: 1px solid var(--np-line); border-radius: 12px; background: var(--np-bg-soft); }
.np-soft__shot { display: block; max-width: 100%; max-height: 380px; width: auto; height: auto; border-radius: 8px; object-fit: contain; }
.np-soft__ph { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 20px; background: var(--np-primary-soft); color: var(--np-primary); font-size: 64px; }
.np-soft__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.np-soft__thumb { flex: 0 0 88px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--np-bg-soft); cursor: pointer; overflow: hidden; }
.np-soft__thumb.is-active { border-color: var(--np-primary); }
.np-soft__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.np-soft__info { min-width: 0; }
.np-soft__heading { display: flex; gap: 14px; align-items: flex-start; }
.np-soft__icon { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: var(--np-bg-soft); }
.np-soft__icon--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--np-primary-soft); color: var(--np-primary); font-size: 36px; }
.np-soft__title { margin: 0 0 8px; font-size: 23px; line-height: 1.35; }
.np-soft__ver { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; background: var(--np-bg-soft); color: var(--np-muted); font-size: 12px; }
.np-soft__lic { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; background: var(--np-primary-soft); color: var(--np-primary); font-size: 12px; }
.np-soft__lic--paid { background: rgba(230, 162, 60, .16); color: #b26a12; }
.np-soft__score { color: #e6a23c; font-size: 13px; white-space: nowrap; }
.np-soft__score i { margin-left: 5px; color: var(--np-muted); font-size: 12px; font-style: normal; }
.np-soft__sub { margin: 14px 0; color: var(--np-text-2); font-size: 14px; line-height: 1.8; }
.np-soft__platforms { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.np-soft__plat { padding: 3px 10px; border: 1px solid var(--np-line); border-radius: 6px; color: var(--np-text-2); font-size: 12px; }
.np-soft__specs { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.np-soft__specs th, .np-soft__specs td { padding: 8px 0; border-bottom: 1px dashed var(--np-line); text-align: left; font-size: 13px; vertical-align: top; }
.np-soft__specs th { width: 88px; color: var(--np-muted); font-weight: 400; white-space: nowrap; }
.np-soft__specs td { color: var(--np-text); word-break: break-all; }
.np-soft__specs a { color: var(--np-primary); text-decoration: none; }
.np-soft__downloads h2 { margin: 0 0 12px; font-size: 15px; }
.np-soft__dl { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 11px 14px; border: 1px solid var(--np-line); border-radius: 10px; background: var(--np-bg); color: var(--np-text); text-align: left; cursor: pointer; transition: all .18s ease; }
.np-soft__dl:hover:not(:disabled) { border-color: var(--np-primary); background: var(--np-primary-soft); }
.np-soft__dl:disabled { opacity: .65; cursor: default; }
.np-soft__dl-ico { display: inline-flex; flex: 0 0 auto; color: var(--np-primary); }
.np-soft__dl-txt { display: flex; flex-direction: column; min-width: 0; }
.np-soft__dl-txt strong { font-size: 13.5px; font-weight: 600; }
.np-soft__dl-txt i { color: var(--np-muted); font-size: 12px; font-style: normal; }
.np-soft__safety { margin: 8px 0 0; color: var(--np-muted); font-size: 12px; }
.np-soft__empty { color: var(--np-muted); font-size: 13px; }

.np-soft__below { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; margin-bottom: 50px; }
.np-soft__section { padding: 22px; margin-bottom: 18px; border: 1px solid var(--np-line); border-radius: 12px; background: var(--np-bg); }
.np-soft__section > h2 { margin: 0 0 16px; font-size: 17px; }
.np-soft__log { margin: 0; padding-left: 18px; }
.np-soft__log li { margin-bottom: 8px; color: var(--np-text-2); font-size: 13.5px; line-height: 1.7; }
.np-soft__panel { padding: 18px; margin-bottom: 16px; border: 1px solid var(--np-line); border-radius: 12px; background: var(--np-bg); }
.np-soft__panel h3 { margin: 0 0 12px; font-size: 14px; }
.np-soft__tag { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 6px; background: var(--np-bg-soft); color: var(--np-text-2); font-size: 12px; text-decoration: none; }
.np-soft__tag:hover { color: var(--np-primary); }
.np-soft__related { margin: 0; padding: 0; list-style: none; }
.np-soft__related li { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--np-line); font-size: 13px; }
.np-soft__related li:last-child { border-bottom: 0; }
.np-soft__related img { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 7px; object-fit: contain; }
.np-soft__related a { flex: 1; min-width: 0; color: var(--np-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-soft__related a:hover { color: var(--np-primary); }
.np-soft__related i { flex: 0 0 auto; color: var(--np-muted); font-size: 11px; font-style: normal; }
.np-soft__back { display: block; padding: 10px; border-radius: 8px; background: var(--np-primary-soft); color: var(--np-primary); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }

/* --- 软件：软件库首页 --- */
.np-soft-home__hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 28px; border: 1px solid var(--np-line); border-radius: 14px; background: var(--np-bg-soft); }
.np-soft-home__hero h1 { margin: 0 0 10px; font-size: 27px; }
.np-soft-home__hero p { max-width: 560px; margin: 0; color: var(--np-text-2); font-size: 14px; line-height: 1.8; }
.np-soft-home__stats { display: flex; gap: 24px; }
.np-soft-home__stats div { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.np-soft-home__stats b { color: var(--np-primary); font-size: 22px; }
.np-soft-home__stats span { color: var(--np-muted); font-size: 12px; }
.np-soft-home__plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 18px 0; }
.np-soft-home__plat { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--np-line); border-radius: 10px; background: var(--np-bg); color: var(--np-text); font-size: 13.5px; text-decoration: none; transition: all .18s ease; }
.np-soft-home__plat:hover { border-color: var(--np-primary); color: var(--np-primary); transform: translateY(-1px); }
.np-soft-home__plat-ico { display: inline-flex; color: var(--np-primary); }
.np-soft-home__sec { margin: 34px 0; }
.np-soft-home__sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.np-soft-home__sechead h2 { margin: 0; font-size: 20px; }
.np-soft-home__sechead a { color: var(--np-primary); font-size: 13px; text-decoration: none; }
.np-soft-rank { margin: 0; padding: 0; list-style: none; border: 1px solid var(--np-line); border-radius: 12px; overflow: hidden; }
.np-soft-rank li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px dashed var(--np-line); font-size: 13.5px; }
.np-soft-rank li:last-child { border-bottom: 0; }
.np-soft-rank__no { flex: 0 0 24px; color: var(--np-muted); font-weight: 700; text-align: center; }
.np-soft-rank__no.is-top { color: var(--np-accent); }
.np-soft-rank img { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; object-fit: contain; }
.np-soft-rank a { flex: 1; min-width: 0; color: var(--np-text); text-decoration: none; }
.np-soft-rank a:hover { color: var(--np-primary); }
.np-soft-rank__meta { color: var(--np-muted); font-size: 12px; }
.np-soft-rank__count { color: var(--np-muted); font-size: 12px; white-space: nowrap; }

@media (max-width: 900px) {
  .np-soft { grid-template-columns: minmax(0, 1fr); }
  .np-soft__below { grid-template-columns: minmax(0, 1fr); }
  .np-soft-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-soft-home__plats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .np-soft-archive__title, .np-soft-home__hero h1 { font-size: 22px; }
  .np-soft-grid, .np-soft-grid--2, .np-soft-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .np-soft-home__hero { padding: 20px; }
  .np-soft-home__stats { gap: 18px; }
  .np-soft-home__plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-soft__stage { min-height: 220px; }
  .np-soft-rank__meta { display: none; }
  .np-brand__logo img { max-width: 150px; max-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .np-soft-card, .np-soft__dl, .np-soft-home__plat { transition: none !important; }
}