/* Tity Live v322 main page system */
:root {
  --tity-main-bg: #eef7ff;
  --tity-main-bg-2: #fff5fb;
  --tity-main-text: #142033;
  --tity-main-muted: #65758b;
  --tity-main-soft: #f6fbff;
  --tity-main-card: rgba(255, 255, 255, 0.92);
  --tity-main-card-strong: #ffffff;
  --tity-main-line: rgba(22, 42, 72, 0.1);
  --tity-main-blue: #1689ff;
  --tity-main-teal: #10b6a5;
  --tity-main-pink: #ff4d9a;
  --tity-main-amber: #ffb23f;
  --tity-main-shadow: 0 18px 46px rgba(36, 75, 120, 0.14);
}

* {
  box-sizing: border-box;
}

body.tity-main-v322,
body.tity-home-v322,
body.tity-profile-v322,
body.tity-plaza-v322,
body.tity-games-v322,
body.tity-chat-v322,
body.tity-prelive-v322 {
  margin: 0;
  min-height: 100dvh;
  color: var(--tity-main-text);
  background:
    radial-gradient(circle at 12% 6%, rgba(22, 137, 255, 0.18), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(255, 77, 154, 0.14), transparent 32%),
    linear-gradient(160deg, var(--tity-main-bg), var(--tity-main-bg-2) 58%, #f3fff9);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body.tity-main-v322 a,
body.tity-home-v322 a,
body.tity-profile-v322 a,
body.tity-plaza-v322 a,
body.tity-games-v322 a,
body.tity-chat-v322 a,
body.tity-prelive-v322 a {
  color: inherit;
  text-decoration: none;
}

.tity-main-app-v322,
.tity-app.main-v322 {
  width: min(430px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.46), 0 24px 70px rgba(15, 23, 42, 0.12);
}

.tity-main-scroll-v322,
.tity-content.main-content-v322 {
  height: 100dvh;
  overflow: auto;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(92px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.tity-main-scroll-v322::-webkit-scrollbar,
.tity-content.main-content-v322::-webkit-scrollbar {
  display: none;
}

.tity-page-shell .tity-app {
  background: transparent;
}

.tity-page-shell .tity-content.main-content-v322 {
  position: relative;
  top: auto;
  bottom: auto;
  height: calc(100dvh - 70px);
  padding-top: 12px;
}

.tity-main-head-v322 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tity-main-brand-v322 {
  display: grid;
  gap: 2px;
}

.tity-main-brand-v322 b,
.tity-main-title-v322 h1,
.tity-main-section-title-v322 h2 {
  margin: 0;
  color: var(--tity-main-text);
  letter-spacing: 0;
}

.tity-main-brand-v322 b {
  font-size: 26px;
  line-height: 1;
}

.tity-main-brand-v322 span,
.tity-main-title-v322 p,
.tity-main-section-title-v322 p {
  margin: 0;
  color: var(--tity-main-muted);
  font-size: 12px;
  font-weight: 750;
}

.tity-main-avatar-v322 {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--tity-main-blue), var(--tity-main-pink));
  box-shadow: 0 10px 24px rgba(22, 137, 255, 0.22);
}

.tity-main-avatar-v322 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tity-main-hero-v322 {
  border-radius: 8px;
  padding: 16px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(20, 32, 51, 0.1), rgba(20, 32, 51, 0.36)),
    linear-gradient(135deg, #1689ff 0%, #10b6a5 48%, #ff4d9a 100%);
  box-shadow: var(--tity-main-shadow);
  overflow: hidden;
  position: relative;
}

.tity-main-hero-v322 h1 {
  margin: 0 0 8px;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: 0;
}

.tity-main-hero-v322 p {
  margin: 0;
  width: min(270px, 100%);
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.45;
}

.tity-main-hero-v322 .hero-actions-v322 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.tity-main-btn-v322,
.tity-main-chip-v322,
.tity-main-mini-btn-v322 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-weight: 950;
  font-size: 13px;
  color: var(--tity-main-text);
  background: var(--tity-main-card-strong);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}

.tity-main-btn-v322.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--tity-main-blue), var(--tity-main-teal));
}

