* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #061431;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
}
button { font: inherit; cursor: pointer; }

.princess-app {
  position: relative;
  width: min(100vw, 520px);
  height: 100dvh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #071737;
  box-shadow: 0 0 70px rgba(0,0,0,.6);
}
.princess-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.24), transparent 18%),
    radial-gradient(circle at 56% 66%, rgba(112,199,255,.18), transparent 30%),
    linear-gradient(180deg, rgba(8,20,58,.18), transparent 38%, rgba(3,11,34,.28));
}

.topbar {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(env(safe-area-inset-top) + 14px);
  z-index: 12;
  min-height: 68px;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 10px;
}
.topbar h1 {
  margin: 0;
  justify-self: center;
  width: min(100%, 258px);
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0 22px;
  border-radius: 28px;
  color: #fff;
  font-family: "STKaiti", "KaiTi", "Songti SC", "PingFang SC", serif;
  font-size: clamp(26px, 8.2vw, 40px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(150,220,255,.9), 0 2px 0 rgba(42,72,132,.72);
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.45), transparent 45%),
    linear-gradient(160deg, rgba(116,152,229,.78), rgba(42,72,151,.62));
  border: 1px solid rgba(220,240,255,.74);
  box-shadow: 0 0 20px rgba(129,190,255,.42), inset 0 0 22px rgba(255,255,255,.26);
}
.topbar h1 span { font-size: .72em; margin-right: 7px; }
.top-actions { display: flex; gap: 8px; }

.icon-btn,
.rail-btn {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(232,243,255,.82);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  font-size: 28px;
  font-weight: 950;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.86) 0 9%, transparent 10%),
    linear-gradient(145deg, rgba(215,232,255,.92), rgba(82,112,201,.82) 56%, rgba(82,77,180,.82));
  box-shadow: 0 0 22px rgba(128,183,255,.55), inset 0 0 18px rgba(255,255,255,.35), 0 10px 22px rgba(5,15,52,.28);
  text-shadow: 0 2px 6px rgba(27,44,104,.56);
}
.top-actions .icon-btn { width: 54px; height: 54px; font-size: 21px; }
.icon-btn.save { background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.85) 0 9%, transparent 10%), linear-gradient(145deg, #d68cff, #7aa9ff); }
.icon-btn:active,
.rail-btn:active,
.thumb-btn:active,
.panel-head button:active { transform: scale(.94); }

.stage-shell {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.stage-card {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 58px;
  right: 58px;
  top: calc(env(safe-area-inset-top) + 72px);
  bottom: 166px;
  overflow: visible;
}
.stage-bg,
.princess-stage {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.princess-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}
.princess-layer-stack,
.mini-layer-stack {
  position: relative;
  aspect-ratio: 9 / 16;
  width: min(122%, 430px);
  height: auto;
  max-height: 100%;
  filter: drop-shadow(0 24px 26px rgba(0,12,50,.34));
}
.mini-layer-stack {
  width: 100%;
  height: 100%;
  max-height: none;
  filter: none;
  transform: scale(1.14);
}
.p-layer,
.ui-snow,
.ui-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.p-layer { object-fit: contain; }
.p-layer-background { object-fit: cover; }
.ui-snow {
  opacity: var(--snow, .58);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 2px, transparent 2.6px),
    radial-gradient(circle, rgba(189,232,255,.85) 0 1.6px, transparent 2.4px);
  background-size: 84px 84px, 142px 142px;
  animation: snowFall 12s linear infinite;
  mix-blend-mode: screen;
}
.ui-glow {
  opacity: var(--glow, .72);
  background:
    radial-gradient(circle at 48% 42%, rgba(160,225,255,.22), transparent 28%),
    radial-gradient(circle at 58% 72%, rgba(198,165,255,.14), transparent 24%);
  mix-blend-mode: screen;
}
@keyframes snowFall { to { background-position: 0 180px, 0 260px; } }
.princess-stage.flash .princess-layer-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.75), transparent 22%);
  animation: flashPop .42s ease-out both;
  pointer-events: none;
}
@keyframes flashPop {
  from { opacity: .9; transform: scale(.96); }
  to { opacity: 0; transform: scale(1.08); }
}
.load-failed {
  align-self: center;
  justify-self: center;
  color: #fff;
  font-weight: 950;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.side-rail {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 116px);
  bottom: 206px;
  width: 74px;
  z-index: 9;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}
