.tk-cake-builder {
  --tk-sponge-base: #f3d8a7;
  --tk-sponge-accent: #e2b66d;
  --tk-cream-base: #f7edd4;
  --tk-cream-accent: #eadcb7;
  --tk-crunch-base: #c98a5d;
  --tk-crunch-accent: #9f6743;
  --tk-jelly-base: #ef6d8a;
  --tk-jelly-accent: #d54f70;
  --tk-drip-main: #8b5a3c;
  --tk-drip-shade: #6f432c;
  --tk-sponge-texture: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 8px, rgba(255, 255, 255, 0.04) 8px 16px);
  --tk-cream-texture: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0 6px, rgba(255, 255, 255, 0.06) 6px 12px);
  --tk-crunch-texture:
    radial-gradient(circle at 12px 9px, rgba(255, 255, 255, 0.26) 0 2px, transparent 3px),
    radial-gradient(circle at 34px 14px, rgba(68, 43, 29, 0.26) 0 2px, transparent 3px);
  --tk-jelly-texture: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 2px, rgba(255, 255, 255, 0.08) 2px 6px);
  --tk-top-texture: repeating-radial-gradient(circle at 20% 32%, rgba(255, 255, 255, 0.3) 0 4px, rgba(255, 255, 255, 0.08) 4px 10px);
  --tk-drip-texture: repeating-linear-gradient(130deg, rgba(255, 255, 255, 0.12) 0 7px, rgba(255, 255, 255, 0) 7px 14px);
  --tk-text: #2d2018;
  --tk-muted: #6d5a4d;

  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(300px, 0.9fr);
  gap: 28px;
  font-family: "Sora", "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--tk-text);
  background: linear-gradient(120deg, #fff7ec 0%, #fff1d8 48%, #ffe7cf 100%);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 12px 34px rgba(121, 71, 33, 0.12);
  border: 1px solid #f6dcc0;
}

.tk-builder-panel,
.tk-preview-panel {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid #f3d5b5;
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(1px);
}

.tk-title,
.tk-preview-title {
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.tk-subtitle {
  margin: 0 0 18px;
  color: var(--tk-muted);
  font-size: 14px;
}

.tk-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 14px;
}

.tk-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tk-field label,
.tk-summary-wrap label {
  font-size: 13px;
  font-weight: 700;
}

.tk-field select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #d8b494;
  background: #fffdf8;
  color: var(--tk-text);
  padding: 10px 12px;
  min-height: 42px;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tk-field select:focus-visible,
.tk-copy-btn:focus-visible {
  outline: none;
  border-color: #b35f2d;
  box-shadow: 0 0 0 3px rgba(226, 145, 82, 0.2);
}

.tk-summary-wrap {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tk-summary {
  width: 100%;
  resize: vertical;
  min-height: 130px;
  border: 1px solid #d8b494;
  border-radius: 12px;
  background: #fffcf7;
  color: var(--tk-text);
  padding: 12px;
  line-height: 1.45;
  font-family: "IBM Plex Mono", "Consolas", monospace;
  font-size: 13px;
}

.tk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tk-copy-btn {
  border: 1px solid #ba6f3f;
  background: linear-gradient(180deg, #df874e 0%, #c97039 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.tk-copy-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.tk-copy-status {
  min-height: 19px;
  font-size: 13px;
  color: var(--tk-muted);
}

.tk-preview-title {
  margin-bottom: 14px;
}

.tk-preview-stage {
  position: relative;
  border-radius: 18px;
  min-height: 320px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 22%, #fffdf9 0%, #ffe9c7 58%, #ffd9ad 100%);
  border: 1px solid #f0cdab;
  overflow: hidden;
}

.tk-preview-stage::after {
  content: "";
  position: absolute;
  inset: auto -80px -100px;
  height: 230px;
  background: radial-gradient(circle at 50% 0%, rgba(195, 108, 49, 0.16) 0%, rgba(255, 255, 255, 0) 75%);
}

.tk-cake {
  width: min(82%, 280px);
  position: relative;
  z-index: 1;
  padding-bottom: 34px;
}

.tk-cake-shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 12px;
  height: 25px;
  background: radial-gradient(ellipse at center, rgba(89, 47, 20, 0.35) 0%, rgba(89, 47, 20, 0) 72%);
  filter: blur(2px);
}

.tk-cake-body {
  position: relative;
  height: 230px;
  border-radius: 20px 20px 16px 16px;
  overflow: hidden;
  transform: perspective(500px) rotateX(4deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 7px 16px rgba(128, 74, 36, 0.22);
}

.tk-cake-layer,
.tk-cake-top,
.tk-cake-drip {
  position: absolute;
  left: 0;
  right: 0;
  transition: background 0.35s ease;
}

.tk-layer-sponge {
  bottom: 0;
  height: 38%;
  background: var(--tk-sponge-texture), linear-gradient(180deg, var(--tk-sponge-base) 0%, var(--tk-sponge-accent) 100%);
  background-size: 30px 30px, auto;
}

.tk-layer-cream {
  bottom: 38%;
  height: 25%;
  background: var(--tk-cream-texture), linear-gradient(180deg, var(--tk-cream-base) 0%, var(--tk-cream-accent) 100%);
  background-size: 26px 26px, auto;
}

.tk-layer-crunch {
  bottom: 63%;
  height: 14%;
  background: var(--tk-crunch-texture), linear-gradient(180deg, var(--tk-crunch-base) 0%, var(--tk-crunch-accent) 100%);
  background-size: 40px 24px, 45px 26px, auto;
}

.tk-layer-jelly {
  bottom: 77%;
  height: 11%;
  background: var(--tk-jelly-texture), linear-gradient(180deg, var(--tk-jelly-base) 0%, var(--tk-jelly-accent) 100%);
  background-size: 100% 14px, auto;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.tk-cake-top {
  top: 0;
  height: 23%;
  background:
    var(--tk-top-texture),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45) 0 8%, transparent 36%),
    linear-gradient(180deg, #fff6de 0%, var(--tk-cream-base) 100%);
  background-size: 32px 32px, auto, auto;
  border-bottom: 2px solid rgba(96, 58, 30, 0.12);
}

.tk-cake-drip {
  top: 0;
  height: 33%;
  background: var(--tk-drip-texture), linear-gradient(180deg, var(--tk-drip-main) 0%, var(--tk-drip-shade) 100%);
  background-size: 30px 30px, auto;
  clip-path: polygon(0 0, 100% 0, 100% 42%, 89% 42%, 86% 70%, 78% 70%, 75% 44%, 65% 44%, 61% 82%, 52% 82%, 49% 44%, 39% 44%, 34% 66%, 27% 66%, 22% 42%, 0 42%);
  opacity: 0.94;
}

.tk-chip-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tk-chip-list li {
  background: #fff7ea;
  border: 1px solid #e8c9a9;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .tk-cake-builder {
    grid-template-columns: 1fr;
  }

  .tk-field-grid {
    grid-template-columns: 1fr;
  }

  .tk-preview-stage {
    min-height: 270px;
  }

  .tk-cake {
    width: min(68vw, 270px);
  }
}