.kit-section--seal {
  display: grid;
  gap: var(--space-5);
}

.seal-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

.seal-side,
.seal-main-card,
.seal-display-panel,
.seal-builder-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(174, 205, 218, 0.13);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 120% 120% at 0% 0%, rgba(104, 169, 206, 0.08), transparent 70%),
    rgba(2, 8, 13, 0.34);
  box-shadow: inset 0 1px 0 rgba(239, 231, 214, 0.055);
}

.seal-side,
.seal-main-card {
  padding: var(--space-5);
}

.seal-side {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.seal-side h3,
.seal-display-panel h3,
.seal-builder-panel h3 {
  color: var(--text-main);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  font-weight: 560;
  line-height: 1.12;
}

.seal-side p,
.seal-display-panel p,
.seal-builder-panel p,
.seal-preview-content p {
  color: var(--text-soft);
  line-height: 1.55;
}

.seal-reading-facts {
  display: grid;
  gap: var(--space-2);
}

.seal-reading-facts div {
  display: grid;
  gap: 3px;
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(2, 8, 13, 0.26);
}

.seal-reading-facts span,
.seal-slider span,
.seal-preview-content span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.seal-reading-facts strong {
  color: var(--text-main);
  font-weight: 620;
}

.seal-main-card {
  display: grid;
  gap: var(--space-4);
}

.seal-complete-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  min-height: 560px;
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border: 1px solid rgba(239, 207, 145, 0.18);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 48% 42% at 38% 46%, rgba(239, 207, 145, 0.13), transparent 70%),
    radial-gradient(ellipse 56% 50% at 70% 56%, rgba(104, 169, 206, 0.12), transparent 72%),
    rgba(2, 8, 13, 0.28);
}

.seal-emblem {
  display: grid;
  place-items: center;
  width: min(100%, 480px);
  aspect-ratio: 1;
  margin-inline: auto;
  filter: drop-shadow(0 22px 70px rgba(0, 0, 0, 0.46));
}

.seal-emblem svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.seal-emblem--sigil {
  width: min(100%, 540px);
}

.moment-seal-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.seal-svg__soft {
  fill: rgba(104, 169, 206, 0.035);
  stroke: rgba(239, 207, 145, 0.08);
}

.seal-svg__ring,
.seal-svg__arc,
.seal-svg__line,
.seal-svg__petal {
  fill: none;
  stroke: rgba(239, 207, 145, 0.72);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.seal-svg__ring.is-thin {
  stroke: rgba(239, 207, 145, 0.36);
  stroke-width: 0.8;
}

.seal-svg__ring.is-dashed {
  stroke: rgba(104, 169, 206, 0.46);
  stroke-dasharray: 3 8;
}

.seal-svg__arc {
  stroke-width: 2.2;
  stroke-linecap: round;
}

.seal-svg__arc.is-blue {
  stroke: rgba(104, 169, 206, 0.68);
}

.seal-svg__line {
  stroke: rgba(239, 207, 145, 0.22);
  stroke-width: 0.9;
}

.seal-svg__petal {
  fill: rgba(104, 169, 206, 0.08);
  stroke: rgba(239, 207, 145, 0.62);
}

.seal-svg__nodes circle {
  fill: rgba(239, 207, 145, 0.78);
  stroke: rgba(2, 8, 13, 0.82);
  stroke-width: 2;
}

.seal-svg__core {
  fill: rgba(239, 207, 145, 0.72);
  stroke: rgba(239, 231, 214, 0.84);
  stroke-width: 1;
  filter:
    drop-shadow(0 0 12px rgba(239, 207, 145, 0.72))
    drop-shadow(0 0 28px rgba(214, 168, 95, 0.36));
}

.seal-svg__tiles path {
  fill: rgba(104, 169, 206, 0.24);
  stroke: rgba(239, 207, 145, 0.58);
  stroke-width: 1;
}

.seal-svg__tiles path:nth-child(2n) {
  fill: rgba(214, 168, 95, 0.16);
}

.seal-preview-content {
  display: grid;
  gap: var(--space-3);
  max-width: 720px;
  justify-self: center;
  text-align: center;
}

.seal-preview-content span {
  color: var(--accent-amber);
}

.seal-preview-content h3 {
  color: var(--text-main);
  font-size: clamp(var(--text-xl), 2.25vw, var(--text-3xl));
  font-weight: 620;
  line-height: 1.08;
}

.seal-mini-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
  width: min(100%, 460px);
  justify-self: center;
}

