:root{--studio-paper:#f7f4ed;--studio-line:#ded7c9;--studio-green:#404330;--studio-accent:#7b8760}
.edit-book-button{border:1px solid #ae9b75;background:transparent;color:#404330;padding:12px 18px;margin-left:auto;margin-right:14px;font-size:11px}
.edit-book-button:hover{background:#e8ddc8}
#editorUI[hidden],#editorUI [hidden]{display:none!important}
#editorUI{font:12px/1.45 Inter,Arial,sans-serif;color:#171717}
#editorUI button,#editorUI input,#editorUI select,#editorUI textarea{font:inherit;color:inherit}
#editorUI button{border:1px solid var(--studio-line);background:var(--studio-paper);padding:8px 10px;cursor:pointer;border-radius:2px;white-space:nowrap}
#editorUI button:hover:not(:disabled){background:#e8ddc8}
#editorUI button:focus-visible,#editorUI input:focus-visible,#editorUI select:focus-visible,#editorUI textarea:focus-visible{outline:2px solid #7b8760;outline-offset:2px}
#editorUI button:disabled{opacity:.35;cursor:default}
#editorUI .studio-primary{background:#404330;color:#fff;border-color:#404330}
#editorUI .studio-primary:hover{background:#55583f}
#editorUI .studio-danger{color:#8a3e31}
.studio-bar{position:fixed;inset:0 0 auto;min-height:61px;background:#f7f4ed;border-bottom:1px solid #ded7c9;display:flex;justify-content:space-between;align-items:center;padding:10px 22px;z-index:1001;gap:20px}
.studio-name b{display:block;font-size:14px;font-weight:500;letter-spacing:.2px}
.studio-name span{display:block;font-size:10px;color:#656650;margin-top:3px}
.studio-actions{display:flex;gap:7px;align-items:center}
.autosave-switch{display:flex;align-items:center;gap:5px;margin:0 8px;font-size:10px}
.studio-tools{position:fixed;inset:62px 0 auto;min-height:45px;background:#eeeadf;border-bottom:1px solid #ded7c9;display:flex;gap:5px;align-items:center;padding:6px 15px;z-index:1000;overflow-x:auto;scrollbar-width:thin}
#editorUI .studio-tools button{font-size:10px;padding:7px 9px}
.tool-divider{height:20px;width:1px;background:#d0c8b7;margin:0 5px;flex-shrink:0}
.studio-panel{position:fixed;right:0;top:107px;bottom:0;width:300px;background:#f7f4ed;border-left:1px solid #ded7c9;z-index:999;overflow-y:auto;scrollbar-width:thin}
.studio-tabs{display:flex;position:sticky;top:0;background:#f7f4ed;z-index:1;border-bottom:1px solid #ded7c9;padding:8px 10px;gap:4px}
#editorUI .studio-tabs button{flex:1;border:0;background:transparent;padding:10px 6px;font-size:11px}
#editorUI .studio-tabs button[aria-selected=true]{background:#404330;color:#fff}
.studio-pane{padding:17px 16px 30px}
.property-heading{border-bottom:1px solid #ded7c9;margin-bottom:18px;padding-bottom:15px}
.property-heading>span{font-size:9px;letter-spacing:1.3px;color:#7d6b45}
.property-heading h3{font-size:15px;font-weight:500;margin:8px 0 5px;overflow-wrap:anywhere}
.property-heading p,.property-hint,.panel-note{font-size:11px;line-height:1.65;color:#696b5b}
.property-hint{padding:15px;background:#eeeadf;margin-top:20px}
.studio-pane label{display:block;font-size:10px;color:#555747;margin:10px 0}
.studio-pane input:not([type=checkbox]):not([type=color]),.studio-pane select{display:block;width:100%;padding:9px 8px;margin-top:5px;background:#fffdf8;border:1px solid #d8d1c2;min-width:0;border-radius:2px;font-size:12px}
.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.property-section{border-bottom:1px solid #ded7c9;padding-bottom:17px;margin-bottom:18px}
.property-section h4{font-size:11px;font-weight:600;margin:0 0 11px}
.format-row{display:flex;gap:5px;margin:10px 0;flex-wrap:wrap}
#editorUI .format-row button{min-width:35px;padding:7px 8px;font-size:11px}
.colour-field{display:flex!important;align-items:center;justify-content:space-between;gap:12px}
.colour-field input{width:42px;height:29px;border:1px solid #d8d1c2;padding:2px;background:#fffdf8}
.check-field{display:flex!important;gap:8px;align-items:center}
#editorUI .wide{display:block;width:100%;margin:9px 0;font-size:11px}
.page-actions{display:flex;gap:5px;margin:10px 0}
#editorUI .page-actions button{font-size:10px;flex:1;padding:9px 6px}
.studio-page-list{display:grid;gap:5px;margin-top:18px}
#editorUI .studio-page-list button{display:flex;gap:12px;align-items:center;text-align:left;padding:12px;white-space:normal;font-size:11px}
.studio-page-list b{font-size:10px;font-weight:400;color:#8b784f}
#editorUI .studio-page-list .current{background:#e8ddc8;border-color:#ae9b75}
.revision-row{padding:17px 0;border-bottom:1px solid #ded7c9;display:grid;gap:6px}
.revision-row b{font-weight:500}.revision-row small{color:#767766;font-size:10px}
.revision-row button{font-size:10px!important;margin-top:5px}
.studio-open{padding-top:108px}
.studio-open .app-header{display:none}
.studio-open main{margin-right:300px;margin-left:0;width:calc(100% - 300px);max-width:none;padding:18px 22px 30px}
.studio-open .viewer{padding:28px}
.studio-open #book{cursor:default}
.studio-open .page [contenteditable=true]{cursor:text;min-width:4px;outline:none}
.studio-open .page [data-editor-selected]{outline:1px dashed #afc48d!important;outline-offset:3px}
.studio-open .page img{user-select:none}
#selectionBox{position:fixed;border:1px solid #7c965c;z-index:998;pointer-events:none;box-sizing:border-box}
#editorUI #selectionBox button{position:absolute;pointer-events:auto;background:#404330;color:#fff;border:1px solid #fff;padding:0;touch-action:none;box-shadow:0 1px 4px #0002}
.selection-move{left:-1px;top:-25px;width:25px;height:24px;cursor:move!important}
.selection-resize{right:-5px;bottom:-5px;width:11px;height:11px;cursor:nwse-resize!important}
.studio-notice{position:fixed;top:115px;left:24px;right:324px;z-index:1002;padding:12px 15px;background:#fff7df;border:1px solid #c5ac70;font-size:11px;line-height:1.7;box-shadow:0 3px 15px #0001}
#editorUI .studio-notice button{font-size:10px;padding:5px 8px;margin:3px}
.studio-toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);max-width:min(90vw,550px);padding:13px 20px;background:#404330;color:#fff;z-index:1100;box-shadow:0 3px 20px #0002;font-size:12px}
#studioDialog{position:fixed;inset:0;margin:auto;width:min(720px,94vw);max-height:85svh;padding:24px;background:#f7f4ed;border:1px solid #ae9b75;z-index:1200;overflow:auto}
#studioDialog::backdrop{background:#20231488}
.studio-dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.studio-dialog-head h2{font:32px 'Cormorant Garamond',Georgia,serif;margin:0}
#elementHTML{width:100%;height:350px;font:12px/1.7 monospace!important;resize:vertical;background:#fffdf8;border:1px solid #d8d1c2;padding:15px;margin-bottom:15px}
.asset-library{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#editorUI .asset-library button{white-space:normal;text-align:left;padding:8px;font-size:10px}
.asset-library img{width:100%;height:115px;object-fit:cover;margin-bottom:8px}
.page.hide-folio>.folio{display:none!important}
@media(max-width:900px){.studio-open main{margin-right:270px;width:calc(100% - 270px);padding:15px 12px}.studio-panel{width:270px}.studio-notice{right:285px}.studio-open .toolbar{gap:8px}.studio-open .contents-btn span{display:none}.studio-open .view-switch button{width:35px}.studio-open .viewer{padding:15px}}
@media(max-width:650px){
 .edit-book-button{font-size:10px;padding:10px;margin-right:7px}
 .studio-bar{padding:9px 10px;gap:8px;min-height:62px}.studio-name b{font-size:12px}.studio-name span{font-size:9px;max-width:105px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .studio-actions{gap:4px}#editorUI .studio-actions button{font-size:10px;padding:8px}.studio-actions button>span,.autosave-switch{display:none!important}
 .studio-tools{padding-inline:8px}.studio-panel{top:auto;bottom:0;left:0;width:100%;height:36svh;border-left:0;border-top:1px solid #ae9b75}
 .studio-open{padding-bottom:36svh}.studio-open main{width:100%;margin:0;padding:14px 12px 30px}.studio-open .viewer{padding:15px}
 .studio-pane{padding:13px 17px 25px}.studio-notice{top:115px;left:12px;right:12px}.studio-toast{bottom:38svh}
 .asset-library{grid-template-columns:1fr 1fr}.property-section{padding-bottom:12px;margin-bottom:12px}
}
@media print{#editorUI,#editBook{display:none!important}.studio-open{padding:0!important}.studio-open main{width:300mm!important;margin:0!important;padding:0!important}.studio-open .page [data-editor-selected]{outline:none!important}}

.studio-layer-list{display:grid;gap:4px}#editorUI .studio-layer-list button{display:flex;text-align:left;gap:8px;align-items:baseline;white-space:normal;font-size:10px}.studio-layer-list small{font-size:8px;color:#8a7851;min-width:28px}
#editorPasswordDialog{width:min(420px,calc(100vw - 32px));border:1px solid #c8bca5;background:#f7f4ed;color:#404330;padding:28px;font:14px/1.5 var(--sans)}
#editorPasswordDialog::backdrop{background:#22251db3}
#editorPasswordDialog h2{font:500 28px/1.3 var(--serif);margin:0 0 12px}
#editorPasswordDialog label{display:block;margin:20px 0 6px}
#editorPasswordDialog input{width:100%;padding:11px;border:1px solid #b7aa91;background:white;color:#292c20;font:16px var(--sans);direction:ltr}
#editorPasswordDialog input:focus{outline:2px solid #7d6b45;outline-offset:2px}
#editorPasswordError{color:#a13929;min-height:21px;margin:8px 0}
#editorPasswordDialog .password-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
#editorPasswordDialog button{padding:10px 16px;border:1px solid #b7aa91;background:transparent;color:#404330}
#editorPasswordDialog button[type=submit]{background:#404330;border-color:#404330;color:white}
@media print{#editorPasswordDialog{display:none!important}}
@media(max-width:650px){.studio-pane input:not([type=checkbox]):not([type=color]),.studio-pane select{font-size:16px!important}}