.android-keyboard-adapter .dialog-backdrop {
  inset: auto 0;
  top: var(--keyboard-viewport-top, 0px);
  height: var(--keyboard-viewport-height, 100dvh);
  box-sizing: border-box;
  overflow-y: auto;
  align-items: flex-end;
  padding: 12px;
}
.android-keyboard-adapter .dialog-backdrop > .dialog {
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
.android-keyboard-adapter input,
.android-keyboard-adapter textarea {
  scroll-margin-block: 28px;
}
.android-keyboard-adapter.keyboard-visible .auth-page {
  min-height: var(--keyboard-viewport-height, 100dvh);
  grid-template-rows: 72px 1fr;
  overflow: visible;
}
.android-keyboard-adapter.keyboard-visible .auth-panel {
  padding-bottom: 32px;
}
.one-point-home-shade {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #24231e8c;
}
.one-point-home-dialog {
  width: min(100%, 356px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border-radius: 23px;
  background: #fffdf9;
  color: #332f27;
  box-shadow: 0 25px 80px #0003;
}
.one-point-home-cover {
  position: relative;
  aspect-ratio: 16/10;
  background: #ede6d7;
  overflow: hidden;
}
.one-point-home-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.one-point-home-cover > span {
  position: absolute;
  left: 16px;
  top: 16px;
  background: #fffdf9eb;
  color: #81622f;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
}
.one-point-home-cover > button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #ffffff90;
  background: #ffffffeb;
  color: #655e51;
  font-size: 23px;
  cursor: pointer;
}
.one-point-home-body {
  padding: 24px;
}
.one-point-home-body small {
  font-size: 11px;
  letter-spacing: 2px;
  color: #a17c3e;
}
.one-point-home-body h2 {
  font-size: 24px;
  line-height: 1.35;
  margin: 10px 0 12px;
  overflow-wrap: anywhere;
}
.one-point-home-body p {
  font-size: 13px;
  line-height: 1.85;
  color: #847b6c;
  margin: 0 0 22px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.one-point-home-action {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 11px;
  background: #463c2a;
  color: #fffaf0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.one-point-home-dialog button:focus-visible {
  outline: 3px solid #b68c45;
  outline-offset: 3px;
}
.point-purpose-backdrop {
  z-index: 15000;
}
.point-purpose-dialog {
  max-height: 85dvh;
  overflow-y: auto;
  text-align: left;
}
.point-purpose-dialog h2 {
  font-size: 20px;
  line-height: 1.45;
}
.point-purpose-dialog p {
  line-height: 1.65;
}
.point-purpose-dialog > button {
  width: 100%;
  margin-top: 10px;
}
.point-purpose-lots {
  list-style: none;
  padding: 0;
}
.point-purpose-lots li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid #d8dce7;
}
.point-purpose-lots span {
  font-size: 12px;
}
.dismantle-purpose-warning {
  color: #b42318;
  font-weight: 600;
  line-height: 1.6;
}
[data-eye-care="true"] .dismantle-purpose-warning {
  color: #9b1c16;
}
.dynamic-reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #13213a99;
}
.dynamic-reward-dialog {
  width: min(100%, 430px);
  max-height: 85dvh;
  overflow: auto;
  background: var(--sand, #fff);
  color: var(--ink, #17243d);
  border: 1px solid var(--oat, #e4e8ed);
  border-radius: 22px;
  padding: 20px;
  outline: none;
  box-sizing: border-box;
}
.dynamic-reward-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dynamic-reward-dialog h2 {
  margin: 0;
  font-size: 19px;
}
.dynamic-reward-dialog button {
  font: inherit;
  cursor: pointer;
  min-height: 36px;
  border: 1px solid var(--oat, #e4e8ed);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  padding: 6px 12px;
}
.dynamic-reward-dialog button:disabled {
  opacity: 0.5;
  cursor: default;
}
.dynamic-reward-dialog button:focus-visible {
  outline: 2px solid var(--terracotta, #1947af);
  outline-offset: 2px;
}
.dynamic-reward-balances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}
.dynamic-reward-balances article {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--cream, #f3f5f9);
  padding: 14px;
  border-radius: 14px;
  min-width: 0;
}
.dynamic-reward-balances strong {
  font-size: 24px;
  overflow-wrap: anywhere;
}
.dynamic-reward-balances span,
.dynamic-reward-hint,
.dynamic-reward-record small {
  font-size: 12px;
}
.dynamic-reward-claimable {
  text-align: center;
  font-weight: 600;
}
.dynamic-reward-dialog .dynamic-reward-submit {
  width: 100%;
  background: var(--moss, #173da6);
  color: var(--sand, #fff);
  min-height: 44px;
}
.dynamic-reward-hint {
  line-height: 1.7;
  opacity: 0.75;
}
.dynamic-reward-dialog [role="tablist"] {
  display: flex;
  margin-top: 22px;
  border-bottom: 1px solid var(--oat, #e4e8ed);
}
.dynamic-reward-dialog [role="tab"] {
  flex: 1;
  border: 0;
  border-radius: 0;
}
.dynamic-reward-dialog [aria-selected="true"] {
  border-bottom: 2px solid currentColor;
  font-weight: 700;
}
.dynamic-reward-record {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--oat, #e4e8ed);
  font-size: 13px;
}
.dynamic-reward-record div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.dynamic-reward-record time {
  font-size: 11px;
  opacity: 0.7;
}
.dynamic-reward-record b {
  overflow-wrap: anywhere;
  text-align: right;
}
.dynamic-reward-dialog [role="alert"] {
  color: #b13228;
  overflow-wrap: anywhere;
}
.support-page {
  color: var(--ink, #24332b);
}
.support-page > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.support-page h1 {
  font-size: 21px;
  margin: 0;
}
.support-page button,
.support-replies button {
  border: 1px solid var(--oat, #d8e2d7);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--sand, #f6faf4);
  color: inherit;
}
.support-intro {
  padding: 24px;
  border: 1px solid var(--oat, #d8e2d7);
  border-radius: 20px;
  background: var(--sand, #f6faf4);
}
.support-intro > svg {
  width: 32px;
  height: 32px;
}
.support-intro h2 {
  font-size: 19px;
}
.support-intro p,
.support-intro small {
  line-height: 1.6;
}
.support-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.support-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--oat, #d8e2d7);
  border-radius: 16px;
  background: var(--sand, #f6faf4);
}
.support-card > div {
  flex: 1;
  min-width: 0;
}
.support-card strong,
.support-card small,
.support-card div > span {
  display: block;
  overflow-wrap: anywhere;
}
.support-avatar {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px;
}
.support-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.support-online {
  color: var(--moss, #286e39);
}
.support-offline {
  opacity: 0.65;
}
.support-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.support-inbox-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  text-align: left;
}
.support-inbox-row small {
  display: block;
}
.support-replies {
  padding: 12px;
  max-height: 340px;
  overflow: auto;
}
.support-replies h2 {
  font-size: 16px;
}
.support-reply-items {
  display: grid;
  gap: 8px;
}
.support-reply-items > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.support-reply-items > div > button {
  max-width: 100%;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.support-replies form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.support-replies textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  background: var(--sand, #f6faf4);
  color: inherit;
  border: 1px solid var(--oat, #d8e2d7);
  border-radius: 10px;
  padding: 10px;
}
.support-replies button:disabled,
.support-page button:disabled {
  opacity: 0.5;
}
.chat-otc-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #f1f5ff;
  border-bottom: 1px solid #dde5f5;
  color: #17377a;
  font-size: 13px;
}
.chat-otc-context strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.chat-otc-context span {
  flex-shrink: 0;
}
.tg-backdrop {
  z-index: 1300 !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 22px !important;
}
.tg-dialog {
  width: min(100%, 370px) !important;
  position: relative;
  border: 1px solid #e8f1ff !important;
  border-radius: 26px !important;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 28px 22px !important;
  background: linear-gradient(155deg, #eef7ff 0, #fff 55%) !important;
  color: #172e52;
}
.tg-close {
  position: absolute !important;
  top: 10px;
  right: 10px;
  color: #7c8ca7;
}
.tg-popup {
  text-align: center;
}
.tg-kicker {
  display: block;
  color: #3476d5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}
.tg-dialog h2 {
  font-size: 24px;
  margin: 12px 0;
}
.tg-dialog p {
  font-size: 14px;
  color: #62728a;
  line-height: 1.7;
  white-space: pre-line;
}
.tg-art {
  width: 150px;
  height: 140px;
  display: grid;
  place-items: center;
  margin: 12px auto;
  position: relative;
  background: radial-gradient(ellipse, #dcecff, transparent 70%);
}
.tg-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
}
.tg-box {
  width: 92px;
  height: 76px;
  position: relative;
  border-radius: 7px;
  background: linear-gradient(125deg, #4999ff, #2767e3);
  box-shadow: 0 15px 25px #2767e333;
  transform: rotate(-8deg);
  animation: tg-float 3s ease-in-out infinite;
}
.tg-box:before {
  content: "";
  position: absolute;
  width: 106px;
  height: 23px;
  top: -12px;
  left: -7px;
  border-radius: 5px;
  background: linear-gradient(100deg, #78b8ff, #3b80f1);
  box-shadow: 0 3px 5px #16449633;
}
.tg-box span {
  position: absolute;
  left: 37px;
  width: 18px;
  height: 88px;
  top: -12px;
  background: linear-gradient(90deg, #fff0cb, #fcd781);
}
.tg-box i,
.tg-box b {
  position: absolute;
  border: 7px solid #ffe3a4;
  width: 30px;
  height: 25px;
  top: -40px;
  border-radius: 50% 50% 0;
  left: 13px;
  transform: rotate(10deg);
}
.tg-box b {
  left: 45px;
  transform: scaleX(-1) rotate(10deg);
}
.tg-product-name {
  display: block;
  font-size: 17px;
  margin: 14px 0;
}
.tg-countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #3476d5;
  background: #eaf3ff;
  border-radius: 8px;
  padding: 9px;
  margin-bottom: 16px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tg-dialog .primary-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(110deg, #3789f8, #3065e7);
  border-radius: 13px;
  min-height: 46px;
}
.tg-popup > small {
  display: block;
  font-size: 11px;
  color: #8d99ab;
  margin: 12px 0;
}
.tg-later {
  border: 0;
  background: none;
  color: #6d7e95;
  padding: 12px 0;
  font-size: 12px;
  width: 100%;
}
.tg-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e3ecfa;
  border-radius: 16px;
  padding: 14px;
  margin: 18px 0;
}
.tg-summary .tg-art {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
}
.tg-summary .tg-box {
  scale: 0.55;
}
.tg-summary > div:last-child {
  display: grid;
  gap: 5px;
}
.tg-summary span {
  color: #2b77d5;
  font-size: 13px;
}
.tg-summary small {
  color: #8492a7;
  font-size: 11px;
}
.tg-addresses {
  display: grid;
  gap: 9px;
  max-height: 220px;
  overflow: auto;
}
.tg-address {
  display: flex;
  gap: 9px;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 13px 10px;
  border: 1px solid #dfe8f4;
  border-radius: 12px;
  background: #fff;
  color: #596c87;
}
.tg-address.selected {
  background: #edf5ff;
  border-color: #72a7ef;
}
.tg-address span {
  flex: 1;
  min-width: 0;
}
.tg-address strong {
  font-size: 13px;
  display: block;
  color: #223b61;
}
.tg-address small {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.tg-address svg {
  flex-shrink: 0;
}
.tg-address-edit {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  background: none;
  padding: 12px;
  color: #3476d5;
  font-size: 13px;
}
.tg-dialog .tg-note {
  font-size: 12px;
  background: #f2f6fb;
  padding: 10px;
  border-radius: 10px;
}
.tg-check {
  height: 68px;
  width: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #387ce7;
  margin: 12px auto 20px;
}
.tg-success {
  text-align: center;
}
.tg-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 12px 0;
  border: 1px solid #cce1ff;
  border-radius: 16px;
  padding: 15px;
  text-align: left;
  background: linear-gradient(115deg, #e7f2ff, #f5f6ff);
  color: #3064ac;
}
.tg-entry > span:nth-child(2) {
  display: grid;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.tg-entry-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 5px 15px #3075d313;
}
.tg-entry small {
  font-size: 11px;
}
.tg-entry strong {
  font-size: 16px;
  color: #1d3861;
}
.tg-entry em {
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.tg-product-claim {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  padding: 9px 4px;
  font-size: 12px;
  color: #2167c4;
  background: #eaf3ff;
  margin-top: 7px;
}
.tg-dialog button:disabled,
.tg-product-claim:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@keyframes tg-float {
  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tg-box {
    animation: none;
  }
}
.tg-backdrop {
  align-items: center !important;
  background: #1226457a !important;
}
.tg-dialog {
  box-shadow: 0 24px 80px #102b5830;
}
.rps-page {
  --pink: #ff006e;
  --cyan: #00ffff;
  background: #0a0014;
  color: #f6f1ff;
  min-height: 100vh;
  padding: 0 18px 95px;
  font-family:
    Space Mono,
    Courier New,
    Microsoft YaHei,
    monospace;
  position: relative;
  overflow: hidden;
}
.rps-page:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(transparent 0 3px, #ffffff03 3px 4px);
  z-index: 0;
}
.rps-page > * {
  position: relative;
}
.rps-page button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.rps-page button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rps-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  font-weight: 700;
}
.rps-top button,
.rps-close {
  border: 0;
  background: transparent;
  color: #fff;
  padding: 8px;
}
.rps-hero {
  padding: 24px 8px 20px;
  min-height: 285px;
}
.rps-hero p {
  font-size: 12px;
  letter-spacing: 2px;
  color: #b0a1c9;
}
.rps-hero h1 {
  font-size: 42px;
  line-height: 1.25;
  margin: 14px 0 30px;
  letter-spacing: -2px;
  text-shadow:
    2px 0 #ff006e55,
    -2px 0 #00ffff55;
}
.rps-hero h1 em {
  font-style: normal;
  color: var(--cyan);
  text-shadow: 0 0 24px #00ffff60;
}
.rps-orbit {
  position: absolute;
  width: 220px;
  height: 220px;
  right: -80px;
  top: 0;
  border: 2px solid #ff006e70;
  border-radius: 50%;
  box-shadow:
    0 0 70px #ff006e25,
    inset 0 0 50px #ff006e25;
  animation: rps-orbit 9s linear infinite;
}
.rps-orbit:after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--cyan);
  border-radius: 50%;
  top: 0;
  left: 80px;
  box-shadow: 0 0 24px var(--cyan);
}
.rps-hands {
  display: flex;
  position: absolute;
  right: -12px;
  top: 135px;
  gap: 0;
  transform: rotate(-12deg);
}
.rps-hands > div {
  background: linear-gradient(145deg, #2b1652, #100721);
  border: 1px solid #794baf;
  border-radius: 18px;
  width: 70px;
  height: 76px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  box-shadow: 0 10px 30px #0009;
  animation: rps-float 3s ease-in-out infinite;
}
.rps-hands > div:nth-child(2) {
  color: var(--pink);
  transform: translateY(-28px);
  animation-delay: -1s;
}
.rps-hands > div:nth-child(3) {
  animation-delay: -2s;
}
.rps-balance {
  margin-top: 38px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.rps-balance span {
  color: #b0a1c9;
  font-size: 12px;
}
.rps-balance strong {
  font-size: 25px;
  color: var(--cyan);
}
.rps-test {
  display: flex;
  gap: 8px;
  background: #402100;
  border: 1px solid #ba832f;
  color: #ffd996;
  padding: 12px;
  font-size: 12px;
  line-height: 1.7;
  border-radius: 10px;
  margin: 10px 0;
}
.rps-tabs {
  display: flex;
  gap: 6px;
  margin: 20px 0;
}
.rps-tabs button {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 5px;
  align-items: center;
  border: 0;
  border-radius: 12px;
  padding: 14px 4px;
  font-size: 12px;
  background: #1c102d;
  color: #a699bc;
}
.rps-tabs button.active {
  background: linear-gradient(120deg, #ff006e, #9334d4);
  color: #fff;
  box-shadow: 0 4px 25px #ff006e35;
}
.rps-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rps-page h2 {
  font-size: 19px;
}
.rps-page small {
  font-size: 11px;
  color: #aa9cbe;
}
.rps-room {
  background: linear-gradient(135deg, #231138, #130b23);
  border: 1px solid #593376;
  border-radius: 18px;
  padding: 16px;
  margin: 12px 0;
  animation: rps-arrive 0.35s ease-out;
}
.rps-room-head {
  display: flex;
  gap: 10px;
  align-items: center;
}
.rps-avatar {
  height: 42px;
  width: 42px;
  border-radius: 14px;
  object-fit: cover;
  background: linear-gradient(135deg, #602c96, #bc2062);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 20px;
}
.rps-room-head > div {
  flex: 1;
}
.rps-room-head small,
.rps-rank-row small {
  display: block;
  margin-top: 5px;
}
.rps-room-head > strong {
  text-align: right;
  color: var(--cyan);
  font-size: 22px;
}
.rps-room-detail {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #b0a1c9;
  margin: 17px 0;
}
.rps-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(110deg, #ee006d, #932ad0);
  color: #fff;
  border: 1px solid #ff56a4;
  border-radius: 12px;
  padding: 14px;
  font-weight: 700;
  box-shadow: 0 0 22px #ff006e20;
}
.rps-secondary {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  border: 1px solid #664e88;
  background: #241739;
  padding: 12px;
  border-radius: 12px;
}
.rps-room p {
  font-size: 12px;
  line-height: 1.7;
}
.rps-reveal {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 20px 0;
  font-size: 26px;
}
.rps-reveal b {
  color: var(--pink);
  font-style: italic;
}
.rps-reveal span {
  animation: rps-arrive 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.rps-text {
  background: none;
  border: 0;
  color: var(--cyan) !important;
  font-size: 12px !important;
  padding: 8px;
}
.rps-empty {
  text-align: center;
  padding: 36px 8px;
  color: #a99abf;
}
.rps-empty svg {
  color: var(--cyan);
  margin: auto;
}
.rps-empty h3 {
  color: #ede4ff;
}
.rps-empty p {
  font-size: 12px;
}
.rps-pager {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 22px 0;
  align-items: center;
}
.rps-pager button,
.rps-period button {
  padding: 9px 13px;
  background: #221336;
  border: 1px solid #593376;
  border-radius: 8px;
  font-size: 12px;
}
.rps-period {
  display: flex;
  gap: 10px;
}
.rps-period button.active {
  color: var(--cyan);
  border-color: var(--cyan);
}
.rps-ranks > p {
  font-size: 11px;
  color: #b0a1c9;
}
.rps-self {
  border: 1px solid var(--cyan);
  border-radius: 12px;
  padding: 14px;
  margin: 15px 0;
  font-size: 12px;
}
.rps-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #342246;
}
.rps-rank-row > div {
  flex: 1;
}
.rps-rank-row > strong {
  width: 28px;
  color: #b0a1c9;
}
.rps-rank-row > span:last-child {
  text-align: right;
  font-weight: 700;
}
.rps-rank-row.top-1 > strong {
  color: #ffcc69;
  text-shadow: 0 0 16px #ffb000;
}
.rps-rank-row.top-2 > strong {
  color: var(--cyan);
}
.rps-rank-row.top-3 > strong {
  color: var(--pink);
}
.rps-rules {
  color: #9485ab;
  font-size: 11px;
  line-height: 1.8;
}
.rps-rules label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rps-bottom {
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom));
  width: min(calc(100% - 36px), 394px);
  z-index: 21;
}
.app-shell:has(.rps-page) .bottom-nav {
  background: #170c27f5;
  border-color: #583071;
  color: #c9b6df;
}
.app-shell:has(.rps-page) .bottom-nav button {
  color: #c9b6df;
}
@media (min-width: 700px) {
  .rps-bottom {
    bottom: 112px;
  }
}
.rps-error {
  background: #5a172d;
  border: 1px solid #be3965;
  border-radius: 10px;
  padding: 12px;
  font-size: 12px;
  color: #ffd3e1;
}
.rps-notice {
  background: #133c43;
  border: 1px solid #267e86;
  padding: 12px;
  border-radius: 10px;
  font-size: 12px;
}
.rps-overlay {
  position: fixed;
  inset: 0;
  background: #030008d9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
}
.rps-modal {
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(150deg, #2a123f, #0c0615);
  border: 1px solid #ba2b87;
  border-radius: 24px;
  padding: 25px;
  position: relative;
  box-shadow: 0 0 55px #ff006e30;
  animation: rps-arrive 0.3s ease-out;
}
.rps-modal > p {
  color: #bfaed0;
  font-size: 12px;
}
.rps-close {
  position: absolute;
  right: 12px;
  top: 12px;
}
.rps-modal label {
  display: block;
  font-size: 12px;
  color: #cabada;
  margin: 20px 0 12px;
}
.rps-modal input,
.rps-modal select {
  display: block;
  width: 100%;
  margin-top: 8px;
  border: 1px solid #6c468e;
  background: #10051d;
  color: #fff;
  border-radius: 10px;
  padding: 12px;
  font-size: 17px;
}
.rps-stakes {
  border: 0;
  padding: 0;
  margin: 20px 0 12px;
}
.rps-stakes legend {
  font-size: 12px;
  color: #cabada;
  margin-bottom: 8px;
}
.rps-stakes > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rps-stakes button {
  border: 1px solid #70428e;
  background: #21102e;
  border-radius: 10px;
  padding: 10px 14px;
}
.rps-stakes button.selected {
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 18px #00ffff40;
}
.rps-picks {
  display: flex;
  gap: 10px;
  margin: 24px 0;
}
.rps-picks button {
  flex: 1;
  background: #21102e;
  border: 1px solid #70428e;
  border-radius: 14px;
  padding: 15px 5px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}
.rps-picks button.selected {
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 18px #00ffff40;
  animation: rps-charge 1.2s ease-in-out infinite;
}
.rps-result {
  text-align: center;
}
.rps-result > svg {
  color: #ffd269;
  margin: 20px auto;
  filter: drop-shadow(0 0 20px #ffcc69);
}
.rps-sparks {
  position: absolute;
  left: 50%;
  top: 85px;
  pointer-events: none;
}
.rps-sparks i {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--cyan);
  animation: rps-spark 1.8s ease-out infinite;
  transform: rotate(calc(var(--i) * 30deg)) translateY(-65px);
}
@keyframes rps-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rps-float {
  50% {
    translate: 0 -12px;
  }
}
@keyframes rps-charge {
  50% {
    box-shadow: 0 0 28px #00ffff70;
    transform: scale(1.03);
  }
}
@keyframes rps-arrive {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rps-spark {
  0% {
    opacity: 1;
    scale: 0.3;
  }
  to {
    opacity: 0;
    scale: 1.8;
  }
}
.rps-still *,
.rps-still *:before {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .rps-page * {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 360px) {
  .rps-hero h1 {
    font-size: 36px;
  }
  .rps-hands {
    right: -25px;
    scale: 0.8;
  }
  .rps-room-detail {
    font-size: 9px;
  }
}
.game-shell {
  --game-bg: #0b0d12;
  --panel: #151821;
  --panel-2: #1c202b;
  --line: #343846;
  --gold: #d6ab63;
  --red: #dd5048;
  --cyan: #52d7df;
  min-height: 100vh;
  background: var(--game-bg);
  color: #f5f1e9;
  padding: 0 16px 112px;
  font-family:
    Inter,
    Microsoft YaHei,
    system-ui,
    sans-serif;
  overflow: hidden;
  letter-spacing: 0;
}
.game-shell * {
  box-sizing: border-box;
}
.game-shell button {
  font: inherit;
  letter-spacing: 0;
}
.game-shell button:focus-visible,
.game-shell input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.game-header {
  height: 68px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.game-header > button,
.header-icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: #141720;
  color: #f5f1e9;
  display: grid;
  place-items: center;
  border-radius: 6px;
}
.game-header svg {
  width: 19px;
}
.game-header > div {
  text-align: center;
  min-width: 0;
}
.game-header h1 {
  font-size: 17px;
  margin: 0;
}
.game-header p {
  font-size: 10px;
  color: #9399a8;
  margin: 4px 0 0;
}
.game-wallet {
  margin: 16px 0;
  padding: 18px;
  background: linear-gradient(115deg, #2a241b, #151821 62%);
  border: 1px solid #675330;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
}
.game-wallet span,
.game-wallet small {
  font-size: 11px;
  color: #a9a28f;
}
.game-wallet strong {
  grid-row: 1/3;
  grid-column: 2;
  font-size: 24px;
  color: #f2cc88;
  font-variant-numeric: tabular-nums;
}
.game-wallet small {
  margin-top: 5px;
}
.hall-feature {
  position: relative;
  width: 100%;
  min-height: 210px;
  border: 1px solid #765c32;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 40%, #8b312d66, transparent 36%),
    linear-gradient(145deg, #29241d, #12151d 65%);
  color: #fff;
  text-align: left;
  padding: 26px 20px;
  display: grid;
  grid-template-columns: 72px 1fr 20px;
  align-items: center;
}
.hall-feature:after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 24px,
    #ffffff05 25px 26px
  );
  pointer-events: none;
}
.hall-feature h2 {
  font-size: 26px;
  margin: 8px 0;
}
.hall-feature p,
.hall-feature small {
  font-size: 11px;
  color: #bab4a8;
}
.hall-feature small {
  color: #e1ba73;
}
.hall-feature > svg {
  width: 18px;
}
.hall-bird-mark {
  width: 58px;
  height: 92px;
  border: 1px solid var(--red);
  background: #521f21;
  clip-path: polygon(50% 0, 100% 24%, 88% 87%, 50% 100%, 12% 87%, 0 24%);
  display: grid;
  place-items: center;
  color: #ffd58b;
}
.hall-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 0 8px;
}
.hall-title h2 {
  font-size: 15px;
}
.hall-title span {
  font-size: 11px;
  color: #8e94a1;
}
.hall-game {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #f5f1e9;
  padding: 17px 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.hall-game > svg:first-child {
  width: 38px;
  height: 38px;
  padding: 9px;
  background: #2a2130;
  color: #d893bd;
  border-radius: 6px;
}
.hall-game.rank > svg:first-child {
  background: #312817;
  color: var(--gold);
}
.hall-game > div {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}
.hall-game span {
  font-size: 11px;
  color: #9299a8;
}
.hall-game > svg:last-child {
  width: 17px;
  color: #777e8d;
}
.game-error,
.game-notice {
  border: 1px solid #9c3d46;
  background: #35161c;
  color: #ffd9dc;
  padding: 12px;
  margin: 12px 0;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
}
.game-error button {
  float: right;
  background: transparent;
  color: #fff;
  border: 0;
  text-decoration: underline;
}
.game-notice {
  background: #123336;
  border-color: #2c7479;
  color: #c8fcff;
}
.game-state {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8f96a5;
  font-size: 12px;
}
.game-state svg {
  color: var(--gold);
}
.rank-rules {
  font-size: 11px;
  line-height: 1.8;
  color: #9ba1ae;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.rank-self {
  padding: 16px;
  margin: 14px 0;
  background: #1b1c20;
  border-left: 3px solid var(--gold);
  display: grid;
  grid-template-columns: 1fr auto;
}
.rank-self strong {
  font-size: 22px;
  color: var(--gold);
}
.rank-self small {
  grid-column: 1/3;
  color: #a1a5ae;
  margin-top: 7px;
}
.game-rank-row {
  display: grid;
  grid-template-columns: 30px 38px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.game-rank-row > b {
  font-size: 13px;
  color: #888e9b;
}
.game-rank-row img,
.rank-avatar {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
  background: #2b303c;
  display: grid;
  place-items: center;
}
.game-rank-row div {
  min-width: 0;
}
.game-rank-row div strong,
.game-rank-row div small {
  display: block;
  overflow-wrap: anywhere;
}
.game-rank-row div strong {
  font-size: 13px;
}
.game-rank-row small {
  font-size: 9px;
  color: #8d94a2;
  margin-top: 5px;
}
.game-rank-row em {
  font-style: normal;
  font-size: 12px;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.game-rank-row.rank-1 > b {
  color: #ffd17e;
}
.game-rank-row.rank-2 > b {
  color: #c8d4df;
}
.game-rank-row.rank-3 > b {
  color: #d89969;
}
.game-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}
.game-pager button {
  border: 1px solid var(--line);
  background: #1b1e27;
  color: #e8e4dd;
  padding: 9px 14px;
  border-radius: 5px;
}
.game-pager button:disabled {
  opacity: 0.35;
}
.game-pager span {
  font-size: 11px;
  color: #9299a8;
}
.battle-wallet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 14px 0;
}
.battle-wallet > div {
  background: #14171e;
  padding: 13px;
}
.battle-wallet span,
.battle-wallet small {
  display: block;
  color: #8f96a5;
  font-size: 10px;
}
.battle-wallet strong {
  display: block;
  color: #f0ca84;
  font-size: 18px;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.battle-wallet small {
  margin-top: 4px;
}
.arena-frame {
  position: relative;
  height: 318px;
  border: 1px solid #4b4538;
  background:
    radial-gradient(circle at center 70%, #563b2238, transparent 45%),
    linear-gradient(#171c28, #0d1017);
  overflow: hidden;
}
.arena-frame:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(transparent 0 3px, #ffffff04 4px);
}
.arena-hud {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.arena-hud > div:last-child {
  text-align: right;
}
.arena-hud b {
  font-size: 10px;
}
.health {
  height: 7px;
  background: #313540;
  display: block;
  margin: 6px 0;
  overflow: hidden;
}
.health i {
  display: block;
  height: 100%;
  background: var(--red);
  transition: width 0.25s;
}
.health.blue i {
  background: var(--cyan);
}
.arena-hud small {
  font-size: 8px;
  color: #9da3ae;
  display: flex;
  align-items: center;
  gap: 3px;
}
.arena-hud > div:last-child small {
  justify-content: flex-end;
}
.arena-hud small svg {
  width: 9px;
  height: 9px;
}
.chicken-canvas {
  position: absolute;
  inset: 61px 0 7px;
  z-index: 1;
}
.chicken-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.arena-round {
  position: absolute;
  z-index: 3;
  bottom: 8px;
  left: 50%;
  transform: translate(-50%);
  white-space: nowrap;
  border: 1px solid #6a5736;
  background: #0a0c10dc;
  color: #f2c77e;
  padding: 6px 12px;
  font-size: 9px;
}
.battle-clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-top: 0;
  padding: 13px;
  background: #12151b;
}
.battle-clock span {
  font-size: 11px;
  color: #979eac;
}
.battle-clock strong {
  font-size: 19px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}
.side-grid button {
  min-width: 0;
  border: 1px solid #5a3437;
  background: #21171a;
  color: #f4ece9;
  padding: 13px 9px;
  text-align: left;
  border-radius: 6px;
}
.side-grid button:last-child {
  border-color: #26565e;
  background: #121f23;
}
.side-grid button.selected {
  border-color: var(--red);
  box-shadow: inset 0 -3px var(--red);
}
.side-grid button.selected.blue {
  border-color: var(--cyan);
  box-shadow: inset 0 -3px var(--cyan);
}
.side-grid b,
.side-grid span {
  display: block;
  font-size: 10px;
}
.side-grid strong {
  display: block;
  font-size: 17px;
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.side-grid span {
  color: #a0a6b2;
}
.side-grid button:disabled {
  opacity: 0.65;
}
.bet-console {
  background: #151820;
  border: 1px solid var(--line);
  padding: 14px;
}
.bet-console > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
}
.bet-console > div:first-child span {
  color: #9299a7;
}
.stake-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 13px 0;
}
.stake-grid button {
  border: 1px solid #3e4350;
  background: #20242e;
  color: #d9d8d5;
  padding: 10px 2px;
  border-radius: 4px;
  overflow: hidden;
}
.stake-grid button.selected {
  border-color: var(--gold);
  color: #ffda98;
  background: #342b1c;
}
.game-primary {
  width: 100%;
  min-height: 46px;
  background: #b3894e;
  color: #15110b;
  border: 1px solid #edca8b;
  border-radius: 5px;
  font-weight: 700;
  padding: 10px;
}
.game-primary:disabled {
  opacity: 0.45;
}
.bet-console p {
  font-size: 9px;
  line-height: 1.8;
  color: #868d9a;
  margin: 12px 0 0;
}
.battle-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 12px 0;
}
.battle-tools button {
  border: 0;
  background: #171a22;
  color: #aab0bc;
  padding: 10px 2px;
  font-size: 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.battle-tools svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
}
.motion-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #8f96a3;
  font-size: 10px;
}
.connection {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7e8490;
  margin-right: 5px;
}
.connection.live {
  background: #48d77f;
  box-shadow: 0 0 8px #48d77f;
}
.connection.polling {
  background: #d5a44e;
}
.game-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: #030509df;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.game-modal {
  position: relative;
  width: min(100%, 420px);
  max-height: 88vh;
  overflow: auto;
  background: #151820;
  border: 1px solid #695a40;
  border-radius: 8px;
  padding: 22px;
  color: #f3eee5;
}
.game-modal h2 {
  font-size: 19px;
  margin: 10px 0 18px;
}
.game-modal > small {
  color: #9da3ae;
}
.modal-close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 0;
  background: transparent;
  color: #f1eee8;
  padding: 8px;
}
.game-modal dl > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: 11px;
}
.game-modal dd {
  margin: 0;
  color: #e7c27f;
  text-align: right;
}
.game-modal label {
  display: block;
  font-size: 11px;
  color: #a3a9b5;
  margin: 18px 0;
}
.game-modal input {
  display: block;
  width: 100%;
  margin-top: 7px;
  background: #0e1016;
  border: 1px solid #4a4f5d;
  color: #fff;
  padding: 12px;
  border-radius: 5px;
  font-size: 18px;
}
.history-modal article {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  font-size: 11px;
}
.history-modal article span {
  color: #d8b775;
}
.history-modal article small {
  color: #8f96a3;
}
@media (max-width: 360px) {
  .game-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .hall-feature {
    grid-template-columns: 58px 1fr 16px;
    padding: 20px 12px;
  }
  .hall-feature h2 {
    font-size: 22px;
  }
  .game-rank-row {
    grid-template-columns: 26px 34px 1fr;
  }
  .game-rank-row em {
    grid-column: 3;
    justify-self: start;
  }
  .battle-tools button {
    font-size: 8px;
  }
  .side-grid strong {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-shell * {
    animation: none !important;
    transition: none !important;
  }
}
.rps-daily-rank .rps-fee-summary {
  padding: 20px;
  margin: 18px 0;
  border: 1px solid #dce2f5;
  border-radius: 18px;
  background: #eef2ff;
  color: #233b83;
}
.rps-fee-summary h2 {
  font-size: 19px;
  line-height: 1.7;
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.rps-fee-summary p {
  margin: 8px 0;
}
.rps-fee-summary small {
  line-height: 1.8;
}
.rps-rank-rules {
  margin-top: 24px;
  line-height: 1.9;
}
.rps-rank-rules summary {
  cursor: pointer;
  font-weight: 700;
}
.rps-rank-rules ol {
  padding-left: 20px;
}
.rps-daily-rank .game-rank-row em {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.rps-daily-rank .game-rank-row em small {
  display: block;
  font-size: 11px;
}
.rps-daily-rank .game-rank-row div {
  min-width: 0;
}
.rps-daily-rank .game-header h1 {
  font-size: 20px;
}
.rps-daily-rank .game-rank-row {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
}
.rps-daily-rank .game-rank-row em {
  max-width: 124px;
  text-align: right;
}
.rps-daily-rank .game-rank-row strong {
  overflow-wrap: anywhere;
}
.rps-daily-rank nav {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.rps-daily-rank nav button,
.rps-daily-rank .ui-pagination button {
  border: 1px solid #344365;
  border-radius: 9px;
  background: #172239;
  color: #d8e5ff;
  padding: 8px 14px;
  cursor: pointer;
}
.rps-daily-rank nav button[aria-pressed="true"] {
  background: #315cbd;
  color: #fff;
}
.rps-daily-rank .ui-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.rps-daily-rank .ui-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.game-shell {
  --gold: #ffcc77;
  background: #101119;
  color: #f8f5ef;
}
.reference-hero {
  position: relative;
  height: 315px;
  margin: 4px 0 22px;
  border: 1px solid #483c38;
  border-radius: 23px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 70%, #84372a80, transparent 65%),
    radial-gradient(ellipse at 95% 50%, #1b737e70, transparent 60%), #1c1b25;
}
.reference-hero:before,
.chicken-page .arena-frame:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    110deg,
    transparent 0 70px,
    #ffffff03 70px 71px
  );
  pointer-events: none;
}
.reference-hero-copy {
  position: absolute;
  left: 23px;
  top: 24px;
  z-index: 3;
}
.reference-hero-copy > span {
  display: inline-block;
  color: #fc7;
  font-size: 9px;
  padding: 6px 8px;
  border: 1px solid #78533266;
  border-radius: 5px;
  background: #47301e70;
}
.reference-hero-copy h2 {
  font-size: 31px;
  line-height: 1.1;
  margin: 14px 0 8px;
  letter-spacing: -1px;
  font-weight: 900;
}
.reference-hero-copy p {
  font-size: 11px;
  color: #c0a99d;
  margin: 0;
}
.hero-bird {
  position: absolute;
  width: 210px;
  max-width: none;
  top: 72px;
  right: -10px;
  filter: drop-shadow(0 15px 15px #0008);
  animation: reference-breathe 2.6s ease-in-out infinite;
}
.hero-red {
  width: 200px;
  right: 110px;
  top: 104px;
  z-index: 2;
}
.hero-blue {
  animation-delay: -1.1s;
}
.reference-hero-bottom {
  position: absolute;
  z-index: 4;
  left: 20px;
  right: 20px;
  bottom: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.reference-hero-bottom small {
  color: #e0c9b0;
  line-height: 1.8;
  font-size: 10px;
}
.reference-hero-bottom button,
.chicken-page .game-primary {
  border: 0;
  color: #221b12;
  background: linear-gradient(110deg, #f9d99b, #e8ae52);
  border-radius: 12px;
  font-weight: 900;
  box-shadow: 0 6px 24px #e7b36022;
}
.reference-hero-bottom button {
  font-size: 17px;
  padding: 14px 20px;
  white-space: nowrap;
  transition: transform 0.2s;
}
.reference-hero-bottom button:active {
  transform: scale(0.96);
}
.game-hall .hall-title {
  margin: 22px 2px 14px;
}
.game-hall .hall-title h2 {
  font-size: 17px;
  font-weight: 900;
}
.game-hall .hall-title span {
  font-size: 10px;
  color: #9096ad;
}
.reference-game-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  background: #1d1e29;
  border: 1px solid #30313f;
  border-radius: 16px;
  text-align: left;
  width: 100%;
  color: #f8f5ef;
  margin-bottom: 12px;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.reference-game-card:active {
  transform: scale(0.985);
  border-color: #b99058;
}
.reference-game-art {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: linear-gradient(140deg, #78583c, #33222a);
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 35px;
  overflow: hidden;
}
.reference-game-art img {
  width: 72px;
  height: 76px;
  max-width: none;
  object-fit: contain;
}
.reference-game-card h3 {
  font-size: 15px;
  margin: 0 0 7px;
  font-weight: 900;
}
.reference-game-card p {
  font-size: 10px;
  color: #939ab1;
  margin: 0;
}
.reference-game-card > svg {
  margin-left: auto;
  color: #fc7;
  width: 20px;
  flex-shrink: 0;
}
.reference-game-card.rps-card {
  background: linear-gradient(120deg, #1d1e29, #302132);
}
.rps-card .reference-game-art {
  background: #392948;
}
.chicken-page .arena-frame {
  position: relative;
  margin: 18px -16px 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 20% 70%, #9b372657, transparent 55%),
    radial-gradient(ellipse at 85% 70%, #057c9140, transparent 55%),
    linear-gradient(#12131b, #1b202b);
  overflow: hidden;
  padding-top: 52px;
}
.chicken-page .arena-frame:after {
  content: "";
  position: absolute;
  bottom: 13px;
  width: 95%;
  height: 65px;
  left: 2.5%;
  border: 1px solid #78706555;
  border-radius: 50%;
  background: repeating-radial-gradient(
    ellipse,
    #423d3722 0 5px,
    #171e2a22 7px 20px
  );
  box-shadow: 0 0 28px #e8ba6120;
  transform: perspective(250px) rotateX(36deg);
  pointer-events: none;
  z-index: 0;
}
.chicken-page .arena-hud {
  position: absolute;
  top: 10px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 50px;
  padding: 0;
  z-index: 4;
}
.chicken-page .arena-hud > div {
  width: 50%;
  min-width: 0;
}
.chicken-page .arena-hud > div:last-child {
  text-align: right;
}
.chicken-page .arena-hud b {
  font-size: 11px;
}
.chicken-page .health {
  display: block;
  height: 5px;
  margin: 9px 0 6px;
  border-radius: 4px;
  background: #242735;
  overflow: hidden;
}
.chicken-page .health i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff8a45, #ff5259);
  transition: width 0.6s;
}
.chicken-page .health.blue i {
  background: linear-gradient(90deg, #229da8, #78f6ee);
}
.chicken-page .arena-hud small {
  font-size: 9px;
  color: #858ba1;
}
.chicken-page .arena-hud small svg {
  display: none;
}
.chicken-page .chicken-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 390/244;
  min-height: 0;
}
.chicken-page .chicken-canvas canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
}
.reference-versus {
  position: absolute;
  left: 50%;
  top: 39%;
  transform: translate(-50%) rotate(-10deg);
  font-size: 34px;
  font-style: italic;
  font-weight: 900;
  color: #eacc91;
  text-shadow: 0 0 20px #ffc66050;
  z-index: 3;
  pointer-events: none;
}
.phase-fighting .reference-versus {
  opacity: 0.15;
}
.phase-finished .reference-versus {
  display: none;
}
.chicken-page .arena-round {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%);
  color: #e0c38c;
  font: 10px monospace;
  letter-spacing: 3px;
  background: #10121bed;
  padding: 7px 13px;
  border: 1px solid #66604755;
  border-radius: 20px;
  z-index: 5;
  white-space: nowrap;
  width: auto;
}
.chicken-page .battle-wallet {
  border-radius: 14px;
  overflow: hidden;
  background: #30323f;
}
.chicken-page .battle-wallet > div {
  background: #1c1e29;
}
.chicken-page .side-grid button {
  border-radius: 14px;
  background: #30201f;
  border: 1px solid #674034;
}
.chicken-page .side-grid button:last-child {
  background: #192c33;
  border-color: #335860;
}
.chicken-page .bet-console {
  border-radius: 15px;
  background: #1c1e29;
}
.chicken-page .game-modal {
  border-radius: 24px;
  background: linear-gradient(140deg, #282532, #161a26);
}
.chicken-page .arena-frame {
  height: auto;
  padding-bottom: 22px;
}
.chicken-page .chicken-canvas {
  inset: auto;
}
@keyframes reference-breathe {
  0%,
  to {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-5px) rotate(1deg);
  }
}
@media (max-width: 360px) {
  .hero-bird {
    right: -28px;
  }
  .hero-red {
    right: 74px;
  }
  .reference-hero-copy {
    left: 18px;
  }
  .reference-hero-bottom {
    left: 14px;
    right: 14px;
  }
  .reference-hero-bottom button {
    padding: 14px;
    font-size: 16px;
  }
  .chicken-page .arena-frame {
    margin-left: -12px;
    margin-right: -12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bird {
    animation: none;
  }
  .reference-game-card,
  .reference-hero-bottom button {
    transition: none;
  }
}
.my-settlement {
  margin: 12px 0;
  border: 1px solid #4a4030;
  background: #15171d;
  padding: 13px;
}
.my-settlement h2 {
  font-size: 13px;
  margin: 0 0 8px;
  color: #e6c17c;
}
.my-settlement article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border-top: 1px solid #343846;
  padding: 10px 0;
  font-size: 10px;
}
.my-settlement article b,
.my-settlement article strong {
  grid-column: 1/3;
}
.my-settlement article span {
  color: #969dab;
}
.my-settlement article strong {
  color: #5fe0d9;
}
.chicken-canvas > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: #aab0bc;
  font-size: 11px;
}
.image-upload {
  width: 100%;
  min-width: 0;
  margin: 12px 0;
}
.image-upload .image-upload-select {
  position: relative;
  display: block;
  text-align: center;
  padding: 22px;
  border: 1px dashed #dbe2ee;
  border-radius: 16px;
  background: #fff;
  color: #002fa7;
  margin: 0;
  font-size: 13px;
}
.image-upload .image-upload-select input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.image-upload-select:focus-within {
  outline: 2px solid #002fa7;
  outline-offset: 2px;
}
.image-upload-select:has(input:disabled) {
  opacity: 0.5;
}
.image-upload > small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 8px;
}
.equipment-order-card footer .image-upload {
  flex-basis: 100%;
}
.subaccounts-page {
  background: #f7f7f8;
  min-height: 100vh;
  padding-bottom: 100px;
}
.subaccounts-page .page-header {
  margin-bottom: 16px;
}
.sub-current {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(125deg, #002fa7, #164fc2 62%, #3977dc);
  box-shadow: 0 10px 24px #002fa71c;
}
.sub-current:after {
  content: "";
  position: absolute;
  right: -78px;
  bottom: -104px;
  width: 210px;
  height: 210px;
  border: 1px solid #ffffff29;
  border-radius: 50%;
  box-shadow:
    0 0 0 24px #ffffff08,
    0 0 0 50px #ffffff05;
  pointer-events: none;
}
.sub-current-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.sub-current-top > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sub-current small {
  font-size: 11px;
  opacity: 0.82;
}
.sub-status {
  font-size: 10px;
  padding: 4px 7px;
  border: 1px solid #ffffff36;
  border-radius: 999px;
  background: #ffffff16;
}
.sub-count {
  font-size: 11px;
  opacity: 0.82;
}
.sub-current h2 {
  position: relative;
  z-index: 1;
  margin: 16px 0 6px;
  font-size: 23px;
  letter-spacing: -0.4px;
}
.sub-identity {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  font-size: 11px;
  color: #e1eaff;
}
.sub-balance {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 17px;
  padding-top: 12px;
  border-top: 1px solid #ffffff28;
}
.sub-balance span {
  font-size: 11px;
  color: #dce7ff;
}
.sub-balance strong {
  font-size: 25px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sub-balance strong small {
  font-size: 11px;
}
.sub-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 12px;
}
.sub-heading h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.2px;
}
.sub-heading > div > span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
}
.sub-add-button {
  flex: none;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #d6e1fa;
  border-radius: 11px;
  background: #eef3ff;
  color: #002fa7;
  font-size: 12px;
  font-weight: 700;
}
.sub-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
  padding: 12px;
  border: 1px solid #dbe2ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 15px #17243d04;
}
.sub-row.selected {
  border-color: #a9bff2;
  background: #f8faff;
}
.sub-row img,
.sub-avatar-preview img {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  object-fit: cover;
  flex: none;
}
.sub-row > div {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sub-row-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.sub-row-title b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.sub-row-status {
  flex: none;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 10px;
}
.sub-row-status.active {
  color: #1359c7;
  background: #eef3ff;
}
.sub-row-status.inactive {
  color: #718096;
  background: #f1f3f6;
}
.sub-row small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
}
.sub-switch-button {
  flex: none;
  min-width: 48px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid #dbe2ee;
  border-radius: 9px;
  background: #fff;
  color: #002fa7;
  font-size: 11px;
  font-weight: 600;
}
.sub-switch-button:disabled {
  color: #9aa5b5;
  background: #f6f7f9;
}
.sub-fee {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 16px 0;
  padding: 15px;
  border: 1px solid #dbe5fb;
  border-radius: 15px;
  background: #eef3ff;
}
.sub-fee strong {
  font-size: 19px;
  color: #002fa7;
  font-variant-numeric: tabular-nums;
}
.sub-fee small {
  grid-column: 1/-1;
  color: #48649a;
  font-size: 11px;
  line-height: 1.7;
}
.subaccounts-page > p,
.subaccounts-page form > p {
  font-size: 12px;
  color: #64748b;
  line-height: 1.8;
}
.sub-shared {
  padding: 13px;
  border: 1px solid #dbe2ee;
  border-radius: 13px;
  background: #f8faff;
}
.sub-footnote {
  margin: 12px 2px;
}
.sub-avatar-preview {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.subaccounts-page .primary-button {
  background: #002fa7;
}
.form-card {
  border-radius: 20px !important;
  padding: 18px !important;
}
@media (max-width: 360px) {
  .sub-add-button {
    padding: 0 9px;
    font-size: 11px;
  }
  .sub-row {
    gap: 8px;
    padding: 10px;
  }
  .sub-row img {
    width: 42px;
    height: 42px;
  }
  .sub-switch-button {
    min-width: 43px;
    padding: 0 7px;
  }
}
.service-centers {
  background: #fff;
}
.service-centers h1 {
  font-size: 23px;
}
.service-centers h2 {
  font-size: 18px;
}
.center-card,
.center-intro {
  padding: 20px;
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 22px;
  margin: 16px 0;
}
.center-intro {
  background: #002fa7;
  color: #fff;
}
.center-card p,
.center-intro p {
  line-height: 1.8;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.center-filters,
.center-region {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.center-filters select,
.center-region select {
  min-width: 0;
  width: 100%;
  padding: 12px 5px;
  border-radius: 12px;
  border: 1px solid #dbe2ee;
  background: #fff;
}
.center-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.center-photos > div {
  position: relative;
  width: calc(33.33% - 6px);
}
.center-photos img {
  width: calc(33.33% - 6px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
.center-photos > div img {
  width: 100%;
}
.center-photos button {
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  background: #fff9;
  border-radius: 50%;
}
.center-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0;
}
.center-stats div {
  display: grid;
  gap: 8px;
  background: #fff;
  padding: 12px 7px;
  border-radius: 12px;
  overflow-wrap: anywhere;
}
.center-stats small {
  font-size: 10px;
}
.center-stats strong {
  font-size: 16px;
}
.center-row {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid #dbe2ee;
  padding: 15px 0;
  font-size: 13px;
}
.center-row small {
  color: #64748b;
}
.center-pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.service-centers textarea {
  width: 100%;
  min-height: 90px;
}
.service-centers .primary-button {
  background: #002fa7;
}
.service-centers .form-card {
  background: #fff;
}
.service-centers .field {
  margin-bottom: 15px;
}
.center-upload {
  position: relative;
  display: block;
  text-align: center;
  padding: 22px;
  border: 1px dashed #dbe2ee;
  border-radius: 16px;
  background: #fff;
  color: #002fa7;
}
.center-upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.service-centers textarea {
  border: 1px solid #dbe2ee;
  border-radius: 13px;
  background: #fff;
  padding: 12px;
  font: inherit;
}
.service-centers .page-header {
  margin-bottom: 20px;
}
.service-centers .center-card .eyebrow {
  color: #64748b;
}
.recharge-page {
  background: #fff;
  padding: 0 22px 190px !important;
  color: #17243d;
  min-height: 100dvh;
}
.recharge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.recharge-header h1 {
  font-size: 18px;
  letter-spacing: 2px;
  margin: 0;
}
.recharge-header button {
  padding: 8px;
  border: 0;
  background: none;
  color: inherit;
}
.recharge-header svg {
  width: 22px;
}
.recharge-wallet {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  padding: 24px;
  background: linear-gradient(125deg, #002fa7, #002fa7);
  color: #fff;
  box-shadow: 0 12px 24px #14244216;
}
.recharge-wallet:after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -60px;
  bottom: -110px;
  border: 1px solid #ffffff25;
  border-radius: 50%;
  box-shadow:
    0 0 0 26px #ffffff05,
    0 0 0 53px #ffffff05;
  pointer-events: none;
}
.recharge-wallet > small {
  font-size: 12px;
  color: #fff;
}
.recharge-wallet > strong {
  font-size: 32px;
  display: block;
  margin-top: 12px;
  overflow-wrap: anywhere;
}
.recharge-wallet > strong span {
  font-size: 11px;
  font-weight: 400;
  margin-left: 7px;
}
.recharge-wallet > button {
  position: absolute;
  right: 18px;
  top: 19px;
  display: flex;
  gap: 5px;
  align-items: center;
  background: #ffffff15;
  border: 1px solid #ffffff26;
  border-radius: 20px;
  padding: 8px 10px;
  color: #fff;
  font-size: 11px;
  z-index: 1;
}
.recharge-wallet p {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 0;
}
.recharge-tabs {
  display: flex;
  padding: 5px;
  background: #fff;
  border-radius: 17px;
  margin: 25px 0 23px;
}
.recharge-tabs button {
  flex: 1;
  border: 0;
  border-radius: 13px;
  background: none;
  height: 43px;
  color: #64748b;
  font-weight: 600;
}
.recharge-tabs button[aria-pressed="true"] {
  background: #fff;
  color: #002fa7;
  box-shadow: 0 3px 9px #14244209;
}
.recharge-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 14px;
}
.recharge-heading h2 {
  font-size: 16px;
  margin: 0;
}
.recharge-heading small {
  font-size: 10px;
  color: #64748b;
}
.recharge-account {
  border: 1px solid #dbe2ee;
  background: #fff;
  border-radius: 19px;
  padding: 18px;
  margin-bottom: 25px;
}
.recharge-account label,
.recharge-account small {
  display: block;
  font-size: 11px;
  color: #64748b;
  line-height: 1.8;
  white-space: pre-wrap;
}
.recharge-account input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 21px;
  margin: 9px 0 8px;
  padding: 0;
  color: #17243d;
}
.recharge-account input::placeholder {
  color: #64748b;
  font-size: 18px;
}
.recharge-brands {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  margin-bottom: 18px;
}
.recharge-brands button {
  white-space: nowrap;
  border: 1px solid #dbe2ee;
  background: #fff;
  border-radius: 12px;
  padding: 9px 13px;
}
.recharge-brands button[aria-pressed="true"] {
  background: #002fa7;
  color: #fff;
}
.recharge-products {
  display: grid;
  gap: 10px;
}
.recharge-products button,
.recharge-amounts button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid #dbe2ee;
  background: #fff;
  border-radius: 17px;
  text-align: left;
  color: #17243d;
}
.recharge-products button > div {
  flex: 1;
}
.recharge-products strong {
  display: block;
  font-size: 14px;
}
.recharge-products small {
  display: block;
  color: #64748b;
  font-size: 11px;
  margin-top: 6px;
}
.recharge-products img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
}
.recharge-products span {
  font-size: 12px;
}
.recharge-products button[aria-pressed="true"],
.recharge-amounts button[aria-pressed="true"] {
  background: #fff;
  border-color: #002fa7;
}
.recharge-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.recharge-amounts button {
  flex-direction: column;
  padding: 15px 7px;
  text-align: center;
}
.recharge-unavailable {
  text-align: center;
  border: 1px dashed #dbe2ee;
  border-radius: 19px;
  padding: 25px 18px;
  color: #64748b;
  line-height: 1.8;
}
.recharge-unavailable svg {
  display: block;
  margin: 0 auto 13px;
  width: 30px;
  height: 30px;
}
.recharge-unavailable strong {
  font-size: 14px;
}
.recharge-unavailable p {
  font-size: 11px;
  margin-bottom: 0;
}
.recharge-help {
  border-top: 1px solid #dbe2ee;
  padding-top: 20px;
  margin-top: 25px;
}
.recharge-help h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.recharge-help p {
  font-size: 11px;
  color: #64748b;
  line-height: 1.9;
}
.recharge-footer {
  position: fixed;
  z-index: 12;
  bottom: calc(78px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  max-width: 430px;
  background: #fffffff5;
  border-top: 1px solid #dbe2ee;
  padding: 17px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.recharge-footer small {
  font-size: 10px;
  color: #64748b;
}
.recharge-footer strong {
  display: block;
  font-size: 24px;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.recharge-footer strong span {
  font-size: 11px;
  margin-left: 6px;
  font-weight: 400;
}
.recharge-page .primary-button {
  background: #002fa7;
  color: #fff;
  border: 0;
  border-radius: 15px;
  padding: 15px 23px;
}
.recharge-page button:disabled {
  opacity: 0.45;
}
.recharge-overlay {
  position: fixed;
  inset: 0;
  background: #002fa755;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.recharge-sheet {
  position: relative;
  background: #fff;
  width: min(480px, 100%);
  padding: 27px 24px calc(25px + env(safe-area-inset-bottom));
  border-radius: 27px 27px 0 0;
  max-height: 88dvh;
  overflow: auto;
}
.recharge-sheet h2 {
  font-size: 20px;
  margin: 0 35px 15px 0;
}
.recharge-sheet > p {
  color: #64748b;
  font-size: 12px;
}
.recharge-close {
  position: absolute;
  right: 20px;
  top: 22px;
  border: 0;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
  display: grid;
  place-items: center;
}
.recharge-close svg {
  width: 20px;
  height: 20px;
}
.recharge-sheet dl {
  display: grid;
  grid-template-columns: 85px 1fr;
  gap: 15px;
  background: #fff;
  padding: 18px;
  border-radius: 16px;
  font-size: 12px;
}
.recharge-sheet dt {
  color: #64748b;
}
.recharge-sheet dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.recharge-sheet form > input {
  width: 100%;
  padding: 13px;
  border: 1px solid #dbe2ee;
  background: #fff;
  border-radius: 12px;
  margin: 12px 0;
  letter-spacing: 10px;
  font-size: 23px;
  text-align: center;
}
.recharge-sheet .primary-button {
  width: 100%;
  margin-top: 15px;
}
.recharge-error {
  color: #a55137 !important;
  font-size: 12px;
  line-height: 1.7;
}
.recharge-record {
  padding: 18px 0;
  border-bottom: 1px solid #dbe2ee;
}
.recharge-record > strong {
  font-size: 14px;
  display: block;
}
.recharge-record > span {
  font-size: 11px;
  color: #002fa7;
  display: block;
  margin-top: 7px;
}
.recharge-record p,
.recharge-record small {
  font-size: 11px;
  color: #64748b;
}
.recharge-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  font-size: 12px;
  gap: 8px;
}
.recharge-pager button {
  background: #fff;
  border: 0;
  padding: 10px;
  border-radius: 9px;
  color: #002fa7;
}
.recharge-result-icon {
  display: block;
  width: 50px;
  height: 50px;
  padding: 12px;
  border-radius: 50%;
  background: #fff;
  color: #002fa7;
  margin: 10px auto 20px;
}
.recharge-page button:focus-visible {
  outline: 2px solid #dbe2ee;
  outline-offset: 3px;
}
.page.recharge-page {
  background: #fff;
}
.page.recharge-page:before {
  display: none;
}
.recharge-footer > div {
  flex: 1;
  min-width: 100px;
}
.recharge-footer small {
  white-space: nowrap;
}
.recharge-footer > .primary-button {
  width: auto;
  flex: 0 0 auto;
  min-width: 145px;
  box-shadow: none;
}
.recharge-footer strong span {
  display: inline;
  white-space: nowrap;
}
.recharge-page .primary-button {
  box-shadow: none;
}
.recharge-account input:focus-visible {
  outline: 2px solid #dbe2ee;
  outline-offset: 4px;
  border-radius: 3px;
}
@media (min-width: 700px) {
  .recharge-footer {
    bottom: calc(102px + env(safe-area-inset-bottom));
  }
}
.daily-checkin {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  background: linear-gradient(180deg, #dfe9ff 0, #eef3ff 260px, #fff 520px);
  color: #17243d;
  padding: 0 20px 100px;
  overflow: hidden;
}
.daily-checkin button {
  font: inherit;
  cursor: pointer;
}
.dc-sky {
  position: absolute;
  inset: 0 0 auto;
  height: 260px;
  z-index: -1;
  overflow: hidden;
}
.dc-sky i:first-child {
  position: absolute;
  right: 28px;
  top: 50px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #eef3ff8c;
  box-shadow: 0 0 0 16px #14244221;
}
.dc-sky i:nth-child(2),
.dc-sky i:nth-child(3) {
  position: absolute;
  left: -30px;
  top: 135px;
  width: 155px;
  height: 28px;
  border-radius: 100%;
  background: #ffffff57;
  transform: rotate(-8deg);
}
.dc-sky i:nth-child(3) {
  left: auto;
  right: -50px;
  top: 195px;
  width: 185px;
}
.dc-header {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  padding: 24px 0 20px;
  text-align: center;
}
.dc-header h1 {
  font-size: 18px;
  margin: 0;
  letter-spacing: 1px;
}
.dc-header button {
  background: #ffffff35;
  border: 1px solid #ffffff40;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #17243d;
}
.dc-header svg {
  width: 18px;
}
.dc-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 3px 23px;
}
.dc-avatar {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ffffff8c;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.dc-avatar img,
.dc-record-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dc-member > div:nth-child(2) {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.dc-member strong {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.dc-member span {
  font-size: 10px;
  color: #002fa7;
}
.dc-member .dc-days {
  margin-left: auto;
  display: grid;
  text-align: right;
  gap: 3px;
  flex-shrink: 0;
}
.dc-days strong {
  font:
    600 25px Arial,
    sans-serif;
}
.dc-days small {
  font:
    11px Microsoft YaHei,
    sans-serif;
}
.dc-reward {
  position: relative;
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 26px;
  padding: 8px 24px 24px;
  text-align: center;
  box-shadow: 0 12px 35px #14244210;
  overflow: hidden;
}
.dc-art {
  height: 190px;
  position: relative;
  display: grid;
  place-items: center;
}
.dc-halo {
  position: absolute;
  width: 162px;
  height: 162px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #eef3ffaa,
    #eef3ff50 65%,
    transparent 66%
  );
  box-shadow: 0 0 0 15px #14244232;
}
.dc-present {
  width: 106px;
  height: 100px;
  position: relative;
  transform: rotate(-7deg);
  animation: dc-float 4s ease-in-out infinite;
}
.dc-box {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 34px;
  height: 72px;
  border-radius: 5px 5px 14px 14px;
  background: linear-gradient(110deg, #dfe9ff, #eef3ff 52%, #dfe9ff);
  box-shadow: 6px 9px #1424421c;
}
.dc-lid {
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  top: 19px;
  border-radius: 6px;
  background: linear-gradient(110deg, #dfe9ff, #002fa7);
  box-shadow: 0 3px #14244222;
  z-index: 2;
}
.dc-ribbon {
  position: absolute;
  left: 44px;
  top: 19px;
  height: 87px;
  width: 19px;
  background: #002fa7;
  z-index: 3;
}
.dc-bow {
  position: absolute;
  top: -4px;
  width: 34px;
  height: 24px;
  border: 7px solid #002fa7;
  z-index: 3;
}
.dc-bow-left {
  left: 20px;
  border-radius: 70% 70% 0;
  transform: rotate(22deg);
}
.dc-bow-right {
  right: 16px;
  border-radius: 70% 70% 70% 0;
  transform: rotate(-22deg);
}
.dc-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #dfe9ff;
  border-radius: 2px;
  left: calc(50% + (var(--n) - 3.5) * 27px);
  top: calc(42px + mod(var(--n), 3) * 45px);
  transform: rotate(45deg);
  opacity: 0.5;
}
.dc-seal {
  position: absolute;
  right: calc(50% - 72px);
  bottom: 28px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #002fa7;
  border: 3px solid #dbe2ee;
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 4;
}
.dc-seal svg {
  width: 18px;
}
.dc-eyebrow {
  font-size: 10px;
  color: #64748b;
  letter-spacing: 2px;
}
.dc-reward h2 {
  font-size: 25px;
  letter-spacing: 1px;
  margin: 11px 0;
}
.dc-description {
  font-size: 11px;
  color: #64748b;
  line-height: 1.8;
  margin: 0 0 21px;
}
.dc-dock {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.dc-claim {
  min-height: 51px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(100deg, #dfe9ff, #eef3ff);
  color: #17243d;
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px #142442;
  font-size: 15px !important;
}
.dc-claim svg {
  width: 18px;
}
.dc-claim:active {
  transform: translateY(2px);
  box-shadow: 0 2px #142442;
}
.dc-claim:disabled {
  opacity: 0.6;
  cursor: wait;
}
.dc-dock small {
  color: #64748b;
  font-size: 10px;
  margin-top: 4px;
}
.dc-total {
  font-size: 18px;
  color: #002fa7;
  font-weight: 600;
  margin: 14px 0;
}
.dc-awards {
  border-top: 1px solid #dbe2ee;
  margin-top: 18px;
  padding-top: 8px;
  max-height: 160px;
  overflow: auto;
}
.dc-awards > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 11px;
  color: #64748b;
}
.dc-awards strong {
  color: #002fa7;
}
.dc-error {
  color: #a54c39;
  font-size: 12px;
  line-height: 1.6;
}
.dc-records {
  margin-top: 25px;
  border: 1px solid #dbe2ee;
  background: #fff;
  border-radius: 21px;
  overflow: hidden;
}
.dc-records > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 16px 15px;
  gap: 6px;
}
.dc-records > header > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dc-records h2 {
  margin: 0;
  font-size: 15px;
}
.dc-records header > span {
  font-size: 9px;
  color: #64748b;
  white-space: nowrap;
}
.dc-heading-icon {
  color: #64748b;
}
.dc-heading-icon svg {
  width: 17px;
  height: 17px;
}
.dc-records ul {
  list-style: none;
  margin: 0;
  padding: 0 17px;
}
.dc-records li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 0;
  border-top: 1px solid #dbe2ee;
  animation: dc-rise 0.35s ease both;
}
.dc-record-avatar {
  width: 35px;
  height: 35px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  color: #64748b;
}
.dc-record-avatar svg {
  width: 18px;
}
.dc-record-name {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.dc-record-name strong {
  font-size: 12px;
  font-weight: 500;
}
.dc-record-name small {
  font-size: 9px;
  color: #64748b;
}
.dc-record-amount {
  display: grid;
  gap: 4px;
  text-align: right;
  margin-left: auto;
  min-width: 0;
}
.dc-record-amount strong {
  font:
    600 18px Arial,
    sans-serif;
  color: #002fa7;
  overflow-wrap: anywhere;
}
.dc-record-amount small {
  font-size: 9px;
  color: #64748b;
}
.dc-empty {
  padding: 22px 12px 30px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
}
.dc-empty > svg {
  margin: auto;
  width: 26px;
  height: 26px;
  color: #64748b;
}
.dc-empty button {
  background: #fff;
  color: #002fa7;
  border: 0;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 11px;
}
.dc-status-loading {
  padding: 18px;
  font-size: 12px;
  color: #969c84;
}
.dc-skeleton {
  padding: 0 17px 15px;
}
.dc-skeleton > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
}
.dc-skeleton i {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
}
.dc-skeleton span {
  width: 85px;
  height: 13px;
  border-radius: 5px;
  background: #fff;
}
.dc-skeleton b {
  margin-left: auto;
  width: 40px;
  height: 16px;
  border-radius: 5px;
  background: #fff;
}
.dc-ending {
  text-align: center;
  font-size: 10px;
  color: #64748b;
  margin: 20px 0;
  letter-spacing: 1px;
}
.is-celebrating .dc-lid {
  animation: dc-open 1.6s ease;
}
.is-celebrating .dc-particle {
  animation: dc-burst 1.4s ease both;
  animation-delay: calc(var(--n) * 40ms);
}
@keyframes dc-float {
  50% {
    transform: translateY(-7px) rotate(-3deg);
  }
}
@keyframes dc-open {
  35%,
  65% {
    transform: translateY(-18px) rotate(-9deg);
  }
}
@keyframes dc-burst {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.2);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-50px) rotate(180deg);
  }
}
@keyframes dc-rise {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .daily-checkin * {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 360px) {
  .daily-checkin {
    padding-left: 14px;
    padding-right: 14px;
  }
  .dc-reward {
    padding-left: 17px;
    padding-right: 17px;
  }
  .dc-records > header {
    padding-left: 12px;
    padding-right: 12px;
  }
  .dc-records h2 {
    font-size: 14px;
  }
  .dc-records header > span {
    font-size: 8px;
  }
}
.dc-success {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fffaf0;
  border: 1px solid #fffdf6;
  border-radius: 18px;
  padding: 19px 20px;
  box-shadow: 0 7px 22px #52623e09;
}
.dc-success-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e5ecd8;
  color: #587044;
}
.dc-success-icon svg {
  width: 22px;
}
.dc-success h2 {
  margin: 0;
  font-size: 17px;
}
.dc-success p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #8d703a;
}
.dc-record-name strong {
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.dc-record-amount {
  flex-shrink: 0;
}
.dc-dock .dc-claim {
  width: 100%;
}
.dc-gift-reminder {
  display: flex;
  gap: 10px;
  text-align: left;
  background: #f3f7ff;
  border: 1px solid #dfebff;
  border-radius: 13px;
  padding: 14px;
}
.dc-gift-reminder > svg {
  width: 20px;
  flex-shrink: 0;
  color: #347cf0;
}
.dc-gift-reminder strong {
  font-size: 14px;
  color: #315889;
}
.dc-gift-reminder p {
  font-size: 12px;
  color: #7486a2;
  line-height: 1.8;
  margin: 5px 0 0;
}
.dc-sign-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dc-sign-actions button {
  font-size: 14px !important;
  min-height: 46px;
  white-space: nowrap;
  border-radius: 11px;
}
.dc-activate {
  background: #347cf0;
  color: #fff;
  border: 1px solid #347cf0;
  font-weight: 600;
}
.dc-activate:disabled {
  opacity: 0.6;
}
.dc-sign-actions .dc-claim {
  background: #fff;
  color: #3473d3;
  border: 1px solid #347cf0;
  box-shadow: none;
  gap: 4px;
}
.dc-no-reward .dc-art {
  height: 140px;
}
.dc-no-reward h2 {
  font-size: 22px;
}
.dc-no-reward .dc-halo {
  width: 125px;
  height: 125px;
}
.dc-no-reward .dc-present {
  scale: 0.82;
}
.myg-page {
  background: #fff;
  color: #17243d;
}
.myg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.myg-header h1 {
  font-size: 22px;
  margin: 0;
}
.myg-overview {
  padding: 22px;
  border-radius: 24px;
  background: #002fa7;
  color: #fff;
}
.myg-overview-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.myg-overview-title svg {
  opacity: 0.7;
}
.myg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 22px 0 18px;
  gap: 12px;
}
.myg-stats > button,
.myg-stats > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
}
.myg-stats button {
  cursor: pointer;
}
.myg-stats strong {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}
.myg-stats span {
  font-size: 12px;
  color: #fff;
}
.myg-overview p {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid #ffffff24;
  font-size: 10px;
  line-height: 1.7;
  color: #fff;
}
.myg-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #eef3ff;
  border-radius: 14px;
  padding: 5px;
  margin: 22px 0 16px;
}
.myg-tabs button {
  border: 0;
  border-radius: 10px;
  padding: 12px 3px;
  background: none;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.myg-tabs button[aria-pressed="true"] {
  color: #17243d;
  background: #fff;
  box-shadow: 0 2px 6px #1424420a;
}
.myg-filters {
  display: flex;
  gap: 7px;
  overflow: auto;
  padding: 0 0 14px;
}
.myg-filters button {
  white-space: nowrap;
  border: 1px solid #dbe2ee;
  background: transparent;
  color: #64748b;
  padding: 7px 11px;
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
}
.myg-filters button[aria-pressed="true"] {
  background: #002fa7;
  color: #fff;
  border-color: #002fa7;
}
.myg-list {
  display: grid;
  gap: 16px;
}
.myg-card {
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 20px;
  padding: 18px;
}
.myg-card-heading {
  display: flex;
  gap: 11px;
  align-items: center;
}
.myg-card-heading > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.myg-gift-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eef3ff;
  color: #002fa7;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.myg-card h2 {
  font-size: 16px;
  overflow-wrap: anywhere;
  margin: 0 0 5px;
}
.myg-source {
  color: #64748b;
  font-size: 10px;
}
.myg-status {
  font-size: 10px;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 7px;
  background: #edece5;
  color: #8b907a;
}
.myg-status.active {
  background: #e5eddc;
  color: #557345;
}
.myg-status.pending_activation {
  background: #f6ecd2;
  color: #a58745;
}
.myg-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 17px 0;
}
.myg-card-details > div {
  display: grid;
  gap: 7px;
}
.myg-card-details span {
  font-size: 10px;
  color: #64748b;
}
.myg-card-details strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}
.myg-card-details small {
  font-size: 10px;
  font-weight: 400;
}
.myg-card-details > div:last-child strong {
  font-size: 14px;
}
.myg-dates {
  display: grid;
  gap: 6px;
  font-size: 10px;
  line-height: 1.6;
  color: #64748b;
  border-top: 1px solid #dbe2ee;
  padding-top: 12px;
}
.myg-person {
  font-size: 11px;
  overflow-wrap: anywhere;
  color: #002fa7;
  margin: 0 0 12px;
}
.myg-hint {
  font-size: 10px;
  color: #64748b;
  margin: 10px 0 0;
}
.myg-actions {
  display: flex;
  gap: 9px;
  margin-top: 15px;
}
.myg-actions:empty {
  display: none;
}
.myg-actions button {
  margin: 0;
  flex: 1;
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 4px;
  font-size: 11px;
}
.myg-actions svg {
  width: 13px;
  height: 13px;
}
.myg-empty {
  text-align: center;
  color: #64748b;
  background: #fff;
  border-radius: 20px;
  padding: 35px 15px;
  font-size: 12px;
}
.myg-empty > svg {
  width: 34px;
  height: 34px;
  color: #64748b;
}
.myg-records {
  background: #fff;
  border-radius: 20px;
  padding: 17px;
}
.myg-records > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.myg-records h2 {
  font-size: 15px;
  margin: 0;
}
.myg-records .text-button {
  font-size: 11px;
}
.myg-record {
  display: flex;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid #dbe2ee;
}
.myg-record-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  color: #002fa7;
  flex-shrink: 0;
}
.myg-record-icon.sent {
  background: #fff;
  color: #64748b;
}
.myg-record-icon svg {
  width: 17px;
}
.myg-record-body {
  flex: 1;
  min-width: 0;
}
.myg-record-body > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.myg-record h3 {
  font-size: 13px;
  margin: 0;
  overflow-wrap: anywhere;
}
.myg-record strong {
  white-space: nowrap;
  font-size: 14px;
}
.myg-record p {
  font-size: 11px;
  color: #64748b;
  line-height: 1.6;
  overflow-wrap: anywhere;
  margin: 8px 0;
}
.myg-record time {
  font-size: 10px;
  color: #64748b;
}
.myg-record-state {
  font-size: 10px;
  color: #64748b;
  margin-left: 9px;
  display: inline-block;
}
.myg-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  font-size: 11px;
  color: #64748b;
}
.myg-pager button {
  border: 0;
  background: #fff;
  color: #002fa7;
  border-radius: 8px;
  padding: 8px 11px;
}
.myg-pager button:disabled {
  opacity: 0.4;
}
@media (max-width: 350px) {
  .myg-card {
    padding: 14px;
  }
  .myg-status {
    font-size: 9px;
    padding: 4px;
  }
  .myg-card-heading {
    gap: 7px;
  }
  .myg-gift-icon {
    width: 36px;
    height: 36px;
  }
}
.myg-records > header h2 {
  white-space: nowrap;
  flex-shrink: 0;
}
.myg-records > header .text-button {
  width: auto;
  margin: 0;
  padding: 5px 0;
  color: #002fa7;
  flex: none;
}
.myg-recipient-status {
  font-size: 12px;
  color: #64748b;
  margin: 10px 0;
}
.myg-transfer-dialog .gift-recipient-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin: 12px 0;
  border: 1px solid #7592b34d;
  border-radius: 12px;
  background: #7592b315;
}
.myg-transfer-dialog .gift-recipient-card img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
}
.myg-transfer-dialog .gift-recipient-card small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}
.myg-summary-card {
  cursor: default;
}
.myg-detail-button {
  width: 100%;
  margin-top: 4px;
}
.myg-detail-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.myg-detail-header h2 {
  font-size: 17px;
  text-align: center;
  margin: 0;
  overflow-wrap: anywhere;
}
.myg-detail-header .text-button {
  width: auto;
  margin: 0;
  padding: 5px 0;
  color: #002fa7;
  white-space: nowrap;
}
.myg-detail-header > span {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}
.myg-detail-summary {
  font-size: 11px;
  color: #64748b;
  background: #f3f6ff;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
  line-height: 1.6;
}
.myg-cancellation-warning {
  border: 2px solid #b45309;
  border-radius: 14px;
  padding: 14px;
  margin: 14px 0;
  background: #fffbeb;
  color: #78350f;
  text-align: left;
  overflow-wrap: anywhere;
}
.myg-cancellation-warning > strong {
  display: block;
  font-size: 18px;
}
.myg-cancellation-warning p {
  margin: 10px 0;
  line-height: 1.65;
  color: inherit;
}
.myg-cancellation-warning b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.myg-cancellation-warning small {
  display: block;
  line-height: 1.6;
}
.myg-cooling .secondary-button {
  margin-bottom: 10px;
}
.myg-cancellation-countdown {
  margin: 12px 0 0;
  color: #9a5a15;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.profile-refresh {
  padding-top: max(18px, env(safe-area-inset-top));
}
.profile-refresh:before {
  display: none;
}
.profile-logout-button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 8px 0 20px;
  border: 1.5px solid #b64242;
  border-radius: 16px;
  background: transparent;
  color: #a72e2e;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.profile-logout-button svg {
  width: 20px;
  height: 20px;
}
.profile-logout-button:active {
  background: #b642421a;
}
.profile-logout-dialog {
  width: min(340px, calc(100vw - 40px));
  box-sizing: border-box;
  border: 0;
  border-radius: 22px;
  padding: 24px;
  background: var(--sand, #eef3ff);
  color: var(--ink, #333);
  box-shadow: 0 18px 60px #0003;
}
.profile-logout-dialog::backdrop {
  background: #002fa780;
}
.profile-logout-dialog h2 {
  margin: 0 0 12px;
  font-size: 20px;
}
.profile-logout-dialog p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 24px;
}
.profile-logout-dialog > div {
  display: flex;
  gap: 12px;
}
.profile-logout-dialog button {
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid #002fa7;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.profile-logout-dialog .logout-confirm {
  background: #b64242;
  border-color: #b64242;
  color: #fff;
  font-weight: 700;
}
.profile-logout-dialog button:focus-visible,
.profile-logout-button:focus-visible {
  outline: 3px solid #002fa7;
  outline-offset: 3px;
}
.profile-refresh .profile-hero {
  min-height: 94px;
  grid-template-columns: 62px minmax(0, 1fr) 40px;
  gap: 12px;
  padding: 8px 0 12px;
}
.profile-refresh .profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 21px;
  box-shadow: 0 3px #1424424d;
}
.profile-refresh .profile-person strong {
  font-size: 20px;
  line-height: 1.35;
}
.profile-refresh .profile-person small {
  font-size: 12px;
  color: #002fa7;
}
.profile-refresh .profile-edit {
  background: #eef3ff6b;
}
.profile-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.profile-badges span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 5px 9px;
  background: #eef3ff73;
  border: 1px solid rgba(0, 47, 167, 0.12);
  border-radius: 8px;
  color: #002fa7;
  font-size: 11px;
  font-weight: 700;
}
.profile-badges svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.profile-badges .verified {
  background: #8b9d8333;
}
.profile-assets {
  padding: 18px;
  border-radius: 24px;
  background: var(--moss);
  color: var(--sand);
  box-shadow: 0 8px 20px #1424421a;
}
.assets-heading {
  display: flex;
  align-items: center;
  gap: 5px;
}
.profile-assets h2 {
  font-size: 13px;
  margin: 0;
  font-weight: 600;
}
.profile-assets button {
  border: 0;
  color: inherit;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 36px;
  cursor: pointer;
}
.assets-visibility {
  width: 36px;
  padding: 8px;
}
.assets-visibility svg {
  width: 17px;
  height: 17px;
}
.assets-ledger {
  margin-left: auto;
  font-size: 12px;
  padding: 0;
}
.assets-ledger svg {
  width: 14px;
  height: 14px;
}
.assets-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  padding: 8px 0 18px;
}
.assets-primary > span {
  grid-column: 1/-1;
  font-size: 12px;
}
.assets-primary strong {
  font-size: clamp(25px, 7.5vw, 32px);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}
.assets-primary > button {
  align-self: center;
  border-radius: 10px;
  background: var(--sand);
  color: var(--moss);
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}
.assets-primary > button svg {
  width: 14px;
}
.assets-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid rgba(219, 226, 238, 0.24);
  padding-top: 15px;
  gap: 16px;
}
.assets-secondary article {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.assets-secondary article + article {
  border-left: 1px solid rgba(219, 226, 238, 0.24);
  padding-left: 16px;
}
.assets-secondary article > span {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.assets-secondary strong {
  font-size: 19px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}
.assets-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.assets-actions button {
  border-radius: 8px;
  background: #eef3ff1f;
  padding: 0 12px;
  font-size: 12px;
  min-height: 32px;
}
.profile-checkin {
  margin: 14px 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(0, 47, 167, 0.25);
  border-radius: 18px;
  background: #eef3ff66;
  color: var(--ink);
  text-align: left;
}
.checkin-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #002fa72e;
  color: #002fa7;
  flex-shrink: 0;
}
.profile-checkin > span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.profile-checkin strong {
  font-size: 14px;
}
.profile-checkin small {
  font-size: 11px;
  color: #002fa7;
}
.checkin-go {
  display: flex;
  align-items: center;
  margin-left: auto;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: #002fa7;
}
.checkin-go svg {
  width: 15px;
}
.profile-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 15px 4px;
  border-radius: 20px;
  background: #dfe9ff21;
  gap: 3px;
  margin-bottom: 22px;
}
.profile-shortcuts button {
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
}
.profile-shortcuts button > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #dfe9ff3b;
  color: var(--moss);
}
.profile-shortcuts button:nth-child(2) > span {
  background: #002fa729;
  color: #002fa7;
}
.profile-shortcuts button:nth-child(4) > span {
  background: #c66b3d21;
  color: #98562e;
}
.profile-shortcuts svg {
  width: 22px;
  height: 22px;
}
.profile-services > h2 {
  font-size: 14px;
  margin: 0 0 10px 3px;
}
.profile-refresh .profile-menu {
  background: #eef3ff4d;
  border-radius: 18px;
}
.profile-refresh .profile-menu-row {
  min-height: 54px;
}
.profile-refresh .profile-menu-row span {
  font-size: 13px;
  font-weight: 600;
}
.profile-refresh .profile-menu-row > svg:first-child {
  width: 19px;
  height: 19px;
  color: var(--moss);
}
.profile-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}
.profile-footer button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  color: #002fa7;
  font-size: 11px;
  min-height: 36px;
  padding: 0;
}
.profile-footer svg {
  width: 13px;
  height: 13px;
}
.profile-footer button:last-child {
  color: #914c37;
}
.profile-refresh button {
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
.profile-refresh button:active {
  transform: translateY(1px);
}
.profile-refresh button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}
.profile-assets button:focus-visible {
  outline-color: var(--sand);
}
@media (prefers-reduced-motion: reduce) {
  .profile-refresh button {
    transition: none;
  }
}
.profile-page.profile-refresh .profile-assets {
  position: relative;
  isolation: isolate;
  padding: 10px 16px 12px;
  border: 1px solid #002fa7;
  border-radius: 20px;
  background: linear-gradient(125deg, #002fa7, #002fa7);
  color: #fff;
  box-shadow: 0 8px 22px #14244217;
  overflow: hidden;
}
.profile-page.profile-refresh .profile-assets:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 210px;
  height: 210px;
  right: -120px;
  top: -135px;
  border: 1px solid #dbe2ee35;
  border-radius: 50%;
  box-shadow: 0 0 0 22px #1424420b;
  pointer-events: none;
}
.profile-page.profile-refresh .assets-heading {
  margin: 0;
  min-height: 28px;
  gap: 3px;
}
.profile-page.profile-refresh .assets-heading h2 {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #fff;
}
.profile-page.profile-refresh .assets-visibility {
  min-height: 30px;
  width: 30px;
  padding: 6px;
  color: #64748b;
}
.profile-page.profile-refresh .assets-ledger {
  font-size: 11px;
  min-height: 30px;
  color: #fff;
}
.profile-page.profile-refresh .assets-primary {
  padding: 3px 0 10px;
  gap: 4px 12px;
  min-height: 0;
}
.profile-page.profile-refresh .assets-primary > span {
  font-size: 11px;
  color: #fff;
}
.profile-page.profile-refresh .assets-primary strong {
  font-size: clamp(23px, 6.5vw, 28px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.profile-page.profile-refresh .assets-primary > button {
  border: 1px solid #dbe2ee;
  border-radius: 20px;
  background: #eef3ff;
  color: #17243d;
  padding: 0 12px;
  min-height: 32px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.profile-page.profile-refresh .assets-secondary {
  gap: 14px;
  border-top: 1px solid #dbe2ee2b;
  padding-top: 10px;
}
.profile-page.profile-refresh .assets-secondary article {
  padding: 0;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}
.profile-page.profile-refresh .assets-secondary article + article {
  padding-left: 14px;
  border-left: 1px solid #dbe2ee2b;
}
.profile-page.profile-refresh .assets-secondary article > span {
  font-size: 11px;
  color: #fff;
}
.profile-page.profile-refresh .assets-secondary strong {
  font-size: clamp(17px, 4.5vw, 20px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
.profile-page.profile-refresh .assets-actions {
  display: flex;
  gap: 7px;
  margin-top: 2px;
}
.profile-page.profile-refresh .assets-actions button {
  flex: 1;
  min-height: 28px;
  padding: 0 6px;
  background: #eef3ff12;
  border: 1px solid #dbe2ee2e;
  border-radius: 8px;
  font-size: 11px;
}
.profile-page.profile-refresh .profile-assets button:hover {
  filter: brightness(1.08);
}
.profile-support-float {
  position: fixed;
  top: 50%;
  right: max(12px, calc((100vw - 430px) / 2 + 12px));
  transform: none;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 64px;
  min-height: 68px;
  padding: 10px 5px;
  border: 1px solid var(--oat);
  border-radius: 20px;
  background: var(--moss);
  color: var(--sand);
  box-shadow: 0 5px 18px #14244233;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.profile-support-float svg {
  width: 27px;
  height: 27px;
}
.profile-support-float:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}
.profile-support-float:active {
  transform: translateY(1px);
}
.profile-support-float[data-eye-care="true"] {
  background: #56634f;
  color: #f1eadb;
  border-color: #e6d9bd;
}
.profile-support-float.is-dragging {
  cursor: grabbing;
  transform: none;
}
.profile-page.profile-refresh .assets-secondary article {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
}
.profile-page.profile-refresh .assets-secondary article > span {
  overflow-wrap: anywhere;
  min-width: 0;
}
.profile-page.profile-refresh .assets-secondary article > strong {
  font-size: 18px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.profile-page.profile-refresh .assets-secondary article > button {
  margin-left: auto;
  border: 1px solid #dbe2ee;
  border-radius: 18px;
  background: #eef3ff;
  color: #17243d;
  padding: 5px 14px;
  white-space: nowrap;
  min-height: 32px;
}
.invitation-travel-page {
  background: #0d0d12;
  color: #fff;
  padding: 0 16px 100px;
  min-height: 100dvh;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    PingFang SC,
    Microsoft YaHei,
    sans-serif;
}
.inv-header {
  height: 64px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  text-align: center;
  font-size: 15px;
}
.inv-header button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ffffff25;
  background: #ffffff0c;
  border-radius: 12px;
  color: #fff;
}
.inv-header svg {
  width: 19px;
}
.inv-poster {
  max-width: 430px;
  margin: auto;
  background: linear-gradient(#0d0d12, #1a1a2e);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px #0005;
  border: 1px solid #ffffff12;
}
.inv-hero {
  height: 310px;
  position: relative;
  overflow: hidden;
}
.inv-hero > .inv-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(1.1) brightness(0.9);
}
.inv-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 25%, #0d0d12 100%);
}
.inv-hero-copy {
  position: absolute;
  left: 24px;
  right: 20px;
  bottom: 52px;
  z-index: 1;
}
.inv-hero-copy > span {
  font-size: 12px;
  letter-spacing: 3px;
  color: #ffb84d;
}
.inv-hero-copy h1 {
  font-size: 32px;
  line-height: 1.2;
  margin: 10px 0 0;
  font-weight: 900;
  letter-spacing: 0;
  background: linear-gradient(90deg, #fff, #ffb84d);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  overflow-wrap: anywhere;
}
.inv-thumbs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 0 16px;
  margin-top: -30px;
}
.inv-thumbs img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: center 32%;
  border-radius: 10px;
  box-shadow: 0 6px 16px #0006;
}
.inv-code-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 16px 10px;
  padding: 12px;
  background: #ffffff0b;
  border: 1px solid #ffb84d45;
  border-radius: 14px;
}
.inv-qr {
  flex: 0 0 132px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.inv-qr svg {
  display: block;
  width: 132px;
  height: 132px;
}
.inv-code {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.inv-code > span {
  font-size: 11px;
  color: #b9b8bf;
}
.inv-code strong {
  font-size: 27px;
  color: #ffb84d;
  letter-spacing: 2px;
  font-family: monospace;
  -webkit-user-select: text;
  user-select: text;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.inv-code small {
  font-size: 10px;
  color: #aaa;
}
.inv-code button {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #ffb84d55;
  color: #ffcc80;
  background: #ffb84d0c;
  border-radius: 7px;
  padding: 7px;
  font-size: 11px;
}
.inv-code button svg {
  width: 12px;
  height: 12px;
}
.inv-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #adacb6;
  font-size: 10px;
  margin: 12px 10px 20px;
}
.inv-hint svg {
  width: 14px;
  height: 14px;
}
.inv-services {
  padding: 0 16px;
}
.inv-services > p {
  text-align: center;
  color: #aaa;
  font-size: 11px;
  letter-spacing: 3px;
  margin: 0 0 12px;
}
.inv-services > div {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.inv-services span {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.inv-services i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff0e;
  color: #ffc873;
}
.inv-services svg {
  width: 18px;
  height: 18px;
}
.inv-services b {
  font-size: 10px;
  font-weight: 400;
  color: #ccc;
}
.inv-services small {
  font-size: 8px;
  color: #999;
}
.inv-cta {
  margin: 20px 16px 0;
  padding: 13px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #291a0c;
  background: linear-gradient(90deg, #ff7a45, #ffb84d);
  border-radius: 30px;
  box-shadow: 0 8px 20px #ff7a4533;
}
.inv-poster footer {
  text-align: center;
  color: #96939f;
  font-size: 10px;
  padding: 18px 12px;
}
.inv-copy-error {
  color: #ffd49a;
  font-size: 12px;
  padding: 0 18px;
}
@media (max-width: 350px) {
  .invitation-travel-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .inv-code-card {
    gap: 10px;
    margin-left: 12px;
    margin-right: 12px;
    padding: 10px;
  }
  .inv-qr {
    flex-basis: 120px;
  }
  .inv-qr svg {
    width: 120px;
    height: 120px;
  }
  .inv-code strong {
    font-size: 23px;
  }
  .inv-hero-copy h1 {
    font-size: 28px;
  }
}
.page.invitation-travel-page {
  background: #0d0d12;
  padding: 0 16px 110px;
}
.page.invitation-travel-page:before {
  display: none;
}
.app-shell:has(.invitation-travel-page) {
  background: #0d0d12;
}
.app-shell:has(.invitation-travel-page) .bottom-nav {
  background: #191821;
  border-top: 1px solid #ffb84d22;
}
.app-shell:has(.invitation-travel-page) .bottom-nav button {
  color: #b7b2bd;
}
@media (max-width: 350px) {
  .page.invitation-travel-page {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.sensitive-verification-dialog {
  display: grid;
  gap: 16px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.sensitive-verification-dialog h2 {
  margin-bottom: -8px;
}
.sensitive-verification-dialog .dialog-icon {
  color: #fff;
  background: #002fa7;
}
.sensitive-verification-dialog .dialog-icon svg {
  width: 27px;
}
.sensitive-verification-dialog .inline-error {
  margin: 0;
}
.sensitive-verification-loading {
  min-height: 72px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #f5f7fb;
  color: #667085;
  font-size: 12px;
}
.sensitive-methods {
  margin: 0;
}
.sensitive-verification-dialog > .primary-button,
.sensitive-verification-dialog > .secondary-button {
  width: 100%;
}
.sensitive-verification-dialog .field {
  display: grid;
  gap: 7px;
  color: #43516a;
  font-size: 12px;
}
.sensitive-verification-dialog .field input {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid #dbe2ee;
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  color: #17243d;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.sensitive-verification-dialog .field input:focus {
  border-color: #002fa7;
  box-shadow: 0 0 0 3px #002fa71a;
}
.sensitive-code-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 25px;
}
.sensitive-code-heading > span {
  font-weight: 600;
}
.sensitive-bind-link {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin: -6px -5px -6px 0;
  padding: 6px 5px;
  border: 0;
  background: transparent;
  color: #002fa7;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sensitive-bind-link svg {
  width: 15px;
  height: 15px;
}
.sensitive-bind-link:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.sensitive-totp-field.unbound input {
  background: #f8fafc;
  color: #98a2b3;
}
.sensitive-unbound-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 9px;
  padding: 13px 14px;
  border-radius: 15px;
  background: #f5f8ff;
  color: #344054;
}
.sensitive-unbound-note > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #002fa7;
}
.sensitive-unbound-note div {
  display: grid;
  gap: 3px;
}
.sensitive-unbound-note strong {
  font-size: 12px;
}
.sensitive-unbound-note span {
  color: #667085;
  font-size: 11px;
  line-height: 1.5;
}
.pt-page {
  background: #fff;
  color: #17243d;
}
.pt-page .page-header {
  display: flex;
  gap: 15px;
  align-items: center;
}
.pt-page .page-header h1 {
  font-size: 22px;
}
.pt-balance {
  background: #002fa7;
  color: #fff;
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 20px;
}
.pt-balance > span {
  font-size: 12px;
  color: #fff;
}
.pt-balance > strong {
  display: block;
  font-size: 32px;
  margin: 10px 0 20px;
  overflow-wrap: anywhere;
}
.pt-balance strong small {
  font-size: 12px;
  font-weight: 400;
}
.pt-balance > div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ffffff25;
  padding-top: 13px;
  gap: 10px;
}
.pt-balance > div span {
  display: grid;
  gap: 8px;
  font-size: 10px;
}
.pt-balance b {
  font-size: 12px;
}
.pt-balance p {
  font-size: 10px;
  color: #fff;
  margin-bottom: 0;
}
.pt-help {
  font-size: 11px;
  color: #64748b;
  line-height: 1.8;
}
.pt-success {
  background: #fffaf0;
  border-radius: 22px;
  padding: 24px;
  text-align: center;
  display: grid;
  gap: 13px;
}
.pt-success > svg {
  margin: auto;
  color: #60784d;
  width: 38px;
  height: 38px;
}
.pt-success h2 {
  margin: 0;
}
.pt-success > strong {
  font-size: 28px;
}
.pt-success p {
  font-size: 12px;
}
.pt-success small {
  overflow-wrap: anywhere;
  color: #839071;
}
.pt-history {
  margin-top: 24px;
  background: #fff;
  border-radius: 20px;
  padding: 18px;
}
.pt-history header,
.pt-history article > div,
.pt-pages {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pt-history h2 {
  font-size: 16px;
  margin: 0;
}
.pt-history button {
  border: 0;
  background: #fff;
  border-radius: 7px;
  padding: 7px 11px;
  color: #002fa7;
}
.pt-history article {
  border-top: 1px solid #dbe2ee;
  margin-top: 15px;
  padding-top: 15px;
  display: grid;
  gap: 7px;
}
.pt-history strong,
.pt-history b {
  font-size: 12px;
}
.pt-history small {
  font-size: 10px;
  overflow-wrap: anywhere;
  color: #64748b;
}
.pt-pages {
  font-size: 11px;
  margin-top: 18px;
}
.pt-error {
  margin-top: 16px;
  overflow-wrap: anywhere;
}
.pt-recipient {
  position: fixed;
  z-index: 51;
  left: 50%;
  top: 12%;
  transform: translate(-50%);
  background: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  width: min(330px, 90vw);
}
.pt-recipient img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.dialog .pt-recipient {
  position: static;
  transform: none;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  background: #fff;
  z-index: auto;
}
.dialog .pt-recipient img {
  flex-shrink: 0;
}
.sp-page {
  background: #f7f7f8;
  color: #17243d;
}
.sp-page .page-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
}
.sp-page .page-header h1 {
  margin: 2px 0 0;
  font-size: 22px;
  letter-spacing: 0;
}
.sp-summary {
  padding: 20px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: #002fa7;
  color: #fff;
}
.sp-summary > span,
.sp-summary p {
  font-size: 12px;
  color: #dce7ff;
}
.sp-summary > strong {
  display: block;
  margin: 8px 0;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.sp-summary small {
  font-size: 12px;
  font-weight: 500;
}
.sp-summary p {
  margin: 0;
}
.sp-quota-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 12px;
  padding-top: 14px;
  border-top: 1px solid #ffffff30;
}
.sp-quota-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 11px 10px 11px 13px;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  background: #ffffff12;
  overflow: hidden;
}
.sp-quota-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #8db3ff;
}
.sp-quota-card.team:before {
  background: #ffd166;
}
.sp-quota-card span {
  color: #dce7ff;
  font-size: 10px;
  line-height: 1.35;
}
.sp-quota-card b {
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.sp-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-bottom: 14px;
  padding: 4px;
  background: #e9edf4;
  border-radius: 12px;
}
.sp-tabs button {
  min-width: 0;
  padding: 10px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
}
.sp-tabs button[aria-selected="true"] {
  background: #fff;
  color: #002fa7;
  font-weight: 650;
  box-shadow: 0 2px 8px #17243d0d;
}
.sp-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 13px;
  margin-bottom: 12px;
  border: 1px solid #dbe2ee;
  border-radius: 12px;
  background: #fff;
}
.sp-search > svg {
  width: 17px;
  color: #64748b;
}
.sp-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
}
.sp-search button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: #002fa7;
  color: #fff;
}
.sp-search button svg {
  width: 17px;
}
.sp-list {
  display: grid;
  gap: 10px;
}
.sp-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe2ee;
  border-radius: 16px;
  background: #fff;
}
.sp-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  background: #edf3ff;
  color: #002fa7;
}
.sp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-avatar svg {
  width: 24px;
}
.sp-copy {
  min-width: 0;
}
.sp-copy strong,
.sp-copy small {
  display: block;
  overflow-wrap: anywhere;
}
.sp-copy strong {
  font-size: 15px;
}
.sp-copy small {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.sp-copy p {
  margin: 7px 0 0;
  color: #52637e;
  font-size: 12px;
  line-height: 1.55;
}
.sp-actions {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #edf0f5;
}
.sp-actions .sp-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid #cad6eb;
  border-radius: 10px;
  background: #fff;
  color: #002fa7;
  font-size: 13px;
  font-weight: 600;
}
.sp-actions .sp-action-button:last-child {
  border-color: #002fa7;
  background: #002fa7;
  color: #fff;
}
.sp-actions svg {
  width: 16px;
}
.sp-team .pt-page {
  padding: 0;
  background: transparent;
}
.sp-team .pt-balance {
  display: none;
}
.sp-history {
  padding: 16px;
  border: 1px solid #dbe2ee;
  border-radius: 16px;
  background: #fff;
}
.sp-history header,
.sp-history article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sp-history h2 {
  margin: 0;
  font-size: 16px;
}
.sp-history header button {
  border: 0;
  background: transparent;
  color: #002fa7;
}
.sp-history article {
  display: grid;
  gap: 7px;
  padding: 14px 0;
  border-top: 1px solid #edf0f5;
}
.sp-history article:first-of-type {
  margin-top: 10px;
}
.sp-history strong,
.sp-history b {
  font-size: 12px;
}
.sp-history small {
  color: #64748b;
  font-size: 10px;
}
.sp-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #10182880;
}
.sp-sheet {
  position: relative;
  width: min(480px, 100%);
  padding: 22px 18px max(22px, env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #fff;
  text-align: center;
}
.sp-sheet > .sp-avatar {
  margin: 0 auto 10px;
}
.sp-sheet h2 {
  margin: 0;
  font-size: 19px;
}
.sp-sheet > p {
  margin: 5px 0 18px;
  color: #64748b;
  font-size: 12px;
}
.sp-sheet .field {
  text-align: left;
}
.sp-close {
  position: absolute;
  top: 12px;
  right: 12px;
}
.sp-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #dbe2ee;
  border-radius: 12px;
  background: #f7f7f8;
  text-align: left;
}
.sp-confirm .sp-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}
.sp-confirm span {
  font-size: 12px;
  overflow-wrap: anywhere;
}
@media (max-width: 350px) {
  .sp-card {
    padding: 12px;
  }
  .sp-action-button {
    font-size: 12px;
  }
  .sp-summary {
    padding: 17px;
  }
  .sp-quota-grid {
    gap: 7px;
  }
  .sp-quota-card {
    padding: 10px 8px 10px 11px;
  }
  .sp-quota-card b {
    font-size: 12px;
  }
}
.sp-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sp-name > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 11px;
}
.sp-name > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.sp-name > span.online {
  color: #16824b;
}
.sp-name > span.offline {
  color: #8a94a6;
}
.partners-page {
  background: #fff;
  color: #17243d;
  padding: 24px 21px 110px;
}
.partners-header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  margin-bottom: 25px;
}
.partners-header h1 {
  text-align: center;
  font-size: 23px;
  margin: 0;
}
.partners-hero {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  padding: 23px;
  background: linear-gradient(125deg, #002fa7, #002fa7);
  color: #fff;
  box-shadow: 0 9px 21px #1424421a;
}
.partners-hero:after {
  content: "";
  position: absolute;
  width: 175px;
  height: 175px;
  border: 28px solid #ffffff08;
  border-radius: 50%;
  right: -45px;
  top: -38px;
  pointer-events: none;
}
.partners-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.partners-hero-top span {
  font-size: 11px;
  color: #fff;
}
.partners-level {
  display: block;
  font-size: 34px;
  margin: 10px 0 23px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.partners-crown {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: #eef3ff22;
  border: 1px solid #dbe2ee44;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  transform: rotate(9deg);
}
.partners-crown svg {
  width: 40px;
  height: 40px;
  transform: rotate(-9deg);
  stroke-width: 1.4;
}
.partners-hero-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ffffff25;
  padding-top: 15px;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
}
.partners-agent {
  background: #ffffff12;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  padding: 6px 9px;
}
.partners-hero-bottom b {
  font-size: 23px;
  margin-right: 4px;
}
.partners-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 19px;
  padding: 18px 0;
  margin: 17px 0;
}
.partners-metrics article {
  text-align: center;
  padding: 0 6px;
  border-right: 1px solid #dbe2ee;
  min-width: 0;
}
.partners-metrics article:last-child {
  border: 0;
}
.partners-metrics span {
  display: block;
  font-size: 10px;
  color: #64748b;
}
.partners-metrics strong {
  display: block;
  font-size: 19px;
  margin-top: 7px;
  font-weight: 600;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.partners-metrics article:first-child strong {
  color: #002fa7;
}
.partners-recommender {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 17px;
  background: #fff;
  padding: 14px 15px;
}
.partners-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fff;
  color: #64748b;
}
.partners-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partners-avatar svg {
  width: 30px;
  height: 30px;
}
.partners-recommender > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.partners-recommender span:not(.partners-avatar) {
  font-size: 10px;
  color: #64748b;
}
.partners-recommender strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.partners-recommender > small {
  margin-left: auto;
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
}
.partners-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 26px 0 15px;
  gap: 8px;
}
.partners-title h2 {
  font-size: 18px;
  margin: 0;
}
.partners-title span {
  font-size: 11px;
  color: #64748b;
}
.partners-search {
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 13px;
  padding: 10px 12px;
  display: flex;
  gap: 9px;
  align-items: center;
  color: #64748b;
}
.partners-search svg {
  width: 17px;
  flex-shrink: 0;
}
.partners-search input {
  background: transparent;
  border: 0;
  outline: none;
  min-width: 0;
  width: 100%;
  font-size: 12px;
  padding: 4px 0;
  color: #17243d;
  box-shadow: none;
}
.partners-search:focus-within {
  outline: 2px solid #dbe2ee;
  outline-offset: 2px;
}
.partners-filters {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.partners-filters button {
  padding: 8px 12px;
  border: 1px solid #dbe2ee;
  border-radius: 20px;
  font-size: 11px;
  background: #fff;
  color: #64748b;
  min-height: 36px;
}
.partners-filters button[aria-pressed="true"] {
  background: #002fa7;
  color: #fff;
  border-color: #002fa7;
}
.partners-list {
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 21px;
  padding: 0 15px;
}
.partners-page .partners-person {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid #dbe2ee;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.partners-page .partners-person:last-child {
  border-bottom: 0;
}
.partners-person-name {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.partners-person-name > strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.partners-person-name small {
  color: #64748b;
  font-size: 10px;
}
.partners-person-name > span {
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.partners-person-name svg {
  width: 12px;
  height: 12px;
}
.partners-person-name .is-effective {
  color: #002fa7;
}
.partners-person-name .is-inactive {
  color: #64748b;
}
.partners-activity {
  margin-left: auto;
  text-align: right;
  display: grid;
  gap: 7px;
  max-width: 40%;
  overflow-wrap: anywhere;
}
.partners-activity strong {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.partners-activity small {
  font-size: 9px;
  color: #64748b;
}
.partners-more {
  margin: 13px 0 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  font-size: 11px;
  color: #002fa7;
  background: #fff;
  border: 0;
  border-radius: 12px;
}
.partners-more svg {
  width: 14px;
  height: 14px;
}
.partners-page button:focus-visible {
  outline: 2px solid #002fa7;
  outline-offset: 3px;
}
@media (max-width: 360px) {
  .partners-page {
    padding-left: 14px;
    padding-right: 14px;
  }
  .partners-hero {
    padding: 18px;
  }
  .partners-activity strong {
    font-size: 16px;
  }
  .partners-metrics strong {
    font-size: 17px;
  }
}
main.page.partners-page {
  background: #fff !important;
}
main.page.partners-page:before,
main.page.partners-page:after {
  display: none;
}
.partners-header .icon-button {
  background: transparent;
}
.partners-page {
  padding-top: max(20px, env(safe-area-inset-top));
  padding-left: 18px;
  padding-right: 18px;
}
.partners-header {
  margin-bottom: 20px;
  min-height: 44px;
}
.partners-header h1 {
  font-size: 21px;
}
.partners-hero {
  padding: 24px;
  border-radius: 24px;
}
.partners-hero-top span {
  font-size: 13px;
}
.partners-level {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 10px 0 22px;
}
.partners-hero-bottom {
  font-size: 13px;
}
.partners-agent {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.partners-gift-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  border: 1px solid #dbe2ee;
  border-radius: 18px;
  background: #fff;
  font-size: 14px;
  color: #002fa7;
}
.partners-gift-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eef3ff;
  color: #002fa7;
}
.partners-gift-icon svg {
  width: 22px;
  height: 22px;
}
.partners-gift-summary strong {
  margin-left: auto;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.partners-gift-summary small {
  font-size: 12px;
  font-weight: 400;
}
.partners-metrics {
  margin: 14px 0 18px;
  padding: 20px 0;
}
.partners-metrics span {
  font-size: 12px;
}
.partners-metrics strong {
  font-size: 21px;
}
.partners-recommender {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 17px 15px;
}
.partners-recommender .partners-avatar {
  width: 48px;
  height: 48px;
}
.partners-recommender span:not(.partners-avatar) {
  font-size: 12px;
}
.partners-recommender strong {
  font-size: 15px;
}
.partners-recommender small {
  font-size: 12px;
  color: #002fa7;
}
.partners-chat {
  min-height: 38px;
  border: 1px solid #dbe2ee;
  border-radius: 11px;
  padding: 7px 11px;
  background: transparent;
  color: #002fa7;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.partners-title span {
  font-size: 12px;
}
.partners-search {
  min-height: 46px;
  box-sizing: border-box;
}
.partners-search input {
  font-size: 14px;
}
.partners-filters button {
  font-size: 12px;
  min-height: 40px;
}
.partners-list {
  padding: 0 13px;
}
.partners-person-name > strong {
  font-size: 15px;
}
.partners-person-name small {
  font-size: 12px;
}
.partners-person-name > span {
  font-size: 11px;
}
.partners-activity small {
  font-size: 11px;
}
.partners-more {
  font-size: 13px;
  min-height: 44px;
}
@media (max-width: 360px) {
  .partners-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .partners-recommender {
    gap: 9px;
    padding: 14px 12px;
  }
  .partners-hero {
    padding: 20px;
  }
  .partners-metrics strong {
    font-size: 18px;
  }
  .partners-gift-summary {
    gap: 9px;
  }
  .partners-person-name > strong {
    font-size: 14px;
  }
}
.partners-counts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 16px;
}
.partners-counts article {
  padding: 12px;
  border-radius: 12px;
  background: #f2f7ff;
}
.partners-counts span {
  display: block;
  color: #64748b;
  font-size: 12px;
}
.partners-counts strong {
  display: block;
  margin-top: 4px;
  color: #1464d2;
  font-size: 22px;
}
.partners-counts small {
  font-size: 12px;
  font-weight: 400;
}
.page.equipment-forge-page.forge-game {
  background:
    radial-gradient(ellipse at 50% 18%, #173666 0, transparent 48%), #080f20;
  color: #e9f2ff;
  padding-top: max(22px, env(safe-area-inset-top));
  min-height: 100dvh;
}
.forge-game:before {
  display: none;
}
.forge-game [hidden] {
  display: none !important;
}
.forge-game .page-header {
  gap: 10px;
  margin-bottom: 18px;
}
.forge-game .page-header h1 {
  font-size: 23px;
  color: #edf4ff;
}
.forge-game .page-header p {
  color: #83acd9;
  font-size: 10px;
  letter-spacing: 2px;
}
.forge-game .back-button {
  background: #162844;
  color: #bce3ff;
  border: 1px solid #294469;
  border-radius: 12px;
}
.forge-game .forge-balance {
  color: #a9d8ff;
  background: #132640;
  border: 1px solid #274361;
  padding: 8px;
  border-radius: 10px;
  font-size: 11px;
  max-width: 42%;
  overflow-wrap: anywhere;
}
.forge-navigation {
  display: flex;
  gap: 5px;
  background: #0b182d;
  padding: 5px;
  border: 1px solid #233956;
  border-radius: 14px;
  margin-bottom: 18px;
}
.forge-navigation button {
  flex: 1;
  min-height: 40px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #8fa7c7;
  font-size: 13px;
}
.forge-navigation button[aria-pressed="true"] {
  background: linear-gradient(135deg, #254b7b, #1d3456);
  color: #e4f5ff;
  box-shadow: inset 0 1px #5f8cb64d;
}
.forge-navigation button:last-child {
  flex: 0 0 58px;
  color: #88c7ed;
}
.forge-game .forge-core {
  position: relative;
  min-height: 240px;
  background:
    radial-gradient(ellipse at 50% 56%, #1b559155, transparent 65%),
    linear-gradient(160deg, #132744, #0c172b);
  border: 1px solid #284b71;
  border-radius: 22px;
  overflow: hidden;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  box-shadow:
    inset 0 1px #8bb7e81c,
    0 12px 30px #0003;
}
.forge-game .forge-core-mark {
  position: relative;
  z-index: 1;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #4ba6ea22, transparent 70%);
  box-shadow: none;
  animation: weapon-hover 4s ease-in-out infinite;
}
.forge-game .forge-core-mark .equipment-product-image {
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 0 15px #58baff99);
  object-fit: contain;
}
.forge-game .forge-core-mark > svg {
  width: 65px;
  height: 65px;
  color: #bceaff;
  filter: drop-shadow(0 0 12px #65c6ff);
}
.forge-game .forge-core-copy {
  text-align: center;
  z-index: 1;
}
.forge-game .forge-core-copy strong {
  color: #edf7ff;
  font-size: 22px;
  display: block;
}
.forge-game .forge-core-copy small {
  color: #8fb6d7;
  font-size: 12px;
}
.forge-game .forge-orbit {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  border: 1px solid #418aca55;
  border-radius: 50%;
  pointer-events: none;
  animation: forge-ring 20s linear infinite;
}
.forge-game .orbit-two {
  width: 218px;
  height: 218px;
  margin-left: -109px;
  margin-top: -109px;
  border-style: dashed;
  border-color: #6ba6dc24;
  animation-direction: reverse;
}
.forge-game .forge-panel,
.forge-game .forge-inventory {
  padding: 17px;
  margin-top: 16px;
  background: #101e33;
  border: 1px solid #263d59;
  border-radius: 18px;
  box-shadow: none;
  color: #d8e7f7;
}
.forge-game .forge-section-head {
  color: #a7c8e8;
  font-size: 13px;
  margin-bottom: 13px;
}
.forge-game .forge-template-list {
  display: grid;
  gap: 8px;
}
.forge-game .forge-template {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  text-align: left;
  padding: 11px;
  background: #13243b;
  border: 1px solid #29405c;
  border-radius: 12px;
  color: #b7cee7;
  box-shadow: none;
}
.forge-game .forge-template.active {
  border-color: #6ab9eb;
  background: #19334f;
  box-shadow: inset 3px 0 #79cbff;
}
.forge-game .forge-template span {
  flex: 1;
  min-width: 0;
}
.forge-game .forge-template strong {
  font-size: 13px;
  color: #e4f1ff;
}
.forge-game .forge-template small {
  display: block;
  color: #83a2c3;
  font-size: 10px;
  margin-top: 4px;
}
.forge-game .forge-template b {
  font-size: 14px;
  color: #b6e2ff;
}
.forge-game .forge-template .equipment-product-image {
  width: 42px;
  height: 42px;
}
.forge-game .forge-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 14px 0;
  color: #9db6d0;
  font-size: 11px;
}
.forge-game .forge-breakdown strong {
  color: #e5f4ff;
  width: 100%;
  font-size: 14px;
}
.forge-game .forge-submit {
  min-height: 48px;
  background: linear-gradient(110deg, #3482c7, #2456a0);
  border: 1px solid #69b5eb;
  color: #f4fbff;
  box-shadow: 0 4px 18px #177de62b;
  border-radius: 12px;
}
.forge-game .forge-owned {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background: #13243a;
  border: 1px solid #2a4361;
  border-radius: 14px;
  margin: 10px 0;
}
.forge-game .forge-owned-actions {
  grid-column: 1/-1;
  display: flex;
  gap: 8px;
}
.forge-game .forge-owned-actions button {
  flex: 1;
  min-height: 36px;
  background: #1d3b60;
  border: 1px solid #31577d;
  color: #c7e8ff;
  border-radius: 9px;
}
.forge-game .forge-owned strong {
  font-size: 14px;
  color: #e4f2ff;
}
.forge-game .forge-owned small,
.forge-game .forge-owned em {
  color: #95b0cf;
  font-size: 11px;
  line-height: 1.6;
}
.forge-game .equipment-badge {
  background: #203957;
  border: 1px solid #3d6387;
  border-radius: 12px;
  width: 48px;
  height: 48px;
  color: #a6d9ff;
}
.forge-game .equipment-badge img {
  width: 44px;
  height: 44px;
}
.forge-game .equipment-list-tools {
  color: #94b3d0;
  font-size: 12px;
}
.forge-game select {
  background: #142a45;
  color: #dceeff;
  border: 1px solid #365573;
  border-radius: 8px;
  padding: 7px;
}
.forge-game button:disabled {
  opacity: 0.4;
}
.forge-game .forge-empty {
  color: #91aac5;
}
.forge-game .ui-pagination button {
  background: #1b3556;
  color: #c4e7ff;
  border: 1px solid #355675;
}
.forge-game .forge-notice {
  background: #17385a;
  border: 1px solid #599ccc;
  color: #d9f3ff;
}
.forge-game button:focus-visible {
  outline: 2px solid #9bdcff;
  outline-offset: 3px;
}
@keyframes weapon-hover {
  50% {
    transform: translateY(-7px);
  }
}
@keyframes forge-ring {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .forge-game .forge-core-mark,
  .forge-game .forge-orbit {
    animation: none;
  }
}
@media (max-width: 350px) {
  .forge-game .page-header h1 {
    font-size: 20px;
  }
  .forge-game .forge-panel,
  .forge-game .forge-inventory {
    padding: 12px;
  }
}
.gift-recipient-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin: 12px 0;
  border: 1px solid #7592b34d;
  border-radius: 12px;
  background: #7592b315;
}
.gift-recipient-card img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
}
.gift-recipient-card small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}
.forge-game .forge-core {
  display: block;
  padding: 0 0 22px;
  min-height: 380px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, #16436b66, transparent 65%), #090f21;
}
.forge-pixi-stage {
  height: 310px;
  width: 100%;
  position: relative;
}
.forge-pixi-stage canvas {
  display: block;
  width: 100%;
  height: 310px;
}
.forge-game .forge-copy {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
}
.forge-game .forge-copy strong {
  font-size: 24px;
  letter-spacing: 3px;
}
.forge-game .forge-copy small {
  color: #8da3c1;
}
.forge-pixi-stage p {
  text-align: center;
  padding: 100px 20px;
  color: #8da3c1;
}
.forge-pixi-stage {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #17345c66, transparent 70%);
}
.forge-stage-status {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  color: #a4dafa;
  font-size: 12px;
}
.forge-sound {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  border: 1px solid #405574;
  background: #101d32;
  color: #c5d9f5;
  border-radius: 8px;
  padding: 6px;
  font-size: 11px;
}
.forge-game .forge-template-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 4px;
}
.forge-game .forge-template {
  min-width: 0;
  padding: 10px 4px;
  gap: 7px;
  flex-direction: column;
  text-align: center;
}
.forge-game .forge-template span {
  flex: none;
  width: 100%;
}
.forge-game .forge-template strong,
.forge-game .forge-template b {
  display: block;
  white-space: nowrap;
}
.forge-game .forge-template b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.forge-game {
  background:
    radial-gradient(ellipse at 5% 0%, #5d34d045, transparent 65%), #0d091e;
}
.forge-game .forge-core {
  background:
    radial-gradient(ellipse at 50% 45%, #5d34d050, transparent 65%), #110c25;
  border-color: #a855f733;
}
.forge-game .forge-core {
  min-height: 0;
  padding-bottom: 12px;
}
.forge-game .forge-pixi-stage,
.forge-game .forge-pixi-stage canvas {
  height: 238px;
  background: transparent;
}
.forge-game .forge-copy strong {
  font-size: 21px;
}
.forge-game .forge-template {
  padding: 7px 4px;
}
.forge-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #110c25;
  color: #d7c6fa;
  z-index: 3;
  font-size: 13px;
}
@media (max-height: 720px) {
  .forge-game .forge-pixi-stage,
  .forge-game .forge-pixi-stage canvas {
    height: 205px;
  }
}
.forge-game .forge-copy strong {
  color: #f1eaff;
  text-shadow: 0 0 24px #a855f7;
}
.forge-game .forge-panel {
  background: linear-gradient(140deg, #5d34d025, #ff006e12, #00f0ff08);
  border-color: #a855f733;
}
.forge-game .forge-template.active {
  background: linear-gradient(140deg, #5d34d065, #a855f720);
  border-color: #b392ff;
  box-shadow: 0 0 22px #a855f733;
}
.forge-game .forge-submit {
  background: linear-gradient(110deg, #5d34d0, #a855f7, #ff006e);
  border: 0;
  box-shadow: 0 6px 30px #a855f750;
}
.forge-soft {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #cbb8e5;
}
.forge-soft input {
  accent-color: #a855f7;
}
.forge-game .forge-sound {
  background: #221333;
  border-color: #a855f744;
}
.forge-game .forge-template .forge-weapon-icon {
  display: block;
  width: 44px;
  height: 52px;
  flex: none;
  filter: drop-shadow(0 0 8px currentColor);
}
.forge-weapon-icon svg {
  width: 100%;
  height: 100%;
}
.forge-game .forge-stage-status {
  color: #cbb8e5;
  font-size: 11px;
}
.forge-success {
  text-align: center;
  background:
    radial-gradient(ellipse at top, #5d34d050, transparent), #1a102a !important;
  color: #f1eaff !important;
}
.forge-success svg {
  color: #00f0ff;
}
.forge-success strong {
  font-size: 22px;
}
.forge-success p {
  color: #cbb8e5;
}
.forge-game .forge-maintenance,
.forge-game .forge-maintenance h2,
.forge-game .forge-maintenance p,
.forge-game .forge-maintenance button {
  color: #fff;
}
.forge-game .forge-maintenance,
.app-shell[data-eye-care="true"] .forge-game .forge-maintenance {
  background: #110c25;
}
.forge-game .forge-maintenance button {
  background: transparent;
  border: 1px solid #ffffff66;
  border-radius: 8px;
  padding: 8px 12px;
}
.chat-page {
  padding: 22px 18px 112px;
  color: #17243d;
  background: #fff !important;
}
.chat-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -22px -18px 22px;
  padding: 14px 18px;
  background: #fffe;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #dbe2ee;
}
.chat-header > div {
  flex: 1;
  min-width: 0;
}
.chat-header h1 {
  font-size: 22px;
  margin: 0;
  overflow-wrap: anywhere;
}
.chat-header small {
  color: #64748b;
  font-size: 11px;
}
.chat-page button {
  cursor: pointer;
}
.chat-header button,
.chat-modal header button {
  border: 0;
  background: transparent;
  color: #002fa7;
  padding: 8px;
}
.chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe2ee;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  margin: 15px 0;
}
.chat-search input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 6px;
}
.chat-search svg {
  width: 18px;
}
.chat-search button,
.chat-page .chat-primary,
.chat-send-row > button {
  border: 0;
  background: #002fa7;
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  white-space: nowrap;
}
.chat-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}
.chat-title h2 {
  font-size: 17px;
}
.chat-title button,
.chat-actions button,
.chat-modal button,
.chat-member button {
  border: 1px solid #dbe2ee;
  background: #fff;
  color: #002fa7;
  border-radius: 9px;
  padding: 8px 10px;
}
.chat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dbe2ee;
  border-radius: 18px;
  background: #fff;
  padding: 17px;
  margin: 12px 0;
  width: 100%;
  text-align: left;
  color: inherit;
}
.chat-card > div {
  flex: 1;
  min-width: 0;
}
.chat-card h2 {
  font-size: 15px;
  margin: 0 0 6px;
}
.chat-card p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  overflow-wrap: anywhere;
}
.chat-card small {
  font-size: 11px;
  color: #64748b;
}
.chat-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: #fff;
  color: #002fa7;
  border-radius: 15px;
  overflow: hidden;
}
.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-badge,
.chat-global b {
  background: #bb654e;
  color: #fff;
  border-radius: 20px;
  padding: 2px 6px;
  font-size: 10px;
}
.chat-empty {
  text-align: center;
  padding: 60px 15px;
  color: #64748b;
}
.chat-empty svg {
  margin: auto;
}
.chat-empty h2 {
  font-size: 17px;
}
.chat-empty p {
  font-size: 12px;
}
.chat-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff0eb;
  color: #a34937;
  padding: 12px;
  border-radius: 12px;
  font-size: 13px;
}
.chat-announcement {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-messages {
  padding: 14px 0 190px;
}
.chat-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 17px 0;
}
.chat-message > small {
  font-size: 10px;
  color: #64748b;
  margin-bottom: 5px;
}
.chat-message.mine {
  align-items: flex-end;
}
.chat-bubble {
  max-width: 88%;
  border: 1px solid #dbe2ee;
  background: #fff;
  border-radius: 4px 15px 15px;
  padding: 11px 14px;
  overflow-wrap: anywhere;
}
.mine .chat-bubble {
  background: #fff;
  border-color: #dbe2ee;
  border-radius: 15px 4px 15px 15px;
}
.chat-bubble p {
  margin: 0;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
}
.chat-system {
  text-align: center;
  color: #64748b;
  font-size: 11px;
}
.chat-image {
  display: inline-block;
  border: 0;
  background: transparent;
  padding: 3px;
  max-width: 200px;
}
.chat-image img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
}
.chat-composer {
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%);
  width: min(100%, 430px);
  padding: 12px 18px;
  background: #fffffff5;
  border-top: 1px solid #dbe2ee;
  z-index: 20;
}
.chat-composer textarea {
  resize: none;
  max-height: 130px;
  min-height: 48px;
  width: 100%;
  border: 1px solid #dbe2ee;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
}
.chat-send-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
}
.chat-send-row small {
  margin-left: auto;
  color: #64748b;
  font-size: 11px;
}
.chat-send-row button {
  display: flex;
  align-items: center;
  gap: 7px;
}
.chat-upload {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  cursor: pointer;
}
.chat-upload input {
  display: none;
}
.chat-previews {
  display: flex;
  gap: 7px;
  margin-bottom: 8px;
  overflow: auto;
}
.chat-previews button {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
}
.chat-previews img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}
.chat-previews svg {
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
}
.chat-overlay {
  position: fixed;
  inset: 0;
  background: #002fa788;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  padding: 20px;
}
.chat-modal {
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  width: min(100%, 450px);
  max-height: 85dvh;
  overflow: auto;
  box-sizing: border-box;
}
.chat-modal header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-modal h2 {
  font-size: 20px;
  margin: 0;
}
.chat-modal p {
  font-size: 12px;
  color: #64748b;
}
.chat-modal label {
  display: block;
  font-size: 13px;
  margin: 15px 0;
}
.chat-modal input:not([type="checkbox"]),
.chat-modal textarea,
.chat-modal select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dbe2ee;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  margin-top: 7px;
}
.chat-modal input[type="checkbox"] {
  margin-right: 7px;
}
.chat-modal .chat-primary {
  width: 100%;
}
.chat-actions {
  display: flex;
  gap: 9px;
  margin-top: 20px;
}
.chat-member {
  border-bottom: 1px solid #dbe2ee;
  padding: 12px 0;
}
.chat-member > div {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.chat-member small {
  font-size: 10px;
  color: #64748b;
}
.chat-member button {
  font-size: 11px;
  padding: 5px;
}
.chat-load {
  display: block;
  margin: auto;
  background: none;
  border: 0;
  color: #002fa7;
}
.chat-zoom {
  background: #000d;
}
.chat-zoom > img {
  max-width: 95vw;
  max-height: 85vh;
  object-fit: contain;
}
.chat-zoom > button {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  padding: 9px;
}
.chat-global {
  position: fixed;
  top: 18px;
  right: max(18px, calc((100vw - 480px) / 2 + 18px));
  border: 1px solid #dbe2ee;
  background: #fff;
  color: #002fa7;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  z-index: 40;
  box-shadow: 0 4px 16px #1424421a;
}
.chat-global b {
  position: absolute;
  right: -9px;
  top: -6px;
}
.chat-toast {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translate(-50%);
  width: min(85vw, 400px);
  z-index: 80;
  background: #002fa7;
  color: #fff;
  border-radius: 15px;
  display: flex;
  box-shadow: 0 6px 25px #0003;
  padding: 8px;
}
.chat-page button:disabled {
  opacity: 0.5;
  cursor: default;
}
.chat-composer > p {
  font-size: 12px;
  color: #002fa7;
}
main.page.chat-page:before,
main.page.chat-page:after {
  display: none;
}
.chat-composer {
  width: min(100%, 430px);
  box-sizing: border-box;
}
.chat-reply {
  border: 0;
  background: none;
  color: #64748b;
  font-size: 10px;
  padding: 4px;
}
.chat-bubble blockquote {
  border-left: 3px solid #dbe2ee;
  padding: 6px 9px;
  margin: 0 0 8px;
  background: #00000005;
  font-size: 11px;
  color: #64748b;
}
.chat-reply-preview {
  font-size: 11px;
  color: #64748b;
}
.chat-inbox-tabs {
  display: flex;
  gap: 8px;
  margin: 15px 0;
}
.chat-inbox-tabs button,
.partners-chat {
  border: 1px solid #dbe2ee;
  background: #fff;
  color: #002fa7;
  padding: 8px 12px;
  border-radius: 12px;
}
.chat-inbox-tabs button[aria-pressed="true"] {
  background: #002fa7;
  color: #fff;
}
.partners-chat {
  font-size: 11px;
  white-space: nowrap;
}
.partners-recommender {
  flex-wrap: wrap;
}
@media (min-width: 700px) {
  .chat-composer {
    bottom: calc(120px + env(safe-area-inset-bottom));
  }
}
.chat-inbox-tabs {
  flex-wrap: wrap;
}
.chat-global {
  width: 44px;
  height: 44px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  border: 1px solid #dbe2ee;
  box-shadow: 0 3px 14px #14244226;
}
.chat-global:focus-visible {
  outline: 2px solid #002fa7;
  outline-offset: 3px;
}
.chat-packet-strip {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff6e8;
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 10px;
}
.chat-packet-strip button {
  white-space: nowrap;
  background: #b93732;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px;
}
.chat-packet-dialog {
  width: min(100%, 420px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  background: #fff !important;
  color: #17243d;
  padding: 24px;
  border-radius: 22px;
  box-shadow: 0 18px 60px #10244740;
}
.chat-packet-dialog h2 {
  margin: 0 0 20px;
  font-size: 22px;
}
.chat-packet-dialog form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-packet-dialog label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
}
.chat-packet-dialog input:not([type="checkbox"]),
.chat-packet-dialog select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #dce3ed;
  border-radius: 10px;
  padding: 12px;
  background: #f7f9fc;
  color: #17243d;
  font: inherit;
}
.chat-packet-dialog label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  background: #f5f7fb;
  padding: 12px;
  border-radius: 10px;
}
.chat-packet-dialog input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #c43d37;
}
.chat-packet-dialog p {
  font-size: 13px;
  line-height: 1.6;
  color: #65758a;
  margin: 0;
}
.chat-packet-dialog .packet-total {
  font-weight: 700;
  color: #b73732;
  font-size: 16px;
}
.chat-packet-dialog .packet-submit {
  background: #c43d37;
  color: #fff;
  border: 0;
  padding: 14px;
  font-size: 16px;
}
.chat-packet-icon {
  width: 22px;
  height: 26px;
  vertical-align: middle;
  margin-left: 8px;
  display: inline-block;
  flex-shrink: 0;
}
.android-keyboard-adapter .chat-overlay:has(.chat-packet-dialog) {
  inset: auto 0;
  top: var(--keyboard-viewport-top, 0px);
  height: var(--keyboard-viewport-height, 100dvh);
  box-sizing: border-box;
  overflow: auto;
  padding: 12px;
}
.android-keyboard-adapter .chat-packet-dialog {
  max-height: 100%;
}
.wechat-room {
  background: #ededed !important;
  padding-bottom: 200px !important;
}
.wechat-room .chat-header {
  background: #f6f6f6;
  border-bottom: 1px solid #ddd;
  padding: 14px 10px;
}
.wechat-room .chat-messages {
  padding-top: 68px;
}
.wechat-room .chat-message {
  position: relative;
  padding-left: 48px;
  max-width: 100%;
  align-items: flex-start;
}
.wechat-room .chat-message > .chat-avatar {
  position: absolute;
  left: 0;
  top: 5px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
}
.wechat-room .chat-message.mine {
  padding-left: 0;
  padding-right: 48px;
  align-items: flex-end;
}
.wechat-room .chat-message.mine > .chat-avatar {
  left: auto;
  right: 0;
}
.wechat-room .chat-bubble {
  background: #fff !important;
  color: #20252b !important;
  border: 0;
  border-radius: 5px 12px 12px;
  box-shadow: none;
  max-width: calc(100vw - 120px);
  padding: 10px 13px;
}
.wechat-room .mine .chat-bubble {
  background: #b0e985 !important;
}
.wechat-room .chat-message small {
  color: #888;
  font-size: 10px;
}
.wechat-room .chat-message small button {
  border: 0;
  background: none;
  color: #777;
  font-size: 11px;
  padding: 0;
}
.wechat-room .chat-system {
  text-align: center;
  color: #999;
  font-size: 11px;
  background: none;
}
.wechat-room .chat-composer {
  background: #f7f7f7;
  border-top: 1px solid #ddd;
  border-radius: 0;
}
.wechat-room .chat-composer textarea {
  background: #fff;
  border: 0;
  border-radius: 6px;
  color: #222;
}
.wechat-room .chat-send-row > button:last-child {
  background: #07a85a;
  color: #fff;
}
.wechat-room .chat-send-row:not(.tools-open) .image-upload {
  display: none;
}
.wechat-room .chat-packet-strip {
  display: none;
  position: relative;
  top: auto;
  padding: 10px;
  background: #fff6e8;
  flex-wrap: wrap;
}
.wechat-room .chat-packet-strip.is-open {
  display: flex;
}
.packet-float {
  position: fixed;
  left: max(12px, calc((100vw - 430px) / 2 + 12px));
  top: 125px;
  z-index: 8;
  border: 0;
  background: none;
  padding: 0;
  filter: drop-shadow(0 3px 5px #0003);
}
.packet-float svg {
  width: 44px;
  height: 54px;
  display: block;
}
.packet-float small {
  display: block;
  background: #fff;
  color: #ac392e;
  border-radius: 8px;
  font-size: 10px;
  padding: 2px;
}
.android-keyboard-adapter.keyboard-visible .wechat-room .chat-composer {
  bottom: auto;
  top: calc(
    var(--keyboard-viewport-height) + var(--keyboard-viewport-top) - 140px
  );
}
.chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.chat-composer textarea {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.chat-composer .chat-send-row {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chat-composer .chat-send-row small,
.chat-composer .chat-send-row .chat-upload,
.chat-composer .chat-send-row > button:not(:last-child) {
  display: none;
}
.chat-composer .chat-send-row > button:last-child {
  min-height: 48px;
  padding: 0 13px;
  white-space: nowrap;
}
.chat-composer .chat-previews,
.chat-composer > p,
.chat-composer .chat-reply-preview {
  grid-column: 1/-1;
  width: 100%;
}
.chat-composer .chat-send-row > button:first-child {
  display: none;
}
.chat-composer .chat-send-row > button:nth-child(2) {
  display: flex;
  min-height: 48px;
  padding: 0 10px;
  white-space: nowrap;
  background: #fff2df;
  color: #a65318;
  border: 1px solid #efb26b;
  border-radius: 10px;
}
.chat-composer .chat-send-row {
  flex-direction: row;
}
.chat-direct-image-input {
  display: none;
}
.chat-composer .chat-send-row > .chat-direct-image-button {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #d4d9df;
  border-radius: 8px;
  background: #fff;
  color: #59636f;
}
.chat-composer .chat-send-row > .chat-direct-image-button:focus-visible {
  outline: 2px solid #002fa7;
  outline-offset: 2px;
}
.chat-sender {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
}
.provider-verified {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  padding: 0 4px 0 3px;
  border-radius: 3px;
  background: #002fa7;
  color: #fff;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 1px 2px #002fa733;
}
.provider-verified svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.5;
}
.chat-message-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}
.chat-recall {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  color: #64748b;
  font-size: 10px;
  padding: 4px;
}
.chat-recall:hover,
.chat-recall:focus-visible {
  color: #b42318;
}
.chat-recall-dialog {
  border-radius: 12px;
}
.chat-recall-dialog blockquote {
  margin: 14px 0;
  padding: 12px;
  border-left: 3px solid #002fa7;
  background: #f7f7f8;
  color: #17243d;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.chat-recall-dialog > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.chat-recall-dialog > div button {
  min-height: 42px;
}
.chat-recall-dialog .chat-recall-confirm {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}
.chat-identity-badges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.chat-identity-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  padding: 0 5px 0 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.chat-identity-badge svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.4;
}
.chat-identity-badge.provider {
  background: #002fa7;
  border-color: #002fa7;
  color: #fff;
  box-shadow: 0 1px 2px #002fa733;
}
.chat-identity-badge.vip {
  background: linear-gradient(135deg, #fff3a6, #e5ad28);
  border-color: #c88a00;
  color: #5b3900;
  box-shadow: 0 1px 3px #b7791f40;
}
.chat-identity-badge.vip svg {
  fill: #f7c948;
  stroke: #795000;
}
.chat-identity-badge.team {
  background: #e9f2e5;
  border-color: #b9d1ae;
  color: #3d6a34;
}
.chat-message.mine .chat-identity-badges {
  justify-content: flex-end;
}
@media (max-width: 360px) {
  .chat-sender {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .chat-sender > span:last-child {
    width: 100%;
  }
}
.chat-member-search {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid #dbe2ee;
  border-radius: 12px;
  background: #f7f9fc;
}
.chat-member-search label {
  margin: 0;
}
.chat-member-search > div {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.chat-member-search > div button {
  flex: 1;
}
.chat-identity-badge.owner {
  background: #24114f;
  border-color: #24114f;
  color: #fff;
}
.chat-identity-badge.administrator {
  background: #f1ecff;
  border-color: #c8b7f2;
  color: #5b35a7;
}
.wechat-room .chat-message > .chat-avatar-direct {
  position: absolute;
  left: 0;
  top: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.wechat-room .chat-message > .chat-avatar-direct .chat-avatar {
  width: 38px;
  height: 38px;
}
.wechat-room .chat-message > .chat-avatar-direct:focus-visible {
  outline: 2px solid #002fa7;
  outline-offset: 2px;
}
.wechat-room .chat-message > .chat-avatar-direct:active {
  transform: scale(0.96);
}
.chat-composer {
  display: block;
}
.chat-compose-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-compose-line textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 112px;
}
.chat-compose-line > small {
  display: none;
}
.chat-compose-line > button {
  border: 0;
  flex: 0 0 auto;
}
.chat-compose-line .chat-plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  background: #fff;
  color: #384454;
  font-size: 26px;
  line-height: 1;
  border: 1px solid #d4d9df;
}
.chat-compose-line .chat-plus[aria-expanded="true"] {
  transform: rotate(45deg);
  color: #002fa7;
}
.chat-compose-line .chat-send {
  min-height: 44px;
  padding: 0 13px;
  border-radius: 10px;
  background: #07a85a;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-tool-panel {
  display: flex;
  gap: 18px;
  padding: 8px 4px 14px;
}
.chat-tool-panel button {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 58px;
  border: 0;
  background: transparent;
  color: #465366;
  font-size: 12px;
}
.chat-tool-panel button svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dfe3e8;
  color: #334155;
}
.chat-media-input {
  display: none;
}
.chat-video-draft {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
  margin-bottom: 9px;
  padding: 9px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dbe2ee;
}
.chat-video-draft video {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  background: #18202b;
}
.chat-video-draft > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}
.chat-video-draft strong {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-video-draft small,
.chat-video-draft span {
  font-size: 10px;
  color: #64748b;
}
.chat-video-draft > button {
  border: 0;
  background: transparent;
  color: #64748b;
  padding: 4px;
}
.chat-video {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
}
.chat-video > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 110px;
  border: 0;
  border-radius: 9px;
  background: #18202b;
  color: #fff;
}
.chat-video video {
  display: block;
  width: min(260px, 65vw);
  max-height: 300px;
  border-radius: 9px;
  background: #111;
}
.chat-video small,
.chat-video a {
  font-size: 10px;
  color: #64748b;
}
.chat-video p {
  color: #b42318;
  font-size: 11px;
}
.chat-video a {
  text-decoration: underline;
}
.chat-conversation-list {
  margin: 0 -18px;
  background: #f7f8fa;
}
.chat-conversation-list .chat-group-row {
  position: relative;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  border-radius: 0;
  padding: 14px 18px;
  background: #fff;
}
.chat-conversation-list .chat-group-row > div {
  min-width: 0;
}
.chat-conversation-list .chat-group-row h2 {
  font-size: 15px;
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conversation-list .chat-group-row p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conversation-list .chat-group-row time {
  align-self: flex-start;
  color: #9aa2ae;
  font-size: 11px;
  white-space: nowrap;
  margin-left: auto;
}
.chat-conversation-list .chat-group-row .chat-badge {
  position: absolute;
  left: 51px;
  top: 7px;
}
.chat-system-row .chat-avatar {
  background: #eef2f8;
}
.chat-back-list {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #002fa7;
  padding: 8px 0;
  margin: 0 0 8px;
}
.chat-conversation-row {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-bottom: 1px solid #edf0f4;
}
.chat-conversation-row .chat-group-row {
  flex: 1;
  min-width: 0;
}
.chat-conversation-row .chat-hide {
  width: 44px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  color: #8b96a5;
  display: grid;
  place-items: center;
}
.chat-conversation-row .chat-hide:active {
  background: #f1f3f5;
  color: #b42318;
}
.chat-entry-menu {
  display: flex;
  gap: 8px;
  margin: -4px 0 12px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e2e7ed;
  border-radius: 10px;
  box-shadow: 0 5px 16px #14233714;
}
.chat-entry-menu button {
  flex: 1;
  min-height: 38px;
  border: 1px solid #d9e0e8;
  border-radius: 8px;
  background: #f8fafc;
  color: #233044;
}
.chat-title {
  display: none;
}
.chat-kind-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #eef2f5;
  color: #66717c;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}
.chat-list-meta {
  display: block;
  margin-top: 2px;
  color: #66717c;
  font-size: 11px;
}
.platform-notices {
  background: var(--canvas, #f5f8fd);
  color: var(--ink, #17243d);
  overflow: auto;
  padding: 16px 16px 88px;
}
.platform-notices .page-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.platform-notices .page-header h1 {
  margin: 0;
}
.platform-notices .page-header small {
  color: var(--muted, #64748b);
}
.platform-notice-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.platform-notice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 82px;
  border: 1px solid var(--line, #dae3ee);
  border-radius: 15px;
  background: var(--surface, #fff);
  color: inherit;
  text-align: left;
  padding: 12px;
}
.platform-notice-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #ffe9d3;
  color: #a95012;
}
.platform-notice-row-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.platform-notice-row-body strong,
.platform-notice-row-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-notice-row-body small,
.platform-notice-row-body time {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.platform-notice-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dc2626;
  flex: none;
}
.platform-notice-detail {
  margin-top: 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #dae3ee);
  border-radius: 18px;
  padding: 20px;
}
.platform-notice-heading {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #a95012;
  font-size: 13px;
}
.platform-notice-detail h2 {
  overflow-wrap: anywhere;
}
.platform-notice-detail time {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.platform-notice-detail > p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
.platform-notice-gallery {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.platform-notice-gallery button {
  border: 0;
  background: transparent;
  padding: 0;
}
.platform-notice-gallery img {
  display: block;
  width: 100%;
  max-height: 70dvh;
  object-fit: contain;
}
.platform-notice-error {
  padding: 12px;
  border-radius: 12px;
  background: #fff0ec;
}
.platform-notice-popup-backdrop {
  z-index: 1000;
}
.platform-notice-popup {
  position: relative;
  display: grid;
  gap: 12px;
  max-width: 420px;
  width: calc(100% - 28px);
  max-height: 85dvh;
  overflow: auto;
  text-align: center;
}
.platform-notice-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: none;
}
.platform-notice-popup-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #a95012;
}
.platform-notice-popup h2 {
  margin: 0;
}
.platform-notice-popup > img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 12px;
}
.platform-notice-popup > p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.platform-notice-popup-placeholder {
  padding: 30px;
  background: #fff5e9;
  border-radius: 12px;
  color: #a95012;
}
.platform-notice-popup-error {
  position: fixed;
  bottom: 96px;
  left: 16px;
  right: 16px;
  z-index: 1001;
  padding: 12px;
  background: var(--surface, #fff);
  border-radius: 12px;
}
.platform-notice-image-preview {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #000e;
  display: grid;
  place-items: center;
  overflow: auto;
}
.platform-notice-image-preview > button {
  position: absolute;
  right: 16px;
  top: 16px;
  border: 0;
  background: #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
}
.platform-notice-image-preview > img {
  max-width: 90vw;
  max-height: 75dvh;
  object-fit: contain;
  transition: transform 0.15s;
}
.platform-notice-image-preview > div {
  position: absolute;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
}
.platform-notice-image-preview > div button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #17243d;
}
[data-eye-care="true"] .platform-notice-icon,
[data-eye-care="true"] .platform-notice-popup-placeholder {
  background: #e9ead7;
  color: #596647;
}
[data-eye-care="true"] .platform-notice-heading,
[data-eye-care="true"] .platform-notice-popup-mark {
  color: #596647;
}
.equipment-market-page {
  background: var(--sand);
}
.equipment-market-header {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
}
.equipment-market-hero {
  min-height: 150px;
  margin: 2px 0 17px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  border-radius: 25px;
  color: var(--sand);
  background: var(--moss);
  box-shadow: 0 9px #1424422e;
}
.equipment-market-hero > div {
  display: grid;
  gap: 6px;
}
.equipment-market-hero span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}
.equipment-market-hero h2 {
  margin: 0;
  font-size: 22px;
}
.equipment-market-hero p {
  max-width: 245px;
  margin: 0;
  color: #ffffffbf;
  font-size: 12px;
  line-height: 1.55;
}
.equipment-market-hero > svg {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  padding: 14px;
  border-radius: 22px;
  color: var(--ink);
  background: var(--ochre);
  box-shadow: 0 7px 0 var(--clay);
  animation: breathe 2.6s ease-in-out infinite;
}
.equipment-market-section {
  margin-top: 19px;
}
.equipment-market-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
}
.equipment-market-heading > div {
  display: grid;
  gap: 4px;
}
.equipment-market-heading h2 {
  margin: 0;
  color: var(--moss);
  font-size: 17px;
}
.equipment-market-heading p {
  margin: 0;
  color: #17243d99;
  font-size: 11px;
}
.equipment-market-heading > svg {
  color: var(--terracotta);
}
.text-action {
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--terracotta);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}
.text-action svg {
  width: 16px;
  height: 16px;
}
.equipment-market-grid {
  display: grid;
  gap: 9px;
}
.equipment-market-card {
  min-height: 80px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 18px;
  background: var(--oat);
}
.equipment-market-card > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.equipment-market-card strong {
  font-size: 14px;
}
.equipment-market-card span {
  color: #17243da6;
  font-size: 11px;
}
.equipment-market-card em {
  color: var(--terracotta);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.equipment-market-card button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--sand);
  background: var(--moss);
}
.equipment-market-card button svg {
  width: 18px;
}
.equipment-market-empty {
  padding: 20px;
  border: 1px dashed rgba(0, 47, 167, 0.3);
  border-radius: 17px;
  color: #17243d99;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.compact-state {
  min-height: 86px;
}
.equipment-market-requests {
  display: grid;
  gap: 8px;
}
.equipment-market-requests article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 17px;
  background: #eef3ff7a;
}
.equipment-market-requests article div {
  display: grid;
  gap: 4px;
}
.equipment-market-requests article strong {
  font-size: 14px;
}
.equipment-market-requests article span,
.equipment-market-requests time {
  color: #17243d9e;
  font-size: 11px;
}
.equipment-market-requests time {
  text-align: right;
}
.equipment-request-dialog {
  position: relative;
}
.equipment-request-dialog .dialog-close {
  position: absolute;
  right: 12px;
  top: 12px;
  transform: rotate(45deg);
}
.equipment-request-summary {
  margin: 18px 0;
  padding: 13px 14px;
  display: grid;
  gap: 5px;
  border-radius: 15px;
  background: var(--oat);
  color: #17243da8;
  font-size: 12px;
}
.equipment-request-summary strong {
  color: var(--moss);
  font-size: 14px;
}
.equipment-market-request {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  padding: 0 !important;
  border-radius: 17px !important;
  overflow: hidden;
  background: #eef3ff7a !important;
}
.equipment-market-request-content {
  min-width: 0;
  padding: 13px 0 13px 14px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.equipment-market-request-content:focus-visible {
  outline: 3px solid var(--ochre);
  outline-offset: -3px;
}
.equipment-market-request-content > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.equipment-market-request strong {
  font-size: 14px;
}
.equipment-market-request small {
  color: #17243d9e;
  font-size: 11px;
}
.equipment-market-transfer {
  align-self: center;
  margin-right: 10px;
  border: 0;
  border-radius: 10px;
  padding: 8px 11px;
  color: var(--sand);
  background: var(--terracotta);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.equipment-market-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 14px;
  color: #17243db3;
  font-size: 12px;
  font-weight: 800;
}
.equipment-market-pagination button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  color: var(--moss);
  background: var(--oat);
  cursor: pointer;
}
.equipment-market-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.equipment-market-pagination svg {
  width: 17px;
}
.equipment-market-page .equipment-market-hero {
  min-height: 100px;
  padding: 18px;
}
.equipment-quick-actions {
  display: flex !important;
  gap: 8px !important;
}
.equipment-quick-actions button {
  display: grid;
  justify-items: center;
  gap: 6px;
  background: #ffffff15;
  border: 1px solid #ffffff30;
  color: inherit;
  padding: 12px 9px;
  border-radius: 14px;
  font-size: 12px;
}
.equipment-quick-actions svg {
  width: 20px;
}
.equipment-list-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}
.equipment-list-tools select,
.equipment-list-tools button {
  border: 1px solid #dbe2ee;
  background: #fff;
  padding: 9px 12px;
  border-radius: 12px;
  color: #002fa7;
  max-width: 100%;
}
.equipment-market-request {
  border: 1px solid #dbe2ee;
}
.equipment-market-request-content strong {
  display: block;
  margin-bottom: 4px;
}
.equipment-market-page .equipment-request-dialog .dialog-close {
  transform: none;
}
.equipment-forge-page .forge-breakdown {
  gap: 10px;
  line-height: 1.8;
}
.equipment-forge-page .forge-submit:disabled {
  opacity: 0.5;
}
.equipment-forge-page .forge-balance {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.equipment-forge-page .forge-owned {
  border: 1px solid #dbe2ee;
  border-radius: 18px;
}
.forge-equipment-group {
  border-radius: 16px;
  background: #ffffff28;
  padding: 10px;
}
.forge-equipment-group summary {
  cursor: pointer;
  padding: 10px;
  color: #002fa7;
  font-weight: 700;
}
.equipment-market-hero {
  flex-wrap: wrap;
}
.equipment-market-header h1 {
  font-size: 20px !important;
}
.equipment-market-page .equipment-market-request-content {
  display: flex;
  gap: 10px;
  align-items: center;
}
.forge-owned .forge-owned-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.forge-owned .forge-owned-actions button {
  white-space: nowrap;
  padding: 8px 10px;
}
@media (max-width: 420px) {
  .forge-owned .forge-owned-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}
.equipment-market-tabs,
.equipment-publish-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border-radius: 14px;
  background: var(--oat);
}
.equipment-market-tabs {
  margin-top: 14px;
}
.equipment-publish-tabs {
  margin: 0 30px 15px 0;
}
.equipment-market-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.equipment-market-toolbar .equipment-market-tabs {
  min-width: 0;
  margin-top: 0;
}
.equipment-market-toolbar .equipment-market-tabs button {
  min-width: 0;
  padding: 0 4px;
  font-size: 12px;
  white-space: nowrap;
}
.equipment-market-toolbar .equipment-request-button {
  width: auto;
  min-width: 108px;
  min-height: 46px;
  margin: 0;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}
.equipment-market-toolbar .equipment-request-button svg {
  width: 16px;
}
.equipment-market-tabs button,
.equipment-publish-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  color: var(--moss);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.equipment-market-tabs button[aria-selected="true"],
.equipment-publish-tabs button[aria-selected="true"] {
  color: var(--sand);
  background: var(--moss);
  box-shadow: 0 2px 5px #14244220;
}
.equipment-my-sales {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: var(--oat);
}
.equipment-my-sales h3 {
  margin: 0 0 8px;
  color: var(--moss);
  font-size: 14px;
}
.equipment-my-sales > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #002fa71c;
  font-size: 12px;
}
.equipment-my-sales button,
.equipment-sale-hint button {
  border: 0;
  color: var(--terracotta);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.equipment-sale-hint {
  margin: 12px 0;
  color: var(--moss);
  font-size: 12px;
  line-height: 1.5;
}
.equipment-sale-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid #dbe2ee;
  border-radius: 12px;
  background: var(--oat);
  color: var(--moss);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.equipment-sale-more:disabled {
  opacity: 0.5;
  cursor: wait;
}
.otc-market-dashboard {
  margin: 2px 0 10px;
  padding: 15px;
  border-radius: 22px;
  color: #fff;
  background: #1535a2;
  box-shadow: 0 7px #1424422b;
}
.otc-dashboard-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.otc-dashboard-heading small {
  font-size: 11px;
  font-weight: 700;
  color: #cbd7ff;
}
.otc-dashboard-heading h2 {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 1.2;
}
.otc-dashboard-heading h2 span {
  font-size: 10px;
  font-weight: 600;
}
.equipment-market-header-custom {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 6px;
}
.equipment-market-header-custom h1 {
  font-size: 16px !important;
  line-height: 1.25;
}
.equipment-market-header-actions {
  display: flex;
  gap: 5px;
}
.equipment-market-header-actions button {
  min-width: 39px;
  min-height: 42px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  padding: 3px;
  border: 0;
  border-radius: 11px;
  background: #edf1fb;
  color: #1739a5;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}
.equipment-market-header-actions svg {
  width: 17px;
  height: 17px;
}
.otc-trend {
  margin-top: 8px;
}
.otc-trend svg {
  display: block;
  width: 100%;
  height: 68px;
  overflow: visible;
}
.otc-trend line {
  stroke: #ffffff3c;
  stroke-dasharray: 3 5;
}
.otc-trend polyline {
  fill: none;
  stroke: #ffe784;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.otc-trend-labels {
  display: flex;
  justify-content: space-between;
  gap: 3px;
}
.otc-trend-labels span {
  display: grid;
  gap: 3px;
  text-align: center;
  min-width: 0;
}
.otc-trend-labels small {
  font-size: 9px;
  color: #cbd7ff;
}
.otc-trend-labels strong {
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}
.otc-dashboard-state {
  min-height: 68px;
  margin: 8px 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #dae3ff;
}
.otc-dashboard-state button {
  border: 0;
  background: none;
  color: #fff;
  text-decoration: underline;
}
.otc-dashboard-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #ffffff38;
  margin-top: 10px;
  padding-top: 10px;
}
.otc-dashboard-metrics > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 10px;
  color: #d6dfff;
}
.otc-dashboard-metrics strong {
  color: #fff;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.otc-dashboard-metrics > button {
  white-space: nowrap;
  border: 0;
  padding: 6px 0;
  background: none;
  color: #ffe784;
  font-size: 11px;
  font-weight: 700;
}
.otc-benefits-dialog dl {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.otc-benefits-dialog dl > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.otc-benefits-dialog dt {
  color: #63708b;
}
.otc-benefits-dialog dd {
  margin: 0;
  font-weight: 700;
  color: #1535a2;
}
.otc-benefits-dialog p {
  line-height: 1.5;
}
.equipment-market-page .equipment-card-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 12px;
}
.equipment-card-navigation > div {
  display: flex;
  gap: 6px;
}
.equipment-card-navigation button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #ffffff32;
  border-radius: 11px;
  background: #ffffff12;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.equipment-card-navigation svg {
  width: 16px;
  height: 16px;
}
.equipment-card-navigation .equipment-card-back {
  padding-left: 8px;
  background: transparent;
  border-color: transparent;
}
.equipment-card-navigation button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.equipment-market-page .equipment-market-hero {
  gap: 0;
  padding: 12px 16px 16px;
}
.equipment-market-hero .equipment-card-navigation {
  color: #fff;
}
.otc-dashboard-metrics > .otc-payout-trigger {
  display: grid;
  gap: 3px;
  text-align: left;
  min-width: 0;
  color: #d6dfff;
  font-size: 10px;
  white-space: normal;
}
.otc-payout-trigger small {
  color: #ffe784;
}
.otc-payout-dialog {
  max-height: 85vh;
  overflow-y: auto;
}
.otc-payout-date,
.otc-payout-dialog small {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
}
.otc-payout-table {
  overflow-x: auto;
  margin: 16px 0;
}
.otc-payout-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.otc-payout-table th,
.otc-payout-table td {
  padding: 10px 6px;
  border-bottom: 1px solid #94a3b833;
  text-align: left;
  overflow-wrap: anywhere;
}
.otc-payout-table td:first-child {
  max-width: 140px;
}
.otc-payout-table th:last-child,
.otc-payout-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.equipment-request-button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.equipment-request-button svg {
  width: 19px;
}
.equipment-chooser-list {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}
.equipment-chooser-list .equipment-market-card {
  width: 100%;
  border: 2px solid transparent;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.equipment-chooser-list .equipment-market-card.selected {
  border-color: var(--terracotta);
  background: var(--sand);
}
.equipment-chooser-list .equipment-market-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.equipment-chooser-list .equipment-market-card small {
  color: #17243da6;
  font-size: 11px;
}
.equipment-request-dialog .dialog-close {
  transform: none;
}
.equipment-offer-dialog .offer-section {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}
.equipment-offer-dialog .offer-section > strong {
  color: var(--moss);
  font-size: 12px;
}
.offer-option-list {
  display: grid;
  gap: 8px;
  max-height: 170px;
  overflow-y: auto;
}
.offer-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--ink);
  background: var(--oat);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.offer-option.selected {
  border-color: var(--terracotta);
  background: var(--sand);
}
.offer-option > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--terracotta);
}
.offer-option > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.offer-option strong {
  font-size: 13px;
}
.offer-option small,
.offer-empty {
  color: #17243d9e;
  font-size: 11px;
}
.offer-empty {
  padding: 12px;
  border-radius: 12px;
  background: #eef3ff59;
  line-height: 1.5;
}
.equipment-custom-pricing {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #dfe5ef;
  border-radius: 14px;
  background: #f6f8fc;
  text-align: left;
}
.equipment-custom-pricing dl {
  display: grid;
  gap: 9px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0e6ef;
}
.equipment-custom-pricing dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.equipment-custom-pricing dt {
  font-size: 12px;
  color: #65728a;
}
.equipment-custom-pricing dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #243653;
  text-align: right;
}
.equipment-custom-pricing > label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #243653;
}
.equipment-price-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #c8d3e4;
  border-radius: 10px;
  background: #fff;
}
.equipment-price-input:focus-within {
  border-color: var(--terracotta);
  outline: 2px solid #1644a51a;
}
.equipment-price-input input {
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: #193775;
}
.equipment-price-input > span {
  flex-shrink: 0;
  font-size: 11px;
  color: #65728a;
}
.equipment-custom-pricing > small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #65728a;
}
.otc-maintenance-screen {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 420px;
  margin: 72px auto 32px;
  padding: 28px 22px;
  text-align: center;
  color: #243653;
}
.otc-maintenance-screen > svg {
  box-sizing: content-box;
  padding: 16px;
  border-radius: 50%;
  background: #eef3ff;
  color: #193c8d;
}
.otc-maintenance-screen h2 {
  margin: 0;
  font-size: 21px;
}
.otc-maintenance-screen p {
  margin: 0;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #65728a;
}
.otc-maintenance-screen > div {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.otc-maintenance-screen button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #d5deec;
  border-radius: 10px;
  background: #fff;
  color: #193c8d;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.equipment-publish-options {
  display: grid;
  gap: 12px;
  margin: 20px 0 4px;
}
.equipment-publish-options .offer-option {
  min-height: 76px;
  border: 1px solid #dfe5ef;
  background: #f6f8fc;
  padding: 16px;
  text-align: left;
}
.equipment-publish-options .offer-option:hover,
.equipment-publish-options .offer-option:focus-visible {
  border-color: var(--terracotta);
  outline: 2px solid #1644a51a;
  outline-offset: 2px;
}
.equipment-publish-options .offer-option:disabled {
  opacity: 0.6;
  cursor: wait;
}
.equipment-market-page .equipment-list-tools {
  align-items: flex-start;
  flex-wrap: wrap;
}
.equipment-filter-options {
  display: flex;
  flex: 1 1 240px;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.equipment-filter-options button {
  min-height: 44px;
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.equipment-filter-options button[aria-pressed="true"] {
  background: #002fa7;
  border-color: #002fa7;
  color: #fff;
}
.equipment-filter-options button:focus-visible {
  outline: 2px solid #002fa7;
  outline-offset: 2px;
}
.equipment-order-meta {
  display: grid;
  gap: 3px;
  margin: 7px 0;
  color: #58677b;
  font-size: 11px;
  line-height: 1.5;
  min-width: 0;
}
.equipment-order-meta > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.equipment-order-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.equipment-order-meta b {
  font-variant-numeric: tabular-nums;
  color: var(--moss);
  letter-spacing: 0;
}
.equipment-order-meta button {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 6px;
  color: var(--moss);
  background: #fff;
}
.equipment-order-meta button svg {
  width: 14px;
  height: 14px;
}
.equipment-order-meta time {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.totp-page {
  background: #fff;
  padding-bottom: 110px;
}
.totp-page .page-header {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}
.totp-page .page-header > svg {
  color: #002fa7;
}
.totp-card {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid #e5eaf3;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 34px #14244214;
}
.totp-status {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
}
.totp-status > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: #eef3ff;
  color: #002fa7;
}
.totp-status.bound > span {
  background: #e8f7ef;
  color: #208650;
}
.totp-status svg {
  width: 28px;
  height: 28px;
}
.totp-status div {
  display: grid;
  gap: 3px;
}
.totp-status small,
.totp-secret small {
  color: #6b768b;
  font-size: 11px;
}
.totp-status h2,
.totp-step h2 {
  margin: 0;
  color: #17243d;
  font-size: 20px;
}
.totp-status p,
.totp-step p {
  margin: 0;
  color: #6b768b;
  font-size: 12px;
  line-height: 1.6;
}
.totp-meta {
  padding: 14px 16px;
  border-radius: 15px;
  background: #f5f7fb;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.totp-meta span {
  color: #6b768b;
}
.totp-owner-note,
.totp-warning {
  margin: 0;
  padding: 14px 15px;
  border-radius: 15px;
  background: #eef3ff;
  color: #43516a;
  font-size: 12px;
  line-height: 1.65;
}
.totp-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.totp-step > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #002fa7;
  color: #fff;
  font-weight: 900;
}
.totp-step.danger > span {
  background: #fff1ef;
  color: #b34b3d;
}
.totp-step.danger svg {
  width: 20px;
}
.totp-step div {
  display: grid;
  gap: 5px;
}
.totp-card .field {
  display: grid;
  gap: 7px;
  color: #43516a;
  font-size: 12px;
}
.totp-card .field input {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid #dbe2ee;
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  color: #17243d;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.totp-card .field input:focus {
  border-color: #002fa7;
  box-shadow: 0 0 0 3px #002fa71a;
}
.totp-qr {
  width: min(250px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid #dbe2ee;
  border-radius: 23px;
  background: #fff;
}
.totp-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.totp-secret {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 15px;
  border-radius: 16px;
  background: #f5f7fb;
  text-align: center;
}
.totp-secret strong {
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
}
.totp-secret button {
  border: 0;
  background: transparent;
  color: #002fa7;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
}
.totp-secret button svg {
  width: 15px;
}
.totp-warning {
  background: #fff7e8;
  color: #7a571d;
}
.totp-card .primary-button,
.totp-card .secondary-button,
.totp-retry {
  width: 100%;
}
.totp-card .danger-button {
  background: #b34b3d;
}
.security-setting-detail {
  display: block;
  margin-top: 3px;
  color: #7b8596;
  font-size: 10px;
  font-weight: 500;
}
.totp-retry {
  margin-top: 12px;
}
.face-verification-page {
  background: #f7f7f8;
  color: #17243d;
}
.face-verification-page .page-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  margin-bottom: 24px;
}
.face-verification-page .page-header > svg {
  justify-self: end;
  color: #002fa7;
}
.face-verification-page .page-header h1 {
  margin: 2px 0 0;
  font-size: 22px;
  letter-spacing: 0;
}
.face-state {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 22px 0;
  border-top: 1px solid #dbe2ee;
  border-bottom: 1px solid #dbe2ee;
}
.face-state > svg {
  width: 34px;
  height: 34px;
  color: #002fa7;
}
.face-state strong {
  font-size: 18px;
}
.face-state p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.75;
}
.face-state .primary-button {
  margin-top: 8px;
  min-width: 152px;
}
.face-state-error > svg {
  color: #9f3a38;
}
.face-state-success > svg {
  color: #002fa7;
}
.face-status-band {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid #dbe2ee;
  border-bottom: 1px solid #dbe2ee;
}
.face-status-band > svg {
  width: 34px;
  height: 34px;
  color: #002fa7;
}
.face-status-band span,
.face-status-band strong {
  display: block;
}
.face-status-band span {
  color: #64748b;
  font-size: 11px;
}
.face-status-band strong {
  margin-top: 4px;
  font-size: 18px;
}
.face-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #dbe2ee;
}
.face-facts > div {
  min-width: 0;
  padding: 18px 8px 18px 0;
}
.face-facts > div + div {
  padding-left: 12px;
  border-left: 1px solid #dbe2ee;
}
.face-facts span,
.face-facts strong {
  display: block;
}
.face-facts span {
  color: #64748b;
  font-size: 10px;
}
.face-facts strong {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.face-note,
.face-valid-until {
  margin: 17px 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.8;
}
.face-valid-until {
  color: #002fa7;
  font-variant-numeric: tabular-nums;
}
.face-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  background: #002fa7;
}
.face-start svg {
  width: 19px;
}
.face-start:disabled {
  opacity: 0.5;
}
@media (max-width: 350px) {
  .face-facts {
    grid-template-columns: 1fr;
  }
  .face-facts > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #dbe2ee;
  }
}
.face-state .face-countdown {
  color: #002fa7;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.face-identity-check {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dbe2ee;
  border-radius: 16px;
  background: #fff;
}
.face-identity-check h2 {
  margin: 0;
  font-size: 17px;
}
.face-identity-check > p {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.65;
}
.face-identity-preview {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 13px;
  border-radius: 12px;
  background: #f5f7fb;
}
.face-identity-preview span {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #64748b;
  font-size: 13px;
}
.face-identity-preview strong {
  color: #17243d;
  letter-spacing: 0.03em;
}
.face-identity-check .field {
  display: grid;
  gap: 7px;
}
.face-identity-check .field > span {
  font-size: 13px;
  font-weight: 700;
}
.face-identity-check input {
  min-height: 46px;
  border: 1px solid #cbd5e1;
  border-radius: 11px;
  padding: 0 12px;
  background: #fff;
  color: #17243d;
  font: inherit;
}
.face-identity-check input:focus {
  border-color: #002fa7;
  outline: 3px solid rgba(0, 47, 167, 0.12);
}
.face-identity-check small {
  color: #64748b;
}
.face-identity-check .inline-error {
  color: #9f3a38;
}
.face-identity-check .face-start {
  margin-top: 15px;
}
.tutorial-page .page-header {
  justify-content: flex-start;
  gap: 14px;
}
.tutorial-page .page-header h1 {
  font-size: 22px;
}
.tutorial-list {
  display: grid;
  gap: 18px;
}
.tutorial-list > button {
  padding: 0;
  border: 1px solid #dbe2ee;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  color: #17243d;
}
.tutorial-list > button > span {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  background: #eef3ff;
}
.tutorial-list img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tutorial-list svg {
  position: absolute;
  left: calc(50% - 22px);
  top: calc(50% - 22px);
  width: 44px;
  height: 44px;
  color: #fff;
  filter: drop-shadow(0 2px 4px #0009);
}
.tutorial-list strong {
  display: block;
  padding: 12px 14px;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.tutorial-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  font-size: 13px;
}
.tutorial-pager button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #dbe2ee;
  background: transparent;
  border-radius: 8px;
  color: #002fa7;
}
.tutorial-page video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #111;
  object-fit: contain;
}
.tutorial-page h2 {
  font-size: 18px;
  overflow-wrap: anywhere;
}
.address-book {
  padding-bottom: 180px;
}
.address-book > .page-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  text-align: center;
}
.address-book h1 {
  font-size: 23px;
}
.address-cards {
  display: grid;
  gap: 14px;
}
.address-card {
  padding: 18px;
  border-radius: 20px;
  background: #eef3ff59;
  border: 1px solid rgba(0, 47, 167, 0.12);
}
.address-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.address-contact strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}
.address-contact span {
  font-size: 13px;
  color: #002fa7;
}
.address-contact em {
  font-size: 10px;
  font-style: normal;
  border-radius: 5px;
  background: var(--moss);
  color: var(--sand);
  padding: 3px 6px;
}
.address-card p {
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.address-card-actions {
  display: flex;
  gap: 13px;
  border-top: 1px solid rgba(0, 47, 167, 0.15);
  padding-top: 8px;
}
.address-card-actions button {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  font-size: 12px;
  color: var(--moss);
  padding: 0;
}
.address-card-actions button:first-child {
  margin-right: auto;
}
.address-card-actions svg {
  width: 14px;
  height: 14px;
}
.address-add-bar {
  position: fixed;
  bottom: calc(88px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%);
  width: min(calc(100% - 36px), 394px);
  z-index: 5;
}
.address-add-bar button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 18px #1424422e;
}
.address-empty {
  text-align: center;
}
.address-empty > svg {
  width: 42px;
  height: 42px;
  margin: 10px auto;
}
.address-editor {
  background: #eef3ff4d;
  border-radius: 22px;
  padding: 18px;
}
.address-editor fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.address-editor textarea {
  font: inherit;
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid rgba(0, 47, 167, 0.25);
  border-radius: 12px;
  background: var(--sand);
  color: var(--ink);
  resize: vertical;
}
.address-region-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 20px;
}
.address-region-heading button {
  border: 0;
  background: transparent;
  font-size: 11px;
  color: var(--moss);
  min-height: 36px;
}
.address-regions {
  display: grid;
  gap: 10px;
  margin: 6px 0 12px;
}
.address-regions label {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  font-size: 13px;
  gap: 8px;
}
.address-regions select,
.address-regions input {
  min-width: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(0, 47, 167, 0.25);
  border-radius: 10px;
  background: var(--sand);
  color: var(--ink);
  font: inherit;
}
.address-default-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 0;
}
.address-default-switch span {
  display: grid;
  gap: 5px;
}
.address-default-switch strong {
  font-size: 14px;
}
.address-default-switch small {
  font-size: 11px;
  color: #002fa7;
}
.address-default-switch input {
  width: 20px;
  height: 20px;
  accent-color: var(--moss);
}
.address-field-error {
  display: block;
  color: var(--danger);
  font-size: 12px;
  margin-top: 5px;
}
.address-editor .primary-button {
  width: 100%;
}
.address-delete-actions {
  display: flex;
  gap: 12px;
}
.address-delete-actions button {
  flex: 1;
}
@media (min-width: 700px) {
  .address-add-bar {
    bottom: 118px;
  }
}
.payment-refresh .payment-intro {
  border-radius: 22px;
  background: linear-gradient(120deg, #002fa7, #002fa7);
  color: #fff;
  padding: 22px;
  margin-bottom: 20px;
}
.payment-intro > span {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}
.payment-intro > strong {
  display: block;
  font-size: 25px;
  margin: 8px 0;
}
.payment-intro p {
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
  opacity: 0.85;
}
.payment-refresh .payment-method-list {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}
.payment-refresh .payment-account {
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 19px;
  padding: 17px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.payment-account-heading {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.payment-account-heading > div {
  display: grid;
  gap: 5px;
}
.payment-account-heading small {
  color: #002fa7;
  font-size: 10px;
}
.payment-account-heading strong {
  font-size: 14px;
}
.payment-account-heading span {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.payment-account-icon {
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 13px;
  width: 42px;
  height: 42px;
  color: #002fa7;
}
.wechat .payment-account-icon {
  background: #fff;
  color: #002fa7;
}
.alipay .payment-account-icon {
  background: #e2edf6;
  color: #397da3;
}
.payment-refresh .payment-view-button {
  border: 0;
  background: #fff;
  color: #002fa7;
  border-radius: 12px;
  padding: 9px 12px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.payment-refresh .payment-method-detail {
  flex-basis: 100%;
  width: 100%;
  border-top: 1px solid #dbe2ee;
  padding-top: 12px;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.payment-method-detail img {
  display: block;
  max-width: 210px;
  width: 100%;
  margin: 15px auto;
  border-radius: 12px;
}
.payment-refresh .form-card {
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 22px;
  padding: 20px;
}
.payment-form-title {
  font-size: 19px;
  margin: 0 0 5px;
}
.payment-form-subtitle {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 17px;
}
.payment-refresh .payment-type {
  gap: 6px;
  background: #fff;
  padding: 5px;
  border-radius: 15px;
  margin-bottom: 20px;
}
.payment-refresh .payment-type button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  border-radius: 11px;
  padding: 10px 4px;
}
.payment-type button small {
  flex-basis: 100%;
  font-size: 9px;
}
.payment-refresh .field input {
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 13px;
}
.payment-upload {
  border: 1px dashed #dbe2ee;
  border-radius: 15px;
  padding: 15px;
  background: #fff;
  gap: 10px;
}
.payment-upload small {
  font-size: 11px;
  line-height: 1.7;
  color: #64748b;
}
.payment-upload input {
  max-width: 100%;
  font-size: 11px;
}
.payment-refresh .payment-qr-preview {
  display: block;
  max-width: 190px;
  width: 100%;
  margin: 12px auto;
  border-radius: 14px;
}
.payment-refresh .primary-button {
  background: #002fa7;
}
.payment-refresh .primary-button:disabled {
  opacity: 0.45;
}
.announcement-detail {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #f5f8fd;
  overflow: auto;
  padding: 20px max(18px, calc((100vw - 480px) / 2));
  color: #17243d;
}
.announcement-detail article {
  background: #fff;
  padding: 24px;
  border-radius: 18px;
}
.announcement-detail h2 {
  overflow-wrap: anywhere;
}
.announcement-detail time {
  color: #64748b;
  font-size: 13px;
}
.announcement-detail p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.9;
}
.mall-notice-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.announcement-list-items {
  display: grid;
  gap: 10px;
}
.announcement-list-items > button {
  width: 100%;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid #dbe2ee;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  color: inherit;
}
.announcement-list-items > button > img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
}
.announcement-list-items > button > span {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.announcement-list-items strong,
.announcement-list-items small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.announcement-list-items small {
  color: #64748b;
}
.announcement-detail-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 18px 0;
}
.announcement-popup-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0;
}
.announcement-detail-images button,
.announcement-popup-images button {
  border: 0;
  background: none;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
}
.announcement-popup-images button {
  aspect-ratio: 1;
}
.announcement-detail-images img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70dvh;
  object-fit: contain;
  background: #f5f8fd;
}
.announcement-popup-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.announcement-image-preview {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #000d;
  display: grid;
  place-items: center;
  padding: 20px;
}
.announcement-image-preview > button {
  position: absolute;
  right: 18px;
  top: 18px;
  border: 0;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #17243d;
}
.announcement-image-preview > img {
  max-width: 100%;
  max-height: 90dvh;
  object-fit: contain;
}
.mall-page {
  background: #fff;
}
.mall-wallet {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(120deg, #002fa7, #002fa7);
  color: #fff;
  margin: 12px 0 18px;
}
.mall-wallet > span {
  font-size: 13px;
  opacity: 0.8;
}
.mall-wallet > strong {
  display: block;
  font-size: 32px;
  overflow-wrap: anywhere;
  margin-top: 10px;
}
.mall-wallet button {
  position: absolute;
  right: 18px;
  top: 20px;
  display: flex;
  align-items: center;
  background: #ffffff18;
  border: 1px solid #ffffff30;
  border-radius: 20px;
  padding: 8px;
  color: #fff;
}
.mall-notice-strip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 15px;
  border: 1px solid #dbe2ee;
  border-radius: 18px;
  background: #fff;
  color: #002fa7;
}
.mall-notice-strip span {
  flex: 1;
  min-width: 0;
}
.mall-notice-strip small {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-bottom: 4px;
}
.mall-notice-strip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.mall-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 14px;
}
.mall-section-title h2 {
  font-size: 19px;
  margin: 0;
}
.mall-section-title > span {
  font-size: 12px;
  color: #64748b;
}
.mall-page .mall-product-grid {
  gap: 13px;
}
.mall-page .mall-product-card {
  grid-template-rows: auto auto auto auto 1fr;
  border: 1px solid #dbe2ee;
  border-radius: 20px;
  overflow: hidden;
  padding: 10px;
  background: #fff;
}
.mall-page .mall-product-image {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
}
.mall-page .mall-product-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
.mall-image-placeholder {
  position: absolute;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  z-index: 0;
}
.mall-page .mall-redeem-button {
  background: #002fa7;
  color: #fff;
  border: 0;
  border-radius: 12px;
  margin-top: 8px;
  font-size: 13px;
}
.mall-page .mall-redeem-button:disabled {
  opacity: 0.45;
}
.mall-notice-dialog {
  text-align: center;
  border-radius: 28px !important;
  background: #fff !important;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
}
.mall-notice-icon {
  margin: 0 auto 15px;
  background: #fff;
  color: #002fa7;
  border-radius: 20px;
  padding: 18px;
}
.mall-notice-dialog > small {
  color: #64748b;
  letter-spacing: 3px;
}
.mall-notice-dialog h2 {
  font-size: 21px;
  overflow-wrap: anywhere;
}
.mall-notice-content {
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  line-height: 1.9;
  color: #002fa7;
  padding: 14px;
  background: #fff;
  border-radius: 14px;
  margin: 0 0 22px;
  min-height: 70px;
}
.mall-notice-dialog .primary-button {
  flex-shrink: 0;
  background: #002fa7;
}
.mall-notice-backdrop {
  align-items: center !important;
  justify-content: center !important;
}
.mall-notice-dialog {
  font-family: inherit;
}
.mall-page .mall-orders-button {
  background: #002fa7;
}
.mall-page .eyebrow {
  color: #002fa7;
}
.home-services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 16px 6px;
  margin: 14px 0 22px;
  border-radius: 20px;
  background: #dfe9ff26;
}
.home-services button {
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}
.home-services button > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: #002fa72e;
  color: #002fa7;
}
.home-services button:nth-child(2) > span {
  background: #dfe9ff40;
  color: var(--moss);
}
.home-services button:nth-child(3) > span {
  background: #c66b3d26;
  color: #98562e;
}
.home-services button:nth-child(4) > span {
  background: #dfe9ff3d;
  color: #002fa7;
}
.home-services svg {
  width: 23px;
  height: 23px;
}
.home-services button:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 4px;
  border-radius: 12px;
}
.mall-explore-entry {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  text-align: left;
  padding: 14px 16px;
  margin: 0 0 22px;
  border: 1px solid #dbe2ee;
  border-radius: 18px;
  background: #f6f8ff;
  color: #002fa7;
}
.mall-explore-entry > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #dfe9ff;
}
.mall-explore-entry strong {
  font-size: 15px;
}
.mall-explore-entry small {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
}
.mall-explore-entry > svg {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.mall-view-all {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 40px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--moss);
  font-size: 13px;
  font-weight: 700;
}
.mall-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--moss);
}
.mall-pagination button {
  min-height: 42px;
  border: 1px solid rgba(0, 47, 167, 0.25);
  border-radius: 12px;
  padding: 8px 14px;
  background: #dfe9ff29;
  color: var(--moss);
  font-weight: 700;
}
.app-shell[data-eye-care="true"] .mall-page,
.app-shell[data-eye-care="true"] .mall-page .mall-notice-strip,
.app-shell[data-eye-care="true"] .mall-page .home-services,
.app-shell[data-eye-care="true"] .mall-page .mall-explore-entry,
.app-shell[data-eye-care="true"] .mall-page .mall-product-card,
.app-shell[data-eye-care="true"] .mall-page .mall-product-image {
  background: #f3eadb;
  border-color: #d7cbb7;
}
.app-shell[data-eye-care="true"] .mall-page .mall-notice-strip {
  color: #35507b;
}
.app-shell[data-eye-care="true"] .mall-page .mall-notice-strip small,
.app-shell[data-eye-care="true"] .mall-page .mall-explore-entry small,
.app-shell[data-eye-care="true"] .mall-page .mall-section-title > span,
.app-shell[data-eye-care="true"] .mall-page .mall-product-card small {
  color: #756d60;
}
.app-shell[data-eye-care="true"] .mall-page .home-services {
  box-shadow: inset 0 0 0 1px #e0d4c2;
}
.app-shell[data-eye-care="true"] .mall-page .mall-explore-entry {
  background: #eee3d1;
}
.app-shell[data-eye-care="true"] .mall-page .mall-explore-entry > span,
.app-shell[data-eye-care="true"] .mall-page .home-services button > span {
  background: #e4d6bf;
}
.app-shell[data-eye-care="true"] .mall-page .mall-product-card {
  box-shadow: 0 5px #5b482d1a;
}
.app-shell[data-eye-care="true"] .mall-notice-dialog,
.app-shell[data-eye-care="true"] .mall-notice-content,
.app-shell[data-eye-care="true"] .announcement-detail,
.app-shell[data-eye-care="true"] .announcement-detail article {
  background: #f3eadb !important;
  color: #3b4037;
}
.app-shell[data-eye-care="true"] .mall-page .mall-notice-strip {
  background: #eadfcf;
  border-color: #d4c4ae;
}
.app-shell[data-eye-care="true"] .mall-page .home-services {
  background: #e6dac8;
  box-shadow: inset 0 0 0 1px #d4c4ae;
}
.app-shell[data-eye-care="true"] .mall-page .mall-product-card {
  background: #eadfcf;
  border-color: #d4c4ae;
}
.app-shell[data-eye-care="true"] .mall-page .mall-product-image {
  background: #e2d3bd;
}
.app-shell[data-eye-care="true"] .mall-page .mall-wallet {
  background: linear-gradient(120deg, #74765c, #5f684f);
  color: #f7efdf;
  box-shadow: 0 7px #5b482d2e;
}
.app-shell[data-eye-care="true"] .mall-page .mall-wallet button {
  background: #f7efdf24;
  border-color: #f7efdf4d;
  color: #f7efdf;
}
.mall-fee-summary {
  margin: 16px 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface-secondary, rgba(128, 128, 128, 0.08));
}
.mall-fee-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.mall-fee-summary dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mall-fee-summary > div:last-child {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
}
.usdt-gift-page {
  padding-bottom: 120px;
}
.usdt-purchase-card,
.usdt-payment-card,
.usdt-history {
  margin: 16px;
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px #1b372d14;
}
.usdt-price,
.usdt-limits,
.usdt-history article > div,
.usdt-history-order > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.usdt-price strong {
  color: #087f5b;
}
.usdt-limits {
  margin: 14px 0;
  color: #65736d;
  font-size: 13px;
}
.usdt-purchase-card label {
  display: grid;
  gap: 8px;
}
.usdt-purchase-card input {
  font-size: 22px;
  padding: 14px;
  border: 1px solid #ccd8d2;
  border-radius: 14px;
}
.usdt-purchase-card > strong {
  display: block;
  margin: 16px 0;
}
.usdt-payment-card {
  padding: 22px;
  background: linear-gradient(180deg, #f4fbf8 0, #fff 42%);
  border: 1px solid rgba(8, 127, 91, 0.12);
  text-align: left;
}
.usdt-payment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.usdt-payment-heading > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.usdt-payment-heading h2 {
  margin: 0;
  font-size: 20px;
  color: #173d32;
}
.usdt-payment-heading > svg {
  width: 26px;
  height: 26px;
  color: #0a8f63;
}
.usdt-network-badge {
  padding: 5px 8px;
  border-radius: 8px;
  background: #087f5b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.usdt-qr {
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 18px;
  background: #fff;
  border: 1px solid #dcebe5;
  border-radius: 22px;
  box-shadow: 0 12px 28px #1957431f;
}
.usdt-qr svg {
  display: block;
  width: min(260px, 100%);
  height: auto;
}
.usdt-network-hint {
  margin: 13px 0 18px;
  text-align: center;
  color: #60746c;
  font-size: 13px;
}
.usdt-amount-panel {
  padding: 16px 18px;
  border-radius: 17px;
  background: #e8f7f1;
  text-align: center;
}
.usdt-amount-panel > span {
  color: #587168;
  font-size: 12px;
}
.usdt-payable-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
}
.usdt-payable {
  font-size: 29px;
  line-height: 1.2;
  color: #087f5b;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.usdt-payable-row button,
.usdt-copy-row button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: #fff;
  color: #087f5b;
  box-shadow: 0 3px 10px #1957431a;
}
.usdt-payable-row button svg,
.usdt-copy-row button svg {
  width: 17px;
  height: 17px;
}
.usdt-address-block {
  margin-top: 16px;
}
.usdt-address-block > span {
  display: block;
  margin: 0 0 7px 3px;
  color: #60746c;
  font-size: 12px;
}
.usdt-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 11px 11px 14px;
  background: #f3f7f5;
  border: 1px solid #e4ece8;
  border-radius: 14px;
}
.usdt-copy-row code {
  min-width: 0;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: left;
  color: #294b40;
}
.usdt-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 12px;
  color: #426158;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.usdt-countdown svg {
  width: 17px;
  height: 17px;
  color: #0a8f63;
}
.usdt-countdown strong {
  color: #173d32;
  font-size: 15px;
}
.usdt-payment-notice {
  margin-top: 12px;
  padding: 14px 15px;
  border-radius: 14px;
  background: #fff8e9;
  border: 1px solid #f3e1b8;
  text-align: center;
}
.usdt-payment-notice p {
  margin: 0;
  color: #765a24;
  font-size: 12px;
  line-height: 1.65;
}
.usdt-payment-notice strong {
  display: block;
  margin-top: 5px;
  color: #087f5b;
  font-size: 13px;
}
.usdt-result {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px;
}
.usdt-result svg {
  width: 46px;
  height: 46px;
  color: #0a8f63;
}
.usdt-result.warning {
  color: #9a5b00;
}
.usdt-history h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.usdt-history article,
.usdt-history-order {
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid #edf1ef;
  background: transparent;
  color: inherit;
  text-align: left;
}
.usdt-history article p,
.usdt-history-order p {
  margin: 5px 0;
  color: #68746f;
}
.usdt-history-order {
  position: relative;
  padding-right: 92px;
  cursor: pointer;
}
.usdt-history-order:active {
  opacity: 0.72;
}
.usdt-history-continue {
  position: absolute;
  right: 0;
  bottom: 15px;
  display: flex;
  align-items: center;
  gap: 2px;
  color: #087f5b;
  font-size: 13px;
  font-weight: 700;
}
.usdt-history-continue svg {
  width: 16px;
  height: 16px;
}
.usdt-gift-entry {
  margin-top: 4px;
}
@media (max-width: 360px) {
  .usdt-payment-card {
    padding: 17px;
  }
  .usdt-qr {
    padding: 13px;
  }
  .usdt-payable {
    font-size: 25px;
  }
}
.shelf-game-page {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f3f6ee;
  isolation: isolate;
}
.shelf-game-page > header {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 58px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid #e6e9e4;
}
.shelf-game-page > header button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: #edf3ea;
  color: #205638;
}
.shelf-game-page > header div {
  display: grid;
  flex: 1;
}
.shelf-game-page > header strong {
  font-size: 16px;
}
.shelf-game-page > header small {
  color: #68736b;
}
.shelf-game-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: strict;
  background: #f3f6ee;
}
.shelf-game-viewport iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f3f6ee;
}
.shelf-game-viewport > section {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
}
.shelf-game-viewport > section button {
  padding: 11px 24px;
  border: 0;
  border-radius: 12px;
  background: #205638;
  color: #fff;
  font-weight: 700;
}
.shelf-game-loader {
  width: 36px;
  height: 36px;
  border: 3px solid #d7e2d8;
  border-top-color: #2f7148;
  border-radius: 50%;
  animation: shelf-game-spin 0.8s linear infinite;
}
@keyframes shelf-game-spin {
  to {
    transform: rotate(360deg);
  }
}
.explore-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin-left: -18px;
  margin-right: -18px;
  padding-bottom: 0;
  background: #06143a;
}
.explore-frame-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.explore-frame-shell iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 78px);
  height: calc(100dvh - 78px);
  min-height: calc(100vh - 78px);
  min-height: calc(100dvh - 78px);
  border: 0;
  background: #06143a;
}
.explore-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: #06143a;
  color: #f4e9d5;
}
.explore-loading strong {
  font-size: 18px;
}
.explore-loading p {
  margin: 0;
  font-size: 14px;
  color: #c1cadd;
}
.explore-loading button {
  margin-top: 8px;
  padding: 11px 24px;
  border: 0;
  border-radius: 22px;
  background: #efd19a;
  color: #24334a;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.explore-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #efd19a40;
  border-top-color: #efd19a;
  border-radius: 50%;
  animation: explore-loading-spin 1s linear infinite;
}
.app-shell[data-eye-care="true"] .explore-loading {
  background: #eee5d2;
  color: #4d463a;
}
.app-shell[data-eye-care="true"] .explore-loading p {
  color: #6c6455;
}
@keyframes explore-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .explore-loading-spinner {
    animation: none;
  }
}
.explore-activity-entry {
  position: absolute;
  z-index: 2;
  top: calc(58px + env(safe-area-inset-top));
  right: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
  min-height: 55px;
  padding: 8px 10px;
  border: 1.5px solid #f8d795;
  border-radius: 14px;
  background: linear-gradient(132deg, #a32929, #7b1c24);
  box-shadow:
    0 5px #692027,
    0 10px 20px #10274770;
  color: #fff4d9;
  text-align: left;
  cursor: pointer;
}
.explore-activity-entry > span:first-child {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #f5d79d;
  color: #8f2c26;
  font-size: 19px;
  font-weight: 900;
}
.explore-activity-entry strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
}
.explore-activity-entry small {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  color: #f8dfab;
  white-space: nowrap;
}
.explore-activity-entry:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
html[data-eye-care="true"] .explore-activity-entry {
  background: linear-gradient(132deg, #827256, #675c4b);
  border-color: #d7c59d;
  box-shadow:
    0 5px #554d40,
    0 10px 20px #10274750;
  color: #f6efe0;
}
html[data-eye-care="true"] .explore-activity-entry > span:first-child {
  background: #e2d5b6;
  color: #665740;
}
html[data-eye-care="true"] .explore-activity-entry small {
  color: #ece0c6;
}
.explore-game-entries {
  position: absolute;
  z-index: 3;
  right: 16px;
  top: calc(130px + env(safe-area-inset-top));
  display: grid;
  gap: 8px;
}
.explore-game-entries > button {
  padding: 12px 16px;
  border: 1px solid #e6c68d;
  border-radius: 12px;
  background: #fff3d8;
  color: #6d3d16;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
}
.explore-game-entries > button:focus-visible {
  outline: 3px solid #9b732e;
  outline-offset: 3px;
}
html[data-eye-care="true"] .explore-game-entries > button {
  background: #ece0c6;
  border-color: #c8b38a;
  color: #514832;
}
.activity-rankings {
  min-height: 100%;
  padding: 0 16px 100px;
  background: #fff7eb;
  color: #28332d;
  overflow: auto;
}
.activity-rankings button {
  font: inherit;
  cursor: pointer;
}
.activity-rankings button:focus-visible {
  outline: 3px solid #b84c35;
  outline-offset: 2px;
}
.activity-rankings-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(17px + env(safe-area-inset-top)) 2px 18px;
}
.activity-rankings-top > button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 11px;
  background: #f0e2d3;
  color: #8d3a30;
}
.activity-rankings-top > div {
  flex: 1;
}
.activity-rankings-top strong {
  display: block;
  font-size: 19px;
}
.activity-rankings-top small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #947668;
}
.activity-rankings-top > svg {
  color: #ae3f2e;
}
.activity-rankings-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  margin-bottom: 16px;
  background: #f0e2d3;
  border-radius: 14px;
}
.activity-rankings-tabs button {
  padding: 10px 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #856b5e;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.activity-rankings-tabs button[aria-selected="true"] {
  background: #fff9ef;
  color: #a02f2b;
  box-shadow: 0 3px 9px #6a281a1a;
}
.activity-rankings-hero {
  position: relative;
  overflow: hidden;
  min-height: 223px;
  border-radius: 24px;
  padding: 25px 21px 20px;
  background: radial-gradient(circle at 88% 4%, #d47845, #ad332b 42%, #842024);
  color: #fff5de;
}
.activity-rankings-hero:before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid #ffd68f8c;
  border-radius: 50%;
  right: -58px;
  top: 5px;
  box-shadow:
    0 0 0 26px #ffd68f0e,
    0 0 0 54px #ffd68f0a;
}
.activity-rankings-hero > span {
  position: relative;
  color: #ffe1ad;
  font-size: 11px;
  letter-spacing: 0.13em;
  font-weight: 700;
}
.activity-rankings-hero h1 {
  position: relative;
  margin: 15px 0 8px;
  font-size: 31px;
  line-height: 1.18;
  color: #fff5de;
  text-shadow: 0 2px 0 #60222380;
}
.activity-rankings-hero p {
  position: relative;
  max-width: 260px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.activity-rankings-hero > div {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 23px;
  color: #ffe1ad;
  font-size: 11px;
}
.activity-rankings-hero > div strong {
  padding: 5px 8px;
  border: 1px solid #ffffff70;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 10px;
}
.activity-rankings-hero.festival {
  background: radial-gradient(circle at 85% 3%, #d15b37, #a92428 40%, #7e1b22);
}
.activity-rankings-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding: 15px 16px;
  border: 1px solid #e4e6d8;
  border-radius: 17px;
  background: #fffdf8;
}
.activity-rankings-status > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff0d8;
  color: #ad402e;
  font-size: 20px;
}
.activity-rankings-status strong {
  display: block;
  font-size: 13px;
}
.activity-rankings-status small {
  display: block;
  margin-top: 4px;
  color: #718078;
  font-size: 11px;
  line-height: 1.5;
}
.activity-rankings-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 24px 3px 13px;
}
.activity-rankings-heading h2 {
  margin: 0;
  font-size: 19px;
}
.activity-rankings-heading button {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: none;
  color: #a7342c;
  font-size: 12px;
  font-weight: 700;
}
.activity-rankings-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 165px;
  padding: 24px;
  border: 1px dashed #decab8;
  border-radius: 17px;
  background: #fffdf8;
  text-align: center;
  color: #8f4733;
}
.activity-rankings-empty strong {
  margin-top: 10px;
  font-size: 15px;
}
.activity-rankings-empty p {
  max-width: 250px;
  margin: 8px 0 0;
  color: #7b8179;
  font-size: 12px;
  line-height: 1.6;
}
.activity-rankings-prizes {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid #eae7db;
  border-radius: 17px;
  background: #fffdf8;
}
.activity-rankings-prizes h2 {
  margin: 0;
  padding: 15px;
  border-bottom: 1px solid #eee7d9;
  font-size: 16px;
}
.activity-rankings-prizes > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 0 15px;
  border-bottom: 1px solid #efeee6;
  font-size: 13px;
}
.activity-rankings-prizes > div:last-child {
  border-bottom: 0;
}
.activity-rankings-prizes > div strong {
  color: #a7362a;
}
.activity-rankings-switch,
.activity-rankings-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 15px;
}
.activity-rankings-tiers {
  grid-template-columns: repeat(3, 1fr);
}
.activity-rankings-switch button,
.activity-rankings-tiers button {
  padding: 10px;
  border: 1px solid #e8cebc;
  border-radius: 11px;
  background: #fff9ef;
  color: #905343;
  font-size: 12px;
  font-weight: 700;
}
.activity-rankings-switch button[aria-pressed="true"],
.activity-rankings-tiers button[aria-pressed="true"] {
  border-color: #9c2a2a;
  background: #9c2a2a;
  color: #fff7e4;
}
.activity-rankings-tiers strong,
.activity-rankings-tiers small {
  display: block;
}
.activity-rankings-tiers small {
  margin-top: 3px;
  font-size: 10px;
}
.activity-rankings-tier-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 13px 15px;
  border-radius: 13px;
  background: #fff4e6;
  color: #9b3d2c;
  font-size: 12px;
}
.activity-rankings-tier-summary strong {
  font-size: 16px;
}
.activity-rankings-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #1c27229c;
}
.activity-rankings-overlay > section {
  width: min(100%, 460px);
  max-height: 78dvh;
  overflow: auto;
  padding: 22px 22px calc(27px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: #fffdf8;
  box-shadow: 0 -15px 50px #1017123d;
}
.activity-rankings-overlay header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.activity-rankings-overlay h2 {
  margin: 0;
  font-size: 20px;
}
.activity-rankings-overlay header button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #edf0ea;
  color: #40594a;
}
.activity-rankings-overlay ol {
  padding-left: 22px;
  color: #45534b;
  font-size: 13px;
  line-height: 1.8;
}
.activity-rankings-overlay li {
  margin-bottom: 10px;
}
.activity-rankings-confirm {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: #9c2a2a;
  color: #fff7e4;
  font-weight: 700;
}
@media (max-width: 360px) {
  .activity-rankings {
    padding-left: 12px;
    padding-right: 12px;
  }
  .activity-rankings-tabs button {
    font-size: 11px;
  }
  .activity-rankings-hero h1 {
    font-size: 27px;
  }
  .activity-rankings-hero > div {
    font-size: 10px;
  }
}
html[data-eye-care="true"] .activity-rankings {
  background: #eae1ce;
  color: #453c32;
}
html[data-eye-care="true"] .activity-rankings-top > button,
html[data-eye-care="true"] .activity-rankings-tabs {
  background: #dcd0b8;
  color: #54483a;
}
html[data-eye-care="true"] .activity-rankings-top > svg,
html[data-eye-care="true"] .activity-rankings-heading button {
  color: #755a3c;
}
html[data-eye-care="true"] .activity-rankings-tabs button[aria-selected="true"],
html[data-eye-care="true"] .activity-rankings-status,
html[data-eye-care="true"] .activity-rankings-empty,
html[data-eye-care="true"] .activity-rankings-prizes {
  background: #f0eadc;
  border-color: #d4c7ad;
  color: #453c32;
}
html[data-eye-care="true"] .activity-rankings-hero,
html[data-eye-care="true"] .activity-rankings-hero.festival {
  background: radial-gradient(circle at 85% 4%, #a89878, #796c56 47%, #5c5448);
  color: #f8f1e3;
}
html[data-eye-care="true"] .activity-rankings-hero:before {
  border-color: #ead8ac70;
  box-shadow:
    0 0 0 26px #f5e7bd0b,
    0 0 0 54px #f5e7bd08;
}
html[data-eye-care="true"] .activity-rankings-status > span,
html[data-eye-care="true"] .activity-rankings-tier-summary {
  background: #e7dcc5;
  color: #69583e;
}
html[data-eye-care="true"] .activity-rankings-prizes > div strong,
html[data-eye-care="true"] .activity-rankings-tier-summary strong {
  color: #69583e;
}
html[data-eye-care="true"] .activity-rankings-switch button,
html[data-eye-care="true"] .activity-rankings-tiers button {
  background: #eee5d3;
  border-color: #cdbfa5;
  color: #5c503f;
}
html[data-eye-care="true"]
  .activity-rankings-switch
  button[aria-pressed="true"],
html[data-eye-care="true"] .activity-rankings-tiers button[aria-pressed="true"],
html[data-eye-care="true"] .activity-rankings-confirm {
  background: #766a50;
  border-color: #766a50;
  color: #f8f1e3;
}
html[data-eye-care="true"] .activity-rankings-overlay > section {
  background: #f0eadc;
  color: #453c32;
}
.activity-ranking-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}
.activity-ranking-toolbar button,
.activity-ranking-board [role="alert"] button {
  border: 1px solid #d6b06e;
  border-radius: 12px;
  background: #fff7e7;
  padding: 8px 12px;
  color: #7d421e;
}
.activity-ranking-updated {
  display: block;
  color: #856b50;
}
.activity-ranking-self {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d6b06e;
  background: #fff3dc;
  border-radius: 16px;
  padding: 14px;
  margin: 12px 0;
}
.activity-ranking-list {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  border: 1px solid #ecd6b5;
  border-radius: 16px;
  background: #fffaf0;
  overflow: hidden;
}
.activity-ranking-list li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid #ecd6b5;
}
.activity-ranking-list li:last-child {
  border-bottom: 0;
}
.activity-ranking-list li > strong {
  min-width: 22px;
  color: #a34e22;
}
.activity-ranking-list small {
  display: block;
  font-size: 11px;
  color: #8a7155;
}
.activity-ranking-score {
  margin-left: auto;
  text-align: right;
}
.activity-ranking-board button:disabled {
  opacity: 0.5;
}
html[data-eye-care="true"] .activity-ranking-self,
html[data-eye-care="true"] .activity-ranking-list,
html[data-eye-care="true"] .activity-ranking-board button {
  background: #eee5d3;
  border-color: #cdbfa5;
  color: #5c503f;
}
.activity-ranking-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.activity-ranking-identity {
  min-width: 0;
}
.activity-ranking-identity b {
  display: block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-ranking-score {
  flex-shrink: 0;
}
:root {
  --floating-safe-top: env(safe-area-inset-top, 0px);
  --floating-safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family:
    Trebuchet MS,
    Microsoft YaHei,
    system-ui,
    sans-serif;
  color: #17243d;
  background: #dfe9ff;
  font-synthesis: none;
  letter-spacing: 0;
  --sage: #8b9d83;
  --moss: #606c38;
  --clay: #b08b6e;
  --terracotta: #c66b3d;
  --ochre: #c08e3a;
  --sand: #e8dcc7;
  --oat: #d4b895;
  --ink: #263329;
  --danger: #9f4335;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--sage);
}
button,
input {
  font: inherit;
  letter-spacing: 0;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.app-shell {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--sand);
  position: relative;
  overflow: clip;
  box-shadow: 0 0 50px #14244240;
}
.app-shell[data-eye-care="true"] {
  --sand: #f1eadb;
  --oat: #e6d9bd;
  --sage: #71816d;
  --moss: #56634f;
  --ink: #3b4037;
  --terracotta: #a86f4d;
  filter: saturate(0.88);
}
.app-shell[data-eye-care="true"] .page,
.app-shell[data-eye-care="true"] .bottom-nav {
  background-color: #f1eadb;
}
.app-shell[data-eye-care="true"] .card,
.app-shell[data-eye-care="true"] .dialog,
.app-shell[data-eye-care="true"] .state-panel {
  background-color: #f8f1e4;
}
.preference-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(23, 36, 61, 0.1);
  background: var(--sand);
  color: var(--ink);
}
.preference-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.preference-row small {
  color: #17243d94;
  font-size: 11px;
}
.preference-row select {
  min-width: 100px;
  padding: 8px 10px;
  border: 1px solid rgba(23, 36, 61, 0.16);
  border-radius: 9px;
  background: var(--sand);
  color: var(--ink);
}
.preference-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--moss);
}
.app-content {
  min-height: 100dvh;
}
.page {
  min-height: 100dvh;
  padding: max(26px, env(safe-area-inset-top)) 18px 108px;
  background: var(--sand);
  overflow-x: clip;
}
.page:before {
  content: "";
  position: fixed;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #dfe9ff47;
  top: 90px;
  right: calc(50% - 260px);
  pointer-events: none;
}
.page-header {
  min-height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.page-header h1 {
  margin: 2px 0 0;
  font-size: 27px;
  line-height: 1.1;
}
.eyebrow {
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 800;
}
.icon-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--oat);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.primary-button,
.secondary-button {
  border: 0;
  min-height: 46px;
  border-radius: 16px;
  padding: 11px 16px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.primary-button {
  width: 100%;
  color: var(--sand);
  background: var(--moss);
  box-shadow: 0 7px #142442;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.primary-button:not(:disabled):active {
  transform: translateY(5px);
  box-shadow: 0 2px #142442;
}
.secondary-button {
  background: var(--oat);
  color: var(--ink);
}
.secondary-button.compact {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12px;
}
.secondary-button.compact svg {
  width: 17px;
}
.text-button {
  border: 0;
  background: transparent;
  color: var(--terracotta);
  font-weight: 800;
  padding: 14px;
  width: 100%;
}
.field {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  position: relative;
}
.field > span {
  font-size: 12px;
  font-weight: 800;
}
.field input {
  width: 100%;
  min-height: 48px;
  border: 2px solid rgba(0, 47, 167, 0.28);
  border-radius: 15px;
  background: var(--sand);
  padding: 11px 13px;
  color: var(--ink);
  outline: none;
}
.field input:focus {
  border-color: var(--moss);
  box-shadow: 0 0 0 4px #14244221;
}
.password-field input {
  padding-right: 52px;
}
.field-icon {
  position: absolute;
  right: 5px;
  bottom: 3px;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--moss);
  display: grid;
  place-items: center;
}
.inline-error {
  color: var(--danger);
  background: #c66b3d24;
  border-left: 4px solid var(--terracotta);
  border-radius: 12px;
  padding: 11px 12px;
  margin: 12px 0;
  font-size: 13px;
}
.inline-success {
  background: #606c3829;
  border-left: 4px solid var(--moss);
  border-radius: 12px;
  padding: 11px 12px;
  margin: 12px 0;
  color: var(--moss);
  font-size: 13px;
  font-weight: 800;
}
.notice {
  background: var(--oat);
  border-radius: 16px;
  padding: 13px 14px;
  margin: 10px 0 18px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
}
.notice svg {
  flex: 0 0 auto;
  color: var(--terracotta);
}
.state-panel {
  padding: 34px 18px;
  text-align: center;
  color: #17243dad;
}
.maintenance-page {
  display: grid;
  place-items: center;
  padding-bottom: max(26px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--sage) 0 38%, var(--sand) 38%);
}
.maintenance-page .state-panel {
  width: 100%;
  max-width: 360px;
  padding: 34px 24px;
  border-radius: 24px;
  background: #eef3fff0;
  box-shadow: 0 10px #1424422e;
}
.maintenance-page h1 {
  margin: 8px 0 12px;
  color: var(--moss);
  font-size: 27px;
}
.maintenance-page p {
  margin: 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.auth-page {
  min-height: 100dvh;
  width: min(100%, 430px);
  margin: auto;
  background: var(--sand);
  display: grid;
  grid-template-rows: minmax(260px, 38vh) 1fr;
  overflow: hidden;
}
.sky-scene {
  position: relative;
  background: var(--sage);
  overflow: hidden;
}
.sun {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--ochre);
  top: 45px;
  right: 54px;
  animation: breathe 4s ease-in-out infinite;
}
.cloud {
  position: absolute;
  width: 100px;
  height: 30px;
  border-radius: 30px;
  background: var(--sand);
  opacity: 0.72;
}
.cloud:before,
.cloud:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.cloud:before {
  width: 42px;
  height: 42px;
  left: 18px;
  bottom: 0;
}
.cloud:after {
  width: 54px;
  height: 54px;
  right: 8px;
  bottom: 0;
}
.cloud-a {
  top: 58px;
  left: -28px;
  animation: drift 9s ease-in-out infinite alternate;
}
.cloud-b {
  top: 128px;
  right: -38px;
  transform: scale(0.68);
  animation: drift 11s ease-in-out infinite alternate-reverse;
}
.floating-island,
.mini-island {
  position: absolute;
  width: 180px;
  height: 72px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: inset 0 12px var(--oat);
}
.floating-island {
  left: 50%;
  bottom: 30px;
  transform: translate(-50%);
  animation: islandFloat 3.4s ease-in-out infinite;
}
.floating-island:after,
.mini-island:after {
  content: "";
  position: absolute;
  left: 35px;
  right: 35px;
  top: 50px;
  height: 80px;
  background: var(--clay);
  clip-path: polygon(0 0, 100% 0, 55% 100%);
}
.island-tree {
  position: absolute;
  width: 14px;
  height: 55px;
  left: 83px;
  bottom: 52px;
  background: var(--clay);
  border-radius: 8px;
}
.island-tree:before {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 48% 52% 55% 45%;
  background: var(--moss);
  left: -25px;
  top: -36px;
}
.auth-panel {
  position: relative;
  z-index: 2;
  margin-top: -22px;
  border-radius: 28px 28px 0 0;
  background: var(--sand);
  padding: 26px 24px 34px;
}
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: var(--ochre);
  color: var(--sand);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 6px 0 var(--clay);
}
.auth-panel h1 {
  font-size: 32px;
  margin: 16px 0 4px;
}
.auth-panel > p {
  margin: 0 0 18px;
  color: #17243dad;
  font-size: 13px;
}
.auth-register {
  padding-bottom: 30px;
}
.form-card {
  background: var(--oat);
  padding: 16px;
  border-radius: 24px;
}
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  background: #dfe9ff47;
  border-radius: 16px;
  margin-bottom: 14px;
}
.segmented button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #17243db3;
  font-weight: 800;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}
.segmented button.active {
  background: var(--sand);
  color: var(--moss);
  box-shadow: 0 3px 10px #1424421a;
}
.verification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.verification-row .field {
  margin: 0;
}
.verification-row .secondary-button {
  margin-bottom: 0;
  min-width: 122px;
}
.island-banner {
  min-height: 154px;
  border-radius: 24px;
  background: var(--moss);
  color: var(--sand);
  position: relative;
  overflow: hidden;
  padding: 24px 140px 22px 20px;
  margin-bottom: 16px;
}
.island-banner h2 {
  margin: 8px 0 6px;
  font-size: 20px;
}
.island-banner p {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.8;
}
.mini-island {
  width: 120px;
  height: 48px;
  right: 3px;
  bottom: 39px;
  background: var(--sage);
  transform: rotate(-5deg);
  animation: miniFloat 3s ease-in-out infinite;
}
.mini-island:after {
  top: 34px;
  left: 22px;
  right: 22px;
  height: 55px;
}
.gift-center-page {
  background: linear-gradient(180deg, var(--sand) 0%, #eef3ff 100%);
}
.gift-center-page:before {
  background: #002fa72e;
}
.gift-center-header {
  margin-bottom: 14px;
}
.gift-mine-button {
  position: relative;
  z-index: 1;
  box-shadow: 0 4px #14244280;
}
.gift-hero {
  min-height: 168px;
  margin-bottom: 18px;
  padding: 24px 142px 24px 21px;
  box-shadow: 0 8px #14244224;
}
.gift-hero:after {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  border: 14px solid rgba(219, 226, 238, 0.48);
  border-radius: 50%;
  right: -47px;
  top: -51px;
}
.gift-hero-copy {
  position: relative;
  z-index: 1;
}
.gift-hero-copy > svg {
  width: 21px;
  color: #64748b;
  animation: giftTwinkle 2.4s ease-in-out infinite;
}
.gift-hero h2 {
  font-size: 21px;
  line-height: 1.2;
}
.gift-list {
  display: grid;
  gap: 15px;
}
.gift-card {
  min-height: 244px;
  border: 1px solid rgba(219, 226, 238, 0.62);
  border-radius: 23px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px #14244221;
  animation: giftRise 0.45s ease both;
}
.gift-card:after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 68px;
  height: 260px;
  top: -82px;
  left: -42px;
  background: #ffffff38;
  transform: rotate(20deg);
  animation: giftShine 5.4s ease-in-out infinite;
}
.gift-card > * {
  position: relative;
  z-index: 1;
}
.gift-card-0 {
  background: var(--oat);
}
.gift-card-1 {
  background: var(--sage);
}
.gift-card-2 {
  background: var(--moss);
  color: var(--sand);
}
.gift-card:nth-child(2) {
  animation-delay: 0.08s;
}
.gift-card:nth-child(3) {
  animation-delay: 0.16s;
}
.gift-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.gift-card-copy {
  min-width: 0;
}
.gift-card h2 {
  margin: 7px 0 4px;
  font-size: 22px;
  line-height: 1.2;
}
.gift-card-copy > p {
  margin: 0;
  color: #17243dad;
  font-size: 12px;
  line-height: 1.5;
}
.gift-card-2 .gift-card-copy > p {
  color: #ffffffbd;
}
.gift-ribbon {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 900;
}
.gift-card-2 .gift-ribbon {
  color: #64748b;
}
.gift-ribbon svg {
  width: 15px;
}
.gift-rate {
  width: 82px;
  min-height: 82px;
  flex: 0 0 82px;
  padding: 11px 5px 8px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border-radius: 20px;
  color: var(--moss);
  text-align: center;
  background: #eef3ffb8;
  box-shadow: inset 0 0 0 1px #14244229;
}
.gift-rate strong {
  font-size: 21px;
  line-height: 1;
  white-space: nowrap;
}
.gift-rate span {
  font-size: 10px;
  font-weight: 800;
}
.gift-amount {
  min-height: 57px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 17px 0 9px;
  color: var(--moss);
}
.gift-card-2 .gift-amount {
  color: var(--sand);
}
.gift-amount small {
  align-self: center;
  min-width: 44px;
  color: #17243d99;
  font-size: 11px;
  font-weight: 800;
}
.gift-card-2 .gift-amount small {
  color: #ffffffb8;
}
.gift-amount strong {
  font-size: 30px;
  line-height: 1;
}
.gift-amount em {
  color: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.gift-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
}
.gift-facts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 12px;
  padding: 6px 8px;
  background: #eef3ff80;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}
.gift-card-2 .gift-facts span {
  background: #eef3ff29;
  color: var(--sand);
}
.gift-facts svg {
  width: 14px;
  height: 14px;
}
.gift-card .amount-field {
  margin: 12px 0;
  background: #eef3ff6b;
  padding: 10px;
  border-radius: 16px;
}
.gift-card .amount-field em {
  font-style: normal;
  font-size: 11px;
  color: #17243da6;
}
.gift-purchase-button {
  min-height: 48px;
}
.gift-card-2 .gift-purchase-button {
  color: var(--ink);
  background: var(--ochre);
  box-shadow: 0 7px #142442;
}
.gift-card-2 .gift-purchase-button:not(:disabled):active {
  box-shadow: 0 2px #142442;
}
.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.balance-card {
  min-width: 0;
  min-height: 150px;
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.balance-card.a {
  background: var(--moss);
  color: var(--sand);
}
.balance-card.b {
  background: var(--ochre);
  color: var(--ink);
}
.balance-card span {
  font-size: 12px;
  margin-top: auto;
}
.balance-card strong {
  font-size: clamp(22px, 8vw, 32px);
  overflow-wrap: anywhere;
}
.ledger-page {
  padding-top: 10px;
}
.ledger-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  text-align: center;
  margin-bottom: 12px;
}
.ledger-header h1 {
  margin: 0;
  align-self: center;
  font-size: 22px;
}
.ledger-back,
.ledger-refresh {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--moss);
  background: #eef3ff70;
}
.ledger-back svg,
.ledger-refresh svg {
  width: 20px;
}
.ledger-refresh {
  color: var(--terracotta);
}
.ledger-filter {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -18px 14px;
  padding: 0 18px 10px;
  border-bottom: 1px solid rgba(0, 47, 167, 0.16);
}
.ledger-filter::-webkit-scrollbar {
  display: none;
}
.ledger-filter button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 0 0 8px;
  background: transparent;
  color: #17243d9e;
  font-size: 14px;
  font-weight: 800;
}
.ledger-filter button.active {
  color: var(--moss);
  border-color: var(--terracotta);
}
.ledger-list {
  display: grid;
  gap: 14px;
}
.ledger-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  background: #eef3ffdb;
  box-shadow: 0 8px 18px #14244214;
}
.ledger-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
}
.ledger-icon.income {
  background: #8b9d8347;
  color: var(--moss);
}
.ledger-icon.expense {
  background: #c66b3d33;
  color: var(--terracotta);
}
.ledger-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.ledger-copy strong {
  font-size: 16px;
}
.ledger-copy span,
.ledger-copy time {
  overflow-wrap: anywhere;
  color: #17243d9e;
  font-size: 12px;
  line-height: 1.35;
}
.ledger-copy time {
  margin-top: 5px;
  color: #17243d80;
}
.ledger-amount {
  align-self: start;
  padding-top: 2px;
  font-size: 19px;
  white-space: nowrap;
}
.ledger-amount.income {
  color: #278856;
}
.ledger-amount.expense {
  color: var(--terracotta);
}
.profile-page {
  background: var(--sand);
}
.profile-hero {
  min-height: 124px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 42px;
  gap: 14px;
  align-items: center;
  padding: 18px 0 16px;
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 26px;
  background: var(--sage);
  color: var(--sand);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 7px 0 var(--moss);
}
.profile-avatar svg {
  width: 44px;
  height: 44px;
}
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-person {
  min-width: 0;
  display: grid;
  gap: 4px;
  justify-items: start;
}
.profile-person strong {
  font-size: 21px;
  overflow-wrap: anywhere;
}
.uid-copy {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 900;
}
.profile-person small {
  color: #17243da6;
  font-size: 11px;
}
.profile-edit {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 15px;
  background: var(--oat);
  color: var(--moss);
}
.profile-balance {
  background: var(--moss);
  color: var(--sand);
  min-height: 150px;
  border-radius: 26px;
  padding: 21px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.profile-balance:after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border: 22px solid rgba(198, 107, 61, 0.55);
  border-radius: 50%;
  right: -75px;
  top: -74px;
}
.profile-balance > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
}
.profile-balance span {
  font-size: 12px;
}
.profile-balance strong {
  font-size: 34px;
}
.balance-actions {
  grid-auto-flow: column;
  justify-content: end;
  align-items: center;
  margin-top: auto;
}
.profile-balance button {
  border: 0;
  color: var(--sand);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  padding: 5px 0 5px 12px;
}
.profile-balance button svg {
  width: 16px;
}
.profile-mini-balances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 18px;
}
.profile-mini-balances article {
  min-height: 102px;
  padding: 14px;
  border-radius: 21px;
  background: var(--oat);
  display: grid;
  gap: 5px;
}
.profile-mini-balances article:nth-child(2) {
  background: var(--sage);
  color: var(--sand);
}
.profile-mini-balances svg {
  color: var(--terracotta);
}
.profile-mini-balances span {
  font-size: 12px;
}
.profile-mini-balances strong {
  font-size: 20px;
  overflow-wrap: anywhere;
}
.mini-balance-actions {
  display: flex;
  gap: 8px;
}
.mini-balance-actions button {
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
  background: #eef3ff38;
  color: var(--sand);
  font-size: 11px;
  font-weight: 800;
}
.profile-menu {
  border-radius: 22px;
  overflow: hidden;
  background: #eef3ff73;
}
.profile-menu-row {
  width: 100%;
  min-height: 57px;
  border: 0;
  padding: 0 15px;
  background: transparent;
  color: var(--ink);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 47, 167, 0.16);
}
.profile-menu-row:last-child {
  border-bottom: 0;
}
.profile-menu-row > svg:first-child {
  color: var(--terracotta);
}
.profile-menu-row span {
  font-size: 14px;
  font-weight: 800;
}
.profile-menu-row > svg:last-child {
  color: #17243d73;
  width: 18px;
}
.profile-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--danger);
  margin-top: 12px;
}
.profile-logout svg {
  width: 18px;
}
.team-page {
  background: var(--sand);
}
.team-hero {
  min-height: 160px;
  border-radius: 26px;
  padding: 20px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 13px;
  color: var(--sand);
  background: var(--moss);
  overflow: hidden;
  position: relative;
}
.team-hero:after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border: 18px solid rgba(198, 107, 61, 0.42);
  border-radius: 50%;
  right: -92px;
  bottom: -108px;
}
.team-crest {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: var(--ochre);
  color: var(--sand);
  box-shadow: 0 6px 0 var(--clay);
}
.team-crest svg {
  width: 29px;
}
.team-hero > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.team-hero span {
  display: block;
  font-size: 11px;
  opacity: 0.78;
}
.team-hero > div:nth-child(2) strong {
  display: block;
  margin: 3px 0;
  font-size: 25px;
}
.team-hero small {
  font-size: 12px;
  color: var(--oat);
}
.team-direct-count {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.team-direct-count svg {
  width: 20px;
  color: var(--ochre);
}
.team-direct-count strong {
  font-size: 23px;
}
.team-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 22px;
}
.team-metrics article {
  min-height: 96px;
  border-radius: 18px;
  padding: 12px;
  display: grid;
  align-content: space-between;
  background: var(--oat);
}
.team-metrics article:nth-child(2) {
  background: var(--sage);
  color: var(--sand);
}
.team-metrics article:nth-child(3) {
  background: var(--ochre);
}
.team-metrics span {
  font-size: 11px;
  line-height: 1.35;
}
.team-metrics strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}
.team-directs {
  display: grid;
  gap: 12px;
}
.team-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.team-section-title h2 {
  margin: 3px 0 0;
  font-size: 20px;
}
.team-section-title > strong {
  color: var(--terracotta);
  font-size: 12px;
  white-space: nowrap;
}
.team-direct-list {
  display: grid;
  gap: 10px;
}
.team-direct-card {
  min-height: 76px;
  padding: 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: #eef3ffdb;
  border-radius: 18px;
}
.team-direct-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--sand);
  background: var(--sage);
  border-radius: 15px;
}
.team-direct-avatar svg {
  width: 22px;
}
.team-direct-card > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.team-direct-card > div:nth-child(2) strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}
.team-direct-card > div:nth-child(2) span {
  color: #17243d94;
  font-size: 11px;
}
.team-direct-activity {
  display: grid;
  justify-items: end;
  gap: 5px;
}
.team-direct-activity > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #17243d94;
  font-size: 10px;
  white-space: nowrap;
}
.team-direct-activity span svg {
  width: 13px;
  color: var(--moss);
}
.team-direct-activity strong {
  color: var(--moss);
  font-size: 15px;
  white-space: nowrap;
}
.settings-list {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}
.settings-list > div {
  background: #eef3ff75;
  border-radius: 15px;
  padding: 12px;
  font-size: 13px;
  font-weight: 800;
}
.settings-list small {
  display: block;
  margin-top: 5px;
  font-weight: 400;
  color: #17243da6;
}
.payment-method-list article {
  min-height: 74px;
  padding: 10px 12px;
  background: #eef3ff75;
  border-radius: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.payment-method-list strong,
.payment-method-list span {
  display: block;
}
.payment-method-list span {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 400;
}
.payment-view-button {
  min-width: 58px;
  min-height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 10px;
  background: var(--moss);
  color: var(--sand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
}
.payment-view-button svg {
  width: 15px;
}
.payment-method-detail {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(0, 47, 167, 0.18);
  padding-top: 10px;
  display: grid;
  gap: 6px;
}
.payment-method-detail p {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}
.payment-method-detail img {
  width: min(180px, 100%);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  background: var(--sand);
}
.payment-qr-missing {
  color: #17243da6;
}
.payment-qr-preview {
  width: 124px;
  height: 124px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--sand);
  display: block;
  margin: 0 auto 14px;
}
.readonly-uid {
  background: #dfe9ff38;
  border-radius: 15px;
  padding: 12px;
  font-weight: 900;
  color: var(--moss);
}
.readonly-uid small {
  display: block;
  margin-top: 4px;
  color: #17243da6;
  font-size: 11px;
  font-weight: 400;
}
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 15px 0;
}
.avatar-picker button {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 17px;
  color: var(--sand);
  display: grid;
  place-items: center;
  background: var(--oat);
}
.avatar-picker button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-picker button.selected {
  border-color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.payment-type {
  grid-template-columns: repeat(3, 1fr);
}
.payment-type button {
  min-width: 0;
  font-size: 11px;
}
.payment-type svg {
  width: 15px;
}
.point-action-page {
  background: var(--sand);
}
.point-action-hero {
  min-height: 132px;
  background: var(--sage);
  color: var(--sand);
  border-radius: 24px;
  padding: 18px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  margin-bottom: 14px;
}
.point-action-hero p {
  margin: 0;
  line-height: 1.6;
  font-size: 13px;
}
.point-action-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--ochre);
  color: var(--sand);
  box-shadow: 0 6px 0 var(--clay);
}
.invitation-page {
  background: var(--sage);
}
.invitation-page .page-header {
  color: var(--sand);
}
.invite-card {
  position: relative;
  background: var(--sand);
  border-radius: 28px;
  padding: 24px 12px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  overflow: hidden;
}
.invite-qr {
  max-width: 100%;
  border-radius: 20px;
  padding: 8px;
  background: var(--oat);
}
.invite-qr svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.invite-card > span {
  color: #17243da6;
  font-size: 12px;
}
.invite-card > strong {
  color: var(--moss);
  font-size: 30px;
  letter-spacing: 3px;
}
.invite-card > p {
  margin: 4px 10px 0;
  color: #17243da6;
  font-size: 12px;
  line-height: 1.6;
}
.invite-island {
  margin: 32px auto;
  width: 86px;
  height: 52px;
  border-radius: 50%;
  background: var(--moss);
  color: var(--sand);
  display: grid;
  place-items: center;
  box-shadow: inset 0 10px var(--oat);
  animation: islandFloat 3.4s ease-in-out infinite;
}
.order-list {
  display: grid;
  gap: 12px;
}
.order-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 13px;
  padding: 15px;
  background: var(--oat);
  border-radius: 22px;
}
.order-gift {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: var(--ochre);
  color: var(--sand);
  display: grid;
  place-items: center;
}
.order-gift svg {
  width: 28px;
  height: 28px;
}
.order-main {
  min-width: 0;
}
.order-title {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  align-items: flex-start;
}
.order-title h2 {
  font-size: 17px;
  margin: 3px 0;
  overflow-wrap: anywhere;
}
.order-main > strong {
  color: var(--moss);
}
.order-main p {
  font-size: 11px;
  color: #17243da8;
}
.status {
  white-space: nowrap;
  padding: 5px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
  background: var(--sand);
}
.status.active {
  color: var(--moss);
}
.status.cancelling {
  color: var(--terracotta);
}
.checkin-page {
  background: var(--sage);
}
.checkin-orb {
  height: 290px;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  color: var(--sand);
}
.orb-ring {
  position: absolute;
  width: 220px;
  height: 220px;
  border: 2px solid rgba(219, 226, 238, 0.5);
  border-radius: 50%;
  animation: spin 9s linear infinite;
}
.orb-ring:before,
.orb-ring:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ochre);
  top: 22px;
  left: 24px;
}
.orb-ring:after {
  inset: auto 18px 26px auto;
  background: var(--terracotta);
}
.orb-core {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--ochre);
  display: grid;
  place-items: center;
  box-shadow: 0 15px 0 var(--clay);
  animation: breathe 2.5s ease-in-out infinite;
}
.orb-core svg {
  width: 50px;
  height: 50px;
}
.checkin-orb span {
  font-size: 18px;
  font-weight: 900;
}
.checkin-card {
  background: var(--sand);
  padding: 22px;
  border-radius: 26px;
}
.checkin-card h2 {
  margin: 0 0 6px;
}
.checkin-card > p {
  margin: 0 0 18px;
  color: #17243da8;
  font-size: 12px;
}
.award-row {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid rgba(0, 47, 167, 0.18);
  font-size: 13px;
}
.award-row strong {
  color: var(--moss);
}
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  bottom: 0;
  width: min(100%, 430px);
  height: calc(78px + env(safe-area-inset-bottom));
  padding: 8px 7px env(safe-area-inset-bottom);
  background: #eef3fff5;
  border-top: 1px solid rgba(0, 47, 167, 0.2);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 20;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.bottom-nav button {
  border: 0;
  background: transparent;
  color: #17243d94;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
}
.bottom-nav button.active {
  color: var(--moss);
}
.bottom-nav .check-tab span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ochre);
  color: var(--sand);
  display: grid;
  place-items: center;
  margin-top: -26px;
  box-shadow: 0 6px 0 var(--clay);
}
.logout-button {
  position: fixed;
  z-index: 15;
  top: max(27px, env(safe-area-inset-top));
  left: calc(50% + min(165px, 42vw));
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #17243d73;
  display: grid;
  place-items: center;
}
.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  transform: translate(-50%);
  bottom: 96px;
  max-width: calc(100% - 40px);
  background: var(--ink);
  color: var(--sand);
  border-radius: 14px;
  padding: 11px 16px;
  font-size: 13px;
  box-shadow: 0 12px 30px #14244240;
}
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #002fa77a;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.dialog {
  width: min(100%, 400px);
  background: var(--sand);
  border-radius: 26px;
  padding: 24px;
  position: relative;
  animation: slideUp 0.25s ease-out;
}
.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
}
.dialog-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--ochre);
  color: var(--sand);
  display: grid;
  place-items: center;
}
.dialog h2 {
  margin: 16px 0 6px;
}
.dialog > p {
  color: #17243da8;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
.equipment-forge-page {
  background: var(--sand);
}
.equipment-forge-page .page-header {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
}
.equipment-forge-page .page-header p {
  margin: 0;
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 800;
}
.equipment-forge-page .page-header h1 {
  margin: 3px 0 0;
}
.back-button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 15px;
  color: var(--moss);
  background: var(--oat);
  display: grid;
  place-items: center;
}
.forge-balance {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--moss);
  font-size: 12px;
  font-weight: 900;
}
.forge-balance svg {
  width: 17px;
  color: var(--ochre);
}
.forge-core {
  position: relative;
  min-height: 212px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
  color: var(--sand);
  background: var(--moss);
  box-shadow: inset 0 -30px #14244217;
}
.forge-orbit {
  position: absolute;
  width: 176px;
  height: 80px;
  border: 1px solid rgba(219, 226, 238, 0.48);
  border-radius: 50%;
  animation: forgeOrbit 5s linear infinite;
}
.orbit-two {
  width: 140px;
  height: 140px;
  animation-duration: 7s;
  animation-direction: reverse;
}
.forge-core-mark {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  color: var(--sand);
  background: var(--terracotta);
  border: 7px solid var(--ochre);
  border-radius: 29px;
  box-shadow: 0 0 0 13px #14244247;
  animation: coreBreathe 2.6s ease-in-out infinite;
}
.forge-core-mark svg {
  width: 34px;
  height: 34px;
}
.forge-copy {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 17px;
  display: grid;
  gap: 3px;
}
.forge-copy span {
  color: #ffffffb3;
  font-size: 11px;
  font-weight: 800;
}
.forge-copy strong {
  font-size: 21px;
}
.forge-copy small {
  font-size: 12px;
}
.forge-panel,
.forge-inventory {
  margin-top: 14px;
  background: #eef3ff61;
  border-radius: 24px;
  padding: 16px;
}
.forge-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  color: var(--moss);
}
.forge-section-head span {
  font-size: 15px;
  font-weight: 900;
}
.forge-section-head strong {
  color: var(--terracotta);
  font-size: 13px;
}
.forge-template-list,
.forge-owned-list {
  display: grid;
  gap: 9px;
}
.forge-template {
  min-height: 64px;
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 2px solid transparent;
  border-radius: 17px;
  padding: 10px;
  background: #eef3ffc7;
  color: var(--ink);
  text-align: left;
}
.forge-template.active {
  border-color: var(--terracotta);
  background: var(--sand);
}
.forge-template > svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 12px;
  color: var(--sand);
  background: var(--sage);
}
.forge-template span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.forge-template small,
.forge-owned small {
  color: #17243da1;
  font-size: 11px;
}
.forge-template b {
  color: var(--terracotta);
  font-size: 13px;
}
.forge-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 2px 12px;
  color: #17243da8;
  font-size: 12px;
}
.forge-breakdown strong {
  grid-column: 1/-1;
  color: var(--moss);
  font-size: 13px;
}
.forge-submit {
  width: 100%;
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.forge-submit svg {
  width: 18px;
}
.forge-empty {
  min-height: 106px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #17243d85;
  font-size: 12px;
}
.forge-empty svg {
  color: var(--sage);
}
.forge-owned {
  min-height: 78px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: #eef3ffd1;
}
.equipment-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--sand);
  background: var(--sage);
  border-radius: 15px;
}
.equipment-badge.rare {
  background: var(--ochre);
}
.equipment-badge.epic {
  background: var(--terracotta);
}
.equipment-badge.legendary {
  background: var(--moss);
}
.forge-owned div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.forge-owned em {
  color: var(--terracotta);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}
.forge-owned button {
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--sand);
  background: var(--terracotta);
  font-size: 12px;
  font-weight: 900;
}
.forge-notice {
  position: fixed;
  z-index: 55;
  bottom: 96px;
  left: 50%;
  transform: translate(-50%);
  max-width: calc(100% - 40px);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--moss);
  color: var(--sand);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 12px 30px #14244240;
}
@keyframes forgeOrbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes coreBreathe {
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 18px #14244233;
  }
}
@keyframes breathe {
  50% {
    transform: scale(1.05);
  }
}
@keyframes giftTwinkle {
  50% {
    transform: rotate(12deg) scale(1.14);
    filter: drop-shadow(0 0 6px #eef3ff);
  }
}
@keyframes giftRise {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes giftShine {
  0%,
  58% {
    left: -42px;
  }
  80%,
  to {
    left: 124%;
  }
}
.forge-owned button:disabled {
  color: #17243d6b;
  background: #002fa72e;
}
@keyframes drift {
  to {
    transform: translate(40px);
  }
}
@keyframes islandFloat {
  0%,
  to {
    transform: translate(-50%) rotate(-1deg);
  }
  50% {
    transform: translate(-50%, -10px) rotate(1deg);
  }
}
@keyframes miniFloat {
  0%,
  to {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-8px) rotate(-2deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
@media (min-width: 700px) {
  body {
    padding: 24px;
  }
  .app-shell,
  .auth-page {
    min-height: 844px;
    border-radius: 34px;
  }
  .page {
    min-height: 844px;
  }
  .bottom-nav {
    bottom: 24px;
    border-radius: 0 0 34px 34px;
  }
  .logout-button {
    top: 55px;
  }
  .toast {
    bottom: 120px;
  }
}
@media (max-width: 355px) {
  .page {
    padding-left: 14px;
    padding-right: 14px;
  }
  .verification-row {
    grid-template-columns: 1fr;
  }
  .verification-row .secondary-button {
    width: 100%;
  }
  .balance-card {
    min-height: 132px;
    padding: 13px;
  }
  .bottom-nav button {
    font-size: 9px;
  }
}
.team-recommender {
  min-height: 78px;
  margin: 12px 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef3ff85;
  border-radius: 20px;
}
.team-recommender-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--sage);
  color: var(--sand);
}
.team-recommender-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-recommender-avatar svg {
  width: 28px;
}
.team-recommender div:last-child {
  display: grid;
  gap: 3px;
}
.team-recommender span {
  color: #17243d9e;
  font-size: 11px;
}
.team-recommender strong {
  font-size: 16px;
}
.team-recommender small {
  color: var(--terracotta);
  font-size: 11px;
}
.invite-qr {
  width: min(300px, calc(100vw - 56px));
  aspect-ratio: 1;
  box-sizing: border-box;
}
.invite-qr svg {
  width: 100%;
  height: 100%;
}
.invite-card > strong {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: 5px;
}
.bottom-nav .transfer-tab span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ochre);
  color: var(--sand);
  display: grid;
  place-items: center;
  margin-top: -26px;
  box-shadow: 0 6px 0 var(--clay);
}
.security-settings-page {
  background: var(--sand);
}
.security-settings-list {
  overflow: hidden;
  border-radius: 22px;
  background: #eef3ff73;
}
.security-settings-list .profile-menu-row > svg:first-child {
  color: var(--terracotta);
}
.service-home-page {
  min-height: calc(100dvh - 78px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
  background: var(--sage);
  color: var(--sand);
  overflow: hidden;
}
.broadcast-hall-page {
  background: var(--moss);
}
.service-home-orbit {
  width: 154px;
  height: 154px;
  position: relative;
  display: grid;
  place-items: center;
  border: 2px solid rgba(219, 226, 238, 0.48);
  border-radius: 50%;
  animation: breathe 2.8s ease-in-out infinite;
}
.service-home-orbit:before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: 0 10px 0 var(--clay);
}
.service-home-orbit svg {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
}
.service-home-orbit span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--terracotta);
  top: 12px;
  right: 22px;
  animation: miniFloat 2.4s ease-in-out infinite;
}
.service-home-copy {
  width: min(284px, 100%);
  display: grid;
  gap: 8px;
}
.service-home-copy .eyebrow {
  color: #ffffffb8;
}
.service-home-copy h1 {
  margin: 0;
  font-size: 29px;
}
.service-home-copy p {
  margin: 0;
  color: #ffffffc7;
  font-size: 13px;
  line-height: 1.7;
}
.equipment-transfer-page {
  background: var(--sand);
}
.equipment-transfer-list {
  display: grid;
  gap: 10px;
}
.equipment-transfer-list article {
  min-height: 72px;
  padding: 12px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  background: var(--oat);
  border-radius: 18px;
}
.equipment-transfer-list article > svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  box-sizing: border-box;
  color: var(--sand);
  background: var(--sage);
  border-radius: 15px;
}
.equipment-transfer-list article div {
  display: grid;
  gap: 4px;
}
.equipment-transfer-list span {
  color: #17243da3;
  font-size: 12px;
}
.broadcast-page,
.mall-page {
  background: var(--sand);
}
.broadcast-header-mark,
.mall-header-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--sand);
  background: var(--moss);
}
.mall-header-mark {
  background: var(--terracotta);
}
.broadcast-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 -18px 16px;
  padding: 10px 0;
  background: var(--moss);
  color: var(--sand);
  white-space: nowrap;
}
.broadcast-marquee-track {
  width: max-content;
  display: flex;
  gap: 42px;
  animation: broadcastMarquee 19s linear infinite;
}
.broadcast-marquee span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.broadcast-marquee b {
  color: var(--ochre);
}
.broadcast-marquee em {
  font-style: normal;
}
.broadcast-feed {
  display: grid;
  gap: 10px;
}
.broadcast-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  padding: 13px;
  border-radius: 19px;
  background: #eef3ff75;
}
.broadcast-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  color: var(--sand);
  background: var(--sage);
}
.broadcast-avatar img,
.mall-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.broadcast-card > div:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.broadcast-card small {
  color: #17243d9c;
  font-size: 11px;
}
.broadcast-card p {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}
.mall-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.mall-product-grid > .state-panel,
.mall-product-grid > .inline-error {
  grid-column: 1/-1;
}
.mall-product-card {
  min-height: 210px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  border-radius: 19px;
  background: #eef3ff75;
}
.mall-product-image {
  height: 122px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  color: #17243d6b;
  background: #eef3ffb8;
}
.mall-product-card strong {
  font-size: 14px;
  line-height: 1.35;
}
.mall-product-card span {
  color: var(--terracotta);
  font-size: 13px;
  font-weight: 900;
}
.mall-product-card small {
  color: #17243d9c;
  font-size: 11px;
}
@keyframes broadcastMarquee {
  to {
    transform: translate(-50%);
  }
}
.mall-orders-button {
  min-height: 36px;
  border: 0;
  border-radius: 13px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sand);
  background: var(--terracotta);
  font-size: 11px;
  font-weight: 900;
}
.mall-orders-button svg {
  width: 16px;
}
.mall-product-card {
  grid-template-rows: 122px auto auto auto 1fr;
}
.mall-redeem-button {
  align-self: end;
  width: 100%;
  margin-top: 3px;
  color: var(--sand);
  background: var(--moss);
}
.mall-redeem-button:disabled {
  opacity: 0.45;
}
.mall-exchange-dialog {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.mall-address-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 10px;
}
.mall-address {
  min-height: 70px;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  background: var(--oat);
  text-align: left;
}
.mall-address.selected {
  border-color: var(--moss);
  background: #dfe9ff3d;
}
.mall-address > svg {
  width: 18px;
  color: var(--terracotta);
}
.mall-address > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.mall-address strong {
  font-size: 12px;
}
.mall-address small {
  overflow-wrap: anywhere;
  color: #17243da3;
  font-size: 11px;
  line-height: 1.35;
}
.mall-address em {
  border-radius: 8px;
  padding: 4px 5px;
  color: var(--moss);
  background: #eef3ffc2;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.mall-no-address {
  min-height: 120px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #17243da3;
}
.mall-no-address svg {
  width: 32px;
  height: 32px;
  color: var(--terracotta);
}
.mall-no-address .secondary-button {
  color: var(--sand);
  background: var(--moss);
}
.broadcast-page {
  padding-bottom: 144px;
}
.broadcast-publish-button {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: calc(89px + env(safe-area-inset-bottom));
  transform: translate(-50%);
  width: min(calc(100% - 36px), 394px);
  min-height: 48px;
  border: 0;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--sand);
  background: var(--terracotta);
  box-shadow: 0 7px 0 var(--clay);
  font-size: 14px;
  font-weight: 900;
}
.broadcast-publish-button:active {
  transform: translate(-50%) translateY(4px);
  box-shadow: 0 3px 0 var(--clay);
}
.broadcast-editor textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  border: 2px solid rgba(0, 47, 167, 0.28);
  border-radius: 15px;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--sand);
  font: inherit;
  line-height: 1.5;
  outline: none;
}
.broadcast-editor textarea:focus {
  border-color: var(--moss);
  box-shadow: 0 0 0 4px #14244221;
}
.mall-orders-page {
  background: var(--sand);
}
.mall-orders-page .page-header {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
}
.mall-order-list {
  display: grid;
  gap: 11px;
}
.mall-order-card {
  min-height: 106px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  background: #eef3ff75;
}
.mall-order-image {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  color: var(--sand);
  background: var(--sage);
}
.mall-order-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mall-order-image svg {
  width: 29px;
}
.mall-order-card > div:last-child {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}
.mall-order-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.mall-order-card header strong {
  font-size: 14px;
  line-height: 1.35;
}
.mall-order-card header span {
  flex: 0 0 auto;
  border-radius: 9px;
  padding: 4px 6px;
  color: var(--moss);
  background: var(--sand);
  font-size: 10px;
  font-weight: 900;
}
.mall-order-card b {
  color: var(--terracotta);
  font-size: 12px;
}
.mall-order-card small {
  color: #17243d8f;
  font-size: 10px;
}
.mall-order-card p {
  margin: 1px 0 0;
  display: flex;
  gap: 4px;
  align-items: flex-start;
  color: #17243dad;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.mall-order-card p svg {
  width: 13px;
  flex: 0 0 auto;
  color: var(--terracotta);
}
.mall-order-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 6px;
  align-items: center;
  color: #17243d94;
  font-size: 10px;
  line-height: 1.35;
}
.mall-order-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mall-order-meta span b {
  color: var(--moss);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.mall-order-meta button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(0, 47, 167, 0.15);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--moss);
  background: #eef3ffc7;
}
.mall-order-meta button:active {
  transform: translateY(1px);
  background: var(--sand);
}
.mall-order-meta button svg {
  width: 13px;
  height: 13px;
}
.mall-order-meta time {
  grid-column: 1 / -1;
  color: #17243d85;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.transfer-center-page {
  background: var(--sand);
}
.transfer-center-hero {
  min-height: 138px;
  margin-bottom: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--sand);
  background: var(--moss);
  border-radius: 26px;
}
.transfer-center-orbit {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--ochre);
  border-radius: 22px;
  box-shadow: 0 7px 0 var(--clay);
  animation: breathe 2.6s ease-in-out infinite;
}
.transfer-center-orbit svg {
  width: 30px;
  height: 30px;
}
.transfer-center-hero h2 {
  margin: 0 0 6px;
  font-size: 22px;
}
.transfer-center-hero p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #ffffffc7;
}
.transfer-actions {
  display: grid;
  gap: 11px;
}
.transfer-action-card {
  width: 100%;
  min-height: 88px;
  border: 0;
  border-radius: 21px;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 22px;
  gap: 13px;
  align-items: center;
  text-align: left;
  background: var(--oat);
  color: var(--ink);
}
.transfer-action-card:nth-child(2) {
  background: var(--sage);
  color: var(--sand);
}
.transfer-action-card:nth-child(3) {
  background: var(--ochre);
}
.transfer-action-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #eef3ff8c;
  color: var(--terracotta);
}
.transfer-action-icon svg {
  width: 25px;
  height: 25px;
}
.transfer-action-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.transfer-action-copy strong {
  font-size: 16px;
}
.transfer-action-copy small {
  font-size: 11px;
  opacity: 0.68;
}
.transfer-action-arrow {
  width: 18px;
  opacity: 0.55;
}
.invitation-neon-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #130d2a;
  color: #f5f1ff;
}
.invitation-neon-page:before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 95, 190, 0.32),
      transparent 25%
    ),
    radial-gradient(
      circle at 15% 68%,
      rgba(66, 216, 255, 0.2),
      transparent 26%
    ),
    linear-gradient(160deg, #130d2a, #1d1545 56%, #09071a);
}
.invitation-neon-page:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(255, 255, 255, 0.11) 3px 4px
  );
}
.invite-neon-header {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  min-height: 64px;
  padding: 16px 0 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
}
.invite-back-button,
.checkin-back-button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(245, 241, 255, 0.34);
  border-radius: 13px;
  color: inherit;
  background: #ffffff14;
  display: grid;
  place-items: center;
}
.invite-back-button svg,
.checkin-back-button svg {
  width: 20px;
}
.invite-neon-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.invite-neon-stars i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #eef3ff;
  box-shadow: 0 0 12px 3px #142442;
  animation: inviteTwinkle 2.8s ease-in-out infinite;
}
.invite-neon-stars i:nth-child(1) {
  top: 96px;
  left: 12%;
}
.invite-neon-stars i:nth-child(2) {
  top: 190px;
  right: 12%;
  animation-delay: -0.7s;
}
.invite-neon-stars i:nth-child(3) {
  top: 410px;
  left: 8%;
  animation-delay: -1.4s;
}
.invite-neon-stars i:nth-child(4) {
  top: 530px;
  right: 18%;
  animation-delay: -2.1s;
}
.invite-loading {
  background: #f5f1ff1f;
  color: #f5f1ff;
}
.invite-neon-poster {
  position: relative;
  min-height: 620px;
  margin-top: 8px;
  padding: 34px 16px 26px;
  overflow: hidden;
  border: 1px solid rgba(213, 186, 255, 0.25);
  border-radius: 27px;
  background: linear-gradient(165deg, #22194beb, #0c081fe6);
  box-shadow:
    0 22px 48px #00000052,
    inset 0 1px #ffffff1f;
}
.invite-neon-horizon {
  position: absolute;
  inset: auto -10% -68px;
  height: 224px;
  border: 1px solid rgba(81, 226, 255, 0.48);
  border-radius: 50% 50% 0 0;
  transform: perspective(210px) rotateX(66deg);
  box-shadow:
    0 -9px 35px #51e2ff2e,
    inset 0 16px 28px #ff4ab21f;
}
.invite-neon-horizon i {
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(255, 112, 196, 0.38);
  border-radius: inherit;
}
.invite-neon-horizon i:nth-child(2) {
  inset: 54px;
  border-color: #51e2ff66;
}
.invite-neon-horizon i:nth-child(3) {
  inset: 81px;
  border-color: #dbe2ee59;
}
.invite-neon-copy {
  position: relative;
  display: grid;
  gap: 10px;
  text-align: center;
}
.invite-neon-copy > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}
.invite-neon-copy > span svg {
  width: 15px;
}
.invite-neon-copy h1 {
  max-width: 280px;
  margin: 0 auto;
  font-size: 31px;
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 0 20px rgba(255, 120, 202, 0.48);
}
.invite-neon-copy p {
  max-width: 270px;
  margin: 0 auto;
  color: #f5f1ffb8;
  font-size: 12px;
  line-height: 1.65;
}
.invite-neon-code-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 15px;
  margin: 27px 0 0;
  padding: 14px;
  border: 1px solid rgba(219, 226, 238, 0.4);
  border-radius: 22px;
  background: #ffffff14;
  box-shadow: 0 14px 36px #0000003d;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.invite-qr {
  width: min(300px, calc(100vw - 88px));
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 17px;
  background: #f5f1ff;
  box-shadow:
    0 0 0 5px #ffffff14,
    0 0 27px #51e2ff47;
}
.invite-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.invite-code-copy {
  display: grid;
  justify-items: center;
  gap: 5px;
}
.invite-code-copy > span {
  color: #f5f1ffa8;
  font-size: 11px;
  letter-spacing: 2px;
}
.invite-code-copy strong {
  color: #fff;
  font-size: 33px;
  line-height: 1;
  letter-spacing: 5px;
}
.invite-code-copy small {
  color: #f5f1ffb8;
  font-size: 11px;
}
.invite-copy-button {
  min-height: 35px;
  margin-top: 4px;
  padding: 0 12px;
  border: 1px solid rgba(245, 241, 255, 0.24);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f5f1ff;
  background: #ffffff1a;
  font-size: 12px;
  font-weight: 800;
}
.invite-copy-button svg {
  width: 15px;
}
.invite-scan-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  color: #f5f1ffbf;
  font-size: 12px;
}
.invite-scan-hint svg {
  width: 17px;
  color: #65dcff;
}
.checkin-island-page {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #dfe9ff 0 305px, #eef3ff 305px);
}
.checkin-sky {
  position: absolute;
  inset: 0 0 auto;
  height: 310px;
  overflow: hidden;
  pointer-events: none;
}
.checkin-sun {
  position: absolute;
  top: 38px;
  right: 38px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: 0 0 0 12px #1424421f;
  animation: breathe 3.4s ease-in-out infinite;
}
.checkin-cloud {
  position: absolute;
  top: 72px;
  left: 30px;
  width: 82px;
  height: 28px;
  border-radius: 20px;
  background: #eef3ff;
  animation: drift 9s ease-in-out infinite;
}
.checkin-cloud:before,
.checkin-cloud:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.checkin-cloud:before {
  top: -14px;
  left: 14px;
  width: 34px;
  height: 34px;
}
.checkin-cloud:after {
  top: -23px;
  right: 8px;
  width: 44px;
  height: 44px;
}
.checkin-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #eef3ff;
  box-shadow: 0 0 9px 3px #142442;
  animation: inviteTwinkle 3s ease-in-out infinite;
}
.spark-one {
  top: 178px;
  left: 14%;
}
.spark-two {
  top: 155px;
  right: 20%;
  animation-delay: -1s;
}
.checkin-island-header {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  padding: 22px 0 8px;
  color: #fff;
  text-align: center;
}
.checkin-island-header h1 {
  margin: 0;
  font-size: 18px;
}
.checkin-member-card {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 20px;
  border-radius: 22px;
  background: #eef3fff5;
  box-shadow: 0 9px #1424422e;
  animation: checkinRise 0.55s ease both;
}
.checkin-member-avatar {
  position: relative;
  width: 66px;
  height: 66px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  color: var(--moss);
  background: var(--oat);
}
.checkin-member-avatar:after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px dashed rgba(0, 47, 167, 0.72);
  border-radius: 50%;
  animation: spin 12s linear infinite;
}
.checkin-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.checkin-member-card > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.checkin-member-card strong {
  overflow-wrap: anywhere;
  font-size: 18px;
}
.checkin-member-card span {
  color: #17243da6;
  font-size: 12px;
}
.checkin-member-card > svg {
  color: var(--moss);
}
.checkin-island-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 24px 20px;
  overflow: hidden;
  border-radius: 23px;
  color: var(--sand);
  background: var(--moss);
  box-shadow: 0 9px #142442;
  text-align: center;
  animation: checkinRise 0.55s 0.08s ease both;
}
.checkin-island-card:before {
  content: "";
  position: absolute;
  top: -78px;
  left: -15%;
  width: 130%;
  height: 112px;
  border-radius: 50%;
  background: #ffffff0f;
}
.checkin-glow {
  position: relative;
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: #dfe9ff;
  box-shadow:
    0 7px #142442,
    0 0 0 10px #14244226;
  animation: breathe 2.8s ease-in-out infinite;
}
.checkin-glow svg {
  width: 30px;
  height: 30px;
}
.checkin-kicker {
  position: relative;
  color: #ffffffbf;
  font-size: 12px;
}
.checkin-island-card h2 {
  position: relative;
  margin: 0;
  font-size: 22px;
}
.checkin-island-card > p {
  position: relative;
  max-width: 270px;
  margin: 0 0 8px;
  color: #ffffffc7;
  font-size: 12px;
  line-height: 1.65;
}
.checkin-award-row {
  position: relative;
  width: 100%;
  color: var(--sand);
  border-color: #dbe2ee33;
}
.checkin-award-row strong {
  color: #64748b;
}
.checkin-claim-button {
  position: relative;
  width: min(178px, 100%);
  min-height: 57px;
  border: 0;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  background: #dfe9ff;
  box-shadow: 0 7px #142442;
  font-size: 16px;
  font-weight: 900;
}
.checkin-claim-button svg {
  width: 18px;
}
.checkin-claim-button:disabled {
  transform: translateY(3px);
  color: #17243da8;
  background: #eef3ff;
  box-shadow: 0 4px #142442;
}
.checkin-island-card .inline-error {
  position: relative;
  width: 100%;
}
@keyframes inviteTwinkle {
  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}
@keyframes checkinRise {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.broadcast-card time {
  color: #17243d8f;
  font-size: 10px;
  line-height: 1.35;
}
.gift-center-page {
  position: relative;
  padding-top: 22px;
  background: linear-gradient(180deg, #dfe9ff 0 306px, #fff 306px);
}
.gift-center-page:before {
  display: none;
}
.gift-sky-scene {
  position: absolute;
  inset: 0 0 auto;
  height: 306px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.gift-sun {
  position: absolute;
  top: 38px;
  right: 38px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #002fa7;
  box-shadow: 0 0 0 12px #14244214;
  animation: breathe 3.4s ease-in-out infinite;
}
.gift-cloud {
  position: absolute;
  top: 64px;
  left: 30px;
  width: 82px;
  height: 28px;
  border-radius: 20px;
  background: #eef3ff;
  animation: drift 9s ease-in-out infinite;
}
.gift-cloud:before,
.gift-cloud:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.gift-cloud:before {
  width: 34px;
  height: 34px;
  left: 14px;
  top: -14px;
}
.gift-cloud:after {
  width: 44px;
  height: 44px;
  right: 8px;
  top: -23px;
}
.gift-sparkles {
  position: absolute;
  inset: 0;
}
.gift-sparkles i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #eef3ff;
  box-shadow: 0 0 9px 3px #142442;
  animation: inviteTwinkle 3s ease-in-out infinite;
}
.gift-sparkles i:nth-child(1) {
  top: 180px;
  left: 14%;
}
.gift-sparkles i:nth-child(2) {
  top: 155px;
  right: 20%;
  animation-delay: -1s;
}
.gift-sparkles i:nth-child(3) {
  top: 110px;
  left: 50%;
  animation-delay: -2s;
}
.gift-center-header {
  position: relative;
  z-index: 1;
  min-height: 42px;
  margin-bottom: 24px;
  color: #fff;
}
.gift-center-header .eyebrow {
  color: #ffffffc2;
}
.gift-center-header h1 {
  font-size: 21px;
}
.gift-mine-button {
  color: #17243d;
  background: #ffffffeb;
  box-shadow: 0 5px #14244233;
}
.gift-hero {
  position: relative;
  z-index: 1;
  min-height: 158px;
  margin: 0 0 16px;
  padding: 24px 138px 21px 20px;
  border-radius: 23px;
  background: #002fa7;
  box-shadow: 0 9px #142442;
}
.gift-hero:after {
  top: -70px;
  left: -15%;
  right: auto;
  width: 130%;
  height: 110px;
  border: 0;
  border-radius: 50%;
  background: #ffffff0f;
}
.gift-hero-copy > svg {
  color: #64748b;
}
.gift-hero h2 {
  margin: 9px 0 6px;
  font-size: 23px;
}
.gift-hero p {
  color: #ffffffc7;
  font-size: 12px;
  line-height: 1.6;
}
.gift-hero .mini-island {
  right: 11px;
  bottom: 44px;
  width: 108px;
  height: 43px;
  background: #dfe9ff;
  box-shadow: inset 0 8px #142442;
}
.gift-list {
  position: relative;
  z-index: 1;
  gap: 14px;
  padding-bottom: 18px;
}
.gift-card {
  min-height: 164px;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 18px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 7px #14244224;
  animation: checkinRise 0.52s ease both;
}
.gift-card-0,
.gift-card-1,
.gift-card-2 {
  color: var(--ink);
  background: #fff;
}
.gift-card-1,
.gift-card-2 {
  background: #eef3ff;
}
.gift-card:after {
  background: #ffffff47;
}
.gift-card h2 {
  margin: 8px 0 0;
  font-size: 21px;
}
.gift-ribbon,
.gift-card-2 .gift-ribbon {
  color: #ce6539;
}
.gift-rate {
  width: 78px;
  min-height: 78px;
  border-radius: 20px;
  color: #17243d;
  background: #eef3ff;
  box-shadow: inset 0 0 0 1px #14244224;
}
.gift-rate strong {
  font-size: 20px;
}
.gift-rate span {
  color: #17243db8;
}
.gift-purchase-button {
  min-height: 48px;
  margin-top: 13px;
  color: #fff;
  background: #002fa7;
  box-shadow: 0 6px #142442;
}
.gift-card-2 .gift-purchase-button {
  color: #fff;
  background: #002fa7;
  box-shadow: 0 6px #142442;
}
.gift-card .gift-purchase-button:not(:disabled):active,
.gift-card-2 .gift-purchase-button:not(:disabled):active {
  box-shadow: 0 2px #142442;
}
.gift-selection-dialog {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding-bottom: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .gift-sun,
  .gift-cloud,
  .gift-sparkles i,
  .gift-hero .mini-island,
  .gift-card {
    animation: none !important;
  }
}
.equipment-market-header-actions {
  display: flex;
  gap: 6px;
}
.equipment-orders-page {
  background: var(--sand);
}
.equipment-order-tabs {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  margin: 0 -18px 14px;
  padding: 0 18px 10px;
  border-bottom: 1px solid rgba(0, 47, 167, 0.16);
  scrollbar-width: none;
}
.equipment-order-tabs::-webkit-scrollbar {
  display: none;
}
.equipment-order-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #17243d9e;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
}
.equipment-order-tabs button.active {
  color: var(--moss);
  border-color: var(--terracotta);
}
.equipment-order-list {
  display: grid;
  gap: 12px;
}
.equipment-order-card {
  padding: 15px;
  border-radius: 20px;
  background: var(--oat);
  box-shadow: 0 5px #14244221;
}
.equipment-order-card > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.equipment-order-card header div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.equipment-order-card header small {
  color: #17243da3;
  font-size: 11px;
}
.equipment-order-status {
  flex: 0 0 auto;
  align-self: start;
  padding: 5px 8px;
  border-radius: 9px;
  color: var(--sand);
  background: var(--sage);
  font-size: 11px;
  font-weight: 800;
}
.equipment-order-status.payment_expired,
.equipment-order-status.cancelled,
.equipment-order-status.seller_restored,
.equipment-order-status.expired {
  background: var(--terracotta);
}
.equipment-order-status.appealed {
  background: var(--ochre);
  color: var(--ink);
}
.equipment-order-countdown,
.equipment-order-note,
.equipment-order-details > p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  color: #17243dc2;
  font-size: 12px;
}
.equipment-order-countdown {
  color: var(--terracotta);
  font-weight: 900;
}
.equipment-order-countdown svg,
.equipment-order-note svg,
.equipment-order-details > p svg {
  width: 15px;
}
.equipment-order-details {
  display: grid;
  gap: 9px;
  margin-top: 2px;
}
.equipment-order-payment {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: #eef3ffad;
}
.equipment-order-payment > svg {
  color: var(--terracotta);
}
.equipment-order-payment div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.equipment-order-payment span,
.equipment-order-payment small {
  overflow-wrap: anywhere;
  color: #17243da8;
  font-size: 11px;
}
.equipment-order-payment img,
.equipment-order-proof {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 10px;
}
.equipment-order-proof {
  width: 100%;
  height: auto;
  max-height: 190px;
  object-fit: contain;
  background: var(--sand);
}
.equipment-order-card footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.equipment-order-card .secondary-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.equipment-order-card .secondary-button {
  position: relative;
}
.equipment-order-card .text-button {
  border: 0;
  background: transparent;
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 900;
}
.equipment-order-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0;
  color: var(--moss);
  font-size: 12px;
  font-weight: 800;
}
.equipment-order-pagination button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  color: var(--sand);
  background: var(--sage);
  display: grid;
  place-items: center;
}
.equipment-order-pagination button:disabled {
  opacity: 0.35;
}
.equipment-order-dialog > svg {
  width: 34px;
  height: 34px;
  color: var(--terracotta);
}
.equipment-order-dialog textarea {
  min-height: 96px;
  resize: vertical;
}
.equipment-order-payment {
  width: 100%;
  border: 2px solid transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.equipment-order-payment:not(:disabled) {
  cursor: pointer;
}
.equipment-order-payment.selected {
  border-color: var(--terracotta);
  background: var(--sand);
}
.equipment-order-payment:disabled {
  cursor: default;
}
.game-shell .game-header {
  padding-right: 50px;
}
.app-shell:has(.chicken-page) .bottom-nav {
  display: none;
}
.profile-refresh .profile-assets {
  padding: 16px;
  border-radius: 20px;
}
.profile-refresh .assets-heading {
  margin-bottom: 10px;
}
.profile-refresh .assets-primary {
  padding: 12px 0;
  min-height: 0;
}
.profile-refresh .assets-primary strong {
  font-size: 30px;
  line-height: 1.2;
}
.profile-refresh .assets-secondary {
  padding-top: 12px;
  gap: 14px;
}
.profile-refresh .assets-secondary article {
  padding: 8px 0;
  min-height: 0;
}
.profile-refresh .assets-secondary strong {
  font-size: 20px;
}
.profile-refresh .assets-actions {
  margin-top: 8px;
}
.equipment-product-image {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
}
.forge-core-mark .equipment-product-image {
  width: 90px;
  height: 90px;
}
.sensitive-action-eligibility-page {
  min-height: 100%;
  padding-bottom: calc(34px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #f7f1e5 0, #eef2e4);
}
.sensitive-action-eligibility-page .page-header {
  margin-bottom: 26px;
}
.sensitive-action-eligibility-card {
  display: grid;
  gap: 18px;
  padding: 24px 20px;
  border: 1px solid rgba(96, 108, 56, 0.2);
  border-radius: 20px;
  background: #fffdf7e0;
  box-shadow: 0 10px #5b482d1f;
  text-align: center;
}
.sensitive-action-eligibility-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 18px;
  color: var(--sand);
  background: var(--moss);
  box-shadow: 0 6px #26332933;
}
.sensitive-action-eligibility-icon svg {
  width: 30px;
  height: 30px;
}
.sensitive-action-eligibility-card h2,
.sensitive-action-eligibility-card > p {
  margin: 0;
}
.sensitive-action-eligibility-card h2 {
  font-size: 20px;
}
.sensitive-action-eligibility-card > p {
  color: #17243da3;
  font-size: 13px;
}
.sensitive-action-eligibility-options {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(96, 108, 56, 0.16);
  border-radius: 16px;
  background: var(--oat);
  text-align: left;
}
.sensitive-action-eligibility-options > div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border-radius: 12px;
  background: #ffffff8c;
}
.sensitive-action-eligibility-options > div > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--moss);
}
.sensitive-action-eligibility-options span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.sensitive-action-eligibility-options strong {
  font-size: 14px;
  line-height: 1.45;
}
.sensitive-action-eligibility-options small {
  color: #17243d9e;
  font-size: 12px;
  line-height: 1.45;
}
.sensitive-action-eligibility-options > span {
  justify-self: center;
  color: #17243d80;
  font-size: 12px;
  font-weight: 800;
}
.sensitive-action-eligibility-card .primary-button,
.sensitive-action-eligibility-card .secondary-button {
  width: 100%;
  justify-content: center;
}
.app-shell[data-eye-care="true"] .sensitive-action-eligibility-page {
  background: linear-gradient(180deg, #f3eadb 0, #e9e2cf);
}
.app-shell[data-eye-care="true"] .sensitive-action-eligibility-card {
  background: #f8f1e4;
  border-color: #d7c9ae;
}
.app-shell[data-eye-care="true"] .sensitive-action-eligibility-options {
  background: #eee3d1;
}
.app-shell[data-eye-care="true"] .sensitive-action-eligibility-options > div {
  background: #f8f1e4;
}
.face-app-update-dialog {
  display: grid;
  gap: 16px;
  text-align: center;
}
.face-app-update-dialog h2,
.face-app-update-dialog p {
  margin: 0;
}
.face-app-update-dialog h2 {
  font-size: 20px;
}
.face-app-update-dialog > p {
  color: #17243da8;
  font-size: 13px;
  line-height: 1.65;
}
.face-app-update-dialog .face-app-update-note {
  padding: 9px 12px;
  border: 1px solid rgba(96, 108, 56, 0.2);
  border-radius: 10px;
  background: var(--oat);
  color: var(--moss);
  font-weight: 700;
}
.face-app-update-dialog .face-app-download-site {
  text-decoration: none;
}
.face-app-update-dialog .dialog-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 18px;
  color: var(--sand);
  background: var(--moss);
  box-shadow: 0 6px #2633292e;
}
.face-app-update-dialog .dialog-icon svg {
  width: 29px;
  height: 29px;
}
.face-app-update-dialog .primary-button,
.face-app-update-dialog .secondary-button {
  width: 100%;
  justify-content: center;
}
.face-app-update-dialog .dialog-close {
  justify-self: end;
  margin-bottom: -8px;
}
.gift-eligibility-dialog {
  display: grid;
  gap: 16px;
  text-align: left;
}
.gift-eligibility-dialog h2,
.gift-eligibility-dialog p {
  margin: 0;
}
.gift-eligibility-dialog h2 {
  font-size: 21px;
}
.gift-eligibility-dialog > p {
  color: #17243dad;
  font-size: 13px;
}
.gift-eligibility-dialog > .secondary-button,
.gift-eligibility-dialog > .primary-button {
  width: 100%;
}
.gift-eligibility-dialog .dialog-close {
  justify-self: end;
}
.gift-eligibility-dialog .dialog-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--moss);
  background: var(--sand);
  box-shadow: 0 5px #2633291f;
}
.gift-eligibility-options {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(96, 108, 56, 0.16);
  border-radius: 16px;
  background: var(--oat);
  color: var(--ink);
}
.gift-eligibility-options div {
  position: relative;
  min-height: 46px;
  padding: 13px 12px 13px 40px;
  border-radius: 12px;
  background: #ffffff6b;
  display: flex;
  align-items: center;
}
.gift-eligibility-options div:before {
  content: "✓";
  position: absolute;
  left: 12px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--sand);
  background: var(--moss);
  font-size: 12px;
  font-weight: 900;
}
.gift-eligibility-options > span {
  justify-self: center;
  color: #17243d8c;
  font-size: 12px;
  font-weight: 800;
}
.gift-eligibility-hint {
  margin-top: -7px;
  color: #17243d8a;
  font-size: 12px;
  text-align: center;
}
.gift-term-status {
  position: relative;
  background: #fffaf0;
  border: 1px solid #d9dfc7;
  border-radius: 18px;
  padding: 16px;
  margin: 12px 0;
  color: #34442d;
  font-size: 13px;
  line-height: 1.7;
}
.gift-term-status strong {
  display: block;
  font-size: 14px;
}
.gift-term-status p {
  margin: 8px 0 0;
}
.app-shell[data-eye-care="true"] .gift-center-page,
.app-shell[data-eye-care="true"] .gift-card,
.app-shell[data-eye-care="true"] .gift-rate,
.app-shell[data-eye-care="true"] .gift-mine-button {
  background-color: #f3eadb;
}
.app-shell[data-eye-care="true"] .gift-card-1,
.app-shell[data-eye-care="true"] .gift-card-2 {
  background-color: #eee3d1;
}
.app-shell[data-eye-care="true"] .gift-card:after {
  background: #ffffff1a;
}
.app-shell[data-eye-care="true"] .profile-refresh .profile-identity-card {
  background: linear-gradient(115deg, #74765c, #5f684f);
  color: #f7efdf;
  box-shadow: 0 7px #5b482d2e;
}
.app-shell[data-eye-care="true"]
  .profile-refresh
  .profile-identity-card
  .profile-edit {
  background: #f7efdf24;
  border-color: #f7efdf4d;
  color: #f7efdf;
}
.app-shell[data-eye-care="true"]
  .profile-refresh
  .profile-identity-card
  .profile-avatar {
  background: #f7efdf24;
  border-color: #f7efdf80;
}
.ledger-summary-dialog {
  position: fixed;
  inset: 5vh 5vw;
  z-index: 1100;
  overflow: auto;
  background: var(--surface, #fff);
  color: var(--text, #222);
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 0 100vmax #0008;
}
.equipment-order-payment-row {
  grid-template-columns: minmax(0, 1fr) 54px;
}
.equipment-order-payment-select {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.equipment-order-payment-select:disabled {
  cursor: default;
}
.equipment-order-payment-select > svg {
  color: var(--terracotta);
}
.equipment-order-qr-preview {
  border: 0;
  background: transparent;
  padding: 0;
  line-height: 0;
  cursor: zoom-in;
}
.equipment-order-qr-preview img {
  display: block;
  object-fit: contain;
}
.equipment-custom-pricing {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border-radius: 15px;
  background: var(--oat);
  color: var(--moss);
}
.equipment-custom-pricing p {
  margin: 0;
  line-height: 1.5;
}
.equipment-custom-pricing label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.equipment-custom-pricing input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--moss);
}
.equipment-custom-pricing input[inputmode="decimal"] {
  min-width: 0;
  flex: 1;
}
.equipment-order-payable {
  display: grid;
  gap: 5px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid rgba(184, 67, 42, 0.25);
  border-radius: 14px;
  background: #fff2e9;
  color: var(--ink);
}
.equipment-order-payable > span {
  font-size: 13px;
  font-weight: 800;
}
.equipment-order-payable > strong {
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 900;
  line-height: 1.15;
  color: #b43320;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.equipment-order-payable > small {
  font-size: 12px;
  color: #7d3428;
}
.equipment-payment-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(23, 36, 61, 0.09);
  font-size: 14px;
}
.equipment-payment-step > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--moss);
  background: #eaf0ff;
  font-size: 12px;
}
.equipment-payment-open,
.equipment-payment-upload > .primary-button {
  width: 100%;
  margin-top: 10px;
}
.equipment-payment-hint {
  margin: 8px 0;
  color: #17243d99;
  font-size: 11px;
  line-height: 1.7;
}
.equipment-payment-upload .image-upload-select {
  width: 100%;
  justify-content: center;
  min-height: 46px;
  background: #f1f4ff;
  border: 1px dashed #9baddb;
  color: var(--moss);
  border-radius: 12px;
}
.equipment-selected-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #eef3ffad;
  font-size: 11px;
}
.equipment-selected-proof img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 7px;
}
.equipment-selected-proof button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--moss);
}
:root {
  font-family:
    Helvetica Neue,
    Arial,
    PingFang SC,
    Microsoft YaHei,
    sans-serif;
  color: #17243d;
  background: #f7f7f8;
  --brand: #002fa7;
  --surface: #ffffff;
  --canvas: #f7f7f8;
  --line: #dbe2ee;
  --muted: #64748b;
  --tint: #eef3ff;
  --sage: #5376be;
  --moss: #002fa7;
  --clay: #c5d5f5;
  --terracotta: #002fa7;
  --ochre: #dfe9ff;
  --sand: #ffffff;
  --oat: #eef3ff;
  --ink: #17243d;
  --danger: #b42336;
  accent-color: var(--brand);
}
body {
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
  font-family: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  touch-action: manipulation;
}
.app-shell {
  background: var(--canvas);
  box-shadow: 0 18px 70px #17243d12;
}
.page {
  background: var(--canvas);
}
.page:before {
  display: none;
}
.page-header h1 {
  font-size: 25px;
  letter-spacing: -0.8px;
  line-height: 1.25;
}
.eyebrow {
  color: var(--brand);
}
.page-header {
  margin-bottom: 22px;
}
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #7597ed;
  outline-offset: 3px;
}
:where(input, textarea, select):not([type="checkbox"]):not(
    [type="radio"]
  ):focus {
  border-color: var(--brand);
}
.primary-button,
.gift-card .gift-purchase-button,
.gift-card-2 .gift-purchase-button {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  box-shadow: none;
  border-radius: 14px;
  min-height: 48px;
}
.primary-button:not(:disabled):active,
.gift-card .gift-purchase-button:not(:disabled):active,
.gift-card-2 .gift-purchase-button:not(:disabled):active {
  transform: scale(0.98);
  box-shadow: none;
}
.secondary-button {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 14px;
}
.icon-button,
.back-button,
.ledger-back,
.ledger-refresh {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--brand);
  border-radius: 13px;
}
.form-card,
.order-card,
.ledger-card,
.equipment-market-card,
.payment-method-list article,
.settings-list > div,
.chat-card,
.myg-card,
.myg-records,
.partners-metrics,
.partners-member {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 18px #17243d03;
}
.dialog,
.dialog-card,
.gift-selection-dialog,
.equipment-request-dialog,
.mall-notice-dialog,
.profile-logout-dialog,
.chat-modal {
  background: #fff !important;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.dialog-backdrop,
.modal-backdrop,
.chat-overlay {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.chat-zoom {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.toast {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 28px #17243d20;
}
.bottom-nav {
  background: #ffffffed;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px #17243d05;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.bottom-nav button {
  position: relative;
  color: #7c879a;
  font-size: 11px;
  font-weight: 500;
  gap: 5px;
}
.bottom-nav button > svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.7;
}
.bottom-nav button.active {
  color: var(--brand);
  font-weight: 700;
}
.bottom-nav button.active:after {
  content: "";
  position: absolute;
  top: 0;
  width: 16px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
}
.bottom-nav .transfer-tab span,
.bottom-nav .check-tab span {
  width: 43px;
  height: 40px;
  margin-top: -13px;
  border-radius: 13px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 5px 12px #002fa71a;
}
.bottom-nav .transfer-tab.active:after {
  display: none;
}
.mall-page {
  background: var(--canvas);
}
.mall-page .page-header h1 {
  font-size: 27px;
  font-weight: 750;
}
.mall-wallet {
  isolation: isolate;
  overflow: hidden;
  padding: 25px 22px;
  min-height: 160px;
  border-radius: 22px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 12px 26px #002fa719;
}
.mall-wallet:after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 210px;
  height: 210px;
  right: -95px;
  bottom: -110px;
  border: 1px solid #ffffff36;
  border-radius: 50%;
  box-shadow:
    0 0 0 27px #ffffff09,
    0 0 0 55px #ffffff05;
  pointer-events: none;
}
.mall-wallet > span {
  font-size: 13px;
  opacity: 0.85;
}
.mall-wallet > strong {
  font-size: clamp(32px, 10vw, 46px);
  letter-spacing: -1.5px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-top: 20px;
}
.mall-wallet button {
  background: #ffffff12;
  border-radius: 11px;
  padding: 9px;
}
.home-services {
  padding: 20px 0;
  margin: 2px 0 16px;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.home-services button {
  font-size: 12px;
  font-weight: 500;
  gap: 10px;
}
.home-services button > span,
.home-services button:nth-child(n) > span {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--brand);
  background: var(--tint);
  border: 1px solid #e1e9fb;
}
.home-services svg {
  stroke-width: 1.7;
}
.mall-notice-strip {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.mall-notice-strip > svg,
.mall-notice-strip small {
  color: var(--brand);
}
.mall-section-title {
  margin: 26px 0 14px;
}
.mall-section-title h2 {
  font-size: 21px;
  letter-spacing: -0.5px;
}
.mall-page .mall-product-grid {
  gap: 14px;
}
.mall-page .mall-product-card {
  padding: 0 0 12px;
  border-radius: 17px;
  border: 1px solid var(--line);
  box-shadow: none;
}
.mall-page .mall-product-image {
  border-radius: 16px 16px 0 0;
  background: #f1f4fa;
}
.mall-product-card > :not(.mall-product-image) {
  margin-left: 12px;
  margin-right: 12px;
}
.mall-page .mall-redeem-button {
  width: calc(100% - 24px);
  min-height: 38px;
  background: var(--tint);
  color: var(--brand);
  border: 1px solid #e1e9fb;
  border-radius: 10px;
  font-weight: 700;
}
.mall-notice-content {
  color: #475569;
  background: var(--canvas);
}
.mall-notice-icon {
  background: var(--tint);
  color: var(--brand);
}
.ledger-page .ledger-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 18px;
  padding: 5px;
  background: #e9eef8;
  border: 1px solid #e0e6f0;
  border-radius: 14px;
  overflow: visible;
}
.ledger-page .ledger-filter button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 5px;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #53647e;
  overflow-wrap: anywhere;
}
.ledger-page .ledger-filter button.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 8px #002fa719;
  font-weight: 650;
}
.ledger-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 20px 0 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.ledger-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 40px;
  padding: 0 7px;
  border: 1px solid #dce5f7;
  border-radius: 10px;
  background: var(--tint);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}
.ledger-pagination button svg {
  width: 15px;
  height: 15px;
}
.ledger-pagination button:disabled {
  background: #f4f5f7;
  border-color: #eceef2;
  color: #9ba4b3;
  opacity: 1;
}
.ledger-pagination > span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.ledger-pagination b {
  color: var(--brand);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  margin: 0 3px;
}
.equipment-orders-page .equipment-order-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  margin: 0 0 18px;
  padding: 5px;
  background: #e9eef8;
  border: 1px solid #e0e6f0;
  border-radius: 14px;
  overflow: visible;
}
.equipment-orders-page .equipment-order-tabs button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 2px;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #53647e;
}
.equipment-orders-page .equipment-order-tabs button.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 8px #002fa719;
  font-weight: 650;
}
.equipment-orders-page .equipment-order-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 20px 0 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.equipment-orders-page .equipment-order-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: auto;
  min-height: 40px;
  padding: 0 7px;
  border: 1px solid #dce5f7;
  border-radius: 10px;
  background: var(--tint);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}
.equipment-orders-page .equipment-order-pagination button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.equipment-orders-page .equipment-order-pagination button:disabled {
  background: #f4f5f7;
  border-color: #eceef2;
  color: #9ba4b3;
  opacity: 1;
}
.equipment-order-pagination > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.equipment-orders-page .equipment-order-card.request {
  padding: 16px;
  border: 1px solid #e0e7f5;
  border-radius: 18px;
  background: #f1f5ff;
  box-shadow: 0 3px 10px #18356c06;
}
.equipment-request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
.equipment-request-main {
  min-width: 0;
}
.equipment-request-main > strong {
  display: block;
  color: #172b4d;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.equipment-request-main > small {
  display: block;
  margin-top: 5px;
  color: #667997;
  font-size: 12px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.equipment-request-main .equipment-order-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 14px 0 0;
  color: #71809a;
  font-size: 11px;
  line-height: 1.6;
}
.equipment-request-main .equipment-order-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.equipment-request-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.equipment-request-actions .equipment-order-status {
  font-size: 11px;
  padding: 5px 8px;
  white-space: nowrap;
}
.equipment-request-actions .equipment-request-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #ccd8ed;
  border-radius: 10px;
  background: #fff;
  color: #415879;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.equipment-request-cancel:disabled {
  opacity: 0.5;
  cursor: wait;
}
.equipment-request-cancel:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
@media (max-width: 350px) {
  .equipment-orders-page .equipment-order-card.request {
    padding: 12px;
  }
  .equipment-request-layout {
    gap: 8px;
  }
  .equipment-request-actions .equipment-order-status {
    padding: 5px;
    font-size: 10px;
  }
}
.mall-logistics {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.mall-receipt-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.mall-receipt-actions small {
  line-height: 1.6;
}
.mall-notice-dialog .primary-button {
  background: var(--brand);
}
.profile-page.profile-refresh {
  background: var(--canvas);
}
.profile-refresh .profile-hero {
  padding: 8px 0 15px;
  min-height: 98px;
}
.profile-refresh .profile-avatar {
  border-radius: 20px;
  background: var(--tint);
  color: var(--brand);
  box-shadow: none;
  border: 1px solid var(--line);
}
.profile-refresh .profile-person strong {
  font-size: 23px;
  letter-spacing: -0.5px;
}
.profile-refresh .profile-person small {
  color: var(--muted);
}
.profile-identity-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}
.profile-identity-line .uid-copy {
  white-space: nowrap;
}
.profile-refresh .profile-identity-line small {
  font-size: 11px;
  white-space: nowrap;
}
.profile-identity-card {
  position: relative;
  isolation: isolate;
  padding: 42px 16px 14px;
  margin-bottom: 14px;
  border-radius: 21px;
  background: linear-gradient(115deg, #002fa7, #164fc2 62%, #3977dc);
  color: #fff;
  overflow: hidden;
}
.profile-identity-card:before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -100px;
  bottom: -155px;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  border: 1px solid #ffffff25;
  box-shadow: 0 0 0 30px #ffffff06;
  pointer-events: none;
}
.profile-refresh .profile-identity-card .profile-hero {
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 68px;
  padding: 0 0 12px;
  gap: 11px;
}
.profile-refresh .profile-identity-card .profile-hero.has-gift-purchase {
  grid-template-columns: 52px minmax(0, 1fr) 66px;
}
.profile-refresh .profile-identity-card .profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: #ffffff20;
  color: #fff;
  border: 2px solid #ffffff70;
}
.profile-refresh .profile-identity-card .profile-person strong {
  color: #fff;
  font-size: 22px;
}
.profile-refresh .profile-identity-card .uid-copy {
  color: #fff;
  font-weight: 500;
}
.profile-refresh .profile-identity-card .profile-person small {
  color: #e1eaff;
}
.profile-identity-card .profile-gift-purchase {
  align-self: center;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 7px 9px #001d6b40);
}
.profile-identity-card .profile-gift-purchase img {
  display: block;
  width: 62px;
  height: 62px;
  transition: transform 0.2s ease;
}
.profile-identity-card .profile-gift-purchase:active img {
  transform: scale(0.94);
}
.profile-identity-card .profile-identity-line {
  gap: 4px 7px;
}
.profile-refresh .profile-identity-card .profile-edit,
.profile-identity-actions button {
  position: absolute;
  top: 8px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  padding: 7px;
  border: 1px solid #ffffff30;
  border-radius: 10px;
  color: #fff;
  background: #ffffff12;
  cursor: pointer;
}
.profile-identity-actions button {
  right: 52px;
}
.profile-identity-actions svg,
.profile-refresh .profile-identity-card .profile-edit svg {
  width: 17px;
  height: 17px;
}
.profile-identity-card .profile-badges {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid #ffffff24;
  gap: 6px;
}
.profile-identity-card .profile-badges span,
.profile-identity-card .profile-badges .verified {
  color: #fff;
  background: #ffffff12;
  border-color: #ffffff26;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 7px;
}
.profile-refresh .profile-identity-card button:focus-visible {
  outline-color: #fff;
}
.profile-refresh .profile-edit {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--line);
}
.profile-badges span {
  background: #fff;
  border-color: var(--line);
  color: var(--brand);
}
.profile-page.profile-refresh .profile-assets {
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid #dfe5f0;
  padding: 10px 14px 12px;
  border-radius: 17px;
  box-shadow: 0 5px 18px #17243d05;
}
.profile-page.profile-refresh .profile-assets:before {
  display: none;
}
.profile-page.profile-refresh .assets-heading {
  min-height: 30px;
  gap: 5px;
}
.profile-page.profile-refresh .assets-heading h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  letter-spacing: 0;
}
.profile-page.profile-refresh .assets-heading h2:before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--brand);
}
.profile-page.profile-refresh .assets-heading h2,
.profile-page.profile-refresh .assets-visibility,
.profile-page.profile-refresh .assets-ledger,
.profile-page.profile-refresh .assets-primary > span,
.profile-page.profile-refresh .assets-secondary article > span {
  color: var(--muted);
  font-size: 12px;
}
.profile-page.profile-refresh .assets-heading h2 {
  color: var(--ink);
  font-size: 12px;
}
.profile-page.profile-refresh .assets-visibility {
  width: 32px;
  min-height: 30px;
}
.profile-page.profile-refresh .assets-ledger {
  min-height: 30px;
  color: var(--brand);
}
.profile-page.profile-refresh .assets-primary {
  margin: 4px 0 10px;
  padding: 8px 10px;
  gap: 3px 8px;
  border: 1px solid #e2eafb;
  border-radius: 11px;
  background: var(--canvas);
}
.profile-page.profile-refresh .assets-primary > span {
  color: #506384;
  font-weight: 500;
}
.profile-page.profile-refresh .assets-primary strong {
  color: var(--brand);
  font-size: clamp(23px, 6.5vw, 27px);
  font-weight: 650;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.profile-page.profile-refresh .assets-primary > button {
  grid-column: 2;
  grid-row: 1 / 3;
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  border-radius: 9px;
  min-height: 34px;
  padding: 0 10px;
  box-shadow: none;
}
.profile-page.profile-refresh .assets-primary > span {
  grid-column: 1;
}
.profile-page.profile-refresh .assets-secondary {
  border: 0;
  padding: 0;
  gap: 12px;
  align-items: start;
}
.profile-page.profile-refresh .assets-secondary article {
  gap: 3px;
}
.profile-page.profile-refresh .assets-secondary article + article {
  border-color: #e5eaf3;
  padding-left: 16px;
}
.profile-page.profile-refresh .assets-secondary article > span {
  font-size: 12px;
  line-height: 1.5;
}
.profile-page.profile-refresh .assets-secondary strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.profile-page.profile-refresh .assets-secondary:has(> article:only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.profile-page.profile-refresh .assets-secondary > article:only-child {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 2px 10px 1px;
}
.profile-page.profile-refresh .assets-secondary > article:only-child > span {
  flex: 0 1 auto;
  color: #53647e;
  font-size: 13px;
  line-height: 1.6;
}
.profile-page.profile-refresh .assets-secondary > article:only-child > strong {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  color: #1d1d1f;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.profile-page.profile-refresh .assets-actions {
  margin-top: 3px;
  gap: 6px;
}
.profile-page.profile-refresh .assets-actions button {
  min-height: 32px;
  min-width: 44px;
  background: #fff;
  color: var(--brand);
  border: 1px solid #d8e2f5;
  font-size: 12px;
  border-radius: 8px;
}
.profile-page.profile-refresh .assets-actions button:hover {
  background: var(--tint);
}
.profile-assets button:focus-visible {
  outline-color: var(--brand);
}
.profile-shortcuts {
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 18px 4px;
  border-radius: 18px;
}
.profile-shortcuts button {
  font-weight: 500;
}
.profile-shortcuts button:nth-child(n) > span {
  background: var(--tint);
  color: var(--brand);
  border-radius: 13px;
}
.profile-services > h2 {
  font-size: 18px;
  margin: 24px 0 12px;
}
.profile-refresh .profile-menu {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.profile-refresh .profile-menu-row {
  min-height: 59px;
  border-color: #edf0f5;
}
.profile-refresh .profile-menu-row span {
  font-size: 14px;
  font-weight: 500;
}
.profile-refresh .profile-menu-row > svg:first-child {
  color: var(--brand);
  stroke-width: 1.7;
}
.profile-logout-button {
  min-height: 52px;
  margin-top: 18px;
  border-radius: 14px;
  background: #fff;
}
.gift-center-page,
main.page.partners-page,
main.page.chat-page {
  background: var(--canvas) !important;
}
.gift-sky-scene {
  display: none;
}
.gift-center-header {
  color: var(--ink);
}
.gift-center-header .eyebrow {
  color: var(--brand);
}
.gift-mine-button {
  background: #fff;
  color: var(--brand);
  box-shadow: none;
  border: 1px solid var(--line);
}
.gift-center-page .gift-hero {
  min-height: 76px;
  padding: 18px 76px 18px 16px;
  margin-bottom: 14px;
  border-radius: 16px;
}
.gift-center-page .gift-hero-copy {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gift-center-page .gift-hero-copy > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #ffdc85;
}
.gift-center-page .gift-hero-copy p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}
.gift-center-page .gift-hero .mini-island {
  width: 54px;
  height: 22px;
  right: 13px;
  bottom: 31px;
  box-shadow: inset 0 4px #d4e2ff;
}
.gift-center-page .gift-hero .mini-island:after {
  left: 10px;
  right: 10px;
  top: 15px;
  height: 28px;
}
.gift-hero,
.equipment-market-hero,
.partners-hero,
.myg-overview {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 22px #002fa710;
  border-radius: 21px;
}
.gift-card,
.gift-card-0,
.gift-card-1,
.gift-card-2 {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 4px 18px #17243d04;
  border-radius: 19px;
}
.gift-card:after {
  display: none;
}
.gift-card h2 {
  font-size: 20px;
}
.gift-card-top {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.gift-card-copy {
  flex: 1 1 100px;
}
.gift-celebration {
  --present-front: #e84851;
  --present-side: #bd2943;
  --present-top: #ff7774;
  flex: 0 1 90px;
  min-width: 48px;
  pointer-events: none;
}
.gift-celebration-1 {
  --present-front: #dc9a34;
  --present-side: #b97625;
  --present-top: #ffd17b;
}
.gift-celebration-2 {
  --present-front: #4c78df;
  --present-side: #244db0;
  --present-top: #88acff;
}
.gift-celebration > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.gift-card-top > small {
  flex-basis: 100%;
  text-align: right;
}
@keyframes present-bob {
  0%,
  to {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-3px) rotate(2deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .gift-celebration-box {
    transform-origin: 55px 65px;
    animation: present-bob 4s ease-in-out infinite;
  }
  .gift-celebration-1 .gift-celebration-box {
    animation-delay: -0.8s;
  }
  .gift-celebration-2 .gift-celebration-box {
    animation-delay: -1.6s;
  }
}
@media (max-width: 355px) {
  .gift-celebration {
    flex-basis: 54px;
  }
  .gift-card-copy {
    flex-basis: 88px;
  }
  .gift-card h2 {
    font-size: 18px;
  }
}
.gift-rate {
  background: var(--tint);
  color: var(--brand);
  border-radius: 16px;
  box-shadow: none;
  border: 1px solid #dfe8fb;
}
.gift-rate span,
.gift-card-2 .gift-card-copy > p {
  color: var(--muted);
}
.gift-card-2 .gift-amount {
  color: var(--brand);
}
.gift-card-2 .gift-amount small {
  color: var(--muted);
}
.gift-card-2 .gift-facts span {
  background: var(--tint);
  color: var(--ink);
}
.equipment-market-hero > svg {
  background: #ffffff18;
  color: #fff;
  box-shadow: none;
}
.equipment-market-hero span {
  color: #dce7ff;
}
.equipment-market-request {
  background: #fff !important;
  border: 1px solid var(--line);
  border-radius: 16px !important;
}
.equipment-market-request-content {
  padding: 16px 0 16px 14px;
}
.equipment-market-transfer {
  min-height: 38px;
  background: var(--brand);
  color: #fff;
}
.equipment-market-header h1 {
  letter-spacing: -0.6px;
}
.partners-crown {
  color: #fff;
  background: #ffffff12;
  transform: none;
  border-color: #ffffff30;
}
.partners-crown svg {
  transform: none;
}
.partners-hero-top span {
  color: #dce7ff;
}
.daily-checkin {
  background: var(--canvas);
  color: var(--ink);
}
.dc-sky {
  background: linear-gradient(180deg, #e5edff, #f7f7f8);
}
.dc-header button {
  color: var(--brand);
  background: #fff;
  border-color: var(--line);
  border-radius: 11px;
}
.dc-reward,
.dc-records,
.dc-success {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px #17243d05;
}
.dc-box {
  background: linear-gradient(110deg, #c4d6ff, #eef3ff 52%, #9fbaff);
}
.dc-lid {
  background: var(--brand);
}
.dc-ribbon {
  background: #305bc1;
}
.dc-bow {
  border-color: #305bc1;
}
.dc-claim {
  background: var(--brand);
  color: #fff;
  box-shadow: none;
}
.dc-claim:active {
  box-shadow: none;
}
.dc-total,
.dc-record-amount strong {
  color: var(--brand);
}
.chat-search,
.chat-announcement {
  background: #fff;
  border-color: var(--line);
}
.chat-bubble {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.mine .chat-bubble {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.chat-composer {
  background: #f7f7f8f5;
  border-color: var(--line);
}
.chat-composer textarea {
  background: #fff;
}
.chat-global {
  background: #fff;
  color: var(--brand);
  border-color: var(--line);
}
.chat-page .chat-primary,
.chat-send-row > button {
  background: var(--brand);
  color: #fff;
}
.chat-global {
  position: fixed;
  top: 18px;
  right: max(18px, calc((100vw - 480px) / 2 + 18px));
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  z-index: 40;
  box-shadow: 0 4px 16px #1424421a;
}
.chat-global {
  width: 44px;
  height: 44px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  border: 1px solid var(--line);
  box-shadow: 0 3px 14px #14244226;
}
.chat-global.is-dragging {
  cursor: grabbing;
  box-shadow: 0 5px 20px #14244240;
}
.chat-global:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.chat-global svg {
  pointer-events: none;
}
.chat-global b {
  background: #bb654e;
  color: #fff;
  border-radius: 20px;
  padding: 2px 6px;
  font-size: 10px;
  position: absolute;
  right: -9px;
  top: -6px;
}
.chat-toast {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translate(-50%);
  width: min(85vw, 400px);
  z-index: 80;
  background: var(--brand);
  color: #fff;
  border-radius: 15px;
  display: flex;
  box-shadow: 0 6px 25px #0003;
  padding: 8px;
}
.chat-toast button {
  background: none;
  color: inherit;
  border: 0;
  padding: 9px;
}
.chat-toast button:first-child {
  flex: 1;
  text-align: left;
}
.invitation-travel-page {
  background: var(--canvas);
  color: var(--ink);
  font-family: inherit;
}
.inv-header button {
  background: #fff;
  color: var(--brand);
  border-color: var(--line);
}
.inv-poster {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px #17243d09;
}
.inv-hero:after {
  background: linear-gradient(180deg, transparent 20%, #002266e6);
}
.inv-hero-copy > span {
  color: #e0eaff;
}
.inv-hero-copy h1 {
  background: none;
  color: #fff;
  -webkit-text-fill-color: white;
}
.invite-qr {
  background: #fff;
}
.page.invitation-travel-page,
.app-shell:has(.invitation-travel-page) {
  background: var(--canvas);
}
.app-shell:has(.invitation-travel-page) .bottom-nav {
  background: #ffffffed;
  border-top-color: var(--line);
}
.app-shell:has(.invitation-travel-page) .bottom-nav button {
  color: var(--muted);
}
.app-shell:has(.invitation-travel-page) .bottom-nav button.active {
  color: var(--brand);
}
.inv-code-card {
  background: var(--tint);
  border-color: var(--line);
}
.inv-code strong {
  color: var(--brand);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.inv-code > span,
.inv-code small,
.inv-hint,
.inv-services > p,
.inv-services small,
.inv-poster footer {
  color: var(--muted);
}
.inv-code button {
  color: var(--brand);
  background: #fff;
  border-color: #c5d5f5;
  min-height: 34px;
}
.inv-services i {
  background: var(--tint);
  color: var(--brand);
  border-radius: 11px;
}
.inv-services b {
  color: var(--ink);
}
.inv-cta {
  background: var(--brand);
  color: #fff;
  border-radius: 13px;
  box-shadow: none;
}
.inv-copy-error {
  color: var(--danger);
}
.brand-mark,
.dialog-icon,
.order-gift,
.point-action-icon {
  background: var(--tint);
  color: var(--brand);
  box-shadow: none;
}
.team-crest {
  background: #ffffff18;
  color: #fff;
  box-shadow: none;
}
.auth-page .sky-scene {
  background: var(--brand);
}
.auth-panel {
  border-radius: 25px 25px 0 0;
}
.auth-panel .brand-mark {
  background: var(--brand);
  color: #fff;
  border-radius: 13px;
}
.auth-panel h1 {
  letter-spacing: -1px;
}
.field input,
.field textarea,
.field select {
  background: #fff;
  border-color: var(--line);
  border-radius: 12px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #8590a3;
}
.balance-card.b {
  background: var(--tint);
  color: var(--brand);
}
.recharge-page,
.page.recharge-page {
  background: var(--canvas);
}
.recharge-tabs,
.myg-tabs {
  background: #e9edf4;
}
.recharge-products button[aria-pressed="true"],
.recharge-amounts button[aria-pressed="true"] {
  background: var(--tint);
}
.gift-ribbon,
.gift-card-2 .gift-ribbon {
  color: var(--brand);
}
.gift-term-status {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
@keyframes blue-appear {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes blue-card-enter {
  0% {
    opacity: 0;
    translate: 0 7px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes blue-ring-drift {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-9px, -6px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .page {
    animation: blue-appear 0.22s ease-out;
  }
  .mall-wallet,
  .profile-assets,
  .mall-product-card,
  .myg-card,
  .partners-hero {
    animation: blue-card-enter 0.38s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .mall-wallet:after {
    animation: blue-ring-drift 7s ease-in-out infinite alternate;
  }
  .mall-product-card:nth-child(2),
  .myg-card:nth-child(2) {
    animation-delay: 40ms;
  }
  .mall-product-card:nth-child(3),
  .myg-card:nth-child(3) {
    animation-delay: 80ms;
  }
  .mall-product-card:nth-child(4),
  .myg-card:nth-child(4) {
    animation-delay: 0.12s;
  }
  .page button,
  .bottom-nav button,
  .auth-page button {
    transition:
      background-color 0.18s ease,
      color 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }
  .home-services button > span,
  .profile-shortcuts button > span,
  .bottom-nav button > svg {
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .home-services button:active > span,
  .profile-shortcuts button:active > span {
    transform: scale(0.92);
  }
  .bottom-nav button.active > svg {
    transform: translateY(-2px);
  }
}
@media (hover: hover) {
  .home-services button:hover > span,
  .profile-shortcuts button:hover > span {
    transform: translateY(-3px);
  }
  .profile-menu-row:hover {
    background: #f7f9ff;
  }
  .mall-page .mall-redeem-button:hover {
    background: var(--brand);
    color: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  .app-shell *:before,
  .app-shell *:after,
  .auth-page * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 355px) {
  .profile-page.profile-refresh .profile-assets {
    padding: 10px 12px;
  }
  .profile-page.profile-refresh .assets-primary {
    padding: 8px 10px;
  }
  .profile-page.profile-refresh .assets-primary strong {
    font-size: 23px;
  }
  .profile-page.profile-refresh .assets-primary > button {
    padding: 0 9px;
  }
  .mall-page .page-header h1 {
    font-size: 24px;
  }
}
.rps-page,
.chicken-page {
  --sage: #8b9d83;
  --moss: #606c38;
  --clay: #b08b6e;
  --terracotta: #c66b3d;
  --ochre: #c08e3a;
  --sand: #e8dcc7;
  --oat: #d4b895;
  --ink: #263329;
}
body .ui-segments.ui-segments {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 18px;
  padding: 5px;
  border: 1px solid #e0e6f0;
  border-radius: 14px;
  background: #e9eef8;
  overflow-x: auto;
  scrollbar-width: thin;
  box-shadow: none;
}
body .ui-segments.ui-segments > button {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 8px 7px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #53647e;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: none;
  text-shadow: none;
}
body
  .ui-segments.ui-segments
  > button:is(
    .active,
    .selected,
    [aria-pressed="true"],
    [aria-selected="true"]
  ) {
  color: #fff;
  background: #002fa7;
  box-shadow: 0 3px 8px #002fa719;
  font-weight: 650;
}
body .ui-segments.ui-segments > button > svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
body .ui-segments-scroll.ui-segments > button {
  flex: 1 0 76px;
}
body .ui-pagination.ui-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 20px 0 6px;
  padding: 12px;
  border: 1px solid #dbe2ee;
  border-radius: 15px;
  background: #fff;
  color: #64748b;
  box-sizing: border-box;
}
body .ui-pagination.ui-pagination > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  height: auto;
  margin: 0;
  padding: 8px 6px;
  border: 1px solid #dce5f7;
  border-radius: 10px;
  color: #002fa7;
  background: #eef3ff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: none;
  text-shadow: none;
}
body .ui-pagination.ui-pagination > button:disabled {
  background: #f4f5f7;
  border-color: #eceef2;
  color: #9ba4b3;
  opacity: 1;
  cursor: not-allowed;
}
body .ui-pagination.ui-pagination > span {
  margin: 0;
  color: #64748b;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body .ui-pagination.ui-pagination > button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
body :is(.ui-pagination, .ui-segments) > button:focus-visible {
  outline: 3px solid #7597ed;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  body :is(.ui-pagination, .ui-segments) > button {
    transition:
      background-color 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
  }
}
@media (hover: hover) {
  body .ui-pagination.ui-pagination > button:not(:disabled):hover {
    background: #dfe9ff;
  }
}
@media (max-width: 355px) {
  body .ui-pagination.ui-pagination {
    gap: 8px;
    padding: 10px;
  }
  body .ui-segments.ui-segments {
    gap: 3px;
    padding: 4px;
  }
  body .equipment-order-tabs.ui-segments > button {
    padding-inline: 3px;
  }
}
html[data-eye-care="true"],
html[data-eye-care="true"] .app-shell[data-eye-care="true"] {
  --brand: #56634f;
  --canvas: #f1eadb;
  --surface: #f8f1e4;
  --line: #d4c4ae;
  --muted: #746d5e;
  --tint: #e6dac8;
  --sage: #71816d;
  --moss: #56634f;
  --clay: #b49b7b;
  --terracotta: #a86f4d;
  --ochre: #dfcda9;
  --sand: #f8f1e4;
  --oat: #e6dac8;
  --ink: #3b4037;
  --danger: #a43e35;
  --eye-hero: linear-gradient(115deg, #74765c 0%, #5f684f 100%);
  --eye-on-brand: #fff8e9;
  --eye-shadow: 0 6px 20px rgb(91 72 45 / 8%);
  --paper: #f1eadb;
  --paper-raised: #f8f1e4;
  --paper-soft: #e6dac8;
  --ink-muted: #746d5e;
  --leaf: #56634f;
  --leaf-strong: #4b5945;
  --leaf-ink: #56634f;
  --leaf-soft: #d9e0c6;
  --reward-soft: #eedeb8;
  --reward-ink: #855c29;
  --shadow: 0 18px 44px rgb(91 72 45 / 12%);
  color: var(--ink);
  background: var(--canvas);
  accent-color: var(--brand);
  color-scheme: light;
}
html[data-eye-care="true"] .app-shell[data-eye-care="true"] {
  filter: none;
}
html[data-eye-care="true"] body {
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"] :is(.app-shell, .auth-page, .auth-panel) {
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"] .app-shell {
  box-shadow: 0 18px 70px #5b482d1a;
}
html[data-eye-care="true"]
  :is(
    .page,
    .page.recharge-page,
    .profile-page.profile-refresh,
    .broadcast-page.broadcast-refresh,
    .daily-checkin,
    .pt-page,
    .sp-page,
    .subaccounts-page,
    .totp-page,
    .face-verification-page,
    .service-centers,
    .myg-page,
    .announcement-detail,
    .page.invitation-travel-page,
    .app-shell:has(.invitation-travel-page)
  ) {
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"]
  :is(
    .gift-center-page,
    main.page.partners-page,
    main.page.chat-page,
    .wechat-room
  ) {
  background: var(--canvas) !important;
}
html[data-eye-care="true"]
  :is(.explore-page, .explore-frame-shell iframe, .explore-loading) {
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"] .explore-loading p {
  color: var(--muted);
}
html[data-eye-care="true"]
  :is(
    .mall-wallet,
    .profile-identity-card,
    .gift-hero,
    .equipment-market-hero,
    .partners-hero,
    .myg-overview,
    .recharge-wallet,
    .payment-refresh .payment-intro,
    .pt-balance,
    .sp-summary,
    .sub-current,
    .center-intro,
    .team-hero,
    .profile-balance,
    .balance-card.a,
    .transfer-center-hero,
    .island-banner
  ) {
  background: var(--eye-hero);
  border-color: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"]
  :is(
    .equipment-market-hero span,
    .partners-hero-top span,
    .sp-summary > span,
    .sp-summary p,
    .sp-quota-card span,
    .profile-refresh .profile-identity-card .profile-person small,
    .gift-hero-copy > svg,
    .gift-center-page .gift-hero p
  ) {
  color: #eee5d2;
}
html[data-eye-care="true"] :is(.sp-quota-card:before, .dc-particle) {
  background: var(--ochre);
}
html[data-eye-care="true"] .profile-identity-card .profile-gift-purchase {
  filter: drop-shadow(0 7px 9px rgb(91 72 45 / 25%));
}
html[data-eye-care="true"]
  :is(
    .card,
    .form-card,
    .order-card,
    .ledger-card,
    .state-panel,
    .maintenance-page .state-panel,
    .settings-list > div,
    .security-settings-list,
    .team-direct-card,
    .team-recommender,
    .home-services,
    .mall-notice-strip,
    .mall-page .mall-product-card,
    .mall-order-card,
    .profile-refresh .profile-menu,
    .profile-shortcuts,
    .profile-checkin,
    .gift-card,
    .gift-card-0,
    .gift-card-1,
    .gift-card-2,
    .gift-term-status,
    .equipment-market-card,
    .equipment-order-card,
    .equipment-market-requests article,
    .myg-card,
    .myg-records,
    .myg-empty,
    .partners-metrics,
    .partners-member,
    .partners-recommender,
    .partners-search,
    .partners-list,
    .partners-gift-summary,
    .recharge-account,
    .recharge-sheet dl,
    .payment-method-list article,
    .payment-refresh .payment-account,
    .payment-refresh .form-card,
    .center-card,
    .center-stats div,
    .pt-history,
    .pt-recipient,
    .dialog .pt-recipient,
    .sp-card,
    .sp-search,
    .sp-history,
    .sub-row,
    .totp-card,
    .face-identity-check,
    .dc-reward,
    .dc-records,
    .dc-success,
    .checkin-member-card,
    .chat-card,
    .chat-search,
    .chat-announcement,
    .chat-member-search,
    .broadcast-refresh .broadcast-card,
    .broadcast-refresh .broadcast-editor,
    .broadcast-refresh .broadcast-fee,
    .tutorial-list > button,
    .inv-poster,
    .announcement-detail article,
    .address-card,
    .address-editor,
    .usdt-purchase-card,
    .usdt-payment-card,
    .usdt-history,
    .chat-game-preview,
    .chat-games,
    .tg-summary,
    .transfer-action-card
  ) {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--eye-shadow);
  color: var(--ink);
}
html[data-eye-care="true"]
  :is(
    .dialog,
    .dialog-card,
    .gift-selection-dialog,
    .equipment-request-dialog,
    .mall-notice-dialog,
    .profile-logout-dialog,
    .chat-modal,
    .chat-packet-dialog,
    .equipment-market-request,
    .tg-dialog
  ) {
  background: var(--surface) !important;
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] .tg-dialog {
  border-color: var(--line) !important;
}
html[data-eye-care="true"]
  :is(.recharge-sheet, .sp-sheet, .member-remove-dialog) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"]
  :is(
    .dialog-backdrop,
    .modal-backdrop,
    .chat-overlay:not(.chat-zoom),
    .recharge-overlay,
    .sp-sheet-backdrop,
    .member-remove-overlay,
    .chat-game-preview-backdrop,
    .profile-logout-dialog::backdrop
  ) {
  background: #35302785;
}
html[data-eye-care="true"] .tg-backdrop {
  background: #35302785 !important;
}
html[data-eye-care="true"]
  :is(
    .chat-header,
    .wechat-room .chat-header,
    .chat-composer,
    .wechat-room .chat-composer,
    .recharge-footer,
    .address-add-bar,
    .shelf-game-page > header
  ) {
  background: #f1eadbf7;
  border-color: var(--line);
  color: var(--ink);
}
html[data-eye-care="true"]
  :is(
    .balance-card.b,
    .gift-rate,
    .gift-card .amount-field,
    .gift-facts span,
    .gift-card-2 .gift-facts span,
    .mall-explore-entry,
    .mall-page .mall-product-image,
    .home-services button:nth-child(n) > span,
    .profile-shortcuts button:nth-child(n) > span,
    .mall-notice-icon,
    .brand-mark,
    .dialog-icon,
    .order-gift,
    .point-action-icon,
    .transfer-action-icon,
    .checkin-icon,
    .partners-gift-icon,
    .partners-counts article,
    .myg-gift-icon,
    .myg-detail-summary,
    .myg-transfer-dialog .gift-recipient-card,
    .equipment-order-payment,
    .equipment-orders-page .equipment-order-card.request,
    .readonly-uid,
    .offer-empty,
    .sub-fee,
    .sub-shared,
    .sub-row.selected,
    .sub-row-status.active,
    .totp-meta,
    .totp-secret,
    .totp-owner-note,
    .sensitive-verification-loading,
    .sensitive-unbound-note,
    .face-identity-preview,
    .sp-confirm,
    .sp-avatar,
    .tg-countdown,
    .tg-address.selected,
    .tg-dialog .tg-note,
    .tg-entry,
    .tg-product-claim,
    .dc-gift-reminder,
    .inv-code-card,
    .inv-services i,
    .chat-games-heading > b,
    .chat-preview-tabs span,
    .chat-game-preview header > button,
    .chat-recall-dialog blockquote,
    .chat-packet-dialog label:has(input[type="checkbox"]),
    .tutorial-list > button > span
  ) {
  background: var(--tint);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
html[data-eye-care="true"]
  :is(.totp-status:not(.bound) > span, .tg-entry-icon) {
  background: var(--tint);
  color: var(--brand);
  box-shadow: none;
}
html[data-eye-care="true"] .gift-rate {
  color: var(--brand);
}
html[data-eye-care="true"] .mall-notice-content {
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"]
  .app-shell[data-eye-care="true"]
  .mall-page
  .mall-notice-strip {
  color: var(--ink);
}
html[data-eye-care="true"] .mall-page .eyebrow {
  color: var(--brand);
}
html[data-eye-care="true"]
  .profile-page.profile-refresh
  :is(.profile-assets, .assets-primary) {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
html[data-eye-care="true"]
  .profile-page.profile-refresh
  .assets-primary
  > span {
  color: var(--muted);
}
html[data-eye-care="true"]
  .profile-page.profile-refresh
  .assets-secondary
  article
  + article {
  border-color: var(--line);
}
html[data-eye-care="true"]
  :is(
    .primary-button,
    .gift-card .gift-purchase-button,
    .gift-card-2 .gift-purchase-button,
    .mall-page .mall-orders-button,
    .dc-claim,
    .dc-activate,
    .face-start,
    .equipment-market-transfer,
    .recharge-page .primary-button,
    .payment-refresh .primary-button,
    .service-centers .primary-button,
    .subaccounts-page .primary-button,
    .chat-search button,
    .chat-page .chat-primary,
    .chat-modal .chat-primary,
    .chat-send-row > button:last-child,
    .sp-search button,
    .sp-actions .sp-action-button:last-child,
    .broadcast-refresh .broadcast-publish-button,
    .broadcast-refresh .broadcast-editor .primary-button,
    .tg-dialog .primary-button,
    .tg-check,
    .inv-cta,
    .back-to-top,
    .profile-page.profile-refresh .assets-primary > button,
    .chat-preview-confirm,
    .chat-preview-tabs span:first-child,
    .provider-verified,
    .chat-identity-badge.provider,
    .totp-step:not(.danger) > span,
    .sensitive-verification-dialog .dialog-icon,
    .auth-panel .brand-mark
  ) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"]
  :is(.dc-sign-actions .dc-claim, .dc-sign-actions .dc-activate) {
  border-color: var(--brand);
}
html[data-eye-care="true"]
  :is(
    .secondary-button,
    .icon-button,
    .back-button,
    .ledger-back,
    .ledger-refresh,
    .gift-mine-button,
    .profile-refresh .profile-edit,
    .profile-badges span,
    .profile-page.profile-refresh .assets-actions button,
    .mall-page .mall-redeem-button,
    .mall-pagination button,
    .mall-order-meta button,
    .equipment-order-meta button,
    .equipment-list-tools select,
    .equipment-list-tools button,
    .equipment-request-actions .equipment-request-cancel,
    .sub-add-button,
    .sub-switch-button,
    .agent-records-toggle,
    .recharge-brands button,
    .recharge-products button,
    .recharge-amounts button,
    .recharge-close,
    .recharge-pager button,
    .recharge-result-icon,
    .payment-refresh .payment-view-button,
    .payment-refresh .payment-type,
    .payment-account-icon,
    .alipay .payment-account-icon,
    .pt-history button,
    .partners-filters button,
    .partners-more,
    .sp-actions .sp-action-button:first-child,
    .myg-filters button,
    .myg-pager button,
    .dc-header button,
    .dc-empty button,
    .chat-inbox-tabs button,
    .partners-chat,
    .chat-title button,
    .chat-actions button,
    .chat-member button,
    .chat-modal
      button:not(.chat-primary, .chat-recall-confirm, .primary-button),
    .chat-composer .chat-send-row > .chat-direct-image-button,
    .chat-global,
    .broadcast-refresh-action,
    .broadcast-refresh .broadcast-load-more,
    .tutorial-pager button,
    .inv-header button,
    .inv-code button,
    .profile-logout-dialog button:not(.logout-confirm),
    .member-remove-actions button:first-child
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--brand);
  box-shadow: none;
}
html[data-eye-care="true"]
  :is(
    .recharge-brands button[aria-pressed="true"],
    .partners-filters button[aria-pressed="true"],
    .myg-filters button[aria-pressed="true"],
    .equipment-filter-options button[aria-pressed="true"],
    .chat-inbox-tabs button[aria-pressed="true"]
  ) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--eye-on-brand);
}
html[data-eye-care="true"]
  :is(
    .recharge-products button[aria-pressed="true"],
    .recharge-amounts button[aria-pressed="true"],
    .equipment-order-payment.selected,
    .equipment-chooser-list .equipment-market-card.selected,
    .offer-option.selected,
    .mall-address.selected
  ) {
  background: var(--tint);
  border-color: var(--brand);
}
html[data-eye-care="true"] :is(.chat-toast, .toast) {
  background: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] body .ui-segments.ui-segments {
  background: var(--tint);
  border-color: var(--line);
  box-shadow: none;
}
html[data-eye-care="true"] body .ui-segments.ui-segments > button {
  color: var(--muted);
}
html[data-eye-care="true"]
  body
  .ui-segments.ui-segments
  > button:is(
    .active,
    .selected,
    [aria-pressed="true"],
    [aria-selected="true"]
  ) {
  background: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"] body .ui-pagination.ui-pagination {
  background: var(--surface);
  border-color: var(--line);
  color: var(--muted);
}
html[data-eye-care="true"] body .ui-pagination.ui-pagination > button {
  background: var(--tint);
  border-color: var(--line);
  color: var(--brand);
  box-shadow: none;
}
html[data-eye-care="true"] body .ui-pagination.ui-pagination > span {
  color: var(--muted);
}
html[data-eye-care="true"]
  body
  .ui-pagination.ui-pagination
  > button:not(:disabled):hover {
  background: #dfd0b8;
}
html[data-eye-care="true"] body .ui-pagination.ui-pagination > button:disabled {
  background: #eae2d4;
  border-color: #dfd5c4;
  color: #948c7b;
}
html[data-eye-care="true"]
  :is(
    .segmented,
    .recharge-tabs,
    .myg-tabs,
    .sp-tabs,
    .ledger-page .ledger-filter,
    .equipment-orders-page .equipment-order-tabs
  ) {
  background: var(--tint);
  border-color: var(--line);
}
html[data-eye-care="true"]
  :is(.segmented, .recharge-tabs, .myg-tabs, .sp-tabs)
  > button {
  color: var(--muted);
}
html[data-eye-care="true"]
  :is(.segmented, .recharge-tabs, .myg-tabs, .sp-tabs)
  > button:is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"] .app-shell .bottom-nav {
  background: #f1eadbf7;
  border-color: var(--line);
  box-shadow: 0 -8px 30px #5b482d0d;
}
html[data-eye-care="true"] .app-shell .bottom-nav button {
  color: var(--muted);
}
html[data-eye-care="true"] .app-shell .bottom-nav button.active {
  color: var(--brand);
}
html[data-eye-care="true"]
  .app-shell
  .bottom-nav
  :is(.transfer-tab, .check-tab)
  span {
  background: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"]
  :is(
    .field input,
    .field textarea,
    .field select,
    .preference-row select,
    .chat-composer textarea,
    .wechat-room .chat-composer textarea,
    .chat-modal input:not([type="checkbox"]):not([type="radio"]),
    .chat-modal textarea,
    .chat-modal select,
    .chat-packet-dialog input:not([type="checkbox"]),
    .chat-packet-dialog select,
    .sensitive-verification-dialog .field input,
    .totp-card .field input,
    .face-identity-check input,
    .broadcast-refresh .broadcast-editor textarea,
    .broadcast-refresh .broadcast-editor input,
    .service-centers textarea,
    .center-filters select,
    .center-region select,
    .address-editor textarea,
    .address-regions select,
    .address-regions input,
    .recharge-sheet form > input,
    .usdt-purchase-card input
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-eye-care="true"]
  :is(.image-upload .image-upload-select, .center-upload, .payment-upload) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--brand);
}
html[data-eye-care="true"]
  :is(button, a, input, select, textarea):focus-visible {
  outline-color: #85916d;
}
html[data-eye-care="true"]
  body
  :is(.ui-pagination, .ui-segments)
  > button:focus-visible {
  outline-color: #85916d;
}
html[data-eye-care="true"]
  :is(
    .field input,
    .field textarea,
    .totp-card .field input,
    .sensitive-verification-dialog .field input,
    .face-identity-check input,
    .broadcast-editor textarea
  ):focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px #71816d2e;
}
html[data-eye-care="true"]
  :is(
    .image-upload-select:focus-within,
    .equipment-filter-options button:focus-visible
  ) {
  outline-color: var(--brand);
}
html[data-eye-care="true"] :is(input, textarea)::placeholder {
  color: #948c7b;
}
html[data-eye-care="true"]
  :is(.sensitive-totp-field.unbound input, .sub-switch-button:disabled) {
  background: #eae2d4;
  color: #948c7b;
}
html[data-eye-care="true"]
  :is(
    .preference-row,
    .profile-refresh .profile-menu-row,
    .payment-method-detail,
    .payment-refresh .payment-method-detail,
    .ledger-filter,
    .equipment-order-tabs,
    .myg-dates,
    .myg-record,
    .partners-metrics article,
    .partners-page .partners-person,
    .sp-actions,
    .sp-history article,
    .pt-history article,
    .center-row,
    .agent-reward-records,
    .agent-reward-records dl > div,
    .face-state,
    .face-status-band,
    .face-facts,
    .face-facts > div + div,
    .recharge-help,
    .recharge-record,
    .recharge-unavailable,
    .chat-member,
    .chat-preview-rewards article,
    .address-card-actions,
    .dc-awards,
    .dc-records li,
    .broadcast-refresh .broadcast-card time,
    .tg-address,
    .mall-logistics
  ) {
  border-color: var(--line);
}
html[data-eye-care="true"]
  :is(
    .equipment-request-main > strong,
    .sensitive-unbound-note,
    .sensitive-verification-dialog .field,
    .tg-dialog h2,
    .tg-summary,
    .tg-entry,
    .sub-row strong,
    .partners-person strong,
    .gift-center-header,
    .chat-games-title strong,
    .tutorial-list > button,
    .profile-page.profile-refresh .assets-secondary strong
  ) {
  color: var(--ink);
}
html[data-eye-care="true"]
  :is(
    .preference-row small,
    .auth-panel > p,
    .state-panel,
    .gift-card-copy > p,
    .gift-card-2 .gift-card-copy > p,
    .gift-rate span,
    .gift-amount small,
    .ledger-copy span,
    .ledger-copy time,
    .profile-refresh .profile-person small,
    .equipment-order-meta,
    .equipment-chooser-list .equipment-market-card small,
    .equipment-request-main > small,
    .equipment-request-main .equipment-order-note,
    .equipment-order-card header small,
    .equipment-order-note,
    .equipment-order-payment span,
    .equipment-order-payment small,
    .offer-option small,
    .offer-empty,
    .myg-card small,
    .myg-record small,
    .pt-help,
    .pt-history small,
    .sp-tabs button,
    .sp-copy small,
    .sp-copy p,
    .sp-history small,
    .sp-sheet > p,
    .sub-shared,
    .sub-row-status.inactive,
    .totp-meta,
    .totp-owner-note,
    .sensitive-unbound-note span,
    .face-state p,
    .face-identity-preview,
    .center-row small,
    .image-upload > small,
    .member-remove-dialog p,
    .chat-header small,
    .chat-card p,
    .chat-card small,
    .chat-empty,
    .chat-message > small,
    .chat-system,
    .chat-send-row small,
    .chat-modal p,
    .chat-member small,
    .chat-reply,
    .chat-reply-preview,
    .chat-recall,
    .chat-packet-dialog p,
    .chat-games-title small,
    .chat-games-heading > b,
    .tg-dialog p,
    .tg-close,
    .announcement-detail time,
    .broadcast-refresh .eyebrow,
    .broadcast-feed-heading > span,
    .broadcast-refresh .broadcast-card time,
    .inv-code > span,
    .inv-code small,
    .inv-hint,
    .inv-services > p,
    .inv-services small,
    .inv-poster footer
  ) {
  color: var(--muted);
}
html[data-eye-care="true"]
  :is(
    .agent-reward-records > p,
    .agent-reward-records summary,
    .agent-reward-records dt,
    .address-contact span,
    .payment-account-heading small,
    .broadcast-feed-heading h2,
    .sensitive-bind-link,
    .sensitive-unbound-note > svg,
    .face-verification-page .page-header > svg,
    .face-state:not(.face-state-error) > svg,
    .face-status-band > svg,
    .totp-page .page-header > svg,
    .sp-history header button,
    .sp-avatar,
    .chat-header button,
    .chat-modal header button,
    .chat-load,
    .chat-composer > p,
    .tg-kicker,
    .tg-product-claim,
    .sub-add-button,
    .recharge-help,
    .recharge-products button,
    .recharge-amounts button,
    .profile-page.profile-refresh .assets-primary strong,
    .inv-code strong
  ) {
  color: var(--brand);
}
html[data-eye-care="true"] .chat-bubble {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-eye-care="true"] .mine .chat-bubble {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--eye-on-brand);
}
html[data-eye-care="true"] .wechat-room .chat-bubble {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
html[data-eye-care="true"] .wechat-room .mine .chat-bubble {
  background: #d9e0c6 !important;
}
html[data-eye-care="true"] .chat-avatar {
  background: var(--tint);
  color: var(--brand);
}
html[data-eye-care="true"] .chat-bubble blockquote {
  border-color: var(--line);
  color: inherit;
}
html[data-eye-care="true"] .chat-games .chat-rps,
html[data-eye-care="true"] .chat-page .chat-rps {
  background: var(--eye-hero);
  color: var(--eye-on-brand);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] .chat-page .chat-rps .chat-rps-open {
  background: var(--surface);
  color: var(--brand);
}
html[data-eye-care="true"] .chat-games-title > span {
  background: var(--brand);
  color: var(--eye-on-brand);
}
html[data-eye-care="true"]
  :is(
    .chat-conversation-row,
    .chat-conversation-list .chat-group-row,
    .chat-conversation-row .chat-hide,
    .chat-entry-menu,
    .chat-video-draft,
    .chat-tool-panel button svg,
    .chat-compose-line .chat-plus
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
html[data-eye-care="true"]
  :is(
    .chat-conversation-list,
    .chat-entry-menu button,
    .chat-kind-badge,
    .chat-kind-badge.system,
    .chat-conversation-list .chat-group-row .chat-avatar,
    .chat-media-error
  ) {
  background: var(--tint);
  border-color: var(--line);
  color: var(--muted);
}
html[data-eye-care="true"]
  :is(.chat-compose-line .chat-plus[aria-expanded="true"], .chat-back-list) {
  color: var(--brand);
}
html[data-eye-care="true"] .chat-global.is-dragging {
  box-shadow: 0 5px 20px #5b482d40;
}
html[data-eye-care="true"] .chat-identity-badge.owner {
  background: #71533d;
  border-color: #71533d;
  color: var(--eye-on-brand);
}
html[data-eye-care="true"] .chat-identity-badge.administrator {
  background: #e8dcc7;
  border-color: #b49b7b;
  color: #71533d;
}
html[data-eye-care="true"]
  :is(
    .sub-heading > div > span,
    .security-setting-detail,
    .recharge-heading small,
    .sp-name > span.offline,
    .dc-eyebrow,
    .dc-description,
    .dc-dock small,
    .dc-heading-icon,
    .dc-record-avatar,
    .dc-record-name small,
    .dc-record-amount small,
    .dc-ending,
    .payment-form-subtitle,
    .mall-section-title > span,
    .face-note,
    .chat-preview-rule,
    .tg-popup > small,
    .tg-later,
    .broadcast-refresh .broadcast-avatar,
    .broadcast-refresh .broadcast-author small,
    .broadcast-end,
    .broadcast-editor-label small,
    .myg-source,
    .myg-card-details span,
    .myg-hint,
    .myg-record-icon.sent,
    .myg-record-state,
    .myg-recipient-status,
    .myg-detail-header > span,
    .partners-avatar,
    .partners-recommender span:not(.partners-avatar),
    .partners-title span,
    .partners-person-name small,
    .partners-person-name .is-inactive,
    .partners-activity small,
    .chat-tool-panel button,
    .chat-video-draft small,
    .chat-video-draft span,
    .chat-video-draft > button,
    .chat-video small,
    .chat-video a,
    .chat-conversation-list .chat-group-row p,
    .chat-conversation-list .chat-group-row time,
    .chat-list-meta
  ) {
  color: var(--muted);
}
html[data-eye-care="true"]
  :is(
    .checkin-go,
    .profile-footer button,
    .dc-member span,
    .face-valid-until,
    .face-state .face-countdown,
    .tg-address-edit,
    .broadcast-refresh .broadcast-message p,
    .myg-person,
    .myg-record-icon,
    .myg-records > header .text-button,
    .myg-detail-header .text-button,
    .address-default-switch small,
    .forge-equipment-group summary,
    .partners-person-name .is-effective
  ) {
  color: var(--brand);
}
html[data-eye-care="true"] :is(.sub-identity, .sub-balance span) {
  color: #eee5d2;
}
html[data-eye-care="true"]
  :is(
    .profile-logout-dialog button,
    .profile-logout-button,
    .wechat-room .chat-message > .chat-avatar-direct
  ):focus-visible {
  outline-color: var(--brand);
}
html[data-eye-care="true"] .dc-sky {
  background: linear-gradient(180deg, #dfd2b8, var(--canvas));
}
html[data-eye-care="true"] .dc-sky i:first-child {
  background: #eadfcf;
  box-shadow: 0 0 0 16px #b49b7b29;
}
html[data-eye-care="true"] .dc-halo {
  background: radial-gradient(
    circle,
    #e6dac8aa,
    #dfcda950 65%,
    transparent 66%
  );
  box-shadow: 0 0 0 15px #b49b7b1f;
}
html[data-eye-care="true"] .dc-box {
  background: linear-gradient(110deg, #bca989, #eadfcf 52%, #c6b491);
  box-shadow: 6px 9px #5b482d1f;
}
html[data-eye-care="true"] :is(.dc-lid, .dc-ribbon, .dc-seal) {
  background: var(--brand);
  border-color: var(--line);
  box-shadow: none;
}
html[data-eye-care="true"] .dc-bow {
  border-color: var(--brand);
}
html[data-eye-care="true"] .tg-art {
  background: radial-gradient(ellipse, #e6dac8, transparent 70%);
}
html[data-eye-care="true"] .tg-box {
  background: linear-gradient(125deg, #a7ac8a, #71816d);
  box-shadow: 0 15px 25px #5b482d26;
}
html[data-eye-care="true"] .tg-box:before {
  background: linear-gradient(100deg, #c4c4a3, #85916d);
  box-shadow: 0 3px 5px #5b482d26;
}
html[data-eye-care="true"] .gift-celebration-2 {
  --present-front: #85916d;
  --present-side: #56634f;
  --present-top: #c4c4a3;
}
html[data-eye-care="true"] .gift-center-page .gift-hero .mini-island {
  background: #c4c4a3;
  box-shadow: inset 0 4px #dfcda9;
}
html[data-eye-care="true"] .inv-hero:after {
  background: linear-gradient(180deg, transparent 20%, rgb(53 48 39 / 90%));
}
html[data-eye-care="true"] .inv-hero-copy > span {
  color: #eee5d2;
}
html[data-eye-care="true"] .upload-progress-panel {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--eye-shadow) !important;
}
html[data-eye-care="true"] .upload-progress-panel progress {
  accent-color: var(--brand) !important;
}
html[data-eye-care="true"] .image-viewer > div:first-child {
  background: var(--surface) !important;
  color: var(--ink);
}
html[data-eye-care="true"]
  :is(.game-shell.game-hall, .game-shell.rank-page, .rps-daily-rank) {
  --line: #d4c4ae;
  --gold: #947039;
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"] :is(.game-wallet, .rank-self) {
  background: var(--eye-hero);
  border-color: var(--brand);
  color: var(--eye-on-brand);
}
html[data-eye-care="true"]
  :is(
    .game-wallet span,
    .game-wallet small,
    .game-wallet strong,
    .rank-self strong,
    .rank-self small
  ) {
  color: var(--eye-on-brand);
}
html[data-eye-care="true"]
  :is(
    .reference-game-card,
    .reference-game-card.rps-card,
    .rps-daily-rank .rps-fee-summary
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-eye-care="true"]
  :is(.game-hall, .rank-page, .rps-daily-rank)
  :is(.game-header > button, .header-icon, .rank-avatar) {
  background: var(--tint);
  border-color: var(--line);
  color: var(--brand);
}
html[data-eye-care="true"]
  :is(.game-hall, .rank-page, .rps-daily-rank)
  :is(
    .game-header p,
    .hall-title span,
    .hall-game span,
    .game-state,
    .rank-rules,
    .game-rank-row small
  ) {
  color: var(--muted);
}
html[data-eye-care="true"]
  :is(.hall-game, .game-rank-row em, .reference-game-card > svg) {
  color: var(--brand);
}
html[data-eye-care="true"] .reference-game-card p {
  color: var(--muted);
}
html[data-eye-care="true"] .page.equipment-forge-page.forge-game {
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"]
  .forge-game
  :is(
    .forge-panel,
    .forge-inventory,
    .forge-owned,
    .forge-template,
    .forge-balance,
    .forge-notice
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
html[data-eye-care="true"]
  .forge-game
  :is(
    .page-header h1,
    .forge-template strong,
    .forge-template b,
    .forge-breakdown strong,
    .forge-owned strong
  ) {
  color: var(--ink);
}
html[data-eye-care="true"]
  .forge-game
  :is(
    .page-header p,
    .forge-section-head,
    .forge-template small,
    .forge-breakdown,
    .forge-owned small,
    .forge-owned em,
    .equipment-list-tools,
    .forge-empty
  ) {
  color: var(--muted);
}
html[data-eye-care="true"]
  .forge-game
  :is(
    .forge-template.active,
    .equipment-badge,
    .forge-owned-actions button,
    select
  ) {
  background: var(--tint);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: none;
}
html[data-eye-care="true"] .forge-game .forge-submit {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"] .forge-success {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
html[data-eye-care="true"] .forge-success p {
  color: var(--muted);
}
html[data-eye-care="true"] .forge-success svg {
  color: var(--brand);
}
html[data-eye-care="true"] .forge-navigation {
  background: var(--tint);
  border-color: var(--line);
}
html[data-eye-care="true"] .forge-navigation button {
  color: var(--muted);
}
html[data-eye-care="true"] .forge-navigation button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"] .gift-recipient-card {
  background: var(--tint);
  border-color: var(--line);
  color: var(--ink);
}
html[data-eye-care="true"] .rps-page {
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"] :is(.rps-room, .rps-modal, .rps-self) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] .rps-overlay {
  background: #35302799;
}
html[data-eye-care="true"] :is(.rps-top button, .rps-close, .rps-empty h3) {
  color: var(--ink);
}
html[data-eye-care="true"] .rps-hero h1 {
  text-shadow: none;
}
html[data-eye-care="true"]
  :is(
    .rps-hero h1 em,
    .rps-balance strong,
    .rps-room-head > strong,
    .rps-empty svg
  ) {
  color: var(--brand);
  text-shadow: none;
}
html[data-eye-care="true"]
  :is(
    .rps-hero p,
    .rps-balance span,
    .rps-page small,
    .rps-room-detail,
    .rps-empty,
    .rps-rules,
    .rps-ranks > p,
    .rps-rank-row > strong,
    .rps-modal > p,
    .rps-modal label,
    .rps-stakes legend
  ) {
  color: var(--muted);
}
html[data-eye-care="true"] :is(.rps-tabs, .rps-stakes) {
  background: var(--tint);
  border-color: var(--line);
}
html[data-eye-care="true"]
  :is(
    .rps-tabs button,
    .rps-secondary,
    .rps-pager button,
    .rps-period button,
    .rps-stakes button,
    .rps-picks button,
    .rps-modal input,
    .rps-modal select
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
html[data-eye-care="true"] :is(.rps-primary, .rps-tabs button.active) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"]
  :is(
    .rps-period button.active,
    .rps-stakes button.selected,
    .rps-picks button.selected
  ) {
  background: var(--tint);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: inset 0 -3px var(--brand);
  animation: none;
}
html[data-eye-care="true"] .rps-text {
  color: var(--brand) !important;
}
html[data-eye-care="true"] .rps-rank-row {
  border-color: var(--line);
}
html[data-eye-care="true"] .rps-rank-row.top-1 > strong {
  color: #947039;
  text-shadow: none;
}
html[data-eye-care="true"] .rps-rank-row.top-2 > strong {
  color: #66705b;
}
html[data-eye-care="true"] .rps-rank-row.top-3 > strong {
  color: #a86f4d;
}
html[data-eye-care="true"] .rps-notice {
  background: #e1e7d3;
  border-color: #aab696;
  color: #475b40;
}
html[data-eye-care="true"] .rps-error {
  background: #f4ded5;
  border-color: #cf9685;
  color: var(--danger);
}
html[data-eye-care="true"] .rps-avatar:not(img) {
  background: var(--tint);
  color: var(--brand);
}
html[data-eye-care="true"] .game-shell.chicken-page {
  --game-bg: #f1eadb;
  --panel: #f8f1e4;
  --panel-2: #e6dac8;
  --line: #d4c4ae;
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"] :is(.reference-hero, .chicken-page .arena-frame) {
  color: #f8f5ef;
}
html[data-eye-care="true"]
  .chicken-page
  :is(.battle-wallet, .battle-wallet > div, .bet-console, .battle-clock) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-eye-care="true"]
  :is(.game-modal, .chicken-page .game-modal, .my-settlement) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] .game-overlay {
  background: #35302799;
}
html[data-eye-care="true"]
  :is(
    .chicken-page .game-header > button,
    .chicken-page .header-icon,
    .chicken-page .battle-tools button,
    .chicken-page .stake-grid button,
    .game-modal input
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
html[data-eye-care="true"]
  :is(.chicken-page .game-primary, .chicken-page .stake-grid button.selected) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"] .chicken-page .side-grid button {
  background: var(--surface);
  border-color: #ceaaa0;
  color: #a43e35;
  box-shadow: none;
}
html[data-eye-care="true"] .chicken-page .side-grid button:last-child {
  background: var(--surface);
  border-color: #9ab4ac;
  color: #356a63;
}
html[data-eye-care="true"] .chicken-page .side-grid button.selected {
  border-color: #a43e35;
  box-shadow: inset 0 -3px #a43e35;
}
html[data-eye-care="true"] .chicken-page .side-grid button.selected.blue {
  border-color: #356a63;
  box-shadow: inset 0 -3px #356a63;
}
html[data-eye-care="true"]
  :is(
    .chicken-page .game-header p,
    .battle-wallet span,
    .battle-wallet small,
    .chicken-page .battle-clock span,
    .chicken-page .side-grid span,
    .chicken-page .bet-console > div:first-child span,
    .chicken-page .bet-console p,
    .motion-toggle,
    .game-modal > small,
    .game-modal label,
    .history-modal article small,
    .my-settlement article span,
    .chicken-page .game-state
  ) {
  color: var(--muted);
}
html[data-eye-care="true"]
  :is(
    .battle-wallet strong,
    .chicken-page .battle-clock strong,
    .chicken-page .battle-tools svg,
    .game-modal dd,
    .history-modal article span,
    .my-settlement h2,
    .my-settlement article strong
  ) {
  color: var(--brand);
}
html[data-eye-care="true"] .modal-close {
  color: var(--ink);
}
html[data-eye-care="true"]
  :is(.game-modal dl > div, .history-modal article, .my-settlement article) {
  border-color: var(--line);
}
html[data-eye-care="true"] .game-notice {
  background: #e1e7d3;
  border-color: #aab696;
  color: #475b40;
}
html[data-eye-care="true"] .game-error {
  background: #f4ded5;
  border-color: #cf9685;
  color: var(--danger);
}
html[data-eye-care="true"] .game-error button {
  color: var(--danger);
}
html[data-eye-care="true"]
  :is(
    .confirm-sheet,
    .chapter,
    .level-tile,
    .level-card,
    .collection-card,
    .skin-group,
    .skin-card,
    .badge-card,
    .rule-grid article,
    .loading-card,
    .game-progress,
    .live-goals,
    .game-toolbar,
    .start-dock
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] .chapter {
  --chapter-accent: #71816d;
}
html[data-eye-care="true"]
  :is(.chapter.is-expanded, .level-tile.is-selected, .skin-card.is-selected) {
  background: var(--tint);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: none;
}
html[data-eye-care="true"] :is(.challenge-panel, .collection-summary) {
  background: var(--eye-hero);
  color: var(--eye-on-brand);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"]
  :is(
    .section-kicker,
    .challenge-copy > p,
    .challenge-meta,
    .collection-summary > div:first-child span
  ) {
  color: #eee5d2;
}
html[data-eye-care="true"]
  :is(
    .balance-chip,
    .confirm-mark,
    .page-icon,
    .chapter-number,
    .result-mark,
    .period-tabs
  ) {
  background: var(--tint);
  border-color: var(--line);
  color: var(--brand);
  box-shadow: none;
}
html[data-eye-care="true"] :is(.game-toolbar > button, .chest-button) {
  background: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: inset 0 -3px #35302726;
}
html[data-eye-care="true"] .game-toolbar > button:last-child {
  background: #a86f4d;
}
html[data-eye-care="true"] .game-toolbar > button small {
  color: #eee5d2;
}
html[data-eye-care="true"] .game-header .icon-button {
  background: var(--surface);
  border-color: var(--line);
  color: var(--brand);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] :is(.game-meta strong, .game-progress strong) {
  color: var(--ink);
}
html[data-eye-care="true"] .game-meta span {
  background: var(--surface);
  color: var(--muted);
}
html[data-eye-care="true"] :is(.flow-overlay, .loading-screen) {
  background: var(--canvas);
  color: var(--ink);
}
html[data-eye-care="true"] .loading-track i {
  background: linear-gradient(90deg, #71816d, #b49b7b);
}
html[data-eye-care="true"] :is(.loading-card > span, .loading-card small) {
  color: var(--muted);
}
html[data-eye-care="true"] .nav-item.is-active {
  background: var(--tint);
  color: var(--brand);
}
html[data-eye-care="true"] .period-tabs button.active {
  background: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"]
  .reward-chest:not(.chest-opening):not(.chest-waiting) {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"]:has(.map) {
  --blue: #56634f;
  --deep: #3b4037;
  --cream: #f8f1e4;
}
html[data-eye-care="true"] .top {
  background: linear-gradient(#f1eadbee, #f1eadb00);
  color: var(--ink);
}
html[data-eye-care="true"] .brandmark {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] .preview {
  background: var(--brand);
  color: var(--eye-on-brand);
  border-color: var(--line);
}
html[data-eye-care="true"] :is(.sheet, .first-guide) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] .sheet[data-place] {
  --sheet-accent: #56634f;
}
html[data-eye-care="true"]
  :is(.sheet p, .sheet .tag, .first-guide strong, .guide-close) {
  color: var(--brand);
}
html[data-eye-care="true"] :is(.sheet .close, .jump) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--brand);
}
html[data-eye-care="true"] .sheet .cta {
  background: var(--brand);
  color: var(--eye-on-brand);
  box-shadow: none;
}
html[data-eye-care="true"] .shade {
  background: #35302785;
}
html[data-eye-care="true"] .bottom {
  background: linear-gradient(transparent, #f1eadbb8 26%, #f1eadbf5);
  color: var(--ink);
}
html[data-eye-care="true"] .bottom p {
  text-shadow: none;
}
html[data-eye-care="true"] .spot-status {
  background: var(--brand);
  color: var(--eye-on-brand);
  border-color: var(--line);
  box-shadow: var(--eye-shadow);
}
html[data-eye-care="true"] .spot:is(.market, .game) .spot-status {
  background: var(--brand);
}
@media (hover: hover) {
  html[data-eye-care="true"]
    :is(
      .profile-menu-row:hover,
      .profile-page.profile-refresh .assets-actions button:hover
    ) {
    background: var(--tint);
  }
  html[data-eye-care="true"] .mall-page .mall-redeem-button:hover {
    background: var(--brand);
    color: var(--eye-on-brand);
  }
}