/* ============================================================
   DropZone – style.css  |  Premium Dark Glassmorphism UI
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root {
  --clr-bg:          #0b0f1a;
  --clr-glass:       rgba(255,255,255,0.07);
  --clr-glass-hover: rgba(255,255,255,0.12);
  --clr-border:      rgba(255,255,255,0.14);
  --clr-border-hi:   rgba(165,200,255,0.55);
  --clr-text:        #e8efff;
  --clr-muted:       rgba(232,239,255,0.50);
  --clr-accent:      #6fa3ff;
  --clr-accent2:     #c084fc;
  --clr-success:     #34d399;
  --clr-error:       #f87171;
  --clr-warn:        #fbbf24;
  --radius-xl:       28px;
  --radius-lg:       18px;
  --radius-md:       12px;
  --radius-sm:       8px;
  --shadow-glass:    0 8px 40px rgba(0,0,0,0.40);
  --shadow-card:     0 4px 24px rgba(0,0,0,0.30);
  --transition:      all 0.30s cubic-bezier(0.4,0,0.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

/* CRITICAL: Ensure [hidden] always wins over CSS display properties */
[hidden] { display: none !important; }

body {
  font-family:'Outfit',sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- Mesh Background ---------- */
.bg-mesh {
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}

.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.22;
  animation:drift 20s ease-in-out infinite alternate;
}

.orb-1 {
  width:560px; height:560px;
  background:radial-gradient(circle, #3b5bdb, transparent 70%);
  top:-120px; left:-140px;
  animation-duration:22s;
}
.orb-2 {
  width:480px; height:480px;
  background:radial-gradient(circle, #7c3aed, transparent 70%);
  bottom:-100px; right:-120px;
  animation-duration:18s; animation-delay:-6s;
}
.orb-3 {
  width:360px; height:360px;
  background:radial-gradient(circle, #0e7490, transparent 70%);
  top:50%; right:15%;
  animation-duration:25s; animation-delay:-12s;
}

@keyframes drift {
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(40px,60px) scale(1.12); }
}

/* ---------- App Wrapper ---------- */
.app-wrapper {
  position:relative; z-index:1;
  max-width:860px;
  margin:0 auto;
  padding:32px 20px 64px;
  display:flex; flex-direction:column; gap:28px;
}

/* ---------- Header ---------- */
.app-header {
  display:flex; align-items:center;
  justify-content:space-between;
}

.logo { display:flex; align-items:center; gap:11px; }

.logo-icon {
  font-size:2rem;
  animation:pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.12); }
}

