.myclass-pet-toolbar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 4000;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 2px solid var(--line, #efe7da);
  border-radius: 16px;
  background: var(--paper, #fff);
  box-shadow: 0 6px 0 var(--shadow, #efe4cf);
}

.myclass-pet-toolbar[hidden] {
  display: none;
}

.myclass-pet-toolbar button,
.myclass-pet-modal button {
  border: 2px solid var(--line, #efe7da);
  border-radius: 10px;
  background: #fff8ee;
  color: var(--text, #3a3a3a);
  font-weight: 900;
  cursor: pointer;
}

.myclass-pet-toolbar button {
  min-height: 34px;
  padding: 0 12px;
}

.myclass-pet-toolbar .is-on {
  background: #e9f8ed;
  color: #1d6b57;
}

.myclass-pet-toolbar .is-off {
  background: #f8f3ed;
  color: #6f655a;
}

.myclass-pet-strip {
  display: grid;
  grid-template-columns: minmax(86px, calc(108px * var(--card-scale, 1))) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: calc(10px * var(--card-scale, 1)) 0 calc(8px * var(--card-scale, 1));
  padding: calc(10px * var(--card-scale, 1));
  border: 2px solid #f1e6d6;
  border-radius: calc(16px * var(--card-scale, 1));
  background: linear-gradient(180deg, #fffdf8, #fff8ee);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}

.myclass-pet-hidden .myclass-pet-strip {
  display: none;
}

.myclass-pet-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 6px 0 rgba(239, 228, 207, 0.85));
}

.myclass-pet-copy {
  min-width: 0;
}

.myclass-pet-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text, #3a3a3a);
  font-size: calc(14px * var(--card-scale, 1));
  font-weight: 900;
}

.myclass-pet-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.myclass-pet-state {
  margin-top: 2px;
  color: var(--sub, #8e8c84);
  font-size: calc(12px * var(--card-scale, 1));
  font-weight: 700;
}

.myclass-pet-progress {
  height: calc(8px * var(--card-scale, 1));
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #f3eadc;
}

.myclass-pet-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd45a, #69a790);
}

.myclass-pet-select {
  width: 100%;
  min-height: 30px;
  margin-top: 8px;
  background: #e9f8ed !important;
  color: #104d3d !important;
}

.myclass-pet-strip.is-weak {
  background: linear-gradient(180deg, #fff8f3, #f8f3ed);
}

.myclass-pet-strip.is-weak .myclass-pet-progress i {
  background: linear-gradient(90deg, #ffb4a8, #b6aa9a);
}

.myclass-pet-modal {
  position: fixed;
  inset: 0;
  z-index: 4100;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(58, 58, 58, 0.18);
}

.myclass-pet-modal.is-open {
  display: grid;
}

.myclass-pet-dialog {
  width: min(920px, 96vw);
  max-height: 92vh;
  overflow: auto;
  padding: 20px;
  border: 2px solid var(--line, #efe7da);
  border-radius: 20px;
  background: var(--paper, #fff);
  box-shadow: 0 10px 0 var(--shadow, #efe4cf);
}

.myclass-pet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.myclass-pet-head h2 {
  margin: 0;
  color: var(--text, #3a3a3a);
  font-size: 22px;
  font-weight: 900;
}

.myclass-pet-close {
  width: 36px;
  height: 36px;
  background: #f8f3ed !important;
}

.myclass-pet-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.myclass-pet-choice {
  min-height: 214px;
  padding: 12px 10px;
  border: 2px solid var(--line, #efe7da);
  border-radius: 14px;
  background: #fffaf2;
  box-shadow: 0 5px 0 var(--shadow, #efe4cf);
  text-align: center;
}

.myclass-pet-choice.is-selected {
  border-color: #69a790;
  background: #f0fff7;
  box-shadow: 0 5px 0 #bde3d5;
}

.myclass-pet-choice img {
  width: min(132px, 100%);
  aspect-ratio: 1;
  margin: 0 auto 8px;
  object-fit: contain;
}

.myclass-pet-choice strong {
  display: block;
  color: var(--text, #3a3a3a);
  font-size: 15px;
}

.myclass-pet-choice span {
  display: block;
  margin: 4px 0 10px;
  color: var(--sub, #8e8c84);
  font-size: 12px;
}

.myclass-pet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.myclass-pet-actions button {
  min-height: 36px;
  padding: 0 18px;
}

.myclass-pet-primary {
  background: #e9f8ed !important;
  color: #104d3d !important;
}

.myclass-pet-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.myclass-pet-settings-grid label {
  display: grid;
  gap: 6px;
  color: var(--text, #3a3a3a);
  font-size: 13px;
  font-weight: 900;
}

.myclass-pet-settings-grid input,
.myclass-pet-settings-grid select {
  min-height: 38px;
  padding: 8px 10px;
  border: 2px solid var(--line, #efe7da);
  border-radius: 10px;
  background: #fffaf2;
}

@media (max-width: 760px) {
  .myclass-pet-toolbar {
    right: 10px;
    bottom: 10px;
    max-width: calc(100vw - 20px);
  }

  .myclass-pet-strip {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .myclass-pet-image {
    width: min(132px, 80%);
  }

  .myclass-pet-title {
    justify-content: center;
    flex-wrap: wrap;
  }

  .myclass-pet-grid,
  .myclass-pet-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}