:root{
  --bg:#0f172a;         /* slate-900 */
  --card:#111827;       /* gray-900 */
  --muted:#94a3b8;      /* slate-400 */
  --text:#e5e7eb;       /* gray-200 */
  --accent:#22d3ee;     /* cyan-400 */
  --accent-2:#34d399;   /* emerald-400 */
  --error:#f87171;      /* red-400 */
  --warn:#fbbf24;       /* amber-400 */
  --success:#4ade80;    /* green-400 */
  --border:#1f2937;     /* gray-800 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:linear-gradient(180deg,#0b1223 0%, #0f172a 100%);
  color:var(--text);
}

.container{
  max-width:900px;
  margin:0 auto;
  padding:24px;
}
header h1{margin:0 0 8px 0; font-size:24px; color:var(--accent)}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.dropzone{
  border:2px dashed var(--border);
  border-radius:12px;
  padding:28px;
  text-align:center;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .2s, background .2s;
  margin-top:12px;
}
.dropzone.dragover{
  border-color:var(--accent);
  background:rgba(34,211,238,.06);
}
.dropzone input[type="file"]{
  display:none;
}

.file-list{
  margin-top:16px;
  background:#0b1324;
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 16px;
}
.hidden{display:none}

.ul{
  margin:8px 0 0 16px;
}
.ul li{
  margin:6px 0;
}

.actions{
  margin-top:16px;
  display:flex;
  gap:12px;
}
.btn{
  background:var(--accent);
  color:#0b1223;
  border:0;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
}
.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.btn.secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}

.alert{
  padding:12px 16px;
  border-radius:8px;
  margin:12px 0;
  border:1px solid var(--border);
}
.alert.success{border-color: rgba(74,222,128,.5); color:var(--success)}
.alert.warn{border-color: rgba(251,191,36,.5); color:var(--warn)}
.alert.error{border-color: rgba(248,113,113,.5); color:var(--error)}

.link{color:var(--accent-2); text-decoration:underline}

.footer{
  color:var(--muted);
  font-size:14px;
  text-align:center;
}