#routineMakerModal, #routineMakerModal * {
    box-sizing: border-box !important;
  }

  #rt-render-area { 
    background: white; 
    width: 100% !important; 
    max-width: 100% !important;
    aspect-ratio: 1/1.414; 
    padding: 20px; 
    color: #000; 
    font-size: 11px; 
    border: 1px solid #000; 
    font-family: "SolaimanLipi", sans-serif !important; 
    text-align: left;
    margin: 0 auto;
    overflow: hidden;
  }
  
  #rt-render-area table { 
    width: 100% !important; 
    border-collapse: collapse; 
    table-layout: fixed; 
    margin-top: 10px; 
  }
  
  #rt-render-area th, #rt-render-area td { 
    border: 1px solid #000; 
    padding: 4px; 
    text-align: center; 
    word-wrap: break-word; 
    font-size: 10px;
  }
  
  #rt-render-area th { background: #f2f2f2; font-weight: bold; }
  
  .rt-input-row { 
    display: grid; 
    grid-template-columns: 1fr 40px; 
    gap: 5px; 
    background: #fff; 
    padding: 5px; 
    border-radius: 6px; 
    border: 1px solid #cbd5e1; 
    margin-bottom: 5px;
  }
  
  .rt-day-box { 
    background: #fff; 
    padding: 10px; 
    border-radius: 8px; 
    border: 1px solid #cbd5e1; 
    margin-bottom: 10px;
  }
  
  #routineMakerModal input { 
    width: 100%; 
    padding: 8px; 
    border: 1px solid #cbd5e1; 
    border-radius: 6px; 
    outline: none; 
    font-family: "SolaimanLipi", sans-serif !important; 
  }

  @media (max-width: 768px) {
    .routineMakerModal {
      width: 98% !important;
      margin: 10px auto !important;
      padding: 15px 10px !important;
      max-height: 95vh;
      overflow-y: auto;
    }

    .fq-main-layout { 
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      gap: 15px !important;
    }
    
    .fq-preview-side { 
      order: -1; 
      width: 100% !important;
    }

    .fq-inputs-side {
      width: 100% !important;
    }

    #rt-render-area { 
      padding: 10px; 
      font-size: 9px;
      width: 100% !important;
      height: auto !important;
      aspect-ratio: auto !important;
      min-height: 350px;
      overflow-x: auto;
    }

    #rt-render-area table {
      min-width: 400px;
    }

    .fq-final-actions {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px;
    }
  }

  @media (max-width: 480px) {
    #rt-main-title { font-size: 18px !important; }
    .fq-final-actions {
      grid-template-columns: 1fr !important;
    }
    #rt-render-area {
       padding: 8px;
    }
  }