.tity-main-btn-v322.pink {
  color: #fff;
  background: linear-gradient(135deg, var(--tity-main-pink), #8b5cf6);
}

.tity-main-chip-row-v322,
.tity-main-tabs-v322 {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scrollbar-width: none;
}

.tity-main-chip-row-v322::-webkit-scrollbar,
.tity-main-tabs-v322::-webkit-scrollbar {
  display: none;
}

.tity-main-chip-v322,
.tity-main-tabs-v322 a,
.tity-main-tabs-v322 button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--tity-main-line);
  border-radius: 8px;
  color: var(--tity-main-muted);
  background: rgba(255, 255, 255, 0.72);
  font-weight: 900;
  font-size: 12px;
}

.tity-main-tabs-v322 .active,
.tity-main-chip-v322.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--tity-main-blue), var(--tity-main-pink));
}

.tity-main-grid-v322 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.tity-main-card-v322 {
  min-width: 0;
  border: 1px solid var(--tity-main-line);
  border-radius: 8px;
  padding: 13px;
  background: var(--tity-main-card);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.tity-main-card-v322 strong,
.tity-main-list-card-v322 strong {
  display: block;
  color: var(--tity-main-text);
  font-size: 14px;
  line-height: 1.24;
}

.tity-main-card-v322 small,
.tity-main-list-card-v322 small {
  display: block;
  margin-top: 4px;
  color: var(--tity-main-muted);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 720;
}

.tity-main-icon-v322 {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--tity-main-blue), var(--tity-main-teal));
  font-size: 18px;
  font-weight: 1000;
}

.tity-main-icon-v322.pink {
  background: linear-gradient(135deg, var(--tity-main-pink), #8b5cf6);
}

.tity-main-icon-v322.amber {
  background: linear-gradient(135deg, var(--tity-main-amber), #ff6b6b);
}

.tity-main-section-title-v322 {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 10px;
}

.tity-main-section-title-v322 h2 {
  font-size: 18px;
  line-height: 1.16;
}

.tity-main-section-title-v322 a,
.tity-main-section-title-v322 span {
  color: var(--tity-main-blue);
  font-size: 12px;
  font-weight: 950;
}

.tity-room-grid-v322 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tity-room-card-v322 {
  min-height: 168px;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(180deg, rgba(12, 21, 38, 0.05), rgba(12, 21, 38, 0.72)),
    linear-gradient(135deg, #1689ff, #10b6a5);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
}

.tity-room-card-v322.camera {
  background:
    linear-gradient(180deg, rgba(12, 21, 38, 0.06), rgba(12, 21, 38, 0.75)),
    linear-gradient(135deg, #ff4d9a, #8b5cf6);
}

.tity-room-card-v322 .badge {
  align-self: flex-start;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 1000;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
}

.tity-room-card-v322 b {
  display: block;
  font-size: 15px;
  line-height: 1.16;
}

.tity-room-card-v322 span,
.tity-room-card-v322 small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 780;
}

.tity-main-list-v322 {
  display: grid;
  gap: 9px;
}

.tity-main-list-card-v322 {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  border: 1px solid var(--tity-main-line);
  border-radius: 8px;
  padding: 10px;
  background: var(--tity-main-card);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.tity-main-list-card-v322 .avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--tity-main-blue), var(--tity-main-pink));
}

.tity-main-list-card-v322 .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tity-main-list-card-v322 em {
  font-style: normal;
  color: var(--tity-main-muted);
  font-size: 11px;
  font-weight: 900;
}

.tity-main-empty-v322 {
  border: 1px dashed rgba(22, 137, 255, 0.28);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  color: var(--tity-main-muted);
  font-size: 13px;
  font-weight: 750;
}

.tity-main-empty-v322 b {
  display: block;
  margin-bottom: 5px;
  color: var(--tity-main-text);
  font-size: 15px;
}

.tity-profile-cover-v322 {
  border-radius: 8px;
  padding: 16px;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 13px;
  align-items: center;
  color: #fff;
  background: linear-gradient(135deg, #1689ff, #10b6a5 48%, #ff4d9a);
  box-shadow: var(--tity-main-shadow);
}

.tity-profile-cover-v322 .avatar {
  width: 74px;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font-size: 30px;
  font-weight: 1000;
}

.tity-profile-cover-v322 .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tity-profile-cover-v322 h1 {
  margin: 0 0 4px;
  font-size: 24px;
  letter-spacing: 0;
}

.tity-profile-cover-v322 p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 780;
}

.tity-profile-stats-v322 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.tity-profile-stats-v322 div {
  border: 1px solid var(--tity-main-line);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  background: var(--tity-main-card);
}

.tity-profile-stats-v322 b {
  display: block;
  color: var(--tity-main-text);
  font-size: 16px;
}

.tity-profile-stats-v322 span {
  display: block;
  margin-top: 2px;
  color: var(--tity-main-muted);
  font-size: 10px;
  font-weight: 850;
}

.tity-main-form-v322 {
  display: grid;
  gap: 9px;
}

.tity-main-form-v322 input,
.tity-main-form-v322 textarea,
.tity-main-form-v322 select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--tity-main-line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--tity-main-text);
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  outline: 0;
}

