.worm-panel {
  width: min(520px, calc(100% - 24px));
  max-height: min(630px, calc(100dvh - 24px));
  padding: 0;
  border: 1px solid #697685;
  border-radius: 9px;
  color: #f5f5f6;
  background: #252937;
  box-shadow: 0 14px 46px #080b12a8;
  font-family: "PT Sans", PTSans, Arial, sans-serif;
  color-scheme: dark;
}

.worm-panel::backdrop { background: #090b12b8; }
.worm-panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid #515867;
  background: #1a1e2b;
}
.worm-panel-header h2 { margin: 0; font-size: 1.42rem; }
.worm-panel-header .worm-panel-close {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.85rem;
  line-height: 1;
}
.worm-panel-body { padding: 14px 16px 16px; }
.worm-panel-body p { margin: 0 0 12px; line-height: 1.35; }
.worm-panel button, .worm-panel select, .worm-panel input:not([type='checkbox']) {
  min-height: 35px;
  padding: 6px 9px;
  border: 1px solid #637081;
  border-radius: 5px;
  font: inherit;
  color: inherit;
  background: #354151;
}
.worm-panel button:enabled:hover { background: #49576b; }
.worm-panel button:focus-visible, .worm-panel input:focus-visible, .worm-panel select:focus-visible {
  outline: 2px solid #ffdb91;
  outline-offset: 2px;
}
.worm-panel button:disabled { opacity: .55; }
.worm-panel .worm-panel-action { color: #2d1e19; border-color: #ffdf99; background: #ffce69; font-weight: bold; }
.worm-panel .worm-panel-action:enabled:hover { background: #ffdf99; }
.worm-panel .worm-panel-danger { color: #ffe0e7; border-color: #a96776; background: #693849; }
.worm-panel .worm-panel-danger:enabled:hover { background: #86495b; }
.worm-panel-body > img { max-width: 100%; max-height: 95px; object-fit: contain; margin: 4px 0 10px; }

.worm-panel-tabs, .worm-panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.worm-panel-tabs { margin-bottom: 12px; }
.worm-panel-tabs button[aria-pressed='true'] { border-color: #78dce4; color: #d7faff; background: #285b66; }
.worm-panel-actions { margin-top: 10px; }
.worm-panel-actions:empty { display: none; }
.worm-panel-actions span { color: #dbe6ef; }
.worm-panel-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #637081;
  border-radius: 5px;
  cursor: pointer;
}
.worm-panel-setting input { width: 18px; height: 18px; accent-color: #ffce69; }
.worm-panel-login label { display: grid; gap: 5px; margin-bottom: 10px; }
.worm-panel-login input:not([type='checkbox']) { width: min(100%, 320px); background: #181e2a; }
.worm-panel .worm-panel-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-inline: 12px;
  border-color: #dadce0;
  color: #202124;
  background: #fff;
}
.worm-panel .worm-panel-google:enabled:hover { background: #edf3fc; }
.worm-panel-google img { width: 18px; height: 18px; }
.worm-panel-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.worm-panel-identity > .profile-avatar { flex: 0 0 auto; width: 62px; height: 62px; }
.worm-panel-identity > div { flex: 1; min-width: 0; }
.worm-panel-identity h3 { margin: 0 0 4px; overflow-wrap: anywhere; }
.worm-panel-identity p { margin: 0 0 4px; }
.worm-panel-identity progress { display: block; width: 100%; height: 10px; accent-color: #ffce69; }
.worm-panel-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.worm-panel-stats > div { padding: 7px 9px; background: #303847; }
.worm-panel-stats dt { color: #c8d6e1; }
.worm-panel-stats dd { margin: 2px 0 0; font-weight: bold; }

.worm-panel-leaders { width: 100%; border-collapse: collapse; table-layout: fixed; }
.worm-panel-leaders caption { margin-bottom: 8px; text-align: left; font-size: 1.04rem; font-weight: bold; }
.worm-panel-leaders th, .worm-panel-leaders td { padding: 6px 4px; text-align: right; overflow-wrap: anywhere; }
.worm-panel-leaders th { border-bottom: 1px solid #637081; font-weight: bold; color: #dbe6ef; }
.worm-panel-leaders th:first-child { width: 11%; }
.worm-panel-leaders th:nth-child(2), .worm-panel-leaders td:nth-child(2) { width: 33%; text-align: left; }
.worm-panel-leaders th:nth-child(3) { width: 11%; }
.worm-panel-leaders tbody tr:nth-child(odd) { background: #303847; }

.worm-panel-preview { display: block; width: min(100%, 330px); height: auto; margin-inline: auto; }

.worm-panel-store {
  width: min(1050px, calc(100% - 24px));
  max-height: min(790px, calc(100dvh - 24px));
  background: #202632;
}
.worm-panel-store .worm-panel-header { justify-content: space-between; }
.worm-panel-store .worm-panel-header .worm-panel-close { min-width: 44px; height: 44px; }
.worm-panel-store .worm-panel-body { padding: 0; }
.shop-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid #435063;
  background: #272f3e;
}
.shop-bar .worm-panel-tabs { margin: 0; }
.shop-bar .worm-panel-tabs button { min-height: 44px; padding-inline: 12px; background: #222a38; }
.shop-bar .worm-panel-tabs button[aria-pressed='true'] { background: #285b66; }
.shop-balance { display: flex; flex: none; align-items: center; gap: 7px; min-height: 44px; color: #ffdf99; }
.shop-balance button { min-height: 44px; }
.shop-balance img { width: 22px; height: 22px; object-fit: contain; }
.shop-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 30%); align-items: start; }
.shop-catalogue { min-width: 0; padding: 16px 18px; }
.shop-custom-skin { max-width: 630px; padding: 18px; }
.shop-custom-skin h3 { margin: 0 0 8px; }
.skin-upload-form { display: grid; gap: 12px; }
.skin-upload-form label { display: grid; gap: 5px; }
.skin-upload-form input { width: 100%; box-sizing: border-box; }
.skin-upload-preview { width: min(100%, 512px); height: auto; background: #161b27; border-radius: 6px; }
.shop-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.shop-controls label { display: grid; gap: 4px; min-width: 0; color: #d0dbea; font-size: .9rem; }
.shop-controls label:first-child { flex: 1 1 155px; }
.shop-controls input[type='search'], .shop-controls select { width: 100%; min-height: 44px; background: #151b26; font-size: 1rem; }
.worm-panel-body .shop-count { margin: 12px 0 9px; color: #bdc9da; font-size: .88rem; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 9px; }
.worm-panel-store button.shop-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 118px;
  padding: 8px;
  border: 1px solid #4d5d72;
  border-radius: 8px;
  color: #f5f5f6;
  background: #293342;
  text-align: left;
}
.worm-panel-store .shop-card[aria-pressed='true'] { border-color: #83d8e2; background: #294651; }
.worm-panel-store .shop-card:hover { border-color: #83d8e2; }
.shop-thumbnail, .shop-empty-thumbnail {
  display: block;
  width: 100%;
  height: 57px;
  object-fit: contain;
  border-radius: 5px;
  background: radial-gradient(ellipse at center, #465266, #222b38);
}
.shop-empty-thumbnail { display: grid; place-items: center; color: #d5e3ef; font-size: 1.7rem; }
.shop-card-name { font-weight: bold; line-height: 1.12; overflow-wrap: anywhere; }
.shop-card-status { color: #e3c58a; font-size: .83rem; }
.shop-card-equipped { color: #a1e7c2; }
.shop-catalogue .shop-more { width: 100%; min-height: 44px; margin-top: 12px; }
.shop-details {
  position: sticky;
  top: 62px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border-left: 1px solid #435063;
  border-bottom: 1px solid #435063;
  background: #26303f;
}
.shop-details:empty { display: none; }
.shop-detail-title h3 { margin: 0; font-size: 1.24rem; overflow-wrap: anywhere; }
.shop-details .worm-panel-preview { border-radius: 7px; background: radial-gradient(ellipse at center, #49586b, #1e2735); }
.shop-details .shop-back { display: none; }
.worm-panel-body .shop-color-label { margin: 0; color: #d0dbea; font-size: .9rem; }
.shop-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.worm-panel-store .shop-swatch { min-width: 44px; min-height: 44px; padding: 5px; }
.shop-swatch[aria-pressed='true'] { border-color: #83d8e2; box-shadow: 0 0 0 1px #83d8e2; }
.shop-swatch span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin: auto;
  border: 1px solid #ffffff60;
  border-radius: 50%;
  background: #3b485c;
  font-size: .8rem;
}
.shop-detail-action { display: grid; gap: 6px; }
.shop-detail-action .worm-panel-action { min-height: 44px; }
.worm-panel-body .shop-detail-action p { margin: 0; color: #d0dbea; }
.shop-equipped { color: #b6ebce; }
.shop-coins-info { display: grid; justify-items: center; padding: 40px 20px; text-align: center; }
.shop-coins-info img { width: 52px; height: 52px; object-fit: contain; }
.shop-coins-info h3 { margin: 10px 0 8px; }
.shop-coins-info button { min-height: 44px; }
.coin-store { padding: 20px 18px 24px; }
.coin-store h3 { margin: 0 0 7px; font-size: 1.24rem; }
.coin-store-return { margin: 0 0 12px; color: #ffdf99; }
.coin-store-return:has(p:empty) { display: none; }
.coin-store-return button { min-height: 44px; }
.coin-pack-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.coin-pack {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #4d5d72;
  border-radius: 8px;
  background: #293342;
}
.coin-pack img { width: 40px; height: 40px; object-fit: contain; }
.coin-pack strong { text-align: center; }
.coin-pack button { width: 100%; min-height: 44px; }
.worm-panel-store .worm-panel-body > [role='status']:first-child:not(.sr-only) { padding: 9px 18px; margin: 0; color: #ffdf99; }

@media (max-width: 670px) {
  .shop-bar { flex-wrap: wrap-reverse; gap: 8px; padding: 8px 12px 12px; }
  .shop-balance { min-height: 32px; }
  .shop-catalogue { padding: 12px; }
  .coin-store { padding: 14px 12px 18px; }
  .shop-content { display: block; }
  .shop-content.shop-detail-open .shop-catalogue, .shop-content:not(.shop-detail-open) .shop-details { display: none; }
  .shop-details { position: static; padding: 12px; border: 0; }
  .shop-details .shop-back { display: inline-block; min-height: 44px; margin-bottom: 8px; }
}

@media (max-width: 390px) {
  .worm-panel-body { padding: 10px; }
  .worm-panel-leaders { font-size: .84rem; }
}