.text-pages{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;align-items:center;gap:28px;max-width:960px}
.text-pages li{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.stage{position:relative;width:100%;container-type:inline-size;background:#fff;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.08),0 18px 40px rgba(14,59,51,.12);cursor:text;touch-action:manipulation;overflow:hidden}
.stage canvas{display:block;width:100%;height:100%;pointer-events:auto}
.page-no{font-size:13px;font-weight:600;color:var(--muted)}
.tb{position:absolute;min-height:1em;border-radius:2px;outline:1px dashed transparent;line-height:1.25}
.tb:hover{outline-color:rgba(14,107,92,.5)}
.tb.on{outline:2px solid #0E6B5C;outline-offset:1px;z-index:2}
.txt{padding:.1em .2em;white-space:pre-wrap;overflow-wrap:anywhere;outline:none;min-height:1.25em;cursor:text}
.txt:empty::before{content:attr(data-placeholder);color:#8FA39A;font-style:italic}
.tb.light .txt:empty::before{color:#C9D2CB}
.grip{position:absolute;left:-2px;top:0;transform:translateY(-100%);display:none;height:26px;min-width:34px;padding:0 8px;border:0;border-radius:8px 8px 0 0;background:#0E6B5C;color:#fff;font-size:15px;line-height:26px;cursor:grab;touch-action:none}
.tb.on .grip{display:block}
.grip:active{cursor:grabbing}
.resize{position:absolute;right:-7px;top:50%;width:12px;height:26px;margin-top:-13px;border-radius:6px;background:#0E6B5C;border:2px solid #fff;display:none;cursor:ew-resize;touch-action:none}
.tb.on .resize{display:block}
.panel-note{margin:0;font-size:14px;line-height:1.5;color:#C9E3DA}
.style{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#A9CFC2}
.field select{min-height:44px;padding:0 10px;border-radius:10px;border:1px solid #2E6A5D;background:var(--deep2);color:#fff;font:inherit;font-size:15px;font-weight:600}
.size{display:flex;align-items:center;gap:8px}
.size button,.toggles button{min-width:44px;min-height:40px;border-radius:10px;border:1px solid #2E6A5D;background:var(--deep2);color:#fff;font-size:15px}
.size output{min-width:56px;text-align:center;color:#fff;font-size:15px}
.toggles{display:flex;flex-wrap:wrap;gap:6px}
.toggles button[aria-pressed="true"]{background:var(--mint);color:#06231C;border-color:var(--mint)}
.swatches{display:flex;gap:10px}
.swatches button{width:34px;height:34px;border-radius:50%;border:2px solid #2E6A5D;box-shadow:inset 0 0 0 2px var(--deep)}
.swatches button[aria-checked="true"]{border-color:var(--mint);outline:2px solid var(--mint);outline-offset:2px}
.cover{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--deep2);cursor:pointer}
.cover input{width:20px;height:20px;margin-top:2px;accent-color:#3BE0A8;flex:none}
.cover b{display:block;font-size:14px}.cover small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:#A9CFC2}
.ghost.danger{border-color:#7A4A36;color:#FFD9C7}.ghost.danger:hover{border-color:#FFB596}
.count{margin:0;font-size:14px;color:#E7FBF4;font-weight:600}
.progress{display:flex;flex-direction:column;gap:8px}
.bar{height:10px;border-radius:99px;background:#1E5A4E;overflow:hidden}
.bar span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#3BE0A8,#C2FBE6,#3BE0A8);background-size:200% 100%;animation:shine 1.4s linear infinite;transition:width .5s ease}
@keyframes shine{from{background-position:200% 0}to{background-position:0 0}}
.elapsed{margin:0;font-size:13px;color:#C9E3DA}
.error-box{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:#FFF3EC;border:2px solid #E9A27A;color:#6B2A0A}
.error-box strong{font-size:16px}.error-box p{margin:0;font-size:14px;line-height:1.5}
body.busy .stage{pointer-events:none}
body.busy .stage::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#3BE0A8,transparent);box-shadow:0 0 18px 6px rgba(59,224,168,.45);animation:scan 1.8s ease-in-out infinite alternate}
@keyframes scan{from{top:0}to{top:calc(100% - 3px)}}
@media(max-width:760px){.text-pages{gap:18px}.style{gap:8px}.cover small{display:none}}
@media(prefers-reduced-motion:reduce){.bar span,body.busy .stage::after{animation:none}}
.board-head .ghost.light{margin-left:auto;min-height:38px;border-color:var(--line);color:var(--ink);background:#fff}
.board-head .ghost.light:hover{border-color:var(--accent);color:var(--ink)}
@media(max-width:760px){
 .panel{gap:8px;max-height:52vh;overflow-y:auto}
 .panel-note{font-size:13px}
 .style{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
 .field{flex-direction:row;align-items:center;font-size:0;gap:6px}
 .field select{min-height:40px;font-size:14px}
 .size button,.toggles button{min-width:40px;min-height:38px;font-size:14px}
 .size output{min-width:44px;font-size:14px}
 .swatches{gap:8px}.swatches button{width:30px;height:30px}
 .cover{padding:8px 10px;flex:1 1 100%}.cover b{font-size:13px}
 .ghost.danger{min-height:38px}
 .go{min-height:48px}
}