@layer components {

  
  .mh-kitchen-container {
    width: 100%;
    height: 380px;
    background-color: #fdfdfd;
    border: 2px solid var(--mh-black);
    box-shadow: 8px 8px 0px var(--mh-black);
    background-image:
      linear-gradient(#e0e0e0 1px, transparent 1px),
      linear-gradient(90deg, #e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
    position: relative;
    overflow: hidden;
  }
  .mh-kitchen-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
  }
  .mh-kt-walls {
    grid-column: 4 / 18;
    grid-row: 4 / 18;
    border: 4px solid var(--mh-black);
    border-right: 4px dashed #999;
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards;
  }
  .mh-kt-unit {
    background: #eee;
    border: 1px solid #000;
    opacity: 0;
    animation: popOnGrid 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .mh-kt-long  { grid-column: 4 / 15; grid-row: 4 / 7;  animation-delay: 0.5s; }
  .mh-kt-short { grid-column: 4 / 7;  grid-row: 7 / 15; animation-delay: 0.7s; }
  .mh-kt-island {
    grid-column: 10 / 15;
    grid-row: 9 / 13;
    animation-delay: 0.9s;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #666;
  }
  .mh-kt-sink {
    grid-column: 10 / 13;
    grid-row: 4 / 7;
    background: #fff;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards 1.2s;
    font-size: 1.2rem;
  }
  .mh-kt-stove {
    grid-column: 4 / 7;
    grid-row: 9 / 12;
    background: #fff;
    border: 1px solid #333;
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards 1.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
  }
  .mh-kt-upper {
    grid-column: 7 / 15;
    grid-row: 4 / 6;
    border: 2px dashed var(--mh-neon);
    background: rgba(0, 230, 118, 0.1);
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards 2.0s;
  }
  .mh-kt-measure-x {
    grid-column: 4 / 15;
    grid-row: 2 / 3;
    border-bottom: 1px solid #000;
    position: relative;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 2.5s;
  }
  .mh-kt-measure-x::before,
  .mh-kt-measure-x::after {
    content: "";
    position: absolute;
    bottom: -3px;
    height: 7px;
    width: 1px;
    background: #000;
  }
  .mh-kt-measure-x::before { left: 0; }
  .mh-kt-measure-x::after  { right: 0; }
  .mh-kt-measure-x span {
    position: absolute;
    bottom: 2px;
    width: 100%;
    text-align: center;
    font-size: 0.6rem;
  }
  .mh-kt-worker {
    grid-column: 15 / 18;
    grid-row: 10 / 13;
    font-size: 2.5rem;
    z-index: 5;
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards 3.0s;
  }
  
  @keyframes fadeIn { to { opacity: 1; } }

  
  .mh-modal-table { width: 100%; font-size: 0.9rem; margin: 1rem 0; border-collapse: collapse; }
  .mh-modal-table td { padding: 4px 0; vertical-align: top; }
  .mh-modal-table td:last-child { text-align: right; white-space: nowrap; }

  
  @media (prefers-reduced-motion: reduce) {
    .mh-kt-walls, .mh-kt-unit, .mh-kt-sink, .mh-kt-stove,
    .mh-kt-upper, .mh-kt-measure-x, .mh-kt-worker {
      animation: none !important;
      opacity: 1 !important;
    }
  }
}