.tity-main-form-v322 textarea {
  min-height: 84px;
  padding-top: 11px;
  resize: vertical;
}

.tity-main-modal-v322 {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: end;
  justify-content: center;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(12px);
}

.tity-main-modal-v322.open {
  display: flex;
}

.tity-main-sheet-v322 {
  width: min(430px, 100%);
  border-radius: 8px 8px 0 0;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -18px 46px rgba(15, 23, 42, 0.2);
}

.tity-main-sheet-v322 h3 {
  margin: 0 0 6px;
  color: var(--tity-main-text);
  font-size: 19px;
}

.tity-main-sheet-v322 p {
  margin: 0 0 12px;
  color: var(--tity-main-muted);
  font-size: 13px;
  font-weight: 740;
  line-height: 1.4;
}

.tity-main-choice-v322 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.tity-main-choice-v322 button {
  min-height: 96px;
  border: 1px solid var(--tity-main-line);
  border-radius: 8px;
  padding: 11px;
  text-align: left;
  color: var(--tity-main-text);
  background: #f8fbff;
  cursor: pointer;
}

.tity-main-choice-v322 button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--tity-main-blue), var(--tity-main-teal));
}

.tity-main-choice-v322 button.camera.active {
  background: linear-gradient(135deg, var(--tity-main-pink), #8b5cf6);
}

.tity-main-choice-v322 b,
.tity-main-choice-v322 span {
  display: block;
}

.tity-main-choice-v322 b {
  margin-top: 8px;
  font-size: 14px;
}

.tity-main-choice-v322 small {
  display: block;
  margin-top: 4px;
  color: inherit;
  opacity: 0.74;
  font-weight: 700;
  line-height: 1.35;
}

.tity-topbar {
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid var(--tity-main-line) !important;
  backdrop-filter: blur(18px);
}

.tity-topbar .tity-page-title {
  color: var(--tity-main-text) !important;
}

.tity-circle-btn,
.tity-icon-btn,
.tity-brand-logo {
  border-radius: 8px !important;
  color: var(--tity-main-text) !important;
  background: rgba(255, 255, 255, 0.75) !important;
}

.tity-icon-btn svg,
.tity-circle-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.tity-bottom,
.tity-bottombar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-top: 1px solid var(--tity-main-line) !important;
  box-shadow: 0 -14px 30px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(18px);
}

.tity-bottom .tity-nav-item,
.tity-bottombar .tity-nav-link {
  color: #6b7a90 !important;
}

