/* ═══════════════════════════════════════════════════════════════════════════
   皮肤 · 像素风（8-bit 游戏窗口）—— 深空蓝底 + 金币黄强调 + 像素字体标题
   + 硬边双线框（外黑 3px / 内亮 2px）+ 抖动网格与 CRT 扫描线

   令牌结构与装饰手法对齐 web/lib/skins/arc/skin.css（站点的第二套皮肤），
   按同一批真实类名重写 7 个页面的公共外壳与面板。**不改任何布局/结构**，
   只换色、质感、纹理与形状（圆角全部归零、阴影全部换成实心偏移块）。

   约定（见 06-皮肤系统）：
   - 所有规则以 [data-skin="pixel"] 开头（不写死 :root），弹窗里的迷你预览把
     data-skin 挂在 div 上也能复用同一份令牌与同一批装饰规则。
   - mark.css 的令牌挂在 body 上（body 自身声明一定赢从 html 继承的值），所以下面
     额外给 body 一次覆盖；特异度 [data-skin] body = (0,1,1) 压得过 body (0,0,1)。
   - 像素字体只覆盖拉丁字母/数字（Press Start 2P 拉丁子集，本目录 font.woff2），
     中文自动回退系统字体 —— 游戏 UI 里「像素英文 + 像素渲染中文」的混合观感。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 像素字体：只随本皮肤下发（相对 skin.css 解析到 /lib/skins/pixel/font.woff2） */
