:root {
  --bg: #1e1f22;
  --panel: #2b2d31;
  --panel2: #232428;
  --border: #3a3c41;
  --text: #e3e5e8;
  --dim: #9aa0a6;
  --accent: #D97757;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 13px -apple-system, "Segoe UI", system-ui, sans-serif; overflow: hidden; }
body { display: flex; flex-direction: column; }
button, input, select { font: inherit; color: inherit; }
button { background: #3a3d44; border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px; cursor: pointer; }
button:hover { background: #454850; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
input, select { background: #17181a; border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; }
input:focus, select:focus { outline: 1px solid var(--accent); }

#toolbar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 6px 10px;
  background: var(--accent); border-bottom: 1px solid #b85f40; color: #fff; }
#toolbar button { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.12); color: #fff; }
#toolbar button:hover { background: rgba(0,0,0,.3); }
#toolbar button.active, #toolbar button.primary { background: #FAF9F5; border-color: #FAF9F5; color: #8f3f24; }
#toolbar input, #toolbar select { background: rgba(0,0,0,.22); border-color: rgba(0,0,0,.15); color: #fff; }
#toolbar input:focus, #toolbar select:focus { outline: 1px solid #FAF9F5; }
#toolbar .group { display: flex; align-items: center; gap: 4px; }
#toolbar .group.right { margin-left: auto; }
#page-input { width: 52px; text-align: center; }
#zoom-label { min-width: 48px; text-align: center; color: rgba(255,255,255,.85); }
#page-count { color: rgba(255,255,255,.85); }
#btn-scale { font-weight: 600; }
#toolbar #btn-scale.unset { color: #FAF9F5; text-decoration: underline; }

#main { flex: 1; display: flex; min-height: 0; }
#viewer { flex: 1; position: relative; overflow: auto; background: #3b3d42; display: flex; }
#viewer.pan { cursor: grab; }
#viewer.panning { cursor: grabbing; }
#viewer.draw { cursor: crosshair; }
#empty { margin: auto; text-align: center; color: var(--dim); }
#empty button { margin-top: 8px; }
#recent-list { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#recent-list button.recent { margin: 0; min-width: 240px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page { position: relative; margin: auto; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.5); flex: none; }
#canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
#overlay text { font-family: -apple-system, "Segoe UI", system-ui, sans-serif; font-weight: 600;
  paint-order: stroke; stroke: rgba(0,0,0,.85); stroke-linejoin: round; pointer-events: none; }
#overlay .shape { pointer-events: none; }
#viewer.pan #overlay .shape { pointer-events: stroke; cursor: pointer; }
#viewer.pan #overlay .shape.fillable { pointer-events: all; }
#overlay .rot-zone { fill: transparent; pointer-events: all; cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12a7 7 0 1 1-2.1-5' stroke='%23000' stroke-width='4.5'/><path d='M19 4v4h-4' stroke='%23000' stroke-width='4.5'/><path d='M19 12a7 7 0 1 1-2.1-5' stroke='%23fff' stroke-width='2'/><path d='M19 4v4h-4' stroke='%23fff' stroke-width='2'/></g></svg>") 12 12, alias; }
#viewer.rotating, #viewer.rotating * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12a7 7 0 1 1-2.1-5' stroke='%23000' stroke-width='4.5'/><path d='M19 4v4h-4' stroke='%23000' stroke-width='4.5'/><path d='M19 12a7 7 0 1 1-2.1-5' stroke='%23fff' stroke-width='2'/><path d='M19 4v4h-4' stroke='%23fff' stroke-width='2'/></g></svg>") 12 12, alias !important; }
#overlay .handle { fill: #fff; stroke: #000; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: move; pointer-events: all; }

#sidebar { width: 320px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
#sidebar h2 { margin: 0; padding: 10px 12px 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
#totals { padding: 0 12px 8px; border-bottom: 1px solid var(--border); line-height: 1.6; }
#totals .t { display: flex; justify-content: space-between; }
#totals .t b { font-variant-numeric: tabular-nums; }
#list { flex: 1; overflow: auto; }
.item { padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; display: grid;
  grid-template-columns: 22px 1fr auto; gap: 2px 8px; align-items: center; }
.item:hover { background: var(--panel2); }
.item.sel { background: #2f3b57; }
.item input[type=color] { width: 22px; height: 22px; padding: 0; border: none; background: none; }
.item .name { background: transparent; border-color: transparent; width: 100%; }
.item .name:hover { border-color: var(--border); }
.item .del { padding: 0 7px; background: transparent; border-color: transparent; color: var(--dim); font-size: 16px; }
.item .del:hover { color: #ff6b6b; }
.item .vals { grid-column: 2 / 4; color: var(--dim); font-variant-numeric: tabular-nums; }
.item .vals b { color: var(--text); font-weight: 600; }
.item .pg { color: var(--dim); font-size: 11px; }
.list-empty { padding: 14px 12px; color: var(--dim); }

#status { display: flex; justify-content: space-between; gap: 16px; padding: 4px 10px; background: var(--panel);
  border-top: 1px solid var(--border); color: var(--dim); }
#readout { font-variant-numeric: tabular-nums; color: var(--text); }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; min-width: 420px; }
dialog::backdrop { background: rgba(0,0,0,.5); }
dialog h3 { margin: 0 0 10px; }
dialog fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 8px 0; padding: 8px 10px; }
dialog .row { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px 22px; }
dialog .radio, dialog .check { display: block; margin: 4px 0; }
dialog .sub { color: var(--dim); margin: 6px 0; }
dialog .error { color: #ff6b6b; min-height: 1.2em; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 10px 0 0; }
#detected-list { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-bottom: 6px; }
#detected-list button { text-align: left; }

/* markup tools */
#toolbar button.icon { padding: 3px 6px; line-height: 0; }
#toolbar #mk-color { width: 30px; height: 26px; padding: 1px 2px; border-radius: 4px; cursor: pointer; }
#overlay .mk { pointer-events: none; }
#overlay .hit { fill: none; stroke: transparent; pointer-events: none; }
#viewer.pan #overlay .hit { pointer-events: stroke; cursor: move; }
#viewer.pan #overlay .hit.area { pointer-events: all; }
#viewer.pan #overlay .shape.sel { cursor: move; }
#overlay text.mk-text { font-family: Helvetica, Arial, sans-serif; font-weight: 400; stroke: none; paint-order: normal; white-space: pre; }
#overlay .sel-box { fill: none; stroke: #4f8cff; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
#txt-input { width: 100%; min-width: 320px; resize: vertical; font: 14px Helvetica, Arial, sans-serif; }

/* Google Maps capture */
dialog.big { width: 94vw; height: 92vh; max-width: none; max-height: none; padding: 0; display: none; flex-direction: column; }
dialog.big[open] { display: flex; }
.map-bar { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.map-bar .spacer { flex: 1; }
#map-info { color: var(--dim); }
#map-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#map-main[hidden] { display: none; }
#map-wrap { flex: 1; position: relative; min-height: 0; }
#map { position: absolute; inset: 0; }
#map-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2px dashed #D97757;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.28); pointer-events: none; }
.map-foot { padding: 6px 10px; }
#map-keybox { padding: 20px; }
#map-error { padding: 0 10px 8px; white-space: pre-wrap; }
.item .note { color: var(--text); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
dialog .row.flush { margin-left: 0; }