.indy-builder-frame {

  overflow: hidden;

  border: 1px solid var(--indy-color-border);

  border-radius: var(--indy-radius-lg);

  background: var(--indy-color-surface);

  box-shadow: var(--indy-shadow-md);

}



.indy-builder-topbar {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: var(--indy-space-3);

  padding: var(--indy-space-4);

  border-bottom: 1px solid var(--indy-color-border);

  background: var(--color-primary-dark);

  color: #FFFFFF;

}



.indy-builder {

  display: grid;

  grid-template-columns: 270px minmax(0, 1fr) 310px;

  min-height: 560px;

}



.indy-builder__panel,

.indy-admin-panel {

  background: var(--indy-color-surface);

}



.indy-builder__panel {

  display: grid;

  align-content: start;

  gap: var(--indy-space-4);

  padding: var(--indy-space-4);

}



.indy-builder__panel--left {

  border-right: 1px solid var(--indy-color-border);

}



.indy-builder__panel--right {

  border-left: 1px solid var(--indy-color-border);

}



.indy-builder__canvas {

  display: grid;

  min-height: 560px;

  place-items: center;

  padding: var(--indy-space-6);

  background:

    linear-gradient(90deg, rgba(23, 63, 138, 0.06) 1px, transparent 1px),

    linear-gradient(0deg, rgba(23, 63, 138, 0.06) 1px, transparent 1px),

    #F9FBFE;

  background-size: 30px 30px;

}



.indy-builder__artboard {

  position: relative;

  width: min(78%, 430px);

  aspect-ratio: 23 / 30;

  border: 2px solid var(--color-primary);

  border-radius: var(--indy-radius-sm);

  background: #FFFFFF;

  box-shadow: 0 24px 42px rgba(15, 45, 104, 0.18);

}



.indy-builder__safe {

  position: absolute;

  inset: 24px;

  border: 1px dashed rgba(23, 63, 138, 0.35);

}



.indy-builder__item {

  position: absolute;

  inset: 23% auto auto 22%;

  width: 48%;

  aspect-ratio: 4 / 3;

  border: 2px solid var(--color-accent);

  border-radius: var(--indy-radius-sm);

  background: rgba(229, 57, 53, 0.12);

}



.indy-builder__zoom {

  position: absolute;

  right: var(--indy-space-3);

  bottom: var(--indy-space-3);

  display: flex;

  gap: var(--indy-space-2);

}



.indy-builder-product {

  display: grid;

  grid-template-columns: 64px minmax(0, 1fr);

  gap: var(--indy-space-3);

  align-items: center;

  padding: var(--indy-space-3);

  border: 1px solid var(--indy-color-border);

  border-radius: var(--indy-radius-md);

  background: var(--indy-color-surface-soft);

}



.indy-builder-product img {

  width: 64px;

  height: 64px;

  object-fit: contain;

}



.indy-builder-product strong,

.indy-builder-product span {

  display: block;

}



.indy-builder-product strong {

  color: var(--color-primary-dark);

  font-weight: 900;

}



.indy-builder-product span {

  color: var(--indy-color-muted);

  font-size: 0.82rem;

}



.indy-tool-list {

  display: grid;

  gap: var(--indy-space-2);

}



.indy-tool-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--indy-space-2);

  padding: var(--indy-space-3);

  border: 1px solid var(--indy-color-border);

  border-radius: var(--indy-radius-sm);

  background: var(--indy-color-surface-soft);

}



.indy-summary-line {

  display: flex;

  justify-content: space-between;

  gap: var(--indy-space-3);

  padding-bottom: var(--indy-space-2);

  border-bottom: 1px solid var(--indy-color-border);

  color: var(--indy-color-muted);

}



.indy-summary-line strong {

  color: var(--indy-color-ink);

}

@media (max-width: 1023px) {
  .indy-builder {
    grid-template-columns: 1fr;
  }

  .indy-builder__panel--left,
  .indy-builder__panel--right {
    border: 0;
    border-bottom: 1px solid var(--indy-color-border);
  }

  .indy-builder__canvas {
    min-height: 420px;
  }
}

@media (max-width: 767px) {
  .indy-builder__canvas {
    min-height: 360px;
    padding: var(--indy-space-4);
  }

  .indy-builder__artboard {
    width: min(88%, 330px);
  }
}