@import url(https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap);:root{--dark-grey:#2c2c2c;--light-grey:#3a3a3a;--black:#000;--white:#fff;--header-font-size:20px;--transition-duration:0.3s;--primary-color:#ff6b35;--secondary-color:#ffe5db;--accent-color:#ff5722;--box-shadow:4px 4px 0 0 #000;--hover-box-shadow:6px 6px 0 0 #000;--border-radius:12px;--font-family:"Lexend",sans-serif;--bg-color:#1a1a1a;--card-bg:#2a2a2a;--text-color:#e0e0e0;--border-color:#000;--secondary-text:#a0a0a0}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);color:var(--text-color);font-family:var(--font-family);line-height:1.6}.container,body{display:flex;flex-direction:column;min-height:100vh}.container{margin:0 auto;max-width:95%;padding:0 10px;width:100%}header{border-bottom:1px solid var(--border-color);margin-bottom:30px;padding:30px 0;text-align:center}header h1{color:var(--primary-color);font-size:48px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}header p{color:var(--secondary-text);font-size:18px}main{display:flex;flex:1;flex-direction:column}.how-it-works{background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-bottom:20px;padding:20px}.how-it-works h2{color:var(--primary-color);font-size:20px;margin-bottom:15px;text-align:center}.how-it-works-content p{line-height:1.5;margin-bottom:10px}.how-it-works-content strong{color:var(--primary-color)}.converter-container{background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-bottom:20px;overflow:hidden}.format-selection-header{border-bottom:1px solid var(--border-color);padding:25px 20px;text-align:center}.format-selection-header h2{color:var(--primary-color);font-size:24px;margin-bottom:8px}.format-selection-header p{color:var(--secondary-text);font-size:16px}.format-selection{align-items:center;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:30px 20px}.format-selector{display:flex;flex-direction:column;gap:8px}.format-selector label{color:var(--text-color);font-size:14px;font-weight:700}.format-select-btn{align-items:center;background:var(--bg-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);cursor:pointer;display:flex;font-family:var(--font-family);font-size:14px;justify-content:space-between;min-width:180px;padding:12px 15px;text-align:left;transition:all .2s ease}.format-select-btn:focus,.format-select-btn:hover{border-color:var(--primary-color)}.format-select-btn:focus{box-shadow:0 0 0 2px rgba(255,107,53,.2);outline:none}.format-select-btn:after{content:"▼";font-size:12px}.format-placeholder,.format-select-btn:after{color:var(--secondary-text)}.format-selected{color:var(--text-color);font-weight:500}.format-modal{display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:1000}.format-modal.active{display:block}.modal-overlay{backdrop-filter:blur(4px);background:rgba(0,0,0,.5);height:100%;left:0;position:absolute;top:0;width:100%}.modal-content{background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);display:flex;flex-direction:column;margin:50px auto;max-height:80vh;max-width:600px;overflow:hidden;position:relative}.modal-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:20px}.modal-header h3{color:var(--text-color);font-size:20px;margin:0}.modal-close{align-items:center;background:none;border:none;border-radius:50%;color:var(--secondary-text);cursor:pointer;display:flex;font-size:24px;height:30px;justify-content:center;padding:0;transition:all .2s ease;width:30px}.modal-close:hover{background:var(--hover-bg);color:var(--text-color)}.modal-search{border-bottom:1px solid var(--border-color);padding:15px 20px}.modal-search input{background:var(--bg-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);font-family:var(--font-family);font-size:14px;padding:10px 15px;width:100%}.modal-search input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(255,107,53,.2);outline:none}.modal-body{border-radius:0 0 var(--border-radius) var(--border-radius);display:flex;height:450px;overflow:hidden}.format-sidebar{background:var(--bg-color);border-right:1px solid var(--border-color);overflow-y:auto;width:180px}.format-types{padding:15px 10px}.format-type{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;font-size:14px;font-weight:500;margin-bottom:8px;overflow:hidden;padding:14px 16px;position:relative;transition:all .2s ease}.format-type:before{background:var(--primary-color);content:"";height:100%;left:0;position:absolute;top:0;transform:translateX(-100%);transition:transform .2s ease;width:3px}.format-type:hover{background:var(--hover-bg);border-color:var(--primary-color);transform:translateX(3px)}.format-type:hover:before{transform:translateX(0)}.format-type.hover{background:var(--hover-bg);border-color:var(--primary-color)}.format-type.active{background:var(--primary-color);border-color:var(--primary-color);box-shadow:0 2px 8px rgba(255,107,53,.3);color:var(--white)}.format-type.active:before{transform:translateX(0)}.format-list-container{background:var(--card-bg);flex:1;overflow-y:auto;position:relative}.format-list{align-content:start;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));opacity:1;padding:20px;transition:opacity .2s ease}.format-list.changing{opacity:.3}.format-item{background:var(--bg-color);border:2px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;font-size:14px;font-weight:500;overflow:hidden;padding:14px 10px;position:relative;text-align:center;transition:all .2s ease}.format-item:after{background:var(--primary-color);bottom:0;content:"";height:2px;left:0;position:absolute;transform:scaleX(0);transition:transform .2s ease;width:100%}.format-item:hover{box-shadow:0 4px 8px rgba(0,0,0,.2);transform:translateY(-2px)}.format-item:hover:after{transform:scaleX(1)}.format-item.selected{box-shadow:0 2px 8px rgba(255,107,53,.3)}.format-item.selected:after{background:var(--white);transform:scaleX(1)}.format-item:hover{background:var(--hover-bg);border-color:var(--primary-color)}.format-item.selected{background:var(--primary-color);border-color:var(--primary-color);color:var(--white)}.no-results{color:var(--secondary-text);font-style:italic;padding:20px;text-align:center}.conversion-arrow{color:var(--primary-color);font-size:24px;font-weight:700;margin-top:20px}.convert-section{border-top:1px solid var(--border-color);padding:20px;text-align:center}.btn-large{font-size:16px;padding:15px 40px}.upload-area{border-bottom:1px solid var(--border-color);cursor:pointer;padding:40px 20px;text-align:center;transition:all .2s ease}.upload-area:hover{background:rgba(255,107,53,.05)}.upload-area.dragover{background:rgba(255,107,53,.1);border-color:var(--primary-color)}.upload-content{align-items:center;display:flex;flex-direction:column;gap:10px}.upload-area h3{color:var(--text-color);font-size:18px;margin-bottom:5px}.upload-area p{color:var(--secondary-text);margin-bottom:15px}.file-processing-section{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-top:20px;overflow:hidden}.file-info{border-bottom:1px solid var(--border-color);padding:15px 20px;text-align:center}.file-details{gap:20px}.btn-remove,.file-details{align-items:center;display:flex;justify-content:center}.btn-remove{background:none;border:none;border-radius:50%;color:var(--secondary-text);cursor:pointer;font-size:24px;height:30px;padding:0;transition:all .2s ease;width:30px}.btn-remove:hover{background:rgba(255,107,53,.1);color:var(--primary-color)}.file-name-size{flex:1}.file-name{color:var(--text-color);font-size:18px;font-weight:700;margin-bottom:5px}.file-size{color:var(--secondary-text);font-size:14px}.btn-primary{background:var(--primary-color);border:none;border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--white);cursor:pointer;font-family:var(--font-family);font-size:14px;font-weight:700;padding:10px 20px;transition:all .2s ease}.btn-primary:hover{background:var(--accent-color);box-shadow:var(--hover-box-shadow)}.btn-secondary{background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--text-color);cursor:pointer;font-family:var(--font-family);font-size:14px;font-weight:700;padding:10px 20px;transition:all .2s ease}.btn-secondary:hover{border-color:var(--primary-color);box-shadow:var(--hover-box-shadow)}.conversion-section{border-bottom:1px solid var(--border-color);padding:20px;text-align:center}.conversion-header{margin-bottom:15px}.conversion-header h3{color:var(--text-color);font-size:16px;margin:0}.format-options{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));justify-content:center;margin-bottom:20px}.format-option{background:var(--bg-color);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;padding:12px 8px;text-align:center;transition:all .2s ease}.format-option:hover{background:rgba(255,107,53,.05);border-color:var(--primary-color)}.format-option.selected{background:var(--primary-color);border-color:var(--primary-color);color:var(--white)}.conversion-controls{display:flex;justify-content:center}.progress-section{border-bottom:1px solid var(--border-color);padding:20px;text-align:center}.progress-bar{background:var(--bg-color);border-radius:3px;height:6px;margin:0 auto 10px;max-width:400px;overflow:hidden}.progress-fill{background:var(--primary-color);height:100%;transition:width .3s ease;width:0}.progress-text{color:var(--text-color);font-size:14px;text-align:center}.download-section{padding:20px;text-align:center}.download-content{align-items:center;display:flex;flex-direction:column;gap:15px}.download-content p{color:var(--text-color);font-size:16px;margin:0}.download-buttons{display:flex;gap:10px;justify-content:center}.download-content .btn-primary,.download-content .btn-secondary{margin:0}.features-section{margin-top:30px}.features-section h2{color:var(--primary-color);font-size:24px;margin-bottom:20px;text-align:center}.features-grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.feature-card{background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding:20px;text-align:center;transition:all .2s ease}.feature-card:hover{border-color:var(--primary-color);box-shadow:var(--hover-box-shadow)}.feature-card h3{color:var(--primary-color);font-size:18px;margin-bottom:10px}.feature-card p{color:var(--text-color);font-size:14px;line-height:1.5}footer{border-top:1px solid var(--border-color);color:var(--secondary-text);margin-top:40px;padding:20px 0;text-align:center}.footer-actions{margin-top:15px}.btn-small{font-size:14px;padding:8px 16px}.bug-report-button{position:fixed;right:20px;top:20px;z-index:1000}@media (max-width:768px){.container{max-width:100%;padding:0 5px}header h1{font-size:28px}header p{font-size:14px}.upload-area{padding:30px 15px}.format-options{gap:8px;grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.format-option{font-size:12px;padding:10px 6px}.features-grid{gap:10px;grid-template-columns:1fr}.feature-card{padding:15px}}@media (max-width:480px){header{padding:15px 0}header h1{font-size:24px}header p{font-size:12px}.upload-area{padding:25px 10px}.upload-area h3{font-size:16px}.upload-area p{font-size:12px}.format-options{gap:6px;grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.format-option{font-size:11px;padding:8px 4px}.conversion-section{padding:15px}.conversion-controls{align-items:center;flex-direction:column;gap:8px}.conversion-controls button{font-size:12px;max-width:200px;padding:8px 15px;width:100%}.features-section h2{font-size:20px}}