/* Karupre 1.2.20 — frontend styles. All selectors are scoped to .karupre-* to avoid THE THOR collisions. */

.karupre-tool,
.karupre-account-card,
.karupre-mypage,
.karupre-compare {
  --karupre-blue: #1f73e8;
  --karupre-blue-dark: #155fc6;
  --karupre-blue-soft: #eef6ff;
  --karupre-text: #172033;
  --karupre-muted: #667085;
  --karupre-border: #dce5ef;
  --karupre-border-soft: #e9eef5;
  --karupre-bg: #f7f9fc;
  --karupre-pro: #f42859;
  --karupre-pro-dark: #d91f4c;
  --karupre-success: #16855b;
  --karupre-danger: #d92d20;
  --karupre-warning: #b76e00;
  font-family: inherit;
  color: var(--karupre-text);
  box-sizing: border-box;
}

.karupre-tool *,
.karupre-account-card *,
.karupre-mypage *,
.karupre-compare * {
  box-sizing: border-box;
}

.karupre-tool__inner {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

/* Hero */
.karupre-tool--hero .karupre-hero-shell {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 62px 0 102px;
  overflow: hidden;
  background: #edf6ff;
}


.karupre-tool--hero.karupre-tool--image-convert .karupre-hero-shell {
  background: #f0faf5;
}

.karupre-tool--hero.karupre-tool--image-convert .karupre-hero-shell::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(22, 133, 91, .055) 0 2px, transparent 2.5px) 0 0 / 38px 38px,
    radial-gradient(circle at 88% 72%, rgba(22, 133, 91, .04) 0 2px, transparent 2.5px) 18px 18px / 44px 44px,
    linear-gradient(180deg, #f8fdfa 0%, #f0faf5 100%);
}

.karupre-tool--hero .karupre-hero-shell__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.karupre-tool--hero .karupre-hero-shell::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: var(--karupre-hero-overlay-opacity, .88);
  background:
    radial-gradient(circle at 12% 18%, rgba(31, 115, 232, .08) 0 2px, transparent 2.5px) 0 0 / 38px 38px,
    radial-gradient(circle at 88% 72%, rgba(31, 115, 232, .055) 0 2px, transparent 2.5px) 18px 18px / 44px 44px,
    linear-gradient(180deg, #f5faff 0%, #edf6ff 100%);
}

.karupre-upload-panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: visible;
}

.karupre-upload-panel__burst {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.karupre-upload-panel__burst-character {
  position: absolute;
  left: var(--karupre-burst-left, 50%);
  top: var(--karupre-burst-top, 50%);
  width: var(--karupre-burst-size, 84px);
  height: var(--karupre-burst-size, 84px);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  animation: karupre-upload-character-burst var(--karupre-burst-duration, 1100ms) cubic-bezier(.18, .72, .2, 1) var(--karupre-burst-delay, 0ms) forwards;
}

.karupre-upload-panel__burst-character img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes karupre-upload-character-burst {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(.52);
    opacity: 0;
  }
  10% { opacity: 1; }
  68% { opacity: 1; }
  100% {
    transform: translate(-50%, -50%) translate(var(--karupre-burst-x, 0), var(--karupre-burst-y, -130px)) rotate(var(--karupre-burst-rotate, 0deg)) scale(var(--karupre-burst-end-scale, 1));
    opacity: 0;
  }
}

.karupre-tool--hero .karupre-upload-panel {
  max-width: 960px;
  margin: 0 auto;
}

.karupre-drop {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 386px;
  padding: 38px 34px 25px;
  border: 2px dashed #9bbbe3;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  color: var(--karupre-text);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.karupre-upload-panel__peek {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.karupre-upload-panel__peek-character {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  --karupre-peek-from-x: 0;
  --karupre-peek-from-y: 0;
  --karupre-peek-to-x: 0;
  --karupre-peek-to-y: 0;
  --karupre-peek-rotate: 0deg;
  --karupre-peek-flip: 1;
}

.karupre-upload-panel__peek-character[data-side="left"] {
  top: var(--karupre-peek-position, 50%);
  left: 0;
  margin-top: -50px;
  --karupre-peek-to-x: -80px;
}

.karupre-upload-panel__peek-character[data-side="right"] {
  top: var(--karupre-peek-position, 50%);
  right: 0;
  margin-top: -50px;
  --karupre-peek-to-x: 80px;
  --karupre-peek-flip: -1;
}

.karupre-upload-panel__peek-character[data-side="top"] {
  top: 0;
  left: var(--karupre-peek-position, 50%);
  width: 76px;
  height: 76px;
  margin-left: -38px;
  --karupre-peek-to-y: -61px;
  --karupre-peek-rotate: 180deg;
}

.karupre-upload-panel__peek-character.is-active {
  animation: karupre-character-peek 3200ms cubic-bezier(.22, .78, .24, 1) var(--karupre-peek-delay, 0ms) both;
}

.karupre-upload-panel__peek-character img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes karupre-character-peek {
  0%, 100% {
    transform: translate(var(--karupre-peek-from-x), var(--karupre-peek-from-y)) rotate(var(--karupre-peek-rotate)) scaleX(var(--karupre-peek-flip));
    opacity: 0;
  }
  18%, 72% {
    transform: translate(var(--karupre-peek-to-x), var(--karupre-peek-to-y)) rotate(var(--karupre-peek-rotate)) scaleX(var(--karupre-peek-flip));
    opacity: 1;
  }
}

