body {
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(211,47,47,0.08), transparent 60%),
    radial-gradient(90% 80% at 80% 0%, rgba(183,28,28,0.07), transparent 65%),
    linear-gradient(180deg, #14171d 0%, #0f1217 50%, #0b0f14 100%);
  color: var(--text-primary);
}
main.container { max-width: 1200px; padding: 0 20px 60px; }
.hero {
  background:
    radial-gradient(120% 80% at 10% 10%, rgba(211,47,47,0.08), transparent 50%),
    radial-gradient(120% 80% at 90% 0%, rgba(183,28,28,0.08), transparent 55%),
    var(--bg-section);
  color: var(--text-primary);
  padding:24px 20px;
  border-radius:18px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
  margin-top:20px;
  text-align:center;
}
.hero h1 { margin:0 0 8px; font-size:1.9rem; color: var(--text-heading); }
.hero p { margin:0 auto; color: var(--text-muted); max-width:880px; }
.card {
  margin-top:20px;
  background: var(--bg-card);
  border-radius:16px;
  padding:20px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: -30% 0;
  background: linear-gradient(120deg, rgba(211,47,47,0) 0%, rgba(211,47,47,0.35) 45%, rgba(211,47,47,0) 80%);
  transform: translateX(-60%);
  animation: cardSweep 6s linear infinite;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  box-shadow:0 8px 22px rgba(211,47,47,0.25);
}
.btn.secondary { background: var(--bg-elevated); border:1px solid var(--border); color: var(--text-primary); box-shadow:none; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.drop-zone {
  border:2px dashed rgba(211,47,47,0.35);
  border-radius:12px;
  padding:16px;
  text-align:center;
  background: var(--bg-section);
  color: var(--text-muted);
  margin-bottom:12px;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.drop-zone.dragover { border-color: var(--accent); background: var(--bg-elevated); color: var(--text-primary); }
.status { margin-top:10px; font-size:0.95rem; color: var(--text-muted); }
.file-list { margin-top:8px; font-size:0.95rem; color: var(--text-muted); }
.file-item { padding:6px 8px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; background: var(--bg-section); display:flex; align-items:center; gap:8px; }
.progress-wrap { flex:1; background: var(--bg-elevated); border-radius:6px; height:8px; border:1px solid var(--border); }
.progress-bar { height:8px; width:0; background: linear-gradient(135deg,var(--accent),var(--accent-hover)); border-radius:6px; }
.download-link { font-weight:600; color: var(--text-primary); text-decoration:underline; }
.download-link:hover { color: var(--accent); }
.content-section { background: var(--bg-card); margin-top:22px; padding:24px; border-radius:14px; box-shadow: var(--shadow-soft); border:1px solid var(--border); }
.content-section h2 { margin-top:0; margin-bottom:12px; color: var(--text-heading); }
.content-section p, .content-section li { color: var(--text-muted); line-height:1.7; }
.content-section ul { padding-left:18px; margin:0 0 12px; }
.server-banner {
  text-align:center;
  margin-bottom:12px;
  display:flex;
  justify-content:center;
  gap:12px;
  align-items:center;
  padding:8px 12px;
  background: var(--bg-elevated);
  border-radius:10px;
  border:1px solid var(--border);
  flex-wrap:wrap;
}
.server-banner span { color: var(--text-primary); font-weight:700; }
.server-banner small { font-size:0.9rem; color: var(--text-muted); }
.tip-text { font-size:0.95rem; color: var(--text-muted); margin:8px 0; }
.limit-note { margin-top:8px; font-size:0.9rem; color: var(--text-muted); }

@keyframes cardSweep {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) {
  .card::before { animation: none; }
}