@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-attention{0%,to{box-shadow:0 0 0 0 rgba(235,57,68,.4);transform:scale(1)}50%{box-shadow:0 0 0 20px transparent;transform:scale(1.02)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes arrow-pulse{0%,to{background-position:center}50%{background-position:calc(center + 3px) center}}@keyframes question-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes slideInRight{0%{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInCompression{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.related-conversions-section{background:linear-gradient(135deg,rgba(235,57,68,.03)0,rgba(244,105,117,.03) 100%);padding:40px 0}.conversion-tag,.conversion-tags{align-items:center;justify-content:center}.conversion-tags{display:flex;flex-wrap:wrap;gap:12px}.conversion-tag{display:inline-flex;padding:8px 16px;background:#fff;border:2px solid var(--gray-200);border-radius:8px;font-size:13px;font-weight:600;color:var(--gray-700);text-decoration:none;transition:all .3s ease;min-width:60px}.conversion-tag:hover{background:var(--primary-500);border-color:var(--primary-500);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(235,57,68,.2)}.converter-page{min-height:100vh;background:linear-gradient(180deg,var(--gray-50) 0%,#fff 100%);padding:60px 0}.converter-section{padding-bottom:3rem}.container{max-width:1200px;margin:0 auto;padding:0 20px}.converter-header{text-align:center;margin-bottom:48px;position:relative}.processing-toggle{position:absolute;top:-1px;right:-1px;z-index:10;display:flex;flex-direction:row;border:1px solid var(--gray-200);border-radius:0 var(--radius-xl)0 12px;background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)}.toggle-option{padding:8px 16px;font-size:13px;font-weight:600;border:0;background:0 0;color:var(--gray-500);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:row;align-items:center;gap:6px;white-space:nowrap}.toggle-option:first-child{border-right:1px solid var(--gray-200)}.toggle-option.active{background:#eb3944;color:#fff}.toggle-option:not(.active):hover{background:rgba(235,57,68,.06);color:var(--gray-700)}.toggle-option svg{width:14px;height:14px;flex-shrink:0}@media (max-width:768px){.processing-toggle{position:static;margin:0 auto 12px;justify-content:center;border-radius:8px}.upload-container{padding-top:20px}}.converter-header h1{font-size:48px;font-weight:700;background:var(--gradient-red);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}.converter-subtitle{font-size:20px;color:var(--gray-500);max-width:600px;margin:0 auto;line-height:1.5}.privacy-badge{display:flex;flex-direction:row;align-items:center;max-width:600px;margin:24px auto 0;padding:16px 24px;background:linear-gradient(135deg,#48bb7815 0,#38a16915 100%);border:2px solid #48bb78;border-radius:var(--radius-sm);animation:fadeInUp .6s ease .3s both}.privacy-icon{font-size:32px;flex-shrink:0;margin-right:16px;color:var(--primary-500)}.file-icon svg,.format-icon svg,.privacy-icon svg{stroke:var(--primary-500)}.privacy-text{text-align:left}.privacy-text strong{display:block;font-size:16px;color:#2f855a;margin-bottom:4px}.privacy-text p{font-size:14px;color:var(--gray-800);margin:0;line-height:1.5}.upload-container{position:relative;background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:40px;margin-bottom:32px}.upload-area{border:2px dashed var(--gray-200);border-radius:var(--radius-lg);padding:60px 40px;text-align:center;background:linear-gradient(135deg,rgba(235,57,68,.05)0,rgba(244,105,117,.05) 100%);transition:var(--transition);cursor:pointer}.upload-area:hover{border-color:var(--primary-500);background:linear-gradient(135deg,rgba(235,57,68,.1)0,rgba(244,105,117,.1) 100%)}.upload-area.dragover{border-color:var(--primary-500);background:linear-gradient(135deg,rgba(235,57,68,.15)0,rgba(244,105,117,.15) 100%);transform:scale(1.02)}.upload-icon{color:var(--primary-500)}.options-header h3,.upload-area h3{font-size:24px;color:var(--gray-800);margin-bottom:12px}.upload-area p,.upload-icon{margin-bottom:24px}.btn-upload{background:var(--gradient-red);color:#fff;border:0;padding:14px 32px;border-radius:var(--radius-sm);font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm)}.btn-upload:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.upload-info{margin-top:16px;font-size:14px;color:var(--gray-500)}.conversion-options{margin-top:40px;padding-top:40px;position:relative}.conversion-options::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--gray-200) 20%,var(--gray-200) 80%,transparent 100%)}.format-selector,.options-header{margin-bottom:32px}.options-header h3{margin-bottom:8px}.options-header p,.upload-area p{color:var(--gray-500)}.format-selector{transition:var(--transition)}.format-selector.attention{animation:pulse-attention 2s ease-in-out 3}.format-label{font-size:16px;font-weight:600;color:var(--gray-800);margin-bottom:16px}.format-selector.attention .format-label::after{content:" ↓";animation:bounce 1s ease-in-out infinite}.format-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}.format-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 20px;background:#fff;border-radius:12px;cursor:pointer;transition:var(--transition);flex:0 0 calc(11.11% - 12px);min-width:100px;box-shadow:0 2px 8px rgba(0,0,0,.06)}.format-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(235,57,68,.15)}.format-btn.active{background:var(--gradient-red);color:#fff;box-shadow:0 4px 16px rgba(235,57,68,.3)}.format-icon{font-size:24px;color:var(--primary-500)}.format-name{font-size:14px;font-weight:600}.format-more{background:linear-gradient(135deg,rgba(235,57,68,.05)0,rgba(244,105,117,.05) 100%)}.extended-formats{margin-top:24px;padding:24px;background:var(--gray-50);border-radius:var(--radius-lg);max-height:none}.format-category{margin-bottom:24px}.format-category:last-child{margin-bottom:0}.format-category h4{font-size:14px;font-weight:600;color:var(--gray-800);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.format-category .category-desc{font-size:13px;color:var(--gray-500);margin-bottom:12px;line-height:1.5}.format-grid-small{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}.format-btn-small{padding:8px 16px;background:#fff;border:1px solid var(--gray-200);border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition)}.format-btn-small:hover{border-color:var(--primary-500);background:var(--secondary-gradient)}.format-btn-small.active{background:var(--gradient-red);border-color:transparent;color:#fff}.quality-settings{margin-bottom:32px}.setting-row{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.setting-row label{font-size:16px;font-weight:600;color:var(--gray-800)}.quality-selector{display:flex;flex-direction:row;gap:12px}.quality-btn,.resize-options input{flex:1;background:#fff;font-size:14px;transition:var(--transition)}.quality-btn{padding:14px 24px;border-radius:12px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06)}.quality-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(235,57,68,.12)}.quality-btn.active{background:var(--gradient-red);color:#fff;box-shadow:0 4px 12px rgba(235,57,68,.3)}.resize-options{display:flex;flex-direction:row;align-items:center;gap:12px}.resize-options input{padding:12px 16px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.05)}.resize-options input:focus{outline:0;box-shadow:0 4px 12px rgba(235,57,68,.15)}.resize-options span{color:var(--gray-500);font-weight:600}.btn-convert,.btn-small{font-weight:600;cursor:pointer;transition:var(--transition)}.btn-small{padding:12px 20px;background:linear-gradient(135deg,#f8f9fa 0,#fff 100%);border-radius:10px;font-size:14px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.05)}.btn-small:hover{box-shadow:0 4px 12px rgba(235,57,68,.12);transform:translateY(-1px)}.btn-convert{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;width:100%;padding:18px 32px;background:var(--gradient-red);color:#fff;border:0;border-radius:var(--radius-sm);font-size:18px;box-shadow:var(--shadow-md)}.btn-convert:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-convert:disabled{opacity:.6;cursor:not-allowed;transform:none}.file-list{margin-top:24px;max-width:100%;margin-left:auto;margin-right:auto;border:1px solid var(--gray-200);background:#fff}.file-item{display:flex;flex-direction:column;padding:14px 18px;background:#fff;border-radius:0;margin-bottom:0;border-bottom:1px solid var(--gray-200);transition:background .2s ease;cursor:pointer}.file-item:last-child{border-bottom:none}.file-item:hover{background:rgba(235,57,68,.04)}.file-info{display:flex;flex-direction:row;align-items:center;gap:14px;width:100%}.file-icon,.format-group h4::before{display:flex;align-items:center;justify-content:center}.file-icon{width:42px;height:42px;min-width:42px;background:linear-gradient(135deg,rgba(235,57,68,.1)0,rgba(244,105,117,.1) 100%);border-radius:0;flex-direction:row;color:var(--primary-500);font-size:11px;font-weight:700;letter-spacing:.5px}.file-details{flex:1;min-width:0;display:flex;flex-direction:column}.file-name{font-weight:600;font-size:14px;color:var(--gray-800);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}.file-size{font-size:13px;color:var(--gray-500);font-weight:500}.file-status,.file-status .status-icon,.file-status span,.status-icon{display:none}.btn-download{padding:12px 32px;background:var(--gradient-red);color:#fff;border:0;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;flex-shrink:0}.btn-download:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(235,57,68,.35)}.btn-download,.btn-download:active{box-shadow:0 4px 12px rgba(235,57,68,.25)}.btn-download:active{transform:translateY(-1px)}.progress-bar{background:var(--gray-200)}.progress-fill{transition:width .4s cubic-bezier(.4,0,.2,1)}.progress-fill::after{background:linear-gradient(90deg,rgba(255,255,255,0)0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%)}.download-all-container{margin-top:48px;padding-top:48px;position:relative;display:flex;flex-direction:row;justify-content:center}.download-all-container::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:100px;height:4px;background:var(--gradient-red);border-radius:2px}.btn-download-all{display:flex;flex-direction:row;align-items:center;padding:20px 48px;background:var(--gradient-red);color:#fff;border:0;border-radius:14px;font-size:17px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 20px rgba(235,57,68,.3);margin:2rem auto auto}.btn-download-all svg{margin-right:14px;flex-shrink:0}@media (max-width:768px){.file-item{padding:12px 14px}.file-info{width:100%}.file-status{width:100%;align-items:flex-start}.btn-download,.btn-download-all{width:100%;justify-content:center}}@media (max-width:480px){.file-icon{width:36px;height:36px;min-width:36px;font-size:10px}.file-name{font-size:14px}.file-size{font-size:12px}.btn-download{padding:10px 24px;font-size:14px}.btn-download-all{padding:16px 32px;font-size:15px}}.btn-download-all:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.quick-stats{display:flex;flex-direction:row;justify-content:space-around;gap:24px;padding:32px;background:var(--secondary-gradient);border-radius:var(--radius-md)}.format-group h4,.stat-item{display:flex;align-items:center}.stat-item{flex-direction:column;gap:8px;text-align:center}.stat-icon{font-size:32px;color:var(--primary-500)}.format-icon-small svg,.stat-icon svg{stroke:var(--primary-500)}.stat-value{font-size:24px;font-weight:700;background:var(--gradient-red);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:14px;color:var(--gray-500)}.supported-formats{padding:80px 0;background:#fff}.section-header{text-align:center;margin-bottom:48px}.section-header h2{font-size:40px;font-weight:700;color:var(--gray-800);margin-bottom:16px}.format-group>p,.section-header p{font-size:18px;color:var(--gray-500)}.all-formats-list{display:flex;flex-direction:column;gap:48px}.format-group{padding:40px;background:#fff;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);transition:var(--transition);position:relative;overflow:hidden}.format-group::before,.format-item-detail::before{content:"";position:absolute;top:0;left:0;background:var(--gradient-red)}.format-group::before{right:0;height:4px;opacity:0;transition:opacity .3s ease}.format-group:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(235,57,68,.12),0 4px 12px rgba(0,0,0,.08)}.format-group:hover::before{opacity:1}.format-group h4{font-size:28px;margin:0 0 12px;gap:12px}.format-group h4::before{content:"";width:24px;height:24px;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23eb3944' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:24px 24px;transition:all .3s ease;animation:arrow-pulse 2s ease-in-out infinite}.format-group:hover h4::before{transform:translateX(5px);animation-play-state:paused}.format-group>p{font-size:16px;margin-bottom:28px;line-height:1.6}.format-items{display:flex;flex-direction:column;gap:16px}.format-item-detail{padding:28px;background:linear-gradient(135deg,rgba(248,249,250,.8)0,#fff 100%);border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}.format-item-detail::before{width:4px;height:100%;transform:scaleY(0);transform-origin:top;transition:transform .3s ease}.format-item-detail:hover{background:#fff;transform:translateX(8px);box-shadow:0 8px 30px rgba(235,57,68,.1),0 2px 8px rgba(0,0,0,.05)}.format-item-detail:hover::before{transform:scaleY(1)}.format-item-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:16px;gap:16px}.format-item-title{display:flex;align-items:center;gap:12px;flex:1}.format-icon-small{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(235,57,68,.1)0,rgba(244,105,117,.1) 100%);border-radius:var(--radius-sm);color:var(--primary-500)}.format-item-detail .format-badge,.format-item-name{font-weight:700;text-transform:uppercase;letter-spacing:.5px}.format-item-name{font-size:20px;color:var(--gray-800)}.format-item-detail .format-badge{padding:10px 20px;background:var(--gradient-red);color:#fff;border:0;border-radius:var(--radius-sm);font-size:13px;box-shadow:0 2px 8px rgba(235,57,68,.25);transition:var(--transition);flex-shrink:0}.format-item-detail .format-badge:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(235,57,68,.35)}.format-desc{font-size:15px;color:var(--gray-600);line-height:1.7;margin:0}.format-badges{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(0,0,0,.05)}.format-badge,.page-toc a{font-weight:600;transition:var(--transition)}.format-badge{padding:10px 18px;background:linear-gradient(135deg,rgba(235,57,68,.08)0,rgba(244,105,117,.08) 100%);border-radius:20px;font-size:13px;color:var(--gray-700);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.04)}.format-badge:hover{background:var(--gradient-red);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(235,57,68,.25)}.seo-content{padding:80px 0;background:linear-gradient(180deg,var(--gray-50) 0%,#fff 50%,var(--gray-50) 100%)}.key-takeaways{max-width:900px;margin:0 auto 36px;background:linear-gradient(180deg,#fff,var(--gray-50, #f7f7f8));border:1px solid #eee;border-left:4px solid var(--primary-500);border-radius:14px;padding:24px 28px}.faq-accordion>h2,.format-group h4,.key-takeaways h2{font-weight:700;color:var(--gray-800)}.key-takeaways h2{font-size:20px;margin:0 0 14px}.key-takeaways ul{margin:0;padding-left:20px}.key-takeaways li{font-size:16px;line-height:1.7;color:var(--gray-600, #555);margin-bottom:6px}.page-toc{max-width:900px;margin:0 auto 40px;display:flex;flex-wrap:wrap;gap:10px}.page-toc a{font-size:14px;color:var(--primary-500);background:#fff;border:1px solid #eee;border-radius:999px;padding:7px 16px;text-decoration:none}.page-toc a:hover{background:var(--primary-500);color:#fff}.faq-accordion,.references-section,.rich-section{max-width:900px;margin:0 auto 60px}.faq-accordion>h2{font-size:32px;margin-bottom:24px;text-align:center}.faq-accordion details{background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.05);overflow:hidden}.faq-accordion summary{list-style:none;cursor:pointer;font-size:18px;font-weight:700;color:var(--gray-800);position:relative;padding:20px 50px 20px 24px}.faq-accordion summary::-webkit-details-marker{display:none}.faq-accordion summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--primary-500);transition:transform .2s}.faq-accordion details[open] summary::after{content:"−"}.faq-accordion details[open] summary,.howto-steps h3,.references-list a,.tool-card:hover h3{color:var(--primary-500)}.faq-accordion .faq-body{padding:0 24px 20px}.faq-accordion .faq-body p{font-size:16px;line-height:1.7;color:var(--gray-500);margin:0 0 10px}.references-section>h2,.rich-section>h2{font-size:24px;font-weight:700;color:var(--gray-800);margin-bottom:8px}.references-section>p{font-size:14px;color:var(--gray-500);margin:0 0 18px}.howto-steps,.references-list{list-style:none;padding:0;margin:0}.references-list{display:grid;gap:10px}.references-list li{font-size:15px;line-height:1.5;padding-left:22px;position:relative}.references-list li::before{content:"↗";position:absolute;left:0;top:1px;color:var(--primary-500);font-weight:700}.references-list a{text-decoration:none;border-bottom:1px solid transparent;transition:var(--transition)}.references-list a:hover{border-bottom-color:var(--primary-500)}.references-list .ref-pub,.rich-section>p{color:var(--gray-500);font-size:13px}.rich-section>h2{font-size:32px;margin-bottom:24px;text-align:center}.rich-section>p{font-size:17px;line-height:1.8}.howto-steps{counter-reset:howto}.compare-table,.howto-steps>li{background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.06)}.howto-steps>li{position:relative;padding:22px 24px 22px 70px;margin-bottom:16px}.howto-steps>li::before{counter-increment:howto;content:counter(howto);position:absolute;left:20px;top:22px;width:34px;height:34px;border-radius:50%;background:var(--gradient-red);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}.howto-steps h3{font-size:18px;font-weight:700;margin:0 0 6px}.decision-card p,.howto-steps p,.troubleshoot-item p{font-size:15px;line-height:1.7;color:var(--gray-500);margin:0}.compare-table{width:100%;border-collapse:collapse;overflow:hidden;font-size:15px}.compare-table td,.compare-table th{padding:14px 18px;text-align:left;border-bottom:1px solid #f0f0f0}.compare-table th{background:var(--gray-50, #f7f7f8);font-weight:700;color:var(--gray-800)}.compare-table td:first-child{font-weight:600;color:var(--gray-800)}.compare-table tr:last-child td{border-bottom:0}.decision-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.decision-card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.06);border-top:3px solid var(--primary-500)}.decision-card h3,.troubleshoot-item h3{font-size:18px;font-weight:700;color:var(--gray-800);margin:0 0 10px}.faq-item h4,.troubleshoot-item{border-left:3px solid var(--primary-500)}.troubleshoot-item{background:#fff;border-radius:12px;padding:20px 24px;margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.05)}.troubleshoot-item h3{font-size:16px;margin:0 0 6px}@media (max-width:768px){.decision-grid{grid-template-columns:1fr}.compare-table{font-size:13px}.compare-table td,.compare-table th{padding:10px 12px}}.help-intro{max-width:900px;margin:0 auto 60px;text-align:center}.help-intro h2{font-size:40px;font-weight:700;background:var(--gradient-red);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 20px}.help-intro p,.tip-item p{font-size:18px;line-height:1.8;color:var(--gray-500)}.help-tips{max-width:100%;margin:0 auto 60px}.help-faq>h2,.help-tips>h2{font-size:36px;font-weight:700;color:var(--gray-800);margin-bottom:40px;text-align:center}.tip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.tip-item{background:#fff;border-radius:16px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:var(--transition)}.faq-item:hover,.tip-item:hover{box-shadow:0 8px 30px rgba(235,57,68,.12),0 4px 12px rgba(0,0,0,.08);transform:translateY(-3px)}.faq-item h3,.tip-item h3{font-size:20px;font-weight:700;color:var(--primary-500);margin:0 0 12px;line-height:1.4}.tip-item p{font-size:16px;line-height:1.7;margin:0}@media (max-width:768px){.tip-grid{grid-template-columns:1fr}}.help-faq{max-width:100%;margin:0 auto 60px}.faq-item{background:#fff;border-radius:16px;padding:36px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:var(--transition)}.faq-item h3{font-size:24px;margin:0 0 20px;display:flex;align-items:center}.faq-item h3::before{content:"";width:24px;height:24px;min-width:24px;margin-right:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23eb3944' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:24px 24px;transition:all .3s ease;animation:question-pulse 2s ease-in-out infinite}.faq-item:hover h3::before{animation-play-state:paused;transform:scale(1.15) rotate(5deg)}.faq-item h4{font-size:18px;font-weight:600;color:var(--secondary-color);margin-top:24px;margin-bottom:12px;padding-left:20px}.faq-item p{font-size:16px;line-height:1.8;color:var(--gray-800);margin-bottom:16px}.faq-item p:last-child,.help-footer p:last-child{margin-bottom:0}.help-footer,.related-tools{max-width:900px;text-align:center}.help-footer{margin:0 auto;padding:48px 40px;background:linear-gradient(135deg,rgba(235,57,68,.05)0,rgba(244,105,117,.05) 100%);border-radius:20px;box-shadow:0 4px 20px rgba(235,57,68,.1);position:relative;overflow:hidden}.help-footer::before,.tool-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-red)}.help-footer h2,.related-tools h2{font-size:32px;font-weight:700;background:var(--gradient-red);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 20px}.help-footer p{font-size:16px;line-height:1.8;color:var(--gray-800);margin-bottom:12px}.related-tools{margin:60px auto}.related-tools h2{margin:0 0 32px}.tools-grid{display:flex;flex-direction:row;justify-content:center;gap:24px;flex-wrap:wrap}.tool-card{flex:1;min-width:280px;max-width:400px;padding:32px 28px;background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden}.tool-card::before{transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.tool-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(235,57,68,.15),0 4px 12px rgba(0,0,0,.08)}.tool-card:hover::before{transform:scaleX(1)}.tool-icon,.tool-link{align-items:center;color:var(--primary-500);transition:all .3s ease}.tool-icon{width:64px;height:64px;display:flex;justify-content:center;background:linear-gradient(135deg,rgba(235,57,68,.1)0,rgba(244,105,117,.1) 100%);border-radius:16px;margin-bottom:20px}.tool-card:hover .tool-icon{background:var(--gradient-red);transform:scale(1.1) rotate(5deg)}.tool-card:hover .tool-icon svg{stroke:#fff}.tool-icon svg{stroke:var(--primary-500);transition:stroke .3s ease}.tool-card h3{font-size:20px;font-weight:700;color:var(--gray-800);margin:0 0 12px;transition:color .3s ease}.tool-card p{font-size:15px;line-height:1.6;color:var(--gray-600);margin:0 0 20px;flex:1}.tool-link{display:inline-flex;font-size:14px;font-weight:600}.tool-card:hover .tool-link{color:var(--primary-600);transform:translateX(4px)}.seo-text{max-width:900px;margin:0 auto;font-size:16px;line-height:1.8;color:var(--gray-800)}.seo-text h2{font-size:32px;color:var(--gray-800);margin-bottom:16px;margin-top:32px}.seo-text h2:first-child{margin-top:0}.seo-text p{margin-bottom:16px}.seo-text ol,.seo-text ul{margin-bottom:16px;padding-left:24px}.seo-text li{margin-bottom:8px}.progress-bar{position:relative;width:100%;height:8px;background:var(--gray-50);border-radius:8px;overflow:hidden;margin-top:8px}.progress-fill{height:100%;background:var(--gradient-red);transition:width .3s ease;position:relative}.progress-fill::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(90deg,rgba(255,255,255,0)0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);animation:shimmer 2s infinite}.notification-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:12px;max-width:400px}.format-modal-search input,.notification{background:#fff;transition:var(--transition)}.notification{display:flex;flex-direction:row;align-items:center;gap:12px;padding:16px 20px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);border-left:4px solid var(--primary-500);animation:slideInRight .3s ease}.notification-success{border-left-color:#48bb78}.notification-error{border-left-color:#f56565}.notification-warning{border-left-color:#ed8936}.notification-info{border-left-color:var(--primary-500)}.notification-icon{font-size:24px;flex-shrink:0;color:var(--primary-500)}.format-modal-icon svg,.notification-icon svg{stroke:var(--primary-500)}.notification-message{flex:1;font-size:14px;line-height:1.5;color:var(--gray-800)}.format-modal-overlay,.notification-close{display:flex;flex-direction:row;align-items:center;justify-content:center}.notification-close{background:0 0;border:0;font-size:24px;color:var(--gray-500);cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;transition:var(--transition)}.notification-close:hover{color:var(--gray-800);transform:scale(1.1)}.format-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);backdrop-filter:blur(12px);z-index:10000;opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1);padding:20px;box-sizing:border-box}.format-modal-overlay.active{opacity:1}.format-modal{background:#fff;border-radius:20px;max-width:900px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.25),0 12px 30px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05);transform:scale(.95) translateY(20px);transition:transform .35s cubic-bezier(.16,1,.3,1)}.format-modal-overlay.active .format-modal,.format-modal-overlay.active .format-modal-compact{transform:scale(1) translateY(0)}.format-modal-header{padding:32px 36px;background:linear-gradient(135deg,#fafafa 0,#fff 100%);position:relative;border-bottom:1px solid var(--gray-200)}.format-modal-header::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-red)}.format-modal-header h2{font-size:24px;font-weight:700;color:var(--gray-900);margin-bottom:8px;letter-spacing:-.5px}.format-modal-header h3{font-size:22px;font-weight:700;color:var(--gray-900);margin:0;letter-spacing:-.4px;padding-right:50px}.format-modal-header p{font-size:16px;color:var(--gray-600);margin:0}.format-modal-body{padding:36px;overflow-y:auto;flex:1;background:#fff}.format-modal-search{margin-bottom:24px}.format-modal-search input{width:100%;padding:14px 20px;border-radius:12px;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.06)}.format-modal-search input:focus{outline:0;box-shadow:0 4px 16px rgba(235,57,68,.15)}.format-modal-categories{display:flex;flex-direction:column;gap:24px}.format-modal-category{padding:20px;background:var(--gray-50);border-radius:var(--radius-sm)}.format-modal-category h3{font-size:18px;font-weight:600;color:var(--gray-800);margin-bottom:16px}.format-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.format-modal-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;background:#fff;border-radius:12px;cursor:pointer;transition:var(--transition);box-shadow:0 2px 8px rgba(0,0,0,.06)}.format-modal-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(235,57,68,.15)}.format-modal-icon{font-size:32px;color:var(--primary-500)}.format-modal-name{font-size:16px;font-weight:600;color:var(--gray-800)}.format-modal-desc{font-size:12px;color:var(--gray-500);text-align:center}.format-modal-grid-small{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.format-modal-btn-small{padding:12px 16px;background:#fff;border-radius:10px;cursor:pointer;transition:var(--transition);font-size:14px;font-weight:600;color:var(--gray-800);box-shadow:0 2px 6px rgba(0,0,0,.05)}.format-modal-btn-small:hover{background:linear-gradient(135deg,rgba(235,57,68,.08)0,rgba(244,105,117,.08) 100%);transform:translateY(-1px);box-shadow:0 4px 12px rgba(235,57,68,.12)}.format-more-toggle{text-align:center;padding-top:16px}.btn-more-formats{padding:14px 36px;background:#fff;color:var(--primary-500);border-radius:12px;cursor:pointer;font-size:14px;font-weight:700;transition:var(--transition);box-shadow:0 2px 8px rgba(235,57,68,.15)}.btn-more-formats:hover{background:var(--gradient-red);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(235,57,68,.3)}.format-modal-compact{background:#1a1a1a;border-radius:12px;max-width:500px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);transform:scale(.9) translateY(20px);transition:transform .3s ease}.format-modal-header-compact{padding:16px;border-bottom:1px solid #333;display:flex;flex-direction:row;align-items:center;gap:12px}.format-modal-header-compact input[type=text]{flex:1;min-width:0;padding:10px 14px;background:#2a2a2a;border:1px solid #444;border-radius:8px;color:#fff;font-size:14px;outline:0;transition:all .3s ease;box-sizing:border-box}.format-modal-header-compact input[type=text]:focus{border-color:var(--primary-500);background:#333}.format-modal-header-compact input[type=text]::placeholder{color:#888}.quality-selector-inline{display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0}.quality-selector-inline label{color:#ccc;font-size:13px;font-weight:600;white-space:nowrap}.quality-selector-inline select{padding:10px 32px 10px 12px;background:#2a2a2a;border:1px solid #444;border-radius:8px;color:#fff;font-size:13px;outline:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23999' d='M5 7L1 3h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:all .3s ease}.quality-selector-inline select:focus{border-color:var(--primary-500);background-color:#333}.quality-selector-inline select option{background:#2a2a2a;color:#fff}@media (max-width:480px){.format-modal-header-compact{flex-wrap:wrap}.format-modal-header-compact input[type=text],.quality-selector-inline{width:100%}.quality-selector-inline select{flex:1}}.format-modal-body-compact{padding:16px;overflow-y:auto;flex:1}.format-grid-compact{display:flex;flex-wrap:wrap;gap:8px}.format-btn-compact{padding:10px 16px;background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.format-btn-compact:hover{background:var(--gradient-red);border-color:var(--primary-500);transform:translateY(-2px);box-shadow:0 4px 12px rgba(235,57,68,.3)}.format-btn-compact:active{transform:translateY(0)}.options-section{margin-bottom:0;background:0 0;padding:0;border:0;border-radius:0}.options-section:not(:last-child){margin-bottom:32px}.options-label{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--gray-700);margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}.compression-options{animation:fadeInCompression .5s cubic-bezier(.16,1,.3,1)}.quality-presets{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}.quality-presets .quality-btn{flex:1 1 calc(33.333% - 8px);min-width:160px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:18px 20px;background:linear-gradient(135deg,#fff 0,#f8f9fa 100%);border:2px solid var(--gray-200);border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);text-align:left;position:relative;overflow:hidden}.quality-presets .quality-btn::before{content:"";position:absolute;top:0;left:0;width:4px;height:0;background:var(--gradient-red);transition:height .3s cubic-bezier(.16,1,.3,1)}.quality-presets .quality-btn:hover{border-color:var(--primary-400);background:linear-gradient(135deg,#fff 0,#fef3f4 100%);transform:translateY(-2px);box-shadow:0 8px 24px rgba(235,57,68,.12)}.quality-presets .quality-btn.active::before,.quality-presets .quality-btn:hover::before{height:100%}.quality-presets .quality-btn.active{border-color:var(--primary-500);background:linear-gradient(135deg,#fff5f6 0,#ffe4e6 100%);box-shadow:0 4px 16px rgba(235,57,68,.2)}.quality-presets .quality-name{font-size:15px;font-weight:700;color:var(--gray-900);margin-bottom:6px;letter-spacing:-.3px;transition:color .2s ease}.compression-options .options-label:hover,.compression-options .options-label:hover::before,.quality-presets .quality-btn.active .quality-name,.quality-presets .quality-btn:hover .quality-name{color:var(--primary-600)}.quality-presets .quality-desc{font-size:12px;color:var(--gray-600);line-height:1.5;font-weight:400}.quality-presets .quality-btn.active .quality-desc{color:var(--gray-700)}.compression-options .advanced-options{margin-top:20px;padding-top:20px;border-top:1px solid var(--gray-200);display:flex;flex-direction:column;gap:20px}.compression-options .option-row{display:flex;flex-direction:column;gap:10px}.compression-options .option-row label{font-size:13px;font-weight:600;color:var(--gray-700);display:block;letter-spacing:.2px}.compression-options .options-label{font-size:13px;font-weight:600;color:var(--gray-700);margin-bottom:16px;display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:color .2s ease;position:relative;user-select:none}.compression-options .options-label::before{content:"›";font-size:20px;font-weight:700;color:var(--gray-600);transition:transform .3s cubic-bezier(.16,1,.3,1),color .2s ease;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px}.compression-options .options-label:has(input[type=checkbox]:checked)::before{transform:rotate(90deg)}.compression-options .options-label-text{flex:1}.compression-options .options-label input[type=checkbox]{display:none}.compression-options .option-desc{font-size:11px;color:var(--gray-500);line-height:1.6;margin-top:-6px;padding-left:2px;font-weight:400}.compression-options .slider-container{display:flex;align-items:center;gap:16px;padding:4px 0}.compression-options .slider-container input[type=range]{flex:1;height:6px;background:var(--gray-200);border-radius:10px;outline:0;cursor:pointer;appearance:none;-webkit-appearance:none}.compression-options .slider-container input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;background:#fff;border:3px solid var(--primary-500);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(235,57,68,.3);transition:all .2s ease}.compression-options .slider-container input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px rgba(235,57,68,.4)}.compression-options .slider-container input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#fff;border:3px solid var(--primary-500);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(235,57,68,.3);transition:all .2s ease}.compression-options .slider-container input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px rgba(235,57,68,.4)}.compression-options .slider-value{min-width:36px;text-align:center;font-weight:700;font-size:14px;color:var(--primary-600);padding:6px 12px;background:var(--gray-100);border-radius:8px;border:1px solid var(--gray-200)}.compression-options input[type=number],.compression-options input[type=password],.compression-options input[type=text]{padding:11px 16px}.compression-options input[type=number],.compression-options input[type=password],.compression-options input[type=text],.compression-options select{width:100%;background:#fff;border:2px solid var(--gray-200);border-radius:10px;font-size:14px;color:var(--gray-800);transition:all .25s cubic-bezier(.16,1,.3,1);font-family:inherit;font-weight:500;box-sizing:border-box}.compression-options input[type=number]:focus,.compression-options input[type=password]:focus,.compression-options input[type=text]:focus,.compression-options select:focus{outline:0;border-color:var(--primary-500);box-shadow:0 0 0 4px rgba(235,57,68,.1);background:#fff}.compression-options input[type=password]::placeholder,.compression-options input[type=text]::placeholder{color:var(--gray-400);font-weight:400}.compression-options select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding:11px 40px 11px 16px;appearance:none;-webkit-appearance:none}.compression-options select:hover{border-color:var(--gray-400)}.compression-options input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary-500);border-radius:4px}.modal-close-btn{position:absolute;top:24px;right:24px;width:40px;height:40px;background:#fff;border:2px solid var(--gray-200);border-radius:10px;font-size:22px;line-height:1;color:var(--gray-500);cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.06);z-index:10}.modal-close-btn:hover{background:var(--primary-500);color:#fff;border-color:var(--primary-500);transform:rotate(90deg) scale(1.05);box-shadow:0 4px 16px rgba(235,57,68,.25)}.modal-close-btn:active{transform:rotate(90deg) scale(1)}.format-modal-compression .modal-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:28px;border-top:1px solid var(--gray-200);margin-top:32px}.format-modal-compression .btn-primary,.format-modal-compression .btn-secondary{padding:13px 28px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);letter-spacing:.2px}.format-modal-compression .btn-secondary{border:0}.format-modal-compression .btn-primary{background:var(--gradient-red);color:#fff;box-shadow:0 2px 12px rgba(235,57,68,.3);border:2px solid transparent}.format-modal-compression .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(235,57,68,.4)}.format-modal-compression .btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(235,57,68,.25)}.format-modal-compression .btn-secondary{background:#fff;color:var(--gray-700);border:2px solid var(--gray-300);box-shadow:none}.format-modal-compression .btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-400);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}.format-modal-compression .btn-secondary:active{transform:translateY(0)}@media (max-width:768px){.format-modal-compression{width:95%;max-height:95vh;border-radius:20px}.format-modal-compression .format-modal-header{padding:28px 24px 20px}.format-modal-compression .format-modal-header h3{font-size:22px;padding-right:44px}.format-modal-compression .format-modal-body{padding:24px 20px 28px}.modal-close-btn{top:24px;right:20px;width:40px;height:40px;font-size:22px}.quality-presets{gap:10px}.quality-presets .quality-btn{flex:1 1 calc(50% - 5px);min-width:140px;padding:16px 18px}.quality-presets .quality-name{font-size:14px}.quality-presets .quality-desc{font-size:11px}.compression-options .options-section{padding:16px}.compression-options .advanced-options{gap:16px}.format-modal-compression .modal-actions{flex-direction:column-reverse;gap:10px}.format-modal-compression .btn-primary,.format-modal-compression .btn-secondary{width:100%;padding:16px 24px;font-size:16px}}@media (max-width:480px){.format-modal-overlay{padding:10px}.format-modal-compression{width:100%;max-height:97vh;border-radius:16px}.format-modal-compression .format-modal-header{padding:24px 20px 18px}.format-modal-compression .format-modal-header h3{font-size:20px}.options-label{font-size:14px}.quality-presets .quality-btn{padding:14px 16px}}.percentage-dim-display{margin-top:8px;font-size:15px;font-weight:700;color:#333;text-align:center;letter-spacing:.3px}.file-actions{display:flex;align-items:center;gap:8px}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;background:var(--gradient-red);color:#fff;border:0;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px rgba(235,57,68,.25)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(235,57,68,.35)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary,.select-input{background:#fff;cursor:pointer}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;color:var(--gray-700);border:2px solid var(--gray-300);border-radius:10px;font-size:15px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-400);transform:translateY(-2px)}.select-input{padding:8px 12px;border:2px solid var(--gray-200);border-radius:8px;font-size:14px;font-weight:500;color:var(--gray-800);transition:border-color .2s;font-family:inherit}.select-input:focus{outline:0;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(235,57,68,.1)}.crop-toolbar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 20px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:12px;margin-bottom:16px}.crop-presets{gap:8px}.crop-presets label{font-size:13px;font-weight:600;color:var(--gray-600);margin-right:4px}.crop-actions,.crop-dims,.crop-presets{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center}.crop-dims{gap:12px;font-size:13px;color:var(--gray-700)}.crop-actions{gap:8px;margin-left:auto}.crop-canvas-wrapper,.crop-output{border:1px solid var(--gray-200);border-radius:12px}.crop-canvas-wrapper{position:relative;width:100%;overflow:auto;background:repeating-conic-gradient(#e0e0e0 0% 25%,#fff 0% 50%)0 0/20px 20px;min-height:300px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.crop-canvas-wrapper canvas{display:block;max-width:100%;cursor:crosshair}.crop-output{padding:24px;background:#fff;margin-top:16px}.crop-output h3{font-size:18px;font-weight:700;color:var(--gray-800);margin-bottom:16px}.crop-output canvas{display:block;max-width:100%;border-radius:8px;margin-bottom:16px;border:1px solid var(--gray-100)}.output-actions,.watermark-editor-inner{display:flex;flex-direction:row;flex-wrap:wrap}.output-actions{align-items:center;gap:12px}.watermark-editor-inner{gap:24px;margin-top:24px}.watermark-preview-wrap{flex:1;min-width:280px;background:repeating-conic-gradient(#e0e0e0 0% 25%,#fff 0% 50%)0 0/20px 20px;border-radius:12px;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;padding:16px;min-height:300px}.watermark-preview-wrap canvas{max-width:100%;max-height:480px;display:block;border-radius:6px}.watermark-controls-wrap{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:0}.watermark-tabs{display:flex;flex-direction:row;border-bottom:2px solid var(--gray-200);margin-bottom:20px}.watermark-tab{flex:1;padding:10px 16px;background:0 0;border:0;border-bottom:3px solid transparent;font-size:14px;font-weight:600;color:var(--gray-500);cursor:pointer;transition:all .2s;margin-bottom:-2px}.watermark-tab.active{color:var(--primary-500);border-bottom-color:var(--primary-500)}.watermark-tab:hover{color:var(--gray-700)}.watermark-tab-panel,.wm-control-group{display:flex;flex-direction:column;gap:16px}.wm-control-group{gap:6px}.wm-control-group label{font-size:12px;font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.4px}.wm-input,.wm-select{padding:9px 12px;border:2px solid var(--gray-200);border-radius:8px;font-size:14px;color:var(--gray-800);background:#fff;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}.wm-input:focus,.wm-select:focus{outline:0;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(235,57,68,.1)}.wm-slider{width:100%;accent-color:var(--primary-500);cursor:pointer}.wm-color{width:48px;height:36px;padding:2px;border:2px solid var(--gray-200);border-radius:8px;cursor:pointer;background:#fff}.wm-file-input{font-size:13px;color:var(--gray-700)}.wm-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--gray-200)}.wm-actions .btn-convert,.wm-actions .btn-secondary{width:100%;text-align:center}.merge-editor-header{padding:16px 20px;background:var(--gray-50);border-radius:10px;margin-bottom:16px}.merge-hint{font-size:14px;color:var(--gray-600);margin:0}.merge-file-list{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:10px}.drag-handle,.merge-file-list li{display:flex;align-items:center;cursor:grab}.merge-file-list li{flex-direction:row;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--gray-200);border-radius:10px;font-size:14px;color:var(--gray-800);transition:box-shadow .2s,transform .2s}.merge-file-list li:hover{box-shadow:0 4px 12px rgba(235,57,68,.1);transform:translateY(-2px)}.merge-file-list li.dragging{opacity:.5;cursor:grabbing}.drag-handle{color:var(--gray-400);flex-shrink:0}.merge-file-icon{font-size:11px;font-weight:700;color:var(--primary-500);background:#fff0f0;border:1.5px solid var(--primary-200, #f9a8a8);border-radius:5px;padding:2px 6px;flex-shrink:0}.merge-file-details{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.merge-file-name{font-weight:600;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.merge-file-meta,.merge-remove-btn{font-size:12px;color:var(--gray-500)}.merge-remove-btn{flex-shrink:0;width:28px;height:28px;border:0;background:var(--gray-100);border-radius:6px;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.merge-remove-btn:hover{background:#fee2e2;color:var(--primary-500)}.merge-file-list li.drag-over-item{border-color:var(--primary-400);background:#fff5f5}.merge-actions{display:flex;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}.merge-status{flex:1;font-size:14px;color:var(--gray-600);min-height:20px}.img2pdf-file-item{align-items:center}.img2pdf-thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--gray-200);flex-shrink:0}.option-row{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px;font-weight:600;color:var(--gray-700)}.option-row label{min-width:110px;flex-shrink:0}.option-row .select-input{min-width:160px}.custom-size-inputs{display:flex;align-items:center;gap:8px}.custom-size-inputs input{width:80px;padding:8px 10px;border:1.5px solid var(--gray-200);border-radius:8px;font-size:14px;color:var(--gray-800)}.custom-size-inputs span{font-size:13px;color:var(--gray-500)}.split-editor-info{padding:12px 16px;background:var(--gray-50);border-radius:8px;margin-bottom:16px}.page-count-display{font-size:14px;font-weight:600;color:var(--gray-700);margin:0}.split-options{margin-bottom:20px}.split-mode-group{margin-bottom:16px}.radio-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--gray-500);cursor:pointer;margin-bottom:10px;padding:10px 14px;border:1.5px solid var(--gray-200);border-radius:8px;transition:border-color .15s,color .15s,background .15s}.radio-label:has(input:checked){border-color:var(--primary-500);color:var(--primary-500);background:#fff5f5}.radio-label input[type=radio]{accent-color:var(--primary-500);width:16px;height:16px;cursor:pointer}.split-mode-input{padding:12px 16px;background:var(--gray-50);border-radius:8px;margin-top:8px;margin-left:26px}.split-mode-input .select-input{width:100%;box-sizing:border-box}.input-hint{font-size:12px;color:var(--gray-500);margin:6px 0 0}.output-list-title{font-size:16px;font-weight:700;color:var(--gray-800);margin:24px 0 12px}.split-output-files{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.split-output-files li{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid var(--gray-200);border-radius:8px;font-size:14px;color:var(--gray-800)}.split-output-icon{font-size:11px;font-weight:700;color:var(--primary-500);background:#fff0f0;border:1.5px solid var(--primary-200, #f9a8a8);border-radius:5px;padding:2px 6px;flex-shrink:0}.split-output-details{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.split-output-name{font-weight:600;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.split-output-meta{font-size:12px;color:var(--gray-500)}.font-picker-controls,.font-search-wrap{display:flex;flex-direction:row;align-items:center}.font-picker-controls{flex-wrap:wrap;gap:16px;padding:20px 24px;background:#fff;border:1px solid var(--gray-200);border-radius:14px;margin-bottom:28px;box-shadow:0 2px 8px rgba(0,0,0,.05)}.font-search-wrap{gap:10px;flex:1;min-width:200px;padding:10px 16px;background:var(--gray-50);border:2px solid var(--gray-200);border-radius:10px;transition:border-color .2s}.font-search-wrap:focus-within{border-color:var(--primary-500);background:#fff;box-shadow:0 0 0 3px rgba(235,57,68,.1)}.font-search-wrap svg{color:var(--gray-400);flex-shrink:0}.font-search-wrap input{border:0;outline:0;background:0 0;font-size:14px;color:var(--gray-800);width:100%;font-family:inherit}.font-search-wrap input::placeholder{color:var(--gray-400)}.font-category-filters{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}.filter-btn,.font-sort-wrap select{border:2px solid var(--gray-200);background:#fff;cursor:pointer}.filter-btn{padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;color:var(--gray-600);transition:all .2s;white-space:nowrap}.filter-btn:hover{border-color:var(--primary-400);color:var(--primary-500)}.filter-btn.active{background:var(--gradient-red);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(235,57,68,.25)}.font-sort-wrap{display:flex;flex-direction:row;align-items:center;gap:10px;white-space:nowrap}.font-sort-wrap label{font-size:13px;font-weight:600;color:var(--gray-600)}.font-sort-wrap select{padding:8px 14px;border-radius:8px;font-size:14px;color:var(--gray-800);font-family:inherit;transition:border-color .2s}.font-sort-wrap select:focus,.generated-css-wrap textarea:focus{outline:0;border-color:var(--primary-500)}.font-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;margin-bottom:28px}.font-card{flex:1 1 220px;max-width:300px;padding:20px;background:#fff;border:2px solid var(--gray-200);border-radius:14px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 8px rgba(0,0,0,.04)}.font-card:hover{border-color:var(--primary-400);box-shadow:0 6px 20px rgba(235,57,68,.12);transform:translateY(-3px)}.font-card.font-card-selected,.font-card.selected{border-color:var(--primary-500);background:linear-gradient(135deg,#fff5f6 0,#ffe4e6 100%);box-shadow:0 4px 16px rgba(235,57,68,.2)}.font-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.font-card-name{font-size:13px;font-weight:700;color:var(--gray-700);text-transform:uppercase;letter-spacing:.5px}.font-category-badge{font-size:11px;color:var(--gray-500);font-weight:500;background:var(--gray-100);padding:2px 8px;border-radius:20px;white-space:nowrap}.font-preview-wrap{flex:1}.font-preview-input{width:100%;border:1px solid var(--gray-200);border-radius:6px;padding:8px 10px;font-size:22px;color:var(--gray-800);background:var(--gray-50);box-sizing:border-box;outline:0;transition:border-color .2s}.font-preview-input:focus{border-color:var(--primary-400);background:#fff}.font-card-preview{font-size:22px;color:var(--gray-800);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-size-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gray-600)}.font-size-row label{white-space:nowrap;font-size:13px;color:var(--gray-600)}.font-size-value{font-weight:600;color:var(--gray-700)}.font-size-slider{flex:1;accent-color:var(--primary-500);cursor:pointer}.font-card-actions{display:flex;gap:8px}.btn-use-font{padding:7px 16px;background:#fff;border:2px solid var(--gray-300);border-radius:8px;font-size:13px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:all .2s;white-space:nowrap}.btn-use-font:hover{border-color:var(--primary-400);color:var(--primary-500)}.btn-use-font.btn-use-font-selected{background:var(--gradient-red);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(235,57,68,.25)}.font-card-category{font-size:11px;color:var(--gray-500);font-weight:500}.selected-font-name{font-weight:600;color:var(--gray-800);font-size:14px;min-width:120px}.selected-font-detail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1}.font-family-value,.font-import-url{font-size:12px;font-family:"Courier New",Courier,monospace;color:var(--gray-600);background:var(--gray-100);padding:3px 8px;border-radius:4px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.btn-copy-snippet,.btn-remove-font{padding:5px 12px;background:#fff;border:1px solid var(--gray-300);border-radius:6px;font-size:12px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:all .2s;white-space:nowrap}.btn-copy-snippet:hover,.btn-remove-font:hover{border-color:var(--primary-400);color:var(--primary-500)}.btn-remove-font{color:var(--gray-500);margin-left:auto;flex-shrink:0}.btn-remove-font:hover{background:rgba(235,57,68,.05)}.font-empty{padding:40px;text-align:center;color:var(--gray-500);font-size:15px;width:100%}.selected-fonts-panel{padding:24px;background:#fff;border:1px solid var(--gray-200);border-radius:14px;margin-bottom:28px;box-shadow:0 4px 16px rgba(0,0,0,.06)}.selected-fonts-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}.selected-fonts-header h3{font-size:18px;font-weight:700;color:var(--gray-800);margin:0}.btn-generate-css{padding:10px 24px;background:var(--gradient-red);color:#fff;border:0;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(235,57,68,.25)}.btn-copy-all:hover,.btn-generate-css:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(235,57,68,.35)}.generated-css-wrap textarea,.selected-font-item{border-radius:10px;color:var(--gray-800);background:var(--gray-50)}.selected-font-item{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:wrap;gap:8px;padding:12px 16px;margin-bottom:8px;font-size:14px}.generated-css-wrap{margin-top:20px;padding-top:20px;border-top:1px solid var(--gray-200);display:flex;flex-direction:column;gap:10px}.btn-copy-all,.generated-css-wrap label{font-size:13px;font-weight:600;color:var(--gray-700)}.generated-css-wrap textarea{width:100%;padding:16px;border:2px solid var(--gray-200);font-size:13px;font-family:"Courier New",Courier,monospace;resize:vertical;box-sizing:border-box;line-height:1.7}.btn-copy-all{align-self:flex-end;padding:10px 24px;background:#fff;color:var(--primary-500);border:2px solid var(--primary-500);border-radius:10px;font-size:14px;cursor:pointer;transition:all .2s}.btn-copy-all:hover{background:var(--gradient-red);color:#fff;box-shadow:0 4px 12px rgba(235,57,68,.25)}.clipper-ui{background:#111;border-radius:16px;overflow:visible;margin-bottom:32px}.clipper-video-wrap{position:relative;background:#000;display:flex;align-items:center;justify-content:center;min-height:240px;max-height:420px}.clipper-video-wrap video{display:block;width:100%;max-height:420px;object-fit:contain}.clipper-controls-bar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#1a1a1a}.clipper-play-btn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}.clipper-play-btn:hover{background:rgba(255,255,255,.22)}.clipper-time-display{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums;letter-spacing:.5px}.clipper-trim-wrap{position:relative;height:64px;background:#2a2a2a;margin:0 0 36px;user-select:none;overflow:visible}.clipper-dim{position:absolute;top:0;height:100%;background:rgba(0,0,0,.55);pointer-events:none;z-index:1;max-width:100%}.clipper-dim-left{left:0}.clipper-dim-right{right:0;left:auto}.clipper-handle,.clipper-trim-region{position:absolute;top:0;height:100%;box-sizing:border-box}.clipper-trim-region{border-top:3px solid #ffd60a;border-bottom:3px solid #ffd60a;pointer-events:none;z-index:2}.clipper-handle{width:28px;background:#ffd60a;cursor:ew-resize;z-index:4;display:flex;align-items:center;justify-content:center;touch-action:none}.clipper-handle-start{border-radius:6px 0 0 6px}.clipper-handle-end{border-radius:0 6px 6px 0}.clipper-handle-grip{width:3px;height:20px;background:rgba(0,0,0,.4);border-radius:2px}.clipper-handle-tooltip{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#ffd60a;color:#111;font-size:11px;font-weight:700;padding:3px 7px;border-radius:5px;white-space:nowrap;z-index:10;pointer-events:none;font-variant-numeric:tabular-nums}.clipper-handle-tooltip::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-bottom-color:#ffd60a}.clipper-playhead,.clipper-playhead::before{position:absolute;transform:translateX(-50%);background:#fff}.clipper-playhead{top:0;bottom:0;width:2px;z-index:3;pointer-events:none}.clipper-playhead::before{content:"";top:-5px;left:50%;width:10px;height:10px;border-radius:50%}.clipper-duration-row{display:flex;align-items:center;justify-content:center;padding:8px 16px;background:#1a1a1a;font-size:13px;color:rgba(255,255,255,.55)}.clipper-duration-row strong{color:#ffd60a;font-variant-numeric:tabular-nums}.clipper-options-row{display:flex;flex-direction:row;gap:16px;flex-wrap:wrap;padding:14px 20px;background:#1a1a1a;border-top:1px solid #2a2a2a}.clipper-option{display:flex;flex-direction:column;gap:5px}.clipper-option label{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}.clipper-option select{padding:8px 12px;border:1px solid #333;border-radius:8px;font-size:14px;color:#fff;background:#2a2a2a;cursor:pointer;font-family:inherit}.clipper-option select:focus{outline:0;border-color:#ffd60a}.clipper-actions{display:flex;padding:16px 20px;background:#1a1a1a;border-top:1px solid #2a2a2a}.clipper-clip-btn{flex:1;padding:14px;font-size:16px;font-weight:700}.clip-progress,.clipper-ui #downloadWrap{background:#1a1a1a;border-top:1px solid #2a2a2a}.clip-progress{padding:14px 20px;font-size:14px;color:rgba(255,255,255,.7);text-align:center;letter-spacing:.3px}.clipper-ui #downloadWrap{padding:16px 20px;border-radius:0 0 16px 16px}.clipper-ui .btn-download{display:block;width:100%;padding:14px;background:#ffd60a;color:#111;text-align:center;font-size:16px;font-weight:700;border-radius:10px;text-decoration:none;box-sizing:border-box;transition:background .15s,transform .15s;box-shadow:none}.clipper-ui .btn-download:hover{background:#ffe033;transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,214,10,.4)}@media (max-width:768px){.clipper-trim-wrap{height:48px}.clipper-handle{width:18px}.watermark-editor-inner{flex-direction:column}.watermark-controls-wrap{width:100%}.font-picker-controls{flex-direction:column;align-items:flex-start}.font-search-wrap{width:100%}.font-grid{gap:12px}.font-card{flex:1 1 160px}.crop-toolbar{flex-direction:column;align-items:flex-start}.crop-actions{margin-left:0;width:100%;justify-content:flex-end}.clipper-options-row,.merge-actions,.output-options-row{flex-direction:column}.merge-actions{align-items:flex-start}}@media (max-width:480px){.crop-presets{flex-wrap:wrap}.font-card{flex:1 1 100%;max-width:100%}.filter-btn{font-size:12px;padding:6px 12px}.btn-copy-all,.btn-generate-css{width:100%;text-align:center}}.meta-file-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.meta-tab-btn,.meta-table tbody td{font-size:14px;color:var(--gray-700)}.meta-tab-btn{padding:10px 20px;background:#f8f9fa;border-radius:0;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.meta-tab-btn:hover{border-color:var(--primary-500);color:var(--primary-500)}.meta-tab-btn.active{background:var(--primary-500);border-color:var(--primary-500);color:#fff}.btn-meta-action,.meta-actions,.meta-tab-btn{border:1px solid var(--gray-200)}.meta-actions{display:flex;flex-wrap:wrap;gap:10px;padding:20px 24px;background:#f8f9fa;margin-bottom:24px}.btn-meta-action{padding:10px 20px;background:#fff;color:var(--gray-700);font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;border-radius:0;white-space:nowrap}.btn-meta-action:hover{border-color:var(--primary-500);color:var(--primary-500);transform:translateY(-1px)}.btn-meta-action.btn-primary{background:var(--gradient-red);border-color:var(--primary-500);color:#fff}.btn-meta-action.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(235,57,68,.25)}.btn-meta-action.btn-secondary{background:var(--secondary-gradient);border-color:transparent;color:#fff}.btn-meta-action.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(100,116,139,.25)}.btn-meta-action.btn-danger{background:#fff;border-color:#ef4444;color:#ef4444}.btn-meta-action.btn-danger:hover{background:#ef4444;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.25)}.meta-table-wrapper{display:flex;flex-direction:column;gap:24px}.meta-category{background:#fff;border:1px solid var(--gray-200);overflow:hidden}.meta-category-title{font-size:16px;font-weight:700;color:#fff;background:var(--gradient-red);padding:12px 20px;margin:0;letter-spacing:.03em;text-transform:uppercase}.meta-table{width:100%;border-collapse:collapse}.meta-table thead th{padding:10px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);background:#f8f9fa;border-bottom:1px solid var(--gray-200);text-align:left}.meta-col-include{width:60px;text-align:center!important}.meta-col-field{width:180px}.meta-col-value{width:auto}.meta-table tbody tr{border-bottom:1px solid #f0f0f0;transition:background .15s ease}.meta-table tbody tr:hover{background:rgba(235,57,68,.03)}.meta-table tbody td{padding:8px 16px;vertical-align:middle}.meta-table tbody td label{font-weight:600;color:var(--gray-800);cursor:pointer}.meta-row-empty td label{color:var(--gray-500);font-weight:400}.meta-table input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary-500);cursor:pointer}.meta-value-input{width:100%;padding:8px 12px;border:1px solid #e5e7eb;background:#fff;font-size:14px;font-family:"Courier New",monospace;color:var(--gray-800);transition:border-color .2s ease,box-shadow .2s ease;border-radius:0;box-sizing:border-box}.meta-value-input:focus{outline:0;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(235,57,68,.1)}.meta-value-input::placeholder{color:#c5c8cc;font-style:italic}.meta-row-empty .meta-value-input{background:#fafafa}@media (max-width:768px){.meta-actions{padding:16px}.btn-meta-action{flex:1 1 calc(50% - 5px);text-align:center;padding:10px 12px;font-size:13px}.meta-col-field{width:120px}.meta-table tbody td{padding:6px 10px;font-size:13px}.meta-tab-btn,.meta-value-input{font-size:13px;padding:6px 8px}.meta-tab-btn{max-width:150px;padding:8px 14px}}@media (max-width:480px){.btn-meta-action{flex:1 1 100%}.meta-col-include{width:40px}.meta-col-field{width:90px}}.code-tool{background:#fff;border-radius:16px;border:1px solid var(--gray-200);padding:2rem;margin-top:2rem}.code-tool-options{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}.code-tool-label{font-size:.875rem;font-weight:600;color:var(--gray-700)}.code-tool-btns{display:flex;gap:.5rem}.code-opt-btn{padding:.4rem .9rem;border:1px solid var(--gray-300);border-radius:7px;background:#fff;color:var(--gray-700);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.code-opt-btn.active,.code-opt-btn:hover{background:var(--primary-500);border-color:var(--primary-500);color:#fff}.code-panel,.code-panels{display:flex;gap:1.5rem}.code-panel{flex-direction:column;flex:1;gap:.4rem}.code-panel-label{font-size:.875rem;font-weight:600;color:var(--gray-600)}.code-textarea{width:100%;min-height:260px;padding:1rem;border:1px solid var(--gray-300);border-radius:10px;font-size:.875rem;font-family:"Courier New",Courier,monospace;resize:vertical;line-height:1.5;color:var(--gray-800);box-sizing:border-box;transition:border-color .2s}.code-textarea:focus{outline:0;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(235,57,68,.1)}.code-textarea[readonly]{background:var(--gray-50)}.code-textarea.error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.1)}.code-status{margin-top:.75rem;font-size:.875rem;font-weight:600;min-height:1.4em}.code-status.success{color:#10b981}.code-status.error{color:#ef4444}.code-actions{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}@media (max-width:640px){.code-panels{flex-direction:column}}.help-references{margin-top:2rem}.help-references h2{font-size:1.4rem;margin-bottom:.75rem}.help-references-list{margin:0;padding-left:1.5rem;list-style:decimal;color:#475569}.help-references-list li{margin:.5rem 0;font-size:.95rem;line-height:1.5}.help-references-list li a{color:#2563eb;text-decoration:none;word-break:break-word}.help-references-list li a:hover{text-decoration:underline}