/* ============================================================
   Windows 3.1 仿真站 · 样式表
   严格执行 3.1 视觉规范：#c0c0c0 面板 / #0000a8 活动标题栏
   / #808080 非活动标题栏 / 白色客户区 / 1px 黑色外框
   ============================================================ */

@font-face {
  font-family: 'F31Latin';
  src: url('../assets/fonts/fusion-pixel-12px-proportional-latin.ttf.woff2') format('woff2');
  font-display: swap;
  /* p70 · 这个「像素拉丁」文件其实含全部汉字（36k 字形）。若不限制区间，它会抢在
     中文字体之前把汉字按 12px 渲染 ⇒ 中文字体永远轮不到。这里把它限制在 CJK 区段之下，
     只管西文/符号，汉字一律交给 SimSun31（它排在各字体栈首位）。 */
  unicode-range: U+0000-2E7F;
}
/* p70 · 全局中文字体 = Windows 原版「宋体」点阵
   ------------------------------------------------------------
   数据来源：Windows 自带 simsun.ttc（中易宋体）内嵌的 1-bit 点阵，
   取 16px 一档（Windows 3.1/3.2 简体中文版随盘的点阵宋体就是 16px/20px 两档），
   逐像素描成方块轮廓（1 像素 = 128 字体单位 ⇒ unitsPerEm 2048，12px 字号下 em 恰为 16px），
   ⇒ 汉字以 16×16 实像素呈现，边界正好落在设备像素网格上，**零抗锯齿**。
   size-adjust 116.6667% ⇒ 站内 12px 字号对应 **14px 字面**（汉字 14×14，每字步进 14px）：
   字形仍是 16px 原版点阵（不做任何重绘/变形），只是整体等比压到 14px（16 → 14，比例 0.875），
   这样 14×14 的墨迹稳稳落在原有 12px 西文的行框里，绝不撑框。
   仅覆盖中文与中文标点，英文仍使用原有像素字体（栈里排在它后面）。
   生成脚本：_dev/p70-build-simsun.py（可重跑 --ppem 12/13/…/17 换档）。 */
@font-face {
  font-family: 'SimSun31';
  src: url('../assets/fonts/simsun31-16.woff2') format('woff2');
  font-display: swap;
  size-adjust: 116.6667%;
  unicode-range: U+00B7, U+2010-201F, U+2026-2027, U+203B, U+2E80-2EFF, U+2F00-2FDF, U+3000-303F, U+3100-312F, U+3190-319F, U+31C0-31EF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE10-FE1F, U+FE30-FE4F, U+FF00-FFEF, U+20000-2A6DF, U+2A700-2EBEF;
}
@font-face {
  font-family: 'F31Hans';
  src: url('../assets/fonts/fusion-pixel-12px-proportional-zh_hans.ttf.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'F31Hant';
  src: url('../assets/fonts/fusion-pixel-12px-proportional-zh_hant.ttf.woff2') format('woff2');
  font-display: swap;
}

:root {
  --face: #c0c0c0;
  --face-light: #dfdfdf;
  --face-shadow: #808080;
  --white: #ffffff;
  --black: #000000;
  --title-active: #0000a8;
  --title-inactive: #808080;
  --desktop: #7f7f7f;
  --sel-bg: #0000a8;
  --sel-fg: #ffffff;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--desktop);
  font-family: 'SimSun31', 'Win31System', 'F31Latin', 'F31Hans', 'F31Hant', sans-serif;
  font-size: 12px;
  line-height: 1;
  color: #000;
  -webkit-font-smoothing: none;
  user-select: none;
}

/* 经典箭头光标 */
body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path d="M1 0 L1 9 L3.4 6.8 L5 10.6 L6.8 9.9 L5.2 6.2 L8.6 6.2 Z" fill="white" stroke="black" stroke-width="0.9" stroke-linejoin="miter"/></svg>') 1 1, default;
}
input, textarea { cursor: text; }
button, .clickable { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path d="M1 0 L1 9 L3.4 6.8 L5 10.6 L6.8 9.9 L5.2 6.2 L8.6 6.2 Z" fill="white" stroke="black" stroke-width="0.9"/></svg>') 1 1, default; }

/* ---------- 桌面 ---------- */
#desktop { position: absolute; inset: 0 0 0 0; }

/* ---------- 通用窗口 ---------- */
.win {
  position: absolute;
  background: var(--face);
  border: 1px solid var(--black);
  box-shadow:
    inset 1px 1px 0 var(--white),
    inset -1px -1px 0 var(--face-shadow);
  padding: 3px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  min-height: 100px;
}
.win.active { z-index: inherit; }

.titlebar {
  height: 18px;
  background: var(--title-inactive);
  display: flex;
  align-items: center;
  padding: 1px 2px 1px 2px;
  gap: 2px;
  flex: none;
}
.win.focused .titlebar { background: var(--title-bg, var(--title-active)); }

.tb-title {
  flex: 1;
  text-align: center;
  color: var(--white);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}
.win.focused .tb-title { color: var(--white); }
.win:not(.focused) .tb-title { color: #dfdfdf; }

.tb-btn {
  width: 18px; height: 16px;
  background: var(--face);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--face-shadow);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.tb-btn:active { box-shadow: inset 1px 1px 0 var(--face-shadow), inset -1px -1px 0 var(--white); }
.tb-btn svg { display: block; }

/* 菜单栏 */
.menu-bar {
  flex: none;
  height: 18px;
  background: var(--face);
  display: flex;
  align-items: stretch;      /* 菜单标题铺满整行 ⇒ 标蓝时与标题栏之间没有白色空隙（p47） */
  padding: 0 1px;
  border-bottom: 1px solid var(--face-shadow);
  position: relative;
}
.menu-item { padding: 0 9px 0 8px; position: relative; display: flex; align-items: center; }
/* 悬停不标蓝（用户明确要求）：只有「已打开」的菜单标题才标蓝 */
.menu-item.open { background: var(--sel-bg); color: var(--sel-fg); }
.menu-dropdown {
  position: absolute;
  top: 100%;                 /* 紧贴菜单栏下沿（原写死 17px，改高度就错位） */
  left: 0;
  min-width: 120px;
  background: var(--face);
  border: 1px solid var(--black);
  /* ⚠️ p47：**不画 inset 亮/暗线，也不留任何内边距**。参考图 #1 实测（_dev/pngmap.py 读像素）：
       黑框内沿 x=25 / 右内沿 x=342，首项选中色块 x=25..342 —— **左右贴死**；
       黑框下沿 y=99，色块从 y=100 起 —— **上沿贴死**；
       框内除色块外通体 (252,252,252)，**没有**内侧灰线 ⇒ 原 `inset -1px -1px 0 var(--face-shadow)`
       会在白底下拉出一条灰边，参考图里没有。 */
  box-shadow: none;
  padding: 0;
  display: none;
  z-index: 5000;
}
.menu-item.open .menu-dropdown { display: block; }
.menu-entry { padding: 4px 12px 4px 10px; color: #000; white-space: nowrap; }
/* 鼠标划过 / 键盘 ↑↓ 选中的都是同一个高亮（.sel） */
.menu-entry:hover, .menu-entry.sel { background: var(--sel-bg); color: var(--sel-fg); }
.menu-entry.disabled { color: var(--face-shadow); }
.menu-entry.disabled:hover, .menu-entry.disabled.sel { background: transparent; color: var(--face-shadow); }
.menu-sep { height: 1px; margin: 2px 1px; background: var(--face-shadow); border-bottom: 1px solid var(--white); }

/* 客户区 */
.win-client {
  flex: 1;
  background: var(--white);
  border: 1px solid;
  border-color: var(--face-shadow) var(--white) var(--white) var(--face-shadow);
  position: relative;
  overflow: hidden;
  margin-top: 1px;
}

/* 滚动条（Win3.1 风格） */
.scroll::-webkit-scrollbar { width: 16px; height: 16px; }
.scroll::-webkit-scrollbar-track {
  background: repeating-conic-gradient(var(--face) 0% 25%, var(--white) 0% 50%) 50% / 2px 2px;
}
.scroll::-webkit-scrollbar-thumb {
  background: var(--face);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--face-shadow);
  border: 1px solid var(--black);
}
.scroll::-webkit-scrollbar-button {
  background: var(--face);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--face-shadow);
  border: 1px solid var(--black);
  display: block; height: 16px; width: 16px;
}

/* ---------- 图标 ---------- */
.icon-item {
  width: 76px;
  padding: 6px 2px 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.icon-item .icon-img { width: var(--icon-size, 32px); height: var(--icon-size, 32px); image-rendering: pixelated; }
.icon-item .icon-img svg { display: block; }
.icon-item .icon-label {
  font-size: 12px;
  color: #000;
  padding: 1px 2px;
  max-width: 76px;
  line-height: 1.2;
}
.icon-item.selected .icon-label { background: var(--sel-bg); color: var(--sel-fg); }
.icon-item.selected .icon-img { filter: none; }

/* 最小化后的组图标区 */
/* p63：托盘高度跟着「托盘图标大小」走 —— 原来写死 62px 且 overflow:hidden，
   图标调到 48px 时会被整个裁掉（设置项看着「没反应」的一半原因）。
   地板 62px 保持出厂外观不变；图标超过 ~36px 才把托架撑高。 */
.icon-tray {
  position: absolute;
  left: 0; right: 16px; bottom: 0;
  height: max(62px, calc(var(--tray-size, 32px) + 30px));
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 4px 6px;
  gap: 8px;
  flex-wrap: wrap;
  overflow: hidden;
  z-index: 3;
}
.tray-icon {
  width: 72px; height: auto; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 3px; padding: 2px;
}
.tray-icon .icon-img { width: var(--tray-size, 32px); height: var(--tray-size, 32px); image-rendering: pixelated; }
.tray-icon .icon-img svg { display: block; }
.tray-icon .icon-label { font-size: 12px; padding: 1px 3px; }
.tray-icon.selected .icon-label { background: var(--sel-bg); color: var(--sel-fg); }

/* ---------- 按钮 / 输入框 ---------- */
.btn31 {
  font-family: inherit; font-size: 12px;
  background: var(--face);
  border: 1px solid var(--black);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--face-shadow);
  padding: 4px 12px;
  min-width: 64px;
}
.btn31:active {
  box-shadow: inset 1px 1px 0 var(--face-shadow), inset -1px -1px 0 var(--white);
  padding: 5px 11px 3px 13px;
}
.btn31:disabled { color: var(--face-shadow); text-shadow: 1px 1px 0 var(--white); }
.btn31.default { box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--face-shadow), 0 0 0 1px #000; }

.input31 {
  font-family: inherit; font-size: 12px;
  background: var(--white);
  border: 1px solid var(--black);
  box-shadow: inset 1px 1px 0 var(--face-shadow), inset -1px -1px 0 var(--white);
  padding: 3px 4px;
  outline: none;
  width: 100%;
}

/* ---------- 博客应用 ---------- */
.blog-list { height: 100%; overflow-y: auto; }
.blog-toolbar {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 4px;
  background: var(--face);
  border-bottom: 1px solid var(--face-shadow);
  flex-wrap: wrap;
}
.blog-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px dotted var(--face-shadow);
}
.blog-item .doc-icon { flex: none; width: 16px; height: 16px; }
/* p121①：**超长标题必须换行**（用户口径）。原来 nowrap + ellipsis ⇒ 长标题被截断成一行。
   去掉 nowrap/ellipsis/hidden，并给 min-width:0 —— flex 子项默认 min-width:auto 会让它
   撑破容器而不是换行。 */
