:root {
  color-scheme: dark;
  font-family: Arial, "Malgun Gothic", sans-serif;
}

.fashion-free-notice { color-scheme: light; width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #ddd; border-radius: 12px; color: #222; background: #fff; box-shadow: 0 6px 30px #0005; }
.fashion-free-notice::backdrop { background: #0009; }
.fashion-free-notice h2 { margin: 0; padding: 15px 20px; border-bottom: 1px solid #eee; font-size: 16px; }
.fashion-free-notice p { margin: 0; padding: 24px 20px; line-height: 1.6; }
.fashion-free-notice footer { padding: 0 20px 16px; text-align: right; }
.fashion-free-notice button { padding: 7px 16px; border: 1px solid #222; border-radius: 6px; color: #fff; background: #333; }

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

button, input { font: inherit; }
button { cursor: pointer; }

.fashion-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #000;
}

.fashion-stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  background: #111;
  user-select: none;
  touch-action: none;
}

#fashionCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fashion-stage.is-zoom-tweening #fashionCanvas,
.fashion-stage.is-zoom-tweening .fashion-ui {
  transition: transform var(--zoom-transition-duration, 300ms) ease;
}

.fashion-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  transform: scale(var(--stage-scale, 1)) translate(var(--zoom-x, 0px), var(--zoom-y, 0px)) scale(var(--zoom-scale, 1));
  transform-origin: left top;
  pointer-events: none;
}

.zoom-mode-panel {
  position: absolute;
  z-index: 200;
  left: 0;
  top: 0;
  width: 146.5px;
  height: 678px;
  transform: scale(var(--stage-scale, 1));
  transform-origin: left top;
  border-radius: 0 20px 20px 0;
  color: #fff;
  background: rgba(0,0,0,.82);
  pointer-events: auto;
}
.zoom-mode-panel[hidden] { display: none !important; }
.zoom-mode-panel h2 { position: absolute; left: 2px; top: 23px; margin: 0; font: 26px/32px Arial,sans-serif; white-space: nowrap; }
.zoom-mode-panel button { position: absolute; margin: 0; padding: 0; border: 0; color: #fff; background: transparent; }
.zoom-mode-panel .zoom-arrow { width: 97px; height: 97px; }
.zoom-mode-panel .zoom-arrow img { width: 97px; height: 97px; object-fit: contain; }
.zoom-up { left: 26.5px; top: 61px; }
.zoom-left { left: -11.5px; top: 140.5px; }
.zoom-right { left: 59.5px; top: 140.5px; }
.zoom-down { left: 26.5px; top: 217.5px; }
/* The full-panel layout wrapper must not intercept the pan arrows below it. */
.zoom-levels { position: absolute; inset: 0; pointer-events: none; }
.zoom-levels button {
  pointer-events: auto;
  width: 45px;
  height: 45px;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%,#ffd8c7 0,#ff9c84 30%,#ff47b4 72%,#ff13ae 100%);
  box-shadow: 0 0 3px #ffb02e;
  font: 15px/41px Arial,sans-serif;
  text-align: center;
}
.zoom-levels button.is-active { border: 4px solid #00ff62; line-height: 37px; box-shadow: 0 0 5px #00ff62; }
.zoom-levels button:nth-child(1) { left: 25.5px; top: 337px; }
.zoom-levels button:nth-child(2) { left: 85.5px; top: 337px; }
.zoom-levels button:nth-child(3) { left: 25.5px; top: 402px; }
.zoom-levels button:nth-child(4) { left: 85.5px; top: 402px; }
.zoom-levels button:nth-child(5) { left: 25.5px; top: 465px; }
.zoom-levels button:nth-child(6) { left: 85.5px; top: 465px; }
.zoom-out {
  left: 42px;
  top: 542px;
  width: 65px;
  height: 65px;
  border: 3px solid #ffb12e !important;
  border-radius: 13px !important;
  background: linear-gradient(#ffbe6e,#ff4b22 65%,#f50912) !important;
  box-shadow: 0 0 5px #fff;
}
.zoom-out span { display: block; height: 39px; font: 38px/39px Arial,sans-serif; }
.zoom-out b { display: block; font: 12px/14px Arial,sans-serif; }

.fashion-ui button,
.fashion-ui input,
.fashion-ui label,
.fashion-ui summary,
.fashion-ui details { pointer-events: auto; }

.legacy-button {
  min-height: 28px;
  padding: 4px 13px;
  border: 1px solid #fff;
  border-radius: 11px;
  color: #552089;
  background: linear-gradient(#fff, #cbb0ff 60%, #a782ec);
  box-shadow: 0 1px 3px #3d176c;
  white-space: nowrap;
}

.legacy-button:hover,
.legacy-button.is-active { background: linear-gradient(#fff, #ffb8f2 60%, #f079d1); }
.legacy-button:focus-visible { outline: 3px solid #ff4fca; outline-offset: 2px; }

.top-toolbar {
  position: absolute;
  top: 8px;
  left: 410px;
  display: flex;
  gap: 9px;
  align-items: center;
}

.top-toolbar .round { width: 38px; min-width: 38px; padding: 0; border-radius: 50%; }

.auto-position {
  position: absolute;
  top: 12px;
  right: 50px;
  display: flex;
  gap: 5px;
  align-items: center;
  color: #6e338e;
  font-weight: 700;
  text-shadow: 0 1px #fff;
}

.close-button {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 32px;
  min-width: 32px;
  padding: 0;
  font-size: 20px;
}

.show-box {
  position: absolute;
  inset: 0 auto 0 0;
  width: 350px;
  padding: 12px 12px 42px;
  color: #5a267c;
  background: linear-gradient(90deg, rgba(238,225,255,.72), rgba(211,188,246,.62));
  border-right: 2px solid rgba(255,255,255,.9);
  transition: transform .2s ease;
}

.show-box.is-folded { transform: translateX(-318px); }
.show-tabs { display: flex; gap: 5px; padding-left: 22px; }
.show-tabs button { flex: 1; font-weight: 700; }
.panel-title { margin: 10px 0 7px; text-align: center; font-size: 17px; }
.show-panel { height: 615px; }
.show-panel[hidden] { display: none; }

.tip-spacer { height: 495px; pointer-events: none; }
.tip-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}
.tip-list button {
  height: 58px;
  padding: 2px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(255,255,255,.8);
}
.tip-list button.is-active { border-color: transparent; }
.tip-list img { width: 100%; height: 100%; object-fit: contain; }
.save-model { width: 100%; font-weight: 700; }

.room-list {
  height: 400px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid #a485c8;
  border-radius: 9px;
  background: rgba(255,255,255,.65);
}
.room-list button {
  display: flex;
  width: 100%;
  margin-bottom: 3px;
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  color: #5a267c;
  background: rgba(255,255,255,.72);
}
.room-list button.is-active { color: #fff; background: #af62d2; }
.room-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 8px 0; }
.color-row { display: grid; grid-template-columns: 80px 1fr; gap: 7px; align-items: center; margin: 8px 0; }
.color-row input[type="color"] { width: 100%; height: 32px; border: 0; }

.fold-button {
  position: absolute;
  right: -22px;
  top: 325px;
  width: 23px;
  min-width: 23px;
  height: 70px;
  padding: 0;
  border-radius: 0 12px 12px 0;
}

.bottom-toolbar {
  position: absolute;
  left: 510px;
  bottom: 12px;
  display: flex;
  gap: 9px;
}

.group-panel {
  position: absolute;
  top: 67px;
  right: 12px;
  width: 310px;
  height: 600px;
  padding: 10px;
  color: #562477;
  border: 2px solid #fff;
  border-radius: 18px;
  background: rgba(224,204,250,.94);
  box-shadow: 0 2px 8px #3e1b5e;
}
.group-panel[hidden] { display: none; }
.category-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.category-tabs button { padding-inline: 4px; }
.item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  height: 475px;
  margin-top: 8px;
  padding: 7px;
  overflow-y: auto;
  border-radius: 10px;
  background: rgba(255,255,255,.68);
}
.item-grid button {
  position: relative;
  min-height: 112px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #c09bdc;
  border-radius: 8px;
  background: #fff;
}
.item-grid img { width: 100%; height: 100%; object-fit: contain; }
.item-grid span { position: absolute; right: 3px; bottom: 2px; color: #6c3c82; font-size: 10px; }
.move-controls { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }

.fashion-info {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 250px;
  color: #5e267a;
  border: 1px solid #caa0e2;
  border-radius: 10px;
  background: rgba(255,255,255,.94);
}
.fashion-info summary { padding: 7px 12px; cursor: pointer; font-weight: 700; }
.fashion-info div { padding: 0 12px 10px; line-height: 1.5; }

.status-message,
.toast {
  position: absolute;
  left: 50%;
  padding: 9px 16px;
  transform: translateX(-50%);
  border-radius: 18px;
  color: #fff;
  background: rgba(53,20,76,.85);
  pointer-events: none;
}
.status-message { top: 48%; }
.toast { bottom: 65px; opacity: 0; transition: opacity .2s; }
.toast.is-visible { opacity: 1; }
.file-input { display: none; }

@media (prefers-reduced-motion: reduce) {
  .show-box, .toast { transition: none; }
}

/* Legacy Animate UI parity layer. Extracted MovieClips are rendered at 2× and
   displayed in the original 1280×720 logical coordinate system. */
.legacy-logo {
  position: absolute; z-index: 45; left: 2px; top: 1px;
  width: 60px; height: 35px; object-fit: contain; pointer-events: none;
}

.show-box {
  z-index: 20; width: 420px; padding: 0; color: #592477;
  border: 0; background: none; overflow: visible; transition: none;
}
.show-box.wide-active { transform: translateX(-72.2px); }
.show-box.wide-active.is-folded { transform: translateX(-402.2px); }
.show-box:not(.wide-active) .fold-button { display: none; }
.show-box-skin { position: absolute; z-index: 0; left: 6px; top: 29px; width: 352px; height: 695px; pointer-events: none; }
.room-skin { object-fit: fill; }
.tip-canvas { position: absolute; z-index: 1; left: 0; top: 0; width: 360px; height: 720px; pointer-events: none; }
.show-tabs {
  position: absolute; z-index: 5; left: 61px; top: -3px; width: 271px; height: 42px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0;
  background: url('/nfashion/fashion-html5/ui/style-tabs-tip.png') center/271px 42px no-repeat;
}
.show-box.room-active .show-tabs { background-image: url('/nfashion/fashion-html5/ui/style-tabs-room.png'); }
.show-tabs button {
  min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0;
  color: transparent; background: transparent !important; box-shadow: none;
}
.show-panel { position: absolute; z-index: 4; left: 0; top: 0; width: 410px; height: 720px; }
.tip-spacer { display: none; }
.tip-list {
  position: absolute; left: 348px; top: 318.5px; width: 62px; height: 333px;
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  background: url('/nfashion/fashion-html5/ui/tip-thumbnail-frame-clean.png') center/62px 333px no-repeat;
}
.tip-list button { position: relative; flex: 0 0 58px; width: 36px; height: 58px; padding: 4px; overflow: visible; border: 0; border-radius: 5px; background: transparent; }
.tip-list button.is-active { box-shadow: none; }
.tip-list button.is-active::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #a96cff;
  transform: translateY(-50%);
  filter: drop-shadow(0 1px 1px rgba(80, 31, 145, .35));
}
.tip-list img { display: block; width: 28px; height: 50px; object-fit: contain; object-position: center; }
.save-model {
  position: absolute; left: 109px; top: 697px; width: 146px !important; height: 23px;
  min-height: 0; padding: 0; border: 0; color: transparent; background: transparent !important; box-shadow: none;
}

/* Saved outfits are draggable previews; controls stay above their canvas. */
.show-box.room-active .tip-canvas { pointer-events: auto; touch-action: none; }
#roomPanel .save-model {
  z-index: 10;
  background: url('/nfashion/fashion-html5/ui/style-save-model.png') center / 150px 28px no-repeat !important;
}

.fold-button {
  z-index: 7; right: 76px; top: 44px; width: 34px; min-width: 34px; height: 34px;
  border: 0; border-radius: 0; color: transparent; font-size: 0;
  background: url('/nfashion/fashion-html5/ui/panel-fold.png') center/38px 46px no-repeat !important; box-shadow: none;
}
.show-box.is-folded .fold-button { background-image: url('/nfashion/fashion-html5/ui/panel-open.png') !important; }
.show-box.wide-active.is-folded .fold-button {
  left: 401px;
  right: auto;
  top: 446px;
}
.panel-slide, .color-toggle { position: absolute; z-index: 8; padding: 0; border: 0; background: transparent; }
.panel-slide { left: 347px; top: 199px; width: 72px; height: 97px; }
.panel-slide img { position: absolute; left: 50%; top: 50%; width: 47px; height: 79px; transform: translate(-50%,-50%); }
.panel-slide:hover img { width: 72px; height: 97px; content: url('/nfashion/fashion-html5/ui/style-add-hover.png'); }
.show-box:not(.room-active) .panel-slide { opacity: .5; }
.color-toggle { left: 358px; top: 81px; width: 52px; height: 84px; }
.color-toggle img { position: absolute; left: 50%; top: 50%; width: 50px; height: 71px; transform: translate(-50%,-50%); }
.color-toggle:hover img { width: 52px; height: 84px; content: url('/nfashion/fashion-html5/ui/color-button-hover.png'); }
.show-box.is-folded .panel-slide { left: 350px; transform: scaleX(-1); }
.tip-nav { position: absolute; z-index: 9; top: 673px; width: 53px; height: 52px; padding: 0; border: 0; background: transparent; overflow: visible; }
.tip-nav img { width: 53px; height: 52px; object-fit: contain; }
.tip-nav.previous { left: -7px; transform: scaleX(-1); }
.tip-nav.next { left: 315px; }
.show-box.room-active .tip-nav { display: none; }
.color-palette { position: absolute; z-index: 50; left: 189.65px; top: 192.75px; width: 247px; height: 215px; pointer-events: auto; }
.color-palette .palette-frame { position: absolute; z-index: 1; inset: 0; width: 247px; height: 215px; pointer-events: none; }
.color-palette .palette-spectrum { position: absolute; z-index: 2; left: 16px; top: 33.5px; width: 195px; height: 128px; cursor: crosshair; user-select: none; touch-action: none; }
.color-palette input[type="color"] { position: absolute; left: 22px; top: 52px; width: 180px; height: 125px; opacity: 0; pointer-events: none; }
.color-palette input[type="range"] { position: absolute; z-index: 4; left: 79.5px; top: 160px; width: 112px; height: 24px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; touch-action: none; }
.color-palette input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: transparent; }
.color-palette input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 13px; margin-top: -6px; border: 0; background: url('ui/palette-flower.png') center/contain no-repeat; }
.color-palette input[type="range"]::-moz-range-track { height: 1px; background: transparent; }
.color-palette input[type="range"]::-moz-range-thumb { width: 12px; height: 13px; border: 0; background: url('ui/palette-flower.png') center/contain no-repeat; }
.palette-crosshair { position: absolute; z-index: 4; width: 7px; height: 7px; transform: translate(-50%,-50%); pointer-events: none; }
.palette-crosshair::before, .palette-crosshair::after { content: ''; position: absolute; background: #111; }
.palette-crosshair::before { left: 3px; top: 0; width: 1px; height: 7px; }
.palette-crosshair::after { left: 0; top: 3px; width: 7px; height: 1px; }
.palette-shade { position: absolute; z-index: 3; left: 211px; top: 33.5px; width: 25px; height: 128px; cursor: crosshair; touch-action: none; }
.palette-shade span { position: absolute; left: 0; width: 100%; height: 0; pointer-events: none; }
.palette-shade span::before, .palette-shade span::after { content: ''; position: absolute; top: -3px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.palette-shade span::before { left: 0; border-left: 5px solid #ff3030; }
.palette-shade span::after { right: 0; border-right: 5px solid #ff3030; }
.palette-swatch { position: absolute; z-index: 3; left: 166px; top: 13px; width: 17px; height: 17px; border-radius: 50%; pointer-events: none; }
.palette-alpha-value { position: absolute; z-index: 3; left: 192px; top: 166px; width: 33px; color: #222; text-align: center; font: 14px/18px Arial, sans-serif; pointer-events: none; }
.palette-crosshair[hidden], .palette-shade span[hidden] { display: none; }
.color-palette button { position: absolute; z-index: 3; right: 9px; top: 8px; width: 27px; height: 27px; border: 0; background: transparent; }
.color-palette.is-dragging { cursor: grabbing; }
.color-palette[hidden] { display: none !important; }
.legacy-room-tools { display: none; }
.room-slot-list {
  position: absolute; left: 348px; top: 316px; width: 62px; height: 333px;
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  background: url('/nfashion/fashion-html5/ui/tip-thumbnail-frame-clean.png') center/62px 333px no-repeat;
}
.room-slot-list button { position: relative; flex: 0 0 58px; width: 36px; height: 58px; padding: 0; overflow: visible; border: 0; background: transparent; }
.room-slot-list button.is-active::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #f66fdb;
}
.room-slot-list canvas { width: 36px; height: 58px; object-fit: contain; }
.style-delete, .style-apply { position: absolute; z-index: 9; padding: 0; border: 0; background: transparent; }
.style-delete { left: 343px; top: 639px; width: 75px; height: 75px; }
.style-delete img { width: 75px; height: 75px; }
.style-apply { left: 279px; top: 181px; width: 75px; height: 119px; }
.style-apply img { width: 75px; height: 119px; }
.show-box:not(.room-active) .style-delete, .show-box:not(.room-active) .style-apply { display: none; }
.style-delete[hidden], .style-apply[hidden] { display: none !important; }
.room-list { position: absolute; left: 35px; top: 100px; width: 285px; height: 420px; }
.room-actions { position: absolute; left: 35px; top: 530px; width: 285px; }
.color-row { position: relative; left: 35px; top: 570px; width: 285px; }
.panel-title { position: absolute; left: 75px; top: 53px; width: 210px; }

.pc-model-change { position: absolute; z-index: 210; left: calc(1180px * var(--stage-scale, 1)); top: 0; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: scale(var(--stage-scale, 1)); transform-origin: top left; }
.pc-model-change img { display: block; width: 100%; height: 100%; }
.pc-model-change:hover { filter: brightness(1.1); }
.pc-model-change:focus-visible { outline: 3px solid #ff4fca; outline-offset: 1px; }
.fashion-stage:has(.controls-hidden) .pc-model-change { display: none; }
.pc-favorites { color-scheme: light; width: min(1020px, calc(100vw - 32px)); max-width: none; height: min(650px, calc(100dvh - 32px)); max-height: none; padding: 0; border: 2px solid #b695ed; border-radius: 22px; color: #513c75; background: #f8f2ff; box-shadow: 0 8px 40px #24133a66; overflow: hidden; }
.pc-favorites::backdrop { background: #1d083180; }
.pc-favorites-layout { height: 100%; display: flex; flex-direction: column; }
.pc-favorites header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: #e5d5fc; }
.pc-favorites h2 { margin: 0; font-size: 21px; }
.pc-favorites button, .pc-favorites select { font: inherit; color: #513c75; background: #fff; border: 1px solid #bca2e4; border-radius: 9px; padding: 7px 16px; }
.pc-favorites header button { border: 0; background: transparent; font-size: 30px; padding: 0 5px; line-height: 1; }
.pc-favorites button:disabled { opacity: .4; cursor: default; }
.pc-favorites :focus-visible { outline: 3px solid #b653cc; outline-offset: 2px; }
.pc-favorites-tools { display: flex; align-items: center; gap: 12px; padding: 12px 20px 0; }
.pc-favorites select { width: min(300px, 70%); }
#pcFavoritesNote { margin: 9px 20px 12px; font-size: 12px; line-height: 1.5; }
.pc-favorites-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 3px 20px 12px; }
.pc-favorites-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.pc-favorites-grid a { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 7px 5px; border: 1px solid #e1d3ef; border-radius: 12px; color: #513c75; text-decoration: none; background: #fff; }
.pc-favorites-grid a:hover { border-color: #b653cc; background: #f5eaff; }
.pc-favorites-grid img { width: 100%; height: 100px; object-fit: contain; }
.pc-favorites-grid span { width: 100%; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 12px; }
.pc-favorites footer { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 20px; border-top: 1px solid #e1d3ef; }
@media (max-width: 800px) { .pc-favorites-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pc-favorites-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pc-favorites h2 { font-size: 16px; } }

.top-toolbar { z-index: 40; inset: 0; display: block; pointer-events: none; }
.top-toolbar img { position: absolute; pointer-events: none; }
.background-button-skin { left: 349px; top: -4px; width: 447px; height: 29px; }
.fullscreen-skin { left: 499px; top: -6px; width: 152px; height: 54px; }
.reload-skin { left: 800px; top: -8px; width: 52px; height: 52px; }
.top-toolbar button {
  position: absolute; z-index: 2; min-width: 0; min-height: 0; padding: 0;
  border: 0; color: transparent; background: transparent !important; box-shadow: none; pointer-events: auto;
}
.top-toolbar button[data-action="high-quality"] { left: 349px; top: 0; width: 150px; height: 24px; }
.top-toolbar button[data-action="fullscreen"] { left: 499px; top: 0; width: 152px; height: 34px; }
.top-toolbar button[data-action="background"] { left: 642px; top: 0; width: 150px; height: 24px; }
.top-toolbar button[data-action="reset"] { left: 800px; top: 0; width: 52px; height: 45px; }
.fashion-ui.mode-group .reload-skin,
.fashion-ui.mode-group .top-toolbar button[data-action="reset"],
.fashion-ui.mode-group .auto-position { display: none; }
.fashion-ui.mode-wide .legacy-logo { display: none; }
.auto-position { z-index: 41; left: 901px; right: auto; top: -2px; width: 277px; height: 28px; color: transparent; }
.auto-position img { position: absolute; inset: 0; width: 277px; height: 28px; }
.auto-position input { position: absolute; left: 7px; top: 6px; width: 18px; height: 18px; opacity: 0; }
.auto-position span { visibility: hidden; }
.close-button { z-index: 42; left: 1224px; right: auto; top: -13px; width: 67px; height: 67px; padding: 0; border: 0; background: transparent !important; box-shadow: none; }
.close-button img { width: 67px; height: 67px; }

.bottom-toolbar { z-index: 30; left: 405px; top: 615px; bottom: auto; width: 358px; height: 127px; display: block; }
.fashion-ui.mode-wide .bottom-toolbar { left: 657.5px; }
.bottom-control-skin { display: none; }
.bottom-toolbar button { position: absolute; padding: 0; border: 0; color: transparent; background: transparent !important; box-shadow: none; }
.bottom-toolbar button[data-action="mode"] { left: 89px; top: 76px; width: 186px; height: 30px; }
.bottom-toolbar button[data-action="zoom"] { left: 285px; top: 65px; width: 72px; height: 50px; }
.bottom-toolbar button[data-action="shortcut"] { left: 0; top: 65px; width: 74px; height: 61px; }
.bottom-toolbar button[data-action="shortcut"],
.bottom-toolbar button[data-action="mode"],
.bottom-toolbar button[data-action="zoom"] {
  background-image: url('/nfashion/fashion-html5/ui/bottom-controls-wide.png') !important;
  background-repeat: no-repeat !important;
  background-size: 358px 127px !important;
}
.fashion-ui.mode-wide .bottom-toolbar button[data-action="shortcut"],
.fashion-ui.mode-wide .bottom-toolbar button[data-action="mode"],
.fashion-ui.mode-wide .bottom-toolbar button[data-action="zoom"] { background-image: url('/nfashion/fashion-html5/ui/bottom-controls-group.png') !important; }
.bottom-toolbar button[data-action="shortcut"] { background-position: 0 -65px !important; }
.bottom-toolbar button[data-action="mode"] { background-position: -89px -76px !important; }
.bottom-toolbar button[data-action="zoom"] { background-position: -285px -65px !important; }
.bottom-toolbar span { visibility: hidden; }

.group-panel {
  z-index: 18; left: 840px; right: auto; top: 7px; width: 388px; height: 710px;
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
}
.group-frame-skin, .group-shelf-skin { position: absolute; inset: 0; width: 388px; height: 710px; object-fit: fill; pointer-events: none; }
.group-frame-skin { z-index: 0; } .group-shelf-skin { z-index: 1; }
.category-tabs {
  position: absolute; z-index: 5; left: 376px; top: 79px; width: 80px; height: 550px;
  display: flex; flex-direction: column; gap: 0;
}
.category-tabs button.legacy-button {
  /* Original itemBtn_mc instances are 82.8 logical pixels apart.
     Keep the extraction's transparent padding; override generic hover shorthand. */
  position: relative; flex: 0 0 110px; width: 80px; min-height: 0; padding: 0; margin-bottom: -27.2px;
  border: 0; border-radius: 0; color: transparent; background-color: transparent !important;
  background-position: center; background-repeat: no-repeat; background-size: 80px 110px; box-shadow: none;
}
.category-tabs button span { position: absolute; left: 0; top: 63px; width: 80px; color: #fff; font: bold 12px/15px Arial, sans-serif; text-align: center; }
.category-tabs button[data-category="h"] { background-image: url('/nfashion/fashion-html5/ui/category-h-off.png'); }
.category-tabs button[data-category="u"] { background-image: url('/nfashion/fashion-html5/ui/category-u-off.png'); }
.category-tabs button[data-category="d"] { background-image: url('/nfashion/fashion-html5/ui/category-d-off.png'); }
.category-tabs button[data-category="o"] { background-image: url('/nfashion/fashion-html5/ui/category-o-off.png'); }
.category-tabs button[data-category="s"] { background-image: url('/nfashion/fashion-html5/ui/category-s-off.png'); }
.category-tabs button.is-active[data-category="h"] { background-image: url('/nfashion/fashion-html5/ui/category-h-on.png'); }
.category-tabs button.is-active[data-category="u"] { background-image: url('/nfashion/fashion-html5/ui/category-u-on.png'); }
.category-tabs button.is-active[data-category="d"] { background-image: url('/nfashion/fashion-html5/ui/category-d-on.png'); }
.category-tabs button.is-active[data-category="o"] { background-image: url('/nfashion/fashion-html5/ui/category-o-on.png'); }
.category-tabs button.is-active[data-category="s"] { background-image: url('/nfashion/fashion-html5/ui/category-s-on.png'); }
.item-grid {
  position: absolute; z-index: 3; left: 0; top: 0; width: 380px; height: 700px;
  display: block; margin: 0; padding: 0; overflow: hidden; border-radius: 0; background: transparent;
}
.item-grid button.item-entry {
  position: absolute; z-index: 2; min-width: 0; min-height: 0; padding: 0; border: 0;
  border-radius: 0; background: transparent; overflow: visible; transform-origin: center;
}
.item-grid button.item-entry img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.item-grid button.item-entry span {
  position: absolute; left: 50%; top: calc(100% + 2px); right: auto; bottom: auto;
  min-width: 18px; transform: translateX(-50%); color: #8a087a; font: 9px Arial,sans-serif; text-align: center;
}
.item-grid button.item-entry span { display: none; }
.item-grid button.item-entry.is-used { opacity: .2; }
.item-grid img.hair-mannequin {
  position: absolute; z-index: 1; width: 72.9px; height: 131.9px; pointer-events: none;
}
.item-grid button.hair-mannequin-target {
  position: absolute; z-index: 1; width: 72.9px; height: 131.9px;
  min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.item-grid button.hair-mannequin-target:disabled { cursor: default; }
.item-grid button.hair-mannequin-target:focus-visible { outline: 2px solid #ff4fae; }
.item-grid img.item-hanger {
  position: absolute; z-index: 1; width: 110px; height: 80px; object-fit: contain; pointer-events: none;
}
.group-page { position: absolute; z-index: 25; top: 646px; width: 62px; height: 60px; border: 0; color: transparent; background: url('/nfashion/fashion-html5/ui/arrow-left.png') center/70px 60px no-repeat; }
.group-page.previous { left: -48px; transform: scaleX(-1); } .group-page.next { right: -48px; }
.group-instruction {
  position: absolute;
  z-index: 6;
  left: 98px;
  top: 26px;
  width: 192px;
  color: #777;
  font: 11px/14px Georgia, serif;
  text-align: center;
  pointer-events: none;
}
.page-indicator {
  position: absolute;
  z-index: 7;
  left: 120px;
  top: 7px;
  width: 150px;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  color: #ff4fae;
  text-align: center;
}
.page-indicator button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #ffa3d3;
  font: 9px/11px Arial, sans-serif;
}
.page-indicator button.is-active {
  width: 14px; height: 14px; line-height: 14px;
  color: #fff; background: #ff168f;
  font-weight: 700;
}
.page-indicator span { color: #ffb2d7; letter-spacing: 3px; }

.selected-strip { position: absolute; z-index: 19; left: 770px; top: -19px; width: 87px; height: 706px; transform: scale(.95); transform-origin: left top; }
.selected-strip > img { position: absolute; inset: 0; width: 87px; height: 706px; pointer-events: none; }
#selectedStripItems { position: absolute; left: 16px; top: 54px; width: 48px; height: 546.4px; overflow: hidden; padding: 4px 0 0 8px; }
#selectedStripItems button { position: relative; display: block; width: 36px; height: 58px; margin-bottom: 9.8px; padding: 2px; border: 1px solid #fff; border-radius: 6px; background: linear-gradient(#fff, #e0d9e8 90%, #c6bcd4); }
#selectedStripItems button:disabled { opacity: 1; cursor: default; }
#selectedStripItems img { width: 100%; height: 100%; object-fit: contain; }
#selectedStripItems button.is-active { outline: none; border-color: #fff; }
.selected-number { position: absolute; left: -8px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #7560ff; color: white; font: bold 10px/14px Arial, sans-serif; text-align: center; }
.selected-scroll, .selected-reload { position: absolute; z-index: 4; border: 0; background: transparent; }
.selected-scroll { left: 5px; width: 72px; height: 35px; }
.selected-scroll.previous { top: 0; } .selected-scroll.next { top: 610px; }
.selected-reload { left: 8px; top: 642px; width: 72px; height: 64px; }

.floating-controls { position: absolute; z-index: 35; left: 718.7px; top: 61.8px; width: 0; height: 0; transform-origin: 0 0; }
.floating-controls button { position: absolute; width: 50.4px; height: 50.4px; padding: 0; border: 0; background: transparent; overflow: visible; transform: translate(-50%,-50%); }
.floating-controls button img { width: 50.4px; height: 50.4px; object-fit: contain; }
.floating-controls [data-action="select-toggle"] { left: -36.95px; top: -37.7px; }
.floating-controls [data-action="delete"] { left: 37.9px; top: -37.75px; }
.floating-controls [data-action="move-up"] { left: 0; top: -46px; }
.floating-controls [data-action="move-down"] { left: 0; top: 46.2px; }
.floating-controls [data-action="move-left"] { left: -38.2px; top: 1.25px; }
.floating-controls [data-action="move-right"] { left: 37.9px; top: 1.25px; }
.floating-controls [data-action="forward"] { left: -36.95px; top: 37.05px; }
.floating-controls [data-action="backward"] { left: 37.15px; top: 37px; }
.control-preview { position: absolute; left: -21px; top: -27.5px; width: 42px; height: 56px; border-radius: 7px; background: rgba(186,255,218,.88); overflow: hidden; }
.control-preview img { width: 100%; height: 100%; object-fit: contain; }
.move-controls { display: none; }
.fashion-info { display: none; }
.group-panel[hidden], .selected-strip[hidden], .floating-controls[hidden], .show-box-skin[hidden], .tip-canvas[hidden] { display: none !important; }

.shortcut-dialog { position: absolute; z-index: 100; inset: 0; display: grid; place-items: center; background: rgba(29,8,49,.48); pointer-events: auto; }
.shortcut-dialog[hidden] { display: none !important; }
.save-model-dialog {
  position: absolute; z-index: 110; left: 360px; top: 10px; width: 840px; height: 710px;
  overflow: hidden; border: 2px solid #a477ef; border-radius: 28px;
  color: #202020; background: #bea1ee; box-shadow: 0 0 8px rgba(58,25,105,.55);
  pointer-events: auto;
}
.save-model-dialog[hidden] { display: none !important; }
.save-model-dialog h2 { position: absolute; left: 445px; top: 11px; margin: 0; font: bold 18px/26px Arial, 'Malgun Gothic', sans-serif; white-space: nowrap; }
.save-dialog-close { position: absolute; z-index: 4; right: 13px; top: 6px; padding: 0; border: 0; color: #fff; background: none; font: 42px/42px Arial; }
.save-usage { position: absolute; z-index: 3; left: 292px; top: 48px; width: 530px; font: 13px/1.26 Arial, 'Malgun Gothic', sans-serif; }
.save-usage p { margin: 0 0 7px; white-space: nowrap; }
.save-usage small { display: block; margin-left: 17px; font: 10px/1.4 Arial, sans-serif; }
.save-usage p.save-usage-note { margin: 0 0 2px 17px; font-size: 11.5px; }
.save-usage .save-usage-note small { margin-left: 0; font-size: 9.5px; }
.save-usage .save-usage-reference small { margin-left: 17px; }
.save-preview { position: absolute; bottom: 5px; overflow: hidden; }
.save-preview canvas { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: none; max-height: none; }
.save-preview button { position: absolute; z-index: 2; bottom: 29px; left: 50%; transform: translateX(-50%); white-space: nowrap; min-width: 142px; height: 21px; padding: 0 7px; border: 0; border-radius: 4px; color: #fff; background: linear-gradient(#6950a6,#172450); font: 14px/21px Georgia,serif; }
.save-preview button[data-action="save-download"] { bottom: 0; height: 23px; color: #fff; background: linear-gradient(#ff79c5,#ff1380); font-size: 16px; line-height: 23px; }
.save-preview-large { left: 0; width: 320px; height: 685px; }
.save-preview-middle { left: 318px; width: 280px; height: 495px; }
.save-preview-small { left: 643px; width: 180px; height: 315px; }
.fashion-confirm { position: absolute; z-index: 120; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.56); pointer-events: auto; }
.fashion-confirm[hidden] { display: none !important; }
.fashion-confirm > div { width: 390px; overflow: hidden; border: 1px solid #d8d8d8; border-radius: 10px; color: #222; background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.38); transform: translateY(6px); }
.fashion-confirm h2 { margin: 0; padding: 12px 18px; border-bottom: 1px solid #ddd; color: #222; background: #fff; font-size: 14px; font-weight: 600; }
.fashion-confirm p { min-height: 56px; margin: 0; padding: 13px 18px 21px; color: #222; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.fashion-confirm footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; }
.fashion-confirm button { min-width: 0; padding: 6px 10px; border: 1px solid #555; border-radius: 4px; color: #222; background: #fff; box-shadow: none; font-size: 14px; }
.fashion-confirm button[data-action="confirm-accept"] { border-color: #222; color: #fff; background: #222; }
.shortcut-dialog > div { position: relative; width: 760px; padding: 24px 28px; border: 3px solid #fff; border-radius: 18px; color: #50216f; background: linear-gradient(#fff,#f4ddff); box-shadow: 0 4px 18px #321347; }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 24px; margin: 22px 0 6px; }
.shortcut-grid > div { display: grid; grid-template-columns: 104px 1fr; align-items: start; font-size: 14px; line-height: 1.5; }
.shortcut-grid dt { color: #8134c5; font-weight: bold; }
.shortcut-grid dd { margin: 0; word-break: keep-all; }
.item-page-track { position: absolute; left: 0; top: 0; height: 700px; transition: transform 300ms linear; }
@media (prefers-reduced-motion: reduce) { .item-page-track { transition: none; } }
.shortcut-dialog h2 { margin: 0 0 15px; color: #ff45bd; text-align: center; }
.shortcut-dialog p { margin: 9px 0; font-size: 15px; }
.shortcut-dialog b { display: inline-block; min-width: 22px; color: #8134c5; }
.shortcut-dialog button { position: absolute; right: 10px; top: 8px; border: 0; color: #9b49d4; background: transparent; font-size: 28px; }

.fashion-ui.controls-hidden .top-toolbar,
.fashion-ui.controls-hidden .auto-position,
.fashion-ui.controls-hidden .close-button,
.fashion-ui.controls-hidden .bottom-toolbar,
.fashion-ui.controls-hidden .fold-button,
.fashion-ui.controls-hidden .panel-slide,
.fashion-ui.controls-hidden .color-toggle,
.fashion-ui.controls-hidden .floating-controls { visibility: hidden; }