/* ============ 全局变量 + 字体 ============ */
.cyber-ui {
  --accent: #4466ff; --accent2: #88aaff;
  --gold: #ffb347; --gold2: #ffd47a;
  --red: #ff2244; --red2: #ff7a8a;
  --cyan: #44ddff; --cyan2: #a5f0ff;
  --purple: #a266ff; --purple2: #c9a5ff;
  --tv-shell: #2a2825; --tv-shell-light: #4a4540; --tv-shell-dark: #1a1815;
  --border-color: rgba(100,140,255,0.45);
  --radius: 0.8em;
  --radius-sm: 0.5em;
  font-family: 'Ma Shan Zheng', 'KaiTi', '楷体', cursive;
  color: #fff;
  font-size: 14px;
  width: 100%;
  background-color: #0a1228;
  background-image: 
    radial-gradient(ellipse at top left, rgba(80,120,200,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(140,100,220,0.06) 0%, transparent 50%),
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"%3E%3Cpath fill="%23446eff" fill-opacity="0.05" d="M1 3h1v1H1V3zm3-2h1v1H4V1z"/%3E%3C/svg%3E');
  border-radius: var(--radius);
  padding: 1em;
  position: relative;
  box-sizing: border-box;
  text-shadow: 0 0 0.4em rgba(136,170,255,0.6), 0 0 0.2em rgba(255,255,255,0.4);
}

.cyber-ui *, .cyber-ui *::before, .cyber-ui *::after {
  box-sizing: border-box;
  font-family: 'Ma Shan Zheng', 'KaiTi', '楷体', cursive;
}

.cyber-ui details > summary {
  list-style: none;
  cursor: pointer;
}
.cyber-ui details > summary::-webkit-details-marker { display: none; }
.cyber-ui details > summary::marker { display: none; content: ''; }

/* ============ 角色立绘图片库 ============ */
.cyber-ui .ch-xmw{background-image:url('https://catai.wiki/b77d576f-5858-4658-d25b-e49abfb85600/w=3000')}
.cyber-ui .ch-jzcm{background-image:url('https://catai.wiki/96d92230-cb87-42a1-6e12-d43529c53400/w=3000')}
.cyber-ui .ch-ld{background-image:url('https://catai.wiki/7e72e430-b82f-49b8-926f-f89a4581ad00/w=3000')}
.cyber-ui .ch-yy{background-image:url('https://catai.wiki/2fdaae09-c05b-4910-fe2f-824c09ff6d00/w=3000')}
.cyber-ui .ch-lei{background-image:url('https://catai.wiki/abb88ac4-b643-4119-4d11-795adda12000/w=3000')}
.cyber-ui .ch-ffg{background-image:url('https://catai.wiki/90857ba9-38d8-4cf7-cafb-3703a051f900/w=3000')}
.cyber-ui .ch-hd{background-image:url('https://catai.wiki/83238b0a-18b4-42aa-5726-f04e0f28fa00/w=3000')}
.cyber-ui .ch-xe{background-image:url('https://catai.wiki/5622905a-d397-42ee-cd89-0b89bc0de100/w=3000')}
.cyber-ui .ch-lks{background-image:url('https://catai.wiki/fc41dc64-b637-4860-a163-62abaac44000/w=3000')}
.cyber-ui .ch-mm{background-image:url('https://catai.wiki/c60fdadc-c849-478c-4e2e-bb94b0677a00/w=3000')}
.cyber-ui .ch-ljt{background-image:url('https://catai.wiki/db76d1be-937e-4de0-4d24-6713a22c0600/w=3000')}
.cyber-ui .ch-dmy{background-image:url('https://catai.wiki/d129bc0a-d20e-4f86-0b40-9a90e89ee500/w=3000')}
.cyber-ui .ch-xty{background-image:url('https://catai.wiki/d1b32a24-c2a3-48db-a898-4e3ef2eaa600/w=3000')}
.cyber-ui .ch-kl{background-image:url('https://catai.wiki/19d4000a-fc23-4e95-2ad1-dc1a52742900/w=3000')}
.cyber-ui .ch-gyty{background-image:url('https://catai.wiki/cc5b8fdc-c5d6-4182-16ea-97d9437d5200/w=3000')}
.cyber-ui .ch-sl{background-image:url('https://catai.wiki/055d2bd5-bf27-4cda-9ab8-5290bd65f700/w=3000')}
.cyber-ui .ch-sn{background-image:url('https://catai.wiki/89b3a453-ce18-4a69-8b33-faab7f561800/w=3000')}
.cyber-ui .ch-bpa{background-image:url('https://catai.wiki/c1669183-6bad-4446-886e-4e96e5f10700/w=3000')}
.cyber-ui .ch-adxs{background-image:url('https://catai.wiki/297042c5-e424-4167-1cd8-def1e03b2700/w=3000')}
.cyber-ui .ch-yjm{background-image:url('https://catai.wiki/a3aec318-1f20-42ea-badc-26825f3faf00/w=3000')}
.cyber-ui .ch-yjsm{background-image:url('https://catai.wiki/07b7335d-a2db-4cd0-1fcc-72cfacfde500/w=3000')}
.cyber-ui .ch-sr{background-image:url('https://catai.wiki/58b296e8-2f44-40f5-547d-06489f4b6900/w=3000')}
.cyber-ui .ch-dc{background-image:url('https://catai.wiki/d318fcc3-6a5a-4484-45f9-ecdbe3c93e00/w=3000')}
.cyber-ui .ch-zb{background-image:url('https://catai.wiki/e4ce5b50-65a7-4d04-ce78-226b9fc2d300/w=3000')}
.cyber-ui .ch-kb{background-image:url('https://catai.wiki/6e467352-e816-4120-bb7b-5ec8be2fa300/w=3000')}
.cyber-ui .ch-td{background-image:url('https://catai.wiki/b0cb9d2a-3b8f-4703-3cb0-d21638dc1600/w=3000')}
.cyber-ui .ch-mlym{background-image:url('https://catai.wiki/a403c989-eb68-4ce5-3c64-f3130bb40d00/w=3000')}
.cyber-ui .ch-bx{background-image:url('https://catai.wiki/a44999c4-3f3e-47b2-111a-193f8642ec00/w=3000')}
.cyber-ui .ch-sy{background-image:url('https://catai.wiki/9b1a1313-ad9d-4865-824a-051b253dff00/w=3000')}
.cyber-ui .ch-peng{background-image:url('https://catai.wiki/b37544e4-157d-428f-7ba0-67c7e95d4200/w=3000')}
.cyber-ui .ch-yhex{background-image:url('https://catai.wiki/bba316f1-0f33-4161-b447-861220187e00/w=3000')}
.cyber-ui .ch-wpp{background-image:url('https://catai.wiki/e7fca8ad-3dfd-4fc2-ab77-bbbba0f67800/w=3000')}
.cyber-ui .ch-twe{background-image:url('https://catai.wiki/e7648215-c7e3-464a-2e43-371b75038900/w=3000')}
.cyber-ui .ch-nf{background-image:url('https://catai.wiki/e994e374-ca2f-4ef9-8ee3-4828b17ba500/w=3000')}
.cyber-ui .ch-kfy{background-image:url('https://catai.wiki/5cd2e66d-b6f6-475d-d136-6d78025b3600/w=3000')}
.cyber-ui .ch-nptn{background-image:url('https://catai.wiki/0b0fbe98-03e2-41d0-c3b8-3e5ce5fcde00/w=3000')}
.cyber-ui .ch-xyly{background-image:url('https://catai.wiki/bb7328be-5e86-4be0-d827-ef8cdf77e800/w=3000')}
.cyber-ui .ch-ltnb{background-image:url('https://catai.wiki/66554202-6c57-4043-8207-3536da102000/w=3000')}
.cyber-ui .ch-yste{background-image:url('https://catai.wiki/8600aba7-8ad1-4dca-ca81-6e6067df9600/w=3000')}
.cyber-ui .ch-jlmb{background-image:url('https://catai.wiki/9ee2557b-3240-44df-04e2-1ce3dbe97800/w=3000')}
.cyber-ui .ch-tnlk{background-image:url('https://catai.wiki/50230c2a-7b0c-4362-d31a-948c718e0b00/w=3000')}
.cyber-ui .ch-mde{background-image:url('https://catai.wiki/46e9513a-0e87-48de-ed33-add506b4a200/w=3000')}
.cyber-ui .ch-jjj{background-image:url('https://catai.wiki/1ac30cef-8b29-47ce-391e-43198330ea00/w=3000')}
.cyber-ui .ch-ybai{background-image:url('https://catai.wiki/0d994f7b-ae51-4340-0958-b6375e9e6e00/w=3000')}
.cyber-ui .ch-qm{background-image:url('https://catai.wiki/c6700ead-80ab-448c-83f7-6928b945b300/w=3000')}
.cyber-ui .ch-xxxi{background-image:url('https://catai.wiki/3a7071bc-c909-43d1-0101-cdc4bfddd200/w=3000')}
.cyber-ui .ch-mylya{background-image:url('https://catai.wiki/f5a930fd-5848-4823-2664-8d188e93c800/w=3000')}
.cyber-ui .ch-dhl{background-image:url('https://catai.wiki/a3198b2e-ea17-4d11-2f93-93fdb6ef9100/w=3000')}
.cyber-ui .ch-lm{background-image:url('https://catai.wiki/e95035ca-26d6-4c39-b60b-803b23453f00/w=3000')}
.cyber-ui .ch-xx{background-image:url('https://catai.wiki/89205148-944f-4b06-9b12-d38123d9f700/w=3000')}
.cyber-ui .ch-yu{background-image:url('https://catai.wiki/1c066d90-b902-41db-705a-3e1589f02900/w=3000')}
.cyber-ui .ch-ji{background-image:url('https://catai.wiki/f280c0df-262e-4a5f-116f-c7d38e700000/w=3000')}
.cyber-ui .ch-moyu{background-image:url('https://catai.wiki/c00d06aa-4abb-47f6-ab9b-b06e554b1300/w=3000')}
.cyber-ui .ch-axs{background-image:url('https://catai.wiki/f8c29ded-9b8d-4634-6ae8-dde246fc8c00/w=3000')}
.cyber-ui .ch-bfn{background-image:url('https://catai.wiki/b1e34f9d-a8e4-4bee-f6ba-91605f916a00/w=3000')}
.cyber-ui .ch-wbspyy{background-image:url('https://catai.wiki/79d77e0f-5f57-4f36-c1b6-efae523eb500/w=3000')}
.cyber-ui .ch-fyl{background-image:url('https://catai.wiki/d32edd4b-4d53-4af6-5266-2a3314836c00/w=3000')}
.cyber-ui .ch-wdcydw{background-image:url('https://catai.wiki/f39ab683-2d28-4a34-853c-fbbd4bcb5200/w=3000')}
.cyber-ui .ch-cx{background-image:url('https://catai.wiki/ab7dc26d-53aa-451b-5ae0-97fd103c4100/w=3000')}
.cyber-ui .ch-ze{background-image:url('https://catai.wiki/abe2916d-2266-42b3-addd-126a4749f200/w=3000')}
.cyber-ui .ch-ql{background-image:url('https://catai.wiki/d3523ae9-3b24-4f17-8b58-b75bd8d8f600/w=3000')}
.cyber-ui .ch-lwx{background-image:url('https://catai.wiki/1f8fd352-cf0e-465a-2171-506723c73a00/w=3000')}
.cyber-ui .ch-hs{background-image:url('https://catai.wiki/62d90f39-e8a4-4f12-47ff-3c6b31603c00/w=3000')}
.cyber-ui .ch-qyll{background-image:url('https://catai.wiki/a6e6ae63-1cce-4f34-1cfe-436a606d1e00/w=3000')}
.cyber-ui .ch-tfby{background-image:url('https://catai.wiki/13beecf1-3223-427c-1616-da0adeb95500/w=3000')}
.cyber-ui .ch-aejn{background-image:url('https://catai.wiki/415e1930-9d8b-4116-1984-bc3ce86b1f00/w=3000')}
.cyber-ui .ch-cazzsj{background-image:url('https://catai.wiki/041b2e14-0836-44d3-e34b-0ff935ce4000/w=3000')}
.cyber-ui .ch-awly{background-image:url('https://catai.wiki/22417cfd-725d-4155-8c4b-45c94e085600/w=3000')}
.cyber-ui .ch-klcc{background-image:url('https://catai.wiki/37acf1dd-a51f-484b-d064-298c8528c200/w=3000')}
.cyber-ui .ch-ljm{background-image:url('https://catai.wiki/dde6b313-31f3-4927-c047-81d1a22f1f00/w=3000')}
.cyber-ui .ch-bf{background-image:url('https://catai.wiki/e1da7602-fe0f-46c6-fab5-512047760600/w=3000')}
.cyber-ui .ch-bt{background-image:url('https://catai.wiki/271572c7-793d-41b1-3699-931d737b9400/w=3000')}
.cyber-ui .ch-xqsr{background-image:url('https://catai.wiki/51512648-4e86-41ff-0b44-9fc77c6b3e00/w=3000')}
.cyber-ui .ch-ydm{background-image:url('https://catai.wiki/d9fa096d-2cce-4a89-fd6d-92fb9a27b200/w=3000')}
.cyber-ui .ch-gz{background-image:url('https://catai.wiki/50fface6-4631-4908-db7e-b47ee5651400/w=3000')}
.cyber-ui .ch-al{background-image:url('https://catai.wiki/202c84e5-6db2-4931-672a-f0a45b31fc00/w=3000')}
.cyber-ui .ch-bgm{background-image:url('https://catai.wiki/7cf439d5-1eda-4e6e-e38d-b878b7e83300/w=3000')}
.cyber-ui .ch-ybglr{background-image:url('https://catai.wiki/1ddef01b-5b84-4164-efa4-6b41cb316800/w=3000')}
.cyber-ui .ch-hb{background-image:url('https://catai.wiki/91578daa-5eb9-4f39-69b4-7d7b62cbef00/w=3000')}
.cyber-ui .ch-hy{background-image:url('https://catai.wiki/9837ef11-b627-4a88-81aa-657fbf88d200/w=3000')}
.cyber-ui .ch-ssxz{background-image:url('https://catai.wiki/c40387a0-60b1-4283-f7de-cf7017823e00/w=3000')}
.cyber-ui .ch-dzw{background-image:url('https://catai.wiki/6f2e78dd-c0bd-4b5a-019e-b24d7b212300/w=3000')}
.cyber-ui .ch-zysm{background-image:url('https://catai.wiki/c426761c-f9cd-446d-dc4d-f234b3ce0600/w=3000')}
.cyber-ui .ch-ay{background-image:url('https://catai.wiki/b82280b9-cc35-46ae-a47d-12a581ea2000/w=3000')}
.cyber-ui .ch-hdw{background-image:url('https://catai.wiki/70df2775-6e91-4734-9cff-1ad41cc6ba00/w=3000')}
.cyber-ui .ch-orj{background-image:url('https://catai.wiki/e3337dab-6050-4420-de2d-2a61cee8b500/w=3000')}
.cyber-ui .ch-twtd{background-image:url('https://catai.wiki/1a57f6e0-718a-406f-3efc-dcdaa4d70300/w=3000')}
.cyber-ui .ch-xt{background-image:url('https://catai.wiki/1a359d0b-a28d-4afd-9c59-4a3fdfd01800/w=3000')}
.cyber-ui .ch-chxs{background-image:url('https://catai.wiki/f03a21a2-bec2-44d9-6fa1-acf66e0e1a00/w=3000')}
.cyber-ui .ch-ny{background-image:url('https://catai.wiki/7c8ab909-98f0-418b-495d-7619f79e2a00/w=3000')}
.cyber-ui .ch-default{background-image:url('https://catai.wiki/1c6de5d8-5e1e-4909-96b4-b5b84446e200/w=3000')}
.cyber-ui .ch-m1{background-image:url('https://catai.wiki/d6c7e5c8-02b9-489c-d129-27b771260b00/w=3000')}
.cyber-ui .ch-m2{background-image:url('https://catai.wiki/fec89df9-b401-4f2c-31c4-638de6f91500/w=3000')}
.cyber-ui .ch-m3{background-image:url('https://catai.wiki/c3b5555a-bd10-4ff7-33c2-44a33878fe00/w=3000')}
.cyber-ui .ch-f1{background-image:url('https://catai.wiki/9c0e158d-1807-4dd9-61d0-e1ba1e8c2300/w=3000')}
.cyber-ui .ch-f2{background-image:url('https://catai.wiki/c852f0ef-7a8a-42a4-2882-62019b545300/w=3000')}
.cyber-ui .ch-f3{background-image:url('https://catai.wiki/02c8145f-5443-438b-bae3-3422e536f100/w=3000')}

/* ============ TV电视机 ============ */
.cyber-ui .tv-row {
  display: flex;
  width: 100%;
  gap: 0.6em;
  margin-bottom: 1.5em;
  padding: 0.5em 0 1.5em 0;
  position: relative;
}

.cyber-ui .tv-cell { flex: 1; position: relative; }

.cyber-ui .tv-btn {
  position: relative;
  width: 100%;
  height: 5.5em;
  background: linear-gradient(160deg, var(--tv-shell-light) 0%, var(--tv-shell) 40%, var(--tv-shell-dark) 100%);
  border-top: 2px solid #5a5550;
  border-left: 2px solid #4a4540;
  border-right: 2px solid #1a1815;
  border-bottom: 2px solid #0a0805;
  border-radius: var(--radius);
  padding: 0.5em 0.4em 0.8em 0.4em;
  box-shadow: 0 0.4em 0 -0.1em #1a1815, 0 0.5em 0.8em rgba(0,0,0,0.6), inset 0 0 0.2em rgba(0,0,0,0.5);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyber-ui .tv-btn::before {
  content: '';
  position: absolute;
  bottom: -0.9em;
  left: 25%; right: 25%;
  height: 0.5em;
  background: linear-gradient(to bottom, #2a2825, #1a1815);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 0.2em 0.3em rgba(0,0,0,0.6);
  z-index: 1;
}

.cyber-ui .tv-btn::after {
  content: '';
  position: absolute;
  bottom: 0.3em; right: 0.5em;
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6a6560, #2a2825);
  box-shadow: inset 0 0 0.1em rgba(0,0,0,0.8);
  transition: all 0.3s;
  z-index: 7;
}

.cyber-ui .tv-text {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #001020 0%, #000508 70%, #000 100%);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 1em rgba(0,0,0,0.9), inset 0 0 0.3em rgba(100,140,255,0.2);
  font-size: 1em;
  letter-spacing: 0.15em;
  color: var(--cyan2);
  text-shadow: 0 0 0.3em var(--cyan), 0 0 0.6em var(--accent), 1px 0 var(--red), -1px 0 var(--cyan);
  animation: crtTextGlitch 3.5s infinite;
  text-align: center;
  transition: color 0.3s, text-shadow 0.3s; 
  overflow: hidden;
  z-index: 2;
}

.cyber-ui .tv-text::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, transparent 30%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,30,0.5) 2px, rgba(0,0,30,0.5) 3px);
  opacity: 0.85;
  animation: scanlineFlicker 0.1s infinite;
  pointer-events: none;
  z-index: 3;
}

