@layer components {

  
  .mh-plan-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-plan-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    padding: 10px;
    gap: 2px;
  }

  .mh-room {
    border: 3px solid var(--mh-black);
    background: #fff;
    opacity: 0;
    transform: scale(0.95);
    animation: popOnGrid 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
  }
  .mh-room-text {
    font-size: 0.6rem;
    font-weight: 700;
    color: #999;
    z-index: 1;
    pointer-events: none;
  }

  .mh-room-living { grid-column: 2 / 12; grid-row: 10 / 19; animation-delay: 0.2s; }
  .mh-room-dining { grid-column: 2 / 12; grid-row: 2 / 10; animation-delay: 0.4s; }
  .mh-room-sleep  { grid-column: 12 / 19; grid-row: 2 / 13; animation-delay: 0.6s; }
  .mh-room-bath   { grid-column: 12 / 19; grid-row: 13 / 19; animation-delay: 0.8s; }

  .mh-zone {
    position: absolute;
    border: 2px dashed var(--mh-neon);
    background: rgba(0, 230, 118, 0.05);
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mh-zone-living  { bottom: 10px; left: 10px; width: 75%; height: 60%; animation-delay: 1.2s; }
  .mh-zone-kitchen { top: 10px; right: 10px; width: 40%; height: 80%; animation-delay: 1.4s; }
  .mh-zone-dining  { bottom: 10px; left: 10px; width: 45%; height: 50%; animation-delay: 1.6s; }
  .mh-zone-bed     { top: 25px; right: 10px; width: 65%; height: 45%; animation-delay: 1.8s; }
  .mh-zone-bath    { bottom: 10px; right: 10px; width: 50%; height: 50%; animation-delay: 2.0s; }

  .mh-furniture {
    font-size: 1.6rem;
    opacity: 0;
    transform: scale(0) rotate(-10deg);
    animation: popFurniture 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .mh-furn-sofa    { animation-delay: 2.4s; }
  .mh-furn-tv      { font-size: 1rem; animation-delay: 2.6s; }
  .mh-furn-kitchen { animation-delay: 2.8s; }
  .mh-furn-table   { animation-delay: 3.0s; }
  .mh-furn-bed     { animation-delay: 3.2s; }
  .mh-furn-tub     { animation-delay: 3.6s; }
  .mh-furn-plant   { position: absolute; bottom: 10px; left: 10px; font-size: 1.2rem; animation-delay: 3.4s; }

  .mh-plan-tool {
    grid-column: 10 / 13;
    grid-row: 9 / 12;
    font-size: 2rem;
    z-index: 20;
    opacity: 0;
    background: #fff;
    border: 2px solid var(--mh-black);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--mh-black);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popOnGrid 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 4.0s;
  }

  
  @keyframes fadeIn { to { opacity: 1; } }
  @keyframes popFurniture { 0% { opacity: 0; transform: scale(0) rotate(-15deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }

  
  .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:first-child { white-space: nowrap; padding-right: 12px; }

  
  @media (prefers-reduced-motion: reduce) {
    .mh-room, .mh-zone, .mh-furniture, .mh-plan-tool {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}