.logo-text {
  font-size:1.7rem; font-weight:800;
  background:linear-gradient(90deg, #a5c8ff, #d8b4fe, #a5c8ff);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s linear infinite;
}

@keyframes shimmer {
  0%   { background-position:0% center; }
  100% { background-position:200% center; }
}

.header-actions { display:flex; align-items:center; gap:12px; }

.badge {
  background:rgba(111,163,255,0.18);
  border:1px solid rgba(111,163,255,0.35);
  color:var(--clr-accent);
  font-size:0.78rem; font-weight:600;
  padding:5px 14px; border-radius:50px;
  letter-spacing:0.3px;
}

.clear-all-btn {
  background:rgba(248,113,113,0.12);
  border:1px solid rgba(248,113,113,0.30);
  color:#fca5a5;
  font-family:'Outfit',sans-serif;
  font-size:0.82rem; font-weight:600;
  padding:7px 16px; border-radius:50px;
  cursor:pointer; transition:var(--transition);
}

.clear-all-btn:hover {
  background:rgba(248,113,113,0.25);
  transform:translateY(-1px);
}

/* ---------- Glass base ---------- */
.glass {
  background:var(--clr-glass);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-xl);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ---------- Drop Zone ---------- */
.drop-section { position:relative; }

.drop-zone {
  position:relative;
  min-height:280px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  overflow:hidden;
  transition:var(--transition);
  outline:none;
}

/* animated dashed border via pseudo */
.drop-zone::before {
  content:'';
  position:absolute; inset:0;
  border-radius:var(--radius-xl);
  border:2px dashed rgba(111,163,255,0.30);
  transition:var(--transition);
  pointer-events:none;
}

.drop-zone:hover::before,
.drop-zone:focus::before {
  border-color:rgba(111,163,255,0.70);
}

.drop-zone:hover {
  background:var(--clr-glass-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-glass), 0 0 0 3px rgba(111,163,255,0.15);
}

/* Active drag state */
.drop-zone.drag-active {
  background:rgba(111,163,255,0.14);
  border-color:var(--clr-accent);
  transform:scale(1.01);
}

.drop-zone.drag-active::before {
  border-color:var(--clr-accent);
  animation:marchingAnts 0.9s linear infinite;
}

@keyframes marchingAnts {
  0%   { stroke-dashoffset:0; }
  100% { stroke-dashoffset:24; }
}

/* Drop zone inner content */
.drop-zone-inner {
  display:flex; flex-direction:column;
  align-items:center; gap:14px;
  padding:48px 32px;
  transition:var(--transition);
  text-align:center;
}

.drop-icon svg {
  width:72px; height:72px;
  transition:var(--transition);
}

.drop-zone:hover .drop-icon svg,
.drop-zone.drag-active .drop-icon svg {
  transform:translateY(-6px) scale(1.08);
  filter:drop-shadow(0 6px 16px rgba(111,163,255,0.5));
}

.drop-title {
  font-size:1.3rem; font-weight:700;
  color:var(--clr-text);
}

.drop-sub {
  font-size:0.95rem;
  color:var(--clr-muted);
}

.browse-link {
  background:none; border:none;
  color:var(--clr-accent);
  font-family:'Outfit',sans-serif;
  font-size:inherit; font-weight:600;
  cursor:pointer; text-decoration:underline;
  underline-offset:2px;
  transition:color 0.2s;
}
.browse-link:hover { color:#a5c8ff; }

.drop-hint {
  font-size:0.80rem;
  color:rgba(232,239,255,0.35);
  margin-top:-4px;
}

/* Drag overlay */
.drag-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  background:rgba(111,163,255,0.12);
  border-radius:var(--radius-xl);
  opacity:0; pointer-events:none;
  transition:opacity 0.25s;
}

.drop-zone.drag-active .drag-overlay { opacity:1; }

.drag-overlay-icon { font-size:3rem; animation:bounce 0.7s ease-in-out infinite alternate; }

@keyframes bounce {
  from { transform:translateY(0); }
  to   { transform:translateY(-10px); }
}

.drag-overlay p {
  font-size:1.3rem; font-weight:700;
  background:linear-gradient(90deg, #a5c8ff, #d8b4fe);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ---------- Toast ---------- */
.toast-container {
  position:fixed; bottom:28px; right:24px;
  z-index:9999;
  display:flex; flex-direction:column-reverse; gap:10px;
}

.toast {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:var(--radius-lg);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  font-size:0.9rem; font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,0.40);
  animation:toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
  min-width:260px; max-width:380px;
  pointer-events:auto;
}

.toast.toast-error {
  background:rgba(30,0,0,0.75);
  border:1px solid rgba(248,113,113,0.40);
  color:#fca5a5;
}

.toast.toast-success {
  background:rgba(0,30,15,0.75);
  border:1px solid rgba(52,211,153,0.40);
  color:#6ee7b7;
}

.toast.toast-info {
  background:rgba(0,10,40,0.80);
  border:1px solid rgba(111,163,255,0.40);
  color:#a5c8ff;
}

.toast-icon { font-size:1.2rem; flex-shrink:0; }
.toast-msg  { flex:1; }

.toast-close {
  background:none; border:none; cursor:pointer;
  color:inherit; font-size:0.9rem; opacity:0.6;
  transition:opacity 0.2s; flex-shrink:0;
}
.toast-close:hover { opacity:1; }

@keyframes toastIn {
  from { opacity:0; transform:translateX(40px) scale(0.94); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}

@keyframes toastOut {
  from { opacity:1; transform:translateX(0); }
  to   { opacity:0; transform:translateX(40px); }
}

/* ---------- Queue Section ---------- */
.section-title {
  font-size:1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.2px;
  color:var(--clr-muted);
  display:flex; align-items:center; gap:10px;
}

.queue-list {
  list-style:none;
  display:flex; flex-direction:column; gap:12px;
  margin-top:14px;
}

/* Queue Item */
.queue-item {
  background:var(--clr-glass);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-md);
  backdrop-filter:blur(12px);
  padding:14px 18px;
  display:flex; align-items:center; gap:14px;
  animation:fadeUp 0.3s ease;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

.queue-thumb {
  width:48px; height:48px;
  border-radius:var(--radius-sm);
  object-fit:cover;
  border:1px solid var(--clr-border);
  flex-shrink:0;
}

.queue-info { flex:1; min-width:0; }

.queue-name {
  font-size:0.88rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:8px;
}

.progress-bar-wrap {
  height:6px; border-radius:99px;
  background:rgba(255,255,255,0.10);
  overflow:hidden;
}

.progress-bar {
  height:100%; border-radius:99px; width:0%;
  background:linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
  transition:width 0.12s linear;
  box-shadow:0 0 8px rgba(111,163,255,0.6);
}

.queue-percent {
  font-size:0.78rem; font-weight:600;
  color:var(--clr-accent); min-width:38px; text-align:right;
}

.queue-status {
  font-size:1.2rem; flex-shrink:0;
}

/* ---------- Gallery ---------- */
.gallery-section { display:flex; flex-direction:column; gap:14px; }

.gallery-header { display:flex; justify-content:space-between; align-items:center; }

.gallery-count {
  background:linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:1rem; font-weight:800;
}

.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:16px;
}

/* Gallery Card */
.gallery-card {
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:1/1;
  cursor:pointer;
  background:var(--clr-glass);
  border:1px solid var(--clr-border);
  transition:var(--transition);
  animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes popIn {
  from { opacity:0; transform:scale(0.80); }
  to   { opacity:1; transform:scale(1); }
}

.gallery-card:hover {
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 16px 40px rgba(0,0,0,0.45), 0 0 0 2px var(--clr-accent);
}

.gallery-card img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 0.4s ease;
}

.gallery-card:hover img { transform:scale(1.08); }

/* Card overlay */
.card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,10,0.8) 0%, transparent 55%);
  opacity:0; transition:opacity 0.30s;
  display:flex; flex-direction:column;
  justify-content:flex-end; gap:6px;
  padding:14px 12px;
}

