#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: #f6f6f6; }

.pdf-topbar { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--fo-line); }
.menu-btn { border: 1px solid var(--fo-line); border-radius: 6px; padding: 5px 10px; background: #fff; cursor: pointer; }
.doc-name { font-weight: 600; color: #333; }
.top-tabs { display: flex; gap: 2px; margin-left: 18px; }
.top-tabs .tt { border: none; background: none; padding: 12px 14px; cursor: pointer; border-bottom: 2px solid transparent; color: #444; font-size: 14px; }
.top-tabs .tt:hover { color: #c62f22; }
.top-tabs .tt.active { color: #c62f22; border-bottom-color: #c62f22; font-weight: 600; }

.pdf-body { flex: 1; display: flex; min-height: 0; }
.tools { width: 268px; background: #fff; border-right: 1px solid var(--fo-line); overflow-y: auto; padding: 14px; }
.tool-panel { display: none; }
.tool-panel.active { display: block; }
.tp-title { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.tp-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #888; margin: 16px 0 6px; }
.tool-panel a { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 6px; cursor: pointer; color: #222; font-size: 14px; }
.tool-panel a:hover { background: #f4f4f4; }
.tool-panel a i { width: 22px; text-align: center; font-style: normal; }
.tp-row { display: flex; gap: 8px; margin: 6px 0; }
.tp-row button { width: 40px; height: 36px; border: 1px solid var(--fo-line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 16px; }
.tp-row button:hover { background: #f4f4f4; }
.conv { display: flex; align-items: center; gap: 8px; border: 1px solid var(--fo-line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-size: 13px; }
.conv b { margin-left: auto; color: #888; font-size: 11px; }
.conv:has(input:checked) { border-color: #c62f22; background: #fdf0ee; }
.conv-btn { width: 100%; margin: 10px 0; background: #c62f22; }
.primary { background: #c62f22; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-weight: 600; cursor: pointer; }

.stage { flex: 1; overflow: auto; }
.home { max-width: 900px; margin: 0 auto; padding: 34px; }
.home h1 { font-weight: 400; font-size: 26px; }
.home-tools { display: flex; gap: 10px; flex-wrap: wrap; border: 1px solid var(--fo-line); border-radius: 12px; padding: 16px; background: #fff; margin: 18px 0; }
.home-tools button { border: 1px solid var(--fo-line); background: #fff; border-radius: 8px; padding: 10px 14px; cursor: pointer; font-size: 13px; }
.home-tools button:hover { border-color: #c62f22; color: #c62f22; }
.recent-head { font-size: 20px; margin: 20px 0 8px; }
.recent { background: #fff; border: 1px solid var(--fo-line); border-radius: 10px; overflow: hidden; }
.recent .r { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.recent .r:hover { background: #faf7f7; }
.recent .r .ri { width: 30px; height: 36px; background: #c62f22; color: #fff; border-radius: 3px; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.recent .r .rn { flex: 1; }
.recent .r .rn small { color: #999; display: block; }
.recent .r .rm { color: #999; font-size: 12px; }
.recent .r .rd { opacity: 0; color: #c62f22; }
.recent .r:hover .rd { opacity: .8; }
.recent-empty { padding: 24px; color: #999; }

.viewer-wrap { display: flex; height: 100%; }
.page-thumbs { width: 150px; background: #ededed; border-right: 1px solid var(--fo-line); overflow-y: auto; padding: 12px 8px; }
.page-thumbs .pt { position: relative; margin-bottom: 10px; cursor: pointer; }
.page-thumbs .pt canvas, .page-thumbs .pt .ph { width: 100%; border: 2px solid transparent; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); display: block; }
.page-thumbs .pt.active canvas { border-color: #c62f22; }
.page-thumbs .pt .pn { text-align: center; font-size: 11px; color: #666; margin-top: 2px; }
.page-thumbs .pt .pa { position: absolute; top: 4px; right: 6px; display: flex; gap: 3px; opacity: 0; }
.page-thumbs .pt:hover .pa { opacity: 1; }
.page-thumbs .pt .pa button { width: 22px; height: 22px; border: none; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 11px; }
.viewer { flex: 1; overflow: auto; padding: 24px; text-align: center; background: #e2e2e2; }
.viewer canvas { box-shadow: 0 2px 10px rgba(0,0,0,.2); margin: 0 auto 18px; display: block; background: #fff; }
.viewer .loading { color: #666; padding: 40px; }

.pdf-statusbar { display: flex; align-items: center; height: 26px; padding: 0 14px; background: #c62f22; color: #fff; font-size: 12px; }