@media (max-width: 780px) {
  .karupre-upload-panel__peek-character {
    width: 76px;
    height: 76px;
  }

  .karupre-upload-panel__peek-character[data-side="left"] {
    left: 0;
    margin-top: -38px;
    --karupre-peek-to-x: -61px;
  }

  .karupre-upload-panel__peek-character[data-side="right"] {
    right: 0;
    margin-top: -38px;
    --karupre-peek-to-x: 61px;
  }

  .karupre-upload-panel__peek-character[data-side="top"] {
    top: 0;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    --karupre-peek-to-y: -35px;
  }
}

.karupre-drop:hover,
.karupre-drop:focus-visible,
.karupre-drop.is-dragging {
  border-color: #aeb8c4;
  background: #f2f4f7;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .08), inset 0 0 0 1px rgba(102, 112, 133, .08);
  outline: none;
}

.karupre-drop:hover .karupre-drop__icon,
.karupre-drop:focus-visible .karupre-drop__icon,
.karupre-drop.is-dragging .karupre-drop__icon {
  background: #e6e9ee;
}

.karupre-drop.is-dragging {
  transform: translateY(-2px);
}

.karupre-drop.is-busy {
  cursor: progress;
}

.karupre-drop.is-ai-locked:not(.is-ai-loading) {
  cursor: default;
}

.karupre-drop.is-ai-locked:not(.is-ai-loading):hover,
.karupre-drop.is-ai-locked:not(.is-ai-loading):focus-visible {
  border-color: #9bbbe3;
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
  outline: none;
}

.karupre-drop.is-ai-locked:not(.is-ai-loading):hover .karupre-drop__icon,
.karupre-drop.is-ai-locked:not(.is-ai-loading):focus-visible .karupre-drop__icon {
  background: var(--karupre-blue-soft);
}

.karupre-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.karupre-drop__plan-status {
  position: absolute;
  top: 0;
  left: 24px;
  z-index: 3;
  transform: translateY(-50%);
  pointer-events: none;
}

.karupre-drop__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--karupre-blue-soft);
  color: var(--karupre-blue);
  transition: background-color .18s ease;
}

.karupre-drop__icon svg {
  width: 50px;
  height: 50px;
}

.karupre-drop.is-ai-loading .karupre-drop__icon {
  background: #f5f9ff;
}

.karupre-drop.is-ai-loading .karupre-drop__icon svg {
  display: none;
}

.karupre-drop.is-ai-loading .karupre-drop__icon::before {
  content: "";
  width: 38px;
  height: 38px;
  border: 4px solid #d7e7fb;
  border-top-color: var(--karupre-blue);
  border-radius: 50%;
  animation: karupre-ai-loading-spin .8s linear infinite;
}

@keyframes karupre-ai-loading-spin {
  to { transform: rotate(360deg); }
}

.karupre-drop__catch,
.karupre-drop__title {
  display: block;
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: .01em;
}

.karupre-drop__catch {
  margin-bottom: 2px;
  color: var(--karupre-blue);
}

.karupre-drop__sub {
  margin-top: 6px;
  color: var(--karupre-muted);
  font-size: 14px;
  line-height: 1.55;
}

.karupre-drop__limit {
  margin-top: 7px;
  color: #8a94a6;
  font-size: 12px;
  line-height: 1.45;
}

.karupre-drop__meta {
  width: 100%;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--karupre-border-soft);
  cursor: default;
}

.karupre-tool--image-convert .karupre-drop__catch {
  margin-bottom: 5px;
  font-size: 26px;
  line-height: 1.35;
}

.karupre-tool--image-convert .karupre-drop__meta--controls-top {
  margin-top: 0;
  margin-bottom: 20px;
  padding-top: 0;
  padding-bottom: 18px;
  border-top: 0;
  border-bottom: 1px solid var(--karupre-border-soft);
}

.karupre-tool--image-convert .karupre-drop__meta--controls-top .karupre-options {
  justify-content: center;
  margin-top: 0;
}

.karupre-tool--image-convert .karupre-drop__meta--controls-top .karupre-options__controls {
  justify-content: center;
  margin-left: 0;
}

.karupre-upload-formats {
  width: 100%;
  margin-top: 12px;
}

.karupre-upload-formats[hidden] {
  display: none !important;
}

.karupre-formats {
  width: 100%;
}

.karupre-formats__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.karupre-formats__break {
  flex: 0 0 100%;
  width: 100%;
  height: 0;
}

.karupre-format-chip,
.karupre-option-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.karupre-format-chip {
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid #b8d5fb;
  background: #eef6ff;
  color: #2866ad;
}

.karupre-format-chip__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.karupre-format-chip__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.karupre-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 13px;
}

.karupre-pro-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 18px;
  border: 1px solid #17365d;
  border-radius: 100px;
  background: #17365d;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.karupre-options__controls {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: 0;
}

.karupre-options__row {
  flex-basis: 100%;
  width: 100%;
}

.karupre-options__row--additional {
  padding-top: 2px;
}

.karupre-option-chip {
  gap: 8px;
  padding: 5px 7px 5px 10px;
  border: 1px solid #d9e3ef;
  background: rgba(255, 255, 255, .88);
  color: #536176;
}

.karupre-option-chip[hidden] {
  display: none !important;
}

.karupre-option-chip > span {
  color: #536176;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.karupre-option-chip select {
  min-width: 124px;
  height: 28px;
  margin: 0;
  padding: 0 24px 0 8px;
  border: 0;
  border-left: 1px solid #e6ebf1;
  border-radius: 0;
  background-color: transparent;
  color: #22314b;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  box-shadow: none;
  cursor: pointer;
}

.karupre-option-chip select:disabled {
  opacity: .65;
  cursor: progress;
}

.karupre-option-chip--background {
  flex: 0 0 224px;
  width: 224px;
  min-width: 224px;
  max-width: 224px;
  box-sizing: border-box;
}

