:root { --bg:#16161d; --panel:#20202a; --panel2:#282834; --line:#33333f; --text:#e8e8ef; --muted:#9a9aab; --accent:#7c6cff; --accent-soft:#7c6cff26; --err:#ff6b6b; --ok:#5fd18b; --star:#ffcc4d; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--text); }
code { background:var(--panel2); padding:1px 5px; border-radius:4px; font-size:12px; }

/* ---------- Header ---------- */
header { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--bg); }
header h1 { font-size:18px; margin:0; }
nav { display:flex; gap:4px; flex-wrap:wrap; }
nav button { background:transparent; border:1px solid transparent; color:var(--muted); font-weight:600; padding:7px 14px; }
nav button:hover { color:var(--text); }
nav button.active { background:var(--panel2); border-color:var(--line); color:var(--text); }
.header-right { display:flex; gap:8px; align-items:center; }
.pill { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:13px; color:var(--muted); white-space:nowrap; }
button.pill { cursor:pointer; }
button.pill:hover { border-color:var(--accent); color:var(--text); }

/* Jobs indicator (top right) */
.jobs-wrap { position:relative; }
.jobs-pill { position:relative; overflow:hidden; display:flex; align-items:center; gap:6px; }
.jobs-pill.busy { color:var(--text); border-color:var(--accent); }
.jobs-pill.attention { border-color:var(--ok); color:var(--ok); }
.pill-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent; }
.pill-bar span { display:block; height:100%; width:0; background:var(--accent); transition:width .5s; }
.jobs-panel { position:absolute; right:0; top:calc(100% + 8px); width:min(420px, calc(100vw - 24px)); max-height:70vh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.45); padding:10px; z-index:20; }
.jobs-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.jobs-foot { margin:8px 2px 0; }
.job { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:6px; display:flex; flex-direction:column; gap:5px; }
.job-top { display:flex; gap:8px; align-items:center; }
.job .what { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.job .state { color:var(--muted); font-size:12px; }
.job.failed { border-color:#5a2b33; } .job.failed .state { color:var(--err); }
.job.completed .state { color:var(--ok); }
.job.external { border-style:dashed; }
.bar { height:6px; background:var(--bg); border-radius:3px; overflow:hidden; }
.bar span { display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .5s; }
.job.completed .bar span { background:var(--ok); }
.job.failed .bar span { background:var(--err); }
.bar.indeterminate span { width:30% !important; animation:slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left:-30%; } 100% { margin-left:100%; } }
.spinner { width:12px; height:12px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Layout ---------- */
main { padding:20px; }
.tab { display:grid; grid-template-columns:360px 1fr; gap:20px; }
.tab.wide { grid-template-columns:1fr; }
@media (max-width: 900px) { .tab { grid-template-columns:1fr; } main { padding:12px; } header { padding:10px 12px; } }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; }
form.panel { display:flex; flex-direction:column; gap:12px; align-self:start; }
#charDetailView { display:flex; flex-direction:column; gap:16px; }
h2 { font-size:16px; margin:0 0 4px; }
h3 { font-size:12px; margin:16px 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:12px; }
label.check { flex-direction:row; align-items:center; gap:8px; color:var(--text); font-size:14px; cursor:pointer; }
input, select, textarea, button { font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:7px 9px; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
input[type=range] { padding:0; accent-color:var(--accent); }
textarea { resize:vertical; min-height:70px; }
.row { display:flex; gap:10px; } .row > * { flex:1; min-width:0; }
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); border:none; font-weight:600; padding:11px; font-size:15px; }
button.primary:hover { filter:brightness(1.1); }
button.small { padding:4px 9px; font-size:12px; }
button.danger { border-color:#5a2b33; color:var(--err); }
button:disabled { opacity:.5; cursor:wait; }
.hint { color:var(--muted); font-size:12px; margin:0; }
.cost { margin:0; font-size:13px; color:var(--text); background:var(--accent-soft); border-radius:6px; padding:6px 10px; }
.cost:empty { display:none; }
.status { min-height:20px; color:var(--muted); white-space:pre-wrap; font-size:13px; }
.status.error { color:var(--err); }
.status.ok { color:var(--ok); }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.toolbar input[type=search] { flex:1; min-width:180px; }
[hidden] { display:none !important; }

details.more { border:1px solid var(--line); border-radius:8px; }
details.more > summary { cursor:pointer; padding:8px 10px; color:var(--muted); font-size:13px; user-select:none; }
details.more[open] > summary { border-bottom:1px solid var(--line); }
.more-body { padding:10px; display:flex; flex-direction:column; gap:10px; }

/* Chips (quick picks) */
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12px; color:var(--muted); }
.chip:hover, .chip.on { color:var(--text); border-color:var(--accent); background:var(--accent-soft); }

