:root {
  color-scheme: light dark;

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

  background: var(--tg-theme-bg-color, #111827);
  color: var(--tg-theme-text-color, #f9fafb);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  background:
    var(--tg-theme-bg-color, #111827);

  color:
    var(--tg-theme-text-color, #f9fafb);
}

main {
  width: min(100%, 520px);

  margin: 0 auto;

  padding:
    24px
    16px
    40px;
}

h1 {
  font-size: 26px;

  margin:
    8px
    0
    20px;
}

h2 {
  margin: 0;

  font-size: 17px;
}

p {
  line-height: 1.6;
}

.card {
  background:
    var(
      --tg-theme-secondary-bg-color,
      #1f2937
    );

  border-radius: 16px;

  padding: 16px;

  margin-bottom: 14px;
}

.row,
.uploadTop {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;
}

button {
  width: 100%;

  border: 0;

  border-radius: 12px;

  padding:
    13px
    16px;

  margin-top: 14px;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

  background:
    var(
      --tg-theme-button-color,
      #3390ec
    );

  color:
    var(
      --tg-theme-button-text-color,
      white
    );
}

button:disabled {
  opacity: 0.45;

  cursor: default;
}

button.secondary {
  background: transparent;

  border:
    1px solid
    color-mix(
      in srgb,
      currentColor 25%,
      transparent
    );

  color: inherit;
}

button.small {
  width: auto;

  margin: 0;

  padding:
    8px
    12px;

  font-size: 13px;
}

button.compact {
  width: auto;

  margin: 0;

  white-space: nowrap;
}

input[type="url"] {
  width: 100%;

  border:
    1px solid
    color-mix(
      in srgb,
      currentColor 20%,
      transparent
    );

  border-radius: 12px;

  padding:
    13px
    14px;

  background: transparent;

  color: inherit;

  font: inherit;

  outline: none;
}

.urlRow {
  display: flex;

  gap: 8px;

  margin-top: 12px;
}

.divider {
  height: 1px;

  background:
    color-mix(
      in srgb,
      currentColor 12%,
      transparent
    );

  margin:
    20px
    0;
}

.upload {
  display: flex;

  flex-direction: column;

  gap: 6px;

  padding:
    14px
    0;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      currentColor 12%,
      transparent
    );
}

.upload:last-child {
  border-bottom: 0;

  padding-bottom: 0;
}

.upload span,
.muted,
.hint {
  color:
    var(
      --tg-theme-hint-color,
      #9ca3af
    );
}

.state {
  text-transform: capitalize;

  font-size: 12px;
}

.state.done {
  color: #42d392;
}

.state.failed,
.state.cancelled {
  color: #ff6b6b;
}

.cancelButton {
  width: auto;

  align-self: flex-start;

  margin-top: 4px;

  padding:
    8px
    12px;

  background: transparent;

  border:
    1px solid
    color-mix(
      in srgb,
      #ff6b6b 65%,
      transparent
    );

  color: #ff8a8a;

  font-size: 13px;
}

.smallText {
  font-size: 12px;

  margin-top: 8px;

  min-height: 16px;
}

.hint {
  font-size: 13px;

  line-height: 1.5;

  text-align: center;
}

a {
  color:
    var(
      --tg-theme-link-color,
      #60a5fa
    );

  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.legalLinks {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 16px;

  font-size: 14px;
}

.footer {
  margin-top: 28px;

  padding-top: 20px;

  border-top:
    1px solid
    color-mix(
      in srgb,
      currentColor 12%,
      transparent
    );

  text-align: center;

  font-size: 13px;

  color:
    var(
      --tg-theme-hint-color,
      #9ca3af
    );
}

.footer strong {
  color:
    var(
      --tg-theme-text-color,
      #f9fafb
    );
}

.footerLinks {
  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 8px;
}

@media (max-width: 420px) {

  .urlRow {
    flex-direction: column;
  }

  button.compact {
    width: 100%;
  }

}