@charset "utf-8";
/* ==========================================================================
   Nintendo.com circa 2001 设计系统 —— huihe.co 首页
   --------------------------------------------------------------------------
   与 Coinbase 那套完全相反的方向：固定窄画布、硬边斜切、无圆角、
   暖色（金/琥珀/橙）只做「行动指示」，冷色 periwinkle 承载结构。

   所有规则限定在 .nin-page 作用域内。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------
   .nin-admin 是后台页面作用域（见 nintendo-admin.css），只借用 token 与
   通用零件（.nin-plate/.nin-panel/.nin-btn/...），首页专属规则仍只在 .nin-page 下生效。
   -------------------------------------------------------------------------- */
.nin-page, .nin-admin {
    /* 品牌与信号色 */
    --nin-primary: #e60012;        /* Nintendo Red —— 仅 logo 与校验/警示 */
    --nin-signal: #f68d1f;         /* Signal Orange —— 一切「前进」动作 */
    --nin-amber: #ecab37;          /* Amber —— 工具与标记 */
    --nin-nav-gold: #e48600;       /* Nav Gold —— 仅主导航词条 */

    /* 表面：periwinkle 金属机身 */
    --nin-canvas: #7a8aba;
    --nin-periwinkle: #8ba1d4;
    --nin-sky: #9fbee7;
    --nin-lavender: #acace7;
    --nin-ice: #c0d5e6;
    --nin-chrome-indigo: #3d4f97;
    --nin-muted-indigo: #60619c;
    --nin-platinum: #dedede;
    --nin-surface: #ffffff;
    --nin-hairline: #b9c2d8;
    /* 地面色 —— 机身外面那一层。原来是跟 --nin-canvas 同色的蓝，
       2026-09-13 起全线改浅灰：蓝只留给导航条，灰做地面和标题条。 */
    --nin-ground: #f7f8fa;

    /* 文字 */
    --nin-ink: #21242e;            /* Carbon Navy */
    --nin-ink-soft: #3d4f97;
    --nin-on-primary: #ffffff;

    /* 语义与页面 tint */
    --nin-error: #e60012;
    --nin-carbon: #21242e;         /* 指挥层（导航/右栏按钮/页脚）*/
    --nin-teal: #206479;
    --nin-red-field: #a7282b;

    /* 字体：这一代没有 webfont，Arial 就是本体。
       —— 顺带彻底绕开「Inter 无中文字形」的回退问题。 */
    --nin-sans: Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB',
                'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;

    /* 间距 8px 基数（随画布放大整体上调一档） */
    --nin-xxs: 2px; --nin-xs: 4px; --nin-sm: 8px; --nin-md: 16px;
    --nin-lg: 20px; --nin-xl: 28px; --nin-xxl: 40px; --nin-section: 56px;

    /* 圆角：默认 sharp，圆度只花在 logo 药丸 / 圆点 / 圆形箭头 */
    --nin-r-none: 0px; --nin-r-xs: 2px; --nin-r-sm: 4px;
    --nin-r-md: 6px; --nin-r-lg: 10px; --nin-r-full: 9999px;

    /* 画布宽度：文献规定 780–830px —— 那是 800×600 显示器的目标窗口宽度。
       放到今天的屏幕上只占 44~59%，中文站里明显偏小、字也偏小。
       这里放大到 1200px（国内主流内容宽度）：机身语言不变，只调尺度。 */
    --nin-canvas-w: 1200px;

    /* 字号：随画布整体上调一档。
       原规格（display 44 / body 12 / micro 10）是 Arial 的英文尺寸，
       中文在这个尺度下笔画糊成一团，所以中文档位给得更大；
       拉丁小标签仍保持「大写 + 字距」的丝印铭牌语气。 */
    --nin-f-display: 900 52px/1 var(--nin-sans);
    --nin-f-tagline: 700 17px/1.35 var(--nin-sans);
    --nin-f-nav: 700 14px/1 var(--nin-sans);
    --nin-f-eyebrow: 700 12px/1 var(--nin-sans);
    --nin-f-label: 700 14px/1.15 var(--nin-sans);
    --nin-f-link: 700 15px/1.45 var(--nin-sans);
    --nin-f-body: 400 15px/1.6 var(--nin-sans);
    --nin-f-micro: 400 12px/1.5 var(--nin-sans);
}

/* 页面骨架（蓝底 #7a8aba 机身 + 正文字体）只属于首页。
   后台 .nin-admin 只借 token，自己的骨架在 nintendo-admin.css 里定义（灰底）。
   以前这两块写在同一个选择器里，后台一挂 ds 就被铺上蓝底。 */
.nin-page {
    margin: 0;
    background: var(--nin-ground);
    color: var(--nin-ink);
    font: var(--nin-f-body);
    -webkit-text-size-adjust: 100%;
}

/* element 级 reset 一律包进 :where()，把特异性压到 0，
   否则会盖掉后面单类名组件规则（Coinbase 版踩过这个坑）。 */
.nin-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, dl, dd) { margin: 0; padding: 0; }
.nin-page :where(ul, ol) { list-style: none; }
.nin-page :where(img) { max-width: 100%; display: block; border: 0; }
.nin-page :where(a) { color: inherit; text-decoration: none; }
.nin-page :where(button) { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
.nin-page :where(summary) { cursor: pointer; list-style: none; }
.nin-page summary::-webkit-details-marker { display: none; }
.nin-page :where(input, select) { font: inherit; box-sizing: border-box; }
.nin-page *, .nin-page *::before, .nin-page *::after { box-sizing: border-box; }

/* .hidden —— 老页面靠 Tailwind CDN 提供的工具类，独立成页后没人再给。
   卡券回收页的「单卡提交 / 批量上传」切换、自定义折扣框、错误行标签全靠它，
   缺了这条 = 两个区同时可见、切 tab 没反应、自定义折扣一直挂着。
   写在这（而不是各页内联）是因为它是通用工具类，以后转旧页还会撞上。
   特异性 (0,2,0) 高于 .nin-errtags 这类单类名的 display:flex，不用 !important。 */
.nin-page .hidden { display: none; }

/* --------------------------------------------------------------------------
   2. 机身骨架
   -------------------------------------------------------------------------- */
/* shell = 830 画布 + 24 左栏页签。画布固定 830，这样正文/页脚
   两处 shell 的右边缘都对得齐。 */
.nin-shell {
    display: flex;
    align-items: flex-start;
    width: min(calc(var(--nin-canvas-w) + 24px), calc(100% - 32px));
    margin: 0 auto;
    position: relative;
}
/* flex-basis 走 width（= 画布宽），容器不够时靠 flex-shrink 收窄，
   所以在 1280/1366 笔记本上不会溢出，只是画布变窄。 */
.nin-canvas { flex: 1 1 auto; width: var(--nin-canvas-w); min-width: 0; }
/* 报头 shell 已移除，页面直接从导航条开始 */

/* 没有左栏页签的页面（卡券回收 / 商务合作）给 body 加 .nin-page--norail：
   shell 里那 24px 本来是留给左栏的，没左栏时会被 canvas 直接吃掉，
   而导航/次级条/页脚照旧左缩 24px —— 菜单和正文左缘就差出 24px。
   这里把这一页的 24px 收回，画布回到 1200，三根横条与正文左缘重合。
   ≤1023 的窄屏退化块里左栏本来就被隐藏且已置零，所以这条只在 ≥1024 生效。 */
@media (min-width: 1024px) {
    .nin-page--norail .nin-shell,
    .nin-page--norail .nin-navbar__inner,
    .nin-page--norail .nin-subnav__inner,
    .nin-page--norail .nin-footer__inner {
        width: min(var(--nin-canvas-w), calc(100% - 32px));
        padding-left: 0;
    }
}

/* 左栏旋转页签：贴在 chrome 左缘外，像从机身里插进去的标签 */
.nin-rail {
    flex: 0 0 24px;
    width: 24px;
    padding-top: var(--nin-xl);
    display: flex;
    flex-direction: column;
    gap: var(--nin-xs);
}
.nin-rail__tab {
    display: block;
    padding: var(--nin-md) var(--nin-xs);
    background: var(--nin-carbon);
    color: var(--nin-sky);
    font: var(--nin-f-eyebrow);
    letter-spacing: .5px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
    border-radius: var(--nin-r-none) var(--nin-r-xs) var(--nin-r-xs) var(--nin-r-none);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset -1px 0 0 rgba(0, 0, 0, .4);
    transition: background .12s, color .12s;
}
.nin-rail__tab:hover { background: var(--nin-chrome-indigo); color: #fff; }
.nin-rail__tab .cn { font: var(--nin-f-label); letter-spacing: 2px; }

/* --------------------------------------------------------------------------
   3. 镀铬底座原语（bevel / 斜切 / 网版点阵）
   -------------------------------------------------------------------------- */

/* Level 1 —— 平板：上缘高光 + 下缘 indigo 阴影线
   注：.nin-panel 的底边 2026-09-13 已去掉（见下方 .nin-panel），
   这一组 bevel 原语（plate / inset / chamfer）目前没有页面在用。 */
.nin-plate {
    background: var(--nin-canvas);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40),
                inset 0 -2px 0 var(--nin-chrome-indigo);
}
/* Level 0 —— 内凹：反过来，上缘暗、下缘亮 */
.nin-inset {
    background: var(--nin-platinum);
    box-shadow: inset 0 2px 0 var(--nin-chrome-indigo),
                inset 0 -1px 0 rgba(255, 255, 255, .65);
}
/* Level 3 —— 指挥层：炭黑 + 网版点阵（像喇叭网罩） */
.nin-carbon {
    background-color: var(--nin-carbon);
    background-image: radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px);
    background-size: 3px 3px;
    color: var(--nin-on-primary);
}
/* 大面板的 45° 斜切角 —— 注塑面板的切削边，不是圆角 */
.nin-chamfer {
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px),
                       calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* --------------------------------------------------------------------------
   4. 通用零件
   -------------------------------------------------------------------------- */
