.mobile-app-shell.mobile-app-runtime {
  background:
    radial-gradient(circle at 50% -8%, rgb(220 233 255 / .92), transparent 38%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 56%, #f7faff 100%);
}

.mobile-app-shell.mobile-app-runtime .mobile-device-frame.app-native-tool-device {
  width: 430px;
  min-height: 100dvh;
  height: auto;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.mobile-app-shell.mobile-app-runtime .mobile-phone-frame.app-native-tool-frame {
  width: 100%;
  min-height: 100dvh;
  height: auto;
  padding: 16px 14px 108px;
  overflow: visible;
  border-radius: 0;
  background:
    radial-gradient(circle at 10% 2%, rgb(215 232 255 / .82), transparent 21%),
    radial-gradient(circle at 95% 3%, rgb(238 243 255 / .72), transparent 24%),
    linear-gradient(180deg, #fff, #fbfdff);
}

.mobile-app-shell.mobile-app-runtime .mobile-phone-frame.app-native-tool-frame::before {
  display: none;
}

.mobile-tool-phone-frame .mobile-tool-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(100vw, 430px);
  height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 14px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .96), rgb(255 255 255 / .88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mobile-tool-phone-frame .mobile-tool-header strong {
  text-align: center;
  color: #081532;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.mobile-tool-phone-frame .mobile-tool-header button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #0b1836;
  background: transparent;
  box-shadow: none;
}

.mobile-tool-phone-frame .mobile-tool-header button:last-child {
  pointer-events: none;
}

.mobile-tool-phone-frame .mobile-tool-header button:first-child svg {
  transform: rotate(180deg);
}

.mobile-tool-phone-frame .mobile-tool-header svg {
  width: 24px;
  height: 24px;
}

.mobile-app-tool-content {
  position: relative;
  z-index: 1;
  margin-top: 70px;
  padding: 0 0 88px;
  overflow: visible;
}

.mobile-app-tool-content .app-shell,
.mobile-app-tool-content .topbar,
.mobile-app-tool-content .home-footer,
.mobile-app-tool-content .tool-titlebar,
.mobile-app-tool-content .compress-stats,
.mobile-app-tool-content .compressor-controls,
.mobile-app-tool-content .image-preview-grid {
  display: none !important;
}

.app-native-tool,
.app-native-tool * {
  box-sizing: border-box;
}

.app-native-tool {
  width: 100%;
  max-width: 100%;
  padding: 0 0 118px;
  color: #091634;
}

.app-native-hero {
  position: relative;
  min-height: 176px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  margin: 0 0 14px;
  padding: 24px 18px 22px;
  border: 1px solid rgb(197 216 250 / .78);
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 14%, rgb(58 118 255 / .18), transparent 34%),
    linear-gradient(135deg, #edf6ff 0%, #f8fbff 48%, #dfeaff 100%);
  box-shadow: 0 16px 38px rgb(49 89 160 / .1), inset 0 1px rgb(255 255 255 / .9);
}

.app-native-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 210px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(66 124 255 / .26), transparent 68%);
  filter: blur(4px);
}

.app-native-hero small {
  display: inline-flex;
  margin-bottom: 8px;
  color: #276ff4;
  font-size: 12px;
  font-weight: 700;
}

.app-native-hero h1 {
  margin: 0;
  color: #081532;
  font-size: 34px;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: 0;
}

.app-native-hero p {
  max-width: 206px;
  margin: 11px 0 0;
  color: #53688d;
  font-size: 14px;
  line-height: 1.55;
}

.app-native-hero-art {
  position: relative;
  z-index: 1;
  height: 132px;
}

.app-native-hero-art img {
  position: absolute;
  right: -30px;
  top: 2px;
  width: 190px;
  height: 126px;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgb(39 92 190 / .12));
}

.css-compress-3d {
  position: absolute;
  inset: -2px -10px -4px -8px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 26px rgb(39 92 190 / .16));
}

.css-compress-3d span,
.css-compress-3d i,
.css-compress-3d b,
.css-compress-3d em {
  position: absolute;
  display: block;
}

