*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:13px;color:#1d2330;background:#eef0f3}
button{font:inherit;cursor:pointer;border:1px solid #b9c0cc;background:#fff;border-radius:6px;padding:5px 9px;color:#1d2330}
button:hover{background:#f2f6fc;border-color:#7f9cc9}
button:disabled{opacity:.45;cursor:default}
button.primary{background:#ff9900;border-color:#e88b00;color:#111;font-weight:600}
button.primary:hover{background:#ffad33}
button.blue{background:#1f6feb;border-color:#1a5fcc;color:#fff;font-weight:600}
button.blue:hover{background:#3b82f6}
button.on{background:#1d2330;color:#fff;border-color:#1d2330}
button.danger{color:#b42318;border-color:#e4a29b}
input,select{font:inherit;padding:4px 6px;border:1px solid #b9c0cc;border-radius:5px;background:#fff}
input[type=number]{width:74px}
label{user-select:none}
#app{display:grid;grid-template-columns:270px 1fr 280px;grid-template-rows:auto 1fr 150px;height:100vh}
#top{grid-column:1/4;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#232f3e;color:#fff;flex-wrap:wrap}
#top h1{font-size:16px;margin:0 14px 0 0;font-weight:700;letter-spacing:.2px}
#top h1 span{color:#ff9900}
#top .sp{flex:1}
#top button{border-color:#3d4a5c;background:#2f3d50;color:#fff}
#top button:hover{background:#3f5068}
#top button.primary{background:#ff9900;color:#111;border-color:#ff9900}
#fileName{opacity:.8;font-size:12px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel{overflow:auto;padding:10px 12px;background:#fff;border-right:1px solid #d7dbe2}
#right{border-right:none;border-left:1px solid #d7dbe2}
.panel h2{font-size:13px;margin:14px 0 6px;text-transform:uppercase;letter-spacing:.5px;color:#5a6577}
.panel h2:first-child{margin-top:2px}
.row{display:flex;align-items:center;gap:6px;margin:5px 0;flex-wrap:wrap}
.row>label.l{width:92px;color:#4a5466}
.hint{color:#6b7587;font-size:11.5px;line-height:1.35}
.box{background:#f6f8fb;border:1px solid #e1e5ec;border-radius:7px;padding:7px 9px;margin:6px 0;line-height:1.5}
.box b{font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.grid2 button{width:100%}
.full{width:100%}
#center{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
#viewbar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#fafbfc;border-bottom:1px solid #d7dbe2;flex-wrap:wrap}
#viewbar .sp{flex:1}
#stage{flex:1;position:relative;overflow:hidden;background:#d9dde3;min-height:0}
#cv{position:absolute;left:0;top:0;touch-action:none}
#gridView{position:absolute;inset:0;overflow:auto;display:none;padding:14px;background:#d9dde3}
#gridView.show{display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start}
#bottom{grid-column:1/4;background:#fff;border-top:1px solid #d7dbe2;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:8px 10px}
.thumb{display:inline-flex;flex-direction:column;align-items:center;margin-right:8px;vertical-align:top;cursor:pointer;position:relative;padding:3px;border-radius:6px;border:2px solid transparent}
.thumb.cur{border-color:#1f6feb;background:#eaf2ff}
.thumb canvas{box-shadow:0 1px 3px rgba(0,0,0,.25);background:#fff}
.thumb .n{font-size:11px;margin-top:3px;color:#333}
.thumb .badge{position:absolute;top:0;right:0;min-width:18px;height:18px;border-radius:9px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;padding:0 4px}
.badge.err{background:#d92d20}
.badge.ok{background:#12b76a}
.badge.warn{background:#f79009}
.thumb.dragover{border-color:#ff9900}
#gridView .thumb{margin:0}
#issues a{color:#1f6feb;cursor:pointer;margin-right:6px;text-decoration:underline;display:inline-block}
#issues a.cur{background:#d0d5dd;border-radius:3px;text-decoration:none;color:#111;padding:0 3px}
.err{color:#b42318}
.okc{color:#067647}
#overlay{position:fixed;inset:0;background:rgba(20,25,35,.55);display:none;align-items:center;justify-content:center;z-index:50}
#overlay.show{display:flex}
#overlay .card{background:#fff;padding:22px 26px;border-radius:10px;min-width:320px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.3)}
#progress{height:8px;background:#eee;border-radius:4px;overflow:hidden;margin-top:12px}
#progress div{height:100%;width:0;background:#ff9900;transition:width .15s}
#drop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#4a5466;font-size:15px;text-align:center;pointer-events:none}
#drop.hide{display:none}
#drop .big{font-size:20px;font-weight:600;color:#1d2330}
#stage.dragging{outline:3px dashed #ff9900;outline-offset:-6px}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:#4a5466}
.legend i{display:inline-block;width:18px;height:0;border-top:2px solid;vertical-align:middle;margin-right:4px}
#toast{position:fixed;bottom:170px;left:50%;transform:translateX(-50%);background:#1d2330;color:#fff;padding:8px 14px;border-radius:6px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:60}
#toast.show{opacity:.95}
.kbd{font-family:ui-monospace,monospace;background:#eef0f3;border:1px solid #d0d5dd;border-radius:3px;padding:0 3px;font-size:11px}
input[type=range]{width:100%}
#top h1 .k{color:#ff9900}
#top .privacy{font-size:11.5px;background:#1b2531;border:1px solid #3d4a5c;border-radius:12px;padding:3px 9px;color:#cfe8d6;white-space:nowrap}
#top a.guide{color:#fff;opacity:.85;font-size:12px;text-decoration:none;padding:5px 4px}
#top a.guide:hover{opacity:1;text-decoration:underline}
#top button.lang{font-weight:700;min-width:38px}
a.bmc{display:inline-flex;align-items:center;gap:4px;background:#ffdd00;color:#111;border:1px solid #e6c700;border-radius:6px;padding:5px 10px;font-weight:600;text-decoration:none;white-space:nowrap;font-size:13px}
a.bmc:hover{background:#ffe633}
a.bmc[hidden],.support-hide a.bmc{display:none}
#doneCard{position:fixed;right:300px;top:70px;z-index:55;background:#fff;border:1px solid #cfd6e0;border-left:5px solid #12b76a;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:14px 16px;max-width:360px;font-size:13px}
#doneCard[hidden]{display:none}
#doneCard p{margin:6px 0;line-height:1.45}
#doneCard .donesup{color:#4a5466;font-size:12px}
#doneCard .donesup a.bmc{margin-top:6px}
#doneCard .x{position:absolute;top:6px;right:6px;border:none;background:none;font-size:18px;line-height:1;padding:2px 6px}
@media (max-width:1100px){#top .privacy{display:none}}
body.site{height:auto}
body.site #app{min-height:640px}
.explain{background:#fff;border-top:1px solid #d7dbe2;font-size:15.5px;line-height:1.6;color:#1d2330}
.explain article{max-width:860px;margin:0 auto;padding:28px 20px 10px}
.explain h2{font-size:22px;line-height:1.3;margin:30px 0 10px;color:#1d2330;text-transform:none;letter-spacing:0}
.explain h2:first-child{margin-top:6px}
.explain .lead{font-size:16.5px}
.explain .note{background:#ecfdf3;border:1px solid #abefc6;border-radius:8px;padding:10px 14px}
.explain ol li{margin:6px 0}
.explain a{color:#1f6feb}
.explain .tables{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.explain table{border-collapse:collapse;min-width:280px;font-size:14.5px}
.explain caption{text-align:left;font-weight:600;padding:4px 0}
.explain th,.explain td{border:1px solid #d7dbe2;padding:6px 12px;text-align:left}
.explain th{background:#f6f8fb}
.explain details{border:1px solid #e1e5ec;border-radius:8px;padding:8px 14px;margin:8px 0}
.explain summary{cursor:pointer;font-weight:600}
.explain details p{margin:8px 0 4px}
.sitefoot{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center;padding:18px 16px 26px;background:#fff;color:#5a6577;font-size:13px;border-top:1px solid #eef0f3}
.sitefoot a{color:#1d2330}
#top{flex-wrap:nowrap;overflow:hidden}
#top > *{flex-shrink:0}
#top button{white-space:nowrap}
#top #fileName{flex-shrink:1;min-width:0}
@media (max-width:1500px){#top .privacy{display:none}}
@media (max-width:1300px){#top a.guide{display:none}}
@media (max-width:1180px){#top a.bmc{display:none}}
#top{gap:6px}
#top button{padding:5px 8px}
#top .privacy{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#top h1{white-space:nowrap}
/* ---- guide pages ---- */
body.doc{height:auto;background:#fff}
.dochead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 20px;background:#232f3e;color:#fff}
.dochead .brand{color:#fff;text-decoration:none;font-weight:700;font-size:18px}
.dochead .brand .k,.sitefoot .k{color:#ff9900}
.dochead nav{display:flex;gap:16px;flex-wrap:wrap;flex:1}
.dochead nav a{color:#fff;opacity:.85;text-decoration:none;font-size:14px}
.dochead nav a:hover,.dochead nav a[aria-current]{opacity:1;text-decoration:underline}
.btn,.dochead .btn{display:inline-block;background:#ff9900;color:#111!important;font-weight:600;border-radius:6px;padding:8px 14px;text-decoration:none!important;font-size:14.5px}
.btn:hover{background:#ffad33}
.explain.docmain{border-top:none}
.explain h1{font-size:30px;line-height:1.25;margin:6px 0 12px}
.crumbs{font-size:13px;color:#5a6577;margin:0 0 6px}
.crumbs a{color:#5a6577}
.explain .cta{margin:22px 0}
.explain .src{font-size:13px;color:#5a6577;border-top:1px solid #eef0f3;padding-top:12px;margin-top:28px}
.explain .scroll{overflow-x:auto;margin:8px 0 18px}
.explain table.wide{min-width:100%}
.explain .mm{color:#6b7587;font-size:12.5px}
.explain ul li{margin:5px 0}
.sitefoot nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%}
.sitefoot nav a{color:#1f6feb}
@media (max-width:640px){.explain h1{font-size:24px}.dochead nav{order:3;width:100%}}

/* ---- app tabs ---- */
.apptabs{display:flex;gap:2px;background:#1b2531;border:1px solid #3d4a5c;border-radius:7px;padding:2px}
.apptabs a{color:#cfd6e0;text-decoration:none;font-size:12.5px;padding:4px 9px;border-radius:5px;white-space:nowrap}
.apptabs a:hover{color:#fff;background:#2c3a4d}
.apptabs a.cur{background:#ff9900;color:#111;font-weight:600}
/* ---------- Cover Creator ---------- */
#app.cover{grid-template-rows:auto 1fr}
#app.cover #stage{overflow:auto;display:flex;padding:20px}
#app.cover #cv{position:static;margin:auto;flex:none;box-shadow:0 2px 10px rgba(0,0,0,.25)}
#legendBar{padding:5px 10px;background:#fafbfc;border-top:1px solid #d7dbe2}
#legendBar[hidden]{display:none}
.calc table{width:100%;border-collapse:collapse;font-size:12px}
.calc th{font-weight:600;color:#5a6577;text-align:right;font-size:11px;padding:1px 3px}
.calc td{padding:1px 3px;text-align:right;font-variant-numeric:tabular-nums}
.calc td:first-child,.calc th:first-child{text-align:left;color:#4a5466}
.calc tr:nth-child(2) td{font-weight:700;color:#1d2330}
.calcm{font-size:11px;color:#6b7587;margin-top:4px;line-height:1.35}
.calcm a{color:#1f6feb}
.presets{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.presets button{font-size:12px;line-height:1.25;padding:6px}
.ck{font-size:12px;line-height:1.35;margin:3px 0;padding:3px 6px;border-radius:5px}
.ck.ok{background:#ecfdf3;color:#067647}
.ck.err{background:#fef3f2;color:#b42318}
.ck.warn{background:#fffaeb;color:#b54708}
.ck.info{background:#eff8ff;color:#175cd3}
#checks{max-height:220px;overflow:auto;padding:4px}
#props textarea{width:100%;font:inherit;padding:5px;border:1px solid #b9c0cc;border-radius:5px;resize:vertical}
#props select{max-width:170px}
#props .grid2,#props .grid3{margin-top:6px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.grid3 button{font-size:11px;padding:4px}
.seg{display:inline-flex}
.seg button{border-radius:0;margin-left:-1px}
.seg button:first-child{border-radius:6px 0 0 6px}
.seg button:last-child{border-radius:0 6px 6px 0}
.seg button.cur{background:#1d2330;color:#fff}
label.sm{font-size:11.5px;color:#4a5466;display:inline-flex;align-items:center;gap:3px}
.tchk{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:#fff;white-space:nowrap}
.warnText{color:#b54708;font-size:11.5px;margin:3px 0}
#layers{display:flex;flex-direction:column;gap:2px}
.layer{display:flex;align-items:center;gap:6px;padding:3px 5px;border:1px solid transparent;border-radius:5px;cursor:pointer;font-size:12px}
.layer:hover{background:#f2f6fc}
.layer.cur{border-color:#1f6feb;background:#eaf2ff}
.layer.off .nm{opacity:.45;text-decoration:line-through}
.layer .eye{padding:0 4px;border:none;background:none;font-size:13px}
.layer .ico{width:16px;text-align:center;font-weight:700;color:#5a6577}
.layer .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app.cover ~ #toast{bottom:40px}
#app.cover [hidden]{display:none!important}
@media (max-width:900px){#app.cover{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;height:auto}#app.cover #top{grid-column:1;flex-wrap:wrap!important;overflow:visible!important;height:auto!important}#app.cover #center{order:1;height:72vh}#app.cover #left{order:2;border-right:none}#app.cover #right{order:3;border-left:none;border-top:1px solid #d7dbe2}#app.cover #top button,#app.cover #top .tchk{font-size:12px}}