.tg-avatar-layer {
  position: absolute;
  z-index: 12;
  inset: auto 0 calc(var(--tg-nav-h, 82px) + 172px);
  height: min(27vh, 270px);
  pointer-events: none;
  opacity: .92;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.tg-avatar-layer.ui-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.96);
  pointer-events: none !important;
}
.tg-avatar-entry {
  position: absolute;
  z-index: 72;
  top: clamp(142px, 17vh, 182px);
  left: max(14px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 34px auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-width: 126px;
  padding: 8px 12px 8px 9px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, rgba(125,71,91,.8), rgba(79,54,76,.72));
  box-shadow: 0 8px 22px rgba(38,25,35,.2), inset 0 1px rgba(255,255,255,.36);
  backdrop-filter: blur(10px);
  text-align: left;
}
.tg-avatar-entry span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  font-size: 18px;
}
.tg-avatar-entry b { font-size: 13px; line-height: 1.2; }
.tg-avatar-entry small { margin-top: 2px; opacity: .78; font-size: 9px; }
.tg-avatar-entry.created { background: linear-gradient(135deg, rgba(97,77,105,.82), rgba(71,57,84,.72)); }
.tg-avatar-character {
  position: absolute;
  bottom: 0;
  width: clamp(76px, 11vw, 126px);
  height: 100%;
  filter: drop-shadow(0 15px 14px rgba(39, 22, 28, .3));
  transform-origin: 50% 100%;
  animation: tg-avatar-breathe 4.8s ease-in-out infinite;
  pointer-events: auto;
}
.tg-avatar-character.slot-0 {
  right: clamp(110px, 18vw, 170px);
  bottom: 26px;
}
.tg-avatar-character.slot-1 {
  right: clamp(10px, 2.5vw, 32px);
  bottom: 18px;
  animation-delay: -2.1s;
}
.tg-avatar-body { width: 100%; height: 100%; }
.tg-avatar-svg { width: 100%; height: 100%; overflow: visible; }
.tg-avatar-premium-figure {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.tg-avatar-premium-figure > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 10px 8px rgba(43,26,33,.2));
}
.tg-avatar-custom-portrait {
  position: absolute;
  left: 3px;
  bottom: 4px;
  display: block;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: linear-gradient(145deg,#fff8f5,#ead9d7);
  box-shadow: 0 7px 18px rgba(76,43,54,.18);
}
.tg-avatar-custom-portrait .tg-avatar-svg {
  width: 126px;
  height: 184px;
  max-width: none !important;
  transform: translate(-26px,-7px);
}
.tg-av-shadow { fill: rgba(29, 20, 25, .22); filter: blur(3px); }
.tg-av-face {
  filter: drop-shadow(0 2px 2px rgba(85, 46, 51, .08));
}
.tg-av-eyes .tg-av-eyelid {
  transform-origin: center;
  animation: tg-avatar-blink 6.2s infinite;
}
.tg-av-hair { transform-origin: 110px 92px; animation: tg-avatar-hair-sway 5.6s ease-in-out infinite; }
.tg-av-outfit { transform-origin: 110px 150px; animation: tg-avatar-cloth 5s ease-in-out infinite; }
.tg-av-hair-front {
  filter: drop-shadow(0 2px 2px rgba(37, 20, 26, .14));
}
.tg-av-face-features {
  filter: drop-shadow(0 1px rgba(255,255,255,.35));
}
.tg-av-shoes {
  filter: drop-shadow(0 3px 2px rgba(47,31,35,.12));
}
.tg-avatar-name {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 3%;
  max-width: 108px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  color: #fff;
  background: rgba(49, 31, 42, .58);
  backdrop-filter: blur(9px);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(-50%);
}
.tg-avatar-wardrobe-shortcut {
  position: absolute;
  right: -4px;
  bottom: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255,245,241,.88);
  color: #8a4c5b;
  font-size: 9px;
  box-shadow: 0 4px 12px rgba(61,32,41,.15);
}
.tg-avatar-character.motion-wave .tg-av-arms { transform-origin: 112px 116px; animation: tg-avatar-wave 1.6s ease-in-out; }
.tg-avatar-character.motion-wave .tg-avatar-premium-figure { animation: tg-avatar-premium-wave 1.6s ease-in-out; }
.tg-avatar-character.motion-sit { animation: tg-avatar-sit 1.7s ease-in-out; }
.tg-avatar-character.motion-water { animation: tg-avatar-water 1.7s ease-in-out; }
.tg-avatar-character.motion-bouquet { animation: tg-avatar-bouquet 1.7s ease-in-out; }
.tg-avatar-character.motion-pet { animation: tg-avatar-pet 1.7s ease-in-out; }
.tg-avatar-character.motion-handhold.slot-0 { animation: tg-avatar-hand-left 2.3s ease-in-out; }
.tg-avatar-character.motion-handhold.slot-1 { animation: tg-avatar-hand-right 2.3s ease-in-out; }