/* Segmented choice */
.seg { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.seg button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; font-size:13px; font-weight:600; }
.seg button small { font-weight:400; font-size:11px; color:var(--muted); }
.seg button.on { border-color:var(--accent); background:var(--accent-soft); }

/* Numbered steps */
.steps .step { display:flex; gap:12px; }
.step-num { flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:12px; display:grid; place-items:center; margin-top:1px; }
.step-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.step-title { font-weight:600; }
.step-title .value { color:var(--accent); margin-left:6px; }

/* Direction compass */
.compass { display:grid; grid-template-columns:repeat(3, 84px); gap:6px; }
.compass button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px; font-size:11px; color:var(--muted); background:var(--panel2); position:relative; }
.compass button img { width:56px; height:56px; object-fit:contain; }
.compass button.on { border-color:var(--accent); background:var(--accent-soft); color:var(--text); }
.compass button.on::after { content:"✓"; position:absolute; top:2px; right:6px; color:var(--accent); font-weight:700; }
.compass .center { display:flex; flex-direction:column; gap:4px; justify-content:center; }
.compass .center button { padding:4px; font-size:11px; }

/* Pixel art display */
.pix { image-rendering:pixelated; background:repeating-conic-gradient(#2a2a35 0 25%, #222230 0 50%) 0 0/16px 16px; }
.grid { display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:6px; width:180px; }
.card img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:6px; }
.card .title { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .meta { color:var(--muted); font-size:11px; display:flex; justify-content:space-between; align-items:center; gap:4px; }
.card.clickable { cursor:pointer; } .card.clickable:hover { border-color:var(--accent); }
.card.excluded { border-style:dashed; }
.card { position:relative; }
.card .frame-no { position:absolute; top:11px; left:11px; z-index:1; background:rgba(0,0,0,.65); color:#fff; border-radius:4px; padding:0 4px; font-size:10px; line-height:15px; pointer-events:none; }
.card.excluded img, .card.excluded .title { opacity:.35; }
.card select { font-size:12px; padding:4px 6px; }
.badge { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:0 6px; font-size:11px; color:var(--muted); }
.star { color:var(--star); }
.empty { color:var(--muted); padding:30px; text-align:center; border:1px dashed var(--line); border-radius:10px; width:100%; }

/* Image slots (upload / pick from library) */
.slot { display:flex; gap:10px; align-items:center; border:1px dashed var(--line); border-radius:8px; padding:8px; }
.slot.filled { border-style:solid; border-color:var(--accent); }
.slot img { width:52px; height:52px; object-fit:contain; border-radius:4px; }
.slot .slot-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.slot .slot-name { font-size:12px; color:var(--muted); }
.slot .slot-value { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot .slot-buttons { display:flex; gap:4px; flex-wrap:wrap; }

/* Character detail */
.dirs { display:grid; grid-template-columns:repeat(auto-fill, minmax(116px, 1fr)); gap:10px; }
.dir { background:var(--panel2); border-radius:8px; padding:6px; display:flex; flex-direction:column; gap:4px; align-items:center; font-size:12px; color:var(--muted); }
.dir img { width:96px; height:96px; object-fit:contain; }
.anim { border-top:1px solid var(--line); padding-top:10px; margin-top:10px; }

/* Animation player */
.player { display:flex; gap:16px; align-items:center; flex-wrap:wrap; background:var(--panel2); border-radius:8px; padding:10px; }
.player img { width:160px; height:160px; object-fit:contain; border-radius:6px; }
.player-controls { display:flex; flex-direction:column; gap:8px; }
.player-controls label { flex-direction:row; align-items:center; gap:8px; }

/* Modal */
dialog { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:0; width:min(940px, calc(100vw - 24px)); max-height:calc(100vh - 48px); }
dialog::backdrop { background:rgba(0,0,0,.6); }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:1; }
.modal-body { padding:16px; display:flex; flex-direction:column; gap:12px; }
.modal-body .grid .card { width:150px; }
pre.params { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:10px; font-size:12px; overflow:auto; max-height:240px; margin:0; }

/* Login */
#login { position:fixed; inset:0; z-index:50; background:var(--bg); display:grid; place-items:center; padding:16px; }
#login form { width:min(360px, 100%); }
#login h1 { font-size:20px; margin:0; }

#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px 16px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:60; max-width:calc(100vw - 32px); }
#toast.show { opacity:1; }