:root {
  --desktop: #008080;
  --surface: #c0c0c0;
  --light: #ffffff;
  --mid-light: #dfdfdf;
  --mid-dark: #808080;
  --dark: #000000;
  --title: #000080;
  --title-text: #ffffff;
  --selection: #000080;
  --selection-text: #ffffff;
  --font: "MS Sans Serif", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  overflow: hidden;
  background: var(--desktop);
  color: #000;
  font: 12px var(--font);
}

button { font: inherit; color: inherit; }

.viewer-window {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 3px;
  background: var(--surface);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
}

.title-bar {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 3px;
  color: var(--title-text);
  background: var(--title);
  font-weight: bold;
}

.title-content { display: flex; align-items: center; min-width: 0; gap: 5px; }
.title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-icon { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; }
.dialog-title-bar button {
  width: 18px; height: 18px; padding: 0; line-height: 14px; font-weight: bold;
  background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light);
}

.menu-bar { min-height: 25px; display: flex; align-items: stretch; padding: 1px 2px; position: relative; z-index: 20; }
.menu-item { position: relative; }
.menu-trigger { height: 23px; padding: 2px 8px; border: 1px solid transparent; background: transparent; }
.menu-trigger:hover, .menu-trigger[aria-expanded="true"] { background: var(--selection); color: var(--selection-text); }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 210px; padding: 2px; background: var(--surface);
  border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: 1px 1px 0 #000;
}
.dropdown-menu button { width: 100%; min-height: 23px; display: flex; justify-content: space-between; border: 0; padding: 3px 18px; text-align: left; background: transparent; white-space: nowrap; }
.dropdown-menu button:hover:not(:disabled) { color: var(--selection-text); background: var(--selection); }
.dropdown-menu button:disabled { color: var(--mid-dark); text-shadow: 1px 1px var(--light); }
.dropdown-menu small { color: inherit; }
.menu-option-label { display: inline-flex; align-items: center; margin-left: -13px; }
.menu-check { display: inline-block; width: 14px; text-align: center; }
.menu-separator { height: 2px; margin: 3px 2px; border-top: 1px solid var(--mid-dark); border-bottom: 1px solid var(--light); }

