:root{--bg: #0c0c0c;--surface: #141414;--surface-hover: #1a1a1a;--border: #262626;--border-focus: #404040;--text: #ededed;--text-muted: #737373;--text-subtle: #525252;--accent: #ffffff;--danger: #ef4444;--success: #22c55e;--warn: #eab308;--radius: 10px;--font: "Inter", system-ui, -apple-system, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}#app{min-height:100%;display:flex;flex-direction:column}.layout{width:100%;max-width:800px;margin:0 auto;padding:48px 24px 64px;flex:1}header{margin-bottom:40px}header h1{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}header p{font-size:.875rem;color:var(--text-muted);max-width:52ch}.dropzone{border:1px dashed var(--border);border-radius:var(--radius);padding:48px 24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--surface)}.dropzone:hover,.dropzone.dragover{border-color:var(--border-focus);background:var(--surface-hover)}.dropzone-icon{width:32px;height:32px;margin:0 auto 16px;color:var(--text-subtle)}.dropzone-title{font-size:.9375rem;font-weight:500;margin-bottom:4px}.dropzone-hint{font-size:.8125rem;color:var(--text-muted)}.dropzone input{display:none}.file-list{margin-top:24px;display:flex;flex-direction:column;gap:12px}.file-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.preview-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-bottom:1px solid var(--border)}.preview-cell{background:var(--bg);padding:12px;min-width:0}.preview-cell--empty .preview-placeholder{display:flex}.preview-label{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:8px}.preview-frame{aspect-ratio:4 / 3;background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}.preview-frame img{width:100%;height:100%;object-fit:contain;display:block}.preview-placeholder{aspect-ratio:4 / 3;background:var(--surface);border:1px dashed var(--border);border-radius:6px;align-items:center;justify-content:center;color:var(--text-subtle);font-size:.75rem;display:none}.file-row{display:flex;align-items:center;gap:12px;padding:12px 14px;font-size:.8125rem}.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.file-meta,.file-status{color:var(--text-muted);font-size:.75rem;flex-shrink:0}.file-status.done{color:var(--success)}.file-status.warn{color:var(--warn)}.file-status.error{color:var(--danger)}.scan-block{padding:10px 14px 12px;border-top:1px solid var(--border);font-size:.75rem;color:var(--text-muted)}.scan-block.found{background:#ffffff05}.scan-block.clean{color:var(--success)}.scan-label{display:inline-block;font-weight:600;color:var(--text);margin-right:6px;text-transform:uppercase;letter-spacing:.04em;font-size:.6875rem}.scan-block ul{margin:8px 0 0;padding-left:16px}.scan-block li{margin-top:4px}.scan-block li strong{color:var(--text);font-weight:500}.file-action{background:none;border:1px solid var(--border);color:var(--text);font-size:.75rem;padding:4px 10px;border-radius:6px;cursor:pointer;flex-shrink:0;font-family:inherit;transition:border-color .15s,background .15s}.file-action:hover:not(:disabled){border-color:var(--border-focus);background:var(--surface-hover)}.actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}.btn{font-family:inherit;font-size:.8125rem;font-weight:500;padding:10px 18px;border-radius:8px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:border-color .15s,background .15s}.btn:hover:not(:disabled){border-color:var(--border-focus);background:var(--surface-hover)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.btn-primary:hover:not(:disabled){background:#d4d4d4;border-color:#d4d4d4}footer{padding:24px;text-align:center;font-size:.75rem;color:var(--text-subtle);border-top:1px solid var(--border)}@media(max-width:480px){.layout{padding:32px 16px 48px}.dropzone{padding:36px 16px}.preview-row{grid-template-columns:1fr}.file-row{flex-wrap:wrap}.actions{flex-direction:column}.btn{width:100%}}
