*{box-sizing:border-box}
html,body{margin:0}
body{background:#dfe3ea;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
#app{display:flex;min-height:100vh}
#panel{width:310px;flex:none;background:#14171f;color:#e6e8ee;padding:18px 16px 40px;position:sticky;top:52px;height:calc(100vh - 52px);overflow:auto;font:13px/1.45 system-ui,Segoe UI,sans-serif}
#panel h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8b93a7;margin:22px 0 8px;font-weight:600}
#panel .t{font-size:16px;font-weight:700;margin:0}
#panel .st{color:#8b93a7;font-size:12px;margin:2px 0 10px}
#panel .note{background:#2a2414;color:#f4d58d;border-radius:8px;padding:8px 10px;font-size:12px;margin:10px 0}
#panel button,#panel select,#panel label.btn{font:inherit;background:#252a36;color:#e6e8ee;border:1px solid #343b4b;border-radius:7px;padding:6px 10px;cursor:pointer}
#panel button:hover,#panel label.btn:hover{background:#30374a}
#panel button.pri{background:#3b82f6;border-color:#3b82f6;color:#fff;font-weight:600}
#panel .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#panel .full{width:100%;margin-top:6px}
#panel input[type=color]{width:38px;height:30px;border:1px solid #343b4b;border-radius:6px;background:none;padding:2px;cursor:pointer}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid #14171f;outline:1px solid #343b4b;cursor:pointer;padding:0!important}
.pal{display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin-bottom:5px}
.pal i{display:inline-block;width:14px;height:14px;border-radius:3px}
.secrow{display:flex;align-items:center;gap:4px;background:#1c2029;border:1px solid #2b3140;border-radius:7px;padding:5px 6px;margin-bottom:5px}
.secrow span{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.secrow.off span{opacity:.4;text-decoration:line-through}
#panel .secrow button{padding:2px 6px;font-size:11px}
#stage{flex:1;overflow:auto;padding:32px 24px 60px}
.page{width:210mm;min-width:210mm;min-height:297mm;margin:0 auto;background:#fff;box-shadow:0 10px 40px rgba(20,30,50,.18);position:relative;outline:none;overflow:hidden}
.page [data-rep],.page .sec-h{break-inside:avoid;page-break-inside:avoid}
.page .sec[hidden]{display:none!important}
.page:focus-within [contenteditable]:hover{}
.page .ed-hover{outline:1.5px dashed rgba(59,130,246,.55);outline-offset:2px;border-radius:2px;cursor:text}
.page .ed-active{outline:2px solid #3b82f6!important;outline-offset:2px;background-color:rgba(59,130,246,.08)!important;border-radius:2px}
body.exporting .ed-active,body.exporting .ed-hover{outline:none!important;background-color:transparent!important}
.pb-guide{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed #ef4444;pointer-events:none;z-index:50}
.pb-guide::after{content:attr(data-label);position:absolute;right:4px;top:2px;font:600 9px system-ui;color:#ef4444;background:#fff;padding:0 4px}
.photo{position:relative;overflow:hidden;background:#eef0f4;display:flex;align-items:center;justify-content:center;flex:none}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .ph{font:700 10px/1 system-ui;letter-spacing:.2em;color:#8a93a6;border:1.5px dashed #b4bccb;position:absolute;inset:6%;display:flex;align-items:center;justify-content:center;border-radius:inherit}
.photo.off{display:none!important}
[data-shape=circle] .photo{border-radius:50%!important}
[data-shape=rounded] .photo{border-radius:14%!important}
[data-shape=square] .photo{border-radius:0!important}
body.exporting .pb-guide,body.exporting .photo.empty{display:none!important}
body.exporting .page{box-shadow:none;margin:0}
@media (max-width:900px){#app{flex-direction:column}#panel{width:auto;height:auto;position:static}#stage{padding:16px}}
.rb-topnav .btn-primary{color:#fff}
body.exporting .rb-topnav{display:none!important}
@media print{
 @page{size:A4;margin:0}
 html,body{background:#fff!important}
 #panel,.pb-guide,.rb-topnav{display:none!important}
 #app{display:block}#stage{padding:0;overflow:visible}
 .page{box-shadow:none;margin:0;overflow:visible}
 .photo.empty{display:none!important}
 .ed-active,.ed-hover{outline:none!important;background-color:transparent!important}
 *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}