.cyber-ui .tv-text::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%),
    url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
  opacity: 0.25;
  mix-blend-mode: screen;
  animation: crtNoise 0.12s steps(2) infinite;
  pointer-events: none;
  z-index: 4;
}

.cyber-ui .tv-cell[open] .tv-text {
  background: radial-gradient(ellipse at center, #2050ff 0%, #1030a0 50%, #001050 100%);
  box-shadow: inset 0 0 1.5em rgba(150,200,255,0.6), inset 0 0 0.5em var(--cyan2), 0 0 1.5em rgba(80,130,255,0.8);
  color: #fff;
  text-shadow: 0 0 0.5em #fff, 0 0 1em var(--cyan), 0 0 1.5em var(--accent);
}

.cyber-ui .tv-cell[open] .tv-btn::after {
  background: radial-gradient(circle at 30% 30%, #ff4466, #aa1133);
  box-shadow: inset 0 0 0.1em rgba(0,0,0,0.8), 0 0 0.5em #ff4466;
}

.cyber-ui .tv-cell[open] .tv-text::before { opacity: 0.4; }
.cyber-ui .tv-cell[open] .tv-text::after { opacity: 0.1; }

.cyber-ui .tv-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5em 0 -0.1em #1a1815, 0 0.7em 1em rgba(80,130,255,0.4), inset 0 0 0.2em rgba(0,0,0,0.5);
}

@keyframes scanlineFlicker { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.7; } }
@keyframes crtNoise { 0% { transform: translate(0, 0); } 100% { transform: translate(-3%, -2%); } }
@keyframes crtTextGlitch {
  0%, 90%, 100% { transform: translate(0,0) skew(0deg); }
  92% { transform: translate(-3px, 1px) skew(-15deg); }
  94% { transform: translate(3px, -1px) skew(15deg); }
  96% { transform: translate(0,0) skew(0deg); }
}

