body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f0f2f5;padding:1em;color:#333;line-height:1.6}h1{color:#e67e22;margin-bottom:1em;text-align:center}h3{margin-top:0;font-weight:600;color:#555}.section{max-width:1200px;margin:0 auto 2em;padding:1.5em;background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000014}button,input[type=button],input[type=submit]{background:#f39c12;color:#fff;border:none;padding:.8em 1.5em;cursor:pointer;border-radius:8px;margin-top:.5em;font-weight:600;transition:background-color .2s ease}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#e67e22}#upload-area{border:3px dashed #f39c12;border-radius:12px;padding:3em;text-align:center;color:#999;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.upload-actions{margin-top:1.5em;display:flex;gap:1em;flex-wrap:wrap}#upload-area.dragover{background:#fff3e1;border-color:#e67e22;color:#e67e22}#uploaded-list{display:flex;flex-wrap:wrap;gap:15px;margin-top:1.5em}#uploaded-list .img-container{position:relative;width:120px;height:120px}#uploaded-list img{width:100%;height:100%;object-fit:cover;border:2px solid #ddd;border-radius:8px;cursor:pointer;transition:border-color .2s,box-shadow .2s}#uploaded-list img.selected{border-color:#f39c12;box-shadow:0 0 0 4px #f39c1266}#uploaded-list input[type=checkbox]{position:absolute;top:8px;left:8px;width:22px;height:22px;opacity:.9;z-index:2;cursor:pointer}#tabs{border-bottom:2px solid #e0e0e0;display:flex;flex-wrap:wrap}#tabs button{background:none;border:none;padding:.8em 1.5em;font-weight:600;color:#777;border-bottom:3px solid transparent;white-space:normal;margin-top:0;border-radius:0}#tabs button.active{color:#e67e22;border-color:#e67e22}.tab-content{display:none;padding-top:1.5em}.tab-content.active{display:block}.tool-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5em;align-items:center}.control-group{display:flex;flex-direction:column;gap:.5em}.control-group label{font-weight:500;color:#555}input[type=text],input[type=number],select{width:100%;padding:.8em;border:1px solid #ccc;border-radius:8px;font-size:1em;box-sizing:border-box}input[type=range]{width:100%}#resize fieldset{margin-bottom:1.5em}#resize fieldset:last-of-type{margin-bottom:0}#compress-list span,#resize-preview,#whitebg-preview{margin-top:1em;display:block}#compress-list span{display:inline-block;background:#fff3e1;color:#8c5a0a;padding:.4em .8em;border-radius:6px;margin:.3em;font-size:.9em}#crop-toolbar{display:flex;gap:1em;flex-wrap:wrap;margin-bottom:1em}#crop-toolbar button.active{background:#e67e22;color:#fff}#crop-canvas,#enhance-canvas{max-width:100%;height:400px;border:1px solid #ccc;border-radius:8px;margin-top:1em;overflow:hidden}#removebg-output,#removebg-canvas,#rotate-preview-image{max-width:100%;max-height:400px;height:auto;display:block;margin:1em auto;border:1px solid #ccc;border-radius:8px;object-fit:contain}@media (max-width: 768px){#crop-canvas,#enhance-canvas{height:300px}}@media (max-width: 768px){body{padding:.5em}.section{padding:1em}h1{font-size:1.8em}#upload-area{padding:2em 1em}#tabs button{padding:.8em 1em}}#crop-canvas{width:100%;max-width:100%;min-height:300px;display:flex;justify-content:center;align-items:center;overflow:hidden;background-color:#f9f9f9}#image-to-crop{max-width:100%;max-height:80vh;object-fit:contain;display:block}#enhance-canvas{max-width:100%;height:auto;display:block;margin:1em auto;background-color:#f8f8f8;border-radius:8px;border:1px solid #ccc}#removebg .tool-controls{display:flex;align-items:center;gap:1em}.preview-container{position:relative;width:100%;margin:20px auto;border:1px solid #ccc;overflow:hidden}.preview-container canvas{display:block;width:100%;height:100%}.watermark-type-selection{margin-bottom:1.5em}.watermark-controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5em;align-items:center}.watermark-controls-grid .control-group{margin-bottom:1em}.watermark-controls-grid .control-group:last-child{margin-bottom:0}.watermark-controls-grid .full-width{grid-column:1 / -1;margin-bottom:1em}.watermark-controls-grid input[type=color]{width:50px;height:50px;padding:0;border:none;border-radius:8px;cursor:pointer}.button-style-label{display:inline-block;padding:.8em 1.5em;background-color:#f39c12;color:#fff;border-radius:8px;cursor:pointer;text-align:center;font-weight:600;transition:background-color .2s ease}.button-style-label:hover{background-color:#e67e22}.watermark-overlay{position:absolute}.resize-handle{position:absolute;width:10px;height:10px;background:#f39c12;border:1px solid #e67e22;border-radius:50%;cursor:nwse-resize;z-index:10}.resize-handle.nw{top:-5px;left:-5px;cursor:nwse-resize}.resize-handle.ne{top:-5px;right:-5px;cursor:nesw-resize}.resize-handle.sw{bottom:-5px;left:-5px;cursor:nesw-resize}.resize-handle.se{bottom:-5px;right:-5px;cursor:nwse-resize}.disable-pointer-events{pointer-events:none!important}.tutorial{margin:20px 0;border:1px solid #e0e0e0;border-radius:8px;background-color:#f9f9f9;transition:all .3s ease}.tutorial[open]{background-color:#f0f0f0}.tutorial summary{padding:12px 15px;font-weight:700;cursor:pointer;outline:none;list-style-type:none;position:relative;color:#e67e22}.tutorial summary::-webkit-details-marker{display:none}.tutorial summary:before{content:"▶";margin-right:10px;font-size:.8em;transition:transform .2s ease;display:inline-block}.tutorial[open] summary:before{transform:rotate(90deg)}.tutorial p{padding:15px 15px 15px 35px;margin:0;line-height:1.7;color:#333;border-top:1px solid #e0e0e0;background-color:#fff;border-radius:0 0 8px 8px}footer{background-color:#f8f9fa;color:#6c757d;padding:2em 1em;text-align:center;border-top:1px solid #e7e7e7;margin-top:2em}.footer-container{max-width:1200px;margin:0 auto}.footer-links{margin-bottom:1em}.footer-links a{color:#343a40;text-decoration:none;margin:0 15px;transition:color .2s ease-in-out}.footer-links a:hover{color:#e67e22;text-decoration:underline}.footer-copyright{font-size:.9em}#tutorials-section{background-color:#f9f9f9;padding:30px;margin-top:40px;border-radius:8px;box-shadow:0 2px 5px #0000000d;text-align:center}#tutorials-section h2{color:#333;font-size:2em;margin-bottom:20px;border-bottom:2px solid #eee;padding-bottom:10px;display:inline-block}#tutorials-section ul{list-style:none;padding:0;margin:0 auto 20px;max-width:600px}#tutorials-section li{margin-bottom:10px}#tutorials-section ul a,#tutorials-section p a{color:#007bff;text-decoration:none;font-weight:700;transition:color .3s ease}#tutorials-section ul a:hover,#tutorials-section p a:hover{color:#0056b3;text-decoration:underline}#tutorials-section p{margin-top:20px}.article-list{list-style:none;padding:0;margin:20px 0}.article-list li{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:15px;padding:20px;box-shadow:0 2px 5px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.article-list li:hover{transform:translateY(-5px);box-shadow:0 5px 15px #0000001a}.article-list li a{display:block;font-size:1.5em;font-weight:700;color:#e67e22;margin-bottom:10px}.article-list li a:hover{color:#f39c12;text-decoration:none}.article-list li p{font-size:1em;color:#666;line-height:1.6}.static-page h1{font-size:2.5em;color:#e67e22;margin-bottom:.5em;text-align:left}.static-page h2{font-size:1.8em;color:#333;margin-top:1.5em;margin-bottom:.8em;border-bottom:1px solid #eee;padding-bottom:5px}.static-page p,.static-page li{font-size:1.1em;line-height:1.8;color:#444;margin-bottom:1em}.static-page ol,.static-page ul{margin-left:20px;margin-bottom:1.5em}.static-page ol li,.static-page ul li{margin-bottom:.5em}.no-dot{list-style:none;padding-left:0}.blog-list{list-style:none;padding:0;margin:20px 0}.blog-list li{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:15px;padding:20px;box-shadow:0 2px 5px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.blog-list li:hover{transform:translateY(-5px);box-shadow:0 5px 15px #0000001a}.blog-list li a{display:block;font-size:1.5em;font-weight:700;color:#e67e22;margin-bottom:10px;text-decoration:none}.blog-list li a:hover{color:#f39c12;text-decoration:underline}