:root{
  --bg:#121419;--panel:#1a1d23;--panel2:#22262e;--panel3:#2a2f39;--line:#2c313b;--line2:#3a404c;
  --text:#ebe9e4;--muted:#9a9fa9;--faint:#6b717c;
  --acc:#e9a94b;--acc2:#f5c983;--accInk:#231707;--accSoft:rgba(233,169,75,.14);
  --danger:#ef6b6b;--ok:#62c48b;--sel:#e9a94b;--guide:#ff4fa3;
  --r:10px;--ui:'IBM Plex Sans Thai','Prompt','Sarabun',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--ui);font-size:14px;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
kbd{font-family:inherit;font-size:11px;color:var(--faint);margin-left:auto;padding-left:16px}
hr{border:0;border-top:1px solid var(--line);margin:6px 0}
[data-ic]{display:inline-grid;place-items:center;flex:none}
[data-ic] svg{width:18px;height:18px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#343a45;border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

#app{display:flex;flex-direction:column;height:100vh}

/* ---------- top bar ---------- */
.topbar{height:58px;flex:none;display:flex;align-items:center;gap:14px;padding:0 14px;background:linear-gradient(#1c1f26,#181a20);border-bottom:1px solid var(--line);position:relative;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding-right:6px}
.brand-mark{width:38px;height:38px;border-radius:10px;display:block;filter:drop-shadow(0 4px 12px rgba(233,169,75,.35))}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;letter-spacing:.2px}
.brand-txt b em{font-style:italic;font-weight:400;color:var(--acc2)}
.brand-txt span{font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:var(--acc)}
.menu-group{display:flex;align-items:center;gap:4px}
.tb-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:9px;border:1px solid transparent;background:transparent;transition:background .15s,border-color .15s;white-space:nowrap}
.tb-btn:hover{background:var(--panel3)}
.tb-btn .chev svg{width:14px;height:14px;opacity:.6}
.tb-btn.primary{background:linear-gradient(180deg,#f2bc66,#e3a03f);color:var(--accInk);font-weight:600;box-shadow:0 4px 16px rgba(233,169,75,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.tb-btn.primary:hover{filter:brightness(1.06)}
.tb-btn.ghost{border-color:var(--line2)}
.tb-icon{width:34px;height:34px;border-radius:8px;border:0;background:transparent;display:grid;place-items:center;transition:background .15s}
.tb-icon:hover{background:var(--panel3)}
.tb-icon:disabled{opacity:.35;pointer-events:none}
.tb-sep{width:1px;height:22px;background:var(--line);margin:0 6px}
.title-wrap{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.book-title{background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 10px;text-align:center;font-size:15px;font-weight:500;min-width:120px;max-width:420px;width:100%;transition:border-color .15s,background .15s;text-overflow:ellipsis}
.book-title:hover{border-color:var(--line2)}
.book-title:focus{outline:none;border-color:var(--acc);background:var(--panel2)}
.save-state{font-size:12px;color:var(--faint);white-space:nowrap;display:flex;align-items:center;gap:6px}
.save-state::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok)}
.save-state.busy::before{background:var(--acc);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.tb-right{display:flex;gap:8px}
.menu{position:relative}
.menu-pop{position:absolute;top:calc(100% + 6px);left:0;min-width:290px;background:#20242c;border:1px solid var(--line2);border-radius:12px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.5);display:none;z-index:50}
.menu.open .menu-pop{display:block;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:9px 10px;border-radius:8px;text-align:left}
.menu-pop button:hover{background:var(--panel3)}
.menu-pop button [data-ic]{color:var(--acc)}

/* ---------- footer ---------- */
.app-foot{height:28px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;background:#16181d;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;z-index:30}
.app-foot #appFootCopy{overflow:hidden;text-overflow:ellipsis;min-width:0}
.foot-logo{width:16px;height:16px;border-radius:4px;flex:none}
.foot-ver{margin-left:auto;flex:none;padding:1px 8px;border-radius:99px;background:var(--accSoft);color:var(--acc2);font-weight:500}

/* ---------- layout ---------- */
.main{flex:1;display:flex;min-height:0}
.pages-panel{width:236px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}
.panel-head b{font-weight:600}
.panel-head small{margin-left:8px;color:var(--faint)}
.mini-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line2);background:var(--panel2);display:grid;place-items:center}
.mini-btn:hover{border-color:var(--acc);color:var(--acc)}
.mini-btn [data-ic] svg{width:16px;height:16px}
.pages-list{flex:1;overflow-y:auto;padding:4px 12px 16px;display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:0;row-gap:16px}
.pg-item{position:relative;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.pg-item:first-child{grid-column:2}
.pg-item:nth-child(even){align-items:flex-end}
.pg-item:nth-child(odd){align-items:flex-start}
.pg-item:first-child{align-items:flex-start}
.pg-thumb{width:100%;background:#fff;position:relative;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.35);transition:box-shadow .15s,transform .15s}
.pg-item:nth-child(even) .pg-thumb{border-radius:3px 0 0 3px}
.pg-item:nth-child(odd) .pg-thumb{border-radius:0 3px 3px 0}
.pg-item:first-child .pg-thumb{border-radius:0 3px 3px 0}
.pg-thumb .fbp-in{pointer-events:none}
.pg-item.active .pg-thumb{box-shadow:0 0 0 2px var(--acc),0 6px 18px rgba(233,169,75,.25)}
.pg-item:hover .pg-thumb{transform:translateY(-1px)}
.pg-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);width:100%;padding:0 3px;min-height:20px}
.pg-item:nth-child(even):not(:first-child) .pg-meta{flex-direction:row-reverse}
.pg-no{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.pg-item.active .pg-no{color:var(--acc)}
.pg-lbl{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}
.pg-item:nth-child(even):not(:first-child) .pg-lbl{text-align:right}
.pg-acts{position:absolute;top:4px;display:none;gap:3px;z-index:3}
.pg-item:nth-child(odd) .pg-acts,.pg-item:first-child .pg-acts{right:4px}
.pg-item:nth-child(even):not(:first-child) .pg-acts{left:4px}
.pg-item:hover .pg-acts{display:flex}
.pg-acts button{width:24px;height:24px;border-radius:6px;border:0;background:rgba(20,22,26,.85);display:grid;place-items:center;color:#fff}
.pg-acts button:hover{background:var(--acc);color:var(--accInk)}
.pg-acts [data-ic] svg{width:13px;height:13px}
.pg-item.drop-before::before,.pg-item.drop-after::after{content:'';position:absolute;top:0;bottom:22px;width:3px;background:var(--acc);border-radius:3px;box-shadow:0 0 10px var(--acc)}
.pg-item.drop-before::before{left:-3px}
.pg-item.drop-after::after{right:-3px}
.pg-item.dragging{opacity:.35}
.pages-foot{padding:10px 12px 14px;border-top:1px solid var(--line)}
.wide-btn{width:100%;height:38px;border-radius:9px;border:1px dashed var(--line2);background:transparent;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);transition:all .15s}
.wide-btn:hover{border-color:var(--acc);color:var(--acc);background:var(--accSoft)}

.workspace{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.insertbar{height:50px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--panel);overflow-x:auto}
.ib-group{display:flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.ib-spacer{flex:1}
.ib{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);white-space:nowrap;transition:all .15s}
.ib:hover{background:var(--panel3);color:var(--text)}
.ib [data-ic] svg{width:17px;height:17px}
.page-info{font-size:12.5px;color:var(--muted);padding:0 6px;min-width:110px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.zoom-lbl{border:0;background:transparent;min-width:56px;height:30px;border-radius:7px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.zoom-lbl:hover{background:var(--panel3);color:var(--text)}
.insertbar .tb-icon{width:30px;height:30px}

.canvas-wrap{flex:1;position:relative;overflow:auto;display:flex;background:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1.2px) 0 0/22px 22px,radial-gradient(ellipse at 50% 40%,#1b1e25,#101216)}
.stage{position:relative;margin:auto;flex:none;box-shadow:0 30px 70px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.35)}
.page-host{position:absolute;inset:0}
.page-host .fbp-el{cursor:move}
.page-host .fbp-el:hover{outline:1px dashed rgba(233,169,75,.75);outline-offset:-1px}
.page-host .fbp-text.editing{cursor:text;outline:1px solid var(--acc)!important}
.page-host .fbp-text.editing .fbp-tc{cursor:text;user-select:text;-webkit-user-select:text}
.page-host .fbp-tc{user-select:none;-webkit-user-select:none}
.ed .fbp-ph{display:flex;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;color:#8a8f99;font-size:2.6cqw;text-align:center;padding:4%;background:repeating-linear-gradient(135deg,#eef0f3 0 1.4cqw,#e6e9ee 1.4cqw 2.8cqw);border:.35cqw dashed #b8bec8;border-radius:inherit}
.ed .fbp-ph svg{width:clamp(14px,9cqw,64px);height:auto;opacity:.75}
.ed .fbp-ph span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sel-layer,.guides{position:absolute;inset:0;pointer-events:none}
.sel-box{position:absolute;border:1.5px solid var(--sel);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.sel-box.multi{border-style:dashed}
.sel-box.editing{border-color:transparent;box-shadow:none}
.sel-box.editing .h{display:none}
.h{position:absolute;width:12px;height:12px;background:#fff;border:1.5px solid var(--sel);border-radius:3px;pointer-events:auto;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:translate(-50%,-50%)}
.h[data-h=nw]{left:0;top:0;cursor:nwse-resize}.h[data-h=n]{left:50%;top:0;cursor:ns-resize}.h[data-h=ne]{left:100%;top:0;cursor:nesw-resize}
.h[data-h=e]{left:100%;top:50%;cursor:ew-resize}.h[data-h=se]{left:100%;top:100%;cursor:nwse-resize}.h[data-h=s]{left:50%;top:100%;cursor:ns-resize}
.h[data-h=sw]{left:0;top:100%;cursor:nesw-resize}.h[data-h=w]{left:0;top:50%;cursor:ew-resize}
.h[data-h=n],.h[data-h=s]{width:18px;height:8px;border-radius:4px}
.h[data-h=e],.h[data-h=w]{width:8px;height:18px;border-radius:4px}
.h[data-h=rot]{left:50%;top:-30px;border-radius:50%;cursor:grab;width:14px;height:14px;background:var(--sel);border-color:#fff}
.sel-box .rot-line{position:absolute;left:50%;top:-24px;height:24px;width:1.5px;background:var(--sel);transform:translateX(-50%)}
.sel-size{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);font-size:11px;background:var(--sel);color:var(--accInk);padding:2px 7px;border-radius:5px;white-space:nowrap;font-weight:600}
.guide{position:absolute;background:var(--guide);box-shadow:0 0 4px var(--guide)}
.guide.v{top:0;bottom:0;width:1px}.guide.h2{left:0;right:0;height:1px}
.drop-hint{position:absolute;inset:12px;border:2px dashed var(--acc);border-radius:16px;background:rgba(233,169,75,.08);display:none;place-items:center;pointer-events:none;z-index:5;font-size:18px;color:var(--acc2)}
.drop-hint div{display:flex;align-items:center;gap:10px;background:#1a1d23e6;padding:14px 22px;border-radius:12px}
.drop-hint [data-ic] svg{width:24px;height:24px}
.canvas-wrap.dragover .drop-hint{display:grid}

/* ---------- properties ---------- */
.props-panel{width:300px;flex:none;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto}
.ps{border-bottom:1px solid var(--line);padding:14px 16px}
.ps-h{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.ps-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.ps-title [data-ic]{color:var(--acc)}
.prow{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:30px}
.prow > label{width:78px;flex:none;color:var(--muted);font-size:12.5px}
.pctl{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.pctl > *{min-width:0}
.inp,.sel{width:100%;height:32px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);padding:0 9px;outline:none;transition:border-color .15s}
.inp:focus,.sel:focus{border-color:var(--acc)}
textarea.inp{height:auto;padding:7px 9px;resize:vertical;min-height:60px}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9fa9' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:28px}
.sel option{background:#22262e}
.rng{flex:1;display:flex;align-items:center;gap:8px}
.rng input{flex:1;accent-color:var(--acc);min-width:0}
.rng output{width:42px;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.num4{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.num4 label{display:flex;align-items:center;gap:5px;height:30px;border-radius:7px;border:1px solid var(--line2);background:var(--panel2);padding:0 7px;font-size:11px;color:var(--faint)}
.num4 input{width:100%;border:0;background:transparent;outline:none;font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums}
.seg{display:flex;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:2px;gap:2px;width:100%}
.seg button{flex:1;height:28px;border:0;border-radius:6px;background:transparent;color:var(--muted);display:grid;place-items:center;font-size:12.5px;padding:0 4px;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--panel3);color:var(--acc);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.seg [data-ic] svg{width:16px;height:16px}
.clr{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.clr input[type=color]{width:32px;height:30px;padding:0;border:1px solid var(--line2);border-radius:8px;background:none;cursor:pointer;flex:none}
.clr input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.clr input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.sw{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.18);cursor:pointer;flex:none;padding:0;transition:transform .12s}
.sw:hover{transform:scale(1.15)}
.sw.none{background:linear-gradient(45deg,transparent 45%,#e55 46%,#e55 54%,transparent 55%),#fff}
.tgl{position:relative;width:38px;height:22px;flex:none}
.tgl input{opacity:0;width:0;height:0;position:absolute}
.tgl span{position:absolute;inset:0;border-radius:22px;background:var(--line2);transition:.2s;cursor:pointer}
.tgl span::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.tgl input:checked + span{background:var(--acc)}
.tgl input:checked + span::after{transform:translateX(16px)}
.btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;transition:all .15s}
.btn:hover{border-color:var(--acc);color:var(--acc2)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--accInk);font-weight:600}
.btn.pri:hover{filter:brightness(1.07);color:var(--accInk)}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.btn [data-ic] svg{width:16px;height:16px}
.btn.full{width:100%}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}
.btn-row .btn{flex:1}
.icon-btns{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.icon-btns button{height:32px;border-radius:7px;border:1px solid var(--line2);background:var(--panel2);display:grid;place-items:center;color:var(--muted)}
.icon-btns button:hover{color:var(--acc);border-color:var(--acc)}
.icon-btns [data-ic] svg{width:16px;height:16px}
.hint{font-size:12px;color:var(--faint);line-height:1.6}
.hint b{color:var(--muted);font-weight:500}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.chip{height:30px;border-radius:7px;border:1px solid var(--line2);background:var(--panel2);font-size:12px;color:var(--muted)}
.chip.on,.chip:hover{border-color:var(--acc);color:var(--acc)}
.img-prev{width:100%;height:110px;border-radius:9px;background:var(--panel2) center/cover no-repeat;border:1px solid var(--line2);margin-bottom:10px;position:relative}
.fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fx{border:1px solid var(--line2);border-radius:8px;background:var(--panel2);padding:4px;font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:4px;align-items:center}
.fx i{display:block;width:100%;height:40px;border-radius:5px;background-size:cover;background-position:center}
.fx.on,.fx:hover{border-color:var(--acc);color:var(--acc)}
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.frame-opt{height:54px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--muted)}
.frame-opt i{width:26px;height:22px;background:#8794a6;display:block}
.frame-opt.on,.frame-opt:hover{border-color:var(--acc);color:var(--acc)}
.fo-none i{}
.fo-white i{outline:3px solid #fff;outline-offset:-3px}
.fo-polaroid i{border:3px solid #fff;border-bottom-width:7px;height:26px}
.fo-tape i{border:2px solid #fff;position:relative}
.fo-tape i::before{content:'';position:absolute;left:6px;top:-5px;width:12px;height:5px;background:#e8dca8}
.fo-circle i{border-radius:50%;width:22px}
.fo-arch i{border-radius:11px 11px 2px 2px;width:20px}

/* ---------- viewer overlay ---------- */
.viewer-overlay{position:fixed;inset:0;z-index:100;display:none;background:#111}
.viewer-overlay.open{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(6,7,10,.62);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:200;animation:fadeIn .18s ease;padding:20px}
.modal{width:min(520px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:#1d2027;border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:rise .22s cubic-bezier(.2,.9,.3,1.1)}
.modal.wide{width:min(860px,100%)}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.98)}}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px}
.modal-h h3{margin:0;font-size:17px;font-weight:600}
.modal-b{padding:12px 20px;overflow-y:auto}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 18px}
.modal-f .btn{height:36px;padding:0 16px}
.modal p{color:var(--muted);line-height:1.7;margin:0 0 10px}
.form-grid{display:grid;grid-template-columns:120px 1fr;gap:12px 14px;align-items:center}
.form-grid > label{color:var(--muted);font-size:13px}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.theme-opt{border:2px solid transparent;border-radius:10px;padding:0;background:none;display:flex;flex-direction:column;gap:5px;align-items:center;font-size:11.5px;color:var(--muted)}
.theme-opt i{display:block;width:100%;height:44px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.theme-opt.on{color:var(--acc)}
.theme-opt.on i{box-shadow:0 0 0 2px var(--acc)}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:16px}
.tpl{border:0;background:none;padding:0;display:flex;flex-direction:column;gap:7px;align-items:center;color:var(--muted);font-size:12.5px}
.tpl-pg{width:100%;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s;position:relative}
.tpl:hover .tpl-pg{transform:translateY(-3px);box-shadow:0 0 0 2px var(--acc),0 10px 24px rgba(0,0,0,.45)}
.tpl:hover{color:var(--acc)}
.opt-list{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line2);border-radius:10px;cursor:pointer;background:var(--panel2)}
.opt:has(input:checked){border-color:var(--acc);background:var(--accSoft)}
.opt input{accent-color:var(--acc);margin-top:3px}
.opt b{display:block;font-weight:500;margin-bottom:2px}
.opt small{color:var(--muted)}
.progress{height:8px;border-radius:8px;background:var(--panel3);overflow:hidden;margin:14px 0 8px}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e9a94b,#f5c983);transition:width .2s}
.prog-txt{font-size:12.5px;color:var(--muted)}

/* ---------- toast ---------- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:300;align-items:center;pointer-events:none}
.toast{background:#262a33;border:1px solid var(--line2);padding:10px 16px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px;animation:rise .25s ease;font-size:13.5px}
.toast.ok [data-ic]{color:var(--ok)}
.toast.err [data-ic]{color:var(--danger)}
.toast.out{opacity:0;transform:translateY(8px);transition:.3s}

.ctx{position:fixed;z-index:120;min-width:210px;background:#20242c;border:1px solid var(--line2);border-radius:11px;padding:5px;box-shadow:0 20px 50px rgba(0,0,0,.55);animation:pop .12s ease-out}
.ctx button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:7px 10px;border-radius:7px;text-align:left;font-size:13px}
.ctx button:hover{background:var(--panel3)}
.ctx button [data-ic]{color:var(--muted)}
.ctx button [data-ic] svg{width:16px;height:16px}

@media (max-width:1580px){.ib span:not([data-ic]){display:none}.ib{padding:0 9px}}
@media (max-width:1200px){.tb-btn .lbl{display:none}.tb-btn.primary .lbl,.tb-btn.ghost .lbl{display:inline}.ib span:not([data-ic]){display:none}}
@media (max-width:900px){.props-panel{width:260px}.pages-panel{width:200px}.brand-txt{display:none}.save-state{display:none}}