/* 小游戏工厂 — 界面样式
   原则：字要大、按钮要大、颜色对比强。使用者不写代码，界面不能让人猜。
   皮肤：Pixel Forge · 赛博街机终端（深色科技 × 像素游戏化）
     底 #080b10 + 24px 网格 · 面板 #111720 · 描边 #1e2a38 · 正文 #e6edf3
     次要字 #8b949e · 极淡字 #5a6472 · 主色(霓虹青)#2de2e6/#7ef2f5
     强调橙 #ff9350（资源编辑/主行动）· 紫 #a78bfa（次级装饰）
     绿 #4ade80 · 黄 #fbbf24 · 红 #ff5c5c
   形状：小圆角(4~6px) + 硬边偏移阴影(3px 3px 0) + 主按钮切角 —— 像素风三件套
   历史：配色原为照既创（livecreate.cn）扒的真实 CSS，2026-02 换成本套皮肤。 */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  /* ===== Pixel Forge 皮肤令牌 ===== */
  --bg: #080b10;            /* 近黑蓝底 */
  --panel: #111720;         /* 面板 / 卡片 */
  --panel-2: #18202b;       /* 次级面板（内嵌块、代码块） */
  --panel-3: #0d1319;       /* 列体 / 深一档 */
  --line: #1e2a38;          /* 描边 */
  --line-soft: rgba(255,255,255,.06);
  --text: #e6edf3;
  --muted: #8b949e;
  --faint: #5a6472;
  --accent: #2de2e6;        /* 霓虹青：选中 / 主按钮 / 进度 */
  --accent-2: #7ef2f5;      /* 亮青 */
  --accent-dark: #12a5ad;   /* 深青：渐变尾 */
  --accent-dim: rgba(45,226,230,.12);
  --orange: #ff9350;        /* 强调橙：资源编辑 / 主行动 */
  --orange-2: #ffb06b;
  --purple: #a78bfa;        /* 次级装饰紫 */
  --purple-2: #8b5cf6;
  --ok: #4ade80;
  --warn: #fbbf24;
  --danger: #ff5c5c;
  --sel: rgba(45,226,230,.10);
  /* 像素风三件套：直角 + 硬边偏移阴影 + 切角（强化版：圆角一律归零） */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-xs: 0px;
  --notch: 14px;            /* 切角边长（原 8px 太小，看不出来） */
  --hard: 4px 4px 0 rgba(0,0,0,.72);      /* 硬边阴影（像素风标志） */
  --hard-sm: 3px 3px 0 rgba(0,0,0,.6);
  --grid: rgba(45,226,230,.07);           /* 背景像素网格 */
  --glow-2: 0 0 26px rgba(45,226,230,.55);/* 强辉光 */
  --glow: 0 0 18px rgba(45,226,230,.35);  /* 青色辉光 */
  --mono: "JetBrains Mono", Consolas, "Cascadia Mono", Menlo, monospace;
  --side: 96px;             /* 侧边栏宽（这个不能动：测试锁 + 布局各处的基准） */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 底：霓虹青 + 像素紫两道径向光晕 + 近黑蓝纯色底 */
  background:
    radial-gradient(circle at top right, rgba(45,226,230,.10), transparent 26%),
    radial-gradient(circle at bottom left, rgba(167,139,250,.07), transparent 22%),
    var(--bg);
  color: var(--text);
  font-size: 14px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 24px 像素网格：铺在所有内容之下，不吃点击 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
}

/* 顶边那条青色光带也一并去掉（反馈：扫描光效太闹） */

