.converter-app{--conv-bg: #f4f4f0;--conv-surface: #ffffff;--conv-black: #000;--conv-border: 3px solid #000;--conv-border-thick: 4px solid #000;--conv-shadow: 4px 4px 0px #000;--conv-shadow-lg: 8px 8px 0px #000;--conv-yellow: #fef08a;--conv-yellow-hot: #fde047;--conv-lime: #a3e635;--conv-pink: #f472b6;--conv-blue: #93c5fd;--conv-red: #f87171;position:relative;width:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--conv-bg);font-family:Space Grotesk,sans-serif;-webkit-user-select:none;user-select:none}.converter-app.converter-app--fullpage{height:calc(100vh - 104px);min-height:400px}.converter-app .conv-header{display:flex;align-items:center;justify-content:space-between;padding:32px 16px 14px;border-bottom:var(--conv-border);background:var(--conv-surface);flex-shrink:0;gap:12px;flex-wrap:wrap}.converter-app .conv-header-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.converter-app .conv-badge{font-family:JetBrains Mono,monospace;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:var(--conv-yellow-hot);border:2px solid #000;padding:3px 8px;display:inline-flex;align-items:center;gap:5px}.converter-app .conv-badge:before{content:"";width:5px;height:5px;background:#000;animation:conv-pulse 2s ease-in-out infinite}@keyframes conv-pulse{0%,to{opacity:1}50%{opacity:.2}}.converter-app .conv-title{font-family:Space Grotesk,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.5px;text-transform:uppercase}.converter-app .conv-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.converter-app .conv-toolbar-divider{width:3px;height:24px;background:#000;margin:0 2px}.converter-app .conv-btn{font-family:JetBrains Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border:3px solid #000;background:var(--conv-surface);color:#000;padding:7px 12px;cursor:pointer;transition:all .08s ease;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:var(--conv-shadow)}.converter-app .conv-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px #000}.converter-app .conv-btn:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 #000}.converter-app .conv-btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}.converter-app .conv-btn.accent{background:var(--conv-yellow-hot)}.converter-app .conv-btn.accent:hover:not(:disabled){background:#f5d400}.converter-app .conv-btn.primary{background:#000;color:#fff}.converter-app .conv-btn.primary:hover:not(:disabled){background:#222;color:#fff}.converter-app .conv-btn.active{background:var(--conv-lime)}.converter-app .conv-btn svg{width:14px;height:14px;flex-shrink:0}.converter-app .conv-export-wrap{position:relative}.converter-app .conv-export-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--conv-surface);border:3px solid #000;padding:4px;min-width:170px;z-index:100;display:none;box-shadow:var(--conv-shadow-lg)}.converter-app .conv-export-menu.open{display:block;animation:conv-menu-in .1s ease both}@keyframes conv-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.converter-app .conv-export-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 14px;border:none;background:none;color:#000;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:background .08s;text-align:left}.converter-app .conv-export-menu button:hover{background:var(--conv-yellow-hot)}.converter-app .conv-export-menu .ext{opacity:.4;font-size:9px}.converter-app .conv-viewport{flex:1;position:relative;overflow:hidden;background:#0d0d0d}.converter-app .conv-viewport canvas{display:block;width:100%!important;height:100%!important}.converter-app .conv-empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;transition:opacity .3s ease}.converter-app .conv-empty-state.hidden{opacity:0}.converter-app .conv-empty-icon{width:56px;height:56px;margin-bottom:16px;opacity:.12}.converter-app .conv-empty-icon svg{width:100%;height:100%}.converter-app .conv-empty-title{font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#fff;opacity:.35}.converter-app .conv-empty-sub{font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:#fff;opacity:.2;margin-top:4px}.converter-app .conv-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px;max-width:900px;width:90%;pointer-events:auto}.converter-app .conv-how-card{border:2px solid rgba(255,255,255,.1);padding:20px;text-align:left;transition:border-color .15s}.converter-app .conv-how-card:hover{border-color:#fde0474d}.converter-app .conv-how-num{font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--conv-yellow-hot);opacity:.7;margin-bottom:8px}.converter-app .conv-how-heading{font-family:Space Grotesk,sans-serif;font-size:16px;font-weight:700;color:#fff;opacity:.8;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.converter-app .conv-how-desc{font-family:Space Grotesk,sans-serif;font-size:13px;font-weight:400;color:#fff;opacity:.3;line-height:1.5;margin-bottom:10px}.converter-app .conv-how-formats{display:flex;flex-wrap:wrap;gap:4px}.converter-app .conv-how-formats span{font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#000;background:var(--conv-yellow-hot);padding:2px 6px;opacity:.7}@media(max-width:768px){.converter-app .conv-how-grid{grid-template-columns:1fr 1fr;gap:8px}}@media(max-width:480px){.converter-app .conv-how-grid{grid-template-columns:1fr}}.converter-app .conv-drop-overlay{position:absolute;inset:0;background:#fde047eb;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:10;border:4px dashed #000;margin:8px}.converter-app .conv-drop-overlay.visible{opacity:1}.converter-app .conv-drop-overlay svg{width:48px;height:48px;stroke:#000;margin-bottom:12px}.converter-app .conv-drop-label{font-family:JetBrains Mono,monospace;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#000}.converter-app .conv-drop-formats{font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:#000;opacity:.6;margin-top:4px}.converter-app .conv-info-overlay{position:absolute;bottom:12px;left:12px;display:flex;gap:6px;pointer-events:none;z-index:3}.converter-app .conv-info-tag{font-family:JetBrains Mono,monospace;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#000;background:var(--conv-yellow-hot);padding:4px 10px;border:2px solid #000}.converter-app .conv-info-tag.file{background:var(--conv-surface)}.converter-app .conv-flash{position:absolute;inset:0;background:var(--conv-yellow-hot);opacity:0;pointer-events:none;z-index:20}.converter-app .conv-flash.flash{animation:conv-flash-anim .3s ease both}@keyframes conv-flash-anim{0%{opacity:.7}to{opacity:0}}.converter-app .conv-file-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:var(--conv-border);background:var(--conv-surface);font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:#000;flex-shrink:0}.converter-app .conv-file-bar [data-conv=file-name]{opacity:.7}.converter-app .conv-file-bar [data-conv=file-stats]{opacity:.5}.converter-app .conv-toast-container{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column-reverse;gap:8px;z-index:50;pointer-events:none}.converter-app .conv-toast{font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:10px 16px;border:3px solid #000;box-shadow:var(--conv-shadow);pointer-events:auto;display:flex;align-items:center;gap:8px;min-width:200px;max-width:360px;animation:conv-toast-in .15s ease both}.converter-app .conv-toast:before{content:"";width:6px;height:6px;background:#000;flex-shrink:0}.converter-app .conv-toast.exit{animation:conv-toast-out .2s ease both}.converter-app .conv-toast.success{background:var(--conv-lime);border-left:6px solid #000}.converter-app .conv-toast.error{background:var(--conv-red);border-left:6px solid #000}.converter-app .conv-toast.info{background:var(--conv-yellow-hot);border-left:6px solid #000}@keyframes conv-toast-in{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@keyframes conv-toast-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}@media(max-width:768px){.converter-app .conv-header{flex-direction:column;align-items:flex-start;gap:8px}.converter-app .conv-toolbar{width:100%}.converter-app .conv-btn{padding:6px 10px;font-size:9px}}
