*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0a0a0f;
  --surface: #111118;
  --card:    #16161f;
  --border:  #2a2a3a;
  --accent:  #c8f04a;
  --muted:   #6a6a80;
  --text:    #e8e8f0;
  --danger:  #ff4a6a;
  --radius:  14px;
  --head:    'Syne', sans-serif;
  --mono:    'Space Mono', monospace;
}

html,body { min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--mono); overflow-x:hidden; }

.bg-grid {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(200,240,74,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,240,74,.04) 1px,transparent 1px);
  background-size:48px 48px;
}

.container { position:relative; z-index:1; max-width:700px; margin:0 auto; padding:52px 20px 80px; }

/* Header */
header { text-align:center; margin-bottom:44px; }
.logo  { font-family:var(--head); font-weight:800; font-size:2.6rem; letter-spacing:-1px; color:var(--accent);
         text-shadow:0 0 40px rgba(200,240,74,.4); animation:glow 3s ease-in-out infinite; }
@keyframes glow { 0%,100%{text-shadow:0 0 40px rgba(200,240,74,.4)} 50%{text-shadow:0 0 70px rgba(200,240,74,.65)} }
.tagline { color:var(--muted); font-size:.75rem; margin-top:6px; letter-spacing:2px; text-transform:uppercase; }

/* Form */
#uploadForm { display:flex; flex-direction:column; gap:18px; }

/* Toggle */
.toggle-row { display:flex; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:5px; }
.toggle-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
              background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:.78rem;
              padding:10px 14px; border-radius:10px; cursor:pointer; transition:all .2s; }
.toggle-btn svg { width:15px; height:15px; flex-shrink:0; }
.toggle-btn.active  { background:var(--accent); color:#0a0a0f; font-weight:700; }
.toggle-btn:not(.active):hover { background:var(--border); color:var(--text); }

/* Drop zone */
.drop-zone { border:2px dashed var(--border); border-radius:var(--radius); background:var(--card);
             padding:48px 28px; text-align:center; cursor:pointer; position:relative; overflow:hidden;
             transition:border-color .25s, box-shadow .25s; }
.drop-zone::before { content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(200,240,74,.06),transparent 70%); opacity:0; transition:opacity .3s; }
.drop-zone:hover::before,.drop-zone.drag-over::before { opacity:1; }
.drop-zone:hover,.drop-zone.drag-over { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 0 40px rgba(200,240,74,.12); }
.drop-icon { width:52px; height:52px; margin:0 auto 14px; color:var(--accent); opacity:.7; transition:opacity .2s,transform .3s; }
.drop-zone:hover .drop-icon,.drop-zone.drag-over .drop-icon { opacity:1; transform:translateY(-4px); }
.drop-icon svg { width:100%; height:100%; }
.drop-title { font-family:var(--head); font-size:1.1rem; font-weight:600; margin-bottom:5px; }
.drop-sub   { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

/* File list */
.file-list { display:flex; flex-direction:column; gap:7px; }
.file-item { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border);
             border-radius:10px; padding:10px 14px; animation:slideIn .2s ease; }
@keyframes slideIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.file-item.more-files { justify-content:center; border-style:dashed; opacity:.55; }
.fi-icon  { font-size:1.25rem; flex-shrink:0; }
.fi-name  { flex:1; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fi-size  { font-size:.7rem; color:var(--muted); flex-shrink:0; }
.fi-remove{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:.9rem;
            padding:2px 5px; border-radius:4px; transition:color .15s,background .15s; flex-shrink:0; }
.fi-remove:hover { color:var(--danger); background:rgba(255,74,106,.1); }

/* Meta row */
.meta-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .meta-row{grid-template-columns:1fr;} }
.field-group { display:flex; flex-direction:column; gap:7px; }
.field-group label { font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); }
.field-group input,.field-group select {
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-family:var(--mono); font-size:.82rem; padding:11px 13px;
  outline:none; transition:border-color .2s,box-shadow .2s; appearance:none; -webkit-appearance:none; }
.field-group select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a6a80' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px; cursor:pointer; }
.field-group select option { background:var(--card); color:var(--text); }
.field-group input:focus,.field-group select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,240,74,.12); }
.field-group input::placeholder { color:var(--muted); }

/* ── Progress panel ───────────────────────────────────── */
.progress-panel {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px;
  display:flex; flex-direction:column; gap:10px; animation:slideIn .25s ease;
}
.progress-header { display:flex; justify-content:space-between; align-items:center; }
.prog-label { font-family:var(--head); font-size:.9rem; font-weight:600; color:var(--text); }
.prog-pct   { font-size:1.1rem; font-weight:700; color:var(--accent); font-family:var(--head); }

.progress-track {
  width:100%; height:10px; background:var(--border); border-radius:99px; overflow:hidden;
}
.progress-bar {
  height:100%; width:0%; background:var(--accent); border-radius:99px;
  transition:width .3s ease; box-shadow:0 0 12px rgba(200,240,74,.4);
}

.progress-meta {
  display:flex; justify-content:space-between; font-size:.7rem; color:var(--muted);
  gap:8px; flex-wrap:wrap;
}

/* Submit button */
.btn-upload { display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
              background:var(--accent); color:#0a0a0f; border:none; border-radius:var(--radius);
              font-family:var(--head); font-size:.95rem; font-weight:700; letter-spacing:1px;
              padding:17px 28px; cursor:pointer; text-transform:uppercase;
              transition:transform .15s,box-shadow .15s; }
.btn-upload:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 28px rgba(200,240,74,.35); }
.btn-upload:disabled { opacity:.55; cursor:not-allowed; }
.btn-icon { font-size:1.2rem; transition:transform .3s; }
.btn-upload:hover:not(:disabled) .btn-icon { transform:translateY(-3px); }

/* Response */
.response { border-radius:var(--radius); font-size:.82rem; line-height:1.6; overflow:hidden;
            max-height:0; transition:max-height .4s,padding .3s; white-space:pre-wrap; }
.response.show   { max-height:200px; padding:16px 18px; }
.response.success{ background:rgba(200,240,74,.1); border:1px solid rgba(200,240,74,.3); color:var(--accent); }
.response.error  { background:rgba(255,74,106,.1); border:1px solid rgba(255,74,106,.3); color:var(--danger); }