.css-photo {
  left: 33px;
  top: 31px;
  width: 92px;
  height: 80px;
  border: 2px solid rgb(255 255 255 / .82);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .82), rgb(104 179 255 / .2) 42%, rgb(62 132 255 / .18)),
    linear-gradient(135deg, #dff2ff, #96ccff);
  box-shadow:
    inset 0 2px 8px rgb(255 255 255 / .76),
    inset -8px -10px 18px rgb(26 103 232 / .18),
    0 18px 30px rgb(31 99 205 / .18);
  transform: perspective(180px) rotateX(6deg) rotateY(-12deg) rotateZ(-3deg);
}

.css-photo::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 76% 25%, #2e7cff 0 6px, transparent 7px),
    linear-gradient(135deg, transparent 47%, rgb(255 255 255 / .35) 48% 51%, transparent 52%),
    linear-gradient(135deg, transparent 42%, #11bcb5 43% 70%, transparent 71%),
    linear-gradient(135deg, transparent 35%, #177cff 36% 72%, transparent 73%);
}

.css-photo::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -13px;
  height: 24px;
  border: 2px solid rgb(66 128 255 / .28);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  transform: rotate(3deg);
}

.css-photo i {
  left: -5px;
  top: 10px;
  width: 8px;
  height: 58px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, rgb(255 255 255 / .82), rgb(79 140 255 / .25));
}

.css-photo b {
  right: -4px;
  top: 9px;
  width: 8px;
  height: 58px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .76), rgb(79 140 255 / .25));
}

.css-photo em {
  left: 14px;
  top: 9px;
  width: 45px;
  height: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / .82);
  transform: rotate(-8deg);
}

.css-file {
  width: 54px;
  height: 50px;
  border: 1.5px solid rgb(255 255 255 / .72);
  border-radius: 14px;
  background: linear-gradient(145deg, rgb(255 255 255 / .78), rgb(115 172 255 / .24));
  box-shadow: inset 0 1px 6px rgb(255 255 255 / .72), 0 14px 24px rgb(46 102 210 / .12);
}

.css-file::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 0 12px 0 10px;
  background: linear-gradient(135deg, rgb(255 255 255 / .85), rgb(102 158 255 / .24));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .58);
}

