/* Color Name + Mood Finder — soft celestial orb panel (spec 16). */

.pct-mood-layout {
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  grid-template-areas:
    "form result"
    "orb result";
  align-items: start;
}

.pct-mood-layout .paletier-tool-form { grid-area: form; }
.pct-mood-layout .pct-color-orb { grid-area: orb; }
.pct-mood-layout .paletier-tool-result {
  grid-area: result;
  min-height: 0;
}

.pct-color-orb {
  min-height: 220px;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, #f3ece7, #edeff4);
  overflow: hidden;
  position: relative;
}

.pct-color-orb span {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--pct-current-color, #9caf88);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
  transition: background .4s ease;
}

.pct-color-orb i {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(120, 110, 130, .35);
}

[data-theme="dark"] .pct-color-orb {
  background: linear-gradient(165deg, #26242a, #202024);
}

@media (max-width: 1024px) {
  .pct-mood-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "orb"
      "result";
  }
  .pct-color-orb { min-height: 200px; }
}

@media (max-width: 640px) {
  .pct-color-orb {
    min-height: 160px;
  }
  .pct-color-orb span {
    width: 132px;
    height: 132px;
  }
  .pct-color-orb i {
    width: 176px;
    height: 176px;
  }
}