.karupre-option-chip--background > span {
  flex: 0 0 auto;
}

.karupre-option-chip--background select {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

.karupre-option-chip--background.is-unavailable {
  opacity: .58;
}

.karupre-option-chip--conversion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
}

.karupre-option-chip--ratio {
  flex: 0 1 282px;
}

.karupre-option-chip--ratio select,
.karupre-option-chip--metadata select {
  flex: 1 1 auto;
}

.karupre-option-chip--custom-size {
  gap: 8px;
}

.karupre-custom-size {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 8px;
  border-left: 1px solid #e6ebf1;
}

.karupre-custom-size input {
  width: 70px;
  height: 28px;
  margin: 0;
  padding: 0 5px;
  border: 1px solid #d9e3ef;
  border-radius: 4px;
  background: #fff;
  color: #22314b;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.karupre-custom-size small {
  font-size: 11px;
}

.karupre-option-chip--transform {
  gap: 5px 9px;
}

.karupre-option-chip--transform > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.karupre-option-chip--transform > label > span {
  color: #536176;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.karupre-option-chip--transform select {
  min-width: 102px;
}

.karupre-conversion-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.karupre-conversion-field__label {
  color: #536176;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.karupre-option-chip--conversion .karupre-conversion-field select {
  min-width: 124px;
}

.karupre-conversion-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #6b7c92;
}

.karupre-conversion-arrow svg {
  display: block;
  width: 18px;
  height: 18px;
}

@media (min-width: 781px) {
  .karupre-option-chip--conversion .karupre-conversion-field select {
    flex: 0 0 124px;
    width: 124px;
    min-width: 124px;
    max-width: 124px;
  }
}

/* AI background workspace */
.karupre-results__card[hidden],
.karupre-ai-card[hidden],
.karupre-crop-card[hidden] {
  display: none !important;
}

.karupre-crop-card {
  overflow: hidden;
  border: 1px solid #dce4ed;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(31, 62, 99, .09);
}

.karupre-crop-card__header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--karupre-border-soft);
  background: #f4f8fd;
}

.karupre-crop-card__header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.karupre-crop-card__header strong {
  color: var(--karupre-text);
  font-size: 20px;
  font-weight: 800;
}

.karupre-crop-card__header span,
.karupre-crop-card__message {
  color: var(--karupre-muted);
  font-size: 13px;
  line-height: 1.55;
}

.karupre-crop-viewport {
  overflow: auto;
  padding: 20px;
  background: #263240;
  text-align: center;
}

.karupre-crop-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  user-select: none;
}

.karupre-crop-stage > img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(62vh, 680px);
  object-fit: contain;
  pointer-events: none;
}

.karupre-crop-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  outline: 1px solid rgba(23, 92, 177, .9);
  background: rgba(61, 139, 234, .12);
  box-shadow: 0 0 0 9999px rgba(7, 18, 30, .58);
  cursor: move;
  touch-action: none;
}

.karupre-crop-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #175cb1;
  border-radius: 50%;
  background: #fff;
}

.karupre-crop-handle--nw { top: -10px; left: -10px; cursor: nwse-resize; }
.karupre-crop-handle--ne { top: -10px; right: -10px; cursor: nesw-resize; }
.karupre-crop-handle--sw { bottom: -10px; left: -10px; cursor: nesw-resize; }
.karupre-crop-handle--se { right: -10px; bottom: -10px; cursor: nwse-resize; }

.karupre-crop-card__message {
  min-height: 20px;
  margin: 12px 18px 0;
}

.karupre-crop-card__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px 18px;
}

.karupre-ai-card {
  overflow: hidden;
  border: 1px solid #dce4ed;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(31, 62, 99, .09);
}

.karupre-ai-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--karupre-border-soft);
  background: #f4f8fd;
}