.nin-panel {
    background: var(--nin-surface);
    border-radius: var(--nin-r-md);
    /* 底边那根 2px 深蓝 indigo 线 2026-09-13 去掉（用户：热门回收卡片的底部那根蓝色去掉）。
       面板本身是白的、地面是 #f7f8fa 浅灰，白panel压灰地，边界本来就够，
       不用再叠一条线。上缘那条白色高光留着 —— 它跟 labelbar / 按钮是同一套内斜角语汇。
       这一条是全站共用的：卡券回收页、帮助中心、分类页的白面板会一起变。 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    margin-bottom: var(--nin-lg);
    overflow: hidden;
}
.nin-panel--platinum { background: var(--nin-platinum); }
.nin-panel--periwinkle {
    background: var(--nin-periwinkle);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
                inset 0 -2px 0 var(--nin-chrome-indigo);
}
.nin-panel--lavender {
    background: var(--nin-lavender);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
                inset 0 -2px 0 var(--nin-chrome-indigo);
}

/* 面板标题条 —— 网格字形 + 大写小标签 */
.nin-labelbar {
    display: flex;
    align-items: center;
    gap: var(--nin-sm);
    padding: var(--nin-sm) var(--nin-md);
    background: var(--nin-platinum);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
                inset 0 -2px 0 var(--nin-chrome-indigo);
}
.nin-labelbar__glyph {
    flex: none;
    width: 11px; height: 11px;
    background-image: linear-gradient(var(--nin-carbon) 1px, transparent 1px),
                      linear-gradient(90deg, var(--nin-carbon) 1px, transparent 1px);
    background-size: 4px 4px;
    opacity: .75;
}
.nin-labelbar__eyebrow {
    font: var(--nin-f-eyebrow);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--nin-ink-soft);
}
.nin-labelbar__title { font: var(--nin-f-label); color: var(--nin-ink); }

.nin-body { padding: var(--nin-md); }
.nin-body--lg { padding: var(--nin-lg); }

/* 点线分隔 —— Y2K chrome 的招牌细节 */
.nin-dotted {
    border: 0;
    border-top: 1px dotted var(--nin-muted-indigo);
    margin: var(--nin-md) 0;
}

/* --------------------------------------------------------------------------
   5. 按钮 / 芯片
   -------------------------------------------------------------------------- */
.nin-chip, .nin-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--nin-xs);
    font: var(--nin-f-eyebrow);
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: var(--nin-r-xs);
    padding: 6px var(--nin-md);
    white-space: nowrap;
    transition: filter .12s;
}
.nin-chip .cn, .nin-btn .cn { font: var(--nin-f-label); letter-spacing: .5px; }

/* 琥珀工具芯片（Code Bank / Game Finder 位）*/
.nin-chip--amber {
    background: var(--nin-amber);
    color: var(--nin-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .22);
}
/* 橙 = 前进 */
.nin-btn--signal {
    background: var(--nin-signal);
    color: var(--nin-on-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .25);
}
/* 炭黑右栏动作 */
.nin-btn--carbon {
    background: var(--nin-carbon);
    color: var(--nin-on-primary);
    border-radius: var(--nin-r-none);
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.nin-btn--amber {
    background: var(--nin-amber);
    color: var(--nin-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .22);
}
.nin-chip:hover, .nin-btn:hover { filter: brightness(1.08); }
.nin-btn--carbon:hover { filter: none; background: #2c3040; }
.nin-btn--lg { padding: 10px var(--nin-lg); border-radius: var(--nin-r-xs); }

/* 圆形前进箭头 —— 系统里唯一的「圆形」之一 */
.nin-arrow {
    flex: none;
    width: 26px; height: 26px;
    border-radius: var(--nin-r-full);
    background: var(--nin-signal);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(0, 0, 0, .25);
    position: relative;
}
.nin-arrow::after {
    content: '';
    position: absolute;
    left: 9px; top: 8px;
    width: 8px; height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
/* 标题行的橙色箭头小方块 */
.nin-arrow-chip {
    flex: none;
    width: 20px; height: 20px;
    border-radius: var(--nin-r-xs);
    background: var(--nin-signal);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .25);
    position: relative;
}
.nin-arrow-chip::after {
    content: '';
    position: absolute;
    left: 6px; top: 6px;
    width: 7px; height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   6. 双层导航（carbon 主条 + 浅蓝次级条）
   -------------------------------------------------------------------------- */
/* 导航/次级条/页脚的内容要和正文 canvas 左缘严格对齐：
   shell 宽 = 830 + 24(左栏)，所以这里也用同样的宽度 + 24px 左内边距。 */
.nin-navbar { width: 100%; }
.nin-navbar__inner {
    display: flex;
    align-items: center;
    gap: var(--nin-md);
    width: min(calc(var(--nin-canvas-w) + 24px), calc(100% - 32px));
    margin: 0 auto;
    padding: var(--nin-xs) 0 var(--nin-xs) 24px;
    min-height: 38px;
}
/* 站标。2026-09-13 用户换成深色底适配版：蓝橙图形 + 白色带描边的「灰禾数卡」，
   **文字已经烧在图里**。因此两件事一起变：
     ① 白色药丸底盘整个撤掉 —— 那层白壳是为了让旧的深色 logo 在炭黑导航条上
        看得见才套的，新 logo 自己就是给深色底做的，垫白反而把字压没了。
     ② 高度从 20px 提到 28px —— 旧版是「20px 图形 + 旁边一行单独的文字」，
        现在整块 lockup 要自己撑住品牌，按原来的整体占位给。
   导航条（.nin-carbon）和页脚（.nin-carbon）都是炭黑，这版直接落上去。
   顺带：系统里 full 圆角的用例少了一个，只剩单选点和圆形箭头。 */
.nin-logo {
    flex: none;
    display: inline-flex;
    align-items: center;
}
.nin-logo img { height: 28px; width: auto; }

.nin-navbar__words { display: flex; align-items: center; gap: var(--nin-md); flex: 1 1 auto; }
.nin-navbar__words > a {
    font: var(--nin-f-nav);
    letter-spacing: .5px;
    color: var(--nin-nav-gold);
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.nin-navbar__words > a:hover { color: var(--nin-amber); }
.nin-navbar__chips { display: flex; align-items: center; gap: var(--nin-md); flex: none; }

/* 账号 + 下拉菜单（右上角，全站共用）
   不套芯片容器 —— 用户要求「直接在菜单背景上」：手机号 / 登录 / 注册
   跟五个金色词条一样，是炭黑条上的一行金铜色文字（同 --nin-f-nav、
   同 text-shadow、同 hover 转琥珀），没有琥珀底、没有内斜角、没有圆角。
   右边的下拉还是白面浮层（见下），那个容器保留。 */
.nin-acct__btn, .nin-acct__guest {
    display: inline-flex;
    align-items: center;
    gap: var(--nin-xs);
    font: var(--nin-f-nav);
    font-family: inherit;              /* button 不吃继承，得显式要一次 */
    letter-spacing: .5px;
    color: var(--nin-nav-gold);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    background: none; border: 0;
    /* 上下各 12px 只是为了把点击区域撑到 38px（= 条高）。
       背景是透明的所以看不出来，也不会把导航条顶高：
       .nin-navbar__inner 本来就是 min-height 38px，其它零件都不到这个数。
       （系统里触摸目标是 ≥44px，但条本身只有 38px，这里到顶了。） */
    padding: 12px 0;
    white-space: nowrap;
}
.nin-acct__btn { cursor: pointer; }
.nin-acct__btn:hover, .nin-acct__guest:hover { color: var(--nin-amber); }

.nin-acct { position: relative; flex: none; }
/* 下拉三角 —— 纯 CSS 画，这一代没有图标字体。
   颜色跟着文字走（金铜），不然深色三角压在炭黑条上什么都看不见。 */
.nin-acct__caret {
    flex: none;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--nin-nav-gold);
    transition: transform .12s;
}
.nin-acct__btn:hover .nin-acct__caret { border-top-color: var(--nin-amber); }
.nin-acct.is-open .nin-acct__caret { transform: rotate(180deg); }

/* 菜单浮在炭黑条下方的白面上。用 1px 内描边 + 一道 2px 实体下缘投影
   （不是模糊阴影），维持系统的硬边语言。z-index 盖过页头 / hero。 */
.nin-acct__menu {
    position: absolute;
    right: 0; top: calc(100% + 6px);
    z-index: 60;
    display: none;
    min-width: 196px;
    padding: var(--nin-xs) 0;
    background: var(--nin-surface);
    border-radius: var(--nin-r-xs);
    box-shadow: inset 0 0 0 1px var(--nin-hairline),
                0 2px 0 rgba(0, 0, 0, .18);
    overflow: hidden;
}
.nin-acct.is-open .nin-acct__menu { display: block; }

.nin-acct__menu a {
    display: block;
    padding: var(--nin-sm) var(--nin-md);
    font: var(--nin-f-label);
    color: var(--nin-ink);
    white-space: nowrap;
}
.nin-acct__menu a:hover { background: var(--nin-platinum); color: var(--nin-primary); }
/* 退出是「破坏性」动作，跟其它条目分开：一条分隔线 + 警示红。
   选择器写成 a.nin-acct__out（而不是光 .nin-acct__out）是为了跟上面那条
   .nin-acct__menu a:hover 打平特异性，再靠「写在后面」压过它 ——
   否则单类名的红色连静止态都赢不了 .nin-acct__menu a 的 --nin-ink。 */
.nin-acct__menu a.nin-acct__out {
    color: var(--nin-red-field);
    border-top: 1px solid var(--nin-hairline);
    margin-top: var(--nin-xs);
}

/* 次级条 */
/* 【暂未使用】次级条（天蓝 strip）。
   2026-09-13 用户要求整条去掉，top-nintendo.html 里的 markup 已删，
   所以下面这组 .nin-subnav* 规则目前全站没有落点 —— 留着是为了好恢复：
   把 top-nintendo.html 里那段 markup 粘回来即可，样式不用重写。
   （同类的还有 .nin-plate / .nin-inset / .nin-rail，见各自注释。）
   注意 ≥1024 的 .nin-page--norail 和 ≤1023 的窄屏块里还有几处
   .nin-subnav__inner 的选择器，一起留着。 */
.nin-subnav { width: 100%; background: var(--nin-sky); }
.nin-subnav__inner {
    display: flex;
    align-items: center;
    width: min(calc(var(--nin-canvas-w) + 24px), calc(100% - 32px));
    margin: 0 auto;
    padding: var(--nin-xs) 0 var(--nin-xs) 24px;
    box-shadow: inset 0 -1px 0 var(--nin-chrome-indigo);
    /* 条目靠右（用户 2026-09-13「放右侧」）。
       这条 strip 2026-09-13 前后删掉 5 个链接（客服中心 / 企业合作 /
       关于我们 / 隐私政策 / 服务条款），只剩「在线客服 / 登录」两个，
       再左对齐就孤零零挂在条子左边。靠右之后右边这根竖线也正好接上右侧栏。 */
    justify-content: flex-end;
}
.nin-subnav a {
    font: var(--nin-f-label);
    color: var(--nin-ink);
    padding: 0 var(--nin-md);
    border-right: 1px solid var(--nin-chrome-indigo);
    line-height: 1;
}
.nin-subnav a:first-child { padding-left: 0; }
/* 末条要跟画布右缘齐 —— 靠右之后，那 16px 右内边距会把字从边上推回来 */
.nin-subnav a:last-child { border-right: 0; padding-right: 0; }
.nin-subnav a:hover { color: var(--nin-primary); }

/* 汉堡（仅窄屏）*/
.nin-burger {
    display: none;
    flex: none;
    margin-left: auto;
    width: 30px; height: 26px;
    background: var(--nin-amber);
    border-radius: var(--nin-r-xs);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .22);
    position: relative;
}
.nin-burger::after {
    content: '';
    position: absolute;
    left: 7px; top: 7px;
    width: 16px; height: 2px;
    background: var(--nin-ink);
    box-shadow: 0 5px 0 var(--nin-ink), 0 10px 0 var(--nin-ink);
}
.nin-sheet { display: none; }

/* --------------------------------------------------------------------------
   7. Hero 面板
   -------------------------------------------------------------------------- */
.nin-hero {
    position: relative;
    border-radius: var(--nin-r-md);
    overflow: hidden;
    margin-bottom: var(--nin-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
                inset 0 -2px 0 var(--nin-chrome-indigo);
    /* 首页 tint = lavender；没有产品摄影，用色场 + 电路纹理代替 */
    background-color: var(--nin-lavender);
    background-image:
        radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .5), transparent 42%),
        repeating-linear-gradient(0deg, rgba(61, 79, 151, .16) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(90deg, rgba(61, 79, 151, .16) 0 1px, transparent 1px 14px);
    padding: var(--nin-xxl) var(--nin-xl);
}
/* 画布放大到 1200 后，hero 右半边会空出一大片。
   文献里这块是满幅产品摄影，我们没有素材 —— 改左右两栏：
   左文案、右 2×2 数据屏，把空间用系统内的零件填满。 */
.nin-hero__inner { display: flex; align-items: center; gap: var(--nin-xxl); }
.nin-hero__copy { flex: 1 1 auto; min-width: 0; }
.nin-hero__eyebrow {
    font: var(--nin-f-eyebrow);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nin-ink-soft);
    margin-bottom: var(--nin-md);
}
/* box-art 标准字：白色 + 粗描边 + 硬投影 */
.nin-display {
    font: var(--nin-f-display);
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: var(--nin-sm);
    text-shadow:
        2px 0 0 var(--nin-chrome-indigo), -2px 0 0 var(--nin-chrome-indigo),
        0 2px 0 var(--nin-chrome-indigo), 0 -2px 0 var(--nin-chrome-indigo),
        2px 2px 0 var(--nin-chrome-indigo), -2px -2px 0 var(--nin-chrome-indigo),
        2px -2px 0 var(--nin-chrome-indigo), -2px 2px 0 var(--nin-chrome-indigo),
        4px 4px 0 rgba(0, 0, 0, .32);
}
.nin-hero__tagline {
    font: var(--nin-f-tagline);
    color: var(--nin-ink);
    margin-bottom: var(--nin-lg);
}
.nin-hero__ctas { display: flex; align-items: center; gap: var(--nin-sm); }
.nin-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nin-xs);
    background: var(--nin-carbon);
    color: var(--nin-sky);
    font: var(--nin-f-eyebrow);
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px var(--nin-sm);
    border-radius: var(--nin-r-xs);
    margin-bottom: var(--nin-md);
}
.nin-hero__badge .cn { font: var(--nin-f-label); letter-spacing: 0; }
.nin-dot {
    width: 6px; height: 6px;
    border-radius: var(--nin-r-full);
    background: var(--nin-signal);
    box-shadow: 0 0 0 2px rgba(246, 141, 31, .3);
}

