:root{
  --b:#e5e7eb; --muted:#6b7280; --gray100:#f3f4f6; --gray50:#f9fafb;
}

body{margin:0;background:#f6f7fb;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
.panel{background:#fff;border:1px solid var(--b);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pad{padding:14px}
.subtle{font-size:12px;color:#6b7280;margin-top:8px}

#dg-app{max-width:1400px;margin:0 auto}
.dg-top-row{display:flex;gap:18px;align-items:flex-start}
#dg-menu{flex:0 0 28%;max-width:28%;min-width:240px}
#dg-right{flex:1 1 auto;max-width:72%}

/* Header */
.dg-header{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.dg-header h3{margin:0;font-size:18px}
.dg-actions{display:flex;gap:6px;flex-wrap:wrap}

/* Buttons */
.btn{border:1px solid #111;background:#fff;cursor:pointer;padding:4px 8px;border-radius:8px;font-size:11px;line-height:1.1}
.btn-dark{background:#111;color:#fff}
.status{margin:8px 0;padding:8px 10px;border-radius:8px;font-size:12px}
.uploader{border:2px dashed #d1d5db;border-radius:12px;padding:10px;text-align:center;background:#fff;margin-bottom:10px}
.uploader-note{font-size:11px;color:#777;margin:6px 0 0}

/* Accordion */
.acc{border:1px solid var(--b);border-radius:10px;background:var(--gray100)}
.acc summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:space-between;background:var(--gray100);border-radius:10px}
.acc summary::-webkit-details-marker{display:none}
.caret{transition:transform .2s ease}
.acc[open] .caret{transform:rotate(90deg)}
.acc-body{padding:10px 12px 12px;border-top:1px dashed var(--b);background:var(--gray100);border-radius:0 0 10px 10px}

/* Levels */
.hist{width:100%;height:60px;background:#fff;border:1px solid var(--b);border-radius:8px;display:block}
.level-block{display:flex;flex-direction:column;gap:6px;margin-top:8px;font-size:12px}
.level-line{display:grid;grid-template-columns:56px 1fr 40px;gap:6px;align-items:center}

/* Controls rows */
.sb{display:block;font-size:12px;font-weight:600}
.dg-row{margin-top:8px}
.toggles{display:flex;gap:10px;align-items:center;font-size:12px}
.resample{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.resample select{padding:6px 8px;border:1px solid #d1d5db;border-radius:8px;font-size:12px}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* Tools column */
#dg-tools{flex:0 0 64px;max-width:64px;min-width:54px;background:#ebefe7;border:1px solid var(--b);border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;height:auto;overflow:auto}
#dg-tools .tool-stack{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
#dg-tools .tool-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;aspect-ratio:1/1;border:1px solid #d4d4d4;background:#e5e5e5;border-radius:10px;cursor:pointer;font-size:16px;user-select:none}
#dg-tools .tool-btn.active{background:#888;color:#ffe8b6;border-color:#ffe8b6}
#dg-tools .tool-btn .icon{width:20px;height:20px;display:block}

/* Drawbar row (separate small panel) */
.drawbar{font-size:12px; overflow-x:auto;} /* keep a single line; scroll if tight */

/* ONE-LINE drawbar: inline fields with compact controls */
.db-grid{
  display:flex;               /* single row */
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;           /* do not wrap */
  white-space:nowrap;         /* keep labels inline with controls */
}

/* Make each field inline (label + control side-by-side) */
.db-field{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;              /* do not stretch */
}
.db-field > label{
  font-weight:700;            /* Font / Size / Thickness / Color are bold */
  white-space:nowrap;
}

/* Compact control widths so dropdown sits next to size/thickness/color */
.db-field select,
.db-field input[type="number"],
.db-field input[type="color"]{
  padding:6px 8px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:12px;
}
.db-field select{ width:120px; max-width:120px; }       /* narrower dropdown */
.db-field input[type="number"]{ width:70px; min-width:64px; } /* compact numbers */
.db-field input[type="color"]{ width:42px; height:32px; padding:0; }

/* Right-aligned actions stay on the same row */
.db-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;           /* push to the right end */
  flex:0 0 auto;
}

/* Viewer */
#dg-stage{position:relative;width:100%;max-width:100%;margin:0 auto;user-select:none;touch-action:none;background:#f9fafb;overflow:hidden;min-height:320px}
#dg-layers{position:absolute;inset:0;transform-origin:0 0}
#dg-canvas-base,#dg-canvas-proc,#dg-canvas-anno,#dg-canvas-crop{position:absolute;inset:0;width:100%;height:100%}
#dg-canvas-crop,#dg-canvas-anno{pointer-events:none}
#dg-handle{position:absolute;top:0;height:100%;width:2px;background:#111;cursor:ew-resize;touch-action:none}
#dg-handle>div{position:absolute;top:50%;transform:translate(-50%,-50%);left:0;width:20px;height:20px;border-radius:50%;background:#111;border:3px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}

/* Bottom window */
#dg-bottom-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:start}
@media(max-width:980px){#dg-bottom-grid{grid-template-columns:1fr}}
.viewbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.viewbar .push{margin-left:auto}
.hr{border-top:1px dashed var(--b);padding-top:10px;margin-top:10px}
.crop-btns{display:flex;gap:8px;flex-wrap:wrap}
.info-card{background:#fff;border:1px solid var(--b);border-radius:10px;padding:10px;font-size:12px;color:#444;line-height:1.6}
.info-line{font-size:12px;color:#444;margin-top:6px}

/* Make Crop Apply black text */
#dg-crop-apply{background:#fff;color:#000;border:1px solid #111}

/* Ensure left column Download button is black */
#dg-menu #dg-dl,
#dg-dl{
  background:#000;
  color:#fff;
  border-color:#000;
}

/* Fullscreen (CSS) */
.dg-fs{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;max-width:100vw!important;margin:0!important;padding:12px!important;z-index:9999!important;background:#fff!important}
.dg-fs > .dg-top-row{height:calc(100vh - 24px)}
.dg-fs #dg-menu{height:100%;overflow:auto}
.dg-fs #dg-tools{height:100%}
.dg-fs #dg-right{height:100%;display:flex;flex-direction:column}
.dg-fs #dg-viewer-panel{flex:1 1 auto;display:flex;flex-direction:column;overflow:auto}
.dg-fs #dg-stage{flex:0 0 auto;height:auto!important;min-height:0}

/* Inputs generally */
input[type="range"]{width:100%}

/* --- Compact the drawbar controls only --- */
#dg-right .drawbar .db-field select,
#dg-right .drawbar .db-field input[type="number"]{
  padding: 4px 6px;       /* was 6px 8px */
  height: 28px;           /* slightly shorter */
  line-height: 28px;      /* keep text vertically centered where supported */
}

/* Color swatch: a bit smaller with a tiny side margin */
#dg-right .drawbar .db-field input[type="color"]{
  width: 36px;            /* was 42px */
  height: 26px;           /* was 32px */
  padding: 0;
  margin: 0 2px;          /* tiny margin so it doesn't look crammed */
  border-radius: 6px;
}

/* Hide the "ROI Clear" button in the top row */
#dg-anno-clear {
  display: none !important;
}

/* Narrow just the Size and Thickness fields on the drawbar */
#dg-right .drawbar #dg-fontsize,
#dg-right .drawbar #dg-thick {
  width: 56px;     /* was 70px */
  min-width: 48px; /* was 64px */
}