.trainer-panel.client-open {
  top: 12px !important;
  bottom: auto !important;
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: 430px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #b99b45 #081318 !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid #3d6968 !important;
  border-radius: 14px !important;
  background: radial-gradient(circle at 85% 0, #d4ad3820, transparent 28%), linear-gradient(155deg, #12282b, #08151b 72%) !important;
  box-shadow: 0 22px 58px #000c, inset 0 0 0 1px #8ee0ce0d !important;
}

.trainer-panel.client-open::-webkit-scrollbar { width: 6px !important; }
.trainer-panel.client-open::-webkit-scrollbar-track { background: #081318 !important; }
.trainer-panel.client-open::-webkit-scrollbar-thumb { border-radius: 999px !important; background: #927b3b !important; }

.trainer-panel.client-open > .panel-title {
  position: sticky !important;
  z-index: 20 !important;
  top: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 30px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 7px 8px 7px 13px !important;
  border-bottom: 1px solid #476d68 !important;
  background: linear-gradient(180deg, #193237fa, #0c1b20fa) !important;
  box-shadow: 0 5px 16px #0008 !important;
  backdrop-filter: blur(8px) !important;
}

.trainer-panel.client-open > .panel-title > span {
  overflow: hidden !important;
  color: #fff0a4 !important;
  font: 900 11px/1.1 Arial, sans-serif !important;
  letter-spacing: 1.1px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.trainer-panel.client-open > .panel-title > span::before { content: "◈"; margin-right: 7px; color: #6fe1c2 !important; }

.trainer-panel.client-open > .panel-title > #trainer-level {
  padding: 5px 7px !important;
  border: 1px solid #8e793b !important;
  border-radius: 999px !important;
  background: #302812 !important;
  color: #ffe680 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.trainer-panel.client-open .client-panel-close {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 1px solid #536a6b !important;
  border-radius: 8px !important;
  background: #09171c !important;
  color: #dce9e7 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.trainer-panel.client-open .trainer-card {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 9px 10px 7px !important;
  padding: 9px !important;
  border: 1px solid #355a5d !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #173038, #0b1b21) !important;
}

.trainer-panel.client-open .trainer-card .portrait {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  border: 1px solid #cfad47 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #244a45, #0a171b 70%) !important;
  box-shadow: inset 0 0 0 4px #d4b14418, 0 0 14px #0007 !important;
  overflow: hidden !important;
}

.trainer-panel.client-open .trainer-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; }
.trainer-panel.client-open .trainer-copy > strong { overflow: hidden !important; color: #f4f8f4 !important; font-size: 12px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.trainer-panel.client-open .trainer-copy > span,
.trainer-panel.client-open .trainer-copy > small { color: #8ca8a5 !important; font-size: 7px !important; line-height: 1.25 !important; }
.trainer-panel.client-open .trainer-copy .progress { height: 6px !important; margin: 1px 0 !important; border-radius: 999px !important; background: #071116 !important; }
.trainer-panel.client-open .trainer-copy .progress > i { border-radius: 999px !important; background: linear-gradient(90deg, #32c68d, #b9e875) !important; }

.trainer-panel.client-open .trainer-power-summary {
  min-height: 50px !important;
  margin: 0 10px 8px !important;
  padding: 8px 11px !important;
  border-color: #a78b38 !important;
  border-radius: 10px !important;
  background: linear-gradient(110deg, #2a2717, #102329 72%) !important;
}

.trainer-panel.client-open .trainer-power-summary span { font-size: 7px !important; letter-spacing: 1px !important; }
.trainer-panel.client-open .trainer-power-summary strong { font-size: 22px !important; line-height: 23px !important; }
.trainer-panel.client-open .trainer-power-summary small { font-size: 6px !important; }

.trainer-panel.client-open .trainer-customization {
  display: block !important;
  margin: 0 10px 8px !important;
  padding: 0 !important;
  border: 0 !important;
}

.trainer-panel.client-open .trainer-customization label { gap: 4px !important; color: #789b98 !important; font-size: 6px !important; letter-spacing: 1px !important; }

.trainer-panel.client-open :is(#trainer-model, #profession) {
  height: 32px !important;
  padding: 0 9px !important;
  border: 1px solid #3b6262 !important;
  border-radius: 7px !important;
  background: #08171c !important;
  color: #e9f5f1 !important;
  font-size: 10px !important;
}

.trainer-panel.client-open #trainer-model { width: 100% !important; margin: 0 !important; }
.trainer-panel.client-open #profession { width: calc(100% - 20px) !important; margin: 0 10px 8px !important; }

.trainer-panel.client-open > .section-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 18px !important;
  margin: 3px 10px 4px !important;
  padding: 0 !important;
  color: #7fa8a3 !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: 1.1px !important;
}

.trainer-panel.client-open > .section-label::after { content: ""; flex: 1; height: 1px; margin-left: 8px; background: linear-gradient(90deg, #345e5b, transparent); }
.trainer-panel.client-open > .section-label > b { margin-left: 7px; color: #e1c45d !important; white-space: nowrap !important; }

.trainer-panel.client-open .pokemon-card {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 9px !important;
  margin: 0 10px 8px !important;
  padding: 9px !important;
  border: 1px solid #356167 !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #142b32, #0b1a20) !important;
}

.trainer-panel.client-open .pokemon-card .pokemon-sprite { display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; border-radius: 9px !important; background: #dceee1 !important; }
.trainer-panel.client-open .pokemon-card strong { color: #eff7f5 !important; font-size: 10px !important; }
.trainer-panel.client-open .pokemon-card span,
.trainer-panel.client-open .pokemon-card small { font-size: 6px !important; line-height: 1.3 !important; }
.trainer-panel.client-open .pokemon-card .hp { height: 6px !important; margin: 4px 0 2px !important; border-radius: 999px !important; overflow: hidden !important; }

.trainer-panel.client-open .upgrade {
  width: calc(100% - 20px) !important;
  min-height: 39px !important;
  margin: 0 10px 8px !important;
  padding: 6px 9px !important;
  border: 1px solid #4c5f5e !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #1b2c30, #0c181d) !important;
}

.trainer-panel.client-open .vitamin-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; padding: 0 10px 8px !important; }
.trainer-panel.client-open .vitamin-use { grid-template-columns: 28px minmax(0, 1fr) auto !important; gap: 5px !important; min-height: 38px !important; padding: 4px !important; border-color: #36575a !important; border-radius: 7px !important; background: #102127 !important; }
.trainer-panel.client-open .vitamin-use img { width: 28px !important; height: 28px !important; }
.trainer-panel.client-open .vitamin-use span { font-size: 8px !important; }
.trainer-panel.client-open .vitamin-use small { font-size: 6px !important; }
.trainer-panel.client-open .account-security { margin: 0 10px 8px !important; border: 1px solid #334f51 !important; border-radius: 8px !important; background: #0a171c !important; overflow: hidden !important; }
.trainer-panel.client-open .account-security > summary { padding: 9px !important; color: #a8bfbc !important; font-size: 7px !important; font-weight: 900 !important; cursor: pointer !important; }
.trainer-panel.client-open #logout-account { width: calc(100% - 20px) !important; margin: 0 10px 11px !important; }

@media (max-width: 780px), (max-height: 500px) and (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .trainer-panel.client-open {
    left: max(5px, env(safe-area-inset-left)) !important;
    right: auto !important;
    top: max(5px, env(safe-area-inset-top)) !important;
    width: min(266px, calc(100vw - 10px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
    max-width: 266px !important;
    max-height: calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 10px !important;
    scrollbar-gutter: auto !important;
    contain: layout paint !important;
  }

  .trainer-panel.client-open::-webkit-scrollbar { width: 3px !important; }
  .trainer-panel.client-open > .panel-title { grid-template-columns: minmax(0, 1fr) auto 25px !important; gap: 5px !important; min-height: 34px !important; padding: 4px 5px 4px 8px !important; }
  .trainer-panel.client-open > .panel-title > span { font-size: 8px !important; letter-spacing: .65px !important; }
  .trainer-panel.client-open > .panel-title > span::before { margin-right: 4px !important; }
  .trainer-panel.client-open > .panel-title > #trainer-level { padding: 4px 5px !important; font-size: 6px !important; }
  .trainer-panel.client-open .client-panel-close { width: 25px !important; min-width: 25px !important; height: 25px !important; min-height: 25px !important; border-radius: 6px !important; font-size: 14px !important; }
  .trainer-panel.client-open .trainer-card { grid-template-columns: 42px minmax(0, 1fr) !important; gap: 7px !important; margin: 6px 7px 5px !important; padding: 6px !important; border-radius: 8px !important; }
  .trainer-panel.client-open .trainer-card .portrait { width: 42px !important; height: 42px !important; }
  .trainer-panel.client-open .trainer-card .portrait canvas { width: 42px !important; height: 42px !important; }
  .trainer-panel.client-open .trainer-copy { gap: 1px !important; }
  .trainer-panel.client-open .trainer-copy > strong { font-size: 9px !important; }
  .trainer-panel.client-open .trainer-copy > span,
  .trainer-panel.client-open .trainer-copy > small { font-size: 5.5px !important; line-height: 1.15 !important; }
  .trainer-panel.client-open .trainer-copy > small { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .trainer-panel.client-open .trainer-copy .progress { height: 4px !important; margin: 1px 0 !important; }
  .trainer-panel.client-open .trainer-power-summary { min-height: 36px !important; margin: 0 7px 5px !important; padding: 5px 7px !important; border-radius: 7px !important; }
  .trainer-panel.client-open .trainer-power-summary span { font-size: 5.5px !important; letter-spacing: .7px !important; }
  .trainer-panel.client-open .trainer-power-summary strong { font-size: 17px !important; line-height: 18px !important; }
  .trainer-panel.client-open .trainer-power-summary small { display: none !important; }
  .trainer-panel.client-open .trainer-customization { margin: 0 7px 5px !important; }
  .trainer-panel.client-open .trainer-customization label { gap: 2px !important; font-size: 5px !important; }
  .trainer-panel.client-open :is(#trainer-model, #profession) { height: 27px !important; padding: 0 7px !important; border-radius: 6px !important; font-size: 8px !important; }
  .trainer-panel.client-open #profession { width: calc(100% - 14px) !important; margin: 0 7px 5px !important; }
  .trainer-panel.client-open > .section-label { min-height: 13px !important; margin: 2px 7px 3px !important; font-size: 5px !important; letter-spacing: .8px !important; }
  .trainer-panel.client-open .pokemon-card { grid-template-columns: 39px minmax(0, 1fr) !important; gap: 6px !important; margin: 0 7px 5px !important; padding: 6px !important; border-radius: 8px !important; }
  .trainer-panel.client-open .pokemon-card .pokemon-sprite { width: 39px !important; height: 39px !important; border-radius: 7px !important; }
  .trainer-panel.client-open .pokemon-card .pokemon-sprite canvas { width: 39px !important; height: 39px !important; }
  .trainer-panel.client-open .pokemon-card strong { font-size: 8px !important; }
  .trainer-panel.client-open .pokemon-card span,
  .trainer-panel.client-open .pokemon-card small { font-size: 5px !important; line-height: 1.15 !important; }
  .trainer-panel.client-open .pokemon-card .hp { height: 4px !important; margin: 2px 0 1px !important; }
  .trainer-panel.client-open .upgrade { width: calc(100% - 14px) !important; min-height: 31px !important; margin: 0 7px 5px !important; padding: 4px 6px !important; border-radius: 6px !important; }
  .trainer-panel.client-open .upgrade b { font-size: 7px !important; }
  .trainer-panel.client-open .upgrade small,
  .trainer-panel.client-open .upgrade em { font-size: 5px !important; }
  .trainer-panel.client-open .vitamin-list { grid-template-columns: 1fr 1fr !important; gap: 3px !important; padding: 0 7px 5px !important; }
  .trainer-panel.client-open .vitamin-use { grid-template-columns: 21px minmax(0, 1fr) auto !important; gap: 3px !important; min-height: 29px !important; padding: 3px !important; border-radius: 5px !important; }
  .trainer-panel.client-open .vitamin-use img { width: 21px !important; height: 21px !important; }
  .trainer-panel.client-open .vitamin-use span { font-size: 6px !important; }
  .trainer-panel.client-open .vitamin-use small { font-size: 5px !important; }
  .trainer-panel.client-open .vitamin-use b { font-size: 7px !important; }
  .trainer-panel.client-open .account-security { margin: 0 7px 5px !important; border-radius: 6px !important; }
  .trainer-panel.client-open .account-security > summary { padding: 7px !important; font-size: 6px !important; }
  .trainer-panel.client-open .account-security form { padding: 6px !important; gap: 4px !important; }
  .trainer-panel.client-open .account-security input { height: 28px !important; font-size: 16px !important; }
  .trainer-panel.client-open #logout-account { width: calc(100% - 14px) !important; height: 27px !important; margin: 0 7px 7px !important; font-size: 6px !important; }
}