body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background: #08182c;
  color: #fff;
  overflow-y: auto;
}

.particles-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(45deg, #08182c, #0f2a4d);
  z-index: 0;
  overflow: hidden;
}

.container {
  position: relative;
  z-index: 1;
  background: rgba(10, 25, 45, 0.95);
  border-radius: 35px;
  padding: 50px 45px;
  width: 90%;
  max-width: 680px;
  text-align: center;
  box-shadow: 0 0 80px #0f3c6e, 0 0 140px #1f3c6e, 0 0 200px rgba(58,112,184,0.4);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.container::before {
  content: "";
  position: absolute;
  top: -15px; left: -15px; right: -15px; bottom: -15px;
  border-radius: 40px;
  background: linear-gradient(120deg, #3a70b8, #1f3c6e, #0f2a4d);
  filter: blur(50px);
  z-index: 0;
  opacity: 0.5;
}

h2 {
  font-size: 2.8em;
  color: #a8c6ff;
  text-shadow: 0 0 20px #3a70b8, 0 0 40px #1f3c6e, 0 0 60px #0f2a4d;
  margin-bottom: 12px;
}

h2.gradient-text {
  background: linear-gradient(90deg, #7C5CFF, #A78BFA, #00F5D4, #3AF3FF, #FF70F0);
  background-size: 500% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientMove 8s linear infinite;
  text-shadow:
    0 0 10px #7C5CFF,
    0 0 15px #A78BFA,
    0 0 20px #00F5D4,
    0 0 25px #3AF3FF,
    0 0 30px #FF70F0;
}

#status {
  font-size: 1.15em;
  color: #cce0ff;
  text-align: center;
  margin-top: 6px;
}

#fileType {
  font-size: 1.15em;
  color: #8fbfff;
  margin-top: 5px;
  text-align: center;
}

.logo {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 60px;
  height: 60px;
  background: url('https://raw.githubusercontent.com/WillZek/Storage-CB/main/images/bc61e0229477.jpg') center/cover no-repeat;
  border-radius: 15px;
  box-shadow: 0 0 25px #3a70b8, 0 0 40px #1f3c6e;
}

@media (max-width: 600px) {
  .container {
    padding: 35px 25px;
  }
  h2 {
    font-size: 2em;
  }
  .logo {
    width: 45px;
    height: 45px;
  }
}

.preview-wrapper {
  max-height: 340px;
  overflow-y: auto;
  background: #112b4a;
  padding: 16px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: #3a70b8 transparent;
}

.preview-wrapper::-webkit-scrollbar {
  width: 6px;
}
.preview-wrapper::-webkit-scrollbar-thumb {
  background-color: #3a70b8;
  border-radius: 3px;
}

.preview-img,
.preview-video {
  max-width: 100%;
  border-radius: 18px;
  margin: 6px 0;
  box-shadow: 0 0 35px #3a70b8, 0 0 55px #1f3c6e;
  transition: 0.35s;
}

.preview-img:hover,
.preview-video:hover {
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 0 60px #3a70b8, 0 0 80px #1f3c6e, 0 0 100px rgba(58,112,184,0.4);
  animation: floatShadow 3s ease-in-out infinite alternate;
}

.preview-file {
  padding: 16px;
  background: #0f3c6e;
  border-radius: 14px;
  text-align: center;
  color: #a8c6ff;
  font-weight: bold;
  box-shadow: 0 0 35px #3a70b8, 0 0 55px #1f3c6e;
  transition: 0.3s;
}

.preview-file:hover {
  transform: scale(1.03);
  box-shadow: 0 0 50px #3a70b8, 0 0 70px #1f3c6e, 0 0 90px rgba(58,112,184,0.5);
}

.glow {
  box-shadow: 0 0 22px #3a70b8, 0 0 42px #1f3c6e, 0 0 60px rgba(58,112,184,0.3);
  transition: 0.3s;
}

.progress-wrapper {
  position: relative;
  width: 100%;
  height: 16px;
  background: #0a1b2b;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 16px;
  box-shadow: 0 0 20px #3a70b8 inset;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3a70b8, #1f3c6e);
  border-radius: 8px;
  transition: width 0.35s ease;
}

.progress-text {
  position: absolute;
  top: -28px;
  right: 0;
  font-size: 1em;
  color: #a8c6ff;
}

.link-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

