/* Blur Queue design system — layered on top of Tailwind CDN utilities */

:root {
  --bg: #0a0a10;
  --surface: rgba(28, 28, 40, 0.65);
  --surface-solid: #16161f;
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(168, 85, 247, 0.45);
  --brand-a: #a855f7;
  --brand-b: #ec4899;
  --text: #e7e7ef;
  --text-dim: #8b8b9e;
}

html { color-scheme: dark; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(168, 85, 247, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(236, 72, 153, 0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ── Components ── */

.glass {
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
}

.card-hover { transition: border-color .2s, transform .2s, box-shadow .2s; }
.card-hover:hover {
  border-color: var(--border-hover);
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.08);
}

.btn-brand {
  background: linear-gradient(100deg, #9333ea, #db2777);
  transition: filter .15s, transform .1s, box-shadow .2s;
}
.btn-brand:hover { filter: brightness(1.15); box-shadow: 0 4px 20px rgba(168, 85, 247, .35); }
.btn-brand:active { transform: scale(.98); }
.btn-brand:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }

.brand-text {
  background: linear-gradient(100deg, #e879f9, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.input-dark {
  background: rgba(20, 20, 30, .6);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .5rem;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.input-dark:focus { outline: none; border-color: var(--brand-a); box-shadow: 0 0 0 3px rgba(168, 85, 247, .15); }

/* ── Status colors ── */

.status-pending   { color: #fbbf24; }
.status-queued, .status-downloading { color: #60a5fa; }
.status-processing { color: #c084fc; }
.status-uploading { color: #34d399; }
.status-complete  { color: #22c55e; }
.status-failed    { color: #ef4444; }
.status-cancelled { color: #6b7280; }
.status-archived  { color: #6b7280; }

.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; padding: .15rem .6rem; border-radius: 999px; white-space: nowrap; }
.badge-pending    { background: rgba(251,191,36,.12); color:#fbbf24; }
.badge-queued, .badge-downloading { background: rgba(96,165,250,.12); color:#60a5fa; }
.badge-processing { background: rgba(192,132,252,.14); color:#c084fc; }
.badge-uploading  { background: rgba(52,211,153,.12); color:#34d399; }
.badge-complete   { background: rgba(34,197,94,.12); color:#22c55e; }
.badge-failed     { background: rgba(239,68,68,.12); color:#ef4444; }
.badge-cancelled, .badge-archived { background: rgba(107,114,128,.15); color:#9ca3af; }

/* status change flash */
@keyframes statusFlash { 0% { background: rgba(168,85,247,.18); } 100% { background: transparent; } }
.status-changed { animation: statusFlash 1.6s ease-out; }

/* ── Animations ── */

@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }
.pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }

@keyframes fadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
.fade-up { animation: fadeUp .35s ease-out both; }

@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  border-radius: .5rem;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}

/* ── Progress bars ── */

.progress-track { background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; height: 8px; }
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b));
  transition: width .6s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  background-size: 200px 100%;
  animation: shimmer 1.5s linear infinite;
}

/* ── Toasts ── */

#toastWrap { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; }
.toast {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-a);
  border-radius: .65rem;
  padding: .8rem 1rem;
  box-shadow: 0 10px 35px rgba(0,0,0,.5);
  animation: fadeUp .25s ease-out;
  font-size: .85rem;
  color: var(--text);
}
.toast.success { border-left-color: #22c55e; }
.toast.error   { border-left-color: #ef4444; }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: all .3s; }

/* ── Notification bell ── */

#bellDrop {
  position: absolute; right: 0; top: 2.4rem; width: 21rem; max-height: 24rem; overflow-y: auto;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: .75rem;
  box-shadow: 0 16px 50px rgba(0,0,0,.55); z-index: 90;
}
.bell-badge {
  position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  background: linear-gradient(100deg, #9333ea, #db2777); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
}

/* ── Worker status dot ── */

.worker-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.worker-dot.online { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.7); }
.worker-dot.offline { background: #4b5563; }

/* ── Tables → mobile cards ── */

@media (max-width: 768px) {
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr { border-bottom: 1px solid var(--border); padding: .6rem .25rem; }
  table.responsive td { padding: .2rem .75rem !important; border: none !important; }
  table.responsive td[data-label]::before {
    content: attr(data-label);
    display: inline-block; width: 6.5rem;
    color: var(--text-dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  }
  table.responsive td.no-label-mobile::before { content: none; }
}

/* ── Scrollbars ── */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,.4); }

/* ── Dropzone ── */

.dropzone { border: 2px dashed rgba(168,85,247,.3); transition: all .2s; }
.dropzone.dragover { border-color: rgba(168,85,247,.85); background: rgba(168,85,247,.07); transform: scale(1.005); }

/* ── Thumbnails ── */

.thumb {
  width: 72px; height: 42px; object-fit: cover; border-radius: .4rem;
  background: #1f1f2b; border: 1px solid var(--border);
}
.thumb-placeholder {
  width: 72px; height: 42px; border-radius: .4rem; background: #1f1f2b;
  display: flex; align-items: center; justify-content: center;
  color: #3f3f50; font-size: 1.1rem; border: 1px solid var(--border);
}

/* before/after slider */
.ba-wrap { position: relative; overflow: hidden; border-radius: .75rem; user-select: none; }
.ba-wrap img { display: block; width: 100%; }
.ba-after { position: absolute; inset: 0; overflow: hidden; }
.ba-divider {
  position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; cursor: ew-resize;
  box-shadow: 0 0 12px rgba(0,0,0,.8);
}
.ba-divider::after {
  content: '⇔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #fff; color: #111; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700;
}
.ba-label {
  position: absolute; top: .5rem; font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  background: rgba(0,0,0,.65); color: #fff; padding: .2rem .5rem; border-radius: .3rem;
}