/* ==========================================================================
   NLP 算法实验平台 · 共享样式系统（像素风 / 8-bit 实验终端）
   设计方向：像素游戏 UI + 实验手册
   - 米黄纸底 + 点阵网格 + 墨色硬边框 + 无模糊硬阴影
   - 全直角（radius = 0）、2px 实线描边、按钮按下位移
   - 中文像素字体 Zpix（本地内嵌）
   - 三种版本色彩身份：完整版=松绿 / 调参版=琥珀 / 代码版=深松绿
   ========================================================================== */

@font-face{
  font-family:'Zpix';
  src:url('zpix.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* 像素纸面与墨色 */
  --bg:#f2ede0;
  --bg-2:#e7dfc9;
  --surface:#fffdf7;
  --surface-2:#f8f3e5;
  --ink:#22201a;
  --ink-2:#4d4738;
  --ink-3:#807863;
  --line:#22201a;          /* 硬边框：统一用墨色 */
  --line-2:#b8ac8c;        /* 浅边框 */

  /* 主色：松绿 */
  --brand:#2e6b50;
  --brand-2:#1f4436;
  --brand-soft:#d9e9de;
  --brand-line:#2e6b50;

  /* 强调：砖橙 */
  --accent:#c4552a;
  --accent-soft:#f7e0d2;

  /* 版本身份色 */
  --tune:#b0801f;
  --tune-soft:#f6e9cd;
  --tune-line:#b0801f;
  --code:#38745a;
  --code-soft:#d9e9e0;

  /* 语义色 */
  --pos:#2f7d5b;
  --neg:#b0453c;
  --warn:#b0801f;
  --info:#3d6b96;

  /* 全直角 */
  --radius:0px;
  --radius-lg:0px;
  --radius-sm:0px;

  /* 硬阴影：无模糊，位移式 */
  --shadow:4px 4px 0 #cfc4a6;
  --shadow-lift:6px 6px 0 #bfb394;

  --font-pixel:'Zpix','VT323',-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-sans:var(--font-pixel);
  --font-serif:var(--font-pixel);
  --font-mono:var(--font-pixel);
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-sans);
  font-size:12px;
  background-color:var(--bg);
  /* 8px 像素网格底纹 */
  background-image:
    linear-gradient(rgba(34,32,26,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,32,26,.045) 1px, transparent 1px);
  background-size:8px 8px;
  color:var(--ink);
  line-height:2.1;
  -webkit-font-smoothing:none;
  text-rendering:optimizeSpeed;
}