.tg-avatar-sheet { --sheet-height: min(92dvh, 900px); }
.tg-avatar-sheet.open { z-index: 132; }
.tg-avatar-head { position: sticky; top: 0; z-index: 4; padding-top: 4px; background: linear-gradient(#fff9f5 82%, transparent); }
.tg-avatar-close {
  border: 0;
  border-radius: 999px;
  padding: 9px 15px;
  background: #f2dfe0;
  color: #7a4653;
  font-weight: 700;
}
.tg-avatar-studio {
  display: grid;
  grid-template-columns: minmax(145px, .8fr) 1.2fr;
  align-items: center;
  gap: 14px;
  margin: 8px 0 14px;
  padding: 14px;
  border: 1px solid rgba(217,151,156,.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.95), transparent 35%),
    linear-gradient(145deg, #f9e8e7, #f2dfce 58%, #e7d4d7);
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 14px 34px rgba(105,63,75,.12);
  overflow: hidden;
}
.tg-avatar-premium-studio {
  position: relative;
  isolation: isolate;
}
.tg-avatar-premium-studio::before,
.tg-avatar-premium-studio::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .7;
}
.tg-avatar-premium-studio::before {
  width: 180px;
  height: 180px;
  left: -45px;
  bottom: -70px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(236,165,181,.16) 62%, transparent 70%);
}
.tg-avatar-premium-studio::after {
  width: 140px;
  height: 140px;
  right: -28px;
  top: -52px;
  background: radial-gradient(circle, rgba(255,248,222,.9), rgba(196,154,101,.1) 62%, transparent 70%);
}
.tg-avatar-preview {
  position: relative;
  height: 320px;
  display: grid;
  place-items: center;
}
.tg-avatar-preview::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 15px;
  height: 16px;
  border-radius: 50%;
  background: rgba(87,49,60,.13);
  filter: blur(9px);
}
.tg-avatar-preview .tg-avatar-svg {
  position: relative;
  z-index: 1;
  max-width: 210px;
  filter: drop-shadow(0 18px 14px rgba(75,44,48,.2));
}
.tg-avatar-preview .tg-avatar-premium-figure {
  width: min(100%, 214px);
  height: 100%;
}
.tg-avatar-preview .tg-avatar-premium-figure > img {
  filter: drop-shadow(0 18px 14px rgba(75,44,48,.22));
}
.tg-avatar-studio-copy small, .tg-avatar-collector small { color: #bc6176; font-weight: 800; letter-spacing: .08em; }
.tg-avatar-studio-copy b { display: block; margin: 5px 0; color: #523942; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(22px,4vw,34px); }
.tg-avatar-studio-copy p { margin: 0; color: #856d71; line-height: 1.65; }
.tg-avatar-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.tg-avatar-detail-badges span {
  padding: 5px 9px;
  border: 1px solid rgba(145,83,98,.16);
  border-radius: 999px;
  color: #855465;
  background: rgba(255,255,255,.46);
  font-size: 10px;
  font-weight: 700;
}
.tg-avatar-collector {
  display: grid;
  grid-template-columns: minmax(135px, 38%) 1fr;
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid #dcc9a3;
  border-radius: 24px;
  background: linear-gradient(135deg, #fffaf0, #f3e8d2);
}
.tg-avatar-collector img { width: 100%; max-height: 220px; object-fit: contain; filter: drop-shadow(0 8px 7px rgba(85,64,45,.15)); }
.tg-avatar-collector h3 { margin: 4px 0; color: #735a3a; font-family: Georgia, "Noto Serif SC", serif; font-size: 23px; }
.tg-avatar-collector p { margin: 0 0 10px; color: #88755d; line-height: 1.55; }
.tg-avatar-collector progress { width: 100%; height: 8px; accent-color: #c49a57; }
.tg-avatar-collector.unlocked { box-shadow: 0 0 24px rgba(214,180,105,.28); }
.tg-avatar-options { margin: 15px 0; }
.tg-avatar-options h3, .tg-avatar-actions h3 { margin: 0 0 8px; color: #6d4b56; font-size: 15px; }
.tg-avatar-options > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}
.tg-avatar-options button {
  min-height: 50px;
  padding: 8px 6px;
  border: 1px solid rgba(201,139,151,.28);
  border-radius: 15px;
  background: rgba(255,255,255,.72);
  color: #71545b;
  font-size: 12px;
  transition: .2s ease;
}
.tg-avatar-options button:active { transform: scale(.975); }
.tg-avatar-options button.selected {
  border-color: #e56c88;
  color: #9d2f50;
  background: #fff0f2;
  box-shadow: inset 0 0 0 1px #f3a2b3;
}
.tg-avatar-options.has-visuals > div {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.tg-avatar-options.has-visuals button {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  min-height: 154px;
  padding: 6px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.96), transparent 40%),
    linear-gradient(160deg, #fffaf7, #f4e7e2);
}
.tg-avatar-options.has-visuals button.selected {
  background:
    radial-gradient(circle at 50% 22%, #fff, transparent 43%),
    linear-gradient(160deg, #fff8f8, #f9dfe5);
}
.tg-avatar-option-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 112px;
  margin: -1px 0 5px;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 80%, rgba(180,123,133,.12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(244,226,221,.3));
}
.tg-avatar-option-visual::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 8px;
  height: 7px;
  border-radius: 50%;
  background: rgba(78,48,56,.12);
  filter: blur(4px);
}
.tg-avatar-option-visual .tg-avatar-svg {
  position: relative;
  z-index: 1;
  width: auto;
  height: 124px;
  max-width: 100%;
  transform: translateY(8px);
  filter: drop-shadow(0 5px 4px rgba(62,37,43,.12));
}
.tg-avatar-option-visual.premium .tg-avatar-premium-figure {
  height: 100%;
}
.tg-avatar-option-visual.premium .tg-avatar-premium-figure > img {
  width: 100%;
  height: calc(100% + 10px);
  object-fit: contain;
  object-position: 50% 100%;
  transform: translateY(5px);
  filter: drop-shadow(0 5px 4px rgba(62,37,43,.14));
}
.tg-avatar-options-faceKey .tg-avatar-option-visual,
.tg-avatar-options-hairKey .tg-avatar-option-visual {
  height: 102px;
}
.tg-avatar-options-faceKey .tg-avatar-option-visual .tg-avatar-svg,
.tg-avatar-options-hairKey .tg-avatar-option-visual .tg-avatar-svg {
  height: 188px;
  transform: translateY(47px);
}
.tg-avatar-options-bodyType .tg-avatar-option-visual .tg-avatar-svg,
.tg-avatar-options-outfitKey .tg-avatar-option-visual .tg-avatar-svg,
.tg-avatar-options-shoeKey .tg-avatar-option-visual .tg-avatar-svg,
.tg-avatar-options-accessoryKey .tg-avatar-option-visual .tg-avatar-svg,
.tg-avatar-options-heldKey .tg-avatar-option-visual .tg-avatar-svg {
  height: 132px;
}
.tg-avatar-options-outfitKey > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tg-avatar-options-outfitKey button {
  min-height: 220px;
}
.tg-avatar-options-outfitKey .tg-avatar-option-visual {
  height: 174px;
}
.tg-avatar-options-outfitKey .tg-avatar-option-visual .tg-avatar-svg {
  height: 190px;
  transform: translateY(8px);
}
.tg-avatar-option-label {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 26px;
  line-height: 1.3;
  font-weight: 700;
}
.tg-avatar-options button.locked { opacity: .72; background: #f3eee9; }
.tg-avatar-options button small { display: block; margin-top: 2px; color: #9e8568; font-size: 9px; }
.tg-avatar-options i { display: inline-block; width: 17px; height: 17px; margin-right: 5px; border: 1px solid rgba(60,35,40,.15); border-radius: 50%; vertical-align: -4px; }
.tg-avatar-options .skin-porcelain { background: #f9e8dc; }
.tg-avatar-options .skin-warm { background: #f4d2bd; }
.tg-avatar-options .skin-honey { background: #dca87d; }
.tg-avatar-options .skin-cocoa { background: #a96e4e; }
.tg-avatar-options .hair-ink { background: #28242e; }
.tg-avatar-options .hair-chestnut { background: #633f36; }
.tg-avatar-options .hair-tea { background: #a77961; }
.tg-avatar-options .hair-rose { background: #8e4c5b; }
.tg-avatar-options .hair-silver { background: #d7d1d2; }
.tg-avatar-night {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;
  padding: 13px;
  border-radius: 18px;
  background: #eeeaf4;
  color: #554c67;
}
.tg-avatar-upcoming {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 15px;
  border: 1px dashed #decfd4;
  border-radius: 22px;
  color: #735863;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(244,237,239,.9));
}
.tg-avatar-upcoming > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #ba8192;
  background: #f6e7ec;
  font-size: 23px;
}
.tg-avatar-upcoming small {
  color: #9c828b;
  font-size: 10px;
  line-height: 1.5;
}
.tg-avatar-upcoming h3 {
  margin: 3px 0 4px;
  color: #664953;
  font-size: 17px;
}
.tg-avatar-upcoming p {
  margin: 0;
  color: #9b838a;
  font-size: 11px;
  line-height: 1.55;
}
.tg-avatar-night b, .tg-avatar-night small { display: block; }
.tg-avatar-night small { margin-top: 3px; opacity: .72; font-size: 11px; }
.tg-avatar-night input { width: 22px; height: 22px; accent-color: #9a7cc2; }
.tg-avatar-actions {
  margin: 18px 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,245,240,.85);
}
.tg-avatar-actions > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tg-avatar-actions button {
  min-height: 44px;
  border: 1px solid #efd3d3;
  border-radius: 14px;
  background: #fff;
  color: #74515a;
}
.tg-avatar-savebar {
  position: sticky;
  z-index: 5;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr minmax(116px, 34%);
  align-items: center;
  gap: 10px;
  margin: 4px -3px 0;
  padding: 10px 4px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(transparent, #fff9f5 22%, #fff9f5);
}
.tg-avatar-save { width: 100%; margin: 0; }
.tg-avatar-save-status {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 13px;
  color: #8d6f77;
  background: rgba(255,255,255,.7);
  font-size: 11px;
  line-height: 1.45;
}
.tg-avatar-save-status.saving { color: #8a668f; background: #f4ebf8; }
.tg-avatar-save-status.saved { color: #46745e; background: #e9f7ef; }
.tg-avatar-save-status.error { color: #a74655; background: #fff0f1; }

@keyframes tg-avatar-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.008); } }
@keyframes tg-avatar-blink { 0%,45%,49%,100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } }
@keyframes tg-avatar-cloth { 0%,100% { transform: skewX(0); } 50% { transform: skewX(.6deg); } }
@keyframes tg-avatar-hair-sway { 0%,100% { transform: rotate(0); } 50% { transform: rotate(.45deg) translateX(.5px); } }
@keyframes tg-avatar-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 55% { transform: rotate(14deg); } 80% { transform: rotate(-10deg); } }
@keyframes tg-avatar-premium-wave { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-3deg) translateY(-2px); } 65% { transform: rotate(2deg); } }
@keyframes tg-avatar-sit { 0%,100% { transform: translateY(0) scaleY(1); } 45%,70% { transform: translateY(21px) scaleY(.89); } }
@keyframes tg-avatar-water { 0%,100% { transform: rotate(0); } 45%,70% { transform: rotate(7deg) translateX(8px); } }
@keyframes tg-avatar-bouquet { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-7px) scale(1.04); } }
@keyframes tg-avatar-pet { 0%,100% { transform: translateY(0); } 50% { transform: translateY(15px) rotate(-3deg); } }
@keyframes tg-avatar-hand-left { 0%,100% { transform: translateX(0); } 40%,75% { transform: translateX(28px); } }
@keyframes tg-avatar-hand-right { 0%,100% { transform: translateX(0); } 40%,75% { transform: translateX(-28px); } }

html[data-rose-quality="ultra"] .tg-avatar-character,
html[data-rose-quality="ultra"] .tg-av-eyelid,
html[data-rose-quality="ultra"] .tg-av-hair,
html[data-rose-quality="ultra"] .tg-av-outfit {
  animation: none !important;
}

@media (max-width: 680px) {
  .tg-avatar-entry {
    top: 132px;
    left: 11px;
    min-width: 112px;
    padding: 7px 10px 7px 7px;
    border-radius: 17px;
  }
  .tg-avatar-entry span { width: 30px; height: 30px; font-size: 15px; }
  .tg-avatar-entry b { font-size: 11px; }
  .tg-avatar-layer {
    inset: auto 0 calc(var(--tg-nav-h, 76px) + 164px);
    height: min(22vh, 190px);
  }
  .tg-avatar-character { width: clamp(58px, 17vw, 78px); }
  .tg-avatar-character.slot-0 { right: clamp(78px, 26vw, 110px); bottom: 34px; }
  .tg-avatar-character.slot-1 { right: 4px; bottom: 12px; }
  .tg-avatar-name { max-width: 76px; padding: 2px 6px; font-size: 8px; }
  .tg-avatar-wardrobe-shortcut { display: none; }
  .tg-avatar-studio { grid-template-columns: 44% 1fr; gap: 9px; padding: 10px; }
  .tg-avatar-preview { height: 244px; }
  .tg-avatar-preview .tg-avatar-svg { max-width: 166px; }
  .tg-avatar-studio-copy p { font-size: 11px; }
  .tg-avatar-collector { grid-template-columns: 42% 1fr; padding: 9px; }
  .tg-avatar-collector img { max-height: 170px; }
  .tg-avatar-collector h3 { font-size: 18px; }
  .tg-avatar-collector p { font-size: 11px; }
  .tg-avatar-options > div { grid-template-columns: repeat(3, 1fr); }
  .tg-avatar-options button { min-height: 46px; padding: 6px 3px; font-size: 10px; }
  .tg-avatar-options.has-visuals > div { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .tg-avatar-options.has-visuals button { min-height: 132px; padding: 4px; }
  .tg-avatar-option-visual { height: 92px; }
  .tg-avatar-option-visual .tg-avatar-svg { height: 105px; }
  .tg-avatar-options-faceKey .tg-avatar-option-visual,
  .tg-avatar-options-hairKey .tg-avatar-option-visual { height: 84px; }
  .tg-avatar-options-faceKey .tg-avatar-option-visual .tg-avatar-svg,
  .tg-avatar-options-hairKey .tg-avatar-option-visual .tg-avatar-svg { height: 158px; transform: translateY(40px); }
  .tg-avatar-options-outfitKey > div { grid-template-columns: repeat(2, 1fr); }
  .tg-avatar-options-outfitKey button { min-height: 188px; }
  .tg-avatar-options-outfitKey .tg-avatar-option-visual { height: 144px; }
  .tg-avatar-options-outfitKey .tg-avatar-option-visual .tg-avatar-svg { height: 160px; }
  .tg-avatar-options-heldKey > div,
  .tg-avatar-options-accessoryKey > div { grid-template-columns: repeat(2, 1fr); }
  .tg-avatar-actions > div { grid-template-columns: repeat(2, 1fr); }
  .tg-avatar-savebar { grid-template-columns: 1fr 112px; gap: 7px; }
  .tg-avatar-save-status { padding: 7px 8px; font-size: 9px; }
  .tg-avatar-upcoming { grid-template-columns: 40px 1fr; padding: 11px; }
  .tg-avatar-upcoming > span { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .tg-avatar-character, .tg-av-eyelid, .tg-av-hair, .tg-av-outfit { animation: none !important; }
}