.karupre-ai-card__header-status {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.karupre-ai-card__type-icon {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #d8e3ef;
  border-radius: 9px;
  background: #fff;
  color: var(--karupre-blue);
}

.karupre-ai-card__type-icon svg {
  width: 30px;
  height: 30px;
}

.karupre-ai-card__character {
  flex-basis: 82px;
  width: 82px;
  height: 82px;
  margin: -11px 0;
}

.karupre-ai-card__heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.karupre-ai-card__header strong {
  color: var(--karupre-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.karupre-tool--image-cutout .karupre-ai-card__header strong {
  font-size: 22px;
}

.karupre-ai-card__heading > span,
.karupre-ai-card__status {
  color: var(--karupre-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.karupre-ai-card__status {
  flex: 0 0 auto;
  color: var(--karupre-blue);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.karupre-ai-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 18px 18px 10px;
  background: #fff;
}

.karupre-ai-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding-top: 9px;
  color: #98a2b3;
  text-align: center;
}

.karupre-ai-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: #e5edf7;
  transition: background-color .2s ease;
}

.karupre-ai-step > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #d4dce7;
  border-radius: 50%;
  background: #fff;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.karupre-ai-step strong {
  overflow: hidden;
  width: 100%;
  color: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.karupre-ai-step.is-active,
.karupre-ai-step.is-complete {
  color: var(--karupre-blue);
}

.karupre-ai-step.is-active::before,
.karupre-ai-step.is-complete::before {
  background: var(--karupre-blue);
}

.karupre-ai-step.is-active > span,
.karupre-ai-step.is-complete > span {
  border-color: var(--karupre-blue);
  background: var(--karupre-blue);
  color: #fff;
}

.karupre-ai-step[data-karupre-ai-step="5"].is-complete {
  color: var(--karupre-success);
}

.karupre-ai-step[data-karupre-ai-step="5"].is-complete::before {
  background: var(--karupre-success);
}

.karupre-ai-step[data-karupre-ai-step="5"].is-complete > span {
  border-color: var(--karupre-success);
  background: var(--karupre-success);
}

.karupre-ai-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 14px 18px 8px;
}

.karupre-ai-preview {
  min-width: 0;
  margin: 0;
}

.karupre-ai-preview figcaption {
  margin: 0 0 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.karupre-ai-preview__stage {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #f7f9fc;
}

.karupre-ai-preview__stage--cutout {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef1f4 25%, transparent 25%),
    linear-gradient(-45deg, #eef1f4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef1f4 75%),
    linear-gradient(-45deg, transparent 75%, #eef1f4 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

.karupre-ai-preview__stage > img[data-karupre-ai-before],
.karupre-ai-preview__stage > img[data-karupre-ai-after] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.karupre-ai-preview__stage > img[data-karupre-ai-before][hidden],
.karupre-ai-preview__stage > img[data-karupre-ai-after][hidden] {
  display: none !important;
}

.karupre-ai-preview__placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 36vw, 430px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 16px;
  color: #8a96a8;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
  text-align: center;
}

.karupre-ai-preview__placeholder > img {
  display: block;
  width: clamp(78px, 9vw, 118px);
  height: clamp(78px, 9vw, 118px);
  object-fit: contain;
  animation: karupre-character-working 1.45s ease-in-out infinite;
}

.karupre-ai-preview__placeholder > img[hidden],
.karupre-ai-preview__placeholder[hidden] {
  display: none !important;
}

.karupre-ai-card__message {
  min-height: 22px;
  margin: 6px 18px 0;
  color: var(--karupre-text);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.karupre-ai-card__message:empty {
  min-height: 0;
  margin-top: 0;
}

.karupre-ai-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px 18px;
}

.karupre-ai-card__actions .karupre-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 154px;
}

.karupre-ai-card__actions .karupre-button[hidden] {
  display: none !important;
}

.karupre-ai-card__actions .karupre-button svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

.karupre-ai-card__actions .karupre-button.is-downloaded {
  border-color: var(--karupre-success);
  background: var(--karupre-success);
  color: #fff !important;
}

/* Advertising */
.karupre-upload-ad-wrap {
  position: relative;
  z-index: 4;
  margin: 16px 0 0;
}
.karupre-upload-ad-wrap[hidden] { display: none !important; }
.karupre-ad { width: 100%; }
.karupre-ad:empty { display: none; }
.karupre-ad--upload { text-align: center; }
.karupre-ad--shortcode { margin: 18px 0; }

/* Results */
.karupre-results {
  position: relative;
  z-index: 3;
}

.karupre-tool--hero .karupre-results {
  margin-top: -44px;
  padding-bottom: 22px;
}

.karupre-results[hidden] {
  display: none !important;
}

.karupre-results__card {
  overflow: hidden;
  border: 1px solid #dce4ed;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(31, 62, 99, .09);
}

.karupre-results__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--karupre-border-soft);
  background: #f4f8fd;
}

.karupre-results__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.karupre-results__heading strong {
  color: var(--karupre-text);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.3;
}

.karupre-results__heading span {
  color: var(--karupre-muted);
  font-size: 13px;
  line-height: 1.4;
}

.karupre-results__header-actions[hidden] {
  display: none !important;
}

.karupre-results__header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.karupre-files {
  background: #fff;
}

.karupre-file {
  display: grid;
  content-visibility: auto;
  contain-intrinsic-size: auto 88px;
  grid-template-columns: 82px minmax(0, 1fr) 132px auto;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--karupre-border-soft);
  background: #fff;
}

.karupre-file:last-child {
  border-bottom: 0;
}

.karupre-file__preview {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f7f9fc;
}

.karupre-file__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.karupre-file__type-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #718096;
}

.karupre-file__type-icon svg {
  width: 34px;
  height: 34px;
}

.karupre-file__type-icon--pdf { color: #e24a4a; }
.karupre-file__type-icon--office { color: #287a62; }
.karupre-file__type-icon--video { color: #5667d8; }

.karupre-file__main {
  min-width: 0;
}

.karupre-file__name {
  display: block;
  overflow: hidden;
  margin: 0;
  color: #19263a;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.karupre-file__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: #7b8798;
  font-size: 12px;
  line-height: 1.2;
}

.karupre-file__format {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #f0f4f8;
  color: #5d6b7d;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.karupre-file__message {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #7b8798;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.karupre-file__message.is-error { color: var(--karupre-danger); }
.karupre-file__message.is-warning { color: var(--karupre-warning); }

.karupre-file__progress {
  position: relative;
  width: 100%;
  height: 7px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e5edf7;
}

.karupre-file__progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--karupre-blue);
  transition: width .34s cubic-bezier(.22, .61, .36, 1);
}

.karupre-file__result {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 118px;
}

.karupre-file__saving {
  color: var(--karupre-blue);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.05;
}

.karupre-file__output-size {
  color: #697588;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.karupre-file__processing-text {
  color: var(--karupre-blue);
  font-size: 14px;
  font-weight: 800;
}

.karupre-file__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 96px;
}

.karupre-file__action,
.karupre-file__remove,
.karupre-button {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.karupre-file__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.karupre-file__action svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

.karupre-file__action--download {
  min-width: 86px;
  border: 1px solid var(--karupre-blue);
  background: var(--karupre-blue);
  color: #fff !important;
  text-decoration: none !important;
  transform: translateZ(0);
}

.karupre-file__action--download:hover,
.karupre-file__action--download:focus-visible {
  border-color: var(--karupre-blue-dark);
  background: var(--karupre-blue-dark);
  color: #fff !important;
  text-decoration: none !important;
}

.karupre-file__action--download:active,
.karupre-file__action--download.is-clicked {
  transform: translateY(1px) scale(.97);
}

.karupre-file__action--download.is-downloaded {
  border-color: #16855b;
  background: #16855b;
  color: #fff;
}

.karupre-file__action--secondary {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #344054;
}

.karupre-file__remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #98a2b3;
}

.karupre-file__remove:hover,
.karupre-file__remove:focus-visible {
  background: #f3f5f8;
  color: #475467;
}

.karupre-file__remove svg {
  width: 17px;
  height: 17px;
}

.karupre-results__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 62px;
  padding: 11px 14px;
  border-top: 1px solid var(--karupre-border-soft);
  background: #fff;
}

