:root {
  --paper: #fff;
  --ink: #000;
  --muted: #555;
  --line: #000;
  --font-size: 20px;
  --line-height: 1.55;
  --page-margin: 24px;
  --reader-font: Georgia, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--paper); color: var(--ink); }
body { font-family: Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
button, input, select { color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 0; font: inherit; }
button { min-height: 44px; padding: 8px 12px; font-weight: 700; }
button:active { color: var(--paper); background: var(--ink); }
.hidden { display: none !important; }
.screen { min-height: 100dvh; background: var(--paper); }

.library-header { display: flex; justify-content: space-between; align-items: center; padding: max(18px, env(safe-area-inset-top)) 18px 12px; border-bottom: 3px solid var(--line); }
.library-header h1 { margin: 0; font-family: Georgia, serif; font-size: 34px; line-height: 1; }
.library-header p { margin: 4px 0 0; color: var(--muted); }
.header-actions { display: flex; gap: 7px; align-items: center; }
.version-btn { min-width: 46px; padding: 5px 8px; font-size: 14px; }
.icon-btn { min-width: 46px; padding: 5px; font-size: 22px; }
.search { display: flex; gap: 8px; padding: 12px; border-bottom: 2px solid var(--line); }
.search input { flex: 1; min-width: 0; padding: 10px; }
.library-header, .crumbs, .file-list, .resume-section, .status {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.crumbs { padding: 10px 14px; min-height: 42px; border-bottom: 1px solid var(--line); font-weight: 700; overflow-wrap: anywhere; }
.crumbs button { min-height: 34px; padding: 2px 8px; margin-right: 8px; }
.library-menu { position: fixed; z-index: 70; inset: 0; display: grid; place-items: end center; padding: 18px; background: rgb(255 255 255 / 88%); }
.library-menu-card { width: min(100%, 480px); background: var(--paper); border: 3px solid var(--line); }
.library-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px 9px 14px; border-bottom: 2px solid var(--line); font-size: 18px; }
.library-actions { display: grid; gap: 8px; padding: 12px; }
.library-actions button { width: 100%; font-size: 15px; }
.upload-status { padding: 10px 14px; border-bottom: 2px solid var(--line); font-weight: 700; }
.status { padding: 24px; text-align: center; color: var(--muted); }
.file-list { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.file-row { width: 100%; min-height: 66px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.file-row .glyph { font-family: Georgia, serif; font-size: 25px; font-weight: 700; }
.file-row .name { display: block; font-weight: 700; overflow-wrap: anywhere; }
.file-row .meta { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.file-row .arrow { font-size: 22px; }
.file-list.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; }
.file-list.grid .file-row { min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; padding: 12px; border: 2px solid var(--line); }
.file-list.grid .file-row .glyph { flex: 1; display: grid; place-items: center; margin-bottom: 10px; border-bottom: 2px solid var(--line); font: 700 58px Georgia, serif; }
.file-list.grid .file-row .name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }
.file-list.grid .file-row .arrow { display: none; }
.file-list.grid .file-row .meta { margin-top: 7px; }
.resume-section { padding: 12px 14px 0; border-bottom: 2px solid var(--line); }
.resume-section h2 { margin: 0 0 6px; font-size: 15px; text-transform: uppercase; }
.resume-section .file-row { padding-left: 0; padding-right: 0; }

.reader-screen { position: fixed; inset: 0; overflow: hidden; }
.reader-bar, .reader-footer { position: absolute; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 7px; background: var(--paper); border-color: var(--line); }
.reader-bar { top: 0; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; border-bottom: 2px solid var(--line); }
.reader-footer { bottom: 0; height: calc(58px + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom); border-top: 2px solid var(--line); }
.reader-footer button { flex: 1; padding: 5px; font-size: 14px; }
.reader-heading { min-width: 0; flex: 1; }
.reader-heading strong, .reader-heading span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-heading span { margin-top: 2px; font-size: 12px; color: var(--muted); }
.reader-body { position: absolute; inset: calc(58px + env(safe-area-inset-top)) 0 calc(58px + env(safe-area-inset-bottom)); background: var(--paper); overflow: hidden; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; }
.reader-screen.controls-hidden .reader-body { inset: 0; }
.reader-screen.controls-hidden .reader-bar, .reader-screen.controls-hidden .reader-footer { display: none; }
.format-view { width: 100%; height: 100%; }
.pdf-view { overflow: auto; text-align: center; }
.pdf-view canvas { display: block; max-width: 100%; margin: 0 auto; background: #fff; }
.image-view { display: grid; place-items: center; overflow: hidden; background: #fff; }
.image-view img { display: block; width: 100%; height: 100%; object-fit: contain; }
.text-view { overflow-y: auto; padding: var(--page-margin); font-family: var(--reader-font); font-size: var(--font-size); line-height: var(--line-height); font-weight: 400; overflow-wrap: anywhere; }
.text-view.heavy { font-weight: 600; }
.text-view h1, .text-view h2, .text-view h3 { line-height: 1.15; }
.text-view img { max-width: 100%; filter: grayscale(1) contrast(1.15); }
.text-view pre { white-space: pre-wrap; font: inherit; margin: 0; }
.reader-loading { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; background: var(--paper); z-index: 8; }
.tap-zone { position: absolute; top: 0; bottom: 0; z-index: 9; opacity: 0; border: 0; padding: 0; }
.tap-zone.left { left: 0; width: 27%; }
.tap-zone.center { left: 27%; width: 46%; }
.tap-zone.right { right: 0; width: 27%; }
.sheet { position: absolute; z-index: 40; inset: calc(58px + env(safe-area-inset-top)) 0 0; overflow-y: auto; background: var(--paper); border-top: 2px solid var(--line); }
.sheet-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--paper); border-bottom: 2px solid var(--line); font-size: 18px; }
.sheet-head button { min-width: 44px; font-size: 24px; }
.sheet-list button { width: 100%; min-height: 50px; border: 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.settings-sheet { padding-bottom: 30px; }
.settings-sheet label { display: block; padding: 16px; border-bottom: 1px solid var(--line); font-weight: 700; }
.settings-sheet input[type=range], .settings-sheet select { display: block; width: 100%; margin-top: 12px; }
.settings-sheet .check { display: flex; gap: 12px; align-items: center; }
.settings-sheet .check input { width: 24px; height: 24px; }

.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.login-card { width: min(100%, 360px); text-align: center; }
.login-card .mark { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto; border: 4px solid var(--line); font: 700 44px Georgia, serif; }
.login-card h1 { margin-bottom: 0; font: 700 36px Georgia, serif; }
.login-card form { margin-top: 30px; text-align: left; }
.login-card input, .login-card button { width: 100%; margin-top: 8px; padding: 12px; }
.login-card .error { min-height: 24px; font-weight: 700; }

@media (min-width: 700px) {
  .library-header, .crumbs, .upload-status, .file-list, .resume-section, .search { max-width: 760px; margin-left: auto; margin-right: auto; }
  .file-list.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}