:root{--page: #f7f8fc;--surface: #ffffff;--surface-soft: #f8fafc;--line: #e5e7eb;--line-strong: #d8dee9;--text: #172033;--muted: #697386;--muted-light: #9aa4b2;--purple: #6d28d9;--purple-strong: #5b21b6;--purple-soft: #f4f0ff;--pink: #db2777;--danger: #d92d52;--danger-soft: #fff1f5;--success: #22c55e;--panel-radius: 16px;--control-radius: 10px;--header-height: 68px;--panel-shadow: 0 12px 32px rgba(36, 30, 64, .055)}*{box-sizing:border-box}html{min-width:320px;background:var(--page)}body{min-height:100vh;margin:0;color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,label,select,input[type=checkbox],input[type=color]{-webkit-tap-highlight-color:transparent}button,.button-control,.primary-action,.empty-state{-webkit-user-select:none;user-select:none}button,.button-control,.primary-action,.empty-state,select,input[type=checkbox],input[type=color]{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,label:focus-visible,#editorCanvas:focus-visible{outline:3px solid rgba(109,40,217,.16);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.editor-page{background-color:var(--page);background-image:radial-gradient(circle,rgba(148,163,184,.15) 1px,transparent 1px);background-size:22px 22px}.editor-header{position:sticky;top:0;z-index:30;height:var(--header-height);border-bottom:1px solid rgba(226,232,240,.92);background:#fffffff2;box-shadow:0 6px 22px #0f172a09;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.editor-topline{width:min(100%,1740px);height:100%;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}.editor-brand,.brand-slogan{display:flex;align-items:center}.editor-brand{min-width:0;gap:12px}.brand-mark{width:29px;height:29px;flex:0 0 auto;color:var(--purple);stroke-width:2.25}.editor-brand h1{margin:0;background:linear-gradient(128deg,#4f46e5 0%,var(--purple) 62%,var(--pink) 125%);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:25px;font-weight:820;line-height:1;letter-spacing:-.045em;white-space:nowrap}.brand-divider{width:1px;height:23px;margin-left:2px;background:var(--line)}.editor-brand p,.brand-slogan{margin:0;color:#344054;font-size:14px;font-weight:650;white-space:nowrap}.brand-slogan{gap:8px}.brand-slogan svg{width:18px;height:18px;color:#8b5cf6}.editor-layout{width:min(100%,1740px);height:calc(100svh - var(--header-height));min-height:650px;margin:0 auto;padding:14px 22px 16px;display:grid;grid-template-columns:126px minmax(500px,1fr) 344px;gap:14px;align-items:stretch}.tool-rail,.workspace-panel,.inspector-panel{min-width:0;min-height:0;border:1px solid rgba(226,232,240,.96);border-radius:var(--panel-radius);background:#fffffffa;box-shadow:var(--panel-shadow)}.tool-rail{padding:10px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.tool-list{display:grid;gap:6px}.tool-btn{position:relative;width:100%;min-height:76px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:12px;background:transparent;color:#596579;font-size:13px;font-weight:680;line-height:1;transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease}.tool-btn svg{width:25px;height:25px;stroke-width:1.9}.tool-btn:hover:not(:disabled){border-color:#e8ddff;background:#faf8ff;color:var(--purple);transform:translateY(-1px)}.tool-btn.active{border-color:#ded2ff;background:var(--purple-soft);color:var(--purple);box-shadow:inset 3px 0 0 var(--purple)}.tool-btn.active:disabled{border-color:transparent;background:transparent;box-shadow:none;color:#b6bec9}.tool-btn:disabled{color:#b6bec9;cursor:not-allowed;opacity:.72}.tool-rail-foot{padding-top:9px;border-top:1px solid #edf0f4}.undo-tool{min-height:66px}.workspace-panel{display:grid;grid-template-rows:72px minmax(0,1fr) 47px;overflow:hidden}.document-bar{min-width:0;padding:13px 18px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #edf0f4}.primary-action{min-width:148px;min-height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--purple);border-radius:10px;background:var(--purple);box-shadow:0 8px 18px #6d28d92e;color:#fff;font-weight:750;transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}button.primary-action{appearance:none}.primary-action:hover{border-color:var(--purple-strong);background:var(--purple-strong);box-shadow:0 10px 22px #6d28d93b;transform:translateY(-1px)}.primary-action svg{width:18px;height:18px}.editor-layout.is-locked .upload-action{display:none}.editor-layout:not(.is-locked) .upload-action{min-width:132px;border-color:#d8c9ff;background:#fff;box-shadow:none;color:var(--purple)}.editor-layout:not(.is-locked) .upload-action:hover{border-color:#c4b5fd;background:#faf8ff;box-shadow:0 7px 16px #6d28d91a;color:var(--purple-strong)}.document-status{min-width:0;flex:1 1 auto;display:flex;align-items:center;gap:10px}.view-controls{flex:0 0 auto;display:flex;align-items:center;gap:5px}.view-controls button{min-width:34px;height:34px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:#566174;font-size:12px;font-weight:720;transition:color .16s ease,border-color .16s ease,background .16s ease}.view-controls button:hover:not(:disabled){border-color:#c4b5fd;background:#faf8ff;color:var(--purple)}.view-controls button:disabled,.inspector-panel button:disabled{cursor:not-allowed;opacity:.48;transform:none}.view-controls svg{width:15px;height:15px}.view-controls output{min-width:68px;color:#697386;font-size:12px;font-weight:650;text-align:center}.status-dot{width:9px;height:9px;flex:0 0 auto;border:2px solid #dcfce7;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px #22c55e17}.editor-layout.is-locked .status-dot{border-color:#edf0f4;background:#98a2b3;box-shadow:0 0 0 3px #94a3b817}.workspace-meta{overflow:hidden;color:#596579;font-size:13px;font-weight:620;text-overflow:ellipsis;white-space:nowrap}.stage-shell{min-height:0;padding:14px;background:#fbfcfe}.workspace{position:relative;width:100%;height:100%;min-height:390px;overflow:auto;border:1px solid #e3e7ee;border-radius:13px;background-color:#fff;background-image:linear-gradient(45deg,rgba(148,163,184,.07) 25%,transparent 25%),linear-gradient(-45deg,rgba(148,163,184,.07) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(148,163,184,.07) 75%),linear-gradient(-45deg,transparent 75%,rgba(148,163,184,.07) 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-size:14px 14px}#editorCanvas{position:absolute;inset:0;display:block;touch-action:none}#editorCanvas:focus-visible{outline-offset:-4px}.empty-state{position:absolute;top:50%;left:50%;width:min(320px,calc(100% - 40px));min-height:148px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1.5px dashed #a78bfa;border-radius:14px;background:#faf8ffed;box-shadow:0 16px 32px #6d28d90f;color:var(--purple);font-size:15px;font-weight:730;font-family:inherit;transform:translate(-50%,-50%);transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}.empty-state:hover{border-color:var(--purple);background:#f7f2ff;box-shadow:0 18px 38px #6d28d91a}.empty-state svg{width:30px;height:30px;stroke-width:1.8}.empty-state.is-hidden{display:none}.workspace-note{margin:0;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #edf0f4;color:var(--muted);font-size:12px}.status-message{overflow:hidden;color:#5b6474;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.status-message.success{color:#15803d}.status-message.warn{color:#b45309}.status-message.error{color:#be123c}.inspector-panel{padding:18px 17px;overflow:auto;scrollbar-width:thin;scrollbar-color:#d9d0f4 transparent}.inspector-panel::-webkit-scrollbar{width:6px}.inspector-panel::-webkit-scrollbar-thumb{border-radius:99px;background:#d9d0f4}.inspector-section+.inspector-section{margin-top:22px;padding-top:20px;border-top:1px solid #e9edf2}.inspector-section h2{margin:0 0 15px;color:#242d40;font-size:17px;font-weight:780;line-height:1.25;letter-spacing:-.01em}.section-hint{margin:-5px 0 15px;padding:9px 10px;border-radius:8px;background:#f8f7fc;color:#667085;font-size:12px;line-height:1.55}.editor-layout.is-locked .text-inspector .field-row,.editor-layout.is-locked .text-inspector .checkline-row,.editor-layout.is-locked .text-inspector .inspector-actions{opacity:.52}input:disabled,select:disabled{cursor:not-allowed}.field-row{min-width:0;margin-bottom:11px;display:grid;grid-template-columns:69px minmax(0,1fr);align-items:center;gap:10px}.field-row>label{color:#4d596c;font-size:13px;font-weight:650}input[type=text],input[type=number],select{width:100%;min-width:0;height:42px;padding:0 11px;border:1px solid var(--line-strong);border-radius:var(--control-radius);background:#fff;color:#263043;font-size:13px;font-weight:540;transition:border-color .16s ease,box-shadow .16s ease}input[type=text]:hover,input[type=number]:hover,select:hover{border-color:#c4b5fd}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#a78bfa;box-shadow:0 0 0 3px #6d28d91a;outline:none}.color-control{height:42px;padding:6px;border:1px solid var(--line-strong);border-radius:var(--control-radius);background:#fff}.unit-input{position:relative}.unit-input input{padding-right:38px}.unit-input span{position:absolute;top:50%;right:11px;color:#8a94a4;font-size:12px;transform:translateY(-50%);pointer-events:none}.field-help{margin:-4px 0 12px 79px;color:#7a8494;font-size:11px;line-height:1.5}.dpi-meta{margin:3px 0 14px 79px;display:grid;gap:3px;color:#7a8494;font-size:11px;line-height:1.5}.dpi-meta span:first-child{font-weight:720}.dpi-meta.dpi-ok{color:#15803d}.dpi-meta.dpi-warn{color:#b45309}.dpi-meta.dpi-bad{color:#be123c}.draft-actions{margin-bottom:12px;padding:11px;border:1px solid #ded2ff;border-radius:10px;background:#faf8ff}.draft-actions.hidden{display:none}.draft-actions p{margin:0 0 9px;color:#4c3b72;font-size:12px;font-weight:680}.draft-actions>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.draft-actions button{min-height:34px;border:1px solid #d7c8fb;border-radius:8px;background:#fff;color:var(--purple);font-size:12px;font-weight:720}input[type=color]{width:100%;height:100%;padding:0;border:0;border-radius:6px;background:transparent}.checkline-row{margin:13px 0 15px 79px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}.checkline{display:inline-flex;align-items:center;gap:8px;color:#4d596c;font-size:13px;font-weight:650;cursor:pointer}.checkline input{width:17px;height:17px;margin:0;accent-color:var(--purple)}.inspector-actions,.export-actions{display:grid;gap:9px}.inspector-actions button,.export-actions button,.button-control{width:100%;min-height:43px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);border-radius:var(--control-radius);background:#fff;color:#334155;font-size:13px;font-weight:700;line-height:1.2;transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}.inspector-actions button:hover,.export-actions button:hover,.button-control:hover{border-color:#c4b5fd;background:#faf8ff;color:var(--purple);transform:translateY(-1px)}.inspector-actions .primary-button{border-color:var(--purple);background:var(--purple);box-shadow:0 7px 16px #6d28d929;color:#fff}.inspector-actions .primary-button:hover{border-color:var(--purple-strong);background:var(--purple-strong);color:#fff}.inspector-actions .danger-button{border-color:#fecdd7;background:var(--danger-soft);color:var(--danger)}.inspector-actions .danger-button:hover{border-color:#fda4b7;background:#ffe6ed;color:#be123c}.inspector-actions svg,.export-actions svg,.button-control svg{width:17px;height:17px}.inline-text-editor{position:absolute;z-index:15;min-width:120px;max-width:min(360px,calc(100% - 24px));padding:7px 10px;border:2px solid var(--purple);border-radius:8px;background:#fff;box-shadow:0 10px 24px #6d28d92e;color:#111827;font-size:16px;line-height:1.2;outline:none}.confirm-dialog{width:min(460px,calc(100% - 32px));padding:0;border:0;border-radius:18px;background:#fff;box-shadow:0 24px 70px #1f17373d;color:var(--text)}.confirm-dialog::backdrop{background:#1f19306b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.confirm-dialog-body{padding:24px}.confirm-dialog h2{margin:0 0 9px;color:#242d40;font-size:20px;line-height:1.3}.confirm-dialog p{margin:0;color:#667085;line-height:1.7}.confirm-dialog-actions{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.confirm-dialog-actions button{min-height:42px;padding:0 13px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:#334155;font-weight:700}.confirm-dialog-actions #cancelReplaceBtn{grid-column:1 / -1}.confirm-dialog-actions button:hover{border-color:#c4b5fd;background:#faf8ff;color:var(--purple)}.confirm-dialog-actions .danger-confirm{border-color:#fecdd7;background:var(--danger-soft);color:var(--danger)}.confirm-dialog-actions .danger-confirm:hover{border-color:#fda4b7;background:#ffe6ed;color:#be123c}@media(min-width:761px)and (max-height:820px){.tool-list{gap:4px}.tool-btn{min-height:64px;padding:7px 6px;gap:5px}.tool-btn svg{width:22px;height:22px}.tool-rail-foot{padding-top:6px}.undo-tool{min-height:56px}}@media(max-width:1120px){.editor-layout{height:auto;min-height:calc(100svh - var(--header-height));grid-template-columns:108px minmax(0,1fr)}.inspector-panel{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:24px;overflow:visible}.inspector-section+.inspector-section{margin-top:0;padding-top:0;padding-left:24px;border-top:0;border-left:1px solid #e9edf2}.workspace-panel,.tool-rail{height:calc(100svh - var(--header-height) - 30px);min-height:640px}}@media(max-width:760px){:root{--header-height: 62px}.editor-topline{padding:0 16px}.editor-brand{gap:9px}.brand-mark{width:25px;height:25px}.editor-brand h1{font-size:21px}.brand-divider,.brand-slogan{display:none}.editor-brand p{font-size:12px}.editor-layout{width:100%;padding:10px;display:flex;flex-direction:column;gap:10px;overflow:visible}.tool-rail,.workspace-panel,.inspector-panel{width:100%;height:auto;min-height:0;border-radius:14px}.tool-rail{order:1;padding:7px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;overflow:visible}.tool-list,.tool-rail-foot{display:contents}.tool-rail-foot{padding:0;border:0}.tool-btn,.undo-tool{min-width:0;min-height:56px;padding:8px 5px;gap:6px;font-size:12px}.tool-btn svg{width:21px;height:21px}.tool-btn.active{box-shadow:inset 0 -3px 0 var(--purple)}.workspace-panel{order:2;grid-template-rows:auto 480px 42px}.document-bar{padding:11px 12px;gap:13px;flex-wrap:wrap}.primary-action{min-width:126px;min-height:42px;padding:0 13px}.workspace-meta{font-size:12px}.view-controls{width:100%;justify-content:flex-end;padding-top:9px;border-top:1px solid #edf0f4}.view-controls button{min-width:44px;height:44px}.stage-shell{padding:10px}.workspace{min-height:0}.empty-state{min-height:132px;padding:20px}.workspace-note{padding:0 12px;font-size:11px}.workspace-note>span:last-child{display:none}.inspector-panel{order:3;padding:17px 15px;display:block}.inspector-section+.inspector-section{margin-top:21px;padding-top:19px;padding-left:0;border-top:1px solid #e9edf2;border-left:0}}@media(max-width:430px){.editor-topline{padding:0 12px}.editor-brand p{display:block}.editor-layout{padding:8px;gap:8px}.workspace-panel{grid-template-rows:auto 420px 42px}.document-bar{align-items:flex-start}.document-status{min-width:0;margin-top:12px}.field-row{grid-template-columns:66px minmax(0,1fr)}.checkline-row,.dpi-meta,.field-help{margin-left:76px}.confirm-dialog-body{padding:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}