:root{--ux-left:300px;--ux-right:300px;--ux-accent:#5b5bd6;--ux-accent-soft:#f0f0ff;--ux-canvas:#eef0f3;--ux-border:#e2e5ea;--ux-ink:#20242b;--ux-muted:#7b8491}
body{background:#f7f8fa}.topbar{height:60px;padding:0 14px;border-bottom:1px solid var(--ux-border);box-shadow:0 1px 0 rgba(16,24,40,.02);gap:14px}.brand{min-width:185px;gap:9px}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#20242b;color:#fff;font-size:11px;font-weight:900;letter-spacing:-.02em}.brand strong{font-size:13px}.brand small{font-size:9px}.paper-control{display:flex;align-items:center;gap:8px;margin:0 auto;padding:4px 5px 4px 10px;border:1px solid var(--ux-border);border-radius:11px;background:#fafbfc}.paper-control-label{font-size:9px;font-weight:800;color:#8a929e;text-transform:uppercase;letter-spacing:.08em}.paper-size-inline input{width:66px;padding:6px 7px;border:0;background:#fff;border-radius:7px;text-align:center;font-size:11px;font-weight:800;box-shadow:inset 0 0 0 1px #e1e4e9}.paper-size-inline .unit-inline{min-width:20px}.paper-control .unit-switch{margin-left:2px}.paper-control .unit-switch button{padding:5px 8px}.top-actions{gap:7px}.menu-wrap{position:relative}.top-menu-btn,.top-secondary-btn,.top-primary-btn{height:34px;border-radius:9px;padding:0 11px;font-size:10px;font-weight:850;display:flex;align-items:center;gap:7px;white-space:nowrap}.top-menu-btn,.top-secondary-btn{border:1px solid #d9dde3;background:#fff;color:#3d4652}.top-menu-btn:hover,.top-secondary-btn:hover{background:#f7f8fa}.top-primary-btn{border:1px solid #20242b;background:#20242b;color:#fff}.top-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:120;width:260px;padding:7px;background:#fff;border:1px solid #dfe3e8;border-radius:12px;box-shadow:0 18px 50px rgba(15,23,42,.16)}.file-menu-wrap .top-menu{left:0;right:auto}.menu-item{width:100%;border:0;background:transparent;border-radius:9px;padding:9px;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;text-align:left;color:#3d4652}.menu-item:hover{background:#f5f6f8}.menu-item.featured{background:#f4f4ff;color:#3434a8}.menu-item:disabled{opacity:.42;cursor:not-allowed}.menu-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:#f0f2f5;font-size:12px;font-weight:900}.featured .menu-icon{background:#e5e5ff}.menu-item strong{display:block;font-size:10.5px}.menu-item small{display:block;margin-top:2px;color:#9299a3;font-size:8.5px;font-weight:500}.menu-separator{height:1px;background:#eceef1;margin:5px 3px}.menu-status{display:flex;align-items:center;gap:7px;padding:8px 9px 5px;color:#8b939f;font-size:8.5px}.autosave-dot{width:7px;height:7px;border-radius:50%;background:#18a66a;box-shadow:0 0 0 3px rgba(24,166,106,.09)}
.workspace{grid-template-columns:var(--ux-left) 6px minmax(360px,1fr) 6px var(--ux-right);background:#fff}.panel-resizer{position:relative;z-index:20;background:#f7f8fa;cursor:col-resize;touch-action:none}.panel-resizer:after{content:"";position:absolute;left:2px;top:0;bottom:0;width:2px;background:transparent;border-radius:4px;transition:.12s}.panel-resizer:hover:after,.panel-resizer.dragging:after{background:var(--ux-accent)}body.panel-resizing{cursor:col-resize!important;user-select:none!important}.left-panel{border-right:0}.right-panel{border-left:0;padding:14px}.panel-head{padding:14px 15px;background:#fff}.panel-head h2,.right-title-row h2{font-size:14px}.quick-add{display:flex;gap:5px}.add-btn{padding:7px 8px}.editor-scroll{min-height:0;overflow:auto}.field-section{padding:14px 15px}.field{font-size:10px}.field-help{font-size:8.5px}.empty-editor{padding:34px 22px;text-align:center;color:#707986}.empty-editor-icon{width:42px;height:42px;margin:0 auto 12px;display:grid;place-items:center;border-radius:12px;background:#f0f0ff;color:var(--ux-accent);font-size:21px}.empty-editor strong{display:block;color:#303640;font-size:13px}.empty-editor p{margin:7px auto 14px;max-width:210px;font-size:9.5px;line-height:1.5}.empty-editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.empty-editor-actions button,.empty-canvas-card button{border:1px solid #d9dde3;background:#fff;border-radius:8px;padding:8px;font-size:9.5px;font-weight:800;color:#414957}.empty-editor-actions button:first-child,.empty-canvas-card button:first-child{border-color:#c9c9fb;background:#f5f5ff;color:#4444b8}
.font-picker{position:relative}.font-native-select{display:none!important}.font-picker-btn{width:100%;height:36px;border:1px solid #d1d5db;border-radius:9px;background:#fff;padding:0 10px;display:flex;align-items:center;justify-content:space-between;color:#222831}.font-picker-label{font-size:12px}.font-picker-chevron{color:#9ca3af;font-size:10px}.font-picker-menu{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:90;padding:5px;background:#fff;border:1px solid #dce0e5;border-radius:10px;box-shadow:0 12px 34px rgba(15,23,42,.16);max-height:260px;overflow:auto}.font-picker-menu button{width:100%;height:42px;border:0;background:transparent;border-radius:7px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;text-align:left;color:#242a32}.font-picker-menu button:hover{background:#f0f0ff;color:#3434a8}.font-picker-menu span{font-size:12px}.font-picker-menu em{font-style:normal;font-size:15px;color:#69717d}.font-picker-menu button.active{background:#f4f4ff;box-shadow:inset 0 0 0 1px #d8d8ff}
.canvas-column{background-color:var(--ux-canvas);background-image:radial-gradient(circle at 1px 1px,rgba(74,85,104,.12) 1px,transparent 0);background-size:20px 20px}.edit-toolbar{min-height:40px;padding:4px 9px}.edit-toolbar button{height:30px;border-color:#dfe2e7}.canvas-toolbar{height:44px}.canvas-viewport{position:relative;padding:0;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain;cursor:default}.canvas-viewport.panning,.canvas-viewport.panning *{cursor:grabbing!important}.canvas-viewport svg{flex:0 0 auto;max-width:none!important;max-height:none!important}.canvas-empty-state{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none}.empty-canvas-card{pointer-events:auto;width:220px;padding:20px;border:1px solid rgba(213,218,225,.9);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 14px 38px rgba(15,23,42,.10);text-align:center;backdrop-filter:blur(6px)}.empty-canvas-icon{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 10px;border-radius:10px;background:#eeeeff;color:var(--ux-accent);font-size:15px}.empty-canvas-card strong{display:block;font-size:12px;color:#303640}.empty-canvas-card small{display:block;margin:5px 0 12px;color:#8a929e;font-size:9px}.empty-canvas-card>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}.canvas-footer{min-height:30px;background:rgba(255,255,255,.96)}.paper{filter:drop-shadow(0 10px 25px rgba(15,23,42,.14))}
.right-title-row{margin-bottom:8px}.tabs{background:#f2f3f5;border:0;border-radius:9px;padding:3px;margin-bottom:12px}.tabs button{padding:8px 6px;border-radius:7px}.tabs button.active{background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.08)}.tabs button.active:after{display:none}.layer-list{gap:7px}.layer-row{background:#fff;border:1px solid #e2e5e9;padding:9px 8px}.layer-row:hover{background:#f8f9fa}.layer-row.active{border-color:#a7a7ef;box-shadow:0 0 0 2px rgba(91,91,214,.08)}.layers-empty{padding:30px 10px;text-align:center;color:#979eaa;font-size:9.5px}.arrange-card{background:#fafbfc;border-color:#e6e8ec}.hero-arrange{background:#f5f5ff;border-color:#e3e3ff}.primary-btn{background:#242932}.status.ok{background:#ecf8f2;color:#08784a}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(250px,var(--ux-left)) 5px minmax(380px,1fr)}.right-panel{position:fixed;right:12px;top:72px;bottom:12px;width:min(320px,var(--ux-right));border:1px solid var(--ux-border);border-radius:14px;box-shadow:0 18px 48px rgba(15,23,42,.16);z-index:40}.panel-resizer-right{display:none}.paper-control-label{display:none}}
@media(max-width:820px){.topbar{height:auto;min-height:60px;flex-wrap:wrap;padding:9px}.brand{min-width:auto}.paper-control{order:3;width:100%;justify-content:center}.workspace{display:flex}.panel-resizer{display:none}.top-menu{position:fixed;left:10px!important;right:10px!important;top:64px;width:auto}.canvas-viewport{min-height:420px}}

/* centered stage: keeps the paper centered when the SVG is smaller and makes overflow symmetric when larger */
.canvas-viewport{display:block!important}.canvas-stage{min-width:100%;min-height:100%;width:max-content;height:max-content;display:grid;place-items:center}.canvas-stage svg{grid-area:1/1;margin:0!important}.canvas-empty-state{position:sticky;left:0;top:0;width:100%;height:100%;float:left;margin-right:-100%;z-index:8}