/* ============================================================================
   基金会：深井协议 — UI 主题样式表（可复用）
   SCP 机密档案终端 × WH grimdark。新 UI 页 <link> 本文件即可复用整套设计系统。
   配套：UI_StyleGuide.html(规范) · UI_Motion.html(动效库) · UI_Template.html(起手)
   实装到 UE：把这里的 tokens 落成 UCSUITheme 数据资产。
   ============================================================================ */

:root{
  /* 中性 */
  --bg:#0a0908; --panel:#121110; --panel2:#1a1713; --panel-lit:#201b15; --inset:#0d0c0b;
  --line:#2c2620; --line2:#3a332b;
  --ink:#cfc8be; --ink-hi:#efe8dd; --dim:#a89c8c; --faint:#766c61;
  /* 核心强调 */
  --red:#c83a2f; --red2:#e0584c; --amber:#cf9a52; --cold:#54a6b3; --ok:#7f9d62;
  /* 语义 */
  --toxic:#93a83f; --anomaly:#8e6fae; --ice:#6fc1cf; --warn:#d8b34a; --blood:#a8332c;
  /* 分类色（多字段区分） */
  --c-orange:#e08a4c; --c-lime:#aac24a; --c-teal:#4fb3a0; --c-blue:#5a8fd0; --c-violet:#a07cc4; --c-magenta:#c46aa0;
  /* 间距 / 圆角 / 描边 */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:18px; --sp5:28px; --r2:2px; --bw:1px;
  /* 运动 */
  --ease:cubic-bezier(.2,.7,.2,1); --dur1:.13s; --dur2:.3s; --dur3:.6s;
  /* 层级 */
  --z-panel:1; --z-sticky:50; --z-overlay:200; --z-modal:300; --z-toast:400; --z-tooltip:500; --z-crt:9999;
  /* 字体 */
  --mono:"Consolas","DejaVu Sans Mono",monospace;
  --sans:"Segoe UI","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background:#0c0b09; color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.6;
  background-image:radial-gradient(1100px 620px at 82% -5%, rgba(200,58,47,.06), transparent 70%),
    radial-gradient(900px 520px at 8% 108%, rgba(79,179,160,.05), transparent 70%); }
.mono{ font-family:var(--mono); } .ink-hi{ color:var(--ink-hi); } .dim{ color:var(--dim); }
.grain{ position:fixed; inset:-20%; width:140%; height:140%; z-index:998; pointer-events:none; opacity:.12;
  mix-blend-mode:overlay; background:url('../img/noise.png') repeat; background-size:150px; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.row{ display:flex; flex-wrap:wrap; gap:var(--sp3); }
.col{ display:flex; flex-direction:column; gap:var(--sp2); }

/* 排版 */
h1{ font-size:32px; font-weight:800; color:var(--ink-hi); margin:0 0 6px; letter-spacing:.01em; }
h2.sec{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--amber); text-transform:uppercase;
  margin:34px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--line); }
h2.sec b{ color:var(--faint); font-weight:400; }
.lead{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--red); }
.cap{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; }
code{ font-family:var(--mono); color:var(--amber); font-size:.9em; }

