:root{--bg:#fffbeb;--fg:#1a1a1a;--accent:#ff9f1c;--accent-2:#ff6b9d;--accent-3:#00d4aa;--accent-4:#7c5cfc;--border:#1a1a1a;--border-w:3px;--shadow:4px 4px 0 #1a1a1a;--shadow-sm:2px 2px 0 #1a1a1a;--shadow-active:1px 1px 0 #1a1a1a;--radius:0px;--card-bg:#fff;--danger:#f44;--success:#00d4aa;--font:"Space Grotesk", system-ui, -apple-system, sans-serif}[data-theme=dark]{--bg:#1a1a2e;--fg:#f0f0f0;--border:#f0f0f0;--shadow:4px 4px 0 #f0f0f0;--shadow-sm:2px 2px 0 #f0f0f0;--shadow-active:1px 1px 0 #f0f0f0;--card-bg:#16213e}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background-color:var(--bg);color:var(--fg);min-height:100vh;line-height:1.5}a{color:var(--fg);text-underline-offset:3px;text-decoration-thickness:2px}code{background:var(--accent);border:2px solid var(--border);padding:1px 6px;font-family:Space Mono,monospace;font-size:.9em;font-weight:600}.container{max-width:720px;margin:0 auto;padding:2rem 1.5rem}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.logo{letter-spacing:-1px;font-size:2.5rem;font-weight:700}.logo-accent{color:var(--accent-2)}.header-actions{align-items:center;gap:.5rem;display:flex}.subtitle{margin-bottom:2rem;font-size:1.1rem;line-height:1.6}.info-section{border:var(--border-w) solid var(--border);background:var(--card-bg);box-shadow:var(--shadow);margin-bottom:2rem;padding:1.2rem 1.5rem}.info-title{margin-bottom:.8rem;font-size:1.1rem;font-weight:700}.info-list{margin:0;list-style:none}.info-list li{margin-bottom:.6rem;line-height:1.5}.info-list li:last-child{margin-bottom:0}.mode-selector{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.mode-label{font-size:.95rem;font-weight:600}.mode-buttons{border:var(--border-w) solid var(--border);box-shadow:var(--shadow-sm);gap:0;display:flex}.mode-btn{font-family:var(--font);border:none;border-right:var(--border-w) solid var(--border);background:var(--card-bg);color:var(--fg);cursor:pointer;padding:.5rem 1rem;font-size:.85rem;font-weight:600;transition:background .15s}.mode-btn:last-child{border-right:none}.mode-btn:hover,.mode-btn-active{background:var(--accent);color:#1a1a1a}.btn{font-family:var(--font);border:var(--border-w) solid var(--border);background:var(--card-bg);color:var(--fg);cursor:pointer;box-shadow:var(--shadow);align-items:center;gap:.4rem;padding:.6rem 1.2rem;font-size:1rem;font-weight:600;transition:transform .1s,box-shadow .1s;display:inline-flex}.btn:hover{box-shadow:var(--shadow-sm);transform:translate(1px,1px)}.btn:active{box-shadow:none;transform:translate(3px,3px)}.btn-sm{box-shadow:var(--shadow-sm);padding:.4rem .8rem;font-size:.85rem}.btn-sm:hover{box-shadow:var(--shadow-active);transform:translate(1px,1px)}.btn-sm:active{box-shadow:none;transform:translate(2px,2px)}.btn-primary{background:var(--accent);color:#1a1a1a}.btn-danger{background:var(--danger);color:#fff}.btn-outline{background:0 0}.theme-icon-dark,[data-theme=dark] .theme-icon-light{display:none}[data-theme=dark] .theme-icon-dark{display:inline}.drop-zone{border:var(--border-w) dashed var(--border);background:var(--card-bg);text-align:center;cursor:pointer;box-shadow:var(--shadow);margin-bottom:2rem;padding:3rem 2rem;transition:transform .1s,box-shadow .1s,border-color .2s,background-color .2s}.drop-zone:hover{background:var(--accent);box-shadow:var(--shadow-sm);border-style:solid;transform:translate(1px,1px)}.drop-zone.dragover{background:var(--accent);box-shadow:var(--shadow-active);border-style:solid;transform:translate(2px,2px)}.drop-zone-content{pointer-events:none}.drop-zone-icon{color:var(--fg);margin-bottom:1rem}.drop-zone-text{margin-bottom:.5rem;font-size:1.1rem}.drop-zone-hint{opacity:.7;font-size:.85rem}.file-list{border:var(--border-w) solid var(--border);background:var(--card-bg);box-shadow:var(--shadow);margin-bottom:2rem}.file-list-header{border-bottom:var(--border-w) solid var(--border);background:var(--accent);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:.8rem 1rem;display:flex}.file-list-title{color:#1a1a1a;font-size:1.1rem;font-weight:700}.file-list-actions{gap:.5rem;display:flex}.file-items{max-height:300px;list-style:none;overflow-y:auto}.file-item{border-bottom:2px solid var(--border);justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem 1rem;font-size:.9rem;display:flex}.file-item:last-child{border-bottom:none}.file-item-left{flex:1;align-items:center;gap:1rem;min-width:0;display:flex}.file-item-right{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.file-item-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}.file-item-size{opacity:.7;white-space:nowrap;font-size:.8rem}.file-item-badge{border:2px solid var(--border);white-space:nowrap;cursor:pointer;background:inherit;color:inherit;padding:2px 8px;font-size:.7rem;font-weight:700;transition:transform .1s,box-shadow .1s}.file-item-badge:hover{transform:scale(1.05)}.file-item-badge:active{transform:scale(.95)}.file-item-process{border:2px solid var(--border);background:var(--accent);cursor:pointer;width:28px;height:28px;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;padding:0;transition:transform .1s,box-shadow .1s;display:inline-flex}.file-item-process:hover{box-shadow:var(--shadow-active);transform:translate(1px,1px)}.file-item-process:active{box-shadow:none;transform:translate(2px,2px)}.file-item-process svg{color:#1a1a1a;display:block}.badge-encode{background:var(--accent-3);color:#1a1a1a}.badge-decode{background:var(--accent-4);color:#fff}.results{border:var(--border-w) solid var(--border);background:var(--card-bg);box-shadow:var(--shadow);margin-bottom:2rem}.results-header{border-bottom:var(--border-w) solid var(--border);background:var(--accent-3);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:.8rem 1rem;display:flex}.results-title{color:#1a1a1a;font-size:1.1rem;font-weight:700}.result-items{list-style:none}.result-item{border-bottom:2px solid var(--border);justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem 1rem;font-size:.9rem;display:flex}.result-item:last-child{border-bottom:none}.result-item-info{flex:1;align-items:center;gap:.5rem;min-width:0;display:flex}.result-item-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.result-item-preview{border:2px solid var(--border);width:36px;height:36px;image-rendering:pixelated;flex-shrink:0}.result-item-error-container{padding:0;display:block}.result-item-error-row{justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem 1rem;display:flex}.result-item-error{background:var(--danger);color:#fff;border:2px solid var(--border);cursor:pointer;box-shadow:var(--shadow-sm);align-items:center;gap:.4rem;padding:.4rem .8rem;font-size:.85rem;font-weight:600;transition:transform .1s,box-shadow .1s;display:inline-flex}.result-item-error:hover{box-shadow:var(--shadow-active);transform:translate(1px,1px)}.result-item-error:active{box-shadow:none;transform:translate(2px,2px)}.result-item-error .error-icon{transition:transform .2s}.result-item-error.expanded .error-icon{transform:rotate(180deg)}.result-item-error-details{border-top:2px solid var(--border);background:#ff44441a;padding:.8rem 1rem}.result-item-error-content{color:var(--fg);word-break:break-word;white-space:pre-wrap;font-family:Space Mono,monospace;font-size:.85rem;line-height:1.5}.progress-bar{background:var(--bg);border:2px solid var(--border);width:100%;height:6px}.progress-bar-fill{background:var(--accent);height:100%;transition:width .2s}.footer{text-align:center;opacity:.7;margin-top:3rem;font-size:.85rem}@media (width<=600px){.container{padding:1rem}.logo{font-size:2rem}.drop-zone{padding:2rem 1rem}.file-list-header,.results-header{flex-direction:column;align-items:flex-start}}