.css-file i {
  left: 10px;
  bottom: 11px;
  width: 30px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, transparent 40%, #2a83ff 41% 72%, transparent 73%),
    linear-gradient(135deg, transparent 55%, #3fcbd0 56% 82%, transparent 83%);
}

.css-file b {
  left: 12px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffcc48;
}

.css-file-back {
  left: 29px;
  top: 10px;
  opacity: .68;
  transform: translateZ(-16px) rotate(-8deg) scale(.82);
}

.css-pad {
  top: 40px;
  width: 19px;
  height: 62px;
  border: 1.5px solid rgb(255 255 255 / .58);
  background: linear-gradient(180deg, rgb(255 255 255 / .7), rgb(121 171 255 / .24));
  box-shadow: inset 0 1px 8px rgb(255 255 255 / .62), 0 12px 22px rgb(48 94 190 / .12);
}

.css-pad-left {
  left: 17px;
  border-radius: 16px 5px 5px 16px;
  transform: rotate(-5deg);
}

.css-pad-right {
  right: 19px;
  border-radius: 5px 16px 16px 5px;
  transform: rotate(5deg);
}

.css-arrow {
  top: 62px;
  width: 31px;
  height: 24px;
  background: linear-gradient(90deg, #1b77ff, #7b66ff);
  filter: drop-shadow(0 8px 12px rgb(58 100 220 / .22));
  clip-path: polygon(0 27%, 56% 27%, 56% 0, 100% 50%, 56% 100%, 56% 73%, 0 73%);
}

.css-arrow-left {
  left: -1px;
}

.css-arrow-right {
  right: 1px;
  transform: scaleX(-1);
}

.css-orbit {
  left: 10px;
  right: 2px;
  bottom: 11px;
  height: 42px;
  border: 2px solid rgb(84 136 255 / .24);
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(-10deg);
}

.css-dot {
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #75bdff 45%, #6b62ff);
  box-shadow: 0 8px 16px rgb(55 105 220 / .18);
}

.css-dot-a {
  right: 5px;
  top: 22px;
  width: 13px;
  height: 13px;
}

.css-dot-b {
  left: 15px;
  bottom: 23px;
  width: 9px;
  height: 9px;
}

.app-native-upload {
  margin-top: 14px;
  border: 1px solid #e4ebf7;
  border-radius: 14px;
  padding: 12px;
  background: rgb(255 255 255 / .92);
  box-shadow: 0 12px 32px rgb(34 76 145 / .07);
}

.app-native-upload button {
  width: 100%;
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1.5px dashed rgb(55 123 255 / .72);
  border-radius: 12px;
  color: #0b1836;
  background:
    radial-gradient(circle at 50% 20%, rgb(55 123 255 / .08), transparent 38%),
    linear-gradient(180deg, #fbfdff, #f8fbff);
}

.upload-cloud {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #4391ff, #225ee8);
  box-shadow: 0 14px 28px rgb(35 103 240 / .25);
}

.upload-cloud svg {
  width: 35px;
  height: 35px;
}

.app-native-upload strong {
  font-size: 18px;
  font-weight: 760;
}

.app-native-upload small {
  color: #7788a5;
  font-size: 13px;
}

.app-native-panel {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid #e6edf8;
  border-radius: 14px;
  background: rgb(255 255 255 / .94);
  box-shadow: 0 12px 34px rgb(35 72 130 / .07);
}

.settings-title,
.preview-head,
.app-native-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-title h2,
.preview-head h2 {
  margin: 0;
  color: #0a1733;
  font-size: 18px;
  font-weight: 760;
}

.settings-title span,
.preview-head span {
  display: inline-flex;
  min-width: 54px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4ebf7;
  border-radius: 10px;
  color: #111d36;
  background: #fbfdff;
  font-size: 15px;
  font-weight: 700;
}

.app-native-range {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.app-native-range span,
.app-native-setting-row label > span {
  color: #52688d;
  font-size: 13px;
  font-weight: 650;
}

.app-native-range input {
  width: 100%;
  accent-color: #2d72f5;
}

.app-native-segments {
  display: grid;
  grid-template-columns: 1.35fr .75fr .75fr .8fr;
  gap: 7px;
  margin-top: 16px;
}

.app-native-segments button {
  height: 42px;
  border: 1px solid #e3ebf7;
  border-radius: 10px;
  color: #516583;
  background: #f8fbff;
  font-size: 13px;
  font-weight: 650;
}

.app-native-segments button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #347dff, #225fe8);
  box-shadow: 0 12px 22px rgb(38 103 235 / .2);
}

.app-native-setting-row {
  margin-top: 16px;
}

.app-native-setting-row label:first-child {
  display: grid;
  gap: 8px;
  flex: 1;
}

.app-native-setting-row input[type="number"] {
  width: 100%;
  height: 42px;
  border: 1px solid #e3ebf7;
  border-radius: 10px;
  padding: 0 12px;
  color: #0a1733;
  background: #fbfdff;
  font-size: 14px;
  outline: none;
}

.app-native-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 21px;
}

.app-native-switch input {
  display: none;
}

.app-native-switch i {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #dfe6f1;
}

.app-native-switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgb(42 57 90 / .14);
  transition: transform .2s ease;
}

.app-native-switch input:checked + i {
  background: linear-gradient(135deg, #2c7cff, #685cff);
}

.app-native-switch input:checked + i::after {
  transform: translateX(20px);
}

.preview-empty {
  min-height: 104px;
  display: grid;
  place-items: center;
  align-content: center;
  margin-top: 14px;
  border-radius: 12px;
  color: #7b8ca8;
  background: linear-gradient(180deg, #f8fbff, #f3f7ff);
  text-align: center;
}

.preview-empty b {
  color: #1a2a49;
  font-size: 16px;
}

.preview-empty p {
  max-width: 240px;
  margin: 6px auto 0;
  font-size: 13px;
  line-height: 1.5;
}

.preview-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin-top: 14px;
}

.preview-compare article {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid #e7eef8;
  border-radius: 12px;
  padding: 10px;
  background: #fbfdff;
  text-align: center;
}

.preview-compare article img,
.preview-thumb {
  width: 100%;
  aspect-ratio: 1.4;
  object-fit: cover;
  border-radius: 10px;
  background: linear-gradient(135deg, #ddecff, #f8fbff);
}

.preview-compare small {
  color: #647795;
  font-size: 12px;
}

.preview-compare strong {
  color: #0d1b39;
  font-size: 14px;
}

.preview-compare > i {
  align-self: center;
  color: #a4b1c5;
  font-style: normal;
  font-size: 24px;
}

.preview-saving {
  grid-column: 1 / -1;
}

.preview-saving b {
  color: #2c72f3;
  font-size: 34px;
  line-height: 1;
}

.preview-saving em {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5ebf4;
}

.preview-saving em span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2d7cff, #8b63ff);
}

.preview-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.preview-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid #e8eef7;
  border-radius: 10px;
  padding: 0 10px;
  color: #183055;
  background: #fff;
  text-decoration: none;
}

.preview-list-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.preview-list-item b {
  color: #7485a1;
  font-size: 12px;
  font-weight: 600;
}

.preview-list-item strong {
  color: #1769ef;
  font-size: 13px;
}

.preview-list p {
  margin: 0;
  color: #7b8ca8;
  font-size: 13px;
}

.app-native-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
  margin-top: 18px;
  padding-bottom: 10px;
}

