@charset "UTF-8";
/* ============================================================
   续缘 · 风格 B —— 电子词典 · 灰阶屏
   只在 <html data-theme="b"> 下生效；默认风格 A 完全不受影响。
   结构：① 覆写通道令牌（把整站底子换成 LCD 灰阶屏 + 塑料机身）
         ② 少量 B 专属覆写（宋体、方括号导航、灰度配图、实体键）
   约定：琥珀色只用在深色底上；灰阶屏上唯一强调色是朱砂 --cinnabar（印泥红）
   注意：不加任何点阵 / 扫描线 / 像素化纹理——站主反馈这类马赛克伤眼
   ============================================================ */

html[data-theme="b"]{
  /* —— 机身与屏 —— */
  --plastic:#2b2e31;
  --plastic-hi:#3a3e42;
  --plastic-lo:#1e2124;
  --led:#e2564a;
  --amber:#e0b25c;
  --lcd:#ccd0d3;

  /* —— 覆写主设计系统令牌：纸墨 → 灰阶屏 —— */
  --paper:#ccd0d3;
  --paper-2:#c1c6ca;
  --paper-3:#adb2b7;
  --paper-card:rgba(38,41,44,.035);
  --paper-card-hover:rgba(38,41,44,.09);

  --ink:#26292c;
  --ink-2:#363a3e;
  --ink-3:#494d51;
  --ink-4:#505458;
  --ink-rgb:38,41,44;
  --paper-rgb:204,208,211;

  --cinnabar:#9a3524;
  --cinnabar-soft:#ad4030;
  --cinnabar-wash:rgba(154,53,36,.08);
  --gold:#6f5a1c;
  --gold-soft:#8a6a20;

  --line:rgba(38,41,44,.20);
  --line-strong:rgba(38,41,44,.42);
  --line-invert:rgba(204,208,211,.24);

  --head-bg:rgba(43,46,49,.95);
  --head-blur:0px;
  --band-bg:#26292c;
  --band-fg:#ccd0d3;
  --band-fg-rgb:204,208,211;
  --join-veil:rgba(38,41,44,.80);
  --join-veil-2:rgba(38,41,44,.93);
  --on-accent:#ccd0d3;
  --qr-bg:#fff;

  --shadow-seal:0 0 10px rgba(226,86,74,.45);
  --shadow-soft:none;
  --shadow-lift:none;
  --radius:0;

  /* —— 字体：正文宋体点阵，标签等宽 —— */
  --bit:"SimSun","宋体","Songti SC","Noto Serif SC",serif;
  --mono:"Consolas","Menlo","Courier New","SimSun","宋体",monospace;
  --kai:var(--bit);
  --song:var(--bit);
  --sans:var(--mono);
}

