:root {
  --bg: #07070d;
  --panel: rgba(255, 255, 255, .045);
  --line: rgba(255, 255, 255, .09);
  --txt: #f2f3f7;
  --mut: #9aa0b4;
  --vio: #7c3aed;
  --cy: #22d3ee;
  --grn: #34d399;
  --amb: #fbbf24;
  --red: #f87171;
  --r: 18px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--txt);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
}
.blob { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(110px); opacity: .32; }
.b1 { background: radial-gradient(circle, #6d28d9, transparent 65%); top: -22vmax; left: -14vmax; animation: drift1 16s ease-in-out infinite alternate; }
.b2 { background: radial-gradient(circle, #0e7490, transparent 65%); top: -18vmax; right: -16vmax; animation: drift2 20s ease-in-out infinite alternate; }
.b3 { background: radial-gradient(circle, #9d174d, transparent 65%); bottom: -26vmax; left: 30%; animation: drift1 24s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vmax, 4vmax) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-5vmax, 5vmax) scale(.95); } }
.wrap { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 44px 18px 60px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.logo {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--vio), #4f46e5 55%, #0ea5e9);
  box-shadow: 0 8px 30px rgba(124, 58, 237, .45), inset 0 1px 0 rgba(255,255,255,.35);
  animation: float 5s ease-in-out infinite;
}
.logo svg { width: 26px; height: 26px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.brand h1 { font-size: 20px; margin: 0; letter-spacing: .4px; }
.brand h1 span { background: linear-gradient(90deg, #c4b5fd, var(--cy)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { color: var(--mut); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  animation: rise .7s .08s cubic-bezier(.2,.8,.2,1) both;
}
.card h2 { margin: 0 0 4px; font-size: 19px; }
.sub { color: var(--mut); font-size: 13.5px; margin: 0 0 16px; line-height: 1.55; }
.sub a { color: var(--cy); }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
.tabs { display: flex; gap: 8px; background: rgba(0,0,0,.3); border: 1px solid var(--line); padding: 5px; border-radius: 13px; margin-bottom: 14px; }
.tabs button { flex: 1; margin: 0; background: transparent; color: var(--mut); border-radius: 9px; transition: all .3s; }
.tabs button.on { background: linear-gradient(135deg, var(--vio), #4f46e5); color: #fff; box-shadow: 0 4px 18px rgba(124,58,237,.5); }
label { display: block; font-size: 12px; color: var(--mut); margin: 12px 0 5px; letter-spacing: .6px; text-transform: uppercase; }
input[type="text"], input[type="password"], input[type="email"], input[type="file"] {
  width: 100%; padding: 12px 14px; border-radius: 12px; color: var(--txt);
  border: 1px solid var(--line); background: rgba(0,0,0,.35);
  transition: border-color .25s, box-shadow .25s, transform .25s; font-size: 14px;
}
input:focus { outline: none; border-color: var(--vio); box-shadow: 0 0 0 3px rgba(124,58,237,.28); transform: translateY(-1px); }
input[type="file"] { cursor: pointer; }
input[type="file"]::file-selector-button {
  background: linear-gradient(135deg, #312e81, #1e1b4b); color: #ddd; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px; margin-right: 12px; cursor: pointer; transition: all .25s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--vio); color: #fff; }
button, .btn {
  width: 100%; margin: 14px 0 4px; padding: 13px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--vio), #4f46e5); color: #fff;
  font-weight: 700; font-size: 14.5px; letter-spacing: .4px; cursor: pointer;
  position: relative; overflow: hidden; transition: transform .2s, box-shadow .25s, filter .25s;
  box-shadow: 0 10px 26px rgba(124,58,237,.35);
}
button:hover, .btn:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 14px 32px rgba(124,58,237,.5); }
button:active { transform: translateY(0) scale(.985); }
button::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); animation: shine 3.4s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { left: -70%; } 100% { left: 140%; } }
button.send { background: linear-gradient(135deg, #059669, #0d9488); box-shadow: 0 10px 26px rgba(5,150,105,.35); font-size: 15.5px; padding: 14px; }
button.send:hover { box-shadow: 0 14px 34px rgba(5,150,105,.55); }
button.ghost { background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--mut); }
button:disabled { opacity: .6; cursor: wait; transform: none; }
.hidden { display: none !important; }
.msg { min-height: 22px; font-size: 13.5px; color: var(--amb); margin: 10px 0 0; animation: fadein .3s both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* toast */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,32,.92); border: 1px solid var(--line); color: var(--txt);
  padding: 13px 20px; border-radius: 13px; font-size: 14px; opacity: 0; z-index: 50;
  transition: all .4s cubic-bezier(.2,.8,.2,1); backdrop-filter: blur(12px);
  box-shadow: 0 16px 44px rgba(0,0,0,.55); max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { border-color: rgba(52,211,153,.5); }
#toast.err { border-color: rgba(248,113,113,.55); }
/* spinner */
.spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: -2px; margin-right: 8px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
/* preview */
#preview { margin-top: 12px; }
#preview img, #preview video {
  width: 100%; border-radius: 14px; border: 1px solid var(--line);
  animation: zoom .5s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
@keyframes zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* jobs */
.job {
  background: rgba(0,0,0,.32); border: 1px solid var(--line); border-radius: 13px;
  padding: 13px 14px; margin: 10px 0; font-size: 13.5px; line-height: 1.6;
  animation: rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.job b { display: block; font-size: 14px; margin-bottom: 2px; word-break: break-all; }
.job .meta { color: var(--mut); font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  padding: 4px 12px; border-radius: 999px; margin: 6px 0 2px; border: 1px solid; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.uploaded { color: #a5b4fc; border-color: rgba(165,180,252,.4); background: rgba(99,102,241,.12); }
.pill.pending, .pill.processing { color: var(--amb); border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.1); }
.pill.pending .dot, .pill.processing .dot { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.pill.await { color: var(--cy); border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.1); }
.pill.await .dot { animation: pulse 1.4s ease-in-out infinite; }
.pill.done { color: var(--grn); border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.1); }
.pill.failed { color: var(--red); border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.1); }
.job a { color: var(--cy); }
.job .note { color: var(--mut); font-style: italic; }
.linkrow { display: flex; gap: 8px; margin-top: 18px; }
.linkrow a { flex: 1; text-align: center; text-decoration: none; font-size: 13px; padding: 10px; border-radius: 11px;
  border: 1px solid var(--line); color: var(--mut); transition: all .25s; }
.linkrow a:hover { color: #fff; border-color: var(--vio); transform: translateY(-1px); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin: 20px 0; }
h2.sec { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--mut); margin: 20px 0 4px; }
.progress { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 12px; }
.progress i { display: block; height: 100%; width: 40%; border-radius: 99px;
  background: linear-gradient(90deg, var(--vio), var(--cy)); animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (max-width: 560px) { .wrap { padding-top: 28px; } .card { padding: 20px 16px; } }