*{margin:0;padding:0;box-sizing:border-box}body{font-family:poppins,sans-serif;background:#edf0f5;overflow:hidden}.editor{display:flex;width:100%;height:100vh}.left-icons{width:70px;background:#fff;border-right:1px solid #ddd;display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:12px;z-index:1000}.left-icons button{width:52px;height:52px;border:none;border-radius:16px;background:#f5f5f5;font-size:22px;cursor:pointer;transition:.2s}.left-icons button:hover{background:#0a9b32;color:#fff}.left-panel{width:280px;background:#fff;border-right:1px solid #ddd;overflow:auto;padding:20px}.panel{display:none}.panel.active{display:block}.panel h2{margin-bottom:20px}.top-toolbar{display:flex;align-items:center;gap:12px;padding:12px;overflow-x:auto}.tool-item{position:relative;flex:none}.tool-control{position:absolute;top:65px;left:50%;transform:translateX(-50%);min-width:260px;background:#f5f5f5;border:1px solid #ddd;border-radius:24px;padding:20px;box-shadow:0 10px 35px rgba(0,0,0,.12);display:none;z-index:999999}.tool-control.show{display:block}.tool-control input[type=color]{width:70px;height:50px;border:none;background:0 0}.tool-control input[type=range]{width:160px}.align-popup{display:none;gap:8px}.align-popup.show{display:flex}.mini-btn{width:32px;height:32px;font-size:18px}.delete-btn{background:#ffe5e5;color:#d10000}.tool-group{display:flex;align-items:center;gap:8px;padding-right:10px;border-right:1px solid #e5e5e5;flex:none}.tool-group:last-child{border-right:none}.top-toolbar{position:fixed;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f7f7f7;border:1px solid #dcdcdc;border-radius:22px;box-shadow:0 5px 20px rgba(0,0,0,8%);z-index:99999;overflow:visible}.tool-item{position:relative;flex:none}.tool-control{position:absolute;top:65px;left:50%;transform:translateX(-50%);min-width:260px;background:#f5f5f5;border:1px solid #ddd;border-radius:24px;padding:20px;box-shadow:0 10px 35px rgba(0,0,0,.12);display:none;z-index:999999}.tool-control.show{display:block}.control-title{font-size:15px;font-weight:700;margin-bottom:14px}.range-row{display:flex;align-items:center;gap:14px;margin-bottom:22px}.range-row input[type=range]{flex:1}.range-value{width:52px;height:48px;border-radius:14px;border:1px solid #ddd;background:#fff;text-align:center;font-size:20px}.align-tools{display:flex;gap:10px;margin-top:10px}.align-tools .icon-btn{flex:1}.icon-btn{width:46px;height:46px;border:none;border-radius:14px;background:#ececec;cursor:pointer;font-size:22px;transition:.2s}.icon-btn:hover{background:#e2d7ff;color:#6d28d9}.icon-btn.active{background:#e2d7ff;color:#6d28d9}.top-toolbar::-webkit-scrollbar{display:none}.top-toolbar{scrollbar-width:none}.tool-select{height:42px;border:none;border-radius:12px;padding:0 14px;background:#f5f5f5;font-size:15px;font-weight:600;outline:none}.icon-btn{width:40px;height:40px;border:none;border-radius:12px;background:#f3f3f3;font-size:20px;cursor:pointer;transition:.2s}.icon-btn:hover{background:#ede9fe;color:#6d28d9}.toolbar-text-btn{border:none;background:0 0;font-size:15px;font-weight:600;cursor:pointer;padding:0 8px;color:#333}.size-box{background:#f5f5f5;border-radius:14px;padding:4px}.size-box input{width:60px;border:none;background:0 0;text-align:center;font-size:18px;font-weight:700;outline:none}.color-box{position:relative}.color-box input[type=color]{width:34px;height:8px;border:none;background:0 0;cursor:pointer}.tool-icon{font-size:28px;font-weight:700}.canvas-area{flex:1;overflow:auto;padding-top:70px;display:flex;justify-content:center;align-items:flex-start}.canvas-wrapper{position:relative;width:794px;height:1123px;background:#fff;margin:20px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.15)}.canvas-container{touch-action:none}.right-panel{width:320px;background:#fff;border-left:1px solid #ddd;padding:20px;overflow:auto}.right-panel h2{margin-bottom:20px}.export-btn{width:100%;border:none;padding:14px;border-radius:14px;background:#0a9b32;color:#fff;font-weight:700;margin-bottom:12px;cursor:pointer}.text-style{padding:18px;border-radius:14px;background:#f6f6f6;margin-bottom:15px;cursor:pointer;font-weight:700}.neon{background:#000;color:#0ff;text-shadow:0 0 10px #0ff,0 0 20px #0ff}.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.shape-btn{height:70px;border:none;border-radius:16px;background:#f4f4f4;font-size:30px;cursor:pointer}.upload-box{border:2px dashed #ccc;padding:30px;border-radius:20px;text-align:center;cursor:pointer;margin-bottom:20px}.recent-images{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.recent-images img{width:100%;border-radius:14px;cursor:pointer}.effect-box{display:none;width:100%;margin-top:10px;padding:12px;border-radius:12px;background:#1f1f1f;border:1px solid rgba(255,255,255,8%)}.effect-box.active{display:block}.effect-control{margin-bottom:14px}.effect-control label{display:block;font-size:13px;margin-bottom:6px;color:#000}.effect-control input[type=range]{width:100%}.effect-control input[type=color]{width:100%;height:45px;border:none;background:0 0;cursor:pointer}.effect-grid{display:flex;flex-direction:column;gap:10px}.effect-btn{padding:12px;border:none;border-radius:12px;background:#2b2b2b;color:#fff;cursor:pointer;font-size:15px;transition:.2s}.effect-btn:hover{background:#3b3b3b}.effect-custom-box{margin-top:20px;padding:15px;border-radius:18px;background:#f7f7f7}.effect-control{margin-bottom:15px}.effect-control label{display:block;margin-bottom:8px;font-size:14px;font-weight:700}.effect-control input[type=range]{width:100%}.effect-control input[type=color]{width:100%;height:45px;border:none;border-radius:12px}.mobile-show{display:none}@media(max-width:768px){body{overflow:hidden}.editor{flex-direction:column}.left-icons{position:fixed;bottom:0;left:0;width:100%;height:75px;flex-direction:row;justify-content:flex-start;overflow-x:auto;gap:12px;padding:10px;border-right:none;border-top:1px solid #ddd;z-index:99999;background:#fff}.left-icons button{min-width:55px;height:55px;border-radius:16px;font-size:24px;flex:none}.left-panel{position:fixed;left:0;right:0;bottom:75px;width:100%;height:260px;z-index:9999;border-radius:20px 20px 0 0;display:none;overflow:auto;box-shadow:0 -5px 30px rgba(0,0,0,.15)}.left-panel.show{display:block}.right-panel{display:none}.canvas-area{width:100%;overflow:auto;padding:10px 10px 180px;display:block}.canvas-wrapper{width:100%;height:auto;max-width:100%;margin:0 auto}.right-panel{position:fixed;left:0;right:0;bottom:75px;width:100%;height:300px;background:#fff;z-index:99999;border-radius:20px 20px 0 0;overflow:auto;display:none;padding:20px;box-shadow:0 -5px 30px rgba(0,0,0,.15)}.right-panel.show{display:block}.mobile-show{display:block}}@media(max-width:768px){.top-toolbar{position:fixed;left:0;right:0;bottom:78px;top:auto;transform:none;width:100%;display:none;align-items:center;gap:10px;padding:10px 12px;overflow-x:auto;overflow-y:visible;white-space:nowrap;background:#fff;border-top:1px solid #e5e5e5;border-radius:22px 22px 0 0;box-shadow:0 -5px 30px rgba(0,0,0,8%);z-index:99999;scrollbar-width:none}.top-toolbar.show{display:flex}.top-toolbar::-webkit-scrollbar{display:none}.tool-item{position:static;flex:none}.icon-btn{width:48px;height:48px;min-width:48px;border:none;border-radius:16px;background:#f3f3f3;font-size:22px;cursor:pointer;transition:.2s;flex:none}.icon-btn:hover{background:#ede9fe;color:#6d28d9}.icon-btn.active{background:#e9ddff;color:#6d28d9}.tool-select{height:48px;min-width:130px;border:none;border-radius:14px;padding:0 14px;background:#f5f5f5;font-size:15px;font-weight:600;outline:none}.tool-control{position:fixed !important;left:50% !important;bottom:150px !important;top:auto !important;transform:translateX(-50%) !important;width:92vw;max-width:340px;min-width:auto;max-height:55vh;overflow:auto;padding:18px;border-radius:24px;background:#fff;border:1px solid #e5e5e5;box-shadow:0 10px 40px rgba(0,0,0,.18);display:none;z-index:999999999}.tool-control.show{display:block}.tool-control input[type=range]{width:100%}.tool-control input[type=color]{width:100%;height:48px;border:none;background:0 0;cursor:pointer}.size-box{display:flex;align-items:center;justify-content:center;gap:10px;background:#f5f5f5;border-radius:16px;padding:10px}.size-box input{width:70px;height:42px;border:none;border-radius:12px;background:#fff;text-align:center;font-size:18px;font-weight:700;outline:none}.mini-btn{width:40px;height:40px;min-width:40px;border-radius:12px;font-size:20px}.align-popup{display:none;flex-wrap:wrap;justify-content:center;gap:10px}.align-popup.show{display:flex}.align-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.align-tools .icon-btn{flex:1;min-width:60px}.tool-group{display:flex;align-items:center;gap:8px;padding-right:8px;border-right:1px solid #ececec;flex:none}.tool-group:last-child{border-right:none}.toolbar-text-btn{border:none;background:0 0;font-size:14px;font-weight:600;cursor:pointer;padding:0 6px;color:#333;white-space:nowrap}.range-row{display:flex;align-items:center;gap:12px;margin-bottom:18px}.range-row input[type=range]{flex:1}.range-value{width:52px;height:44px;border-radius:12px;border:1px solid #ddd;background:#fff;text-align:center;font-size:18px}.tool-icon{font-size:24px;font-weight:700}.delete-btn{background:#ffe5e5;color:#d10000}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#bbb;border-radius:20px}