/* These files are generated from pagelayout/fontoutlines. The SVG layout
   measures the same faces, so the browser must not fall back to a system
   font for the document surface. */
@font-face {
  font-family: "Carlito";
  src: url("./fonts/Carlito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Carlito";
  src: url("./fonts/Carlito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Carlito";
  src: url("./fonts/Carlito-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Carlito";
  src: url("./fonts/Carlito-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "Liberation Sans";
  src: url("./fonts/LiberationSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Liberation Sans";
  src: url("./fonts/LiberationSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Liberation Sans";
  src: url("./fonts/LiberationSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Liberation Sans";
  src: url("./fonts/LiberationSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "Liberation Serif";
  src: url("./fonts/LiberationSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Liberation Serif";
  src: url("./fonts/LiberationSerif-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Liberation Serif";
  src: url("./fonts/LiberationSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Liberation Serif";
  src: url("./fonts/LiberationSerif-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "Liberation Mono";
  src: url("./fonts/LiberationMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Liberation Mono";
  src: url("./fonts/LiberationMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Liberation Mono";
  src: url("./fonts/LiberationMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Liberation Mono";
  src: url("./fonts/LiberationMono-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("./fonts/NotoSansSC-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: light;
  --ink: #1f2937;
  --muted: #6b7280;
  --border: #d6dbe3;
  --toolbar: #f7f8fa;
  --workspace: #eef1f5;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
}

* { box-sizing: border-box; }

html, body, #app { height: 100%; margin: 0; }

body {
  overflow: hidden;
  background: var(--workspace);
  color: var(--ink);
  margin: 0 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }

.viewer-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 320px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.brand-mark { color: var(--accent); font-size: 20px; font-weight: 750; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title { font-size: 14px; font-weight: 720; }
.brand-subtitle { color: var(--muted); font-size: 11px; }

.file-actions, .view-actions { display: flex; align-items: center; gap: 6px; }
.view-actions { margin-left: auto; }

.button {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.button:hover { border-color: #9aa5b5; background: #f9fafb; }
.button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.button.icon { width: 32px; padding: 0; font-size: 17px; }
.button.icon.active { border-color: var(--accent); background: var(--accent-soft); color: #1d4ed8; }
.button:disabled { cursor: default; opacity: .45; }

.zoom-control { display: flex; align-items: center; gap: 6px; }
.zoom-control input { width: 96px; accent-color: var(--accent); }
.zoom-value { width: 42px; color: var(--muted); font-size: 12px; text-align: right; }

.search-box {
  width: min(25vw, 260px);
  min-width: 150px;
  height: 32px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}
.search-box:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  padding: 5px 16px;
  background: var(--toolbar);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.status-file { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.status-selection { max-width: 45%; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }

.viewer-workspace { display: flex; flex: 1; min-height: 0; }
.surface-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: auto; }
.surface-wrap.word-mode { padding: 28px 24px 56px; }
.surface-wrap.sheet-mode { padding: 20px 20px 44px; }
.surface { position: relative; min-height: 100%; }
.surface-empty { display: grid; min-height: 100%; place-items: center; padding: 24px; color: var(--muted); text-align: center; }
.surface-empty strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 17px; }

.word-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: max-content; }
.word-page { position: relative; zoom: var(--office-zoom, 1); background: #fff; box-shadow: 0 3px 14px rgba(15, 23, 42, .13); transform-origin: top center; user-select: text; }
.word-page svg { display: block; }
.word-page, .word-page svg text { cursor: text; }
.word-page svg text { font-kerning: none; font-variant-ligatures: none; letter-spacing: 0; white-space: pre; }
.word-page svg text.office-search-hit { paint-order: stroke; stroke: #facc15; stroke-width: 4px; stroke-opacity: .45; }

/* Opt-in local-font enhancement. Page coordinates still come from the
   bundled metrics, so this mode cannot change pagination or line breaks. */
.surface.prefer-system-fonts .word-page svg text[font-family="Carlito"] { font-family: "Calibri", "Carlito" !important; }
.surface.prefer-system-fonts .word-page svg text[font-family="Liberation Sans"] { font-family: "Arial", "Liberation Sans" !important; }
.surface.prefer-system-fonts .word-page svg text[font-family="Liberation Serif"] { font-family: "Times New Roman", "Liberation Serif" !important; }
.surface.prefer-system-fonts .word-page svg text[font-family="Liberation Mono"] { font-family: "Courier New", "Liberation Mono" !important; }
.surface.prefer-system-fonts .word-page svg text[font-family="Noto Sans SC"] { font-family: "Microsoft YaHei", "SimSun", "Noto Sans SC" !important; }

.sheet-document { min-width: max-content; zoom: var(--office-zoom, 1); padding: 8px; background: #fff; box-shadow: 0 3px 14px rgba(15, 23, 42, .12); user-select: none; }
.sheet-document { font-family: "Carlito", "Liberation Sans", "Noto Sans SC", sans-serif; }
.sheet-document figure.chart svg text { font-family: "Carlito", "Liberation Sans", "Noto Sans SC", sans-serif; }
.surface.prefer-system-fonts .sheet-document { font-family: "Calibri", "Arial", "Microsoft YaHei", "SimSun", "Carlito", "Liberation Sans", "Noto Sans SC", sans-serif; }
.surface.prefer-system-fonts .sheet-document figure.chart svg text { font-family: "Calibri", "Arial", "Microsoft YaHei", "SimSun", "Carlito", "Liberation Sans", "Noto Sans SC", sans-serif; }
.sheet-document > h1 { margin: 4px 0 14px; font-size: 17px; }
.sheet-document section { margin: 0 0 22px; }
.sheet-document section > h2 { position: sticky; left: 0; z-index: 1; width: max-content; margin: 10px 0 5px; padding: 4px 7px; background: #f3f4f6; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
.sheet-document table { border-collapse: collapse; table-layout: fixed; margin: 0; }
.sheet-document td { min-width: 72px; height: 24px; padding: 3px 7px; border: 1px solid #d9dfe8; background: #fff; white-space: pre; font-size: 12px; }
.sheet-document td.office-cell-selected { outline: 2px solid var(--accent); outline-offset: -2px; background: #e8f0ff; }
.sheet-document td.office-search-hit { box-shadow: inset 0 0 0 2px #facc15; }
.sheet-document td.office-cell-anchor { box-shadow: inset 3px 0 0 var(--accent); }
.sheet-document .formula-pending { color: #8a94a3; font-style: italic; }
.sheet-document .truncated, .sheet-document .frozen-hint { color: var(--muted); font-size: 11px; }
.sheet-document figure.chart { display: inline-block; margin: 6px 8px 6px 0; padding: 8px; border: 1px solid var(--border); vertical-align: top; }

/* Excel uses a workbook frame instead of a report page. The renderer still
   owns cell content and styles; this layer supplies the familiar spreadsheet
   chrome and keeps one visible sheet in the viewport at a time. */
.surface-wrap.sheet-mode {
  padding: 0;
  overflow: hidden;
  background: #edf1f5;
}

.surface.sheet-mode {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
}

.excel-workspace {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  flex: 1 1 auto;
  background: #edf1f5;
}

.excel-view-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  flex: 0 0 34px;
  padding: 5px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #d7dee8;
  color: #64748b;
  font-size: 11px;
}

.excel-view-title {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.excel-readonly-badge {
  padding: 2px 7px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
}

.excel-view-hint {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.excel-formula-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  flex: 0 0 38px;
  padding: 5px 12px;
  background: #fff;
  border-bottom: 1px solid #cbd5e1;
}

.excel-name-box {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 76px;
  min-height: 27px;
  padding: 3px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  color: #334155;
  font: 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.excel-fx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  color: #64748b;
  font: italic 15px Georgia, serif;
}

.excel-value-box {
  display: flex;
  align-items: center;
  min-width: 240px;
  min-height: 27px;
  flex: 1;
  overflow: hidden;
  padding: 3px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: #1e293b;
  font-size: 12px;
  white-space: pre;
  text-overflow: ellipsis;
}

.excel-value-box.is-placeholder {
  color: #94a3b8;
}

.office-excel-workbook {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px 14px 24px;
  background: #edf1f5;
  box-shadow: none;
}

.office-excel-workbook > h1,
.office-excel-workbook > .excel-document-title,
.office-excel-workbook section > h2,
.office-excel-workbook section > .excel-sheet-heading {
  display: none;
}

.office-excel-workbook section[data-sheet] {
  display: none;
  margin: 0;
  padding: 0;
}

.office-excel-workbook section[data-sheet].is-active {
  display: block;
}

.office-excel-workbook section[data-sheet] > table {
  width: max-content;
  min-width: 0;
  margin: 0;
  border: 1px solid #c4ccd8;
  border-spacing: 0;
  border-collapse: separate;
  background: #fff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .08);
  table-layout: fixed;
}

.office-excel-workbook .office-row-header-column {
  width: 44px !important;
}

.office-excel-workbook .office-grid-column-headings th,
.office-excel-workbook .office-row-heading {
  height: 25px;
  padding: 3px 7px;
  border-right: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  background: #f1f4f8;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.office-excel-workbook .office-grid-column-headings th {
  position: sticky;
  top: 0;
  z-index: 4;
}

.office-excel-workbook .office-grid-column-headings .office-grid-corner {
  left: 0;
  z-index: 6;
  min-width: 44px;
}

.office-excel-workbook .office-row-heading {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 44px;
  min-width: 44px;
  border-left: 0;
}

.office-excel-workbook td {
  height: 25px;
  min-width: 72px;
  padding: 4px 8px;
  border-right: 1px solid #e2e7ee;
  border-bottom: 1px solid #e2e7ee;
  line-height: 1.25;
  white-space: pre;
}

.office-excel-workbook td.office-cell-selected {
  outline: 1px solid rgba(37, 99, 235, .38);
  outline-offset: -1px;
  background: #eaf2ff !important;
}

.office-excel-workbook td.office-cell-active {
  position: relative;
  z-index: 2;
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  background: #f7fbff !important;
}

.office-excel-workbook td.office-cell-active.office-cell-selected {
  background: #e3efff !important;
}

.office-excel-workbook .truncated,
.office-excel-workbook .frozen-hint {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 11px;
}

.office-excel-workbook .sheet-objects {
  margin-top: 12px;
}

/* Drawing objects are anchored to worksheet cells by the viewer runtime.
   Keeping the overlay out of flow prevents charts and pictures from being
   appended below the table while preserving their source geometry. */
.office-excel-workbook section.office-anchored-objects {
  position: relative;
}

.office-excel-workbook section.office-anchored-objects > .sheet-objects,
.office-excel-workbook .office-object-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

.office-excel-workbook .office-object-overlay > figure.image,
.office-excel-workbook .office-object-overlay > figure.chart,
.office-excel-workbook .office-object-overlay > figure.chart-placeholder {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.office-excel-workbook .office-object-overlay img,
.office-excel-workbook .office-object-overlay svg {
  max-width: none;
}

.excel-sheet-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 42px;
  min-height: 42px;
  padding: 0 12px;
  overflow-x: auto;
  background: #fff;
  border-top: 1px solid #cbd5e1;
  color: #64748b;
}

.excel-tabs-label {
  flex: 0 0 auto;
  padding-right: 4px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.excel-tab-list {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 2px;
  min-width: 0;
}

.excel-sheet-tab {
  min-width: 76px;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.excel-sheet-tab:hover {
  background: #f8fafc;
  color: #334155;
}

.excel-sheet-tab.is-active {
  border-bottom-color: #2563eb;
  background: #f8fafc;
  color: #1d4ed8;
  font-weight: 700;
}

[hidden] { display: none !important; }

.side-panel { display: none; width: 290px; overflow: auto; padding: 16px; border-left: 1px solid var(--border); background: #fff; }
.side-panel.open { display: block; }
.office-viewer-surface td.office-has-annotation { position: relative; }
.office-viewer-surface td.office-has-annotation::after { content: ""; position: absolute; top: 0; right: 0; border-top: 7px solid #b45309; border-left: 7px solid transparent; pointer-events: none; }
.office-viewer-surface svg text.office-has-annotation { text-decoration: underline dotted #b45309; }
.office-viewer-surface td.office-annotation-focus { outline: 2px solid #b45309; outline-offset: -2px; }
.office-viewer-surface svg text.office-annotation-focus { fill: #92400e; text-decoration: underline solid #b45309; }
.side-panel h2 { margin: 0 0 12px; font-size: 14px; }
.side-panel-actions { display: flex; gap: 6px; margin-bottom: 12px; }
.selection-content { margin-bottom: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.comments-toggle.active { border-color: var(--accent); background: var(--accent-soft); color: #1d4ed8; }
.status-comments { white-space: nowrap; }
.comments-panel { width: 340px; max-width: 100%; flex: 0 0 340px; }
.comments-panel .annotation-panel-hint,
.comments-panel .annotation-empty { margin-bottom: 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.comments-panel .annotation-warning { margin-bottom: 10px; padding: 8px; border: 1px solid #f2d39d; border-radius: 5px; background: #fff9ed; color: #7c541b; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.comments-panel .annotation-card { margin-bottom: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
.comments-panel .annotation-reply { margin-left: 12px; border-left: 3px solid var(--border); }
.comments-panel .annotation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.comments-panel .annotation-author { font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.comments-panel .annotation-kind { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.comments-panel .annotation-meta,
.comments-panel .annotation-hint { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.comments-panel .annotation-text { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.comments-panel .annotation-location { margin-top: 9px; overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; }
.comments-panel .annotation-locate { margin-top: 8px; min-height: 28px; font-size: 11px; }
.comments-panel .annotation-json-details { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; }
.comments-panel .annotation-json-details > summary { cursor: pointer; }
.comments-panel .annotation-json-actions { margin-top: 10px; }
.comments-panel .annotation-copy-status { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.comments-panel .annotation-json { max-height: 360px; overflow: auto; margin: 10px 0 0; padding: 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--toolbar); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 10px; line-height: 1.5; user-select: text; }
.side-panel dl { margin: 0; font-size: 12px; }
.side-panel dt { margin-top: 10px; color: var(--muted); }
.side-panel dd { margin: 3px 0 0; white-space: pre-wrap; word-break: break-word; }

.drop-active .surface-wrap { outline: 3px solid var(--accent); outline-offset: -3px; }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding: 8px 10px; }
  .brand { min-width: 0; flex: 1; }
  .file-actions { order: 3; width: 100%; }
  .file-actions .search-box { flex: 1; width: auto; }
  .view-actions { margin-left: 0; }
  .statusbar { padding-inline: 10px; }
  .status-selection { display: none; }
  .surface-wrap.word-mode { padding: 18px 8px 34px; }
  .surface-wrap.sheet-mode { padding: 10px 8px 28px; }
  .side-panel.open { position: absolute; right: 0; top: 90px; bottom: 0; z-index: 5; box-shadow: -4px 0 14px rgba(15, 23, 42, .12); }
}

/* Comments are readable on first load, in reserved space beside the document.
   Source page/cell content and font metrics are never changed by this gutter. */
.office-viewer-surface .office-context-layout { display: flex; align-items: stretch; gap: 10px; position: relative; width: 100%; min-width: 0; }
.office-viewer-surface .office-context-document { flex: 1 1 auto; min-width: 0; }
.office-viewer-surface .office-context-word > .office-context-document { overflow-x: auto; }
.office-viewer-surface .office-context-excel { height: 100%; min-height: 0; flex: 1 1 auto; gap: 0; }
.office-viewer-surface .office-context-excel > .office-context-document { display: flex; flex-direction: column; min-height: 0; }
.office-viewer-surface .office-context-rail { position: relative; flex: 0 0 326px; width: 326px; min-height: 180px; user-select: none; }
.office-viewer-surface .office-context-excel > .office-context-rail { overflow: auto; min-height: 0; border-left: 1px solid #d9dfe8; background: #f3f5f8; }
.office-viewer-surface .office-context-heading { padding: 8px 10px 12px 36px; color: #475569; font-size: 12px; line-height: 1.45; font-weight: 650; }
.office-viewer-surface .office-context-placed { position: relative; min-height: 0; }
.office-viewer-surface .office-context-card { position: absolute; left: 36px; right: 4px; padding: 12px; border: 1px solid #deb46b; border-radius: 8px; background: #fffdf7; box-shadow: 0 3px 10px #1f293711; color: #243044; text-align: left; }
.office-viewer-surface .office-context-card::before { content: ""; position: absolute; left: -8px; top: var(--office-card-offset, 0px); width: 7px; height: calc(0px - var(--office-card-offset, 0px)); border-top: 1px solid #c98b27; border-left: 1px solid #c98b27; pointer-events: none; }
.office-viewer-surface .office-context-unplaced-card { position: relative; top: auto; left: auto; right: auto; margin: 0 4px 12px 36px; }
.office-viewer-surface .office-context-unplaced-card::before { display: none; }
.office-viewer-surface .office-context-unplaced-heading,
.office-viewer-surface .office-context-more { margin: 6px 4px 12px 36px; color: #64748b; font-size: 11px; line-height: 1.45; }
.office-viewer-surface .office-context-active { border-color: #b97718; box-shadow: 0 0 0 2px #f5d99d; }
.office-viewer-surface .office-context-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.office-viewer-surface .office-context-location { margin-top: 7px; color: #875313; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.office-viewer-surface .office-context-hint,
.office-viewer-surface .office-context-meta { margin-top: 5px; color: #64748b; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.office-viewer-surface .office-context-entry { margin-top: 12px; padding-top: 10px; border-top: 1px solid #eadfc9; }
.office-viewer-surface .office-context-reply { margin-left: 10px; padding-left: 10px; border-left: 2px solid #e3c58d; }
.office-viewer-surface .office-context-author { font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.office-viewer-surface .office-annotation-body { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; cursor: text; user-select: text; -webkit-user-select: text; }
.office-viewer-surface .office-annotation-body[data-empty="true"]::before { content: "(Empty comment)"; color: #64748b; }
.office-viewer-surface .office-context-select { min-height: 28px; padding: 3px 8px; border: 1px solid #d7bd8d; border-radius: 4px; background: #fff; color: #7c4a0d; cursor: pointer; font-size: 11px; }
.office-viewer-surface .office-context-select:disabled { opacity: .5; cursor: default; }
.office-viewer-surface .office-comment-marker { position: absolute; left: 0; width: 28px; height: 26px; padding: 0; border: 1px solid #c98b27; border-radius: 6px; background: #fff0ce; color: #875313; cursor: pointer; }
.office-viewer-surface .office-comment-marker::before { content: ""; display: block; width: 13px; height: 10px; margin: 0 auto; border: 2px solid currentColor; border-radius: 3px; }
.office-viewer-surface .office-comment-marker::after { content: ""; position: absolute; left: -9px; top: calc(12px + var(--office-marker-offset, 0px)); width: 7px; height: calc(0px - var(--office-marker-offset, 0px)); border-left: 1px solid #c98b27; border-top: 1px solid #c98b27; pointer-events: none; }
.office-viewer-surface .office-note-marker { position: absolute; top: 0; right: 0; z-index: 3; width: 14px; height: 14px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.office-viewer-surface .office-note-marker::before { content: ""; position: absolute; top: 0; right: 0; border-top: 10px solid #b45309; border-left: 10px solid transparent; }
.office-viewer-surface .office-note-marker:focus-visible,
.office-viewer-surface .office-comment-marker:focus-visible,
.office-viewer-surface .office-annotation-body:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.comments-panel .annotation-select { margin-top: 8px; margin-right: 6px; min-height: 28px; font-size: 11px; }
.comments-panel .annotation-text[data-office-annotation-body] { user-select: text; -webkit-user-select: text; cursor: text; }
.comments-panel .annotation-text[data-office-annotation-body]:empty::before { content: "(Empty comment)"; color: #64748b; }
.office-viewer-surface .office-context-entry.office-annotation-selected > .office-annotation-body { background: #fff0ce; box-shadow: 0 0 0 4px #fff0ce; border-radius: 2px; }

@media (max-width: 760px) {
  .surface-wrap.sheet-mode { overflow: auto; }
  .surface.office-viewer-surface.sheet-mode { height: auto; }
  .office-viewer-surface .office-context-layout { display: block; height: auto; }
  .office-viewer-surface .office-context-document { max-height: 55vh; overflow: auto; }
  .office-viewer-surface .office-context-excel > .office-context-document { height: 55vh; }
  .office-viewer-surface .office-context-rail { width: 100%; min-height: 0; overflow: visible; margin-top: 12px; }
  .office-viewer-surface .office-context-placed { height: auto !important; }
  .office-viewer-surface .office-context-card { position: relative; top: auto !important; left: auto; right: auto; margin: 0 4px 12px; }
  .office-viewer-surface .office-context-card::before,
  .office-viewer-surface .office-comment-marker { display: none; }
  .office-viewer-surface .office-context-heading,
  .office-viewer-surface .office-context-unplaced-heading,
  .office-viewer-surface .office-context-more { margin-left: 4px; padding-left: 0; }
}

/* PDF.js owns pagination, text positioning, and annotation layers. */
.surface-wrap.pdf-mode { overflow: hidden; padding: 0; }
.pdf-surface { position: absolute; inset: 0; min-height: 0; }
.pdf-container { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.pdf-container .pdfViewer { padding: 24px 12px 48px; }
.pdf-container .pdfViewer .page { box-sizing: content-box; margin-bottom: 20px; }
.pdf-container .textLayer { cursor: text; }
.pdf-toolbar { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 5px 16px; background: #fafbfc; border-bottom: 1px solid var(--border); }
.pdf-page-control, .pdf-view-controls, .pdf-find-controls { display: flex; align-items: center; gap: 6px; }
.pdf-view-controls { padding-left: 12px; border-left: 1px solid var(--border); }
.pdf-find-controls { margin-left: auto; }
.page-input { width: 52px; height: 30px; border: 1px solid var(--border); border-radius: 4px; text-align: center; background: #fff; padding: 2px 4px; font-size: 13px; }
.page-total, .search-count { font-size: 12px; color: var(--muted); min-width: 30px; font-variant-numeric: tabular-nums; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.button img { flex: none; }
.office-icon { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor; }
.button.primary img { filter: invert(1); }
.button.icon { padding: 6px; width: 32px; height: 32px; flex: none; }
.button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.viewer-workspace { position: relative; }
.side-panel { width: 360px; flex: none; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-heading h2 { margin: 0; }
.mode-control { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; background: #edf0f3; border-radius: 4px; margin-bottom: 14px; }
.mode-option { height: 30px; border: 0; background: transparent; cursor: pointer; border-radius: 3px; font-size: 12px; color: #525963; padding: 0 6px; }
.mode-option.active { background: #fff; box-shadow: 0 1px 3px #0002; color: #20242a; }
.side-panel-actions { align-items: center; }
.resolve-button { margin-left: auto; font-size: 12px; }
.selection-content { max-width: 100%; padding: 0; margin-top: 0; font-size: 11px; letter-spacing: 0; }
.resolved-content { border-top: 1px solid var(--border); padding-top: 14px; }
.resolved-content .selection-content { font-family: inherit; font-size: 13px; line-height: 1.6; }
.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: #0005; padding: 20px; }
.password-dialog { width: 340px; max-width: 100%; padding: 24px; background: #fff; border-radius: 6px; box-shadow: 0 6px 30px #0003; }
.password-dialog h2 { margin: 14px 0; font-size: 18px; }
.password-dialog input { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 4px; }
.password-error { color: #b42318; font-size: 12px; margin-top: 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 760px) {
  .topbar { gap: 8px; }
  .brand-copy { min-width: 0; }
  .brand-title { font-size: 14px; }
  .brand-subtitle { font-size: 10px; }
  .zoom-control input { display: none; }
  .view-actions { gap: 4px; }
  .zoom-control { gap: 2px; }
  .zoom-value { width: 40px; font-size: 12px; }
  .pdf-toolbar { gap: 6px; padding-inline: 8px; }
  .pdf-view-controls { padding-left: 6px; }
  .pdf-container .pdfViewer { padding: 12px 0 32px; }
  .side-panel.open { top: 0; width: min(360px, 100%); }
  .file-actions { gap: 8px; }
  .file-actions .primary { white-space: nowrap; min-width: 102px; }
  .status-file { min-width: 0; flex: 1; }
}