:root{font:14px/1.5 "Segoe UI","Microsoft YaHei",sans-serif;color:#243b4c;background:#eef2f4;--accent:#127e74;--edge:#dce4e9;--muted:#657c8b}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button{padding:7px 11px;background:#fff;border:1px solid var(--edge);border-radius:6px;cursor:pointer;white-space:nowrap}button:hover{border-color:#80a79f;background:#f0f8f6}button:disabled{opacity:.45;cursor:default}.primary{color:white;background:var(--accent);border-color:var(--accent)}.primary:hover{background:#0b685f;color:white}input,select,textarea{padding:6px 8px;border:1px solid var(--edge);border-radius:5px;background:white;min-width:0}input[type=number]{width:80px}input[type=range]{accent-color:var(--accent);padding:0}input[type=checkbox]{accent-color:var(--accent)}textarea{width:100%;resize:vertical}header{display:flex;gap:9px;align-items:center;padding:14px 22px;background:#fff;border-bottom:1px solid var(--edge);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:650;min-width:230px}.brand small{display:block;font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.09em}.logo{font-size:32px;line-height:1;color:var(--accent)}#title{width:220px;border-color:transparent;background:#f2f6f7}.spacer{flex:1}nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 22px;background:#f9fbfc;border-bottom:1px solid var(--edge)}nav label{display:flex;align-items:center;gap:6px;font-size:12px}#source{width:100px}.divider{height:22px;border-left:1px solid var(--edge);margin:0 4px}.workspace{display:grid;grid-template-columns:195px minmax(360px,1fr) 330px;max-width:1800px;margin:auto;min-height:780px}.objects-panel,.inspector{background:white;padding:16px;border-right:1px solid var(--edge)}.inspector{border-left:1px solid var(--edge);border-right:0}.panel-title{display:flex;justify-content:space-between;gap:8px;font-weight:650;margin:0 0 12px}.panel-title span{font-size:11px;color:var(--muted);font-weight:400}.mini-tools{display:flex;gap:5px;margin-bottom:10px}.mini-tools button{font-size:11px;padding:5px 7px}#objects{max-height:430px;overflow:auto;margin-bottom:24px}.object{display:flex;align-items:center;width:100%;text-align:left;border:1px solid transparent;background:transparent;gap:7px;margin-bottom:3px;font-size:12px;padding:7px 5px;overflow:hidden}.object span:nth-child(2){overflow:hidden;text-overflow:ellipsis}.object.active{background:#e9f7f2;border-color:#8cc4b8}.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.check{display:block;font-size:12px;margin:10px 0}.hint{font-size:12px;line-height:1.7;color:var(--muted)}main{min-width:0;padding:14px 20px}.canvas-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between;margin-bottom:12px}.segmented{display:flex;gap:3px}.segmented button,.tabs button{border:0;background:transparent}.segmented .active,.tabs .active{background:#dcf0e9;color:#096c61}.canvas-toolbar select{font-size:12px}.canvas-space{padding:12px;display:flex;justify-content:center;background:radial-gradient(#dae3e7 1px,transparent 1px);background-size:16px 16px;border-radius:9px}#phone{width:min(100%,340px);aspect-ratio:750/1334;background:#fff9ed;border:1px solid #ddd6c8;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 10px 25px #203a4514}#board{width:100%;height:100%;display:block;touch-action:none;user-select:none}.phone-head,.phone-foot{position:absolute;left:7%;right:7%;display:flex;justify-content:space-between;pointer-events:none;font-size:12px;color:#7d847d}.phone-head{top:4%}.phone-head b{font-size:17px;color:#4b665c}.phone-foot{bottom:4%;font-size:11px}.canvas-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:12px 0}.canvas-bottom label{display:flex;gap:8px;align-items:center}.canvas-bottom input{width:100px}.validation{padding:14px;background:white;border:1px solid var(--edge);border-radius:8px}.validation-heading{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.validation-heading button{font-size:11px;padding:5px 8px}#validation-state{font-size:13px;font-weight:600;color:#80581e}#validation-state.solved{color:#157c54}#validation-state.invalid{color:#ba4848}#progress{margin-top:7px}#metrics{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;font-size:12px}.issue{font-size:12px;padding:6px 0;border-top:1px solid #eff2f5;color:#8b6b3f}.issue.error{color:#b23e3e}#issues{max-height:140px;overflow:auto;margin-top:10px}#palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:18px}.preset{font-size:10px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.preset svg{width:46px;height:30px;pointer-events:none}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--edge);padding-bottom:9px;margin-bottom:16px}.tabs button{flex:1;font-size:12px;padding:6px 7px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:9px 0}.row label{font-size:12px;display:flex;align-items:center;gap:5px}.field{display:block;margin:14px 0}.field>span{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:6px}.field input[type=range]{width:100%}.field input[type=number]{width:95px}.chip{color:#187264;background:#e7f4ee;border-radius:4px;padding:3px 7px;font-size:11px}.wide{width:100%;margin:5px 0}.list-card{padding:10px;background:#f5f8fa;border:1px solid #e8eef2;border-radius:6px;margin:8px 0;font-size:12px;overflow-wrap:anywhere}.list-card button{padding:3px 7px;font-size:11px}.list-card select{max-width:100%;font-size:12px}h3{font-size:13px;margin:20px 0 9px}h3:first-child{margin-top:0}.empty{padding:30px 10px;text-align:center;color:var(--muted);font-size:12px}footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:10px 22px;border-top:1px solid var(--edge);background:white;font-size:12px;color:var(--muted)}dialog{border:1px solid var(--edge);border-radius:12px;max-width:550px;width:90%;padding:25px;box-shadow:0 20px 70px #0003}dialog::backdrop{background:#14282c66}dialog h2{font-size:19px}dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.8 inherit;background:#f3f7f6;padding:15px}.actions{display:flex;justify-content:flex-end;gap:10px}.path-table input{width:70px}.path-table{width:100%;border-spacing:3px;font-size:12px}.path-table button{padding:3px 7px}.disabled-note{font-size:11px;color:var(--muted)}[hidden]{display:none!important}@media(min-width:1500px){#phone{width:370px}.workspace{grid-template-columns:220px minmax(360px,1fr) 350px}}@media(max-width:1050px){.workspace{grid-template-columns:minmax(320px,1fr) 305px}.objects-panel{display:none}main{padding:12px}}@media(max-width:680px){header{padding:12px}.brand{min-width:190px}.workspace{display:block}.inspector{border-top:1px solid var(--edge)}nav{padding:10px}#phone{max-width:310px}.canvas-toolbar button{font-size:12px}#title{width:100%}footer{padding:12px}#palette{grid-template-columns:repeat(4,1fr)}.preset{font-size:12px}}

.layout-status{display:flex;align-items:center;gap:8px;flex-basis:100%;font-size:11px;color:var(--muted)}.layout-status button{font-size:11px;padding:3px 8px}#pan-mode.active{background:#cdebe2;border-color:#168878}#board:focus{outline:none}#accessory-palette{display:flex;gap:6px;margin-bottom:15px}#accessory-palette button{flex:1;font-size:12px}#placement-info{font-size:11px;padding:9px;background:#f4f8f7;border-radius:5px;margin-bottom:14px;overflow-wrap:anywhere}.placement{border-left:3px solid #ca901b;margin-top:6px;padding-left:7px;color:#916a20}.placement.valid{color:#168656;border-color:#168656}.placement.invalid{color:#bc3433;border-color:#bc3433}#zoom-value{min-width:44px;text-align:right}.canvas-bottom button{padding:2px 7px}
/* 桌面编辑区占满剩余窗口，属性滚动不带动画布。 */
@media(min-width:681px){
  body{height:100vh;height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}
  .workspace{width:100%;max-width:none;min-height:0;margin:0 auto;grid-template-columns:280px minmax(0,1fr) 330px}
  .objects-panel,.inspector{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable}
  main{min-height:0;display:flex;flex-direction:column;overflow:auto}
  .canvas-toolbar,.canvas-bottom{flex-shrink:0}
  .canvas-space{flex:1;min-height:220px;align-items:center;container-type:size}
  #phone{width:min(100cqw,calc(100cqh * var(--preview-ratio,0.56221889)));height:auto;max-width:100%;max-height:100%;flex-shrink:0}
  .objects-panel{display:block}
  #objects{max-height:24vh;margin-bottom:8px}
  main{padding:10px 14px}
}
.device-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.device-controls button{font-size:12px}
.selection-info{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin:8px 0 14px}
.objects-panel .validation{padding:12px 0;border:0;border-top:1px solid var(--edge);border-radius:0}
.objects-panel .validation-heading .spacer{display:none}
.objects-panel #validation-state{flex-basis:100%;margin-bottom:4px}
.objects-panel #metrics{display:grid;gap:5px}
.objects-panel #issues{max-height:none;overflow:visible}
.view-help{border-top:1px solid var(--edge);padding-top:12px;margin-top:12px}
.view-help summary{font-weight:650;cursor:pointer}
.canvas-bottom{justify-content:flex-end;margin:8px 0 0}
#device-error{color:#b23e3e;font-size:12px}
@media(min-width:681px) and (max-width:1100px){.workspace{grid-template-columns:220px minmax(0,1fr) 280px}.objects-panel,.inspector{padding:12px}}
@media(max-width:680px){.workspace{display:flex;flex-direction:column}main{order:0}.objects-panel{display:block;order:1}.inspector{order:2}}

.module-entry{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--edge);padding-bottom:12px;margin-bottom:16px}.module-entry button,.group-tools button{font-size:12px;padding:6px 8px}.group-tools{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}#module-banner{background:#e5f3ee;padding:8px 12px;margin-bottom:8px;color:#156d60;font-size:12px;flex-shrink:0}#module-library{width:min(1040px,94vw);max-width:1040px;max-height:88dvh;overflow:auto}.module-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.module-library-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}#module-search{flex:1;min-width:160px}#module-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.module-card{border:1px solid var(--edge);border-radius:9px;padding:12px;min-width:0}.module-card svg,#module-save-preview svg{width:100%;height:160px;background:#fff9ed;border-radius:7px}.module-card h3{margin:10px 0 5px;overflow-wrap:anywhere}.module-description{height:42px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 8px}.module-card-stats{font-size:11px;color:var(--muted)}#module-save-error,#module-library-error{color:#b23e3e;font-size:12px;overflow-wrap:anywhere}.module-editing #new,.module-editing #levels,.module-editing #load,.module-editing #next-level,.module-editing #drafts,.module-editing #load-draft,.module-editing #publish,.module-editing nav label:has(#slot),.module-editing nav label:has(#source){display:none}.module-editing #title{border-color:#8cc4b8}

#module-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}#module-banner span{flex:1;min-width:160px}#module-import-open{font-size:12px;flex-shrink:0}#module-import-preview svg{width:100%;height:220px;background:#fff9ed;border-radius:7px}#module-import-error{color:#b23e3e;font-size:12px}
.module-editing #publish-top,.module-editing #library-check{display:none}
#level-import-preview svg{width:100%;height:180px;background:#fff9ed;border-radius:7px}
#level-import-error,#publish-error,#library-check-issues{color:#b23e3e;white-space:pre-wrap;overflow-wrap:anywhere}
#publish-validation{white-space:pre-wrap;color:#156d60;font-size:13px}
#library-check-dialog{max-height:85dvh;overflow:auto;width:min(750px,94vw)}
#publish-dialog .actions{flex-wrap:wrap}
#publish-dialog,#level-import-dialog{max-height:85dvh;overflow:auto}