:root{--bg:#f4f5f7;--panel:#fff;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--soft:#f3f4f6;--soft2:#e6e8ec;--accent:#7c3aed;--blue:#2563eb;--green:#059669;--danger:#dc2626;--ok:#067647;--okbg:#ecfdf3;--warn:#9a3412;--warnbg:#fff7ed;--shadow:0 12px 36px rgba(15,23,42,.08)}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}.hidden{display:none!important}button{cursor:pointer}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}.topbar{height:64px;flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px}.brand{display:flex;align-items:center;gap:10px;min-width:210px}.brand-dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#111827,#475569)}.brand strong{display:block;font-size:14px}.brand small{display:block;font-size:10px;color:#9ca3af;margin-top:2px}.topbar-center{display:flex;align-items:center;gap:8px;color:#6b7280;font-size:11px}.paper-size-inline{display:flex;align-items:center;gap:5px}.paper-size-inline input{width:74px;padding:7px 8px}.paper-size-inline .unit-inline{font-size:10px;color:#9ca3af}.top-actions{display:flex;align-items:center;gap:8px}.unit-switch{display:flex;background:#eef0f3;padding:3px;border-radius:10px}.unit-switch button{border:0;background:transparent;border-radius:7px;padding:6px 10px;color:#6b7280;font-size:11px;font-weight:800}.unit-switch button.active{background:#fff;color:#111827;box-shadow:0 1px 4px rgba(15,23,42,.08)}.primary-btn,.secondary-btn{border:0;border-radius:10px;font-weight:800}.primary-btn{background:#111827;color:#fff;padding:9px 13px}.secondary-btn{background:#f3f4f6;color:#374151;padding:9px 11px}.primary-btn.full,.secondary-btn.full{width:100%}
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:320px minmax(440px,1fr) 320px}.panel{background:#fff;min-height:0}.left-panel{border-right:1px solid var(--line);display:flex;flex-direction:column}.right-panel{border-left:1px solid var(--line);padding:16px;overflow:auto}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px;border-bottom:1px solid var(--line)}.eyebrow{display:block;font-size:9px;font-weight:900;letter-spacing:.12em;color:#9ca3af;margin-bottom:3px}.panel-head h2,.right-title-row h2{margin:0;font-size:16px}.add-btn,.add-layer-btn{border:1px solid #d1d5db;background:#fff;border-radius:9px;padding:8px 10px;font-size:11px;font-weight:800}.editor-scroll{overflow:auto}.field-section{padding:16px;border-bottom:1px solid var(--line)}.field-section.compact{padding-top:8px;padding-bottom:8px}.grid{display:grid;gap:9px}.grid.two{grid-template-columns:1fr 1fr}.field{display:flex;flex-direction:column;gap:6px;color:#4b5563;font-size:11px;font-weight:700;margin-bottom:10px}.field:last-child{margin-bottom:0}.field-help{display:block;color:#9ca3af;font-size:9px;line-height:1.45;margin:-3px 0 12px}input,select,textarea{width:100%;border:1px solid #d1d5db;border-radius:9px;padding:9px 10px;background:#fff;color:#111827;outline:none}input:focus,select:focus,textarea:focus{border-color:#93b4ff;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.text-input{font-size:15px;resize:vertical;min-height:72px;line-height:1.35}.input-unit{position:relative}.input-unit input{padding-right:42px}.input-unit span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:9px;color:#9ca3af}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.switch-row>div strong{display:block;font-size:12px}.switch-row>div small{display:block;font-size:10px;color:#9ca3af;margin-top:3px}.switch-row.minor{padding:5px 0}.switch{display:block;flex:0 0 auto}.switch input{display:none}.switch span{display:block;width:38px;height:22px;border-radius:999px;background:#d1d5db;position:relative}.switch span:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.15s}.switch input:checked+span{background:#111827}.switch input:checked+span:after{transform:translateX(16px)}.frame-fields{margin-top:13px;padding-top:13px;border-top:1px solid #eef0f2}
.canvas-column{display:flex;flex-direction:column;min-width:0;min-height:0;background:#e9ebef}.edit-toolbar{min-height:42px;flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:5px 10px;gap:8px}.edit-group{display:flex;gap:4px}.edit-toolbar button{height:31px;border:1px solid #d8dce2;background:#fff;border-radius:8px;padding:0 9px;display:flex;align-items:center;gap:5px;color:#4b5563;font-size:10px;font-weight:800}.edit-toolbar button:hover:not(:disabled){background:#f5f6f8}.edit-toolbar button.active{background:#eef4ff;border-color:#8fb1ff;color:#174ea6}.edit-toolbar button:disabled{opacity:.4;cursor:default}.edit-toolbar .danger-tool{color:#b42318}.edit-separator{width:1px;height:24px;background:#e5e7eb;margin:0 2px}.shortcut-hint{margin-left:auto;color:#9ca3af;font-size:9px;white-space:nowrap}.canvas-toolbar{height:48px;flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:12px}.canvas-status{display:flex;align-items:center;gap:9px;font-size:10px;color:#6b7280;min-width:0}.status{font-size:9px;font-weight:900;border-radius:999px;padding:5px 8px;flex:0 0 auto}.status.ok{color:var(--ok);background:var(--okbg)}.status.warn{color:var(--warn);background:var(--warnbg)}.toolbar-actions{display:flex;gap:6px}.toolbar-actions button{border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:7px 9px;font-size:10px;font-weight:800;color:#4b5563}.canvas-viewport{flex:1;min-height:0;overflow:auto;padding:28px;display:flex;align-items:flex-start;justify-content:center}.canvas-viewport svg{display:block;min-width:320px;min-height:240px;max-width:100%;touch-action:none;user-select:none}.canvas-footer{min-height:34px;flex:0 0 auto;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:7px 12px;font-size:9px;color:#9ca3af}.canvas-footer span:last-child{margin-left:auto;color:#6b7280}.paper{fill:#fff;stroke:#a7adb7;stroke-width:.7;filter:drop-shadow(0 8px 18px rgba(15,23,42,.12));cursor:default}.job-text{fill:#111827;cursor:move}.frame-shape{fill:transparent;stroke:#111827;stroke-width:1;cursor:move}.selection-box{fill:none;stroke-width:1.1;stroke-dasharray:4 3;pointer-events:none}.selection-box.text{stroke:var(--blue)}.selection-box.frame{stroke:var(--green)}.resize-handle{stroke:#fff;stroke-width:1.1;cursor:nwse-resize}.resize-handle.text{fill:var(--blue)}.resize-handle.frame{fill:var(--green)}.resize-handle.ne,.resize-handle.sw{cursor:nesw-resize}.dimension-line,.dimension-tick{stroke:#4b5563;stroke-width:.45}.dimension-label-bg{fill:#fff;stroke:#e5e7eb;stroke-width:.35}.dimension-text{font-size:7px;fill:#111827;font-weight:800;text-anchor:middle;dominant-baseline:middle}
.inline-editor-fo{overflow:visible}.inline-editor-shell{width:100%;height:100%;position:relative}.inline-text-editor{width:100%;height:100%;min-width:70px;min-height:42px;border:1.5px solid var(--blue);outline:0;border-radius:2px;padding:0 2px;margin:0;resize:none;overflow:hidden;background:rgba(255,255,255,.96);color:#111827;box-shadow:0 0 0 2px rgba(37,99,235,.12);white-space:pre;box-sizing:border-box}.inline-edit-hint{position:absolute;left:0;top:100%;margin-top:4px;background:#111827;color:white;border-radius:4px;padding:3px 5px;font:7px/1.2 Arial,sans-serif;white-space:nowrap;pointer-events:none}
.right-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.panel-grip{color:#9ca3af;font-size:14px}.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #e5e7eb;margin-bottom:14px}.tabs button{border:0;background:transparent;padding:11px 6px;font-size:12px;color:#6b7280;font-weight:700;position:relative}.tabs button.active{color:#111827}.tabs button.active:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--accent);border-radius:4px 4px 0 0}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#f0f1f3;padding:3px;border-radius:13px;margin-bottom:14px}.segmented button{border:0;background:transparent;border-radius:10px;padding:9px;font-size:11px;color:#6b7280}.segmented button.active{background:#fff;color:#111827;box-shadow:0 1px 4px rgba(15,23,42,.08)}.layer-list{display:grid;gap:9px}.layer-row{display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:8px;background:#dfe2e7;border:1px solid transparent;border-radius:10px;padding:10px 9px;cursor:pointer;transition:.12s}.layer-row:hover{background:#d8dce2}.layer-row.active{border-color:#8b5cf6;box-shadow:0 0 0 2px rgba(124,58,237,.11)}.drag-grip{font-size:15px;color:#5f6670;letter-spacing:-3px;cursor:grab}.layer-name{min-width:0}.layer-name strong{display:block;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:500;max-height:34px}.layer-name small{display:block;color:#6b7280;font-size:9px;margin-top:3px}.layer-actions{display:flex;gap:3px}.icon-mini{width:27px;height:27px;border:0;background:rgba(255,255,255,.55);border-radius:7px;font-size:12px;color:#4b5563}.icon-mini.danger{color:#b91c1c}.add-layer-btn{width:100%;margin-top:10px;background:#fff}.arrange-card{background:#f7f8fa;border:1px solid #e7e9ed;border-radius:12px;padding:12px;margin-bottom:10px}.arrange-card strong{display:block;font-size:12px}.arrange-card small{display:block;color:#9ca3af;font-size:9px;line-height:1.4;margin:4px 0 10px}.arrange-label{display:block;font-size:9px;font-weight:900;letter-spacing:.09em;color:#9ca3af;margin-bottom:9px}.arrange-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.arrange-grid button{border:1px solid #d8dce2;background:#fff;border-radius:8px;padding:9px 4px;font-size:9px;color:#4b5563;font-weight:700}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111827;color:#fff;border-radius:10px;padding:10px 14px;font-size:11px;box-shadow:var(--shadow);z-index:50}
@media(max-width:1150px){.shortcut-hint{display:none}}
@media(max-width:1050px){.workspace{grid-template-columns:300px minmax(400px,1fr)}.right-panel{position:fixed;right:12px;top:76px;bottom:12px;width:300px;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.18);z-index:10}.edit-toolbar button span{display:none}}
@media(max-width:760px){.app-shell{height:auto;min-height:100vh;overflow:visible}.topbar{height:auto;align-items:flex-start;flex-wrap:wrap;padding:10px}.topbar-center{order:3;width:100%}.workspace{display:flex;flex-direction:column}.left-panel{border:0;border-bottom:1px solid var(--line)}.canvas-column{height:65vh;min-height:520px}.right-panel{position:static;width:auto;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}.canvas-footer{flex-wrap:wrap;height:auto}.grid.two{grid-template-columns:1fr 1fr}.edit-toolbar{overflow:auto}.edit-toolbar button{flex:0 0 auto}}