/* hero 里的数据条（原 Xbox 式 hero 图右下的产品渲染位）*/
.nin-hero__stats {
    flex: 0 0 420px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nin-sm);
}
.nin-hero__stat {
    background: var(--nin-surface);
    border-radius: var(--nin-r-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 var(--nin-chrome-indigo);
    padding: var(--nin-sm);
    text-align: center;
}
.nin-hero__stat b {
    display: block;
    font: 700 26px/1 var(--nin-sans);
    color: var(--nin-ink);
    margin-bottom: var(--nin-xxs);
}
.nin-hero__stat span { font: var(--nin-f-micro); color: var(--nin-muted-indigo); }

/* --------------------------------------------------------------------------
   7b. 首页 banner —— 招牌（2026-09-13 第三次重做）
   --------------------------------------------------------------------------
   演进：薰衣草色场（原版）→ 炭黑主机面板（否，像游戏站）→
        报价单三横带（否：用户「不要放卡券带」）→ 现在这版。
   卡券带确实该拿掉：banner 正下方「热门回收价」就是同一份 card_list_remen，
   在 banner 里再摆八张，是同一件事说两遍。

   用户要求「左右通铺」，所以这一版把 hero 从 .nin-shell / .nin-canvas 里搬出来，
   挂成 body 的直接子级 —— 色场和底部铂灰数据带都整宽通到屏幕两边。
   内容再用 __inner / __barinner 收回到 1200 画布，所以招牌里的字
   跟正下方 panel 的左缘仍然对得齐（这两个宽度的值跟着 .nin-page--norail 走）。

   场用 chrome-indigo：正上方那条次级条本身就是 sky 蓝，招牌再来一块浅蓝
   会跟它连成一片；靛蓝是机身自己的 chrome 色（次级条下缘那根 1px 线就是它），
   压在天蓝条下面像把招牌「翻开」，白字压在上面对比度也够。

   必须挂 --sign 修饰符：.nin-hero 是 8 个页面共用的
   （helpfaq / business / category / category_overview / search / zixun / feedback），
   写进 .nin-hero 本体的话那 7 页会一起变。
   -------------------------------------------------------------------------- */
.nin-hero--sign {
    padding: 0;
    border-radius: 0;                  /* 通铺到屏幕边，不能有圆角 */
    background-color: var(--nin-chrome-indigo);
    /* 45° 细斜纹，白 5% —— 2001 年那种印刷底纹。
       故意跟炭黑导航条的 3px 圆点阵用不同纹理：两块深色上下挨着，
       纹理一样就糊成一块了。 */
    background-image: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 1px,
        transparent 1px, transparent 10px);
    box-shadow: none;                  /* base 那两层内斜角是给带圆角的浮起面板画的 */
}
.nin-hero--sign .nin-hero__inner { display: block; }

/* 两条带共用一个内容宽 —— 跟 .nin-page--norail 收完 24px 之后的 shell 同宽，
   招牌里的字和下面 panel 的左缘才对得上。 */
.nin-hero--sign .nin-hero__inner,
.nin-hero--sign .nin-hero__barinner {
    width: min(var(--nin-canvas-w), calc(100% - 32px));
    margin: 0 auto;
}

/* ① 文案带 —— 左对齐，且左右**不留内边距**，直接压在 .nin-hero__inner 的边线上。
   用户 2026-09-13：「banner 的内容左侧对齐」→「对齐内容区的边距啊」。
   第一版虽然把 margin 改成了 0，但 padding 还留着 var(--nin-xl)=28px，
   于是标题的字比下面 .nin-panel 的左缘多缩进去 28px —— 通铺 banner 里
   这 28px 就是「没对齐」。现在 padding 只留上下，左右归零：
   文案左缘 == .nin-hero__inner 左缘 == .nin-shell / .nin-canvas 左缘 == panel 左缘。
   （.nin-hero__inner 宽度跟 .nin-page--norail 收完 24px 后的 shell 完全一致，
   两条竖线本来就是同一条，只是先前被这 28px 挡住了。）
   中线以下还是老规矩：margin 0 而不是 0 auto，靠左站。

   高度 2026-09-13 连抬两档（用户「banner 的尺寸高一点」→「再高」）：
   40/28 → 56/56 → 96/96（= --nin-section + --nin-xxl），
   整条 banner 约 330px → 374px → 436px。
   banner 里没有图片可撑高度，只能靠上下留白给；
   这两处是唯一能加而不影响排版的地方（加中间的行距会把几行字拆散）。 */
.nin-hero--sign .nin-hero__copy {
    max-width: 760px;
    margin: 0;
    padding: calc(var(--nin-section) + var(--nin-xxl)) 0 calc(var(--nin-section) + var(--nin-xxl));
}
/* 小标后面跟一根短线 —— 「卡券回收 · 实时结算 ———」，2001 年的排版习惯。
   金色是导航词条用的那支，压靛蓝场正好跟上面的炭黑条呼应。
   左侧那根 2026-09-13 去掉了：文案整块改左对齐之后，前面多一根 52px 的线
   会把小标的字推到 68px 处，跟上下几行都对不齐。 */