.side-rail.left { left: 14px; }
.side-rail.right { right: 14px; }
.rail-btn {
  width: 68px;
  height: 68px;
  border-radius: 23px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rail-btn::after {
  content: attr(title);
  display: block;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  color: #fff;
  text-shadow: 0 2px 7px rgba(15,31,88,.8);
}
.rail-btn.active {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(208,143,255,.78), 0 0 0 2px rgba(255,255,255,.6), inset 0 0 22px rgba(255,255,255,.45);
}
.rail-icon {
  width: 32px;
  height: 32px;
  display: block;
  color: #fff;
  filter: drop-shadow(0 2px 7px rgba(20,45,112,.5));
}

.bottom-panel {
  position: absolute;
  left: 19px;
  right: 19px;
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  z-index: 11;
  min-height: 166px;
  padding: 13px 16px 15px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(223,238,255,.62), rgba(116,151,220,.36)),
    rgba(42,76,153,.3);
  border: 1px solid rgba(231,246,255,.74);
  box-shadow: 0 0 26px rgba(117,183,255,.5), inset 0 0 26px rgba(255,255,255,.24), 0 12px 30px rgba(4,14,46,.34);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.panel-head strong {
  display: block;
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  text-shadow: 0 2px 8px rgba(18,37,103,.7);
}
.panel-head span {
  display: block;
  margin-top: 1px;
  color: #dbeeff;
  font-size: 12px;
  font-weight: 850;
  text-shadow: 0 2px 7px rgba(18,37,103,.7);
}
.panel-head button {
  min-width: 76px;
  border: 1px solid rgba(238,248,255,.82);
  border-radius: 999px;
  padding: 10px 14px;
  color: #fff;
  font-weight: 950;
  background: linear-gradient(145deg, rgba(199,226,255,.88), rgba(93,128,214,.76));
  box-shadow: inset 0 0 14px rgba(255,255,255,.3), 0 0 14px rgba(147,201,255,.36);
}
.item-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 3px 2px 8px;
  scrollbar-width: none;
}
.item-strip::-webkit-scrollbar { display: none; }
.thumb-btn {
  position: relative;
  height: 112px;
  border: 2px solid rgba(238,248,255,.72);
  border-radius: 19px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.58), transparent 42%),
    linear-gradient(160deg, rgba(241,247,255,.58), rgba(90,126,210,.52));
  box-shadow: inset 0 0 18px rgba(255,255,255,.22), 0 8px 18px rgba(5,14,48,.26);
  text-shadow: 0 2px 7px rgba(21,38,93,.76);
  padding: 6px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 3px;
  place-items: center;
}
.thumb-btn.active {
  border-color: rgba(229,155,255,.95);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.68), transparent 42%),
    linear-gradient(160deg, rgba(176,209,255,.7), rgba(95,92,215,.62));
  box-shadow: 0 0 22px rgba(218,146,255,.82), inset 0 0 20px rgba(255,255,255,.3);
}
.thumb-btn.active::after {
  content: "✓";
  position: absolute;
  right: 10px;
  bottom: 24px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #a779ff, #6fa8ff);
  border: 2px solid rgba(255,255,255,.88);
  box-shadow: 0 0 14px rgba(190,142,255,.76);
}
.thumb-art {
  width: 86px;
  height: 68px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
}
.thumb-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(10,20,60,.28));
}
.thumb-skin .thumb-img,
.thumb-hair .thumb-img,
.thumb-crown .thumb-img,
.thumb-jewelry .thumb-img { transform: scale(3.9) translateY(12%); }
.thumb-shoes .thumb-img { transform: scale(4.2) translateY(-38%); }
.thumb-dress .thumb-img,
.thumb-cape .thumb-img { transform: scale(1.34) translateY(-2%); }
.thumb-magic .thumb-img { transform: scale(1.12); }
.thumb-bg .thumb-img { object-fit: cover; transform: none; }
.thumb-outfit { background: rgba(255,255,255,.08); }
.thumb-label {
  width: 100%;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px;
  background: rgba(7,18,55,.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sheet[hidden] { display: none; }
.sheet-card {
  width: min(380px, calc(100vw - 28px));
  max-height: 82dvh;
  overflow: auto;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(155deg, rgba(130,190,255,.66), rgba(40,78,157,.52));
  border: 1px solid rgba(230,247,255,.78);
  box-shadow: 0 0 30px rgba(125,196,255,.45), inset 0 0 24px rgba(255,255,255,.22);
  padding: 16px;
}
.gallery-card { width: min(620px, calc(100vw - 28px)); }
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  text-shadow: 0 2px 8px rgba(12,31,84,.72);
}
.sheet-head button {
  border: 1px solid rgba(238,248,255,.72);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(230,243,255,.32);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}
.control-group { margin: 13px 0; }
.control-group label,
.control-row span {
  color: #fff;
  font-weight: 950;
  font-size: 14px;
  text-shadow: 0 2px 8px rgba(12,31,84,.72);
}
.swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.swatch {
  border: 3px solid rgba(255,255,255,.76);
  border-radius: 16px;
  height: 42px;
  background: var(--sw);
  box-shadow: 0 6px 14px rgba(20,33,86,.18), inset 0 0 13px rgba(255,255,255,.24);
}
.swatch.active { outline: 3px solid #d894ff; }
.control-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.control-row input { width: 100%; accent-color: #caa3ff; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.work-card {
  border: 1px solid rgba(238,248,255,.6);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 8px 20px rgba(4,14,46,.2);
}
.work-thumb {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: #122d68;
}
.work-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.work-card footer {
  display: grid;
  gap: 7px;
  padding: 8px 10px 10px;
  font-size: 12px;
}
.work-card .mini-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.work-card .mini-actions button {
  border: 0;
  border-radius: 999px;
  background: rgba(232,244,255,.24);
  color: #fff;
  padding: 7px 6px;
  font-weight: 950;
}
.empty { padding: 28px 8px; text-align: center; color: #e2f3ff; font-weight: 900; }

.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 205px);
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 11px 18px;
  background: rgba(28,46,112,.9);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 0 20px rgba(143,198,255,.45);
  white-space: nowrap;
}
.toast[hidden] { display: none; }

@media (max-width: 430px) {
  .topbar { left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 10px); grid-template-columns: 58px 1fr auto; }
  .topbar h1 { width: min(100%, 178px); height: 50px; font-size: 25px; padding: 0 14px; }
  .icon-btn { width: 52px; height: 52px; }
  .top-actions { gap: 4px; }
  .top-actions .icon-btn { width: 42px; height: 42px; font-size: 18px; }
  .stage-card { left: 48px; right: 48px; top: calc(env(safe-area-inset-top) + 62px); bottom: 148px; }
  .princess-layer-stack { width: min(136%, 420px); }
  .side-rail { top: calc(env(safe-area-inset-top) + 102px); bottom: 188px; gap: 8px; width: 58px; }
  .side-rail.left { left: 9px; }
  .side-rail.right { right: 9px; }
  .rail-btn { width: 55px; height: 55px; border-radius: 19px; }
  .rail-btn::after { font-size: 11px; }
  .rail-icon { width: 28px; height: 28px; }
  .bottom-panel { left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); min-height: 145px; padding: 10px 12px 12px; border-radius: 24px; }
  .panel-head { margin-bottom: 6px; }
  .panel-head strong { font-size: 18px; }
  .panel-head span { display: none; }
  .item-strip { grid-auto-columns: 86px; gap: 10px; }
  .thumb-btn { height: 94px; border-radius: 17px; }
  .thumb-art { width: 64px; height: 52px; }
  .thumb-label { font-size: 11px; }
}

@media (max-height: 740px) {
  .topbar { top: calc(env(safe-area-inset-top) + 8px); }
  .topbar h1 { height: 48px; font-size: 26px; }
  .icon-btn { width: 50px; height: 50px; }
  .top-actions .icon-btn { width: 44px; height: 44px; }
  .stage-card { top: calc(env(safe-area-inset-top) + 54px); bottom: 132px; }
  .princess-layer-stack { width: min(126%, 380px); }
  .side-rail { top: calc(env(safe-area-inset-top) + 90px); bottom: 158px; gap: 6px; }
  .rail-btn { width: 50px; height: 50px; border-radius: 17px; }
  .rail-btn::after { font-size: 10px; }
  .rail-icon { width: 25px; height: 25px; }
  .bottom-panel { min-height: 132px; }
  .thumb-btn { height: 82px; }
}