@font-face{font-family:'Font Awesome 6 Free';font-style:normal;font-weight:900;src:url(/webfonts/fa-solid-900.woff2) format('woff2');font-display:swap}@font-face{font-family:'Font Awesome 6 Brands';font-style:normal;font-weight:400;src:url(/webfonts/fa-brands-400.woff2) format('woff2');font-display:swap}.icon{display:inline-block;font-size:.8rem;color:var(--text);margin:0 5px}.icon-moon::before{content:"\f186";font-family:'Font Awesome 6 Free';font-weight:900}.icon-home::before{content:"\f015";font-family:'Font Awesome 6 Free';font-weight:900}.icon-info-circle::before{content:"\f05a";font-family:'Font Awesome 6 Free';font-weight:900}.icon-question-circle::before{content:"\f059";font-family:'Font Awesome 6 Free';font-weight:900}.icon-envelope::before{content:"\f0e0";font-family:'Font Awesome 6 Free';font-weight:900}.icon-cloud-download::before{content:"\f381";font-family:'Font Awesome 6 Free';font-weight:900}.icon-crop::before{content:"\f125";font-family:'Font Awesome 6 Free';font-weight:900}.icon-download::before{content:"\f019";font-family:'Font Awesome 6 Free';font-weight:900}.icon-image::before{content:"\f03e";font-family:'Font Awesome 6 Free';font-weight:900}.icon-compress-alt::before{content:"\f422";font-family:'Font Awesome 6 Free';font-weight:900}.icon-magic::before{content:"\f0d0";font-family:'Font Awesome 6 Free';font-weight:900}.icon-file-image::before{content:"\f1c5";font-family:'Font Awesome 6 Free';font-weight:900}.icon-chevron-down::before{content:"\f078";font-family:'Font Awesome 6 Free';font-weight:900}.icon-crop-alt::before{content:"\f565";font-family:'Font Awesome 6 Free';font-weight:900}.icon-upload::before{content:"\f093";font-family:"Font Awesome 6 Free";font-weight:900}.icon-sun::before{content:"\f185";font-family:'Font Awesome 6 Free';font-weight:900}.icon-facebook::before{content:"\f09a";font-family:'Font Awesome 6 Brands';font-weight:400}.icon-twitter::before{content:"\f099";font-family:'Font Awesome 6 Brands';font-weight:400}.icon-instagram::before{content:"\f16d";font-family:'Font Awesome 6 Brands';font-weight:400}


    
    @font-face{font-family:'Segoe UI';font-display:swap}:root{--primary-color:#4a6bff;--secondary-color:#3f37c9;--dark-color:#121212;--light-color:#f8f9fa;--gray-color:#2a2a2a;--border-color:#444;--success:#4cc9f0;--text-color:#f8f9fa;--bg-color:#121212;--container-bg:#2a2a2a}[data-theme="light"]{--text-color:#333;--bg-color:#f8f9fa;--container-bg:#ffffff;--dark-color:#e9ecef;--gray-color:#dee2e6;--border-color:#ced4da}[data-theme="dark"]{--bg-color:#1a1a2e;--text-color:#f8f9fa;--card-bg:#16213e;--border:#2d4059}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-color);color:var(--text-color);font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;transition:background 0.3s ease,color 0.3s ease}header{background:var(--container-bg);padding:15px 0;box-shadow:0 2px 10px rgb(0 0 0 / .1);position:sticky;top:0;z-index:100;transition:background 0.3s ease}.header-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px}.logo{display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:700;color:var(--primary-color);text-decoration:none}.logo i{color:var(--primary-color)}nav ul{display:flex;list-style:none;gap:1.5rem}nav a{color:var(--text-color);text-decoration:none;font-weight:500;transition:color 0.3s;display:flex;align-items:center;gap:5px;font-size:.8em}nav a:hover{color:var(--primary-color)}.theme-toggle{background:var(--primary-color);color:#fff;border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s}.theme-toggle:hover{background:var(--primary-color);transform:scale(1.05)}ul{padding:10px 20px}main{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.page-title{text-align:center;margin-bottom:2rem;color:#4361ee}.cropper-container{background:var(--container-bg);border-radius:10px;padding:2rem;box-shadow:0 4px 20px rgb(0 0 0 / .2)}.image-wrapper{position:relative;display:inline-block;margin:20px auto;border-radius:8px;overflow:hidden;box-shadow:0 2px 15px rgb(0 0 0 / .3)}#sourceImage{max-width:100%;display:block;border-radius:6px}#overlay{position:absolute;border:2px dashed var(--primary-color);background:rgb(67 97 238 / .2);display:none;box-sizing:border-box;cursor:move;border-radius:4px}#controls{margin-top:2rem;display:flex;flex-direction:column;gap:1.5rem}.controls-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center}.input-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.5rem;justify-content:center}input[type="file"]{display:none}.file-input-label{background:var(--secondary-color);color:#fff;padding:.8rem 1.5rem;border-radius:6px;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:8px}.file-input-label:hover{background:var(--secondary-color);transform:translateY(-2px)}#urlInput{flex:1;min-width:250px;padding:.8rem;background:var(--dark-color);border:1px solid var(--border-color);color:var(--text-color);border-radius:6px;transition:border 0.3s}#urlInput:focus{border-color:var(--primary-color);outline:none}button{background:var(--secondary-color);border:none;color:var(--light-color);padding:.8rem 1.5rem;cursor:pointer;border-radius:6px;font-weight:500;transition:all 0.3s;display:flex;align-items:center;gap:8px}button:hover{background:var(--secondary-color);transform:translateY(-2px);box-shadow:0 4px 8px rgb(0 0 0 / .2)}button:disabled{opacity:.5;pointer-events:none;transform:none}#cropOptions{margin:1.5rem 0;display:none}#cropOptions .input-row{justify-content:center;background:rgb(0 0 0 / .2);padding:1rem;border-radius:8px}#cropOptions label{font-weight:500;color:var(--primary-color)}#cropWidth,#cropHeight{width:80px;padding:.5rem;background:var(--dark-color);border:1px solid var(--border-color);color:var(--text-color);border-radius:4px}#ratioSelect,#customRatio{padding:.5rem;background:var(--dark-color);border:1px solid var(--border-color);color:var(--text-color);border-radius:4px}#resultCanvas{display:none;max-width:100%;margin:2rem auto 0;border-radius:8px;border:1px solid var(--border-color);box-shadow:0 2px 15px rgb(0 0 0 / .2)}#downloadBtn{display: none;margin: 1rem auto;text-decoration: none;background: var(--success);padding: 0.8rem 1.5rem;border: none;border-radius: 6px;color: var(--dark);font-weight: bold;transition: all 0.3s;text-align: center;max-width: 200px;}#downloadBtn:hover{background: #3aa8d4;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}.tools-section{margin:3rem auto;max-width:1200px}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}.tool-card{background:var(--container-bg);border-radius:10px;padding:1.5rem;transition:transform 0.3s,box-shadow 0.3s;border:1px solid var(--border-color)}.tool-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgb(0 0 0 / .1)}.tool-icon{font-size:2rem;color:var(--primary-color);margin-bottom:1rem}.tool-card h3{margin-bottom:.5rem;color:var(--primary-color)}.faq-section{margin:3rem auto;max-width:800px}.faq-item{background:var(--container-bg);border-radius:8px;margin-bottom:1rem;overflow:hidden;border:1px solid var(--border-color)}.faq-question{padding:1.5rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600}.faq-question:hover{background:rgb(0 0 0 / .05)}.faq-answer{padding:0 1.5rem;max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease}.faq-item.active .faq-answer{padding:0 1.5rem 1.5rem;max-height:500px}.faq-toggle{transition:transform 0.3s}.faq-item.active .faq-toggle{transform:rotate(180deg)}.section-title{text-align:center;margin-bottom:2rem;position:relative;color:var(--primary-color)}.section-title::after{content:'';display:block;width:80px;height:3px;background:var(--primary-color);margin:.5rem auto 0}footer{background:var(--gray-color);padding:1.5rem;text-align:center;margin-top:auto}.footer-content{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}.footer-links{display:flex;justify-content:center;gap:20px;margin-bottom:20px}.footer-links a{color:var(--text);text-decoration:none;transition:color 0.3s}.footer-links a:hover{color:var(--primary)}.social-links{display:flex;justify-content:center;gap:1.5rem}.social-links a{color:var(--text-color);font-size:1.2rem;transition:color 0.3s}.social-links a:hover{color:var(--text-color)}.copyright{color:var(--text-color)}h1{color:#2c3e50;text-align:center}.tip-box{background:var(--container-bg);border-left:4px solid #3498db;padding:10px 15px;margin:15px 0}.steps{background:var(--container-bg);padding:10px 25px;border-radius:5px;margin:10px 0}.steps li{margin-bottom:8px}a{color:chartreuse}@media (max-width:768px){.header-container{flex-direction:column;gap:1rem}nav ul{gap:1rem}.cropper-container{padding:1.5rem}.input-row{flex-direction:column;align-items:stretch}#urlInput{min-width:100%}#cropOptions .input-row{flex-direction:column;align-items:center;gap:.8rem}}@media (max-width:480px){header{padding:1rem}nav ul{flex-wrap:wrap;justify-content:center}.page-title{font-size:1.5rem}.controls-row{flex-direction:column}}