/* 第 2 部分：在原型样式基础上新增的组件（登录、作品库、设置、状态），沿用原型配色变量 */
[hidden]{display:none!important}
input,select{font:inherit}
.linkbtn{border:0;background:none;color:var(--acc);cursor:pointer;font:inherit;font-size:12.5px;padding:0;margin-left:18px}
.rw .hd .linkbtn{font-weight:400;margin:0}
nav{display:flex;align-items:center}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible,.chip:focus-visible,.skill:focus-visible,.linkbtn:focus-visible,.drop:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.login{min-height:100vh;display:grid;place-items:center}
.login-card{width:360px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px}
.login-card input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#fdfcfa}
.login-sub{color:var(--sub);font-size:12.5px;margin:6px 0 4px}
.login-err{color:#b3261e;font-size:12.5px;min-height:18px;margin-top:10px}

.drop{cursor:pointer}
.drop.over{border-color:var(--acc);background:var(--acc2)}
.drop .thumbs{flex-wrap:wrap}
.thumb{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0/12px 12px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:20px;cursor:pointer;padding:0}
.thumb .up{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;background:rgba(255,255,255,.8)}
.warnline{color:var(--warn)}

.fields input.miss{border-color:#e7b98f;background:#fff8f1}
.fields input.ru{color:#24425f}
.ru-tools{display:flex;gap:10px;align-items:center;margin-top:10px}
.ru-tools small{color:var(--sub);font-size:12px}
.notice{font-size:12px;background:#fff7ec;border:1px solid #f0dcc0;color:#8a5a1d;border-radius:8px;padding:8px 10px;margin-top:10px}
.notice ul{margin:4px 0 0;padding-left:18px}
.gonote{font-size:12px;color:var(--sub);margin-top:8px;min-height:16px}
.gonote.warn{color:var(--warn)}
.tblbar{display:flex;gap:8px;margin-bottom:6px}
.tbl td.err{background:#fff1ec;color:#a63b12}

.jobbar{display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--sub);margin:-4px 0 14px;flex-wrap:wrap}
.jobbar b{color:var(--ink)}
.jobbar .bad{color:#b3261e}
.card .cv{display:block;width:100%;height:auto}
/* 角色三视图/设定板是 16:10 横版且信息密，卡片最小 360px 宽，保证缩略图上的标签可读 */
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.job .jb .grid.wide{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.card .ph{aspect-ratio:var(--ar,4/3);display:grid;place-items:center;color:var(--sub);font-size:12.5px;background:#f3f1ec;text-align:center;padding:12px}
.card .ph.fail{background:#fff1ec;color:#a63b12}
.card .ph .spin{width:22px;height:22px;border:2.5px solid #d8d3c9;border-top-color:var(--acc);border-radius:50%;animation:sp 1s linear infinite;margin:0 auto 8px}
@keyframes sp{to{transform:rotate(360deg)}}
.meta .acts button:disabled{color:#aaa;cursor:not-allowed}

.page{display:block;height:auto;min-height:calc(100vh - 56px)}
.page-in{max-width:1180px;margin:0 auto;padding:20px 26px 60px}
.page .out.top{padding:0;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.job{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:16px;overflow:hidden}
.job .jh{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);gap:12px;flex-wrap:wrap}
.job .jh b{font-size:14px}
.job .jh small{color:var(--sub);font-size:12px}
.job .jh .acts{display:flex;gap:8px}
.job .jb{padding:14px 16px}
.job .jb .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.job .jscene{font-size:12px;color:var(--sub);margin-bottom:10px;max-height:3.2em;overflow:hidden}
.st-chip{font-size:11.5px;border-radius:20px;padding:2px 9px;border:1px solid var(--line)}
.st-done{color:var(--acc);border-color:#bcd8cc;background:var(--acc2)}
.st-running,.st-queued{color:#6b5a1a;background:#fbf4dc;border-color:#ecdca3}
.st-stopped,.st-canceled{color:#a63b12;background:#fff1ec;border-color:#f0c9b6}
.more{text-align:center}

.set{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.set h2{font-size:15px;margin:0 0 4px}
.set .d{font-size:12.5px;color:var(--sub);margin:0 0 12px}
.set .frm{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;align-items:center;max-width:640px}
.set .frm label{font-size:12.5px;color:var(--sub)}
.set .frm input,.set .frm select{border:1px solid var(--line);border-radius:8px;padding:7px 9px;width:100%;background:#fdfcfa}
.set .btns{display:flex;gap:8px;margin-top:12px}
.set table{width:100%;border-collapse:collapse;font-size:12.5px}
.set td,.set th{border-bottom:1px solid var(--line);padding:7px 6px;text-align:left}
.set th{color:var(--sub);font-weight:500}
.kstat{font-size:12.5px;margin-bottom:10px}
.kstat b{color:var(--acc)}
.kstat .no{color:var(--warn)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:1100px){.cols{grid-template-columns:1fr}}

#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#1c1b19;color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;max-width:80vw;z-index:50}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.error{background:#8c2412}