/* ============ 面板舞台 ============ */
.cyber-ui .panel-stage { position: relative; width: 100%; margin-top: 1em; }

.cyber-ui .panel-slot {
  display: none;
  width: 100%;
  background: linear-gradient(160deg, rgba(8,15,55,0.8) 0%, rgba(4,8,30,0.9) 100%);
  border: 1px solid var(--border-color);
  border-left: 0.3em solid var(--accent2);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  margin-bottom: 1em;
}

.cyber-ui .panel-stage .panel-slot:last-of-type {
  margin-bottom: 0;
}

.cyber-ui .tv-row:has(.tv-cell:nth-child(1)[open]) ~ .panel-stage .slot-player,
.cyber-ui .tv-row:has(.tv-cell:nth-child(2)[open]) ~ .panel-stage .slot-npc,
.cyber-ui .tv-row:has(.tv-cell:nth-child(3)[open]) ~ .panel-stage .slot-intel,
.cyber-ui .tv-row:has(.tv-cell:nth-child(4)[open]) ~ .panel-stage .slot-system {
  display: block;
}

.cyber-ui .panel-slot::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--accent2), var(--cyan), transparent);
  animation: scanLineMove 3s linear infinite;
  z-index: 10;
}

@keyframes scanLineMove {
  0% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

.cyber-ui .panel-inner { padding: 1.5em; position: relative; }

/* ============ 角色布局 ============ */
.cyber-ui .char-layout { display: flex; flex-direction: column; gap: 1.5em; }

.cyber-ui .char-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: center;
}

.cyber-ui .portrait-box { width: 100%; position: relative; }

.cyber-ui .portrait-img {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 0 1em rgba(68,102,255,0.3), inset 0 0 1em rgba(0,0,0,0.4);
  background-color: rgba(0,5,20,0.5);
}

.cyber-ui .radar-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(160deg, rgba(8,15,55,0.55) 0%, rgba(4,8,30,0.6) 100%);
  border: 1px solid rgba(100,140,255,0.25);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,15,0.4), inset 0 0 1em rgba(68,102,255,0.1);
  padding: 1em;
  aspect-ratio: 1/1;
  position: relative;
}

.cyber-ui .char-bottom { display: flex; flex-direction: column; gap: 0.8em; }

