.book-customizer { width:min(1120px,100%); max-height:calc(100dvh - 48px); overflow:auto; border-radius:20px; background:#fafbf7; color:#203a30; text-align:left; font-family:Inter,"Segoe UI",Arial,sans-serif; box-shadow:0 25px 100px #041e2450; }
.book-customizer * { box-sizing:border-box; }
.book-customizer button { font:inherit; cursor:pointer; transition:background .15s; }
.book-customizer button:disabled { opacity:.45; cursor:not-allowed; }
.book-customizer button:focus-visible { outline:3px solid #81a663; outline-offset:3px; }
.book-customizer svg { width:18px; height:18px; flex-shrink:0; }
.customizer-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 28px; border-bottom:1px solid #e0e6d9; }
.customizer-heading { display:flex; gap:13px; align-items:center; min-width:0; }
.customizer-logo { background:#e8efdc; color:#789955; width:39px; height:42px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; }
.customizer-logo svg { width:23px; height:23px; }
.customizer-eyebrow { display:block; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:1.7px; color:#8b987e; }
.customizer-book-title { font-size:15px; font-weight:550; margin:5px 0 0; line-height:1.4; overflow-wrap:anywhere; }
.customizer-close { border:0; background:#eef1e9; color:#76826b; display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; }
.customizer-close:hover { background:#e0e8d6; }
.customizer-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); }
.customizer-stage { min-width:0; padding:24px 30px; background:#edf1e6; display:flex; flex-direction:column; }
.customizer-stage-label { display:flex; justify-content:space-between; gap:12px; font-size:9px; letter-spacing:1.5px; color:#8b987d; margin-bottom:20px; }
.customizer-stage-label span:last-child { letter-spacing:.3px; font-size:10px; }
.customizer-image-wrap { flex:1; display:flex; align-items:center; justify-content:center; min-width:0; min-height:250px; }
.customizer-empty-preview { padding:45px 25px; text-align:center; border:1px dashed #c6d4b5; border-radius:12px; color:#779064; font:24px/1.3 Georgia,serif; }
.customizer-empty-preview[hidden] { display:none; }
.customizer-empty-preview > span { display:block; font-size:45px; margin-bottom:16px; }
.customizer-empty-preview p { font:11px/1.6 Inter,"Segoe UI",Arial,sans-serif; color:#8b987d; }
.book-customizer #canvas-container { position:relative; display:inline-block; max-width:100%; line-height:0; }
.book-customizer #preview { display:block; width:auto; height:auto; max-width:100%; max-height:480px; object-fit:contain; border-radius:8px; box-shadow:0 12px 34px #28362120; user-select:none; -webkit-user-drag:none; touch-action:none; }
.customizer-preview-hint { text-align:center; font-size:10px; line-height:1.7; color:#8b957e; max-width:370px; margin:22px auto 0; }
.customizer-tools { padding:27px 30px 24px; display:flex; flex-direction:column; min-width:0; }
.customizer-intro h3 { font:400 34px/1.12 Georgia,serif; letter-spacing:-1px; margin:12px 0; }
.customizer-intro h3 em { color:#789650; font-weight:400; display:block; }
.customizer-intro p { color:#8a947f; font-size:11px; line-height:1.8; margin:0; }
.customizer-tool-section { border-top:1px solid #e1e7d9; padding-top:19px; margin-top:22px; }
.customizer-section-title { display:flex; align-items:center; gap:9px; }
.customizer-section-title > span { font:italic 15px Georgia,serif; color:#94a780; }
.customizer-section-title h4 { font-size:12px; font-weight:600; margin:0; }
.customizer-tool-section > p { font-size:11px; line-height:1.7; color:#8a947f; margin:9px 0 13px; }
.book-customizer .customizer-scenario-button { display:flex; align-items:center; gap:9px; width:100%; border:1px solid #bcd997; border-radius:9px; padding:13px 14px; font-size:12px; font-weight:550; background:#d2eab3; color:#3c5a28; }
.customizer-scenario-button svg:last-child { margin-left:auto; }
.book-customizer .customizer-scenario-button:hover { background:#c6ed92; }
.customizer-character-tools { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.customizer-dropdown-anchor { position:relative; min-width:0; }
.book-customizer .customizer-tool-button { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 10px; width:100%; border:1px solid #dfe6d6; border-radius:8px; background:white; color:#6c7d5b; font-size:11px; }
.book-customizer .customizer-tool-button:hover { background:#edf3e5; }
.book-customizer .customizer-face { display:flex; align-items:center; gap:6px; border:0; background:transparent; color:#7d8971; font-size:10px; width:100%; margin-top:13px; padding:0; }
.customizer-face svg { width:14px; height:14px; }
.customizer-face span { margin-left:auto; border:1px solid #dce2d4; border-radius:4px; padding:3px 5px; font-size:8px; }
.customizer-status { display:flex; align-items:flex-start; gap:7px; margin-top:23px; padding:12px 0; font-size:10px; color:#849177; line-height:1.6; overflow-wrap:anywhere; }
.customizer-status-dot { width:5px; height:5px; border-radius:50%; background:#a2b487; margin-top:5px; flex-shrink:0; }
.customizer-launch { margin-top:auto; display:grid; gap:8px; }
.book-customizer .customizer-build,.book-customizer .customizer-play { width:100%; border:0; border-radius:8px; padding:12px; display:flex; justify-content:center; align-items:center; gap:12px; font-size:11px; background:#263f30; color:#f5f7ef; }
.book-customizer .customizer-build:hover { background:#3e5a38; }
.book-customizer .customizer-play { background:transparent; color:#77886a; border:1px solid #dfe6d6; }
.book-customizer .customizer-play:hover { background:#eef3e7; }
.book-customizer .customizer-play svg { width:13px; height:13px; }
.book-customizer #selectionBox { position:absolute; border:2px solid #b3e777; display:none; cursor:move; }
.book-customizer #blurOverlay { position:absolute; inset:0; backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); background:#ffffff33; display:none; pointer-events:none; -webkit-mask-composite:xor; mask-composite:exclude; }
.book-customizer #actionButtons { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:none; gap:6px; white-space:nowrap; }
.book-customizer #actionButtons button { display:flex; align-items:center; gap:5px; padding:8px 10px; font-size:10px; background:#fafcf4f5; border:1px solid #c0d9a3; color:#50693b; border-radius:7px; line-height:1.2; }
.book-customizer .dropdown { display:none; position:absolute; bottom:calc(100% + 6px); left:0; width:max-content; min-width:100%; max-width:min(300px,80vw); max-height:210px; overflow:auto; background:#fff; border:1px solid #dce5d2; border-radius:10px; padding:5px; box-shadow:0 10px 35px #203a3026; z-index:10; }
.book-customizer #voiceDropdown { left:auto; right:0; }
.book-customizer .dropdown.show { display:block; }
.book-customizer .dropdown-item { font-size:12px; line-height:1.6; padding:10px; border-radius:6px; cursor:pointer; }
.book-customizer .dropdown-item:hover { background:#eff4e8; }
.book-customizer .dropdown-item button { border:1px solid #dce5d2; background:#f1f5e9; color:#5a7742; }
.book-customizer #playDropdown .dropdown-item button { border-radius:5px; padding:5px 8px; margin-left:5px; font-size:10px; }
.customizer-name-dialog { border:1px solid #dce5d2; border-radius:18px; padding:30px; width:min(430px,calc(100% - 32px)); color:#203a30; background:#fafbf7; box-shadow:0 25px 80px #10291f40; font-family:Inter,"Segoe UI",Arial,sans-serif; }
.customizer-name-dialog::backdrop { background:#10291fb3; backdrop-filter:blur(5px); }
.customizer-name-dialog h2 { font:30px/1.15 Georgia,serif; letter-spacing:-.7px; margin:14px 0; }
.customizer-name-dialog p { font-size:12px; line-height:1.7; color:#859177; margin-bottom:24px; }
.customizer-name-dialog label { display:block; font-size:11px; color:#6d7d60; margin-bottom:8px; }
.customizer-name-dialog input { width:100%; padding:12px; border:1px solid #d5dfca; border-radius:8px; background:#fff; color:#203a30; font:13px Inter,"Segoe UI",Arial,sans-serif; }
.customizer-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.customizer-dialog-actions button { border:0; padding:11px 13px; border-radius:8px; background:#c6ed92; color:#38582b; font-size:11px; }
.customizer-dialog-actions .name-cancel { background:#edf1e6; color:#78866b; }
@media(max-height:800px) and (min-width:761px) { .customizer-header { padding:17px 25px; } .customizer-tools { padding:20px 26px; } .customizer-intro h3 { font-size:29px; margin:9px 0; } .customizer-tool-section { margin-top:17px; padding-top:15px; } .customizer-status { margin-top:12px; } .book-customizer #preview { max-height:420px; } }
@media(max-width:760px) { .book-customizer { max-height:calc(100dvh - 20px); border-radius:15px; } .customizer-header { padding:17px; } .customizer-book-title { font-size:13px; } .customizer-layout { grid-template-columns:minmax(0,1fr); } .customizer-stage { padding:18px 20px; } .customizer-image-wrap { min-height:160px; } .book-customizer #preview { max-height:260px; } .customizer-preview-hint { margin-top:16px; font-size:9px; } .customizer-stage-label { margin-bottom:14px; } .customizer-tools { padding:24px; } .customizer-intro h3 { font-size:30px; } .customizer-intro h3 br { display:none; } }
@media(max-width:760px) { .customizer-intro h3 em { display:inline; } }
@media(prefers-reduced-motion:reduce) { .book-customizer * { transition:none!important; } }