/* ============================================================
   Lightbox UI 预览样式 (组件化版)
   规范: .claude/skills/lightbox-ui-design/SKILL.md
   约束: 300x400 / 1bpp 纯黑白 / 无灰阶无阴影无圆角 / 焦点整行反色
   ============================================================ */

:root {
  --ink: #000; --paper: #fff;
  --gap: 8px; --edge: 12px;
  --statusbar: 24px; --footer: 24px; --content: 352px;  /* 400-24-24 */
  --accent: #2f6fed;   /* 仅设备外的桌面 chrome 用(激活环), 不进设备像素 */
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   预览页外壳 (设备外, 非设备像素)
   ============================================================ */
body {
  background: #c9c9c9;
  font-family: "Noto Sans Mono CJK SC", "Sarasa Mono SC", "WenQuanYi Micro Hei Mono", "Microsoft YaHei", monospace;
  color: #222; padding: 96px 24px 80px; -webkit-font-smoothing: antialiased;
}
.page-head { max-width: 1320px; margin: 0 auto 24px; }
.page-head h1 { font-size: 22px; font-weight: 700; }
.page-head p { font-size: 13px; margin-top: 6px; color: #444; }
.legend { font-size: 12px; margin-top: 10px; color: #333; line-height: 1.7; }
.legend code { background: #fff; border: 1px solid #999; padding: 1px 4px; }

/* 顶部固定操作条 */
.helpbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 44px;
  display: flex; align-items: center; gap: 18px; padding: 0 24px;
  background: #1c1c1c; color: #eee; font-size: 13px;
}
.helpbar b { color: #fff; }
.helpbar kbd {
  background: #333; border: 1px solid #555; border-bottom-width: 2px;
  padding: 1px 6px; font-size: 12px; margin: 0 1px;
}
.helpbar .spacer { margin-left: auto; }
.helpbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.helpbar .nowactive { color: #7fffa6; }

.gallery {
  max-width: 1320px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 34px 26px; align-items: flex-start;
}
.cell { width: 300px; }
.cell .cap { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.cell .sub { font-size: 11px; color: #555; margin-bottom: 8px; min-height: 26px; line-height: 1.4; }

/* 设备相框: 承载激活蓝环, 使内部 .screen 保持纯黑白 */
.frame { width: 300px; height: 400px; border: 3px solid transparent; cursor: pointer; transition: border-color .1s; }
.frame:hover { border-color: #9bb6f0; }
.frame.active { border-color: var(--accent); }
.frame.active::after {
  content: "● 已激活 · WASD/E/Q"; position: absolute; margin-top: -3px; margin-left: -3px;
  transform: translateY(-100%); background: var(--accent); color: #fff; font-size: 11px; padding: 1px 6px; white-space: nowrap;
}
.frame { position: relative; }

/* ============================================================
   设备屏幕本体 (以下严格只用 ink/paper)
   ============================================================ */
.screen {
  width: 100%; height: 100%; background: var(--paper); color: var(--ink);
  position: relative; overflow: hidden;
  font-family: "Noto Sans Mono CJK SC", "Sarasa Mono SC", "WenQuanYi Micro Hei Mono", "Microsoft YaHei", monospace;
  font-weight: 400 !important;
}
.screen * { font-weight: 400 !important; }

/* 字号阶梯 (严格三档) */
.t24 { font-size: 24px; line-height: 32px; }
.t16 { font-size: 16px; line-height: 22px; }
.t12 { font-size: 12px; line-height: 16px; }

/* 状态栏 */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--statusbar);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--edge); border-bottom: 1px solid var(--ink); font-size: 12px;
}
.statusbar .sb-c { flex: 1; text-align: center; }
.statusbar .right { display: flex; align-items: center; gap: 6px; }
.statusbar svg { display: block; }
.batt { display: inline-flex; align-items: center; gap: 3px; }

/* 内容区 */
.content { position: absolute; top: var(--statusbar); left: 0; right: 0; height: var(--content); overflow: hidden; }
.content.full { top: 0; height: 100%; }
.pad { padding: var(--gap) var(--edge); }
.center {
  position: absolute; inset: var(--statusbar) 0 var(--footer) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 0 20px;
}

/* 底栏: 系统状态行 (左 SRAM% / 右 构建标记) */
.footer {
  position: absolute; bottom: 0; left: 0; right: 0; height: var(--footer);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--edge);
  border-top: 1px solid var(--ink); font-size: 12px;
}

/* 列表 */
.list { list-style: none; }
.list li {
  height: 44px; display: flex; align-items: center; gap: 10px;
  padding: 0 var(--edge); border-bottom: 1px solid var(--ink);
}
.list li .main { flex: 1; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li .meta { font-size: 12px; white-space: nowrap; }
.list li .col { flex: 1; min-width: 0; }
.list li.tall { height: 52px; }

/* 焦点: 整行反色 (核心决定); 图标用 currentColor 自动反白 */
.focus { background: var(--ink) !important; color: var(--paper) !important; }
.focus * { color: var(--paper) !important; }

/* 保守焦点 (验收切换): 左 8px 黑条 + 2px 黑框, 不整行反色 */
body.conservative .focus { background: var(--paper) !important; color: var(--ink) !important;
  box-shadow: inset 8px 0 0 var(--ink), inset 0 0 0 2px var(--ink); }
body.conservative .focus * { color: var(--ink) !important; }
body.conservative .g.focus { box-shadow: inset 0 0 0 3px var(--ink); }

/* 图标尺寸 */
.ico { width: 24px; height: 24px; flex: none; }
.ico-12 { width: 12px; height: 12px; } .ico-16 { width: 16px; height: 16px; }
.ico-24 { width: 24px; height: 24px; } .ico-32 { width: 32px; height: 32px; }
.ico-batt { width: 20px; height: 12px; }

/* 离散分段进度 / 单色屏进度条 */
.segs { letter-spacing: 1px; font-size: 16px; }
.prog { display: inline-block; height: 8px; border: 1px solid var(--ink); vertical-align: middle; }
.prog i { display: block; height: 100%; background: var(--ink); }

/* 网格 (launcher) */
.grid { display: grid; gap: 0; }
.grid .g {
  height: 86px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative;
}
.grid .g .gl { font-size: 12px; }
.grid .g.empty { }
.dot { position: absolute; width: 6px; height: 6px; background: var(--ink); }
.dot-r { top: 8px; right: 10px; } .dot-l { top: 8px; left: 10px; }

/* 设置: 左分组 + 右二级 */
.two-col { display: flex; height: 100%; }
.two-col .col-l { width: 84px; border-right: 1px dashed var(--ink); }
.two-col .col-r { flex: 1; }
.two-col .it {
  height: 40px; display: flex; align-items: center; padding: 0 10px;
  border-bottom: 1px solid var(--ink); font-size: 16px; justify-content: space-between; gap: 6px;
}
.two-col .col-l .cur:not(.focus) { box-shadow: inset 3px 0 0 var(--ink); }

/* 复选框 (闹钟) */
.cbx { width: 16px; height: 16px; border: 1px solid currentColor; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.cbx svg { width: 14px; height: 14px; }

/* 大字时钟占位 (示意需新增 1bpp 位图字体) */
.note-font { outline: 1px dashed #9a9a9a; outline-offset: 2px; }
.bignum { font-size: 72px; line-height: 1; letter-spacing: 1px; }

/* 当前天气行 */
.wrow { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; }

/* 对话气泡 */
.bubble { border: 1px solid var(--ink); padding: 6px 8px; font-size: 16px; max-width: 80%; margin-bottom: 8px; }
.bubble.me { margin-left: auto; } .bubble.ai { margin-right: auto; }

/* 键盘网格 */
.kbd { display: grid; grid-template-columns: repeat(8, 1fr); }
.kbd .key2 {
  height: 30px; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 14px;
}
.kbd .key2:nth-child(8n) { border-right: none; }

/* 滚动位置点 (替代滚动条) */
.scrolldot { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
.scrolldot i { width: 4px; height: 4px; background: var(--ink); display: block; }
.scrolldot i.off { background: var(--paper); border: 1px solid var(--ink); }

/* 二维码点阵占位 (实机由 OverlayQR 写主 buffer) */
.qr {
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 4px, var(--paper) 4px 8px),
    repeating-linear-gradient(0deg, var(--ink) 0 4px, var(--paper) 4px 8px);
  background-blend-mode: difference; border: 4px solid var(--paper); outline: 1px solid var(--ink);
}

/* Toast 底部提示条 */
.toast {
  position: absolute; left: 0; right: 0; bottom: var(--footer); height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--ink); background: var(--paper); font-size: 12px;
}

/* AI 浮层 / 弹窗卡片 */
.overlay {
  position: absolute; left: 4px; right: 4px; bottom: calc(var(--footer) + 4px);
  border: 1px solid var(--ink); background: var(--paper); padding: 6px 8px;
}
.card {
  position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--ink); background: var(--paper); padding: 12px;
}
.card .btns { display: flex; gap: 10px; margin-top: 12px; }
.card .btn { flex: 1; text-align: center; border: 1px solid var(--ink); padding: 4px 0; font-size: 16px; }
.card .btn.focus { border-width: 2px; }