/* ============ SVG雷达图 ============ */
.cyber-ui .radar-svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon points="150,42 243,96 243,204 150,258 57,204 57,96" fill="rgba(80,120,200,0.04)" stroke="rgba(80,120,200,0.35)" stroke-width="1"/><polygon points="150,64.8 222.6,106.8 222.6,193.2 150,235.2 77.4,193.2 77.4,106.8" fill="rgba(80,120,200,0.04)" stroke="rgba(80,120,200,0.30)" stroke-width="1"/><polygon points="150,87.6 202.2,117.6 202.2,182.4 150,212.4 97.8,182.4 97.8,117.6" fill="rgba(80,120,200,0.04)" stroke="rgba(80,120,200,0.25)" stroke-width="1"/><polygon points="150,110.4 181.8,128.4 181.8,171.6 150,189.6 118.2,171.6 118.2,128.4" fill="rgba(80,120,200,0.04)" stroke="rgba(80,120,200,0.20)" stroke-width="1"/><polygon points="150,133.2 161.4,139.2 161.4,160.8 150,166.8 138.6,160.8 138.6,139.2" fill="rgba(80,120,200,0.04)" stroke="rgba(80,120,200,0.15)" stroke-width="1"/><line x1="150" y1="150" x2="150" y2="42" stroke="rgba(80,120,200,0.28)" stroke-width="1"/><line x1="150" y1="150" x2="243" y2="96" stroke="rgba(80,120,200,0.28)" stroke-width="1"/><line x1="150" y1="150" x2="243" y2="204" stroke="rgba(80,120,200,0.28)" stroke-width="1"/><line x1="150" y1="150" x2="150" y2="258" stroke="rgba(80,120,200,0.28)" stroke-width="1"/><line x1="150" y1="150" x2="57" y2="204" stroke="rgba(80,120,200,0.28)" stroke-width="1"/><line x1="150" y1="150" x2="57" y2="96" stroke="rgba(80,120,200,0.28)" stroke-width="1"/></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.cyber-ui .radar-data {
  stroke: rgba(140,200,255,0.9);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(68,102,255,0.6));
}

.cyber-ui .radar-data.npc-shape {
  stroke: rgba(255,212,122,0.95);
  filter: drop-shadow(0 0 6px rgba(255,179,71,0.7));
}

.cyber-ui .radar-dot {
  fill: #ffd47a;
  filter: drop-shadow(0 0 5px #ffb347);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; r: 4.5; }
  50% { opacity: 0.7; r: 5.5; }
}

.cyber-ui .radar-label {
  font-size: 13px;
  fill: rgba(220,235,255,0.95);
  font-weight: bold;
  text-shadow: 0 0 4px rgba(136,170,255,0.6);
  text-anchor: middle;
}

.cyber-ui .radar-rank {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  fill: #ffd47a;
  font-weight: bold;
  filter: drop-shadow(0 0 4px #ffb347);
  text-anchor: middle;
}

/* ============ 信息行 ============ */
.cyber-ui .info-row {
  display: flex;
  background: rgba(0,5,20,0.6);
  border: 1px solid rgba(100,140,255,0.25);
  border-radius: var(--radius-sm);
  padding: 0.7em 1em;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.cyber-ui .info-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
}

.cyber-ui .info-row:hover {
  border-color: var(--accent2);
  box-shadow: 0 0 0.6em rgba(136,170,255,0.2);
}

.cyber-ui .info-row:hover::before { opacity: 1; }

.cyber-ui .info-label {
  color: var(--accent2);
  width: 5em;
  flex-shrink: 0;
  font-size: 1em;
  letter-spacing: 0.1em;
  text-shadow: 0 0 0.4em rgba(136,170,255,0.8);
}

.cyber-ui .info-val {
  color: #f0f4ff;
  flex: 1;
  line-height: 1.6;
  text-shadow: 0 0 0.3em rgba(200,220,255,0.5);
}

.cyber-ui .info-val.red-val { color: var(--red2); }

.cyber-ui .info-row.prog-row {
  flex-direction: column;
  gap: 0.2em;
  overflow: visible;
}

.cyber-ui .prog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cyber-ui .prog-row .info-label { width: auto; }

.cyber-ui .prog-text {
  font-size: 0.85em;
  color: var(--cyan2);
  font-family: monospace;
  text-shadow: 0 0 0.3em var(--cyan);
}

.cyber-ui .prog-text.gold-text { color: var(--gold2); }

.cyber-ui .prog-wrap {
  width: 100%;
  height: 0.8em;
  background: rgba(60,80,180,0.2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  position: relative;
  margin-top: 0.3em;
  overflow: hidden;
}

.cyber-ui .prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--cyan2));
  box-shadow: 0 0 0.6em var(--accent);
  border-radius: var(--radius-sm);
  position: relative;
}

.cyber-ui .prog-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progShine 2s infinite linear;
}

@keyframes progShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.cyber-ui .prog-fill.overload {
  background: linear-gradient(90deg, var(--gold), var(--red));
  box-shadow: 0 0 0.6em var(--red);
}

/* ============ 标题 ============ */
.cyber-ui .sec-title {
  font-size: 1.3em;
  color: var(--gold2);
  background: linear-gradient(90deg, rgba(255,179,71,0.15) 0%, transparent 80%);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.8em;
  margin: 1.2em 0 0.6em 0;
  text-shadow: 0 0 0.5em var(--gold), 0 0 1em rgba(255,179,71,0.5);
  letter-spacing: 0.15em;
}

.cyber-ui .sec-title::before {
  content: '◆';
  margin-right: 0.5em;
  color: var(--gold2);
}

.cyber-ui .sec-title.cyan-title {
  color: var(--cyan2);
  border-left-color: var(--cyan);
  background: linear-gradient(90deg, rgba(68,221,255,0.15) 0%, transparent 80%);
  text-shadow: 0 0 0.5em var(--cyan), 0 0 1em rgba(68,221,255,0.5);
}

.cyber-ui .sec-title.cyan-title::before { color: var(--cyan2); }

.cyber-ui .sec-title.purple-title {
  color: var(--purple2);
  border-left-color: var(--purple);
  background: linear-gradient(90deg, rgba(162,102,255,0.15) 0%, transparent 80%);
  text-shadow: 0 0 0.5em var(--purple), 0 0 1em rgba(162,102,255,0.5);
}

.cyber-ui .sec-title.purple-title::before { color: var(--purple2); }

.cyber-ui .mem-title {
  margin-top: 1em;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.cyber-ui .mem-title.gold-title { color: var(--gold2); }

.cyber-ui .mem-title.cyan-title {
  color: var(--cyan2);
  margin-top: 1.5em;
}

/* ============ NPC交互区 ============ */
.cyber-ui .npc-mode { width: 100%; position: relative; }

.cyber-ui .npc-strip-summary {
  display: block;
  cursor: pointer;
  width: 100%;
}

.cyber-ui .npc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  width: 100%;
  transition: all 0.3s;
}

.cyber-ui .npc-cell {
  flex: 0 1 calc(20% - 0.8em);
  min-width: 5em;
  max-width: calc(20% - 0.8em);
  border: 1px solid var(--border-color);
  background: rgba(0,0,0,0.6);
  padding: 0.5em;
  text-align: center;
  border-radius: var(--radius);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.cyber-ui .npc-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(136,170,255,0.2) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s;
  pointer-events: none;
}

.cyber-ui .npc-cell:hover {
  border-color: var(--accent2);
  box-shadow: 0 0 1em rgba(136,170,255,0.4);
  transform: translateY(-3px);
}

.cyber-ui .npc-cell:hover::before { transform: translateX(100%); }

.cyber-ui .npc-portrait {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: rgba(0,5,20,0.5);
  border-radius: var(--radius-sm);
  margin-bottom: 0.5em;
  filter: brightness(0.9) contrast(1.1);
  transition: filter 0.3s;
}

