body{color:#1f2937;background-color:#f3f4f6;margin:0;font-family:Inter,-apple-system,sans-serif;overflow:hidden}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.setup-modal{background:#fff;border-radius:12px;width:400px;padding:30px;box-shadow:0 20px 25px -5px #0000001a}.setup-modal h2{color:#111827;margin-top:0}.form-group{margin-bottom:20px}.form-group label{color:#4b5563;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.form-group input{box-sizing:border-box;border:1px solid #d1d5db;border-radius:6px;width:100%;padding:10px;font-family:inherit;font-size:16px}.primary-btn{color:#fff;cursor:pointer;background:#8b3dff;border:none;border-radius:6px;padding:10px 20px;font-weight:600;transition:background .2s}.primary-btn:hover{background:#7c33e6}.canva-app{flex-direction:column;height:100vh;display:flex}.canva-topbar{color:#fff;z-index:50;background:linear-gradient(90deg,#00c4cc 0%,#8b3dff 100%);justify-content:space-between;align-items:center;height:56px;padding:0 16px;display:flex}.topbar-left{align-items:center;gap:16px;display:flex}.topbar-center{font-size:14px;font-weight:500}.topbar-right{align-items:center;gap:12px;display:flex}.topbar-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:4px;align-items:center;gap:6px;padding:6px 12px;font-size:14px;font-weight:500;display:flex}.topbar-btn:hover{background:#fff3}.topbar-btn.white{color:#111827;background:#fff}.canva-body{flex:1;display:flex;overflow:hidden}.canva-left-strip{z-index:40;background:#111827;flex-direction:column;align-items:center;gap:8px;width:72px;padding-top:16px;display:flex}.strip-btn{color:#9ca3af;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;width:100%;padding:12px 0;transition:all .2s;display:flex}.strip-btn:hover{color:#fff}.strip-btn.active{color:#fff;background:#1f2937}.strip-btn span{font-size:11px;font-weight:500}.canva-drawer{z-index:30;background:#fff;flex-direction:column;width:340px;display:flex;box-shadow:4px 0 12px #0000000d}.drawer-header{border-bottom:1px solid #f3f4f6;padding:16px 20px}.drawer-header h3{color:#111827;margin:0;font-size:16px}.drawer-content{flex:1;padding:16px 20px;overflow-y:auto}.font-search{border:1px solid #d1d5db;border-radius:6px;width:100%;margin-bottom:16px;padding:10px}.font-list-item{cursor:pointer;border-radius:6px;margin-bottom:4px;padding:12px}.font-list-item:hover{background:#f3f4f6}.canva-workspace{background:#f3f4f6;flex-direction:column;flex:1;display:flex;position:relative}.context-toolbar-container{z-index:20;background:#fff;border-bottom:1px solid #e5e7eb;align-items:center;gap:8px;height:56px;padding:0 16px;display:flex;box-shadow:0 1px 2px #0000000d}.toolbar-divider{background:#e5e7eb;width:1px;height:24px;margin:0 8px}.icon-btn{cursor:pointer;color:#4b5563;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.icon-btn:hover{color:#111827;background:#f3f4f6}.icon-btn.active{color:#111827;background:#e5e7eb}.toolbar-select{background:#fff;border:1px solid #d1d5db;border-radius:6px;min-width:120px;padding:6px 10px;font-family:inherit}.toolbar-input-number{text-align:center;border:1px solid #d1d5db;border-radius:6px;width:60px;padding:6px}.toolbar-color{cursor:pointer;border:1px solid #d1d5db;border-radius:4px;width:30px;height:30px;padding:0}.canvas-wrapper{flex:1;justify-content:center;align-items:center;padding:50px;display:flex;overflow:auto}.canvas-container{background:#fff;position:relative;box-shadow:0 20px 25px -5px #0000001a}.layer-item{cursor:pointer;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px;display:flex}.layer-item.selected{background:#f5f3ff;border-color:#8b3dff}.layer-actions{gap:4px;display:flex}.layer-btn{cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px}.layer-btn:hover{background:#e5e7eb}.context-menu{z-index:9999;background:#fff;border-radius:8px;width:260px;padding:8px 0;font-size:14px;position:fixed;box-shadow:0 4px 12px #00000026}.context-menu-item{cursor:pointer;color:#1f2937;justify-content:space-between;align-items:center;padding:10px 20px;transition:background .1s;display:flex}.context-menu-item:hover{background:#f3f4f6}.context-menu-item .shortcut{color:#9ca3af;font-size:12px}.context-menu-divider{background:#e5e7eb;height:1px;margin:6px 0}.context-menu-icon{color:#4b5563;margin-right:12px}.context-menu-item.has-submenu{position:relative}.context-submenu{z-index:10000;background:#fff;border-radius:8px;width:260px;margin-left:2px;padding:8px 0;position:absolute;top:-8px;left:100%;box-shadow:0 4px 12px #00000026}.floating-action-bar{z-index:1000;pointer-events:auto;background:#fff;border-radius:8px;align-items:center;padding:4px;transition:opacity .1s;display:flex;position:absolute;box-shadow:0 4px 12px #00000026}.floating-btn{cursor:pointer;color:#374151;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:8px;font-size:14px;font-weight:500;transition:background .2s;display:flex}.floating-btn:hover{background:#f3f4f6}.floating-btn.with-text{padding:8px 12px}.floating-divider{background:#e5e7eb;width:1px;height:24px;margin:0 4px}.element-grid-btn{cursor:pointer;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;padding:16px 8px;transition:all .2s;display:flex}.element-grid-btn:hover{background:#f3f4f6;border-color:#d1d5db}