button#uploadBtn {
  padding: 16px 36px;
  font-size: 1.25em;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(90deg, #7C5CFF, #A78BFA, #00F5D4, #3AF3FF, #FF70F0);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  text-shadow:
    0 0 10px #7C5CFF,
    0 0 15px #A78BFA,
    0 0 20px #00F5D4,
    0 0 25px #3AF3FF,
    0 0 30px #FF70F0;
  transition: 0.35s;
  box-shadow: 0 0 40px #7C5CFF, 0 0 60px #A78BFA, 0 0 80px #00F5D4, 0 0 100px #3AF3FF, 0 0 120px #FF70F0;
}

button#uploadBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 50px #7C5CFF, 0 0 70px #A78BFA, 0 0 90px #00F5D4, 0 0 110px #3AF3FF, 0 0 130px #FF70F0;
}

button#uploadBtn:active {
  transform: scale(0.96);
  box-shadow: 0 0 30px #7C5CFF, 0 0 50px #A78BFA, 0 0 70px #00F5D4, 0 0 90px #3AF3FF, 0 0 110px #FF70F0;
}

.link-wrapper input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  text-align: center;
  background: #112b4a;
  color: #cce0ff;
  box-shadow: 0 0 28px #3a70b8 inset, 0 0 50px #1f3c6e inset;
}

.copied {
  animation: copiedAnim 0.8s forwards;
}

@keyframes copiedAnim {
  0% { box-shadow: 0 0 10px #00ff99; }
  50% { box-shadow: 0 0 25px #00ff99; }
  100% { box-shadow: 0 0 0 #00ff99; }
}

@keyframes floatShadow {
  0% { transform: scale(1.1) translateY(0); }
  100% { transform: scale(1.12) translateY(-10px); }
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 600px) {
  .preview-wrapper { max-height: 260px; }
  .progress-wrapper { height: 12px; }
  .progress-text { top: -22px; font-size: 0.9em; }
  button { padding: 14px 28px; font-size: 1.05em; }
}

.particles-bg::before,
.particles-bg::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(58,112,184,0.2) 0%, transparent 70%);
  animation: moveParticles 20s linear infinite;
  top: -50%;
  left: -50%;
}

.particles-bg::after {
  background: radial-gradient(circle, rgba(26,46,82,0.15) 0%, transparent 70%);
  animation-duration: 25s;
}

@keyframes moveParticles {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(35px, 40px) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

.upload-box {
  position: relative;
  border: 2px dashed #3a70b8;
  border-radius: 20px;
  padding: 40px 20px;
  background: linear-gradient(145deg, rgba(10,25,45,0.9), rgba(15,44,77,0.7));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.4s ease;
  box-shadow: 0 0 25px #3a70b8, 0 0 50px #1f3c6e, inset 0 0 15px #3a70b8;
}

.upload-box:hover {
  transform: scale(1.02);
  box-shadow: 0 0 40px #3a70b8, 0 0 70px #1f3c6e, inset 0 0 25px #3a70b8;
}

.upload-box.dragover {
  background: linear-gradient(145deg, rgba(15,44,77,0.85), rgba(58,112,184,0.3));
  border-color: #00ff99;
  box-shadow: 0 0 50px #00ff99, 0 0 80px #00ff99, inset 0 0 30px #00ff99;
}

.upload-box input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-text p {
  font-size: 1.2em;
  font-weight: 700;
  background: linear-gradient(90deg, #7C5CFF, #A78BFA, #00F5D4, #3AF3FF, #FF70F0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 10px #7C5CFF,
    0 0 15px #A78BFA,
    0 0 20px #00F5D4,
    0 0 25px #3AF3FF,
    0 0 30px #FF70F0;
}

.upload-icon img.upload-favicon {
  height: 1.2em;
  width: auto;
  display: inline-block;
}

.gradient-shine {
  background: linear-gradient(90deg, #6b21a8, #4c51bf, #00ff99, #3a70b8, #1f3c6e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 10px rgba(58,112,184,0.5);
}

.gradient-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 150%;
  height: 100%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.35) 20%,
    rgba(255,255,255,0.15) 40%);
  transform: skewX(-20deg);
  animation: shine 3s linear infinite;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 100%; }
}

.gradient-text {
  font-size: 2em;
  font-weight: bold;
  background: linear-gradient(90deg, #7C5CFF, #A78BFA, #00F5D4, #3AF3FF, #FF70F0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

@keyframes floatIcon {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

@media (max-width: 600px) {
  .upload-box {
    padding: 30px 15px;
  }
  .upload-text p {
    font-size: 1em;
  }
  .upload-icon {
    font-size: 1.6em;
  }
}