.karupre-results__pro-copy {
  flex: 1 1 auto;
  min-width: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
}

.karupre-results__pro {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 9px 16px;
  border: 1px solid var(--karupre-pro);
  border-radius: 7px;
  background: var(--karupre-pro);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease;
}

.karupre-results__pro:hover,
.karupre-results__pro:focus-visible {
  border-color: var(--karupre-pro-dark);
  background: var(--karupre-pro-dark);
  color: #fff !important;
}

.karupre-button--zip,
.karupre-button--queue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #cbd5df;
  border-radius: 7px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.karupre-button--zip:hover,
.karupre-button--zip:focus-visible,
.karupre-button--queue:hover,
.karupre-button--queue:focus-visible {
  border-color: #98a2b3;
  background: #f7f9fc;
}

.karupre-button--zip.is-downloaded {
  border-color: #b9dacc;
  background: #f2faf6;
  color: var(--karupre-success);
}

.karupre-button--queue[aria-pressed="true"] {
  border-color: #aab8c8;
  background: #eef3f8;
  color: #24364d;
}

.karupre-button--zip svg,
.karupre-button--queue svg {
  width: 18px;
  height: 18px;
}

.karupre-button--zip[hidden],
.karupre-button--queue[hidden] {
  display: none !important;
}

/* Login / account */
/* Login */
.karupre-account-card.karupre-account-card--login {
  width: min(880px, calc(100% - 32px));
  margin: 64px auto;
  padding: 54px 64px 58px;
  text-align: center;
}

.karupre-account-card--login h2 {
  margin-bottom: 12px;
  font-size: 26px;
  text-align: center;
}

.karupre-account-card--login .karupre-login-lead {
  max-width: 620px;
  margin: 0 auto 30px;
  text-align: center;
}

.karupre-login-form {
  width: min(660px, 100%);
  margin: 0 auto;
  text-align: left;
}

.karupre-field--login {
  margin: 0 0 16px;
}

.karupre-field--login input {
  min-height: 52px;
  padding: 12px 14px;
  font-size: 15px;
}

.karupre-field--login input::placeholder {
  color: #98a2b3;
  opacity: 1;
}

.karupre-login-consent {
  margin: 0 0 24px !important;
  color: #667085 !important;
  font-size: 12px;
  line-height: 1.75 !important;
  text-align: left;
}

.karupre-login-consent a {
  color: var(--karupre-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.karupre-login-submit {
  width: 100%;
  min-height: 58px;
  padding: 17px 28px;
  font-size: 14px;
}

.karupre-account-card--login .karupre-form-message {
  margin: 18px 0 0;
  text-align: center;
}

.karupre-account-card,
.karupre-mypage .karupre-account-card {
  width: min(760px, 100%);
  margin: 24px auto;
  padding: 28px;
  border: 1px solid var(--karupre-border);
  border-radius: 10px;
  background: #fff;
}

.karupre-account-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.karupre-account-card__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--karupre-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.karupre-account-card h2,
.karupre-account-card h3 {
  margin: 0 0 10px;
  color: var(--karupre-text);
  line-height: 1.4;
}

.karupre-account-card p {
  color: var(--karupre-muted);
  line-height: 1.7;
}

.karupre-field {
  display: block;
  margin: 18px 0;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.karupre-field > span {
  display: block;
  margin-bottom: 7px;
}

.karupre-field input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  background: #fff;
  color: #182230;
  font: inherit;
}

.karupre-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid #cbd5df;
  border-radius: 7px;
  background: #fff;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
}

.karupre-button--primary {
  border-color: var(--karupre-blue);
  background: var(--karupre-blue);
  color: #fff !important;
}

.karupre-button--danger {
  border-color: #e1e6ed;
  color: #9b2c2c;
}

.karupre-button:disabled {
  opacity: .6;
  cursor: wait;
}

.karupre-notice {
  padding: 11px 13px;
  border-left: 3px solid var(--karupre-blue);
  background: #f5f9ff;
}

.karupre-notice--warning {
  border-left-color: #e5a000;
  background: #fff9ec;
}

.karupre-form-message {
  min-height: 1.5em;
  margin: 12px 0 0;
  font-size: 13px;
}

.karupre-form-message.is-error {
  color: var(--karupre-danger);
}

.karupre-form-message.is-success {
  color: var(--karupre-success);
}

.karupre-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0f2f5;
  color: #5c6675;
  font-size: 11px;
  font-weight: 800;
}

.karupre-plan-badge.is-pro {
  background: #eaf3ff;
  color: var(--karupre-blue);
}

.karupre-mypage__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--karupre-border-soft);
  font-size: 14px;
}

.karupre-mypage__row span {
  color: var(--karupre-muted);
}

.karupre-mypage__row strong {
  text-align: right;
}

.karupre-usage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.karupre-usage-grid > div {
  padding: 16px;
  border: 1px solid var(--karupre-border-soft);
  border-radius: 8px;
  background: #fafbfd;
  text-align: center;
}

