: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 {
  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); }
.folder-icon { width: 17px; height: 12px; position: relative; display: inline-block; background: #ffff00; border: 1px solid #000; }
.folder-icon::before { content: ""; position: absolute; left: 1px; top: -5px; width: 8px; height: 5px; background: #ffff00; border: 1px solid #000; border-bottom: 0; }

.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; }
.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; 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; }
.pdf-page-error { display: grid; place-items: center; min-width: 320px; min-height: 180px; padding: 20px; color: #800000; text-align: center; }
.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; }
.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-message { flex: 1; }
.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; }
.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; }
}