.tity-bottom .tity-nav-item.active,
.tity-bottombar .tity-nav-link.active {
  color: var(--tity-main-blue) !important;
}

.tity-bottom .tity-nav-item.live-action {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tity-main-pink), var(--tity-main-blue)) !important;
  border-radius: 8px !important;
}

.tity-bottom svg {
  width: 22px;
  height: 22px;
}

.tity-bottombar .tity-nav-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

@media (min-width: 700px) {
  .tity-main-app-v322,
  .tity-app.main-v322 {
    border-radius: 18px;
    min-height: min(860px, 100dvh);
  }
}

/* Tity Live v331 clean profile/menu system */
body.tity-profile-clean-v331 {
  color: var(--tity-main-text);
  background:
    radial-gradient(circle at 12% 6%, rgba(22, 137, 255, 0.18), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(255, 77, 154, 0.14), transparent 32%),
    linear-gradient(160deg, var(--tity-main-bg), var(--tity-main-bg-2) 58%, #f3fff9);
}

.tity-profile-shell-v331 {
  background: rgba(255,255,255,.52);
}

.tity-profile-scroll-v331 {
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(104px + env(safe-area-inset-bottom));
}

.profile-clean-head-v331 {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
}

.profile-clean-head-v331 div {
  flex:1;
  min-width:0;
}

.profile-clean-head-v331 b {
  display:block;
  color:var(--tity-main-text);
  font-size:22px;
  line-height:1.05;
}

.profile-clean-head-v331 span {
  display:block;
  margin-top:3px;
  color:var(--tity-main-muted);
  font-size:12px;
  font-weight:800;
}

.profile-clean-round-v331 {
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(22,42,72,.08);
  color:var(--tity-main-text);
  box-shadow:0 12px 26px rgba(36,75,120,.12);
  font-size:24px;
  font-weight:900;
}

.profile-v331-hero {
  border-radius:8px;
  padding:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,251,255,.9));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:var(--tity-main-shadow);
  position:relative;
  overflow:hidden;
}

.profile-v331-hero:before {
  content:"";
  position:absolute;
  inset:-50px -60px auto auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,77,154,.2),transparent 66%);
}

.profile-v331-top {
  position:relative;
  display:grid;
  grid-template-columns:94px minmax(0,1fr) 34px;
  align-items:center;
  gap:13px;
}