@font-face {
  font-family: "Press Start 2P";
  src: url("font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────── 令牌 ─────────────────────────── */
[data-skin="pixel"] {
  /* 底色 / 面板 / 文字 / 描边：深空蓝 + 近白薰衣草字 */
  --bg:          #0d0e21;
  --panel:       #1b1d42;
  --panel-2:     #232552;
  --panel-3:     #2c2f66;
  --ink:         #eef0ff;
  --muted:       #a6abdd;      /* 对 #1b1d42 ≈ 7.3:1 */
  --faint:       #8489c2;      /* 对 #1b1d42 ≈ 5.1:1 */
  --line:        #3d427e;
  --line-2:      #52579c;

  /* 强调色：金币黄（站点有金币概念，正好点题） */
  --accent:      #ffd23f;
  --accent-2:    #f5a300;
  --accent-soft: #3a3413;      /* 深金底：选中态铺底，配近白字 */
  --on-accent:   #241c00;      /* 压在金币黄上的深棕黑：≈ 11:1 */
  /* 两道平色拼出的「硬币高光」，拒绝平滑渐变 */
  --accent-grad: linear-gradient(180deg, #ffd23f 0 50%, #f5a300 50% 100%);

  /* 外壳：侧栏/顶栏比面板再深半档，拉开层次 */
  --shell-bg:    #101128;
  --shell-2:     #1a1c40;
  --shell-ink:   #eef0ff;
  --shell-muted: #9ba0d6;      /* 对 #101128 ≈ 6.4:1 */
  --shell-faint: #7b80b8;      /* ≈ 4.7:1 */

  /* 内容装饰 */
  --cover-grad:   linear-gradient(180deg, #3b4ed8 0 55%, #232d7a 55% 100%);
  --cover-grad-2: linear-gradient(180deg, #d43a3a 0 55%, #7a2323 55% 100%);
  --track:        #0f112e;
  --row-hover:    #262a58;
  --scrollbar:    #3d427e;
  --sec-title:    #eef0ff;
  --sec-faint:    #8489c2;

  /* 语义色：FC 绿 / FC 红 */
  --ok:          #3ddc84;
  --danger:      #e43b44;
  --danger-soft: #452028;

  /* 形状：像素没有圆角 */
  --r-xl:   0;
  --r-lg:   0;
  --r-md:   0;
  --r-mark: 0;
  --r-pill: 0;

  /* 阴影：RPG 窗口的「外黑框 + 内亮线 + 实心偏移块」，全部无模糊 */
  --shadow:        6px 6px 0 rgba(0, 0, 0, .38), 0 0 0 3px #05061a, inset 0 0 0 2px var(--line);
  --shadow-sm:     4px 4px 0 rgba(0, 0, 0, .32), 0 0 0 3px #05061a, inset 0 0 0 2px var(--line);
  --shadow-hover:  8px 8px 0 rgba(0, 0, 0, .42), 0 0 0 3px #05061a, inset 0 0 0 2px var(--accent);
  --shadow-accent: 4px 4px 0 rgba(0, 0, 0, .45), 0 0 0 3px #05061a, inset 0 0 0 2px rgba(255, 255, 255, .38);

  /* 字体：标题像素体（中文回退系统黑体），正文保持系统字体保证可读 */
  --font-head: "Press Start 2P", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", monospace;
  --font-body: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

/* mark 阅读页的令牌挂在 body 上 —— 必须再覆盖一次，否则读到的还是浅色那一套 */
[data-skin="pixel"] body,
[data-skin="pixel"] body[data-theme] {
  --canvas:   #0d0e21;
  --panel:    #1b1d42;
  --panel-2:  #232552;
  --paper:    #1f2148;
  --ink:      #eef0ff;
  --ink-soft: #a6abdd;
  --line:     #3d427e;
  --sel:      #ffd23f;
  --lv-alpha: .22;
  --r-xl:     0;
  --r-lg:     0;
  --r-pill:   0;
  --shadow-sm: 4px 4px 0 rgba(0, 0, 0, .32), 0 0 0 3px #05061a, inset 0 0 0 2px #3d427e;
  --font-ui: "Press Start 2P", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 全局小件：金色选中块、金色光标、像素焦点框 */
[data-skin="pixel"] ::selection { background: var(--accent); color: var(--on-accent); }
[data-skin="pixel"] input,
[data-skin="pixel"] textarea { caret-color: var(--accent); }
[data-skin="pixel"] :focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* ─────────────── 页面底色：抖动网格 + 角落辉光 ─────────────── */

/* 底色落在根元素（html）上；body 透明，好让抖动层画在「卡片之下、底色之上」。 */
[data-skin="pixel"] { background-color: var(--bg); }
[data-skin="pixel"] body { background: transparent; color: var(--ink); }

/* 8px 棋盘抖动（3.5% 白）+ 左上角一团靛蓝辉光，z-index:-1 压在所有卡片之下 */
[data-skin="pixel"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(60% 46% at 12% 0%, rgba(59, 78, 216, .16), transparent 70%),
    repeating-conic-gradient(rgba(255, 255, 255, .035) 0 25%, transparent 0 50%);
  background-size: auto, 8px 8px;
}

/* CRT 扫描线铺在最上层（1px 黑线每 3px 一根，pointer-events 关掉；
   弹窗走 <dialog> 顶层，不受影响） */
[data-skin="pixel"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, .10) 0 1px,
    transparent 1px 3px);
}

/* ─────────────────────────── 外壳 ─────────────────────────── */
[data-skin="pixel"] .sidebar,
[data-skin="pixel"] .topbar {
  background: var(--shell-bg);
  color: var(--shell-ink);
  box-shadow: var(--shadow);
}

[data-skin="pixel"] .brand { color: var(--shell-ink); }
/* 站名英文用像素体（brand 文字是拉丁字母，正好全套展示） */
[data-skin="pixel"] .brand-text b,
[data-skin="pixel"] .brand-text strong {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .04em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
}
[data-skin="pixel"] .brand-mark {
  background: var(--accent-grad);
  color: var(--on-accent);
  border-radius: 0;
  box-shadow: var(--shadow-accent);
  font-family: var(--font-head);
}
[data-skin="pixel"] .brand-text em { color: var(--shell-faint); }

[data-skin="pixel"] .rail-item { color: var(--shell-muted); font-weight: 600; }
[data-skin="pixel"] .rail-item:hover { background: var(--shell-2); color: var(--shell-ink); }
[data-skin="pixel"] .rail-item.is-active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
[data-skin="pixel"] .rail-cta {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
[data-skin="pixel"] .rail-cta:hover { box-shadow: var(--shadow-hover); }

[data-skin="pixel"] .sidebar-foot {
  background: var(--shell-2);
  color: var(--shell-faint);
  border-radius: 0;
}
/* 状态灯：像素风格的「闪烁光标」 */
[data-skin="pixel"] .sidebar-foot .status-dot { border-radius: 0; animation: px-blink 1.2s steps(2, start) infinite; }
@keyframes px-blink { 50% { opacity: .25; } }

/* 侧栏里的小灰公告 / 小灰人设（lib/notice.css、lib/persona.css 用面板色，这里压成外壳色） */
[data-skin="pixel"] .sidebar .notice-block { background: var(--shell-2); color: var(--shell-muted); }
[data-skin="pixel"] .sidebar .notice-title,
[data-skin="pixel"] .sidebar .notice-msg { color: var(--shell-ink); }
[data-skin="pixel"] .sidebar .notice-title::before { background: var(--accent); border-radius: 0; }
[data-skin="pixel"] .sidebar .notice-time { color: var(--shell-faint); }
[data-skin="pixel"] .sidebar .notice-emoji {
  background: var(--shell-bg);
  box-shadow: inset 0 0 0 2px var(--line);
  border-radius: 0;
}
[data-skin="pixel"] .sidebar .notice-emoji.is-mine { background: var(--accent); color: var(--on-accent); }
[data-skin="pixel"] .sidebar .persona-area,
[data-skin="pixel"] .sidebar .persona-btn { background: var(--shell-2); color: var(--shell-ink); }

/* ─────────────────── 标题：像素体 + 金色引导方块 ─────────────────── */
[data-skin="pixel"] .topbar-title h1 {
  font-family: var(--font-head);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--shell-ink);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
}
[data-skin="pixel"] .topbar-title p { color: var(--shell-faint); }

[data-skin="pixel"] .card-head h2,
[data-skin="pixel"] .sec-head h2,
[data-skin="pixel"] .q-title {
  position: relative;
  font-family: var(--font-head);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--accent);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
}
/* 标题前面那颗金色小方块（游戏菜单的「▶ 光标」感） */
[data-skin="pixel"] .card-head h2::before,
[data-skin="pixel"] .sec-head h2::before,
[data-skin="pixel"] .q-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: baseline;
  background: var(--accent-grad);
  box-shadow: 0 0 0 2px #05061a;
}

/* ─────────────────────────── 顶栏控件 ─────────────────────────── */
[data-skin="pixel"] .search {
  background: var(--track);
  color: var(--shell-faint);
  border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--line);
}
[data-skin="pixel"] .search input { color: var(--shell-ink); }
[data-skin="pixel"] .search input::placeholder { color: var(--shell-faint); }
[data-skin="pixel"] .search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
[data-skin="pixel"] .user-chip { background: var(--shell-2); border-radius: 0; box-shadow: inset 0 0 0 2px var(--line); }
[data-skin="pixel"] .user-chip .uname { color: var(--shell-ink); }
[data-skin="pixel"] .coins { background: var(--track); color: var(--accent); box-shadow: inset 0 0 0 2px var(--line); border-radius: 0; }
[data-skin="pixel"] .logout { color: var(--shell-muted); }
[data-skin="pixel"] .logout:hover { background: var(--shell-2); color: var(--shell-ink); }
[data-skin="pixel"] .icon-btn,
[data-skin="pixel"] .topbar .tag,
[data-skin="pixel"] .mode-chip {
  background: var(--shell-2);
  color: var(--shell-ink);
  border: 2px solid #05061a;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--line);
}
[data-skin="pixel"] .icon-btn:hover { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 2px rgba(255,255,255,.38); }
[data-skin="pixel"] .back:hover { background: var(--shell-2); }
[data-skin="pixel"] .topbar .offline-chip { background: var(--accent); color: var(--on-accent); border: 2px solid #05061a; }

/* ─────────────────────── 面板：深蓝窗口 + 硬边双线框 ─────────────────────── */
[data-skin="pixel"] .card,
[data-skin="pixel"] .col,
[data-skin="pixel"] .queue,
[data-skin="pixel"] .brief,
[data-skin="pixel"] .col-skeleton,
[data-skin="pixel"] .paper,
[data-skin="pixel"] .sheet,
[data-skin="pixel"] .modal,
[data-skin="pixel"] .ask-card,
[data-skin="pixel"] .conv-list,
[data-skin="pixel"] .conv-menu,
[data-skin="pixel"] .cm-drawer,
[data-skin="pixel"] .composer-box {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  border-radius: 0;
}
/* mark 阅读区的分栏不是卡片，别给它套硬影 */
[data-skin="pixel"] .paper .col,
[data-skin="pixel"] .stage .col {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* purify 队列卡片：左侧那道 4px 竖条改成金色 */
[data-skin="pixel"] .queue .card { border-left-color: var(--accent); }
[data-skin="pixel"] .lib-row { border-bottom-color: var(--line); }
[data-skin="pixel"] .lib-row:hover { background: var(--row-hover); }
[data-skin="pixel"] .modal-mask { background: rgba(5, 6, 20, .72); }
[data-skin="pixel"] .detail {
  background: var(--track);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border-radius: 0;
}

/* ─────────────────────────── 按钮：可按下的像素块 ─────────────────────────── */
[data-skin="pixel"] .primary-btn,
[data-skin="pixel"] .run-btn,
[data-skin="pixel"] .upload-btn,
[data-skin="pixel"] .send-btn,
[data-skin="pixel"] .ask-go,
[data-skin="pixel"] .cm-send,
[data-skin="pixel"] .persona-save,
[data-skin="pixel"] .sbtn.primary {
  color: var(--on-accent);
  background: var(--accent-grad);
  box-shadow: var(--shadow-accent);
  border-radius: 0;
  font-weight: 700;
}
[data-skin="pixel"] .primary-btn:hover,
[data-skin="pixel"] .run-btn:hover,
[data-skin="pixel"] .upload-btn:hover,
[data-skin="pixel"] .send-btn:hover { box-shadow: var(--shadow-hover); }
/* 按下：整块向右下挪 3px、吃掉偏移影 —— 红白机按键手感 */
[data-skin="pixel"] .primary-btn:active,
[data-skin="pixel"] .run-btn:active,
[data-skin="pixel"] .upload-btn:active,
[data-skin="pixel"] .send-btn:active,
[data-skin="pixel"] .ask-go:active,
[data-skin="pixel"] .cm-send:active,
[data-skin="pixel"] .persona-save:active,
[data-skin="pixel"] .rail-cta:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 3px #05061a, inset 0 0 0 2px rgba(255, 255, 255, .38);
}

/* ─────────────────── 芯片 / 标签 / 进度条 ─────────────────── */
[data-skin="pixel"] .chip,
[data-skin="pixel"] .pill,
[data-skin="pixel"] .book-tag,
[data-skin="pixel"] .model-chip,
[data-skin="pixel"] .src-human,
[data-skin="pixel"] .src-aigc,
[data-skin="pixel"] .col-series,
[data-skin="pixel"] .me-rank,
[data-skin="pixel"] .ask-badge,
[data-skin="pixel"] .cm-badge {
  border: 2px solid #05061a;
  border-radius: 0;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line);
}
[data-skin="pixel"] .chip.is-on {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
/* 选中的模型卡片**不铺金底**：卡里有一整行 11px 小字，金底会把可读性吃光。
   改用「深金底 + 2px 金框 + 金勾」表达选中，字全部保持近白。 */
[data-skin="pixel"] .model-chip.is-on {
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--accent);
}
[data-skin="pixel"] .model-chip.is-on .chip-meta { color: var(--muted); }
[data-skin="pixel"] .chip-tick { background: var(--panel-2); border-radius: 0; }
[data-skin="pixel"] .model-chip.is-on .chip-tick { background: var(--accent); color: var(--on-accent); }

/* 进度条：轨道深底 + 金色阶梯条纹填充（8px 一阶，拒绝平滑） */
[data-skin="pixel"] .prog,
[data-skin="pixel"] .dist,
[data-skin="pixel"] .dist-empty,
[data-skin="pixel"] .progress,
[data-skin="pixel"] .bar,
[data-skin="pixel"] .gpu-bar {
  background: var(--track);
  border-radius: 0;
}
[data-skin="pixel"] .gpu-bar { border: 2px solid #05061a; box-shadow: inset 0 0 0 2px var(--line); }
[data-skin="pixel"] .gpu-bar i {
  background: var(--accent);
  background-image: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, .22) 0 2px,
    transparent 2px 8px);
}

/* 头像 / 封面全部方块化 + 像素化渲染 */
[data-skin="pixel"] .avatar,
[data-skin="pixel"] .who-avatar,
[data-skin="pixel"] .me-avatar,
[data-skin="pixel"] .msg-avatar,
[data-skin="pixel"] .cm-av,
[data-skin="pixel"] .chat-empty-mark {
  border-radius: 0;
  box-shadow: 0 0 0 2px #05061a, inset 0 0 0 1px var(--line);
}
[data-skin="pixel"] img,
[data-skin="pixel"] .book-cover,
[data-skin="pixel"] .avatar,
[data-skin="pixel"] .me-avatar { image-rendering: pixelated; }

/* ─────────────────────────── 提示条 / 滚动条 ─────────────────────────── */
[data-skin="pixel"] .toast {
  background: var(--track);
  color: var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}
[data-skin="pixel"] .content::-webkit-scrollbar-thumb,
[data-skin="pixel"] .modal-body::-webkit-scrollbar-thumb,
[data-skin="pixel"] .single::-webkit-scrollbar-thumb,
[data-skin="pixel"] .sheet-body::-webkit-scrollbar-thumb,
[data-skin="pixel"] .msg-scroll::-webkit-scrollbar-thumb,
[data-skin="pixel"] .ask-card::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 0;
}