.cyber-ui .npc-cell:hover .npc-portrait {
  filter: brightness(1.1) contrast(1.2);
}

.cyber-ui .npc-name {
  color: var(--cyan2);
  font-size: 1em;
  letter-spacing: 0.1em;
  text-shadow: 0 0 0.4em var(--cyan), 0 0 0.8em rgba(68,221,255,0.5);
  padding: 0.3em 0;
}

.cyber-ui .npc-mode[open] > .npc-strip-summary {
  display: block;
  position: absolute;
  top: 1.5em; left: 1.5em;
  width: 12em;
  height: 2.5em;
  z-index: 10;
  opacity: 0;
}

.cyber-ui .npc-mode[open] > .npc-strip-summary .npc-strip { display: none; }

.cyber-ui .npc-detail-wrap {
  width: 100%;
  position: relative;
  padding-top: 3em;
}

.cyber-ui .npc-mode[open] > .npc-detail-wrap::before {
  content: '⬅ 返回NPC列表';
  position: absolute;
  top: 0; left: 0;
  padding: 0.5em 1.2em;
  background: linear-gradient(135deg, rgba(40,70,180,0.6), rgba(20,40,120,0.6));
  border: 1px solid var(--accent2);
  border-radius: var(--radius);
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.1em;
  text-shadow: 0 0 0.4em var(--accent);
  pointer-events: none;
  z-index: 5;
}

.cyber-ui .npc-detail-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.cyber-ui .npc-sub-cell {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: rgba(5,10,30,0.5);
  overflow: hidden;
  transition: all 0.3s;
}

.cyber-ui .npc-sub-cell[open] {
  border-color: var(--gold);
  box-shadow: 0 0 1em rgba(255,179,71,0.4);
}

.cyber-ui .npc-sub-summary {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.8em 1em;
  cursor: pointer;
  transition: all 0.3s;
}

.cyber-ui .npc-sub-summary:hover { background: rgba(40,60,140,0.3); }

.cyber-ui .npc-sub-cell[open] .npc-sub-summary {
  background: linear-gradient(90deg, rgba(60,40,10,0.4), transparent);
  border-bottom: 1px solid rgba(255,179,71,0.3);
}

.cyber-ui .npc-sub-portrait {
  width: 3.5em;
  height: 3.5em;
  background-size: cover;
  background-position: center top;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  flex-shrink: 0;
}

.cyber-ui .npc-sub-cell[open] .npc-sub-portrait {
  border-color: var(--gold);
  box-shadow: 0 0 0.6em var(--gold);
}

.cyber-ui .npc-sub-name {
  color: var(--cyan2);
  font-size: 1.1em;
  letter-spacing: 0.1em;
  text-shadow: 0 0 0.4em var(--cyan);
  flex: 1;
}

.cyber-ui .npc-sub-cell[open] .npc-sub-name {
  color: var(--gold2);
  text-shadow: 0 0 0.5em var(--gold);
}

.cyber-ui .npc-sub-cell[open] .npc-sub-summary::after {
  content: '▲';
  color: var(--gold2);
  font-size: 0.9em;
}

.cyber-ui .npc-sub-cell:not([open]) .npc-sub-summary::after {
  content: '▼';
  color: var(--cyan2);
  font-size: 0.9em;
}

.cyber-ui .npc-sub-cell > .char-layout,
.cyber-ui .npc-sub-cell > div:not(.npc-sub-summary) {
  padding: 1.2em;
}

.cyber-ui .npc-empty-hint {
  padding: 3em 2em;
  text-align: center;
  color: rgba(150,180,220,0.5);
  font-style: italic;
  letter-spacing: 0.1em;
  border: 1px dashed rgba(100,140,255,0.2);
  border-radius: var(--radius);
  background: rgba(0,5,20,0.3);
}

.cyber-ui .npc-empty-hint::before {
  content: '◇ ';
  color: rgba(150,180,220,0.4);
}

/* ============ 表格 ============ */
.cyber-ui .auto-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 0.5em;
  font-size: 0.95em;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: table;
}

.cyber-ui .auto-table th, 
.cyber-ui .auto-table td {
  border: 1px solid rgba(100,140,255,0.3);
  padding: 0.8em;
  text-align: left;
}

.cyber-ui .auto-table th {
  background: rgba(20,40,120,0.5);
  color: var(--gold2);
  text-shadow: 0 0 0.4em var(--gold);
  letter-spacing: 0.1em;
}

.cyber-ui .auto-table th.w-3 { width: 3em; }
.cyber-ui .auto-table th.w-8 { width: 8em; }

.cyber-ui .auto-table tbody tr {
  background: rgba(5,10,30,0.5);
  transition: background 0.2s;
}

.cyber-ui .auto-table tbody tr:hover { background: rgba(20,40,100,0.5); }

.cyber-ui .auto-table tbody { counter-reset: row-num; }

.cyber-ui .auto-table tbody tr { counter-increment: row-num; }

.cyber-ui .auto-table tbody tr td:first-child {
  text-align: center;
  color: var(--gold2);
  font-family: monospace;
  text-shadow: 0 0 0.3em var(--gold);
}

.cyber-ui .auto-table tbody tr td:first-child:empty::before {
  content: counter(row-num);
}

/* ============ 命运罗盘 ============ */
.cyber-ui .compass-box {
  background: rgba(20,10,40,0.6);
  border: 1px solid var(--purple);
  border-radius: var(--radius);
  padding: 1.5em;
  margin-top: 1.5em;
  position: relative;
  overflow: hidden;
}

.cyber-ui .compass-box::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(162,102,255,0.1) 0%, transparent 50%);
  animation: radarSweep 8s linear infinite;
  pointer-events: none;
}

@keyframes radarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cyber-ui .compass-title {
  font-size: 1.5em;
  color: var(--purple2);
  text-align: center;
  text-shadow: 0 0 0.5em var(--purple), 0 0 1em rgba(162,102,255,0.5);
  letter-spacing: 0.15em;
  margin-bottom: 0.6em;
  position: relative;
  z-index: 1;
}

.cyber-ui .compass-title::before {
  content: '◆';
  margin-right: 0.5em;
  color: var(--purple2);
}

.cyber-ui .compass-desc {
  margin-bottom: 1.5em;
  color: rgba(200,220,255,0.8);
  border-bottom: 1px dashed rgba(100,140,255,0.3);
  padding-bottom: 1em;
  position: relative;
  z-index: 1;
}