/* ---------- 页面头部（子页面内） ---------- */
.page-head{
  padding:30px 6% 26px;
  background:var(--brand-2);
  color:#f4f0e2;
  border-bottom:5px solid var(--ink);
  position:relative;
}
/* 底部像素奶酪条 */
.page-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background-image:repeating-linear-gradient(90deg,#f4f0e2 0 8px,transparent 8px 16px);
  opacity:.28;
}
.page-head h1{
  font-family:var(--font-pixel);
  font-size:24px;
  font-weight:400;
  letter-spacing:.04em;
  margin-bottom:10px;
  line-height:1.6;
}
.page-head .kicker{
  display:inline-block;
  font-family:var(--font-pixel);
  font-size:12px;
  letter-spacing:.04em;
  color:#cfe3d6;
  border:2px solid #7ea891;
  padding:3px 10px;
  margin-bottom:12px;
  background:#22493a;
}
.page-head p{color:#c8d8ce;font-size:12px;max-width:78ch;line-height:2}

/* 版本差异：调参版暖棕头、代码版深绿头 */
.page-head.tune{background:#4a3a1c}
.page-head.tune .kicker{color:#e6cf9a;border-color:#b99a56;background:#3b2e15}
.page-head.tune p{color:#ddcda8}
.page-head.code{background:#1c3a2e}
.page-head.code .kicker{color:#a6d9bd;border-color:#5c9779;background:#16301f}
.page-head.code p{color:#bcd6c7}

/* ---------- 布局 ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:26px 20px 64px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.split{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.split-wide{display:grid;grid-template-columns:1fr 1.35fr;gap:18px;align-items:start}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---------- 卡片 ---------- */
.card{
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:0;
  padding:22px 24px;
  margin-bottom:20px;
  box-shadow:var(--shadow);
}
.card.flat{box-shadow:4px 4px 0 #d8cfb4}
.card > h2{
  font-family:var(--font-pixel);
  font-size:12px;
  color:var(--brand-2);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--ink);
  letter-spacing:.02em;
  font-weight:400;
}
.card > h2 .idx{
  font-family:var(--font-pixel);
  color:var(--surface);
  background:var(--ink);
  font-size:12px;
  margin-right:8px;
  padding:2px 6px;
  display:inline-block;
  vertical-align:1px;
  letter-spacing:0;
}
.card p{color:var(--ink-2)}
.card p + p{margin-top:9px}
.card b,.card strong{color:var(--ink);font-weight:400;background:rgba(34,32,26,.08);padding:0 3px}
.panel{
  background:var(--surface-2);
  border:2px solid var(--ink);
  border-radius:0;
  padding:16px;
}
.panel h3{
  font-size:12px;
  color:var(--brand-2);
  margin-bottom:12px;
  font-weight:400;
  letter-spacing:.02em;
  padding-bottom:8px;
  border-bottom:1px dashed var(--line-2);
}

/* ---------- 步骤标记（完整版流程） ---------- */
.step{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--font-pixel);
  font-size:12px;
  color:var(--brand-2);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--ink);
  font-weight:400;
}
.step .n{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:0;
  background:var(--brand);color:#fff;
  border:2px solid var(--ink);
  font-size:12px;font-weight:400;
  box-shadow:2px 2px 0 var(--ink);
}
.step.sm{font-size:12px}

/* ---------- 提示块 ---------- */
.tip{
  background:var(--brand-soft);
  border:2px solid var(--ink);
  border-left-width:8px;
  border-left-color:var(--brand);
  border-radius:0;
  padding:12px 15px;
  margin:12px 0;
  font-size:12px;
  color:var(--ink-2);
  line-height:2;
}
.tip b{color:var(--brand-2);background:none;padding:0}
.tip.warn{background:var(--tune-soft);border-left-color:var(--tune)}
.tip.warn b{color:#7a5713}
.tip.accent{background:var(--accent-soft);border-left-color:var(--accent)}
.tip.accent b{color:#8f3a17}
.tip.info{background:#e3ecf3;border-left-color:var(--info)}
.tip.info b{color:#2c5375}
.tip .lbl{
  font-family:var(--font-pixel);font-size:12px;letter-spacing:.04em;
  color:var(--brand);display:block;margin-bottom:3px;
  text-transform:uppercase;
}

/* ---------- 公式 ---------- */
.formula{
  font-family:var(--font-pixel);
  font-size:12px;
  background:var(--surface-2);
  border:2px dashed var(--line-2);
  border-radius:0;
  padding:13px 15px;
  margin:12px 0;
  color:var(--brand-2);
  overflow-x:auto;
  line-height:2.2;
  text-align:center;
}
.formula .hl{
  color:#fff;background:var(--accent);
  padding:1px 5px;font-weight:400;
}
.formula .dim{color:var(--ink-3)}

/* ---------- Token 标签 ---------- */
.tk{
  display:inline-block;
  padding:4px 10px;
  margin:3px;
  border-radius:0;
  font-size:12px;
  background:#efe9d8;
  color:var(--ink-2);
  border:2px solid var(--ink);
  transition:none;
}
.tk.pos{background:#d6e9dc;color:#215c42}
.tk.neg{background:#f5dcd8;color:#8f352e}
.tk.negation{background:var(--tune-soft);color:#7a5713}
.tk.intensifier{background:#dde5ef;color:#33477a}
.tk.transition{background:#e8dcef;color:#6b3a78}
.tk.pivot{background:var(--accent-soft);color:#8f3a17}
.tk.dim{opacity:.34}
.tk.sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:2px 2px 0 var(--brand)}

.legend{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.legend .tk{cursor:default}

/* ---------- 进度条 / 分布条（像素块） ---------- */
.bar{
  height:24px;
  background:#e6dfc9;
  border:2px solid var(--ink);
  border-radius:0;
  overflow:hidden;
  margin:7px 0;
  position:relative;
}
.bar.thin{height:14px}
.bar .fill{
  height:100%;
  width:0;
  border-radius:0;
  transition:width .45s steps(12,end);
  background-color:var(--brand);
  /* 像素竖纹 */
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 3px,transparent 3px 6px);
}
.bar .fill.accent{background-color:var(--accent)}
.bar .fill.tune{background-color:var(--tune)}
.bar-row{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);font-family:var(--font-pixel)}

/* 水平候选列表（N-gram 预测等） */
.dist{margin:10px 0}
.dist-item{margin-bottom:11px}
.dist-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.dist-head .w{color:var(--ink)}
.dist-head .p{font-family:var(--font-pixel);color:var(--accent)}

/* ---------- 结果判定 ---------- */
.verdict{
  font-family:var(--font-pixel);
  font-size:24px;
  text-align:center;
  padding:20px;
  border-radius:0;
  background:var(--surface-2);
  border:2px solid var(--ink);
  margin:14px 0;
  color:var(--ink-3);
  box-shadow:4px 4px 0 #d8cfb4;
  transition:none;
  line-height:1.7;
}
.verdict.on{background:var(--brand-soft);color:var(--brand-2);box-shadow:4px 4px 0 var(--brand)}
.verdict.neg{background:var(--accent-soft);color:#8f3a17;box-shadow:4px 4px 0 var(--accent)}

/* ---------- 表单控件 ---------- */
label{display:block;margin:14px 0 5px;font-size:12px;color:var(--ink-2)}
label .value{
  float:right;font-family:var(--font-pixel);color:var(--surface);
  background:var(--accent);padding:1px 7px;font-size:12px;
}
input[type=range]{
  width:100%;height:12px;-webkit-appearance:none;appearance:none;
  background:#e6dfc9;border:2px solid var(--ink);border-radius:0;
  outline:none;margin:6px 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:20px;border-radius:0;
  background:var(--brand);border:2px solid var(--ink);
  cursor:pointer;
  margin-top:-1px;
}
input[type=range].accent::-webkit-slider-thumb{background:var(--accent)}
input[type=range].tune::-webkit-slider-thumb{background:var(--tune)}

select,textarea,input[type=text],input[type=number]{
  width:100%;padding:8px 10px;
  border:2px solid var(--ink);border-radius:0;
  font-size:12px;font-family:var(--font-pixel);
  background:var(--surface);color:var(--ink);
  transition:none;
}
select:focus,textarea:focus,input:focus{
  outline:none;
  box-shadow:3px 3px 0 var(--brand);
}
textarea{resize:vertical;min-height:78px;line-height:2}

/* ---------- 按钮（像素按键） ---------- */
.btn{
  display:inline-block;
  padding:8px 16px;
  margin:6px 6px 0 0;
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--brand);
  color:#fff;
  font-family:var(--font-pixel);
  font-size:12px;
  cursor:pointer;
  transition:none;
  box-shadow:3px 3px 0 var(--ink);
  position:relative;
  top:0;
}
.btn:hover{background:var(--brand-2)}
.btn:active{top:3px;box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:var(--surface);color:var(--brand-2)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.chip{
  background:var(--surface);color:var(--ink-2);
  font-size:12px;padding:6px 12px;
  box-shadow:2px 2px 0 var(--line-2);
}
.btn.chip:hover{background:var(--surface-2);color:var(--brand-2);box-shadow:2px 2px 0 var(--brand)}
.btn.chip.active{
  background:var(--brand);color:#fff;
  box-shadow:2px 2px 0 var(--ink);
}
.btn.accent{background:var(--accent)}
.btn.accent:hover{background:#a3411d}
.btn.sm{padding:5px 10px;font-size:12px;margin:3px 3px 0 0}

/* ---------- 流程图 ---------- */
.flow{
  display:flex;align-items:center;justify-content:center;
  gap:6px;flex-wrap:wrap;
  padding:18px 14px;
  background:var(--surface-2);
  border:2px solid var(--ink);
  border-radius:0;
  margin:12px 0;
}
.flow-node{
  padding:9px 14px;
  border-radius:0;
  background:var(--surface);
  border:2px solid var(--ink);
  text-align:center;
  font-size:12px;
  min-width:84px;
  color:var(--ink-2);
  transition:none;
}
.flow-node .sub{display:block;font-family:var(--font-pixel);font-size:12px;margin-top:3px;color:var(--ink-3);line-height:1.7}
.flow-node.on{background:var(--brand-soft);color:var(--brand-2);box-shadow:3px 3px 0 var(--brand)}
.flow-node.on .sub{color:var(--brand)}
.flow-node.hot{background:var(--accent-soft);color:#8f3a17;box-shadow:3px 3px 0 var(--accent)}
.flow-node.hot .sub{color:var(--accent)}
.flow-arrow{color:var(--ink-3);font-size:12px}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}
th,td{padding:8px 10px;text-align:left;border:2px solid var(--ink)}
th{
  background:var(--ink);
  color:var(--surface);
  font-weight:400;font-size:12px;
  letter-spacing:.02em;
}
td{color:var(--ink-2);background:var(--surface)}
td.num,th.num{text-align:right}
tbody tr:hover td{background:var(--surface-2)}
td.hl{color:var(--surface);background:var(--accent)}

/* ---------- 代码编辑器（代码版） ---------- */
.editor{
  background:#1b201d;
  border:2px solid var(--ink);
  border-radius:0;
  overflow:hidden;
  box-shadow:5px 5px 0 var(--ink);
}
.editor-top{
  background:#2b352f;
  color:#a8bfae;
  padding:8px 13px;
  font-family:var(--font-pixel);
  font-size:12px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px solid var(--ink);
}
.editor-top .dot{display:inline-flex;gap:4px}
.editor-top .dot i{width:8px;height:8px;background:#3f5348;display:block}
.code{
  padding:12px 0;
  font-family:var(--font-pixel);
  font-size:12px;
  line-height:2.05;
  overflow-x:auto;
}
.line{display:grid;grid-template-columns:46px 1fr;min-height:24px;padding-right:16px}
.line .no{color:#546b5c;text-align:right;padding-right:12px;user-select:none;font-size:12px}
.line .src{color:#e0e8e2;white-space:pre}
.line.on{background:#3a3218;box-shadow:inset 4px 0 var(--tune)}
.kw{color:#8fb8e0}
.str{color:#a8d3a0}
.num{color:#e8bf7a}
.com{color:#6f8779}
.fn{color:#c3a6dd}
.editable{
  border-bottom:2px dashed var(--tune);
  cursor:pointer;padding:0 2px;outline:none;
  background:rgba(176,128,31,.16);
}
.editable:focus{background:rgba(176,128,31,.34);border-bottom-style:solid}

/* 执行日志 */
.log{
  background:#141915;
  color:#a9d3ba;
  border:2px solid var(--ink);
  padding:13px 15px;
  border-radius:0;
  font-family:var(--font-pixel);
  font-size:12px;
  line-height:1.95;
  white-space:pre-wrap;
  min-height:170px;max-height:330px;
  overflow-y:auto;
  box-shadow:4px 4px 0 #cfc4a6;
}
.log .ok{color:#8fd6a8}
.log .err{color:#e8a091}
.log .step{color:#e8bf7a}
.log .dim{color:#5f7a6c}

/* ---------- 变量监视 ---------- */
.vargrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px}
.varbox{
  padding:7px 10px;
  border-radius:0;
  background:var(--surface-2);
  border:2px solid var(--ink);
  font-family:var(--font-pixel);
  font-size:12px;
  color:var(--ink-2);
}
.varbox span{color:var(--surface);background:var(--accent);padding:1px 5px;font-weight:400}

/* ---------- 数据小卡 ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;margin:12px 0}
.stat{
  background:var(--surface-2);
  border:2px solid var(--ink);
  border-radius:0;
  padding:12px 14px;
  text-align:center;
  box-shadow:3px 3px 0 #d8cfb4;
}
.stat .k{font-family:var(--font-pixel);font-size:12px;color:var(--ink-3);display:block;margin-bottom:5px}
.stat .v{font-family:var(--font-pixel);font-size:18px;color:var(--brand-2);line-height:1.4;display:block}
.stat.hot .v{color:var(--accent)}

/* ---------- 词条/说明行 ---------- */
.kv{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line-2);font-size:12px}
.kv:last-child{border-bottom:0}
.kv .k{flex:none;width:120px;color:var(--ink-3)}
.kv .v{color:var(--ink-2)}

/* ---------- 渐入（像素跳变） ---------- */
.rise{animation:rise .28s steps(3,end) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.d1{animation-delay:.04s}.d2{animation-delay:.08s}.d3{animation-delay:.12s}.d4{animation-delay:.16s}.d5{animation-delay:.2s}

/* ---------- 工具类 ---------- */
.hidden{display:none !important}
.mono{font-family:var(--font-pixel)}
.muted{color:var(--ink-3)}
.small{font-size:12px}
.mt0{margin-top:0}.mt12{margin-top:12px}.mt18{margin-top:18px}
.nowrap{white-space:nowrap}
.scroll-x{overflow-x:auto}

/* 小徽标 */
.badge{
  display:inline-block;padding:1px 7px;
  font-family:var(--font-pixel);font-size:12px;
  background:var(--brand-soft);color:var(--brand-2);
  border:2px solid var(--brand);
}
.badge.tune{background:var(--tune-soft);color:#7a5713;border-color:var(--tune)}
.badge.accent{background:var(--accent-soft);color:#8f3a17;border-color:var(--accent)}

/* ---------- 滚动条（像素风） ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#e6dfc9;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb{background:var(--brand);border:2px solid var(--ink)}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .split,.split-wide,.grid2,.grid3{grid-template-columns:1fr}
  .page-head h1{font-size:18px}
  .wrap{padding:18px 14px 48px}
}
@media(max-width:520px){
  .vargrid{grid-template-columns:1fr}
  .card{padding:18px 16px}
  .log{font-size:12px}
}