* { box-sizing: border-box; }
body { background:#0e0e16; color:#e6e6ec; font-family:system-ui,'Segoe UI',sans-serif; margin:0; }
h1 { font-size:22px; margin:0 0 6px; } h2 { font-size:15px; color:#cdd6e0; margin:0 0 12px; }
.muted { color:#7e8694; font-size:12px; }

button { background:#2a3344; color:#e6e6ec; border:1px solid #3a4456; border-radius:6px; padding:7px 14px; cursor:pointer; font-size:13px; transition:.15s; }
button:hover { background:#34405580; border-color:#4a5670; }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:linear-gradient(135deg,#7b3ff2,#c0392b); border:none; font-weight:600; padding:9px 20px; }
button.primary:hover { filter:brightness(1.1); }

input[type=text], input[type=number] { background:#161a24; border:1px solid #2a3344; color:#e6e6ec; border-radius:6px; padding:8px 11px; font-size:13px; }
input.full { width:100%; margin-top:4px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row input[type=text] { flex:1; min-width:280px; }
input[type=number] { width:60px; }

/* 登录 */
#login-view { display:flex; min-height:100vh; align-items:center; justify-content:center; }
.login-box { text-align:center; background:#161a24; padding:48px 56px; border-radius:14px; border:1px solid #242b3a; }
.login-box .primary { margin-top:16px; }

/* 布局 */
header { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; border-bottom:1px solid #1c2230; position:sticky; top:0; background:#0e0e16; z-index:5; }
main { max-width:1080px; margin:0 auto; padding:20px 24px 60px; }
.card { background:#141823; border:1px solid #212838; border-radius:12px; padding:18px 20px; margin-bottom:18px; }
.preview { max-height:180px; border-radius:8px; margin-top:12px; border:1px solid #2a3344; }

/* Tab */
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tab { background:#1b2130; }
.tab.active { background:#7b3ff230; border-color:#7b3ff2; color:#d9c7ff; }

/* NPC 皮肤选择器 */
#pane-npc { max-height:340px; overflow-y:auto; padding-right:6px; }
.npcgrp { margin-bottom:14px; }
.npcname { font-size:12px; color:#9fb0c4; margin-bottom:6px; }
.skinrow { display:flex; gap:8px; flex-wrap:wrap; }
.skin { position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; border:2px solid #2a3344; cursor:pointer; transition:.12s; }
.skin:hover { border-color:#4a5670; }
.skin.sel { border-color:#7b3ff2; box-shadow:0 0 0 2px #7b3ff255; }
.skin img { width:100%; height:100%; object-fit:cover; display:block; }
.skin span { position:absolute; right:2px; bottom:2px; background:#000a; color:#fff; font-size:10px; padding:0 4px; border-radius:4px; }

/* 已上传图片 */
.uploaded-grid { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.up-cell { position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; border:2px solid #2a3344; cursor:pointer; }
.up-cell:hover { border-color:#7b3ff2; }
.up-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.up-del { position:absolute; top:2px; right:2px; width:18px; height:18px; padding:0; line-height:15px; border-radius:50%; background:#000b; color:#fff; border:none; font-size:13px; cursor:pointer; }
.up-del:hover { background:#d33; }

/* 调性 chips */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.chip { background:#1b2130; border:1px solid #2a3344; }
.chip.active { background:#7b3ff230; border-color:#7b3ff2; color:#d9c7ff; }

/* 生成区块（历史 + 本次） */
.genblock { border:1px solid #1d2433; border-radius:10px; padding:12px 14px; margin-bottom:14px; background:#10141d; }
.genhead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.genhead .gstatus { font-size:13px; font-weight:600; color:#cdd6e0; }
.genhead .gtimer { font-size:12px; color:#ffd479; font-variant-numeric:tabular-nums; }
.genhead .gmodel { font-size:11px; color:#9b8cff; background:#7b3ff222; border:1px solid #7b3ff255; border-radius:10px; padding:1px 8px; }
.genhead .gprompt { flex-basis:100%; font-size:11px; }
.genhead .gdel { margin-left:auto; padding:3px 10px; font-size:12px; background:#3a1f24; border-color:#5a2a33; color:#ff9aa8; }
.genhead .gdel:hover { background:#4a2730; }

/* 主体：左原图 + 右结果 */
.genbody { display:flex; gap:16px; align-items:flex-start; }
.genbase { flex-shrink:0; width:150px; }
.genbase > .muted { margin-bottom:6px; }
.genbase a { display:block; border:1px solid #2a3344; border-radius:8px; overflow:hidden; }
.genbase img { width:100%; display:block; aspect-ratio:1/1; object-fit:cover; background:#000; }
.genresult { flex:1; min-width:0; }
@media (max-width:600px){ .genbody{ flex-direction:column; } .genbase{ width:120px; } }

/* 占位骨架卡 */
.gcard.skel { border:1px dashed #2f3a4d; }
.skelimg { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:linear-gradient(110deg,#141a26 30%,#1c2434 50%,#141a26 70%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
.skelbar { padding:8px 10px; font-size:12px; color:#7e8694; text-align:center; }
.spin { width:26px; height:26px; border:3px solid #2f3a4d; border-top-color:#7b3ff2; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes shimmer { to { background-position:-200% 0; } }

/* 成品（导出）行 */
.exrow { margin-top:12px; border-top:1px dashed #232b3a; padding-top:10px; }
.exlabel { font-size:12px; color:#9fb0c4; margin-bottom:8px; }
.exthumbs { display:flex; gap:10px; flex-wrap:wrap; }
.exthumbs a { position:relative; display:block; height:130px; border:1px solid #2a3344; border-radius:8px; overflow:hidden; }
.exthumbs img { height:100%; display:block; }
.extag { position:absolute; left:4px; bottom:4px; background:#000b; color:#fff; font-size:10px; padding:1px 5px; border-radius:4px; }

/* 画廊 */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.gcard { background:#10141d; border:1px solid #212838; border-radius:10px; overflow:hidden; }
.gcard img { width:100%; display:block; aspect-ratio:1/1; object-fit:cover; background:#000; }
.gcompose { width:100%; border:none; border-top:1px solid #212838; border-radius:0; padding:10px; font-size:13px; background:#221b33; color:#d9c7ff; }
.gcompose:hover { background:#2c2342; }
.gbar { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; }
.gbar button { padding:5px 10px; font-size:12px; }
.glink { color:#8ab4f8; font-size:12px; text-decoration:none; }
.gcopy { padding:0 10px 10px; }
.copyline { background:#1a1f2b; border:1px solid #252c3c; border-radius:6px; padding:6px 9px; margin-top:6px; font-size:12px; line-height:1.5; }
.gbar button { padding:5px 8px; font-size:12px; }

/* Phase 5 合成弹窗 */
.modal { display:none; position:fixed; inset:0; background:#000b; z-index:50; align-items:center; justify-content:center; }
.modal-box { background:#12151f; border:1px solid #2a3344; border-radius:12px; width:min(900px,94vw); max-height:92vh; overflow:hidden; display:flex; flex-direction:column; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #222b3a; }
.modal-body { display:flex; gap:18px; padding:16px; overflow:auto; }
.cmp-controls { width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; }
.cmp-controls label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#aeb8c6; }
.cmp-controls label.ckbox { flex-direction:row; align-items:center; gap:8px; }
.cmp-controls input[type=text], .cmp-controls select { width:100%; }
.cmp-controls input[type=range] { width:100%; }
.cmp-copies-wrap { background:#161a24; border:1px solid #242b3a; border-radius:8px; padding:8px 10px; }
.cmp-copies { display:flex; flex-direction:column; gap:6px; margin-top:6px; max-height:150px; overflow-y:auto; }
.copychip { text-align:left; font-size:12px; line-height:1.4; padding:6px 9px; background:#1a1f2b; border:1px solid #2a3344; }
.copychip:hover { border-color:#7b3ff2; }
#cmp-gencopy { padding:3px 9px; font-size:12px; }
.cmp-preview { flex:1; display:flex; align-items:flex-start; justify-content:center; }
#cmp-canvas { max-height:74vh; max-width:100%; border:1px solid #2a3344; border-radius:6px; background:#000; }
@media (max-width:680px){ .modal-body{ flex-direction:column; } .cmp-controls{ width:100%; } }