:root{--primary:#4361ee;--secondary:#f72585;--gradient:linear-gradient(135deg,var(--primary),var(--secondary));--bg:#f5f7ff;--card-bg:#fff;--border:#e0e0e0;--text:#333;--text-light:#666;--font:'Inter',sans-serif}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font)}body{background:linear-gradient(135deg,#f5f7ff 0%,#f0f4ff 100%);min-height:100vh;padding:20px}.container{max-width:1200px;margin:0 auto}.header{text-align:center;margin-bottom:30px;padding:30px 0}.title{font-size:2rem;font-weight:800;margin-bottom:10px;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{color:var(--text-light)}.tool-container{background:var(--card-bg);border-radius:20px;padding:30px;box-shadow:0 8px 30px rgba(0,0,0,0.08)}.language-selector,.mode-selector{margin-bottom:20px}.language-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mode-selector{display:grid;grid-template-columns:1fr 1fr;gap:15px}.lang-btn,.mode-btn,.format-btn,.level-btn{padding:10px;border:2px solid var(--border);border-radius:8px;text-align:center;cursor:pointer}.lang-btn.active,.mode-btn.active,.format-btn.active,.level-btn.active{border-color:var(--primary);background:rgba(67,97,238,0.1)}.editor-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.editor-box{border:2px solid var(--border);border-radius:10px;overflow:hidden}.editor-header{background:#f8f9fa;padding:10px 15px;border-bottom:1px solid var(--border);font-weight:600}.editor-textarea{width:100%;height:300px;border:none;padding:15px;font-family:'Courier New',monospace;font-size:14px;resize:none;outline:none}.process-btn{background:var(--gradient);color:white;border:none;padding:12px;border-radius:25px;font-weight:600;cursor:pointer;width:100%;margin:10px 0}.copy-btn{background:var(--secondary);color:white;border:none;padding:10px 20px;border-radius:20px;cursor:pointer;margin-top:10px}.api-section{margin-top:30px;padding:20px;background:#f8faff;border-radius:15px;border:2px solid var(--border)}.api-title{font-size:1.2rem;font-weight:700;margin-bottom:15px;color:var(--primary)}.api-url-box{background:#1e1e2f;color:#bbf0d1;padding:15px;border-radius:10px;font-family:monospace;margin:15px 0;word-break:break-all}.api-row{display:flex;gap:10px;margin:10px 0}.api-call-btn{background:var(--primary);color:white;border:none;padding:10px 20px;border-radius:30px;cursor:pointer;font-weight:600}.api-response{background:#f0f4ff;padding:15px;border-radius:10px;margin-top:15px;border:1px solid var(--border);max-height:200px;overflow:auto;font-family:monospace}.upload-area{border:2px dashed var(--border);border-radius:10px;padding:40px;text-align:center;margin-bottom:20px;cursor:pointer}.upload-area:hover{border-color:var(--primary)}.format-options,.compression-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.result-section{display:none;padding:20px;border:2px dashed var(--border);border-radius:15px;margin-top:20px;background:#f8faff}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.image-box img{width:100%;height:auto}.download-btn{background:var(--secondary);color:white;border:none;padding:10px 20px;border-radius:20px;text-decoration:none;display:inline-block}.input-group{margin-bottom:20px}label{display:block;margin-bottom:8px;font-weight:600}.url-input{width:100%;padding:12px;border:2px solid var(--border);border-radius:10px;font-size:1rem}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin:20px 0}#qrCode{margin:10px auto}.request-panel{margin-bottom:20px}.input-row{display:grid;grid-template-columns:100px 1fr;gap:10px;margin-bottom:10px;align-items:center}.header-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center}.small-btn{padding:6px 12px;border:1px solid var(--border);border-radius:4px;background:#f8f9fa;cursor:pointer;font-size:12px}.api-presets{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}.response-panel{border:2px solid var(--border);border-radius:10px;overflow:hidden;margin-top:20px}.response-header{background:#f8f9fa;padding:10px 15px;border-bottom:1px solid var(--border);font-weight:600;display:flex;justify-content:space-between;align-items:center}.response-content{padding:15px;max-height:400px;overflow:auto;font-family:'Courier New',monospace;font-size:13px}.status{display:inline-block;padding:3px 8px;border-radius:10px;color:white;font-weight:600;font-size:12px;margin-right:10px}.status.success{background:#06d6a0}.status.error{background:var(--secondary)}.footer{text-align:center;color:var(--text-light);margin-top:30px;padding:20px}.time-info{color:var(--text-light);font-size:12px;margin-right:15px}.button-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}@media(max-width:768px){.language-buttons{grid-template-columns:repeat(2,1fr)}.editor-container{grid-template-columns:1fr}.input-row{grid-template-columns:1fr}.header-row{grid-template-columns:1fr}.api-presets{flex-direction:column}.button-group{flex-direction:column}.comparison{grid-template-columns:1fr}}