.nin-hero--sign .nin-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--nin-md);
    color: var(--nin-nav-gold);
    margin-bottom: var(--nin-sm);
}
.nin-hero--sign .nin-hero__eyebrow::after {
    content: '';
    flex: none;
    width: 52px;
    height: 1px;
    background: rgba(255, 255, 255, .38);
}

/* 标准字：就是一行白字，不加任何效果。
   2026-09-13 用户定稿：「不要加效果，正常就好」—— 原来那层 .06em 炭黑硬投影去掉了。
   （再往前 base 那套是「白字 + 靛蓝八向描边」，那是给浅色场画的。）
   白字压靛蓝场（#fff on #3d4f97）对比约 8.3:1，不加投影也够清楚。

   文案 2026-09-13 从「灰禾数卡」四个字换成「安全可信赖的卡券回收平台」十一个字，
   排法跟着变了：4 个字是当 logo 排（巨号 + 大写字距），11 个字是一整行标题。
   所以字号不再写死 —— 用 min(44px, 6.9vw) 让它跟着视口走，一层断点都不用写。

   上限 44px（用户连着压了两档：76 → 60 → 44）：11 个字 × 44 加字距 ≈ 520px，
   在 1200 画布里两侧各余 340。原来的 76px 一行铺到 900，整块招牌被标题吃满；
   现在这个量级比正文 tagline（17px）大约 2.6 倍，还认得出是主标题，
   但不再跟下面的「热门回收价」抢注意力。
   下限看 6.9vw 这个系数 —— 按下限反推出来的：11 个全角字 + 10 个字距(0.08em)
   ≈ 11.8 倍字号，再让出招牌两侧各 16px 和文案带的内边距，
   320px 屏（最窄那一档）刚好不折行。系数和被限住的窄屏端都没动，
   只是把上限从 76 压到 60，所以窄屏表现跟上一版完全一致。
   （letter-spacing 会在末字右边多留一截，居中排版时要配一个等值的 text-indent
   缩回来；现在文案是左对齐的，那截空白落在行尾看不见，所以 text-indent 去掉了。） */
.nin-hero--sign .nin-display {
    font-size: min(44px, 6.9vw);
    line-height: 1.12;
    letter-spacing: .08em;
    color: var(--nin-on-primary);
    margin-bottom: var(--nin-md);
}
.nin-hero--sign .nin-hero__tagline {
    max-width: 560px;
    margin: 0 0 var(--nin-xl);
    /* 用户：「下面的副标题粗了」。--nin-f-tagline 本身是 700，白 700 顶在
       一行白 44px 主标底下，两块都在喊，主次分不开。降到 400。
       只改 --sign 这一页 —— 另外 7 个 hero 页的 tagline 保持 700 不动。 */
    font-weight: 400;
    color: rgba(255, 255, 255, .9);
}
/* 次按钮在靛蓝场上是炭黑，压不出层次；这片场里换白底墨字，
   跟主按钮的橙形成冷暖对（暖色仍然只给「前进」那一个）。
   首页底下那片动作带 .nin-ctaband 是同一片靛蓝（见 7c），一并挂上 ——
   两处都要白按钮，与其抄一份不如共用一个选择器。 */
.nin-hero--sign .nin-btn--carbon,
.nin-ctaband .nin-btn--carbon {
    background: var(--nin-surface);
    color: var(--nin-ink);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.nin-hero--sign .nin-btn--carbon:hover,
.nin-ctaband .nin-btn--carbon:hover {
    background: var(--nin-platinum);
    filter: none;
}

/* ② 数据带 —— 铂灰整宽通到底，给招牌收个实边。
   四格等分、发丝线分栏；格宽跟着画布走，不跟着屏幕走。 */
.nin-hero--sign .nin-hero__bar {
    background: var(--nin-platinum);
    border-top: 1px solid var(--nin-hairline);
}
.nin-hero--sign .nin-hero__barinner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.nin-hero--sign .nin-hero__baritem {
    font: var(--nin-f-micro);
    color: var(--nin-muted-indigo);
    padding: var(--nin-sm) var(--nin-md);
    border-left: 1px solid var(--nin-hairline);
    text-align: center;
}
.nin-hero--sign .nin-hero__baritem:first-child { border-left: 0; }
.nin-hero--sign .nin-hero__baritem b {
    font: 700 20px/1 var(--nin-sans);
    color: var(--nin-ink);
    margin-right: var(--nin-xs);
}

/* --------------------------------------------------------------------------
   7c. 首页正文 —— 段式布局（2026-09-13 整页重做）
   --------------------------------------------------------------------------
   上一版首页是「2/3 主栏 + 1/3 右栏」的博客式两列：主栏里竖着堆四个白面板，
   右栏再堆四个形状各异的块。2001 年的 Nintendo.com 首页不是这个结构 ——
   它是整宽的**段**：一条一条横贯过去，段内再分栏。所以这一版把首页改成四段，
   每段整宽（见 index.html 的 ①②③④ 注释）：

     ① .nin-rategrid + .nin-boardbar   热门回收价：两列报价 + 底部动作条
     ② .nin-steprow / .nin-stepcol     三步极速回收：三列 + 竖发丝线
     ③ .nin-band2                      左 2/3 业务生态（四 tile 一排）｜ 右 1/3 FAQ
     ④ .nin-ctaband                    页底动作带（整宽靛蓝，跟招牌同一片色场）

   **全部规则挂在 .nin-page--home 下。** 这一页用到的零件（panel / labelbar /
   newsrow / step / tiles / faq）卡券回收页、帮助中心等十几个页面都在用，
   不套作用域就等于全站重排。.nin-band2 / .nin-ctaband / .nin-rategrid 这些
   是新造的、只有首页有，但一样加作用域，免得以后别的页无意中撞上。
   -------------------------------------------------------------------------- */

/* ── ① 热门回收价 ────────────────────────────────────────────────────── */

/* 面板标题条右侧的备注（英文小标签 + 中文标题之后，靠右收） */
.nin-page--home .nin-labelbar__note {
    margin-left: auto;
    font: var(--nin-f-micro);
    color: var(--nin-muted-indigo);
}

/* 报价网格：两列。整个首页最重的一块内容（8 个卡种 + 实时回收率），
   原来挤在 2/3 栏里只有 5 行，现在整宽铺开成 4 行 × 2 列。 */
.nin-page--home .nin-rategrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nin-sm);
}
/* .nin-newsrow + .nin-newsrow 的 margin-top 是给竖向堆叠用的。
   进了网格，同一个格子里的「兄弟」其实是左右邻居，那条 margin 会把
   每列的第二行往下推 8px，跟相邻列错开半格 —— 间距交给 gap。 */
.nin-page--home .nin-rategrid .nin-newsrow + .nin-newsrow { margin-top: 0; }

/* 面板底部动作条：左边一句说明，右边「全部卡种」按钮。跟 labelbar 用同一块
   铂灰，把面板上下夹齐。 */
.nin-page--home .nin-boardbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nin-md);
    /* 纵向 4px + 里面那个 24px 高的按钮 = 32px，跟顶上 labelbar 的
       8 + 16.1(700 14px/1.15) + 8 = 32.1px 基本齐平 —— 面板上下两条铂灰
       要是差个十几像素，整块面板看着就是歪的。 */
    padding: var(--nin-xs) var(--nin-md);
    background: var(--nin-platinum);
    border-top: 1px solid var(--nin-hairline);
}
.nin-page--home .nin-boardbar__note {
    font: var(--nin-f-micro);
    color: var(--nin-muted-indigo);
}
.nin-page--home .nin-boardbar__note b { color: var(--nin-ink); }

/* ── ② 三步极速回收 ──────────────────────────────────────────────────── */

/* 三步原来是竖着排的三个铂灰内凹块（.nin-step），整宽之后改成三列并排，
   中间用竖发丝线分栏 —— 这样「1 → 2 → 3」是横着读过去的，像流程条。 */
.nin-page--home .nin-steprow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nin-page--home .nin-stepcol {
    padding: 0 var(--nin-lg);
    border-left: 1px solid var(--nin-hairline);
}
.nin-page--home .nin-stepcol:first-child { padding-left: 0; border-left: 0; }
.nin-page--home .nin-stepcol:last-child { padding-right: 0; }

/* 编号圆片原来是 .nin-step 这个 flex 容器里的项目，宽高才生效。
   搬到块级列里之后得自己转块 —— 行内元素的 width/height 是无效的，
   不转的话那个圆片会缩成一行字，编号就没了。 */
.nin-page--home .nin-stepcol .nin-step__n {
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 16px;
    margin-bottom: var(--nin-md);
}
.nin-page--home .nin-stepcol .nin-step__t { margin-bottom: var(--nin-xs); }

/* ── ③ 两栏段：生态 ｜ FAQ ───────────────────────────────────────────── */

.nin-page--home .nin-band2 {
    display: flex;
    align-items: stretch;
    gap: var(--nin-lg);
}
/* 2:1 分栏。两个子项都是 .nin-panel，各自带 margin-bottom，
   在这个 flex 行里不影响对齐（align-items 是 stretch）。 */
.nin-page--home .nin-band2 > :first-child { flex: 2 1 0; min-width: 0; }
.nin-page--home .nin-band2 > :last-child { flex: 1 1 0; min-width: 0; }

