:root {
  --bg: #dbe5e5;
  --bg-deep: #cbd7d7;
  --panel: rgba(247,248,247,.68);
  --panel-solid: #f3f4f2;
  --paper: #fffdfa;
  --text: #171817;
  --muted: #727673;
  --line: rgba(23,24,23,.10);
  --rail: #0b0c0c;
  --accent: #ff8f3d;
  --shadow: 0 30px 80px rgba(28,37,37,.14), 0 6px 18px rgba(28,37,37,.06);
  --page-width: 816px;
  --page-margin-top: 24mm;
  --page-margin-right: 20mm;
  --page-margin-bottom: 24mm;
  --page-margin-left: 20mm;
  --radius: 26px;
  --control-bg: rgba(255,255,255,.24);
  --hover-bg: rgba(23,24,23,.055);
}
:root[data-theme="dark"] {
  --bg: #161917;
  --bg-deep: #0e100f;
  --panel: rgba(28,31,29,.74);
  --panel-solid: #202320;
  --paper: #242724;
  --text: #f1f0eb;
  --muted: #9ca19c;
  --line: rgba(255,255,255,.085);
  --rail: #050606;
  --shadow: 0 30px 80px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.25);
  --control-bg: rgba(255,255,255,.045);
  --hover-bg: rgba(255,255,255,.075);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { color-scheme: light dark; }
body {
  overflow: hidden;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 17% 15%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 25%),
    radial-gradient(circle at 82% 88%, rgba(255,255,255,.35), transparent 30%),
    linear-gradient(145deg,var(--bg),var(--bg-deep));
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
button svg, .rail-btn svg, .value-icon, .color-tool svg, .focus-exit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 10px) calc(50% - 2px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.app-shell {
  height: 100%;
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  padding: 14px;
  gap: 14px;
  min-height: 0;
}
.rail {
  background: var(--rail);
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 11px 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.brand, .rail-btn {
  border: 0;
  background: transparent;
  color: white;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  transition: background .16s ease, transform .16s ease;
}
.brand {
  margin: 0 0 18px;
  background: white;
  color: #111;
  border-radius: 50%;
  font-weight: 800;
  font-size: 18px;
}
.brand.active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 52%, transparent); }
.brand:hover, .rail-btn:hover, .rail-btn.active { background-color: rgba(255,255,255,.12); }
.brand:hover { background: white; transform: translateY(-1px); }
.rail-nav, .rail-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.rail-bottom { margin-top: auto; }
.workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 58px auto minmax(0,1fr);
  gap: 10px;
}
.glass {
  background: var(--panel);
  backdrop-filter: blur(26px) saturate(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(1.06);
  border: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.035);
}
.topbar, .commandbar { border-radius: 20px; display: flex; align-items: center; }
.topbar { justify-content: space-between; padding: 0 16px; position: relative; z-index: 40; overflow: visible; }
.doc-identity { min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.doc-title {
  border: 0;
  background: transparent;
  outline: none;
  font-weight: 650;
  min-width: 74px;
  max-width: 520px;
  width: 74px;
  padding: 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.save-status, .eyebrow, .tiny { font-size: 11px; color: var(--muted); }
.save-status { flex: 0 0 auto; }
.top-actions { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; position: relative; }
.quiet-btn, .primary-btn, .icon-btn, .prompt-suggestions button {
  border: 0;
  border-radius: 12px;
  background: var(--control-bg);
  padding: 9px 12px;
}
.primary-btn { background: var(--text); color: var(--paper); border-color: transparent; }
.quiet-btn:hover, .prompt-suggestions button:hover { background: var(--hover-bg); }
.view-menu-wrap { position: relative; }
.view-button { display: inline-flex; align-items: center; gap: 6px; }
.view-button svg { width: 14px; height: 14px; }
.view-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 140;
  width: 220px;
  padding: 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,.20);
}
.view-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  text-align: left;
  color: var(--text);
}
.view-menu-item:hover { background: var(--hover-bg); }
.view-menu-item svg { width: 16px; height: 16px; }
.menu-state { font-size: 10px; color: var(--muted); }
.view-menu-item[aria-checked="true"] .menu-state { color: var(--text); }

