:root{--black:#080808;--panel:#151515;--panel2:#222;--gold:#ffcc00;--gold2:#f5b800;--white:#fff;--muted:#bbb;--danger:#702020}
#toolsToggle{display:block}
#toolbar:not(.expanded) .trace-settings{display:none}
.primary-mark-tools{grid-column:1/-1;grid-row:3;flex-wrap:wrap}
.trace-settings{grid-column:1/-1;grid-row:4;flex-wrap:wrap;font-size:12px}
.trace-settings[hidden]{display:none!important}
@media(pointer:coarse){#toolbar button,#toolbar select{min-height:44px}#toolbar .range input{height:28px}}
@media(max-width:1200px){.primary-mark-tools{order:3;width:100%}.trace-settings{order:3;width:100%}.trace-settings label{display:flex;align-items:center;gap:6px}.trace-settings .range{display:grid}.trace-settings span{color:#bbb}}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font:15px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif}button,select,input{font:inherit}button,select{min-height:34px;border:1px solid #777;border-radius:5px;background:#292929;color:#fff;padding:5px 9px;font-weight:650}button:hover{background:#3a3a3a;border-color:var(--gold)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:1px}button:active{transform:translateY(1px)}button[aria-pressed="true"],button.selected{background:var(--gold);border-color:#fff;color:#000}.danger{border-color:#a84b4b;background:#3a1717}.success{background:#197a3d;border-color:#56d884;color:#fff}.success:hover{background:#22964d;border-color:#fff}
#toolbar{height:auto;min-height:78px;background:var(--black);border-bottom:3px solid var(--gold);display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:center;gap:4px 8px;padding:4px 8px;position:relative;z-index:5}.brand{grid-column:1;grid-row:1;width:118px;color:var(--gold);white-space:nowrap;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1}.brand-mark{display:block;width:38px;height:38px}.brand-name{font-size:14px;font-weight:850;letter-spacing:.15px}.tool-group{display:flex;align-items:center;gap:5px;padding-right:7px;border-right:1px solid #4b4b4b;min-width:0}.file-tools{grid-column:2;grid-row:1}.view-tools{grid-column:3;grid-row:1;justify-content:center}.output-tools{grid-column:4;grid-row:1;border:0;justify-self:end}.image-tools{grid-column:1/3;grid-row:2;justify-content:flex-end}.mark-tools{grid-column:3/5;grid-row:2;border:0;justify-content:flex-start}.view-tools strong{color:#000;background:var(--gold);border-radius:5px;padding:9px 10px;white-space:nowrap}.range{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:0 4px;font-size:11px;color:#ddd;min-width:105px}.range output{text-align:right;color:var(--gold)}.range input{grid-column:1/-1;width:110px;height:15px;accent-color:var(--gold)}.select-label{display:flex;align-items:center;gap:4px;color:#ddd;font-size:12px}.select-label select{min-width:82px}
#workspace{height:calc(100vh - var(--toolbar-h,112px));display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--gold)}.pane{min-width:0;background:#111;border:4px solid transparent;display:grid;grid-template-rows:43px minmax(0,1fr)}.pane.active{border-color:var(--gold);box-shadow:inset 0 0 0 2px #fff}.pane-head{display:flex;align-items:center;gap:6px;padding:4px 6px;background:#1a1a1a;min-width:0}.pane-head>strong{color:var(--gold);font-size:17px;white-space:nowrap}.pane-head .file-select{flex:0 1 42%;min-width:100px;max-width:420px}.pane-head .counter{white-space:nowrap;color:#ddd;font-weight:650}.pane-head .remove-pane{margin-left:auto;white-space:nowrap}.stage{position:relative;overflow:hidden;background:#303030;background-image:linear-gradient(45deg,#353535 25%,transparent 25%),linear-gradient(-45deg,#353535 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#353535 75%),linear-gradient(-45deg,transparent 75%,#353535 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}.stage canvas.marking{cursor:crosshair}.stage canvas.dragging{cursor:grabbing}.empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;font-size:22px;color:#eee}.empty small{font-size:14px;color:#bbb}.pane.has-image .empty{display:none}
dialog{width:min(620px,90vw);max-height:80vh;border:3px solid var(--gold);border-radius:10px;background:#171717;color:#fff;padding:20px}dialog::backdrop{background:#000b}dialog h2{color:var(--gold);margin-top:0}.assign-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px;border-bottom:1px solid #555}.assign-row span{overflow:hidden;text-overflow:ellipsis}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}#toast{display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;background:#fff;color:#000;border:3px solid var(--gold);border-radius:7px;padding:8px 10px;box-shadow:0 6px 30px #000;align-items:center;gap:16px;font-weight:700}#toast.show{display:flex}#toast button{background:#111;color:var(--gold);border-color:#111}
@media(max-width:1500px){#toolbar{gap:3px;padding:3px 5px;grid-template-columns:auto auto minmax(0,1fr) auto;font-size:12px}.tool-group{gap:3px;padding-right:4px}button,select{padding:3px 5px;min-height:31px}.brand{width:108px}.brand-mark{width:34px;height:34px}.brand-name{font-size:12px}.view-tools{justify-content:center}.view-tools strong{padding:7px}.range{min-width:78px}.range input{width:78px}.select-label{font-size:11px;gap:2px}.select-label select{min-width:68px}.pane-head>strong{font-size:15px}}
@media(max-height:800px){#toolbar{font-size:12px;min-height:76px}.range{font-size:9px}.range input{height:12px}.pane{grid-template-rows:39px}}
@media(max-width:1200px){
  #toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;min-height:0;padding:6px;gap:6px;font-size:13px;max-height:48dvh;overflow:auto}
  #toolsToggle{display:block}.brand{width:auto;flex-direction:row;gap:6px}.brand-mark{width:30px;height:30px}
  .file-tools{flex-wrap:wrap;order:2;width:100%}.view-tools{order:3;width:100%;justify-content:flex-start}
  .tool-group{border:0;gap:5px}.image-tools,.mark-tools{display:none}
  .output-tools{display:flex;order:0;width:auto;margin-left:auto;padding-right:0;flex-shrink:0}
  #toolbar.expanded .image-tools,#toolbar.expanded .mark-tools{display:flex;flex-wrap:wrap;width:100%;order:4;justify-content:flex-start}
  button,select{min-height:44px;padding:7px 9px}.range{font-size:12px;min-width:130px}.range input{height:28px;width:130px}
  #workspace{height:calc(100dvh - var(--toolbar-h,180px))}
  .pane{grid-template-rows:auto minmax(0,1fr);min-height:0}.pane-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:3px}.pane-head>strong{grid-column:1/-1;font-size:14px}.pane-head .counter{display:none}.pane-head .file-select{min-width:0;max-width:none;width:100%}
}
@media(min-width:700px) and (max-width:1200px){.view-tools,.primary-mark-tools{width:auto}.primary-mark-tools{margin-left:auto}}
@media(max-width:450px){#toolbar .brand-name{display:none}}
@media(max-width:600px) and (orientation:portrait){#workspace{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.pane-head>strong{grid-column:auto;font-size:12px}.pane-head{grid-template-columns:72px 35px minmax(0,1fr) 35px 62px}.pane-head button{padding:3px}.empty{font-size:17px}.file-tools button{flex:1}.view-tools strong{margin-right:auto}.brand-name{font-size:14px}}