:root {
  color-scheme: light;
  --ink: #162033;
  --muted: #5f6878;
  --line: #d5dbe5;
  --panel: #ffffff;
  --soft: #eef2f7;
  --accent: #0f766e;
  --accent-soft: #dff4f0;
  --accent-ink: #ffffff;
  --warn: #925f08;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #e6ebf2;
}

button,
input {
  font: inherit;
}

button,
.toolbar-file {
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 750;
  white-space: nowrap;
}

button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 19px;
  line-height: 1;
}

.app-shell {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 100vh;
}

.app-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
  flex-wrap: wrap;
  overflow: visible;
}

.workflow-ribbon {
  grid-column: 1 / -1;
  display: none;
  gap: 10px;
  align-items: stretch;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  overflow-x: auto;
}

.context-panel {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 18, 29, .92);
  color: var(--muted);
  font-size: 13px;
}

.context-panel strong {
  color: var(--ink);
}

.context-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  place-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .05);
  font-size: 12px;
  font-weight: 800;
}

.context-chip::before {
  content: "";
  display: none;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: var(--chip-color);
}

.context-chip[style*="--chip-color"]::before {
  display: inline-block;
}

.workflow-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.workflow-group span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 4px;
}

.quick-action {
  min-height: 38px;
  border-color: #cdd5e1;
  background: #fff;
}

.quick-action.primary-action {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.quick-action.danger-action {
  border-color: #fecaca;
  color: #991b1b;
  background: #fff7f7;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
}

.brand p,
.statusbar,
.page-sidebar-head span,
.copyright-note p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

#documentTitle {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.file-menu {
  position: relative;
  z-index: 5;
}

.menu-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.file-menu summary {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 16px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}

.file-menu summary::-webkit-details-marker {
  display: none;
}

.file-menu-popover {
  position: absolute;
  top: 44px;
  left: 0;
  display: grid;
  gap: 4px;
  width: 210px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(20, 30, 45, .18);
}

.wide-menu,
.legal-menu {
  width: 320px;
}

.menu-item {
  display: grid;
  align-items: center;
  justify-content: start;
  min-height: 38px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-weight: 750;
  cursor: pointer;
}

.menu-item:hover {
  background: var(--soft);
}

.menu-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.menu-copy {
  display: grid;
  gap: 7px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.menu-copy strong {
  color: var(--ink);
  font-size: 12px;
}

.tool-palette {
  max-width: none;
  flex-wrap: wrap;
  flex: 1 1 520px;
}

.group-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 2px;
}

.toolbar-group:last-child {
  border-right: 0;
}

.toolbar-file input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.secondary {
  border-color: #a7c6c2;
  background: #e7f6f3;
  color: #07534d;
}

.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.tool {
  position: relative;
  min-width: 38px;
  padding: 0;
  font-size: 14px;
}

.tool::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 10;
  width: max-content;
  max-width: 210px;
  transform: translateX(-50%);
  padding: 7px 9px;
  border-radius: 7px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
  white-space: normal;
}

.tool:hover::after,
.tool:focus-visible::after {
  opacity: 1;
}

.tool.is-active,
.toolbar-group button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #064e49;
}

.text-tools input[type="text"] {
  width: 180px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--ink);
}

.text-tools input[type="number"] {
  width: 66px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
}

.text-tools input[type="color"] {
  width: 38px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.text-tools {
  display: none;
}

body[data-context="text"] .text-tools,
body[data-context="paragraph"] .text-tools,
body[data-context="note"] .text-tools,
body[data-context="callout"] .text-tools,
body[data-context="signature"] .text-tools {
  display: flex;
}

#pageStatus {
  min-width: 64px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.zoom-tools span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.zoom-tools input {
  width: 118px;
}

.page-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border-right: 1px solid var(--line);
  background: #f8fafc;
  min-width: 0;
  min-height: 0;
}

.page-nav {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  gap: 7px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.page-nav button {
  min-width: 0;
  min-height: 38px;
  padding: 0;
}

.page-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.page-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 38px;
  padding: 0 6px;
  font-size: 13px;
}

.page-tool-icon {
  font-size: 17px;
  line-height: 1;
}

