*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:0;margin:0}.container{max-width:1400px;margin:20px auto;background:#fffffff2;border-radius:20px;padding:30px;box-shadow:0 20px 40px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.navbar{background:#fffffffa;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:0;box-shadow:0 5px 20px #0000001a;position:sticky;top:0;z-index:1000}.navbar-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;padding:0 20px}.navbar-brand{font-size:1.5em;font-weight:700;color:#2d3748;text-decoration:none;margin-right:40px;padding:20px 0;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar-nav{display:flex;list-style:none;margin:0;padding:0;gap:5px}.nav-item{position:relative}.nav-link{display:flex;align-items:center;padding:18px 20px;color:#4a5568;text-decoration:none;font-weight:500;font-size:15px;transition:all .3s ease;border-radius:8px;margin:8px 0;gap:8px;position:relative;overflow:hidden}.nav-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(102,126,234,.1),transparent);transition:left .5s ease}.nav-link:hover:before{left:100%}.nav-link:hover{color:#667eea;background:#667eea0d;transform:translateY(-2px)}.nav-link.active{color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a);position:relative}.nav-link.active:after{content:"";position:absolute;bottom:0;left:20px;right:20px;height:3px;background:linear-gradient(45deg,#667eea,#764ba2);border-radius:2px}.nav-icon{font-size:16px}.mobile-menu-toggle{display:none;background:none;border:none;font-size:24px;color:#4a5568;cursor:pointer;margin-left:auto}.content-area{padding:20px}.header{text-align:center;margin-bottom:30px}.header h1{color:#2d3748;font-size:2.5em;margin-bottom:10px;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{color:#718096;font-size:1.1em}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:30px}.panel{background:#fff;border-radius:15px;padding:20px;box-shadow:0 10px 25px #00000014;border:1px solid #e2e8f0}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.panel-title{font-size:1.3em;font-weight:600;color:#2d3748}.controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.btn{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:5px}.btn-primary{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-secondary{background:#f7fafc;color:#4a5568;border:1px solid #e2e8f0}.btn-secondary:hover{background:#edf2f7;transform:translateY(-1px)}.btn-danger{background:#fed7d7;color:#c53030;border:1px solid #feb2b2}.btn-danger:hover{background:#fbb6ce;transform:translateY(-1px)}.input-area{width:100%;height:400px;border:2px solid #e2e8f0;border-radius:10px;padding:15px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;resize:none;outline:none;transition:border-color .3s ease}.input-area:focus{border-color:#667eea}.output-area{width:100%;height:400px;border:2px solid #e2e8f0;border-radius:10px;padding:15px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;background:#f8fafc;overflow-y:auto;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;position:relative}.json-viewer{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap}.json-key{color:#d63384;font-weight:600}.json-string{color:#198754;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;max-width:100%;display:inline-block}.json-number{color:#0d6efd}.json-boolean{color:#6f42c1;font-weight:600}.json-null{color:#6c757d;font-style:italic}.json-bracket{color:#495057;font-weight:700}.collapse-btn{display:inline-block;width:16px;height:16px;border:none;background:#667eea;color:#fff;border-radius:3px;cursor:pointer;font-size:12px;font-weight:700;margin-right:5px;transition:all .2s ease;flex-shrink:0}.collapse-btn:hover{background:#5a67d8;transform:scale(1.1)}.collapsed{display:none}.json-line{margin:2px 0;padding:2px 0;border-radius:3px;transition:background-color .2s ease;word-wrap:break-word;overflow-wrap:break-word;display:block}.json-line:hover{background:#667eea1a}.json-comment{color:#6c757d;font-style:italic}.json-string{max-width:100%;word-break:break-all;white-space:pre-wrap;display:inline-block}.output-area .json-viewer{max-width:100%;overflow-x:hidden}.status-bar{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding:10px 15px;background:#f8fafc;border-radius:8px;font-size:13px;color:#64748b}.status-valid{color:#059669;font-weight:500}.status-invalid{color:#dc2626;font-weight:500}.error-message{background:#fef2f2;color:#dc2626;padding:10px;border-radius:8px;margin-top:10px;font-size:14px;border-left:4px solid #dc2626}.collapse-controls{display:flex;gap:8px;flex-wrap:wrap}.stats{display:flex;gap:15px;font-size:13px}.stat-item{display:flex;align-items:center;gap:5px}.mode-selector{display:flex;gap:10px;margin-bottom:30px;justify-content:center}.mode-btn{padding:12px 24px;border:2px solid #e2e8f0;background:#fff;border-radius:12px;cursor:pointer;font-size:15px;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:8px}.mode-btn:hover{border-color:#667eea;transform:translateY(-2px)}.mode-btn.active{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;border-color:transparent}.conversion-mode{display:block}.upload-section{margin-bottom:30px}.upload-area{border:3px dashed #cbd5e0;border-radius:15px;padding:60px 20px;text-align:center;background:#f8fafc;transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden}.upload-area:hover{border-color:#667eea;background:#f0f4ff}.upload-area.dragover{border-color:#667eea;background:#e6f3ff;transform:scale(1.02)}.upload-content{position:relative;z-index:2}.upload-icon{font-size:4em;margin-bottom:20px}.upload-area h3{color:#2d3748;margin-bottom:10px;font-size:1.3em}.upload-area p{color:#718096;margin-bottom:10px}.image-preview-section,.base64-output-section,.decoded-image-section{margin-bottom:30px}.image-preview-container{display:flex;gap:20px;align-items:flex-start}.image-preview{max-width:300px;max-height:300px;border-radius:10px;box-shadow:0 5px 15px #0000001a;border:1px solid #e2e8f0;object-fit:contain}.decoded-image{max-width:400px;max-height:400px;border-radius:10px;box-shadow:0 5px 15px #0000001a;border:1px solid #e2e8f0;object-fit:contain}.image-info,.decoded-info{flex:1;background:#f8fafc;padding:20px;border-radius:10px;border:1px solid #e2e8f0}.info-item{display:flex;justify-content:space-between;margin-bottom:10px;padding:5px 0;border-bottom:1px solid #e2e8f0}.info-item:last-child{border-bottom:none;margin-bottom:0}.info-label{font-weight:500;color:#4a5568}.base64-container,.base64-input-container{position:relative}.base64-textarea{width:100%;height:200px;border:2px solid #e2e8f0;border-radius:10px;padding:15px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;resize:vertical;outline:none;transition:border-color .3s ease;word-break:break-all;line-height:1.5}.base64-textarea:focus{border-color:#667eea}.base64-textarea[readonly]{background:#f8fafc}.image-actions,.output-actions,.input-actions,.decoded-actions{display:flex;gap:10px;align-items:center}.decoded-image-container{display:flex;gap:20px;align-items:flex-start}.error-display{background:#fef2f2;color:#dc2626;padding:15px;border-radius:10px;margin-top:15px;font-size:14px;border-left:4px solid #dc2626}.success-display{background:#f0fdf4;color:#059669;padding:15px;border-radius:10px;margin-top:15px;font-size:14px;border-left:4px solid #059669}.tool-description{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}.description-panel{background:#f8fafc;border-radius:10px;padding:20px;border:1px solid #e2e8f0}.description-panel h3{color:#2d3748;margin-bottom:15px;font-size:1.1em}.description-panel ul,.description-panel ol{margin:0;padding-left:20px}.description-panel li{margin-bottom:8px;line-height:1.5;color:#4a5568}.markdown-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;padding:15px;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0}.toolbar-group{display:flex;gap:5px;align-items:center}.toolbar-btn{padding:8px 12px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s ease;display:flex;align-items:center;gap:4px}.toolbar-btn:hover{background:#667eea;color:#fff;border-color:#667eea}.markdown-editor{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:600px}.editor-panel,.preview-panel{display:flex;flex-direction:column}.editor-stats{display:flex;gap:15px;font-size:13px;color:#64748b}.markdown-textarea{flex:1;border:2px solid #e2e8f0;border-radius:10px;padding:15px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;resize:none;outline:none;transition:border-color .3s ease}.markdown-textarea:focus{border-color:#667eea}.markdown-preview{flex:1;border:2px solid #e2e8f0;border-radius:10px;padding:15px;background:#fff;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{color:#2d3748;margin-top:12px;margin-bottom:8px;line-height:1.3}.markdown-preview h1:first-child,.markdown-preview h2:first-child,.markdown-preview h3:first-child{margin-top:0}.markdown-preview h1{font-size:2em;border-bottom:1px solid #e2e8f0;padding-bottom:6px;margin-bottom:10px}.markdown-preview h2{font-size:1.5em}.markdown-preview h3{font-size:1.25em}.markdown-preview p{margin-top:0;margin-bottom:10px;color:#4a5568;line-height:1.6}.markdown-preview code{background:#f1f5f9;padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9em}.markdown-preview pre{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px;overflow-x:auto;margin-top:8px;margin-bottom:12px}.markdown-preview pre code{background:none;padding:0}.markdown-preview blockquote{border-left:4px solid #667eea;padding-left:16px;margin:12px 0;color:#64748b;font-style:italic}.markdown-preview ul,.markdown-preview ol{padding-left:24px;margin-top:6px;margin-bottom:12px}.markdown-preview li{margin-bottom:4px;line-height:1.5}.markdown-preview table{border-collapse:collapse;width:100%;margin-top:8px;margin-bottom:12px}.markdown-preview th,.markdown-preview td{border:1px solid #e2e8f0;padding:8px 12px;text-align:left}.markdown-preview th{background:#f8fafc;font-weight:600}.m3u8-input-section,.video-player-section,.m3u8-help-section{margin-bottom:30px}.url-input-container{margin-bottom:15px}.m3u8-url-input{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;outline:none;transition:border-color .3s ease}.m3u8-url-input:focus{border-color:#667eea}.url-examples{background:#f0f4ff;padding:15px;border-radius:8px;border-left:4px solid #667eea}.url-examples p{margin:0 0 8px;color:#4a5568;font-weight:500}.url-examples ul{margin:0;padding-left:20px}.url-examples li{color:#64748b;margin-bottom:4px}.video-container{position:relative;width:100%;margin-bottom:20px}.video-player{width:100%;max-height:500px;border-radius:10px;background:#000}.video-info{background:#f8fafc;padding:15px;border-radius:8px;border:1px solid #e2e8f0}.help-content{color:#4a5568;line-height:1.6}.help-content h4{color:#2d3748;margin-top:20px;margin-bottom:10px}.help-content h4:first-child{margin-top:0}.help-content ul,.help-content ol{padding-left:20px;margin-bottom:15px}.help-content li{margin-bottom:5px}@media (max-width: 768px){.tool-description{grid-template-columns:1fr}.markdown-editor{grid-template-columns:1fr;height:auto}.editor-panel,.preview-panel{margin-bottom:20px}.markdown-textarea,.markdown-preview{height:300px}.toolbar-group{flex-wrap:wrap}.image-preview-container,.decoded-image-container{flex-direction:column}.image-preview,.decoded-image{max-width:100%;align-self:center}.mode-selector{flex-direction:column;align-items:center}.mode-btn{width:200px;justify-content:center}.image-actions,.output-actions,.input-actions,.decoded-actions{flex-wrap:wrap;justify-content:center}}@media (max-width: 768px){.main-content{grid-template-columns:1fr}.controls{justify-content:center}.input-area,.output-area{height:300px}.navbar-nav{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fffffffa;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 5px 20px #0000001a;border-radius:0 0 15px 15px;padding:10px 20px}.navbar-nav.active{display:flex}.mobile-menu-toggle{display:block}.navbar-brand{margin-right:20px}.nav-link{margin:5px 0;padding:15px 10px}.container{margin-top:10px;margin-bottom:10px;padding:20px}}.audio-preview-section,.audio-base64-output-section,.decoded-audio-section{margin-bottom:30px}.audio-preview-container{display:flex;flex-direction:column;gap:20px;align-items:center}.audio-player{width:100%;max-width:500px;border-radius:10px;outline:none}.audio-info{width:100%;background:#f8fafc;padding:20px;border-radius:10px;border:1px solid #e2e8f0}.decoded-audio-container{display:flex;flex-direction:column;gap:20px;align-items:center}.audio-actions{display:flex;gap:10px;align-items:center}@media (max-width: 768px){.audio-preview-container,.decoded-audio-container{flex-direction:column}.audio-player{max-width:100%}}