.gallery-card:hover .card-overlay { opacity:1; }

.card-name {
  font-size:0.75rem; font-weight:600;
  color:#fff; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

.card-size {
  font-size:0.68rem;
  color:rgba(255,255,255,0.55);
}

/* Card actions */
.card-actions {
  position:absolute; top:8px; right:8px;
  display:flex; gap:6px;
  opacity:0; transition:opacity 0.25s;
}

.gallery-card:hover .card-actions { opacity:1; }

.card-btn {
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(0,0,0,0.60);
  border:1px solid rgba(255,255,255,0.20);
  color:#fff; font-size:0.8rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition);
  text-decoration:none;
}

.card-btn:hover {
  background:rgba(111,163,255,0.40);
  border-color:var(--clr-accent);
  transform:scale(1.12);
}

.delete-btn:hover {
  background:rgba(248,113,113,0.40) !important;
  border-color:var(--clr-error) !important;
}

/* ---------- Lightbox ---------- */
.lightbox-backdrop {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:fadeIn 0.25s ease;
}

.lightbox {
  position:fixed; inset:0; z-index:901;
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:24px;
  animation:fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

.lb-img-wrap {
  max-width:80vw; max-height:85vh;
  display:flex; flex-direction:column; gap:10px;
  align-items:center;
}

.lb-img-wrap img {
  max-width:100%; max-height:80vh;
  border-radius:var(--radius-lg);
  border:1px solid var(--clr-border);
  box-shadow:0 24px 80px rgba(0,0,0,0.60);
  object-fit:contain;
  animation:zoomIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes zoomIn {
  from { opacity:0; transform:scale(0.88); }
  to   { opacity:1; transform:scale(1); }
}

.lb-meta {
  font-size:0.82rem; color:var(--clr-muted); text-align:center;
}

.lb-close, .lb-prev, .lb-next {
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  color:#fff; border-radius:50%;
  cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  transition:var(--transition); flex-shrink:0;
}

.lb-close {
  position:fixed; top:20px; right:24px;
  width:44px; height:44px; font-size:1rem;
  z-index:902;
}

.lb-prev, .lb-next {
  width:52px; height:52px; font-size:1.8rem;
}

.lb-prev:hover, .lb-next:hover, .lb-close:hover {
  background:rgba(111,163,255,0.30);
  border-color:var(--clr-accent);
  transform:scale(1.08);
}

/* ---------- Responsive ---------- */
@media (max-width:560px) {
  .app-wrapper   { padding:20px 14px 48px; }
  .logo-text     { font-size:1.4rem; }
  .clear-all-btn span { display:none; }
  .gallery-grid  { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; }
  .drop-zone-inner { padding:36px 20px; }
  .lb-prev, .lb-next { width:40px; height:40px; font-size:1.4rem; }
}