/* ── ③ 业务生态：2×2 站点按钮（2026-09-13 重做）───────────────────────

   上一版是四个炭黑块并排（.nin-tiles--4），用户反馈「太单调」——
   四块一样黑、每块里嵌一小方蓝、底下一行小字，没有层次也没有材质。

   这一版按文献自己的两个零件合起来做：
     · system-tile   —— periwinkle 色场 + 电路板底纹 + **描边标准字**
     · link-row-card —— 琥珀页签 + 一行说明
   于是每块瓷砖有了三段不同的东西，不再是同一个黑盒子：
     ① 琥珀铭牌条：英文丝印小标签（RECYCLE / SOURCING / API / PLATFORM）
     ② periwinkle 电路色场：白字 + 靛蓝描边的 box-art 标准字，橙色前进箭头钉在右下角
     ③ 底下一行中文说明

   顺带补上这套机身最缺的一块色。文献的主角就是 periwinkle 金属机身
   （「每一块区域都是从同一副模具里冲出来的」），而首页此前只有靛蓝
   （招牌 / 动作带）和炭黑（导航 / 页脚），periwinkle 一次都没出现过 ——
   这一节让它回来。

   2×2 而不是四连排也是照文献：featured-tile 明写「arranged in a 2×2 grid」，
   四连排是上一版自己发明的。

   **取代了 .nin-tiles--4** —— 那三条规则（本节 + ≤1023 + ≤560）已随这次
   重做删除；.nin-tiles / .nin-tile 本体保留，另外 4 个页面（helpfaq 三页 +
   business）还在用，没动。
   作用域照旧挂 .nin-page--home，另外 14 页零影响。 */
.nin-page--home .nin-eco {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nin-sm);
}
.nin-page--home .nin-eco__item {
    display: flex;
    flex-direction: column;
    background: var(--nin-surface);
    border-radius: var(--nin-r-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
                inset 0 -2px 0 var(--nin-chrome-indigo);
    overflow: hidden;
    transition: filter .12s;
}
.nin-page--home .nin-eco__item:hover { filter: brightness(1.04); }

/* ① 琥珀铭牌条 —— 文献里琥珀的职责就是「工具与标记」 */
.nin-page--home .nin-eco__tab {
    display: flex;
    align-items: center;
    padding: 6px var(--nin-sm);
    background: var(--nin-amber);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .22);
    font: var(--nin-f-eyebrow);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--nin-ink);
}

/* ② 电路色场 + box-art 标准字。
   flex:1 —— 同一行的两块高度由网格拉齐，多出来的高度让色场吃掉，
   不然说明行会浮在半空。 */
.nin-page--home .nin-eco__field {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: var(--nin-md) var(--nin-xl);
    background-color: var(--nin-periwinkle);
    background-image:
        radial-gradient(circle at 74% 22%, rgba(255, 255, 255, .5), transparent 55%),
        repeating-linear-gradient(0deg, rgba(61, 79, 151, .16) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, rgba(61, 79, 151, .16) 0 1px, transparent 1px 12px);
}
/* 白字 + 四向靛蓝描边 + 硬投影 —— 文献的 box-art 惯例，
   和 .nin-tile__shot / .nin-promo__mark 是同一套配方（描边是深色，
   所以字读起来是「白面 + 深轮廓」，压浅色场也立得住）。 */
.nin-page--home .nin-eco__mark {
    font: 700 21px/1.15 var(--nin-sans);
    color: #fff;
    letter-spacing: 1px;
    text-shadow:
        1px 1px 0 var(--nin-chrome-indigo), -1px -1px 0 var(--nin-chrome-indigo),
        1px -1px 0 var(--nin-chrome-indigo), -1px 1px 0 var(--nin-chrome-indigo),
        2px 2px 0 rgba(0, 0, 0, .3);
}
/* 前进箭头钉在色场右下角，不跟居中的标准字抢中线 */
.nin-page--home .nin-eco__field .nin-arrow-chip {
    position: absolute;
    right: var(--nin-sm);
    bottom: var(--nin-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
                inset 0 -1px 0 rgba(0, 0, 0, .25),
                0 1px 0 rgba(0, 0, 0, .2);
}

/* ③ 说明行 */
.nin-page--home .nin-eco__d {
    display: block;
    padding: var(--nin-sm);
    font: var(--nin-f-micro);
    color: var(--nin-ink);
}

/* ── ④ 页底动作带 ────────────────────────────────────────────────────── */

/* 整宽靛蓝，跟顶上的招牌同一片色场（同样的 45° 网版），一上一下把四段夹住。
   这块跟招牌一样必须挂在 .nin-shell 外面 ——「左右通铺」。
   内容再由 __inner 收回 1200 画布，跟上面几段 panel 的左缘对齐。 */
.nin-ctaband {
    background-color: var(--nin-chrome-indigo);
    background-image: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 1px,
        transparent 1px, transparent 10px);
    padding: var(--nin-section) 0;
}
.nin-ctaband__inner {
    width: min(var(--nin-canvas-w), calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--nin-xxl);
}
.nin-ctaband__copy { flex: 1 1 auto; min-width: 0; }
.nin-ctaband__eyebrow {
    font: var(--nin-f-eyebrow);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--nin-nav-gold);
    margin-bottom: var(--nin-xs);
}
.nin-ctaband__t {
    font: 700 26px/1.25 var(--nin-sans);
    color: var(--nin-on-primary);
    margin-bottom: var(--nin-xs);
}
.nin-ctaband__d {
    max-width: 640px;
    font: var(--nin-f-body);
    color: rgba(255, 255, 255, .88);
}
.nin-ctaband__acts { flex: none; display: flex; gap: var(--nin-sm); }

/* --------------------------------------------------------------------------
   8. 正文两栏
   -------------------------------------------------------------------------- */
.nin-split { display: flex; align-items: flex-start; gap: var(--nin-lg); }
.nin-col-main { flex: 1 1 66%; min-width: 0; }
.nin-col-rail { flex: 0 0 30%; min-width: 0; }

/* --------------------------------------------------------------------------
   9. 内容模块
   -------------------------------------------------------------------------- */

/* news-row —— 铂灰内凹行 + 标题 + 橙色箭头小方块 */
.nin-newsrow {
    display: flex;
    align-items: center;
    gap: var(--nin-md);
    min-height: 48px;
    padding: var(--nin-sm) var(--nin-md);
    background: var(--nin-platinum);
    border-radius: var(--nin-r-sm);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .7);
    transition: background .1s;
}
.nin-newsrow:hover { background: var(--nin-surface); }
.nin-newsrow + .nin-newsrow { margin-top: var(--nin-sm); }
.nin-newsrow__icon {
    flex: none;
    width: 30px; height: 30px;
    border-radius: var(--nin-r-xs);
    background: var(--nin-surface);
    box-shadow: inset 0 0 0 1px var(--nin-chrome-indigo);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.nin-newsrow__icon img { width: 24px; height: 24px; object-fit: contain; }
.nin-newsrow__icon i {
    font: 700 12px/1 var(--nin-sans);
    font-style: normal;
    color: var(--nin-chrome-indigo);
}
.nin-newsrow__text { flex: 1 1 auto; min-width: 0; }
.nin-newsrow__title {
    display: block;
    font: var(--nin-f-link);
    color: var(--nin-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nin-newsrow__meta { display: block; font: var(--nin-f-micro); color: var(--nin-muted-indigo); }
.nin-newsrow__val {
    flex: none;
    font: 700 18px/1 var(--nin-sans);
    color: var(--nin-ink);
    text-align: right;
}
.nin-newsrow__val span { display: block; font: var(--nin-f-micro); color: var(--nin-muted-indigo); }

/* 流程三步 —— 带编号的内凹行 */
.nin-step {
    display: flex;
    align-items: flex-start;
    gap: var(--nin-md);
    padding: var(--nin-md);
    background: var(--nin-platinum);
    border-radius: var(--nin-r-sm);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .7);
}
.nin-step + .nin-step { margin-top: var(--nin-sm); }
.nin-step__n {
    flex: none;
    width: 28px; height: 28px;
    border-radius: var(--nin-r-full);
    background: var(--nin-carbon);
    color: var(--nin-amber);
    font: 700 14px/28px var(--nin-sans);
    text-align: center;
}
/* 标题/描述是 <span>，必须转块级，否则「选择卡种 在上百种卡种…」会连成一行 */
.nin-step__t { display: block; font: var(--nin-f-label); color: var(--nin-ink); margin-bottom: var(--nin-xxs); }
.nin-step__d { display: block; font: var(--nin-f-body); color: var(--nin-ink); }

/* featured-tile —— 2×2 缩略图网格 */
.nin-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nin-sm);
}
.nin-tile {
    background: var(--nin-carbon);
    border-radius: var(--nin-r-sm);
    padding: var(--nin-xxs);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 #000;
    transition: filter .12s;
}
.nin-tile:hover { filter: brightness(1.25); }
.nin-tile__shot {
    height: 76px;
    border-radius: var(--nin-r-xs);
    background-color: var(--nin-periwinkle);
    background-image:
        radial-gradient(circle at 70% 25%, rgba(255, 255, 255, .55), transparent 55%),
        repeating-linear-gradient(45deg, rgba(61, 79, 151, .18) 0 2px, transparent 2px 7px);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font: 700 17px/1 var(--nin-sans);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 var(--nin-chrome-indigo), -1px -1px 0 var(--nin-chrome-indigo),
                 2px 2px 0 rgba(0, 0, 0, .3);
}
.nin-tile__cap {
    display: flex; align-items: center; gap: var(--nin-xs);
    padding: var(--nin-xs) var(--nin-xs) 0;
    font: var(--nin-f-micro);
    color: var(--nin-sky);
}
.nin-tile__cap .nin-arrow-chip { width: 12px; height: 12px; }
.nin-tile__cap .nin-arrow-chip::after { left: 3px; top: 3px; width: 5px; height: 5px; border-width: 1.5px; }

/* FAQ 手风琴
   2026-09-13：.nin-faq__q 补 min-height 48px，跟 .nin-newsrow 同高。
   之前 FAQ 行只有内容高（8+8+21.75 ≈ 38px），跟上一块「热门回收价」的 48px 行
   摆在同一栏里，两种行高交替出现 —— 这是首页内容区最明显的一处不齐。 */