.seal-mini-cards figure {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  justify-items: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.seal-mini-cards .arcana-card {
  width: min(100%, 112px);
  cursor: pointer;
}

.seal-mini-cards .arcana-card img {
  display: block;
  width: 100%;
  height: auto;
}

.seal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.seal-display-panel .glass-panel__inner {
  display: grid;
  gap: var(--space-5);
}

.seal-display-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.52fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.seal-settings,
.seal-info-preview {
  display: grid;
  gap: var(--space-3);
}

.seal-slider {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(104, 169, 206, 0.045), transparent 68%),
    rgba(2, 8, 13, 0.26);
}

.seal-slider span,
.seal-info-block span {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.seal-slider input {
  width: 100%;
  accent-color: var(--accent-amber);
}

.seal-slider em {
  color: var(--text-muted);
  font-style: normal;
}

.seal-info-preview {
  align-content: start;
  padding: var(--space-4);
  border: 1px solid rgba(239, 207, 145, 0.14);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(214, 168, 95, 0.08), transparent 72%),
    rgba(2, 8, 13, 0.26);
}

.seal-info-block {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(2, 8, 13, 0.24);
}

.seal-info-block.is-hidden {
  display: none;
}

.seal-info-block strong {
  color: var(--text-main);
  font-weight: 620;
}

.seal-info-block p {
  color: var(--text-soft);
  line-height: 1.55;
}

.seal-builder-panel .glass-panel__inner {
  display: grid;
  gap: var(--space-5);
}

.seal-builder {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.seal-builder-controls {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.seal-builder-control {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  text-align: left;
  background:
    linear-gradient(135deg, rgba(104, 169, 206, 0.045), transparent 68%),
    rgba(2, 8, 13, 0.26);
  cursor: pointer;
}

.seal-builder-field {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(104, 169, 206, 0.045), transparent 68%),
    rgba(2, 8, 13, 0.26);
}

.seal-builder-field span {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.seal-builder-field input,
.seal-builder-field select,
.seal-builder-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(174, 205, 218, 0.13);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font: inherit;
  line-height: 1.45;
  background: rgba(2, 8, 13, 0.34);
  outline: none;
}

.seal-builder-field input,
.seal-builder-field select {
  min-height: 44px;
  padding: 0 var(--space-3);
}

.seal-builder-field textarea {
  min-height: 92px;
  resize: vertical;
  padding: var(--space-3);
}

.seal-builder-field--wide textarea {
  min-height: 78px;
}

.seal-builder-field input:focus,
.seal-builder-field select:focus,
.seal-builder-field textarea:focus {
  border-color: rgba(239, 207, 145, 0.42);
  box-shadow: 0 0 0 3px rgba(239, 207, 145, 0.08);
}

.seal-builder-range,
.seal-builder-check {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(104, 169, 206, 0.045), transparent 68%),
    rgba(2, 8, 13, 0.26);
}

.seal-builder-range span,
.seal-builder-check span {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.seal-builder-range em {
  color: var(--text-muted);
  font-style: normal;
}

.seal-builder-range input {
  width: 100%;
  accent-color: var(--accent-amber);
}

.seal-builder-check {
  grid-template-columns: auto 1fr;
  align-items: center;
  cursor: pointer;
}

.seal-builder-check input {
  accent-color: var(--accent-amber);
}

.seal-builder-control.is-active {
  border-color: rgba(239, 207, 145, 0.34);
  background:
    linear-gradient(135deg, rgba(214, 168, 95, 0.1), transparent 70%),
    rgba(7, 16, 24, 0.32);
}

.seal-builder-control span,
.seal-builder-control em,
.seal-builder-legend span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.seal-builder-control span {
  color: var(--accent-amber);
}

.seal-builder-control strong {
  color: var(--text-main);
  font-weight: 620;
}

.seal-builder-preview {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  justify-items: center;
  min-height: 520px;
  padding: var(--space-5);
  border: 1px solid rgba(239, 207, 145, 0.14);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 60% 50% at 50% 48%, rgba(239, 207, 145, 0.1), transparent 70%),
    rgba(2, 8, 13, 0.24);
}