.page-tool-label {
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.page-sidebar-head {
  display: grid;
  gap: 4px;
}

.page-thumbs {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}

.page-thumb {
  display: grid;
  gap: 7px;
  justify-items: center;
  min-height: 132px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.page-thumb.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.thumb-canvas {
  display: block;
  max-width: 118px;
  max-height: 104px;
  border: 1px solid #cbd3df;
  background: #fff;
  box-shadow: 0 3px 10px rgba(20, 30, 45, .08);
}

.page-thumb span {
  font-size: 12px;
  font-weight: 850;
}

.copyright-note {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #ead89f;
  border-radius: 8px;
  background: #fff9e8;
}

.copyright-note strong {
  color: var(--warn);
  font-size: 13px;
}

.workspace {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.product-strip {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.product-strip strong {
  color: var(--ink);
}

.statusbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.ocr-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid #7c5f17;
  background: #2c230f;
  color: #ffe8a8;
  font-size: 13px;
}

.ocr-notice strong {
  color: #fff4cf;
}

.canvas-wrap {
  display: grid;
  place-items: start center;
  overflow: auto;
  padding: 26px;
}

.empty-state {
  display: grid;
  place-items: center;
  width: min(720px, 100%);
  min-height: 440px;
  padding: 24px;
  text-align: center;
}

.empty-state h2 {
  margin-bottom: 10px;
  font-size: 30px;
}

.empty-state p {
  color: var(--muted);
  line-height: 1.6;
}

.onboarding-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.onboarding-actions .toolbar-file {
  min-height: 42px;
}

.onboarding-steps {
  display: grid;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto;
  padding-left: 22px;
  color: var(--muted);
  text-align: left;
  line-height: 1.45;
}

.page-stage {
  position: relative;
  background: #fff;
  box-shadow: 0 18px 55px rgba(20, 30, 45, .18);
}

#pdfCanvas {
  display: block;
}

.overlay-layer {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

.annotation {
  position: absolute;
  min-width: 34px;
  min-height: 22px;
  border: 1px solid transparent;
  user-select: none;
  touch-action: none;
}

.annotation.is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .18);
}

.annotation.text,
.annotation.signature {
  display: block;
  box-sizing: border-box;
  padding: 5px 7px;
  background: rgba(255, 255, 255, .03);
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.22;
  cursor: text;
  caret-color: currentColor;
}

.annotation.text.added-text,
.annotation.text.added-text:focus {
  min-height: 34px;
  overflow: visible;
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  caret-color: #0f172a;
  caret-shape: bar;
}

.annotation.text.added-text * {
  user-select: text !important;
  -webkit-user-select: text !important;
}

.annotation.text.added-text:focus {
  outline: 3px solid rgba(22, 163, 74, .38);
  box-shadow: 0 0 0 1px rgba(22, 163, 74, .6), 0 8px 20px rgba(15, 23, 42, .14);
}

.annotation.text.source-text {
  /* Background is set per-item inline (renderAnnotations) to match the sampled
     page color, so editable text on a dark sidebar no longer shows white strips. */
  background: transparent;
}

.annotation.text:focus,
.annotation.signature:focus {
  outline: 2px solid rgba(15, 118, 110, .45);
}

/* Added (non-source) text gets a faint light backing on focus for legibility;
   source text keeps its inline page-matched background instead. */
.annotation.text.added-text:focus,
.annotation.signature:focus {
  background: rgba(255, 255, 255, .68);
}

.annotation.signature {
  font-family: "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 28px;
}

.annotation.highlight,
.annotation.whiteout,
.annotation.box,
.annotation.image,
.annotation.stamp,
.annotation.circle,
.annotation.note,
.annotation.callout {
  width: 180px;
  height: 42px;
}

.annotation.box {
  background: transparent;
}

.annotation.line,
.annotation.arrow,
.annotation.underline {
  min-height: 10px;
}

.annotation.line svg,
.annotation.arrow svg,
.annotation.underline svg,
.annotation.circle svg,
.annotation.callout svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.annotation.arrow {
  overflow: visible;
}

.annotation.arrow .arrow-visual {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(18px, calc(var(--arrow-width, 3px) * 7));
  transform: translateY(-50%);
  pointer-events: none;
}

.annotation.arrow .arrow-visual span {
  position: absolute;
  left: 4px;
  right: max(18px, calc(var(--arrow-width, 3px) * 6));
  top: 50%;
  height: var(--arrow-width, 3px);
  border-radius: 999px;
  background: var(--arrow-color, #dc2626);
  transform: translateY(-50%);
}

.annotation.arrow .arrow-visual.line-dashed span {
  background: repeating-linear-gradient(90deg, var(--arrow-color, #dc2626) 0 14px, transparent 14px 22px);
}

.annotation.arrow .arrow-visual.line-dotted span {
  background: repeating-linear-gradient(90deg, var(--arrow-color, #dc2626) 0 max(2px, var(--arrow-width, 3px)), transparent max(2px, var(--arrow-width, 3px)) max(9px, calc(var(--arrow-width, 3px) * 4)));
}

.annotation.arrow .arrow-visual.line-double span {
  height: calc(var(--arrow-width, 3px) * 3);
  background:
    linear-gradient(var(--arrow-color, #dc2626), var(--arrow-color, #dc2626)) left 0 / 100% var(--arrow-width, 3px) no-repeat,
    linear-gradient(var(--arrow-color, #dc2626), var(--arrow-color, #dc2626)) left 100% / 100% var(--arrow-width, 3px) no-repeat;
}

.annotation.arrow .arrow-visual i {
  position: absolute;
  right: 2px;
  top: 50%;
  width: max(18px, calc(var(--arrow-width, 3px) * 6));
  aspect-ratio: 1 / 1;
  background: var(--arrow-color, #dc2626);
  clip-path: polygon(0 12%, 100% 50%, 0 88%, 24% 50%);
  transform: translateY(-50%);
}

.annotation.arrow .arrow-visual.arrow-open i {
  background: transparent;
  border-top: var(--arrow-width, 3px) solid var(--arrow-color, #dc2626);
  border-right: var(--arrow-width, 3px) solid var(--arrow-color, #dc2626);
  clip-path: none;
  transform: translateY(-50%) rotate(45deg);
}

.annotation.arrow .arrow-visual.arrow-dot i {
  border-radius: 50%;
  clip-path: none;
}

.annotation.arrow .arrow-visual.arrow-diamond i {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.annotation.note,
.annotation.callout {
  display: block;
  padding: 10px 12px;
  border: 2px solid #ca8a04;
  background: #fff7cc;
  color: #3f2f05;
  font-weight: 750;
  line-height: 1.25;
  white-space: pre-wrap;
  overflow: hidden;
  cursor: text;
}

.annotation.callout {
  border-color: #2563eb;
  background: #eff6ff;
  color: #172554;
}

.annotation.check {
  display: grid;
  place-items: center;
  color: #15803d;
  font-weight: 900;
}

.annotation.stamp {
  display: grid;
  place-items: center;
  border: 3px solid #b91c1c;
  color: #b91c1c;
  font-weight: 900;
  letter-spacing: 0;
  transform: rotate(-8deg);
}

.annotation.image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.annotation.draw svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.resize-handle {
  position: absolute;
  display: none;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border: 2px solid #2563eb;
  border-radius: 3px;
  background: #fff;
  cursor: nwse-resize;
  z-index: 4;
}

/* v234: left + right edge handles — drag to change width independently. */
.resize-handle.resize-handle-left {
  left: -6px;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 10px;
  height: 24px;
  border-radius: 6px;
  cursor: ew-resize;
}
.resize-handle.resize-handle-right {
  right: -6px;
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 10px;
  height: 24px;
  border-radius: 6px;
  cursor: ew-resize;
}

.annotation.is-selected .resize-handle {
  display: block;
}

.rotate-handle {
  position: absolute;
  display: none;
  top: -24px;
  right: -10px;
  width: 18px;
  height: 18px;
  border: 2px solid #2563eb;
  border-radius: 999px;
  background: #ffffff;
  cursor: grab;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .18);
}

.rotate-handle::before {
  content: "↻";
  position: absolute;
  inset: -3px 0 0;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}

.annotation.is-selected .rotate-handle {
  display: block;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .page-sidebar {
    grid-row: 3;
    grid-template-rows: auto auto auto;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .page-thumbs {
    grid-auto-flow: column;
    grid-auto-columns: 120px;
    overflow-x: auto;
  }

  .statusbar {
    flex-direction: column;
    gap: 4px;
  }
}

/* v179-final: font menu, no opacity control, and visible app dropdown menus. */
body.simple-ui #fontFamily,
#fontFamily {
  min-height: 32px !important;
  height: 32px !important;
  min-width: 92px !important;
  max-width: 120px !important;
  padding: 0 8px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-weight: 850 !important;
}

body.simple-ui .object-opacity-control,
.object-opacity-control {
  display: none !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  overflow: visible !important;
  flex-wrap: wrap !important;
  z-index: 90000 !important;
}

body.simple-ui .file-menu,
.file-menu {
  z-index: 91000 !important;
}

body.simple-ui .file-menu[open],
.file-menu[open] {
  z-index: 92000 !important;
}

body.simple-ui .file-menu-popover,
.file-menu-popover {
  z-index: 93000 !important;
}

/* v180-final: context sections may wrap into multiple rows instead of overlapping. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) minmax(210px, 320px) !important;
  grid-template-rows: auto auto auto auto !important;
  grid-auto-rows: max-content !important;
  gap: 10px 10px !important;
  align-items: start !important;
  overflow: visible !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
  overflow: visible !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  z-index: 80 !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
.text-tools,
.object-tools {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  z-index: 70 !important;
}

body.simple-ui .compact-pages,
.compact-pages {
  grid-column: 1 / 3 !important;
  grid-row: 4 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  overflow: visible !important;
  z-index: 65 !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 3 !important;
  grid-row: 4 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 210px !important;
  max-width: 100% !important;
  overflow: visible !important;
  z-index: 60 !important;
}

body.simple-ui .find-tools input[type="search"],
.find-tools input[type="search"] {
  flex: 1 1 110px !important;
  min-width: 88px !important;
}

@media (max-width: 1100px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 2 !important;
  }

  body.simple-ui .compact-pages,
  .compact-pages {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  body.simple-ui .find-tools,
  .find-tools {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  .text-tools,
  .object-tools {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  body.simple-ui .compact-pages,
  .compact-pages {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }

body.simple-ui .find-tools,
.find-tools {
  grid-column: 1 / -1 !important;
  grid-row: 6 !important;
}
}

/* v181-bottom: undo/redo icons, text menu controls, and clear object color control. */
body.simple-ui .utility-tool,
.utility-tool {
  background: #f8fafc !important;
  color: #1d4ed8 !important;
  border-color: #c9d7ef !important;
}

body.simple-ui .utility-tool:disabled,
.utility-tool:disabled {
  color: #94a3b8 !important;
  background: #f1f5f9 !important;
}

body.simple-ui #textCase,
body.simple-ui #lineHeight,
body.simple-ui #fontFamily,
#textCase,
#lineHeight,
#fontFamily {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-weight: 850 !important;
}

body.simple-ui #textCase,
#textCase {
  min-width: 82px !important;
}

body.simple-ui #lineHeight,
#lineHeight {
  min-width: 92px !important;
}

body.simple-ui .object-tools label[title="Object color"],
.object-tools label[title="Object color"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-weight: 850 !important;
}

body.simple-ui #objectColor,
#objectColor {
  width: 30px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* v182-final: animated border on the demo Buy button. */
body.demo-shell .demo-buy-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  box-shadow: 0 12px 30px rgba(17, 103, 232, .26), 0 0 0 1px rgba(17, 103, 232, .14) !important;
}

body.demo-shell .demo-buy-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: -2 !important;
  border-radius: inherit !important;
  background: conic-gradient(from var(--buy-ring-angle, 0deg), #93c5fd, #ffffff, #22c55e, #1167e8, #93c5fd) !important;
  animation: buyRingSpin 2.8s linear infinite !important;
}

body.demo-shell .demo-buy-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: -1 !important;
  border-radius: calc(999px - 2px) !important;
  background: linear-gradient(180deg, #1d7cff, #0b55d4) !important;
}

body.demo-shell .demo-buy-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 40px rgba(17, 103, 232, .34), 0 0 0 1px rgba(17, 103, 232, .2) !important;
}

@property --buy-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes buyRingSpin {
  to {
    --buy-ring-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.demo-shell .demo-buy-button::before {
    animation: none !important;
  }
}

/* v183-final: compact icon text context controls and wider font menu. */
body.simple-ui #fontFamily,
#fontFamily {
  min-width: 154px !important;
  max-width: 190px !important;
}

body.simple-ui #textCase,
body.simple-ui #lineHeight,
#textCase,
#lineHeight {
  min-width: 104px !important;
}

body.simple-ui .text-tools .format-icon,
.text-tools .format-icon {
  display: inline-grid !important;
  grid-template-rows: 18px 12px !important;
  place-items: center !important;
  gap: 1px !important;
  min-width: 56px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 3px 8px !important;
  line-height: 1 !important;
}

body.simple-ui .text-tools .format-icon b,
.text-tools .format-icon b {
  display: block !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

body.simple-ui .text-tools .format-icon small,
.text-tools .format-icon small {
  display: block !important;
  overflow: hidden !important;
  max-width: 50px !important;
  color: inherit !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.simple-ui .text-tools select,
.text-tools select {
  cursor: pointer !important;
}

/* v184: combine rows 2-4 into one responsive control band. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

body.simple-ui .control-band,
.control-band {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  min-width: 0 !important;
  z-index: 70 !important;
}

body.simple-ui .control-band > .toolbar-group,
.control-band > .toolbar-group {
  grid-column: auto !important;
  grid-row: auto !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.simple-ui .control-band > .tool-palette,
.control-band > .tool-palette {
  flex: 1 1 680px !important;
  order: 1 !important;
}

body.simple-ui .control-band > .text-tools,
body.simple-ui .control-band > .object-tools,
.control-band > .text-tools,
.control-band > .object-tools {
  flex: 1 1 520px !important;
  order: 2 !important;
}

body.simple-ui .control-band > .compact-pages,
.control-band > .compact-pages {
  flex: 0 1 360px !important;
  order: 3 !important;
}

body.simple-ui .control-band > .find-tools,
.control-band > .find-tools {
  flex: 1 1 260px !important;
  order: 4 !important;
  min-width: 220px !important;
}

@media (min-width: 1280px) {
  body.simple-ui .control-band > .tool-palette,
  .control-band > .tool-palette {
    flex-basis: 100% !important;
  }

  body.simple-ui .control-band > .text-tools,
  body.simple-ui .control-band > .object-tools,
  .control-band > .text-tools,
  .control-band > .object-tools {
    flex: 2 1 600px !important;
  }
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand,
  body.simple-ui .menu-bar,
  .menu-bar,
  body.simple-ui .control-band,
  .control-band {
    grid-column: 1 / -1 !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-row: 2 !important;
  }

  body.simple-ui .control-band,
  .control-band {
    grid-row: 3 !important;
  }

  body.simple-ui .control-band > .toolbar-group,
  .control-band > .toolbar-group {
    flex-basis: 100% !important;
  }
}

/* v185-bottom: context-only submenus, font previews, compact tool icons. */
body.simple-ui .control-band > .text-tools,
body.simple-ui .control-band > .object-tools,
.control-band > .text-tools,
.control-band > .object-tools {
  display: none !important;
}

body[data-context="text"].simple-ui .control-band > .text-tools,
body[data-context="paragraph"].simple-ui .control-band > .text-tools,
body[data-context="note"].simple-ui .control-band > .text-tools,
body[data-context="callout"].simple-ui .control-band > .text-tools,
body[data-context="signature"].simple-ui .control-band > .text-tools,
body[data-context="text"] .control-band > .text-tools,
body[data-context="paragraph"] .control-band > .text-tools,
body[data-context="note"] .control-band > .text-tools,
body[data-context="callout"] .control-band > .text-tools,
body[data-context="signature"] .control-band > .text-tools,
body[data-context="object"].simple-ui .control-band > .object-tools,
body[data-context="object"] .control-band > .object-tools {
  display: flex !important;
}

body[data-context="compact"].simple-ui #contextPanel,
body[data-context="compact"] #contextPanel {
  display: none !important;
}

body:not([data-context="compact"]).simple-ui #contextPanel,
body:not([data-context="compact"]) #contextPanel {
  display: flex !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  gap: 4px !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool {
  min-width: 48px !important;
  width: 52px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 4px 5px !important;
  border-radius: 10px !important;
}

body.simple-ui .tool-palette .tool b,
.tool-palette .tool b {
  font-size: 18px !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette .tool small,
.tool-palette .tool small {
  max-width: 44px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 1 1 230px !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 360px !important;
}

body.simple-ui .font-preview,
.font-preview {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 132px !important;
  max-width: 180px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

#fontFamily option[value="inter"] { font-family: Inter, "SF Pro Text", system-ui, sans-serif; }
#fontFamily option[value="roboto"] { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
#fontFamily option[value="openSans"] { font-family: "Open Sans", Verdana, Arial, sans-serif; }
#fontFamily option[value="lato"] { font-family: Lato, "Avenir Next", Avenir, Calibri, Arial, sans-serif; }
#fontFamily option[value="montserrat"] { font-family: Montserrat, Futura, "Gill Sans", Avenir, Arial, sans-serif; font-weight: 800; }
#fontFamily option[value="poppins"] { font-family: Poppins, "Trebuchet MS", Arial, sans-serif; font-weight: 800; }
#fontFamily option[value="sourceSans"] { font-family: "Source Sans 3", "Lucida Grande", Arial, sans-serif; }
#fontFamily option[value="sans"] { font-family: Helvetica, Arial, sans-serif; }
#fontFamily option[value="merriweather"] { font-family: Merriweather, Georgia, serif; font-weight: 800; }
#fontFamily option[value="lora"] { font-family: Lora, Baskerville, Georgia, serif; }
#fontFamily option[value="playfair"] { font-family: "Playfair Display", Didot, "Bodoni 72", Georgia, serif; font-weight: 800; }
#fontFamily option[value="serif"] { font-family: Georgia, "Times New Roman", serif; }
#fontFamily option[value="robotoMono"] { font-family: "Roboto Mono", "SF Mono", "Courier New", monospace; }
#fontFamily option[value="mono"] { font-family: "Courier New", monospace; }
#fontFamily option[value="cursive"] { font-family: "Brush Script MT", "Snell Roundhand", cursive; }

@media (max-width: 760px) {
  body.simple-ui .tool-palette .tool,
  .tool-palette .tool {
    flex: 1 1 48px !important;
  }

  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex-basis: 100% !important;
    max-width: none !important;
  }
}

/* v185-bottom: context-only submenus, font previews, compact tool icons. */
body.simple-ui .control-band > .text-tools,
body.simple-ui .control-band > .object-tools,
.control-band > .text-tools,
.control-band > .object-tools {
  display: none !important;
}

body[data-context="text"].simple-ui .control-band > .text-tools,
body[data-context="paragraph"].simple-ui .control-band > .text-tools,
body[data-context="note"].simple-ui .control-band > .text-tools,
body[data-context="callout"].simple-ui .control-band > .text-tools,
body[data-context="signature"].simple-ui .control-band > .text-tools,
body[data-context="text"] .control-band > .text-tools,
body[data-context="paragraph"] .control-band > .text-tools,
body[data-context="note"] .control-band > .text-tools,
body[data-context="callout"] .control-band > .text-tools,
body[data-context="signature"] .control-band > .text-tools,
body[data-context="object"].simple-ui .control-band > .object-tools,
body[data-context="object"] .control-band > .object-tools {
  display: flex !important;
}

body[data-context="compact"].simple-ui #contextPanel,
body[data-context="compact"] #contextPanel {
  display: none !important;
}

body:not([data-context="compact"]).simple-ui #contextPanel,
body:not([data-context="compact"]) #contextPanel {
  display: flex !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  gap: 4px !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool {
  min-width: 48px !important;
  width: 52px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 4px 5px !important;
  border-radius: 10px !important;
}

body.simple-ui .tool-palette .tool b,
.tool-palette .tool b {
  font-size: 18px !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette .tool small,
.tool-palette .tool small {
  max-width: 44px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 1 1 230px !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 360px !important;
}

body.simple-ui .font-preview,
.font-preview {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 132px !important;
  max-width: 180px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

#fontFamily option[value="inter"] { font-family: Inter, system-ui, sans-serif; }
#fontFamily option[value="roboto"] { font-family: Roboto, Arial, sans-serif; }
#fontFamily option[value="openSans"] { font-family: "Open Sans", Arial, sans-serif; }
#fontFamily option[value="lato"] { font-family: Lato, Calibri, Arial, sans-serif; }
#fontFamily option[value="montserrat"] { font-family: Montserrat, Avenir, Arial, sans-serif; font-weight: 800; }
#fontFamily option[value="poppins"] { font-family: Poppins, Arial, sans-serif; font-weight: 800; }
#fontFamily option[value="sourceSans"] { font-family: "Source Sans 3", Arial, sans-serif; }
#fontFamily option[value="sans"] { font-family: Helvetica, Arial, sans-serif; }
#fontFamily option[value="merriweather"] { font-family: Merriweather, Georgia, serif; font-weight: 800; }
#fontFamily option[value="lora"] { font-family: Lora, Georgia, serif; }
#fontFamily option[value="playfair"] { font-family: "Playfair Display", Georgia, serif; font-weight: 800; }
#fontFamily option[value="serif"] { font-family: Georgia, "Times New Roman", serif; }
#fontFamily option[value="robotoMono"] { font-family: "Roboto Mono", "Courier New", monospace; }
#fontFamily option[value="mono"] { font-family: "Courier New", monospace; }
#fontFamily option[value="cursive"] { font-family: "Brush Script MT", "Snell Roundhand", cursive; }

@media (max-width: 760px) {
  body.simple-ui .tool-palette .tool,
  .tool-palette .tool {
    flex: 1 1 48px !important;
  }

  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex-basis: 100% !important;
    max-width: none !important;
  }
}

/* v183-final: compact icon text context controls and wider font menu. */
body.simple-ui #fontFamily,
#fontFamily {
  min-width: 154px !important;
  max-width: 190px !important;
}

body.simple-ui #textCase,
body.simple-ui #lineHeight,
#textCase,
#lineHeight {
  min-width: 104px !important;
}

body.simple-ui .text-tools .format-icon,
.text-tools .format-icon {
  display: inline-grid !important;
  grid-template-rows: 18px 12px !important;
  place-items: center !important;
  gap: 1px !important;
  min-width: 56px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 3px 8px !important;
  line-height: 1 !important;
}

body.simple-ui .text-tools .format-icon b,
.text-tools .format-icon b {
  display: block !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

body.simple-ui .text-tools .format-icon small,
.text-tools .format-icon small {
  display: block !important;
  overflow: hidden !important;
  max-width: 50px !important;
  color: inherit !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.simple-ui .text-tools select,
.text-tools select {
  cursor: pointer !important;
}

/* v182: animated border on the demo Buy button. */
body.demo-shell .demo-buy-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  box-shadow: 0 12px 30px rgba(17, 103, 232, .26), 0 0 0 1px rgba(17, 103, 232, .14) !important;
}

body.demo-shell .demo-buy-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: -2 !important;
  border-radius: inherit !important;
  background: conic-gradient(from var(--buy-ring-angle, 0deg), #93c5fd, #ffffff, #22c55e, #1167e8, #93c5fd) !important;
  animation: buyRingSpin 2.8s linear infinite !important;
}

body.demo-shell .demo-buy-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: -1 !important;
  border-radius: calc(999px - 2px) !important;
  background: linear-gradient(180deg, #1d7cff, #0b55d4) !important;
}

body.demo-shell .demo-buy-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 40px rgba(17, 103, 232, .34), 0 0 0 1px rgba(17, 103, 232, .2) !important;
}

@property --buy-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes buyRingSpin {
  to {
    --buy-ring-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.demo-shell .demo-buy-button::before {
    animation: none !important;
  }
}

/* v31: standard menu + compact editor chrome. */
body.simple-ui .app-shell {
  grid-template-columns: 214px minmax(0, 1fr) 238px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

body.simple-ui .app-topbar {
  grid-template-columns: 138px 380px minmax(260px, 1fr) 242px !important;
  grid-template-rows: 28px 34px !important;
  gap: 4px 8px !important;
  padding: 5px 8px !important;
}

body.simple-ui .brand {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
}

body.simple-ui .brand-mark {
  width: 30px !important;
  height: 30px !important;
}

body.simple-ui .brand h1 {
  font-size: 15px !important;
}

body.simple-ui .menu-bar {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.simple-ui .file-menu summary {
  min-height: 30px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.simple-ui .file-menu summary:hover,
body.simple-ui .file-menu[open] summary {
  background: #eef4ff !important;
  color: #1d4ed8 !important;
}

body.simple-ui .mode-tabs {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  min-height: 32px !important;
  padding: 2px !important;
}

body.simple-ui .mode-tab {
  min-height: 28px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
}

body.simple-ui .tool-palette {
  grid-column: 4 !important;
  grid-row: 2 !important;
  min-height: 32px !important;
  padding: 2px !important;
}

body.simple-ui .tool {
  min-width: 34px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

body.simple-ui .zoom-tools {
  grid-column: 4 !important;
  grid-row: 1 !important;
  min-height: 32px !important;
  padding: 2px 5px !important;
}

body.simple-ui .zoom-tools button {
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

body.simple-ui .zoom-tools input {
  width: 68px !important;
}

body.simple-ui .compact-pages {
  display: none !important;
}

body.simple-ui .compact-pages button {
  min-height: 28px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
}

body.simple-ui .text-tools {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  min-height: 34px !important;
  padding: 2px 5px !important;
}

body.simple-ui .app-topbar .menu-bar + .mode-tabs {
  padding-left: 4px !important;
}

body.simple-ui .menu-bar {
  max-width: 360px;
}

body.simple-ui .file-menu summary {
  min-height: 26px !important;
}

body.simple-ui .tool-palette {
  justify-self: end;
  width: max-content;
  max-width: 260px;
  overflow: hidden !important;
}

body.simple-ui .mode-tabs {
  padding-left: 2px !important;
}

body.simple-ui .text-tools input[type="text"],
body.simple-ui .text-tools input[type="number"],
body.simple-ui .text-tools input[type="color"],
body.simple-ui .text-tools button {
  height: 28px !important;
  min-height: 28px !important;
  font-size: 12px !important;
}

body.simple-ui .context-panel,
body.simple-ui .product-strip,
body.simple-ui .statusbar {
  display: none !important;
}

body.simple-ui .page-sidebar {
  grid-row: 2 !important;
  padding: 6px !important;
  gap: 6px !important;
}

body.simple-ui .page-sidebar-head {
  grid-template-columns: 1fr;
  gap: 1px !important;
}

body.simple-ui .page-nav,
body.simple-ui .page-tools {
  padding: 5px !important;
  gap: 5px !important;
  border-radius: 10px !important;
}

body.simple-ui .page-nav {
  grid-template-columns: 34px 1fr 34px 34px !important;
}

body.simple-ui .page-nav button,
body.simple-ui .page-tools button {
  min-height: 30px !important;
  height: 30px !important;
}

body.simple-ui .page-thumb {
  min-height: 104px !important;
  padding: 5px !important;
}

body.simple-ui .workspace {
  grid-row: 2 !important;
}

body.simple-ui .canvas-wrap {
  padding: 10px !important;
}

body.simple-ui .inspector-panel {
  grid-row: 2 !important;
  padding: 6px !important;
  gap: 6px !important;
}

body.simple-ui .task-card {
  padding: 8px !important;
  gap: 5px !important;
}

body.simple-ui .task-card h2 {
  font-size: 15px !important;
}

body.simple-ui .task-card p {
  display: none !important;
}

body.simple-ui .task-kicker {
  display: none !important;
}

body.simple-ui .task-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 8px !important;
}

body.simple-ui .task-list .quick-action,
body.simple-ui .task-card .quick-action {
  min-height: 34px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  gap: 6px !important;
}

body.simple-ui .quick-action::before {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
}

body.simple-ui .task-list .quick-action.primary-action {
  grid-column: 1 / -1;
}

body.simple-ui .empty-state {
  max-width: 580px !important;
  padding: 26px !important;
}

body.simple-ui .empty-state h2 {
  font-size: 30px !important;
}

body.simple-ui .empty-state p {
  font-size: 15px !important;
}

body.simple-ui .onboarding-steps {
  font-size: 14px !important;
  padding: 14px 18px !important;
}

body.simple-ui .onboarding-actions button,
body.simple-ui .onboarding-actions .toolbar-file {
  min-height: 42px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
}

/* v30: professional final skin, compact and polished. */
:root {
  --pro-bg: #eef2f7;
  --pro-panel: #ffffff;
  --pro-panel-soft: #f8fafc;
  --pro-line: #d9e1ec;
  --pro-ink: #111827;
  --pro-muted: #64748b;
  --pro-blue: #2563eb;
  --pro-blue-dark: #1d4ed8;
  --pro-blue-soft: #eff6ff;
  --pro-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}

html body.simple-ui {
  color: var(--pro-ink);
  background: var(--pro-bg);
  letter-spacing: 0;
}

body.simple-ui .app-shell {
  background: var(--pro-bg);
}

body.simple-ui .app-topbar,
body.simple-ui .context-panel,
body.simple-ui .statusbar {
  background: rgba(255, 255, 255, .96) !important;
  border-color: var(--pro-line) !important;
  color: var(--pro-muted) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
  backdrop-filter: blur(14px);
}

body.simple-ui .brand {
  gap: 8px;
}

body.simple-ui .brand-mark {
  background: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}

body.simple-ui .brand h1 {
  color: var(--pro-ink) !important;
  font-weight: 900;
}

body.simple-ui .mode-tabs,
body.simple-ui .tool-palette,
body.simple-ui .zoom-tools,
body.simple-ui .text-tools,
body.simple-ui .compact-pages {
  background: var(--pro-panel-soft) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

body.simple-ui .mode-tab {
  color: #475569 !important;
  border-radius: 9px !important;
  font-weight: 850;
}

body.simple-ui .mode-tab.is-active {
  background: var(--pro-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22) !important;
}

body.simple-ui button,
body.simple-ui .toolbar-file,
body.simple-ui .tool,
body.simple-ui .context-chip,
body.simple-ui .quick-action {
  border-color: var(--pro-line) !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

body.simple-ui button:hover,
body.simple-ui .toolbar-file:hover,
body.simple-ui .tool:hover,
body.simple-ui .context-chip:hover,
body.simple-ui .quick-action:hover {
  border-color: #b9c8dc !important;
  background: #f8fbff !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .08);
}

body.simple-ui .tool.is-active,
body.simple-ui .toolbar-group button.is-active {
  border-color: #93b4ff !important;
  background: var(--pro-blue-soft) !important;
  color: var(--pro-blue-dark) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .14);
}

body.simple-ui .quick-action.primary-action,
body.simple-ui .onboarding-actions .primary {
  border-color: var(--pro-blue) !important;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .24);
}

body.simple-ui .page-sidebar,
body.simple-ui .inspector-panel {
  background: #f5f7fb !important;
  border-color: var(--pro-line) !important;
}

body.simple-ui .page-nav,
body.simple-ui .page-tools,
body.simple-ui .page-thumb,
body.simple-ui .task-card,
body.simple-ui .task-list,
body.simple-ui .trust-panel,
body.simple-ui .empty-state,
body.simple-ui .onboarding-steps {
  background: var(--pro-panel) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

body.simple-ui .page-thumb.is-active {
  border-color: var(--pro-blue) !important;
  background: var(--pro-blue-soft) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

body.simple-ui .workspace {
  background: var(--pro-bg) !important;
}

body.simple-ui .canvas-wrap {
  background:
    linear-gradient(90deg, rgba(148, 163, 184, .22) 1px, transparent 1px),
    linear-gradient(180deg, #f3f6fb 0%, #e8edf5 100%) !important;
  background-size: 28px 28px, auto !important;
}

body.simple-ui .page-stage {
  box-shadow: 0 24px 70px rgba(15, 23, 42, .18), 0 2px 10px rgba(15, 23, 42, .10) !important;
}

body.simple-ui .empty-state {
  box-shadow: var(--pro-shadow) !important;
}

body.simple-ui .empty-state h2,
body.simple-ui .task-card h2,
body.simple-ui .page-sidebar-head strong,
body.simple-ui .context-panel strong {
  color: var(--pro-ink) !important;
}

body.simple-ui .empty-state p,
body.simple-ui .task-card p,
body.simple-ui .statusbar,
body.simple-ui .page-sidebar-head span,
body.simple-ui .context-panel span {
  color: var(--pro-muted) !important;
}

body.simple-ui .task-kicker {
  background: var(--pro-blue-soft) !important;
  color: var(--pro-blue-dark) !important;
  border-radius: 999px;
}

body.simple-ui .text-tools input[type="text"],
body.simple-ui .text-tools input[type="number"],
body.simple-ui .text-tools input[type="color"] {
  border-color: var(--pro-line) !important;
  background: #ffffff !important;
  color: var(--pro-ink) !important;
  border-radius: 9px !important;
}

body.simple-ui .annotation.text.source-text {
  border-color: rgba(37, 99, 235, .35) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.96), 0 8px 22px rgba(37, 99, 235, .12) !important;
}

body.simple-ui .annotation.text.source-text:focus {
  outline: 3px solid rgba(37, 99, 235, .18) !important;
}

/* v29: short editing header. Keep the PDF visible. */
body.simple-ui .app-shell {
  grid-template-rows: auto auto minmax(0, 1fr);
}

body.simple-ui .app-topbar {
  display: grid !important;
  grid-template-columns: 150px minmax(420px, 1fr) 260px !important;
  grid-template-rows: 42px 42px auto !important;
  gap: 5px 8px !important;
  padding: 6px 8px !important;
  align-items: center;
}

body.simple-ui .brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 13px;
}

body.simple-ui .brand h1 {
  font-size: 16px;
}

body.simple-ui .brand p {
  display: none;
}

body.simple-ui .mode-tabs {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 38px;
  padding: 3px !important;
}

body.simple-ui .mode-tab {
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}

body.simple-ui .zoom-tools {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-height: 38px !important;
  padding: 4px 7px !important;
}

body.simple-ui .zoom-tools .group-label,
body.simple-ui .zoom-tools span {
  display: none;
}

body.simple-ui .zoom-tools button {
  min-height: 32px;
  padding: 0 10px;
}

body.simple-ui .zoom-tools input {
  width: 88px;
}

body.simple-ui .tool-palette {
  grid-column: 1 / 3 !important;
  grid-row: 2 !important;
  min-height: 38px !important;
  padding: 3px !important;
}

body.simple-ui .tool {
  min-width: 38px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 9px !important;
  font-size: 13px !important;
}

body.simple-ui .text-tools {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  min-height: 38px !important;
  padding: 3px 6px !important;
}

body.simple-ui .text-tools input[type="text"] {
  height: 32px;
  min-height: 32px;
  width: 180px;
}

body.simple-ui .text-tools input[type="number"] {
  height: 32px;
  min-height: 32px;
  width: 58px;
}

body.simple-ui .text-tools input[type="color"] {
  width: 34px;
  height: 32px;
}

body.simple-ui .text-tools button {
  min-height: 32px;
  height: 32px;
  padding: 0 9px;
}

body.simple-ui .compact-pages {
  grid-column: 3 !important;
  grid-row: 2 !important;
  display: flex !important;
  min-height: 38px !important;
  padding: 3px !important;
}

body.simple-ui .compact-pages button {
  min-height: 32px;
}

body.simple-ui .context-panel {
  min-height: 36px !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  gap: 8px !important;
}

body.simple-ui .context-chip {
  min-height: 28px !important;
  padding: 0 10px !important;
}

body.simple-ui .statusbar {
  min-height: 32px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
}

body.simple-ui .canvas-wrap {
  padding: 14px !important;
}

@media (max-width: 1100px) {
  body.simple-ui .app-topbar {
    grid-template-columns: 140px minmax(0, 1fr) !important;
  }

  body.simple-ui .zoom-tools {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools {
    grid-row: 4 !important;
  }
}

/* v23: PDF text edits should grow sideways like a normal title/line edit. */
.annotation.text.source-text,
body .annotation.text.source-text {
  white-space: pre !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  min-width: max-content;
}

.annotation.text.source-text:focus,
body .annotation.text.source-text:focus {
  white-space: pre !important;
}

.annotation.is-selected,
body .annotation.is-selected,
.annotation.text.source-text.is-selected,
body .annotation.text.source-text.is-selected {
  z-index: 50 !important;
}

.annotation.text,
body .annotation.text,
.annotation.signature,
body .annotation.signature,
.annotation.note,
body .annotation.note,
.annotation.callout,
body .annotation.callout {
  box-sizing: border-box;
  overflow: visible !important;
}

.annotation.note,
body .annotation.note,
.annotation.callout,
body .annotation.callout {
  white-space: pre-wrap !important;
}

/* Final v19 cascade lock: keep the document-editor skin consistent. */
html body {
  color: #172033;
  background: #e9eef6;
}

body .app-shell {
  background: #e9eef6;
}

body .app-topbar,
body .statusbar,
body .context-panel {
  background: #ffffff;
  border-color: #cfd8e6;
  color: #5f6f86;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
}

body .brand h1,
body .brand p,
body .context-panel strong,
body .page-sidebar-head strong,
body .task-card h2,
body .empty-state h2 {
  color: #172033;
}

body .brand-mark {
  background: linear-gradient(135deg, #146ef5, #20b8a6);
  color: #ffffff;
  box-shadow: none;
}

body .menu-bar,
body .mode-tabs {
  background: transparent;
  border-color: #d7dee9;
}

body .file-menu summary,
body .mode-tab {
  color: #42526a;
  background: transparent;
}

body .mode-tab.is-active {
  color: #0f4fb8;
  background: #e8f1ff;
  border-bottom-color: #146ef5;
  box-shadow: none;
}

body .tool-palette,
body .text-tools,
body .zoom-tools,
body .compact-pages {
  background: #f8fafd;
  border-color: #d7dee9;
}

body button,
body .toolbar-file,
body .tool,
body .context-chip,
body .quick-action {
  border-color: #d3dbe8;
  background: #ffffff;
  color: #253044;
  box-shadow: none;
}

body button:hover,
body .toolbar-file:hover,
body .tool:hover,
body .quick-action:hover {
  border-color: #b8c4d8;
  background: #f4f7fb;
}

body .tool.is-active,
body .toolbar-group button.is-active {
  border-color: #146ef5;
  background: #e8f1ff;
  color: #0f4fb8;
  box-shadow: inset 0 0 0 1px rgba(20, 110, 245, .12);
}

body .quick-action.primary-action,
body .onboarding-actions .primary {
  border-color: #146ef5;
  background: #146ef5;
  color: #ffffff;
}

body .page-sidebar,
body .inspector-panel {
  background: #f6f8fc;
  border-color: #cfd8e6;
}

body .page-nav,
body .page-tools,
body .page-thumb,
body .task-card,
body .task-list,
body .trust-panel,
body .onboarding-steps,
body .empty-state {
  border-color: #d7dee9;
  background: #ffffff;
  color: #172033;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

body .page-thumb.is-active {
  border-color: #146ef5;
  background: #e8f1ff;
  box-shadow: 0 0 0 2px rgba(20, 110, 245, .08);
}

body .workspace {
  background: #e9eef6;
}

body .canvas-wrap {
  background:
    linear-gradient(90deg, rgba(207, 216, 230, .55) 1px, transparent 1px),
    linear-gradient(180deg, #eef3fa, #e5ebf4);
  background-size: 28px 28px, auto;
}

body .page-stage {
  box-shadow: 0 22px 60px rgba(29, 41, 57, .22), 0 2px 8px rgba(29, 41, 57, .12);
}

body .empty-state p,
body .onboarding-steps,
body .task-card p,
body .trust-panel p,
body .statusbar,
body .page-sidebar-head span,
body .copyright-note p {
  color: #5f6f86;
}

body .task-kicker {
  background: #e8f1ff;
  color: #0f4fb8;
}

body .trust-panel strong,
body .copyright-note strong {
  color: #8a5a00;
}

body .copyright-note,
body .ocr-notice {
  border-color: #ead39a;
  background: #fff8e6;
  color: #6b4a00;
}

body .annotation.text.source-text {
  z-index: 3;
  min-height: 20px;
  padding: 2px 5px;
  border: 1px dashed rgba(20, 110, 245, .32);
  border-radius: 3px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .96);
  cursor: text;
}

body .annotation.text.source-text:hover {
  border-color: #146ef5;
  background: #f8fbff;
}

body .annotation.text.source-text:focus {
  border-color: #146ef5;
  outline: 3px solid rgba(20, 110, 245, .22);
  background: #ffffff;
  box-shadow: 0 0 0 2px #ffffff, 0 6px 18px rgba(20, 110, 245, .16);
}

body .annotation.text.source-text::selection {
  background: rgba(20, 110, 245, .26);
}

/* v22 simple mode: fewer choices, bigger targets, plain language. */
body.simple-ui .app-shell,
body {
  font-size: 15px;
}

body .app-shell {
  grid-template-columns: 220px minmax(0, 1fr) 250px;
}

body .app-topbar {
  grid-template-columns: 160px minmax(0, 1fr) max-content;
  gap: 7px;
  padding: 8px;
}

body .menu-bar {
  display: none;
}

body .brand h1 {
  font-size: 18px;
}

body .brand p {
  max-width: 110px;
}

body .mode-tabs {
  grid-column: 2 / 3;
  grid-row: 1;
  border: 1px solid #d7dee9;
  border-radius: 12px;
  padding: 4px;
  background: #f8fafd;
}

body .mode-tab {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  padding: 0 13px;
  font-size: 14px;
}

body .mode-tab.is-active {
  background: #146ef5;
  color: #ffffff;
}

body .tool-palette {
  grid-column: 1 / 3;
  grid-row: 2;
  min-height: 50px;
  padding: 6px;
}

body .tool {
  width: auto;
  min-width: 46px;
  height: 38px;
  padding: 0 12px;
  font-size: 15px;
}

body[data-mode="edit"] .tool[data-tool="whiteout"],
body[data-mode="comment"] .tool[data-tool="box"],
body[data-mode="comment"] .tool[data-tool="circle"],
body[data-mode="comment"] .tool[data-tool="callout"],
body[data-mode="sign"] .tool[data-tool="check"] {
  display: none;
}

body .zoom-tools {
  grid-column: 3;
  grid-row: 1 / 3;
  min-height: 50px;
}

body .compact-pages {
  display: none;
}

body .text-tools {
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 46px;
}

body .context-panel {
  min-height: 46px;
  font-size: 14px;
}

body .context-panel span {
  font-weight: 650;
}

body .context-chip {
  min-height: 32px;
  padding: 0 12px;
}

body .inspector-panel {
  padding: 10px;
}

body .task-card,
body .task-list,
body .trust-panel {
  border-radius: 14px;
  padding: 12px;
}

body .task-list {
  gap: 8px;
}

body .task-card h2 {
  font-size: 20px;
}

body .task-card p,
body .trust-panel p {
  font-size: 14px;
}

body .quick-action {
  min-height: 48px;
  justify-content: start;
  border-radius: 11px;
  padding: 0 14px;
  font-size: 17px;
}

body .quick-action::before {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

body .page-sidebar {
  padding: 10px 8px;
  gap: 10px;
}

body .page-nav,
body .page-tools {
  padding: 7px;
  gap: 6px;
}

body .page-nav {
  grid-template-columns: 42px 1fr 42px 42px;
}

body .page-tools {
  grid-template-columns: repeat(5, 1fr);
}

body .page-thumb {
  min-height: 112px;
}

body .canvas-wrap {
  padding: 20px;
}

body .empty-state {
  max-width: 620px;
  padding: 34px;
}

body .empty-state h2 {
  font-size: 36px;
  line-height: 1.12;
}

body .empty-state p {
  font-size: 18px;
  line-height: 1.45;
}

body .onboarding-actions button,
body .onboarding-actions .toolbar-file {
  min-height: 52px;
  border-radius: 12px;
  padding: 0 18px;
  font-size: 17px;
}

body .onboarding-steps {
  font-size: 16px;
  line-height: 1.55;
}

body .trust-panel {
  display: none;
}

body .copyright-note {
  display: none;
}

/* v19 document-editor polish: light title bar, tabbed toolbar, grouped
   commands, and a calm paper workspace. */
:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #667085;
  --line: #d7dee9;
  --panel: #ffffff;
  --soft: #f3f6fb;
  --accent: #146ef5;
  --accent-soft: #e8f1ff;
  --accent-ink: #ffffff;
}

body {
  color: var(--ink);
  background: #e9eef6;
}

button,
.toolbar-file {
  border-color: #d3dbe8;
  background: #ffffff;
  color: #182235;
  box-shadow: none;
}

button:hover,
.toolbar-file:hover,
.menu-item:hover {
  border-color: #b8c4d8;
  background: #f4f7fb;
  box-shadow: none;
}

.app-shell {
  grid-template-columns: 232px minmax(0, 1fr) 286px;
  background: #e9eef6;
}

.app-topbar {
  grid-template-columns: 170px minmax(360px, 1fr) max-content;
  gap: 6px 10px;
  padding: 8px 10px 10px;
  background: #ffffff;
  border-bottom: 1px solid #cfd8e6;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
}

.brand-mark {
  background: linear-gradient(135deg, #146ef5, #20b8a6);
  color: #ffffff;
  box-shadow: none;
}

.brand h1,
.brand p {
  color: #172033;
}

.brand p {
  opacity: .72;
}

.menu-bar {
  border: 0;
  background: transparent;
  padding: 0;
}

.file-menu summary {
  color: #2b3548;
  background: transparent;
  border-radius: 6px;
}

.file-menu summary:hover,
.file-menu[open] summary {
  background: #edf3ff;
  color: #0f4fb8;
}

.file-menu-popover {
  border-color: #d7dee9;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .16);
}

.menu-item,
.menu-copy strong {
  color: #172033;
}

.mode-tabs {
  gap: 1px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #d7dee9;
  border-radius: 0;
  background: transparent;
}

.mode-tab {
  min-height: 34px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 0 13px;
  color: #42526a;
  background: transparent;
}

.mode-tab.is-active {
  background: transparent;
  border-bottom-color: #146ef5;
  color: #0f4fb8;
  box-shadow: none;
}

.tool-palette,
.text-tools,
.zoom-tools,
.compact-pages {
  align-self: stretch;
  min-height: 52px;
  padding: 7px 10px;
  border: 1px solid #d7dee9;
  border-radius: 10px;
  background: #f8fafd;
}

.tool {
  width: 38px;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  background: #ffffff;
  color: #253044;
}

.tool.is-active,
.toolbar-group button.is-active {
  border-color: #146ef5;
  background: #e8f1ff;
  color: #0f4fb8;
  box-shadow: inset 0 0 0 1px rgba(20, 110, 245, .12);
}

.group-label,
.zoom-tools span {
  color: #5f6f86;
}

.text-tools input[type="text"],
.text-tools input[type="number"],
.text-tools input[type="color"] {
  border-color: #cfd8e6;
  background: #ffffff;
  color: #172033;
}

.context-panel {
  min-height: 38px;
  padding: 7px 14px;
  background: #f8fafd;
  border-bottom: 1px solid #d7dee9;
  color: #5f6f86;
  box-shadow: none;
}

.context-panel strong {
  color: #172033;
}

.context-chip {
  border-color: #d3dbe8;
  background: #ffffff;
  color: #253044;
}

.context-chip:hover {
  border-color: #146ef5;
  background: #e8f1ff;
}

.page-sidebar,
.inspector-panel {
  background: #f6f8fc;
  border-color: #cfd8e6;
}

.page-nav,
.page-tools,
.page-thumb,
.task-card,
.task-list,
.trust-panel,
.onboarding-steps {
  border-color: #d7dee9;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.page-thumb.is-active {
  border-color: #146ef5;
  background: #e8f1ff;
  box-shadow: 0 0 0 2px rgba(20, 110, 245, .08);
}

.workspace {
  background: #e9eef6;
}

.statusbar {
  min-height: 36px;
  background: #ffffff;
  border-bottom: 1px solid #d7dee9;
  color: #5f6f86;
}

.product-strip {
  display: none;
}

.canvas-wrap {
  background:
    linear-gradient(90deg, rgba(207, 216, 230, .55) 1px, transparent 1px),
    linear-gradient(180deg, #eef3fa, #e5ebf4);
  background-size: 28px 28px, auto;
}

.page-stage {
  box-shadow: 0 22px 60px rgba(29, 41, 57, .22), 0 2px 8px rgba(29, 41, 57, .12);
}

.empty-state {
  background: #ffffff;
  border-color: #d7dee9;
  color: #172033;
  box-shadow: 0 22px 60px rgba(29, 41, 57, .12);
}

.empty-state h2 {
  color: #172033;
}

.empty-state p,
.onboarding-steps,
.task-card p,
.trust-panel p {
  color: #5f6f86;
}

.task-card h2 {
  color: #172033;
}

.task-kicker {
  background: #e8f1ff;
  color: #0f4fb8;
}

.quick-action.primary-action {
  border-color: #146ef5;
  background: #146ef5;
  color: #ffffff;
}

.quick-action {
  border-color: #d3dbe8;
  background: #ffffff;
  color: #253044;
}

.quick-action::before {
  background: #eef3fa;
}

.trust-panel strong {
  color: #8a5a00;
}

.copyright-note {
  border-color: #ead39a;
  background: #fff8e6;
  color: #6b4a00;
}

.copyright-note strong {
  color: #6b4a00;
}

.ocr-notice {
  border-bottom-color: #ead39a;
  background: #fff8e6;
  color: #6b4a00;
}

.annotation.text.source-text {
  background: rgba(255, 255, 255, .92);
  outline: 1px dashed rgba(20, 110, 245, .24);
}

/* Premium product polish */
:root {
  --ink: #111827;
  --muted: #667085;
  --line: #d9e0ea;
  --soft: #f3f6fa;
  --accent: #08756f;
  --accent-soft: #e4f5f2;
  --surface: rgba(255, 255, 255, .92);
}

body {
  background:
    linear-gradient(180deg, #f7f9fc 0%, #e9eef5 100%);
}

button,
.toolbar-file,
.menu-item,
.file-menu summary {
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

button:hover,
.toolbar-file:hover,
.menu-item:hover {
  border-color: #b8c3d2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

button:active,
.toolbar-file:active,
.menu-item:active {
  transform: translateY(1px);
}

.app-topbar {
  padding: 12px 14px;
  background: rgba(255, 255, 255, .96);
  border-bottom-color: #dfe5ee;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
}

.brand {
  min-width: 178px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, #111827, #244255);
  box-shadow: 0 8px 18px rgba(17, 24, 39, .18);
}

h1 {
  font-size: 20px;
  letter-spacing: 0;
}

.menu-bar {
  padding: 4px;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  background: #f8fafc;
}

.file-menu summary {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #233044;
  padding: 0 13px;
}

.file-menu[open] summary,
.file-menu summary:hover {
  background: #111827;
  color: #fff;
}

.file-menu-popover {
  top: 40px;
  border-radius: 12px;
  border-color: #dfe5ee;
  padding: 8px;
  box-shadow: 0 22px 60px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .08);
}

.toolbar-group {
  padding: 4px 10px 4px 0;
}

.tool,
.text-tools input,
.quick-action,
.page-nav,
.page-tools,
.page-thumb,
.copyright-note {
  border-radius: 10px;
}

.tool {
  min-width: 40px;
  min-height: 38px;
  background: #fff;
}

.tool.is-active,
.toolbar-group button.is-active {
  border-color: #7bc8bf;
  background: #e7f7f4;
  color: #075f5a;
  box-shadow: inset 0 0 0 1px rgba(8, 117, 111, .18);
}

.workflow-ribbon {
  padding: 12px 14px;
  background: rgba(248, 250, 252, .94);
  border-bottom-color: #dfe5ee;
}

.workflow-group {
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.quick-action {
  border-radius: 9px;
  padding: 0 14px;
  font-weight: 850;
}

.quick-action.primary-action {
  background: linear-gradient(180deg, #0d827b, #07645f);
  box-shadow: 0 8px 18px rgba(8, 117, 111, .2);
}

.page-sidebar {
  background: rgba(248, 250, 252, .88);
  border-right-color: #dfe5ee;
  padding: 14px 12px;
}

.page-nav,
.page-tools,
.copyright-note {
  border-color: #dfe5ee;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.page-thumb {
  border-color: #dfe5ee;
  min-height: 142px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.page-thumb.is-active {
  border-color: #61b9b0;
  background: #e9f7f5;
  box-shadow: 0 10px 22px rgba(8, 117, 111, .12);
}

.thumb-canvas {
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(16, 24, 40, .12);
}

.product-strip,
.statusbar {
  background: rgba(255, 255, 255, .82);
  border-bottom-color: #dfe5ee;
}

.canvas-wrap {
  padding: 34px;
  background:
    linear-gradient(180deg, rgba(245, 248, 252, .88), rgba(232, 238, 247, .88));
}

.page-stage {
  box-shadow: 0 28px 70px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .08);
}

.empty-state {
  min-height: 480px;
}

.empty-state h2 {
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: 0;
}

.empty-state p {
  max-width: 680px;
  margin: 12px auto 0;
  font-size: 16px;
}

.onboarding-actions .primary {
  min-height: 46px;
  border-radius: 10px;
  background: linear-gradient(180deg, #0d827b, #07645f);
  box-shadow: 0 10px 24px rgba(8, 117, 111, .22);
}

.onboarding-actions .toolbar-file {
  border-radius: 10px;
}

.onboarding-steps {
  margin-top: 4px;
  padding: 18px 22px 18px 42px;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.annotation.is-selected {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .16);
}

/* Dark pro interface */
:root {
  color-scheme: dark;
  --ink: #eef4ff;
  --muted: #9aa8bd;
  --line: #263244;
  --soft: #192233;
  --accent: #20c7b5;
  --accent-soft: rgba(32, 199, 181, .16);
  --accent-ink: #041314;
  --surface: rgba(18, 25, 38, .9);
  --warn: #f5c451;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(32, 199, 181, .14), transparent 34%),
    linear-gradient(180deg, #0a0f18 0%, #111827 45%, #0b111c 100%);
}

button,
.toolbar-file {
  border-color: #2c3a4f;
  background: #121a28;
  color: #edf5ff;
}

button:hover,
.toolbar-file:hover,
.menu-item:hover {
  border-color: #3e5069;
  background: #182235;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

button:disabled {
  opacity: .38;
}

.app-topbar {
  background: rgba(9, 14, 23, .96);
  border-bottom-color: #263244;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 14px 32px rgba(0, 0, 0, .24);
}

.brand-mark {
  background: linear-gradient(135deg, #20c7b5, #3b82f6);
  color: #021112;
  box-shadow: 0 12px 26px rgba(32, 199, 181, .22);
}

.brand p,
.statusbar,
.page-sidebar-head span,
.copyright-note p,
.product-strip,
.workflow-group span,
.group-label,
.zoom-tools span {
  color: var(--muted);
}

.menu-bar {
  border-color: #2c3a4f;
  background: rgba(18, 25, 38, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.file-menu summary {
  color: #dbe7f8;
}

.file-menu[open] summary,
.file-menu summary:hover {
  background: #1f2b3d;
  color: #ffffff;
}

.file-menu-popover {
  border-color: #2d3a4d;
  background: rgba(14, 20, 31, .98);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .46);
}

.menu-item {
  color: #edf5ff;
}

.menu-copy strong {
  color: #f8fbff;
}

.tool {
  border-color: #2d3a4d;
  background: #111a29;
  color: #e6eefb;
}

.tool.is-active,
.toolbar-group button.is-active {
  border-color: #20c7b5;
  background: rgba(32, 199, 181, .18);
  color: #bffdf4;
  box-shadow: 0 0 0 1px rgba(32, 199, 181, .22), 0 10px 24px rgba(32, 199, 181, .12);
}

.text-tools input[type="text"],
.text-tools input[type="number"],
.text-tools input[type="color"] {
  border-color: #2d3a4d;
  background: #0f1724;
  color: #edf5ff;
}

.workflow-ribbon {
  background: rgba(10, 15, 24, .88);
  border-bottom-color: #263244;
}

.workflow-group {
  border-color: #2a3648;
  background: rgba(17, 25, 38, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 28px rgba(0, 0, 0, .2);
}

.quick-action {
  border-color: #314057;
  background: #121c2c;
  color: #edf5ff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quick-action::before {
  content: attr(data-icon);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: currentColor;
  font-weight: 950;
}

.quick-action.primary-action {
  border-color: #20c7b5;
  background: linear-gradient(180deg, #22d3c4, #119c91);
  color: #031414;
  box-shadow: 0 10px 28px rgba(32, 199, 181, .18);
}

.quick-action.danger-action {
  border-color: #65313a;
  background: #2a121a;
  color: #ffb4c1;
}

.page-sidebar {
  background: rgba(9, 14, 23, .9);
  border-right-color: #263244;
}

.page-nav,
.page-tools,
.copyright-note,
.page-thumb,
.onboarding-steps {
  border-color: #2d3a4d;
  background: rgba(17, 25, 38, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .18);
}

.page-thumb.is-active {
  border-color: #20c7b5;
  background: rgba(32, 199, 181, .14);
  box-shadow: 0 14px 34px rgba(32, 199, 181, .16);
}

.thumb-canvas {
  border-color: #3a4a63;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.product-strip,
.statusbar {
  background: rgba(12, 18, 29, .86);
  border-bottom-color: #263244;
}

.ocr-notice {
  border-bottom-color: #725523;
  background: rgba(42, 31, 13, .92);
  color: #ffe5a3;
}

.product-strip strong {
  color: #f4f8ff;
}

.canvas-wrap {
  background:
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, .12), transparent 30%),
    linear-gradient(180deg, #101827, #0b111c);
}

.page-stage {
  box-shadow: 0 34px 90px rgba(0, 0, 0, .52), 0 2px 10px rgba(0, 0, 0, .34);
}

.empty-state h2 {
  color: #f4f8ff;
}

.empty-state p,
.onboarding-steps {
  color: #a8b5c9;
}

.onboarding-actions .primary {
  background: linear-gradient(180deg, #22d3c4, #119c91);
  color: #031414;
}

.copyright-note {
  background: rgba(42, 31, 13, .78);
  border-color: #725523;
}

.copyright-note strong {
  color: #ffd77a;
}

/* Compact, context-first shell. Keep broad workflow actions in menus so the
   active tool owns the visible options. */
.workflow-ribbon {
  display: none !important;
}

.app-topbar {
  gap: 8px;
  padding: 8px 10px;
}

.brand {
  min-width: 160px;
}

.brand p {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-palette {
  flex: 1 1 360px;
  min-width: 280px;
}

.tool {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  font-size: 14px;
}

.tool[data-tool="note"],
.tool[data-tool="callout"] {
  width: 42px;
  font-size: 11px;
}

.text-tools {
  display: none !important;
  flex: 1 1 560px;
  min-width: 300px;
}

body[data-context="text"] .text-tools,
body[data-context="paragraph"] .text-tools,
body[data-context="note"] .text-tools,
body[data-context="callout"] .text-tools,
body[data-context="signature"] .text-tools {
  display: flex !important;
}

.object-tools {
  display: none !important;
  flex: 1 1 520px;
  min-width: 360px;
}

body[data-context="object"] .object-tools,
body:has(.annotation.is-selected.box) .object-tools,
body:has(.annotation.is-selected.circle) .object-tools,
body:has(.annotation.is-selected.arrow) .object-tools,
body:has(.annotation.is-selected.line) .object-tools,
body:has(.annotation.is-selected.underline) .object-tools,
body:has(.annotation.is-selected.highlight) .object-tools,
body:has(.annotation.is-selected.whiteout) .object-tools,
body:has(.annotation.is-selected.image) .object-tools {
  display: flex !important;
}

.object-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 112px;
  color: #9fb0c8;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.object-tools input[type="range"] {
  width: 86px;
}

.object-tools input[type="color"] {
  width: 34px;
  height: 28px;
  padding: 2px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 7px;
  background: transparent;
}

.context-panel {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 42px;
  padding: 7px 14px;
  background: rgba(8, 13, 21, .96);
  border-bottom-color: #263244;
  color: #9fb0c8;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .16);
  overflow-x: auto;
}

.context-panel strong {
  color: #f4f8ff;
  font-size: 13px;
}

.context-chip {
  min-height: 28px;
  border-color: #2d3a4d;
  background: #121a28;
  color: #edf5ff;
  cursor: pointer;
  box-shadow: none;
}

.context-chip:hover {
  border-color: #20c7b5;
  background: rgba(32, 199, 181, .14);
}

.product-strip {
  display: none;
}

@media (max-width: 980px) {
  .brand {
    min-width: auto;
  }

  .zoom-tools {
    flex: 1 1 100%;
  }
}

/* v18 product reset: industry-standard mode tabs, canvas center, pages left,
   task panel right. */
:root {
  color-scheme: dark;
  --ink: #eef4ff;
  --muted: #9aa8bd;
  --line: #253144;
  --panel: #0f1724;
  --soft: #172131;
  --accent: #37d6c3;
  --accent-soft: rgba(55, 214, 195, .16);
  --accent-ink: #031312;
}

body {
  background: #080d15;
}

.app-shell {
  grid-template-columns: 236px minmax(0, 1fr) 280px;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  background: #080d15;
}

.app-topbar {
  display: grid;
  grid-template-columns: 170px minmax(250px, 1fr) max-content;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 10px;
  background: #0a101a;
  border-bottom: 1px solid #1d2838;
  box-shadow: none;
}

.app-topbar .brand {
  grid-column: 1;
  grid-row: 1;
}

.app-topbar .menu-bar {
  grid-column: 2;
  grid-row: 1;
}

.app-topbar .zoom-tools {
  grid-column: 3;
  grid-row: 1;
}

.app-topbar .mode-tabs {
  grid-column: 1 / 2;
  grid-row: 2;
}

.app-topbar .tool-palette {
  grid-column: 2;
  grid-row: 2;
}

.app-topbar .text-tools {
  grid-column: 2;
  grid-row: 3;
}

.app-topbar .compact-pages {
  grid-column: 3;
  grid-row: 2;
}

.brand {
  min-width: 0;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.brand h1 {
  font-size: 17px;
}

.menu-bar {
  gap: 2px;
  border: 1px solid #243044;
  border-radius: 10px;
  padding: 3px;
  background: #0d1522;
}

.file-menu summary {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #dce7f7;
  font-size: 13px;
}

.file-menu summary:hover,
.file-menu[open] summary {
  background: #172235;
}

.mode-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  justify-self: stretch;
  min-width: 0;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid #243044;
  border-radius: 12px;
  background: #0d1522;
}

.mode-tab {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  padding: 0 9px;
  background: transparent;
  color: #aebbd0;
  font-size: 13px;
  font-weight: 850;
}

.mode-tab:not(.is-active) {
  color: transparent;
  width: 34px;
  padding: 0;
  position: relative;
}

.mode-tab:not(.is-active)::before {
  content: attr(data-mode);
  color: #aebbd0;
  text-transform: capitalize;
  font-size: 0;
}

.mode-tab[data-mode="edit"]:not(.is-active)::before { content: "E"; font-size: 13px; }
.mode-tab[data-mode="comment"]:not(.is-active)::before { content: "C"; font-size: 13px; }
.mode-tab[data-mode="organize"]:not(.is-active)::before { content: "O"; font-size: 13px; }
.mode-tab[data-mode="scan"]:not(.is-active)::before { content: "Text"; font-size: 11px; }
.mode-tab[data-mode="sign"]:not(.is-active)::before { content: "S"; font-size: 13px; }
.mode-tab[data-mode="export"]:not(.is-active)::before { content: "X"; font-size: 13px; }

.app-topbar .mode-tabs {
  grid-column: 1 / -1;
  grid-row: 2;
}

.app-topbar .tool-palette {
  grid-column: 1 / 3;
  grid-row: 3;
}

.app-topbar .compact-pages {
  grid-column: 3;
  grid-row: 3;
}

.app-topbar .text-tools {
  grid-column: 1 / 3;
  grid-row: 4;
}

.mode-tab:not(.is-active) {
  width: auto;
  padding: 0 11px;
  color: #aebbd0;
}

.mode-tab:not(.is-active)::before {
  display: none;
}

.mode-tab.is-active {
  background: #233148;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.tool-palette {
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  padding: 0 8px 0 0;
}

.tool {
  display: none;
}

body[data-mode="edit"] .tool[data-mode-scope~="edit"],
body[data-mode="comment"] .tool[data-mode-scope~="comment"],
body[data-mode="sign"] .tool[data-mode-scope~="sign"] {
  display: inline-grid;
}

.toolbar-group {
  border-right-color: #243044;
}

.zoom-tools,
.compact-pages {
  justify-self: end;
}

.zoom-tools {
  border-right: 0;
}

.context-panel {
  grid-column: 1 / -1;
  min-height: 42px;
  padding: 7px 14px;
  background: #0d1522;
  border-bottom: 1px solid #1d2838;
}

.page-sidebar {
  grid-column: 1;
  grid-row: 3;
  background: #0a101a;
  border-right: 1px solid #1d2838;
}

.workspace {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
  background: #0b111c;
}

.inspector-panel {
  grid-column: 3;
  grid-row: 3;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  border-left: 1px solid #1d2838;
  background: #0a101a;
}

.task-card,
.task-list,
.trust-panel {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #253144;
  border-radius: 12px;
  background: #101827;
}

.task-card h2 {
  color: #f4f8ff;
  font-size: 18px;
  line-height: 1.15;
}

.task-card p,
.trust-panel p {
  color: #a7b4c8;
  font-size: 13px;
  line-height: 1.45;
}

.task-kicker {
  width: max-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(55, 214, 195, .14);
  color: #9ff8ef;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.task-list .quick-action {
  justify-content: start;
  width: 100%;
}

.trust-panel strong {
  color: #ffe5a3;
}

.statusbar {
  min-height: 42px;
}

.canvas-wrap {
  padding: 34px;
}

.page-stage {
  border-radius: 2px;
}

.empty-state {
  max-width: 680px;
  padding: 44px;
  border: 1px solid #253144;
  border-radius: 18px;
  background: #101827;
}

.onboarding-steps {
  border-radius: 12px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .inspector-panel {
    display: none;
  }

  .app-topbar {
    grid-template-columns: 210px 1fr;
  }

  .menu-bar,
  .mode-tabs,
  .tool-palette,
  .text-tools,
  .compact-pages,
  .zoom-tools {
    grid-column: 1 / -1;
  }
}

/* v34: final topbar order fix. This block intentionally lives last. */
body.simple-ui .app-topbar {
  grid-template-columns: 138px 370px minmax(240px, 1fr) 242px !important;
  grid-template-rows: 28px 34px !important;
  gap: 4px 8px !important;
  padding: 5px 8px !important;
}

body.simple-ui .brand {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
}

body.simple-ui .menu-bar {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  gap: 2px !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.simple-ui .mode-tabs {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  align-self: center !important;
  min-height: 32px !important;
  padding: 2px !important;
}

body.simple-ui .tool-palette {
  grid-column: 4 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: end !important;
  width: max-content !important;
  min-height: 32px !important;
  padding: 2px !important;
}

body.simple-ui .zoom-tools {
  grid-column: 4 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-height: 32px !important;
  padding: 2px 5px !important;
}

body.simple-ui .compact-pages {
  display: none !important;
}

body.simple-ui .context-panel,
body.simple-ui .statusbar,
body.simple-ui .product-strip {
  display: none !important;
}

/* v35: standard menus only, no workflow tabs. */
body.simple-ui .app-topbar {
  grid-template-columns: 138px minmax(340px, 1fr) 242px !important;
  grid-template-rows: 30px 34px !important;
}

body.simple-ui .menu-bar {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

body.simple-ui .mode-tabs {
  display: none !important;
}

body.simple-ui .tool-palette {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  width: max-content !important;
  max-width: none !important;
}

body.simple-ui .zoom-tools {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body.simple-ui .text-tools {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

body.simple-ui .ocr-notice {
  grid-column: 1 / -1;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 13px;
}

body.simple-ui .ocr-notice:not([hidden]) {
  display: flex !important;
  position: fixed;
  top: 76px;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  max-width: min(620px, calc(100vw - 40px));
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
}

/* v39: keep page thumbnails visually contained. */
body.simple-ui .page-thumbs {
  gap: 8px !important;
  padding: 2px 2px 8px !important;
}

body.simple-ui .page-thumb {
  overflow: hidden !important;
  min-height: 118px !important;
  padding: 8px !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.simple-ui .page-thumb.is-active {
  border-color: #2563eb !important;
  background: #f7fbff !important;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .12) !important;
}

body.simple-ui .thumb-canvas {
  display: block !important;
  max-width: 100% !important;
  max-height: 82px !important;
  object-fit: contain !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.simple-ui .page-thumb span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

body.simple-ui .page-thumb.is-active span {
  background: #2563eb;
  color: #ffffff;
}

/* v42: editable PDF text should look like original text, not a white label. */
body.simple-ui .annotation.text.source-text,
body.simple-ui .annotation.text.source-text:hover,
body.simple-ui .annotation.text.source-text:focus,
body.simple-ui .annotation.text.source-text.is-selected {
  background: transparent !important;
  box-shadow: none !important;
}

body.simple-ui .annotation.text.source-text.is-selected,
body.simple-ui .annotation.text.source-text:focus {
  outline: 1px dashed rgba(37, 99, 235, .58) !important;
}

body.simple-ui .annotation.text.source-text {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* v54: source PDF text must start exactly where the original text started. */
body.simple-ui .annotation.text.source-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* v44: first-time-user coach. One visible instruction, no clutter. */
body.simple-ui .context-panel {
  display: flex !important;
  position: fixed !important;
  left: 50% !important;
  top: 77px !important;
  z-index: 80 !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: min(720px, calc(100vw - 32px)) !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #172033 !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .13) !important;
  font-size: 13px !important;
  pointer-events: none !important;
}

body.simple-ui .context-panel strong {
  color: #0f4fb8 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

body.simple-ui .context-chip {
  display: none !important;
}

body.simple-ui .quick-action:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
}

/* v63: remove the top guidance/info box so it cannot overlap toolbar controls. */
#contextPanel,
.context-panel {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* v47: right-click page thumbnail actions. */
.thumbnail-menu {
  position: fixed;
  z-index: 1400;
  display: grid;
  gap: 3px;
  min-width: 222px;
  padding: 7px;
  border: 1px solid rgba(203, 213, 225, .96);
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .22), 0 1px 0 rgba(255, 255, 255, .8) inset;
  backdrop-filter: blur(18px);
}

.thumbnail-menu button {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  justify-content: stretch;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  padding: 0 11px 0 7px;
  background: transparent;
  color: #172033;
  font-size: 13px;
  font-weight: 680;
  text-align: left;
}

.thumbnail-menu .menu-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #eef4ff;
  color: #0b3f9c;
  font-size: 13px;
  font-weight: 900;
}

.thumbnail-menu button:hover:not(:disabled),
.thumbnail-menu button:focus-visible {
  background: #eef4ff;
}

.thumbnail-menu .danger-menu-item {
  color: #b91c1c;
}

.thumbnail-menu .danger-menu-item .menu-icon {
  background: #fee2e2;
  color: #b91c1c;
}

.thumbnail-menu .danger-menu-item:hover:not(:disabled),
.thumbnail-menu .danger-menu-item:focus-visible {
  background: #fff1f2;
  color: #991b1b;
}

.thumbnail-menu button:disabled {
  color: #94a3b8;
}

/* v51: direct page editing makes the old toolbar text field unnecessary. */
body.simple-ui #textValue {
  display: none !important;
}

/* v52: calmer, standard app menus inspired by modern document tools. */
body.simple-ui .app-topbar {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.simple-ui .menu-bar {
  gap: 1px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.simple-ui .file-menu {
  position: relative !important;
}

body.simple-ui .file-menu summary {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #243044 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

body.simple-ui .file-menu summary:hover,
body.simple-ui .file-menu[open] summary {
  background: #eef2f7 !important;
  color: #0f172a !important;
}

body.simple-ui .file-menu-popover {
  top: 31px !important;
  left: 0 !important;
  gap: 2px !important;
  min-width: 230px !important;
  width: max-content !important;
  max-width: 360px !important;
  padding: 7px !important;
  border: 1px solid rgba(203, 213, 225, .95) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .98) !important;
  color: #0f172a !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .18), 0 1px 0 rgba(255, 255, 255, .8) inset !important;
  backdrop-filter: blur(18px);
}

body.simple-ui .wide-menu,
body.simple-ui .legal-menu {
  width: 340px !important;
}

/* v65: top application menus must always float above thumbnails and pages. */
body.simple-ui .app-topbar,
.app-topbar {
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  position: relative !important;
  z-index: 1100 !important;
  overflow: visible !important;
}

body.simple-ui .file-menu,
.file-menu,
body.simple-ui .file-menu[open],
.file-menu[open] {
  position: relative !important;
  z-index: 1200 !important;
  overflow: visible !important;
}

body.simple-ui .file-menu-popover,
.file-menu-popover {
  z-index: 1300 !important;
  pointer-events: auto !important;
}

.page-sidebar,
.workspace,
.page-stage,
.overlay-layer {
  z-index: auto !important;
}

body.simple-ui .menu-item {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 11px !important;
  background: transparent !important;
  color: #172033 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  letter-spacing: 0 !important;
}

body.simple-ui .menu-item:hover,
body.simple-ui .menu-item:focus-visible {
  background: #eef4ff !important;
  color: #0b3f9c !important;
}

body.simple-ui .menu-item:disabled {
  color: #94a3b8 !important;
  background: transparent !important;
  opacity: 1 !important;
}

body.simple-ui .menu-copy {
  gap: 6px !important;
  padding: 8px 10px !important;
  color: #475569 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.simple-ui .menu-copy strong {
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

/* v58: production hardening states. */
body.simple-ui.has-unsaved .brand p {
  color: #0b3f9c !important;
  font-weight: 760 !important;
}

body.simple-ui.has-unsaved .brand p::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: #2563eb;
  vertical-align: 1px;
}

body.simple-ui .ocr-notice strong {
  white-space: nowrap;
}

/* v70: editable PDF source text stays one row so the caret cannot drop below the text. */
body .annotation.text.source-text,
body.simple-ui .annotation.text.source-text,
body .annotation.text.source-text:focus,
body.simple-ui .annotation.text.source-text:focus {
  display: block !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 1.18 !important;
  white-space: pre !important;
  overflow: visible !important;
  vertical-align: top !important;
  caret-color: currentColor !important;
}

/* v72: signatures must stay readable regardless of the current color swatch. */
body .annotation.signature,
body.simple-ui .annotation.signature {
  color: #111827 !important;
  caret-color: #111827 !important;
  background: transparent !important;
}

/* v76: arrow/select mode should clearly show that text boxes can be moved. */
body .annotation.is-text-like,
body.simple-ui .annotation.is-text-like,
body .annotation.text.source-text,
body.simple-ui .annotation.text.source-text {
  cursor: move !important;
}

body .annotation.is-text-like:hover,
body.simple-ui .annotation.is-text-like:hover {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .22), 0 6px 18px rgba(15, 23, 42, .12) !important;
}

body .annotation.is-text-like:focus,
body .annotation.is-text-like.is-editing,
body.simple-ui .annotation.is-text-like:focus,
body.simple-ui .annotation.is-text-like.is-editing {
  cursor: text !important;
}

body .annotation.is-text-like .resize-handle,
body.simple-ui .annotation.is-text-like .resize-handle {
  cursor: nwse-resize !important;
}

/* v80: production polish pass - compact premium desktop editor chrome. */
body {
  --ink: #101827;
  --muted: #64748b;
  --line: #d9e1ec;
  --panel: #ffffff;
  --soft: #f4f7fb;
  --accent: #1167e8;
  background:
    linear-gradient(180deg, #f7f9fc 0, #edf2f8 44%, #e8eef6 100%) !important;
}

body.simple-ui .app-shell,
.app-shell {
  grid-template-columns: 216px minmax(0, 1fr) 236px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 100vh !important;
}

body.simple-ui .app-topbar,
.app-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  min-height: 58px !important;
  padding: 7px 10px !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .34) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 10px 30px rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(18px);
}

body.simple-ui .brand,
.brand {
  min-width: 188px !important;
  gap: 9px !important;
}

body.simple-ui .brand-mark,
.brand-mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #0f172a, #1167e8) !important;
  box-shadow: 0 8px 18px rgba(17, 103, 232, .22) !important;
  font-size: 11px !important;
}

body.simple-ui h1,
h1 {
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

body.simple-ui .file-menu summary,
.file-menu summary {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #233047 !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

body.simple-ui .file-menu summary:hover,
body.simple-ui .file-menu[open] summary,
.file-menu summary:hover,
.file-menu[open] summary {
  background: #eaf1ff !important;
  color: #0b4ec2 !important;
}

body.simple-ui .toolbar-group,
.toolbar-group {
  min-height: 38px !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(203, 213, 225, .72) !important;
  border-radius: 10px !important;
  background: rgba(248, 250, 252, .84) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

body.simple-ui .tool,
body.simple-ui .toolbar-group button,
body.simple-ui .quick-action,
.tool,
.toolbar-group button,
.quick-action {
  min-height: 30px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}

body.simple-ui .tool,
.tool {
  min-width: 32px !important;
  padding: 0 8px !important;
}

body.simple-ui .tool:hover,
body.simple-ui .toolbar-group button:hover:not(:disabled),
body.simple-ui .quick-action:hover:not(:disabled),
.tool:hover,
.toolbar-group button:hover:not(:disabled),
.quick-action:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10) !important;
}

body.simple-ui .tool.is-active,
body.simple-ui .toolbar-group button.is-active,
.tool.is-active,
.toolbar-group button.is-active {
  border-color: rgba(17, 103, 232, .42) !important;
  background: #1167e8 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(17, 103, 232, .22) !important;
}

body.simple-ui .text-tools input[type="number"],
body.simple-ui .text-tools input[type="color"],
.text-tools input[type="number"],
.text-tools input[type="color"] {
  height: 30px !important;
}

body.simple-ui .text-tools input[type="text"],
.text-tools input[type="text"] {
  display: none !important;
}

body.simple-ui .page-sidebar,
.page-sidebar {
  background: rgba(247, 250, 253, .88) !important;
  border-right: 1px solid rgba(148, 163, 184, .32) !important;
}

body.simple-ui .inspector-panel,
.inspector-panel {
  background: rgba(247, 250, 253, .88) !important;
  border-left: 1px solid rgba(148, 163, 184, .32) !important;
}

body.simple-ui .product-strip,
.product-strip {
  border: 1px solid rgba(203, 213, 225, .72) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ffffff, #f3f7ff) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
}

body.simple-ui .statusbar,
.statusbar {
  border-radius: 10px !important;
  background: #101827 !important;
  color: #d9e4f3 !important;
}

body.simple-ui .statusbar span:first-child,
.statusbar span:first-child {
  color: #ffffff !important;
}

body.simple-ui .page-stage,
.page-stage {
  border-radius: 3px !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .20), 0 0 0 1px rgba(15, 23, 42, .08) !important;
}

body.simple-ui .task-card,
body.simple-ui .task-list,
body.simple-ui .trust-panel,
body.simple-ui .document-health,
.task-card,
.task-list,
.trust-panel,
.document-health {
  border: 1px solid rgba(203, 213, 225, .72) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}

.page-jump-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 9px;
  background: #ffffff;
  color: #64748b;
  font-size: 12px;
  font-weight: 760;
}

.page-jump-label input {
  width: 46px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: #eef4ff;
  color: #0f172a;
  text-align: center;
  font-weight: 850;
}

.document-health {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.document-health div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 9px;
  background: #f8fbff;
}

.document-health strong {
  color: #101827;
  font-size: 13px;
}

.document-health span:not(.task-kicker) {
  color: #64748b;
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.find-tools input[type="search"] {
  width: 132px;
  height: 30px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 8px;
  padding: 0 9px;
  background: #ffffff;
  color: #101827;
  font-size: 12px;
  font-weight: 650;
}

#findCount {
  min-width: 42px;
  color: #64748b;
  font-size: 11px;
  font-weight: 820;
  text-align: center;
}

.search-hit {
  position: absolute;
  z-index: 42;
  border: 1px solid rgba(245, 158, 11, .75);
  border-radius: 3px;
  background: rgba(250, 204, 21, .34);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .72);
  pointer-events: none;
}

.search-hit.is-active {
  border-color: #ef4444;
  background: rgba(251, 113, 133, .34);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 5px rgba(239, 68, 68, .20);
}

/* v83: keep the left page rail fully inside its column. */
body.simple-ui .app-shell,
.app-shell {
  grid-template-columns: 244px minmax(0, 1fr) 236px !important;
}

body.simple-ui .page-sidebar,
.page-sidebar {
  width: 244px !important;
  min-width: 0 !important;
  max-width: 244px !important;
  padding: 10px !important;
  gap: 9px !important;
  overflow: hidden !important;
}

body.simple-ui .page-nav,
.page-nav {
  grid-template-columns: 30px minmax(82px, 1fr) 30px !important;
  gap: 5px !important;
  padding: 7px !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.simple-ui .page-tools,
.page-tools {
  gap: 5px !important;
  padding: 7px !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.simple-ui .page-nav button,
body.simple-ui .page-tools button,
.page-nav button,
.page-tools button {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 30px !important;
  padding: 0 !important;
}

body.simple-ui .page-jump-label,
.page-jump-label {
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 5px !important;
  overflow: hidden !important;
}

body.simple-ui .page-jump-label input,
.page-jump-label input {
  width: 38px !important;
  min-width: 0 !important;
}

body.simple-ui .page-thumbs,
.page-thumbs {
  width: 100% !important;
  padding: 0 2px 8px 0 !important;
  overflow-x: hidden !important;
}

body.simple-ui .page-thumb,
.page-thumb {
  align-content: start !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.simple-ui .thumb-canvas,
.thumb-canvas {
  display: block !important;
  width: min(168px, calc(100% - 18px)) !important;
  max-width: calc(100% - 18px) !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 auto !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06) !important;
}

/* v85: visible tool labels so users understand every icon. */
body.simple-ui .tool-palette,
.tool-palette {
  align-items: stretch !important;
}

body.simple-ui .tool,
.tool {
  display: grid !important;
  grid-template-rows: 18px 12px !important;
  place-items: center !important;
  gap: 1px !important;
  min-width: 48px !important;
  min-height: 38px !important;
  padding: 3px 6px !important;
  line-height: 1 !important;
}

body.simple-ui .tool b,
.tool b {
  display: block;
  font-size: 14px;
  line-height: 1;
}

body.simple-ui .tool small,
.tool small {
  display: block;
  max-width: 54px;
  overflow: hidden;
  color: inherit;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .82;
}

/* v86: page thumbnails must always be one vertical column. */
body.simple-ui .page-thumbs,
.page-thumbs {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-auto-rows: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 980px) {
  body.simple-ui .page-thumbs,
  .page-thumbs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* v88: requested production layout and drawing behavior refinements. */
body.simple-ui .app-shell,
.app-shell {
  grid-template-columns: 244px minmax(0, 1fr) !important;
}

body.simple-ui .inspector-panel,
.inspector-panel {
  display: none !important;
}

body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: minmax(180px, auto) 1fr !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  gap: 4px 8px !important;
  padding: 8px !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-content: start !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  gap: 4px !important;
  padding: 4px !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
body.simple-ui .zoom-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools,
.zoom-tools {
  grid-row: 3 !important;
  align-self: stretch !important;
  gap: 4px !important;
  padding: 4px !important;
}

body.simple-ui .tool,
.tool {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: 24px 14px !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  padding: 7px 4px 5px !important;
  overflow: visible !important;
  aspect-ratio: 1 / 1 !important;
}

body.simple-ui .tool b,
.tool b {
  display: block !important;
  width: 100% !important;
  min-height: 24px !important;
  line-height: 24px !important;
  font-size: 17px !important;
  text-align: center !important;
  overflow: visible !important;
}

body.simple-ui .tool small,
.tool small {
  display: block !important;
  width: 100% !important;
  max-width: 48px !important;
  min-height: 12px !important;
  line-height: 12px !important;
  font-size: 9px !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.simple-ui .annotation.highlight,
.annotation.highlight {
  z-index: 1 !important;
  mix-blend-mode: multiply !important;
  opacity: .55 !important;
  pointer-events: auto !important;
}

body.simple-ui .annotation.text,
body.simple-ui .annotation.source-text,
.annotation.text,
.annotation.source-text {
  z-index: 4 !important;
}

body.simple-ui .annotation.highlight.is-selected,
.annotation.highlight.is-selected {
  z-index: 6 !important;
  outline: 1px solid rgba(202, 138, 4, .65) !important;
}

/* v89: OCR-free UI and bottom zoom controls. */
.hidden-control {
  display: none !important;
}

body.simple-ui .top-read-tools,
.top-read-tools {
  grid-column: auto !important;
  grid-row: 3 !important;
}

body.simple-ui #extractText,
#extractText {
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  flex: 0 0 176px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  aspect-ratio: auto !important;
  border-color: #0b4ec2 !important;
  background: #1167e8 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(17, 103, 232, .18) !important;
}

body.simple-ui #extractText small,
#extractText small,
body.simple-ui #extractText .extract-label,
#extractText .extract-label {
  max-width: none !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.05 !important;
}

body.simple-ui #extractText .extract-label small,
#extractText .extract-label small,
body.simple-ui #extractText small span,
#extractText small span {
  display: inline !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.simple-ui #extractText b,
#extractText b,
body.simple-ui #extractText small,
#extractText small,
body.simple-ui #extractText .extract-label,
#extractText .extract-label {
  color: #ffffff !important;
}

body.simple-ui #extractText:hover:not(:disabled),
#extractText:hover:not(:disabled) {
  background: #0b4ec2 !important;
}

body.simple-ui #extractText:disabled,
#extractText:disabled {
  background: #bfdbfe !important;
  border-color: #93c5fd !important;
  color: #1e3a8a !important;
  box-shadow: none !important;
}

body.simple-ui .statusbar,
.statusbar {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
}

body.simple-ui .bottom-zoom,
.bottom-zoom {
  display: inline-grid !important;
  grid-template-columns: 32px minmax(74px, auto) 32px !important;
  align-items: center !important;
  gap: 4px !important;
  justify-self: end !important;
  padding: 4px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, .72) !important;
}

body.simple-ui .bottom-zoom button,
.bottom-zoom button {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 28px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body.simple-ui .bottom-zoom label,
.bottom-zoom label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  min-width: 70px !important;
  height: 28px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #e5edf8 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.simple-ui .bottom-zoom input,
.bottom-zoom input {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: right !important;
  appearance: textfield !important;
}

body.simple-ui .bottom-zoom input::-webkit-inner-spin-button,
body.simple-ui .bottom-zoom input::-webkit-outer-spin-button,
.bottom-zoom input::-webkit-inner-spin-button,
.bottom-zoom input::-webkit-outer-spin-button {
  margin: 0 !important;
  opacity: 1 !important;
}

/* v94: placed text boxes behave like real selectable writing fields while editing. */
body .annotation.text.added-text,
body.simple-ui .annotation.text.added-text,
body .annotation.text.added-text:focus,
body.simple-ui .annotation.text.added-text:focus {
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  caret-color: #0f172a !important;
}

body .annotation.text.added-text::selection,
body.simple-ui .annotation.text.added-text::selection {
  background: rgba(22, 163, 74, .28) !important;
}

/* v102: actual page thumbnails must never be vertically compressed. */
body.simple-ui .page-thumbs,
.page-thumbs {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

body.simple-ui .page-thumb,
.page-thumb {
  display: grid !important;
  grid-template-rows: auto 20px !important;
  align-content: start !important;
  justify-items: center !important;
  height: auto !important;
  min-height: max-content !important;
  overflow: visible !important;
  padding: 8px !important;
}

body.simple-ui .thumb-canvas,
.thumb-canvas {
  display: block !important;
  width: min(168px, calc(100% - 18px)) !important;
  max-width: calc(100% - 18px) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}

.annotation.signature.signature-pad {
  display: grid;
  place-items: center;
  border: 1.5px dashed rgba(15, 23, 42, .42);
  background: rgba(255, 255, 255, .12) !important;
  cursor: crosshair !important;
  touch-action: none;
  user-select: none;
}

.annotation.signature.signature-pad svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.signature-placeholder {
  color: rgba(15, 23, 42, .58);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.signature-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(10px);
}

.signature-modal[hidden] {
  display: none !important;
}

.signature-dialog {
  width: min(920px, 96vw);
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 26px 80px rgba(15, 23, 42, .28);
  overflow: hidden;
}

.signature-dialog-head,
.signature-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.signature-dialog-head {
  border-bottom: 1px solid #dbe4f0;
}

.signature-dialog-head strong {
  display: block;
  color: #101827;
  font-size: 18px;
}

.signature-dialog-head span {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

#signatureClose {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
}

#signatureCanvas {
  display: block;
  width: calc(100% - 32px);
  height: 260px;
  margin: 16px;
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  background: #ffffff;
  cursor: crosshair;
  touch-action: none;
}

.signature-dialog-actions {
  border-top: 1px solid #dbe4f0;
  justify-content: flex-end;
}

/* v108: keep the standard menus directly beside the product name. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: max-content max-content minmax(0, 1fr) !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  min-width: 0 !important;
}

body.simple-ui .brand h1,
.brand h1 {
  white-space: nowrap !important;
}

/* v156: final top-nav safety net. Nothing in the header may overlap on narrow screens. */
html,
body,
body.simple-ui,
body.simple-ui .app-shell,
.app-shell {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: max-content max-content minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 6px 8px !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
body.simple-ui .zoom-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools,
.zoom-tools {
  grid-row: 3 !important;
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  body.simple-ui .find-tools,
  body.simple-ui .zoom-tools,
  .text-tools,
  .object-tools,
  .compact-pages,
  .find-tools,
  .zoom-tools {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.simple-ui .file-menu-popover,
  body.simple-ui .wide-menu,
  body.simple-ui .legal-menu,
  .file-menu-popover,
  .wide-menu,
  .legal-menu {
    position: fixed !important;
    top: 134px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    z-index: 20000 !important;
  }

  body.simple-ui .menu-item,
  .menu-item,
  body.simple-ui .menu-copy,
  .menu-copy {
    max-width: 100% !important;
  }
}

/* v177: context controls and Find share one row in separate columns. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: max-content minmax(0, 1fr) minmax(220px, 340px) !important;
  grid-template-rows: auto auto auto !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
.text-tools,
.object-tools,
.compact-pages {
  grid-column: 1 / 3 !important;
  grid-row: 3 !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 3 !important;
  grid-row: 3 !important;
  justify-self: stretch !important;
  min-width: 220px !important;
}

body.simple-ui .find-tools input[type="search"],
.find-tools input[type="search"] {
  flex: 1 1 120px !important;
  min-width: 92px !important;
}

@media (max-width: 980px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  body.simple-ui .find-tools,
  .text-tools,
  .object-tools,
  .compact-pages,
  .find-tools {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}

/* v178-final: responsive two-row tools, visible hints, context/find columns. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) minmax(180px, 250px) minmax(220px, 330px) !important;
  grid-template-rows: auto auto auto !important;
  grid-auto-rows: max-content !important;
  gap: 10px 10px !important;
  overflow: visible !important;
  align-items: start !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  min-width: 0 !important;
  max-width: 100% !important;
  z-index: 80 !important;
}

body.simple-ui .tool,
.tool {
  flex: 0 0 auto !important;
}

body.simple-ui #extractText,
#extractText {
  flex: 0 0 292px !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
.text-tools,
.object-tools {
  grid-column: 1 / 3 !important;
  grid-row: 3 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  z-index: 70 !important;
}

body.simple-ui .compact-pages,
.compact-pages {
  grid-column: 3 !important;
  grid-row: 3 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  z-index: 65 !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 4 !important;
  grid-row: 3 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  z-index: 60 !important;
}

body.simple-ui .find-tools input[type="search"],
.find-tools input[type="search"] {
  flex: 1 1 100px !important;
  min-width: 80px !important;
}

body.simple-ui .tool::after,
.tool::after {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  z-index: 50000 !important;
}

@media (max-width: 980px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  .text-tools,
  .object-tools {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  body.simple-ui .compact-pages,
  .compact-pages,
  body.simple-ui .find-tools,
  .find-tools {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
}

@media (max-width: 640px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  body.simple-ui .find-tools,
  .text-tools,
  .object-tools,
  .compact-pages,
  .find-tools {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* v160: desktop keeps tools on one row when there is enough room; rows auto-size so nothing overlaps. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
}

body.simple-ui .brand,
.brand,
body.simple-ui .menu-bar,
.menu-bar,
body.simple-ui .tool-palette,
.tool-palette,
body.simple-ui .find-tools,
.find-tools {
  align-self: start !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 1080px) {
  body.simple-ui .tool-palette,
  .tool-palette {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: clip !important;
  }

  body.simple-ui .tool,
  .tool {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  body.simple-ui #extractText,
  #extractText {
    flex: 0 0 176px !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
  }
}

/* v153: responsive top icon toolbar. Buttons share the row on wide screens and wrap cleanly on small screens. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: max-content max-content minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body.simple-ui .tool,
.tool {
  flex: 1 1 52px !important;
  width: auto !important;
  min-width: 48px !important;
  max-width: 72px !important;
}

body.simple-ui #extractText,
#extractText {
  flex: 2 1 176px !important;
  width: auto !important;
  min-width: 168px !important;
  max-width: 240px !important;
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-row: 3 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  body.simple-ui .find-tools,
  body.simple-ui .zoom-tools,
  .text-tools,
  .object-tools,
  .compact-pages,
  .find-tools,
  .zoom-tools {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    padding-bottom: 2px !important;
  }

  body.simple-ui .file-menu,
  .file-menu {
    flex: 0 0 auto !important;
  }

  body.simple-ui .tool,
  .tool {
    flex: 1 1 48px !important;
    min-width: 46px !important;
    max-width: none !important;
    height: 46px !important;
  }

  body.simple-ui #extractText,
  #extractText {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
  }
}

/* v144: make left page number controls readable and evenly sized. */
body.simple-ui .page-nav,
.page-nav {
  grid-template-columns: 38px minmax(118px, 1fr) 38px !important;
  gap: 6px !important;
  padding: 8px !important;
  align-items: center !important;
}

body.simple-ui .page-nav button,
.page-nav button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

body.simple-ui .page-tools #deletePage,
.page-tools #deletePage {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.simple-ui .page-tools #deletePage:hover:not(:disabled),
.page-tools #deletePage:hover:not(:disabled) {
  border-color: #ef4444 !important;
  background: #fee2e2 !important;
  color: #991b1b !important;
}

body.simple-ui .page-jump-label,
.page-jump-label {
  display: grid !important;
  grid-template-columns: 52px auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 118px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  overflow: visible !important;
}

body.simple-ui .page-jump-label input,
.page-jump-label input {
  width: 52px !important;
  min-width: 52px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 30px !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

body.simple-ui .page-jump-label input::-webkit-outer-spin-button,
body.simple-ui .page-jump-label input::-webkit-inner-spin-button,
.page-jump-label input::-webkit-outer-spin-button,
.page-jump-label input::-webkit-inner-spin-button {
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body.simple-ui #pageStatus,
#pageStatus {
  min-width: 42px !important;
  color: #475569 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

/* v147: page tool buttons show clear icon labels; delete is visibly red. */
body.simple-ui .page-tools,
.page-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 8px !important;
}

body.simple-ui .page-tools button,
.page-tools button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 6px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body.simple-ui .page-tool-icon,
.page-tool-icon {
  flex: 0 0 auto !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.simple-ui .page-tool-label,
.page-tool-label {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  justify-self: start !important;
  justify-content: flex-start !important;
  margin-left: 4px !important;
  width: max-content !important;
  max-width: max-content !important;
}

/* v113: visual object style controls and left-aligned app menus. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin-left: 168px !important;
  align-self: center !important;
}

.icon-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.icon-segment .style-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.icon-segment .style-icon.is-active {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, .28) !important;
}

.check-size-icons .style-icon:nth-child(1) { font-size: 13px !important; }
.check-size-icons .style-icon:nth-child(2) { font-size: 16px !important; }
.check-size-icons .style-icon:nth-child(3) { font-size: 20px !important; }
.check-size-icons .style-icon:nth-child(4) { font-size: 24px !important; }

.border-style-icons,
.arrow-icons,
.check-size-icons,
.object-width-control,
.object-opacity-control,
.object-rotate-control {
  display: none !important;
}

body.border-subtools-visible .border-style-icons,
body.arrow-subtools-visible .arrow-icons,
body.check-controls-visible .check-size-icons {
  display: inline-flex !important;
}

body.width-subtools-visible .object-width-control,
body.opacity-subtools-visible .object-opacity-control {
  display: inline-flex !important;
}

body.rotate-subtools-visible .object-rotate-control {
  display: inline-grid !important;
}

/* v116: converted PDF text must edit as multiline text, not a locked one-line overlay. */
body .annotation.text.source-text,
body.simple-ui .annotation.text.source-text,
body .annotation.text.source-text:focus,
body.simple-ui .annotation.text.source-text:focus,
body .annotation.text.source-text.is-selected,
body.simple-ui .annotation.text.source-text.is-selected {
  font-family: Helvetica, Arial, ui-sans-serif, system-ui, sans-serif !important;
  min-height: 1.2em !important;
  padding: 0 !important;
  line-height: 1.18 !important;
  white-space: pre-wrap !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  caret-color: currentColor !important;
}

.overlay-layer[data-smart-intent="smart"] {
  cursor: crosshair;
}

.smart-preview {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  opacity: .72;
}

.smart-preview.highlight {
  background: rgba(255, 241, 118, .7);
  mix-blend-mode: multiply;
}

.smart-preview.box {
  border: 2px dashed #dc2626;
  border-radius: 4px;
  background: rgba(220, 38, 38, .04);
}

.smart-preview.arrow {
  transform-origin: 50% 50%;
}

/* v122: cleaner, more focused production interface. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  grid-template-rows: 34px 54px 42px !important;
  gap: 4px 10px !important;
  padding: 6px 10px !important;
  background: rgba(248, 250, 252, .96) !important;
  border-bottom: 1px solid #dbe4f0 !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(10px) !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 32px !important;
  gap: 8px !important;
}

body.simple-ui .brand-mark,
.brand-mark {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}

body.simple-ui .brand h1,
.brand h1 {
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

body.simple-ui .brand p,
.brand p {
  display: none !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-left: 0 !important;
  align-self: center !important;
  gap: 2px !important;
  width: auto !important;
  max-width: none !important;
}

body.simple-ui .file-menu summary,
.file-menu summary {
  min-height: 28px !important;
  padding: 0 9px !important;
  border-color: transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.simple-ui .file-menu[open] summary,
body.simple-ui .file-menu summary:hover,
.file-menu[open] summary,
.file-menu summary:hover {
  background: #e9f1ff !important;
  color: #0f3f9e !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

body.simple-ui .tool,
.tool {
  width: 48px !important;
  min-width: 48px !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #334155 !important;
}

body.simple-ui .tool b,
.tool b {
  font-size: 18px !important;
}

body.simple-ui .tool small,
.tool small {
  font-size: 9px !important;
  font-weight: 800 !important;
}

body.simple-ui .tool:hover,
.tool:hover {
  background: #f1f5f9 !important;
  border-color: #dbe4f0 !important;
}

body.simple-ui .tool.is-active,
.tool.is-active {
  background: #e9f1ff !important;
  border-color: #93b4ff !important;
  color: #0f3f9e !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .14) !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
body.simple-ui .zoom-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools,
.zoom-tools {
  grid-row: 3 !important;
  min-height: 36px !important;
  padding: 3px 6px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

body.simple-ui .product-strip,
.product-strip {
  display: none !important;
}

body.simple-ui .workspace,
.workspace {
  background: #eef3f8 !important;
}

body.simple-ui .statusbar,
.statusbar {
  min-height: 38px !important;
  padding: 6px 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #dbe4f0 !important;
  color: #172033 !important;
  font-size: 12px !important;
}

body.simple-ui #hintText,
#hintText {
  color: #0f172a !important;
  font-weight: 900 !important;
}

body.simple-ui .statusbar > span:nth-child(2),
.statusbar > span:nth-child(2) {
  display: none !important;
}

body.simple-ui .canvas-wrap,
.canvas-wrap {
  padding: 18px !important;
  background:
    linear-gradient(45deg, rgba(148, 163, 184, .10) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, .10) 25%, transparent 25%),
    #edf2f7 !important;
  background-size: 20px 20px !important;
}

body.simple-ui .page-stage,
.page-stage {
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18) !important;
}

body.simple-ui .page-sidebar,
.page-sidebar {
  background: #f8fafc !important;
  border-right: 1px solid #dbe4f0 !important;
}

body.simple-ui .page-sidebar-head,
.page-sidebar-head,
body.simple-ui .page-nav,
.page-nav,
body.simple-ui .page-tools,
.page-tools {
  background: #ffffff !important;
}

.demo-sitebar {
  display: none;
}

body.demo-shell .demo-sitebar {
  position: sticky;
  top: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .94);
  color: #0f172a;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px);
}

body.demo-shell .demo-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #111827;
  text-decoration: none;
  font-size: 13px;
  font-weight: 950;
}

body.demo-shell .demo-brand img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(17, 103, 232, .16);
}

body.demo-shell .demo-nav {
  display: inline-flex;
  justify-content: center;
  justify-self: center;
  gap: 18px;
}

body.demo-shell .demo-nav a {
  color: #334155;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

body.demo-shell .demo-nav a:hover {
  color: #1167e8;
}

body.demo-shell .demo-actions {
  display: flex;
  justify-content: flex-end;
  justify-self: end;
}

body.demo-shell .demo-buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 16px;
  background: #1167e8;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 760px) {
  body.demo-shell .demo-sitebar {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  body.demo-shell .demo-brand span {
    display: none;
  }

  body.demo-shell .demo-nav {
    gap: 10px;
  }

  body.demo-shell .demo-nav a {
    font-size: 12px;
  }
}

/* v130: chosen blue document logo with green check. */
body.simple-ui .brand-mark,
.brand-mark {
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* v126: in-app third-party license viewer for packaged Windows builds. */
.legal-doc-button {
  font-weight: 850 !important;
}

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .68);
}

.legal-modal[hidden] {
  display: none !important;
}

.legal-dialog {
  width: min(920px, 94vw);
  height: min(720px, 88vh);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .38);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 32px 80px rgba(15, 23, 42, .36);
}

.legal-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.legal-dialog-head strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}

.legal-dialog-head span {
  display: block;
  margin-top: 3px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

#legalClose {
  width: 36px;
  height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.legal-content {
  margin: 0;
  padding: 18px;
  overflow: auto;
  white-space: pre-wrap;
  color: #111827;
  background: #ffffff;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* v141: keep app menu links directly beside the logo/name on the left. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: 150px max-content minmax(0, 1fr) !important;
  align-items: center !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  width: max-content !important;
  min-width: 0 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: max-content !important;
  margin-left: 8px !important;
}

body.simple-ui .brand h1,
.brand h1 {
  white-space: nowrap !important;
}

/* v156: final top-nav safety net. Nothing in the header may overlap on narrow screens. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: max-content max-content minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 6px 8px !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
body.simple-ui .zoom-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools,
.zoom-tools {
  grid-row: 3 !important;
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  body.simple-ui .find-tools,
  body.simple-ui .zoom-tools,
  .text-tools,
  .object-tools,
  .compact-pages,
  .find-tools,
  .zoom-tools {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

/* v161: OCR is the prominent desktop action at the right of the tool row. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  align-self: start !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  width: 100% !important;
  margin-top: 0 !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-row: 2 !important;
  min-height: max-content !important;
  height: auto !important;
}

body.simple-ui .app-topbar,
.app-topbar {
  grid-auto-rows: max-content !important;
}

@media (min-width: 980px) {
  body.simple-ui .tool-palette,
  .tool-palette {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  body.simple-ui .tool,
  .tool {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  body.simple-ui .tool small,
  .tool small {
    font-size: 8px !important;
    max-width: 40px !important;
  }

  body.simple-ui #extractText,
  #extractText {
    order: 999 !important;
    margin-left: auto !important;
    flex: 0 0 232px !important;
    width: 232px !important;
    min-width: 232px !important;
    max-width: 232px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  body.simple-ui #extractText .extract-label,
  #extractText .extract-label,
  body.simple-ui #extractText small,
  #extractText small {
    font-size: 11px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }
}

/* v162: on mobile, thumbnails become a horizontal footer strip. */
@media (max-width: 760px) {
  body.simple-ui .app-shell,
  .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  body.simple-ui .app-topbar,
  .app-topbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .workspace,
  .workspace {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
  }

  body.simple-ui .page-sidebar,
  .page-sidebar {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 174px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(158px, 190px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
    padding: 8px !important;
    border-right: 0 !important;
    border-top: 1px solid #dbe4f0 !important;
    overflow: hidden !important;
  }

  body.simple-ui .page-sidebar-head,
  .page-sidebar-head,
  body.simple-ui .copyright-note,
  .copyright-note {
    display: none !important;
  }

  body.simple-ui .page-nav,
  .page-nav {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
  }

  body.simple-ui .page-tools,
  .page-tools {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
  }

  body.simple-ui .page-thumbs,
  .page-thumbs {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 92px !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 158px !important;
    padding: 0 2px 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
  }

  body.simple-ui .page-thumb,
  .page-thumb {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    min-height: 0 !important;
    height: 136px !important;
    padding: 6px !important;
    gap: 4px !important;
  }

  body.simple-ui .thumb-canvas,
  .thumb-canvas {
    width: 78px !important;
    max-width: 78px !important;
    max-height: 104px !important;
  }

  body.simple-ui .page-thumb span,
  .page-thumb span {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
}

/* v171: OCR button is a padded centered CTA, not a square icon tile. */
body.simple-ui #extractText,
#extractText {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 10px !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 12px 18px !important;
  overflow: visible !important;
  text-align: center !important;
}

body.simple-ui #extractText b,
#extractText b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 22px !important;
  min-height: 22px !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 22px !important;
  transform: none !important;
}

body.simple-ui #extractText small,
#extractText small,
body.simple-ui #extractText .extract-label,
#extractText .extract-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

@media (min-width: 980px) {
  body.simple-ui #extractText,
  #extractText {
    flex: 0 0 292px !important;
    width: 292px !important;
    min-width: 292px !important;
    max-width: 292px !important;
  }
}

/* v174-final: keep every toolbar/status group arranged as rows, never columns. */
body.simple-ui .tool-palette,
.tool-palette,
body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
body.simple-ui .zoom-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools,
.zoom-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  align-content: flex-start !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

body.simple-ui .statusbar,
.statusbar,
body.simple-ui .context-panel,
.context-panel {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}

body.simple-ui #hintText,
#hintText,
body.simple-ui .context-panel span,
.context-panel span {
  flex: 1 1 260px !important;
  min-width: 0 !important;
}

body.simple-ui .bottom-zoom,
.bottom-zoom {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

/* v175: final anti-overlap pass for tool rows and hover bubbles. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content max-content minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 12px 10px !important;
  overflow: visible !important;
  padding-bottom: 12px !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  margin-left: 8px !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  position: relative !important;
  z-index: 40 !important;
  overflow: visible !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
.text-tools,
.object-tools,
.compact-pages {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  position: relative !important;
  z-index: 30 !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  position: relative !important;
  z-index: 20 !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

body.simple-ui .tool::after,
.tool::after {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  z-index: 50000 !important;
  max-width: 240px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .24) !important;
}

/* v176: max two visible control rows: tools row + context row. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  gap: 10px 12px !important;
  overflow: visible !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  margin-left: 0 !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 8px !important;
  z-index: 60 !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 8px !important;
  z-index: 50 !important;
}

body.simple-ui .tool,
.tool {
  flex: 0 0 auto !important;
}

body.simple-ui #extractText,
#extractText {
  flex: 0 0 292px !important;
}

body.simple-ui .tool::after,
.tool::after {
  bottom: auto !important;
  top: calc(100% + 8px) !important;
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand,
  body.simple-ui .menu-bar,
  .menu-bar,
  body.simple-ui .tool-palette,
  .tool-palette,
  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  body.simple-ui .find-tools,
  .text-tools,
  .object-tools,
  .compact-pages,
  .find-tools {
    grid-column: 1 / -1 !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  body.simple-ui .find-tools,
  .text-tools,
  .object-tools,
  .compact-pages,
  .find-tools {
    grid-row: 4 !important;
  }
}

body.simple-ui .toolbar-group,
.toolbar-group,
body.simple-ui .context-panel,
.context-panel,
body.simple-ui .statusbar,
.statusbar {
  overflow: visible !important;
}

@media (max-width: 979px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  .text-tools,
  .object-tools,
  .compact-pages {
    grid-row: 4 !important;
  }

  body.simple-ui .find-tools,
  .find-tools {
    grid-row: 5 !important;
  }
}

/* v174: final row-only layout for top toolbar and bottom bars. */
body.simple-ui .tool-palette,
.tool-palette,
body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
body.simple-ui .zoom-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools,
.zoom-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  align-content: flex-start !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

body.simple-ui .statusbar,
.statusbar,
body.simple-ui .context-panel,
.context-panel {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}

body.simple-ui .statusbar > *,
.statusbar > *,
body.simple-ui .context-panel > *,
.context-panel > * {
  flex: 0 1 auto !important;
}

body.simple-ui #hintText,
#hintText,
body.simple-ui .context-panel span,
.context-panel span {
  flex: 1 1 260px !important;
  min-width: 0 !important;
}

body.simple-ui .bottom-zoom,
.bottom-zoom {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

body.simple-ui .bottom-zoom label,
.bottom-zoom label {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* v173: toolbars and bottom status controls are always horizontal rows. */
body.simple-ui .tool-palette,
.tool-palette,
body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
body.simple-ui .zoom-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools,
.zoom-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  align-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  justify-content: flex-start !important;
}

body.simple-ui .statusbar,
.statusbar,
body.simple-ui .context-panel,
.context-panel {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}

body.simple-ui .statusbar > *,
.statusbar > *,
body.simple-ui .context-panel > *,
.context-panel > * {
  flex: 0 1 auto !important;
}

body.simple-ui #hintText,
#hintText,
body.simple-ui .context-panel span,
.context-panel span {
  flex: 1 1 260px !important;
  min-width: 0 !important;
}

body.simple-ui .bottom-zoom,
.bottom-zoom {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

body.simple-ui .bottom-zoom label,
.bottom-zoom label {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* v164: small screens stack menu, tools, and Find on separate rows. */
@media (max-width: 979px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    align-items: start !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.simple-ui .find-tools,
  .find-tools {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}

/* v165: permanent breathing room between app menu, tool icons, and Find row. */
body.simple-ui .app-topbar,
.app-topbar {
  row-gap: 10px !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  position: relative !important;
  z-index: 30 !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 0 !important;
}

body.simple-ui .find-tools,
.find-tools {
  position: relative !important;
  z-index: 5 !important;
}

/* v168: selected-tool options get their own row so they never cover the main tool icons. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-rows: auto auto auto auto !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  row-gap: 10px !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-row: 2 !important;
  align-self: start !important;
  min-height: max-content !important;
  height: auto !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
.text-tools,
.object-tools,
.compact-pages {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: max-content !important;
  height: auto !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: max-content !important;
  height: auto !important;
}

body.simple-ui .object-tools label,
.object-tools label {
  flex: 0 1 auto !important;
}

/* v169: keep the OCR action as one clear top-right button label. */
body.simple-ui #extractText,
#extractText {
  white-space: nowrap !important;
  gap: 8px !important;
}

body.simple-ui #extractText small,
#extractText small,
body.simple-ui #extractText .extract-label,
#extractText .extract-label {
  display: inline-flex !important;
  align-items: center !important;
  max-width: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

@media (min-width: 980px) {
  body.simple-ui #extractText,
  #extractText {
    flex-basis: 260px !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }
}

@media (max-width: 760px) {
  body.simple-ui #extractText,
  #extractText {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
}

/* v170: final header row map. Menu and tool icons never share the same row. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content max-content minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  align-items: start !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  margin-left: 8px !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: 0 !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
.text-tools,
.object-tools,
.compact-pages {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
}

@media (max-width: 979px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  .text-tools,
  .object-tools,
  .compact-pages {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  body.simple-ui .find-tools,
  .find-tools {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }
}

/* v166: mobile thumbnail footer stays visible and is not clipped by the bottom edge. */
@media (max-width: 760px) {
  body.simple-ui .app-shell,
  .app-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    grid-template-rows: auto minmax(0, 1fr) max-content !important;
    overflow: hidden !important;
  }

  body.demo-shell.simple-ui .app-shell,
  body.demo-shell .app-shell {
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
  }

  body.simple-ui .workspace,
  .workspace,
  body.simple-ui .canvas-wrap,
  .canvas-wrap {
    min-height: 0 !important;
  }

  body.simple-ui .page-sidebar,
  .page-sidebar {
    height: 190px !important;
    max-height: 190px !important;
    padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #f8fafc !important;
    box-shadow: 0 -12px 24px rgba(15, 23, 42, .10) !important;
  }

  body.simple-ui .page-thumbs,
  .page-thumbs {
    max-height: 166px !important;
    padding-bottom: 10px !important;
  }

  body.simple-ui .page-thumb,
  .page-thumb {
    height: 144px !important;
  }
}

/* v172: final OCR CTA alignment. This stays last so no icon-tile rule can override it. */
body.simple-ui #extractText,
#extractText {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 10px !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 14px 20px !important;
  overflow: visible !important;
  text-align: center !important;
  line-height: 1 !important;
}

body.simple-ui #extractText b,
#extractText b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 22px !important;
  min-height: 22px !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 22px !important;
}

body.simple-ui #extractText small,
#extractText small,
body.simple-ui #extractText .extract-label,
#extractText .extract-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

@media (min-width: 980px) {
  body.simple-ui #extractText,
  #extractText {
    flex: 0 0 292px !important;
    width: 292px !important;
    min-width: 292px !important;
    max-width: 292px !important;
  }
}

/* v174-final: keep every toolbar/status group arranged as rows, never columns. */
body.simple-ui .tool-palette,
.tool-palette,
body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
body.simple-ui .zoom-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools,
.zoom-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  align-content: flex-start !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

body.simple-ui .statusbar,
.statusbar,
body.simple-ui .context-panel,
.context-panel {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}

body.simple-ui #hintText,
#hintText,
body.simple-ui .context-panel span,
.context-panel span {
  flex: 1 1 260px !important;
  min-width: 0 !important;
}

body.simple-ui .bottom-zoom,
.bottom-zoom {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

/* v175-final: row separation and visible hover bubbles. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content max-content minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 12px 10px !important;
  overflow: visible !important;
  padding-bottom: 12px !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  position: relative !important;
  z-index: 40 !important;
  overflow: visible !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
.text-tools,
.object-tools,
.compact-pages {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  position: relative !important;
  z-index: 30 !important;
  overflow: visible !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  position: relative !important;
  z-index: 20 !important;
  overflow: visible !important;
}

body.simple-ui .tool::after,
.tool::after {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  z-index: 50000 !important;
  max-width: 240px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .24) !important;
}

/* v176-final: maximum two control rows below the app menu. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  grid-auto-rows: max-content !important;
  gap: 10px 12px !important;
  overflow: visible !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  margin-left: 0 !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 8px !important;
  z-index: 60 !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
body.simple-ui .find-tools,
.text-tools,
.object-tools,
.compact-pages,
.find-tools {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 8px !important;
  z-index: 50 !important;
}

body.simple-ui .tool,
.tool,
body.simple-ui #extractText,
#extractText {
  flex-shrink: 0 !important;
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  body.simple-ui .find-tools,
  .text-tools,
  .object-tools,
  .compact-pages,
  .find-tools {
    grid-row: 4 !important;
  }
}

/* v177-final: context controls left, Find right, same row. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) minmax(220px, 340px) !important;
  grid-template-rows: auto auto auto !important;
  grid-auto-rows: max-content !important;
  gap: 10px 12px !important;
  overflow: visible !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
body.simple-ui .compact-pages,
.text-tools,
.object-tools,
.compact-pages {
  grid-column: 1 / 3 !important;
  grid-row: 3 !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 3 !important;
  grid-row: 3 !important;
  min-width: 220px !important;
  justify-self: stretch !important;
}

body.simple-ui .find-tools input[type="search"],
.find-tools input[type="search"] {
  flex: 1 1 120px !important;
  min-width: 92px !important;
}

@media (max-width: 980px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  body.simple-ui .compact-pages,
  body.simple-ui .find-tools,
  .text-tools,
  .object-tools,
  .compact-pages,
  .find-tools {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}

/* v178-final: responsive tools wrap, context and Find stay visible in columns. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) minmax(180px, 250px) minmax(220px, 330px) !important;
  grid-template-rows: auto auto auto !important;
  grid-auto-rows: max-content !important;
  gap: 10px 10px !important;
  overflow: visible !important;
  align-items: start !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  z-index: 80 !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
.text-tools,
.object-tools {
  grid-column: 1 / 3 !important;
  grid-row: 3 !important;
  overflow: visible !important;
  z-index: 70 !important;
}

body.simple-ui .compact-pages,
.compact-pages {
  grid-column: 3 !important;
  grid-row: 3 !important;
  overflow: visible !important;
  z-index: 65 !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 4 !important;
  grid-row: 3 !important;
  overflow: visible !important;
  z-index: 60 !important;
}

body.simple-ui .tool::after,
.tool::after {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  z-index: 50000 !important;
}

@media (max-width: 980px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  .text-tools,
  .object-tools {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  body.simple-ui .compact-pages,
  .compact-pages,
  body.simple-ui .find-tools,
  .find-tools {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
}

/* v179-bottom: winning rule for font menu and visible File/Import/Edit dropdowns. */
body.simple-ui #fontFamily,
#fontFamily {
  min-height: 32px !important;
  height: 32px !important;
  min-width: 92px !important;
  max-width: 120px !important;
  padding: 0 8px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-weight: 850 !important;
}

body.simple-ui .object-opacity-control,
.object-opacity-control {
  display: none !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  overflow: visible !important;
  flex-wrap: wrap !important;
  z-index: 90000 !important;
}

body.simple-ui .file-menu,
.file-menu {
  z-index: 91000 !important;
}

body.simple-ui .file-menu[open],
.file-menu[open] {
  z-index: 92000 !important;
}

body.simple-ui .file-menu-popover,
.file-menu-popover {
  z-index: 93000 !important;
}

/* v180-bottom: final responsive context rows, pinned after older rules. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) minmax(210px, 320px) !important;
  grid-template-rows: auto auto auto auto !important;
  grid-auto-rows: max-content !important;
  gap: 10px 10px !important;
  align-items: start !important;
  overflow: visible !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
  overflow: visible !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  z-index: 80 !important;
}

body.simple-ui .text-tools,
body.simple-ui .object-tools,
.text-tools,
.object-tools {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  z-index: 70 !important;
}

body.simple-ui .compact-pages,
.compact-pages {
  grid-column: 1 / 3 !important;
  grid-row: 4 !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  z-index: 65 !important;
}

body.simple-ui .find-tools,
.find-tools {
  grid-column: 3 !important;
  grid-row: 4 !important;
  flex-wrap: wrap !important;
  min-width: 210px !important;
  overflow: visible !important;
  z-index: 60 !important;
}

@media (max-width: 1100px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
  }

  body.simple-ui .compact-pages,
  .compact-pages {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  body.simple-ui .find-tools,
  .find-tools {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.simple-ui .tool-palette,
  .tool-palette {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.simple-ui .text-tools,
  body.simple-ui .object-tools,
  .text-tools,
  .object-tools {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  body.simple-ui .compact-pages,
  .compact-pages {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }

  body.simple-ui .find-tools,
  .find-tools {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
  }
}

/* v181-final: winning controls style. */
body.simple-ui .utility-tool,
.utility-tool {
  background: #f8fafc !important;
  color: #1d4ed8 !important;
  border-color: #c9d7ef !important;
}

body.simple-ui .utility-tool:disabled,
.utility-tool:disabled {
  color: #94a3b8 !important;
  background: #f1f5f9 !important;
}

body.simple-ui #textCase,
body.simple-ui #lineHeight,
body.simple-ui #fontFamily,
#textCase,
#lineHeight,
#fontFamily {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-weight: 850 !important;
}

body.simple-ui #textCase,
#textCase {
  min-width: 82px !important;
}

body.simple-ui #lineHeight,
#lineHeight {
  min-width: 92px !important;
}

body.simple-ui .object-tools label[title="Object color"],
.object-tools label[title="Object color"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-weight: 850 !important;
}

body.simple-ui #objectColor,
#objectColor {
  width: 30px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* v182-final: animated border on the demo Buy button. */
body.demo-shell .demo-buy-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  box-shadow: 0 12px 30px rgba(17, 103, 232, .26), 0 0 0 1px rgba(17, 103, 232, .14) !important;
}

body.demo-shell .demo-buy-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: -2 !important;
  border-radius: inherit !important;
  background: conic-gradient(from var(--buy-ring-angle, 0deg), #93c5fd, #ffffff, #22c55e, #1167e8, #93c5fd) !important;
  animation: buyRingSpin 2.8s linear infinite !important;
}

body.demo-shell .demo-buy-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: -1 !important;
  border-radius: calc(999px - 2px) !important;
  background: linear-gradient(180deg, #1d7cff, #0b55d4) !important;
}

body.demo-shell .demo-buy-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 40px rgba(17, 103, 232, .34), 0 0 0 1px rgba(17, 103, 232, .2) !important;
}

@property --buy-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes buyRingSpin {
  to {
    --buy-ring-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.demo-shell .demo-buy-button::before {
    animation: none !important;
  }
}

/* v183-bottom: compact icon text context controls and wider font menu. */
body.simple-ui #fontFamily,
#fontFamily {
  min-width: 154px !important;
  max-width: 190px !important;
}

body.simple-ui #textCase,
body.simple-ui #lineHeight,
#textCase,
#lineHeight {
  min-width: 104px !important;
}

body.simple-ui .text-tools .format-icon,
.text-tools .format-icon {
  display: inline-grid !important;
  grid-template-rows: 18px 12px !important;
  place-items: center !important;
  gap: 1px !important;
  min-width: 56px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 3px 8px !important;
  line-height: 1 !important;
}

body.simple-ui .text-tools .format-icon b,
.text-tools .format-icon b {
  display: block !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

body.simple-ui .text-tools .format-icon small,
.text-tools .format-icon small {
  display: block !important;
  overflow: hidden !important;
  max-width: 50px !important;
  color: inherit !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.simple-ui .text-tools select,
.text-tools select {
  cursor: pointer !important;
}

/* v184-bottom: combine rows 2-4 into one responsive control band. */
body.simple-ui .app-topbar,
.app-topbar {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

body.simple-ui .control-band,
.control-band {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  min-width: 0 !important;
  z-index: 70 !important;
}

body.simple-ui .control-band > .toolbar-group,
.control-band > .toolbar-group {
  grid-column: auto !important;
  grid-row: auto !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.simple-ui .control-band > .tool-palette,
.control-band > .tool-palette {
  flex: 1 1 680px !important;
  order: 1 !important;
}

body.simple-ui .control-band > .text-tools,
body.simple-ui .control-band > .object-tools,
.control-band > .text-tools,
.control-band > .object-tools {
  flex: 1 1 520px !important;
  order: 2 !important;
}

body.simple-ui .control-band > .compact-pages,
.control-band > .compact-pages {
  flex: 0 1 360px !important;
  order: 3 !important;
}

body.simple-ui .control-band > .find-tools,
.control-band > .find-tools {
  flex: 1 1 260px !important;
  order: 4 !important;
  min-width: 220px !important;
}

@media (min-width: 1280px) {
  body.simple-ui .control-band > .tool-palette,
  .control-band > .tool-palette {
    flex-basis: 100% !important;
  }

  body.simple-ui .control-band > .text-tools,
  body.simple-ui .control-band > .object-tools,
  .control-band > .text-tools,
  .control-band > .object-tools {
    flex: 2 1 600px !important;
  }
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand,
  body.simple-ui .menu-bar,
  .menu-bar,
  body.simple-ui .control-band,
  .control-band {
    grid-column: 1 / -1 !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-row: 2 !important;
  }

  body.simple-ui .control-band,
  .control-band {
    grid-row: 3 !important;
  }

  body.simple-ui .control-band > .toolbar-group,
  .control-band > .toolbar-group {
    flex-basis: 100% !important;
  }
}

/* v185-bottom: context-only submenus, font previews, compact tool icons. */
body.simple-ui .control-band > .text-tools,
body.simple-ui .control-band > .object-tools,
.control-band > .text-tools,
.control-band > .object-tools {
  display: none !important;
}

body[data-context="text"].simple-ui .control-band > .text-tools,
body[data-context="paragraph"].simple-ui .control-band > .text-tools,
body[data-context="note"].simple-ui .control-band > .text-tools,
body[data-context="callout"].simple-ui .control-band > .text-tools,
body[data-context="signature"].simple-ui .control-band > .text-tools,
body[data-context="text"] .control-band > .text-tools,
body[data-context="paragraph"] .control-band > .text-tools,
body[data-context="note"] .control-band > .text-tools,
body[data-context="callout"] .control-band > .text-tools,
body[data-context="signature"] .control-band > .text-tools,
body[data-context="object"].simple-ui .control-band > .object-tools,
body[data-context="object"] .control-band > .object-tools {
  display: flex !important;
}

body[data-context="compact"].simple-ui #contextPanel,
body[data-context="compact"] #contextPanel {
  display: none !important;
}

body:not([data-context="compact"]).simple-ui #contextPanel,
body:not([data-context="compact"]) #contextPanel {
  display: flex !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  gap: 4px !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool {
  min-width: 48px !important;
  width: 52px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 4px 5px !important;
  border-radius: 10px !important;
}

body.simple-ui .tool-palette .tool b,
.tool-palette .tool b {
  font-size: 18px !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette .tool small,
.tool-palette .tool small {
  max-width: 44px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 1 1 230px !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 360px !important;
}

body.simple-ui .font-preview,
.font-preview {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 132px !important;
  max-width: 180px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid #d7e1ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

#fontFamily option[value="inter"] { font-family: Inter, system-ui, sans-serif; }
#fontFamily option[value="roboto"] { font-family: Roboto, Arial, sans-serif; }
#fontFamily option[value="openSans"] { font-family: "Open Sans", Arial, sans-serif; }
#fontFamily option[value="lato"] { font-family: Lato, Calibri, Arial, sans-serif; }
#fontFamily option[value="montserrat"] { font-family: Montserrat, Avenir, Arial, sans-serif; font-weight: 800; }
#fontFamily option[value="poppins"] { font-family: Poppins, Arial, sans-serif; font-weight: 800; }
#fontFamily option[value="sourceSans"] { font-family: "Source Sans 3", Arial, sans-serif; }
#fontFamily option[value="sans"] { font-family: Helvetica, Arial, sans-serif; }
#fontFamily option[value="merriweather"] { font-family: Merriweather, Georgia, serif; font-weight: 800; }
#fontFamily option[value="lora"] { font-family: Lora, Georgia, serif; }
#fontFamily option[value="playfair"] { font-family: "Playfair Display", Georgia, serif; font-weight: 800; }
#fontFamily option[value="serif"] { font-family: Georgia, "Times New Roman", serif; }
#fontFamily option[value="robotoMono"] { font-family: "Roboto Mono", "Courier New", monospace; }
#fontFamily option[value="mono"] { font-family: "Courier New", monospace; }
#fontFamily option[value="cursive"] { font-family: "Brush Script MT", "Snell Roundhand", cursive; }

@media (max-width: 760px) {
  body.simple-ui .tool-palette .tool,
  .tool-palette .tool {
    flex: 1 1 48px !important;
  }

  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex-basis: 100% !important;
    max-width: none !important;
  }
}

/* v185-font-fallbacks: local private previews for Google-style font names. */
#fontFamily option[value="inter"] { font-family: Inter, "SF Pro Text", system-ui, sans-serif; }
#fontFamily option[value="roboto"] { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
#fontFamily option[value="openSans"] { font-family: "Open Sans", Verdana, Arial, sans-serif; }
#fontFamily option[value="lato"] { font-family: Lato, "Avenir Next", Avenir, Calibri, Arial, sans-serif; }
#fontFamily option[value="montserrat"] { font-family: Montserrat, Futura, "Gill Sans", Avenir, Arial, sans-serif; font-weight: 800; }
#fontFamily option[value="poppins"] { font-family: Poppins, "Trebuchet MS", Arial, sans-serif; font-weight: 800; }
#fontFamily option[value="sourceSans"] { font-family: "Source Sans 3", "Lucida Grande", Arial, sans-serif; }
#fontFamily option[value="lora"] { font-family: Lora, Baskerville, Georgia, serif; }
#fontFamily option[value="playfair"] { font-family: "Playfair Display", Didot, "Bodoni 72", Georgia, serif; font-weight: 800; }
#fontFamily option[value="robotoMono"] { font-family: "Roboto Mono", "SF Mono", "Courier New", monospace; }

/* v187: Find is a compact magnifying-glass tool with an expandable popover. */
body.simple-ui .control-band > .find-tools,
.control-band > .find-tools {
  position: relative !important;
  flex: 0 0 auto !important;
  min-width: 52px !important;
  width: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  order: 5 !important;
}

body.simple-ui .find-toggle,
.find-toggle {
  width: 52px !important;
  min-width: 52px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 4px 5px !important;
  border-radius: 10px !important;
}

body.simple-ui .find-toggle b,
.find-toggle b {
  font-size: 20px !important;
}

body.simple-ui .find-popover,
.find-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 95000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: min(360px, calc(100vw - 32px)) !important;
  padding: 8px !important;
  border: 1px solid #d9e5f5 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18) !important;
}

body.simple-ui .find-tools.is-collapsed .find-popover,
.find-tools.is-collapsed .find-popover {
  display: none !important;
}

body.simple-ui .find-popover input[type="search"],
.find-popover input[type="search"] {
  flex: 1 1 auto !important;
  min-width: 140px !important;
  height: 34px !important;
}

body.simple-ui .find-popover button,
.find-popover button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

body.simple-ui #findCount,
#findCount {
  min-width: 34px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

/* v188: Search lives in the main tool row; preview uses available space. */
body.simple-ui .tool-palette > .find-tools,
.tool-palette > .find-tools {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  min-width: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  width: 52px !important;
  min-width: 52px !important;
}

body.simple-ui .workspace,
.workspace {
  min-height: 0 !important;
}

body.simple-ui .canvas-wrap,
.canvas-wrap {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
}

body.simple-ui .page-stage,
.page-stage {
  max-width: none !important;
  transform-origin: top center !important;
}

/* v189: Search is part of the top icon row; OCR label wraps gracefully. */
body.simple-ui .tool-palette,
.tool-palette {
  align-items: stretch !important;
}

body.simple-ui .tool-palette > .find-tools,
.tool-palette > .find-tools {
  display: inline-flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  position: relative !important;
  display: inline-grid !important;
  grid-template-rows: 20px 12px !important;
  place-items: center !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 1 1 188px !important;
  min-width: 152px !important;
  max-width: 280px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 4px 10px !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

@media (max-width: 860px) {
  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex-basis: 160px !important;
    min-width: 142px !important;
  }
}

/* v190: balanced icon-box padding and vertical centering. */
body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  grid-template-rows: 19px 12px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 3px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 7px 6px 6px !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette .tool b,
.tool-palette .tool b,
body.simple-ui .tool-palette > .find-tools .find-toggle b,
.tool-palette > .find-tools .find-toggle b {
  display: block !important;
  transform: translateY(1px) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette .tool small,
.tool-palette .tool small,
body.simple-ui .tool-palette > .find-tools .find-toggle small,
.tool-palette > .find-tools .find-toggle small {
  display: block !important;
  align-self: end !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette > .find-tools,
.tool-palette > .find-tools {
  height: 48px !important;
  min-height: 48px !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  height: 48px !important;
  min-height: 48px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

body.simple-ui .tool-palette .make-editable-tool b,
.tool-palette .make-editable-tool b {
  transform: translateY(0) !important;
}

/* v191: force OCR button label into two clean rows. */
body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small {
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 1px !important;
  place-items: center !important;
  white-space: normal !important;
}

body.simple-ui .tool-palette .make-editable-tool small span,
.tool-palette .make-editable-tool small span {
  display: block !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* v193: equal tool icon sizing and visible app version beside the logo. */
body.simple-ui .brand > div,
.brand > div {
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  min-width: 0 !important;
}

body.simple-ui .brand h1,
.brand h1 {
  min-width: 0 !important;
}

body.simple-ui .brand .app-version,
.brand .app-version {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 0 7px !important;
  border: 1px solid #cfe0f6 !important;
  border-radius: 999px !important;
  background: #eef6ff !important;
  color: #1d4ed8 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.simple-ui .brand #documentTitle,
.brand #documentTitle {
  grid-column: 1 / -1 !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools,
.tool-palette > .find-tools,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 52px !important;
  min-height: 52px !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  display: grid !important;
  grid-template-rows: 24px 13px !important;
  gap: 3px !important;
  align-content: center !important;
  justify-items: center !important;
  padding: 7px 5px 6px !important;
}

body.simple-ui .tool-palette .tool b,
.tool-palette .tool b,
body.simple-ui .tool-palette > .find-tools .find-toggle b,
.tool-palette > .find-tools .find-toggle b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  overflow: hidden !important;
  transform: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-align: center !important;
}

body.simple-ui .tool-palette .tool[data-tool="stamp"] b,
.tool-palette .tool[data-tool="stamp"] b,
body.simple-ui .tool-palette .tool[data-tool="callout"] b,
.tool-palette .tool[data-tool="callout"] b {
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

body.simple-ui .tool-palette .tool small,
.tool-palette .tool small,
body.simple-ui .tool-palette > .find-tools .find-toggle small,
.tool-palette > .find-tools .find-toggle small {
  width: 48px !important;
  max-width: 48px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 1 1 180px !important;
  width: auto !important;
  min-width: 148px !important;
  max-width: 260px !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small {
  display: block !important;
  width: auto !important;
  max-width: 180px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* v194: tool rows and context menus always flow as rows, never side-by-side columns. */
body.simple-ui .control-band,
.control-band {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.simple-ui .control-band > .toolbar-group,
.control-band > .toolbar-group,
body.simple-ui .control-band > .tool-palette,
.control-band > .tool-palette,
body.simple-ui .control-band > .text-tools,
body.simple-ui .control-band > .object-tools,
.control-band > .text-tools,
.control-band > .object-tools {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow: visible !important;
}

body.simple-ui .tool-palette,
.tool-palette,
body.simple-ui .text-tools,
body.simple-ui .object-tools,
.text-tools,
.object-tools,
body.simple-ui #contextPanel,
#contextPanel,
body.simple-ui .context-panel,
.context-panel {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

body[data-context="text"].simple-ui .control-band > .text-tools,
body[data-context="note"].simple-ui .control-band > .text-tools,
body[data-context="callout"].simple-ui .control-band > .text-tools,
body[data-context="signature"].simple-ui .control-band > .text-tools,
body[data-context="object"].simple-ui .control-band > .object-tools,
body[data-context="text"] .control-band > .text-tools,
body[data-context="note"] .control-band > .text-tools,
body[data-context="callout"] .control-band > .text-tools,
body[data-context="signature"] .control-band > .text-tools,
body[data-context="object"] .control-band > .object-tools {
  display: flex !important;
}

body.simple-ui .tool-palette > *,
.tool-palette > *,
body.simple-ui .text-tools > *,
.text-tools > *,
body.simple-ui .object-tools > *,
.object-tools > *,
body.simple-ui #contextPanel > *,
#contextPanel > * {
  flex-direction: row !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools,
.tool-palette > .find-tools,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 1 1 180px !important;
}

/* v195: context controls only appear for the selected tool; OCR is a compact top tool. */
body.simple-ui .control-band > .text-tools,
body.simple-ui .control-band > .object-tools,
.control-band > .text-tools,
.control-band > .object-tools {
  display: none !important;
}

body[data-context="text"].simple-ui .control-band > .text-tools,
body[data-context="note"].simple-ui .control-band > .text-tools,
body[data-context="callout"].simple-ui .control-band > .text-tools,
body[data-context="signature"].simple-ui .control-band > .text-tools,
body[data-context="text"] .control-band > .text-tools,
body[data-context="note"] .control-band > .text-tools,
body[data-context="callout"] .control-band > .text-tools,
body[data-context="signature"] .control-band > .text-tools {
  display: flex !important;
}

body[data-context="object"].simple-ui .control-band > .object-tools,
body[data-context="object"] .control-band > .object-tools {
  display: flex !important;
}

body[data-context="compact"].simple-ui #contextPanel,
body[data-context="compact"] #contextPanel {
  display: none !important;
}

body:not([data-context="compact"]).simple-ui #contextPanel,
body:not([data-context="compact"]) #contextPanel {
  display: flex !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 0 0 86px !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 7px 5px 6px !important;
}

body.simple-ui .tool-palette .make-editable-tool b,
.tool-palette .make-editable-tool b {
  width: 24px !important;
  height: 24px !important;
  font-size: 18px !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small {
  max-width: 76px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* v196: slimmer OCR button and visible hint bubbles for Search/Editable. */
body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 0 0 62px !important;
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  width: 52px !important;
  max-width: 52px !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.simple-ui .tool-palette .find-toggle::after,
.tool-palette .find-toggle::after,
body.simple-ui .tool-palette .make-editable-tool::after,
.tool-palette .make-editable-tool::after {
  max-width: 220px !important;
  white-space: normal !important;
}

/* v197: clearer Search/Sign icons and full Make Page Editable label. */
body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex-basis: 96px !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  width: 86px !important;
  max-width: 86px !important;
  font-size: 9px !important;
}

body.simple-ui .tool-palette .find-toggle b,
.tool-palette .find-toggle b,
body.simple-ui .tool-palette .tool[data-tool="signature"] b,
.tool-palette .tool[data-tool="signature"] b {
  font-size: 22px !important;
}

body.simple-ui .tool-palette .find-toggle b,
.tool-palette .find-toggle b {
  font-weight: 950 !important;
}

/* v198: signature uses pen controls, not text formatting. */
body[data-context="signature"].simple-ui .control-band > .text-tools,
body[data-context="signature"] .control-band > .text-tools {
  display: none !important;
}

body.signature-subtools-visible.simple-ui .control-band > .object-tools,
body.signature-subtools-visible .control-band > .object-tools {
  display: flex !important;
}

body.signature-subtools-visible .object-tools .group-label {
  font-size: 0 !important;
}

body.signature-subtools-visible .object-tools .group-label::after {
  content: "Pen" !important;
  font-size: 11px !important;
}

/* v199: compact desktop toolbar so Make Page Editable fits in the top row. */
body.simple-ui .tool-palette,
.tool-palette {
  gap: 2px !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools,
.tool-palette > .find-tools,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  grid-template-rows: 21px 11px !important;
  gap: 2px !important;
  padding: 6px 3px 5px !important;
  border-radius: 8px !important;
}

body.simple-ui .tool-palette .tool b,
.tool-palette .tool b,
body.simple-ui .tool-palette > .find-tools .find-toggle b,
.tool-palette > .find-tools .find-toggle b {
  width: 21px !important;
  height: 21px !important;
  max-width: 21px !important;
  font-size: 17px !important;
}

body.simple-ui .tool-palette .find-toggle b,
.tool-palette .find-toggle b,
body.simple-ui .tool-palette .tool[data-tool="signature"] b,
.tool-palette .tool[data-tool="signature"] b {
  font-size: 20px !important;
}

body.simple-ui .tool-palette .tool[data-tool="stamp"] b,
.tool-palette .tool[data-tool="stamp"] b,
body.simple-ui .tool-palette .tool[data-tool="callout"] b,
.tool-palette .tool[data-tool="callout"] b {
  font-size: 11px !important;
}

body.simple-ui .tool-palette .tool small,
.tool-palette .tool small,
body.simple-ui .tool-palette > .find-tools .find-toggle small,
.tool-palette > .find-tools .find-toggle small {
  width: 40px !important;
  max-width: 40px !important;
  font-size: 8.5px !important;
}

body.simple-ui .tool-palette .utility-tool,
.tool-palette .utility-tool {
  flex-basis: 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 0 0 88px !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 46px !important;
  min-height: 46px !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  width: 78px !important;
  max-width: 78px !important;
  font-size: 8.5px !important;
}

@media (min-width: 1180px) {
  body.simple-ui .tool-palette,
  .tool-palette {
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 1179px) {
  body.simple-ui .tool-palette,
  .tool-palette {
    flex-wrap: wrap !important;
  }
}

/* v200: larger, easier-to-read labels under compact tool icons. */
body.simple-ui .tool-palette .tool small,
.tool-palette .tool small,
body.simple-ui .tool-palette > .find-tools .find-toggle small,
.tool-palette > .find-tools .find-toggle small {
  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  font-size: 9.5px !important;
  font-weight: 900 !important;
}

/* v201: larger toolbar labels while preserving compact desktop fit. */
body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools,
.tool-palette > .find-tools,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  height: 48px !important;
  min-height: 48px !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  grid-template-rows: 21px 13px !important;
  padding-bottom: 6px !important;
}

body.simple-ui .tool-palette .tool small,
.tool-palette .tool small,
body.simple-ui .tool-palette > .find-tools .find-toggle small,
.tool-palette > .find-tools .find-toggle small,
body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  font-size: 10.5px !important;
  line-height: 1.08 !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  height: 48px !important;
  min-height: 48px !important;
}

/* v202: Make Page Editable fits as a compact two-line button. */
body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  place-items: center !important;
  width: 64px !important;
  max-width: 64px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.simple-ui .tool-palette .make-editable-tool small span,
.tool-palette .make-editable-tool small span,
body.simple-ui .tool-palette .make-editable-tool .extract-label span,
.tool-palette .make-editable-tool .extract-label span {
  display: block !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* v204: harden the editor chrome so tools and context controls never collapse into columns. */
body.simple-ui .app-topbar,
.app-topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 8px 14px !important;
  padding: 10px 14px 8px !important;
  overflow: visible !important;
}

body.simple-ui .brand,
.brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

body.simple-ui .menu-bar,
.menu-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-content: flex-start !important;
  align-items: center !important;
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  gap: 4px !important;
  overflow: visible !important;
}

body.simple-ui .control-band,
.control-band {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.simple-ui .control-band > .toolbar-group,
.control-band > .toolbar-group {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  border-right: 0 !important;
}

body.simple-ui .tool-palette,
.tool-palette {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 6px !important;
  border: 1px solid #d8e4f3 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  overflow: visible !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools,
.tool-palette > .find-tools,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
}

body.simple-ui .tool-palette .tool,
.tool-palette .tool,
body.simple-ui .tool-palette > .find-tools .find-toggle,
.tool-palette > .find-tools .find-toggle {
  display: grid !important;
  grid-template-rows: 25px 15px !important;
  place-items: center !important;
  gap: 3px !important;
  padding: 7px 4px 6px !important;
  border-radius: 10px !important;
}

body.simple-ui .tool-palette .tool b,
.tool-palette .tool b,
body.simple-ui .tool-palette > .find-tools .find-toggle b,
.tool-palette > .find-tools .find-toggle b {
  width: 25px !important;
  height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

body.simple-ui .tool-palette .find-toggle b,
.tool-palette .find-toggle b,
body.simple-ui .tool-palette .tool[data-tool="signature"] b,
.tool-palette .tool[data-tool="signature"] b {
  font-size: 23px !important;
}

body.simple-ui .tool-palette .tool small,
.tool-palette .tool small,
body.simple-ui .tool-palette > .find-tools .find-toggle small,
.tool-palette > .find-tools .find-toggle small {
  width: 48px !important;
  max-width: 48px !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 0 0 118px !important;
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  grid-template-rows: 22px 20px !important;
  border-radius: 12px !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  width: 108px !important;
  max-width: 108px !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  place-items: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.simple-ui .control-band > .text-tools,
body.simple-ui .control-band > .object-tools,
.control-band > .text-tools,
.control-band > .object-tools {
  display: none !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 6px !important;
  border: 1px solid #d8e4f3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
}

body[data-context="text"].simple-ui .control-band > .text-tools,
body[data-context="paragraph"].simple-ui .control-band > .text-tools,
body[data-context="note"].simple-ui .control-band > .text-tools,
body[data-context="callout"].simple-ui .control-band > .text-tools,
body[data-context="signature"].simple-ui .control-band > .text-tools,
body[data-context="text"] .control-band > .text-tools,
body[data-context="paragraph"] .control-band > .text-tools,
body[data-context="note"] .control-band > .text-tools,
body[data-context="callout"] .control-band > .text-tools,
body[data-context="signature"] .control-band > .text-tools,
body[data-context="object"].simple-ui .control-band > .object-tools,
body[data-context="object"] .control-band > .object-tools {
  display: flex !important;
}

body.simple-ui .object-tools label,
.object-tools label {
  min-height: 38px !important;
}

@media (min-width: 980px) {
  body.simple-ui .control-band,
  .control-band {
    flex-direction: column !important;
  }
}

@media (max-width: 760px) {
  body.simple-ui .app-topbar,
  .app-topbar {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }

  body.simple-ui .brand,
  .brand,
  body.simple-ui .menu-bar,
  .menu-bar,
  body.simple-ui .control-band,
  .control-band {
    grid-column: 1 !important;
  }

  body.simple-ui .brand,
  .brand {
    grid-row: 1 !important;
  }

  body.simple-ui .menu-bar,
  .menu-bar {
    grid-row: 2 !important;
  }

  body.simple-ui .control-band,
  .control-band {
    grid-row: 3 !important;
  }

  body.simple-ui .tool-palette .tool,
  .tool-palette .tool,
  body.simple-ui .tool-palette > .find-tools,
  .tool-palette > .find-tools,
  body.simple-ui .tool-palette > .find-tools .find-toggle,
  .tool-palette > .find-tools .find-toggle {
    flex-basis: 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex-basis: 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
  }
}

/* v208: bigger Make Page Editable button + label. */
body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 0 0 190px !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  grid-template-rows: 1fr !important;
  column-gap: 10px !important;
  padding: 8px 14px !important;
  border-radius: 14px !important;
  align-items: center !important;
}
body.simple-ui .tool-palette .make-editable-tool b,
.tool-palette .make-editable-tool b {
  width: 36px !important;
  height: 36px !important;
  font-size: 28px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  width: auto !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: left !important;
}
body.simple-ui .tool-palette .make-editable-tool small span,
.tool-palette .make-editable-tool small span,
body.simple-ui .tool-palette .make-editable-tool .extract-label span,
.tool-palette .make-editable-tool .extract-label span {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}
@media (min-width: 1100px) {
  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex: 0 0 216px !important;
    width: 216px !important;
    min-width: 216px !important;
    max-width: 216px !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool b,
  .tool-palette .make-editable-tool b {
    width: 40px !important;
    height: 40px !important;
    font-size: 32px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool small,
  .tool-palette .make-editable-tool small,
  body.simple-ui .tool-palette .make-editable-tool .extract-label,
  .tool-palette .make-editable-tool .extract-label {
    font-size: 18px !important;
  }
}
@media (min-width: 1400px) {
  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex: 0 0 244px !important;
    width: 244px !important;
    min-width: 244px !important;
    max-width: 244px !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool b,
  .tool-palette .make-editable-tool b {
    width: 44px !important;
    height: 44px !important;
    font-size: 36px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool small,
  .tool-palette .make-editable-tool small,
  body.simple-ui .tool-palette .make-editable-tool .extract-label,
  .tool-palette .make-editable-tool .extract-label {
    font-size: 20px !important;
  }
}

/* v208: global text-size accessibility (bottom-right widget). Uses zoom so px values scale too. */
:root { --ui-text-scale: 1; }
.app-shell { zoom: var(--ui-text-scale); }
.text-scale-control {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #d8e1ee;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  font-family: Inter, "SF Pro Text", system-ui, sans-serif;
  font-size: 14px;
  color: #172033;
  zoom: 1; /* widget itself never scales */
}
.text-scale-btn {
  appearance: none;
  border: none;
  background: #eef2f9;
  color: #1d4ed8;
  font-weight: 800;
  font-size: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.text-scale-btn:hover { background: #dde6f7; }
.text-scale-btn:active { transform: scale(0.94); }
.text-scale-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.text-scale-btn:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
.text-scale-value {
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #334155;
  user-select: none;
}
@media (max-width: 640px) {
  .text-scale-control { right: 10px; bottom: 10px; padding: 4px 6px; }
  .text-scale-btn { width: 30px; height: 30px; font-size: 13px; }
  .text-scale-value { min-width: 40px; font-size: 12px; }
}

/* v207: larger Make Page Editable button with multiline label. */
body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 0 0 168px !important;
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  grid-template-columns: 32px 1fr !important;
  grid-template-rows: 1fr !important;
  column-gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  align-items: center !important;
}

body.simple-ui .tool-palette .make-editable-tool b,
.tool-palette .make-editable-tool b {
  width: 32px !important;
  height: 32px !important;
  font-size: 26px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  width: auto !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-weight: 700 !important;
}

body.simple-ui .tool-palette .make-editable-tool small span,
.tool-palette .make-editable-tool small span,
body.simple-ui .tool-palette .make-editable-tool .extract-label span,
.tool-palette .make-editable-tool .extract-label span {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

@media (max-width: 760px) {
  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex-basis: 156px !important;
    width: 156px !important;
    min-width: 156px !important;
    max-width: 156px !important;
  }
}

/* Roomier label when there's space on the toolbar. */
@media (min-width: 1100px) {
  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex: 0 0 196px !important;
    width: 196px !important;
    min-width: 196px !important;
    max-width: 196px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool b,
  .tool-palette .make-editable-tool b {
    width: 36px !important;
    height: 36px !important;
    font-size: 30px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool small,
  .tool-palette .make-editable-tool small,
  body.simple-ui .tool-palette .make-editable-tool .extract-label,
  .tool-palette .make-editable-tool .extract-label {
    font-size: 15px !important;
  }
}

@media (min-width: 1400px) {
  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex: 0 0 224px !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool b,
  .tool-palette .make-editable-tool b {
    width: 40px !important;
    height: 40px !important;
    font-size: 34px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool small,
  .tool-palette .make-editable-tool small,
  body.simple-ui .tool-palette .make-editable-tool .extract-label,
  .tool-palette .make-editable-tool .extract-label {
    font-size: 17px !important;
  }
}

/* v207: global text-size accessibility control (bottom-right). */
:root {
  --ui-text-scale: 1;
}
html {
  font-size: calc(16px * var(--ui-text-scale));
}
.text-scale-control {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #d8e1ee;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  font-family: Inter, "SF Pro Text", system-ui, sans-serif;
  font-size: 14px;
  color: #172033;
}
.text-scale-btn {
  appearance: none;
  border: none;
  background: #eef2f9;
  color: #1d4ed8;
  font-weight: 700;
  font-size: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.text-scale-btn:hover {
  background: #dde6f7;
}
.text-scale-btn:active {
  transform: scale(0.94);
}
.text-scale-btn:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
.text-scale-value {
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #334155;
  user-select: none;
}
@media (max-width: 640px) {
  .text-scale-control {
    right: 10px;
    bottom: 10px;
    padding: 4px 6px;
  }
  .text-scale-btn { width: 28px; height: 28px; font-size: 13px; }
  .text-scale-value { min-width: 38px; font-size: 12px; }
}

/* v209 FINAL override: bigger blue Make-Page-Editable label, beats earlier cascade. */
body.simple-ui .tool-palette .make-editable-tool,
.tool-palette .make-editable-tool {
  flex: 0 0 210px !important;
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  grid-template-rows: 1fr !important;
  column-gap: 12px !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
  align-items: center !important;
}
body.simple-ui .tool-palette .make-editable-tool b,
.tool-palette .make-editable-tool b {
  width: 40px !important;
  height: 40px !important;
  font-size: 32px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.simple-ui .tool-palette .make-editable-tool small,
.tool-palette .make-editable-tool small,
body.simple-ui .tool-palette .make-editable-tool .extract-label,
.tool-palette .make-editable-tool .extract-label {
  width: auto !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: left !important;
  letter-spacing: 0.01em !important;
}
body.simple-ui .tool-palette .make-editable-tool small span,
.tool-palette .make-editable-tool small span,
body.simple-ui .tool-palette .make-editable-tool .extract-label span,
.tool-palette .make-editable-tool .extract-label span {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}
@media (min-width: 1100px) {
  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool b,
  .tool-palette .make-editable-tool b {
    width: 44px !important;
    height: 44px !important;
    font-size: 36px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool small,
  .tool-palette .make-editable-tool small,
  body.simple-ui .tool-palette .make-editable-tool .extract-label,
  .tool-palette .make-editable-tool .extract-label {
    font-size: 21px !important;
  }
}
@media (min-width: 1400px) {
  body.simple-ui .tool-palette .make-editable-tool,
  .tool-palette .make-editable-tool {
    flex: 0 0 270px !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool b,
  .tool-palette .make-editable-tool b {
    width: 48px !important;
    height: 48px !important;
    font-size: 40px !important;
  }
  body.simple-ui .tool-palette .make-editable-tool small,
  .tool-palette .make-editable-tool small,
  body.simple-ui .tool-palette .make-editable-tool .extract-label,
  .tool-palette .make-editable-tool .extract-label {
    font-size: 24px !important;
  }
}

/* v214: Text sub-tools as a second-row icon palette (matches main toolbar style). */
.toolbar-group.text-presets {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d8e4f3;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
body.show-text-presets .toolbar-group.text-presets {
  display: inline-flex !important;
}
.toolbar-group.text-presets .group-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 4px;
}
.tool.text-preset {
  appearance: none;
  border: 1px solid #d8e4f3 !important;
  background: #ffffff !important;
  color: #172033 !important;
  border-radius: 10px !important;
  padding: 4px 6px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  display: grid !important;
  grid-template-rows: 22px auto !important;
  align-items: center !important;
  justify-items: center !important;
  cursor: pointer;
  font-family: Inter, "SF Pro Text", system-ui, sans-serif;
}
.tool.text-preset b {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1d4ed8 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tool.text-preset small {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
  max-width: 50px !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
}
.tool.text-preset[data-preset="h1"] b { font-size: 21px !important; }
.tool.text-preset[data-preset="h2"] b { font-size: 18px !important; }
.tool.text-preset[data-preset="paragraph"] b { font-size: 21px !important; }
.tool.text-preset[data-preset="quote"] b { font-size: 20px !important; }
.tool.text-preset:hover { background: #f1f5fd !important; border-color: #b8c8e6 !important; }
.tool.text-preset.is-active {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}
.tool.text-preset.is-active b,
.tool.text-preset.is-active small { color: #ffffff !important; }

/* v218: Type buttons are inline inside the FORMAT toolbar group, not a separate row. */
.text-preset-inline {
  display: none;
  align-items: center;
  gap: 3px;
  padding: 2px;
  background: #f1f5fd;
  border: 1px solid #d8e4f3;
  border-radius: 10px;
}
body.show-text-presets .text-preset-inline { display: inline-flex !important; }
.text-preset-inline .text-preset {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #172033;
  border-radius: 8px;
  padding: 4px 6px;
  width: 44px;
  min-width: 44px;
  height: 38px;
  display: grid;
  grid-template-rows: 18px auto;
  align-items: center;
  justify-items: center;
  cursor: pointer;
  font-family: Inter, "SF Pro Text", system-ui, sans-serif;
  transition: background 0.12s ease, color 0.12s ease;
}
.text-preset-inline .text-preset b {
  font-size: 15px;
  font-weight: 800;
  color: #1d4ed8;
  line-height: 1;
}
.text-preset-inline .text-preset small {
  font-size: 9px;
  font-weight: 700;
  color: #475569;
  line-height: 1.05;
  margin-top: 1px;
  letter-spacing: 0.01em;
}
.text-preset-inline .text-preset[data-preset="h1"] b { font-size: 17px; }
.text-preset-inline .text-preset[data-preset="paragraph"] b { font-size: 17px; }
.text-preset-inline .text-preset[data-preset="quote"] b   { font-size: 16px; }
.text-preset-inline .text-preset:hover { background: #ffffff !important; border-color: #b8c8e6 !important; }
.text-preset-inline .text-preset.is-active {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}
.text-preset-inline .text-preset.is-active b,
.text-preset-inline .text-preset.is-active small { color: #ffffff !important; }
.format-divider {
  display: inline-block;
  width: 1px;
  height: 28px;
  background: #d8e4f3;
  margin: 0 6px;
}
body:not(.show-text-presets) .format-divider { display: none; }

/* Move tool: 4-direction move cursor across the whole page area,
   so users can see at a glance which tool is active. */
body[data-context="compact"] .page-stage,
body[data-context="compact"] #overlayLayer,
body[data-context="compact"] .overlay-layer,
body[data-context="compact"] .annotation,
body[data-context="text"] .annotation,
body[data-context="paragraph"] .annotation {
  cursor: move;
}
/* When actively editing text in a box, switch to a text caret. */
body[data-context="text"] .annotation.is-editing,
body[data-context="paragraph"] .annotation.is-editing {
  cursor: text;
}

/* v216: Right-click context menu on annotations (z-order, duplicate, delete). */
.annotation-context-menu {
  position: fixed;
  z-index: 100000;
  min-width: 200px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #d8e4f3;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.22);
  font-family: Inter, "SF Pro Text", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.annotation-context-menu .ctx-item {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #172033;
  border-radius: 8px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.annotation-context-menu .ctx-item:hover:not(:disabled) {
  background: #eef2f9;
}
.annotation-context-menu .ctx-item:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}
.annotation-context-menu .ctx-item.is-danger { color: #b91c1c; }
.annotation-context-menu .ctx-item.is-danger:hover:not(:disabled) {
  background: #fee2e2;
}
.annotation-context-menu .ctx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 16px;
  font-weight: 800;
  color: inherit;
  line-height: 1;
}
.annotation-context-menu .ctx-sep {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 6px;
}

/* v233: Photo-slot annotation (resume template — double-click to upload). */
.annotation.photo-slot {
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(255, 255, 255, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.annotation.photo-slot:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.65);
}
.annotation.photo-slot.is-selected {
  border-color: #1d4ed8 !important;
}
.photo-slot-hint {
  pointer-events: none;
  user-select: none;
  font-family: Inter, "SF Pro Text", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 999px;
  padding: 4px 10px;
}

/* v230: Always-visible delete (×) button on the selected annotation. */
.annotation-delete-btn {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  padding: 0;
  z-index: 5;
  transition: transform 0.12s ease, background 0.12s ease;
}
.annotation-delete-btn:hover {
  background: #dc2626;
  transform: scale(1.08);
}
.annotation-delete-btn:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

/* v229: Nested submenu inside the File menu (Templates). */
.menu-submenu {
  position: relative;
}
.menu-submenu-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.menu-submenu-arrow {
  font-size: 11px;
  color: #64748b;
  margin-left: 8px;
}
.menu-submenu-popover {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 220px;
  margin-left: 4px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #d8e4f3;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  display: none;
  flex-direction: column;
  gap: 1px;
  z-index: 1000;
  max-height: 78vh;
  overflow-y: auto;
}
.menu-submenu.is-open > .menu-submenu-popover,
.menu-submenu:hover > .menu-submenu-popover,
.menu-submenu:focus-within > .menu-submenu-popover {
  display: flex;
}
/* Thumbnail template menu (File > New from Template) */
.tmpl-thumb-menu {
  width: 372px;
  min-width: 372px;
  max-height: 80vh;
  padding: 8px 10px 12px;
}
.tmpl-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 6px;
}
.tmpl-menu-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, box-shadow .12s, transform .08s;
}
.tmpl-menu-card:hover {
  border-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(29, 78, 216, .16);
  transform: translateY(-1px);
}
.tmpl-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 17 / 22;
  overflow: hidden;
  border-radius: 5px;
  background: #f1f5f9;
  border: 1px solid #e6edf6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tmpl-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity .2s;
}
.tmpl-menu-card.is-ready .tmpl-thumb { opacity: 1; }
.tmpl-menu-card.is-ready .tmpl-thumb-spin { display: none; }
.tmpl-thumb-spin {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-top-color: #1d4ed8;
  border-radius: 50%;
  animation: tmplspin .7s linear infinite;
}
@keyframes tmplspin { to { transform: rotate(360deg); } }
.tmpl-thumb-name {
  font-size: 11px;
  line-height: 1.25;
  color: #334155;
  font-weight: 600;
}
.menu-submenu.is-open > .menu-submenu-toggle .menu-submenu-arrow,
.menu-submenu:hover > .menu-submenu-toggle .menu-submenu-arrow {
  color: #1d4ed8;
}
/* On narrow viewports, fall back to stacking the submenu below the parent */
@media (max-width: 560px) {
  .menu-submenu-popover {
    position: static;
    left: auto;
    top: auto;
    margin-left: 0;
    margin-top: 4px;
    box-shadow: none;
    border-radius: 8px;
    background: #f8fafc;
    border-color: #e2e8f0;
  }
}

/* v235: 10x-intuitive welcome screen — 3 large action cards + tips. */
.welcome-shell {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 8px 16px 24px;
  font-family: Inter, "SF Pro Text", system-ui, sans-serif;
}
.welcome-title {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.welcome-sub {
  font-size: 14px;
  color: #475569;
  margin: 0 0 22px;
  line-height: 1.4;
}
.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  text-align: left;
}
.welcome-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 18px 20px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.welcome-card:hover {
  transform: translateY(-2px);
  border-color: #1d4ed8;
  box-shadow: 0 14px 28px rgba(29, 78, 216, 0.12);
}
.welcome-card:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
.welcome-card.welcome-card-primary {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-color: #1d4ed8;
  color: #ffffff;
}
.welcome-card.welcome-card-primary:hover { box-shadow: 0 14px 28px rgba(29, 78, 216, 0.32); }
.welcome-card.welcome-card-primary .welcome-card-sub { color: rgba(255, 255, 255, 0.86); }
.welcome-card-icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 4px;
}
.welcome-card-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.welcome-card-sub {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.4;
  font-weight: 500;
}

.welcome-template-row {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f1f5fd;
  border: 1px solid #d8e4f3;
  border-radius: 14px;
  padding: 10px 12px;
}
.welcome-template-row[hidden] { display: none !important; }
.welcome-template-label {
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.welcome-template-row #templatePicker {
  flex: 1;
  margin: 0;
  max-width: 100%;
}
.welcome-template-row .template-go { margin: 0; }

.welcome-tips {
  margin-top: 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 18px;
  text-align: left;
}
.welcome-tips strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.welcome-tips ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #172033;
  line-height: 1.55;
}
.welcome-tips ul li { margin-bottom: 2px; }
.welcome-tips b { color: #1d4ed8; font-weight: 800; }

/* Mobile compaction */
@media (max-width: 640px) {
  .welcome-title { font-size: 20px; }
  .welcome-card { padding: 14px; }
  .welcome-card-icon { font-size: 28px; }
  .welcome-card-title { font-size: 15px; }
  .welcome-tips { padding: 12px 14px; }
  .welcome-template-row { flex-direction: column; align-items: stretch; }
}

/* v235: First-action hint pulse (callout above the canvas). */
.first-action-hint {
  position: fixed;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  z-index: 9999;
  background: #1d4ed8;
  color: #ffffff;
  font-family: Inter, "SF Pro Text", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(29, 78, 216, 0.32);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fah-pulse 2.2s ease-out infinite;
  cursor: pointer;
}
.first-action-hint::before {
  content: "✨";
  font-size: 16px;
}
.first-action-hint .fah-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  margin-left: 6px;
  padding: 0;
}
.first-action-hint .fah-close:hover { color: #ffffff; }
@keyframes fah-pulse {
  0%   { transform: translate(-50%, 0) scale(1);   box-shadow: 0 12px 28px rgba(29, 78, 216, 0.32); }
  50%  { transform: translate(-50%, -2px) scale(1.02); box-shadow: 0 16px 36px rgba(29, 78, 216, 0.45); }
  100% { transform: translate(-50%, 0) scale(1);   box-shadow: 0 12px 28px rgba(29, 78, 216, 0.32); }
}

/* v228: Template picker (dropdown) on the welcome screen. */
.template-gallery.hidden { display: none !important; }

/* v206: Visual template thumbnail gallery (mini page mockups). */
.template-gallery { margin-top: 22px; width: 100%; justify-self: stretch; }
.template-gallery > h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  width: 100%;
}
.template-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.template-card:hover,
.template-card:focus-visible {
  transform: translateY(-2px);
  border-color: #2563eb;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  outline: none;
}
.template-title { font-size: 13px; font-weight: 600; color: #0f172a; }
.template-sub   { font-size: 11px; color: #64748b; }

/* The thumbnail itself — a portrait "page" we draw simple shapes onto. */
.template-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 150px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .02);
}

/* Generic line/heading building blocks (shared by most templates). */
.t-headline { height: 9px; width: 58%; background: #1f2937; border-radius: 2px; margin-bottom: 3px; }
.t-line     { height: 5px; width: 100%; background: #cbd5e1; border-radius: 2px; }
.t-line.short { width: 55%; }
.t-line.center, .t-headline.center { align-self: center; }
.t-sig { margin-top: auto; height: 8px; width: 42%; background: #94a3b8; border-radius: 2px; }
.t-sig-two {
  margin-top: auto; height: 8px;
  background: linear-gradient(90deg, #94a3b8 0 40%, transparent 40% 60%, #94a3b8 60% 100%);
}
.t-top {
  height: 16px; margin: -10px -10px 6px; background: #1e3a8a;
}
.t-rows {
  flex: 1; border: 1px solid #e2e8f0; border-radius: 2px;
  background: repeating-linear-gradient(#fff 0 6px, #eef2f7 6px 12px);
}
.t-rows-soft {
  flex: 1; border-radius: 2px;
  background: repeating-linear-gradient(#f8fafc 0 6px, #eef2f7 6px 12px);
}
.t-total { align-self: flex-end; width: 46%; height: 9px; background: #1f2937; border-radius: 2px; margin-top: 4px; }
.t-total-blue { background: #2563eb; }
.t-total-dark { background: #0f172a; }
.t-text { height: 5px; width: 86%; background: #cbd5e1; border-radius: 2px; }

/* Resume — dark navy sidebar + content column. */
.resume-thumb { padding-left: 44%; }
.resume-thumb .t-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 36%; background: #16233f; }
.resume-thumb .t-bar { height: 9px; width: 72%; background: #1f2937; border-radius: 2px; }
.resume-thumb .t-bar.short { width: 46%; background: #2563eb; }

/* Invoice — header band, rows, total. */
.invoice-thumb .t-text { width: 50%; }

/* Business card — two stacked cards. */
.card-thumb { justify-content: center; gap: 8px; }
.card-thumb .t-card {
  height: 38%; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px;
  position: relative; overflow: hidden;
}
.card-thumb .t-card-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: #1e3a8a; }
.card-thumb .t-card-body {
  position: absolute; left: 38%; right: 10%; top: 28%; bottom: 28%;
  background: repeating-linear-gradient(#cbd5e1 0 3px, transparent 3px 8px);
}
.card-thumb .t-card-dark { height: 38%; background: #16233f; border-radius: 4px; }

/* Brochure — tri-fold panels. */
.brochure-thumb { flex-direction: row; gap: 4px; }
.brochure-thumb .t-panel { flex: 1; background: #eef2f7; border-radius: 2px; }
.brochure-thumb .t-panel.mid { background: #dbe4f0; }
.brochure-thumb .t-panel.dark { background: #16233f; }

/* Newsletter — masthead + two columns. */
.thumb-grid { flex-flow: row wrap; align-content: flex-start; }
.thumb-grid .t-top { flex-basis: 100%; }
.thumb-grid .t-mast { flex-basis: 100%; height: 12px; background: #1f2937; border-radius: 2px; margin-bottom: 4px; }
.thumb-grid .t-col {
  flex: 1 1 46%; min-height: 54px;
  background: repeating-linear-gradient(#eef2f7 0 5px, transparent 5px 10px);
  border-radius: 2px;
}

/* Quote — soft blue variant. */
.thumb-blue .t-top { background: #2563eb; }

/* Receipt — narrow centered slip. */
.thumb-narrow { padding-left: 22%; padding-right: 22%; }

/* Flyer / poster — bold vibrant block. */
.thumb-vibrant { background: linear-gradient(160deg, #2563eb, #1e3a8a); }
.thumb-vibrant .t-poster { height: 40%; background: rgba(255, 255, 255, .18); border-radius: 4px; }
.thumb-vibrant .t-poster-text { height: 7px; width: 70%; background: rgba(255, 255, 255, .85); border-radius: 2px; }
.thumb-vibrant .t-poster-text.short { width: 45%; }

/* Certificate — ornate border. */
.thumb-cert { align-items: center; justify-content: center; }
.thumb-cert .t-border { position: absolute; inset: 6px; border: 2px double #b08d2f; border-radius: 4px; }
.thumb-cert .t-cert-title { height: 11px; width: 60%; background: #1f2937; border-radius: 2px; z-index: 1; }
.thumb-cert .t-cert-sig { margin-top: 10px; height: 7px; width: 40%; background: #94a3b8; border-radius: 2px; z-index: 1; }

/* Report — KPI strip. */
.generic-thumb .t-kpi { height: 16px; background: linear-gradient(90deg, #2563eb 0 30%, #e2e8f0 30% 33%, #1e3a8a 33% 63%, #e2e8f0 63% 66%, #2563eb 66% 100%); border-radius: 2px; margin: 2px 0; }

/* Agenda — time-row pattern. */
.generic-thumb .t-row-time {
  height: 7px; border-radius: 2px;
  background: linear-gradient(90deg, #2563eb 0 22%, transparent 22% 27%, #cbd5e1 27% 100%);
}
.template-picker {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
}
.template-picker > label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.template-picker-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
#templatePicker {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 1px solid #d8e4f3;
  border-radius: 10px;
  padding: 10px 32px 10px 12px;
  font-family: Inter, "SF Pro Text", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #172033;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 5 7 9 11 5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
#templatePicker:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
  border-color: #1d4ed8;
}
.template-go {
  appearance: none;
  border: none;
  background: #1d4ed8;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.template-go:hover:not(:disabled) { background: #1e40af; }
.template-go:active:not(:disabled) { transform: scale(0.97); }
.template-go:disabled {
  background: #cbd5e1;
  color: #ffffff;
  cursor: not-allowed;
}

/* v228: page sidebar (aside) becomes a vertical stack on mobile so
   page-tools sit ABOVE the thumbnails in a single scrollable row. */
@media (max-width: 760px) {
  body.simple-ui .page-sidebar,
  .page-sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding: 4px !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  /* Order: meta → page-tools → thumbs (skip copyright + nav, already hidden) */
  body.simple-ui .page-sidebar .page-meta,
  .page-sidebar .page-meta { order: 1; }
  body.simple-ui .page-sidebar .page-tools,
  .page-sidebar .page-tools { order: 2; }
  body.simple-ui .page-sidebar .page-thumbs,
  .page-sidebar .page-thumbs { order: 3; }

  /* Force page-tools into a SINGLE horizontal row (icon-only w


/* v206 LAYOUT REPAIR (desktop, >=761px): pin shell regions to explicit grid
   cells so the page fills the center column instead of collapsing under the
   sidebar. Appended last so it overrides the older conflicting grid rules. */
@media (min-width: 761px) {
  body.simple-ui .app-shell,
  .app-shell {
    display: grid !important;
    grid-template-columns: 244px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
  body.simple-ui .app-topbar, .app-topbar { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  body.simple-ui .context-panel, .context-panel { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  body.simple-ui .workflow-ribbon, .workflow-ribbon { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  body.simple-ui .page-sidebar, .page-sidebar { grid-column: 1 !important; grid-row: 4 !important; min-height: 0 !important; }
  body.simple-ui .workspace, .workspace { grid-column: 2 !important; grid-row: 4 !important; min-width: 0 !important; min-height: 0 !important; }
  body.simple-ui .canvas-wrap, .canvas-wrap { min-width: 0 !important; min-height: 0 !important; height: 100% !important; }
}

/* v206 NARROW-WINDOW REPAIR (<=760px): stack with the PAGE as the main area on
   top and the page navigator as a compact horizontal thumbnail strip below. */
@media (max-width: 760px) {
  body.simple-ui .app-shell,
  .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    align-items: stretch !important;
  }
  body.simple-ui .app-topbar, .app-topbar { grid-column: 1 !important; grid-row: 1 !important; }
  body.simple-ui .workflow-ribbon, .workflow-ribbon { grid-column: 1 !important; grid-row: 2 !important; }
  body.simple-ui .workspace, .workspace { grid-column: 1 !important; grid-row: 3 !important; min-width: 0 !important; min-height: 0 !important; }
  body.simple-ui .canvas-wrap, .canvas-wrap { min-width: 0 !important; min-height: 0 !important; height: 100% !important; }
  body.simple-ui .page-sidebar,
  .page-sidebar {
    grid-column: 1 !important;
    grid-row: 4 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-height: 128px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 8px !important;
    border-right: 0 !important;
    border-top: 1px solid #dbe4f0 !important;
  }
  body.simple-ui .page-sidebar .page-sidebar-head, .page-sidebar .page-sidebar-head,
  body.simple-ui .page-sidebar .copyright-note, .page-sidebar .copyright-note { display: none !important; }
  body.simple-ui .page-sidebar .page-nav, .page-sidebar .page-nav,
  body.simple-ui .page-sidebar .page-tools, .page-sidebar .page-tools { flex: 0 0 auto !important; }
  body.simple-ui .page-sidebar .page-thumbs,
  .page-sidebar .page-thumbs {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 8px !important; width: auto !important; overflow-x: auto !important; overflow-y: hidden !important;
  }
  body.simple-ui .page-sidebar .page-thumb,
  .page-sidebar .page-thumb { flex: 0 0 auto !important; width: 84px !important; }
}


/* v206 MAXSPEC LAYOUT OVERRIDE: highest-specificity, last-in-file placement so
   nothing else can win. Direct-child combinators + element+class selectors. */
@media (min-width: 761px) {
  html body.simple-ui div.app-shell {
    display: grid !important;
    grid-template-columns: 248px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
  html body.simple-ui div.app-shell > header.app-topbar { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  html body.simple-ui div.app-shell > section.context-panel { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  html body.simple-ui div.app-shell > section.workflow-ribbon { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  html body.simple-ui div.app-shell > aside.page-sidebar { grid-column: 1 !important; grid-row: 4 !important; min-height: 0 !important; }
  html body.simple-ui div.app-shell > main.workspace { grid-column: 2 !important; grid-row: 4 !important; min-width: 0 !important; min-height: 0 !important; }
  html body.simple-ui div.app-shell > main.workspace .canvas-wrap { min-width: 0 !important; min-height: 0 !important; height: 100% !important; }
}
@media (max-width: 760px) {
  html body.simple-ui div.app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }
  html body.simple-ui div.app-shell > header.app-topbar { grid-column: 1 !important; grid-row: 1 !important; }
  html body.simple-ui div.app-shell > section.workflow-ribbon { grid-column: 1 !important; grid-row: 2 !important; }
  html body.simple-ui div.app-shell > main.workspace { grid-column: 1 !important; grid-row: 3 !important; min-width: 0 !important; }
  html body.simple-ui div.app-shell > aside.page-sidebar {
    grid-column: 1 !important; grid-row: 4 !important;
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 8px !important; width: 100% !important;
    max-height: 128px !important; overflow-x: auto !important; overflow-y: hidden !important;
    padding: 6px 8px !important; border-right: 0 !important; border-top: 1px solid #dbe4f0 !important;
  }
  html body.simple-ui div.app-shell > aside.page-sidebar .page-thumbs { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; overflow-x: auto !important; }
  html body.simple-ui div.app-shell > aside.page-sidebar .page-thumb { flex: 0 0 auto !important; width: 84px !important; }
  html body.simple-ui div.app-shell > aside.page-sidebar .page-sidebar-head,
  html body.simple-ui div.app-shell > aside.page-sidebar .copyright-note { display: none !important; }
}