.nin-faq__item {
    background: var(--nin-platinum);
    border-radius: var(--nin-r-sm);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .7);
}
.nin-faq__item + .nin-faq__item { margin-top: var(--nin-sm); }
.nin-faq__q {
    display: flex; align-items: center; gap: var(--nin-sm);
    min-height: 48px;
    padding: var(--nin-sm) var(--nin-md);
    font: var(--nin-f-link);
    color: var(--nin-ink-soft);
}
.nin-faq__q span { flex: 1 1 auto; }
.nin-faq__q i {
    flex: none;
    width: 22px; height: 22px;
    background: var(--nin-amber);
    border-radius: var(--nin-r-xs);
    font: 700 15px/22px var(--nin-sans);
    font-style: normal;
    text-align: center;
    color: var(--nin-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .22);
}
.nin-faq__item[open] .nin-faq__q i { line-height: 20px; }
.nin-faq__item[open] .nin-faq__q i::before { content: '−'; }
.nin-faq__item:not([open]) .nin-faq__q i::before { content: '+'; }
.nin-faq__a {
    padding: 0 var(--nin-md) var(--nin-md);
    font: var(--nin-f-body);
    color: var(--nin-ink);
}

/* --------------------------------------------------------------------------
   10. 右栏动作模块
   -------------------------------------------------------------------------- */
/* 2026-09-13 内容区整理：
   ① gap 原本是 --nin-xs(4px)，两粒炭黑按钮几乎焊在一起；内容区其它块
      （newsrow / step / faq / tiles）一律用 --nin-sm(8px)，这里跟上。
   ② 原来底部没有间距，index.html 靠一个行内 style="margin-top:16px" 顶开下面的
      infobox —— 而 infobox / poll / promo 三块走的是 margin-bottom:--nin-lg(20px)。
      16 和 20 两套值并排，右栏四条块的节奏就是歪的。行内样式删掉，这里补上 20px。 */
.nin-railbtns {
    display: flex;
    flex-direction: column;
    gap: var(--nin-sm);
    margin-bottom: var(--nin-lg);
}

/* info-box —— 琥珀页签 + 白底说明 */
.nin-infobox {
    background: var(--nin-surface);
    border-radius: var(--nin-r-sm);
    box-shadow: inset 0 -2px 0 var(--nin-chrome-indigo);
    overflow: hidden;
    margin-bottom: var(--nin-lg);
}
.nin-infobox__tab {
    display: flex; align-items: center; gap: var(--nin-xs);
    background: var(--nin-amber);
    padding: var(--nin-xs) var(--nin-md);
    font: var(--nin-f-eyebrow);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--nin-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .22);
}
.nin-infobox__tab .cn { font: var(--nin-f-label); letter-spacing: 0; }
.nin-infobox__body { padding: var(--nin-md); font: var(--nin-f-body); }

/* poll-panel —— 圆点选项 + 橙色提交 */
/* 圆角 2026-09-13 从 --nin-r-md(6px) 收到 --nin-r-sm(4px)：
   右栏另外两张卡（infobox / promo）和内容区所有行都是 4px，只有这一块 6px。 */
.nin-poll {
    background: var(--nin-periwinkle);
    border-radius: var(--nin-r-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 var(--nin-chrome-indigo);
    padding: var(--nin-md);
    margin-bottom: var(--nin-lg);
}
/* 标题底下加一根发丝线，让这块也有「标题 / 内容」两段 ——
   右栏四块里 infobox 有琥珀页签、panel 有 labelbar，只有 poll 的标题
   是光秃秃一行字，摆在一起像没做完。 */
.nin-poll__q {
    font: var(--nin-f-label);
    color: var(--nin-ink);
    padding-bottom: var(--nin-sm);
    border-bottom: 1px solid rgba(61, 79, 151, .28);
    margin-bottom: var(--nin-md);
}
.nin-poll__opt {
    display: flex; align-items: center; gap: var(--nin-sm);
    padding: var(--nin-xs) 0;
    font: var(--nin-f-body);
    color: var(--nin-ink);
}
.nin-poll__opt:hover { color: var(--nin-ink-soft); }
.nin-poll__dot {
    flex: none;
    width: 14px; height: 14px;
    border-radius: var(--nin-r-full);
    background: var(--nin-surface);
    box-shadow: inset 0 0 0 1px var(--nin-hairline), inset 0 1px 0 rgba(0, 0, 0, .12);
}
.nin-poll__opt:hover .nin-poll__dot {
    box-shadow: inset 0 0 0 1px var(--nin-hairline), inset 0 0 0 4px var(--nin-signal);
}
.nin-poll__submit { margin-top: var(--nin-md); width: 100%; justify-content: center; }

/* promo-card
   底色 2026-09-13 从 --nin-lavender 换成 --nin-periwinkle：
   lavender 在系统里的角色是「首页 hero 的 tint」（见 token 区的注释），
   而这页 hero 早已改成靛蓝；右栏同时出现 periwinkle(poll) 和 lavender(promo)
   两块相邻的彩色卡，色相又近，看着像随手挑的。统一到 periwinkle。 */
.nin-promo {
    position: relative;
    border-radius: var(--nin-r-sm);
    background-color: var(--nin-periwinkle);
    background-image: repeating-linear-gradient(0deg, rgba(61, 79, 151, .14) 0 1px, transparent 1px 12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 var(--nin-chrome-indigo);
    padding: var(--nin-md);
    margin-bottom: var(--nin-lg);
    display: flex; align-items: center; gap: var(--nin-sm);
}
.nin-promo__mark {
    flex: 1 1 auto;
    font: 700 18px/1.1 var(--nin-sans);
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 var(--nin-chrome-indigo), -1px -1px 0 var(--nin-chrome-indigo),
                 2px 2px 0 rgba(0, 0, 0, .3);
}
.nin-promo__mark small { display: block; font: var(--nin-f-micro); color: var(--nin-ink); text-shadow: none; margin-top: var(--nin-xs); letter-spacing: 0; }

/* 资质徽章（ESRB 位）*/
.nin-badge {
    display: inline-flex; align-items: center; gap: var(--nin-xs);
    background: var(--nin-amber);
    color: var(--nin-ink);
    border-radius: var(--nin-r-xs);
    padding: 3px var(--nin-sm);
    font: var(--nin-f-micro);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .22);
}
.nin-badge img { width: 14px; height: 14px; display: inline; }

/* --------------------------------------------------------------------------
   11. 页脚 —— 炭黑斜切厚板
   -------------------------------------------------------------------------- */
.nin-footer { width: 100%; margin-top: var(--nin-xxl); }
/* 页脚只保留右下那一刀：左上角改直角（.nin-chamfer 默认左上/右下各切一刀）。
   特异性 0,2,0 压过 .nin-chamfer 的 0,1,0。 */
.nin-footer.nin-chamfer {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px),
                       calc(100% - 10px) 100%, 0 100%);
}
.nin-footer__inner {
    width: min(calc(var(--nin-canvas-w) + 24px), calc(100% - 32px));
    margin: 0 auto;
    /* 左内边距 = 24px（正是 shell 里左栏那 24px），这样页脚内容左缘和正文 canvas 对齐 */
    padding: var(--nin-xl) 0 var(--nin-lg) 24px;
}
.nin-footer .nin-logo { margin-bottom: var(--nin-sm); }
/* 三块：品牌 / 紧凑链接组 / 二维码。
   不能用等分栅格 —— 画布放大到 1200 后，每列 56px 的内容按 260px 间距
   铺开会散成孤立的点（Coinbase 版页脚踩过同一个坑）。 */
.nin-footer__cols {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nin-xxl);
    padding-bottom: var(--nin-lg);
}
.nin-footer__brand { flex: 0 1 340px; }
.nin-footer__nav { display: flex; gap: 88px; }
.nin-footer__qr { display: flex; flex: none; gap: var(--nin-md); }
.nin-footer__qr figure { text-align: center; }
.nin-footer__qr img {
    width: 96px; height: 96px;
    margin: 0 auto;
    border-radius: var(--nin-r-xs);
    box-shadow: inset 0 0 0 1px var(--nin-chrome-indigo);
}
.nin-footer__qr figcaption { margin-top: var(--nin-xs); font: var(--nin-f-micro); color: var(--nin-sky); }
.nin-footer__logo { height: 26px; width: auto; margin-bottom: var(--nin-sm); }
.nin-footer__desc { font: var(--nin-f-micro); color: var(--nin-sky); line-height: 1.6; }
.nin-footer h5 {
    font: var(--nin-f-eyebrow);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--nin-amber);
    margin-bottom: var(--nin-sm);
}
.nin-footer__links li + li { margin-top: var(--nin-xs); }
.nin-footer__links a { font: var(--nin-f-micro); color: var(--nin-sky); }
.nin-footer__links a:hover { color: var(--nin-signal); }
.nin-footer__legal {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--nin-sm) var(--nin-lg);
    padding-top: var(--nin-md);
    border-top: 1px solid var(--nin-chrome-indigo);
    font: var(--nin-f-micro);
    color: var(--nin-sky);
}
.nin-footer__legal a { color: var(--nin-sky); }
.nin-footer__legal a:hover { color: var(--nin-signal); }
.nin-footer__legal .nin-badge { margin-left: auto; }

/* --------------------------------------------------------------------------
   12. 浮动客服 / 返回顶部
   -------------------------------------------------------------------------- */
