*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}body{background-color:#f5f7fa;color:#333;line-height:1.6}.container{width:100%;max-width:100%;margin:0 auto;padding:0 20px}header{text-align:center;padding:30px 20px;background:linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);color:white}h1{font-size:2.5rem;margin-bottom:10px}.subtitle{font-size:1.1rem;opacity:.9;max-width:800px;margin:0 auto}nav{background:white;padding:15px 0;box-shadow:0 2px 10px rgba(0,0,0,0.1);position:sticky;top:0;z-index:100}.nav-container{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.nav-link{padding:8px 16px;background:#f8f9fa;border-radius:20px;text-decoration:none;color:#495057;font-weight:500;transition:all .3s ease}.nav-link:hover{background:#4a6ee0;color:white}.modules{display:grid;grid-template-columns:repeat(auto-fill, minmax(500px, 1fr));gap:25px;padding:30px 0}.module{background:white;border-radius:10px;padding:25px;box-shadow:0 4px 15px rgba(0,0,0,0.05);transition:transform .3s ease}.module:hover{transform:translateY(-5px)}h2{color:#4a6ee0;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #f0f4ff}.input-group,.output-group{margin-bottom:20px}label{display:block;margin-bottom:8px;font-weight:600;color:#555}textarea,input[type="file"]{width:100%;padding:12px;border:1px solid #ddd;border-radius:5px;font-size:16px;resize:vertical;min-height:150px;transition:border .3s}textarea:focus{outline:none;border-color:#4a6ee0;box-shadow:0 0 0 2px rgba(74,110,224,0.2)}button{background:#4a6ee0;color:white;border:none;padding:12px 25px;border-radius:5px;cursor:pointer;font-size:16px;font-weight:600;transition:background .3s;display:inline-block}button:hover{background:#3a5ed0}.action-group{display:flex;justify-content:space-between;margin-top:10px}.output-group textarea{background-color:#f9fafc}.hint{font-size:14px;color:#666;margin-top:5px}.copy-btn{background:#28a745}.copy-btn:hover{background:#218838}.download-btn{background:#ff6b6b}.download-btn:hover{background:#ff5252}.image-preview{display:flex;flex-wrap:wrap;gap:20px;margin-top:15px}.image-container{flex:1;min-width:300px;text-align:center}.image-container img{max-width:100%;max-height:300px;border:1px solid #ddd;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1)}.image-info{margin-top:10px;font-size:14px;color:#666}.quality-control{margin:15px 0;display:flex;align-items:center;gap:10px}.quality-control label{margin-bottom:0;min-width:100px}.quality-control input{flex:1;margin:0}.quality-value{min-width:40px;text-align:center}.code-comparison-container{display:flex;gap:20px;margin-top:15px}.code-input-group{flex:1}.code-input-group textarea{min-height:250px;font-family:"Courier New",monospace}.comparison-result{margin-top:20px;border:1px solid #ddd;border-radius:5px;overflow:hidden}.diff-header{background:#f8f9fa;padding:10px 15px;border-bottom:1px solid #ddd;font-weight:600;display:flex;justify-content:space-between}.diff-stats{font-size:14px;color:#666}.diff-content{max-height:400px;overflow:auto;font-family:"Courier New",monospace;font-size:14px;line-height:1.5}.diff-line{display:flex;padding:2px 10px}.diff-line-number{width:40px;text-align:right;padding-right:10px;color:#999;user-select:none}.diff-line-content{flex:1;padding-left:10px;border-left:1px solid #eee;white-space:pre-wrap}.diff-added{background-color:#d4edda}.diff-removed{background-color:#f8d7da}.diff-unchanged{background-color:white}.diff-empty{background-color:#f8f9fa}footer{text-align:center;margin-top:40px;padding:30px 20px;color:#666;font-size:14px;background:white;border-top:1px solid #eee}@media (max-width:768px){.modules{grid-template-columns:1fr}.image-container{min-width:100%}.code-comparison-container{flex-direction:column}.nav-container{flex-direction:column;align-items:center}.nav-link{width:80%;text-align:center}}