:root{--bg-main:#f8fafc;--surface:#fff;--surface-border:#e2e8f0;--text-main:#0f172a;--text-muted:#64748b;--primary:#3b82f6;--primary-hover:#2563eb;--danger:#ef4444}*{box-sizing:border-box}body{background-color:var(--bg-main);color:var(--text-main);margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden}.app{flex-direction:column;height:100vh;display:flex}.app-header{background:var(--surface);border-bottom:1px solid var(--surface-border);justify-content:space-between;align-items:center;height:60px;padding:0 1.5rem;display:flex;box-shadow:0 1px 2px #0000000d}.logo{color:var(--primary);margin:0;font-size:1.2rem;font-weight:800}.app-main{flex:1;display:flex;overflow:hidden}.canvas-wrapper{background-image:linear-gradient(90deg,#f1f5f9 1px,#0000 1px),linear-gradient(#f1f5f9 1px,#0000 1px);background-size:20px 20px;flex:1;justify-content:center;align-items:center;padding:2rem;display:flex;position:relative;overflow:auto}.preview-container{background:var(--surface);border:1px solid var(--surface-border);border-radius:12px;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.preview-desktop{width:1050px;height:600px}.preview-tablet{width:768px;height:1024px}.preview-mobile{width:375px;height:812px}.canvas-container{width:100%;height:100%;position:relative}.canvas-element{cursor:grab;position:absolute}.canvas-element:active{cursor:grabbing}.canvas-element.element-selected{outline:2px solid var(--primary);outline-offset:2px}.element-floating-toolbar{z-index:9999;background:#1e293b;border:1px solid #334155;border-radius:8px;gap:4px;padding:4px;display:flex;position:absolute;top:-45px;left:50%;transform:translate(-50%);box-shadow:0 10px 15px -3px #0003}.element-floating-toolbar button{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px}.element-floating-toolbar button:hover{background:#334155}.properties-sidebar{background:var(--surface);border-left:1px solid var(--surface-border);width:320px;transition:transform .3s;overflow-y:auto;box-shadow:-4px 0 15px #00000005}.properties-sidebar.closed{height:calc(100vh - 60px);position:absolute;right:0;transform:translate(100%)}.sidebar-section{border-bottom:1px solid var(--surface-border);padding:1.2rem}.sidebar-title{margin:0 0 1rem;font-size:1rem;font-weight:600}.sidebar-label{color:var(--text-muted);margin-bottom:.5rem;font-size:.85rem;font-weight:500;display:block}.sidebar-input{background:var(--bg-main);border:1px solid var(--surface-border);width:100%;color:var(--text-main);border-radius:8px;padding:.6rem .8rem;font-family:inherit;font-size:.9rem;transition:all .2s}.sidebar-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px #3b82f633}input[type=range].sidebar-input{-webkit-appearance:none;background:0 0;border:none;width:100%;padding:0}input[type=range].sidebar-input:focus{box-shadow:none}input[type=range].sidebar-input::-webkit-slider-runnable-track{cursor:pointer;background:var(--surface-border);border-radius:4px;width:100%;height:6px}input[type=range].sidebar-input::-webkit-slider-thumb{background:var(--primary);cursor:pointer;-webkit-appearance:none;border-radius:50%;width:16px;height:16px;margin-top:-5px;transition:transform .1s;box-shadow:0 1px 3px #0000004d}input[type=range].sidebar-input::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range].sidebar-input:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #3b82f633}.btn{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:.6rem 1.2rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff;border:1px solid var(--primary)}.btn-primary:hover{background:var(--primary-hover)}.btn-primary:disabled{opacity:.7;cursor:not-allowed}.btn-outline{color:var(--text-main);border:1px solid var(--surface-border);background:0 0}.btn-outline:hover{background:var(--bg-main)}.glass{-webkit-backdrop-filter:blur(10px);background:#ffffffb3;border:1px solid #ffffff80;box-shadow:0 4px 6px -1px #0000000d}.toast{color:#fff;opacity:0;z-index:10000;background:#10b981;border-radius:50px;padding:12px 24px;font-weight:600;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 10px 15px -3px #0000001a}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.loading-screen{background:var(--surface);z-index:99999;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.spinner{border:4px solid var(--surface-border);border-top-color:var(--primary);border-radius:50%;width:50px;height:50px;margin-bottom:1rem;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--surface);border-radius:16px;width:90%;max-width:400px;padding:2rem;box-shadow:0 20px 25px -5px #0000001a}.fab{background:var(--primary);color:#fff;cursor:pointer;z-index:1000;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;transition:all .2s;display:flex;position:absolute;bottom:24px;right:24px;box-shadow:0 10px 15px -3px #0000001a}.fab:hover{background:var(--primary-hover);transform:translateY(-2px)}