.cyber-ui .compass-opt {
  margin: 0.8em 0;
  padding: 0.8em 1em;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(162,102,255,0.3);
  border-left: 3px solid var(--purple2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s;
  line-height: 1.5;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 0.3em rgba(200,180,255,0.5);
}

.cyber-ui .compass-opt:hover {
  background: rgba(60,30,100,0.6);
  border-left-color: var(--gold);
  border-left-width: 6px;
  padding-left: 1.5em;
  box-shadow: inset 0 0 1em rgba(200,160,255,0.2), 0 0 0.6em rgba(162,102,255,0.4);
}

/* ============ 思维链:星图观测仪(独立作用域,不依赖.cyber-ui) ============ */
.engine-logic {
  width: 100%;
  margin-bottom: 1.5em;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(80,40,140,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(40,80,160,0.2) 0%, transparent 50%),
    linear-gradient(160deg, rgba(8,5,30,0.95) 0%, rgba(2,1,15,0.98) 100%);
  border: 1px solid rgba(140,100,220,0.4);
  border-radius: 0.8em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 1.5em rgba(80,40,140,0.3), inset 0 0 2em rgba(20,10,50,0.6);
  font-family: 'Ma Shan Zheng', 'KaiTi', '楷体', cursive;
  color: #fff;
  box-sizing: border-box;
}

.engine-logic *, .engine-logic *::before, .engine-logic *::after {
  box-sizing: border-box;
  font-family: 'Ma Shan Zheng', 'KaiTi', '楷体', cursive;
}

.engine-logic > summary {
  list-style: none;
  cursor: pointer;
}

.engine-logic > summary::-webkit-details-marker { display: none; }
.engine-logic > summary::marker { display: none; content: ''; }

.engine-logic::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(200,220,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 38% 22%, rgba(180,200,255,0.7), transparent),
    radial-gradient(1px 1px at 52% 65%, #fff, transparent),
    radial-gradient(1px 1px at 65% 30%, rgba(220,200,255,0.8), transparent),
    radial-gradient(2px 2px at 75% 55%, rgba(255,220,180,0.9), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(180,220,255,0.7), transparent),
    radial-gradient(1px 1px at 92% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 18% 75%, rgba(200,180,255,0.8), transparent),
    radial-gradient(1px 1px at 45% 85%, rgba(220,220,255,0.6), transparent),
    radial-gradient(1px 1px at 70% 80%, rgba(255,200,200,0.7), transparent),
    radial-gradient(1.5px 1.5px at 88% 90%, rgba(200,220,255,0.9), transparent);
  animation: starTwinkle 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.engine-logic::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -100%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,150,255,0.6), rgba(255,255,255,0.9), rgba(180,150,255,0.6), transparent);
  box-shadow: 0 0 0.8em rgba(180,150,255,0.6);
  animation: starTrailMove 6s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes starTrailMove {
  0% { left: -100%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.engine-logic > summary {
  display: block;
  padding: 1.2em 1.5em 1.2em 4em;
  cursor: pointer;
  position: relative;
  z-index: 3;
  color: rgba(220,200,255,0.95);
  font-size: 1em;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-shadow: 0 0 0.4em rgba(180,150,255,0.7), 0 0 0.8em rgba(140,100,220,0.4);
  border-bottom: 1px dashed rgba(140,100,220,0.3);
  transition: all 0.4s;
}

.engine-logic > summary:hover {
  background: linear-gradient(90deg, rgba(80,40,140,0.2) 0%, transparent 60%);
  border-bottom-color: rgba(180,150,255,0.6);
}

.engine-logic > summary::before {
  content: '';
  position: absolute;
  left: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: 
    radial-gradient(circle at center, transparent 30%, rgba(180,150,255,0.3) 31%, rgba(180,150,255,0.3) 33%, transparent 34%),
    radial-gradient(circle at center, transparent 50%, rgba(180,150,255,0.4) 51%, rgba(180,150,255,0.4) 53%, transparent 54%),
    radial-gradient(circle at center, transparent 70%, rgba(180,150,255,0.5) 71%, rgba(180,150,255,0.5) 73%, transparent 74%),
    radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(180,150,255,0.6) 30%, transparent 50%);
  box-shadow: 0 0 0.8em rgba(180,150,255,0.7), inset 0 0 0.4em rgba(255,255,255,0.5);
  animation: observatorRotate 8s linear infinite;
}

@keyframes observatorRotate {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

.engine-logic > summary::after {
  content: '◇ 观测中';
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85em;
  color: rgba(180,150,255,0.7);
  letter-spacing: 0.15em;
  text-shadow: 0 0 0.4em rgba(180,150,255,0.5);
  animation: observatorPulse 2s ease-in-out infinite;
}

.engine-logic[open] > summary::after {
  content: '◆ 已展开';
  color: rgba(255,220,180,0.9);
  text-shadow: 0 0 0.4em rgba(255,179,71,0.6);
  animation: none;
}

@keyframes observatorPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.engine-logic[open]::before {
  animation-duration: 2s;
}

.engine-logic[open] > summary {
  background: linear-gradient(90deg, rgba(80,40,140,0.25) 0%, rgba(40,20,80,0.15) 100%);
}

/* ============ 移动端适配 ============ */
@media only screen and (max-width: 700px) {
  .cyber-ui .char-top { 
    grid-template-columns: 1fr; 
    gap: 1em;
  }
  .cyber-ui .tv-btn { height: 4.5em; }
  .cyber-ui .tv-text { font-size: 0.8em; letter-spacing: 0.05em; }
  .cyber-ui .npc-cell { 
    flex: 0 1 calc(33.33% - 0.7em); 
    max-width: calc(33.33% - 0.7em); 
  }
  .cyber-ui .info-label { width: 4em; font-size: 0.9em; }
  .cyber-ui .radar-label { font-size: 11px; }
  .cyber-ui .radar-rank { font-size: 11px; }
  .engine-logic &gt; summary {
    padding: 1em 1em 1em 3.5em;
    font-size: 0.9em;
  }
  .engine-logic &gt; summary::before {
    left: 0.8em;
    width: 1.6em;
    height: 1.6em;
  }
  .engine-logic &gt; summary::after {
    font-size: 0.75em;
    right: 0.8em;
  }
  /* === 表格移动端横向滚动(纯CSS方案) === */
  .cyber-ui .auto-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.85em;
    scrollbar-width: thin;
    scrollbar-color: rgba(136,170,255,0.5) rgba(0,5,20,0.4);
  }
  .cyber-ui .auto-table::-webkit-scrollbar {
    height: 6px;
  }
  .cyber-ui .auto-table::-webkit-scrollbar-track {
    background: rgba(0,5,20,0.4);
    border-radius: 3px;
  }
  .cyber-ui .auto-table::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, 
      rgba(136,170,255,0.6), 
      rgba(180,150,255,0.6), 
      rgba(255,179,71,0.5));
    border-radius: 3px;
    box-shadow: 0 0 0.4em rgba(136,170,255,0.4);
  }
  .cyber-ui .auto-table thead,
  .cyber-ui .auto-table tbody {
    display: table;
    width: max-content;
    min-width: 100%;
  }
  .cyber-ui .auto-table th,
  .cyber-ui .auto-table td {
    padding: 0.6em 0.8em;
    white-space: normal;
  }
  .cyber-ui .auto-table th:first-child,
  .cyber-ui .auto-table td:first-child {
    white-space: nowrap;
  }
  .cyber-ui .auto-table th.w-8,
  .cyber-ui .auto-table td:nth-child(2),
  .cyber-ui .auto-table td:nth-child(3) {
    white-space: nowrap;
  }
  .cyber-ui .auto-table td:last-child {
    min-width: 14em;
    white-space: normal;
  }
}

/* ============ 平台界面美化:契约者夜空主题(Rilichat 适配版) ============ */

/* === 通用流光动画 === */
@keyframes shineSweep {
  0% { 
    transform: translateX(-150%) skewX(-25deg); 
    opacity: 0;
  }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { 
    transform: translateX(250%) skewX(-25deg); 
    opacity: 0;
  }
}

/* === 全局markdown渲染区基底 === */
.rili-markdown-renderer {
  color: #e0e8ff !important;
  font-family: 'Ma Shan Zheng', 'KaiTi', '楷体', cursive !important;
}

.rili-markdown-renderer p,
.rili-markdown-renderer li,
.rili-markdown-renderer blockquote {
  color: #e0e8ff !important;
  text-shadow: 0 0 0.3em rgba(100,140,255,0.2);
  line-height: 1.8 !important;
  letter-spacing: 0.03em !important;
}

.rili-markdown-renderer strong {
  color: #ffd47a !important;
  text-shadow: 0 0 0.4em rgba(255,179,71,0.4) !important;
}

.rili-markdown-renderer em {
  color: #c9a5ff !important;
}

.rili-markdown-renderer pre,
.rili-markdown-renderer code {
  font-family: 'Consolas', 'Monaco', monospace !important;
  letter-spacing: normal !important;
}

/* === Markdown 杂项:引用块/分割线/链接 === */
.rili-markdown-renderer blockquote {
  border-left: 3px solid rgba(180,150,255,0.6) !important;
  background: rgba(80,40,140,0.15) !important;
  padding: 0.5em 1em !important;
  margin: 1em 0 !important;
  border-radius: 0 6px 6px 0 !important;
}

