.toolbar-strip{display:flex;justify-content:space-between;gap:0;padding:4px 3px}.toolbar-icon{display:flex;color:var(--muted);cursor:pointer;background:0 0;border:1.5px solid #0000;border-radius:6px;justify-content:center;align-items: center;width:32px;height:30px;padding:0 1px;transition:background .15s,color .15s,border-color .15s}.toolbar-icon:hover{color:var(--dark);background:var(--hover-bg)}.toolbar-icon--active{color:var(--accent);background:var(--tint-accent);border-color:var(--accent)}.toolbar-icon--danger{color:var(--red)}.toolbar-icon--danger:hover{background:var(--tint-danger)}.toolbar-icon[data-tooltip]{position:relative}.toolbar-icon[data-tooltip]:after{content:attr(data-tooltip);position:absolute;background:var(--tooltip-bg);color:var(--tooltip-fg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;z-index:9999;border-radius:4px;padding:3px 6px;font-size:10px;font-weight:600;bottom:calc(100% + 4px);left:50%;transform:translate(-50%)}.toolbar-icon[data-tooltip]:hover:after{opacity:1;visibility:visible}.toolbar-expand{border-top:1.5px solid var(--border);max-height:132px;padding:8px}.toolbar-expand:empty{display:none}.toolbar-overflow-trigger{position:relative}.toolbar-overflow-dropdown{display:none;position:absolute;background:var(--sidebar-bg);border:1.5px solid var(--border);box-shadow:0 4px 12px var(--shadow-color);z-index:20;border-radius:8px;flex-direction:column;gap:2px;padding:4px;top:100%;left:50%;transform:translate(-50%)}.toolbar-overflow-dropdown--visible{display:flex}.toolbar-overflow-dropdown .toolbar-icon[data-tooltip]:after{inset:50% calc(100% + 6px) auto auto;transform:translateY(-50%)}.colour-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:5px}.colour-swatch{aspect-ratio:1;cursor:pointer;border:1.5px solid #00000014;border-radius:50%;width:100%;padding:0;transition:transform .1s}.colour-swatch:hover{z-index:1;border-color:var(--accent);transform:scale(1.2)}.colour-swatch--active{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent)}.colour-swatch--transparent{background:repeating-conic-gradient(#e0e0e0 0% 25%,#fff 0% 50%) 50%/8px 8px}.colour-swatch--custom{background:var(--bg);color:var(--muted);display:flex;border-style:dashed;justify-content:center;align-items: center;font-size:12px;line-height:1}.colour-swatch--custom:hover{color:var(--dark)}.toolbar-expand input[type=range]{accent-color:var(--accent);flex:1;min-width:0;height:4px}.toolbar-expand .tool-row{display:flex;align-items: center;gap:6px}.toolbar-expand .range-with-value{display:flex;flex:1;align-items: center;gap:6px;min-width:0}.toolbar-expand .range-value{color:var(--muted);text-align:right;flex-shrink:0;min-width:32px;font-size:11px}.toolbar-expand .tool-row-label{color:var(--muted);flex-shrink:0;font-size:11px}.toolbar-expand select{cursor:pointer;appearance:none;background-color:var(--bg);border:1.5px solid var(--border);color:var(--dark);background-image:var(--select-arrow);background-position:right 7px center;background-repeat:no-repeat;border-radius:5px;flex:1;min-width:0;padding:5px 24px 5px 6px;font-size:12px}.toolbar-expand select:focus{outline:none;border-color:var(--accent)}.toolbar-expand .tool-option-btn{padding:6px 4px;font-size:11px}.toolbar-expand .tool-option-btns{flex:1;gap:3px}.toolbar-expand .tool-row .tool-option-btns:only-child{width:100%}.toolbar-expand .tool-action-btn{border:1.5px solid var(--border);background:var(--bg);color:var(--dark);cursor:pointer;border-radius:5px;padding:5px 8px;font-size:11px}.toolbar-expand .tool-action-btn:hover{background:var(--hover-bg)}.toolbar-expand .tool-action-btn--danger{color:var(--red);border-color:#ef233c33}.toolbar-expand .tool-action-btn--danger:hover{background:var(--tint-danger)}.toolbar-expand .tool-row-compact{display:flex;gap:4px}.toolbar-expand .tool-info{color:var(--muted);margin-bottom:4px;font-size:10px;line-height:1.4}*,*:before,*:after{box-sizing:border-box;user-select:none;margin:0;padding:0}input,textarea{user-select:text}:root{--toolbar-height:48px;--activity-bar-width:48px;--panel-width:200px;--accent:#378add;--cyan:#00b4d8;--yellow:#ffd60a;--dark:#1a1a2e;--bg:#faf9f7;--sidebar-bg:#fff;--canvas-bg:#f0ede8;--border:#ede9e3;--muted:#a89f96;--orange:#fb8500;--blue:#4361ee;--green:#06d6a0;--purple:#7b2fbe;--red:#ef233c;--hover-bg:#f0ede8;--tint-accent:#eef5fc;--tint-danger:#fff0f2;--loading-pulse-mid:#d4cfc9;--dot-pattern:#a0968c66;--shadow-color:#00000014;--shadow-heavy:#0000001f;--photo-border:#00000014;--page-label-bg:#ffffffe0;--bar-bg:#fffffff2;--tooltip-bg:#1a1a2e;--tooltip-fg:#fff;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a89f96' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}[data-theme=dark]{--dark:#ede8f2;--tooltip-bg:#ede8f2;--tooltip-fg:#1c1820;--bg:#1c1820;--sidebar-bg:#241f2a;--canvas-bg:#161218;--border:#3a3342;--muted:#8a7e96;--red:#ff4d6a;--green:#2ee8b0;--hover-bg:#2e2836;--accent:#85b7eb;--tint-accent:#1a2538;--tint-danger:#2d1018;--loading-pulse-mid:#3a3342;--dot-pattern:#8c82a040;--shadow-color:#0000004d;--shadow-heavy:#0006;--photo-border:#ffffff0f;--page-label-bg:#1e1926e0;--bar-bg:#241f2af2;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a7e96' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}body{background:var(--bg);color:var(--dark);--buncss-light:initial;--buncss-dark: ;color-scheme:light;overflow:hidden;height:100vh;font-family:Nunito,sans-serif}[data-theme=dark] body{--buncss-light: ;--buncss-dark:initial;color-scheme:dark}#storage-warning{color:#664d03;text-align:center;background:#fff3cd;padding:8px 16px;font-size:13px}[data-theme=dark] #storage-warning{color:#ffda6a;background:#332701}#small-screen-message{display:none;text-align:center;color:var(--muted);background:var(--bg);justify-content:center;align-items: center;height:100vh;padding:24px;font-size:16px}@media (max-width:899px){#small-screen-message{display:flex}#app{display:none}}#app{display:grid;grid-template-rows:var(--toolbar-height)1fr auto;height:100vh}#toolbar{display:flex;background:var(--sidebar-bg);border-bottom:1.5px solid var(--border);overflow:visible;align-items: center;gap:10px;padding:0 20px}#toolbar-logo{display:flex;text-decoration:none;position:relative;z-index:30;flex-shrink:0;align-items: flex-end;margin-left:-30px}#logo-mark{pointer-events:none;width:90px;height:90px;margin-bottom:-25px;margin-right:-8px}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(-54000deg)}}#toolbar-logo:hover #logo-mark{animation:logo-spin 30s ease-in-out infinite;animation-delay:1s}#logo-wordmark{height:40px;margin-bottom:12px}.view-mode-toggle{flex-shrink:0}.view-mode-toggle .tool-option-btn{padding:4px 6px;line-height:0}.view-mode-toggle .tool-option-btn svg{display:block}#btn-order{white-space:nowrap;border-radius:8px;padding:8px 12px;box-shadow:0 2px 8px #378add40}#book-status{color:var(--muted);margin-left:auto;font-size:13px;font-weight:700}.toolbar-separator{background:var(--border);width:1.5px;height:24px;margin:0 4px}#toolbar-menu{position:relative;display:flex;align-items: center}#btn-toolbar-menu{display:flex;color:var(--muted);letter-spacing:1px;background:0 0;border:none;justify-content:center;align-items: center;width:32px;height:32px;padding:0;font-size:18px;line-height:1}#btn-toolbar-menu:hover{background:var(--bg);color:var(--dark)}#toolbar-menu-dropdown{position:absolute;background:var(--sidebar-bg);border:1.5px solid var(--border);box-shadow:0 4px 16px var(--shadow-color);display:flex;z-index:100;white-space:nowrap;border-radius:10px;flex-direction:column;gap:1px;min-width:200px;padding:4px;top:calc(100% + 4px);right:0}#toolbar-menu-dropdown[hidden]{display:none}.toolbar-menu-divider{background:var(--border);height:1.5px;margin:3px 0}#workspace{display:grid;grid-template-columns:var(--activity-bar-width)var(--panel-width)1fr;overflow:hidden}#workspace:has(#panel.hidden){grid-template-columns:var(--activity-bar-width)1fr}#grid-overview{grid-column:-2/-1;grid-row:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));overflow-y:auto;background-color:var(--canvas-bg);background-image:radial-gradient(circle,var(--dot-pattern)1px,transparent 1px);background-size:24px 24px;align-content: start;gap:16px;padding:16px}#grid-overview[hidden]{display:none}#grid-overview .spread-preview{aspect-ratio:2;width:100%;height:auto}#grid-overview .spread-thumbnail{flex-shrink:unset}#grid-overview .spread-labels{position:static;margin-top:4px}#grid-overview .spread-page-label{background:0 0}#grid-overview .spread-drag-ghost img{width:280px;height:140px}#grid-overview .spread-thumbnail--drop-before:before,#grid-overview .spread-thumbnail--drop-after:after{width:auto;height:3px;inset:auto 0}#grid-overview .spread-thumbnail--cover:first-child .spread-preview{clip-path:inset(0 0 0 50%)}#grid-overview .spread-thumbnail--cover:first-child .spread-labels{padding-left:50%}#grid-overview .spread-thumbnail--cover:last-child .spread-preview{clip-path:inset(0 50% 0 0)}#grid-overview .spread-thumbnail--cover:last-child .spread-labels{padding-right:50%}#grid-overview .spread-thumbnail--drop-before:before{top:-4px;left:0}#grid-overview .spread-thumbnail--drop-after:after{bottom:-4px;right:0}#activity-bar{display:flex;background:var(--sidebar-bg);border-right:1.5px solid var(--border);position:relative;z-index:20;flex-direction:column;align-items: center;gap:10px;padding:36px 0 12px}.activity-btn{display:flex;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items: center;width:40px;height:40px;padding:0;transition:background .15s,transform .15s,color .15s}.activity-btn:hover{background:var(--bg);transform:scale(1.05)}.activity-btn--active{background:var(--tint-accent);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);border-color:#0000;border-radius:0 8px 8px 0}.activity-btn[data-panel=photos]{color:var(--accent)}.activity-btn[data-panel=layout]{color:var(--cyan)}.activity-btn[data-panel=text]{color:var(--orange)}.activity-btn[data-panel=shapes]{color:var(--purple)}.activity-btn[data-tooltip]{position:relative}.activity-btn[data-tooltip]:after{z-index:9999;content:attr(data-tooltip);position:absolute;background:var(--tooltip-bg);color:var(--tooltip-fg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;border-radius:6px;padding:4px 8px;transition:none;font-family:Nunito,sans-serif;font-size:11px;font-weight:700;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}.activity-btn[data-tooltip]:hover:after{opacity:1;visibility:visible}#panel{background:var(--sidebar-bg);border-right:1.5px solid var(--border);overflow-y:auto;display:flex;scrollbar-width:thin;scrollbar-color:var(--border)transparent;flex-direction:column}#panel::-webkit-scrollbar{width:4px}#panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}#panel:before{content:"";position:sticky;z-index:1;display:block;background:linear-gradient(to bottom,var(--sidebar-bg)10px,transparent 30px);pointer-events:none;flex-shrink:0;height:30px;margin-bottom:-30px;top:0}#panel.hidden{display:none}.panel-content{flex:1;padding:28px 10px 12px}.panel-placeholder{color:var(--muted);font-size:13px}#canvas-area{position:relative;display:flex;background-color:var(--canvas-bg);background-image:radial-gradient(circle,var(--dot-pattern)1px,transparent 1px);overflow:hidden;background-size:24px 24px;justify-content:center;align-items: center}#canvas-area[hidden]{display:none}#spread-canvas{position:absolute;touch-action:none;inset:0}.canvas-scrollbar{position:absolute;overflow-y:auto;overflow-x:hidden;z-index:2;scrollbar-width:thin;scrollbar-color:var(--muted)transparent;width:12px;top:0;bottom:0;right:0}.canvas-scrollbar::-webkit-scrollbar{width:8px}.canvas-scrollbar::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px}.canvas-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--dark)}#canvas-loading{position:absolute;display:flex;background:var(--canvas-bg);color:var(--muted);z-index:10;flex-direction:column;justify-content:center;align-items: center;gap:12px;font-size:13px;inset:0}#canvas-loading.hidden{display:none}.canvas-loading__spinner{border:3px solid var(--border);border-top-color:var(--muted);animation:canvas-spin .8s linear infinite;border-radius:50%;width:28px;height:28px}@keyframes canvas-spin{to{transform:rotate(360deg)}}#canvas-context-menu{position:absolute;display:none;background:var(--sidebar-bg);border:1.5px solid var(--border);z-index:3;box-shadow:0 4px 16px var(--shadow-color);border-radius:10px;min-width:160px;padding:4px}#canvas-context-menu.visible{display:block}#item-panel{position:absolute;display:flex;background:var(--sidebar-bg);border:1.5px solid var(--border);box-shadow:0 4px 16px var(--shadow-color);z-index:10;pointer-events:auto;border-radius:10px;flex-direction:column;width:170px}.item-panel-close{position:absolute;color:var(--muted);cursor:pointer;display:flex;background:0 0;border:none;border-radius:4px;justify-content:center;align-items: center;width:20px;height:20px;padding:0;font-size:16px;line-height:1;top:2px;right:2px}.item-panel-close:hover{background:var(--hover-bg);color:var(--dark)}#item-panel.hidden{display:none}.item-panel-count{color:var(--accent);text-transform:uppercase;letter-spacing:.05em;text-align:center;margin-bottom:4px;padding-top:2px;font-size:11px;font-weight:700}button{background:var(--bg);color:var(--dark);border:1.5px solid var(--border);cursor:pointer;border-radius:6px;padding:6px 12px;transition:background .15s,border-color .15s,color .15s;font-family:Nunito,sans-serif;font-size:13px;font-weight:600}button:focus:not(:focus-visible){outline:none}button:hover:not(.btn-primary):not(.tool-option-btn--active):not(.toolbar-icon--active){background:var(--hover-bg)}.btn-primary{background:var(--accent);color:#fff;border:none;font-weight:700}[data-theme=dark] .btn-primary{color:#1c1820}.btn-primary:hover{filter:brightness(1.08)}#btn-undo,#btn-redo{display:inline-flex;color:var(--muted);background:0 0;border:none;justify-content:center;align-items: center;padding:6px 8px}#btn-undo:hover,#btn-redo:hover{color:var(--dark);background:var(--bg)}#btn-undo:disabled,#btn-redo:disabled{opacity:.3;cursor:default}.toggle-switch{display:inline-flex;cursor:pointer;color:var(--dark);align-items: center;gap:6px;font-size:13px}.toggle-switch input{position:absolute;opacity:0;width:0;height:0}.toggle-switch__track{display:inline-block;background:var(--border);position:relative;border-radius:8px;flex-shrink:0;width:28px;height:16px;transition:background .15s}.toggle-switch__track:after{content:"";position:absolute;background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .15s;top:2px;left:2px}.toggle-switch input:checked+.toggle-switch__track{background:var(--accent)}.toggle-switch input:checked+.toggle-switch__track:after{transform:translate(12px)}.menu-item{display:flex;color:var(--dark);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:4px;align-items: center;gap:0;width:100%;padding:5px 8px;transition:background .15s;font-family:Nunito,sans-serif;font-size:13px;font-weight:600}.menu-item:hover{background:var(--bg)}.menu-item__check{color:var(--accent);flex-shrink:0;width:18px;font-size:13px}.menu-item__check:before{content:"✓";visibility:hidden}.menu-item[aria-checked=true] .menu-item__check:before{visibility:visible}.menu-item__label{flex:1}.menu-item kbd{color:var(--muted);margin-left:16px;font-family:Nunito,sans-serif;font-size:11px}.menu-theme-row{display:flex;align-items: center;gap:8px;padding:5px 8px}.menu-theme-label{color:var(--muted);flex-shrink:0;font-size:13px;font-weight:600}.menu-theme-row .tool-option-btns{flex:1}.spread-insert-before,.spread-insert-after{display:none;position:absolute;background:var(--border);color:var(--muted);cursor:pointer;z-index:10;border:none;border-radius:50%;justify-content:center;align-items: center;width:18px;height:18px;padding:0;transition:background .15s,color .15s,transform .15s;font-size:14px;line-height:1;top:50%;transform:translateY(-50%)}.spread-thumbnail--active .spread-insert-before,.spread-thumbnail--active .spread-insert-after{display:flex}.spread-insert-before{left:-20px}.spread-insert-after{right:-20px}.spread-insert-before:hover,.spread-insert-after:hover{background:var(--accent);color:#fff;transform:translateY(-50%)scale(1.15)}.spread-delete-btn{display:none;position:absolute;color:#fff;cursor:pointer;z-index:10;background:#a89f96e6;border:none;border-radius:50%;justify-content:center;align-items: center;width:16px;height:16px;padding:0;transition:background .15s;font-size:11px;line-height:1;top:-5px;right:-5px}.spread-delete-btn:hover{background:#ef233ce6}.spread-thumbnail--active .spread-delete-btn{display:flex}.spread-thumbnail{position:relative;cursor:pointer;border:2px solid #0000;border-radius:6px;flex-shrink:0;margin:4px 0;padding:2px}.spread-thumbnail:hover:not(.spread-thumbnail--active){border-color:#378add66}.spread-thumbnail--active{border-color:var(--accent)}.spread-thumbnail--drag-over{background:var(--tint-accent);border-color:var(--accent)}.spread-thumbnail--drop-before:before,.spread-thumbnail--drop-after:after{content:"";position:absolute;background:var(--accent);border-radius:2px;width:3px;top:0;bottom:0}.spread-thumbnail--drop-before:before{left:-4px}.spread-thumbnail--drop-after:after{right:-4px}.spread-thumbnail--dragging{opacity:.3}.spread-thumbnail--bg-zone-left:after,.spread-thumbnail--bg-zone-spread:after,.spread-thumbnail--bg-zone-right:after{content:"";position:absolute;pointer-events:none;z-index:1;background:#d2009659;border-radius:0 0 4px 4px;height:25%;bottom:2px}.spread-thumbnail--bg-zone-left:after{left:2px;right:68%}.spread-thumbnail--bg-zone-spread:after{left:35%;right:35%}.spread-thumbnail--bg-zone-right:after{left:68%;right:2px}.spread-thumbnail--layout-zone-both:after,.spread-thumbnail--layout-zone-left:after,.spread-thumbnail--layout-zone-right:after{content:"";position:absolute;pointer-events:none;z-index:1;background:#00b4d84d;border:1.5px dashed #00b4d8b3}.spread-thumbnail--layout-zone-both:after{border-radius:4px;inset:2px}.spread-thumbnail--layout-zone-left:after{border-radius:0 0 0 4px;inset:67% 50% 2px 2px}.spread-thumbnail--layout-zone-right:after{border-radius:0 0 4px;inset:67% 2px 2px 50%}.grid-item-drag-ghost{position:fixed;pointer-events:none;background:var(--accent);z-index:9999;opacity:.7;border-radius:50%;width:8px;height:8px;transform:translate(-50%,-50%)}.spread-drag-ghost{position:fixed;pointer-events:none;opacity:.85;z-index:9999;border-radius:4px;transform:translate(-50%,-50%)scale(.9);box-shadow:0 4px 16px #00000026}.spread-drag-ghost img{display:block;border-radius:4px;width:138px;height:69px}.spread-preview{display:block;box-shadow:0 1px 4px var(--shadow-color),0 0 0 1px var(--border);border-radius:3px;width:138px;height:69px}.spread-labels{position:absolute;display:flex;justify-content:space-between;bottom:2px;left:2px;right:2px}.spread-page-label{text-align:center;color:var(--muted);background:var(--page-label-bg);border-radius:3px;flex:1;margin:0 1px;padding:1px 4px;font-size:10px;font-weight:700}.spread-thumbnail--active .spread-page-label{color:var(--accent)}#panel-photos:not([hidden]){display:flex;flex-direction:column}#add-photos-wrapper{position:sticky;background:var(--sidebar-bg);margin-top:auto;margin-bottom:-12px;padding-top:12px;padding-bottom:12px;bottom:0}#add-photos-wrapper>#add-photos-inner{border:1.5px solid #0000;border-radius:8px;transition:border-color .15s}#add-photos-wrapper:has(#add-photos-inline:not([hidden]))>#add-photos-inner{border-color:var(--accent)}#btn-import-photos{display:block;border-radius:6.5px;width:100%;padding:8px 12px;transition:filter .15s,border-radius .15s;box-shadow:0 2px 8px #378add40}#btn-import-photos[aria-expanded=true]{background:var(--bg);color:var(--accent);box-shadow:none;border-radius:8px 8px 0 0}.btn-import-chevron{display:inline-block;transition:transform .15s}#btn-import-photos[aria-expanded=true] .btn-import-chevron{transform:rotate(90deg)}#photo-filter{display:flex;gap:4px;margin-bottom:14px}#photo-filter[hidden]{display:none}.filter-btn{background:var(--bg);border:1.5px solid var(--border);color:var(--muted);cursor:pointer;border-radius:999px;flex:1;padding:4px 0;transition:background .15s,border-color .15s,color .15s;font-size:11px}.filter-btn:hover{color:var(--dark)}.filter-btn--active{background:var(--tint-accent);border-color:var(--accent);color:var(--accent)}#photo-grid{display:grid;grid-template-columns:repeat(2,1fr);touch-action:pan-y;gap:4px}.photo-item{position:relative;cursor:pointer}.photo-thumbnail{aspect-ratio:1;object-fit:cover;border:1px solid var(--photo-border);display:block;-webkit-touch-callout:none;-webkit-user-drag:none;border-radius:5px;width:100%;transition:filter .15s,opacity .15s}.photo-item--used .photo-thumbnail{filter:saturate(.1)brightness(1.4);opacity:.35}.photo-item:hover .photo-thumbnail{filter:none;opacity:.85}.photo-item--thumb-loading{aspect-ratio:1;background:var(--border);animation:photo-loading-pulse 1.2s ease-in-out infinite;border-radius:5px}.photo-item--thumb-loading .photo-thumbnail{display:none}.photo-item--loading{aspect-ratio:1;background:var(--border);animation:photo-loading-pulse 1.2s ease-in-out infinite;display:flex;border-radius:5px;justify-content:center;align-items: center}.photo-item--loading span{color:var(--muted);pointer-events:none;font-size:9px}@keyframes photo-loading-pulse{0%,to{background:var(--border)}50%{background:var(--loading-pulse-mid)}}.queue-badge{position:absolute;display:flex;background:var(--accent);color:#fff;pointer-events:none;z-index:1;border-radius:50%;justify-content:center;align-items: center;width:20px;height:20px;font-size:11px;font-weight:700;top:4px;left:4px}.queue-cursor{position:fixed;pointer-events:none;z-index:9999}.queue-cursor__thumb{position:absolute;object-fit:cover;border:2px solid #fff;border-radius:4px;width:40px;height:40px;box-shadow:0 2px 8px #0000004d}.queue-cursor__count{position:absolute;display:flex;background:var(--accent);color:#fff;border-radius:50%;justify-content:center;align-items: center;width:20px;height:20px;font-size:11px;font-weight:700;top:-8px;right:-8px}.in-use-indicator{position:absolute;bottom:4px;right:4px}.in-use-dot{display:flex;border:1.5px solid var(--sidebar-bg);color:#78350f;background:#f59e0b;border-radius:50%;justify-content:center;align-items: center;width:16px;height:16px;font-size:9px;font-weight:700;line-height:1}.in-use-tooltip{display:none;position:fixed;background:var(--tooltip-bg);color:var(--tooltip-fg);white-space:nowrap;pointer-events:none;z-index:9999;border-radius:6px;padding:4px 8px;font-family:Nunito,sans-serif;font-size:11px;font-weight:700}.in-use-tooltip--visible{display:block}#layout-scope{display:flex;position:sticky;z-index:1;background:var(--sidebar-bg);gap:4px;padding:20px 8px 8px;top:0}.layout-grid{display:grid;grid-template-columns:1fr;gap:0;padding:8px}.layout-btn{display:flex;color:var(--muted);background:var(--bg);border:1.5px solid var(--border);border-radius:6px;flex-direction:column;align-items: center;gap:4px;padding:3px 4px;transition:background .15s,border-color .15s,color .15s;font-size:11px}.layout-btn img{border-radius:3px;width:100%;height:auto}.layout-btn:hover{color:var(--dark);background:var(--hover-bg)}.layout-btn--active{border-color:var(--accent);color:var(--accent);background:var(--tint-accent)}.insert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:8px}.insert-btn{display:flex;color:var(--muted);background:var(--bg);border:1.5px solid var(--border);cursor:pointer;border-radius:6px;flex-direction:column;align-items: center;gap:4px;padding:10px 4px;transition:background .15s,border-color .15s,color .15s;font-size:11px}.insert-btn:hover{color:var(--dark);background:var(--hover-bg)}.photo-frame-btn{grid-column:1/-1;cursor:pointer;border:1.5px dashed var(--border);background:var(--bg);color:var(--muted);border-radius:5px;padding:6px;transition:background .15s,color .15s,border-color .15s;font-size:12px}.photo-frame-btn:hover{color:var(--dark);background:var(--hover-bg);border-color:var(--muted)}.panel--drag-over{outline:2px dashed var(--accent);outline-offset:-2px;background:#378add0a}.tool-section{border-bottom:1.5px solid var(--border);padding:8px}.tool-section:last-child{border-bottom:none}.tool-label{color:var(--dark);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-size:11px;font-weight:700}.tool-input{background:var(--bg);border:1.5px solid var(--border);color:var(--dark);box-sizing:border-box;border-radius:5px;width:100%;padding:4px 6px;transition:border-color .15s;font-family:Nunito,sans-serif;font-size:13px}.tool-input:focus{outline:none;border-color:var(--accent)}select.tool-input,.tool-section select{cursor:pointer;appearance:none;background-color:var(--bg);border:1.5px solid var(--border);color:var(--dark);background-image:var(--select-arrow);background-position:right 7px center;background-repeat:no-repeat;border-radius:5px;padding:4px 24px 4px 6px;font-family:Nunito,sans-serif;font-size:13px}.tool-section select:focus{outline:none;border-color:var(--accent)}.tool-section input[type=number]{background:var(--bg);border:1.5px solid var(--border);color:var(--dark);box-sizing:border-box;appearance:textfield;-moz-appearance:textfield;border-radius:5px;width:64px;padding:4px 6px;font-family:Nunito,sans-serif;font-size:13px}.tool-section input[type=number]:focus{outline:none;border-color:var(--accent)}.tool-section input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.tool-section input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=color].tool-input,.tool-section input[type=color]{appearance:none;-webkit-appearance:none;cursor:pointer;background:var(--bg);border:1.5px solid var(--border);border-radius:5px;height:30px;padding:2px 3px}input[type=color].tool-input::-webkit-color-swatch-wrapper{padding:0}.tool-section input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color].tool-input::-webkit-color-swatch{border:none;border-radius:3px}.tool-section input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}.tool-row{display:flex;justify-content:space-between;align-items: center;gap:4px;margin-bottom:4px}.tool-row:last-child{margin-bottom:0}.tool-row-label{color:var(--muted);flex-shrink:0;font-size:11px}.tool-row .tool-input{flex:1;width:auto}.tool-option-btns{display:flex;flex-wrap:wrap;gap:2px}.tool-option-btn{background:var(--bg);border:1.5px solid var(--border);color:var(--muted);cursor:pointer;border-radius:5px;flex:1;padding:3px 2px;transition:background .15s,border-color .15s,color .15s;font-size:11px}.tool-option-btn svg{display:block;margin:0 auto}.tool-option-btn:has(svg){line-height:0}.tool-option-btn:hover{background:var(--hover-bg);color:var(--dark)}.tool-option-btn--active,.tool-option-btn--active:hover{border-color:var(--accent);color:var(--accent);background:var(--tint-accent)}.tool-info{color:var(--muted);padding:4px 0;font-size:11px}.tool-info--warning{color:#b45309}[data-theme=dark] .tool-info--warning{color:#fbbf24}.canvas--drag-over{outline:3px dashed var(--accent);outline-offset:-3px}.bg-mode-toggle{display:flex;gap:2px;margin-bottom:8px}.bg-mode-btn{background:var(--bg);border:1.5px solid var(--border);color:var(--muted);cursor:pointer;border-radius:999px;flex:1;padding:4px;transition:background .15s,border-color .15s,color .15s;font-size:11px}.bg-mode-btn:hover{background:var(--hover-bg);color:var(--dark)}.bg-mode-btn--active{background:var(--tint-accent);border-color:var(--accent);color:var(--accent)}.bg-section{margin-bottom:12px}.bg-photo-zone{position:relative;overflow:hidden;border-radius:4px;margin:6px 0}.bg-photo-zone--empty{border:1.5px dashed var(--border)}.bg-photo-zone--drag-over{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.bg-preview-canvas{display:block;width:100%}.bg-drop-hint{position:absolute;display:flex;color:var(--muted);pointer-events:none;justify-content:center;align-items: center;font-size:11px;inset:0}.bg-clear-btn{background:var(--bg);border:1.5px solid var(--border);color:var(--muted);cursor:pointer;border-radius:5px;padding:2px 5px;transition:background .15s,color .15s;font-size:12px;line-height:1}.bg-clear-btn:hover{background:var(--hover-bg);color:var(--dark)}.bg-remove-photo-btn{background:var(--bg);border:1.5px solid var(--border);color:var(--muted);cursor:pointer;border-radius:5px;width:100%;padding:4px;transition:background .15s,color .15s;font-size:11px}.bg-remove-photo-btn:hover{background:var(--hover-bg);color:var(--dark)}.bg-zoom-slider{accent-color:var(--accent);flex:1}.menu-item--danger{color:var(--red)}.menu-item--danger:hover{background:var(--tint-danger)}#keyboard-shortcuts-dialog,#confirm-delete-book,#order-dialog{position:relative;border:1.5px solid var(--border);box-shadow:0 8px 32px var(--shadow-heavy);background:var(--bg);color:var(--dark);overflow:hidden;border-radius:10px;width:calc(100% - 32px);max-width:360px;max-height:calc(100vh + -1*min(12vh,80px) - 16px);margin:min(12vh,80px) auto auto;padding:0;font-family:inherit}.dialog-body{position:relative;overflow-y:auto;max-height:calc(100vh + -1*min(12vh,80px) - 16px);padding:28px}#keyboard-shortcuts-dialog::backdrop{background:#000000ab}#confirm-delete-book::backdrop{background:#000000ab}#order-dialog::backdrop{background:#000000ab}.dialog-title{margin:0 0 16px;font-size:18px;font-weight:700}.confirm-dialog__message{margin-bottom:12px;font-size:14px;line-height:1.5}.dialog-close{position:absolute;color:var(--muted);cursor:pointer;background:0 0;border:none;padding:4px;font-size:20px;line-height:1;top:12px;right:12px}.dialog-close:hover{color:var(--dark)}#keyboard-shortcuts-dialog{max-width:680px}.shortcuts-columns{display:flex;gap:32px}.shortcuts-columns>.shortcuts-list{flex:1}.shortcuts-list{display:flex;flex-direction:column;gap:16px;margin:0}.shortcuts-group dt{text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px;font-size:11px;font-weight:700}.shortcuts-group dd{margin:0 0 8px;font-size:13px}.shortcuts-group dd:last-child{margin-bottom:0}.shortcuts-list kbd{display:inline-block;text-align:center;background:var(--sidebar-bg);border:1px solid var(--border);border-radius:4px;min-width:22px;margin-right:4px;padding:1px 6px;font-family:inherit;font-size:11px}#order-dialog{max-width:840px}.order-sections{display:flex;gap:0}.order-section{flex:1;min-width:0}.order-divider{background:var(--border);flex-shrink:0;width:1px;margin:0 24px}.order-details__title{margin:0 0 12px;font-size:13px;font-weight:700}.order-details__list{list-style:none;margin:0 0 16px;padding:0;font-size:13px;line-height:1.6}.order-details__list li{position:relative;padding-left:18px}.order-details__list li:before{content:"✓";position:absolute;color:var(--accent);font-weight:700;left:0}.order-details__free{color:var(--accent);margin:0 0 20px;font-size:14px;font-weight:700}.order-form{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.order-field{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}.order-field input,.order-field textarea{border:1px solid var(--border);font:inherit;background:var(--sidebar-bg);color:var(--dark);border-radius:6px;padding:8px 10px;transition:border-color .15s;font-size:13px;font-weight:400}.order-field input:focus,.order-field textarea:focus{outline:none;border-color:var(--accent)}.order-field input:disabled{opacity:.5}.order-required{color:var(--red);font-weight:400}.order-optional{opacity:.5;font-weight:400}.order-hint{opacity:.5;font-size:11px;font-weight:400}.order-confirm{display:flex;cursor:pointer;align-items: center;gap:8px;margin-bottom:1rem;font-size:13px}.confirm-dialog__actions #btn-order-export{border-radius:8px;padding:10px 24px}.confirm-dialog__actions #btn-order-export:disabled{background:var(--muted);color:#fff;cursor:not-allowed;box-shadow:none;filter:none}#order-progress{list-style:none;margin:0;padding:0}#order-progress[hidden]{display:none}#order-progress li{display:flex;color:var(--muted);align-items: center;gap:8px;font-size:13px;line-height:1.6}#order-progress li.step-done .step-icon{color:var(--accent)}#order-progress li.step-done{color:var(--dark)}#order-progress li.step-active{color:var(--dark);font-weight:600}#order-progress li.step-error{color:var(--red)}.step-icon{text-align:center;flex-shrink:0;width:16px;font-size:14px}.step-active .step-icon{animation:spin 1s linear infinite}#order-progress li.step-ordered{color:var(--accent);margin-top:8px;font-size:14px;font-weight:700}#order-progress li.step-ordered .step-icon{color:var(--accent)}.order-complete__message{opacity:.7;margin:16px 0 12px;font-size:13px;line-height:1.5}.order-complete__download{border-radius:999px;padding:8px 20px}@keyframes spin{to{transform:rotate(360deg)}}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:8px}.confirm-dialog__actions button:not(.btn-primary){cursor:pointer;border:1.5px solid var(--border);background:var(--bg);color:var(--dark);border-radius:6px;padding:7px 16px;transition:background .15s;font-family:inherit;font-size:13px;font-weight:600}.confirm-dialog__actions button:not(.btn-primary):hover{background:var(--border)}.confirm-dialog__actions .btn-danger{background:var(--red);border-color:var(--red);color:#fff}.confirm-dialog__actions .btn-danger:hover{background:#c81e33;border-color:#c81e33}#add-photos-inline{text-align:center;padding:10px 6px 2px}.add-photos__computer-btn{display:flex;border-radius:8px;justify-content:center;align-items: center;gap:6px;width:100%;margin-bottom:6px;padding:8px 16px;box-shadow:0 2px 8px #378add40}.add-photos__hint{color:var(--muted);margin-bottom:8px;font-size:12px}#qr-wrap{position:relative;cursor:pointer;overflow:hidden;border-radius:6px;margin:4px 0 8px}#phone-upload-qr{display:block}#qr-copied-overlay{position:absolute;display:none;color:#fff;pointer-events:none;background:#000000b3;justify-content:center;align-items: center;font-size:14px;font-weight:600;inset:0}#qr-copied-overlay.visible{display:flex}#phone-upload-devices{color:var(--dark);min-height:18px;font-size:12px;font-weight:700}#phone-upload-received{color:var(--green);min-height:18px;font-size:12px;font-weight:700}#phone-upload-received.phone-upload-error{color:var(--red,#c44)}.photo-drag-ghost{position:fixed;object-fit:cover;pointer-events:none;opacity:.85;z-index:9999;border-radius:4px;width:80px;height:80px;box-shadow:0 4px 16px #0003}