:root{--primary:#4f46e5;--primary-hover:#4338ca;--background:#f8fafc;--card-bg:#fff;--text:#0f172a;--text-muted:#64748b;--border:#e2e8f0}html,body{max-width:100%;overflow-x:hidden}body{background-color:var(--background);color:var(--text);box-sizing:border-box;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:1rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;display:flex}header{z-index:0;background:#fff;border-bottom:1px solid #e2e8f0;width:100%;position:sticky;top:0}.header-container{flex-wrap:wrap;justify-content:space-around;align-items:center;gap:1rem;max-width:1100px;margin:0 auto;padding:.8rem 1rem;display:flex}.hero-section{text-align:center;margin-bottom:1rem}.dropdown-menu{background:#fff;border:1px solid #e2e8f0;border-radius:8px;min-width:180px;padding:.5rem 0;display:none;position:absolute;top:100%;right:0;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.dropdown:hover .dropdown-menu{display:block}.dropdown-menu a{color:#334155;padding:.5rem 1rem;font-size:.9rem;font-weight:500;text-decoration:none;display:block}.dropdown-menu a:hover{color:#2563eb;background:#f1f5f9}.converter-card{background:var(--card-bg);box-sizing:border-box;border-radius:16px;width:100%;max-width:850px;margin:0 auto;padding:2rem 1.5rem;box-shadow:0 10px 25px -5px #0000000d,0 8px 10px -6px #0000000d}h2{text-align:center;margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:700}p.subtitle{color:var(--text-muted);text-align:center;margin-bottom:2rem;font-size:.9rem}.drop-zone{border:2px dashed var(--border);text-align:center;cursor:pointer;background:#fafafa;border-radius:12px;padding:2rem;transition:all .2s}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--primary);background:#f5f3ff}.drop-zone p{color:var(--text-muted);margin:0;font-size:.95rem}.drop-zone span{color:var(--primary);margin-bottom:.5rem;font-weight:600;display:block}.drop-zone p span,.file-info{white-space:nowrap;text-overflow:ellipsis;vertical-align:bottom;max-width:100%;display:inline-block;overflow:hidden}#upload{display:none}.file-info{color:var(--primary);text-align:center;word-break:break-all;margin-top:.75rem;font-size:.85rem;font-weight:500;display:none}.control-group{margin-top:1.5rem}label{color:var(--text);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.85rem;font-weight:600;display:block}select,input[type=range]{box-sizing:border-box;width:100%}select{border:1px solid var(--border);background-color:#fff;border-radius:8px;outline:none;padding:.75rem;font-size:1rem;transition:border-color .2s}select:focus{border-color:var(--primary)}.slider-header{justify-content:space-between;align-items:center;display:flex}input[type=range]{accent-color:var(--primary);margin-top:.5rem}button{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;margin-top:1.75rem;padding:.85rem;font-size:1rem;font-weight:600;transition:background-color .2s,transform .1s}button:hover{background-color:var(--primary-hover)}button:active{transform:scale(.98)}.download-wrapper{text-align:center;margin-top:1.5rem}#download{color:#059669;background-color:#ecfdf5;border:1px solid #10b981;border-radius:6px;padding:.65rem 1.2rem;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .2s;display:none}#download:hover{background-color:#d1fae5}.tools-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin-top:1.5rem;display:grid}.tool-card{border:1px solid var(--border);color:var(--text);background:#fafafa;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;padding:1.25rem 1rem;text-decoration:none;transition:all .2s;display:flex}.tool-card:hover{border-color:var(--primary);background:#f5f3ff;transform:translateY(-2px)}.tool-card span.format-badge{color:var(--primary);background:#eef2ff;border-radius:4px;margin-bottom:.5rem;padding:.2rem .5rem;font-size:.8rem;font-weight:700}.tool-card h3{margin:0;font-size:1rem;font-weight:600}footer{background:#f8fafc;border-top:1px solid #e2e8f0;width:100%;margin-top:4rem;padding:3rem 1rem 1.5rem}.footer-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2rem;max-width:1100px;margin:0 auto;padding:0 1rem 2rem;display:grid}.footer-bottom{text-align:center;color:#475569;border-top:1px solid #e2e8f0;max-width:1100px;margin:0 auto;padding-top:1.5rem;font-size:.85rem}@media (width<=768px){.header-container{text-align:center;justify-content:center}header nav{flex-wrap:wrap;justify-content:center;gap:1rem!important}.footer-grid{text-align:center;grid-template-columns:1fr;gap:1.5rem}.tools-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
