*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{color:#e8e4db;background:#12141a;font-family:Segoe UI,Trebuchet MS,system-ui,sans-serif;overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer}.app{background:#12141a;grid-template-rows:56px 1fr 28px;height:100%;display:grid}.topbar{background:linear-gradient(#1d212b 0%,#171a22 100%);border-bottom:1px solid #2c313d;align-items:center;gap:10px;padding:0 12px;display:flex}.brand{align-items:center;gap:10px;min-width:148px;padding-right:8px;display:flex}.mark{color:#1a140c;background:linear-gradient(145deg,#e2b56a,#b0782c);border-radius:7px;place-items:center;width:28px;height:28px;font-size:15px;font-weight:700;display:grid;box-shadow:inset 0 1px #ffffff59}.brand h1{letter-spacing:.04em;color:#f3ead8;margin:0;font-size:15px;font-weight:650}.brand small{color:#8d8678;letter-spacing:.12em;text-transform:uppercase;margin-top:-1px;font-size:10px;display:block}.group{border-left:1px solid #2e3340;align-items:center;gap:4px;padding:0 8px;display:flex}.tool,.icon-btn{color:#d8d2c6;background:0 0;border:1px solid #0000;border-radius:7px;align-items:center;gap:6px;min-width:34px;height:34px;padding:0 8px;font-size:12px;display:inline-flex}.tool:hover,.icon-btn:hover{color:#fff;background:#2a2f3b}.tool.active{color:#f2d59a;background:#3a2f1d;border-color:#c49a4a}.tool:disabled,.icon-btn:disabled{opacity:.35;cursor:default}.spacer{flex:1}.filename{color:#b7b1a4;text-overflow:ellipsis;white-space:nowrap;max-width:280px;font-size:12px;overflow:hidden}.shell{grid-template-columns:248px 1fr;min-height:0;display:grid}.sidebar{background:#181b23;border-right:1px solid #2c313d;min-height:0;padding:10px;overflow:auto}.side-title{letter-spacing:.14em;text-transform:uppercase;color:#8d8678;margin:0 0 10px;font-size:11px;font-weight:650}.thumbs{flex-direction:column;gap:10px;display:flex}.thumb{color:inherit;cursor:grab;background:#10131a;border:1px solid #333948;border-radius:6px;width:100%;padding:6px 6px 4px}.thumb:active{cursor:grabbing}.thumb.dragging{opacity:.4}.thumb.drop-target{border-color:#c49a4a;box-shadow:0 0 0 2px #c49a4a73}.thumb.active{border-color:#c49a4a;box-shadow:0 0 0 1px #c49a4a}.thumb canvas{pointer-events:none;background:#fff;display:block;width:100%!important;height:auto!important}.thumb span{text-align:center;color:#9a9488;margin-top:4px;font-size:11px;display:block}.workspace{background:#4e535e;position:relative;overflow:auto}.page-stage{justify-content:center;min-height:100%;padding:28px 24px 64px;display:flex}.page-wrap{background:#fff;position:relative;box-shadow:0 12px 40px #00000073}.page-wrap canvas{display:block}.overlay{position:absolute;inset:0}.span-hit{color:#0000;box-shadow:none;appearance:none;cursor:text;background:0 0;border:0;border-radius:1px;margin:0;padding:0;position:absolute}.edit-mode .span-hit:hover,.span-hit.selected{background:#c49a4a24;outline:1.5px solid #c49a4a}.editor-widget{z-index:4;position:absolute}.format-bar{white-space:nowrap;background:#1d212b;border:1px solid #3a414f;border-radius:8px;align-items:center;gap:4px;padding:4px 6px;display:flex;position:absolute;bottom:calc(100% + 8px);left:0;box-shadow:0 8px 22px #00000059}.format-bar select,.format-bar input,.format-bar button{color:#eee8dc;background:#12151c;border:1px solid #3a414f;border-radius:5px;height:26px}.format-bar select{max-width:170px;font-size:11px}.size-input{text-align:center;width:46px;font-size:12px}.color-input{cursor:pointer;width:28px;min-width:28px;padding:2px}.color-input::-webkit-color-swatch-wrapper{padding:1px}.color-input::-webkit-color-swatch{border:none;border-radius:3px}.format-bar button{min-width:26px;padding:0 7px;font-size:12px;font-weight:700}.format-bar button.on{color:#f2d59a;background:#3a2f1d;border-color:#c49a4a}.italic-btn{font-family:Georgia,serif;font-style:italic}.move-grip{cursor:move;border-radius:4px;place-content:center;gap:2px;width:16px;height:22px;display:grid}.move-grip span{background:#8d8678;border-radius:1px;width:10px;height:2px;display:block}.move-grip:hover{background:#2a2f3b}.editor-box{box-sizing:border-box;background:#fffffff0;border:1.5px solid #c49a4a;position:absolute;inset:0;box-shadow:0 0 0 3px #c49a4a38}.editor{color:#111;white-space:nowrap;background:0 0;border:0;outline:none;width:100%;height:100%;margin:0;padding:0 6px;position:absolute;inset:0;overflow:hidden}.handle{z-index:2;background:#f3ead8;border:1.5px solid #c49a4a;border-radius:1px;width:9px;height:9px;position:absolute}.handle-n{cursor:ns-resize;margin-left:-5px;top:-5px;left:50%}.handle-s{cursor:ns-resize;margin-left:-5px;bottom:-5px;left:50%}.handle-e{cursor:ew-resize;margin-top:-5px;top:50%;right:-5px}.handle-w{cursor:ew-resize;margin-top:-5px;top:50%;left:-5px}.handle-ne{cursor:nesw-resize;top:-5px;right:-5px}.handle-nw{cursor:nwse-resize;top:-5px;left:-5px}.handle-se{cursor:nwse-resize;bottom:-5px;right:-5px}.handle-sw{cursor:nesw-resize;bottom:-5px;left:-5px}.marquee{pointer-events:none;background:#d4a0541f;border:1px dashed #d4a054;position:absolute}.status{color:#8f897c;background:#151820;border-top:1px solid #2c313d;align-items:center;gap:16px;padding:0 12px;font-size:11px;display:flex}.status b{color:#d2cbbd;font-weight:600}.hint{margin-left:auto}.welcome{background:radial-gradient(1000px 420px at 50% -10%,#c49a4a29,#0000 55%),#12141a;place-items:center;height:100%;display:grid}.drop{text-align:center;background:#1b1f28;border:1px dashed #6a5a3a;border-radius:18px;width:min(560px,100% - 48px);padding:42px 36px}.drop h2{color:#f4ead8;margin:0 0 8px;font-size:28px;font-weight:600}.drop p{color:#9b9486;margin:0 0 22px;line-height:1.5}.drop.over{background:#242018;border-color:#e2b56a}.cta{color:#1a140c;background:linear-gradient(#e2b56a,#b8863b);border:0;border-radius:9px;height:40px;padding:0 18px;font-weight:650}.note{color:#7d776c;margin-top:18px;font-size:12px}.busy{color:#f3ead8;z-index:5;background:#0c0e126b;place-items:center;font-size:13px;display:grid;position:absolute;inset:0}.toast{color:#f4d7a0;z-index:20;background:#2a1f14;border:1px solid #c49a4a;border-radius:8px;max-width:520px;padding:10px 14px;position:fixed;bottom:42px;left:50%;transform:translate(-50%)}.hidden-input{display:none}