.nin-float {
    position: fixed;
    right: var(--nin-lg);
    bottom: var(--nin-lg);
    display: flex;
    flex-direction: column;
    gap: var(--nin-xs);
    z-index: 40;
}
.nin-float__item {
    position: relative;
    width: 44px; height: 44px;
    background: var(--nin-carbon);
    border-radius: var(--nin-r-none);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 0 rgba(0, 0, 0, .3);
    color: var(--nin-sky);
    font: var(--nin-f-micro);
    display: flex; align-items: center; justify-content: center;
}
.nin-float__item--primary { background: var(--nin-signal); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .3); }
.nin-float__item:hover { filter: brightness(1.15); }
.nin-float__item .glyph { font: 700 16px/1 var(--nin-sans); letter-spacing: 0; }
.nin-float__tip {
    position: absolute; right: calc(100% + 6px); top: 50%;
    transform: translateY(-50%);
    background: var(--nin-carbon);
    color: var(--nin-sky);
    font: var(--nin-f-micro);
    padding: 3px var(--nin-sm);
    border-radius: var(--nin-r-xs);
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .12s;
}
.nin-float__item:hover .nin-float__tip { opacity: 1; }
.nin-float__pop {
    position: absolute; right: calc(100% + 6px); bottom: 0;
    background: var(--nin-surface);
    padding: var(--nin-xs);
    border-radius: var(--nin-r-xs);
    box-shadow: inset 0 -2px 0 var(--nin-chrome-indigo);
    display: none;
}
.nin-float__item:hover .nin-float__pop { display: block; }
.nin-float__pop img { width: 110px; height: 110px; }
.nin-float__pop figcaption { font: var(--nin-f-micro); text-align: center; margin-top: var(--nin-xs); color: var(--nin-ink); }

/* --------------------------------------------------------------------------
   13. 帮助中心零件（帮助中心 / 行业资讯 / 搜索结果 / 意见反馈 / 文章详情 五页共用）
   全部限定在 .nin-page--hc 内，其它页面零影响。
   -------------------------------------------------------------------------- */
/* 色场用 ice：首页 lavender、商务合作 periwinkle、帮助中心 ice，三页区分开 */
.nin-page--hc .nin-hero { background-color: var(--nin-ice); }
/* 右半边快捷入口：2×2，沿用商务合作页 hero 的几何 */
.nin-page--hc .nin-hero__side {
    flex: 0 0 420px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nin-sm);
}
.nin-page--hc .nin-hero__side .nin-tile__shot { height: 62px; font-size: 15px; }

/* 搜索条：机身里没有圆角输入框，改用「内凹平板 + 方形琥珀按钮」。
   原生 GET 表单 —— 禁用 JS 也能搜，不再依赖监听回车。 */
.nin-hc-search {
    display: flex;
    align-items: stretch;
    gap: var(--nin-xs);
    max-width: 520px;
    margin-top: var(--nin-md);
}
.nin-hc-search input {
    flex: 1 1 auto;
    min-width: 0;
    font: var(--nin-f-body);
    color: var(--nin-ink);
    background: var(--nin-surface);
    border: 1px solid var(--nin-hairline);
    border-radius: var(--nin-r-xs);
    padding: 11px var(--nin-md);
    outline: none;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .10);
}
.nin-hc-search input::placeholder { color: var(--nin-muted-indigo); }
.nin-hc-search input:focus { border-color: var(--nin-ink); }
.nin-hc-search button { flex: 0 0 auto; cursor: pointer; }

/* 分类条：铂金平板 + 方形词条（取代原来的粘性毛玻璃标签栏） */
.nin-hc-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nin-xs);
    background: var(--nin-platinum);
    border-radius: var(--nin-r-sm);
    padding: var(--nin-sm);
    margin-top: var(--nin-lg);
    box-shadow: inset 0 2px 0 var(--nin-chrome-indigo),
                inset 0 -1px 0 rgba(255, 255, 255, .7);
}
.nin-hc-cat {
    display: inline-flex;
    align-items: center;
    font: var(--nin-f-micro);
    color: var(--nin-ink);
    text-decoration: none;
    background: var(--nin-surface);
    border-radius: var(--nin-r-xs);
    padding: 7px var(--nin-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .16);
}
.nin-hc-cat:hover { background: var(--nin-ice); }
/* 当前分类 = 琥珀铭牌 */
.nin-hc-cat.is-active {
    background: var(--nin-amber);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .22);
}

/* 文章列表：主栏 2 列内凹卡 */
.nin-hc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nin-sm);
}
.nin-hc-card {
    display: flex;
    flex-direction: column;
    background: var(--nin-platinum);
    border-radius: var(--nin-r-sm);
    box-shadow: inset 0 2px 0 var(--nin-chrome-indigo),
                inset 0 -1px 0 rgba(255, 255, 255, .7);
    padding: var(--nin-md);
    text-decoration: none;
    transition: background .12s;
}
.nin-hc-card:hover { background: var(--nin-surface); }
.nin-hc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nin-sm);
    margin-bottom: var(--nin-sm);
}
.nin-hc-card__date { font: var(--nin-f-micro); color: var(--nin-muted-indigo); flex: 0 0 auto; }
.nin-hc-card__t {
    font: var(--nin-f-label);
    color: var(--nin-ink);
    line-height: 1.4;
    margin-bottom: var(--nin-xs);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nin-hc-card__d {
    font: var(--nin-f-micro);
    color: var(--nin-ink);
    line-height: 1.6;
    margin-bottom: var(--nin-md);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    flex: 1 1 auto;
}
.nin-hc-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--nin-xs);
    font: var(--nin-f-micro);
    font-weight: 700;
    color: var(--nin-signal);
    margin-top: auto;
}

/* 分页：方形页码片，当前页 = 琥珀 */
.nin-hc-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nin-xs);
    margin-top: var(--nin-lg);
}
.nin-hc-pager a, .nin-hc-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--nin-sm);
    font: var(--nin-f-micro);
    text-decoration: none;
    color: var(--nin-ink);
    background: var(--nin-surface);
    border-radius: var(--nin-r-xs);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .16);
}
.nin-hc-pager a:hover { background: var(--nin-ice); }
.nin-hc-pager .cur {
    background: var(--nin-amber);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .22);
}
.nin-hc-pager .off { color: var(--nin-muted-indigo); pointer-events: none; }

/* 底部求助条：炭黑指挥层 */
.nin-hc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nin-lg);
    margin-top: var(--nin-lg);
    padding: var(--nin-lg);
    border-radius: var(--nin-r-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 #000;
}
.nin-hc-cta__t { font: var(--nin-f-label); color: #fff; margin-bottom: var(--nin-xxs); }
.nin-hc-cta__d { font: var(--nin-f-micro); color: var(--nin-sky); }
.nin-hc-cta .nin-btn { flex: 0 0 auto; }

/* 面包屑 */
.nin-hc-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nin-xs);
    margin-bottom: var(--nin-md);
    font: var(--nin-f-micro);
    color: var(--nin-muted-indigo);
}
.nin-hc-crumb a { color: var(--nin-ink); }
.nin-hc-crumb a:hover { color: var(--nin-signal); }
.nin-hc-crumb i { font-style: normal; color: var(--nin-hairline); }
.nin-hc-crumb .here { color: var(--nin-ink-soft); }

/* 文章详情的标题与元信息行 */
.nin-hc-title {
    font: 700 26px/1.35 var(--nin-sans);
    color: var(--nin-ink);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, .45);
    margin-bottom: var(--nin-sm);
}
.nin-hc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nin-xs) var(--nin-md);
    font: var(--nin-f-micro);
    color: var(--nin-muted-indigo);
    margin-bottom: var(--nin-lg);
    padding-bottom: var(--nin-md);
    border-bottom: 1px solid var(--nin-hairline);
}

/* 文章详情正文：CMS 富文本排版。机身是硬边，图片给发丝线不给圆角。 */
.nin-hc-article { font: var(--nin-f-body); color: var(--nin-ink); }
.nin-hc-article > *:first-child { margin-top: 0; }
.nin-hc-article p { margin: 0 0 var(--nin-md); line-height: 1.8; }
.nin-hc-article h2, .nin-hc-article h3, .nin-hc-article h4 {
    font: var(--nin-f-label);
    color: var(--nin-ink);
    margin: var(--nin-lg) 0 var(--nin-sm);
}
.nin-hc-article ul, .nin-hc-article ol { margin: 0 0 var(--nin-md); padding-left: 1.4em; }
.nin-hc-article li { margin-bottom: var(--nin-xs); line-height: 1.8; }
.nin-hc-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nin-r-xs);
    box-shadow: inset 0 0 0 1px var(--nin-chrome-indigo);
}
.nin-hc-article a { color: var(--nin-signal); text-decoration: underline; }
.nin-hc-article blockquote {
    margin: 0 0 var(--nin-md);
    padding: var(--nin-sm) var(--nin-md);
    background: var(--nin-platinum);
    border-left: 3px solid var(--nin-chrome-indigo);
    font: var(--nin-f-micro);
}
.nin-hc-article table { width: 100%; border-collapse: collapse; margin-bottom: var(--nin-md); font: var(--nin-f-micro); }
.nin-hc-article th, .nin-hc-article td {
    border: 1px solid var(--nin-hairline);
    padding: var(--nin-xs) var(--nin-sm);
    text-align: left;
}
.nin-hc-article th { background: var(--nin-platinum); font-weight: 700; }
.nin-hc-article pre {
    overflow-x: auto;
    padding: var(--nin-md);
    background: var(--nin-carbon);
    color: var(--nin-sky);
    border-radius: var(--nin-r-xs);
    font: 13px/1.6 "Courier New", Courier, monospace;
}

/* 文章底部：标签 + 上一篇/下一篇 */
.nin-hc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nin-xs);
    margin-top: var(--nin-lg);
    padding-top: var(--nin-md);
    border-top: 1px solid var(--nin-hairline);
}
.nin-hc-nav {
    display: flex;
    gap: var(--nin-md);
    margin-top: var(--nin-lg);
    padding-top: var(--nin-md);
    border-top: 1px solid var(--nin-hairline);
}
.nin-hc-nav > * { flex: 1 1 50%; min-width: 0; font: var(--nin-f-micro); color: var(--nin-ink-soft); }
.nin-hc-nav > *:last-child { text-align: right; }
.nin-hc-nav a { color: var(--nin-ink); }
.nin-hc-nav a:hover { color: var(--nin-signal); }

/* 搜索结果为空 */
.nin-hc-empty { grid-column: 1 / -1; padding: var(--nin-xxl) var(--nin-md); text-align: center; }
.nin-hc-empty__t { font: var(--nin-f-label); color: var(--nin-ink); margin-bottom: var(--nin-xs); }
.nin-hc-empty__d { font: var(--nin-f-micro); color: var(--nin-ink-soft); margin-bottom: var(--nin-md); }