.karupre-usage-grid span,
.karupre-usage-grid small {
  color: var(--karupre-muted);
  font-size: 12px;
}

.karupre-usage-grid strong {
  display: inline-block;
  margin: 0 4px;
  font-size: 22px;
}

.karupre-usage-note {
  margin-bottom: 0 !important;
  font-size: 12px;
}

.karupre-mypage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

body.karupre-login-sent-open {
  overflow: hidden;
}

.karupre-login-sent[hidden] {
  display: none !important;
}

.karupre-login-sent {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: left;
}

.karupre-login-sent__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, .52);
}

.karupre-login-sent__dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: 34px 32px 30px;
  border: 1px solid var(--karupre-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
  outline: none;
}

.karupre-login-sent__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--karupre-border);
  border-radius: 7px;
  background: #fff;
  color: #475467;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.karupre-login-sent__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--karupre-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.karupre-login-sent__dialog h2 {
  margin: 0 44px 14px 0;
  color: var(--karupre-text);
  font-size: 28px;
  line-height: 1.4;
  text-align: left;
}

.karupre-login-sent__lead,
.karupre-login-sent__text {
  margin: 0 0 10px !important;
  color: var(--karupre-text);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

.karupre-login-sent__notice {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid #f0d8a0;
  border-radius: 8px;
  background: #fff9ec;
  color: #694b00;
  font-size: 13px;
  line-height: 1.75;
}

.karupre-login-sent__notice > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.karupre-login-sent__notice p {
  margin: 0 !important;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.karupre-login-sent__button {
  width: 100%;
  margin-top: 22px;
  min-height: 50px;
}

body.karupre-checkout-confirm-open {
  overflow: hidden;
}

.karupre-checkout-confirm[hidden] {
  display: none !important;
}

.karupre-checkout-confirm {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.karupre-checkout-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, .52);
}

.karupre-checkout-confirm__dialog {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(88vh, 860px);
  overflow-y: auto;
  padding: 30px;
  border: 1px solid var(--karupre-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
  outline: none;
}

.karupre-checkout-confirm__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--karupre-border);
  border-radius: 7px;
  background: #fff;
  color: #475467;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.karupre-checkout-confirm__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--karupre-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.karupre-checkout-confirm__dialog h2 {
  margin: 0 44px 10px 0;
  color: var(--karupre-text);
  font-size: 22px;
  line-height: 1.4;
}

.karupre-checkout-confirm__lead {
  margin: 0 0 20px !important;
  color: var(--karupre-muted);
  font-size: 14px;
  line-height: 1.7;
}

.karupre-checkout-confirm__details {
  margin: 0;
  border-top: 1px solid var(--karupre-border-soft);
}

.karupre-checkout-confirm__details > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--karupre-border-soft);
}

.karupre-checkout-confirm__details dt,
.karupre-checkout-confirm__details dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.karupre-checkout-confirm__details dt {
  color: var(--karupre-muted);
  font-weight: 700;
}

.karupre-checkout-confirm__details dd {
  color: var(--karupre-text);
}

.karupre-checkout-confirm__terms {
  margin: 18px 0 0 !important;
  color: var(--karupre-muted);
  font-size: 12px;
  line-height: 1.7;
}

.karupre-checkout-confirm__terms a {
  color: var(--karupre-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.karupre-checkout-confirm__message {
  min-height: 1.5em;
  margin: 10px 0 0 !important;
  font-size: 13px;
}

.karupre-checkout-confirm__message.is-error {
  color: var(--karupre-danger);
}

.karupre-checkout-confirm__message.is-success {
  color: var(--karupre-success);
}

.karupre-checkout-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 16px;
}


/* Before / after image comparison */
.karupre-compare {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.karupre-compare__stage {
  position: relative;
  width: 100%;
  border-radius: 14px;
  background: #edf2f7;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.karupre-compare__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.karupre-compare__image--before {
  position: relative;
  z-index: 1;
}

.karupre-compare__after {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 0 0 var(--karupre-compare-position, 50%));
  pointer-events: none;
}

.karupre-compare__image--after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Cutout comparison: show transparency instead of the before image beneath it. */
.karupre-compare--cutout .karupre-compare__after {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.karupre-compare__headline {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(15, 41, 64, 0.88);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(8, 26, 43, 0.22);
}

.karupre-compare__divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--karupre-compare-position, 50%);
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, .12), 0 0 12px rgba(17, 24, 39, .18);
  transform: translateX(-50%);
  pointer-events: none;
}

.karupre-compare__handle {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: var(--karupre-compare-position, 50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--karupre-blue);
  color: #fff;
  box-shadow: 0 5px 16px rgba(17, 24, 39, .22);
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  outline: none;
}

.karupre-compare__handle svg {
  display: block;
  width: 28px;
  height: 28px;
}

.karupre-compare__handle:focus-visible {
  box-shadow: 0 0 0 4px rgba(31, 115, 232, .22), 0 5px 16px rgba(17, 24, 39, .22);
}

.karupre-compare__label,
.karupre-compare__reduction {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.karupre-compare__label {
  bottom: 18px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
  padding: 10px 11px;
  border-radius: 8px;
  background: rgba(17, 24, 39, .72);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(4px);
}

.karupre-compare__label--before {
  left: 18px;
}

.karupre-compare__label--after {
  right: 18px;
}

.karupre-compare__label strong,
.karupre-compare__label small {
  display: block;
  margin: 0;
  color: inherit;
}

.karupre-compare__label-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .03em;
}

.karupre-compare__label-size {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  opacity: .96;
}

