body{color:#333;max-width:900px;margin:40px auto;padding:0 20px;font-family:system-ui,-apple-system,sans-serif}.dropzone{text-align:center;cursor:pointer;border:2px dashed #ccc;border-radius:8px;padding:40px;transition:all .2s}.dropzone.active{background:#f0f7ff;border-color:#06c}.controls{background:#fafafa;border:1px solid #ddd;border-radius:8px;margin-top:20px;padding:20px;display:none}.control-group{margin-bottom:15px}label{font-weight:500}input[type=number],select,input[type=range]{border:1px solid #ccc;border-radius:4px;margin-top:5px;padding:6px 10px}button{color:#fff;cursor:pointer;background:#06c;border:none;border-radius:4px;margin-right:5px;padding:10px 20px;font-weight:600}button:disabled{cursor:not-allowed;background:#ccc}.heatmap-container{text-align:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-top:30px;padding:20px;display:none}.ssim-badge{color:#1e7e34;background:#eef9f2;border:1px solid #28a745;border-radius:20px;margin-top:10px;padding:6px 14px;font-size:1.1em;font-weight:700;display:inline-block}canvas{border:1px solid #ccc;border-radius:4px;max-width:100%;height:auto;margin-top:15px}#statusText{color:#06c;margin-top:15px;font-weight:600}.preset-row{margin-top:8px}.preset-btn{color:#06c;background:#e8f0fb;border:1px solid #b9d2f2;padding:4px 10px;font-size:.85em}.hint{color:#666;margin-top:8px;font-size:.85em}.result-card{background:#f4fbf6;border:1px solid #28a745;border-radius:8px;margin-top:15px;padding:15px}.result-sizes{font-size:1.15em;font-weight:700}.saved-badge{color:#1e7e34;background:#eef9f2;border:1px solid #28a745;border-radius:14px;margin-left:10px;padding:3px 10px;font-size:.85em}.heatmap-legend{color:#555;justify-content:center;align-items:center;gap:10px;font-size:.85em;display:flex}.legend-bar{background:linear-gradient(90deg,#fff,#000);border:1px solid #ccc;border-radius:3px;width:220px;height:12px}.guide{border-top:1px solid #e0e0e0;margin-top:40px;padding-top:20px}.guide-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:15px 0;display:grid}.guide-card{background:#fafafa;border:1px solid #ddd;border-radius:8px;padding:12px 15px}.guide-card h3{margin:0 0 6px}.guide-card p{margin:0;font-size:.9em}.guide details{border:1px solid #ddd;border-radius:8px;margin-top:10px;padding:10px 15px}.guide summary{cursor:pointer;font-weight:600}.guide li{margin-top:6px;font-size:.9em}.batch-panel{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-top:30px;padding:20px}.chart-scroll,.table-scroll{overflow-x:auto}.chart-scroll canvas{cursor:pointer;max-width:none;margin-top:5px}.batch-table{border-collapse:collapse;width:100%;margin:10px 0 15px;font-size:.9em}.batch-table th,.batch-table td{text-align:left;word-break:break-word;border-bottom:1px solid #eee;padding:6px 8px}.batch-table td .preset-btn{margin:0 4px 0 0}.edit-panel{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:15px;padding:10px 15px}.edit-panel summary{cursor:pointer;font-weight:600}.edit-body{flex-wrap:wrap;gap:20px;margin-top:12px;display:flex}.edit-preview{flex:320px}.edit-tools{flex:280px}.crop-wrap{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;max-width:100%;line-height:0;display:inline-block;position:relative}.crop-wrap canvas{margin-top:0;display:block}.crop-box{pointer-events:none;box-sizing:border-box;border:2px dashed #fff;position:absolute;box-shadow:0 0 0 9999px #00000073}.crop-wrap{overflow:hidden}.tool-row{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.tool-row .preset-btn{margin:0}.slider-row{margin-bottom:8px}.slider-row label{justify-content:space-between;font-size:.9em;display:flex}.slider-row input[type=range]{box-sizing:border-box;width:100%}