/* RPOS v3.1 — 1992 年出品。
   外观由 body 上的 theme-* 类与 data-palette 属性决定；所有颜色都经过语义
   token，加一套新皮肤只需要加一段变量，不必碰任何程序的代码。 */

:root, body.theme-win31 {
  --c-bg: #c0c0c0;
  --c-bg-soft: #dfdfdf;
  --c-bg-deep: #a0a0a0;
  --c-text: #000000;
  --c-text-muted: #404040;
  --c-text-on-accent: #ffffff;
  --c-accent: #000080;
  --c-accent-soft: #b0c4de;
  --c-link: #0000ee;
  --c-shadow: #808080;
  --c-highlight: #ffffff;
  --c-desktop: #008080;
  --c-desktop-pattern: none;
  --c-window-border: #c0c0c0;
  --c-titlebar: linear-gradient(90deg, #000080, #1084d0);
  --c-titlebar-off: #808080;
  --c-field-bg: #ffffff;
  --c-field-fg: #000000;
  --c-field-border: #808080;
  --c-divider: #808080;
  --c-danger: #aa0000;
  --c-screen-bg: #000000;
  --c-screen-fg: #55ff55;
  --f-ui: 'MS Sans Serif', 'Segoe UI', Tahoma, 'Microsoft YaHei', sans-serif;
  --f-mono: 'Zpix', Consolas, 'Courier New', 'Microsoft YaHei', monospace;
  --f-display: var(--f-ui);
  --bevel-raised: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
                  inset -2px -2px #808080, inset 2px 2px #ffffff;
  --bevel-sunken: inset -1px -1px #ffffff, inset 1px 1px #808080,
                  inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --window-shadow: none;
  --scanline: transparent;
  --glow: none;
  --radius: 0px;
}

/* ---------- 磁带未来主义：单色磷光终端 ---------- */
body.theme-cassette {
  --c-bg: #000000;
  --c-bg-soft: #071108;
  --c-bg-deep: #000000;
  --c-text: var(--phos);
  --c-text-muted: color-mix(in srgb, var(--phos) 55%, #000);
  --c-text-on-accent: #000000;
  --c-accent: var(--phos);
  --c-accent-soft: color-mix(in srgb, var(--phos) 22%, #000);
  --c-link: var(--phos2);
  --c-shadow: color-mix(in srgb, var(--phos) 35%, #000);
  --c-highlight: color-mix(in srgb, var(--phos) 80%, #fff);
  --c-desktop: #000000;
  --c-desktop-pattern: none;
  --c-window-border: var(--phos);
  --c-titlebar: linear-gradient(180deg, color-mix(in srgb, var(--phos) 88%, #000),
                color-mix(in srgb, var(--phos) 52%, #000));
  --c-titlebar-off: color-mix(in srgb, var(--phos) 26%, #000);
  --c-field-bg: #000000;
  --c-field-fg: var(--phos);
  --c-field-border: color-mix(in srgb, var(--phos) 45%, #000);
  --c-divider: color-mix(in srgb, var(--phos) 35%, #000);
  --c-danger: #ff5533;
  --c-screen-bg: #000000;
  --c-screen-fg: var(--phos);
  --f-ui: 'Zpix', Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif;
  --f-mono: 'Zpix', Consolas, 'Courier New', monospace;
  --f-display: var(--f-ui);
  --bevel-raised: inset 0 0 0 1px color-mix(in srgb, var(--phos) 60%, #000);
  --bevel-sunken: inset 0 0 0 1px color-mix(in srgb, var(--phos) 32%, #000);
  --window-shadow: 0 0 18px color-mix(in srgb, var(--phos) 18%, transparent);
  --scanline: rgba(0, 0, 0, .18);
  --glow: 0 0 6px color-mix(in srgb, var(--phos) 45%, transparent);
  --phos: #00cc66;
  --phos2: #7dffb2;
}
body.theme-cassette[data-palette="green"]  { --phos: #00cc66; --phos2: #7dffb2; }
body.theme-cassette[data-palette="amber"]  { --phos: #ffb000; --phos2: #ffd980; }
body.theme-cassette[data-palette="white"]  { --phos: #e8e8e8; --phos2: #ffffff; }
body.theme-cassette[data-palette="red"]    { --phos: #ff3b30; --phos2: #ff9a94; }
body.theme-cassette[data-palette="blue"]   { --phos: #4da6ff; --phos2: #b3d9ff; }
body.theme-cassette[data-palette="cyan"]   { --phos: #00e5ff; --phos2: #9ef4ff; }

/* ---------- 复古未来 2060：赛博霓虹 ---------- */
body.theme-shadowrun {
  --c-bg: #18112a;
  --c-bg-soft: #221838;
  --c-bg-deep: #0e0a1a;
  --c-text: #d8e8ff;
  --c-text-muted: #8090b8;
  --c-text-on-accent: #0e0a1a;
  --c-accent: var(--neon);
  --c-accent-soft: color-mix(in srgb, var(--neon) 20%, #0e0a1a);
  --c-link: var(--neon2);
  --c-shadow: #06040e;
  --c-highlight: color-mix(in srgb, var(--neon) 70%, #fff);
  --c-desktop: #0e0a1a;
  --c-desktop-pattern: linear-gradient(color-mix(in srgb, var(--neon) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--neon) 6%, transparent) 1px, transparent 1px);
  --c-window-border: var(--neon);
  --c-titlebar: linear-gradient(90deg, var(--neon2), var(--neon));
  --c-titlebar-off: #2a2040;
  --c-field-bg: #0b0716;
  --c-field-fg: #d8e8ff;
  --c-field-border: color-mix(in srgb, var(--neon) 40%, #0e0a1a);
  --c-divider: #2f2450;
  --c-danger: #ff3b6b;
  --c-screen-bg: #0b0716;
  --c-screen-fg: var(--neon);
  --f-ui: 'Zpix', 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --f-mono: 'Zpix', Consolas, 'Courier New', monospace;
  --f-display: var(--f-ui);
  --bevel-raised: inset 0 0 0 1px color-mix(in srgb, var(--neon) 70%, #0e0a1a),
                  0 0 8px color-mix(in srgb, var(--neon) 20%, transparent);
  --bevel-sunken: inset 0 0 0 1px color-mix(in srgb, var(--neon) 35%, #0e0a1a);
  --window-shadow: 0 0 24px color-mix(in srgb, var(--neon) 22%, transparent);
  --scanline: transparent;
  --glow: none;
  --neon: #00e6ff;
  --neon2: #ff2bd6;
}
body.theme-shadowrun[data-palette="cyan"]    { --neon: #00e6ff; --neon2: #ff2bd6; }
body.theme-shadowrun[data-palette="amber"]   { --neon: #ffaa22; --neon2: #00e6ff; }
body.theme-shadowrun[data-palette="emerald"] { --neon: #00ff88; --neon2: #ff2bd6; }
body.theme-shadowrun[data-palette="crimson"] { --neon: #ff2b5e; --neon2: #ffd166; }
body.theme-shadowrun[data-palette="violet"]  { --neon: #b26bff; --neon2: #00e6ff; }

/* ---------- 纯文本终端 ---------- */
body.theme-tui {
  --c-bg: #000000;
  --c-bg-soft: #000000;
  --c-bg-deep: #000000;
  --c-text: var(--phos);
  --c-text-muted: color-mix(in srgb, var(--phos) 50%, #000);
  --c-text-on-accent: #000000;
  --c-accent: var(--phos);
  --c-accent-soft: color-mix(in srgb, var(--phos) 18%, #000);
  --c-link: var(--phos);
  --c-shadow: transparent;
  --c-highlight: var(--phos);
  --c-desktop: #000000;
  --c-desktop-pattern: none;
  --c-window-border: transparent;
  --c-titlebar: transparent;
  --c-titlebar-off: transparent;
  --c-field-bg: #000000;
  --c-field-fg: var(--phos);
  --c-field-border: transparent;
  --c-divider: color-mix(in srgb, var(--phos) 40%, #000);
  --c-danger: #ff5533;
  --c-screen-bg: #000000;
  --c-screen-fg: var(--phos);
  --f-ui: 'Zpix', Consolas, 'Courier New', monospace;
  --f-mono: var(--f-ui);
  --f-display: var(--f-ui);
  --bevel-raised: none;
  --bevel-sunken: none;
  --window-shadow: none;
  --scanline: rgba(0, 0, 0, .18);
  --glow: 0 0 6px color-mix(in srgb, var(--phos) 40%, transparent);
  --phos: #00cc66;
}
body.theme-tui[data-palette="amber"] { --phos: #ffb000; }

/* ---------- 「洗衣房」：女王陛下政府的公务终端 ----------
   这台机器不是特工玩具，是一台被公务员系统吞掉的机器。
   窗口是卷宗封皮，屏幕上下压着密级横条，正文宋体、标题黑体 ——
   中文公文和白厅公文在版式上是一回事：标题一种字，正文另一种，
   两条横线把话夹在中间。 */
body.theme-laundry {
  --c-bg: var(--paper);
  --c-bg-soft: var(--paper-hi);
  --c-bg-deep: var(--paper-lo);
  --c-text: var(--ink);
  --c-text-muted: color-mix(in srgb, var(--ink) 52%, var(--paper));
  --c-text-on-accent: var(--paper-hi);
  --c-accent: var(--file);
  --c-accent-soft: color-mix(in srgb, var(--file) 18%, var(--paper));
  --c-link: var(--file);
  --c-shadow: color-mix(in srgb, var(--ink) 45%, var(--paper));
  --c-highlight: var(--paper-hi);
  --c-desktop: var(--desk);
  /* 桌面是一张压了方格的记录纸，不是墙纸 */
  --c-desktop-pattern:
    linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  --c-window-border: var(--ink);
  --c-titlebar: var(--file);
  --c-titlebar-off: color-mix(in srgb, var(--file) 38%, var(--paper-lo));
  --c-field-bg: var(--form);
  --c-field-fg: var(--ink);
  --c-field-border: color-mix(in srgb, var(--ink) 55%, var(--paper));
  --c-divider: color-mix(in srgb, var(--ink) 40%, var(--paper));
  --c-danger: var(--stamp);
  --c-screen-bg: #06120a;
  --c-screen-fg: #35d17a;
  --c-well: color-mix(in srgb, var(--ink) 8%, transparent);
  --c-warn: var(--stamp);

  /* 中文公文的排版规矩：标题黑体，正文宋体，编号打字机体。 */
  --f-ui: 'SimSun', '宋体', 'Songti SC', Georgia, serif;
  --f-mono: 'Courier New', 'SimSun', '宋体', monospace;
  --f-display: 'SimHei', '黑体', 'Heiti SC', 'Arial Black', sans-serif;

  /* 纸没有立体感。边框就是一条印上去的线。 */
  --bevel-raised: inset 0 0 0 1px var(--ink);
  --bevel-sunken: inset 0 0 0 1px color-mix(in srgb, var(--ink) 60%, var(--paper));
  --window-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 28%, transparent);
  --scanline: transparent;
  --glow: none;

  /* 四套用色都从这六个变量长出来 */
  --paper: #d9cbaa;      /* 卷宗封皮 */
  --paper-hi: #eadfc4;   /* 内页 */
  --paper-lo: #c2b18c;   /* 压痕 */
  --form: #f2ecd9;       /* 表格栏 */
  --ink: #241d14;        /* 打字机色带 */
  --file: #4a3a24;       /* 封皮上的深色横条 */
  --stamp: #9d1b17;      /* 印章红 */
  --desk: #3f4a3c;       /* 办公桌台面 */
}
body.theme-laundry[data-palette="buff"] { /* 出厂：归档处的标准封皮 */ }

body.theme-laundry[data-palette="hmso"] {
  --paper: #cdd6c4; --paper-hi: #e4ebdc; --paper-lo: #b3bfa8;
  --form: #f0f4ec; --ink: #1c2419; --file: #2f4a33; --stamp: #94231d; --desk: #4a4437;
}

body.theme-laundry[data-palette="nightshift"] {
  --paper: #2a2b2e; --paper-hi: #35373b; --paper-lo: #1e1f22;
  --form: #202226; --ink: #d8cba8; --file: #14161a; --stamp: #d2603f; --desk: #101113;
  --c-text-on-accent: #d8cba8;
  --window-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}

body.theme-laundry[data-palette="nightmare"] {
  --paper: #0a1409; --paper-hi: #10200e; --paper-lo: #060d06;
  --form: #081206; --ink: #46f08a; --file: #052b12; --stamp: #ff4b3b; --desk: #030703;
  --c-text-on-accent: #9dffc6;
  --c-screen-fg: #46f08a;
  --window-shadow: 0 0 18px color-mix(in srgb, #46f08a 22%, transparent);
  --glow: 0 0 5px color-mix(in srgb, #46f08a 45%, transparent);
  --f-ui: 'Courier New', 'SimHei', '黑体', monospace;
}
body.theme-laundry[data-palette="nightmare"] { text-shadow: var(--glow); }

/* ---- 密级横条：每一页的上下都要印保护标记，屏幕也一样 ---- */
.cls-bar {
  position: absolute; left: 0; right: 0; height: 18px; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 11px; letter-spacing: 2px;
  white-space: nowrap; overflow: hidden; pointer-events: none;
  background: var(--stamp, #9d1b17); color: #fff;
}
#cls-top { top: 0; }
#cls-bottom { bottom: 0; }
body.has-banner #topbar { top: 18px; }
body.has-banner #desktop { top: 44px; bottom: 18px; }
body.has-banner.has-taskbar #desktop { bottom: 48px; }
body.has-banner.has-fnbar #desktop { bottom: 48px; }
body.has-banner.has-fnbar.has-taskbar #desktop { bottom: 76px; }
body.has-banner #taskbar { bottom: 18px; }
body.has-banner.has-fnbar.has-taskbar #taskbar { bottom: 48px; }
body.has-banner #fnbar { bottom: 18px; }
body.has-banner #toasts { bottom: 56px; }
body.has-banner #bb-bar { top: 18px; }
body.has-banner.bb #desktop { top: 66px; }

/* 噩梦绿下横条会喘气。别盯着看。 */
body.theme-laundry[data-palette="nightmare"] .cls-bar {
  animation: cls-pulse 2.6s ease-in-out infinite;
}
@keyframes cls-pulse {
  0%, 100% { background: #7d1109; }
  50%      { background: #ff4b3b; }
}

/* ================================================================= 基础 */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: var(--f-ui); font-size: 13px; color: var(--c-text);
  background: var(--c-desktop);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body.crt { text-shadow: var(--glow); }

button, input, select, textarea { font-family: var(--f-ui); font-size: 13px; color: var(--c-text); }

#crt {
  position: fixed; inset: 0; z-index: 30000; pointer-events: none; display: none;
  background: repeating-linear-gradient(0deg,
    var(--scanline) 0px, var(--scanline) 1px, transparent 1px, transparent 4px);
}
body.crt #crt { display: block; }

.raised { box-shadow: var(--bevel-raised); }
.sunken { box-shadow: var(--bevel-sunken); }

/* ---------------------------------------------------------- 顶栏 */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 9100;
  background: var(--c-bg); color: var(--c-text); display: flex; align-items: center;
  gap: 8px; padding: 0 8px; font-size: 13px; letter-spacing: .5px;
  border-bottom: 1px solid var(--c-divider);
}
#topbar .brand { font-weight: bold; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 32%; }
#topbar .brand .sep { color: var(--c-text-muted); margin: 0 4px; }
#tasklist { flex: 1; display: flex; gap: 3px; overflow: hidden; }
#topbar .opr { font-family: var(--f-mono); white-space: nowrap; }
#topbar .ind { cursor: pointer; }
#topbar .ind.hot { color: var(--c-danger); font-weight: bold; }
.tools-btn {
  background: var(--c-bg); border: 0; cursor: pointer; padding: 2px 8px;
  font-size: 12px; font-family: var(--f-mono); white-space: nowrap;
  box-shadow: var(--bevel-raised);
}

/* ---------------------------------------------------------- 桌面 */
#desktop {
  position: absolute; inset: 26px 0 0 0; overflow: hidden;
  background-color: var(--c-desktop);
  background-image: var(--c-desktop-pattern);
  background-size: 24px 24px;
}
body.has-fnbar #desktop { bottom: 30px; }
body.has-taskbar #desktop { bottom: 30px; }
body.has-fnbar.has-taskbar #desktop { bottom: 58px; }

#desktop-icons {
  position: absolute; inset: 8px auto 8px 8px; width: 92px;
  display: flex; flex-direction: column; flex-wrap: wrap; gap: 4px; z-index: 1;
  max-height: calc(100% - 16px);
}
body.no-icons #desktop-icons { display: none; }
.desk-icon {
  width: 86px; text-align: center; color: var(--c-text-on-accent); cursor: pointer;
  padding: 4px 2px; font-size: 12px; text-shadow: 1px 1px 0 rgba(0,0,0,.8);
}
body.theme-cassette .desk-icon, body.theme-shadowrun .desk-icon,
body.theme-tui .desk-icon { color: var(--c-text); text-shadow: var(--glow); }
.desk-icon img { width: 32px; height: 32px; image-rendering: pixelated; display: block; margin: 0 auto 3px; }
.desk-icon .lbl { display: block; line-height: 1.15; }
.desk-icon .sub { display: block; font-size: 10px; color: var(--c-text-muted); }
.desk-icon.sel { background: var(--c-accent); color: var(--c-text-on-accent); }

/* ---------------------------------------------------------- 窗口 */
.win {
  position: absolute; background: var(--c-bg); color: var(--c-text); padding: 3px;
  display: flex; flex-direction: column; min-width: 200px; min-height: 100px;
  box-shadow: var(--bevel-raised), var(--window-shadow);
}
.win.maxed { inset: 0 !important; width: auto !important; height: auto !important; }
.win.minimized { display: none; }
body.chrome-none .win { inset: 0 !important; width: auto !important; height: auto !important;
  padding: 0; box-shadow: none; background: var(--c-bg); }
body.chrome-none .titlebar { border-bottom: 1px solid var(--c-divider); }

.titlebar {
  height: 22px; flex: none; background: var(--c-titlebar); color: var(--c-text-on-accent);
  display: flex; align-items: center; gap: 2px; padding: 0 1px;
  font-weight: bold; font-size: 13px; cursor: default; touch-action: none;
}
.win.blur .titlebar { background: var(--c-titlebar-off); }
.titlebar .tb-text { flex: 1; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; padding-left: 4px; }
.tb-btn {
  width: 18px; height: 16px; background: var(--c-bg); color: var(--c-text); border: 0;
  display: flex; align-items: center; justify-content: center; position: relative;
  font-size: 13px; line-height: 1; padding: 0; cursor: pointer; margin-left: 1px;
  box-shadow: var(--bevel-raised);
}
.tb-btn:active { box-shadow: var(--bevel-sunken); }
/* 最小化是一道底线，最大化是一个空框 —— 画出来比用字符稳 */
.tb-min::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 3px;
  height: 2px; background: currentColor;
}
.tb-max::after {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid currentColor; border-top-width: 2px;
}
.tb-close { font-family: var(--f-ui); font-weight: bold; padding-bottom: 2px; }

.menubar {
  flex: none; display: flex; padding: 1px 0; background: var(--c-bg);
  border-bottom: 1px solid var(--c-divider); font-size: 13px;
}
.menubar > span { padding: 2px 9px; cursor: pointer; }
.menubar > span:hover { background: var(--c-accent); color: var(--c-text-on-accent); }
.menubar > span u { text-decoration: underline; }

.win-body { flex: 1; overflow: auto; position: relative; background: var(--c-bg); }
.statusbar {
  flex: none; height: 20px; margin-top: 3px; display: flex; align-items: center;
  gap: 6px; padding: 0 6px; font-size: 12px; box-shadow: var(--bevel-sunken);
}
.resize-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; touch-action: none; z-index: 5; }

/* ---------------------------------------------------------- 控件 */
button.btn {
  min-width: 68px; height: 24px; padding: 2px 10px; background: var(--c-bg);
  border: 0; cursor: pointer; box-shadow: var(--bevel-raised);
}
button.btn:active, button.btn.on { box-shadow: var(--bevel-sunken); }
button.btn:disabled { color: var(--c-text-muted); cursor: default; }
button.btn.sm { min-width: 0; height: 21px; padding: 1px 7px; font-size: 12px; }
button.btn.danger { color: var(--c-danger); font-weight: bold; }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=time], textarea, select {
  background: var(--c-field-bg); border: 0; padding: 3px 5px; color: var(--c-field-fg);
  box-shadow: var(--bevel-sunken); -webkit-user-select: text; user-select: text;
}
textarea { font-family: var(--f-mono); font-size: 13px; resize: none; }
select { padding: 2px; }
fieldset { border: 1px solid var(--c-divider); margin: 0 0 10px; padding: 8px; }
legend { padding: 0 4px; }
table { color: var(--c-text); border-collapse: collapse; }
th { text-align: left; background: var(--c-accent); color: var(--c-text-on-accent); padding: 3px 5px; }
td { padding: 3px 5px; }

.list {
  background: var(--c-field-bg); color: var(--c-field-fg); overflow: auto; height: 100%;
  box-shadow: var(--bevel-sunken);
}
.list .row { padding: 3px 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: default; }
.list .row.sel { background: var(--c-accent); color: var(--c-text-on-accent); }
.list .row.unread { font-weight: bold; }
.list .row.head { background: var(--c-bg-soft); color: var(--c-text); font-weight: bold; }

.pad { padding: 10px; }
.row-flex { display: flex; gap: 6px; align-items: center; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--c-text-muted); }
.tiny { font-size: 12px; }
.mono { font-family: var(--f-mono); }
.danger { color: var(--c-danger); }
.ok { color: var(--c-ok, #2a9d4a); }
.warn { color: var(--c-warn, #b8860b); }

/* ---------------------------------------------------------- 功能键栏 */
#fnbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 9000;
  background: var(--c-bg); display: none; align-items: stretch;
  border-top: 1px solid var(--c-divider);
}
body.has-fnbar #fnbar { display: flex; }
.fn-key {
  flex: 1; min-width: 0; background: transparent; border: 0; cursor: pointer;
  color: var(--c-text); font-family: var(--f-mono); font-size: 13px; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-right: 1px solid var(--c-divider); overflow: hidden; white-space: nowrap;
}
.fn-key .num { color: var(--c-text-muted); }
.fn-key:hover { background: var(--c-bg-soft); }
.fn-key.on { background: var(--c-accent); color: var(--c-text-on-accent); font-weight: bold; }
.fn-key.on .num { color: var(--c-text-on-accent); }
.fn-key .badge { background: var(--c-danger); color: #fff; padding: 0 4px; font-size: 11px; }

/* Win31 皮肤额外的开始任务栏 */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 8900;
  background: var(--c-bg); display: none; align-items: center; gap: 4px; padding: 3px;
  border-top: 1px solid var(--c-divider);
}
body.has-taskbar #taskbar { display: flex; }
body.has-fnbar.has-taskbar #taskbar { bottom: 30px; }
#start-btn { min-width: 74px; font-weight: bold; }
#taskbar-list { display: flex; gap: 4px; flex: 1; overflow: hidden; }
.task-btn {
  min-width: 110px; max-width: 170px; height: 22px; padding: 1px 6px; font-size: 12px;
  background: var(--c-bg); border: 0; cursor: pointer; text-align: left;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  box-shadow: var(--bevel-raised);
}
.task-btn.active { font-weight: bold; box-shadow: var(--bevel-sunken); }
.task-btn .badge { background: var(--c-danger); color: #fff; padding: 0 3px; margin-left: 4px; font-size: 11px; }

/* ---------------------------------------------------------- 程序目录 */
#dirscreen {
  position: absolute; inset: 26px 0 0 0; z-index: 8800; background: var(--c-desktop);
  color: var(--c-text); display: none; flex-direction: column; padding: 10px 14px;
  font-family: var(--f-mono); overflow: auto;
}
body.dir-open #dirscreen { display: flex; }
body.has-fnbar #dirscreen { bottom: 30px; }
body.has-taskbar #dirscreen { bottom: 30px; }
body.has-banner #dirscreen { top: 44px; }
body.has-banner.has-taskbar #dirscreen { bottom: 48px; }
#dirscreen h2 { margin: 0 0 2px; font-size: 15px; letter-spacing: 2px; }
#dirscreen .hint { color: var(--c-text-muted); font-size: 12px; margin-bottom: 10px; }
.cdir-list { display: flex; flex-direction: column; }
.cdir-row {
  display: flex; gap: 10px; padding: 3px 6px; cursor: pointer; align-items: baseline;
}
.cdir-row:hover, .cdir-row.sel { background: var(--c-accent); color: var(--c-text-on-accent); }
.cdir-row .k { width: 34px; flex: none; text-align: right; color: var(--c-text-muted); }
.cdir-row:hover .k, .cdir-row.sel .k { color: var(--c-text-on-accent); }
.cdir-row .code { width: 92px; flex: none; font-weight: bold; }
.cdir-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cdir-row .bl { color: var(--c-text-muted); font-size: 12px; }
.cdir-row:hover .bl, .cdir-row.sel .bl { color: var(--c-text-on-accent); }

/* ---------------------------------------------------------- 纯文本终端 */
/* ============================================ 纯文本终端：整屏字符界面 */
/* 纯文本终端下顶栏不要了 —— 终端自己有标题行 */
body.terminal-only #topbar { display: none; }

#tui {
  position: absolute; inset: 0; z-index: 8500; overflow: hidden;
  display: flex; flex-direction: column; padding: 0;
  font-family: var(--f-mono); font-size: 14px; line-height: 1.4;
  background: var(--c-screen-bg); color: var(--c-screen-fg);
  --tui-dim: color-mix(in srgb, var(--c-screen-fg) 45%, #000);
  --tui-line: color-mix(in srgb, var(--c-screen-fg) 55%, #000);
  --tui-bright: color-mix(in srgb, var(--c-screen-fg) 85%, #fff);
}
#tui .dim, #tui .tui-dim { color: var(--tui-dim); }
#tui .deny { color: #ff5555; }
#tui .ok { color: #55ff55; }
#tui .warn { color: #ffcc33; }
#tui .hdr { color: #ffff55; }
#tui b { font-weight: bold; }
.tui-inv, #tui .tui-row.sel, .tui-hdr, .tui-key b {
  background: var(--c-screen-fg); color: var(--c-screen-bg); text-shadow: none;
}

/* 标题行 */
.tui-hdr { display: flex; justify-content: space-between; padding: 0 8px; flex: none;
  font-weight: bold; letter-spacing: .5px; white-space: nowrap; overflow: hidden; }
.tui-hdr span:last-child { font-weight: normal; }

/* 屏幕：栏的容器 */
.tui-body { flex: 1; min-height: 0; position: relative; }
.tui-screen { position: absolute; inset: 0; display: flex; gap: 0; padding: 4px 6px 2px; }
.tui-screen[hidden] { display: none !important; }
.tui-screen.cols { flex-direction: row; }
.tui-screen.rows { flex-direction: column; }
/* 常用版式：左窄右宽 / 上短下长 */
.tui-screen.side > .tui-pane:first-child { flex: 0 0 30%; max-width: 320px; }
.tui-screen.side > .tui-pane:not(:first-child) { flex: 1; }
.tui-screen.stack > .tui-pane:first-child { flex: 0 0 45%; }
.tui-screen.stack > .tui-pane:not(:first-child) { flex: 1; }
.tui-screen.rows > .tui-input { flex: none; }
/* 三栏版式：左边一列贯通，右边上下两块 */
.tui-screen.grid { display: grid; grid-template-columns: minmax(170px, 27%) 1fr;
  grid-template-rows: 1fr minmax(110px, 42%); grid-template-areas: "side main" "side preview"; }
.tui-screen.grid.foot { grid-template-rows: 1fr minmax(110px, 42%) auto;
  grid-template-areas: "side main" "side preview" "foot foot"; }
.tui-screen.grid.chat { grid-template-rows: 1fr auto; grid-template-areas: "side main" "foot foot"; }
.tui-screen.grid > .tui-pane { flex: none; }
.tui-screen.grid > .tui-input { grid-area: foot; }
/* 两列等分 */
.tui-screen.half > .tui-pane { flex: 1; }
.tui-screen > .tui-pane { flex: 1; min-width: 0; min-height: 0; }

/* 栏：一圈单线边框，标题嵌在上边线里 */
.tui-pane { position: relative; display: flex; flex-direction: column; margin: 8px 3px 3px;
  border: 1px solid var(--tui-line); border-radius: 3px; }
.tui-pane.focus { border-color: var(--tui-bright); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-screen-fg) 25%, transparent); }
.tui-pane-title { position: absolute; top: -10px; left: 8px; padding: 0 2px; line-height: 1.3;
  background: var(--c-screen-bg); color: var(--tui-dim); white-space: nowrap; }
.tui-pane.focus .tui-pane-title { color: var(--tui-bright); font-weight: bold; }
.tui-pane-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 6px; white-space: pre-wrap; word-break: break-word; }
.tui-list .tui-pane-body { white-space: pre; }
.tui-row { padding: 0 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.tui-row.sel { font-weight: bold; }
.tui-row .dim { opacity: .9; }
.tui-row.sel .dim, .tui-row.sel .ok, .tui-row.sel .deny, .tui-row.sel .warn { color: inherit; }

/* 表单 */
.tui-form .tui-pane-body { display: flex; flex-direction: column; gap: 3px; white-space: normal; }
.tui-field { display: flex; gap: 8px; align-items: flex-start; }
.tui-field.grow { flex: 1; min-height: 0; }
.tui-field label { flex: 0 0 8em; text-align: right; color: var(--tui-dim); padding-top: 1px; }
.tui-field label::after { content: ' :'; }
.tui-field input, .tui-field select, .tui-field textarea {
  flex: 1; min-width: 0; background: transparent; color: var(--c-screen-fg);
  font: inherit; border: 0; border-bottom: 1px dotted var(--tui-line); outline: none;
  padding: 0 2px; box-shadow: none; border-radius: 0;
}
.tui-field select { border-bottom-style: solid; }
.tui-field select option { background: var(--c-screen-bg); color: var(--c-screen-fg); }
.tui-field textarea { height: 100%; resize: none; border: 1px solid var(--tui-line); padding: 4px;
  white-space: pre-wrap; line-height: 1.4; }
.tui-field input:focus, .tui-field textarea:focus, .tui-field select:focus {
  border-color: var(--tui-bright); background: color-mix(in srgb, var(--c-screen-fg) 8%, transparent); }
.tui-check { flex: 1; display: flex; gap: 6px; align-items: center; }
.tui-check input { flex: none; accent-color: var(--c-screen-fg); }

/* 输入行 */
.tui-input { display: flex; gap: 6px; padding: 2px 8px; border-top: 1px solid var(--tui-line); }
.tui-input input { flex: 1; background: transparent; color: var(--c-screen-fg); font: inherit;
  border: 0; outline: none; padding: 0; box-shadow: none; }
.tui-ps { color: var(--tui-bright); white-space: nowrap; }

/* 状态行与按键提示 */
.tui-status { flex: none; padding: 0 10px; color: var(--tui-dim); white-space: nowrap; overflow: hidden; }
.tui-keys { flex: none; display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 2px 8px 4px;
  border-top: 1px solid var(--tui-line); }
.tui-key { cursor: pointer; white-space: nowrap; }
.tui-key b { padding: 0 4px; margin-right: 3px; }

/* 底行输入与提示框 */
.tui-modal { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end;
  justify-content: center; pointer-events: none; }
.tui-modal[hidden] { display: none; }
.tui-modal > * { pointer-events: auto; }
.tui-prompt { width: 100%; display: flex; gap: 8px; align-items: center; padding: 3px 10px;
  background: var(--c-screen-bg); border-top: 1px solid var(--tui-bright); }
.tui-prompt input { flex: 1; background: transparent; color: var(--c-screen-fg); font: inherit;
  border: 0; outline: none; box-shadow: none; padding: 0; }
.tui-box { margin: auto; min-width: 320px; max-width: 70%; background: var(--c-screen-bg);
  border: 1px double var(--tui-bright); box-shadow: 0 0 0 2px var(--c-screen-bg), 6px 6px 0 rgba(0,0,0,.6); }
.tui-box-title { padding: 2px 10px; background: var(--c-screen-fg); color: var(--c-screen-bg); font-weight: bold; }
.tui-box-body { padding: 10px 12px; white-space: pre-wrap; max-height: 60vh; overflow: auto; }
.tui-box-foot { padding: 4px 10px; border-top: 1px solid var(--tui-line); color: var(--tui-dim); }
.tui-picklist { padding: 4px 0; }

/* 命令行屏幕：滚动的输出 + 底部一行提示符 */
.tui-shell-out { flex: 1; min-height: 0; overflow: auto; padding: 6px 10px; white-space: pre-wrap; word-break: break-word; }
.tui-shell-out > div { min-height: 1.4em; }

/* ---------------------------------------------------------- 自检画面 */
#boot {
  position: absolute; inset: 0; background: #000; color: #b8b8b8;
  font-family: var(--f-mono); font-size: 15px; padding: 22px; z-index: 20000;
  white-space: pre-wrap; line-height: 1.4; overflow: hidden; display: none;
}
body.booting #boot { display: block; }
#boot .amber { color: #ffb000; }

/* ---------------------------------------------------------- 登录 */
#login-shade {
  position: absolute; inset: 0; z-index: 15000; background: var(--c-desktop);
  background-image: var(--c-desktop-pattern); background-size: 24px 24px;
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
#login { width: 440px; max-width: 100%; background: var(--c-bg); padding: 3px;
  box-shadow: var(--bevel-raised), var(--window-shadow); }
.tabs { display: flex; gap: 2px; margin: 6px 6px 0; }
.tabs .tab { padding: 4px 11px; background: var(--c-bg); cursor: pointer; font-size: 12px;
  box-shadow: var(--bevel-raised); }
.tabs .tab.on { font-weight: bold; box-shadow: var(--bevel-sunken); }
.field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.field-row label { width: 104px; flex: none; text-align: right; }
.field-row input, .field-row select { flex: 1; min-width: 0; }
.err { color: var(--c-danger); min-height: 16px; }

/* ---------------------------------------------------------- 对话框与通知 */
#modal-shade { position: absolute; inset: 0; z-index: 12000; background: rgba(0,0,0,.35); }
.dialog { position: absolute; z-index: 12500; }
#toasts { position: absolute; right: 8px; bottom: 38px; z-index: 11000;
  display: flex; flex-direction: column-reverse; gap: 6px; width: 280px; }
.toast { background: var(--c-bg); padding: 3px; cursor: pointer;
  box-shadow: var(--bevel-raised), var(--window-shadow); animation: toast-in .18s steps(3); }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } }
.toast .tt { background: var(--c-titlebar); color: var(--c-text-on-accent);
  font-weight: bold; padding: 2px 5px; display: flex; justify-content: space-between; }
.toast .tb { padding: 7px; font-size: 12px; }

/* ---------------------------------------------------------- 老大哥 */
#bb-bar {
  position: absolute; top: 26px; left: 0; right: 0; height: 22px; z-index: 9500;
  background: #aa0000; color: #ffff55; font-weight: bold; font-size: 12px;
  display: none; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--f-mono); letter-spacing: 1px;
}
body.bb #bb-bar { display: flex; }
body.bb #desktop { top: 48px; outline: 3px solid #aa0000; outline-offset: -3px; }

/* ---------------------------------------------------------- 程序专用 */
.browser-chrome { display: flex; gap: 4px; padding: 4px; align-items: center; flex: none; }
.browser-chrome input { flex: 1; min-width: 0; }
.page-view { background: #fff; height: 100%; overflow: auto; }
.page-view iframe { width: 100%; height: 100%; border: 0; background: #fff; }

.split { display: flex; height: 100%; }
.split > .side { width: 200px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.split > .main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 4px; gap: 4px; }

.chat-log { flex: 1; overflow: auto; background: var(--c-field-bg); color: var(--c-field-fg);
  padding: 5px; box-shadow: var(--bevel-sunken); }
.chat-line { margin-bottom: 3px; word-wrap: break-word; }
.chat-line .who { font-weight: bold; }
.chat-line.me .who { color: var(--c-accent); }
.chat-line.them .who { color: var(--c-danger); }
.chat-line .ts { color: var(--c-text-muted); font-size: 11px; }
/* 跑团用的三种行：动作、场外、掷骰。 */
.chat-line .tag { font-size: 10px; padding: 0 3px; margin: 0 3px;
  border: 1px solid var(--c-text-muted); color: var(--c-text-muted); }
.chat-line.emote i { color: var(--c-accent); }
.chat-line.ooc { color: var(--c-text-muted); }
.chat-line.ooc .who { font-weight: normal; }
.chat-line.roll { background: var(--c-well, rgba(0,0,0,.12)); padding: 1px 3px; }
.chat-line.roll b { color: var(--c-warn, var(--c-accent)); }
.contact.pending { color: var(--c-danger); font-weight: bold; animation: glow 1s steps(2) infinite; }
@keyframes glow { 50% { background: color-mix(in srgb, var(--c-danger) 22%, transparent); } }

.crt-screen {
  background: var(--c-screen-bg); color: var(--c-screen-fg); font-family: var(--f-mono);
  padding: 8px; height: 100%; overflow: auto; white-space: pre-wrap; line-height: 1.35;
  text-shadow: 0 0 4px color-mix(in srgb, var(--c-screen-fg) 40%, transparent);
}
.crt-screen .deny { color: #ff5555; }
.crt-screen .hdr { color: #ffff55; }
.crt-screen .ok { color: #55ff55; }
.crt-screen .warn { color: #ffcc33; }
.crt-screen .dim { color: color-mix(in srgb, var(--c-screen-fg) 45%, #000); }
.crt-screen input { background: transparent; box-shadow: none; color: var(--c-screen-fg);
  font-family: var(--f-mono); font-size: 13px; padding: 0; outline: none; border: 0; }

.ega-frame { image-rendering: pixelated; background: #000; display: block; }
.paint-tools { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; }
.swatch { width: 18px; height: 18px; cursor: pointer; box-shadow: var(--bevel-raised); }
.swatch.on { outline: 2px solid var(--c-highlight); outline-offset: -2px; }

.mine-grid { display: grid; background: var(--c-bg); padding: 3px; }
.mine-cell {
  width: 18px; height: 18px; font-weight: bold; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--c-bg); border: 0; padding: 0; color: var(--c-text);
  box-shadow: var(--bevel-raised);
}
.mine-cell.open { box-shadow: inset 0 0 0 1px var(--c-divider); cursor: default; }
.mine-cell.boom { background: var(--c-danger); }

.grid-board { display: grid; gap: 1px; background: var(--c-divider); padding: 1px; }
.grid-cell { background: var(--c-bg); border: 0; padding: 0; cursor: pointer;
  color: var(--c-text); display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 13px; line-height: 1; }
.grid-cell.on { background: var(--c-accent); color: var(--c-text-on-accent); }

/* ---------------------------------------------------------- 手机 */
@media (max-width: 760px) {
  #topbar { font-size: 12px; gap: 5px; padding: 0 5px; }
  #topbar .brand { max-width: 40%; }
  #tasklist { display: none; }
  #fnbar { overflow-x: auto; }
  .fn-key { flex: 0 0 76px; font-size: 12px; letter-spacing: 0; }
  #desktop-icons { inset: 6px 6px auto 6px; width: auto; flex-direction: row; max-height: none; }
  .desk-icon { width: 74px; font-size: 11px; }
  .win { inset: 0 !important; width: auto !important; height: auto !important; padding: 2px; }
  .win .resize-grip { display: none; }
  .split { flex-direction: column; }
  .split > .side { width: auto; max-height: 42%; }
  #login { width: 100%; }
  .field-row { flex-wrap: wrap; }
  .field-row label { width: auto; text-align: left; }
  .field-row input, .field-row select { width: 100%; flex: none; }
  body.has-taskbar #taskbar { gap: 2px; }
  #start-btn { min-width: 52px; }
}

/* ============================================ 「洗衣房」皮肤的细活
   上面那段只是配色。这一段负责让它看起来像一份卷宗，而不是一个换了颜色的窗口。 */

/* 顶栏：公文的眉首。两条线夹住一行小字。 */
body.theme-laundry #topbar {
  background: var(--paper-lo);
  border-bottom: 3px double var(--ink);
  font-family: var(--f-display); letter-spacing: 1px;
}
body.theme-laundry #topbar .brand::before {
  content: '档号 '; color: var(--c-text-muted); font-weight: normal;
}

/* 窗口就是一份卷宗：左边一条封皮包边，右下角压出纸影。 */
body.theme-laundry .win {
  border-left: 7px solid var(--file);
  background: var(--paper);
}
body.theme-laundry .titlebar {
  font-family: var(--f-display); letter-spacing: 1px;
  border-bottom: 1px solid var(--ink);
}
/* 标题左边那颗红点，是封皮上盖的密级章 */
body.theme-laundry .titlebar .tb-text::before {
  content: '●'; color: var(--stamp); margin-right: 5px; font-size: 10px;
}
body.theme-laundry .win.blur .titlebar .tb-text::before { color: var(--c-text-muted); }

/* 按钮是橡皮图章：一圈线，按下去墨色反过来。 */
body.theme-laundry .btn,
body.theme-laundry .tools-btn,
body.theme-laundry .task-btn,
body.theme-laundry .tb-btn {
  background: var(--paper-hi); color: var(--ink);
  font-family: var(--f-display); letter-spacing: 1px;
  box-shadow: inset 0 0 0 1px var(--ink);
}
body.theme-laundry .btn:active,
body.theme-laundry .tools-btn:active,
body.theme-laundry .tb-btn:active,
body.theme-laundry .task-btn.active {
  background: var(--ink); color: var(--paper-hi);
  box-shadow: inset 0 0 0 1px var(--ink);
}
body.theme-laundry .btn.danger,
body.theme-laundry .btn[data-a="del"],
body.theme-laundry .danger { color: var(--stamp); }

/* 输入框是表格里的填写栏：只有下边一条线。 */
body.theme-laundry input[type="text"],
body.theme-laundry input[type="password"],
body.theme-laundry input[type="number"],
body.theme-laundry input[type="date"],
body.theme-laundry input[type="time"],
body.theme-laundry select,
body.theme-laundry textarea {
  background: var(--form); color: var(--ink);
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--ink) 45%, var(--paper));
  border-radius: 0;
}
body.theme-laundry textarea { font-family: var(--f-mono); }
body.theme-laundry .field-row label {
  font-family: var(--f-display); letter-spacing: 1px;
}
body.theme-laundry .field-row label::after { content: '　'; }

/* 表单分组是公文的小节：一条实线，标题压在线上。 */
body.theme-laundry fieldset {
  border: 1px solid var(--ink); border-radius: 0;
  background: color-mix(in srgb, var(--paper-hi) 60%, transparent);
}
body.theme-laundry legend {
  font-family: var(--f-display); letter-spacing: 2px;
  background: var(--paper); padding: 0 6px;
}

/* 列表是登记簿：隔行浅一道，选中的那行整条涂黑。 */
body.theme-laundry .list { background: var(--form); }
body.theme-laundry .list .row:nth-child(even) {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
body.theme-laundry .list .row.sel {
  background: var(--ink); color: var(--paper-hi);
}
body.theme-laundry .list .row.head {
  background: var(--paper-lo); font-family: var(--f-display); letter-spacing: 1px;
  border-bottom: 1px solid var(--ink);
}

/* 表格：登记簿的格子 */
body.theme-laundry table { border-collapse: collapse; }
body.theme-laundry th {
  font-family: var(--f-display); letter-spacing: 1px; text-align: left;
  background: var(--paper-lo); border-bottom: 1px solid var(--ink); padding: 2px 4px;
}
body.theme-laundry td {
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 35%, var(--paper));
  padding: 2px 4px;
}

/* 状态栏：公文页脚 */
body.theme-laundry .statusbar {
  border-top: 1px solid var(--ink); background: var(--paper-lo);
  font-family: var(--f-mono); font-size: 11px;
}

/* 菜单条 */
body.theme-laundry .menubar {
  background: var(--paper-lo); border-bottom: 1px solid var(--ink);
  font-family: var(--f-display); letter-spacing: 1px;
}

/* 任务栏与开始按钮：办公桌下沿的一条木边 */
body.theme-laundry #taskbar {
  background: var(--paper-lo); border-top: 2px solid var(--ink);
}
body.theme-laundry #start-btn::before { content: '☰ '; }

/* 桌面图标：每一个都是贴在台面上的一张标签纸 */
body.theme-laundry .desk-icon {
  color: #f0ead8; text-shadow: 1px 1px 0 #000;
  font-family: var(--f-display); letter-spacing: .5px;
}
body.theme-laundry .desk-icon img {
  background: var(--paper-hi); padding: 2px;
  box-shadow: 0 0 0 1px var(--ink), 2px 2px 0 rgba(0, 0, 0, .35);
}
body.theme-laundry .desk-icon.sel { background: var(--stamp); color: #fff; }
/* 噩梦绿下连图标都退成单色 —— 这台机器已经不显示别的颜色了 */
body.theme-laundry[data-palette="nightmare"] .desk-icon img,
body.theme-laundry[data-palette="nightmare"] .cdir-row img,
body.theme-laundry[data-palette="nightmare"] .task-btn img {
  filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(3) brightness(.85);
}
body.theme-laundry[data-palette="nightshift"] .desk-icon img {
  filter: saturate(.55) brightness(.85);
}

/* 程序目录：一张检索卡 */
body.theme-laundry #dirscreen {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink);
}
body.theme-laundry #dirscreen h2 { font-family: var(--f-display); letter-spacing: 4px; }
body.theme-laundry .cdir-row:hover,
body.theme-laundry .cdir-row.sel { background: var(--ink); color: var(--paper-hi); }

/* 登录框：一张调阅申请单 */
body.theme-laundry #login { border: 1px solid var(--ink); }
body.theme-laundry #login-shade { background: var(--desk); }

/* 终端窗口在这套皮肤下仍然是绿荧幕 —— 机房在地下室，跟纸不在一层楼。 */
body.theme-laundry .crt-screen {
  background: var(--c-screen-bg); color: var(--c-screen-fg);
  border: 1px solid var(--ink);
}

/* 聊天记录像一份通话记要 */
body.theme-laundry .chat-log { background: var(--form); }
body.theme-laundry .chat-line .ts { font-family: var(--f-mono); }
body.theme-laundry .chat-line.roll { background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* 提示气泡：便条纸 */
body.theme-laundry .toast { background: var(--paper-hi); box-shadow: 3px 3px 0 rgba(0,0,0,.3); }
body.theme-laundry .toast .tt { font-family: var(--f-display); letter-spacing: 1px; }

/* ============================================ 磁带未来主义：照原项目的磷光屏细做
   原项目的样子：整屏一个程序；标题条是一道横向渐变的绿带，上面压着扫描线；
   菜单与按钮全是等宽大写、带一圈细边框；"选中 / 当前 / 要紧"的东西一律是
   琥珀橙色的实心条（也压着扫描线）；清单每行之间是一条点线。 */
body.theme-cassette {
  --c-ok: var(--phos2); --c-warn: var(--amber);
  /* 琥珀橙是这套外观里唯一的第二种颜色：当前功能键、选中行、菜单高亮、要紧的按钮 */
  --amber: #f0961e;
  --c-accent: var(--amber);
  --c-accent-soft: color-mix(in srgb, var(--amber) 22%, #000);
  --c-text-on-accent: #140a00;
  --stripe: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 4px);
  --band: linear-gradient(90deg, color-mix(in srgb, var(--phos) 62%, #000), color-mix(in srgb, var(--phos) 30%, #000));
  --c-titlebar: var(--stripe), var(--band);
  --c-titlebar-off: var(--stripe), linear-gradient(90deg, color-mix(in srgb, var(--phos) 30%, #000), color-mix(in srgb, var(--phos) 14%, #000));
  --line: color-mix(in srgb, var(--phos) 45%, #000);
  --line-dim: color-mix(in srgb, var(--phos) 26%, #000);
  --f-ui: 'Zpix', Consolas, 'Courier New', 'SimHei', '黑体', monospace;
  --f-display: var(--f-ui);
  --bevel-raised: inset 0 0 0 1px var(--line);
  --bevel-sunken: inset 0 0 0 1px var(--line-dim);
  --window-shadow: none;
}
/* 英文一律大写 —— 中文不受影响 */
body.theme-cassette { letter-spacing: .5px; }
body.theme-cassette .titlebar, body.theme-cassette .menubar, body.theme-cassette button.btn,
body.theme-cassette .fn-key, body.theme-cassette .tools-btn, body.theme-cassette .statusbar,
body.theme-cassette th, body.theme-cassette .list .row.head, body.theme-cassette legend,
body.theme-cassette #topbar { text-transform: uppercase; }

/* 顶栏：品牌暗一点，工具按钮一圈边 */
body.theme-cassette #topbar { background: #000; border-bottom: 1px solid var(--line-dim); }
body.theme-cassette #topbar .brand { color: var(--c-text-muted); font-weight: normal; }
body.theme-cassette .tools-btn { background: transparent; color: var(--phos); box-shadow: inset 0 0 0 1px var(--phos); padding: 2px 12px; }
body.theme-cassette #topbar .opr { color: var(--phos); }

/* 标题条：横向绿带 + 扫描线，只有一颗小小的 × */
body.theme-cassette .titlebar { height: 24px; color: var(--phos2); font-weight: bold; letter-spacing: 2px; padding: 0 8px; }
body.theme-cassette .win.blur .titlebar { color: color-mix(in srgb, var(--phos) 75%, #000); }
body.theme-cassette .tb-btn { background: transparent; color: var(--phos2); box-shadow: inset 0 0 0 1px var(--phos2); width: 22px; height: 16px; font-size: 11px; }
body.theme-cassette .tb-min, body.theme-cassette .tb-max { display: none; }

/* 菜单条：大写、下划线快捷键、悬停变琥珀 */
body.theme-cassette .menubar { background: #000; border-bottom: 1px solid var(--line-dim); height: 26px; align-items: center; font-size: 14px; letter-spacing: 1.5px; }
body.theme-cassette .menubar > span { padding: 2px 10px; }
body.theme-cassette .menubar > span:hover, body.theme-cassette .menubar > span.open {
  background: var(--stripe), var(--amber); color: var(--c-text-on-accent); }

/* 按钮：透明、一圈细边、大写；按下或"要紧"变成琥珀实心 */
body.theme-cassette button.btn {
  background: transparent; color: var(--phos); box-shadow: inset 0 0 0 1px var(--phos);
  letter-spacing: 1.5px; height: 28px; padding: 2px 14px; font-size: 13px;
}
body.theme-cassette button.btn.sm { height: 24px; padding: 1px 10px; font-size: 12px; }
body.theme-cassette button.btn:hover { background: color-mix(in srgb, var(--phos) 12%, #000); }
body.theme-cassette button.btn:active, body.theme-cassette button.btn.on,
body.theme-cassette button.btn.danger, body.theme-cassette button.btn.primary {
  background: var(--stripe), var(--amber); color: var(--c-text-on-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 70%, #fff); text-shadow: none; font-weight: bold;
}
body.theme-cassette button.btn:disabled { color: var(--line); box-shadow: inset 0 0 0 1px var(--line-dim); background: transparent; }

/* 输入框：黑底、一圈细边 */
body.theme-cassette input[type=text], body.theme-cassette input[type=password], body.theme-cassette input[type=email],
body.theme-cassette input[type=number], body.theme-cassette input[type=date], body.theme-cassette input[type=time],
body.theme-cassette textarea, body.theme-cassette select {
  background: #000; color: var(--phos); box-shadow: inset 0 0 0 1px var(--line); border: 0; padding: 4px 8px; }
body.theme-cassette input:focus, body.theme-cassette textarea:focus, body.theme-cassette select:focus { box-shadow: inset 0 0 0 1px var(--phos); outline: none; }
body.theme-cassette select option { background: #000; color: var(--phos); }
body.theme-cassette ::placeholder { color: var(--c-text-muted); }

/* 清单：行与行之间一条点线，选中变琥珀 */
body.theme-cassette .list { background: #000; box-shadow: inset 0 0 0 1px var(--line-dim); }
body.theme-cassette .list .row { padding: 6px 8px; border-bottom: 1px dotted var(--line-dim); letter-spacing: 1px; }
body.theme-cassette .list .row.sel { background: var(--stripe), var(--amber); color: var(--c-text-on-accent); text-shadow: none; font-weight: bold; }
body.theme-cassette .list .row.head { background: var(--band); color: var(--phos2); border-bottom: 0; }
body.theme-cassette .list .row.unread { color: var(--phos2); }

/* 表头：一道绿带 */
body.theme-cassette th { background: var(--stripe), var(--band); color: var(--phos2); letter-spacing: 1px; border-right: 1px solid var(--line-dim); }
body.theme-cassette td { border-bottom: 1px dotted var(--line-dim); }

/* 分组框、分隔 */
body.theme-cassette fieldset { border: 1px solid var(--line-dim); background: transparent; }
body.theme-cassette legend { color: var(--phos2); letter-spacing: 1.5px; }
body.theme-cassette .sunken { box-shadow: inset 0 0 0 1px var(--line-dim); }
body.theme-cassette .raised { box-shadow: inset 0 0 0 1px var(--line); }

/* 状态栏：一条带边的暗字 */
body.theme-cassette .statusbar { height: 24px; box-shadow: inset 0 0 0 1px var(--line-dim); color: var(--c-text-muted); letter-spacing: 1px; margin: 4px 0 0; }

/* 功能键栏：格子之间竖线，当前一格琥珀实心 */
body.theme-cassette #fnbar { background: #000; border-top: 1px solid var(--line-dim); }
body.theme-cassette .fn-key { border-left: 1px solid var(--line-dim); font-size: 14px; letter-spacing: 1.5px; color: var(--phos); }
body.theme-cassette .fn-key:first-child { border-left: 0; }
body.theme-cassette .fn-key .num { color: var(--c-text-muted); margin-right: 6px; }
body.theme-cassette .fn-key:hover { background: color-mix(in srgb, var(--phos) 10%, #000); }
body.theme-cassette .fn-key.on { background: var(--stripe), var(--amber); color: var(--c-text-on-accent); text-shadow: none; }
body.theme-cassette .fn-key.on .num { color: color-mix(in srgb, var(--c-text-on-accent) 70%, var(--amber)); }
body.theme-cassette .fn-key .badge { background: var(--phos2); color: #000; }

/* 程序目录：一张检索表，行悬停琥珀 */
body.theme-cassette #dirscreen { background: #000; }
body.theme-cassette #dirscreen h2 { color: var(--phos2); letter-spacing: 3px; text-transform: uppercase; }
body.theme-cassette .cdir-row { border-bottom: 1px dotted var(--line-dim); padding: 5px 6px; letter-spacing: 1px; }
body.theme-cassette .cdir-row:hover, body.theme-cassette .cdir-row.sel { background: var(--stripe), var(--amber); color: var(--c-text-on-accent); text-shadow: none; }

/* 浏览器里的网页保留它自己的颜色，只是隔着一层扫描线看 */
body.theme-cassette .page-view { box-shadow: inset 0 0 0 1px var(--line); }

/* 对话框、菜单、提示 */
body.theme-cassette .dialog { background: #000; box-shadow: inset 0 0 0 1px var(--phos), 0 0 24px rgba(0,0,0,.8); }
body.theme-cassette .toast { background: #000; box-shadow: inset 0 0 0 1px var(--phos); }
body.theme-cassette .toast .tt { color: var(--phos2); }
body.theme-cassette .chat-line.me .who { color: var(--amber); }
body.theme-cassette .chat-line.them .who { color: var(--phos2); }

/* ============================================ 单程序模式：整屏只有一个程序 */
body.single-task #tasklist { display: none; }
body.single-task #topbar .brand { flex: 1; max-width: none; }
body.single-task .win:not(.dialog) {
  inset: 0 !important; width: auto !important; height: auto !important;
  padding: 0; box-shadow: none; border: 1px solid var(--line, var(--c-divider));
}
body.single-task .win:not(.dialog) .resize-grip { display: none; }
body.single-task .win:not(.dialog) .tb-min, body.single-task .win:not(.dialog) .tb-max { display: none; }
body.single-task .win:not(.dialog) .win-body { margin: 4px; box-shadow: inset 0 0 0 1px var(--line-dim, var(--c-divider)); }

/* ============================================ 开始菜单：1995 年那种 */
.smenu {
  position: absolute; z-index: 13000; display: flex; background: var(--c-bg); color: var(--c-text);
  padding: 3px; box-shadow: var(--bevel-raised), 2px 2px 0 rgba(0,0,0,.35); min-width: 220px; user-select: none;
}
.smenu.sub { min-width: 200px; }
.smenu-banner {
  width: 26px; flex: none; background: linear-gradient(180deg, var(--c-accent), var(--c-bg-deep));
  display: flex; align-items: flex-end; justify-content: center; margin-right: 3px;
}
.smenu-banner span {
  writing-mode: vertical-rl; transform: rotate(180deg); color: var(--c-text-on-accent);
  font-weight: bold; font-size: 20px; letter-spacing: 3px; padding: 8px 0; font-family: var(--f-display);
}
.smenu-col { flex: 1; display: flex; flex-direction: column; }
.smenu-item { display: flex; align-items: center; gap: 10px; padding: 5px 24px 5px 8px; cursor: pointer; white-space: nowrap; font-size: 14px; }
.smenu-item.hot { background: var(--c-accent); color: var(--c-text-on-accent); }
.smenu-ico { width: 18px; height: 18px; flex: none; image-rendering: pixelated; text-align: center; line-height: 18px; font-size: 14px; }
.smenu-lbl { flex: 1; }
.smenu-arrow { margin-left: 12px; font-size: 11px; }
.smenu-sep { height: 0; border-top: 1px solid var(--c-shadow); border-bottom: 1px solid var(--c-highlight); margin: 3px 2px; }
.start-logo { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px;
  background: conic-gradient(from 0deg, #f00 0 25%, #0a0 0 50%, #00f 0 75%, #ff0 0); }
body.theme-laundry .start-logo { display: none; }
body.theme-cassette .smenu, body.theme-shadowrun .smenu { background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-window-border); }
body.theme-cassette .smenu-sep, body.theme-shadowrun .smenu-sep { border-color: var(--c-divider); }
body.theme-cassette .smenu-item.hot { background: var(--stripe), var(--amber); }
body.theme-laundry .smenu-banner { background: var(--file); }
body.theme-laundry .smenu-banner span { color: var(--paper-hi); }
body.theme-laundry .smenu-item.hot { background: var(--ink); color: var(--paper-hi); }

/* ============================================ 纯文本终端：没有滚动条这种东西 */
#tui *, #tui { scrollbar-width: none; }
#tui *::-webkit-scrollbar { display: none; width: 0; height: 0; }
#tui .tui-pane-body { overflow-x: hidden; }
#tui .tui-list .tui-dim { white-space: pre-wrap; }

/* ============================================ 滚动条：每套外观自己的样子
   浏览器默认那根灰条在哪套皮肤里都是穿帮。Chromium 走 ::-webkit-scrollbar，
   Firefox 走 scrollbar-color / scrollbar-width，两边都写。 */

/* Windows 3.1：16 像素宽，轨道是黑白棋盘格，滑块带立体边，两头有箭头按钮 */
body.theme-win31 * { scrollbar-width: auto; scrollbar-color: #c0c0c0 #e8e8e8; }
body.theme-win31 ::-webkit-scrollbar { width: 16px; height: 16px; }
body.theme-win31 ::-webkit-scrollbar-track {
  background-color: #c0c0c0;
  background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
  background-size: 2px 2px; background-position: 0 0, 1px 1px;
}
body.theme-win31 ::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #000000, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #808080;
}
body.theme-win31 ::-webkit-scrollbar-button:single-button {
  background: #c0c0c0; height: 16px; width: 16px;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #000000, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #808080;
}
body.theme-win31 ::-webkit-scrollbar-corner { background: #c0c0c0; }

/* 磁带未来主义：一根细磷光条，没有按钮，轨道就是黑 */
body.theme-cassette * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--phos) 55%, #000) #000; }
body.theme-cassette ::-webkit-scrollbar { width: 8px; height: 8px; }
body.theme-cassette ::-webkit-scrollbar-track { background: #000; box-shadow: inset 1px 0 0 var(--line-dim); }
body.theme-cassette ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--phos) 55%, #000); border: 1px solid #000;
}
body.theme-cassette ::-webkit-scrollbar-thumb:hover { background: var(--phos); }
body.theme-cassette ::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
body.theme-cassette ::-webkit-scrollbar-corner { background: #000; }

/* 复古未来 2060：霓虹细条，发一点光 */
body.theme-shadowrun * { scrollbar-width: thin; scrollbar-color: var(--neon) #0b0716; }
body.theme-shadowrun ::-webkit-scrollbar { width: 8px; height: 8px; }
body.theme-shadowrun ::-webkit-scrollbar-track { background: #0b0716; }
body.theme-shadowrun ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--neon) 70%, #0b0716); border-radius: 4px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--neon) 40%, transparent);
}
body.theme-shadowrun ::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
body.theme-shadowrun ::-webkit-scrollbar-corner { background: #0b0716; }

/* 洗衣房：纸上一道墨条。方角、细线、没有立体感 —— 印刷品没有立体感。 */
body.theme-laundry * { scrollbar-width: auto; scrollbar-color: var(--ink) var(--paper-lo); }
body.theme-laundry ::-webkit-scrollbar { width: 12px; height: 12px; }
body.theme-laundry ::-webkit-scrollbar-track {
  background: var(--paper-lo); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ink) 30%, transparent);
}
body.theme-laundry ::-webkit-scrollbar-thumb {
  background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--ink) 25%, transparent) 3px 4px);
}
body.theme-laundry ::-webkit-scrollbar-thumb:hover { background-color: var(--paper-hi); }
body.theme-laundry ::-webkit-scrollbar-button:single-button {
  background: var(--paper-lo); border: 1px solid var(--ink); height: 12px; width: 12px;
}
body.theme-laundry ::-webkit-scrollbar-corner { background: var(--paper-lo); }
body.theme-laundry[data-palette="nightmare"] ::-webkit-scrollbar-thumb { box-shadow: 0 0 6px color-mix(in srgb, var(--ink) 40%, transparent); }