/* 面板（红封条头 + 四角括号） */
.panel{ background:linear-gradient(180deg,var(--panel),#100f0d); border:1px solid var(--line); position:relative; }
.panel>.ph{ display:flex; align-items:center; gap:9px; padding:9px 13px; border-bottom:1px solid var(--line); border-left:3px solid var(--red);
  background:linear-gradient(90deg, rgba(200,58,47,.12), transparent 60%); font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-hi); }
.panel>.ph .id{ margin-left:auto; color:var(--faint); font-size:10px; }
.panel>.pb{ padding:14px; }
.corner::before,.corner::after{ content:""; position:absolute; width:10px; height:10px; border:1px solid var(--red); }
.corner::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; } .corner::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* 按钮 / 标签 */
.btn{ font-family:var(--mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--line2);
  background:#16130f; color:var(--ink); cursor:pointer; transition:var(--dur1); }
.btn:hover{ border-color:var(--amber); color:var(--ink-hi); box-shadow:0 0 14px rgba(207,154,82,.32); }
/* 确认/肯定操作(确认/购买/接受/领取) = 琥珀金。红色只给破坏性(.btn.danger)，避免红=取消的误读。 */
.btn.primary{ background:var(--amber); border-color:var(--amber); color:#0a0908; font-weight:700; }
.btn.primary:hover{ background:#e0b56a; border-color:#e0b56a; box-shadow:0 0 16px rgba(207,154,82,.5); }
/* 破坏性/危险操作(放弃/退出/丢弃/删除) = 红。 */
.btn.danger{ background:var(--red); border-color:var(--red); color:#0a0908; font-weight:700; }
.btn.danger:hover{ background:var(--red2); border-color:var(--red2); box-shadow:0 0 16px rgba(224,88,76,.5); }
.btn.ghost{ background:transparent; color:var(--amber); border-color:var(--amber); }
.btn.ghost:hover{ background:rgba(207,154,82,.12); }
.btn:disabled,.btn.dis{ opacity:.4; cursor:not-allowed; border-style:dashed; box-shadow:none; }
.tabs,.tabbar{ display:flex; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; }
.tabs .t,.tabbar .t{ padding:8px 16px; color:var(--dim); border-bottom:2px solid transparent; cursor:pointer; transition:var(--dur1); }
.tabs .t:hover,.tabbar .t:hover{ color:var(--ink); }
.tabs .t.on,.tabbar .t.on{ color:var(--red2); border-bottom-color:var(--red); background:rgba(200,58,47,.06); }

/* 数值条 */
.stat .top{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-bottom:4px; }
.stat .top b{ color:var(--ink); }
.bar{ height:9px; background:var(--inset); border:1px solid var(--line); position:relative; overflow:hidden; }
.bar>i{ display:block; height:100%; background:var(--fill,#888); background-image:linear-gradient(90deg,rgba(255,255,255,.12),transparent 40%); transform-origin:left; }
.bar.seg::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(0,0,0,.55) 11px 12px); }

/* 网格背包 + 稀有度 */
.grid{ display:grid; gap:3px; background:var(--line); padding:3px; border:1px solid var(--line); }
.cell{ background:var(--inset); aspect-ratio:1; position:relative; }
.cell:hover{ outline:1px solid var(--amber); outline-offset:-1px; }
.cell.locked{ background:repeating-linear-gradient(45deg,#120f0c,#120f0c 6px,#171210 6px,#171210 12px); }
.item{ position:absolute; inset:2px; background:linear-gradient(160deg,#221c16,#15120e); border:1px solid var(--line2); color:var(--ink-hi);
  display:flex; align-items:center; justify-content:center; font-size:16px; }
.item.sel{ outline:1px solid var(--red); }
.item.r-common{ border-color:#6b6358; } .item.r-good{ border-color:#7fb86a; } .item.r-rare{ border-color:#5fc6d4; }
.item.r-epic{ border-color:#a07cc4; box-shadow:inset 0 0 8px rgba(160,124,196,.28); }
.item.r-anom{ border-color:#e0584c; box-shadow:inset 0 0 9px rgba(224,88,76,.32); }
.rarbox{ width:56px; height:56px; border:2px solid var(--rc,#a89c8c); background:linear-gradient(160deg,var(--panel-lit),var(--inset));
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px; font-family:var(--mono); font-size:9.5px; color:var(--rc,#a89c8c); position:relative; }

/* 芯片 / 印章 / 危险条 / kv */
.chiprow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chip-s{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; padding:3px 8px; border:1px solid var(--line2); color:var(--dim); }
.chip-s.red{ color:var(--red2); border-color:var(--red); } .chip-s.amber{ color:var(--amber); border-color:var(--amber); }
.chip-s.ok{ color:var(--ok); border-color:#4f6340; } .chip-s.cold{ color:var(--cold); border-color:#356068; }
.kv{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; padding:3px 0; border-bottom:1px dashed var(--line); }
.kv .k{ color:var(--dim); } .kv .v{ color:var(--ink-hi); } .kv .v.amber{ color:var(--amber); }
.stamp{ font-family:var(--mono); font-weight:800; letter-spacing:.14em; color:rgba(224,88,76,.7); border:2px solid rgba(224,88,76,.5);
  padding:5px 12px; transform:rotate(-7deg); display:inline-block; font-size:13px; }
.hazard{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#0a0908; font-weight:700; padding:6px 12px;
  background:repeating-linear-gradient(45deg,var(--amber),var(--amber) 12px,#0a0908 12px,#0a0908 24px); }
.hazard span{ background:var(--amber); padding:2px 6px; }

/* 交互提示 / 字幕 / 目标 */
.prompt{ display:inline-flex; align-items:center; gap:9px; background:rgba(13,12,11,.85); border:1px solid var(--line); padding:8px 14px; }
.key{ font-family:var(--mono); font-weight:700; min-width:22px; height:22px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line2); background:#1c1813; color:var(--ink-hi); font-size:12px; }
.prompt .txt b{ color:var(--amber); }
.sub{ text-align:center; } .sub .who{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--cold); margin-bottom:4px; }
.sub .line{ font-size:16px; color:var(--ink-hi); text-shadow:0 2px 14px #000; }
.obj{ display:flex; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.obj .mk{ font-family:var(--mono); color:var(--red); } .obj.done .mk{ color:var(--ok); } .obj.done .tx{ color:var(--faint); text-decoration:line-through; }

/* 涂改（未知/未鉴定/未解锁 = 机制） */
.rd{ background:#0c0a08; color:transparent; padding:0 .42em; box-shadow:inset 0 0 0 1px #000; border-radius:1px; user-select:none; }
.rd.peek{ cursor:help; transition:.2s; } .rd.peek:hover{ background:rgba(200,58,47,.14); color:var(--red2); box-shadow:inset 0 0 0 1px var(--red); }

/* 表单控件 */
.inp{ font-family:var(--mono); font-size:12px; background:var(--inset); border:1px solid var(--line2); color:var(--ink); padding:7px 10px; }
.inp:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 1px var(--amber); }
.cbx{ width:17px; height:17px; border:1px solid var(--line2); background:var(--inset); display:inline-flex; align-items:center; justify-content:center; color:var(--red2); font-size:12px; vertical-align:middle; }
.cbx.on{ border-color:var(--red); }
.rdo{ width:15px; height:15px; border:1px solid var(--line2); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.rdo.on::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
.step{ display:inline-flex; border:1px solid var(--line2); font-family:var(--mono); font-size:12px; }
.step b{ padding:5px 12px; color:var(--ink); min-width:42px; text-align:center; } .step s{ padding:5px 12px; color:var(--amber); cursor:pointer; text-decoration:none; }
.step s:first-child{ border-right:1px solid var(--line); } .step s:last-child{ border-left:1px solid var(--line); }
.dd{ font-family:var(--mono); font-size:11px; border:1px solid var(--line2); background:#16130f; padding:5px 11px; color:var(--ink); display:inline-flex; gap:16px; align-items:center; }
.dd::after{ content:"▾"; color:var(--amber); }
.tgl{ font-family:var(--mono); font-size:10px; display:inline-flex; border:1px solid var(--line2); }
.tgl span{ padding:3px 11px; color:var(--faint); } .tgl .on{ background:var(--red); color:#0a0908; font-weight:700; }
.sld{ width:160px; height:8px; background:var(--inset); border:1px solid var(--line); position:relative; }
.sld>i{ display:block; height:100%; background:var(--amber); }
.sld .h{ position:absolute; top:-4px; width:5px; height:15px; background:var(--ink-hi); transform:translateX(-50%); }

/* 反馈层：弹窗 / 警告 / 加载 / 空状态 */
.modal{ border:1px solid var(--line2); border-top:3px solid var(--red); background:linear-gradient(180deg,var(--panel-lit),var(--inset)); max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,.6); }
.modal .mh{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-hi); padding:12px 16px; border-bottom:1px solid var(--line); }
.modal .mb{ padding:15px 16px; color:var(--dim); font-size:13px; line-height:1.6; }
.modal .mf{ display:flex; gap:10px; justify-content:flex-end; padding:0 16px 14px; }
.alert{ display:flex; gap:10px; align-items:center; border:1px solid var(--line2); border-left:3px solid var(--cold); background:rgba(13,12,11,.6); padding:9px 13px; font-size:12.5px; color:var(--ink); }
.alert .i{ font-size:14px; color:var(--cold); } .alert.warn{ border-left-color:var(--warn); } .alert.warn .i{ color:var(--warn); }
.alert.err{ border-left-color:var(--red); } .alert.err .i{ color:var(--red2); }
.spin{ width:22px; height:22px; border:2px solid var(--line2); border-top-color:var(--red2); border-radius:50%; animation:spin .8s linear infinite; }
.ind{ height:8px; background:var(--inset); border:1px solid var(--line); position:relative; overflow:hidden; }
.ind::after{ content:""; position:absolute; top:0; bottom:0; width:38%; background:var(--amber); animation:indm 1.3s ease-in-out infinite; }
.empty-st{ border:1px dashed var(--line2); color:var(--faint); font-family:var(--mono); font-size:11px; padding:22px; text-align:center; }
.toast{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--amber); background:rgba(13,12,11,.92);
  border:1px solid var(--line2); border-left:3px solid var(--red); padding:7px 14px; }
/* 遮罩 + 数量输入 + 文本输入 + tooltip（通用弹窗组件地基，详见 UI_Hierarchy.md §0） */
.scrim{ position:fixed; inset:0; background:rgba(6,5,4,.62); display:flex; align-items:center; justify-content:center; z-index:var(--z-modal); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line2); }
.qty button{ font-family:var(--mono); font-size:15px; width:30px; height:30px; background:#16130f; color:var(--amber); border:0; cursor:pointer; }
.qty button:first-child{ border-right:1px solid var(--line2); } .qty button:last-child{ border-left:1px solid var(--line2); }
.qty .n{ font-family:var(--mono); font-size:14px; color:var(--ink-hi); min-width:52px; text-align:center; }
.field{ font-family:var(--mono); font-size:13px; color:var(--ink-hi); background:var(--inset); border:1px solid var(--line2); padding:7px 10px; }
.field:focus{ outline:0; border-color:var(--amber); }
.tooltip{ border:1px solid var(--line2); border-left:3px solid var(--amber); background:rgba(13,12,11,.96); padding:9px 11px; box-shadow:0 10px 24px rgba(0,0,0,.6); z-index:var(--z-tooltip); max-width:240px; }
.tooltip .tt-n{ color:var(--ink-hi); font-size:13px; } .tooltip .tt-t{ font-family:var(--mono); font-size:10px; color:var(--faint); margin:2px 0 6px; }
.tooltip .tt-row{ font-family:var(--mono); font-size:11px; display:flex; justify-content:space-between; gap:16px; color:var(--dim); } .tooltip .tt-row b{ color:var(--amber); }
.scanline{ position:absolute; left:0; right:0; top:-100px; height:100px; z-index:35; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(200,58,47,.05) 62%,rgba(224,88,76,.20) 93%,transparent); animation:scanmove 7s linear infinite; }

/* ===== 动效关键帧（命名见 UI_Motion.html） ===== */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes indm{ 0%{ left:-40%; } 100%{ left:102%; } }
@keyframes scanmove{ from{ top:-100px; } to{ top:100%; } }
@keyframes bootin{ from{ opacity:0; transform:translateY(16px); filter:blur(3px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes barfill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes blink{ 50%{ opacity:.2; } }
@keyframes selpulse{ 0%,100%{ box-shadow:inset 0 0 0 1px rgba(224,88,76,.3); } 50%{ box-shadow:inset 0 0 0 1px rgba(224,88,76,.9),0 0 10px rgba(224,88,76,.4); } }
@keyframes hflick{ 0%{opacity:.2} 30%{opacity:1;text-shadow:2px 0 var(--red2),-2px 0 var(--cold)} 60%{opacity:.6} 100%{opacity:1;text-shadow:none} }
@keyframes redactglitch{ 0%,92%,100%{ box-shadow:inset 0 0 0 1px #000; opacity:1; } 93%{ box-shadow:inset 0 0 0 1px #000,2px 0 0 var(--red2),-2px 0 0 var(--ice); opacity:.8; } 96%{ opacity:1; } }
@keyframes btnglow{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,88,76,0); } 50%{ box-shadow:0 0 22px 1px rgba(224,88,76,.5); } }
.btn.pulse{ animation:btnglow 2.8s ease-in-out infinite; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .scanline{ display:none; }
}