/* ─────────────────── 各页专有 ─────────────────── */
/* 书库：封面 / 来源标签 / 合集徽章 */
[data-skin="pixel"] .book-cover { background: var(--cover-grad); color: var(--ink); border-radius: 0; }
[data-skin="pixel"] .book-cover.is-aigc { background: var(--cover-grad-2); }
[data-skin="pixel"] .src-human { background: #16294e; color: #8db8ff; }
[data-skin="pixel"] .src-aigc { background: #452028; color: #ff9d8a; }
[data-skin="pixel"] .anth-badge {
  background: var(--panel-3);
  color: var(--ink);
  border: 2px solid #05061a;
  border-radius: 0;
  font-weight: 700;
}

/* 数据筛选：标题里的计数用浅金字（像素标题是金色的，计数别压成深色） */
[data-skin="pixel"] .q-title .q-total { color: var(--muted); }

/* 评测场：三色分栏标题 / 句子底色（深底上的半透明 tint） */
[data-skin="pixel"] .col-head { background: var(--panel-2); border-bottom-color: var(--line); }
[data-skin="pixel"] .sent { color: var(--ink); }
[data-skin="pixel"] .sent.tone-good { background: rgba(61, 220, 132, .16); }
[data-skin="pixel"] .sent.tone-bad { background: rgba(228, 59, 68, .18); }
[data-skin="pixel"] .vd-tag { background: var(--accent); color: var(--on-accent); border-radius: 0; }

/* 提交条与「逐句结果」直接坐在页面底色上（不在卡片里）：--ink/--muted/--faint
   都是配深蓝面板的浅色，这里语义刚好一致；小灰总评改成一颗深色窗口。 */
[data-skin="pixel"] .verdict:has(.vd-row) {
  background: var(--panel);
  color: var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  padding: 7px 11px;
}
[data-skin="pixel"] .run-status,
[data-skin="pixel"] .results-head h2 { color: var(--shell-ink); }
[data-skin="pixel"] .run-cost,
[data-skin="pixel"] .vd-idle,
[data-skin="pixel"] .vd-wait { color: var(--shell-faint); }
[data-skin="pixel"] .run-status.is-err { color: #ff8d93; }
/* 通用兜底：不在卡片里的小字（.card-hint 之类）也用外壳色 */
[data-skin="pixel"] .card-hint:not(.card *),
[data-skin="pixel"] .note:not(.card *) { color: var(--shell-faint); }

/* 个人中心：数据磁贴 / 金币（金币当然是金色的） */
[data-skin="pixel"] .tile { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--line); border-radius: 0; }
[data-skin="pixel"] .tile.is-hero { background: var(--accent-grad); color: var(--on-accent); }
[data-skin="pixel"] .coin-pill {
  background: var(--accent-grad);
  color: var(--on-accent);
  border: 2px solid #05061a;
  border-radius: 0;
  box-shadow: none;
  font-weight: 700;
}
[data-skin="pixel"] .dev-note { background: var(--panel-3); color: var(--accent); box-shadow: inset 0 0 0 2px var(--line); border-radius: 0; }

/* 小灰聊天：用户气泡换成金块 */
[data-skin="pixel"] .msg-user .bubble { background: var(--accent); color: var(--on-accent); border-radius: 0; }
[data-skin="pixel"] .msg-user .msg-avatar { background: var(--accent-2); }
[data-skin="pixel"] .msg-ava .bubble, [data-skin="pixel"] .bubble { border-radius: 0; }
[data-skin="pixel"] .offline-bar { background: var(--accent); color: var(--on-accent); border-bottom-color: #05061a; }

/* 标注页：选中句 / 目录 / 设置面板 */
[data-skin="pixel"] .sline.cur,
[data-skin="pixel"] .toc-list button.cur { background: var(--accent-soft); }
[data-skin="pixel"] .sline:hover,
[data-skin="pixel"] .toc-list button:hover { background: var(--row-hover); }
[data-skin="pixel"] .s { box-shadow: inset 0 0 0 1px var(--line-2); }
[data-skin="pixel"] .seg,
[data-skin="pixel"] .stat,
[data-skin="pixel"] .ask-status,
[data-skin="pixel"] .ask-advice,
[data-skin="pixel"] .ask-sent { background: var(--panel-2); }
[data-skin="pixel"] .sheet .field:has(#themeSwatches) { display: none; }