.maincont .df-h1{font-size:28px;font-weight:700;color:#1f2937;margin:0 0 6px;text-align:center;line-height:1.25}.maincont .df-sub{font-size:15px;color:#4b5563;margin:0 0 24px;text-align:center}.df-result{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:0;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;margin-top:20px}.df-preview-wrap{background:#f3f4f6;padding:20px;display:flex;align-items:center;justify-content:center;min-height:360px;position:relative}.df-preview-canvas{max-width:100%;max-height:480px;display:block;box-shadow:0 2px 8px rgba(0,0,0,0.12)}.df-loading{position:absolute;inset:0;background:rgba(243,244,246,0.85);display:flex;align-items:center;justify-content:center;font-weight:600;color:#047e73;font-size:15px}.df-loading.hide{display:none}.df-sidebar{background:#fff;border-left:1px solid #e5e7eb;padding:20px;display:flex;flex-direction:column;gap:18px}.df-section-title{font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.05em;margin:0 0 8px}.df-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.df-preset{border:1px solid #d1d5db;background:#fff;color:#1f2937;padding:10px 8px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:all 0.12s}.df-preset:hover{border-color:#047e73;color:#047e73}.df-preset.active{background:#047e73;border-color:#047e73;color:#fff}.df-slider-wrap{margin-top:14px}.df-slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px}.df-slider-label{color:#4b5563;font-weight:500}.df-slider-value{background:#e0f2f0;color:#047e73;font-weight:700;padding:2px 10px;border-radius:12px;font-size:12px;min-width:42px;text-align:center}.df-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;background:linear-gradient(to right,#047e73 0%,#047e73 50%,#e5e7eb 50%,#e5e7eb 100%);cursor:pointer;padding:0;margin:0;box-sizing:border-box}.df-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#047e73;border:3px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(4,126,115,0.35);transition:transform 0.1s}.df-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.df-slider::-webkit-slider-thumb:active{transform:scale(1.25)}.df-slider::-moz-range-thumb{width:20px;height:20px;background:#047e73;border:3px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(4,126,115,0.35);transition:transform 0.1s}.df-slider::-moz-range-thumb:hover{transform:scale(1.15)}.df-slider::-moz-range-track{background:transparent;border:none}.df-slider:focus{outline:none}.df-actions{display:flex;flex-direction:column;gap:8px}.df-btn{padding:11px 14px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid transparent;transition:all 0.12s}.df-btn-primary{background:#4956a5;color:#fff}.df-btn-primary:hover{background:#3d4a92}.df-btn-secondary{background:transparent;color:#4956a5;border-color:#4956a5}.df-btn-secondary:hover{background:#f0f2fa}.df-btn-ghost{background:transparent;color:#6b7280}.df-btn-ghost:hover{color:#1f2937}.df-result.hide{display:none!important}@media (max-width:800px){.df-result{grid-template-columns:1fr}.df-sidebar{border-left:none;border-top:1px solid #e5e7eb}.df-presets{grid-template-columns:1fr 1fr 1fr 1fr}}