.profile-v331-avatar {
  width:94px;
  height:94px;
  border-radius:32px;
  padding:4px;
  background:conic-gradient(from 10deg,#fff7cf,var(--tity-main-amber),var(--tity-main-pink),var(--tity-main-blue),#fff7cf);
  box-shadow:0 18px 34px rgba(255,77,154,.18);
}

.profile-v331-avatar img {
  width:100%;
  height:100%;
  border-radius:28px;
  object-fit:cover;
  background:#fff;
}

.profile-v331-info {
  min-width:0;
}

.profile-v331-info h1 {
  margin:0;
  font-size:25px;
  line-height:1.05;
  color:var(--tity-main-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-v331-badges {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:9px 0 8px;
}

.profile-v331-badges span {
  min-height:24px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 9px;
  color:#fff;
  font-size:12px;
  font-weight:950;
  background:var(--tity-main-blue);
}

.profile-v331-badges span:nth-child(2){background:var(--tity-main-teal)}
.profile-v331-badges span:nth-child(3){background:#4f8dff}
.profile-v331-badges span:nth-child(4){background:var(--tity-main-amber)}

.profile-v331-id {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--tity-main-muted);
  font-size:13px;
  font-weight:850;
}

.profile-v331-copy {
  border:0;
  border-radius:10px;
  width:28px;
  height:28px;
  background:rgba(22,137,255,.1);
  color:var(--tity-main-blue);
  font-weight:1000;
}

.profile-v331-chevron {
  color:var(--tity-main-muted);
  font-size:34px;
  font-weight:300;
}

.profile-v331-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:16px;
}

.profile-v331-stats a,
.profile-v331-stats div {
  text-align:center;
  border-radius:8px;
  padding:10px 6px;
  background:rgba(238,247,255,.72);
}

.profile-v331-stats b {
  display:block;
  font-size:22px;
  color:var(--tity-main-text);
  line-height:1;
}

.profile-v331-stats span {
  display:block;
  margin-top:5px;
  color:var(--tity-main-muted);
  font-size:12px;
  font-weight:850;
}

.profile-v331-balance {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:14px 0;
}

.profile-v331-balance a,
.profile-v331-feature,
.profile-clean-card-v331,
.profile-clean-hero-v331 {
  border-radius:8px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 14px 34px rgba(36,75,120,.11);
}

.profile-v331-balance a {
  min-height:88px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:11px;
}

.profile-v331-coin {
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 44px;
  color:#fff;
  font-weight:1000;
  background:linear-gradient(135deg,var(--tity-main-amber),#ff7a2f);
  box-shadow:0 12px 24px rgba(255,178,63,.22);
}

.profile-v331-coin svg {
  width:23px;
  height:23px;
  display:block;
  fill:#fff!important;
  color:#fff!important;
}

.profile-v331-coin.diamond {
  background:linear-gradient(135deg,#4fd8ff,var(--tity-main-blue));
}

.profile-v331-balance b,
.profile-v331-feature b,
.profile-clean-section-v331 b {
  display:block;
  color:var(--tity-main-text);
  font-size:16px;
}

.profile-v331-balance span,
.profile-v331-feature span,
.profile-clean-section-v331 span {
  display:block;
  margin-top:3px;
  color:var(--tity-main-muted);
  font-size:12px;
  font-weight:800;
}

.profile-v331-feature {
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  margin-bottom:12px;
  background:linear-gradient(135deg,rgba(22,137,255,.95),rgba(16,182,165,.92) 52%,rgba(255,77,154,.9));
  color:#fff;
}

.profile-v331-feature .profile-clean-icon-v331,
.profile-v331-feature b,
.profile-v331-feature span {
  color:#fff;
}

.profile-v331-feature span {
  opacity:.8;
}

.profile-v331-feature strong {
  margin-left:auto;
  font-size:28px;
}

.profile-clean-card-v331 {
  padding:14px;
  margin-bottom:12px;
}

.profile-clean-section-v331 {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.profile-clean-grid-v331 {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px 8px;
}

.profile-clean-grid-v331 a {
  min-width:0;
  position:relative;
  display:grid;
  justify-items:center;
  gap:7px;
  color:var(--tity-main-text);
}

.profile-clean-grid-v331 span {
  width:100%;
  min-height:30px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  color:var(--tity-main-muted);
  font-size:11px;
  line-height:1.18;
  font-weight:850;
  overflow-wrap:anywhere;
}

.profile-clean-grid-v331 em {
  position:absolute;
  right:16px;
  top:2px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--tity-main-pink);
  box-shadow:0 0 0 3px #fff;
}

.profile-clean-icon-v331 {
  width:52px;
  height:52px;
  border-radius:20px;
  display:grid;
  place-items:center;
  flex:0 0 52px;
  color:#fff!important;
  font-size:13px;
  font-style:normal;
  font-weight:1000;
  background:linear-gradient(135deg,var(--tity-main-blue),var(--tity-main-pink));
  box-shadow:0 12px 24px rgba(22,137,255,.18);
}

.profile-clean-icon-v331 svg,
.profile-clean-round-v331 svg {
  width:24px;
  height:24px;
  display:block;
  fill:#fff!important;
  color:#fff!important;
}

.profile-clean-round-v331 svg {
  width:20px;
  height:20px;
  fill:var(--tity-main-blue)!important;
  color:var(--tity-main-blue)!important;
}

.profile-clean-icon-v331 svg *,
.profile-v331-coin svg * {
  fill:#fff!important;
  color:#fff!important;
}

.profile-clean-grid-v331 a .profile-clean-icon-v331,
.profile-clean-list-v331 a .profile-clean-icon-v331,
.profile-v331-feature .profile-clean-icon-v331 {
  color:#fff!important;
}

.profile-clean-icon-v331.level,
.profile-clean-icon-v331.family,
.profile-clean-icon-v331.room {background:linear-gradient(135deg,var(--tity-main-teal),#64d96c)}
.profile-clean-icon-v331.shop,
.profile-clean-icon-v331.wallet,
.profile-clean-icon-v331.dealer {background:linear-gradient(135deg,var(--tity-main-amber),#ff7a2f)}
.profile-clean-icon-v331.bag,
.profile-clean-icon-v331.games,
.profile-clean-icon-v331.ludo {background:linear-gradient(135deg,#7967ff,var(--tity-main-blue))}
.profile-clean-icon-v331.support,
.profile-clean-icon-v331.card,
.profile-clean-icon-v331.detail {background:linear-gradient(135deg,#2dd4bf,var(--tity-main-blue))}
.profile-clean-icon-v331.logout {background:linear-gradient(135deg,#9aa8bb,#65758b)}

.tity-bottom .tity-nav-item,
.tity-bottombar .tity-nav-link,
.tity-bottom .tity-nav-ico,
.tity-bottombar .tity-nav-icon,
.tity-nav-link.active .tity-nav-icon,
.tity-nav-item.active .tity-nav-ico,
.tity-nav-item.live-action .tity-nav-ico {
  transform:none!important;
  transition:none!important;
  touch-action:manipulation;
}

.tity-nav-item.live-action .tity-nav-ico {
  margin-top:0!important;
}

.profile-clean-list-v331 {
  display:grid;
  gap:9px;
}

.profile-clean-list-v331 a {
  min-height:68px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:8px;
  background:rgba(246,251,255,.84);
  border:1px solid rgba(22,42,72,.06);
}

.profile-clean-list-v331 span {
  min-width:0;
  flex:1;
}

.profile-clean-list-v331 b {
  display:block;
  color:var(--tity-main-text);
  font-size:15px;
}

.profile-clean-list-v331 small {
  display:block;
  margin-top:3px;
  color:var(--tity-main-muted);
  font-size:12px;
  line-height:1.25;
  font-weight:750;
}

.profile-clean-list-v331 strong {
  color:#96a3b5;
  font-size:26px;
  font-weight:400;
}

.profile-clean-hero-v331 {
  display:flex;
  gap:13px;
  align-items:center;
  padding:16px;
  margin-bottom:12px;
}

.profile-clean-hero-v331 h1 {
  margin:0 0 4px;
  color:var(--tity-main-text);
  font-size:22px;
  line-height:1.08;
}

.profile-clean-hero-v331 p,
.profile-clean-note-v331 p {
  margin:0;
  color:var(--tity-main-muted);
  font-size:13px;
  line-height:1.35;
  font-weight:750;
}

.profile-clean-metrics-v331 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-bottom:12px;
}

.profile-clean-metrics-v331 article {
  border-radius:8px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 12px 28px rgba(36,75,120,.1);
  padding:12px 8px;
  text-align:center;
}

.profile-clean-metrics-v331 b {
  display:block;
  color:var(--tity-main-text);
  font-size:20px;
}

.profile-clean-metrics-v331 span {
  display:block;
  color:var(--tity-main-muted);
  font-size:11px;
  font-weight:850;
}

.profile-clean-note-v331 b {
  display:block;
  margin-bottom:5px;
  color:var(--tity-main-text);
}

@media (max-width: 360px) {
  .profile-clean-grid-v331 {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .profile-v331-top {
    grid-template-columns:82px minmax(0,1fr) 24px;
  }
  .profile-v331-avatar {
    width:82px;
    height:82px;
    border-radius:28px;
  }
  .profile-v331-avatar img {
    border-radius:24px;
  }
  .profile-v331-balance {
    grid-template-columns:1fr;
  }
}