.toolbar { min-height: 40px; display: flex; align-items: center; gap: 3px; padding: 3px 5px; border: 1px solid; border-color: var(--mid-dark) var(--light) var(--light) var(--mid-dark); }
.tool-button, .classic-button {
  min-height: 27px; padding: 3px 8px; background: var(--surface); border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
}
.tool-button:active:not(:disabled), .classic-button:active { border-color: var(--dark) var(--light) var(--light) var(--dark); padding: 4px 7px 2px 9px; }
.tool-button:disabled { color: var(--mid-dark); text-shadow: 1px 1px var(--light); }
.tool-open { display: flex; align-items: center; gap: 5px; }
.icon-only { min-width: 29px; padding-inline: 6px; font-size: 16px; font-weight: bold; }
.zoom-label { min-width: 52px; }
.toolbar-separator { width: 2px; height: 27px; margin: 0 2px; border-left: 1px solid var(--mid-dark); border-right: 1px solid var(--light); }
.panel-tool[aria-pressed="true"] { border-color: var(--dark) var(--light) var(--light) var(--dark); background: #b5b5b5; }
.panel-icon { width: 16px; height: 13px; display: inline-block; position: relative; border: 1px solid #000; background: #fff; vertical-align: middle; }
.panel-icon::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: #808080; border-right: 1px solid #000; }
.panel-icon::after { content: ""; position: absolute; left: 7px; right: 2px; top: 3px; height: 1px; background: #808080; box-shadow: 0 3px #808080;
}
.page-counter { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 3px; white-space: nowrap; }
.page-counter[hidden] { display: none; }
.page-counter input { width: 48px; height: 25px; padding: 2px 4px; text-align: center; background: #fff; border: 2px solid; border-color: var(--mid-dark) var(--light) var(--light) var(--mid-dark); font: inherit; }
.page-counter input:disabled { color: var(--mid-dark); background: var(--mid-light); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.folder-icon { width: 20px; height: 18px; display: block; object-fit: contain; image-rendering: pixelated; }
.reading-mode-tool { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.reading-mode-tool[aria-pressed="true"] { border-color: var(--dark) var(--light) var(--light) var(--dark); background: #b5b5b5; }
.book-icon { position: relative; display: inline-block; width: 19px; height: 15px; border: 1px solid #000; background: #fff; }
.book-icon > span { position: absolute; top: 0; bottom: 0; left: 8px; width: 1px; background: #000; }
.book-icon::before, .book-icon::after { content: ""; position: absolute; top: 3px; width: 5px; height: 1px; background: #808080; box-shadow: 0 3px #808080, 0 6px #808080; }
.book-icon::before { left: 2px; }
.book-icon::after { right: 2px; }
.reading-mode-hotspot { position: absolute; inset: 0 0 auto; z-index: 45; height: 10px; }
.reading-mode-hotspot[hidden] { display: none; }
.viewer-window.reading-mode { padding-top: 3px; }
.viewer-window.reading-mode .title-bar, .viewer-window.reading-mode .menu-bar, .viewer-window.reading-mode .toolbar { position: absolute; left: 3px; right: 3px; z-index: 42; visibility: hidden; }
.viewer-window.reading-mode .title-bar { top: 3px; }
.viewer-window.reading-mode .menu-bar { top: 27px; background: var(--surface); }
.viewer-window.reading-mode .toolbar { top: 52px; background: var(--surface); }
.viewer-window.reading-mode.reading-controls-visible .title-bar, .viewer-window.reading-mode.reading-controls-visible .menu-bar, .viewer-window.reading-mode.reading-controls-visible .toolbar { visibility: visible; }
.viewer-window.reading-mode .workspace { margin-top: 0; }
.viewer-window.native-viewer-mode .toolbar { display: none; }
.find-bar { min-height: 34px; display: flex; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid; border-color: var(--mid-dark) var(--light) var(--light) var(--mid-dark); }
.find-bar[hidden] { display: none; }
.find-bar input { width: min(260px, 35vw); height: 25px; padding: 2px 4px; background: #fff; border: 2px solid; border-color: var(--mid-dark) var(--light) var(--light) var(--mid-dark); font: inherit; }
.find-direction, .find-close { min-width: 27px; min-height: 25px; padding: 1px 5px; }
.find-result { min-width: 76px; }
.find-close { margin-left: auto; font-weight: bold; }

.workspace { flex: 1; min-height: 0; display: flex; margin-top: 3px; }
.sidebar { width: 190px; min-width: 130px; display: flex; flex-direction: column; margin-right: 3px; background: var(--surface); border: 2px solid; border-color: var(--mid-dark) var(--light) var(--light) var(--mid-dark); }
.sidebar[hidden] { display: none; }
.sidebar-header { min-height: 27px; display: flex; align-items: center; justify-content: space-between; padding: 3px 4px 3px 7px; font-weight: bold; border-bottom: 1px solid var(--mid-dark); }
.sidebar-collapse { width: 19px; height: 19px; padding: 0; line-height: 14px; font-weight: bold; background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); }
.sidebar-collapse:active { border-color: var(--dark) var(--light) var(--light) var(--dark); }
.sidebar-empty { flex: 1; display: grid; place-content: center; justify-items: center; color: #606060; text-align: center; padding: 10px; }
.office-navigation { flex: 1; min-height: 0; overflow: auto; padding: 5px; background: #fff; }
.office-navigation[hidden] { display: none; }
.office-nav-button { display: block; width: 100%; min-height: 32px; margin-bottom: 3px; padding: 5px 7px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; background: #fff; border: 1px solid transparent; }
.office-nav-button[aria-current="true"] { color: #fff; background: var(--selection); border-color: #000; }
.empty-page { width: 32px; height: 40px; display: block; background: white; border: 1px solid #777; box-shadow: 2px 2px #aaa; }
.page-list { flex: 1; overflow: auto; padding: 5px; background: #fff; }
.page-list[hidden] { display: none; }
.page-list button { width: 100%; display: flex; align-items: center; gap: 7px; margin-bottom: 3px; padding: 4px; border: 1px solid transparent; background: transparent; text-align: left; }
.page-list button:hover, .page-list button[aria-current="page"] { color: #fff; background: var(--selection); border-color: #000; }
.page-list-icon { width: 20px; height: 26px; flex: 0 0 auto; background: #fff; border: 1px solid #555; box-shadow: 1px 1px #aaa; }

.document-area { position: relative; flex: 1; min-width: 0; overflow: auto; display: grid; place-items: center; background: #808080; border: 2px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); }
.welcome-panel { width: min(520px, calc(100% - 32px)); padding: 28px 24px 22px; text-align: center; background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.welcome-panel h1 { margin: 10px 0 4px; font-size: 24px; }
.welcome-panel > p { margin: 6px 0 18px; }
.primary-action { min-width: 125px; font-weight: bold; outline: 1px dotted #000; outline-offset: -5px; }
.welcome-panel .drop-hint { margin: 14px 0 12px; color: #555; }
.viewer-logo { width: 66px; height: 58px; position: relative; display: inline-block; }
.logo-page { position: absolute; left: 8px; top: 0; width: 39px; height: 51px; background: white; border: 2px solid #000080; box-shadow: inset 0 0 0 3px #ddd; }
.logo-page::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: #808080; box-shadow: 0 7px #808080, 0 14px #808080; }
.logo-glass { position: absolute; right: 1px; bottom: 5px; width: 28px; height: 28px; border: 5px solid #000080; border-radius: 50%; background: rgba(0,255,255,.2); }
.logo-glass::after { content: ""; position: absolute; right: -12px; bottom: -9px; width: 16px; height: 5px; transform: rotate(45deg); background: #000080; }
.format-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
.format-list span { padding: 3px 6px; background: var(--mid-light); border: 1px solid; border-color: var(--light) var(--mid-dark) var(--mid-dark) var(--light); }

.file-placeholder { padding: 35px; transform-origin: center; }
.placeholder-sheet { width: min(480px, 70vw); min-height: 560px; padding: 55px 45px; background: #fff; box-shadow: 3px 3px 7px rgba(0,0,0,.5); text-align: center; overflow-wrap: anywhere; }
.placeholder-type { display: inline-block; padding: 5px 8px; color: #fff; background: #000080; font-weight: bold; }
.placeholder-sheet strong { display: block; margin: 35px 0 15px; font-size: 20px; }
.placeholder-sheet p { color: #555; }
.drop-overlay { position: absolute; inset: 10px; z-index: 10; display: grid; place-items: center; color: #fff; background: rgba(0,0,128,.82); border: 3px dashed #fff; font-size: 18px; font-weight: bold; pointer-events: none; }
.drop-overlay[hidden] { display: none; }
.pdf-viewer { align-self: stretch; justify-self: stretch; min-width: 100%; min-height: 100%; padding: 18px; }
.pdf-viewer[hidden] { display: none; }
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: max-content; }
.pdf-page { position: relative; --total-scale-factor: 1; --scale-round-x: 1px; --scale-round-y: 1px; background: #fff; box-shadow: 2px 2px 6px rgba(0,0,0,.65); }
.pdf-page::before { content: attr(data-page-label); position: absolute; top: 4px; left: 4px; z-index: 1; padding: 2px 4px; color: #fff; background: #555; opacity: .65; pointer-events: none; }
.pdf-page canvas { display: block; }
.textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; letter-spacing: normal; word-spacing: normal; text-align: initial; transform-origin: 0 0; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0 0; user-select: text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; --scale-x: 1; --rotate: 0deg; font-size: calc(var(--text-scale-factor) * var(--font-height)); transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer ::selection { color: transparent; background: rgba(0, 0, 255, .28); }
::highlight(viewer98-find) { color: transparent; background: rgba(255, 255, 0, .55); }
::highlight(viewer98-find-current) { color: transparent; background: rgba(255, 128, 0, .8); }
.pdf-page-error { display: grid; place-items: center; min-width: 320px; min-height: 180px; padding: 20px; color: #800000; text-align: center; }
.browser-viewer { align-self: stretch; justify-self: stretch; width: 100%; height: 100%; min-width: 0; min-height: 0; background: #525659; }
.browser-viewer[hidden] { display: none; }
.browser-viewer iframe { display: block; width: 100%; height: 100%; border: 0; background: #525659; }
.epub-viewer { align-self: stretch; justify-self: stretch; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 18px; }
.epub-viewer[hidden] { display: none; }
.epub-book { width: 100%; height: 100%; overflow: hidden; background: #fff; border: 1px solid #555; box-shadow: 2px 2px 6px rgba(0,0,0,.55); }
.epub-book iframe { border: 0; background: #fff; }
.toc-item { padding-left: calc(5px + var(--toc-depth, 0) * 12px) !important; }
.image-viewer { align-self: stretch; justify-self: stretch; min-width: 100%; min-height: 100%; padding: 18px; }
.image-viewer[hidden] { display: none; }
.image-stage { position: relative; margin: auto; transform-origin: center; }
.image-stage img { position: absolute; left: 50%; top: 50%; display: block; max-width: none; transform-origin: center; image-rendering: auto; box-shadow: 2px 2px 6px rgba(0,0,0,.55); }
.text-viewer { align-self: stretch; justify-self: stretch; min-width: 100%; min-height: 100%; padding: 18px; }
.text-viewer[hidden] { display: none; }
.text-viewer pre { box-sizing: border-box; width: min(760px, 100%); min-height: calc(100% - 2px); margin: 0 auto; padding: 24px; color: #000; background: #fff; border: 1px solid #555; box-shadow: 2px 2px 6px rgba(0,0,0,.55); font: 13px/1.45 "Courier New", monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; user-select: text; }
.markdown-content { width: min(860px, 100%); min-height: calc(100% - 2px); margin: 0 auto; padding: 28px 36px; color: #000; background: #fff; border: 1px solid #555; box-shadow: 2px 2px 6px rgba(0,0,0,.55); font: 15px/1.55 Arial, sans-serif; overflow-wrap: anywhere; user-select: text; }
.markdown-content[hidden] { display: none; }
.markdown-content h1, .markdown-content h2 { border-bottom: 1px solid #aaa; padding-bottom: 5px; }
.markdown-content pre, .markdown-content code { font-family: "Courier New", monospace; }
.markdown-content pre { overflow: auto; padding: 12px; background: #eee; border: 1px solid #aaa; }
.markdown-content :not(pre) > code { padding: 1px 3px; background: #eee; }
.markdown-content img { max-width: 100%; }
.markdown-content blockquote { margin-left: 0; padding-left: 14px; color: #555; border-left: 4px solid #aaa; }
.office-viewer { align-self: stretch; justify-self: stretch; min-width: 100%; min-height: 100%; padding: 18px; }
.office-viewer[hidden] { display: none; }
.office-content { min-width: 100%; min-height: 100%; transform-origin: top center; }
.office-content .docx-wrapper { background: transparent; padding: 0; }
.office-content .docx-wrapper > section.docx { margin: 0 auto 18px; box-shadow: 2px 2px 6px rgba(0,0,0,.55); }
.spreadsheet-shell { display: inline-block; min-width: 100%; padding: 0 0 18px; transform-origin: top left; }
.spreadsheet-table { border-collapse: collapse; background: #fff; box-shadow: 2px 2px 6px rgba(0,0,0,.45); }
.spreadsheet-table th, .spreadsheet-table td { min-width: 70px; max-width: 320px; height: 23px; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #aaa; }
.spreadsheet-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.spreadsheet-table .row-number { min-width: 38px; color: #333; text-align: right; background: var(--surface); }
.lightweight-source { box-sizing: border-box; width: min(960px, 100%); min-height: calc(100% - 2px); margin: 0 auto; padding: 24px; color: #000; background: #fff; border: 1px solid #555; box-shadow: 2px 2px 6px rgba(0,0,0,.55); font: 13px/1.45 "Courier New", monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; user-select: text; }
.presentation-stage { position: relative; margin: auto; transform-origin: top center; }
.presentation-stage .pptx-slide { margin: 0 auto; box-shadow: 2px 2px 7px rgba(0,0,0,.65); }
.presentation-stage .pptx-slide[hidden] { display: none; }
.edge-navigation { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.edge-navigation[hidden] { display: none; }
.edge-navigation-button { position: absolute; top: 50%; width: 38px; height: 64px; padding: 0; transform: translateY(-50%); color: #000; background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); font: bold 22px/1 var(--font); opacity: .22; pointer-events: auto; }
.edge-navigation-button:hover, .edge-navigation-button:focus-visible { opacity: 1; }
.edge-navigation-button:active { border-color: var(--dark) var(--light) var(--light) var(--dark); padding-top: 2px; }
.edge-previous { left: 8px; }
.edge-next { right: 8px; }
.loading-panel { position: absolute; z-index: 12; width: min(330px, calc(100% - 30px)); padding: 16px; background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: 2px 2px #333; text-align: center; }
.loading-panel[hidden] { display: none; }
.loading-title { margin-bottom: 12px; font-weight: bold; }
.progress-track { height: 18px; margin-bottom: 12px; padding: 2px; background: #fff; border: 2px solid; border-color: var(--mid-dark) var(--light) var(--light) var(--mid-dark); }
.progress-track span { display: block; width: 15%; height: 100%; background: var(--selection); transition: width .15s linear; }

.status-bar { min-height: 24px; display: flex; gap: 3px; padding-top: 3px; }
.status-bar[hidden] { display: none; }
.status-section { min-width: 115px; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid; border-color: var(--mid-dark) var(--light) var(--light) var(--mid-dark); }
.status-type[data-action="markdown-view"], .status-type[data-action="delimited-view"] { cursor: pointer; }
.status-type[data-action="markdown-view"]::after, .status-type[data-action="delimited-view"]::after { content: " ▾"; }
.status-type[data-action="markdown-view"]:focus, .status-type[data-action="delimited-view"]:focus { outline: 1px dotted #000; outline-offset: -3px; }
.status-message { flex: 1; }
.native-reading-control { flex: 0 0 auto; min-width: 0; padding: 0; overflow: visible; }
.native-reading-control[hidden] { display: none; }
.status-reading-button { min-height: 20px; display: flex; align-items: center; gap: 5px; padding: 1px 7px; background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); font: inherit; white-space: nowrap; }
.status-reading-button:active, .status-reading-button[aria-pressed="true"] { border-color: var(--dark) var(--light) var(--light) var(--dark); }
.status-reading-button .book-icon { width: 17px; height: 13px; }
.status-page { min-width: 155px; text-align: center; }
.status-zoom { min-width: 62px; text-align: center; }

.classic-dialog { width: min(390px, calc(100% - 24px)); padding: 3px; background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); color: #000; }
.classic-dialog::backdrop { background: rgba(0,0,0,.3); }
.dialog-title-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 3px; color: #fff; background: var(--title); font-weight: bold; }
.dialog-content { min-height: 80px; padding: 20px 16px; line-height: 1.5; }
.dialog-content p { margin: 0 0 8px; }
.dialog-field { display: block; margin-top: 10px; }
.dialog-field span { display: block; margin-bottom: 4px; }
.dialog-field input { width: 100%; height: 24px; padding: 2px 4px; background: #fff; border: 2px solid; border-color: var(--mid-dark) var(--light) var(--light) var(--mid-dark); font: inherit; }
.preference-group { margin: 0; padding: 10px 12px 8px; border: 2px groove var(--light); }
.preference-group legend { padding: 0 4px; }
.preference-option { display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; align-items: start; margin-bottom: 9px; }
.preference-option input { margin: 2px 0 0; }
.preference-option small { grid-column: 2; color: #555; line-height: 1.35; }
.dialog-actions { display: flex; justify-content: center; padding: 0 10px 10px; }
.dialog-actions { gap: 7px; }
.dialog-actions button { min-width: 80px; }

@media (max-width: 650px) {
  .sidebar { display: none; }
  .toolbar .tool-open span:last-child, .toolbar > .tool-button:last-of-type { display: none; }
  .toolbar { overflow-x: auto; }
  .status-section { min-width: 0; }
  #statusType, #statusSize { display: none; }
  .welcome-panel { padding: 20px 12px; }
}