.rili-markdown-renderer hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(180,150,255,0.5), 
    rgba(255,179,71,0.5), 
    rgba(180,150,255,0.5), 
    transparent) !important;
  margin: 1.5em 0 !important;
}

.rili-markdown-renderer a {
  color: #ffd47a !important;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(255,179,71,0.5) !important;
  transition: all 0.2s !important;
}

.rili-markdown-renderer a:hover {
  color: #fff5d4 !important;
  border-bottom-color: rgba(255,220,150,0.8) !important;
  text-shadow: 0 0 0.4em rgba(255,179,71,0.6) !important;
}

/* === 对话气泡:深邃星空容器 === */
.is-user > div,
.is-assistant > div {
  background-color: #0a1228 !important;
  background-image: 
    radial-gradient(ellipse at top left, rgba(80,120,200,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(140,100,220,0.06) 0%, transparent 50%),
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"%3E%3Cpath fill="%23446eff" fill-opacity="0.05" d="M1 3h1v1H1V3zm3-2h1v1H4V1z"/%3E%3C/svg%3E') !important;
  border: 1px solid rgba(100,140,255,0.35) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 4px 20px rgba(0,5,30,0.6),
    inset 0 0 1.5em rgba(20,40,100,0.3),
    0 0 0.8em rgba(80,120,200,0.15) !important;
  color: #e0e8ff !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 1em !important;
}

/* 气泡顶部流星扫描线 */
.is-user > div::before,
.is-assistant > div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(136,170,255,0.6), 
    rgba(255,179,71,0.4), 
    rgba(136,170,255,0.6), 
    transparent) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* === 气泡底部操作按钮 === */
.is-user > div button,
.is-assistant > div button {
  background: linear-gradient(135deg, rgba(20,40,90,0.85), rgba(10,25,60,0.85)) !important;
  color: #c9d8ff !important;
  border: 1px solid rgba(100,140,255,0.4) !important;
  border-radius: 6px !important;
  box-shadow: 
    0 2px 6px rgba(0,5,30,0.5),
    inset 0 0 0.4em rgba(80,120,200,0.15) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 0 0.3em rgba(136,170,255,0.5) !important;
  position: relative !important;
  overflow: hidden !important;
}

.is-user > div button:hover,
.is-assistant > div button:hover {
  background: linear-gradient(135deg, rgba(40,70,140,0.9), rgba(20,40,90,0.9)) !important;
  color: #ffd47a !important;
  border-color: rgba(255,179,71,0.6) !important;
  box-shadow: 
    0 3px 10px rgba(80,120,200,0.4),
    inset 0 0 0.6em rgba(100,140,255,0.2),
    0 0 0.8em rgba(255,179,71,0.3) !important;
  transform: translateY(-1px) !important;
  text-shadow: 0 0 0.4em rgba(255,179,71,0.6) !important;
}

.is-user > div button svg,
.is-assistant > div button svg {
  stroke: #c9d8ff !important;
  filter: drop-shadow(0 0 0.3em rgba(136,170,255,0.5));
  transition: all 0.2s !important;
}

.is-user > div button:hover svg,
.is-assistant > div button:hover svg {
  stroke: #ffd47a !important;
  filter: drop-shadow(0 0 0.4em rgba(255,179,71,0.6));
}

/* 气泡按钮流光 */
.is-user > div button::before,
.is-assistant > div button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 30% !important;
  height: 100% !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(136,170,255,0.3) 30%, 
    rgba(255,220,150,0.6) 50%, 
    rgba(136,170,255,0.3) 70%, 
    transparent 100%) !important;
  transform: translateX(-150%) skewX(-25deg);
  pointer-events: none !important;
  z-index: 1 !important;
}

.is-user > div button:hover::before,
.is-assistant > div button:hover::before {
  animation: shineSweep 0.9s ease-out !important;
}

.is-user > div button > *,
.is-assistant > div button > * {
  position: relative;
  z-index: 2;
}

/* === 输入框外层容器透明化 === */
form#prompt-input {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* === 输入框组包裹层 === */
div[data-slot="input-group"] {
  background-color: #0a1228 !important;
  background-image: 
    radial-gradient(ellipse at center, rgba(80,120,200,0.06) 0%, transparent 70%) !important;
  border: 1px solid rgba(100,140,255,0.4) !important;
  border-radius: 12px !important;
  box-shadow: 
    inset 0 0 0.8em rgba(20,40,100,0.5),
    inset 0 1px 2px rgba(0,5,20,0.6),
    0 0 0.6em rgba(80,120,200,0.15),
    0 4px 20px rgba(0,5,30,0.5) !important;
  transition: all 0.3s ease !important;
}

div[data-slot="input-group"]:focus-within {
  border-color: rgba(255,179,71,0.6) !important;
  box-shadow: 
    inset 0 0 0.8em rgba(40,60,140,0.5),
    inset 0 1px 2px rgba(0,5,20,0.6),
    0 0 1em rgba(255,179,71,0.3),
    0 4px 20px rgba(0,5,30,0.6) !important;
}

/* === 输入框本体 === */
#prompt-input textarea {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #e0e8ff !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-family: 'Ma Shan Zheng', 'KaiTi', '楷体', cursive !important;
  letter-spacing: 0.03em !important;
}

#prompt-input textarea:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#prompt-input textarea::placeholder {
  color: rgba(180,200,240,0.45) !important;
  font-style: italic;
}

/* === 输入框上下方功能按钮 === */
#prompt-input-header button,
#prompt-input-footer button {
  background: linear-gradient(135deg, #1a2a55, #0f1838) !important;
  color: #c9d8ff !important;
  border: 1px solid rgba(100,140,255,0.4) !important;
  border-radius: 8px !important;
  box-shadow: 
    0 3px 8px rgba(0,5,30,0.6),
    inset 0 0 0.5em rgba(80,120,200,0.2) !important;
  font-weight: 600 !important;
  font-family: 'Ma Shan Zheng', 'KaiTi', '楷体', cursive !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 0 0.3em rgba(136,170,255,0.5) !important;
  position: relative !important;
  overflow: hidden !important;
}

#prompt-input-header button:hover,
#prompt-input-footer button:hover {
  background: linear-gradient(135deg, #2a3f7a, #1a2a55) !important;
  color: #ffd47a !important;
  border-color: rgba(255,179,71,0.7) !important;
  box-shadow: 
    0 5px 14px rgba(80,120,200,0.5),
    inset 0 0 0.8em rgba(136,170,255,0.25),
    0 0 1em rgba(255,179,71,0.4) !important;
  transform: translateY(-2px) !important;
  text-shadow: 0 0 0.5em rgba(255,179,71,0.7) !important;
}

#prompt-input-header button svg,
#prompt-input-footer button svg {
  stroke: #c9d8ff !important;
  filter: drop-shadow(0 0 0.3em rgba(136,170,255,0.5));
  transition: all 0.2s !important;
}

#prompt-input-header button:hover svg,
#prompt-input-footer button:hover svg {
  stroke: #ffd47a !important;
  filter: drop-shadow(0 0 0.4em rgba(255,179,71,0.6));
}

#prompt-input-footer .truncate {
  color: #c9d8ff !important;
  text-shadow: 0 0 0.3em rgba(136,170,255,0.5) !important;
}

#prompt-input-footer button:hover .truncate {
  color: #ffd47a !important;
  text-shadow: 0 0 0.4em rgba(255,179,71,0.6) !important;
}

#prompt-input-footer button img {
  filter: brightness(0.9) hue-rotate(220deg) saturate(0.8) !important;
  transition: filter 0.3s !important;
}

#prompt-input-footer button:hover img {
  filter: brightness(1.1) hue-rotate(20deg) saturate(1.2) sepia(0.3) !important;
}

