@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-deepest:#080910;--bg-dark:#0f1014;--bg-panel:#151619;--bg-panel2:#1a1c21;--bg-hover:#1f2128;--bg-active:#252830;--bg-selected:#6378ff26;--border:#232630;--border-light:#2a2d38;--text-primary:#e8eaf4;--text-secondary:#8c91b0;--text-muted:#50546e;--text-accent:#c8d0ff;--accent:#6378ff;--accent-hover:#4f63f0;--accent-glow:#6378ff40;--accent-light:#6378ff1f;--success:#3ecf8e;--warning:#f6a623;--danger:#f04438;--info:#38b2f0;--canvas-bg:#eef0f7;--canvas-dot:#c4c8d8;--canvas-selection:#6378ff26;--shadow-sm:0 1px 4px #0006;--shadow-md:0 4px 16px #00000080;--shadow-lg:0 8px 32px #0009;--shadow-glow:0 0 20px #6378ff4d;--radius-xs:3px;--radius-sm:5px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px}html,body,#__next{height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}body{background:var(--bg-deepest);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}input[type=text],input[type=number],input[type=url],textarea,select{background:var(--bg-panel2);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-primary);outline:none;font-family:inherit;font-size:11px;transition:border-color .15s,box-shadow .15s}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}input[type=color]{border:1px solid var(--border-light);border-radius:var(--radius-xs);cursor:pointer;background:0 0;padding:1px}button{font-family:inherit}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fadeIn{animation:.2s forwards fadeIn}.animate-slideIn{animation:.2s forwards slideIn}.animate-pulse{animation:1.5s ease-in-out infinite pulse}.animate-spin{animation:.8s linear infinite spin}.skeleton{background:linear-gradient(90deg, var(--bg-panel2) 25%, var(--bg-hover) 50%, var(--bg-panel2) 75%);background-size:200% 100%;animation:1.5s ease-in-out infinite shimmer}.canvas-ruler-h,.canvas-ruler-v{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-muted);z-index:10;-webkit-user-select:none;user-select:none;font-size:9px;position:absolute;overflow:hidden}.canvas-ruler-h{height:24px;top:0;left:24px;right:0}.canvas-ruler-v{width:24px;top:24px;bottom:0;left:0}.tooltip{border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-secondary);white-space:nowrap;pointer-events:none;z-index:9999;box-shadow:var(--shadow-md);background:#1a1c21;padding:3px 8px;font-size:10px;position:absolute}.context-menu{background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--radius-md);min-width:160px;box-shadow:var(--shadow-lg);z-index:9999;padding:4px;animation:.12s fadeIn;position:fixed}.context-menu-item{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);align-items:center;gap:8px;padding:6px 10px;font-size:12px;transition:background .1s,color .1s;display:flex}.context-menu-item:hover{background:var(--bg-hover);color:var(--text-primary)}.context-menu-item.danger:hover{color:var(--danger);background:#f044381f}.context-menu-separator{background:var(--border);height:1px;margin:4px 0}.panel-tab{color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;padding:5px 10px;font-size:11px;font-weight:500;transition:all .15s}.panel-tab:hover{color:var(--text-secondary)}.panel-tab.active{color:var(--text-accent);border-bottom-color:var(--accent)}.template-card{border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;background:var(--bg-panel2);transition:border-color .15s,transform .15s,box-shadow .15s;overflow:hidden}.template-card:hover{border-color:var(--accent);box-shadow:0 4px 20px var(--accent-glow);transform:translateY(-2px)}.drag-handle{cursor:grab;opacity:0;transition:opacity .15s}.drag-handle:active{cursor:grabbing}.layer-row:hover .drag-handle{opacity:1}.element-tile{border:1px solid var(--border);border-radius:var(--radius-md);cursor:grab;background:var(--bg-panel2);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:10px 6px;transition:all .15s;display:flex}.element-tile:hover{border-color:var(--accent);background:var(--accent-light);transform:scale(1.03)}.element-tile:active{cursor:grabbing;transform:scale(.97)}.element-tile-icon{font-size:18px;line-height:1}.element-tile-label{color:var(--text-secondary);font-size:10px;font-weight:500}.prop-row{align-items:center;gap:8px;margin-bottom:6px;display:flex}.prop-label{color:var(--text-muted);white-space:nowrap;flex-shrink:0;width:56px;font-size:10px}.prop-input{flex:1;width:100%;padding:4px 7px}.seg-ctrl{background:var(--bg-panel2);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;overflow:hidden}.seg-ctrl button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex:1;padding:4px 0;font-size:10px;transition:all .12s}.seg-ctrl button.active{background:var(--accent);color:#fff}.seg-ctrl button:hover:not(.active){background:var(--bg-hover);color:var(--text-secondary)}.color-swatch{border-radius:var(--radius-xs);border:1px solid var(--border-light);cursor:pointer;flex-shrink:0;width:22px;height:22px;transition:transform .1s}.color-swatch:hover{transform:scale(1.1)}.preview-overlay{z-index:10000;background:#fff;flex-direction:column;display:flex;position:fixed;inset:0}.preview-toolbar{background:var(--bg-dark);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;height:44px;padding:0 16px;display:flex}[contenteditable=true]{outline-offset:2px;border-radius:2px;outline:2px solid var(--accent)!important}