/* 宝石页主内容与类型筛选侧栏；不影响其他工具页面。 */
.gem-calculator-shell {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.gem-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.gem-layout > * {
  min-width: 0;
}

.gem-main,
.gem-layout > .gem-selector {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.gem-main {
  grid-column: 1;
  grid-row: 1;
  padding: clamp(18px, 2.4vw, 28px);
}

.gem-layout > .gem-selector {
  position: sticky;
  top: 24px;
  grid-column: 2;
  grid-row: 1;
  max-height: calc(100vh - 48px);
  margin: 0;
  padding: 20px;
  overflow-y: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.gem-layout .gem-selector-heading {
  margin-bottom: 12px;
}

.gem-layout .gem-selector-title {
  color: var(--jade-dark);
  font-size: 0.92rem;
}

.gem-layout .gem-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gem-layout .gem-option {
  justify-content: flex-start;
}

.gem-layout .embedding-mode-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.gem-layout .embedding-mode-title {
  display: block;
  margin-bottom: 8px;
  color: var(--jade-dark);
  font-size: 0.82rem;
  font-weight: 700;
}

.gem-layout .embedding-toggle {
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  color: #52645c;
  background: #f5f8f6;
}

.gem-layout .embedding-toggle:hover {
  background: #eef7f2;
}

.gem-layout .embedding-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--jade) 42%, transparent);
  outline-offset: 2px;
}

.gem-layout .embedding-toggle[aria-pressed="true"] {
  color: white;
  background: var(--jade-dark);
  border-color: var(--jade-dark);
}

.gem-layout .embedding-toggle:disabled {
  color: #7a8d84;
  background: #eef4f0;
  border-color: var(--line);
  opacity: 1;
}

.gem-layout .embedding-toggle strong {
  min-width: 4em;
  text-align: left;
}

.gem-layout .embedding-switch {
  position: relative;
  width: 34px;
  height: 20px;
  flex: 0 0 auto;
  padding: 2px;
  background: #a5b4ad;
  border-radius: 999px;
  transition: background-color 160ms ease;
}

.gem-layout .embedding-switch-thumb {
  display: block;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(25 52 39 / 0.28);
  transition: transform 160ms ease;
}

.gem-layout .embedding-toggle[aria-pressed="true"] .embedding-switch {
  background: #8fd1ae;
}

.gem-layout .embedding-toggle[aria-pressed="true"] .embedding-switch-thumb {
  transform: translateX(14px);
}

.gem-layout .embedding-toggle:disabled .embedding-switch {
  background: #c3cec8;
}

.gem-layout .embedding-mode-state {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
}

.gem-layout .embedding-mode-description {
  margin: 8px 0 0;
  color: #65776f;
  font-size: 0.78rem;
  line-height: 1.55;
}

.gem-main .gem-price-open {
  white-space: nowrap;
}

.gem-main .summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gem-main .summary-card:nth-child(-n + 3) {
  grid-column: span 2;
}

.gem-main .summary-card:nth-child(n + 4) {
  grid-column: span 3;
}

.gem-main .summary-card strong {
  overflow-wrap: anywhere;
  font-size: clamp(1.5rem, 2.2vw, 2.15rem);
}

@media (min-width: 1101px) and (max-width: 1240px) {
  .gem-main .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gem-main .gem-price-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .gem-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .gem-layout > .gem-selector,
  .gem-main {
    grid-column: 1;
  }

  .gem-layout > .gem-selector {
    position: static;
    grid-row: 1;
    max-height: none;
    overflow-y: visible;
  }

  .gem-main {
    grid-row: 2;
  }

  .gem-layout .gem-options {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .gem-main .summary-grid {
    grid-template-columns: 1fr 1.1fr 1.3fr 1fr 1fr;
  }

  .gem-main .summary-card:nth-child(n) {
    grid-column: auto;
  }
}

@media (max-width: 860px) {
  .gem-layout .gem-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gem-main .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .gem-main,
  .gem-layout > .gem-selector {
    padding: 16px;
    border-radius: 16px;
  }

  .gem-layout .gem-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gem-main .controls,
  .gem-main .summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}