.commandbar {
  position: relative;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px 7px;
  overflow-x: auto;
  overflow-y: visible;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 13%, transparent) transparent;
}
.commandbar::-webkit-scrollbar { height: 4px; }
.commandbar::-webkit-scrollbar-track { background: transparent; }
.commandbar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 99px; }
.toolbar-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 0 8px;
}
.toolbar-group:first-child { padding-left: 0; }
.toolbar-group + .toolbar-group::before,
.ai-trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: color-mix(in srgb, var(--text) 11%, transparent);
}
.segmented { gap: 1px; }
.cmd {
  position: relative;
  border: 0;
  border-radius: 8px;
  min-width: 34px;
  min-height: 34px;
  padding: 7px 8px;
  background: transparent;
  white-space: nowrap;
  color: var(--text);
  display: inline-grid;
  place-items: center;
  transition: background .14s ease;
}
.cmd:hover { background: var(--hover-bg); }
.cmd.active { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.icon-only { width: 34px; padding: 7px; }
.align-group .cmd svg { width: 19px; height: 19px; stroke-width: 1.9; }
.ai-trigger {
  margin-left: auto;
  padding: 7px 10px 7px 18px;
  min-width: max-content;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.ai-trigger:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.select {
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  min-height: 34px;
  outline: none;
  padding: 6px 24px 6px 8px;
}
.select:hover, .select:focus { background-color: var(--hover-bg); }
.style-select { width: auto; min-width: 0; }
.font-select { width: auto; min-width: 0; max-width: 180px; }
.value-control, .select-control {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 8px;
  padding-left: 6px;
  background: transparent;
}
.value-control:hover, .select-control:hover { background: var(--hover-bg); }
.value-icon { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.value-control input {
  width: 42px;
  border: 0;
  outline: none;
  background: transparent;
  padding: 4px 2px;
  font-variant-numeric: tabular-nums;
}
.value-control input::-webkit-outer-spin-button,
.value-control input::-webkit-inner-spin-button { opacity: .3; }
.line-height-select { width: 63px; min-width: 63px; padding-left: 3px; padding-right: 20px; }
.color-group { gap: 1px; }
.color-tool {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
}
.color-tool:hover { background: var(--hover-bg); }
.text-color-icon { font-weight: 700; font-size: 16px; transform: translateY(-2px); }
.color-tool svg { width: 18px; height: 18px; transform: translateY(-2px); }
.color-underline {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  height: 3px;
  border-radius: 99px;
  background: var(--swatch, var(--text));
}
.color-tool input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.popup-anchor { position: relative; }
.mini-popover {
  position: fixed;
  z-index: 80;
  top: calc(100% + 10px);
  right: 0;
  width: 228px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(22px);
}
.mini-popover[hidden] { display: none !important; }
.popover-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mini-popover label {
  display: grid;
  grid-template-columns: 1fr 74px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin: 6px 0;
}
.mini-popover input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 7px;
  background: var(--control-bg);
  outline: none;
}
.popover-reset {
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  padding: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}
.popover-reset:hover { background: var(--hover-bg); color: var(--text); }
.panel { display: none; min-height: 0; overflow: hidden; }
.active-panel { display: flex; min-height: 0; }
.stage {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px 20px 70px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 16%, transparent) transparent;
}
.stage::-webkit-scrollbar { width: 8px; height: 8px; }
.stage::-webkit-scrollbar-track { background: transparent; }
.stage::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 15%, transparent); border-radius: 99px; }
.paper-shell {
  width: min(calc(var(--page-width) + 34px), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  grid-template-rows: 26px auto;
  gap: 6px 6px;
  align-items: start;
}
.ruler-corner { grid-column: 1; grid-row: 1; }
.compact-hruler {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 8;
  height: 26px;
  min-width: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-solid) 40%, transparent);
  color: var(--muted);
}
.tick-grid { position: absolute; inset: 0 6px; pointer-events: none; overflow: hidden; }
.tick { position: absolute; bottom: 0; width: 1px; background: color-mix(in srgb, var(--text) 13%, transparent); }
.tick.minor { height: 4px; }
.tick.major { height: 8px; }
.tick span {
  position: absolute;
  bottom: 9px;
  transform: translateX(-50%);
  font-size: 8px;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  line-height: 1;
  white-space: nowrap;
}
.ruler-marker {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: ew-resize;
}
.ruler-marker.left { top: 13px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid color-mix(in srgb, var(--text) 54%, transparent); }
.ruler-marker.first { top: 4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid color-mix(in srgb, var(--text) 54%, transparent); }
.ruler-marker.right { top: 13px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid color-mix(in srgb, var(--text) 54%, transparent); }
.ruler-marker:hover,
.ruler-marker:focus-visible { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 65%, transparent)); outline: none; }
.ruler-marker::after, .v-marker::after {
  content: attr(data-value);
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  padding: 3px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  color: var(--text);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.ruler-marker::after { left: 0; top: -20px; transform: translateX(-50%); }
.v-marker::after { left: 12px; top: 0; transform: translateY(-50%); z-index: 60; }
.ruler-marker:hover::after, .ruler-marker:focus-visible::after,
.v-marker:hover::after, .v-marker:focus-visible::after,
.dragging-ruler .ruler-marker::after, .dragging-ruler .v-marker::after { opacity: 1; }

.ruler-readout {
  position: absolute;
  z-index: 4;
  right: 4px;
  top: 4px;
  border: 0;
  border-radius: 5px;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--panel-solid) 80%, transparent);
  color: var(--muted);
  font-size: 8px;
  line-height: 1.1;
  opacity: .65;
}
.compact-hruler:hover .ruler-readout { opacity: 1; }
.ruler-popover { top: 30px; right: 0; }
.compact-vruler {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 32px;
  height: min(1122px, calc(100vh - 180px));
  min-height: 360px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-solid) 34%, transparent);
  overflow: visible;
  z-index: 18;
}
.v-ticks {
  position: absolute;
  inset: 6px 0;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--text) 12%, transparent) 0 1px,
    transparent 1px 18px
  );
  opacity: .6;
  pointer-events: none;
}
.v-marker {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%,-50%);
  cursor: ns-resize;
  z-index: 24;
}
.v-marker.top { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid color-mix(in srgb, var(--text) 54%, transparent); }
.v-marker.bottom { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 7px solid color-mix(in srgb, var(--text) 54%, transparent); }
.v-marker:hover,
.v-marker:focus-visible { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 65%, transparent)); outline: none; }
.page {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  width: min(var(--page-width), 100%);
  min-height: 1122px;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: 6px;
  transition: width .2s ease, box-shadow .2s ease;
  z-index: 1;
}
.page.no-shadow { box-shadow: none; }
.page::after {
  content: attr(data-stats);
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 9px;
  color: var(--muted);
  opacity: .7;
}
.editor {
  min-height: 1122px;
  padding: var(--page-margin-top) var(--page-margin-right) var(--page-margin-bottom) var(--page-margin-left);
  outline: none;
  font-family: Calibri, Arial, sans-serif;
  font-size: 12pt;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}