/* 功能按钮流光 */
#prompt-input-header button::before,
#prompt-input-footer button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 35% !important;
  height: 100% !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(136,170,255,0.4) 25%, 
    rgba(255,220,150,0.8) 50%, 
    rgba(255,179,71,0.5) 65%, 
    rgba(136,170,255,0.4) 80%, 
    transparent 100%) !important;
  transform: translateX(-150%) skewX(-25deg);
  pointer-events: none !important;
  z-index: 1 !important;
  filter: blur(1px) !important;
}

#prompt-input-header button:hover::before,
#prompt-input-footer button:hover::before {
  animation: shineSweep 1s ease-out !important;
}

#prompt-input-header button > *,
#prompt-input-footer button > * {
  position: relative;
  z-index: 2;
}

/* === 发送按钮特化(琥珀金强调) === */
#prompt-input-footer button[type="submit"] {
  background: linear-gradient(135deg, #4a3a1a, #2a200a) !important;
  color: #ffd47a !important;
  border-color: rgba(255,179,71,0.8) !important;
  box-shadow: 
    0 3px 10px rgba(80,60,20,0.6),
    inset 0 0 0.6em rgba(255,179,71,0.3),
    0 0 0.8em rgba(255,179,71,0.5) !important;
  text-shadow: 
    0 0 0.4em rgba(255,179,71,0.8),
    0 0 0.8em rgba(255,179,71,0.4) !important;
  font-weight: 700 !important;
}

#prompt-input-footer button[type="submit"]:hover {
  background: linear-gradient(135deg, #5a4a2a, #3a2a1a) !important;
  color: #fff5d4 !important;
  box-shadow: 
    0 5px 14px rgba(120,90,30,0.7),
    inset 0 0 0.8em rgba(255,200,100,0.4),
    0 0 1.2em rgba(255,179,71,0.7) !important;
  transform: translateY(-2px) !important;
}

#prompt-input-footer button[type="submit"] svg {
  stroke: #ffd47a !important;
  filter: drop-shadow(0 0 0.4em rgba(255,179,71,0.6)) !important;
}

#prompt-input-footer button[type="submit"]:hover svg {
  stroke: #fff5d4 !important;
  filter: drop-shadow(0 0 0.5em rgba(255,179,71,0.8)) !important;
}

/* ═══ Rilichat 加载动画容器适配 ═══ */
.flex.items-center.justify-center.size-6 { 
  opacity: 1 !important; 
}

.is-assistant.w-fit { 
  width: 100% !important; 
}

.is-assistant > .border.border-muted:has(.flex.items-center.justify-center.size-6) {
  width: 100% !important; 
  background: transparent !important;
  border: none !important; 
  padding: 0 !important;
}

.is-assistant .space-y-3:has(.flex.items-center.justify-center.size-6) {
  display: flex; 
  justify-content: center; 
  width: 100%;
}

/* === 加载动画:契约者激活之星(纯GIF居中自适应版) === */

/* 父容器:让GIF居中显示 */
div:has(> .flex.items-center.justify-center.size-6 > .flex.gap-2) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  padding: 1em 0 !important;
}

/* 隐藏所有原版加载动画的伪元素和文字 */
div:has(> .flex.items-center.justify-center.size-6 > .flex.gap-2)::before,
div:has(> .flex.items-center.justify-center.size-6 > .flex.gap-2)::after {
  content: none !important;
  display: none !important;
}

.flex.items-center.justify-center.size-6 > .flex.gap-2::before,
.flex.items-center.justify-center.size-6 > .flex.gap-2::after {
  content: none !important;
  display: none !important;
}

/* GIF主体:横向比例+自适应大小+明显圆角 */
.flex.items-center.justify-center.size-6 > .flex.gap-2 {
  display: block !important;
  position: relative !important;
  width: clamp(160px, 40vw, 320px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  background-image: url('https://pic1.imgdb.cn/item/69f767ea81eabc88d3848ea0.gif') !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border-radius: 18px !important;
  box-shadow: 
    0 0 1em rgba(136,170,255,0.4),
    0 0 2em rgba(255,179,71,0.2),
    inset 0 0 0.5em rgba(0,5,30,0.3) !important;
  border: 1px solid rgba(180,150,255,0.4) !important;
  clip-path: none !important;
  animation: none !important;
  margin: 0 !important;
}

/* === 滚动条:夜空主题 === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0,5,20,0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(136,170,255,0.5), 
    rgba(180,150,255,0.5), 
    rgba(255,179,71,0.4));
  border-radius: 4px;
  box-shadow: 0 0 0.4em rgba(136,170,255,0.4);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    rgba(136,170,255,0.7), 
    rgba(180,150,255,0.7), 
    rgba(255,179,71,0.6));
}

/* === 弹窗/对话框:夜空主题 === */
[role="dialog"],
[data-state="open"][role="dialog"] {
  background: linear-gradient(160deg, 
    rgba(8,15,55,0.95) 0%, 
    rgba(4,8,30,0.98) 100%) !important;
  border: 1px solid rgba(100,140,255,0.4) !important;
  box-shadow: 
    0 8px 32px rgba(0,5,30,0.7),
    0 0 1.5em rgba(80,40,140,0.3) !important;
  color: #e0e8ff !important;
}

/* === 下拉菜单/列表(模型选择列表/选项菜单) === */
[role="listbox"],
[role="menu"],
[data-radix-popper-content-wrapper] > div {
  background: linear-gradient(160deg, 
    rgba(8,15,55,0.95), 
    rgba(4,8,30,0.98)) !important;
  border: 1px solid rgba(180,150,255,0.4) !important;
  box-shadow: 
    0 8px 24px rgba(0,5,30,0.7),
    0 0 1em rgba(140,100,220,0.3) !important;
  border-radius: 8px !important;
  color: #e0e8ff !important;
}

[role="option"],
[role="menuitem"] {
  color: #c9d8ff !important;
  transition: all 0.2s !important;
}

[role="option"]:hover,
[role="menuitem"]:hover,
[role="option"][data-highlighted],
[role="menuitem"][data-highlighted] {
  background: rgba(80,40,140,0.4) !important;
  color: #ffd47a !important;
  text-shadow: 0 0 0.4em rgba(255,179,71,0.5) !important;
}

[role="option"][aria-selected="true"],
[role="option"][data-state="checked"] {
  background: linear-gradient(135deg, 
    rgba(80,60,20,0.5), 
    rgba(60,40,10,0.6)) !important;
  color: #ffd47a !important;
  text-shadow: 0 0 0.4em rgba(255,179,71,0.6) !important;
}

/* === Toast 通知 === */
[data-sonner-toast],
.sonner-toast {
  background: linear-gradient(135deg, 
    rgba(20,40,90,0.95), 
    rgba(10,25,60,0.95)) !important;
  border: 1px solid rgba(136,170,255,0.5) !important;
  color: #e0e8ff !important;
  box-shadow: 
    0 4px 16px rgba(0,5,30,0.6),
    0 0 0.8em rgba(136,170,255,0.3) !important;
  border-radius: 8px !important;
}

[data-sonner-toast][data-type="success"] {
  border-color: rgba(255,179,71,0.6) !important;
  box-shadow: 
    0 4px 16px rgba(0,5,30,0.6),
    0 0 0.8em rgba(255,179,71,0.4) !important;
}

[data-sonner-toast][data-type="error"] {
  border-color: rgba(255,100,120,0.6) !important;
  box-shadow: 
    0 4px 16px rgba(0,5,30,0.6),
    0 0 0.8em rgba(255,100,120,0.4) !important;
}

/* === 全局markdown渲染区基底 === */
.rili-markdown-renderer p,
.rili-markdown-renderer li,
.rili-markdown-renderer blockquote {
  color: #e0e8ff !important;
  font-size: 16px !important; /* &lt;--- 就是加这行！强制放大字号 */
  text-shadow: 0 0 0.3em rgba(100,140,255,0.2);
  line-height: 1.8 !important;
  letter-spacing: 0.03em !important;
}