/* ============ 机身（页）============ */
html[data-theme="b"] body{
  background:var(--plastic);
  background-image:radial-gradient(120% 80% at 50% -10%,#41464b 0%,#24272a 62%,#191b1d 100%);
  background-attachment:fixed;
  color:var(--ink);
}

/* ============ 灰阶屏（正文区）============ */
html[data-theme="b"] main{
  position:relative;isolation:isolate;background:var(--lcd);
  box-shadow:inset 0 0 0 1px rgba(38,41,44,.28),inset 0 0 70px rgba(38,41,44,.10);
}

/* ============ 顶栏（机身塑料）============ */
html[data-theme="b"] .site-head{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.45);
  border-bottom-color:rgba(0,0,0,.5);
  color:#c9ced3;
}
/* 丝印型号那条线 */
html[data-theme="b"] .site-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(204,208,211,.3),transparent);
}
html[data-theme="b"] .brand-txt strong{color:#d5d9dd;letter-spacing:.2em}
html[data-theme="b"] .brand-txt span{color:#8f959b;letter-spacing:.26em}

/* 印章 → 电源指示灯 */
html[data-theme="b"] .seal{transform:none;border-radius:0;text-shadow:0 1px 0 rgba(0,0,0,.35)}
html[data-theme="b"] .seal.sm{background:var(--plastic-lo);color:#c9ced3;box-shadow:0 0 0 1px rgba(204,208,211,.18) inset}

/* 导航 → 方括号菜单
   ⚠️ 方括号是「永远占位」的（隐藏时也只透明，不回收宽度），6 个标签时它比其他主题宽 170px+，
   所以本主题字号与间距都要比水墨主题紧一档，否则顶栏会把中文标签挤到按字断行。 */
html[data-theme="b"] .nav{letter-spacing:.06em;font-size:14.5px;gap:16px}
html[data-theme="b"] .nav a{color:#a4a9ae}
html[data-theme="b"] .nav a::before{content:"[";opacity:0;transition:opacity .2s var(--ease)}
html[data-theme="b"] .nav a::after{content:"]";position:static;left:auto;right:auto;bottom:auto;height:auto;
  background:none;opacity:0;transition:opacity .2s var(--ease)}
html[data-theme="b"] .nav a:hover,.nav a.on{color:var(--lcd)}
html[data-theme="b"] .nav a:hover::before,html[data-theme="b"] .nav a:hover::after,
html[data-theme="b"] .nav a.on::before,html[data-theme="b"] .nav a.on::after{opacity:1}
html[data-theme="b"] .nav a.on{color:var(--amber)}

/* 登录 / 用户 / 汉堡 → 实体键 */
html[data-theme="b"] .btn-login,html[data-theme="b"] .nav-toggle{
  font-family:var(--bit);color:#c9ced3;border:0;border-radius:5px;
  background:linear-gradient(180deg,#45494e,#2f3236);
  box-shadow:0 3px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07) inset;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
html[data-theme="b"] .btn-login:hover,html[data-theme="b"] .nav-toggle:hover{
  background:linear-gradient(180deg,#51565c,#383c41);color:var(--amber);border:0;
}
html[data-theme="b"] .nav-toggle{border-radius:5px}
html[data-theme="b"] .nav-toggle i,html[data-theme="b"] .nav-toggle i::before,html[data-theme="b"] .nav-toggle i::after{background:#c9ced3}
html[data-theme="b"] .nav-toggle[aria-expanded="true"] i{background:transparent}
html[data-theme="b"] .who{color:#a4a9ae;border-color:rgba(204,208,211,.2);border-radius:4px;background:rgba(0,0,0,.18)}
html[data-theme="b"] .who img{background:#1e2124}

/* 风格切换器 → 三个小按键 */
html[data-theme="b"] .themes{border-color:rgba(204,208,211,.18);border-radius:5px;background:rgba(0,0,0,.22)}
html[data-theme="b"] .themes button{color:#8f959b;border-right-color:rgba(204,208,211,.12)}
html[data-theme="b"] .themes button:hover{background:rgba(204,208,211,.1);color:var(--lcd)}
html[data-theme="b"] .themes button[aria-pressed="true"]{
  background:var(--plastic-lo);color:var(--amber);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
html[data-theme="b"] .themes i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}

/* ============ 抽屉菜单（屏上菜单）============ */
html[data-theme="b"] .drawer{background:var(--lcd);border-top-color:rgba(38,41,44,.4);
  box-shadow:inset 0 0 0 1px rgba(38,41,44,.25)}
html[data-theme="b"] .drawer nav a{border-bottom:1px dotted rgba(38,41,44,.45);letter-spacing:.16em}
html[data-theme="b"] .drawer nav a::before{content:"▸ ";opacity:0;transition:opacity .18s var(--ease)}
html[data-theme="b"] .drawer nav a.on{color:var(--ink)}
html[data-theme="b"] .drawer nav a.on::before{opacity:1}
html[data-theme="b"] .drawer nav a:active{background:var(--ink);color:var(--lcd);padding-left:14px}
html[data-theme="b"] .drawer .drawer-foot{color:var(--ink-3)}

/* ============ 首屏（开机画面）============ */
html[data-theme="b"] .hero-bg{opacity:.74;filter:contrast(1.1)}
html[data-theme="b"] .hero-bg img{filter:grayscale(1) contrast(1.24);mix-blend-mode:multiply}
html[data-theme="b"] .kicker{letter-spacing:.3em;color:var(--ink-2)}
html[data-theme="b"] .kicker::after{
  content:"";display:inline-block;width:8px;height:12px;background:var(--ink);
  margin-left:9px;vertical-align:-2px;animation:b-blink 1.05s steps(1) infinite}
@keyframes b-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
html[data-theme="b"] .hero h1{letter-spacing:.2em;text-shadow:1px 1px 0 rgba(38,41,44,.22)}
html[data-theme="b"] .hero h1 .stamp{background:none;color:var(--ink);border:2px solid var(--ink);
  transform:translateY(6px);box-shadow:none;font-size:16px;letter-spacing:.1em}
html[data-theme="b"] .hero h2{letter-spacing:.2em}
html[data-theme="b"] .hero .sub{color:var(--ink-2)}
html[data-theme="b"] .hero-stats{border-top:2px solid var(--ink)}
html[data-theme="b"] .hero-stats b{font-size:32px}
html[data-theme="b"] .hero-stats span{color:var(--ink-3);letter-spacing:.18em}
html[data-theme="b"] .page-head .hero-bg{opacity:.4}
html[data-theme="b"] .crumb{color:var(--ink-3)}
html[data-theme="b"] .page-head .lead{color:var(--ink-2)}

/* ============ 按钮 → 屏上硬边按键 ============ */
html[data-theme="b"] .btn{
  font-family:var(--bit);letter-spacing:.18em;border:1px solid var(--ink);border-radius:0;
  background:rgba(38,41,44,.06);color:var(--ink);box-shadow:3px 3px 0 rgba(38,41,44,.3)}
html[data-theme="b"] .btn:hover{background:var(--ink);color:var(--lcd);border-color:var(--ink);
  transform:none;box-shadow:3px 3px 0 rgba(38,41,44,.5)}
html[data-theme="b"] .btn-solid{background:var(--ink);color:var(--lcd);box-shadow:3px 3px 0 rgba(38,41,44,.35)}
html[data-theme="b"] .btn-solid:hover{background:#1a1d20;border-color:#1a1d20;color:var(--lcd)}
html[data-theme="b"] .btn-ghost:hover{background:var(--ink);color:var(--lcd)}
html[data-theme="b"] .btn-cinnabar{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--lcd);
  box-shadow:3px 3px 0 rgba(38,41,44,.35)}
html[data-theme="b"] .btn-cinnabar:hover{background:#832c1d;border-color:#832c1d;color:var(--lcd)}
html[data-theme="b"] .more{color:var(--ink-2)}
html[data-theme="b"] .more:hover{color:var(--ink);border-color:var(--ink)}

/* ============ 三步 / 卡片 / 面板 ============ */
html[data-theme="b"] .steps{background:rgba(38,41,44,.04)}
html[data-theme="b"] .step b{font-family:var(--mono);letter-spacing:.24em}
html[data-theme="b"] .step h3{letter-spacing:.1em}
html[data-theme="b"] .step p{color:var(--ink-2)}

html[data-theme="b"] .card,html[data-theme="b"] .pick,html[data-theme="b"] .feature,
html[data-theme="b"] .panel,html[data-theme="b"] .side,html[data-theme="b"] .notice{background:rgba(38,41,44,.035)}
html[data-theme="b"] .card:hover,html[data-theme="b"] .feature:hover{
  transform:none;background:var(--ink);color:var(--lcd);box-shadow:none;border-color:var(--ink)}
html[data-theme="b"] .card:hover .card-body h3,html[data-theme="b"] .card:hover .card-body h4,
html[data-theme="b"] .feature:hover .feature-body h3,
html[data-theme="b"] .feature:hover .feature-body h4{color:var(--amber)}
html[data-theme="b"] .card:hover .card-body p,html[data-theme="b"] .card:hover .card-body .meta,
html[data-theme="b"] .feature:hover .feature-body p,html[data-theme="b"] .feature:hover .feature-body .meta,
html[data-theme="b"] .card:hover .card-foot .plat{color:rgba(204,208,211,.72)}
html[data-theme="b"] .card:hover .card-foot{border-top-color:rgba(204,208,211,.35)}
html[data-theme="b"] .card:hover .card-foot .go,html[data-theme="b"] .card:hover .card-foot .go.off{color:var(--amber)}

/* 截图 / 配图统一灰度化，悬停不变彩、只提亮 */
html[data-theme="b"] .card-shot img,html[data-theme="b"] .feature img,html[data-theme="b"] .pick-card img,
html[data-theme="b"] .prose img{filter:grayscale(1) contrast(1.24);mix-blend-mode:multiply}
html[data-theme="b"] .card:hover .card-shot img,html[data-theme="b"] .feature:hover img,
html[data-theme="b"] .pick-card:hover img{filter:grayscale(1) contrast(1.34) brightness(1.06);transform:none}

/* 资讯库推荐位：本主题不做整卡反色（圆点条会跟着翻白），只沿用灰阶屏那套提亮 */
html[data-theme="b"] .pick-cap h2{letter-spacing:.14em}
html[data-theme="b"] .pick-cap p{letter-spacing:.24em}
html[data-theme="b"] .pick-body h3{letter-spacing:.04em}
html[data-theme="b"] .pick-card:hover .pick-body h3{color:var(--cinnabar)}
html[data-theme="b"] .pick-body .meta{letter-spacing:.2em}
html[data-theme="b"] .pick-dots{background:rgba(38,41,44,.05)}
html[data-theme="b"] .pdot{border-radius:0}

/* 无截图的封面 → 不加点阵底纹（覆写掉默认风格的网点） */
html[data-theme="b"] .cover::before{content:none}
html[data-theme="b"] .cover .cat{letter-spacing:.3em}
html[data-theme="b"] .cover .name{letter-spacing:.12em}
html[data-theme="b"] .cover .en{letter-spacing:.24em;color:var(--ink-4)}
html[data-theme="b"] .cover .rule{background:var(--ink)}
html[data-theme="b"] .card:hover .cover{background:var(--ink)}
html[data-theme="b"] .card:hover .cover .cat,html[data-theme="b"] .card:hover .cover .name,
html[data-theme="b"] .card:hover .cover .en{color:var(--lcd)}
html[data-theme="b"] .card:hover .cover .rule{background:var(--amber)}

/* 标签 / 进入按钮 → 方括号 */
html[data-theme="b"] .card-tag{letter-spacing:.14em;font-family:var(--bit)}
html[data-theme="b"] .card-tag.gold{color:var(--lcd)}
html[data-theme="b"] .card-foot .go::before{content:"[ "}
html[data-theme="b"] .card-foot .go::after{content:" ]"}
html[data-theme="b"] .card:hover .card-foot .go::after{margin-left:0}
html[data-theme="b"] .card-foot .go.off{font-family:var(--sans)}

/* ============ 筛选 / 标签页 ============ */
html[data-theme="b"] .filter .label{letter-spacing:.24em}
html[data-theme="b"] .chip{letter-spacing:.12em}
html[data-theme="b"] .chip:hover{background:rgba(38,41,44,.14);border-color:var(--ink);color:var(--ink)}
html[data-theme="b"] .chip.on{background:var(--ink);border-color:var(--ink);color:var(--lcd)}
html[data-theme="b"] .chip .n{letter-spacing:0}
html[data-theme="b"] .tabs button.on{color:var(--ink);border-color:var(--ink)}
html[data-theme="b"] .empty{letter-spacing:.16em}

/* 资讯列表 → 选中即反白（真机菜单手感） */
html[data-theme="b"] .list li{border-bottom-style:dotted}
html[data-theme="b"] .list a:hover{padding-left:10px;background:var(--ink);color:var(--lcd)}
html[data-theme="b"] .list a:hover .t{color:var(--lcd)}
html[data-theme="b"] .list a:hover .d{color:rgba(204,208,211,.72)}
html[data-theme="b"] .list a:hover .dot{background:var(--amber);opacity:1}
html[data-theme="b"] .list .t{letter-spacing:.04em}
html[data-theme="b"] .list .d{letter-spacing:.12em}
html[data-theme="b"] .list .k{border-radius:0}

/* ============ 提示框 / 正文 ============ */
html[data-theme="b"] .notice h3{letter-spacing:.12em}
html[data-theme="b"] .notice ol li::before{border-radius:0;font-family:var(--mono)}
html[data-theme="b"] .panel{padding:30px 32px}
html[data-theme="b"] .panel h3,html[data-theme="b"] .side h3{letter-spacing:.14em}
html[data-theme="b"] .side .k{color:var(--cinnabar)}
html[data-theme="b"] .side ul a:hover{color:var(--ink)}

html[data-theme="b"] .prose h2{letter-spacing:.14em}
html[data-theme="b"] .prose p{line-height:2.05}
html[data-theme="b"] .prose blockquote{background:rgba(38,41,44,.06);border-left-color:var(--ink)}
html[data-theme="b"] .prose .prose-tip::before{color:var(--gold)}
html[data-theme="b"] .prose a{color:var(--cinnabar);border-bottom-color:rgba(154,53,36,.4)}
html[data-theme="b"] .prose .kv dt,html[data-theme="b"] .prose thead th{background:rgba(38,41,44,.08)}
html[data-theme="b"] .prose tbody tr:hover{background:rgba(38,41,44,.06)}
html[data-theme="b"] .art-head .meta .k,html[data-theme="b"] .art-foot .tags span{border-radius:0}
html[data-theme="b"] .art-head .meta .k{color:var(--cinnabar)}
html[data-theme="b"] .art-head .abstract{border-left-color:var(--line-strong)}
html[data-theme="b"] .art-head h1{letter-spacing:.1em}

/* ============ 加入我们（深灰反白面板）============ */
html[data-theme="b"] .jcard{border-color:rgba(204,208,211,.28);background:rgba(204,208,211,.05)}
html[data-theme="b"] .jcard:hover{transform:none;border-color:rgba(224,178,92,.5);background:rgba(204,208,211,.1)}
html[data-theme="b"] .jcard h3{letter-spacing:.14em}
html[data-theme="b"] .jcard p b{color:var(--amber)}
html[data-theme="b"] .jcard .qr{border-color:rgba(204,208,211,.4);border-radius:0}
html[data-theme="b"] .join .sec-head h3::before{background:var(--amber)}
html[data-theme="b"] .join .contact-line a:hover{color:var(--amber)}

/* ============ 页脚（机身下缘 + 电源灯）============ */
html[data-theme="b"] .site-foot{
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.22));
  border-top-color:rgba(0,0,0,.5);color:#8b9199;letter-spacing:.08em;
}
html[data-theme="b"] .foot-brand::after{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--led);flex:none;margin-left:2px;
  box-shadow:0 0 9px 2px rgba(226,86,74,.65),0 0 0 2px rgba(0,0,0,.5);animation:b-pulse 3.2s infinite ease-in-out}
@keyframes b-pulse{0%,100%{opacity:1}50%{opacity:.4}}
html[data-theme="b"] .foot-brand b{color:#d5d9dd}
html[data-theme="b"] .foot-col h4{color:#b9bfc3;letter-spacing:.18em}
html[data-theme="b"] .foot-grid,html[data-theme="b"] .foot-bottom{border-color:rgba(0,0,0,.4)}
html[data-theme="b"] .site-foot a:hover,html[data-theme="b"] .foot-col a:hover{color:var(--amber)}
html[data-theme="b"] .foot-bottom{font-family:var(--mono)}

/* ============ 404 ============ */
html[data-theme="b"] .err .big{letter-spacing:.1em}
html[data-theme="b"] .err .cta{justify-content:center}

/* ============ 通用小件 ============ */
html[data-theme="b"] .seal,html[data-theme="b"] .cover .mini-seal,html[data-theme="b"] .jcard .qr,
html[data-theme="b"] .list .k,html[data-theme="b"] .notice ol li::before,html[data-theme="b"] .art-head .meta .k,
html[data-theme="b"] .art-foot .tags span,html[data-theme="b"] .hero h1 .stamp{border-radius:0}
html[data-theme="b"] ::selection{background:var(--ink);color:var(--lcd)}

@media(prefers-reduced-motion:reduce){
  html[data-theme="b"] .kicker::after,html[data-theme="b"] .foot-brand::after{animation:none}
}

/* ============ 移动端：LCD 风格的大字距在窄屏会撑破布局 ============
   本主题多处用 .2em~.3em 字距做「电子词典点阵」观感，字号收缩后字距不跟着收缩，
   在 620px 以下会让文字实际宽度膨胀 20%~30%（标题、导航尤其明显）。
   这里统一收敛字距，观感仍是等宽点阵风。 */
@media(max-width:620px){
  html[data-theme="b"] .brand-txt strong{letter-spacing:.12em}
  html[data-theme="b"] .brand-txt span{display:none}
  html[data-theme="b"] .nav{letter-spacing:.1em}
  html[data-theme="b"] .drawer nav a{letter-spacing:.08em}
  html[data-theme="b"] .kicker{letter-spacing:.18em}
  html[data-theme="b"] .hero h1{letter-spacing:.12em}
  html[data-theme="b"] .hero h2{letter-spacing:.12em}
  html[data-theme="b"] .hero-stats b{font-size:26px}
  html[data-theme="b"] .hero-stats span{letter-spacing:.08em}
  html[data-theme="b"] .cover .cat,
  html[data-theme="b"] .cover .en{letter-spacing:.14em}
  html[data-theme="b"] .filter .label,
  html[data-theme="b"] .step b{letter-spacing:.14em}
  html[data-theme="b"] .prose h2,
  html[data-theme="b"] .notice h3,
  html[data-theme="b"] .panel h3,
  html[data-theme="b"] .side h3{letter-spacing:.06em}
  html[data-theme="b"] .art-head h1{letter-spacing:.05em}
  html[data-theme="b"] .panel{padding:22px 18px}
}