/* 表单（意见反馈）：方形内凹输入框 */
.nin-hc-form { max-width: 720px; }
.nin-hc-field { margin-bottom: var(--nin-md); }
.nin-hc-field label { display: block; font: var(--nin-f-micro); font-weight: 700; color: var(--nin-ink); margin-bottom: var(--nin-xs); }
.nin-hc-field input, .nin-hc-field textarea {
    width: 100%;
    box-sizing: border-box;
    font: var(--nin-f-body);
    font-family: var(--nin-sans);
    color: var(--nin-ink);
    background: var(--nin-surface);
    border: 1px solid var(--nin-hairline);
    border-radius: var(--nin-r-xs);
    padding: 11px var(--nin-md);
    outline: none;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .10);
}
.nin-hc-field textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
.nin-hc-field input::placeholder, .nin-hc-field textarea::placeholder { color: var(--nin-muted-indigo); }
.nin-hc-field input:focus, .nin-hc-field textarea:focus { border-color: var(--nin-ink); }
.nin-hc-form .nin-btn { width: 100%; justify-content: center; cursor: pointer; }

/* layui layer 弹窗跟随机身：去掉圆角与柔和投影，换硬边 */
.layui-layer { border-radius: 0 !important; box-shadow: 0 6px 0 rgba(0, 0, 0, .25) !important; }
.layui-layer-title {
    border-radius: 0 !important;
    background: var(--nin-platinum) !important;
    border-bottom: 1px solid var(--nin-hairline) !important;
    color: var(--nin-ink) !important;
}
.layui-layer-msg { border-radius: 0 !important; background: var(--nin-carbon) !important; }
.layui-layer-btn a { border-radius: 0 !important; }

@media (max-width: 1024px) {
    .nin-page--hc .nin-hero__inner { flex-direction: column; align-items: stretch; gap: var(--nin-lg); }
    .nin-page--hc .nin-hero__side { flex: none; }
    .nin-hc-grid { grid-template-columns: 1fr; }
    .nin-hc-cta { flex-direction: column; align-items: stretch; }
    .nin-hc-cta .nin-btn { justify-content: center; }
    .nin-hc-nav { flex-direction: column; gap: var(--nin-sm); }
    .nin-hc-nav > *:last-child { text-align: left; }
}
@media (max-width: 560px) {
    .nin-hc-search { flex-direction: column; }
    .nin-hc-search button { justify-content: center; }
}

/* --------------------------------------------------------------------------
   14. 窄窗退化（原站是 pre-responsive 固定画布；按文献给的现代移植方案）
   -------------------------------------------------------------------------- */
/* 画布放大到 1200 之后，两栏拆分的下限也跟着上移 */
@media (max-width: 1023px) {
    .nin-shell, .nin-navbar__inner, .nin-subnav__inner, .nin-footer__inner {
        width: calc(100% - 24px);
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
    .nin-rail { display: none; }          /* 左栏旋转页签移除 */
    .nin-navbar__words { display: none; } /* 五个金色词条收进抽屉 */
    .nin-burger { display: block; }

    .nin-sheet {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height .2s ease;
    }
    .nin-sheet.is-open { max-height: 340px; }
    .nin-sheet__inner {
        width: auto; margin: 0 var(--nin-md);
        padding: var(--nin-sm) 0;
        box-sizing: border-box;
        display: flex; flex-direction: column;
        gap: var(--nin-xs);
    }
    .nin-sheet a {
        font: var(--nin-f-nav);
        color: var(--nin-nav-gold);
        padding: var(--nin-sm) var(--nin-md);
        background: var(--nin-carbon);
        border-radius: var(--nin-r-xs);
    }

    .nin-split { flex-direction: column; }  /* 右栏落到正文下方 */
    .nin-col-main, .nin-col-rail { flex: 1 1 auto; width: 100%; }

    /* 次级条改横向滚动，不要折成两行把分隔线切碎 */
    .nin-subnav__inner {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .nin-subnav a { flex: none; }
    .nin-subnav a:first-child { padding-left: var(--nin-md); }

    .nin-hero__inner { flex-direction: column; align-items: stretch; gap: var(--nin-lg); }
    .nin-hero__stats { flex: none; grid-template-columns: repeat(4, 1fr); }

    /* 通铺招牌：内容宽要跟着这一档的 shell 走 —— 上面把 shell 收成了
       calc(100% - 24px)，招牌还用桌面那套 100%-32px 的话会左右各多出 4px，
       招牌里的字就跟正下方 panel 的边对不齐了。 */
    .nin-hero--sign .nin-hero__inner,
    .nin-hero--sign .nin-hero__barinner { width: calc(100% - 24px); }
    /* 标题字号这一档起交给 min(76px, 6.9vw) 自己缩，不再逐档写死 */
    .nin-hero--sign .nin-hero__eyebrow::after { width: 28px; }

    /* ── 首页段式布局（第 7c 节）───────────────────────────────────────── */
    /* ③ 两栏段落成一列：2/3 的生态栏在 1024 以下只剩不到 640px，
      四个 tile 一排每格会窄到 150px 上下，「个人与企业卡券变现」要折行。 */
    .nin-page--home .nin-band2 { flex-direction: column; }
    .nin-page--home .nin-band2 > :first-child,
    .nin-page--home .nin-band2 > :last-child { flex: 1 1 auto; width: 100%; }
    /* 标题条右侧那句备注这一档起藏掉：320px 上 glyph + 英文小标签 + 中文标题
       已经占满，再加一句「报价随行情实时浮动」会把中文标题挤到第二行。 */
    .nin-page--home .nin-labelbar__note { display: none; }

    /* ④ 动作带跟招牌一样跟着这一档的 shell 走，否则左右各多出 4px。 */
    .nin-ctaband__inner {
        width: calc(100% - 24px);
        flex-direction: column;
        align-items: stretch;
        gap: var(--nin-lg);
    }

    .nin-footer__cols { flex-wrap: wrap; }
    .nin-footer__brand { flex: 1 1 100%; }
    .nin-footer__nav { gap: var(--nin-xl); }
    .nin-footer__legal .nin-badge { margin-left: 0; }
}

/* 极窄屏（≤359px，iPhone SE 一代那一档）才把账号收进抽屉。
   2026-09-13 删掉「卡券查询 / 我的订单」两个芯片之后，这里腾出了约 168px：
   390px 屏实测余量 70px 左右，360px 也够，只有 320px 一档会把汉堡顶出去一点。
   芯片是 flex:none 不缩水，所以只能整块藏，不能靠压缩。 */
@media (max-width: 359px) {
    .nin-acct, .nin-acct__guest { display: none; }
}

@media (max-width: 560px) {
    .nin-tiles { grid-template-columns: 1fr; }
    .nin-hero__stats { grid-template-columns: repeat(2, 1fr); }
    .nin-hero__ctas { flex-wrap: wrap; }
    /* 通铺招牌在手机档：标题字号已经是 vw 驱动的（见 7b 那段），这里只管
       ① 文案带内边距收到 16 —— 320px 屏上每多 12px，标题就多缩一档；
       ② 数据带四格在 320px 上一格只剩 80px，「99.9% 系统在线率」要折行，
          落成 2×2；竖线按列去，第二行补横线。 */
    /* 手机档同样左右不留内边距 —— 原来这里是 var(--nin-md)，会让标题
       比内容区左缘缩进 16px，跟桌面那版刚修好的对齐不一致。
       高度也抬一档，但比桌面克制：小屏上 banner 太高会把正文顶下去。 */
    .nin-hero--sign .nin-hero__copy { padding: var(--nin-section) 0 var(--nin-xxl); }
    .nin-hero--sign .nin-hero__barinner { grid-template-columns: repeat(2, 1fr); }
    .nin-hero--sign .nin-hero__baritem:nth-child(2n+1) { border-left: 0; }
    .nin-hero--sign .nin-hero__baritem:nth-child(n+3) { border-top: 1px solid var(--nin-hairline); }

    /* ── 首页段式布局（第 7c 节）在手机档全部落成一列 ────────────────── */
    /* ① 报价两列在 320px 上一格只剩 140px，卡名和「回收率」会挤在一起 */
    .nin-page--home .nin-rategrid { grid-template-columns: 1fr; }
    /* ② 三步的竖发丝线这时候没有意义（三列都成一列了），改成横线分段 */
    .nin-page--home .nin-steprow { grid-template-columns: 1fr; }
    .nin-page--home .nin-stepcol {
        padding: 0;
        border-left: 0;
        border-top: 1px solid var(--nin-hairline);
        margin-top: var(--nin-md);
        padding-top: var(--nin-md);
    }
    .nin-page--home .nin-stepcol:first-child {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
    /* ③ 业务生态 2×2 落成一列（选择器比 .nin-eco 那种单类名重，压得住） */
    .nin-page--home .nin-eco { grid-template-columns: 1fr; }
    /* ① 底部动作条：说明和按钮在窄屏上并排会把说明压成三行 */
    .nin-page--home .nin-boardbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--nin-sm);
    }
    .nin-page--home .nin-boardbar .nin-btn { justify-content: center; }
    /* ④ 三个按钮排不下 */
    .nin-ctaband__acts { flex-wrap: wrap; }
    .nin-footer__cols { flex-direction: column; gap: var(--nin-xl); }
    .nin-footer__brand { flex: none; }
    .nin-footer__nav { gap: var(--nin-lg); }
    .nin-footer__qr { width: 100%; justify-content: center; }
    /* 触摸目标：文献要求按钮/箭头/单选点 ≥44px */
    .nin-btn, .nin-chip { min-height: 44px; }
    .nin-poll__opt { min-height: 44px; }
    .nin-poll__dot { width: 16px; height: 16px; }
    .nin-float__item { width: 44px; height: 44px; }
    .nin-display { font-size: 34px; letter-spacing: 1px; }
}