.karupre-compare__label-number {
  font-size: 29px;
  font-weight: 800;
  line-height: .95;
}

.karupre-compare__label-unit {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.05;
}

.karupre-compare__reduction {
  top: 18px;
  left: 50%;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--karupre-blue-dark);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .12);
  transform: translateX(-50%);
}

.karupre-compare__reduction-prefix,
.karupre-compare__reduction-suffix {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
}

.karupre-compare__reduction-number {
  font-size: 37px;
  font-weight: 900;
  line-height: .9;
}

.karupre-compare__error {
  margin: 12px 0 !important;
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  background: #fff7f7;
  color: var(--karupre-danger, #d92d20);
  font-size: 13px;
  line-height: 1.6;
}


/* Responsive */
@media (max-width: 780px) {
  .karupre-compare__handle {
    width: 42px;
    height: 42px;
  }

  .karupre-compare__label {
    bottom: 10px;
    min-width: 118px;
    padding: 9px 10px;
    gap: 3px;
  }

  .karupre-compare__headline {
    top: 10px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .karupre-compare__label--before { left: 10px; }
  .karupre-compare__label--after { right: 10px; }

  .karupre-compare__label-title { font-size: 20px; }
  .karupre-compare__label-number { font-size: 28px; }
  .karupre-compare__label-unit { font-size: 14px; }

  .karupre-compare__reduction {
    top: 10px;
    padding: 8px 11px;
    gap: 2px;
  }

  .karupre-compare__reduction-prefix,
  .karupre-compare__reduction-suffix { font-size: 16px; }
  .karupre-compare__reduction-number { font-size: 36px; }

  .karupre-login-sent {
    padding: 12px;
  }

  .karupre-login-sent__dialog {
    padding: 28px 18px 20px;
  }

  .karupre-login-sent__dialog h2 {
    margin-right: 40px;
    font-size: 22px;
  }

  .karupre-checkout-confirm {
    padding: 12px;
  }

  .karupre-checkout-confirm__dialog {
    max-height: 92vh;
    padding: 24px 16px 18px;
  }

  .karupre-checkout-confirm__dialog h2 {
    margin-right: 40px;
    font-size: 19px;
  }

  .karupre-checkout-confirm__details > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .karupre-checkout-confirm__actions {
    flex-direction: column-reverse;
  }

  .karupre-checkout-confirm__actions .karupre-button {
    width: 100%;
  }

  .karupre-tool--hero .karupre-upload-panel { max-width: none; }
  .karupre-tool__inner {
    width: min(100% - 24px, 1120px);
  }

  .karupre-tool--hero .karupre-hero-shell {
    padding: 36px 0 86px;
  }

  .karupre-drop {
    min-height: 350px;
    padding: 28px 15px 19px;
  }

  .karupre-drop__plan-status {
    left: 16px;
  }

  .karupre-drop__icon {
    width: 76px;
    height: 76px;
  }

  .karupre-drop__icon svg {
    width: 45px;
    height: 45px;
  }

  .karupre-drop__catch,
  .karupre-drop__title {
    font-size: 19px;
  }

  .karupre-tool--image-convert .karupre-drop__catch {
    font-size: 22px;
  }

  .karupre-format-chip {
    padding: 6px 8px;
    font-size: 11px;
  }

  .karupre-options {
    align-items: flex-start;
    margin-top: 12px;
  }

  .karupre-options__controls {
    width: 100%;
    margin-left: 0;
  }

  .karupre-option-chip {
    max-width: 100%;
  }

  .karupre-option-chip select {
    min-width: 108px;
  }

  .karupre-option-chip--conversion {
    width: 100%;
    justify-content: center;
  }

  .karupre-options__row--additional {
    align-items: stretch;
  }

  .karupre-option-chip--ratio,
  .karupre-option-chip--metadata,
  .karupre-option-chip--custom-size,
  .karupre-option-chip--transform {
    flex: 1 1 100%;
    width: 100%;
    justify-content: space-between;
  }

  .karupre-option-chip--transform {
    flex-wrap: wrap;
  }

  .karupre-option-chip--transform > label {
    flex: 1 1 140px;
  }

  .karupre-option-chip--transform select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .karupre-custom-size {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .karupre-crop-viewport {
    padding: 14px;
  }

  .karupre-crop-card__actions {
    flex-direction: column;
  }

  .karupre-crop-card__actions .karupre-button {
    width: 100%;
  }

  .karupre-option-chip--conversion .karupre-conversion-field {
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .karupre-option-chip--conversion .karupre-conversion-field select {
    width: 100%;
    min-width: 0;
    border-left: 0;
    border-top: 1px solid #e6ebf1;
    padding-left: 6px;
  }

  .karupre-option-chip--conversion .karupre-conversion-field__label {
    text-align: center;
  }

  .karupre-conversion-arrow {
    margin-top: 16px;
  }

  .karupre-ai-card__header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 13px 12px;
  }

  .karupre-ai-card__header-status {
    gap: 7px;
  }

  .karupre-ai-card__type-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .karupre-ai-card__type-icon svg {
    width: 25px;
    height: 25px;
  }

  .karupre-ai-card__character {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    margin: -5px 0;
  }

  .karupre-ai-card__header strong {
    font-size: 17px;
  }

  .karupre-ai-card__status {
    max-width: 100%;
    font-size: 11px;
    text-align: left;
  }

  .karupre-ai-steps {
    gap: 4px;
    padding: 14px 10px 8px;
  }

  .karupre-ai-step {
    gap: 5px;
  }

  .karupre-ai-step > span {
    width: 23px;
    height: 23px;
    font-size: 10px;
  }

  .karupre-ai-step strong {
    font-size: 9px;
    white-space: normal;
  }

  .karupre-ai-compare {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .karupre-ai-preview__stage {
    height: auto;
    min-height: 0;
  }

  .karupre-ai-preview__placeholder {
    min-height: 260px;
  }

  .karupre-ai-card__message {
    margin-right: 12px;
    margin-left: 12px;
  }

  .karupre-ai-card__actions {
    padding: 10px 12px 14px;
  }

  .karupre-ai-card__actions .karupre-button {
    width: 100%;
  }

  .karupre-tool--hero .karupre-results {
    margin-top: -40px;
  }

  .karupre-results__header {
    min-height: 74px;
    padding: 13px 12px;
  }

  .karupre-results__heading strong {
    font-size: 17px;
  }

  .karupre-results__heading span {
    font-size: 12px;
  }

  .karupre-button--zip,
  .karupre-button--queue {
    padding: 8px 10px;
    font-size: 12px;
  }

  .karupre-button--zip span,
  .karupre-button--queue span {
    display: none;
  }

  .karupre-file {
    grid-template-columns: 65px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 78px;
    padding: 4px 9px;
  }

  .karupre-file__preview {
    width: 61px;
    height: 61px;
  }

  .karupre-file__name {
    font-size: 16px;
  }

  .karupre-file__result {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    gap: 7px;
    min-width: 0;
    margin-top: -2px;
  }

  .karupre-file__saving {
    font-size: 16px;
  }

  .karupre-file__actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-width: auto;
  }

  .karupre-file__action--download {
    min-width: 76px;
    padding: 7px 9px;
    font-size: 14px;
  }

  .karupre-file__remove {
    display: none;
  }

  .karupre-results__footer {
    justify-content: stretch;
  }

  .karupre-results__pro-copy {
    display: none;
  }

  .karupre-results__pro {
    width: 100%;
  }

  .karupre-account-card,
  .karupre-mypage .karupre-account-card {
    padding: 20px 16px;
  }

  .karupre-account-card.karupre-account-card--login {
    width: calc(100% - 24px);
    margin: 36px auto;
    padding: 36px 20px 40px;
  }

  .karupre-account-card--login h2 {
    font-size: 22px;
  }

  .karupre-login-submit {
    min-height: 56px;
    padding: 16px 18px;
  }

  .karupre-usage-grid {
    grid-template-columns: 1fr;
  }

  .karupre-mypage__row {
    display: block;
  }

  .karupre-mypage__row strong {
    display: block;
    margin-top: 4px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .karupre-upload-panel__peek { display: none; }
  .karupre-drop,
  .karupre-drop__icon,
  .karupre-file__progress span,
  .karupre-file__action,
  .karupre-results__pro {
    transition: none;
  }
}

/* Processing character */
.karupre-results__status {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.karupre-results__character {
  display: grid;
  flex: 0 0 96px;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: -10px 0;
  overflow: hidden;
}

.karupre-results__character[hidden] {
  display: none !important;
}

.karupre-results__character img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.karupre-results__character[data-state="compressing"],
.karupre-results__character[data-state="converting"],
.karupre-results__character[data-state="preparing"] {
  animation: karupre-character-working 1.45s ease-in-out infinite;
}

.karupre-results__character[data-state="complete"] {
  animation: karupre-character-complete .42s ease-out 1;
}

@keyframes karupre-character-working {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes karupre-character-complete {
  0% { transform: scale(.92); opacity: .75; }
  70% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Free limit -> Pro guidance modal */
.karupre-modal-open {
  overflow: hidden;
}

.karupre-limit-modal {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.karupre-limit-modal[hidden] {
  display: none !important;
}

.karupre-limit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 48, .58);
  backdrop-filter: blur(2px);
}

.karupre-limit-modal__dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 30px;
  border: 1px solid #dbe4ef;
  border-radius: 14px;
  outline: 0;
  background: #fff;
  box-shadow: 0 24px 70px rgba(17, 38, 66, .24);
}

.karupre-limit-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f5f8;
  color: #5f6f82;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.karupre-limit-modal__close:hover,
.karupre-limit-modal__close:focus-visible {
  background: #e7edf5;
  color: #25344a;
}

.karupre-limit-modal__eyebrow {
  display: block;
  margin: 0 42px 8px 0;
  color: var(--karupre-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.karupre-limit-modal__dialog h3 {
  margin: 0 42px 12px 0;
  color: var(--karupre-text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
}

.karupre-limit-modal__lead,
.karupre-limit-modal__detail {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.75;
}

.karupre-limit-modal__detail {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f4f8fd;
  color: #334155;
  font-weight: 650;
}

.karupre-limit-modal__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 10px;
  margin-top: 22px;
}

.karupre-limit-modal__actions .karupre-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  text-align: center;
  text-decoration: none;
}

.karupre-limit-modal__actions [hidden] {
  display: none !important;
}

@media (max-width: 780px) {
  .karupre-results__status {
    gap: 9px;
  }

  .karupre-results__character {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
    margin: -5px 0;
  }

  .karupre-limit-modal {
    align-items: end;
    padding: 12px;
  }

  .karupre-limit-modal__dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    padding: 26px 18px 18px;
    border-radius: 14px;
  }

  .karupre-limit-modal__dialog h3 {
    font-size: 21px;
  }

  .karupre-limit-modal__actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .karupre-results__character[data-state="compressing"],
  .karupre-results__character[data-state="converting"],
  .karupre-results__character[data-state="preparing"],
  .karupre-results__character[data-state="complete"],
  .karupre-ai-preview__placeholder > img {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .karupre-drop.is-ai-loading .karupre-drop__icon::before { animation-duration: 1.6s; }
}