@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root { --ink:#25302e; --muted:#7d8580; --paper:#fbfaf7; --canvas:#eceee9; --line:#e4e7df; --teal:#1d837b; --teal-dark:#156b65; --mint:#e0f2eb; --coral:#ee8a66; --shadow:0 18px 55px rgba(47,65,60,.10); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--paper); color:var(--ink); }
body { font-family:'Manrope','Noto Sans SC',sans-serif; font-size:13px; }
button,input,textarea,select { font:inherit; } button { border:0; cursor:pointer; color:inherit; }

.app-shell { display:flex; width:100%; height:100vh; }
.sidebar { display:flex; flex:0 0 206px; flex-direction:column; height:100%; padding:26px 16px 18px; border-right:1px solid var(--line); background:#f7f6f1; }
.brand { display:flex; align-items:center; gap:10px; padding:0 10px 33px; font-size:16px; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--teal); color:#fff; font-weight:800; box-shadow:0 6px 13px rgba(29,131,123,.2); }
.side-nav { display:grid; gap:6px; }.nav-item { display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border-radius:9px; background:transparent; color:#7b8580; font-size:11px; font-weight:700; text-align:left; }.nav-item span { width:15px; color:#82908a; text-align:center; }.nav-item.active { background:#e0f0eb; color:var(--teal-dark); }.nav-item.active span { color:var(--teal); }
.sidebar-bottom { margin-top:auto; }.usage-card { padding:14px 12px; border:1px solid #e3e6de; border-radius:11px; background:#fff; }.usage-heading { display:flex; justify-content:space-between; margin-bottom:9px; font-size:10px; font-weight:800; }.usage-heading b { color:var(--teal); }.progress { height:5px; overflow:hidden; border-radius:8px; background:#e7ece8; }.progress i { display:block; width:68%; height:100%; border-radius:inherit; background:var(--teal); }.usage-card small { display:block; margin-top:7px; color:var(--muted); font-size:9px; }.text-button { padding:0; background:none; color:var(--teal); font-size:10px; font-weight:800; }.usage-card .text-button { margin-top:10px; }.profile { display:flex; align-items:center; gap:8px; width:100%; margin-top:15px; padding:10px 3px 0; border-top:1px solid var(--line); background:none; text-align:left; }.avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#f2d4ae; color:#855e36; font-weight:800; }.profile b,.profile small { display:block; }.profile b { font-size:10px; }.profile small { margin-top:2px; color:var(--muted); font-size:9px; }.chevron { margin-left:auto; color:var(--muted); }

.main-content { display:grid; grid-template-rows:42px 29px minmax(0,1fr); gap:10px; width:calc(100% - 206px); height:100%; min-width:0; padding:18px 28px 18px; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-width:0; }.title-group { display:flex; align-items:baseline; gap:10px; }.title-group h1 { margin:0; font-size:22px; letter-spacing:-.06em; }.paper-status { color:#9aa49d; font-family:'DM Mono',monospace; font-size:9px; }.top-actions { display:flex; align-items:center; gap:8px; }.icon-button,.outline-button,.primary-button,.tool-button { border-radius:8px; font-weight:700; }.icon-button { width:28px; height:28px; border:1px solid var(--line); background:#fff; color:var(--muted); }.outline-button { padding:8px 12px; border:1px solid #d9ddd6; background:#fff; color:#53605b; font-size:10px; }.primary-button { padding:9px 14px; background:var(--teal); color:#fff; box-shadow:0 6px 15px rgba(29,131,123,.16); font-size:10px; }.primary-button:hover { background:var(--teal-dark); }.outline-button:hover { border-color:var(--teal); color:var(--teal); }.primary-button span { margin-left:5px; opacity:.8; }
.stepper { display:flex; align-items:center; gap:9px; }.step { display:flex; align-items:center; gap:7px; color:#b1b9b3; font-size:9px; font-weight:800; }.step span { display:grid; place-items:center; width:18px; height:18px; border:1px solid #dfe2dc; border-radius:50%; font-family:'DM Mono'; font-size:8px; }.step.done { color:var(--teal); }.step.done span { border-color:var(--teal); background:var(--teal); color:#fff; }.step.current { color:var(--ink); }.step.current span { border-color:var(--teal); color:var(--teal); }.stepper>i { width:42px; height:1px; background:#e2e4de; }

.workspace-card { display:flex; min-height:0; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow); }.workspace-toolbar { display:flex; flex:0 0 42px; align-items:center; justify-content:space-between; padding:0 15px; border-bottom:1px solid var(--line); background:#fff; }.toolbar-left,.toolbar-right { display:flex; align-items:center; gap:9px; }.page-title { font-size:11px; font-weight:800; }.page-count { color:var(--muted); font-family:'DM Mono'; font-size:9px; }.divider { width:1px; height:17px; background:var(--line); }.tool-button { padding:7px 10px; background:#e4f2ed; color:var(--teal-dark); font-size:9px; }
.workspace-body { display:grid; grid-template-columns:94px minmax(0,1fr) 318px; min-height:0; flex:1; }.page-rail { min-height:0; padding:13px 9px 9px; border-right:1px solid var(--line); background:#fafaf7; overflow-y:auto; }.rail-heading { display:flex; align-items:center; justify-content:space-between; padding:0 3px 9px; font-size:10px; }.dots-button { background:none; color:#a7aea8; letter-spacing:2px; }.thumbnail-list { display:grid; gap:8px; }.thumbnail { position:relative; padding:3px; border:1px solid #e4e5de; border-radius:5px; background:#fff; }.thumbnail img { display:block; width:100%; aspect-ratio:.71; object-fit:cover; object-position:top; border-radius:2px; }.thumbnail small { display:block; padding:3px 2px 0; color:#9ca49e; font-family:'DM Mono'; font-size:8px; text-align:center; }.thumbnail.active { padding:2px; border:2px solid var(--teal); box-shadow:0 3px 8px rgba(29,131,123,.15); }.thumbnail.active small { color:var(--teal); font-weight:700; }.thumbnail .check { position:absolute; top:3px; right:3px; display:grid; place-items:center; width:14px; height:14px; border-radius:50%; background:var(--teal); color:#fff; font-size:8px; }.add-page { width:100%; margin-top:12px; padding:8px 0; border:1px dashed #cdd3cc; border-radius:6px; background:transparent; color:#98a19a; font-size:14px; }
.canvas-area { display:flex; min-width:0; min-height:0; flex-direction:column; padding:10px 20px 8px; background:var(--canvas); }.page-stage { position:relative; display:grid; min-width:0; min-height:0; flex:1; place-items:center; overflow:hidden; }.page-stage img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; user-select:none; object-fit:contain; filter:drop-shadow(0 9px 13px rgba(49,60,56,.14)); }.page-empty { display:grid; gap:8px; place-items:center; color:#89938c; text-align:center; }.page-empty strong { color:#52645d; font-size:15px; }.page-empty span { color:#9ba49e; font-size:10px; }.page-empty .outline-button { margin-top:5px; }.page-empty.hidden { display:none; }.selection-layer { position:absolute; display:none; border:2px solid var(--teal); background:rgba(48,163,146,.09); box-shadow:0 0 0 1px rgba(255,255,255,.65) inset; pointer-events:none; }.selection-layer::before,.selection-layer::after { position:absolute; width:7px; height:7px; content:''; border:2px solid var(--teal); border-radius:2px; background:#fff; }.selection-layer::before { top:-5px; left:-5px; }.selection-layer::after { right:-5px; bottom:-5px; }.selection-label { position:absolute; display:none; padding:4px 7px; border-radius:4px; background:var(--teal); color:#fff; font-family:'DM Mono'; font-size:8px; pointer-events:none; }.canvas-footer { display:flex; flex:0 0 16px; align-items:flex-end; justify-content:space-between; margin-top:5px; color:#89938c; font-family:'DM Mono'; font-size:8px; }.canvas-footer b { color:var(--teal); }

.inspector { display:flex; min-height:0; flex-direction:column; border-left:1px solid var(--line); background:#fff; }.queue-header { display:flex; flex:0 0 53px; align-items:center; justify-content:space-between; padding:0 13px; border-bottom:1px solid var(--line); }.queue-header h2 { margin:0 0 3px; font-size:14px; letter-spacing:-.04em; }.queue-header>div:first-child span { color:#9aa39c; font-family:'DM Mono'; font-size:8px; }.capture-toggle { display:flex; gap:3px; padding:3px; border-radius:7px; background:#f1f3ee; }.capture-toggle button { padding:6px 5px; border-radius:5px; background:transparent; color:#99a29c; font-size:8px; font-weight:800; }.capture-toggle button.selected { background:#fff; color:var(--teal-dark); box-shadow:0 2px 5px rgba(50,70,60,.08); }.capture-toggle kbd { display:inline-grid; place-items:center; width:14px; height:14px; margin-right:2px; border:1px solid #dce5df; border-radius:3px; background:#f8faf6; color:var(--teal); font-family:'DM Mono'; font-size:8px; }
.queue-progress { flex:0 0 37px; padding:8px 13px 4px; border-bottom:1px solid #f0f1ed; }.queue-progress-label { display:flex; justify-content:space-between; margin-bottom:5px; color:#8b968f; font-family:'DM Mono'; font-size:8px; }.queue-progress .progress { height:4px; }.queue-progress .progress i { width:0; transition:width .2s ease; }.queue-list { display:flex; min-height:84px; flex:1; flex-direction:column; gap:6px; padding:8px 9px; overflow-y:auto; }.queue-empty { display:grid; min-height:84px; place-items:center; border:1px dashed #dce2da; border-radius:8px; color:#a3aca4; font-size:10px; }.queue-item { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:65px; padding:6px; border:1px solid #e7ebe4; border-radius:8px; background:#fff; cursor:pointer; }.queue-item:hover,.queue-item.selected { border-color:#aad6ca; background:#f6fbf8; }.queue-item.dragging { opacity:.42; }.queue-thumb { position:relative; display:grid; width:42px; height:52px; place-items:center; overflow:hidden; border-radius:4px; background:#edf0eb; }.queue-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; }.queue-thumb .spinner { position:absolute; inset:0; display:grid; place-items:center; background:rgba(24,108,101,.76); color:#fff; font-family:'DM Mono'; font-size:9px; animation:pulse 1s infinite; }.queue-copy { min-width:0; }.queue-topline { display:flex; align-items:center; gap:5px; }.queue-number { color:#4d5a53; font-family:'DM Mono'; font-size:9px; font-weight:700; }.queue-type { padding:3px 5px; border-radius:4px; background:#e6f3ee; color:var(--teal-dark); font-size:8px; white-space:nowrap; }.queue-type.media { background:#f3eee5; color:#9a7446; }.queue-copy p { overflow:hidden; margin:5px 0 0; color:#9ca59e; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.queue-mini-progress { height:3px; margin-top:6px; overflow:hidden; border-radius:3px; background:#e8eee9; }.queue-mini-progress i { display:block; width:0; height:100%; background:var(--teal); transition:width .2s ease; }.queue-status { align-self:start; padding-top:2px; color:#9ca69f; font-family:'DM Mono'; font-size:8px; white-space:nowrap; }.queue-status.success { color:var(--teal); }.queue-status.error { color:var(--coral); }.queue-status.processing { color:#bd8840; }.queue-detail { flex:0 0 128px; padding:9px 12px; border-top:1px solid var(--line); }.detail-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:#53615b; font-size:9px; font-weight:800; }.status-pill { padding:3px 5px; border-radius:5px; background:#f1f2ed; color:#8c9790; font-family:'DM Mono'; font-size:8px; font-weight:500; }.status-pill.success { background:var(--mint); color:var(--teal-dark); }.status-pill.processing { background:#fff3dc; color:#b27a2f; }.status-pill.error { background:#fff0eb; color:#c26f52; }.queue-detail textarea { display:block; width:100%; height:84px; padding:8px; resize:none; border:1px solid #e3e8e2; border-radius:6px; outline:0; background:#fbfcf9; color:#43504a; font-family:'Noto Sans SC',sans-serif; font-size:9px; line-height:1.6; }.queue-detail textarea:not(:disabled):focus { border-color:#9acfc2; box-shadow:0 0 0 3px rgba(29,131,123,.08); }.queue-detail textarea:disabled { color:#a6aea8; }.queue-footer { display:flex; flex:0 0 51px; align-items:center; justify-content:space-between; padding:0 12px; border-top:1px solid var(--line); }.queue-footer>span { color:#8b968f; font-family:'DM Mono'; font-size:8px; }.queue-footer .primary-button:disabled { cursor:not-allowed; opacity:.42; box-shadow:none; }

.toast { position:fixed; right:22px; bottom:20px; z-index:20; max-width:340px; padding:10px 13px; border:1px solid #cfe3da; border-radius:8px; background:#eff9f3; color:var(--teal-dark); box-shadow:0 10px 28px rgba(40,70,60,.15); font-size:10px; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s ease; }.toast.show { opacity:1; transform:translateY(0); }.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:rgba(37,48,46,.24); backdrop-filter:blur(3px); }.modal { position:relative; width:min(390px,calc(100vw - 30px)); padding:23px; border-radius:14px; background:#fff; box-shadow:0 22px 70px rgba(40,55,48,.22); }.modal h2 { margin:0 0 17px; font-size:18px; letter-spacing:-.05em; }.modal-close { position:absolute; top:10px; right:13px; padding:0; background:none; color:#a2aaa4; font-size:21px; }.export-summary { display:flex; gap:7px; margin:0 0 21px; }.export-summary span { flex:1; padding:10px 7px; border-radius:7px; background:#f4f6f1; color:#8a948d; font-size:8px; text-align:center; }.export-summary b { display:block; margin-bottom:2px; color:var(--teal-dark); font-family:'DM Mono'; font-size:15px; }.modal-actions { display:flex; justify-content:flex-end; gap:7px; }.hidden { display:none !important; }

@keyframes pulse { 0%,100%{opacity:.75} 50%{opacity:1} }
@media (max-width:980px) { .sidebar { flex-basis:170px; }.main-content { width:calc(100% - 170px); padding-right:15px; padding-left:15px; }.workspace-body { grid-template-columns:80px minmax(0,1fr) 280px; }.capture-toggle button { padding-right:3px; padding-left:3px; } }
@media (max-width:760px) { html,body { overflow:auto; }.app-shell { height:auto; min-height:100vh; }.sidebar { display:none; }.main-content { display:flex; width:100%; height:auto; min-height:100vh; flex-direction:column; padding:14px 10px; }.workspace-card { min-height:720px; }.workspace-body { grid-template-columns:70px minmax(0,1fr); min-height:630px; }.inspector { grid-column:1 / -1; min-height:370px; border-top:1px solid var(--line); border-left:0; }.queue-list { max-height:220px; }.top-actions .icon-button { display:none; }.stepper { flex:0 0 29px; }.stepper>i { width:25px; } }
.primary-button:disabled { cursor:not-allowed; opacity:.42; box-shadow:none; }
.queue-list { flex:0 1 auto; max-height:50%; }
.queue-detail { display:flex; flex:1 1 auto; min-height:128px; flex-direction:column; }
.queue-rendered { flex:1 1 auto; min-height:0; overflow:auto; padding:7px 8px; border:1px solid #e3e8e2; border-radius:6px; background:#fbfcf9; color:#43504a; font-size:9px; line-height:1.6; }
.queue-rendered:empty { display:none; }
.queue-rendered .katex-display { margin:.35em 0; overflow-x:auto; overflow-y:hidden; }
.queue-rendered .rendered-placeholder { color:#a6aea8; }
.queue-detail textarea { flex:1 1 auto; height:auto; min-height:58px; margin-top:6px; }
@media (max-width:760px) { .queue-list { max-height:220px; } }
.zoom-controls { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--line); border-radius:7px; background:#fafbf8; color:#7e8982; font-family:'DM Mono'; font-size:8px; }.zoom-controls>span { min-width:31px; text-align:center; }.zoom-button,.zoom-fit { display:grid; place-items:center; height:22px; border-radius:4px; background:transparent; color:var(--teal-dark); font-size:12px; line-height:1; }.zoom-button { width:22px; }.zoom-fit { padding:0 6px; font-family:'Manrope','Noto Sans SC',sans-serif; font-size:8px; font-weight:800; }.zoom-button:hover,.zoom-fit:hover { background:#e4f2ed; }
.page-stage { display:block; overflow:auto; }.page-frame { position:relative; margin:auto; }.page-stage img { width:100%; height:100%; max-width:none; max-height:none; object-fit:fill; }
.queue-item { position:relative; transition:border-color .15s ease,background .15s ease,transform .15s ease; }.queue-item.drop-before::before,.queue-item.drop-after::after { position:absolute; right:4px; left:4px; height:3px; border-radius:3px; background:var(--teal); box-shadow:0 0 0 1px rgba(255,255,255,.8),0 0 10px rgba(29,131,123,.75); content:''; animation:dropPulse .8s ease-in-out infinite; }.queue-item.drop-before::before { top:-6px; }.queue-item.drop-after::after { bottom:-6px; }
@keyframes dropPulse { 0%,100%{opacity:.55;transform:scaleX(.97)} 50%{opacity:1;transform:scaleX(1)} }