:root{--bg: #0f172a;--surface: #1e293b;--border: #334155;--text: #f1f5f9;--muted: #94a3b8;--accent: #3b82f6;--accent-hover: #2563eb;--danger: #ef4444;--success: #22c55e;--radius: 12px;--tap: 48px}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}#app{max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}header{text-align:center;margin-bottom:24px}header h1{font-size:1.5rem;font-weight:700;margin:0 0 8px}header p{margin:0;color:var(--muted);font-size:.9rem}.disclaimer{font-size:.75rem;color:var(--muted);margin-top:8px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px}label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px;color:var(--muted)}input[type=url],select{width:100%;min-height:var(--tap);padding:12px 14px;font-size:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=url]:focus,select:focus{outline:2px solid var(--accent);outline-offset:2px}.btn-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}button{flex:1;min-width:120px;min-height:var(--tap);padding:12px 20px;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius);cursor:pointer;touch-action:manipulation}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:not(:disabled):hover,.btn-primary:not(:disabled):active{background:var(--accent-hover)}.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}.preview{display:none}.preview.visible{display:block}.preview img{width:100%;max-height:200px;object-fit:cover;border-radius:var(--radius);margin-bottom:12px}.preview h2{font-size:1.1rem;margin:0 0 4px;word-break:break-word}.meta{font-size:.85rem;color:var(--muted);margin-bottom:12px}.message{padding:12px 14px;border-radius:var(--radius);font-size:.9rem;margin-bottom:16px;display:none}.message.visible{display:block}.message.error{background:#ef444426;border:1px solid var(--danger);color:#fecaca}.message.info{background:#3b82f626;border:1px solid var(--accent);color:#bfdbfe}.message.success{background:#22c55e26;border:1px solid var(--success);color:#bbf7d0}.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:8px}@keyframes spin{to{transform:rotate(360deg)}}.progress-wrap{display:none;margin-top:16px}.progress-wrap.visible{display:block}.progress-label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);margin-bottom:8px}.progress-label strong{color:var(--text);font-size:1rem}.progress-track{height:10px;background:var(--bg);border-radius:999px;overflow:hidden;border:1px solid var(--border)}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#60a5fa);border-radius:999px;transition:width .25s ease}.progress-detail{margin-top:8px;font-size:.75rem;color:var(--muted);word-break:break-word}.download-link-wrap{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.download-link-wrap.visible{display:block}.download-link{display:block;text-align:center;padding:14px 16px;background:var(--success);color:#052e16;font-weight:700;font-size:1rem;border-radius:var(--radius);text-decoration:none;min-height:var(--tap);line-height:1.3}.download-link:active,.download-link:hover{filter:brightness(1.05)}.download-hint{margin:10px 0 0;font-size:.8rem;color:var(--muted);text-align:center}footer{text-align:center;font-size:.75rem;color:var(--muted);margin-top:24px}