:root {
  --ruler-size: 22px;
  --pal-bg: #ffffff;
  --pal-header-bg: #fbfcfd;
  --pal-header-text: #5b6472;
  --pal-body-text: #3a4150;
  --pal-muted: #97a0af;
  --pal-divider: #edeff2;
  --pal-border: #e3e6ea;
  --pal-field-border: #d6dae1;
  --accent: #4f8cff;
  --shell-chrome: #1e2330;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }

/* App shell: fixed full-viewport, no page scroll (U1) */
body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

#topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .4rem .8rem; background: #1e2330; color: #fff;
}
.brand { white-space: nowrap; }
#measure-bar { flex: 1 1 auto; display: flex; align-items: center; gap: 1rem; font-size: .75rem; color: #aab; }
#measure-bar .measure { font-variant-numeric: tabular-nums; min-width: 64px; }
#measure-bar .measure-page select { font-size: .72rem; padding: .15rem 1.35rem .15rem .4rem; border-radius: 4px; border: 1px solid #444c5e; background-color: #2a3142; color: #fff; }
.measure-page-dims { display: inline-flex; align-items: center; gap: .3rem; color: #aab; }
.measure-page-dims[hidden] { display: none; }
.measure-page-dims input {
  width: 58px; font-size: .72rem; padding: .15rem .35rem; border-radius: 4px;
  border: 1px solid #444c5e; background: #2a3142; color: #fff;
  font-variant-numeric: tabular-nums;
}
.measure-page-dims input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,140,255,.25); }
.measure-page-dims .mpd-x { color: #7a8598; }
.measure-page-dims .mpd-unit { font-size: .68rem; }
#toolbar { display: flex; gap: .5rem; }

/* workspace preset control (T5b) */
.ws-ctrl { display: flex; align-items: center; gap: .3rem; font-size: .72rem; }
.ws-label { color: #aab; text-transform: uppercase; letter-spacing: .04em; }
.ws-ctrl select, .ws-ctrl input { font-size: .72rem; padding: .2rem .3rem; border-radius: 4px; border: 1px solid #444c5e; background-color: #2a3142; color: #fff; }
.ws-ctrl select { padding: .2rem 1.35rem .2rem .4rem; }
.ws-ctrl input { width: 84px; }
.ws-ctrl button { padding: .2rem .45rem; font-size: .72rem; }

button {
  padding: .4rem .7rem; border: 0; border-radius: 6px;
  background: #3a4254; color: #fff; cursor: pointer;
}
button:hover { background: #4a5468; }

/* Custom-styled selects everywhere (no native OS chrome). A chevron is layered as a
   background image; context rules set the colours with background-COLOR (never the
   `background` shorthand, which would wipe the chevron). */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: inherit; font-size: .76rem; line-height: 1.2;
  padding: .28rem 1.5rem .28rem .5rem;
  border: 1px solid var(--pal-field-border); border-radius: 5px;
  background-color: #fff; color: #222; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238a93a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .45rem center; background-size: 10px 10px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
select:hover { border-color: #b9c0ca; }
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,140,255,.16); }
select::-ms-expand { display: none; }
/* dark-context selects (top bar) — light chevron, dark focus ring already fine */
#topbar select, #measure-bar select, .ws-ctrl select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23aeb6c4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#status-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .25rem .8rem; background: #1e2330; color: #aab;
  font-size: .72rem; font-variant-numeric: tabular-nums;
}
#status-bar .sb-spacer { flex: 1 1 auto; }
#status-bar .sb-history { display: flex; gap: .2rem; }
#status-bar .sb-history button { width: 24px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; background: #2a3142; color: #c2c8d4; border-radius: 4px; }
#status-bar .sb-history button:hover:not(:disabled) { background: #3a4254; color: #fff; }
#status-bar .sb-history button:disabled { opacity: .4; cursor: default; }
#status-bar .sb-zoom { display: flex; align-items: center; gap: .3rem; }
#status-bar .sb-zoom button { padding: .1rem .4rem; font-size: .72rem; }
#status-bar #sb-grid, #status-bar #sb-snap { padding: .1rem .45rem; font-size: .72rem; background: #2a3142; }
#status-bar #sb-grid.on, #status-bar #sb-snap.on { background: #4f8cff; color: #fff; }
#sb-zoom-val { min-width: 40px; text-align: center; }

/* tool rail (~50px) | centre | two right panel docks */
#shell-body {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: 50px 1fr 224px 224px;
  background: var(--shell-chrome); /* fills the strip above the docks, level with the ruler */
}

#tool-rail {
  background: #2a3142;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .4rem 0;
}
.tool-btn {
  width: 38px; height: 38px; padding: 0;
  background: transparent; color: #c2c8d4; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.tool-btn svg { display: block; }
.tool-btn:hover { background: #3a4254; color: #fff; }
.tool-btn.active { background: #4f8cff; color: #fff; }

#canvas-wrap {
  min-width: 0; min-height: 0;
  display: grid;
  grid-template-columns: var(--ruler-size) 1fr;
  grid-template-rows: var(--ruler-size) 1fr;
  background: #d9dce2;
  overflow: hidden;
}
#ruler-corner { grid-area: 1 / 1; background: #1e2330; border-right: 1px solid #444c5e; border-bottom: 1px solid #444c5e; }
#ruler-top { grid-area: 1 / 2; }
#ruler-left { grid-area: 2 / 1; }
.ruler { display: block; width: 100%; height: 100%; }
#canvas-host {
  grid-area: 2 / 2;
  position: relative;     /* fabric's canvas-container anchors here */
  min-width: 0; min-height: 0;
  overflow: hidden;       /* the fabric canvas fills this; panning happens inside */
}
#canvas-host .canvas-container { position: absolute; inset: 0; }

.panel-dock {
  margin-top: var(--ruler-size); /* start the palettes just below the ruler, not over it */
  background: var(--pal-bg);
  border-left: 1px solid var(--pal-border);
  overflow: auto;
  display: flex; flex-direction: column;
}
.panel-dock::-webkit-scrollbar { width: 9px; }
.panel-dock::-webkit-scrollbar-thumb { background: #d3d8df; border: 3px solid var(--pal-bg); border-radius: 6px; }
.panel-dock::-webkit-scrollbar-thumb:hover { background: #bcc3cd; }

/* dock collapse chrome */
.dock-bar { display: flex; justify-content: flex-end; padding: 3px; background: var(--pal-bg); border-bottom: 1px solid var(--pal-divider); }
.dock-collapse {
  width: 20px; height: 18px; padding: 0; border-radius: 4px;
  background: transparent; color: #8a93a6;
  display: flex; align-items: center; justify-content: center;
}
.dock-collapse:hover { background: #eef0f3; color: #444; }
.dock-expand {
  display: none; width: 100%; height: 100%; padding: 6px 0 0; border-radius: 0;
  background: transparent; color: #8a93a6; align-items: flex-start; justify-content: center;
}
.dock-expand:hover { background: #eef0f3; color: #444; }
.panel-dock.collapsed { overflow: hidden; }
.panel-dock.collapsed .panel,
.panel-dock.collapsed .dock-bar { display: none; }
.panel-dock.collapsed .dock-expand { display: flex; }

/* Accordion panels (U4) — flat, flush, divider-separated (no card chrome) */
.panel { border-bottom: 1px solid var(--pal-divider); }
.panel-header {
  width: 100%; text-align: left; cursor: grab;
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .7rem;
  background: var(--pal-header-bg); color: var(--pal-header-text); border: 0; border-radius: 0;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.panel-header:hover { background: #f2f4f7; color: #2f3742; }
.panel.open .panel-header { color: #2f3742; }
.panel-twisty { transition: transform .15s ease; font-size: .6rem; color: var(--pal-muted); }
.panel.open .panel-twisty { transform: rotate(90deg); color: var(--accent); }
.panel-body { padding: .6rem .7rem .7rem; font-size: .78rem; color: var(--pal-body-text); }
.panel:not(.open) .panel-body { display: none; }
.panel.dragging { opacity: .5; }
.panel-empty { margin: 0; color: var(--pal-muted); font-style: italic; font-size: .72rem; }

/* properties / page-setup fields (F40) */
.prop-group h3 { margin: 0 0 .35rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: #8a93a6; }
.prop-row { display: flex; gap: .35rem; }
.prop-field { display: flex; flex-direction: column; gap: .1rem; flex: 1; font-size: .66rem; color: #777; margin-bottom: .35rem; }
.prop-sub { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: #99a; margin: .2rem 0 .15rem; }
.si-row { display: flex; align-items: center; gap: .4rem; }
.si-row .si-range { flex: 1; min-width: 0; }
.si-row .si-num { width: 48px; flex: 0 0 auto; }
.prop-wh { align-items: flex-end; }
.pp-lock { width: 22px; height: 24px; padding: 0; flex: 0 0 auto; background: #eef0f3; color: #777; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.pp-lock:hover { background: #e0e4ea; color: #333; }
.pp-lock.active { background: #4f8cff; color: #fff; }
.prop-check { display: flex; align-items: center; gap: .25rem; font-size: .66rem; color: #666; flex: 1; }
.prop-field input, .prop-field select {
  font-size: .76rem; padding: .28rem .4rem;
  border: 1px solid var(--pal-field-border); border-radius: 5px; background-color: #fff; color: #222; width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.prop-field select { padding: .28rem 1.5rem .28rem .4rem; }
.prop-field input:focus, .prop-field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79, 140, 255, .16);
}

/* toasts (F39) */
#toast-host {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1000;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
}
.toast {
  padding: .55rem .8rem; border-radius: 6px; color: #fff; font-size: .82rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; max-width: 320px;
}
.toast-info { background: #3a4254; }
.toast-success { background: #2e7d52; }
.toast-warning { background: #b5840f; }
.toast-error { background: #b23b3b; }

/* align panel (F22) */
.align-row { display: flex; gap: .2rem; margin-bottom: .25rem; }
.align-btn {
  width: 26px; height: 24px; padding: 0; border-radius: 4px;
  background: #eef0f3; color: #555;
  display: flex; align-items: center; justify-content: center;
}
.align-btn:hover { background: #dfe3e9; color: #222; }
.pf-row { display: flex; gap: .25rem; }
.pf-btn { width: 30px; height: 26px; padding: 0; border-radius: 4px; background: #eef0f3; color: #555; display: flex; align-items: center; justify-content: center; }
.pf-btn:hover { background: #dfe3e9; color: #111; }

/* swatches grid + spot differential surround (Illustrator-style, small squares) */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, 18px); gap: 2px; }
.swatch {
  position: relative; width: 18px; height: 18px; padding: 0; overflow: hidden;
  background: var(--sw); border: 1px solid rgba(0,0,0,.22); border-radius: 5px; cursor: pointer;
  transition: box-shadow .1s ease;
}
.swatch:hover { box-shadow: 0 0 0 2px #4f8cff; }
.swatch.spot { border: 1px solid #555; box-shadow: inset 0 0 0 1px #fff; }
.swatch.spot:hover { box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #4f8cff; }
.swatch.spot::after { /* corner triangle marks a spot colour */
  content: ''; position: absolute; right: 0; bottom: 0;
  border-width: 0 0 6px 6px; border-style: solid; border-color: transparent transparent #1a1a1a transparent;
}
.swatch-add {
  background: #fff; border: 1px dashed #b7bdc8; color: #8a93a6;
  display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1;
}
.swatch-add:hover { color: #4f8cff; border-color: #4f8cff; outline: none; }
/* None: white tile with a red diagonal line */
.swatch-none { background: #fff; }
.swatch-none::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent 46%, #e23 46%, #e23 54%, transparent 54%);
}
.sw-hint { font-size: .58rem; color: #aab; margin-top: .35rem; }
.ct-add-swatch { padding: .2rem .5rem; font-size: .7rem; margin: .3rem 0; background: #eef0f3; color: #555; }
.ct-add-swatch:hover { background: #e0e4ea; color: #222; }
.prop-spot { font-size: .66rem; color: #777; margin-top: .25rem; }

/* Layers panel (Illustrator-style: layers → object sub-rows) */
.ly-layer { border-bottom: 1px solid #e6e8ec; }
.ly-head { display: flex; align-items: center; gap: .3rem; padding: .25rem .3rem; cursor: pointer; font-size: .74rem; font-weight: 600; color: #333; background: #f1f3f6; }
.ly-layer.current > .ly-head { background: #e3ecff; }
.ly-caret { display: inline-block; transition: transform .12s ease; font-size: .9rem; line-height: 1; color: #8a93a6; }
.ly-caret.open { transform: rotate(90deg); }
.ly-caretbtn { background: transparent; padding: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: #6a7282; }
.ly-eye { background: transparent; padding: 0; width: 18px; height: 16px; display: flex; align-items: center; justify-content: center; color: #6a7282; }
.ly-caretbtn:hover, .ly-eye:hover { color: #222; }
.ly-lname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ly-rename { flex: 1; font-size: .74rem; padding: .05rem .2rem; border: 1px solid #4f8cff; border-radius: 3px; }
.ly-del { background: transparent; color: #c2c8d4; width: 16px; height: 16px; padding: 0; font-size: 13px; line-height: 1; }
.ly-del:hover { color: #e23b3b; }
.ly-obj { display: flex; align-items: center; gap: .3rem; padding: .2rem .3rem .2rem 1.3rem; font-size: .72rem; color: #333; cursor: pointer; }
.ly-obj:hover { background: #f4f6f9; }
.ly-obj.active { background: #e3ecff; }
.ly-thumb { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; background: #fff repeating-conic-gradient(#eceef1 0 25%, #fff 0 50%) 0 0 / 8px 8px; border: 1px solid #dfe2e7; border-radius: 2px; }
.ly-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-actions { display: flex; justify-content: flex-end; gap: .3rem; padding: .35rem .2rem 0; }
.layer-actions button { width: 26px; height: 22px; padding: 0; font-size: .8rem; background: #eef0f3; color: #555; }
.layer-actions button:hover { background: #e0e4ea; color: #222; }

/* Pages panel */
.pg-list { display: flex; flex-direction: column; gap: 2px; }
.pg-row { display: flex; align-items: center; gap: .4rem; padding: .25rem .35rem; font-size: .74rem; color: #333; background: #f1f3f6; border-radius: 3px; cursor: pointer; user-select: none; }
.pg-row:hover { background: #e7ebf1; }
.pg-row.active { background: #e3ecff; box-shadow: inset 0 0 0 1px #4f8cff; }
.pg-num { min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 600; color: #5a6678; background: #dfe4ec; border-radius: 3px; }
.pg-row.active .pg-num { background: #4f8cff; color: #fff; }
.pg-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-rename { flex: 1; font-size: .74rem; padding: .05rem .2rem; border: 1px solid #4f8cff; border-radius: 3px; }
.page-actions { display: flex; justify-content: flex-end; gap: .3rem; padding: .35rem .2rem 0; }
.page-actions button { width: 26px; height: 22px; padding: 0; font-size: .8rem; background: #eef0f3; color: #555; }
.page-actions button:hover { background: #e0e4ea; color: #222; }
.page-actions button:disabled { opacity: .4; cursor: default; }
.pg-section { margin-bottom: .35rem; }
.pg-section-head { display: flex; align-items: center; justify-content: space-between; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a93a3; padding: .15rem .1rem; }
.pg-section-head button { width: 18px; height: 18px; padding: 0; font-size: .72rem; background: #eef0f3; color: #555; border-radius: 3px; }
.pg-section-head button:hover { background: #e0e4ea; color: #222; }
.pg-empty { font-size: .68rem; color: #9aa3b2; padding: .1rem .2rem; margin: 0; }
.pg-master-row .pg-num.pg-mbadge { background: #6a4ddf; color: #fff; }
.pg-master-row.active { box-shadow: inset 0 0 0 1px #6a4ddf; background: #ece7ff; }
.pg-master { max-width: 78px; font-size: .6rem; padding: 0 .1rem; height: 18px; border: 1px solid #d3d8e0; border-radius: 3px; background: #fff; color: #555; }
.ch-color { width: 26px; height: 20px; padding: 0; border: 1px solid #cfd4dd; border-radius: 3px; cursor: pointer; }

/* custom WYSIWYG font picker */
.prop-label { font-size: .64rem; color: #777; }
.font-picker { position: relative; }
.fp-button {
  width: 100%; text-align: left; padding: .3rem .4rem; font-size: .85rem;
  background: #fff; color: #222; border: 1px solid #d2d6dd; border-radius: 4px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.fp-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1100; margin-top: 2px;
  background: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.18);
  padding: .3rem; display: flex; flex-direction: column; gap: .25rem;
}
.fp-menu[hidden] { display: none; } /* author display:flex would otherwise override [hidden] */
.fp-search { font-size: .78rem; padding: .25rem .35rem; border: 1px solid #d2d6dd; border-radius: 4px; }
.fp-list { max-height: 260px; overflow: auto; }
.fp-item { padding: .25rem .4rem; font-size: 1rem; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.fp-item:hover { background: #eef0f3; }
.fp-item.active { background: #e3ecff; }

/* uniform colour picker */
.color-picker { display: flex; flex-direction: column; gap: .35rem; }
.cp-wheel-wrap { display: flex; align-items: center; gap: .5rem; justify-content: center; }
.cp-wheel-box { position: relative; width: 120px; height: 120px; touch-action: none; cursor: crosshair; }
.cp-wheel { display: block; width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.cp-wheel-handle {
  position: absolute; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px #333; transform: translate(-50%, -50%); pointer-events: none;
}
.cp-value { writing-mode: vertical-lr; direction: rtl; width: 14px; height: 110px; }
.cp-top { display: flex; gap: .5rem; align-items: stretch; }
.cp-preview { width: 44px; min-height: 40px; border: 1px solid #cfd4dd; border-radius: 4px; background: #fff; }
.cp-meta { flex: 1; display: flex; flex-direction: column; gap: .25rem; justify-content: center; }
.cp-field { display: flex; flex-direction: column; gap: .1rem; font-size: .64rem; color: #777; }
.cp-field select, .cp-field input { font-size: .75rem; padding: .2rem .25rem; border: 1px solid #d2d6dd; border-radius: 3px; }
.cp-field select { padding: .2rem 1.35rem .2rem .4rem; }
.cp-check { display: flex; align-items: center; gap: .25rem; font-size: .66rem; color: #666; }
.cp-sliders { display: flex; flex-direction: column; gap: .2rem; }
.cp-slider { display: flex; align-items: center; gap: .35rem; }
.cp-lab { width: 12px; font-size: .66rem; color: #888; }
.cp-range { flex: 1; }
.cp-num { width: 42px; font-size: .72rem; padding: .15rem .2rem; border: 1px solid #d2d6dd; border-radius: 3px; }
.cp-hex { flex-direction: row; align-items: center; gap: .35rem; }
.cp-hex input { width: 78px; }

/* colour panel target toggle + stroke panel */
.ct-target { display: flex; gap: 0; margin-bottom: .4rem; }
.ct-tbtn { flex: 1; padding: .25rem; font-size: .72rem; background: #e8ebef; color: #555; border-radius: 0; }
.ct-tbtn:first-child { border-radius: 4px 0 0 4px; }
.ct-tbtn:last-child { border-radius: 0 4px 4px 0; }
.ct-tbtn.active { background: #4f8cff; color: #fff; }
.st-add { padding: .3rem .6rem; font-size: .74rem; margin-top: .4rem; }

/* Fill/Stroke selector at the tool-rail bottom */
.fillstroke { margin-top: auto; padding: 6px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fs-pair { position: relative; width: 38px; height: 38px; }
.fs-swatch {
  position: absolute; width: 24px; height: 24px; padding: 0;
  border: 1.5px solid #cfd4dd; border-radius: 3px; background: #fff; cursor: pointer;
}
.fs-fill { left: 0; top: 0; z-index: 1; }
.fs-stroke { right: 0; bottom: 0; z-index: 0; background: transparent; border-width: 5px; } /* hollow ring */
.fs-swatch.active { z-index: 2; box-shadow: 0 0 0 2px #4f8cff; }
.fs-mini-row { display: flex; gap: 4px; }
.fs-mini { width: 16px; height: 16px; padding: 0; font-size: 10px; line-height: 1; background: #2a3142; color: #c2c8d4; border-radius: 3px; }
.fs-mini:hover { background: #3a4254; color: #fff; }

/* rail delete action */
.rail-delete {
  width: 38px; height: 34px; padding: 0; margin: 4px 0 6px; border-radius: 6px;
  background: transparent; color: #b9707a;
  display: flex; align-items: center; justify-content: center;
}
.rail-delete:hover { background: #5a2630; color: #ff7a88; }
.dialog .cf-danger { background: #b23b3b; }
.dialog.confirm h3 { margin: 0 0 .8rem; font-weight: 500; }

/* modal dialog (size entry, etc.) */
.dialog-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 24, 33, .35);
}
.dialog {
  background: #fff; border-radius: 8px; padding: 1rem 1.1rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.3); min-width: 260px;
}
.dialog h3 { margin: 0 0 .7rem; font-size: .85rem; }
.dialog-row { display: flex; gap: .6rem; }
.dialog-row label { display: flex; flex-direction: column; gap: .2rem; font-size: .7rem; color: #666; flex: 1; }
.dialog-row input { font-size: .85rem; padding: .35rem .4rem; border: 1px solid #cdd2da; border-radius: 4px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.dialog-actions button { padding: .35rem .8rem; font-size: .8rem; }
.dialog-actions #dlg-ok { background: #4f8cff; }

/* context menu (F24) */
.context-menu {
  position: fixed; z-index: 1100; min-width: 160px;
  background: #fff; border: 1px solid #ccc; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: .25rem; overflow: hidden;
}
.context-menu .cm-item {
  display: block; width: 100%; text-align: left;
  background: transparent; color: #222; border-radius: 4px;
  padding: .35rem .6rem; font-size: .8rem;
}
.context-menu .cm-item:hover:not(:disabled) { background: #eef0f3; }
.context-menu .cm-item:disabled { color: #bbb; cursor: default; }
.context-menu .cm-sep { height: 1px; background: #e2e4e8; margin: .25rem .3rem; }

/* Links / assets panel (F16) — document-wide list of linked assets */
.lp-head { margin-bottom: .5rem; }
.lp-import { width: 100%; font-size: .72rem; padding: .38rem; background: var(--accent); color: #fff; border-radius: 6px; }
.lp-import:hover { background: #3f7ae6; }
.lp-list { display: flex; flex-direction: column; gap: .4rem; }
.lp-item { display: grid; grid-template-columns: 40px 1fr auto; gap: .5rem; align-items: start; padding: .4rem; border: 1px solid var(--pal-divider); border-radius: 8px; }
.lp-thumb { width: 40px; height: 40px; border-radius: 5px; background: #f1f3f6 center/cover no-repeat; border: 1px solid var(--pal-divider); display: flex; align-items: center; justify-content: center; font-size: .5rem; font-weight: 700; color: #8a93a6; }
.lp-thumb-doc { background: #eef2f7; }
.lp-info { min-width: 0; }
.lp-name { font-size: .74rem; font-weight: 600; color: var(--pal-body-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-meta { font-size: .62rem; color: var(--pal-muted); margin: .1rem 0 .3rem; }
.lp-actions { display: flex; flex-wrap: wrap; gap: .25rem; }
.lp-actions button { font-size: .62rem; padding: .18rem .4rem; background: #eef0f3; color: #555; border-radius: 4px; }
.lp-actions button:hover:not(:disabled) { background: #e0e4ea; color: #222; }
.lp-actions button:disabled { opacity: .45; cursor: default; }
.lp-status { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .12rem .4rem; border-radius: 8px; height: fit-content; }
.lp-ok { background: #dcfce7; color: #166534; }
.lp-missing { background: #fee2e2; color: #b91c1c; }
.lp-modified { background: #fef3c7; color: #92400e; }

/* PDF import dialog (F33) */
.pdf-dialog { min-width: 560px; max-width: 92vw; }
.pi-body { display: flex; gap: 1rem; }
.pi-preview {
  position: relative; flex: 0 0 auto; width: 380px; min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  background: #f1f3f6; border: 1px solid var(--pal-divider); border-radius: 8px; overflow: hidden;
}
.pi-preview canvas { max-width: 100%; max-height: 380px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.pi-loading { position: absolute; font-size: .72rem; color: var(--pal-muted); }
.pi-controls { flex: 1 1 auto; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.pi-pagenav { display: flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--pal-body-text); }
.pi-pagenav button { width: 26px; height: 24px; padding: 0; font-size: .9rem; background: #eef0f3; color: #555; border-radius: 4px; }
.pi-pagenav button:hover:not(:disabled) { background: #e0e4ea; color: #222; }
.pi-pagenav button:disabled { opacity: .4; cursor: default; }
.pi-field { display: flex; flex-direction: column; gap: .25rem; font-size: .7rem; color: #666; }
.pi-boxsize { font-size: .74rem; font-weight: 600; color: var(--pal-body-text); font-variant-numeric: tabular-nums; }
.pi-note { font-size: .64rem; color: var(--pal-muted); margin: auto 0 0; line-height: 1.4; }

/* Top-bar File controls (Open / Save / Export) */
.file-menu { display: inline-flex; gap: .3rem; margin-left: .3rem; }
.file-btn { padding: .25rem .6rem; font-size: .72rem; background: #2a3142; color: #dfe3ea; border: 1px solid #3a4254; border-radius: 6px; }
.file-btn:hover { background: #3a4254; color: #fff; }
.file-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.file-btn-primary:hover { background: #3f7ae6; border-color: #3f7ae6; }

/* Top-bar account / login chip */
.pcx-acct { font-size: .72rem; font-weight: 700; padding: .28rem .7rem; border-radius: 6px; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.pcx-acct.on { background: rgba(46,160,120,.16); color: #7ee2a8; border: 1px solid rgba(46,160,120,.4); }
.pcx-acct.sub { background: var(--accent); color: #fff; }
.pcx-acct.out { background: #2a3142; color: #dfe3ea; border: 1px solid #3a4254; }
.pcx-acct:hover { filter: brightness(1.12); }

/* Export options popover (print marks) */
.export-pop { position: fixed; z-index: 200; width: 244px; background: #1f2534; border: 1px solid #3a4254; border-radius: 10px; padding: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.5); color: #dfe3ea; font-size: .8rem; }
.export-pop-h { font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: #9aa4b8; margin-bottom: 8px; }
.export-pop label { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; cursor: pointer; }
.export-pop input { accent-color: var(--accent); }
.export-pop-note { color: #7f8aa3; font-size: .68rem; line-height: 1.4; margin: 8px 0 10px; }
.export-pop-go { width: 100%; justify-content: center; padding: .45rem; font-size: .78rem; }

/* Page colour control (Document properties) */
.ps-pagecol { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ps-pagecol-sw { width: 30px; height: 22px; border-radius: 6px; border: 1px solid #3a4254; cursor: pointer; padding: 0; flex: 0 0 auto; }
.ps-pagecol-lbl { font-size: .72rem; color: #9aa4b8; }
.ps-pagecol-none { margin-left: auto; font-size: .7rem; padding: .22rem .55rem; background: #2a3142; color: #dfe3ea; border: 1px solid #3a4254; border-radius: 6px; cursor: pointer; }
.ps-pagecol-none:hover { background: #3a4254; color: #fff; }
.ps-pagecol-picker { margin-top: 8px; }

/* Gradient editor (Colour panel) */
.ge { display: flex; flex-direction: column; gap: 10px; }
.ge-types { display: flex; gap: 6px; }
.ge-type { flex: 1; padding: .32rem; font-size: .74rem; background: #2a3142; color: #dfe3ea; border: 1px solid #3a4254; border-radius: 6px; cursor: pointer; }
.ge-type.active { background: var(--accent, #4f8cff); color: #fff; border-color: var(--accent, #4f8cff); }
.ge-bar { position: relative; height: 26px; border-radius: 6px; border: 1px solid #3a4254; background-repeat: no-repeat; cursor: copy; margin-bottom: 14px; }
.ge-stops { position: absolute; left: 0; right: 0; bottom: -11px; height: 0; }
.ge-stop { position: absolute; top: 0; transform: translate(-50%, 0); width: 14px; height: 20px; border-radius: 3px; border: 2px solid #fff; box-shadow: 0 0 0 1px #3a4254, 0 2px 4px rgba(0,0,0,.4); background: var(--c, #fff); cursor: grab; padding: 0; }
.ge-stop.sel { border-color: var(--accent, #4f8cff); box-shadow: 0 0 0 2px var(--accent, #4f8cff); z-index: 2; }
.ge-stopedit { display: flex; flex-direction: column; gap: 8px; }
.ge-del { padding: .3rem; font-size: .72rem; background: #3a2730; color: #f3c2c2; border: 1px solid #5a3a44; border-radius: 6px; cursor: pointer; }
.ge-del:disabled { opacity: .4; cursor: not-allowed; }