:root { --bg:#0d0f13; --panel:#161a21; --card:#1c212a; --input:#222833; --line:#2c3340; --text:#e6e9ef; --muted:#8b95a7; --accent:#f5b83d; --accent2:#ff8a3d; --ok:#3ecf8e; --err:#ff6b6b; --run:#5aa9ff; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; }
[hidden] { display:none !important; }
main { max-width:1280px; margin:0 auto; padding:16px 20px 60px; }
.topbar { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; padding:10px 20px; background:#11141a; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:16px; }
.pill { display:inline-block; margin-left:8px; padding:2px 10px; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#1b1206; font-size:12px; font-weight:600; }
.topnote { color:var(--muted); font-size:12px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:16px 0; }
.panel h2 { margin:0 0 12px; font-size:16px; display:flex; align-items:center; gap:8px; }
.num { display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#1b1206; font-size:12px; align-items:center; justify-content:center; font-weight:700; }
label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:12px; margin:6px 0; }
.label { color:var(--muted); font-size:12px; margin:10px 0 6px; }
input, select, textarea { width:100%; background:var(--input); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 10px; font:inherit; font-size:13px; }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
input[type=checkbox] { width:auto; accent-color:var(--accent); }
.grid { display:grid; gap:10px 14px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tight { gap:0 8px; }
@media (max-width:860px) { .g2,.g3,.g4 { grid-template-columns:1fr; } }
.field-actions { display:flex; align-items:flex-end; padding-bottom:6px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; }
.between { justify-content:space-between; }
.grow { flex:1; min-width:240px; }
.btn { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 14px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; }
.btn:hover:not(:disabled) { border-color:var(--accent); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#1b1206; border:none; font-weight:700; }
.btn.small { padding:3px 10px; font-size:12px; }
.btn.danger:hover { border-color:var(--err); color:var(--err); }
.note { color:var(--muted); font-size:12px; margin:4px 0; }
.error { color:var(--err); font-size:12px; white-space:pre-wrap; }
.dropzone { border:1.5px dashed var(--line); border-radius:10px; padding:22px; text-align:center; cursor:pointer; }
.dropzone.over, .dropzone:hover { border-color:var(--accent); background:#1a1e26; }
.thumbs { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 12px; }
.thumb { position:relative; width:84px; height:84px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#000; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb .tag { position:absolute; left:3px; top:3px; background:rgba(0,0,0,.7); font-size:11px; padding:0 5px; border-radius:4px; }
.thumb .x { position:absolute; right:3px; top:3px; width:18px; height:18px; border-radius:50%; border:none; background:rgba(0,0,0,.7); color:#fff; cursor:pointer; font-size:12px; line-height:18px; padding:0; }
.thumb .an { position:absolute; left:3px; bottom:3px; font-size:11px; padding:0 5px; border-radius:4px; border:none; cursor:pointer; background:rgba(0,0,0,.7); color:var(--muted); }
.thumb .an.on { background:var(--accent); color:#1b1206; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; flex-direction:row; align-items:center; gap:6px; margin:0; padding:5px 12px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-size:13px; cursor:pointer; background:var(--card); }
.chip input:disabled + span { opacity:.8; }
.check { flex-direction:row; align-items:center; gap:6px; margin:0; color:var(--text); font-size:13px; }
.pill-check { padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); }
.inline { flex-direction:row; align-items:center; gap:6px; margin:0; color:var(--text); }
.inline input { width:64px; }
details.template { margin:10px 0; border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:#12161c; }
details.template summary { cursor:pointer; color:var(--muted); font-size:12px; }
details textarea { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; }
.points { display:flex; flex-direction:column; gap:6px; }
.point { display:grid; grid-template-columns:1.1fr 2fr 2fr auto; gap:6px; }
@media (max-width:860px) { .point { grid-template-columns:1fr; } }
.palette { display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.swatch { width:26px; height:26px; border-radius:6px; border:1px solid var(--line); cursor:pointer; padding:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.card-head { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; gap:8px; }
.card-head input { background:transparent; border:none; padding:2px 0; font-weight:700; font-size:14px; }
.badge { font-size:11px; padding:1px 8px; border-radius:999px; background:#2a303b; color:var(--muted); white-space:nowrap; }
.badge.queued { color:var(--accent); } .badge.running { background:#163049; color:var(--run); } .badge.done { background:#123526; color:var(--ok); } .badge.failed { background:#3a1a1d; color:var(--err); }
.shot { aspect-ratio:1/1; background:#07090c; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; position:relative; }
.shot img { max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; }
.shot .spinner { width:28px; height:28px; border:3px solid #2a3340; border-top-color:var(--run); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.card-body { padding:8px 12px 12px; display:flex; flex-direction:column; gap:2px; }
.card .reason { color:var(--muted); font-size:12px; margin:4px 0; }
.card .refs { display:flex; flex-wrap:wrap; gap:6px; }
.card .refs label { flex-direction:row; align-items:center; gap:4px; margin:0; padding:2px 8px; border:1px solid var(--line); border-radius:6px; color:var(--text); }
.card .err { color:var(--err); font-size:12px; white-space:pre-wrap; word-break:break-all; }
.card-actions { display:flex; justify-content:space-between; gap:6px; margin-top:8px; }
.log { background:#0a0c10; border:1px solid var(--line); border-radius:8px; padding:10px; max-height:260px; overflow:auto; margin:0; font:12px/1.6 ui-monospace, Menlo, Consolas, monospace; color:#b9c2d0; white-space:pre-wrap; }
.log .e { color:var(--err); } .log .o { color:var(--ok); }
.overlay { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; }
#lightbox img { max-width:94vw; max-height:94vh; }
.login-box { width:340px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:10px; }
.login-box h2 { margin:0; font-size:17px; }