/* 滚动条也走像素风 */
* { scrollbar-width: thin; scrollbar-color: #22303f transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #22303f;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: #2f4256; background-clip: content-box; }

/* ---------------------------------------------------------- 顶栏 */

header {
  height: 60px;
  /* 既创没有实色顶栏：内容是直接铺在带光晕的底上的。这里留一条分隔线就够。 */
  background: transparent;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  flex-shrink: 0;
}

.logo { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.logo span { color: var(--accent); }

header select {
  height: 36px;
  min-width: 240px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
  background: #080b10;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease;
}
header select:hover { border-color: #3a4756; }

.spacer { flex: 1; }

/* ---------------------------------------------------------- 按钮 */

button {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #c2ccd6;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
button:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.09); color: var(--text); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* 主行动按钮：既创的「生成」是紫渐变，登录是蓝渐变 —— 我们统一用蓝渐变 */
button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
  font-weight: 500;
}
button.primary:hover {
  background: linear-gradient(135deg, var(--accent-2), #7ef2f5);
  border-color: transparent; color: #fff;
  box-shadow: 0 0 20px rgba(45,226,230,.4);
}

button.big { height: 46px; padding: 0 30px; font-size: 16px; }
button.ghost { border-color: transparent; background: transparent; color: var(--muted); }
button.ghost:hover { color: var(--text); background: rgba(255,255,255,.08); border-color: transparent; }
button.danger { color: var(--danger); border-color: rgba(255,92,92,.4); }
button.danger:hover { background: rgba(255,92,92,.12); border-color: rgba(255,92,92,.6); color: var(--danger); }

/* ---------------------------------------------------------- 主区 */

main { flex: 1; display: flex; min-height: 0; }

.col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}
.col + .col { border-left: 1px solid var(--line); }

.col-head {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  font-weight: 600;
  overflow: hidden;
}
/* 头部里的东西一律不许被压扁（否则「图片分类」会竖排成两行） */
.col-head > * { flex-shrink: 0; }
.col-head .spacer { flex: 1 1 auto; min-width: 0; }
.col-head .col-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.col-head .count {
  color: var(--muted); font-weight: 400; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#col-slots { min-width: 0; }

.col-body { flex: 1; overflow: auto; position: relative; }

/* ---------------------------------------------------------- 槽位列表 */

.slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.slot:hover { background: rgba(255,255,255,.03); }
.slot.active { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.slot.changed { background: rgba(255,138,61,.06); }
.slot.changed.active { background: var(--sel); }

.slot-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--line);
  background:
    linear-gradient(45deg, #111720 25%, transparent 25%, transparent 75%, #111720 75%),
    linear-gradient(45deg, #111720 25%, transparent 25%, transparent 75%, #111720 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.slot-thumb img { max-width: 100%; max-height: 100%; display: block; }
.slot-thumb .arrow {
  position: absolute; right: -1px; bottom: -1px;
  background: var(--accent); color: #fff; font-size: 10px;
  padding: 1px 4px; border-radius: 4px 0 6px 0;
}

.slot-info { flex: 1; min-width: 0; }
.slot-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot-meta { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.slot-meta .tag {
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 11px;
}
.slot-meta .tag.warn { background: rgba(251,191,36,.14); color: var(--warn); }
.slot-meta .tag.dyn { background: rgba(74,222,128,.14); color: var(--ok); }

.slot-actions { display: flex; gap: 6px; flex-shrink: 0; }
.slot-actions button { height: 30px; padding: 0 10px; font-size: 12px; }

/* ---------------------------------------------------------- 素材库 */

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.crumbs a { color: var(--accent); cursor: pointer; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 14px;
}

/* 素材库的缩略图卡（数值照既创 .thumb-item / .thumb-img / .thumb-name） */
.card {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px; border-radius: 5px;
  border: 2px solid transparent; background: rgba(255,255,255,.04);
  cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.card:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.card.on { border-color: var(--orange); background: rgba(255,147,80,.16); }

.card-img {
  width: 100%; height: 70px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; background: rgba(255,255,255,.06);
  overflow: hidden;
}
.card-img img { max-width: 100%; max-height: 100%; display: block; }
.card-img .folder { font-size: 32px; }

.card-name {
  margin-top: 6px; width: 100%;
  font-size: 10px; line-height: 1.2; text-align: center;
  color: #c2ccd6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}

/* ---------------------------------------------------------- 底栏 */

footer {
  height: 66px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  flex-shrink: 0;
}
footer > button { flex-shrink: 0; white-space: nowrap; }
footer .status { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
footer .status b { color: var(--text); }
footer .status .err { color: var(--danger); }
footer .status .ok { color: var(--ok); }

/* 换肤页的批量操作条 —— 照既创 editor-section-actions / panel-toolbar：
   它在「编辑区列内顶部」，既创全站没有页面级底部条。
   （出包页 / 上架页的按钮多，暂时还留在 bottom footer 里。） */
.col-tools {
  height: 50px; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: #111720;
  border-bottom: 1px solid var(--line);
}
.col-tools > .status {
  flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-tools > .status b { color: var(--text); }
.col-tools > .status .err { color: var(--danger); }
.col-tools > .status .ok { color: var(--ok); }
.col-tools > button { flex-shrink: 0; white-space: nowrap; height: 30px; padding: 0 13px; font-size: 12.5px; }

/* ---------------------------------------------------------- 弹层 */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(4,7,12,.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 30px;
}
.modal.show { display: flex; }

.modal-box {
  background: var(--panel);
  border-radius: 4px;
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-box.narrow { max-width: 480px; }

.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.modal-body { padding: 20px; overflow: auto; flex: 1; }
.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.field input[type=text], .field input[type=password], .field select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.7; }

.log {
  background: #0a1016;
  color: #c2ccd6;
  border-radius: 4px;
  padding: 14px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.9;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.log .y { color: #4ade80; }
.log .n { color: #ff7a7a; }
.log .w { color: #fbbf24; }
.log .d { color: #5a6472; }

/* 试穿预览 */

#tryon {
  position: fixed;
  right: 22px;
  bottom: 86px;
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  display: none;
  z-index: 60;
  overflow: hidden;
}
#tryon.show { display: block; }
#tryon .t-head {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
#tryon .t-head .x { margin-left: auto; cursor: pointer; color: var(--muted); padding: 0 4px; }
#tryon .t-body { padding: 12px; }
#tryon .t-pair { display: flex; gap: 10px; align-items: flex-start; }
#tryon .t-cell { flex: 1; text-align: center; }
#tryon .t-cell .cap { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
#tryon .t-cell .imgwrap {
  border: 1px solid var(--line);
  border-radius: 4px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(45deg, #111720 25%, transparent 25%, transparent 75%, #111720 75%),
    linear-gradient(45deg, #111720 25%, transparent 25%, transparent 75%, #111720 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
#tryon .t-cell img { max-width: 100%; max-height: 150px; display: block; }
#tryon .t-foot { padding: 0 12px 12px; font-size: 12px; color: var(--muted); line-height: 1.7; }

/* 缩放模式选择 */

.modes { display: flex; gap: 8px; flex-wrap: wrap; }
.modes button.on { border-color: var(--accent); background: var(--sel); color: var(--accent); font-weight: 600; }

/* 滚动条 */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #22303f; border-radius: 0; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #2f4256; }
::-webkit-scrollbar-track { background: transparent; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(10px);
  background: #1f2733;
  color: #fff;
  padding: 11px 22px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  transition: .22s;
  pointer-events: none;
  z-index: 200;
  max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--danger); }
.toast.ok { background: var(--ok); }

/* 分段控件（照既创：深底 + 细描边 + 圆角 10px，选中项蓝底） */
.tabs {
  flex-shrink: 0; align-self: flex-start;
  margin: 0 30px 16px;
  display: inline-flex; gap: 0;
  background: #080b10; border: 1px solid var(--line);
  border-radius: 4px; padding: 3px;
}
.tabs[hidden] { display: none !important; }
.tab {
  border: 0; background: transparent; color: var(--muted);
  height: 32px; padding: 0 18px; font-size: 13px; border-radius: 4px; font-weight: 500;
  transition: all .15s ease;
}
.tab:hover { background: rgba(255,255,255,.05); color: var(--text); }
.tab.on { background: rgba(45,226,230,.16); color: #e6edf3; font-weight: 600; }

/* ---------------------------------------------------------- 出包页 */
#footShip .buildbar {
  width: 120px; height: 6px; border-radius: 2px;
  background: rgba(255,255,255,.10); overflow: hidden; flex-shrink: 0;
}
#footShip .buildbar i {
  display: block; height: 100%; width: 0;
  background: var(--accent); transition: width .4s;
}
#footShip .buildbar.done i { background: var(--ok); }
#footShip .buildbar.fail i { background: var(--danger); }

/* 参数表单 */
.param {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 13px 14px; margin-bottom: 12px; background: var(--panel);
}
.param > label {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.param > label .req { color: var(--danger); margin-left: 4px; }
.param > label .tag {
  font-weight: 400; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; margin-left: 6px;
}
.param input[type=text] {
  width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 4px;
  padding: 0 11px; font-size: 13px; font-family: inherit; color: var(--text);
  background: #080b10;
}
.param input[type=text]:focus { outline: 0; border-color: var(--accent); background: #080b10; box-shadow: 0 0 0 3px rgba(45,226,230,.15); }
.param input.bad { border-color: var(--danger); background: #331619; }
.param .ph { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.65; }
.param .ph code {
  background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 3px;
  font-family: Consolas, Menlo, monospace; font-size: 11.5px;
}
.param .now { font-size: 12px; margin-top: 7px; color: var(--muted); }
.param .now b { color: var(--text); font-weight: 600; }
.param .now .same { color: var(--ok); }
.param .now .diff { color: var(--warn); }
.param textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 9px 11px;
  font-family: inherit; font-size: 13px; resize: vertical; line-height: 1.7;
}
.param textarea:focus { outline: 0; border-color: var(--accent); }

/* 合规报告 */
.r-group { font-size: 12px; color: var(--muted); margin: 14px 4px 8px; font-weight: 600; }
.r-group:first-child { margin-top: 2px; }
.r {
  border: 1px solid var(--line); border-left-width: 4px; border-radius: 4px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--panel);
}
.r.pass { border-left-color: var(--ok); }
.r.fail { border-left-color: var(--danger); background: rgba(255,92,92,.06); }
.r.warn { border-left-color: var(--warn); background: rgba(251,191,36,.06); }
.r.skip { border-left-color: #3a4756; opacity: .72; }
.r.error { border-left-color: #8b5cf6; background: rgba(255,92,92,.10); }
.r-top { display: flex; align-items: baseline; gap: 8px; }
.r-sev {
  font-size: 11px; font-weight: 700; border-radius: 3px; padding: 1px 5px;
  color: #fff; background: #5a6472; flex-shrink: 0;
}
.r.pass .r-sev { background: var(--ok); }
.r.fail .r-sev { background: var(--danger); }
.r.warn .r-sev { background: var(--warn); }
.r-title { font-size: 13px; font-weight: 600; flex: 1; }
.r-what { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.65; }
.r-detail {
  font-size: 12px; margin-top: 7px; color: var(--text); line-height: 1.7;
  background: rgba(255,255,255,.04); border-radius: 4px; padding: 7px 9px;
  font-family: Consolas, Menlo, monospace; word-break: break-all;
  max-height: 150px; overflow: auto; white-space: pre-wrap;
}
.r.fail .r-detail { background: rgba(255,92,92,.10); }

/* 构建进度弹窗 */
.stage { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.stage.ok { color: var(--ok); }
.stage.fail { color: var(--danger); }
#buildLog { max-height: 220px; }
#mBuild .modal-box { max-width: 720px; }

/* ================= 上架材料 ================= */

/* 表单组标题 */
.rel-sec {
  font-size: 12px; color: var(--muted); font-weight: 600;
  margin: 16px 4px 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.rel-sec:first-child { margin-top: 2px; }

/* 字数计数器 */
.rel-count { font-size: 12px; margin-top: 7px; display: flex; align-items: center; gap: 8px; }
.rel-count .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.rel-count.ok .n { color: var(--ok); }
.rel-count.warn .n { color: var(--warn); }
.rel-count.fail .n { color: var(--danger); }
.rel-count .tip { color: var(--muted); }

/* 交付清单 */
.d-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 12px 13px; margin: 0 4px 10px;
}
.d-card h4 { font-size: 13px; margin: 0 0 9px; font-weight: 600; }
.d-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.d-row .k { color: var(--muted); min-width: 76px; }
.d-row .v { flex: 1; word-break: break-all; }
.d-row .v.mono { font-family: Consolas, Menlo, monospace; }
.d-badge {
  font-size: 11px; padding: 1px 7px; border-radius: 6px; font-weight: 600;
  background: rgba(255,255,255,.06); color: var(--muted); white-space: nowrap;
}
.d-badge.ok { background: rgba(74,222,128,.14); color: var(--ok); }
.d-badge.warn { background: rgba(251,191,36,.14); color: var(--warn); }
.d-badge.fail { background: rgba(255,92,92,.14); color: var(--danger); }

/* 提交前自查清单 */
.d-check { display: flex; gap: 8px; font-size: 12.5px; padding: 4px 0; line-height: 1.6; }
.d-check .box { flex: none; color: var(--muted); }
.d-note { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 8px; }
.d-note.show { padding: 8px 10px; border-radius: 4px; background: rgba(255,255,255,.04); color: var(--text); }
.d-note.ok { background: rgba(74,222,128,.14); color: var(--ok); }
.d-note.fail { background: rgba(255,92,92,.12); color: var(--danger); }

/* ============================================================ 账号 */

/* 顶栏右上角的用户 */
/* 个人中心入口：照既创的 .profile-section / .profile-dot / .profile-nickname（竖排居中） */
.userchip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border-radius: 0; cursor: pointer;
  background: transparent; border: 0;
  width: 100%; max-width: none; flex: none;
}
.userchip:hover { background: transparent; border-color: transparent; }
.userchip .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2de2e6, #12a5ad);
  color: #111318; font-size: 13px; font-weight: 700;
  transition: box-shadow .18s ease;
}
.userchip:hover .avatar { box-shadow: 0 0 0 3px rgba(45,226,230,.25); }
.userchip .uname {
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,.72);
  max-width: 70px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.userchip:hover .uname { color: #fff; }
.userchip .role { font-size: 10px; line-height: 1.25; color: #7ef2f5; flex: none; }
.userchip .role.owner { color: #7ef2f5; font-weight: 700; }

/* 账号行 */
.acc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 12px; background: #111720;
}
.acc-row.off { opacity: .6; background: #080b10; }
.acc-row > .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: var(--text); font-size: 16px; font-weight: 700;
}
.acc-main { flex: 1; min-width: 0; }
.acc-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acc-sub { font-size: 12px; color: var(--muted); margin-top: 4px; word-break: break-all; }
.acc-ops { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.acc-ops button { font-size: 12px; padding: 5px 10px; }
.acc-ops button.danger { color: var(--danger); border-color: rgba(255,92,92,.45); }
.acc-ops button.danger:hover { background: rgba(255,92,92,.14); }

/* 登录页 */
/* ---- 登录页：数值全照既创 login-Czpq8308.css ---- */
body.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px; position: relative;
}
.login-container {
  width: 100%; max-width: 420px; background: #111720;
  border: 1px solid #1e2a38; border-radius: 6px; padding: 48px 40px;
}
.login-header {
  display: flex; flex-direction: column; align-items: center; margin-bottom: 32px;
}
.logo { width: 64px; height: 64px; margin-bottom: 16px; }
.logo-mark {
  width: 64px; height: 64px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 28px; font-weight: 700;
  box-shadow: 0 10px 28px rgba(45,226,230,.35);
}
.logo-text { font-size: 24px; font-weight: 600; color: #e6edf3; margin-bottom: 8px; }
.login-subtitle { font-size: 14px; color: #8b949e; text-align: center; }

.login-tabs {
  display: flex; gap: 0; background: #080b10; border: 1px solid #1e2a38;
  border-radius: 4px; padding: 3px; margin-bottom: 24px;
}
.login-tabs[hidden] { display: none !important; }
.login-tabs .tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 34px; border: 0; border-radius: 4px; background: transparent;
  color: #8b949e; font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .15s ease;
}
.login-tabs .tab.on { background: rgba(45,226,230,.16); color: #e6edf3; font-weight: 600; }

.login-form { display: flex; flex-direction: column; gap: 20px; }
.login-form .form-item { width: 100%; }
#setupOnly { display: flex; flex-direction: column; gap: 20px; }
#setupOnly[hidden] { display: none !important; }

/* 既创的输入壳：图标 + 无边框 input，聚焦时整壳发光 */
.input-wrapper {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: #080b10; border: 1px solid #1e2a38; border-radius: 4px;
  transition: all .15s ease; cursor: text;
}
.input-wrapper:focus-within { border-color: #2de2e6; box-shadow: 0 0 0 3px rgba(45,226,230,.1); }
.input-icon { width: 20px; height: 20px; color: #5a6472; flex-shrink: 0; display: flex; }
.input-icon svg { width: 100%; height: 100%; }
.form-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #e6edf3; font-size: 15px; height: 24px; font-family: inherit;
}
.form-input::placeholder { color: #5a6472; }

.login-btn {
  width: 100%; padding: 14px; border: none; border-radius: 4px;
  background: linear-gradient(135deg, #2de2e6, #2de2e6); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  transition: all .15s ease; margin-top: 8px;
}
.login-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(45,226,230,.4); }
.login-btn:disabled { opacity: .7; cursor: not-allowed; }

.login-err {
  font-size: 13px; color: #ff5c5c; line-height: 1.6;
  max-height: 0; overflow: hidden; transition: max-height .15s;
}
.login-err.show {
  max-height: 130px; background: rgba(255,92,92,.12);
  border: 1px solid rgba(255,92,92,.28);
  padding: 10px 12px; border-radius: 4px;
}
.login-note {
  font-size: 12px; color: #8b949e; line-height: 1.7;
  max-height: 0; overflow: hidden;
}
.login-note.show {
  max-height: 280px; background: rgba(45,226,230,.08);
  border: 1px solid rgba(45,226,230,.2);
  padding: 10px 12px; border-radius: 4px;
}
.login-note code, .login-err code {
  font-family: Consolas, Menlo, monospace; background: rgba(255,255,255,.06);
  padding: 1px 5px; border-radius: 3px; font-size: 11px; color: #7ef2f5;
}
/* 空的时候别占位（否则 flex 的 gap 会多留 40px） */
.login-err:not(.show), .login-note:not(.show) { display: none; }

.login-footer {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 20px;
}
.footer-link { font-size: 13px; color: #2de2e6; cursor: pointer; transition: color .15s ease; }
.footer-link:hover { color: #7ef2f5; }
.footer-divider { color: #1e2a38; }

@media (max-width: 480px) {
  .login-container { padding: 32px 24px; }
  .logo, .logo-mark { width: 56px; height: 56px; }
  .logo-text { font-size: 20px; }
}

/* ==========================================================================
   左侧边栏外壳 + 暗色覆盖（照既创 livecreate.cn 的信息架构）
   ========================================================================== */

body.app { flex-direction: row; }

/* ---- 左侧边栏：数值全照既创 Sidebar-CqXTmUFo.css ----
   宽 96px、竖排（图标 24px 在上 / 文字 11px 在下）、背景透明、
   border-radius:0、选中只靠颜色变白 + 图标上移 1px */
#sidebar {
  width: var(--side);
  flex-shrink: 0;
  height: 100vh;
  background: transparent;
}

.sb-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 16px 10px 14px;
  background: transparent;
}

.sb-logo {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 24px;
  cursor: pointer;
}
/* 既创这里是一个 SVG 字标，我们用一枚 30px 的方形字标顶上 */
.sb-mark {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 6px 16px rgba(45,226,230,.35);
}

/* 既创把导航往下推 150px（顶上是 logo + 大留白）。小屏幕上收一点，别把入口挤出去 */
.sb-nav {
  width: 100%;
  flex: 1;
  min-height: 0;
  margin-top: clamp(24px, 11vh, 150px);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

.sb-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px;
  margin-bottom: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: all .18s ease;
}
.sb-item:hover, .sb-item.on { color: #fff; }
.sb-item.on .sb-ico { transform: translateY(-1px); }

.sb-ico {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: inherit;
  transition: transform .18s ease, color .18s ease;
}
.sb-txt { display: block; }

/* 未读角标 —— Pixel Forge 用橙色（设计稿里消息中心那个「3」是橙的） */
.nav-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 4px;
  background: var(--orange); color: #241203;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 2px 6px rgba(255,147,80,.45);
}
.nav-badge[hidden] { display: none !important; }

.sb-foot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sb-foot .userchip { width: 100%; }

/* 内容区：既创的内页没有顶栏，内容直接铺在 .main-content 上（margin-left:96px + padding） */
.shell {
  flex: 1;
  min-width: 0;
  margin-left: var(--side);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 页头 —— 照既创 .page-header / .page-title / .page-subtitle */
.page-header {
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 26px 30px 14px;
}
.header-left { min-width: 0; }
.header-line { display: flex; align-items: center; gap: 10px; }
/* 工作台的「← 返回」（照既创 editor-header 的返回键） */
.back-btn {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0;
  border-radius: 4px; font-size: 15px; line-height: 1;
}
.page-title { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.2; }
.page-subtitle { margin-top: 7px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

#projectSel {
  height: 38px; min-width: 200px; max-width: 280px;
  padding: 0 12px;
  background: #111720; color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 14px; font-family: inherit;
  transition: border-color .15s ease;
}
#projectSel:hover { border-color: #3a4756; }
#projectSel:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,226,230,.15); }

/* ---------------------------------------------------------- 暗色覆盖 */

.col-head { background: #111720; border-bottom-color: var(--line); }
.col-body { background: #080b10; }

.slot { border-bottom-color: var(--line); }
.slot:hover { background: #111720; }
.slot.on { background: var(--sel); }
.slot.changed { background: rgba(255,138,61,.08); }

.slot-thumb, .lib-thumb {
  background-image:
    linear-gradient(45deg, #18202b 25%, transparent 25%, transparent 75%, #18202b 75%),
    linear-gradient(45deg, #18202b 25%, transparent 25%, transparent 75%, #18202b 75%);
}

.slot-meta .tag { background: #18202b; }
.slot-meta .tag.warn { background: #3a2d12; color: var(--warn); }
.slot-meta .tag.dyn { background: #12301c; color: var(--ok); }
.slot-meta .tag.ok { background: #12301c; color: var(--ok); }

.lib-head { background: #111720; border-bottom-color: var(--line); }
.lib-item { border-bottom-color: var(--line); }
.lib-item:hover { background: #111720; }
.lib-item.on { background: var(--sel); }

.crumbs { background: #111720; border-bottom-color: var(--line); }
.crumbs button { background: transparent; }

/* 顶栏三个子页 = 既创的分段控件 */

.modal-box { background: #111720; border: 1px solid var(--line); }
.modal-head { border-bottom-color: var(--line); }
.modal-foot { border-top-color: var(--line); }

.param input[type=text] { background: #080b10; color: var(--text); border-color: #1e2a38; }
.param input[type=text]:focus { background: #080b10; }
.param input.bad { background: #331619; }
.param .now { background: #18202b; color: var(--muted); }

.r { background: #111720; }
.r.fail { background: #201416; }
.r.warn { background: #1f1a10; }
.r.error { background: #1a1526; }
.r-detail { background: #080b10; }
.r.fail .r-detail { background: #2a1418; }
.r-sev { color: #fff; }

.d-badge { background: #18202b; }
.d-badge.ok { background: #12301c; color: var(--ok); }
.d-badge.warn { background: #3a2d12; color: var(--warn); }
.d-badge.fail { background: #3d1a1e; color: var(--danger); }

.d-note.show { background: #18202b; }
.d-note.ok { background: #12301c; color: var(--ok); }
.d-note.fail { background: #3d1a1e; color: var(--danger); }

.acc-row { background: #111720; border-color: var(--line); }
.acc-row.off { background: #080b10; }
.acc-ico { background: #18202b; }
.acc-ops button.danger { border-color: #5c2a2a; }
.acc-ops button.danger:hover { background: #3d1a1e; }

.userchip:hover { background: transparent; border-color: transparent; }

::-webkit-scrollbar-thumb { background: #1e2a38; border-color: var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a4756; }

/* ---------------------------------------------------------- 新增页面 */

/* ============================================================
   游戏大厅 —— 照既创 recommend 页：筛选卡 + 模板卡片墙 + 分页
   ============================================================ */

.filter-card {
  flex-shrink: 0;
  margin: 0 30px 18px;
  padding: 16px 18px;
  background: rgba(17,23,32,.96);
  border: 1px solid #1e2a38;
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 14px;
}

.search-box {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px;
  background: #080b10; border: 1px solid var(--line);
  border-radius: 5px; transition: border-color .15s ease;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,226,230,.1); }
.search-ico { font-size: 15px; opacity: .55; }
.search-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--text); font-size: 14px; font-family: inherit;
}
.search-input::placeholder { color: var(--faint); }

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  height: 34px; padding: 0 16px;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid transparent; border-radius: 999px;
  color: #c2ccd6; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.pill:hover { background: rgba(255,255,255,.1); color: var(--text); }
.pill.on { background: rgba(255,147,80,.14); border-color: rgba(255,147,80,.45); color: var(--orange); }
/* 平台那排既创用紫色 */
.pill-row.plat .pill.on { background: rgba(139,92,246,.18); border-color: rgba(139,92,246,.5); color: #c4b5fd; }

.template-grid {
  flex: 1; overflow: auto;
  padding: 0 30px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-content: start;
}
@media (max-width: 1240px) { .template-grid { grid-template-columns: 1fr; } }

.template-card {
  display: flex; gap: 18px;
  padding: 16px;
  background: rgba(17,23,32,.96);
  border: 1px solid #1e2a38;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.template-card:hover { border-color: rgba(255,147,80,.45); transform: translateY(-2px); box-shadow: 0 22px 48px rgba(0,0,0,.34); }

.template-cover {
  position: relative; flex-shrink: 0;
  width: 132px; height: 176px;
  border-radius: 5px; overflow: hidden;
  background: #060a0e; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.template-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-empty { font-size: 12px; color: var(--faint); text-align: center; padding: 8px; line-height: 1.6; }
.cover-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 9px; border-radius: 4px;
  background: rgba(8,11,16,.85); border: 1px solid rgba(255,255,255,.1);
  color: #e6edf3; font-size: 11px; font-weight: 600;
}

.template-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.template-head { display: flex; align-items: flex-start; gap: 10px; }
.template-name { flex: 1; min-width: 0; font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.3; }
.template-platform {
  flex-shrink: 0; padding: 3px 10px; border-radius: 4px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: #c2ccd6; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.template-summary { font-size: 13px; line-height: 1.7; color: var(--muted); }
.platform-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.platform-tag { padding: 3px 9px; border-radius: 4px; background: rgba(255,255,255,.07); color: #c2ccd6; font-size: 12px; }
.platform-tag.style { background: rgba(139,92,246,.16); color: #c4b5fd; }

.template-ops { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 116px; }
.quick-btn {
  height: 62px; border: 0; border-radius: 5px;
  background: linear-gradient(135deg, #ffb06b, #ff8a3d);
  color: #3a1e08; font-size: 15px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  box-shadow: 0 8px 22px rgba(255,138,61,.28);
}
.quick-btn small { font-size: 11px; font-weight: 500; opacity: .8; }
.quick-btn:hover { box-shadow: 0 10px 26px rgba(255,138,61,.42); filter: brightness(1.05); }
.ghost-btn {
  height: 54px; border: 1px solid var(--line); border-radius: 5px;
  background: rgba(255,255,255,.04); color: #c2ccd6;
  font-size: 14px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ghost-btn small { font-size: 11px; font-weight: 400; opacity: .65; }
.ghost-btn:hover { background: rgba(255,255,255,.09); color: var(--text); border-color: rgba(255,255,255,.2); }

.pagination-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 30px 22px;
}
.pagination-bar:empty { display: none; }
.page-num {
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 0; background: transparent; border-radius: 4px;
  color: var(--muted); font-size: 14px; font-weight: 500;
}
.page-num:hover { background: rgba(255,255,255,.06); color: var(--text); }
.page-num.on { color: var(--orange); font-weight: 700; box-shadow: inset 0 -2px 0 var(--orange); }

.assets-list, .msg-list { flex: 1; overflow: auto; padding: 12px 24px 28px; }

.asset-row, .msg-row {
  background: rgba(17,23,32,.96);
  border: 1px solid #1e2a38;
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.asset-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.asset-name { font-size: 15px; font-weight: 600; }
.asset-path { font-size: 11px; color: var(--muted); word-break: break-all; }
.asset-ops { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.asset-ops button { height: 30px; font-size: 12px; padding: 0 11px; }

.msg-row { display: flex; gap: 11px; align-items: flex-start; }
.msg-ico {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: #18202b; color: var(--muted);
}
.msg-row.ok .msg-ico { background: #12301c; color: var(--ok); }
.msg-row.bad .msg-ico { background: #3d1a1e; color: var(--danger); }
.msg-main { flex: 1; min-width: 0; }
.msg-t { font-size: 13px; margin-bottom: 4px; }
.msg-d { font-size: 12px; color: var(--muted); line-height: 1.6; word-break: break-word; }
.msg-time { font-size: 11px; color: #3a4756; flex-shrink: 0; }

.set-grid {
  flex: 1;
  overflow: auto;
  padding: 16px 24px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  align-content: start;
}

/* 设置页 / 游戏大厅的卡片（和素材库缩略图卡区分开）*/
.set-grid .card { background: rgba(17,23,32,.96); border: 1px solid #1e2a38; border-radius: 6px; padding: 15px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.24); }
.card-t { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.card-d { font-size: 13px; color: var(--muted); line-height: 1.7; min-height: 40px; word-break: break-all; }
.card-ops { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.card-ops button { height: 32px; font-size: 13px; }

.empty-big {
  text-align: center; color: var(--muted); padding: 60px 20px; font-size: 14px; line-height: 2;
}
.empty-big .ico { font-size: 34px; color: #1e2a38; display: block; margin-bottom: 10px; }

/* 登录页的样式在上面（照既创 login-Czpq8308.css）*/
.login-err.show { background: #3d1a1e; }
.login-note.show { background: #18202b; }
.login-foot code { background: #18202b; }
.login-tabs { background: #080b10; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   素材页改版（照既创「图片编辑器」）：
   左 = 图片分类菜单，右 = 可展开的图片行（原图 / 效果图 对比），
   素材库 = 从右边滑出的抽屉
   ============================================================ */

#viewSkin { position: relative; }
#col-cats { flex: 0 0 238px; border-right: 1px solid var(--line); }
#col-slots { flex: 1; min-width: 0; }

/* ---- 左：分类菜单（数值照既创 .category-menu / .menu-item）---- */
.cat-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; cursor: pointer;
  border-left: 3px solid transparent;
  flex-shrink: 0;
  transition: all .15s ease;
}
.cat-item:hover { background: rgba(255,255,255,.03); }
.cat-item.on { background: rgba(255,138,61,.08); border-left-color: var(--orange); }
.cat-item.full .cat-sub { color: var(--ok); }

.cat-icon {
  width: 30px; height: 30px; border-radius: 4px; flex-shrink: 0;
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  transition: all .15s ease;
}
.cat-item.on .cat-icon { background: rgba(255,138,61,.15); }

.cat-badge {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0;
}

.cat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cat-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-sub { font-size: 11.5px; color: var(--muted); }

/* ---- 右：可展开的图片行（数值照既创 .image-list / .image-list-item）---- */
#slotList { display: flex; flex-direction: column; gap: 12px; padding: 14px; }

/* 关键：列表是 flex 纵向容器，而 .slot-row 带 overflow:hidden（min-height:auto 失效），
   不写 flex-shrink:0 的话几十行会被一起压成一条条细线。 */
#slotList > .slot-row { flex-shrink: 0; }

.slot-row {
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); overflow: hidden;
  transition: all .2s ease;
}
.slot-row:hover { border-color: #3a4756; }
/* 正在替换的那一行 → 既创的 .selected（橙色描边） */
.slot-row.active {
  border-color: rgba(255,147,80,.55); background: rgba(255,147,80,.05);
  box-shadow: inset 0 0 0 1px rgba(255,147,80,.1);
}
/* 已经换过的行 → 既创的 .modified（橙色淡描边） */
.slot-row.changed { border-color: rgba(255,138,61,.35); box-shadow: inset 0 0 0 1px rgba(255,138,61,.08); }

.sr-head {
  display: flex; align-items: center; gap: 14px;
  min-height: 84px; padding: 14px 18px;
  cursor: pointer; user-select: none;
}

.sr-idx {
  width: 20px; flex-shrink: 0; text-align: center;
  font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums;
}

.sr-thumb {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 4px; border: 1px solid var(--line);
  background-color: rgba(255,255,255,.03);
  background-image:
    linear-gradient(45deg, #18202b 25%, transparent 25%, transparent 75%, #18202b 75%),
    linear-gradient(45deg, #18202b 25%, transparent 25%, transparent 75%, #18202b 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-thumb.audio { font-size: 22px; }

.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sr-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sr-file {
  font-size: 12px; color: var(--muted); font-weight: 400;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-meta {
  font-size: 12px; color: var(--muted);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.sr-meta .tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--muted);
}
.sr-meta .tag.warn { background: rgba(251,191,36,.15); color: var(--warn); }
.sr-meta .tag.dyn { background: rgba(74,222,128,.15); color: var(--ok); }

.sr-ops { display: flex; gap: 6px; flex-shrink: 0; }
.sr-ops button { height: 32px; padding: 0 12px; font-size: 12.5px; }

/* 展开区：原图 / 效果图 双卡（照既创 .list-item-detail / .detail-compare / .compare-card）*/
.sr-body { padding: 0 18px 18px; border-top: 1px solid var(--line); animation: fadeIn .25s ease; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 16px; }
.cmp-card {
  position: relative; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; border-radius: 5px;
  background: #060a0e; border: 1px solid var(--line);
  overflow: hidden;
}
.cmp-card:hover { border-color: #1e2a38; }
.cmp-t {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(8,11,16,.85); border: 1px solid rgba(255,255,255,.08);
  color: #c2ccd6; font-size: 12px; font-weight: 600; pointer-events: none;
}
.cmp-img {
  width: 100%; min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  padding: 30px 12px 12px;
}
.cmp-img img { max-width: 100%; max-height: 220px; object-fit: contain; display: block; }
.cmp-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; color: var(--faint); font-size: 13px; text-align: center;
}
.cmp-empty span { color: #1e2a38; font-size: 30px; line-height: 1; }
.cmp-foot { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ---- 素材库抽屉 ---- */
.drawer-mask {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(1,4,9,.55);
  opacity: 0; transition: opacity .18s ease-out;
}
.drawer-mask.show { opacity: 1; }

.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(620px, 62%);
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
  transform: translateX(24px); opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.drawer.show { transform: translateX(0); opacity: 1; }

.drawer-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.drawer-t { font-size: 14px; font-weight: 600; color: var(--text); }
.drawer-sub { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.drawer-sub b { color: var(--accent); font-weight: 600; }
/* 抽屉里的批量导入近路：一张张点太慢的时候的出口 */
.drawer-bulk {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.drawer-bulk .ghost { height: 24px; font-size: 12px; }

/* 抽屉里的素材网格稍微小一点 */
.drawer .lib-grid { padding: 12px; gap: 10px; }
.drawer .card { padding: 6px; }
.drawer .crumbs { padding: 8px 14px; }
.card-sub { font-size: 11px; color: var(--danger); margin-top: 2px; }
.card.gone { opacity: .5; cursor: default; }

/* ---------- 新建游戏：点母版卡片「用它做一款」就直接建，不再有向导弹窗 ---------- */
.modal-box.wide { width: min(720px, 94vw); }

/* 窄屏就把分类收窄 */
@media (max-width: 1180px) {
  #col-cats { flex: 0 0 184px; }
  .drawer { width: 74%; }
}

/* ============================================================
   出包页顶部的流水线条（照既创那根流程条）
   七个步骤：换肤 → 写参数 → 构建 → 补产物 → 合规检查 → 出材料 → 打提审包
   ============================================================ */
#viewShip { flex-direction: column; }
#viewShip .flow-wrap {
  flex: 0 0 auto;
  background: #080b10;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px 12px;
}
#viewShip .ship-cols { flex: 1; display: flex; min-height: 0; }

.flow { display: flex; align-items: flex-start; }
.flow-step {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* 连接线：从本步圆点右缘拉到下一步圆点左缘 */
.flow-step::after {
  content: '';
  position: absolute;
  top: 12px;
  left: calc(50% + 15px);
  right: calc(-50% + 15px);
  height: 2px;
  background: var(--line);
}
.flow-step:last-child::after { display: none; }
.flow-step.ok::after { background: rgba(74,222,128, 0.45); }
.flow-step.fail::after { background: rgba(255,92,92, 0.45); }

.flow-dot {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: #18202b;
  color: var(--muted);
  border: 2px solid #1e2a38;
  transition: all 0.15s ease-out;
}
.flow-name { font-size: 12px; color: var(--muted); line-height: 1.3; white-space: nowrap; }
.flow-detail {
  font-size: 11px;
  color: #5a6472;
  line-height: 1.35;
  text-align: center;
  max-width: 150px;
  word-break: break-all;
  min-height: 15px;
}

.flow-step.ok .flow-dot { background: rgba(74,222,128, 0.15); border-color: var(--ok); color: var(--ok); }
.flow-step.ok .flow-name { color: var(--text); }
.flow-step.fail .flow-dot { background: rgba(255,92,92, 0.15); border-color: var(--danger); color: var(--danger); }
.flow-step.fail .flow-name { color: var(--danger); }
.flow-step.run .flow-dot {
  background: rgba(45,226,230, 0.18);
  border-color: var(--accent);
  color: var(--accent);
  animation: flowPulse 1.1s ease-in-out infinite;
}
.flow-step.run .flow-name { color: var(--accent); }
.flow-step.run .flow-detail { color: var(--accent); }
.flow-step.skip .flow-dot { opacity: 0.45; }
.flow-step.skip .flow-name { color: #5a6472; }
@keyframes flowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,226,230, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(45,226,230, 0); }
}

@media (max-width: 1180px) {
  .flow-name { font-size: 11px; }
  .flow-detail { display: none; }
}

/* ---- 素材门禁的提示（既创那四条 + 我们补的两条）---- */
.cmp-gate { display:flex; flex-direction:column; gap:8px; margin-top:12px; padding:12px 14px;
  border-radius: 4px; font-size:13px; line-height:1.6; }
.cmp-gate b { font-size:13px; }
.cmp-gate.bad { background:rgba(255,92,92,.10); border:1px solid rgba(255,92,92,.35); color:#ffb4ae; }
.cmp-gate.warn { background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.32); color:#e3b341; }
.cmp-gate button.mini { align-self:flex-start; height:28px; padding:0 12px; font-size:12px; }
.warn-text { color: var(--warn); }
.tag.bad { background: rgba(255,92,92,.15); color: var(--danger); }

/* ---- 素材规则弹窗 ---- */
.rules-list { display:flex; flex-direction:column; gap:10px; }
.rule-row { padding:12px 14px; border-radius: 5px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); }
.rule-row.bytedance { border-left:3px solid var(--accent); }
.rule-t { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text); }
.rule-from { font-size:11px; font-weight:500; padding:2px 8px; border-radius:999px;
  background:rgba(45,226,230,.14); color:var(--accent-2); }
.rule-from.ours { background:rgba(255,147,80,.14); color:var(--orange); }
.rule-d { margin-top:5px; font-size:12.5px; line-height:1.7; color:var(--muted); }
.rule-tip { margin-top:4px; padding:12px 14px; border-radius: 4px; font-size:12.5px; line-height:1.8;
  color:var(--muted); background:rgba(255,255,255,.03); border:1px dashed var(--line); }

/* ============================================================
   出图单弹窗
   ============================================================ */

.order-intro {
  padding: 13px 15px; margin-bottom: 16px; border-radius: 5px;
  font-size: 13px; line-height: 1.85; color: #c2ccd6;
  background: rgba(45,226,230,.10); border: 1px solid rgba(45,226,230,.30);
}
.order-intro b { color: #7ef2f5; }

.order-stat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.order-stat b { font-size: 22px; font-weight: 700; color: var(--orange); margin-right: 4px; }
.order-stat i {
  font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted);
}
.order-stat i.hot { background: rgba(255,147,80,.12); border-color: rgba(255,147,80,.32); color: var(--orange); }
.order-stat .empty { margin: 0; padding: 0; }

.order-sec {
  padding: 14px 16px; margin-bottom: 12px; border-radius: 5px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.order-sec-t { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.order-sec-d { font-size: 13px; line-height: 1.75; color: var(--muted); }
.order-sec-d code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 3px; color: #7ef2f5; font-size: 12px; }
.order-ops { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.order-ops button { height: 34px; font-size: 13px; }

/* 出图单·去掉边缘水印（裁边） */
.order-wm {
  margin-top: 12px; padding: 11px 13px; border-radius: 4px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.order-wm-on { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text); }
.order-wm-on input { width: 15px; height: 15px; cursor: pointer; accent-color: #2de2e6; }
.order-wm-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.order-wm-lb { font-size: 12.5px; color: var(--muted); }
.order-wm-row input {
  width: 132px; height: 30px; padding: 0 9px; font-size: 13px; border-radius: 4px;
  background: #080b10; color: var(--text); border: 1px solid var(--line);
}
.order-wm-row input:focus { outline: none; border-color: #2de2e6; }
.order-wm-tip { margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.order-wm-tip b { color: var(--text); }
.order-wm-tip code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 3px; color: #7ef2f5; font-size: 12px; }

.order-result {
  margin-top: 4px; padding: 14px 16px; border-radius: 5px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.8;
}
.order-ok { color: var(--ok); font-weight: 600; }
.order-bad { color: var(--danger); font-weight: 600; }
.order-path {
  margin-top: 8px; padding: 8px 10px; border-radius: 4px;
  background: rgba(0,0,0,.35); color: #7ef2f5; font-size: 12px;
  word-break: break-all; font-family: ui-monospace, Consolas, monospace;
}
.order-hint { margin-top: 10px; font-size: 12.5px; line-height: 1.85; color: var(--muted); }
.order-hint b { color: var(--text); }
.order-hint code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 3px; color: #7ef2f5; font-size: 12px; }
.order-sub { margin: 14px 0 8px; font-size: 12.5px; color: var(--warn); }

.order-list { margin-top: 10px; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.order-list > * { flex-shrink: 0; }
.oi {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 9px; border-radius: 4px; background: rgba(255,255,255,.03);
  font-size: 12px; line-height: 1.5;
}
.oi .ok-i { color: var(--ok); font-weight: 700; }
.oi .no-i { color: var(--danger); font-weight: 700; }
.oi code { color: #c2ccd6; background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 3px; word-break: break-all; }
.oi .arw { color: var(--faint); }
.oi em { font-style: normal; color: #7ef2f5; }
.oi .tg { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; }
.oi .why { color: var(--warn); font-size: 11.5px; flex: 1; min-width: 0; }
.oi.more { color: var(--faint); justify-content: center; }
.order-list.skip .oi { background: rgba(255,92,92,.06); }

/* ================================================================
   六步流水线
   第 ① 步 提示词 / 第 ④ 步 必接能力 / 第 ⑥ 步 自检报告
   ================================================================ */

/* ---- 步骤条上的打勾圆点 ---- */
.tab .st {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #1e2a38; margin-right: 7px; vertical-align: 1px;
  transition: background .15s ease;
}
.tab .st.ok { background: var(--ok); }
.tab.on .st { background: #5a6472; }
.tab.on .st.ok { background: var(--ok); }

/* ---- 第 ① 步：提示词设置 ---- */
.pf-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pf-row > label { width: 44px; flex-shrink: 0; font-size: 12.5px; color: var(--muted); }
.pf-row select {
  flex: 1; min-width: 0; height: 32px; border-radius: 4px;
  background: #080b10; color: var(--text); border: 1px solid var(--line);
  padding: 0 9px; font-size: 13px;
}
.pf-desc { font-size: 12px; color: var(--faint); line-height: 1.6; margin: 4px 0 12px; }
/* 「这套风格主题是从哪来的」—— 左侧一道竖线，跟普通说明文字区分开 */
.pf-from { border-left: 2px solid rgba(45,226,230,.45); padding-left: 9px; margin: -4px 0 12px; color: var(--muted); }
.pf-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin: 12px 0; cursor: pointer; }
.pf-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.pf-global { margin-top: 12px; padding: 9px 11px; border-radius: 4px; background: rgba(45,226,230,.07); border: 1px solid rgba(45,226,230,.2); font-size: 12px; }
.pf-global b { display: block; color: var(--accent-2); margin-bottom: 4px; font-size: 11.5px; }
.pf-global div { color: #c2ccd6; line-height: 1.65; }
.pf-global.neg { background: rgba(255,92,92,.06); border-color: rgba(255,92,92,.2); }
.pf-global.neg b { color: var(--danger); }
/* 「重新分析」—— 后端照母版工程自动认画风，这里给个手动重算的入口 */
.pf-pin { margin: 2px 0 8px; padding: 0 12px; height: 30px; font-size: 12px; color: var(--accent-2);
  background: rgba(45,226,230,.08); border: 1px solid rgba(45,226,230,.35); cursor: pointer; }
.pf-pin:hover:not(:disabled) { background: rgba(45,226,230,.16); box-shadow: var(--hard-sm); }
.pf-pin:disabled { opacity: .55; cursor: default; }
/* 自动分析的依据：一条一行列出来，可核查、可推翻 */
.pf-why { margin: -4px 0 10px; padding: 0 0 0 2px; font-size: 12px; line-height: 1.9; color: var(--faint); }

/* ---- 第 ① 步：提示词卡片 ---- */
.pgroup { margin-bottom: 18px; }
.pgroup-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.pgroup-head .count { font-weight: 400; color: var(--faint); font-size: 11.5px; }
.pcard {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); padding: 11px 12px; margin-bottom: 8px;
}
.pc-head { display: flex; align-items: flex-start; gap: 10px; }
.pc-thumb {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 4px;
  background: #080b10; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 17px; color: var(--faint);
}
.pc-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pc-main { flex: 1; min-width: 0; }
.pc-name { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; word-break: break-all; }
.pc-no { font-variant-numeric: tabular-nums; color: var(--accent-2); font-weight: 600; }
.pc-meta { margin-top: 4px; font-size: 11.5px; color: var(--faint); display: flex; gap: 10px; flex-wrap: wrap; }
.pc-copy { flex-shrink: 0; }
.pc-prompt {
  margin-top: 9px; padding: 9px 10px; border-radius: 4px;
  background: #080b10; border: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.75; color: #c2ccd6;
  white-space: pre-wrap; word-break: break-word; user-select: text;
}
.pc-foot { margin-top: 8px; font-size: 11.5px; color: var(--faint); display: flex; gap: 12px; flex-wrap: wrap; }
.pc-foot b { color: var(--accent-2); font-weight: 600; }
.pc-tip { margin-top: 6px; font-size: 11.5px; color: var(--warn); line-height: 1.6; }
.tag.ok { background: rgba(74,222,128,.15); color: var(--ok); }
.tag.ai { background: rgba(167,139,250,.18); color: #c4b5fd; }

/* ---- 第 ④ 步：能力清单 ---- */
.arow {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent; margin-bottom: 5px;
  background: rgba(255,255,255,.03);
}
.arow:hover { background: rgba(255,255,255,.06); }
.arow.done { background: rgba(74,222,128,.06); }
.arow.focus { border-color: var(--accent); background: var(--sel); }
.a-check { width: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.a-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.a-dot { width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.a-dot.ok { background: rgba(74,222,128,.16); color: var(--ok); }
.a-dot.manual { background: rgba(251,191,36,.16); color: var(--warn); font-size: 10px; }
.a-main { flex: 1; min-width: 0; }
.a-name { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a-meta { margin-top: 3px; font-size: 11px; color: var(--faint); word-break: break-all; }
.a-arrow { color: var(--faint); flex-shrink: 0; }

.a-block { margin-bottom: 14px; padding: 11px 12px; border-radius: 4px; background: rgba(255,255,255,.03); border-left: 3px solid var(--line); }
.a-block.ok { border-left-color: var(--ok); background: rgba(74,222,128,.06); }
.a-block.err { border-left-color: var(--danger); background: rgba(255,92,92,.06); }
.a-block.warn { border-left-color: var(--warn); background: rgba(251,191,36,.06); }
.a-block > b { font-size: 12.5px; color: var(--text); }
.a-ul { list-style: none; margin: 7px 0 0; padding: 0; }
.a-ul li { font-size: 12px; color: #c2ccd6; line-height: 1.7; padding-left: 12px; position: relative; }
.a-ul li::before { content: '·'; position: absolute; left: 2px; color: var(--faint); }
.a-tip { font-size: 11.5px; color: var(--faint); line-height: 1.65; margin-top: 2px; }
.a-file { margin-left: 8px; color: var(--accent-2); font-size: 11px; word-break: break-all; }
.a-block code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 3px; color: #ff8f8f; font-size: 11.5px; }

/* ---- 第 ⑥ 步：自检报告 ---- */
.sc-head { padding: 13px 14px; border-radius: 4px; margin-bottom: 15px; border: 1px solid var(--line); }
.sc-head.ok { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.35); }
.sc-head.err { background: rgba(255,92,92,.07); border-color: rgba(255,92,92,.3); }
.sc-verdict { font-size: 16px; font-weight: 700; }
.sc-head.ok .sc-verdict { color: var(--ok); }
.sc-head.err .sc-verdict { color: var(--danger); }
.sc-sub { margin-top: 5px; font-size: 12px; color: #c2ccd6; line-height: 1.65; }
.sc-counts { margin-top: 9px; display: flex; gap: 13px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.sc-counts .ok { color: var(--ok); }
.sc-counts .err { color: var(--danger); }
.sc-counts .warn { color: var(--warn); }
.sc-path { margin-top: 7px; font-size: 11px; color: var(--faint); word-break: break-all; }

.sc-todo { margin-bottom: 16px; }
.sc-todo-head { font-size: 12.5px; font-weight: 600; color: var(--warn); margin-bottom: 7px; }
.sc-todo-row { display: flex; gap: 8px; padding: 8px 10px; border-radius: 4px; background: rgba(251,191,36,.06); margin-bottom: 5px; border-left: 3px solid var(--warn); }
.sc-todo-row.p0 { background: rgba(255,92,92,.07); border-left-color: var(--danger); }
.sc-todo-main { flex: 1; min-width: 0; font-size: 12px; color: #c2ccd6; line-height: 1.6; }

.sc-sec { margin-bottom: 17px; }
.sc-sec-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.sc-sec-head .count { font-weight: 400; font-size: 11px; color: var(--faint); }
.sc-row { display: flex; gap: 8px; padding: 7px 9px; border-radius: 4px; margin-bottom: 4px; background: rgba(255,255,255,.025); }
.sc-row.err { background: rgba(255,92,92,.07); }
.sc-row.warn { background: rgba(251,191,36,.06); }
.sc-icon { width: 15px; flex-shrink: 0; text-align: center; font-weight: 700; font-size: 12px; }
.sc-row.ok .sc-icon { color: var(--ok); }
.sc-row.err .sc-icon { color: var(--danger); }
.sc-row.warn .sc-icon { color: var(--warn); }
.sc-row.skip .sc-icon { color: var(--faint); }
.sc-row-main { flex: 1; min-width: 0; }
.sc-row-title { font-size: 12px; color: var(--text); }
.sc-row.skip .sc-row-title { color: var(--muted); }
.a-tip.mono { font-family: Consolas, Monaco, monospace; font-size: 11px; word-break: break-all; }

/* ---- 提示词用法说明弹层 ---- */
.guide-list { display: flex; flex-direction: column; gap: 12px; }
.guide-step { display: flex; gap: 11px; font-size: 12.5px; color: #c2ccd6; line-height: 1.75; }
.guide-step > .gn {
  flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%;
  background: rgba(45,226,230,.16); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-style: normal; font-weight: 600;
}
.guide-step b { color: var(--text); font-weight: 600; }
.guide-tip {
  margin-top: 4px; padding: 10px 12px; border-radius: 4px;
  background: rgba(251,191,36,.07); border-left: 3px solid var(--warn);
  font-size: 12px; color: #c2ccd6; line-height: 1.7;
}

/* ============================================================
   六步流水线 · 第②步：AI 出图识别（本地打分 + 建议配对表）
   ============================================================ */
#mRecog .modal-box { width: min(1020px, 96vw); }
.recog-sub { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--faint); }
.recog-dir {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 10px;
  background: #080b10; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.recog-lab { font-size: 12px; color: var(--muted); white-space: nowrap; }
.recog-dir code {
  font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48vw;
}
/* 直接粘贴路径：比一层层点目录快得多 */
.recog-path {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin: -4px 0 10px;
  background: #080b10; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.recog-path input {
  flex: 1; min-width: 0;
  height: 26px; padding: 0 8px; font-size: 12px;
  color: var(--text); background: #010409;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: ui-monospace, Consolas, monospace;
}
.recog-path input:focus { outline: none; border-color: var(--accent); }

/* 设置页 / 添加工程里「输入框 + 选择按钮」并排：
   凡是让用户填磁盘路径的地方都能点按钮弹系统窗口，不用手打 */
.path-row { display: flex; align-items: flex-start; gap: 8px; }
.path-row > input, .path-row > textarea { flex: 1 1 auto; min-width: 0; }
.path-row > .pick-btn {
  flex: 0 0 auto; white-space: nowrap;
  height: 34px; padding: 0 12px; font-size: 13px;
  color: var(--text); background: var(--panel, #18202b);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.path-row > .pick-btn:hover { border-color: var(--accent); color: #fff; }
.path-row > .pick-btn:active { transform: translateY(1px); }
/* 这里以前是自绘的「选择文件夹」对话框样式（.dlg-pick / .pk-*）。
   用户要的是「弹出 Windows 小窗口那种」，已改为由本机服务端弹系统原生对话框
   （见 app/server.js 的 pickDirDialog 与 app.js 里 #btnRecogBrowse 的接法），样式全部删掉。 */
/* 「按出图顺序配」：豆包/即梦下载的名字跟槽位对不上时，照清单顺序出的图可以按序号依次贴 */
.recog-seq {
  margin: 0 0 10px; padding: 8px 10px;
  background: #080b10; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.recog-seq:has(input:checked) { border-color: rgba(45,226,230,.45); background: #101820; }
.recog-seq-on {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
}
.recog-seq-tip { margin-top: 5px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.recog-seq-tip b { color: var(--warn); font-weight: 600; }

/* 统计条 */
.recog-stat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.recog-stat .rs {
  flex: 1; min-width: 92px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: #080b10; border: 1px solid var(--line);
}
.recog-stat .rs b { display: block; font-size: 18px; line-height: 1.2; color: var(--text); }
.recog-stat .rs span { font-size: 11.5px; color: var(--muted); }
.recog-stat .rs.ok b { color: var(--ok); }
.recog-stat .rs.warn b { color: var(--warn); }
.recog-stat .rs.bad b { color: var(--danger); }
.recog-stat .rs.hit b { color: var(--accent-2); }
/* 建议配对表 */
.recog-table { display: flex; flex-direction: column; gap: 6px; }
.rrow {
  display: grid; grid-template-columns: 46px minmax(120px, 1fr) 20px 240px minmax(150px, 1.1fr) 60px;
  align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  background: #080b10; border: 1px solid var(--line);
}
.rrow.auto { border-color: rgba(74,222,128,.35); }
.rrow.off { opacity: .38; }
.r-thumb {
  width: 44px; height: 44px; border-radius: 4px; overflow: hidden;
  background: #111720; display: flex; align-items: center; justify-content: center;
}
.r-thumb img { width: 100%; height: 100%; object-fit: contain; }
.r-aud { color: var(--accent-2); font-size: 18px; }
.r-file { min-width: 0; }
.r-name { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-meta, .r-slotmeta {
  font-size: 11.5px; color: var(--faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.r-arrow { color: var(--faint); text-align: center; }
.r-slot select {
  width: 100%; height: 28px; font-size: 12px;
  background: #111720; color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 6px;
}
.r-score { min-width: 0; }
.r-num { font-size: 15px; font-weight: 700; color: var(--accent-2); margin-right: 5px; }
.r-score .tag { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; line-height: 16px; }
.r-none { font-size: 12px; color: var(--faint); }
/* 「按出图顺序配」：分数不参与落位，改显示「第几张」，特征分只当核对旁证 */
.r-num.seq { color: var(--accent); font-size: 13.5px; }
.r-num.no { color: var(--ok); font-size: 13.5px; }
.r-score .tag.seq { background: rgba(45,226,230,.16); color: #7ef2f5; }
.r-score .tag.no { background: rgba(52,211,153,.16); color: #6ee7b7; }
/* AI 认的：模型看图点的位，不是打分打出来的，用紫色跟「按顺序」的青色分开 */
.r-score .tag.ai { background: rgba(167,139,250,.18); color: #c4b5fd; }
.r-seqnote { font-size: 11px; color: var(--muted); margin-top: 2px; }
.r-seqnote.warn { color: var(--warn); }
.r-reasons, .r-alt {
  font-size: 11px; color: var(--faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.r-drop { height: 26px; font-size: 12px; padding: 0 8px; }
.recog-warn { margin-top: 10px; }
.rwarn {
  padding: 9px 11px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.75;
  background: rgba(251,191,36,.07); border-left: 3px solid var(--warn); color: #c2ccd6;
  margin-bottom: 6px;
}
.rwarn.ok { background: rgba(74,222,128,.08); border-left-color: var(--ok); }
.rwarn.err { background: rgba(255,92,92,.08); border-left-color: var(--danger); }
.recog-foot-hint { font-size: 12px; color: var(--faint); }
.recog-fit { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.tag.warn { background: rgba(251,191,36,.15); color: var(--warn); }

/* ============ 当前游戏条（创造页顶部：在做哪一款 + 回大厅） ============ */
.game-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 30px 0;
  padding: 10px 14px;
  background: rgba(17,23,32,.82);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.gb-label { font-size: 12px; color: var(--faint); flex-shrink: 0; }
.gb-name {
  font-size: 14px; font-weight: 600; color: #e6edf3;
  max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-btn {
  height: 32px; padding: 0 14px;
  background: var(--panel, #18202b); border: 1px solid var(--line);
  border-radius: 4px; color: #c2ccd6; font-size: 13px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.gb-btn:hover { border-color: var(--accent); color: #fff; }
.gb-btn:active { transform: translateY(1px); }
.gb-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gb-btn.primary:hover { filter: brightness(1.08); }

/* ============ 游戏大厅 / 母版库 ============
   大厅：「我的游戏」，点卡片就进那款游戏的创造页（六步）
   母版库：「可用的母版」，点「用它做一款」当场复制出一款新工程 */
#viewLobby, #viewMasters { flex-direction: column; overflow: auto; }
/* 顶部留出和页头之间的距离：以前这 18px 是上面那块入口大面板的 margin 给的 */
.lobby-cards { padding: 16px 30px 34px; }
/* 母版页顶上那条：＋ 添加母版 + 一句解释 */
.lobby-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; flex-wrap: wrap; }
.lobby-tip { font-size: 12px; color: var(--muted); line-height: 1.7; }
.lobby-group { margin-bottom: 26px; }
.lobby-group:last-child { margin-bottom: 0; }
.pick-t {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 15px; font-weight: 700; color: #e6edf3; margin: 0 0 12px;
}
.pick-d { font-size: 12px; font-weight: 400; color: var(--faint); }
/* 卡片墙：两列（窄屏一列） */
#viewLobby .template-grid, #viewMasters .template-grid {
  flex: none; overflow: visible; padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#viewLobby .template-card, #viewMasters .template-card { cursor: pointer; }
.template-card.on {
  border-color: rgba(255,147,80,.75);
  box-shadow: 0 0 0 1px rgba(255,147,80,.3), 0 18px 40px rgba(0,0,0,.3);
}
@media (max-width: 1240px) {
  #viewLobby .template-grid, #viewMasters .template-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .lobby-cards { padding: 6px 16px 28px; } }

/* ==========================================================================
   Pixel Forge 增强层 —— 赛博街机终端的质感
   上面各段已经把配色 / 圆角迁到新色板；这一层只补视觉：切角方块、硬边偏移
   阴影、霓虹辉光、虚线连接、等宽数字、选中态标记。**不动任何尺寸与布局**，
   因为 uistyle.js 里有一批"防压扁"回归锁盯着列宽、行高、flex-shrink。
   ========================================================================== */

:root {
  /* 切角路径：右上 + 左下各切一刀（--notch: 8px） */
  --notch-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
                        100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

::selection { background: rgba(45,226,230,.28); color: #eafcff; }

/* ---- 数字用等宽：像素风的秩序感 ---- */
.count, .rel-count .n, .order-stat b, .msg-time, .d-row .v.mono, .log,
.slot-meta .tag, .recog-stat b, .cat-sub, .page-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.order-stat b, .rel-count .n, .nav-badge, .log, .crumbs, .stage,
.d-badge, .msg-time, .recog-dir code, .recog-path input, .order-path {
  font-family: var(--mono);
}

/* ---- 按钮：硬边偏移阴影（像素风的标志性投影） ---- */
.header-right button, footer button, .modal-foot button, .col-tools button,
.slot-actions button, .card-ops button, .drawer-bulk button, .lobby-bar button,
.gb-btn, .back-btn, .quick-btn, .modes button {
  box-shadow: var(--hard-sm);
}
.header-right button:hover, footer button:hover, .modal-foot button:hover,
.col-tools button:hover, .gb-btn:hover, .back-btn:hover {
  transform: translateY(-1px);
}

/* 主行动按钮：霓虹青填充 + 切角 + 深色字（亮青底上黑字才压得住） */
button.primary, .gb-btn.primary, .login-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #04262a;
  font-weight: 700;
  border-color: transparent;
  box-shadow: none;
  clip-path: var(--notch-path);
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.6));
}
button.primary:hover, .gb-btn.primary:hover, .login-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #04262a;
  box-shadow: none;
  filter: drop-shadow(0 0 14px rgba(45,226,230,.5)) drop-shadow(3px 3px 0 rgba(0,0,0,.6));
}
button.big { letter-spacing: 1px; font-weight: 700; }
button.danger { color: #ff8f8f; }
button.ghost { box-shadow: none; }
button.ghost:hover { box-shadow: none; }

/* ---- 输入框 / 下拉 / 文本域：内嵌深底 + 聚焦青环 ---- */
.field input[type=text], .field input[type=password], .field select,
header select, #projectSel, .recog-path input, .order-wm-row input,
.login-form input, .search-box input {
  background: rgba(0,0,0,.42);
  border-color: var(--line);
}
.field input:focus, .field select:focus, header select:focus, #projectSel:focus,
.recog-path input:focus, .order-wm-row input:focus, .login-form input:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,226,230,.14);
}

/* ---- 左侧边栏 ---- */
#sidebar {
  background: linear-gradient(180deg, rgba(17,23,32,.75), rgba(8,11,16,.9));
  border-right: 1px solid var(--line);
}
.sb-mark {
  border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #04262a;
  font-family: var(--mono);
  box-shadow: 0 0 0 2px #0b1118, 0 0 18px rgba(45,226,230,.5), 3px 3px 0 rgba(0,0,0,.5);
}
.sb-item { border-radius: 4px; }
.sb-item:hover { background: rgba(255,255,255,.04); }
.sb-item.on {
  color: #eafcff;
  background: linear-gradient(90deg, rgba(45,226,230,.18), rgba(45,226,230,0));
  box-shadow: inset 3px 0 0 var(--accent), inset 0 0 24px rgba(45,226,230,.06);
}
.sb-item.on .sb-ico { color: var(--accent); text-shadow: 0 0 12px rgba(45,226,230,.6); }
.nav-badge { border-radius: 2px; box-shadow: var(--hard-sm); font-weight: 700; }
.sb-foot { border-top: 1px dashed rgba(255,255,255,.12); }
.userchip .avatar { border-radius: 3px; }

/* ---- 页头 ---- */
.page-header { border-bottom: 1px dashed rgba(45,226,230,.16); }
.page-title { letter-spacing: .5px; }
.page-title::after {
  content: ''; display: block; width: 68px; height: 3px; margin-top: 8px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 12px);
  opacity: .8;
}
.header-right button { box-shadow: var(--hard-sm); }

/* ---- 六步分段控件 ---- */
.tabs {
  background: #0b1118;
  border-color: rgba(45,226,230,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.tab { border-radius: 3px; }
.tab:hover { background: rgba(45,226,230,.06); }
.tab.on {
  background: linear-gradient(180deg, rgba(45,226,230,.26), rgba(45,226,230,.10));
  color: #eafcff;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--accent);
}
.tab .st { background: rgba(255,255,255,.35); }
.tab.on .st { background: var(--accent); }

/* ---- 素材库缩略卡 / 分类 / 槽位 ---- */
.card {
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.card:hover { border-color: rgba(45,226,230,.45); background: rgba(45,226,230,.06); }
.card.on {
  border-color: var(--accent);
  background: rgba(45,226,230,.12);
  box-shadow: inset 0 0 0 1px rgba(45,226,230,.35);
}
.card-img { background: rgba(0,0,0,.38); }
.card-name { color: #c2ccd6; }
.cat-item:hover { background: rgba(45,226,230,.05); }
.cat-item.on { background: rgba(45,226,230,.10); border-left-color: var(--accent); }
.cat-item.on .cat-icon { background: rgba(45,226,230,.16); color: var(--accent); }
.slot-row:hover { border-color: rgba(45,226,230,.4); }
.slot-row.active { box-shadow: inset 3px 0 0 var(--accent); }
.slot-thumb .arrow { background: var(--accent); color: #04262a; font-weight: 700; }
.slot-meta .tag { border-radius: 2px; }

/* ---- 大厅 / 母版卡 ---- */
.template-card { position: relative; }
.template-card:hover {
  border-color: rgba(45,226,230,.45);
  box-shadow: 0 0 0 1px rgba(45,226,230,.18), 0 18px 40px rgba(0,0,0,.45);
}
.template-card.on {
  border-color: rgba(45,226,230,.8);
  box-shadow: 0 0 0 1px rgba(45,226,230,.35), 0 18px 40px rgba(0,0,0,.45);
}
.template-card.on::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 14px; height: 14px; background: var(--accent);
}
.filter-card { background: rgba(17,23,32,.96); border-color: var(--line); }
.quick-btn { box-shadow: var(--hard-sm); }
.quick-btn:hover { transform: translateY(-1px); }
.pill { border-radius: 2px; }
.empty {
  border: 1px dashed rgba(45,226,230,.16);
  border-radius: 6px;
  background: rgba(255,255,255,.015);
}
.empty-big .ico { color: rgba(45,226,230,.22); }
.pick-t { letter-spacing: .5px; }
.lobby-tip code, .card-d code {
  background: rgba(45,226,230,.10); color: var(--accent-2);
  padding: 1px 5px; border-radius: 3px;
}

/* ---- 弹窗 ---- */
.modal { background: rgba(4,7,12,.72); backdrop-filter: blur(3px); }
.modal-box {
  border: 1px solid rgba(45,226,230,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 70px rgba(0,0,0,.65),
              0 0 46px rgba(45,226,230,.07);
}
.modal-head {
  background: linear-gradient(180deg, rgba(45,226,230,.08), transparent);
  letter-spacing: .5px;
}
.modal-foot { background: rgba(0,0,0,.16); }
.log { background: #0a1016; border: 1px solid var(--line); line-height: 1.85; }
.field .hint code, .modal-body code {
  background: rgba(255,255,255,.06); border-radius: 3px; padding: 1px 5px;
}
.guide-step > .gn {
  border-radius: 2px;
  background: rgba(45,226,230,.14);
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
}
.rule-row, .rule-tip { border-radius: 4px; }
.d-badge, .d-note.show, .recog-seq, .order-item, .d-card { border-radius: 3px; }
.d-card { background: rgba(255,255,255,.02); border-left: 3px solid var(--accent); }
.stage { color: var(--accent); letter-spacing: .5px; }
.stage.ok { color: var(--ok); }
.stage.fail { color: var(--danger); }

/* ---- 抽屉 / 游戏条 / 底栏 ---- */
.drawer {
  background: rgba(11,17,24,.98);
  border-left: 1px solid rgba(45,226,230,.22);
  box-shadow: -24px 0 60px rgba(0,0,0,.6);
}
.game-bar { background: rgba(17,23,32,.7); border-bottom: 1px solid var(--line); }
.gb-btn { box-shadow: var(--hard-sm); }
footer { background: rgba(11,17,24,.92); }

/* ---- 出包进度条：像素方块 ---- */
#footShip .buildbar {
  border-radius: 0;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#footShip .buildbar i {
  background-color: var(--accent);
  background-image: repeating-linear-gradient(90deg,
    rgba(0,0,0,.30) 0 2px, transparent 2px 6px);
}

/* ---- 七步流程条：虚线连接 + 方形节点 ---- */
.flow-dot { border-radius: 4px; font-family: var(--mono); font-weight: 700; }
.flow-step::after {
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 9px);
}
.flow-step.ok::after {
  background: repeating-linear-gradient(90deg, rgba(74,222,128,.65) 0 5px, transparent 5px 9px);
}
.flow-step.fail::after {
  background: repeating-linear-gradient(90deg, rgba(255,92,92,.65) 0 5px, transparent 5px 9px);
}
.flow-name { letter-spacing: .5px; }

/* ---- 提示条 ---- */
.toast {
  border-radius: 3px;
  background: #111720;
  border: 1px solid rgba(45,226,230,.4);
  color: #eafcff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 10px 28px rgba(0,0,0,.55);
}
.toast.ok { background: #10301c; border-color: rgba(74,222,128,.5); color: #c9ffdd; }
.toast.err { background: #3d1a1e; border-color: rgba(255,92,92,.5); color: #ffd8d8; }

/* ---- 设置页卡片 ---- */
.set-grid .card { box-shadow: var(--hard-sm); }
.set-grid .card::before {
  content: ''; position: absolute; top: 9px; right: 9px; width: 12px; height: 12px;
  background: linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 5px,
              rgba(167,139,250,.85) 5px 8px, transparent 8px 9px,
              rgba(255,147,80,.75) 9px 12px);
  opacity: .55;
}

/* ---- 登录页 ---- */
.login-container {
  background: rgba(17,23,32,.96);
  border: 1px solid rgba(45,226,230,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.6),
              inset 0 0 90px rgba(45,226,230,.05);
}
.logo-mark {
  border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #04262a;
  font-family: var(--mono);
  box-shadow: 0 0 0 2px #0b1118, 0 0 24px rgba(45,226,230,.5);
}
.logo-text { letter-spacing: 2px; }
.login-tabs { border-color: rgba(45,226,230,.18); }
.login-tabs .tab.on {
  background: linear-gradient(180deg, rgba(45,226,230,.26), rgba(45,226,230,.10));
  color: #eafcff;
  box-shadow: inset 0 -3px 0 var(--accent);
}
.login-footer { border-top: 1px dashed rgba(255,255,255,.10); }

/* 登录卡四角准星 —— 设计稿里卡片四角那四个青色十字 */
.login-container { position: relative; }
.login-container::before {
  content: ''; position: absolute; inset: -20px; pointer-events: none;
  --cross: linear-gradient(var(--accent), var(--accent));
  background-image: var(--cross), var(--cross), var(--cross), var(--cross),
                    var(--cross), var(--cross), var(--cross), var(--cross);
  background-repeat: no-repeat;
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px,
                   13px 1px, 1px 13px, 13px 1px, 1px 13px;
  background-position: left top, left top, right top, right top,
                       left bottom, left bottom, right bottom, right bottom;
  opacity: .5;
}

/* 弹窗脑袋下沿一条青色亮线 —— 设计稿里模态顶上那道边 */
.modal-head { border-bottom-color: rgba(45,226,230,.22); }

/* ============================================================
   强化层 —— 目标是「一眼看出换了皮」
   直角 + 硬阴影 + 切角 + 霓虹辉光 + 像素网格 + 等宽字 + 按压手感
   ============================================================ */

/* 1) 全站归零圆角：像素风只有直角和切角，没有胶囊 */
.card, .template-card, .filter-card, .set-grid .card, .modal-box, .modal-head, .modal-foot,
.col-head, .col-body, .col-tools, .lobby-group, .drawer, .drawer-head,
.drawer-bulk, .crumbs, .toast, .log, .msg-row, .msg-ico, .sb-item, .sb-shell, .sb-mark, .sb-nav,
.tab, .tabs, .pill, .nav-badge, .page-num, .slot-row, .sr-thumb, .sr-head, .flow-dot, .flow-step,
.d-badge, .d-card, .d-note, .rule-row, .rule-tip, .order-item, .order-sec, .order-intro, .order-wm,
.order-list > *, .recog-seq, .guide-step > .gn, .a-block, .sc-row, .sc-head, .sc-todo-row,
.pf-global, .platform-tag, .asset-row, .tag, .badge, .userchip, .userchip .avatar,
input, textarea, select, .form-input, .input-wrapper, .login-container, .login-tabs,
.login-tabs .tab, .login-err, .login-note, .cat-item, .empty, .empty-big, .buildbar,
button, .quick-btn, .gb-btn, .back-btn, .slot-actions button,
.card-ops button, .drawer-bulk button, .lobby-bar button, .modes button, .header-right button,
footer button, .modal-foot button, .col-tools button, .order-wm-row input, .recog-path input,
code, pre, kbd, .logo-mark, .card-img, .card.on, .template-card.on, .cat-item.on {
  border-radius: 0;
}

/* 2) 标题 / 按钮换等宽字（街机终端味）+ 字距 */
.page-title, .logo-text, .drawer-t, .col-head .col-title, .order-sec-t,
.card-t, .stage, .flow-name, .sb-txt, .tab, button, .gb-name, .crumbs {
  font-family: var(--mono), "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
}
.page-title { letter-spacing: .12em; }
.header-right button, .tab, button.primary, .gb-btn { letter-spacing: .08em; }

/* 3) 页头标题左边钉一个发光像素块 */
.page-title::before {
  content: ''; display: inline-block; width: 10px; height: 18px; margin-right: 11px;
  background: var(--accent); vertical-align: -2px;
  box-shadow: 0 0 14px rgba(45,226,230,.75);
}

/* 4) 背景：像素网格调亮（原来那条自上而下循环的扫描线已按反馈去掉） */
body::before {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}

/* 5) 侧边栏图标做成像素方块（一格一图标）
      注意：图标靠 flex 居中、并且**不能**给它外边距 ——
      一旦加 margin，图标就会离自己的文字远、离下一项的文字近，看起来就是「堆叠」 */
.sb-ico {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 0; font-size: 16px; line-height: 1;
  border: 1px solid rgba(45,226,230,.22);
  background: rgba(45,226,230,.05); color: #cfeaea;
}
.sb-item.on .sb-ico {
  border-color: var(--accent); background: rgba(45,226,230,.18); color: #eafeff;
  box-shadow: 0 0 14px rgba(45,226,230,.45);
}
/* 项与项之间留足气口（选中项的粗竖条由上一条 .sb-item.on 的 inset 阴影给出） */
.sb-item { gap: 6px; padding: 10px 4px; margin-bottom: 12px; }

/* 6) 卡片：硬边偏移阴影；悬停整块抬起（像素游戏那种「选中」手感） */
.card, .template-card, .filter-card, .set-grid .card, .modal-box, .lobby-group {
  box-shadow: var(--hard);
}
.card:hover, .template-card:hover, .d-card:hover, .rule-row:hover {
  transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(0,0,0,.75);
}
.card.on, .template-card.on, .cat-item.on, .tab.on {
  box-shadow: var(--hard), 0 0 18px rgba(45,226,230,.35);
}

/* 7) 按钮：跳变过渡 + 按下去的手感 */
button { transition: transform .1s steps(2, end), background .1s steps(2, end), box-shadow .1s steps(2, end); }
button:not(:disabled):hover { transform: translate(-1px, -1px); }
button:not(:disabled):active { transform: translate(1px, 1px); box-shadow: none !important; }

/* 8) 主行动按钮：切角 + 硬阴影 + 辉光 */
button.primary, .login-btn, .gb-btn.primary {
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(45,226,230,.4));
  font-weight: 700;
}
.quick-btn {
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(255,147,80,.45));
}

/* 9) 右下角水印：既是装饰，也是「新皮肤到底加载没有」的探针 */
.shell::after {
  content: 'PIXEL FORGE v1.1'; position: fixed; right: 12px; bottom: 8px; z-index: 40;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: rgba(45,226,230,.45); pointer-events: none;
}

/* ============================================================
   全局「正在干活」遮罩（复制母版这类几十秒的活儿）
   —— 有了它，「点完没反应」在界面上就不该再发生：
      深底 + 模糊把界面整个挡住，中间一块像素方框，四个方块轮流闪、
      条纹条来回跑、底下还报「已经等了 N 秒」。
   由 app.js 的 busyOn() / busyOff() 开关，元素在 index.html 的 #pfLoading。
   ============================================================ */
.pf-loading {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,7,12,.74);
  backdrop-filter: blur(3px);
}
.pf-loading[hidden] { display: none; }          /* 没有这条，flex 会让 hidden 失效 */
.pf-loading-box {
  min-width: 310px; max-width: 460px; padding: 24px 26px 18px;
  background: var(--panel);
  border: 1px solid var(--accent);
  box-shadow: var(--hard), 0 0 34px rgba(45,226,230,.28);
  text-align: center;
}
.pf-loading-mark { display: flex; gap: 7px; justify-content: center; margin-bottom: 16px; }
.pf-loading-mark i {
  width: 12px; height: 12px; background: var(--accent);
  box-shadow: 0 0 10px rgba(45,226,230,.55);
  animation: pfBlink 1s steps(2, end) infinite;
}
.pf-loading-mark i:nth-child(2) { animation-delay: .15s; }
.pf-loading-mark i:nth-child(3) { animation-delay: .3s; }
.pf-loading-mark i:nth-child(4) { animation-delay: .45s; }
@keyframes pfBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }
.pf-loading-t {
  font: 700 15px/1.5 var(--mono), "Microsoft YaHei", sans-serif;
  color: var(--text); letter-spacing: .04em;
}
.pf-loading-d { margin-top: 7px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.pf-loading-bar {
  margin-top: 15px; height: 8px; overflow: hidden;
  background: rgba(0,0,0,.5); border: 1px solid var(--line);
}
.pf-loading-bar i {
  display: block; width: 38%; height: 100%;
  background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 12px);
  animation: pfSlide 1.1s steps(8, end) infinite;
}
@keyframes pfSlide { from { transform: translateX(-105%); } to { transform: translateX(265%); } }
.pf-loading-time {
  margin-top: 9px; height: 14px;
  font: 12px/1 var(--mono), Consolas, monospace;
  color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* 消息中心：「只能看不能删」的补课 —— 每条消息右边一个 ✕ */
.msg-del {
  flex-shrink: 0; margin-left: 4px;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs);
  color: var(--faint); font-size: 12px; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.msg-del:hover { color: var(--danger); border-color: var(--danger); background: rgba(255,92,92,.08); }

/* 资产页：「产物 / 提审包 / 提审材料」以前点开就能看，但删不掉 —— 每个后面配一个 ✕ */
.asset-item { display: inline-flex; align-items: center; gap: 2px; }
.asset-del {
  flex-shrink: 0;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs);
  color: var(--faint); font-size: 12px; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.asset-del:hover { color: var(--danger); border-color: var(--danger); background: rgba(255,92,92,.08); }

/* 消息中心的「清空全部」搬到页头右上角了（原来杵在内容区左上角，很突兀） */
#btnMsgClear:hover { color: var(--danger); border-color: var(--danger); }

/* 状态行里那条可点的路径：导出提示词之后点一下就直接用资源管理器打开 */
.path-open {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-xs);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  word-break: break-all;
}
.path-open::after { content: ' ↗'; color: var(--faint); }
.path-open:hover { border-color: var(--accent); background: var(--sel); }

/* ---------------------------------------------------------------- 服务器 / 额度
   设置页里那两块（「连你的服务器」和「额度」）故意跟原来的字段长得一样，
   只多两种状态色：连上了 / 余额还够 → 绿；连不上 / 余额空了 → 红。 */
.field .hint.ok { color: var(--ok); }
.field .hint.err { color: var(--danger); }

/* 客户额度弹窗：一行一个账号，行内直接充钱 */
.q-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, .02);
}
.q-name { font-size: 13px; }
.q-num { font-size: 12px; color: var(--muted); }
.q-num .y { color: var(--ok); }
.q-num .n { color: var(--danger); }
.q-row .path-row { align-items: center; }
.q-row .q-amount { max-width: 140px; }
#mQuota .modal-box { width: 620px; max-width: 92vw; }