:root{--bg: #0c0f14;--panel: #141a22;--border: #243044;--text: #e8edf4;--muted: #8b9cb3;--accent: #3dd6c6;--accent-dim: #2a9d90;--danger: #f87171;--radius: 12px;font-family:DM Sans,system-ui,sans-serif;color:var(--text);background:var(--bg)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#121820 0%,var(--bg) 100%)}.brand{display:flex;align-items:center;gap:.75rem}.logo{font-size:1.75rem;color:var(--accent);line-height:1}.brand h1{margin:0;font-size:1.15rem;font-weight:600;letter-spacing:-.02em}.tagline{margin:.15rem 0 0;font-size:.8rem;color:var(--muted)}.main{flex:1;padding:1.5rem;display:flex;flex-direction:column;min-height:0}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}.settings{margin:0 1.5rem;padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}.settings h2{margin:0;font-size:1rem}.settings label{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;color:var(--muted)}.settings input,.settings select{padding:.55rem .75rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit}.hint{margin:0;font-size:.8rem;color:var(--muted);line-height:1.45}code{font-size:.75rem;background:var(--bg);padding:.1rem .35rem;border-radius:4px}.btn{font:inherit;cursor:pointer;border-radius:8px;border:1px solid transparent;padding:.5rem 1rem;font-weight:500;font-size:.875rem}.btn.primary{background:var(--accent);color:#042a26}.btn.primary:hover{background:#4ee8d8}.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}.btn.ghost:hover{border-color:var(--muted)}.dropzone{flex:1;min-height:320px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s}.dropzone.drag-over{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-dim)}.dropzone.disabled{opacity:.65}.drop-inner{text-align:center;padding:2rem;max-width:28rem}.drop-title{font-size:1.1rem;font-weight:500;margin:0 0 1rem}.file-btn{position:relative;display:inline-block;margin-top:1rem}.file-btn input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.progress{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin:1rem 0}.progress-fill{height:100%;background:var(--accent);transition:width .2s ease}.spinner{width:32px;height:32px;margin:1rem auto;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{color:var(--danger);font-size:.875rem;margin:.75rem 0 0}.mono{font-family:ui-monospace,Cascadia Code,monospace;font-size:.75rem;word-break:break-all}.subtle{color:var(--muted);margin-top:.5rem}.viewer-wrap{flex:1;display:flex;flex-direction:column;min-height:calc(100vh - 8rem);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}.viewer-wrap>div:first-child{flex:1;min-height:0}.viewer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:0;border:none;border-top:1px solid var(--border)}.viewer-links{flex:1;min-width:12rem;display:flex;flex-direction:column;gap:.35rem}.viewer-links a{color:var(--accent)}