.app-native-actions button {
  height: 56px;
  border: 1px solid #e3ebf7;
  border-radius: 12px;
  color: #183055;
  background: rgb(255 255 255 / .94);
  box-shadow: 0 12px 28px rgb(33 69 128 / .08);
  font-size: 17px;
  font-weight: 760;
}

.app-native-actions .primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #2c7cff, #7a5cff);
  box-shadow: 0 16px 32px rgb(50 94 220 / .25);
}

.app-native-actions button:disabled {
  opacity: .72;
}

.app-native-toast {
  position: fixed;
  left: 50%;
  bottom: calc(118px + env(safe-area-inset-bottom));
  z-index: 1900;
  min-width: 138px;
  max-width: min(320px, calc(100vw - 44px));
  padding: 11px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgb(8 22 52 / .88);
  box-shadow: 0 14px 34px rgb(7 18 42 / .22);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 10px);
  transition: opacity .2s ease, transform .2s ease;
}

.app-native-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.app-native-developing {
  min-height: calc(100dvh - 190px);
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 40px 22px 130px;
}

.developing-visual {
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border-radius: 34px;
  background: linear-gradient(135deg, #eaf3ff, #f4f0ff);
  box-shadow: 0 24px 52px rgb(49 91 180 / .16);
}

.developing-visual span {
  width: 68px;
  height: 68px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .88), rgb(255 255 255 / .2)),
    linear-gradient(135deg, #3b8cff, #7b5cff);
}

.app-native-developing h1 {
  margin: 24px 0 10px;
  color: #081532;
  font-size: 25px;
  font-weight: 760;
}

.app-native-developing p {
  max-width: 310px;
  margin: 0;
  color: #657795;
  font-size: 14px;
  line-height: 1.7;
}

.app-native-developing button {
  height: 48px;
  margin-top: 24px;
  border: 0;
  border-radius: 16px;
  padding: 0 22px;
  color: #fff;
  background: linear-gradient(135deg, #2d7cff, #6c5cff);
  box-shadow: 0 14px 26px rgb(43 98 224 / .22);
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 430px) {
  .mobile-app-shell.mobile-app-runtime .mobile-device-frame.app-native-tool-device {
    width: 100vw;
  }

  .mobile-app-shell.mobile-app-runtime .mobile-phone-frame.app-native-tool-frame {
    padding-right: 14px;
    padding-left: 14px;
  }

  .app-native-hero {
    grid-template-columns: minmax(0, 1fr) 116px;
    min-height: 160px;
    padding: 21px 16px;
  }

  .app-native-hero h1 {
    font-size: 30px;
  }

  .app-native-hero-art {
    height: 118px;
  }

  .css-compress-3d {
    inset: 0 -11px 0 -9px;
    transform: scale(.92);
    transform-origin: center;
  }

  .app-native-hero-art img {
    right: -33px;
    top: 9px;
    width: 178px;
    height: 118px;
  }

  .app-native-segments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-native-setting-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-native-switch {
    margin-top: 0;
    justify-content: space-between;
  }

  .app-native-actions {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
}