:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif; background: #0b1120; color: #e5e7eb; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #0b1120; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .38; }
.hidden, [hidden] { display: none !important; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#app { min-height: 100vh; display: grid; grid-template-rows: 64px 1fr 72px; background: radial-gradient(circle at 50% 35%, #26334a, #101827 58%, #070b14); }
.topbar { display: flex; align-items: center; gap: 22px; padding: 0 22px; background: rgba(8, 13, 25, .9); border-bottom: 1px solid #253148; backdrop-filter: blur(14px); z-index: 3; }.brand { color: #f8d275; font-weight: 800; letter-spacing: .08em; text-decoration: none; white-space: nowrap; }.brand span { color: #9ba9be; font-size: .66rem; font-weight: 700; }.source-controls { margin-left: auto; display: flex; align-items: center; gap: 10px; }.file-button, .url-form button, .primary-button { background: #f6cd65; border: 0; border-radius: 8px; color: #1a2230; font-weight: 700; padding: 8px 12px; }.file-button:hover, .url-form button:hover, .primary-button:hover { background: #ffe08b; }.url-form { display: flex; }.url-form input { width: min(280px, 26vw); color: #e5e7eb; background: #182337; border: 1px solid #34435b; border-radius: 8px 0 0 8px; padding: 8px 10px; }.url-form button { border-radius: 0 8px 8px 0; }.icon-button { border: 0; background: transparent; color: #d9e2ef; font-size: 1.55rem; }
.reader-shell { min-height: 0; display: flex; overflow: hidden; }.sidebar { flex: 0 0 280px; width: 280px; background: rgba(11, 18, 32, .9); border-right: 1px solid #2a384e; transition: flex-basis .24s ease, width .24s ease; overflow: hidden; }.sidebar.collapsed { flex-basis: 0; width: 0; border-right: 0; }.side-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #2b3a50; }.side-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #91a0b7; padding: 14px 3px 11px; font-size: .8rem; }.side-tab.active { border-color: #f6cd65; color: #fff3c8; }.side-panel { display: none; height: calc(100% - 46px); overflow-y: auto; padding: 13px; }.side-panel.active { display: block; }.empty-message, .search-status { color: #98a6bc; font-size: .88rem; line-height: 1.5; }.thumbnail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.thumbnail { background: #172236; border: 1px solid #33435d; border-radius: 5px; color: #97a5ba; padding: 5px; }.thumbnail canvas { display: block; width: 100%; height: auto; background: white; }.thumbnail span { display: block; margin-top: 4px; text-align: center; font-size: .75rem; }.thumbnail.current { border-color: #f6cd65; box-shadow: 0 0 0 1px #f6cd65; }.secondary-button { width: 100%; margin-top: 12px; padding: 8px; background: transparent; color: #d2d9e5; border: 1px solid #40516a; border-radius: 7px; }.outline-list, .search-results, .note-list { list-style: none; padding: 0; margin: 0; }.outline-list li { padding-left: calc(var(--depth) * 13px); }.outline-list button, .search-results button, .note-list button { width: 100%; text-align: left; border: 0; color: #c9d4e6; background: transparent; padding: 8px; border-radius: 5px; }.outline-list button:hover, .search-results button:hover, .note-list button:hover { background: #25334a; }.search-form { display: flex; gap: 6px; }.search-form input { min-width: 0; width: 100%; padding: 8px; background: #172236; border: 1px solid #3b4c65; border-radius: 6px; color: white; }.search-form button { border: 0; border-radius: 6px; background: #d6b252; color: #151b26; font-weight: 700; padding: 6px 8px; }.search-results button span, .note-list button span { display: block; margin-top: 3px; color: #9dacbf; font-size: .79rem; line-height: 1.4; }.search-results strong, .note-list strong { color: #ffe18c; font-size: .83rem; }
.book-area { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 24px 14px; overflow: auto; }.loader { text-align: center; color: #a9b7cb; }.loader-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 13px; background: #f4cc65; color: #162033; font-size: 1.65rem; font-weight: 900; border-radius: 16px; box-shadow: 0 10px 35px #0008; }.page-stage { display: grid; place-items: center; min-height: 0; perspective: 1700px; }.page-frame { position: relative; background: white; box-shadow: 0 20px 60px #000b; transform-origin: left center; }.page-turn { animation: pageTurn .38s ease-out; }@keyframes pageTurn { 0% { transform: rotateY(-10deg); filter: brightness(.77); } 100% { transform: rotateY(0); filter: brightness(1); } }.page-frame.annotation-mode { outline: 3px dashed #f6cd65; cursor: crosshair; }.page-frame canvas { display: block; }.note-overlay { position: absolute; inset: 0; }.note-marker { position: absolute; transform: translate(-50%, -50%); width: 27px; height: 27px; border-radius: 50%; border: 2px solid #8f6517; background: #ffdb71; color: #563900; box-shadow: 0 2px 8px #0006; }.document-title { margin: 15px 0 0; font-size: .85rem; color: #b9c4d5; }
.toolbar { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 16px; background: rgba(8, 13, 25, .94); border-top: 1px solid #253148; z-index: 3; }.tool-button { display: grid; place-items: center; min-width: 42px; min-height: 48px; border: 0; border-radius: 7px; color: #c9d4e6; background: transparent; font-size: 1.2rem; }.tool-button span { font-size: .63rem; margin-top: 1px; }.tool-button:hover, .tool-button.selected { background: #26344b; color: #ffe190; }.tool-divider { height: 32px; width: 1px; background: #35445c; margin: 0 5px; }.page-field { display: flex; align-items: center; gap: 5px; color: #c5cfdd; white-space: nowrap; font-size: .84rem; }.page-field input { width: 48px; border: 1px solid #46566e; border-radius: 5px; padding: 5px; color: white; background: #152035; text-align: center; }.zoom-label { width: 40px; color: #b5c1d2; text-align: center; font-size: .77rem; }
.dialog { width: min(500px, calc(100vw - 32px)); border: 1px solid #42536c; border-radius: 14px; padding: 0; color: #e5e7eb; background: #121d2e; box-shadow: 0 24px 90px #000b; }.dialog::backdrop { background: #030812a8; backdrop-filter: blur(4px); }.dialog form, .dialog > div { padding: 22px; }.dialog h2 { margin: 0 0 16px; font-size: 1.15rem; }.dialog label { display: block; color: #bdc9d9; font-size: .85rem; margin-bottom: 6px; }.dialog textarea { width: 100%; min-height: 150px; resize: vertical; color: #eef4fd; background: #1a283d; border: 1px solid #40536e; border-radius: 8px; padding: 10px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }.dialog-actions .secondary-button { width: auto; margin: 0; }.dialog-heading { display: flex; align-items: center; justify-content: space-between; }.close-button { border: 0; background: transparent; color: #bcc9da; font-size: 1.5rem; }.video-form { display: flex; gap: 8px; padding: 0 !important; }.video-form input { flex: 1; min-width: 0; background: #1a283d; color: #eef4fd; border: 1px solid #40536e; border-radius: 7px; padding: 9px; }.video-form button { background: #f6cd65; border: 0; border-radius: 7px; color: #172033; font-weight: 700; padding: 8px; }.video-list { display: grid; gap: 16px; margin-top: 18px; }.video-card { border: 1px solid #354964; border-radius: 8px; overflow: hidden; background: #18253a; }.video-card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }.video-card p { margin: 9px 10px 4px; }.text-button { margin: 0 10px 10px; border: 0; background: transparent; color: #f6cd65; padding: 0; }.toast { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 10px 14px; border-radius: 9px; color: #fff; background: #253653; box-shadow: 0 7px 24px #0008; transition: .2s; z-index: 8; font-size: .88rem; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 860px) { #app { grid-template-rows: auto 1fr 64px; }.topbar { min-height: 60px; padding: 9px 14px; flex-wrap: wrap; gap: 8px; }.source-controls { margin-left: 0; flex: 1; justify-content: flex-end; }.url-form { display: none; }.sidebar { position: absolute; top: 60px; bottom: 64px; z-index: 5; box-shadow: 8px 0 25px #0008; }.book-area { padding: 18px 8px; }.wide-only { display: none; }.toolbar { justify-content: space-between; gap: 0; padding: 6px 8px; }.tool-button { min-width: 38px; min-height: 44px; }.tool-button span { display: none; }.tool-divider { margin: 0 2px; }.page-field { font-size: .77rem; }.page-field input { width: 41px; }.document-title { max-width: 95vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }