:root { color-scheme:light dark; --bg:light-dark(#fff,#191b23); --side:light-dark(#f6f5f9,#16171e); --fg:light-dark(#292535,#eae6f0); --muted:light-dark(#746b80,#b5aabd); --line:light-dark(#e6e1eb,#413b49); --accent:light-dark(#72508d,#c7a4e8); --accent-bg:light-dark(#f0eaf7,#382b43); --red:light-dark(#b53640,#ff9a9c); --red-bg:light-dark(#fff0f0,#492b31); --blue:light-dark(#285ec1,#a1c3ff); --blue-bg:light-dark(#eaf1ff,#243751); --amber:light-dark(#866322,#e4c37e); --amber-bg:light-dark(#f8f0df,#403725); }
:root { --checker-a:light-dark(#fff,#3a3a42); --checker-b:light-dark(#e6e6ea,#2c2c33); --checker-size:10px; }
* { box-sizing:border-box; }
img[src] { background:conic-gradient(var(--checker-a) 25%,var(--checker-b) 0 50%,var(--checker-a) 0 75%,var(--checker-b) 0) 0 0 / calc(2 * var(--checker-size)) calc(2 * var(--checker-size)); }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.6 system-ui,sans-serif; }
[hidden] { display:none!important; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:1px solid var(--line); border-radius:5px; padding:6px 12px; background:var(--bg); max-width:100%; overflow-wrap:anywhere; }
button:hover { background:var(--side); } button:disabled { cursor:default; opacity:.5; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input,select,textarea { padding:8px; border:1px solid var(--line); background:var(--bg); border-radius:5px; min-width:0; max-width:100%; }
label { display:grid; gap:5px; margin:14px 0; } input:not([type=checkbox]),select,textarea { width:100%; } textarea { resize:vertical; }
h1 { font-size:25px; font-weight:600; margin:22px 0 4px; } h2 { font-size:15px; font-weight:600; margin:0 0 12px; } h3 { font-size:13px; font-weight:600; }
p { margin:0; } .muted,.heading p { color:var(--muted); font-size:12px; }
.link { border:0; padding:3px 0; color:var(--accent); background:transparent; }
.primary { background:var(--accent); color:var(--bg); border-color:var(--accent); } .primary:hover { background:var(--accent); filter:brightness(.95); }
#console { display:grid; grid-template-columns:180px minmax(0,1fr); min-height:100vh; }
aside { background:var(--side); border-right:1px solid var(--line); padding:25px 14px; }
.brand { padding:0 9px 28px; font-size:18px; font-weight:600; letter-spacing:.06em; }
.brand small { display:block; font-size:10px; letter-spacing:.12em; font-weight:400; color:var(--muted); }
aside nav { display:grid; gap:5px; } aside nav button { text-align:left; background:transparent; border:0; padding:11px; }
aside nav button[aria-current=page] { background:var(--accent-bg); color:var(--accent); font-weight:600; }
.nav-footer { margin-top:40px; font-size:11px; color:var(--muted); display:grid; gap:10px; justify-items:start; overflow-wrap:anywhere; }
main { min-width:0; padding:20px 32px 35px; max-width:1700px; width:100%; }
header,.heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
header { padding-bottom:15px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.heading { margin-bottom:24px; } .heading h1 { margin-bottom:4px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(340px,1fr); gap:28px; }
.workspace>div:last-child { grid-column:1/-1; }
.workspace>div,.split>div { min-width:0; } .split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; margin-top:25px; align-items:start; }
.row { display:flex; gap:14px; } .row>* { flex:1; min-width:0; }
.target-wrap { position:relative; display:block; width:100%; margin:12px 0; } .target-wrap img { width:100%; height:auto; display:block; } .target-wrap img:not([src]) { display:none; }
.target-wrap.drag-over { outline:2px dashed var(--accent); outline-offset:-2px; background:var(--accent-bg); }
.target-wrap.drop-rejected { outline:2px dashed var(--red); outline-offset:-2px; background:var(--red-bg); }
#target-info,#target-drop-status { overflow-wrap:anywhere; }
#target-formats { margin:6px 0; }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)); gap:12px; margin:12px 0; } .thumbs figure { margin:0; min-width:0; font-size:12px; } .thumbs figcaption { overflow-wrap:anywhere; margin-top:4px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--side); padding:12px; max-height:600px; overflow:auto; font:12px/1.7 ui-monospace,monospace; }
.editor { border-top:1px solid var(--line); margin-top:24px; padding-top:14px; } .item { border-bottom:1px solid var(--line); padding:13px 0; display:flex; gap:12px; align-items:center; } .item .grow { flex:1; min-width:0; } .item p { color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:20px 0 10px; } .filters label { margin:0; flex:1 1 120px; color:var(--muted); font-size:12px; } .filters button { white-space:nowrap; }
.job-columns,.job-summary { display:grid; grid-template-columns:minmax(180px,1fr) 100px 170px 44px; gap:15px; align-items:center; }
.job-columns { color:var(--muted); font-size:12px; padding:8px 0; } .job { border-bottom:1px solid var(--line); }
.job-summary { list-style:none; padding:13px 0; font-size:13px; cursor:pointer; } .job-summary::-webkit-details-marker { display:none; } .job-summary:hover { background:var(--side); }
.job-title { display:flex; align-items:center; gap:12px; min-width:0; } .job-title>span { min-width:0; overflow-wrap:anywhere; } .job-label { display:block; color:var(--muted); font-size:11px; }
.status { display:inline-flex; gap:5px; align-items:center; width:max-content; padding:3px 8px; border-radius:4px; font-size:12px; } .status:before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status.succeeded { background:var(--accent-bg); color:var(--accent); } .status.running { background:var(--blue-bg); color:var(--blue); } .status.failed { background:var(--red-bg); color:var(--red); } .status.queued { background:var(--amber-bg); color:var(--amber); } .status.canceled { background:var(--side); color:var(--muted); }
.toggle-icon { width:32px; height:32px; display:grid; place-items:center; background:var(--accent-bg); border:1px solid var(--accent); border-radius:5px; color:var(--accent); }
.chevron { display:block; border-right:2px solid currentColor; border-bottom:2px solid currentColor; width:10px; height:10px; transform:translateY(-2px) rotate(45deg); transition:transform .15s; } .job[open]>.job-summary .chevron { transform:translateY(2px) rotate(225deg); }
.job-body { padding:8px 0 23px; } .compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.empty { color:var(--muted); padding:30px 15px; background:var(--side); text-align:center; border-radius:4px; } #notice:not(:empty) { padding:10px 12px; background:var(--side); margin:12px 0; border-radius:4px; font-size:12px; } .error { color:var(--red); }
dl { margin:0; display:grid; grid-template-columns:140px minmax(0,1fr); gap:8px 12px; font-size:13px; } dt { color:var(--muted); } dd { margin:0; overflow-wrap:anywhere; }
.image-button { display:grid; place-items:center; container-type:size; width:100%; aspect-ratio:16/10; padding:0; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--side); cursor:zoom-in; }
.image-button img { display:block; width:min(100cqw,calc(100cqh * var(--image-ratio,1))); height:auto; max-width:100%; max-height:100%; }
.example-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:20px; }
.add-tile { border:2px dashed var(--line); background:var(--side); color:var(--accent); display:flex; align-items:center; justify-content:center; gap:8px; }
.add-tile:hover,.add-tile.drag-over { border-color:var(--accent); background:var(--accent-bg); }
.image-add { width:100%; aspect-ratio:16/10; align-self:start; flex-direction:column; }
.add-symbol { font-size:40px; line-height:1; }
.image-add .muted { color:var(--muted); }
.add-tile.drop-rejected { border-color:var(--red); background:var(--red-bg); }
.set-add { width:100%; min-height:82px; margin-top:16px; }
#example-drop-status:not(:empty) { margin-top:10px; }
.example { min-width:0; border-bottom:1px solid var(--line); padding-bottom:12px; }
.example-meta { margin:8px 0; overflow-wrap:anywhere; } .example-meta p { font-size:12px; color:var(--muted); }
.badge { display:inline-block; margin:4px 6px 0 0; padding:1px 7px; background:var(--accent-bg); color:var(--accent); font-size:12px; border-radius:3px; }
.badge.inactive { background:var(--side); color:var(--muted); border:1px solid var(--line); }
.disabled-example { border-bottom:2px dashed var(--muted); } .disabled-example .image-button { border-style:dashed; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .actions p { flex:1 1 180px; }
.library-sets { margin-top:30px; } .set-row { border-bottom:1px solid var(--line); padding:16px 0; }
.set-head { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:10px; } .set-head>div { min-width:0; overflow-wrap:anywhere; }
.picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); gap:14px; }
.picker-item { min-width:0; } .picker-item p { margin:4px 0; overflow-wrap:anywhere; font-size:12px; }
.order-list { list-style:none; padding:0; margin:10px 0 20px; }
.order-item { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); cursor:grab; }
.order-item>.image-button { width:160px; flex:none; } .order-item .grow { min-width:0; flex:1; overflow-wrap:anywhere; }
.order-item.dragging { opacity:.6; outline:2px solid var(--accent); }
.registration-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.upload-preview { display:block; width:min(100%,calc(400px * var(--image-ratio,1))); height:auto; max-height:400px; margin-inline:auto; }
.job-thumb { width:120px; flex:none; aspect-ratio:3/2; }
.item strong { overflow-wrap:anywhere; }
dialog { color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:20px; width:min(640px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; }
dialog::backdrop { background:rgb(0 0 0 / .55); } .dialog-head { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:12px; } .dialog-head h2 { overflow-wrap:anywhere; margin:0; min-width:0; } .dialog-head button { flex:none; }
dialog .error:not(:empty) { margin:10px 0; } body:has(dialog[open]) { overflow:hidden; }
.library-dialog { width:min(1100px,calc(100vw - 24px)); padding:0; overflow:hidden; }
.library-dialog[open] { display:flex; flex-direction:column; }
.library-dialog>.dialog-head { flex:none; padding:18px 20px; margin:0; border-bottom:1px solid var(--line); }
.library-dialog>form { display:flex; flex-direction:column; min-height:0; }
.dialog-body { padding:0 20px 20px; overflow:auto; min-height:0; overscroll-behavior:contain; }
.dialog-footer { padding:14px 20px; border-top:1px solid var(--line); background:var(--bg); flex:none; }
.dialog-footer>.actions { justify-content:flex-end; }
.dialog-footer .error { overflow-wrap:anywhere; max-height:15dvh; overflow:auto; }
.library-dialog fieldset { border:0; margin:0; padding:0; min-width:0; }
.library-dialog input[readonly] { background:var(--side); }
@media(max-width:600px) { .library-dialog { width:100vw; max-width:100vw; max-height:100dvh; border-radius:0; } .library-dialog>.dialog-head,.dialog-footer { padding:14px; } .dialog-body { padding:0 14px 14px; } }
.image-viewer { width:calc(100vw - 24px); height:calc(100dvh - 24px); max-width:none; }
.image-viewer[open] { display:flex; flex-direction:column; gap:10px; } .image-viewer .dialog-head { margin:0; flex:none; }
.viewer-tools { display:flex; justify-content:space-between; align-items:start; gap:10px; flex-wrap:wrap; flex:none; }
.viewer-tools>.actions { flex:1 1 240px; min-width:0; } .viewer-tools button { min-width:0; }
button[aria-pressed=true] { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
.viewer-stage { flex:1; min-width:0; min-height:0; container-type:size; position:relative; overflow:auto; background:var(--side); }
.viewer-stage img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; }
.viewer-stage:not(.original) { display:flex; align-items:center; justify-content:center; }
.viewer-stage:not(.original) img { width:min(100cqw,calc(100cqh * var(--image-ratio,1))); }
.viewer-stage.original { display:block; } .viewer-stage.original img { width:auto; height:auto; max-width:none; max-height:none; }
.viewer-caption { font-size:12px; overflow-wrap:anywhere; max-height:20dvh; overflow:auto; flex:none; }
.versions-dialog { width:min(1100px,calc(100vw - 24px)); } .version-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .version-list button { text-align:left; overflow-wrap:anywhere; max-width:100%; } .role-text { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(min-width:1600px) { main { padding-inline:45px; } }
@media(max-width:1100px) { .workspace { grid-template-columns:minmax(0,1fr); } }
@media(max-width:900px) { .job-columns,.job-summary { grid-template-columns:minmax(150px,1fr) 85px 40px; gap:10px; } .desktop { display:none; } .split { gap:20px; } }
@media(max-width:720px) { #console { grid-template-columns:1fr; } aside { border-right:0; border-bottom:1px solid var(--line); padding:12px; } .brand { padding:0 7px 10px; } .brand small { display:inline; margin-left:12px; } aside nav { display:flex; flex-wrap:wrap; gap:3px; } aside nav button { padding:7px; } .nav-footer { display:flex; justify-content:space-between; align-items:center; margin-top:10px; } main { padding:15px 17px 30px; } .split { grid-template-columns:1fr; gap:25px; } .job-title { gap:8px; } header { align-items:start; } }
@media(max-width:600px) { .workspace { grid-template-columns:1fr; } .workspace>div:last-child { grid-column:auto; } .item { flex-wrap:wrap; } }
@media(max-width:600px) { .order-item { flex-wrap:wrap; gap:10px; } .order-item>.image-button { width:120px; } .order-item>.actions { flex-basis:100%; } .registration-images,.compare { grid-template-columns:minmax(0,1fr); } .row { flex-wrap:wrap; } .row>* { flex-basis:140px; } .job-columns,.job-summary { grid-template-columns:minmax(0,1fr) 64px 32px; gap:8px; } .job-title { flex-wrap:wrap; } .job-title>span { flex-basis:100%; } .status { padding:3px 5px; } dialog { padding:12px; } }
@media(pointer:coarse) { button { min-height:44px; } input,select,textarea { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .chevron { transition:none; } }

.versions-dialog .thumbs { grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); }