* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: #ffffff;

  background: #070812;

  overflow-x: hidden;
}


/* BACKGROUND */

.background {
  position: fixed;
  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(75, 90, 255, 0.35),
      transparent 32%
    ),

    radial-gradient(
      circle at 85% 80%,
      rgba(190, 55, 220, 0.25),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      #070812,
      #101326,
      #080912
    );
}


/* APP */

.app {
  width: min(1050px, 92%);

  margin: auto;

  padding:
    60px 0
    40px;
}


/* HERO */

.hero {
  text-align: center;

  margin-bottom: 38px;
}

.badge {
  display: inline-block;

  padding: 8px 16px;

  border:
    1px solid
    rgba(255,255,255,0.15);

  border-radius: 999px;

  background:
    rgba(255,255,255,0.06);

  color: #cbd2ff;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;
}

.hero h1 {
  margin:
    20px 0
    15px;

  font-size:
    clamp(42px, 8vw, 78px);

  line-height: 0.98;

  letter-spacing: -4px;
}

.hero h1 span {
  background:
    linear-gradient(
      90deg,
      #8fa2ff,
      #e37bff
    );

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;
}

.hero p {
  margin: 0;

  color: #a8acc1;

  font-size: 17px;
}


/* PANEL */

.panel {
  padding: 27px;

  border:
    1px solid
    rgba(255,255,255,0.12);

  border-radius: 28px;

  background:
    rgba(17,19,34,0.78);

  backdrop-filter: blur(25px);

  box-shadow:
    0 30px 100px
    rgba(0,0,0,0.5);
}


/* TABS */

.tabs {
  display: flex;

  gap: 8px;

  padding: 6px;

  margin-bottom: 26px;

  border-radius: 15px;

  background:
    rgba(0,0,0,0.3);
}

.tab {
  flex: 1;

  padding: 14px;

  border: 0;

  border-radius: 11px;

  background: transparent;

  color: #9095aa;

  font-weight: 800;

  cursor: pointer;

  transition:
    0.2s ease;
}

.tab:hover {
  color: white;
}

.tab.active {
  background: white;

  color: #0b0c14;

  box-shadow:
    0 5px 20px
    rgba(255,255,255,0.1);
}


/* TABS CONTENT */

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}


/* LABELS */

label {
  display: block;

  margin-bottom: 9px;

  color: #c5c8d5;

  font-size: 13px;

  font-weight: 600;
}


/* TEXTAREA */

textarea {
  width: 100%;

  min-height: 155px;

  padding: 16px;

  resize: vertical;

  border:
    1px solid
    rgba(255,255,255,0.13);

  border-radius: 14px;

  outline: none;

  background:
    rgba(5,7,15,0.75);

  color: white;

  font: inherit;

  line-height: 1.5;

  transition: 0.2s ease;
}

textarea::placeholder {
  color: #666b7e;
}

textarea:focus {
  border-color: #8494ff;

  box-shadow:
    0 0 0 3px
    rgba(100,110,255,0.1);
}


/* SELECT */

select {
  width: 100%;

  padding: 14px;

  border:
    1px solid
    rgba(255,255,255,0.13);

  border-radius: 13px;

  outline: none;

  background: #090b16;

  color: white;

  font: inherit;

  cursor: pointer;
}

select:focus {
  border-color: #8494ff;
}


/* CONTROLS */

.controls {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 15px;

  margin:
    18px 0;
}


/* BUTTONS */

.primary,
.secondary {
  border-radius: 13px;

  padding:
    15px 20px;

  font-weight: 800;

  font-size: 15px;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.primary {
  width: 100%;

  border: 0;

  color: white;

  background:
    linear-gradient(
      100deg,
      #596cff,
      #b04ee7
    );

  box-shadow:
    0 12px 30px
    rgba(112,94,255,0.25);
}

.primary:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 35px
    rgba(112,94,255,0.4);
}

.primary:disabled {
  opacity: 0.55;

  cursor: wait;

  transform: none;
}

.secondary {
  border:
    1px solid
    rgba(255,255,255,0.16);

  background:
    rgba(255,255,255,0.06);

  color: white;
}

.secondary:hover {
  background:
    rgba(255,255,255,0.11);
}


/* DROPZONE */

.dropzone {
  padding:
    52px 20px;

  text-align: center;

  border:
    1px dashed
    rgba(255,255,255,0.25);

  border-radius: 19px;

  background:
    rgba(5,7,15,0.45);

  transition:
    0.2s ease;
}

.dropzone.dragging {
  border-color: #8494ff;

  background:
    rgba(90,100,255,0.08);
}

.upload-icon {
  font-size: 38px;

  margin-bottom: 10px;
}

.dropzone h3 {
  margin:
    8px 0;
}

.dropzone p {
  margin:
    0 0 20px;

  color: #8e93a7;
}


/* PREVIEW */

.preview-wrap {
  position: relative;

  margin:
    18px 0;
}

.preview-wrap img {
  display: block;

  width: 100%;

  max-height: 450px;

  object-fit: contain;

  border-radius: 16px;

  background: #05060b;
}

.remove {
  position: absolute;

  right: 10px;
  top: 10px;

  width: 36px;
  height: 36px;

  border: 0;

  border-radius: 50%;

  background:
    rgba(0,0,0,0.75);

  color: white;

  font-size: 23px;

  cursor: pointer;
}


/* STATUS */

.status {
  min-height: 25px;

  padding-top: 18px;

  text-align: center;

  color: #9da5ff;

  font-size: 14px;
}


/* RESULT */

.result {
  margin-top: 18px;
}

.result img {
  display: block;

  width: 100%;

  border-radius: 18px;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,0.35);
}

.result-actions {
  display: flex;

  gap: 10px;

  margin-top: 12px;
}

.download-button {
  flex: 1;

  padding: 13px;

  border: 0;

  border-radius: 12px;

  background: white;

  color: #080912;

  font-weight: 800;

  cursor: pointer;
}


/* LOADING */

.loading {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  padding: 20px;

  color: #b8bdff;
}

.spinner {
  width: 20px;
  height: 20px;

  border:
    3px solid
    rgba(255,255,255,0.15);

  border-top-color: #9da5ff;

  border-radius: 50%;

  animation:
    spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* HIDDEN */

.hidden {
  display: none !important;
}


/* ERROR */

.error {
  padding: 16px;

  border:
    1px solid
    rgba(255,80,100,0.2);

  border-radius: 13px;

  background:
    rgba(255,50,70,0.08);

  color: #ffabb5;

  text-align: center;
}


/* FOOTER */

footer {
  padding-top: 28px;

  text-align: center;

  color: #666b7e;

  font-size: 12px;
}


/* MOBILE */

@media (max-width: 650px) {

  .app {
    width: 94%;

    padding-top: 30px;
  }

  .panel {
    padding: 18px;

    border-radius: 22px;
  }

  .controls {
    grid-template-columns: 1fr;
  }

  .tabs {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 45px;

    letter-spacing: -2px;
  }

}