.editor h1 { font-size: 34pt; line-height: 1.05; margin: .2em 0 .45em; font-weight: 700; }
.editor h2 { font-size: 22pt; margin: 1.1em 0 .45em; }
.editor h3 { font-size: 16pt; margin: .9em 0 .35em; }
.editor p, .editor li { margin: .55em 0; }
.editor blockquote { border-left: 3px solid var(--accent); padding-left: 18px; color: var(--muted); }
.editor img { max-width: 100%; display: block; margin: 12px auto; }
.editor table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.editor td, .editor th { border: 1px solid var(--line); padding: 7px; min-width: 72px; }
.editor a { color: color-mix(in srgb, var(--accent) 65%, #3175ff 35%); }
.page-break { border-top: 1px dashed color-mix(in srgb,var(--text) 25%,transparent); color: var(--muted); text-align:center; padding-top:8px; margin:18px 0; page-break-before:always; }
.side-panel { height: 100%; overflow: auto; padding: 22px; }
.panel-card { width: 100%; max-width: 980px; margin: 0 auto; border-radius: var(--radius); padding: 30px; min-width: 0; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap: 12px; }
.panel-card h2 { font-size:34px; margin:6px 0 22px; }
.library-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; min-width: 0; }
.library-item { min-width: 0; overflow: hidden; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.18); padding:18px; text-align:left; }
.library-item h3 { margin:0 0 18px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.library-meta { font-size:12px; color:var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { padding:38px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); text-align:center; }
.large-input { width:100%; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.22); padding:15px 16px; outline:none; }
.search-results { margin-top:18px; display:grid; gap:10px; }
.search-hit { padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.12); }
.search-hit mark { background:color-mix(in srgb,var(--accent) 35%,transparent); color:inherit; }
.settings-card { max-width:760px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.settings-grid label { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.settings-grid input[type="color"] { width:44px; height:32px; border:0; background:transparent; }
.settings-grid input[type="range"] { width:180px; }
.panel-card hr { border:0; border-top:1px solid var(--line); margin:30px 0; }
.muted { color:var(--muted); }
.ai-drawer {
  position:absolute;
  right:12px;
  top:124px;
  bottom:12px;
  width:min(380px,calc(100vw - 110px));
  border-radius:24px;
  padding:20px;
  transform:translateX(calc(100% + 30px));
  opacity:0;
  pointer-events:none;
  transition:.24s ease;
  z-index:70;
}
.ai-drawer.open { transform:none; opacity:1; pointer-events:auto; }
.drawer-head { display:flex; justify-content:space-between; align-items:flex-start; }
.drawer-head h3 { margin:4px 0 20px; font-size:22px; }
.icon-btn { padding:3px 10px; font-size:22px; background:transparent; }
.prompt-suggestions { display:flex; flex-wrap:wrap; gap:8px; }
.ai-drawer textarea { width:100%; min-height:170px; resize:vertical; border:1px solid var(--line); border-radius:16px; margin:16px 0 10px; padding:14px; background:rgba(255,255,255,.18); outline:none; }
.ai-drawer .primary-btn { width:100%; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,14px); background:#0d0e0d; color:white; border-radius:999px; padding:10px 16px; font-size:13px; opacity:0; pointer-events:none; transition:.22s ease; z-index:99; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.focus-exit {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 120;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
  color: var(--text);
  gap: 7px;
  align-items: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(18px);
}
.focus-exit span { font-size: 12px; }
.dragging-ruler { user-select:none; cursor: grabbing; }

.rulers-hidden .paper-shell {
  width: min(var(--page-width), 100%);
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto;
}
.rulers-hidden .ruler-corner,
.rulers-hidden .compact-vruler,
.rulers-hidden .compact-hruler { display: none; }
.rulers-hidden .page { grid-column: 1; grid-row: 1; width: min(var(--page-width),100%); }
.focus .rail, .focus .topbar, .focus .commandbar { display:none; }
.focus .focus-exit { display:flex; }
.focus .app-shell { grid-template-columns:1fr; padding:0; }
.focus .workspace { grid-template-rows:1fr; }
.focus .stage { padding:24px; }
.focus .paper-shell { width:min(var(--page-width),100%); grid-template-columns:1fr; grid-template-rows:auto; }
.focus .ruler-corner, .focus .compact-vruler, .focus .compact-hruler { display:none; }
.focus .page { grid-column:1; grid-row:1; width:min(var(--page-width),calc(100vw - 48px)); }
.reduce-motion * { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
@media(max-width:860px) {
  .app-shell { grid-template-columns:58px minmax(0,1fr); padding:8px; gap:8px; }
  .rail { border-radius:18px; }
  .topbar { padding:0 10px; }
  .save-status { display:none; }
  .top-actions #exportButton { display:none; }
  .paper-shell { width:100%; grid-template-columns:18px minmax(0,1fr); }
  .settings-grid { grid-template-columns:1fr; }
  .doc-title { max-width:280px; }
}
@media(max-width:620px) {
  .app-shell { grid-template-columns:1fr; padding:0; }
  .rail { position:fixed; left:8px; right:8px; bottom:8px; height:58px; z-index:90; flex-direction:row; border-radius:18px; overflow:hidden; }
  .brand { margin:0 10px 0 0; }
  .rail-nav, .rail-bottom { flex-direction:row; width:auto; }
  .rail-bottom { margin-left:auto; margin-top:0; }
  .workspace { grid-template-rows:54px auto minmax(0,1fr); padding:8px 8px 72px; }
  .top-actions #exportButton { display:none; }
  .doc-title { max-width:160px; }
  .paper-shell { grid-template-columns:1fr; grid-template-rows:24px auto; }
  .ruler-corner, .compact-vruler { display:none; }
  .compact-hruler { grid-column:1; grid-row:1; }
  .page { grid-column:1; grid-row:2; width:100%; min-height:900px; }
  .editor { min-height:900px; padding:48px 30px; }
}

/* medocx v6: document appearance, context toolbars and precision controls */
:root {
  --page-text: #171817;
  --page-muted: #747873;
  --inverse-text: #fffdfa;
}
:root[data-theme="dark"] { --inverse-text: #101110; }
:root[data-page-theme="light"] {
  --paper: #fffdfa;
  --page-text: #171817;
  --page-muted: #747873;
}
:root[data-page-theme="dark"] {
  --paper: #20231f;
  --page-text: #f1f0eb;
  --page-muted: #a3a69f;
}
.primary-btn { color: var(--inverse-text); }
.editor { color: var(--page-text); position: relative; }
.editor blockquote { color: var(--page-muted); }
.page::after { color: var(--page-muted); }
.stats-hidden .page::after { display: none; }

.brand { padding: 0; overflow: hidden; background: #0b0c0c; border-radius: 14px; }
.brand:hover { background: #0b0c0c; }
.brand img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }

select option { color: #171817; background: #f7f7f3; }
:root[data-theme="dark"] select option { color: #f1f0eb; background: #202320; }
:root[data-theme="dark"] select { color-scheme: dark; }
:root[data-theme="light"] select { color-scheme: light; }

.image-context { display: none; }
.commandbar.image-mode .text-context { display: none !important; }
.commandbar.image-mode .image-context { display: flex; }
.commandbar.image-mode .common-tail { margin-left: auto; }
.context-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 0 3px; }

.font-size-control { display: inline-flex; align-items: center; gap: 1px; height: 34px; width: auto; }
.font-size-control .size-step { min-width: 24px; width: 24px; font-size: 18px; line-height: 1; padding: 0; }
.combo-field {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  padding: 0 5px;
  width: auto;
  background: transparent;
}
.combo-field:hover, .combo-field:focus-within { background: var(--hover-bg); }
.combo-field input {
  width: 2ch;
  min-width: 2ch;
  border: 0;
  outline: none;
  background: transparent;
  padding: 4px 1px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.combo-field input::-webkit-outer-spin-button,
.combo-field input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.line-spacing-control { min-width: 0; width: auto; }
.line-spacing-control input { width: 2ch; min-width: 2ch; }
.spacing-group { gap: 2px; }
.font-upload-btn { display:none; }

.choice-menu {
  color: var(--text);
  position: fixed;
  z-index: 190;
  min-width: 76px;
  max-height: 292px;
  overflow: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-solid) 96%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(22px);
  scrollbar-width: thin;
}
.choice-menu[hidden] { display: none !important; }
.choice-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 6px 10px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.choice-menu button:hover, .choice-menu button.active { background: var(--hover-bg); }

.image-tool-btn { grid-auto-flow: column; gap: 6px; padding-inline: 8px; }
.image-value {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  padding: 0 7px;
  background: transparent;
  font-size: 11px;
  color: var(--muted);
}
.image-value:hover, .image-value:focus-within { background: var(--hover-bg); }
.image-value input { width: 42px; border: 0; outline: none; background: transparent; color: var(--text); padding: 3px 1px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.image-value input::-webkit-outer-spin-button, .image-value input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.image-value em { font-style: normal; color: var(--muted); }
.image-wrap-select { width: 122px; min-width: 122px; }
.image-align-group { display: flex; gap: 1px; }
.danger-cmd:hover { background: rgba(220,55,55,.12); color: #e25757; }

.crop-popover { width: 310px; }
.crop-preview { height: 122px; border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(rgba(127,127,127,.12) 0 25%, transparent 0 50%) 50% / 14px 14px; display: grid; place-items: center; margin-bottom: 10px; }
.crop-preview img { max-width: 100%; max-height: 100%; display: block; transition: clip-path .12s ease; }
.crop-popover label { grid-template-columns: 92px minmax(0,1fr); gap: 8px; }
.crop-popover label span { display: flex; justify-content: space-between; gap: 6px; }
.crop-popover input[type="range"] { padding: 0; border: 0; background: transparent; }
.popover-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }
.popover-actions button { border: 0; border-radius: 8px; padding: 7px 9px; background: var(--hover-bg); color: var(--text); }
.popover-actions .primary-btn { background: var(--text); color: var(--inverse-text); }

.editor img { transition: outline-color .12s ease, box-shadow .12s ease; }
.editor img.medocx-image-selected { outline: 2px solid color-mix(in srgb, var(--accent) 82%, white 18%); outline-offset: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); }


.image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 18;
}
.image-selection-box {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.image-selection-outline {
  position: absolute;
  inset: 0;
  border: 1.5px solid color-mix(in srgb, var(--accent) 82%, white 18%);
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  pointer-events: auto;
}
.image-handle, .crop-handle {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: color-mix(in srgb, var(--accent) 92%, white 8%);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  pointer-events: auto;
  padding: 0;
}
.image-handle.nw,.crop-handle.nw{left:0;top:0;cursor:nwse-resize}.image-handle.n,.crop-handle.n{left:50%;top:0;cursor:ns-resize}.image-handle.ne,.crop-handle.ne{left:100%;top:0;cursor:nesw-resize}.image-handle.e,.crop-handle.e{left:100%;top:50%;cursor:ew-resize}.image-handle.se,.crop-handle.se{left:100%;top:100%;cursor:nwse-resize}.image-handle.s,.crop-handle.s{left:50%;top:100%;cursor:ns-resize}.image-handle.sw,.crop-handle.sw{left:0;top:100%;cursor:nesw-resize}.image-handle.w,.crop-handle.w{left:0;top:50%;cursor:ew-resize}
.crop-overlay-box {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.crop-mask {
  position: absolute;
  background: rgba(0,0,0,.42);
  pointer-events: auto;
}
.crop-frame {
  position: absolute;
  border: 1.5px solid rgba(255,255,255,.94);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.24);
  cursor: move;
  pointer-events: auto;
}
.crop-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,.16) 0 1px, transparent 1px calc(33.33% - 1px), rgba(255,255,255,.16) calc(33.33% - 1px) calc(33.33% + 1px), transparent calc(33.33% + 1px) calc(66.66% - 1px), rgba(255,255,255,.16) calc(66.66% - 1px) calc(66.66% + 1px), transparent calc(66.66% + 1px));
  pointer-events: none;
}
.crop-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.16) 0 1px, transparent 1px calc(33.33% - 1px), rgba(255,255,255,.16) calc(33.33% - 1px) calc(33.33% + 1px), transparent calc(33.33% + 1px) calc(66.66% - 1px), rgba(255,255,255,.16) calc(66.66% - 1px) calc(66.66% + 1px), transparent calc(66.66% + 1px));
  pointer-events: none;
}
.crop-controls {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  pointer-events: auto;
}
.crop-controls .quiet-btn, .crop-controls .primary-btn { padding: 7px 10px; border-radius: 9px; }
.page.cropping .image-handle { display: none; }
.page.cropping .image-selection-outline { border-style: dashed; }
.editor img.medocx-image-selected { outline: none; box-shadow: none; }
.editor img[data-wrap="square"] { float: left; display: block; }
.editor img[data-wrap="top-bottom"] { display: block; float: none; clear: both; }
.editor img[data-wrap="front"], .editor img[data-wrap="behind"] { position: absolute; float: none; }
.editor img[data-wrap="front"] { z-index: 4; }
.editor img[data-wrap="behind"] { z-index: 0; }
.editor.has-layered-image > :not(img) { position: relative; z-index: 1; }
.editor.has-layered-image > img[data-wrap="front"] { z-index: 4; }
.editor.has-layered-image > img[data-wrap="behind"] { z-index: 0; }

@media(max-width:860px) {
  .image-primary .context-label { display:none; }
  .image-wrap-select { width: 108px; min-width:108px; }
}
.view-menu { width: 252px; }