:root {
  --bg: #0f1115; --panel: #171a21; --panel-2: #1e222b; --line: #2a2f3a;
  --fg: #e8eaf0; --muted: #9aa3b2; --accent: #6c8cff; --accent-2: #8b5cf6;
  --ok: #35c48a; --warn: #e4b33c; --err: #ef5f6b; --radius: 14px;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f6f7fa; --panel:#fff; --panel-2:#f0f2f6; --line:#dfe3ea;
          --fg:#1b1f27; --muted:#5d6673; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; line-height:1.55; }
a { color: var(--accent); text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }
header.top { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
header.top h1 { font-size:22px; margin:0; letter-spacing:-.02em; }
header.top .sub { color:var(--muted); font-size:13px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.card + .card { margin-top:16px; }
h2 { font-size:15px; margin:0 0 14px; letter-spacing:-.01em; }
label { display:block; font-size:13px; color:var(--muted); margin:0 0 6px; }
input[type=text], input[type=url], input[type=number], textarea, select {
  width:100%; background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit; }
textarea { min-height:70px; resize:vertical; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.row { display:grid; gap:14px; }
@media (min-width:720px) { .row.cols-2 { grid-template-columns:1fr 1fr; } .row.cols-3 { grid-template-columns:1fr 1fr 1fr; } }
.field { margin-bottom:14px; }
.tabs { display:flex; gap:6px; background:var(--panel-2); padding:4px; border-radius:12px; margin-bottom:14px; flex-wrap:wrap; }
.tabs button { flex:1 1 140px; background:transparent; border:0; color:var(--muted);
  padding:9px 12px; border-radius:9px; font-size:13px; cursor:pointer; font-family:inherit; }
.tabs button.on { background:var(--accent); color:#fff; font-weight:600; }
.pane { display:none; } .pane.on { display:block; }
.btn { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:0;
  border-radius:11px; padding:12px 20px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn:disabled { opacity:.55; cursor:default; }
.btn.ghost { background:var(--panel-2); color:var(--fg); border:1px solid var(--line); }
.btn.sm { padding:7px 12px; font-size:12.5px; border-radius:9px; }
.hint { font-size:12px; color:var(--muted); margin-top:6px; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.item { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.item .thumb { aspect-ratio:9/16; background:var(--panel-2); display:flex; align-items:center;
  justify-content:center; color:var(--muted); font-size:12px; position:relative; }
.item .thumb img, .item .thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.item .meta { padding:11px 12px 13px; }
.item .meta .t { font-size:13px; font-weight:600; margin-bottom:5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.item .meta .d { font-size:11.5px; color:var(--muted); }
.badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); }
.badge.queued { color:var(--warn); border-color:var(--warn); }
.badge.running { color:var(--accent); border-color:var(--accent); }
.badge.done { color:var(--ok); border-color:var(--ok); }
.badge.failed, .badge.canceled { color:var(--err); border-color:var(--err); }
.bar { height:4px; background:var(--panel-2); border-radius:3px; overflow:hidden; margin-top:8px; }
.bar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.actions { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.msg { padding:11px 14px; border-radius:11px; font-size:13px; margin-bottom:14px; display:none; }
.msg.ok { background:rgba(53,196,138,.14); color:var(--ok); display:block; }
.msg.err { background:rgba(239,95,107,.14); color:var(--err); display:block; }
.charlist { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
.charlist .c { border:2px solid transparent; border-radius:11px; overflow:hidden; cursor:pointer; background:var(--panel-2); }
.charlist .c.on { border-color:var(--accent); }
.charlist .c img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.charlist .c span { display:block; font-size:11px; padding:5px 6px; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.empty { color:var(--muted); font-size:13px; padding:26px 0; text-align:center; }
.log { background:var(--panel-2); border-radius:10px; padding:12px; font-size:12px;
  max-height:280px; overflow:auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.log div { padding:2px 0; border-bottom:1px solid var(--line); }