@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--color-primary: #f97316;--color-primary-hover: #fb923c;--color-text: #C9D1D9;--color-text-muted: #8B949E;--color-surface: #0E1117;--color-surface-light: #161B22;--color-border: #30363d}.editor-container{display:flex;flex-direction:column;height:100vh;background:#0e1117;color:var(--color-text);padding:0}.editor-main{display:grid;grid-template-columns:minmax(280px,360px) 1fr minmax(280px,360px);grid-template-areas:"left center right";flex:1;overflow:hidden;padding:0 0 24px;column-gap:32px;row-gap:0}@media (max-width: 1200px){.editor-main{display:flex;flex-direction:column;overflow-y:auto;gap:20px;padding:12px}.sidebar-left{order:1}.canvas-area{order:2}.sidebar-right{order:1}}.sidebar{background:#0e1117;overflow-y:auto;overflow-x:hidden;padding:0;display:flex;flex-direction:column;gap:16px}.sidebar-left{grid-area:left}.sidebar-right{grid-area:right}@media (max-width: 1200px){.sidebar{max-height:none;overflow-y:visible;width:100%;padding:16px;border:1px solid rgba(255,255,255,.05);border-radius:8px;background:#161b22}.sidebar-left{margin-bottom:0}.sidebar-right{margin-top:0}}.sidebar-section{border:none;border-radius:0;background:#0e1117;overflow:visible;transition:all .2s ease;margin:0 0 24px}.tooltip-container{position:relative;display:inline-block}.tooltip{position:absolute;top:100%;left:50%;transform:translate(-50%);background:#1f2937;color:#f3f4f6;padding:8px 12px;border-radius:8px;font-size:12px;white-space:nowrap;z-index:1000;margin-top:8px;border:1px solid rgba(255,255,255,.1);box-shadow:none}.tooltip:after{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:#1f2937}.sidebar-section:hover{box-shadow:none}.section-header{display:flex;align-items:center;gap:8px;color:#e5e7eb;font-size:16px;font-weight:600;padding:6px 0;background:transparent;border-bottom:none}.section-header svg{color:#fff;width:16px;height:16px}.section-header h3{margin:0;font-size:16px;font-weight:600;color:#e5e7eb}.section-content{padding:4px 0 0;display:flex;flex-direction:column;gap:14px}.btn-primary{background:#2563eb;color:#fff;border:none;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease;width:100%}.btn-primary:hover{background:#1d4ed8;transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#161b22;color:#c9d1d9;border:1px solid #30363d;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease;width:100%}.btn-secondary:hover{background:#1f242b;border-color:#f97316;color:#f97316;box-shadow:0 0 10px #f9731640}.adjustment-control{display:flex;flex-direction:column;gap:6px}.adjustment-control label{display:flex;justify-content:space-between;font-size:14px;color:#fff;font-weight:500}.slider{width:100%;height:8px;border-radius:999px;background:linear-gradient(to right,#111827 0%,#111827 var(--slider-fill-start, 0%),#6b7280 var(--slider-fill-start, 0%),#6b7280 var(--slider-fill-end, 0%),#111827 var(--slider-fill-end, 0%),#111827 100%);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer}.slider:focus-visible{outline:none;box-shadow:0 0 0 1px #1f3a5f}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:999px;background:#6b7280;cursor:pointer;transition:background .15s ease,transform .15s ease;border:none}.slider::-webkit-slider-thumb:hover{background:#e5e7eb;transform:scale(1.02)}.slider::-moz-range-thumb{width:14px;height:14px;border-radius:999px;background:#6b7280;cursor:pointer;border:none;transition:background .15s ease,transform .15s ease}.slider::-moz-range-thumb:hover{background:#e5e7eb;transform:scale(1.02)}.slider::-moz-range-track{background-color:transparent;border:none}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.filter-btn{background:transparent;color:#b1bac4;border:1px solid #30363d;padding:14px 10px;border-radius:8px;font-size:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .3s ease;font-weight:600}.filter-btn:hover{background:#ffffff05;border-color:#6b7280;color:#e5e7eb;box-shadow:none;transform:translateY(-2px)}.filter-btn.active{background:linear-gradient(135deg,#f9731633,#fb923c33);color:#f97316;border-color:#f97316;box-shadow:0 0 15px #f9731666}.filter-btn span{font-size:11px;font-weight:600}.canvas-area{grid-area:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:#0e1117;padding:0;gap:16px;min-height:0;overflow:auto}@media (max-width: 1200px){.canvas-area{min-height:60vh;padding:16px;width:100%;align-items:center}}.canvas-placeholder-panel{width:100%;border:none;border-radius:0;background:#0e1117;overflow:hidden;transition:all .2s ease}.canvas-placeholder-panel:hover{border-color:#ffffff26;box-shadow:0 0 0 1px #ffffff14}.placeholder-header{background:#0e1117;padding:0 0 10px;display:flex;justify-content:space-between;align-items:center}.panel-reset-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;background:#f973161a;color:#f97316;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;z-index:10}.panel-reset-btn:hover{background:#f9731633;transform:translateY(-50%) scale(1.1)}.panel-reset-btn svg{width:14px;height:14px}.btn-remove-image{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .3s ease}.btn-remove-image:hover{background:#ef444433;border-color:#ef4444;transform:translateY(-1px)}.placeholder-header h3{font-size:16px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;margin:0}.placeholder-header h3 svg{color:#fff}.placeholder-content{display:flex;justify-content:center;align-items:center;background:#0e1117;padding:8px 0 0;min-height:400px}.placeholder-content.has-image{flex-direction:column;align-items:center;justify-content:flex-start}.placeholder-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:450px;width:100%;border:2px dashed rgba(255,255,255,.1);border-radius:8px;background:#0e1117;cursor:pointer;transition:all .3s ease;padding:20px;text-align:center;box-sizing:border-box}@media (max-width: 1200px){.placeholder-dropzone{min-height:300px;padding:16px}}.placeholder-dropzone:hover{border-color:#f9731680;background:#f973160d}.placeholder-dropzone:focus{outline:none;border-color:#f97316;box-shadow:0 0 0 3px #f973161a}.placeholder-icon{width:80px;height:80px;border-radius:50%;background:#0e1117;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.placeholder-icon svg{color:#fff}.placeholder-dropzone h4{font-size:18px;font-weight:600;color:#fff;margin:0 0 8px}.placeholder-dropzone p{font-size:14px;color:#9ca3af;text-align:center;max-width:400px;margin:0}.canvas-wrapper{border-radius:8px;overflow:hidden;box-shadow:0 20px 50px #00000080;border:1px solid var(--color-border);width:fit-content;height:fit-content;margin:0 auto;display:block;background:#0e1117;line-height:0}.canvas-wrapper canvas{display:block;width:100%;height:100%;margin:0;touch-action:none}@media (max-width: 1200px){.canvas-wrapper{max-width:100%;width:fit-content;height:fit-content}.canvas-wrapper canvas{width:100%;height:100%}}.canvas-footer-wrapper{width:100%;display:flex;justify-content:center}.canvas-footer{display:flex;justify-content:center;gap:16px;width:100%;max-width:100%;flex-wrap:wrap}@media (max-width: 1200px){.canvas-footer{position:sticky;bottom:0;background:#0e1117;padding:12px;margin:-12px;border-top:1px solid rgba(255,255,255,.08);gap:12px}}.btn-reset{background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;flex:1;box-shadow:0 0 15px #f43f5e59;justify-content:center}.btn-reset:hover{background:linear-gradient(135deg,#e11d48,#f43f5e);box-shadow:0 0 25px #f43f5e8c;transform:translateY(-2px)}.btn-action{color:#fff;border:none;padding:14px 24px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s ease;white-space:nowrap;flex:1;min-width:200px;box-shadow:0 4px 12px #0000004d}.btn-action:first-child{background:linear-gradient(135deg,#6b7280,#4b5563)}.btn-action:first-child:hover{background:linear-gradient(135deg,#4b5563,#374151);transform:translateY(-2px);box-shadow:0 6px 16px #6b728066}.btn-action:nth-child(2){background:linear-gradient(135deg,#3b82f6,#2563eb)}.btn-action:nth-child(2):hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.btn-action:nth-child(3){background:linear-gradient(135deg,#10b981,#059669)}.btn-action:nth-child(3):hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-2px);box-shadow:0 6px 16px #10b98166}.btn-save{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;box-shadow:0 0 15px #10b98159;justify-content:center;white-space:nowrap}.btn-save:hover{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 0 25px #10b9818c;transform:translateY(-2px)}.text-controls{display:flex;flex-direction:column;gap:14px;margin-top:12px;padding-top:14px;border-top:1px solid #30363d}.select-input{width:100%;padding:10px;background:#1f242b;color:#c9d1d9;border:1px solid #30363d;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.select-input:hover{border-color:#f97316;box-shadow:0 0 8px #f9731633}.select-input:focus{outline:none;border-color:#f97316;box-shadow:0 0 0 3px #f9731633}.color-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.color-control{display:flex;flex-direction:column;gap:6px}.color-control label{font-size:12px;color:#b1bac4;font-weight:600}.color-input{width:100%;height:40px;padding:4px;background:#1f242b;border:1px solid #30363d;border-radius:8px;cursor:pointer;transition:all .2s}.color-input:hover{border-color:#f97316;box-shadow:0 0 8px #f9731633}.color-input-wrapper{position:relative;width:100%;height:40px}.no-background-indicator{width:100%;height:40px;border:1px solid #30363d;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#111827;transition:all .2s}.no-background-indicator:hover{border-color:#f97316;box-shadow:0 0 8px #f9731633}.no-background-indicator span{background:#000000d9;color:#fff;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500}.clear-color-btn{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;background:#000000b3;color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;z-index:10}.clear-color-btn:hover{background:#f97316cc}.button-group{display:flex;gap:8px}.style-btn{flex:1;padding:12px;background:#1f242b;color:#b1bac4;border:1px solid #30363d;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.style-btn:hover{background:#161b22;border-color:#f97316;color:#f97316;box-shadow:0 0 10px #f9731640}.style-btn.active{background:linear-gradient(135deg,#f9731633,#fb923c33);color:#f97316;border-color:#f97316;box-shadow:0 0 15px #f9731666}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:#050606}.sidebar::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#f97316}@media (max-width: 768px){.editor-container{padding:8px}.editor-header{padding:12px 16px}.header-content h1{font-size:18px}.sidebar{width:100%;max-height:40vh;padding:16px;overflow-y:auto}.editor-main{flex-direction:column;gap:16px}.canvas-area{padding:16px;min-height:50vh}.canvas-wrapper{max-width:100%;width:100%}.btn-primary,.btn-secondary{min-height:48px;padding:14px 20px;font-size:16px}.filter-btn{min-height:48px;padding:16px 12px}.slider{height:8px;min-height:48px}.slider::-webkit-slider-thumb{width:24px;height:24px}.slider::-moz-range-thumb{width:24px;height:24px}.color-input{width:48px;height:48px}.select-input{padding:12px;font-size:16px}.style-btn{min-width:48px;min-height:48px;font-size:18px}.sidebar-section{padding:12px;gap:12px}.adjustment-control{gap:12px}.filter-grid{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 480px){.editor-header{padding:8px 12px}.header-content h1{font-size:16px}.sidebar{padding:12px;max-height:35vh}.canvas-area{padding:12px;min-height:45vh}.canvas-footer{gap:8px;padding:12px 0}.btn-reset,.btn-save{padding:12px 16px;font-size:14px}.filter-grid{grid-template-columns:1fr}.color-controls{flex-direction:column;gap:12px}}.crop-controls{display:flex;gap:8px;margin-top:12px}.btn-crop-apply{flex:1;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .3s ease;box-shadow:0 0 10px #10b9814d}.btn-crop-apply:hover{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 0 15px #10b98180;transform:translateY(-1px)}.btn-crop-cancel{flex:1;background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .3s ease;box-shadow:0 0 10px #f43f5e4d}.btn-crop-cancel:hover{background:linear-gradient(135deg,#e11d48,#f43f5e);box-shadow:0 0 15px #f43f5e80;transform:translateY(-1px)}.text-actions{margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border)}.btn-delete-text{width:100%;padding:10px 16px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease;box-shadow:0 0 10px #ef44444d}.btn-delete-text:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 0 15px #ef444480;transform:translateY(-1px)}@keyframes glow-pulse{0%,to{box-shadow:0 0 15px #3b82f659}50%{box-shadow:0 0 25px #3b82f68c}}.placeholder-upload-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;min-height:450px}@media (max-width: 768px){.placeholder-upload-options{grid-template-columns:1fr;min-height:auto}}.placeholder-option{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed rgba(255,255,255,.1);border-radius:8px;background:#0e1117;cursor:pointer;transition:all .3s ease;padding:32px 16px;text-align:center}.placeholder-option:hover{border-color:#f9731680;background:#f973160d;transform:translateY(-2px)}.placeholder-option:focus{outline:none;border-color:#f97316;box-shadow:0 0 0 3px #f973161a}.placeholder-option h4{font-size:18px;font-weight:600;color:#fff;margin:0 0 8px}.placeholder-option p{font-size:14px;color:#9ca3af;text-align:center;max-width:300px;margin:0}.btn-action:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.media-library-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background-color:#000000e6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.media-library-modal{background-color:#171d27;border:1px solid rgba(255,255,255,.05);border-radius:8px;max-width:1200px;width:90%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.media-library-header{background-color:#050606;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.05)}.media-library-title{font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;margin:0}.media-library-title svg{color:#fb923c}.media-library-close{padding:8px;border-radius:6px;color:#9ca3af;background:transparent;border:none;cursor:pointer;transition:all .2s}.media-library-close:hover{color:#fff;background-color:#ffffff1a}.media-library-body{flex:1;overflow-y:auto;padding:24px}.media-library-loading,.media-library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;color:#9ca3af;text-align:center}.media-library-loading svg,.media-library-empty svg{margin-bottom:12px;opacity:.5}.media-library-loading svg.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.media-library-error{padding:16px;background-color:#dc262633;border:1px solid #dc2626;color:#fca5a5;border-radius:8px;font-size:14px}.media-library-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.media-library-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.1);background:transparent;cursor:pointer;transition:all .2s;padding:0}.media-library-item:hover{border-color:#3b82f6;transform:scale(1.02)}.media-library-image{width:100%;height:100%;object-fit:cover;transition:transform .2s}.media-library-item:hover .media-library-image{transform:scale(1.05)}.media-library-item-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.media-library-item:hover .media-library-item-overlay{opacity:1}.media-library-item-overlay span{color:#fff;font-size:12px;font-weight:500;padding:6px 12px;background-color:#00000080;border-radius:999px}.media-library-loading-more{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:#9ca3af;font-size:14px}.media-library-loading-more svg{animation:spin 1s linear infinite}.media-library-end{text-align:center;padding:16px;color:#9ca3af;font-size:14px}@media (max-width: 768px){.media-library-modal{width:95%;max-height:85vh}.media-library-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}}.app{width:100%;height:100%;display:flex;flex-direction:column;background:#050606}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#050606;color:#c9d1d9;overflow:hidden}#root{width:100vw;height:100vh}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#050606}::-webkit-scrollbar-thumb{background:#30363d;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#f97316}