:root{--sidebar-width:240px;--topbar-height:48px;--toolbar-height:52px;--bg-primary:#1a1a2e;--bg-secondary:#16213e;--bg-tertiary:#0f3460;--bg-surface:#1e2746;--text-primary:#e8e8e8;--text-secondary:#a0a0b0;--accent:#e94560;--accent-hover:#ff6b81;--border:#2a2a4a;--radius:6px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;color:var(--text-primary);background:var(--bg-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;overflow:hidden}button{cursor:pointer;color:inherit;font:inherit;background:0 0;border:none}.splash-screen{background:var(--bg-primary);cursor:pointer;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.splash-content{text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.splash-title{background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 50%, #fbbf24 100%);-webkit-text-fill-color:transparent;letter-spacing:-2px;-webkit-background-clip:text;background-clip:text;font-size:64px;font-weight:800}.splash-subtitle{color:var(--text-secondary);margin-bottom:16px;font-size:18px}.splash-enter{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:12px;padding:16px 48px;font-size:20px;font-weight:600;transition:all .2s;box-shadow:0 4px 24px #e9456066}.splash-enter:hover{background:var(--accent-hover);transform:scale(1.05);box-shadow:0 6px 32px #e9456080}@media screen and (width<=900px){.splash-title{font-size:40px}.splash-subtitle{font-size:14px}.splash-enter{padding:14px 36px;font-size:18px}}.app{width:100%;height:100%;display:flex}.main{flex-direction:column;flex:1;min-width:0;display:flex}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.sidebar-header h2{font-size:16px;font-weight:600}.sidebar-books{flex:1;padding:8px;overflow-y:auto}.sidebar-book{border-radius:var(--radius);margin-bottom:4px;overflow:hidden}.sidebar-book.active{background:var(--bg-surface)}.sidebar-book-header{cursor:pointer;border-radius:var(--radius);align-items:center;gap:8px;padding:8px 10px;transition:background .15s;display:flex}.sidebar-book-header:hover{background:var(--bg-tertiary)}.book-color{border-radius:3px;flex-shrink:0;width:14px;height:14px}.book-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;overflow:hidden}.sidebar-pages{padding:4px 8px 8px 24px}.sidebar-page{cursor:pointer;border-radius:var(--radius);color:var(--text-secondary);align-items:center;gap:8px;padding:6px 8px;font-size:13px;transition:background .15s;display:flex}.sidebar-page:hover{background:var(--bg-tertiary)}.sidebar-page.active{background:var(--bg-tertiary);color:var(--text-primary)}.page-thumbnail{object-fit:cover;border:1px solid var(--border);background:#fff;border-radius:3px;width:32px;height:24px}.page-thumbnail-placeholder{border:1px solid var(--border);background:#fff;border-radius:3px;width:32px;height:24px}.btn-add-page{width:100%;color:var(--text-secondary);border-radius:var(--radius);padding:6px;font-size:12px;transition:background .15s}.btn-add-page:hover{background:var(--bg-tertiary);color:var(--text-primary)}.sidebar-empty{text-align:center;color:var(--text-secondary);padding:16px;font-size:13px}.topbar{height:var(--topbar-height);background:var(--bg-secondary);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:0 16px;display:flex}.topbar-left{flex-shrink:0}.topbar-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:14px;overflow:hidden}.topbar-page,.topbar-empty{color:var(--text-secondary)}.topbar-actions{align-items:center;gap:4px;display:flex}.locale-toggle{border:1px solid var(--border);border-radius:var(--radius);margin-right:8px;display:flex;overflow:hidden}.locale-btn{color:var(--text-secondary);padding:4px 8px;font-size:11px;font-weight:600;transition:all .15s}.locale-btn:hover{color:var(--text-primary);background:var(--bg-tertiary)}.locale-btn.active{background:var(--accent);color:#fff}.toolbar{height:var(--toolbar-height);background:var(--bg-surface);border-bottom:1px solid var(--border);align-items:center;gap:16px;padding:0 16px;display:flex}.toolbar-tools{gap:2px;display:flex}.toolbar-btn{border-radius:var(--radius);color:var(--text-secondary);align-items:center;gap:4px;padding:6px 10px;font-size:13px;transition:all .15s;display:flex}.toolbar-btn:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.toolbar-btn:disabled{opacity:.35;cursor:not-allowed}.toolbar-btn.active{background:var(--accent);color:#fff}.toolbar-icon{font-size:16px}.toolbar-label{font-size:12px}.toolbar-settings{border-left:1px solid var(--border);align-items:center;gap:12px;padding-left:12px;display:flex}.toolbar-settings label{color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;display:flex}.toolbar-settings input[type=color]{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;width:28px;height:28px;padding:2px}.toolbar-settings input[type=range]{width:80px;accent-color:var(--accent)}.toolbar-settings span{min-width:30px;color:var(--text-secondary);font-size:11px}.toolbar-btn.recording{color:#fff;background:#dc2626;animation:1s ease-in-out infinite pulse-recording}@keyframes pulse-recording{0%,to{opacity:1}50%{opacity:.7}}.toolbar-recording{color:#dc2626;font-size:12px;font-weight:500;animation:1s ease-in-out infinite pulse-recording}.toolbar-hint{color:var(--text-secondary);font-size:12px}.modal-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.icon-picker{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;flex-direction:column;width:680px;max-width:90vw;max-height:80vh;display:flex;overflow:hidden}.icon-picker-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.icon-picker-header h3{font-size:16px;font-weight:600}.icon-picker-tabs{gap:4px;padding:10px 16px 0;display:flex}.icon-picker-tab{border-radius:var(--radius);color:var(--text-secondary);padding:6px 14px;font-size:13px;transition:all .15s}.icon-picker-tab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.icon-picker-tab.active{background:var(--accent);color:#fff}.icon-picker-search-row{align-items:center;gap:10px;margin:10px 16px;display:flex}.icon-picker-search-row .icon-picker-search{flex:1;margin:0}.icon-picker-search{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-primary);color:var(--text-primary);outline:none;padding:8px 12px;font-size:14px}.icon-picker-search:focus{border-color:var(--accent)}.icon-picker-color{color:var(--text-secondary);white-space:nowrap;align-items:center;gap:6px;font-size:13px;display:flex}.icon-picker-color input[type=color]{border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:0 0;width:32px;height:32px;padding:2px}.icon-picker-categories{flex-wrap:wrap;gap:4px;padding:0 16px 10px;display:flex}.icon-picker-cat-btn{color:var(--text-secondary);border:1px solid var(--border);border-radius:12px;padding:3px 10px;font-size:11px;transition:all .15s}.icon-picker-cat-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.icon-picker-cat-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.icon-picker-body{flex:1;padding:0 16px 16px;overflow-y:auto}.icon-picker-group{margin-bottom:16px}.icon-picker-group-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);margin-bottom:8px;padding-bottom:4px;font-size:12px;font-weight:600}.icon-picker-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:4px;display:grid}.icon-picker-item{border-radius:var(--radius);color:var(--text-secondary);flex-direction:column;align-items:center;gap:4px;padding:8px 4px;transition:all .15s;display:flex}.icon-picker-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.icon-picker-item svg{flex-shrink:0}.icon-picker-name{text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:9px;overflow:hidden}.icon-picker-empty,.icon-picker-more{text-align:center;color:var(--text-secondary);grid-column:1/-1;padding:16px;font-size:13px}.canvas-area{flex:1;position:relative;overflow:hidden}.drawing-canvas-container{touch-action:none;width:100%;height:100%}.drawing-canvas-container canvas{display:block}.canvas-placeholder{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.canvas-placeholder-btn{color:var(--text-primary);background:var(--bg-tertiary);border:2px dashed var(--border);border-radius:var(--radius);cursor:pointer;padding:16px 32px;font-size:16px;transition:background .15s,border-color .15s}.canvas-placeholder-btn:hover{background:var(--accent);border-color:var(--accent)}.btn-icon{border-radius:var(--radius);justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:background .15s;display:flex}.btn-undo-redo{width:40px;height:40px;font-size:22px}.btn-icon:hover{background:var(--bg-tertiary)}.btn-sm{opacity:0;width:22px;height:22px;font-size:12px;transition:opacity .15s}.sidebar-book-header:hover .btn-sm,.sidebar-page:hover .btn-sm{opacity:1}.btn-reorder{flex-shrink:0;width:18px;height:18px;font-size:8px}.btn-reorder:disabled{pointer-events:none;opacity:0!important}.slideshow-settings{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:16px;width:360px;max-width:90vw;padding:24px;display:flex}.slideshow-settings h3{margin:0;font-size:18px;font-weight:600}.slideshow-settings label{color:var(--text-secondary);flex-direction:column;gap:6px;font-size:13px;display:flex}.slideshow-settings input{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-primary);color:var(--text-primary);outline:none;padding:8px 12px;font-size:14px}.slideshow-settings input:focus{border-color:var(--accent)}.slideshow-settings input[type=number]{width:80px}.slideshow-settings-actions{justify-content:flex-end;gap:8px;margin-top:8px;display:flex}.slideshow-settings-cancel{border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;padding:8px 16px;font-size:13px;transition:all .15s}.slideshow-settings-cancel:hover{background:var(--bg-tertiary);color:var(--text-primary)}.slideshow-settings-start{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;padding:8px 20px;font-size:13px;font-weight:500;transition:background .15s}.slideshow-settings-start:hover{background:var(--accent-hover)}.slideshow-overlay{z-index:2000;background:#000;position:fixed;inset:0}.slideshow-overlay .canvas-container{width:100%!important;height:100%!important}.slideshow-overlay canvas{display:block}.slideshow-progress-bar{z-index:2001;background:#ffffff40;border-radius:3px;width:min(600px,80vw);height:6px;position:fixed;bottom:80px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 1px 4px #0006}.slideshow-progress-fill{background:var(--accent);border-radius:2px;height:100%;transition:width 50ms linear}.slideshow-controls{z-index:2001;background:#000000b3;border:1px solid #ffffff26;border-radius:24px;align-items:center;gap:12px;padding:8px 20px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.slideshow-progress-text{color:#fff;text-align:center;min-width:100px;font-size:14px}.slideshow-nav-btn{color:#fff;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding-bottom:3px;font-size:20px;font-weight:700;line-height:1;transition:all .15s;display:flex}.slideshow-nav-btn:hover:not(:disabled){background:#ffffff26}.slideshow-nav-btn:disabled{opacity:.3;cursor:not-allowed}.slideshow-pause-btn{color:#fff;cursor:pointer;background:#eab308;border:none;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding-bottom:1px;font-size:14px;transition:all .15s;display:flex}.slideshow-pause-btn:hover{background:#ca8a04}.slideshow-pause-btn.paused{background:#22c55e}.slideshow-pause-btn.paused:hover{background:#16a34a}.slideshow-close{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:16px;padding:6px 16px;font-size:13px;font-weight:500;transition:background .15s}.slideshow-close:hover{background:var(--accent-hover)}.sidebar-wrapper{display:contents}.sidebar-backdrop,.sidebar-toggle{display:none}@media screen and (width<=900px){:root{--sidebar-width:260px;--topbar-height:44px;--toolbar-height:48px}.sidebar-toggle{display:flex}.sidebar-wrapper{width:var(--sidebar-width);z-index:500;height:100%;transition:transform .25s;display:block;position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar-wrapper.open{transform:translate(0)}.sidebar-wrapper .sidebar{width:100%;height:100%}.sidebar-backdrop{z-index:499;opacity:0;pointer-events:none;background:#00000080;transition:opacity .25s;display:block;position:fixed;inset:0}.sidebar-backdrop.visible{opacity:1;pointer-events:auto}.topbar{gap:4px;padding:0 8px}.topbar-left{flex-shrink:0}.topbar-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:12px;overflow:hidden}.topbar-actions{flex-shrink:0;gap:2px}.btn-icon{width:36px;height:36px}.toolbar{-webkit-overflow-scrolling:touch;gap:6px;padding:0 6px;overflow-x:auto}.toolbar-tools{flex-shrink:0;gap:1px}.toolbar-btn{min-width:36px;min-height:36px;padding:4px 6px}.toolbar-label{display:none}.toolbar-icon{font-size:18px}.toolbar-settings{flex-shrink:0;gap:8px;padding-left:8px}.toolbar-settings input[type=range]{width:60px}.sidebar-book-header{padding:10px}.sidebar-page{padding:8px}.btn-sm{opacity:1;width:28px;height:28px;font-size:14px}.btn-reorder{width:24px;height:24px;font-size:10px}.drawing-canvas-container{touch-action:none}.icon-picker{max-width:95vw;max-height:85vh}.icon-picker-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}.icon-picker-item{padding:6px 2px}.slideshow-settings{max-width:95vw}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--bg-tertiary)}