/* merge.css - responsive, dark mode, animations, mobile-friendly */
:root{ --primary:#1a73e8; --card-bg:#fff; --text:#1f2937; --muted:#6b7280; --border:#e6e6e9; --accent:rgba(26,115,232,0.06); --radius:12px; --shadow:0 8px 24px rgba(16,24,40,0.06); }
.fq2p-card.dark{ --card-bg:#0b1220; --text:#e6eef8; --muted:#9aa8bf; --border:#1f2a3a; --accent:rgba(255,255,255,0.03); --shadow:0 10px 30px rgba(2,6,23,0.6); }
.fq2p-merge-wrap{ font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial; padding:18px; }
.fq2p-card{ max-width:820px; margin:12px auto; background:var(--card-bg); color:var(--text); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); padding:18px; transition:background .25s,color .25s,box-shadow .25s; }
.fq2p-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.fq2p-title{ margin:0; font-size:20px; }
.fq2p-limits{ font-size:13px; color:var(--muted); }
.fq2p-dropzone{ border-radius:10px; border:2px dashed var(--border); padding:22px; text-align:center; cursor:pointer; transition:transform .12s ease, background .12s ease, border-color .12s; background:linear-gradient(0deg,transparent,transparent); }
.fq2p-dropzone:hover{ transform:translateY(-2px); }
.fq2p-dropzone.active{ border-color:var(--primary); background:var(--accent); box-shadow:0 6px 18px rgba(26,115,232,0.08); }
.fq2p-drop-inner{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.fq2p-drop-ico{ font-size:32px; }
.fq2p-drop-text{ font-weight:600; color:var(--text); }
.fq2p-drop-hint{ font-size:13px; color:var(--muted); }
.fq2p-list{ margin-top:12px; display:flex; flex-direction:column; gap:8px; min-height:48px; }
.fq2p-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; background:linear-gradient(180deg, rgba(0,0,0,0.01), transparent); border:1px solid var(--border); transition:transform .12s ease, box-shadow .12s; cursor:grab; }
.fq2p-item:active{ cursor:grabbing; }
.fq2p-item.dragging{ opacity:0.6; transform:scale(.995); box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.fq2p-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fq2p-name{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; }
.fq2p-size{ font-size:12px; color:var(--muted); }
.fq2p-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.fq2p-btn{ border:0; background:#f3f4f6; padding:10px 14px; border-radius:8px; cursor:pointer; transition:transform .12s; font-weight:600; color:var(--text); }
.fq2p-btn:active{ transform:translateY(1px); }
.fq2p-btn.primary{ background:var(--primary); color:#fff; box-shadow:0 6px 18px rgba(26,115,232,0.12); }
.fq2p-mini{ background:transparent; border:0; cursor:pointer; font-size:14px; padding:6px; border-radius:6px; color:var(--muted); }
.fq2p-icon{ background:transparent; border:0; cursor:pointer; font-size:18px; padding:6px; border-radius:6px; color:var(--muted); }
.fq2p-status{ margin-top:10px; font-size:13px; color:var(--muted); min-height:20px; }
.fq2p-footer{ margin-top:8px; font-size:12px; color:var(--muted); }
.fq2p-empty{ text-align:center; padding:12px; color:var(--muted); }
@media (max-width:720px){ .fq2p-card{ padding:14px; margin:8px; } .fq2p-name{ max-width:45vw; } .fq2p-actions{ flex-direction:column; } }
@keyframes fadeInUp{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
.fq2p-item{ animation: fadeInUp .12s ease both; }