.upload-area{border:2px dashed #cbd5e1;border-radius:.75rem;padding:2rem 1rem;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s}.upload-area:hover,.upload-area.dragover{border-color:var(--color-primary);background-color:var(--color-primary-bg)}.upload-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.upload-content>i{font-size:2rem;color:var(--color-primary)}.upload-content h3{font-weight:600}.file-types{font-size:.875rem;color:#64748b}.editor-container{display:grid;gap:1.25rem}@media (min-width: 1024px){.editor-container{grid-template-columns:300px minmax(0,1fr);align-items:start}}.toolbar{display:grid;gap:.75rem}.tool-group{border:1px solid #e2e8f0;border-radius:.5rem;padding:.75rem;background-color:#fff}.tool-group h4{font-size:.875rem;font-weight:600;margin-bottom:.5rem}.tool-buttons,.filter-buttons,.action-buttons,.preset-buttons,.crop-actions{display:flex;flex-wrap:wrap;gap:.5rem}main .tool-btn,main .filter-btn,main .action-btn{font-size:.8125rem;padding:.4rem .7rem}main .tool-btn.active,main .filter-btn.active{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}main .action-btn.download{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}main .action-btn:disabled{opacity:.6;cursor:wait}.adjustment-controls,.save-options{display:grid;gap:.5rem;margin-bottom:.5rem}.control-item{display:grid;grid-template-columns:6.5em minmax(0,1fr) 3em;align-items:center;gap:.5rem;font-size:.8125rem}.control-item[hidden]{display:none}.control-item select{grid-column:span 2}.canvas-area{min-width:0}.canvas-stage{display:flex;align-items:center;justify-content:center;min-height:240px;padding:.5rem;border:1px solid #e2e8f0;border-radius:.5rem;overflow:hidden}#imageCanvas{display:block;max-width:100%;height:auto}.canvas-stage.cropping #imageCanvas{touch-action:none;cursor:crosshair}.canvas-info{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.5rem;font-size:.875rem;color:#475569}.edit-summary{margin-top:.25rem;font-size:.8125rem;color:#64748b}.crop-panel{margin-bottom:.75rem;padding:.75rem;border:1px solid var(--color-primary);border-radius:.5rem;background-color:var(--color-primary-bg)}.crop-panel[hidden]{display:none}.crop-help{font-size:.8125rem;color:#475569}.crop-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.5rem;margin:.5rem 0 .75rem}.crop-fields label{display:flex;flex-direction:column;gap:.25rem;font-size:.8125rem;font-weight:600}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;align-items:center;justify-content:center;padding:1rem;background-color:#0f172a80}.modal-content{width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:1.25rem;border-radius:.75rem;background-color:#fff}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.modal-body .option-group{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem}.modal-body .option-group input[type=number]{max-width:9rem}.preset-sizes{margin-top:1rem}.preset-sizes h4{font-weight:600;margin-bottom:.5rem}.preset-sizes .hint{margin-top:.5rem}.modal-footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}.usage-guide h4,.supported-formats h4,.tips-section h4{font-weight:600;margin-bottom:.5rem}.usage-guide ol{list-style:decimal;padding-left:1.5rem}.usage-guide ul,.tips-section ul{list-style:disc;padding-left:1.5rem}.usage-guide li,.tips-section li{margin-top:.25rem}.format-list{display:grid;gap:.5rem}.format-item{display:flex;flex-wrap:wrap;gap:.25rem 1rem}.format-name{min-width:7rem;font-weight:600}