:root{--primary-bg:#fff;--secondary-bg:#f3f4f6;--text-primary:#1f2937;--text-secondary:#4b5563;--accent-color:#4f46e5;--border-color:#d1d5db;--shadow-color:rgba(0,0,0,.1);--border-radius:8px}body{background-color:var(--secondary-bg);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6;margin:0}.image-editor-app{margin:0 auto;max-width:1280px;padding:.5rem}.app-header{border-bottom:1px solid var(--border-color);margin-bottom:2rem;padding:0 1rem 1.5rem;text-align:center}.app-header h1{font-size:1.8rem;margin-bottom:.5rem}.app-header p{color:var(--text-secondary);font-size:1rem;margin:0 auto;max-width:600px}h2{color:var(--text-primary);font-size:1.25rem;margin-bottom:1rem}.editor-section{background:var(--primary-bg);border-radius:var(--border-radius);box-shadow:0 4px 6px -1px var(--shadow-color);display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;margin-bottom:3rem;padding:1rem}.canvas-wrapper{flex-basis:320px;flex-grow:1;padding-bottom:30px}.controls-container{flex-basis:320px;flex-grow:1;padding-left:25px}.canvas-wrapper{min-width:280px}.canvas-container{aspect-ratio:1/1;margin:0 auto;max-width:540px;position:relative;width:100%}canvas{border:1px solid var(--border-color);border-radius:var(--border-radius);height:100%;width:100%}canvas:active{cursor:grabbing}.canvas-placeholder{align-items:center;background-color:var(--secondary-bg);border-radius:var(--border-radius);color:var(--text-secondary);display:flex;flex-direction:column;height:100%;justify-content:center;left:0;padding:1rem;pointer-events:none;position:absolute;text-align:center;top:0;width:100%}.canvas-placeholder svg{color:#9ca3af;margin-bottom:1rem}.controls-container{display:flex;flex-direction:column;gap:1rem}.control-group{border-bottom:1px solid var(--border-color);padding-bottom:1rem}.control-group:last-child{border-bottom:none;padding-bottom:0}.control-group h3{color:var(--text-secondary);font-size:.9rem;font-weight:600;letter-spacing:.05em;margin-bottom:1rem;text-transform:uppercase}.type-selector{display:flex;flex-wrap:wrap;gap:.5rem}.type-selector button{background-color:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-secondary);cursor:pointer;font-size:.9rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.type-selector button:hover{background-color:var(--secondary-bg);color:var(--text-primary)}.type-selector button.active{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}.color-palette{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}.color-swatch{aspect-ratio:1/1;border:2px solid transparent;border-radius:50%;box-shadow:0 1px 3px 0 var(--shadow-color);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;width:100%}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-color)}.subheading-with-action{align-items:center;display:flex;justify-content:space-between;margin:1.5rem 0 .75rem}.subheading-with-action .control-subheading{margin:0}.randomize-btn{background-color:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-secondary);cursor:pointer;font-size:.8rem;font-weight:600;padding:.25rem .75rem;transition:all .2s ease}.randomize-btn:hover{background-color:var(--secondary-bg);border-color:#9ca3af;color:var(--text-primary)}.reset-transform-btn{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fffc;border:1px solid var(--border-color);border-radius:50%;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:10px;top:10px;transition:all .2s ease;width:40px}.reset-transform-btn:hover{background:#fff;transform:rotate(90deg)}.control-subheading{color:var(--text-secondary);font-size:.8rem;font-weight:600;letter-spacing:.05em;margin:1.5rem 0 .75rem;text-transform:uppercase}.gradient-preview{border:1px solid var(--border-color);border-radius:var(--border-radius);height:30px;margin-bottom:1rem;width:100%}.angle-selector button{min-width:50px;padding:.5rem}.gradient-stops{display:flex;flex-direction:column;gap:.75rem}.gradient-stop-editor{align-items:center;border:2px solid transparent;border-radius:var(--border-radius);cursor:pointer;display:flex;gap:.75rem;padding:.5rem}.gradient-stop-editor.active{border-color:var(--accent-color)}.stop-slider{flex:1}.stop-percentage{color:var(--text-secondary);font-size:.8rem;min-width:3ch;text-align:right}.remove-stop-btn{background:#fee2e2;border:none;border-radius:50%;color:#ef4444;cursor:pointer;font-weight:700;height:24px;width:24px}.remove-stop-btn:disabled{background:var(--border-color);color:var(--text-secondary);cursor:not-allowed}.add-stop-btn{background:var(--secondary-bg);border:1px dashed var(--border-color);border-radius:var(--border-radius);cursor:pointer;font-weight:600;margin-top:1rem;padding:.6rem;text-align:center;width:100%}.add-stop-btn:disabled{background:#e5e7eb;color:#9ca3af;cursor:not-allowed}.duotone-pickers{display:flex;gap:1rem;margin-bottom:1rem}.duotone-pickers.three-way{display:grid;grid-template-columns:repeat(3,1fr)}.duotone-picker{align-items:center;background-color:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;display:flex;flex:1;font-weight:600;gap:.5rem;justify-content:center;padding:.6rem;transition:all .2s ease}.duotone-picker.active{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color);color:var(--accent-color)}.color-indicator{border:1px solid var(--border-color);border-radius:50%;height:20px;width:20px}.bg-image-grid{gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.presets-section{background-color:var(--secondary-bg);border-radius:var(--border-radius);margin-bottom:1.5rem;padding:.75rem}.presets-section .control-subheading{margin:0 0 .75rem}.preset-input-group{display:flex;gap:.5rem;margin-bottom:1rem}.preset-input-group input{flex:1;font-size:.9rem;min-width:0;padding:.5rem .75rem}.preset-input-group button,.preset-input-group input{border:1px solid var(--border-color);border-radius:var(--border-radius)}.preset-input-group button{background-color:var(--accent-color);color:#fff;cursor:pointer;font-weight:600;padding:.5rem 1rem;transition:background-color .2s}.preset-input-group button:hover{background-color:#4338ca}.preset-list{display:flex;flex-wrap:wrap;gap:.5rem}.preset-item{align-items:center;background-color:#fff;border:1px solid var(--border-color);border-radius:999px;display:flex;overflow:hidden}.preset-apply-btn{background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:.85rem;font-weight:500;padding:.3rem .9rem;transition:background-color .2s}.preset-apply-btn:hover{background-color:#e5e7eb}.delete-preset-btn{align-items:center;align-self:stretch;background:none;border:none;border-left:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;display:flex;font-size:1.1rem;line-height:1;padding:0 .6rem;transition:background-color .2s,color .2s}.delete-preset-btn:hover{background-color:#fee2e2;color:#ef4444}.no-presets-message{color:var(--text-secondary);font-size:.9rem;margin:.5rem 0 0;text-align:center}.adjustments-grid{display:grid;gap:1rem;grid-template-columns:1fr}.adjustment-control{align-items:center;display:grid;gap:.75rem;grid-template-columns:80px 1fr 55px}.adjustment-control label{color:var(--text-secondary);font-size:.9rem;font-weight:500;white-space:nowrap}.adjustment-control input[type=range]{margin:0;width:100%}.adjustment-control span{background:var(--secondary-bg);border-radius:4px;color:var(--text-secondary);font-family:monospace;font-size:.85rem;padding:.2rem .4rem;text-align:right}.custom-bg-loader{background-color:var(--secondary-bg);border-radius:var(--border-radius);display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem;padding:.75rem}.input-group{display:flex;gap:.5rem}.input-group input[type=url]{flex:1;font-size:.9rem;min-width:0;padding:.5rem .75rem}.input-group button,.input-group input[type=url]{border:1px solid var(--border-color);border-radius:var(--border-radius)}.input-group button{background-color:var(--primary-bg);color:var(--text-primary);cursor:pointer;font-weight:600;padding:.5rem 1rem;transition:background-color .2s}.input-group button:hover{background-color:#e5e7eb}.or-divider{color:var(--text-secondary);font-size:.8rem;font-weight:600;text-align:center}.file-input-hidden{height:.1px;opacity:0;overflow:hidden;position:absolute;width:.1px;z-index:-1}.file-upload-label{align-items:center;background:var(--primary-bg);border:1px dashed var(--border-color);border-radius:var(--border-radius);color:var(--text-secondary);cursor:pointer;display:flex;font-weight:600;gap:.5rem;justify-content:center;padding:.6rem;transition:all .2s ease;width:100%}.file-upload-label:hover{background-color:#e5e7eb;border-color:#9ca3af;color:var(--text-primary)}.image-grid .image-card.active{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-color);transform:translateY(-2px)}.split-heading{margin-top:1.5rem}.effects-toggles{display:flex;flex-direction:column;gap:.75rem}.effect-toggle{background-color:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:500;gap:.75rem;padding:.75rem;text-align:left}.effect-toggle,.effect-toggle .checkbox{align-items:center;display:flex;transition:all .2s ease}.effect-toggle .checkbox{border:2px solid var(--border-color);border-radius:4px;color:#fff;font-weight:700;height:20px;justify-content:center;width:20px}.effect-toggle.active{border-color:var(--accent-color);color:var(--accent-color)}.effect-toggle.active .checkbox{background-color:var(--accent-color);border-color:var(--accent-color)}.download-group{margin-top:auto}.pagination-controls{align-items:center;display:flex;gap:1rem;justify-content:center;margin-top:1rem;padding-bottom:1rem}.pagination-controls button{background-color:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer;font-weight:600;padding:.5rem 1rem;transition:background-color .2s}.pagination-controls button:hover:not(:disabled){background-color:var(--secondary-bg)}.pagination-controls button:disabled{color:var(--text-secondary);cursor:not-allowed;opacity:.6}.pagination-controls span{color:var(--text-secondary);font-weight:500}.download-button{align-items:center;background-color:var(--accent-color);border:none;border-radius:var(--border-radius);color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center;padding:.8rem 1.5rem;transition:background-color .2s ease;width:100%}.download-button:hover:not(:disabled){background-color:#4338ca}.download-button:disabled{background-color:#a5b4fc;cursor:not-allowed}.grid-section{padding-top:1rem}.dual-grid-wrapper{display:grid;gap:2rem;grid-template-columns:1fr}.image-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.image-card{background-color:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;position:relative;transition:transform .2s ease,box-shadow .2s ease}.image-card:focus-within,.image-card:hover{box-shadow:0 10px 15px -3px var(--shadow-color);transform:translateY(-5px)}.image-card img{aspect-ratio:1/1;display:block;-o-object-fit:cover;object-fit:cover;width:100%}.card-download-link{background-color:#1f2937cc;color:#fff;display:block;font-size:.8rem;font-weight:500;margin-top:auto;padding:.5rem;text-align:center;text-decoration:none;transition:background-color .2s ease;white-space:nowrap}.card-download-link:hover{background-color:#1f2937}.app-footer{border-top:1px solid var(--border-color);color:var(--text-secondary);font-size:.9rem;margin-top:4rem;padding-top:2rem;text-align:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.control-group.collapsible{padding-bottom:0}.control-group h2.accordion-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;margin:0;padding:.75rem 0;-webkit-tap-highlight-color:transparent}.accordion-header .chevron{color:var(--text-secondary);transition:transform .3s ease}.accordion-header .chevron.rotated{transform:rotate(180deg)}.accordion-content{animation:fadeIn .4s ease;padding-bottom:1rem}.accordion-header .header-actions{align-items:center;display:flex;gap:1rem}.accordion-content .control-group-inner{padding-top:.5rem}.accordion-content .control-group-inner:not(:first-child){border-top:1px solid var(--secondary-bg);margin-top:1rem;padding-top:1rem}.download-group .accordion-content{padding-top:.5rem}@media(min-width:480px){.adjustments-grid{gap:1rem 1.5rem;grid-template-columns:repeat(2,1fr)}}@media(min-width:768px){.image-editor-app{padding:1rem}.app-header h1{font-size:2.5rem}.editor-section{padding:2rem}.dual-grid-wrapper{grid-template-columns:1fr 1fr}.adjustments-grid{grid-template-columns:1fr}.image-grid{gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.download-button{width:auto}}@media(min-width:1024px){.app-header h1{font-size:3rem}.adjustments-grid{grid-template-columns:repeat(2,1fr)}}