@import "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Syne:wght@400;600;700;800&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--surface:#111;--surface2:#181818;--border:#242424;--border-hover:#3a3a3a;--text:#e8e8e8;--text-muted:#555;--text-dim:#888;--accent:#e8ff47;--accent-dark:#b8cc2a;--accent-glow:#e8ff471f;--red:#ff4747;--radius:10px;--radius-sm:6px;--mono:"DM Mono", monospace;--display:"Syne", sans-serif}html{scroll-behavior:smooth}body{font-family:var(--mono);background:var(--bg);color:var(--text);min-height:100vh;padding:0;overflow-x:hidden}.app{max-width:860px;margin:0 auto;padding:0 20px 60px}.tabs{gap:8px;margin-bottom:2rem;display:flex}.app-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:36px;padding:40px 0 36px;display:flex}.app-header .brand{flex-direction:column;gap:4px;display:flex}.app-header .logo{font-family:var(--display);letter-spacing:-.03em;color:var(--text);font-size:clamp(22px,4vw,30px);font-weight:800;line-height:1}.app-header .logo span{color:var(--accent)}.app-header .tagline{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:11px}.header-badge{font-size:10px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);opacity:.7;white-space:nowrap;border-radius:20px;padding:4px 10px}.tabs{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);gap:2px;margin-bottom:28px;padding:4px;display:flex}.tab{border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;font-size:12px;font-family:var(--mono);letter-spacing:.04em;white-space:nowrap;background:0 0;border:none;flex:1;padding:10px 12px;transition:all .2s}.tab:hover:not(.active){color:var(--text-dim);background:var(--surface2)}.tab.active{background:var(--accent);color:#0a0a0a;font-weight:500}.tab-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(20px,4vw,32px);animation:.2s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.section-title{font-family:var(--display);letter-spacing:-.02em;color:var(--text);margin-bottom:6px;font-size:clamp(18px,3vw,24px);font-weight:700}.subtitle{color:var(--text-muted);letter-spacing:.02em;margin-bottom:24px;font-size:12px;line-height:1.5}.file-drop-area{border:1.5px dashed var(--border-hover);border-radius:var(--radius);text-align:center;cursor:pointer;color:var(--text-muted);background:linear-gradient(135deg, var(--surface2) 0%, transparent 100%);margin-bottom:24px;padding:clamp(24px,5vw,40px) 20px;font-size:13px;transition:all .25s;position:relative}.file-drop-area:hover,.file-drop-area.drag-over{border-color:var(--accent);color:var(--text);background:var(--accent-glow)}.file-drop-area .drop-icon{opacity:.5;margin-bottom:10px;font-size:28px;display:block}.file-drop-area .drop-label{font-family:var(--display);color:var(--text-dim);margin-bottom:4px;font-size:14px;font-weight:600;display:block}.file-drop-area .drop-hint{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-size:11px}.preview-container{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:24px;display:grid}.img-card{aspect-ratio:3/4;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);cursor:grab;transition:border-color .2s,transform .15s;position:relative;overflow:hidden}.img-card:active{cursor:grabbing}.img-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}.img-card.dragging{opacity:.4;transform:scale(.97)}.img-card.drag-target{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.img-card img{object-fit:cover;pointer-events:none;width:100%;height:100%}.remove-btn{width:22px;height:22px;color:var(--text-muted);border:1px solid var(--border);cursor:pointer;opacity:0;background:#0a0a0ad9;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:10px;line-height:1;transition:opacity .15s,color .15s;display:flex;position:absolute;top:5px;right:5px}.img-card:hover .remove-btn{opacity:1}.remove-btn:hover{color:var(--red);border-color:var(--red)}.page-num{font-size:10px;font-family:var(--mono);color:var(--accent);letter-spacing:.04em;background:#0a0a0abf;border-radius:10px;padding:2px 7px;position:absolute;bottom:5px;left:6px}.drag-hint{color:var(--text-muted);text-align:center;letter-spacing:.05em;margin-bottom:16px;font-size:11px}.actions{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}button{font-family:var(--mono);cursor:pointer;white-space:nowrap;align-items:center;gap:7px;transition:all .2s;display:inline-flex}.convert-btn,.primary-btn{background:var(--accent);color:#0a0a0a;border-radius:var(--radius-sm);letter-spacing:.03em;border:none;padding:10px 22px;font-size:13px;font-weight:500}.convert-btn:hover,.primary-btn:hover{background:var(--accent-dark);transform:translateY(-1px)}.convert-btn:active,.primary-btn:active{transform:translateY(0)}.ghost-btn{color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius-sm);background:0 0;padding:10px 18px;font-size:13px}.ghost-btn:hover{border-color:var(--border-hover);color:var(--text)}.status{color:var(--text-dim);letter-spacing:.03em;align-items:center;gap:8px;margin-top:8px;font-size:12px;display:flex}.status.success{color:var(--accent)}.status.error{color:var(--red)}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;flex-shrink:0;width:12px;height:12px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}video{border-radius:var(--radius);border:1px solid var(--border);object-fit:cover;background:#000;width:100%;max-height:360px;margin-bottom:16px}.warn-banner{border-radius:var(--radius-sm);color:#ffb400;background:#ffb40014;border:1px solid #ffb40040;align-items:flex-start;gap:10px;margin-bottom:20px;padding:12px 14px;font-size:12px;line-height:1.5;display:flex}.warn-banner strong{color:#ffd060}.divider{border:none;border-top:1px solid var(--border);margin:24px 0}@media (width<=600px){.app-header{flex-direction:column;align-items:flex-start;margin-bottom:24px;padding:28px 0 24px}.tabs{flex-direction:column}.tab{text-align:left}.actions{flex-direction:column}.convert-btn,.primary-btn,.ghost-btn{justify-content:center;width:100%}.preview-container{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}}