.blog-item .bi-title { flex: 1; min-width: 0; font-size: 12px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.blog-item.selected { background: var(--sel-bg); color: var(--sel-fg); }
.blog-item .bi-date { font-size: 12px; color: var(--face-shadow); }
.blog-item.selected .bi-date { color: #dfdfdf; }
.blog-empty { padding: 24px; text-align: center; color: var(--face-shadow); }

.article-view {
  height: 100%; overflow-y: auto;
  padding: 12px 16px;
  user-select: text;
  background: var(--white);
}
.article-view h1, .article-view h2, .article-view h3 { font-size: 12px; margin: 12px 0 6px 0; font-weight: normal; }
.article-view h1 { border-bottom: 1px solid #000; padding-bottom: 4px; }
.article-view h2::before { content: '\25A0 '; }
.article-view h3::before { content: '\2022 '; }
.article-view p { margin: 6px 0; line-height: 1.8; }
.article-view ul, .article-view ol { margin: 6px 0 6px 24px; line-height: 1.8; }
.article-view ul { list-style: disc; }
.article-view ol { list-style: decimal; }
.article-view blockquote {
  margin: 8px 0; padding: 6px 10px;
  border-left: 4px solid var(--face-shadow);
  background: var(--face);
}
.article-view code {
  font-family: 'SimSun31', 'F31Latin', 'F31Hans', monospace;
  background: var(--face); padding: 1px 4px;
}
.article-view pre {
  background: #000; color: #0f0; padding: 8px; margin: 8px 0;
  overflow-x: auto; line-height: 1.5;
}
.article-view pre code { background: transparent; padding: 0; }
.article-view img { max-width: 100%; image-rendering: pixelated; border: 1px solid #000; margin: 4px 0; }
.article-view a { color: #0000a8; text-decoration: underline; }
.article-view hr { border: none; border-top: 1px solid var(--face-shadow); margin: 10px 0; }
.article-view table { border-collapse: collapse; margin: 8px 0; }
.article-view th, .article-view td { border: 1px solid #000; padding: 3px 8px; font-size: 12px; }
.article-view th { background: var(--face); }

.article-meta { color: var(--face-shadow); font-size: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--face-shadow); padding-bottom: 6px; }

/* 编辑器 */
.editor-body { display: flex; flex-direction: column; height: 100%; gap: 4px; padding: 4px; background: var(--face); }
.editor-body .input31 { flex: none; }
.editor-body textarea {
  flex: 1; resize: none;
  font-family: 'SimSun31', 'F31Latin', 'F31Hans', monospace;
  font-size: 12px; line-height: 1.6;
  background: var(--white);
  border: 1px solid var(--black);
  box-shadow: inset 1px 1px 0 var(--face-shadow), inset -1px -1px 0 var(--white);
  padding: 6px; outline: none; user-select: text;
}
.editor-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* 登录 */
.login-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--white); height: 100%; }
.login-row { display: flex; align-items: center; gap: 8px; }
.login-row label { width: 56px; flex: none; text-align: right; }
.login-msg { min-height: 14px; color: #a80000; }
.login-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

/* 对话框/状态栏 */
.status-bar {
  flex: none; height: 18px;
  background: var(--face);
  border-top: 1px solid var(--white);
  display: flex; align-items: center;
  padding: 0 6px; gap: 12px;
  font-size: 12px; color: #000;
}
.status-bar .sb-cell { border: 1px solid; border-color: var(--face-shadow) var(--white) var(--white) var(--face-shadow); padding: 2px 6px; }

/* ---------- 扫雷 ---------- */
.mines-body { background: var(--face); padding: 6px; height: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mines-panel {
  border: 2px solid; border-color: var(--face-shadow) var(--white) var(--white) var(--face-shadow);
  padding: 4px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: calc(9 * 20px + 16px);
}
.mines-led {
  background: #000; color: #f00;
  font-family: 'F31Latin', monospace;
  font-size: 16px; letter-spacing: 2px;
  padding: 1px 3px;
  border: 1px solid; border-color: var(--face-shadow) var(--white) var(--white) var(--face-shadow);
}
.mines-face {
  width: 26px; height: 26px;
  background: var(--face);
  border: 2px solid; border-color: var(--white) var(--face-shadow) var(--face-shadow) var(--white);
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.mines-face:active { border-color: var(--face-shadow) var(--white) var(--white) var(--face-shadow); }
.mines-grid {
  display: grid;
  grid-template-columns: repeat(9, 20px);
  border: 3px solid; border-color: var(--face-shadow) var(--white) var(--white) var(--face-shadow);
}
.mcell {
  width: 20px; height: 20px;
  background: var(--face);
  border: 2px solid; border-color: var(--white) var(--face-shadow) var(--face-shadow) var(--white);
  font-size: 12px; font-weight: normal;
  display: flex; align-items: center; justify-content: center;
}
.mcell.open { border: 1px solid var(--face-shadow); border-width: 0 0 1px 1px; background: var(--face); }
.mcell.boom { background: #f00; }
.mcell .mflag, .mcell .mmine { width: 12px; height: 12px; }
.m1 { color: #0000ff; } .m2 { color: #008000; } .m3 { color: #ff0000; } .m4 { color: #000080; }
.m5 { color: #800000; } .m6 { color: #008080; } .m7 { color: #000000; } .m8 { color: #808080; }

/* ---------- 记事本 ---------- */
.notepad {
  width: 100%; height: 100%;
  border: none; outline: none; resize: none;
  font-family: 'SimSun31', 'F31Latin', 'F31Hans', monospace;
  font-size: 12px; line-height: 1.6;
  padding: 4px; background: var(--white); user-select: text;
}

/* ---------- 输入法状态条（桌面底部装饰） ----------
   ⚠️ p73：这两条**必须挂在 `#desktop` 内部**（见 index.html 顶部注释），
   所以定位基准是 `#desktop` 而不是视口 ⇒ 用 `position: absolute`（原来写的 `fixed`）。
   为什么改 `absolute`：直接对着桌面盒子定位，不依赖「`#desktop` 恰好等于视口」这个前提。
   顺带一个**已知且有意**的行为变化：`#desktop` 的盒是
   `width/height: calc(100% / var(--res-scale))` + `transform: scale(var(--res-scale))`
   （css/v6.css:64-66）⇒ 视觉上永远占满视口，但**内容会被 res-scale 缩放**。
   于是「分辨率」不是 100% 时，这两条现在会像窗口一样跟着缩放
   （原来 `fixed` 在视口上、不跟着缩）；`bottom:0/right:0` 依然落在**可见**的屏幕角上。
   ⚠️ z-index 9000：`#desktop` 里的窗口 z-index 从 101 起每次 +1（js/wm.js:7/431），
   9000 远高于任何现实会话的窗口数 ⇒ 状态条始终压在最上层（原来它们是与 `#desktop` 平级
   的 body 子元素，天然盖住一切；移进来后靠这个 z-index 保持同样的层级关系）。
   p73 实测：`z-index` 9000 vs 6 个窗口的最大值 110。 */
#ime-left {
  position: absolute; left: 0; bottom: 0; z-index: 9000;
  background: var(--face);
  border-top: 1px solid var(--white); border-right: 1px solid var(--white);
  display: flex; align-items: stretch;
  font-size: 12px; pointer-events: none;
}
#ime-left .ime-cell { padding: 3px 8px; border-right: 1px solid var(--face-shadow); }
#ime-right {
  position: absolute; right: 0; bottom: 0; z-index: 9000;
  background: var(--face);
  border-top: 1px solid var(--white); border-left: 1px solid var(--face-shadow);
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-size: 12px; pointer-events: none;
}

/* 系统菜单（控制菜单框弹出的）
   ⚠️ p76：`fixed` → `absolute`。菜单现在挂在 `#desktop` **里面**（原来挂 body），
   目的是让它落在 `url(#f-crtcurve)` 的滤镜子树里、跟着窗口一起受 CRT 弧面畸变。
   用 `fixed` 其实也能对（`#desktop` 有 transform ⇒ 本来就是 fixed 后代的包含块），
   但那把「永远保留 transform」当成了前提；`absolute` 直接对着桌面盒子定位，任何时候都对。
   z-index 9999：`#desktop` 里窗口的 z-index 从 101 起递增（js/wm.js）⇒ 菜单恒压在最上层，
   与它当 body 子元素时「盖住一切」的层级关系一致。 */
.sysmenu {
  position: absolute;
  background: var(--face);
  border: 1px solid var(--black);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--face-shadow);
  padding: 2px; z-index: 9999; min-width: 110px;
}

/* 加载中 */
.win-loading {
  position: absolute; inset: 0;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: var(--face-shadow);
  z-index: 5;
}

/* ============================================================
 * 扩展组件：博客分栏 / BBS / 新闻 / 时钟 / 控制面板 / 字符控制
 * ============================================================ */

/* ---------- 博客左右分栏 ---------- */
.blog-split { display: flex; gap: 4px; padding: 4px; }
.blog-left { width: 218px; min-width: 218px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid #808080; padding-right: 4px; }
.blog-search { display: flex; gap: 3px; }
.blog-search .input31 { flex: 1; min-width: 0; }
.blog-opts { display: flex; gap: 3px; }
.blog-opts .input31 { flex: 1; min-width: 0; }
.blog-folders { max-height: 92px; overflow-y: auto; border: 1px solid #808080; background: #fff; }
.blog-folder { padding: 2px 5px; font-size: 12px; cursor: default; }
.blog-folder:hover { background: #0000a8; color: #fff; }
.blog-folder.active { background: #000080; color: #fff; }
.bf-n { color: inherit; opacity: .75; }
.blog-list { flex: 1; border: 1px solid #808080; background: #fff; overflow-y: auto; }
.blog-right { flex: 1; min-width: 0; border: 1px solid #808080; background: #fff; padding: 0; overflow-y: auto; }
.blog-item { padding: 3px 6px; border-bottom: 1px solid #dfdfdf; }
.blog-item:hover { background: #e8e8ff; }
.blog-item.selected { background: #000080; color: #fff; }
.blog-item .bi-meta { font-size: 11px; color: #404040; }
.blog-item.selected .bi-meta { color: #cfcfff; }

/* ---------- BBS 风格阅读区 ---------- */
.article-view.bbs { background: #fffff4; padding: 10px 14px; }
.bbs-header { display: flex; justify-content: space-between; background: #000080; color: #ffffa0; padding: 2px 6px; font-size: 12px; margin-bottom: 8px; }
.bbs-title { font-size: 15px; font-weight: bold; color: #a80000; }
.article-view.bbs .article-meta { color: #008040; margin: 2px 0 6px; }
.bbs-hr { border: none; border-top: 1px dashed #808080; margin: 8px 0; }
.bbs-content { line-height: 1.65; }
.bbs-act { display: flex; gap: 4px; margin: 6px 0; flex-wrap: wrap; }
.bbs-chead { background: #dfdfdf; border: 1px solid #808080; padding: 2px 6px; margin: 8px 0 4px; color: #000080; font-weight: bold; }
.bbs-comment { position: relative; border: 1px solid #c0c0c0; background: #fff; margin: 4px 0; padding: 4px 6px 4px 8px; }
.bbs-floor { background: #000080; color: #fff; padding: 0 4px; margin-right: 6px; font-size: 11px; }
.bbs-cuser { color: #0000c0; cursor: default; }
.bbs-ctime { color: #808080; font-size: 11px; margin-left: 6px; }
.bbs-cbody { margin-top: 3px; }
.bbs-cbody blockquote { color: #008000; margin: 2px 0 2px 8px; border-left: 3px solid #008000; padding-left: 6px; }
.bbs-cdel { position: absolute; right: 4px; top: 3px; padding: 0 4px; }
.bbs-cinput { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.bbs-cinput textarea { width: 100%; resize: vertical; box-sizing: border-box; }

/* ---------- 新闻（复古推特） ---------- */
.nw-root { background: #c0c0c0; }
.nw-tabs { display: flex; gap: 2px; padding: 3px 4px 0; flex-wrap: wrap; background: #c0c0c0; }
.nw-tab.active { background: #dfdfdf; border-bottom-color: transparent; font-weight: bold; }
.nw-page { height: 100%; overflow-y: auto; padding: 6px; box-sizing: border-box; background: #dfdfdf; }
.nw-composer { border: 2px inset #fff; background: #fff; padding: 4px; margin-bottom: 8px; }
.nw-edit { min-height: 44px; max-height: 160px; overflow-y: auto; outline: none; border: 1px solid #808080; padding: 3px; background: #fff; margin-bottom: 3px; font-size: 12px; }
.nw-edit:empty::before { content: attr(data-ph); color: #a0a0a0; }
.nw-composer-bar, .nw-cbar { display: flex; gap: 3px; align-items: center; }
.nw-composer-bar input[type="color"] { width: 26px; height: 20px; padding: 0; border: 1px solid #808080; background: #fff; }
.nw-post { border: 2px outset #fff; background: #fff; padding: 6px; margin-bottom: 6px; }
.nw-post-head { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.nw-avatar { border: 1px solid #000; object-fit: cover; image-rendering: pixelated; vertical-align: middle; }
.nw-user b { color: #000080; }
.nw-time { color: #808080; font-size: 11px; }
.nw-title { color: #a80000; font-size: 11px; margin: 0 2px; }
.nw-post-body { line-height: 1.55; word-break: break-word; }
/* p134 ④：新闻里发的图片按**缩略图**呈现。只加高度上限即可 —— width/height 都是 auto，
   浏览器会按原始比例把宽度一起收窄（1200×900 ⇒ 320×240），不再铺满整列；
   同时 max-width:100% 保留 ⇒ 窗口变窄时也不会撑破容器。 */
.nw-media { max-width: 100%; max-height: 240px; border: 1px solid #000; margin-top: 4px; display: block; image-rendering: pixelated; }
.nw-act { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.nw-act .btn31.active { box-shadow: inset 1px 1px 0 #404040; background: #d0d0d0; }
.nw-tag { color: #0000c0; cursor: default; text-decoration: underline; }
.nw-head { font-weight: bold; color: #000080; margin: 8px 0 4px; }
.nw-tip { border: 1px dashed #808080; background: #ffffe0; padding: 4px 6px; margin-bottom: 6px; }
.nw-rank { display: flex; gap: 6px; align-items: center; padding: 3px 4px; border-bottom: 1px dotted #a0a0a0; }
.nw-rank.clickable:hover { background: #e8e8ff; }
.nw-comments { border-top: 1px dashed #a0a0a0; margin-top: 5px; }
.nw-comment { position: relative; padding: 3px 4px; border-bottom: 1px dotted #c0c0c0; background: #f8f8f8; margin-top: 3px; }
.nw-floor { background: #008040; color: #fff; padding: 0 3px; font-size: 11px; margin-right: 4px; }
.nw-cuser { color: #0000c0; cursor: default; }
.nw-cbody { margin-top: 2px; }
.nw-cinput { margin-top: 4px; }
.nw-cinput .nw-edit { min-height: 26px; max-height: 80px; }
.nw-cdel { position: absolute; right: 4px; top: 3px; padding: 0 4px; }
.nw-on { font-size: 11px; color: #808080; margin-top: 2px; }
.nw-profile { background: #fff; border: 2px inset #fff; }
.nw-bg { height: 72px; background: linear-gradient(45deg, #000080, #008080); background-size: cover; background-position: center; border-bottom: 2px solid #000; }
.nw-pinfo { display: flex; gap: 8px; align-items: flex-end; padding: 6px; margin-top: -18px; }
.nw-pname b { font-size: 14px; }
.nw-bio { padding: 0 8px 6px; color: #404040; }
.nw-pops { display: flex; gap: 4px; padding: 0 8px 6px; flex-wrap: wrap; }
.nw-pops .btn31 { min-width: 64px; }
.nw-pops .btn31.active { box-shadow: inset 1px 1px 0 #404040; }
.nw-chat { display: flex; height: 100%; background: #dfdfdf; }
.nw-chat-side { width: 150px; min-width: 150px; border-right: 1px solid #808080; overflow-y: auto; padding: 4px; background: #c0c0c0; }
.nw-conv { padding: 3px 4px; border-bottom: 1px solid #dfdfdf; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nw-conv.active, .nw-conv:hover { background: #000080; color: #fff; }
.nw-conv .btn31 { margin-left: auto; padding: 0 4px; }
.nw-chat-main { flex: 1; display: flex; flex-direction: column; background: #fff; }
.nw-chat-log { flex: 1; overflow-y: auto; padding: 6px; }
.nw-msg { display: flex; gap: 5px; margin-bottom: 6px; align-items: flex-start; }
.nw-msg.mine { flex-direction: row-reverse; }
.nw-bubble { background: #e8e8ff; border: 1px solid #808080; padding: 3px 6px; max-width: 75%; }
.nw-msg.mine .nw-bubble { background: #d8ffd8; }
.nw-chat-bar { display: flex; gap: 3px; padding: 4px; border-top: 1px solid #808080; background: #c0c0c0; }
.nw-chat-bar .input31 { flex: 1; min-width: 0; }
.emoji-pop { position: fixed; z-index: 100000; background: #ffffe1; border: 2px outset #fff; box-shadow: 2px 2px 4px rgba(0,0,0,.4); padding: 5px; width: 230px; max-height: 220px; overflow-y: auto; }
.emoji-cat { font-weight: bold; color: #000080; margin: 3px 0 1px; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 1px; }
.emoji-btn { background: none; border: 1px solid transparent; font-size: 15px; padding: 1px 2px; cursor: pointer; }
.emoji-btn:hover { border-color: #000080; background: #fff; }

/* ---------- 时钟 / 日程 ---------- */
.ck-root { display: flex; flex-direction: column; height: 100%; background: #c0c0c0; padding: 4px; box-sizing: border-box; gap: 4px; }
.ck-clockbar { background: #000; color: #00ff40; font-family: monospace; padding: 3px 8px; border: 2px inset #808080; }
.ck-tabs { display: flex; gap: 3px; }
.ck-tab.active { font-weight: bold; background: #dfdfdf; }
.ck-body { flex: 1; display: flex; gap: 6px; min-height: 0; }
.ck-left { width: 230px; min-width: 230px; background: #fff; border: 2px inset #fff; padding: 5px; }
.ck-mhead { display: flex; justify-content: space-between; align-items: center; color: #0080a0; margin-bottom: 4px; }
.ck-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.ck-wd { text-align: center; color: #0080a0; font-size: 11px; background: #dff2f8; }
.ck-cell { text-align: center; padding: 3px 0; font-size: 12px; position: relative; }
.ck-cell.empty { visibility: hidden; }
.ck-cell.clickable:hover { background: #dff2f8; }
.ck-cell.sel { background: #c8e8f4; outline: 1px solid #0080a0; }
.ck-cell.today { font-weight: bold; background: #ffffa0; }
.ck-cell.has::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; background: #4aa3d8; }
.ck-cell.free::after { background: #6cbf6c; }
.ck-hint { color: #808080; font-size: 11px; margin-top: 6px; }
.ck-right { flex: 1; min-width: 0; background: #fff; border: 2px inset #fff; padding: 6px; overflow-y: auto; }
.ck-dhead { color: #0080a0; margin-bottom: 6px; font-size: 13px; }
.ck-empty { color: #808080; padding: 8px; text-align: center; }
.ck-item { border: 1px solid #d0d0d0; border-left-width: 6px; background: #fbfbfb; padding: 4px 6px; margin-bottom: 5px; }
.ck-cat { color: #fff; font-size: 11px; padding: 0 4px; margin: 0 2px; }
.ck-free { color: #008000; font-size: 12px; }
.ck-busy { color: #a80000; font-size: 12px; }
.ck-ops { display: flex; gap: 3px; margin-top: 3px; }
.ck-booking { flex: 1; background: #fff; border: 2px inset #fff; padding: 8px; overflow-y: auto; }
.ck-form { padding: 8px; }
.ck-form .login-row label { width: 52px; }
.ck-form .input31 { flex: 1; min-width: 0; }

/* ---------- 时钟 / 日程：右侧「时间知觉」栏（p81） ----------
 * 12×12 = 144 格 = 一天（每格 10 分钟）。
 * 凹陷/凸起一律用 Win3.1 的 1px 双色斜角（inset box-shadow 实现，不占盒尺寸）：
 *   凸起 = 上/左 --white，下/右 --face-shadow（同 .btn31）；
 *   凹陷 = 上/左 --face-shadow，下/右 --white（同 .input31）。
 * ⚠️ .ck-split / .ck-side-strip 用负外边距吃掉 .ck-body 的 6px gap：
 *    6px 分隔条两侧各让出 3px ⇒ 实际是「3px | 6px 棱 | 3px」；窄条贴住面板右缘。
 */
.ck-split {
  flex: none; width: 6px; align-self: stretch; margin: 0 -3px;
  cursor: var(--cur-ew, ew-resize);
  background: var(--face);
  border-left: 1px solid var(--white);
  border-right: 1px solid var(--face-shadow);
}
/* 拖动中整页换横向双箭头光标（指针一出 6px 分界线就变回箭头的话看着像掉线） */
body.ck-col-drag, body.ck-col-drag * { cursor: var(--cur-ew, ew-resize) !important; }
body.ck-col-drag { user-select: none; }

.ck-side-strip {
  flex: none; width: 15px; align-self: stretch; margin-left: -6px;
  background: var(--face);
  border-left: 1px solid var(--face-shadow);
  padding: 2px 0 0 0;
  display: flex; flex-direction: column; align-items: center;
}
/* ⚠️ 全局的 button{min-height:19px} 与 button{box-shadow:…!important} 会顶高/盖掉自绘小键
   ⇒ 自绘按钮必须自带 min/max 归零，box-shadow 也要 !important（本站既有规矩） */
.ck-side-stripbtn {
  width: 11px; height: 12px;
  min-width: 0; min-height: 0; max-height: none;
  padding: 0; margin: 0;
  font-size: 11px; line-height: 10px; text-align: center;
  color: var(--black); background: var(--face);
  border: 1px solid var(--black);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--face-shadow) !important;
}
.ck-side-stripbtn:active {
  box-shadow: inset 1px 1px 0 var(--face-shadow), inset -1px -1px 0 var(--white) !important;
  padding: 1px 0 0 1px;
}

/* 面板：与 .ck-left / .ck-right 同一个 2px 凹陷白框（Win3.1 字段样式） */
.ck-side {
  flex: none; align-self: stretch; min-width: 0;
  background: var(--win-bg, #fff);
  border: 2px inset #fff;
  padding: 5px;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
.ck-side-head { display: flex; align-items: baseline; gap: 5px; }
.ck-side-head b { color: #000080; }
.ck-side-now { margin-left: auto; color: var(--face-shadow); font-size: 11px; }

/* 网格井：1px 凹陷（上/左灰、下/右白）⇒ 144 个格子落在白底上 */
.ck-well {
  flex: 1; min-height: 0;
  background: var(--win-bg, #fff);
  border: 1px solid;
  border-color: var(--face-shadow) var(--white) var(--white) var(--face-shadow);
  padding: 3px;
  display: flex; align-items: center; justify-content: center;
}
/* 恒为正方形：width:100% + aspect-ratio:1，max-width 由 js/clock.js 的 sizeGrid() 写，
   宽度被夹住时高度自动跟着收缩（不设 height ⇒ 窗口变矮也不会溢出）。 */
.ck-grid144 {
  flex: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: 1px;
  user-select: none;
}
/* 未到来：浅灰 + 凸起 */
.ck-q {
  min-width: 0; min-height: 0;
  background: #DFDFDF;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #85898C;
}
/* 已过去：暗绿 + 凹陷 */
.ck-q.past {
  background: #008000;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #FFFFFF;
}
/* 正在走的那一格：Win3.1 惯用的 1px 点线聚焦框（悬停反馈同形） */
.ck-q.now, .ck-q:hover { outline: 1px dotted #000; outline-offset: -1px; }

.ck-legend { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--text-main, #000); }
.ck-legend > span { display: inline-flex; align-items: center; gap: 3px; }
.ck-legend i { display: block; width: 10px; height: 10px; }
.ck-legend i.past { background: #008000; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #FFFFFF; }
.ck-legend i.future { background: #DFDFDF; box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #85898C; }

/* 底部状态栏：两个 1px 凹陷面板 */
.ck-status { display: flex; gap: 2px; font-size: 11px; }
.ck-status > span {
  flex: 1; min-width: 0; padding: 1px 4px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-shadow) var(--white) var(--white) var(--face-shadow);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-status b { font-weight: normal; color: #000080; }

/* 收起：面板与分界线一起藏掉；窄条常驻 ⇒ 不会「收起来就找不回来」 */
.ck-root.ck-side-off .ck-side, .ck-root.ck-side-off .ck-split { display: none; }

/* 暗色主题：跟着 .ck-left / .ck-right 一起下沉（斜角两色保持白/灰，暗底上照样读得出来） */
body.dark .ck-side, body.dark .ck-well { background: #2e2e2e; color: #e0e0e0; }
body.dark .ck-well { border-color: #6a6a6a #5a5a5a #5a5a5a #6a6a6a; }
body.dark .ck-side-head b, body.dark .ck-status b { color: #9db8e0; }
body.dark .ck-side-now { color: #a0a0a0; }
body.dark .ck-legend { color: #e0e0e0; }
body.dark .ck-status > span { background: #3a3a3a; border-color: #6a6a6a #5a5a5a #5a5a5a #6a6a6a; }
body.dark .ck-q { background: #4A4A4A; }
body.dark .ck-q.past { background: #005000; }
body.dark .ck-legend i.future { background: #4A4A4A; }
body.dark .ck-legend i.past { background: #005000; }

/* ---------- 控制面板 ---------- */
.cp-root { display: flex; height: 100%; background: #c0c0c0; }
.cp-side { width: 130px; min-width: 130px; border-right: 1px solid #808080; padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.cp-cat { text-align: left; padding: 5px 6px; border: 1px solid transparent; background: none; }
.cp-cat:hover { border-color: #808080; border-color: #000 #fff #fff #000; }
.cp-cat.active { background: #dfdfdf; border: 2px inset #fff; font-weight: bold; }
.cp-ic { color: #000080; }
.cp-main { flex: 1; padding: 10px; overflow-y: auto; background: #dfdfdf; }
.cp-head { font-weight: bold; color: #000080; border-bottom: 1px solid #808080; padding-bottom: 3px; margin-bottom: 8px; }
.cp-radio { display: block; margin: 4px 0; }
.cp-line { margin: 10px 0; }
.cp-note { color: #606060; font-size: 11px; margin: 6px 0; }
.cp-avatar { width: 32px; height: 32px; border: 1px solid #000; object-fit: cover; image-rendering: pixelated; margin-left: 6px; }
.cp-level { border: 1px solid #808080; background: #fff; padding: 6px; margin-bottom: 5px; }
.cp-bar { height: 14px; border: 1px solid #808080; background: #fff; margin-bottom: 4px; }
.cp-bar-in { height: 100%; background: repeating-linear-gradient(90deg, #000080 0 8px, #1084d0 8px 12px); }

/* ---------- 字符控制 ---------- */
.cm-row { display: flex; gap: 5px; align-items: center; margin: 6px 8px; }
.cm-preview { margin: 6px 8px; border: 2px inset #fff; background: #fff; padding: 6px; }
.cm-big { font-size: 16px; margin-bottom: 6px; border-bottom: 1px solid #dfdfdf; padding-bottom: 4px; }
.cm-grid { display: flex; flex-wrap: wrap; gap: 2px; max-height: 120px; overflow-y: auto; }
.cm-cell { width: 26px; height: 26px; border: 1px solid #c0c0c0; text-align: center; line-height: 26px; cursor: default; }
.cm-cell:hover { background: #dff2f8; }
.cm-cell.sel { background: #000080; color: #fff; }

/* ---------- 鼠标拖尾 / 大指针 ---------- */
#mouse-trail { position: fixed; inset: 0; pointer-events: none; z-index: 99999; }
body.dark #mouse-trail div { background: #fff !important; }
body.big-pointer, body.big-pointer * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M4 2 L4 30 L11 24 L16 34 L21 32 L16 22 L25 22 Z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important; }

/* ---------- 编辑器顶部行 ---------- */
.editor-top { display: flex; gap: 4px; }
.editor-body { display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 6px; box-sizing: border-box; }
.editor-body textarea { flex: 1; min-height: 0; resize: none; border: 2px inset #fff; font-family: inherit; padding: 4px; box-sizing: border-box; }

/* ============================================================
 * 深色模式
 * ============================================================ */
body.dark { background: #202020; color: #e0e0e0; }
body.dark .titlebar { background: linear-gradient(90deg, #404060, #202040); color: #e0e0e0; }
body.dark .win { background: #3a3a3a; border-color: #1a1a1a; }
body.dark .win-client, body.dark .blog-toolbar, body.dark .nw-tabs, body.dark .ck-root, body.dark .cp-root, body.dark .cp-side, body.dark .cp-main, body.dark .nw-page, body.dark .nw-chat-side, body.dark .nw-chat-bar { background: #3a3a3a; color: #e0e0e0; }
body.dark .menu-bar { background: #3a3a3a; color: #e0e0e0; }
body.dark .menu-pop { background: #3a3a3a; color: #e0e0e0; border-color: #111; }
/* 悬停一律不标蓝（p47 用户要求）：只有「已打开」的菜单标题才高亮，深色主题同理 */
body.dark .menu-item:hover { background: transparent; color: inherit; }
body.dark .btn31, body.dark .input31, body.dark select.input31 { background: #4a4a4a; color: #e0e0e0; border-color: #111 #6a6a6a #6a6a6a #111; }
body.dark .blog-left, body.dark .blog-right, body.dark .blog-list, body.dark .blog-folders { background: #2e2e2e; border-color: #6a6a6a; }
body.dark .blog-item:hover { background: #3a3a55; }
body.dark .blog-item.selected { background: #000080; }
body.dark .article-view, body.dark .article-view.bbs, body.dark .bbs-comment { background: #2a2a24; color: #d8d8c8; }
body.dark .bbs-header { background: #4040a0; }
body.dark .bbs-title { color: #ff9060; }
body.dark .nw-post, body.dark .nw-chat-main, body.dark .nw-profile, body.dark .ck-left, body.dark .ck-right, body.dark .ck-item, body.dark .ck-booking, body.dark .cm-preview, body.dark .cm-cell { background: #2e2e2e; color: #e0e0e0; border-color: #6a6a6a; }
body.dark .nw-composer { background: #2e2e2e; border-color: #6a6a6a; }
body.dark .nw-edit { background: #242424; color: #e0e0e0; }
body.dark .nw-bubble { background: #3a3a55; color: #e0e0e0; }
body.dark .nw-msg.mine .nw-bubble { background: #2a4a2a; }
body.dark .nw-comment { background: #333; }
body.dark .notepad { background: #242424; color: #e0e0e0; }
body.dark #desktop { background: #1a1a1a; }
body.dark .ck-clockbar { border-color: #6a6a6a; }
body.dark .emoji-pop { background: #3a3a30; color: #e0e0e0; }

/* ============================================================
 * v3：工具栏图标 / 三视图 / 计票 / 管理面板 / 画图 / 搜索
 * ============================================================ */
.tb-icon { padding: 2px 4px; line-height: 0; }
.tb-icon svg { width: 20px; height: 20px; display: block; }
.tb-icon .vote-n { font-size: 12px; line-height: 20px; vertical-align: top; }
.tb-icon.disabled, .btn31.disabled { opacity: .45; pointer-events: none; }
.blog-vbar { border-top: 1px solid #fff; }
.blog-vbar .btn31 { min-width: 0; }

/* 平铺视图 */
.tile-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; align-content: flex-start; }
.tile-card { width: 148px; border: 2px outset #fff; background: #fff; padding: 4px; }
.tile-card:hover { border-style: inset; }
.tile-img { width: 100%; height: 86px; object-fit: cover; display: block; border: 1px solid #808080; image-rendering: pixelated; }
.tile-ph { width: 100%; height: 86px; display: flex; align-items: center; justify-content: center; background: #dfdfdf; color: #808080; border: 1px solid #808080; }
.tile-title { font-size: 12px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-meta { font-size: 11px; color: #808080; }

/* 公告 / 置顶 / 匿名 */
.ann-bar { border: 1px solid #000080; background: #ffffe0; color: #000080; padding: 4px 8px; margin-bottom: 8px; }
.ann-bar .ann-time { color: #808080; margin-left: 6px; font-size: 11px; }
.nw-pinbar { background: #000080; color: #fff; font-size: 11px; padding: 0 4px; display: inline-block; margin-bottom: 3px; }
.nw-anon { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }

/* 聊天筛选 / 日期分隔 / 戳一戳 */
.nw-chat-filter { display: flex; gap: 3px; padding: 4px; background: #c0c0c0; border-bottom: 1px solid #808080; }
.nw-chat-filter .input31 { flex: 1; min-width: 0; }
.nw-daysep { text-align: center; color: #808080; font-size: 11px; margin: 6px 0 3px; }
.nw-bubble.poke { color: #a80000; background: #ffffd0; }

/* 管理面板 */
.cp-level .btn31 { margin-left: 4px; }

/* ---------- 画图 ---------- */
/* p136②：工具栏置左 —— 按 image#1：工具格在左侧竖排（2 列×9 行），
   下接一条宽格「线宽选择」；画布与调色板在右侧 .pt-main。
   尺寸实测：图标 23×23px、1 用户单位 = 1 CSS px（参考图 2.6x 放大）。 */
.pt-root { display: flex; flex-direction: row; height: 100%; background: #c0c0c0; }
.pt-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pt-main .pt-canvas-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pt-tools { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; padding: 3px; border-right: 1px solid #808080; background: #c0c0c0; }
.pt-toolgrid { display: grid; grid-template-columns: repeat(2, 23px); gap: 1px; }
.pt-tool { width: 23px; height: 23px; padding: 0; border: 1px solid #808080; background: #c0c0c0; line-height: 0; }
.pt-tool.active { border: 1px solid #000; background: #dfdfdf; box-shadow: inset 1px 1px 0 #808080; }
.pt-tool svg { width: 23px; height: 23px; display: block; }
/* 线宽选择：宽格（青箭头 + 8 条粗细递增黑条），横跨两列 */
.pt-widths { display: block; margin-top: 2px; }
.pt-widths button { width: 47px; height: 23px; border: 1px solid #808080; background: #c0c0c0; padding: 0; line-height: 0; }
.pt-widths button svg { width: 46px; height: 23px; display: block; }
.pt-widths button.active { border: 1px solid #000; background: #dfdfdf; box-shadow: inset 1px 1px 0 #808080; }
.pt-canvas-host { flex: 1; overflow: auto; background: #808080; padding: 6px; }
.pt-canvas { background: #fff; box-shadow: 1px 1px 0 #000; image-rendering: pixelated; cursor: var(--cur-cross, crosshair); }
.pt-scrollbar { display: flex; align-items: center; height: 18px; background: #c0c0c0; border-top: 1px solid #fff; }
.pt-sb-btn { width: 18px; height: 18px; text-align: center; font-size: 10px; line-height: 16px; border: 1px solid #808080; background: #dfdfdf; }
.pt-sb-track { flex: 1; height: 100%; margin: 0 2px; position: relative; background: #dfdfdf; border: 1px solid #808080; }
.pt-sb-thumb { position: absolute; top: 0; bottom: 0; width: 80%; background: #dfdfdf; border: 1px solid #808080; border-top: none; border-bottom: none; }
.pt-palbox { display: flex; gap: 6px; padding: 4px; border-top: 1px solid #fff; background: #c0c0c0; align-items: center; }
.pt-cur { position: relative; width: 34px; height: 30px; }
.pt-cur-front, .pt-cur-back { position: absolute; width: 20px; height: 20px; border: 1px solid #000; }
.pt-cur-front { left: 2px; top: 2px; z-index: 2; }
.pt-cur-back { left: 12px; top: 10px; z-index: 1; }
.pt-pal { display: grid; grid-template-columns: repeat(14, 15px); gap: 1px; }
.pt-swatch { width: 15px; height: 15px; border: 1px solid #808080; padding: 0; }

/* ---------- 搜索 ---------- */
.sr-body { display: flex; flex-direction: column; height: 100%; padding: 6px; box-sizing: border-box; gap: 5px; }
.sr-opts .cp-radio { margin: 0; font-size: 11px; color: #404040; }
.sr-results { flex: 1; border: 2px inset #fff; background: #fff; overflow-y: auto; }
.sr-head { background: #000080; color: #fff; padding: 2px 6px; margin-top: 2px; font-weight: bold; }
.sr-item { display: flex; gap: 6px; padding: 4px 6px; border-bottom: 1px dotted #c0c0c0; }
.sr-item:hover { background: #e8e8ff; }
.sr-ic { width: 20px; height: 20px; flex: none; }
.sr-ic svg { width: 20px; height: 20px; }
.sr-title { font-weight: bold; color: #0000c0; }
.sr-sub { font-size: 11px; color: #808080; }
.sr-snippet { font-size: 12px; color: #404040; margin-top: 2px; }
.sr-snippet mark { background: #ffff80; color: #000; }

/* 帮助 */
.help-body { min-height: 120px; }

/* 深色补充 */
body.dark .tile-card, body.dark .sr-results { background: #2e2e2e; border-color: #6a6a6a; color: #e0e0e0; }
body.dark .tile-ph { background: #3a3a3a; }
body.dark .sr-title { color: #80a0ff; }
body.dark .ann-bar { background: #3a3a20; color: #d0d080; border-color: #6a6a2a; }
body.dark .pt-canvas-host, body.dark .pt-tools, body.dark .pt-palbox, body.dark .pt-scrollbar { background: #3a3a3a; color: #e0e0e0; }
body.dark .pt-tool, body.dark .pt-widths button, body.dark .pt-sb-btn, body.dark .pt-sb-track, body.dark .pt-sb-thumb { background: #4a4a4a; border-color: #111 #6a6a6a #6a6a6a #111; }

/* ============================================================
 * v4：DOS 字体 / 像素滚动条 / CRT 与色彩滤镜 / 标题栏微调
 * ============================================================ */

/* ---------- DOS 系统字体（Perfect DOS VGA 437，OFL） ---------- */
@font-face {
  font-family: 'DOSVGA';
  src: url('../assets/fonts/dosvg437.ttf') format('truetype');
  font-display: block;
}
@font-face {
  font-family: 'DOSVGAWin';
  src: url('../assets/fonts/dosvg437-win.ttf') format('truetype');
  font-display: block;
}

/* ---------- 标题栏按钮：像素级对照参考图 ---------- */
.titlebar { height: 19px; padding: 1px 2px; gap: 2px; }
.tb-btn { width: 15px; height: 15px; box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--face-shadow), 0 0 0 1px var(--black); }
.tb-btn { position: relative; }
.tb-btn:active { box-shadow: inset 1px 1px 0 var(--face-shadow), inset -1px -1px 0 var(--white), 0 0 0 1px var(--black); }
.titlebar > .tb-btn:first-child { width: 15px; }
.tb-btn svg { shape-rendering: crispEdges; }

/* ---------- 像素滚动条（Win3.1 风格：抖动轨道 + 立体滑块 + 箭头按钮） ---------- */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background-color: #c0c0c0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect width='1' height='1' fill='%23ffffff'/><rect x='1' y='1' width='1' height='1' fill='%23ffffff'/></svg>");
}
::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #000000, 0 0 0 1px #000000;
}
::-webkit-scrollbar-thumb:active { background: #b0b0b0; }
::-webkit-scrollbar-button:single-button {
  display: block;
  width: 16px; height: 16px;
  background-color: #c0c0c0;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, 0 0 0 1px #000000;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path d='M1 7 L4.5 2 L8 7 Z' fill='%23000000'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path d='M1 2 L8 2 L4.5 7 Z' fill='%23000000'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path d='M7 1 L7 8 L2 4.5 Z' fill='%23000000'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path d='M2 1 L7 4.5 L2 8 Z' fill='%23000000'/></svg>");
}
::-webkit-scrollbar-corner { background: #c0c0c0; }

/* ---------- CRT 滤镜 ---------- */
#crt-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 99996;
  border-radius: 14px;
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, .20) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  box-shadow: inset 0 0 110px rgba(0, 0, 0, .40);
  animation: crt-jitter 7s steps(1) infinite;
}
#crt-overlay::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px;
  background: radial-gradient(125% 125% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.30) 100%);
}
@keyframes crt-jitter {
  0%, 91% { transform: none; opacity: .95; }
  92% { transform: translateY(1px); opacity: 1; }
  93% { transform: translateX(-1px); }
  94% { transform: translateY(-1px); opacity: .92; }
  95%, 100% { transform: none; opacity: .95; }
}

/* ---------- 色彩滤镜：规则已移至 css/v6.css 的 p34 段落 ----------
   注意：绝不能把 filter 直接写在 body 上——那会让 body 成为包含块，
   #desktop / 各浮层（position:absolute / fixed）会被压缩到 0 高度，整屏消失。 ---------- */
body.f-c16::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99995;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect width='1' height='1' fill='%23000000' fill-opacity='0.16'/><rect x='1' y='1' width='1' height='1' fill='%23ffffff' fill-opacity='0.10'/></svg>");
}

/* ---------- DOS 终端光标 ---------- */
#dos-screen { text-rendering: geometricPrecision; }
.dos-cursor {
  display: inline-block; width: 8px; height: 15px;
  background: #aaaaaa; vertical-align: -2px;
  animation: dos-blink 1.05s steps(1) infinite;
}
@keyframes dos-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- 控制面板：设置项列表 / 附加效果 ---------- */
.cp-set-grid { display: flex; flex-direction: column; gap: 1px; }
.cp-set-item {
  display: flex; align-items: flex-start; gap: 5px;
  padding: 2px 4px; border-bottom: 1px dotted #c8c8c8; font-size: 12px;
}
.cp-set-item:hover { background: #e8e8ff; }
.cp-set-item input { margin-top: 2px; flex: none; }
body.heavy-shadow .win { box-shadow: 4px 4px 0 rgba(0,0,0,.55); }
body.crt-jitter-off #crt-overlay { animation: none; }

/* ---------- 计算器（Windows 3.0 标准型） ---------- */
.calc-root { display: flex; flex-direction: column; height: 100%; background: #c0c0c0; padding: 6px; box-sizing: border-box; }
.calc-display {
  background: #dfdfdf; color: #000; border: 2px inset #fff;
  padding: 4px 6px; text-align: right; font-size: 18px; line-height: 20px;
  height: 28px; overflow: hidden; white-space: nowrap; letter-spacing: 1px;
}
.calc-mem { position: absolute; left: 12px; font-size: 11px; color: #000080; height: 12px; }
.calc-pad { flex: 1; display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.calc-row { display: flex; gap: 3px; flex: 1; }
.calc-btn {
  flex: 1; min-width: 0; font-family: inherit; font-size: 12px;
  background: #c0c0c0; color: #000; border: none;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, 0 0 0 1px #000;
}
.calc-btn:active { box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, 0 0 0 1px #000; }
.calc-btn.num { font-weight: bold; }
.calc-btn.eq { color: #a80000; font-weight: bold; }
.calc-btn.mem { color: #000080; }

/* ---------- DOS 模式：全屏独占 ---------- */
body.dos-mode #desktop,
body.dos-mode #ime-left,
body.dos-mode #ime-right { display: none; }
body.dos-mode { background: #000; }
.calc-root { position: relative; }
.vote-box { display: inline-flex; align-items: center; gap: 3px; }