:root { color-scheme: dark; --bg:#101210; --panel:#171a17; --line:#30352f; --ink:#edf0e9; --muted:#929a91; --accent:#ef8a68; --green:#65ca90; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; background:radial-gradient(circle at 50% -20%,#263027,var(--bg) 55%); color:var(--ink); font:13px/1.45 Inter,system-ui,sans-serif; } button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.shell { min-height:100vh; display:grid; grid-template-columns:300px minmax(420px,1fr) 360px; gap:1px; background:var(--line); } .panel { background:var(--panel); min-width:0; } .composer { padding:24px 22px; overflow:auto; } .brand { display:flex; gap:11px; align-items:center; padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:22px; } .brand strong { display:block; font-size:14px; } .brand small,.eyebrow { display:block; color:var(--muted); font-size:9px; letter-spacing:.12em; margin-top:3px; } .mark { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--accent); color:#201713; font-weight:800; }
form { display:grid; gap:14px; } label { display:grid; gap:6px; color:var(--muted); font-size:11px; } input,textarea,select { width:100%; border:1px solid var(--line); border-radius:6px; background:#111410; color:var(--ink); padding:9px 10px; outline:none; } textarea { resize:vertical; } input:focus,textarea:focus,select:focus { border-color:var(--accent); } .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .section-title { color:var(--ink); font-size:11px; font-weight:700; margin-top:2px; } .drop { min-height:64px; border:1px dashed #4b554a; border-radius:7px; padding:10px; background:#141814; transition:border-color .16s ease,background .16s ease; } .drop:focus-within,.drop.has-preview { border-color:#596357; background:#171c17; } .drop input { padding:0; border:0; background:transparent; } .drop span { color:#687067; font-size:10px; } .frame-preview { display:grid; place-items:center; width:100%; gap:7px; } .frame-preview img { display:block; width:auto; height:auto; max-width:100%; max-height:240px; object-fit:contain; border:1px solid var(--line); border-radius:6px; background:#0b0d0b; } .frame-preview img[hidden] { display:none; } .drop.has-preview .frame-hint { display:none; } .is-hidden { display:none !important; } details { border-top:1px solid var(--line); padding-top:12px; } summary { color:var(--muted); cursor:pointer; margin-bottom:12px; } details label { margin-bottom:10px; } .check { display:flex; grid-template-columns:auto 1fr; align-items:center; } .check input { width:auto; } .primary { border:0; border-radius:6px; background:var(--accent); color:#251713; font-weight:750; padding:12px; } .message { color:var(--green); min-height:18px; margin:0; font-size:11px; }
.provider-fields { display:grid; gap:14px; } .fixed-model { margin-bottom:10px; border:1px solid var(--line); border-radius:6px; background:#111410; color:var(--ink); padding:9px 10px; font-size:11px; }
.asset-type-field,.choice-field { display:grid; gap:7px; } .field-label { color:var(--muted); font-size:11px; } .asset-type-options,.icon-options { display:grid; gap:7px; } .asset-type-options { grid-template-columns:repeat(4,minmax(0,1fr)); } .icon-options { grid-template-columns:repeat(3,minmax(0,1fr)); } .model-options,.workflow-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .asset-type-option,.icon-option { width:100%; aspect-ratio:1; display:grid; place-content:center; justify-items:center; gap:6px; padding:7px 4px; color:var(--muted); background:linear-gradient(145deg,#151915,#111410); border:1px solid var(--line); border-radius:10px; transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease; } .asset-type-option svg,.icon-option svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .asset-type-option span,.icon-option span { max-width:100%; font-size:10px; font-weight:700; line-height:1.15; text-align:center; overflow-wrap:anywhere; } .asset-type-option:hover,.icon-option:hover { color:var(--ink); border-color:#596357; transform:translateY(-1px); } .asset-type-option:focus-visible,.icon-option:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .asset-type-option.is-selected,.icon-option.is-selected { color:var(--accent); border-color:#8d503d; background:linear-gradient(145deg,#2b211c,#181816); box-shadow:inset 0 0 0 1px rgba(239,138,104,.14); }
.preview { display:flex; flex-direction:column; } header { padding:22px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; } h1,h2,h3,p { margin:0; } h1 { font-size:18px; margin-top:4px; } h2 { font-size:15px; margin-top:4px; } header p { color:var(--muted); font-size:11px; margin-top:5px; } .status { align-self:flex-start; color:var(--accent); border:1px solid #6b3c2f; border-radius:99px; padding:4px 9px; font-size:10px; } .preview-body { flex:1; min-height:500px; display:grid; place-items:center; padding:26px; } .empty { text-align:center; color:var(--muted); } .empty h2 { color:var(--ink); margin:10px 0 5px; } .empty-icon { font-size:34px; color:var(--accent); } .asset-view { width:min(900px,100%); } video,.input-preview { display:block; width:100%; max-height:62vh; object-fit:contain; border-radius:8px; background:#080908; border:1px solid var(--line); } audio { display:block; width:100%; min-height:54px; } .audio-preview { padding:28px; border:1px solid var(--line); border-radius:8px; background:linear-gradient(145deg,#171b17,#0d0f0d); } .audio-preview::before { content:"Generated audio"; display:block; margin-bottom:14px; color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; } .image-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; } .image-comparison figure { margin:0; min-width:0; } .image-comparison img { display:block; width:100%; max-height:62vh; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#080908; } .image-comparison figcaption { color:var(--muted); text-align:center; font-size:10px; padding-top:6px; } .progress { height:5px; background:#2a3029; border-radius:5px; overflow:hidden; margin-top:20px; } .progress span { display:block; height:100%; background:var(--accent); } .phase { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; padding-top:9px; } .phase strong { color:var(--ink); } .error { color:#f19084; margin-top:12px; } .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; } .actions button,.actions a { color:var(--ink); background:#292e29; border:1px solid var(--line); padding:7px 11px; border-radius:5px; text-decoration:none; } .actions .danger { color:#f0a096; border-color:#6f3832; background:#2e1d1a; }
.transparent-preview { background-color:#c8c8c8 !important; background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%) !important; background-position:0 0,0 8px,8px -8px,-8px 0 !important; background-size:16px 16px !important; }
.queue { display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:hidden; } .queue header { padding:22px 18px; } .icon { border:0; background:transparent; color:var(--muted); font-size:20px; } nav { display:flex; gap:12px; padding:0 18px; border-bottom:1px solid var(--line); } .tab { border:0; background:none; color:var(--muted); padding:13px 0; font-size:10px; } .tab.active { color:var(--ink); border-bottom:2px solid var(--accent); } .tab b { background:#2d332d; border-radius:10px; padding:2px 6px; margin-left:3px; font-size:9px; } .task-list { flex:1; overflow:auto; padding:10px; min-height:180px; } .task { display:grid; grid-template-columns:42px 1fr auto; gap:9px; align-items:center; width:100%; text-align:left; background:transparent; color:var(--ink); border:1px solid transparent; border-radius:6px; padding:10px 8px; } .task:hover,.task.selected { background:#232823; border-color:var(--line); } .task-icon { display:grid; place-items:center; width:40px; height:40px; overflow:hidden; border-radius:6px; background:#2c332d; color:var(--accent); } .task-icon img { width:100%; height:100%; object-fit:cover; } .task strong,.task small,.worker strong,.worker small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .task strong { font-size:11px; } .task small,.task time { color:var(--muted); font-size:10px; margin-top:3px; } .small { padding:35px 12px; } .workers { flex:0 0 auto; border-top:1px solid var(--line); padding:14px 18px 18px; } .worker { display:flex; gap:9px; align-items:center; margin-top:10px; } .worker > span { flex:1; min-width:0; } .worker strong { font-size:11px; } .worker-control { margin-left:auto; border:1px solid var(--line); border-radius:5px; background:#242924; color:var(--ink); padding:5px 8px; font-size:9px; } .worker-control:hover { border-color:var(--accent); color:var(--accent); } .worker-control.danger { color:#f0a096; border-color:#6f3832; background:#2e1d1a; } .worker-control.danger:hover { color:#ffd0c9; border-color:#a65047; } .worker-control:disabled { opacity:.5; cursor:wait; } .dot { width:8px; height:8px; border-radius:50%; background:#777; } .dot.online { background:var(--green); } .dot.busy { background:var(--accent); } .dot.offline { background:#d2665b; } .dot.paused { background:#d8a15d; } .dot.disabled { background:#555; }
@media (max-width:1000px) { .shell { grid-template-columns:280px 1fr; } .queue { grid-column:1/-1; position:static; height:auto; min-height:390px; overflow:visible; } } @media (max-width:650px) { .shell { display:block; } .composer,.preview,.queue { min-height:auto; } .preview-body { min-height:360px; } .image-comparison { grid-template-columns:1fr; } }

/* Fleet status language: green ready, red unavailable, rainbow active. */
.workers { max-height:32vh; overflow:auto; padding:10px 14px; }
.fleet-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fleet-legend { display:flex; gap:9px; margin:0; color:var(--muted); font-size:10px; }
.fleet-legend > span { display:flex; align-items:center; gap:5px; }
.fleet-light { display:block; width:8px; height:8px; border-radius:50%; background:#929a91; flex:none; }
.fleet-tile.online,.fleet-light.online { --signal:#65ca90; }
.fleet-tile.offline,.fleet-tile.disabled,.fleet-light.offline { --signal:#f07878; }
.fleet-tile.paused,.fleet-tile.checking { --signal:#929a91; }
.fleet-tile { flex:0 0 28px; width:28px; height:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid color-mix(in srgb,var(--signal,#65ca90) 40%,transparent); border-radius:8px; background:#121612; }
.fleet-tile b { font-size:9px; line-height:1; max-width:46px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fleet-tile small { display:none; }
.fleet-tile .fleet-light,.fleet-light.online,.fleet-light.offline { background:var(--signal); box-shadow:0 0 8px color-mix(in srgb,var(--signal) 50%,transparent); }
.fleet-tile.busy { border-color:#af9fff; background:linear-gradient(#121612,#121612) padding-box,linear-gradient(135deg,#ff769b,#f2d277,#63e4b2,#72beff,#ba92ff) border-box; }
.fleet-tile.busy .fleet-light,.fleet-light.busy { background:linear-gradient(120deg,#ff769b,#f2d277,#63e4b2,#72beff,#ba92ff,#ff769b); background-size:300% 300%; animation:fleet-rainbow 3s linear infinite; box-shadow:0 0 9px #a291ff88; }
.fleet-tile.busy small { color:#cbbcff; }
@keyframes fleet-rainbow { 0%,100% { background-position:0% 50%; opacity:1; } 50% { background-position:100% 50%; opacity:.65; } }
.fleet-card { border-bottom:1px solid var(--line); padding:6px 0; }
.fleet-card:last-child { border-bottom:0; }
.fleet-card .worker { margin:0; gap:8px; }
.worker > .fleet-tile { flex:0 0 28px; }
.worker > .fleet-tile b { display:none; }
.worker-info { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; }
.worker-info strong { max-width:100%; }
.worker-info small { color:var(--muted); font-size:9px; margin-top:0; }
.fleet-nodes { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.fleet-node { display:grid; justify-items:center; gap:4px; }
.fleet-node:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:8px; }

.workers .worker-control { color:var(--green); border-color:#345343; background:#19271e; }
.workers .worker-control:hover { border-color:var(--green); }
.workers .worker-control.danger { color:#f07878; border-color:#6f3832; background:#2e1d1a; }
@media (prefers-reduced-motion:reduce) { .fleet-tile.busy .fleet-light,.fleet-light.busy { animation:none; } }
@media (max-width:1000px) { .workers { max-height:none; } }
.fleet-tile.busy { animation:fleet-glow 3s linear infinite; }
@keyframes fleet-glow { 0%,100% { border-color:#ff769b; box-shadow:0 0 8px #ff769b22; } 25% { border-color:#f2d277; box-shadow:0 0 10px #f2d27733; } 50% { border-color:#63e4b2; box-shadow:0 0 8px #63e4b222; } 75% { border-color:#9c9bff; box-shadow:0 0 10px #9c9bff33; } }
@media (prefers-reduced-motion:reduce) { .fleet-tile.busy { animation:none; } }

.batch-frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; width: 100%; }
.batch-frames figure { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; min-width: 0; align-content: start; }
.batch-frames figcaption { grid-column: 1 / -1; margin-bottom: 6px; }
.batch-frames img { display: block; width: 100%; height: auto; object-fit: contain; }

.preview-body:has(.batch-frames) { align-items: start; }