.seal-builder-live-card {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: var(--space-4);
  justify-items: center;
  padding: var(--space-4);
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 50% 38%, rgba(239, 207, 145, 0.09), transparent 34%),
    linear-gradient(135deg, rgba(104, 169, 206, 0.055), transparent 68%),
    rgba(2, 8, 13, 0.28);
}

.seal-builder-live-card > div:first-child {
  display: grid;
  width: 100%;
  gap: var(--space-2);
}

.seal-builder-live-card span {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.seal-builder-live-card strong {
  color: var(--text-main);
  font-size: var(--text-xl);
  font-weight: 620;
}

.seal-builder-live-card p {
  margin: 0;
}

.seal-builder-summary-card,
.seal-builder-summary-grid div {
  width: 100%;
  padding: var(--space-4);
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(2, 8, 13, 0.28);
}

.seal-builder-summary-card {
  display: grid;
  gap: var(--space-2);
}

.seal-builder-summary-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.seal-builder-summary-card span,
.seal-builder-summary-grid span {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.seal-builder-summary-card strong,
.seal-builder-summary-grid strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-main);
  font-size: var(--text-xl);
  font-weight: 620;
}

.seal-emblem--builder {
  width: min(100%, 420px);
}

.seal-emblem--builder-live {
  width: min(100%, 520px);
}

.builder-layer--cards .seal-svg__ring {
  stroke: rgba(239, 207, 145, 0.72);
}

.builder-layer--positions .seal-svg__line,
.builder-layer--positions circle {
  stroke: rgba(239, 207, 145, 0.42);
  fill: rgba(239, 207, 145, 0.72);
}

.builder-layer--question .seal-svg__petal {
  stroke: rgba(104, 169, 206, 0.72);
  fill: rgba(104, 169, 206, 0.1);
}

.builder-layer--moment .seal-svg__ring,
.builder-layer--moment .seal-svg__arc {
  stroke: rgba(104, 169, 206, 0.66);
}

.seal-builder-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.seal-builder-legend span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(174, 205, 218, 0.1);
  border-radius: var(--radius-pill);
  background: rgba(2, 8, 13, 0.28);
}

.seal-builder-legend i {
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(239, 207, 145, 0.74);
}

.seal-builder-legend .is-positions {
  background: rgba(214, 168, 95, 0.58);
}

.seal-builder-legend .is-question,
.seal-builder-legend .is-moment {
  background: rgba(104, 169, 206, 0.7);
}

@media (max-width: 1320px) {
  .seal-complete-preview,
  .seal-display-grid,
  .seal-builder {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .seal-side,
  .seal-main-card {
    padding: var(--space-4);
  }

  .seal-complete-preview {
    min-height: auto;
    padding: var(--space-4);
  }

  .seal-mini-cards {
    grid-template-columns: 1fr;
  }

  .seal-mini-cards .arcana-card {
    width: 160px;
  }

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

.kit-shell[data-viewport="mobile"] .seal-workspace,
.kit-shell[data-viewport="mobile"] .seal-complete-preview,
.kit-shell[data-viewport="mobile"] .seal-display-grid,
.kit-shell[data-viewport="mobile"] .seal-builder,
.kit-shell[data-viewport="mobile"] .seal-mini-cards {
  grid-template-columns: 1fr;
}

.kit-shell[data-viewport="mobile"] .seal-side,
.kit-shell[data-viewport="mobile"] .seal-main-card {
  padding: var(--space-4);
}

.kit-shell[data-viewport="mobile"] .seal-complete-preview {
  min-height: auto;
  padding: var(--space-4);
}

.kit-shell[data-viewport="mobile"] .seal-mini-cards .arcana-card {
  width: 160px;
}

.kit-shell[data-viewport="mobile"] .seal-builder-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}