*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{font-family:Inter,Arial,sans-serif}:root{--app-bg:radial-gradient(circle at top, #f0f4f8 0%, #e2e8f0 45%);--text-primary:#1e293b;--text-heading:#0f172a;--status-color:#64748b;--btn-border:#cbd5e1;--btn-bg:linear-gradient(180deg, #fff 0%, #f1f5f9 100%);--btn-hover-border:#3b82f6;--close-border:#dc2626;--close-bg:linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);--close-hover-border:#ef4444;--export-border:#2563eb;--export-bg:linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);--export-hover-border:#60a5fa;--about-bg:#fff;--about-border:#e2e8f0;--about-text:#475569;--license-link:#2563eb;--panel-bg:#fff;--panel-border:#cbd5e1;--thumb-border:#cbd5e1;--thumb-bg:#f8fafc;--thumb-selected-border:#2563eb;--thumb-selected-shadow:#2563eb33;--thumb-select-color:#1e293b;--frame-bg:#e2e8f0;--preview-empty-color:#64748b;--preview-highlight-border:#3b82f6;--preview-highlight-bg:#eff6ff;--empty-help:#64748b;--preview-meta-color:#64748b;--preview-page-bg:#e2e8f0;--footer-link:#64748b;--footer-link-active:#2563eb;--export-btn-text:#f8fafc;--close-btn-text:#991b1b}html[data-theme=dark]{--app-bg:radial-gradient(circle at top, #24262b 0%, #0f1115 45%);--text-primary:#e9edf3;--text-heading:#e5e7eb;--status-color:#b6bcc7;--btn-border:#3a3f47;--btn-bg:linear-gradient(180deg, #2b2f36 0%, #23272e 100%);--btn-hover-border:#4ea3ff;--close-border:#8b2e2e;--close-bg:linear-gradient(180deg, #6e2323 0%, #591c1c 100%);--close-hover-border:#ff6a6a;--export-border:#2f6fbe;--export-bg:linear-gradient(180deg, #2f6fbe 0%, #275e9f 100%);--export-hover-border:#66b3ff;--about-bg:#1b1f25;--about-border:#2d3440;--about-text:#a8adb7;--license-link:#8fb1ff;--panel-bg:#1a1e24;--panel-border:#3b414b;--thumb-border:#3d4450;--thumb-bg:#242931;--thumb-selected-border:#4ea3ff;--thumb-selected-shadow:#4ea3ff33;--thumb-select-color:#e9edf3;--frame-bg:#151920;--preview-empty-color:#a4aab5;--preview-highlight-border:#4ea3ff;--preview-highlight-bg:#253140;--empty-help:#b7bdc8;--preview-meta-color:#a8adb7;--preview-page-bg:#151920;--footer-link:#a4aab5;--footer-link-active:#9ed1ff;--export-btn-text:#e9edf3;--close-btn-text:#e9edf3}.app{box-sizing:border-box;height:100vh;color:var(--text-primary);background:var(--app-bg);flex-direction:column;gap:12px;padding:16px;display:flex}.topbar{flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:relative}.topbar-top{justify-content:center;align-items:center;width:100%;display:flex;position:relative}.topbar-title-wrap{flex:1;justify-content:center;margin:0;display:flex}.topbar h1{color:var(--text-heading);margin:0;font-size:1.35rem}.topbar .app-title-link{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;margin:0;padding:0;display:inline-flex}.topbar .app-title-icon{object-fit:contain;flex-shrink:0;width:28px;height:28px;display:block}.topbar .app-title-link:hover{text-underline-offset:4px;text-decoration:underline}.theme-toggle{flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:inline-flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.theme-toggle svg{width:22px;height:22px}.toolbar{justify-content:center;gap:8px;display:flex}.toolbar button{padding:10px 16px;font-size:1rem}.close-project-btn{border-color:var(--close-border);background:var(--close-bg);color:var(--close-btn-text)}.close-project-btn:hover:not(:disabled){border-color:var(--close-hover-border)}.export-btn-active{border-color:var(--export-border);background:var(--export-bg);color:var(--export-btn-text)}.export-btn-active:hover:not(:disabled){border-color:var(--export-hover-border)}button{border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--text-primary);cursor:pointer;border-radius:8px;padding:8px 12px}button:hover:not(:disabled){border-color:var(--btn-hover-border)}button:disabled{opacity:.5;cursor:not-allowed}.status{color:var(--status-color);margin:0}.workspace{flex:1;grid-template-columns:320px 1fr;gap:12px;min-height:0;display:grid}.workspace-single{grid-template-columns:1fr}.about-page{background:var(--about-bg);border:1px solid var(--about-border);border-radius:10px;flex:1;min-height:0;padding:16px;overflow:auto}.about-page h2{margin:0 0 10px}.about-page h2:not(:first-child){margin-top:20px}.about-page p{color:var(--about-text);margin:0 0 12px}.license-list{gap:8px;margin:0;padding-left:18px;display:grid}.license-list a{color:var(--license-link)}.sidebar{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px;flex-direction:column;gap:8px;min-height:0;padding:10px;display:flex}.undo-row button,.insert-btn{width:100%;padding:6px 0;font-size:1.6rem;line-height:1}.thumb-list{flex-direction:column;gap:8px;min-height:0;display:flex;overflow:auto}.thumb-item{border:1px solid var(--thumb-border);background:var(--thumb-bg);border-radius:8px;flex-direction:column;gap:8px;padding:8px;display:flex}.thumb-item.selected{border-color:var(--thumb-selected-border);box-shadow:0 0 0 1px var(--thumb-selected-shadow)}.thumb-select{text-align:left;color:var(--thumb-select-color);cursor:grab;background:0 0;border:0;flex-direction:column;gap:6px;padding:0;display:flex}.thumb-image-frame{background:var(--frame-bg);border-radius:4px;justify-content:center;align-items:center;width:100%;height:160px;display:flex;overflow:hidden}.thumb-image{object-fit:contain;transform-origin:50%;max-width:100%;max-height:100%}.thumb-actions{gap:8px;display:flex}.thumb-actions button{flex:1;justify-content:center;align-items:center;padding:4px 8px;font-size:1.5rem;line-height:1;display:inline-flex}.thumb-actions button.drag-handle{font-size:1.3rem;line-height:1}.preview-pane,.preview-empty{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px;flex-direction:column;min-height:0;padding:16px;display:flex}.preview-empty{color:var(--preview-empty-color);justify-content:center;align-items:center}.preview-empty-clickable{cursor:pointer}.preview-empty-clickable:hover,.preview-pane.drag-active,.preview-empty.drag-active{border-color:var(--preview-highlight-border);background:var(--preview-highlight-bg)}.empty-open-btn{margin:0;padding:12px 16px;font-size:1rem}.empty-help{color:var(--empty-help);margin:10px 0 0}.preview-meta{color:var(--preview-meta-color);justify-content:space-between;align-items:center;gap:8px;display:flex}.preview-controls{align-items:center;gap:8px;display:flex}.preview-controls-bottom{justify-content:center;margin-top:12px}.preview-controls button{min-width:36px;padding:6px 10px}.preview-zoom{text-align:center;min-width:56px}.preview-page-wrap{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:auto}.preview-page{object-fit:contain;background:var(--preview-page-bg);transform-origin:50%;border-radius:8px;width:100%;height:100%}.footer-links{justify-content:center;gap:12px;display:flex}.footer-link{color:var(--footer-link);background:0 0;border:0;padding:4px 6px;text-decoration:underline}.footer-link.active{color:var(--footer-link-active)}