:root{--bg:#f8eee6;--panel:#fffdf9;--line:rgba(33,7,46,.22);--text:#21072e;--muted:#8d7a94;--accent:#21072e;--soft:#f3e7da;--blue:#9c43c8;--danger:#c53d4d;--shadow:0 20px 55px rgba(33,7,46,.10);--ink:#21072e;--cream:#f8eee6;--white:#fffdf9;--lilac:#d88af5;--yellow:#f4ef51;--green:#8acb76;--peach:#f2b49e;--hard:6px 6px 0 rgba(33,7,46,.85)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif;color:var(--text);background:var(--bg);overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer}.topbar{height:70px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);display:grid;grid-template-columns:260px minmax(180px,1fr) minmax(470px,auto);align-items:center;padding:0 16px;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:11px}.brand-logo{width:35px;height:35px;border-radius:10px;background:#101310;color:#fff;display:grid;place-items:center;font-family:Arial,Helvetica,sans-serif;font-size:17px;font-weight:700;font-style:normal;line-height:35px;text-align:center;letter-spacing:0;transform:none;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}.brand-copy{display:flex;flex-direction:column;line-height:1.1}.brand-copy strong{font-size:15px;letter-spacing:-.2px}.brand-copy span{font-size:10px;color:#8b8e8b;margin-top:4px}.breadcrumb{justify-self:center;display:flex;align-items:center;gap:13px;font-size:13px}.breadcrumb b{font-weight:400;color:#b7bab7}.breadcrumb span{color:#3e423f}.breadcrumb strong{font-weight:650}.top-actions{display:flex;justify-content:flex-end;gap:6px;min-width:0}.top-btn{height:42px;padding:0 11px;min-width:0;white-space:nowrap;justify-content:center;border:1px solid #dfe1de;border-radius:10px;background:#fff;color:#252925;display:flex;align-items:center;gap:8px;font-size:12px}.top-btn:hover{background:#f7f8f6}.top-btn.publish{background:#101411;color:#fff;border-color:#101411}.btn-icon{font-size:13px;opacity:.82;flex:none}.app-shell{height:calc(100vh - 70px);display:grid;grid-template-columns:var(--left-w,220px) 7px minmax(0,1fr) 7px var(--right-w,320px);min-width:0}.sidebar{background:rgba(255,255,255,.92);min-height:0}.left-sidebar{border-right:1px solid var(--line);padding:22px 16px 14px;display:flex;flex-direction:column}.side-heading{font-size:13px;color:#4e534f;margin:0 2px 12px}.project-card{border:1px solid #e4e6e3;background:#fafafa;border-radius:10px;padding:11px 10px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 7px rgba(0,0,0,.02)}.project-avatar{width:34px;height:34px;border-radius:9px;background:#eef0ed;display:grid;place-items:center;color:#9ca19c;font-size:17px}.project-copy{min-width:0;display:flex;flex-direction:column}.project-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-copy span{font-size:10px;color:#979b97;margin-top:4px}.project-switch-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.project-switch-btn{height:32px;border:1.5px solid var(--ink);background:var(--white);border-radius:10px;color:var(--ink-70);font-size:10px;font-weight:600;transition:transform .12s,background .15s}.project-switch-btn:hover{background:#f5f6f4}.project-switch-btn.primary{background:var(--yellow);color:var(--ink)}.workspace-project-list{display:flex;flex-direction:column;gap:5px;margin-top:10px;max-height:232px;overflow-y:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:rgba(33,7,46,.25) transparent}.workspace-project{width:100%;border:1.5px solid transparent;background:transparent;border-radius:11px;display:grid;grid-template-columns:26px minmax(0,1fr) 12px;gap:8px;align-items:center;padding:8px 8px;text-align:left;color:var(--ink-70);transition:border-color .15s,background .15s}.workspace-project:hover{background:#f5f6f4}.workspace-project.active{background:var(--yellow);border-color:var(--ink);color:var(--ink);box-shadow:2px 2px 0 rgba(33,7,46,.55)}.workspace-project-icon{width:26px;height:26px;border-radius:8px;background:var(--white);border:1.5px solid var(--ink);display:grid;place-items:center;font-size:11px}.workspace-project-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.workspace-project-copy strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-project-copy small{font-size:8px;color:#979c97}.workspace-project-dot{font-size:7px;color:#303630;text-align:center}.page-heading{margin-top:31px}.style-heading{margin-top:28px}.page-list,.style-list{display:flex;flex-direction:column;gap:3px}.side-link{height:36px;border:1.5px solid var(--ink);background:var(--cream);border-radius:10px;text-align:left;padding:0 10px;color:var(--ink-70);display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;transition:border-color .15s,background .15s,transform .12s,box-shadow .12s;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.22)}.side-link:hover{transform:translate(-1px,-1px);box-shadow:2.5px 2.5px 0 rgba(33,7,46,.22);background:#fff7e6}.page-link{height:36px;border:1.5px solid transparent;background:transparent;border-radius:10px;text-align:left;padding:0 10px;color:var(--ink-70);display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;transition:border-color .15s,background .15s}.side-link:hover,.page-link:hover{background:#f2f3f1}.page-link.active{background:var(--yellow);border-color:var(--ink);color:var(--ink);font-weight:700;box-shadow:2px 2px 0 rgba(33,7,46,.5)}.page-link{height:76px;padding:6px 7px;gap:8px;align-items:center;border:1.5px solid transparent;border-radius:12px;transition:border-color .15s,background .15s}.page-thumb{width:49px;height:60px;flex:none;border:1px solid #dde1dd;border-radius:6px;background:#f4f5f3;overflow:hidden;padding:3px;display:block}.page-thumb-canvas{height:100%;width:100%;border-radius:4px;background:#fff;overflow:hidden;padding:2px;display:flex;flex-direction:column;gap:2px}.page-thumb-hero{height:21px;border-radius:3px;background:linear-gradient(145deg,#58655f,#202a25);color:#fff;padding:4px 3px;overflow:hidden}.page-thumb-hero b{font-size:4px;line-height:1.1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-thumb-text{height:11px;padding:1px 2px}.page-thumb-text b{display:block;font-size:4px;line-height:1.2}.page-thumb-text span{display:block;height:2px;background:#e7eae6;margin-top:1px;border-radius:2px}.page-thumb-cards{display:grid;grid-template-columns:1fr 1fr;gap:2px;height:15px}.page-thumb-cards i{background:#edf0ed;border-radius:2px}.page-thumb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;height:10px}.page-thumb-stats i{background:#e8ebe8;border-radius:2px}.page-thumb-image{height:17px;border-radius:2px;background:linear-gradient(145deg,#cfd6cf,#8f9b91)}.page-thumb-button{height:10px;border-radius:3px;background:#303731}.page-thumb-divider{height:2px;background:#e2e5e2;margin:4px 0}.page-thumb-empty{font-size:4px;color:#9ba19c;text-align:center;margin:auto}.page-page-copy{min-width:0;display:flex;flex-direction:column;gap:4px;flex:1}.page-link .page-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;font-size:11px}.page-page-copy small{font-size:8px;color:#9a9f9a}.page-link .page-delete{opacity:0;border:0;background:transparent;color:#9b9f9b;font-size:13px;padding:0 2px}.page-link:hover .page-delete{opacity:1}.add-page{margin-top:6px;border:1px dashed #d8dbd7;background:transparent;color:#777c77;height:32px;border-radius:8px;font-size:11px}.add-page:hover{background:#f6f7f5}.side-link>span:first-child{flex:none;width:20px;text-align:center;color:#7c5a92;font-size:14px;line-height:1}.sidebar-bottom{margin-top:auto}.tip-card{border:1px solid #e8e9e7;background:#fbfbfa;border-radius:9px;padding:11px 10px}.tip-title{display:flex;align-items:center;gap:8px;font-size:11px}.tip-title span{font-size:15px}.tip-card p{margin:7px 0 0 23px;font-size:10px;line-height:1.65;color:#858985}.side-footer{font-size:9px;color:#929691;line-height:1.7;margin-top:20px}.workspace{min-width:0;min-height:0;background:linear-gradient(180deg,#fafaf9 0%,#f6f6f4 100%);position:relative;overflow:auto}.canvas{min-height:100%;display:flex;align-items:center;justify-content:center;padding:44px 38px}.phone-stage{position:relative;display:flex;align-items:center;justify-content:center;transform:scale(var(--preview-scale,1));transform-origin:center center;will-change:transform}.phone-shadow{position:absolute;width:330px;height:45px;bottom:-18px;background:rgba(32,38,34,.13);filter:blur(24px);border-radius:50%}.phone{width:330px;height:700px;border-radius:52px;padding:8px;background:linear-gradient(145deg,#fdfdfd 0%,#b9bec0 16%,#f8f9f9 34%,#aeb3b5 68%,#f4f5f5 100%);box-shadow:0 25px 70px rgba(32,38,34,.16),inset 0 0 0 1px rgba(255,255,255,.8),inset 0 0 0 2px rgba(72,77,78,.17);position:relative}.phone-screen{position:absolute;inset:8px;border-radius:45px;overflow:hidden;background:#080909;box-shadow:inset 0 0 0 1px rgba(0,0,0,.7)}.phone iframe{width:100%;height:100%;border:0;background:#fff;display:block}.dynamic-island{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:99px;height:29px;border-radius:999px;background:#050505;z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,.02)}.camera-dot{position:absolute;top:27px;left:calc(50% + 29px);width:5px;height:5px;border-radius:50%;background:#15243a;box-shadow:0 0 5px #273b57;z-index:4}.volume,.power{position:absolute;background:#aeb2b3;box-shadow:inset 1px 0 rgba(255,255,255,.45),inset -1px 0 rgba(60,65,67,.25)}.volume{left:-3px;width:4px;height:54px;border-radius:4px}.volume-a{top:148px}.volume-b{top:213px}.power{right:-3px;top:184px;width:4px;height:78px;border-radius:4px}.inspector{border-left:1px solid var(--line);overflow:auto}.inspector-tabs{height:57px;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;padding:0 14px;gap:24px;background:#fff;position:sticky;top:0;z-index:2}.inspector-tab{height:44px;border:0;background:transparent;color:#777c77;font-size:12px;padding:0 0;position:relative}.inspector-tab.active{color:#171a17;font-weight:700}.inspector-tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:#181b18}.panel-section{padding:21px 16px;border-bottom:1.5px solid var(--line)}.panel-title{font-size:13px;font-weight:700;margin-bottom:17px}.field{margin-bottom:15px}.field:last-child{margin-bottom:0}.field label{display:block;font-size:10px;color:#747974;margin-bottom:7px}.input,.select,.textarea{width:100%;border:1px solid #dfe2df;background:#fff;border-radius:8px;outline:none;color:#272b27;font-size:11px;padding:0 10px}.input,.select{height:36px}.textarea{min-height:72px;resize:vertical;padding-top:9px;line-height:1.5}.input:focus,.select:focus,.textarea:focus{border-color:#b5bbb6;box-shadow:0 0 0 3px rgba(0,0,0,.035)}.color-row{display:grid;grid-template-columns:38px 1fr;gap:8px}.color-swatch{width:38px;height:36px;border:1px solid #dfe2df;border-radius:8px;padding:4px;background:#fff}.color-swatch input{width:100%;height:100%;padding:0;border:0;background:transparent}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn{height:36px;border:1.5px solid var(--ink);background:var(--white);border-radius:10px;font-size:11px;color:var(--ink);font-weight:600;box-shadow:2px 2px 0 rgba(33,7,46,.28);transition:transform .12s,background .15s,box-shadow .12s}.btn:hover{background:var(--soft);transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(33,7,46,.28)}.btn:active{transform:translate(1px,1px);box-shadow:0 0 0 rgba(33,7,46,.28)}.btn.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}.btn.dark:hover{background:var(--lilac);color:var(--ink)}.btn.danger{color:#bd4343}.btn.small{height:31px;font-size:10px}.btn-row{display:flex;gap:7px}.section-list{display:flex;flex-direction:column;gap:8px}.section-card{border:1px solid #e0e3df;border-radius:9px;background:#fff;padding:10px}.section-card-head{display:flex;align-items:center;gap:8px}.section-card-head strong{font-size:11px;flex:1}.section-card-head button{border:0;background:transparent;color:#858a85;padding:3px;font-size:12px}.section-card-meta{font-size:9px;color:#929792;margin-top:6px;line-height:1.5}.card-editor{border-top:1px solid #eeeeec;margin-top:9px;padding-top:9px}.item-list{display:flex;flex-direction:column;gap:7px}.item-row{border:1px solid #e5e7e4;border-radius:8px;padding:8px;background:#fafafa}.item-row-head{display:flex;gap:7px;align-items:center}.item-row-head input{flex:1}.mini-input{height:31px;padding:0 8px;border:1px solid #dfe2df;border-radius:7px;background:#fff;font-size:10px;min-width:0}.mini-delete{border:0;background:transparent;color:#b65a5a;font-size:12px}.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.component-btn{min-height:54px;border:1px solid #e1e4e0;border-radius:9px;background:#fff;text-align:left;padding:9px}.component-btn strong{display:block;font-size:10px}.component-btn span{display:block;color:#8a8f8a;font-size:9px;margin-top:4px}.component-btn:hover{background:#f7f8f6}.range{width:100%}.toggle{display:flex;align-items:center;justify-content:space-between}.toggle input{display:none}.toggle-ui{width:38px;height:22px;border-radius:999px;background:#d7d9d7;padding:3px}.toggle-ui:before{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s}.toggle input:checked+.toggle-ui{background:#202521}.toggle input:checked+.toggle-ui:before{transform:translateX(16px)}.empty{padding:30px 8px;text-align:center;color:#969b96;font-size:11px}.modal-backdrop{position:fixed;inset:0;background:rgba(15,18,16,.24);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1600}.modal-backdrop.open{display:flex}.modal{width:420px;background:#fff;border:1px solid #e3e5e2;border-radius:15px;box-shadow:0 30px 90px rgba(0,0,0,.18);padding:20px}.modal h3{font-size:15px;margin:0 0 5px}.modal p{font-size:11px;color:#7d827d;line-height:1.6;margin:0 0 17px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,10px);background:#171a18;color:#fff;border-radius:9px;padding:9px 14px;font-size:11px;opacity:0;pointer-events:none;transition:.2s;z-index:40}.toast.show{opacity:1;transform:translate(-50%,0)}.publish-url{padding:11px;background:#f4f5f3;border-radius:8px;font-size:11px;word-break:break-all}.swatch-line{display:flex;gap:6px;flex-wrap:wrap}.swatch-choice{width:27px;height:27px;border-radius:7px;border:1px solid #ddd;cursor:pointer}.preview-modal .modal{width:min(720px,90vw)}.preview-large{height:560px;border-radius:30px;overflow:hidden;border:8px solid #b8bcbd;background:#111}.preview-large iframe{width:100%;height:100%;border:0}@media(max-width:1180px){.app-shell{grid-template-columns:var(--left-w,205px) 7px minmax(0,1fr) 7px var(--right-w,300px)}.topbar{grid-template-columns:250px 1fr 310px}}@media(max-width:1050px){body{overflow:auto}.app-shell{min-width:0}.canvas{padding:30px 20px}.phone{transform:scale(.9);transform-origin:center}.topbar{min-width:1000px}}
.workspace-project{position:relative}
.workspace-project .ws-del{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;width:18px;height:18px;line-height:16px;text-align:center;border-radius:50%;background:var(--danger,#ff7a8a);color:#fff;font-size:12px;cursor:pointer;z-index:3}
.workspace-project:hover .ws-del{display:block}
.workspace-project .ws-del:hover{background:#ff5570}

.hint{font-size:10px;line-height:1.65;color:#8b908b;margin:0 0 13px}.toggle+.toggle{margin-top:12px}.field .hint{margin-top:6px;margin-bottom:0}.swatch-choice:focus{outline:2px solid #c9cec9;outline-offset:2px}

/* V2.2 entry experience */
.entry-experience{position:fixed;inset:0;z-index:1000;background:#f6f7f5;color:#171b18;display:none;overflow:auto}
.entry-experience.active{display:block}
.entry-shell{min-height:100%;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.entry-panel{width:min(1120px,100%);min-height:650px;background:#fff;border:1px solid #e2e6e1;border-radius:30px;box-shadow:0 28px 80px rgba(28,35,30,.10);display:flex;flex-direction:column;overflow:hidden}
.entry-top{display:flex;align-items:center;justify-content:space-between;padding:24px 30px;border-bottom:1px solid #ecefeb}
.entry-brand{display:flex;align-items:center;gap:12px}.entry-brand-mark{width:36px;height:36px;border-radius:11px;background:#18201b;color:#fff;display:grid;place-items:center;font-family:Arial,Helvetica,sans-serif;font-size:17px;font-weight:700;font-style:normal;line-height:35px;text-align:center;letter-spacing:0;transform:none;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}.entry-brand strong{font-size:18px}.entry-brand span{display:block;color:#8a918b;font-size:11px;margin-top:2px}
.entry-progress{display:flex;gap:7px}.entry-progress i{display:block;width:28px;height:4px;border-radius:999px;background:#e2e6e1}.entry-progress i.active{background:#18201b}
.entry-content{flex:1;padding:48px 56px;display:flex;flex-direction:column;justify-content:center}.entry-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7b827c;font-weight:700}.entry-content h1{font-size:42px;line-height:1.08;letter-spacing:-.04em;margin:12px 0 12px}.entry-content>p{max-width:650px;color:#6f776f;line-height:1.8;margin:0}.entry-actions{display:flex;gap:12px;margin-top:30px}.entry-btn{border:1px solid #d9ded9;background:#fff;color:#1b211d;border-radius:13px;padding:13px 18px;font-weight:700;cursor:pointer}.entry-btn.primary{background:#18201b;color:#fff;border-color:#18201b}.entry-btn:hover{transform:translateY(-1px)}
.entry-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}.entry-card{border:1px solid #dfe4df;border-radius:22px;padding:26px;background:#fbfcfa;text-align:left;cursor:pointer;transition:.18s ease}.entry-card:hover,.template-card:hover{border-color:#aeb8af;transform:translateY(-2px);box-shadow:0 14px 32px rgba(25,32,27,.08)}.entry-card .entry-icon{width:42px;height:42px;border-radius:13px;background:#edf0ec;display:grid;place-items:center;font-size:18px;margin-bottom:22px}.entry-card h2{font-size:20px;margin:0 0 8px}.entry-card p{color:#737b74;line-height:1.7;font-size:13px;margin:0}.entry-card small{display:block;margin-top:18px;color:#9aa19b;font-size:11px}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}.guide-item{border:1px solid #e1e5e0;border-radius:18px;padding:20px;background:#fbfcfa}.guide-num{font-size:11px;font-weight:800;color:#8a918b}.guide-item h3{font-size:15px;margin:12px 0 7px}.guide-item p{font-size:12px;line-height:1.7;color:#747c75;margin:0}
.template-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;margin-top:32px;min-height:380px}.template-cats{display:flex;flex-direction:column;gap:6px}.template-cat{border:0;background:transparent;text-align:left;padding:12px 14px;border-radius:12px;cursor:pointer;color:#687069}.template-cat.active{background:#eef1ed;color:#18201b;font-weight:750}.template-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.template-card{border:1px solid #e0e5df;border-radius:18px;padding:18px;background:#fff;cursor:pointer;transition:.18s ease}.template-preview{height:130px;border-radius:13px;margin-bottom:16px;padding:15px;position:relative;overflow:hidden}.template-preview .tp-bar{height:7px;width:44%;border-radius:99px;background:rgba(255,255,255,.75)}.template-preview .tp-title{position:absolute;left:15px;bottom:18px;font-size:18px;font-weight:800;color:#fff;line-height:1.1;max-width:75%}.template-card h3{font-size:15px;margin:0 0 5px}.template-card p{font-size:12px;line-height:1.6;color:#777f78;margin:0}.template-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px}.template-tags span{font-size:10px;padding:4px 7px;border-radius:999px;background:#f0f2ef;color:#737b74}
.entry-footer{display:flex;justify-content:space-between;align-items:center;padding:18px 30px;border-top:1px solid #ecefeb;color:#8a918b;font-size:11px}.entry-footer button{border:0;background:transparent;color:#6e766f;cursor:pointer}
@media(max-width:800px){.entry-content{padding:34px 24px}.entry-content h1{font-size:32px}.entry-cards,.guide-grid,.template-results{grid-template-columns:1fr}.template-layout{grid-template-columns:1fr}.template-cats{display:grid;grid-template-columns:repeat(2,1fr)}.entry-panel{min-height:calc(100vh - 32px);border-radius:22px}.entry-shell{padding:16px}.entry-top{padding:18px 20px}}

/* V2.2.3 — switchable starting point */
.origin-btn{min-width:96px}
.template-bottom-actions{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid #e7ebe7;color:#7b837c;font-size:12px}
.entry-btn.secondary{background:#fff;color:#1b211d;border:1px solid #dfe4df}
.entry-btn.secondary:hover{background:#f5f7f5;border-color:#cfd6cf}
@media (max-width:760px){
  .template-bottom-actions{flex-wrap:wrap}
  .origin-btn{min-width:0}
}

.template-studio .ts-modal{width:min(980px,94vw);max-height:88vh;overflow:hidden;padding:0}.ts-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:20px 22px;border-bottom:1px solid #e8ebe7}.ts-head h3{margin:0 0 5px}.ts-head p{margin:0;color:#7d847e;font-size:11px;line-height:1.6}.ts-layout{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0;max-height:calc(88vh - 82px)}.ts-template-list{padding:16px;border-right:1px solid #ecefeb;overflow:auto;background:#fafbf9}.ts-category{margin-bottom:15px}.ts-category-title{font-size:9px;color:#9aa09b;text-transform:uppercase;letter-spacing:.08em;margin:0 8px 6px}.ts-template{display:block;width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:8px;font-size:11px;color:#606861}.ts-template:hover{background:#f1f3f0}.ts-template.active{background:#e7ebe7;color:#172019;font-weight:700}.ts-body{padding:20px 22px;overflow:auto}.ts-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ts-theme,.ts-plan{margin-top:18px;border-top:1px solid #ecefeb;padding-top:17px}.ts-plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.ts-plan-head p{margin:0;color:#858c86;font-size:10px}.ts-section-row{border:1px solid #e2e6e2;border-radius:10px;background:#fbfcfa;padding:10px;margin-bottom:8px}.ts-section-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}.ts-section-top strong{font-size:10px;flex:1}.ts-row-actions{display:flex;gap:4px}.ts-section-row .textarea{margin-top:7px;min-height:58px}.ts-note{margin-top:14px;padding:10px 12px;border:1px solid #e6e9e5;background:#f7f9f6;border-radius:9px;color:#747c75;font-size:10px;line-height:1.6}.ts-note b{color:#333a34}.template-bottom-actions .entry-btn{min-width:96px}.template-bottom-actions span{flex:1}@media(max-width:800px){.ts-layout{grid-template-columns:1fr}.ts-template-list{border-right:0;border-bottom:1px solid #ecefeb;max-height:170px}.ts-grid{grid-template-columns:1fr}.ts-head{padding:16px}.ts-body{padding:16px}}

/* DemoCraft V2.5 — project flow, preview devices, assets */
.canvas{position:relative;flex-direction:column;gap:18px;justify-content:center}
.canvas-toolbar{width:min(760px,100%);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;background:rgba(255,255,255,.82);border:1px solid #e4e6e3;border-radius:13px;box-shadow:0 6px 18px rgba(20,25,22,.035);backdrop-filter:blur(10px)}
.canvas-context{display:flex;align-items:center;gap:9px;min-width:0}.canvas-context strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canvas-context span{font-size:9px;color:#858b86;background:#f0f2ef;border-radius:999px;padding:4px 7px;white-space:nowrap}
.device-switch{display:flex;gap:3px;background:#f0f2ef;padding:3px;border-radius:8px}.device-btn{height:28px;border:0;background:transparent;border-radius:6px;padding:0 9px;color:#747a75;font-size:10px}.device-btn.active{background:#fff;color:#171b18;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.preview-zoom-controls{display:flex;align-items:center;gap:2px;background:#f0f2ef;padding:3px;border-radius:8px}.zoom-btn,.zoom-value{height:27px;border:0;background:transparent;color:#656c66;border-radius:6px;font-size:11px}.zoom-btn{width:27px;font-size:15px}.zoom-value{min-width:48px;padding:0 7px;font-size:10px}.zoom-btn:hover,.zoom-value:hover{background:#fff;color:#202520}.canvas-preview-btn{height:32px;border:1px solid #dfe2df;background:#fff;border-radius:8px;padding:0 11px;font-size:10px;color:#303530}.canvas-preview-btn:hover{background:#f7f8f6}
.phone-stage[data-device="tablet"] .phone{width:430px;height:620px;border-radius:38px}.phone-stage[data-device="tablet"] .phone-screen{border-radius:31px}.phone-stage[data-device="tablet"] .dynamic-island,.phone-stage[data-device="tablet"] .camera-dot,.phone-stage[data-device="tablet"] .volume,.phone-stage[data-device="tablet"] .power{display:none}.phone-stage[data-device="desktop"] .phone{width:680px;height:430px;border-radius:22px;padding:7px}.phone-stage[data-device="desktop"] .phone-screen{border-radius:16px}.phone-stage[data-device="desktop"] .dynamic-island,.phone-stage[data-device="desktop"] .camera-dot,.phone-stage[data-device="desktop"] .volume,.phone-stage[data-device="desktop"] .power{display:none}.phone-stage[data-device="desktop"] .phone-shadow{width:650px}
.image-panel{border-radius:13px;overflow:hidden;background:#eef1ed;border:1px solid rgba(0,0,0,.06)}.image-panel img{display:block;width:100%;max-height:280px;object-fit:cover}.image-placeholder{height:140px;border:1px dashed #d5dad5;border-radius:13px;background:#f4f6f3;display:grid;place-items:center;color:#969d96;font-size:10px}.image-caption{font-size:9px;color:#7d847e;line-height:1.6;margin:7px 2px 0}.divider{height:1px;background:#dfe3df;margin:8px 2px}.asset-upload{height:78px;border:1px dashed #cfd5cf;border-radius:12px;background:#fafbf9;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#656d66;font-size:11px;margin-bottom:13px}.asset-upload:hover{background:#f4f6f3;border-color:#b7c0b8}.asset-upload input{display:none}.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.asset-card{border:1px solid #e2e5e1;border-radius:10px;background:#fff;padding:7px;min-width:0}.asset-thumb{height:78px;border-radius:7px;background:#f0f2ef;overflow:hidden}.asset-thumb img{width:100%;height:100%;object-fit:cover;display:block}.asset-name{font-size:9px;color:#5f665f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:7px 2px 6px}.asset-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}.asset-actions .btn{height:28px;padding:0 4px;font-size:9px}.asset-empty{text-align:center;border:1px dashed #dfe3df;border-radius:10px;padding:24px 10px;color:#8b918c;font-size:10px;grid-column:1/-1;line-height:1.7}.asset-empty span{color:#a0a59f}.asset-pick-row{display:flex;gap:6px;flex-wrap:wrap}.asset-pick{width:48px;height:48px;padding:0;border:1px solid #dfe3df;border-radius:8px;overflow:hidden;background:#f2f4f1}.asset-pick img{width:100%;height:100%;object-fit:cover}.asset-pick:hover{border-color:#aeb7b0;transform:translateY(-1px)}
.modal-eyebrow{font-size:9px;letter-spacing:.12em;color:#89908a;font-weight:800;margin-bottom:6px}.tp-modal{width:min(820px,94vw);padding:0;overflow:hidden}.tp-modal-head,.pw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 22px;border-bottom:1px solid #ecefeb}.tp-modal-head h3,.pw-head h3{font-size:18px;margin:0 0 5px}.tp-modal-head p,.pw-head p{font-size:11px;color:#7c837d;line-height:1.6;margin:0;max-width:560px}.tp-modal-body{display:grid;grid-template-columns:310px 1fr;gap:28px;padding:24px;background:#fafbf9}.tp-device{height:470px;border:7px solid #b9bdbe;border-radius:36px;padding:25px 15px 15px;box-shadow:0 16px 40px rgba(25,30,27,.14);overflow:hidden;position:relative}.tp-device-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:86px;height:23px;background:#050505;border-radius:999px}.tp-device-brand{text-align:center;font-size:9px;font-weight:800;margin-bottom:15px}.tp-mini-block{border-radius:13px;margin-bottom:8px;padding:12px;background:#fff;border:1px solid rgba(0,0,0,.07);min-height:43px;color:#5e665f;font-size:8px;line-height:1.45;overflow:hidden}.tp-mini-block span{display:block;font-weight:700}.tp-mini-block b{display:block;font-size:17px;line-height:1.1;margin-top:8px;color:var(--tc)}.tp-mini-block.tp-hero{min-height:125px;background:linear-gradient(145deg,var(--tc),#1a211c);color:#fff;padding:14px}.tp-mini-block.tp-hero span{color:rgba(255,255,255,.75)}.tp-mini-block.tp-hero b{color:#fff}.tp-info{padding:12px 6px}.tp-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}.tp-tags span{font-size:9px;padding:5px 8px;background:#edf0ed;border-radius:999px;color:#69716a}.tp-info-block{border-top:1px solid #e5e8e4;padding:16px 0}.tp-info-block strong{font-size:11px}.tp-info-block p{font-size:10px;line-height:1.7;color:#7e857f;margin:6px 0 0}.tp-modal>.modal-actions{padding:0 22px 20px}
.pw-modal{width:min(760px,94vw);padding:0}.pw-stepper{display:flex;align-items:center;padding:15px 22px;border-bottom:1px solid #ecefeb;font-size:10px;color:#9a9f9a}.pw-stepper span.active{color:#202520;font-weight:800}.pw-stepper i{width:28px;height:1px;background:#dfe3df;margin:0 10px}.pw-body{padding:24px 22px;background:#fafbf9}.pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pw-upload-card{border:1px dashed #d3d9d3;background:#fff;border-radius:13px;padding:20px;text-align:center}.pw-upload-icon{width:40px;height:40px;border-radius:12px;background:#eef1ed;display:grid;place-items:center;margin:0 auto 10px;font-size:18px}.pw-upload-card strong{font-size:12px}.pw-upload-card p{font-size:10px;color:#8a918b;line-height:1.6;margin:7px 0 12px}.pw-file-label{display:inline-flex;align-items:center;justify-content:center}.pw-file-label input{display:none}.pw-upload-card>span{display:block;margin-top:9px;font-size:9px;color:#929892;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pw-check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:13px;background:#f1f4f0;border-radius:11px}.pw-check>span{width:18px;height:18px;border-radius:50%;background:#273029;color:#fff;display:grid;place-items:center;font-size:9px;flex:none}.pw-check strong{font-size:10px}.pw-check p{font-size:9px;line-height:1.5;color:#808780;margin:4px 0 0}.project-wizard-modal .modal-actions{padding:0 22px 20px}
@media(max-width:850px){.canvas-toolbar{width:100%;flex-wrap:wrap}.tp-modal-body,.pw-grid{grid-template-columns:1fr}.tp-device{width:280px;margin:auto}.tp-modal{max-height:90vh;overflow:auto}.pw-modal{max-height:90vh;overflow:auto}}

/* V3.0 additions */
.crumb-projects{border:0;background:transparent;color:#7b817c;font:inherit;cursor:pointer;padding:3px 4px;border-radius:6px}.crumb-projects:hover{background:#f1f3f0;color:#202520}.hub-modal{width:min(760px,92vw);max-height:82vh;overflow:hidden}.hub-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid #ecefeb;padding-bottom:16px}.hub-list{max-height:54vh;overflow:auto;padding:14px 0}.hub-project{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid #e3e7e2;border-radius:12px;padding:12px;margin-bottom:8px;background:#fbfcfa}.hub-icon{width:42px;height:42px;border-radius:11px;background:#edf0ec;display:grid;place-items:center;font-size:17px}.hub-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.hub-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-copy span{font-size:10px;color:#8a908b}.hub-actions{display:flex;gap:6px}.hub-empty{text-align:center;padding:50px 10px;color:#8a908b;font-size:12px;line-height:1.8}.hub-empty span{font-size:10px}.asset-pick{border:1px solid #e1e5e1;background:#fff;border-radius:8px;padding:0;overflow:hidden;width:42px;height:42px;cursor:pointer}.asset-pick img{width:100%;height:100%;object-fit:cover}.pw-file-label{display:inline-flex;align-items:center;justify-content:center}.pw-file-label input{display:none}


/* DemoCraft V3.1 — template library, guided free mode, defense mode */
.template-card{padding:0;overflow:hidden;text-align:left;display:flex;flex-direction:column}
.template-card .template-preview{width:100%;margin:0;height:154px;border-radius:0;padding:17px}
.template-card-copy{padding:16px 17px 17px}
.template-preview .tp-count{position:absolute;right:13px;bottom:13px;font-size:9px;color:rgba(255,255,255,.72);padding:4px 7px;border:1px solid rgba(255,255,255,.25);border-radius:999px}
.template-fit{font-size:10px;color:#7b837c;line-height:1.55;margin-top:9px}
.template-fit b{color:#414942;font-weight:700;margin-right:3px}
.template-category-intro{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 13px}
.template-category-intro strong{font-size:14px;color:#252b26}
.template-category-intro span{font-size:11px;color:#7b837c}
.template-category-intro small{width:100%;font-size:10px;color:#9a9f9a}
.tp-structure{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.tp-structure-row{display:grid;grid-template-columns:25px 1fr;align-items:center;gap:7px;font-size:10px;color:#626a63}
.tp-structure-row b{font-size:9px;color:#a0a69f}
.tp-mini-block{display:flex;flex-direction:column;gap:5px}
.tp-mini-block strong{font-size:12px;line-height:1.35}
.tp-mini-block.tp-hero strong{font-size:18px}
.tp-mini-block.tp-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.tp-mini-block.tp-stats strong{grid-column:1/-1}
.tp-stat-dots{display:flex;gap:4px}.tp-stat-dots i{display:block;width:28%;height:18px;border-radius:5px;background:rgba(255,255,255,.15)}
.pw-guide{margin-top:10px;padding:11px 12px;border:1px solid #e2e7e2;border-radius:11px;background:#f8faf7}
.pw-guide strong{font-size:10px}.pw-guide p{font-size:9px;line-height:1.6;color:#808780;margin:4px 0 0}
@media(max-width:800px){.template-category-intro{gap:5px;display:block}.template-category-intro span{display:block;margin-top:4px}}

@media(max-width:1250px){.topbar{grid-template-columns:230px minmax(120px,1fr) minmax(430px,auto)}.top-btn{padding:0 8px;font-size:10px}.top-actions{gap:4px}}

/* ============ DemoCraft V4.0 · VIBE SKIN（与 marketing 对齐） ============ */
html,body{background:var(--cream)}
body{font-family:'DM Sans','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text)}
button,input,textarea,select{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:rgba(33,7,46,.28);border-radius:99px;border:2px solid var(--cream)}::-webkit-scrollbar-track{background:transparent}

/* 顶栏：奶油底 + 紫墨描边 */
.topbar{background:rgba(255,253,249,.92);border-bottom:2px solid var(--ink);backdrop-filter:blur(12px)}
.brand-logo{background:var(--ink);color:var(--lilac);border-radius:11px;box-shadow:3px 3px 0 rgba(33,7,46,.35);font-family:'Fraunces','Noto Serif SC',serif;font-size:18px}
.brand-copy strong{font-family:'Fraunces','Noto Serif SC',serif;font-size:16px;letter-spacing:-.4px;color:var(--ink)}
.brand-copy span{font-family:'DM Mono','Noto Sans SC',monospace;color:var(--muted)}
.breadcrumb{font-family:'DM Mono','Noto Sans SC',monospace;font-size:11px}
.breadcrumb strong{font-family:'Fraunces','Noto Serif SC',serif;font-size:14px}
.crumb-projects{font-family:'DM Mono','Noto Sans SC',monospace}
.top-btn{border:1px solid var(--ink);border-radius:999px;background:var(--white);color:var(--ink);font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px;box-shadow:3px 3px 0 rgba(33,7,46,.8);transition:transform .15s ease,box-shadow .15s ease}
.top-btn:hover{background:var(--cream);transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(33,7,46,.8)}
.top-btn.publish{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.top-btn.publish:hover{background:#3a1250}
.top-btn.plain{box-shadow:none;border-color:var(--line)}
.top-btn.plain:hover{transform:none;box-shadow:none}
#saveState{height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px dashed rgba(33,7,46,.4);border-radius:999px;font-family:'DM Mono','Noto Sans SC',monospace;font-size:9px;color:var(--muted);background:var(--cream)}

/* 工作区侧栏：奶油卡 + 贴纸投影 */
.app-shell{background:var(--cream)}
.sidebar{background:rgba(255,253,249,.88)}
.left-sidebar{border-right:2px solid var(--ink);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(33,7,46,.25) transparent}
.side-heading{font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px;letter-spacing:.1em;color:#7c5a92;text-transform:uppercase;font-weight:500}
.project-card{border:1.5px solid var(--ink);background:var(--white);border-radius:12px;box-shadow:var(--hard);transform:rotate(-1.2deg);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.project-card:hover{transform:rotate(0) translateY(-3px)}
.project-avatar{background:var(--lilac);color:var(--ink);border:1px solid var(--ink);border-radius:9px}
.project-copy strong{font-family:'Fraunces','Noto Serif SC',serif;font-size:13px;color:var(--ink)}
.project-copy span{font-family:'DM Mono','Noto Sans SC',monospace;font-size:9px;color:var(--muted)}
.project-switch-btn{border:1px solid var(--ink);border-radius:999px;background:var(--white);font-family:'DM Mono','Noto Sans SC',monospace;font-size:9px;color:var(--ink)}
.project-switch-btn.primary{background:var(--yellow);border-color:var(--ink);box-shadow:2px 2px 0 rgba(33,7,46,.8)}
.project-switch-btn:hover{background:var(--cream)}
.workspace-project.active{background:var(--yellow);border-color:var(--ink);color:var(--ink);box-shadow:2px 2px 0 rgba(33,7,46,.6)}
.workspace-project:hover{background:var(--soft)}
.side-link,.page-link{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;color:#6d5a7a;white-space:nowrap}
.side-link:hover,.page-link:hover{background:rgba(216,138,245,.16)}
.page-link.active{background:var(--yellow);border:1px solid var(--ink);color:var(--ink);box-shadow:2px 2px 0 rgba(33,7,46,.6)}
.page-link .page-label{font-family:'DM Sans','Noto Sans SC',sans-serif;font-size:11px}
.page-thumb{border:1.5px solid var(--ink);border-radius:7px;background:var(--cream)}
.add-page{border:1.5px dashed rgba(33,7,46,.45);border-radius:999px;font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px;color:var(--muted)}
.add-page:hover{background:rgba(216,138,245,.12);border-color:var(--ink)}
.tip-card{border:1.5px solid var(--ink);background:var(--white);border-radius:12px;box-shadow:4px 4px 0 rgba(33,7,46,.6)}
.tip-title{font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px}
.tip-card p{font-family:'DM Sans','Noto Sans SC',sans-serif;font-size:10px;color:var(--muted)}
.side-footer{font-family:'DM Mono','Noto Sans SC',monospace;font-size:9px;color:var(--muted)}

/* 画布区：米白 + 斜网格（对齐 marketing hero-grid） */
.workspace{background:linear-gradient(rgba(33,7,46,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(33,7,46,.05) 1px,transparent 1px),var(--cream);background-size:44px 44px}
.canvas-toolbar{background:rgba(255,253,249,.9);border:1.5px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 rgba(33,7,46,.55)}
.canvas-context strong{font-family:'Fraunces','Noto Serif SC',serif;font-size:13px;color:var(--ink)}
.canvas-context span{font-family:'DM Mono','Noto Sans SC',monospace;font-size:8px;background:var(--lilac);color:var(--ink);border:1px solid var(--ink)}
.device-switch{background:var(--soft);border:1px solid var(--ink)}
.device-btn{font-family:'DM Mono','Noto Sans SC',monospace;font-size:9px;color:var(--muted)}
.device-btn.active{background:var(--ink);color:var(--cream);font-family:'DM Mono','Noto Sans SC',monospace}
.preview-zoom-controls{background:var(--soft);border:1px solid var(--ink)}
.zoom-btn,.zoom-value{font-family:'DM Mono','Noto Sans SC',monospace;color:var(--muted)}
.zoom-btn:hover,.zoom-value:hover{background:var(--ink);color:var(--cream)}
.canvas-preview-btn{border:1.5px solid var(--ink);border-radius:999px;background:var(--yellow);font-family:'DM Mono','Noto Sans SC',monospace;font-size:9px;color:var(--ink);box-shadow:2px 2px 0 rgba(33,7,46,.7)}
.canvas-preview-btn:hover{background:#f9f183}

/* 右侧面板：奶油底 + 紫墨分隔 */
.inspector{background:var(--white)}
.inspector-tabs{border-bottom:2px solid var(--ink);background:var(--white)}
.inspector-tab{font-family:'DM Mono','Noto Sans SC',monospace;font-size:11px;color:var(--muted)}
.inspector-tab.active{color:var(--ink);font-weight:700}
.inspector-tab.active:after{background:var(--lilac);height:3px}
.panel-section{border-bottom:1px solid rgba(33,7,46,.14)}
.panel-title{font-family:'Fraunces','Noto Serif SC',serif;font-size:15px;letter-spacing:-.3px;color:var(--ink)}
.field label{font-family:'DM Mono','Noto Sans SC',monospace;font-size:9px;color:#7c5a92;letter-spacing:.04em}
.input,.select,.textarea{border:1.5px solid rgba(33,7,46,.35);background:var(--white);border-radius:9px;color:var(--text);font-family:'DM Sans','Noto Sans SC',sans-serif;font-size:11px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(216,138,245,.25)}
.hint{font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--muted)}
.btn{border:1.5px solid var(--ink);border-radius:999px;background:var(--white);font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px;color:var(--ink)}
.btn:hover{background:var(--cream)}
.btn.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.dark:hover{background:#3a1250}
.btn.danger{color:var(--danger)}
.color-swatch{border:1.5px solid var(--ink);border-radius:9px;background:var(--white)}
.swatch-choice{border:1.5px solid var(--ink);border-radius:7px}
.range{accent-color:var(--ink)}
.toggle-ui{background:#d9c6e3}
.toggle input:checked+.toggle-ui{background:var(--ink)}
.section-card{border:1.5px solid rgba(33,7,46,.3);border-radius:12px;background:var(--white);box-shadow:2px 2px 0 rgba(33,7,46,.25)}
.section-card-head strong{font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px;color:var(--ink)}
.section-card-meta{font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--muted)}
.item-row{border:1.5px solid rgba(33,7,46,.25);background:var(--cream);border-radius:10px}
.mini-input{border:1.5px solid rgba(33,7,46,.3);border-radius:8px;font-family:'DM Sans','Noto Sans SC',sans-serif;font-size:10px}
.component-btn{border:1.5px solid rgba(33,7,46,.35);border-radius:12px;background:var(--white);box-shadow:2px 2px 0 rgba(33,7,46,.3);transition:transform .15s ease,box-shadow .15s}
.component-btn:hover{transform:translateY(-2px);box-shadow:3px 3px 0 rgba(33,7,46,.5);background:var(--cream)}
.component-btn strong{font-family:'Fraunces','Noto Serif SC',serif;font-size:11px;color:var(--ink)}
.component-btn span{font-family:'DM Mono','Noto Sans SC',monospace;font-size:8px;color:var(--muted)}
.asset-upload{border:1.5px dashed rgba(33,7,46,.5);border-radius:12px;background:var(--cream);font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px;color:#7c5a92}
.asset-upload:hover{background:rgba(216,138,245,.14);border-color:var(--ink)}
.asset-card{border:1.5px solid rgba(33,7,46,.3);border-radius:12px;background:var(--white)}
.asset-name{font-family:'DM Mono','Noto Sans SC',monospace;font-size:8px;color:var(--muted)}
.image-placeholder{border:1.5px dashed rgba(33,7,46,.4);border-radius:12px;background:var(--cream);color:var(--muted);font-family:'DM Mono','Noto Sans SC',monospace}

/* 弹窗：奶油 + 紫墨描边 + 硬投影 */
.modal-backdrop{background:rgba(33,7,46,.4);backdrop-filter:blur(5px)}
.modal{border:2px solid var(--ink);border-radius:18px;background:var(--white);box-shadow:12px 12px 0 rgba(33,7,46,.55)}
.modal h3{font-family:'Fraunces','Noto Serif SC',serif;font-size:17px;letter-spacing:-.3px}
.modal p{font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--muted)}
.modal-eyebrow{font-family:'DM Mono','Noto Sans SC',monospace;color:#9c43c8}
.modal-actions .btn{border-radius:999px}
.toast{background:var(--ink);color:var(--cream);border:1px solid var(--ink);border-radius:999px;font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px;box-shadow:4px 4px 0 rgba(33,7,46,.4)}
.publish-url{border:1.5px solid var(--ink);background:var(--cream);border-radius:10px;font-family:'DM Mono','Noto Sans SC',monospace;color:var(--ink)}

/* 进入导览：贴纸卡片 */
.entry-experience{background:radial-gradient(120% 120% at 50% 32%,#fdf3ea 0%,var(--cream) 45%,#ecd9f0 100%)}
.entry-panel{border:2px solid var(--ink);border-radius:26px;background:var(--white);box-shadow:14px 14px 0 rgba(33,7,46,.4)}
.entry-top{border-bottom:2px solid var(--ink)}
.entry-brand-mark{background:var(--ink);color:var(--lilac);border-radius:12px;font-family:'Fraunces','Noto Serif SC',serif;font-size:18px}
.entry-brand strong{font-family:'Fraunces','Noto Serif SC',serif;font-size:20px;letter-spacing:-.5px}
.entry-brand span{font-family:'DM Mono','Noto Sans SC',monospace;color:var(--muted)}
.entry-progress i{background:#e5d4ec}
.entry-progress i.active{background:var(--ink)}
.entry-eyebrow{font-family:'DM Mono','Noto Sans SC',monospace;color:#9c43c8}
.entry-content h1{font-family:'Fraunces','Noto Serif SC',serif;letter-spacing:-.04em}
.entry-content>p{font-family:'DM Sans','Noto Sans SC',sans-serif;color:#6d5a7a}
.entry-btn{border:1.5px solid var(--ink);border-radius:999px;background:var(--white);color:var(--ink);font-family:'DM Mono','Noto Sans SC',monospace;font-size:11px;box-shadow:3px 3px 0 rgba(33,7,46,.7);transition:transform .15s ease,box-shadow .15s ease}
.entry-btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(33,7,46,.7)}
.entry-btn.primary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.entry-btn.primary:hover{background:#3a1250;color:var(--cream);transform:translate(2px,2px)}
.entry-btn.secondary:hover{background:var(--cream)}
.entry-card{border:1.5px solid var(--ink);border-radius:20px;background:var(--cream)}
.entry-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:8px 8px 0 rgba(33,7,46,.35)}
.entry-card .entry-icon{background:var(--lilac);border:1px solid var(--ink);border-radius:12px;color:var(--ink)}
.entry-card h2{font-family:'Fraunces','Noto Serif SC',serif;font-size:20px;letter-spacing:-.3px}
.entry-card p{font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--muted)}
.entry-card small{font-family:'DM Mono','Noto Sans SC',monospace;color:#9c43c8}
.guide-item{border:1.5px solid rgba(33,7,46,.3);border-radius:16px;background:var(--cream);box-shadow:3px 3px 0 rgba(33,7,46,.25)}
.guide-num{font-family:'DM Mono','Noto Sans SC',monospace;color:#9c43c8}
.guide-item h3{font-family:'Fraunces','Noto Serif SC',serif;font-size:15px;color:var(--ink)}
.guide-item p{font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--muted)}
.template-cat{font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px;color:#6d5a7a}
.template-cat.active{background:var(--yellow);color:var(--ink);border:1px solid var(--ink);box-shadow:2px 2px 0 rgba(33,7,46,.5)}
.template-card{border:1.5px solid var(--ink);border-radius:18px;background:var(--white)}
.template-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:8px 8px 0 rgba(33,7,46,.4)}
.template-card h3{font-family:'Fraunces','Noto Serif SC',serif;font-size:15px;letter-spacing:-.2px}
.template-card p{font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--muted)}
.template-tags span{background:var(--cream);color:#7c5a92;font-family:'DM Mono','Noto Sans SC',monospace}
.template-fit{font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--muted)}
.entry-footer{border-top:2px solid var(--ink);font-family:'DM Mono','Noto Sans SC',monospace;color:var(--muted)}

/* 模板编辑 studio & 项目向导 */
.ts-head,.pw-head{border-bottom:2px solid var(--ink)}
.ts-template.active{background:var(--yellow);color:var(--ink);border:1px solid var(--ink)}
.ts-section-row{border:1.5px solid rgba(33,7,46,.3);border-radius:12px;background:var(--cream)}
.ts-note{border:1.5px solid rgba(33,7,46,.3);background:var(--cream);color:var(--muted)}
.ts-note b{color:var(--ink)}
.pw-stepper{border-bottom:2px solid var(--ink);font-family:'DM Mono','Noto Sans SC',monospace;color:var(--muted)}
.pw-stepper span.active{color:var(--ink)}
.pw-upload-card{border:1.5px dashed rgba(33,7,46,.5);border-radius:14px;background:var(--cream)}
.pw-upload-icon{background:var(--lilac);border:1px solid var(--ink);color:var(--ink)}
.pw-check{background:var(--cream);border:1px solid var(--ink)}
.pw-check>span{background:var(--green);color:var(--ink)}
.hub-head{border-bottom:2px solid var(--ink)}
.hub-project{border:1.5px solid var(--ink);border-radius:14px;background:var(--cream);box-shadow:3px 3px 0 rgba(33,7,46,.3)}
.hub-icon{background:var(--lilac);border:1px solid var(--ink);color:var(--ink)}
.hub-copy span{font-family:'DM Mono','Noto Sans SC',monospace;color:var(--muted)}
.hub-copy strong{font-family:'Fraunces','Noto Serif SC',serif;font-size:12px;color:var(--ink)}
.template-studio .ts-modal{border-radius:18px}
.ts-template{font-family:'DM Mono','Noto Sans SC',monospace;font-size:10px}
.ts-category-title{font-family:'DM Mono','Noto Sans SC',monospace;color:#9c43c8}

/* 手机壳与预览 */
.phone-shadow{background:rgba(33,7,46,.16)}
.phone{background:linear-gradient(145deg,#fdfdfd 0%,#b9bec0 16%,#f8f9f9 34%,#aeb3b5 68%,#f4f5f5 100%)}
.preview-large{border:8px solid #21072e;border-radius:30px;box-shadow:10px 10px 0 rgba(33,7,46,.35)}

/* 新增：主题色卡 + 文案灵感 */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.theme-btn{border:1.5px solid var(--ink);border-radius:12px;background:var(--white);padding:9px 10px;text-align:left;cursor:pointer;box-shadow:2px 2px 0 rgba(33,7,46,.4);transition:transform .15s ease,box-shadow .15s ease;width:100%}
.theme-btn:hover{transform:translateY(-2px);box-shadow:4px 4px 0 rgba(33,7,46,.5)}
.theme-btn strong{display:block;font-family:'Fraunces','Noto Serif SC',serif;font-size:12px;color:var(--ink);letter-spacing:-.2px}
.theme-btn .t-swatchs{display:flex;gap:4px;margin-top:6px}
.theme-btn .t-swatchs i{width:18px;height:18px;border-radius:5px;border:1px solid var(--ink)}
.theme-btn.active{background:var(--yellow);border-color:var(--ink)}
.idea-list{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.idea-btn{border:1.5px solid rgba(33,7,46,.35);border-radius:11px;background:var(--cream);padding:9px 10px;text-align:left;cursor:pointer;width:100%;transition:transform .15s ease,border-color .15s}
.idea-btn:hover{border-color:var(--ink);transform:translateX(3px);background:var(--white)}
.idea-btn strong{display:block;font-family:'Fraunces','Noto Serif SC',serif;font-size:12px;color:var(--ink);letter-spacing:-.2px}
.idea-btn span{display:block;font-family:'DM Sans','Noto Sans SC',sans-serif;font-size:10px;color:var(--muted);margin-top:3px;line-height:1.45}
.idea-btn small{display:inline-block;margin-top:6px;font-family:'DM Mono','Noto Sans SC',monospace;font-size:8px;color:#9c43c8;border:1px solid rgba(156,67,200,.4);border-radius:999px;padding:2px 7px}

/* 保存状态徽标 */
.save-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:dotPulse 2.2s ease-in-out infinite}
#saveState.saved{border-style:solid;border-color:var(--ink);color:var(--ink);background:var(--yellow)}
#saveState.saved .save-dot{background:var(--ink);animation:none}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ===== V6.1 答辩模式 · 全屏覆盖层 ===== */
.defense-overlay{position:fixed;inset:0;z-index:3000;background:#f8eee6;display:flex;align-items:center;justify-content:center;padding:14px}
.defense-shell{width:min(1180px,96vw);height:min(820px,92vh);display:grid;grid-template-rows:auto 1fr auto auto;background:#fffdf9;border:3px solid #21072e;border-radius:28px;box-shadow:8px 8px 0 rgba(33,7,46,.14);padding:18px 20px;gap:10px}
.defense-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:2px solid #21072e;flex-wrap:wrap;gap:8px}
.defense-brand{font:800 26px/1 'Fraunces','Noto Serif SC',serif;color:#21072e}
.defense-sub{font:10px 'DM Mono','Noto Sans SC',monospace;color:#8d7a94;margin-top:4px}
.defense-right{display:flex;gap:8px}
.defense-copy,.defense-close,.defense-btn{font:11px 'DM Mono','Noto Sans SC',monospace;border:2px solid #21072e;background:#f4ef51;border-radius:10px;padding:8px 12px;cursor:pointer}
.defense-close{background:#f2b49e}
.defense-main{display:grid;grid-template-columns:min(400px,46%) 1fr;gap:16px;min-height:0}
.defense-phone{background:#111;border-radius:34px;padding:8px;display:flex;align-items:stretch}
.defense-phone iframe{width:100%;flex:1;border:0;border-radius:27px;background:#fff;min-height:0}
.defense-script{background:#f8eee6;border:2px solid #21072e;border-radius:18px;padding:14px;overflow:auto;min-height:0}
.defense-script-title{font:800 18px 'Fraunces','Noto Serif SC',serif;color:#21072e;margin-bottom:10px}
.defense-line{background:#fff;border:2px solid #21072e;border-radius:12px;padding:8px 10px;margin-bottom:8px;font:12px/1.5 'DM Sans','Noto Sans SC',sans-serif}
.defense-line b{display:block;font:800 11px 'DM Mono','Noto Sans SC',monospace;color:#a43e8e;margin-bottom:2px}
.defense-line.warn{background:#fff0e9;border-color:#d3543a}
.defense-line.warn b{color:#d3543a}
.defense-nav{display:flex;align-items:center;gap:12px;padding-top:8px;border-top:2px solid #21072e;flex-wrap:wrap}
.defense-btn{background:#fff}
.defense-btn.primary{background:#d88af5}
.defense-btn:disabled{opacity:.4;cursor:not-allowed}
.defense-pages{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.defense-dot{border:2px solid #21072e;background:#fff;border-radius:999px;padding:5px 10px;font:10px 'DM Mono','Noto Sans SC',monospace;cursor:pointer}
.defense-dot.active{background:#d88af5}
.defense-hint{font:9px 'DM Mono','Noto Sans SC',monospace;color:#8d7a94;text-align:center}
@media(max-width:860px){.defense-main{grid-template-columns:1fr}.defense-phone iframe{height:52vh}}

/* ===== V7 · 自由画布系统 ===== */
.fc-tabbar{display:flex;flex-direction:column;gap:6px;width:100%;height:100%;padding:8px 10px;box-sizing:border-box}
.fc-tabbar h2{font-size:11px;color:#8d7a94;margin:0 0 2px}
.fc-tab-row{display:flex;gap:var(--fc-gap,6px);margin-top:4px;flex:1}
.fc-tab-row button{flex:1;border:1px solid rgba(33,7,46,.14);background:#fff;border-radius:10px;padding:8px 3px;font-size:9px;color:#4a3654;cursor:pointer;font-family:inherit}
.tp-pages-badge{display:inline-block;margin-top:8px;font-size:9px;color:#69716a;background:#edf0ed;border-radius:999px;padding:4px 9px}

.mode-switch{font:700 11px 'DM Mono','Noto Sans SC',monospace;border:2px solid #21072e;background:#fffdf9;border-radius:999px;padding:7px 13px;cursor:pointer;color:#21072e;transition:.15s}
.mode-switch:hover{background:#d88af5}
.mode-switch.on{background:#21072e;color:#fffdf9}
.phone-stage.free-mode #preview{display:none}
.phone-stage.free-mode .fc-scroll{display:block}
.phone-stage.free-mode.free-locked .fc-scroll{display:none}
.phone-stage.free-mode.free-locked #preview{display:block}
.fc-scroll{display:none;position:absolute;inset:0;overflow:auto;background:transparent;cursor:grab}
.fc-scroll:active{cursor:grabbing}
.fc-viewport{position:relative;transform-origin:0 0;box-shadow:0 4px 26px rgba(33,7,46,.08);overflow:hidden}
.fc-grid{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='11' y='11' width='2.2' height='2.2' fill='%2321072e' fill-opacity='0.09'/%3E%3C/svg%3E"),linear-gradient(rgba(33,7,46,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(33,7,46,.07) 1px,transparent 1px),linear-gradient(rgba(33,7,46,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(33,7,46,.032) 1px,transparent 1px);background-size:24px 24px,100px 100px,100px 100px,20px 20px,20px 20px;pointer-events:none}
.fc-safe{position:absolute;left:0;right:0;top:0;height:47px;z-index:998;background:repeating-linear-gradient(45deg,rgba(216,138,245,.16) 0 10px,transparent 10px 20px);border-bottom:1px dashed rgba(216,138,245,.6);pointer-events:none}
.fc-safe-b{position:absolute;left:0;right:0;bottom:0;height:34px;z-index:998;background:repeating-linear-gradient(45deg,rgba(216,138,245,.16) 0 10px,transparent 10px 20px);border-top:1px dashed rgba(216,138,245,.6);pointer-events:none}
#fcSections{position:absolute;inset:0;z-index:1}
.fc-sec{position:absolute;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;cursor:move;touch-action:none}
.fc-sec.selected{outline:2px solid #d88af5;outline-offset:2px}
.fc-sec.selected .fc-tag{opacity:1}
.fc-tag{position:absolute;top:-9px;left:8px;font:700 9px 'DM Mono','Noto Sans SC',monospace;color:#21072e;background:#f4ef51;border:1.5px solid #21072e;border-radius:999px;padding:2px 7px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .15s}
.fc-sec:hover .fc-tag{opacity:.85}
.fc-handles{position:absolute;inset:0;pointer-events:none}
.fc-h{position:absolute;width:9px;height:9px;background:#fffdf9;border:1.5px solid #21072e;border-radius:2px;pointer-events:auto}
.fc-h-nw{top:-5px;left:-5px;cursor:nwse-resize}.fc-h-n{top:-5px;left:50%;margin-left:-4.5px;cursor:ns-resize}.fc-h-ne{top:-5px;right:-5px;cursor:nesw-resize}
.fc-h-e{top:50%;right:-5px;margin-top:-4.5px;cursor:ew-resize}.fc-h-se{bottom:-5px;right:-5px;cursor:nwse-resize}.fc-h-s{bottom:-5px;left:50%;margin-left:-4.5px;cursor:ns-resize}
.fc-h-sw{bottom:-5px;left:-5px;cursor:nesw-resize}.fc-h-w{top:50%;left:-5px;margin-top:-4.5px;cursor:ew-resize}
.fc-sec:not(.selected) .fc-handles{display:none}
.fc-hero{flex:1;border-radius:inherit;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(160deg,#53616a,#26343c 50%,#17211d);position:relative;overflow:hidden}
.fc-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 15%,rgba(255,255,255,.2),transparent 35%),linear-gradient(180deg,transparent 45%,rgba(0,0,0,.46));pointer-events:none}
.fc-hero>*{position:relative;z-index:1}
.fc-hero .eyebrow{font-size:9px;opacity:.75;letter-spacing:.08em}
.fc-hero h1{font-size:20px;line-height:1.15;margin:6px 0 8px;letter-spacing:-.03em}
.fc-hero p{font-size:10px;line-height:1.7;opacity:.88;margin:0 0 12px}
.fc-hero button{border:1px solid rgba(255,255,255,.75);border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.04);color:#fff;font-size:9px;font-weight:700;align-self:flex-start}
.fc-text{flex:1;overflow:auto}
.fc-text h2,.fc-cards h2,.fc-stats h2,.fc-contact h2{font-size:15px;margin:0 0 6px;letter-spacing:-.02em}
.fc-text p,.fc-contact p{font-size:11px;line-height:1.7;color:#7b817b;margin:0;white-space:pre-line}
.fc-cards,.fc-stats{flex:1;overflow:auto}
.fc-cards>div,.fc-stats>div{display:grid;gap:var(--fc-gap,6px);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.fc-card,.fc-stat{background:#fff;border:1px solid #e3e7e2;border-radius:10px;padding:8px}
.fc-card b,.fc-stat b{display:block;font-size:11px;margin-bottom:4px}
.fc-card span,.fc-stat span{font-size:9px;color:#7b817b;line-height:1.5}
.fc-stat b{color:#1d2420;font-size:16px}
.fc-button,.fc-contact{flex:1;background:#1d2420;color:#fff;border-radius:inherit;padding:10px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.fc-button h3{font-size:12px;margin:0 0 6px}.fc-button p{font-size:9px;opacity:.8;margin:0 0 8px;line-height:1.5;white-space:pre-line}
.fc-button button,.fc-contact button{border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;border-radius:999px;padding:6px 12px;font-size:9px}
.fc-image{flex:1;display:flex;flex-direction:column;min-height:0}
.fc-image img{width:100%;flex:1;object-fit:cover;border-radius:10px;min-height:0}
.fc-image p{font-size:9px;color:#7b817b;margin:6px 0 0}
.fc-image.placeholder{border:2px dashed #7b817b;border-radius:10px;align-items:center;justify-content:center;color:#7b817b;gap:6px;font-size:10px}
.fc-image.placeholder span{font-size:22px;opacity:.6}
.fc-divider{flex:1;display:flex;align-items:center}.fc-divider:before{content:"";width:100%;height:1px;background:#7b817b;opacity:.45}
.fc-spacer{flex:1}
.group-head{font:800 13px 'Fraunces','Noto Serif SC',serif;color:#21072e;margin:14px 0 8px;padding-top:10px;border-top:2px dashed rgba(33,7,46,.14);letter-spacing:.02em}
.group-head:first-of-type{margin-top:0;border-top:0;padding-top:0}
.component-btn[draggable=true]{cursor:grab}
.geo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:8px}
.geo-row{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:8px}
.geo-grid label,.geo-row label{font:700 9px 'DM Mono','Noto Sans SC',monospace;color:#21072e;display:flex;flex-direction:column;gap:4px}
.geo-grid .input,.geo-row .input{width:100%}

/* ===== V7.1 位置模版 · 磁吸吸附 ===== */
.fc-sec.layout-sec{cursor:move}
.fc-layout{position:absolute;inset:0;border-radius:inherit;background:rgba(92,92,99,.14);border:1.5px dashed rgba(92,92,99,.5);overflow:hidden}
.fc-layout-name{position:absolute;top:8px;left:10px;font-size:9px;font-family:'DM Mono','Noto Sans SC',monospace;letter-spacing:.06em;color:#21072e;opacity:.62;background:#f8eee6;padding:3px 8px;border-radius:999px;z-index:2;pointer-events:none;white-space:nowrap}
.fc-slot{position:absolute;border:1.5px dashed rgba(33,7,46,.38);background:rgba(255,253,249,.93);border-radius:10px;transition:border-color .15s,background .15s;box-shadow:inset 0 0 0 4px rgba(248,238,230,.85)}
.fc-slot.used{background:rgba(195,166,234,.3);border-color:rgba(210,150,220,.85);border-style:solid;box-shadow:inset 0 0 0 4px rgba(255,253,249,.9)}
.layout-btn{display:block;width:100%;text-align:left;padding:8px 10px;background:#fffdf9;border:1px solid rgba(33,7,46,.16);border-radius:12px;cursor:grab;box-shadow:2px 2px 0 rgba(33,7,46,.08);transition:transform .12s,box-shadow .12s}
.layout-btn:hover{transform:translateY(-2px);box-shadow:4px 4px 0 rgba(33,7,46,.14)}
.layout-btn small{display:block;font-size:10px;color:#21072e;opacity:.6;margin-top:2px;font-family:'DM Mono','Noto Sans SC',monospace}
.layout-grid{grid-template-columns:repeat(2,1fr)}
.layout-btn .lyt-preview{width:100%;height:44px;display:block;margin:6px 0 2px;background:rgba(92,92,99,.13);border:1px dashed rgba(92,92,99,.45);border-radius:8px;position:relative}
.lyt-preview i{position:absolute;background:#fffdf9;border:1px solid rgba(33,7,46,.25);border-radius:6px}
.layout-btn strong{font-size:12px}

/* ===== V7.2 · 全屏画布 / 标尺 / 浮层手柄 / 滚动条 ===== */
.canvas:has(.phone-stage.free-mode){padding:0;gap:0;justify-content:flex-start;align-items:stretch}
.canvas:has(.phone-stage.free-mode) .canvas-toolbar{position:absolute;width:min(780px,94%);margin:0;border-radius:999px;left:50%;top:14px;transform:translateX(-50%)}
.phone-stage.free-mode{position:relative;flex:1;width:100%;height:auto;transform:none;display:block;padding:0;margin:0 0 10px}
.workspace:has(.phone-stage.free-mode){overflow:hidden}
.phone-stage.free-mode .phone{position:absolute;inset:0;width:auto;height:auto;transform:none;background:transparent;box-shadow:none;padding:0}
.phone-stage.free-mode .phone-screen{position:absolute;inset:0;border-radius:0;background:transparent;box-shadow:none}
.phone-stage.free-mode .dynamic-island,.phone-stage.free-mode .camera-dot,.phone-stage.free-mode .volume,.phone-stage.free-mode .power,.phone-stage.free-mode .phone-shadow{display:none}
/* ===== 修复：自由项目切回流式（free-locked）恢复设备金属框 ===== */
.phone-stage.free-mode.free-locked{position:relative;flex:none;width:auto;height:auto;transform:none;display:flex;align-items:center;justify-content:center;margin:18px auto}
.phone-stage.free-mode.free-locked .phone{position:relative;width:330px;height:700px;border-radius:52px;padding:8px;background:linear-gradient(145deg,#fdfdfd 0%,#b9bec0 16%,#f8f9f9 34%,#aeb3b5 68%,#f4f5f5 100%);box-shadow:0 25px 70px rgba(32,38,34,.16),inset 0 0 0 1px rgba(255,255,255,.8),inset 0 0 0 2px rgba(72,77,78,.17)}
.phone-stage.free-mode.free-locked .phone-screen{position:absolute;inset:8px;border-radius:45px;overflow:hidden;background:#080909;box-shadow:inset 0 0 0 1px rgba(0,0,0,.7)}
.phone-stage.free-mode.free-locked .phone-shadow{position:absolute;width:330px;height:45px;bottom:-18px;background:rgba(32,38,34,.13);filter:blur(24px);border-radius:50%}
.phone-stage.free-mode.free-locked .dynamic-island{display:block;position:absolute;top:17px;left:50%;transform:translateX(-50%);width:99px;height:29px;border-radius:999px;background:#050505;z-index:3}
.phone-stage.free-mode.free-locked .camera-dot{display:block;position:absolute;top:27px;left:calc(50% + 29px);width:5px;height:5px;border-radius:50%;background:#15243a;box-shadow:0 0 5px #273b57;z-index:4}
.phone-stage.free-mode.free-locked .volume{display:block;position:absolute;left:-3px;width:4px;height:54px;border-radius:4px;background:#aeb2b3;box-shadow:inset 1px 0 rgba(255,255,255,.45),inset -1px 0 rgba(60,65,67,.25)}
.phone-stage.free-mode.free-locked .power{display:block;position:absolute;right:-3px;top:184px;width:4px;height:78px;border-radius:4px;background:#aeb2b3;box-shadow:inset 1px 0 rgba(255,255,255,.45),inset -1px 0 rgba(60,65,67,.25)}
.phone-stage.free-mode.free-locked .volume-a{top:148px}
.phone-stage.free-mode.free-locked .volume-b{top:213px}
.phone-stage.free-mode.free-locked[data-device="tablet"] .phone{width:430px;height:620px;border-radius:38px}
.phone-stage.free-mode.free-locked[data-device="tablet"] .phone-screen{border-radius:31px}
.phone-stage.free-mode.free-locked[data-device="tablet"] .dynamic-island,.phone-stage.free-mode.free-locked[data-device="tablet"] .camera-dot,.phone-stage.free-mode.free-locked[data-device="tablet"] .volume,.phone-stage.free-mode.free-locked[data-device="tablet"] .power{display:none}
.phone-stage.free-mode.free-locked[data-device="desktop"] .phone{width:680px;height:430px;border-radius:22px;padding:7px}
.phone-stage.free-mode.free-locked[data-device="desktop"] .phone-screen{border-radius:16px}
.phone-stage.free-mode.free-locked[data-device="desktop"] .dynamic-island,.phone-stage.free-mode.free-locked[data-device="desktop"] .camera-dot,.phone-stage.free-mode.free-locked[data-device="desktop"] .volume,.phone-stage.free-mode.free-locked[data-device="desktop"] .power{display:none}
.phone-stage.free-mode.free-locked[data-device="desktop"] .phone-shadow{width:650px}
.phone-stage.free-mode .fc-scroll{inset:0;scrollbar-width:auto;scrollbar-color:rgba(33,7,46,.35) transparent;-ms-overflow-style:auto}
.fc-scroll::-webkit-scrollbar{display:none}
.fc-viewport{padding-left:22px;padding-top:22px}
#fcGrid,#fcSafe,#fcSections{left:22px;top:22px;right:0;bottom:0}
#fcSafeB{left:22px;right:0}
#fcHandles{position:absolute;z-index:5000;pointer-events:none;outline:2px solid #d88af5;outline-offset:0;display:none}
#fcHandles .fc-h{position:absolute;width:11px;height:11px;background:#fffdf9;border:2px solid #21072e;border-radius:3px;pointer-events:auto;z-index:5001;box-shadow:0 1px 4px rgba(33,7,46,.25)}
#fcRulerX,#fcRulerY{position:absolute;z-index:5050;pointer-events:none;background:rgba(248,238,230,.9)}
#fcRulerX{top:0;left:0;right:0;height:22px;border-bottom:1px solid rgba(33,7,46,.15)}
#fcRulerY{top:0;left:0;bottom:0;width:22px;border-right:1px solid rgba(33,7,46,.15)}
.layout-gap-x{cursor:ew-resize}
.layout-gap-y{cursor:ns-resize}
#fcHandles .fc-h{box-shadow:0 1px 4px rgba(33,7,46,.3)}

.fc-gap-line{position:absolute;z-index:4;background:transparent;pointer-events:auto;width:10px;transform:translateX(-50%)}
.fc-gap-line.gap-y{width:auto;height:10px;transform:translateY(-50%)}
.fc-gap-line::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:repeating-linear-gradient(90deg,rgba(33,7,46,.35) 0 2px,transparent 2px 5px)}
.fc-gap-line.gap-y::after{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-50%);background:repeating-linear-gradient(0deg,rgba(33,7,46,.35) 0 2px,transparent 2px 5px)}
.fc-gap-line:hover::after,.fc-gap-line.dragging::after{background:rgba(216,138,245,.95)}

.fc-device-frame{position:absolute;z-index:1;left:22px;top:22px;border:1.5px dashed rgba(33,7,46,.5);background:rgba(248,238,230,.16);pointer-events:none}
.fc-device-frame .df-label{position:absolute;top:-26px;left:-1.5px;font:700 10px 'DM Mono','Noto Sans SC',monospace;color:var(--ink);background:var(--yellow);border:1px solid var(--ink);border-radius:6px;padding:2px 7px;white-space:nowrap;box-shadow:2px 2px 0 rgba(33,7,46,.6)}

/* ===== V7.5A smart align / empty guide / snapshots ===== */
.al-line{position:absolute;background:var(--lilac);box-shadow:0 0 0 1px rgba(33,7,46,.3),0 0 6px rgba(216,138,245,.6);z-index:95;pointer-events:none}
.al-v{width:1px}.al-h{height:1px}
#fcEmptyGuide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:40}
.eg-card{pointer-events:auto;text-align:center;padding:30px 34px;background:var(--white);border:2px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);max-width:300px}
.eg-card h3{font-family:var(--font-display);font-size:22px;margin:10px 0 6px}
.eg-card p{color:var(--ink-70);font-size:13px;line-height:1.7;margin:0 0 14px}
.eg-badge{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;background:var(--lilac);color:var(--ink);padding:3px 10px;border-radius:99px;font-weight:700}
.eg-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.eg-actions button{font-family:var(--font-mono);font-size:11px;padding:7px 12px;border:1.5px solid var(--ink);border-radius:10px;background:var(--cream);color:var(--ink);cursor:pointer;transition:all .16s}
.eg-actions button:hover{background:var(--yellow);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.snap-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;margin-top:12px}
.snap-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1.5px solid var(--ink);border-radius:12px;background:var(--cream)}
.snap-row b{font-family:var(--font-mono);font-size:12px;min-width:56px}
.snap-row span{flex:1;font-size:12px;color:var(--ink-70)}
.snap-ops{display:flex;gap:6px}
.snap-ops button{font-family:var(--font-mono);font-size:11px;padding:5px 10px;border:1.5px solid var(--ink);border-radius:8px;background:var(--white);cursor:pointer}
.snap-ops button:hover{background:var(--yellow)}
.snap-ops button.danger:hover{background:var(--peach)}
.snap-list .empty{color:var(--ink-50);font-size:12px;text-align:center;padding:20px 0}

/* ===== V7.5B 组件效率 ===== */
.variant-row{display:flex;gap:8px;flex-wrap:wrap}
.variant-dot{width:34px;height:34px;border-radius:10px;border:2px solid var(--ink);cursor:pointer;position:relative;transition:transform .15s;padding:0}
.variant-dot i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;font-family:var(--font-mono);font-size:8px;color:var(--ink);opacity:0;background:var(--white);border-radius:6px;padding:1px 4px;white-space:nowrap}
.variant-dot:hover i{opacity:1;z-index:2}
.variant-dot.active{box-shadow:0 0 0 3px var(--yellow);transform:scale(1.06)}
.fc-batch-bar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);display:none;align-items:center;gap:6px;background:var(--ink);color:var(--cream);padding:9px 14px;border-radius:14px;z-index:9999;box-shadow:0 14px 34px rgba(33,7,46,.4);flex-wrap:wrap;justify-content:center;max-width:92vw}
.fc-batch-bar b{font-family:var(--font-mono);color:var(--yellow)}
.bb-sep{width:1px;height:16px;background:rgba(248,238,230,.3);margin:0 4px}
.fc-batch-bar button{font-family:var(--font-mono);font-size:11px;padding:6px 10px;border:1px solid rgba(248,238,230,.4);background:transparent;color:var(--cream);border-radius:9px;cursor:pointer;transition:all .15s}
.fc-batch-bar button:hover{background:var(--lilac);color:var(--ink);border-color:var(--lilac)}
.fc-batch-bar button.bb-clear:hover{background:var(--peach)}
.fc-sec.batch-sel{outline:2px dashed var(--lilac);outline-offset:2px}
.layer-list{display:flex;flex-direction:column;gap:6px;max-height:380px;overflow:auto}
.layer-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--ink);border-radius:11px;background:var(--cream);cursor:pointer;font-size:12px}
.layer-row.active{border-color:var(--lilac);background:var(--lilac-20,var(--cream))}
.layer-ic{font-size:14px}
.layer-row b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-z{font-family:var(--font-mono);font-size:10px;color:var(--ink-50)}
.layer-ops{display:flex;gap:4px}
.layer-ops button{width:24px;height:24px;border:1.5px solid var(--ink);border-radius:7px;background:var(--white);cursor:pointer;font-size:12px}
.layer-ops button:hover{background:var(--yellow)}
.layer-row.hid{opacity:.55}
.layer-row.hid b{text-decoration:line-through;text-decoration-color:rgba(108,28,147,.45)}
.layer-row.locked{background:repeating-linear-gradient(45deg,rgba(216,138,245,.10) 0 8px,transparent 8px 16px)}
.layer-row.drag-over{outline:2px dashed #9c43c8;outline-offset:-2px}
.ai-copy{display:block;width:100%;text-align:left;margin-top:7px;padding:9px 12px;border:1.5px solid var(--ink);border-radius:10px;background:var(--white);font-size:12px;color:var(--ink);cursor:pointer;transition:all .15s}
.ai-copy:hover{background:var(--lilac);transform:translateX(2px)}
body.paint-mode{cursor:copy}
#fcMarquee{position:fixed;border:1.5px dashed var(--lilac);background:rgba(216,138,245,.14);z-index:9998;pointer-events:none;display:none;border-radius:4px}

/* V7.5B 误删保护 */
.undo-toast{position:fixed;right:20px;bottom:24px;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--cream);padding:11px 16px;border-radius:13px;font-family:var(--font-mono);font-size:12px;z-index:99999;box-shadow:0 12px 30px rgba(33,7,46,.35);opacity:0;transform:translateY(14px);pointer-events:none;transition:all .25s}
.undo-toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.undo-toast button{background:var(--lilac);color:var(--ink);border:0;border-radius:9px;padding:6px 12px;font-family:var(--font-mono);font-size:11px;cursor:pointer}
.undo-toast button:hover{background:var(--yellow)}

/* V7.5C 迷你工具条 + 迷你地图 */
.fc-mini-bar{position:fixed;display:flex;gap:3px;background:var(--ink);border-radius:11px;padding:5px;transform:translateX(-50%);z-index:9996;box-shadow:0 10px 26px rgba(33,7,46,.35);animation:mbIn .22s cubic-bezier(.2,1.4,.4,1)}
@keyframes mbIn{from{opacity:0;transform:translateX(-50%) translateY(6px) scale(.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.fc-mini-bar button{width:26px;height:26px;border:0;background:transparent;color:var(--cream);border-radius:7px;cursor:pointer;font-size:13px;line-height:1}
.fc-mini-bar button:hover{background:var(--lilac);color:var(--ink)}
.fc-minimap{position:fixed;right:18px;bottom:66px;background:var(--white);border:1.5px solid var(--ink);border-radius:14px;padding:9px;z-index:9995;box-shadow:0 12px 30px rgba(33,7,46,.25);user-select:none;transition:opacity .15s}.fc-minimap.dragging{opacity:.85}.fc-minimap .mm-label{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--ink-50);margin-bottom:6px;cursor:grab;padding:2px 3px;border-radius:6px;user-select:none}.fc-minimap .mm-label:active{cursor:grabbing}.fc-minimap .mm-label:hover{background:var(--soft)}
.fc-minimap.collapsed{padding:6px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(33,7,46,.18);cursor:pointer}.fc-minimap.collapsed .mm-label{margin-bottom:0;text-align:center}.fc-minimap.collapsed .mm-label:hover{background:var(--lilac);color:var(--ink)}.fc-minimap.collapsed .mm-pages,.fc-minimap.collapsed .mm-canvas{display:none}
.mm-label{display:block;font-family:var(--font-mono);font-size:8px;letter-spacing:1px;color:var(--ink-50);margin-bottom:5px;text-align:center}
.mm-canvas{position:relative;background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(33,7,46,.05) 9px 10px),repeating-linear-gradient(90deg,transparent 0 9px,rgba(33,7,46,.05) 9px 10px);border-radius:6px;overflow:hidden}
.mm-sec{position:absolute;background:var(--lilac);opacity:.55;border-radius:2px}
.mm-vp{position:absolute;border:1.5px solid var(--ink);background:rgba(248,238,230,.25);border-radius:3px}

/* V7.5D 交付保险 */
.export-menu{position:fixed;display:flex;flex-direction:column;gap:4px;background:var(--ink);border-radius:13px;padding:7px;z-index:99999;box-shadow:0 16px 40px rgba(33,7,46,.4);min-width:200px;animation:mbIn .18s cubic-bezier(.2,1.4,.4,1)}
.export-menu button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--cream);padding:9px 12px;border-radius:9px;font-family:var(--font-mono);font-size:12px;text-align:left;cursor:pointer}
.export-menu button:hover{background:var(--lilac);color:var(--ink)}
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--ink);border-radius:14px;padding:16px;margin-top:6px}
.qr-wrap img{width:180px;height:180px;image-rendering:pixelated;border-radius:6px}
.qr-note{font-family:var(--font-mono);font-size:10px;color:var(--ink-50);letter-spacing:1px}

/* ===== V7.7 面板新控件 ===== */
.grad-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.grad-btn{height:34px;border:1.5px solid var(--ink);border-radius:9px;cursor:pointer;background:var(--white);font-size:10px;color:var(--ink-50);display:grid;place-items:center;transition:transform .12s}
.grad-btn:hover{transform:scale(1.06)}
.grad-btn.active{outline:3px solid var(--lilac);outline-offset:1px}
.font-preview{border:1.5px solid var(--ink);border-radius:12px;background:var(--cream);padding:14px;margin-bottom:14px;box-shadow:2px 2px 0 rgba(33,7,46,.35)}
.fp-title{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--ink);margin-bottom:6px}
.fp-body{font-size:11px;color:var(--ink-70);line-height:1.7}
.asset-cats{display:flex;gap:6px;margin-bottom:10px}
.asset-cat{height:28px;padding:0 12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white);font-size:10px;font-weight:700;color:var(--ink-70);cursor:pointer}
.asset-cat.active{background:var(--yellow)}
.asset-tag{font-size:8px;color:var(--ink-60);background:var(--soft);border-radius:6px;padding:2px 6px;display:inline-block;margin:4px 0}
.shape-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.shape-btn{height:36px;border:1.5px solid var(--ink);border-radius:9px;background:var(--white);font-size:10px;font-weight:700;color:var(--ink);cursor:pointer;transition:transform .12s}
.shape-btn:hover{transform:translateY(-2px)}
.shape-btn.active{background:var(--lilac);color:var(--ink);box-shadow:2px 2px 0 rgba(33,7,46,.4)}

/* ===== V7.7 新组件样式 ===== */
.quote-panel{background:var(--ccSurface,var(--surface,var(--cream)));border:1.5px solid var(--ink);border-radius:18px;padding:26px 28px;text-align:center;box-shadow:2px 2px 0 rgba(33,7,46,.28)}
.quote-mark{font-size:44px;line-height:1;color:var(--ccP,var(--primary,var(--lilac)));font-family:Georgia,serif;margin-bottom:2px}
.quote-text{font-size:18px;font-weight:800;color:var(--ccText,var(--text,var(--ink)));line-height:1.7;margin-bottom:10px}
.quote-by{font-size:12px;color:var(--ccMuted,var(--muted,var(--ink-60)));font-style:italic}
.timeline{display:flex;flex-direction:column;gap:0;margin-top:6px}
.tl-item{display:flex;gap:14px;position:relative;padding-bottom:22px}
.tl-item:not(:last-child):before{content:'';position:absolute;left:6px;top:16px;bottom:0;width:2px;background:var(--ccP,var(--primary,var(--lilac)));opacity:.35}
.tl-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 2px var(--ccP,var(--primary,var(--lilac)));flex:none;margin-top:4px}
.tl-body b{font-size:14px;color:var(--ccText,var(--text,var(--ink)));display:block;margin-bottom:2px}
.tl-body p{font-size:12px;color:var(--ccMuted,var(--muted,var(--ink-60)));line-height:1.7}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:6px}
.step{border:1.5px solid var(--ink);border-radius:16px;padding:16px;background:var(--ccSurface,var(--surface,var(--white)));box-shadow:2px 2px 0 rgba(33,7,46,.2)}
.step-num{width:26px;height:26px;border-radius:50%;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;margin-bottom:8px}
.step b{font-size:13px;display:block;margin-bottom:4px;color:var(--ccText,var(--text,var(--ink)))}
.step p{font-size:11px;color:var(--ccMuted,var(--muted,var(--ink-60)));line-height:1.6}
.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-top:6px}
.prog-item{border:1.5px solid var(--ink);border-radius:16px;padding:16px 10px;text-align:center;background:var(--ccSurface,var(--surface,var(--white)));box-shadow:2px 2px 0 rgba(33,7,46,.2)}
.prog-ring{width:74px;height:74px;transform:rotate(-90deg);margin:0 auto 6px;display:block}
.prog-bg{fill:none;stroke:var(--ink-12, rgba(33,7,46,.1));stroke-width:9}
.prog-fg{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .6s}
.prog-item b{font-size:13px;display:block;color:var(--ccText,var(--text,var(--ink)))}
.prog-item span{font-size:11px;color:var(--ccMuted,var(--muted,var(--ink-60)))}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:6px}
.price-card{border:1.5px solid var(--ink);border-radius:18px;padding:18px 16px;text-align:center;background:var(--ccSurface,var(--surface,var(--white)));box-shadow:2px 2px 0 rgba(33,7,46,.2)}
.price-card b{font-size:14px;display:block;margin-bottom:4px;color:var(--ccText,var(--text,var(--ink)))}
.price{font-size:22px;font-weight:900;display:block;margin-bottom:8px}
.price-card p{font-size:11px;color:var(--ccMuted,var(--muted,var(--ink-60)));line-height:1.6;margin-bottom:12px}
.price-cta{border:none;color:#fff;border-radius:999px;padding:8px 18px;font-size:11px;font-weight:800;cursor:pointer;transition:transform .12s}
.price-cta:hover{transform:translateY(-2px)}
.faq-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.faq-item{border:1.5px solid var(--ink);border-radius:14px;background:var(--ccSurface,var(--surface,var(--white)));box-shadow:1.5px 1.5px 0 rgba(33,7,46,.2);overflow:hidden}
.faq-item summary{font-size:13px;font-weight:800;padding:12px 14px;cursor:pointer;color:var(--ccText,var(--text,var(--ink)));list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary:after{content:'＋';font-size:14px;color:var(--ccP,var(--primary,var(--lilac)));transition:transform .2s}
.faq-item[open] summary:after{transform:rotate(45deg)}
.faq-item p{font-size:12px;color:var(--ccMuted,var(--muted,var(--ink-60)));padding:0 14px 12px;line-height:1.7}
.carousel{position:relative;margin-top:6px;overflow:hidden;border-radius:16px;border:1.5px solid var(--ink);box-shadow:2px 2px 0 rgba(33,7,46,.2)}
.car-slide{display:none;padding:26px;min-height:110px;background:var(--ccSurface,var(--surface,var(--white)))}
.car-slide.active{display:block;animation:dcCarIn .35s ease}
@keyframes dcCarIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.car-inner b{font-size:16px;display:block;margin-bottom:6px;color:var(--ccText,var(--text,var(--ink)))}
.car-inner p{font-size:12px;color:var(--ccMuted,var(--muted,var(--ink-60)));line-height:1.7}
.car-dots{display:flex;gap:6px;justify-content:center;padding:10px 0;background:var(--ccSurface,var(--surface,var(--white)))}
.car-dots i{width:8px;height:8px;border-radius:50%;background:var(--ink-20, rgba(33,7,46,.2));cursor:pointer;transition:all .2s}
.car-dots i.active{background:var(--ccP,var(--primary,var(--lilac)));transform:scale(1.3)}

/* ===== V7.7 页面模板按钮 ===== */
.tpl-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:8px}
.tpl-btn{height:30px;border:1.5px solid var(--ink);border-radius:9px;background:var(--cream);font-size:10px;font-weight:700;color:var(--ink-80);cursor:pointer;transition:transform .12s;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.25)}
.tpl-btn:hover{transform:translateY(-2px);background:var(--lilac-20, rgba(216,138,245,.2))}

/* ===== V7.8 AI 生成 ===== */
.ai-gen-btn{height:30px;padding:0 12px;border:1.5px solid var(--ink);border-radius:999px;background:linear-gradient(135deg,var(--lilac),#a86ef7);color:var(--ink);font-size:11px;font-weight:800;cursor:pointer;box-shadow:2px 2px 0 rgba(33,7,46,.3);transition:transform .12s,box-shadow .12s;margin:0 6px}
.ai-gen-btn:hover{transform:translateY(-2px);box-shadow:3px 3px 0 rgba(33,7,46,.35)}
.ai-gen-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(33,7,46,.3)}
.ai-input{width:100%;border:1.5px solid var(--ink);border-radius:12px;background:var(--white);padding:10px 12px;font-size:13px;color:var(--ink);resize:vertical;font-family:inherit;margin:10px 0 8px}
.ai-input:focus{outline:none;box-shadow:0 0 0 3px var(--lilac-30, rgba(216,138,245,.3))}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:4px}
.ai-result{margin-top:12px}
.ai-plan{border:1.5px solid var(--ink);border-radius:14px;background:var(--cream);padding:12px;box-shadow:2px 2px 0 rgba(33,7,46,.25)}
.ai-plan>b{font-size:12px;display:block;margin-bottom:8px}
.ai-plan-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;margin-bottom:10px}
.ai-plan-sec{border:1px solid var(--ink);border-radius:9px;background:var(--white);padding:6px 8px;text-align:center}
.ai-plan-sec i{width:8px;height:8px;border-radius:50%;background:var(--lilac);display:inline-block;margin-right:4px;vertical-align:middle}
.ai-plan-sec span{font-size:10px;font-weight:800;display:block}
.ai-plan-sec small{font-size:9px;color:var(--ink-60);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-plan-meta{display:flex;gap:12px;font-size:10px;color:var(--ink-70)}

/* ===== V7.8 动画时间线 ===== */
.tl-wrap{margin-top:10px;border:1.5px solid var(--ink);border-radius:12px;background:var(--cream);padding:10px;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.22)}
.tl-head{display:flex;justify-content:space-between;font-size:9px;color:var(--ink-60);font-weight:800;letter-spacing:.4px;margin-bottom:8px}
.tl-track{position:relative;display:flex;flex-direction:column;gap:6px}
.tl-row{display:flex;align-items:center;gap:8px}
.tl-name{width:52px;font-size:9px;color:var(--ink-70);font-weight:700;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-lane{position:relative;flex:1;height:18px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(33,7,46,.08) calc(25% - 1px) 25%);border-radius:6px;border:1px dashed rgba(33,7,46,.25)}
.tl-bar{position:absolute;top:2px;bottom:2px;border-radius:5px;background:linear-gradient(90deg,var(--lilac),var(--yellow));border:1px solid var(--ink);cursor:ew-resize;transition:background .2s}
.tl-bar.custom{background:linear-gradient(90deg,var(--yellow),var(--peach));box-shadow:0 0 0 2px rgba(195,166,234,.5)}
.tl-grip{position:absolute;right:1px;top:1px;bottom:1px;width:7px;border-radius:3px;background:rgba(33,7,46,.35);cursor:col-resize}
.tl-ms{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:8px;color:var(--ink-70);font-weight:800;pointer-events:none}

/* ===== V7.8 作品市场 ===== */
.market-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:420px;overflow-y:auto;padding:2px}
.market-card{border:1.5px solid var(--ink);border-radius:14px;background:var(--white);padding:12px;text-align:left;cursor:pointer;transition:transform .12s,box-shadow .12s;display:flex;gap:10px;align-items:flex-start;box-shadow:2px 2px 0 rgba(33,7,46,.22)}
.market-card:hover{transform:translateY(-3px);box-shadow:3px 3px 0 rgba(33,7,46,.3)}
.market-card:active{transform:translate(1px,1px)}
.market-icon{font-size:24px;flex:none;width:42px;height:42px;border:1.5px solid var(--ink);border-radius:11px;background:var(--cream);display:grid;place-items:center}
.market-copy strong{font-size:13px;display:block;color:var(--ink)}
.market-copy span{font-size:10px;color:var(--ink-60);display:block;line-height:1.5;margin:3px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.market-swatches{display:flex;gap:3px}
.market-swatches i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(33,7,46,.25)}
.market-meta{font-size:9px;color:var(--ink-70);background:var(--soft);border-radius:6px;padding:2px 6px;flex:none;margin-top:2px}

/* ===== V7.8 演示模式 + 微交互 ===== */
.demo-btn{border:1.5px solid var(--ink);border-radius:10px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:12px;padding:6px 10px;cursor:pointer;box-shadow:2px 2px 0 rgba(33,7,46,.25);transition:transform .12s,box-shadow .12s}
.demo-btn:hover{transform:translateY(-1px)}
.demo-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(33,7,46,.18)}
.demo-btn.on{background:var(--lilac);color:var(--white)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(33,7,46,.2)}
.panel-section{animation:dcPanelIn .22s ease}
@keyframes dcPanelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ===== V7.9 发布：链接+二维码 ===== */
.pub-modal{width:460px}
.pub-box{border:1.5px solid var(--ink);border-radius:14px;background:var(--white);padding:14px;display:flex;flex-direction:column;gap:12px}
.pub-field{display:flex;flex-direction:column;gap:6px}
.pub-field label{font-size:10px;color:var(--ink-60);font-weight:700}
.pub-row{display:flex;gap:8px;align-items:center}
.pub-row .input{flex:1;font-family:'DM Mono','Noto Sans SC',monospace;font-size:11px}
.pub-row .btn{flex:none;height:31px}
.qr-placeholder{border:1.5px dashed var(--ink);border-radius:12px;background:var(--cream);padding:22px;text-align:center;font-size:12px;font-weight:700;color:var(--ink);line-height:1.8}
.qr-placeholder span{font-size:10px;color:var(--ink-60);font-weight:400}
.pub-domain{margin-top:14px;border-top:1.5px solid var(--line);padding-top:12px}
.pub-history{margin-top:14px;border-top:1.5px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.pub-hrow{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:9px;padding:6px 8px;font-size:10px;color:var(--ink-70)}
.pub-hrow button{height:26px;font-size:9px}


/* ===== V8.3 entry 活泼化：彩底 + 漂浮贴纸 + 弹出动画 ===== */
.entry-experience{background:
 radial-gradient(120% 90% at 12% 8%,#ffe9c8 0%,rgba(255,233,200,0) 45%),
 radial-gradient(110% 90% at 88% 12%,#f3d3f8 0%,rgba(243,211,248,0) 48%),
 radial-gradient(130% 110% at 50% 108%,#dff2d3 0%,rgba(223,242,211,0) 46%),
 linear-gradient(160deg,#fff7ec 0%,#fdf0de 55%,#f1e2f4 100%)}
.entry-experience:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(33,7,46,.09) 1.6px,transparent 1.6px);background-size:26px 26px;pointer-events:none}
#entryDecor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ed-card{position:absolute;display:flex;align-items:center;gap:7px;border:2px solid var(--ink);border-radius:15px;background:var(--white);box-shadow:5px 5px 0 rgba(33,7,46,.32);font-family:'DM Mono','Noto Sans SC',monospace;font-size:11px;letter-spacing:.2px;color:var(--ink);padding:9px 13px;animation:edFloat 5.5s ease-in-out infinite;white-space:nowrap}
.ed-a{top:11%;left:3.5%;transform:rotate(-3deg)}
.ed-b{top:17%;right:3.5%;animation-delay:-1.3s;background:var(--yellow)}
.ed-c{bottom:21%;left:4%;animation-delay:-2.4s;background:var(--lilac);color:var(--ink)}
.ed-d{bottom:11%;right:4%;animation-delay:-3.6s;background:var(--green)}
.ed-e{top:45%;left:1.6%;animation-delay:-4.7s;background:var(--peach);display:none}
@keyframes edFloat{0%,100%{transform:translateY(0) rotate(var(--r,-2deg))}50%{transform:translateY(-13px) rotate(var(--r2,2.5deg))}}
.ed-a{--r:-3deg;--r2:2.5deg}.ed-b{--r:2deg;--r2:-2deg}.ed-c{--r:-1.5deg;--r2:3deg}.ed-d{--r:2.5deg;--r2:-2.5deg}.ed-e{--r:-2deg;--r2:2deg}
.entry-shell{position:relative;z-index:2}
.entry-content>*{animation:edPop .5s cubic-bezier(.2,1.5,.4,1) backwards}
.entry-content>*:nth-child(2){animation-delay:.06s}
.entry-content>*:nth-child(3){animation-delay:.12s}
.entry-content>*:nth-child(4){animation-delay:.18s}
.entry-content>*:nth-child(5){animation-delay:.24s}
.entry-content>*:nth-child(6){animation-delay:.3s}
@keyframes edPop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.entry-card{transition:transform .2s cubic-bezier(.2,1.5,.4,1),box-shadow .2s,background .2s}
.entry-card:hover{border-color:var(--ink);transform:translateY(-5px) rotate(-.8deg);box-shadow:9px 11px 0 rgba(33,7,46,.35)}
.entry-card:nth-child(2):hover{transform:translateY(-5px) rotate(.8deg)}
.entry-card .entry-icon{transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
.entry-card:hover .entry-icon{transform:scale(1.14) rotate(-6deg)}
.entry-btn{transition:transform .15s cubic-bezier(.2,1.5,.4,1),box-shadow .15s,background .15s}
.entry-btn:active{transform:translate(3px,3px) scale(.96);box-shadow:0 0 0 rgba(33,7,46,.7)}
.entry-progress i{transition:transform .2s}
.entry-progress i.active{transform:scaleX(1.08)}
.guide-item{border:1.5px solid var(--ink);border-radius:16px;background:var(--cream);padding:14px 16px;box-shadow:4px 4px 0 rgba(33,7,46,.25);transition:transform .2s cubic-bezier(.2,1.5,.4,1),box-shadow .2s}
.guide-item:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:7px 8px 0 rgba(33,7,46,.3)}
.template-card{transition:transform .2s cubic-bezier(.2,1.5,.4,1),box-shadow .2s}
.template-card:hover{border-color:var(--ink);transform:translateY(-4px) rotate(-.6deg);box-shadow:8px 10px 0 rgba(33,7,46,.32)}
@media(max-width:800px){.ed-a,.ed-e{display:none}.ed-b{top:9%;right:2%}.ed-d{bottom:6%;right:2%}.ed-c{bottom:16%;left:2%}.entry-content>*{animation-duration:.42s}}

/* ===== V8.4 组件扩充 · 间距滑杆 · 图标库 ===== */
.fc-heading{flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px}
.fc-heading h2{font-size:22px;font-weight:900;letter-spacing:-.03em;margin:0 0 4px;color:#151815}
.fc-heading p{font-size:11px;color:#7b817b;margin:0;line-height:1.6}
.fc-list{flex:1;overflow:auto;padding:10px}
.fc-list>h2{font-size:12px;margin-bottom:8px;color:#151815}
.fc-li{display:flex;gap:var(--fc-gap,8px);align-items:flex-start;padding:7px 0;border-bottom:1px solid rgba(33,7,46,.08)}
.fc-li:last-child{border-bottom:0}
.fc-li>i{width:18px;height:18px;border-radius:50%;background:#1d2420;color:#fff;font-size:9px;display:grid;place-items:center;flex:none;margin-top:2px}
.fc-li p{font-size:10px;line-height:1.5;margin:0}
.fc-li p b{display:block;color:#151815;font-size:11px}
.fc-li p span{color:#7b817b}
.fc-navbar{width:100%;height:100%;display:flex;align-items:center;padding:8px 12px;background:#fff;border-bottom:1.5px solid #1d2420;box-sizing:border-box}
.fc-nav-row{display:flex;gap:var(--fc-gap,8px);width:100%}
.fc-nav-row button{flex:1;border:0;background:transparent;color:#151815;font-size:10px;font-weight:800;padding:6px 2px;text-align:center;cursor:pointer;font-family:inherit;border-radius:8px}
.fc-sidebar{width:100%;height:100%;display:flex;flex-direction:column;padding:12px 8px;background:#fff;border-right:1.5px solid #1d2420;box-sizing:border-box;gap:var(--fc-gap,6px)}
.fc-side-row{display:flex;flex-direction:column;gap:var(--fc-gap,6px);width:100%}
.fc-side-row button{display:flex;align-items:center;gap:6px;border:1.5px solid rgba(33,7,46,.14);background:#fff;border-radius:10px;padding:7px 9px;font-size:10px;color:#151815;cursor:pointer;font-family:inherit;text-align:left}
/* 间距滑杆 */
.spacing-row{display:flex;align-items:center;gap:10px;margin:8px 0 2px}
.spacing-row label{font:10px 'DM Mono','Noto Sans SC',monospace;color:#21072e;min-width:96px;flex:none}
.spacing-row label b{color:#9c43c8}
.spacing-row .range{flex:1}
/* 导航菜单图标库 */
.nav-row{position:relative}
.ic-toggle{flex:none;border:1.5px solid rgba(33,7,46,.3);background:#f8eee6;border-radius:8px;padding:3px 7px;font-size:11px;cursor:pointer;line-height:1}
.ic-line{display:none;flex-wrap:wrap;gap:4px;margin-top:6px;padding:7px;background:#f8eee6;border:1.5px dashed rgba(33,7,46,.3);border-radius:10px}
.nav-row.open .ic-line{display:flex}
.ic-btn{border:1.5px solid rgba(33,7,46,.18);background:#fffdf9;border-radius:8px;width:30px;height:30px;font-size:14px;cursor:pointer;display:grid;place-items:center}
.ic-btn:hover{border-color:#21072e;transform:translateY(-1px)}
.ic-btn.on{background:#f4ef51;border-color:#21072e}
/* 完成度检查 */
.check-modal{position:fixed;inset:0;z-index:4000;background:rgba(33,7,46,.42);display:flex;align-items:center;justify-content:center;padding:18px}
.check-card{width:min(430px,92vw);background:#fffdf9;border:3px solid #21072e;border-radius:20px;box-shadow:8px 8px 0 rgba(33,7,46,.16);padding:20px;max-height:82vh;display:flex;flex-direction:column}
.check-card h3{font:800 18px 'Fraunces','Noto Serif SC',serif;color:#21072e;margin:0 0 4px}
.check-card .ck-sub{font:10px 'DM Mono','Noto Sans SC',monospace;color:#8d7a94;margin-bottom:12px}
.check-list{overflow:auto;flex:1;display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.ck-item{display:flex;gap:8px;align-items:flex-start;border:1.5px solid rgba(33,7,46,.16);background:#fff;border-radius:11px;padding:8px 10px;font:11px/1.5 'DM Sans','Noto Sans SC',sans-serif;color:#4a3654}
.ck-item b{font:800 9px 'DM Mono','Noto Sans SC',monospace;color:#9c43c8;flex:none;margin-top:1px}
.ck-item.warn{background:#fff0e9;border-color:#d3543a}
.ck-item.warn b{color:#d3543a}
.check-ok{text-align:center;font:12px 'DM Sans','Noto Sans SC',sans-serif;color:#2f8f5b;padding:14px 0}
.check-actions{display:flex;gap:8px}
.check-actions .btn{flex:1;text-align:center}
/* 高级面板折叠 */
.adv-fold{border:1.5px solid rgba(33,7,46,.3);border-radius:12px;margin:10px 0;padding:0 10px;background:var(--cream,#f8eee6)}
.adv-fold summary{cursor:pointer;font:800 11px 'DM Mono','Noto Sans SC',monospace;color:#21072e;padding:9px 2px;list-style:none}
.adv-fold summary:before{content:"▸ ";color:#9c43c8}
.adv-fold[open] summary:before{content:"▾ "}

/* ===== V9.3 · 黑色外壳 / 可拖拽工具栏 / 页面导航图 / 画布背景 ===== */
/* ① 黑色外壳（保留尺寸与圆角） */
.phone{background:#0b0b0d}
.phone-stage.free-mode.free-locked .phone{background:#0b0b0d}
.phone-shadow{background:rgba(0,0,0,.42)}
/* ② 工具栏：固定尺寸 + 可拖拽 */
.canvas-toolbar{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:min(780px,94%);flex-wrap:nowrap;margin:0;cursor:default;user-select:none;z-index:60;touch-action:none}
.canvas-toolbar.dragging{cursor:grabbing}
.canvas-toolbar.dragging{opacity:.92}
.canvas:has(.phone-stage.free-mode){padding:70px 0 0}
/* ③ 页面导航图（NAV） */
.fc-minimap .mm-pages{display:flex;flex-direction:column;gap:3px;min-width:96px}
.fc-minimap .mm-page{display:flex;align-items:center;gap:6px;width:100%;border:1px solid transparent;background:transparent;border-radius:7px;padding:4px 6px;font-size:10px;color:#5a405f;cursor:pointer;text-align:left;font-family:inherit}
.fc-minimap .mm-page:hover{background:var(--soft)}
.fc-minimap .mm-page.active{background:var(--ink);color:var(--cream);border-color:var(--ink);font-weight:700}
.fc-minimap .mm-page .mm-dot{width:7px;height:7px;border-radius:50%;background:var(--lilac);flex:none}
.fc-minimap .mm-page.active .mm-dot{background:var(--yellow)}
.fc-minimap .mm-canvas{position:relative;border:1px solid rgba(33,7,46,.18);border-radius:7px;background:#fbf7f1}
.fc-minimap .mm-sec{position:absolute;background:var(--lilac);border-radius:3px;opacity:.85}
.fc-minimap .mm-vp{position:absolute;border:1.5px solid var(--ink);background:rgba(33,7,46,.05)}
/* ④ 画布背景：契合宣传页的柔和浅色 */
.workspace{background-color:#faf6ef;background-image:radial-gradient(circle,rgba(33,7,46,.085) 1.5px,transparent 1.7px),radial-gradient(1100px 640px at 82% 8%,rgba(216,138,245,.12) 0%,transparent 62%),linear-gradient(180deg,#faf6ef 0%,#f6eee4 100%);background-size:26px 26px,100% 100%,100% 100%}

/* ===== V9.3b · Nav 图增强（流式缩略块/收起展开） ===== */
.fc-minimap .mm-flow{position:absolute;left:6px;right:6px;background:var(--lilac);border-radius:4px;opacity:.55}
.fc-minimap .mm-flow.active{background:var(--ink);opacity:.8}
.fc-minimap .mm-flow-canvas{position:relative;border:1px solid rgba(33,7,46,.18);border-radius:7px;background:#fbf7f1;margin-top:6px;min-height:36px}
.fc-minimap .mm-empty{display:block;padding:10px 6px;font-size:9px;color:#a08ba5;text-align:center}

/* ===== V9.4 · 工具栏把手 / Nav 图精细化 / 导览隐藏 ===== */
.toolbar-grip{display:flex;align-items:center;justify-content:center;width:26px;height:30px;border-radius:8px;color:#a08ba5;font-size:14px;cursor:grab;user-select:none;flex:none;transition:background .15s,color .15s;line-height:1}
.toolbar-grip:hover{background:rgba(216,138,245,.14);color:var(--ink)}
.toolbar-grip:active{cursor:grabbing;background:rgba(216,138,245,.26)}
.fc-minimap{background:linear-gradient(180deg,#fffdf9 0%,#faf3ec 100%);border-radius:16px;padding:10px;box-shadow:0 14px 44px rgba(33,7,46,.20),0 2px 8px rgba(33,7,46,.08);border:1px solid rgba(33,7,46,.14)}
.fc-minimap .mm-label{font-size:9px;letter-spacing:2.5px;color:#8a6a92;font-weight:800;margin-bottom:8px}
.fc-minimap .mm-pages{gap:4px}
.fc-minimap .mm-page{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center;padding:5px 7px;border-radius:9px;border:1px solid transparent;background:transparent;transition:background .15s,border-color .15s}
.fc-minimap .mm-page:hover{background:rgba(216,138,245,.10)}
.fc-minimap .mm-page.active{background:linear-gradient(135deg,var(--ink),#4a1f55);color:#fff;border-color:rgba(33,7,46,.25);box-shadow:2px 2px 0 rgba(33,7,46,.25)}
.mm-thumb{width:22px;height:26px;border-radius:4px;background:#f1e9e0;border:1px solid rgba(33,7,46,.12);display:flex;flex-direction:column;padding:2px;gap:2px;overflow:hidden;flex:none}
.mm-t-hero{height:8px;border-radius:2px;background:linear-gradient(135deg,#4a1f55,#21072e);display:block}
.mm-t-line{height:3px;border-radius:2px;background:#d8c8cf;display:block}
.mm-t-line.w70{width:70%}
.mm-t-line.w45{width:45%}
.mm-page.active .mm-thumb{background:#3a1744;border-color:rgba(255,255,255,.25)}
.mm-page.active .mm-t-hero{background:linear-gradient(135deg,#d88af5,#f4ef51)}
.mm-page.active .mm-t-line{background:rgba(255,255,255,.35)}
.mm-pg-name{font-size:10px;font-weight:600;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-minimap .mm-flow-canvas{border-radius:9px;border:1px solid rgba(33,7,46,.14);background:linear-gradient(180deg,#fffdf9,#fbf5ee);margin-top:8px;padding:4px}
.fc-minimap .mm-flow{position:absolute;left:6px;right:6px;height:28px;border-radius:6px;display:flex;align-items:center;gap:4px;padding:0 5px}
.mm-f-hero{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#4a1f55,#21072e);border-radius:5px;padding:4px 6px;gap:2px}
.mm-f-hero b{display:block;height:4px;width:60%;border-radius:2px;background:rgba(255,255,255,.85)}
.mm-f-hero i{display:block;height:3px;width:38%;border-radius:2px;background:rgba(255,255,255,.4)}
.mm-f-cards,.mm-f-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%;height:100%;background:transparent}
.mm-f-cards b,.mm-f-cards i,.mm-f-stats b,.mm-f-stats i{border-radius:4px;background:#efd9e6;display:block}
.mm-f-cards b,.mm-f-stats b{background:linear-gradient(135deg,#d88af5,#a86ad4)}
.mm-f-btn{width:56%;height:14px;border-radius:999px;background:linear-gradient(135deg,#f4ef51,#f2b49e);box-shadow:1px 1px 0 rgba(33,7,46,.2)}
.mm-f-line{display:block;width:100%;height:4px;border-radius:2px;background:#e4d3da}
.mm-f-line.s{width:62%}

/* ===== V9.6 · 对齐线视觉 / 历史面板 / 右键菜单 / 组件搜索 / 暗色模式 ===== */
#fcAlignLines .al-line{position:absolute;background:var(--lilac);opacity:.95;box-shadow:0 0 6px rgba(216,138,245,.7)}
#fcAlignLines .al-v{width:1px}
#fcAlignLines .al-h{height:1px}
.snap-list{display:flex;flex-direction:column;gap:5px;max-height:170px;overflow-y:auto;padding-right:2px}
.snap-row{display:flex;align-items:center;gap:8px;border:1px solid rgba(33,7,46,.12);background:var(--white);border-radius:8px;padding:6px 8px;font-size:10px;min-height:28px}
.snap-row b{color:var(--muted);font-weight:600;width:46px;flex:none}
.snap-row span{flex:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snap-ops{display:flex;gap:5px;flex:none}
.snap-ops button{border:1px solid rgba(33,7,46,.18);background:var(--soft);color:var(--text);border-radius:6px;font-size:9px;padding:2px 7px;cursor:pointer;transition:transform .1s}
.snap-ops button:hover{transform:translateY(-1px)}
.snap-ops button.danger{color:var(--danger)}
.hist-sec-title{font-size:10px;font-weight:800;color:var(--muted);margin:14px 0 6px;letter-spacing:.6px}
.hist-modal .modal{max-height:82vh;overflow-y:auto}
.comp-search{margin-bottom:11px}
.comp-search .input{height:32px}
.page-menu{position:fixed;z-index:1300;min-width:138px;background:var(--white);border:1.5px solid var(--ink);border-radius:11px;box-shadow:var(--hard);padding:5px;display:flex;flex-direction:column;gap:2px}
.page-menu button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--text);font-size:11px;text-align:left;padding:7px 9px;border-radius:7px;cursor:pointer}
.page-menu button:hover{background:var(--lilac);color:var(--ink)}
.page-link.paging{opacity:.4;border-style:dashed}
/* ===== 暗色模式 ===== */
html[data-theme="dark"]{--bg:#150e1c;--panel:#1d1530;--line:rgba(195,166,234,.2);--text:#f3e9f6;--muted:#a58fb0;--accent:#c3a6ea;--soft:#2a1c38;--blue:#b06ae0;--danger:#ff7a8a;--ink:#c3a6ea;--yellow:#c3a6ea;--white:#1d1530;--cream:#150e1c;--shadow:0 20px 55px rgba(0,0,0,.35);--hard:6px 6px 0 rgba(0,0,0,.55)}
html[data-theme="dark"] .topbar{background:rgba(29,21,48,.92)}
html[data-theme="dark"] .inspector-tabs{background:#1d1530}
html[data-theme="dark"] .section-card,html[data-theme="dark"] .component-btn{background:#251a34;border-color:rgba(195,166,234,.14)}
html[data-theme="dark"] .item-row{background:#1e1530;border-color:rgba(195,166,234,.1)}
html[data-theme="dark"] .input,html[data-theme="dark"] .select,html[data-theme="dark"] .textarea{background:#2a1c38;border-color:rgba(195,166,234,.16);color:var(--text)}
html[data-theme="dark"] .modal{background:#1d1530;border-color:rgba(195,166,234,.2);box-shadow:0 30px 90px rgba(0,0,0,.5)}
html[data-theme="dark"] .page-link:hover,html[data-theme="dark"] .workspace-project:hover{background:#2a1c38}
html[data-theme="dark"] .page-thumb{background:#1e1530;border-color:rgba(195,166,234,.15)}
html[data-theme="dark"] .page-thumb-canvas{background:#251a34}
html[data-theme="dark"] .page-thumb-text span{background:rgba(195,166,234,.18)}
html[data-theme="dark"] .page-thumb-cards i,html[data-theme="dark"] .page-thumb-stats i{background:rgba(195,166,234,.16)}
html[data-theme="dark"] .page-link.active,html[data-theme="dark"] .workspace-project.active,html[data-theme="dark"] .project-switch-btn.primary{color:#21072e}
html[data-theme="dark"] .workspace-project-icon{background:#251a34;border-color:var(--ink)}
html[data-theme="dark"] .workspace{background-image:radial-gradient(circle,rgba(195,166,234,.24) 1.7px,transparent 1.9px),radial-gradient(1100px 620px at 16% 10%,rgba(216,138,245,.15),transparent 62%),radial-gradient(900px 540px at 85% 16%,rgba(82,132,255,.13),transparent 62%),radial-gradient(1000px 720px at 72% 92%,rgba(195,166,234,.09),transparent 62%),radial-gradient(720px 520px at 22% 86%,rgba(244,179,158,.11),transparent 62%),linear-gradient(180deg,#171020,#130d1a);background-size:28px 28px,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%}
html[data-theme="dark"] .fc-grid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='11' y='11' width='2.2' height='2.2' fill='%23c3a6ea' fill-opacity='0.22'/%3E%3C/svg%3E"),linear-gradient(rgba(195,166,234,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(195,166,234,.09) 1px,transparent 1px),linear-gradient(rgba(195,166,234,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(195,166,234,.04) 1px,transparent 1px);background-size:24px 24px,100px 100px,100px 100px,20px 20px,20px 20px}
html[data-theme="dark"] .brand-logo{background:var(--ink);color:#150e1c}
html[data-theme="dark"] .brand-copy strong{color:var(--text)}
html[data-theme="dark"] .side-footer{color:#6f5c78}
html[data-theme="dark"] .toast{background:var(--yellow);color:#21072e}
html[data-theme="dark"] .tip-card{background:#201630;border-color:rgba(195,166,234,.12)}
html[data-theme="dark"] .canvas-toolbar{background:rgba(29,21,48,.92)}
html[data-theme="dark"] .project-card{background:#1d1530;border-color:rgba(195,166,234,.2)}
html[data-theme="dark"] .fc-rule-x,.html[data-theme="dark"] .fc-rule-y{color:rgba(195,166,234,.55)}
html[data-theme="dark"] #fcRulerX,html[data-theme="dark"] #fcRulerY{background:rgba(29,21,48,.92);border-color:rgba(195,166,234,.18)}
html[data-theme="dark"] .fc-safe{border-color:rgba(195,166,234,.35)}

/* ===== V9.6.1 · 左侧栏深色 / 答辩模式深色 / 导览页五彩斑斓的黑 ===== */
/* 左侧栏 */
html[data-theme="dark"] .sidebar{background:rgba(24,16,38,.9)}
html[data-theme="dark"] .side-heading{color:#a58fb0}
html[data-theme="dark"] .side-link:hover{background:#2a1c38}
html[data-theme="dark"] .side-link span{color:#a58fb0}
html[data-theme="dark"] .workspace-project-copy small,html[data-theme="dark"] .page-page-copy small{color:#8f7ba3}
html[data-theme="dark"] .add-page{border-color:rgba(195,166,234,.3);color:#a58fb0}
html[data-theme="dark"] .add-page:hover{background:#2a1c38}
html[data-theme="dark"] .group-head strong{color:var(--text)}
html[data-theme="dark"] .group-tag{color:var(--lilac)}
html[data-theme="dark"] .page-delete{color:#8f7ba3}
html[data-theme="dark"] .project-switch-btn{background:#251a34;color:var(--text)}
html[data-theme="dark"] .project-switch-btn:hover{background:#2a1c38}
/* 答辩模式 */
html[data-theme="dark"] .defense-overlay{background:#150e1c}
html[data-theme="dark"] .defense-shell{background:#1d1530;border-color:var(--ink)}
html[data-theme="dark"] .defense-head{border-bottom-color:var(--ink)}
html[data-theme="dark"] .defense-brand{color:var(--text)}
html[data-theme="dark"] .defense-sub{color:var(--muted)}
html[data-theme="dark"] .defense-script{background:#211628;border-color:var(--ink)}
html[data-theme="dark"] .defense-script-title{color:var(--text)}
html[data-theme="dark"] .defense-phone{background:#050505;border:2px solid rgba(255,255,255,.08)}
html[data-theme="dark"] .defense-copy,html[data-theme="dark"] .defense-close,html[data-theme="dark"] .defense-btn{border-color:var(--ink);background:var(--yellow);color:#21072e}
html[data-theme="dark"] .defense-close{background:#2a1c38;color:var(--text)}
html[data-theme="dark"] .preview-large{border-color:#000;background:#000}
/* 导览页 · 五彩斑斓的黑（独立于深浅主题） */
html[data-theme="dark"] #entryExperience{position:fixed;inset:0;overflow-y:auto;z-index:1500;background:radial-gradient(1200px 620px at 12% 16%,rgba(216,138,245,.17),transparent 62%),radial-gradient(900px 520px at 86% 20%,rgba(82,132,255,.15),transparent 62%),radial-gradient(1000px 720px at 72% 88%,rgba(195,166,234,.11),transparent 62%),radial-gradient(820px 520px at 22% 82%,rgba(244,179,158,.13),transparent 62%),linear-gradient(160deg,#0c0614 0%,#150b22 45%,#1c0f2e 100%)}
html[data-theme="dark"] #entryExperience::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(300px 300px at 30% 30%,rgba(216,138,245,.18),transparent 70%),radial-gradient(260px 260px at 68% 40%,rgba(82,132,255,.16),transparent 70%),radial-gradient(280px 280px at 45% 78%,rgba(195,166,234,.12),transparent 70%);filter:blur(30px);animation:dcEntryDrift 16s ease-in-out infinite alternate}
@keyframes dcEntryDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,-22px) scale(1.12)}}
html[data-theme="dark"] #entryExperience .entry-panel{background:rgba(22,12,36,.84);border-color:rgba(195,166,234,.5);box-shadow:14px 14px 0 rgba(0,0,0,.42),0 30px 90px rgba(0,0,0,.55);backdrop-filter:blur(16px)}
html[data-theme="dark"] #entryExperience .entry-content h1{color:#f7f1ff;text-shadow:0 2px 24px rgba(216,138,245,.35)}
html[data-theme="dark"] #entryExperience .entry-eyebrow{color:var(--lilac);letter-spacing:.14em}
html[data-theme="dark"] #entryExperience .entry-content>p{color:#c9b8d8}
html[data-theme="dark"] #entryExperience .entry-brand span,#entryExperience .entry-footer span{color:#a58fb0}
html[data-theme="dark"] #entryExperience .entry-brand strong{color:#f7f1ff}
html[data-theme="dark"] #entryExperience .entry-card{background:rgba(38,23,58,.92);border-color:rgba(195,166,234,.32);color:var(--text)}
html[data-theme="dark"] #entryExperience .entry-card h2{color:#f7f1ff}
html[data-theme="dark"] #entryExperience .entry-card p{color:#b9a6cc}
html[data-theme="dark"] #entryExperience .entry-card small{color:#8f7ba3}
html[data-theme="dark"] #entryExperience .entry-card .entry-icon{background:linear-gradient(135deg,var(--lilac),#6b4a9e);border-color:rgba(33,7,46,.3);color:#150e1c}
html[data-theme="dark"] #entryExperience .entry-card:hover{border-color:var(--yellow);box-shadow:9px 9px 0 rgba(0,0,0,.5)}
html[data-theme="dark"] #entryExperience .entry-btn{background:rgba(255,255,255,.07);border-color:rgba(195,166,234,.42);color:#f7f1ff}
html[data-theme="dark"] #entryExperience .entry-btn.primary{background:var(--yellow);color:#21072e;border-color:var(--yellow)}
html[data-theme="dark"] #entryExperience .entry-btn:hover{transform:translateY(-2px);box-shadow:4px 4px 0 rgba(0,0,0,.4)}
html[data-theme="dark"] #entryExperience .entry-progress i{background:rgba(255,255,255,.18)}
html[data-theme="dark"] #entryExperience .entry-progress i.active{background:var(--lilac)}
html[data-theme="dark"] #entryExperience .guide-item{background:rgba(38,23,58,.9);border:1px solid rgba(195,166,234,.24);border-radius:16px}
html[data-theme="dark"] #entryExperience .guide-item h3{color:#f7f1ff}
html[data-theme="dark"] #entryExperience .guide-item p{color:#b9a6cc}
html[data-theme="dark"] #entryExperience .guide-num{color:var(--yellow);font-family:'Fraunces','Noto Serif SC',serif}
html[data-theme="dark"] #entryExperience .template-card{background:rgba(38,23,58,.92);border-color:rgba(195,166,234,.32);color:var(--text)}
html[data-theme="dark"] #entryExperience .template-card h3{color:#f7f1ff}
html[data-theme="dark"] #entryExperience .template-card p{color:#b9a6cc}
html[data-theme="dark"] #entryExperience .template-cats button{background:rgba(255,255,255,.06);border-color:rgba(195,166,234,.3);color:#c9b8d8}
html[data-theme="dark"] #entryExperience .template-cats button.active{background:var(--lilac);color:#150e1c;border-color:var(--lilac)}
html[data-theme="dark"] #entryExperience .template-results{color:#c9b8d8}

/* ===== V9.6.2 · 残留浅色全补（NAV缩略图/创建项目弹窗/答辩讲稿行/画布工具栏等） ===== */
html[data-theme="dark"] .fc-minimap{background:#1d1530}
html[data-theme="dark"] .fc-minimap .mm-canvas{background:#241a33;border-color:rgba(195,166,234,.2)}
html[data-theme="dark"] .fc-minimap .mm-page{color:#c9b8d8}
html[data-theme="dark"] .fc-minimap .mm-page:hover{background:#2a1c38}
html[data-theme="dark"] .fc-minimap .mm-label{color:#a58fb0}
html[data-theme="dark"] .defense-line{background:#251a34;border-color:var(--ink)}
html[data-theme="dark"] .defense-line.warn{background:#33202a;border-color:#ff7a8a}
html[data-theme="dark"] .defense-dot{background:#1d1530;border-color:var(--ink);color:var(--text)}
html[data-theme="dark"] .mode-switch{background:#1d1530;color:var(--text);border-color:var(--ink)}
html[data-theme="dark"] .fc-tab-row button{background:#1d1530;color:var(--text);border-color:rgba(195,166,234,.18)}
html[data-theme="dark"] .device-switch,html[data-theme="dark"] .preview-zoom-controls{background:#251a34}
html[data-theme="dark"] .device-btn,html[data-theme="dark"] .zoom-btn,html[data-theme="dark"] .zoom-value{color:#c9b8d8}
html[data-theme="dark"] .device-btn.active,html[data-theme="dark"] .zoom-btn:hover,html[data-theme="dark"] .zoom-value:hover{background:var(--yellow);color:#21072e}
html[data-theme="dark"] .canvas-preview-btn{background:#1d1530;border-color:rgba(195,166,234,.22);color:var(--text)}
html[data-theme="dark"] .hub-project{background:#1d1530;border-color:rgba(195,166,234,.16)}
html[data-theme="dark"] .hub-copy span{color:#8f7ba3}
html[data-theme="dark"] .hub-icon{background:#2a1c38}
html[data-theme="dark"] .check-card{background:#1d1530;border-color:var(--ink);box-shadow:8px 8px 0 rgba(0,0,0,.5)}
html[data-theme="dark"] .ck-item{background:#251a34;border-color:rgba(195,166,234,.16);color:#c9b8d8}
html[data-theme="dark"] .ck-item.warn{background:#33202a;border-color:#ff7a8a}
html[data-theme="dark"] .pw-body,html[data-theme="dark"] .tp-modal-body{background:#1d1530}
html[data-theme="dark"] .pw-upload-card{background:#201630;border-color:rgba(195,166,234,.18)}
html[data-theme="dark"] .pw-upload-icon{background:#2a1c38}
html[data-theme="dark"] .pw-check{background:#251a34}
html[data-theme="dark"] .tp-mini-block{background:#251a34;border-color:rgba(195,166,234,.12);color:#c9b8d8}
html[data-theme="dark"] .tp-tags span,html[data-theme="dark"] .template-tags span{background:#2a1c38;color:#c9b8d8}
html[data-theme="dark"] .modal p,html[data-theme="dark"] .tp-info-block p,html[data-theme="dark"] .pw-upload-card p,html[data-theme="dark"] .pw-check p,html[data-theme="dark"] .hub-empty{color:#b9a6cc}
html[data-theme="dark"] .pw-stepper{color:#8f7ba3}
html[data-theme="dark"] .pw-stepper span.active{color:var(--text)}
html[data-theme="dark"] .pw-stepper i{background:rgba(195,166,234,.25)}
html[data-theme="dark"] .tp-modal-head,html[data-theme="dark"] .pw-head{border-bottom-color:rgba(195,166,234,.16)}
html[data-theme="dark"] .tp-modal-head p,html[data-theme="dark"] .pw-head p{color:#b9a6cc}
html[data-theme="dark"] .template-cat{color:#c9b8d8}
html[data-theme="dark"] .template-cat.active{background:#2a1c38;color:var(--text)}
html[data-theme="dark"] .crumb-projects{color:#c9b8d8}
html[data-theme="dark"] .crumb-projects:hover{background:#2a1c38;color:var(--text)}
html[data-theme="dark"] .modal-eyebrow{color:var(--lilac)}
html[data-theme="dark"] .asset-upload,html[data-theme="dark"] .asset-empty{background:#201630;border-color:rgba(195,166,234,.16);color:#c9b8d8}
html[data-theme="dark"] .asset-card{background:#251a34;border-color:rgba(195,166,234,.12)}
html[data-theme="dark"] .asset-name{color:#c9b8d8}
html[data-theme="dark"] .image-panel{background:#201630;border-color:rgba(195,166,234,.1)}
html[data-theme="dark"] .image-placeholder{background:#251a34;border-color:rgba(195,166,234,.2);color:#a58fb0}
html[data-theme="dark"] .mini-input{background:#2a1c38;border-color:rgba(195,166,234,.16);color:var(--text)}
html[data-theme="dark"] .color-swatch{background:#251a34;border-color:rgba(195,166,234,.2)}

/* ===== V9.6.4 · 模板编辑器深色 ===== */
html[data-theme="dark"] .ts-template-list{background:#1d1530;border-color:rgba(195,166,234,.16)}
html[data-theme="dark"] .ts-template{color:#c9b8d8}
html[data-theme="dark"] .ts-template:hover{background:#2a1c38}
html[data-theme="dark"] .ts-template.active{background:var(--yellow);color:#21072e;border-color:var(--yellow)}
html[data-theme="dark"] .ts-category-title{color:#8f7ba3}
html[data-theme="dark"] .ts-head{border-bottom-color:rgba(195,166,234,.16)}
html[data-theme="dark"] .ts-head p{color:#b9a6cc}
html[data-theme="dark"] .ts-section-row{background:#201630;border-color:rgba(195,166,234,.18)}
html[data-theme="dark"] .ts-note{background:#201630;border-color:rgba(195,166,234,.16);color:#b9a6cc}
html[data-theme="dark"] .ts-note b{color:var(--text)}
html[data-theme="dark"] .ts-plan-head p{color:#b9a6cc}
html[data-theme="dark"] .ts-theme,html[data-theme="dark"] .ts-plan{border-top-color:rgba(195,166,234,.16)}

/* ===== 侧栏拖拽调宽 + 折叠（V9.7） ===== */
/* V9.7.2: display:flex 覆盖已移除，统一使用 5 列 grid */
.sidebar.left-sidebar,.inspector{flex:none;transition:width .18s ease}
.sidebar.left-sidebar{width:220px}
.sidebar.left-sidebar.collapsed{width:52px}
.inspector.collapsed{width:52px}
.panel-fold{display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--ink);background:var(--white);border-radius:7px;font-size:10px;color:var(--ink);margin-left:auto;padding:0}
.panel-fold:hover{background:var(--soft)}
html[data-theme="dark"] .panel-fold{background:#2a1c38;border-color:var(--yellow);color:#efe6f5}
.inspector{width:320px}
.resizer{width:6px;cursor:col-resize;flex:none;position:relative;z-index:6;background:transparent;transition:background .15s}
.resizer:hover,.resizer.active{background:rgba(156,67,200,.28)}
.resizer:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(33,7,46,.15)}
html[data-theme="dark"] .resizer:after{background:rgba(255,255,255,.12)}
.panel-fold{width:26px;height:26px;border:1.5px solid var(--ink);background:var(--white);border-radius:8px;color:var(--ink);font-size:11px;line-height:1;display:grid;place-items:center;margin-left:auto;flex:none;transition:transform .18s,background .15s}
.side-heading{display:flex;align-items:center;justify-content:space-between}
.panel-fold:hover{background:var(--yellow);transform:rotate(180deg)}
.panel-fold.fold-right{height:30px;width:30px}
.sidebar.left-sidebar.collapsed{width:52px;padding-left:8px;padding-right:8px}
.sidebar.left-sidebar.collapsed>*{display:none}
.sidebar.left-sidebar.collapsed .side-heading{display:flex;justify-content:center;margin-bottom:0}
.sidebar.left-sidebar.collapsed .side-heading span{display:none}
.inspector.collapsed{width:52px;overflow:visible}
.inspector.collapsed #inspectorBody{display:none}
.inspector.collapsed .inspector-tabs{display:none}
.toolbar-sep{width:1px;height:24px;background:rgba(33,7,46,.18);flex:none}
.toolbar-btn{height:32px;min-width:34px;border:1px solid #dfe2df;background:#fff;border-radius:8px;color:#252925;font-size:14px;display:grid;place-items:center;padding:0 8px;transition:background .15s,transform .12s}
.toolbar-btn:hover{background:#f4f0e8;transform:translateY(-1px)}
html[data-theme="dark"] .toolbar-btn{background:#241d31;border-color:#3a3049;color:#efe6f5}
html[data-theme="dark"] .toolbar-sep{background:rgba(255,255,255,.14)}
.phone-stage{transform:scale(var(--preview-scale,1)) translate(var(--stage-dx,0px),var(--stage-dy,0px))}

/* ===== V9.7 · 子图层 + 绘图工具 ===== */
.layer-subs{flex-basis:100%;flex-direction:column;gap:4px;margin-top:6px;padding-left:22px}
.layer-sub{display:flex;align-items:center;gap:7px;border:1px dashed #d9dcd8;background:#fafbf9;border-radius:8px;padding:6px 8px;font-size:10px;color:#5c625d;text-align:left;transition:border-color .15s,background .15s}
.layer-sub:hover{border-color:#9c43c8;background:#faf4fd}
.layer-sub.active{border-style:solid;border-color:#21072e;background:var(--yellow);color:var(--ink);font-weight:700}
.layer-sub i{width:7px;height:7px;border-radius:50%;background:#9c43c8;flex:none}
.layer-sub em{font-style:normal;font-size:9px;color:#9c43c8}
html[data-theme="dark"] .layer-sub{background:#221a2e;border-color:#3a3049;color:#cbb9dd}
html[data-theme="dark"] .layer-sub.active{background:#3a2c54;border-color:#efe6f5;color:#efe6f5}
.draw-modal{width:600px;max-width:94vw}
.draw-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.draw-tool{height:30px;padding:0 10px;border:1.5px solid var(--ink);background:var(--white);border-radius:8px;font-size:11px;color:var(--ink);font-weight:600;box-shadow:2px 2px 0 rgba(33,7,46,.25);transition:transform .12s,background .15s}
.draw-tool:hover{background:var(--soft)}
.draw-tool.active{background:var(--ink);color:var(--cream)}
.draw-tool.fill-btn.active{background:var(--yellow);color:var(--ink)}
.draw-opts{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:8px 0}
.draw-opts label{display:flex;align-items:center;gap:6px;font-size:11px;color:#5c625d}
.draw-opts input[type="color"]{width:34px;height:28px;border:1px solid #dfe2df;border-radius:7px;padding:2px;background:#fff}
.draw-opts input[type="range"]{width:90px}
.draw-stage{width:100%;height:auto;background:#fff;border:1.5px dashed #d9dcd8;border-radius:12px;overflow:hidden;touch-action:none}
.draw-stage canvas{display:block;width:100%;height:auto;cursor:crosshair}
html[data-theme="dark"] .draw-modal{background:#1c1526;border-color:#3a3049;color:#efe6f5}
html[data-theme="dark"] .draw-modal .hint{color:#a893be}
html[data-theme="dark"] .draw-stage{border-color:#3a3049;background:#14101b}

/* 横向禁滚（安全边界双保险） */
.fc-scroll{overflow-x:hidden}

/* ===== V9.7.2 · resizer 拖拽轨道 + 侧栏折叠图标化（V9.8.22 起宽度固定，禁止拖拽） ===== */
.resizer{position:relative;cursor:default;background:transparent;z-index:8;pointer-events:none}
.resizer:after{content:"";position:absolute;top:50%;left:50%;width:3px;height:46px;transform:translate(-50%,-50%);border-radius:99px;background:rgba(33,7,46,.20);opacity:0;transition:opacity .15s,background .15s}
.resizer:hover:after,.resizer.active:after{opacity:1}
.resizer.active:after{background:var(--lilac)}
.panel-fold{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--ink);background:var(--white);color:var(--ink);font-size:11px;cursor:pointer;display:grid;place-items:center;flex:none}
.panel-fold:hover{background:var(--soft)}
.fold-right{margin:0 0 0 auto}
.left-sidebar.collapsed{padding:14px 7px;align-items:center}
.left-sidebar.collapsed .side-heading span,
.left-sidebar.collapsed .project-copy,
.left-sidebar.collapsed .project-switch-row,
.left-sidebar.collapsed .workspace-project-copy,
.left-sidebar.collapsed .workspace-project-dot,
.left-sidebar.collapsed .page-page-copy,
.left-sidebar.collapsed .page-delete,
.left-sidebar.collapsed .add-page,
.left-sidebar.collapsed .tip-card p,
.left-sidebar.collapsed .tip-title span,
.left-sidebar.collapsed .side-footer,
.left-sidebar.collapsed .style-list span,
.left-sidebar.collapsed .page-heading,
.left-sidebar.collapsed .style-heading{display:none}
.left-sidebar.collapsed .project-card{padding:6px;justify-content:center;width:100%}
.left-sidebar.collapsed .project-avatar{margin:0}
.left-sidebar.collapsed .workspace-project{grid-template-columns:26px;justify-content:center;padding:6px 0}
.left-sidebar.collapsed .workspace-project-icon{margin:0 auto}
.left-sidebar.collapsed .page-link{height:44px;padding:4px;justify-content:center}
.left-sidebar.collapsed .page-thumb{width:34px;height:42px}
.left-sidebar.collapsed .side-link{justify-content:center;padding:0;width:38px}
.left-sidebar.collapsed .tip-card{padding:8px 6px;text-align:center}
.left-sidebar.collapsed .panel-fold{margin:0 auto}
.left-sidebar.collapsed .workspace-project-list{max-height:none}
.inspector.collapsed{overflow:hidden}
.inspector.collapsed .inspector-tabs{flex-direction:column;height:auto;min-height:100%;width:52px;gap:6px;padding:12px 0;align-items:center}
.inspector.collapsed .inspector-tab{width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:0}
.inspector.collapsed .inspector-tab:nth-child(1):before{content:"▤";font-size:15px}
.inspector.collapsed .inspector-tab:nth-child(2):before{content:"◆";font-size:15px}
.inspector.collapsed .inspector-tab:nth-child(3):before{content:"⚙";font-size:15px}
.inspector.collapsed .inspector-tab:nth-child(4):before{content:"▦";font-size:15px}
.inspector.collapsed .inspector-tab.active:after{display:none}
.inspector.collapsed #inspectorBody,
.inspector.collapsed .panel-fold{display:grid}
html[data-theme="dark"] .resizer:after{background:rgba(195,166,234,.3)}
html[data-theme="dark"] .resizer.active:after{background:var(--lilac)}
html[data-theme="dark"] .fc-tag{background:var(--lilac);border-color:var(--lilac);color:#150e1c}
html[data-theme="dark"] .ic-btn.on{background:var(--lilac);border-color:var(--lilac);color:#150e1c}

/* ===== V9.7.3 · 顶栏修长化（功能不变，纯视觉瘦身） ===== */
.canvas-toolbar{gap:7px;padding:6px 10px}
.canvas-context strong{font-size:11px}
.canvas-context span{font-size:7px;padding:3px 6px}
.mode-switch{font-size:10px;padding:3px 10px;border-width:1.5px}
.ai-gen-btn{height:25px;padding:0 10px;font-size:10px;margin:0 4px;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.3)}
.demo-btn{font-size:10px;padding:3px 8px;border-width:1.5px;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.25)}
.device-switch{padding:2px;border-radius:7px}
.device-btn{height:22px;padding:0 7px;font-size:9px;border-radius:5px}
.preview-zoom-controls{padding:2px;border-radius:7px}
.zoom-btn{height:22px;width:22px;font-size:13px;border-radius:5px}
.zoom-value{height:22px;min-width:38px;padding:0 5px;font-size:9px;border-radius:5px}
.canvas-preview-btn{height:26px;padding:0 12px;font-size:9px}
.toolbar-btn{height:26px;min-width:30px;font-size:13px;padding:0 7px}
.toolbar-grip{width:22px;height:24px;font-size:13px}
.toolbar-sep{height:18px}
html[data-theme="dark"] .canvas-toolbar{background:rgba(29,21,48,.92)}

/* ===== V9.7.6 · 深色模式色彩丰富 + 可读性 ===== */
html[data-theme="dark"] .topbar{background:linear-gradient(180deg,rgba(42,26,56,.96),rgba(29,21,48,.94));border-bottom:1px solid rgba(195,166,234,.25)}
html[data-theme="dark"] .breadcrumb strong{color:#fff}
html[data-theme="dark"] .breadcrumb span{color:#c9b8d8}
html[data-theme="dark"] .top-btn{background:#251a34;border-color:rgba(195,166,234,.4);color:#efe6f5}
html[data-theme="dark"] .top-btn:hover{background:#33244a;border-color:var(--lilac);color:#fff}
html[data-theme="dark"] .top-btn.publish{background:linear-gradient(135deg,#e9a8f7,#b06ae0);border-color:#e9a8f7;color:#150e1c}
html[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#1d1530,#180f26)}
html[data-theme="dark"] .inspector{background:linear-gradient(180deg,#1d1530,#180f26)}
html[data-theme="dark"] .side-heading{color:#c9a0ef}
html[data-theme="dark"] .workspace-project{border-color:rgba(195,166,234,.14)}
html[data-theme="dark"] .workspace-project:hover{background:rgba(216,138,245,.12);border-color:rgba(216,138,245,.42)}
html[data-theme="dark"] .workspace-project.active{background:linear-gradient(90deg,rgba(216,138,245,.34),rgba(216,138,245,.12));border-color:#e9a8f7;color:#fff;box-shadow:2px 2px 0 rgba(0,0,0,.45)}
html[data-theme="dark"] .workspace-project.active strong{color:#fff}
html[data-theme="dark"] .workspace-project.active small{color:#f0dcfb}
html[data-theme="dark"] .workspace-project-icon{background:rgba(216,138,245,.16);border-color:#c3a6ea;color:#f0dcfb}
html[data-theme="dark"] .workspace-project-copy strong{color:#e6d8f4}
html[data-theme="dark"] .page-link:hover{background:rgba(216,138,245,.12);border-color:rgba(216,138,245,.38)}
html[data-theme="dark"] .page-link.active{background:linear-gradient(90deg,rgba(216,138,245,.34),rgba(216,138,245,.12));border-color:#e9a8f7;color:#fff;box-shadow:2px 2px 0 rgba(0,0,0,.4)}
html[data-theme="dark"] .page-label{color:#e0d2f0}
html[data-theme="dark"] .page-link.active .page-label{color:#fff}
html[data-theme="dark"] .page-link small{color:#a58fb0}
html[data-theme="dark"] .page-thumb{background:#241a33;border-color:rgba(195,166,234,.3)}
html[data-theme="dark"] .side-link{color:#d8c8ec}
html[data-theme="dark"] .side-link:hover{background:rgba(216,138,245,.14);color:#fff;border-color:rgba(216,138,245,.42)}
html[data-theme="dark"] .side-link span{color:#c9a0ef}
html[data-theme="dark"] .tpl-btn{background:rgba(216,138,245,.12);border:1px solid rgba(216,138,245,.4);color:#e6d8f4;box-shadow:1.5px 1.5px 0 rgba(0,0,0,.35)}
html[data-theme="dark"] .tpl-btn:hover{background:rgba(216,138,245,.28);color:#fff;border-color:var(--lilac)}
html[data-theme="dark"] .add-page{border-color:rgba(216,138,245,.45);color:#d5c3ea}
html[data-theme="dark"] .add-page:hover{background:rgba(216,138,245,.16);color:#fff}
html[data-theme="dark"] .project-switch-btn{border-color:#c3a6ea;color:#e6d8f4;background:#251a34}
html[data-theme="dark"] .project-switch-btn:hover{background:rgba(216,138,245,.14)}
html[data-theme="dark"] .project-switch-btn.primary{background:linear-gradient(135deg,#e9a8f7,#b06ae0);color:#150e1c;border-color:#e9a8f7}
html[data-theme="dark"] .canvas-toolbar{background:rgba(38,23,58,.92);border-color:#6b4a9e;box-shadow:4px 4px 0 rgba(0,0,0,.45)}
html[data-theme="dark"] .mode-switch{background:#2a1c38;color:#e6d8f4;border-color:#c3a6ea}
html[data-theme="dark"] .mode-switch:hover{background:rgba(216,138,245,.16);border-color:var(--lilac);color:#fff}
html[data-theme="dark"] .mode-switch.on{background:linear-gradient(135deg,#e9a8f7,#b06ae0);border-color:#e9a8f7;color:#150e1c}
html[data-theme="dark"] .device-switch{background:#241a33;border:1px solid rgba(195,166,234,.22)}
html[data-theme="dark"] .device-btn{color:#b9a6cc}
html[data-theme="dark"] .device-btn:hover{color:#fff;background:rgba(216,138,245,.16)}
html[data-theme="dark"] .device-btn.active{background:linear-gradient(135deg,#e9a8f7,#b06ae0);color:#150e1c;font-weight:700}
html[data-theme="dark"] .preview-zoom-controls{background:#241a33;border:1px solid rgba(195,166,234,.22)}
html[data-theme="dark"] .zoom-btn,html[data-theme="dark"] .zoom-value{color:#b9a6cc}
html[data-theme="dark"] .zoom-btn:hover,html[data-theme="dark"] .zoom-value:hover{background:linear-gradient(135deg,#e9a8f7,#b06ae0);color:#150e1c}
html[data-theme="dark"] .canvas-preview-btn{background:linear-gradient(135deg,#e9a8f7,#b06ae0);border-color:#e9a8f7;color:#150e1c;box-shadow:2px 2px 0 rgba(0,0,0,.4)}
html[data-theme="dark"] .canvas-preview-btn:hover{background:linear-gradient(135deg,#f4c6fb,#c37ef0)}
html[data-theme="dark"] #entryExperience .entry-card h2{color:#fff}
html[data-theme="dark"] #entryExperience .entry-card p{color:#d8c8ec}
html[data-theme="dark"] #entryExperience .entry-card small{color:#c9a0ef}
html[data-theme="dark"] #entryExperience .entry-card .entry-icon{background:rgba(216,138,245,.14);border:1px solid rgba(216,138,245,.55);color:#f4c6fb;box-shadow:none}
html[data-theme="dark"] .pw-stepper{color:#a58fb0;border-color:rgba(195,166,234,.28)}
html[data-theme="dark"] .pw-stepper span.active{color:#fff}
html[data-theme="dark"] .pw-stepper i{background:rgba(195,166,234,.3)}
html[data-theme="dark"] .pw-upload-card{background:#251a34;border-color:rgba(216,138,245,.45)}
html[data-theme="dark"] .pw-upload-card:hover{border-color:var(--lilac)}
html[data-theme="dark"] .pw-upload-icon{background:rgba(216,138,245,.18)}
html[data-theme="dark"] .pw-check{background:#2a1c38;border:1px solid rgba(195,166,234,.22)}

/* ===== V9.7.7 · 导览卡片透明化 + 工具栏分离 + 画布圆点增强 ===== */
html[data-theme="dark"] #entryExperience .entry-card{background:rgba(24,15,38,.4);border:1px solid rgba(195,166,234,.42);backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(0,0,0,.35)}
html[data-theme="dark"] #entryExperience .entry-card:hover{border-color:#e9a8f7;background:rgba(42,26,56,.55);transform:translateY(-2px)}
html[data-theme="dark"] #entryExperience .entry-card h2{color:#fff}
html[data-theme="dark"] #entryExperience .entry-card p{color:#d8c8ec}
html[data-theme="dark"] #entryExperience .entry-card small{color:#c9a0ef}
html[data-theme="dark"] .canvas-toolbar{background:rgba(20,12,30,.96);border:1.5px solid rgba(216,138,245,.5);box-shadow:4px 4px 0 rgba(0,0,0,.5)}
html[data-theme="dark"] .mode-switch{background:#251a34;color:#fff;border:2px solid #c3a6ea}
html[data-theme="dark"] .mode-switch:hover{background:rgba(216,138,245,.22);border-color:#f4c6fb;color:#fff}
html[data-theme="dark"] .mode-switch.on{background:linear-gradient(135deg,#e9a8f7,#b06ae0);border-color:#f4c6fb;color:#150e1c}
html[data-theme="dark"] .device-switch{background:#180f26;border:1px solid rgba(216,138,245,.4)}
html[data-theme="dark"] .device-btn{color:#d8c8ec}
html[data-theme="dark"] .device-btn:hover{color:#fff;background:rgba(216,138,245,.2)}
html[data-theme="dark"] .device-btn.active{background:linear-gradient(135deg,#e9a8f7,#b06ae0);color:#150e1c;font-weight:700}
html[data-theme="dark"] .preview-zoom-controls{background:#180f26;border:1px solid rgba(216,138,245,.4)}
html[data-theme="dark"] .zoom-btn,html[data-theme="dark"] .zoom-value{color:#d8c8ec}
html[data-theme="dark"] .zoom-btn:hover,html[data-theme="dark"] .zoom-value:hover{background:linear-gradient(135deg,#e9a8f7,#b06ae0);color:#150e1c}
html[data-theme="dark"] .canvas-preview-btn{background:linear-gradient(135deg,#e9a8f7,#b06ae0);border:1.5px solid #f4c6fb;color:#150e1c;box-shadow:2px 2px 0 rgba(0,0,0,.45)}

/* ===== V9.7.10 · 创建项目弹窗深色补全 ===== */
html[data-theme="dark"] .pw-guide{background:#251a34;border:1px solid rgba(216,138,245,.3)}
html[data-theme="dark"] .pw-guide strong{color:#fff}
html[data-theme="dark"] .pw-guide p{color:#b9a6cc}
html[data-theme="dark"] .pw-stepper i{background:rgba(195,166,234,.3)}
html[data-theme="dark"] .pw-upload-card>span{color:#b9a6cc}


/* ===== DC 设置中心：设备 Pro / 显示模式 / 性能模式 ===== */
.phone-stage[data-device="pro"] .phone{width:360px;height:780px;border-radius:50px}
.phone-stage[data-device="pro"] .phone-screen{border-radius:43px}
.phone-stage[data-device="pro"] .phone-shadow{width:350px}
/* 显示模式：无边框 bare */
.phone-stage[data-frame="bare"] .dynamic-island,
.phone-stage[data-frame="bare"] .camera-dot,
.phone-stage[data-frame="bare"] .volume,
.phone-stage[data-frame="bare"] .power,
.phone-stage[data-frame="bare"] .phone-shadow{display:none}
.phone-stage[data-frame="bare"] .phone{background:#f6f7f8;box-shadow:0 0 0 1px rgba(33,7,46,.14),0 18px 50px rgba(33,7,46,.10);border-radius:38px}
.phone-stage[data-frame="bare"] .phone-screen{border-radius:30px;box-shadow:none}
/* 显示模式：沉浸 immersive */
.phone-stage[data-frame="immersive"] .dynamic-island,
.phone-stage[data-frame="immersive"] .camera-dot,
.phone-stage[data-frame="immersive"] .volume,
.phone-stage[data-frame="immersive"] .power,
.phone-stage[data-frame="immersive"] .phone-shadow{display:none}
.phone-stage[data-frame="immersive"] .phone{background:transparent;box-shadow:0 14px 46px rgba(33,7,46,.14);border-radius:30px;padding:0}
.phone-stage[data-frame="immersive"] .phone-screen{inset:0;border-radius:26px;box-shadow:inset 0 0 0 1px rgba(33,7,46,.1)}
/* 性能模式：编辑器侧关闭重特效 */
html.dc-perf *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important}
html.dc-perf .phone-shadow{display:none!important}
html.dc-perf .phone,.html.dc-perf .phone-stage{animation:none!important;transition:none!important}
html.dc-perf .canvas-toolbar{box-shadow:none!important}

/* V9.8.16 · 组件设计（Premium） */
.premium-btn{background:linear-gradient(135deg,#fff7d6,#ffe8bd);border:1.5px solid #e8a33d;color:#7a4a00;box-shadow:2px 2px 0 rgba(232,163,61,.35)}
.premium-btn:hover{background:linear-gradient(135deg,#fff3c4,#ffdd9e)}
.premium-tag{display:inline-block;font-family:'DM Mono','Noto Sans SC',monospace;font-size:8px;letter-spacing:1px;background:linear-gradient(135deg,#f4ef51,#ffb25e);color:#21072e;border-radius:999px;padding:2px 8px;font-weight:800;vertical-align:middle;box-shadow:0 1px 4px rgba(33,7,46,.18)}
.asset-pick-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.asset-pick{width:44px;height:44px;border:1.5px solid #e2ddd6;border-radius:9px;background:#fff;overflow:hidden;padding:0;cursor:pointer}
.asset-pick img{width:100%;height:100%;object-fit:cover;display:block}
.asset-pick:hover{border-color:var(--blue,#9c43c8)}

.dc-d-wrap{position:relative;box-sizing:border-box}
.dc-d-title{margin:0;word-break:break-word}
.dc-d-text{margin:0;word-break:break-word}
.dc-d-btn{margin:0}
.dc-d-btn .dc-btn{margin-top:4px}
.dc-d-img{display:block;max-width:100%}

/* V9.8.17 · 组件工坊（独立组件画布） */
#wsOverlay{position:fixed;inset:0;z-index:6000;display:none;flex-direction:column;background:#f8eee6}
#wsOverlay.open{display:flex}
.ws-topbar{height:52px;background:#21072e;color:#f8eee6;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:2px solid #e8568f}
.ws-brand{font-weight:800;font-size:13px;letter-spacing:.4px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.ws-brand small{font-weight:400;font-size:9px;color:#d88af5;letter-spacing:.1em}
.ws-tabs{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;padding:0 6px}
.ws-tab{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid rgba(216,138,245,.45);border-radius:9px;background:rgba(216,138,245,.12);color:#e6d8f4;font-size:11px;white-space:nowrap;cursor:pointer;transition:background .15s}
.ws-tab.active{background:linear-gradient(135deg,#f4ef51,#ffb25e);border-color:#f4ef51;color:#21072e;font-weight:700}
.ws-tab b{font-weight:700}
.ws-tab .ws-x{opacity:.6;font-size:10px;padding:0 2px}
.ws-tab .ws-x:hover{opacity:1}
.ws-tab-add{width:30px;height:30px;border:1px dashed rgba(216,138,245,.5);border-radius:9px;background:transparent;color:#d88af5;font-size:16px;flex:none;cursor:pointer}
.ws-tab-add:hover{background:rgba(216,138,245,.15)}
.ws-actions{display:flex;gap:6px;flex:none}
.ws-btn{height:30px;padding:0 12px;border:1.5px solid #f4ef51;border-radius:9px;background:transparent;color:#f4ef51;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap}
.ws-btn.solid{background:#f4ef51;color:#21072e;border-color:#f4ef51}
.ws-btn.dark{background:#0d0418;border-color:#0d0418;color:#f8eee6}
.ws-btn:hover{transform:translateY(-1px)}
.ws-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0}
.ws-canvas{display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% 0%,#3b1a52 0%,#21072e 55%,#150422 100%);padding:36px;overflow:auto}
.ws-stage{width:min(430px,100%);border-radius:26px;border:10px solid #f8eee6;background:#f8eee6;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.ws-stage .dc-d-wrap{width:100%}
.ws-stage-tag{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.3em;color:rgba(248,238,230,.55);text-transform:uppercase}
.ws-panel{background:#fffdf9;border-left:1px solid rgba(33,7,46,.16);overflow:auto;padding-bottom:20px}
.ws-panel .panel-section{border-bottom:1.5px solid rgba(33,7,46,.12)}
.ws-hint{font-size:10px;color:#8d7a94;line-height:1.7;margin:0 0 10px}
@media(max-width:900px){.ws-body{grid-template-columns:1fr}.ws-panel{border-left:0;border-top:1px solid rgba(33,7,46,.16);max-height:45vh}.ws-actions .ws-btn.hide-sm{display:none}}

/* V9.8.18 · 组件工坊接入样式 */
.comp-wrap{position:relative;padding-top:6px}
.comp-edit{position:absolute;top:2px;right:2px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:13px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:1px 1px 0 rgba(33,7,46,.3);z-index:3;opacity:.85;transition:opacity .15s,transform .12s}
.comp-wrap:hover .comp-edit{opacity:1}
.comp-edit:hover{transform:scale(1.14)}
.comp-design-hint{display:block;margin-top:7px;padding:4px 0 2px;border-top:1px dashed #e8d9c8;color:#a05bc0;font-size:9px;font-style:normal;font-weight:600;text-align:center;letter-spacing:.4px}
.component-btn:hover .comp-design-hint{color:#7a2f9e}
.custom-comp-list{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.custom-comp{display:flex;gap:5px;align-items:center}
.custom-add{flex:1;height:34px;border:1.5px solid #e8a33d;border-radius:9px;background:linear-gradient(135deg,#fff7d6,#ffe8bd);color:#7a4a00;font-size:11px;font-weight:600;text-align:left;padding:0 10px;cursor:pointer}
.custom-add:hover{background:linear-gradient(135deg,#fff3c4,#ffdd9e)}
.custom-del{width:26px;height:26px;border:1px solid rgba(197,61,77,.4);border-radius:8px;background:#fff;color:#c53d4d;font-size:12px;cursor:pointer;flex:none}
.ws-new-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.ws-new-item{height:64px;border:1.5px solid var(--ink);border-radius:11px;background:var(--cream);font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}
.ws-new-item small{font-size:9px;font-weight:400;color:#8d7a94}
.ws-new-item:hover{background:var(--yellow);transform:translateY(-1px)}

/* V9.8.19 · 组件设计铺满画布 */
.fc-hero,.fc-button,.fc-contact,.fc-text,.fc-image{min-height:0}
.fc-hero .dc-d-wrap,.fc-button .dc-d-wrap,.fc-contact .dc-d-wrap,.fc-text .dc-d-wrap,.fc-image .dc-d-wrap{width:100%;height:100%}

/* V9.8.20 · 工坊返回编辑器按钮 */
.ws-back{height:28px;padding:0 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--cream);color:var(--ink);font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;margin-left:10px;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.3);transition:transform .12s,background .15s}
.ws-back:hover{background:var(--yellow);transform:translateY(-1px)}
@media(max-width:900px){.ws-back{margin-left:6px;padding:0 8px;font-size:10px}}

/* V9.8.21 · 编辑器⇄工坊标签栏（深浅色自适应） */
.ws-tabbar{height:42px;background:var(--panel,#fffdf9);border-bottom:1.5px solid var(--line);display:flex;align-items:stretch;padding:0 8px;gap:6px;position:relative;z-index:6100}
.ws-tabbar .wt-tab{flex:1;min-width:0;max-width:9999px;height:30px;margin:6px 0;border:1.5px solid rgba(156,67,200,.35);border-radius:9px;background:rgba(156,67,200,.07);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,transform .12s,box-shadow .15s;position:relative;white-space:nowrap;overflow:hidden}
.ws-tabbar .wt-tab .wt-x{margin-left:auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:inherit;opacity:.6;flex:none}
.ws-tabbar .wt-tab .wt-x:hover{opacity:1;background:rgba(197,61,77,.18);color:#c53d4d}
.ws-tabbar .wt-tab.active{background:var(--yellow);color:#21072e;border-color:#21072e;box-shadow:2px 2px 0 rgba(33,7,46,.55)}
.ws-tabbar .wt-tab.active .wt-x:hover{background:rgba(197,61,77,.22);color:#21072e}
.ws-tabbar .wt-tab.editor{background:rgba(156,67,200,.14);border-color:rgba(156,67,200,.45)}
.ws-tabbar .wt-tab.editor.active{background:var(--lilac);color:#21072e;border-color:#21072e}
.ws-tabbar .wt-add{width:34px;height:30px;margin:6px 0;border:1.5px dashed rgba(156,67,200,.5);border-radius:9px;background:transparent;color:#9c43c8;font-size:15px;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s}
.ws-tabbar .wt-add:hover{background:rgba(156,67,200,.10);border-style:solid}
.ws-tabbar .wt-tab .wt-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme="dark"] .ws-tabbar{background:#1d1530;border-bottom-color:rgba(195,166,234,.2)}
html[data-theme="dark"] .ws-tabbar .wt-tab{background:rgba(195,166,234,.10);border-color:rgba(195,166,234,.28);color:#e9dcf3}
html[data-theme="dark"] .ws-tabbar .wt-tab .wt-x{color:#e9dcf3}
html[data-theme="dark"] .ws-tabbar .wt-tab.active,html[data-theme="dark"] .ws-tabbar .wt-tab.editor.active{color:#fff;background:rgba(216,138,245,.22);border-color:#d88af5;box-shadow:2px 2px 0 rgba(0,0,0,.45)}
html[data-theme="dark"] .ws-tabbar .wt-add{border-color:rgba(195,166,234,.4)}
/* 工坊内容区下移（标签栏占用 42px） */
.app-shell{height:calc(100vh - 112px)}
#wsOverlay{top:calc(70px + 42px)}
#wsOverlay .ws-topbar{padding:0 14px;height:52px}
@media(max-width:900px){.ws-tabbar{padding:0 5px;gap:4px}.ws-tabbar .wt-tab{font-size:10px}.ws-tabbar .wt-add{width:30px}}
/* V9.8.22 · 侧栏固定宽度 + 右面板边距 + 折叠按钮浮动 */
.inspector{padding-top:10px}
.inspector.collapsed{padding-top:0}
.fold-right{position:absolute;top:12px;right:8px;z-index:6;height:30px;width:30px;border:1.5px solid var(--ink);border-radius:9px;background:var(--cream);color:var(--ink-70);display:grid;place-items:center;cursor:pointer;font-size:12px;flex:none;transition:background .15s,transform .12s;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.22)}
.fold-right:hover{background:var(--yellow);transform:translateY(-1px)}
.inspector{position:relative}
html[data-theme="dark"] .fold-right{background:var(--soft);color:var(--text)}
/* V9.8.23 · 折叠态图标 + 左侧板块分隔线 */
.side-icons,.insp-icons{display:none}
.sidebar.left-sidebar.collapsed .side-icons{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:16px}
.inspector.collapsed .insp-icons{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:52px}
.inp-ic{width:32px;height:32px;border:1.5px solid var(--ink);background:var(--white);border-radius:10px;color:var(--ink);font-size:14px;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s,transform .12s;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.22)}
.inp-ic:hover{background:var(--yellow);transform:translateY(-1px)}
html[data-theme="dark"] .inp-ic{background:var(--soft);color:var(--text)}
html[data-theme="dark"] .inp-ic:hover{background:var(--lilac);color:var(--ink)}
/* 左侧板块分隔线 */
.page-heading{border-top:1.5px dashed rgba(33,7,46,.18);padding-top:22px;margin-top:26px}
.style-heading{border-top:1.5px dashed rgba(33,7,46,.18);padding-top:22px;margin-top:26px}
html[data-theme="dark"] .page-heading,html[data-theme="dark"] .style-heading{border-top-color:rgba(195,166,234,.18)}
/* 折叠态内容彻底隐藏（防止文字/标尺透出） */
.inspector.collapsed #inspectorBody{display:none!important}
.inspector.collapsed .inspector-tabs{display:none!important}
/* V9.8.24 · 组件工坊主题化（浅色=奶油工作台 / 深色=深紫沉浸） */
#wsOverlay{background:var(--bg,#f8eee6)}
.ws-topbar{background:var(--panel,#fffdf9);color:var(--ink,#21072e);border-bottom:2px solid #e8568f}
.ws-brand small{color:#9c43c8}
.ws-btn{height:30px;padding:0 12px;border:1.5px solid var(--ink);border-radius:9px;background:var(--white);color:var(--ink);font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.25);transition:background .15s,transform .12s}
.ws-btn.solid{background:var(--yellow);color:#21072e;border-color:var(--ink)}
.ws-btn.dark{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.ws-canvas{background:radial-gradient(rgba(156,67,200,.20) 1.5px,transparent 1.7px) 0 0/24px 24px,linear-gradient(180deg,#faf7f3,#f0eae3);padding:36px;overflow:auto}
.ws-stage{border:10px solid var(--ink);background:var(--white);box-shadow:0 30px 80px rgba(33,7,46,.35);overflow:hidden}
.ws-stage-tag{color:var(--muted,#8d7a94)}
.ws-panel{background:var(--panel,#fffdf9);border-left:1px solid var(--line)}
.ws-panel .panel-section{border-bottom:1.5px solid var(--line)}
html[data-theme="dark"] #wsOverlay{background:#150e1c}
html[data-theme="dark"] .ws-topbar{background:#1d1530;color:#f3e9f6;border-bottom-color:#e8568f}
html[data-theme="dark"] .ws-brand small{color:#d88af5}
html[data-theme="dark"] .ws-canvas{background:radial-gradient(circle,rgba(216,138,245,.22) 1.6px,transparent 1.8px) 0 0/26px 26px,radial-gradient(1200px 600px at 50% 0%,#3b1a52 0%,#21072e 55%,#150422 100%)}
html[data-theme="dark"] .ws-stage{border-color:#150e1c;background:#1d1530}
html[data-theme="dark"] .ws-stage-tag{color:rgba(248,238,230,.55)}
html[data-theme="dark"] .ws-panel{background:#1d1530;border-left-color:rgba(195,166,234,.16)}
html[data-theme="dark"] .ws-panel .panel-section{border-bottom-color:rgba(195,166,234,.12)}
html[data-theme="dark"] .ws-btn{background:#2a1c38;border-color:var(--yellow);color:#f3e9f6;box-shadow:none}
html[data-theme="dark"] .ws-btn.solid{background:#c3a6ea;color:#150e1c;border-color:#c3a6ea}
html[data-theme="dark"] .ws-btn.dark{background:#0d0418;border-color:#0d0418;color:#f8eee6}
/* V9.8.25 · 组件工坊左侧元素工具条 */
.ws-body{grid-template-columns:auto minmax(0,1fr) 340px}
.ws-tools{width:58px;display:flex;flex-direction:column;gap:8px;padding:12px 7px;background:var(--panel,#fffdf9);border-right:1px solid var(--line);overflow-y:auto;flex:none}
.ws-tool{height:46px;border:1.5px solid var(--ink);border-radius:11px;background:var(--white);color:var(--ink);font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;box-shadow:1.5px 1.5px 0 rgba(33,7,46,.22);transition:background .15s,transform .12s;flex:none}
.ws-tool small{font-size:8px;font-weight:700;letter-spacing:.02em;line-height:1}
.ws-tool:hover{background:var(--yellow);transform:translateY(-1px)}
html[data-theme="dark"] .ws-tool{background:#2a1c38;color:#f3e9f6;box-shadow:none}
html[data-theme="dark"] .ws-tool:hover{background:var(--lilac);color:#150e1c}
/* 工坊自由元素 */
.ws-stage .dc-el{pointer-events:auto;cursor:pointer}
.ws-stage .dc-el.ws-sel{outline:1.5px dashed #e8568f;outline-offset:1px;background:rgba(232,86,143,.08)}
.ws-el-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ws-el-row{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1.5px solid var(--line);border-radius:9px;padding:6px 8px;font-size:11px;cursor:pointer;background:var(--white);transition:border-color .12s}
.ws-el-row:hover{border-color:var(--blue,#9c43c8)}
.ws-el-row.sel{border-color:#e8568f;background:rgba(232,86,143,.08)}
.ws-el-x{border:0;background:transparent;color:var(--muted,#8d7a94);font-size:13px;cursor:pointer;padding:0 2px}
.ws-el-x:hover{color:#e8568f}
@media(max-width:900px){.ws-tools{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}}
/* V9.8.26 · 元素工坊详细页（chips 选择器 + 类型专属字段） */
.ws-el-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ws-el-chip{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line);border-radius:999px;padding:4px 6px 4px 8px;font-size:12px;cursor:pointer;background:var(--white);color:var(--ink);transition:border-color .12s,background .12s;max-width:120px}
.ws-el-chip i{font-style:normal;font-size:10px;color:var(--muted,#8d7a94);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44px}
.ws-el-chip em{border:0;background:transparent;color:var(--muted,#8d7a94);font-size:12px;cursor:pointer;padding:0 2px;font-style:normal;line-height:1}
.ws-el-chip em:hover{color:#e8568f}
.ws-el-chip:hover{border-color:var(--blue,#9c43c8)}
.ws-el-chip.sel{border-color:#e8568f;background:rgba(232,86,143,.08)}
html[data-theme="dark"] .ws-el-chip{background:#2a1c38;color:#f3e9f6}
html[data-theme="dark"] .ws-el-chip.sel{background:rgba(232,86,143,.16)}
.ws-el-detail{padding-top:2px}
.ws-el-detail .geo-grid{margin-top:10px}
/* V9.8.27 · 工具配置页 + 元素拖拽 */
.ws-toolcfg-form{margin-top:8px}
.ws-toolcfg-form .field{margin-bottom:12px}
#wsStage .dc-el{cursor:grab}
#wsStage .dc-el:active{cursor:grabbing}
/* V9.8.28 · 右侧三模式：工具配置页/元素详细页/批量/层级/预设 */
.ws-preset-row{display:flex;gap:6px;margin:4px 0 12px;flex-wrap:wrap}
.ws-preset{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:4px 10px 4px 6px;font-size:10px;color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s}
.ws-preset b{width:16px;height:16px;border-radius:5px;border:1px solid rgba(0,0,0,.18);flex:none}
.ws-preset:hover{border-color:var(--blue,#9c43c8);background:rgba(216,138,245,.12)}
html[data-theme="dark"] .ws-preset{background:#2a1c38;color:#f3e9f6}
.ws-layer-row{display:flex;gap:6px;margin-bottom:10px}
.ws-layer-row .btn{flex:1;height:32px;font-size:13px;padding:0}
.ws-back{display:block}
.ws-el-detail{overflow:visible}
/* V9.8.29 组件工坊 · 第一梯队（对齐/编组/锁定/resize/撤销） */
.ws-align-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ws-align-row .btn{min-width:calc(50% - 3px);margin:0}
.ws-locked{opacity:.82;cursor:not-allowed;outline:1px dashed #888;outline-offset:2px}
.ws-lock-ic{position:absolute;right:2px;top:2px;font-size:9px;line-height:1;opacity:.9;z-index:3;pointer-events:none}
.dc-resize{position:absolute;right:-4px;bottom:-4px;width:11px;height:11px;background:#fff;border:2px solid #e8568f;border-radius:3px;cursor:nwse-resize;z-index:12;pointer-events:auto}
.dc-resize:hover{background:#e8568f}
.ws-stage .dc-el.ws-sel{outline:2px dashed #e8568f;outline-offset:2px}
/* V9.8.30 右侧栏固定头部 + 我的组件卡片化 */
.inspector{display:flex;flex-direction:column;overflow:hidden;position:relative}
.inspector-tabs{flex:none;position:relative;top:auto}
#inspectorBody{flex:1;overflow-y:auto;min-height:0}
.panel-fold.fold-right{position:absolute;top:15px;right:10px;z-index:3;margin:0;height:26px;width:26px}
.custom-comp{display:flex;gap:6px;align-items:center;border:1.5px solid rgba(232,163,61,.4);border-radius:10px;padding:4px 5px;background:linear-gradient(135deg,#fffdf4,#fff4d8)}
.custom-add{flex:1;height:28px;border:0;background:transparent;color:#7a4a00;font-size:11px;font-weight:600;text-align:left;padding:0 8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custom-add:hover{color:#a05e00}
.custom-del{width:26px;height:26px;flex:none;border:0;background:rgba(197,61,77,.08);border-radius:7px;color:#c53d4d;font-size:13px;cursor:pointer;display:grid;place-items:center}
.custom-del:hover{background:rgba(197,61,77,.16)}
/* V9.8.31 组件卡片统一 + 左侧样式选中态 */
.component-btn:not(.layout-btn){width:100%;min-height:0;height:76px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.component-btn:not(.layout-btn) strong{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.component-btn:not(.layout-btn) span{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp-wrap{min-width:0}
.side-link.active{background:var(--yellow);border-color:var(--ink);color:var(--ink);font-weight:700;box-shadow:2px 2px 0 rgba(33,7,46,.5)}
html[data-theme="dark"] .side-link.active{background:#e8a33d;border-color:#e8a33d;color:#1a0f22}
/* V9.9.1 选中态精致化：细贴边描边 + 圆点控制柄 */
.fc-sec.selected{outline:1.5px solid rgba(156,67,200,.5);outline-offset:0}
.fc-h{width:8px;height:8px;background:#fff;border:1.5px solid #9c43c8;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.75);opacity:.85;transition:opacity .15s,transform .12s}
.fc-h:hover{opacity:1;transform:scale(1.18)}
.fc-h-nw{top:-4px;left:-4px;cursor:nwse-resize}.fc-h-n{top:-4px;left:50%;margin-left:-4px;cursor:ns-resize}.fc-h-ne{top:-4px;right:-4px;cursor:nesw-resize}
.fc-h-e{top:50%;right:-4px;margin-top:-4px;cursor:ew-resize}.fc-h-se{bottom:-4px;right:-4px;cursor:nwse-resize}.fc-h-s{bottom:-4px;left:50%;margin-left:-4px;cursor:ns-resize}
.fc-h-sw{bottom:-4px;left:-4px;cursor:nesw-resize}.fc-h-w{top:50%;left:-4px;margin-top:-4px;cursor:ew-resize}
.ws-stage .dc-el.ws-sel{outline:1.5px dashed rgba(232,86,143,.65);outline-offset:1px}
.dc-resize{width:9px;height:9px;background:#fff;border:1.5px solid #e8568f;border-radius:50%;right:-3px;bottom:-3px;cursor:nwse-resize;z-index:12;pointer-events:auto}
.dc-resize:hover{background:#e8568f}
/* V9.9.1b 控制点高特异性覆盖（ID 规则） */
#fcHandles .fc-h{width:8px;height:8px;background:#fff;border:1.5px solid #9c43c8;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.75);opacity:.85;z-index:5001;transition:opacity .15s,transform .12s}
#fcHandles .fc-h:hover{opacity:1;transform:scale(1.18)}
html[data-theme="dark"] #fcHandles .fc-h{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
/* V9.9.2 更干净选中态：四角显性圆点 + 四边中点 hover 淡入 */
#fcHandles .fc-h-n,#fcHandles .fc-h-e,#fcHandles .fc-h-s,#fcHandles .fc-h-w{opacity:0;transition:opacity .18s}
.fc-sec.selected:hover #fcHandles .fc-h-n,
.fc-sec.selected:hover #fcHandles .fc-h-e,
.fc-sec.selected:hover #fcHandles .fc-h-s,
.fc-sec.selected:hover #fcHandles .fc-h-w{opacity:.55}
/* V9.9.3 工坊画布去掉 iPad 式粗边框（改细边框+柔和投影） */
.ws-stage{border:2px solid rgba(33,7,46,.16);background:var(--white);box-shadow:0 24px 60px rgba(33,7,46,.16);overflow:hidden}
html[data-theme="dark"] .ws-stage{border-color:rgba(216,138,245,.28);background:#1d1530;box-shadow:0 24px 60px rgba(0,0,0,.5)}

/* V9.9.4 工坊画布彻底去边框（干净无壳感，只留柔和投影） */
.ws-stage{border:0;background:var(--white);box-shadow:0 18px 50px rgba(33,7,46,.14);overflow:hidden}
html[data-theme="dark"] .ws-stage{background:#1d1530;box-shadow:0 18px 50px rgba(0,0,0,.5)}

.paste-modal{width:min(560px,92vw)}
.paste-area{width:100%;height:170px;border:2px solid var(--ink);border-radius:12px;background:var(--white);padding:12px;font:12px/1.6 ui-monospace,'SF Mono',Menlo,monospace;resize:vertical;margin-top:12px}
.paste-area:focus{outline:2px solid var(--lilac)}

.ws-zoombar{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:4px;padding:4px 6px;border-bottom:1px solid var(--line,#e3e7e2);background:var(--cream)}
.ws-zoombar .ws-btn{height:24px;line-height:1;padding:0 8px}
.ws-zoombar span{font:11px 'DM Mono',monospace;min-width:44px;text-align:center;color:var(--ink)}
#wsMarquee{position:absolute;z-index:99;border:1.5px dashed #9c43c8;background:rgba(156,67,200,.10);display:none;pointer-events:none}
.ws-canvas{position:relative;padding-top:44px}

/* === v227 SVG 图标选择器 === */
.item-ic-line{display:none}
.item-ic-line.open{display:flex}
.ic-btn.svg-ic{padding:0;flex:none}
.ic-btn.svg-ic svg{display:block;margin:auto}
.dc-svg-icon{display:inline-block;vertical-align:middle}
/* === v227 模块间距 === */
.mtmb-row{display:flex;gap:10px;margin-top:4px}
.mtmb-row label{flex:1;font-size:11px;color:#6b5b70}
/* === v227 按钮预设 === */
.btn-preset-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 4px}
.btn-preset-row .btn{margin:0;font-size:11px;padding:6px 4px}

/* === v228 优化 === */
.svg-search{margin-top:0;margin-bottom:6px}
.svg-grid{display:flex;flex-wrap:wrap;gap:4px}
.preset-chip{font-size:10px !important;padding:7px 4px !important;line-height:1.2}
.gap-preset{flex:1;margin:0}
.nav-svg-line{flex-direction:column;align-items:stretch}

/* === v231 用户视角打磨 === */
.gap-preset.on{background:var(--lilac,#7c3aed);color:#fff;border-color:var(--lilac,#7c3aed)}
html[data-theme="dark"] .gap-preset.on{background:var(--lilac);border-color:var(--lilac)}
.design-badge{display:inline-block;font-size:10px;background:#f4ef51;color:#21072e;border-radius:999px;padding:2px 8px;vertical-align:middle}
.apply-all-ic{font-size:10px;padding:5px 4px}

/* v234: 撤销/重做 无历史置灰 */
.toolbar-btn:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.45);}

/* 卡片级自定义面板 */
.st-row{display:flex;align-items:center;gap:6px;margin:5px 0}
.st-row>label{flex:0 0 62px;font-size:10px;color:var(--muted,#8d7a94)}
.st-row .color-row{flex:1;grid-template-columns:34px 1fr;gap:6px}
.st-row .color-swatch{width:34px;height:32px}
.st-row .mini-input{height:32px;flex:1;min-width:0}
.pal-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.st-pal{width:17px;height:17px;border-radius:6px;border:1px solid rgba(33,7,46,.25);cursor:pointer;padding:0;transition:transform .1s}
.st-pal:hover{transform:scale(1.15)}
.st-pal-clear{background:#2a1c38;color:#fff;font-size:11px;line-height:1;width:17px;height:17px;border-radius:50%}
.st-sel{height:31px;border:1px solid #dfe2df;border-radius:7px;background:#fff;font-size:10px;color:#272b27;width:100%;outline:none}
.item-st-line{background:rgba(33,7,46,.035)}
html[data-theme="dark"] .item-st-line{background:rgba(195,166,234,.06)}
html[data-theme="dark"] .item-st-line{border-color:rgba(195,166,234,.25)}
html[data-theme="dark"] .st-row>label{color:#a98fc4}
html[data-theme="dark"] .st-sel{background:#241638;border-color:rgba(195,166,234,.2);color:#e8dcf6}
html[data-theme="dark"] .st-pal{border-color:rgba(195,166,234,.35)}

/* ===== DemoCraft 账号 登录/注册 ===== */
#accountBtn{flex:none}
.auth-modal{width:360px}
.auth-head{position:relative;padding-right:30px}
.auth-close{position:absolute;top:-6px;right:-6px;width:30px;height:30px;border:0;background:transparent;font-size:20px;line-height:1;color:#9a9f9a;cursor:pointer;border-radius:8px}
.auth-close:hover{background:#f4f5f3;color:#202520}
.auth-tabs{display:flex;gap:6px;margin:14px 0 16px;padding:4px;background:#f4f5f3;border-radius:11px}
.auth-tab{flex:1;height:34px;border:0;background:transparent;border-radius:8px;font-size:12px;font-weight:600;color:#7c837d;cursor:pointer;transition:background .15s,color .15s}
.auth-tab.active{background:#fff;color:#202520;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.auth-fields{display:flex;flex-direction:column;gap:12px}
.auth-fields .field{display:flex;flex-direction:column;gap:6px}
.auth-fields .field span{font-size:10px;color:#747974;font-weight:600}
.auth-submit{width:100%;height:40px;margin-top:16px;font-size:13px;border-radius:999px}
.auth-submit[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:2px 2px 0 rgba(33,7,46,.28)!important}
.auth-error{display:block;margin:12px 0 0;padding:9px 11px;background:#fdecec;border:1px solid #f5c6c6;border-radius:9px;color:#b23a3a;font-size:11px;line-height:1.5}
.auth-error[hidden]{display:none}
.auth-hint{margin:14px 0 0;font-size:10px;color:#9a9f9a;line-height:1.6;text-align:center}
.auth-aux{display:flex;align-items:center;justify-content:space-between;margin-top:10px;min-height:18px}
.auth-terms{display:flex;align-items:center;gap:6px;font-size:11px;color:#5b635c;cursor:pointer;user-select:none}
.auth-terms a{color:#4f46e5;text-decoration:underline}
.auth-terms input{width:14px;height:14px;accent-color:#4f46e5;cursor:pointer}
.auth-forgot{font-size:11px;color:#4f46e5;cursor:pointer;text-decoration:none;margin-left:auto}
.auth-forgot:hover{text-decoration:underline}
html[data-theme="dark"] .auth-tabs{background:#241638}
html[data-theme="dark"] .auth-tab{color:#b9a6cc}
html[data-theme="dark"] .auth-tab.active{background:#1d1530;color:#f0e9f8;box-shadow:0 1px 4px rgba(0,0,0,.3)}
html[data-theme="dark"] .auth-close:hover{background:#241638}

/* ===== 角色徽标（登录后显示） ===== */
.role-badge{margin-left:6px;padding:2px 7px;border-radius:999px;font-style:normal;font-size:10px;font-weight:700;line-height:1.4;letter-spacing:.4px}
.rb-admin{background:#2b1a4e;color:#ffd166}
.rb-premium{background:#f3a712;color:#2b1a4e}
html[data-theme="dark"] .rb-admin{background:#ffd166;color:#2b1a4e}
html[data-theme="dark"] .rb-premium{background:#8a63d2;color:#fff}

/* 全屏 UI（欢迎页导览 / 登录注册弹窗 / 答辩模式 / 检查层）打开时，隐藏工坊标签栏，
   避免 z-index:6100 的标签栏盖在这些界面上层（2026-10-23 修复） */
body:has(#entryExperience.active) .ws-tabbar,
body:has(.modal-backdrop.open) .ws-tabbar,
body:has(.defense-overlay) .ws-tabbar,
body:has(.check-modal) .ws-tabbar{display:none!important}
/* ===== 账号菜单 + 管理员控制台（v450） ===== */
.account-menu{position:fixed;min-width:220px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,.14);padding:8px;z-index:9000;animation:amPop .14s ease;}
@keyframes amPop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.am-user{display:flex;align-items:center;gap:8px;padding:8px 10px 10px;border-bottom:1px solid #f1f3f5;margin-bottom:6px;}
.am-mail{font-size:13px;font-weight:600;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.am-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:9px 10px;border-radius:9px;cursor:pointer;color:#111827;}
.am-item:hover{background:#f5f7fa;}
.am-ic{font-size:15px;width:20px;text-align:center;opacity:.8;}
.am-tx{font-size:13px;font-weight:600;display:flex;flex-direction:column;line-height:1.3;}
.am-tx small{font-size:11px;font-weight:400;color:#94a3b8;}
.am-danger{color:#dc2626;}
.am-danger:hover{background:#fef2f2;}
/* ===== 控制台（企业级 · v453） ===== */
.console-backdrop{z-index:9500;display:flex;align-items:center;justify-content:center;}
.console{background:#fff;border:1px solid #e2e8f0;border-radius:10px;width:min(840px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(15,23,42,.14);}
.console-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#0f172a;border-bottom:1px solid #1e293b;}
.console-tt{display:flex;flex-direction:column;gap:2px;}
.console-title{font-size:15px;font-weight:700;color:#f1f5f9;letter-spacing:.02em;}
.console-sub{font-size:11px;color:#64748b;letter-spacing:.05em;}
.console-head-actions{display:flex;align-items:center;gap:8px;}
.console-refresh{border:1px solid #334155;background:#1e293b;color:#cbd5e1;border-radius:6px;padding:5px 12px;font-size:12px;cursor:pointer;white-space:nowrap;}
.console-refresh:hover{background:#334155;color:#fff;}
.console-close{border:none;background:#1e293b;color:#94a3b8;width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:13px;}
.console-close:hover{background:#334155;color:#f1f5f9;}
.console-stamp{color:#94a3b8;font-size:11px;margin-top:14px;text-align:right;user-select:none;letter-spacing:.04em;}
.console-body{padding:18px 20px 22px;overflow-y:auto;background:#f8fafc;}
.console-load{color:#94a3b8;font-size:13px;text-align:center;padding:40px 0;}
.console-err{color:#dc2626;}
.console-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
.cc-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:3px;}
.cc-card b{font-size:24px;font-weight:700;color:#0f172a;line-height:1;font-variant-numeric:tabular-nums;}
.cc-card span{font-size:12px;color:#64748b;}
.cc-admin b{color:#1d4ed8;}
.cc-premium b{color:#14532d;}
.cc-total b{color:#0f172a;}
.cc-proj b{color:#1d4ed8;}
.cc-proj-today b{color:#15803d;}
.cc-fn1 b,.cc-fn2 b,.cc-fn3 b,.cc-fn4 b{color:#0f172a;}
.funnel-rate{font-size:12px;color:#64748b;margin:-6px 0 18px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:8px 12px;display:inline-block;}
.funnel-rate b{color:#1d4ed8;font-weight:700;}
.console-sec-title{font-size:13px;font-weight:700;color:#0f172a;margin:18px 0 10px;padding-bottom:8px;border-bottom:1px solid #e2e8f0;letter-spacing:.02em;}
.console-sec-title small{font-weight:400;color:#64748b;font-size:12px;}
.console-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;}
.console-table th{text-align:left;font-size:12px;color:#64748b;font-weight:600;padding:8px 10px;border-bottom:1px solid #e2e8f0;background:#f1f5f9;}
.console-table td{padding:10px;border-bottom:1px solid #f1f3f5;vertical-align:middle;}
.console-table tr:last-child td{border-bottom:none;}
.c-mail{font-weight:600;color:#0f172a;}
.c-date{color:#64748b;white-space:nowrap;}
.c-act{display:flex;gap:6px;white-space:nowrap;}
.cset{border:1px solid #cbd5e1;background:#fff;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;color:#334155;}
.cset:hover{border-color:#94a3b8;background:#f8fafc;}
.cset-up{color:#1d4ed8;border-color:#bfdbfe;}
.cset-up:hover{background:#eff6ff;}
.cset-ban{color:#b91c1c;border-color:#fecaca;}
.cset-ban:hover{background:#fef2f2;}
.cset-enable{color:#15803d;border-color:#bbf7d0;}
.cset-enable:hover{background:#f0fdf4;}
.role-badge.rb-admin{background:#1d4ed8;color:#fff;}
.role-badge.rb-premium{background:#14532d;color:#fff;}
.role-badge.rb-user{background:#e2e8f0;color:#334155;}
.rb-ban{background:#fee2e2;color:#b91c1c;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:600;margin-left:6px;}
.c-gift{color:#15803d;font-weight:600;}
.c-type-wrap{display:flex;flex-direction:column;gap:7px;margin:0 0 4px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;}
.c-type-row{display:flex;align-items:center;gap:10px;font-size:12px;}
.c-type-name{width:70px;color:#334155;font-weight:600;flex:none;}
.c-type-bar{flex:1;height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden;}
.c-type-bar i{display:block;height:100%;background:#2563eb;border-radius:99px;}
.c-type-cnt{color:#64748b;width:78px;text-align:right;flex:none;}
.c-num{font-variant-numeric:tabular-nums;color:#0f172a;font-weight:600;}
@media (max-width:640px){.console-cards{grid-template-columns:repeat(2,1fr);}.console{width:94vw;}.c-act{flex-direction:column;}}

/* ===== DemoCraft 新手引导（首次登录 3 步，v470） ===== */
.dg-guide{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
.dg-guide[hidden]{display:none;}
.dg-guide-card{width:min(92vw,430px);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(15,23,42,.25);overflow:hidden;}
.dg-guide-head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:linear-gradient(135deg,#fdf2f8,#eef2ff);}
.dg-guide-brand{width:30px;height:30px;border-radius:9px;background:#e8568f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none;}
.dg-guide-head b{font-size:14px;color:#0f172a;}
.dg-guide-skip{margin-left:auto;border:0;background:none;color:#94a3b8;font-size:12px;cursor:pointer;padding:4px 8px;}
.dg-guide-skip:hover{color:#64748b;}
.dg-guide-body{padding:18px;}
.dg-guide-step{display:none;gap:12px;align-items:flex-start;}
.dg-guide-step.active{display:flex;}
.dg-num{width:30px;height:30px;border-radius:50%;background:#e8568f;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px;}
.dg-guide-step b{font-size:14px;color:#0f172a;display:block;margin-bottom:4px;}
.dg-guide-step p{font-size:12.5px;color:#64748b;line-height:1.6;margin:0;}
.dg-guide-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 16px;border-top:1px solid #f1f5f9;}
.dg-guide-dots{display:flex;gap:6px;}
.dg-guide-dots i{width:7px;height:7px;border-radius:99px;background:#e2e8f0;transition:.2s;}
.dg-guide-dots i.active{width:20px;background:#e8568f;}
.dg-guide-actions{display:flex;gap:8px;}
.dg-guide-actions .btn{min-width:88px;justify-content:center;}

/* ===== v471：站内公告条 ===== */
.ann-bar{display:flex;align-items:center;gap:10px;background:#101411;color:#f5f6f3;font-size:12px;padding:8px 16px;position:relative;z-index:6}
.ann-bar[hidden]{display:none}
.ann-ico{font-size:14px;flex:none}
.ann-body{display:flex;gap:8px;align-items:baseline;min-width:0;flex:1}
.ann-body b{font-size:12px;flex:none}
.ann-body span{color:#c9cdc9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ann-close{border:0;background:transparent;color:#9aa09a;font-size:16px;padding:0 4px;cursor:pointer;line-height:1;flex:none}
.ann-close:hover{color:#fff}

/* v472 邮箱验证提示条（复用 ann-bar 布局，浅橙区分） */
.verify-bar{background:linear-gradient(90deg,#fff7e8,#fffdf5);border-bottom:1px solid #f2e2c4;}
.verify-bar b{color:#a05a00;}
.verify-bar .verify-tip{color:#a98a5a;font-size:12px;}

/* v473 账号设置弹窗 */
.set-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f2;font-size:14px}
.set-label{color:#8a8f98}
.set-val{color:#111;font-weight:600}
.set-sec{margin:14px 0 10px;font-size:12px;font-weight:700;color:#8a8f98;letter-spacing:.04em}
.set-err{color:#dc2626;font-size:12.5px;margin-top:8px;background:#fef2f2;padding:8px 10px;border-radius:8px}

/* ===== v474 画布页面标签栏（标签与画布同层） ===== */
.canvas-page-tabs{position:absolute;left:50%;transform:translateX(-50%);top:66px;z-index:50;display:flex;align-items:center;gap:4px;padding:5px 7px;background:rgba(255,255,255,.92);border:1px solid #e4e6e3;border-radius:11px;box-shadow:0 6px 18px rgba(20,25,22,.06);backdrop-filter:blur(8px);max-width:min(640px,88%);overflow-x:auto;scrollbar-width:none}
.canvas-page-tabs::-webkit-scrollbar{display:none}
.cpt-tab{height:26px;border:1.5px solid transparent;background:transparent;border-radius:8px;padding:0 11px;font-size:11px;font-weight:600;color:#6b716c;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,color .15s}
.cpt-tab:hover{background:#f1f3f0;color:#202520}
.cpt-tab.active{background:var(--yellow,#f4ef51);border-color:var(--ink,#21072e);color:var(--ink,#21072e);box-shadow:1.5px 1.5px 0 rgba(33,7,46,.4)}
.cpt-add{height:26px;min-width:26px;border:1px dashed #c9cec9;background:transparent;border-radius:8px;color:#8a908b;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 7px}
.cpt-add:hover{background:#f1f3f0;color:#202520;border-color:#9aa29b}
html[data-theme="dark"] .canvas-page-tabs{background:rgba(20,12,30,.94);border-color:#6b4a9e}
html[data-theme="dark"] .cpt-tab{color:#cfc3e0}
html[data-theme="dark"] .cpt-tab:hover{background:rgba(216,138,245,.14);color:#fff}
html[data-theme="dark"] .cpt-tab.active{background:var(--lilac,#d88af5);border-color:#e8c6f5;color:#21072e;box-shadow:1.5px 1.5px 0 rgba(0,0,0,.45)}
html[data-theme="dark"] .cpt-add{border-color:#6b4a9e;color:#b7a4cc}
html[data-theme="dark"] .cpt-add:hover{background:rgba(216,138,245,.14);color:#fff}
@media(max-width:850px){.canvas-page-tabs{top:64px;max-width:94%}}